@greypan/web-ui 11.1.0 → 12.0.0

package/dist/components/image-preview/index.js

@@ -1,123 +1,234 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../classes/glass.js";
-import n from "../../icons/generated/lucide-chevron-left.js";
-import r from "../../icons/generated/lucide-chevron-right.js";
-import i from "../../icons/generated/lucide-plus.js";
-import a from "../../icons/generated/lucide-minus.js";
-import o from "../../icons/generated/ooui-close.js";
-import s from "../../icons/generated/radix-icons-reset.js";
+import glass_default from "../../classes/glass.js";
+import lucide_chevron_left_default from "../../icons/generated/lucide-chevron-left.js";
+import lucide_chevron_right_default from "../../icons/generated/lucide-chevron-right.js";
+import lucide_plus_default from "../../icons/generated/lucide-plus.js";
+import lucide_minus_default from "../../icons/generated/lucide-minus.js";
+import ooui_close_default from "../../icons/generated/ooui-close.js";
+import radix_icons_reset_default from "../../icons/generated/radix-icons-reset.js";
 import "../button/index.js";
-import { defineOpenOverlay as c } from "../../shared/overlay/open-overlay.js";
-import { getFallbackOverlayRoot as l } from "../../shared/overlay/overlay-root.js";
-import { findNearestTheme as u, findRootTheme as d } from "../../shared/overlay/theme-overlay-scope.js";
-import { defineScrollLockLease as f } from "../../shared/scroll-lock/scroll-lock.js";
-import p from "../../assets/modal-surface.js";
-import { defineNativeDialogPresence as m } from "../../shared/overlay/native-dialog-presence.js";
-import { attachDragGesture as h } from "../../shared/gesture/drag-gesture.js";
-import { clamp as g } from "../../shared/gesture/physics.js";
-import { attachPinchGesture as _ } from "../../shared/gesture/pinch-gesture.js";
-import v from "./style.js";
-import { LitElement as y, html as b, nothing as x, unsafeCSS as S } from "lit";
-import { customElement as C, property as w, state as T } from "lit/decorators.js";
-import { classMap as E } from "lit/directives/class-map.js";
-import { styleMap as D } from "lit/directives/style-map.js";
-//#region src/components/image-preview/index.ts
-var O = 1, k = 4, A = .5, j = .002, M = 3, N = .15, P = 320, F = 16, I = 160, L = 320, R = class extends y {
-	constructor(...e) {
-		super(...e), this.images = [], this.loop = !0, this.nav = !1, this.toolbar = !1, this.closable = !1, this.indicator = !1, this.swipe = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._open = !1, this._index = 0, this._scale = O, this._offsetX = 0, this._offsetY = 0, this._swipeOffset = 0, this._swipeSettling = !1, this._dragging = !1, this._loadedSources = /* @__PURE__ */ new Set(), this._swipeDir = 0, this._swipeStartTime = 0, this._swipeSettleCommit = !1, this._swipeSettleDir = 1, this._scrollLock = f().make(), this._overlay = c().make({
+import { resolveBuiltinLabelSet } from "../../shared/locale/builtin-labels.js";
+import { defineOpenOverlay } from "../../shared/overlay/open-overlay.js";
+import { getFallbackOverlayRoot } from "../../shared/overlay/overlay-root.js";
+import { findNearestTheme, findRootTheme } from "../../shared/overlay/theme-overlay-scope.js";
+import { defineScrollLockLease } from "../../shared/scroll-lock/scroll-lock.js";
+import modal_surface_default from "../../assets/modal-surface.js";
+import { defineNativeDialogPresence } from "../../shared/overlay/native-dialog-presence.js";
+import { attachDragGesture } from "../../shared/gesture/drag-gesture.js";
+import { clamp } from "../../shared/gesture/physics.js";
+import { attachPinchGesture } from "../../shared/gesture/pinch-gesture.js";
+import style_default from "./style.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+// src/components/image-preview/index.ts
+const MIN_SCALE = 1;
+const MAX_SCALE = 4;
+const ZOOM_STEP = .5;
+const WHEEL_ZOOM_SENSITIVITY = .002;
+const PAN_MOVE_THRESHOLD = 3;
+const SWIPE_DISTANCE_RATIO = .15;
+const SWIPE_VELOCITY = 320;
+const SWIPE_FLICK_DISTANCE = 16;
+const SWIPE_FLICK_VELOCITY = 160;
+const SWIPE_SETTLE_MS = 320;
+/**
+* 图像预览的内部宿主。对外只通过 `imagePreview()` 使用，因此不导出类、
+* 不注册 `HTMLElementTagNameMap`，避免形成声明式 tag 契约。
+*
+* 内部使用原生 `<dialog>.showModal()`，与 `<web-ui-dialog>` 共享
+* `native-dialog-presence` 与 `scroll-lock` 两个底层插件，而不是复用该组件：
+* 本组件需要自身铺满视口的 dialog（backdrop 即 dialog 背景）与自有指针交互，
+* 与 dialog 组件的玻璃卡片 / 插槽契约不同源。
+*/
+let WebUiImagePreview = class WebUiImagePreview extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.images = [];
+		this.loop = true;
+		this.nav = false;
+		this.toolbar = false;
+		this.closable = false;
+		this.indicator = false;
+		this.swipe = false;
+		this.noScrollLock = false;
+		this.noBackdropClose = false;
+		this._open = false;
+		this._index = 0;
+		this._scale = MIN_SCALE;
+		this._offsetX = 0;
+		this._offsetY = 0;
+		this._swipeOffset = 0;
+		this._swipeSettling = false;
+		this._dragging = false;
+		this._loadedSources = /* @__PURE__ */ new Set();
+		this._swipeDir = 0;
+		this._swipeStartTime = 0;
+		this._swipeSettleCommit = false;
+		this._swipeSettleDir = 1;
+		this._scrollLock = defineScrollLockLease().make();
+		this._overlay = defineOpenOverlay().make({
 			requestClose: () => this.close(),
 			isConnected: () => this.isConnected
-		}), this._handle = null, this._presence = m().make({
+		});
+		this._handle = null;
+		this._presence = defineNativeDialogPresence().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this._open
-		}), this._dismissed = !1, this._swipeGesture = !1, this._panOriginX = 0, this._panOriginY = 0, this._dragged = !1, this._blankPointerDown = !1, this._pinchScale = O, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
-			let t = e.currentTarget;
-			t && (this._markLoaded(t), this.requestUpdate());
-		}, this._handleCancel = (e) => {
-			e.preventDefault(), this.close();
-		}, this._handleNativeClose = () => {
+		});
+		this._dismissed = false;
+		this._swipeGesture = false;
+		this._panOriginX = 0;
+		this._panOriginY = 0;
+		this._dragged = false;
+		this._blankPointerDown = false;
+		this._pinchScale = MIN_SCALE;
+		this._pinchLocalX = 0;
+		this._pinchLocalY = 0;
+		this._handleImageSettled = (event) => {
+			const image = event.currentTarget;
+			if (!image) return;
+			this._markLoaded(image);
+			this.requestUpdate();
+		};
+		this._handleCancel = (event) => {
+			event.preventDefault();
+			this.close();
+		};
+		this._handleNativeClose = () => {
 			this._notifyDismissed();
-		}, this._handleTransitionEnd = (e) => {
-			this._presence.handleTransitionEnd(e);
-		}, this._handleKeydown = (e) => {
-			if (this._open && !e.defaultPrevented && !(e.altKey || e.ctrlKey || e.metaKey)) switch (e.key) {
+		};
+		this._handleTransitionEnd = (event) => {
+			this._presence.handleTransitionEnd(event);
+		};
+		this._handleKeydown = (event) => {
+			if (!this._open || event.defaultPrevented) return;
+			if (event.altKey || event.ctrlKey || event.metaKey) return;
+			switch (event.key) {
 				case "ArrowLeft":
-					e.preventDefault(), this.prev();
+					event.preventDefault();
+					this.prev();
 					break;
 				case "ArrowRight":
-					e.preventDefault(), this.next();
+					event.preventDefault();
+					this.next();
 					break;
 				case "+":
 				case "=":
-					e.preventDefault(), this.zoomIn();
+					event.preventDefault();
+					this.zoomIn();
 					break;
 				case "-":
 				case "_":
-					e.preventDefault(), this.zoomOut();
+					event.preventDefault();
+					this.zoomOut();
 					break;
-				case "0": e.preventDefault(), this.resetZoom();
+				case "0":
+					event.preventDefault();
+					this.resetZoom();
 			}
-		}, this._handleWheel = (e) => {
+		};
+		this._handleWheel = (event) => {
 			if (!this._open) return;
-			e.preventDefault();
-			let t = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY, n = this._stageOrigin();
-			this._zoomAt(this._scale * Math.exp(-t * j), e.clientX - n.x, e.clientY - n.y);
-		}, this._handleClick = (e) => {
+			event.preventDefault();
+			const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+			const origin = this._stageOrigin();
+			this._zoomAt(this._scale * Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY), event.clientX - origin.x, event.clientY - origin.y);
+		};
+		this._handleClick = (event) => {
 			if (!this._open) return;
-			let t = this._blankPointerDown;
-			if (this._blankPointerDown = !1, t && e.detail !== 0) {
-				if (this._dragged) {
-					this._dragged = !1;
-					return;
-				}
-				this.noBackdropClose || this.close();
+			const blank = this._blankPointerDown;
+			this._blankPointerDown = false;
+			if (!blank) return;
+			if (event.detail === 0) return;
+			if (this._dragged) {
+				this._dragged = false;
+				return;
 			}
-		}, this._handleDoubleClick = (e) => {
-			this._open && e.target === this._image && (this._scale > O ? this.resetZoom() : this._setScale(k / 2));
-		}, this._handlePinchStart = (e) => {
+			if (this.noBackdropClose) return;
+			this.close();
+		};
+		this._handleDoubleClick = (event) => {
+			if (!this._open || event.target !== this._image) return;
+			if (this._scale > MIN_SCALE) this.resetZoom();
+			else this._setScale(MAX_SCALE / 2);
+		};
+		this._handlePinchStart = (info) => {
+			if (!this._open) return;
+			this._endGesture();
+			this._dragging = true;
+			this._dragged = true;
+			const origin = this._stageOrigin();
+			this._pinchScale = this._scale;
+			this._pinchLocalX = (info.centerX - origin.x - this._offsetX) / this._scale;
+			this._pinchLocalY = (info.centerY - origin.y - this._offsetY) / this._scale;
+		};
+		this._handlePinchMove = (info) => {
 			if (!this._open) return;
-			this._endGesture(), this._dragging = !0, this._dragged = !0;
-			let t = this._stageOrigin();
-			this._pinchScale = this._scale, this._pinchLocalX = (e.centerX - t.x - this._offsetX) / this._scale, this._pinchLocalY = (e.centerY - t.y - this._offsetY) / this._scale;
-		}, this._handlePinchMove = (e) => {
+			const scale = clamp(this._pinchScale * info.ratio, MIN_SCALE, MAX_SCALE);
+			const origin = this._stageOrigin();
+			this._applyScale(scale, info.centerX - origin.x - this._pinchLocalX * scale, info.centerY - origin.y - this._pinchLocalY * scale);
+		};
+		this._handlePinchEnd = () => {
+			this._dragging = false;
+		};
+		this._handlePinchCancel = () => {
+			this._dragging = false;
+		};
+		this._handleSwipeSettleEnd = (event) => {
+			if (!this._swipeSettling || event.propertyName !== "transform") return;
+			this._finishSwipeSettle();
+		};
+		this._handlePointerDown = (event) => {
 			if (!this._open) return;
-			let t = g(this._pinchScale * e.ratio, O, k), n = this._stageOrigin();
-			this._applyScale(t, e.centerX - n.x - this._pinchLocalX * t, e.centerY - n.y - this._pinchLocalY * t);
-		}, this._handlePinchEnd = () => {
-			this._dragging = !1;
-		}, this._handlePinchCancel = () => {
-			this._dragging = !1;
-		}, this._handleSwipeSettleEnd = (e) => {
-			this._swipeSettling && e.propertyName === "transform" && this._finishSwipeSettle();
-		}, this._handlePointerDown = (e) => {
-			if (!this._open || (this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0, e.button !== 0 || e.isPrimary === !1)) return;
-			this._blankPointerDown = this._isBlank(e.target), this._dragged = !1;
-			let t = this._stage;
-			t && (e.target === t || t.contains(e.target)) && (this._swipeGesture = this._scale === O && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = h(e, {
+			this._cancelSwipeSettle();
+			this._swipeDir = 0;
+			this._swipeOffset = 0;
+			if (!(event.button === 0 && event.isPrimary !== false)) return;
+			this._blankPointerDown = this._isBlank(event.target);
+			this._dragged = false;
+			const stage = this._stage;
+			if (!stage || event.target !== stage && !stage.contains(event.target)) return;
+			this._swipeGesture = this._scale === MIN_SCALE && this.swipe && this.images.length > 1;
+			this._swipeStartTime = event.timeStamp;
+			this._panOriginX = this._offsetX;
+			this._panOriginY = this._offsetY;
+			this._gesture?.destroy();
+			this._gesture = attachDragGesture(event, {
 				axis: "both",
-				threshold: M,
-				onMove: (e) => {
-					this._swipeGesture ? (this._swipeOffset = e.deltaX, e.deltaX !== 0 && (this._swipeDir = e.deltaX < 0 ? 1 : -1)) : this._panTo(e.deltaX, e.deltaY);
+				threshold: PAN_MOVE_THRESHOLD,
+				onMove: (info) => {
+					if (this._swipeGesture) {
+						this._swipeOffset = info.deltaX;
+						if (info.deltaX !== 0) this._swipeDir = info.deltaX < 0 ? 1 : -1;
+					} else this._panTo(info.deltaX, info.deltaY);
 				},
-				onEnd: (e) => {
-					this._dragged = !0, this._dragging = !1, this._swipeGesture && this._settleSwipe(e.deltaX, e.velocityX, e.timeStamp);
+				onEnd: (info) => {
+					this._dragged = true;
+					this._dragging = false;
+					if (this._swipeGesture) this._settleSwipe(info.deltaX, info.velocityX, info.timeStamp);
 				},
 				onTap: () => {
-					this._dragging = !1;
+					this._dragging = false;
 				},
 				onCancel: () => {
-					this._dragging = !1, this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0;
+					this._dragging = false;
+					this._cancelSwipeSettle();
+					this._swipeDir = 0;
+					this._swipeOffset = 0;
 				}
-			}), this._dragging = !0);
+			});
+			this._dragging = true;
 		};
 	}
 	static {
 		this.styles = [
-			S(t),
-			S(p),
-			S(v)
+			unsafeCSS(glass_default),
+			unsafeCSS(modal_surface_default),
+			unsafeCSS(style_default)
 		];
 	}
 	get dialog() {
@@ -135,20 +246,36 @@ var O = 1, k = 4, A = .5, j = .002, M = 3, N = .15, P = 320, F = 16, I = 160, L
 	get scale() {
 		return this._scale;
 	}
-	configure(e) {
-		this.images = e.images, this.loop = e.loop, this.nav = e.nav, this.toolbar = e.toolbar, this.closable = e.closable, this.indicator = e.indicator, this.swipe = e.swipe, this.noScrollLock = e.noScrollLock, this.noBackdropClose = e.noBackdropClose, this._index = g(e.index, 0, Math.max(0, e.images.length - 1));
+	configure(options) {
+		this.images = options.images;
+		this.loop = options.loop;
+		this.nav = options.nav;
+		this.toolbar = options.toolbar;
+		this.closable = options.closable;
+		this.indicator = options.indicator;
+		this.swipe = options.swipe;
+		this.noScrollLock = options.noScrollLock;
+		this.noBackdropClose = options.noBackdropClose;
+		this.ariaLabels = options.ariaLabels;
+		this._index = clamp(options.index, 0, Math.max(0, options.images.length - 1));
 	}
 	show() {
-		this._open ||= (this._dismissed = !1, !0);
+		if (this._open) return;
+		this._dismissed = false;
+		this._open = true;
 	}
 	close() {
-		this._open &&= (this._endGesture(), !1);
-	}
-	goTo(e) {
-		let t = this.images.length;
-		if (t === 0) return;
-		let n = this.loop ? (e % t + t) % t : g(e, 0, t - 1);
-		n !== this._index && (this._index = n, this.resetZoom());
+		if (!this._open) return;
+		this._endGesture();
+		this._open = false;
+	}
+	goTo(target) {
+		const count = this.images.length;
+		if (count === 0) return;
+		const next = this.loop ? (target % count + count) % count : clamp(target, 0, count - 1);
+		if (next === this._index) return;
+		this._index = next;
+		this.resetZoom();
 	}
 	next() {
 		this.goTo(this._index + 1);
@@ -157,150 +284,261 @@ var O = 1, k = 4, A = .5, j = .002, M = 3, N = .15, P = 320, F = 16, I = 160, L
 		this.goTo(this._index - 1);
 	}
 	zoomIn() {
-		this._setScale(this._scale + A);
+		this._setScale(this._scale + ZOOM_STEP);
 	}
 	zoomOut() {
-		this._setScale(this._scale - A);
+		this._setScale(this._scale - ZOOM_STEP);
 	}
 	resetZoom() {
-		(this._scale !== O || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = O, this._offsetX = 0, this._offsetY = 0);
+		if (this._scale === MIN_SCALE && this._offsetX === 0 && this._offsetY === 0) return;
+		this._scale = MIN_SCALE;
+		this._offsetX = 0;
+		this._offsetY = 0;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._presence.reconcile(), this._syncScrollLock(), this._attachPinch(), this._reclaimIfOpen();
+		super.connectedCallback();
+		this._presence.reconcile();
+		this._syncScrollLock();
+		this._attachPinch();
+		this._reclaimIfOpen();
 	}
 	_reclaimIfOpen() {
 		if (!this._open || this._handle) return;
-		let e = this.dialog;
-		e && (this._handle = this._overlay.claim(e, { ancestryFrom: this }));
+		const dialog = this.dialog;
+		if (!dialog) return;
+		this._handle = this._overlay.claim(dialog, { ancestryFrom: this });
 	}
 	firstUpdated() {
 		this._attachPinch();
 	}
+	/**
+	* 双指缩放手势挂载。`firstUpdated` 整个生命周期只跑一次，而断连时会 destroy
+	* 并清空 `_pinch`，宿主被移出文档再接回后手势会永久失效——因此首连与重挂
+	* 共用本方法，重挂时补挂。
+	*/
 	_attachPinch() {
 		if (this._pinch) return;
-		let e = this._stage;
-		e && (this._pinch = _(e, {
+		const stage = this._stage;
+		if (!stage) return;
+		this._pinch = attachPinchGesture(stage, {
 			onStart: this._handlePinchStart,
 			onMove: this._handlePinchMove,
 			onEnd: this._handlePinchEnd,
 			onCancel: this._handlePinchCancel
-		}));
-	}
-	updated(e) {
-		if (super.updated(e), this.isConnected) {
-			if (e.has("_open")) {
-				this._presence.sync(this._open), this._open && window.getSelection()?.removeAllRanges();
-				let e = this.dialog;
-				e && (this._open ? (this._handle?.release(), this._handle = this._overlay.claim(e, { ancestryFrom: this })) : (this._handle?.release(), this._handle = null)), !this._open && !this.dialog?.open && queueMicrotask(() => this._notifyDismissed());
+		});
+	}
+	updated(props) {
+		super.updated(props);
+		if (!this.isConnected) return;
+		if (props.has("_open")) {
+			this._presence.sync(this._open);
+			if (this._open) window.getSelection()?.removeAllRanges();
+			const dialog = this.dialog;
+			if (dialog) {
+				if (this._open) {
+					this._handle?.release();
+					this._handle = this._overlay.claim(dialog, { ancestryFrom: this });
+				} else {
+					this._handle?.release();
+					this._handle = null;
+				}
 			}
-			(e.has("_open") || e.has("noScrollLock")) && this._syncScrollLock();
+			if (!this._open && !this.dialog?.open) queueMicrotask(() => this._notifyDismissed());
 		}
+		if (props.has("_open") || props.has("noScrollLock")) this._syncScrollLock();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._endGesture(), this._pinch?.destroy(), this._pinch = void 0, this._presence.dispose(), this._scrollLock.release(), this._handle?.release(), this._handle = null;
+		super.disconnectedCallback();
+		this._endGesture();
+		this._pinch?.destroy();
+		this._pinch = void 0;
+		this._presence.dispose();
+		this._scrollLock.release();
+		this._handle?.release();
+		this._handle = null;
 	}
 	_syncScrollLock() {
 		this._scrollLock.sync(this._open && !this.noScrollLock);
 	}
 	_notifyDismissed() {
-		this._dismissed || this._open || (this._dismissed = !0, this.dispatchEvent(new CustomEvent("preview-dismissed")));
-	}
-	_zoomAt(e, t, n) {
-		let r = g(e, O, k);
-		if (r === this._scale) return;
-		let i = r / this._scale;
-		this._applyScale(r, t - (t - this._offsetX) * i, n - (n - this._offsetY) * i);
-	}
-	_applyScale(e, t, n) {
-		if (this._scale = e, e === O) {
-			this._offsetX = 0, this._offsetY = 0;
+		if (this._dismissed || this._open) return;
+		this._dismissed = true;
+		this.dispatchEvent(new CustomEvent("preview-dismissed"));
+	}
+	/**
+	* 以锚点缩放：锚点是相对舞台中心的偏移，它覆盖的图片内容在缩放前后保持不动。
+	* 滚轮传光标位置，两指传两指中点，工具栏与键盘传 (0, 0)（即视口中心）。
+	*/
+	_zoomAt(next, anchorX, anchorY) {
+		const scale = clamp(next, MIN_SCALE, MAX_SCALE);
+		if (scale === this._scale) return;
+		const ratio = scale / this._scale;
+		this._applyScale(scale, anchorX - (anchorX - this._offsetX) * ratio, anchorY - (anchorY - this._offsetY) * ratio);
+	}
+	_applyScale(scale, offsetX, offsetY) {
+		this._scale = scale;
+		if (scale === MIN_SCALE) {
+			this._offsetX = 0;
+			this._offsetY = 0;
 			return;
 		}
-		this._offsetX = t, this._offsetY = n, this._clampOffsets();
+		this._offsetX = offsetX;
+		this._offsetY = offsetY;
+		this._clampOffsets();
 	}
-	_setScale(e) {
-		this._zoomAt(e, 0, 0);
+	_setScale(next) {
+		this._zoomAt(next, 0, 0);
 	}
+	/** 舞台中心的视口坐标；所有缩放锚点都以它为原点。 */
 	_stageOrigin() {
-		let e = this._stage;
-		if (!e) return {
+		const stage = this._stage;
+		if (!stage) return {
 			x: 0,
 			y: 0
 		};
-		let t = e.getBoundingClientRect();
+		const rect = stage.getBoundingClientRect();
 		return {
-			x: t.left + t.width / 2,
-			y: t.top + t.height / 2
+			x: rect.left + rect.width / 2,
+			y: rect.top + rect.height / 2
 		};
 	}
+	/**
+	* 平移边界 = 图片与舞台在缩放后「尺寸差」的一半。
+	*
+	* 图片比舞台大时它是「能露出多少边缘」，比舞台小时它是「能在视口内移动多远」——
+	* 两种情形是同一个绝对差，所以 1x 也能拖动，且图片永远拖不出视口。
+	* 图片只受 max-width/max-height 收缩（不放大），因此 offsetWidth/offsetHeight
+	* 就是绘制尺寸，不受 CSS transform 影响。
+	*/
 	_offsetBounds() {
-		let e = this._stage, t = this._image;
-		if (!e || !t) return {
+		const stage = this._stage;
+		const image = this._image;
+		if (!stage || !image) return {
 			x: 0,
 			y: 0
 		};
-		let n = t.offsetWidth, r = t.offsetHeight;
-		return !n || !r ? {
+		const width = image.offsetWidth;
+		const height = image.offsetHeight;
+		if (!width || !height) return {
 			x: 0,
 			y: 0
-		} : {
-			x: Math.abs(n * this._scale - e.clientWidth) / 2,
-			y: Math.abs(r * this._scale - e.clientHeight) / 2
+		};
+		return {
+			x: Math.abs(width * this._scale - stage.clientWidth) / 2,
+			y: Math.abs(height * this._scale - stage.clientHeight) / 2
 		};
 	}
+	/** 当前是否存在位移。1x 也能平移，因此「重置缩放」是否可用不能只看倍率。 */
 	get _isPanned() {
 		return this._offsetX !== 0 || this._offsetY !== 0;
 	}
 	_clampOffsets() {
-		let e = this._offsetBounds();
-		this._offsetX = g(this._offsetX, -e.x, e.x), this._offsetY = g(this._offsetY, -e.y, e.y);
-	}
-	_isBlank(e) {
-		return e === this.dialog || e === this._stage;
-	}
-	_markLoaded(e) {
-		let t = this.images[Number(e.dataset.index)]?.src;
-		t !== void 0 && this._loadedSources.add(t);
+		const bounds = this._offsetBounds();
+		this._offsetX = clamp(this._offsetX, -bounds.x, bounds.x);
+		this._offsetY = clamp(this._offsetY, -bounds.y, bounds.y);
+	}
+	/**
+	* 空白 = dialog 本体或未被图片 / 控件覆盖的舞台区域。
+	*
+	* 只能在 pointerdown（指针捕获生效前）判定：一旦舞台通过 setPointerCapture
+	* 取得捕获，后续 click 的 target 会被重定向到舞台，用它判断会把「点图片」
+	* 误判成「点空白」而关闭 overlay。
+	*/
+	_isBlank(target) {
+		return target === this.dialog || target === this._stage;
+	}
+	/**
+	* 登记加载完成的图片，键与 render 侧 `is-loaded` 的查询同源。
+	*
+	* 不能用 `image.src`：那是 IDL 属性，返回**相对 src 解析后的绝对 URL**，而查询用的是
+	* `this.images[i].src`（调用方原始串）。相对 src 下两者永不相等 → `is-loaded` 永不
+	* 施加 → 图片停在 `opacity: 0`，尽管 img 早已 `complete`。
+	*
+	* 所属下标由模板写在 `data-index` 上（与该 img 的 `src` 出自同一处），因此多图 /
+	* lazy 渲染下不会错位。
+	*/
+	_markLoaded(image) {
+		const src = this.images[Number(image.dataset.index)]?.src;
+		if (src !== void 0) this._loadedSources.add(src);
 	}
 	_endGesture() {
-		this._gesture?.destroy(), this._gesture = void 0, this._dragging = !1, this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0;
-	}
-	_adjacentIndex(e) {
-		let t = this.images.length;
-		if (t <= 1) return -1;
-		if (this.loop) return ((this._index + e) % t + t) % t;
-		let n = this._index + e;
-		return n >= 0 && n < t ? n : -1;
-	}
+		this._gesture?.destroy();
+		this._gesture = void 0;
+		this._dragging = false;
+		this._cancelSwipeSettle();
+		this._swipeDir = 0;
+		this._swipeOffset = 0;
+	}
+	/** 轮播滑动的相邻图索引；单图没有相邻图，多图 loop 环绕，非 loop 越界返回 -1。 */
+	_adjacentIndex(dir) {
+		const count = this.images.length;
+		if (count <= 1) return -1;
+		if (this.loop) return ((this._index + dir) % count + count) % count;
+		const target = this._index + dir;
+		return target >= 0 && target < count ? target : -1;
+	}
+	/** 取消未完成的滑入/回位过渡（新手势、pointercancel、关闭等接管时）。 */
 	_cancelSwipeSettle() {
-		this._swipeSettleTimer !== void 0 && (clearTimeout(this._swipeSettleTimer), this._swipeSettleTimer = void 0), this._swipeSettling = !1, this._swipeSettleCommit = !1, this._swipeSettleDir = 1;
+		if (this._swipeSettleTimer !== void 0) {
+			clearTimeout(this._swipeSettleTimer);
+			this._swipeSettleTimer = void 0;
+		}
+		this._swipeSettling = false;
+		this._swipeSettleCommit = false;
+		this._swipeSettleDir = 1;
 	}
+	/** 滑入/回位过渡结束：按目标提交索引切换，或复位到单图静止态。 */
 	_finishSwipeSettle() {
 		if (this._swipeSettleTimer === void 0) return;
-		clearTimeout(this._swipeSettleTimer), this._swipeSettleTimer = void 0;
-		let e = this._swipeSettleCommit, t = this._swipeSettleDir;
-		this._swipeSettling = !1, this._swipeSettleCommit = !1, this._swipeDir = 0, this._swipeOffset = 0, e && this._commitSwipeTo(t);
-	}
-	_commitSwipeTo(e) {
-		let t = this._adjacentIndex(e);
-		t < 0 || t === this._index || (this._index = t, this.resetZoom());
-	}
-	_settleSwipe(e, t, n) {
-		let r = this._swipeDir, i = this._stage?.clientWidth ?? 0;
-		if (r === 0 || i <= 0) {
+		clearTimeout(this._swipeSettleTimer);
+		this._swipeSettleTimer = void 0;
+		const commit = this._swipeSettleCommit;
+		const dir = this._swipeSettleDir;
+		this._swipeSettling = false;
+		this._swipeSettleCommit = false;
+		this._swipeDir = 0;
+		this._swipeOffset = 0;
+		if (commit) this._commitSwipeTo(dir);
+	}
+	/** 把当前索引切换到相邻图；相邻图在滑动期间已在 DOM 中呈现，提交后直接以已加载态展示，避免重复淡入闪烁。 */
+	_commitSwipeTo(dir) {
+		const target = this._adjacentIndex(dir);
+		if (target < 0 || target === this._index) return;
+		this._index = target;
+		this.resetZoom();
+	}
+	/** 释放后的滑入/回位：把 _swipeOffset 从跟手位移过渡到目标位（越界滑入相邻图，否则回 0）。 */
+	_settleSwipe(deltaX, velocityX, endTime) {
+		const dir = this._swipeDir;
+		const stageW = this._stage?.clientWidth ?? 0;
+		if (dir === 0 || stageW <= 0) {
 			this._swipeOffset = 0;
 			return;
 		}
-		let a = Math.max(1, Math.round(i * N)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= P || Math.abs(e) >= F && Math.max(Math.abs(t), Math.abs(s)) >= I) && this._adjacentIndex(r) !== -1;
-		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), L);
-	}
-	_panTo(e, t) {
-		let n = this._offsetBounds();
-		this._offsetX = g(this._panOriginX + e, -n.x, n.x), this._offsetY = g(this._panOriginY + t, -n.y, n.y);
+		const distanceThreshold = Math.max(1, Math.round(stageW * SWIPE_DISTANCE_RATIO));
+		const spanMs = endTime - this._swipeStartTime;
+		const fullSpanVelocity = spanMs >= 2 ? deltaX / spanMs * 1e3 : 0;
+		const commit = (Math.abs(deltaX) >= distanceThreshold || Math.abs(velocityX) >= SWIPE_VELOCITY || Math.abs(deltaX) >= SWIPE_FLICK_DISTANCE && Math.max(Math.abs(velocityX), Math.abs(fullSpanVelocity)) >= SWIPE_FLICK_VELOCITY) && this._adjacentIndex(dir) !== -1;
+		this._swipeSettling = true;
+		this._swipeSettleCommit = commit;
+		this._swipeSettleDir = dir;
+		this._swipeOffset = commit ? -dir * stageW : 0;
+		this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), SWIPE_SETTLE_MS);
+	}
+	_panTo(deltaX, deltaY) {
+		const bounds = this._offsetBounds();
+		this._offsetX = clamp(this._panOriginX + deltaX, -bounds.x, bounds.x);
+		this._offsetY = clamp(this._panOriginY + deltaY, -bounds.y, bounds.y);
 	}
 	render() {
-		let e = this.images.length, t = this._scale > O, c = e > 0 ? this._adjacentIndex(-1) : -1, l = e > 0 ? this._adjacentIndex(1) : -1, u = `translate3d(${this._swipeOffset}px, 0, 0)`, d = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`, f = t ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
-		return b`
+		const count = this.images.length;
+		const zoomed = this._scale > MIN_SCALE;
+		const prevIndex = count > 0 ? this._adjacentIndex(-1) : -1;
+		const nextIndex = count > 0 ? this._adjacentIndex(1) : -1;
+		const trackTransform = `translate3d(${this._swipeOffset}px, 0, 0)`;
+		const imageTransform = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`;
+		const neighborTransform = zoomed ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
+		return html`
       <dialog
         aria-label="Image preview"
         @cancel=${this._handleCancel}
@@ -316,201 +554,234 @@ var O = 1, k = 4, A = .5, j = .002, M = 3, N = .15, P = 320, F = 16, I = 160, L
         <div class="wui-image-preview-content">
           <div class="wui-image-preview-surface">
             <div
-              class=${E({
-			"wui-image-preview-stage": !0,
-			"is-zoomed": t,
+              class=${classMap({
+			"wui-image-preview-stage": true,
+			"is-zoomed": zoomed,
 			"is-dragging": this._dragging,
 			"is-settling": this._swipeSettling
 		})}
             >
               <div
                 class="wui-image-preview-track"
-                style=${D({ transform: u })}
+                style=${styleMap({ transform: trackTransform })}
                 @transitionend=${this._handleSwipeSettleEnd}
               >
-                ${c >= 0 ? b`
+                ${prevIndex >= 0 ? html`
                         <div class="wui-image-preview-slide is-prev" aria-hidden="true">
                           <img
-                            class=${E({
-			"wui-image-preview-image": !0,
-			"is-loaded": this._loadedSources.has(this.images[c].src)
+                            class=${classMap({
+			"wui-image-preview-image": true,
+			"is-loaded": this._loadedSources.has(this.images[prevIndex].src)
 		})}
-                            data-index=${c}
-                            src=${this.images[c].src}
-                            alt=${this.images[c].alt ?? ""}
+                            data-index=${prevIndex}
+                            src=${this.images[prevIndex].src}
+                            alt=${this.images[prevIndex].alt ?? ""}
                             draggable="false"
-                            style=${D({ transform: f })}
+                            style=${styleMap({ transform: neighborTransform })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : x}
-                ${e > 0 ? b`
+                      ` : nothing}
+                ${count > 0 ? html`
                         <div class="wui-image-preview-slide is-current">
                           <img
-                            class=${E({
-			"wui-image-preview-image": !0,
+                            class=${classMap({
+			"wui-image-preview-image": true,
 			"is-loaded": this._loadedSources.has(this.images[this._index].src)
 		})}
                             data-index=${this._index}
                             src=${this.images[this._index].src}
                             alt=${this.images[this._index].alt ?? ""}
                             draggable="false"
-                            style=${D({ transform: d })}
+                            style=${styleMap({ transform: imageTransform })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : x}
-                ${l >= 0 ? b`
+                      ` : nothing}
+                ${nextIndex >= 0 ? html`
                         <div class="wui-image-preview-slide is-next" aria-hidden="true">
                           <img
-                            class=${E({
-			"wui-image-preview-image": !0,
-			"is-loaded": this._loadedSources.has(this.images[l].src)
+                            class=${classMap({
+			"wui-image-preview-image": true,
+			"is-loaded": this._loadedSources.has(this.images[nextIndex].src)
 		})}
-                            data-index=${l}
-                            src=${this.images[l].src}
-                            alt=${this.images[l].alt ?? ""}
+                            data-index=${nextIndex}
+                            src=${this.images[nextIndex].src}
+                            alt=${this.images[nextIndex].alt ?? ""}
                             draggable="false"
-                            style=${D({ transform: f })}
+                            style=${styleMap({ transform: neighborTransform })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : x}
+                      ` : nothing}
               </div>
             </div>
           </div>
           <div class="wui-image-preview-controls">
-            ${this.indicator ? b`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
-                    >${this._index + 1} / ${e}</span
-                  >` : x}
-            ${this.closable ? b`
+            ${this.indicator ? html`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
+                    >${this._index + 1} / ${count}</span
+                  >` : nothing}
+            ${this.closable ? html`
                     <web-ui-button
                       class="wui-image-preview-close"
                       variant="glass"
                       icon
                       size="36"
-                      aria-label="Close"
+                      aria-label=${resolveBuiltinLabelSet(this.ariaLabels, "close")}
                       @click=${this.close}
                     >
-                      <web-ui-icon size="16" .icon=${o}></web-ui-icon>
+                      <web-ui-icon size="16" .icon=${ooui_close_default}></web-ui-icon>
                     </web-ui-button>
-                  ` : x}
-            ${this.nav && e > 1 ? b`
+                  ` : nothing}
+            ${this.nav && count > 1 ? html`
                     <web-ui-button
                       class="wui-image-preview-nav wui-image-preview-nav-prev"
                       variant="glass"
                       icon
                       size="44"
-                      aria-label="Previous image"
+                      aria-label=${resolveBuiltinLabelSet(this.ariaLabels, "previousImage")}
                       ?disabled=${!this.loop && this._index === 0}
                       @click=${this.prev}
                     >
-                      <web-ui-icon size="20" .icon=${n}></web-ui-icon>
+                      <web-ui-icon size="20" .icon=${lucide_chevron_left_default}></web-ui-icon>
                     </web-ui-button>
                     <web-ui-button
                       class="wui-image-preview-nav wui-image-preview-nav-next"
                       variant="glass"
                       icon
                       size="44"
-                      aria-label="Next image"
-                      ?disabled=${!this.loop && this._index === e - 1}
+                      aria-label=${resolveBuiltinLabelSet(this.ariaLabels, "nextImage")}
+                      ?disabled=${!this.loop && this._index === count - 1}
                       @click=${this.next}
                     >
-                      <web-ui-icon size="20" .icon=${r}></web-ui-icon>
+                      <web-ui-icon size="20" .icon=${lucide_chevron_right_default}></web-ui-icon>
                     </web-ui-button>
-                  ` : x}
-            ${this.toolbar ? b`
+                  ` : nothing}
+            ${this.toolbar ? html`
                     <div class="wui-image-preview-toolbar wui-glass">
                       <web-ui-button
                         variant="glass"
                         icon
                         size="30"
-                        aria-label="Zoom out"
-                        ?disabled=${this._scale <= O}
+                        aria-label=${resolveBuiltinLabelSet(this.ariaLabels, "zoomOut")}
+                        ?disabled=${this._scale <= MIN_SCALE}
                         @click=${this.zoomOut}
                       >
-                        <web-ui-icon size="16" .icon=${a}></web-ui-icon>
+                        <web-ui-icon size="16" .icon=${lucide_minus_default}></web-ui-icon>
                       </web-ui-button>
                       <span class="wui-image-preview-scale">${Math.round(this._scale * 100)}%</span>
                       <web-ui-button
                         variant="glass"
                         icon
                         size="30"
-                        aria-label="Zoom in"
-                        ?disabled=${this._scale >= k}
+                        aria-label=${resolveBuiltinLabelSet(this.ariaLabels, "zoomIn")}
+                        ?disabled=${this._scale >= MAX_SCALE}
                         @click=${this.zoomIn}
                       >
-                        <web-ui-icon size="16" .icon=${i}></web-ui-icon>
+                        <web-ui-icon size="16" .icon=${lucide_plus_default}></web-ui-icon>
                       </web-ui-button>
                       <web-ui-button
                         variant="glass"
                         icon
                         size="30"
-                        aria-label="Reset zoom"
-                        ?disabled=${this._scale <= O && !this._isPanned}
+                        aria-label=${resolveBuiltinLabelSet(this.ariaLabels, "resetZoom")}
+                        ?disabled=${this._scale <= MIN_SCALE && !this._isPanned}
                         @click=${this.resetZoom}
                       >
-                        <web-ui-icon size="16" .icon=${s}></web-ui-icon>
+                        <web-ui-icon size="16" .icon=${radix_icons_reset_default}></web-ui-icon>
                       </web-ui-button>
                     </div>
-                  ` : x}
+                  ` : nothing}
           </div>
         </div>
       </dialog>
     `;
 	}
 };
-e([w({ attribute: !1 })], R.prototype, "images", void 0), e([w({ attribute: !1 })], R.prototype, "loop", void 0), e([w({ attribute: !1 })], R.prototype, "nav", void 0), e([w({ attribute: !1 })], R.prototype, "toolbar", void 0), e([w({ attribute: !1 })], R.prototype, "closable", void 0), e([w({ attribute: !1 })], R.prototype, "indicator", void 0), e([w({ attribute: !1 })], R.prototype, "swipe", void 0), e([w({ attribute: !1 })], R.prototype, "noScrollLock", void 0), e([w({ attribute: !1 })], R.prototype, "noBackdropClose", void 0), e([T()], R.prototype, "_open", void 0), e([T()], R.prototype, "_index", void 0), e([T()], R.prototype, "_scale", void 0), e([T()], R.prototype, "_offsetX", void 0), e([T()], R.prototype, "_offsetY", void 0), e([T()], R.prototype, "_swipeOffset", void 0), e([T()], R.prototype, "_swipeSettling", void 0), e([T()], R.prototype, "_dragging", void 0), R = e([C("web-ui-image-preview")], R);
-function z(e) {
-	let t = (e.images ?? []).map((e) => ({
-		src: e.src,
-		alt: e.alt ?? ""
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "images", void 0);
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "loop", void 0);
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "nav", void 0);
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "toolbar", void 0);
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "closable", void 0);
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "indicator", void 0);
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "swipe", void 0);
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "noScrollLock", void 0);
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "noBackdropClose", void 0);
+__decorate([property({ attribute: false })], WebUiImagePreview.prototype, "ariaLabels", void 0);
+__decorate([state()], WebUiImagePreview.prototype, "_open", void 0);
+__decorate([state()], WebUiImagePreview.prototype, "_index", void 0);
+__decorate([state()], WebUiImagePreview.prototype, "_scale", void 0);
+__decorate([state()], WebUiImagePreview.prototype, "_offsetX", void 0);
+__decorate([state()], WebUiImagePreview.prototype, "_offsetY", void 0);
+__decorate([state()], WebUiImagePreview.prototype, "_swipeOffset", void 0);
+__decorate([state()], WebUiImagePreview.prototype, "_swipeSettling", void 0);
+__decorate([state()], WebUiImagePreview.prototype, "_dragging", void 0);
+WebUiImagePreview = __decorate([customElement("web-ui-image-preview")], WebUiImagePreview);
+/**
+* 打开一个命令式 image preview。
+*
+* 组件挂载到目标 `web-ui-theme` 的 overlay 容器（无主题作用域时回退到全局
+* fallback root），返回的 handle 是唯一的控制入口。所有展示类 option 默认关闭，
+* 默认只渲染图片本身。
+*/
+function imagePreview(options) {
+	const images = (options.images ?? []).map((item) => ({
+		src: item.src,
+		alt: item.alt ?? ""
 	}));
-	if (t.length === 0) throw Error("[web-ui-image-preview] imagePreview requires at least one image");
-	let n = e.target ? u(e.target) : d(), r = e.container ?? n?.getOverlayRoot() ?? l(), i = document.createElement("web-ui-image-preview");
-	i.configure({
-		images: t,
-		index: e.index ?? 0,
-		loop: e.loop ?? !0,
-		nav: e.nav ?? !1,
-		toolbar: e.toolbar ?? !1,
-		closable: e.closable ?? !1,
-		indicator: e.indicator ?? !1,
-		swipe: e.swipe ?? !1,
-		noScrollLock: e.noScrollLock ?? !1,
-		noBackdropClose: e.noBackdropClose ?? !1
+	if (images.length === 0) throw new Error("[web-ui-image-preview] imagePreview requires at least one image");
+	const theme = options.target ? findNearestTheme(options.target) : findRootTheme();
+	const container = options.container ?? theme?.getOverlayRoot() ?? getFallbackOverlayRoot();
+	const element = document.createElement("web-ui-image-preview");
+	element.configure({
+		images,
+		index: options.index ?? 0,
+		loop: options.loop ?? true,
+		nav: options.nav ?? false,
+		toolbar: options.toolbar ?? false,
+		closable: options.closable ?? false,
+		indicator: options.indicator ?? false,
+		swipe: options.swipe ?? false,
+		noScrollLock: options.noScrollLock ?? false,
+		noBackdropClose: options.noBackdropClose ?? false,
+		ariaLabels: options.ariaLabels
 	});
-	let a, o = new Promise((e) => {
-		a = e;
+	let settle;
+	const closed = new Promise((resolve) => {
+		settle = resolve;
 	});
-	return i.addEventListener("preview-dismissed", () => {
-		i.remove(), a?.(), a = void 0;
-	}, { once: !0 }), r.appendChild(i), i.show(), {
+	element.addEventListener("preview-dismissed", () => {
+		element.remove();
+		settle?.();
+		settle = void 0;
+	}, { once: true });
+	container.appendChild(element);
+	element.show();
+	return {
 		get index() {
-			return i.index;
+			return element.index;
 		},
 		get scale() {
-			return i.scale;
+			return element.scale;
 		},
 		get images() {
-			return i.images;
+			return element.images;
 		},
 		get closed() {
-			return o;
+			return closed;
 		},
-		next: () => i.next(),
-		prev: () => i.prev(),
-		goTo: (e) => i.goTo(e),
-		zoomIn: () => i.zoomIn(),
-		zoomOut: () => i.zoomOut(),
-		resetZoom: () => i.resetZoom(),
-		close: () => i.close()
+		next: () => element.next(),
+		prev: () => element.prev(),
+		goTo: (index) => element.goTo(index),
+		zoomIn: () => element.zoomIn(),
+		zoomOut: () => element.zoomOut(),
+		resetZoom: () => element.resetZoom(),
+		close: () => element.close()
 	};
 }
-//#endregion
-export { z as imagePreview };
+export { imagePreview };
 
 //# sourceMappingURL=index.js.map