@titan-design/react-ui 0.12.0 → 0.13.0

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

@@ -2,32 +2,33 @@
 /**
  * LiveFatiguePanel — the aligned "Live panel v2": the loss-relative {@link VelocityHero}
  * (primary) beside the vertical {@link LiveFatigueCard} (secondary), flooded by a
- * coaching {@link LiveAuraFrame} whose category tracks the verdict state. The optional
- * lite exercise header sits above.
+ * coaching {@link LiveAuraFrame} whose category tracks the verdict state.
  *
  * The velocity hero's per-rep velocities are NOT on the fatigue model (they come from
  * the live-view velocity path), so they're passed as their own `velocity` prop.
+ *
+ * SURFACE (TD-03.59). Colour resolves from the enclosing `<Surface>` through
+ * {@link useOnSurfaceColor}, not from a module-scope `getSemanticColors('dark')`. Outside
+ * any Surface the context still defaults to the dark `base` plane, so the wall display
+ * renders exactly as before while a light surface now works.
+ *
+ * RESPONSIVE (TD-03.58). The panel is CONTAINER-responsive (SIZE-D01), not prop-sized: it
+ * measures its own width in `onLayout` and hands it to {@link panelLayout}, which owns the
+ * stack/expand tiers, the spacing and the card width. The one `bodyHeight` is split across
+ * the hero and the card by {@link panelBodySplit} — one call, so the two cannot disagree.
+ * Nothing here animates: a tier change is a re-layout, never a transition, because the panel
+ * is read from across a room mid-set.
  */
-import { View, Text } from 'react-native'
+import { useState } from 'react'
+import { View, Text, type LayoutChangeEvent } from 'react-native'
 import { LiveAuraFrame, type LiveAuraCategory } from '../Workout/LiveAuraFrame'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { alpha } from '../../../utils/colors'
+import { useOnSurfaceColor } from '../../ui/surface'
 import { VelocityHero } from './VelocityHero'
 import { LiveFatigueCard } from './LiveFatigueCard'
-import { FONT_HEAD, FONT_UI, FONT_MONO, auraForVerdict } from './fatigue-tokens'
+import { FONT_MONO, auraForVerdict } from './fatigue-tokens'
+import { panelLayout, panelBodySplit } from './panel-layout'
 import type { LiveFatigueModel } from './fatigue-model'
 
-const t = getSemanticColors('dark')
-
-export interface LiveFatiguePanelHeader {
-  /** Exercise name — the large title. */
-  title: string
-  /** Prescription / block line under the title. */
-  subtitle?: string
-  /** Right-aligned progress meta, e.g. "SET 3 · REP 7 / 8". */
-  meta?: string
-}
-
 export interface LiveFatiguePanelVelocity {
   /** Per-rep MEAN concentric velocity (m/s), ordered by rep. */
   velocities: number[]
@@ -40,97 +41,63 @@ export interface LiveFatiguePanelProps {
   model: LiveFatigueModel
   /** The velocity-hero data (its own source — not on the fatigue model). */
   velocity: LiveFatiguePanelVelocity
-  /** Optional lite exercise header. Omitted → no header row. */
-  header?: LiveFatiguePanelHeader
   /** Aura-flood category. Defaults to the verdict-derived category. */
   aura?: LiveAuraCategory
   /** Panel body height in px. Default 508. */
   bodyHeight?: number
-  /** Fixed fatigue-card column width. Default 318. */
+  /**
+   * Pin the fatigue-card column width instead of letting the tier choose it. Ignored when
+   * the panel is stacked (the card fills the content width there).
+   */
   cardWidth?: number
-}
-
-function ExerciseHeaderLite({ header }: { header: LiveFatiguePanelHeader }) {
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        justifyContent: 'space-between',
-        paddingHorizontal: 24,
-        paddingTop: 18,
-        paddingBottom: 14,
-        borderBottomWidth: 1,
-        borderColor: alpha(t['text-primary'], 0.08),
-      }}
-    >
-      <View style={{ gap: 2 }}>
-        <Text
-          style={{
-            fontSize: 28,
-            fontWeight: '700',
-            fontFamily: FONT_HEAD,
-            color: t['text-primary'],
-          }}
-        >
-          {header.title}
-        </Text>
-        {header.subtitle && (
-          <Text
-            style={{
-              fontSize: 13,
-              fontWeight: '600',
-              fontFamily: FONT_UI,
-              color: t['text-secondary'],
-            }}
-          >
-            {header.subtitle}
-          </Text>
-        )}
-      </View>
-      {header.meta && (
-        <Text
-          style={{
-            fontSize: 13,
-            fontWeight: '800',
-            fontFamily: FONT_MONO,
-            color: t['text-tertiary'],
-          }}
-        >
-          {header.meta}
-        </Text>
-      )}
-    </View>
-  )
+  /**
+   * Override the measured container width, in px. The panel measures itself, so this is
+   * for tests (`onLayout` never fires under jsdom) and for a consumer that already knows
+   * the width it is about to hand the panel.
+   */
+  containerWidth?: number
 }
 
 export function LiveFatiguePanel({
   model,
   velocity,
-  header,
   aura,
   bodyHeight = 508,
-  cardWidth = 318,
+  cardWidth,
+  containerWidth,
 }: LiveFatiguePanelProps) {
+  const eyebrowColor = useOnSurfaceColor('tertiary')
+  const [measuredWidth, setMeasuredWidth] = useState(0)
+  const width = containerWidth ?? measuredWidth
+  const layout = panelLayout(width)
+  const { heroHeight, cardHeight } = panelBodySplit(bodyHeight, layout)
   const category = aura ?? auraForVerdict(model.verdict?.state ?? null)
-  const heroH = bodyHeight - 26 // leaves room for the hero's own eyebrow above it
   return (
     <LiveAuraFrame
       category={category}
       style={{ borderRadius: 0, borderWidth: 0 }}
       testID="live-fatigue-panel"
+      onLayout={(e: LayoutChangeEvent) => setMeasuredWidth(e.nativeEvent.layout.width)}
     >
       <View style={{ flex: 1 }}>
-        {header && <ExerciseHeaderLite header={header} />}
-        <View style={{ padding: 24, flexDirection: 'row', gap: 18, alignItems: 'stretch' }}>
+        <View
+          testID="live-fatigue-body"
+          style={{
+            padding: layout.padding,
+            flexDirection: layout.stacked ? 'column' : 'row',
+            gap: layout.gap,
+            alignItems: 'stretch',
+          }}
+        >
           {/* PRIMARY — the velocity hero with VL bands; flexes to fill the width the card leaves. */}
           <View style={{ flex: 1, gap: 8 }}>
             <Text
+              testID="live-fatigue-eyebrow"
               style={{
                 fontSize: 9,
                 letterSpacing: 1.2,
                 fontFamily: FONT_MONO,
-                color: t['text-tertiary'],
+                color: eyebrowColor,
               }}
             >
               VELOCITY · this set
@@ -139,11 +106,15 @@ export function LiveFatiguePanel({
               velocities={velocity.velocities}
               targetReps={velocity.targetReps}
               liveRepIndex={velocity.liveRepIndex}
-              height={heroH}
+              height={heroHeight}
             />
           </View>
-          {/* SECONDARY — the vertical fatigue card. */}
-          <LiveFatigueCard model={model} width={cardWidth} height={bodyHeight} />
+          {/* SECONDARY — the vertical fatigue card. Stacked, it fills the content width. */}
+          <LiveFatigueCard
+            model={model}
+            width={cardWidth ?? layout.cardWidth}
+            height={cardHeight}
+          />
         </View>
       </View>
     </LiveAuraFrame>

package/src/components/custom/Fatigue/README.md

@@ -17,7 +17,7 @@ LiveFatiguePanel              ← the composition (Live panel v2)
 └─ LiveFatigueCard            ← secondary read (consumes LiveFatigueModel)
    ├─ VerdictHero             (RPE number + verdict word, tone-flooded)
    ├─ FatigueLights           (VEL/ROM/TEMPO "why" dots)
-   │  ├─ StatusDot            (Workout/ — the dot primitive, glow)
+   │  ├─ Indicator           (ui/indicator — the dot primitive, glow)
    │  └─ Tooltip              (ui/tooltip — hover detail)
    ├─ RomProgressionChart     (per-rep silver/red depth bars + reference lines)
    ├─ GhostSpark              (per-rep velocity-time sparkline; tempo EMBEDDED)
@@ -38,8 +38,11 @@ LiveFatiguePanel              ← the composition (Live panel v2)
 
 ## Reuse audit — composed, not hand-rolled
 
-- **`StatusDot`** (Workout/) — the fatigue lights are `StatusDot` (glow) + a mono label
-  inside a `Tooltip`; no re-implemented dot.
+- **`Indicator`** (ui/indicator/) — the fatigue lights are an `Indicator` (glow) + a mono
+  label inside a `Tooltip`; no re-implemented dot. Roadmap decision 10 settled the two
+  competing dots in `Indicator`'s favour and this README used to name the loser.
+  `FatigueLights.tsx:12` still imports the deprecated `StatusDot`; that call site migrates
+  under AW-127 (`DEPRECATIONS.md`). Compose `Indicator` in anything new here.
 - **`Tooltip`** (ui/tooltip/) — the per-dimension hover detail.
 - **`VelocityStrip`** (Workout/) — the hero reuses it verbatim; `VelocityHero` only adds
   the loss-relative VL20/VL30 band overlay on the strip's own peak scale.
@@ -76,6 +79,34 @@ The reusable pure helpers (`ghostLineColor`, `auraForVerdict`, `mixHex`) live in
 - **Tempo carried by the ghost-spark phase BAND** (`PHASE_AXIS_COLOR`) — no mini-tempo
   digits, and no standalone hero-tempo component.
 
+## Responsive geometry (TD-03.58 / TD-03.60)
+
+`panel-layout.ts` is the panel's single geometry source — a pure module with no
+`react-native` import, so the tiers are unit-tested without `onLayout` (which never fires
+under jsdom, gotcha 6). `LiveFatiguePanel` measures its own width (`SIZE-D01`:
+container-driven, not a `size` prop) and calls it; `containerWidth` overrides the
+measurement for tests and for a consumer that already knows the width.
+
+| tier | width | layout | padding · gap | card width |
+| --- | --- | --- | --- | --- |
+| `xs` | < 600 | stacked | 16 · 12 | full content width |
+| `sm` | 600–999 | stacked | 20 · 14 | full content width |
+| `md` | 1000–1199 | row | 24 · 18 | 318 |
+| `lg` | 1200–1919 | row | 24 · 18 | 318 |
+| `xl` | ≥ 1920 | row | 24 · 18 | `0.22 × width`, clamped to 318–460 |
+
+The edges are titan's own `primitiveBreakpoints`, asserted by identity in
+`panel-layout.test.ts` so nobody can quietly swap in a hand-picked set. Padding and gap
+are deliberately frozen from `md` up: voltras-mcp's `panel-geometry.ts` derives its stage
+chrome from them, and moving them would overflow the wall stage.
+
+`panelBodySplit` is the one-height rule: side by side, the hero and the card both take the
+whole `bodyHeight`; stacked, they share it (card 0.55, gap taken out first). Both numbers
+come from one call, so `bodyHeight` moves both or neither.
+
+Nothing here animates. A tier change is a re-layout, never a transition — the panel is
+read from across a room mid-set, and the visual baselines need a deterministic render.
+
 ## Data plan / follow-ups
 
 - **Store wiring:** `LiveFatigueCard` consumes `LiveFatigueModel` from voltras-mcp's
@@ -83,6 +114,12 @@ The reusable pure helpers (`ghostLineColor`, `auraForVerdict`, `mixHex`) live in
   hand-rolled `live-page/FatigueCard.tsx` spike. The velocity hero's per-rep velocities
   are NOT on the model (they come from the live-view velocity path) — passed as the
   panel's separate `velocity` prop.
+- **Open — voltras-mcp duplicates the panel geometry:** `panel-geometry.ts` hardcodes
+  `FATIGUE_CARD_WIDTH = 318`, `PANEL_PAD = 24` and `HERO_EYEBROW_ALLOWANCE = 26` so the
+  idle stage can prefigure the panel. Those are now derivable — `panelLayout` /
+  `panelBodySplit` / `HERO_EYEBROW_ALLOWANCE` are exported from this family's barrel. Until
+  the SPA imports them, its idle stage will draw a 318 card placeholder where the live panel
+  draws an expanded one on an `xl` display.
 - **Deferred — VelocityStrip loss-relative bar fill:** the locked call also wants the
   hero's BAR FILL recoloured gold→orange→red by velocity loss (not absolute zone).
   VelocityStrip has no loss-relative colour mode; `VelocityHero` owns the band overlay

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

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

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

@@ -1,6 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 /**
- * `Workout/Fatigue/Silver-Red Palette` — the single documented source for the fatigue
+ * `Foundations/Color/Silver-Red Scheme` — the single documented source for the fatigue
  * family's line/quality colour language. SILVER when the rep is right, SHADES OF RED when
  * something's wrong — no greens, no ambers (those belong to the verdict tones + velocity-
  * loss bands, not here). Every swatch reads its value straight from `fatigue-tokens`, so
@@ -29,6 +29,7 @@ const t = getSemanticColors('dark')
 
 const meta: Meta = {
   title: 'Foundations/Color/Silver-Red Scheme',
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   parameters: {
     layout: 'fullscreen',
     docs: {

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

@@ -10,9 +10,9 @@ const PANEL_BG = greyRamp[950]
 const t = getSemanticColors('dark')
 
 const meta: Meta<typeof VelocityHero> = {
-  title: 'Workout/DataViz/VelocityHero',
+  title: 'Custom/Fatigue/Velocity Hero',
   component: VelocityHero,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   parameters: {
     docs: {
       description: {
@@ -20,7 +20,8 @@ const meta: Meta<typeof VelocityHero> = {
           'The shipped `VelocityStrip` hero with LOSS-RELATIVE VL20/VL30 decision bands layered behind ' +
           'the bars (on the hero’s own peak scale). The velocity-loss language lives here so the ' +
           'fatigue card carries no separate VL chart. (Deferred: recolouring the bar FILL loss-relative ' +
-          'needs a new VelocityStrip prop — this component owns the band overlay only.)',
+          'needs a new VelocityStrip prop — this component owns the band overlay only.)' +
+          ' Composes **VelocityStrip**.',
       },
     },
   },

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

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

package/src/components/custom/Fatigue/fatigue-mock.test.ts

@@ -36,11 +36,6 @@ describe('buildMockPanelState', () => {
     }
   })
 
-  it('counts the header rep out of the same planned total', () => {
-    const { header } = buildMockPanelState(3)
-    expect(header.meta).toBe(`SET 3 · REP 4 / ${MOCK_PLANNED_REPS}`)
-  })
-
   it('derives the planned count from the rep data, not a literal', () => {
     expect(MOCK_PLANNED_REPS).toBe(MOCK_MEAN_VELOCITIES.length)
   })

package/src/components/custom/Fatigue/fatigue-mock.ts

@@ -177,8 +177,8 @@ export function buildMockModel(
 }
 
 /**
- * The WHOLE panel's input for a set truncated at `current` — model, velocity and header
- * from one rep count and one truncation point.
+ * The WHOLE panel's input for a set truncated at `current` — model and velocity from one
+ * rep count and one truncation point.
  *
  * The panel feeds two components that each draw their own upcoming-rep remainder, so
  * assembling their props separately is how the two halves drift apart. Build both here
@@ -190,7 +190,6 @@ export function buildMockPanelState(
 ): {
   model: LiveFatigueModel
   velocity: { velocities: number[]; targetReps: number; liveRepIndex: number }
-  header: typeof MOCK_HEADER
 } {
   const model = buildMockModel(current, overrides)
   return {
@@ -201,7 +200,6 @@ export function buildMockPanelState(
       targetReps: MOCK_PLANNED_REPS,
       liveRepIndex: current,
     },
-    header: { ...MOCK_HEADER, meta: `SET 3 · REP ${current + 1} / ${MOCK_PLANNED_REPS}` },
   }
 }
 
@@ -260,9 +258,3 @@ export const FATIGUE_STATES: Array<{ name: string; current: number; model: LiveF
 
 /** A warming-up (cold-start, < 2 reps) model — null verdict / RPE. */
 export const WARMING_UP_MODEL: LiveFatigueModel = buildMockModel(0, { rpe: null, verdict: null })
-
-export const MOCK_HEADER = {
-  title: 'Cable Chest Press',
-  subtitle: `Push A · Hypertrophy · 62 lb × ${MOCK_PLANNED_REPS} · tempo 2.6·0.4·0.95·0.28`,
-  meta: `SET 3 · REP ${MOCK_PLANNED_REPS} / ${MOCK_PLANNED_REPS}`,
-}

package/src/components/custom/Fatigue/fatigue-tokens.ts

@@ -12,6 +12,18 @@ const t = getSemanticColors('dark')
 
 export const FONT_HEAD = '"Space Grotesk", sans-serif'
 export const FONT_UI = '"Nunito Sans", sans-serif'
+
+/**
+ * FOUNDATIONS GAP (TD-03.59 debt 3) — deliberately still the generic CSS fallback.
+ *
+ * titan has TWO mono declarations and they disagree, so adopting either here would be
+ * choosing a typeface rather than resolving a token:
+ *   `primitiveTypography.fontFamilies.mono`  SF Mono · Monaco · Inconsolata · Fira Mono · …
+ *   `--font-family-mono` (global.css, both themes)  SFMono-Regular · Consolas · Liberation Mono · Menlo
+ * They also pick different first faces on macOS, so the two render at different metrics.
+ * Reconciling them is a foundations decision; until it lands this stays `monospace` so the
+ * wall render does not move under a half-made choice.
+ */
 export const FONT_MONO = 'monospace'
 
 /** Per-dimension tone → semantic status colour (the one language the dots + hero share). */

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

@@ -1,11 +1,23 @@
 // Live-fatigue component family — the aligned "Live panel v2" hardened into titan
 // components. See ./README.md for the composition tree + reuse audit.
 export { LiveFatiguePanel } from './LiveFatiguePanel'
-export type {
-  LiveFatiguePanelProps,
-  LiveFatiguePanelHeader,
-  LiveFatiguePanelVelocity,
-} from './LiveFatiguePanel'
+export type { LiveFatiguePanelProps, LiveFatiguePanelVelocity } from './LiveFatiguePanel'
+// The panel's responsive geometry, exported so a consumer that prefigures the panel (the
+// wall SPA's idle stage) reads the same numbers instead of copying them.
+export {
+  panelLayout,
+  panelBodySplit,
+  panelTier,
+  PANEL_BREAKPOINTS,
+  CARD_WIDTH_BASE,
+  CARD_WIDTH_MAX,
+  CARD_WIDTH_XL_RATIO,
+  CARD_HEIGHT_SHARE_STACKED,
+  HERO_EYEBROW_ALLOWANCE,
+  type PanelLayout,
+  type PanelBodySplit,
+  type PanelTier,
+} from './panel-layout'
 export { LiveFatigueCard, type LiveFatigueCardProps } from './LiveFatigueCard'
 export { VerdictHero, type VerdictHeroProps } from './VerdictHero'
 export { FatigueLights, type FatigueLightsProps } from './FatigueLights'

package/src/components/custom/Fatigue/panel-layout.test.ts

@@ -0,0 +1,149 @@
+import { describe, it, expect } from 'vitest'
+import { primitiveBreakpoints } from '../../../theme/tokens/primitives'
+import {
+  PANEL_BREAKPOINTS,
+  CARD_WIDTH_BASE,
+  CARD_WIDTH_MAX,
+  CARD_WIDTH_XL_RATIO,
+  CARD_HEIGHT_SHARE_STACKED,
+  CARD_MIN_HEIGHT_STACKED,
+  CARD_MIN_CHART_HEIGHT,
+  CARD_MAX_CHART_HEIGHT,
+  CARD_NATURAL_CHART_HEIGHT,
+  HERO_EYEBROW_ALLOWANCE,
+  HERO_MIN_PLOT_HEIGHT,
+  panelTier,
+  panelLayout,
+  panelBodySplit,
+  cardChartHeight,
+} from './panel-layout'
+
+describe('panel breakpoints', () => {
+  // The edges are titan's, not this component's. If someone re-points the panel at a
+  // hand-picked set, this is where it shows up.
+  it('are titan primitiveBreakpoints, not values invented here', () => {
+    expect(PANEL_BREAKPOINTS).toBe(primitiveBreakpoints)
+  })
+
+  it.each([
+    [320, 'xs'],
+    [599, 'xs'],
+    [600, 'sm'],
+    [999, 'sm'],
+    [1000, 'md'],
+    [1199, 'md'],
+    [1200, 'lg'],
+    [1919, 'lg'],
+    [1920, 'xl'],
+    [2560, 'xl'],
+  ])('puts %ipx in the %s tier', (width, tier) => {
+    expect(panelTier(width)).toBe(tier)
+  })
+
+  it('treats an unmeasured container as md so the first paint is the row layout', () => {
+    expect(panelTier(0)).toBe('md')
+    expect(panelLayout(0).stacked).toBe(false)
+    expect(panelLayout(0).cardWidth).toBe(CARD_WIDTH_BASE)
+  })
+})
+
+describe('panelLayout', () => {
+  it('stacks below the md edge and rows at or above it', () => {
+    expect(panelLayout(PANEL_BREAKPOINTS.md - 1).stacked).toBe(true)
+    expect(panelLayout(PANEL_BREAKPOINTS.md).stacked).toBe(false)
+  })
+
+  it('holds the shipped padding, gap and card width at md and lg', () => {
+    for (const width of [1000, 1200, 1600, 1919]) {
+      expect(panelLayout(width)).toMatchObject({
+        stacked: false,
+        padding: 24,
+        gap: 18,
+        cardWidth: CARD_WIDTH_BASE,
+      })
+    }
+  })
+
+  it('expands the card at wall width without moving the padding or the gap', () => {
+    const wall = panelLayout(1920)
+    expect(wall.cardWidth).toBe(Math.round(1920 * CARD_WIDTH_XL_RATIO))
+    expect(wall.cardWidth).toBeGreaterThan(CARD_WIDTH_BASE)
+    // The SPA's stage chrome is derived from these two; moving them would overflow it.
+    expect(wall.padding).toBe(24)
+    expect(wall.gap).toBe(18)
+  })
+
+  it('caps the expansion so the card charts stay near the width they were drawn at', () => {
+    expect(panelLayout(4000).cardWidth).toBe(CARD_WIDTH_MAX)
+  })
+
+  it('gives a stacked card the full content width', () => {
+    const narrow = panelLayout(600)
+    expect(narrow.stacked).toBe(true)
+    expect(narrow.cardWidth).toBe(600 - narrow.padding * 2)
+  })
+})
+
+describe('panelBodySplit — one height source', () => {
+  // TD-03.60: the hero and the card must not be able to disagree about the body height.
+  it('moves BOTH the hero and the card when bodyHeight changes, in every tier', () => {
+    for (const width of [480, 900, 1000, 1440, 1920]) {
+      const layout = panelLayout(width)
+      const small = panelBodySplit(800, layout)
+      const large = panelBodySplit(1200, layout)
+      expect(large.heroHeight).toBeGreaterThan(small.heroHeight)
+      expect(large.cardHeight).toBeGreaterThan(small.cardHeight)
+    }
+  })
+
+  it('gives the row layout the full height to both, less the hero eyebrow', () => {
+    const split = panelBodySplit(508, panelLayout(1440))
+    expect(split.cardHeight).toBe(508)
+    expect(split.heroHeight).toBe(508 - HERO_EYEBROW_ALLOWANCE)
+  })
+
+  it('spends the whole stacked height on the two blocks and the gap, nothing lost', () => {
+    const layout = panelLayout(700)
+    const split = panelBodySplit(900, layout)
+    expect(split.heroHeight + HERO_EYEBROW_ALLOWANCE + split.cardHeight + layout.gap).toBe(900)
+  })
+
+  it('gives the stacked card the larger share once there is height to share', () => {
+    const layout = panelLayout(700)
+    const split = panelBodySplit(900, layout)
+    expect(split.cardHeight).toBe(Math.round((900 - layout.gap) * CARD_HEIGHT_SHARE_STACKED))
+    expect(split.cardHeight).toBeGreaterThan(split.heroHeight)
+  })
+
+  // A stacked card shorter than its content spilled the ghost spark outside the rounded
+  // edge — measured at 301px against a 384px content height before the floor existed.
+  it('never draws a stacked card below its content floor', () => {
+    for (const bodyHeight of [200, 400, 560, 600]) {
+      const split = panelBodySplit(bodyHeight, panelLayout(480))
+      expect(split.cardHeight).toBeGreaterThanOrEqual(CARD_MIN_HEIGHT_STACKED)
+    }
+  })
+
+  it('keeps the stacked hero plot readable rather than flattening it to nothing', () => {
+    const split = panelBodySplit(300, panelLayout(480))
+    expect(split.heroHeight).toBe(HERO_MIN_PLOT_HEIGHT)
+  })
+
+  it('never returns a negative height for a body too short to hold the chrome', () => {
+    const split = panelBodySplit(10, panelLayout(700))
+    expect(split.heroHeight).toBeGreaterThanOrEqual(0)
+    expect(split.cardHeight).toBeGreaterThanOrEqual(0)
+  })
+})
+
+describe('cardChartHeight', () => {
+  it('gives an unpinned card its natural plot height', () => {
+    expect(cardChartHeight(undefined)).toBe(CARD_NATURAL_CHART_HEIGHT)
+  })
+
+  it('clamps a pinned card between the floor and the ceiling', () => {
+    expect(cardChartHeight(100)).toBe(CARD_MIN_CHART_HEIGHT)
+    expect(cardChartHeight(5000)).toBe(CARD_MAX_CHART_HEIGHT)
+    expect(cardChartHeight(508)).toBe(Math.round(508 * 0.4))
+  })
+})