@titan-design/react-ui 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titan-design/react-ui",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Cross-platform design system built on Gluestack UI",
   "author": "Henry Jewkes",
   "license": "MIT",
@@ -147,6 +147,7 @@
   "files": [
     "dist",
     "src",
+    "!src/lab",
     "docs",
     "tailwind.config.js"
   ],

package/src/test/no-device-internals.test.ts

@@ -0,0 +1,51 @@
+/* eslint-disable titan/no-device-internals --
+ * This file is the rule's own test bench, so it necessarily contains the shapes
+ * the rule rejects. Every value below is invented for the test — none is a real
+ * device value.
+ */
+import { RuleTester } from 'eslint'
+import rule from '../../eslint-rules/no-device-internals'
+
+const ruleTester = new RuleTester({
+  languageOptions: { ecmaVersion: 2022, sourceType: 'module' },
+})
+
+describe('no-device-internals', () => {
+  it('flags device internals without flagging design-system content', () => {
+    ruleTester.run('no-device-internals', rule as never, {
+      valid: [
+        // Hex colours are the dominant hex form in this package.
+        { code: "const bg = '#1C1C1C'" },
+        { code: "const bg = '#fff'" },
+        { code: 'const bg = `${base} #1C1C1CFF`' },
+        // Dimension and ratio strings: the `\b` guard before `0x` means a digit
+        // followed by `x` never reads as a hex literal. These exact strings
+        // tripped an earlier, looser sweep.
+        { code: "// icons render at 20x20" },
+        { code: "// 200x400 intrinsic -> ~160x320 px" },
+        // SVG path coordinates — digit-only runs are not byte frames.
+        { code: 'const d = "M12 2 22 12 12 22 2 12Z"' },
+        { code: 'const d = "M7 7 17 17 12 22 12 2 17 7 7 17"' },
+        // Timestamps — `-` and `:` are not byte separators.
+        { code: "// datetime // 2024-01-15 14:30" },
+        // "cascade" in its CSS sense is ordinary styling vocabulary.
+        { code: "// RN doesn't cascade text color, so hand-color the text" },
+        // Plain numbers and durations.
+        { code: 'const duration = 300' },
+      ],
+      invalid: [
+        // Bare hex identifier, in code and in a comment.
+        { code: 'const mode = 0xab', errors: [{ messageId: 'hex' }] },
+        { code: '// resistance mode (cmd=0xab)', errors: [{ messageId: 'hex' }] },
+        { code: "const s = 'send cmd=0xab now'", errors: [{ messageId: 'hex' }] },
+        // Raw byte frame: 4+ space-separated pairs including hex letters.
+        { code: '// frame: ab cd ef 01', errors: [{ messageId: 'frame' }] },
+        // Transport UUID.
+        {
+          code: "const id = '0000fe59-1234-5678-9abc-def012345678'",
+          errors: [{ messageId: 'uuid' }],
+        },
+      ],
+    })
+  })
+})

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

@@ -1,101 +0,0 @@
-// 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>
-  )
-}

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>
-  )
-}

package/src/lab/north-star/fixtures.ts

@@ -1,224 +0,0 @@
-/**
- * Fixtures for the `Lab/North Star/Live Wall Dashboard` specimen.
- *
- * Shapes deliberately MIRROR the voltras-mcp dashboard store read-models so a later
- * provisional wiring is a mechanical field map, not a reshape:
- *   - {@link LiveModel}    — the live-set telemetry read-model (`velocity`, `force`,
- *     `phase`, `lastRep`, `velocityLossPct`).
- *   - {@link SessionModel} — the session read-model (`exerciseName` + completed sets).
- *   - {@link CompletedSet} — a logged set (`weightLbs`, `mode`, `repCount`, `reps`).
- *
- * The presentational titan props each view consumes are DERIVED from these read-models
- * (see the `derive*` helpers) — the same projection the store→component adapter will do.
- * Numbers are realistic cable chest-press strength-training values.
- */
-import type { SessionRailExercise } from '../../components'
-
-// --- Store read-model shapes (mirror voltras-mcp dashboard store) -------------
-
-/** One completed rep's per-rep telemetry (mean-concentric metric family). */
-export interface RepModel {
-  /** Mean CONCENTRIC velocity (m/s) — the canonical metric (brain WA-D02). */
-  vCon: number
-  /** Range of motion (m). */
-  rom: number
-  /** Peak instantaneous velocity (m/s). */
-  peakVelocity: number
-}
-
-/** The live-set telemetry read-model. */
-export interface LiveModel {
-  /** Instantaneous cable velocity (m/s). */
-  velocity: number
-  /** Instantaneous cable force (N). */
-  force: number
-  /** Current movement phase. */
-  phase: 'concentric' | 'hold' | 'eccentric' | 'idle'
-  /** Elapsed time (ms) within the current phase — drives the live tempo fill. */
-  phaseElapsedMs: number
-  /** The most-recently completed rep. */
-  lastRep: RepModel
-  /** Per-rep mean-concentric velocities logged so far this set (m/s). */
-  repVelocities: number[]
-  /** Velocity loss vs the set's best rep (%). Drives verdict + aura + fatigue. */
-  velocityLossPct: number
-  /** Peak concentric force this set (N). */
-  peakForce: number
-}
-
-/** A logged set on the session read-model. */
-export interface CompletedSet {
-  weightLbs: number
-  /** Resistance mode (cascade echo, cmd=0x10). */
-  mode: 'weight' | 'chains' | 'eccentric' | 'isokinetic'
-  repCount: number
-  /** Per-rep mean-concentric velocities (m/s). */
-  reps: number[]
-}
-
-/** The session read-model. */
-export interface SessionModel {
-  exerciseName: string
-  title: string
-  weightLbs: number
-  unit: 'lbs' | 'kg'
-  /**
-   * Prescribed tempo tuple [ecc, pauseBottom, con, pauseTop]. OPTIONAL — a set may carry no
-   * prescribed tempo (coach left it unset and no exercise default); the live view then hides
-   * the tempo readout entirely rather than inventing one.
-   */
-  tempo?: [number, number, number, number]
-  completedSets: CompletedSet[]
-  plannedSets: number
-}
-
-/** The full store snapshot the specimen reads. */
-export interface DashboardModel {
-  live: LiveModel
-  session: SessionModel
-}
-
-// --- The fixture instance -----------------------------------------------------
-
-/**
- * A mid-set cable chest press: 6 reps in, velocity decaying from 0.52 → 0.405 m/s,
- * ~22% velocity loss (the VL20–VL30 mid-zone → `threshold` verdict / amber aura).
- */
-export const dashboardFixture: DashboardModel = {
-  live: {
-    velocity: 0.41,
-    force: 498,
-    phase: 'concentric',
-    phaseElapsedMs: 700,
-    lastRep: { vCon: 0.405, rom: 0.58, peakVelocity: 0.61 },
-    repVelocities: [0.52, 0.5, 0.48, 0.46, 0.44, 0.405],
-    velocityLossPct: 22,
-    peakForce: 542,
-  },
-  session: {
-    exerciseName: 'Cable Chest Press',
-    title: 'Push A · Hypertrophy',
-    weightLbs: 140,
-    unit: 'lbs',
-    tempo: [3, 1, 1, 0],
-    plannedSets: 4,
-    completedSets: [
-      {
-        weightLbs: 140,
-        mode: 'weight',
-        repCount: 8,
-        reps: [0.55, 0.54, 0.52, 0.51, 0.49, 0.47, 0.45, 0.43],
-      },
-      {
-        weightLbs: 140,
-        mode: 'weight',
-        repCount: 8,
-        reps: [0.53, 0.52, 0.5, 0.48, 0.46, 0.44, 0.42, 0.4],
-      },
-    ],
-  },
-}
-
-// --- Derived projections (store read-model → titan presentational props) -------
-
-/** Arithmetic mean of a per-rep velocity array (m/s). */
-export function meanVelocity(reps: number[]): number {
-  if (reps.length === 0) return 0
-  return reps.reduce((a, v) => a + v, 0) / reps.length
-}
-
-/** Verdict status from velocity loss %, matching FatigueMeter's VL20/VL30 bands. */
-export function verdictFromLoss(lossPct: number): 'productive' | 'threshold' | 'stop' {
-  if (lossPct >= 30) return 'stop'
-  if (lossPct >= 20) return 'threshold'
-  return 'productive'
-}
-
-/**
- * The session rail's exercise list, projected from the model: the current exercise
- * (active), the completed sets behind it, and an upcoming accessory.
- */
-export function deriveRailExercises(model: DashboardModel): SessionRailExercise[] {
-  const { session, live } = model
-  return [
-    {
-      id: 'chest-press',
-      name: session.exerciseName,
-      summary: {
-        sets: session.plannedSets,
-        reps: 8,
-        weight: session.weightLbs,
-        unit: session.unit,
-      },
-      tempo: session.tempo,
-      indicator: 'velocity-loss',
-      setStates: [
-        { status: 'done', velocities: session.completedSets[0].reps },
-        { status: 'done', velocities: session.completedSets[1].reps },
-        { status: 'active', velocities: live.repVelocities, planned: 8 },
-        { status: 'todo', planned: 8 },
-      ],
-    },
-    {
-      id: 'incline-db',
-      name: 'Incline DB Press',
-      summary: { sets: 3, reps: 10, weight: 55, unit: 'lbs' },
-      tempo: [2, 0, 1, 0],
-      setStates: [
-        { status: 'todo', planned: 10 },
-        { status: 'todo', planned: 10 },
-        { status: 'todo', planned: 10 },
-      ],
-      upcoming: true,
-    },
-    {
-      id: 'cable-fly',
-      name: 'Cable Fly',
-      summary: { sets: 3, reps: 12, weight: 30, unit: 'lbs' },
-      setStates: [
-        { status: 'todo', planned: 12 },
-        { status: 'todo', planned: 12 },
-        { status: 'todo', planned: 12 },
-      ],
-      upcoming: true,
-    },
-  ]
-}
-
-// --- Dual-mode (bilateral) projection -----------------------------------------
-
-/**
- * Split a single-cable model into a bilateral (dual-mode) pair — one model per voltra.
- *
- * A dual-mode exercise drives two Voltra devices as a left/right pair. For v1 the two
- * layers are rendered independently (one {@link LiveModel} each); a unified split-bar
- * treatment is deferred. The fixture gives the RIGHT side a realistic left-dominant
- * deficit (slightly slower reps, more velocity loss, a touch less force) so the two
- * layers read as genuinely different streams rather than a mirror.
- */
-export function deriveDualModel(base: DashboardModel = dashboardFixture): {
-  left: DashboardModel
-  right: DashboardModel
-} {
-  // Left is the dominant side — the base fixture verbatim.
-  const left: DashboardModel = base
-  // Right lags: ~8% slower per-rep concentric velocity, +7 pts velocity loss, ~6% less force.
-  const scale = (v: number) => Number((v * 0.92).toFixed(3))
-  const right: DashboardModel = {
-    session: base.session,
-    live: {
-      ...base.live,
-      velocity: scale(base.live.velocity),
-      force: Math.round(base.live.force * 0.94),
-      peakForce: Math.round(base.live.peakForce * 0.94),
-      velocityLossPct: base.live.velocityLossPct + 7,
-      repVelocities: base.live.repVelocities.map(scale),
-      lastRep: {
-        vCon: scale(base.live.lastRep.vCon),
-        rom: Number((base.live.lastRep.rom * 0.96).toFixed(2)),
-        peakVelocity: scale(base.live.lastRep.peakVelocity),
-      },
-    },
-  }
-  return { left, right }
-}