@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -48,8 +48,11 @@ const weeks: WeekRowProps[] = [
 ]
 
 const meta: Meta<typeof MesoCard> = {
-  title: 'Workout/MesoCard',
+  title: 'Custom/Workout/MesoCard',
   component: MesoCard,
+  parameters: {
+    docs: { description: { component: 'Composes **Card** · **Badge** · **WeekRow**.' } },
+  },
   tags: ['autodocs'],
   argTypes: {
     goal: {

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

@@ -39,15 +39,9 @@ describe('MesoCard', () => {
     it('renders name, goal badge, and sub-header', () => {
       render(<MesoCard {...baseProps} />)
       expect(screen.getByTestId('meso-card')).toBeInTheDocument()
-      expect(screen.getByTestId('meso-card-name')).toHaveTextContent(
-        'Accumulation',
-      )
-      expect(screen.getByTestId('meso-card-goal-badge')).toHaveTextContent(
-        'Hypertrophy',
-      )
-      expect(screen.getByTestId('meso-card-subheader')).toHaveTextContent(
-        'Upper/Lower · Weeks 1-4',
-      )
+      expect(screen.getByTestId('meso-card-name')).toHaveTextContent('Accumulation')
+      expect(screen.getByTestId('meso-card-goal-badge')).toHaveTextContent('Hypertrophy')
+      expect(screen.getByTestId('meso-card-subheader')).toHaveTextContent('Upper/Lower · Weeks 1-4')
     })
 
     it('renders the 3px gradient top accent', () => {
@@ -80,10 +74,7 @@ describe('MesoCard', () => {
     it('reflects expanded state via aria-expanded', () => {
       const onToggle = vi.fn()
       render(<MesoCard {...baseProps} onToggle={onToggle} expanded />)
-      expect(screen.getByTestId('meso-card-toggle')).toHaveAttribute(
-        'aria-expanded',
-        'true',
-      )
+      expect(screen.getByTestId('meso-card-toggle')).toHaveAttribute('aria-expanded', 'true')
     })
 
     it('renders a static container when not expandable', () => {
@@ -108,7 +99,7 @@ describe('MesoCard', () => {
             { group: 'back', percentage: 50 },
             { group: 'legs', percentage: 30 },
           ]}
-        />,
+        />
       )
       expect(screen.getByTestId('meso-card-heatmap')).toBeInTheDocument()
       expect(screen.getAllByTestId('meso-card-heatmap-cell')).toHaveLength(3)
@@ -132,9 +123,7 @@ describe('MesoCard', () => {
   describe('accessibility', () => {
     it('has an accessible label describing the meso', () => {
       render(<MesoCard {...baseProps} />)
-      expect(
-        screen.getByLabelText('Accumulation, Hypertrophy, Weeks 1-4'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Accumulation, Hypertrophy, Weeks 1-4')).toBeInTheDocument()
     })
 
     it('exposes the label on the button when expandable', () => {
@@ -161,7 +150,7 @@ describe('MesoCard', () => {
             { group: 'chest', percentage: 80 },
             { group: 'back', percentage: 50 },
           ]}
-        />,
+        />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -9,6 +9,8 @@ import {
   MESO_ACCENT_GRADIENT_DARK,
   MESO_ACCENT_GRADIENT_LIGHT,
 } from '../../../theme/extracted-colors-dataviz'
+import { getGlowShadow } from '../../../theme/elevation'
+import { alpha } from '../../../utils/colors'
 
 const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
 
@@ -60,7 +62,7 @@ export interface MesoCardProps extends ViewProps {
 function heatmapColor(percentage: number): string {
   const clamped = Math.max(0, Math.min(100, percentage))
   const opacity = 0.12 + (clamped / 100) * 0.78
-  return `rgba(255,121,0,${opacity.toFixed(3)})`
+  return alpha(BRAND_PRIMARY, opacity)
 }
 
 /**
@@ -119,7 +121,10 @@ export function MesoCard({
   })
 
   const header = (
-    <View style={{ paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }} testID="meso-card-body">
+    <View
+      style={{ paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }}
+      testID="meso-card-body"
+    >
       <View className="flex-row items-center" style={{ gap: 8 }} testID="meso-card-header">
         <Text
           className="text-text-primary"
@@ -174,7 +179,10 @@ export function MesoCard({
   )
 
   return (
-    <Animated.View style={highlighted ? { transform: [{ scale: 1.0 }] } : undefined} testID="meso-card-wrapper">
+    <Animated.View
+      style={highlighted ? { transform: [{ scale: 1.0 }] } : undefined}
+      testID="meso-card-wrapper"
+    >
       <Card
         variant="outline"
         elevation={2}
@@ -182,9 +190,8 @@ export function MesoCard({
         className={className}
         style={[
           { borderColor: borderColor as unknown as string },
-          highlighted
-            ? { boxShadow: '0 0 12px 2px rgba(255,121,0,0.25)' }
-            : undefined,
+          // Highlight is emphasis, not depth: a brand glow through the shared builder.
+          highlighted ? getGlowShadow(BRAND_PRIMARY, 'subtle') : undefined,
         ]}
         testID="meso-card"
         {...props}
@@ -211,10 +218,7 @@ export function MesoCard({
             {header}
           </Pressable>
         ) : (
-          <View
-            accessibilityLabel={`${name}, ${goal}, ${weekRange}`}
-            testID="meso-card-static"
-          >
+          <View accessibilityLabel={`${name}, ${goal}, ${weekRange}`} testID="meso-card-static">
             {header}
           </View>
         )}

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

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

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

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { MesoProgressBar, type Meso } from './MesoProgressBar'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const mesos: Meso[] = [
   { id: 'm1', name: 'Accumulation', weekCount: 4, status: 'completed' },
@@ -37,26 +38,34 @@ describe('MesoProgressBar', () => {
   })
 
   describe('status colors', () => {
-    it('applies completed color at 0.3 alpha', () => {
+    it('tracks the completed segment on the success wash', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.getByTestId('meso-segment-inner-m1')).toHaveStyle({
-        backgroundColor: 'rgba(46,213,115,0.3)',
+        backgroundColor: resolveColor('status-success-muted'),
       })
     })
 
-    it('applies current color at 0.5 alpha', () => {
+    it('tracks the current segment on the brand wash', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.getByTestId('meso-segment-inner-m2')).toHaveStyle({
-        backgroundColor: 'rgba(255,121,0,0.5)',
+        backgroundColor: resolveColor('brand-primary-strong'),
       })
     })
 
-    it('applies upcoming color', () => {
+    it('tracks the upcoming segment on the neutral hairline wash', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.getByTestId('meso-segment-inner-m3')).toHaveStyle({
-        backgroundColor: 'rgba(255,255,255,0.06)',
+        backgroundColor: resolveColor('hairline-subtle'),
       })
     })
+
+    it('gives each status a distinct track, so the three never collapse', () => {
+      render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
+      const tracks = ['m1', 'm2', 'm3'].map(
+        (id) => screen.getByTestId(`meso-segment-inner-${id}`).style.backgroundColor
+      )
+      expect(new Set(tracks).size).toBe(3)
+    })
   })
 
   describe('current week progress fill', () => {
@@ -74,9 +83,7 @@ describe('MesoProgressBar', () => {
     })
 
     it('does not render a fill when current meso has no currentWeek', () => {
-      const noProgress: Meso[] = [
-        { id: 'c', name: 'Current', weekCount: 3, status: 'current' },
-      ]
+      const noProgress: Meso[] = [{ id: 'c', name: 'Current', weekCount: 3, status: 'current' }]
       render(<MesoProgressBar mesos={noProgress} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.queryByTestId('meso-segment-fill-c')).not.toBeInTheDocument()
     })
@@ -95,7 +102,7 @@ describe('MesoProgressBar', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId="m2" onMesoPress={vi.fn()} />)
       const style = screen.getByTestId('meso-segment-inner-m2').getAttribute('style') ?? ''
       expect(style).toContain('border-top-width: 2px')
-      expect(style).toContain('border-top-color: rgb(255, 121, 0)')
+      expect(style).toContain(`border-top-color: ${resolveColor('brand-primary')}`)
     })
 
     it('does not apply a border to inactive segments', () => {
@@ -132,7 +139,7 @@ describe('MesoProgressBar', () => {
 
     it('has no accessibility violations', async () => {
       const { container } = render(
-        <MesoProgressBar mesos={mesos} activeMesoId="m2" onMesoPress={vi.fn()} />,
+        <MesoProgressBar mesos={mesos} activeMesoId="m2" onMesoPress={vi.fn()} />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -1,9 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
 import { View, Pressable, Animated, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+import { resolveColor } from '../../../theme/resolve-color'
 
 export type MesoStatus = 'completed' | 'current' | 'upcoming'
 
@@ -26,10 +24,15 @@ export interface MesoProgressBarProps extends ViewProps {
   className?: string
 }
 
-const segmentBgColors: Record<MesoStatus, string> = {
-  completed: 'rgba(46,213,115,0.3)',
-  current: 'rgba(255,121,0,0.5)',
-  upcoming: 'rgba(255,255,255,0.06)',
+// The segment track is a status wash, and the three states must stay a legible
+// ramp rather than one weight in three hues.
+const segmentTrackToken: Record<
+  MesoStatus,
+  'status-success-muted' | 'brand-primary-strong' | 'hairline-subtle'
+> = {
+  completed: 'status-success-muted',
+  current: 'brand-primary-strong',
+  upcoming: 'hairline-subtle',
 }
 
 function clampProgress(currentWeek: number | undefined, weekCount: number): number {
@@ -46,6 +49,7 @@ interface SegmentProps {
 
 function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
   const [pressScale] = useState(() => new Animated.Value(1))
+  const brandPrimary = resolveColor('brand-primary')
 
   const handlePressIn = () => {
     Animated.timing(pressScale, {
@@ -63,9 +67,7 @@ function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
     }).start()
   }
 
-  const progress = meso.status === 'current'
-    ? clampProgress(meso.currentWeek, meso.weekCount)
-    : 0
+  const progress = meso.status === 'current' ? clampProgress(meso.currentWeek, meso.weekCount) : 0
 
   // weekCount drives the segment's flex width; guard 0 / negative so flex stays
   // a valid positive value and the segment never collapses out of the layout.
@@ -87,13 +89,13 @@ function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
             height: 8,
             borderRadius: 4,
             overflow: 'hidden',
-            backgroundColor: segmentBgColors[meso.status],
+            backgroundColor: resolveColor(segmentTrackToken[meso.status]),
             transform: [{ scale: pressScale }],
           },
           isActive
             ? {
                 borderWidth: 2,
-                borderColor: BRAND_PRIMARY,
+                borderColor: brandPrimary,
                 transform: [{ scale: 1.02 }, { scale: pressScale }],
               }
             : undefined,
@@ -108,7 +110,7 @@ function MesoSegment({ meso, isActive, onPress }: SegmentProps) {
               top: 0,
               bottom: 0,
               width: `${progress * 100}%`,
-              backgroundColor: BRAND_PRIMARY,
+              backgroundColor: brandPrimary,
             }}
             testID={`meso-segment-fill-${meso.id}`}
           />

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

@@ -3,8 +3,9 @@ import { View } from 'react-native'
 import { MesoStatusCard } from './MesoStatusCard'
 
 const meta: Meta<typeof MesoStatusCard> = {
-  title: 'Workout/MesoStatusCard',
+  title: 'Custom/Workout/MesoStatusCard',
   component: MesoStatusCard,
+  parameters: { docs: { description: { component: 'Composes **Card** · **StatusDot**.' } } },
   tags: ['autodocs'],
   argTypes: {
     mesoName: {

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

@@ -29,11 +29,9 @@ describe('MesoStatusCard', () => {
     it('renders the card, name, and subtitle', () => {
       render(<MesoStatusCard {...baseProps} />)
       expect(screen.getByTestId('meso-status-card')).toBeInTheDocument()
-      expect(screen.getByTestId('meso-status-card-name')).toHaveTextContent(
-        'Hypertrophy Block',
-      )
+      expect(screen.getByTestId('meso-status-card-name')).toHaveTextContent('Hypertrophy Block')
       expect(screen.getByTestId('meso-status-card-subtitle')).toHaveTextContent(
-        'Week 6 of 8 · Upper/Lower',
+        'Week 6 of 8 · Upper/Lower'
       )
     })
 
@@ -44,9 +42,7 @@ describe('MesoStatusCard', () => {
 
     it('renders the status badge with its label', () => {
       render(<MesoStatusCard {...baseProps} />)
-      expect(screen.getByTestId('meso-status-card-badge')).toHaveTextContent(
-        'On Track',
-      )
+      expect(screen.getByTestId('meso-status-card-badge')).toHaveTextContent('On Track')
     })
   })
 
@@ -67,16 +63,14 @@ describe('MesoStatusCard', () => {
             { label: 'Set', value: '1' },
             { label: 'Set', value: '2' },
           ]}
-        />,
+        />
       )
       expect(screen.getAllByTestId('meso-status-card-metric')).toHaveLength(2)
     })
 
     it('does not render the metrics grid when empty', () => {
       render(<MesoStatusCard {...baseProps} metrics={[]} />)
-      expect(
-        screen.queryByTestId('meso-status-card-metrics'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('meso-status-card-metrics')).not.toBeInTheDocument()
     })
   })
 
@@ -84,9 +78,7 @@ describe('MesoStatusCard', () => {
     it('renders one gauge per entry with a marker', () => {
       render(<MesoStatusCard {...baseProps} />)
       expect(screen.getAllByTestId('meso-status-card-gauge')).toHaveLength(2)
-      expect(
-        screen.getAllByTestId('meso-status-card-gauge-marker'),
-      ).toHaveLength(2)
+      expect(screen.getAllByTestId('meso-status-card-gauge-marker')).toHaveLength(2)
     })
 
     it('renders a 50% center line per gauge', () => {
@@ -96,34 +88,19 @@ describe('MesoStatusCard', () => {
     })
 
     it('exposes gauge level via progressbar value', () => {
-      render(
-        <MesoStatusCard
-          {...baseProps}
-          gauges={[{ label: 'Intensity', level: 0.7 }]}
-        />,
-      )
+      render(<MesoStatusCard {...baseProps} gauges={[{ label: 'Intensity', level: 0.7 }]} />)
       const gauge = screen.getByLabelText('Intensity: 70%')
       expect(gauge).toHaveAttribute('role', 'progressbar')
       expect(gauge).toHaveAttribute('aria-valuenow', '70')
     })
 
     it('clamps out-of-range levels', () => {
-      render(
-        <MesoStatusCard
-          {...baseProps}
-          gauges={[{ label: 'Volume', level: 1.7 }]}
-        />,
-      )
+      render(<MesoStatusCard {...baseProps} gauges={[{ label: 'Volume', level: 1.7 }]} />)
       expect(screen.getByLabelText('Volume: 100%')).toBeInTheDocument()
     })
 
     it('guards a non-finite level, rendering 0% instead of NaN%', () => {
-      render(
-        <MesoStatusCard
-          {...baseProps}
-          gauges={[{ label: 'Intensity', level: Number.NaN }]}
-        />,
-      )
+      render(<MesoStatusCard {...baseProps} gauges={[{ label: 'Intensity', level: Number.NaN }]} />)
       expect(screen.getByLabelText('Intensity: 0%')).toBeInTheDocument()
       expect(screen.queryByLabelText('Intensity: NaN%')).not.toBeInTheDocument()
     })
@@ -136,7 +113,7 @@ describe('MesoStatusCard', () => {
             { label: 'Load', level: 0.3 },
             { label: 'Load', level: 0.6 },
           ]}
-        />,
+        />
       )
       expect(screen.getAllByTestId('meso-status-card-gauge')).toHaveLength(2)
     })
@@ -152,9 +129,7 @@ describe('MesoStatusCard', () => {
 
     it('omits the coaching box when not provided', () => {
       render(<MesoStatusCard {...baseProps} coaching={undefined} />)
-      expect(
-        screen.queryByTestId('meso-status-card-coaching'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('meso-status-card-coaching')).not.toBeInTheDocument()
     })
   })
 
@@ -167,9 +142,7 @@ describe('MesoStatusCard', () => {
 
     it('omits the next-target box when not provided', () => {
       render(<MesoStatusCard {...baseProps} nextTarget={undefined} />)
-      expect(
-        screen.queryByTestId('meso-status-card-next-target'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('meso-status-card-next-target')).not.toBeInTheDocument()
     })
   })
 
@@ -177,10 +150,7 @@ describe('MesoStatusCard', () => {
     it('exposes the card as an article with a descriptive label', () => {
       render(<MesoStatusCard {...baseProps} />)
       const article = screen.getByRole('article')
-      expect(article).toHaveAttribute(
-        'aria-label',
-        'Mesocycle status for Hypertrophy Block',
-      )
+      expect(article).toHaveAttribute('aria-label', 'Mesocycle status for Hypertrophy Block')
     })
 
     it('has no accessibility violations', async () => {
@@ -201,7 +171,7 @@ describe('MesoStatusCard', () => {
             coaching={undefined}
             nextTarget={undefined}
           />
-        </>,
+        </>
       )
       expect(await axe(container)).toHaveNoViolations()
     })

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

@@ -5,10 +5,13 @@ import { Card } from '../../ui/card'
 import { StatusDot } from './StatusDot'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveColors } from '../../../theme/tokens/primitives'
 import {
   MESO_ACCENT_GRADIENT_DARK,
   MESO_ACCENT_GRADIENT_LIGHT,
 } from '../../../theme/extracted-colors-dataviz'
+import { liftStyle } from '../../../theme/lift'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
@@ -31,8 +34,7 @@ const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
 const CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor('surface-elevated')} 0%, ${resolveColor('surface-raised')} 100%)`
 
 /** Gauge track gradient (teal -> amber -> red) at 0.25 alpha. */
-const GAUGE_GRADIENT =
-  'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)'
+const GAUGE_GRADIENT = `linear-gradient(90deg, ${alpha(SUCCESS, 0.25)} 0%, ${alpha(WARNING, 0.25)} 50%, ${alpha(ERROR, 0.25)} 100%)`
 
 export type MesoStatusBadgeVariant = 'success' | 'warning' | 'error'
 
@@ -40,9 +42,9 @@ const STATUS_VARIANTS: Record<
   MesoStatusBadgeVariant,
   { bg: string; border: string; text: string }
 > = {
-  success: { bg: 'rgba(46,213,115,0.15)', border: 'rgba(46,213,115,0.3)', text: SUCCESS },
-  warning: { bg: 'rgba(249,180,21,0.15)', border: 'rgba(249,180,21,0.3)', text: WARNING },
-  error: { bg: 'rgba(209,67,67,0.15)', border: 'rgba(209,67,67,0.25)', text: ERROR },
+  success: { bg: alpha(SUCCESS, 0.15), border: alpha(SUCCESS, 0.3), text: SUCCESS },
+  warning: { bg: alpha(WARNING, 0.15), border: alpha(WARNING, 0.3), text: WARNING },
+  error: { bg: alpha(ERROR, 0.15), border: alpha(ERROR, 0.25), text: ERROR },
 }
 
 export interface MesoStatusBadge {
@@ -117,23 +119,17 @@ function getGaugeZoneColor(level: number): string {
 /** Splits `text` into nodes, bolding any segment that exactly matches a highlight. */
 function renderCoachingText(text: string, highlights?: string[]): ReactNode {
   if (!highlights || highlights.length === 0) return text
-  const escaped = highlights
-    .filter(Boolean)
-    .map((h) => h.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+  const escaped = highlights.filter(Boolean).map((h) => h.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
   if (escaped.length === 0) return text
   const regex = new RegExp(`(${escaped.join('|')})`, 'g')
   return text.split(regex).map((part, index) =>
     highlights.includes(part) ? (
-      <Text
-        key={`${part}-${index}`}
-        className="text-text-primary"
-        style={{ fontWeight: '700' }}
-      >
+      <Text key={`${part}-${index}`} className="text-text-primary" style={{ fontWeight: '700' }}>
         {part}
       </Text>
     ) : (
       <Fragment key={`t-${index}`}>{part}</Fragment>
-    ),
+    )
   )
 }
 
@@ -216,10 +212,7 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
       aria-valuemax={100}
       testID="meso-status-card-gauge"
     >
-      <View
-        className="flex-row items-center justify-between"
-        accessibilityElementsHidden
-      >
+      <View className="flex-row items-center justify-between" accessibilityElementsHidden>
         <Text
           className="text-text-secondary"
           style={{
@@ -265,7 +258,7 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
             bottom: 0,
             width: 1,
             marginLeft: -0.5,
-            backgroundColor: 'rgba(255,255,255,0.3)',
+            backgroundColor: alpha(primitiveColors.white, 0.3),
           }}
           testID="meso-status-card-gauge-center"
         />
@@ -281,7 +274,8 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
             borderRadius: 9999,
             borderWidth: 2,
             backgroundColor: markerColor,
-            boxShadow: '0 0 4px rgba(0,0,0,0.5)',
+            // A knob resting on the gauge: lift, with the ring as its edge.
+            ...liftStyle(1, 'dark', { rim: 0 }),
           }}
           testID="meso-status-card-gauge-marker"
         />
@@ -353,10 +347,7 @@ export function MesoStatusCard({
 
       <View style={{ padding: 14, gap: 14 }} testID="meso-status-card-body">
         <View testID="meso-status-card-header">
-          <View
-            className="flex-row items-center justify-between"
-            style={{ gap: 8 }}
-          >
+          <View className="flex-row items-center justify-between" style={{ gap: 8 }}>
             <Text
               className="text-text-primary"
               style={{
@@ -385,11 +376,7 @@ export function MesoStatusCard({
         </View>
 
         {metrics.length > 0 && (
-          <View
-            className="flex-row flex-wrap"
-            style={{ gap: 8 }}
-            testID="meso-status-card-metrics"
-          >
+          <View className="flex-row flex-wrap" style={{ gap: 8 }} testID="meso-status-card-metrics">
             {metrics.map((metric, index) => (
               <MetricCell key={`${metric.label}-${index}`} metric={metric} />
             ))}
@@ -407,9 +394,9 @@ export function MesoStatusCard({
         {coaching != null && (
           <View
             style={{
-              backgroundColor: 'rgba(249,180,21,0.06)',
+              backgroundColor: alpha(WARNING, 0.06),
               borderWidth: 1,
-              borderColor: 'rgba(249,180,21,0.15)',
+              borderColor: alpha(WARNING, 0.15),
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 12,
@@ -434,9 +421,9 @@ export function MesoStatusCard({
             className="flex-row items-center"
             style={{
               gap: 8,
-              backgroundColor: 'rgba(46,213,115,0.06)',
+              backgroundColor: alpha(SUCCESS, 0.06),
               borderWidth: 1,
-              borderColor: 'rgba(46,213,115,0.2)',
+              borderColor: alpha(SUCCESS, 0.2),
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 12,

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

@@ -6,14 +6,15 @@ import { getSemanticColors } from '../../../theme'
 const AMBER = getSemanticColors('dark')['status-warning']
 
 const meta: Meta<typeof MetricTiles> = {
-  title: 'Workout/MetricTiles',
+  title: 'Custom/Workout/MetricTiles',
   component: MetricTiles,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '**Molecule.** An HStack of [Tile](?path=/docs/components-atoms-tile--docs). Used-by ↑ SessionHeader.',
+          '**Molecule.** An HStack of [Tile](?path=/docs/components-atoms-tile--docs). Used-by ↑ SessionHeader.' +
+          ' Composes **HStack** · **Tile**.',
       },
     },
   },

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { MuscleGroupChip, type VolumeStatus } from './MuscleGroupChip'
 
 const meta: Meta<typeof MuscleGroupChip> = {
-  title: 'Components/Atoms/MuscleGroupChip',
+  title: 'Custom/Workout/MuscleGroupChip',
   component: MuscleGroupChip,
   tags: ['autodocs'],
   argTypes: {
@@ -82,13 +82,7 @@ export const Tappable: Story = {
   },
 }
 
-const allStatuses: VolumeStatus[] = [
-  'untrained',
-  'behind',
-  'ontrack',
-  'target',
-  'over',
-]
+const allStatuses: VolumeStatus[] = ['untrained', 'behind', 'ontrack', 'target', 'over']
 
 export const AllStatuses: Story = {
   render: () => (