@titan-design/react-ui 0.9.1 → 0.9.3

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { jsx as jsx$1, jsxs as jsxs$1, Fragment } from 'react/jsx-runtime';
 import { Pressable, ActivityIndicator, Text, View, TextInput, Platform, StyleSheet, Easing, Image, Modal as Modal$1, ScrollView, Animated } from 'react-native';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React24, { forwardRef, useState, createContext, useMemo, useContext, useRef, useEffect, useCallback, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import React25, { forwardRef, useState, createContext, useContext, useMemo, useRef, useEffect, useCallback, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -2558,6 +2558,40 @@ var audiobookPreset = {
   },
   rootClasses: ["atmosphere-warm", "grain"]
 };
+var SURFACE_LEVEL_TOKEN = {
+  background: "background-base",
+  base: "surface-base",
+  elevated: "surface-elevated",
+  raised: "surface-raised",
+  overlay: "surface-overlay"
+};
+var ON_SURFACE_TOKEN = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  tertiary: "text-tertiary"
+};
+var DEFAULT_CONTEXT = { mode: "dark", level: "base" };
+var SurfaceContext = createContext(DEFAULT_CONTEXT);
+function useSurface() {
+  return useContext(SurfaceContext);
+}
+function useSurfaceMode() {
+  return useContext(SurfaceContext).mode;
+}
+function onSurfaceColors(mode) {
+  const c = getSemanticColors(mode);
+  return {
+    primary: c[ON_SURFACE_TOKEN.primary],
+    secondary: c[ON_SURFACE_TOKEN.secondary],
+    tertiary: c[ON_SURFACE_TOKEN.tertiary]
+  };
+}
+function useOnSurfaceColor(role = "primary") {
+  return getSemanticColors(useSurfaceMode())[ON_SURFACE_TOKEN[role]];
+}
+function surfaceBackground(level, mode) {
+  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
+}
 function getTheme() {
   if (typeof document === "undefined") return "dark";
   return document.documentElement.classList.contains("light") ? "light" : "dark";
@@ -3046,7 +3080,7 @@ function AvatarGroup({
   size = "md",
   className
 }) {
-  const childArray = React24.Children.toArray(children);
+  const childArray = React25.Children.toArray(children);
   const visibleChildren = max ? childArray.slice(0, max) : childArray;
   const remainingCount = max ? Math.max(0, childArray.length - max) : 0;
   return /* @__PURE__ */ jsxs(View, { className: cn("flex-row", className), children: [
@@ -3057,7 +3091,7 @@ function AvatarGroup({
           "border-2 border-surface-base rounded-full",
           index > 0 && "-ml-2"
         ),
-        children: React24.isValidElement(child) ? React24.cloneElement(child, { size }) : child
+        children: React25.isValidElement(child) ? React25.cloneElement(child, { size }) : child
       },
       index
     )),
@@ -3540,9 +3574,9 @@ function TabList({ children, className }) {
         variantStyles5[variant],
         className
       ),
-      children: React24.Children.map(children, (child, index) => {
-        if (React24.isValidElement(child)) {
-          return React24.cloneElement(child, { index });
+      children: React25.Children.map(children, (child, index) => {
+        if (React25.isValidElement(child)) {
+          return React25.cloneElement(child, { index });
         }
         return child;
       })
@@ -3613,8 +3647,8 @@ function Tab({
 }
 function TabPanels({ children, className }) {
   const { activeIndex } = useContext(TabsContext);
-  return /* @__PURE__ */ jsx(View, { className: cn("flex-1", className), children: React24.Children.map(children, (child, index) => {
-    if (React24.isValidElement(child) && index === activeIndex) {
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-1", className), children: React25.Children.map(children, (child, index) => {
+    if (React25.isValidElement(child) && index === activeIndex) {
       return child;
     }
     return null;
@@ -4014,9 +4048,9 @@ function Accordion({
       return newSet;
     });
   };
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(View, { className: cn("w-full divide-y divide-border", className), ...props, children: React24.Children.map(children, (child, index) => {
-    if (React24.isValidElement(child)) {
-      return React24.cloneElement(child, { index });
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(View, { className: cn("w-full divide-y divide-border", className), ...props, children: React25.Children.map(children, (child, index) => {
+    if (React25.isValidElement(child)) {
+      return React25.cloneElement(child, { index });
     }
     return child;
   }) }) });
@@ -4024,9 +4058,9 @@ function Accordion({
 function AccordionItem({ index = 0, children, className }) {
   const { openIndices, toggleIndex } = useContext(AccordionContext);
   const isOpen = openIndices.has(index);
-  return /* @__PURE__ */ jsx(View, { className, children: React24.Children.map(children, (child) => {
-    if (React24.isValidElement(child)) {
-      return React24.cloneElement(child, {
+  return /* @__PURE__ */ jsx(View, { className, children: React25.Children.map(children, (child) => {
+    if (React25.isValidElement(child)) {
+      return React25.cloneElement(child, {
         isOpen,
         onToggle: () => toggleIndex(index)
       });
@@ -4069,7 +4103,7 @@ function Breadcrumbs({
   children,
   ...props
 }) {
-  const items = React24.Children.toArray(children);
+  const items = React25.Children.toArray(children);
   let displayItems = items;
   if (maxItems && items.length > maxItems) {
     const firstItem = items[0];
@@ -4655,7 +4689,7 @@ function ToolbarButton({
           }
         ],
         children: [
-          icon && /* @__PURE__ */ jsx(View, { className: "w-5 h-5 items-center justify-center", children: React24.isValidElement(icon) ? React24.cloneElement(icon, {
+          icon && /* @__PURE__ */ jsx(View, { className: "w-5 h-5 items-center justify-center", children: React25.isValidElement(icon) ? React25.cloneElement(icon, {
             size: 20,
             width: 20,
             height: 20,
@@ -5188,7 +5222,7 @@ function ProgressSteps({
 }) {
   const { dot, connector } = stepSizeStyles[size];
   return /* @__PURE__ */ jsxs(View, { className: cn("w-full", className), ...props, children: [
-    /* @__PURE__ */ jsx(View, { className: "flex-row items-center", children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
+    /* @__PURE__ */ jsx(View, { className: "flex-row items-center", children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
       /* @__PURE__ */ jsx(
         View,
         {
@@ -5256,7 +5290,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((t17) => t17.id !== id));
+    setToasts((prev) => prev.filter((t16) => t16.id !== id));
   }, []);
   const removeAllToasts = useCallback(() => {
     setToasts([]);
@@ -5753,7 +5787,7 @@ function FormField({
 }) {
   const isInvalid = !!errorMessage;
   const isHorizontal = orientation === "horizontal";
-  const fieldId = React24.useId();
+  const fieldId = React25.useId();
   const helperId = `${fieldId}-helper`;
   const errorId = `${fieldId}-error`;
   return /* @__PURE__ */ jsxs(
@@ -5794,10 +5828,10 @@ function FormField({
           }
         ),
         /* @__PURE__ */ jsxs(View, { className: cn(isHorizontal && "flex-1"), children: [
-          React24.Children.map(children, (child) => {
-            if (React24.isValidElement(child)) {
+          React25.Children.map(children, (child) => {
+            if (React25.isValidElement(child)) {
               const childProps = child.props;
-              return React24.cloneElement(child, {
+              return React25.cloneElement(child, {
                 accessibilityHint: errorMessage || helperText || childProps.accessibilityHint,
                 accessibilityState: {
                   ...childProps.accessibilityState,
@@ -6008,32 +6042,37 @@ function IconBox({
 }
 function Surface({
   elevation = 0,
+  level,
   glowColor,
   glowIntensity,
-  theme = "dark",
+  theme,
+  rounded,
   className,
   style,
   children,
   ...props
 }) {
-  const baseColor = getBaseSurfaceColor(theme);
-  const surfaceColor = getElevationSurface(baseColor, elevation, theme);
-  const shadowStyle = getElevationShadow(baseColor, elevation, theme);
+  const inherited = useSurface();
+  const mode = theme ?? inherited.mode;
+  const isPlane = level != null;
+  const baseColor = getBaseSurfaceColor(mode);
+  const backgroundColor = isPlane ? surfaceBackground(level, mode) : getElevationSurface(baseColor, elevation, mode);
+  const shadowStyle = isPlane ? {} : getElevationShadow(baseColor, elevation, mode);
   const glowStyle = glowColor ? getGlowShadow(glowColor, glowIntensity) : {};
-  return /* @__PURE__ */ jsx(
+  const applyRounded = rounded ?? !isPlane;
+  const value = useMemo(
+    () => ({ mode, level: level ?? inherited.level }),
+    [mode, level, inherited.level]
+  );
+  return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value, children: /* @__PURE__ */ jsx(
     View,
     {
-      className: cn("rounded-2xl", className),
-      style: [
-        { backgroundColor: surfaceColor },
-        shadowStyle,
-        glowStyle,
-        style
-      ],
+      className: cn(applyRounded && "rounded-2xl", className),
+      style: [{ backgroundColor }, shadowStyle, glowStyle, style],
       ...props,
       children
     }
-  );
+  ) });
 }
 function ListItem({ className, children, onPress, ...props }) {
   const Container = onPress ? Pressable : View;
@@ -6758,11 +6797,11 @@ function Stepper({
         className
       ),
       ...props,
-      children: React24.Children.map(children, (child, index) => {
-        if (React24.isValidElement(child)) {
+      children: React25.Children.map(children, (child, index) => {
+        if (React25.isValidElement(child)) {
           return /* @__PURE__ */ jsxs(Fragment, { children: [
-            React24.cloneElement(child, { index }),
-            index < React24.Children.count(children) - 1 && /* @__PURE__ */ jsx(StepConnector, { index })
+            React25.cloneElement(child, { index }),
+            index < React25.Children.count(children) - 1 && /* @__PURE__ */ jsx(StepConnector, { index })
           ] });
         }
         return child;
@@ -6804,9 +6843,9 @@ function Step({ index = 0, status, className, children }) {
         orientation === "horizontal" ? "items-center" : "flex-row items-start",
         className
       ),
-      children: React24.Children.map(children, (child) => {
-        if (React24.isValidElement(child)) {
-          return React24.cloneElement(child, {
+      children: React25.Children.map(children, (child) => {
+        if (React25.isValidElement(child)) {
+          return React25.cloneElement(child, {
             status: derivedStatus,
             index
           });
@@ -7204,8 +7243,8 @@ function MetricGroup({
   children,
   ...props
 }) {
-  const items = React24.Children.toArray(children);
-  return /* @__PURE__ */ jsx(View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
+  const items = React25.Children.toArray(children);
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
     /* @__PURE__ */ jsx(View, { className: "flex-1 items-center", children: child }),
     i < items.length - 1 && /* @__PURE__ */ jsx(
       View,
@@ -10423,7 +10462,8 @@ function ExerciseIndicator({ kind, onPress, className, ...props }) {
   return chip;
 }
 function headingLabel(name, sets, reps, load, unit) {
-  return `${name}, ${sets}\xD7${reps} @ ${roundWeight(load)} ${unit}`;
+  const loadLabel = typeof load === "number" ? roundWeight(load) : load;
+  return `${name}, ${sets}\xD7${reps} @ ${loadLabel} ${unit}`;
 }
 function ExerciseHeading({
   name,
@@ -10857,8 +10897,6 @@ function ExerciseCard({
   if (upcoming) return /* @__PURE__ */ jsx(UpcomingCard, { ...rest, onToggle });
   return isExpanded ? /* @__PURE__ */ jsx(ExpandedCard, { ...rest, onToggle }) : /* @__PURE__ */ jsx(CollapsedCard, { ...rest, onToggle });
 }
-var t9 = getSemanticColors("dark");
-var RAISED = primitiveColors.charcoal[400];
 var BAR_HEIGHT = 9;
 var BAR_GAP = 3;
 function SessionHeader({
@@ -10876,17 +10914,18 @@ function SessionHeader({
 }) {
   const upcoming = next != null;
   const totalSets = plan.reduce((sum, e) => sum + e.sets, 0);
+  const onSurface = onSurfaceColors(useSurfaceMode());
   const hasPace = !upcoming && budgetMs != null && elapsedMs != null;
   const target = hasPace ? elapsedMs / budgetMs : void 0;
   const setsLabel = upcoming ? `${totalSets} sets` : `${Math.floor(setsDone)}/${totalSets} sets`;
-  const setsLabelColor = upcoming ? t9["text-secondary"] : paceToneColor(paceTone(totalSets > 0 ? setsDone / totalSets : 0, target));
+  const setsLabelColor = upcoming ? onSurface.secondary : paceToneColor(paceTone(totalSets > 0 ? setsDone / totalSets : 0, target));
   return /* @__PURE__ */ jsxs(
-    View,
+    Surface,
     {
+      level: "background",
       className,
       style: [
         {
-          backgroundColor: RAISED,
           paddingTop: 11,
           paddingRight: 12,
           paddingBottom: 12,
@@ -10907,7 +10946,7 @@ function SessionHeader({
               lineHeight: 18,
               fontWeight: "700",
               fontFamily: '"Space Grotesk", sans-serif',
-              color: t9["text-primary"],
+              color: onSurface.primary,
               marginBottom: 10
             },
             testID: "session-rail-title",
@@ -10963,8 +11002,7 @@ function SessionHeader({
     }
   );
 }
-var INSET = primitiveColors.charcoal[800];
-var DIVIDER = primitiveColors.charcoal[500];
+var DIVIDER = primitiveColors.charcoal[300];
 var DEFAULT_WIDTH = 246;
 function SessionRail({
   title,
@@ -10983,10 +11021,11 @@ function SessionRail({
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
-    View,
+    Surface,
     {
+      level: "elevated",
       className,
-      style: [{ width, flexDirection: "column", backgroundColor: INSET }, style],
+      style: [{ width, flexDirection: "column" }, style],
       testID: "session-rail",
       ...props,
       children: [
@@ -10994,7 +11033,7 @@ function SessionRail({
           SessionHeader,
           {
             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,
             elapsedMs,
             budgetMs,
@@ -11004,9 +11043,10 @@ function SessionRail({
           }
         ),
         /* @__PURE__ */ jsx(
-          View,
+          Surface,
           {
-            style: [{ flex: 1, backgroundColor: INSET }, neumorphicShadows.charcoal.pressed.subtle],
+            level: "elevated",
+            style: [{ flex: 1 }, neumorphicShadows.charcoal.pressed.subtle],
             testID: "session-rail-list",
             children: exercises.map((ex, i) => /* @__PURE__ */ jsx(
               View,
@@ -11302,10 +11342,10 @@ function WeekRow({
     }
   );
 }
-var t10 = getSemanticColors("dark");
+var t9 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: t10["status-success"],
-  brandPrimary: t10["brand-primary"],
+  statusSuccess: t9["status-success"],
+  brandPrimary: t9["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
@@ -11789,12 +11829,12 @@ function PrHistoryModal({
     }
   );
 }
-var t11 = getSemanticColors("dark");
-var BRAND_PRIMARY9 = t11["brand-primary"];
+var t10 = getSemanticColors("dark");
+var BRAND_PRIMARY9 = t10["brand-primary"];
 var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
-var STATUS_SUCCESS2 = t11["status-success"];
-var STATUS_WARNING2 = t11["status-warning"];
-var STATUS_ERROR2 = t11["status-error"];
+var STATUS_SUCCESS2 = t10["status-success"];
+var STATUS_WARNING2 = t10["status-warning"];
+var STATUS_ERROR2 = t10["status-error"];
 var EMOJI_SETS = {
   sleep: ["\u{1F634}", "\u{1F610}", "\u{1F642}", "\u{1F60A}", "\u{1F929}"],
   soreness: ["\u{1F635}", "\u{1F623}", "\u{1F610}", "\u{1F642}", "\u{1F4AA}"],
@@ -11984,13 +12024,13 @@ function ReadinessCheck({
     )
   ] }) });
 }
-var t12 = getSemanticColors("dark");
-var BRAND_PRIMARY10 = t12["brand-primary"];
+var t11 = getSemanticColors("dark");
+var BRAND_PRIMARY10 = t11["brand-primary"];
 var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t12["status-success"];
-var WARNING = t12["status-warning"];
-var ERROR = t12["status-error"];
+var SUCCESS = t11["status-success"];
+var WARNING = t11["status-warning"];
+var ERROR = t11["status-error"];
 var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
@@ -12361,8 +12401,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t17 = Date.parse(dateStr);
-  return Number.isNaN(t17) ? 0 : t17;
+  const t16 = Date.parse(dateStr);
+  return Number.isNaN(t16) ? 0 : t16;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -12851,10 +12891,10 @@ function StrengthTrendChart({
     }
   );
 }
-var t13 = getSemanticColors("dark");
-var STATUS_SUCCESS4 = t13["status-success"];
-var STATUS_WARNING4 = t13["status-warning"];
-var STATUS_INFO = t13["status-info"];
+var t12 = getSemanticColors("dark");
+var STATUS_SUCCESS4 = t12["status-success"];
+var STATUS_WARNING4 = t12["status-warning"];
+var STATUS_INFO = t12["status-info"];
 var DOT_BORDER = "#F3F4F6";
 var BAND_FILL = "rgba(46,213,115,0.1)";
 var BAND_EDGE = "rgba(46,213,115,0.45)";
@@ -12897,8 +12937,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t17 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t17 * (b[key] - a[key]);
+      const t16 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t16 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -13228,13 +13268,13 @@ function CapacityBandChart({
     }
   );
 }
-var t14 = getSemanticColors("dark");
+var t13 = getSemanticColors("dark");
 function glowShadow(color) {
   return `0 0 5px 1px ${alpha(color, 0.3)}, 0 0 10px 3px ${alpha(color, 0.12)}`;
 }
 var DEFAULT_TRACK_COLOR = primitiveColors.charcoal[200];
 var DEFAULT_MARKER_COLOR2 = primitiveColors.white;
-var TICK_COLOR = t14["text-tertiary"];
+var TICK_COLOR = t13["text-tertiary"];
 var ZONE_SIZES = {
   default: {
     trackHeight: 14,
@@ -13417,7 +13457,7 @@ function ZoneTrack({
           ),
           ticks?.map((tick, i) => {
             const emphasized = tick.emphasized === true;
-            const lineColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
+            const lineColor = tick.color ?? (emphasized ? t13["brand-primary"] : TICK_COLOR);
             const lineWidth = emphasized ? s.tickLineEmphasized : s.tickLineNormal;
             return /* @__PURE__ */ jsx(
               View,
@@ -13448,7 +13488,7 @@ function ZoneTrack({
               if (tick.label == null) return null;
               const emphasized = tick.emphasized === true;
               if (!showTickLabel(i, emphasized)) return null;
-              const labelColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
+              const labelColor = tick.color ?? (emphasized ? t13["brand-primary"] : TICK_COLOR);
               const labelNode = /* @__PURE__ */ jsx(
                 Text,
                 {
@@ -13634,7 +13674,7 @@ function VolumeLandmarkBar({
     }
   );
 }
-var t15 = getSemanticColors("dark");
+var t14 = getSemanticColors("dark");
 var statusToken = {
   productive: "status-success",
   threshold: "status-warning",
@@ -13651,7 +13691,7 @@ var defaultLabel = {
   stop: "Stop"
 };
 function statusPillColor(status) {
-  return t15[statusToken[status]];
+  return t14[statusToken[status]];
 }
 function StatusPill2({ status, label, className, style, ...props }) {
   const color = statusPillColor(status);
@@ -13684,7 +13724,7 @@ function StatusPill2({ status, label, className, style, ...props }) {
     }
   );
 }
-var t16 = getSemanticColors("dark");
+var t15 = getSemanticColors("dark");
 var categoryToken = {
   productive: null,
   threshold: "status-warning",
@@ -13697,7 +13737,7 @@ var floodOpacity = {
 };
 function liveAuraColor(category) {
   const token = categoryToken[category];
-  return token ? t16[token] : null;
+  return token ? t15[token] : null;
 }
 function LiveAuraFrame({
   category,
@@ -13726,9 +13766,9 @@ function LiveAuraFrame({
           position: "relative",
           overflow: "hidden",
           borderRadius: 10,
-          backgroundColor: t16["background-base"],
+          backgroundColor: t15["background-base"],
           borderWidth: 1,
-          borderColor: t16["border-default"]
+          borderColor: t15["border-default"]
         },
         style
       ],
@@ -13955,28 +13995,28 @@ function Scatter({
         testID: "scatter-canvas",
         style: { position: "absolute", top: 0, left: 0, width, height, overflow: "hidden" },
         children: [
-          ticksOf(yd, TICK_COUNT).map((t17, i) => {
-            const y = toY(t17);
+          ticksOf(yd, TICK_COUNT).map((t16, i) => {
+            const y = toY(t16);
             return /* @__PURE__ */ jsx(
               View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-y",
                 style: { position: "absolute", left: PLOT_LEFT2, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t17) })
+                children: /* @__PURE__ */ jsx(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t16) })
               },
               `y-${i}`
             );
           }),
-          ticksOf(xd, TICK_COUNT).map((t17, i) => {
-            const x = toX(t17);
+          ticksOf(xd, TICK_COUNT).map((t16, i) => {
+            const x = toX(t16);
             return /* @__PURE__ */ jsx(
               View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-x",
                 style: { position: "absolute", top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t17) })
+                children: /* @__PURE__ */ jsx(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t16) })
               },
               `x-${i}`
             );
@@ -14111,23 +14151,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t17) => /* @__PURE__ */ jsx(
+        ticks.map((t16) => /* @__PURE__ */ jsx(
           View,
           {
             accessibilityElementsHidden: true,
             testID: "gauge-segment",
             style: {
               position: "absolute",
-              left: t17.left - tickThickness / 2,
-              top: t17.top - tickLength / 2,
+              left: t16.left - tickThickness / 2,
+              top: t16.top - tickLength / 2,
               width: tickThickness,
               height: tickLength,
               borderRadius: tickThickness / 2,
-              backgroundColor: t17.color,
-              transform: [{ rotate: t17.rotate }]
+              backgroundColor: t16.color,
+              transform: [{ rotate: t16.rotate }]
             }
           },
-          t17.key
+          t16.key
         )),
         /* @__PURE__ */ jsxs(View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -14377,7 +14417,8 @@ function NavItem({
                 {
                   variant: "button",
                   color: "inherit",
-                  className: cn("text-[8.5px] font-bold uppercase tracking-[0.4px]", labelColor),
+                  style: { fontSize: 8.5, lineHeight: 11 },
+                  className: cn("font-bold uppercase tracking-[0.4px]", labelColor),
                   children: label
                 }
               )
@@ -14442,21 +14483,20 @@ function DashboardShell({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs(View, { className: cn("flex-1 flex-row bg-surface-base", className), children: [
-    /* @__PURE__ */ jsx(SideNav, { activeKey, items: navItems, liveKey, onNavigate }),
-    /* @__PURE__ */ jsxs(View, { className: "flex-1", children: [
-      /* @__PURE__ */ jsx(
-        TopBar,
-        {
-          state,
-          devices,
-          subtitle,
-          onSelectDevice
-        }
-      ),
-      /* @__PURE__ */ jsx(View, { className: "flex-1", children: children ?? /* @__PURE__ */ jsx(ContentPlaceholder, {}) })
+  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.
+    /* @__PURE__ */ jsxs(Surface, { level: "base", className: cn("flex-1", className), children: [
+      /* @__PURE__ */ jsx(TopBar, { state, devices, subtitle, onSelectDevice }),
+      /* @__PURE__ */ jsxs(View, { className: "flex-1 flex-row", children: [
+        /* @__PURE__ */ jsx(SideNav, { activeKey, items: navItems, liveKey, onNavigate }),
+        /* @__PURE__ */ jsx(View, { className: "flex-1", children: children ?? /* @__PURE__ */ jsx(ContentPlaceholder, {}) })
+      ] })
     ] })
-  ] });
+  );
 }
 
 // src/utils/form.ts
@@ -14547,6 +14587,6 @@ function composeValidators(...validators) {
   };
 }
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, ActivityIcon, Alert, AlertDescription, AlertTitle, AlertTriangleIcon, Autocomplete, Avatar, AvatarBadge, AvatarGroup, AwardIcon, Badge, BadgeText, BaseBadge, BluetoothIcon, BrandLockup, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CATEGORICAL_CVD_SAFE_MAX, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircleSlashIcon, CircularProgress, CircularTimer, Collapse, CollapseButton, CollapseContent, DashboardShell, DataRow, DateTime, DeviationBar, DeviceIndicator, DeviceMenu, DeviceRow, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DumbbellIcon, EmptyState, ExerciseCard, ExerciseCardHeading, ExerciseHeading, ExerciseIndicator, FatigueMeter, FormActions, FormField, FormRow, FormSection, Gauge2 as Gauge, HStack, Heading, HelpTip, HistoryIcon, INDICATOR_PRECEDENCE, IconBox, Indicator, InfoIcon, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, LayersIcon, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, LiveAuraFrame, METRIC_FONT, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricCell, MetricGroup, MetricTiles, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, NavItem, Overline, Paragraph, PasswordInput, PersonStandingIcon, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, Radio, RadioGroup, ReadinessCheck, RestTimer, SET_STRIP_VARIABLE_COLOR, SET_STRIP_ZONES, ScaleIcon, Scatter, ScheduleTiles, Section, SectionContent, SectionHeader, SegmentedBar, SegmentedProgressBar, Select, SessionHeader, SessionRail, SessionStatePill, SetBar, SetRow, SetStrip, SetTableHeader, SetsRepsLoad, SideNav, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StarIcon, StatusDot, StatusPill2 as StatusPill, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, SvgIcon, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoDisplay, Tile, TimerReadout, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, TopBar, Treemap, TrendingDownIcon, Typography, VStack, VelocityStrip, VoltrasMark, VolumeLandmarkBar, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, ZoneTrack, alpha, applyThemePreset, audiobookPreset, bestTextColor, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, categoricalPalette, cn, componentElevationRanges, composeValidators, createFieldId, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultNavItems, defaultPreset, discreteRainbow, divergingScale, elevationSystem, formatDateTime, formatDuration, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getCategoricalColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getResultColor, getSemanticColors, getStatusColor, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, liveAuraColor, neumorphicShadows, paceTone, paceToneColor, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, resolveIndicator, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, statusPillColor, surfaceGradient, useTable, useTimer, useToast, useToolbarButton, validateCssPropertyManifest, validationRules, velocityZoneColor };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, ActivityIcon, Alert, AlertDescription, AlertTitle, AlertTriangleIcon, Autocomplete, Avatar, AvatarBadge, AvatarGroup, AwardIcon, Badge, BadgeText, BaseBadge, BluetoothIcon, BrandLockup, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CATEGORICAL_CVD_SAFE_MAX, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircleSlashIcon, CircularProgress, CircularTimer, Collapse, CollapseButton, CollapseContent, DashboardShell, DataRow, DateTime, DeviationBar, DeviceIndicator, DeviceMenu, DeviceRow, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DumbbellIcon, EmptyState, ExerciseCard, ExerciseCardHeading, ExerciseHeading, ExerciseIndicator, FatigueMeter, FormActions, FormField, FormRow, FormSection, Gauge2 as Gauge, HStack, Heading, HelpTip, HistoryIcon, INDICATOR_PRECEDENCE, IconBox, Indicator, InfoIcon, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, LayersIcon, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, LiveAuraFrame, METRIC_FONT, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricCell, MetricGroup, MetricTiles, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, NavItem, Overline, Paragraph, PasswordInput, PersonStandingIcon, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, Radio, RadioGroup, ReadinessCheck, RestTimer, SET_STRIP_VARIABLE_COLOR, SET_STRIP_ZONES, SURFACE_LEVEL_TOKEN, ScaleIcon, Scatter, ScheduleTiles, Section, SectionContent, SectionHeader, SegmentedBar, SegmentedProgressBar, Select, SessionHeader, SessionRail, SessionStatePill, SetBar, SetRow, SetStrip, SetTableHeader, SetsRepsLoad, SideNav, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StarIcon, StatusDot, StatusPill2 as StatusPill, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, SurfaceContext, SvgIcon, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoDisplay, Tile, TimerReadout, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, TopBar, Treemap, TrendingDownIcon, Typography, VStack, VelocityStrip, VoltrasMark, VolumeLandmarkBar, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, ZoneTrack, alpha, applyThemePreset, audiobookPreset, bestTextColor, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, categoricalPalette, cn, componentElevationRanges, composeValidators, createFieldId, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultNavItems, defaultPreset, discreteRainbow, divergingScale, elevationSystem, formatDateTime, formatDuration, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getCategoricalColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getResultColor, getSemanticColors, getStatusColor, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, liveAuraColor, neumorphicShadows, onSurfaceColors, paceTone, paceToneColor, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, resolveIndicator, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, statusPillColor, surfaceBackground, surfaceGradient, useOnSurfaceColor, useSurface, useSurfaceMode, useTable, useTimer, useToast, useToolbarButton, validateCssPropertyManifest, validationRules, velocityZoneColor };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map