pixelize-native-library 1.2.0 → 1.3.0

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

@@ -28,27 +28,57 @@
  * strand the bubble in the tree.
  */
 
-import { cloneElement, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Animated, StyleSheet, Text, View } from "react-native";
+import { cloneElement, isValidElement, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 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";
-
-/** The subset of props Tooltip reads from / injects into its trigger child. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Tooltip = /*#__PURE__*/memo(function Tooltip({
   label,
   children,
   placement = "bottom",
+  onlyShowWhenTruncated = false,
   testID
 }) {
   const theme = useTheme();
   const motion = useMotion();
   const [visible, setVisible] = useState(false);
+  const [contentTruncated, setContentTruncated] = useState(!onlyShowWhenTruncated);
   const hideTimer = useRef(null);
   const hovered = useRef(false);
   const bubbleId = useId();
+  const attachTruncationProbe = useCallback(element => {
+    if (!onlyShowWhenTruncated) return element;
+    if (element.type === Text) {
+      const text = element;
+      return /*#__PURE__*/cloneElement(text, {
+        onTextLayout: event => {
+          text.props.onTextLayout?.(event);
+          const maxLines = text.props.numberOfLines;
+          const lines = event.nativeEvent.lines;
+          if (maxLines === undefined) {
+            setContentTruncated(true);
+            return;
+          }
+          const last = lines[lines.length - 1];
+          const labelText = text.props.children;
+          const truncatedByLineCount = lines.length > maxLines;
+          const truncatedByEllipsis = lines.length === maxLines && typeof labelText === "string" && last !== undefined && last.text !== labelText;
+          setContentTruncated(truncatedByLineCount || truncatedByEllipsis);
+        }
+      });
+    }
+    const inner = element.props.children;
+    if (/*#__PURE__*/isValidElement(inner)) {
+      return /*#__PURE__*/cloneElement(element, {}, attachTruncationProbe(inner));
+    }
+    return element;
+  }, [onlyShowWhenTruncated]);
 
   // A bubble above the trigger should settle upward, one below it downward — `useEnterExit` enters
   // from `-offset`, so the sign flips with placement.
@@ -65,16 +95,26 @@ 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.
   const show = useCallback(autoHide => {
+    if (onlyShowWhenTruncated && !contentTruncated) return;
     clearHideTimer();
     setVisible(true);
     // Fallback dismiss: guarantees the tip can't get stuck open if `onPressOut` never fires (e.g.
     // the gesture is cancelled by a scroll, or assistive tech triggers `onLongPress` directly).
     if (autoHide) hideTimer.current = setTimeout(hide, TOOLTIP_TIMING.autoHideMs);
-  }, [clearHideTimer, hide]);
+  }, [clearHideTimer, hide, onlyShowWhenTruncated, contentTruncated]);
   useEffect(() => clearHideTimer, [clearHideTimer]);
 
   // WCAG 1.4.13 dismissible: Escape hides the tip without moving focus, so a keyboard user can
@@ -102,8 +142,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);
@@ -112,7 +166,7 @@ export const Tooltip = /*#__PURE__*/memo(function Tooltip({
     children.props.onBlur?.(event);
     hide();
   }, [children, hide]);
-  const trigger = /*#__PURE__*/cloneElement(children, {
+  const trigger = /*#__PURE__*/cloneElement(attachTruncationProbe(children), {
     onLongPress: handleLongPress,
     onPressOut: handlePressOut,
     onHoverIn: handleHoverIn,
@@ -122,12 +176,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
@@ -141,10 +201,11 @@ export const Tooltip = /*#__PURE__*/memo(function Tooltip({
     // screen-reader users through the trigger — the merged `accessibilityHint` on native, the
     // `aria-describedby` reference to this `id` on web — so exposing the bubble in reading
     // order too would announce the same text twice.
-    _jsx(Animated.View, {
+    _jsx(Reanimated.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/modules/tooltip/TooltipProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=TooltipProps.js.map

package/lib/module/modules/typing-indicator/MODULE.md

@@ -1,4 +1,4 @@
-# typing-indicator/
+# typing-indicator/ — a three-dot typing animation for chat threads
 
 Three-dot typing animation for chat threads. Static dots under reduced motion.
 

package/lib/module/modules/typing-indicator/TypingIndicator.js

@@ -11,24 +11,81 @@
  * A screen-reader user who is not focused on the thread would otherwise learn someone is typing only
  * by chance, on their next swipe past this element.
  *
- * Each dot loops a BARE `motion.timing` over a 0→1 driver and interpolates that into the
- * min→max→min opacity pulse. `Animated.loop` only runs natively (`_startNativeLoop`) when the
- * animation it wraps reports `_isUsingNativeDriver()`, which `Animated.sequence` returns `false`
- * for unconditionally — a looped sequence therefore restarts every leg from the JS thread, forever.
- * The stagger is `TimingOptions.delay` (one JS timeout per dot at start-up) rather than
- * `Animated.delay`, which is itself a `useNativeDriver: false` timing.
+ * Each dot loops a bare `motion.loop` over a 0→1 shared driver and interpolates that into the
+ * min→max→min opacity pulse on the UI thread. The stagger is `TimingOptions.delay` (one JS timeout
+ * per dot at start-up) rather than composing delays into the loop animation.
  */
 
 import { memo, useEffect, useMemo, useRef } from "react";
-import { Animated, View } from "react-native";
+import { View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
-import { useMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { resolveTypingIndicatorAccessibility, TYPING_DOT_MAX_OPACITY, TYPING_DOT_MIN_OPACITY, typingDotStructure, typingIndicatorStructure } from "./TypingIndicator.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DOT_COUNT = 3;
 /** The driver's midpoint: the peak of the pulse, and the resting value while motion is off. */
 const PULSE_PEAK = 0.5;
+const TypingDot = /*#__PURE__*/memo(function TypingDot({
+  index,
+  pulsing,
+  cycleMs,
+  baseStyle,
+  testID
+}) {
+  const motion = useMotion();
+  const driver = useAnimatedValue(PULSE_PEAK);
+  const running = useRef(null);
+  const startTimer = useRef(null);
+  useEffect(() => {
+    running.current?.stop();
+    if (startTimer.current !== null) {
+      clearTimeout(startTimer.current);
+      startTimer.current = null;
+    }
+    if (!pulsing) {
+      driver.value = PULSE_PEAK;
+      return undefined;
+    }
+    driver.value = 0;
+    const delayMs = index * cycleMs / DOT_COUNT;
+    const startLoop = () => {
+      running.current = motion.loop(driver, 1, {
+        duration: "deliberate"
+      });
+      running.current.start();
+    };
+    if (delayMs > 0) {
+      startTimer.current = setTimeout(startLoop, delayMs);
+    } else {
+      startLoop();
+    }
+    return () => {
+      running.current?.stop();
+      if (startTimer.current !== null) clearTimeout(startTimer.current);
+    };
+  }, [pulsing, cycleMs, index, motion, driver]);
+  useEffect(() => () => {
+    running.current?.stop();
+    if (startTimer.current !== null) clearTimeout(startTimer.current);
+  }, []);
+  const dotStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(driver.value, [0, PULSE_PEAK, 1], [TYPING_DOT_MIN_OPACITY, TYPING_DOT_MAX_OPACITY, TYPING_DOT_MIN_OPACITY])
+  }));
+  if (!pulsing) {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: [baseStyle, {
+        opacity: TYPING_DOT_MAX_OPACITY
+      }]
+    });
+  }
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    testID: testID,
+    style: [baseStyle, dotStyle]
+  });
+});
 export const TypingIndicator = /*#__PURE__*/memo(function TypingIndicator({
   size = "md",
   style,
@@ -38,49 +95,14 @@ export const TypingIndicator = /*#__PURE__*/memo(function TypingIndicator({
   const motion = useMotion();
   const a11y = resolveTypingIndicatorAccessibility();
   useAnnounce(a11y.accessibilityLabel);
-  const drivers = useRef(Array.from({
-    length: DOT_COUNT
-  }, () => new Animated.Value(PULSE_PEAK))).current;
-  const loops = useRef([]);
   const cycleMs = motion.duration("deliberate");
   const pulsing = motion.decorative && cycleMs > 0;
-  useEffect(() => {
-    loops.current.forEach(loop => loop.stop());
-    loops.current = [];
-    if (!pulsing) {
-      drivers.forEach(driver => driver.setValue(PULSE_PEAK));
-      return undefined;
-    }
-    loops.current = drivers.map((driver, index) => {
-      // Each iteration replays from wherever the driver sits when the loop starts.
-      driver.setValue(0);
-      const loop = Animated.loop(motion.timing(driver, 1, {
-        duration: "deliberate",
-        delay: index * cycleMs / DOT_COUNT
-      }));
-      loop.start();
-      return loop;
-    });
-    return () => {
-      loops.current.forEach(loop => loop.stop());
-      loops.current = [];
-    };
-  }, [drivers, pulsing, cycleMs, motion]);
-  useEffect(() => () => loops.current.forEach(loop => loop.stop()), []);
   const dotColor = theme.colors.fg.muted;
-  const dotStyles = useMemo(() => {
-    const base = [typingDotStructure(theme, {
-      size
-    }), {
-      backgroundColor: dotColor
-    }];
-    return drivers.map(driver => [base, {
-      opacity: driver.interpolate({
-        inputRange: [0, PULSE_PEAK, 1],
-        outputRange: [TYPING_DOT_MIN_OPACITY, TYPING_DOT_MAX_OPACITY, TYPING_DOT_MIN_OPACITY]
-      })
-    }]);
-  }, [theme, size, dotColor, drivers]);
+  const dotBaseStyle = useMemo(() => [typingDotStructure(theme, {
+    size
+  }), {
+    backgroundColor: dotColor
+  }], [theme, size, dotColor]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     accessible: a11y.accessible,
@@ -89,9 +111,14 @@ export const TypingIndicator = /*#__PURE__*/memo(function TypingIndicator({
     style: [typingIndicatorStructure(theme, {
       size
     }), style],
-    children: dotStyles.map((dotStyle, index) => /*#__PURE__*/_jsx(Animated.View, {
-      testID: testID === undefined ? undefined : `${testID}-dot-${index}`,
-      style: dotStyle
+    children: Array.from({
+      length: DOT_COUNT
+    }, (_, index) => /*#__PURE__*/_jsx(TypingDot, {
+      index: index,
+      pulsing: pulsing,
+      cycleMs: cycleMs,
+      baseStyle: dotBaseStyle,
+      testID: testID === undefined ? undefined : `${testID}-dot-${index}`
     }, index))
   });
 });

package/lib/module/modules/typing-indicator/TypingIndicatorProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=TypingIndicatorProps.js.map

package/lib/module/modules/upgrade-button/MODULE.md

@@ -0,0 +1,3 @@
+# upgrade-button/ — a primary CTA for billing upgrade flows
+
+Primary CTA for billing upgrade flows. Composes `Button`.

package/lib/module/modules/upgrade-button/UpgradeButton.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { memo } from "react";
+import { Button } from "../button/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const UpgradeButton = /*#__PURE__*/memo(function UpgradeButton({
+  onPress,
+  label = "Upgrade",
+  disabled,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(Button, {
+    label: label,
+    variant: "solid",
+    tone: "accent",
+    onPress: onPress,
+    disabled: disabled,
+    style: style,
+    testID: testID
+  });
+});
+//# sourceMappingURL=UpgradeButton.js.map

package/lib/module/modules/upgrade-button/UpgradeButtonProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=UpgradeButtonProps.js.map

package/lib/module/modules/upgrade-button/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { UpgradeButton } from "./UpgradeButton.js";
+//# sourceMappingURL=index.js.map

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 |
 |---|---|---|
@@ -91,3 +93,5 @@ above.
 - 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.
+
+PixelizeProvider logs a dev-only warning when interLoaded is false (see README typography).

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
@@ -50,12 +62,8 @@ to `default` (the Android shape), whose only meaningful field — `elevation`
     lets `#rrggbbaa` carry translucency alone — one colour value, correct on both platforms. Also
     note the prop **defaults to 0** (no shadow), so it must always be set.
   - `shadowOffset` is always explicit because iOS defaults it to `(0, -3)`, not `(0, 0)`.
-- **Web** — same shape as iOS (`shadowColor` + `shadowOffset` + `shadowOpacity: 1` +
-  `shadowRadius`), but **unhalved**: the iOS halving corrects an iOS-only rendering quirk, and the
-  token's `blur` already IS the original web/CSS value (see `tokens/primitives/elevation.ts`'s doc
-  comment), so it passes straight through. `react-native-web`'s style preprocessor converts these
-  legacy shadow props into a real CSS `box-shadow` — confirmed empirically via
-  `react-native-web/dist/cjs/exports/StyleSheet/preprocess`.
+- **Web** — a single `boxShadow` CSS string (`x y blur color`, unhalved blur — same token as iOS
+  uses before the `/2` halving). Avoids deprecated `shadow*` style props on react-native-web.
 - **Android** — `elevation` + `shadowColor` only. Android ignores offset/opacity/radius, and tints
   from `shadowColor` only on **API 28+** (below that the shadow is the platform default black).
   A view also needs a **background colour** for `elevation` to cast anything.

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

@@ -1,71 +1,21 @@
 "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: {
-        width: layer.x,
-        height: layer.y
-      },
-      shadowOpacity: 1,
-      shadowRadius: layer.blur
+      boxShadow: `${layer.x}px ${layer.y}px ${layer.blur}px ${layer.color}`
     },
-    // 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