pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/file-upload/FileUpload.variants.js

@@ -20,9 +20,8 @@
  * — only `react-native`'s `StyleSheet` is mocked to identity, same as every sibling's pure test.
  */
 
-import * as DocumentPicker from "expo-document-picker";
-import * as ImagePicker from "expo-image-picker";
-import { createThemedVariants } from "../../core/style/index.js";
+import { getDocumentPicker, getImagePicker } from "../../core/media/index.js";
+import { createThemedVariants, createVariants } from "../../core/style/index.js";
 /** Shown below the control when a pick attempt fails outright (see `FileUpload.tsx`'s `openPicker`). */
 export const FILE_UPLOAD_PICK_ERROR_MESSAGE = "Couldn't open the picker. Check that photo or file access is allowed, then try again.";
 
@@ -56,7 +55,7 @@ export function fileNameFromUri(uri) {
  */
 export function resolveImagePickResult(result) {
   if (result.canceled) return null;
-  const asset = result.assets[0];
+  const asset = result.assets?.[0];
   if (!asset) return null;
   return {
     uri: asset.uri,
@@ -69,7 +68,7 @@ export function resolveImagePickResult(result) {
 /** Maps `DocumentPicker.getDocumentAsync`'s result onto the public shape — same `canceled`/empty-array handling as `resolveImagePickResult`. `DocumentPickerAsset.name` is always present, so no filename fallback is needed. */
 export function resolveDocumentPickResult(result) {
   if (result.canceled) return null;
-  const asset = result.assets[0];
+  const asset = result.assets?.[0];
   if (!asset) return null;
   return {
     uri: asset.uri,
@@ -102,7 +101,7 @@ export function resolveDocumentPickResult(result) {
  * possible "nothing was picked" outcomes; this function does not conflate them.
  */
 export async function pickImageFile(allowsEditing) {
-  const result = await ImagePicker.launchImageLibraryAsync({
+  const result = await getImagePicker().launchImageLibraryAsync({
     allowsEditing
   });
   return resolveImagePickResult(result);
@@ -115,7 +114,7 @@ export async function pickImageFile(allowsEditing) {
  * permission-less: the user grants access to the one file they pick, not to a library.
  */
 export async function pickDocumentFile(allowedMimeTypes) {
-  const result = await DocumentPicker.getDocumentAsync({
+  const result = await getDocumentPicker().getDocumentAsync({
     type: allowedMimeTypes
   });
   return resolveDocumentPickResult(result);
@@ -157,6 +156,50 @@ export const fileUploadContainerStructure = createThemedVariants(theme => ({
   }
 }));
 
+/** The progress track's accessible name — `accessibilityValue.now` carries the number itself. */
+export const FILE_UPLOAD_PROGRESS_LABEL = "Upload progress";
+
+/** 0–100 (any other input, including `NaN`, reads as 0) → the 0–1 `scaleX` factor of the fill. */
+export function resolveFileUploadProgressFraction(progress) {
+  if (!Number.isFinite(progress)) return 0;
+  return Math.min(1, Math.max(0, progress / 100));
+}
+
+/** Rounded 0–100 for `accessibilityValue.now`, which takes an integer. */
+export function resolveFileUploadProgressPercent(progress) {
+  return Math.round(resolveFileUploadProgressFraction(progress) * 100);
+}
+
+/**
+ * The upload-progress track. `alignSelf: "stretch"` so it spans the container the trigger `Button`
+ * sizes — the root hugs its content (see `fileUploadContainerStructure`), so a track with no
+ * intrinsic width would otherwise render 0dp wide.
+ */
+export const fileUploadProgressTrackStructure = createThemedVariants(theme => ({
+  base: {
+    alignSelf: "stretch",
+    height: 4,
+    borderRadius: theme.radii.full,
+    overflow: "hidden"
+  }
+}));
+
+/**
+ * The fill. Laid out at the track's FULL width and shrunk with an animated `scaleX` — the only way
+ * a determinate fill can run on the native driver (`width` cannot; see `core/motion`'s config
+ * header). `transformOrigin` pins the growth to the left edge instead of the centre.
+ */
+export const fileUploadProgressFillStructure = createVariants({
+  base: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    transformOrigin: "left center"
+  }
+});
+
 /**
  * The "selected file" row — a bordered chip below the trigger. `border.interactive`, NOT the
  * decorative `border.default`: `Card.variants.ts` documents `border.default` as measuring

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

@@ -14,7 +14,8 @@ and the first that composes a sibling module (`Button`) instead of hand-rolling
 | `FileUpload.variants.ts` | The native-picker calls (`pickImageFile`, `pickDocumentFile`), the raw-result → `FileUploadResult` mappers, `fileNameFromUri`, the accessible-name resolvers, and the structural resolvers. Free of React, but — deliberately, unlike every sibling — NOT free of a native runtime import (see below). |
 | `index.ts` | Public surface: `FileUpload`, `FileUploadProps`, `FileUploadResult`, `FileUploadSource`, `FileUploadSize`. |
 | `__tests__/FileUpload.test.ts` | Pure: the native-picker calls (mocked `expo-image-picker`/`expo-document-picker`), result-mapping, `fileNameFromUri`, accessible-name resolvers, WCAG contrast (all brands × modes). |
-| `__tests__/FileUpload.render.test.tsx` | Render: trigger press → picker → `onChange`, cancel leaves `value` untouched, the "selected file" row + remove control, `disabled`, a pick failure's error row + dev warning, `style` application. |
+| `__tests__/FileUpload.render.test.tsx` | Render: trigger press → picker → `onChange`, cancel leaves `value` untouched, the "selected file" row + remove control, `disabled`, a pick failure's error row + announcement + dev warning, `style` application. |
+| `__tests__/FileUpload.motion.test.tsx` | Reduce-motion (WCAG 2.3.3): with the OS setting on, a changed `progress` snaps the fill's `scaleX` on the next render — no tween, no timers. |
 
 ## Props
 
@@ -64,8 +65,8 @@ native source, not assumed from docs:
 
 So for the default flow, "denied/undetermined permission" isn't a state to query in advance — it's
 handled reactively: any rejection from `pickImageFile`/`pickDocumentFile` is caught in `openPicker`,
-which clears `value` (`onChange(null)`), sets `pickError` (renders a `status.danger.text` message
-with `accessibilityLiveRegion="polite"`, same pattern `Input.tsx`'s `errorText` uses), and warns via
+which clears `value` (`onChange(null)`), sets `pickError` (renders a `status.danger.text` message,
+announced via `useAnnounce` — same pattern `Input.tsx`'s `errorText` uses), and warns via
 `console.warn` — gated the same way `PixelizeProvider.tsx` gates its own dev-only warning (the only
 other `console` usage in this codebase, reused rather than inventing a second convention).
 
@@ -112,7 +113,18 @@ indistinguishable from a voluntary cancel) can't be observed without a device-le
 - **1.4.11** — the row's border (`border.interactive`) measured ≥ 3:1 against `bg.canvas`.
 - **2.5.5 / 2.5.8** — both interactive elements are `Button` instances, inheriting its ≥44dp
   guarantee directly — this module defines no touch-target arithmetic of its own.
-- **4.1.3** — the error message carries `accessibilityLiveRegion="polite"`.
+- **2.3.3** — the progress fill's tween is skipped under the OS reduce-motion setting: `scaleX` is
+  `setValue`'d straight to the new fraction. Pinned by `FileUpload.motion.test.tsx`. `scaleX` is now
+  a shared `useAnimatedValue` (`core/motion`) instead of `useRef(new Animated.Value(fraction))`, so
+  the initial `fraction` isn't re-evaluated on every render.
+- **1.4.1 / web** — the progress row's percentage now rides flat `aria-valuemin`/`aria-valuemax`/
+  `aria-valuenow` instead of `accessibilityValue={{...}}`: `react-native-web` drops the object form
+  entirely, so the web `role="progressbar"` previously announced with no percentage. `View` merges
+  the flat props into the object form on native, so one prop shape is correct on both platforms.
+- **4.1.3** — the pick error is announced with `useAnnounce` (`core/a11y`), i.e.
+  `AccessibilityInfo.announceForAccessibility`, so it reaches VoiceOver **and** TalkBack. The message
+  carries **no** `accessibilityLiveRegion`: that prop is Android-only, so it left iOS silent, and
+  keeping it alongside the announcement would announce twice on Android.
 - Disabled dims the filename `Text` only (`opacity: 0.5`), not the row container — the row's own
   remove `Button` already dims itself, and dimming the container too would compound both opacities.
 
@@ -128,3 +140,9 @@ indistinguishable from a voluntary cancel) can't be observed without a device-le
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `openPicker` is `useCallback`'d; a new `handlePick` wrapper replaces the old inline `onPress={() => void openPicker()}` so the trigger `Button`'s `onPress` reference stays stable, and `handleRemove` is `useCallback`'d for the "remove" `Button` — both are this library's own `Button` instances, so stabilizing these closures is what keeps `Button`'s memo from being defeated.
+
+## 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/filter-sheet/FilterChip.js

@@ -15,10 +15,11 @@
  * concept), not a disabled-looking control.
  */
 
-import { memo } from "react";
-import { Pressable, Text, View } from "react-native";
+import { memo, useMemo } from "react";
+import { Animated, Pressable, Text, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { usePressMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { FILTER_CHIP_HIT_SLOP, FILTER_CHIP_ICON_SIZE, filterChipStructure, resolveFilterChipAccessibility, resolveFilterChipColors } from "./FilterSheet.variants.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
@@ -29,19 +30,25 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
   testID
 }) {
   const theme = useTheme();
-  const colors = resolveFilterChipColors(theme.colors);
+  const press = usePressMotion();
   const removable = onRemove !== undefined;
-  const a11y = resolveFilterChipAccessibility({
+  const colors = useMemo(() => resolveFilterChipColors(theme.colors), [theme.colors]);
+  const a11y = useMemo(() => resolveFilterChipAccessibility({
     label,
     removable
-  });
+  }), [label, removable]);
+  const chipStyle = useMemo(() => [filterChipStructure(theme), {
+    backgroundColor: colors.background,
+    borderColor: colors.border
+  }], [theme, colors]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.text
+  }], [theme, colors]);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
-      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-        fontSize: theme.fontSizes.sm,
-        color: colors.text
-      }],
+      style: labelStyle,
       children: label
     }), removable && /*#__PURE__*/_jsx(Icon, {
       name: "x",
@@ -55,10 +62,7 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
       testID: testID,
       accessible: a11y.accessible,
       accessibilityLabel: a11y.accessibilityLabel,
-      style: [filterChipStructure(theme), {
-        backgroundColor: colors.background,
-        borderColor: colors.border
-      }, style],
+      style: [chipStyle, style],
       children: content
     });
   }
@@ -68,12 +72,14 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
     onPress: onRemove,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
     hitSlop: FILTER_CHIP_HIT_SLOP,
-    style: [filterChipStructure(theme), {
-      backgroundColor: colors.background,
-      borderColor: colors.border
-    }, style],
-    children: content
+    style: style,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [chipStyle, press.style],
+      children: content
+    })
   });
 });
 //# sourceMappingURL=FilterChip.js.map

package/lib/module/modules/filter-sheet/FilterSheet.js

@@ -22,6 +22,8 @@
  */
 
 import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Animated } from "react-native";
+import { useEnterExit } from "../../core/motion/index.js";
 import { Drawer } from "../drawer/index.js";
 import { FilterSheetBody } from "./FilterSheetBody.js";
 import { applyQuickToggle, normalizeFilterValues, resolveResetValues } from "./filterSheet.helpers.js";
@@ -43,6 +45,7 @@ export const FilterSheet = /*#__PURE__*/memo(function FilterSheet({
 }) {
   const [staged, setStaged] = useState(() => normalizeFilterValues(dimensions, values));
   const wasVisible = useRef(visible);
+  const reveal = useEnterExit(visible);
 
   // Re-seed staged from `values` only on the closed→open transition — an edit made while the sheet
   // stays open (or a `values`/`dimensions` identity change from the consumer while it's open) is
@@ -81,17 +84,20 @@ export const FilterSheet = /*#__PURE__*/memo(function FilterSheet({
     visible: visible,
     onRequestClose: handleDismiss,
     testID: testID,
-    children: /*#__PURE__*/_jsx(FilterSheetBody, {
-      dimensions: dimensions,
-      staged: staged,
-      onQuickToggle: handleQuickToggle,
-      onDimensionChange: handleDimensionChange,
-      onApply: handleApply,
-      onReset: onReset !== undefined ? handleReset : undefined,
-      title: title,
-      applyLabel: applyLabel,
-      resetLabel: resetLabel,
-      testID: testID
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: reveal.style,
+      children: /*#__PURE__*/_jsx(FilterSheetBody, {
+        dimensions: dimensions,
+        staged: staged,
+        onQuickToggle: handleQuickToggle,
+        onDimensionChange: handleDimensionChange,
+        onApply: handleApply,
+        onReset: onReset !== undefined ? handleReset : undefined,
+        title: title,
+        applyLabel: applyLabel,
+        resetLabel: resetLabel,
+        testID: testID
+      })
     })
   });
 });

package/lib/module/modules/filter-sheet/FilterSheet.variants.js

@@ -17,6 +17,7 @@
  * only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { removeAccessibilityLabel } from "../../core/a11y/labels.js";
 import { createThemedVariants } from "../../core/style/index.js";
 
 /** Same touch-target floor as every interactive control in this library (44dp — Apple HIG minimum,
@@ -56,16 +57,18 @@ export function resolveFilterChipColors(colors) {
 }
 /**
  * Derives `FilterChip`'s a11y surface once, purely. Removable → `accessibilityRole="button"` with a
- * label that folds in the remove affordance (`"${label}, remove filter"`) so a screen reader
- * announces what the press does — the same "one accessible node reports the whole meaning"
- * contract `Badge` documents for its own chip. Locked (no `onRemove`) → no role at all: the
- * component renders a plain `View`, not a `Pressable`, so there is nothing to press.
+ * label that folds in the remove affordance so a screen reader announces what the press does — the
+ * same "one accessible node reports the whole meaning" contract `Badge` documents for its own chip.
+ * That wording comes from `core/a11y/labels`, shared with `chip` and `file-upload`, because three
+ * different names for one X affordance on one screen is a WCAG 3.2.4 failure. Locked (no
+ * `onRemove`) → no role at all: the component renders a plain `View`, not a `Pressable`, so there
+ * is nothing to press.
  */
 export function resolveFilterChipAccessibility(input) {
   return input.removable ? {
     accessible: true,
     accessibilityRole: "button",
-    accessibilityLabel: `${input.label}, remove filter`
+    accessibilityLabel: removeAccessibilityLabel(input.label)
   } : {
     accessible: true,
     accessibilityRole: undefined,
@@ -96,6 +99,22 @@ export function resolveQuickChipColors(colors, selected) {
     text: colors.fg.default
   };
 }
+/**
+ * Derives the quick chip's a11y surface purely. The pair is the one `docs/PLATFORM-A11Y-PROPS.md`
+ * prescribes for a toggle button, the one case where the two vocabularies genuinely diverge: each
+ * prop is inert on the platform it isn't aimed at, so neither is belt-and-braces. Unlike `Button`'s
+ * optional `selected`, a quick chip is ALWAYS a toggle, so both halves are always emitted.
+ */
+export function resolveQuickChipAccessibility(input) {
+  return {
+    accessibilityRole: "button",
+    accessibilityLabel: input.label,
+    "aria-pressed": input.selected,
+    accessibilityState: {
+      selected: input.selected
+    }
+  };
+}
 
 /** The header row hosting the sheet's title. */
 export const filterSheetHeaderStructure = createThemedVariants(theme => ({

package/lib/module/modules/filter-sheet/FilterSheetBody.js

@@ -3,27 +3,34 @@
 /**
  * FilterSheetBody — PRIVATE sub-component (not exported from `index.ts`, same status as
  * `BottomNavOverflowSheet`), handed to `FilterSheet.tsx`'s `<Drawer>` as `children`: the title
- * header, each dimension's optional quick-chip row, a single-open `Accordion` of per-dimension
- * facet controls, and the Apply/Reset footer.
+ * header, each dimension's optional quick-chip row, the per-dimension facet controls, and the
+ * Apply/Reset footer.
  *
- * Caps its own scrollable dimension list to a fraction of the window via
- * `resolveFilterSheetBodyHeight` — the same "keep the header/footer fixed, only the middle scrolls"
- * shape `BottomNavOverflowSheet` uses for its own search box + rows — so Apply/Reset stay reachable
- * regardless of how many dimensions a consumer supplies, all still within Drawer's own 90%-of-window
- * cap.
+ * The scrollable middle is ONE `VirtualList` over a flat row list — every dimension's quick-chip row
+ * first (unchanged order), then every dimension's own collapsible section — so a consumer supplying
+ * a long `dimensions` array mounts only the visible rows. A single `openKey` here keeps the
+ * "one section open at a time" contract that a single shared `Accordion` used to provide, now that
+ * each row owns its own one-item `Accordion`.
+ *
+ * Caps that list to a fraction of the window via `resolveFilterSheetBodyHeight` — the same
+ * "keep the header/footer fixed, only the middle scrolls" shape `BottomNavOverflowSheet` uses — so
+ * Apply/Reset stay reachable regardless of how many dimensions a consumer supplies, all still
+ * within Drawer's own 90%-of-window cap.
  */
 
-import { useMemo } from "react";
-import { Pressable, ScrollView, Text, useWindowDimensions, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Animated, Pressable, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { VirtualList } from "../../core/list/index.js";
+import { usePressMotion } from "../../core/motion/index.js";
 import { Accordion } from "../accordion/index.js";
 import { Button } from "../button/index.js";
 import { MultiSelect } from "../multi-select/index.js";
 import { RadioGroup } from "../radio-group/index.js";
-import { isOptionSelected } from "./filterSheet.helpers.js";
-import { filterSheetFooterStructure, filterSheetHeaderStructure, filterSheetQuickRowStructure, QUICK_CHIP_HIT_SLOP, quickChipStructure, resolveFilterSheetBodyHeight, resolveQuickChipColors } from "./FilterSheet.variants.js";
+import { filterSheetFooterStructure, filterSheetHeaderStructure, filterSheetQuickRowStructure, QUICK_CHIP_HIT_SLOP, quickChipStructure, resolveFilterSheetBodyHeight, resolveQuickChipAccessibility, resolveQuickChipColors } from "./FilterSheet.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function FilterSheetBody({
+const hasQuickOption = dimension => dimension.options.some(option => option.quick === true);
+export const FilterSheetBody = /*#__PURE__*/memo(function FilterSheetBody({
   dimensions,
   staged,
   onQuickToggle,
@@ -39,58 +46,60 @@ export function FilterSheetBody({
   const {
     height: windowHeight
   } = useWindowDimensions();
-  const bodyHeight = resolveFilterSheetBodyHeight(windowHeight);
-
-  // `useMemo`'d — this array (and the JSX it holds) goes straight into `Accordion`'s `items` prop,
-  // so a fresh array here on every render would defeat that child's `React.memo` regardless of
-  // whether `dimensions`/`staged` actually changed. See CLAUDE.md's "FilterSheet dimensions" example.
-  const accordionItems = useMemo(() => dimensions.map(dimension => ({
-    value: dimension.key,
-    title: dimension.label,
-    content: /*#__PURE__*/_jsx(DimensionControl, {
-      dimension: dimension,
-      value: staged[dimension.key],
-      onChange: next => onDimensionChange(dimension, next),
-      testID: testID ? `${testID}-control-${dimension.key}` : undefined
-    })
-  })), [dimensions, staged, onDimensionChange, testID]);
+  const [openKey, setOpenKey] = useState("");
+  const headerStyle = useMemo(() => filterSheetHeaderStructure(theme), [theme]);
+  const footerStyle = useMemo(() => filterSheetFooterStructure(theme), [theme]);
+  const quickRowStyle = useMemo(() => filterSheetQuickRowStructure(theme), [theme]);
+  const bodyStyle = useMemo(() => ({
+    maxHeight: resolveFilterSheetBodyHeight(windowHeight)
+  }), [windowHeight]);
+  const titleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+    fontSize: theme.fontSizes.lg,
+    color: theme.colors.fg.default
+  }], [theme]);
+  const rows = useMemo(() => [...dimensions.filter(hasQuickOption).map(dimension => ({
+    kind: "quick",
+    dimension
+  })), ...dimensions.map(dimension => ({
+    kind: "section",
+    dimension
+  }))], [dimensions]);
+  const keyExtractor = useCallback(row => `${row.kind}-${row.dimension.key}`, []);
+  const renderRow = useCallback(({
+    item: row
+  }) => row.kind === "quick" ? /*#__PURE__*/_jsx(QuickChipRow, {
+    dimension: row.dimension,
+    value: staged[row.dimension.key],
+    rowStyle: quickRowStyle,
+    onToggle: onQuickToggle,
+    testID: testID
+  }) : /*#__PURE__*/_jsx(DimensionSection, {
+    dimension: row.dimension,
+    value: staged[row.dimension.key],
+    expanded: openKey === row.dimension.key,
+    onOpenChange: setOpenKey,
+    onChange: onDimensionChange,
+    testID: testID
+  }), [staged, quickRowStyle, onQuickToggle, onDimensionChange, openKey, testID]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     children: [/*#__PURE__*/_jsx(View, {
-      style: filterSheetHeaderStructure(theme),
+      style: headerStyle,
       children: /*#__PURE__*/_jsx(Text, {
         accessibilityRole: "header",
-        style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-          fontSize: theme.fontSizes.lg,
-          color: theme.colors.fg.default
-        }],
+        style: titleStyle,
         children: title
       })
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      style: {
-        maxHeight: bodyHeight
-      },
-      bounces: false,
-      children: [dimensions.map(dimension => {
-        const quickOptions = dimension.options.filter(option => option.quick === true);
-        if (quickOptions.length === 0) return null;
-        return /*#__PURE__*/_jsx(View, {
-          testID: testID ? `${testID}-quick-${dimension.key}` : undefined,
-          style: filterSheetQuickRowStructure(theme),
-          children: quickOptions.map(option => /*#__PURE__*/_jsx(QuickChip, {
-            label: option.label,
-            selected: isOptionSelected(dimension, staged, option.value),
-            onPress: () => onQuickToggle(dimension, option.value),
-            testID: testID ? `${testID}-quick-${dimension.key}-${option.value}` : undefined
-          }, option.value))
-        }, `${dimension.key}-quick`);
-      }), /*#__PURE__*/_jsx(Accordion, {
-        type: "single",
-        items: accordionItems,
-        testID: testID ? `${testID}-accordion` : undefined
-      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: bodyStyle,
+      children: /*#__PURE__*/_jsx(VirtualList, {
+        data: rows,
+        keyExtractor: keyExtractor,
+        renderItem: renderRow,
+        testID: testID ? `${testID}-list` : undefined
+      })
     }), /*#__PURE__*/_jsxs(View, {
-      style: filterSheetFooterStructure(theme),
+      style: footerStyle,
       children: [onReset !== undefined && /*#__PURE__*/_jsx(Button, {
         variant: "ghost",
         tone: "neutral",
@@ -106,25 +115,55 @@ export function FilterSheetBody({
       })]
     })]
   });
-}
+});
+/** One dimension's collapsible facet section. A one-item `Accordion` per row, with the open key
+ *  lifted to the body — a shared `Accordion` can't survive virtualisation. */
+const DimensionSection = /*#__PURE__*/memo(function DimensionSection({
+  dimension,
+  value,
+  expanded,
+  onOpenChange,
+  onChange,
+  testID
+}) {
+  const handleChange = useCallback(next => onChange(dimension, next), [onChange, dimension]);
+  const controlTestID = testID ? `${testID}-control-${dimension.key}` : undefined;
+  const items = useMemo(() => [{
+    value: dimension.key,
+    title: dimension.label,
+    renderContent: () => /*#__PURE__*/_jsx(DimensionControl, {
+      dimension: dimension,
+      value: value,
+      onChange: handleChange,
+      testID: controlTestID
+    })
+  }], [dimension, value, handleChange, controlTestID]);
+  return /*#__PURE__*/_jsx(Accordion, {
+    type: "single",
+    items: items,
+    value: expanded ? dimension.key : "",
+    onValueChange: onOpenChange,
+    testID: testID ? `${testID}-accordion` : undefined
+  });
+});
 /**
  * Picks a dimension's own facet control by `kind` — `multi` reuses `../multi-select`'s
  * checkbox-sheet picker, `single` reuses `../radio-group`'s inline "choose exactly one of N" rows.
  * Per CLAUDE.md's component decision order (use an existing export, never hand-roll one), and per
  * `RadioGroup`'s own MODULE.md, which is exactly this shape: a single-select group of options.
  */
-function DimensionControl({
+const DimensionControl = /*#__PURE__*/memo(function DimensionControl({
   dimension,
   value,
   onChange,
   testID
 }) {
-  const options = dimension.options.map(option => ({
+  const options = useMemo(() => dimension.options.map(option => ({
     label: option.label,
     value: option.value
-  }));
+  })), [dimension.options]);
+  const values = useMemo(() => Array.isArray(value) ? value : [], [value]);
   if (dimension.kind === "multi") {
-    const values = Array.isArray(value) ? value : [];
     return /*#__PURE__*/_jsx(MultiSelect, {
       options: options,
       values: values,
@@ -139,37 +178,84 @@ function DimensionControl({
     onValueChange: onChange,
     testID: testID
   });
-}
+});
+/** One dimension's wrapped row of quick-shortcut pills. */
+const QuickChipRow = /*#__PURE__*/memo(function QuickChipRow({
+  dimension,
+  value,
+  rowStyle,
+  onToggle,
+  testID
+}) {
+  const quickOptions = useMemo(() => dimension.options.filter(option => option.quick === true), [dimension.options]);
+
+  // Same semantics as `isOptionSelected`, hoisted to a Set so each chip's lookup is O(1).
+  const selectedValues = useMemo(() => {
+    if (dimension.kind === "multi") return new Set(Array.isArray(value) ? value : []);
+    return new Set(typeof value === "string" && value.length > 0 ? [value] : []);
+  }, [dimension.kind, value]);
+  const handleToggle = useCallback(optionValue => onToggle(dimension, optionValue), [onToggle, dimension]);
+  if (quickOptions.length === 0) return null;
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID ? `${testID}-quick-${dimension.key}` : undefined,
+    style: rowStyle,
+    children: quickOptions.map(option => /*#__PURE__*/_jsx(QuickChip, {
+      label: option.label,
+      value: option.value,
+      selected: selectedValues.has(option.value),
+      onPress: handleToggle,
+      testID: testID ? `${testID}-quick-${dimension.key}-${option.value}` : undefined
+    }, option.value))
+  });
+});
 /** The one-tap quick-shortcut pill — a distinct, PRIVATE component from the public `FilterChip` (see
  *  `FilterSheet.variants.ts`'s file header for why the two can't share a shape). */
-function QuickChip({
+const QuickChip = /*#__PURE__*/memo(function QuickChip({
   label,
+  value,
   selected,
   onPress,
   testID
 }) {
   const theme = useTheme();
-  const colors = resolveQuickChipColors(theme.colors, selected);
+  const press = usePressMotion();
+  const handlePress = useCallback(() => onPress(value), [onPress, value]);
+  const colors = useMemo(() => resolveQuickChipColors(theme.colors, selected), [theme.colors, selected]);
+  const a11y = useMemo(() => resolveQuickChipAccessibility({
+    label,
+    selected
+  }), [label, selected]);
+  const structure = useMemo(() => quickChipStructure(theme), [theme]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(selected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.text
+  }], [theme, selected, colors]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID,
-    accessibilityRole: "button",
-    accessibilityState: {
-      selected
-    },
-    accessibilityLabel: label,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: a11y.accessibilityLabel,
+    "aria-pressed": a11y["aria-pressed"],
+    accessibilityState: a11y.accessibilityState,
     hitSlop: QUICK_CHIP_HIT_SLOP,
-    onPress: onPress,
-    style: [quickChipStructure(theme), {
-      backgroundColor: colors.background,
-      borderColor: colors.border
-    }],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [theme.fontStyleForWeight(selected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
-        fontSize: theme.fontSizes.sm,
-        color: colors.text
-      }],
-      children: label
+    onPress: handlePress,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
+    style: styles.chip,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [structure, {
+        backgroundColor: colors.background,
+        borderColor: colors.border
+      }, press.style],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: labelStyle,
+        children: label
+      })
     })
   });
-}
+});
+const styles = StyleSheet.create({
+  chip: {
+    alignSelf: "flex-start"
+  }
+});
 //# sourceMappingURL=FilterSheetBody.js.map