@titan-design/react-ui 0.12.1 → 0.13.0

package/src/components/custom/Treemap/Treemap.tsx

@@ -100,7 +100,7 @@ function squarify(data: TreemapDatum[], w: number, h: number): Rect[] {
       out.push(
         vertical
           ? { x: rx, y: along, w: thickness, h: len, datum: r.datum }
-          : { x: along, y: ry, w: len, h: thickness, datum: r.datum },
+          : { x: along, y: ry, w: len, h: thickness, datum: r.datum }
       )
       along += len
     }
@@ -143,7 +143,12 @@ export function Treemap({
     const restValue = clean.slice(maxTiles - 1).reduce((s, d) => s + d.value, 0)
     tiles = [
       ...head,
-      { id: '__more__', value: restValue, color: '#3a3a3a', label: `+${clean.length - (maxTiles - 1)} more` },
+      {
+        id: '__more__',
+        value: restValue,
+        color: '#3a3a3a',
+        label: `+${clean.length - (maxTiles - 1)} more`,
+      },
     ]
   }
 

package/src/components/custom/Typography/Typography.stories.tsx

@@ -5,7 +5,7 @@ import { Typography, Heading, Paragraph, Caption, Label, Overline } from './Typo
 const meta: Meta<typeof Typography> = {
   title: 'Foundations/Typography',
   component: Typography,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -25,6 +25,8 @@ const meta: Meta<typeof Typography> = {
         'button',
         'mono',
         'monoLabel',
+        'microLabel',
+        'boldLabel',
       ],
     },
     color: {
@@ -111,6 +113,31 @@ export const Mono: Story = {
   ),
 }
 
+/** The sans label pair, shown against the variants they sit between on the scale. */
+export const Labels: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Typography variant="microLabel">microLabel — SET · PREV · REPS · LBS · RPE</Typography>
+      <Typography variant="overline">overline — 12PX FONT-BODY MICRO LABEL</Typography>
+      <Typography variant="boldLabel">boldLabel — PR e1RM</Typography>
+      <Typography variant="caption">caption — 12px font-body, regular weight</Typography>
+    </View>
+  ),
+}
+
+/** microLabel is the only 10px step; every other label variant is 12px. */
+export const MicroLabelInATableHeader: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 24 }}>
+      {['SET', 'PREV', 'REPS', 'LBS', 'RPE'].map((label) => (
+        <Typography key={label} variant="microLabel" color="tertiary">
+          {label}
+        </Typography>
+      ))}
+    </View>
+  ),
+}
+
 export const AllColors: Story = {
   render: () => (
     <View style={{ gap: 8 }}>

package/src/components/custom/Typography/Typography.test.tsx

@@ -89,6 +89,40 @@ describe('Typography', () => {
     })
   })
 
+  describe('label variants', () => {
+    it('renders the microLabel variant', () => {
+      render(<Typography variant="microLabel">SET</Typography>)
+      expect(screen.getByText('SET')).toBeInTheDocument()
+    })
+
+    it('renders the boldLabel variant', () => {
+      render(<Typography variant="boldLabel">PR e1RM</Typography>)
+      expect(screen.getByText('PR e1RM')).toBeInTheDocument()
+    })
+
+    it('keeps both label variants out of the heading tree', () => {
+      render(
+        <>
+          <Typography variant="microLabel">REPS</Typography>
+          <Typography variant="boldLabel">PR Weight</Typography>
+        </>
+      )
+      expect(screen.queryByRole('heading')).not.toBeInTheDocument()
+    })
+
+    it('label variants have no accessibility violations', async () => {
+      const { container } = render(
+        <div>
+          <Typography variant="microLabel">RPE</Typography>
+          <Typography variant="boldLabel">PR Volume</Typography>
+        </div>
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
   describe('accessibility', () => {
     it('headings have no accessibility violations', async () => {
       const { container } = render(

package/src/components/custom/Typography/Typography.tsx

@@ -18,6 +18,8 @@ export type TypographyVariant =
   | 'button'
   | 'mono'
   | 'monoLabel'
+  | 'microLabel'
+  | 'boldLabel'
 
 export type TypographyColor =
   | 'primary'
@@ -75,6 +77,10 @@ const variantStyles: Record<TypographyVariant, string> = {
   // Monospace technical readouts (clocks, ids, metrics) and their all-caps label form.
   mono: 'font-mono text-xs font-normal leading-normal',
   monoLabel: 'font-mono text-xs font-bold uppercase tracking-wide leading-normal',
+  // The sans (Inter) label pair: 10px for dense table/column headers, 12px bold for
+  // badge and row labels. `overline` is the 12px font-body form of the same idea.
+  microLabel: 'font-sans text-2xs font-semibold uppercase tracking-widest leading-normal',
+  boldLabel: 'font-sans text-xs font-bold leading-normal',
 }
 
 const colorStyles: Record<TypographyColor, string> = {

package/src/components/custom/Typography/index.ts

@@ -1,11 +1,4 @@
-export {
-  Typography,
-  Heading,
-  Paragraph,
-  Caption,
-  Label,
-  Overline,
-} from './Typography'
+export { Typography, Heading, Paragraph, Caption, Label, Overline } from './Typography'
 export type {
   TypographyProps,
   TypographyVariant,

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

@@ -95,7 +95,15 @@ const exercises: ActiveWorkoutExercise[] = [
 const meta: Meta<typeof ActiveWorkoutPage> = {
   title: 'Pages/Active Workout',
   component: ActiveWorkoutPage,
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **ExerciseCard** · **InputBar** · **RestTimer** · **SupersetWrapper**.',
+      },
+    },
+  },
   tags: ['autodocs'],
   args: {
     title: 'Push Day A',

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

@@ -4,7 +4,7 @@ import { DumbbellIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
 
 const meta: Meta<typeof BaseBadge> = {
-  title: 'Components/Atoms/BaseBadge',
+  title: 'Custom/Workout/BaseBadge',
   component: BaseBadge,
   tags: ['autodocs'],
   argTypes: {
@@ -56,14 +56,26 @@ export const AllVariants: Story = {
   render: () => (
     <View style={{ gap: 12 }}>
       <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <BaseBadge size="sm"><Label>225 lbs</Label></BaseBadge>
-        <BaseBadge size="md"><Label>225 lbs</Label></BaseBadge>
-        <BaseBadge size="lg"><Label>225 lbs</Label></BaseBadge>
+        <BaseBadge size="sm">
+          <Label>225 lbs</Label>
+        </BaseBadge>
+        <BaseBadge size="md">
+          <Label>225 lbs</Label>
+        </BaseBadge>
+        <BaseBadge size="lg">
+          <Label>225 lbs</Label>
+        </BaseBadge>
       </View>
       <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <BaseBadge variant="pr" size="sm"><Label color="#FF7900">PR</Label></BaseBadge>
-        <BaseBadge variant="pr" size="md"><Label color="#FF7900">PR</Label></BaseBadge>
-        <BaseBadge variant="pr" size="lg"><Label color="#FF7900">PR</Label></BaseBadge>
+        <BaseBadge variant="pr" size="sm">
+          <Label color="#FF7900">PR</Label>
+        </BaseBadge>
+        <BaseBadge variant="pr" size="md">
+          <Label color="#FF7900">PR</Label>
+        </BaseBadge>
+        <BaseBadge variant="pr" size="lg">
+          <Label color="#FF7900">PR</Label>
+        </BaseBadge>
       </View>
       <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
         <BaseBadge icon={<DumbbellIcon size={12} color="#9CA3AF" strokeWidth={2} />}>

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

@@ -11,12 +11,20 @@ const T = getSemanticColors('dark')
 
 describe('BaseBadge', () => {
   it('renders children', () => {
-    render(<BaseBadge testID="bb"><Text>Hello</Text></BaseBadge>)
+    render(
+      <BaseBadge testID="bb">
+        <Text>Hello</Text>
+      </BaseBadge>
+    )
     expect(screen.getByText('Hello')).toBeInTheDocument()
   })
 
   it('defaults to the plain variant border color', () => {
-    render(<BaseBadge testID="bb"><Text>x</Text></BaseBadge>)
+    render(
+      <BaseBadge testID="bb">
+        <Text>x</Text>
+      </BaseBadge>
+    )
     expect(screen.getByTestId('bb')).toHaveStyle({ borderTopColor: T['hairline-default'] })
   })
 
@@ -24,7 +32,7 @@ describe('BaseBadge', () => {
     render(
       <BaseBadge variant="pr" testID="bb">
         <Text>x</Text>
-      </BaseBadge>,
+      </BaseBadge>
     )
     expect(screen.getByTestId('bb')).toHaveStyle({
       borderTopColor: 'rgba(255, 121, 0, 0.3)',
@@ -36,14 +44,18 @@ describe('BaseBadge', () => {
       render(
         <BaseBadge icon={<View testID="my-icon" />}>
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       expect(screen.getByTestId('base-badge-icon')).toBeInTheDocument()
       expect(screen.getByTestId('my-icon')).toBeInTheDocument()
     })
 
     it('does not render an icon wrapper when no icon is provided', () => {
-      render(<BaseBadge><Text>x</Text></BaseBadge>)
+      render(
+        <BaseBadge>
+          <Text>x</Text>
+        </BaseBadge>
+      )
       expect(screen.queryByTestId('base-badge-icon')).not.toBeInTheDocument()
     })
   })
@@ -54,7 +66,7 @@ describe('BaseBadge', () => {
       render(
         <BaseBadge onPress={onPress} accessibilityLabel="Press me">
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       const pressable = screen.getByTestId('base-badge-pressable')
       fireEvent.click(pressable)
@@ -62,7 +74,11 @@ describe('BaseBadge', () => {
     })
 
     it('does not render a Pressable when onPress is omitted', () => {
-      render(<BaseBadge><Text>x</Text></BaseBadge>)
+      render(
+        <BaseBadge>
+          <Text>x</Text>
+        </BaseBadge>
+      )
       expect(screen.queryByTestId('base-badge-pressable')).not.toBeInTheDocument()
     })
 
@@ -70,7 +86,7 @@ describe('BaseBadge', () => {
       render(
         <BaseBadge onPress={() => {}} accessibilityLabel="Press me">
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       expect(screen.getByRole('button')).toBeInTheDocument()
     })
@@ -78,7 +94,11 @@ describe('BaseBadge', () => {
 
   describe('size', () => {
     it.each(['sm', 'md', 'lg'] as const)('renders %s size', (size) => {
-      render(<BaseBadge size={size} testID="bb"><Text>x</Text></BaseBadge>)
+      render(
+        <BaseBadge size={size} testID="bb">
+          <Text>x</Text>
+        </BaseBadge>
+      )
       expect(screen.getByTestId('bb')).toBeInTheDocument()
     })
   })
@@ -88,7 +108,7 @@ describe('BaseBadge', () => {
       const { container } = render(
         <BaseBadge accessibilityLabel="Static badge">
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -98,7 +118,7 @@ describe('BaseBadge', () => {
       const { container } = render(
         <BaseBadge onPress={() => {}} accessibilityLabel="Pressable badge">
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -37,6 +37,9 @@ const variantColors: Record<BaseBadgeVariant, { backgroundColor: string; borderC
   },
 }
 
+/**
+ * @deprecated Use `<Pill tone="…" variant="…">` — removed after AW-127 consumer migration.
+ */
 export function BaseBadge({
   variant = 'plain',
   size = 'md',

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

@@ -51,8 +51,11 @@ const backData: BodyMapData[] = [
 ]
 
 const meta: Meta<typeof BodyMap> = {
-  title: 'Workout/DataViz/BodyMap',
+  title: 'Custom/Workout/DataViz/BodyMap',
   component: BodyMap,
+  parameters: {
+    docs: { description: { component: 'Composes **MuscleGroup** · **SimpleMuscleGroup**.' } },
+  },
   tags: ['autodocs'],
   argTypes: {
     view: { control: 'inline-radio', options: ['front', 'back'] },

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

@@ -5,6 +5,7 @@ import BodyHighlighter, { type ExtendedBodyPart, type Slug } from 'react-native-
 import { cn } from '../../../utils/cn'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { getGlowShadow } from '../../../theme/elevation'
 import {
   MuscleGroup,
   SimpleMuscleGroup,
@@ -197,7 +198,8 @@ export function BodyMap({
             alignSelf: 'center',
             transform: [{ scale }],
           },
-          glowColor ? { boxShadow: `0 0 14px 2px ${glowColor}` } : undefined,
+          // The highlight halo is emphasis, not depth.
+          glowColor ? getGlowShadow(glowColor, 'medium') : undefined,
         ]}
         // The SVG is decorative; the accessible muscle legend below is the
         // screen-reader / keyboard interface.

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

@@ -7,6 +7,7 @@ import {
   type UpcomingExercise,
 } from './BodyMapDetailPanel'
 import { MuscleGroup } from './muscleTaxonomy'
+import { Surface } from '../../ui/surface'
 
 const contributing: ContributingExercise[] = [
   { name: 'Barbell Bench Press', sets: 4, contributionWeight: 1 },
@@ -21,14 +22,17 @@ const upcoming: UpcomingExercise[] = [
 ]
 
 const meta: Meta<typeof BodyMapDetailPanel> = {
-  title: 'Workout/DataViz/BodyMapDetailPanel',
+  title: 'Custom/Workout/DataViz/BodyMapDetailPanel',
   component: BodyMapDetailPanel,
+  parameters: {
+    docs: { description: { component: 'Composes **Badge** · **Sparkline** · **MuscleGroup**.' } },
+  },
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <View style={{ position: 'relative', height: 640, width: 380, backgroundColor: '#0E0E0E' }}>
+      <Surface level="base" style={{ position: 'relative', height: 640, width: 380 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
   argTypes: {
@@ -132,7 +136,15 @@ export const WithoutUpcoming: Story = {
 function InteractiveBodyMapDetailPanel() {
   const [open, setOpen] = useState(false)
   return (
-    <View style={{ position: 'relative', height: 640, width: 380, backgroundColor: '#0E0E0E', padding: 16 }}>
+    <View
+      style={{
+        position: 'relative',
+        height: 640,
+        width: 380,
+        backgroundColor: '#0E0E0E',
+        padding: 16,
+      }}
+    >
       <Pressable
         onPress={() => setOpen(true)}
         accessibilityRole="button"

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

@@ -13,9 +13,7 @@ const contributing: ContributingExercise[] = [
   { name: 'Cable Fly', sets: 3, contributionWeight: 0.75 },
 ]
 
-const upcoming: UpcomingExercise[] = [
-  { name: 'Dips', workoutName: 'Push B', sets: 3 },
-]
+const upcoming: UpcomingExercise[] = [{ name: 'Dips', workoutName: 'Push B', sets: 3 }]
 
 const baseProps = {
   muscleGroup: MuscleGroup.CHEST,
@@ -54,10 +52,10 @@ describe('BodyMapDetailPanel', () => {
       render(<BodyMapDetailPanel {...baseProps} />)
       expect(screen.getByTestId('body-map-detail-panel-handle')).toBeInTheDocument()
       expect(screen.getByTestId('body-map-detail-panel-status-badge')).toHaveTextContent(
-        'productive',
+        'productive'
       )
       expect(screen.getByTestId('body-map-detail-panel-last-trained')).toHaveTextContent(
-        'Last trained 2 days ago',
+        'Last trained 2 days ago'
       )
     })
 
@@ -101,13 +99,13 @@ describe('BodyMapDetailPanel', () => {
     it('renders contributing exercises with sets and contribution', () => {
       render(<BodyMapDetailPanel {...baseProps} />)
       expect(screen.getByTestId('body-map-detail-panel-contributing-0-name')).toHaveTextContent(
-        'Barbell Bench Press',
+        'Barbell Bench Press'
       )
       expect(screen.getByTestId('body-map-detail-panel-contributing-0-detail')).toHaveTextContent(
-        '4 sets · 100%',
+        '4 sets · 100%'
       )
       expect(screen.getByTestId('body-map-detail-panel-contributing-1-detail')).toHaveTextContent(
-        '3 sets · 75%',
+        '3 sets · 75%'
       )
     })
 
@@ -115,7 +113,7 @@ describe('BodyMapDetailPanel', () => {
       render(<BodyMapDetailPanel {...baseProps} />)
       expect(screen.getByTestId('body-map-detail-panel-upcoming-0-name')).toHaveTextContent('Dips')
       expect(screen.getByTestId('body-map-detail-panel-upcoming-0-detail')).toHaveTextContent(
-        'Push B · 3 sets',
+        'Push B · 3 sets'
       )
     })
 
@@ -131,7 +129,7 @@ describe('BodyMapDetailPanel', () => {
           contributingExercises={[]}
           upcomingExercises={[]}
           weeklyHistory={[]}
-        />,
+        />
       )
       expect(screen.getByTestId('body-map-detail-panel')).toBeInTheDocument()
       expect(screen.queryByTestId('body-map-detail-panel-contributing')).not.toBeInTheDocument()
@@ -190,9 +188,7 @@ describe('BodyMapDetailPanel', () => {
     })
 
     it('has no accessibility violations with full content', async () => {
-      const { container } = render(
-        <BodyMapDetailPanel {...baseProps} onViewExercises={vi.fn()} />,
-      )
+      const { container } = render(<BodyMapDetailPanel {...baseProps} onViewExercises={vi.fn()} />)
       expect(await axe(container)).toHaveNoViolations()
     })
 
@@ -200,7 +196,7 @@ describe('BodyMapDetailPanel', () => {
       const statuses = ['under', 'maintenance', 'productive', 'over'] as const
       for (const volumeStatus of statuses) {
         const { container, unmount } = render(
-          <BodyMapDetailPanel {...baseProps} volumeStatus={volumeStatus} />,
+          <BodyMapDetailPanel {...baseProps} volumeStatus={volumeStatus} />
         )
         expect(await axe(container)).toHaveNoViolations()
         unmount()
@@ -217,7 +213,7 @@ describe('BodyMapDetailPanel', () => {
           volumeStatus="maintenance"
           isOpen
           onClose={vi.fn()}
-        />,
+        />
       )
       expect(await axe(container)).toHaveNoViolations()
     })

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

@@ -19,6 +19,7 @@ import {
   type VolumeStatus,
 } from './muscleTaxonomy'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { liftStyle } from '../../../theme/lift'
 
 const t = getSemanticColors('dark')
 
@@ -173,7 +174,14 @@ export function BodyMapDetailPanel({
 
   return (
     <View
-      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'flex-end' }}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'flex-end',
+      }}
       testID="body-map-detail-panel-root"
     >
       <Animated.View
@@ -266,7 +274,9 @@ export function BodyMapDetailPanel({
               style={{ padding: 4, margin: -4 }}
               testID="body-map-detail-panel-close"
             >
-              <Text className="text-text-secondary" style={{ fontSize: 22, lineHeight: 22 }}>{'×'}</Text>
+              <Text className="text-text-secondary" style={{ fontSize: 22, lineHeight: 22 }}>
+                {'×'}
+              </Text>
             </Pressable>
           </View>
 
@@ -286,10 +296,16 @@ export function BodyMapDetailPanel({
               style={{ marginBottom: 6 }}
               accessibilityElementsHidden
             >
-              <Text className="text-text-tertiary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}>
+              <Text
+                className="text-text-tertiary"
+                style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+              >
                 {`MEV ${landmarks.mev}`}
               </Text>
-              <Text className="text-text-tertiary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}>
+              <Text
+                className="text-text-tertiary"
+                style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+              >
                 {`MRV ${landmarks.mrv}`}
               </Text>
             </View>
@@ -304,7 +320,9 @@ export function BodyMapDetailPanel({
               testID="body-map-detail-panel-volume-bar"
             >
               <View
-                style={{ height: 8, borderRadius: 4, backgroundImage: VOLUME_GRADIENT } as ViewStyle}
+                style={
+                  { height: 8, borderRadius: 4, backgroundImage: VOLUME_GRADIENT } as ViewStyle
+                }
                 accessibilityElementsHidden
               />
               <View
@@ -317,7 +335,8 @@ export function BodyMapDetailPanel({
                   height: 14,
                   borderRadius: 7,
                   borderWidth: 2,
-                  boxShadow: '0 0 4px rgba(0,0,0,0.5)',
+                  // A knob resting on the volume bar: lift, with the ring as its edge.
+                  ...liftStyle(1, 'dark', { rim: 0 }),
                 }}
                 accessibilityElementsHidden
                 testID="body-map-detail-panel-volume-marker"
@@ -393,7 +412,12 @@ export function BodyMapDetailPanel({
                 >
                   <Text
                     className="text-text-primary"
-                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+                    style={{
+                      flex: 1,
+                      fontSize: 13,
+                      fontFamily: 'Inter, sans-serif',
+                      fontWeight: '600',
+                    }}
                     testID={`body-map-detail-panel-contributing-${index}-name`}
                   >
                     {exercise.name}
@@ -432,7 +456,12 @@ export function BodyMapDetailPanel({
                 >
                   <Text
                     className="text-text-primary"
-                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+                    style={{
+                      flex: 1,
+                      fontSize: 13,
+                      fontFamily: 'Inter, sans-serif',
+                      fontWeight: '600',
+                    }}
                     testID={`body-map-detail-panel-upcoming-${index}-name`}
                   >
                     {exercise.name}
@@ -465,7 +494,14 @@ export function BodyMapDetailPanel({
               }}
               testID="body-map-detail-panel-view-exercises"
             >
-              <Text style={{ fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '700', color: BRAND_PRIMARY }}>
+              <Text
+                style={{
+                  fontSize: 13,
+                  fontFamily: 'Inter, sans-serif',
+                  fontWeight: '700',
+                  color: BRAND_PRIMARY,
+                }}
+              >
                 {'View exercises'}
               </Text>
             </Pressable>

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

@@ -2,11 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import { View, Text } from 'react-native'
 import { CapacityBandChart } from './CapacityBandChart'
-import type {
-  CapacityBandDataPoint,
-  CapacityBandProjection,
-  WorkoutDot,
-} from './CapacityBandChart'
+import type { CapacityBandDataPoint, CapacityBandProjection, WorkoutDot } from './CapacityBandChart'
 
 const band: CapacityBandDataPoint[] = [
   { date: '2026-06-01', bandLow: 40, bandHigh: 70 },
@@ -39,12 +35,18 @@ const projection: CapacityBandProjection = {
 }
 
 const meta: Meta<typeof CapacityBandChart> = {
-  title: 'Workout/DataViz/CapacityBandChart',
+  title: 'Custom/Workout/DataViz/CapacityBandChart',
   component: CapacityBandChart,
   tags: ['autodocs'],
   argTypes: {
-    width: { control: { type: 'range', min: 240, max: 480, step: 10 }, description: 'Chart width in px' },
-    height: { control: { type: 'range', min: 120, max: 280, step: 10 }, description: 'Chart height in px' },
+    width: {
+      control: { type: 'range', min: 240, max: 480, step: 10 },
+      description: 'Chart width in px',
+    },
+    height: {
+      control: { type: 'range', min: 120, max: 280, step: 10 },
+      description: 'Chart height in px',
+    },
     band: { description: 'Capacity band shape over time' },
     workouts: { description: 'Workout sessions plotted as load dots' },
     projection: { description: 'Optional dashed forward projection (training vs rest)' },