@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -5,7 +5,16 @@ import { EmptyState } from './EmptyState'
 const meta: Meta<typeof EmptyState> = {
   title: 'Components/Molecules/EmptyState',
   component: EmptyState,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Composes RN primitives only. The `icon` slot takes an icon component and the ' +
+          '`action` slot usually takes a **Button**.',
+      },
+    },
+  },
   argTypes: {
     title: {
       control: 'text',
@@ -30,7 +39,7 @@ export const Default: Story = {
 export const WithDescription: Story = {
   args: {
     title: 'No messages',
-    description: 'You don\'t have any messages yet. Start a conversation to see them here.',
+    description: "You don't have any messages yet. Start a conversation to see them here.",
   },
 }
 
@@ -38,6 +47,7 @@ export const WithDescription: Story = {
 function PlaceholderIcon({ size = 32, className }: { size?: number; className?: string }) {
   return (
     <View
+      className={className}
       style={{
         width: size,
         height: size,
@@ -56,7 +66,14 @@ function PlaceholderIcon({ size = 32, className }: { size?: number; className?:
           alignItems: 'center',
         }}
       >
-        <View style={{ width: size * 0.3, height: 2, backgroundColor: 'var(--color-text-tertiary)', borderRadius: 1 }} />
+        <View
+          style={{
+            width: size * 0.3,
+            height: 2,
+            backgroundColor: 'var(--color-text-tertiary)',
+            borderRadius: 1,
+          }}
+        />
       </View>
     </View>
   )
@@ -73,12 +90,8 @@ export const WithIcon: Story = {
 // Simple action button for story demos
 function ActionButton() {
   return (
-    <View
-      className="bg-brand-primary px-4 py-2 rounded-md"
-    >
-      <Text className="text-white font-semibold text-sm">
-        Create New
-      </Text>
+    <View className="bg-brand-primary px-4 py-2 rounded-md">
+      <Text className="text-on-brand-primary font-semibold text-sm">Create New</Text>
     </View>
   )
 }

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

@@ -4,7 +4,11 @@ import { axe } from 'jest-axe'
 import { EmptyState } from './EmptyState'
 
 function MockIcon({ size, className }: { size?: number; className?: string }) {
-  return <span data-testid="mock-icon" data-size={size} className={className}>Icon</span>
+  return (
+    <span data-testid="mock-icon" data-size={size} className={className}>
+      Icon
+    </span>
+  )
 }
 
 describe('EmptyState', () => {
@@ -14,12 +18,7 @@ describe('EmptyState', () => {
   })
 
   it('renders with description', () => {
-    render(
-      <EmptyState
-        title="No messages"
-        description="You don't have any messages yet."
-      />
-    )
+    render(<EmptyState title="No messages" description="You don't have any messages yet." />)
     expect(screen.getByText("You don't have any messages yet.")).toBeInTheDocument()
   })
 
@@ -45,12 +44,7 @@ describe('EmptyState', () => {
 
   it('renders action element', () => {
     const onPress = vi.fn()
-    render(
-      <EmptyState
-        title="No results"
-        action={<button onClick={onPress}>Create New</button>}
-      />
-    )
+    render(<EmptyState title="No results" action={<button onClick={onPress}>Create New</button>} />)
     const actionButton = screen.getByText('Create New')
     expect(actionButton).toBeInTheDocument()
 

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

@@ -35,34 +35,20 @@ export function EmptyState({
   ...props
 }: EmptyStateProps) {
   return (
-    <View
-      className={cn(
-        'items-center justify-center py-12 px-6',
-        className
-      )}
-      {...props}
-    >
+    <View className={cn('items-center justify-center py-12 px-6', className)} {...props}>
       {Icon && (
         <View className="mb-4 p-4 rounded-full bg-background-subtle">
           <Icon size={32} className="text-text-tertiary" />
         </View>
       )}
 
-      <Text className="text-lg font-semibold text-text-primary text-center mb-2">
-        {title}
-      </Text>
+      <Text className="text-lg font-semibold text-text-primary text-center mb-2">{title}</Text>
 
       {description && (
-        <Text className="text-sm text-text-secondary text-center max-w-xs mb-6">
-          {description}
-        </Text>
+        <Text className="text-sm text-text-secondary text-center max-w-xs mb-6">{description}</Text>
       )}
 
-      {action && (
-        <View className="mt-2">
-          {action}
-        </View>
-      )}
+      {action && <View className="mt-2">{action}</View>}
     </View>
   )
 }

package/src/components/custom/Fatigue/DualGhostSpark.stories.tsx

@@ -12,9 +12,9 @@ const PAGE_BG = greyRamp[975]
 const t = getSemanticColors('dark')
 
 const meta: Meta<typeof DualGhostSpark> = {
-  title: 'Workout/Fatigue/Dual Ghost Spark',
+  title: 'Custom/Fatigue/Dual Ghost Spark',
   component: DualGhostSpark,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   parameters: {
     docs: {
       description: {
@@ -24,7 +24,8 @@ const meta: Meta<typeof DualGhostSpark> = {
           'wings share one time scale and one magnitude scale, so an L/R imbalance reads as bloom size ' +
           'rather than as two independently normalized charts. Each wing is tinted INDEPENDENTLY by its ' +
           'own current rep — silver while the rep stays controlled, warming through shades of red once ' +
-          'that side crosses the grind threshold — so one arm can go red while the other stays silver.',
+          'that side crosses the grind threshold — so one arm can go red while the other stays silver.' +
+          ' Composes **GhostBand** · **GhostBloom**.',
       },
     },
   },

package/src/components/custom/Fatigue/FatigueLights.stories.tsx

@@ -9,9 +9,9 @@ const PAGE_BG = greyRamp[975]
 const t = getSemanticColors('dark')
 
 const meta: Meta<typeof FatigueLights> = {
-  title: 'Workout/Fatigue/Fatigue Lights',
+  title: 'Custom/Fatigue/Fatigue Lights',
   component: FatigueLights,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   parameters: {
     docs: {
       description: {

package/src/components/custom/Fatigue/GhostSpark.stories.tsx

@@ -12,9 +12,9 @@ const PAGE_BG = greyRamp[975]
 const t = getSemanticColors('dark')
 
 const meta: Meta<typeof GhostSpark> = {
-  title: 'Workout/Fatigue/Ghost Spark',
+  title: 'Custom/Fatigue/Ghost Spark',
   component: GhostSpark,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   parameters: {
     docs: {
       description: {
@@ -26,7 +26,8 @@ const meta: Meta<typeof GhostSpark> = {
           'collapse), over a soft paper-inspired ground (no hard outline). Given `targetTempoSeconds` ' +
           'the band also PACES: each run fills across `elapsed / target` of its own width and its label ' +
           'takes the ahead / on-pace / over tone. Every story here passes the prescription the mock reps ' +
-          'were generated against, so the fill you see is the real relationship, not a decoration.',
+          'were generated against, so the fill you see is the real relationship, not a decoration.' +
+          ' Composes **GhostBand** · **GhostBloom**.',
       },
     },
   },

package/src/components/custom/Fatigue/LiveFatigueCard.stories.tsx

@@ -8,9 +8,9 @@ import { FATIGUE_STATES, WARMING_UP_MODEL, buildMockModel } from './fatigue-mock
 const t = getSemanticColors('dark')
 
 const meta: Meta<typeof LiveFatigueCard> = {
-  title: 'Workout/Fatigue/Live Fatigue Card',
+  title: 'Custom/Fatigue/Live Fatigue Card',
   component: LiveFatigueCard,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   parameters: {
     docs: {
       description: {

package/src/components/custom/Fatigue/LiveFatigueCard.tsx

@@ -16,19 +16,22 @@
  * grain + crisp top rim-light + soft contact shadow) — the same material the ROM /
  * velocity bars are made of, now carrying the sheet they sit on. Token-sourced fill, no
  * hardcoded surface hex.
+ *
+ * MODE (TD-03.59). The edge and the paper fill resolve for the mode the enclosing
+ * `<Surface>` publishes, not for a module-scope dark pin. Outside any Surface the context
+ * still defaults to dark, so the wall display is unchanged.
  */
 import { View } from 'react-native'
-import { Surface } from '../../ui/surface/Surface'
+import { Surface, useSurfaceMode } from '../../ui/surface'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { barPaper } from '../../../theme/materials'
+import { cardChartHeight } from './panel-layout'
 import { VerdictHero } from './VerdictHero'
 import { FatigueLights } from './FatigueLights'
 import { RomProgressionChart } from './RomProgressionChart'
 import { GhostSpark } from './GhostSpark'
 import type { LiveFatigueModel } from './fatigue-model'
 
-const t = getSemanticColors('dark')
-
 export interface LiveFatigueCardProps {
   /** The live fatigue read-model for the current set. */
   model: LiveFatigueModel
@@ -42,8 +45,9 @@ const PAD = 18
 const GHOST_GUTTER = 4 // GhostSpark carries this L/R padding internally
 
 export function LiveFatigueCard({ model, width = 318, height }: LiveFatigueCardProps) {
+  const t = getSemanticColors(useSurfaceMode())
   const chartW = width - PAD * 2 - GHOST_GUTTER * 2
-  const chartH = height != null ? Math.round(Math.min(240, Math.max(168, height * 0.4))) : 172
+  const chartH = cardChartHeight(height)
   return (
     <Surface
       level="base"

package/src/components/custom/Fatigue/LiveFatiguePanel.stories.tsx

@@ -1,17 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { LiveFatiguePanel } from './LiveFatiguePanel'
+import { Surface } from '../../ui/surface'
 import { greyRamp } from '../../../theme/tokens/primitives'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { FATIGUE_STATES, buildMockPanelState } from './fatigue-mock'
+import { PANEL_BREAKPOINTS } from './panel-layout'
 
 const PAGE_BG = greyRamp[975]
 const t = getSemanticColors('dark')
 
 const meta: Meta<typeof LiveFatiguePanel> = {
-  title: 'Workout/Fatigue/Live Fatigue Panel',
+  title: 'Custom/Fatigue/Live Fatigue Panel',
   component: LiveFatiguePanel,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -33,18 +35,126 @@ type Story = StoryObj<typeof LiveFatiguePanel>
 export const LivePanelV2: Story = {
   name: 'Live panel v2 (composition)',
   render: () => {
-    const { model, velocity, header } = buildMockPanelState(FATIGUE_STATES[3].current, {
+    const { model, velocity } = buildMockPanelState(FATIGUE_STATES[3].current, {
       rpe: 10,
       verdict: FATIGUE_STATES[3].model.verdict,
     })
     return (
       <View style={{ backgroundColor: PAGE_BG, padding: 24 }}>
-        <LiveFatiguePanel model={model} velocity={velocity} header={header} />
+        <LiveFatiguePanel model={model} velocity={velocity} />
       </View>
     )
   },
 }
 
+/**
+ * The stack/expand tiers side by side (TD-03.58). Each frame pins `containerWidth` so the
+ * tier is deterministic in the visual layer; live, the panel measures itself in `onLayout`
+ * and picks the same tier from the real width. Nothing transitions between tiers.
+ */
+export const ResponsiveTiers: Story = {
+  name: 'Responsive tiers (stack → row → wall)',
+  render: () => {
+    const { model, velocity } = buildMockPanelState(FATIGUE_STATES[1].current, {
+      rpe: FATIGUE_STATES[1].model.rpe,
+      verdict: FATIGUE_STATES[1].model.verdict,
+    })
+    const frames: Array<{ label: string; width: number; bodyHeight: number }> = [
+      { label: `xs · 480px · stacked`, width: 480, bodyHeight: 560 },
+      {
+        label: `sm · ${PANEL_BREAKPOINTS.sm}px · stacked`,
+        width: PANEL_BREAKPOINTS.sm,
+        bodyHeight: 560,
+      },
+      {
+        label: `md · ${PANEL_BREAKPOINTS.md}px · row`,
+        width: PANEL_BREAKPOINTS.md,
+        bodyHeight: 508,
+      },
+      {
+        label: `lg · ${PANEL_BREAKPOINTS.lg}px · row`,
+        width: PANEL_BREAKPOINTS.lg,
+        bodyHeight: 508,
+      },
+      {
+        label: `xl · ${PANEL_BREAKPOINTS.xl}px · wall, card expands`,
+        width: PANEL_BREAKPOINTS.xl,
+        bodyHeight: 620,
+      },
+    ]
+    return (
+      <View style={{ backgroundColor: PAGE_BG, padding: 24, gap: 24 }}>
+        {frames.map((f) => (
+          <View key={f.label} style={{ gap: 6, width: f.width }}>
+            <Text
+              style={{
+                fontSize: 9,
+                letterSpacing: 1,
+                fontFamily: 'monospace',
+                color: t['text-tertiary'],
+              }}
+            >
+              {f.label}
+            </Text>
+            <LiveFatiguePanel
+              model={model}
+              velocity={velocity}
+              containerWidth={f.width}
+              bodyHeight={f.bodyHeight}
+            />
+          </View>
+        ))}
+      </View>
+    )
+  },
+}
+
+/**
+ * The wall case on its own, at the real 1920 stage the SPA renders on. This is the frame
+ * to look at from across a room: the card expands out of its 318 sliver and the hero keeps
+ * the lead.
+ */
+export const WallWidth: Story = {
+  name: 'Wall width (1920)',
+  render: () => {
+    const { model, velocity } = buildMockPanelState(FATIGUE_STATES[2].current, {
+      rpe: FATIGUE_STATES[2].model.rpe,
+      verdict: FATIGUE_STATES[2].model.verdict,
+    })
+    return (
+      <View style={{ backgroundColor: PAGE_BG, width: PANEL_BREAKPOINTS.xl }}>
+        <LiveFatiguePanel
+          model={model}
+          velocity={velocity}
+          containerWidth={PANEL_BREAKPOINTS.xl}
+          bodyHeight={820}
+        />
+      </View>
+    )
+  },
+}
+
+/**
+ * The same panel on a LIGHT surface (TD-03.59). Nothing about the panel changes — the
+ * `<Surface theme="light">` publishes the mode and the panel's eyebrow and the card's
+ * edge/paper resolve against it. Before the Surface adoption both were pinned to dark
+ * and this story rendered dark-on-light.
+ */
+export const OnLightSurface: Story = {
+  name: 'On a light surface',
+  render: () => {
+    const { model, velocity } = buildMockPanelState(FATIGUE_STATES[0].current, {
+      rpe: FATIGUE_STATES[0].model.rpe,
+      verdict: FATIGUE_STATES[0].model.verdict,
+    })
+    return (
+      <Surface level="background" theme="light" rounded={false} style={{ padding: 24 }}>
+        <LiveFatiguePanel model={model} velocity={velocity} />
+      </Surface>
+    )
+  },
+}
+
 /** The whole system across the verdict spectrum — GOOD → SLOWING → GRINDING → FORM BREAKING DOWN. */
 export const LiveStates: Story = {
   name: 'Live states (Good → Breaking down)',
@@ -70,7 +180,7 @@ export const LiveStates: Story = {
         </Text>
       </View>
       {FATIGUE_STATES.map((s) => {
-        const { model, velocity, header } = buildMockPanelState(s.current, {
+        const { model, velocity } = buildMockPanelState(s.current, {
           rpe: s.model.rpe,
           verdict: s.model.verdict,
         })
@@ -86,7 +196,7 @@ export const LiveStates: Story = {
             >
               {s.name}
             </Text>
-            <LiveFatiguePanel model={model} velocity={velocity} header={header} />
+            <LiveFatiguePanel model={model} velocity={velocity} />
           </View>
         )
       })}

package/src/components/custom/Fatigue/LiveFatiguePanel.test.tsx

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { LiveFatiguePanel } from './LiveFatiguePanel'
+import { Surface } from '../../ui/surface'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { buildMockPanelState } from './fatigue-mock'
+import { PANEL_BREAKPOINTS, CARD_WIDTH_BASE, panelLayout } from './panel-layout'
+
+const { model, velocity } = buildMockPanelState(3)
+
+const dark = getSemanticColors('dark')
+const light = getSemanticColors('light')
+
+describe('LiveFatiguePanel', () => {
+  it('composes the aura frame, the velocity hero and the fatigue card', () => {
+    render(<LiveFatiguePanel model={model} velocity={velocity} />)
+    expect(screen.getByTestId('live-fatigue-panel')).toBeInTheDocument()
+    expect(screen.getByTestId('live-fatigue-card')).toBeInTheDocument()
+    expect(screen.getByText('VELOCITY · this set')).toBeInTheDocument()
+  })
+
+  // The wall display is the only surface this ships on today, so a colour move here is a
+  // regression, not an improvement. Outside any Surface the context defaults to dark.
+  it('resolves dark on-surface colours with no enclosing Surface', () => {
+    render(<LiveFatiguePanel model={model} velocity={velocity} />)
+    expect(screen.getByTestId('live-fatigue-eyebrow')).toHaveStyle({
+      color: dark['text-tertiary'],
+    })
+    expect(screen.getByTestId('live-fatigue-card')).toHaveStyle({
+      borderTopColor: dark['hairline-default'],
+      backgroundColor: dark['surface-base'],
+    })
+  })
+
+  it('resolves the same dark colours inside a dark Surface', () => {
+    render(
+      <Surface level="background" theme="dark">
+        <LiveFatiguePanel model={model} velocity={velocity} />
+      </Surface>
+    )
+    expect(screen.getByTestId('live-fatigue-eyebrow')).toHaveStyle({
+      color: dark['text-tertiary'],
+    })
+    expect(screen.getByTestId('live-fatigue-card')).toHaveStyle({
+      borderTopColor: dark['hairline-default'],
+      backgroundColor: dark['surface-base'],
+    })
+  })
+
+  // The point of TD-03.59: a light surface used to render dark-pinned text on a light plane.
+  it('follows a light Surface instead of staying pinned to dark', () => {
+    render(
+      <Surface level="background" theme="light">
+        <LiveFatiguePanel model={model} velocity={velocity} />
+      </Surface>
+    )
+    expect(screen.getByTestId('live-fatigue-eyebrow')).toHaveStyle({
+      color: light['text-tertiary'],
+    })
+    expect(screen.getByTestId('live-fatigue-card')).toHaveStyle({
+      borderTopColor: light['hairline-default'],
+      backgroundColor: light['surface-base'],
+    })
+    expect(light['text-tertiary']).not.toBe(dark['text-tertiary'])
+  })
+})
+
+// `onLayout` never fires under jsdom (SIZE-D01 / gotcha 6), so the panel takes an explicit
+// `containerWidth` override and these drive the live wiring through it. The breakpoint
+// arithmetic itself is covered in `panel-layout.test.ts`.
+describe('LiveFatiguePanel responsiveness (TD-03.58)', () => {
+  it('renders the shipped row geometry at the md and lg tiers', () => {
+    for (const width of [1000, 1440]) {
+      const { unmount } = render(
+        <LiveFatiguePanel model={model} velocity={velocity} containerWidth={width} />
+      )
+      expect(screen.getByTestId('live-fatigue-body')).toHaveStyle({
+        flexDirection: 'row',
+        padding: '24px 24px 24px 24px',
+      })
+      expect(screen.getByTestId('live-fatigue-card')).toHaveStyle({
+        width: `${CARD_WIDTH_BASE}px`,
+      })
+      unmount()
+    }
+  })
+
+  it('stacks the card under the hero below the md edge', () => {
+    render(
+      <LiveFatiguePanel
+        model={model}
+        velocity={velocity}
+        containerWidth={PANEL_BREAKPOINTS.md - 1}
+      />
+    )
+    expect(screen.getByTestId('live-fatigue-body')).toHaveStyle({ flexDirection: 'column' })
+  })
+
+  it('gives the stacked card the full content width instead of the 318 column', () => {
+    const width = 720
+    render(<LiveFatiguePanel model={model} velocity={velocity} containerWidth={width} />)
+    const { padding } = panelLayout(width)
+    expect(screen.getByTestId('live-fatigue-card')).toHaveStyle({
+      width: `${width - padding * 2}px`,
+    })
+  })
+
+  it('expands the card column at wall width', () => {
+    render(<LiveFatiguePanel model={model} velocity={velocity} containerWidth={1920} />)
+    expect(screen.getByTestId('live-fatigue-card')).toHaveStyle({
+      width: `${panelLayout(1920).cardWidth}px`,
+    })
+    expect(panelLayout(1920).cardWidth).toBeGreaterThan(CARD_WIDTH_BASE)
+  })
+
+  it('still honours an explicit cardWidth over the tier', () => {
+    render(
+      <LiveFatiguePanel model={model} velocity={velocity} containerWidth={1920} cardWidth={280} />
+    )
+    expect(screen.getByTestId('live-fatigue-card')).toHaveStyle({ width: '280px' })
+  })
+
+  // TD-03.60 through the rendered tree, not just the pure split.
+  it('moves the rendered card height when bodyHeight changes', () => {
+    const { rerender } = render(
+      <LiveFatiguePanel model={model} velocity={velocity} containerWidth={1440} bodyHeight={400} />
+    )
+    expect(screen.getByTestId('live-fatigue-card')).toHaveStyle({ height: '400px' })
+    rerender(
+      <LiveFatiguePanel model={model} velocity={velocity} containerWidth={1440} bodyHeight={700} />
+    )
+    expect(screen.getByTestId('live-fatigue-card')).toHaveStyle({ height: '700px' })
+  })
+})