pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/menu/Menu.js

@@ -15,28 +15,36 @@
 
 import { cloneElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { focusItemProps, useDismissOnEscape, useFocusTrap, useRovingKeys, useSpaceActivation } from "../../core/a11y/keyboard";
-import { useMotion } from "../../core/motion/index.js";
+import { MOTION_TRANSFORM, useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { withAlpha } from "../../core/gradient/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { VirtualList } from "../../core/list/index.js";
+import { concentric } from "../../core/style/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 { ModalPortalContext } from "../modal/ModalPortalContext.js";
 import { renderWebPortal } from "../modal/renderWebPortal";
-import { MENU_ROW_ICON_SIZE, MENU_ROW_MIN_HEIGHT, menuOverlayStructure, menuRowStructure, menuSheetStructure, resolveMenuItemColor, resolveMenuRowPressedBackground } from "./Menu.variants.js";
+import { MENU_ROW_ICON_SIZE, MENU_ROW_MIN_HEIGHT, menuOverlayStructure, menuRowStructure, menuSheetStructure, resolveMenuItemColor } from "./Menu.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const VIRTUALIZE_THRESHOLD = 15;
 const ICON_STROKE = 2;
-const BACKDROP_SCRIM = "#00000099";
+// Opacity is the shared `scrimOpacity` knob, not a locally-guessed hex — matches Modal/Drawer/BottomSheet.
+const BACKDROP_SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
 const MenuRow = /*#__PURE__*/memo(function MenuRow({
   item,
   index,
   tabIndex,
   theme,
-  pressedRowBg,
   onSelect,
   testID
 }) {
   const color = resolveMenuItemColor(theme.colors, item.tone ?? "default");
+  const press = usePressState(false);
   const handlePress = useCallback(() => onSelect(item), [onSelect, item]);
   const rowRef = useRef(null);
   const active = tabIndex === 0;
@@ -50,24 +58,33 @@ const MenuRow = /*#__PURE__*/memo(function MenuRow({
 
   // `menuitem` is not `button`, so RNW never presses on Space — see `core/a11y/keyboard.web.ts`.
   useSpaceActivation(rowRef, handlePress);
-  const rowStyle = useCallback(({
-    pressed
-  }) => [menuRowStructure(theme), pressed && {
-    backgroundColor: pressedRowBg
-  }], [theme, pressedRowBg]);
+  const rowStyle = useMemo(() => [menuRowStructure(theme), {
+    overflow: "hidden"
+  }, press.animatedStyle], [theme, press.animatedStyle]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: theme.mode === "dark" ? "#ffffff" : "#000000",
+    borderRadius: concentric(theme.radii.lg, theme.space[4]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.lg, theme.space]);
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     flex: 1,
     fontSize: theme.fontSizes.md,
     color
   }], [theme, color]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     ref: rowRef,
     testID: testID ? `${testID}-item-${index}` : undefined,
     accessibilityRole: "menuitem",
     tabIndex: tabIndex,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     style: rowStyle,
-    children: [item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
       name: item.icon,
       size: MENU_ROW_ICON_SIZE,
       color: color,
@@ -89,28 +106,59 @@ export const Menu = /*#__PURE__*/memo(function Menu({
   const motion = useMotion();
   const portalContainer = useContext(ModalPortalContext);
   const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const mountedRef = useRef(mounted);
+  mountedRef.current = mounted;
   const [activeIndex, setActiveIndex] = useState(0);
   const sheetRef = useRef(null);
-  const enter = useRef(new Animated.Value(0)).current;
-  const entering = useRef(null);
+  const enter = useAnimatedValue(0);
+  const running = useRef(null);
+  const unmountTimer = useRef(null);
   useEffect(() => {
-    entering.current?.stop();
-    if (!open) {
+    const clearUnmount = () => {
+      if (unmountTimer.current !== null) {
+        clearTimeout(unmountTimer.current);
+        unmountTimer.current = null;
+      }
+    };
+    running.current?.stop();
+    clearUnmount();
+    if (open) {
+      setMounted(true);
+      if (!motion.enabled) {
+        enter.setValue(1);
+        return;
+      }
       enter.setValue(0);
+      running.current = motion.timing(enter, 1, {
+        duration: "fast",
+        easing: "decelerate"
+      });
+      running.current.start();
       return;
     }
-    if (!motion.enabled) {
-      enter.setValue(1);
+    if (!mountedRef.current) return;
+    const exitMs = motion.duration("fast");
+    if (!motion.enabled || exitMs === 0) {
+      enter.setValue(0);
+      setMounted(false);
       return;
     }
-    enter.setValue(0);
-    entering.current = motion.timing(enter, 1, {
+    running.current = motion.timing(enter, 0, {
       duration: "fast",
-      easing: "decelerate"
+      easing: "accelerate"
     });
-    entering.current.start();
+    running.current.start();
+    unmountTimer.current = setTimeout(() => {
+      unmountTimer.current = null;
+      setMounted(false);
+    }, exitMs);
+    return clearUnmount;
   }, [open, motion, enter]);
-  useEffect(() => () => entering.current?.stop(), []);
+  useEffect(() => () => {
+    running.current?.stop();
+    if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
+  }, []);
   const openMenu = useCallback(() => {
     if (disabled) return;
     setActiveIndex(0);
@@ -141,7 +189,6 @@ export const Menu = /*#__PURE__*/memo(function Menu({
   const clonedTrigger = /*#__PURE__*/cloneElement(trigger, {
     onPress: handleTriggerPress
   });
-  const pressedRowBg = useMemo(() => resolveMenuRowPressedBackground(theme.colors), [theme.colors]);
   const keyExtractor = useCallback((item, index) => `${item.label}-${index}`, []);
   const renderItem = useCallback(({
     item,
@@ -151,12 +198,20 @@ export const Menu = /*#__PURE__*/memo(function Menu({
     index: index,
     tabIndex: focusItemProps(index, activeIndex).tabIndex,
     theme: theme,
-    pressedRowBg: pressedRowBg,
     onSelect: selectItem,
     testID: testID
-  }), [activeIndex, theme, pressedRowBg, selectItem, testID]);
-  const sheetStyle = useMemo(() => [menuSheetStructure(theme), {
-    backgroundColor: theme.colors.bg.surface,
+  }), [activeIndex, theme, selectItem, testID]);
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.md);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "md"),
+      ...floatingSurfaceStyle(theme, "md")
+    };
+  }, [theme]);
+  const sheetStyle = useMemo(() => [menuSheetStructure(theme), floatingStyle, {
+    opacity: enter,
     transform: [{
       scale: enter.interpolate({
         inputRange: [0, 1],
@@ -168,27 +223,30 @@ export const Menu = /*#__PURE__*/memo(function Menu({
         outputRange: [motion.transform.offsetY, 0]
       })
     }]
-  }], [theme, enter, motion.transform.pressScale, motion.transform.offsetY]);
+  }], [theme, floatingStyle, enter, motion.transform.pressScale, motion.transform.offsetY]);
+  const backdropStyle = useMemo(() => [styles.backdrop, {
+    opacity: enter
+  }], [enter]);
 
-  // Built only while open: a closed Menu must not materialize one element per item on every render
-  // of the screen that hosts it.
-  const sheet = open ? /*#__PURE__*/_jsxs(_Fragment, {
+  // Built only while mounted: a closed, settled Menu must not materialize one element per item on
+  // every render of the screen that hosts it.
+  const sheet = mounted ? /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Pressable, {
       testID: testID ? `${testID}-backdrop` : undefined,
       accessible: false,
       tabIndex: -1,
-      style: styles.backdrop,
-      onPress: closeMenu
+      style: StyleSheet.absoluteFill,
+      onPress: closeMenu,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: backdropStyle
+      })
     }), /*#__PURE__*/_jsx(View, {
       style: menuOverlayStructure(theme),
       pointerEvents: "box-none",
       children: /*#__PURE__*/_jsx(Animated.View, {
         ref: sheetRef,
-        testID: testID ? `${testID}-sheet` : undefined
-        // The container role the `menuitem` rows below need, plus the modal semantics every other
-        // overlay in this library gives its panel. Declared HERE, before the portal branch, so the
-        // web-portal path — which renders no RN `<Modal>` at all — inherits them too.
-        ,
+        testID: testID ? `${testID}-sheet` : undefined,
         accessibilityRole: "menu",
         accessibilityViewIsModal: true,
         onAccessibilityEscape: closeMenu,
@@ -205,7 +263,6 @@ export const Menu = /*#__PURE__*/memo(function Menu({
             index: index,
             tabIndex: focusItemProps(index, activeIndex).tabIndex,
             theme: theme,
-            pressedRowBg: pressedRowBg,
             onSelect: selectItem,
             testID: testID
           }, `${item.label}-${index}`))
@@ -213,13 +270,15 @@ export const Menu = /*#__PURE__*/memo(function Menu({
       })
     })]
   }) : null;
-  const menu = Platform.OS === "web" && portalContainer != null ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
+  const menu = Platform.OS === "web" && portalContainer != null ? mounted ? renderWebPortal(/*#__PURE__*/_jsx(View, {
     style: StyleSheet.absoluteFill,
     pointerEvents: "box-none",
     children: sheet
   }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
     visible: open,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: motion.enabled ? "fade" : "none",
     onRequestClose: closeMenu,
     children: sheet

package/lib/module/modules/menu/Menu.variants.js

@@ -67,10 +67,10 @@ export const menuOverlayStructure = createThemedVariants(theme => ({
 }));
 export const menuSheetStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     paddingVertical: theme.space[2],
-    maxHeight: 320,
-    ...theme.elevation.lg
+    maxHeight: 320
   }
 }));
 export const menuRowStructure = createThemedVariants(theme => ({

package/lib/module/modules/message-bubble/MODULE.md

@@ -1,6 +1,6 @@
 # message-bubble/
 
-Single chat bubble — `user` (accent) or `assistant` (surface + border). Plain `content` string.
+Single chat bubble — `user` (accent) or `assistant` (tonal surface). Plain `content` string.
 
 ## Motion contract
 
@@ -36,3 +36,6 @@ mean a new prop — not added speculatively.
 | `content` | `string` | — |
 | `style` | `LayoutStyle` | — |
 | `testID` | `string` | — |
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
+- **Round 5 tonal** — assistant's `borderWidth.thin` hairline dropped; `bg.surface` alone now separates the bubble from its parent by tone, matching `Card`'s borderless-flat precedent.

package/lib/module/modules/message-bubble/MessageBubble.js

@@ -1,8 +1,8 @@
 "use strict";
 
 /**
- * MessageBubble — a single chat turn bubble. User variant uses accent fill; assistant uses surface
- * card with border. Plain-text `content` only (rich assistant replies compose Markdown/RichText
+ * MessageBubble — a single chat turn bubble. User variant uses accent fill; assistant uses a tonal
+ * surface fill, no border. Plain-text `content` only (rich assistant replies compose Markdown/RichText
  * upstream).
  *
  * The accessible label names the sender ("You" / "Assistant") ahead of the content: alignment and
@@ -32,9 +32,8 @@ export const MessageBubble = /*#__PURE__*/memo(function MessageBubble({
   const bubbleStyle = useMemo(() => [messageBubbleStructure(theme, {
     variant
   }), {
-    backgroundColor: colors.background,
-    borderColor: colors.border
-  }, style], [theme, variant, colors.background, colors.border, style]);
+    backgroundColor: colors.background
+  }, style], [theme, variant, colors.background, style]);
   const textStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     fontSize: theme.fontSizes.md,
     lineHeight: theme.fontSizes.md * 1.45,

package/lib/module/modules/message-bubble/MessageBubble.variants.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import { createThemedVariants } from "../../core/style/index.js";
+/** Assistant separates from the canvas by tone (`bg.surface`) alone now — no hairline border. */
 export function resolveMessageBubbleColors(colors, variant) {
   if (variant === "user") {
     return {
@@ -10,8 +11,7 @@ export function resolveMessageBubbleColors(colors, variant) {
   }
   return {
     background: colors.bg.surface,
-    text: colors.fg.default,
-    border: colors.border.default
+    text: colors.fg.default
   };
 }
 export const messageBubbleStructure = createThemedVariants(theme => ({
@@ -19,7 +19,8 @@ export const messageBubbleStructure = createThemedVariants(theme => ({
     maxWidth: "85%",
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2],
-    borderRadius: theme.radii.lg
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
   },
   variants: {
     variant: {
@@ -29,8 +30,7 @@ export const messageBubbleStructure = createThemedVariants(theme => ({
       },
       assistant: {
         alignSelf: "flex-start",
-        borderBottomLeftRadius: theme.radii.sm,
-        borderWidth: theme.borderWidths.thin
+        borderBottomLeftRadius: theme.radii.sm
       }
     }
   },

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

@@ -135,6 +135,14 @@ none of them contains keyboard code, and each has a test asserting the inheritan
 4. **Closed `size` union** reusing the shared `sizes` primitive (384/448/512dp) instead of
    Modal-local numbers — `theme/tokens/primitives/sizes.ts` is documented for exactly this case.
 
+## Android edge-to-edge
+
+Every RN `<Modal transparent>` in this library (`Modal`, `Select`, `MultiSelect`, `Combobox`,
+`Menu`, `OrgSwitcher`, `PickerShell`, `Drawer`) also sets `statusBarTranslucent` and
+`navigationBarTranslucent`, both `true`. Without them, Android edge-to-edge (Expo default since
+SDK 53) paints the modal's backing window opaque instead of transparent — the whole screen goes
+solid white on open. Add both any time a new module renders its own RN `<Modal transparent>`.
+
 ## Known gaps
 
 - **No full SCREEN-READER trap.** iOS gets `accessibilityViewIsModal` (constrains VoiceOver to the
@@ -162,3 +170,6 @@ Both `Modal` and `ModalPortalProvider` are wrapped in `React.memo` (repo-wide re
 - 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.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
+- **Round 5 motion** — dropped the ad hoc reanimated `FadeInDown`/`FadeOut` layer; the panel's own `enter` value now drives backdrop opacity too, so scrim fade and panel slide+fade are one gesture on both the RNModal and web-portal paths. The portal branch now tracks `mounted` through a real timed exit instead of unmounting instantly. `MODAL_BACKDROP`'s opacity comes from `MOTION_TRANSFORM.scrimOpacity`.

package/lib/module/modules/modal/Modal.js

@@ -33,19 +33,22 @@
  * which is where all three silently went missing.
  */
 
-import { memo, useContext, useEffect, useMemo, useRef } from "react";
-import { Animated, Modal as RNModal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Modal as RNModal, Platform, Pressable, StyleSheet, View } from "react-native";
 import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { MOTION_TRANSFORM, useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { withAlpha } from "../../core/gradient/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 { Heading } from "../text/index.js";
 import { ModalPortalContext } from "./ModalPortalContext.js";
 import { renderWebPortal } from "./renderWebPortal";
-import { modalOverlayStructure, modalPanelStructure, resolveModalAnimationType, resolveModalPanelColors } from "./Modal.variants.js";
+import { modalOverlayStructure, modalPanelStructure, resolveModalAnimationType } from "./Modal.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Decorative dismiss scrim behind the panel — a design constant, not a role token: it is neither
-// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it. Same
-// justification as Button's PRESS_SCRIM_DARK/LIGHT and Select's BACKDROP_SCRIM.
-const MODAL_BACKDROP = "#00000080";
+// Decorative dismiss scrim, not a role token — same reasoning Button's PRESS_SCRIM and Select's
+// BACKDROP_SCRIM record. Opacity is the shared `scrimOpacity` knob, not a locally-guessed hex.
+const MODAL_BACKDROP = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 export const Modal = /*#__PURE__*/memo(function Modal({
   visible,
   onRequestClose,
@@ -56,54 +59,105 @@ export const Modal = /*#__PURE__*/memo(function Modal({
 }) {
   const theme = useTheme();
   const motion = useMotion();
-  const panelColors = useMemo(() => resolveModalPanelColors(theme.colors), [theme.colors]);
   const portalContainer = useContext(ModalPortalContext);
   const panelRef = useRef(null);
   const portalled = Platform.OS === "web" && portalContainer != null;
   useDismissOnEscape(portalled && visible, onRequestClose);
   useFocusTrap(panelRef, portalled && visible);
+
+  // `mounted` only gates the web-portal render below — the RNModal branch keeps handing `visible`
+  // straight to RN's own <Modal>, which still owns that surface's native fade in and out.
+  const [mounted, setMounted] = useState(visible);
+  const mountedRef = useRef(mounted);
+  mountedRef.current = mounted;
   const enter = useAnimatedValue(visible ? 1 : 0);
-  const entering = useRef(null);
+  const running = useRef(null);
+  const unmountTimer = useRef(null);
   useEffect(() => {
-    entering.current?.stop();
-    if (!visible) {
+    const clearUnmount = () => {
+      if (unmountTimer.current !== null) {
+        clearTimeout(unmountTimer.current);
+        unmountTimer.current = null;
+      }
+    };
+    running.current?.stop();
+    clearUnmount();
+    if (visible) {
+      setMounted(true);
+      if (!motion.enabled) {
+        enter.setValue(1);
+        return;
+      }
       enter.setValue(0);
+      running.current = motion.timing(enter, 1, {
+        easing: "decelerate"
+      });
+      running.current.start();
       return;
     }
-    if (!motion.enabled) {
-      enter.setValue(1);
+    if (!mountedRef.current) return;
+    const exitMs = motion.duration("fast");
+    if (!motion.enabled || exitMs === 0) {
+      enter.setValue(0);
+      setMounted(false);
       return;
     }
-    enter.setValue(0);
-    entering.current = motion.timing(enter, 1, {
-      easing: "decelerate"
+    running.current = motion.timing(enter, 0, {
+      duration: "fast",
+      easing: "accelerate"
     });
-    entering.current.start();
+    running.current.start();
+    unmountTimer.current = setTimeout(() => {
+      unmountTimer.current = null;
+      setMounted(false);
+    }, exitMs);
+    return clearUnmount;
   }, [visible, motion, enter]);
-  useEffect(() => () => entering.current?.stop(), []);
+  useEffect(() => () => {
+    running.current?.stop();
+    if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
+  }, []);
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.lg);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "lg"),
+      ...floatingSurfaceStyle(theme, "lg")
+    };
+  }, [theme]);
   const panelStyle = useMemo(() => [modalPanelStructure(theme, {
     size
-  }), {
-    backgroundColor: panelColors.background,
+  }), floatingStyle, {
+    opacity: enter,
     transform: [{
       translateY: enter.interpolate({
         inputRange: [0, 1],
         outputRange: [motion.transform.offsetY, 0]
       })
     }]
-  }], [theme, size, panelColors.background, enter, motion.transform.offsetY]);
-  const titleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-    fontSize: theme.fontSizes.lg,
-    color: panelColors.title,
-    marginBottom: theme.space[3]
-  }], [theme, panelColors.title]);
+  }], [theme, size, floatingStyle, enter, motion.transform.offsetY]);
+  const backdropStyle = useMemo(() => [styles.backdrop, {
+    opacity: enter
+  }], [enter]);
+  const titleBlock = title !== undefined ? /*#__PURE__*/_jsx(Heading, {
+    variant: "h3",
+    style: {
+      marginBottom: theme.space[3]
+    },
+    children: title
+  }) : null;
   const overlay = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Pressable, {
       testID: testID ? `${testID}-backdrop` : undefined,
       accessible: false,
       tabIndex: -1,
-      style: styles.backdrop,
-      onPress: onRequestClose
+      style: StyleSheet.absoluteFill,
+      onPress: onRequestClose,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: backdropStyle
+      })
     }), /*#__PURE__*/_jsx(View, {
       style: modalOverlayStructure(theme),
       pointerEvents: "box-none",
@@ -113,16 +167,12 @@ export const Modal = /*#__PURE__*/memo(function Modal({
         accessibilityViewIsModal: true,
         onAccessibilityEscape: onRequestClose,
         style: panelStyle,
-        children: [title !== undefined && /*#__PURE__*/_jsx(Text, {
-          accessibilityRole: "header",
-          style: titleStyle,
-          children: title
-        }), children]
+        children: [titleBlock, children]
       })
     })]
   });
   if (portalled) {
-    if (!visible) return null;
+    if (!mounted) return null;
     // RN's own <Modal> supplies a `position: fixed`/full-screen ancestor for `overlay`'s children
     // to size against (see ModalPortalContext.ts) — reproduce just that sizing here (never touching
     // the shared `modalOverlayStructure`/`modalPanelStructure` resolvers the RNModal path below
@@ -137,6 +187,8 @@ export const Modal = /*#__PURE__*/memo(function Modal({
   return /*#__PURE__*/_jsx(RNModal, {
     visible: visible,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: resolveModalAnimationType(!motion.enabled),
     onRequestClose: onRequestClose,
     children: overlay

package/lib/module/modules/modal/Modal.variants.js

@@ -69,8 +69,8 @@ export const modalPanelStructure = createThemedVariants(theme => ({
     width: "100%",
     maxHeight: "92%",
     borderRadius: theme.radii.lg,
-    padding: theme.space[5],
-    ...theme.elevation.lg
+    borderCurve: "continuous",
+    padding: theme.space[5]
   },
   variants: {
     size: {

package/lib/module/modules/more-items/MODULE.md

@@ -34,6 +34,9 @@ Renders `null` when the count is ≤0 and there is no `triggerText` — nothing
 - **Touch target (WCAG 2.5.5 / 2.5.8)** — the trigger carries `minHeight: 44` (this library's
   floor). It is a standalone node with no neighbouring target to overlap, so the floor is real
   height via `minHeight`, not `hitSlop` expansion the way `Button`'s shorter sizes reach it.
+- **Android touch feedback** — the trigger carries `android_ripple` (`rippleColor(theme.mode)`,
+  `borderless: false`), gated on `Platform.OS === "android"`. The scrim `Pressable` gets none — it is
+  the same `accessible={false}` decoy described under Modal semantics below, not a real press target.
 - **Label in Name (WCAG 2.5.3)** — the accessible name is built to CONTAIN the visible text
   (`"${triggerText} +${count} more"`, or just `"+${count} more"` with no leading text), not a
   separately-worded `"${count} more items"`. Voice control says what it reads; the old name shared no
@@ -70,3 +73,5 @@ Renders `null` when the count is ≤0 and there is no `triggerText` — nothing
 
 - Rows are display-only — no press/selection. A selectable overflow list would be a different
   component (`Select`/`Menu`), not a prop added here.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

package/lib/module/modules/more-items/MoreItems.js

@@ -5,10 +5,11 @@
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Animated, Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { Animated, Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { VirtualList } from "../../core/list/index.js";
 import { useEnterExit, usePressMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { moreItemsBadgeStructure, moreItemsDotStructure, moreItemsOverlayStructure, moreItemsRowStructure, moreItemsSheetStructure, moreItemsTriggerContentStructure, moreItemsTriggerStructure, resolveMoreItemsCount, resolveMoreItemsDotColor } from "./MoreItems.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const BACKDROP = "#00000080";
@@ -72,6 +73,10 @@ export const MoreItems = /*#__PURE__*/memo(function MoreItems({
     backgroundColor: theme.colors.accent.subtle
   }], [theme]);
   const overlayStructure = useMemo(() => moreItemsOverlayStructure(theme), [theme]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const sheetStyle = useMemo(() => [moreItemsSheetStructure(theme), {
     backgroundColor: theme.colors.bg.surface
   }], [theme]);
@@ -102,6 +107,7 @@ export const MoreItems = /*#__PURE__*/memo(function MoreItems({
       onPress: openSheet,
       onPressIn: press.onPressIn,
       onPressOut: press.onPressOut,
+      android_ripple: androidRipple,
       style: triggerStyle,
       children: /*#__PURE__*/_jsxs(Animated.View, {
         style: [triggerContentStructure, press.style],

package/lib/module/modules/more-items/MoreItems.variants.js

@@ -48,7 +48,8 @@ export const moreItemsDotStructure = createThemedVariants(theme => ({
   base: {
     width: MORE_ITEMS_DOT_SIZE,
     height: MORE_ITEMS_DOT_SIZE,
-    borderRadius: theme.radii.full
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
   }
 }));
 export const moreItemsOverlayStructure = createThemedVariants(theme => ({
@@ -61,6 +62,7 @@ export const moreItemsOverlayStructure = createThemedVariants(theme => ({
 export const moreItemsSheetStructure = createThemedVariants(theme => ({
   base: {
     borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     padding: theme.space[3],
     maxHeight: MORE_ITEMS_SHEET_MAX_HEIGHT
   }
@@ -71,6 +73,7 @@ export const moreItemsBadgeStructure = createThemedVariants(theme => ({
     paddingHorizontal: theme.space[2],
     paddingVertical: 2,
     borderRadius: theme.radii.full,
+    borderCurve: "continuous",
     fontSize: theme.fontSizes.xs
   }
 }));

package/lib/module/modules/multi-select/MODULE.md

@@ -164,3 +164,8 @@ Via `core/motion` only — `opacity`/`transform`, native driver, all reduce-moti
 
 - 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.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
+- **Round 5 (Android parity)** — `android_ripple` (`borderless: false`) added to the trigger (gated
+  `!disabled`), the header close button, and each option row. The trigger and close button also
+  gained `overflow: "hidden"` so their ripple clips to their shape.