@titan-design/react-ui 0.9.0 → 0.9.2

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

@@ -1,409 +0,0 @@
-// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { useState, type ReactElement } from 'react'
-import { View, Text, type LayoutChangeEvent } from 'react-native'
-import {
-  LiveAuraFrame,
-  VelocityStrip,
-  TempoDisplay,
-  SetsRepsLoad,
-  ActivityIcon,
-  AlertTriangleIcon,
-  CircleSlashIcon,
-  type IconProps,
-} from '../../components'
-import { Tooltip } from '../../components/ui/tooltip/Tooltip'
-import { getSemanticColors } from '../../theme/tokens/semantic'
-import { alpha } from '../../utils/colors'
-import { neumorphicShadows } from '../../theme/shadows'
-import { type DashboardModel, verdictFromLoss } from './fixtures'
-
-const t = getSemanticColors('dark')
-
-/** Raised-card elevation shared by the alert + tempo cards. */
-const CARD_SHADOW = neumorphicShadows.charcoal.raised.medium
-/** One row height for the tempo + alert cards, so they line up regardless of tempo font size. */
-const CONTROL_HEIGHT = 34
-/** The tempo card ground — mirrors TempoDisplay's own charcoal so a shorter inner pill reads seamless. */
-const TEMPO_GROUND = '#1C1C1C'
-
-/** Clamped linear interpolation of `v` between `vLo..vHi` as `w` runs `wLo..wHi`. */
-function clampLerp(w: number, wLo: number, wHi: number, vLo: number, vHi: number): number {
-  if (w <= wLo) return vLo
-  if (w >= wHi) return vHi
-  return vLo + ((w - wLo) / (wHi - wLo)) * (vHi - vLo)
-}
-
-// --- Voltra slot --------------------------------------------------------------
-
-/** Which Voltra a live view is reading from — for dual mode and multi-device sessions. */
-export type VoltraSlot = 'L' | 'R'
-
-const SLOT_META: Record<VoltraSlot, { label: string }> = {
-  L: { label: 'LEFT VOLTRA' },
-  R: { label: 'RIGHT VOLTRA' },
-}
-
-/** The voltra name set vertically down the far-left edge of a layer (dual / multi-device). */
-function VerticalSlotLabel({ slot }: { slot: VoltraSlot }) {
-  const { label } = SLOT_META[slot]
-  return (
-    <View
-      className="border-border"
-      style={{ width: 34, alignItems: 'center', justifyContent: 'center', borderRightWidth: 1 }}
-    >
-      {/* Fixed width holds the full label before rotation (a bare rotate clips to the strip). */}
-      <Text
-        className="text-text-tertiary"
-        style={{
-          width: 150,
-          textAlign: 'center',
-          fontSize: 12,
-          fontWeight: '700',
-          letterSpacing: 3,
-          transform: [{ rotate: '-90deg' }],
-        }}
-      >
-        {label}
-      </Text>
-    </View>
-  )
-}
-
-// --- Alert cue ----------------------------------------------------------------
-
-type Verdict = 'productive' | 'threshold' | 'stop'
-const STATUS_COLOR: Record<Verdict, string> = {
-  productive: t['status-success'],
-  threshold: t['status-warning'],
-  stop: t['status-error'],
-}
-const VERDICT_LABEL: Record<Verdict, string> = {
-  productive: 'Productive',
-  threshold: 'Threshold',
-  stop: 'Stop',
-}
-// A CONTEXTUAL glyph keyed on proximity to the velocity-loss threshold (replaces the flat
-// colour dot): a healthy pulse well under, a warning triangle at the threshold band, a
-// slashed circle once past it.
-const STATUS_ICON: Record<Verdict, (props: IconProps) => ReactElement> = {
-  productive: ActivityIcon,
-  threshold: AlertTriangleIcon,
-  stop: CircleSlashIcon,
-}
-
-/** How much of the alert survives at the current width. */
-export type AlertMode = 'full' | 'compact' | 'icon'
-
-/** The tinted alert surface (border + wash + raised shadow) shared by the card and the icon pill. */
-function alertSurface(tone: string) {
-  return {
-    borderWidth: 1,
-    borderColor: alpha(tone, 0.45),
-    backgroundColor: alpha(tone, 0.14),
-    ...CARD_SHADOW,
-  }
-}
-
-/**
- * The single status element — a tinted alert card carrying the exertion message. It sheds
- * detail as space tightens: `full` shows the contextual icon + verdict + inline message
- * (capped at `availWidth` so it ellipsises + keeps a hover tip rather than running off-page);
- * `compact` drops the message to the tip; `icon` collapses to just the contextual glyph,
- * verdict + message on hover.
- */
-function AlertCue({
-  status,
-  message,
-  mode,
-  availWidth,
-}: {
-  status: Verdict
-  message: string
-  mode: AlertMode
-  /** Pixels the alert may occupy (row width − tempo − gap); caps the card so the message clips. */
-  availWidth?: number
-}) {
-  const tone = STATUS_COLOR[status]
-  const Icon = STATUS_ICON[status]
-  const meaningful = status === 'threshold' || status === 'stop'
-
-  // Tightest: icon-only pill. Verdict + message live in the hover tip.
-  if (mode === 'icon') {
-    const pill = (
-      <View
-        style={{
-          width: CONTROL_HEIGHT,
-          height: CONTROL_HEIGHT,
-          borderRadius: 9,
-          alignItems: 'center',
-          justifyContent: 'center',
-          ...alertSurface(tone),
-        }}
-      >
-        <Icon size={17} color={tone} />
-      </View>
-    )
-    return meaningful ? (
-      <Tooltip label={`${VERDICT_LABEL[status]} · ${message}`} placement="bottom">
-        {pill}
-      </Tooltip>
-    ) : (
-      pill
-    )
-  }
-
-  const card = (
-    <View
-      className="flex-row items-center"
-      style={{
-        gap: 8,
-        height: CONTROL_HEIGHT,
-        // Concrete px cap (not %) so the single-line message ellipsises through the wrapper chain.
-        maxWidth: availWidth,
-        borderRadius: 10,
-        paddingHorizontal: 12,
-        ...alertSurface(tone),
-      }}
-    >
-      <Icon size={15} color={tone} />
-      <Text style={{ color: tone, fontSize: 13, fontWeight: '700', flexShrink: 0 }}>
-        {VERDICT_LABEL[status]}
-      </Text>
-      {mode === 'full' && meaningful && (
-        // Bounded + single-line: ellipsises instead of pushing off the page (full text on hover).
-        <Text
-          numberOfLines={1}
-          style={{ color: tone, fontSize: 13, fontWeight: '600', flexShrink: 1, minWidth: 0 }}
-        >
-          · {message}
-        </Text>
-      )}
-    </View>
-  )
-  // Keep the full message a hover away whenever it isn't fully spelled out (compact) or may be
-  // clipped (full → ellipsis).
-  return meaningful ? (
-    <Tooltip label={message} placement="bottom">
-      {card}
-    </Tooltip>
-  ) : (
-    card
-  )
-}
-
-// --- Live tempo phase mapping -------------------------------------------------
-
-/** Map the model's movement phase onto TempoDisplay's live-fill phase key. */
-function mapLivePhase(
-  phase: DashboardModel['live']['phase']
-): 'eccentric' | 'pauseBottom' | 'concentric' | null {
-  switch (phase) {
-    case 'concentric':
-      return 'concentric'
-    case 'eccentric':
-      return 'eccentric'
-    case 'hold':
-      return 'pauseBottom'
-    default:
-      return null
-  }
-}
-
-// --- Page-level exercise header -----------------------------------------------
-
-/** Below this header width the targets line wraps under the name (at the set-heading ratio). */
-const HEADER_WRAP = 480
-/** At/above this header width the targets render at full size. */
-const HEADER_WIDE = 760
-/** Targets:name size ratio on the wrapped second line — matches ExerciseHeading (11 / 14). */
-const SET_HEADING_RATIO = 11 / 14
-const HEADER_NAME_SIZE = 30
-
-/**
- * The workout title + targets — the exercise being performed, independent of how many
- * voltras drive it, so it lives at the TOP OF THE PAGE (above the live stage) and stays
- * visible across single/dual. The targets shrink with width and only wrap under the name
- * (at the set-heading size ratio) once too tight to shrink further. NOT a published component.
- */
-export function ExerciseHeader({ session }: { session: DashboardModel['session'] }) {
-  const [w, setW] = useState(0)
-  const onLayout = (e: LayoutChangeEvent) => setW(e.nativeEvent.layout.width)
-  const wrap = w > 0 && w < HEADER_WRAP
-  const targetSize = wrap
-    ? Math.round(HEADER_NAME_SIZE * SET_HEADING_RATIO) // set-heading ratio on the second line
-    : Math.round(clampLerp(w || HEADER_WIDE, HEADER_WRAP, HEADER_WIDE, 22, 28))
-
-  return (
-    <View
-      onLayout={onLayout}
-      className="border-border"
-      style={{
-        flexDirection: wrap ? 'column' : 'row',
-        alignItems: wrap ? 'flex-start' : 'baseline',
-        justifyContent: 'space-between',
-        gap: wrap ? 4 : 22,
-        paddingHorizontal: 24,
-        paddingTop: 20,
-        paddingBottom: 16,
-        borderBottomWidth: 1,
-      }}
-    >
-      <Text
-        className="text-text-primary"
-        style={{
-          fontSize: HEADER_NAME_SIZE,
-          fontFamily: '"Space Grotesk", sans-serif',
-          fontWeight: '700',
-        }}
-      >
-        {session.exerciseName}
-      </Text>
-      {/* targets: pinned right when inline, tucked under the name (smaller) when wrapped. */}
-      <SetsRepsLoad
-        sets={session.plannedSets}
-        reps={8}
-        load={session.weightLbs}
-        unit={session.unit}
-        fontSize={targetSize}
-      />
-    </View>
-  )
-}
-
-// --- Live stage ---------------------------------------------------------------
-
-/** Below this content width the alert drops its inline message to a hover tip. */
-const ALERT_COMPACT = 620
-/** Below this content width the alert collapses to just its contextual icon. */
-const ALERT_ICON = 430
-/** Tempo digit size at rest — matched to sit within {@link CONTROL_HEIGHT}. */
-const TEMPO_BASE_FONT = 18
-/** Content width at which the tempo has shrunk as far as it goes (near the panel min). */
-const TEMPO_SHRINK_FLOOR = 300
-
-/**
- * Lab specimen — the LIVE (mid-set) stage of one voltra. The exercise identity + targets
- * are the PAGE header ({@link ExerciseHeader}); this layer carries only per-voltra live
- * data: an optional vertical slot label (far left), the alert + live tempo in a row, and
- * the velocity hero. NOT a published component.
- *
- * `side` renders this as one LAYER of a dual-mode set; `slot` names the active voltra in a
- * single-view multi-device session. Either shows the vertical slot label.
- */
-export function LiveView({
-  model,
-  side,
-  slot,
-}: {
-  model: DashboardModel
-  side?: 'left' | 'right'
-  slot?: VoltraSlot
-}) {
-  const { live, session } = model
-  const verdict = verdictFromLoss(live.velocityLossPct)
-  const dual = side != null
-  const badgeSlot: VoltraSlot | null = side ? (side === 'left' ? 'L' : 'R') : (slot ?? null)
-
-  const [contentW, setContentW] = useState(0)
-  const onContentLayout = (e: LayoutChangeEvent) => setContentW(e.nativeEvent.layout.width)
-  const [rowW, setRowW] = useState(0)
-  const onRowLayout = (e: LayoutChangeEvent) => setRowW(e.nativeEvent.layout.width)
-  const [tempoW, setTempoW] = useState(0)
-  const onTempoLayout = (e: LayoutChangeEvent) => setTempoW(e.nativeEvent.layout.width)
-  // The alert sheds detail first (message → verdict → icon); the tempo holds its full size
-  // until the alert can't shrink any further, then it takes over shrinking.
-  const alertMode: AlertMode =
-    contentW === 0 || contentW >= ALERT_COMPACT
-      ? 'full'
-      : contentW >= ALERT_ICON
-        ? 'compact'
-        : 'icon'
-  const tempoFont =
-    contentW === 0 || contentW >= ALERT_ICON
-      ? TEMPO_BASE_FONT
-      : Math.round(clampLerp(contentW, TEMPO_SHRINK_FLOOR, ALERT_ICON, 14, TEMPO_BASE_FONT))
-  // Tempo is optional: a set may have no prescribed tempo — then the card is hidden entirely
-  // and the alert takes the whole row.
-  const hasTempo = session.tempo != null
-  // Width the alert may take — measured off the ROW (inside the panel padding) so a long
-  // message ellipsises at the side margin rather than running to the panel edge. With no tempo
-  // card the alert gets the full row; otherwise it's the row minus the (measured) tempo + gap.
-  const CONTROLS_GAP = 16
-  const alertAvail =
-    rowW > 0
-      ? hasTempo
-        ? tempoW > 0
-          ? Math.max(0, rowW - tempoW - CONTROLS_GAP)
-          : undefined
-        : rowW
-      : undefined
-
-  const [heroH, setHeroH] = useState(0)
-  const onHeroLayout = (e: LayoutChangeEvent) => setHeroH(e.nativeEvent.layout.height)
-  const heroHeight = heroH > 0 ? heroH : dual ? 200 : 320
-
-  const activePhase = mapLivePhase(live.phase)
-  const message = `VL${live.velocityLossPct} · approaching threshold — 1–2 productive reps left`
-
-  return (
-    // head verdict → full-surface aura flood; fills its section edge-to-edge — squared off
-    // (no radius/border), since it's the section background, not a card within it.
-    <LiveAuraFrame category={verdict} style={{ flex: 1, borderRadius: 0, borderWidth: 0 }}>
-      <View className="flex-row" style={{ flex: 1 }}>
-        {badgeSlot && <VerticalSlotLabel slot={badgeSlot} />}
-        <View
-          onLayout={onContentLayout}
-          style={{ flex: 1, padding: dual ? 18 : 24, gap: dual ? 8 : 10 }}
-        >
-          {/* controls row: tempo upper-left (when prescribed), alert upper-right. With no tempo
-              the alert simply pins right (flex-end); otherwise they split (space-between). */}
-          <View
-            onLayout={onRowLayout}
-            className="flex-row items-center"
-            style={{ gap: CONTROLS_GAP, justifyContent: hasTempo ? 'space-between' : 'flex-end' }}
-          >
-            {/* tempo card — locked to the alert's height (this view only); the inner TempoDisplay
-                shrinks its font but stays centred on the shared charcoal ground so it reads seamless. */}
-            {session.tempo != null && (
-              <View
-                onLayout={onTempoLayout}
-                style={{
-                  height: CONTROL_HEIGHT,
-                  justifyContent: 'center',
-                  alignItems: 'flex-start',
-                  backgroundColor: TEMPO_GROUND,
-                  borderRadius: 9,
-                  overflow: 'hidden',
-                  ...CARD_SHADOW,
-                }}
-              >
-                <TempoDisplay
-                  tempo={session.tempo}
-                  fontSize={tempoFont}
-                  live={
-                    activePhase ? { activePhase, phaseElapsedMs: live.phaseElapsedMs } : undefined
-                  }
-                  showLabel={false}
-                  showInfo={false}
-                />
-              </View>
-            )}
-            <AlertCue status={verdict} message={message} mode={alertMode} availWidth={alertAvail} />
-          </View>
-
-          {/* the velocity hero fills the rest. */}
-          <View style={{ flex: 1 }} onLayout={onHeroLayout}>
-            <VelocityStrip
-              variant="hero"
-              velocities={live.repVelocities}
-              liveRepIndex={live.repVelocities.length - 1}
-              targetReps={8}
-              height={heroHeight}
-              scale="peak"
-            />
-          </View>
-        </View>
-      </View>
-    </LiveAuraFrame>
-  )
-}

package/src/lab/north-star/LiveWallDashboard.stories.tsx

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
-import { DashboardShell, type Device } from '../../components'
-import { LivePage, type LivePageVariant } from './LivePage'
-import { dashboardFixture } from './fixtures'
-
-/** The fixture with its prescribed tempo stripped — a set with no tempo (hidden readout). */
-const noTempoModel = {
-  ...dashboardFixture,
-  session: { ...dashboardFixture.session, tempo: undefined },
-}
-
-/**
- * `Lab/North Star/Live Wall Dashboard` — the north-star wall-dashboard specimen.
- *
- * A LAB specimen: it COMPOSES existing production components ({@link DashboardShell}
- * around a lab-scoped `LivePage`) into the target surface. It is NOT a published
- * library component — nothing here is added to a package barrel.
- *
- * The live-stage slots render their REAL treatments: the VelocityStrip hero, the live
- * TempoDisplay (running tempo, folded into the head), the consolidated status cue, and
- * the RestTimer ring. `live-dual` stacks two live layers, one per voltra.
- */
-const DEVICES: Device[] = [
-  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
-  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
-]
-
-interface WallArgs {
-  variant: LivePageVariant
-  /** Whether the current set has a prescribed tempo; off hides the tempo readout. */
-  tempo: boolean
-}
-
-const meta: Meta<WallArgs> = {
-  title: 'Lab/North Star/Live Wall Dashboard',
-  args: { variant: 'live', tempo: true },
-  argTypes: {
-    variant: { control: 'inline-radio', options: ['live', 'live-dual', 'rest'] },
-    tempo: { control: 'boolean' },
-  },
-  render: ({ variant, tempo }) => (
-    <DashboardShell
-      activeKey="live"
-      state={variant === 'rest' ? 'rest' : 'live'}
-      liveKey={variant === 'rest' ? 'live' : null}
-      devices={DEVICES}
-      subtitle="wall dashboard"
-    >
-      <LivePage variant={variant} model={tempo ? dashboardFixture : noTempoModel} />
-    </DashboardShell>
-  ),
-  decorators: [
-    (Story) => (
-      <View style={{ height: '100vh' as unknown as number, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          '**North Star wall dashboard** (lab specimen). Composes ' +
-          '[DashboardShell](?path=/docs/pages-dashboardshell--docs) around a lab `LivePage` ' +
-          '(SessionRail + a Live/Rest stage). Toggle **variant** to switch between the ' +
-          'mid-set live read-out and the between-sets rest read-out. Tier-C slots render ' +
-          'their base component as a labelled stub.',
-      },
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<WallArgs>
-
-/** Mid-set: velocity hero, live metrics, verdict pill + amber threshold aura. */
-export const Live: Story = {
-  args: { variant: 'live' },
-  parameters: {
-    docs: {
-      description: { story: 'The live (mid-set) stage — ~22% velocity loss, threshold verdict.' },
-    },
-  },
-}
-
-/** Mid-set with NO prescribed tempo — the tempo readout is hidden; the alert takes the row. */
-export const LiveNoTempo: Story = {
-  args: { variant: 'live', tempo: false },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The live stage for a set with no prescribed tempo (coach left it unset and no ' +
-          'exercise default). The tempo card is hidden entirely — no invented placeholder — ' +
-          'and the alert cue simply pins to the right of the row.',
-      },
-    },
-  },
-}
-
-/** Dual-mode (bilateral): two stacked live layers, one per voltra — left dominant, right lags. */
-export const LiveDual: Story = {
-  args: { variant: 'live-dual' },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'A dual-mode (bilateral) exercise — the stage stacks two live layers, one per ' +
-          'voltra. The RIGHT voltra shows a realistic left-dominant deficit (slower reps, ' +
-          'more velocity loss). v1 renders the two sides independently; a unified split-bar ' +
-          'treatment is a later exploration.',
-      },
-    },
-  },
-}
-
-/** Between sets: rest countdown, completed-set recap, verdict metrics + next-set mock. */
-export const Rest: Story = {
-  args: { variant: 'rest' },
-  parameters: {
-    docs: {
-      description: {
-        story: 'The rest stage — countdown, set recap, verdict, and a mock next-set preview.',
-      },
-    },
-  },
-}

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

@@ -1,140 +0,0 @@
-// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text } from 'react-native'
-import { RestTimer, ExerciseCard, Metric, MetricGroup, type SetRowProps } from '../../components'
-import { type DashboardModel, meanVelocity, verdictFromLoss } from './fixtures'
-
-/** Project the fixture's completed + current sets onto the recap card's set rows. */
-function deriveRecapSets(model: DashboardModel): SetRowProps[] {
-  const { session, live } = model
-  const done: SetRowProps[] = session.completedSets.map((set, i) => ({
-    state: 'done',
-    setNumber: i + 1,
-    unit: session.unit,
-    reps: set.repCount,
-    weight: set.weightLbs,
-    rpe: 8 + i * 0.5,
-    velocities: set.reps,
-  }))
-  const current: SetRowProps = {
-    state: 'done',
-    setNumber: session.completedSets.length + 1,
-    unit: session.unit,
-    reps: live.repVelocities.length,
-    weight: session.weightLbs,
-    rpe: 9,
-    velocities: live.repVelocities,
-  }
-  return [...done, current]
-}
-
-/**
- * Lab specimen — the REST stage of the North Star wall dashboard.
- *
- * A rest read-out: the countdown, a recap of the set just finished, the set's verdict
- * metrics, and a preview of what's next. NOT a published component — lab-scoped only.
- */
-export function RestView({ model }: { model: DashboardModel }) {
-  const { live, session } = model
-  const verdict = verdictFromLoss(live.velocityLossPct)
-  const meanCon = meanVelocity(live.repVelocities)
-  const peakCon = Math.max(...live.repVelocities)
-
-  return (
-    <View className="flex-row" style={{ flex: 1, padding: 20, gap: 20 }}>
-      {/* left: the countdown + the just-completed exercise recap. */}
-      <View style={{ flex: 2, gap: 20 }}>
-        {/* Rest countdown — ring variant (across-the-room wall treatment). */}
-        <RestTimer
-          variant="ring"
-          size={220}
-          totalSeconds={120}
-          elapsedMs={47_000}
-          visible
-          nextSetInfo={`Next · ${session.exerciseName} · set ${session.completedSets.length + 2} of ${session.plannedSets}`}
-          onSkip={() => {}}
-          onAddTime={() => {}}
-        />
-
-        <View style={{ gap: 8 }}>
-          <Text
-            className="text-text-tertiary"
-            style={{ fontSize: 11, fontWeight: '700', letterSpacing: 1 }}
-          >
-            SET JUST COMPLETED
-          </Text>
-          <ExerciseCard
-            name={session.exerciseName}
-            expanded
-            summary={{
-              sets: session.plannedSets,
-              reps: 8,
-              weight: session.weightLbs,
-              unit: session.unit,
-            }}
-            tempo={session.tempo}
-            indicator="velocity-loss"
-            sets={deriveRecapSets(model)}
-          />
-        </View>
-      </View>
-
-      {/* right: the set verdict + the next-set preview (mock). */}
-      <View style={{ flex: 1, gap: 24 }}>
-        <View style={{ gap: 6 }}>
-          <Text
-            className="text-text-tertiary"
-            style={{ fontSize: 11, fontWeight: '700', letterSpacing: 1 }}
-          >
-            SET VERDICT
-          </Text>
-          {/* MetricGroup ×4 — the read-once summary of the finished set. */}
-          <MetricGroup>
-            <Metric size="md" value={meanCon.toFixed(2)} unit="m/s" label="Mean con" />
-            <Metric size="md" value={peakCon.toFixed(2)} unit="m/s" label="Peak con" />
-          </MetricGroup>
-          <MetricGroup>
-            <Metric size="md" value={`${live.velocityLossPct}%`} label="Vel loss" trend="down" />
-            <Metric size="md" value={String(live.repVelocities.length)} label="Reps" />
-          </MetricGroup>
-          <MetricGroup>
-            <Metric size="md" value={String(session.weightLbs)} unit="lbs" label="Load" />
-            <Metric size="md" value={String(live.peakForce)} unit="N" label="Peak force" />
-          </MetricGroup>
-          <MetricGroup>
-            <Metric
-              size="md"
-              value={verdict === 'threshold' ? 'MOD' : verdict === 'stop' ? 'HIGH' : 'LOW'}
-              label="Fatigue"
-              trend={verdict === 'productive' ? 'up' : 'neutral'}
-            />
-            <Metric
-              size="md"
-              value={String(live.lastRep.rom.toFixed(2))}
-              unit="m"
-              label="Avg ROM"
-            />
-          </MetricGroup>
-        </View>
-
-        {/* mock "next set" block — clearly labelled NO-DATA / mock, not a wired read-model. */}
-        <View
-          className="border-border"
-          style={{ borderWidth: 1, borderStyle: 'dashed', borderRadius: 10, padding: 16, gap: 4 }}
-        >
-          <Text
-            className="text-text-tertiary"
-            style={{ fontSize: 10, fontWeight: '700', letterSpacing: 1 }}
-          >
-            NEXT SET · MOCK (NO DATA)
-          </Text>
-          <Text className="text-text-primary" style={{ fontSize: 18, fontWeight: '700' }}>
-            {session.exerciseName}
-          </Text>
-          <Text className="text-text-secondary" style={{ fontSize: 13 }}>
-            {`Set ${session.completedSets.length + 2} · target 8 × ${session.weightLbs} ${session.unit}`}
-          </Text>
-        </View>
-      </View>
-    </View>
-  )
-}