pixelize-native-library 1.0.6 → 1.2.0

package/lib/module/index.js

@@ -7,7 +7,75 @@
  * only via their subpath — so a lazy barrel import cannot drag a chart engine into an app's
  * bundle, even with every optimizer turned off.
  *
- * Generated re-exports land below; do not add heavy modules by hand.
+ * GENERATED by scripts/gen-index.mjs — do not hand-edit below this comment; run `npm run gen` to
+ * regenerate (CI runs `npm run gen:check` as the drift gate). Adding a light module here is
+ * automatic the next time `npm run gen` runs against its src/modules/<name>/index.ts; nothing here
+ * is ever added "by hand".
  */
-export {};
+
+export { Accordion } from "./modules/accordion/index.js";
+export { AlertDialog } from "./modules/alert-dialog/index.js";
+export { AppBar } from "./modules/app-bar/index.js";
+export { Avatar } from "./modules/avatar/index.js";
+export { AvatarGroup } from "./modules/avatar-group/index.js";
+export { Badge } from "./modules/badge/index.js";
+export { Banner } from "./modules/banner/index.js";
+export { BottomNav } from "./modules/bottom-nav/index.js";
+export { BottomSheet } from "./modules/bottom-sheet/index.js";
+export { Button } from "./modules/button/index.js";
+export { ButtonGroup } from "./modules/button-group/index.js";
+export { Card } from "./modules/card/index.js";
+export { Checkbox } from "./modules/checkbox/index.js";
+export { Chip, ChipGroup } from "./modules/chip/index.js";
+export { Combobox } from "./modules/combobox/index.js";
+export { Composer } from "./modules/composer/index.js";
+export { CopyButton } from "./modules/copy-button/index.js";
+export { Divider } from "./modules/divider/index.js";
+export { Drawer } from "./modules/drawer/index.js";
+export { EmptyState } from "./modules/empty-state/index.js";
+export { Fab, FabGroup } from "./modules/fab/index.js";
+export { FileGrid } from "./modules/file-grid/index.js";
+export { FileUpload } from "./modules/file-upload/index.js";
+export { FilterSheet, FilterChip, countActiveFilters } from "./modules/filter-sheet/index.js";
+export { FolderRow } from "./modules/folder-row/index.js";
+export { FormField } from "./modules/form-field/index.js";
+export { Input } from "./modules/input/index.js";
+export { LimitReachedModal } from "./modules/limit-reached-modal/index.js";
+export { ListItem } from "./modules/list-item/index.js";
+export { Markdown, parseMarkdown } from "./modules/markdown/index.js";
+export { Menu } from "./modules/menu/index.js";
+export { MessageBubble } from "./modules/message-bubble/index.js";
+export { Modal, ModalPortalProvider } from "./modules/modal/index.js";
+export { MoreItems } from "./modules/more-items/index.js";
+export { MultiSelect } from "./modules/multi-select/index.js";
+export { NumberInput } from "./modules/number-input/index.js";
+export { OrgSwitcher } from "./modules/org-switcher/index.js";
+export { Pagination, buildPageRange, clampPage } from "./modules/pagination/index.js";
+export { PinInput } from "./modules/pin-input/index.js";
+export { ProgressBar } from "./modules/progress-bar/index.js";
+export { RadioGroup } from "./modules/radio-group/index.js";
+export { Reorder } from "./modules/reorder/index.js";
+export { Screen } from "./modules/screen/index.js";
+export { SearchBar } from "./modules/search-bar/index.js";
+export { Section } from "./modules/section/index.js";
+export { SectionList } from "./modules/section-list/index.js";
+export { SegmentedControl } from "./modules/segmented-control/index.js";
+export { Select } from "./modules/select/index.js";
+export { Skeleton } from "./modules/skeleton/index.js";
+export { Slider } from "./modules/slider/index.js";
+export { Spinner } from "./modules/spinner/index.js";
+export { StageProgress } from "./modules/stage-progress/index.js";
+export { StatTile } from "./modules/stat-tile/index.js";
+export { LoadingState, ErrorState } from "./modules/state-block/index.js";
+export { Stepper } from "./modules/stepper/index.js";
+export { SwipeableRow } from "./modules/swipeable-row/index.js";
+export { Switch } from "./modules/switch/index.js";
+export { Tabs } from "./modules/tabs/index.js";
+export { Text, Heading } from "./modules/text/index.js";
+export { Textarea } from "./modules/textarea/index.js";
+export { Timeline } from "./modules/timeline/index.js";
+export { ToastProvider, useToast } from "./modules/toast/index.js";
+export { Tooltip } from "./modules/tooltip/index.js";
+export { TypingIndicator } from "./modules/typing-indicator/index.js";
+export { UnreadBadge } from "./modules/unread-badge/index.js";
 //# sourceMappingURL=index.js.map

package/lib/module/modules/accordion/Accordion.js

@@ -2,43 +2,38 @@
 
 /**
  * Accordion — a stack of collapsible sections. `type="single"` (default) keeps at most one section
- * open at a time (opening one closes whichever else was open; pressing the open section's own
- * header closes it too — a single-select disclosure list, not a one-way reveal); `type="multiple"`
- * lets every section toggle independently.
+ * open at a time; `type="multiple"` lets every section toggle independently.
  *
- * Each header is a `Pressable` disclosure control (`accessibilityRole="button"`,
- * `accessibilityState={{ expanded }}`) with a "chevron-down" glyph that rotates 180° open, animated
- * with a single `Animated.Value` exactly like `Tabs`' indicator: under reduced motion (WCAG 2.3.3)
- * the value is snapped with `setValue` instead of tweened with `Animated.timing`, so a duration-0
- * `Animated.timing` can never sneak an intermediate frame through.
- *
- * Content is CONDITIONALLY RENDERED (mounted only while expanded), not height-animated. React
- * Native has no native height transition without a measure-then-animate hack (measure the content
- * once mounted, then tween a `height`/`Animated.Value` from 0 to the measured value) — that hack is
- * fragile (a wrong first measurement, a content resize, and the animation targets a stale height)
- * and untestable in this repo's jsdom-less test renderer, which never runs real layout. A conditional
- * mount is a real instant "snap" open/close, so it also satisfies the reduced-motion requirement for
- * free — there is no tween to gate for that case at all.
+ * Content is conditionally mounted while expanded. Prefer `renderContent` over eager `content` so
+ * collapsed sections never build heavy subtrees.
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { useThemedStyles } from "../../core/style/index.js";
+import { VirtualList } from "../../core/list/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Badge } from "../badge/index.js";
 import { ACCORDION_SIZES, accordionContentStructure, accordionHeaderStructure, accordionItemStructure, resolveAccordionColors, resolveAccordionHeaderAccessibility } from "./Accordion.variants.js";
-
-/** At most one section open at a time. The default shape — `type` may be omitted. */
-
-/** Every section toggles independently. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VIRTUALIZE_THRESHOLD = 20;
 const ICON_STROKE = 2;
-const ROTATE_MS = 200;
-// The focus ring sits a small gap OUTSIDE the header, on the canvas, because `border.focus` is the
-// role token proven ≥ 3:1 against the canvas (WCAG 2.4.11) — same idiom as Button/Checkbox/Input.
 const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_GAP = 2;
 const toArray = v => v === undefined ? [] : Array.isArray(v) ? v : [v];
+let reanimatedModule;
+function getReanimated() {
+  if (reanimatedModule !== undefined) return reanimatedModule;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    reanimatedModule = require("react-native-reanimated");
+  } catch {
+    reanimatedModule = null;
+  }
+  return reanimatedModule;
+}
 export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
   const {
     items,
@@ -54,17 +49,16 @@ export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(() => toArray(props.defaultValue));
   const isControlled = props.value !== undefined;
   const openValues = isControlled ? toArray(props.value) : uncontrolledOpen;
+  const onValueChangeSingle = props.onValueChange;
+  const onValueChangeMultiple = props.onValueChange;
   const emitChange = useCallback(next => {
     if (!isControlled) setUncontrolledOpen(next);
     if (multiple) {
-      props.onValueChange?.(next);
+      onValueChangeMultiple?.(next);
     } else {
-      props.onValueChange?.(next[0] ?? "");
+      onValueChangeSingle?.(next[0] ?? "");
     }
-  }, [isControlled, multiple, props]);
-
-  // Stable across renders (no per-item closure) so `AccordionRow`'s memo isn't defeated — the row
-  // calls back with its own `item.value` rather than the parent binding one arrow per item.
+  }, [isControlled, multiple, onValueChangeSingle, onValueChangeMultiple]);
   const toggle = useCallback(itemValue => {
     if (disabled) return;
     const isOpen = openValues.includes(itemValue);
@@ -74,13 +68,38 @@ export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
       emitChange(isOpen ? [] : [itemValue]);
     }
   }, [disabled, multiple, openValues, emitChange]);
+  const renderRow = useCallback(({
+    item
+  }) => /*#__PURE__*/_jsx(AccordionRow, {
+    item: item,
+    expanded: openValues.includes(item.value),
+    rowDisabled: disabled || item.disabled === true,
+    size: size,
+    theme: theme,
+    colors: colors,
+    onToggle: toggle,
+    testID: testID ? `${testID}-${item.value}` : undefined
+  }), [openValues, disabled, size, theme, colors, toggle, testID]);
+  const keyExtractor = useCallback(item => item.value, []);
+  if (items.length >= VIRTUALIZE_THRESHOLD) {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: style,
+      children: /*#__PURE__*/_jsx(VirtualList, {
+        data: items,
+        renderItem: renderRow,
+        keyExtractor: keyExtractor,
+        itemHeight: ACCORDION_SIZES[size].headerMinHeight + 1
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     style: style,
     children: items.map(item => /*#__PURE__*/_jsx(AccordionRow, {
       item: item,
       expanded: openValues.includes(item.value),
-      disabled: disabled,
+      rowDisabled: disabled || item.disabled === true,
       size: size,
       theme: theme,
       colors: colors,
@@ -92,36 +111,29 @@ export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
 const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
   item,
   expanded,
-  disabled,
+  rowDisabled,
   size,
   theme,
   colors,
   onToggle,
   testID
 }) {
-  const reducedMotion = useReducedMotion();
   const spec = ACCORDION_SIZES[size];
-  const rotation = useRef(new Animated.Value(expanded ? 1 : 0)).current;
   const [focused, setFocused] = useState(false);
-  const a11y = resolveAccordionHeaderAccessibility({
+  const a11y = useMemo(() => resolveAccordionHeaderAccessibility({
     expanded,
-    disabled
-  });
-  useEffect(() => {
-    if (reducedMotion) {
-      rotation.setValue(expanded ? 1 : 0);
-      return;
-    }
-    Animated.timing(rotation, {
-      toValue: expanded ? 1 : 0,
-      duration: ROTATE_MS,
-      useNativeDriver: true
-    }).start();
-  }, [expanded, reducedMotion, rotation]);
-  const rotateDeg = rotation.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "180deg"]
-  });
+    disabled: rowDisabled
+  }), [expanded, rowDisabled]);
+  const handlePress = useCallback(() => onToggle(item.value), [onToggle, item.value]);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const headerPressedStyle = useThemedStyles(t => accordionHeaderStructure(t, {
+    size
+  }), theme, [size]);
+  const contentStyle = useThemedStyles(t => accordionContentStructure(t, {
+    size
+  }), theme, [size]);
+  const itemBody = item.renderContent?.() ?? item.content;
   return /*#__PURE__*/_jsxs(View, {
     style: [accordionItemStructure(theme), {
       borderBottomColor: colors.divider
@@ -129,39 +141,50 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
     children: [/*#__PURE__*/_jsxs(Pressable, {
       testID: testID,
       accessibilityRole: a11y.accessibilityRole,
-      accessibilityState: a11y.accessibilityState,
-      accessibilityLabel: item.title,
+      "aria-expanded": a11y["aria-expanded"],
+      "aria-disabled": a11y["aria-disabled"],
+      accessibilityLabel: item.subtitle ? `${item.title}, ${item.subtitle}` : item.title,
       disabled: a11y.disabled,
-      onPress: a11y.disabled ? undefined : () => onToggle(item.value),
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
+      onPress: a11y.disabled ? undefined : handlePress,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
       hitSlop: spec.hitSlop,
       style: ({
         pressed
-      }) => [accordionHeaderStructure(theme, {
-        size
-      }), pressed && !disabled && {
+      }) => [headerPressedStyle, pressed && !rowDisabled && {
         backgroundColor: colors.pressedHeaderBg
-      }, disabled && styles.dimmed],
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-          flex: 1,
-          fontSize: spec.fontSize,
-          color: colors.title
-        }],
-        children: item.title
-      }), /*#__PURE__*/_jsx(Animated.View, {
-        style: {
-          transform: [{
-            rotate: rotateDeg
-          }]
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          name: "chevron-down",
-          size: spec.iconSize,
-          color: colors.icon,
-          strokeWidth: ICON_STROKE
-        })
+      }, rowDisabled && styles.dimmed],
+      children: [item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+        name: item.icon,
+        size: spec.iconSize,
+        color: colors.icon,
+        strokeWidth: ICON_STROKE
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.headerText,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+            fontSize: spec.fontSize,
+            color: colors.title
+          }],
+          children: item.title
+        }), item.subtitle !== undefined && /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+            fontSize: theme.fontSizes.sm,
+            color: colors.icon,
+            marginTop: theme.space[1]
+          }],
+          children: item.subtitle
+        })]
+      }), item.badge !== undefined && /*#__PURE__*/_jsx(Badge, {
+        label: item.badge,
+        size: "sm",
+        tone: "neutral"
+      }), /*#__PURE__*/_jsx(AccordionChevron, {
+        expanded: expanded,
+        disabled: rowDisabled,
+        size: size,
+        colors: colors
       }), focused && /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
         testID: testID ? `${testID}-focus-ring` : undefined,
@@ -176,19 +199,165 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
           borderRadius: theme.radii.sm + FOCUS_RING_GAP + FOCUS_RING_WIDTH
         }
       })]
-    }), expanded && /*#__PURE__*/_jsx(View, {
+    }), itemBody !== null && itemBody !== undefined && /*#__PURE__*/_jsx(AccordionAnimatedContent, {
+      expanded: expanded,
       testID: testID ? `${testID}-content` : undefined,
-      style: accordionContentStructure(theme, {
-        size
-      }),
-      children: item.content
+      style: contentStyle,
+      children: itemBody
     })]
   });
 });
+/** Opacity + translateY on the native driver — no height measure, no layout thrash. */
+const AccordionAnimatedContent = /*#__PURE__*/memo(function AccordionAnimatedContent({
+  expanded,
+  children,
+  style,
+  testID
+}) {
+  const motion = useMotion();
+  const opacity = useAnimatedValue(expanded ? 1 : 0);
+  const translateY = useAnimatedValue(0);
+  const skipEnterAnimation = useRef(expanded);
+  const running = useRef(null);
+  const offsetY = motion.transform.offsetY;
+  useEffect(() => {
+    running.current?.stop();
+    if (!expanded) {
+      // Reset while unmounted so the next expand can't paint its first frame opaque.
+      opacity.setValue(0);
+      translateY.setValue(-offsetY);
+      return undefined;
+    }
+    if (!motion.enabled || skipEnterAnimation.current) {
+      skipEnterAnimation.current = false;
+      opacity.setValue(1);
+      translateY.setValue(0);
+      return undefined;
+    }
+    opacity.setValue(0);
+    translateY.setValue(-offsetY);
+    running.current = Animated.parallel([motion.timing(opacity, 1, {
+      easing: "decelerate"
+    }), motion.timing(translateY, 0, {
+      easing: "decelerate"
+    })]);
+    running.current.start();
+    return () => running.current?.stop();
+  }, [expanded, motion, opacity, translateY, offsetY]);
+  useEffect(() => () => running.current?.stop(), []);
+
+  // Synchronous unmount, deliberately with no exit fade: `filter-sheet`'s test asserts the closed
+  // section is gone on the very next render. Never gate this on an animation.
+  if (!expanded) return null;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    testID: testID,
+    style: [style, {
+      opacity,
+      transform: [{
+        translateY
+      }]
+    }],
+    children: children
+  });
+});
+const AccordionChevron = /*#__PURE__*/memo(function AccordionChevron({
+  expanded,
+  disabled,
+  size,
+  colors
+}) {
+  const Reanimated = getReanimated();
+  if (Reanimated) {
+    return /*#__PURE__*/_jsx(AccordionChevronReanimated, {
+      expanded: expanded,
+      disabled: disabled,
+      size: size,
+      colors: colors,
+      reanimated: Reanimated
+    });
+  }
+  return /*#__PURE__*/_jsx(AccordionChevronAnimated, {
+    expanded: expanded,
+    disabled: disabled,
+    size: size,
+    colors: colors
+  });
+});
+function AccordionChevronReanimated({
+  expanded,
+  size,
+  colors,
+  reanimated
+}) {
+  const motion = useMotion();
+  const spec = ACCORDION_SIZES[size];
+  const rotation = reanimated.useSharedValue(expanded ? 1 : 0);
+  useEffect(() => {
+    rotation.value = motion.enabled ? reanimated.withTiming(expanded ? 1 : 0, {
+      duration: motion.duration("normal")
+    }) : expanded ? 1 : 0;
+  }, [expanded, motion, rotation, reanimated]);
+  const animatedStyle = reanimated.useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${rotation.value * 180}deg`
+    }]
+  }));
+  return /*#__PURE__*/_jsx(reanimated.default.View, {
+    style: animatedStyle,
+    children: /*#__PURE__*/_jsx(Icon, {
+      name: "chevron-down",
+      size: spec.iconSize,
+      color: colors.icon,
+      strokeWidth: ICON_STROKE
+    })
+  });
+}
+function AccordionChevronAnimated({
+  expanded,
+  size,
+  colors
+}) {
+  const motion = useMotion();
+  const spec = ACCORDION_SIZES[size];
+  const rotation = useAnimatedValue(expanded ? 1 : 0);
+  const running = useRef(null);
+  useEffect(() => {
+    running.current?.stop();
+    if (!motion.enabled) {
+      rotation.setValue(expanded ? 1 : 0);
+      return undefined;
+    }
+    running.current = motion.timing(rotation, expanded ? 1 : 0, {
+      easing: "standard"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [expanded, motion, rotation]);
+  useEffect(() => () => running.current?.stop(), []);
+  const chevronStyle = useMemo(() => ({
+    transform: [{
+      rotate: rotation.interpolate({
+        inputRange: [0, 1],
+        outputRange: ["0deg", "180deg"]
+      })
+    }]
+  }), [rotation]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: chevronStyle,
+    children: /*#__PURE__*/_jsx(Icon, {
+      name: "chevron-down",
+      size: spec.iconSize,
+      color: colors.icon,
+      strokeWidth: ICON_STROKE
+    })
+  });
+}
 const styles = StyleSheet.create({
-  // A disabled header is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
   dimmed: {
     opacity: 0.5
+  },
+  headerText: {
+    flex: 1
   }
 });
 //# sourceMappingURL=Accordion.js.map

package/lib/module/modules/accordion/Accordion.variants.js

@@ -70,10 +70,8 @@ export function resolveAccordionColors(colors) {
 export function resolveAccordionHeaderAccessibility(input) {
   return {
     accessibilityRole: "button",
-    accessibilityState: {
-      expanded: input.expanded,
-      disabled: input.disabled
-    },
+    "aria-expanded": input.expanded,
+    "aria-disabled": input.disabled,
     disabled: input.disabled
   };
 }

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

@@ -14,6 +14,7 @@ too. `type="multiple"` lets every section toggle independently.
 | `index.ts` | Public surface: `Accordion`, `AccordionProps`, `AccordionItem`, `AccordionSize`. |
 | `__tests__/Accordion.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
 | `__tests__/Accordion.render.test.tsx` | Render: single/multiple semantics, controlled vs uncontrolled `value`, disabled, reduced-motion chevron, focus ring. |
+| `__tests__/Accordion.motion.test.tsx` | Motion: reduce-motion snap, the real content tween, the device tier's `durationScale` reaching it, and the collapse staying a synchronous unmount. |
 
 ## Props
 
@@ -37,9 +38,10 @@ way so far, because a disclosure list's open state is commonly local UI state, n
 
 ## Accessibility contract (WCAG)
 
-- **4.1.2** — each header carries `accessibilityRole="button"` and
-  `accessibilityState={{ expanded, disabled }}`, so a screen reader announces the disclosure state
-  the visual chevron also shows.
+- **4.1.2** — each header carries `accessibilityRole="button"` and flat `aria-expanded` /
+  `aria-disabled`, so a screen reader announces the disclosure state the visual chevron also shows.
+  Flat, never `accessibilityState={{…}}`: react-native-web discards the object form — see
+  `docs/PLATFORM-A11Y-PROPS.md`.
 - **2.5.x target size** — every size reaches ≥ 44 dp: `sm`'s 40 dp header grows via `hitSlop`;
   `md`/`lg` are already ≥ 44 dp.
 - **1.4.3** — the title is `fg.default`, measured ≥ 4.5:1 against the canvas AND against its own
@@ -52,19 +54,35 @@ way so far, because a disclosure list's open state is commonly local UI state, n
 - **2.4.7 / 2.4.11** — a visible focus ring (`border.focus`) appears on keyboard/AT focus, a small
   gap outside the header on the canvas — same idiom as `Button`/`Checkbox`/`Input`/`Textarea`.
 - **2.3.3** — the chevron's 180° rotation is one `Animated.Value` driven by `expanded`. Under
-  reduced motion it is snapped with `setValue` instead of tweened with `Animated.timing` (verified
-  by spying on `Animated.timing` and asserting it is never called) — the same idiom `Tabs`' indicator
-  uses, not a `duration: 0` timing (which can still tween through intermediate frames).
+  reduced motion it is snapped with `setValue` instead of tweened (verified by spying on
+  `Animated.timing` and asserting it is never called) — the same idiom `Tabs`' indicator uses, not a
+  `duration: 0` timing (which can still tween through intermediate frames). Expanded content
+  fades/slides in on the native driver; collapse unmounts it immediately so heavy subtrees are never
+  kept in the tree — or read by a screen reader — while closed.
 
-## Why content is conditionally rendered, not height-animated
+## Motion
+
+Everything routes through **`useMotion()`** — no module-local timing constant, no raw `Easing.`
+(`ACCORDION_TIMING` and `CONTENT_EASE_IN` are gone). Both consequences are the point: the content
+reveal and the chevron now pick up the device tier's `durationScale` and the global `MOTION_SCALE` /
+`MOTION_ENABLED` switches, which a module-scope read of `MOTION_DURATION.normal` never could. The
+slide distance is `MOTION_TRANSFORM.offsetY`; reduce-motion is `motion.enabled`, never a second
+`useReducedMotion()` call (`core/motion/MODULE.md` rule 6).
+
+## Why content is not height-animated
 
 React Native has no native height transition without a measure-then-animate hack: mount the content
 off-screen, measure it via `onLayout`, then tween an `Animated.Value` from 0 to the measured height.
 That hack is fragile (a resize invalidates the cached measurement, a wrong first frame is visible)
 and is not meaningfully testable under this repo's test renderer, which never runs real layout (see
-`Tabs`' own documented gap for its indicator's `onLayout` dependency). A conditional mount is an
-honest instant "snap", which is explicitly an accepted alternative for this component — and it means
-there is nothing left to gate for reduced motion on the content itself; only the chevron animates.
+`Tabs`' own documented gap for its indicator's `onLayout` dependency). Instead, expanded content uses
+a native-driver **opacity + translateY** reveal, and unmounts on collapse without an exit
+tween — no layout measurement, no scroll jank. Mounting is derived from `expanded` rather than
+gated on an animation callback: a tween that is interrupted, or never runs, must never be able to
+strand collapsed content in the tree. **The missing exit fade is deliberate and load-bearing**:
+`filter-sheet` asserts a closed section is gone on the very next render, synchronously. Reintroducing
+an exit animation here breaks that — `Accordion.motion.test.tsx` pins the synchronous unmount. Sections that start open (`defaultValue`) snap in with no
+enter animation. Under reduced motion, content snaps instantly the same way the chevron does.
 
 ## Why `disabled` is whole-accordion, not per-item
 
@@ -94,4 +112,10 @@ does not attempt to special-case that; flagged here rather than silently guessed
 
 ## Performance
 
-Both `Accordion` and the internal (non-exported) `AccordionRow` are wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`); `colors` is `useMemo`'d, and `emitChange`/`toggle` are `useCallback`'d so the parent hands every row the SAME stable `onToggle` function (the row now calls back with its own `item.value` instead of the parent binding a fresh per-item closure) — without this, `AccordionRow`'s memo would be a no-op.
+Both `Accordion` and the internal (non-exported) `AccordionRow` are wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`); `colors` is `useMemo`'d, and `emitChange`/`toggle` are `useCallback`'d so the parent hands every row the SAME stable `onToggle` function (the row calls back with its own `item.value` instead of the parent binding a fresh per-item closure) — without this, `AccordionRow`'s memo would be a no-op. `emitChange` depends on the two `onValueChange` callbacks destructured out of `props`, never on `props` itself: `props` is a fresh object every render, so a raw `[..., props]` dependency (a real regression this module shipped and fixed) recreates `emitChange`/`toggle` — and defeats every row's memo — on every unrelated re-render, even when the caller's own callback didn't change. Regression-guarded in `Accordion.render.test.tsx` (a row's `onPress` reference stays identical across a re-render triggered by an unrelated prop).
+
+## 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/alert-dialog/AlertDialog.js

@@ -10,7 +10,7 @@
 
 import { memo } from "react";
 import { Text, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
 import { Modal } from "../modal/index.js";
 import { alertDialogActionsStructure, resolveAlertDialogConfirmTone } from "./AlertDialog.variants.js";

package/lib/module/modules/alert-dialog/MODULE.md

@@ -53,8 +53,11 @@ own measurement, added here rather than assumed. What this module is responsible
   Button and its label `Text`, so a change to Button's tone mapping is caught here too, without this
   module importing Button's internal `resolveButtonTone` resolver.
 - **Dismissal semantics** — every one of Modal's dismissal paths (backdrop press, Android hardware
-  back, iOS VoiceOver escape) still resolves to `onRequestClose`, since `AlertDialog` never
-  intercepts it; only the cancel *action* gets the `onCancel` override.
+  back, iOS VoiceOver escape, and on web Escape) still resolves to `onRequestClose`, since
+  `AlertDialog` never intercepts it; only the cancel *action* gets the `onCancel` override.
+- **2.1.1 keyboard (web only)** — INHERITED whole from `Modal`: Escape, the Tab trap and focus
+  restore on the `ModalPortalProvider` branch. This module deliberately contains no keyboard code;
+  `__tests__/AlertDialog.keyboard.web.test.tsx` asserts the inheritance rather than duplicating it.
 - **Confirm vs. cancel are never confusable** — the confirm action is always `variant="solid"`
   (filled, high-emphasis) and the cancel action is always `variant="outline"` (unfilled), so the
   destructive/primary choice is never the visually quieter one.
@@ -79,3 +82,9 @@ own measurement, added here rather than assumed. What this module is responsible
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). No `useCallback`/`useMemo` needed: `cancelPress`/`onConfirm` are forwarded straight through to `Modal`/`Button` as direct prop references, never a freshly-created closure.
+
+## 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.