@oxyhq/services 30.0.0 → 30.1.0

package/lib/commonjs/ui/screens/fileManagement/FileListSection.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _Ionicons = _interopRequireDefault(require("@expo/vector-icons/Ionicons"));
+var _settingsList = require("@oxyhq/bloom/settings-list");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** A pre-built list row descriptor (produced by the orchestrator's memo). */
+
+/**
+ * The non-photo file list (list-style `all`/`videos`/`documents`/`audio`
+ * views). Extracted verbatim from FileManagementScreen — the orchestrator
+ * still owns the item construction and pagination logic and threads them in.
+ */
+const FileListSection = ({
+  scrollViewRef,
+  filteredFiles,
+  searchQuery,
+  items,
+  paging,
+  refreshing,
+  colors,
+  t,
+  onRefresh,
+  onLoadMore,
+  onClearSearch,
+  renderEmptyState
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    ref: scrollViewRef,
+    className: "flex-1",
+    style: {
+      flex: 1
+    },
+    contentContainerClassName: "px-space-12 pt-0 pb-space-12",
+    refreshControl: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
+      refreshing: refreshing,
+      onRefresh: onRefresh,
+      tintColor: colors.primary
+    }),
+    onScroll: ({
+      nativeEvent
+    }) => {
+      const {
+        layoutMeasurement,
+        contentOffset,
+        contentSize
+      } = nativeEvent;
+      const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
+      if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
+        onLoadMore();
+      }
+    },
+    scrollEventThrottle: 250,
+    children: filteredFiles.length === 0 && searchQuery.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: "items-center py-10 px-space-24",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+        name: "search",
+        size: 64,
+        color: colors.textTertiary
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        className: "text-[24px] font-bold mt-space-16 mb-space-8",
+        style: {
+          color: colors.text
+        },
+        children: t('fileManagement.noResults.title')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        className: "text-[16px] text-center leading-[24px] mb-space-32",
+        style: {
+          color: colors.textSecondary
+        },
+        children: t('fileManagement.noResults.description', {
+          query: searchQuery
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        className: "flex-row items-center px-space-24 py-space-12 rounded-[24px] gap-space-8",
+        style: {
+          backgroundColor: colors.primary
+        },
+        onPress: onClearSearch,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+          name: "refresh",
+          size: 20,
+          color: "#FFFFFF"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          className: "text-white text-[16px] font-semibold",
+          children: t('fileManagement.clearSearch')
+        })]
+      })]
+    }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
+        children: items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: item.icon,
+          title: item.title,
+          description: item.description,
+          onPress: item.onPress,
+          showChevron: false,
+          rightElement: item.rightElement
+        }, item.id))
+      }), paging.loadingMore && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        className: "flex-row items-center justify-center py-space-12 gap-space-8",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          size: "small",
+          color: colors.primary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          className: "text-[13px] font-medium",
+          style: {
+            color: colors.text
+          },
+          children: t('fileManagement.loadingMore')
+        })]
+      })]
+    })
+  });
+};
+var _default = exports.default = FileListSection;
+//# sourceMappingURL=FileListSection.js.map

package/lib/commonjs/ui/screens/fileManagement/FileListSection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_Ionicons","_interopRequireDefault","_settingsList","_jsxRuntime","e","__esModule","default","FileListSection","scrollViewRef","filteredFiles","searchQuery","items","paging","refreshing","colors","t","onRefresh","onLoadMore","onClearSearch","renderEmptyState","jsx","ScrollView","ref","className","style","flex","contentContainerClassName","refreshControl","RefreshControl","tintColor","primary","onScroll","nativeEvent","layoutMeasurement","contentOffset","contentSize","distanceFromBottom","height","y","loadingMore","hasMore","scrollEventThrottle","children","length","jsxs","View","name","size","color","textTertiary","Text","text","textSecondary","query","TouchableOpacity","backgroundColor","onPress","Fragment","SettingsListGroup","map","item","SettingsListItem","icon","title","description","showChevron","rightElement","id","ActivityIndicator","_default","exports"],"sourceRoot":"../../../../../src","sources":["ui/screens/fileManagement/FileListSection.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/screens/fileManagement/PhotoPickerSection.js

@@ -0,0 +1,552 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _expoImage = require("expo-image");
+var _Ionicons = _interopRequireDefault(require("@expo/vector-icons/Ionicons"));
+var _MaterialCommunityIcons = _interopRequireDefault(require("@expo/vector-icons/MaterialCommunityIcons"));
+var Skeleton = _interopRequireWildcard(require("@oxyhq/bloom/skeleton"));
+var _photoGridLayout = require("./photoGridLayout.js");
+var _FileLibraryError = _interopRequireDefault(require("./FileLibraryError.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } /**
+ * Haptic feedback wrapper. `expo-haptics` is an optional dependency — when not
+ * installed (or on web), all calls degrade silently. We resolve the module
+ * once and cache the promise so subsequent calls don't repeat the dynamic
+ * import. Matches the pattern used by AvatarCropScreen.
+ */
+let hapticsModulePromise = null;
+const getHaptics = () => {
+  if (_reactNative.Platform.OS === 'web') return Promise.resolve(null);
+  if (hapticsModulePromise) return hapticsModulePromise;
+  hapticsModulePromise = (async () => {
+    try {
+      const mod = await Promise.resolve().then(() => _interopRequireWildcard(require('expo-haptics')));
+      if (!mod || typeof mod.impactAsync !== 'function') return null;
+      return mod;
+    } catch {
+      return null;
+    }
+  })();
+  return hapticsModulePromise;
+};
+const hapticImpact = async style => {
+  const h = await getHaptics();
+  if (!h) return;
+  const styleEnum = style === 'heavy' ? h.ImpactFeedbackStyle.Heavy : style === 'medium' ? h.ImpactFeedbackStyle.Medium : h.ImpactFeedbackStyle.Light;
+  try {
+    await h.impactAsync(styleEnum);
+  } catch {
+    // Silent — haptics are non-critical UX polish.
+  }
+};
+const hapticSelection = async () => {
+  const h = await getHaptics();
+  if (!h) return;
+  try {
+    await h.selectionAsync();
+  } catch {
+    // Silent.
+  }
+};
+
+/**
+ * The picker renders inside a Bloom `<Dialog>` in NAV-HEADER mode with
+ * `tone: 'onImage'` (bottom-sheet on narrow, centered card on `md+`). The Dialog
+ * owns the shared gradient nav bar (Cancel / "Choose Photo" / Upload, wired by
+ * `FileManagementScreen` through `useSurfaceHeader`). Because the tone is
+ * `'onImage'`, the Dialog inserts NO nav-bar spacer above this content
+ * (`DialogNavBarSpacer` collapses to nothing), so the black photo grid slides UP
+ * under the floating translucent bar and reads EDGE-TO-EDGE — the Apple/Google
+ * Photos immersive picker. The grid therefore takes the FULL `frameSize` height
+ * and carries no top padding; only the pull-to-refresh spinner is offset so it
+ * lands below the floating bar.
+ *
+ * `FLOATING_NAV_BAR_HEIGHT` mirrors Bloom's `DIALOG_NAV_BAR_HEIGHT` (not exported
+ * from `@oxyhq/bloom/dialog`) — the height of the floating bar the refresh spinner
+ * must clear.
+ */
+const FLOATING_NAV_BAR_HEIGHT = 52;
+
+/**
+ * Props for the dedicated photo picker view. Used by FileManagementScreen
+ * only when `selectMode + image-only` is active. All callbacks are wired by
+ * the parent — this component is purely presentational.
+ */
+
+/**
+ * Photo-cell animation tuning. The cell uses RN's own `Animated` (NOT
+ * Reanimated): its entrance is a staggered opacity fade — replacing the
+ * Reanimated `entering={FadeIn}` LAYOUT animation, which cannot load on the
+ * RN-Web build (no `react-native-worklets` babel plugin) and only warns +
+ * no-ops there. RN `Animated` runs cross-platform: native-driven on device,
+ * JS-driven on web (`useNativeDriver: false`), so the fade actually plays on
+ * web instead of being skipped.
+ */
+const STAGGER_PER_CELL_MS = 15;
+const MAX_TOTAL_STAGGER_MS = 800;
+const ENTRANCE_DURATION_MS = 200;
+/** Selection-ring pulse: a quick scale bump that springs back to rest. */
+const RING_PULSE_PEAK = 1.05;
+const RING_PULSE_UP_MS = 110;
+const RING_SPRING_FRICTION = 9;
+const RING_SPRING_TENSION = 120;
+/**
+ * The selection ring is an `Animated.View` (its pulse transform must be inline,
+ * and `className` interop on `Animated.View` is not guaranteed under the RN-Web
+ * build), so these mirror the `rounded-radius-8 border-[3px]` design tokens.
+ */
+const CELL_CORNER_RADIUS = 8; // `rounded-radius-8`
+const SELECTION_RING_WIDTH = 3; // `border-[3px]`
+
+/**
+ * Loading-skeleton tile fill. The picker's backdrop is ALWAYS black regardless
+ * of theme, so we cannot use Bloom `Skeleton.Box`'s theme default (`contrast50`,
+ * which is a near-black gray on a dark theme → invisible on this backdrop). A
+ * neutral dark gray reads as a photo placeholder on black; Bloom's shimmer still
+ * pulses the tile opacity on top of it. `Skeleton.Box` applies `style` after its
+ * own base, so this override wins while the animated opacity is preserved.
+ */
+const SKELETON_TILE_COLOR = '#26262A';
+/** Minimum skeleton rows so the grid never looks empty on a very short panel. */
+const SKELETON_MIN_ROWS = 4;
+/**
+ * A single photo cell. Memoized so re-renders during selection only touch
+ * affected cells — selecting one photo must not redraw the whole grid.
+ *
+ * Apple Photos pattern: when any cell is selected, *non-selected* siblings fade
+ * to 0.6 opacity to focus attention on the active selection. A staggered
+ * entrance fade plays on mount; a spring pulse plays each time a cell enters the
+ * selected state. Both animations are pinned off under reduce-motion, so the
+ * one component covers both the animated and the reduced-motion paths.
+ */
+const PhotoPickerCell = /*#__PURE__*/_react.default.memo(function PhotoPickerCell(props) {
+  const {
+    photo,
+    size,
+    marginRight,
+    marginBottom,
+    isSelected,
+    selectionIndex,
+    dim,
+    primaryColor,
+    thumbUrl,
+    enterIndex,
+    reduceMotion,
+    onPress,
+    onLongPress,
+    a11yLabel
+  } = props;
+  const delay = Math.min(enterIndex * STAGGER_PER_CELL_MS, MAX_TOTAL_STAGGER_MS);
+
+  // Entrance fade, staggered by the cell's grid index. Started from the wrapper's
+  // ref callback (fires on mount) rather than an effect. Reduce-motion pins
+  // opacity at 1 and never animates.
+  //
+  // CRITICAL: `Animated.View` rebuilds its merged ref on every render, so React
+  // re-invokes this callback on EVERY commit (not just mount) — and re-running
+  // `Animated.timing().start()`/`setValue` each time drives a web re-render that
+  // re-fires the ref → "Maximum update depth exceeded" once the grid has cells.
+  // The `startedRef` latch makes it genuinely run-once per mount, breaking the
+  // loop. (jest/react-test-renderer never exercises the Animated merged-ref path,
+  // so this only reproduces in a real browser.)
+  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(reduceMotion ? 1 : 0)).current;
+  const startedRef = (0, _react.useRef)(false);
+  const startEntrance = (0, _react.useCallback)(node => {
+    if (!node) return; // unmount
+    if (startedRef.current) return; // ref re-fired on a later commit — already ran
+    startedRef.current = true;
+    if (reduceMotion) {
+      opacity.setValue(1);
+      return;
+    }
+    opacity.setValue(0);
+    _reactNative.Animated.timing(opacity, {
+      toValue: 1,
+      duration: ENTRANCE_DURATION_MS,
+      delay,
+      useNativeDriver: _reactNative.Platform.OS !== 'web'
+    }).start();
+  }, [opacity, delay, reduceMotion]);
+
+  // Selection-ring pulse: a quick scale bump that springs back to rest. The ring
+  // renders ONLY while selected, so its own mount IS the "became selected"
+  // signal — driven from the ring's ref callback, not an effect. Reduce-motion
+  // holds the ring at rest scale. Same run-once latch as the entrance (the ring's
+  // `Animated.View` re-fires this ref every commit too) — reset on unmount so a
+  // later re-selection pulses again.
+  const ringScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const pulsedRef = (0, _react.useRef)(false);
+  const startRingPulse = (0, _react.useCallback)(node => {
+    if (!node) {
+      pulsedRef.current = false; // ring unmounted (deselected) — arm the next pulse
+      return;
+    }
+    if (pulsedRef.current) return; // ref re-fired on a later commit — already pulsed
+    pulsedRef.current = true;
+    ringScale.setValue(1);
+    if (reduceMotion) return;
+    _reactNative.Animated.sequence([_reactNative.Animated.timing(ringScale, {
+      toValue: RING_PULSE_PEAK,
+      duration: RING_PULSE_UP_MS,
+      useNativeDriver: _reactNative.Platform.OS !== 'web'
+    }), _reactNative.Animated.spring(ringScale, {
+      toValue: 1,
+      friction: RING_SPRING_FRICTION,
+      tension: RING_SPRING_TENSION,
+      useNativeDriver: _reactNative.Platform.OS !== 'web'
+    })]).start();
+  }, [ringScale, reduceMotion]);
+  return (
+    /*#__PURE__*/
+    // The animated wrapper carries the entrance opacity + the layout box as
+    // inline `style`: animated values must be inline, and the box's
+    // size/margins are runtime pixels className cannot express. `className`
+    // drives the static chrome below (`flex-1` fills this fixed-size box).
+    (0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      ref: startEntrance,
+      style: {
+        width: size,
+        height: size,
+        marginRight,
+        marginBottom,
+        position: 'relative',
+        opacity
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        activeOpacity: 0.85,
+        onPress: onPress,
+        onLongPress: onLongPress,
+        className: "flex-1",
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: {
+          selected: isSelected
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          className: `flex-1 rounded-radius-8 overflow-hidden bg-[#111111]${dim ? ' opacity-60' : ''}`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+            source: {
+              uri: thumbUrl
+            },
+            style: {
+              width: '100%',
+              height: '100%'
+            },
+            contentFit: "cover",
+            transition: 120,
+            cachePolicy: "memory-disk",
+            accessibilityLabel: photo.filename
+          })
+        }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          ref: startRingPulse,
+          style: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            borderRadius: CELL_CORNER_RADIUS,
+            borderWidth: SELECTION_RING_WIDTH,
+            borderColor: primaryColor,
+            transform: [{
+              scale: ringScale
+            }],
+            pointerEvents: 'none'
+          }
+        }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          className: "absolute top-1.5 right-1.5 min-w-[22px] h-[22px] px-1.5 rounded-full items-center justify-center",
+          style: {
+            backgroundColor: primaryColor,
+            pointerEvents: 'none'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            className: "text-white text-[12px] font-bold leading-[14px]",
+            children: selectionIndex > 0 ? String(selectionIndex) : ''
+          })
+        })]
+      })
+    })
+  );
+});
+const PhotoPickerView = ({
+  photos,
+  selectedIds,
+  multiSelect,
+  maxSelection,
+  allowUpload,
+  refreshing,
+  uploading,
+  isPickingDocument,
+  hasMore,
+  loadingMore,
+  loading,
+  loadError,
+  onRetry,
+  reduceMotion,
+  getThumbUrl,
+  primaryColor,
+  isOwner,
+  onTogglePhoto,
+  onPreviewPhoto,
+  onUpload,
+  onRefresh,
+  onLoadMore,
+  t
+}) => {
+  // Grid sizing width. We PREFER the measured grid-container width (the
+  // bottom-sheet content width) so tiles size to the sheet, not the device
+  // screen — on wide viewports the sheet is centered/narrower than the screen.
+  // But we must NEVER gate the whole grid on that measurement: `onLayout` is
+  // unreliable on web (react-native-css can suppress it), and a grid that only
+  // renders after a measurement can stay blank forever. So we fall back to the
+  // window width until a real measurement arrives — the grid ALWAYS renders,
+  // then snaps to the sheet width once `onLayout` reports it. The measured
+  // wrapper carries ONLY a `style` (no `className`) to maximise the chance
+  // `onLayout` fires on web.
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const [gridWidth, setGridWidth] = (0, _react.useState)(0);
+  const onRootLayout = (0, _react.useCallback)(e => {
+    const w = Math.round(e.nativeEvent.layout.width);
+    setGridWidth(prev => prev === w ? prev : w);
+  }, []);
+
+  // The picker FILLS its panel: the surface morphs the container UP to an
+  // explicit large target (`frameSize.heightRatio: 0.9` in `surfaceRegistry`),
+  // and this root takes that SAME 0.9-of-viewport height. Under `tone:'onImage'`
+  // the Dialog inserts NO nav-bar spacer, so the grid uses the FULL morph target
+  // (no `-52`) and slides up under the floating bar, edge-to-edge, within the
+  // panel's `maxHeightRatio: 0.9` cap. A `flex: 1` root can't fill (no definite
+  // bound propagates through the sheet's flex chain at rest, where the panel is
+  // height:auto), so the fixed height is required; the FlatList scrolls within
+  // it. Keep the 0.9 ratio in sync with the picker's `frameSize` in
+  // `surfaceRegistry.ts`.
+  const panelHeight = (0, _react.useMemo)(() => Math.round(windowHeight * 0.9), [windowHeight]);
+  const rootStyle = (0, _react.useMemo)(() => ({
+    height: panelHeight
+  }), [panelHeight]);
+  const effectiveWidth = gridWidth > 0 ? gridWidth : windowWidth;
+  const {
+    columns,
+    cellSize,
+    gutter
+  } = (0, _react.useMemo)(() => (0, _photoGridLayout.computePhotoGridLayout)(effectiveWidth), [effectiveWidth]);
+
+  // How many shimmer tiles the loading skeleton renders: enough FULL rows to
+  // fill the panel down to (but never past) its `maxHeight` cap, so the panel
+  // hugs the skeleton content instead of overflowing or scrolling. `floor`
+  // keeps the last row whole; `SKELETON_MIN_ROWS` guards a very short panel.
+  const skeletonTileCount = (0, _react.useMemo)(() => {
+    const rowHeight = cellSize + gutter;
+    if (rowHeight <= 0) return columns * SKELETON_MIN_ROWS;
+    const available = Math.max(0, panelHeight - FLOATING_NAV_BAR_HEIGHT);
+    const rows = Math.max(SKELETON_MIN_ROWS, Math.floor(available / rowHeight));
+    return rows * columns;
+  }, [cellSize, gutter, columns, panelHeight]);
+
+  // Map selectedIds → 1-based selection order for the badge. We freeze a
+  // stable order at the time of selection: the order is the insertion
+  // order of the Set (which JS preserves natively).
+  const selectionOrder = (0, _react.useMemo)(() => {
+    const map = new Map();
+    let i = 1;
+    for (const id of selectedIds) {
+      map.set(id, i++);
+    }
+    return map;
+  }, [selectedIds]);
+  const hasAnySelection = selectedIds.size > 0;
+  const isEmpty = photos.length === 0;
+  const atSelectionLimit = multiSelect && maxSelection != null && selectedIds.size >= maxSelection;
+  const handleCellPress = (0, _react.useCallback)(photo => {
+    if (_reactNative.Platform.OS !== 'web') {
+      void hapticImpact('light');
+    }
+    onTogglePhoto(photo);
+  }, [onTogglePhoto]);
+  const handleCellLongPress = (0, _react.useCallback)(photo => {
+    if (_reactNative.Platform.OS !== 'web') {
+      void hapticSelection();
+    }
+    onPreviewPhoto(photo);
+  }, [onPreviewPhoto]);
+
+  // FlatList renderItem: each cell knows its enterIndex (for stagger).
+  const renderItem = (0, _react.useCallback)(({
+    item,
+    index
+  }) => {
+    const isSelected = selectedIds.has(item.id);
+    const selIndex = isSelected ? selectionOrder.get(item.id) || 0 : 0;
+    // Last column gets no right margin; last row no bottom margin
+    // (FlatList handles row breaks via numColumns).
+    const isLastInRow = (index + 1) % columns === 0;
+    const a11yLabel = t(isSelected ? 'fileManagement.a11y.photoCellSelected' : 'fileManagement.a11y.photoCellUnselected', {
+      name: item.filename || 'photo'
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PhotoPickerCell, {
+      photo: item,
+      size: cellSize,
+      marginRight: isLastInRow ? 0 : gutter,
+      marginBottom: gutter,
+      isSelected: isSelected,
+      selectionIndex: selIndex,
+      dim: multiSelect && !isSelected && (hasAnySelection || atSelectionLimit),
+      primaryColor: primaryColor,
+      thumbUrl: getThumbUrl(item),
+      enterIndex: index,
+      reduceMotion: reduceMotion,
+      onPress: () => handleCellPress(item),
+      onLongPress: () => handleCellLongPress(item),
+      a11yLabel: a11yLabel
+    });
+  }, [selectedIds, selectionOrder, columns, cellSize, gutter, multiSelect, hasAnySelection, atSelectionLimit, primaryColor, getThumbUrl, reduceMotion, handleCellPress, handleCellLongPress, t]);
+  const keyExtractor = (0, _react.useCallback)(item => item.id, []);
+  const listFooter = (0, _react.useMemo)(() => {
+    if (!loadingMore) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: "py-space-16 items-center",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        size: "small",
+        color: "#FFFFFF"
+      })
+    });
+  }, [loadingMore]);
+  const handleEndReached = (0, _react.useCallback)(() => {
+    if (loadingMore || !hasMore) return;
+    onLoadMore();
+  }, [loadingMore, hasMore, onLoadMore]);
+  return (
+    /*#__PURE__*/
+    // Measured wrapper: `style`-only (no className) so RN-Web fires onLayout.
+    // `rootStyle` is placement-aware — a `maxHeight` cap that gives the
+    // FlatList a bounded scroll region while letting a short grid hug its
+    // content (see the `rootStyle` derivation). It must NOT carry a className
+    // (that can suppress web `onLayout`).
+    (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: rootStyle,
+      onLayout: onRootLayout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        className: "flex-1 min-h-0 bg-black",
+        children: isEmpty && loadError ?
+        /*#__PURE__*/
+        /* Terminal load failure — a DISTINCT error surface (not the
+           empty state), centered in the immersive frame. Retry re-runs
+           the list query. */
+        (0, _jsxRuntime.jsx)(_reactNative.View, {
+          className: "flex-1 items-center justify-center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileLibraryError.default, {
+            title: t('fileManagement.loadError.title'),
+            description: t('fileManagement.loadError.description'),
+            retryLabel: t('fileManagement.retry'),
+            onRetry: onRetry,
+            iconColor: "#FF6B6B",
+            titleColor: "#FFFFFF",
+            descriptionColor: "rgba(255,255,255,0.7)",
+            buttonColor: primaryColor
+          })
+        }) : isEmpty && loading ?
+        /*#__PURE__*/
+        /* Loading skeleton — the picker's OWN shape: shimmer tiles laid
+           out with the SAME placement-aware geometry the real grid uses
+           (`computePhotoGridLayout(effectiveWidth)`), edge-to-edge under
+           the floating bar. `flexWrap` breaks rows exactly at `columns`
+           because the last tile in each row carries no right margin (a
+           full row + gutters fits the measured width by construction). */
+        (0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            pointerEvents: 'none'
+          },
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: Array.from({
+            length: skeletonTileCount
+          }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Box, {
+            width: cellSize,
+            height: cellSize,
+            borderRadius: CELL_CORNER_RADIUS,
+            style: {
+              marginRight: (index + 1) % columns === 0 ? 0 : gutter,
+              marginBottom: gutter,
+              backgroundColor: SKELETON_TILE_COLOR
+            }
+          }, `skeleton-${index}`))
+        }) : isEmpty ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          className: "flex-1 items-center justify-center px-space-32",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            className: "opacity-30 mb-space-16",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MaterialCommunityIcons.default, {
+              name: "image-outline",
+              size: 64,
+              color: "#FFFFFF"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            className: "text-white text-[17px] font-semibold text-center mb-1.5",
+            children: t('fileManagement.photoPicker.emptyTitle')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            className: "text-white text-[14px] font-normal text-center opacity-70 mb-space-24",
+            children: t('fileManagement.photoPicker.emptySubtitle')
+          }), isOwner && allowUpload && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            className: "flex-row items-center gap-space-8 px-[22px] py-space-12 rounded-full",
+            style: {
+              backgroundColor: primaryColor
+            },
+            onPress: onUpload,
+            disabled: uploading || isPickingDocument,
+            accessibilityRole: "button",
+            accessibilityLabel: t('fileManagement.uploadPhoto'),
+            accessibilityState: {
+              busy: uploading || isPickingDocument
+            },
+            children: uploading || isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+              size: "small",
+              color: "#FFFFFF"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                name: "cloud-upload",
+                size: 18,
+                color: "#FFFFFF"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                className: "text-white text-[15px] font-semibold",
+                children: t('fileManagement.uploadPhoto')
+              })]
+            })
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+          data: photos,
+          renderItem: renderItem,
+          keyExtractor: keyExtractor,
+          numColumns: columns,
+          className: "flex-1 min-h-0",
+          contentContainerClassName: "pb-space-24",
+          showsVerticalScrollIndicator: false,
+          refreshControl: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
+            refreshing: refreshing,
+            onRefresh: onRefresh,
+            tintColor: "#FFFFFF",
+            colors: [primaryColor],
+            progressViewOffset: FLOATING_NAV_BAR_HEIGHT
+          }),
+          onEndReached: handleEndReached,
+          onEndReachedThreshold: 0.4,
+          ListFooterComponent: listFooter,
+          removeClippedSubviews: _reactNative.Platform.OS !== 'web',
+          initialNumToRender: Math.max(12, columns * 6),
+          windowSize: 9
+        }, `cols-${columns}`)
+      })
+    })
+  );
+};
+var _default = exports.default = PhotoPickerView;
+//# sourceMappingURL=PhotoPickerSection.js.map