react-native-ensys-camera-x 1.0.7

package/lib/module/library/MediaLibraryScreen.js

@@ -0,0 +1,2597 @@
+"use strict";
+
+import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
+import { StyleSheet, Text, View, TouchableOpacity, FlatList, StatusBar, Platform, Modal, useWindowDimensions, Animated, Pressable, PanResponder, ScrollView, Alert } from 'react-native';
+import { openCameraPicker, openDocumentPicker, openAudioPicker, openGalleryEditor, startUpload, secureDeleteMedia, shareMedia, compressVideo, compressImage, addCompressionProgressListener, getMediaMetadata } from "../nativeActions.js";
+// Media-list rows show the file's own frame — an extracted video frame or the decoded
+// image — through the library's native thumbnail decoder.
+import { MediaThumbnail } from "../NativeMediaThumbnailView.js";
+import { extensionForMimeType, useMediaDatabase } from "../db/index.js";
+import { getDocumentPreviewKind } from "../NativeDocumentPreviewView.js";
+import { usePortraitPreviewDimensions } from "../ResponsivePreviewContainer.js";
+import { ExpandableFab } from "./components/ExpandableFab.js";
+import { DocumentPreview } from "./components/DocumentPreview.js";
+import { AudioPreview } from "./components/AudioPreview.js";
+import { ImagePreview } from "./components/ImagePreview.js";
+import { VideoPreview } from "./components/VideoPreview.js";
+import { RecordAudioScreen } from "./components/RecordAudioScreen.js";
+import { ViewerCounter } from "./components/ViewerCounter.js";
+import { GlobalAudioPlayerProvider, GlobalMiniAudioPlayer } from "../AudioPlayerContext.js";
+import { useCameraLocalization } from "../localization.js";
+import { RenderIcon } from "../icons.js";
+import { DocumentTile, AudioTile } from "./components/FileTiles.js";
+// Shared responsive scaling (portrait-normalized + clamped): one source of
+// truth for chrome sizing across the app and all components. Layout that must
+// track live rotation (pager/viewer page widths) uses useWindowDimensions.
+import { wp, hp, ms, fs } from "./responsive.js";
+import { useLibraryPalette } from "./palette.js";
+import { refreshAssetMetadata, refreshAssetMetadataBatch } from "./fileMetadata.js";
+import { formatFileSize, formatFileSizeRange, formatMediaDate, formatMediaTime, formatMediaDuration, formatDimensions, localizeNumber } from "./localizedFormat.js";
+// Compressing the displayed image/video: the level ladder, the size band each level promises, and
+// the measured countdown the overlay reads. Shared arithmetic with the native editor's own menu.
+import { COMPRESSION_QUALITY_LEVELS, compressedCeilingBytes, compressedSizeBand, compressionCountdownLabel, compressionCountdownTickMs, compressionOptionForQuality, compressionSavingPercent, createCompressionProgressTracker, estimateImageCompressionSeconds, estimateVideoCompressionSeconds, foldCompressionProgress, isOriginalCompressionOption, originalCompressionOption, parseCompressionPercent } from "./compressionEstimate.js";
+
+// Height of the system status bar. Used to keep the screen's own chrome and the
+// full-screen viewer's overlay controls (close button / counter) clear of the
+// status bar while media renders edge-to-edge behind the system bars.
+//
+// This is why the shell needs no `react-native-safe-area-context`: the only
+// inset that matters on Android is the status bar, and `StatusBar.currentHeight`
+// reports it directly.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STATUS_BAR_INSET = Platform.OS === 'android' ? StatusBar.currentHeight ?? 0 : 44;
+
+// ── Media categories ─────────────────────────────────────────────
+// Single ordered source of truth shared by the filter tabs and the horizontal
+// category pager, so tab index ↔ page index mapping can never drift.
+const FILTER_KEYS = ['all', 'photos', 'videos', 'documents', 'audio'];
+/**
+ * One of the five library categories, in tab order. Exported from the package
+ * as `MediaLibraryFilterKey` — the type of the `initialFilter` prop.
+ */
+
+// Mutable copy for FlatList's `data` prop (typed against mutable arrays).
+const FILTER_PAGES = [...FILTER_KEYS];
+
+// Map an asset's media type to the category tab that displays it.
+const FILTER_KEY_FOR_TYPE = {
+  photo: 'photos',
+  video: 'videos',
+  document: 'documents',
+  audio: 'audio'
+};
+
+/**
+ * The renderer family named by a file NAME alone, ignoring any declared MIME type, and only when
+ * that name denotes a container with no pixel frame of its own (pdf/docx/xlsx/…). Returns null for
+ * images and for names that carry no recognised extension.
+ */
+const documentKindFromName = name => {
+  if (!name) return null;
+  const kind = getDocumentPreviewKind(name, undefined);
+  return kind !== null && kind !== 'image' ? kind : null;
+};
+const getAssetPreviewMode = asset => {
+  if (asset.type === 'video') return 'video';
+  if (asset.type === 'audio') return 'audio';
+  const previewUri = asset.documentUri || asset.uri;
+  const previewName = previewUri ? previewUri.split(/[?#]/)[0]?.split(/[\\/]/).pop() : undefined;
+  const kind = getDocumentPreviewKind(previewName ?? asset.fileName, asset.mimeType);
+
+  // The FILE the viewer is about to open wins over the MIME type the asset carries, whenever the
+  // two disagree AND the file names a document container. "Export By → PDF" turns a photo into a
+  // PDF, and an asset that predates the export re-stating its own metadata still describes itself
+  // as image/jpeg while `documentUri` points at a .pdf. The image branch below trusted that stale
+  // type, sent the file to ImagePreview, and the decoder — which has no idea what a PDF is —
+  // produced nothing, so the slide came up blank. Checked against the resolved URI first and the
+  // asset's own name second, so a content:// URI with no extension still falls back correctly.
+  if (documentKindFromName(previewName) ?? documentKindFromName(asset.fileName)) {
+    return 'document';
+  }
+
+  // A still is an image no matter which picker it arrived through. The document module maps
+  // jpg/png/gif/webp/heic/avif — and every `image/*` MIME — to its own `image` kind, so EVERY
+  // image (captures included) used to land here as a "document" and render inside
+  // DocumentPreview's bordered, rounded surface: a card that letterboxed the frame and left
+  // empty background strips above and below it. Images take the same edge-to-edge path videos
+  // take; only formats with no pixel frame of their own (pdf/docx/xlsx/…) keep that surface.
+  if (kind === 'image' || asset.mimeType?.startsWith('image/')) {
+    return 'image';
+  }
+  if (asset.type === 'document' || kind !== null) {
+    return 'document';
+  }
+  return 'image';
+};
+
+/**
+ * Which compressor applies to this asset, or `null` when none does.
+ *
+ * Compression is a re-ENCODE, so it only means anything for media that has pixels of its own: a
+ * still or a clip. A document has no encoder that could shrink it without destroying it, and audio
+ * has no image/video encoder at all — both return null, which is the single predicate that hides
+ * the viewer's compress button AND refuses its handler, so the two can never disagree.
+ *
+ * Resolved through getAssetPreviewMode for the same reason `assetSupportsMetadata` is: a still is
+ * detected as 'image' whether it carries type 'photo', type 'image' or just an `image/*` MIME, and
+ * a photo that was exported to PDF resolves as the document it now is rather than the image it
+ * claims to be.
+ */
+const compressibleKind = asset => {
+  if (!asset) return null;
+  const mode = getAssetPreviewMode(asset);
+  if (mode === 'video') return 'video';
+  if (mode === 'image') return 'image';
+  return null;
+};
+
+// Whether the viewer's "ⓘ" details affordance applies to this asset. Routed through
+// getAssetPreviewMode so it is immune to the 'photo' vs 'image' type-naming split — a still is
+// detected as 'image' whether the asset carries type 'photo', type 'image', or just an image/*
+// MIME. This is the single predicate that gates BOTH the icon's visibility and its tap handler,
+// so they can never disagree (the old split showed the icon for videos only, or showed it for a
+// still whose tap then silently no-op'd).
+const assetSupportsMetadata = asset => {
+  if (!asset) return false;
+  const mode = getAssetPreviewMode(asset);
+  return mode === 'video' || mode === 'image' || mode === 'document';
+};
+
+// The category tab a batch of just-sent assets should reveal. A single-type
+// batch lands on that type's section (audio → 'audio'); a mixed batch has no
+// single home, so it falls back to 'all'. Empty/unknown → null (no redirect).
+const filterKeyForSentAssets = sent => {
+  if (sent.length === 0) return null;
+  const first = FILTER_KEY_FOR_TYPE[sent[0].type];
+  if (!first) return null;
+  return sent.every(a => FILTER_KEY_FOR_TYPE[a.type] === first) ? first : 'all';
+};
+const metadataFileName = asset => {
+  const value = asset.fileName || asset.documentUri || asset.uri;
+  const withoutQuery = value?.split(/[?#]/)[0] || '';
+  return withoutQuery.split(/[\\/]/).pop() || null;
+};
+const MetadataSheet = ({
+  asset,
+  visible,
+  onClose
+}) => {
+  const {
+    t,
+    locale
+  } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const metadataStyles = useMemo(() => makeMetadataStyles(palette), [palette]);
+  const [resolvedAsset, setResolvedAsset] = useState(asset);
+  const sheetHeightRef = useRef(420);
+  const translateY = useRef(new Animated.Value(420)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const closingRef = useRef(false);
+  useEffect(() => {
+    if (!visible || !asset) return;
+    let cancelled = false;
+    setResolvedAsset(asset);
+    closingRef.current = false;
+    translateY.setValue(sheetHeightRef.current);
+    backdropOpacity.setValue(0);
+    Animated.parallel([Animated.spring(translateY, {
+      toValue: 0,
+      useNativeDriver: true,
+      tension: 72,
+      friction: 12
+    }), Animated.timing(backdropOpacity, {
+      toValue: 1,
+      duration: 220,
+      useNativeDriver: true
+    })]).start();
+    refreshAssetMetadata(asset).then(refreshed => {
+      if (!cancelled) setResolvedAsset(refreshed);
+    }).catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [asset, backdropOpacity, translateY, visible]);
+  const closeAnimated = useCallback(() => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    Animated.parallel([Animated.timing(translateY, {
+      toValue: sheetHeightRef.current,
+      duration: 190,
+      useNativeDriver: true
+    }), Animated.timing(backdropOpacity, {
+      toValue: 0,
+      duration: 160,
+      useNativeDriver: true
+    })]).start(({
+      finished
+    }) => {
+      if (finished) onClose();
+    });
+  }, [backdropOpacity, onClose, translateY]);
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => false,
+    onMoveShouldSetPanResponder: (_event, gesture) => gesture.dy > 8,
+    onPanResponderMove: (_event, gesture) => {
+      translateY.setValue(Math.max(0, gesture.dy));
+    },
+    onPanResponderRelease: (_event, gesture) => {
+      if (gesture.dy > 100 || gesture.vy > 1.2) {
+        closeAnimated();
+        return;
+      }
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 80,
+        friction: 11
+      }).start();
+    },
+    onPanResponderTerminate: () => {
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 80,
+        friction: 11
+      }).start();
+    }
+  }), [closeAnimated, translateY]);
+  if (!resolvedAsset) return null;
+  const previewMode = getAssetPreviewMode(resolvedAsset);
+  const isVideo = previewMode === 'video';
+  const unknown = t('unknown');
+  // Title mirrors the asset kind: photos get "Photo details", videos "Video details". Resolved
+  // through getAssetPreviewMode so a still titles correctly regardless of its 'photo'/'image' type.
+  const detailsTitle = isVideo ? t('videoDetails') : previewMode === 'image' ? t('photoDetails') : t('mediaDetails');
+  const resolution = formatDimensions(resolvedAsset.width, resolvedAsset.height, locale);
+  const dateStr = formatMediaDate(resolvedAsset.dateTaken, locale);
+  const timeStr = formatMediaTime(resolvedAsset.dateTaken, locale);
+  const dateValue = dateStr && timeStr ? `${dateStr} · ${timeStr}` : dateStr ?? unknown;
+  const rows = [[t('metaFileName'), metadataFileName(resolvedAsset) ?? unknown], [t('metaFileType'), resolvedAsset.mimeType || resolvedAsset.type || unknown], [t('metaFileSize'), formatFileSize(resolvedAsset.size, locale, t) ?? unknown],
+  // Duration only applies to time-based media (video); images have none.
+  ...(isVideo ? [[t('metaDuration'), formatMediaDuration(resolvedAsset.duration, locale) ?? unknown]] : []), [t('metaResolution'), resolution ? `${resolution} ${t('pixelsUnit')}` : unknown], [t('metaDate'), dateValue], [t('metaPath'), resolvedAsset.documentUri || resolvedAsset.uri || unknown]];
+  return /*#__PURE__*/_jsx(Modal, {
+    transparent: true,
+    visible: visible,
+    animationType: "none",
+    onRequestClose: closeAnimated,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: metadataStyles.modalRoot,
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: [metadataStyles.backdrop, {
+          opacity: backdropOpacity
+        }],
+        children: /*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFill,
+          onPress: closeAnimated
+        })
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        style: [metadataStyles.sheet, {
+          transform: [{
+            translateY
+          }]
+        }],
+        onLayout: event => {
+          sheetHeightRef.current = event.nativeEvent.layout.height;
+        },
+        ...panResponder.panHandlers,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: metadataStyles.handle
+        }), /*#__PURE__*/_jsxs(View, {
+          style: metadataStyles.sheetHeader,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: metadataStyles.sheetTitle,
+            children: detailsTitle
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: closeAnimated,
+            style: metadataStyles.sheetClose,
+            accessibilityRole: "button",
+            accessibilityLabel: t('close'),
+            children: /*#__PURE__*/_jsx(RenderIcon, {
+              name: "close",
+              size: 20,
+              color: palette.white
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          showsVerticalScrollIndicator: false,
+          contentContainerStyle: metadataStyles.rows,
+          children: rows.map(([label, value]) => /*#__PURE__*/_jsxs(View, {
+            style: metadataStyles.row,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: metadataStyles.rowLabel,
+              children: label
+            }), /*#__PURE__*/_jsx(Text, {
+              style: metadataStyles.rowValue,
+              selectable: true,
+              children: value
+            })]
+          }, label))
+        })]
+      })]
+    })
+  });
+};
+
+/**
+ * The compression sheet: the ladder of quality levels for the image or video the viewer is showing,
+ * each row quoting the size it is expected to produce.
+ *
+ * Rows are QUALITY levels — the percentage of the original quality to keep — so the number on the
+ * row IS the value handed to the native compressor, and a lower row means a stronger compression.
+ * Every size is quoted against the ORIGINAL file (`asset` is always the stored asset, never a copy
+ * already made from it), so picking a second level after a first predicts against the untouched
+ * source exactly as the compressor itself will.
+ *
+ * Mirrors {@link MetadataSheet}'s presentation — same handle, header, spring-in/timing-out and
+ * drag-to-dismiss — so the viewer has one sheet idiom rather than two.
+ */
+const CompressionSheet = ({
+  asset,
+  kind,
+  activeOption,
+  visible,
+  onClose,
+  onSelect
+}) => {
+  const {
+    t,
+    locale
+  } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const sheetStyles = useMemo(() => makeCompressionStyles(palette), [palette]);
+  const sheetHeightRef = useRef(480);
+  const translateY = useRef(new Animated.Value(480)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const closingRef = useRef(false);
+  useEffect(() => {
+    if (!visible || !asset) return;
+    closingRef.current = false;
+    translateY.setValue(sheetHeightRef.current);
+    backdropOpacity.setValue(0);
+    Animated.parallel([Animated.spring(translateY, {
+      toValue: 0,
+      useNativeDriver: true,
+      tension: 72,
+      friction: 12
+    }), Animated.timing(backdropOpacity, {
+      toValue: 1,
+      duration: 220,
+      useNativeDriver: true
+    })]).start();
+  }, [asset, backdropOpacity, translateY, visible]);
+
+  /**
+   * Slide the sheet away, and — when the dismissal came from a row — apply that row once it is gone.
+   * Selecting first would start an encode underneath a sheet still animating out.
+   */
+  const closeAnimated = useCallback(selected => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    Animated.parallel([Animated.timing(translateY, {
+      toValue: sheetHeightRef.current,
+      duration: 190,
+      useNativeDriver: true
+    }), Animated.timing(backdropOpacity, {
+      toValue: 0,
+      duration: 160,
+      useNativeDriver: true
+    })]).start(({
+      finished
+    }) => {
+      if (!finished) return;
+      onClose();
+      if (selected) onSelect(selected);
+    });
+  }, [backdropOpacity, onClose, onSelect, translateY]);
+
+  // Bare dismissal, for the handlers that are handed an event (backdrop press, hardware back) —
+  // passing that event straight through would be read as a selected option.
+  const dismiss = useCallback(() => closeAnimated(), [closeAnimated]);
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => false,
+    onMoveShouldSetPanResponder: (_event, gesture) => gesture.dy > 8,
+    onPanResponderMove: (_event, gesture) => {
+      translateY.setValue(Math.max(0, gesture.dy));
+    },
+    onPanResponderRelease: (_event, gesture) => {
+      if (gesture.dy > 100 || gesture.vy > 1.2) {
+        dismiss();
+        return;
+      }
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 80,
+        friction: 11
+      }).start();
+    },
+    onPanResponderTerminate: () => {
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 80,
+        friction: 11
+      }).start();
+    }
+  }), [dismiss, translateY]);
+  if (!asset) return null;
+  const isVideo = kind === 'video';
+  // The original is the file on disk, so its row states a real measured size, with no tilde.
+  const originalBytes = asset.size ?? 0;
+  const originalLabel = t(isVideo ? 'originalVideo' : 'originalImage');
+  const originalSize = formatFileSize(originalBytes, locale, t);
+  const rows = [{
+    option: originalCompressionOption(kind),
+    label: originalSize ? t('compressOriginalSize', originalLabel, originalSize) : originalLabel,
+    active: isOriginalCompressionOption(activeOption)
+  }];
+  for (const quality of COMPRESSION_QUALITY_LEVELS) {
+    const option = compressionOptionForQuality(quality);
+    // "{0}% quality": the level reads as what it KEEPS, which is also what the bridge is given.
+    const levelLabel = t('compressActiveLabel', localizeNumber(quality, locale));
+    // A re-encode is aimed at a target the encoder spends around rather than hits, so the row
+    // promises the band it will land in — as an estimate ("~"), unlike the original's real size.
+    // The asset rides along as the clip's geometry/duration: that is what lets a video band respect
+    // the encoder's quality floor, so a heavy row never promises a reduction the pipeline refuses to
+    // make in order to keep the picture watchable.
+    const band = compressedSizeBand(originalBytes, quality, kind, asset);
+    const bandText = band ? formatFileSizeRange(band.low, band.high, locale, t) : null;
+    rows.push({
+      option,
+      label: bandText ? t('compressEstimatedSize', levelLabel, bandText) : levelLabel,
+      active: !isOriginalCompressionOption(activeOption) && activeOption === option
+    });
+  }
+  return /*#__PURE__*/_jsx(Modal, {
+    transparent: true,
+    visible: visible,
+    animationType: "none",
+    onRequestClose: dismiss,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: sheetStyles.modalRoot,
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: [sheetStyles.backdrop, {
+          opacity: backdropOpacity
+        }],
+        children: /*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFill,
+          onPress: dismiss
+        })
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        style: [sheetStyles.sheet, {
+          transform: [{
+            translateY
+          }]
+        }],
+        onLayout: event => {
+          sheetHeightRef.current = event.nativeEvent.layout.height;
+        },
+        ...panResponder.panHandlers,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: sheetStyles.handle
+        }), /*#__PURE__*/_jsxs(View, {
+          style: sheetStyles.sheetHeader,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: sheetStyles.sheetTitle,
+            children: t(isVideo ? 'compressVideo' : 'compressImage')
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: dismiss,
+            style: sheetStyles.sheetClose,
+            accessibilityRole: "button",
+            accessibilityLabel: t('close'),
+            children: /*#__PURE__*/_jsx(RenderIcon, {
+              name: "close",
+              size: 20,
+              color: palette.white
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          showsVerticalScrollIndicator: false,
+          contentContainerStyle: sheetStyles.rows,
+          children: rows.map(row => /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [sheetStyles.row, row.active && sheetStyles.rowActive],
+            activeOpacity: 0.75,
+            onPress: () => closeAnimated(row.option),
+            accessibilityRole: "button",
+            accessibilityState: {
+              selected: row.active
+            },
+            accessibilityLabel: row.active ? t('selectedOption', row.label) : row.label,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [sheetStyles.rowText, row.active && sheetStyles.rowTextActive],
+              numberOfLines: 1,
+              children: row.label
+            }), row.active ? /*#__PURE__*/_jsx(RenderIcon, {
+              name: "check",
+              size: 18,
+              color: palette.accentGreen
+            }) : null]
+          }, row.option))
+        })]
+      })]
+    })
+  });
+};
+
+/** Props for {@link MediaLibraryScreen}. */
+
+/**
+ * The media library screen: the category tabs + swipeable category pager, the
+ * Plus/Cross FAB that opens the camera / gallery editor / document + audio
+ * pickers / audio recorder, the full-screen swipeable viewer (image, video with
+ * scrubber, document and audio preview cards) with its position counter and
+ * details sheet, and the mini audio player.
+ *
+ * It reads its entire dataset from the encrypted SQLCipher store, so it needs
+ * the `react-native-sqlcipher` peer dependency installed.
+ *
+ * Providers above it are optional: the theme, icon and localization hooks all
+ * fall back to the process-wide configuration (`configureCameraPlugin`,
+ * `setCameraIcons`, `setCameraLocalization`), so this renders correctly on its
+ * own. What it does NOT do by itself is install the shell's hand-authored
+ * outline icon set — {@link CameraMediaLibrary} adds that (plus the three
+ * providers) on top, which is why the drop-in is the recommended entry point.
+ */
+export function MediaLibraryScreen({
+  uploadUrl,
+  initialFilter = 'all',
+  onAssetsChange,
+  style
+} = {}) {
+  // ── Encrypted SQLCipher store is the single source of truth ──────
+  // The Media Library reads its entire dataset (and the filter-card counters)
+  // from the encrypted database. Captures and gallery selections are written to
+  // SQLCipher and immediately reflected here without an app restart.
+  const {
+    assets,
+    counts,
+    loading,
+    addAssets,
+    removeById
+    // removeMany is available for batch delete affordances and keeps SQLCipher
+    // in sync with the list.
+  } = useMediaDatabase();
+  const {
+    t,
+    locale
+  } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const s = useMemo(() => makeS(palette), [palette]);
+  const [isCapturing, setIsCapturing] = useState(false);
+
+  // Mirror the store outward for hosts that keep their own badge/count. Held in
+  // a ref so a caller passing an inline arrow can't re-fire the effect.
+  const onAssetsChangeRef = useRef(onAssetsChange);
+  onAssetsChangeRef.current = onAssetsChange;
+  useEffect(() => {
+    onAssetsChangeRef.current?.(assets);
+  }, [assets]);
+  const [activeFilter, setActiveFilter] = useState(initialFilter);
+  // Pager that gives the tabs swipe navigation. Tap and swipe stay in sync by
+  // funnelling BOTH through selectFilter/onCategoryScrollEnd → setActiveFilter.
+  const categoryPagerRef = useRef(null);
+  // Stable handle to selectFilter so the send handlers — declared ABOVE
+  // selectFilter — can drive the tab+pager redirect without a TDZ reference.
+  // Assigned in an effect once selectFilter exists (see below).
+  const selectFilterRef = useRef(null);
+
+  // Counters are computed dynamically from SQLCipher (COUNT(*) per media type).
+  const photoCount = counts.image;
+  const videoCount = counts.video;
+  const documentsCount = counts.document;
+  const audioCount = counts.audio;
+
+  // ── Compressed stand-ins for the stored assets ───────────────────
+  // A compression writes a NEW file into the app cache and never touches the original, so the
+  // result is held HERE — id → the copy that now stands in for that row — rather than written back
+  // over the SQLCipher row. Two reasons: the store's rows are published Documents files by
+  // contract, and the cache is evictable, so persisting a pointer into it could outlive the file it
+  // names. The override therefore lasts for the session, and the original is what survives a
+  // restart. Every surface (rows, viewer slides, counter, share, the details sheet) reads the
+  // override through `effectiveAssets` below, so there is ONE place the substitution happens.
+  const [compressedOverrides, setCompressedOverrides] = useState({});
+
+  // The stored assets by id — how a handler reaches the ORIGINAL even while an override is being
+  // displayed in its place. Every size the compression sheet quotes, and every source URI handed to
+  // the compressor, comes from here, so picking a second level compresses the untouched file again
+  // instead of compressing a compression.
+  const assetsById = useMemo(() => {
+    const byId = new Map();
+    for (const asset of assets) byId.set(asset.id, asset);
+    return byId;
+  }, [assets]);
+  const effectiveAssets = useMemo(() => {
+    if (Object.keys(compressedOverrides).length === 0) return assets;
+    return assets.map(asset => compressedOverrides[asset.id] ?? asset);
+  }, [assets, compressedOverrides]);
+  const assetsForFilter = useCallback(filter => {
+    switch (filter) {
+      case 'photos':
+        return effectiveAssets.filter(asset => asset.type === 'photo');
+      case 'videos':
+        return effectiveAssets.filter(asset => asset.type === 'video');
+      case 'documents':
+        return effectiveAssets.filter(asset => asset.type === 'document');
+      case 'audio':
+        return effectiveAssets.filter(asset => asset.type === 'audio');
+      case 'all':
+      default:
+        return effectiveAssets;
+    }
+  }, [effectiveAssets]);
+
+  // The ACTIVE category's rows — also the dataset behind the full-screen viewer,
+  // so viewer paging/counter keep operating on exactly what the user is browsing.
+  const filteredAssets = useMemo(() => assetsForFilter(activeFilter), [assetsForFilter, activeFilter]);
+  const formatDate = timestamp => {
+    const dateStr = formatMediaDate(timestamp, locale, 'long');
+    if (!dateStr) return t('unknown');
+    const timeStr = formatMediaTime(timestamp, locale);
+    return timeStr ? `${dateStr} - ${timeStr}` : dateStr;
+  };
+  const formatDuration = secs => formatMediaDuration(secs, locale) ?? t('unknown');
+  const [viewerVisible, setViewerVisible] = useState(false);
+  const [viewerIndex, setViewerIndex] = useState(0);
+  const [viewerPaused, setViewerPaused] = useState(true);
+  const [viewerControlsVisible, setViewerControlsVisible] = useState(true);
+  // Live mirror of viewerControlsVisible. toggleViewerControls reads this instead of the state so
+  // the toggle handler keeps a stable identity across visibility flips (a fresh closure over the
+  // state value would re-memoize renderViewerItem and could hand VideoPreview a stale toggle).
+  const viewerControlsVisibleRef = useRef(true);
+  const [metadataVisible, setMetadataVisible] = useState(false);
+  const viewerListRef = useRef(null);
+  // The counter tracks the finger through this ref instead of through `viewerIndex`, so a swipe
+  // repaints two lines of text rather than re-rendering this whole screen. See ViewerCounter.
+  const viewerCounterRef = useRef(null);
+
+  // Live window width for the full-screen viewer. useWindowDimensions re-renders
+  // on every runtime size change (rotation, split-screen, foldable fold/unfold,
+  // desktop window resize), so each paging slide, the snap interval, and the
+  // scroll math always match the CURRENT window instead of a value cached at
+  // module load. Using the stale module-level SCREEN_W here would mis-size the
+  // slides and break paging after any such change.
+  const {
+    width: viewerWidth
+  } = useWindowDimensions();
+
+  // Preview, editing, export and sending all share ONE fixed portrait 9:16
+  // canvas. The hook returns fresh 9:16 dimensions on every render and on
+  // window changes (orientation, resize). Media is always fitted (contain)
+  // inside this canvas — scaled + centered with its aspect ratio preserved —
+  // so a landscape capture is never rotated, stretched, distorted, or cropped.
+  const previewDims = usePortraitPreviewDimensions();
+  const previewW = previewDims.width;
+  const previewH = previewDims.height;
+  const previewAspectRatio = previewDims.aspectRatio;
+
+  // Hands confirmed assets to the native foreground UploadService, which posts the
+  // "Uploading media" progress notification and the "Upload completed/failed" alert
+  // in the system notification bar. Fire-and-forget: the service owns the lifecycle
+  // (and survives the app being backgrounded), so an upload error must never block
+  // or crash the capture/pick UX — it surfaces as a failure notification instead.
+  // With no `uploadUrl` prop there is nowhere to post to, so this is a no-op and
+  // the rest of the confirm pipeline is unchanged.
+  const uploadAssets = useCallback(assets => {
+    if (!uploadUrl) return;
+    const uris = assets.map(asset => asset.documentUri || asset.uri).filter(uri => !!uri);
+    if (uris.length === 0) return;
+    startUpload(uris, uploadUrl).catch(uploadError => {
+      console.warn('Failed to start upload service:', uploadError);
+    });
+  }, [uploadUrl]);
+
+  // Everything that happens once media has been CONFIRMED on the native send screen —
+  // normalize the assets, upload, persist to SQLCipher, reveal the section they landed in.
+  // The camera capture flow and the gallery → editor flow both end here, which is what makes
+  // gallery-picked media behave exactly like a capture from this point on. A cancelled result
+  // (back / X on either screen) is a no-op.
+  const processConfirmedAssets = useCallback(async pickerResult => {
+    if (pickerResult && !pickerResult.cancelled && Array.isArray(pickerResult.assets) && pickerResult.assets.length > 0) {
+      const capturedAssets = [];
+      pickerResult.assets.forEach((asset, index) => {
+        // Skip a null/garbage element instead of dereferencing it (the native contract
+        // should never send one, but a bad element must not abort the whole capture).
+        if (!asset) return;
+        const a = asset;
+        const processedAsset = {
+          // Multi-select assets can arrive without ids. Date.now() alone would hand every
+          // asset in this same synchronous loop the SAME id → duplicate FlatList keys and
+          // silent dedup/data-loss. Add the index (and a random suffix) so ids are unique.
+          id: a.id || `${Date.now()}_${index}_${Math.random().toString(36).slice(2, 8)}`,
+          uri: a.uri || '',
+          type: a.type || 'photo',
+          width: previewW,
+          height: previewH,
+          fileName: a.fileName || (a.type === 'video' ? `video_${Date.now()}.mp4` : `photo_${Date.now()}.${extensionForMimeType(a.mimeType, 'jpg')}`),
+          dateTaken: a.dateTaken || Date.now(),
+          previewAspectRatio: previewAspectRatio,
+          needsThumbnail: a.needsThumbnail || false,
+          mimeType: a.mimeType,
+          caption: a.caption,
+          duration: a.duration,
+          size: a.size,
+          location: a.location,
+          // Preserve the storage-lifecycle fields the native Send workflow sets.
+          // These tell the DB layer that the file is now in the Documents
+          // directory (documentUri set, cachePath cleared) and where it came
+          // from (originalUri present ⇒ gallery). Stripping them would hide the
+          // final persistent path and force a fallback — so keep them intact.
+          documentUri: a.documentUri,
+          cachePath: a.cachePath,
+          isCached: a.isCached,
+          originalUri: a.originalUri,
+          // A compressed video's `size` is the proportional display figure the
+          // dropdown/toast quoted, not the bytes on disk. Carry the flag so the
+          // DB persists it and refreshAssetMetadata keeps `size` instead of
+          // re-statting the file (which would show the larger real size).
+          sizeIsDisplayEstimate: a.sizeIsDisplayEstimate
+        };
+        capturedAssets.push(processedAsset);
+      });
+      // Refresh metadata from actual files (especially important after compression/export)
+      // so preview and storage always show the correct file size, dimensions, etc.
+      let assetsWithFreshMetadata = capturedAssets;
+      try {
+        assetsWithFreshMetadata = await refreshAssetMetadataBatch(capturedAssets);
+      } catch (metadataError) {
+        console.warn('Failed to refresh asset metadata:', metadataError);
+        // If refresh fails, continue with original metadata
+      }
+      // Send confirmed → hand the files to the native UploadService FIRST.
+      // The upload only needs the documentUri/uri values already on the assets
+      // (published natively before the picker resolved), so it has zero
+      // dependency on the database write below. It previously ran AFTER the
+      // awaited SQLCipher insert + full-library refresh, which serialized the
+      // upload — and its foreground progress notification — behind seconds of
+      // DB work; that was the "progress bar appears 5-6s after Send" delay.
+      uploadAssets(assetsWithFreshMetadata);
+      // The picker's promise only resolves AFTER the user pressed Send and the
+      // native workflow moved each confirmed file into the Documents directory
+      // (a cancel/back resolves with `cancelled: true` and no assets, handled
+      // above). Persisting here therefore happens only on explicit Send.
+      //
+      // The repository stores ONLY assets confirmed in Documents (final path),
+      // skips any cache-only/publish-failed stragglers, and auto-detects each
+      // item's origin (camera vs gallery). The hook then refreshes the list +
+      // counters from SQLCipher so new media appears immediately. A DB failure
+      // is contained here and never blocks the capture UX.
+      try {
+        await addAssets(assetsWithFreshMetadata);
+      } catch (dbError) {
+        console.warn('Failed to persist media to SQLCipher:', dbError);
+      }
+      // Reveal the section the just-sent media lives in (audio → 'audio',
+      // mixed batch → 'all'), so the user lands on their new item.
+      const target = filterKeyForSentAssets(assetsWithFreshMetadata);
+      if (target) selectFilterRef.current?.(target);
+    }
+  }, [addAssets, uploadAssets, previewW, previewH, previewAspectRatio]);
+
+  // One capture flow for the FAB's Camera / Photo / Video actions. `mediaTypes` scopes the
+  // native camera: 'photo' hides video recording entirely, 'video' opens straight into
+  // video mode with photo capture off, 'all' keeps the full capture UI. Everything after
+  // the picker resolves (upload, SQLCipher persist, filter reveal) is identical.
+  const openCapture = async mediaTypes => {
+    try {
+      setIsCapturing(true);
+      const pickerResult = await openCameraPicker({
+        mediaTypes,
+        selectionLimit: 0,
+        // 0 = unlimited selection
+        enableVideo: mediaTypes !== 'photo'
+      });
+      await processConfirmedAssets(pickerResult);
+    } catch (error) {
+      console.error('Error capturing from camera:', error);
+    } finally {
+      setIsCapturing(false);
+    }
+  };
+
+  // The FAB's Camera action. `openCapture` still takes a mode because the native
+  // camera supports photo-only / video-only entry — the shell's menu just offers
+  // the full capture UI, and a host wiring its own row can call it directly.
+  const handleOpenCamera = () => openCapture('all');
+
+  // The FAB's Document and Audio actions, backed by the native Storage Access Framework pickers
+  // (openDocumentPicker / openAudioPicker). Both resolve with the same `{ cancelled, assets }`
+  // shape as the camera picker; the selected files are persisted to the encrypted store just like
+  // captures, so they appear immediately in the library.
+  const handlePickFiles = useCallback(async pick => {
+    try {
+      setIsCapturing(true);
+      const result = await pick({
+        selectionLimit: 0
+      });
+      if (result && !result.cancelled && Array.isArray(result.assets) && result.assets.length > 0) {
+        const picked = result.assets.filter(Boolean).map((asset, index) => ({
+          ...asset,
+          id: asset.id || `${Date.now()}_${index}_${Math.random().toString(36).slice(2, 8)}`,
+          dateTaken: asset.dateTaken || Date.now()
+        }));
+        // Refresh metadata from actual files to ensure correct file sizes and properties
+        let pickedWithFreshMetadata = picked;
+        try {
+          pickedWithFreshMetadata = await refreshAssetMetadataBatch(picked);
+        } catch (metadataError) {
+          console.warn('Failed to refresh picked file metadata:', metadataError);
+          // If refresh fails, continue with original metadata
+        }
+        // Picked documents/audio go through the same notified upload flow.
+        // Upload first for the same reason as the camera path: the progress
+        // notification must not wait behind the awaited SQLCipher persist.
+        uploadAssets(pickedWithFreshMetadata);
+        try {
+          await addAssets(pickedWithFreshMetadata);
+        } catch (dbError) {
+          console.warn('Failed to persist picked files to SQLCipher:', dbError);
+        }
+        // Reveal the section the picked files live in (e.g. audio → 'audio',
+        // documents → 'documents'), so the user lands on their new item.
+        const target = filterKeyForSentAssets(pickedWithFreshMetadata);
+        if (target) selectFilterRef.current?.(target);
+      }
+    } catch (error) {
+      console.error('Error picking files:', error);
+    } finally {
+      setIsCapturing(false);
+    }
+  }, [addAssets, uploadAssets]);
+  const handleOpenDocument = useCallback(() => handlePickFiles(openDocumentPicker), [handlePickFiles]);
+  const handleOpenAudio = useCallback(() => handlePickFiles(openAudioPicker), [handlePickFiles]);
+  const [recordAudioVisible, setRecordAudioVisible] = useState(false);
+  const handleOpenRecordAudio = useCallback(() => setRecordAudioVisible(true), []);
+  const handleRecordedAudio = useCallback(asset => {
+    // Refresh metadata from the actual recorded file
+    refreshAssetMetadataBatch([asset]).then(refreshed => {
+      const assetToStore = refreshed[0] || asset;
+      // The native side already moved the file to Documents and returned
+      // a fully-formed asset with documentUri. Persist it to SQLCipher
+      // so it appears in the library immediately.
+      addAssets([assetToStore]).catch(dbError => {
+        console.warn('Failed to persist recorded audio to SQLCipher:', dbError);
+      });
+      // Reveal the Audio section.
+      selectFilterRef.current?.('audio');
+    }).catch(metadataError => {
+      console.warn('Failed to refresh recorded audio metadata:', metadataError);
+      // If refresh fails, persist with original metadata
+      addAssets([asset]).catch(dbError => {
+        console.warn('Failed to persist recorded audio to SQLCipher:', dbError);
+      });
+      selectFilterRef.current?.('audio');
+    });
+  }, [addAssets]);
+
+  // The FAB's Gallery action. Opens the device gallery, detects whether the picked item is an
+  // image or a video, and hands it to the SAME native preview/editor screen a capture opens on —
+  // the image editor with its full tool set for a photo, the video editor for a clip. Sending from
+  // there returns through the identical result pipeline, so it flows into processConfirmedAssets
+  // exactly like a capture. Backing out of the picker or the editor is a silent no-op, and an
+  // unreadable/unsupported selection comes back cancelled (the editor reports it natively).
+  const handleOpenImageVideo = useCallback(async () => {
+    try {
+      setIsCapturing(true);
+      const result = await openGalleryEditor();
+      await processConfirmedAssets(result);
+    } catch (error) {
+      console.error('Error editing media from gallery:', error);
+    } finally {
+      setIsCapturing(false);
+    }
+  }, [processConfirmedAssets]);
+
+  // ── Category swipe pager ⇄ tabs synchronization ─────────────────
+  // The pager lives inside s.screen (paddingHorizontal: wp(16)), so its usable
+  // width — and therefore the page width every paging computation must use —
+  // is the live window width minus that padding. One shared constant keeps
+  // page size, snap interval, offset math and scroll-end math identical.
+  const categoryPageWidth = viewerWidth - wp(32);
+  const categoryIndex = FILTER_KEYS.indexOf(activeFilter);
+
+  // True while a tab-tap glide (selectFilter's animated scrollToOffset) is in
+  // flight. Live swipe→tab tracking must pause for its duration: the tapped tab
+  // is already highlighted, and tracking the glide would flash every pill
+  // between the origin and the target as the pager sweeps past them.
+  const isTabTapScrollRef = useRef(false);
+
+  // Tab tap: update state AND glide the pager to the matching page.
+  const selectFilter = useCallback(key => {
+    isTabTapScrollRef.current = true;
+    setActiveFilter(key);
+    categoryPagerRef.current?.scrollToOffset({
+      offset: categoryPageWidth * FILTER_KEYS.indexOf(key),
+      animated: true
+    });
+  }, [categoryPageWidth]);
+
+  // Keep the ref pointed at the latest selectFilter so the send handlers above
+  // can trigger the post-send redirect through the same tab+pager path.
+  useEffect(() => {
+    selectFilterRef.current = selectFilter;
+  }, [selectFilter]);
+
+  // Live swipe → tab sync: flip the active pill the moment the scroll crosses
+  // the halfway point to a neighbouring page, instead of waiting for the
+  // momentum animation to settle (onMomentumScrollEnd) — that wait is what made
+  // the highlight visibly lag the swipe. The gesture itself stays fully native:
+  // this handler only touches React state, and the functional setState bails
+  // out render-free on every frame where the derived page hasn't changed, so at
+  // most one re-render happens per page crossing and the swipe smoothness is
+  // untouched.
+  const handleCategoryScroll = useCallback(event => {
+    if (isTabTapScrollRef.current) return;
+    const rawIndex = Math.round(event.nativeEvent.contentOffset.x / categoryPageWidth);
+    const index = Math.max(0, Math.min(rawIndex, FILTER_KEYS.length - 1));
+    const key = FILTER_KEYS[index];
+    if (key) setActiveFilter(prev => prev === key ? prev : key);
+  }, [categoryPageWidth]);
+
+  // A user drag always takes live tracking back over — including grabbing the
+  // pager mid tap-glide (also covers Android, where programmatic animated
+  // scrolls don't reliably emit onMomentumScrollEnd to clear the flag).
+  const handleCategoryDragBegin = useCallback(() => {
+    isTabTapScrollRef.current = false;
+  }, []);
+
+  // Swipe settle: derive the landed page and mirror it into the active tab.
+  // With live tracking above this is normally a no-op safety net; it also ends
+  // the tap-glide window so live tracking resumes for the next gesture.
+  const handleCategoryScrollEnd = useCallback(event => {
+    isTabTapScrollRef.current = false;
+    const rawIndex = Math.round(event.nativeEvent.contentOffset.x / categoryPageWidth);
+    const index = Math.max(0, Math.min(rawIndex, FILTER_KEYS.length - 1));
+    const key = FILTER_KEYS[index];
+    if (key) setActiveFilter(key);
+  }, [categoryPageWidth]);
+  const getCategoryPageLayout = useCallback((_, index) => ({
+    length: categoryPageWidth,
+    offset: categoryPageWidth * index,
+    index
+  }), [categoryPageWidth]);
+
+  // Re-snap the pager to the active page when the window width changes
+  // (rotation, split-screen, fold) so it never settles between two categories.
+  // Guarded by a width ref: firing on categoryIndex changes too would stomp the
+  // tab-tap glide (selectFilter's animated scroll) with an instant jump.
+  const lastPagerWidthRef = useRef(categoryPageWidth);
+  useEffect(() => {
+    if (lastPagerWidthRef.current === categoryPageWidth) return;
+    lastPagerWidthRef.current = categoryPageWidth;
+    categoryPagerRef.current?.scrollToOffset({
+      offset: categoryPageWidth * categoryIndex,
+      animated: false
+    });
+  }, [categoryPageWidth, categoryIndex]);
+  const openViewer = useCallback((index, sourceFilter) => {
+    // A row tapped on a pager page that hasn't finished settling as the active
+    // filter yet must open the viewer against ITS page's dataset, not a stale
+    // one — align the filter first (same render batch, so filteredAssets is
+    // correct by the time the Modal mounts).
+    if (sourceFilter) {
+      setActiveFilter(prev => prev === sourceFilter ? prev : sourceFilter);
+    }
+    setViewerIndex(index);
+    setViewerControlsVisible(true);
+    // Start the video immediately when the viewer opens so the playhead and scrub
+    // fill advance together with the native video playback.
+    setViewerPaused(false);
+    setViewerVisible(true);
+  }, []);
+
+  // Reveal the transport controls. There is no auto-hide timer: once shown, the controls stay
+  // until an explicit tap on the video area hides them (toggleViewerControls). Removing the old
+  // 5s auto-hide fixed the controls (including the scrubber) vanishing mid-drag when a scrub
+  // lasted longer than the timer — the finger was still down but the whole controls block, and
+  // with it the PanResponder, unmounted. Kept as a named callback because VideoPreview calls it
+  // as onControlInteraction and the open/index effect below reuses it.
+  const showViewerControls = useCallback(() => {
+    setViewerControlsVisible(true);
+  }, []);
+
+  // Hide the transport controls at once.
+  const hideViewerControls = useCallback(() => {
+    setViewerControlsVisible(false);
+  }, []);
+
+  // A tap on the video surface (VideoPreview.onVideoAreaPress) toggles the transport controls:
+  // reveal them when hidden, hide them when already shown. The direction is decided from the live
+  // ref so a second tap reliably hides regardless of what the memoized renderViewerItem closure
+  // captured. Only the video area calls this — chrome (X, counter, Share/Delete/Info) is outside
+  // it and never toggles control visibility.
+  const toggleViewerControls = useCallback(() => {
+    if (viewerControlsVisibleRef.current) {
+      hideViewerControls();
+    } else {
+      showViewerControls();
+    }
+  }, [hideViewerControls, showViewerControls]);
+
+  // Keep the ref in step with the state (open/index changes and the toggle itself all flow
+  // through here) so toggleViewerControls always reads the current visibility.
+  useEffect(() => {
+    viewerControlsVisibleRef.current = viewerControlsVisible;
+  }, [viewerControlsVisible]);
+  useEffect(() => {
+    if (!viewerVisible) return;
+    // Ensure controls are visible when the viewer opens or the page changes.
+    showViewerControls();
+  }, [showViewerControls, viewerIndex, viewerVisible]);
+  const handleExpandAudioPlayer = useCallback(uri => {
+    // Find the audio asset in the current list
+    const index = filteredAssets.findIndex(a => a.uri === uri || a.documentUri === uri);
+    if (index >= 0) {
+      openViewer(index);
+    } else {
+      // If it's not in the current filter, switch to 'all' and find it
+      setActiveFilter('all');
+      // The same array the 'all' page renders (`assetsForFilter('all')`), so the index resolved
+      // here addresses the same row the viewer will land on.
+      const allAssets = effectiveAssets;
+      const allIndex = allAssets.findIndex(a => a.uri === uri || a.documentUri === uri);
+      if (allIndex >= 0) {
+        // Schedule the viewer to open after state update
+        setTimeout(() => openViewer(allIndex, 'all'), 50);
+      }
+    }
+  }, [filteredAssets, effectiveAssets, openViewer]);
+  const closeViewer = useCallback(() => {
+    setMetadataVisible(false);
+    setCompressionSheetVisible(false);
+    setViewerVisible(false);
+    setViewerPaused(true);
+  }, []);
+  const openMetadata = useCallback(() => {
+    if (assetSupportsMetadata(filteredAssets[viewerIndex])) {
+      setMetadataVisible(true);
+    }
+  }, [filteredAssets, viewerIndex]);
+
+  // Share the currently displayed media through the native Android share sheet
+  // (ACTION_SEND with the correct MIME type for the asset's kind). No third-party
+  // dependency — the native bridge launches Intent.createChooser directly.
+  const handleShareMedia = useCallback(async () => {
+    const item = filteredAssets[viewerIndex];
+    if (!item) return;
+    const uri = item.uri || item.documentUri || '';
+    if (!uri) return;
+    try {
+      await shareMedia([uri], item.mimeType || '');
+    } catch (err) {
+      console.warn('[viewer] share failed', err);
+    }
+  }, [filteredAssets, viewerIndex]);
+
+  // ── Compressing the displayed image or video ─────────────────────
+  const [compressionSheetVisible, setCompressionSheetVisible] = useState(false);
+  // id → the option applied to it. Absent means the original, which is also what the sheet's first
+  // row restores; the option string is the exact argument the native compressor was given.
+  const [compressionLevels, setCompressionLevels] = useState({});
+  // The countdown's current line. Non-null IS "a compression is running" — it drives the overlay,
+  // so the text and the blocking layer can never disagree about whether work is in flight.
+  const [compressionLabel, setCompressionLabel] = useState(null);
+  // `${id}|${option}` → the variant that combination already produced, so re-picking a level
+  // already made is instant and re-encodes nothing.
+  const compressionResultsRef = useRef(new Map());
+  // Monotonic token: only the newest request may apply its result or clear the overlay, so a level
+  // picked while an earlier one is still finishing cannot be overwritten by it.
+  const compressionRequestRef = useRef(0);
+  // The URI the in-flight compression was started with — how a live progress report is told from a
+  // stale one left over from a previous job.
+  const compressionSourceRef = useRef(null);
+  const compressionTrackerRef = useRef(null);
+  const compressionTimerRef = useRef(null);
+
+  /**
+   * The asset the compress button acts on: the ORIGINAL stored row behind the displayed slide, plus
+   * the compressor its kind selects. Null for a document, for audio, and for an empty viewer — the
+   * one value that both hides the button and refuses the handler.
+   */
+  const compressionTarget = useMemo(() => {
+    const displayed = filteredAssets[viewerIndex];
+    const kind = compressibleKind(displayed);
+    if (!displayed || !kind) return null;
+    return {
+      asset: assetsById.get(displayed.id) ?? displayed,
+      kind
+    };
+  }, [assetsById, filteredAssets, viewerIndex]);
+
+  /**
+   * The countdown's own clock. It re-schedules itself through a ref rather than a self-referencing
+   * callback, and re-reads `t` on every tick, so a host language change mid-compression is picked up
+   * by the very next line rather than at the end.
+   */
+  const compressionTickRef = useRef(() => {});
+  compressionTickRef.current = () => {
+    const tracker = compressionTrackerRef.current;
+    if (!tracker) return;
+    const now = Date.now();
+    setCompressionLabel(compressionCountdownLabel(tracker, now, t));
+    compressionTimerRef.current = setTimeout(() => compressionTickRef.current(), compressionCountdownTickMs(tracker, now));
+  };
+  const stopCompressionCountdown = useCallback(() => {
+    if (compressionTimerRef.current) {
+      clearTimeout(compressionTimerRef.current);
+      compressionTimerRef.current = null;
+    }
+    compressionTrackerRef.current = null;
+    compressionSourceRef.current = null;
+    setCompressionLabel(null);
+  }, []);
+
+  // ONE subscription for the screen's lifetime. Reports are folded into the tracker (which
+  // re-derives the total from `elapsed / progress`) rather than rendered directly — the line itself
+  // is repainted by the tick above, so a burst of native reports costs no extra renders.
+  useEffect(() => {
+    const subscription = addCompressionProgressListener(event => {
+      const tracker = compressionTrackerRef.current;
+      if (!tracker) return;
+      if (compressionSourceRef.current && event.uri !== compressionSourceRef.current) {
+        return;
+      }
+      compressionTrackerRef.current = foldCompressionProgress(tracker, event.progress, Date.now());
+    });
+    return () => subscription.remove();
+  }, []);
+
+  // A screen torn down mid-compression must not leave its timer firing into an unmounted tree.
+  useEffect(() => () => {
+    if (compressionTimerRef.current) clearTimeout(compressionTimerRef.current);
+  }, []);
+
+  /**
+   * The asset that stands in for `original` now that `outUri` has been written — the compressed copy
+   * described as a full asset, so every surface can render it without knowing a compression happened.
+   */
+  const compressedVariant = useCallback(async (original, outUri, kind, quality) => {
+    let meta = null;
+    try {
+      meta = await getMediaMetadata(outUri);
+    } catch {
+      // A copy whose metadata cannot be read still displays — it just keeps the original's figures.
+      meta = null;
+    }
+    // A clip is encoded at a TARGET bit rate the encoder spends around rather than hits, so the
+    // honest figure to QUOTE for it is the proportional one the native editor and its toast quote,
+    // not a file stat. `sizeIsDisplayEstimate` is what stops refreshAssetMetadata replacing it.
+    // Computed from the ORIGINAL's geometry and duration, so it is raised to the same quality floor
+    // the sheet's row was — otherwise the viewer would go on displaying the row's old promise for a
+    // file the encoder deliberately kept larger.
+    const displayBytes = kind === 'video' ? compressedCeilingBytes(original.size ?? 0, quality, 'video', original) : 0;
+    const measured = meta?.size && meta.size > 0 ? meta.size : undefined;
+    return {
+      ...original,
+      // The copy lives in the app cache, never in Documents — clearing documentUri/cachePath is
+      // what points every preview at it, since they all resolve `documentUri || uri`.
+      uri: outUri,
+      documentUri: undefined,
+      cachePath: undefined,
+      // Where it came from, so a delete can still find and erase the original alongside it.
+      originalUri: original.documentUri || original.uri,
+      width: meta?.width ?? original.width,
+      height: meta?.height ?? original.height,
+      duration: meta?.duration ?? original.duration,
+      mimeType: meta?.mimeType || original.mimeType,
+      fileName: meta?.fileName || original.fileName,
+      size: displayBytes > 0 ? displayBytes : measured ?? original.size,
+      sizeIsDisplayEstimate: displayBytes > 0 ? true : undefined
+    };
+  }, []);
+
+  /**
+   * Apply one row of the compression sheet to the displayed media.
+   *
+   * The original file is only ever READ: the compressor writes a new file into the app cache and the
+   * result is held as a session override, so "preserve the original, preview and send the copy" is
+   * true by construction — there is no path here that overwrites, moves or deletes the source.
+   */
+  const applyCompressionOption = useCallback(async option => {
+    const target = compressionTarget;
+    if (!target) return;
+    const {
+      asset: original,
+      kind
+    } = target;
+    const id = original.id;
+
+    // The first row: back to the stored file. Nothing is encoded and nothing is thrown away — the
+    // copies already made stay cached, so moving between levels stays instant.
+    if (isOriginalCompressionOption(option)) {
+      setCompressionLevels(prev => {
+        if (!prev[id]) return prev;
+        const next = {
+          ...prev
+        };
+        delete next[id];
+        return next;
+      });
+      setCompressedOverrides(prev => {
+        if (!prev[id]) return prev;
+        const next = {
+          ...prev
+        };
+        delete next[id];
+        return next;
+      });
+      return;
+    }
+    const cacheKey = `${id}|${option}`;
+    const alreadyMade = compressionResultsRef.current.get(cacheKey);
+    if (alreadyMade) {
+      setCompressionLevels(prev => ({
+        ...prev,
+        [id]: option
+      }));
+      setCompressedOverrides(prev => ({
+        ...prev,
+        [id]: alreadyMade
+      }));
+      return;
+    }
+
+    // ALWAYS the original file, even while a compressed copy is the one on screen: re-encoding a
+    // re-encode would stack generation loss and quote sizes against the wrong baseline.
+    const sourceUri = original.documentUri || original.uri;
+    if (!sourceUri) return;
+    const quality = parseCompressionPercent(option);
+    const token = compressionRequestRef.current + 1;
+    compressionRequestRef.current = token;
+    compressionSourceRef.current = sourceUri;
+    compressionTrackerRef.current = createCompressionProgressTracker(kind === 'video' ? estimateVideoCompressionSeconds({
+      sizeBytes: original.size,
+      duration: original.duration,
+      width: original.width,
+      height: original.height,
+      percent: quality
+    }) : estimateImageCompressionSeconds({
+      width: original.width,
+      height: original.height
+    }), Date.now());
+    // Paints the first line and starts the clock — which is also what raises the overlay.
+    compressionTickRef.current();
+    const title = t(kind === 'video' ? 'compressVideo' : 'compressImage');
+    try {
+      // The PROMISE is the completion signal, never the progress stream: a compression that gives
+      // up part way through settles without a final report on every path.
+      const outUri = kind === 'video' ? await compressVideo(sourceUri, option) : await compressImage(sourceUri, option);
+      // A newer level was picked while this one was running — it owns the overlay and the result.
+      if (compressionRequestRef.current !== token) return;
+      stopCompressionCountdown();
+      if (!outUri || outUri === sourceUri) {
+        // Native resolves the INPUT back when no re-encode came out smaller. Nothing failed —
+        // there is simply nothing left to shave, so the original stays applied.
+        Alert.alert(title, t('compressionAlreadyMinimal'));
+        return;
+      }
+      const variant = await compressedVariant(original, outUri, kind, quality);
+      if (compressionRequestRef.current !== token) return;
+      compressionResultsRef.current.set(cacheKey, variant);
+      setCompressionLevels(prev => ({
+        ...prev,
+        [id]: option
+      }));
+      setCompressedOverrides(prev => ({
+        ...prev,
+        [id]: variant
+      }));
+      const producedSize = formatFileSize(variant.size, locale, t);
+      const saving = compressionSavingPercent(original.size ?? 0, variant.size ?? 0);
+      if (producedSize) {
+        Alert.alert(title, saving !== null ? t('compressedToSize', producedSize, localizeNumber(saving, locale)) : t('compressedToSizeOnly', producedSize));
+      }
+    } catch (err) {
+      console.warn('[viewer] compression failed', err);
+      if (compressionRequestRef.current !== token) return;
+      stopCompressionCountdown();
+      Alert.alert(title, t('compressionFailed'));
+    }
+  }, [compressedVariant, compressionTarget, locale, stopCompressionCountdown, t]);
+
+  // Gated on the same value that hides the button, so a document or an audio file can never open
+  // the sheet even if the icon were somehow reachable.
+  const openCompressionSheet = useCallback(() => {
+    if (!compressionTarget) return;
+    setCompressionSheetVisible(true);
+  }, [compressionTarget]);
+
+  // Confirm deletion with a NATIVE dialog, then on confirm the file is SECURELY
+  // erased via native Android APIs, the DB row is deleted (which rebuilds the
+  // preview list + counter), and the pager moves to the next available item. When
+  // the last item is removed the viewer exits gracefully back to the previous screen.
+  const handleDeleteMedia = useCallback(() => {
+    const item = filteredAssets[viewerIndex];
+    if (!item) return;
+    Alert.alert(t('deleteConfirmTitle'), t('deleteConfirmMessage'), [{
+      text: t('cancel'),
+      style: 'cancel'
+    }, {
+      text: t('delete'),
+      style: 'destructive',
+      onPress: () => performDelete()
+    }]);
+  }, [filteredAssets, viewerIndex]);
+  const performDelete = useCallback(async () => {
+    const list = filteredAssets;
+    const idx = viewerIndex;
+    const item = list[idx];
+    if (!item) return;
+    const uri = item.uri || item.documentUri || '';
+    // `item` may be a compressed stand-in, whose `uri` points at the cached copy. The ORIGINAL is
+    // what the store still holds, and each is a COMPLETE file — erasing only one would leave the
+    // other recoverable, which defeats the whole point of a secure delete.
+    const original = assetsById.get(item.id);
+    const companionUris = Array.from(new Set([item.cachePath, item.documentUri, item.uri, item.originalUri, original?.cachePath, original?.documentUri, original?.uri].filter(u => !!u && u !== uri)));
+
+    // 1. SECURELY destroy the physical file: native measures its exact size,
+    //    overwrites it with encrypted cryptographically secure random data 2 MB
+    //    larger than that size (chunked + flushed, so a big video never lands in
+    //    RAM), unlinks it, and sweeps thumbnails, cached copies and derived
+    //    variants. `assetId` matters — compressed/exported/edited copies and video
+    //    cover frames are named after it, so omitting it would leave them behind.
+    let secureErase = false;
+    try {
+      if (uri) {
+        const report = await secureDeleteMedia(uri, {
+          assetId: item.id,
+          fileName: item.fileName,
+          coverUri: item.coverUri,
+          // A published item usually still has its cache file, and a compressed copy is a
+          // second complete file again — each is erasable on its own, so all of them go.
+          extraUris: companionUris
+        });
+        secureErase = report.fullySecure;
+        if (!secureErase) {
+          // A deleted-but-not-overwritten file must never be reported as a secure
+          // deletion. The row is still removed below (the user asked for the item
+          // to go), but the shortfall is surfaced rather than swallowed.
+          console.warn('[viewer] secure erase incomplete', JSON.stringify(report));
+        }
+      }
+    } catch (err) {
+      console.warn('[viewer] native secure delete failed', err);
+    }
+
+    // 2. Remove the persisted SQLCipher row — AFTER the file, so a failed erase can
+    //    never leave a row-less file stranded on disk with nothing pointing at it.
+    //    useMediaDatabase.refresh() rebuilds `assets` and the filter counts from
+    //    SQLCipher (so filteredAssets updates too).
+    try {
+      await removeById(item.id);
+    } catch (err) {
+      console.warn('[viewer] database delete failed', err);
+    }
+
+    // Every compressed copy of this asset has just been erased along with it, so nothing may keep
+    // pointing at one. `effectiveAssets` maps over the store, which no longer holds the row, but the
+    // cached variants would otherwise be re-applied to a future asset that reused the id.
+    setCompressedOverrides(prev => {
+      if (!prev[item.id]) return prev;
+      const next = {
+        ...prev
+      };
+      delete next[item.id];
+      return next;
+    });
+    setCompressionLevels(prev => {
+      if (!prev[item.id]) return prev;
+      const next = {
+        ...prev
+      };
+      delete next[item.id];
+      return next;
+    });
+    for (const key of Array.from(compressionResultsRef.current.keys())) {
+      if (key.startsWith(`${item.id}|`)) compressionResultsRef.current.delete(key);
+    }
+    if (!secureErase) {
+      Alert.alert(t('notSecurelyErasedTitle'), t('notSecurelyErasedMessage'));
+    }
+
+    // 3. Move to the next available item — or exit when the last one was removed.
+    const remaining = list.length - 1;
+    if (remaining <= 0) {
+      closeViewer();
+      return;
+    }
+    // Deleting the current slide shifts everything after it left by one; clamping
+    // means a deleted last item lands on the previous one. The existing
+    // viewerIndex effect re-snaps the pager to the new offset.
+    const nextIndex = Math.min(idx, remaining - 1);
+    setViewerIndex(nextIndex);
+    viewerCounterRef.current?.setIndex(nextIndex);
+  }, [filteredAssets, viewerIndex, removeById, closeViewer, assetsById]);
+
+  // Live position while the finger (or the fling) is moving. This ONLY moves the counter —
+  // `viewerIndex` still settles in onMomentumScrollEnd below, because it also gates which slide
+  // is `active`, and flipping that mid-drag would stop and release the outgoing video while it
+  // is still half on screen.
+  const handleViewerScroll = useCallback(event => {
+    if (viewerWidth <= 0) return;
+    const offsetX = event.nativeEvent.contentOffset.x;
+    // Clamp: iOS rubber-banding reports offsets past both ends of the list.
+    const index = Math.max(0, Math.min(Math.round(offsetX / viewerWidth), Math.max(0, filteredAssets.length - 1)));
+    viewerCounterRef.current?.setIndex(index);
+  }, [viewerWidth, filteredAssets.length]);
+  const handleViewerScrollEnd = useCallback(event => {
+    const offsetX = event.nativeEvent.contentOffset.x;
+    const index = Math.round(offsetX / viewerWidth);
+    setViewerIndex(index);
+    // Keep the newly visible video playing so its native progress and the scrub
+    // bar advance together when the user swipes to a new slide.
+    setViewerPaused(false);
+  }, [viewerWidth]);
+  const getViewerItemLayout = useCallback((_, index) => ({
+    length: viewerWidth,
+    offset: viewerWidth * index,
+    index
+  }), [viewerWidth]);
+
+  // When the window width changes while the viewer is open (rotation, split-
+  // screen, fold/unfold, resize) the paged content offset becomes stale and the
+  // list can settle between two slides. Re-snap to the current item's new offset
+  // so the active media stays perfectly aligned to the resized viewport.
+  useEffect(() => {
+    if (!viewerVisible) return;
+    viewerListRef.current?.scrollToOffset({
+      offset: viewerWidth * viewerIndex,
+      animated: false
+    });
+  }, [viewerWidth, viewerVisible, viewerIndex]);
+  const renderViewerItem = useCallback(({
+    item,
+    index
+  }) => {
+    // Only the clip on the currently-visible page is allowed to play. An off-screen or
+    // recycled cell is always paused so it can never play (or momentarily show) the wrong
+    // clip while the user is on another page.
+    const isActivePage = index === viewerIndex;
+    // Every item — captured OR gallery-selected — fills the full-screen viewer
+    // slide (viewerWidth wide, full height). The slide width tracks the live
+    // window width, so every item is identical to the current viewport and the
+    // container reflows correctly on rotation / resize without changing shape
+    // between items.
+    //
+    // Route each media kind to its dedicated preview. Every kind carries the same metadata
+    // header at the top, but only the frameless kinds — audio and documents — are drawn as a
+    // card: images and videos are pixel content and fill the slide edge to edge, contain-fitted,
+    // with no surface, border or rounded frame of their own behind them.
+    let mediaContent;
+    let shouldCenterContent = false;
+    const previewMode = getAssetPreviewMode(item);
+    // Keyed on the FILE, not just the asset id, so swapping in a compressed copy of the same
+    // asset remounts the preview instead of handing a mounted one a new `asset` prop it may
+    // already have snapshotted. Unchanged for every asset that has no compressed copy.
+    const previewKey = `${item.id}|${item.documentUri || item.uri}`;
+    if (previewMode === 'video') {
+      mediaContent = /*#__PURE__*/_jsx(VideoPreview, {
+        asset: item,
+        paused: viewerPaused,
+        onTogglePause: () => setViewerPaused(prev => !prev),
+        onPlaybackEnded: () => setViewerPaused(true),
+        active: isActivePage,
+        controlsVisible: viewerControlsVisible,
+        onVideoAreaPress: toggleViewerControls,
+        onControlInteraction: showViewerControls
+      }, previewKey);
+    } else if (previewMode === 'document') {
+      mediaContent = /*#__PURE__*/_jsx(DocumentPreview, {
+        asset: item
+        // Only the visible page runs expensive native preview work (PDF page
+        // rasterization); mounted-but-off-screen neighbours stay cheap.
+        ,
+        active: isActivePage
+      }, previewKey);
+      shouldCenterContent = true;
+    } else if (previewMode === 'audio') {
+      mediaContent = /*#__PURE__*/_jsx(AudioPreview, {
+        asset: item
+        // Only the visible page may play; swiping away force-pauses it. The card
+        // has its own play/pause + scrubber, so it never auto-plays on its own.
+        ,
+        active: isActivePage
+      }, previewKey);
+      shouldCenterContent = true;
+    } else {
+      // All image types (regular images, GIFs, HEIF/AVIF) use the unified ImagePreview
+      mediaContent = /*#__PURE__*/_jsx(ImagePreview, {
+        asset: item
+      }, previewKey);
+    }
+
+    // Images/videos fill the slide space; audio/documents are centered
+    return /*#__PURE__*/_jsx(View, {
+      style: [s.viewerSlide, {
+        width: viewerWidth
+      }],
+      children: shouldCenterContent ? /*#__PURE__*/_jsx(View, {
+        style: s.viewerContentCenter,
+        children: mediaContent
+      }) : mediaContent
+    }, item.id);
+  },
+  // viewerControlsVisible is in deps so this memoized closure captures the CURRENT value.
+  // Without it the closure keeps a stale `controlsVisible`, so a tap show/hide never reaches
+  // the mounted VideoPreview cell. Pairs with the FlatList's
+  // extraData={viewerControlsVisible}, which busts the cell memoization so the cell actually
+  // re-renders when visibility flips.
+  [viewerPaused, viewerIndex, viewerWidth, viewerControlsVisible, s]);
+
+  // ── Reusable Sub-Components ──────────────────────────────────────
+
+  const ChevronRight = useCallback(() => /*#__PURE__*/_jsx(View, {
+    style: s.chevronContainer,
+    children: /*#__PURE__*/_jsx(RenderIcon, {
+      name: "chevron_right",
+      size: ms(20),
+      color: palette.textFaded
+    })
+  }), [s, palette]);
+
+  // ── Empty State ──────────────────────────────────────────────────
+  const EmptyState = useCallback(() => /*#__PURE__*/_jsxs(View, {
+    style: s.emptyStateContainer,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: s.emptyIconCircle,
+      children: /*#__PURE__*/_jsx(RenderIcon, {
+        name: "document",
+        size: ms(34),
+        color: palette.textSoft
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: s.emptyTitle,
+      children: t('libraryEmptyTitle')
+    }), /*#__PURE__*/_jsx(Text, {
+      style: s.emptySubtitle,
+      children: t('libraryEmptyMessage')
+    })]
+  }),
+  // `t` is stable until the host changes locale/bundles, so this re-derives
+  // exactly when the empty-state copy must change language.
+  [t, s, palette]);
+
+  // ── Asset Row Renderer ──────────────────────────────────────────
+  // Curried per pager page: rows must open the viewer against their OWN page's
+  // dataset (sourceFilter), and the row index is the index within that page.
+  const renderAssetItemForFilter = useCallback(sourceFilter => ({
+    item,
+    index
+  }) => {
+    const title = item.fileName || t('untitled');
+    const dateTimeStr = formatDate(item.dateTaken);
+    const durationStr = item.type === 'video' ? formatDuration(item.duration) : null;
+    const subtitle = durationStr ? `${dateTimeStr} · ${durationStr}` : dateTimeStr;
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: s.assetRow,
+      onPress: () => openViewer(index, sourceFilter),
+      activeOpacity: 0.8,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: s.thumbnailWrapper,
+        children: getAssetPreviewMode(item) === 'document' ?
+        /*#__PURE__*/
+        // Colour-coded mini page + solid file-type badge (PDF red, Word
+        // blue, sheet green, …) — identifiable at a glance, with a
+        // neutral FILE fallback when the extension is unknown.
+        _jsx(DocumentTile, {
+          asset: item
+        }) : item.type === 'audio' ?
+        /*#__PURE__*/
+        // Deterministic per-file waveform + format badge; falls back to
+        // a generic AUD badge when no extension/MIME is available.
+        _jsx(AudioTile, {
+          asset: item
+        }) : item.uri || item.documentUri ?
+        /*#__PURE__*/
+        // The media's OWN frame — never a stand-in glyph. Images decode from the
+        // image file; videos show their user-picked cover, or a frame extracted from
+        // the clip. The decode runs off the main thread at the tile's measured size —
+        // a 12MP still decoded whole is ~48MB of bitmap for a ~56px row — and is served
+        // from a shared LRU cache on the way back up the list. Where the native decoder
+        // is not in the build, MediaThumbnail falls back to decoding the still in JS,
+        // so an image row still shows its own picture.
+        //
+        // Guarded on the same pair MediaThumbnail resolves its source from: a published
+        // asset carries the path on documentUri, and testing uri alone dropped those
+        // rows onto the placeholder while a perfectly readable file sat behind them.
+        _jsx(MediaThumbnail, {
+          asset: item,
+          style: s.thumbnail,
+          resizeMode: "cover"
+        }) : /*#__PURE__*/_jsx(View, {
+          style: s.thumbnailPlaceholder,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: s.thumbnailPlaceholderText,
+            children: t('preview')
+          })
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: s.assetTextGroup,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: s.assetTitle,
+          numberOfLines: 1,
+          ellipsizeMode: "tail",
+          children: title
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.assetSubtitle,
+          numberOfLines: 1,
+          children: subtitle
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: s.assetActions,
+        children: /*#__PURE__*/_jsx(ChevronRight, {})
+      })]
+    });
+  }, [openViewer, t, locale, s, ChevronRight]);
+
+  // ── Separator ───────────────────────────────────────────────────
+  const ItemSeparator = useCallback(() => /*#__PURE__*/_jsx(View, {
+    style: s.separator
+  }), [s]);
+
+  // ── Category Page Renderer ──────────────────────────────────────
+  // One page per category, each with its own vertical list (so every category
+  // keeps its own scroll position while swiping between them). Pages are
+  // exactly categoryPageWidth wide — the pager's visible width — so paging
+  // snaps whole pages and never shows two categories at once.
+  const renderCategoryPage = useCallback(({
+    item: filterKey
+  }) => {
+    const pageAssets = assetsForFilter(filterKey);
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        width: categoryPageWidth
+      },
+      children: /*#__PURE__*/_jsx(FlatList, {
+        data: pageAssets,
+        keyExtractor: item => item.id,
+        renderItem: renderAssetItemForFilter(filterKey),
+        ItemSeparatorComponent: ItemSeparator
+        // Fill the page (the pager stretches pages to its height) so the
+        // vertical list scrolls inside the page instead of overflowing it.
+        ,
+        style: s.categoryPageList,
+        contentContainerStyle: [s.assetList, pageAssets.length === 0 && s.assetListEmpty],
+        showsVerticalScrollIndicator: false
+        // An ELEMENT, not a factory: `ComponentType | null` is not a valid
+        // ListEmptyComponent, and leaving it undefined while the first DB
+        // read is pending keeps the "no media yet" card out of the tree.
+        ,
+        ListEmptyComponent: loading ? undefined : /*#__PURE__*/_jsx(EmptyState, {}),
+        nestedScrollEnabled: true
+        // ── Low-RAM virtualization ──
+        // RN's defaults keep ~21 viewports of rows mounted (windowSize 21)
+        // and mount 10 rows per batch — and this list exists ×5 (one per
+        // category page, all kept alive for scroll-position retention).
+        // With image thumbnails per row that's hundreds of live bitmap
+        // views on a big library. 5 viewports is invisible while flinging
+        // yet caps memory at ~a quarter of the default.
+        ,
+        windowSize: 5,
+        initialNumToRender: 8,
+        maxToRenderPerBatch: 6,
+        updateCellsBatchingPeriod: 50
+        // Android detaches off-window row views (bitmaps become
+        // collectable). Left OFF on iOS where it has known blank-cell
+        // bugs and much less benefit.
+        ,
+        removeClippedSubviews: Platform.OS === 'android'
+      })
+    });
+  }, [assetsForFilter, categoryPageWidth, renderAssetItemForFilter, ItemSeparator, EmptyState, loading, s]);
+  return (
+    /*#__PURE__*/
+    // A plain View, not a safe-area view: `edges={[]}` already disabled inset
+    // handling on Android (this plugin's only platform), so the safe-area
+    // dependency bought nothing. iOS gets the same top inset via
+    // STATUS_BAR_INSET, keeping the shell dependency-free.
+    _jsx(View, {
+      style: [s.container, style],
+      children: /*#__PURE__*/_jsxs(GlobalAudioPlayerProvider, {
+        children: [/*#__PURE__*/_jsx(StatusBar, {
+          barStyle: palette.isDark ? 'light-content' : 'dark-content',
+          backgroundColor: palette.appBackground,
+          translucent: false
+        }), /*#__PURE__*/_jsxs(View, {
+          style: s.screen,
+          children: [/*#__PURE__*/_jsx(GlobalMiniAudioPlayer, {
+            onExpandPlayer: handleExpandAudioPlayer
+          }), /*#__PURE__*/_jsx(View, {
+            style: s.filtersRow,
+            children: [{
+              key: 'all',
+              label: t('all'),
+              count: counts.all
+            }, {
+              key: 'photos',
+              label: t('photos'),
+              count: photoCount
+            }, {
+              key: 'videos',
+              label: t('videos'),
+              count: videoCount
+            }, {
+              key: 'documents',
+              label: t('documents'),
+              count: documentsCount
+            }, {
+              key: 'audio',
+              label: t('audio'),
+              count: audioCount
+            }].map(tab => {
+              const isActive = activeFilter === tab.key;
+              return /*#__PURE__*/_jsxs(TouchableOpacity, {
+                style: [s.filterPill, isActive && s.filterPillActive],
+                onPress: () => selectFilter(tab.key),
+                activeOpacity: 0.8,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [s.filterCount, isActive && s.filterCountActive],
+                  children: tab.count
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: [s.filterLabel, isActive && s.filterLabelActive],
+                  numberOfLines: 1,
+                  adjustsFontSizeToFit: true,
+                  minimumFontScale: 0.75,
+                  children: tab.label
+                })]
+              }, tab.key);
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            style: s.listSection,
+            children: /*#__PURE__*/_jsx(FlatList, {
+              ref: categoryPagerRef,
+              data: FILTER_PAGES,
+              keyExtractor: key => key,
+              horizontal: true,
+              pagingEnabled: true,
+              showsHorizontalScrollIndicator: false,
+              initialScrollIndex: categoryIndex,
+              getItemLayout: getCategoryPageLayout
+              // Live highlight while the finger moves (see handleCategoryScroll);
+              // 16ms throttle ≈ one event per frame on iOS (Android already emits
+              // every frame). Scroll-end stays as the settle/no-op safety net.
+              ,
+              onScroll: handleCategoryScroll,
+              scrollEventThrottle: 16,
+              onScrollBeginDrag: handleCategoryDragBegin,
+              onMomentumScrollEnd: handleCategoryScrollEnd
+              // All five pages stay mounted: category datasets are light (rows,
+              // not decoded media), and this keeps each page's scroll position
+              // alive while swiping back and forth.
+              ,
+              windowSize: FILTER_PAGES.length,
+              initialNumToRender: FILTER_PAGES.length,
+              removeClippedSubviews: false,
+              decelerationRate: "fast",
+              snapToInterval: categoryPageWidth,
+              snapToAlignment: "start",
+              disableIntervalMomentum: true,
+              nestedScrollEnabled: true,
+              renderItem: renderCategoryPage
+            })
+          })]
+        }), /*#__PURE__*/_jsx(Modal, {
+          visible: viewerVisible,
+          animationType: "slide",
+          onRequestClose: closeViewer,
+          transparent: false,
+          statusBarTranslucent: true,
+          navigationBarTranslucent: true,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: s.viewerContainer,
+            children: [/*#__PURE__*/_jsx(StatusBar, {
+              barStyle: "light-content",
+              translucent: true,
+              backgroundColor: "transparent"
+            }), /*#__PURE__*/_jsx(View, {
+              style: s.viewerContent,
+              children: /*#__PURE__*/_jsx(FlatList, {
+                ref: viewerListRef,
+                data: filteredAssets
+                // Control visibility lives outside `data`, so this PureComponent list needs
+                // extraData to know a visibility flip must re-render the mounted cells — without
+                // it a tap show/hide can't reach VideoPreview. Works with renderViewerItem's deps.
+                ,
+                extraData: viewerControlsVisible,
+                horizontal: true,
+                pagingEnabled: true,
+                showsHorizontalScrollIndicator: false,
+                initialScrollIndex: viewerIndex,
+                getItemLayout: getViewerItemLayout,
+                keyExtractor: item => item.id,
+                renderItem: renderViewerItem,
+                onScroll: handleViewerScroll
+                // 16ms ≈ one counter update per frame at 60Hz. The handler itself only touches a
+                // ref, and ViewerCounter drops same-value updates, so this costs a setState per
+                // slide crossed, not per frame.
+                ,
+                scrollEventThrottle: 16,
+                onMomentumScrollEnd: handleViewerScrollEnd,
+                removeClippedSubviews: false
+                // Slides are full-screen media — the most expensive views in the
+                // app. windowSize 3 = current + one neighbour each side (enough
+                // for gap-free paging); batches of 2 keep a fast fling from
+                // stacking up decodes of 8 screen-sized bitmaps at once.
+                ,
+                maxToRenderPerBatch: 2,
+                windowSize: 3,
+                initialNumToRender: 1,
+                onScrollToIndexFailed: info => {
+                  // scrollToIndex throws synchronously if the target is out of range (e.g.
+                  // the list shrank, or the cell is still unmeasured). Running it inside a
+                  // bare .then() with no .catch turned that into an unhandled promise
+                  // rejection that can crash a release build. Clamp the index and guard the
+                  // retry so a failed re-scroll is a no-op instead.
+                  const wait = new Promise(resolve => setTimeout(resolve, 500));
+                  wait.then(() => {
+                    const count = filteredAssets.length;
+                    if (count === 0) return;
+                    const target = Math.max(0, Math.min(info.index, count - 1));
+                    try {
+                      viewerListRef.current?.scrollToIndex({
+                        index: target,
+                        animated: true
+                      });
+                    } catch {
+                      // Cell still not measurable — leave the list where it is.
+                    }
+                  }).catch(() => {});
+                },
+                decelerationRate: "fast",
+                snapToInterval: viewerWidth,
+                snapToAlignment: "center",
+                disableIntervalMomentum: true
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: s.viewerHeader,
+              pointerEvents: "box-none",
+              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: closeViewer,
+                style: s.viewerCloseButton,
+                activeOpacity: 0.8,
+                children: /*#__PURE__*/_jsx(RenderIcon, {
+                  name: "close",
+                  size: 24,
+                  color: palette.white
+                })
+              }), /*#__PURE__*/_jsx(View, {
+                style: s.viewerRightControls,
+                onStartShouldSetResponder: () => true,
+                children: /*#__PURE__*/_jsx(ViewerCounter, {
+                  ref: viewerCounterRef,
+                  index: viewerIndex,
+                  total: filteredAssets.length,
+                  style: s.viewerCounter
+                })
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: s.viewerActions,
+              pointerEvents: "box-none",
+              children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: handleDeleteMedia,
+                style: s.viewerActionButton,
+                activeOpacity: 0.7,
+                accessibilityRole: "button",
+                accessibilityLabel: t('deleteMedia'),
+                children: /*#__PURE__*/_jsx(RenderIcon, {
+                  name: "delete",
+                  size: 24,
+                  color: palette.white
+                })
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: handleShareMedia,
+                style: s.viewerActionButton,
+                activeOpacity: 0.7,
+                accessibilityRole: "button",
+                accessibilityLabel: t('shareMedia'),
+                children: /*#__PURE__*/_jsx(RenderIcon, {
+                  name: "share",
+                  size: 24,
+                  color: palette.white
+                })
+              }), compressionTarget ? /*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: openCompressionSheet,
+                style: s.viewerActionButton,
+                activeOpacity: 0.7,
+                accessibilityRole: "button",
+                accessibilityLabel: t(compressionTarget.kind === 'video' ? 'compressVideo' : 'compressImage'),
+                children: /*#__PURE__*/_jsx(RenderIcon, {
+                  name: "compress",
+                  size: 24,
+                  color: palette.white
+                })
+              }) : null, assetSupportsMetadata(filteredAssets[viewerIndex]) ? /*#__PURE__*/_jsx(TouchableOpacity, {
+                onPress: openMetadata,
+                style: s.viewerActionButton,
+                activeOpacity: 0.7,
+                accessibilityRole: "button",
+                accessibilityLabel: t('viewDetails'),
+                children: /*#__PURE__*/_jsx(RenderIcon, {
+                  name: "view_details",
+                  size: 24,
+                  color: palette.white
+                })
+              }) : null]
+            }), compressionLabel !== null ? /*#__PURE__*/_jsx(View, {
+              style: s.compressionOverlay,
+              accessibilityRole: "progressbar",
+              accessibilityLabel: compressionLabel,
+              children: /*#__PURE__*/_jsx(View, {
+                style: s.compressionCountdownPill,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: s.compressionCountdownText,
+                  children: compressionLabel
+                })
+              })
+            }) : null]
+          })
+        }), compressionTarget ? /*#__PURE__*/_jsx(CompressionSheet, {
+          asset: compressionTarget.asset,
+          kind: compressionTarget.kind,
+          activeOption: compressionLevels[compressionTarget.asset.id] ?? originalCompressionOption(compressionTarget.kind),
+          visible: compressionSheetVisible,
+          onClose: () => setCompressionSheetVisible(false),
+          onSelect: applyCompressionOption
+        }) : null, /*#__PURE__*/_jsx(MetadataSheet, {
+          asset: filteredAssets[viewerIndex],
+          visible: metadataVisible,
+          onClose: () => setMetadataVisible(false)
+        }), !viewerVisible && /*#__PURE__*/_jsx(ExpandableFab, {
+          busy: isCapturing,
+          disabled: isCapturing,
+          onCamera: handleOpenCamera,
+          onImageVideo: handleOpenImageVideo,
+          onDocument: handleOpenDocument,
+          onAudio: handleOpenAudio,
+          onRecordAudio: handleOpenRecordAudio
+        }), /*#__PURE__*/_jsx(RecordAudioScreen, {
+          visible: recordAudioVisible,
+          onClose: () => setRecordAudioVisible(false),
+          onRecorded: handleRecordedAudio
+        })]
+      })
+    })
+  );
+}
+
+// ── Derived responsive values ────────────────────────────────────
+const THUMB_SIZE = ms(56);
+const THUMB_RADIUS = ms(16);
+const CARD_PAD_H = wp(14);
+// CARD_RADIUS and CARD_PAD_V kept for future card-styled asset rows
+const PILL_RADIUS = ms(14);
+const BOTTOM_BAR_H = hp(85);
+const NAV_ICON_SIZE = ms(28);
+
+// Use imported constants for consistent WhatsApp-like preview dimensions
+// PREVIEW_WIDTH, PREVIEW_HEIGHT, and WHATSAPP_ASPECT_RATIO are imported from ResponsivePreviewContainer
+
+const makeS = palette => StyleSheet.create({
+  // ── Root ────────────────────────────────────────────────────────
+  container: {
+    flex: 1,
+    backgroundColor: palette.appBackground,
+    // Android needs nothing here: `translucent={false}` already starts content
+    // below the status bar, and `screen` adds StatusBar.currentHeight on top of
+    // that. The constant only does work on iOS, which this plugin doesn't
+    // target — it stands in for the old safe-area top edge.
+    paddingTop: Platform.OS === 'android' ? 0 : STATUS_BAR_INSET
+  },
+  // ── Screen ─────────────────────────────────────────────────────
+  screen: {
+    flex: 1,
+    paddingTop: Platform.OS === 'android' ? hp(12) + (StatusBar.currentHeight ?? 0) : hp(12),
+    paddingHorizontal: wp(16)
+  },
+  // ── Filter Pills ──────────────────────────────────────────────
+  filtersRow: {
+    flexDirection: 'row',
+    // Even gaps between five equal-width pills; each pill is flex:1 so the row
+    // stays a single line and scales with the screen width / density.
+    gap: wp(6),
+    marginBottom: hp(16)
+  },
+  filterPill: {
+    flex: 1,
+    paddingVertical: hp(10),
+    paddingHorizontal: wp(4),
+    borderRadius: PILL_RADIUS,
+    backgroundColor: palette.surface,
+    borderWidth: 1,
+    borderColor: palette.hairlineFaint,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  filterPillActive: {
+    backgroundColor: palette.primary,
+    borderColor: palette.accentIndigo,
+    shadowColor: palette.primary,
+    shadowOffset: {
+      width: 0,
+      height: hp(6)
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: ms(14),
+    elevation: 8
+  },
+  filterCount: {
+    color: palette.textDim,
+    fontSize: fs(13),
+    fontWeight: '700'
+  },
+  filterCountActive: {
+    color: palette.white
+  },
+  filterLabel: {
+    color: palette.textDim,
+    fontSize: fs(10),
+    fontWeight: '500',
+    marginTop: hp(2),
+    letterSpacing: 0.2
+  },
+  filterLabelActive: {
+    color: palette.textSoft
+  },
+  // ── List ───────────────────────────────────────────────────────
+  listSection: {
+    flex: 1
+  },
+  categoryPageList: {
+    flex: 1
+  },
+  assetList: {
+    paddingBottom: hp(190)
+  },
+  assetListEmpty: {
+    flexGrow: 1,
+    justifyContent: 'center'
+  },
+  separator: {
+    height: 1,
+    backgroundColor: palette.surfaceIndigo,
+    marginHorizontal: CARD_PAD_H
+  },
+  // ── Asset Row Card ─────────────────────────────────────────────
+  assetRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: hp(14),
+    paddingHorizontal: CARD_PAD_H
+  },
+  thumbnailWrapper: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_RADIUS,
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: wp(12)
+  },
+  thumbnail: {
+    width: '100%',
+    height: '100%'
+  },
+  thumbnailPlaceholder: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  thumbnailPlaceholderText: {
+    color: palette.textCharcoal,
+    fontSize: fs(9),
+    textAlign: 'center',
+    fontWeight: '500'
+  },
+  assetTextGroup: {
+    flex: 1,
+    marginRight: wp(8)
+  },
+  assetTitle: {
+    color: palette.textBright,
+    fontSize: fs(14),
+    fontWeight: '700',
+    marginBottom: hp(4)
+  },
+  subtitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  dateIconText: {
+    fontSize: fs(10)
+  },
+  assetSubtitle: {
+    color: palette.textGray,
+    fontSize: fs(12),
+    fontWeight: '400',
+    flexShrink: 1
+  },
+  assetActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  },
+  editButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: palette.greenTintA10,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  viewerContainer: {
+    flex: 1,
+    backgroundColor: palette.viewerBackdrop
+  },
+  viewerHeader: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: ms(16),
+    paddingTop: STATUS_BAR_INSET + ms(12),
+    paddingBottom: ms(12)
+  },
+  viewerCloseButton: {
+    padding: ms(8)
+  },
+  viewerEditButton: {
+    padding: ms(8)
+  },
+  viewerRightControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: ms(12)
+  },
+  compressButtonContainer: {
+    position: 'relative'
+  },
+  compressButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: ms(4),
+    paddingVertical: ms(6),
+    paddingHorizontal: ms(10),
+    borderRadius: ms(16),
+    backgroundColor: palette.whiteA12
+  },
+  compressionMenu: {
+    position: 'absolute',
+    top: ms(44),
+    right: ms(0),
+    width: ms(160),
+    maxHeight: ms(280),
+    backgroundColor: palette.chromeDark,
+    borderRadius: ms(12),
+    borderWidth: 1,
+    borderColor: palette.whiteA15,
+    overflow: 'hidden',
+    zIndex: 1000,
+    shadowColor: palette.black,
+    shadowOffset: {
+      width: 0,
+      height: ms(4)
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: ms(12),
+    elevation: 12
+  },
+  compressionMenuScroll: {
+    maxHeight: ms(280),
+    flexGrow: 0
+  },
+  compressionMenuBackdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 999
+  },
+  compressionMenuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: ms(10),
+    paddingHorizontal: ms(12),
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: palette.whiteA12
+  },
+  compressionMenuItemActive: {
+    backgroundColor: palette.greenTintA10
+  },
+  compressionMenuText: {
+    color: palette.chromeText,
+    fontSize: fs(13),
+    fontWeight: '400'
+  },
+  compressionMenuTextActive: {
+    color: palette.accentGreen,
+    fontWeight: '600'
+  },
+  viewerCounter: {
+    color: palette.chromeText,
+    fontSize: fs(14),
+    fontWeight: '500'
+  },
+  viewerActions: {
+    // A FIXED, reserved-height bar in normal flow (not an overlay). It sits AFTER
+    // the flex-1 viewerContent, so the preview area only ever spans the space above
+    // these buttons — no image, video, document, or audio surface can extend
+    // underneath Delete/Share, for every media source and screen size/orientation.
+    zIndex: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // Centered, evenly spaced row that never touches the media (the media lives in
+    // viewerContent above) or the top controls. The gap keeps the actions visually
+    // balanced and thumb-reachable, and is sized so the widest row — Delete, Share,
+    // Compress and Info together — still fits a narrow screen without wrapping.
+    gap: ms(28),
+    paddingTop: ms(10),
+    // Keeps the buttons clear of the gesture/home navigation bar while reserving
+    // fixed vertical space the media area shrinks to accommodate.
+    paddingBottom: STATUS_BAR_INSET + ms(24),
+    backgroundColor: palette.viewerBackdrop
+  },
+  viewerActionButton: {
+    width: ms(48),
+    height: ms(48),
+    borderRadius: ms(24),
+    backgroundColor: palette.scrimA55Tight,
+    borderWidth: 1,
+    borderColor: palette.whiteA15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // Soft lift so the controls read as a distinct, tappable row over the media.
+    shadowColor: palette.black,
+    shadowOffset: {
+      width: 0,
+      height: ms(3)
+    },
+    shadowOpacity: 0.35,
+    shadowRadius: ms(8),
+    elevation: 6
+  },
+  // ── Compression progress ───────────────────────────────────────
+  // A full-bleed layer over the whole viewer while a compression runs: it dims the media and,
+  // because it is NOT box-none, swallows every touch — so the pager cannot be swiped to another
+  // slide, and Delete/Share/Compress cannot be tapped, while an encode is in flight.
+  compressionOverlay: {
+    ...StyleSheet.absoluteFill,
+    zIndex: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: palette.scrimA70
+  },
+  // One centred line of text, never a spinner: the line itself is the progress report, counting
+  // MEASURED remaining seconds down and handing over to "Finalizing..." at the tail.
+  compressionCountdownPill: {
+    maxWidth: '82%',
+    paddingVertical: ms(14),
+    paddingHorizontal: ms(22),
+    borderRadius: ms(14),
+    borderWidth: 1,
+    borderColor: palette.whiteA15,
+    backgroundColor: palette.sheet95
+  },
+  compressionCountdownText: {
+    color: palette.chromeText,
+    fontSize: fs(15),
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  viewerSlide: {
+    // Width is supplied inline from the live window width (useWindowDimensions)
+    // so each slide tracks runtime size changes; see renderViewerItem.
+    // Height is bounded by viewerContent, which now spans only the space above the
+    // reserved bottom action bar — so media is contain-fitted into the available
+    // preview area and can never reach underneath the Delete/Share buttons.
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    paddingHorizontal: wp(16),
+    // Top padding keeps media clear of the overlaid top header (× + counter); only a
+    // small bottom margin is needed because the action bar reserves its own space.
+    paddingTop: STATUS_BAR_INSET + hp(52),
+    paddingBottom: hp(24)
+  },
+  viewerContentCenter: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%'
+  },
+  viewerContent: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  // ── Video Fallback ─────────────────────────────────────────────
+  videoFallbackOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: palette.scrimA55Tight
+  },
+  videoFallbackText: {
+    color: palette.white,
+    fontSize: fs(15),
+    fontWeight: '600',
+    marginTop: hp(10)
+  },
+  videoFallbackHint: {
+    color: palette.chromeTextMuted,
+    fontSize: fs(12),
+    fontWeight: '400',
+    marginTop: hp(4)
+  },
+  // ── Chevron ────────────────────────────────────────────────────
+  chevronContainer: {
+    width: ms(32),
+    height: ms(32),
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  chevronArrow: {
+    fontSize: fs(32),
+    color: palette.textFaded,
+    fontWeight: '300',
+    includeFontPadding: false
+  },
+  // ── Empty State ────────────────────────────────────────────────
+  emptyStateContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: wp(40),
+    paddingBottom: hp(60)
+  },
+  emptyIconCircle: {
+    width: ms(80),
+    height: ms(80),
+    borderRadius: ms(40),
+    backgroundColor: palette.surface,
+    borderWidth: 1,
+    borderColor: palette.hairlineFainter,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: hp(20)
+  },
+  emptyIconText: {
+    fontSize: fs(32)
+  },
+  emptyTitle: {
+    color: palette.textSoft,
+    fontSize: fs(17),
+    fontWeight: '700',
+    marginBottom: hp(8),
+    textAlign: 'center'
+  },
+  emptySubtitle: {
+    color: palette.textSlate,
+    fontSize: fs(13),
+    fontWeight: '400',
+    textAlign: 'center',
+    lineHeight: fs(19)
+  },
+  // ── Bottom Navigation Bar ──────────────────────────────────────
+  bottomBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: BOTTOM_BAR_H + (Platform.OS === 'ios' ? hp(20) : hp(36)),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    paddingBottom: Platform.OS === 'ios' ? hp(20) : hp(36),
+    backgroundColor: palette.surfaceCard,
+    borderTopWidth: 0
+  },
+  navItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1
+  },
+  navIconWrap: {
+    width: NAV_ICON_SIZE,
+    height: NAV_ICON_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: hp(4)
+  },
+  navIcon: {
+    fontSize: fs(18),
+    color: palette.navInactive
+  },
+  navIconActive: {
+    color: palette.textPale
+  },
+  navLabel: {
+    color: palette.navInactive,
+    fontSize: fs(12),
+    fontWeight: '500',
+    letterSpacing: 0.2
+  },
+  navLabelActive: {
+    color: palette.textPale
+  }
+});
+const makeMetadataStyles = palette => StyleSheet.create({
+  modalRoot: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0,0,0,0.62)'
+  },
+  sheet: {
+    maxHeight: '78%',
+    minHeight: ms(300),
+    backgroundColor: palette.chromeDark,
+    borderTopLeftRadius: ms(22),
+    borderTopRightRadius: ms(22),
+    paddingTop: ms(10),
+    paddingHorizontal: ms(20),
+    paddingBottom: STATUS_BAR_INSET + ms(14),
+    shadowColor: palette.black,
+    shadowOffset: {
+      width: 0,
+      height: -ms(4)
+    },
+    shadowOpacity: 0.35,
+    shadowRadius: ms(14),
+    elevation: 14
+  },
+  handle: {
+    alignSelf: 'center',
+    width: ms(42),
+    height: ms(4),
+    borderRadius: ms(2),
+    backgroundColor: palette.whiteA25,
+    marginBottom: ms(12)
+  },
+  sheetHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingBottom: ms(10),
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: palette.whiteA15
+  },
+  sheetTitle: {
+    color: palette.white,
+    fontSize: fs(18),
+    fontWeight: '700'
+  },
+  sheetClose: {
+    width: ms(34),
+    height: ms(34),
+    borderRadius: ms(17),
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: palette.whiteA12
+  },
+  rows: {
+    paddingVertical: ms(4)
+  },
+  row: {
+    minHeight: ms(48),
+    paddingVertical: ms(9),
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: palette.whiteA12
+  },
+  rowLabel: {
+    color: palette.chromeTextMuted,
+    fontSize: fs(11),
+    fontWeight: '600',
+    marginBottom: ms(3)
+  },
+  rowValue: {
+    color: palette.chromeText,
+    fontSize: fs(14),
+    lineHeight: fs(19)
+  }
+});
+
+/**
+ * Styles for {@link CompressionSheet}. Deliberately the metadata sheet's own geometry — same
+ * radius, handle, header rule and inset — so the viewer reads as having ONE sheet, and every colour
+ * comes from the palette rather than a literal, so the whole surface follows the host's theme.
+ */
+const makeCompressionStyles = palette => StyleSheet.create({
+  modalRoot: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: palette.scrimA60
+  },
+  sheet: {
+    maxHeight: '78%',
+    backgroundColor: palette.chromeDark,
+    borderTopLeftRadius: ms(22),
+    borderTopRightRadius: ms(22),
+    paddingTop: ms(10),
+    paddingHorizontal: ms(20),
+    paddingBottom: STATUS_BAR_INSET + ms(14),
+    shadowColor: palette.black,
+    shadowOffset: {
+      width: 0,
+      height: -ms(4)
+    },
+    shadowOpacity: 0.35,
+    shadowRadius: ms(14),
+    elevation: 14
+  },
+  handle: {
+    alignSelf: 'center',
+    width: ms(42),
+    height: ms(4),
+    borderRadius: ms(2),
+    backgroundColor: palette.whiteA25,
+    marginBottom: ms(12)
+  },
+  sheetHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingBottom: ms(10),
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: palette.whiteA15
+  },
+  sheetTitle: {
+    color: palette.white,
+    fontSize: fs(18),
+    fontWeight: '700'
+  },
+  sheetClose: {
+    width: ms(34),
+    height: ms(34),
+    borderRadius: ms(17),
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: palette.whiteA12
+  },
+  rows: {
+    paddingVertical: ms(4)
+  },
+  row: {
+    minHeight: ms(48),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: ms(10),
+    paddingVertical: ms(9),
+    paddingHorizontal: ms(10),
+    marginVertical: ms(2),
+    borderRadius: ms(10),
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: palette.whiteA12
+  },
+  // The applied row is tinted as well as check-marked, so the current level is findable at a
+  // glance in a ladder twenty rows long.
+  rowActive: {
+    backgroundColor: palette.greenTintA10
+  },
+  rowText: {
+    flexShrink: 1,
+    color: palette.chromeText,
+    fontSize: fs(14),
+    lineHeight: fs(19)
+  },
+  rowTextActive: {
+    color: palette.accentGreen,
+    fontWeight: '600'
+  }
+});
+//# sourceMappingURL=MediaLibraryScreen.js.map