pixelize-native-library 1.2.1 → 1.3.0

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

@@ -9,35 +9,23 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
-import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { motionParallel, useMotion, useAnimatedValue } from "../../core/motion/index.js";
 import { usePressState } from "../../core/motion/usePressState.js";
 import { Icon } from "../../core/icon/index.js";
-import { useThemedStyles } from "../../core/style/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
 import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { VirtualList } from "../../core/list/index.js";
+import { renderNodeSlot } from "../../core/slot/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";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const VIRTUALIZE_THRESHOLD = 20;
 const ICON_STROKE = 2;
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
 const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
 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,
@@ -82,6 +70,7 @@ export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
     theme: theme,
     colors: colors,
     onToggle: toggle,
+    mountAnimation: false,
     testID: testID ? `${testID}-${item.value}` : undefined
   }), [openValues, disabled, size, theme, colors, toggle, testID]);
   const keyExtractor = useCallback(item => item.value, []);
@@ -97,9 +86,10 @@ export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
       })
     });
   }
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     testID: testID,
     style: style,
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
     children: items.map(item => /*#__PURE__*/_jsx(AccordionRow, {
       item: item,
       expanded: openValues.includes(item.value),
@@ -108,6 +98,7 @@ export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
       theme: theme,
       colors: colors,
       onToggle: toggle,
+      mountAnimation: true,
       testID: testID ? `${testID}-${item.value}` : undefined
     }, item.value))
   });
@@ -120,6 +111,7 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
   theme,
   colors,
   onToggle,
+  mountAnimation,
   testID
 }) {
   const spec = ACCORDION_SIZES[size];
@@ -132,26 +124,32 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
   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, {
+  const headerPressedStyle = useMemo(() => accordionHeaderStructure(theme, {
     size
-  }), theme, [size]);
-  const contentStyle = useThemedStyles(t => accordionContentStructure(t, {
+  }), [theme, size]);
+  const contentStyle = useMemo(() => accordionContentStructure(theme, {
     size
-  }), theme, [size]);
-  const itemBody = item.renderContent?.() ?? item.content;
+  }), [theme, size]);
+  const rawBody = item.renderContent?.() ?? item.content;
+  const bodyTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.title
+  }], [theme, colors.title]);
+  const itemBody = renderNodeSlot(rawBody, bodyTextStyle);
   const overlayStaticStyle = useMemo(() => ({
     backgroundColor: stateLayerScrim(theme.mode),
     borderRadius: theme.radii.sm
   }), [theme.mode, theme.radii.sm]);
   return /*#__PURE__*/_jsxs(Reanimated.View, {
-    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+    entering: mountAnimation ? FadeInDown.springify().reduceMotion(ReduceMotion.System) : undefined,
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
     style: [accordionItemStructure(theme), {
       borderBottomColor: colors.divider
     }],
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.headerHost,
       children: [focused && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: testID ? `${testID}-focus-ring` : undefined,
         style: {
           position: "absolute",
@@ -161,7 +159,8 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
           bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
           borderWidth: FOCUS_RING_WIDTH,
           borderColor: colors.focusRing,
-          borderRadius: theme.radii.sm + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+          borderRadius: theme.radii.sm + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+          pointerEvents: "none"
         }
       }), /*#__PURE__*/_jsxs(AnimatedPressable, {
         testID: testID,
@@ -181,8 +180,9 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
           overflow: "hidden"
         }, press.animatedStyle, rowDisabled && styles.dimmed],
         children: [/*#__PURE__*/_jsx(Reanimated.View, {
-          pointerEvents: "none",
-          style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+          style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+            pointerEvents: 'none'
+          }]
         }), item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
           name: item.icon,
           size: spec.iconSize,
@@ -237,99 +237,44 @@ const AccordionAnimatedContent = /*#__PURE__*/memo(function AccordionAnimatedCon
   const skipEnterAnimation = useRef(expanded);
   const running = useRef(null);
   const offsetY = motion.transform.offsetY;
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{
+      translateY: translateY.value
+    }]
+  }));
   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);
+      opacity.value = 0;
+      translateY.value = -offsetY;
       return undefined;
     }
     if (!motion.enabled || skipEnterAnimation.current) {
       skipEnterAnimation.current = false;
-      opacity.setValue(1);
-      translateY.setValue(0);
+      opacity.value = 1;
+      translateY.value = 0;
       return undefined;
     }
-    opacity.setValue(0);
-    translateY.setValue(-offsetY);
-    running.current = Animated.parallel([motion.timing(opacity, 1, {
+    opacity.value = 0;
+    translateY.value = -offsetY;
+    running.current = motionParallel(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, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     testID: testID,
-    style: [style, {
-      opacity,
-      transform: [{
-        translateY
-      }]
-    }],
+    style: [style, animatedStyle],
     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
@@ -341,7 +286,7 @@ function AccordionChevronAnimated({
   useEffect(() => {
     running.current?.stop();
     if (!motion.enabled) {
-      rotation.setValue(expanded ? 1 : 0);
+      rotation.value = expanded ? 1 : 0;
       return undefined;
     }
     running.current = motion.timing(rotation, expanded ? 1 : 0, {
@@ -351,15 +296,12 @@ function AccordionChevronAnimated({
     return () => running.current?.stop();
   }, [expanded, motion, rotation]);
   useEffect(() => () => running.current?.stop(), []);
-  const chevronStyle = useMemo(() => ({
+  const chevronStyle = useAnimatedStyle(() => ({
     transform: [{
-      rotate: rotation.interpolate({
-        inputRange: [0, 1],
-        outputRange: ["0deg", "180deg"]
-      })
+      rotate: `${interpolate(rotation.value, [0, 1], [0, 180])}deg`
     }]
-  }), [rotation]);
-  return /*#__PURE__*/_jsx(Animated.View, {
+  }));
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     style: chevronStyle,
     children: /*#__PURE__*/_jsx(Icon, {
       name: "chevron-down",
@@ -368,7 +310,7 @@ function AccordionChevronAnimated({
       strokeWidth: ICON_STROKE
     })
   });
-}
+});
 const styles = StyleSheet.create({
   dimmed: {
     opacity: 0.5

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

@@ -14,12 +14,10 @@
  *    rendering React Native.
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { StyleSheet } from "react-native";
 import { createThemedVariants } from "../../core/style/index.js";
-/** Same floor as Button/Tabs/Select — 44dp (WCAG 2.5.5 AAA / HIG). Duplicated, not imported: modules
- * stay isolated. */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+export { MIN_TOUCH_TARGET };
 /**
  * Accordion-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `headerMinHeight + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.

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

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

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

@@ -20,12 +20,12 @@ too. `type="multiple"` lets every section toggle independently.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `items` | `{ value: string; title: string; content: ReactNode }[]` | — | Rendered in order. `content` is ordinary composition rendered directly under a `View` when expanded — same contract as `Card.children`: wrap your own raw text in `Text` yourself. |
+| `items` | `AccordionItem[]` | — | Rendered in order. Each item: `value`, `title`, optional `subtitle`, `icon` (`IconName`), `badge`, `disabled`, and its body as either `content` (eager) or `renderContent: () => ReactNode` (lazy — use it when a section is heavy). The body is ordinary composition rendered directly under a `View` when expanded — same contract as `Card.children`: wrap your own raw text in `Text` yourself. |
 | `type` | `single \| multiple` | `single` | Discriminates the shape of `value`/`defaultValue`/`onValueChange` below. |
 | `value` | `string` (single) / `string[]` (multiple) | — | Controlled open value(s). Omit for uncontrolled. |
 | `defaultValue` | `string` (single) / `string[]` (multiple) | — | Initial open value(s) when uncontrolled. |
 | `onValueChange` | `(value: string) => void` (single) / `(value: string[]) => void` (multiple) | — | Fires on every toggle, in both controlled and uncontrolled use. |
-| `disabled` | `boolean` | `false` | Blocks every header's toggle at once — there is no per-item `disabled`. |
+| `disabled` | `boolean` | `false` | Blocks every header that is not already individually disabled via `items[].disabled`. |
 | `size` | `sm \| md \| lg` | `md` | 40 / 48 / 56 dp header floor; `sm` reaches 44 via `hitSlop`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
 | `testID` | `string` | — | Container's testID; each header gets `` `${testID}-${item.value}` ``, its content `` `${testID}-${item.value}-content` ``, and its focus ring `` `${testID}-${item.value}-focus-ring` ``, when set. |
@@ -62,21 +62,19 @@ way so far, because a disclosure list's open state is commonly local UI state, n
 
 ## 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). Header presses use `usePressState`
-(scale + state-layer overlay).
+Everything routes through **`useMotion()`** (Reanimated shared values) — no module-local timing
+constant, no raw `Easing.`, so the content reveal and the chevron pick up the device tier's
+`durationScale` and the global `MOTION_SCALE` / `MOTION_ENABLED` switches. The slide distance is
+`MOTION_TRANSFORM.offsetY`; reduce-motion is `motion.enabled`, never a second `useReducedMotion()`
+call (`core/motion/MODULE.md` rule 6). Header presses use `usePressState`. Rows themselves carry
+Reanimated `entering`/`exiting`/`layout` (`FadeInDown` / `FadeOut` / `LinearTransition`), all
+`reduceMotion(ReduceMotion.System)`.
 
 ## 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). Instead, expanded content uses
+React Native has no native height transition without a measure-then-animate hack, which is fragile
+(a resize invalidates the cached measurement) and not meaningfully testable under this repo's test
+renderer, which never runs real layout. 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
@@ -85,13 +83,6 @@ strand collapsed content in the tree. **The missing exit fade is deliberate and
 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
-
-The spec's prop list has one `disabled`, not a per-item flag on `AccordionItem` — mirroring how
-`RadioGroup`'s `disabled` blocks every row at once. A consumer needing a single non-collapsible
-section can omit that item from `items` reactively, or simply not wire its header (this library
-does not attempt to special-case that; flagged here rather than silently guessed at).
-
 ## Patterns (copied from Button / Tabs / Select)
 
 1. **Structure vs colour split.** Header height floor/padding and the separator's border WIDTH are
@@ -107,9 +98,9 @@ does not attempt to special-case that; flagged here rather than silently guessed
 
 ## Known gaps
 
-- No per-item `disabled` (see above — a deliberate scope decision, not an oversight).
-- No horizontal scrolling / virtualization concern — v1 assumes `items` is a normal-length list
-  (same scope decision `RadioGroup`/`Tabs` made for their own lists).
+- No height tween on the reveal (see above) — opacity + translateY only.
+- At 20 or more `items` the stack swaps to `VirtualList`, which drops the per-row enter/exit and
+  `layout` animations the short-list path gets.
 
 ## Performance
 

package/lib/module/modules/alert-dialog/AlertDialog.js

@@ -8,10 +8,11 @@
  * actions appear, in what order, and which tone the confirm action carries.
  */
 
-import { memo } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import { View } from "react-native";
 import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
+import { Input } from "../input/index.js";
 import { Modal } from "../modal/index.js";
 import { Text } from "../text/index.js";
 import { alertDialogActionsStructure, resolveAlertDialogConfirmTone } from "./AlertDialog.variants.js";
@@ -26,11 +27,17 @@ export const AlertDialog = /*#__PURE__*/memo(function AlertDialog({
   onConfirm,
   onCancel,
   tone = "default",
+  confirmationText,
   testID
 }) {
   const theme = useTheme();
   const confirmTone = resolveAlertDialogConfirmTone(tone);
   const cancelPress = onCancel ?? onRequestClose;
+  const [typed, setTyped] = useState("");
+  const confirmArmed = useMemo(() => confirmationText === undefined || typed === confirmationText, [confirmationText, typed]);
+  useEffect(() => {
+    if (!visible) setTyped("");
+  }, [visible]);
   return /*#__PURE__*/_jsxs(Modal, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -43,7 +50,16 @@ export const AlertDialog = /*#__PURE__*/memo(function AlertDialog({
         marginBottom: theme.space[5]
       },
       children: description
-    }), /*#__PURE__*/_jsxs(View, {
+    }), confirmationText !== undefined ? /*#__PURE__*/_jsx(Input, {
+      value: typed,
+      onChangeText: setTyped,
+      label: `Type ${confirmationText} to confirm`,
+      accessibilityLabel: `Type ${confirmationText} to confirm`,
+      containerStyle: {
+        marginBottom: theme.space[4]
+      },
+      testID: testID ? `${testID}-confirmation` : undefined
+    }) : null, /*#__PURE__*/_jsxs(View, {
       style: alertDialogActionsStructure(theme),
       children: [/*#__PURE__*/_jsx(Button, {
         variant: "outline",
@@ -55,6 +71,7 @@ export const AlertDialog = /*#__PURE__*/memo(function AlertDialog({
         tone: confirmTone,
         label: confirmLabel,
         onPress: onConfirm,
+        disabled: !confirmArmed,
         testID: testID ? `${testID}-confirm` : undefined
       })]
     })]

package/lib/module/modules/alert-dialog/AlertDialogProps.js

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

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

@@ -28,7 +28,8 @@ exactly one thing of its own: which two actions appear and which tone the confir
 | `onConfirm` | `() => void` | — | Required. Wired to the confirm Button's `onPress`. |
 | `onCancel` | `() => void` | `onRequestClose` | Wired to the cancel Button's `onPress`. Cancelling and dismissing mean the same thing unless overridden. |
 | `tone` | `"default" \| "danger"` | `"default"` | Closed union. `"danger"` passes `tone="danger"` to the confirm `Button`, mirroring Button's own destructive-action tone; `"default"` maps to Button's own default (`"accent"`). |
-| `testID` | `string` | — | Forwarded to `Modal` (seeds `${testID}-backdrop`/`${testID}-panel`) and also seeds `${testID}-cancel` / `${testID}-confirm` on the two actions. |
+| `confirmationText` | `string` | — | When set, renders a confirmation `Input` and keeps confirm disabled until the typed value matches exactly. Clears when `visible` becomes false. |
+| `testID` | `string` | — | Forwarded to `Modal` (seeds `${testID}-backdrop`/`${testID}-panel`) and also seeds `${testID}-cancel` / `${testID}-confirm` on the two actions. Seeds `${testID}-confirmation` on the guard field when `confirmationText` is set. |
 
 No `style` — same reasoning as `Modal` (see its "Why no `style`" section): there is no parent
 layout flow to place a full-screen dialog within.

package/lib/module/modules/app-bar/AppBar.js

@@ -17,7 +17,8 @@
  */
 
 import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Text, View } from "react-native";
+import { Text, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { HEADING_LEVEL, HeadingText } from "../../core/heading/index.js";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -45,52 +46,56 @@ function useTitleCrossfade(title, subtitle) {
     title,
     subtitle
   });
+  const [hideFromA11y, setHideFromA11y] = useState(false);
+  const titleBoxMotionStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
   useEffect(() => {
     if (displayed.title === title && displayed.subtitle === subtitle) {
       if (!fadeInPending.current) return;
       fadeInPending.current = false;
       running.current?.stop();
       if (!motion.enabled) {
-        opacity.setValue(1);
+        opacity.value = 1;
+        setHideFromA11y(false);
         return;
       }
       running.current = motion.timing(opacity, 1, {
         duration: "fast",
         easing: "decelerate"
       });
-      running.current.start();
+      running.current.start(() => queueMicrotask(() => setHideFromA11y(false)));
       return;
     }
     running.current?.stop();
+    setHideFromA11y(true);
     if (!motion.enabled) {
-      opacity.setValue(1);
+      opacity.value = 1;
       setDisplayed({
         title,
         subtitle
       });
+      setHideFromA11y(false);
       return;
     }
     running.current = motion.timing(opacity, 0, {
       duration: "fast",
       easing: "accelerate"
     });
-    running.current.start(({
-      finished
-    }) => {
-      if (!finished) return;
+    running.current.start(result => {
+      if (!result?.finished) return;
       fadeInPending.current = true;
-      setDisplayed({
+      queueMicrotask(() => setDisplayed({
         title,
         subtitle
-      });
+      }));
     });
   }, [title, subtitle, displayed, motion, opacity]);
   useEffect(() => () => running.current?.stop(), []);
-  const stale = displayed.title !== title || displayed.subtitle !== subtitle;
   return {
     displayed,
-    opacity,
-    stale
+    titleBoxMotionStyle,
+    stale: hideFromA11y
   };
 }
 export const AppBar = /*#__PURE__*/memo(function AppBar({
@@ -107,12 +112,10 @@ export const AppBar = /*#__PURE__*/memo(function AppBar({
   const trailingActions = useMemo(() => normalizeTrailingActions(trailing), [trailing]);
   const {
     displayed,
-    opacity,
+    titleBoxMotionStyle,
     stale
   } = useTitleCrossfade(title, subtitle);
-  const titleBoxStyle = useMemo(() => [appBarTitleBoxStructure(theme), {
-    opacity
-  }], [theme, opacity]);
+  const titleBoxStyle = useMemo(() => [appBarTitleBoxStructure(theme), titleBoxMotionStyle], [theme, titleBoxMotionStyle]);
   const barDepth = useMemo(() => ({
     backgroundColor: floatingBackground(theme, "sm"),
     ...floatingSurfaceStyle(theme, "sm")
@@ -137,7 +140,7 @@ export const AppBar = /*#__PURE__*/memo(function AppBar({
         onPress: leading.onPress,
         testID: testID === undefined ? undefined : `${testID}-leading`
       }) : null
-    }), /*#__PURE__*/_jsxs(Animated.View, {
+    }), /*#__PURE__*/_jsxs(Reanimated.View, {
       style: titleBoxStyle
       // The outgoing title is still mounted (and still an accessibility element) while it fades,
       // so without this a screen reader can announce the title of the screen just left.

package/lib/module/modules/app-bar/AppBar.variants.js

@@ -11,6 +11,7 @@
  * `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
 
 /** Matches `Button`'s `MIN_TOUCH_TARGET` — each side slot reserves at least 44dp for icon actions. */
@@ -19,6 +20,7 @@ export const APP_BAR_SIDE_MIN_WIDTH = 44;
  * Maps AppBar onto the theme's role colours. No `tone`/`color` prop to widen — every colour this
  * bar can show is one of these role lookups (same reasoning as `Divider`/`Card`).
  */
+export { MIN_TOUCH_TARGET };
 export function resolveAppBarColors(colors) {
   return {
     background: colors.bg.surface,
@@ -68,4 +70,7 @@ export const appBarActionsRowStructure = createThemedVariants(theme => ({
     columnGap: theme.space[1]
   }
 }));
+
+/** Scroll distance over which a `scrollEffect="collapse*"` AppBar eases subtitle/padding. */
+export const APP_BAR_SCROLL_COLLAPSE_RANGE = 64;
 //# sourceMappingURL=AppBar.variants.js.map

package/lib/module/modules/app-bar/AppBarProps.js

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

package/lib/module/modules/app-bar/MODULE.md

@@ -23,7 +23,7 @@ ghost) driven by a closed `IconName` — never a consumer `ReactNode` slot.
 | `subtitle` | `string` | — | Optional. Single-line, `fg.muted`. |
 | `onBack` | `() => void` | — | Renders `arrow-left` ghost button labelled "Back". |
 | `leading` | `AppBarAction` | — | Custom leading action when `onBack` is absent. |
-| `trailing` | `AppBarAction \| AppBarAction[]` | — | One or more trailing icon actions. |
+| `trailing` | `AppBarAction \| readonly AppBarAction[]` | — | One or more trailing icon actions. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Forwarded to the outermost `View`. |
 

package/lib/module/modules/app-switcher/AppSwitcher.js

@@ -0,0 +1,30 @@
+"use strict";
+
+import { memo, useCallback } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { ListItem } from "../list-item/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const AppSwitcher = /*#__PURE__*/memo(function AppSwitcher({
+  apps,
+  activeAppId,
+  onSelect,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const makePress = useCallback(id => () => onSelect(id), [onSelect]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: [{
+      gap: theme.space[1]
+    }, style],
+    children: apps.map(app => /*#__PURE__*/_jsx(ListItem, {
+      title: app.label,
+      subtitle: app.id === activeAppId ? "Current" : undefined,
+      onPress: makePress(app.id),
+      testID: testID ? `${testID}-${app.id}` : undefined
+    }, app.id))
+  });
+});
+//# sourceMappingURL=AppSwitcher.js.map

package/lib/module/modules/app-switcher/AppSwitcherProps.js

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

package/lib/module/modules/app-switcher/MODULE.md

@@ -0,0 +1,14 @@
+# app-switcher/ — a suite picker list for switching between apps
+
+Suite picker list (no keyboard shortcuts). Subpath-only.
+
+## Exports
+
+- `AppSwitcher` — `apps`, `activeAppId`, `onSelect`, layout-only `style`, `testID`
+- `AppSwitcherApp` — `id`, `label`, `icon`
+
+Each app renders as a `ListItem` whose subtitle is `"Current"` for `activeAppId`.
+
+## Known gaps
+
+- `AppSwitcherApp.icon` is accepted and silently ignored — nothing renders it.