@lmb-it/kitsconcerto-native 0.1.287 → 0.1.289

package/components/ImageCropper/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback, useMemo, useReducer, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useMemo, useReducer, useEffect, useImperativeHandle } from 'react';
 import { PanResponder, View, Text, Image, ActivityIndicator, Pressable } from 'react-native';
 import Slider from '@react-native-community/slider';
 import { Icon } from '../../primitives/Icon/index.js';
@@ -43,181 +43,216 @@ const touchMidpoint = (event, origin) => {
     y: ((a.pageY ?? 0) + (b.pageY ?? 0)) / 2 - origin.y
   };
 };
-function ImageCropper(rawProps) {
-  const { mergedProps: props, elementStyles } = useComponentDefaults("ImageCropper", rawProps);
-  const el = useResolvedElementStyles(elementStyles);
-  const {
-    source,
-    aspect = DEFAULT_ASPECT,
-    maskShape = "rectangle",
-    output,
-    onCrop,
-    onCancel,
-    onError,
-    onInteractionChange,
-    title,
-    hidePreview,
-    hideGrid,
-    maxZoom = DEFAULT_MAX_ZOOM,
-    labels,
-    testID
-  } = props;
-  const text = { ...DEFAULT_LABELS, ...labels ?? {} };
-  const ratio = aspectOf(aspect);
-  const isCircle = maskShape === "circle";
-  const { image, loading, error } = useImageSource(source, onError);
-  const [viewport, setViewport] = useState({ width: 0, height: 0 });
-  const originRef = useRef({ x: 0, y: 0 });
-  const stageRef = useRef(null);
-  const onStageLayout = useCallback((e) => {
-    const { width, height } = e.nativeEvent.layout;
-    setViewport({ width: Math.round(width), height: Math.round(height) });
-    stageRef.current?.measureInWindow((x, y) => {
-      originRef.current = { x, y };
-    });
-  }, []);
-  const config = useMemo(
-    () => ({
-      source: image ? { width: image.width, height: image.height } : { width: 1, height: 1 },
-      viewport: viewport.width > 0 ? viewport : { width: 1, height: 1 },
-      ratio,
-      maxZoom,
-      // ⚠️ ALWAYS FALSE ON NATIVE — see the note at the top of the file.
-      resizable: false,
-      inset: STAGE_INSET_NATIVE,
-      squareFactor: SQUARE_CROP_FACTOR
-    }),
-    [image, viewport, ratio, maxZoom]
-  );
-  const [state, dispatch] = useReducer(cropperReducer, config, initialCropperState);
-  useEffect(() => {
-    dispatch({ type: "configure", config });
-  }, [config]);
-  const ready = !!image && viewport.width > 1 && viewport.height > 1;
-  const pinchRef = useRef(null);
-  const lastPanRef = useRef({ x: 0, y: 0 });
-  const scaleRef = useRef(state.transform.scale);
-  scaleRef.current = state.transform.scale;
-  const resetPan = useCallback(() => {
-    lastPanRef.current = { x: 0, y: 0 };
-  }, []);
-  const beginGesture = useCallback(() => {
-    pinchRef.current = null;
-    lastPanRef.current = { x: 0, y: 0 };
-  }, []);
-  const applyPan = useCallback((dx, dy) => {
-    dispatch({
-      type: "pan",
-      dx: dx - lastPanRef.current.x,
-      dy: dy - lastPanRef.current.y
-    });
-    lastPanRef.current = { x: dx, y: dy };
-  }, []);
-  const applyPinch = useCallback((reading, anchor) => {
-    if (!isUsablePinchReading(reading)) return;
-    const pinch = pinchRef.current;
-    if (!pinch) {
-      pinchRef.current = { reading, scale: scaleRef.current };
-      return;
-    }
-    dispatch({ type: "zoomAt", anchor, scale: pinchScale(pinch, reading) });
-  }, []);
-  const interactingRef = useRef(false);
-  const setInteracting = useCallback(
-    (active) => {
-      if (interactingRef.current === active) return;
-      interactingRef.current = active;
-      onInteractionChange?.(active);
-    },
-    [onInteractionChange]
-  );
-  const detector = useMemo(() => {
-    if (!gestureHandler) return null;
-    const { Gesture } = gestureHandler;
-    const pan = Gesture.Pan().runOnJS(true).onBegin(() => {
-      setInteracting(true);
-      resetPan();
-    }).onUpdate((e) => {
-      if (e.numberOfPointers > 1 || pinchRef.current) {
-        lastPanRef.current = { x: e.translationX, y: e.translationY };
+const ImageCropper = forwardRef(
+  function ImageCropper2(rawProps, ref) {
+    const { mergedProps: props, elementStyles } = useComponentDefaults("ImageCropper", rawProps);
+    const el = useResolvedElementStyles(elementStyles);
+    const {
+      source,
+      aspect = DEFAULT_ASPECT,
+      maskShape = "rectangle",
+      output,
+      onCrop,
+      onCancel,
+      onError,
+      onInteractionChange,
+      title,
+      hidePreview,
+      hideFooter,
+      onFrameChange,
+      hideGrid,
+      maxZoom = DEFAULT_MAX_ZOOM,
+      labels,
+      testID
+    } = props;
+    const text = { ...DEFAULT_LABELS, ...labels ?? {} };
+    const ratio = aspectOf(aspect);
+    const isCircle = maskShape === "circle";
+    const { image, loading, error } = useImageSource(source, onError);
+    const [viewport, setViewport] = useState({ width: 0, height: 0 });
+    const originRef = useRef({ x: 0, y: 0 });
+    const stageRef = useRef(null);
+    const onStageLayout = useCallback((e) => {
+      const { width, height } = e.nativeEvent.layout;
+      setViewport({ width: Math.round(width), height: Math.round(height) });
+      stageRef.current?.measureInWindow((x, y) => {
+        originRef.current = { x, y };
+      });
+    }, []);
+    const config = useMemo(
+      () => ({
+        source: image ? { width: image.width, height: image.height } : { width: 1, height: 1 },
+        viewport: viewport.width > 0 ? viewport : { width: 1, height: 1 },
+        ratio,
+        maxZoom,
+        // ⚠️ ALWAYS FALSE ON NATIVE — see the note at the top of the file.
+        resizable: false,
+        inset: STAGE_INSET_NATIVE,
+        squareFactor: SQUARE_CROP_FACTOR
+      }),
+      [image, viewport, ratio, maxZoom]
+    );
+    const [state, dispatch] = useReducer(cropperReducer, config, initialCropperState);
+    useEffect(() => {
+      dispatch({ type: "configure", config });
+    }, [config]);
+    const ready = !!image && viewport.width > 1 && viewport.height > 1;
+    const pinchRef = useRef(null);
+    const lastPanRef = useRef({ x: 0, y: 0 });
+    const scaleRef = useRef(state.transform.scale);
+    scaleRef.current = state.transform.scale;
+    const resetPan = useCallback(() => {
+      lastPanRef.current = { x: 0, y: 0 };
+    }, []);
+    const beginGesture = useCallback(() => {
+      pinchRef.current = null;
+      lastPanRef.current = { x: 0, y: 0 };
+    }, []);
+    const applyPan = useCallback((dx, dy) => {
+      dispatch({
+        type: "pan",
+        dx: dx - lastPanRef.current.x,
+        dy: dy - lastPanRef.current.y
+      });
+      lastPanRef.current = { x: dx, y: dy };
+    }, []);
+    const applyPinch = useCallback((reading, anchor) => {
+      if (!isUsablePinchReading(reading)) return;
+      const pinch = pinchRef.current;
+      if (!pinch) {
+        pinchRef.current = { reading, scale: scaleRef.current };
         return;
       }
-      applyPan(e.translationX, e.translationY);
-    }).onFinalize(() => {
-      setInteracting(false);
-      resetPan();
-    });
-    const pinch = Gesture.Pinch().runOnJS(true).onBegin(() => {
-      setInteracting(true);
-      pinchRef.current = { reading: 1, scale: scaleRef.current };
-    }).onUpdate((e) => {
-      applyPinch(e.scale, { x: e.focalX, y: e.focalY });
-    }).onFinalize(() => {
-      setInteracting(false);
-      pinchRef.current = null;
-    });
-    return Gesture.Simultaneous(pan, pinch);
-  }, [applyPan, applyPinch, resetPan, setInteracting]);
-  const scrollBlocker = useMemo(
-    () => PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderTerminationRequest: () => false,
-      onShouldBlockNativeResponder: () => true,
-      onPanResponderGrant: () => setInteracting(true),
-      onPanResponderRelease: () => setInteracting(false),
-      onPanResponderTerminate: () => setInteracting(false)
-    }),
-    [setInteracting]
-  );
-  const responder = useMemo(
-    () => PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: () => true,
-      // ⚠️ Refuses a JS-level handover. It does NOT save a vertical
-      // drag inside a ScrollView — that cancellation is native and
-      // never asks — but it does hold the gesture against JS
-      // responders nearer the touch.
-      onPanResponderTerminationRequest: () => false,
-      onPanResponderGrant: () => {
-        setInteracting(true);
-        beginGesture();
+      dispatch({ type: "zoomAt", anchor, scale: pinchScale(pinch, reading) });
+    }, []);
+    const interactingRef = useRef(false);
+    const setInteracting = useCallback(
+      (active) => {
+        if (interactingRef.current === active) return;
+        interactingRef.current = active;
+        onInteractionChange?.(active);
       },
-      onPanResponderMove: (event, gesture) => {
-        const touches = event.nativeEvent.touches.length;
-        if (touches >= 2) {
-          applyPinch(
-            touchDistance(event),
-            touchMidpoint(event, originRef.current)
-          );
-          return;
-        }
-        if (pinchRef.current) {
-          pinchRef.current = null;
-          lastPanRef.current = { x: gesture.dx, y: gesture.dy };
+      [onInteractionChange]
+    );
+    const detector = useMemo(() => {
+      if (!gestureHandler) return null;
+      const { Gesture } = gestureHandler;
+      const pan = Gesture.Pan().runOnJS(true).onBegin(() => {
+        setInteracting(true);
+        resetPan();
+      }).onUpdate((e) => {
+        if (e.numberOfPointers > 1 || pinchRef.current) {
+          lastPanRef.current = { x: e.translationX, y: e.translationY };
           return;
         }
-        applyPan(gesture.dx, gesture.dy);
-      },
-      onPanResponderRelease: () => {
+        applyPan(e.translationX, e.translationY);
+      }).onFinalize(() => {
         setInteracting(false);
-        beginGesture();
-      },
-      onPanResponderTerminate: () => {
+        resetPan();
+      });
+      const pinch = Gesture.Pinch().runOnJS(true).onBegin(() => {
+        setInteracting(true);
+        pinchRef.current = { reading: 1, scale: scaleRef.current };
+      }).onUpdate((e) => {
+        applyPinch(e.scale, { x: e.focalX, y: e.focalY });
+      }).onFinalize(() => {
         setInteracting(false);
-        beginGesture();
+        pinchRef.current = null;
+      });
+      return Gesture.Simultaneous(pan, pinch);
+    }, [applyPan, applyPinch, resetPan, setInteracting]);
+    const scrollBlocker = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true,
+        onPanResponderGrant: () => setInteracting(true),
+        onPanResponderRelease: () => setInteracting(false),
+        onPanResponderTerminate: () => setInteracting(false)
+      }),
+      [setInteracting]
+    );
+    const responder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        // ⚠️ Refuses a JS-level handover. It does NOT save a vertical
+        // drag inside a ScrollView — that cancellation is native and
+        // never asks — but it does hold the gesture against JS
+        // responders nearer the touch.
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: () => {
+          setInteracting(true);
+          beginGesture();
+        },
+        onPanResponderMove: (event, gesture) => {
+          const touches = event.nativeEvent.touches.length;
+          if (touches >= 2) {
+            applyPinch(
+              touchDistance(event),
+              touchMidpoint(event, originRef.current)
+            );
+            return;
+          }
+          if (pinchRef.current) {
+            pinchRef.current = null;
+            lastPanRef.current = { x: gesture.dx, y: gesture.dy };
+            return;
+          }
+          applyPan(gesture.dx, gesture.dy);
+        },
+        onPanResponderRelease: () => {
+          setInteracting(false);
+          beginGesture();
+        },
+        onPanResponderTerminate: () => {
+          setInteracting(false);
+          beginGesture();
+        }
+      }),
+      [applyPan, applyPinch, beginGesture, setInteracting]
+    );
+    const [busy, setBusy] = useState(false);
+    const canSave = ready && !busy && hasCropEncoder();
+    const save = useCallback(async () => {
+      if (!ready || !image || busy) return;
+      setBusy(true);
+      try {
+        const rect = cropToSourceRect(state.crop, state.transform, config.source, state.rotation);
+        const format = output?.format ?? DEFAULT_FORMAT;
+        const result = await encodeCropNative(
+          image.uri,
+          rect,
+          config.source,
+          state.rotation,
+          {
+            width: output?.maxWidth,
+            height: output?.maxHeight,
+            bytes: output?.maxBytes ?? DEFAULT_MAX_BYTES
+          },
+          format
+        );
+        if (!result.withinBudget) {
+          onError?.({
+            reason: "too-large",
+            message: `The smallest version this could produce is ${Math.round(result.size / 1024)} KB.`
+          });
+        }
+        const { withinBudget: _ignored, ...payload } = result;
+        onCrop?.(payload);
+      } catch (cause) {
+        onError?.({
+          reason: "encode-failed",
+          message: cause instanceof Error ? cause.message : "The image could not be saved."
+        });
+      } finally {
+        setBusy(false);
       }
-    }),
-    [applyPan, applyPinch, beginGesture, setInteracting]
-  );
-  const [busy, setBusy] = useState(false);
-  const canSave = ready && !busy && hasCropEncoder();
-  const save = useCallback(async () => {
-    if (!ready || !image || busy) return;
-    setBusy(true);
-    try {
+    }, [ready, image, busy, state, config.source, output, onCrop, onError]);
+    const estimate = useCallback(async () => {
+      if (!ready || !image || !hasCropEncoder()) return null;
       const rect = cropToSourceRect(state.crop, state.transform, config.source, state.rotation);
-      const format = output?.format ?? DEFAULT_FORMAT;
       const result = await encodeCropNative(
         image.uri,
         rect,
@@ -228,411 +263,410 @@ function ImageCropper(rawProps) {
           height: output?.maxHeight,
           bytes: output?.maxBytes ?? DEFAULT_MAX_BYTES
         },
-        format
+        output?.format ?? DEFAULT_FORMAT
       );
-      if (!result.withinBudget) {
-        onError?.({
-          reason: "too-large",
-          message: `The smallest version this could produce is ${Math.round(result.size / 1024)} KB.`
-        });
-      }
-      const { withinBudget: _ignored, ...payload } = result;
-      onCrop?.(payload);
-    } catch (cause) {
-      onError?.({
-        reason: "encode-failed",
-        message: cause instanceof Error ? cause.message : "The image could not be saved."
+      return result.size;
+    }, [ready, image, state, config.source, output]);
+    useImperativeHandle(ref, () => ({ save: () => void save(), estimate }), [save, estimate]);
+    const frameCallbackRef = useRef(onFrameChange);
+    frameCallbackRef.current = onFrameChange;
+    useEffect(() => {
+      if (!ready || !image) return;
+      frameCallbackRef.current?.({
+        crop: state.crop,
+        transform: state.transform,
+        rotation: state.rotation,
+        source: { width: image.width, height: image.height },
+        oriented: orientedSize({ width: image.width, height: image.height }, state.rotation)
       });
-    } finally {
-      setBusy(false);
-    }
-  }, [ready, image, busy, state, config.source, output, onCrop, onError]);
-  const { crop, transform, rotation } = state;
-  const oriented = image ? orientedSize({ width: image.width, height: image.height }, rotation) : null;
-  const band = scaleRange(state);
-  const zoomLabel = Number.isFinite(band.min) && band.min > 0 ? `${Math.round(transform.scale / band.min * 100)}%` : "100%";
-  const windowRadius = isCircle ? Math.max(crop.width, crop.height) / 2 : Number(el.mask?.borderRadius ?? 0);
-  const SCRIM = Math.ceil(Math.max(viewport.width, viewport.height)) || 1;
-  const aspectLabel = `${aspect[0]}:${aspect[1]}`;
-  const subtitle = ready ? "Drag to move \xB7 pinch to zoom" : isCircle ? `Circle \xB7 ${aspectLabel}` : `Banner \xB7 ${aspectLabel}`;
-  const budgetKb = Math.round((output?.maxBytes ?? DEFAULT_MAX_BYTES) / 1024);
-  const previewWidth = isCircle ? 60 : 160;
-  const previewHeight = isCircle ? 60 : Math.round(160 / ratio);
-  const stageTool = (icon, label, onPress) => /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      onPress,
-      disabled: !ready,
-      accessibilityRole: "button",
-      accessibilityLabel: label,
-      accessibilityState: { disabled: !ready },
-      style: { width: 58, alignItems: "center", gap: 4 },
-      children: [
-        /* @__PURE__ */ jsx(View, { style: {
-          width: 44,
-          height: 44,
-          borderRadius: 22,
-          backgroundColor: "rgba(255,255,255,0.09)",
-          alignItems: "center",
-          justifyContent: "center"
-        }, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 19, color: "#FFFFFF" }) }),
-        /* @__PURE__ */ jsx(Text, { style: { fontSize: 11, fontWeight: "600", color: "rgba(255,255,255,0.75)" }, children: label })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      testID,
-      style: [
-        /**
-         * ⚠️ NO `flex: 1` HERE, THOUGH THE MOCKUP IS FULL-SCREEN. A
-         * child with `flex: 1` inside a parent that was never given a
-         * height measures 0 on Yoga, and this component does not own
-         * the screen — a consumer mounts it in a modal, a sheet or a
-         * form. The footer's `marginTop: 'auto'` gets the mockup's
-         * pinned-to-the-bottom footer when the parent DOES bound the
-         * height, and does nothing when it does not.
-         */
-        { width: "100%" },
-        el.root,
-        /**
-         * ⛔ THE PHONE CROPPER IS A DARK SHEET, AND THAT OVERRIDES THE
-         * `root` SLOT ON NATIVE ONLY. The mockup draws web as a light
-         * modal card and the phone as a full-screen dark surface, and
-         * one `root` token cannot be both. It has to be the dark one
-         * here because the controls below it are load-bearing white:
-         * on a light sheet the Rotate and Reset labels vanish.
-         *
-         * ⚠️ SO `slots.root.backgroundColor` DOES NOT REACH THIS ON
-         * NATIVE. That is the deliberate cost; the stage's own colour
-         * has carried the same argument since the component shipped.
-         */
-        { backgroundColor: "#0B1517" }
-      ],
-      children: [
-        title != null && /* @__PURE__ */ jsxs(View, { style: [
-          { alignItems: "center" },
-          el.header,
-          {
-            paddingLeft: 18,
-            paddingRight: 18,
-            paddingTop: 12,
-            paddingBottom: 14,
-            borderBottomWidth: 0,
-            gap: 0
-          }
-        ], children: [
-          /* @__PURE__ */ jsx(Text, { style: [el.title, { fontSize: 16, fontWeight: "800", color: "#FFFFFF" }], children: title }),
-          /* @__PURE__ */ jsx(Text, { style: { marginTop: 3, fontSize: 12, color: "rgba(255,255,255,0.6)" }, children: subtitle })
-        ] }),
-        /* @__PURE__ */ jsxs(View, { style: [el.content, { paddingLeft: 0, paddingRight: 0, paddingTop: 0, paddingBottom: 0 }], children: [
-          /* @__PURE__ */ jsx(StageFrame, { gesture: detector, children: /* @__PURE__ */ jsxs(
-            View,
+    }, [ready, image, state]);
+    const { crop, transform, rotation } = state;
+    const oriented = image ? orientedSize({ width: image.width, height: image.height }, rotation) : null;
+    const band = scaleRange(state);
+    const zoomLabel = Number.isFinite(band.min) && band.min > 0 ? `${Math.round(transform.scale / band.min * 100)}%` : "100%";
+    const windowRadius = isCircle ? Math.max(crop.width, crop.height) / 2 : Number(el.mask?.borderRadius ?? 0);
+    const SCRIM = Math.ceil(Math.max(viewport.width, viewport.height)) || 1;
+    const aspectLabel = `${aspect[0]}:${aspect[1]}`;
+    const subtitle = ready ? "Drag to move \xB7 pinch to zoom" : isCircle ? `Circle \xB7 ${aspectLabel}` : `Banner \xB7 ${aspectLabel}`;
+    const budgetKb = Math.round((output?.maxBytes ?? DEFAULT_MAX_BYTES) / 1024);
+    const previewWidth = isCircle ? 60 : 160;
+    const previewHeight = isCircle ? 60 : Math.round(160 / ratio);
+    const stageTool = (icon, label, onPress) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        onPress,
+        disabled: !ready,
+        accessibilityRole: "button",
+        accessibilityLabel: label,
+        accessibilityState: { disabled: !ready },
+        style: { width: 58, alignItems: "center", gap: 4 },
+        children: [
+          /* @__PURE__ */ jsx(View, { style: {
+            width: 44,
+            height: 44,
+            borderRadius: 22,
+            backgroundColor: "rgba(255,255,255,0.09)",
+            alignItems: "center",
+            justifyContent: "center"
+          }, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 19, color: "#FFFFFF" }) }),
+          /* @__PURE__ */ jsx(Text, { style: { fontSize: 11, fontWeight: "600", color: "rgba(255,255,255,0.75)" }, children: label })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        testID,
+        style: [
+          /**
+           * ⚠️ NO `flex: 1` HERE, THOUGH THE MOCKUP IS FULL-SCREEN. A
+           * child with `flex: 1` inside a parent that was never given a
+           * height measures 0 on Yoga, and this component does not own
+           * the screen — a consumer mounts it in a modal, a sheet or a
+           * form. The footer's `marginTop: 'auto'` gets the mockup's
+           * pinned-to-the-bottom footer when the parent DOES bound the
+           * height, and does nothing when it does not.
+           */
+          { width: "100%" },
+          el.root,
+          /**
+           * ⛔ THE PHONE CROPPER IS A DARK SHEET, AND THAT OVERRIDES THE
+           * `root` SLOT ON NATIVE ONLY. The mockup draws web as a light
+           * modal card and the phone as a full-screen dark surface, and
+           * one `root` token cannot be both. It has to be the dark one
+           * here because the controls below it are load-bearing white:
+           * on a light sheet the Rotate and Reset labels vanish.
+           *
+           * ⚠️ SO `slots.root.backgroundColor` DOES NOT REACH THIS ON
+           * NATIVE. That is the deliberate cost; the stage's own colour
+           * has carried the same argument since the component shipped.
+           */
+          { backgroundColor: "#0B1517" }
+        ],
+        children: [
+          title != null && /* @__PURE__ */ jsxs(View, { style: [
+            { alignItems: "center" },
+            el.header,
             {
-              ref: stageRef,
-              onLayout: onStageLayout,
-              ...detector ? scrollBlocker.panHandlers : responder.panHandlers,
-              style: [
-                { width: "100%", aspectRatio: STAGE_ASPECT_NATIVE, overflow: "hidden" },
-                el.container
-              ],
-              children: [
-                ready && image && oriented && /* @__PURE__ */ jsx(
-                  Image,
-                  {
-                    source: { uri: image.uri },
-                    resizeMode: "stretch",
-                    style: {
-                      position: "absolute",
-                      left: transform.x,
-                      top: transform.y,
-                      width: oriented.width * transform.scale,
-                      height: oriented.height * transform.scale,
-                      transform: [{ rotate: `${rotation}deg` }]
-                    }
-                  }
-                ),
-                (!source || error) && /* @__PURE__ */ jsxs(View, { style: [
-                  {
-                    position: "absolute",
-                    left: 18,
-                    top: 18,
-                    right: 18,
-                    bottom: 18,
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
-                  el.dropZone,
-                  { borderRadius: 18 }
-                ], children: [
-                  /* @__PURE__ */ jsx(View, { style: {
-                    width: 60,
-                    height: 60,
-                    borderRadius: 30,
-                    backgroundColor: "rgba(32,170,176,0.16)",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  }, children: /* @__PURE__ */ jsx(Icon, { name: "image", size: 26, color: CROP_ACCENT_SOFT }) }),
-                  /* @__PURE__ */ jsx(Text, { style: { fontSize: 16, fontWeight: "800", color: "#FFFFFF", textAlign: "center" }, children: text.dropZone }),
-                  /* @__PURE__ */ jsx(Text, { style: { fontSize: 12.5, color: "rgba(255,255,255,0.6)", textAlign: "center" }, children: "JPG, PNG or WebP" }),
-                  error && /* @__PURE__ */ jsx(Text, { style: {
-                    fontSize: 12.5,
-                    fontWeight: "600",
-                    color: CROP_DANGER,
-                    textAlign: "center"
-                  }, children: error.message })
-                ] }),
-                ready && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    View,
+              paddingLeft: 18,
+              paddingRight: 18,
+              paddingTop: 12,
+              paddingBottom: 14,
+              borderBottomWidth: 0,
+              gap: 0
+            }
+          ], children: [
+            /* @__PURE__ */ jsx(Text, { style: [el.title, { fontSize: 16, fontWeight: "800", color: "#FFFFFF" }], children: title }),
+            /* @__PURE__ */ jsx(Text, { style: { marginTop: 3, fontSize: 12, color: "rgba(255,255,255,0.6)" }, children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: [el.content, { paddingLeft: 0, paddingRight: 0, paddingTop: 0, paddingBottom: 0 }], children: [
+            /* @__PURE__ */ jsx(StageFrame, { gesture: detector, children: /* @__PURE__ */ jsxs(
+              View,
+              {
+                ref: stageRef,
+                onLayout: onStageLayout,
+                ...detector ? scrollBlocker.panHandlers : responder.panHandlers,
+                style: [
+                  { width: "100%", aspectRatio: STAGE_ASPECT_NATIVE, overflow: "hidden" },
+                  el.container
+                ],
+                children: [
+                  ready && image && oriented && /* @__PURE__ */ jsx(
+                    Image,
                     {
-                      pointerEvents: "none",
-                      style: [
-                        {
-                          position: "absolute",
-                          left: crop.x - SCRIM,
-                          top: crop.y - SCRIM,
-                          width: crop.width + SCRIM * 2,
-                          height: crop.height + SCRIM * 2,
-                          borderWidth: SCRIM,
-                          borderColor: el.shade?.backgroundColor ?? "rgba(0,0,0,0.6)",
-                          borderRadius: windowRadius + SCRIM
-                        }
-                      ]
+                      source: { uri: image.uri },
+                      resizeMode: "stretch",
+                      style: {
+                        position: "absolute",
+                        left: transform.x,
+                        top: transform.y,
+                        width: oriented.width * transform.scale,
+                        height: oriented.height * transform.scale,
+                        transform: [{ rotate: `${rotation}deg` }]
+                      }
                     }
                   ),
-                  /* @__PURE__ */ jsx(
-                    View,
+                  (!source || error) && /* @__PURE__ */ jsxs(View, { style: [
                     {
-                      pointerEvents: "none",
-                      style: [
-                        {
-                          position: "absolute",
-                          left: crop.x,
-                          top: crop.y,
-                          width: crop.width,
-                          height: crop.height,
-                          borderStyle: "solid"
-                        },
-                        el.cropWindow,
-                        { borderRadius: windowRadius }
-                      ],
-                      children: !hideGrid && [1, 2].map((n) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                        /* @__PURE__ */ jsx(View, { style: [
+                      position: "absolute",
+                      left: 18,
+                      top: 18,
+                      right: 18,
+                      bottom: 18,
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    el.dropZone,
+                    { borderRadius: 18 }
+                  ], children: [
+                    /* @__PURE__ */ jsx(View, { style: {
+                      width: 60,
+                      height: 60,
+                      borderRadius: 30,
+                      backgroundColor: "rgba(32,170,176,0.16)",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    }, children: /* @__PURE__ */ jsx(Icon, { name: "image", size: 26, color: CROP_ACCENT_SOFT }) }),
+                    /* @__PURE__ */ jsx(Text, { style: { fontSize: 16, fontWeight: "800", color: "#FFFFFF", textAlign: "center" }, children: text.dropZone }),
+                    /* @__PURE__ */ jsx(Text, { style: { fontSize: 12.5, color: "rgba(255,255,255,0.6)", textAlign: "center" }, children: "JPG, PNG or WebP" }),
+                    error && /* @__PURE__ */ jsx(Text, { style: {
+                      fontSize: 12.5,
+                      fontWeight: "600",
+                      color: CROP_DANGER,
+                      textAlign: "center"
+                    }, children: error.message })
+                  ] }),
+                  ready && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      View,
+                      {
+                        pointerEvents: "none",
+                        style: [
                           {
                             position: "absolute",
-                            top: 0,
-                            bottom: 0,
-                            width: 1,
-                            left: crop.width * n / 3
-                          },
-                          el.gridLine
-                        ] }),
-                        /* @__PURE__ */ jsx(View, { style: [
+                            left: crop.x - SCRIM,
+                            top: crop.y - SCRIM,
+                            width: crop.width + SCRIM * 2,
+                            height: crop.height + SCRIM * 2,
+                            borderWidth: SCRIM,
+                            borderColor: el.shade?.backgroundColor ?? "rgba(0,0,0,0.6)",
+                            borderRadius: windowRadius + SCRIM
+                          }
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      View,
+                      {
+                        pointerEvents: "none",
+                        style: [
                           {
                             position: "absolute",
-                            left: 0,
-                            right: 0,
-                            height: 1,
-                            top: crop.height * n / 3
+                            left: crop.x,
+                            top: crop.y,
+                            width: crop.width,
+                            height: crop.height,
+                            borderStyle: "solid"
                           },
-                          el.gridLine
-                        ] })
-                      ] }, n))
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
+                          el.cropWindow,
+                          { borderRadius: windowRadius }
+                        ],
+                        children: !hideGrid && [1, 2].map((n) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                          /* @__PURE__ */ jsx(View, { style: [
+                            {
+                              position: "absolute",
+                              top: 0,
+                              bottom: 0,
+                              width: 1,
+                              left: crop.width * n / 3
+                            },
+                            el.gridLine
+                          ] }),
+                          /* @__PURE__ */ jsx(View, { style: [
+                            {
+                              position: "absolute",
+                              left: 0,
+                              right: 0,
+                              height: 1,
+                              top: crop.height * n / 3
+                            },
+                            el.gridLine
+                          ] })
+                        ] }, n))
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      View,
+                      {
+                        pointerEvents: "none",
+                        style: { position: "absolute", top: 12, left: 0, right: 0, alignItems: "center" },
+                        children: /* @__PURE__ */ jsx(
+                          View,
+                          {
+                            style: [
+                              { alignItems: "center", justifyContent: "center" },
+                              el.zoomChip
+                            ],
+                            children: /* @__PURE__ */ jsx(Text, { style: {
+                              color: el.zoomChip?.color ?? "#FFFFFF",
+                              fontSize: 11.5,
+                              fontWeight: "700"
+                            }, children: zoomLabel })
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  (loading || busy) && /* @__PURE__ */ jsxs(
                     View,
                     {
                       pointerEvents: "none",
-                      style: { position: "absolute", top: 12, left: 0, right: 0, alignItems: "center" },
-                      children: /* @__PURE__ */ jsx(
-                        View,
-                        {
-                          style: [
-                            { alignItems: "center", justifyContent: "center" },
-                            el.zoomChip
-                          ],
-                          children: /* @__PURE__ */ jsx(Text, { style: {
-                            color: el.zoomChip?.color ?? "#FFFFFF",
-                            fontSize: 11.5,
-                            fontWeight: "700"
-                          }, children: zoomLabel })
-                        }
-                      )
+                      style: {
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: "rgba(6,14,16,0.74)",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: 14
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          ActivityIndicator,
+                          {
+                            size: "large",
+                            color: el.progressFill?.backgroundColor ?? CROP_ACCENT
+                          }
+                        ),
+                        busy && /* @__PURE__ */ jsx(Text, { style: { fontSize: 14, fontWeight: "700", color: "#FFFFFF" }, children: text.processing })
+                      ]
                     }
                   )
-                ] }),
-                (loading || busy) && /* @__PURE__ */ jsxs(
-                  View,
-                  {
-                    pointerEvents: "none",
-                    style: {
-                      position: "absolute",
-                      left: 0,
-                      top: 0,
-                      right: 0,
-                      bottom: 0,
-                      backgroundColor: "rgba(6,14,16,0.74)",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      gap: 14
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        ActivityIndicator,
-                        {
-                          size: "large",
-                          color: el.progressFill?.backgroundColor ?? CROP_ACCENT
-                        }
-                      ),
-                      busy && /* @__PURE__ */ jsx(Text, { style: { fontSize: 14, fontWeight: "700", color: "#FFFFFF" }, children: text.processing })
-                    ]
-                  }
-                )
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            View,
-            {
-              pointerEvents: ready ? "auto" : "none",
-              style: {
-                paddingTop: 16,
-                paddingLeft: 18,
-                paddingRight: 18,
-                gap: 16,
-                opacity: ready ? 1 : 0.4
-              },
-              children: [
-                /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
-                  !hidePreview && ready && image && oriented && /* The preview is the same image, clipped and offset so the
-                     crop fills the frame — no pixel work, and therefore
-                     nothing that has to wait for an encoder. */
-                  /* @__PURE__ */ jsx(
-                    View,
-                    {
-                      style: [
-                        { width: previewWidth, height: previewHeight, overflow: "hidden" },
-                        el.previewFrame,
-                        isCircle ? { borderRadius: previewWidth / 2 } : null,
-                        /* ⚠️ A 2px RING, NOT THE CARD'S 4. The slot
-                           carries the desktop preview's ring; at 60pt
-                           a 4pt ring eats the thumbnail. */
-                        { borderWidth: 2 },
-                        /* The mockup's float, in the native spelling —
-                           `boxShadow` is the web file's half of this. */
-                        {
-                          shadowColor: "#000000",
-                          shadowOpacity: 0.14,
-                          shadowRadius: 14,
-                          shadowOffset: { width: 0, height: 4 },
-                          elevation: 4
-                        }
-                      ],
-                      children: /* @__PURE__ */ jsx(
-                        Image,
-                        {
-                          source: { uri: image.uri },
-                          resizeMode: "stretch",
-                          style: {
-                            position: "absolute",
-                            width: oriented.width * transform.scale * (previewWidth / crop.width),
-                            height: oriented.height * transform.scale * (previewWidth / crop.width),
-                            left: (transform.x - crop.x) * (previewWidth / crop.width),
-                            top: (transform.y - crop.y) * (previewWidth / crop.width),
-                            transform: [{ rotate: `${rotation}deg` }]
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              View,
+              {
+                pointerEvents: ready ? "auto" : "none",
+                style: {
+                  paddingTop: 16,
+                  paddingLeft: 18,
+                  paddingRight: 18,
+                  gap: 16,
+                  opacity: ready ? 1 : 0.4
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+                    !hidePreview && ready && image && oriented && /* The preview is the same image, clipped and offset so the
+                       crop fills the frame — no pixel work, and therefore
+                       nothing that has to wait for an encoder. */
+                    /* @__PURE__ */ jsx(
+                      View,
+                      {
+                        style: [
+                          { width: previewWidth, height: previewHeight, overflow: "hidden" },
+                          el.previewFrame,
+                          isCircle ? { borderRadius: previewWidth / 2 } : null,
+                          /* ⚠️ A 2px RING, NOT THE CARD'S 4. The slot
+                             carries the desktop preview's ring; at 60pt
+                             a 4pt ring eats the thumbnail. */
+                          { borderWidth: 2 },
+                          /* The mockup's float, in the native spelling —
+                             `boxShadow` is the web file's half of this. */
+                          {
+                            shadowColor: "#000000",
+                            shadowOpacity: 0.14,
+                            shadowRadius: 14,
+                            shadowOffset: { width: 0, height: 4 },
+                            elevation: 4
                           }
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(View, { style: { flex: 1, alignItems: "flex-end" }, children: [
-                    /* @__PURE__ */ jsx(Text, { style: { fontSize: 17, fontWeight: "800", color: "#FFFFFF" }, children: zoomLabel }),
-                    /* @__PURE__ */ jsx(Text, { style: { marginTop: 2, fontSize: 11.5, color: "rgba(255,255,255,0.6)" }, children: `Under ${budgetKb} KB` })
+                        ],
+                        children: /* @__PURE__ */ jsx(
+                          Image,
+                          {
+                            source: { uri: image.uri },
+                            resizeMode: "stretch",
+                            style: {
+                              position: "absolute",
+                              width: oriented.width * transform.scale * (previewWidth / crop.width),
+                              height: oriented.height * transform.scale * (previewWidth / crop.width),
+                              left: (transform.x - crop.x) * (previewWidth / crop.width),
+                              top: (transform.y - crop.y) * (previewWidth / crop.width),
+                              transform: [{ rotate: `${rotation}deg` }]
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(View, { style: { flex: 1, alignItems: "flex-end" }, children: [
+                      /* @__PURE__ */ jsx(Text, { style: { fontSize: 17, fontWeight: "800", color: "#FFFFFF" }, children: zoomLabel }),
+                      /* @__PURE__ */ jsx(Text, { style: { marginTop: 2, fontSize: 11.5, color: "rgba(255,255,255,0.6)" }, children: `Under ${budgetKb} KB` })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 10 }, children: [
+                    stageTool("rotate-cw", text.rotate, () => dispatch({ type: "rotate" })),
+                    /* @__PURE__ */ jsx(
+                      Slider,
+                      {
+                        style: { flex: 1 },
+                        minimumValue: 0,
+                        maximumValue: 1,
+                        value: zoomFraction(state),
+                        disabled: !ready,
+                        minimumTrackTintColor: el.thumb?.backgroundColor,
+                        maximumTrackTintColor: el.track?.backgroundColor,
+                        thumbTintColor: el.thumb?.backgroundColor,
+                        onValueChange: (value) => dispatch({ type: "setZoom", value })
+                      }
+                    ),
+                    stageTool("rotate-ccw", text.reset, () => dispatch({ type: "reset" }))
                   ] })
-                ] }),
-                /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 10 }, children: [
-                  stageTool("rotate-cw", text.rotate, () => dispatch({ type: "rotate" })),
-                  /* @__PURE__ */ jsx(
-                    Slider,
-                    {
-                      style: { flex: 1 },
-                      minimumValue: 0,
-                      maximumValue: 1,
-                      value: zoomFraction(state),
-                      disabled: !ready,
-                      minimumTrackTintColor: el.thumb?.backgroundColor,
-                      maximumTrackTintColor: el.track?.backgroundColor,
-                      thumbTintColor: el.thumb?.backgroundColor,
-                      onValueChange: (value) => dispatch({ type: "setZoom", value })
-                    }
-                  ),
-                  stageTool("rotate-ccw", text.reset, () => dispatch({ type: "reset" }))
-                ] })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(View, { style: [
-          { flexDirection: "row", alignItems: "center", marginTop: "auto" },
-          el.footer,
-          {
-            paddingLeft: 18,
-            paddingRight: 18,
-            paddingTop: 12,
-            paddingBottom: 28,
-            borderTopWidth: 1,
-            borderTopColor: "rgba(255,255,255,0.08)",
-            gap: 12
-          }
-        ], children: [
-          /* @__PURE__ */ jsx(
-            Pressable,
+                ]
+              }
+            )
+          ] }),
+          !hideFooter && /* @__PURE__ */ jsxs(View, { style: [
+            { flexDirection: "row", alignItems: "center", marginTop: "auto" },
+            el.footer,
             {
-              onPress: () => onCancel?.(),
-              accessibilityRole: "button",
-              accessibilityLabel: text.cancel,
-              style: {
-                flex: 1,
-                height: 52,
-                borderRadius: 26,
-                backgroundColor: "rgba(255,255,255,0.1)",
-                alignItems: "center",
-                justifyContent: "center"
-              },
-              children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 15, fontWeight: "700", color: "#FFFFFF" }, children: text.cancel })
+              paddingLeft: 18,
+              paddingRight: 18,
+              paddingTop: 12,
+              paddingBottom: 28,
+              borderTopWidth: 1,
+              borderTopColor: "rgba(255,255,255,0.08)",
+              gap: 12
             }
-          ),
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              onPress: () => void save(),
-              disabled: !canSave,
-              accessibilityRole: "button",
-              accessibilityLabel: text.save,
-              accessibilityState: { disabled: !canSave },
-              style: {
-                flex: 1.4,
-                height: 52,
-                borderRadius: 26,
-                backgroundColor: canSave ? CROP_ACCENT : "rgba(32,170,176,0.35)",
-                alignItems: "center",
-                justifyContent: "center"
-              },
-              children: /* @__PURE__ */ jsx(Text, { style: {
-                fontSize: 15,
-                fontWeight: "800",
-                color: canSave ? "#FFFFFF" : "rgba(255,255,255,0.55)"
-              }, children: busy ? text.processing : text.save })
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
+          ], children: [
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: () => onCancel?.(),
+                accessibilityRole: "button",
+                accessibilityLabel: text.cancel,
+                style: {
+                  flex: 1,
+                  height: 52,
+                  borderRadius: 26,
+                  backgroundColor: "rgba(255,255,255,0.1)",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 15, fontWeight: "700", color: "#FFFFFF" }, children: text.cancel })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: () => void save(),
+                disabled: !canSave,
+                accessibilityRole: "button",
+                accessibilityLabel: text.save,
+                accessibilityState: { disabled: !canSave },
+                style: {
+                  flex: 1.4,
+                  height: 52,
+                  borderRadius: 26,
+                  backgroundColor: canSave ? CROP_ACCENT : "rgba(32,170,176,0.35)",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsx(Text, { style: {
+                  fontSize: 15,
+                  fontWeight: "800",
+                  color: canSave ? "#FFFFFF" : "rgba(255,255,255,0.55)"
+                }, children: busy ? text.processing : text.save })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
 
 export { ImageCropper };
 //# sourceMappingURL=index.js.map