@titan-design/react-ui 0.10.0 → 0.12.0

package/src/components/custom/Fatigue/tempo-pacing.test.ts

@@ -0,0 +1,176 @@
+import { describe, it, expect } from 'vitest'
+import {
+  phaseFillFraction,
+  pacingTone,
+  phaseTargetsMs,
+  prescribedSegments,
+  ON_TARGET_MS,
+} from './tempo-pacing'
+import {
+  PACING_TONE,
+  PACING_TONE_MIN_CONTRAST,
+  PHASE_AXIS_COLOR,
+  PHASE_AXIS_BASE_COLOR,
+} from './fatigue-tokens'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+import type { SamplePhase } from './fatigue-model'
+
+const t = getSemanticColors('dark')
+const TEMPO: [number, number, number, number] = [2.6, 0.4, 0.95, 0.28]
+
+/** WCAG 2.1 relative luminance / contrast ratio. */
+function contrastRatio(a: string, b: string): number {
+  const lum = (hex: string): number => {
+    const h = hex.replace('#', '')
+    const chan = [0, 2, 4].map((i) => {
+      const c = parseInt(h.slice(i, i + 2), 16) / 255
+      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+    })
+    return 0.2126 * chan[0] + 0.7152 * chan[1] + 0.0722 * chan[2]
+  }
+  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x)
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+describe('phaseFillFraction', () => {
+  it('is the elapsed share of the target', () => {
+    expect(phaseFillFraction(500, 1000)).toBeCloseTo(0.5, 5)
+  })
+
+  it('CAPS at full so an over-long phase does not overflow its run', () => {
+    expect(phaseFillFraction(4000, 1000)).toBe(1)
+  })
+
+  it('reads complete when there is no target to pace against', () => {
+    expect(phaseFillFraction(500, null)).toBe(1)
+    expect(phaseFillFraction(500, 0)).toBe(1)
+  })
+})
+
+describe('pacingTone', () => {
+  it('reads AHEAD while still short of target', () => {
+    expect(pacingTone(500, 2000)).toBe(PACING_TONE.ahead)
+  })
+
+  it('reads ON PACE within the on-target window either side', () => {
+    expect(pacingTone(2000, 2000)).toBe(PACING_TONE.onPace)
+    expect(pacingTone(2000 - ON_TARGET_MS, 2000)).toBe(PACING_TONE.onPace)
+    expect(pacingTone(2000 + ON_TARGET_MS, 2000)).toBe(PACING_TONE.onPace)
+  })
+
+  it('reads OVER once past the window', () => {
+    expect(pacingTone(2000 + ON_TARGET_MS + 1, 2000)).toBe(PACING_TONE.over)
+  })
+
+  it('stays neutral with no target', () => {
+    expect(pacingTone(500, null)).toBe(t['text-primary'])
+  })
+})
+
+describe('pacing tone legibility', () => {
+  // Only ECC and CON are labelled, so only those runs can put a colour behind a pacing
+  // tone — each over its fill and its muted base. `GhostBand.test.tsx` pins the fact that
+  // hold and idle stay unlabelled, which is what keeps this narrower set honest.
+  const LABELLED: SamplePhase[] = ['eccentric', 'concentric']
+  const backgrounds = LABELLED.flatMap((p) => [
+    [`${p} fill`, PHASE_AXIS_COLOR[p]] as const,
+    [`${p} base`, PHASE_AXIS_BASE_COLOR[p]] as const,
+  ])
+
+  for (const [toneName, tone] of Object.entries(PACING_TONE)) {
+    it(`keeps '${toneName}' legible on every background a label can sit on`, () => {
+      for (const [bgName, bg] of backgrounds) {
+        const ratio = contrastRatio(tone, bg)
+        expect(
+          ratio,
+          `${toneName} (${tone}) on ${bgName} (${bg}) = ${ratio.toFixed(2)}:1`
+        ).toBeGreaterThanOrEqual(PACING_TONE_MIN_CONTRAST)
+      }
+    })
+  }
+
+  it('rejects the status-error token the band used to borrow', () => {
+    // Proves the guard has teeth rather than passing by luck: red[600] on the concentric
+    // fill is 2.18:1, which is what made the label unreadable in the first place.
+    expect(contrastRatio(t['status-error'], PHASE_AXIS_COLOR.concentric)).toBeLessThan(
+      PACING_TONE_MIN_CONTRAST
+    )
+  })
+
+  it('sits at the DEEPEST ramp step that still clears the floor', () => {
+    // Guards the other direction — the tones should be as saturated as legibility allows,
+    // so a "make it lighter" edit has to justify itself. Derived from the ramp rather than
+    // hardcoded, so it catches a change in EITHER direction.
+    const STEPS = [100, 200, 300, 400, 500, 600, 700, 800, 900] as const
+    const worstOf = (c: string): number =>
+      Math.min(...backgrounds.map(([, bg]) => contrastRatio(c, bg)))
+
+    const cases = [
+      ['ahead', PACING_TONE.ahead, primitiveRamps.amber],
+      ['onPace', PACING_TONE.onPace, primitiveRamps.green],
+      ['over', PACING_TONE.over, primitiveRamps.red],
+    ] as const
+
+    for (const [name, configured, ramp] of cases) {
+      const deepestPassing = STEPS.filter((s) => worstOf(ramp[s]) >= PACING_TONE_MIN_CONTRAST).pop()
+      expect(
+        configured,
+        `${name}: deepest step clearing ${PACING_TONE_MIN_CONTRAST}:1 is ${deepestPassing}`
+      ).toBe(ramp[deepestPassing!])
+    }
+  })
+})
+
+describe('prescribedSegments', () => {
+  it('lays the prescribed rep out end to end at its target durations', () => {
+    expect(prescribedSegments(TEMPO)).toEqual([
+      { phase: 'eccentric', startMs: 0, endMs: 2600 },
+      { phase: 'hold', startMs: 2600, endMs: 3000 },
+      { phase: 'concentric', startMs: 3000, endMs: 3950 },
+      { phase: 'hold', startMs: 3950, endMs: 4230 },
+    ])
+  })
+
+  it('drops zero-length phases rather than drawing slivers', () => {
+    const noHolds = prescribedSegments([3, 0, 2, 0])
+    expect(noHolds.map((s) => s.phase)).toEqual(['eccentric', 'concentric'])
+    // The concentric still starts where the eccentric ended — no gap from the dropped hold.
+    expect(noHolds[1].startMs).toBe(noHolds[0].endMs)
+  })
+
+  it('has nothing to describe without a prescription', () => {
+    expect(prescribedSegments(null)).toEqual([])
+  })
+
+  it('round-trips against phaseTargetsMs — every run matches its own target', () => {
+    const segs = prescribedSegments(TEMPO)
+    const targets = phaseTargetsMs(
+      segs.map((s) => s.phase),
+      TEMPO
+    )
+    segs.forEach((s, i) => expect(s.endMs - s.startMs).toBe(targets[i]))
+  })
+})
+
+describe('phaseTargetsMs', () => {
+  it('maps a hold to BOTTOM before the concentric and TOP after it', () => {
+    const phases: SamplePhase[] = ['eccentric', 'hold', 'concentric', 'hold']
+    expect(phaseTargetsMs(phases, TEMPO)).toEqual([2600, 400, 950, 280])
+  })
+
+  it('gives idle no target — dead time never paces', () => {
+    const phases: SamplePhase[] = ['eccentric', 'idle', 'concentric']
+    expect(phaseTargetsMs(phases, TEMPO)[1]).toBeNull()
+  })
+
+  it('targets nothing at all when no tempo is prescribed', () => {
+    const phases: SamplePhase[] = ['eccentric', 'hold', 'concentric']
+    expect(phaseTargetsMs(phases, null)).toEqual([null, null, null])
+  })
+
+  it('treats a rep that opens on the concentric as having a TOP hold after it', () => {
+    const phases: SamplePhase[] = ['concentric', 'hold']
+    expect(phaseTargetsMs(phases, TEMPO)).toEqual([950, 280])
+  })
+})

package/src/components/custom/Fatigue/tempo-pacing.ts

@@ -0,0 +1,112 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+/**
+ * Tempo PACING — how far through its prescribed duration a phase has run, and the
+ * semantic tone that says whether the lifter is ahead, on pace, or over.
+ *
+ * The rule this encodes (borrowed from `TempoDisplay`, which established it): the phase
+ * HUE carries phase identity and is deliberately non-semantic, so the pacing tone is free
+ * to use success/warning/error without the two colliding. Anything that paints a phase
+ * should take its identity colour from `PHASE_AXIS_COLOR` and its pacing colour from here.
+ *
+ * ⚠️ `TempoDisplay` currently carries its own private copy of this logic
+ * (`getTempoFillPct` / `activeNumberTone`). The two agree today and this module is the
+ * canonical one; migrating TempoDisplay onto it is deliberately left out of the change
+ * that introduced this file, so its rendering is untouched.
+ */
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { PACING_TONE } from './fatigue-tokens'
+import type { SamplePhase, PhaseSegment } from './fatigue-model'
+
+const t = getSemanticColors('dark')
+
+/** ± this window (ms) around the target still counts as on pace. Matches TempoDisplay. */
+export const ON_TARGET_MS = 100
+
+/** The canonical tempo tuple order: `[ecc, pauseBottom, con, pauseTop]`, seconds. */
+export type TempoTuple = [number, number, number, number]
+
+/**
+ * How far a phase has run toward its prescribed duration, 0..1, CAPPED at 1.
+ *
+ * The cap is what makes an over-long phase read correctly: the fill stops at full and the
+ * TONE takes over to say "you are past target". Without a target there is nothing to pace
+ * against, so the phase reads complete rather than perpetually empty.
+ */
+export function phaseFillFraction(elapsedMs: number, targetMs: number | null): number {
+  if (targetMs == null || targetMs <= 0) return 1
+  return Math.min(1, Math.max(0, elapsedMs / targetMs))
+}
+
+/**
+ * Pacing tone for a phase's LABEL: still short of target → ahead; within ±100 ms → on pace;
+ * past target → over. Keyed on time REMAINING, so it reads the same whether the phase is in
+ * flight or finished.
+ *
+ * Takes {@link PACING_TONE} rather than the `status-*` semantic tokens — the label sits on a
+ * saturated phase fill, where `status-error` measures 1.88:1. See the token's note.
+ */
+export function pacingTone(elapsedMs: number, targetMs: number | null): string {
+  if (targetMs == null || targetMs <= 0) return t['text-primary']
+  const remainingMs = targetMs - elapsedMs
+  if (remainingMs > ON_TARGET_MS) return PACING_TONE.ahead
+  if (remainingMs >= -ON_TARGET_MS) return PACING_TONE.onPace
+  return PACING_TONE.over
+}
+
+/**
+ * The rep the prescription DESCRIBES, as phase runs — ecc, bottom hold, con, top hold, laid
+ * end to end at their target durations from t=0.
+ *
+ * This is the only place a band's geometry may come from the prescription rather than from
+ * actual samples, and it exists for exactly one case: nothing has been performed yet, so
+ * there is no actual time to lay out. Zero-length phases (a tempo with no holds) are
+ * dropped rather than drawn as slivers.
+ */
+export function prescribedSegments(tempo: TempoTuple | null): PhaseSegment[] {
+  if (tempo == null) return []
+  const [ecc, pauseBottom, con, pauseTop] = tempo
+  const order: Array<[SamplePhase, number]> = [
+    ['eccentric', ecc],
+    ['hold', pauseBottom],
+    ['concentric', con],
+    ['hold', pauseTop],
+  ]
+  const out: PhaseSegment[] = []
+  let t = 0
+  for (const [phase, seconds] of order) {
+    const ms = seconds * 1000
+    if (ms > 0) out.push({ phase, startMs: t, endMs: t + ms })
+    t += ms
+  }
+  return out
+}
+
+/**
+ * Target duration (ms) for each phase run of a rep, in stream order.
+ *
+ * A `hold` maps to `pauseBottom` or `pauseTop` by POSITION, not by name: the tuple
+ * distinguishes the two but the sample phase does not, so the first hold of a rep is the
+ * bottom and a hold after the concentric is the top. Phases with no prescribed duration
+ * (`idle` — undirected dead time) get `null` and never pace.
+ */
+export function phaseTargetsMs(
+  phases: readonly SamplePhase[],
+  tempo: TempoTuple | null
+): Array<number | null> {
+  if (tempo == null) return phases.map(() => null)
+  const [eccS, pauseBottomS, conS, pauseTopS] = tempo
+  let seenConcentric = false
+  return phases.map((phase) => {
+    switch (phase) {
+      case 'eccentric':
+        return eccS * 1000
+      case 'concentric':
+        seenConcentric = true
+        return conS * 1000
+      case 'hold':
+        return (seenConcentric ? pauseTopS : pauseBottomS) * 1000
+      default:
+        return null
+    }
+  })
+}

package/src/components/custom/Sidebar/Sidebar.tsx

@@ -64,7 +64,7 @@ export function Sidebar({
       <View
         style={{ width: currentWidth }}
         className={cn(
-          'h-full flex-col bg-surface-base border-r border-border transition-all duration-200',
+          'h-full flex-col bg-surface-base border-r border-hairline transition-all duration-200',
           className
         )}
         {...props}
@@ -85,7 +85,7 @@ export interface SidebarHeaderProps {
  */
 export function SidebarHeader({ children, className }: SidebarHeaderProps) {
   return (
-    <View className={cn('px-4 py-4 border-b border-border-subtle', className)}>
+    <View className={cn('px-4 py-4 border-b border-hairline-subtle', className)}>
       {children}
     </View>
   )
@@ -120,7 +120,7 @@ export interface SidebarFooterProps {
  */
 export function SidebarFooter({ children, className }: SidebarFooterProps) {
   return (
-    <View className={cn('px-2 py-4 border-t border-border-subtle', className)}>
+    <View className={cn('px-2 py-4 border-t border-hairline-subtle', className)}>
       {children}
     </View>
   )
@@ -252,6 +252,6 @@ export interface SidebarDividerProps {
  */
 export function SidebarDivider({ className }: SidebarDividerProps) {
   return (
-    <View className={cn('h-px mx-4 my-2 bg-border-subtle', className)} />
+    <View className={cn('h-px mx-4 my-2 bg-hairline-subtle', className)} />
   )
 }

package/src/components/custom/Table/Table.tsx

@@ -590,7 +590,7 @@ export function TableSelectAllCell({ className }: TableSelectAllCellProps) {
             ? 'bg-brand-primary border-brand-primary'
             : someSelected
             ? 'bg-brand-primary-subtle border-brand-primary'
-            : 'border-border-strong bg-transparent'
+            : 'border-hairline-strong bg-transparent'
         )}
       >
         {(allSelected || someSelected) && (
@@ -629,7 +629,7 @@ export function TableSelectCell({ rowId, className }: TableSelectCellProps) {
           'w-5 h-5 rounded border-2 items-center justify-center',
           isSelected
             ? 'bg-brand-primary border-brand-primary'
-            : 'border-border-strong bg-transparent web:hover:border-brand-primary'
+            : 'border-hairline-strong bg-transparent web:hover:border-brand-primary'
         )}
       >
         {isSelected && (

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

@@ -273,7 +273,7 @@ function WorkoutHeader({
         </View>
       </View>
       <View
-        className="bg-border"
+        className="bg-hairline"
         style={{ height: 4, borderRadius: 2 }}
         testID="active-workout-page-progress-track"
       >
@@ -305,7 +305,7 @@ function ExerciseList({ groups, focusedId, onToggle }: ExerciseListProps) {
           return (
             <View
               key={group.exercise.id}
-              className="bg-surface-elevated border-border"
+              className="bg-surface-elevated border-hairline"
               style={{
                 borderWidth: 1,
                 borderRadius: 12,
@@ -399,7 +399,7 @@ export function ActiveWorkoutPage({
 
       {(showRest || showInput) && (
         <View
-          style={{ borderTopWidth: 1, borderTopColor: resolveColor('border-default') }}
+          style={{ borderTopWidth: 1, borderTopColor: resolveColor('hairline-default') }}
           testID="active-workout-page-bottom-bar"
         >
           {showRest && rest != null ? (

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

@@ -3,6 +3,11 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { Text, View } from 'react-native'
 import { BaseBadge } from './BaseBadge'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+// Read from the token, not pinned: these used to be hand-copied hexes and
+// silently desynced when borders became alpha hairlines (TD-07.16).
+const T = getSemanticColors('dark')
 
 describe('BaseBadge', () => {
   it('renders children', () => {
@@ -12,7 +17,7 @@ describe('BaseBadge', () => {
 
   it('defaults to the plain variant border color', () => {
     render(<BaseBadge testID="bb"><Text>x</Text></BaseBadge>)
-    expect(screen.getByTestId('bb')).toHaveStyle({ borderTopColor: '#1F1F1F' })
+    expect(screen.getByTestId('bb')).toHaveStyle({ borderTopColor: T['hairline-default'] })
   })
 
   it('applies the pr variant border color', () => {

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

@@ -30,7 +30,7 @@ export const baseBadgeSizeConfig: Record<
 }
 
 const variantColors: Record<BaseBadgeVariant, { backgroundColor: string; borderColor: string }> = {
-  plain: { backgroundColor: t['surface-raised'], borderColor: '#1F1F1F' },
+  plain: { backgroundColor: t['surface-raised'], borderColor: t['hairline-default'] },
   pr: {
     backgroundColor: 'rgba(255, 121, 0, 0.12)',
     borderColor: 'rgba(255, 121, 0, 0.3)',

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

@@ -278,7 +278,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
               borderRadius: 9999,
               backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
               borderWidth: 1,
-              borderColor: active ? BRAND_PRIMARY : resolveColor('border-strong'),
+              borderColor: active ? BRAND_PRIMARY : resolveColor('hairline-strong'),
             }}
             testID={`body-map-toggle-${side}`}
           >
@@ -324,7 +324,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? BRAND_PRIMARY : resolveColor('border-default'),
+        borderColor: highlighted ? BRAND_PRIMARY : resolveColor('hairline-default'),
       }}
       testID={`body-map-muscle-${entry.key}`}
     >

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

@@ -220,7 +220,7 @@ export function BodyMapDetailPanel({
           testID="body-map-detail-panel-handle"
         >
           <View
-            className="bg-border-strong"
+            className="bg-hairline-strong"
             style={{ width: 40, height: 4, borderRadius: 2 }}
             accessibilityElementsHidden
           />
@@ -380,7 +380,7 @@ export function BodyMapDetailPanel({
               {contributingExercises!.map((exercise, index) => (
                 <View
                   key={`${exercise.name}-${index}`}
-                  className="flex-row items-center justify-between bg-surface-raised border-border"
+                  className="flex-row items-center justify-between bg-surface-raised border-hairline"
                   style={{
                     gap: 10,
                     paddingVertical: 8,

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

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { DeviationBar } from './DeviationBar'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 describe('DeviationBar', () => {
   it('renders the bar and dot', () => {
@@ -62,7 +63,7 @@ describe('DeviationBar', () => {
     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: '#F3F4F6' })
+    expect(dot).toHaveStyle({ borderTopWidth: '1.5px', borderTopColor: greyRamp[50] })
     expect(dot).toHaveStyle({ boxShadow: '0 0 4px rgba(0,0,0,0.5)' })
   })
 

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps, type ViewStyle } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const t = getSemanticColors('dark')
 
@@ -13,7 +14,7 @@ export interface DeviationBarProps extends ViewProps {
 function getDotColor(deviation: number): string {
   const abs = Math.abs(deviation)
   if (deviation < -0.3) return t['status-success']
-  if (abs <= 0.3) return '#6B7280'
+  if (abs <= 0.3) return greyRamp[500]
   if (abs <= 0.7) return t['status-warning']
   return t['status-error']
 }
@@ -68,7 +69,7 @@ export function DeviationBar({
           height: dotSize,
           borderRadius: 9999,
           borderWidth: 1.5,
-          borderColor: '#F3F4F6',
+          borderColor: greyRamp[50],
           boxShadow: '0 0 4px rgba(0,0,0,0.5)',
           backgroundColor: getDotColor(clamped),
           left: Math.max(0, Math.min(dotPosition - dotSize / 2, resolvedWidth - dotSize)),