zkit-ui 2.0.21 → 2.0.23

package/android/src/main/java/cn/fontree/zkit/ui/preview/NativeImagePreviewSourceViewRegistry.java

@@ -1,5 +1,6 @@
 package cn.fontree.zkit.ui.preview;
 
+import android.graphics.Rect;
 import android.view.View;
 import android.widget.ImageView;
 
@@ -72,6 +73,18 @@ public final class NativeImagePreviewSourceViewRegistry {
         return imageView;
     }
 
+    @Nullable
+    public static synchronized ImageView findVisible(@NonNull String key) {
+        ImageView imageView = find(key);
+        if (imageView == null) {
+            return null;
+        }
+        Rect visibleRect = new Rect();
+        return imageView.getGlobalVisibleRect(visibleRect) && !visibleRect.isEmpty()
+                ? imageView
+                : null;
+    }
+
     @Nullable
     private static ImageView resolveMappedViewLocked(@NonNull String key) {
         WeakReference<ImageView> reference = SOURCE_VIEWS.get(key);

package/android/src/main/java/cn/fontree/zkit/ui/preview/NativeImagePreviewViewerOverlayView.java

@@ -377,7 +377,7 @@ public final class NativeImagePreviewViewerOverlayView extends FrameLayout imple
 
         NativeImagePreviewMediaItem item = items.get(currentIndex);
         String anchorKey = NativeImagePreviewSharedElementNames.forItem(previewGroupId, item);
-        ImageView targetView = NativeImagePreviewSourceViewRegistry.find(anchorKey);
+        ImageView targetView = NativeImagePreviewSourceViewRegistry.findVisible(anchorKey);
         NativeImagePreviewSharedElementState targetState = NativeImagePreviewLayoutSupport.captureImageViewState(targetView);
         NativeImagePreviewSharedElementGeometry targetGeometry = targetState != null
                 ? targetState.getGeometry()

package/dist/ui/NativeImagePreview/web/types.d.ts

@@ -59,7 +59,9 @@ export type NativeImagePreviewWebOpenOptions = {
     sourceObjectFit?: NativeImagePreviewWebObjectFit;
     sourceVisibility?: NativeImagePreviewWebSourceVisibility;
     theme?: NativeImagePreviewWebTheme;
+    /** Defaults to hidden for images and visible for videos. */
     closeButton?: boolean;
+    /** Hidden by default; set to true to show the current item position. */
     counter?: boolean;
     onChange?: (index: number, meta: NativeImagePreviewWebChangeMeta) => void;
     onClose?: (meta: NativeImagePreviewWebCloseMeta) => void;

package/dist/ui/NativeImagePreview/web/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/NativeImagePreview/web/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/NativeImagePreview/web/types.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,MAAM,MAAM,8BAA8B,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,8BAA8B,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1E,MAAM,MAAM,qCAAqC,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzE,MAAM,MAAM,gCAAgC,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7G,MAAM,MAAM,iCAAiC,GAAG,KAAK,GAAG,OAAO,CAAC;AAEhE,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,8BAA8B,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,8BAA8B,CAAC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,8BAA8B,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,MAAM,EAAE,iCAAiC,CAAC;IAC1C,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,iCAAiC,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,MAAM,EAAE,gCAAgC,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,iCAAiC,GAAG,IAAI,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,EAAE,SAAS,8BAA8B,EAAE,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IAC7D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,iCAAiC,KAAK,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9G,UAAU,CAAC,EAAE,yBAAyB,GAAG,eAAe,GAAG,IAAI,CAAC;IAChE,eAAe,CAAC,EAAE,8BAA8B,GAAG,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,8BAA8B,CAAC;IAC3C,eAAe,CAAC,EAAE,8BAA8B,CAAC;IACjD,gBAAgB,CAAC,EAAE,qCAAqC,CAAC;IACzD,KAAK,CAAC,EAAE,0BAA0B,CAAC;IACnC,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,+BAA+B,KAAK,IAAI,CAAC;IAC1E,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,8BAA8B,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,IAAI,EAAE,CAAC,OAAO,EAAE,gCAAgC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,gCAAgC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,OAAO,CAAC;CACvB,CAAC"}

package/dist/ui/NativeImagePreview/web/viewer.d.ts

@@ -35,6 +35,9 @@ export declare class NativeImagePreviewWebViewer implements NativeImagePreviewWe
     private previousHtmlOverflow;
     private viewportWidth;
     private viewportHeight;
+    private pendingTapCloseTimer;
+    private tapEligible;
+    private controlsVisible;
     open(options: NativeImagePreviewWebOpenOptions): Promise<void>;
     close(reason?: NativeImagePreviewWebCloseReason): Promise<void>;
     destroy(): void;
@@ -48,6 +51,7 @@ export declare class NativeImagePreviewWebViewer implements NativeImagePreviewWe
     private showContent;
     private showControls;
     private hideControls;
+    private syncCloseButtonVisibility;
     private finishClose;
     private unmount;
     private captureViewportSize;
@@ -77,6 +81,7 @@ export declare class NativeImagePreviewWebViewer implements NativeImagePreviewWe
     private handleVisibilityChange;
     private handleLostPointerCapture;
     private handleTap;
+    private cancelPendingTapClose;
     private preparePinchIfNeeded;
     private applyPinch;
     private finishSwipe;

package/dist/ui/NativeImagePreview/web/viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../../../../src/ui/NativeImagePreview/web/viewer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../../../../src/ui/NativeImagePreview/web/viewer.ts"],"names":[],"mappings":"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"}

package/dist/ui/NativeImagePreview/web/viewer.js

@@ -9,6 +9,7 @@ const media_1 = require("./media");
 const transition_1 = require("./transition");
 const MAX_SCALE = 5;
 const DOUBLE_TAP_SCALE = 2.5;
+const DOUBLE_TAP_TIMEOUT = 280;
 const DRAG_DISMISS_DISTANCE = 72;
 const DRAG_DISMISS_MIN_FLING_DISTANCE = 24;
 const DRAG_DISMISS_VELOCITY = 520;
@@ -53,14 +54,19 @@ class NativeImagePreviewWebViewer {
         this.previousHtmlOverflow = '';
         this.viewportWidth = 1;
         this.viewportHeight = 1;
+        this.pendingTapCloseTimer = null;
+        this.tapEligible = false;
+        this.controlsVisible = false;
         this.handlePointerDown = (event) => {
             if (this.closing || !this.root) {
                 return;
             }
+            this.cancelPendingTapClose(false);
             const target = event.target;
             if (this.shouldIgnorePointerStart(target, event)) {
                 return;
             }
+            this.tapEligible = this.pointers.size === 0;
             this.root.setPointerCapture(event.pointerId);
             this.pointers.set(event.pointerId, { id: event.pointerId, x: event.clientX, y: event.clientY });
             this.downX = event.clientX;
@@ -71,6 +77,10 @@ class NativeImagePreviewWebViewer {
             this.dragX = 0;
             this.dragY = 0;
             this.mode = this.pointers.size >= 2 ? 'pinch' : 'none';
+            if (this.mode === 'pinch') {
+                this.tapEligible = false;
+                this.cancelPendingTapClose(true);
+            }
             this.preparePinchIfNeeded();
         };
         this.handlePointerMove = (event) => {
@@ -80,6 +90,7 @@ class NativeImagePreviewWebViewer {
             event.preventDefault();
             this.pointers.set(event.pointerId, { id: event.pointerId, x: event.clientX, y: event.clientY });
             if (this.pointers.size >= 2) {
+                this.tapEligible = false;
                 this.mode = 'pinch';
                 this.applyPinch();
                 return;
@@ -95,6 +106,8 @@ class NativeImagePreviewWebViewer {
                 if (Math.hypot(dx, dy) < MODE_LOCK_DISTANCE) {
                     return;
                 }
+                this.tapEligible = false;
+                this.cancelPendingTapClose(true);
                 if (state.scale > 1.02) {
                     this.mode = 'pan';
                 }
@@ -126,6 +139,10 @@ class NativeImagePreviewWebViewer {
             if (!this.pointers.has(event.pointerId)) {
                 return;
             }
+            if (event.type === 'pointercancel') {
+                this.cancelActiveGesture();
+                return;
+            }
             const finalDx = event.clientX - this.downX;
             const finalDy = event.clientY - this.downY;
             this.pointers.delete(event.pointerId);
@@ -133,6 +150,7 @@ class NativeImagePreviewWebViewer {
                 this.root.releasePointerCapture(event.pointerId);
             }
             if (this.pointers.size >= 2) {
+                this.tapEligible = false;
                 this.preparePinchIfNeeded();
                 return;
             }
@@ -164,9 +182,10 @@ class NativeImagePreviewWebViewer {
                 this.dragX = finalDx;
                 this.finishSwipe(velocityX);
             }
-            else if (this.mode === 'none') {
+            else if (this.mode === 'none' && this.tapEligible) {
                 this.handleTap(event);
             }
+            this.tapEligible = false;
             this.mode = 'none';
             this.dragX = 0;
             this.dragY = 0;
@@ -176,6 +195,8 @@ class NativeImagePreviewWebViewer {
                 return;
             }
             event.preventDefault();
+            this.tapEligible = false;
+            this.cancelPendingTapClose(true);
             const state = this.activeState();
             const nextScale = (0, geometry_1.clamp)(state.scale * (event.deltaY > 0 ? 0.92 : 1.08), 1, MAX_SCALE);
             state.scale = nextScale;
@@ -251,6 +272,8 @@ class NativeImagePreviewWebViewer {
         this.slideStates = items.map(() => this.createSlideState());
         this.openState = true;
         this.closing = false;
+        this.tapEligible = false;
+        this.controlsVisible = false;
         this.captureViewportSize();
         this.lockDocumentScroll();
         this.mount();
@@ -265,6 +288,8 @@ class NativeImagePreviewWebViewer {
         if (!this.openState || this.closing) {
             return;
         }
+        this.cancelPendingTapClose(true);
+        this.tapEligible = false;
         this.closing = true;
         await this.performCloseTransition(reason);
         this.finishClose(reason);
@@ -283,7 +308,7 @@ class NativeImagePreviewWebViewer {
         return this.openState;
     }
     mount() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const root = document.createElement('div');
         root.className = `native-image-preview-root native-image-preview-theme-${(_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.theme) !== null && _b !== void 0 ? _b : 'dark'}`;
         root.tabIndex = -1;
@@ -313,12 +338,12 @@ class NativeImagePreviewWebViewer {
         closeButton.type = 'button';
         closeButton.textContent = '×';
         closeButton.setAttribute('aria-label', 'Close image preview');
-        closeButton.hidden = ((_c = this.options) === null || _c === void 0 ? void 0 : _c.closeButton) === false;
+        closeButton.hidden = true;
         closeButton.style.opacity = '0';
         root.append(closeButton);
         const counter = document.createElement('div');
         counter.className = 'native-image-preview-counter';
-        counter.hidden = ((_d = this.options) === null || _d === void 0 ? void 0 : _d.counter) === false || this.items.length <= 1;
+        counter.hidden = ((_c = this.options) === null || _c === void 0 ? void 0 : _c.counter) !== true || this.items.length <= 1;
         counter.style.opacity = '0';
         root.append(counter);
         this.root = root;
@@ -327,6 +352,7 @@ class NativeImagePreviewWebViewer {
         this.track = track;
         this.closeButton = closeButton;
         this.counter = counter;
+        this.syncCloseButtonVisibility();
         root.addEventListener('pointerdown', this.handlePointerDown);
         root.addEventListener('pointermove', this.handlePointerMove);
         root.addEventListener('pointerup', this.handlePointerUp);
@@ -456,25 +482,36 @@ class NativeImagePreviewWebViewer {
         this.applyActiveMediaTransform(false);
     }
     showControls() {
-        if (this.closeButton && !this.closeButton.hidden) {
-            this.closeButton.style.opacity = '1';
-        }
+        this.controlsVisible = true;
+        this.syncCloseButtonVisibility();
         if (this.counter && !this.counter.hidden) {
             this.counter.style.opacity = '1';
         }
     }
     hideControls() {
-        if (this.closeButton) {
-            this.closeButton.style.opacity = '0';
-        }
+        this.controlsVisible = false;
+        this.syncCloseButtonVisibility();
         if (this.counter) {
             this.counter.style.opacity = '0';
         }
     }
+    syncCloseButtonVisibility() {
+        var _a, _b;
+        if (!this.closeButton) {
+            return;
+        }
+        const configuredVisibility = (_a = this.options) === null || _a === void 0 ? void 0 : _a.closeButton;
+        const shouldShow = configuredVisibility !== null && configuredVisibility !== void 0 ? configuredVisibility : ((_b = this.items[this.index]) === null || _b === void 0 ? void 0 : _b.type) === 'video';
+        this.closeButton.hidden = !shouldShow;
+        this.closeButton.style.opacity = shouldShow && this.controlsVisible ? '1' : '0';
+    }
     finishClose(reason) {
         var _a, _b, _c;
         const item = (_a = this.items[this.index]) !== null && _a !== void 0 ? _a : null;
         const index = this.index;
+        this.cancelPendingTapClose(true);
+        this.tapEligible = false;
+        this.controlsVisible = false;
         this.restoreSourceElement();
         this.unlockDocumentScroll();
         this.unmount();
@@ -489,6 +526,7 @@ class NativeImagePreviewWebViewer {
         this.mode = 'none';
     }
     unmount() {
+        this.cancelPendingTapClose(true);
         const root = this.root;
         const closeButton = this.closeButton;
         if (!root) {
@@ -556,7 +594,7 @@ class NativeImagePreviewWebViewer {
         }
         await (0, media_1.waitForElementImage)(element);
         const rect = (0, geometry_1.rectFromElement)(element);
-        if (!(0, geometry_1.isUsableRect)(rect)) {
+        if (!(0, geometry_1.isUsableRect)(rect) || !(0, geometry_1.intersectRects)(rect, this.viewportRect())) {
             return null;
         }
         const size = await this.resolveSharedMediaSize(item);
@@ -647,8 +685,14 @@ class NativeImagePreviewWebViewer {
     }
     handleTap(event) {
         const state = this.activeState();
+        const item = this.items[this.index];
+        if ((item === null || item === void 0 ? void 0 : item.type) !== 'image') {
+            state.lastTapAt = 0;
+            return;
+        }
         const now = performance.now();
-        if (now - state.lastTapAt < 280) {
+        if (state.lastTapAt > 0 && now - state.lastTapAt < DOUBLE_TAP_TIMEOUT) {
+            this.cancelPendingTapClose(false);
             state.scale = state.scale > 1.02 ? 1 : DOUBLE_TAP_SCALE;
             state.translateX = 0;
             state.translateY = 0;
@@ -658,6 +702,28 @@ class NativeImagePreviewWebViewer {
             return;
         }
         state.lastTapAt = now;
+        const tapIndex = this.index;
+        this.pendingTapCloseTimer = window.setTimeout(() => {
+            this.pendingTapCloseTimer = null;
+            const tapState = this.slideStates[tapIndex];
+            if (tapState) {
+                tapState.lastTapAt = 0;
+            }
+            if (this.openState && !this.closing && this.index === tapIndex) {
+                void this.close('backdrop');
+            }
+        }, DOUBLE_TAP_TIMEOUT);
+    }
+    cancelPendingTapClose(resetTapState) {
+        if (this.pendingTapCloseTimer !== null) {
+            window.clearTimeout(this.pendingTapCloseTimer);
+            this.pendingTapCloseTimer = null;
+        }
+        if (resetTapState) {
+            this.slideStates.forEach((state) => {
+                state.lastTapAt = 0;
+            });
+        }
     }
     preparePinchIfNeeded() {
         if (this.pointers.size < 2) {
@@ -709,6 +775,8 @@ class NativeImagePreviewWebViewer {
     }
     goTo(nextIndex, reason) {
         var _a, _b;
+        this.cancelPendingTapClose(true);
+        this.tapEligible = false;
         const clamped = (0, geometry_1.clamp)(nextIndex, 0, this.items.length - 1);
         const previousIndex = this.index;
         this.index = clamped;
@@ -716,6 +784,7 @@ class NativeImagePreviewWebViewer {
         this.resetSlideState(clamped);
         this.updateTrack(true);
         this.updateCounter();
+        this.syncCloseButtonVisibility();
         this.pauseInactiveVideos(clamped);
         if (previousIndex !== clamped) {
             this.syncHiddenSourceElement(clamped);
@@ -755,6 +824,8 @@ class NativeImagePreviewWebViewer {
         }
     }
     cancelActiveGesture() {
+        this.cancelPendingTapClose(true);
+        this.tapEligible = false;
         if (!this.pointers.size && this.mode === 'none' && !this.dragX && !this.dragY) {
             return;
         }

package/dist/ui/SliderCaptcha/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/SliderCaptcha/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/SliderCaptcha/index.tsx"],"names":[],"mappings":"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"}

package/dist/ui/SliderCaptcha/index.js

@@ -55,6 +55,9 @@ const CARD_HORIZONTAL_PADDING = (0, zkit_tools_1.wp)(24);
 const CANVAS_BORDER_WIDTH = (0, zkit_tools_1.wp)(1);
 const CAPTCHA_LAYER_Z_INDEX = 4000;
 const SLIDER_THUMB_SIZE = (0, zkit_tools_1.wp)(44);
+const WEB_SLIDER_EDGE_GESTURE_INSET = react_native_1.Platform.OS === 'web' ? (0, zkit_tools_1.wp)(16) : 0;
+const MIUI_DRAG_BACK_QUERY_KEY = 'native_drag_back';
+const SLIDER_CANCEL_DURATION = 160;
 const CAPTCHA_ENTER_DURATION = 280;
 const CAPTCHA_EXIT_DURATION = 220;
 const CAPTCHA_CARD_OFFSET_Y = (0, zkit_tools_1.wp)(18);
@@ -89,6 +92,100 @@ function getSafePositiveNumber(value, fallback) {
     }
     return value;
 }
+let webHorizontalOverscrollLockCount = 0;
+let webHorizontalOverscrollSnapshots = [];
+let webMiuiDragBackLockCount = 0;
+let webMiuiDragBackSnapshot;
+function acquireWebHorizontalOverscrollLock() {
+    if (react_native_1.Platform.OS !== 'web')
+        return undefined;
+    const webDocument = globalThis.document;
+    const targets = [webDocument === null || webDocument === void 0 ? void 0 : webDocument.documentElement, webDocument === null || webDocument === void 0 ? void 0 : webDocument.body].filter((target) => Boolean(target));
+    if (targets.length === 0)
+        return undefined;
+    if (webHorizontalOverscrollLockCount === 0) {
+        webHorizontalOverscrollSnapshots = targets.map((target) => ({
+            previousValue: target.style.overscrollBehaviorX,
+            target,
+        }));
+    }
+    webHorizontalOverscrollLockCount += 1;
+    targets.forEach((target) => {
+        target.style.overscrollBehaviorX = 'none';
+    });
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        webHorizontalOverscrollLockCount = Math.max(webHorizontalOverscrollLockCount - 1, 0);
+        if (webHorizontalOverscrollLockCount > 0)
+            return;
+        webHorizontalOverscrollSnapshots.forEach(({ previousValue, target }) => {
+            if (target.style.overscrollBehaviorX === 'none') {
+                target.style.overscrollBehaviorX = previousValue;
+            }
+        });
+        webHorizontalOverscrollSnapshots = [];
+    };
+}
+function acquireWebMiuiDragBackLock() {
+    var _a;
+    if (react_native_1.Platform.OS !== 'web')
+        return undefined;
+    const webEnvironment = globalThis;
+    const { history: webHistory, location: webLocation, navigator: webNavigator } = webEnvironment;
+    if (!webHistory ||
+        !webLocation ||
+        !/MiuiBrowser/i.test((_a = webNavigator === null || webNavigator === void 0 ? void 0 : webNavigator.userAgent) !== null && _a !== void 0 ? _a : '')) {
+        return undefined;
+    }
+    if (webMiuiDragBackLockCount === 0) {
+        try {
+            const guardedUrl = new URL(webLocation.href);
+            if (guardedUrl.searchParams.get(MIUI_DRAG_BACK_QUERY_KEY) !== '0') {
+                const originalHref = webLocation.href;
+                guardedUrl.searchParams.set(MIUI_DRAG_BACK_QUERY_KEY, '0');
+                const guardedHref = guardedUrl.href;
+                webHistory.replaceState(webHistory.state, '', guardedHref);
+                webMiuiDragBackSnapshot = { guardedHref, originalHref };
+            }
+        }
+        catch {
+            // Ignore restricted history/URL environments and retain the standard Web gesture guards.
+        }
+    }
+    webMiuiDragBackLockCount += 1;
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        webMiuiDragBackLockCount = Math.max(webMiuiDragBackLockCount - 1, 0);
+        if (webMiuiDragBackLockCount > 0)
+            return;
+        const snapshot = webMiuiDragBackSnapshot;
+        webMiuiDragBackSnapshot = undefined;
+        if (!snapshot || webLocation.href !== snapshot.guardedHref)
+            return;
+        try {
+            webHistory.replaceState(webHistory.state, '', snapshot.originalHref);
+        }
+        catch {
+            // The browser may reject history writes after a route or document lifecycle change.
+        }
+    };
+}
+function resolveWebSliderInteractionStyle(canSlide) {
+    if (react_native_1.Platform.OS !== 'web')
+        return undefined;
+    return {
+        cursor: canSlide ? 'grab' : 'default',
+        overscrollBehaviorX: 'none',
+        touchAction: 'none',
+        userSelect: 'none',
+    };
+}
 const styles = react_native_1.StyleSheet.create({
     modalRoot: {
         ...react_native_1.StyleSheet.absoluteFillObject,
@@ -192,7 +289,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     sliderThumb: {
         position: 'absolute',
-        left: 0,
+        left: WEB_SLIDER_EDGE_GESTURE_INSET,
         width: SLIDER_THUMB_SIZE,
         height: SLIDER_THUMB_SIZE,
         borderRadius: SLIDER_THUMB_SIZE / 2,
@@ -265,7 +362,7 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
     const blockDisplayHeight = blockHeight * scale;
     const blockTop = Math.max(0, ((_a = challenge === null || challenge === void 0 ? void 0 : challenge.blockY) !== null && _a !== void 0 ? _a : 0) * scale);
     const maxBlockOffset = Math.max(canvasContentWidth - blockDisplayWidth, 0);
-    const maxThumbOffset = Math.max(canvasOuterWidth - SLIDER_THUMB_SIZE, 0);
+    const maxThumbOffset = Math.max(canvasOuterWidth - SLIDER_THUMB_SIZE - WEB_SLIDER_EDGE_GESTURE_INSET * 2, 0);
     const blockTranslateRatio = maxThumbOffset > 0 ? maxBlockOffset / maxThumbOffset : 0;
     const isBusy = status === 'loading' || status === 'verifying';
     const canSlide = visible && Boolean(challenge) && !isBusy;
@@ -292,6 +389,7 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
         opacity: 0.15,
         radius: (0, zkit_tools_1.wp)(4),
     }), [theme.colors.onSurface]);
+    const webSliderInteractionStyle = React.useMemo(() => resolveWebSliderInteractionStyle(canSlide), [canSlide]);
     const requestChallenge = React.useCallback(async (reason) => {
         if (!visibleRef.current)
             return;
@@ -476,6 +574,16 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
         });
         return () => subscription.remove();
     }, [onClose, visible]);
+    React.useEffect(() => {
+        if (!visible || react_native_1.Platform.OS !== 'web')
+            return;
+        const releaseHorizontalOverscrollLock = acquireWebHorizontalOverscrollLock();
+        const releaseMiuiDragBackLock = acquireWebMiuiDragBackLock();
+        return () => {
+            releaseMiuiDragBackLock === null || releaseMiuiDragBackLock === void 0 ? void 0 : releaseMiuiDragBackLock();
+            releaseHorizontalOverscrollLock === null || releaseHorizontalOverscrollLock === void 0 ? void 0 : releaseHorizontalOverscrollLock();
+        };
+    }, [visible]);
     const handleCanvasLayout = React.useCallback((event) => {
         const nextWidth = event.nativeEvent.layout.width;
         if (!Number.isFinite(nextWidth) || nextWidth <= 0)
@@ -521,6 +629,14 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
     const blockAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
         transform: [{ translateX: thumbX.value * blockTranslateRatio }],
     }));
+    const cancelCurrentDrag = React.useCallback(() => {
+        const startPosition = clamp(thumbStartRef.current, 0, maxThumbOffset);
+        thumbXRef.current = startPosition;
+        thumbX.value = (0, react_native_reanimated_1.withTiming)(startPosition, {
+            duration: SLIDER_CANCEL_DURATION,
+            easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+        });
+    }, [maxThumbOffset, thumbX]);
     const panResponder = React.useMemo(() => react_native_1.PanResponder.create({
         onStartShouldSetPanResponder: () => canSlide,
         onMoveShouldSetPanResponder: () => canSlide,
@@ -537,7 +653,10 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
         onPanResponderRelease: () => {
             void verifyCurrentChallenge();
         },
-    }), [canSlide, maxThumbOffset, thumbX, verifyCurrentChallenge]);
+        onPanResponderTerminate: cancelCurrentDrag,
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true,
+    }), [canSlide, cancelCurrentDrag, maxThumbOffset, thumbX, verifyCurrentChallenge]);
     if (!mounted)
         return null;
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "box-none", style: styles.modalRoot, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.overlayBackdrop, backdropAnimatedStyle] }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.overlayPressable, onPress: handleBackdropPress, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.cardContainer, cardAnimatedStyle], collapsable: false, renderToHardwareTextureAndroid: react_native_1.Platform.OS === 'android', shouldRasterizeIOS: react_native_1.Platform.OS === 'ios', needsOffscreenAlphaCompositing: react_native_1.Platform.OS === 'android', children: (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: [
@@ -584,6 +703,7 @@ function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChalleng
                                         ], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: styles.feedbackText, children: feedbackMessage }) })) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                     styles.sliderTrack,
                                     { backgroundColor: theme.colors.secondary, borderColor: theme.colors.border },
+                                    webSliderInteractionStyle,
                                 ], ...panResponder.panHandlers, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                                         styles.sliderThumb,
                                         thumbAnimatedStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkit-ui",
-  "version": "2.0.21",
+  "version": "2.0.23",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ui/NativeImagePreview/web/types.ts

@@ -73,7 +73,9 @@ export type NativeImagePreviewWebOpenOptions = {
   sourceObjectFit?: NativeImagePreviewWebObjectFit;
   sourceVisibility?: NativeImagePreviewWebSourceVisibility;
   theme?: NativeImagePreviewWebTheme;
+  /** Defaults to hidden for images and visible for videos. */
   closeButton?: boolean;
+  /** Hidden by default; set to true to show the current item position. */
   counter?: boolean;
   onChange?: (index: number, meta: NativeImagePreviewWebChangeMeta) => void;
   onClose?: (meta: NativeImagePreviewWebCloseMeta) => void;

package/src/ui/NativeImagePreview/web/viewer.ts

@@ -14,6 +14,7 @@ import type {
 } from './types';
 import {
   clamp,
+  intersectRects,
   isUsableRect,
   normalizeRect,
   rectFromDOMRect,
@@ -42,6 +43,7 @@ type GestureMode = 'none' | 'pan' | 'pinch' | 'swipe' | 'dismiss';
 
 const MAX_SCALE = 5;
 const DOUBLE_TAP_SCALE = 2.5;
+const DOUBLE_TAP_TIMEOUT = 280;
 const DRAG_DISMISS_DISTANCE = 72;
 const DRAG_DISMISS_MIN_FLING_DISTANCE = 24;
 const DRAG_DISMISS_VELOCITY = 520;
@@ -86,6 +88,9 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
   private previousHtmlOverflow = '';
   private viewportWidth = 1;
   private viewportHeight = 1;
+  private pendingTapCloseTimer: number | null = null;
+  private tapEligible = false;
+  private controlsVisible = false;
 
   async open(options: NativeImagePreviewWebOpenOptions): Promise<void> {
     if (this.openState) {
@@ -105,6 +110,8 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     this.slideStates = items.map(() => this.createSlideState());
     this.openState = true;
     this.closing = false;
+    this.tapEligible = false;
+    this.controlsVisible = false;
     this.captureViewportSize();
 
     this.lockDocumentScroll();
@@ -122,6 +129,8 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     if (!this.openState || this.closing) {
       return;
     }
+    this.cancelPendingTapClose(true);
+    this.tapEligible = false;
     this.closing = true;
     await this.performCloseTransition(reason);
     this.finishClose(reason);
@@ -180,13 +189,13 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     closeButton.type = 'button';
     closeButton.textContent = '×';
     closeButton.setAttribute('aria-label', 'Close image preview');
-    closeButton.hidden = this.options?.closeButton === false;
+    closeButton.hidden = true;
     closeButton.style.opacity = '0';
     root.append(closeButton);
 
     const counter = document.createElement('div');
     counter.className = 'native-image-preview-counter';
-    counter.hidden = this.options?.counter === false || this.items.length <= 1;
+    counter.hidden = this.options?.counter !== true || this.items.length <= 1;
     counter.style.opacity = '0';
     root.append(counter);
 
@@ -196,6 +205,7 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     this.track = track;
     this.closeButton = closeButton;
     this.counter = counter;
+    this.syncCloseButtonVisibility();
 
     root.addEventListener('pointerdown', this.handlePointerDown);
     root.addEventListener('pointermove', this.handlePointerMove);
@@ -342,26 +352,38 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
   }
 
   private showControls(): void {
-    if (this.closeButton && !this.closeButton.hidden) {
-      this.closeButton.style.opacity = '1';
-    }
+    this.controlsVisible = true;
+    this.syncCloseButtonVisibility();
     if (this.counter && !this.counter.hidden) {
       this.counter.style.opacity = '1';
     }
   }
 
   private hideControls(): void {
-    if (this.closeButton) {
-      this.closeButton.style.opacity = '0';
-    }
+    this.controlsVisible = false;
+    this.syncCloseButtonVisibility();
     if (this.counter) {
       this.counter.style.opacity = '0';
     }
   }
 
+  private syncCloseButtonVisibility(): void {
+    if (!this.closeButton) {
+      return;
+    }
+    const configuredVisibility = this.options?.closeButton;
+    const shouldShow = configuredVisibility
+      ?? this.items[this.index]?.type === 'video';
+    this.closeButton.hidden = !shouldShow;
+    this.closeButton.style.opacity = shouldShow && this.controlsVisible ? '1' : '0';
+  }
+
   private finishClose(reason: NativeImagePreviewWebCloseReason): void {
     const item = this.items[this.index] ?? null;
     const index = this.index;
+    this.cancelPendingTapClose(true);
+    this.tapEligible = false;
+    this.controlsVisible = false;
     this.restoreSourceElement();
     this.unlockDocumentScroll();
     this.unmount();
@@ -377,6 +399,7 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
   }
 
   private unmount(): void {
+    this.cancelPendingTapClose(true);
     const root = this.root;
     const closeButton = this.closeButton;
     if (!root) {
@@ -447,7 +470,7 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     }
     await waitForElementImage(element);
     const rect = rectFromElement(element);
-    if (!isUsableRect(rect)) {
+    if (!isUsableRect(rect) || !intersectRects(rect, this.viewportRect())) {
       return null;
     }
     const size = await this.resolveSharedMediaSize(item);
@@ -527,11 +550,13 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     if (this.closing || !this.root) {
       return;
     }
+    this.cancelPendingTapClose(false);
     const target = event.target as HTMLElement | null;
     if (this.shouldIgnorePointerStart(target, event)) {
       return;
     }
 
+    this.tapEligible = this.pointers.size === 0;
     this.root.setPointerCapture(event.pointerId);
     this.pointers.set(event.pointerId, { id: event.pointerId, x: event.clientX, y: event.clientY });
     this.downX = event.clientX;
@@ -542,6 +567,10 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     this.dragX = 0;
     this.dragY = 0;
     this.mode = this.pointers.size >= 2 ? 'pinch' : 'none';
+    if (this.mode === 'pinch') {
+      this.tapEligible = false;
+      this.cancelPendingTapClose(true);
+    }
     this.preparePinchIfNeeded();
   };
 
@@ -582,6 +611,7 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     this.pointers.set(event.pointerId, { id: event.pointerId, x: event.clientX, y: event.clientY });
 
     if (this.pointers.size >= 2) {
+      this.tapEligible = false;
       this.mode = 'pinch';
       this.applyPinch();
       return;
@@ -599,6 +629,8 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
       if (Math.hypot(dx, dy) < MODE_LOCK_DISTANCE) {
         return;
       }
+      this.tapEligible = false;
+      this.cancelPendingTapClose(true);
       if (state.scale > 1.02) {
         this.mode = 'pan';
       } else if (Math.abs(dy) > Math.abs(dx) * 1.15) {
@@ -631,6 +663,10 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     if (!this.pointers.has(event.pointerId)) {
       return;
     }
+    if (event.type === 'pointercancel') {
+      this.cancelActiveGesture();
+      return;
+    }
     const finalDx = event.clientX - this.downX;
     const finalDy = event.clientY - this.downY;
     this.pointers.delete(event.pointerId);
@@ -638,6 +674,7 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
       this.root.releasePointerCapture(event.pointerId);
     }
     if (this.pointers.size >= 2) {
+      this.tapEligible = false;
       this.preparePinchIfNeeded();
       return;
     }
@@ -670,10 +707,11 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     } else if (this.mode === 'swipe') {
       this.dragX = finalDx;
       this.finishSwipe(velocityX);
-    } else if (this.mode === 'none') {
+    } else if (this.mode === 'none' && this.tapEligible) {
       this.handleTap(event);
     }
 
+    this.tapEligible = false;
     this.mode = 'none';
     this.dragX = 0;
     this.dragY = 0;
@@ -684,6 +722,8 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
       return;
     }
     event.preventDefault();
+    this.tapEligible = false;
+    this.cancelPendingTapClose(true);
     const state = this.activeState();
     const nextScale = clamp(state.scale * (event.deltaY > 0 ? 0.92 : 1.08), 1, MAX_SCALE);
     state.scale = nextScale;
@@ -751,8 +791,15 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
 
   private handleTap(event: PointerEvent): void {
     const state = this.activeState();
+    const item = this.items[this.index];
+    if (item?.type !== 'image') {
+      state.lastTapAt = 0;
+      return;
+    }
+
     const now = performance.now();
-    if (now - state.lastTapAt < 280) {
+    if (state.lastTapAt > 0 && now - state.lastTapAt < DOUBLE_TAP_TIMEOUT) {
+      this.cancelPendingTapClose(false);
       state.scale = state.scale > 1.02 ? 1 : DOUBLE_TAP_SCALE;
       state.translateX = 0;
       state.translateY = 0;
@@ -762,6 +809,29 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
       return;
     }
     state.lastTapAt = now;
+    const tapIndex = this.index;
+    this.pendingTapCloseTimer = window.setTimeout(() => {
+      this.pendingTapCloseTimer = null;
+      const tapState = this.slideStates[tapIndex];
+      if (tapState) {
+        tapState.lastTapAt = 0;
+      }
+      if (this.openState && !this.closing && this.index === tapIndex) {
+        void this.close('backdrop');
+      }
+    }, DOUBLE_TAP_TIMEOUT);
+  }
+
+  private cancelPendingTapClose(resetTapState: boolean): void {
+    if (this.pendingTapCloseTimer !== null) {
+      window.clearTimeout(this.pendingTapCloseTimer);
+      this.pendingTapCloseTimer = null;
+    }
+    if (resetTapState) {
+      this.slideStates.forEach((state) => {
+        state.lastTapAt = 0;
+      });
+    }
   }
 
   private preparePinchIfNeeded(): void {
@@ -815,6 +885,8 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
   }
 
   private goTo(nextIndex: number, reason: 'api' | 'swipe'): void {
+    this.cancelPendingTapClose(true);
+    this.tapEligible = false;
     const clamped = clamp(nextIndex, 0, this.items.length - 1);
     const previousIndex = this.index;
     this.index = clamped;
@@ -822,6 +894,7 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
     this.resetSlideState(clamped);
     this.updateTrack(true);
     this.updateCounter();
+    this.syncCloseButtonVisibility();
     this.pauseInactiveVideos(clamped);
     if (previousIndex !== clamped) {
       this.syncHiddenSourceElement(clamped);
@@ -865,6 +938,8 @@ export class NativeImagePreviewWebViewer implements NativeImagePreviewWebControl
   }
 
   private cancelActiveGesture(): void {
+    this.cancelPendingTapClose(true);
+    this.tapEligible = false;
     if (!this.pointers.size && this.mode === 'none' && !this.dragX && !this.dragY) {
       return;
     }

package/src/ui/SliderCaptcha/README.md

@@ -8,6 +8,7 @@
   - 弹层展示
   - 图片缩放与坐标换算
   - 滑块拖拽与释放触发校验
+  - Web 端浏览器滚动、侧滑历史返回与 Android 边缘返回冲突规避（含小米浏览器原生横滑返回）
   - `loading / verifying / success / error` 状态反馈
   - 校验失败后的自动重载
 - 业务方负责：

package/src/ui/SliderCaptcha/index.tsx

@@ -37,6 +37,9 @@ const CARD_HORIZONTAL_PADDING = wp(24);
 const CANVAS_BORDER_WIDTH = wp(1);
 const CAPTCHA_LAYER_Z_INDEX = 4000;
 const SLIDER_THUMB_SIZE = wp(44);
+const WEB_SLIDER_EDGE_GESTURE_INSET = Platform.OS === 'web' ? wp(16) : 0;
+const MIUI_DRAG_BACK_QUERY_KEY = 'native_drag_back';
+const SLIDER_CANCEL_DURATION = 160;
 const CAPTCHA_ENTER_DURATION = 280;
 const CAPTCHA_EXIT_DURATION = 220;
 const CAPTCHA_CARD_OFFSET_Y = wp(18);
@@ -152,6 +155,142 @@ function getSafePositiveNumber(value: number | undefined, fallback: number) {
   return value;
 }
 
+type WebOverscrollTarget = {
+  style: {
+    overscrollBehaviorX: string;
+  };
+};
+
+type WebDocument = {
+  body?: WebOverscrollTarget;
+  documentElement?: WebOverscrollTarget;
+};
+
+type WebEnvironment = {
+  history?: {
+    replaceState: (data: unknown, unused: string, url?: string | null) => void;
+    state: unknown;
+  };
+  location?: {
+    href: string;
+  };
+  navigator?: {
+    userAgent?: string;
+  };
+};
+
+type WebOverscrollSnapshot = {
+  previousValue: string;
+  target: WebOverscrollTarget;
+};
+
+type WebMiuiDragBackSnapshot = {
+  guardedHref: string;
+  originalHref: string;
+};
+
+let webHorizontalOverscrollLockCount = 0;
+let webHorizontalOverscrollSnapshots: WebOverscrollSnapshot[] = [];
+let webMiuiDragBackLockCount = 0;
+let webMiuiDragBackSnapshot: WebMiuiDragBackSnapshot | undefined;
+
+function acquireWebHorizontalOverscrollLock() {
+  if (Platform.OS !== 'web') return undefined;
+
+  const webDocument = (globalThis as { document?: WebDocument }).document;
+  const targets = [webDocument?.documentElement, webDocument?.body].filter(
+    (target): target is WebOverscrollTarget => Boolean(target)
+  );
+  if (targets.length === 0) return undefined;
+
+  if (webHorizontalOverscrollLockCount === 0) {
+    webHorizontalOverscrollSnapshots = targets.map((target) => ({
+      previousValue: target.style.overscrollBehaviorX,
+      target,
+    }));
+  }
+
+  webHorizontalOverscrollLockCount += 1;
+  targets.forEach((target) => {
+    target.style.overscrollBehaviorX = 'none';
+  });
+
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    webHorizontalOverscrollLockCount = Math.max(webHorizontalOverscrollLockCount - 1, 0);
+    if (webHorizontalOverscrollLockCount > 0) return;
+
+    webHorizontalOverscrollSnapshots.forEach(({ previousValue, target }) => {
+      if (target.style.overscrollBehaviorX === 'none') {
+        target.style.overscrollBehaviorX = previousValue;
+      }
+    });
+    webHorizontalOverscrollSnapshots = [];
+  };
+}
+
+function acquireWebMiuiDragBackLock() {
+  if (Platform.OS !== 'web') return undefined;
+
+  const webEnvironment = globalThis as typeof globalThis & WebEnvironment;
+  const { history: webHistory, location: webLocation, navigator: webNavigator } = webEnvironment;
+  if (
+    !webHistory ||
+    !webLocation ||
+    !/MiuiBrowser/i.test(webNavigator?.userAgent ?? '')
+  ) {
+    return undefined;
+  }
+
+  if (webMiuiDragBackLockCount === 0) {
+    try {
+      const guardedUrl = new URL(webLocation.href);
+      if (guardedUrl.searchParams.get(MIUI_DRAG_BACK_QUERY_KEY) !== '0') {
+        const originalHref = webLocation.href;
+        guardedUrl.searchParams.set(MIUI_DRAG_BACK_QUERY_KEY, '0');
+        const guardedHref = guardedUrl.href;
+        webHistory.replaceState(webHistory.state, '', guardedHref);
+        webMiuiDragBackSnapshot = { guardedHref, originalHref };
+      }
+    } catch {
+      // Ignore restricted history/URL environments and retain the standard Web gesture guards.
+    }
+  }
+
+  webMiuiDragBackLockCount += 1;
+  let released = false;
+
+  return () => {
+    if (released) return;
+    released = true;
+    webMiuiDragBackLockCount = Math.max(webMiuiDragBackLockCount - 1, 0);
+    if (webMiuiDragBackLockCount > 0) return;
+
+    const snapshot = webMiuiDragBackSnapshot;
+    webMiuiDragBackSnapshot = undefined;
+    if (!snapshot || webLocation.href !== snapshot.guardedHref) return;
+
+    try {
+      webHistory.replaceState(webHistory.state, '', snapshot.originalHref);
+    } catch {
+      // The browser may reject history writes after a route or document lifecycle change.
+    }
+  };
+}
+
+function resolveWebSliderInteractionStyle(canSlide: boolean): StyleProp<ViewStyle> {
+  if (Platform.OS !== 'web') return undefined;
+
+  return {
+    cursor: canSlide ? 'grab' : 'default',
+    overscrollBehaviorX: 'none',
+    touchAction: 'none',
+    userSelect: 'none',
+  } as unknown as ViewStyle;
+}
+
 const styles = StyleSheet.create({
   modalRoot: {
     ...StyleSheet.absoluteFillObject,
@@ -255,7 +394,7 @@ const styles = StyleSheet.create({
   },
   sliderThumb: {
     position: 'absolute',
-    left: 0,
+    left: WEB_SLIDER_EDGE_GESTURE_INSET,
     width: SLIDER_THUMB_SIZE,
     height: SLIDER_THUMB_SIZE,
     borderRadius: SLIDER_THUMB_SIZE / 2,
@@ -352,7 +491,10 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
   const blockDisplayHeight = blockHeight * scale;
   const blockTop = Math.max(0, (challenge?.blockY ?? 0) * scale);
   const maxBlockOffset = Math.max(canvasContentWidth - blockDisplayWidth, 0);
-  const maxThumbOffset = Math.max(canvasOuterWidth - SLIDER_THUMB_SIZE, 0);
+  const maxThumbOffset = Math.max(
+    canvasOuterWidth - SLIDER_THUMB_SIZE - WEB_SLIDER_EDGE_GESTURE_INSET * 2,
+    0
+  );
   const blockTranslateRatio = maxThumbOffset > 0 ? maxBlockOffset / maxThumbOffset : 0;
   const isBusy = status === 'loading' || status === 'verifying';
   const canSlide = visible && Boolean(challenge) && !isBusy;
@@ -392,6 +534,10 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
       }),
     [theme.colors.onSurface]
   );
+  const webSliderInteractionStyle = React.useMemo(
+    () => resolveWebSliderInteractionStyle(canSlide),
+    [canSlide]
+  );
 
   const requestChallenge = React.useCallback(
     async (reason: SliderCaptchaLoadReason) => {
@@ -603,6 +749,18 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
     return () => subscription.remove();
   }, [onClose, visible]);
 
+  React.useEffect(() => {
+    if (!visible || Platform.OS !== 'web') return;
+
+    const releaseHorizontalOverscrollLock = acquireWebHorizontalOverscrollLock();
+    const releaseMiuiDragBackLock = acquireWebMiuiDragBackLock();
+
+    return () => {
+      releaseMiuiDragBackLock?.();
+      releaseHorizontalOverscrollLock?.();
+    };
+  }, [visible]);
+
   const handleCanvasLayout = React.useCallback((event: LayoutChangeEvent) => {
     const nextWidth = event.nativeEvent.layout.width;
     if (!Number.isFinite(nextWidth) || nextWidth <= 0) return;
@@ -654,6 +812,15 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
     transform: [{ translateX: thumbX.value * blockTranslateRatio }],
   }));
 
+  const cancelCurrentDrag = React.useCallback(() => {
+    const startPosition = clamp(thumbStartRef.current, 0, maxThumbOffset);
+    thumbXRef.current = startPosition;
+    thumbX.value = withTiming(startPosition, {
+      duration: SLIDER_CANCEL_DURATION,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [maxThumbOffset, thumbX]);
+
   const panResponder = React.useMemo(
     () =>
       PanResponder.create({
@@ -672,8 +839,11 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
         onPanResponderRelease: () => {
           void verifyCurrentChallenge();
         },
+        onPanResponderTerminate: cancelCurrentDrag,
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true,
       }),
-    [canSlide, maxThumbOffset, thumbX, verifyCurrentChallenge]
+    [canSlide, cancelCurrentDrag, maxThumbOffset, thumbX, verifyCurrentChallenge]
   );
 
   if (!mounted) return null;
@@ -809,6 +979,7 @@ export function SliderCaptcha<TChallenge extends SliderCaptchaChallenge = Slider
               style={[
                 styles.sliderTrack,
                 { backgroundColor: theme.colors.secondary, borderColor: theme.colors.border },
+                webSliderInteractionStyle,
               ]}
               {...panResponder.panHandlers}
             >