@oxyhq/services 22.9.0 → 22.11.0

package/lib/module/ui/screens/AvatarCropScreen.js

@@ -7,11 +7,17 @@
  * but before the avatar is uploaded. Inspired by iOS Photos, Google Photos and
  * Instagram crop tools.
  *
+ * Reached ONLY by navigating within a `ChangeAvatar` surface, so the panel
+ * morphs from the source list into the editor. The surface owns the chrome: this
+ * screen declares its title and its "Use photo" action through `useSurfaceHeader`
+ * and renders no bar of its own — the nav bar's back arrow is Cancel, and it
+ * returns to the source list.
+ *
  * Architecture:
- *  - Full-bleed black canvas, independent of theme, so photos always read well.
- *  - Translucent top bar with Cancel / Title / Done (primary CTA).
- *  - Circular viewport with white ring, outer 50% black mask, and a 3x3
- *    rule-of-thirds grid that appears during gestures and fades after 800ms.
+ *  - A dark crop stage, independent of theme, so photos always read well, inset
+ *    inside the surface's own themed panel.
+ *  - Circular viewport with white ring and a 3x3 rule-of-thirds grid that
+ *    appears during gestures and fades after 800ms.
  *  - Floating zoom chip during pinch.
  *  - Pan + pinch via Gesture Handler, transform driven by Reanimated.
  *  - Reduced-motion aware entrance animation.
@@ -22,14 +28,18 @@
  * error; missing haptics simply degrades silently.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Image, Platform, AccessibilityInfo, Pressable } from 'react-native';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator, Image, Platform, AccessibilityInfo, Pressable } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { Button } from '@oxyhq/bloom/button';
 import { logger } from '@oxyhq/core';
+import { useOxy } from "../context/OxyContext.js";
 import { useI18n } from "../hooks/useI18n.js";
+import { useReduceMotion } from "../hooks/useReduceMotion.js";
+import { useSurfaceHeader } from "../hooks/useSurfaceHeader.js";
 import { toast } from '@oxyhq/bloom';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Component name used in `logger` context for filtered diagnostics. */
@@ -42,14 +52,20 @@ const VIEWPORT_SIZE = 320;
 const OUTPUT_SIZE = 512;
 const MIN_SCALE = 1;
 const MAX_SCALE = 4;
+/** Zoom increment per +/- button press (web, where there is no pinch). */
+const ZOOM_STEP = 0.5;
+/** Tween duration for a button-driven zoom (collapses to 0 under reduce-motion). */
+const ZOOM_BUTTON_DURATION_MS = 180;
 /** Duration (ms) that the rule-of-thirds grid lingers after a gesture ends. */
 const GRID_FADE_DELAY_MS = 800;
 const GRID_FADE_DURATION_MS = 220;
 /** Duration the zoom chip stays visible after a pinch ends. */
 const ZOOM_CHIP_FADE_DELAY_MS = 600;
 const ZOOM_CHIP_FADE_DURATION_MS = 200;
-/** Backdrop color is fixed independent of theme so the photo always reads well. */
+/** Stage color is fixed independent of theme so the photo always reads well. */
 const CANVAS_BG = '#000000';
+/** Corner radius of the dark stage block inside the surface's themed panel. */
+const STAGE_RADIUS = 24;
 const RING_COLOR = '#ffffff';
 const RING_WIDTH = 2;
 const REMOTE_HTTP_URI_PATTERN = /^https?:\/\//i;
@@ -71,6 +87,26 @@ function clampTranslation(tx, ty, s, baseW, baseH) {
     ty: Math.min(Math.max(ty, -maxY), maxY)
   };
 }
+/**
+ * Measure an image's intrinsic size via `Image.getSize`, wrapped as a Promise so
+ * it can be a React Query `queryFn` (no component state / effects). Rejects on a
+ * platform failure or degenerate dimensions so the query surfaces `isError`.
+ * Mirrors the `measurePhotoDimensions` helper the photo grid uses.
+ */
+function measureImageSize(uri) {
+  return new Promise((resolve, reject) => {
+    Image.getSize(uri, (width, height) => {
+      if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+        reject(new Error('Image reported invalid dimensions'));
+        return;
+      }
+      resolve({
+        width,
+        height
+      });
+    }, () => reject(new Error('Image measurement failed')));
+  });
+}
 
 /**
  * Lazy-loaded reference to the expo-image-manipulator module. The module is an
@@ -191,31 +227,86 @@ async function hapticSelection() {
   }
 }
 const AvatarCropScreen = ({
+  dismiss,
   goBack,
-  onClose,
   imageUri,
+  imageFileId,
   sourceWidth,
-  sourceHeight,
-  onConfirm,
-  onCancel
+  sourceHeight
 }) => {
   const theme = useTheme();
   const {
     t
   } = useI18n();
-  const insets = useSafeAreaInsets();
-
-  // Natural size of the source image. May be known up front (passed in) or
-  // measured lazily via Image.getSize once the image loads.
-  const [naturalSize, setNaturalSize] = useState(sourceWidth && sourceHeight ? {
-    width: sourceWidth,
-    height: sourceHeight
-  } : null);
+  const {
+    oxyServices
+  } = useOxy();
+  // Reactive OS reduce-motion preference (useSyncExternalStore, no effect). Pins
+  // the entrance spring off. Declared before `entrance` so its initial rest value
+  // is correct under reduce-motion.
+  const reduceMotion = useReduceMotion();
+
+  // The "My Oxy files" source hands us a file ID instead of a ready URL. Its
+  // download URL is usually private, so it must be resolved through the SDK
+  // (which throws on failure). Resolving it HERE — not in the source list — is
+  // what keeps the list from lingering on screen for the round-trip: this screen
+  // shows its own spinner on the dark canvas while the URL resolves. A React
+  // Query read (not an effect) so it stays declarative and cached.
+  const shouldResolveFile = !imageUri && !!imageFileId;
+  const sourceQuery = useQuery({
+    queryKey: ['avatarCropSource', imageFileId],
+    enabled: shouldResolveFile,
+    staleTime: Number.POSITIVE_INFINITY,
+    retry: false,
+    queryFn: async () => {
+      if (!imageFileId) {
+        throw new Error('No file id to resolve for cropping');
+      }
+      const resolved = await oxyServices.assetGetUrl(imageFileId);
+      if (!resolved?.url) {
+        throw new Error('No download URL returned for the selected image');
+      }
+      return resolved.url;
+    }
+  });
+
+  // The URL the cropper actually loads: the passed `imageUri`, else the URL the
+  // file-ID query resolved. While it resolves, `effectiveUri` is undefined and
+  // the stage shows its own spinner (never the empty state).
+  const effectiveUri = imageUri ?? sourceQuery.data;
+  const isResolvingSource = shouldResolveFile && !sourceQuery.data && !sourceQuery.isError;
+  const sourceErrorMessage = sourceQuery.isError ? t('changeAvatar.errors.loadImageFailed') || 'Could not load the selected image' : null;
+
+  // Natural size of the source image. Known up front (device/camera sources pass
+  // the dimensions) OR measured lazily from `effectiveUri` via a React Query read
+  // (no effect) — the same Image.getSize→useQuery pattern the photo grid uses.
+  const hasPassedDimensions = !!(sourceWidth && sourceHeight);
+  const measureQuery = useQuery({
+    queryKey: ['avatarCropMeasure', effectiveUri],
+    enabled: !!effectiveUri && !hasPassedDimensions,
+    queryFn: () => {
+      if (!effectiveUri) {
+        throw new Error('No image to measure');
+      }
+      return measureImageSize(effectiveUri);
+    },
+    staleTime: Number.POSITIVE_INFINITY,
+    retry: false,
+    placeholderData: keepPreviousData
+  });
+  const naturalSize = useMemo(() => {
+    if (sourceWidth && sourceHeight) return {
+      width: sourceWidth,
+      height: sourceHeight
+    };
+    return measureQuery.data ?? null;
+  }, [sourceWidth, sourceHeight, measureQuery.data]);
+  /** Measurement failed (bad dimensions / getSize error) — surfaced via the empty UI. */
+  const measureErrorMessage = measureQuery.isError ? t('editProfile.toasts.cropMeasureFailed') || 'Could not measure the image' : null;
   const [isProcessing, setIsProcessing] = useState(false);
   const [zoomLabel, setZoomLabel] = useState('1.0');
   /** True when scale != MIN_SCALE OR translate != 0 — used to reveal the reset link. */
   const [isModified, setIsModified] = useState(false);
-  const [reduceMotion, setReduceMotion] = useState(false);
 
   // Shared values for the active gesture transform.
   const scale = useSharedValue(MIN_SCALE);
@@ -265,99 +356,18 @@ const AvatarCropScreen = ({
     };
   }, [naturalSize]);
 
-  // Track in-flight measurement to avoid duplicate Image.getSize calls when
-  // the component re-renders before the previous getSize callback fires.
-  const measuringUriRef = useRef(null);
-  /** Failure state for measurement, surfaced to the user via the empty UI. */
-  const [measureError, setMeasureError] = useState(null);
-  const handleImageMeasured = useCallback(uri => {
-    if (measuringUriRef.current === uri) return;
-    measuringUriRef.current = uri;
-    // `logger.debug` is dev-gated upstream (no-op in production).
-    // We deliberately don't log the full file URI in any production
-    // path — only in debug builds — to avoid leaking on-device file
-    // paths into logcat / Sentry breadcrumbs.
-    logger.debug('Measuring image', {
-      component: LOG_COMPONENT
-    });
-    Image.getSize(uri, (w, h) => {
-      logger.debug('Image measured', {
-        component: LOG_COMPONENT
-      }, {
-        width: w,
-        height: h
-      });
-      if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
-        const message = t('editProfile.toasts.cropMeasureFailed') || 'Could not measure the image';
-        setMeasureError(message);
-        toast.error(message);
-        measuringUriRef.current = null;
-        return;
-      }
-      setMeasureError(null);
-      setNaturalSize({
-        width: w,
-        height: h
-      });
-    }, () => {
-      logger.error('Image.getSize failed', new Error('Image measurement failed'), {
-        component: LOG_COMPONENT
-      });
-      const message = t('editProfile.toasts.cropMeasureFailed') || 'Could not measure the image';
-      setMeasureError(message);
-      toast.error(message);
-      measuringUriRef.current = null;
-    });
-  }, [t]);
-
-  // Kick off measurement once per imageUri. Using useEffect (not a render-body
-  // side effect) so the call is scheduled exactly when the URI changes,
-  // rather than being re-fired on every parent re-render.
-  useEffect(() => {
-    if (!imageUri) return;
-    if (sourceWidth && sourceHeight) return;
-    if (naturalSize) return;
-    handleImageMeasured(imageUri);
-  }, [handleImageMeasured, imageUri, naturalSize, sourceHeight, sourceWidth]);
-
-  // Dev-only one-time mount breadcrumb. `logger.debug` is dev-gated so
-  // this is a no-op in production releases; we additionally avoid logging
-  // the full `imageUri` to prevent leaking on-device file paths into any
-  // breadcrumb sink that picks up debug output.
-  useEffect(() => {
-    logger.debug('mount', {
-      component: LOG_COMPONENT
-    }, {
-      hasImageUri: !!imageUri,
-      hasSourceDimensions: !!(sourceWidth && sourceHeight)
-    });
-  }, [imageUri, sourceHeight, sourceWidth]);
-
-  // Detect reduce-motion preference once on mount + subscribe to changes.
-  useEffect(() => {
-    let cancelled = false;
-    AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
-      if (cancelled) return;
-      setReduceMotion(enabled);
-      if (enabled) {
-        entrance.value = 1;
-      }
-    }).catch(() => {
-      // Best-effort — fall back to motion enabled.
-    });
-    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', enabled => {
-      setReduceMotion(enabled);
-      if (enabled) entrance.value = 1;
-    });
-    return () => {
-      cancelled = true;
-      sub.remove();
-    };
-  }, [entrance]);
-
-  // Play the entrance pulse exactly once when motion is allowed.
-  useEffect(() => {
-    if (reduceMotion) return;
+  // Entrance pulse, driven from the crop frame's ref callback (fires on mount)
+  // rather than an effect — the media-cleanup `startEntrance` pattern. Reduce
+  // motion pins the frame at rest; otherwise it springs in from 0.95→1. The
+  // callback depends on `reduceMotion`, so if that preference resolves/flips the
+  // callback re-runs with the node and re-pins (snap to 1) — matching the old
+  // effect that snapped the entrance to rest when reduce-motion turned on.
+  const startEntrance = useCallback(node => {
+    if (!node) return; // unmount
+    if (reduceMotion) {
+      entrance.value = 1;
+      return;
+    }
     entrance.value = withSpring(1, {
       damping: 14,
       stiffness: 180,
@@ -476,6 +486,11 @@ const AvatarCropScreen = ({
     runOnJS(hideZoomChip)();
   }), [baseFit, commitTransform, hideGrid, hideZoomChip, logGestureStart, notifyMaxBoundHit, notifyMinBoundHit, resetPinchBounds, savedScale, scale, showGrid, showZoomChip, translateX, translateY, updateZoomLabel]);
   const composedGesture = useMemo(() => Gesture.Simultaneous(panGesture, pinchGesture), [panGesture, pinchGesture]);
+
+  // Deps list every shared value the mapper reads so it re-runs on web (RN-Web
+  // has no worklets plugin — a mapper omitting its driver SVs freezes at the
+  // first frame, which would leave the button-driven zoom stuck). Native
+  // auto-tracks and ignores the extra deps, so this is safe cross-platform.
   const imageAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{
       translateX: translateX.value
@@ -484,12 +499,15 @@ const AvatarCropScreen = ({
     }, {
       scale: scale.value
     }]
-  }));
+  }), [translateX, translateY, scale]);
+
+  // `[entrance]` in deps so the ref-callback-driven entrance spring ticks on
+  // RN-Web (no worklets plugin); native auto-tracks and ignores the extra dep.
   const cropFrameAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{
       scale: entrance.value
     }]
-  }));
+  }), [entrance]);
   const gridAnimatedStyle = useAnimatedStyle(() => ({
     opacity: gridOpacity.value
   }));
@@ -512,6 +530,43 @@ const AvatarCropScreen = ({
     AccessibilityInfo.announceForAccessibility(t('editProfile.crop.a11yResetAnnouncement') || 'Crop reset');
   }, [commitTransform, reduceMotion, scale, t, translateX, translateY]);
 
+  /**
+   * Web zoom controls. A desktop pointer has no pinch, so the +/- buttons drive
+   * the SAME `scale` shared value the pinch gesture does — clamped to the same
+   * bounds, with translation re-clamped through the shared {@link clampTranslation}
+   * helper so the image never leaves the viewport. Native keeps pinch (the
+   * buttons are hidden there). Reduced motion collapses the tween to an instant
+   * set. Reads the committed transform (refs) at press time, never during render.
+   */
+  const applyZoom = useCallback(direction => {
+    if (!baseFit || isProcessing) return;
+    const current = committedScale.current;
+    const target = Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + direction * ZOOM_STEP));
+    if (Math.abs(target - current) < 0.001) {
+      // Already at the bound — a soft selection tick, no transform change.
+      void hapticSelection();
+      return;
+    }
+    const clamped = clampTranslation(committedTranslateX.current, committedTranslateY.current, target, baseFit.width, baseFit.height);
+    const duration = reduceMotion ? 0 : ZOOM_BUTTON_DURATION_MS;
+    scale.value = withTiming(target, {
+      duration
+    });
+    translateX.value = withTiming(clamped.tx, {
+      duration
+    });
+    translateY.value = withTiming(clamped.ty, {
+      duration
+    });
+    commitTransform(target, clamped.tx, clamped.ty);
+    void hapticImpact('light');
+    // Mirror the pinch's transient chrome so the buttons feel identical.
+    showGrid();
+    hideGrid();
+    showZoomChip();
+    hideZoomChip();
+  }, [baseFit, commitTransform, hideGrid, hideZoomChip, isProcessing, reduceMotion, scale, showGrid, showZoomChip, translateX, translateY]);
+
   /**
    * Convert the on-screen transform into pixel-space crop coordinates
    * relative to the source image, then invoke expo-image-manipulator to
@@ -529,7 +584,7 @@ const AvatarCropScreen = ({
       committedTranslateX: committedTranslateX.current,
       committedTranslateY: committedTranslateY.current
     });
-    if (!imageUri || !baseFit || !naturalSize) {
+    if (!effectiveUri || !baseFit || !naturalSize) {
       toast.error(t('editProfile.toasts.cropNotReady') || 'Image not ready yet');
       return;
     }
@@ -572,7 +627,7 @@ const AvatarCropScreen = ({
         cropSize,
         outputSize: OUTPUT_SIZE
       });
-      const preparedImage = await prepareImageForManipulator(imageUri);
+      const preparedImage = await prepareImageForManipulator(effectiveUri);
       preparedImageCleanup = preparedImage.cleanup;
       const result = await manipulateAsync(preparedImage.uri, [{
         crop: {
@@ -599,16 +654,16 @@ const AvatarCropScreen = ({
         height: result.height
       });
       void hapticNotification('success');
-      await onConfirm?.({
+
+      // Resolve the surface's present() promise with the cropped JPEG and
+      // close it. The awaiting caller (`useAvatarPicker`) handles the
+      // upload + any success toast.
+      dismiss?.({
         uri: result.uri,
         width: result.width,
         height: result.height,
         mime: 'image/jpeg'
       });
-
-      // Close the sheet on success. The caller is responsible for any
-      // success toast (uploads typically toast their own outcome).
-      onClose?.();
     } catch (err) {
       const normalizedError = normalizeCropError(err);
       logger.error('handleConfirm failed', normalizedError, {
@@ -620,86 +675,48 @@ const AvatarCropScreen = ({
       preparedImageCleanup?.();
       setIsProcessing(false);
     }
-  }, [baseFit, imageUri, naturalSize, onClose, onConfirm, t]);
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-    goBack?.();
-  }, [goBack, onCancel]);
-  const topInset = Platform.OS === 'ios' ? Math.max(insets.top, 12) : Math.max(insets.top, 16);
-  const bottomInset = Math.max(insets.bottom, 16);
+  }, [baseFit, effectiveUri, naturalSize, dismiss, t]);
+
+  /**
+   * The surface's primary action, mounted into the Dialog nav bar's right slot
+   * (which is why it must stay referentially stable). While processing it keeps
+   * its width and shows a spinner; the a11y label carries the "Saving…" state
+   * the visible label can no longer show.
+   */
+  const doneAction = useMemo(() => /*#__PURE__*/_jsx(Button, {
+    variant: "primary",
+    size: "small",
+    onPress: () => void handleConfirm(),
+    disabled: isProcessing || !baseFit,
+    loading: isProcessing,
+    accessibilityLabel: isProcessing ? t('editProfile.crop.saving') : t('editProfile.crop.confirm'),
+    children: t('editProfile.crop.confirm')
+  }), [baseFit, handleConfirm, isProcessing, t]);
+
+  // No bar of our own: the surface owns the chrome. `goBack` pops back to the
+  // ChangeAvatar source list (and dismisses the surface if this is somehow the
+  // root frame), which is exactly Cancel.
+  useSurfaceHeader({
+    title: t('editProfile.crop.title'),
+    largeTitle: false,
+    right: doneAction,
+    onBack: goBack
+  });
   const styles = useMemo(() => StyleSheet.create({
     container: {
-      flex: 1,
-      backgroundColor: CANVAS_BG
-    },
-    topBar: {
-      paddingTop: topInset,
-      paddingHorizontal: 12,
-      paddingBottom: 10,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      backgroundColor: 'rgba(0,0,0,0.6)',
-      zIndex: 10
-    },
-    topBarTitleWrap: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingHorizontal: 4
-    },
-    topBarTitle: {
-      color: '#ffffff',
-      fontSize: 17,
-      letterSpacing: -0.2,
-      ...(Platform.OS === 'web' ? {
-        fontWeight: '600'
-      } : null)
-    },
-    cancelBtn: {
-      minWidth: 64,
-      paddingHorizontal: 10,
-      paddingVertical: 8,
-      borderRadius: 18,
-      alignItems: 'flex-start',
-      justifyContent: 'center'
-    },
-    cancelLabel: {
-      color: '#ffffff',
-      fontSize: 15,
-      opacity: 0.85
-    },
-    doneBtn: {
-      minWidth: 76,
-      paddingHorizontal: 14,
-      paddingVertical: 8,
-      borderRadius: 18,
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: theme.colors.primary
-    },
-    doneBtnDisabled: {
-      opacity: 0.5
-    },
-    doneLabel: {
-      color: '#ffffff',
-      fontSize: 15,
-      letterSpacing: -0.1,
-      ...(Platform.OS === 'web' ? {
-        fontWeight: '600'
-      } : null)
-    },
-    doneLabelLoading: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 8
+      backgroundColor: theme.colors.background
     },
     stage: {
-      flex: 1,
+      backgroundColor: CANVAS_BG,
+      borderRadius: STAGE_RADIUS,
+      overflow: 'hidden',
+      // Top padding clears the zoom chip, which floats 44dp above
+      // the crop frame and would otherwise be clipped by `overflow`.
+      paddingTop: 60,
+      paddingBottom: 28,
+      paddingHorizontal: 16,
       alignItems: 'center',
-      justifyContent: 'center',
-      paddingHorizontal: 16
+      justifyContent: 'center'
     },
     cropFrame: {
       width: VIEWPORT_SIZE,
@@ -784,17 +801,14 @@ const AvatarCropScreen = ({
       letterSpacing: 0.2
     },
     helperBlock: {
-      paddingHorizontal: 24,
-      paddingTop: 24,
-      paddingBottom: bottomInset,
+      paddingTop: 16,
       alignItems: 'center',
-      justifyContent: 'flex-end',
-      gap: 10
+      gap: 8
     },
     helper: {
       fontSize: 13,
       lineHeight: 18,
-      color: 'rgba(255,255,255,0.6)',
+      color: theme.colors.textSecondary,
       textAlign: 'center',
       maxWidth: 320
     },
@@ -804,123 +818,72 @@ const AvatarCropScreen = ({
     },
     resetLinkText: {
       fontSize: 13,
-      color: '#ffffff',
-      opacity: 0.85,
+      color: theme.colors.primary,
       textDecorationLine: 'underline'
     },
     emptyState: {
-      flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      padding: 24
+      paddingVertical: 48
     },
     emptyLabel: {
       fontSize: 14,
-      color: 'rgba(255,255,255,0.7)',
+      color: theme.colors.textSecondary,
       textAlign: 'center'
     }
-  }), [baseFit, bottomInset, theme, topInset]);
+  }), [baseFit, theme]);
 
   // Reset link reveal — only show when the image is not at the default
   // transform. Use derived display state to avoid mounting/unmounting jank.
   const resetLinkOpacity = isModified ? 1 : 0;
 
-  // No image supplied OR measurement failed — render a minimal empty state.
-  if (!imageUri || measureError) {
-    const emptyMessage = !imageUri ? t('editProfile.crop.noImage') || 'No image to crop' : measureError;
-    return /*#__PURE__*/_jsxs(View, {
+  // Zoom-button state is derived from `zoomLabel` (reactive state, set on every
+  // commit) rather than the committed-scale ref, so it stays correct across
+  // renders without reading mutable state during render. The +/- pair is web-only
+  // (native has pinch).
+  const currentZoom = Number.parseFloat(zoomLabel) || MIN_SCALE;
+  const canZoomOut = currentZoom > MIN_SCALE + 0.001;
+  const canZoomIn = currentZoom < MAX_SCALE - 0.001;
+  const showZoomControls = Platform.OS === 'web';
+  const zoomOutDisabled = !canZoomOut || !baseFit || isProcessing;
+  const zoomInDisabled = !canZoomIn || !baseFit || isProcessing;
+
+  // No source at all (and none resolving), a resolution failure, or a
+  // measurement failure — render a minimal empty state. While a file ID is still
+  // resolving, fall THROUGH to the stage so its own spinner shows, not this.
+  // The surface's nav bar (back = cancel) is the only chrome needed here.
+  if (!effectiveUri && !isResolvingSource || sourceErrorMessage || measureErrorMessage) {
+    const emptyMessage = sourceErrorMessage ? sourceErrorMessage : measureErrorMessage ? measureErrorMessage : t('editProfile.crop.noImage');
+    return /*#__PURE__*/_jsx(View, {
       style: styles.container,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.topBar,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          accessibilityLabel: t('editProfile.crop.cancel') || 'Cancel',
-          accessibilityRole: "button",
-          style: styles.cancelBtn,
-          onPress: handleCancel,
-          activeOpacity: 0.6,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.cancelLabel,
-            children: t('editProfile.crop.cancel') || 'Cancel'
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.topBarTitleWrap,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.topBarTitle,
-            children: t('editProfile.crop.title') || 'Crop avatar'
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.cancelBtn
-        })]
-      }), /*#__PURE__*/_jsx(View, {
+      className: "px-screen-margin pb-space-24",
+      children: /*#__PURE__*/_jsx(View, {
         style: styles.emptyState,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.emptyLabel,
           children: emptyMessage
         })
-      })]
+      })
     });
   }
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
+    className: "px-screen-margin pb-space-24",
     children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.topBar,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        accessibilityLabel: t('editProfile.crop.cancel') || 'Cancel',
-        accessibilityRole: "button",
-        style: styles.cancelBtn,
-        onPress: handleCancel,
-        disabled: isProcessing,
-        activeOpacity: 0.6,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.cancelLabel,
-          children: t('editProfile.crop.cancel') || 'Cancel'
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.topBarTitleWrap,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.topBarTitle,
-          numberOfLines: 1,
-          children: t('editProfile.crop.title') || 'Crop avatar'
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        accessibilityLabel: t('editProfile.crop.confirm') || 'Use photo',
-        accessibilityRole: "button",
-        accessibilityState: {
-          disabled: isProcessing || !baseFit,
-          busy: isProcessing
-        },
-        style: [styles.doneBtn, (isProcessing || !baseFit) && styles.doneBtnDisabled],
-        onPress: handleConfirm,
-        disabled: isProcessing || !baseFit,
-        activeOpacity: 0.85,
-        children: isProcessing ? /*#__PURE__*/_jsxs(View, {
-          style: styles.doneLabelLoading,
-          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: "#ffffff"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.doneLabel,
-            children: t('editProfile.crop.saving') || 'Saving…'
-          })]
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: styles.doneLabel,
-          children: t('editProfile.crop.confirm') || 'Use photo'
-        })
-      })]
-    }), /*#__PURE__*/_jsx(View, {
       style: styles.stage,
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      children: [/*#__PURE__*/_jsxs(Animated.View, {
+        ref: startEntrance,
         style: [styles.cropFrame, cropFrameAnimatedStyle],
         accessible: true,
         accessibilityRole: "image",
-        accessibilityLabel: t('editProfile.crop.a11yImage') || 'Crop preview. Pinch to zoom and drag to reposition the image.',
+        accessibilityLabel: t('editProfile.crop.a11yImage'),
         children: [/*#__PURE__*/_jsx(GestureDetector, {
           gesture: composedGesture,
           children: /*#__PURE__*/_jsx(View, {
             style: styles.viewport,
-            children: baseFit ? /*#__PURE__*/_jsx(Animated.Image, {
+            children: baseFit && effectiveUri ? /*#__PURE__*/_jsx(Animated.Image, {
               source: {
-                uri: imageUri
+                uri: effectiveUri
               },
               style: [styles.image, imageAnimatedStyle],
               resizeMode: "cover"
@@ -958,17 +921,52 @@ const AvatarCropScreen = ({
             style: styles.zoomChipText,
             children: t('editProfile.crop.zoom', {
               value: zoomLabel
-            }) || `${zoomLabel}×`
+            })
           })
         })]
-      })
+      }), showZoomControls ? /*#__PURE__*/_jsx(View, {
+        className: "absolute bottom-4 left-0 right-0 items-center",
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/_jsxs(View, {
+          className: "flex-row overflow-hidden rounded-full bg-black/70",
+          children: [/*#__PURE__*/_jsx(Pressable, {
+            accessibilityRole: "button",
+            accessibilityLabel: t('editProfile.crop.zoomOut'),
+            accessibilityState: {
+              disabled: zoomOutDisabled
+            },
+            disabled: zoomOutDisabled,
+            onPress: () => applyZoom(-1),
+            className: `h-10 w-[52px] items-center justify-center active:bg-white/10${zoomOutDisabled ? ' opacity-40' : ''}`,
+            children: /*#__PURE__*/_jsx(Text, {
+              className: "text-white text-[22px] font-medium leading-[24px]",
+              children: '−'
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            className: "w-px self-stretch bg-white/25"
+          }), /*#__PURE__*/_jsx(Pressable, {
+            accessibilityRole: "button",
+            accessibilityLabel: t('editProfile.crop.zoomIn'),
+            accessibilityState: {
+              disabled: zoomInDisabled
+            },
+            disabled: zoomInDisabled,
+            onPress: () => applyZoom(1),
+            className: `h-10 w-[52px] items-center justify-center active:bg-white/10${zoomInDisabled ? ' opacity-40' : ''}`,
+            children: /*#__PURE__*/_jsx(Text, {
+              className: "text-white text-[22px] font-medium leading-[24px]",
+              children: '+'
+            })
+          })]
+        })
+      }) : null]
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.helperBlock,
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.helper,
-        children: t('editProfile.crop.helper') || 'The cropped circle is what will appear on your profile. Pinch to zoom, drag to position.'
+        children: t('editProfile.crop.helper')
       }), /*#__PURE__*/_jsx(Pressable, {
-        accessibilityLabel: t('editProfile.crop.a11yReset') || 'Reset crop to default position',
+        accessibilityLabel: t('editProfile.crop.a11yReset'),
         accessibilityRole: "button",
         accessibilityState: {
           disabled: !isModified || isProcessing
@@ -980,7 +978,7 @@ const AvatarCropScreen = ({
         }],
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.resetLinkText,
-          children: t('editProfile.crop.resetToCenter') || 'Reset to center'
+          children: t('editProfile.crop.resetToCenter')
         })
       })]
     })]