react-native-ensys-camera-x 1.0.7

package/src/library/MediaLibraryScreen.tsx

@@ -0,0 +1,3003 @@
+import {
+  useState,
+  useMemo,
+  useEffect,
+  useCallback,
+  useRef,
+  type ReactNode,
+} from 'react';
+
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  FlatList,
+  StatusBar,
+  Platform,
+  Modal,
+  useWindowDimensions,
+  Animated,
+  Pressable,
+  PanResponder,
+  ScrollView,
+  Alert,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import type { CameraAsset, MediaMetadata } from '../types';
+import {
+  openCameraPicker,
+  openDocumentPicker,
+  openAudioPicker,
+  openGalleryEditor,
+  startUpload,
+  secureDeleteMedia,
+  shareMedia,
+  compressVideo,
+  compressImage,
+  addCompressionProgressListener,
+  getMediaMetadata,
+} from '../nativeActions';
+// 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';
+import { extensionForMimeType, useMediaDatabase } from '../db';
+import { getDocumentPreviewKind } from '../NativeDocumentPreviewView';
+import { usePortraitPreviewDimensions } from '../ResponsivePreviewContainer';
+import { ExpandableFab } from './components/ExpandableFab';
+import { DocumentPreview } from './components/DocumentPreview';
+import { AudioPreview } from './components/AudioPreview';
+import { ImagePreview } from './components/ImagePreview';
+import { VideoPreview } from './components/VideoPreview';
+import { RecordAudioScreen } from './components/RecordAudioScreen';
+import {
+  ViewerCounter,
+  type ViewerCounterHandle,
+} from './components/ViewerCounter';
+import {
+  GlobalAudioPlayerProvider,
+  GlobalMiniAudioPlayer,
+} from '../AudioPlayerContext';
+import { useCameraLocalization } from '../localization';
+import { RenderIcon } from '../icons';
+import { DocumentTile, AudioTile } from './components/FileTiles';
+// 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';
+import { useLibraryPalette, type LibraryPalette } from './palette';
+import {
+  refreshAssetMetadata,
+  refreshAssetMetadataBatch,
+} from './fileMetadata';
+import {
+  formatFileSize,
+  formatFileSizeRange,
+  formatMediaDate,
+  formatMediaTime,
+  formatMediaDuration,
+  formatDimensions,
+  localizeNumber,
+} from './localizedFormat';
+// 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,
+  type CompressionProgressTracker,
+} from './compressionEstimate';
+
+// 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.
+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'] as const;
+/**
+ * One of the five library categories, in tab order. Exported from the package
+ * as `MediaLibraryFilterKey` — the type of the `initialFilter` prop.
+ */
+export type FilterKey = (typeof FILTER_KEYS)[number];
+// Mutable copy for FlatList's `data` prop (typed against mutable arrays).
+const FILTER_PAGES: FilterKey[] = [...FILTER_KEYS];
+
+// Map an asset's media type to the category tab that displays it.
+const FILTER_KEY_FOR_TYPE: Record<CameraAsset['type'], FilterKey> = {
+  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?: string) => {
+  if (!name) return null;
+  const kind = getDocumentPreviewKind(name, undefined);
+  return kind !== null && kind !== 'image' ? kind : null;
+};
+
+const getAssetPreviewMode = (asset: CameraAsset): 'video' | 'document' | 'audio' | 'image' => {
+  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: CameraAsset | undefined
+): 'image' | 'video' | null => {
+  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: CameraAsset | undefined): boolean => {
+  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: CameraAsset[]): FilterKey | null => {
+  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: CameraAsset): string | null => {
+  const value = asset.fileName || asset.documentUri || asset.uri;
+  const withoutQuery = value?.split(/[?#]/)[0] || '';
+  return withoutQuery.split(/[\\/]/).pop() || null;
+};
+
+const MetadataSheet = ({
+  asset,
+  visible,
+  onClose,
+}: {
+  asset: CameraAsset | undefined;
+  visible: boolean;
+  onClose: () => void;
+}) => {
+  const { t, locale } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const metadataStyles = useMemo(() => makeMetadataStyles(palette), [palette]);
+  const [resolvedAsset, setResolvedAsset] = useState<CameraAsset | undefined>(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: Array<[string, string]> = [
+    [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] as [string, string]]
+      : []),
+    [t('metaResolution'), resolution ? `${resolution} ${t('pixelsUnit')}` : unknown],
+    [t('metaDate'), dateValue],
+    [t('metaPath'), resolvedAsset.documentUri || resolvedAsset.uri || unknown],
+  ];
+
+  return (
+    <Modal transparent visible={visible} animationType="none" onRequestClose={closeAnimated}>
+      <View style={metadataStyles.modalRoot}>
+        <Animated.View style={[metadataStyles.backdrop, { opacity: backdropOpacity }]}>
+          <Pressable style={StyleSheet.absoluteFill} onPress={closeAnimated} />
+        </Animated.View>
+        <Animated.View
+          style={[metadataStyles.sheet, { transform: [{ translateY }] }]}
+          onLayout={(event) => {
+            sheetHeightRef.current = event.nativeEvent.layout.height;
+          }}
+          {...panResponder.panHandlers}
+        >
+          <View style={metadataStyles.handle} />
+          <View style={metadataStyles.sheetHeader}>
+            <Text style={metadataStyles.sheetTitle}>{detailsTitle}</Text>
+            <TouchableOpacity
+              onPress={closeAnimated}
+              style={metadataStyles.sheetClose}
+              accessibilityRole="button"
+              accessibilityLabel={t('close')}
+            >
+              <RenderIcon name="close" size={20} color={palette.white} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={metadataStyles.rows}
+          >
+            {rows.map(([label, value]) => (
+              <View key={label} style={metadataStyles.row}>
+                <Text style={metadataStyles.rowLabel}>{label}</Text>
+                <Text style={metadataStyles.rowValue} selectable>{value}</Text>
+              </View>
+            ))}
+          </ScrollView>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+/**
+ * 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,
+}: {
+  /** The ORIGINAL stored asset. Every size on the sheet is measured from this file. */
+  asset: CameraAsset | undefined;
+  kind: 'image' | 'video';
+  /** The option currently applied — the row that carries the check mark. */
+  activeOption: string;
+  visible: boolean;
+  onClose: () => void;
+  onSelect: (option: string) => void;
+}) => {
+  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?: string) => {
+      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: Array<{ option: string; label: string; active: boolean }> = [
+    {
+      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 (
+    <Modal transparent visible={visible} animationType="none" onRequestClose={dismiss}>
+      <View style={sheetStyles.modalRoot}>
+        <Animated.View
+          style={[sheetStyles.backdrop, { opacity: backdropOpacity }]}
+        >
+          <Pressable style={StyleSheet.absoluteFill} onPress={dismiss} />
+        </Animated.View>
+        <Animated.View
+          style={[sheetStyles.sheet, { transform: [{ translateY }] }]}
+          onLayout={(event) => {
+            sheetHeightRef.current = event.nativeEvent.layout.height;
+          }}
+          {...panResponder.panHandlers}
+        >
+          <View style={sheetStyles.handle} />
+          <View style={sheetStyles.sheetHeader}>
+            <Text style={sheetStyles.sheetTitle}>
+              {t(isVideo ? 'compressVideo' : 'compressImage')}
+            </Text>
+            <TouchableOpacity
+              onPress={dismiss}
+              style={sheetStyles.sheetClose}
+              accessibilityRole="button"
+              accessibilityLabel={t('close')}
+            >
+              <RenderIcon name="close" size={20} color={palette.white} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={sheetStyles.rows}
+          >
+            {rows.map((row) => (
+              <TouchableOpacity
+                key={row.option}
+                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
+                }
+              >
+                <Text
+                  style={[
+                    sheetStyles.rowText,
+                    row.active && sheetStyles.rowTextActive,
+                  ]}
+                  numberOfLines={1}
+                >
+                  {row.label}
+                </Text>
+                {row.active ? (
+                  <RenderIcon
+                    name="check"
+                    size={18}
+                    color={palette.accentGreen}
+                  />
+                ) : null}
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+/** Props for {@link MediaLibraryScreen}. */
+export interface MediaLibraryScreenProps {
+  /**
+   * Where confirmed media is POSTed by the native foreground UploadService —
+   * this is what drives the upload progress / completed / failed notifications
+   * in the system notification bar.
+   *
+   * OMIT IT and nothing is uploaded: every other behaviour (capture, edit, send,
+   * SQLCipher persistence, the list refresh) is byte-for-byte identical. Set it
+   * to your own endpoint to switch uploads on.
+   */
+  uploadUrl?: string;
+  /** Category tab selected on first mount. Defaults to `'all'`. */
+  initialFilter?: FilterKey;
+  /**
+   * Called with the full asset list whenever the encrypted store changes
+   * (capture, gallery pick, delete). Useful for a badge count or an outer
+   * screen that mirrors the library.
+   */
+  onAssetsChange?: (assets: CameraAsset[]) => void;
+  /** Extra style for the screen's root container. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * 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,
+}: MediaLibraryScreenProps = {}) {
+  // ── 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<FilterKey>(initialFilter);
+  // Pager that gives the tabs swipe navigation. Tap and swipe stay in sync by
+  // funnelling BOTH through selectFilter/onCategoryScrollEnd → setActiveFilter.
+  const categoryPagerRef = useRef<FlatList<FilterKey> | null>(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<((key: FilterKey) => void) | null>(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<
+    Record<string, CameraAsset>
+  >({});
+
+  // 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<string, CameraAsset>();
+    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: FilterKey): CameraAsset[] => {
+      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?: number): string => {
+    const dateStr = formatMediaDate(timestamp, locale, 'long');
+    if (!dateStr) return t('unknown');
+    const timeStr = formatMediaTime(timestamp, locale);
+    return timeStr ? `${dateStr} - ${timeStr}` : dateStr;
+  };
+
+  const formatDuration = (secs?: number): string =>
+    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<FlatList<CameraAsset> | null>(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<ViewerCounterHandle | null>(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: number = previewDims.width;
+  const previewH: number = previewDims.height;
+  const previewAspectRatio: number = 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: CameraAsset[]) => {
+      if (!uploadUrl) return;
+      const uris = assets
+        .map((asset) => asset.documentUri || asset.uri)
+        .filter((uri): uri is string => !!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: {
+      cancelled: boolean;
+      assets: CameraAsset[];
+    } | null) => {
+      if (
+        pickerResult &&
+        !pickerResult.cancelled &&
+        Array.isArray(pickerResult.assets) &&
+        pickerResult.assets.length > 0
+      ) {
+        const capturedAssets: CameraAsset[] = [];
+        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: CameraAsset = {
+            // 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: CameraAsset[] = 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: 'all' | 'photo' | 'video') => {
+    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: (opts: {
+        selectionLimit?: number;
+      }) => Promise<{ cancelled: boolean; assets: CameraAsset[] }>
+    ) => {
+      try {
+        setIsCapturing(true);
+        const result = await pick({ selectionLimit: 0 });
+        if (
+          result &&
+          !result.cancelled &&
+          Array.isArray(result.assets) &&
+          result.assets.length > 0
+        ) {
+          const picked: CameraAsset[] = 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: CameraAsset[] = 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: CameraAsset) => {
+      // 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: FilterKey) => {
+      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: { nativeEvent: { contentOffset: { x: number } } }) => {
+      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: { nativeEvent: { contentOffset: { x: number } } }) => {
+      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(
+    (_: ArrayLike<FilterKey> | null | undefined, index: number) => ({
+      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: number, sourceFilter?: FilterKey) => {
+    // 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: string) => {
+    // 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<
+    Record<string, string>
+  >({});
+  // 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<string | null>(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<Map<string, CameraAsset>>(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<string | null>(null);
+  const compressionTrackerRef = useRef<CompressionProgressTracker | null>(null);
+  const compressionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    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<() => void>(() => {});
+  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: CameraAsset,
+      outUri: string,
+      kind: 'image' | 'video',
+      quality: number
+    ): Promise<CameraAsset> => {
+      let meta: MediaMetadata | null = 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: string) => {
+      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 is string => !!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: any) => {
+      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: any) => {
+      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(
+    (_: Readonly<ArrayLike<CameraAsset>> | undefined, index: number) => ({
+      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 }: { item: CameraAsset; index: number }) => {
+      // 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: ReactNode;
+      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 = (
+          <VideoPreview
+            key={previewKey}
+            asset={item}
+            paused={viewerPaused}
+            onTogglePause={() => setViewerPaused((prev) => !prev)}
+            onPlaybackEnded={() => setViewerPaused(true)}
+            active={isActivePage}
+            controlsVisible={viewerControlsVisible}
+            onVideoAreaPress={toggleViewerControls}
+            onControlInteraction={showViewerControls}
+          />
+        );
+      } else if (previewMode === 'document') {
+        mediaContent = (
+          <DocumentPreview
+            key={previewKey}
+            asset={item}
+            // Only the visible page runs expensive native preview work (PDF page
+            // rasterization); mounted-but-off-screen neighbours stay cheap.
+            active={isActivePage}
+          />
+        );
+        shouldCenterContent = true;
+      } else if (previewMode === 'audio') {
+        mediaContent = (
+          <AudioPreview
+            key={previewKey}
+            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}
+          />
+        );
+        shouldCenterContent = true;
+      } else {
+        // All image types (regular images, GIFs, HEIF/AVIF) use the unified ImagePreview
+        mediaContent = (
+          <ImagePreview
+            key={previewKey}
+            asset={item}
+          />
+        );
+      }
+
+      // Images/videos fill the slide space; audio/documents are centered
+      return (
+        <View style={[s.viewerSlide, { width: viewerWidth }]} key={item.id}>
+          {shouldCenterContent ? (
+            <View style={s.viewerContentCenter}>
+              {mediaContent}
+            </View>
+          ) : (
+            mediaContent
+          )}
+        </View>
+      );
+    },
+    // 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(
+    () => (
+      <View style={s.chevronContainer}>
+        <RenderIcon name="chevron_right" size={ms(20)} color={palette.textFaded} />
+      </View>
+    ),
+    [s, palette]
+  );
+
+  // ── Empty State ──────────────────────────────────────────────────
+  const EmptyState = useCallback(
+    () => (
+      <View style={s.emptyStateContainer}>
+        <View style={s.emptyIconCircle}>
+          <RenderIcon name="document" size={ms(34)} color={palette.textSoft} />
+        </View>
+        <Text style={s.emptyTitle}>{t('libraryEmptyTitle')}</Text>
+        <Text style={s.emptySubtitle}>
+          {t('libraryEmptyMessage')}
+        </Text>
+      </View>
+    ),
+    // `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: FilterKey) =>
+      ({ item, index }: { item: CameraAsset; index: number }) => {
+        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 (
+          <TouchableOpacity
+            style={s.assetRow}
+            onPress={() => openViewer(index, sourceFilter)}
+            activeOpacity={0.8}
+          >
+            {/* Thumbnail maintains fixed size for list layout stability.
+                Use resizeMode='cover' to fill the fixed container without distortion. */}
+            <View style={s.thumbnailWrapper}>
+              {getAssetPreviewMode(item) === 'document' ? (
+                // 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.
+                <DocumentTile asset={item} />
+              ) : item.type === 'audio' ? (
+                // Deterministic per-file waveform + format badge; falls back to
+                // a generic AUD badge when no extension/MIME is available.
+                <AudioTile asset={item} />
+              ) : item.uri || item.documentUri ? (
+                // 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.
+                <MediaThumbnail
+                  asset={item}
+                  style={s.thumbnail}
+                  resizeMode="cover"
+                />
+              ) : (
+                <View style={s.thumbnailPlaceholder}>
+                  <Text style={s.thumbnailPlaceholderText}>{t('preview')}</Text>
+                </View>
+              )}
+            </View>
+            <View style={s.assetTextGroup}>
+              <Text style={s.assetTitle} numberOfLines={1} ellipsizeMode="tail">
+                {title}
+              </Text>
+              <Text style={s.assetSubtitle} numberOfLines={1}>
+                {subtitle}
+              </Text>
+            </View>
+            <View style={s.assetActions}>
+              <ChevronRight />
+            </View>
+          </TouchableOpacity>
+        );
+      },
+    [openViewer, t, locale, s, ChevronRight]
+  );
+
+  // ── Separator ───────────────────────────────────────────────────
+  const ItemSeparator = useCallback(() => <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 }: { item: FilterKey }) => {
+      const pageAssets = assetsForFilter(filterKey);
+      return (
+        <View style={{ width: categoryPageWidth }}>
+          <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 : <EmptyState />}
+            nestedScrollEnabled
+            // ── 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'}
+          />
+        </View>
+      );
+    },
+    [
+      assetsForFilter,
+      categoryPageWidth,
+      renderAssetItemForFilter,
+      ItemSeparator,
+      EmptyState,
+      loading,
+      s,
+    ]
+  );
+
+  return (
+    // 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.
+    <View style={[s.container, style]}>
+     <GlobalAudioPlayerProvider>
+      <StatusBar
+        barStyle={palette.isDark ? 'light-content' : 'dark-content'}
+        backgroundColor={palette.appBackground}
+        translucent={false}
+      />
+
+      <View style={s.screen}>
+        <GlobalMiniAudioPlayer onExpandPlayer={handleExpandAudioPlayer} />
+        {/* ── Filter Tabs ── */}
+        <View style={s.filtersRow}>
+          {[
+            { key: 'all' as const, label: t('all'), count: counts.all },
+            { key: 'photos' as const, label: t('photos'), count: photoCount },
+            { key: 'videos' as const, label: t('videos'), count: videoCount },
+            {
+              key: 'documents' as const,
+              label: t('documents'),
+              count: documentsCount,
+            },
+            { key: 'audio' as const, label: t('audio'), count: audioCount },
+          ].map((tab) => {
+            const isActive = activeFilter === tab.key;
+            return (
+              <TouchableOpacity
+                key={tab.key}
+                style={[s.filterPill, isActive && s.filterPillActive]}
+                onPress={() => selectFilter(tab.key)}
+                activeOpacity={0.8}
+              >
+                <Text style={[s.filterCount, isActive && s.filterCountActive]}>
+                  {tab.count}
+                </Text>
+                {/* One line, auto-shrinking so "Documents" always fits its
+                    equal-width column across every screen size / density. */}
+                <Text
+                  style={[s.filterLabel, isActive && s.filterLabelActive]}
+                  numberOfLines={1}
+                  adjustsFontSizeToFit
+                  minimumFontScale={0.75}
+                >
+                  {tab.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+
+        {/* ── File List — horizontal category pager ──
+            One full-width page per tab (All / Photos / Videos / Documents /
+            Audio), each holding its own vertical list. Swiping left/right
+            anywhere in the content area changes category; the active tab
+            follows the swipe live at the half-page crossing point
+            (handleCategoryScroll), the settled page is re-mirrored as a safety
+            net (handleCategoryScrollEnd), and tab taps glide the pager
+            (selectFilter), so the two stay in lockstep. */}
+        <View style={s.listSection}>
+          <FlatList
+            ref={categoryPagerRef}
+            data={FILTER_PAGES}
+            keyExtractor={(key) => key}
+            horizontal
+            pagingEnabled
+            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
+            nestedScrollEnabled
+            renderItem={renderCategoryPage}
+          />
+        </View>
+      </View>
+
+      <Modal
+        visible={viewerVisible}
+        animationType="slide"
+        onRequestClose={closeViewer}
+        transparent={false}
+        statusBarTranslucent
+        navigationBarTranslucent
+      >
+        {/* Full-bleed container: fills the whole window (including behind the
+            status and navigation bars) with the viewer's dark background, so no
+            underlying app screen is ever visible through the translucent system
+            bars. */}
+        <View style={s.viewerContainer}>
+          <StatusBar
+            barStyle="light-content"
+            translucent
+            backgroundColor="transparent"
+          />
+          {/* Media above the fixed bottom action bar, occupying the full available
+              preview area. viewerContent is flex-1 with the Delete/Share bar below
+              it in reserved space, so media is bounded above the buttons. */}
+          <View style={s.viewerContent}>
+            <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
+              pagingEnabled
+              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}
+            />
+          </View>
+          {/* Controls overlay the media (X top-left, compress + counter top-right) and are
+              inset below the status bar. box-none lets swipe/tap gestures on the
+              empty header area pass through to the media underneath. */}
+          <View
+            style={s.viewerHeader}
+            pointerEvents="box-none"
+          >
+            <TouchableOpacity
+              onPress={closeViewer}
+              style={s.viewerCloseButton}
+              activeOpacity={0.8}
+            >
+              <RenderIcon name="close" size={24} color={palette.white} />
+            </TouchableOpacity>
+
+            {/* Counter chip. It sits over the video's top-right corner, and the header is
+                box-none so empty header regions pass swipes/taps through to the media beneath.
+                Claim the responder here so a tap ON the counter is absorbed (does nothing) rather
+                than falling through to the video-area press handler and revealing/restarting the
+                playback controls — the counter must never affect control visibility. */}
+            <View
+              style={s.viewerRightControls}
+              onStartShouldSetResponder={() => true}
+            >
+              <ViewerCounter
+                ref={viewerCounterRef}
+                index={viewerIndex}
+                total={filteredAssets.length}
+                style={s.viewerCounter}
+              />
+            </View>
+          </View>
+
+          {/* Fixed bottom action bar: Delete + Share + Compress + Info, horizontally centered
+              below the displayed media. Compress is conditional (pixel media only), Info is
+              conditional on metadata support, so the row is three or four buttons wide depending
+              on what is on screen. It lives in normal flow (not overlaid), reserving its own
+              height at the bottom of the viewer; the pager above it is flex-1, so every
+              media kind is bounded above these buttons and can never cover them.
+              These are PERMANENT controls — they are never gated by viewerControlsVisible,
+              so they stay visible even when the temporary video controls are hidden.
+              box-none lets touches pass to the media in the gaps. */}
+          <View
+            style={s.viewerActions}
+            pointerEvents="box-none"
+          >
+            <TouchableOpacity
+              onPress={handleDeleteMedia}
+              style={s.viewerActionButton}
+              activeOpacity={0.7}
+              accessibilityRole="button"
+              accessibilityLabel={t('deleteMedia')}
+            >
+              <RenderIcon
+                name="delete"
+                size={24}
+                color={palette.white}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleShareMedia}
+              style={s.viewerActionButton}
+              activeOpacity={0.7}
+              accessibilityRole="button"
+              accessibilityLabel={t('shareMedia')}
+            >
+              <RenderIcon
+                name="share"
+                size={24}
+                color={palette.white}
+              />
+            </TouchableOpacity>
+            {/* Compression applies to pixel media only. `compressionTarget` is null for a document
+                or an audio file, so the button is absent for them and the row falls back to the
+                three it has always had — no layout or styling change for those kinds. */}
+            {compressionTarget ? (
+              <TouchableOpacity
+                onPress={openCompressionSheet}
+                style={s.viewerActionButton}
+                activeOpacity={0.7}
+                accessibilityRole="button"
+                accessibilityLabel={t(
+                  compressionTarget.kind === 'video'
+                    ? 'compressVideo'
+                    : 'compressImage'
+                )}
+              >
+                <RenderIcon
+                  name="compress"
+                  size={24}
+                  color={palette.white}
+                />
+              </TouchableOpacity>
+            ) : null}
+            {assetSupportsMetadata(filteredAssets[viewerIndex]) ? (
+              <TouchableOpacity
+                onPress={openMetadata}
+                style={s.viewerActionButton}
+                activeOpacity={0.7}
+                accessibilityRole="button"
+                accessibilityLabel={t('viewDetails')}
+              >
+                <RenderIcon
+                  name="view_details"
+                  size={24}
+                  color={palette.white}
+                />
+              </TouchableOpacity>
+            ) : null}
+          </View>
+
+          {/* Compression progress. ONE centred line — the remaining seconds, MEASURED from the
+              encoder's own reports rather than counted down from a guess, handing over to
+              "Finalizing…" for the flush and mux at the tail. Deliberately not a spinner: a spinner
+              says "something is happening", this says how much longer. The layer is opaque to
+              touches, so the pager cannot be swiped and no action can be tapped mid-encode. */}
+          {compressionLabel !== null ? (
+            <View
+              style={s.compressionOverlay}
+              accessibilityRole="progressbar"
+              accessibilityLabel={compressionLabel}
+            >
+              <View style={s.compressionCountdownPill}>
+                <Text style={s.compressionCountdownText}>
+                  {compressionLabel}
+                </Text>
+              </View>
+            </View>
+          ) : null}
+        </View>
+      </Modal>
+
+      {compressionTarget ? (
+        <CompressionSheet
+          asset={compressionTarget.asset}
+          kind={compressionTarget.kind}
+          activeOption={
+            compressionLevels[compressionTarget.asset.id] ??
+            originalCompressionOption(compressionTarget.kind)
+          }
+          visible={compressionSheetVisible}
+          onClose={() => setCompressionSheetVisible(false)}
+          onSelect={applyCompressionOption}
+        />
+      ) : null}
+
+      <MetadataSheet
+        asset={filteredAssets[viewerIndex]}
+        visible={metadataVisible}
+        onClose={() => setMetadataVisible(false)}
+      />
+
+      {/* ── Expandable Floating Action Button (Plus → Camera / Photo / Video / Gallery / Document / Audio) ──
+          Unmounted while the full-screen viewer is open, which also resets it to collapsed. */}
+      {!viewerVisible && (
+        <ExpandableFab
+          busy={isCapturing}
+          disabled={isCapturing}
+          onCamera={handleOpenCamera}
+          onImageVideo={handleOpenImageVideo}
+          onDocument={handleOpenDocument}
+          onAudio={handleOpenAudio}
+          onRecordAudio={handleOpenRecordAudio}
+        />
+      )}
+
+      {/* ── Record Audio Screen ── */}
+      <RecordAudioScreen
+        visible={recordAudioVisible}
+        onClose={() => setRecordAudioVisible(false)}
+        onRecorded={handleRecordedAudio}
+      />
+
+      {/* ── Bottom Navigation Bar ── */}
+      {/*
+      <View style={s.bottomBar}>
+        <TouchableOpacity style={s.navItem} activeOpacity={0.7}>
+          <View style={s.navIconWrap}>
+            <RenderIcon name="camera" size={NAV_ICON_SIZE} color={palette.textPale} />
+          </View>
+          <Text style={[s.navLabel, s.navLabelActive]}>Home</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={s.navItem} activeOpacity={0.7}>
+          <View style={s.navIconWrap}>
+            <RenderIcon name="gallery" size={NAV_ICON_SIZE} color={palette.navInactive} />
+          </View>
+          <Text style={s.navLabel}>Folders</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={s.navItem} activeOpacity={0.7}>
+          <View style={s.navIconWrap}>
+            <RenderIcon name="photo" size={NAV_ICON_SIZE} color={palette.navInactive} />
+          </View>
+          <Text style={s.navLabel}>Media</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={s.navItem} activeOpacity={0.7}>
+          <View style={s.navIconWrap}>
+            <RenderIcon name="more" size={NAV_ICON_SIZE} color={palette.navInactive} />
+          </View>
+          <Text style={s.navLabel}>Settings</Text>
+        </TouchableOpacity>
+      </View>
+      */}
+
+      {/* Camera Preview – opens full-screen directly */}
+     </GlobalAudioPlayerProvider>
+    </View>
+  );
+}
+
+// ── 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: LibraryPalette) =>
+  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: LibraryPalette) =>
+  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: LibraryPalette) =>
+  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',
+    },
+  });