pixelize-native-library 1.2.1 → 1.3.0

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

@@ -14,6 +14,7 @@ persistent title/children dialog, centered) and imports nothing from it.
 | `index.ts` | Public surface: `Drawer`, `DrawerProps`. |
 | `__tests__/Drawer.test.ts` | Pure: reduced-motion contract, bottom-inset fallback, panel/grabber colour resolution (all brands × modes). |
 | `__tests__/Drawer.render.test.tsx` | Render: visibility, mount-through-exit-animation, dismissal paths, modal semantics, grabber a11y, reduced motion, and the web-portal opt-in branch (mocking `renderWebPortal`). |
+| `__tests__/Drawer.dom.test.tsx` | Real DOM: modal semantics and the portal branch on react-native-web. |
 | `__tests__/Drawer.keyboard.test.tsx` | Keyboard avoidance: no listener while closed, subscribe/unsubscribe with `mounted`, the tween's duration source, and the reduce-motion snap. |
 
 ## Props
@@ -30,8 +31,8 @@ transient overlay whose position is fixed by the component, not something an app
 
 ## Animation
 
-One `Animated.Value` (`progress`, 0 → 1) drives both the panel's `translateY` (window height → `0`)
-and the backdrop's `opacity` in lockstep — why RN `<Modal>` is always given `animationType="none"`:
+One animated value (`progress`, 0 → 1, from `core/motion`'s `useAnimatedValue`) drives both the
+panel's `translateY` (window height → `0`) and the backdrop's `opacity` in lockstep — why RN `<Modal>` is always given `animationType="none"`:
 RN's native transition is one discrete enum for the whole surface and can't also fade a
 separately-Animated backdrop in step with a custom slide.
 
@@ -40,8 +41,8 @@ an instant snap, never a frozen half-slid frame.
 
 **Exit-animation lifecycle.** RN's `<Modal>` only hides children once native dismissal completes or
 the component unmounts, so Drawer keeps its own `mounted` state distinct from `visible`: on close the
-exit animation starts immediately and a `setTimeout` (matching `duration`, not the `Animated.timing`
-callback, which rides `requestAnimationFrame` and won't resolve deterministically under fake timers)
+exit animation starts immediately and a `setTimeout` (matching `duration`, not the animation's own
+completion callback, which won't resolve deterministically under fake timers)
 unmounts the `<Modal>` once finished — same idiom as `Toast.tsx`'s `hide()`.
 
 ## Keyboard avoidance
@@ -60,18 +61,13 @@ closed, the effect seeds the height from `Keyboard.metrics()` when it re-subscri
 web, since react-native-web's `Keyboard` stub doesn't implement `metrics()` (unlike the other
 `Keyboard` calls here, which it stubs as no-ops).
 
-**Reduce motion (WCAG 2.3.3) applies here too.** This is the library's one raw `Animated.timing`
-(`paddingBottom` can't run on the native driver, so it can't go through `useMotion().timing`), which
-means the gate has to be applied by hand: `!motion.enabled` snaps with `setValue`, and the fallback
-duration is `motion.duration("normal")` — never a hardcoded literal. The file's eslint override
-drops the `Animated.timing` restriction wholesale, so nothing else catches a regression here;
-`__tests__/Drawer.keyboard.test.tsx` does.
+**Reduce motion (WCAG 2.3.3) applies here too.** Keyboard padding uses **`runTiming`** on a
+`useAnimatedValue` (layout-driven, not `useMotion().timing`), with `!motion.enabled`
+snapping via `.value` and event duration falling back to `motion.duration("normal")` — never a
+hardcoded literal. `__tests__/Drawer.keyboard.test.tsx` pins both halves.
 
-**Invariant:** that padding lives on its own inner `Animated.View`, never the panel's transform
-node — RN's native driver claims a node the instant any animated prop on it starts with
-`useNativeDriver: true` (the panel's `translateY`); a JS-driven prop (`paddingBottom`) on that same
-node then throws "Attempting to run JS driven animation on animated node that has been moved to
-'native'" on the next keyboard toggle.
+**Invariant:** that padding lives on its own inner animated `View`, never the panel's transform
+node, so the layout-driven padding and the panel's slide never contend for the same node.
 
 ## Web portal mechanism (opt-in)
 
@@ -124,13 +120,7 @@ still correct.
 
 ## Performance
 
-Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Only renders host primitives (`Pressable`/`View`/`Animated.View`/RN's own `Modal`) — no library child component receives a derived callback/array, so no `useCallback`/`useMemo` was needed.
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Only renders host primitives (`Pressable`/`View`/`Reanimated.View`/RN's own `Modal`) — no library child component receives a derived callback/array, so no `useCallback`/`useMemo` was needed.
 
-## 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.
-
-- **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` wrapper around the handle/children (entrance-only, no exit — purely redundant with `progress`, which already drives panel+backdrop together). `DRAWER_BACKDROP`'s opacity now comes from the shared `MOTION_TRANSFORM.scrimOpacity`.
+`DRAWER_BACKDROP`'s opacity comes from the shared `MOTION_TRANSFORM.scrimOpacity`; the handle and
+children carry no entrance animation of their own — `progress` already drives panel and backdrop together.

package/lib/module/modules/empty-state/EmptyState.js

@@ -18,7 +18,7 @@
 
 import { memo, useMemo } from "react";
 import { View } from "react-native";
-import Reanimated, { FadeInDown, FadeOut, ReduceMotion } from "react-native-reanimated";
+import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -53,6 +53,7 @@ export const EmptyState = /*#__PURE__*/memo(function EmptyState({
     testID: testID,
     entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
     exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
     style: rootStyle,
     children: [icon !== undefined && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-icon`,

package/lib/module/modules/empty-state/EmptyStateProps.js

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

package/lib/module/modules/empty-state/MODULE.md

@@ -19,7 +19,7 @@ identity, same reasoning `Divider`/`Avatar` give for theirs.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `icon` | `IconName` | — | A NAME from the closed 22-name catalogue, never a `ReactNode`. Decorative — hidden from assistive tech. |
+| `icon` | `IconName` | — | A NAME from the closed `core/icon` catalogue, never a `ReactNode`. Decorative — hidden from assistive tech. |
 | `title` | `string` | — | Required. Rendered bold, `fg.default`, centred. |
 | `description` | `string` | — | Optional. Rendered `fg.muted`, centred, below the title. |
 | `action` | `{ label: string; onPress: () => void }` | — | Optional. Rendered via this library's own `Button` (`tone="accent" variant="solid"`) — a justified composition, same reasoning `AlertDialog` documents for its own footer buttons. |
@@ -66,8 +66,9 @@ composition and `Select`'s reuse of stable siblings.
   (same reasoning `Divider.test.ts` documents for its own decorative colour). Its ≥ 3:1 floor
   against `bg.canvas` is still measured anyway, so a future edit can't silently regress it to
   something illegible for sighted users.
-- **2.3.3 (reduced motion)** — N/A. `EmptyState` has no animation of its own; the composed
-  `Button` handles its own press-fade suppression.
+- **2.3.3 (reduced motion)** — the root is a `Reanimated.View` with `FadeInDown` entering, `FadeOut`
+  exiting and a `LinearTransition` layout, each `.reduceMotion(ReduceMotion.System)`, so the OS
+  setting collapses them. The composed `Button` handles its own press-fade suppression.
 - **Touch target (2.5.x)** — N/A for `EmptyState` itself (not interactive); the composed `Button`
   meets its own 44dp floor.
 
@@ -89,9 +90,3 @@ None — no new icon, no new theme token, no new core helper needed for this com
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Its one library child, `Button`, receives `action.label`/`action.onPress` straight from the consumer's own `action` object, not a freshly-derived closure — nothing to memoize.
-
-## 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.

package/lib/module/modules/fab/Fab.js

@@ -31,11 +31,6 @@ import { elevation as elevationTokens } from "../../theme/tokens/primitives/inde
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { fabCircleStructure, fabExtendedStructure, fabOverlayColor, FAB_SIZES, resolveFabAccessibility, resolveFabAnchorStyle, resolveFabBottomInset, resolveFabFocusRingStyle, resolveFabHorizontalInset, resolveFabTone } from "./Fab.variants.js";
-
-/** A Fab with a visible text label — the EXTENDED variant (a pill, icon + text). */
-
-/** An icon-only Fab. No visible text, so `accessibilityLabel` is REQUIRED at the type level — the
- *  same trap `Button`'s icon-only shape closes. `label?: never` keeps the two shapes exclusive. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const ICON_STROKE = 2;
@@ -125,8 +120,9 @@ function FabImpl(props) {
     strokeWidth: ICON_STROKE
   });
   return /*#__PURE__*/_jsx(View, {
-    style: [anchor, style],
-    pointerEvents: "box-none",
+    style: [anchor, style, {
+      pointerEvents: "box-none"
+    }],
     children: /*#__PURE__*/_jsxs(AnimatedPressable, {
       testID: testID,
       accessibilityRole: a11y.accessibilityRole,
@@ -157,16 +153,18 @@ function FabImpl(props) {
       children: [/*#__PURE__*/_jsx(AccentGradientFill, {
         color: toneColors.fill
       }), /*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
         style: [StyleSheet.absoluteFill, {
           backgroundColor: overlayColor,
           borderRadius: theme.radii.full,
           borderCurve: "continuous"
-        }, press.overlayStyle]
+        }, press.overlayStyle, {
+          pointerEvents: "none"
+        }]
       }), focused && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: testID ? `${testID}-focus-ring` : undefined,
-        style: focusRingStyle
+        style: [focusRingStyle, {
+          pointerEvents: "none"
+        }]
       }), content, extended && /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {

package/lib/module/modules/fab/Fab.variants.js

@@ -22,10 +22,16 @@
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM } from "../../core/motion/index.js";
 import { createThemedVariants } from "../../core/style/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
+export { MIN_TOUCH_TARGET };
+
 /** Both sizes already clear this floor directly (48dp / 56dp) — no `hitSlop` needed, unlike Button's
  *  shorter sizes (WCAG 2.5.5 AAA / Apple HIG minimum). */
-export const MIN_TOUCH_TARGET = 44;
+
 export const FAB_SIZES = {
   md: {
     diameter: 48,
@@ -227,8 +233,8 @@ export function resolveFabGroupActionWindow(index, count, staggered) {
 
 /** The focus ring sits a small gap OUTSIDE the control, on the canvas, because `border.focus` is the
  *  role token proven ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over a solid fill it could fail. */
-export const FAB_FOCUS_RING_WIDTH = 2;
-export const FAB_FOCUS_RING_GAP = 2;
+export const FAB_FOCUS_RING_WIDTH = FOCUS_RING_WIDTH;
+export const FAB_FOCUS_RING_GAP = FOCUS_RING_GAP;
 /** The offset ring `Fab` and `FabGroup`'s trigger both draw on focus — one definition, since the two
  *  are the same circular silhouette. Kept a pure function of the two role/scale values it needs, so
  *  the ring geometry is unit-testable without rendering React Native. */
@@ -248,7 +254,7 @@ export function resolveFabFocusRingStyle(borderColor, borderRadius) {
 
 /** The dismiss scrim behind an expanded FabGroup — a design constant, not a role token: decorative,
  *  same status `BACKDROP_SCRIM` (Menu/Select) and `DRAWER_BACKDROP` already have. */
-export const FAB_GROUP_SCRIM = "#00000080";
+export const FAB_GROUP_SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 
 /** Structural circle — the icon-only shape. Colour (fill) is tone-driven, applied inline over this. */
 export const fabCircleStructure = createThemedVariants(theme => ({

package/lib/module/modules/fab/FabGroup.js

@@ -30,11 +30,13 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import Reanimated from "react-native-reanimated";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { useReducedMotion } from "../../core/a11y/index.js";
 import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
 import { usePressState } from "../../core/motion/usePressState.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -73,22 +75,13 @@ function FabGroupActionRowImpl({
   const colors = resolveFabTone(theme.colors, action.tone ?? fallbackTone);
   const handlePress = useCallback(() => onSelect(action), [onSelect, action]);
   const [start, end] = window;
-  const revealOpacity = useMemo(() => progress.interpolate({
-    inputRange: [start, end],
-    outputRange: [0, 1],
-    extrapolate: "clamp"
-  }), [progress, start, end]);
-  const translateY = useMemo(() => progress.interpolate({
-    inputRange: [start, end],
-    outputRange: [motion.transform.offsetY, 0],
-    extrapolate: "clamp"
-  }), [progress, start, end, motion.transform.offsetY]);
-  const revealStyle = useMemo(() => ({
-    opacity: revealOpacity,
+  const offsetY = motion.transform.offsetY;
+  const revealStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(progress.value, [start, end], [0, 1], "clamp"),
     transform: [{
-      translateY
+      translateY: interpolate(progress.value, [start, end], [offsetY, 0], "clamp")
     }]
-  }), [revealOpacity, translateY]);
+  }));
   const androidRipple = useMemo(() => {
     if (Platform.OS !== "android") return undefined;
     return {
@@ -96,9 +89,7 @@ function FabGroupActionRowImpl({
       borderless: false
     };
   }, [theme.mode]);
-
-  // Reveal (classic Animated) nests press feedback (Reanimated `usePressState`) — fades compose.
-  return /*#__PURE__*/_jsx(Animated.View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     style: revealStyle,
     children: /*#__PURE__*/_jsxs(AnimatedPressable, {
       testID: testID,
@@ -155,6 +146,8 @@ function FabGroupImpl({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const [internalOpen, setInternalOpen] = useState(false);
   const isControlled = open !== undefined;
   const expanded = isControlled ? open : internalOpen;
@@ -180,7 +173,7 @@ function FabGroupImpl({
     if (expanded) {
       setMounted(true);
       if (!motion.enabled || duration === 0) {
-        progress.setValue(1);
+        progress.value = 1;
         return;
       }
       running.current = motion.timing(progress, 1, {
@@ -191,7 +184,7 @@ function FabGroupImpl({
     }
     if (!mountedRef.current) return;
     if (!motion.enabled || duration === 0) {
-      progress.setValue(0);
+      progress.value = 0;
       setMounted(false);
       return;
     }
@@ -210,9 +203,10 @@ function FabGroupImpl({
     if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
   }, []);
   const requestExpandedChange = useCallback(next => {
+    if (next && !expanded && !reducedMotion) haptics.impact("light");
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
-  }, [isControlled, onOpenChange]);
+  }, [isControlled, onOpenChange, expanded, reducedMotion, haptics]);
   const toggle = useCallback(() => {
     if (disabled) return;
     requestExpandedChange(!expanded);
@@ -246,10 +240,14 @@ function FabGroupImpl({
   });
   const actionDirection = resolveFabGroupActionDirection(position);
   const stackAlign = resolveFabGroupStackAlign(position);
-  const rotate = useMemo(() => progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "45deg"]
-  }), [progress]);
+  const rotateStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${interpolate(progress.value, [0, 1], [0, 45])}deg`
+    }]
+  }));
+  const scrimStyle = useAnimatedStyle(() => ({
+    opacity: progress.value
+  }));
   const triggerPress = usePressState(disabled);
   const triggerOverlayColor = fabOverlayColor(triggerColors.onFill);
   const triggerRipple = useMemo(() => {
@@ -277,17 +275,19 @@ function FabGroupImpl({
       tabIndex: -1,
       style: StyleSheet.absoluteFill,
       onPress: closeGroup,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
         style: [StyleSheet.absoluteFill, {
-          backgroundColor: FAB_GROUP_SCRIM,
-          opacity: progress
+          backgroundColor: FAB_GROUP_SCRIM
+        }, scrimStyle, {
+          pointerEvents: 'none'
         }]
       })
     }), /*#__PURE__*/_jsxs(View, {
       ref: anchorRef,
       testID: testID ? `${testID}-anchor` : undefined,
-      style: [anchor, styles.anchorFlow, style]
+      style: [anchor, styles.anchorFlow, style, {
+        pointerEvents: "box-none"
+      }]
       // Modal exactly while the scrim is mounted, and on the anchor rather than the action stack
       // so the trigger — the close affordance — stays inside the modal view with the actions.
       // Both spellings: RN's View has no `aria-modal`, react-native-web has no
@@ -296,7 +296,6 @@ function FabGroupImpl({
       accessibilityViewIsModal: mounted,
       "aria-modal": mounted,
       onAccessibilityEscape: mounted ? closeGroup : undefined,
-      pointerEvents: "box-none",
       children: [/*#__PURE__*/_jsxs(AnimatedPressable, {
         testID: testID ? `${testID}-trigger` : undefined,
         accessibilityRole: a11y.accessibilityRole,
@@ -317,22 +316,20 @@ function FabGroupImpl({
           backgroundColor: triggerColors.fill
         }, triggerPress.animatedStyle, disabled && styles.dimmed, theme.elevation.lg],
         children: [/*#__PURE__*/_jsx(Reanimated.View, {
-          pointerEvents: "none",
           style: [StyleSheet.absoluteFill, {
             backgroundColor: triggerOverlayColor,
             borderRadius: theme.radii.full,
             borderCurve: "continuous"
-          }, triggerPress.overlayStyle]
+          }, triggerPress.overlayStyle, {
+            pointerEvents: "none"
+          }]
         }), focused && /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
           testID: testID ? `${testID}-trigger-focus-ring` : undefined,
-          style: focusRingStyle
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: {
-            transform: [{
-              rotate
-            }]
-          },
+          style: [focusRingStyle, {
+            pointerEvents: 'none'
+          }]
+        }), /*#__PURE__*/_jsx(Reanimated.View, {
+          style: rotateStyle,
           children: /*#__PURE__*/_jsx(Icon, {
             name: icon,
             size: spec.iconSize,

package/lib/module/modules/fab/FabGroupProps.js

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

package/lib/module/modules/fab/FabProps.js

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

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

@@ -126,8 +126,7 @@ its trigger is not a tooltip target.
 ## Known gaps
 
 - **Fab's own focus ring can be clipped by its `overflow: "hidden"`** — the ring is drawn with
-  negative offsets outside the control's own bounds, and the Pressable clips to its own rect. Found
-  in the Round 5 Android-parity pass, not fixed here (unrelated to that pass's scope). FabGroup's
+  negative offsets outside the control's own bounds, and the Pressable clips to its own rect. FabGroup's
   trigger avoids this: it carries no `overflow: "hidden"`, since its overlay self-clips via its own
   `borderRadius`.
 - **No safe-area inset awareness** beyond the static iOS home-indicator approximation (see pattern
@@ -154,22 +153,22 @@ its trigger is not a tooltip target.
 
 ## Motion
 
-Nothing in this module owns a duration, easing or `Animated.timing` config — all of it comes from
+Nothing in this module owns a duration, easing or timing config — all of it comes from
 `useMotion()` / `usePressMotion()` in `core/motion`, so retuning `core/motion/config.ts` retunes the
 Fab too. Everything animates `opacity`/`transform` only, always on the native driver.
 
 - **Press feedback** — Fab, the FabGroup trigger, and each action row all use `usePressState`
   (`core/motion/usePressState`), the same width-aware scale + state-layer overlay + spring settle
-  every other pressable in this library uses (Round 5 press-feedback unification).
+  every other pressable in this library uses.
 - **FabGroup expand/collapse** — one classic `progress` value; the trigger glyph rotates 0→45°, the
   scrim fades, and each action row reveals over its own slice of that same value.
 - **The action stagger is decorative** (`motion.decorative`, high tier only). It is expressed as a
   per-row interpolation *window* (`resolveFabGroupActionWindow`), not per-row animations: no extra
   timers or `Animated.Value`s, and it reverses correctly on close. On low/mid tier every row shares
   the full `[0, 1]` window and the rows reveal together.
-- **Action rows nest two animation systems**: an outer classic-`Animated.View` reveal (opacity +
-  translateY, tied to `progress`) wraps the inner `usePressState`-driven `AnimatedPressable` — the
-  two fades compose by nesting instead of `Animated.multiply`.
+- **Action rows nest two animations**: an outer `Reanimated.View` reveal (opacity + translateY, tied
+  to `progress`) wraps the inner `usePressState`-driven `AnimatedPressable` — the two fades compose
+  by nesting rather than being multiplied into one value.
 - In-flight animations are stopped on effect cleanup and on unmount.
 
 ## Performance
@@ -181,14 +180,8 @@ every parent render. The reversed row list is `useMemo`'d. The action stack and
 while `mounted` (never while the trigger alone is on screen), matching Menu/Select/Drawer's
 identical "sheet content built only while open" convention.
 
-## Modernization (v1.0.7)
+## Android
 
-- 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 (Android parity + press unification)** — Fab, the trigger, and action rows switched from
-  hand-rolled classic-`Animated` press timing to the shared `usePressState`; `android_ripple` added
-  everywhere it was missing (`borderless: true` on the two circular icon-only targets, `false`
-  elsewhere); the trigger gained a press-state overlay matching Fab's own.
+`android_ripple` on every pressable target: `borderless: true` on the two circular icon-only
+controls (Fab, the trigger), `false` elsewhere. FabGroup's dismiss scrim uses
+`MOTION_TRANSFORM.scrimOpacity`.

package/lib/module/modules/field-select-modal/FieldSelectModal.js

@@ -0,0 +1,52 @@
+"use strict";
+
+import { memo, useCallback } from "react";
+import { View } from "react-native";
+import { Checkbox } from "../checkbox/index.js";
+import { ListItem } from "../list-item/index.js";
+import { Modal } from "../modal/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FieldSelectModal = /*#__PURE__*/memo(function FieldSelectModal({
+  visible,
+  onRequestClose,
+  title,
+  options,
+  selectedIds,
+  onChange,
+  multiple = true,
+  style,
+  testID
+}) {
+  const toggle = useCallback(id => {
+    if (!multiple) {
+      onChange([id]);
+      onRequestClose();
+      return;
+    }
+    const set = new Set(selectedIds);
+    if (set.has(id)) set.delete(id);else set.add(id);
+    onChange([...set]);
+  }, [multiple, onChange, onRequestClose, selectedIds]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    onRequestClose: onRequestClose,
+    title: title,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(View, {
+      style: style,
+      children: options.map(option => {
+        const checked = selectedIds.includes(option.id);
+        return /*#__PURE__*/_jsx(ListItem, {
+          title: option.label,
+          onPress: () => toggle(option.id),
+          leading: multiple ? /*#__PURE__*/_jsx(Checkbox, {
+            checked: checked,
+            onCheckedChange: () => toggle(option.id),
+            accessibilityLabel: option.label
+          }) : undefined
+        }, option.id);
+      })
+    })
+  });
+});
+//# sourceMappingURL=FieldSelectModal.js.map

package/lib/module/modules/field-select-modal/FieldSelectModalProps.js

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

package/lib/module/modules/field-select-modal/MODULE.md

@@ -0,0 +1,13 @@
+# field-select-modal/ — a column and field visibility picker in a Modal
+
+A list of `ListItem` rows inside this library's own `Modal`. `multiple` (default `true`) gives each
+row a leading `Checkbox` and toggles ids in place; `multiple={false}` drops the checkbox, replaces
+the selection with the tapped id and closes the modal.
+
+## Props
+
+`visible`, `onRequestClose`, `title`, `options: readonly FieldSelectOption[]` (`{ id, label }`),
+`selectedIds: readonly string[]`, `onChange(selectedIds)` — all required — plus `multiple?` (`true`),
+`style?: LayoutStyle` (on the rows' wrapper `View`, not the modal) and `testID?`.
+
+Exported from the package root as `FieldSelectModal` / `FieldSelectModalProps` / `FieldSelectOption`.

package/lib/module/modules/field-select-modal/index.js

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

package/lib/module/modules/file-grid/FileGrid.js

@@ -134,8 +134,9 @@ const FileGridCell = /*#__PURE__*/memo(function FileGridCell({
     } : undefined,
     style: pressableStyle,
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), content]
   });
 });

package/lib/module/modules/file-grid/FileGridProps.js

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

package/lib/module/modules/file-grid/MODULE.md

@@ -1,14 +1,37 @@
-# file-grid/
+# file-grid/ — a 2/3/4-column grid of file and folder cells
 
 Grid of file/folder cells with icon + label. `columns`: 2 | 3 | 4. Cells are a tonal `bg.raised`
 fill, no hairline border — the same borderless-tile treatment `Card`'s `elevated` variant uses.
 
+## Files
+
+| File | Role |
+|------|------|
+| `FileGrid.tsx` | The component. |
+| `FileGrid.variants.ts` | `FileGridColumns` + the pure resolvers (`resolveFileGridItemLabel`, cell structure). |
+| `index.ts` | Public surface: `FileGrid`, `FileGridProps`, `FileGridItem`, `FileGridColumns`. |
+| `__tests__/FileGrid.test.ts` | Pure: a placeholder suite — the resolvers are not actually asserted yet. |
+| `__tests__/FileGrid.render.test.tsx` | Render: cells, press wiring, the read-only cell's name. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `items` | `readonly FileGridItem[]` | — | Required. `{ id, label, icon?: IconName, typeLabel? }`. |
+| `columns` | `2 \| 3 \| 4` | `3` | |
+| `onItemPress` | `(id: string) => void` | — | Absent = read-only cells, not `Pressable`. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | |
+
 ## Accessibility contract (WCAG)
 
 - **1.3.1** — file **type** (folder vs. image vs. document) is conveyed only by the icon glyph, and a
   glyph has no text equivalent. `FileGridItem.typeLabel` (optional) supplies it; a cell's accessible
   name is `resolveFileGridItemLabel(label, typeLabel)` → `"<label>, <typeLabel>"`, falling back to
   `label` alone when the consumer names no type. Applies to both a pressable cell
-  (`accessibilityLabel`) and a read-only one (wrapped `accessible` + `accessibilityLabel`, which it
-  did not carry at all before).
-- **Press feedback** — cells with `onPress` use `usePressState` (scale + state-layer overlay).
+  (`accessibilityLabel`) and a read-only one (a `View` with `accessible` + `accessibilityLabel`).
+- **Press feedback** — cells take `usePressState` (scale + state-layer overlay), inert while
+  `onItemPress` is absent.
+
+Rows are chunked to a fixed height and rendered through `core/list`'s `VirtualList`, so a long
+folder listing windows instead of mounting every cell.