pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/toast/Toast.js

@@ -23,11 +23,14 @@
  */
 
 import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { AccessibilityInfo, Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import { AccessibilityInfo, Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { CLOSE_BUTTON_SIZE, CLOSE_HIT_SLOP, CLOSE_ICON_SIZE, resolveAutoDismissDelay, resolveToastTone, toastAccentBarStructure, toastCardStructure, toastOverlayStructure } from "./Toast.variants.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { CLOSE_BUTTON_SIZE, CLOSE_HIT_SLOP, CLOSE_ICON_SIZE, resolveAutoDismissDelay, resolveToastBottomInset, resolveToastTone, toastAccentBarStructure, toastCardStructure, toastOverlayStructure } from "./Toast.variants.js";
 import { useScreenReaderEnabled } from "./toastScreenReader.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ToastContext = /*#__PURE__*/createContext(undefined);
@@ -37,6 +40,7 @@ export const ToastProvider = /*#__PURE__*/memo(function ToastProvider({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
   const screenReaderEnabled = useScreenReaderEnabled();
   const [toast, setToast] = useState(null);
   const progress = useAnimatedValue(0);
@@ -91,6 +95,11 @@ export const ToastProvider = /*#__PURE__*/memo(function ToastProvider({
       message: options.message,
       tone
     });
+    if (tone === "success") {
+      haptics.notification("success");
+    } else if (tone === "danger") {
+      haptics.notification("error");
+    }
     // The real cross-platform screen-reader announcement: `accessibilityLiveRegion` (see
     // `ToastCard`'s Text) is Android-only, so it alone leaves iOS VoiceOver silent. This
     // imperative call reaches both VoiceOver and TalkBack.
@@ -101,7 +110,7 @@ export const ToastProvider = /*#__PURE__*/memo(function ToastProvider({
     }).start();
     delay.current = resolveAutoDismissDelay(options.duration, tone, screenReaderEnabled);
     armDismissTimer();
-  }, [armDismissTimer, clearTimers, progress, motion, screenReaderEnabled]);
+  }, [armDismissTimer, clearTimers, progress, motion, screenReaderEnabled, haptics]);
 
   // Pause while the user is reading (WCAG 2.2.1): leaving re-arms the FULL delay rather than the
   // remainder — the message effectively restarts, which is the generous direction.
@@ -128,13 +137,18 @@ export const ToastProvider = /*#__PURE__*/memo(function ToastProvider({
     show,
     dismiss: hide
   }), [show, hide]);
+  const overlayStyle = useMemo(() => position === "bottom" ? [toastOverlayStructure(theme, {
+    position
+  }), {
+    bottom: resolveToastBottomInset(theme.space[4], Platform.OS)
+  }] : toastOverlayStructure(theme, {
+    position
+  }), [theme, position]);
   return /*#__PURE__*/_jsxs(ToastContext.Provider, {
     value: contextValue,
     children: [children, /*#__PURE__*/_jsx(View, {
       pointerEvents: "box-none",
-      style: toastOverlayStructure(theme, {
-        position
-      }),
+      style: overlayStyle,
       children: toast !== null && /*#__PURE__*/_jsx(ToastCard, {
         toast: toast,
         theme: theme,
@@ -166,6 +180,15 @@ const ToastCard = /*#__PURE__*/memo(function ToastCard({
   onFocusOut
 }) {
   const toneColors = resolveToastTone(theme.colors, toast.tone);
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.sm);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "sm"),
+      ...floatingSurfaceStyle(theme, "sm")
+    };
+  }, [theme]);
   const translateY = progress.interpolate({
     inputRange: [0, 1],
     outputRange: position === "top" ? [-offsetY, 0] : [offsetY, 0]
@@ -173,18 +196,13 @@ const ToastCard = /*#__PURE__*/memo(function ToastCard({
   return /*#__PURE__*/_jsxs(Animated.View, {
     testID: "pixelize-toast",
     accessibilityRole: "alert"
-    // W3C pointer events, not a `Pressable` wrapper: hovering to read must not turn the card into
-    // a touch responder that competes with the close button for the tap. `onFocus`/`onBlur` on a
-    // View catch focus BUBBLING out of the close button (react-native-web), which is the only
-    // focusable thing in here; the button repeats them for native, where focus does not bubble.
+    // Pointer events, not Pressable: hovering to read must not compete with the close button's tap.
     ,
     onPointerEnter: onHoverIn,
     onPointerLeave: onHoverOut,
     onFocus: onFocusIn,
     onBlur: onFocusOut,
-    style: [toastCardStructure(theme), {
-      backgroundColor: toneColors.background
-    }, theme.elevation.lg, {
+    style: [toastCardStructure(theme), floatingStyle, {
       opacity: progress,
       transform: [{
         translateY

package/lib/module/modules/toast/Toast.variants.js

@@ -29,6 +29,10 @@ export const CLOSE_HIT_SLOP = slopFor(CLOSE_BUTTON_SIZE);
 
 /** `duration` on `ToastOptions` defaults to this when omitted — except for `danger` (see below). */
 export const DEFAULT_TOAST_DURATION = 3000;
+export const TOAST_IOS_HOME_INDICATOR_INSET = 20;
+export function resolveToastBottomInset(basePadding, platformOS) {
+  return platformOS === "ios" ? basePadding + TOAST_IOS_HOME_INDICATOR_INSET : basePadding;
+}
 
 /**
  * How long a toast stays up. `"persistent"` = until the user dismisses it (or a later `show()`
@@ -108,6 +112,7 @@ export const toastCardStructure = createThemedVariants(theme => ({
     alignItems: "center",
     columnGap: theme.space[3],
     borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     paddingVertical: theme.space[3],
     paddingRight: theme.space[3],
     overflow: "hidden"

package/lib/module/modules/tooltip/MODULE.md

@@ -31,11 +31,15 @@ reads `bg.raised` / `fg.default`, so there is nothing appearance-wise for a call
 
 ## Accessibility contract (WCAG)
 
-- **1.4.13 Content on Hover or Focus — 2 of 3.** *Persistent* ✅ (no auto-dismiss on the hover/focus
+- **1.4.13 Content on Hover or Focus — 3 of 3.** *Persistent* ✅ (no auto-dismiss on the hover/focus
   path — only long-press arms `autoHideMs`). *Dismissible* ✅ (Escape hides the tip via
   `useDismissOnEscape` from `core/a11y/keyboard`, without moving focus; web-only by construction —
-  the native file is a no-op, and native has no hover/keyboard-focus tip to dismiss). *Hoverable* ❌
-  — see "Known gaps".
+  the native file is a no-op, and native has no hover/keyboard-focus tip to dismiss). *Hoverable* ✅
+  — the bubble accepts pointer events and carries its own `onPointerEnter`/`onPointerLeave` (the
+  same primitive `Toast`'s card uses for a non-`Pressable` hover target); a hover-out on the trigger
+  doesn't hide immediately, it arms `TOOLTIP_TIMING.hoverOutGraceMs` (200ms) so the pointer has time
+  to cross the `theme.space[1]` gap onto the bubble, which cancels the pending hide on entry and
+  re-arms its own grace window on exit.
 - **1.3.1 / no gesture-only content** — the whole point of this module. On **native** the trigger's
   `accessibilityHint` is set to `mergeAccessibilityHint(existingHint, label)`, so a screen-reader
   user gets the tip's content with the trigger itself and no long-press. The existing hint is
@@ -92,6 +96,11 @@ reads `bg.raised` / `fg.default`, so there is nothing appearance-wise for a call
 - **Auto-hide fallback** (`TOOLTIP_TIMING.autoHideMs`, 2.5s) — guards against a long-press tip
   staying open forever if `onPressOut` never fires (a cancelled gesture, or assistive tech invoking
   `onLongPress` directly without a matching press-out).
+- **The bubble's own hover pair uses `onPointerEnter`/`onPointerLeave`, not `Pressable`.** Same
+  reason as `Toast`'s card: turning the bubble into a touch responder would buy nothing and could
+  compete for gestures with whatever it's overlapping. A single `hideTimer` ref is shared between
+  the hover-out grace delay and the long-press `autoHideMs` fallback — safe because `show`/`hide`
+  always clear whichever one is pending before arming the other, so the two paths never collide.
 
 ## Known gaps
 
@@ -105,13 +114,6 @@ reads `bg.raised` / `fg.default`, so there is nothing appearance-wise for a call
   `Text` handles only `onPress`) — this is the bug the example app hit.
 - **`Menu` and `Tooltip` cannot nest either way.** `Menu` clones only `onPress` onto its trigger, and
   `TooltipProps` has no `onPress`, so a Tooltip-wrapped Menu trigger never opens the menu.
-- **1.4.13 *hoverable* is still unmet, and needs BOTH halves to land at once.** The bubble is
-  `pointerEvents="none"`, so a pointer can never reach the tip; and `handleHoverOut` hides
-  immediately, with no grace period for crossing the `theme.space[1]` gap between trigger and
-  bubble. Fixing only one half delivers nothing — enabling pointer events without a grace delay just
-  makes the tip vanish mid-gap. This is a behavioural redesign (a hover-tracked bubble with its own
-  hover handlers plus a close delay), deliberately not attempted as part of the flat-`aria-*`
-  migration.
 - **2.2.1 on the long-press path** — `TOOLTIP_TIMING.autoHideMs` (2.5s) is a content-set time limit
   with no turn-off/adjust/extend, and no WCAG exception covers it. It exists as a stuck-tip guard for
   when `onPressOut` never fires (cancelled gesture, or AT invoking `onLongPress` directly), and in
@@ -127,10 +129,12 @@ reads `bg.raised` / `fg.default`, so there is nothing appearance-wise for a call
 
 ## Performance
 
-Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `clearHideTimer`/`hide`/`show` are `useCallback`'d, and all six handlers `cloneElement` injects into the consumer-supplied `children` trigger are extracted to `handleLongPress`/`handlePressOut`/`handleHoverIn`/`handleHoverOut`/`handleFocus`/`handleBlur` (`useCallback`) instead of inline lambdas — same idiom `Menu.tsx` uses for its own trigger, since a fresh closure there would defeat a memoized trigger (e.g. this library's own `Button`).
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `clearHideTimer`/`hide`/`show`/`scheduleHide` and the bubble's own `handleBubbleHoverIn`/`handleBubbleHoverOut` are all `useCallback`'d, and all six handlers `cloneElement` injects into the consumer-supplied `children` trigger are extracted to `handleLongPress`/`handlePressOut`/`handleHoverIn`/`handleHoverOut`/`handleFocus`/`handleBlur` (`useCallback`) instead of inline lambdas — same idiom `Menu.tsx` uses for its own trigger, since a fresh closure there would defeat a memoized trigger (e.g. this library's own `Button`).
 
 ## Modernization (v1.0.7)
 
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
 - List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
 - `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+Button trigger focus ring is native `outline*` on the pressable (no sibling focus view).

package/lib/module/modules/tooltip/Tooltip.js

@@ -32,6 +32,8 @@ import { cloneElement, memo, useCallback, useEffect, useId, useMemo, useRef, use
 import { Animated, StyleSheet, Text, View } from "react-native";
 import { useDismissOnEscape } from "../../core/a11y/keyboard";
 import { useEnterExit, useMotion } from "../../core/motion/index.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { mergeAccessibilityHint, TOOLTIP_TIMING, tooltipBubbleStructure } from "./Tooltip.variants.js";
 
@@ -65,6 +67,15 @@ export const Tooltip = /*#__PURE__*/memo(function Tooltip({
     setVisible(false);
   }, [clearHideTimer]);
 
+  // WCAG 1.4.13 hoverable: a hover-out doesn't hide immediately — it gives the pointer
+  // `hoverOutGraceMs` to cross the gap onto the bubble itself. Reuses `hideTimer`/`hide`: this and
+  // the long-press `autoHideMs` fallback below never overlap, since `show`/`hide` always clear
+  // whichever one is pending before arming the other.
+  const scheduleHide = useCallback(() => {
+    clearHideTimer();
+    hideTimer.current = setTimeout(hide, TOOLTIP_TIMING.hoverOutGraceMs);
+  }, [clearHideTimer, hide]);
+
   // `autoHide` is the gesture path only: a pointer or keyboard tip must stay up as long as the
   // trigger is hovered/focused (WCAG 1.4.13), and hover-out/blur are reliable enough not to need
   // the fallback.
@@ -102,8 +113,22 @@ export const Tooltip = /*#__PURE__*/memo(function Tooltip({
   const handleHoverOut = useCallback(event => {
     children.props.onHoverOut?.(event);
     hovered.current = false;
-    hide();
-  }, [children, hide]);
+    // Not an immediate hide: the pointer may be about to land on the bubble (WCAG 1.4.13
+    // hoverable) — `handleBubbleHoverIn` cancels this if it does.
+    scheduleHide();
+  }, [children, scheduleHide]);
+
+  // The bubble's own hover pair, mirroring the trigger's — same `onPointerEnter`/`onPointerLeave`
+  // primitive Toast's card uses for a non-Pressable hover target (see Toast.tsx), since turning the
+  // bubble into a `Pressable` would make it a touch responder for no reason.
+  const handleBubbleHoverIn = useCallback(() => {
+    clearHideTimer();
+  }, [clearHideTimer]);
+  const handleBubbleHoverOut = useCallback(() => {
+    // The pointer left the bubble; if it isn't back on the trigger either, the grace period starts
+    // again rather than hiding outright, since a fast re-entry (bubble -> trigger) is still valid.
+    if (!hovered.current) scheduleHide();
+  }, [scheduleHide]);
   const handleFocus = useCallback(event => {
     children.props.onFocus?.(event);
     show(false);
@@ -122,12 +147,18 @@ export const Tooltip = /*#__PURE__*/memo(function Tooltip({
     accessibilityHint: mergeAccessibilityHint(children.props.accessibilityHint, label),
     "aria-describedby": bubble.mounted ? bubbleId : undefined
   });
-  const bubbleStyle = useMemo(() => [tooltipBubbleStructure(theme, {
-    placement
-  }), {
-    backgroundColor: theme.colors.bg.raised,
-    zIndex: theme.zIndices.tooltip
-  }, bubble.style], [theme, placement, bubble.style]);
+  const bubbleStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.md);
+    void theme.elevatedSurfaces;
+    return [tooltipBubbleStructure(theme, {
+      placement
+    }), {
+      backgroundColor: floatingBackground(theme, "md"),
+      zIndex: theme.zIndices.tooltip,
+      ...floatingSurfaceStyle(theme, "md")
+    }, bubble.style];
+  }, [theme, placement, bubble.style]);
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     fontSize: theme.fontSizes.sm,
     color: theme.colors.fg.default
@@ -144,7 +175,8 @@ export const Tooltip = /*#__PURE__*/memo(function Tooltip({
     _jsx(Animated.View, {
       testID: testID ? `${testID}-bubble` : undefined,
       id: bubbleId,
-      pointerEvents: "none",
+      onPointerEnter: handleBubbleHoverIn,
+      onPointerLeave: handleBubbleHoverOut,
       "aria-hidden": true,
       style: bubbleStyle,
       children: /*#__PURE__*/_jsx(Text, {

package/lib/module/modules/tooltip/Tooltip.variants.js

@@ -23,7 +23,14 @@ import { createThemedVariants } from "../../core/style/index.js";
  */
 export const TOOLTIP_TIMING = {
   /** Fallback auto-dismiss so a tip can't stay stuck open if `onPressOut` never fires. */
-  autoHideMs: 2500
+  autoHideMs: 2500,
+  /**
+   * Grace period before a hover-out actually hides the bubble, so a pointer crossing the
+   * `theme.space[1]` gap to the bubble itself doesn't lose the tip mid-transit (WCAG 1.4.13
+   * hoverable). The CSS/UI convention for this exact case; entering the bubble before it elapses
+   * cancels the hide.
+   */
+  hoverOutGraceMs: 200
 };
 
 /**

package/lib/module/theme/MODULE.md

@@ -8,7 +8,9 @@ hooks components read. It sits on top of three siblings — `tokens/` (the copy-
 and holds React state — none of which may appear in `tokens/`. It mirrors web's `Theme/provider/`
 in *shape and export names* (`PixelizeProvider`, `useThemeMode`), not byte-for-byte.
 
-## Public surface (`pixelize-native-library/theme`)
+`Theme` includes `elevatedSurfaces` (dark-mode background steps) when resolved by the provider.
+
+## Public surface
 
 | Export | Kind | Purpose |
 |---|---|---|

package/lib/module/theme/platform/MODULE.md

@@ -17,7 +17,10 @@ platform values, so the token says `1` / `600` and this layer resolves it.
 |---|---|---|
 | `rem(n)` | `number` | Identity — RN lengths are already DP. Web returns `n/16 + 'rem'`. |
 | `hairline` | `number` | `StyleSheet.hairlineWidth` — density-dependent, resolved at runtime. |
-| `elevation(token)` | `ElevationStyle` | `ElevationToken` → RN shadow style props. |
+| `highlight(level, mode)` | `BoxShadowArray` | Mode-aware inset top-edge highlight. |
+| `highlightLevels(level, mode)` | `BoxShadowArray` | Alias of `highlight` — never hardcodes light palette. |
+| `floatingBackground(theme, level)` | `string` | Light: role bg; dark: `elevatedSurfaces` step. |
+| `floatingSurfaceStyle(theme, level)` | `ViewStyle` | `elevation` + `highlight` + `borderCurve`. |
 | `interFontFamilies` | `Record<FontWeightValue, string>` | Weight value (`'400'`…`'700'`) → Inter face name. |
 | `systemFontFamily` | `string` | `System` (iOS) / `sans-serif` (Android). |
 | `fontStyleForWeight(weight, interLoaded?)` | `FontStyleForWeight` | Weight value → `{fontFamily}` or system fallback. |
@@ -29,7 +32,16 @@ Types: `ElevationStyle`, `FontWeightValue` (`= (typeof fontWeights)[keyof typeof
 
 ## Key behaviours
 
-### Elevation uses the legacy shadow props, not `boxShadow`
+### Elevation emits full `boxShadow` stacks (New Arch peer >= 0.82)
+
+`elevation(token)` maps every `layers[]` entry to `boxShadow` plus `elevation` for Android
+low-API z-order. `highlight()` adds inset top-edge bands; `composeBoxShadow()` merges outset and
+inset. `springs` exports Material 3 physics triples for Reanimated 4.5. `elevatedSurfaces()` adds
+dark-mode surface steps on `Theme.elevatedSurfaces`. `STATE_LAYER_OPACITY` holds press/focus scrims.
+
+Legacy shadow-prop documentation below is superseded for native — kept for web context only.
+
+### Elevation uses the legacy shadow props on web only
 
 `boxShadow` is **New-Architecture-only**. Our peer range (RN >= 0.79) still allows
 `newArchEnabled=false`, where `boxShadow` renders **nothing**. The legacy props map straight to the

package/lib/module/theme/platform/elevation.native.js

@@ -1,60 +1,18 @@
 "use strict";
 
 import { Platform } from 'react-native';
-
-/**
- * The style props an elevation resolves to. A `Pick` rather than `ViewStyle` so a future RN
- * shadow prop cannot silently widen what this function is allowed to emit.
- */
-
-/**
- * Resolve an elevation token to RN style props.
- *
- * Uses the legacy shadow props over `boxShadow` because `boxShadow` is New-Architecture-only, and
- * our peer range (RN >= 0.79) still lets a consumer ship `newArchEnabled=false` — on which
- * `boxShadow` renders nothing at all. The legacy props map straight to the platform APIs and are
- * not deprecated, so they are the only path that works on both architectures. react-native-web's
- * style preprocessor converts these same legacy props into a real CSS `box-shadow`, so the `web`
- * branch below rides that conversion rather than emitting `boxShadow` itself.
- *
- * An elevation token is a STACK of layers (web needs both an ambient and a contact shadow per
- * step), but legacy RN shadow props can only express one. This renders `layers[0]` — the dominant
- * layer — and drops the rest. That is an honest limit of the legacy path, not a token compromise:
- * a future `boxShadow`-only resolver (new-arch-only consumers) can render every layer.
- *
- * `layer.spread` is dropped — neither legacy platform API exposes it (RN implements it by
- * insetting a custom shadowPath). The ramp's `md`/`lg` carry a negative spread to tighten the
- * shadow on web, so those two steps read marginally wider here. Accepted: honouring it would mean
- * hand-drawing a shadow layer per view.
- *
- * Returns one of three shapes: `ios`, `android` (RN's `default` branch — Android reads the numeric
- * `elevation` prop and ignores offset/opacity/radius), and `web`. `web` MUST stay its own explicit
- * key: without it, react-native-web falls through to `default` (the Android shape), whose only
- * meaningful field — `elevation` — react-native-web silently ignores (it is Android-only), so the
- * shadow renders as nothing at all.
- */
 export function elevation(token) {
   const layer = token.layers[0];
   return Platform.select({
     ios: {
       shadowColor: layer.color,
-      // Always explicit: iOS defaults shadowOffset to (0, -3), not (0, 0).
       shadowOffset: {
         width: layer.x,
         height: layer.y
       },
-      // iOS multiplies shadowOpacity by the colour's own alpha, so 1 lets #rrggbbaa carry the
-      // translucency by itself — and keeps one colour value correct on both platforms.
       shadowOpacity: 1,
-      // Halved because iOS renders a given shadowRadius heavier than the same CSS blur, so an
-      // unhalved radius reads darker and wider than the web token this mirrors.
       shadowRadius: layer.blur / 2
     },
-    // Same legacy shadow-prop shape as iOS, but WITHOUT the halving above: that halving corrects
-    // for iOS rendering a given shadowRadius heavier than the same CSS blur, which is an iOS
-    // quirk, not a web one. The token's `blur` already IS the original web/CSS value (see
-    // `elevation.ts`'s doc comment), so it passes straight through as `shadowRadius` and
-    // react-native-web's preprocessor turns the whole set into a real CSS `box-shadow`.
     web: {
       shadowColor: layer.color,
       shadowOffset: {
@@ -64,8 +22,6 @@ export function elevation(token) {
       shadowOpacity: 1,
       shadowRadius: layer.blur
     },
-    // Android draws the shadow from `elevation` alone; it ignores offset/opacity/radius and tints
-    // with shadowColor only on API 28+. Below that the shadow is the platform's default black.
     default: {
       shadowColor: layer.color,
       elevation: token.android

package/lib/module/theme/platform/floatingSurface.native.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import { Platform } from 'react-native';
+import { hexToHsl, withLightness } from "../tokens/builders/color.js";
+import { elevation as renderElevation } from "./elevation.native.js";
+import { elevation as elevationTokens } from "../tokens/primitives/index.js";
+import { composeBoxShadow, highlight } from "./highlight.native.js";
+const MIN_DARK_STEP = 4;
+function darkStep(base, floorLightness) {
+  const bumped = floorLightness + MIN_DARK_STEP + 0.15;
+  return withLightness(base, Math.max(hexToHsl(base).l, bumped));
+}
+function darkFloatingBackground(theme, level) {
+  const canvasL = hexToHsl(theme.colors.bg.canvas).l;
+  switch (level) {
+    case 'sm':
+      return darkStep(theme.colors.bg.surface, canvasL);
+    case 'md':
+      {
+        const sm = darkFloatingBackground(theme, 'sm');
+        return darkStep(theme.colors.bg.raised, hexToHsl(sm).l);
+      }
+    case 'lg':
+      {
+        const md = darkFloatingBackground(theme, 'md');
+        return darkStep(theme.colors.bg.raised, hexToHsl(md).l);
+      }
+  }
+}
+const DARK_AMBIENT = [{
+  offsetX: 0,
+  offsetY: 8,
+  blurRadius: 24,
+  spreadDistance: 0,
+  color: 'rgba(0,0,0,0.4)'
+}];
+export function tokenBoxShadow(token) {
+  return token.layers.map(layer => ({
+    offsetX: layer.x,
+    offsetY: layer.y,
+    blurRadius: layer.blur,
+    spreadDistance: layer.spread,
+    color: layer.color
+  }));
+}
+export function floatingBackground(theme, level) {
+  if (theme.mode === 'light') {
+    return level === 'sm' ? theme.colors.bg.raised : theme.colors.bg.surface;
+  }
+  return darkFloatingBackground(theme, level);
+}
+export function floatingSurfaceStyle(theme, level) {
+  const token = elevationTokens[level];
+  const legacy = renderElevation(token);
+  const style = {
+    ...legacy,
+    borderCurve: 'continuous'
+  };
+  if (Platform.OS === 'android') {
+    return style;
+  }
+  if (theme.mode === 'dark') {
+    const inset = level === 'lg' ? highlight('subtle', theme.mode) : [];
+    style.boxShadow = composeBoxShadow(DARK_AMBIENT, inset);
+    if (level === 'lg') {
+      style.borderTopWidth = 1;
+      style.borderTopColor = 'rgba(255,255,255,0.06)';
+    }
+    return style;
+  }
+  const inset = highlight('subtle', theme.mode);
+  style.boxShadow = composeBoxShadow(tokenBoxShadow(token), inset);
+  return style;
+}
+//# sourceMappingURL=floatingSurface.native.js.map

package/lib/module/theme/platform/highlight.native.js

@@ -0,0 +1,59 @@
+"use strict";
+
+const LIGHT = {
+  subtle: 'rgba(255,255,255,0.05)',
+  raised: 'rgba(255,255,255,0.85)'
+};
+const DARK = {
+  subtle: 'rgba(255,255,255,0.10)',
+  raised: 'rgba(255,255,255,1.0)'
+};
+function layerKey(layer) {
+  return [layer.offsetX, layer.offsetY, layer.blurRadius ?? 0, layer.spreadDistance ?? 0, layer.inset ? 1 : 0, layer.color ?? ''].join('|');
+}
+function dedupeLayers(layers) {
+  const seen = new Set();
+  const out = [];
+  for (const layer of layers) {
+    const key = layerKey(layer);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(layer);
+  }
+  return out;
+}
+export function highlightLevels(level, mode) {
+  return highlight(level, mode);
+}
+export function highlight(level, mode) {
+  if (level === 'none') return [];
+  const palette = mode === 'dark' ? DARK : LIGHT;
+  const color = palette[level];
+  if (level === 'subtle') {
+    return [{
+      offsetX: 0,
+      offsetY: 1,
+      blurRadius: 0,
+      spreadDistance: 0,
+      inset: true,
+      color
+    }];
+  }
+  return [{
+    offsetX: 0,
+    offsetY: 1,
+    blurRadius: 1,
+    spreadDistance: 0,
+    inset: true,
+    color
+  }];
+}
+export function composeBoxShadow(outset, inset) {
+  return dedupeLayers([...outset, ...inset]);
+}
+export function asBoxShadowArray(value) {
+  if (value === undefined) return [];
+  if (typeof value === 'string') return [];
+  return value;
+}
+//# sourceMappingURL=highlight.native.js.map

package/lib/module/theme/platform/index.js

@@ -9,6 +9,11 @@
  */
 export { rem, hairline } from "./units.native.js";
 export { elevation } from "./elevation.native.js";
+export { highlight, highlightLevels, composeBoxShadow } from "./highlight.native.js";
+export { elevatedSurfaces } from "./surfaces.native.js";
+export { STATE_LAYER_OPACITY, rippleColor, stateLayerScrim } from "./stateLayer.native.js";
+export { floatingBackground, floatingSurfaceStyle } from "./floatingSurface.native.js";
+export { springs } from "./motion.native.js";
 export { interFontFamilies, systemFontFamily, fontStyleForWeight } from "./fonts.native.js";
 export { getSystemColorMode, subscribeToSystemColorMode } from "./colorScheme.native.js";
 //# sourceMappingURL=index.js.map

package/lib/module/theme/platform/motion.native.js

@@ -1,15 +1,35 @@
 "use strict";
 
-export const motionDurations = {
-  instant: 0,
-  fast: 150,
-  normal: 200,
-  slow: 300
-};
-export const motionEasings = {
-  standard: 'ease-in-out',
-  enter: 'ease-out',
-  exit: 'ease-in',
-  snap: 'linear'
+export const springs = {
+  spatialFast: {
+    stiffness: 800,
+    damping: 33.94,
+    mass: 1
+  },
+  spatialDefault: {
+    stiffness: 380,
+    damping: 31.19,
+    mass: 1
+  },
+  spatialSlow: {
+    stiffness: 200,
+    damping: 22.63,
+    mass: 1
+  },
+  effectsFast: {
+    stiffness: 3800,
+    damping: 123.29,
+    mass: 1
+  },
+  effectsDefault: {
+    stiffness: 1600,
+    damping: 80.0,
+    mass: 1
+  },
+  effectsSlow: {
+    stiffness: 800,
+    damping: 56.57,
+    mass: 1
+  }
 };
 //# sourceMappingURL=motion.native.js.map

package/lib/module/theme/platform/stateLayer.native.js

@@ -0,0 +1,14 @@
+"use strict";
+
+export const STATE_LAYER_OPACITY = {
+  pressed: 0.1,
+  focus: 0.1,
+  hover: 0.08,
+  dragged: 0.16,
+  disabled: 0.38
+};
+export function stateLayerScrim(mode) {
+  return mode === 'dark' ? '#ffffff' : '#000000';
+}
+export const rippleColor = mode => mode === 'dark' ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.10)';
+//# sourceMappingURL=stateLayer.native.js.map

package/lib/module/theme/platform/surfaces.native.js

@@ -0,0 +1,11 @@
+"use strict";
+
+export function elevatedSurfaces(palette, mode) {
+  if (mode === 'light') return null;
+  return {
+    elevated1: palette.background[100],
+    elevated2: palette.background[200],
+    elevated3: palette.background[300]
+  };
+}
+//# sourceMappingURL=surfaces.native.js.map