@titan-design/react-ui 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titan-design/react-ui",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Cross-platform design system built on Gluestack UI",
   "author": "Henry Jewkes",
   "license": "MIT",

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>