@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -2,6 +2,7 @@
 import { useEffect, useState, useMemo } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
@@ -10,10 +11,11 @@ const STATUS_WARNING = t['status-warning']
 const STATUS_INFO = t['status-info']
 /** Dot outline: near-white ring so load dots read on the band fill and any
  *  surface (matches the MesoStatusCard gauge-marker convention). */
+// VW-82: no token at this value (nearest text-primary #F9F6F3). Left raw, proposed.
 const DOT_BORDER = '#F3F4F6'
-const BAND_FILL = 'rgba(46,213,115,0.1)'
-const BAND_EDGE = 'rgba(46,213,115,0.45)'
-const PROJECTION_FILL = 'rgba(46,213,115,0.05)'
+const BAND_FILL = alpha(STATUS_SUCCESS, 0.1)
+const BAND_EDGE = alpha(STATUS_SUCCESS, 0.45)
+const PROJECTION_FILL = alpha(STATUS_SUCCESS, 0.05)
 
 const PADDING_LEFT = 28
 const PADDING_RIGHT = 10
@@ -101,7 +103,7 @@ function formatDate(date: string): string {
 function toPixels(
   points: CapacityBandDataPoint[],
   toX: (date: string) => number,
-  toY: (value: number) => number,
+  toY: (value: number) => number
 ): PixelPoint[] {
   return points
     .map((p) => ({ x: toX(p.date), yHigh: toY(p.bandHigh), yLow: toY(p.bandLow) }))
@@ -153,7 +155,7 @@ function buildEdges(pixels: PixelPoint[], key: 'yHigh' | 'yLow') {
 function collectValues(
   band: CapacityBandDataPoint[],
   workouts: WorkoutDot[],
-  projection?: CapacityBandProjection,
+  projection?: CapacityBandProjection
 ): number[] {
   const values: number[] = []
   band.forEach((p) => values.push(p.bandLow, p.bandHigh))
@@ -200,7 +202,7 @@ export function CapacityBandChart({
   const [reveal] = useState(() => new Animated.Value(0))
   const dotAnims = useMemo(
     () => Array.from({ length: workouts.length }, () => new Animated.Value(0)),
-    [workouts.length],
+    [workouts.length]
   )
 
   useEffect(() => {
@@ -218,7 +220,7 @@ export function CapacityBandChart({
         duration: 200,
         easing: Easing.out(Easing.ease),
         useNativeDriver: false,
-      }),
+      })
     )
     const animation = Animated.sequence([draw, Animated.stagger(200, pops)])
     animation.start()
@@ -244,10 +246,8 @@ export function CapacityBandChart({
     const domainMax = maxV + pad
     const vRange = domainMax - domainMin || 1
 
-    const toX = (date: string) =>
-      PADDING_LEFT + ((parseTime(date) - minT) / tRange) * plotWidth
-    const toY = (value: number) =>
-      PADDING_TOP + (1 - (value - domainMin) / vRange) * plotHeight
+    const toX = (date: string) => PADDING_LEFT + ((parseTime(date) - minT) / tRange) * plotWidth
+    const toY = (value: number) => PADDING_TOP + (1 - (value - domainMin) / vRange) * plotHeight
     return { toX, toY }
   }, [band, workouts, projection, plotWidth, plotHeight])
 
@@ -274,9 +274,7 @@ export function CapacityBandChart({
   const trainingPixels = projection
     ? toPixels([lastBandPoint, ...projection.withTraining], toX, toY)
     : []
-  const restPixels = projection
-    ? toPixels([lastBandPoint, ...projection.withRest], toX, toY)
-    : []
+  const restPixels = projection ? toPixels([lastBandPoint, ...projection.withRest], toX, toY) : []
 
   const labelStride = Math.max(1, Math.ceil(band.length / 5))
   const revealWidth = reveal.interpolate({ inputRange: [0, 1], outputRange: [0, width] })
@@ -303,7 +301,7 @@ export function CapacityBandChart({
     segments: ReturnType<typeof buildEdges>,
     color: string,
     dashed: boolean,
-    key: string,
+    key: string
   ) =>
     segments.map((seg, i) => (
       <View
@@ -341,107 +339,142 @@ export function CapacityBandChart({
         style={{ position: 'absolute', top: 0, left: 0, width, height }}
         accessibilityRole="image"
         accessibilityLabel={`Training capacity band chart. Current capacity: ${currentStatus(
-          workouts,
+          workouts
         )}. ${workouts.length} workout${workouts.length === 1 ? '' : 's'} shown.`}
         testID="capacity-band-chart"
       >
-      {/* Band + projection draw left-to-right via an animated clip. */}
-      <Animated.View
-        style={{ position: 'absolute', top: 0, left: 0, height, width: revealWidth, overflow: 'hidden' }}
-        accessibilityElementsHidden
-        importantForAccessibility="no-hide-descendants"
-        testID="capacity-band-chart-reveal"
-      >
-        <View style={{ width, height, position: 'relative' }}>
-          {projection && (
-            <View testID="capacity-band-chart-projection">
-              {renderColumns(buildColumns(trainingPixels, COLUMN_STEP), PROJECTION_FILL, 'capacity-band-chart-projection-fill')}
-              {renderColumns(buildColumns(restPixels, COLUMN_STEP), PROJECTION_FILL, 'capacity-band-chart-projection-fill')}
-              {renderEdges(buildEdges(trainingPixels, 'yHigh'), STATUS_SUCCESS, true, 'capacity-band-chart-projection-training')}
-              {renderEdges(buildEdges(trainingPixels, 'yLow'), STATUS_SUCCESS, true, 'capacity-band-chart-projection-training')}
-              {renderEdges(buildEdges(restPixels, 'yHigh'), STATUS_INFO, true, 'capacity-band-chart-projection-rest')}
-              {renderEdges(buildEdges(restPixels, 'yLow'), STATUS_INFO, true, 'capacity-band-chart-projection-rest')}
-              <Text
-                style={{
-                  position: 'absolute',
-                  left: trainingPixels[trainingPixels.length - 1]?.x + 2,
-                  top: trainingPixels[trainingPixels.length - 1]?.yHigh - 12,
-                  fontSize: 9,
-                  fontFamily: 'Inter, sans-serif',
-                  color: STATUS_SUCCESS,
-                }}
-                testID="capacity-band-chart-projection-training-label"
-              >
-                Training
-              </Text>
-              <Text
-                style={{
-                  position: 'absolute',
-                  left: restPixels[restPixels.length - 1]?.x + 2,
-                  top: restPixels[restPixels.length - 1]?.yLow + 2,
-                  fontSize: 9,
-                  fontFamily: 'Inter, sans-serif',
-                  color: STATUS_INFO,
-                }}
-                testID="capacity-band-chart-projection-rest-label"
-              >
-                Rest
-              </Text>
-            </View>
-          )}
+        {/* Band + projection draw left-to-right via an animated clip. */}
+        <Animated.View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            height,
+            width: revealWidth,
+            overflow: 'hidden',
+          }}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          testID="capacity-band-chart-reveal"
+        >
+          <View style={{ width, height, position: 'relative' }}>
+            {projection && (
+              <View testID="capacity-band-chart-projection">
+                {renderColumns(
+                  buildColumns(trainingPixels, COLUMN_STEP),
+                  PROJECTION_FILL,
+                  'capacity-band-chart-projection-fill'
+                )}
+                {renderColumns(
+                  buildColumns(restPixels, COLUMN_STEP),
+                  PROJECTION_FILL,
+                  'capacity-band-chart-projection-fill'
+                )}
+                {renderEdges(
+                  buildEdges(trainingPixels, 'yHigh'),
+                  STATUS_SUCCESS,
+                  true,
+                  'capacity-band-chart-projection-training'
+                )}
+                {renderEdges(
+                  buildEdges(trainingPixels, 'yLow'),
+                  STATUS_SUCCESS,
+                  true,
+                  'capacity-band-chart-projection-training'
+                )}
+                {renderEdges(
+                  buildEdges(restPixels, 'yHigh'),
+                  STATUS_INFO,
+                  true,
+                  'capacity-band-chart-projection-rest'
+                )}
+                {renderEdges(
+                  buildEdges(restPixels, 'yLow'),
+                  STATUS_INFO,
+                  true,
+                  'capacity-band-chart-projection-rest'
+                )}
+                <Text
+                  style={{
+                    position: 'absolute',
+                    left: trainingPixels[trainingPixels.length - 1]?.x + 2,
+                    top: trainingPixels[trainingPixels.length - 1]?.yHigh - 12,
+                    fontSize: 9,
+                    fontFamily: 'Inter, sans-serif',
+                    color: STATUS_SUCCESS,
+                  }}
+                  testID="capacity-band-chart-projection-training-label"
+                >
+                  Training
+                </Text>
+                <Text
+                  style={{
+                    position: 'absolute',
+                    left: restPixels[restPixels.length - 1]?.x + 2,
+                    top: restPixels[restPixels.length - 1]?.yLow + 2,
+                    fontSize: 9,
+                    fontFamily: 'Inter, sans-serif',
+                    color: STATUS_INFO,
+                  }}
+                  testID="capacity-band-chart-projection-rest-label"
+                >
+                  Rest
+                </Text>
+              </View>
+            )}
 
-          <View testID="capacity-band-chart-band">
-            {renderColumns(columns, BAND_FILL, 'capacity-band-chart-band-cell')}
+            <View testID="capacity-band-chart-band">
+              {renderColumns(columns, BAND_FILL, 'capacity-band-chart-band-cell')}
+            </View>
+            {renderEdges(topEdge, BAND_EDGE, false, 'capacity-band-chart-edge-top')}
+            {renderEdges(bottomEdge, BAND_EDGE, false, 'capacity-band-chart-edge-bottom')}
           </View>
-          {renderEdges(topEdge, BAND_EDGE, false, 'capacity-band-chart-edge-top')}
-          {renderEdges(bottomEdge, BAND_EDGE, false, 'capacity-band-chart-edge-bottom')}
-        </View>
-      </Animated.View>
-
-      {/* Y axis conceptual label (no numbers). */}
-      <Text
-        className="text-text-tertiary"
-        style={{
-          position: 'absolute',
-          left: PADDING_LEFT / 2 - 14,
-          top: PADDING_TOP + plotHeight / 2 - 7,
-          width: 32,
-          textAlign: 'center',
-          fontSize: 9,
-          fontFamily: 'Inter, sans-serif',
-          transform: [{ rotate: '-90deg' }],
-        }}
-        accessibilityElementsHidden
-        importantForAccessibility="no-hide-descendants"
-        testID="capacity-band-chart-y-axis-label"
-      >
-        Load
-      </Text>
-
-      {/* X axis date labels (subset to avoid overlap). */}
-      {band.map((point, i) => {
-        if (i % labelStride !== 0 && i !== band.length - 1) return null
-        return (
-          <Text
-            key={`x-${point.date}`}
-            className="text-text-tertiary"
-            style={{
-              position: 'absolute',
-              left: toX(point.date) - 14,
-              top: height - PADDING_BOTTOM + 2,
-              width: 28,
-              textAlign: 'center',
-              fontSize: 10,
-              fontFamily: 'Inter, sans-serif',
-            }}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
-            testID="capacity-band-chart-x-label"
-          >
-            {formatDate(point.date)}
-          </Text>
-        )
-      })}
+        </Animated.View>
+
+        {/* Y axis conceptual label (no numbers). */}
+        <Text
+          className="text-text-tertiary"
+          style={{
+            position: 'absolute',
+            left: PADDING_LEFT / 2 - 14,
+            top: PADDING_TOP + plotHeight / 2 - 7,
+            width: 32,
+            textAlign: 'center',
+            fontSize: 9,
+            fontFamily: 'Inter, sans-serif',
+            transform: [{ rotate: '-90deg' }],
+          }}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          testID="capacity-band-chart-y-axis-label"
+        >
+          Load
+        </Text>
+
+        {/* X axis date labels (subset to avoid overlap). */}
+        {band.map((point, i) => {
+          if (i % labelStride !== 0 && i !== band.length - 1) return null
+          return (
+            <Text
+              key={`x-${point.date}`}
+              className="text-text-tertiary"
+              style={{
+                position: 'absolute',
+                left: toX(point.date) - 14,
+                top: height - PADDING_BOTTOM + 2,
+                width: 28,
+                textAlign: 'center',
+                fontSize: 10,
+                fontFamily: 'Inter, sans-serif',
+              }}
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              testID="capacity-band-chart-x-label"
+            >
+              {formatDate(point.date)}
+            </Text>
+          )
+        })}
       </View>
 
       {/* Workout dots — scale in after the band draws. */}

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { DeviationBar } from './DeviationBar'
 
 const meta: Meta<typeof DeviationBar> = {
-  title: 'Workout/DataViz/DeviationBar',
+  title: 'Custom/Workout/DataViz/DeviationBar',
   component: DeviationBar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,6 +3,10 @@ import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { DeviationBar } from './DeviationBar'
 import { greyRamp } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+
+const t = getSemanticColors('dark')
 
 describe('DeviationBar', () => {
   it('renders the bar and dot', () => {
@@ -59,12 +63,15 @@ describe('DeviationBar', () => {
     expect(bar).toHaveAttribute('role', 'slider')
   })
 
-  it('renders an 8px dot with a text-primary border and shadow', () => {
+  it('renders an 8px dot with a text-primary border and a lift', () => {
     const { getByTestId } = render(<DeviationBar deviation={0} />)
     const dot = getByTestId('deviation-dot')
     expect(dot).toHaveStyle({ width: '8px', height: '8px' })
     expect(dot).toHaveStyle({ borderTopWidth: '1.5px', borderTopColor: greyRamp[50] })
-    expect(dot).toHaveStyle({ boxShadow: '0 0 4px rgba(0,0,0,0.5)' })
+    // The knob rests on the track: an ambient cast shadow, no rim (the ring is
+    // already its edge) and never an inset.
+    expect(dot.style.boxShadow).toContain('rgba(0,0,0')
+    expect(dot.style.boxShadow).not.toContain('inset')
   })
 
   it('renders the track with the deviation gradient background', () => {
@@ -72,8 +79,7 @@ describe('DeviationBar', () => {
     const bar = getByTestId('deviation-bar')
     const track = bar.firstElementChild as HTMLElement
     expect(track).toHaveStyle({
-      backgroundImage:
-        'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)',
+      backgroundImage: `linear-gradient(90deg, ${alpha(t['status-success'], 0.25)} 0%, rgba(107,114,128,0.15) 50%, ${alpha(t['status-warning'], 0.25)} 100%)`,
     })
   })
 

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

@@ -2,6 +2,8 @@
 import { View, type ViewProps, type ViewStyle } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { greyRamp } from '../../../theme/tokens/primitives'
+import { liftStyle } from '../../../theme/lift'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
@@ -25,12 +27,7 @@ function getDeviationDescription(deviation: number): string {
   return 'on plan'
 }
 
-export function DeviationBar({
-  deviation,
-  width,
-  className,
-  ...props
-}: DeviationBarProps) {
+export function DeviationBar({ deviation, width, className, ...props }: DeviationBarProps) {
   const clamped = Math.max(-1, Math.min(1, deviation))
   const resolvedWidth = width ?? 40
   const dotPosition = ((clamped + 1) / 2) * resolvedWidth
@@ -42,7 +39,12 @@ export function DeviationBar({
   return (
     <View
       className={className}
-      style={{ flexDirection: 'row', alignItems: 'center', height: containerHeight, width: resolvedWidth }}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: containerHeight,
+        width: resolvedWidth,
+      }}
       accessibilityRole="adjustable"
       accessibilityValue={{ min: -100, max: 100, now: valueNow }}
       accessibilityLabel={`Session deviation: ${getDeviationDescription(clamped)}`}
@@ -53,14 +55,18 @@ export function DeviationBar({
       {...props}
     >
       <View
-        style={{
-          height: trackHeight,
-          width: resolvedWidth,
-          borderRadius: 3,
-          // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
-          backgroundImage:
-            'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)',
-        } as ViewStyle}
+        style={
+          {
+            height: trackHeight,
+            width: resolvedWidth,
+            borderRadius: 3,
+            // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
+            // rgba(107,114,128,0.15) at 50% has no exact token match (nearest:
+            // semanticPins.textSecondaryLight #65748B, ΔRGB ~12.7) — left as a
+            // raw literal (VW-78).
+            backgroundImage: `linear-gradient(90deg, ${alpha(t['status-success'], 0.25)} 0%, rgba(107,114,128,0.15) 50%, ${alpha(t['status-warning'], 0.25)} 100%)`,
+          } as ViewStyle
+        }
       />
       <View
         style={{
@@ -70,7 +76,9 @@ export function DeviationBar({
           borderRadius: 9999,
           borderWidth: 1.5,
           borderColor: greyRamp[50],
-          boxShadow: '0 0 4px rgba(0,0,0,0.5)',
+          // The dot is a knob resting on the track: one plane of lift. Its light
+          // ring is already the edge, so the lift contributes the shadow alone.
+          ...liftStyle(1, 'dark', { rim: 0 }),
           backgroundColor: getDotColor(clamped),
           left: Math.max(0, Math.min(dotPosition - dotSize / 2, resolvedWidth - dotSize)),
           top: (containerHeight - dotSize) / 2,

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

@@ -0,0 +1,183 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { DualVelocityStrip } from './VelocityStrip'
+import { greyRamp, primitiveColors } from '../../../theme/tokens/primitives'
+
+const PAGE_BG = greyRamp[975]
+const PANEL_BG = greyRamp[950]
+const LIST_BG = greyRamp[925]
+
+/** Bilateral cable chest press, LEFT dominant / RIGHT lagging, 6 of 8 reps done. */
+const LEFT = [0.54, 0.52, 0.5, 0.48, 0.46, 0.44]
+const RIGHT = [0.49, 0.47, 0.45, 0.42, 0.4, 0.38]
+
+const meta: Meta<typeof DualVelocityStrip> = {
+  title: 'Custom/Workout/DataViz/DualVelocityStrip',
+  component: DualVelocityStrip,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'The dual-voltra (bilateral) DIVERGING per-rep velocity chart. LEFT reps grow UP, ' +
+          'RIGHT reps grow DOWN from one shared centre axis — one mirrored pair per rep index — ' +
+          'so a left-dominant / right-lagging set reads pre-attentively as an asymmetric ' +
+          'silhouette. Reuses VelocityStrip’s slot vocabulary (rep / todo / variable / ' +
+          'continue), its velocity-zone colors, hero geometry, and the live-rep pop. Color is ' +
+          'ALWAYS the velocity zone; SIDE is encoded by position only, never hue. `variant="hero"` ' +
+          'is the wall scale (value labels + per-side running-best reference lines); ' +
+          '`variant="dual-expanded"` is the compact rail-expanded scale (`"rail"` is a deprecated ' +
+          'alias for the same renderer). Single-voltra sets keep using VelocityStrip.',
+      },
+    },
+  },
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['hero', 'dual-expanded'] },
+    targetReps: { control: 'number' },
+    liveRepIndex: { control: 'number' },
+    height: { control: { type: 'number', min: 48, max: 320, step: 4 } },
+    scale: { control: 'inline-radio', options: ['peak', 'fixed'] },
+  },
+}
+export default meta
+type Story = StoryObj<typeof DualVelocityStrip>
+
+function Panel({ children, width }: { children: React.ReactNode; width?: number }) {
+  return (
+    <View style={{ width, backgroundColor: PANEL_BG, borderRadius: 12, padding: 20, gap: 12 }}>
+      {children}
+    </View>
+  )
+}
+
+function Page({ children }: { children: React.ReactNode }) {
+  return (
+    <View style={{ padding: 28, backgroundColor: PAGE_BG, minHeight: '100%', gap: 24 }}>
+      {children}
+    </View>
+  )
+}
+
+/** HERO — the across-the-room bilateral live chart, L up / R down from the centre axis. */
+export const Hero: Story = {
+  args: { variant: 'hero', targetReps: 8, liveRepIndex: 5, height: 280, scale: 'peak' },
+  render: (args) => (
+    <Page>
+      <Panel width={760}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: 15,
+            fontWeight: '700',
+          }}
+        >
+          Hero — dual diverging velocity
+        </Text>
+        <DualVelocityStrip {...args} left={{ velocities: LEFT }} right={{ velocities: RIGHT }} />
+      </Panel>
+    </Page>
+  ),
+}
+
+/** DUAL-EXPANDED — the same diverging language at the compact rail-expanded scale (no labels/refs). */
+export const DualExpanded: Story = {
+  args: { variant: 'dual-expanded', targetReps: 8, height: 84 },
+  render: (args) => (
+    <Page>
+      <Panel width={320}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: 13,
+            fontWeight: '700',
+          }}
+        >
+          Rail expanded — same language, smaller
+        </Text>
+        <View style={{ backgroundColor: LIST_BG, borderRadius: 8, padding: 12 }}>
+          <DualVelocityStrip {...args} left={{ velocities: LEFT }} right={{ velocities: RIGHT }} />
+        </View>
+      </Panel>
+    </Page>
+  ),
+}
+
+/**
+ * A completed, narrow-panel set ending on its OWN peak on both sides (TD-07.10 repro): the last
+ * rep's value label has no sibling column to its right, and its bar sits at the running-best
+ * reference-line height — the two crowd together at the plot's right edge. Narrow enough
+ * (~420px panel, 8 reps/side) that the last column's bar width is under the label's estimated
+ * width, so the flip rule fires: the last label anchors right (grows left) instead of centering
+ * and bleeding past the edge.
+ */
+const ASCENDING_LEFT = [
+  0.55, 0.58, 0.6, 0.63, 0.66, 0.68, 0.71, 0.74, 0.77, 0.79, 0.82, 0.85, 0.87, 0.9,
+]
+const ASCENDING_RIGHT = [
+  0.53, 0.56, 0.58, 0.61, 0.64, 0.66, 0.69, 0.72, 0.75, 0.77, 0.8, 0.83, 0.85, 0.88,
+]
+
+export const CrowdedRightEdgeLabel: Story = {
+  args: { variant: 'hero', height: 300, scale: 'peak' },
+  render: (args) => (
+    <Page>
+      <Panel width={420}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: 15,
+            fontWeight: '700',
+          }}
+        >
+          Peak on the last rep, narrow panel — the flip rule (TD-07.10)
+        </Text>
+        <DualVelocityStrip
+          {...args}
+          left={{ velocities: ASCENDING_LEFT }}
+          right={{ velocities: ASCENDING_RIGHT }}
+        />
+      </Panel>
+    </Page>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Before the fix, the last rep's centered label bled past the plot's right edge and sat " +
+          "on top of the running-best reference line. The flip rule right-anchors that column's " +
+          'label instead, so it clears both.',
+      },
+    },
+  },
+}
+
+/** A range set on both sides — shows the cyan variable-window slots mirrored past the floor. */
+export const RangeSet: Story = {
+  args: { variant: 'hero', height: 260, scale: 'peak' },
+  render: (args) => (
+    <Page>
+      <Panel width={760}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: 15,
+            fontWeight: '700',
+          }}
+        >
+          Range set — variable window mirrored both sides
+        </Text>
+        <DualVelocityStrip
+          {...args}
+          left={{ set: { type: 'range', velocities: LEFT.slice(0, 5), floor: 6, max: 10 } }}
+          right={{ set: { type: 'range', velocities: RIGHT.slice(0, 5), floor: 6, max: 10 } }}
+        />
+      </Panel>
+    </Page>
+  ),
+}