@titan-design/react-ui 0.6.0 → 0.8.0

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

@@ -0,0 +1,90 @@
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text, Pressable } from 'react-native'
+import { CircularTimer } from './CircularTimer'
+
+const meta: Meta<typeof CircularTimer> = {
+  title: 'Custom/CircularTimer',
+  component: CircularTimer,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A circular countdown / countup with an mm:ss readout in the center — the graphical ' +
+          'sibling of `TimerReadout`. Batteries-included: owns `useTimer` (pass controlled ' +
+          '`durationMs` + `elapsedMs`) and composes `CircularProgress` for the arc (`down` drains, ' +
+          '`up` fills). On completion a `down` timer with a `doneLabel` fills fully in `doneColor` ' +
+          'and reads the label (e.g. "GO"). Pass `controls` to render buttons below the ring, or ' +
+          "`fill` to make it responsive to its container. `RestTimer`'s `ring` variant wraps this.",
+      },
+    },
+  },
+  argTypes: {
+    mode: { control: 'inline-radio', options: ['down', 'up'] },
+    size: { control: { type: 'number', min: 96, max: 280, step: 4 } },
+    fill: { control: 'boolean' },
+    doneLabel: { control: 'text' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof CircularTimer>
+
+const dark: Decorator = (Story) => (
+  <View style={{ padding: 32, alignItems: 'center', backgroundColor: '#0E0E0E' }}>
+    <Story />
+  </View>
+)
+
+/** Controls-driven: flip `mode` / `durationMs` / `elapsedMs` / `size` / `doneLabel`. */
+export const Playground: Story = {
+  args: { durationMs: 120000, elapsedMs: 47000, doneLabel: 'GO', size: 180 },
+  decorators: [dark],
+}
+
+/** Countdown, midway — the ring drains from full. */
+export const CountdownMidway: Story = {
+  args: { mode: 'down', durationMs: 120000, elapsedMs: 60000, size: 180 },
+  decorators: [dark],
+}
+
+/** Countup — the ring fills as time elapses. */
+export const CountupMidway: Story = {
+  args: { mode: 'up', durationMs: 120000, elapsedMs: 40000, size: 180 },
+  decorators: [dark],
+}
+
+/** Completed countdown with a done label — full ring, flips to success, reads "GO". */
+export const DoneWithLabel: Story = {
+  args: { mode: 'down', durationMs: 120000, elapsedMs: 120000, doneLabel: 'GO', size: 180 },
+  decorators: [dark],
+}
+
+const DemoButton = ({ label }: { label: string }) => (
+  <Pressable
+    style={{
+      backgroundColor: 'rgba(255,255,255,0.06)',
+      paddingVertical: 8,
+      paddingHorizontal: 20,
+      borderRadius: 8,
+    }}
+  >
+    <Text style={{ color: '#DADADA', fontSize: 11, fontWeight: '600' }}>{label}</Text>
+  </Pressable>
+)
+
+/** With controls rendered below the ring. */
+export const WithControls: Story = {
+  args: {
+    durationMs: 120000,
+    elapsedMs: 47000,
+    size: 180,
+    controls: (
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <DemoButton label="+30s" />
+        <DemoButton label="Skip" />
+      </View>
+    ),
+  },
+  decorators: [dark],
+}

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

@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Text } from 'react-native'
+import { CircularTimer } from './CircularTimer'
+
+describe('CircularTimer', () => {
+  it('renders a timer with a composed progressbar ring', () => {
+    render(<CircularTimer durationMs={120000} elapsedMs={30000} />)
+    expect(screen.getByTestId('circular-timer')).toBeInTheDocument()
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+  })
+
+  it('shows the mm:ss remaining in the center while counting down', () => {
+    render(<CircularTimer durationMs={120000} elapsedMs={60000} />)
+    expect(screen.getByTestId('circular-timer-label')).toHaveTextContent('1:00')
+  })
+
+  it('shows the elapsed mm:ss in up mode', () => {
+    render(<CircularTimer mode="up" durationMs={120000} elapsedMs={45000} />)
+    expect(screen.getByTestId('circular-timer-label')).toHaveTextContent('0:45')
+  })
+
+  it('renders the done label (not a time) when a countdown completes', () => {
+    render(<CircularTimer durationMs={120000} elapsedMs={120000} doneLabel="GO" />)
+    expect(screen.getByTestId('circular-timer-label')).toHaveTextContent('GO')
+  })
+
+  it('keeps showing 0:00 at completion when no doneLabel is given', () => {
+    render(<CircularTimer durationMs={120000} elapsedMs={120000} />)
+    expect(screen.getByTestId('circular-timer-label')).toHaveTextContent('0:00')
+  })
+
+  it('renders optional controls below the ring', () => {
+    render(<CircularTimer durationMs={120000} elapsedMs={0} controls={<Text>+30s</Text>} />)
+    expect(screen.getByText('+30s')).toBeInTheDocument()
+  })
+
+  it('defaults its accessibility label to seconds remaining', () => {
+    render(<CircularTimer durationMs={120000} elapsedMs={60000} />)
+    expect(screen.getAllByLabelText('60 seconds remaining').length).toBeGreaterThan(0)
+  })
+
+  it('uses a supplied accessibility label', () => {
+    render(
+      <CircularTimer durationMs={120000} elapsedMs={60000} accessibilityLabel="Rest, 60s left" />
+    )
+    expect(screen.getAllByLabelText('Rest, 60s left').length).toBeGreaterThan(0)
+  })
+
+  it('emits no NaN when durationMs is 0 (guard)', () => {
+    const { container } = render(<CircularTimer durationMs={0} elapsedMs={0} />)
+    expect(container.innerHTML).not.toContain('NaN')
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <CircularTimer durationMs={120000} elapsedMs={30000} accessibilityLabel="Rest countdown" />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/custom/CircularTimer/CircularTimer.tsx

@@ -0,0 +1,112 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { ReactNode } from 'react'
+import { View, Text } from 'react-native'
+import { CircularProgress, colorVarMap, type ProgressColor } from '../../ui/progress/Progress'
+import { useTimer, type TimerMode } from '../../../hooks/useTimer'
+
+export interface CircularTimerProps {
+  /** Total duration (ms). `down`: the countdown length; `up`: the target for progress. */
+  durationMs: number
+  /** Controlled elapsed time (ms). */
+  elapsedMs: number
+  /** `down` (default) counts remaining toward 0 (ring drains); `up` counts elapsed up (ring fills). */
+  mode?: TimerMode
+  /** Ring diameter (px) — the geometry/stroke reference. Default 160. */
+  size?: number
+  /** Ring stroke width (px). Default 8. */
+  strokeWidth?: number
+  /** Fill the parent container (responsive) instead of a fixed `size` box. */
+  fill?: boolean
+  /** Ring color while running. Default `primary`. */
+  color?: ProgressColor
+  /**
+   * `down` mode: the text shown in the center — and the color the ring fills to — when
+   * the countdown completes (e.g. `doneLabel="GO"`). Omit to keep showing `0:00`.
+   */
+  doneLabel?: string
+  /** Ring + center color when complete (with {@link doneLabel}). Default `success`. */
+  doneColor?: ProgressColor
+  /** Optional controls rendered below the ring (e.g. +30s / Skip). */
+  controls?: ReactNode
+  /** Accessibility label for the timer. Defaults to a seconds-remaining description. */
+  accessibilityLabel?: string
+  testID?: string
+}
+
+/**
+ * A circular countdown / countup with a time readout in the center — the graphical
+ * sibling of {@link TimerReadout}. Batteries-included: owns {@link useTimer} (pass
+ * controlled `durationMs` + `elapsedMs`) and composes {@link CircularProgress} for the
+ * arc (`down` drains as time runs out, `up` fills), rendering the mm:ss label in its
+ * center slot. On completion (`down` + {@link doneLabel}) the ring fills fully in
+ * {@link doneColor} and the center reads the done label — the "go" moment. An optional
+ * {@link controls} node renders below the ring. Consumers (e.g. `RestTimer`'s `ring`
+ * variant) wrap this and add their own domain chrome.
+ */
+export function CircularTimer({
+  durationMs,
+  elapsedMs,
+  mode = 'down',
+  size = 160,
+  strokeWidth = 8,
+  fill = false,
+  color = 'primary',
+  doneLabel,
+  doneColor = 'success',
+  controls,
+  accessibilityLabel,
+  testID,
+}: CircularTimerProps) {
+  const { remainingMs, progress, label, done } = useTimer({ mode, durationMs, elapsedMs })
+
+  const isDone = done && mode === 'down'
+  const showDone = isDone && doneLabel != null
+  // Down → the remaining fraction (ring drains); up → elapsed progress (ring fills).
+  // A completed countdown with a done label fills fully to signal "go".
+  const remainingFrac = durationMs > 0 ? Math.max(0, Math.min(1, remainingMs / durationMs)) : 0
+  const arc = mode === 'down' ? (showDone ? 1 : remainingFrac) : progress
+  const ringColor: ProgressColor = showDone ? doneColor : color
+
+  const remainingSec = Math.ceil(Math.max(0, remainingMs) / 1000)
+  const a11y =
+    accessibilityLabel ?? (isDone ? 'Timer complete' : `${remainingSec} seconds remaining`)
+
+  return (
+    <View
+      style={{ alignItems: 'center', gap: 16 }}
+      accessibilityRole="timer"
+      accessibilityLabel={a11y}
+      testID={testID ?? 'circular-timer'}
+    >
+      <CircularProgress
+        value={arc}
+        max={1}
+        size={size}
+        strokeWidth={strokeWidth}
+        fill={fill}
+        color={ringColor}
+        // A distinct static name for the ring (the live countdown text lives on the
+        // enclosing timer role) — satisfies the progressbar-name a11y rule without
+        // duplicating the timer label.
+        accessibilityLabel="Timer ring"
+        testID="circular-timer-ring"
+      >
+        <Text
+          className={showDone ? undefined : 'text-text-primary'}
+          style={{
+            fontSize: Math.round(size * (showDone ? 0.28 : 0.24)),
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '800',
+            fontVariant: ['tabular-nums'],
+            letterSpacing: showDone ? 1 : -1,
+            ...(showDone ? { color: colorVarMap[doneColor] } : null),
+          }}
+          testID="circular-timer-label"
+        >
+          {showDone ? doneLabel : label}
+        </Text>
+      </CircularProgress>
+      {controls}
+    </View>
+  )
+}

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

@@ -0,0 +1 @@
+export { CircularTimer, type CircularTimerProps } from './CircularTimer'

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

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { DateTime, type DateTimeFormat } from './DateTime'
 
 const meta: Meta<typeof DateTime> = {
-  title: 'Custom/DateTime',
+  title: 'Components/Molecules/DateTime',
   component: DateTime,
   tags: ['autodocs'],
   argTypes: {

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

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

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Gauge } from './Gauge'
 
 const meta: Meta<typeof Gauge> = {
-  title: 'Custom/Gauge',
+  title: 'Components/DataViz/Gauge',
   component: Gauge,
   tags: ['autodocs'],
   argTypes: {

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

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

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Scatter, type ScatterDatum } from './Scatter'
 
 const meta: Meta<typeof Scatter> = {
-  title: 'Custom/Scatter',
+  title: 'Components/DataViz/Scatter',
   component: Scatter,
   tags: ['autodocs'],
   argTypes: {

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

@@ -11,7 +11,7 @@ import {
 } from './Sidebar'
 
 const meta: Meta<typeof Sidebar> = {
-  title: 'Custom/Sidebar',
+  title: 'Components/Organisms/Sidebar',
   component: Sidebar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -42,7 +42,7 @@ const manyUsers: User[] = Array.from({ length: 50 }, (_, i) => ({
 }))
 
 const meta: Meta<typeof Table> = {
-  title: 'Custom/Table',
+  title: 'Components/Organisms/Table',
   component: Table,
   tags: ['autodocs'],
   argTypes: {

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { TimerReadout } from './TimerReadout'
+
+/**
+ * `TimerReadout` — a small textual timer (⏱ + mono, right-justified) built on the
+ * `useTimer` hook. Only the live/current value goes green (status-live-muted) while
+ * `running`; the ` / total` suffix stays dim tertiary.
+ */
+const meta: Meta<typeof TimerReadout> = {
+  title: 'Custom/TimerReadout',
+  component: TimerReadout,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '**Atom.** A small textual timer on [useTimer]. Used-by ↑ SessionHeader.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16, backgroundColor: '#131313', alignItems: 'flex-end', width: 200 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TimerReadout>
+
+/** Live stopwatch (controlled), ticking → the elapsed value is green. */
+export const Running: Story = {
+  args: { mode: 'up', elapsedMs: 42 * 60000 + 18 * 1000, running: true },
+}
+
+/** Paused → the value drops to secondary (no live cue). */
+export const Paused: Story = {
+  args: { mode: 'up', elapsedMs: 42 * 60000 + 18 * 1000, running: false },
+}
+
+/** Countdown, running → shows remaining time, green while live. */
+export const CountdownRunning: Story = {
+  args: { mode: 'down', durationMs: 90 * 1000, elapsedMs: 27 * 1000, running: true },
+}
+
+/** With a ` / total` budget suffix (dim tertiary). */
+export const WithTotal: Story = {
+  args: {
+    mode: 'up',
+    elapsedMs: 42 * 60000 + 18 * 1000,
+    durationMs: 60 * 60000,
+    showTotal: true,
+    running: true,
+  },
+}
+
+/** Self-ticking stopwatch — the internal interval advances the value once per second. */
+export const LiveAutoTick: Story = {
+  args: { mode: 'up', autoTick: true, running: true },
+}

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

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, act } from '@testing-library/react'
+import { TimerReadout } from './TimerReadout'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+
+const semantic = getSemanticColors('dark')
+const LIVE_GREEN = primitiveRamps.green[500]
+const SECONDARY = semantic['text-secondary']
+const TERTIARY = semantic['text-tertiary']
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('TimerReadout', () => {
+  it('renders elapsed mm:ss from a controlled up-timer', () => {
+    render(<TimerReadout mode="up" elapsedMs={65 * 1000} />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('1:05')
+  })
+
+  it('renders the default ⏱ glyph', () => {
+    render(<TimerReadout elapsedMs={0} />)
+    expect(screen.getByTestId('timer-readout-glyph')).toHaveTextContent('⏱')
+  })
+
+  it('accepts a custom glyph', () => {
+    render(<TimerReadout elapsedMs={0} glyph="◷" />)
+    expect(screen.getByTestId('timer-readout-glyph')).toHaveTextContent('◷')
+  })
+
+  it('shows the current value in live green while running', () => {
+    render(<TimerReadout mode="up" elapsedMs={0} running />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveStyle({ color: LIVE_GREEN })
+    expect(screen.getByTestId('timer-readout-glyph')).toHaveStyle({ color: LIVE_GREEN })
+  })
+
+  it('shows the current value in secondary when paused', () => {
+    render(<TimerReadout mode="up" elapsedMs={0} running={false} />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveStyle({ color: SECONDARY })
+  })
+
+  it('shows remaining time in down mode', () => {
+    render(<TimerReadout mode="down" durationMs={90 * 1000} elapsedMs={27 * 1000} running />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('1:03')
+  })
+
+  it('appends the total in dim tertiary when showTotal is set', () => {
+    render(
+      <TimerReadout mode="up" elapsedMs={42 * 1000} durationMs={60 * 60000} showTotal running />
+    )
+    const total = screen.getByTestId('timer-readout-total')
+    expect(total).toHaveTextContent('/ 60:00')
+    expect(total).toHaveStyle({ color: TERTIARY })
+  })
+
+  it('omits the total when showTotal is false', () => {
+    render(<TimerReadout mode="up" elapsedMs={0} durationMs={60000} />)
+    expect(screen.queryByTestId('timer-readout-total')).toBeNull()
+  })
+
+  it('self-ticks once per second while running with autoTick', () => {
+    vi.useFakeTimers()
+    render(<TimerReadout mode="up" autoTick running />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('0:00')
+
+    act(() => {
+      vi.advanceTimersByTime(3000)
+    })
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('0:03')
+  })
+})

package/src/components/custom/TimerReadout/TimerReadout.tsx

@@ -0,0 +1,75 @@
+import { type ReactNode } from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { useTimer, formatDuration, type TimerMode } from '../../../hooks/useTimer'
+import { Typography } from '../Typography'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+
+const semantic = getSemanticColors('dark')
+// status-live-muted — the SideNav "Live" cue; the elapsed value goes green while ticking.
+const LIVE_GREEN = primitiveRamps.green[500]
+const SECONDARY = semantic['text-secondary']
+const TERTIARY = semantic['text-tertiary']
+
+const DEFAULT_GLYPH = '⏱'
+
+export interface TimerReadoutProps extends ViewProps {
+  /** 'up' counts elapsed upward; 'down' counts remaining toward 0. Default 'up'. */
+  mode?: TimerMode
+  /** Controlled elapsed time in ms. When set, the value is derived from it and never self-ticks. */
+  elapsedMs?: number
+  /** Total duration in ms — required for 'down' mode and for the ` / total` suffix. */
+  durationMs?: number
+  /** Live cue: the current value goes green while true. */
+  running?: boolean
+  /** Enable the internal 1s interval (ignored when `elapsedMs` is controlled). */
+  autoTick?: boolean
+  /** When `durationMs` is set, append ` / mm:ss`. */
+  showTotal?: boolean
+  /** Leading glyph; defaults to the ⏱ unicode. */
+  glyph?: ReactNode
+}
+
+/**
+ * Atom · TimerReadout — a small textual timer (⏱ + mono, right-justified) built on
+ * [useTimer]. Matches the TopBar clock treatment: only the live/current value goes
+ * green (status-live-muted) while `running`; the ` / total` suffix stays dim tertiary.
+ */
+export function TimerReadout({
+  mode = 'up',
+  elapsedMs,
+  durationMs,
+  running = false,
+  autoTick = false,
+  showTotal = false,
+  glyph = DEFAULT_GLYPH,
+  className,
+  ...rest
+}: TimerReadoutProps) {
+  const { label } = useTimer({ mode, durationMs, elapsedMs, running, autoTick })
+
+  const currentColor = running ? LIVE_GREEN : SECONDARY
+  const total = showTotal && durationMs != null ? formatDuration(durationMs) : null
+
+  return (
+    <View
+      accessibilityRole="timer"
+      accessibilityLabel={total != null ? `${label} of ${total}` : label}
+      className={cn('flex-row items-baseline justify-end', className)}
+      {...rest}
+    >
+      <Typography variant="mono" style={{ fontSize: 11, textAlign: 'right' }}>
+        <Text testID="timer-readout-glyph" style={{ color: currentColor, marginRight: 3 }}>
+          {glyph}
+        </Text>
+        <Text testID="timer-readout-current" style={{ color: currentColor }}>
+          {label}
+        </Text>
+        {total != null ? (
+          <Text testID="timer-readout-total" style={{ color: TERTIARY }}>{` / ${total}`}</Text>
+        ) : null}
+      </Typography>
+    </View>
+  )
+}

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

@@ -0,0 +1 @@
+export { TimerReadout, type TimerReadoutProps } from './TimerReadout'

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Treemap, type TreemapDatum } from './Treemap'
 
 const meta: Meta<typeof Treemap> = {
-  title: 'Custom/Treemap',
+  title: 'Components/DataViz/Treemap',
   component: Treemap,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Typography, Heading, Paragraph, Caption, Label, Overline } from './Typography'
 
 const meta: Meta<typeof Typography> = {
-  title: 'Custom/Typography',
+  title: 'Foundations/Typography',
   component: Typography,
   tags: ['autodocs'],
   argTypes: {

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

@@ -2,36 +2,45 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ActiveWorkoutPage, type ActiveWorkoutExercise } from './ActiveWorkoutPage'
 import type { SetRowProps } from './SetRow'
 
+const velocities = (base: number): number[] =>
+  Array.from({ length: 8 }, (_, i) => Number((base - i * 0.03).toFixed(2)))
+
+// logged sets are done; the next set is being performed (live, a couple reps in);
+// the remainder are planned todo. Mirrors an active workout mid-set.
 function activeSets(weight: number, logged: number, total: number): SetRowProps[] {
   return Array.from({ length: total }, (_, i) => {
     const setNumber = i + 1
     if (setNumber <= logged) {
       return {
-        mode: 'completed' as const,
+        state: 'done' as const,
         setNumber,
-        previous: { reps: 8, weight: weight - 5 },
         reps: 8,
         weight,
         rpe: 7.5 + setNumber * 0.5,
         unit: 'lbs' as const,
+        velocities: velocities(0.74 - (setNumber - 1) * 0.03),
+      }
+    }
+    if (setNumber === logged + 1) {
+      return {
+        state: 'live' as const,
+        setNumber,
+        unit: 'lbs' as const,
+        target: { reps: 8, weight },
+        reps: 8,
+        weight,
+        velocities: velocities(0.7).slice(0, 3),
       }
     }
     return {
-      mode: 'active' as const,
+      state: 'todo' as const,
       setNumber,
-      previous: { reps: 8, weight: weight - 5 },
-      reps: null,
-      weight: null,
       unit: 'lbs' as const,
-      isNextSet: setNumber === logged + 1,
-      targets: { reps: 8, weight },
+      target: { reps: 8, weight },
     }
   })
 }
 
-const velocities = (base: number): number[] =>
-  Array.from({ length: 8 }, (_, i) => Number((base - i * 0.03).toFixed(2)))
-
 const exercises: ActiveWorkoutExercise[] = [
   {
     id: 'warmup',
@@ -48,7 +57,6 @@ const exercises: ActiveWorkoutExercise[] = [
     status: 'active',
     unit: 'lbs',
     totalPlannedSets: 4,
-    e1rm: { value: 248, unit: 'lbs' },
     tempo: [3, 1, 1, 0],
     setVelocities: [velocities(0.72), velocities(0.68)],
     sets: activeSets(195, 2, 4),
@@ -85,7 +93,7 @@ const exercises: ActiveWorkoutExercise[] = [
 ]
 
 const meta: Meta<typeof ActiveWorkoutPage> = {
-  title: 'Custom/Workout/ActiveWorkoutPage',
+  title: 'Pages/Active Workout',
   component: ActiveWorkoutPage,
   parameters: { layout: 'fullscreen' },
   tags: ['autodocs'],