@titan-design/react-ui 0.12.0 → 0.13.0

package/src/components/custom/Workout/S3SetTypes.stories.tsx

@@ -1,176 +0,0 @@
-/**
- * SHEET · Session Rail — set-type encodings (R&D). Throwaway specimen at real rail width, on real tokens.
- * Explores the cases the flat `sets × reps @ load` strip doesn't model:
- *   1. Variable rep-range — range-max segments; the variable zone (floor→max) upcoming part gets its OWN color.
- *   2. Drop set — ONE bar, sub-loads separated by thin NOTCHES (< the between-set gap); reps velocity-colored.
- *   3. Myo-rep / rest-pause — activation chunk + mini-clusters separated by small cluster gaps.
- * Gap hierarchy: butted reps (0) < notch (2, drop sub-load) < cluster gap (3, myo rest-pause) < SET_GAP (5, sets).
- * Hardens into a SetStrip model extension (SetState variants: range/drop/myo) — a post-harden follow-up.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Fragment } from 'react'
-import { primitiveRamps as ramp, greyRamp } from '../../../theme/tokens/primitives'
-import { GREY, RAIL_W, SET_GAP, T_PRIMARY, T_SECONDARY, T_TERTIARY, INSET, velColor, reps, Page, sectionTitle } from './setHeadingKit'
-
-// ---- variable-zone (floor→max) upcoming color — real ramp candidates (no invented hex)
-const VAR_GREY = greyRamp[800] // #3C3C3C — lighter grey (the paler-grey reference)
-const VAR_BLUE_800 = ramp.blue[800] // #14407E — clearly blue, a touch brighter
-const VAR_BLUE_900 = ramp.blue[900] // #112C5A — dark muted navy, recessive
-const VAR_CYAN_900 = ramp.cyan[900] // #0B3149 — teal alt, sidesteps info-blue adjacency
-const NOTCH = 2 // drop sub-load divider
-const CLUSTER_GAP = 3 // myo rest-pause divider
-
-type Chunk = { colors: string[]; gapAfter?: number }
-function Bar({ chunks, h }: { chunks: Chunk[]; h: number }) {
-  return (
-    <div style={{ display: 'flex', width: '100%', height: h, borderRadius: 2, overflow: 'hidden' }}>
-      {chunks.map((ch, ci) => (
-        <Fragment key={ci}>
-          {ch.colors.map((c, i) => (
-            <div key={i} style={{ flex: 1, minWidth: 0, height: '100%', background: c }} />
-          ))}
-          {ci < chunks.length - 1 && <div style={{ flex: `0 0 ${ch.gapAfter ?? NOTCH}px`, height: '100%', background: INSET }} />}
-        </Fragment>
-      ))}
-    </div>
-  )
-}
-
-// ---- 1. variable rep-range: `max` segments; committed 0..floor, variable floor..max; variable-todo gets VAR color
-function rangeColors(floor: number, max: number, doneVels: number[], varColor: string): string[] {
-  return Array.from({ length: max }, (_, i) => {
-    if (i < doneVels.length) return velColor(doneVels[i])
-    return i < floor ? GREY : varColor
-  })
-}
-function RangeBar({ floor, max, done, varColor, h }: { floor: number; max: number; done: number[]; varColor: string; h: number }) {
-  return <Bar chunks={[{ colors: rangeColors(floor, max, done, varColor) }]} h={h} />
-}
-
-// ---- 2. drop set: one bar, sub-loads butted internally, separated by thin notches
-function DropBar({ subloads, h }: { subloads: number[][]; h: number }) {
-  const chunks: Chunk[] = subloads.map((vels, i) => ({ colors: vels.map(velColor), gapAfter: NOTCH, ...(i === subloads.length - 1 ? { gapAfter: undefined } : {}) }))
-  return <Bar chunks={chunks} h={h} />
-}
-
-// ---- 3. myo-rep: activation chunk + mini-clusters, separated by cluster gaps
-function MyoBar({ activation, clusters, h }: { activation: number[]; clusters: number[][]; h: number }) {
-  const chunks: Chunk[] = [{ colors: activation.map(velColor), gapAfter: CLUSTER_GAP }, ...clusters.map((c) => ({ colors: c.map(velColor), gapAfter: CLUSTER_GAP }))]
-  return <Bar chunks={chunks} h={h} />
-}
-
-// ---- 3b. UPCOMING myo, unknown length: grey activation (expected) + a blue "clusters-to-failure" trail
-// that fades and leaves the right edge open — signalling "N more clusters, count unknown".
-function MyoUpcomingBar({ activationLen, blue, h }: { activationLen: number; blue: string; h: number }) {
-  const fades = [1, 0.6, 0.32] // decreasing opacity per expected cluster → "and maybe more"
-  return (
-    <div style={{ display: 'flex', width: '100%', height: h, gap: 0 }}>
-      <div style={{ display: 'flex', flex: activationLen, height: '100%', borderRadius: '2px 0 0 2px', overflow: 'hidden' }}>
-        {Array.from({ length: activationLen }, (_, i) => (
-          <div key={i} style={{ flex: 1, height: '100%', background: GREY }} />
-        ))}
-      </div>
-      {fades.map((op, ci) => (
-        <Fragment key={ci}>
-          <div style={{ flex: `0 0 ${CLUSTER_GAP}px`, height: '100%', background: INSET }} />
-          <div style={{ display: 'flex', flex: 5, height: '100%', overflow: 'hidden', opacity: op }}>
-            {Array.from({ length: 5 }, (_, i) => (
-              <div key={i} style={{ flex: 1, height: '100%', background: blue }} />
-            ))}
-          </div>
-        </Fragment>
-      ))}
-    </div>
-  )
-}
-
-// ---- row scaffold at real rail width, on the sunk inset surface
-function Row({ name, meta, children }: { name: string; meta: string; children: React.ReactNode }) {
-  return (
-    <div style={{ width: RAIL_W, background: INSET, padding: '9px 12px', borderRadius: 4 }}>
-      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
-        <span style={{ fontSize: 14, fontWeight: 800, color: T_PRIMARY }}>{name}</span>
-        <div style={{ flex: 1 }} />
-        <span style={{ fontSize: 10, fontFamily: 'monospace', color: T_TERTIARY }}>{meta}</span>
-      </div>
-      {children}
-    </div>
-  )
-}
-function Col({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-      <span style={{ ...sectionTitle, color: T_SECONDARY }}>{label}</span>
-      {children}
-    </div>
-  )
-}
-
-const H = 8
-
-function Sheet() {
-  return (
-    <Page title="Session Rail — set-type encodings" note="R&D for prescriptions the flat sets×reps strip doesn't model. Rail width, real velocity ramp pins. Rep-range: range-max segments, the variable zone (floor→max) upcoming part gets its own color. Drop: one bar, sub-loads split by thin notches. Myo: activation + mini-clusters split by cluster gaps.">
-      <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap', alignItems: 'flex-start' }}>
-        {/* 1. variable rep-range — real ramp candidates for the variable zone */}
-        <Col label="1 · variable rep-range — LOCKED: cyan 900">
-          {([
-            ['grey · grey 200', VAR_GREY],
-            ['blue 800 · #14407E', VAR_BLUE_800],
-            ['blue 900 · #112C5A', VAR_BLUE_900],
-            ['cyan 900 · #0B3149', VAR_CYAN_900],
-          ] as const).map(([label, c]) => (
-            <Row key={label} name="Face Pull" meta="3 × 15–20 @ 40">
-              <span style={{ fontSize: 9, color: T_TERTIARY, display: 'block', marginBottom: 5 }}>{label}</span>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: SET_GAP }}>
-                <RangeBar floor={15} max={20} done={[]} varColor={c} h={H} />
-                <RangeBar floor={15} max={20} done={reps(12, 0.9)} varColor={c} h={H} />
-                <RangeBar floor={15} max={20} done={reps(17, 0.8)} varColor={c} h={H} />
-              </div>
-            </Row>
-          ))}
-          <span style={{ fontSize: 10, color: T_TERTIARY, maxWidth: RAIL_W }}>Each block: todo · 12 done (committed) · 17 done (into the variable zone). Variable-todo = the swatch; committed-todo = grey.</span>
-        </Col>
-
-        {/* 2. drop set */}
-        <Col label="2 · drop set">
-          <Row name="Lat Pulldown" meta="1 drop · 10→8→6 @ 120→80">
-            <DropBar subloads={[reps(10, 0.85), reps(8, 0.7), reps(6, 0.6)]} h={H} />
-          </Row>
-          <Row name="Leg Extension" meta="1 drop · 12→10→8→6 @ 90→45">
-            <DropBar subloads={[reps(12, 0.8), reps(10, 0.7), reps(8, 0.62), reps(6, 0.55)]} h={H} />
-          </Row>
-          <span style={{ fontSize: 10, color: T_TERTIARY, maxWidth: RAIL_W }}>One set, no rest; notches mark each load drop. Notch (2px) &lt; set gap (5px) so drops read as sub-structure of a single set.</span>
-        </Col>
-
-        {/* 3. myo-rep */}
-        <Col label="3 · myo-rep / rest-pause">
-          <Row name="Cable Curl" meta="myo · done · 15 + 5 + 5 + 5">
-            <MyoBar activation={reps(15, 0.75)} clusters={[reps(5, 0.6), reps(5, 0.55), reps(5, 0.5)]} h={H} />
-          </Row>
-          <Row name="Triceps Pushdown" meta="myo · done · 12 + 4 + 4">
-            <MyoBar activation={reps(12, 0.7)} clusters={[reps(4, 0.55), reps(4, 0.5)]} h={H} />
-          </Row>
-          <span style={{ fontSize: 10, color: T_TERTIARY, maxWidth: RAIL_W }}>Done: activation to near-failure, then rest-pause clusters. Cluster gap (3px) between notch and set gap.</span>
-          <span style={{ ...sectionTitle, color: T_SECONDARY, marginTop: 6 }}>upcoming · length unknown</span>
-          <Row name="Cable Curl" meta="myo · ~15 + clusters to failure">
-            <MyoUpcomingBar activationLen={15} blue={VAR_CYAN_900} h={H} />
-          </Row>
-          <Row name="Triceps Pushdown" meta="myo · ~12 + clusters to failure">
-            <MyoUpcomingBar activationLen={12} blue={VAR_CYAN_900} h={H} />
-          </Row>
-          <span style={{ fontSize: 10, color: T_TERTIARY, maxWidth: RAIL_W }}>{'Grey activation (expected) + blue "clusters-to-failure" trail that fades and leaves the right edge open — reuses the variable/opportunity blue, signalling "more coming, count unknown."'}</span>
-        </Col>
-      </div>
-    </Page>
-  )
-}
-
-const meta: Meta = {
-  title: 'Lab/Explorations/Set Types',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-type Story = StoryObj
-
-export const Encodings: Story = { render: () => <Sheet /> }

package/src/components/custom/Workout/S3WorkoutExpansion.stories.tsx

@@ -1,240 +0,0 @@
-/**
- * SHEET · Workout Expansion (page 2) — what a rail item reveals when expanded.
- * Anchored on the REAL unexpanded rail row (`ExerciseCardHeading`) as the persistent header, then the
- * revealed body in two REAL-component directions so the fork is concrete:
- *   A — Table   (real `SetTableHeader` + real `SetRow`s — the current expanded body).
- *   C — Embed   (real `VelocityStrip` full/expanded per set + a compact caption — the bar IS the set).
- * B (drop PREV) is a trivial prop on the table, noted but not forked here. Same data across both: set 1 done
- * · set 2 LIVE 5/10 · set 3 upcoming, with velocities that DECAY within a set so the "shape" reading is real.
- * OPEN: A-vs-C · live-set treatment in the body · read-only density (drop TEMPO row? per-row strips?). DECISIONS doc.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View, Text } from 'react-native'
-import { ExerciseCardHeading } from './ExerciseCardHeading'
-import { SetTableHeader } from './SetTableHeader'
-import { SetRow, type SetRowProps } from './SetRow'
-import { VelocityStrip } from './VelocityStrip'
-import { type SetStripSet } from './SetStrip'
-import {
-  INSET,
-  INSET_SHADOW,
-  RAISED,
-  BORDER_SUBTLE,
-  GREEN,
-  T_PRIMARY,
-  T_SECONDARY,
-  T_TERTIARY,
-  Page,
-  sectionTitle,
-  monoTag,
-} from './setHeadingKit'
-
-// Per-rep mean velocity that DECAYS across a set (fast → slow) so bar height/color carries shape.
-const decay = (n: number, start: number, span = 0.5) =>
-  Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
-
-// ---- shared data (real prop shapes) ------------------------------------------------
-// Heading strip (SetStripSet[]): set1 done · set2 active 5/10 · set3 todo.
-const HEADING_STATES: SetStripSet[] = [
-  { status: 'done', velocities: decay(10, 1.05) },
-  { status: 'active', velocities: decay(5, 0.95, 0.3), planned: 10 },
-  { status: 'todo', planned: 10 },
-]
-// Expanded-body per-set rows (real SetRowProps): set 1 done · set 2 LIVE · set 3 todo.
-const BODY_SETS: SetRowProps[] = [
-  {
-    state: 'done',
-    setNumber: 1,
-    reps: 10,
-    weight: 90,
-    rpe: 7.5,
-    unit: 'lbs',
-    velocities: decay(10, 1.05),
-  },
-  {
-    state: 'live',
-    setNumber: 2,
-    unit: 'lbs',
-    target: { reps: 10, weight: 90 },
-    reps: 10,
-    weight: 90,
-    velocities: decay(5, 0.95, 0.3),
-  },
-  { state: 'todo', setNumber: 3, unit: 'lbs', target: { reps: 10, weight: 90 } },
-]
-
-// ---- the real unexpanded rail row, used as the persistent expansion header ---------
-function RailHeader() {
-  return (
-    <View style={{ position: 'relative', zIndex: 2, backgroundColor: RAISED }}>
-      <ExerciseCardHeading
-        name="Cable Chest Press"
-        sets={3}
-        reps={10}
-        load={90}
-        unit="lbs"
-        tempo={[2, 1, 2, 0]}
-        indicator="info"
-        setStates={HEADING_STATES}
-      />
-    </View>
-  )
-}
-
-// ---- A · table body: real SetTableHeader + real SetRow (LOCKED: drop PREV, keep strips)
-function TableBody() {
-  return (
-    <View>
-      <SetTableHeader unit="lbs" showPrevious={false} />
-      {BODY_SETS.map((s, i) => (
-        <SetRow key={i} {...s} />
-      ))}
-    </View>
-  )
-}
-
-// ---- C · embed body: real VelocityStrip (full/expanded) per set + compact caption ---
-const capText = {
-  fontFamily: 'Inter, sans-serif',
-  fontSize: 11,
-  fontWeight: '600' as const,
-  color: T_PRIMARY,
-}
-const dimText = { ...capText, color: T_SECONDARY, fontWeight: '500' as const }
-function EmbedSetRow({ s }: { s: SetRowProps }) {
-  const live = s.state === 'live'
-  const todo = s.state === 'todo'
-  const vels = s.state === 'done' || s.state === 'live' ? s.velocities : []
-  const rpe = s.state === 'todo' ? null : s.rpe
-  return (
-    <View
-      style={{
-        paddingVertical: 7,
-        paddingHorizontal: 10,
-        marginHorizontal: 2,
-        marginBottom: 4,
-        borderRadius: 8,
-        opacity: todo ? 0.55 : 1,
-        ...(live
-          ? {
-              backgroundColor: 'rgba(46,213,115,0.06)',
-              borderWidth: 1,
-              borderColor: 'rgba(46,213,115,0.30)',
-            }
-          : {}),
-      }}
-    >
-      <View style={{ flexDirection: 'row', alignItems: 'baseline', marginBottom: 6 }}>
-        <Text style={{ ...dimText, width: 22, color: T_TERTIARY }}>{s.setNumber}</Text>
-        {s.state === 'live' ? (
-          <Text style={{ ...capText, color: GREEN, fontWeight: '700' }}>
-            {vels.length}/{s.target.reps} × {s.target.weight}
-          </Text>
-        ) : s.state === 'done' ? (
-          <Text style={capText}>
-            {s.reps} × {s.weight}
-          </Text>
-        ) : (
-          <Text style={dimText}>
-            {s.target.reps} × {s.target.weight}
-          </Text>
-        )}
-        <View style={{ flex: 1 }} />
-        {rpe != null && <Text style={dimText}>RPE {rpe}</Text>}
-        {live && <Text style={{ ...capText, color: GREEN, fontWeight: '700' }}>live</Text>}
-      </View>
-      {vels.length > 0 ? (
-        <VelocityStrip velocities={vels} variant="expanded" showInfo={false} />
-      ) : (
-        <View style={{ height: 24, flexDirection: 'row', gap: 2 }}>
-          {Array.from({ length: s.state === 'todo' ? s.target.reps : 10 }).map((_, i) => (
-            <View
-              key={i}
-              style={{
-                flex: 1,
-                height: 6,
-                alignSelf: 'flex-end',
-                backgroundColor: '#2C2C2C',
-                borderRadius: 1,
-                opacity: 0.5,
-              }}
-            />
-          ))}
-        </View>
-      )}
-    </View>
-  )
-}
-function EmbedBody() {
-  return (
-    <View style={{ paddingTop: 6 }}>
-      {BODY_SETS.map((s, i) => (
-        <EmbedSetRow key={i} s={s} />
-      ))}
-    </View>
-  )
-}
-
-// ---- expanded item = real rail header + revealed body ------------------------------
-function ExpandedItem({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <View style={{ gap: 8 }}>
-      <Text style={{ ...monoTag, color: T_SECONDARY }}>{label}</Text>
-      <View
-        style={
-          {
-            width: 260,
-            backgroundColor: INSET,
-            boxShadow: INSET_SHADOW,
-            borderRadius: 4,
-            overflow: 'hidden',
-          } as object
-        }
-      >
-        <RailHeader />
-        <View
-          style={{
-            backgroundColor: INSET,
-            paddingBottom: 8,
-            borderTopWidth: 1,
-            borderTopColor: BORDER_SUBTLE,
-          }}
-        >
-          {children}
-        </View>
-      </View>
-    </View>
-  )
-}
-
-const meta: Meta = {
-  title: 'Lab/Explorations/Workout Expansion',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-type Story = StoryObj
-
-export const DirectionStudy: Story = {
-  name: 'Expanded item · A table / C embed-in-bar (real components)',
-  render: () => (
-    <Page
-      title="Workout expansion — direction study (page 2)"
-      note="LOCKED (2026-07-10): body = direction A, the SetTableHeader+SetRow table, with PREV dropped (real showPrevious={false}) and the per-row velocity strips kept. C (per-rep VelocityStrip becomes the set row) shown for the record — rejected as too novel; the table already carries velocity shape via the per-row strip. Anchored on the REAL unexpanded rail row (ExerciseCardHeading) as the persistent header; data: set 1 done · set 2 live 5/10 · set 3 upcoming, velocities decaying within a set."
-    >
-      <View style={{ flexDirection: 'row', gap: 44, alignItems: 'flex-start', flexWrap: 'wrap' }}>
-        <View style={{ gap: 12 }}>
-          <Text style={sectionTitle}>A · Table (current body)</Text>
-          <ExpandedItem label="real SetTableHeader + SetRow">
-            <TableBody />
-          </ExpandedItem>
-        </View>
-        <View style={{ gap: 12 }}>
-          <Text style={sectionTitle}>C · Embed in the bar</Text>
-          <ExpandedItem label="real VelocityStrip (full) + caption">
-            <EmbedBody />
-          </ExpandedItem>
-        </View>
-      </View>
-    </Page>
-  ),
-}

package/src/components/shell/DashboardShell.stories.tsx

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View, Text } from 'react-native'
-import { DashboardShell } from './DashboardShell'
-
-/**
- * `Pages/DashboardShell` — the wall-dashboard chrome as one registered surface.
- * Composes the shell-nav island (SideNav + TopBar and everything they pull in) over a
- * `children` content slot, so the dashboard app mounts a single component.
- */
-const meta: Meta<typeof DashboardShell> = {
-  title: 'Pages/DashboardShell',
-  component: DashboardShell,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          '**Page shell.** The wall-dashboard chrome. Composes ' +
-          '[SideNav](?path=/docs/shell-sidenav--docs) + ' +
-          '[TopBar](?path=/docs/shell-topbar--docs) — which pulls in DeviceMenu, DeviceRow, ' +
-          'DeviceIndicator, SessionStatePill, BrandLockup, DateTime and Divider — over a ' +
-          '`children` content slot. Mount this instead of re-assembling the chrome per view.',
-      },
-    },
-  },
-  argTypes: {
-    state: { control: 'select', options: ['live', 'rest', 'idle'] },
-    activeKey: { control: 'select', options: ['live', 'review', 'program', 'body'] },
-    liveKey: { control: 'select', options: [null, 'live', 'review', 'program', 'body'] },
-    onNavigate: { control: false },
-    onSelectDevice: { control: false },
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ height: '100vh' as unknown as number, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof DashboardShell>
-
-export const Default: Story = {
-  args: { activeKey: 'live', state: 'live' },
-}
-
-export const WithContent: Story = {
-  args: { activeKey: 'review', state: 'rest', liveKey: 'live' },
-  render: (args) => (
-    <DashboardShell {...args}>
-      <View style={{ flex: 1, padding: 28 }}>
-        <Text style={{ color: '#E5E5E5', fontSize: 22, fontWeight: '700' }}>Review</Text>
-        <Text style={{ color: '#8A8A8A', fontSize: 13, marginTop: 6 }}>
-          A page mounts its content here; the shell keeps the nav + top-bar chrome persistent.
-        </Text>
-      </View>
-    </DashboardShell>
-  ),
-  parameters: {
-    docs: { description: { story: 'The shell with a page mounted in its content slot.' } },
-  },
-}

package/src/components/shell/DashboardShell.tsx

@@ -1,75 +0,0 @@
-import type { ReactNode } from 'react'
-import { View, Text } from 'react-native'
-import { cn } from '../../utils/cn'
-import { Surface } from '../ui/surface'
-import { SideNav, type SideNavItem } from './SideNav'
-import { TopBar } from './TopBar'
-import { type Device } from './DeviceRow'
-import { type SessionState } from './SessionStatePill'
-
-/**
- * `DashboardShell` — the wall-dashboard chrome: a persistent {@link SideNav} rail +
- * {@link TopBar} over a main content region. A thin frame that wires the shell-nav
- * organisms together and exposes a `children` content slot, so the dashboard app
- * mounts one component instead of re-assembling the chrome. Driven entirely by props.
- */
-export interface DashboardShellProps {
-  /** Active nav category key. */
-  activeKey?: string
-  /** Nav categories, top → bottom. Defaults to SideNav's four dashboard categories. */
-  navItems?: SideNavItem[]
-  /** A category with off-view live activity → a quiet cue on that item. */
-  liveKey?: string | null
-  /** Global session state → the TopBar status pill. */
-  state?: SessionState
-  /** Connected devices → the TopBar connection glyph + dropdown. */
-  devices?: Device[]
-  /** TopBar brand subtitle. */
-  subtitle?: string
-  onNavigate?: (key: string) => void
-  onSelectDevice?: (device: Device) => void
-  /** Main content region. A placeholder renders when omitted. */
-  children?: ReactNode
-  className?: string
-}
-
-const DEMO_DEVICES: Device[] = [
-  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
-  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
-]
-
-function ContentPlaceholder() {
-  return (
-    <View className="flex-1 items-center justify-center">
-      <Text className="font-heading text-sm text-text-tertiary">main content region</Text>
-    </View>
-  )
-}
-
-export function DashboardShell({
-  activeKey = 'live',
-  navItems,
-  liveKey = null,
-  state = 'live',
-  devices = DEMO_DEVICES,
-  subtitle = 'wall dashboard',
-  onNavigate,
-  onSelectDevice,
-  children,
-  className,
-}: DashboardShellProps) {
-  return (
-    // Column: the TopBar spans the FULL width across the top, and the SideNav sits BELOW it
-    // in the content row (not a full-height left rail). This keeps the brand/status band
-    // unbroken edge-to-edge and lets the nav align under it. The shell is the outermost
-    // Surface — it owns the base plane and seeds the on-surface colour context (mode) for
-    // the whole dashboard tree.
-    <Surface level="base" className={cn('flex-1', className)}>
-      <TopBar state={state} devices={devices} subtitle={subtitle} onSelectDevice={onSelectDevice} />
-      <View className="flex-1 flex-row">
-        <SideNav activeKey={activeKey} items={navItems} liveKey={liveKey} onNavigate={onNavigate} />
-        <View className="flex-1">{children ?? <ContentPlaceholder />}</View>
-      </View>
-    </Surface>
-  )
-}