@titan-design/react-ui 0.6.0 → 0.8.0

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { MetricCell } from './metricText'
+
+/**
+ * `MetricCell` — the shared "segmented metric" typography primitive (Inter · 600 ·
+ * letter-spacing 1). Value cells take a primary color, separators a muted one. The
+ * single source of the value/separator look shared by SetsRepsLoad and TempoDisplay.
+ */
+const meta: Meta<typeof MetricCell> = {
+  title: 'Workout/MetricCell',
+  component: MetricCell,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Primitive.** The shared Inter·600·letter-spacing-1 value/separator cell. ' +
+          'Extracted so the two prescription readouts read as one visual language instead of ' +
+          'drifting copies. Used-by ↑ ' +
+          '[SetsRepsLoad](?path=/docs/workout-setsrepsload--docs) + ' +
+          '[TempoDisplay](?path=/docs/workout-tempodisplay--docs).',
+      },
+    },
+  },
+  argTypes: {
+    color: { control: 'color' },
+    fontSize: { control: { type: 'range', min: 9, max: 24, step: 1 } },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 20, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof MetricCell>
+
+export const ValueCell: Story = {
+  args: { children: '145', color: '#F3F4F6', fontSize: 11 },
+}
+
+export const Separator: Story = {
+  args: { children: '×', color: '#6B7280', fontSize: 11 },
+  parameters: { docs: { description: { story: 'A muted separator cell (× / @ / -).' } } },
+}
+
+export const InContext: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
+      <MetricCell color="#F3F4F6">5</MetricCell>
+      <MetricCell color="#6B7280">&nbsp;×&nbsp;</MetricCell>
+      <MetricCell color="#F3F4F6">8</MetricCell>
+      <MetricCell color="#6B7280">&nbsp;@&nbsp;</MetricCell>
+      <MetricCell color="#F3F4F6">145</MetricCell>
+      <MetricCell color="#6B7280">&nbsp;lb</MetricCell>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Value + separator cells composed into the sets × reps @ load language.',
+      },
+    },
+  },
+}

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

@@ -0,0 +1,34 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { ReactNode } from 'react'
+import { Text } from 'react-native'
+
+/**
+ * Shared "segmented metric" typography primitive — the Inter · 600 · letter-spacing 1
+ * value/separator cell used by both {@link TempoDisplay} (tempo digits + dashes) and
+ * {@link SetsRepsLoad} (sets × reps @ load). Extracted so the two read as one visual
+ * language instead of drifting copies.
+ */
+export const METRIC_FONT = 'Inter, sans-serif'
+
+export interface MetricCellProps {
+  children: ReactNode
+  /** Cell text color — value cells take a primary color, separators a muted one. */
+  color: string
+  fontSize?: number
+}
+
+export function MetricCell({ children, color, fontSize = 11 }: MetricCellProps) {
+  return (
+    <Text
+      style={{
+        fontFamily: METRIC_FONT,
+        fontSize,
+        color,
+        fontWeight: '600',
+        letterSpacing: 1,
+      }}
+    >
+      {children}
+    </Text>
+  )
+}

package/src/components/custom/Workout/paceTone.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import { paceTone, paceToneColor } from './paceTone'
+
+describe('paceTone', () => {
+  it('reads as neutral when there is no target', () => {
+    expect(paceTone(0.6)).toBe('neutral')
+    expect(paceTone(0)).toBe('neutral')
+  })
+
+  it('reads as ahead when progress equals the target (inclusive)', () => {
+    expect(paceTone(0.5, 0.5)).toBe('ahead')
+  })
+
+  it('reads as ahead when progress is past the target', () => {
+    expect(paceTone(0.8, 0.5)).toBe('ahead')
+  })
+
+  it('reads as behind when progress trails the target', () => {
+    expect(paceTone(0.3, 0.5)).toBe('behind')
+  })
+
+  describe('paceToneColor', () => {
+    it('maps each tone to its real titan literal hex', () => {
+      expect(paceToneColor('ahead')).toBe('#2ED573') // status-success (green 300)
+      expect(paceToneColor('behind')).toBe('#F9B415') // status-warning (amber 300)
+      expect(paceToneColor('neutral')).toBe('#01B5D1') // cyan 400
+    })
+  })
+})

package/src/components/custom/Workout/paceTone.ts

@@ -0,0 +1,27 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+/** How progress compares to its target pace: `ahead`, `behind`, or `neutral` (no target). */
+export type PaceTone = 'ahead' | 'behind' | 'neutral'
+
+/**
+ * Classify `progress` (0..1) against an optional `target` (0..1). No target reads
+ * as `neutral`; at or past target is `ahead`, otherwise `behind`.
+ */
+export function paceTone(progress: number, target?: number): PaceTone {
+  if (target === undefined) return 'neutral'
+  return progress >= target ? 'ahead' : 'behind'
+}
+
+/** Literal-hex fill for each tone (RNW-safe): success · warning · cyan pin. */
+const PACE_TONE_COLORS: Record<PaceTone, string> = {
+  ahead: getSemanticColors('dark')['status-success'],
+  behind: getSemanticColors('dark')['status-warning'],
+  neutral: primitiveRamps.cyan[400],
+}
+
+/** The literal-hex colour for a tone. */
+export function paceToneColor(tone: PaceTone): string {
+  return PACE_TONE_COLORS[tone]
+}

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

@@ -0,0 +1,177 @@
+/**
+ * Shared kit for the S3 Session-Rail explorations (NOT a stories file — imported by the sheets under
+ * `Custom/Workout/Explorations/*`). Throwaway CSS R&D at the real 232px rail width, on real titan tokens.
+ * When these decisions harden they move into the real `ExerciseCard` + a titan `SessionRail` organism.
+ */
+import type { ReactNode } from 'react'
+import { TempoDisplay } from './TempoDisplay'
+
+// ---- geometry
+export const RAIL_W = 232
+export const SET_GAP = 5
+
+// ---- surface + text tokens (dark theme; charcoal + neutral ramps)
+export const GREY = '#2C2C2C' // charcoal 300 — upcoming/placeholder
+export const BORDER_SUBTLE = '#1C1C1C' // charcoal 500 — row dividers
+export const T_PRIMARY = '#F3F4F6' // neutral 100
+export const T_SECONDARY = '#9CA3AF' // neutral 400
+export const T_TERTIARY = '#6B7280' // neutral 500
+export const RAISED = '#1F1F1F' // charcoal 400 — nav + heading raised plane
+export const INSET = '#131313' // charcoal 800 — sunk exercise-list column
+// depth lives on the sunk list: inner shadow from the heading (top) + nav (left). Raised plane is flat.
+export const INSET_SHADOW =
+  'inset 0 9px 12px -6px rgba(0,0,0,0.85), inset 7px 0 10px -6px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.02)'
+
+// ---- zone colors = real titan ramp pins (primitiveRamps)
+export const RED = '#D14343' // red 600
+export const ORANGE = '#FF7900' // orange 400
+export const AMBER = '#F9B415' // amber 300
+export const GREEN = '#2ED573' // green 300
+export const velColor = (v: number): string => (v < 0.5 ? RED : v < 0.75 ? ORANGE : v < 1.0 ? AMBER : GREEN)
+
+// active-set pulse: each segment eases along its own ramp (adjacent lighter/darker steps) through the pin.
+export const PULSE_CSS = `
+@keyframes s3pRed{0%,100%{background:#E05254}50%{background:#A4221C}}
+@keyframes s3pOrange{0%,100%{background:#FFA063}50%{background:#DA5F00}}
+@keyframes s3pAmber{0%,100%{background:#FFD352}50%{background:#E08C00}}
+@keyframes s3pGreen{0%,100%{background:#58F69E}50%{background:#21C05D}}`
+export const pulseAnim = (c: string): string | undefined => {
+  const name = c === RED ? 's3pRed' : c === ORANGE ? 's3pOrange' : c === AMBER ? 's3pAmber' : c === GREEN ? 's3pGreen' : null
+  return name ? `${name} 1.9s ease-in-out infinite` : undefined
+}
+
+// ---- sets/reps/load in the TempoDisplay visual language (Inter · 600 · letter-spacing 1 · gray separators)
+const INTER = 'Inter, sans-serif'
+const SRL_SEP = '#6B7280'
+function SRLCell({ children, color = T_PRIMARY }: { children: ReactNode; color?: string }) {
+  return <span style={{ fontFamily: INTER, fontSize: 11, fontWeight: 600, letterSpacing: 1, color }}>{children}</span>
+}
+export function SetsRepsLoad({ sets, reps, load, unit = 'lb' }: { sets: number; reps: number | string; load: number; unit?: string }) {
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'baseline', whiteSpace: 'nowrap' }}>
+      <SRLCell>{sets}</SRLCell>
+      <SRLCell color={SRL_SEP}>&nbsp;×&nbsp;</SRLCell>
+      <SRLCell>{reps}</SRLCell>
+      <SRLCell color={SRL_SEP}>&nbsp;@&nbsp;</SRLCell>
+      <SRLCell>{load}</SRLCell>
+      <SRLCell color={SRL_SEP}>&nbsp;{unit}</SRLCell>
+    </span>
+  )
+}
+
+// ---- per-set bar: one continuous bar, rep intensities as butted segments (no gaps); active segments pulse
+export type SetState = { status: 'done'; reps: number[] } | { status: 'active'; reps: number[]; planned: number } | { status: 'todo'; planned: number }
+export function setColors(s: SetState): string[] {
+  if (s.status === 'todo') return [GREY]
+  if (s.status === 'done') return s.reps.map(velColor)
+  return [...s.reps.map(velColor), ...Array(Math.max(0, s.planned - s.reps.length)).fill(GREY)]
+}
+function SetBar({ colors, h, pulse }: { colors: string[]; h: number; pulse?: boolean }) {
+  return (
+    <div style={{ display: 'flex', flex: 1, minWidth: 0, height: h, borderRadius: 2, overflow: 'hidden' }}>
+      {colors.map((c, i) => (
+        <div key={i} style={{ flex: 1, height: '100%', background: c, animation: pulse && c !== GREY ? pulseAnim(c) : undefined }} />
+      ))}
+    </div>
+  )
+}
+export function SetStrip({ sets, h }: { sets: SetState[]; h: number }) {
+  return (
+    <div style={{ display: 'flex', width: '100%', height: h, gap: SET_GAP }}>
+      {sets.map((s, i) => (
+        <SetBar key={i} colors={setColors(s)} h={h} pulse={s.status === 'active'} />
+      ))}
+    </div>
+  )
+}
+
+export function Indicator({ kind }: { kind: 'pr' | 'issue' | 'info' }) {
+  const map = { pr: ['★', ORANGE], issue: ['!', RED], info: ['i', '#2196F3'] } as const
+  const [glyph, color] = map[kind]
+  return (
+    <span style={{ width: 16, height: 16, borderRadius: 8, border: `1px solid ${color}`, color, fontSize: 10, fontWeight: 800, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{glyph}</span>
+  )
+}
+
+const labelStyle = { fontSize: 14, fontWeight: 800, color: T_PRIMARY } as const
+
+// ---- the finalized heading unit
+export type Exercise = { name: string; sets: number; reps: number | string; load: number; tempo: [number, number, number, number]; indicator?: 'pr' | 'issue' | 'info'; setStates: SetState[]; upcoming?: boolean }
+export function Heading({ ex, stripH }: { ex: Exercise; stripH: number }) {
+  return (
+    <div style={{ padding: '9px 12px', display: 'flex', flexDirection: 'column', opacity: ex.upcoming ? 0.55 : 1 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span style={labelStyle}>{ex.name}</span>
+        <div style={{ flex: 1 }} />
+        {ex.indicator && <Indicator kind={ex.indicator} />}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 1 }}>
+        <SetsRepsLoad sets={ex.sets} reps={ex.reps} load={ex.load} />
+        <div style={{ flex: 1 }} />
+        <TempoDisplay tempo={ex.tempo} size="sm" showLabel={false} showInfo={false} />
+      </div>
+      <div style={{ marginTop: 7 }}>
+        <SetStrip sets={ex.setStates} h={stripH} />
+      </div>
+    </div>
+  )
+}
+
+// ---- sample session (per-rep mean velocities; sets fatigue across the workout, reps decay in-set)
+export const reps = (n: number, start: number, span = 0.4): number[] => Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
+export const SESSION: Exercise[] = [
+  { name: 'Seated Cable Row', sets: 5, reps: 8, load: 145, tempo: [3, 1, 2, 0], indicator: 'pr', setStates: [1.0, 0.9, 0.8, 0.7, 0.6].map((s) => ({ status: 'done', reps: reps(8, s) })) },
+  { name: 'Incline DB Press', sets: 3, reps: 8, load: 70, tempo: [3, 0, 3, 0], setStates: [0.72, 0.62, 0.54].map((s) => ({ status: 'done', reps: reps(8, s) })) },
+  { name: 'Cable Chest Press', sets: 3, reps: 10, load: 90, tempo: [2, 1, 2, 0], indicator: 'info', setStates: [{ status: 'done', reps: reps(10, 0.72) }, { status: 'active', reps: reps(5, 0.62), planned: 10 }, { status: 'todo', planned: 10 }] },
+  { name: 'Standing Calf Raise', sets: 5, reps: 20, load: 25, tempo: [2, 1, 2, 0], upcoming: true, setStates: [1, 2, 3, 4, 5].map(() => ({ status: 'todo', planned: 20 })) },
+  { name: 'Face Pull', sets: 3, reps: '15-20', load: 40, tempo: [2, 1, 2, 0], upcoming: true, setStates: [1, 2, 3].map(() => ({ status: 'todo', planned: 18 })) },
+]
+
+// ---- shell chrome (neumorphic): flat raised nav + heading plane; sunk inset exercise list
+export function NavStub() {
+  return (
+    <div style={{ width: 60, alignSelf: 'stretch', position: 'relative', zIndex: 2, background: RAISED, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 12, gap: 8 }}>
+      {['Live', 'Plan', 'Body'].map((t) => (
+        <span key={t} style={{ fontSize: 8, color: T_TERTIARY, fontWeight: 700 }}>{t}</span>
+      ))}
+    </div>
+  )
+}
+export function Rail({ stripH, footer }: { stripH: number; footer?: ReactNode }) {
+  return (
+    <div style={{ width: 246, background: INSET, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ position: 'relative', zIndex: 2, padding: '11px 12px 10px', background: RAISED }}>
+        <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase', color: T_TERTIARY, display: 'flex', alignItems: 'center', gap: 5 }}>
+          <span style={{ width: 6, height: 6, borderRadius: 3, background: GREEN }} />
+          Live session
+        </div>
+        <div style={{ fontSize: 14, fontWeight: 800, marginTop: 3, color: T_PRIMARY }}>Pull A · Intensification</div>
+        <div style={{ fontSize: 10, color: T_SECONDARY, marginTop: 2, fontFamily: 'monospace' }}>ex 3/5 · set 2 live</div>
+      </div>
+      <div style={{ flex: 1, background: INSET, boxShadow: INSET_SHADOW }}>
+        {SESSION.map((ex, i) => (
+          <div key={i} style={{ borderBottom: i < SESSION.length - 1 ? `1px solid ${BORDER_SUBTLE}` : undefined }}>
+            <Heading ex={ex} stripH={stripH} />
+          </div>
+        ))}
+      </div>
+      {footer}
+    </div>
+  )
+}
+
+// ---- page scaffold shared by the sheets
+export function Page({ title, note, children }: { title: string; note: string; children: ReactNode }) {
+  return (
+    <div style={{ minHeight: '100vh', background: '#0A0A0A', color: T_PRIMARY, padding: 28, display: 'flex', flexDirection: 'column', gap: 22, fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
+      <style>{PULSE_CSS}</style>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <span style={{ fontSize: 20, fontWeight: 800 }}>{title}</span>
+        <span style={{ fontSize: 12, color: T_SECONDARY, maxWidth: 820 }}>{note}</span>
+      </div>
+      {children}
+    </div>
+  )
+}
+export const sectionTitle = { fontSize: 11, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: ORANGE } as const
+export const monoTag = { fontFamily: 'monospace', fontSize: 11, color: T_SECONDARY } as const

package/src/components/custom/index.ts

@@ -5,6 +5,8 @@ export * from './Table'
 export * from './EmptyState'
 export * from './stepper'
 export * from './DateTime'
+export * from './TimerReadout'
+export * from './CircularTimer'
 export * from './Metric'
 export * from './Workout'
 export * from './Treemap'

package/src/components/custom/stepper/Stepper.stories.tsx

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

package/src/components/icons/icons.stories.tsx

@@ -1,10 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import type { ReactNode } from 'react'
 import { View, Text } from 'react-native'
-import { VoltrasMark, BluetoothIcon, DumbbellIcon, StarIcon } from './icons'
+import {
+  VoltrasMark,
+  BluetoothIcon,
+  DumbbellIcon,
+  StarIcon,
+  ActivityIcon,
+  HistoryIcon,
+  LayersIcon,
+  PersonStandingIcon,
+  ScaleIcon,
+  AlertTriangleIcon,
+  TrendingDownIcon,
+  CircleSlashIcon,
+  AwardIcon,
+  InfoIcon,
+} from './icons'
 
 const meta: Meta = {
-  title: 'Icons',
+  title: 'Foundations/Icons',
   tags: ['autodocs'],
   parameters: {
     docs: {
@@ -52,6 +67,56 @@ export const All: Story = {
           <StarIcon size={28} fill="currentColor" />
         </View>
       </Swatch>
+      <Swatch label="ActivityIcon">
+        <View className="text-text-primary">
+          <ActivityIcon size={28} />
+        </View>
+      </Swatch>
+      <Swatch label="HistoryIcon">
+        <View className="text-text-primary">
+          <HistoryIcon size={28} />
+        </View>
+      </Swatch>
+      <Swatch label="LayersIcon">
+        <View className="text-text-primary">
+          <LayersIcon size={28} />
+        </View>
+      </Swatch>
+      <Swatch label="PersonStandingIcon">
+        <View className="text-text-primary">
+          <PersonStandingIcon size={28} />
+        </View>
+      </Swatch>
+      <Swatch label="ScaleIcon">
+        <View className="text-status-error">
+          <ScaleIcon size={28} />
+        </View>
+      </Swatch>
+      <Swatch label="AlertTriangleIcon">
+        <View className="text-status-error">
+          <AlertTriangleIcon size={28} />
+        </View>
+      </Swatch>
+      <Swatch label="TrendingDownIcon">
+        <View className="text-status-warning">
+          <TrendingDownIcon size={28} />
+        </View>
+      </Swatch>
+      <Swatch label="CircleSlashIcon">
+        <View className="text-status-warning">
+          <CircleSlashIcon size={28} />
+        </View>
+      </Swatch>
+      <Swatch label="AwardIcon">
+        <View className="text-status-success">
+          <AwardIcon size={28} />
+        </View>
+      </Swatch>
+      <Swatch label="InfoIcon">
+        <View className="text-status-info">
+          <InfoIcon size={28} />
+        </View>
+      </Swatch>
     </View>
   ),
 }

package/src/components/icons/icons.test.tsx

@@ -1,12 +1,42 @@
 import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
-import { VoltrasMark, BluetoothIcon, DumbbellIcon, StarIcon } from './icons'
+import {
+  VoltrasMark,
+  BluetoothIcon,
+  DumbbellIcon,
+  StarIcon,
+  ActivityIcon,
+  HistoryIcon,
+  LayersIcon,
+  PersonStandingIcon,
+  ScaleIcon,
+  AlertTriangleIcon,
+  TrendingDownIcon,
+  CircleSlashIcon,
+  AwardIcon,
+  InfoIcon,
+} from './icons'
 import { SvgIcon } from './SvgIcon'
 
 describe('icon primitives', () => {
   it('every icon renders an svg', () => {
-    ;[VoltrasMark, BluetoothIcon, DumbbellIcon, StarIcon].forEach((Icon) => {
+    ;[
+      VoltrasMark,
+      BluetoothIcon,
+      DumbbellIcon,
+      StarIcon,
+      ActivityIcon,
+      HistoryIcon,
+      LayersIcon,
+      PersonStandingIcon,
+      ScaleIcon,
+      AlertTriangleIcon,
+      TrendingDownIcon,
+      CircleSlashIcon,
+      AwardIcon,
+      InfoIcon,
+    ].forEach((Icon) => {
       const { container, unmount } = render(<Icon />)
       expect(container.querySelector('svg')).toBeInTheDocument()
       unmount()

package/src/components/icons/icons.tsx

@@ -43,3 +43,111 @@ export function StarIcon(props: IconProps) {
     </SvgIcon>
   )
 }
+
+/** Activity / pulse-line glyph (mirrors lucide-react `Activity`). Shell S2 nav → Live. */
+export function ActivityIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+    </SvgIcon>
+  )
+}
+
+/** History / clock-arrow glyph (mirrors lucide-react `History`). Shell S2 nav → Review. */
+export function HistoryIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+      <path d="M3 3v5h5" />
+      <path d="M12 7v5l4 2" />
+    </SvgIcon>
+  )
+}
+
+/** Layers / stack glyph (mirrors lucide-react `Layers`). Shell S2 nav → Program (mesocycle stack). */
+export function LayersIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" />
+      <path d="m6.08 9.5-3.49 1.59a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59" />
+      <path d="m6.08 14.5-3.49 1.59a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59" />
+    </SvgIcon>
+  )
+}
+
+/** Standing-figure glyph (mirrors lucide-react `PersonStanding`). Shell S2 nav → Body (muscle map). */
+export function PersonStandingIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <circle cx="12" cy="5" r="1" />
+      <path d="m9 20 3-6 3 6" />
+      <path d="m6 8 6 2 6-2" />
+      <path d="M12 10v4" />
+    </SvgIcon>
+  )
+}
+
+/** Balance-scale glyph (mirrors lucide-react `Scale`). ExerciseIndicator → `imbalance`. */
+export function ScaleIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" />
+      <path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" />
+      <path d="M7 21h10" />
+      <path d="M12 3v18" />
+      <path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" />
+    </SvgIcon>
+  )
+}
+
+/** Warning-triangle glyph (mirrors lucide-react `AlertTriangle`). ExerciseIndicator → `overshoot`. */
+export function AlertTriangleIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
+      <path d="M12 9v4" />
+      <path d="M12 17h.01" />
+    </SvgIcon>
+  )
+}
+
+/** Down-trend glyph (mirrors lucide-react `TrendingDown`). ExerciseIndicator → `velocity-loss`. */
+export function TrendingDownIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M16 17h6v-6" />
+      <path d="m22 17-8.5-8.5-5 5L2 7" />
+    </SvgIcon>
+  )
+}
+
+/** Slashed-circle glyph (mirrors lucide-react `CircleSlash`). ExerciseIndicator → `missed-reps`. */
+export function CircleSlashIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <circle cx="12" cy="12" r="10" />
+      <path d="m9 15 6-6" />
+    </SvgIcon>
+  )
+}
+
+/** Medal glyph (mirrors lucide-react `Award`). ExerciseIndicator → `pr`. */
+export function AwardIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" />
+      <circle cx="12" cy="8" r="6" />
+    </SvgIcon>
+  )
+}
+
+/** Info-circle glyph (mirrors lucide-react `Info`). ExerciseIndicator → `info`. */
+export function InfoIcon(props: IconProps) {
+  return (
+    <SvgIcon {...props}>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4" />
+      <path d="M12 8h.01" />
+    </SvgIcon>
+  )
+}

package/src/components/shell/BrandLockup.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { BrandLockup } from './BrandLockup'
 
 const meta: Meta<typeof BrandLockup> = {
-  title: 'Shell/TopBar/BrandLockup',
+  title: 'Shell/BrandLockup',
   component: BrandLockup,
   tags: ['autodocs'],
   args: { subtitle: 'wall dashboard', showSubtitle: true },
@@ -14,8 +14,8 @@ const meta: Meta<typeof BrandLockup> = {
     docs: {
       description: {
         component:
-          '**Molecule.** Composes [VoltrasMark](?path=/docs/icons--docs) (icon) + ' +
-          '[Typography](?path=/docs/custom-typography--docs) (wordmark + subtitle). ' +
+          '**Molecule.** Composes [VoltrasMark](?path=/docs/foundations-icons--docs) (icon) + ' +
+          '[Typography](?path=/docs/foundations-typography--docs) (wordmark + subtitle). ' +
           'Toggle `showSubtitle` to see the responsive collapse.',
       },
     },