@titan-design/react-ui 0.9.2 → 0.10.0

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]
@@ -333,6 +333,21 @@ var primitiveColors = {
   black: "#000000",
   transparent: "transparent"
 };
+var surfaceRampDark = {
+  inset: "#13100D",
+  // L*4.5  — sub-shell well / pressed
+  background: "#1C1916",
+  // L*9    — shell / frame
+  base: "#252321",
+  // L*13.5 — main content plane
+  elevated: "#2C2A28",
+  // L*17   — nav / rail
+  raised: "#31302F",
+  // L*20   — cards
+  overlay: "#373635"
+  // L*22.5 — hero / popover
+};
+var backgroundFrameDark = "#100D0A";
 var primitiveRamps = {
   red: {
     50: "#FFF4F4",
@@ -800,10 +815,19 @@ var semanticColorsLight = {
   "surface-overlay": primitiveColors.white,
   "surface-input": primitiveColors.neutral[50],
   // Input field background (filled variant)
+  // Deepest pressed pit (TD-surface-tokens, S-3) — light-mode counterpart of
+  // the dark ramp's `inset` plane; a placeholder pairing, not part of the
+  // dark-ramp investigation (surface.contract.test.ts is dark-mode only).
+  "surface-inset": primitiveColors.neutral[300],
   // Background colors (background-*)
   "background-base": "#EBEBEB",
   "background-default": primitiveColors.white,
   "background-subtle": primitiveColors.neutral[50],
+  // Frame/bezel chrome (TD-surface-tokens, S-3) — top bar + side nav shell,
+  // one step below `background-base` (darker still than `surface-inset`
+  // above, mirroring the dark-mode ordering). Placeholder pairing for light
+  // mode (see dark-mode note on `surface-inset` above).
+  "background-frame": primitiveColors.neutral[400],
   // Border colors (border-*)
   "border-default": "#E8E9EB",
   "border-subtle": primitiveColors.neutral[100],
@@ -819,6 +843,11 @@ var semanticColorsLight = {
   // Input field border on focus
   "border-input-error": primitiveColors.red[600],
   // Input field border on error
+  // Alpha hairline separators (surface-independent — composite toward black on
+  // light surfaces, mirroring the dark-mode white-alpha family). See §4/S-2.
+  "hairline-subtle": "rgba(0, 0, 0, 0.06)",
+  "hairline-default": "rgba(0, 0, 0, 0.09)",
+  "hairline-strong": "rgba(0, 0, 0, 0.14)",
   // Interactive states (interactive-*)
   "interactive-hover": "rgba(55, 65, 81, 0.04)",
   "interactive-focus": "rgba(55, 65, 81, 0.12)",
@@ -911,25 +940,46 @@ var semanticColorsDark = {
   "text-inverse": primitiveColors.neutral[900],
   "text-link": "#828DF8",
   "text-link-hover": primitiveColors.blue[400],
-  // Surface colors - dark backgrounds
-  "surface-base": primitiveColors.charcoal[700],
-  // main surface
-  "surface-elevated": primitiveColors.charcoal[600],
-  // elevated surface
-  "surface-raised": primitiveColors.charcoal[500],
-  // raised surface
-  "surface-overlay": primitiveColors.charcoal[600],
-  // overlay surface
-  "surface-input": primitiveColors.charcoal[600],
-  // input surface
-  // Background colors
-  "background-base": primitiveColors.charcoal[900],
-  // darkest charcoal
-  "background-default": primitiveColors.charcoal[700],
-  // main background
-  "background-subtle": primitiveColors.charcoal[500],
-  // subtle background
-  // Border colors
+  // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
+  // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
+  // `surfaceRampDark` in primitives.ts for the full derivation note. `surface-overlay`
+  // and `surface-elevated` are distinct (were both #191919 pre-S-1); `surface-input`
+  // tracks one plane above `surface-base`, same relative position as before the remap.
+  // `background-base` backs `Surface level="background"` (SurfaceContext.SURFACE_LEVEL_TOKEN),
+  // so it takes the ramp's `background` (shell/frame) role, NOT `inset`. The ramp's
+  // deepest `inset` plane is now promoted to `surface-inset` below (S-3) — still no
+  // `SurfaceLevel` member for it (follow-up, alongside the elevation.ts -1/-2 pressed
+  // levels — parallel workstream, not this branch).
+  "surface-base": surfaceRampDark.base,
+  // main surface        (#252321, L*13.5)
+  "surface-elevated": surfaceRampDark.elevated,
+  // elevated surface     (#2C2A28, L*17   — nav/rail)
+  "surface-raised": surfaceRampDark.raised,
+  // raised surface       (#31302F, L*20   — cards)
+  "surface-overlay": surfaceRampDark.overlay,
+  // overlay surface      (#373635, L*22.5 — hero/popover)
+  "surface-input": surfaceRampDark.elevated,
+  // input surface        (#2C2A28 — one plane above base)
+  "surface-inset": surfaceRampDark.inset,
+  // deepest pressed pit  (#13100D, L*4.5  — sub-shell well)
+  // Background colors — same ramp, the frame/shell end of it.
+  "background-base": surfaceRampDark.background,
+  // shell / frame        (#1C1916, L*9 — Surface level="background")
+  "background-default": surfaceRampDark.base,
+  // main background      (#252321, L*13.5 — matches surface-base)
+  "background-subtle": surfaceRampDark.elevated,
+  // subtle background    (#2C2A28, L*17 — matches surface-elevated)
+  // Frame/bezel chrome (S-3) — the top bar + side nav shell; one step BELOW
+  // `background-base`, darker even than `surface-inset` — it exits the content
+  // ramp entirely rather than sitting in it. See `backgroundFrameDark` in
+  // primitives.ts.
+  "background-frame": backgroundFrameDark,
+  // frame / bezel        (#100D0A, L*3.79)
+  // Border colors — `border-subtle` (#1C1C1C) previously collided with
+  // `surface-raised` (also #1C1C1C, an invisible border on raised cards). The
+  // re-spaced ramp above moved `surface-raised` to #2D2C2B, so this value is now
+  // distinct from every surface hex without needing to change it — see
+  // `surface.contract.test.ts` R2/R4.
   "border-default": primitiveColors.charcoal[400],
   // default border
   "border-subtle": primitiveColors.charcoal[500],
@@ -943,6 +993,14 @@ var semanticColorsDark = {
   "border-input-hover": primitiveColors.neutral[500],
   "border-input-focus": "#828DF8",
   "border-input-error": primitiveColors.red[500],
+  // Alpha hairline separators — the primary separation cue (§4/S-2). Self-
+  // normalizing: composites toward white by ~the same amount on ANY plane, so
+  // one family works at every elevation instead of per-surface border tokens.
+  // Shadows are demoted to floating-overlay use only (not shipped as a fill
+  // separator here — see elevation.ts, follow-up S-4).
+  "hairline-subtle": "rgba(255, 255, 255, 0.06)",
+  "hairline-default": "rgba(255, 255, 255, 0.09)",
+  "hairline-strong": "rgba(255, 255, 255, 0.14)",
   // Interactive states
   "interactive-hover": "rgba(255, 255, 255, 0.04)",
   "interactive-focus": "rgba(255, 255, 255, 0.12)",
@@ -1472,9 +1530,11 @@ var lightThemeCSSVars = {
   "--color-surface-base": semanticColorsLight["surface-base"],
   "--color-surface-elevated": semanticColorsLight["surface-elevated"],
   "--color-surface-raised": semanticColorsLight["surface-raised"],
+  "--color-surface-inset": semanticColorsLight["surface-inset"],
   "--color-background-base": semanticColorsLight["background-base"],
   "--color-background-default": semanticColorsLight["background-default"],
   "--color-background-subtle": semanticColorsLight["background-subtle"],
+  "--color-background-frame": semanticColorsLight["background-frame"],
   "--color-border-default": semanticColorsLight["border-default"],
   "--color-border-subtle": semanticColorsLight["border-subtle"],
   "--color-border-strong": semanticColorsLight["border-strong"],
@@ -1531,6 +1591,9 @@ var lightThemeCSSVars = {
   "--color-border-input-hover": semanticColorsLight["border-input-hover"],
   "--color-border-input-focus": semanticColorsLight["border-input-focus"],
   "--color-border-input-error": semanticColorsLight["border-input-error"],
+  "--color-hairline-subtle": semanticColorsLight["hairline-subtle"],
+  "--color-hairline-default": semanticColorsLight["hairline-default"],
+  "--color-hairline-strong": semanticColorsLight["hairline-strong"],
   "--color-interactive-disabled-text": semanticColorsLight["interactive-disabled-text"],
   "--color-avatar-background": semanticColorsLight["avatar-background"],
   "--color-avatar-text": semanticColorsLight["avatar-text"],
@@ -1570,9 +1633,11 @@ var darkThemeCSSVars = {
   "--color-surface-base": semanticColorsDark["surface-base"],
   "--color-surface-elevated": semanticColorsDark["surface-elevated"],
   "--color-surface-raised": semanticColorsDark["surface-raised"],
+  "--color-surface-inset": semanticColorsDark["surface-inset"],
   "--color-background-base": semanticColorsDark["background-base"],
   "--color-background-default": semanticColorsDark["background-default"],
   "--color-background-subtle": semanticColorsDark["background-subtle"],
+  "--color-background-frame": semanticColorsDark["background-frame"],
   "--color-border-default": semanticColorsDark["border-default"],
   "--color-border-subtle": semanticColorsDark["border-subtle"],
   "--color-border-strong": semanticColorsDark["border-strong"],
@@ -1629,6 +1694,9 @@ var darkThemeCSSVars = {
   "--color-border-input-hover": semanticColorsDark["border-input-hover"],
   "--color-border-input-focus": semanticColorsDark["border-input-focus"],
   "--color-border-input-error": semanticColorsDark["border-input-error"],
+  "--color-hairline-subtle": semanticColorsDark["hairline-subtle"],
+  "--color-hairline-default": semanticColorsDark["hairline-default"],
+  "--color-hairline-strong": semanticColorsDark["hairline-strong"],
   "--color-interactive-disabled-text": semanticColorsDark["interactive-disabled-text"],
   "--color-avatar-background": semanticColorsDark["avatar-background"],
   "--color-avatar-text": semanticColorsDark["avatar-text"],
@@ -2263,6 +2331,10 @@ function getElevationShadow(baseColor, level, theme, isHovered = false) {
   elevationShadowCache.set(cacheKey, result);
   return result;
 }
+var PRESSED_ELEVATION_LEVEL = -1;
+function getPressedRecessShadow(fillColor, theme) {
+  return getElevationShadow(fillColor, PRESSED_ELEVATION_LEVEL, theme);
+}
 function getBaseSurfaceColor(theme) {
   return theme === "light" ? semanticColorsLight["surface-raised"] : semanticColorsDark["surface-elevated"];
 }
@@ -2558,6 +2630,51 @@ 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 PRESSED_RAMP = ["inset", "background", "base", "elevated", "raised", "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 insetFloor(mode) {
+  const colors = getSemanticColors(mode);
+  return colors["surface-inset"] ?? surfaceRampDark.inset;
+}
+function surfaceBackground(level, mode) {
+  if (level === "inset") return insetFloor(mode);
+  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
+}
+function pressedLevel(parent) {
+  const index = PRESSED_RAMP.indexOf(parent);
+  const down = Math.max(0, index - 1);
+  return PRESSED_RAMP[down];
+}
 function getTheme() {
   if (typeof document === "undefined") return "dark";
   return document.documentElement.classList.contains("light") ? "light" : "dark";
@@ -3046,7 +3163,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 +3174,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 +3657,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 +3730,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 +4131,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 +4141,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 +4186,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 +4772,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 +5305,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,
         {
@@ -5753,7 +5870,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 +5911,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 +6125,49 @@ function IconBox({
 }
 function Surface({
   elevation = 0,
+  level,
+  pressed = false,
   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 resolvedLevel = pressed ? pressedLevel(inherited.level) : level ?? inherited.level;
+  let backgroundColor;
+  let shadowStyle;
+  if (pressed) {
+    backgroundColor = surfaceBackground(resolvedLevel, mode);
+    shadowStyle = getPressedRecessShadow(backgroundColor, mode);
+  } else if (isPlane) {
+    backgroundColor = surfaceBackground(level, mode);
+    shadowStyle = {};
+  } else {
+    backgroundColor = getElevationSurface(baseColor, elevation, mode);
+    shadowStyle = getElevationShadow(baseColor, elevation, mode);
+  }
   const glowStyle = glowColor ? getGlowShadow(glowColor, glowIntensity) : {};
-  return /* @__PURE__ */ jsx(
+  const applyRounded = rounded ?? (pressed || !isPlane);
+  const value = useMemo(
+    () => ({ mode, level: resolvedLevel }),
+    [mode, resolvedLevel]
+  );
+  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 +6892,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 +6938,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 +7338,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,
@@ -7216,13 +7350,14 @@ function MetricGroup({
     )
   ] }, i)) });
 }
+var t = getSemanticColors("dark");
 var baseBadgeSizeConfig = {
   sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
   md: { fontSize: 10, paddingH: 8, paddingV: 2, iconSize: 12 },
   lg: { fontSize: 12, paddingH: 10, paddingV: 4, iconSize: 14 }
 };
 var variantColors = {
-  plain: { backgroundColor: "#1C1C1C", borderColor: "#1F1F1F" },
+  plain: { backgroundColor: t["surface-raised"], borderColor: "#1F1F1F" },
   pr: {
     backgroundColor: "rgba(255, 121, 0, 0.12)",
     borderColor: "rgba(255, 121, 0, 0.3)"
@@ -7462,11 +7597,11 @@ function PrBadge({
   }
   return badge;
 }
-var t = getSemanticColors("dark");
+var t2 = getSemanticColors("dark");
 var solidVariantColors = {
-  success: t["status-success"],
-  warning: t["status-warning"],
-  error: t["status-error"],
+  success: t2["status-success"],
+  warning: t2["status-warning"],
+  error: t2["status-error"],
   neutral: "#6B7280"
 };
 var ringVariantStyles = {
@@ -7506,8 +7641,8 @@ var iconColors2 = {
   warning: "#6B4000",
   error: "#5C1A1A",
   neutral: "#D1D5DB",
-  "on-track": t["status-success"],
-  deviation: t["status-warning"],
+  "on-track": t2["status-success"],
+  deviation: t2["status-warning"],
   future: "#6B7280"
 };
 var sizeDimensions = {
@@ -7828,19 +7963,19 @@ function MetricCell({ children, color, fontSize = 11 }) {
 }
 
 // src/components/custom/Workout/TempoDisplay.tsx
-var t2 = getSemanticColors("dark");
+var t3 = getSemanticColors("dark");
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
-var STATUS_ERROR = t2["status-error"];
-var STATUS_SUCCESS = t2["status-success"];
-var STATUS_WARNING = t2["status-warning"];
+var STATUS_ERROR = t3["status-error"];
+var STATUS_SUCCESS = t3["status-success"];
+var STATUS_WARNING = t3["status-warning"];
 var ON_TARGET_MS = 100;
 function getTempoFillPct(elapsedMs, targetMs) {
   if (!targetMs) return 100;
   return Math.min(100, elapsedMs / targetMs * 100);
 }
 function activeNumberTone(elapsedMs, targetMs) {
-  if (targetMs == null) return t2["text-primary"];
+  if (targetMs == null) return t3["text-primary"];
   const remainingMs = targetMs - elapsedMs;
   if (remainingMs > ON_TARGET_MS) return STATUS_WARNING;
   if (remainingMs >= -ON_TARGET_MS) return STATUS_SUCCESS;
@@ -7992,7 +8127,7 @@ function TempoDisplay({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: "#1C1C1C",
+        backgroundColor: t3["surface-raised"],
         paddingHorizontal: chromePadX,
         paddingVertical: chromePadY,
         borderRadius: chromeRadius
@@ -8007,7 +8142,7 @@ function TempoDisplay({
               fontSize: labelFont,
               fontWeight: "500",
               // Live-muted green while a rep is running, tertiary at rest.
-              color: live ? t2["status-live-muted"] : TEXT_TERTIARY,
+              color: live ? t3["status-live-muted"] : TEXT_TERTIARY,
               letterSpacing: 0.5,
               textTransform: "uppercase",
               marginRight: Math.round(fontSize * 0.5)
@@ -8065,7 +8200,7 @@ function TempoDisplay({
                 View,
                 {
                   style: {
-                    backgroundColor: "#191919",
+                    backgroundColor: t3["surface-overlay"],
                     borderRadius: 6,
                     paddingVertical: 8,
                     paddingHorizontal: 12,
@@ -8118,13 +8253,13 @@ function TempoDisplay({
     }
   );
 }
-var t3 = getSemanticColors("dark");
+var t4 = getSemanticColors("dark");
 function getDotColor(deviation) {
   const abs = Math.abs(deviation);
-  if (deviation < -0.3) return t3["status-success"];
+  if (deviation < -0.3) return t4["status-success"];
   if (abs <= 0.3) return "#6B7280";
-  if (abs <= 0.7) return t3["status-warning"];
-  return t3["status-error"];
+  if (abs <= 0.7) return t4["status-warning"];
+  return t4["status-error"];
 }
 function getDeviationDescription(deviation) {
   if (deviation < -0.3) return "lighter than planned";
@@ -8192,19 +8327,19 @@ function DeviationBar({
     }
   );
 }
-var t4 = getSemanticColors("dark");
+var t5 = getSemanticColors("dark");
 var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
 var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
 var AT_TARGET_GLOW = "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)";
 var ZONE = {
-  building: t4["status-success"],
+  building: t5["status-success"],
   // below target ramp-up
-  approaching: t4["status-warning"],
+  approaching: t5["status-warning"],
   // nearing target
-  target: t4["brand-primary"],
+  target: t5["brand-primary"],
   // exactly at target
-  over1: t4["status-error"],
+  over1: t5["status-error"],
   // mild over-target
   over2: WORKOUT_TOKENS.intensity.over2,
   // moderate over-target
@@ -8373,12 +8508,12 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/WorkoutPill.tsx
-var t5 = getSemanticColors("dark");
+var t6 = getSemanticColors("dark");
 var statusBgColors = {
   completed: "rgba(46,213,115,0.15)",
   current: "rgba(255,121,0,0.15)",
   next: "transparent",
-  upcoming: "#1C1C1C",
+  upcoming: t6["surface-raised"],
   missed: "rgba(209,67,67,0.1)",
   deload: "rgba(186,41,150,0.15)"
 };
@@ -8391,9 +8526,9 @@ var statusBorderStyles = {
   deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
 var textColors = {
-  completed: t5["status-success"],
-  current: t5["brand-primary"],
-  next: t5["brand-primary"],
+  completed: t6["status-success"],
+  current: t6["brand-primary"],
+  next: t6["brand-primary"],
   upcoming: "#6B7280",
   missed: "rgba(209,67,67,0.7)",
   deload: WORKOUT_PILL_DELOAD
@@ -9540,13 +9675,13 @@ function VelocityStrip({
   }
   return stripContent;
 }
-var t6 = getSemanticColors("dark");
+var t7 = getSemanticColors("dark");
 var dotColorMap = {
   untrained: "#2C2C2C",
-  behind: t6["brand-secondary"],
-  ontrack: t6["status-success"],
-  target: t6["brand-primary"],
-  over: t6["status-error"]
+  behind: t7["brand-secondary"],
+  ontrack: t7["status-success"],
+  target: t7["brand-primary"],
+  over: t7["status-error"]
 };
 function MuscleGroupChip({
   name,
@@ -10249,7 +10384,7 @@ function RestTimer({
     }
   );
 }
-var t7 = getSemanticColors("dark");
+var t8 = getSemanticColors("dark");
 var TIMES = "\xD7";
 var AT = "@";
 function SetsRepsLoad({
@@ -10261,8 +10396,8 @@ function SetsRepsLoad({
   className,
   ...props
 }) {
-  const value = t7["text-primary"];
-  const sep = t7["text-tertiary"];
+  const value = t8["text-primary"];
+  const sep = t8["text-tertiary"];
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -10375,14 +10510,14 @@ function ScheduleTiles({ when, now, gap = 1, ...props }) {
     )
   ] });
 }
-var t8 = getSemanticColors("dark");
+var t9 = getSemanticColors("dark");
 var INDICATOR_CONFIG = {
-  imbalance: { Icon: ScaleIcon, color: t8["status-error"], label: "Left/right imbalance" },
-  overshoot: { Icon: AlertTriangleIcon, color: t8["status-error"], label: "Load overshoot" },
-  "velocity-loss": { Icon: TrendingDownIcon, color: t8["status-warning"], label: "Velocity loss" },
-  "missed-reps": { Icon: CircleSlashIcon, color: t8["status-warning"], label: "Missed reps" },
-  pr: { Icon: AwardIcon, color: t8["status-success"], label: "Personal record" },
-  info: { Icon: InfoIcon, color: t8["status-info"], label: "More info" }
+  imbalance: { Icon: ScaleIcon, color: t9["status-error"], label: "Left/right imbalance" },
+  overshoot: { Icon: AlertTriangleIcon, color: t9["status-error"], label: "Load overshoot" },
+  "velocity-loss": { Icon: TrendingDownIcon, color: t9["status-warning"], label: "Velocity loss" },
+  "missed-reps": { Icon: CircleSlashIcon, color: t9["status-warning"], label: "Missed reps" },
+  pr: { Icon: AwardIcon, color: t9["status-success"], label: "Personal record" },
+  info: { Icon: InfoIcon, color: t9["status-info"], label: "More info" }
 };
 var INDICATOR_PRECEDENCE = [
   "imbalance",
@@ -10858,8 +10993,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 HEADER_BG = t9["background-base"];
 var BAR_HEIGHT = 9;
 var BAR_GAP = 3;
 function SessionHeader({
@@ -10877,17 +11010,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: HEADER_BG,
           paddingTop: 11,
           paddingRight: 12,
           paddingBottom: 12,
@@ -10908,7 +11042,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",
@@ -10964,7 +11098,6 @@ function SessionHeader({
     }
   );
 }
-var INSET = primitiveColors.charcoal[600];
 var DIVIDER = primitiveColors.charcoal[300];
 var DEFAULT_WIDTH = 246;
 function SessionRail({
@@ -10984,10 +11117,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: [
@@ -11005,9 +11139,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,
@@ -11044,7 +11179,7 @@ function SessionRail({
 var DEFAULTS = {
   label: "SS",
   color: getSemanticColors("dark")["brand-primary"],
-  bgBase: "#101010"
+  bgBase: getSemanticColors("dark")["background-base"]
 };
 function SupersetWrapper({
   label = DEFAULTS.label,
@@ -14447,8 +14582,10 @@ function DashboardShell({
   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.
-    /* @__PURE__ */ jsxs(View, { className: cn("flex-1 bg-surface-base", className), children: [
+    // 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 }),
@@ -14546,6 +14683,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, PRESSED_ELEVATION_LEVEL, 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, backgroundFrameDark, 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, getPressedRecessShadow, getResultColor, getSemanticColors, getStatusColor, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, liveAuraColor, neumorphicShadows, onSurfaceColors, paceTone, paceToneColor, pressedLevel, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, resolveIndicator, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, statusPillColor, surfaceBackground, surfaceGradient, surfaceRampDark, useOnSurfaceColor, useSurface, useSurfaceMode, useTable, useTimer, useToast, useToolbarButton, validateCssPropertyManifest, validationRules, velocityZoneColor };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map