@titan-design/react-ui 0.7.0 → 0.9.0

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

@@ -13,16 +13,8 @@ export {
   type TempoDisplayProps,
   type TempoLivePhase,
   type TempoLiveState,
+  type TempoLiveReadout,
 } from './TempoDisplay'
-export {
-  TempoBar,
-  type TempoBarProps,
-  type TempoPhaseKey,
-  type TempoPacingState,
-  TEMPO_PACING,
-  getTempoPacingState,
-  getTempoFillPct,
-} from './TempoBar'
 export { DeviationBar, type DeviationBarProps } from './DeviationBar'
 export { IntensityBar, type IntensityBarProps } from './IntensityBar'
 export { WorkoutPill, type WorkoutPillProps, type WorkoutPillStatus } from './WorkoutPill'

package/src/components/custom/index.ts

@@ -6,6 +6,7 @@ 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/ui/alert/Alert.stories.tsx

@@ -1,11 +1,25 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
 import { Alert, AlertTitle, AlertDescription } from './Alert'
 
 const meta: Meta<typeof Alert> = {
   title: 'Components/Molecules/Alert',
   component: Alert,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Status callout across 4 statuses (success/info/warning/error) × 3 variants ' +
+          '(subtle/outline/solid). Two densities via `size`: `default` — the padded ' +
+          'icon + title/description block; `compact` — a single-line **cue pill** (tighter, ' +
+          'center-aligned, hairline status border on `subtle`) that absorbs the R2 `CueFlag` ' +
+          'live-coaching cue. Pass `size="compact"` + `message="…"` for the batteries-included ' +
+          "status-colored one-liner (RN doesn't cascade text color, so the `message` prop " +
+          'colors it for you). Use `<AlertTitle>` / `<AlertDescription>` children for richer content.',
+      },
+    },
+  },
   argTypes: {
     status: {
       control: 'select',
@@ -15,6 +29,11 @@ const meta: Meta<typeof Alert> = {
       control: 'select',
       options: ['subtle', 'outline', 'solid'],
     },
+    size: {
+      control: 'inline-radio',
+      options: ['default', 'compact'],
+    },
+    message: { control: 'text' },
     showIcon: { control: 'boolean' },
   },
 }
@@ -152,3 +171,67 @@ export const DescriptionOnly: Story = {
     </Alert>
   ),
 }
+
+// --- Compact cue pill (absorbs CueFlag) --------------------------------------
+// The across-the-room live coaching cue. Rendered on the north-star wall background
+// so the tinted + bordered pill reads the way it will live.
+
+/** Wall-background frame for the compact cue stories. */
+const wall: Decorator = (Story) => (
+  <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+    <Story />
+  </View>
+)
+
+/** Compact warning cue — the VL20 approach-threshold flag (batteries-included `message`). */
+export const CompactWarningCue: Story = {
+  args: {
+    status: 'warning',
+    variant: 'subtle',
+    size: 'compact',
+    message: 'VL20 · target reps met — final rep or end the set.',
+  },
+  decorators: [wall],
+}
+
+/** Compact error cue — the stop-now flag. */
+export const CompactErrorCue: Story = {
+  args: {
+    status: 'error',
+    variant: 'subtle',
+    size: 'compact',
+    message: 'Velocity loss 31% — end the set now.',
+  },
+  decorators: [wall],
+}
+
+/** The consumption target: the north-star live cue (interpolated loss). */
+export const CompactLiveCue: Story = {
+  args: {
+    status: 'warning',
+    variant: 'subtle',
+    size: 'compact',
+    message: 'Approaching threshold · 18% velocity loss — one or two reps left.',
+  },
+  decorators: [wall],
+}
+
+/** Default vs compact, side by side, for the density comparison. */
+export const DefaultVsCompact: Story = {
+  render: () => (
+    <View style={{ gap: 16, width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+      <Text style={{ color: '#5A5A5A', fontSize: 10, fontWeight: '700' }}>DEFAULT</Text>
+      <Alert status="warning" variant="subtle">
+        <AlertTitle>Approaching threshold</AlertTitle>
+        <AlertDescription>18% velocity loss — one or two reps left in the band.</AlertDescription>
+      </Alert>
+      <Text style={{ color: '#5A5A5A', fontSize: 10, fontWeight: '700' }}>COMPACT (cue pill)</Text>
+      <Alert
+        status="warning"
+        variant="subtle"
+        size="compact"
+        message="Approaching threshold · 18% velocity loss — reps left in band."
+      />
+    </View>
+  ),
+}

package/src/components/ui/alert/Alert.test.tsx

@@ -200,3 +200,55 @@ describe('Alert', () => {
     })
   })
 })
+
+describe('Alert compact cue (absorbs CueFlag)', () => {
+  it('renders the message as content (batteries-included cue)', () => {
+    render(<Alert status="warning" size="compact" message="VL20 · end the set" />)
+    expect(screen.getByTestId('alert-message')).toHaveTextContent('VL20 · end the set')
+  })
+
+  it('renders the message alongside a status glyph and the alert role', () => {
+    render(<Alert status="error" size="compact" message="Stop now" />)
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+    expect(screen.getByText('✕')).toBeInTheDocument()
+    expect(screen.getByText('Stop now')).toBeInTheDocument()
+  })
+
+  it('renders message in the default size too', () => {
+    render(<Alert status="info" message="Heads up" />)
+    expect(screen.getByTestId('alert-message')).toHaveTextContent('Heads up')
+  })
+
+  it('renders children after the message when both are given', () => {
+    render(
+      <Alert status="warning" size="compact" message="Cue line">
+        <AlertDescription>Extra detail</AlertDescription>
+      </Alert>
+    )
+    expect(screen.getByTestId('alert-message')).toHaveTextContent('Cue line')
+    expect(screen.getByText('Extra detail')).toBeInTheDocument()
+  })
+
+  it('omits the message node when no message is passed', () => {
+    render(
+      <Alert status="warning" size="compact">
+        <AlertDescription>Just children</AlertDescription>
+      </Alert>
+    )
+    expect(screen.queryByTestId('alert-message')).not.toBeInTheDocument()
+    expect(screen.getByText('Just children')).toBeInTheDocument()
+  })
+
+  it('still respects showIcon=false in compact', () => {
+    render(<Alert status="warning" size="compact" message="No icon cue" showIcon={false} />)
+    expect(screen.queryByText('⚠')).not.toBeInTheDocument()
+    expect(screen.getByText('No icon cue')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations as a compact cue', async () => {
+    const { container } = render(
+      <Alert status="warning" size="compact" message="VL20 · target reps met — end the set." />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/ui/alert/Alert.tsx

@@ -4,12 +4,29 @@ import { cn } from '../../../utils/cn'
 
 export type AlertStatus = 'success' | 'info' | 'warning' | 'error'
 export type AlertVariant = 'subtle' | 'outline' | 'solid'
+export type AlertSize = 'default' | 'compact'
 
 export interface AlertProps extends ViewProps {
   /** Alert status type */
   status?: AlertStatus
   /** Visual variant */
   variant?: AlertVariant
+  /**
+   * Density. `default` — the padded callout (icon + title/description block).
+   * `compact` — a single-line **cue pill** (tighter padding, center-aligned, and a
+   * hairline status border on the `subtle` variant): the across-the-room live coaching
+   * cue (absorbs the R2 `CueFlag` — e.g. a velocity-loss threshold warning). Pair with
+   * the {@link message} prop for the batteries-included colored one-liner.
+   */
+  size?: AlertSize
+  /**
+   * Convenience single-line content: renders as **status-colored, bold** text (white on
+   * `solid`) — the batteries-included cue message, so a `compact` cue is just
+   * `<Alert status="warning" size="compact" message="VL20 · …" />` with no need to
+   * hand-color the text (RN doesn't cascade color). Renders before {@link children},
+   * which stay available for richer content.
+   */
+  message?: string
   /** Custom icon element */
   icon?: React.ReactNode
   /** Whether to show the default icon */
@@ -21,17 +38,22 @@ export interface AlertProps extends ViewProps {
   children?: React.ReactNode
 }
 
-const statusColors: Record<AlertStatus, {
-  subtle: string
-  outline: string
-  solid: string
-  icon: string
-  text: string
-}> = {
+const statusColors: Record<
+  AlertStatus,
+  {
+    subtle: string
+    outline: string
+    solid: string
+    border: string
+    icon: string
+    text: string
+  }
+> = {
   success: {
     subtle: 'bg-status-success-subtle',
     outline: 'border-2 border-status-success bg-transparent',
     solid: 'bg-status-success',
+    border: 'border-status-success',
     icon: 'text-status-success',
     text: 'text-status-success',
   },
@@ -39,6 +61,7 @@ const statusColors: Record<AlertStatus, {
     subtle: 'bg-status-info-subtle',
     outline: 'border-2 border-status-info bg-transparent',
     solid: 'bg-status-info',
+    border: 'border-status-info',
     icon: 'text-status-info',
     text: 'text-status-info',
   },
@@ -46,6 +69,7 @@ const statusColors: Record<AlertStatus, {
     subtle: 'bg-status-warning-subtle',
     outline: 'border-2 border-status-warning bg-transparent',
     solid: 'bg-status-warning',
+    border: 'border-status-warning',
     icon: 'text-status-warning',
     text: 'text-status-warning',
   },
@@ -53,6 +77,7 @@ const statusColors: Record<AlertStatus, {
     subtle: 'bg-status-error-subtle',
     outline: 'border-2 border-status-error bg-transparent',
     solid: 'bg-status-error',
+    border: 'border-status-error',
     icon: 'text-status-error',
     text: 'text-status-error',
   },
@@ -82,6 +107,8 @@ const defaultIcons: Record<AlertStatus, string> = {
 export function Alert({
   status = 'info',
   variant = 'subtle',
+  size = 'default',
+  message,
   icon,
   showIcon = true,
   onClose,
@@ -91,23 +118,30 @@ export function Alert({
 }: AlertProps) {
   const colors = statusColors[status]
   const isSolid = variant === 'solid'
+  const isCompact = size === 'compact'
 
   return (
     <View
       accessibilityRole="alert"
       className={cn(
-        'flex-row items-start p-4 rounded-lg',
+        isCompact
+          ? 'flex-row items-center px-3 py-2 rounded-lg'
+          : 'flex-row items-start p-4 rounded-lg',
         colors[variant],
+        // A compact `subtle` pill gets a hairline status border so it reads as a
+        // defined cue on a dark wall (the CueFlag look); other variants carry their own.
+        isCompact && variant === 'subtle' && cn('border', colors.border),
         className
       )}
       {...props}
     >
       {showIcon && (
-        <View className="mr-3 mt-0.5">
+        <View className={isCompact ? 'mr-2' : 'mr-3 mt-0.5'}>
           {icon || (
             <Text
               className={cn(
-                'text-lg font-bold',
+                'font-bold',
+                isCompact ? 'text-base' : 'text-lg',
                 isSolid ? 'text-white' : colors.icon
               )}
             >
@@ -118,6 +152,14 @@ export function Alert({
       )}
 
       <View className="flex-1">
+        {message != null && (
+          <Text
+            className={cn('text-sm font-semibold', isSolid ? 'text-white' : colors.text)}
+            testID="alert-message"
+          >
+            {message}
+          </Text>
+        )}
         {children}
       </View>
 
@@ -146,11 +188,7 @@ export interface AlertTitleProps {
  * Title for Alert component.
  */
 export function AlertTitle({ children, className }: AlertTitleProps) {
-  return (
-    <Text className={cn('font-semibold text-text-primary mb-1', className)}>
-      {children}
-    </Text>
-  )
+  return <Text className={cn('font-semibold text-text-primary mb-1', className)}>{children}</Text>
 }
 
 export interface AlertDescriptionProps {
@@ -162,9 +200,5 @@ export interface AlertDescriptionProps {
  * Description for Alert component.
  */
 export function AlertDescription({ children, className }: AlertDescriptionProps) {
-  return (
-    <Text className={cn('text-sm text-text-secondary', className)}>
-      {children}
-    </Text>
-  )
+  return <Text className={cn('text-sm text-text-secondary', className)}>{children}</Text>
 }

package/src/components/ui/progress/Progress.tsx

@@ -7,7 +7,7 @@ export type ProgressColor = 'primary' | 'secondary' | 'success' | 'error' | 'war
 export type ProgressVariant = 'linear' | 'circular'
 
 /** Maps the color prop to a CSS variable reference for inline styles */
-const colorVarMap: Record<ProgressColor, string> = {
+export const colorVarMap: Record<ProgressColor, string> = {
   primary: 'var(--color-brand-primary)',
   secondary: 'var(--color-brand-secondary)',
   success: 'var(--color-status-success)',
@@ -101,13 +101,9 @@ export function Progress({
       {/* Label and Value Row */}
       {(label || showValue) && (
         <View className="flex-row justify-between items-center mb-1">
-          {label && (
-            <Text className="text-sm text-text-secondary">{label}</Text>
-          )}
+          {label && <Text className="text-sm text-text-secondary">{label}</Text>}
           {showValue && !isIndeterminate && (
-            <Text className="text-sm font-medium text-text-primary">
-              {formatValue(value, max)}
-            </Text>
+            <Text className="text-sm font-medium text-text-primary">{formatValue(value, max)}</Text>
           )}
         </View>
       )}
@@ -162,6 +158,19 @@ export interface CircularProgressProps extends ViewProps {
   showValue?: boolean
   /** Custom value format function */
   formatValue?: (value: number, max: number) => string
+  /**
+   * Custom center content (a numeral, a timer readout, an icon). When provided it
+   * replaces the {@link showValue} text — the ring becomes a generic container for
+   * any centered element. See {@link CircularTimer} for the batteries-included timer.
+   */
+  children?: React.ReactNode
+  /**
+   * Fill the parent container (responsive) instead of drawing a fixed `size` box.
+   * The SVG uses a `0 0 size size` viewBox scaled to the container, so `size` still
+   * sets the geometry proportions (radius, stroke) while the ring grows/shrinks with
+   * its parent — e.g. a wall column. Default false (fixed `size` px).
+   */
+  fill?: boolean
   /** Additional className */
   className?: string
 }
@@ -181,6 +190,8 @@ export function CircularProgress({
   color = 'primary',
   showValue = false,
   formatValue = (v, m) => `${Math.round((v / m) * 100)}%`,
+  children,
+  fill = false,
   className,
   ...props
 }: CircularProgressProps) {
@@ -189,11 +200,14 @@ export function CircularProgress({
   const circumference = 2 * Math.PI * radius
   const strokeDashoffset = circumference - (percentage / 100) * circumference
   const center = size / 2
+  // Fixed: a `size × size` px box. Fill: fill the parent, staying square, and let
+  // the `0 0 size size` viewBox scale the geometry to fit (a responsive ring).
+  const boxStyle = fill ? { width: '100%' as const, aspectRatio: 1 } : { width: size, height: size }
 
   return (
     <View
       className={cn('items-center justify-center', className)}
-      style={{ width: size, height: size }}
+      style={boxStyle}
       accessibilityRole="progressbar"
       accessibilityValue={{
         min: 0,
@@ -202,14 +216,11 @@ export function CircularProgress({
       }}
       {...props}
     >
-      {/* SVG implementation for web */}
-      <View
-        className={cn(isIndeterminate && 'animate-spin')}
-        style={{ width: size, height: size }}
-      >
+      {/* SVG implementation for web — width/height 100% so it scales with `boxStyle`. */}
+      <View className={cn(isIndeterminate && 'animate-spin')} style={boxStyle}>
         <svg
-          width={size}
-          height={size}
+          width="100%"
+          height="100%"
           viewBox={`0 0 ${size} ${size}`}
           style={{ position: 'absolute' }}
         >
@@ -239,14 +250,28 @@ export function CircularProgress({
         </svg>
       </View>
 
-      {/* Center value */}
-      {showValue && !isIndeterminate && (
-        <Text
-          className="text-xs font-semibold text-text-primary absolute"
-          style={{ fontSize: Math.max(size * 0.22, 10) }}
+      {/* Center: custom children take precedence over the showValue readout. */}
+      {children != null ? (
+        <View
+          style={{
+            position: 'absolute',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+          }}
         >
-          {formatValue(value, max)}
-        </Text>
+          {children}
+        </View>
+      ) : (
+        showValue &&
+        !isIndeterminate && (
+          <Text
+            className="text-xs font-semibold text-text-primary absolute"
+            style={{ fontSize: Math.max(size * 0.22, 10) }}
+          >
+            {formatValue(value, max)}
+          </Text>
+        )
       )}
     </View>
   )

package/src/lab/north-star/LivePage.tsx

@@ -0,0 +1,101 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { ScrollView, View } from 'react-native'
+import { SessionRail } from '../../components'
+import { ExerciseHeader, LiveView } from './LiveView'
+import { RestView } from './RestView'
+import {
+  dashboardFixture,
+  deriveDualModel,
+  deriveRailExercises,
+  type DashboardModel,
+} from './fixtures'
+
+export type LivePageVariant = 'live' | 'live-dual' | 'rest'
+
+/** Floor the live panel around phone width so it stops collapsing on a narrow window. */
+const PANEL_MIN_WIDTH = 390
+
+export interface LivePageProps {
+  /** Which stage to show in the main region. */
+  variant?: LivePageVariant
+  /** The dashboard store snapshot. Defaults to the built-in fixture. */
+  model?: DashboardModel
+}
+
+/**
+ * Lab specimen — the North Star wall-dashboard CONTENT (mounts inside `DashboardShell`'s
+ * children slot): the persistent {@link SessionRail} context beside a swappable stage
+ * ({@link LiveView} mid-set / {@link RestView} between sets).
+ *
+ * `live-dual` renders a dual-mode (bilateral) exercise as TWO stacked {@link LiveView}
+ * layers — one per voltra (left/right) — the v1 treatment for two-device sets. A
+ * unified split-bar view is a later exploration.
+ *
+ * NOT a published component — lab-scoped composition of production primitives only.
+ * The rail footer pace read-out is intentionally OMITTED (NO-DATA — no store field yet).
+ */
+export function LivePage({ variant = 'live', model = dashboardFixture }: LivePageProps) {
+  const exercises = deriveRailExercises(model)
+  const completedSets = model.session.completedSets.length
+  const isLive = variant === 'live' || variant === 'live-dual'
+
+  return (
+    <View className="flex-1 flex-row bg-surface-base">
+      <SessionRail
+        title={model.session.title}
+        exercises={exercises}
+        setsDone={isLive ? completedSets + 0.75 : completedSets}
+        elapsedMs={18 * 60_000}
+        budgetMs={45 * 60_000}
+        running={isLive}
+        width={272}
+        metrics={[
+          { label: 'Volume', value: '76%' },
+          { label: 'Load', value: '7.3k' },
+          { label: 'Fatigue', value: 'MOD' },
+        ]}
+      />
+      {/* footer pace strip — STUB / NO-DATA: intentionally omitted (no store field yet). */}
+
+      {/* Panel floors at ~phone width so the live view stops collapsing; rail-aware
+          breakpoints below this are a later pass. */}
+      <View className="flex-1" style={{ minWidth: PANEL_MIN_WIDTH }}>
+        {/* workout title + targets — page-level, always visible, independent of single/dual. */}
+        <ExerciseHeader session={model.session} />
+        <View className="flex-1">
+          {variant === 'live-dual' ? (
+            <DualLiveStage model={model} />
+          ) : variant === 'live' ? (
+            // `slot` names the active voltra — the shell has two connected, so the live view
+            // flags which one it is reading from (the multi-device single-view case).
+            <LiveView model={model} slot="L" />
+          ) : (
+            <RestView model={model} />
+          )}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+/**
+ * Dual-mode stage: two stacked live layers, one per voltra (left dominant, right lags).
+ *
+ * The stage SCROLLS so two full live read-outs never clip on a height-restricted wall.
+ * Each layer also compresses its height-drivers (shorter hero, tighter gaps — see
+ * {@link LiveView}'s `side`/`dual` handling) so a tall wall fits both with little or no
+ * scroll; a trimmed-per-layer treatment is a later option if scrolling proves awkward.
+ */
+function DualLiveStage({ model }: { model: DashboardModel }) {
+  const { left, right } = deriveDualModel(model)
+  return (
+    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
+      <View style={{ flex: 1, minHeight: 340 }}>
+        <LiveView model={left} side="left" />
+      </View>
+      <View style={{ flex: 1, minHeight: 340 }}>
+        <LiveView model={right} side="right" />
+      </View>
+    </ScrollView>
+  )
+}