@titan-design/react-ui 0.9.2 → 0.9.3

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]
@@ -1194,7 +1194,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 +1302,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 +1322,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 +1388,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" }),
@@ -2564,6 +2564,40 @@ var audiobookPreset = {
   },
   rootClasses: ["atmosphere-warm", "grain"]
 };
+var SURFACE_LEVEL_TOKEN = {
+  background: "background-base",
+  base: "surface-base",
+  elevated: "surface-elevated",
+  raised: "surface-raised",
+  overlay: "surface-overlay"
+};
+var ON_SURFACE_TOKEN = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  tertiary: "text-tertiary"
+};
+var DEFAULT_CONTEXT = { mode: "dark", level: "base" };
+var SurfaceContext = 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 surfaceBackground(level, mode) {
+  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
+}
 function getTheme() {
   if (typeof document === "undefined") return "dark";
   return document.documentElement.classList.contains("light") ? "light" : "dark";
@@ -2600,7 +2634,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 +2667,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 +2686,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 +2717,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 +3086,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 +3097,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 +3140,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 +3226,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 +3285,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 +3343,7 @@ function Modal({
   ) });
 }
 function ModalContent({ children, className }) {
-  const { size } = React24.useContext(ModalContext);
+  const { size } = React25.useContext(ModalContext);
   return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
@@ -3342,7 +3376,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 +3392,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 +3528,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 +3545,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 +3566,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 +3580,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 +3607,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 +3652,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 +3837,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 +3977,7 @@ function Tooltip({
     )
   ] });
 }
-var CollapseContext = React24.createContext({
+var CollapseContext = React25.createContext({
   isOpen: false,
   toggle: () => {
   }
@@ -3956,7 +3990,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 +4002,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 +4022,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 +4039,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 +4054,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 +4109,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 +4175,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 +4197,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 +4214,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 +4230,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 +4256,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 +4311,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 +4323,7 @@ function PopoverCloseButton({ children, className }) {
     }
   );
 }
-var MenuContext = React24.createContext({
+var MenuContext = React25.createContext({
   isOpen: false,
   setIsOpen: () => {
   },
@@ -4303,7 +4337,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 +4349,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 +4362,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 +4396,7 @@ function MenuItem({
   className,
   children
 }) {
-  const { closeMenu } = React24.useContext(MenuContext);
+  const { closeMenu } = React25.useContext(MenuContext);
   const handlePress = () => {
     if (isDisabled) return;
     onPress?.();
@@ -4406,7 +4440,7 @@ function MenuGroup({ label, children, className }) {
     children
   ] });
 }
-var SelectContext = React24.createContext({
+var SelectContext = React25.createContext({
   value: null,
   isMulti: false,
   isOpen: false,
@@ -4430,7 +4464,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 +4567,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 +4598,7 @@ function SelectOption({ option }) {
     }
   );
 }
-var ToolbarButtonContext = React24.createContext({
+var ToolbarButtonContext = React25.createContext({
   isOpen: false,
   setIsOpen: () => {
   }
@@ -4597,16 +4631,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 +4695,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 +4784,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 +4849,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 +5228,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 +5263,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 +5279,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 +5295,10 @@ function ToastProvider({
     });
     return id;
   }, [defaultDuration, maxToasts]);
-  const removeToast = React24.useCallback((id) => {
-    setToasts((prev) => prev.filter((t17) => t17.id !== id));
+  const removeToast = React25.useCallback((id) => {
+    setToasts((prev) => prev.filter((t16) => t16.id !== id));
   }, []);
-  const removeAllToasts = React24.useCallback(() => {
+  const removeAllToasts = React25.useCallback(() => {
     setToasts([]);
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast, removeAllToasts }, children: [
@@ -5293,7 +5327,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 +5371,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 +5473,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 +5493,7 @@ function Autocomplete({
     },
     [onInputChange]
   );
-  const handleSelectOption = React24.useCallback(
+  const handleSelectOption = React25.useCallback(
     (option) => {
       if (option.isDisabled) return;
       onChange?.(option.value);
@@ -5468,18 +5502,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 +5687,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 +5793,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 +5834,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 +6048,37 @@ function IconBox({
 }
 function Surface({
   elevation = 0,
+  level,
   glowColor,
   glowIntensity,
-  theme = "dark",
+  theme,
+  rounded,
   className,
   style,
   children,
   ...props
 }) {
-  const baseColor = getBaseSurfaceColor(theme);
-  const surfaceColor = getElevationSurface(baseColor, elevation, theme);
-  const shadowStyle = getElevationShadow(baseColor, elevation, theme);
+  const inherited = useSurface();
+  const mode = theme ?? inherited.mode;
+  const isPlane = level != null;
+  const baseColor = getBaseSurfaceColor(mode);
+  const backgroundColor = isPlane ? surfaceBackground(level, mode) : getElevationSurface(baseColor, elevation, mode);
+  const shadowStyle = isPlane ? {} : getElevationShadow(baseColor, elevation, mode);
   const glowStyle = glowColor ? getGlowShadow(glowColor, glowIntensity) : {};
-  return /* @__PURE__ */ jsx(
+  const applyRounded = rounded ?? !isPlane;
+  const value = React25.useMemo(
+    () => ({ mode, level: level ?? inherited.level }),
+    [mode, level, inherited.level]
+  );
+  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 +6316,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 +6360,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 +6377,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 +6429,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 +6511,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 +6699,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 +6715,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 +6784,7 @@ function EmptyState({
     }
   );
 }
-var StepperContext = React24.createContext({
+var StepperContext = React25.createContext({
   activeStep: 0,
   orientation: "horizontal"
 });
@@ -6764,11 +6803,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 +6816,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 +6840,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 +6849,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 +6895,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 +7054,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 +7089,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 +7249,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,
@@ -7243,7 +7282,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 +7441,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, {
@@ -7975,7 +8014,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 +8022,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();
     }
@@ -8250,8 +8289,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,
@@ -8405,8 +8444,8 @@ var textColors = {
   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 +8575,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 +9001,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 +9017,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 +9066,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 +9240,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 +9251,7 @@ function VelocityStrip({
     liveVelocity,
     isNewPeak
   );
-  React24.useEffect(() => {
+  React25.useEffect(() => {
     if (variant !== "expanded" || !framed) return;
     reactNative.Animated.parallel([
       reactNative.Animated.timing(heightAnim, {
@@ -10359,7 +10398,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;
@@ -10621,7 +10660,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 +10892,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 +10903,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 +10920,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 +10952,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 +11008,6 @@ function SessionHeader({
     }
   );
 }
-var INSET = primitiveColors.charcoal[600];
 var DIVIDER = primitiveColors.charcoal[300];
 var DEFAULT_WIDTH = 246;
 function SessionRail({
@@ -10990,10 +11027,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 +11049,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,
@@ -11112,7 +11151,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,
@@ -11309,10 +11348,10 @@ function WeekRow({
     }
   );
 }
-var t10 = getSemanticColors("dark");
+var t9 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: t10["status-success"],
-  brandPrimary: t10["brand-primary"],
+  statusSuccess: t9["status-success"],
+  brandPrimary: t9["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
@@ -11480,8 +11519,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,
@@ -11796,12 +11835,12 @@ function PrHistoryModal({
     }
   );
 }
-var t11 = getSemanticColors("dark");
-var BRAND_PRIMARY9 = t11["brand-primary"];
+var t10 = getSemanticColors("dark");
+var BRAND_PRIMARY9 = t10["brand-primary"];
 var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
-var STATUS_SUCCESS2 = t11["status-success"];
-var STATUS_WARNING2 = t11["status-warning"];
-var STATUS_ERROR2 = t11["status-error"];
+var STATUS_SUCCESS2 = t10["status-success"];
+var STATUS_WARNING2 = t10["status-warning"];
+var STATUS_ERROR2 = t10["status-error"];
 var EMOJI_SETS = {
   sleep: ["\u{1F634}", "\u{1F610}", "\u{1F642}", "\u{1F60A}", "\u{1F929}"],
   soreness: ["\u{1F635}", "\u{1F623}", "\u{1F610}", "\u{1F642}", "\u{1F4AA}"],
@@ -11991,13 +12030,13 @@ function ReadinessCheck({
     )
   ] }) });
 }
-var t12 = getSemanticColors("dark");
-var BRAND_PRIMARY10 = t12["brand-primary"];
+var t11 = getSemanticColors("dark");
+var BRAND_PRIMARY10 = t11["brand-primary"];
 var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t12["status-success"];
-var WARNING = t12["status-warning"];
-var ERROR = t12["status-error"];
+var SUCCESS = t11["status-success"];
+var WARNING = t11["status-warning"];
+var ERROR = t11["status-error"];
 var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
@@ -12031,7 +12070,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 }) {
@@ -12368,8 +12407,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t17 = Date.parse(dateStr);
-  return Number.isNaN(t17) ? 0 : t17;
+  const t16 = Date.parse(dateStr);
+  return Number.isNaN(t16) ? 0 : t16;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -12497,17 +12536,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,
@@ -12858,10 +12897,10 @@ function StrengthTrendChart({
     }
   );
 }
-var t13 = getSemanticColors("dark");
-var STATUS_SUCCESS4 = t13["status-success"];
-var STATUS_WARNING4 = t13["status-warning"];
-var STATUS_INFO = t13["status-info"];
+var t12 = getSemanticColors("dark");
+var STATUS_SUCCESS4 = t12["status-success"];
+var STATUS_WARNING4 = t12["status-warning"];
+var STATUS_INFO = t12["status-info"];
 var DOT_BORDER = "#F3F4F6";
 var BAND_FILL = "rgba(46,213,115,0.1)";
 var BAND_EDGE = "rgba(46,213,115,0.45)";
@@ -12904,8 +12943,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t17 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t17 * (b[key] - a[key]);
+      const t16 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t16 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -12961,12 +13000,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 +13028,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)));
@@ -13235,13 +13274,13 @@ function CapacityBandChart({
     }
   );
 }
-var t14 = getSemanticColors("dark");
+var t13 = getSemanticColors("dark");
 function glowShadow(color) {
   return `0 0 5px 1px ${alpha(color, 0.3)}, 0 0 10px 3px ${alpha(color, 0.12)}`;
 }
 var DEFAULT_TRACK_COLOR = primitiveColors.charcoal[200];
 var DEFAULT_MARKER_COLOR2 = primitiveColors.white;
-var TICK_COLOR = t14["text-tertiary"];
+var TICK_COLOR = t13["text-tertiary"];
 var ZONE_SIZES = {
   default: {
     trackHeight: 14,
@@ -13298,7 +13337,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;
@@ -13424,7 +13463,7 @@ function ZoneTrack({
           ),
           ticks?.map((tick, i) => {
             const emphasized = tick.emphasized === true;
-            const lineColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
+            const lineColor = tick.color ?? (emphasized ? t13["brand-primary"] : TICK_COLOR);
             const lineWidth = emphasized ? s.tickLineEmphasized : s.tickLineNormal;
             return /* @__PURE__ */ jsx(
               reactNative.View,
@@ -13455,7 +13494,7 @@ function ZoneTrack({
               if (tick.label == null) return null;
               const emphasized = tick.emphasized === true;
               if (!showTickLabel(i, emphasized)) return null;
-              const labelColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
+              const labelColor = tick.color ?? (emphasized ? t13["brand-primary"] : TICK_COLOR);
               const labelNode = /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
@@ -13641,7 +13680,7 @@ function VolumeLandmarkBar({
     }
   );
 }
-var t15 = getSemanticColors("dark");
+var t14 = getSemanticColors("dark");
 var statusToken = {
   productive: "status-success",
   threshold: "status-warning",
@@ -13658,7 +13697,7 @@ var defaultLabel = {
   stop: "Stop"
 };
 function statusPillColor(status) {
-  return t15[statusToken[status]];
+  return t14[statusToken[status]];
 }
 function StatusPill2({ status, label, className, style, ...props }) {
   const color = statusPillColor(status);
@@ -13691,7 +13730,7 @@ function StatusPill2({ status, label, className, style, ...props }) {
     }
   );
 }
-var t16 = getSemanticColors("dark");
+var t15 = getSemanticColors("dark");
 var categoryToken = {
   productive: null,
   threshold: "status-warning",
@@ -13704,7 +13743,7 @@ var floodOpacity = {
 };
 function liveAuraColor(category) {
   const token = categoryToken[category];
-  return token ? t16[token] : null;
+  return token ? t15[token] : null;
 }
 function LiveAuraFrame({
   category,
@@ -13733,9 +13772,9 @@ function LiveAuraFrame({
           position: "relative",
           overflow: "hidden",
           borderRadius: 10,
-          backgroundColor: t16["background-base"],
+          backgroundColor: t15["background-base"],
           borderWidth: 1,
-          borderColor: t16["border-default"]
+          borderColor: t15["border-default"]
         },
         style
       ],
@@ -13962,28 +14001,28 @@ function Scatter({
         testID: "scatter-canvas",
         style: { position: "absolute", top: 0, left: 0, width, height, overflow: "hidden" },
         children: [
-          ticksOf(yd, TICK_COUNT).map((t17, i) => {
-            const y = toY(t17);
+          ticksOf(yd, TICK_COUNT).map((t16, i) => {
+            const y = toY(t16);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-y",
                 style: { position: "absolute", left: PLOT_LEFT2, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t17) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t16) })
               },
               `y-${i}`
             );
           }),
-          ticksOf(xd, TICK_COUNT).map((t17, i) => {
-            const x = toX(t17);
+          ticksOf(xd, TICK_COUNT).map((t16, i) => {
+            const x = toX(t16);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-x",
                 style: { position: "absolute", top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t17) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t16) })
               },
               `x-${i}`
             );
@@ -14118,23 +14157,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t17) => /* @__PURE__ */ jsx(
+        ticks.map((t16) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             accessibilityElementsHidden: true,
             testID: "gauge-segment",
             style: {
               position: "absolute",
-              left: t17.left - tickThickness / 2,
-              top: t17.top - tickLength / 2,
+              left: t16.left - tickThickness / 2,
+              top: t16.top - tickLength / 2,
               width: tickThickness,
               height: tickLength,
               borderRadius: tickThickness / 2,
-              backgroundColor: t17.color,
-              transform: [{ rotate: t17.rotate }]
+              backgroundColor: t16.color,
+              transform: [{ rotate: t16.rotate }]
             }
           },
-          t17.key
+          t16.key
         )),
         /* @__PURE__ */ jsxs(reactNative.View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -14305,7 +14344,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 +14492,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 }),
@@ -14685,6 +14726,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 +14771,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;
@@ -14826,6 +14869,7 @@ exports.lighten = lighten;
 exports.linearGradient = linearGradient;
 exports.liveAuraColor = liveAuraColor;
 exports.neumorphicShadows = neumorphicShadows;
+exports.onSurfaceColors = onSurfaceColors;
 exports.paceTone = paceTone;
 exports.paceToneColor = paceToneColor;
 exports.primitiveBorderRadius = primitiveBorderRadius;
@@ -14850,7 +14894,11 @@ exports.semanticTypography = semanticTypography;
 exports.sequentialEffort = sequentialEffort;
 exports.shadowColors = shadowColors;
 exports.statusPillColor = statusPillColor;
+exports.surfaceBackground = surfaceBackground;
 exports.surfaceGradient = surfaceGradient;
+exports.useOnSurfaceColor = useOnSurfaceColor;
+exports.useSurface = useSurface;
+exports.useSurfaceMode = useSurfaceMode;
 exports.useTable = useTable;
 exports.useTimer = useTimer;
 exports.useToast = useToast;