@titan-design/react-ui 0.12.1 → 0.13.0

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

@@ -1,9 +1,11 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { View, type ViewProps, type ViewStyle } from 'react-native'
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
+import { semanticColorsDark } from '../../../theme/tokens/semantic'
 import { greyRamp } from '../../../theme/tokens/primitives'
-
-const t = getSemanticColors('dark')
+import { alpha } from '../../../utils/colors'
+import { getGlowShadow } from '../../../theme/elevation'
 
 export type StatusDotVariant =
   | 'success'
@@ -25,66 +27,91 @@ export interface StatusDotProps extends ViewProps {
   className?: string
 }
 
-const solidVariantColors: Record<string, string> = {
-  success: t['status-success'],
-  warning: t['status-warning'],
-  error: t['status-error'],
-  neutral: greyRamp[500],
-}
+type SolidVariant = 'success' | 'warning' | 'error' | 'neutral'
 
-const ringVariantStyles: Record<string, Record<string, unknown>> = {
-  'on-track': {
-    backgroundColor: 'rgba(46,213,115,0.15)',
-    borderWidth: 1,
-    borderColor: 'rgba(46,213,115,0.3)',
-  },
-  deviation: {
-    backgroundColor: 'rgba(245,158,11,0.15)',
-    borderWidth: 1,
-    borderColor: 'rgba(245,158,11,0.25)',
-  },
-  future: {
-    backgroundColor: 'rgba(107,114,128,0.1)',
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    borderColor: 'rgba(107,114,128,0.2)',
-  },
-}
+/** Solid variants: a filled dot. `neutral` takes `text-tertiary`, as Indicator's `default` does. */
+const solidFillToken = {
+  success: 'status-success',
+  warning: 'status-warning',
+  error: 'status-error',
+  neutral: 'text-tertiary',
+} as const
+
+/** Ring variants: a `-subtle` wash inside a `-muted` rim, both off the same role. */
+const ringWashToken = {
+  'on-track': { fill: 'status-success-subtle', border: 'status-success-muted' },
+  deviation: { fill: 'status-warning-subtle', border: 'status-warning-muted' },
+} as const
 
-const glowStyles: Record<StatusDotVariant, Record<string, unknown>> = {
-  success: { boxShadow: '0 0 4px rgba(46,213,115,0.4)' },
-  warning: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
-  error: { boxShadow: '0 0 4px rgba(239,68,68,0.4)' },
-  neutral: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
-  'on-track': { boxShadow: '0 0 4px rgba(46,213,115,0.4)' },
-  deviation: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
-  future: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
+// The neutral ring has no wash rungs: `-subtle`/`-muted`/`-strong` were published for
+// the seven status and brand roles, and `text-tertiary` is not one of them. Derived
+// from the same ramp step the token resolves to, at the frozen alphas, rather than
+// mixed independently. FINDING for E3: the neutral role needs the wash ladder too.
+const FUTURE_FILL = alpha(greyRamp[500], 0.1)
+const FUTURE_BORDER = alpha(greyRamp[500], 0.2)
+
+/** Glyph colour: dark on a solid fill, the role's own colour inside a ring. */
+const glyphToken = {
+  success: 'text-inverse',
+  warning: 'text-inverse',
+  error: 'text-inverse',
+  neutral: 'text-inverse',
+  'on-track': 'status-success',
+  deviation: 'status-warning',
+  future: 'text-tertiary',
+} as const
+
+// Glow is EMPHASIS, not depth: one shared builder, one token colour per variant.
+// Literal hex (not `resolveColor`) because getGlowShadow does colour maths on it —
+// the same exception Indicator documents.
+const glowColors: Record<StatusDotVariant, string> = {
+  success: semanticColorsDark['status-success'],
+  warning: semanticColorsDark['status-warning'],
+  error: semanticColorsDark['status-error'],
+  neutral: greyRamp[500],
+  'on-track': semanticColorsDark['status-success'],
+  deviation: semanticColorsDark['status-warning'],
+  future: greyRamp[500],
 }
 
+const glowStyles: Record<StatusDotVariant, ViewStyle> = Object.fromEntries(
+  Object.entries(glowColors).map(([variant, color]) => [variant, getGlowShadow(color, 'subtle')])
+) as Record<StatusDotVariant, ViewStyle>
+
 const iconChars: Record<string, string> = {
   check: '\u2713',
   exclamation: '!',
   dash: '\u2014',
 }
 
-/** Color-matched icon colors: dark on solid bg, light on transparent bg */
-const iconColors: Record<StatusDotVariant, string> = {
-  success: '#0A5C52',
-  warning: '#6B4000',
-  error: '#5C1A1A',
-  neutral: greyRamp[200],
-  'on-track': t['status-success'],
-  deviation: t['status-warning'],
-  future: greyRamp[500],
-}
-
 const sizeDimensions = {
   sm: { size: 8, showIcon: false },
   md: { size: 18, showIcon: true },
 }
 
-function isSolidVariant(variant: StatusDotVariant): boolean {
-  return variant in solidVariantColors
+function isSolidVariant(variant: StatusDotVariant): variant is SolidVariant {
+  return variant in solidFillToken
+}
+
+/** The ring variants' wash + rim, resolved per theme. `future` adds the dashed rim. */
+function ringStyle(variant: StatusDotVariant): ViewStyle | undefined {
+  if (variant === 'future') {
+    return {
+      backgroundColor: FUTURE_FILL,
+      borderWidth: 1,
+      borderStyle: 'dashed',
+      borderColor: FUTURE_BORDER,
+    }
+  }
+  if (variant === 'on-track' || variant === 'deviation') {
+    const tokens = ringWashToken[variant]
+    return {
+      backgroundColor: resolveColor(tokens.fill),
+      borderWidth: 1,
+      borderColor: resolveColor(tokens.border),
+    }
+  }
+  return undefined
 }
 
 export function StatusDot({
@@ -98,7 +125,7 @@ export function StatusDot({
 }: StatusDotProps) {
   const config = sizeDimensions[size]
   const solid = isSolidVariant(variant)
-  const ring = ringVariantStyles[variant]
+  const ring = ringStyle(variant)
 
   const glowStyle = glow ? glowStyles[variant] : null
 
@@ -113,8 +140,8 @@ export function StatusDot({
           justifyContent: 'center',
           flexShrink: 0,
         },
-        solid ? { backgroundColor: solidVariantColors[variant] } : undefined,
-        ring ? (ring as Record<string, unknown>) : undefined,
+        solid ? { backgroundColor: resolveColor(solidFillToken[variant]) } : undefined,
+        ring,
         glowStyle ? (glowStyle as Record<string, unknown>) : undefined,
       ]}
       accessibilityRole="image"
@@ -122,17 +149,17 @@ export function StatusDot({
       testID="status-dot"
     >
       {config.showIcon && icon && (
-        <Text
-          style={{
-            fontSize: 11,
-            lineHeight: 11,
-            fontWeight: '900',
-            color: iconColors[variant],
-          }}
+        // The glyph was 11px/900, off the type scale (TOKENS.md §4); `boldLabel` is
+        // the 12px sans label step and `font-black` keeps the original weight.
+        <Typography
+          variant="boldLabel"
+          color="inherit"
+          className="font-black leading-none"
+          style={{ color: resolveColor(glyphToken[variant]) }}
           accessibilityElementsHidden
         >
           {iconChars[icon]}
-        </Text>
+        </Typography>
       )}
     </View>
   )
@@ -146,12 +173,15 @@ export function StatusDot({
         {...props}
       >
         <View accessibilityElementsHidden>{dot}</View>
-        <Text
-          style={{ fontSize: 12, lineHeight: 16, color: greyRamp[400] }}
+        {/* 12px/16 is `caption` at the 4-unit leading step; its colour is `text-secondary`. */}
+        <Typography
+          variant="caption"
+          color="secondary"
+          className="leading-4"
           accessibilityElementsHidden
         >
           {label}
-        </Text>
+        </Typography>
       </View>
     )
   }

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

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

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

@@ -2,10 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { StatusPill, statusPillColor, type StatusPillStatus } from './StatusPill'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { alpha } from '../../../utils/colors'
-
-const t = getSemanticColors('dark')
+import { resolveColor } from '../../../theme/resolve-color'
 
 const cases: Array<{
   status: StatusPillStatus
@@ -30,25 +27,19 @@ describe('StatusPill', () => {
 
   describe('per-status mapping', () => {
     cases.forEach(({ status, token, label }) => {
-      it(`maps ${status} to the ${token} color and default label`, () => {
+      it(`renders the default ${status} label`, () => {
         render(<StatusPill status={status} />)
-        const text = screen.getByTestId('status-pill-label')
-        expect(text).toHaveTextContent(label)
-        expect(text).toHaveStyle({ color: t[token] })
+        expect(screen.getByText(label)).toBeInTheDocument()
       })
 
-      it(`tints the ${status} capsule from the ${token} token`, () => {
-        render(<StatusPill status={status} />)
-        expect(screen.getByTestId('status-pill')).toHaveStyle({
-          backgroundColor: alpha(t[token], 0.14),
-          borderTopColor: alpha(t[token], 0.4),
-        })
+      it(`resolves ${status} to the ${token} token`, () => {
+        expect(statusPillColor(status)).toBe(resolveColor(token))
       })
     })
   })
 
   it('exposes the resolved color via statusPillColor', () => {
-    expect(statusPillColor('stop')).toBe(t['status-error'])
+    expect(statusPillColor('stop')).toBe(resolveColor('status-error'))
   })
 
   it('renders a custom label override', () => {

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

@@ -1,11 +1,9 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { alpha } from '../../../utils/colors'
+import { View, type ViewProps } from 'react-native'
+import { resolveColor } from '../../../theme/resolve-color'
+import { Pill, type PillTone } from '../../ui/pill'
 import { StatusDot, type StatusDotVariant } from './StatusDot'
 
-const t = getSemanticColors('dark')
-
 /**
  * Auto-regulation verdict — the human-readable read-once summary of a set's
  * velocity-loss state.
@@ -29,6 +27,12 @@ const statusToken: Record<StatusPillStatus, 'status-success' | 'status-warning'
     stop: 'status-error',
   }
 
+const statusTone: Record<StatusPillStatus, PillTone> = {
+  productive: 'success',
+  threshold: 'warning',
+  stop: 'error',
+}
+
 const statusDotVariant: Record<StatusPillStatus, StatusDotVariant> = {
   productive: 'success',
   threshold: 'warning',
@@ -43,46 +47,31 @@ const defaultLabel: Record<StatusPillStatus, string> = {
 
 /** Resolved semantic color for a verdict status. */
 export function statusPillColor(status: StatusPillStatus): string {
-  return t[statusToken[status]]
+  return resolveColor(statusToken[status])
 }
 
 /**
- * Verdict pill: a glowing status dot + colored verdict text, in a tinted,
- * bordered capsule. Composes {@link StatusDot} for the dot so the glow/color
- * stays consistent with the atom. Tint and border are derived from the same
- * semantic token via `alpha()` — no per-status raw hex.
+ * Verdict pill: a glowing status dot + coloured verdict text in a tinted
+ * capsule. A `Pill` preset — tone, tint and border all come from the pill's
+ * semantic tone, so no per-status colour is computed here.
  */
-export function StatusPill({ status, label, className, style, ...props }: StatusPillProps) {
-  const color = statusPillColor(status)
-  const text = label ?? defaultLabel[status]
-
+export function StatusPill({ status, label, className, ...props }: StatusPillProps) {
   return (
-    <View
+    <Pill
       testID="status-pill"
-      className={className}
-      style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 7,
-          alignSelf: 'flex-start',
-          paddingVertical: 7,
-          paddingHorizontal: 13,
-          borderRadius: 9,
-          backgroundColor: alpha(color, 0.14),
-          borderWidth: 1,
-          borderColor: alpha(color, 0.4),
-        },
-        style,
-      ]}
+      tone={statusTone[status]}
+      size="lg"
+      rounded={false}
+      className={['gap-2 px-3 py-1.5 rounded-lg', className].filter(Boolean).join(' ')}
+      textClassName="font-sans font-extrabold"
+      leading={
+        <View accessibilityElementsHidden>
+          <StatusDot variant={statusDotVariant[status]} glow />
+        </View>
+      }
       {...props}
     >
-      <View accessibilityElementsHidden>
-        <StatusDot variant={statusDotVariant[status]} glow />
-      </View>
-      <Text testID="status-pill-label" style={{ fontSize: 13, fontWeight: '800', color }}>
-        {text}
-      </Text>
-    </View>
+      {label ?? defaultLabel[status]}
+    </Pill>
   )
 }

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

@@ -32,12 +32,18 @@ const decline: StrengthTrendDataPoint[] = [
 ]
 
 const meta: Meta<typeof StrengthTrendChart> = {
-  title: 'Workout/DataViz/StrengthTrendChart',
+  title: 'Custom/Workout/DataViz/StrengthTrendChart',
   component: StrengthTrendChart,
   tags: ['autodocs'],
   argTypes: {
-    width: { control: { type: 'range', min: 160, max: 480, step: 10 }, description: 'Plot width in px' },
-    height: { control: { type: 'range', min: 100, max: 220, step: 10 }, description: 'Plot height in px (120-160 for compact)' },
+    width: {
+      control: { type: 'range', min: 160, max: 480, step: 10 },
+      description: 'Plot width in px',
+    },
+    height: {
+      control: { type: 'range', min: 100, max: 220, step: 10 },
+      description: 'Plot height in px (120-160 for compact)',
+    },
     unit: { control: 'inline-radio', options: ['lbs', 'kg'], description: 'Display unit' },
     animateOnMount: { control: 'boolean', description: 'Left-to-right draw animation on mount' },
   },

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

@@ -44,9 +44,7 @@ describe('StrengthTrendChart', () => {
     it('renders the actual line as connecting segments', () => {
       render(<StrengthTrendChart {...baseProps} />)
       // Two segments connect three points.
-      expect(
-        screen.getAllByTestId('strength-trend-chart-actual-segment'),
-      ).toHaveLength(2)
+      expect(screen.getAllByTestId('strength-trend-chart-actual-segment')).toHaveLength(2)
     })
 
     it('renders subtle horizontal gridlines', () => {
@@ -73,26 +71,20 @@ describe('StrengthTrendChart', () => {
   describe('projection and meso boundaries', () => {
     it('renders dashed projection segments when projection is provided', () => {
       render(<StrengthTrendChart {...baseProps} projection={projection} />)
-      expect(
-        screen.getAllByTestId('strength-trend-chart-projection-segment'),
-      ).toHaveLength(1)
+      expect(screen.getAllByTestId('strength-trend-chart-projection-segment')).toHaveLength(1)
     })
 
     it('omits projection segments when none provided', () => {
       render(<StrengthTrendChart {...baseProps} />)
       expect(
-        screen.queryByTestId('strength-trend-chart-projection-segment'),
+        screen.queryByTestId('strength-trend-chart-projection-segment')
       ).not.toBeInTheDocument()
     })
 
     it('renders a boundary marker and axis label per meso boundary', () => {
       render(<StrengthTrendChart {...baseProps} mesoBoundaries={mesoBoundaries} />)
-      expect(
-        screen.getAllByTestId('strength-trend-chart-meso-boundary'),
-      ).toHaveLength(2)
-      expect(
-        screen.getAllByTestId('strength-trend-chart-axis-label'),
-      ).toHaveLength(2)
+      expect(screen.getAllByTestId('strength-trend-chart-meso-boundary')).toHaveLength(2)
+      expect(screen.getAllByTestId('strength-trend-chart-axis-label')).toHaveLength(2)
     })
   })
 
@@ -112,7 +104,7 @@ describe('StrengthTrendChart', () => {
             { date: '2026-03-03', e1rm: 248 },
             { date: '2026-03-17', e1rm: 235 },
           ]}
-        />,
+        />
       )
       const pill = screen.getByTestId('strength-trend-chart-trend-pill')
       expect(pill.textContent?.startsWith('-')).toBe(true)
@@ -128,7 +120,7 @@ describe('StrengthTrendChart', () => {
             { date: '2026-03-20', e1rm: 250 },
           ]}
           mesoBoundaries={[{ date: '2026-03-01', label: 'Peak' }]}
-        />,
+        />
       )
       // Only one point falls in the current meso, so the pill must not report
       // the whole-series jump (+25%) under the "this meso" label.
@@ -142,16 +134,12 @@ describe('StrengthTrendChart', () => {
       const onPointPress = vi.fn()
       render(<StrengthTrendChart {...baseProps} onPointPress={onPointPress} />)
       fireEvent.click(screen.getAllByTestId('strength-trend-chart-point')[1])
-      expect(onPointPress).toHaveBeenCalledWith(
-        expect.objectContaining({ e1rm: 228 }),
-      )
+      expect(onPointPress).toHaveBeenCalledWith(expect.objectContaining({ e1rm: 228 }))
     })
 
     it('shows a tooltip with value and unit after a point is tapped', () => {
       render(<StrengthTrendChart {...baseProps} />)
-      expect(
-        screen.queryByTestId('strength-trend-chart-tooltip'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('strength-trend-chart-tooltip')).not.toBeInTheDocument()
       fireEvent.click(screen.getAllByTestId('strength-trend-chart-point')[2])
       const tooltip = screen.getByTestId('strength-trend-chart-tooltip')
       expect(tooltip).toHaveTextContent('244 lbs')
@@ -161,22 +149,14 @@ describe('StrengthTrendChart', () => {
   describe('empty state', () => {
     it('renders an empty placeholder when there is no data', () => {
       render(<StrengthTrendChart {...baseProps} data={[]} />)
-      expect(
-        screen.getByTestId('strength-trend-chart-empty'),
-      ).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('strength-trend-chart-canvas'),
-      ).not.toBeInTheDocument()
+      expect(screen.getByTestId('strength-trend-chart-empty')).toBeInTheDocument()
+      expect(screen.queryByTestId('strength-trend-chart-canvas')).not.toBeInTheDocument()
     })
 
     it('shows the placeholder when data is empty even if a projection exists', () => {
       render(<StrengthTrendChart {...baseProps} data={[]} projection={projection} />)
-      expect(
-        screen.getByTestId('strength-trend-chart-empty'),
-      ).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('strength-trend-chart-canvas'),
-      ).not.toBeInTheDocument()
+      expect(screen.getByTestId('strength-trend-chart-empty')).toBeInTheDocument()
+      expect(screen.queryByTestId('strength-trend-chart-canvas')).not.toBeInTheDocument()
     })
   })
 
@@ -191,9 +171,7 @@ describe('StrengthTrendChart', () => {
 
     it('labels the empty state accessibly', () => {
       render(<StrengthTrendChart {...baseProps} data={[]} />)
-      expect(
-        screen.getByLabelText('Strength trend chart, no data'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Strength trend chart, no data')).toBeInTheDocument()
     })
 
     it('has no accessibility violations', async () => {
@@ -209,7 +187,7 @@ describe('StrengthTrendChart', () => {
           mesoBoundaries={mesoBoundaries}
           onPointPress={vi.fn()}
           unit="kg"
-        />,
+        />
       )
       expect(await axe(container)).toHaveNoViolations()
     })

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

@@ -94,7 +94,7 @@ function buildGeometry(
   projection: StrengthTrendDataPoint[],
   boundaries: StrengthTrendChartMesoBoundary[],
   width: number,
-  height: number,
+  height: number
 ): Geometry {
   const values = [...data, ...projection].map((p) => p.e1rm)
   // Empty state keys off actual data only: a projection with no measured
@@ -128,10 +128,8 @@ function buildGeometry(
   const domainMax = yMax + padV
 
   const innerW = Math.max(1, width - PLOT_LEFT)
-  const toX = (time: number) =>
-    PLOT_LEFT + ((time - tMin) / (tMax - tMin)) * innerW
-  const toY = (value: number) =>
-    height - ((value - domainMin) / (domainMax - domainMin)) * height
+  const toX = (time: number) => PLOT_LEFT + ((time - tMin) / (tMax - tMin)) * innerW
+  const toY = (value: number) => height - ((value - domainMin) / (domainMax - domainMin)) * height
 
   const project = (points: StrengthTrendDataPoint[]): Coord[] =>
     points.map((point, index) => ({
@@ -141,9 +139,7 @@ function buildGeometry(
       index,
     }))
 
-  const tickValues = Array.from(
-    new Set([yMax, (yMin + yMax) / 2, yMin].map((v) => Math.round(v))),
-  )
+  const tickValues = Array.from(new Set([yMax, (yMin + yMax) / 2, yMin].map((v) => Math.round(v))))
   const gridLines = tickValues.map((v) => ({ y: toY(v), label: formatValue(v) }))
 
   return {
@@ -162,7 +158,7 @@ function buildGeometry(
 
 function computeTrend(
   data: StrengthTrendDataPoint[],
-  boundaries: StrengthTrendChartMesoBoundary[],
+  boundaries: StrengthTrendChartMesoBoundary[]
 ): { percent: number; positive: boolean } {
   if (data.length < 2) return { percent: 0, positive: true }
   let series = data
@@ -267,12 +263,9 @@ export function StrengthTrendChart({
 }: StrengthTrendChartProps) {
   const geometry = useMemo(
     () => buildGeometry(data, projection, mesoBoundaries, width, height),
-    [data, projection, mesoBoundaries, width, height],
-  )
-  const trend = useMemo(
-    () => computeTrend(data, mesoBoundaries),
-    [data, mesoBoundaries],
+    [data, projection, mesoBoundaries, width, height]
   )
+  const trend = useMemo(() => computeTrend(data, mesoBoundaries), [data, mesoBoundaries])
 
   const [reveal] = useState(() => new Animated.Value(animateOnMount ? 0 : 1))
   const [selected, setSelected] = useState<number | null>(null)
@@ -314,7 +307,10 @@ export function StrengthTrendChart({
             justifyContent: 'center',
           }}
         >
-          <Text className="text-text-tertiary" style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}>
+          <Text
+            className="text-text-tertiary"
+            style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
+          >
             No strength data yet
           </Text>
         </View>
@@ -327,16 +323,10 @@ export function StrengthTrendChart({
     outputRange: [0, width],
   })
 
-  const selectedCoord =
-    selected != null ? geometry.actual[selected] : undefined
+  const selectedCoord = selected != null ? geometry.actual[selected] : undefined
 
   return (
-    <View
-      style={{ width }}
-      className={cn(className)}
-      testID="strength-trend-chart"
-      {...props}
-    >
+    <View style={{ width }} className={cn(className)} testID="strength-trend-chart" {...props}>
       <View style={{ width, height, position: 'relative' }}>
         {/* Labelled, non-interactive chart canvas (grid + lines + markers). */}
         <View
@@ -438,7 +428,7 @@ export function StrengthTrendChart({
               >
                 ★
               </Text>
-            ) : null,
+            ) : null
           )}
         </View>
 
@@ -482,7 +472,7 @@ export function StrengthTrendChart({
               position: 'absolute',
               left: Math.max(
                 0,
-                Math.min(width - TOOLTIP_WIDTH, selectedCoord.x - TOOLTIP_WIDTH / 2),
+                Math.min(width - TOOLTIP_WIDTH, selectedCoord.x - TOOLTIP_WIDTH / 2)
               ),
               top: Math.max(0, selectedCoord.y - 52),
               maxWidth: TOOLTIP_WIDTH,
@@ -529,7 +519,7 @@ export function StrengthTrendChart({
                     ? '+'
                     : '-'
                 }${Math.abs(
-                  selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm,
+                  selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm
                 ).toFixed(1)} ${unit}`}
               </Text>
             )}
@@ -598,8 +588,13 @@ export function StrengthTrendChart({
         testID="strength-trend-chart-legend"
       >
         <View className="flex-row items-center" style={{ gap: 5 }}>
-          <View style={{ width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY }} />
-          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
+          <View
+            style={{ width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY }}
+          />
+          <Text
+            className="text-text-secondary"
+            style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}
+          >
             Actual
           </Text>
         </View>
@@ -613,13 +608,19 @@ export function StrengthTrendChart({
               borderTopColor: PROJECTION_LINE_COLOR,
             }}
           />
-          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
+          <Text
+            className="text-text-secondary"
+            style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}
+          >
             Projected
           </Text>
         </View>
         <View className="flex-row items-center" style={{ gap: 5 }}>
           <Text style={{ fontSize: 12, color: STATUS_WARNING }}>★</Text>
-          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
+          <Text
+            className="text-text-secondary"
+            style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}
+          >
             PR
           </Text>
         </View>