@titan-design/react-ui 0.9.3 → 0.11.0

package/src/components/custom/Workout/VelocityStrip.tsx

@@ -1,19 +1,19 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
-import {
-  View,
-  Text,
-  Pressable,
-  Animated,
-  Easing,
-  type ViewProps,
-  type ViewStyle,
-  type LayoutChangeEvent,
-} from 'react-native'
+import { View, Text, Pressable, Animated, type ViewProps, type ViewStyle } from 'react-native'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
-import { primitiveColors, primitiveRamps, sequentialEffort } from '../../../theme/tokens/primitives'
+import { primitiveColors, sequentialEffort } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
 import { formatVelocity } from '../../../utils/workout-format'
-import { SET_STRIP_VARIABLE_COLOR } from './SetStrip'
+import {
+  SetBarChart,
+  type SetSlot,
+  type SetBarGeometry,
+  ChartSideRail,
+  SET_BAR_DEFAULT_HEIGHT,
+} from '../charts/SetBarChart'
+import { ANIMATION_EASING } from '../charts/live-rep-growth'
 
 /**
  * Structural velocity-zone band accepted from an upstream analytics source
@@ -66,10 +66,63 @@ export interface VelocityStripProps extends ViewProps {
    */
   zones?: readonly VelocityZoneBandProp[]
   /**
-   * Live mode: index of the most-recently-completed rep. That bar animates in
-   * with a "pop"; if it is also the current set peak (a new best), it "bounces"
-   * instead. Only the latest bar animates. Honors `prefers-reduced-motion`.
-   * Framed `expanded` chart only (interactive tap-to-expand use).
+   * Bar-fill coloring mode. `loss` (DEFAULT) — color each performed bar by its
+   * velocity LOSS from the set's OWN best (see {@link getVelocityLossColor}), so a
+   * fatiguing set reads green→red by loss regardless of its absolute speed; ignores
+   * {@link zones} (it is a wholly separate scale). `zone` — color from the absolute
+   * velocity-zone scale ({@link zones} when provided, else the built-in
+   * ≥1.0/≥0.75/≥0.5 default). `todo`/`variable`/`continue` slots are unaffected either way.
+   */
+  barColor?: 'zone' | 'loss'
+  /**
+   * `hero` only: draw the VL20 / VL30 velocity-loss decision bands behind the bars
+   * (see {@link VelocityLossBands}). Defaults to on when {@link barColor} is `loss`
+   * (the default), off for `zone` — the bands and the loss bar-fill are the two
+   * halves of the same loss-relative language.
+   */
+  showLossBands?: boolean
+  /**
+   * `hero` only: `up` (default) grows bars UP from a bottom baseline; `down` mirrors
+   * the whole plot (bars grow DOWN from a top baseline, text upright). The diverging
+   * dual is just an `up` hero over a `down` hero sharing one axis — so any hero
+   * improvement reaches the dual for free.
+   */
+  orientation?: 'up' | 'down'
+  /**
+   * `hero` only: OVERRIDE the height-scaling denominator with `scaleMax * headroom` instead of
+   * this strip's own `peak`/`fixed` scale. Affects BAR HEIGHT ONLY — velocity-LOSS coloring and
+   * the running-best reference line still measure off THIS strip's own velocities. The diverging
+   * dual passes the pair's shared max here so a stronger arm's bars read TALLER against one common
+   * scale while each arm still colors by its own loss.
+   */
+  scaleMax?: number
+  /**
+   * `hero` only (internal): suppress this strip's own 2px baseline border. The diverging dual sets
+   * it on BOTH composed wings and draws ONE shared centre axis where they meet, so the axis is a
+   * single crisp line rather than two abutting baselines reading as a double-thick rule.
+   */
+  hideBaseline?: boolean
+  /**
+   * `hero` only (internal): the EXACT rendered column structure, overriding this strip's own
+   * slot-building. The diverging dual builds ONE index-locked structure shared by both wings (same
+   * rep indices, same WIDE-gap positions, same column count; a column a side didn't log renders
+   * `empty`) and passes it here so bars line up column-for-column across the centre axis. Bar
+   * height / color / the running-best reference still read this strip's own `velocities`.
+   */
+  columnSlots?: SetSlot[]
+  /**
+   * `hero` only: an optional stream / slot NAME (e.g. "Left Arm"), rendered as a rotated vertical
+   * edge label down the chart's left gutter — the same treatment the diverging dual gives each wing,
+   * so a single hero and a dual read consistently. Omitted → no gutter.
+   */
+  label?: string
+  /**
+   * Live mode: index of the most-recently-completed rep. That bar GROWS UP FROM
+   * THE BASELINE to its full height as it enters, tracking the rep as it lands;
+   * if it is also the current set peak (a new best) the growth slightly
+   * overshoots then settles, reading as a small bounce. Only the latest bar
+   * animates. Honors `prefers-reduced-motion`. Framed `expanded` chart and
+   * `hero` only (interactive tap-to-expand use).
    */
   liveRepIndex?: number
   /**
@@ -81,16 +134,17 @@ export interface VelocityStripProps extends ViewProps {
   onToggle?: () => void
   onRepPress?: (index: number, velocity: number) => void
   /**
-   * `mini` — a flat 3px static strip (set-type aware). `expanded` — the velocity-
-   * HEIGHT bar chart (rounded tops), whose chrome is prop-driven: with
-   * {@link showNumbers} or {@link showInfo} on it's the framed chart (raised surface,
-   * padding, per-bar m/s labels, mean/loss info row, interactive collapse); with both
-   * off it's a bare strip — the active-set "spotlight" of {@link ExerciseCard}. `hero`
-   * — the across-the-room, single-set wall treatment: tall bars, a per-bar m/s value
-   * label, a dashed running-best reference line, and dashed placeholders for the reps
-   * still to come (see {@link targetReps}). Reuses the zone scale and the live-rep pop.
+   * `compact` — the flat resting strip: {@link SetBarChart} in FLAT mode (uniform short bars, no
+   * value labels), sharing hero's exact geometry (colors, paper, spacing, chunk-notch, slots, gutter).
+   * `expanded` — the velocity-HEIGHT bar chart (rounded tops), whose chrome is prop-driven: with
+   * {@link showNumbers} or {@link showInfo} on it's the framed chart (raised surface, padding, per-bar
+   * m/s labels, mean/loss info row, interactive collapse); with both off it's a bare strip — the
+   * active-set "spotlight" of {@link ExerciseCard}. `hero` — the across-the-room, single-set wall
+   * treatment: tall bars, a per-bar m/s value label, a dashed running-best reference line, and dashed
+   * placeholders for the reps still to come (see {@link targetReps}). All three share SetBarChart, so
+   * bars align across compact / expanded / hero.
    */
-  variant?: 'mini' | 'expanded' | 'hero'
+  variant?: 'compact' | 'expanded' | 'hero'
   /** `expanded` / `hero` plot height in px (bars scale to this). Default 60 (`expanded`) / 220 (`hero`). */
   height?: number
   /**
@@ -182,6 +236,44 @@ export function calculateMeanVelocity(velocities: number[]): number {
   return sum / velocities.length
 }
 
+/**
+ * Velocity-loss band thresholds (loss %), the same VL10/VL20/VL30 coaching cues
+ * FatigueMeter's default thresholds use — kept in sync so a `barColor="loss"`
+ * strip and a fatigue hero's VL20/VL30 reference bands agree on where amber/red start.
+ */
+const VL_LOSS_THRESHOLDS: readonly [number, number, number] = [10, 20, 30]
+
+/**
+ * Map a per-rep velocity LOSS (%, from the set's own best — see {@link
+ * velocityLossForRep}) onto the same green→gold→orange→red scale as the absolute
+ * zone scale ({@link VEL_COLORS}), banded at the {@link VL_LOSS_THRESHOLDS}
+ * VL10/VL20/VL30 cues. Past VL20 reads orange ("past VL20 = amber" in coaching
+ * terms — this scale's amber/gold band is the yellow stop, orange is the VL20+
+ * band), past VL30 reads red, so a fatiguing set reads green→red by LOSS
+ * regardless of how slow its absolute velocity is.
+ */
+export function getVelocityLossColor(lossPct: number): string {
+  const [t1, t2, t3] = VL_LOSS_THRESHOLDS
+  if (lossPct < t1) return VEL_COLORS.green
+  if (lossPct < t2) return VEL_COLORS.yellow
+  if (lossPct < t3) return VEL_COLORS.orange
+  return VEL_COLORS.red
+}
+
+/**
+ * A single rep's velocity loss (%) relative to the set's own best rep, clamped to
+ * ≥ 0 (a best-so-far rep, or a set with no positive best, reports 0 loss — green).
+ * Rounded (matching {@link calculateVelocityLoss}'s convention) so a rep that is
+ * arithmetically the set's best — or lands exactly on a VL threshold — doesn't drift
+ * across a color-band boundary on floating-point noise (e.g. `1.0 − 0.9` ≈ `0.0999…998`).
+ * Feeds `barColor="loss"` bar coloring; distinct from {@link calculateVelocityLoss},
+ * which reports only the set's FINAL loss (last rep vs best) as a single summary number.
+ */
+function velocityLossForRep(velocity: number, best: number): number {
+  if (best <= 0) return 0
+  return Math.max(0, Math.round(((best - velocity) / best) * 100))
+}
+
 /** Classify a velocity into its band (slow → fast, min inclusive / max exclusive). */
 function classifyBand(
   velocity: number,
@@ -197,6 +289,18 @@ function bandColor(band: VelocityZoneBandProp): string {
   return bandIdToEffortColor[band.id] ?? VEL_COLORS.green
 }
 
+/**
+ * The zone → bar-color resolver, single-sourced so every variant (and the dual
+ * diverging sibling) colors reps identically: profile-derived `zones` map through
+ * {@link bandColor}; the default (no-zones) path uses the built-in 4-color scale.
+ * Color is ALWAYS the velocity zone — never the voltra side.
+ */
+function makeBarColorFor(zones?: readonly VelocityZoneBandProp[]): (v: number) => string {
+  const hasZones = zones != null && zones.length > 0
+  return (v: number): string =>
+    hasZones ? bandColor(classifyBand(v, zones)!) : zoneHexMap[getVelocityZoneColor(v)]
+}
+
 function getLossStyle(loss: number): Record<string, string> | null {
   if (loss > 25) return { color: VEL_COLORS.red }
   if (loss > 20) return { color: VEL_COLORS.orange }
@@ -248,11 +352,6 @@ const REP_GAP = 2
  */
 const WIDE_GAP = 8
 
-/** Grey fill for planned-but-unperformed reps (charcoal placeholder, literal hex). */
-const TODO_COLOR = primitiveColors.charcoal[300]
-/** The thin cyan-800 outline on the open-ended "continue" slot — reads as "keep going". */
-const CONTINUE_OUTLINE = primitiveRamps.cyan[800]
-
 /** The done-velocity array a set contributes to the mean / loss / zone summary. */
 function deriveDoneVelocities(set: VelocitySet): number[] {
   switch (set.type) {
@@ -352,353 +451,696 @@ function setAccessibilityLabel(set: VelocitySet, repCount: number): string {
   }
 }
 
-/** Per-slot accessibility label for the expanded set-type bars. */
-function slotAccessibilityLabel(slot: VelocitySlot, index: number): string {
-  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'
-  }
+/** Default framed `expanded` chart height (px). */
+const EXPANDED_HEIGHT = 60
+/** Default `compact` (flat resting strip) height (px) — a THIN radius-2 pill row, the resting glance. */
+const COMPACT_HEIGHT = 8
+
+/** The dashed running-best reference line color (the lightest charcoal step). */
+const HERO_REFERENCE_COLOR = primitiveColors.charcoal[0]
+
+/**
+ * A dashed running-best reference line spanning the plot width, absolutely positioned a
+ * pixel `offset` from the given `anchor` edge. Shared by the single `hero` chart (anchored
+ * to the baseline, `bottom`) and BOTH wings of the diverging dual chart (anchored to the
+ * centre axis, `top`) so the three sites render one line treatment (charcoal-0, 1px dashed).
+ * Presentation-only + non-interactive — the numeric best lives in each chart's container
+ * accessibility label, so the line itself is hidden from the a11y tree.
+ *
+ * REUSE FOLLOW-UP: `Sparkline` hand-rolls the same dashed-line overlay (plus opacity, an
+ * optional label, and a data-domain Y), and two lab specimens duplicate it again. A
+ * top-level `ReferenceLine` overlay primitive unifying all of them is a scoped follow-up
+ * (see the Workout README) — kept in-file here to keep the hero PR focused.
+ */
+function DashedReferenceLine({
+  anchor,
+  offset,
+  testID,
+}: {
+  anchor: 'top' | 'bottom'
+  offset: number
+  testID: string
+}) {
+  const edge: ViewStyle = anchor === 'top' ? { top: offset } : { bottom: offset }
+  return (
+    <View
+      accessibilityElementsHidden
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        borderTopWidth: 1,
+        borderStyle: 'dashed',
+        borderColor: HERO_REFERENCE_COLOR,
+        pointerEvents: 'none',
+        ...edge,
+      }}
+      testID={testID}
+    />
+  )
 }
 
-/** Straight-set expanded stub height for a planned (todo) rep, as a % of the plot. */
-const EXPANDED_TODO_STUB_PCT = 16
-/** Expanded height for advanced set-types (drop / myo / cluster / range / amrap): a short mini-style bar. */
-const EXPANDED_ENCODED_PCT = 45
+const BAND_LABEL_FONT = 'monospace'
+/**
+ * Below this plot height (px) the VL20/VL30 labels are DROPPED entirely (the dashed lines + washes
+ * stay) rather than shrunk into an overlapping smear. Tuned so a 120px dual (≈41px plot/wing) and the
+ * cramped mid-small range drop, while the accepted board scale (≈76px plot/wing) keeps its labels.
+ */
+const VL_LABEL_MIN_PLOT = 65
+const VL_SEMANTIC = getSemanticColors('dark')
 
-/** Default framed `expanded` chart height (px). */
-const EXPANDED_HEIGHT = 60
 /**
- * The `scale="fixed"` velocity ceiling (m/s). `peak` scales to the set's own max
- * (+15% headroom); `fixed` uses this constant so a bar's height reads the same
- * absolute velocity across sets (the spotlight).
+ * Velocity-LOSS decision bands for the `hero` variant: the VL20 / VL30 coaching
+ * cues (off the running best) drawn as absolutely-positioned bands + dashed
+ * threshold lines BEHIND the bars, on the hero's own peak scale so a bar dropping
+ * into the amber → red band reads as "these are your last effective reps". Shared
+ * by the single hero, the diverging dual wings, and {@link VelocityHero}; render
+ * it as the first child of the bottom-anchored plot container.
+ *
+ * `best` is the running-best velocity (the peak the loss is measured from);
+ * `scaleDenom` / `plotHeight` are the hero chart's bar-scaling geometry — a
+ * velocity `v` sits `(v / scaleDenom) * plotHeight` px up from the baseline,
+ * matching {@link HeroVelocityChart}'s `barHeight`.
  */
-const FIXED_MAX_VELOCITY = 1.15
-/** Minimum bare-strip bar height (px) — a planned / variable / continue stub, or a near-zero rep. */
-const BARE_STUB_HEIGHT = 3
-
-// --- Hero variant ------------------------------------------------------------
-// The across-the-room, single-set wall treatment. Absorbs the R2 "HeroVelocityBars"
-// candidate into VelocityStrip: tall bars + per-bar value labels + a dashed
-// running-best reference line + dashed placeholders for the reps still to come.
-
-/** Default `hero` plot height (px) — tall enough to read a set's velocity shape across a room. */
-const HERO_HEIGHT = 220
-/** Vertical band reserved above the tallest bar for its value label (px). */
-const HERO_LABEL_HEADROOM = 20
-/** Gap between hero bars (px) — a group-notch-free even rhythm at wall scale. */
-const HERO_BAR_GAP = 8
-/** Cap on a single hero bar's width so a 2–3 rep set doesn't render slab-wide bars (px). */
-const HERO_BAR_MAX_WIDTH = 120
-/** Below this per-bar width the value labels collide, so all but the peak + live rep are dropped. */
-const HERO_LABEL_MIN_BAR_WIDTH = 30
-/** Top-corner radius on hero bars (px). */
-const HERO_BAR_RADIUS = 5
-/** Minimum drawn height of a performed hero bar (px) — a near-zero rep still reads as a rep. */
-const HERO_MIN_BAR_HEIGHT = 4
-/** Dashed-stub border for a planned-but-unperformed hero rep (charcoal, reads on a dark wall). */
-const HERO_PENDING_COLOR = primitiveColors.charcoal[100]
-/** The dashed running-best reference line + its label (the lightest charcoal step). */
-const HERO_REFERENCE_COLOR = primitiveColors.charcoal[0]
+export function VelocityLossBands({
+  best,
+  scaleDenom,
+  plotHeight,
+  flip = false,
+}: {
+  best: number
+  scaleDenom: number
+  plotHeight: number
+  /** The parent plot is vertically mirrored (a `down` wing) — counter-flip the labels upright. */
+  flip?: boolean
+}) {
+  if (best <= 0 || scaleDenom <= 0 || plotHeight <= 0) return null
+  const yOf = (v: number): number => (v / scaleDenom) * plotHeight
+  const vl20 = best * 0.8
+  const vl30 = best * 0.7
+  // The VL20 / VL30 lines sit ~0.09·plotHeight apart, so on a short chart their labels crowd. Scale
+  // the label font to the plot height; below VL_LABEL_MIN_PLOT DROP the labels entirely (keep the
+  // dashed lines + washes) rather than shrink them into an illegible smear.
+  const vlFont = Math.round(Math.max(7, Math.min(9, plotHeight * 0.05)))
+  const showLabels = plotHeight >= VL_LABEL_MIN_PLOT
+  const band = (loV: number, hiV: number, color: string) => (
+    <View
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: yOf(loV),
+        height: Math.max(0, yOf(hiV) - yOf(loV)),
+        backgroundColor: color,
+      }}
+    />
+  )
+  // The label sits ~90% along the threshold, with the dashed line breaking around it (a long segment
+  // before + a short stub after) — near the quiet right end where a declining set has room. Below the
+  // label threshold the line spans full width with no text.
+  const threshold = (v: number, color: string, label: string) => (
+    <View
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: yOf(v),
+        // Collapse to zero height so the dashed border lands EXACTLY on `yOf(v)` — the
+        // band edge — instead of floating up half a text-row (the label then centres on
+        // the line, breaking it). Matches DashedReferenceLine's bare-border anchoring.
+        height: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
+    >
+      <View style={{ flex: 9, borderTopWidth: 1, borderStyle: 'dashed', borderColor: color }} />
+      {showLabels ? (
+        <>
+          <Text
+            style={{
+              marginHorizontal: 6,
+              fontSize: vlFont,
+              fontWeight: '800',
+              fontFamily: BAND_LABEL_FONT,
+              color,
+              ...(flip ? { transform: [{ scaleY: -1 as number }] } : null),
+            }}
+          >
+            {label}
+          </Text>
+          <View style={{ flex: 1, borderTopWidth: 1, borderStyle: 'dashed', borderColor: color }} />
+        </>
+      ) : null}
+    </View>
+  )
+  return (
+    <View
+      accessibilityElementsHidden
+      pointerEvents="none"
+      style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: 0 }}
+      testID="velocity-loss-bands"
+    >
+      {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%')}
+    </View>
+  )
+}
 
 /**
- * Headroom above the peak bar: just enough to seat its value label without a big empty
- * band at the top (was 1.15 — too airy for the wall hero).
+ * The velocity hero's reference overlay, painted by {@link SetBarChart} via `renderReference` from
+ * the chart geometry: the VL20 / VL30 loss decision bands (when `showLossBands`) behind the bars,
+ * plus the dashed running-best line at the peak. Both measure off the chart's OWN `best` — the
+ * per-side loss language that survives the dual's shared height scale. Unlabeled by design (the peak
+ * bar already shows its value; the numeric best is in the chart's accessibility label).
  */
-const PEAK_HEADROOM = 1.06
+function velocityReferenceOverlay(g: SetBarGeometry, showLossBands: boolean) {
+  const referencePx = g.best > 0 && g.scaleDenom > 0 ? Math.min(g.plotHeight, g.yOf(g.best)) : 0
+  return (
+    <>
+      {showLossBands && (
+        <VelocityLossBands
+          best={g.best}
+          scaleDenom={g.scaleDenom}
+          plotHeight={g.plotHeight}
+          flip={g.flip}
+        />
+      )}
+      {referencePx > 0 && (
+        <DashedReferenceLine
+          anchor="bottom"
+          offset={referencePx}
+          testID="velocity-hero-reference"
+        />
+      )}
+    </>
+  )
+}
+
+/** Framed expanded collapse-animation duration (ms). */
+const ANIMATION_DURATION = 400
 
-/** The bar-height scaling denominator for the given `scale` (guarded ≥ 0 by callers). */
-function scaleDenominator(scale: 'peak' | 'fixed', maxVelocity: number): number {
-  return scale === 'fixed' ? FIXED_MAX_VELOCITY : maxVelocity * PEAK_HEADROOM
+// --- Dual (bilateral) diverging chart ----------------------------------------
+// The two-device (LEFT + RIGHT voltra) treatment. Instead of two stacked single
+// heroes with independent baselines, ONE diverging chart shares a horizontal centre
+// axis: LEFT reps grow UP, RIGHT reps grow DOWN, one mirrored pair per rep index. The
+// asymmetry (left-dominant / right-lagging) reads pre-attentively as the silhouette.
+// It reuses VelocityStrip's slot model ({@link buildSlots}/{@link VelocitySlot}), its
+// zone color scale ({@link makeBarColorFor}), the hero geometry constants, and the
+// live-rep entrance ({@link useLiveRepGrowth}) — side is POSITION only, never hue.
+//
+// LIVE-REP ENTRANCE — do NOT re-add a dual-only one. The dual used to hand-roll its wing bars and
+// drive them from its own scale-pop hook, so the newest-rep animation existed TWICE and the two
+// copies drifted. Composing single strips retired that hook: `liveRepIndex` is now an ordinary
+// prop on each wing, so both wings animate through the same code path as a single hero and an
+// entrance that fires on one wing only is not expressible. Whether the wings should POP (a
+// whole-bar scale) rather than GROW from the axis is a live design question — but it belongs in
+// SetBarChart's shared entrance, applied to the single hero and the wings together. Reintroducing
+// it here would rebuild exactly the divergence this composition removed.
+
+/** One voltra's velocity stream — the SAME shape VelocityStrip accepts (one of these). */
+export interface DualVelocityStream {
+  /** Per-rep MEAN concentric velocity (m/s) for this side. */
+  velocities?: number[]
+  /** A structured set descriptor for this side (drives the typed slot vocabulary). */
+  set?: VelocitySet
+  /**
+   * The side's SLOT NAME (e.g. "Left Arm"), rendered as the vertical edge label. This is
+   * the slot's identity supplied by data — there is no hardcoded LEFT/RIGHT fallback. When
+   * absent or empty, that side renders no label.
+   */
+  label?: string
 }
 
-/** Bare-strip bar height (px): velocity-scaled for a performed rep, a short stub otherwise. */
-function bareSlotHeight(slot: VelocitySlot, height: number, denom: number): number {
-  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)
+export interface DualVelocityStripProps extends ViewProps {
+  /** The up-wing stream — drawn growing UP from the centre axis; its edge name comes from `left.label`. */
+  left: DualVelocityStream
+  /** The down-wing stream — drawn growing DOWN from the centre axis; its edge name comes from `right.label`. */
+  right: DualVelocityStream
+  /**
+   * Optional velocity-zone bands (shape-compatible with WA's `VelocityZones.bands`),
+   * shared with {@link VelocityStrip}. Colors the reps by zone on BOTH sides; side is
+   * never encoded by hue. When omitted the built-in default scale is used.
+   */
+  zones?: readonly VelocityZoneBandProp[]
+  /**
+   * Bar-fill coloring mode, matching {@link VelocityStrip}. `loss` (DEFAULT) — each
+   * wing colors by its velocity LOSS from THAT arm's own best (per-wing, since arms
+   * fatigue independently). `zone` — the shared absolute zone scale. Side is never
+   * encoded by hue either way.
+   */
+  barColor?: 'zone' | 'loss'
+  /**
+   * Planned rep count. Reps beyond a side's performed count draw as mirrored dashed
+   * todo stubs (same "3 of 8 done" read as the single hero), on both wings.
+   */
+  targetReps?: number
+  /** Index of the most-recently-completed rep; that mirrored pair animates in (hero only). */
+  liveRepIndex?: number
+  /**
+   * `hero` — the across-the-room wall scale: tall wings, per-rep m/s value labels, and a dashed
+   * running-best reference line per side. `compact` — the flat resting form: dual-hero but flat +
+   * no labels (both wings are the `compact` VelocityStrip variant), same aligned structure + shared
+   * gutter + axis. `rail` — the compact rail-expanded lean renderer, no labels / reference lines.
+   */
+  variant?: 'hero' | 'compact' | 'rail'
+  /**
+   * Bar-height scaling, shared across BOTH wings so the L/R asymmetry reads as bar
+   * length against one scale. `peak` (default) = the pair's max +headroom; `fixed` =
+   * a fixed velocity ceiling.
+   */
+  scale?: 'peak' | 'fixed'
+  /** Total plot height (px), split evenly into the up (L) and down (R) wings. */
+  height?: number
+  className?: string
 }
 
-function getReducedMotionPreference(): boolean {
-  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
-  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+/** Default `hero` diverging height (px) — matches the single hero. */
+const DUAL_HERO_HEIGHT = SET_BAR_DEFAULT_HEIGHT
+/** Default `rail` diverging height (px) — compact enough to sit inside a rail slot. */
+const DUAL_RAIL_HEIGHT = 96
+/** Default `compact` diverging height (px) — two 5px rounded L/R sub-segments + the 1.5px fold gap. */
+const DUAL_COMPACT_HEIGHT = 11.5
+
+// --- Rail geometry (the compact dedicated path) ------------------------------
+// The `hero` variant COMPOSES two single VelocityStrip heroes, so it inherits the
+// hero geometry for free. The `rail` variant is far smaller than a hero (no value
+// labels, reference lines, paper, or label headroom), so composing the hero would
+// drag all of that in; it keeps a lean dedicated renderer at these compact metrics.
+/** The vertical gap between the up/down wings on the axis-less rail (value-height dual-expanded). */
+const DUAL_WING_GAP = 2
+/** The centre gap (px) splitting the folded compact dual's L (top) and R (bottom) halves — a gap, no line. */
+const COMPACT_FOLD_GAP = 1.5
+/** Each folded-compact sub-segment's height (px) — a rounded pill per side, above/below the fold gap. */
+const COMPACT_FOLD_HALF = 5
+
+/** One side's performed per-rep velocities — flattened from a `set` descriptor, or the raw array. */
+function streamDone(stream: DualVelocityStream): number[] {
+  return stream.set ? deriveDoneVelocities(stream.set) : (stream.velocities ?? [])
 }
 
-/** Track the OS "reduce motion" preference; falls back to `false` (jsdom/SSR). */
-function usePrefersReducedMotion(): boolean {
-  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
+/** A side's NATURAL slot list — its `set` slot vocabulary, or bare rep slots + a `targetReps` remainder. */
+function streamNaturalSlots(stream: DualVelocityStream, targetReps?: number): SetSlot[] {
+  if (stream.set) {
+    return buildSlots(stream.set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap,
+    }))
+  }
+  const reps: SetSlot[] = (stream.velocities ?? []).map((v, i) => ({
+    kind: 'rep',
+    value: v,
+    leadingGap: i === 0 ? 0 : REP_GAP,
+  }))
+  const pad = Math.max(0, (targetReps ?? 0) - reps.length)
+  return [...reps, ...Array.from({ length: pad }, () => ({ kind: 'todo' as const }))]
 }
 
-const ANIMATION_DURATION = 400
-const ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1)
-const POP_EASING = Easing.bezier(0.34, 1.56, 0.64, 1)
+/**
+ * The window-kind precedence when merging two sides' cells at a column: a set-type window (variable /
+ * continue) that either side has wins; else if either logged (or plans) a rep there it's a REP column;
+ * else it's a shared to-do. So a lagging side's not-yet-logged rep column stays a REP column (rendered
+ * `empty` for that side), index-locked to the other side's rep — never shifted or re-spaced.
+ */
+function mergeColumnKind(l: SetSlot | undefined, r: SetSlot | undefined): SetSlot['kind'] {
+  const kinds = [l?.kind, r?.kind]
+  if (kinds.includes('variable')) return 'variable'
+  if (kinds.includes('continue')) return 'continue'
+  if (kinds.includes('rep')) return 'rep'
+  return 'todo'
+}
+
+/** One side's cell at a merged column: its logged rep (with value), else `empty` for a rep column, else the shared window kind. */
+function sideColumnCell(
+  slot: SetSlot | undefined,
+  kind: SetSlot['kind'],
+  leadingGap: number
+): SetSlot {
+  if (kind !== 'rep') return { kind, leadingGap }
+  return slot?.kind === 'rep'
+    ? { kind: 'rep', value: slot.value, leadingGap }
+    : { kind: 'empty', leadingGap }
+}
 
 /**
- * The newest-rep entrance shared by the framed `expanded` chart and `hero`: a
- * bounce when the rep is a new set peak, a pop otherwise. Honors reduced motion.
- * Returns the scale `Animated.Value` for the live bar; inert while `active` is
- * false or no live rep is present.
+ * Build ONE index-locked column structure shared by both diverging wings from their natural slot
+ * lists: same column count, same rep indices, same WIDE-gap positions. Each column resolves to a
+ * shared kind ({@link mergeColumnKind}); per side it's that side's rep value, or `empty` when the
+ * side hasn't logged that rep (assumes symmetric bilateral reps — both sides step together).
  */
-function useLiveRepPop(
-  active: boolean,
-  liveRepIndex: number | undefined,
-  liveVelocity: number | undefined,
-  isNewPeak: boolean
-): Animated.Value {
-  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 alignDualSlots(left: SetSlot[], right: SetSlot[]): { left: SetSlot[]; right: SetSlot[] } {
+  const n = Math.max(left.length, right.length)
+  const L: SetSlot[] = []
+  const R: SetSlot[] = []
+  for (let i = 0; i < n; i++) {
+    const lt = left[i]
+    const rt = right[i]
+    const kind = mergeColumnKind(lt, rt)
+    const gap = Math.max(lt?.leadingGap ?? REP_GAP, rt?.leadingGap ?? REP_GAP)
+    L.push(sideColumnCell(lt, kind, gap))
+    R.push(sideColumnCell(rt, kind, gap))
+  }
+  return { left: L, right: R }
 }
 
-interface HeroVelocityChartProps {
-  /** Performed per-rep mean concentric velocities (m/s). */
-  doneVelocities: number[]
-  /** Zone → color resolver, shared with the other variants (single-sources the scale). */
-  barColorFor: (velocity: number) => string
-  /** Bar-height scaling denominator (`peak` set-max or `fixed` ceiling). */
-  scaleDenom: number
-  /** Running-best velocity (the set peak) — drives the dashed reference line. */
-  referenceVelocity: number
-  liveRepIndex?: number
-  isNewPeak: boolean
+/** Shared inputs for both dual renderers — the resolved per-side done arrays + presentation props. */
+interface DualChartProps {
+  leftDone: number[]
+  rightDone: number[]
+  /**
+   * The raw per-side streams. The `hero` renderer passes each side's `set` (or `velocities`)
+   * straight through to its composed VelocityStrip hero so a side's set-type WINDOWS (the range
+   * cyan variable window, the AMRAP/myo "continue", drop/myo chunk-notch gaps) render on the dual
+   * — not just the flattened reps. The lean `rail` renderer ignores them (it only takes velocities).
+   */
+  leftStream?: DualVelocityStream
+  rightStream?: DualVelocityStream
+  leftLabel?: string
+  rightLabel?: string
+  zones?: readonly VelocityZoneBandProp[]
+  barColor: 'zone' | 'loss'
+  /** Shared across BOTH wings: `peak` (the pair's max +headroom) or `fixed` (a cross-set ceiling). */
+  scale: 'peak' | 'fixed'
   targetReps?: number
   height: number
   className?: string
+  label: string
   viewProps: ViewProps
 }
 
 /**
- * The `hero` render: the across-the-room, single-set wall treatment. Tall bars +
- * a per-bar value label + a dashed running-best reference line + dashed placeholders
- * for the reps still to come. Reuses {@link barColorFor} (zone scale) and the
- * {@link useLiveRepPop} entrance so it stays consistent with the framed chart.
+ * The `hero` diverging chart — COMPOSED from two single {@link VelocityStrip} heroes: an `up` hero
+ * over a `down` (vertically-mirrored) hero, sharing ONE height scale via {@link
+ * VelocityStripProps.scaleMax} and meeting at one shared centre axis. Each wing hides its own
+ * baseline ({@link VelocityStripProps.hideBaseline}) so the axis is a single crisp line. Because it
+ * is literally two heroes, every hero improvement — paper, loss bands, grow-from-bottom, the
+ * running-best reference, surface-relative placeholders, per-side loss coloring — reaches the dual
+ * for free. Side is POSITION only: both wings color reps by the SAME `barColor` scale; the shared
+ * `scaleMax` makes a stronger arm read TALLER while each wing still colors off its own best.
  */
-function HeroVelocityChart({
-  doneVelocities,
-  barColorFor,
-  scaleDenom,
-  referenceVelocity,
+function DualVelocityHero({
+  leftDone,
+  rightDone,
+  leftStream,
+  rightStream,
+  leftLabel,
+  rightLabel,
+  zones,
+  barColor,
+  scale,
+  targetReps,
   liveRepIndex,
-  isNewPeak,
+  height,
+  className,
+  label,
+  viewProps,
+}: DualChartProps & { liveRepIndex?: number }) {
+  // The two wings are separated by the SAME small gap as the expanded/rail dual (no centre-axis rule).
+  const plotHalf = (height - DUAL_WING_GAP) / 2
+  // ONE shared height scale across both wings so the L/R asymmetry reads as bar length, not two
+  // scales; each composed strip still colors by its OWN loss and draws its OWN best reference.
+  // `peak` shares the pair max via `scaleMax`; `fixed` shares the cross-set ceiling (both wings
+  // resolve the same fixed ceiling), so `scaleMax` is left off and `scale` carries it.
+  const sharedMax = Math.max(...leftDone, ...rightDone, 0)
+  // ONE index-locked column structure shared by both wings: same rep indices, same WIDE-gap
+  // positions, same column count. A column a side didn't log renders `empty` there — so a lagging
+  // side's next rep lands at the SAME column index as the other side, never shifted or re-spaced.
+  const aligned = alignDualSlots(
+    leftStream ? streamNaturalSlots(leftStream, targetReps) : [],
+    rightStream ? streamNaturalSlots(rightStream, targetReps) : []
+  )
+  const { style: externalStyle, ...restProps } = viewProps
+
+  // Each wing renders the SHARED aligned structure (`columnSlots`); its own `velocities` still drive
+  // bar height / per-side loss color / the running-best reference.
+  const wing = (orientation: 'up' | 'down', columns: SetSlot[], done: number[]) => (
+    <VelocityStrip
+      variant="hero"
+      orientation={orientation}
+      velocities={done}
+      columnSlots={columns}
+      scale={scale}
+      scaleMax={scale === 'fixed' ? undefined : sharedMax}
+      barColor={barColor}
+      zones={zones}
+      liveRepIndex={liveRepIndex}
+      height={plotHalf}
+      hideBaseline
+    />
+  )
+
+  return (
+    <View
+      className={className}
+      style={[{ height, flexDirection: 'row' }, externalStyle]}
+      accessibilityRole="image"
+      accessibilityLabel={label}
+      testID="dual-velocity-strip"
+      {...restProps}
+    >
+      {/* The SHARED gutter/side-rail (34px, no hairline) — one section per wing. A single hero renders
+          the same rail with ONE section, so it's pixel-identical to this upper half. */}
+      <ChartSideRail
+        sectionExtent={plotHalf}
+        variant="hero"
+        sections={[
+          { label: leftLabel, testID: 'dual-velocity-side-label-L' },
+          { label: rightLabel, testID: 'dual-velocity-side-label-R' },
+        ]}
+      />
+
+      {/* The two composed heroes, separated by the shared wing gap (no centre-axis rule). Their own
+          labels are redundant with the dual's summary label, so the wings are a11y-hidden. */}
+      <View style={{ flex: 1, gap: DUAL_WING_GAP }}>
+        <View accessibilityElementsHidden testID="dual-velocity-wing-up">
+          {wing('up', aligned.left, leftDone)}
+        </View>
+        <View accessibilityElementsHidden testID="dual-velocity-wing-down">
+          {wing('down', aligned.right, rightDone)}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+/**
+ * The `rail` diverging chart — a lean, compact dedicated renderer. Composing the hero here would
+ * drag in its value labels, reference lines, paper, and label headroom, none of which belong at
+ * rail scale; instead it draws mirrored per-side bars at the compact rail metrics. Same shared
+ * height scale + per-side loss coloring + mirrored radius + shared axis as the hero, but no labels
+ * / reference lines / paper. (Set-type slot windows are a hero-composition concern; rail only ever
+ * takes plain velocities.)
+ */
+function DualVelocityRail({
+  leftDone,
+  rightDone,
+  leftStream,
+  rightStream,
+  zones,
+  barColor,
+  scale,
   targetReps,
+  liveRepIndex,
   height,
   className,
+  label,
   viewProps,
-}: HeroVelocityChartProps) {
-  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : undefined
-  const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak)
-
-  // Measure the plot so per-bar value labels can thin on a narrow chart (they collide once
-  // bars get thin). Width 0 (unmeasured) → show all, so test/server renders are unchanged.
-  const [plotW, setPlotW] = useState(0)
-  const onPlotLayout = (e: LayoutChangeEvent) => setPlotW(e.nativeEvent.layout.width)
-
-  // Reserve a band above the tallest bar for its value label so a peak bar never clips.
-  const plotHeight = Math.max(0, height - HERO_LABEL_HEADROOM)
-  const barHeight = (velocity: number): number =>
-    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
-
-  // When bars get too thin, keep only the peak + live-rep labels so the rest don't overlap.
-  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
-  // Step the inter-bar gap down with the bars so the gaps never dwarf the bars themselves.
-  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,
+}: DualChartProps & { liveRepIndex?: number }) {
+  // The lean dual-EXPANDED. Composed from two bare `expanded` strips exactly as the hero composes
+  // two heroes, rather than drawing its own bars: composing is what makes the dual inherit the
+  // single's bar widths, gaps, chunk-notch, set-type slot windows, paper and live-rep growth. The
+  // bespoke renderer this replaces took only velocities, so the dual silently dropped every
+  // set-type window and let a lagging side render fewer bars than its partner.
+  const plotHalf = (height - DUAL_WING_GAP) / 2
+  // ONE shared height scale across both wings, so an L/R asymmetry reads as bar length rather than
+  // as two independent scales.
+  const sharedMax = Math.max(...leftDone, ...rightDone, 0)
+  // ONE index-locked column structure. A column a side did not log renders as an aligned empty, so
+  // the lagging side's next rep lands at the SAME column index as its partner's.
+  const aligned = alignDualSlots(
+    leftStream ? streamNaturalSlots(leftStream, targetReps) : [],
+    rightStream ? streamNaturalSlots(rightStream, targetReps) : []
   )
-  const showBarLabel = (i: number): boolean =>
-    !labelsCrowded || i === peakIndex || i === liveRepIndex
+  const { style: externalStyle, ...restProps } = viewProps
 
-  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 wing = (orientation: 'up' | 'down', columns: SetSlot[], done: number[]) => (
+    <VelocityStrip
+      variant="expanded"
+      showNumbers={false}
+      showInfo={false}
+      orientation={orientation}
+      velocities={done}
+      columnSlots={columns}
+      scale={scale}
+      scaleMax={scale === 'fixed' ? undefined : sharedMax}
+      barColor={barColor}
+      zones={zones}
+      liveRepIndex={liveRepIndex}
+      height={plotHalf}
+    />
+  )
+
+  return (
+    <View
+      className={className}
+      style={[{ height, flexDirection: 'column', gap: DUAL_WING_GAP }, externalStyle]}
+      accessibilityRole="image"
+      accessibilityLabel={label}
+      testID="dual-velocity-strip"
+      {...restProps}
+    >
+      {/* No gutter, side labels or centre axis at rail scale — the wings read as two rows via the
+          shared gap alone. Their own labels would duplicate the dual's summary label. */}
+      <View accessibilityElementsHidden testID="dual-velocity-wing-up">
+        {wing('up', aligned.left, leftDone)}
+      </View>
+      <View accessibilityElementsHidden testID="dual-velocity-wing-down">
+        {wing('down', aligned.right, rightDone)}
+      </View>
+    </View>
+  )
+}
 
+/**
+ * The `compact` diverging chart — the resting dual FOLDED into ONE 8px strip. Because the compact
+ * bars are flat (colour-encoded, not height-encoded), the diverging pair need not stack into two
+ * rows: each rep column splits at the centre into an L (top) and R (bottom) flat half (≈3.25px each,
+ * a {@link COMPACT_FOLD_GAP}px gap between — a gap, not a line), so the pair occupies the SAME 8px as
+ * the single compact — the per-rep analogue of the north-star stacked-halves. Index-locked (a lagging
+ * side's un-logged reps render as faint empties); no gutter / labels / axis (no room at 8px). The
+ * value-height diverging (where bar length must encode velocity) lives in `hero` / `rail`.
+ */
+function DualVelocityCompactStrip({
+  leftDone,
+  rightDone,
+  leftStream,
+  rightStream,
+  zones,
+  barColor,
+  targetReps,
+  height,
+  className,
+  label,
+  viewProps,
+}: DualChartProps) {
+  // COMPOSED, like the hero and rail: two `compact` strips at COMPACT_FOLD_HALF each, separated by
+  // COMPACT_FOLD_GAP (5 + 1.5 + 5 = DUAL_COMPACT_HEIGHT exactly). Because a compact bar FILLS its
+  // plot, each column reads as an L top pill over an R bottom pill — the folded design, but drawn
+  // by the same SetBarChart the single uses. Composing rather than hand-rolling is what makes the
+  // set-type vocabulary (to-do, the cyan variable/continue windows, drop chunk-notch) and the
+  // index-locked empty arrive for free, and keeps them from drifting apart later.
+  const half = height === DUAL_COMPACT_HEIGHT ? COMPACT_FOLD_HALF : (height - COMPACT_FOLD_GAP) / 2
+  const aligned = alignDualSlots(
+    leftStream ? streamNaturalSlots(leftStream, targetReps) : [],
+    rightStream ? streamNaturalSlots(rightStream, targetReps) : []
+  )
   const { style: externalStyle, ...restProps } = viewProps
 
+  const wing = (orientation: 'up' | 'down', columns: SetSlot[], done: number[]) => (
+    <VelocityStrip
+      variant="compact"
+      orientation={orientation}
+      velocities={done}
+      columnSlots={columns}
+      barColor={barColor}
+      zones={zones}
+      height={half}
+    />
+  )
+
   return (
     <View
       className={className}
-      style={[{ height }, externalStyle]}
+      style={[{ height, flexDirection: 'column', gap: COMPACT_FOLD_GAP }, externalStyle]}
       accessibilityRole="image"
       accessibilityLabel={label}
-      testID="velocity-strip-hero"
+      testID="dual-velocity-strip"
       {...restProps}
     >
-      <View
-        onLayout={onPlotLayout}
-        style={{
-          flex: 1,
-          flexDirection: 'row',
-          alignItems: 'flex-end',
-          gap: heroGap,
-          position: 'relative',
-          borderBottomWidth: 2,
-          borderBottomColor: HERO_PENDING_COLOR,
-        }}
-      >
-        {/*
-         * Running-best reference line. Deliberately unlabeled: it sits at the tallest
-         * bar's top, and that bar already displays its velocity as its own value label,
-         * so a "best X.XX" tag would duplicate it — and would collide with that label
-         * whenever the peak bar is on the same side (declines peak-left, ends-on-best
-         * peak-right). The line alone reads as "how far has velocity fallen from best".
-         * The numeric best is in the container's accessibility label.
-         */}
-        {referencePx > 0 && (
-          <View
-            accessibilityElementsHidden
-            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 (
-            <View
-              key={i}
-              accessibilityElementsHidden
-              style={{
-                flex: 1,
-                maxWidth: HERO_BAR_MAX_WIDTH,
-                height: '100%',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-              }}
-            >
-              {showBarLabel(i) && (
-                <Text
-                  className="text-text-primary"
-                  style={{ fontSize: 12, fontWeight: '800', marginBottom: 4 }}
-                  testID={`velocity-label-${i}`}
-                >
-                  {formatVelocity(velocity)}
-                </Text>
-              )}
-              <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}`}
-              />
-            </View>
-          )
-        })}
-
-        {Array.from({ length: pendingCount }, (_, i) => (
-          <View
-            key={`pending-${i}`}
-            accessibilityElementsHidden
-            style={{
-              flex: 1,
-              maxWidth: HERO_BAR_MAX_WIDTH,
-              height: '100%',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-            }}
-          >
-            <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"
-            />
-          </View>
-        ))}
+      <View accessibilityElementsHidden testID="dual-velocity-wing-up">
+        {wing('up', aligned.left, leftDone)}
+      </View>
+      <View accessibilityElementsHidden testID="dual-velocity-wing-down">
+        {wing('down', aligned.right, rightDone)}
       </View>
     </View>
   )
 }
 
+/**
+ * The dual-voltra (bilateral) DIVERGING per-rep velocity chart. The up-wing stream grows UP, the
+ * down-wing stream grows DOWN from one shared centre axis. The `hero` variant COMPOSES two single
+ * {@link VelocityStrip} heroes (see {@link DualVelocityHero}) so any hero improvement reaches the
+ * dual for free; `rail` uses a lean value-height renderer ({@link DualVelocityRail}); `compact` folds
+ * the pair into one 8px strip ({@link DualVelocityCompactStrip}). Single-voltra sets keep using
+ * {@link VelocityStrip} (`variant="hero"`) — unchanged.
+ */
+export function DualVelocityStrip({
+  left,
+  right,
+  zones,
+  barColor = 'loss',
+  targetReps,
+  liveRepIndex,
+  variant = 'hero',
+  scale = 'peak',
+  height,
+  className,
+  ...props
+}: DualVelocityStripProps) {
+  const resolvedHeight =
+    height ??
+    (variant === 'hero'
+      ? DUAL_HERO_HEIGHT
+      : variant === 'compact'
+        ? DUAL_COMPACT_HEIGHT
+        : DUAL_RAIL_HEIGHT)
+  // The done arrays drive the shared max + per-side best + the summary counts; the raw streams
+  // flow to the hero wings so a side's set-type WINDOWS render (the `rail` renderer uses `*Done`).
+  const leftDone = streamDone(left)
+  const rightDone = streamDone(right)
+
+  const label =
+    `Dual velocity chart, left ${leftDone.length} of ${Math.max(leftDone.length, targetReps ?? leftDone.length)} reps, ` +
+    `right ${rightDone.length} of ${Math.max(rightDone.length, targetReps ?? rightDone.length)} reps`
+
+  const shared: DualChartProps = {
+    leftDone,
+    rightDone,
+    leftStream: left,
+    rightStream: right,
+    leftLabel: left.label,
+    rightLabel: right.label,
+    zones,
+    barColor,
+    scale,
+    targetReps,
+    height: resolvedHeight,
+    className,
+    label,
+    viewProps: props,
+  }
+
+  // `liveRepIndex` reaches the rail too: its wings are composed strips, so the newest rep grows
+  // from the midline on BOTH sides. Compact is flat, so a grow animation has nothing to animate.
+  if (variant === 'rail') return <DualVelocityRail {...shared} liveRepIndex={liveRepIndex} />
+  if (variant === 'compact') return <DualVelocityCompactStrip {...shared} />
+  return <DualVelocityHero {...shared} liveRepIndex={liveRepIndex} />
+}
+
 export function VelocityStrip({
   velocities,
   set,
   zones,
+  barColor = 'loss',
+  showLossBands,
+  orientation = 'up',
+  scaleMax,
+  hideBaseline,
+  columnSlots,
+  label,
   liveRepIndex,
   expanded = true,
   onToggle,
@@ -712,17 +1154,13 @@ export function VelocityStrip({
   className,
   ...props
 }: VelocityStripProps) {
+  // Bands default on with the loss bar-fill (the two halves of the loss language),
+  // off for the absolute zone scale; an explicit prop always wins.
+  const lossBandsOn = showLossBands ?? barColor === 'loss'
   // A `set` descriptor derives its own done-velocity array; the legacy
   // `velocities` path stays the source of truth otherwise. Every summary calc
   // (mean / loss / zone) runs on this one array so the info row works either way.
   const doneVelocities = set ? deriveDoneVelocities(set) : (velocities ?? [])
-  const slots: VelocitySlot[] = 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)
@@ -731,50 +1169,37 @@ export function VelocityStrip({
   // The framed chart (raised box, labels, info) vs the bare spotlight strip is the
   // only fork in the `expanded` variant — keyed by whether any chrome is requested.
   const framed = showNumbers || showInfo
-  const scaleDenom = scaleDenominator(scale, maxVelocity)
 
   const hasZones = zones != null && zones.length > 0
+  // Single-sourced zone resolver (diverging-hero) wrapped with the loss-relative mode: `barColor="loss"`
+  // colors each rep by its velocity loss from the set's own best, else the shared zone scale. Every
+  // variant hands this `colorFor` to SetBarChart, so all variants color identically.
+  const zoneColorFor = makeBarColorFor(zones)
   const barColorFor = (v: number): string =>
-    hasZones ? bandColor(classifyBand(v, zones)!) : zoneHexMap[getVelocityZoneColor(v)]
-  const slotColor = (slot: VelocitySlot): string => {
-    if (slot.kind === 'rep') return barColorFor(slot.velocity ?? 0)
-    if (slot.kind === 'todo') return TODO_COLOR
-    return SET_STRIP_VARIABLE_COLOR
-  }
+    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))
+  // The framed collapse is now an IN-PLACE bar-height morph: `expandProgress` (0 collapsed → 1 open)
+  // drives SetBarChart's bars flat↔value (no reflow), replacing the old collapse-to-3px height anim.
+  // `infoOpacity` fades the info row; the per-bar labels fade with `expandProgress` in the overlay.
+  const [expandProgress] = useState(() => new Animated.Value(expanded ? 1 : 0))
   const [infoOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0))
 
   // Newest-rep animation: pop for a normal rep, bounce when it sets a new peak.
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : undefined
   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,
@@ -782,7 +1207,7 @@ export function VelocityStrip({
         useNativeDriver: false,
       }),
     ]).start()
-  }, [expanded, variant, framed, height, heightAnim, labelOpacity, infoOpacity])
+  }, [expanded, variant, framed, expandProgress, infoOpacity])
 
   // Nothing to draw: neither a legacy velocity array nor a set descriptor.
   if (set == null && velocities == null) return null
@@ -791,106 +1216,129 @@ export function VelocityStrip({
   const miniLabel = set ? setAccessibilityLabel(set, repCount) : `Velocity strip, ${repCount} reps`
 
   if (variant === 'hero') {
-    // Hero's plot is far taller than the expanded chart; apply its own default when
-    // the caller left `height` at the shared 60px default.
-    const heroHeight = height === EXPANDED_HEIGHT ? HERO_HEIGHT : height
+    // Hero's plot is far taller than the expanded chart; apply its own default when the caller left
+    // `height` at the shared 60px default. The diverging dual (which passes `columnSlots`) sets an
+    // explicit per-wing height — exempt it, so a dual whose wing height happens to be 60px (a 120px
+    // dual) isn't mistaken for "unset" and blown up to 220.
+    const heroHeight =
+      height === EXPANDED_HEIGHT && columnSlots == null ? SET_BAR_DEFAULT_HEIGHT : height
+    // `columnSlots` (the diverging dual's shared index-locked structure) wins; else a `set` builds
+    // its own typed slots, and the plain `velocities` path is bare rep slots + a `targetReps` remainder.
+    const heroSlots: SetSlot[] =
+      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 (
-      <HeroVelocityChart
-        doneVelocities={doneVelocities}
-        barColorFor={barColorFor}
-        scaleDenom={scaleDenom}
-        referenceVelocity={maxVelocity}
+      <SetBarChart
+        slots={heroSlots}
+        colorFor={barColorFor}
+        height={heroHeight}
+        scale={scale}
+        scaleMax={scaleMax}
+        orientation={orientation}
         liveRepIndex={liveRepIndex}
         isNewPeak={isNewPeak}
-        targetReps={targetReps}
-        height={heroHeight}
+        targetReps={set || columnSlots ? undefined : targetReps}
+        label={label}
+        showValueLabels
+        formatValue={formatVelocity}
+        renderReference={(g) => velocityReferenceOverlay(g, lossBandsOn)}
+        hideBaseline
+        testID="velocity-strip-hero"
+        testIDPrefix="velocity"
+        accessibilityLabel={heroLabel}
         className={className}
         viewProps={props}
       />
     )
   }
 
-  if (variant === 'mini') {
-    const { style: externalStyle, ...restProps } = props
-    // The container keeps the uniform REP_GAP (so a no-`set` strip is byte-identical
-    // to prior releases and holds HTML-parity); per-slot `marginLeft` carries only
-    // the EXTRA spacing for the WIDE notch that chunks drop / myo / cluster sets.
+  if (variant === 'compact') {
+    // `compact` = the flat resting form: SetBarChart in FLAT mode (uniform short bars, no value
+    // labels), sharing hero's geometry — same colors, paper, 0.08 spacing, proportional chunk-notch,
+    // todo/variable/continue slots, and gutter — so a compact↔expanded toggle only changes bar HEIGHT.
+    // `columnSlots` (the diverging dual-compact's shared index-locked structure) wins, like the hero.
+    const compactSlots: SetSlot[] =
+      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 (
-      <View
-        className={className}
-        style={[
-          { flexDirection: 'row', height: 3, gap: REP_GAP, borderRadius: 2, overflow: 'hidden' },
-          externalStyle,
-        ]}
-        accessibilityRole="image"
+      <SetBarChart
+        slots={compactSlots}
+        colorFor={barColorFor}
+        height={compactHeight}
+        scale={scale}
+        scaleMax={scaleMax}
+        orientation={orientation}
+        flat
+        barRadius={2}
+        cornerStyle="all"
+        targetReps={set || columnSlots ? undefined : targetReps}
+        label={label}
+        hideBaseline
+        testID="velocity-strip-compact"
+        testIDPrefix="velocity"
         accessibilityLabel={miniLabel}
-        testID="velocity-strip-mini"
-        {...restProps}
-      >
-        {slots.map((slot, i) => (
-          <View
-            key={i}
-            style={{
-              flex: 1,
-              backgroundColor: slotColor(slot),
-              borderRadius: 1,
-              minWidth: 4,
-              height: '100%' as unknown as number,
-              // 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
-            testID={slot.kind === 'rep' ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`}
-          />
-        ))}
-      </View>
+        className={className}
+        viewProps={props}
+      />
     )
   }
 
-  // Bare `expanded` strip (both chrome flags off): the velocity-HEIGHT spotlight —
-  // px bar heights, no raised box / labels / info row / animation. Set-type gaps carry
-  // over from the slot model exactly as in `mini` (container REP_GAP + per-slot extra
-  // for a WIDE notch); planned / variable / continue slots draw as stubs.
+  // Bare `expanded` strip (both chrome flags off): the velocity-HEIGHT spotlight — now
+  // FOLDED onto SetBarChart (value mode, no labels), so its bars share the SAME geometry
+  // (widths / gaps / chunk-notch / slots / paper) as compact + hero. Only the height-mode
+  // (value here, flat in compact) differs, so a compact↔spotlight toggle never reflows.
   if (!framed) {
-    const { style: externalStyle, ...restProps } = props
+    // `columnSlots` wins, exactly as it does for compact and hero. The diverging dual passes the
+    // index-locked shared structure through here; ignoring it gave the expanded dual its own
+    // per-side columns, so a lagging side rendered FEWER bars instead of an aligned empty cell.
+    const spotlightSlots: SetSlot[] =
+      columnSlots ??
+      (set
+        ? buildSlots(set).map((s) => ({
+            kind: s.kind,
+            value: s.velocity,
+            leadingGap: s.leadingGap,
+          }))
+        : doneVelocities.map((v) => ({ kind: 'rep', value: v })))
     return (
-      <View
-        className={className}
-        style={[
-          { flexDirection: 'row', height, gap: REP_GAP, alignItems: 'flex-end' },
-          externalStyle,
-        ]}
-        accessibilityRole="image"
+      <SetBarChart
+        slots={spotlightSlots}
+        colorFor={barColorFor}
+        height={height}
+        scale={scale}
+        scaleMax={scaleMax}
+        orientation={orientation}
+        liveRepIndex={liveRepIndex}
+        isNewPeak={isNewPeak}
+        barRadius={2}
+        cornerStyle="top"
+        targetReps={set ? undefined : targetReps}
+        label={label}
+        hideBaseline
+        testID="velocity-strip-spotlight"
+        testIDPrefix="velocity"
         accessibilityLabel={miniLabel}
-        testID="velocity-strip-compact"
-        {...restProps}
-      >
-        {slots.map((slot, i) => (
-          <View
-            key={i}
-            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
-            testID={slot.kind === 'rep' ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`}
-          />
-        ))}
-      </View>
+        className={className}
+        viewProps={props}
+      />
     )
   }
 
@@ -901,204 +1349,100 @@ export function VelocityStrip({
   const hasInteractiveContainer = onToggle != null
   const hasInteractiveReps = onRepPress != null && expanded
 
-  // Expanded set-type bars: `straight` is the active-set spotlight (velocity-height
-  // done reps + short grey planned stubs); the advanced types render as a short,
-  // mini-style encoding (the gaps + colors carry identity, height is uniform).
-  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 (
-        <View
-          key={i}
-          style={{
-            flex: 1,
-            height: '100%',
-            justifyContent: 'flex-end',
-            marginLeft: slot.leadingGap,
-          }}
-        >
-          <View
-            style={{
-              height: `${heightPct}%`,
-              minHeight: 2,
-              borderTopLeftRadius: 2,
-              borderTopRightRadius: 2,
-              backgroundColor: slotColor(slot),
-              ...(slot.kind === 'continue'
-                ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE }
-                : {}),
-            }}
-            testID={slot.kind === 'rep' ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`}
-            accessibilityRole="image"
-            accessibilityLabel={slotAccessibilityLabel(slot, i)}
-          />
-        </View>
+  const framedSlots: SetSlot[] = set
+    ? buildSlots(set).map((sl) => ({
+        kind: sl.kind,
+        value: sl.velocity,
+        leadingGap: sl.leadingGap,
+      }))
+    : doneVelocities.map((v) => ({ kind: 'rep', value: v }))
+
+  // Per-bar overlay handed to SetBarChart so the framed chart keeps its m/s label (fading with the
+  // expand) + its onRepPress hit-target WITHOUT re-rolling bars — one bar-rendering path remains.
+  const needsBarOverlay = showNumbers || onRepPress != null
+  const renderFramedBarOverlay = needsBarOverlay
+    ? (repIndex: number, value: number) => (
+        <>
+          {showNumbers && (
+            <Animated.View
+              style={{
+                opacity: expandProgress,
+                position: 'absolute',
+                top: -13,
+                left: 0,
+                right: 0,
+                alignItems: 'center',
+              }}
+              accessibilityElementsHidden
+              pointerEvents="none"
+            >
+              <Text
+                className="text-text-secondary"
+                style={{ fontSize: 8, fontWeight: '600' }}
+                testID={`velocity-label-${repIndex}`}
+              >
+                {formatVelocity(value)}
+              </Text>
+            </Animated.View>
+          )}
+          {onRepPress && expanded && (
+            <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}`}
+            />
+          )}
+        </>
       )
-    })
+    : undefined
 
+  // The framed chrome is a WRAPPER (raised box + info row + tap-to-collapse) around ONE SetBarChart
+  // in value mode; the collapse is the in-place `expandProgress` bar-height morph, not a height strip.
   const stripContent = (
     <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 ? undefined : 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 ? undefined : stripLabel}
       testID="velocity-strip"
       {...props}
     >
-      <View style={{ flexDirection: 'row', flex: 1, gap: set ? 0 : 2, alignItems: 'flex-end' }}>
-        {set
-          ? setBars
-          : doneVelocities.map((v, i) => {
-              const barBackground = barColorFor(v)
-              // Guard all-zero velocities (idle / pre-rep): a 0 denominator makes
-              // this 0 / 0 === NaN and emits height:'NaN%'. Flatten the bars instead.
-              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: ViewStyle = expanded
-                ? {
-                    height: `${barHeightPct}%`,
-                    minHeight: 2,
-                    borderTopLeftRadius: 2,
-                    borderTopRightRadius: 2,
-                    backgroundColor: barBackground,
-                  }
-                : {
-                    minHeight: '100%' as unknown as number,
-                    borderTopLeftRadius: 2,
-                    borderTopRightRadius: 2,
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
-                    backgroundColor: barBackground,
-                  }
-
-              const barInner = isLive ? (
-                <Animated.View
-                  style={[barStyle, { transform: [{ scale: liveScale }] }]}
-                  testID={`velocity-bar-${i}`}
-                  accessibilityRole="image"
-                  accessibilityLabel={`Rep ${i + 1}: ${formatVelocity(v)} meters per second${liveLabelSuffix}`}
-                />
-              ) : (
-                <View
-                  style={barStyle}
-                  testID={`velocity-bar-${i}`}
-                  accessibilityRole="image"
-                  accessibilityLabel={`Rep ${i + 1}: ${formatVelocity(v)} meters per second`}
-                />
-              )
-
-              const bar = (
-                <View
-                  key={i}
-                  style={{
-                    flex: 1,
-                    height: '100%',
-                    justifyContent: 'flex-end',
-                    position: 'relative',
-                  }}
-                >
-                  {expanded && showNumbers && (
-                    <Animated.View
-                      style={{
-                        opacity: labelOpacity,
-                        alignItems: 'center',
-                        position: 'absolute',
-                        top: -13,
-                        left: 0,
-                        right: 0,
-                      }}
-                      accessibilityElementsHidden
-                    >
-                      <Text
-                        className="text-text-secondary"
-                        style={{ fontSize: 8, fontWeight: '600' }}
-                        testID={`velocity-label-${i}`}
-                      >
-                        {formatVelocity(v)}
-                      </Text>
-                    </Animated.View>
-                  )}
-                  {barInner}
-                </View>
-              )
-
-              if (onRepPress && expanded) {
-                return (
-                  <Pressable
-                    key={i}
-                    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}`}
-                  >
-                    {bar}
-                  </Pressable>
-                )
-              }
-
-              return bar
-            })}
-      </View>
+      <SetBarChart
+        slots={framedSlots}
+        colorFor={barColorFor}
+        height={height}
+        scale={scale}
+        scaleMax={scaleMax}
+        expandProgress={expandProgress}
+        renderBarOverlay={renderFramedBarOverlay}
+        targetReps={set ? undefined : targetReps}
+        barRadius={2}
+        cornerStyle="top"
+        hideBaseline
+        testIDPrefix="velocity"
+      />
       {expanded && showInfo && (
         <Animated.View
           style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
             opacity: infoOpacity,
-            position: 'absolute',
-            bottom: 4,
-            left: 6,
-            right: 6,
+            marginTop: 6,
+            paddingHorizontal: 6,
           }}
           testID="velocity-info-row"
         >
           <Text
             className="text-text-secondary"
-            style={{
-              fontSize: 10,
-              fontFamily: 'Inter, sans-serif',
-            }}
+            style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}
           >
             {meanZone} {'·'} {formatVelocity(meanVelocity)} m/s
           </Text>
           <Text
             className="text-text-secondary"
-            style={{
-              fontSize: 10,
-              fontFamily: 'Inter, sans-serif',
-              ...getLossStyle(loss),
-            }}
+            style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', ...getLossStyle(loss) }}
           >
             Loss: {loss}%
           </Text>