zkit-ui 1.0.0

package/dist/services/ImagePreviewService/index.js

@@ -0,0 +1,1383 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePreview = exports.imagePreview = void 0;
+exports.ImagePreviewProvider = ImagePreviewProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @file ImagePreviewService
+ *
+ * A full-screen image preview primitive plus a global imperative service.
+ * The declarative component owns the controlled/uncontrolled state model;
+ * the service only schedules one preview instance through ImagePreviewProvider.
+ */
+const React = __importStar(require("react"));
+const vector_icons_1 = require("@expo/vector-icons");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const expo_image_1 = require("expo-image");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const react_native_worklets_1 = require("react-native-worklets");
+const zkit_tools_1 = require("zkit-tools");
+const useI18n_1 = require("../../i18n/useI18n");
+const useTheme_1 = require("../../theme/useTheme");
+const LoadingSpinner_1 = require("../../ui/LoadingSpinner");
+const Text_1 = require("../../ui/Text");
+const MIN_SCALE = 1;
+const MAX_SCALE = 5;
+const DOUBLE_TAP_SCALE = 2.5;
+const SCALE_EPSILON = 0.02;
+const TRANSLATE_EPSILON = (0, zkit_tools_1.wp)(0.5);
+const VELOCITY_THRESHOLD = 520;
+const DISMISS_VELOCITY_THRESHOLD = 900;
+const MODE_LOCK_DISTANCE = (0, zkit_tools_1.wp)(8);
+const EDGE_RESISTANCE = 0.34;
+const TAP_SUPPRESSION_RELEASE_DURATION = 320;
+const DEFAULT_RENDER_AHEAD = 1;
+const MAX_RENDER_AHEAD = 2;
+const DEFAULT_Z_INDEX = 9999;
+const CLOSE_BUTTON_SIDE = (0, zkit_tools_1.wp)(40);
+const CLOSE_BUTTON_LEFT = (0, zkit_tools_1.wp)(14);
+const CLOSE_BUTTON_TOP = (0, zkit_tools_1.wp)(8);
+const CLOSE_ICON_SIZE = (0, zkit_tools_1.wp)(22);
+const CONTROL_HIT_SLOP = (0, zkit_tools_1.wp)(12);
+const CONTROL_RADIUS = (0, zkit_tools_1.wp)(20);
+const BOTTOM_CHROME_OFFSET = (0, zkit_tools_1.wp)(24);
+const BOTTOM_CHROME_GAP = (0, zkit_tools_1.wp)(10);
+const COUNTER_MIN_HEIGHT = (0, zkit_tools_1.wp)(28);
+const COUNTER_PADDING_HORIZONTAL = (0, zkit_tools_1.wp)(12);
+const COUNTER_RADIUS = (0, zkit_tools_1.wp)(14);
+const COUNTER_FONT_SIZE = 13;
+const COUNTER_LINE_HEIGHT = 18;
+const ERROR_CARD_MAX_WIDTH = (0, zkit_tools_1.wp)(260);
+const ERROR_CARD_PADDING_HORIZONTAL = (0, zkit_tools_1.wp)(16);
+const ERROR_CARD_PADDING_VERTICAL = (0, zkit_tools_1.wp)(14);
+const ERROR_CARD_RADIUS = (0, zkit_tools_1.wp)(14);
+const ERROR_ICON_SIZE = (0, zkit_tools_1.wp)(24);
+const ERROR_ICON_MARGIN_BOTTOM = (0, zkit_tools_1.wp)(8);
+const ERROR_TEXT_SIZE = 13;
+const ERROR_TEXT_LINE_HEIGHT = 18;
+const LOADING_SPINNER_SIZE = (0, zkit_tools_1.wp)(42);
+const SPRING_CONFIG = { damping: 28, stiffness: 280, mass: 0.62 };
+const ENTER_TIMING = {
+    duration: 220,
+    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+    reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+};
+const EXIT_TIMING = {
+    duration: 180,
+    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+    reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+};
+const RESET_TIMING = {
+    duration: 220,
+    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+    reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+};
+const CHROME_TIMING = {
+    duration: 160,
+    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+    reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+};
+const ANDROID_REMOTE_ACCEPT_HEADER = 'image/jpeg,image/png,image/webp,*/*';
+function isFiniteNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+function clampNumber(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function normalizeIndex(index, total) {
+    if (total <= 0)
+        return 0;
+    if (!isFiniteNumber(index))
+        return 0;
+    return clampNumber(Math.round(index), 0, total - 1);
+}
+function clampRenderAhead(value) {
+    if (!isFiniteNumber(value))
+        return DEFAULT_RENDER_AHEAD;
+    return clampNumber(Math.round(value), 0, MAX_RENDER_AHEAD);
+}
+function clampV(value, min, max) {
+    'worklet';
+    return Math.min(Math.max(value, min), max);
+}
+function rubberClampV(value, min, max) {
+    'worklet';
+    if (value < min)
+        return min + (value - min) * EDGE_RESISTANCE;
+    if (value > max)
+        return max + (value - max) * EDGE_RESISTANCE;
+    return value;
+}
+function rubberClampAxis(value, max) {
+    'worklet';
+    if (max <= TRANSLATE_EPSILON)
+        return 0;
+    return rubberClampV(value, -max, max);
+}
+function getViewportPanBounds(nextScale, viewportWidth, viewportHeight) {
+    'worklet';
+    const delta = Math.max(0, nextScale - MIN_SCALE);
+    return {
+        maxX: (viewportWidth * delta) / 2,
+        maxY: (viewportHeight * delta) / 2,
+    };
+}
+function hasOwnKey(value, key) {
+    return Object.prototype.hasOwnProperty.call(value, key);
+}
+function isSharedRefLike(value) {
+    return hasOwnKey(value, 'nativeRefType');
+}
+function isImageDescriptor(image) {
+    if (typeof image !== 'object' || image === null || Array.isArray(image))
+        return false;
+    if (isSharedRefLike(image))
+        return false;
+    return (hasOwnKey(image, 'accessibilityLabel') ||
+        hasOwnKey(image, 'alt') ||
+        hasOwnKey(image, 'blurhash') ||
+        hasOwnKey(image, 'cacheKey') ||
+        hasOwnKey(image, 'headers') ||
+        hasOwnKey(image, 'height') ||
+        hasOwnKey(image, 'id') ||
+        hasOwnKey(image, 'source') ||
+        hasOwnKey(image, 'thumbhash') ||
+        hasOwnKey(image, 'uri') ||
+        hasOwnKey(image, 'width'));
+}
+function getSourceUri(source) {
+    if (typeof source === 'string')
+        return source;
+    if (typeof source === 'number' || source == null)
+        return undefined;
+    if (Array.isArray(source)) {
+        for (const item of source) {
+            const uri = getSourceUri(item);
+            if (uri)
+                return uri;
+        }
+        return undefined;
+    }
+    return source.uri;
+}
+function isRemoteUri(uri) {
+    return !!uri && /^https?:\/\//i.test(uri);
+}
+function normalizeImageSourceObject(source) {
+    if (react_native_1.Platform.OS !== 'android' || !isRemoteUri(source.uri))
+        return source;
+    const headers = source.headers;
+    if ((headers === null || headers === void 0 ? void 0 : headers.Accept) || (headers === null || headers === void 0 ? void 0 : headers.accept))
+        return source;
+    return {
+        ...source,
+        headers: {
+            ...headers,
+            Accept: ANDROID_REMOTE_ACCEPT_HEADER,
+        },
+    };
+}
+function normalizeRenderableSource(source) {
+    if (typeof source === 'string') {
+        return normalizeImageSourceObject({ uri: source });
+    }
+    if (Array.isArray(source)) {
+        return source.map((item) => typeof item === 'string'
+            ? normalizeImageSourceObject({ uri: item })
+            : normalizeImageSourceObject(item));
+    }
+    if (typeof source === 'object' && source !== null && !isSharedRefLike(source)) {
+        return normalizeImageSourceObject(source);
+    }
+    return source;
+}
+function getSourceSize(source) {
+    if (!source || typeof source === 'string' || typeof source === 'number')
+        return null;
+    if (Array.isArray(source)) {
+        for (const item of source) {
+            const size = getSourceSize(item);
+            if (size)
+                return size;
+        }
+        return null;
+    }
+    const sourceObject = source;
+    const width = sourceObject.width;
+    const height = sourceObject.height;
+    if (isFiniteNumber(width) && isFiniteNumber(height) && width > 0 && height > 0) {
+        return { width, height };
+    }
+    return null;
+}
+function isRenderableSource(source) {
+    if (source == null)
+        return false;
+    if (typeof source === 'string')
+        return source.trim().length > 0;
+    if (Array.isArray(source))
+        return source.length > 0;
+    return true;
+}
+function createSourceFromDescriptor(image) {
+    if (image.source !== undefined)
+        return image.source;
+    const { accessibilityLabel, alt, id, source: _source, ...source } = image;
+    return source;
+}
+function getImageKey(source, image, index) {
+    var _a, _b, _c, _d;
+    if (isImageDescriptor(image) && image.id)
+        return image.id;
+    if (typeof source === 'string' || typeof source === 'number')
+        return String(source);
+    if (Array.isArray(source)) {
+        const firstKey = source
+            .map((item) => getSourceUri(item))
+            .find((uri) => !!uri);
+        return firstKey !== null && firstKey !== void 0 ? firstKey : `image-${index}`;
+    }
+    const sourceObject = source;
+    return ((_d = (_c = (_b = (_a = sourceObject.cacheKey) !== null && _a !== void 0 ? _a : sourceObject.uri) !== null && _b !== void 0 ? _b : sourceObject.blurhash) !== null && _c !== void 0 ? _c : sourceObject.thumbhash) !== null && _d !== void 0 ? _d : `image-${index}`);
+}
+function normalizeImage(image, index) {
+    const rawSource = isImageDescriptor(image) ? createSourceFromDescriptor(image) : image;
+    if (!isRenderableSource(rawSource))
+        return null;
+    const source = normalizeRenderableSource(rawSource);
+    const size = getSourceSize(source);
+    const descriptor = isImageDescriptor(image) ? image : null;
+    return {
+        key: getImageKey(rawSource, image, index),
+        source,
+        uri: getSourceUri(rawSource),
+        width: size === null || size === void 0 ? void 0 : size.width,
+        height: size === null || size === void 0 ? void 0 : size.height,
+        alt: descriptor === null || descriptor === void 0 ? void 0 : descriptor.alt,
+        accessibilityLabel: descriptor === null || descriptor === void 0 ? void 0 : descriptor.accessibilityLabel,
+        raw: image,
+    };
+}
+function normalizeImages(images) {
+    return images
+        .map((image, index) => normalizeImage(image, index))
+        .filter((image) => image != null);
+}
+function resolveInteractions(interactions) {
+    var _a, _b, _c, _d, _e, _f;
+    return {
+        tapBehavior: (_a = interactions === null || interactions === void 0 ? void 0 : interactions.tapBehavior) !== null && _a !== void 0 ? _a : 'none',
+        pinchToZoom: (_b = interactions === null || interactions === void 0 ? void 0 : interactions.pinchToZoom) !== null && _b !== void 0 ? _b : true,
+        doubleTapToZoom: (_c = interactions === null || interactions === void 0 ? void 0 : interactions.doubleTapToZoom) !== null && _c !== void 0 ? _c : true,
+        swipeToChange: (_d = interactions === null || interactions === void 0 ? void 0 : interactions.swipeToChange) !== null && _d !== void 0 ? _d : true,
+        swipeDownToClose: (_e = interactions === null || interactions === void 0 ? void 0 : interactions.swipeDownToClose) !== null && _e !== void 0 ? _e : true,
+        backToClose: (_f = interactions === null || interactions === void 0 ? void 0 : interactions.backToClose) !== null && _f !== void 0 ? _f : true,
+    };
+}
+function createOpenMeta(reason, value, images) {
+    var _a;
+    return {
+        reason,
+        value,
+        image: (_a = images[value]) !== null && _a !== void 0 ? _a : null,
+        total: images.length,
+    };
+}
+function createChangeMeta(reason, previousValue, value, images) {
+    var _a;
+    return {
+        reason,
+        previousValue,
+        value,
+        image: (_a = images[value]) !== null && _a !== void 0 ? _a : null,
+        total: images.length,
+    };
+}
+function createResult(reason, value, images) {
+    var _a;
+    const normalizedValue = normalizeIndex(value, images.length);
+    return {
+        reason,
+        value: normalizedValue,
+        image: (_a = images[normalizedValue]) !== null && _a !== void 0 ? _a : null,
+        total: images.length,
+    };
+}
+function getPrefetchUris(images, value, mode) {
+    var _a;
+    if (mode === false || images.length <= 1)
+        return [];
+    const indexes = mode === 'all'
+        ? images.map((_, index) => index)
+        : [value - 1, value + 1].filter((index) => index >= 0 && index < images.length);
+    const seen = new Set();
+    const uris = [];
+    for (const index of indexes) {
+        const uri = (_a = images[index]) === null || _a === void 0 ? void 0 : _a.uri;
+        if (!uri || seen.has(uri))
+            continue;
+        seen.add(uri);
+        uris.push(uri);
+    }
+    return uris;
+}
+class ImagePreviewServiceClass {
+    constructor() {
+        this.controller = null;
+        this.currentRequest = null;
+        this.requestId = 0;
+    }
+    _bind(controller) {
+        this.controller = controller;
+    }
+    open(options) {
+        const images = normalizeImages(options.images);
+        const id = ++this.requestId;
+        let resolveResult = () => { };
+        const result = new Promise((resolve) => {
+            resolveResult = resolve;
+        });
+        const request = {
+            ...options,
+            id,
+            index: normalizeIndex(options.index, images.length),
+            result,
+            resolve: resolveResult,
+            settled: false,
+        };
+        const handle = {
+            id,
+            result,
+            close: (reason = 'api') => {
+                var _a;
+                if (((_a = this.currentRequest) === null || _a === void 0 ? void 0 : _a.id) === id) {
+                    this.close(reason);
+                }
+            },
+            setValue: (value) => {
+                var _a;
+                if (((_a = this.currentRequest) === null || _a === void 0 ? void 0 : _a.id) === id) {
+                    this.setValue(value);
+                }
+            },
+            getSnapshot: () => this.getSnapshot(),
+        };
+        if (this.currentRequest && !this.currentRequest.settled) {
+            this.finishRequest(this.currentRequest, 'replace');
+        }
+        this.currentRequest = request;
+        if (!images.length) {
+            this.finishRequest(request, 'empty');
+            return handle;
+        }
+        if (!this.controller) {
+            console.warn('[imagePreview] ImagePreviewProvider is not mounted.');
+            this.finishRequest(request, 'unmount');
+            return handle;
+        }
+        this.controller.open(request);
+        return handle;
+    }
+    close(reason = 'api') {
+        if (!this.currentRequest || this.currentRequest.settled)
+            return;
+        if (!this.controller) {
+            this.finishRequest(this.currentRequest, reason);
+            return;
+        }
+        this.controller.close(reason);
+    }
+    setValue(value) {
+        var _a;
+        (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setValue(value);
+    }
+    getSnapshot() {
+        var _a, _b;
+        return ((_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getSnapshot()) !== null && _b !== void 0 ? _b : {
+            open: false,
+            value: 0,
+            image: null,
+            total: 0,
+        });
+    }
+    _complete(id, result) {
+        var _a;
+        if (((_a = this.currentRequest) === null || _a === void 0 ? void 0 : _a.id) !== id)
+            return;
+        this.finishRequest(this.currentRequest, result.reason, result);
+    }
+    _dispose(id) {
+        var _a;
+        if (((_a = this.currentRequest) === null || _a === void 0 ? void 0 : _a.id) !== id || this.currentRequest.settled)
+            return;
+        this.finishRequest(this.currentRequest, 'unmount');
+    }
+    finishRequest(request, reason, result) {
+        var _a, _b;
+        if (request.settled)
+            return;
+        request.settled = true;
+        const finalResult = result !== null && result !== void 0 ? result : createResult(reason, request.index, normalizeImages(request.images));
+        (_a = request.onClose) === null || _a === void 0 ? void 0 : _a.call(request, finalResult);
+        request.resolve(finalResult);
+        if (((_b = this.currentRequest) === null || _b === void 0 ? void 0 : _b.id) === request.id) {
+            this.currentRequest = null;
+        }
+    }
+}
+exports.imagePreview = new ImagePreviewServiceClass();
+function CloseButton({ color, backgroundColor, label, onPress, }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: label, accessibilityRole: "button", hitSlop: CONTROL_HIT_SLOP, onPress: onPress, style: ({ pressed }) => [
+            styles.closeButton,
+            { backgroundColor, opacity: pressed ? 0.72 : 1 },
+        ], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { color: color, name: "x", size: CLOSE_ICON_SIZE }) }));
+}
+function ZoomableImage({ active, contentFit, currentIndexSV, dismissible, image, imageAccessibilityLabel, imageProps, imageStyle, index, interactions, labels, onImageError, onImageLoad, onPageChange, onRequestClose, onSingleTap, pageTranslateX, totalCount, viewport, backdropOpacity, colors, }) {
+    var _a, _b;
+    const [failed, setFailed] = React.useState(false);
+    const [loading, setLoading] = React.useState(true);
+    const imageCachePolicy = (_a = imageProps === null || imageProps === void 0 ? void 0 : imageProps.cachePolicy) !== null && _a !== void 0 ? _a : 'memory-disk';
+    const imagePriority = (_b = imageProps === null || imageProps === void 0 ? void 0 : imageProps.priority) !== null && _b !== void 0 ? _b : (active ? 'high' : 'low');
+    const viewportStyle = React.useMemo(() => ({ width: viewport.width, height: viewport.height }), [viewport.height, viewport.width]);
+    const scale = (0, react_native_reanimated_1.useSharedValue)(1);
+    const savedScale = (0, react_native_reanimated_1.useSharedValue)(1);
+    const translateX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const translateY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const savedTranslateX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const savedTranslateY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const dismissY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const mode = (0, react_native_reanimated_1.useSharedValue)('none');
+    const tapSuppression = (0, react_native_reanimated_1.useSharedValue)(0);
+    const pinchActive = (0, react_native_reanimated_1.useSharedValue)(0);
+    const gestureFocalX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const gestureFocalY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const panOffsetX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const panOffsetY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const gestureBoundX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const gestureBoundY = (0, react_native_reanimated_1.useSharedValue)(0);
+    React.useEffect(() => {
+        setFailed(false);
+        setLoading(true);
+    }, [image.key]);
+    React.useEffect(() => {
+        if (mode.value !== 'none')
+            return;
+        const bounds = getViewportPanBounds(scale.value, viewport.width, viewport.height);
+        const clamped = {
+            x: clampV(translateX.value, -bounds.maxX, bounds.maxX),
+            y: clampV(translateY.value, -bounds.maxY, bounds.maxY),
+        };
+        translateX.value = (0, react_native_reanimated_1.withSpring)(clamped.x, SPRING_CONFIG);
+        translateY.value = (0, react_native_reanimated_1.withSpring)(clamped.y, SPRING_CONFIG);
+        savedTranslateX.value = clamped.x;
+        savedTranslateY.value = clamped.y;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [viewport.height, viewport.width]);
+    const handleImageLoadStart = React.useCallback(() => {
+        setFailed(false);
+        setLoading(true);
+    }, []);
+    const handleImageLoad = React.useCallback((event) => {
+        setLoading(false);
+        onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(event, { value: index, image });
+    }, [image, index, onImageLoad]);
+    const handleImageError = React.useCallback((event) => {
+        setFailed(true);
+        setLoading(false);
+        onImageError === null || onImageError === void 0 ? void 0 : onImageError(event, { value: index, image });
+    }, [image, index, onImageError]);
+    const resetImageTransform = () => {
+        'worklet';
+        (0, react_native_reanimated_1.cancelAnimation)(scale);
+        (0, react_native_reanimated_1.cancelAnimation)(translateX);
+        (0, react_native_reanimated_1.cancelAnimation)(translateY);
+        scale.value = (0, react_native_reanimated_1.withTiming)(MIN_SCALE, RESET_TIMING);
+        savedScale.value = MIN_SCALE;
+        translateX.value = (0, react_native_reanimated_1.withTiming)(0, RESET_TIMING);
+        translateY.value = (0, react_native_reanimated_1.withTiming)(0, RESET_TIMING);
+        savedTranslateX.value = 0;
+        savedTranslateY.value = 0;
+    };
+    const blockTap = () => {
+        'worklet';
+        (0, react_native_reanimated_1.cancelAnimation)(tapSuppression);
+        tapSuppression.value = 1;
+    };
+    const releaseTap = () => {
+        'worklet';
+        tapSuppression.value = (0, react_native_reanimated_1.withTiming)(0, { duration: TAP_SUPPRESSION_RELEASE_DURATION });
+    };
+    const settleImageTransform = () => {
+        'worklet';
+        (0, react_native_reanimated_1.cancelAnimation)(scale);
+        (0, react_native_reanimated_1.cancelAnimation)(translateX);
+        (0, react_native_reanimated_1.cancelAnimation)(translateY);
+        const currentScale = scale.value;
+        let targetScale = clampV(currentScale, MIN_SCALE, MAX_SCALE);
+        if (targetScale <= MIN_SCALE + SCALE_EPSILON) {
+            targetScale = MIN_SCALE;
+            if (Math.abs(currentScale - targetScale) > SCALE_EPSILON) {
+                scale.value = (0, react_native_reanimated_1.withSpring)(targetScale, SPRING_CONFIG);
+            }
+            else {
+                scale.value = targetScale;
+            }
+            if (Math.abs(translateX.value) > TRANSLATE_EPSILON) {
+                translateX.value = (0, react_native_reanimated_1.withSpring)(0, SPRING_CONFIG);
+            }
+            else {
+                translateX.value = 0;
+            }
+            if (Math.abs(translateY.value) > TRANSLATE_EPSILON) {
+                translateY.value = (0, react_native_reanimated_1.withSpring)(0, SPRING_CONFIG);
+            }
+            else {
+                translateY.value = 0;
+            }
+            savedScale.value = targetScale;
+            savedTranslateX.value = 0;
+            savedTranslateY.value = 0;
+            return;
+        }
+        const bounds = getViewportPanBounds(targetScale, viewport.width, viewport.height);
+        const clamped = {
+            x: clampV(translateX.value, -bounds.maxX, bounds.maxX),
+            y: clampV(translateY.value, -bounds.maxY, bounds.maxY),
+        };
+        if (Math.abs(currentScale - targetScale) > SCALE_EPSILON) {
+            scale.value = (0, react_native_reanimated_1.withSpring)(targetScale, SPRING_CONFIG);
+        }
+        else {
+            scale.value = targetScale;
+        }
+        if (Math.abs(translateX.value - clamped.x) > TRANSLATE_EPSILON) {
+            translateX.value = (0, react_native_reanimated_1.withSpring)(clamped.x, SPRING_CONFIG);
+        }
+        else {
+            translateX.value = clamped.x;
+        }
+        if (Math.abs(translateY.value - clamped.y) > TRANSLATE_EPSILON) {
+            translateY.value = (0, react_native_reanimated_1.withSpring)(clamped.y, SPRING_CONFIG);
+        }
+        else {
+            translateY.value = clamped.y;
+        }
+        savedScale.value = targetScale;
+        savedTranslateX.value = clamped.x;
+        savedTranslateY.value = clamped.y;
+    };
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => currentIndexSV.value, (curr, prev) => {
+        if (prev !== null && prev === index && curr !== index) {
+            resetImageTransform();
+            dismissY.value = 0;
+            mode.value = 'none';
+        }
+    });
+    const singleTap = react_native_gesture_handler_1.Gesture.Tap()
+        .enabled(active && interactions.tapBehavior !== 'none')
+        .numberOfTaps(1)
+        .maxDuration(220)
+        .onEnd(() => {
+        'worklet';
+        if (currentIndexSV.value !== index)
+            return;
+        if (mode.value !== 'none')
+            return;
+        if (tapSuppression.value > 0.01)
+            return;
+        if (scale.value > 1.05)
+            return;
+        if (interactions.tapBehavior === 'close') {
+            if (dismissible)
+                (0, react_native_worklets_1.scheduleOnRN)(onRequestClose, 'tap');
+            return;
+        }
+        (0, react_native_worklets_1.scheduleOnRN)(onSingleTap);
+    });
+    const doubleTap = react_native_gesture_handler_1.Gesture.Tap()
+        .enabled(active && interactions.doubleTapToZoom)
+        .numberOfTaps(2)
+        .maxDuration(300)
+        .onEnd((event) => {
+        'worklet';
+        if (currentIndexSV.value !== index)
+            return;
+        if (mode.value !== 'none')
+            return;
+        if (tapSuppression.value > 0.01)
+            return;
+        (0, react_native_reanimated_1.cancelAnimation)(scale);
+        (0, react_native_reanimated_1.cancelAnimation)(translateX);
+        (0, react_native_reanimated_1.cancelAnimation)(translateY);
+        if (scale.value > 1.05) {
+            resetImageTransform();
+        }
+        else {
+            const targetScale = Math.min(DOUBLE_TAP_SCALE, MAX_SCALE);
+            const focalX = event.x - viewport.width / 2;
+            const focalY = event.y - viewport.height / 2;
+            const bounds = getViewportPanBounds(targetScale, viewport.width, viewport.height);
+            const targetX = clampV(-focalX * (targetScale - MIN_SCALE), -bounds.maxX, bounds.maxX);
+            const targetY = clampV(-focalY * (targetScale - MIN_SCALE), -bounds.maxY, bounds.maxY);
+            scale.value = (0, react_native_reanimated_1.withTiming)(targetScale, RESET_TIMING);
+            savedScale.value = targetScale;
+            translateX.value = (0, react_native_reanimated_1.withTiming)(targetX, RESET_TIMING);
+            translateY.value = (0, react_native_reanimated_1.withTiming)(targetY, RESET_TIMING);
+            savedTranslateX.value = targetX;
+            savedTranslateY.value = targetY;
+        }
+    });
+    const pinch = react_native_gesture_handler_1.Gesture.Pinch()
+        .enabled(active && interactions.pinchToZoom)
+        .onStart((event) => {
+        'worklet';
+        if (currentIndexSV.value !== index)
+            return;
+        pinchActive.value = 1;
+        blockTap();
+        mode.value = 'pinch';
+        (0, react_native_reanimated_1.cancelAnimation)(scale);
+        (0, react_native_reanimated_1.cancelAnimation)(translateX);
+        (0, react_native_reanimated_1.cancelAnimation)(translateY);
+        (0, react_native_reanimated_1.cancelAnimation)(pageTranslateX);
+        (0, react_native_reanimated_1.cancelAnimation)(dismissY);
+        pageTranslateX.value = 0;
+        dismissY.value = 0;
+        backdropOpacity.value = (0, react_native_reanimated_1.withSpring)(1, SPRING_CONFIG);
+        savedScale.value = scale.value;
+        savedTranslateX.value = translateX.value;
+        savedTranslateY.value = translateY.value;
+        gestureFocalX.value = event.focalX - viewport.width / 2;
+        gestureFocalY.value = event.focalY - viewport.height / 2;
+    })
+        .onUpdate((event) => {
+        'worklet';
+        if (currentIndexSV.value !== index)
+            return;
+        if (event.numberOfPointers < 2)
+            return;
+        const nextScale = clampV(savedScale.value * event.scale, MIN_SCALE * 0.5, MAX_SCALE + MIN_SCALE);
+        scale.value = nextScale;
+        translateX.value =
+            savedTranslateX.value + (savedScale.value - nextScale) * gestureFocalX.value;
+        translateY.value =
+            savedTranslateY.value + (savedScale.value - nextScale) * gestureFocalY.value;
+    })
+        .onEnd(() => {
+        'worklet';
+        if (currentIndexSV.value !== index) {
+            pinchActive.value = 0;
+            return;
+        }
+        settleImageTransform();
+        mode.value = 'none';
+        pinchActive.value = 0;
+        releaseTap();
+    })
+        .onFinalize(() => {
+        'worklet';
+        if (pinchActive.value > 0 || mode.value === 'pinch') {
+            settleImageTransform();
+            mode.value = 'none';
+        }
+        pinchActive.value = 0;
+        releaseTap();
+    });
+    const pan = react_native_gesture_handler_1.Gesture.Pan()
+        .enabled(active &&
+        (interactions.pinchToZoom ||
+            interactions.doubleTapToZoom ||
+            interactions.swipeToChange ||
+            interactions.swipeDownToClose))
+        .minPointers(1)
+        .minDistance(1)
+        .averageTouches(true)
+        .onStart((event) => {
+        'worklet';
+        if (currentIndexSV.value !== index)
+            return;
+        blockTap();
+        (0, react_native_reanimated_1.cancelAnimation)(translateX);
+        (0, react_native_reanimated_1.cancelAnimation)(translateY);
+        (0, react_native_reanimated_1.cancelAnimation)(pageTranslateX);
+        (0, react_native_reanimated_1.cancelAnimation)(dismissY);
+        (0, react_native_reanimated_1.cancelAnimation)(backdropOpacity);
+        savedTranslateX.value = translateX.value;
+        savedTranslateY.value = translateY.value;
+        panOffsetX.value = 0;
+        panOffsetY.value = 0;
+        const bounds = getViewportPanBounds(scale.value, viewport.width, viewport.height);
+        gestureBoundX.value = bounds.maxX;
+        gestureBoundY.value = bounds.maxY;
+        pageTranslateX.value = 0;
+        dismissY.value = 0;
+        backdropOpacity.value = (0, react_native_reanimated_1.withSpring)(1, SPRING_CONFIG);
+        if (event.numberOfPointers >= 2 || pinchActive.value > 0 || mode.value === 'pinch') {
+            mode.value = 'none';
+        }
+        else {
+            mode.value = scale.value > MIN_SCALE + SCALE_EPSILON ? 'drag' : 'undecided';
+        }
+    })
+        .onUpdate((event) => {
+        'worklet';
+        if (currentIndexSV.value !== index)
+            return;
+        if (pinchActive.value > 0) {
+            panOffsetX.value = event.translationX;
+            panOffsetY.value = event.translationY;
+            return;
+        }
+        if (mode.value === 'none') {
+            savedTranslateX.value = translateX.value;
+            savedTranslateY.value = translateY.value;
+            panOffsetX.value = event.translationX;
+            panOffsetY.value = event.translationY;
+            const bounds = getViewportPanBounds(scale.value, viewport.width, viewport.height);
+            gestureBoundX.value = bounds.maxX;
+            gestureBoundY.value = bounds.maxY;
+            mode.value = scale.value > MIN_SCALE + SCALE_EPSILON ? 'drag' : 'undecided';
+            return;
+        }
+        const deltaX = event.translationX - panOffsetX.value;
+        const deltaY = event.translationY - panOffsetY.value;
+        if (mode.value === 'undecided') {
+            const absX = Math.abs(deltaX);
+            const absY = Math.abs(deltaY);
+            if (absX <= MODE_LOCK_DISTANCE && absY <= MODE_LOCK_DISTANCE)
+                return;
+            if (absX >= absY) {
+                if (!interactions.swipeToChange)
+                    return;
+                mode.value = 'swipe';
+            }
+            else {
+                if (!dismissible || !interactions.swipeDownToClose)
+                    return;
+                mode.value = 'dismiss';
+            }
+        }
+        if (mode.value === 'drag') {
+            const nextX = savedTranslateX.value + deltaX;
+            const nextY = savedTranslateY.value + deltaY;
+            translateX.value = rubberClampAxis(nextX, gestureBoundX.value);
+            translateY.value = rubberClampAxis(nextY, gestureBoundY.value);
+        }
+        else if (mode.value === 'swipe') {
+            let tx = deltaX;
+            const canNext = currentIndexSV.value < totalCount - 1;
+            const canPrev = currentIndexSV.value > 0;
+            if ((!canPrev && tx > 0) || (!canNext && tx < 0)) {
+                tx *= EDGE_RESISTANCE;
+            }
+            pageTranslateX.value = tx;
+        }
+        else if (mode.value === 'dismiss') {
+            const dragY = Math.max(0, deltaY);
+            dismissY.value = dragY;
+            const progress = dragY / (viewport.height * 0.42);
+            backdropOpacity.value = (0, react_native_reanimated_1.interpolate)(progress, [0, 1], [1, 0.1], react_native_reanimated_1.Extrapolation.CLAMP);
+        }
+    })
+        .onEnd((event) => {
+        'worklet';
+        if (currentIndexSV.value !== index)
+            return;
+        if (pinchActive.value > 0 || mode.value === 'pinch') {
+            mode.value = 'none';
+            return;
+        }
+        const deltaX = event.translationX - panOffsetX.value;
+        const deltaY = event.translationY - panOffsetY.value;
+        if (mode.value === 'drag') {
+            settleImageTransform();
+            releaseTap();
+        }
+        else if (mode.value === 'swipe') {
+            const canNext = currentIndexSV.value < totalCount - 1;
+            const canPrev = currentIndexSV.value > 0;
+            const swipeThreshold = viewport.width * 0.23;
+            const goNext = canNext && (deltaX < -swipeThreshold || event.velocityX < -VELOCITY_THRESHOLD);
+            const goPrev = canPrev && (deltaX > swipeThreshold || event.velocityX > VELOCITY_THRESHOLD);
+            if (goNext) {
+                const target = currentIndexSV.value + 1;
+                pageTranslateX.value = (0, react_native_reanimated_1.withSpring)(-viewport.width, SPRING_CONFIG, (finished) => {
+                    'worklet';
+                    if (finished) {
+                        currentIndexSV.value = target;
+                        pageTranslateX.value = 0;
+                        releaseTap();
+                        (0, react_native_worklets_1.scheduleOnRN)(onPageChange, target);
+                    }
+                });
+            }
+            else if (goPrev) {
+                const target = currentIndexSV.value - 1;
+                pageTranslateX.value = (0, react_native_reanimated_1.withSpring)(viewport.width, SPRING_CONFIG, (finished) => {
+                    'worklet';
+                    if (finished) {
+                        currentIndexSV.value = target;
+                        pageTranslateX.value = 0;
+                        releaseTap();
+                        (0, react_native_worklets_1.scheduleOnRN)(onPageChange, target);
+                    }
+                });
+            }
+            else {
+                pageTranslateX.value = (0, react_native_reanimated_1.withSpring)(0, SPRING_CONFIG, (finished) => {
+                    'worklet';
+                    if (finished)
+                        releaseTap();
+                });
+            }
+        }
+        else if (mode.value === 'dismiss') {
+            const dismissThreshold = viewport.height * 0.12;
+            if (deltaY > dismissThreshold || event.velocityY > DISMISS_VELOCITY_THRESHOLD) {
+                dismissY.value = (0, react_native_reanimated_1.withTiming)(viewport.height, EXIT_TIMING);
+                backdropOpacity.value = (0, react_native_reanimated_1.withTiming)(0, EXIT_TIMING, () => {
+                    (0, react_native_worklets_1.scheduleOnRN)(onRequestClose, 'swipeDown');
+                });
+            }
+            else {
+                dismissY.value = (0, react_native_reanimated_1.withSpring)(0, SPRING_CONFIG);
+                backdropOpacity.value = (0, react_native_reanimated_1.withSpring)(1, SPRING_CONFIG);
+                releaseTap();
+            }
+        }
+        else {
+            releaseTap();
+        }
+        mode.value = 'none';
+    })
+        .onFinalize(() => {
+        'worklet';
+        if (pinchActive.value > 0 || mode.value === 'pinch')
+            return;
+        if (mode.value === 'none')
+            return;
+        if (mode.value === 'drag') {
+            settleImageTransform();
+        }
+        else if (mode.value === 'swipe') {
+            pageTranslateX.value = (0, react_native_reanimated_1.withSpring)(0, SPRING_CONFIG);
+        }
+        else if (mode.value === 'dismiss') {
+            dismissY.value = (0, react_native_reanimated_1.withSpring)(0, SPRING_CONFIG);
+            backdropOpacity.value = (0, react_native_reanimated_1.withSpring)(1, SPRING_CONFIG);
+        }
+        mode.value = 'none';
+        releaseTap();
+    });
+    const tapGestures = react_native_gesture_handler_1.Gesture.Exclusive(doubleTap, singleTap);
+    const composed = react_native_gesture_handler_1.Gesture.Simultaneous(tapGestures, react_native_gesture_handler_1.Gesture.Simultaneous(pinch, pan));
+    const pageStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const pageX = (index - currentIndexSV.value) * viewport.width + pageTranslateX.value;
+        return {
+            opacity: backdropOpacity.value,
+            transform: [
+                { translateX: pageX + translateX.value },
+                { translateY: translateY.value + dismissY.value },
+                { scale: scale.value },
+            ],
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: composed, children: (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { pointerEvents: active ? 'auto' : 'none', style: [styles.imagePage, viewportStyle, pageStyle], children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { ...imageProps, accessibilityLabel: imageAccessibilityLabel, alt: imageAccessibilityLabel, cachePolicy: imageCachePolicy, contentFit: contentFit, onError: handleImageError, onLoad: handleImageLoad, onLoadStart: handleImageLoadStart, priority: imagePriority, recyclingKey: image.key, source: image.source, style: [viewportStyle, imageStyle] }), loading && !failed && ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: styles.loadingState, children: (0, jsx_runtime_1.jsx)(LoadingSpinner_1.LoadingSpinner, { color: colors.loading, size: LOADING_SPINNER_SIZE, speed: 1.8 }) })), failed && ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: styles.errorState, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.errorCard, { backgroundColor: colors.errorBackground }], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { color: colors.errorText, name: "image", size: ERROR_ICON_SIZE, style: styles.errorIcon }), (0, jsx_runtime_1.jsx)(Text_1.Text, { align: "center", color: colors.errorText, lineHeight: ERROR_TEXT_LINE_HEIGHT, size: ERROR_TEXT_SIZE, weight: "medium", children: labels.loadFailed })] }) }))] }) }));
+}
+function ImagePreviewOverlay({ accessibilityLabel, closeButton, colors, contentFit, counter, disabled, dismissible, imageProps, imageStyle, images, interactions, labels, modalProps, onChange, onCloseComplete, onImageError, onImageLoad, onOpenChange, open, prefetch, prefetchCachePolicy, renderAhead, renderFooter, renderHeader, renderOverlay, rootStyle, testID, value, }) {
+    var _a, _b;
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const window = (0, react_native_1.useWindowDimensions)();
+    const [mounted, setMounted] = React.useState(false);
+    const [closing, setClosing] = React.useState(false);
+    const [renderIndex, setRenderIndex] = React.useState(() => normalizeIndex(value, images.length));
+    const [chromeVisible, setChromeVisible] = React.useState(true);
+    const closeReasonRef = React.useRef('api');
+    const closingRef = React.useRef(false);
+    const imagesRef = React.useRef(images);
+    const onCloseCompleteRef = React.useRef(onCloseComplete);
+    const renderIndexRef = React.useRef(renderIndex);
+    imagesRef.current = images;
+    onCloseCompleteRef.current = onCloseComplete;
+    renderIndexRef.current = renderIndex;
+    const backdropOpacity = (0, react_native_reanimated_1.useSharedValue)(0);
+    const chromeOpacity = (0, react_native_reanimated_1.useSharedValue)(1);
+    const pageTranslateX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const currentIndexSV = (0, react_native_reanimated_1.useSharedValue)(normalizeIndex(value, images.length));
+    const viewport = React.useMemo(() => ({ width: window.width, height: window.height }), [window.height, window.width]);
+    const total = images.length;
+    const normalizedValue = normalizeIndex(value, total);
+    const currentImage = (_b = (_a = images[renderIndex]) !== null && _a !== void 0 ? _a : images[normalizedValue]) !== null && _b !== void 0 ? _b : null;
+    const setChromeVisibleAnimated = React.useCallback((nextVisible) => {
+        setChromeVisible(nextVisible);
+        chromeOpacity.value = (0, react_native_reanimated_1.withTiming)(nextVisible ? 1 : 0, CHROME_TIMING);
+    }, [chromeOpacity]);
+    const requestClose = React.useCallback((reason) => {
+        if (disabled)
+            return;
+        if (!dismissible &&
+            reason !== 'api' &&
+            reason !== 'empty' &&
+            reason !== 'replace' &&
+            reason !== 'unmount') {
+            return;
+        }
+        if (closingRef.current)
+            return;
+        closeReasonRef.current = reason;
+        onOpenChange(false, createOpenMeta(reason, renderIndexRef.current, images));
+    }, [disabled, dismissible, images, onOpenChange]);
+    const finishClose = React.useCallback(() => {
+        const result = createResult(closeReasonRef.current, renderIndexRef.current, imagesRef.current);
+        setMounted(false);
+        setClosing(false);
+        onCloseCompleteRef.current(result);
+    }, []);
+    const jumpToValue = React.useCallback((nextValue, reason) => {
+        const target = normalizeIndex(nextValue, total);
+        const previousValue = renderIndexRef.current;
+        if (target === previousValue)
+            return;
+        currentIndexSV.value = target;
+        pageTranslateX.value = 0;
+        setRenderIndex(target);
+        onChange(target, reason);
+    }, [currentIndexSV, onChange, pageTranslateX, total]);
+    const renderContext = React.useMemo(() => ({
+        open,
+        value: renderIndex,
+        image: currentImage,
+        total,
+        close: (reason = 'api') => requestClose(reason),
+        setValue: (nextValue) => jumpToValue(nextValue, 'api'),
+    }), [currentImage, jumpToValue, open, renderIndex, requestClose, total]);
+    React.useEffect(() => {
+        if (open && total > 0) {
+            const nextValue = normalizeIndex(value, total);
+            closingRef.current = false;
+            closeReasonRef.current = 'api';
+            setClosing(false);
+            setChromeVisible(true);
+            chromeOpacity.value = 1;
+            currentIndexSV.value = nextValue;
+            pageTranslateX.value = 0;
+            setRenderIndex(nextValue);
+            setMounted(true);
+            backdropOpacity.value = (0, react_native_reanimated_1.withTiming)(1, ENTER_TIMING);
+        }
+        else if (mounted) {
+            closingRef.current = true;
+            setClosing(true);
+            backdropOpacity.value = (0, react_native_reanimated_1.withTiming)(0, EXIT_TIMING, (finished) => {
+                if (finished) {
+                    (0, react_native_worklets_1.scheduleOnRN)(finishClose);
+                }
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, total]);
+    React.useEffect(() => {
+        if (!open || total <= 0)
+            return;
+        const nextValue = normalizeIndex(value, total);
+        currentIndexSV.value = nextValue;
+        pageTranslateX.value = 0;
+        setRenderIndex(nextValue);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, total]);
+    React.useEffect(() => {
+        if (!mounted || prefetch === false)
+            return;
+        const uris = getPrefetchUris(images, renderIndex, prefetch !== null && prefetch !== void 0 ? prefetch : 'adjacent');
+        if (!uris.length)
+            return;
+        expo_image_1.Image.prefetch(uris, prefetchCachePolicy).catch(() => { });
+    }, [images, mounted, prefetch, prefetchCachePolicy, renderIndex]);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => currentIndexSV.value, (nextValue) => {
+        (0, react_native_worklets_1.scheduleOnRN)(setRenderIndex, nextValue);
+    });
+    const handlePageChange = React.useCallback((nextValue) => {
+        setRenderIndex(nextValue);
+        onChange(nextValue, 'swipe');
+    }, [onChange]);
+    const handleImageLoad = React.useCallback((event, meta) => {
+        onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(event, meta);
+    }, [onImageLoad]);
+    const handleImageError = React.useCallback((event, meta) => {
+        if (meta.value === renderIndexRef.current && typeof __DEV__ !== 'undefined' && __DEV__) {
+            console.warn('[imagePreview] Failed to load image', {
+                error: event.error,
+                uri: meta.image.uri,
+            });
+        }
+        onImageError === null || onImageError === void 0 ? void 0 : onImageError(event, meta);
+    }, [onImageError]);
+    const handleSingleTap = React.useCallback(() => {
+        if (interactions.tapBehavior !== 'toggleChrome')
+            return;
+        setChromeVisibleAnimated(!chromeVisible);
+    }, [chromeVisible, interactions.tapBehavior, setChromeVisibleAnimated]);
+    const handleModalRequestClose = React.useCallback(() => {
+        if (!interactions.backToClose)
+            return;
+        requestClose('back');
+    }, [interactions.backToClose, requestClose]);
+    const handleAccessibilityEscape = React.useCallback(() => {
+        requestClose('back');
+    }, [requestClose]);
+    const backdropStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: backdropOpacity.value,
+    }));
+    const chromeStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: backdropOpacity.value * chromeOpacity.value,
+    }));
+    if (!mounted)
+        return null;
+    const lower = Math.max(0, renderIndex - renderAhead);
+    const upper = Math.min(total - 1, renderIndex + renderAhead);
+    const renderRange = [];
+    for (let index = lower; index <= upper; index += 1) {
+        renderRange.push(index);
+    }
+    const topOffset = insets.top + CLOSE_BUTTON_TOP;
+    const bottomOffset = insets.bottom + BOTTOM_CHROME_OFFSET;
+    const showCloseButton = closeButton && dismissible && !disabled;
+    const showCounter = counter && total > 1;
+    const chromePointerEvents = chromeVisible && !closing ? 'box-none' : 'none';
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { animationType: "none", hardwareAccelerated: true, onRequestClose: handleModalRequestClose, presentationStyle: "overFullScreen", statusBarTranslucent: true, supportedOrientations: [
+            'portrait',
+            'portrait-upside-down',
+            'landscape',
+            'landscape-left',
+            'landscape-right',
+        ], transparent: true, visible: mounted, ...modalProps, children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureHandlerRootView, { style: styles.modalRoot, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : labels.preview, accessibilityViewIsModal: true, onAccessibilityEscape: handleAccessibilityEscape, pointerEvents: closing ? 'none' : 'auto', style: [styles.root, { zIndex: DEFAULT_Z_INDEX }, rootStyle], testID: testID, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [styles.backdrop, { backgroundColor: colors.backdrop }, backdropStyle] }), renderRange.map((index) => {
+                        var _a, _b;
+                        const image = images[index];
+                        if (!image)
+                            return null;
+                        const imageAccessibilityLabel = (_b = (_a = image.accessibilityLabel) !== null && _a !== void 0 ? _a : image.alt) !== null && _b !== void 0 ? _b : labels.image(index + 1, total);
+                        return ((0, jsx_runtime_1.jsx)(ZoomableImage, { active: index === renderIndex, backdropOpacity: backdropOpacity, colors: colors, contentFit: contentFit, currentIndexSV: currentIndexSV, dismissible: dismissible && !disabled, image: image, imageAccessibilityLabel: imageAccessibilityLabel, imageProps: imageProps, imageStyle: imageStyle, index: index, interactions: interactions, labels: labels, onImageError: handleImageError, onImageLoad: handleImageLoad, onPageChange: handlePageChange, onRequestClose: requestClose, onSingleTap: handleSingleTap, pageTranslateX: pageTranslateX, totalCount: total, viewport: viewport }, image.key));
+                    }), renderOverlay && ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: styles.overlaySlot, children: renderOverlay(renderContext) })), renderHeader && ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: chromePointerEvents, style: [styles.headerSlot, { top: topOffset }, chromeStyle], children: renderHeader(renderContext) })), showCloseButton && ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: chromeVisible && !closing ? 'auto' : 'none', style: [styles.closeButtonWrap, { top: topOffset }, chromeStyle], children: (0, jsx_runtime_1.jsx)(CloseButton, { backgroundColor: colors.controlBackground, color: colors.controlForeground, label: labels.close, onPress: () => requestClose('closeButton') }) })), (renderFooter || showCounter) && ((0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { pointerEvents: chromePointerEvents, style: [styles.bottomChrome, { bottom: bottomOffset }, chromeStyle], children: [renderFooter && (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.footerSlot, children: renderFooter(renderContext) }), showCounter && ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityLabel: labels.counter(renderIndex + 1, total), pointerEvents: "none", style: [
+                                    styles.counterPill,
+                                    { backgroundColor: colors.counterBackground },
+                                ], children: (0, jsx_runtime_1.jsxs)(Text_1.Text, { color: colors.counterText, lineHeight: COUNTER_LINE_HEIGHT, size: COUNTER_FONT_SIZE, tabularNumbers: true, weight: "semibold", children: [renderIndex + 1, " / ", total] }) }))] }))] }) }) }));
+}
+const ImagePreviewRoot = React.forwardRef(function ImagePreview({ accessibilityLabel, closeButton = true, colors, contentFit = 'contain', counter = true, defaultOpen = false, defaultValue = 0, disabled = false, dismissible = true, imageProps, imageStyle, images, interactions, labels, modalProps, onChange, onClose, onImageError, onImageLoad, onOpenChange, open, prefetch = false, prefetchCachePolicy = 'memory-disk', renderAhead, renderFooter, renderHeader, renderOverlay, rootStyle, testID, value, }, ref) {
+    const theme = (0, useTheme_1.useTheme)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const normalizedImages = React.useMemo(() => normalizeImages(images), [images]);
+    const total = normalizedImages.length;
+    const isOpenControlled = open !== undefined;
+    const isValueControlled = value !== undefined;
+    const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+    const [innerValue, setInnerValue] = React.useState(() => normalizeIndex(defaultValue, total));
+    const actualOpen = isOpenControlled ? !!open : innerOpen;
+    const actualValue = normalizeIndex(isValueControlled ? value : innerValue, total);
+    const closeReasonRef = React.useRef('api');
+    const closeRequestedRef = React.useRef(false);
+    const previousOpenRef = React.useRef(actualOpen);
+    const valueRef = React.useRef(actualValue);
+    valueRef.current = actualValue;
+    const resolvedInteractions = React.useMemo(() => resolveInteractions(interactions), [interactions]);
+    const resolvedColors = React.useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return ({
+            backdrop: (_a = colors === null || colors === void 0 ? void 0 : colors.backdrop) !== null && _a !== void 0 ? _a : '#000000',
+            controlBackground: (_b = colors === null || colors === void 0 ? void 0 : colors.controlBackground) !== null && _b !== void 0 ? _b : 'rgba(17, 24, 39, 0.62)',
+            controlForeground: (_c = colors === null || colors === void 0 ? void 0 : colors.controlForeground) !== null && _c !== void 0 ? _c : theme.colors.onPrimary,
+            counterBackground: (_d = colors === null || colors === void 0 ? void 0 : colors.counterBackground) !== null && _d !== void 0 ? _d : 'rgba(17, 24, 39, 0.58)',
+            counterText: (_e = colors === null || colors === void 0 ? void 0 : colors.counterText) !== null && _e !== void 0 ? _e : theme.colors.onPrimary,
+            errorBackground: (_f = colors === null || colors === void 0 ? void 0 : colors.errorBackground) !== null && _f !== void 0 ? _f : 'rgba(17, 24, 39, 0.72)',
+            errorText: (_g = colors === null || colors === void 0 ? void 0 : colors.errorText) !== null && _g !== void 0 ? _g : theme.colors.onPrimary,
+            loading: (_h = colors === null || colors === void 0 ? void 0 : colors.loading) !== null && _h !== void 0 ? _h : theme.colors.onPrimary,
+        });
+    }, [
+        colors === null || colors === void 0 ? void 0 : colors.backdrop,
+        colors === null || colors === void 0 ? void 0 : colors.controlBackground,
+        colors === null || colors === void 0 ? void 0 : colors.controlForeground,
+        colors === null || colors === void 0 ? void 0 : colors.counterBackground,
+        colors === null || colors === void 0 ? void 0 : colors.counterText,
+        colors === null || colors === void 0 ? void 0 : colors.errorBackground,
+        colors === null || colors === void 0 ? void 0 : colors.errorText,
+        colors === null || colors === void 0 ? void 0 : colors.loading,
+        theme.colors.onPrimary,
+    ]);
+    const resolvedLabels = React.useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        return ({
+            preview: (_a = labels === null || labels === void 0 ? void 0 : labels.preview) !== null && _a !== void 0 ? _a : t('imagePreview.preview'),
+            close: (_b = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _b !== void 0 ? _b : t('imagePreview.close'),
+            loadFailed: (_c = labels === null || labels === void 0 ? void 0 : labels.loadFailed) !== null && _c !== void 0 ? _c : t('imagePreview.loadFailed'),
+            counter: (_d = labels === null || labels === void 0 ? void 0 : labels.counter) !== null && _d !== void 0 ? _d : ((current, imageTotal) => t('imagePreview.counter', { current, total: imageTotal })),
+            image: (_e = labels === null || labels === void 0 ? void 0 : labels.image) !== null && _e !== void 0 ? _e : ((current, imageTotal) => t('imagePreview.image', { current, total: imageTotal })),
+        });
+    }, [labels, t]);
+    const notifyOpenChange = React.useCallback((nextOpen, meta) => {
+        if (!nextOpen) {
+            closeReasonRef.current = meta.reason;
+            closeRequestedRef.current = true;
+        }
+        if (!isOpenControlled)
+            setInnerOpen(nextOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen, meta);
+    }, [isOpenControlled, onOpenChange]);
+    const notifyChange = React.useCallback((nextValue, reason) => {
+        const normalizedValue = normalizeIndex(nextValue, total);
+        const previousValue = valueRef.current;
+        if (normalizedValue === previousValue)
+            return;
+        valueRef.current = normalizedValue;
+        if (!isValueControlled)
+            setInnerValue(normalizedValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(normalizedValue, createChangeMeta(reason, previousValue, normalizedValue, normalizedImages));
+    }, [isValueControlled, normalizedImages, onChange, total]);
+    const close = React.useCallback((reason = 'api') => {
+        notifyOpenChange(false, createOpenMeta(reason, valueRef.current, normalizedImages));
+    }, [normalizedImages, notifyOpenChange]);
+    React.useImperativeHandle(ref, () => ({
+        close,
+        setValue: (nextValue) => notifyChange(nextValue, 'api'),
+        getValue: () => valueRef.current,
+    }), [close, notifyChange]);
+    React.useEffect(() => {
+        if (actualOpen) {
+            closeReasonRef.current = 'api';
+            closeRequestedRef.current = false;
+        }
+        else if (previousOpenRef.current && !actualOpen && !closeRequestedRef.current) {
+            closeReasonRef.current = 'api';
+        }
+        previousOpenRef.current = actualOpen;
+    }, [actualOpen]);
+    React.useEffect(() => {
+        if (actualOpen && total === 0) {
+            notifyOpenChange(false, createOpenMeta('empty', 0, normalizedImages));
+        }
+    }, [actualOpen, normalizedImages, notifyOpenChange, total]);
+    React.useEffect(() => {
+        if (isValueControlled)
+            return;
+        const nextValue = normalizeIndex(innerValue, total);
+        if (nextValue !== innerValue)
+            setInnerValue(nextValue);
+    }, [innerValue, isValueControlled, total]);
+    const handleCloseComplete = React.useCallback((result) => {
+        onClose === null || onClose === void 0 ? void 0 : onClose({
+            ...result,
+            reason: closeReasonRef.current,
+        });
+    }, [onClose]);
+    return ((0, jsx_runtime_1.jsx)(ImagePreviewOverlay, { accessibilityLabel: accessibilityLabel, closeButton: closeButton, colors: resolvedColors, contentFit: contentFit, counter: counter, disabled: disabled, dismissible: dismissible, imageProps: imageProps, imageStyle: imageStyle, images: normalizedImages, interactions: resolvedInteractions, labels: resolvedLabels, modalProps: modalProps, onChange: notifyChange, onCloseComplete: handleCloseComplete, onImageError: onImageError, onImageLoad: onImageLoad, onOpenChange: notifyOpenChange, open: actualOpen && total > 0, prefetch: prefetch, prefetchCachePolicy: prefetchCachePolicy, renderAhead: clampRenderAhead(renderAhead), renderFooter: renderFooter, renderHeader: renderHeader, renderOverlay: renderOverlay, rootStyle: rootStyle, testID: testID, value: actualValue }));
+});
+ImagePreviewRoot.displayName = 'ImagePreview';
+exports.ImagePreview = React.memo(ImagePreviewRoot);
+exports.ImagePreview.displayName = 'ImagePreview';
+function ImagePreviewProvider({ children }) {
+    const [state, setState] = React.useState({
+        open: false,
+        request: null,
+        value: 0,
+        closeReason: 'api',
+    });
+    const stateRef = React.useRef(state);
+    stateRef.current = state;
+    React.useEffect(() => {
+        const controller = {
+            open: (request) => {
+                setState({
+                    open: true,
+                    request,
+                    value: request.index,
+                    closeReason: 'api',
+                });
+            },
+            close: (reason) => {
+                setState((prev) => ({ ...prev, open: false, closeReason: reason }));
+            },
+            setValue: (nextValue) => {
+                setState((prev) => {
+                    var _a, _b;
+                    return ({
+                        ...prev,
+                        value: normalizeIndex(nextValue, normalizeImages((_b = (_a = prev.request) === null || _a === void 0 ? void 0 : _a.images) !== null && _b !== void 0 ? _b : []).length),
+                    });
+                });
+            },
+            getSnapshot: () => {
+                var _a, _b, _c;
+                const current = stateRef.current;
+                const images = normalizeImages((_b = (_a = current.request) === null || _a === void 0 ? void 0 : _a.images) !== null && _b !== void 0 ? _b : []);
+                const value = normalizeIndex(current.value, images.length);
+                return {
+                    open: current.open,
+                    value,
+                    image: (_c = images[value]) !== null && _c !== void 0 ? _c : null,
+                    total: images.length,
+                };
+            },
+        };
+        exports.imagePreview._bind(controller);
+        return () => {
+            exports.imagePreview._bind(null);
+            const request = stateRef.current.request;
+            if (request)
+                exports.imagePreview._dispose(request.id);
+        };
+    }, []);
+    const request = state.request;
+    const handleOpenChange = React.useCallback((nextOpen, meta) => {
+        var _a;
+        (_a = request === null || request === void 0 ? void 0 : request.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(request, nextOpen, meta);
+        if (!nextOpen) {
+            setState((prev) => ({
+                ...prev,
+                open: false,
+                closeReason: meta.reason,
+            }));
+        }
+    }, [request]);
+    const handleChange = React.useCallback((nextValue, meta) => {
+        var _a;
+        setState((prev) => ({ ...prev, value: nextValue }));
+        (_a = request === null || request === void 0 ? void 0 : request.onChange) === null || _a === void 0 ? void 0 : _a.call(request, nextValue, meta);
+    }, [request]);
+    const handleClose = React.useCallback((result) => {
+        if (!request)
+            return;
+        const finalResult = {
+            ...result,
+            reason: stateRef.current.closeReason,
+        };
+        exports.imagePreview._complete(request.id, finalResult);
+        setState((prev) => {
+            var _a;
+            return ((_a = prev.request) === null || _a === void 0 ? void 0 : _a.id) === request.id
+                ? { open: false, request: null, value: 0, closeReason: 'api' }
+                : prev;
+        });
+    }, [request]);
+    let previewNode = null;
+    if (request) {
+        const { index: _index, onChange: _onChange, onClose: _onClose, onOpenChange: _onOpenChange, ...previewProps } = request;
+        previewNode = ((0, jsx_runtime_1.jsx)(exports.ImagePreview, { ...previewProps, onChange: handleChange, onClose: handleClose, onOpenChange: handleOpenChange, open: state.open, value: state.value }, request.id));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, previewNode] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    modalRoot: {
+        flex: 1,
+    },
+    root: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+        elevation: react_native_1.Platform.OS === 'android' ? 100 : 0,
+        overflow: 'hidden',
+    },
+    backdrop: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+    },
+    imagePage: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        zIndex: 1,
+    },
+    overlaySlot: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        zIndex: 5,
+    },
+    headerSlot: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        zIndex: 12,
+    },
+    closeButtonWrap: {
+        position: 'absolute',
+        left: CLOSE_BUTTON_LEFT,
+        zIndex: 14,
+    },
+    closeButton: {
+        width: CLOSE_BUTTON_SIDE,
+        height: CLOSE_BUTTON_SIDE,
+        borderRadius: CONTROL_RADIUS,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    bottomChrome: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        gap: BOTTOM_CHROME_GAP,
+        zIndex: 12,
+    },
+    footerSlot: {
+        alignSelf: 'stretch',
+    },
+    counterPill: {
+        minHeight: COUNTER_MIN_HEIGHT,
+        paddingHorizontal: COUNTER_PADDING_HORIZONTAL,
+        borderRadius: COUNTER_RADIUS,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    errorState: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    loadingState: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 3,
+    },
+    errorCard: {
+        maxWidth: ERROR_CARD_MAX_WIDTH,
+        paddingHorizontal: ERROR_CARD_PADDING_HORIZONTAL,
+        paddingVertical: ERROR_CARD_PADDING_VERTICAL,
+        borderRadius: ERROR_CARD_RADIUS,
+        alignItems: 'center',
+    },
+    errorIcon: {
+        marginBottom: ERROR_ICON_MARGIN_BOTTOM,
+    },
+});