pixelize-native-library 1.2.0 → 1.3.0

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

@@ -8,6 +8,7 @@ interaction, and no text of its own.
 | File | Role |
 |------|------|
 | `Divider.tsx` | The component. Resolves the orientation's structural style + the decorative colour, applies them inline, `style` last. |
+| `DividerProps.ts` | `DividerProps` interface, imported back into `Divider.tsx` as a type-only import. |
 | `Divider.variants.ts` | Pure resolver (`resolveDividerColor`) + the themed structural variant resolver `dividerStructure`. No React. |
 | `index.ts` | Public surface: `Divider`, `DividerProps`, `DividerOrientation`. |
 | `__tests__/Divider.test.ts` | Pure: colour-resolution mapping (all brands × modes) + a regression guard against silently upgrading to a guaranteed-3:1 border token. |
@@ -59,9 +60,3 @@ None — no icon, no new theme token, no new core helper needed for this compone
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `DividerImpl` internally, exported as `Divider = memo(DividerImpl)`. No children, no library child components — nothing else 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/document-viewer/DocumentViewer.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { memo } from "react";
+import { Linking, View } from "react-native";
+import { Button } from "../button/index.js";
+import { Modal } from "../modal/index.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DocumentViewer = /*#__PURE__*/memo(function DocumentViewer({
+  uri,
+  title = "Document",
+  visible,
+  onRequestClose,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    onRequestClose: onRequestClose,
+    title: title,
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: style,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        children: "In-app PDF rendering needs a documented optional peer (proposed: `react-native-pdf` or system viewer)."
+      }), /*#__PURE__*/_jsx(Button, {
+        label: "Open in browser",
+        variant: "outline",
+        onPress: () => void Linking.openURL(uri)
+      })]
+    })
+  });
+});
+//# sourceMappingURL=DocumentViewer.js.map

package/lib/module/modules/document-viewer/DocumentViewerProps.js

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

package/lib/module/modules/document-viewer/MODULE.md

@@ -0,0 +1,12 @@
+# document-viewer/ — a document and PDF viewing shell
+
+Land-deed / PDF viewing shell. **No PDF peer is wired yet** — the body renders a note plus an
+"Open in browser" `Button` that hands `uri` to RN's `Linking`, inside this library's own `Modal`.
+Proposed peer: `react-native-pdf` or the platform document APIs.
+
+## Props
+
+`uri` (required, remote PDF URL), `title?`, `visible` (required), `onRequestClose` (required),
+`style?: LayoutStyle`, `testID?`.
+
+Exported from the package root as `DocumentViewer` / `DocumentViewerProps`.

package/lib/module/modules/document-viewer/index.js

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

package/lib/module/modules/drawer/Drawer.js

@@ -38,17 +38,21 @@
  */
 
 import { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Keyboard, Modal as RNModal, Platform, Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { Keyboard, Modal as RNModal, Platform, Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { MOTION_TRANSFORM, runTiming, useMotion, useAnimatedValue } from "../../core/motion/index.js";
+import { reanimatedEasing } from "../../core/motion/reanimatedEasing.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { ModalPortalContext } from "../modal/ModalPortalContext.js";
-import { renderWebPortal } from "../modal/renderWebPortal";
+import { ModalPortalContext, renderWebPortal } from "../../core/overlay/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { drawerGrabberStructure, drawerHandleStructure, drawerOverlayStructure, drawerPanelStructure, resolveDrawerBottomInset, resolveDrawerPanelColors } from "./Drawer.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Decorative dismiss scrim behind the panel — a design constant, not a role token: it is neither
-// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it. Same
-// justification as Modal's MODAL_BACKDROP / Select's BACKDROP_SCRIM.
-const DRAWER_BACKDROP = "#00000080";
+// Decorative dismiss scrim, not a role token — same reasoning Modal's MODAL_BACKDROP records.
+// Opacity is the shared `scrimOpacity` knob, not a locally-guessed hex.
+const DRAWER_BACKDROP = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 export const Drawer = /*#__PURE__*/memo(function Drawer({
   visible,
   onRequestClose,
@@ -56,6 +60,10 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
   testID
 }) {
   const theme = useTheme();
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   const motion = useMotion();
   const {
     height: windowHeight
@@ -91,24 +99,21 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
   // react-native-web's `Keyboard` is a stub with no `metrics` method at all (unlike the other calls
   // here, which it does implement as no-ops), so it's skipped on web rather than called and crashing.
   const keyboardHeight = useAnimatedValue(0);
+  const keyboardRunning = useRef(null);
   useEffect(() => {
     if (!mounted) return undefined;
     const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
     const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
     const fallbackMs = motion.duration("normal");
     const settle = (toValue, eventMs) => {
-      if (!motion.enabled) {
-        keyboardHeight.setValue(toValue);
-        return;
-      }
-      Animated.timing(keyboardHeight, {
-        toValue,
-        duration: eventMs || fallbackMs,
-        useNativeDriver: false
-      }).start();
+      keyboardRunning.current?.stop();
+      const durationMs = eventMs || fallbackMs;
+      const snap = !motion.enabled;
+      keyboardRunning.current = runTiming(keyboardHeight, toValue, durationMs, reanimatedEasing("standard"), 0, snap);
+      keyboardRunning.current.start();
     };
     const initialMetrics = Platform.OS === "web" ? undefined : Keyboard.metrics();
-    keyboardHeight.setValue(initialMetrics?.height ?? 0);
+    keyboardHeight.value = initialMetrics?.height ?? 0;
     const showSub = Keyboard.addListener(showEvent, e => {
       settle(e.endCoordinates.height, e.duration);
     });
@@ -116,6 +121,7 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
       settle(0, e?.duration);
     });
     return () => {
+      keyboardRunning.current?.stop();
       showSub.remove();
       hideSub.remove();
     };
@@ -132,7 +138,7 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
     if (visible) {
       setMounted(true);
       if (!motion.enabled) {
-        progress.setValue(1);
+        progress.value = 1;
         return;
       }
       running.current = motion.timing(progress, 1, {
@@ -145,7 +151,7 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
     if (!mountedRef.current) return;
     const exitMs = motion.duration("normal");
     if (!motion.enabled || exitMs === 0) {
-      progress.setValue(0);
+      progress.value = 0;
       setMounted(false);
       return;
     }
@@ -167,21 +173,27 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
 
   // Slides from fully off-screen (the window's own height, always ≥ the panel's own, since the
   // panel is capped to 90% of it) to resting at the bottom edge.
-  const panelStyle = useMemo(() => [drawerPanelStructure(theme), {
-    backgroundColor: panelColors.background,
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.lg);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "lg"),
+      ...floatingSurfaceStyle(theme, "lg")
+    };
+  }, [theme]);
+  const panelStaticStyle = useMemo(() => [drawerPanelStructure(theme), floatingStyle], [theme, floatingStyle]);
+  const panelAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{
-      translateY: progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [windowHeight, 0]
-      })
+      translateY: interpolate(progress.value, [0, 1], [windowHeight, 0])
     }]
-  }], [theme, panelColors.background, progress, windowHeight]);
-  const backdropStyle = useMemo(() => [styles.backdrop, {
-    opacity: progress
-  }], [progress]);
-  const keyboardPadding = useMemo(() => ({
-    paddingBottom: Animated.add(bottomInset, keyboardHeight)
-  }), [bottomInset, keyboardHeight]);
+  }));
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value
+  }));
+  const keyboardPaddingStyle = useAnimatedStyle(() => ({
+    paddingBottom: bottomInset + keyboardHeight.value
+  }));
   const grabberStyle = useMemo(() => [drawerGrabberStructure(), {
     backgroundColor: panelColors.grabber
   }], [panelColors.grabber]);
@@ -192,20 +204,22 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
       tabIndex: -1,
       style: StyleSheet.absoluteFill,
       onPress: onRequestClose,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
-        style: backdropStyle
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        style: [styles.backdrop, backdropAnimatedStyle, {
+          pointerEvents: 'none'
+        }]
       })
     }), /*#__PURE__*/_jsx(View, {
-      style: drawerOverlayStructure(),
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [drawerOverlayStructure(), {
+        pointerEvents: 'box-none'
+      }],
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
         testID: testID ? `${testID}-panel` : undefined,
         accessibilityViewIsModal: true,
         onAccessibilityEscape: onRequestClose,
-        style: panelStyle,
-        children: /*#__PURE__*/_jsxs(Animated.View, {
-          style: keyboardPadding,
+        style: [panelStaticStyle, panelAnimatedStyle],
+        children: /*#__PURE__*/_jsxs(Reanimated.View, {
+          style: keyboardPaddingStyle,
           children: [/*#__PURE__*/_jsx(View, {
             testID: testID ? `${testID}-handle` : undefined,
             style: drawerHandleStructure(theme),
@@ -214,7 +228,7 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
             children: /*#__PURE__*/_jsx(View, {
               style: grabberStyle
             })
-          }), children]
+          }), renderNodeSlot(children, childrenSlotStyle)]
         })
       })
     })]
@@ -231,14 +245,17 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
     // touching the shared `drawerOverlayStructure`/`drawerPanelStructure` resolvers the RNModal path
     // below still uses untouched.
     return renderWebPortal(/*#__PURE__*/_jsx(View, {
-      style: StyleSheet.absoluteFill,
-      pointerEvents: "box-none",
+      style: [StyleSheet.absoluteFill, {
+        pointerEvents: 'box-none'
+      }],
       children: content
     }), portalContainer);
   }
   return /*#__PURE__*/_jsx(RNModal, {
     visible: mounted,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: onRequestClose,
     children: content

package/lib/module/modules/drawer/Drawer.variants.js

@@ -75,10 +75,10 @@ export const drawerPanelStructure = createThemedVariants(theme => ({
   base: {
     width: "100%",
     maxHeight: "90%",
-    borderTopLeftRadius: theme.radii.lg,
-    borderTopRightRadius: theme.radii.lg,
-    paddingHorizontal: theme.space[5],
-    ...theme.elevation.lg
+    borderTopLeftRadius: theme.radii.xl,
+    borderTopRightRadius: theme.radii.xl,
+    borderCurve: "continuous",
+    paddingHorizontal: theme.space[5]
   }
 }));
 

package/lib/module/modules/drawer/DrawerProps.js

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

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,10 +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.
+`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

@@ -17,13 +17,15 @@
  */
 
 import { memo, useMemo } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { View } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
-import { HEADING_LEVEL, HeadingText } from "../../core/heading/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
 import { Button } from "../button/index.js";
-import { EMPTY_STATE_ICON_SIZE, emptyStateStructure, resolveEmptyStateAnnouncement, resolveEmptyStateColors } from "./EmptyState.variants.js";
+import { Text, Heading } from "../text/index.js";
+import { EMPTY_STATE_ICON_SIZE, emptyStateFillStructure, emptyStateStructure, resolveEmptyStateAnnouncement, resolveEmptyStateColors } from "./EmptyState.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // A lighter stroke than the default 2 — at 48dp a 2px stroke reads heavier than the muted,
 // secondary role this glyph plays next to the title.
@@ -33,6 +35,7 @@ export const EmptyState = /*#__PURE__*/memo(function EmptyState({
   title,
   description,
   action,
+  fill = false,
   style,
   testID
 }) {
@@ -42,24 +45,17 @@ export const EmptyState = /*#__PURE__*/memo(function EmptyState({
   // No `accessibilityLiveRegion` alongside this — it is Android-only and would announce twice there
   // (the contract `core/a11y/MODULE.md` states, same as `Input`/`FormField`).
   useAnnounce(resolveEmptyStateAnnouncement(title, description));
-  const rootStyle = useMemo(() => [emptyStateStructure(theme), style], [theme, style]);
-  const titleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.bold), styles.text, {
-    fontSize: theme.fontSizes.lg,
-    color: colors.title
-  }], [theme, colors]);
-  const descriptionStyle = useMemo(() => [styles.text, {
-    fontSize: theme.fontSizes.sm,
-    color: colors.description
-  }], [theme, colors]);
-  return /*#__PURE__*/_jsxs(View, {
+  const rootStyle = useMemo(() => [emptyStateStructure(theme), fill && emptyStateFillStructure(theme), fill && {
+    backgroundColor: floatingBackground(theme, "sm"),
+    ...floatingSurfaceStyle(theme, "sm")
+  }, style], [theme, fill, style]);
+  return /*#__PURE__*/_jsxs(Reanimated.View, {
     testID: testID,
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
     style: rootStyle,
-    children: [icon !== undefined &&
-    /*#__PURE__*/
-    // Decorative — redundant with the visible title below, so it is hidden from assistive
-    // tech rather than announced as a second, unexplained element (same contract `Avatar` and
-    // `Skeleton` give their own decorative default).
-    _jsx(View, {
+    children: [icon !== undefined && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-icon`,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
@@ -69,13 +65,12 @@ export const EmptyState = /*#__PURE__*/memo(function EmptyState({
         color: colors.icon,
         strokeWidth: ICON_STROKE
       })
-    }), /*#__PURE__*/_jsx(HeadingText, {
-      accessibilityRole: "header",
-      "aria-level": HEADING_LEVEL.section,
-      style: titleStyle,
+    }), /*#__PURE__*/_jsx(Heading, {
+      variant: "h3",
       children: title
     }), description !== undefined && /*#__PURE__*/_jsx(Text, {
-      style: descriptionStyle,
+      variant: "body-sm",
+      color: "muted",
       children: description
     }), action !== undefined && /*#__PURE__*/_jsx(Button, {
       label: action.label,
@@ -85,9 +80,4 @@ export const EmptyState = /*#__PURE__*/memo(function EmptyState({
     })]
   });
 });
-const styles = StyleSheet.create({
-  text: {
-    textAlign: "center"
-  }
-});
 //# sourceMappingURL=EmptyState.js.map

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

@@ -60,4 +60,11 @@ export const emptyStateStructure = createThemedVariants(theme => ({
     rowGap: theme.space[3]
   }
 }));
+export const emptyStateFillStructure = createThemedVariants(_theme => ({
+  base: {
+    flex: 1,
+    alignSelf: "stretch",
+    width: "100%"
+  }
+}));
 //# sourceMappingURL=EmptyState.variants.js.map

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,10 +19,11 @@ 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. |
+| `fill` | `boolean` | `false` | `flex: 1` + centred — fills a list/screen slot without a wrapper. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Forwarded to the outermost `View`; the icon wrapper (when rendered) gets `${testID}-icon`. |
 
@@ -65,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.
 
@@ -88,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.