pixelize-native-library 1.0.7 → 1.2.1

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

@@ -0,0 +1,163 @@
+"use strict";
+
+/**
+ * FileGrid — thumbnail grid for attachments or folders. Icon + label cells in 2–4 columns.
+ *
+ * Items are chunked into fixed-height rows and rendered through `core/list`'s `VirtualList`, so a
+ * folder with thousands of files mounts a window of rows rather than every cell.
+ */
+
+import { memo, useCallback, useMemo } from "react";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { VirtualList } from "../../core/list/index.js";
+import { concentric } from "../../core/style/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
+import { fileGridCellStructure, fileGridRowHeight, fileGridRowStructure, resolveFileGridItemLabel } from "./FileGrid.variants.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+const ICON_SIZE = 28;
+const DEFAULT_ICON = "file-text";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+function rowKeyExtractor(row) {
+  return row.key;
+}
+export const FileGrid = /*#__PURE__*/memo(function FileGrid({
+  items,
+  columns = 3,
+  onItemPress,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rows = useMemo(() => {
+    const chunks = [];
+    for (let start = 0; start < items.length; start += columns) {
+      const chunk = items.slice(start, start + columns);
+      chunks.push({
+        key: chunk[0]?.id ?? `row-${start}`,
+        items: chunk
+      });
+    }
+    return chunks;
+  }, [items, columns]);
+  const rowStyle = useMemo(() => fileGridRowStructure(theme), [theme]);
+  const cellStyle = useMemo(() => [fileGridCellStructure(theme, {
+    columns
+  }), {
+    backgroundColor: theme.colors.bg.raised
+  }], [theme, columns]);
+  const textStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.default,
+    textAlign: "center",
+    marginTop: theme.space[1]
+  }], [theme]);
+  const itemHeight = useMemo(() => fileGridRowHeight(theme.space[2]), [theme]);
+  const renderRow = useCallback(({
+    item: row
+  }) => /*#__PURE__*/_jsx(FileGridRow, {
+    row: row,
+    rowStyle: rowStyle,
+    cellStyle: cellStyle,
+    textStyle: textStyle,
+    iconColor: theme.colors.accent.text,
+    onItemPress: onItemPress,
+    testID: testID
+  }), [rowStyle, cellStyle, textStyle, theme, onItemPress, testID]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: style,
+    children: /*#__PURE__*/_jsx(VirtualList, {
+      data: rows,
+      renderItem: renderRow,
+      keyExtractor: rowKeyExtractor,
+      itemHeight: itemHeight
+    })
+  });
+});
+const FileGridCell = /*#__PURE__*/memo(function FileGridCell({
+  item,
+  cellStyle,
+  textStyle,
+  iconColor,
+  onItemPress,
+  testID
+}) {
+  const theme = useTheme();
+  const press = usePressState(onItemPress === undefined);
+  const handlePress = useCallback(() => onItemPress?.(item.id), [onItemPress, item.id]);
+  const accessibleLabel = resolveFileGridItemLabel(item.label, item.typeLabel);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: concentric(theme.radii.lg, theme.space[2]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.lg, theme.space]);
+  const pressableStyle = useMemo(() => [cellStyle, {
+    overflow: "hidden"
+  }, press.animatedStyle], [cellStyle, press.animatedStyle]);
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      name: item.icon ?? DEFAULT_ICON,
+      size: ICON_SIZE,
+      color: iconColor,
+      strokeWidth: ICON_STROKE
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 2,
+      style: textStyle,
+      children: item.label
+    })]
+  });
+  if (onItemPress === undefined) {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      accessible: true,
+      accessibilityLabel: accessibleLabel,
+      style: cellStyle,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibleLabel,
+    onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    android_ripple: Platform.OS === "android" ? {
+      color: rippleColor(theme.mode),
+      borderless: false
+    } : undefined,
+    style: pressableStyle,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), content]
+  });
+});
+const FileGridRow = /*#__PURE__*/memo(function FileGridRow({
+  row,
+  rowStyle,
+  cellStyle,
+  textStyle,
+  iconColor,
+  onItemPress,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: rowStyle,
+    children: row.items.map(item => /*#__PURE__*/_jsx(FileGridCell, {
+      item: item,
+      cellStyle: cellStyle,
+      textStyle: textStyle,
+      iconColor: iconColor,
+      onItemPress: onItemPress,
+      testID: testID === undefined ? undefined : `${testID}-cell-${item.id}`
+    }, item.id))
+  });
+});
+//# sourceMappingURL=FileGrid.js.map

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

@@ -0,0 +1,51 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+/**
+ * A cell's accessible name. The glyph is the ONLY thing that says whether a cell is a folder, an
+ * image or a document, and a glyph has no text equivalent (WCAG 1.3.1) — `typeLabel` is that
+ * equivalent. It has to come from the consumer: an `IconName` is a drawing, not a file type.
+ */
+export function resolveFileGridItemLabel(label, typeLabel) {
+  return typeLabel === undefined ? label : `${label}, ${typeLabel}`;
+}
+export const FILE_GRID_CELL_MIN_HEIGHT = 88;
+
+/** Fixed row height is what lets `VirtualList` derive `getItemLayout` for the grid. */
+export function fileGridRowHeight(gap) {
+  return FILE_GRID_CELL_MIN_HEIGHT + gap;
+}
+export const fileGridRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    columnGap: theme.space[2],
+    marginBottom: theme.space[2]
+  }
+}));
+export const fileGridCellStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
+    padding: theme.space[2],
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: FILE_GRID_CELL_MIN_HEIGHT
+  },
+  variants: {
+    columns: {
+      2: {
+        width: "48%"
+      },
+      3: {
+        width: "31%"
+      },
+      4: {
+        width: "23%"
+      }
+    }
+  },
+  defaultVariants: {
+    columns: 3
+  }
+}));
+//# sourceMappingURL=FileGrid.variants.js.map

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

@@ -0,0 +1,14 @@
+# file-grid/
+
+Grid of file/folder cells with icon + label. `columns`: 2 | 3 | 4. Cells are a tonal `bg.raised`
+fill, no hairline border — the same borderless-tile treatment `Card`'s `elevated` variant uses.
+
+## Accessibility contract (WCAG)
+
+- **1.3.1** — file **type** (folder vs. image vs. document) is conveyed only by the icon glyph, and a
+  glyph has no text equivalent. `FileGridItem.typeLabel` (optional) supplies it; a cell's accessible
+  name is `resolveFileGridItemLabel(label, typeLabel)` → `"<label>, <typeLabel>"`, falling back to
+  `label` alone when the consumer names no type. Applies to both a pressable cell
+  (`accessibilityLabel`) and a read-only one (wrapped `accessible` + `accessibilityLabel`, which it
+  did not carry at all before).
+- **Press feedback** — cells with `onPress` use `usePressState` (scale + state-layer overlay).

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

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

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

@@ -19,12 +19,109 @@
  * resolver" for why that's a deliberate departure from every sibling module's structure/colour split.
  */
 
-import { memo, useCallback, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { useAnnounce } from "../../core/a11y/index.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/index.js";
 import { Button } from "../button/index.js";
-import { FILE_UPLOAD_PICK_ERROR_MESSAGE, fileUploadContainerStructure, fileUploadRowStructure, pickDocumentFile, pickImageFile, resolveFileUploadRemoveLabel, resolveFileUploadTriggerLabel } from "./FileUpload.variants.js";
+import { FILE_UPLOAD_PICK_ERROR_MESSAGE, FILE_UPLOAD_PROGRESS_LABEL, fileUploadContainerStructure, fileUploadProgressFillStructure, fileUploadProgressTrackStructure, fileUploadRowStructure, pickDocumentFile, pickImageFile, resolveFileUploadProgressFraction, resolveFileUploadProgressPercent, resolveFileUploadRemoveLabel, resolveFileUploadTriggerLabel } from "./FileUpload.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FileUploadRow = /*#__PURE__*/memo(function FileUploadRow({
+  name,
+  disabled,
+  onRemove,
+  testID,
+  removeTestID
+}) {
+  const theme = useTheme();
+  const rowStyle = useMemo(() => [fileUploadRowStructure(theme), {
+    borderColor: theme.colors.border.interactive,
+    backgroundColor: theme.colors.bg.surface
+  }], [theme]);
+  const nameStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    flex: 1,
+    fontSize: theme.fontSizes.md,
+    color: theme.colors.fg.default
+  }, disabled ? styles.dimmedText : null], [theme, disabled]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: rowStyle,
+    children: [/*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: nameStyle,
+      children: name
+    }), /*#__PURE__*/_jsx(Button, {
+      icon: "trash",
+      accessibilityLabel: resolveFileUploadRemoveLabel(name),
+      onPress: onRemove,
+      disabled: disabled,
+      size: "sm",
+      variant: "ghost",
+      tone: "neutral",
+      testID: removeTestID
+    })]
+  });
+});
+/**
+ * The upload-progress track. State-driven (it moves when `progress` moves, never during a scroll),
+ * and driven entirely by `scaleX` on the native driver — `width` would force a layout pass per
+ * frame and cannot leave the JS thread at all.
+ */
+const FileUploadProgress = /*#__PURE__*/memo(function FileUploadProgress({
+  progress,
+  testID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const fraction = resolveFileUploadProgressFraction(progress);
+  const percent = resolveFileUploadProgressPercent(progress);
+  const scaleX = useAnimatedValue(fraction);
+  const running = useRef(null);
+  useEffect(() => {
+    running.current?.stop();
+    if (!motion.enabled) {
+      scaleX.setValue(fraction);
+      return undefined;
+    }
+    running.current = motion.timing(scaleX, fraction, {
+      easing: "decelerate"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [fraction, motion, scaleX]);
+  useEffect(() => () => running.current?.stop(), []);
+  const trackStyle = useMemo(() => [fileUploadProgressTrackStructure(theme), {
+    backgroundColor: theme.colors.bg.sunken
+  }], [theme]);
+  const fillStyle = useMemo(() => [fileUploadProgressFillStructure(), {
+    backgroundColor: theme.colors.accent.solid,
+    transform: [{
+      scaleX
+    }]
+  }], [theme, scaleX]);
+  return (
+    /*#__PURE__*/
+    // Flat `aria-value*`, not `accessibilityValue={{…}}`: react-native-web 0.21 drops the object, so
+    // on web this announced `role="progressbar"` with no percentage. `View` merges the flat props
+    // into the object form natively, so this one form is correct on both platforms.
+    _jsx(View, {
+      testID: testID,
+      accessible: true,
+      accessibilityRole: "progressbar",
+      accessibilityLabel: FILE_UPLOAD_PROGRESS_LABEL,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": percent,
+      style: trackStyle,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        testID: testID ? `${testID}-fill` : undefined,
+        style: fillStyle
+      })
+    })
+  );
+});
 export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
   const {
     source,
@@ -35,6 +132,7 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
     disabled = false,
     allowedMimeTypes,
     allowsEditing = false,
+    progress,
     style,
     testID
   } = props;
@@ -42,6 +140,7 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
   // Distinct from `value`: a pick attempt can fail (denied permission, or any other native error)
   // independently of whether a file was already selected — see `openPicker`'s catch block.
   const [pickError, setPickError] = useState(false);
+  useAnnounce(pickError ? FILE_UPLOAD_PICK_ERROR_MESSAGE : undefined);
   const openPicker = useCallback(async () => {
     if (disabled) return;
     setPickError(false);
@@ -75,47 +174,38 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
     setPickError(false);
     onChange(null);
   }, [onChange]);
+  const rootStyle = useMemo(() => [fileUploadContainerStructure(theme), style], [theme, style]);
+  const errorStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.xs,
+    color: theme.colors.status.danger.text
+  }], [theme]);
+  const triggerLabel = useMemo(() => resolveFileUploadTriggerLabel(label, value), [label, value]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
-    style: [fileUploadContainerStructure(theme), style],
+    style: rootStyle,
     children: [/*#__PURE__*/_jsx(Button, {
       label: label,
       icon: "upload",
       onPress: handlePick,
       disabled: disabled,
       size: size,
-      accessibilityLabel: resolveFileUploadTriggerLabel(label, value),
+      accessibilityLabel: triggerLabel,
       testID: testID ? `${testID}-trigger` : undefined
-    }), value && /*#__PURE__*/_jsxs(View, {
+    }), value && /*#__PURE__*/_jsx(FileUploadRow, {
+      name: value.name,
+      disabled: disabled,
+      onRemove: handleRemove,
       testID: testID ? `${testID}-row` : undefined,
-      style: [fileUploadRowStructure(theme), {
-        borderColor: theme.colors.border.interactive,
-        backgroundColor: theme.colors.bg.surface
-      }],
-      children: [/*#__PURE__*/_jsx(Text, {
-        numberOfLines: 1,
-        style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-          flex: 1,
-          fontSize: theme.fontSizes.md,
-          color: theme.colors.fg.default
-        }, disabled && styles.dimmedText],
-        children: value.name
-      }), /*#__PURE__*/_jsx(Button, {
-        icon: "trash",
-        accessibilityLabel: resolveFileUploadRemoveLabel(value.name),
-        onPress: handleRemove,
-        disabled: disabled,
-        size: "sm",
-        variant: "ghost",
-        tone: "neutral",
-        testID: testID ? `${testID}-remove` : undefined
-      })]
-    }), pickError && /*#__PURE__*/_jsx(Text, {
-      accessibilityLiveRegion: "polite",
-      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-        fontSize: theme.fontSizes.xs,
-        color: theme.colors.status.danger.text
-      }],
+      removeTestID: testID ? `${testID}-remove` : undefined
+    }), progress !== undefined && /*#__PURE__*/_jsx(FileUploadProgress, {
+      progress: progress,
+      testID: testID ? `${testID}-progress` : undefined
+    }), pickError &&
+    /*#__PURE__*/
+    // No `accessibilityLiveRegion` (deliberate): it's Android-only, and `useAnnounce` above
+    // already announces on both platforms — keeping both would double-announce on Android.
+    _jsx(Text, {
+      style: errorStyle,
       children: FILE_UPLOAD_PICK_ERROR_MESSAGE
     })]
   });

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,51 @@ 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,
+    borderCurve: "continuous",
+    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
@@ -171,7 +215,8 @@ export const fileUploadRowStructure = createThemedVariants(theme => ({
     alignItems: "center",
     columnGap: theme.space[2],
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2]
   }

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,11 @@ 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.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.