pixelize-native-library 1.2.0 → 1.3.0

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

@@ -13,30 +13,40 @@
  * enter. The sheet is centered rather than anchored (see MODULE.md), so it scales from its centre.
  */
 
-import { cloneElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { cloneElement, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, interpolate, LinearTransition, ReduceMotion, useAnimatedStyle } from "react-native-reanimated";
 import { focusItemProps, useDismissOnEscape, useFocusTrap, useRovingKeys, useSpaceActivation } from "../../core/a11y/keyboard";
-import { useMotion } from "../../core/motion/index.js";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { MOTION_TRANSFORM, useMotion, useAnimatedValue } 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 { stateLayerScrim } from "../../theme/platform/stateLayer.native.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 { ModalPortalContext, renderWebPortal } from "../../core/overlay/index.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 +60,34 @@ 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: stateLayerScrim(theme.mode),
+    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, {
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
       name: item.icon,
       size: MENU_ROW_ICON_SIZE,
       color: color,
@@ -87,30 +107,65 @@ export const Menu = /*#__PURE__*/memo(function Menu({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   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);
-  useEffect(() => {
-    entering.current?.stop();
-    if (!open) {
-      enter.setValue(0);
+  const enter = useAnimatedValue(0);
+  const running = useRef(null);
+  const pressScale = motion.transform.pressScale;
+  const offsetY = motion.transform.offsetY;
+  const unmountTimer = useRef(null);
+  useLayoutEffect(() => {
+    const clearUnmount = () => {
+      if (unmountTimer.current !== null) {
+        clearTimeout(unmountTimer.current);
+        unmountTimer.current = null;
+      }
+    };
+    running.current?.stop();
+    clearUnmount();
+    if (open) {
+      setMounted(true);
+      if (!motion.enabled) {
+        enter.value = 1;
+        return;
+      }
+      enter.value = 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.value = 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);
@@ -118,9 +173,10 @@ export const Menu = /*#__PURE__*/memo(function Menu({
   }, [disabled]);
   const closeMenu = useCallback(() => setOpen(false), []);
   const selectItem = useCallback(item => {
+    if (!reducedMotion) haptics.selection();
     closeMenu();
     item.onPress();
-  }, [closeMenu]);
+  }, [closeMenu, haptics, reducedMotion]);
   const typeaheadLabels = useMemo(() => items.map(item => item.label), [items]);
 
   // Keyboard (web only — every hook below is a no-op on native, see `core/a11y/keyboard.ts`).
@@ -141,7 +197,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,75 +206,93 @@ 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 sheetStaticStyle = useMemo(() => [menuSheetStructure(theme), floatingStyle], [theme, floatingStyle]);
+  const sheetAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: enter.value,
     transform: [{
-      scale: enter.interpolate({
-        inputRange: [0, 1],
-        outputRange: [motion.transform.pressScale, 1]
-      })
+      scale: interpolate(enter.value, [0, 1], [pressScale, 1])
     }, {
-      translateY: enter.interpolate({
-        inputRange: [0, 1],
-        outputRange: [motion.transform.offsetY, 0]
-      })
+      translateY: interpolate(enter.value, [0, 1], [offsetY, 0])
     }]
-  }], [theme, enter, motion.transform.pressScale, motion.transform.offsetY]);
+  }));
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: enter.value
+  }));
 
-  // 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(Reanimated.View, {
+        style: [styles.backdrop, backdropAnimatedStyle, {
+          pointerEvents: 'none'
+        }]
+      })
     }), /*#__PURE__*/_jsx(View, {
-      style: menuOverlayStructure(theme),
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [menuOverlayStructure(theme), {
+        pointerEvents: 'box-none'
+      }],
+      children: /*#__PURE__*/_jsx(Reanimated.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,
-        style: sheetStyle,
-        children: items.length >= VIRTUALIZE_THRESHOLD ? /*#__PURE__*/_jsx(VirtualList, {
-          data: items,
-          keyExtractor: keyExtractor,
-          renderItem: renderItem,
-          itemHeight: MENU_ROW_MIN_HEIGHT
-        }) : /*#__PURE__*/_jsx(ScrollView, {
-          bounces: false,
-          children: items.map((item, index) => /*#__PURE__*/_jsx(MenuRow, {
-            item: item,
-            index: index,
-            tabIndex: focusItemProps(index, activeIndex).tabIndex,
-            theme: theme,
-            pressedRowBg: pressedRowBg,
-            onSelect: selectItem,
-            testID: testID
-          }, `${item.label}-${index}`))
+        style: [sheetStaticStyle, sheetAnimatedStyle],
+        children: /*#__PURE__*/_jsx(Reanimated.View, {
+          layout: LinearTransition.reduceMotion(ReduceMotion.System),
+          entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+          exiting: FadeOut.reduceMotion(ReduceMotion.System),
+          style: {
+            flexGrow: 1
+          },
+          children: items.length >= VIRTUALIZE_THRESHOLD ? /*#__PURE__*/_jsx(VirtualList, {
+            data: items,
+            keyExtractor: keyExtractor,
+            renderItem: renderItem,
+            itemHeight: MENU_ROW_MIN_HEIGHT
+          }) : /*#__PURE__*/_jsx(ScrollView, {
+            bounces: false,
+            children: items.map((item, index) => /*#__PURE__*/_jsx(MenuRow, {
+              item: item,
+              index: index,
+              tabIndex: focusItemProps(index, activeIndex).tabIndex,
+              theme: theme,
+              onSelect: selectItem,
+              testID: testID
+            }, `${item.label}-${index}`))
+          })
         })
       })
     })]
   }) : null;
-  const menu = Platform.OS === "web" && portalContainer != null ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
-    style: StyleSheet.absoluteFill,
-    pointerEvents: "box-none",
+  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

@@ -12,10 +12,10 @@
  * import it directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 /** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-
 /** Row height is a direct `minHeight`, not a `hitSlop` expansion — a list row is already its own
  *  full-width touch target, the same choice `Select`'s option rows make (`SELECT_ROW_MIN_HEIGHT`). */
 export const MENU_ROW_MIN_HEIGHT = MIN_TOUCH_TARGET;
@@ -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/menu/MenuProps.js

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

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

@@ -1,12 +1,12 @@
-# message-bubble/
+# message-bubble/ — a single chat bubble, user or assistant
 
-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
 
 **No motion at all — this component animates nothing, on any tier.** It is a list cell (`core/motion/
 MODULE.md` rule 5: no per-row motion that runs during scroll), so it renders its final state on its
-first frame, exactly like `ListItem`.
+first frame.
 
 It used to play a decorative-gated `opacity` + `translateY` enter, guarded by an `entered` ref so it
 ran "at most once per mount". That property was true and beside the point: `FlatList` unmounts and
@@ -36,3 +36,7 @@ mean a new prop — not added speculatively.
 | `content` | `string` | — |
 | `style` | `LayoutStyle` | — |
 | `testID` | `string` | — |
+
+The assistant bubble carries no hairline — `bg.surface` alone separates it from its parent by tone,
+matching `Card`'s borderless-flat precedent. Both variants use `radii.lg` with
+`borderCurve: continuous`, and a `radii.sm` notch on the corner nearest the sender.

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/message-bubble/MessageBubbleProps.js

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