@titan-design/react-ui 0.7.0 → 0.9.0

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

@@ -8,6 +8,7 @@ import {
   Easing,
   type ViewProps,
   type ViewStyle,
+  type LayoutChangeEvent,
 } from 'react-native'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 import { primitiveColors, primitiveRamps, sequentialEffort } from '../../../theme/tokens/primitives'
@@ -19,7 +20,7 @@ import { SET_STRIP_VARIABLE_COLOR } from './SetStrip'
  * (e.g. workout-analytics' `VelocityZones.bands`).
  *
  * Deliberately a plain structural shape — titan never imports the analytics
- * package (same policy as TempoBar's presentational phase key). Any object with
+ * package (the same presentational-only policy the Workout family follows). Any object with
  * this shape can be passed, so `zones={waVelocityZones.bands}` works directly.
  * Bands are ordered slow → fast, contiguous, and cover `[0, ∞)` with the top
  * band's `max === null`. Bands carry NO color — color is a UI concern resolved
@@ -84,15 +85,24 @@ export interface VelocityStripProps extends ViewProps {
    * 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}.
+   * 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.
    */
-  variant?: 'mini' | 'expanded'
-  /** `expanded` plot height in px (bars scale to this). Default 60. */
+  variant?: 'mini' | 'expanded' | 'hero'
+  /** `expanded` / `hero` plot height in px (bars scale to this). Default 60 (`expanded`) / 220 (`hero`). */
   height?: number
   /**
-   * `expanded` bar scaling. `peak` (default) scales to the set's own max (+15%
-   * headroom). `fixed` scales to a fixed velocity ceiling so bar heights read the
-   * same absolute velocity across sets (the spotlight).
+   * `hero` only: the set's planned rep count. Reps beyond {@link velocities} draw as
+   * dashed placeholder stubs so the wall reads "3 of 8 done" at a glance. Ignored
+   * (and no placeholders drawn) when absent or ≤ the performed-rep count.
+   */
+  targetReps?: number
+  /**
+   * `expanded` / `hero` bar scaling. `peak` (default) scales to the set's own max
+   * (+15% headroom). `fixed` scales to a fixed velocity ceiling so bar heights read
+   * the same absolute velocity across sets (the spotlight).
    */
   scale?: 'peak' | 'fixed'
   /** `expanded` framed chart: per-bar m/s labels. Default true. */
@@ -372,9 +382,39 @@ 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]
+
+/**
+ * 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).
+ */
+const PEAK_HEADROOM = 1.06
+
 /** 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 * 1.15
+  return scale === 'fixed' ? FIXED_MAX_VELOCITY : maxVelocity * PEAK_HEADROOM
 }
 
 /** Bare-strip bar height (px): velocity-scaled for a performed rep, a short stub otherwise. */
@@ -407,6 +447,254 @@ 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 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.
+ */
+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
+}
+
+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
+  targetReps?: number
+  height: number
+  className?: 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.
+ */
+function HeroVelocityChart({
+  doneVelocities,
+  barColorFor,
+  scaleDenom,
+  referenceVelocity,
+  liveRepIndex,
+  isNewPeak,
+  targetReps,
+  height,
+  className,
+  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,
+  )
+  const showBarLabel = (i: number): boolean =>
+    !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 (
+    <View
+      className={className}
+      style={[{ height }, externalStyle]}
+      accessibilityRole="image"
+      accessibilityLabel={label}
+      testID="velocity-strip-hero"
+      {...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>
+    </View>
+  )
+}
+
 export function VelocityStrip({
   velocities,
   set,
@@ -417,6 +705,7 @@ export function VelocityStrip({
   onRepPress,
   variant = 'expanded',
   height = EXPANDED_HEIGHT,
+  targetReps,
   scale = 'peak',
   showNumbers = true,
   showInfo = true,
@@ -456,47 +745,19 @@ export function VelocityStrip({
     ? (classifyBand(meanVelocity, zones)?.label ?? '')
     : getVelocityZoneName(meanVelocity)
 
-  const prefersReducedMotion = usePrefersReducedMotion()
   const [heightAnim] = useState(() => new Animated.Value(expanded ? height : 3))
   const [labelOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0))
   const [infoOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0))
-  const [liveScale] = useState(() => new Animated.Value(1))
 
   // 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
-  useEffect(() => {
-    if (variant !== 'expanded' || !framed || 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()
-    }
-  }, [variant, framed, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale])
+  const liveScale = useLiveRepPop(
+    variant === 'expanded' && framed,
+    liveRepIndex,
+    liveVelocity,
+    isNewPeak
+  )
 
   useEffect(() => {
     if (variant !== 'expanded' || !framed) return
@@ -529,6 +790,26 @@ export function VelocityStrip({
   const repCount = doneVelocities.length
   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
+    return (
+      <HeroVelocityChart
+        doneVelocities={doneVelocities}
+        barColorFor={barColorFor}
+        scaleDenom={scaleDenom}
+        referenceVelocity={maxVelocity}
+        liveRepIndex={liveRepIndex}
+        isNewPeak={isNewPeak}
+        targetReps={targetReps}
+        height={heroHeight}
+        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

package/src/components/custom/Workout/ZoneTrack.stories.tsx

@@ -102,15 +102,14 @@ export const BareTrack: Story = {
   args: { zones: FATIGUE_ZONES, max: 40 },
 }
 
-/** Chunky wall-glanceable density via a taller track. */
+/** The across-the-room wall scale — `size="wall"` grows track, needle, tick lines and labels together. */
 export const WallDensity: Story = {
   args: {
     zones: FATIGUE_ZONES,
     max: 40,
     marker: { type: 'needle', value: 15 },
     ticks: FATIGUE_TICKS,
-    trackHeight: 22,
-    needleOverhang: 9,
+    size: 'wall',
   },
 }
 

package/src/components/custom/Workout/ZoneTrack.test.tsx

@@ -198,3 +198,37 @@ describe('ZoneTrack', () => {
     })
   })
 })
+
+describe('ZoneTrack size="wall"', () => {
+  const TICKS = [
+    { value: 0, label: 'fresh' },
+    { value: 40, label: 'stop' },
+  ]
+
+  it('scales the needle and tick labels up together', () => {
+    render(
+      <ZoneTrack
+        zones={ZONES}
+        max={40}
+        size="wall"
+        marker={{ type: 'needle', value: 20 }}
+        ticks={TICKS}
+      />
+    )
+    expect(screen.getByTestId('zone-track-needle')).toHaveStyle({ width: '7px' })
+    expect(screen.getAllByTestId('zone-track-tick-label')[0]).toHaveStyle({ fontSize: 14 })
+  })
+
+  it('defaults to the compact scale (needle 4 / label 9) when size is omitted', () => {
+    render(
+      <ZoneTrack zones={ZONES} max={40} marker={{ type: 'needle', value: 20 }} ticks={TICKS} />
+    )
+    expect(screen.getByTestId('zone-track-needle')).toHaveStyle({ width: '4px' })
+    expect(screen.getAllByTestId('zone-track-tick-label')[0]).toHaveStyle({ fontSize: 9 })
+  })
+
+  it('still lets an explicit trackHeight override the size default', () => {
+    render(<ZoneTrack zones={ZONES} max={40} size="wall" trackHeight={30} />)
+    expect(screen.getByTestId('zone-track-track')).toHaveStyle({ height: '30px' })
+  })
+})

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

@@ -1,5 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, type ViewProps, type DimensionValue } from 'react-native'
+import { useState } from 'react'
+import { View, Text, type ViewProps, type DimensionValue, type LayoutChangeEvent } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { primitiveColors } from '../../../theme/tokens/primitives'
 import { alpha } from '../../../utils/colors'
@@ -19,9 +20,59 @@ const DEFAULT_MARKER_COLOR = primitiveColors.white
 /** Tick mark + tick label colour. */
 const TICK_COLOR = t['text-tertiary']
 
-const DEFAULT_TRACK_HEIGHT = 14
-const DEFAULT_NEEDLE_OVERHANG = 6
-const NEEDLE_WIDTH = 4
+/** Density. `default` — the compact card/rail gauge. `wall` — the across-the-room dashboard scale. */
+export type ZoneTrackSize = 'default' | 'wall'
+
+interface ZoneTrackSizing {
+  trackHeight: number
+  needleOverhang: number
+  needleWidth: number
+  tickLineNormal: number
+  tickLineEmphasized: number
+  tickLineHeightPad: number
+  tickLineTopPad: number
+  labelRowHeight: number
+  labelMarginTop: number
+  tickFont: number
+  tickLetterSpacing: number
+  tickCellWidth: number
+}
+
+/**
+ * Per-density magnitudes. `default` reproduces the original compact values exactly;
+ * `wall` scales the track, needle, tick lines and tick labels up together so the gauge
+ * reads across a room. `trackHeight` / `needleOverhang` remain overridable per call.
+ */
+const ZONE_SIZES: Record<ZoneTrackSize, ZoneTrackSizing> = {
+  default: {
+    trackHeight: 14,
+    needleOverhang: 6,
+    needleWidth: 4,
+    tickLineNormal: 1.5,
+    tickLineEmphasized: 2,
+    tickLineHeightPad: 4,
+    tickLineTopPad: 2,
+    labelRowHeight: 16,
+    labelMarginTop: 5,
+    tickFont: 9,
+    tickLetterSpacing: 0.5,
+    tickCellWidth: 28,
+  },
+  wall: {
+    trackHeight: 24,
+    needleOverhang: 9,
+    needleWidth: 7,
+    tickLineNormal: 2.5,
+    tickLineEmphasized: 3.5,
+    tickLineHeightPad: 6,
+    tickLineTopPad: 3,
+    labelRowHeight: 24,
+    labelMarginTop: 8,
+    tickFont: 14,
+    tickLetterSpacing: 0.5,
+    tickCellWidth: 48,
+  },
+}
 
 /** A single colour band of the zone gradient, spanning `[prev.upTo, upTo]` of the domain. */
 export interface ZoneTrackZone {
@@ -82,9 +133,11 @@ export interface ZoneTrackProps extends ViewProps {
   ticks?: ZoneTrackTick[]
   /** Optional translucent range highlight drawn over the gradient. */
   band?: ZoneTrackBand | null
-  /** Track height in px. Default 14. */
+  /** Density: `default` (compact) or `wall` (the across-the-room dashboard scale). Scales track, needle, ticks and labels together. */
+  size?: ZoneTrackSize
+  /** Track height in px. Overrides the `size` default (14 default / 24 wall). */
   trackHeight?: number
-  /** How far a needle marker overhangs the track top + bottom, in px. Default 6. */
+  /** How far a needle marker overhangs the track top + bottom, in px. Overrides the `size` default (6 default / 9 wall). */
   needleOverhang?: number
   /** Muted colour of the track behind / beyond the fill. Default a charcoal step. */
   trackColor?: string
@@ -117,14 +170,29 @@ export function ZoneTrack({
   marker = null,
   ticks,
   band = null,
-  trackHeight = DEFAULT_TRACK_HEIGHT,
-  needleOverhang = DEFAULT_NEEDLE_OVERHANG,
+  size = 'default',
+  trackHeight: trackHeightProp,
+  needleOverhang: needleOverhangProp,
   trackColor = DEFAULT_TRACK_COLOR,
   className,
   style,
   accessibilityLabel,
   ...props
 }: ZoneTrackProps) {
+  const s = ZONE_SIZES[size]
+  const trackHeight = trackHeightProp ?? s.trackHeight
+  const needleOverhang = needleOverhangProp ?? s.needleOverhang
+
+  // Thin the tick labels on a narrow track so they never overlap (each occupies a fixed
+  // `tickCellWidth` cell). Width 0 (unmeasured) → show all, so test/server renders match.
+  const [trackW, setTrackW] = useState(0)
+  const onTrackLayout = (e: LayoutChangeEvent) => setTrackW(e.nativeEvent.layout.width)
+  const tickCount = ticks?.length ?? 0
+  const tickSpacing = trackW > 0 && tickCount > 0 ? trackW / tickCount : Infinity
+  const tickStep = tickSpacing < s.tickCellWidth ? Math.ceil(s.tickCellWidth / tickSpacing) : 1
+  // Keep the first, last, evenly-stepped, and any emphasized ticks; drop the rest's labels.
+  const showTickLabel = (i: number, emphasized: boolean): boolean =>
+    tickStep <= 1 || i === 0 || i === tickCount - 1 || i % tickStep === 0 || emphasized
   const isNeedle = marker?.type === 'needle'
   const markerHeight = isNeedle ? trackHeight + needleOverhang * 2 : trackHeight
   const markerFrac = marker != null ? fraction(marker.value, min, max) : 0
@@ -144,6 +212,7 @@ export function ZoneTrack({
       accessibilityValue={marker != null ? { min, max, now: marker.value } : { min, max, now: min }}
       accessibilityLabel={accessibilityLabel ?? `Zone track: ${marker?.value ?? min}`}
       testID="zone-track"
+      onLayout={onTrackLayout}
       {...props}
     >
       <View style={{ position: 'relative', height: markerHeight }}>
@@ -231,11 +300,11 @@ export function ZoneTrack({
               position: 'absolute',
               top: 0,
               left: pct(markerFrac),
-              width: NEEDLE_WIDTH,
+              width: s.needleWidth,
               height: markerHeight,
-              borderRadius: NEEDLE_WIDTH / 2,
+              borderRadius: s.needleWidth / 2,
               backgroundColor: marker.color ?? DEFAULT_MARKER_COLOR,
-              transform: [{ translateX: -NEEDLE_WIDTH / 2 }],
+              transform: [{ translateX: -s.needleWidth / 2 }],
             }}
           />
         )}
@@ -244,7 +313,7 @@ export function ZoneTrack({
         {ticks?.map((tick, i) => {
           const emphasized = tick.emphasized === true
           const lineColor = tick.color ?? (emphasized ? t['brand-primary'] : TICK_COLOR)
-          const lineWidth = emphasized ? 2 : 1.5
+          const lineWidth = emphasized ? s.tickLineEmphasized : s.tickLineNormal
           return (
             <View
               key={`line-${i}`}
@@ -252,10 +321,10 @@ export function ZoneTrack({
               accessibilityElementsHidden
               style={{
                 position: 'absolute',
-                top: (markerHeight - trackHeight) / 2 - 2,
+                top: (markerHeight - trackHeight) / 2 - s.tickLineTopPad,
                 left: pct(fraction(tick.value, min, max)),
                 width: lineWidth,
-                height: trackHeight + 4,
+                height: trackHeight + s.tickLineHeightPad,
                 borderRadius: lineWidth / 2,
                 backgroundColor: lineColor,
                 transform: [{ translateX: -lineWidth / 2 }],
@@ -267,17 +336,20 @@ export function ZoneTrack({
       </View>
 
       {ticks != null && ticks.length > 0 && (
-        <View style={{ position: 'relative', height: 16, marginTop: 5 }}>
+        <View
+          style={{ position: 'relative', height: s.labelRowHeight, marginTop: s.labelMarginTop }}
+        >
           {ticks.map((tick, i) => {
             if (tick.label == null) return null
             const emphasized = tick.emphasized === true
+            if (!showTickLabel(i, emphasized)) return null
             const labelColor = tick.color ?? (emphasized ? t['brand-primary'] : TICK_COLOR)
             const labelNode = (
               <Text
                 testID="zone-track-tick-label"
                 style={{
-                  fontSize: 9,
-                  letterSpacing: 0.5,
+                  fontSize: s.tickFont,
+                  letterSpacing: s.tickLetterSpacing,
                   color: labelColor,
                   fontFamily: 'monospace',
                   fontWeight: emphasized ? '700' : '400',
@@ -293,8 +365,8 @@ export function ZoneTrack({
                 style={{
                   position: 'absolute',
                   left: pct(fraction(tick.value, min, max)),
-                  transform: [{ translateX: -14 }],
-                  width: 28,
+                  transform: [{ translateX: -s.tickCellWidth / 2 }],
+                  width: s.tickCellWidth,
                   alignItems: 'center',
                 }}
               >