@titan-design/react-ui 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titan-design/react-ui",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "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/components/custom/Workout/ExerciseHeading.tsx

@@ -10,7 +10,8 @@ export interface ExerciseHeadingProps {
   /** Prescription line values (sets × reps @ load). */
   sets: number
   reps: number | string
-  load: number
+  /** Load value; a string (e.g. "—") passes through verbatim for an unset/discovery load. */
+  load: number | string
   unit?: 'lbs' | 'kg'
   /** Tempo tuple [eccentric, pauseBottom, concentric, pauseTop]; hidden when absent. */
   tempo?: [number, number, number, number]
@@ -26,10 +27,11 @@ function headingLabel(
   name: string,
   sets: number,
   reps: number | string,
-  load: number,
+  load: number | string,
   unit: string
 ) {
-  return `${name}, ${sets}×${reps} @ ${roundWeight(load)} ${unit}`
+  const loadLabel = typeof load === 'number' ? roundWeight(load) : load
+  return `${name}, ${sets}×${reps} @ ${loadLabel} ${unit}`
 }
 
 /**

package/src/components/custom/Workout/SessionHeader.tsx

@@ -1,6 +1,5 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, type ViewProps } from 'react-native'
-import { primitiveColors } from '../../../theme/tokens/primitives'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { Typography } from '../Typography'
 import { TimerReadout } from '../TimerReadout'
@@ -11,9 +10,11 @@ import { paceTone, paceToneColor } from './paceTone'
 
 const t = getSemanticColors('dark')
 
-// The raised charcoal heading plane (charcoal 400) — reads as one flat surface with
-// the nav; depth lives on the sunk list below it, not here.
-const RAISED = primitiveColors.charcoal[400] // #1F1F1F
+// The header shares the SideNav's `background-base` (charcoal 900, #101010) so the nav and
+// the rail header read as ONE continuous dark plane on the left — the sunk exercise list
+// (charcoal 800) sits raised off it. Previously charcoal 400 (#1F1F1F), which made the header
+// the lightest rail surface and let it blend with the rows instead of anchoring to the nav.
+const HEADER_BG = t['background-base'] // #101010 — matches SideNav bg-background-base
 
 // The chunked pace bar matches the SetStrip language but sits tighter than the default
 // SetStrip gap (5) — the locked design uses a 3px gap and a 9px track.
@@ -86,7 +87,7 @@ export function SessionHeader({
       className={className}
       style={[
         {
-          backgroundColor: RAISED,
+          backgroundColor: HEADER_BG,
           paddingTop: 11,
           paddingRight: 12,
           paddingBottom: 12,

package/src/components/custom/Workout/SessionRail.tsx

@@ -8,11 +8,14 @@ import type { MetricTileData } from './MetricTiles'
 import type { SetStripSet } from './SetStrip'
 import type { ExerciseIndicatorKind } from './ExerciseIndicator'
 
-// Charcoal-ramp surfaces (the locked S3 shell shades): the nav + the heading plane
-// read as ONE flat raised surface; the exercise list is sunk. Depth comes only from
-// the list's subtle inset shadow (top cast by the heading, faint left edge by the nav).
-const INSET = primitiveColors.charcoal[800] // #131313 — sunk exercise list
-const DIVIDER = primitiveColors.charcoal[500] // #1C1C1C — row divider
+// Charcoal-ramp surfaces (the locked S3 shell shades): the nav + the heading plane read as
+// ONE dark plane (charcoal 900, #101010, set in SessionHeader). The exercise list is a
+// LIGHTER inset panel (charcoal 600) — recessed via its inner shadow yet paler than the
+// header, so the transparent exercise headings on it never blend into the header plane.
+// (Band-aid: the list is picked to clear the components; the durable fix is a `<Surface>`
+// primitive whose cards own their own raised background — see the rail's PR notes.)
+const INSET = primitiveColors.charcoal[600] // #191919 — lighter sunk exercise-list panel
+const DIVIDER = primitiveColors.charcoal[300] // #2C2C2C — row divider (raised to read on #191919)
 
 const DEFAULT_WIDTH = 246
 
@@ -20,7 +23,15 @@ export interface SessionRailExercise {
   /** Stable key + press payload. Falls back to list index when absent. */
   id?: string
   name: string
-  summary: { sets: number; reps: number | string; weight: number; unit: 'lbs' | 'kg' }
+  /** `weight` accepts a string (e.g. "—") for an unset/discovery load — never a faked 0. */
+  summary: { sets: number; reps: number | string; weight: number | string; unit: 'lbs' | 'kg' }
+  /**
+   * Prescribed set count for the header total + pace-bar segment width. Distinct from
+   * `summary.sets`, which is the row's live DONE count (0 for the active exercise before
+   * its first set) — using that for the total under-counts by the active exercise's
+   * remaining sets. Falls back to `summary.sets` when absent.
+   */
+  plannedSets?: number
   tempo?: [number, number, number, number]
   indicator?: ExerciseIndicatorKind
   /** Per-set performance data driving the heading strip. */
@@ -84,7 +95,7 @@ export function SessionRail({
     >
       <SessionHeader
         title={title}
-        plan={exercises.map((ex) => ({ name: ex.name, sets: ex.summary.sets }))}
+        plan={exercises.map((ex) => ({ name: ex.name, sets: ex.plannedSets ?? ex.summary.sets }))}
         setsDone={setsDone}
         elapsedMs={elapsedMs}
         budgetMs={budgetMs}

package/src/components/custom/Workout/SetsRepsLoad.tsx

@@ -11,7 +11,8 @@ const AT = '@'
 export interface SetsRepsLoadProps extends ViewProps {
   sets: number
   reps: number | string
-  load: number
+  /** Load value; a string (e.g. "—") passes through verbatim for an unset/discovery load. */
+  load: number | string
   /** Displayed load unit label (e.g. "lb", "kg"). */
   unit?: string
   /** Cell font size (px). Default 11 — the compact rail/card scale. Raise for a wall read-out. */

package/src/components/shell/DashboardShell.tsx

@@ -58,15 +58,13 @@ export function DashboardShell({
   className,
 }: DashboardShellProps) {
   return (
-    <View className={cn('flex-1 flex-row bg-surface-base', className)}>
-      <SideNav activeKey={activeKey} items={navItems} liveKey={liveKey} onNavigate={onNavigate} />
-      <View className="flex-1">
-        <TopBar
-          state={state}
-          devices={devices}
-          subtitle={subtitle}
-          onSelectDevice={onSelectDevice}
-        />
+    // 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.
+    <View className={cn('flex-1 bg-surface-base', 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>
     </View>

package/src/components/shell/NavItem.tsx

@@ -65,7 +65,12 @@ export function NavItem({
         <Typography
           variant="button"
           color="inherit"
-          className={cn('text-[8.5px] font-bold uppercase tracking-[0.4px]', labelColor)}
+          // fontSize inline, not `text-[8.5px]`: the `button` variant's `text-sm` (14px) and the
+          // arbitrary `text-[8.5px]` are a same-property class conflict that the consumer's
+          // Tailwind build resolved the wrong way (labels rendered ~14px on the wall). Inline
+          // size wins unambiguously; className keeps weight/case/tracking.
+          style={{ fontSize: 8.5, lineHeight: 11 }}
+          className={cn('font-bold uppercase tracking-[0.4px]', labelColor)}
         >
           {label}
         </Typography>

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