@titan-design/react-ui 0.9.2 → 0.10.0

package/dist/index.js

@@ -4,11 +4,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactNative = require('react-native');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React24 = require('react');
+var React25 = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React24__default = /*#__PURE__*/_interopDefault(React24);
+var React25__default = /*#__PURE__*/_interopDefault(React25);
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -339,6 +339,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",
@@ -806,10 +821,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],
@@ -825,6 +849,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)",
@@ -917,25 +946,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],
@@ -949,6 +999,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)",
@@ -1194,7 +1252,7 @@ var textSizeStyles = {
   md: "text-sm",
   lg: "text-base"
 };
-var Button = React24.forwardRef(function Button2({
+var Button = React25.forwardRef(function Button2({
   variant = "solid",
   size = "md",
   color = "primary",
@@ -1302,7 +1360,7 @@ var variantStyles2 = {
     error: "border-border-input-error"
   }
 };
-var Input = React24.forwardRef(function Input2({
+var Input = React25.forwardRef(function Input2({
   size = "md",
   variant = "outline",
   isDisabled = false,
@@ -1322,7 +1380,7 @@ var Input = React24.forwardRef(function Input2({
   onBlur,
   ...props
 }, ref) {
-  const [isFocused, setIsFocused] = React24.useState(false);
+  const [isFocused, setIsFocused] = React25.useState(false);
   const handleFocus = (e) => {
     setIsFocused(true);
     onFocus?.(e);
@@ -1388,8 +1446,8 @@ var Input = React24.forwardRef(function Input2({
 function InputGroup({ children, className }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-col gap-4", className), children });
 }
-var PasswordInput = React24.forwardRef(function PasswordInput2({ showIcon, hideIcon, ...props }, ref) {
-  const [isVisible, setIsVisible] = React24.useState(false);
+var PasswordInput = React25.forwardRef(function PasswordInput2({ showIcon, hideIcon, ...props }, ref) {
+  const [isVisible, setIsVisible] = React25.useState(false);
   const toggleVisibility = () => setIsVisible(!isVisible);
   const defaultShowIcon = /* @__PURE__ */ jsxs(reactNative.View, { className: "w-5 h-5 items-center justify-center", children: [
     /* @__PURE__ */ jsx(reactNative.View, { className: "w-3 h-3 rounded-full border-2 border-text-secondary" }),
@@ -1478,9 +1536,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"],
@@ -1537,6 +1597,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"],
@@ -1576,9 +1639,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"],
@@ -1635,6 +1700,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"],
@@ -2269,6 +2337,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"];
 }
@@ -2564,6 +2636,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 = React25.createContext(DEFAULT_CONTEXT);
+function useSurface() {
+  return React25.useContext(SurfaceContext);
+}
+function useSurfaceMode() {
+  return React25.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";
@@ -2600,7 +2717,7 @@ function getServerSnapshot() {
   return "dark";
 }
 function useTheme() {
-  return React24.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return React25.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
 // src/components/ui/card/Card.tsx
@@ -2633,17 +2750,17 @@ function Card({
   ...props
 }) {
   const isClickable = isInteractive || !!onPress;
-  const [isHovered, setIsHovered] = React24.useState(false);
+  const [isHovered, setIsHovered] = React25.useState(false);
   const theme = useTheme();
-  const elevationLevel = React24.useMemo(() => {
+  const elevationLevel = React25.useMemo(() => {
     const validated = getValidatedElevation("card", elevation);
     if (variant === "outline" || variant === "accent" || variant === "subtle") {
       return 1;
     }
     return validated;
   }, [variant, elevation]);
-  const baseColor = React24.useMemo(() => getBaseSurfaceColor(theme), [theme]);
-  const surfaceColor = React24.useMemo(() => {
+  const baseColor = React25.useMemo(() => getBaseSurfaceColor(theme), [theme]);
+  const surfaceColor = React25.useMemo(() => {
     if ((variant === "outline" || variant === "accent") && theme === "light") {
       return "#FAFAFA";
     }
@@ -2652,7 +2769,7 @@ function Card({
     }
     return getElevationSurface(baseColor, elevationLevel, theme);
   }, [baseColor, elevationLevel, theme, variant]);
-  const shadowStyle = React24.useMemo(() => {
+  const shadowStyle = React25.useMemo(() => {
     const shouldHover = isHovered && isClickable;
     return getElevationShadow(baseColor, elevationLevel, theme, shouldHover);
   }, [baseColor, elevationLevel, theme, isHovered, isClickable]);
@@ -2683,11 +2800,11 @@ function Card({
     isLoading && "pointer-events-none animate-pulse",
     className
   );
-  const accentStyle = React24.useMemo(() => variant === "accent" ? {
+  const accentStyle = React25.useMemo(() => variant === "accent" ? {
     borderLeftWidth: accentWidth ?? 3,
     borderLeftColor: accentColor ?? "var(--color-brand-primary)"
   } : {}, [variant, accentWidth, accentColor]);
-  const mergedStyle = React24.useMemo(() => {
+  const mergedStyle = React25.useMemo(() => {
     const elevationStyle = {
       backgroundColor: bgColor || surfaceColor,
       borderRadius: 8,
@@ -3052,7 +3169,7 @@ function AvatarGroup({
   size = "md",
   className
 }) {
-  const childArray = React24__default.default.Children.toArray(children);
+  const childArray = React25__default.default.Children.toArray(children);
   const visibleChildren = max ? childArray.slice(0, max) : childArray;
   const remainingCount = max ? Math.max(0, childArray.length - max) : 0;
   return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row", className), children: [
@@ -3063,7 +3180,7 @@ function AvatarGroup({
           "border-2 border-surface-base rounded-full",
           index > 0 && "-ml-2"
         ),
-        children: React24__default.default.isValidElement(child) ? React24__default.default.cloneElement(child, { size }) : child
+        children: React25__default.default.isValidElement(child) ? React25__default.default.cloneElement(child, { size }) : child
       },
       index
     )),
@@ -3106,7 +3223,7 @@ var sizeStyles6 = {
   md: { box: "w-5 h-5", icon: "w-3 h-3", label: "text-base" },
   lg: { box: "w-6 h-6", icon: "w-3.5 h-3.5", label: "text-lg" }
 };
-var Checkbox = React24.forwardRef(function Checkbox2({
+var Checkbox = React25.forwardRef(function Checkbox2({
   isChecked = false,
   isIndeterminate = false,
   isDisabled = false,
@@ -3192,7 +3309,7 @@ var sizeStyles7 = {
   md: { track: "w-10 h-5", thumb: "w-4 h-4", translate: "translate-x-5" },
   lg: { track: "w-12 h-6", thumb: "w-5 h-5", translate: "translate-x-6" }
 };
-var Switch = React24.forwardRef(function Switch2({
+var Switch = React25.forwardRef(function Switch2({
   isChecked = false,
   isDisabled = false,
   size = "md",
@@ -3251,7 +3368,7 @@ var Switch = React24.forwardRef(function Switch2({
     }
   );
 });
-var ModalContext = React24.createContext({ size: "md", scrollBehavior: "outside" });
+var ModalContext = React25.createContext({ size: "md", scrollBehavior: "outside" });
 var sizeStyles8 = {
   xs: "max-w-xs",
   sm: "max-w-sm",
@@ -3309,7 +3426,7 @@ function Modal({
   ) });
 }
 function ModalContent({ children, className }) {
-  const { size } = React24.useContext(ModalContext);
+  const { size } = React25.useContext(ModalContext);
   return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
@@ -3342,7 +3459,7 @@ function ModalTitle({ children, className }) {
   );
 }
 function ModalCloseButton({ className }) {
-  const { onClose } = React24.useContext(ModalContext);
+  const { onClose } = React25.useContext(ModalContext);
   return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
@@ -3358,7 +3475,7 @@ function ModalCloseButton({ className }) {
   );
 }
 function ModalBody({ children, maxHeight, className }) {
-  const { scrollBehavior } = React24.useContext(ModalContext);
+  const { scrollBehavior } = React25.useContext(ModalContext);
   if (scrollBehavior === "inside") {
     return /* @__PURE__ */ jsx(
       reactNative.ScrollView,
@@ -3494,7 +3611,7 @@ function SkeletonListItem({
     /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", children: /* @__PURE__ */ jsx(SkeletonText, { lines, animation }) })
   ] });
 }
-var TabsContext = React24.createContext({
+var TabsContext = React25.createContext({
   activeIndex: 0,
   setActiveIndex: () => {
   },
@@ -3511,7 +3628,7 @@ function Tabs({
   children,
   ...props
 }) {
-  const [internalIndex, setInternalIndex] = React24.useState(defaultIndex);
+  const [internalIndex, setInternalIndex] = React25.useState(defaultIndex);
   const activeIndex = index ?? internalIndex;
   const setActiveIndex = (newIndex) => {
     if (index === void 0) {
@@ -3532,7 +3649,7 @@ function Tabs({
   ) });
 }
 function TabList({ children, className }) {
-  const { variant, orientation } = React24.useContext(TabsContext);
+  const { variant, orientation } = React25.useContext(TabsContext);
   const variantStyles5 = {
     line: orientation === "horizontal" ? "border-b border-border" : "border-r border-border",
     enclosed: "bg-surface-raised rounded-lg p-1",
@@ -3546,9 +3663,9 @@ function TabList({ children, className }) {
         variantStyles5[variant],
         className
       ),
-      children: React24__default.default.Children.map(children, (child, index) => {
-        if (React24__default.default.isValidElement(child)) {
-          return React24__default.default.cloneElement(child, { index });
+      children: React25__default.default.Children.map(children, (child, index) => {
+        if (React25__default.default.isValidElement(child)) {
+          return React25__default.default.cloneElement(child, { index });
         }
         return child;
       })
@@ -3573,7 +3690,7 @@ function Tab({
   className,
   children
 }) {
-  const { activeIndex, setActiveIndex, variant, orientation } = React24.useContext(TabsContext);
+  const { activeIndex, setActiveIndex, variant, orientation } = React25.useContext(TabsContext);
   const isActive = activeIndex === index;
   const baseStyles = "font-medium text-sm transition-colors";
   const variantStyles5 = {
@@ -3618,9 +3735,9 @@ function Tab({
   );
 }
 function TabPanels({ children, className }) {
-  const { activeIndex } = React24.useContext(TabsContext);
-  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-1", className), children: React24__default.default.Children.map(children, (child, index) => {
-    if (React24__default.default.isValidElement(child) && index === activeIndex) {
+  const { activeIndex } = React25.useContext(TabsContext);
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-1", className), children: React25__default.default.Children.map(children, (child, index) => {
+    if (React25__default.default.isValidElement(child) && index === activeIndex) {
       return child;
     }
     return null;
@@ -3803,13 +3920,13 @@ function Tooltip({
   usePortal: usePortalProp = false,
   ...props
 }) {
-  const [isVisible, setIsVisible] = React24.useState(false);
-  const [portalPos, setPortalPos] = React24.useState(null);
-  const openTimeoutRef = React24.useRef(null);
-  const closeTimeoutRef = React24.useRef(null);
-  const triggerRef = React24.useRef(null);
+  const [isVisible, setIsVisible] = React25.useState(false);
+  const [portalPos, setPortalPos] = React25.useState(null);
+  const openTimeoutRef = React25.useRef(null);
+  const closeTimeoutRef = React25.useRef(null);
+  const triggerRef = React25.useRef(null);
   const isPortalMode = usePortalProp && reactNative.Platform.OS === "web" && !!createPortal;
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     if (!isVisible || !isPortalMode || !triggerRef.current) return;
     const node = triggerRef.current;
     const id = requestAnimationFrame(() => {
@@ -3943,7 +4060,7 @@ function Tooltip({
     )
   ] });
 }
-var CollapseContext = React24.createContext({
+var CollapseContext = React25.createContext({
   isOpen: false,
   toggle: () => {
   }
@@ -3956,7 +4073,7 @@ function Collapse({
   children,
   ...props
 }) {
-  const [internalIsOpen, setInternalIsOpen] = React24.useState(defaultIsOpen);
+  const [internalIsOpen, setInternalIsOpen] = React25.useState(defaultIsOpen);
   const isOpen = controlledIsOpen ?? internalIsOpen;
   const toggle = () => {
     const newState = !isOpen;
@@ -3968,7 +4085,7 @@ function Collapse({
   return /* @__PURE__ */ jsx(CollapseContext.Provider, { value: { isOpen, toggle }, children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("w-full", className), ...props, children }) });
 }
 function CollapseButton({ children, className }) {
-  const { isOpen, toggle } = React24.useContext(CollapseContext);
+  const { isOpen, toggle } = React25.useContext(CollapseContext);
   return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
     {
@@ -3988,11 +4105,11 @@ function CollapseButton({ children, className }) {
   );
 }
 function CollapseContent({ children, className }) {
-  const { isOpen } = React24.useContext(CollapseContext);
+  const { isOpen } = React25.useContext(CollapseContext);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("overflow-hidden", className), children });
 }
-var AccordionContext = React24.createContext({
+var AccordionContext = React25.createContext({
   openIndices: /* @__PURE__ */ new Set(),
   toggleIndex: () => {
   },
@@ -4005,7 +4122,7 @@ function Accordion({
   children,
   ...props
 }) {
-  const [openIndices, setOpenIndices] = React24.useState(new Set(defaultIndex));
+  const [openIndices, setOpenIndices] = React25.useState(new Set(defaultIndex));
   const toggleIndex = (index) => {
     setOpenIndices((prev) => {
       const newSet = new Set(prev);
@@ -4020,19 +4137,19 @@ function Accordion({
       return newSet;
     });
   };
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("w-full divide-y divide-border", className), ...props, children: React24__default.default.Children.map(children, (child, index) => {
-    if (React24__default.default.isValidElement(child)) {
-      return React24__default.default.cloneElement(child, { index });
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("w-full divide-y divide-border", className), ...props, children: React25__default.default.Children.map(children, (child, index) => {
+    if (React25__default.default.isValidElement(child)) {
+      return React25__default.default.cloneElement(child, { index });
     }
     return child;
   }) }) });
 }
 function AccordionItem({ index = 0, children, className }) {
-  const { openIndices, toggleIndex } = React24.useContext(AccordionContext);
+  const { openIndices, toggleIndex } = React25.useContext(AccordionContext);
   const isOpen = openIndices.has(index);
-  return /* @__PURE__ */ jsx(reactNative.View, { className, children: React24__default.default.Children.map(children, (child) => {
-    if (React24__default.default.isValidElement(child)) {
-      return React24__default.default.cloneElement(child, {
+  return /* @__PURE__ */ jsx(reactNative.View, { className, children: React25__default.default.Children.map(children, (child) => {
+    if (React25__default.default.isValidElement(child)) {
+      return React25__default.default.cloneElement(child, {
         isOpen,
         onToggle: () => toggleIndex(index)
       });
@@ -4075,7 +4192,7 @@ function Breadcrumbs({
   children,
   ...props
 }) {
-  const items = React24__default.default.Children.toArray(children);
+  const items = React25__default.default.Children.toArray(children);
   let displayItems = items;
   if (maxItems && items.length > maxItems) {
     const firstItem = items[0];
@@ -4141,7 +4258,7 @@ function BreadcrumbItem({
 function BreadcrumbEllipsis() {
   return /* @__PURE__ */ jsx(reactNative.Text, { className: "text-sm text-text-tertiary", children: "..." });
 }
-var PopoverContext = React24.createContext({
+var PopoverContext = React25.createContext({
   isOpen: false,
   setIsOpen: () => {
   },
@@ -4163,16 +4280,16 @@ function Popover({
   children,
   ...props
 }) {
-  const [internalIsOpen, setInternalIsOpen] = React24.useState(false);
+  const [internalIsOpen, setInternalIsOpen] = React25.useState(false);
   const isOpen = controlledIsOpen ?? internalIsOpen;
-  const closeTimerRef = React24.useRef(null);
-  const setIsOpen = React24.useCallback((open) => {
+  const closeTimerRef = React25.useRef(null);
+  const setIsOpen = React25.useCallback((open) => {
     if (controlledIsOpen === void 0) {
       setInternalIsOpen(open);
     }
     onOpenChange?.(open);
   }, [controlledIsOpen, onOpenChange]);
-  const handleHoverIn = React24.useCallback(() => {
+  const handleHoverIn = React25.useCallback(() => {
     if (triggerMode !== "hover") return;
     if (closeTimerRef.current) {
       clearTimeout(closeTimerRef.current);
@@ -4180,7 +4297,7 @@ function Popover({
     }
     setIsOpen(true);
   }, [triggerMode, setIsOpen]);
-  const handleHoverOut = React24.useCallback(() => {
+  const handleHoverOut = React25.useCallback(() => {
     if (triggerMode !== "hover") return;
     closeTimerRef.current = setTimeout(() => {
       setIsOpen(false);
@@ -4196,7 +4313,7 @@ function Popover({
   );
 }
 function PopoverTrigger({ children, className }) {
-  const { isOpen, setIsOpen, triggerMode, handleHoverIn, handleHoverOut } = React24.useContext(PopoverContext);
+  const { isOpen, setIsOpen, triggerMode, handleHoverIn, handleHoverOut } = React25.useContext(PopoverContext);
   const hoverProps = triggerMode === "hover" ? {
     onHoverIn: handleHoverIn,
     onHoverOut: handleHoverOut,
@@ -4222,7 +4339,7 @@ var SPACER_STYLES = {
   right: { top: 0, bottom: 0, left: 0, width: 8, transform: "translateX(-100%)" }
 };
 function PopoverContent({ children, className }) {
-  const { isOpen, setIsOpen, placement, triggerMode, handleHoverIn, handleHoverOut } = React24.useContext(PopoverContext);
+  const { isOpen, setIsOpen, placement, triggerMode, handleHoverIn, handleHoverOut } = React25.useContext(PopoverContext);
   if (!isOpen) return null;
   const placementStyles3 = {
     top: "bottom-full left-0 mb-2",
@@ -4277,7 +4394,7 @@ function PopoverContent({ children, className }) {
   ] });
 }
 function PopoverCloseButton({ children, className }) {
-  const { setIsOpen } = React24.useContext(PopoverContext);
+  const { setIsOpen } = React25.useContext(PopoverContext);
   return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
@@ -4289,7 +4406,7 @@ function PopoverCloseButton({ children, className }) {
     }
   );
 }
-var MenuContext = React24.createContext({
+var MenuContext = React25.createContext({
   isOpen: false,
   setIsOpen: () => {
   },
@@ -4303,7 +4420,7 @@ function Menu({
   children,
   ...props
 }) {
-  const [internalIsOpen, setInternalIsOpen] = React24.useState(false);
+  const [internalIsOpen, setInternalIsOpen] = React25.useState(false);
   const isOpen = controlledIsOpen ?? internalIsOpen;
   const setIsOpen = (open) => {
     if (controlledIsOpen === void 0) {
@@ -4315,7 +4432,7 @@ function Menu({
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { isOpen, setIsOpen, closeMenu }, children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("relative", className), ...props, children }) });
 }
 function MenuTrigger({ children, className }) {
-  const { isOpen, setIsOpen } = React24.useContext(MenuContext);
+  const { isOpen, setIsOpen } = React25.useContext(MenuContext);
   return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
@@ -4328,7 +4445,7 @@ function MenuTrigger({ children, className }) {
   );
 }
 function MenuList({ children, className }) {
-  const { isOpen, setIsOpen } = React24.useContext(MenuContext);
+  const { isOpen, setIsOpen } = React25.useContext(MenuContext);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -4362,7 +4479,7 @@ function MenuItem({
   className,
   children
 }) {
-  const { closeMenu } = React24.useContext(MenuContext);
+  const { closeMenu } = React25.useContext(MenuContext);
   const handlePress = () => {
     if (isDisabled) return;
     onPress?.();
@@ -4406,7 +4523,7 @@ function MenuGroup({ label, children, className }) {
     children
   ] });
 }
-var SelectContext = React24.createContext({
+var SelectContext = React25.createContext({
   value: null,
   isMulti: false,
   isOpen: false,
@@ -4430,7 +4547,7 @@ function Select({
   className,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React24.useState(false);
+  const [isOpen, setIsOpen] = React25.useState(false);
   const selectValue = (val) => {
     if (isMulti) {
       const newValues = values.includes(val) ? values.filter((v) => v !== val) : [...values, val];
@@ -4533,7 +4650,7 @@ function Select({
   ] }) });
 }
 function SelectOption({ option }) {
-  const { selectValue, isSelected, isMulti } = React24.useContext(SelectContext);
+  const { selectValue, isSelected, isMulti } = React25.useContext(SelectContext);
   const selected = isSelected(option.value);
   return /* @__PURE__ */ jsxs(
     reactNative.Pressable,
@@ -4564,7 +4681,7 @@ function SelectOption({ option }) {
     }
   );
 }
-var ToolbarButtonContext = React24.createContext({
+var ToolbarButtonContext = React25.createContext({
   isOpen: false,
   setIsOpen: () => {
   }
@@ -4597,16 +4714,16 @@ function ToolbarButton({
   children,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React24.useState(false);
-  const [isHovered, setIsHovered] = React24.useState(false);
-  const handlePress = React24.useCallback(() => {
+  const [isOpen, setIsOpen] = React25.useState(false);
+  const [isHovered, setIsHovered] = React25.useState(false);
+  const handlePress = React25.useCallback(() => {
     if (isDisabled) return;
     if (menuContent) {
       setIsOpen((prev) => !prev);
     }
     onPress?.();
   }, [isDisabled, menuContent, onPress]);
-  const handleClose = React24.useCallback(() => {
+  const handleClose = React25.useCallback(() => {
     setIsOpen(false);
   }, []);
   const selected = isActive === void 0 ? isOpen : isActive;
@@ -4661,7 +4778,7 @@ function ToolbarButton({
           }
         ],
         children: [
-          icon && /* @__PURE__ */ jsx(reactNative.View, { className: "w-5 h-5 items-center justify-center", children: React24__default.default.isValidElement(icon) ? React24__default.default.cloneElement(icon, {
+          icon && /* @__PURE__ */ jsx(reactNative.View, { className: "w-5 h-5 items-center justify-center", children: React25__default.default.isValidElement(icon) ? React25__default.default.cloneElement(icon, {
             size: 20,
             width: 20,
             height: 20,
@@ -4750,9 +4867,9 @@ function ToolbarButtonGroup({
   );
 }
 function useToolbarButton() {
-  return React24.useContext(ToolbarButtonContext);
+  return React25.useContext(ToolbarButtonContext);
 }
-var RadioGroupContext = React24.createContext(null);
+var RadioGroupContext = React25.createContext(null);
 var gapStyles2 = {
   sm: "gap-2",
   md: "gap-3",
@@ -4815,7 +4932,7 @@ function Radio({
   children,
   ...props
 }) {
-  const context = React24.useContext(RadioGroupContext);
+  const context = React25.useContext(RadioGroupContext);
   if (!context) {
     throw new Error("Radio must be used within a RadioGroup");
   }
@@ -5194,7 +5311,7 @@ function ProgressSteps({
 }) {
   const { dot, connector } = stepSizeStyles[size];
   return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("w-full", className), ...props, children: [
-    /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row items-center", children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsxs(React24__default.default.Fragment, { children: [
+    /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row items-center", children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsxs(React25__default.default.Fragment, { children: [
       /* @__PURE__ */ jsx(
         reactNative.View,
         {
@@ -5229,7 +5346,7 @@ function ProgressSteps({
     )) })
   ] });
 }
-var ToastContext = React24.createContext(null);
+var ToastContext = React25.createContext(null);
 var toastIdCounter = 0;
 var positionStyles = {
   "top": "top-4 left-1/2 -translate-x-1/2",
@@ -5245,8 +5362,8 @@ function ToastProvider({
   maxToasts = 5,
   children
 }) {
-  const [toasts, setToasts] = React24.useState([]);
-  const addToast = React24.useCallback((config) => {
+  const [toasts, setToasts] = React25.useState([]);
+  const addToast = React25.useCallback((config) => {
     const id = `toast-${++toastIdCounter}`;
     const newToast = {
       id,
@@ -5261,10 +5378,10 @@ function ToastProvider({
     });
     return id;
   }, [defaultDuration, maxToasts]);
-  const removeToast = React24.useCallback((id) => {
+  const removeToast = React25.useCallback((id) => {
     setToasts((prev) => prev.filter((t17) => t17.id !== id));
   }, []);
-  const removeAllToasts = React24.useCallback(() => {
+  const removeAllToasts = React25.useCallback(() => {
     setToasts([]);
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast, removeAllToasts }, children: [
@@ -5293,7 +5410,7 @@ function ToastProvider({
   ] });
 }
 function useToast() {
-  const context = React24.useContext(ToastContext);
+  const context = React25.useContext(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -5337,7 +5454,7 @@ function ToastItem({
   onClose
 }) {
   const { bg, border, icon } = statusStyles[status];
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     if (duration > 0) {
       const timer = setTimeout(onClose, duration);
       return () => clearTimeout(timer);
@@ -5439,18 +5556,18 @@ function Autocomplete({
   inputProps,
   ...props
 }) {
-  const [inputValue, setInputValue] = React24.useState("");
-  const [isOpen, setIsOpen] = React24.useState(false);
-  const [highlightedIndex, setHighlightedIndex] = React24.useState(-1);
-  const selectedOption = React24.useMemo(
+  const [inputValue, setInputValue] = React25.useState("");
+  const [isOpen, setIsOpen] = React25.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React25.useState(-1);
+  const selectedOption = React25.useMemo(
     () => options.find((o) => o.value === value),
     [options, value]
   );
-  const filteredOptions = React24.useMemo(() => {
+  const filteredOptions = React25.useMemo(() => {
     if (inputValue.length < minChars) return [];
     return options.filter((option) => filterFn(option, inputValue));
   }, [options, inputValue, minChars, filterFn]);
-  const handleInputChange = React24.useCallback(
+  const handleInputChange = React25.useCallback(
     (text) => {
       setInputValue(text);
       setIsOpen(true);
@@ -5459,7 +5576,7 @@ function Autocomplete({
     },
     [onInputChange]
   );
-  const handleSelectOption = React24.useCallback(
+  const handleSelectOption = React25.useCallback(
     (option) => {
       if (option.isDisabled) return;
       onChange?.(option.value);
@@ -5468,18 +5585,18 @@ function Autocomplete({
     },
     [onChange]
   );
-  const handleClear = React24.useCallback(() => {
+  const handleClear = React25.useCallback(() => {
     onChange?.(null);
     setInputValue("");
     setIsOpen(false);
   }, [onChange]);
-  const handleFocus = React24.useCallback(() => {
+  const handleFocus = React25.useCallback(() => {
     setIsOpen(true);
     if (selectedOption && !inputValue) {
       setInputValue(selectedOption.label);
     }
   }, [selectedOption, inputValue]);
-  const handleBlur = React24.useCallback(() => {
+  const handleBlur = React25.useCallback(() => {
     setTimeout(() => {
       setIsOpen(false);
       if (selectedOption) {
@@ -5653,7 +5770,7 @@ function HelpTip({
   className,
   ...props
 }) {
-  const [internalIsOpen, setInternalIsOpen] = React24.useState(false);
+  const [internalIsOpen, setInternalIsOpen] = React25.useState(false);
   const isOpen = controlledIsOpen ?? internalIsOpen;
   const { icon: iconSize, text: textSize } = sizeStyles13[size];
   const handlePress = () => {
@@ -5759,7 +5876,7 @@ function FormField({
 }) {
   const isInvalid = !!errorMessage;
   const isHorizontal = orientation === "horizontal";
-  const fieldId = React24__default.default.useId();
+  const fieldId = React25__default.default.useId();
   const helperId = `${fieldId}-helper`;
   const errorId = `${fieldId}-error`;
   return /* @__PURE__ */ jsxs(
@@ -5800,10 +5917,10 @@ function FormField({
           }
         ),
         /* @__PURE__ */ jsxs(reactNative.View, { className: cn(isHorizontal && "flex-1"), children: [
-          React24__default.default.Children.map(children, (child) => {
-            if (React24__default.default.isValidElement(child)) {
+          React25__default.default.Children.map(children, (child) => {
+            if (React25__default.default.isValidElement(child)) {
               const childProps = child.props;
-              return React24__default.default.cloneElement(child, {
+              return React25__default.default.cloneElement(child, {
                 accessibilityHint: errorMessage || helperText || childProps.accessibilityHint,
                 accessibilityState: {
                   ...childProps.accessibilityState,
@@ -6014,32 +6131,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 = React25.useMemo(
+    () => ({ mode, level: resolvedLevel }),
+    [mode, resolvedLevel]
+  );
+  return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value, children: /* @__PURE__ */ jsx(
     reactNative.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 ? reactNative.Pressable : reactNative.View;
@@ -6277,7 +6411,7 @@ function Label(props) {
 function Overline(props) {
   return /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", ...props });
 }
-var SidebarContext = React24.createContext({
+var SidebarContext = React25.createContext({
   isCollapsed: false
 });
 function Sidebar({
@@ -6321,7 +6455,7 @@ function SidebarFooter({ children, className }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-2 py-4 border-t border-border-subtle", className), children });
 }
 function SidebarSection({ title, children, className }) {
-  const { isCollapsed } = React24.useContext(SidebarContext);
+  const { isCollapsed } = React25.useContext(SidebarContext);
   return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("px-2 py-2", className), children: [
     title && !isCollapsed && /* @__PURE__ */ jsx(reactNative.Text, { className: "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-text-tertiary", children: title }),
     /* @__PURE__ */ jsx(reactNative.View, { className: "gap-0.5", children })
@@ -6338,7 +6472,7 @@ function SidebarItem({
   onPress,
   ...props
 }) {
-  const { isCollapsed, activeItem, onItemSelect } = React24.useContext(SidebarContext);
+  const { isCollapsed, activeItem, onItemSelect } = React25.useContext(SidebarContext);
   const isActive = activeItem === id;
   const handlePress = (e) => {
     onItemSelect?.(id);
@@ -6390,7 +6524,7 @@ function SidebarItem({
 function SidebarDivider({ className }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("h-px mx-4 my-2 bg-border-subtle", className) });
 }
-var TableContext = React24.createContext({
+var TableContext = React25.createContext({
   sortDirection: null,
   selectedRows: /* @__PURE__ */ new Set(),
   selectable: false,
@@ -6472,7 +6606,7 @@ function TableHeaderCell({
   onPress,
   ...props
 }) {
-  const { sortColumn, sortDirection, onSort } = React24.useContext(TableContext);
+  const { sortColumn, sortDirection, onSort } = React25.useContext(TableContext);
   const isSorted = sortKey && sortColumn === sortKey;
   const isSortable = !!sortKey && !!onSort;
   const ariaSort = isSorted ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : "none";
@@ -6660,11 +6794,11 @@ function useTable({
   defaultSortColumn,
   defaultSortDirection = null
 }) {
-  const [page, setPage] = React24.useState(0);
-  const [pageSize, setPageSize] = React24.useState(defaultPageSize);
-  const [sortColumn, setSortColumn] = React24.useState(defaultSortColumn);
-  const [sortDirection, setSortDirection] = React24.useState(defaultSortDirection);
-  const sortedData = React24.useMemo(() => {
+  const [page, setPage] = React25.useState(0);
+  const [pageSize, setPageSize] = React25.useState(defaultPageSize);
+  const [sortColumn, setSortColumn] = React25.useState(defaultSortColumn);
+  const [sortDirection, setSortDirection] = React25.useState(defaultSortDirection);
+  const sortedData = React25.useMemo(() => {
     if (!sortColumn || !sortDirection) return data;
     return [...data].sort((a, b) => {
       const aVal = a[sortColumn];
@@ -6676,7 +6810,7 @@ function useTable({
       return sortDirection === "asc" ? comparison : -comparison;
     });
   }, [data, sortColumn, sortDirection]);
-  const paginatedData = React24.useMemo(() => {
+  const paginatedData = React25.useMemo(() => {
     const start = page * pageSize;
     return sortedData.slice(start, start + pageSize);
   }, [sortedData, page, pageSize]);
@@ -6745,7 +6879,7 @@ function EmptyState({
     }
   );
 }
-var StepperContext = React24.createContext({
+var StepperContext = React25.createContext({
   activeStep: 0,
   orientation: "horizontal"
 });
@@ -6764,11 +6898,11 @@ function Stepper({
         className
       ),
       ...props,
-      children: React24__default.default.Children.map(children, (child, index) => {
-        if (React24__default.default.isValidElement(child)) {
+      children: React25__default.default.Children.map(children, (child, index) => {
+        if (React25__default.default.isValidElement(child)) {
           return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
-            React24__default.default.cloneElement(child, { index }),
-            index < React24__default.default.Children.count(children) - 1 && /* @__PURE__ */ jsx(StepConnector, { index })
+            React25__default.default.cloneElement(child, { index }),
+            index < React25__default.default.Children.count(children) - 1 && /* @__PURE__ */ jsx(StepConnector, { index })
           ] });
         }
         return child;
@@ -6777,7 +6911,7 @@ function Stepper({
   ) });
 }
 function StepConnector({ index }) {
-  const { activeStep, orientation } = React24.useContext(StepperContext);
+  const { activeStep, orientation } = React25.useContext(StepperContext);
   const isCompleted = index < activeStep;
   if (orientation === "horizontal") {
     return /* @__PURE__ */ jsx(
@@ -6801,7 +6935,7 @@ function StepConnector({ index }) {
   );
 }
 function Step({ index = 0, status, className, children }) {
-  const { activeStep, orientation } = React24.useContext(StepperContext);
+  const { activeStep, orientation } = React25.useContext(StepperContext);
   const derivedStatus = status || (index < activeStep ? "completed" : index === activeStep ? "active" : "upcoming");
   return /* @__PURE__ */ jsx(
     reactNative.View,
@@ -6810,9 +6944,9 @@ function Step({ index = 0, status, className, children }) {
         orientation === "horizontal" ? "items-center" : "flex-row items-start",
         className
       ),
-      children: React24__default.default.Children.map(children, (child) => {
-        if (React24__default.default.isValidElement(child)) {
-          return React24__default.default.cloneElement(child, {
+      children: React25__default.default.Children.map(children, (child) => {
+        if (React25__default.default.isValidElement(child)) {
+          return React25__default.default.cloneElement(child, {
             status: derivedStatus,
             index
           });
@@ -6856,7 +6990,7 @@ function StepIndicator({
   );
 }
 function StepLabel({ status = "upcoming", className, children }) {
-  const { orientation } = React24.useContext(StepperContext);
+  const { orientation } = React25.useContext(StepperContext);
   return /* @__PURE__ */ jsx(
     reactNative.Text,
     {
@@ -7015,8 +7149,8 @@ function DateTime({
   className,
   ...props
 }) {
-  const [now, setNow] = React24.useState(() => Date.now());
-  React24.useEffect(() => {
+  const [now, setNow] = React25.useState(() => Date.now());
+  React25.useEffect(() => {
     if (!live) return;
     const id = setInterval(() => setNow(Date.now()), refreshMs);
     return () => clearInterval(id);
@@ -7050,8 +7184,8 @@ function useTimer(options = {}) {
     tickMs = 1e3
   } = options;
   const isControlled = controlledElapsedMs != null;
-  const [internalElapsedMs, setInternalElapsedMs] = React24.useState(0);
-  React24.useEffect(() => {
+  const [internalElapsedMs, setInternalElapsedMs] = React25.useState(0);
+  React25.useEffect(() => {
     if (isControlled || !autoTick || !running) return;
     const id = setInterval(() => {
       setInternalElapsedMs((prev) => prev + tickMs);
@@ -7210,8 +7344,8 @@ function MetricGroup({
   children,
   ...props
 }) {
-  const items = React24__default.default.Children.toArray(children);
-  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React24__default.default.Fragment, { children: [
+  const items = React25__default.default.Children.toArray(children);
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React25__default.default.Fragment, { children: [
     /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1 items-center", children: child }),
     i < items.length - 1 && /* @__PURE__ */ jsx(
       reactNative.View,
@@ -7222,13 +7356,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)"
@@ -7243,7 +7378,7 @@ function BaseBadge({
   children,
   ...props
 }) {
-  const [scaleAnim] = React24.useState(() => new reactNative.Animated.Value(1));
+  const [scaleAnim] = React25.useState(() => new reactNative.Animated.Value(1));
   const config = baseBadgeSizeConfig[size];
   const colors = variantColors[variant];
   const handlePressIn = () => {
@@ -7402,9 +7537,9 @@ function PrBadge({
   ...props
 }) {
   const resolvedLabel = labelProp ?? typeLabels[type];
-  const [scale] = React24.useState(() => new reactNative.Animated.Value(animate ? 0.8 : 1));
-  const [opacity] = React24.useState(() => new reactNative.Animated.Value(animate ? 0 : 1));
-  React24.useEffect(() => {
+  const [scale] = React25.useState(() => new reactNative.Animated.Value(animate ? 0.8 : 1));
+  const [opacity] = React25.useState(() => new reactNative.Animated.Value(animate ? 0 : 1));
+  React25.useEffect(() => {
     if (!animate) return;
     reactNative.Animated.parallel([
       reactNative.Animated.timing(scale, {
@@ -7468,11 +7603,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 = {
@@ -7512,8 +7647,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 = {
@@ -7834,19 +7969,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;
@@ -7975,7 +8110,7 @@ function TempoDisplay({
   className,
   ...props
 }) {
-  const [showTooltip, setShowTooltip] = React24.useState(false);
+  const [showTooltip, setShowTooltip] = React25.useState(false);
   const [eccentric, pauseBottom, concentric, pauseTop] = roundTempo(tempo);
   const isSm = size === "sm";
   const fontSize = fontSizeProp ?? (isSm ? 9 : 11);
@@ -7983,7 +8118,7 @@ function TempoDisplay({
   const chromePadY = Math.round(fontSize * 0.3);
   const chromeRadius = Math.round(fontSize * 0.4);
   const labelFont = Math.max(9, Math.round(fontSize * 0.5));
-  const handlePress = React24.useCallback(() => {
+  const handlePress = React25.useCallback(() => {
     if (onPress) {
       onPress();
     }
@@ -7998,7 +8133,7 @@ function TempoDisplay({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: "#1C1C1C",
+        backgroundColor: t3["surface-raised"],
         paddingHorizontal: chromePadX,
         paddingVertical: chromePadY,
         borderRadius: chromeRadius
@@ -8013,7 +8148,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)
@@ -8071,7 +8206,7 @@ function TempoDisplay({
                 reactNative.View,
                 {
                   style: {
-                    backgroundColor: "#191919",
+                    backgroundColor: t3["surface-overlay"],
                     borderRadius: 6,
                     paddingVertical: 8,
                     paddingHorizontal: 12,
@@ -8124,13 +8259,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";
@@ -8198,19 +8333,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
@@ -8250,8 +8385,8 @@ function IntensityBar({
   const pct2 = Math.round(Math.max(0, level) * 100);
   const zone = zoneForPct(pct2);
   const atTarget = isAtTarget(pct2, threshold);
-  const [fillAnim] = React24.useState(() => new reactNative.Animated.Value(fillLevel));
-  React24.useEffect(() => {
+  const [fillAnim] = React25.useState(() => new reactNative.Animated.Value(fillLevel));
+  React25.useEffect(() => {
     const animation = reactNative.Animated.timing(fillAnim, {
       toValue: fillLevel,
       duration: 250,
@@ -8379,12 +8514,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)"
 };
@@ -8397,16 +8532,16 @@ 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
 };
 function usePulse(enabled) {
-  const [opacity] = React24.useState(() => new reactNative.Animated.Value(1));
-  React24.useEffect(() => {
+  const [opacity] = React25.useState(() => new reactNative.Animated.Value(1));
+  React25.useEffect(() => {
     if (!enabled) {
       opacity.setValue(1);
       return;
@@ -8536,8 +8671,8 @@ var PULSE_HALF_MS = 950;
 var PULSE_MIN_OPACITY = 0.45;
 var SEGMENTED_BAR_GAP = 5;
 function usePulse2(active) {
-  const [value] = React24.useState(() => new reactNative.Animated.Value(0));
-  React24.useEffect(() => {
+  const [value] = React25.useState(() => new reactNative.Animated.Value(0));
+  React25.useEffect(() => {
     if (!active) return;
     const loop = reactNative.Animated.loop(
       reactNative.Animated.sequence([
@@ -8962,8 +9097,8 @@ function getReducedMotionPreference() {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React24.useState(getReducedMotionPreference);
-  React24.useEffect(() => {
+  const [reduced, setReduced] = React25.useState(getReducedMotionPreference);
+  React25.useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     const handler = () => setReduced(mq.matches);
@@ -8978,8 +9113,8 @@ var ANIMATION_EASING = reactNative.Easing.bezier(0.22, 1, 0.36, 1);
 var POP_EASING = reactNative.Easing.bezier(0.34, 1.56, 0.64, 1);
 function useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
   const prefersReducedMotion = usePrefersReducedMotion();
-  const [liveScale] = React24.useState(() => new reactNative.Animated.Value(1));
-  React24.useEffect(() => {
+  const [liveScale] = React25.useState(() => new reactNative.Animated.Value(1));
+  React25.useEffect(() => {
     if (!active || liveRepIndex == null || liveVelocity == null) return;
     if (prefersReducedMotion) {
       liveScale.setValue(1);
@@ -9027,7 +9162,7 @@ function HeroVelocityChart({
 }) {
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak);
-  const [plotW, setPlotW] = React24.useState(0);
+  const [plotW, setPlotW] = React25.useState(0);
   const onPlotLayout = (e) => setPlotW(e.nativeEvent.layout.width);
   const plotHeight = Math.max(0, height - HERO_LABEL_HEADROOM);
   const barHeight = (velocity) => scaleDenom > 0 ? Math.max(HERO_MIN_BAR_HEIGHT, Math.min(1, velocity / scaleDenom) * plotHeight) : HERO_MIN_BAR_HEIGHT;
@@ -9201,9 +9336,9 @@ function VelocityStrip({
     return SET_STRIP_VARIABLE_COLOR;
   };
   const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
-  const [heightAnim] = React24.useState(() => new reactNative.Animated.Value(expanded ? height : 3));
-  const [labelOpacity] = React24.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
-  const [infoOpacity] = React24.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const [heightAnim] = React25.useState(() => new reactNative.Animated.Value(expanded ? height : 3));
+  const [labelOpacity] = React25.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const [infoOpacity] = React25.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
   const liveScale = useLiveRepPop(
@@ -9212,7 +9347,7 @@ function VelocityStrip({
     liveVelocity,
     isNewPeak
   );
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     if (variant !== "expanded" || !framed) return;
     reactNative.Animated.parallel([
       reactNative.Animated.timing(heightAnim, {
@@ -9546,13 +9681,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,
@@ -10255,7 +10390,7 @@ function RestTimer({
     }
   );
 }
-var t7 = getSemanticColors("dark");
+var t8 = getSemanticColors("dark");
 var TIMES = "\xD7";
 var AT = "@";
 function SetsRepsLoad({
@@ -10267,8 +10402,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(
     reactNative.View,
     {
@@ -10359,7 +10494,7 @@ function compactUntil(ms) {
   return `${Math.round(d / 7)}w`;
 }
 function ScheduleTiles({ when, now, gap = 1, ...props }) {
-  const [mountNow] = React24.useState(() => Date.now());
+  const [mountNow] = React25.useState(() => Date.now());
   const reference = now ?? mountNow;
   const whenMs = when instanceof Date ? when.getTime() : when;
   const soon = whenMs - reference < DAY_MS;
@@ -10381,14 +10516,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",
@@ -10621,7 +10756,7 @@ function CollapsedCard({
   totalPlannedSets,
   supersetPosition
 }) {
-  const [pressed, setPressed] = React24.useState(false);
+  const [pressed, setPressed] = React25.useState(false);
   const completedSets = setVelocities?.length ?? 0;
   const remaining = Math.max(0, (totalPlannedSets ?? 0) - completedSets);
   const borderRadius = getSupersetBorderRadius(supersetPosition);
@@ -10853,7 +10988,7 @@ function ExerciseCard({
   onExpandedChange,
   ...rest
 }) {
-  const [internalExpanded, setInternalExpanded] = React24.useState(defaultExpanded ?? false);
+  const [internalExpanded, setInternalExpanded] = React25.useState(defaultExpanded ?? false);
   const isControlled = expanded !== void 0;
   const isExpanded = isControlled ? expanded : internalExpanded;
   const onToggle = () => {
@@ -10864,8 +10999,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({
@@ -10883,17 +11016,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(
-    reactNative.View,
+    Surface,
     {
+      level: "background",
       className,
       style: [
         {
-          backgroundColor: HEADER_BG,
           paddingTop: 11,
           paddingRight: 12,
           paddingBottom: 12,
@@ -10914,7 +11048,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",
@@ -10970,7 +11104,6 @@ function SessionHeader({
     }
   );
 }
-var INSET = primitiveColors.charcoal[600];
 var DIVIDER = primitiveColors.charcoal[300];
 var DEFAULT_WIDTH = 246;
 function SessionRail({
@@ -10990,10 +11123,11 @@ function SessionRail({
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
-    reactNative.View,
+    Surface,
     {
+      level: "elevated",
       className,
-      style: [{ width, flexDirection: "column", backgroundColor: INSET }, style],
+      style: [{ width, flexDirection: "column" }, style],
       testID: "session-rail",
       ...props,
       children: [
@@ -11011,9 +11145,10 @@ function SessionRail({
           }
         ),
         /* @__PURE__ */ jsx(
-          reactNative.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(
               reactNative.View,
@@ -11050,7 +11185,7 @@ function SessionRail({
 var DEFAULTS = {
   label: "SS",
   color: getSemanticColors("dark")["brand-primary"],
-  bgBase: "#101010"
+  bgBase: getSemanticColors("dark")["background-base"]
 };
 function SupersetWrapper({
   label = DEFAULTS.label,
@@ -11112,7 +11247,7 @@ function clampProgress(currentWeek, weekCount) {
   return Math.max(0, Math.min(1, ratio));
 }
 function MesoSegment({ meso, isActive, onPress }) {
-  const [pressScale] = React24.useState(() => new reactNative.Animated.Value(1));
+  const [pressScale] = React25.useState(() => new reactNative.Animated.Value(1));
   const handlePressIn = () => {
     reactNative.Animated.timing(pressScale, {
       toValue: 0.98,
@@ -11480,8 +11615,8 @@ function MesoCard({
   ...props
 }) {
   const isExpandable = onToggle != null;
-  const [highlight] = React24.useState(() => new reactNative.Animated.Value(highlighted ? 1 : 0));
-  React24.useEffect(() => {
+  const [highlight] = React25.useState(() => new reactNative.Animated.Value(highlighted ? 1 : 0));
+  React25.useEffect(() => {
     const animation = reactNative.Animated.timing(highlight, {
       toValue: highlighted ? 1 : 0,
       duration: 250,
@@ -12031,7 +12166,7 @@ function renderCoachingText(text, highlights) {
         children: part
       },
       `${part}-${index}`
-    ) : /* @__PURE__ */ jsx(React24.Fragment, { children: part }, `t-${index}`)
+    ) : /* @__PURE__ */ jsx(React25.Fragment, { children: part }, `t-${index}`)
   );
 }
 function StatusPill({ badge }) {
@@ -12497,17 +12632,17 @@ function StrengthTrendChart({
   className,
   ...props
 }) {
-  const geometry = React24.useMemo(
+  const geometry = React25.useMemo(
     () => buildGeometry(data, projection, mesoBoundaries, width, height),
     [data, projection, mesoBoundaries, width, height]
   );
-  const trend = React24.useMemo(
+  const trend = React25.useMemo(
     () => computeTrend(data, mesoBoundaries),
     [data, mesoBoundaries]
   );
-  const [reveal] = React24.useState(() => new reactNative.Animated.Value(animateOnMount ? 0 : 1));
-  const [selected, setSelected] = React24.useState(null);
-  React24.useEffect(() => {
+  const [reveal] = React25.useState(() => new reactNative.Animated.Value(animateOnMount ? 0 : 1));
+  const [selected, setSelected] = React25.useState(null);
+  React25.useEffect(() => {
     if (!animateOnMount) return;
     const animation = reactNative.Animated.timing(reveal, {
       toValue: 1,
@@ -12961,12 +13096,12 @@ function CapacityBandChart({
   className,
   ...props
 }) {
-  const [reveal] = React24.useState(() => new reactNative.Animated.Value(0));
-  const dotAnims = React24.useMemo(
+  const [reveal] = React25.useState(() => new reactNative.Animated.Value(0));
+  const dotAnims = React25.useMemo(
     () => Array.from({ length: workouts.length }, () => new reactNative.Animated.Value(0)),
     [workouts.length]
   );
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     reveal.setValue(0);
     dotAnims.forEach((a) => a.setValue(0));
     const draw = reactNative.Animated.timing(reveal, {
@@ -12989,7 +13124,7 @@ function CapacityBandChart({
   }, [reveal, dotAnims, band.length, workouts.length]);
   const plotWidth = width - PADDING_LEFT - PADDING_RIGHT;
   const plotHeight = height - PADDING_TOP - PADDING_BOTTOM;
-  const scale = React24.useMemo(() => {
+  const scale = React25.useMemo(() => {
     const times = band.map((p) => parseTime(p.date));
     projection?.withTraining.forEach((p) => times.push(parseTime(p.date)));
     projection?.withRest.forEach((p) => times.push(parseTime(p.date)));
@@ -13298,7 +13433,7 @@ function ZoneTrack({
   const s = ZONE_SIZES[size];
   const trackHeight = trackHeightProp ?? s.trackHeight;
   const needleOverhang = needleOverhangProp ?? s.needleOverhang;
-  const [trackW, setTrackW] = React24.useState(0);
+  const [trackW, setTrackW] = React25.useState(0);
   const onTrackLayout = (e) => setTrackW(e.nativeEvent.layout.width);
   const tickCount = ticks?.length ?? 0;
   const tickSpacing = trackW > 0 && tickCount > 0 ? trackW / tickCount : Infinity;
@@ -14305,7 +14440,7 @@ function TopBar({
   onSelectDevice,
   className
 }) {
-  const [width, setWidth] = React24.useState(SUBTITLE_MIN);
+  const [width, setWidth] = React25.useState(SUBTITLE_MIN);
   const onLayout = (e) => setWidth(e.nativeEvent.layout.width);
   const subtitleVisible = showSubtitle ?? width >= SUBTITLE_MIN;
   const clockVisible = showClock ?? width >= CLOCK_MIN;
@@ -14453,8 +14588,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(reactNative.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(reactNative.View, { className: "flex-1 flex-row", children: [
         /* @__PURE__ */ jsx(SideNav, { activeKey, items: navItems, liveKey, onNavigate }),
@@ -14666,6 +14803,7 @@ exports.ModalTitle = ModalTitle;
 exports.MuscleGroupChip = MuscleGroupChip;
 exports.NavItem = NavItem;
 exports.Overline = Overline;
+exports.PRESSED_ELEVATION_LEVEL = PRESSED_ELEVATION_LEVEL;
 exports.Paragraph = Paragraph;
 exports.PasswordInput = PasswordInput;
 exports.PersonStandingIcon = PersonStandingIcon;
@@ -14685,6 +14823,7 @@ exports.ReadinessCheck = ReadinessCheck;
 exports.RestTimer = RestTimer;
 exports.SET_STRIP_VARIABLE_COLOR = SET_STRIP_VARIABLE_COLOR;
 exports.SET_STRIP_ZONES = SET_STRIP_ZONES;
+exports.SURFACE_LEVEL_TOKEN = SURFACE_LEVEL_TOKEN;
 exports.ScaleIcon = ScaleIcon;
 exports.Scatter = Scatter;
 exports.ScheduleTiles = ScheduleTiles;
@@ -14729,6 +14868,7 @@ exports.StepperStep = Step;
 exports.StrengthTrendChart = StrengthTrendChart;
 exports.SupersetWrapper = SupersetWrapper;
 exports.Surface = Surface;
+exports.SurfaceContext = SurfaceContext;
 exports.SvgIcon = SvgIcon;
 exports.Switch = Switch;
 exports.Tab = Tab;
@@ -14767,6 +14907,7 @@ exports.ZoneTrack = ZoneTrack;
 exports.alpha = alpha;
 exports.applyThemePreset = applyThemePreset;
 exports.audiobookPreset = audiobookPreset;
+exports.backgroundFrameDark = backgroundFrameDark;
 exports.bestTextColor = bestTextColor;
 exports.buttonSizes = buttonSizes;
 exports.calculateMeanVelocity = calculateMeanVelocity;
@@ -14805,6 +14946,7 @@ exports.getFieldValidationProps = getFieldValidationProps;
 exports.getGlowShadow = getGlowShadow;
 exports.getHoverColors = getHoverColors;
 exports.getLuminance = getLuminance;
+exports.getPressedRecessShadow = getPressedRecessShadow;
 exports.getResultColor = getResultColor;
 exports.getSemanticColors = getSemanticColors;
 exports.getStatusColor = getStatusColor;
@@ -14826,8 +14968,10 @@ exports.lighten = lighten;
 exports.linearGradient = linearGradient;
 exports.liveAuraColor = liveAuraColor;
 exports.neumorphicShadows = neumorphicShadows;
+exports.onSurfaceColors = onSurfaceColors;
 exports.paceTone = paceTone;
 exports.paceToneColor = paceToneColor;
+exports.pressedLevel = pressedLevel;
 exports.primitiveBorderRadius = primitiveBorderRadius;
 exports.primitiveBreakpoints = primitiveBreakpoints;
 exports.primitiveColors = primitiveColors;
@@ -14850,7 +14994,12 @@ exports.semanticTypography = semanticTypography;
 exports.sequentialEffort = sequentialEffort;
 exports.shadowColors = shadowColors;
 exports.statusPillColor = statusPillColor;
+exports.surfaceBackground = surfaceBackground;
 exports.surfaceGradient = surfaceGradient;
+exports.surfaceRampDark = surfaceRampDark;
+exports.useOnSurfaceColor = useOnSurfaceColor;
+exports.useSurface = useSurface;
+exports.useSurfaceMode = useSurfaceMode;
 exports.useTable = useTable;
 exports.useTimer = useTimer;
 exports.useToast = useToast;