@feugene/granularity 0.11.0 → 0.12.0

package/dist/components/GrImageViewer/chunks/{GrImageViewer-OCUIrNh2.js → GrImageViewer-Dla9IBkd.js}

@@ -1,6 +1,250 @@
 import { t as useGranularityTranslations } from "../../../chunks/granularityI18n-DoV7Ca2m.js";
-import { n as he, o as Ye, r as Ge, t as Se } from "../../../chunks/transition-TLFw4KBn.js";
+import { i as Ge, n as Se, r as he, s as Ye, t as useScrollLock } from "../../../chunks/useScrollLock-K7kaP2Ud.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";
+//#region src/components/GrImageViewer/composables/useZoomPan.ts
+var TRAILING_ZERO_DECIMAL_RE = /\.0$/;
+function formatPercent(value) {
+	if (Number.isInteger(value)) return String(value);
+	return value.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, "");
+}
+/**
+* useZoomPan — состояние и логика масштаба/поворота/панорамирования картинки,
+* а также метрики (натуральный/вписанный/фактический размер, реальный масштаб).
+* Вынесено из монолитного `GrImageViewer.vue`.
+*/
+function useZoomPan(options) {
+	const scale = ref(1);
+	const rotation = ref(0);
+	const offsetX = ref(0);
+	const offsetY = ref(0);
+	const isDragging = ref(false);
+	let dragStartX = 0;
+	let dragStartY = 0;
+	let dragOffsetStartX = 0;
+	let dragOffsetStartY = 0;
+	const naturalWidth = ref(0);
+	const naturalHeight = ref(0);
+	const fittedWidth = ref(0);
+	const fittedHeight = ref(0);
+	let resizeObserver = null;
+	const imageStyle = computed(() => ({ transform: `translate3d(${offsetX.value}px, ${offsetY.value}px, 0) scale(${scale.value}) rotate(${rotation.value}deg)` }));
+	const zoomValueText = computed(() => formatPercent(scale.value * 100));
+	const renderedWidth = computed(() => Math.round(fittedWidth.value * scale.value));
+	const renderedHeight = computed(() => Math.round(fittedHeight.value * scale.value));
+	const realScale = computed(() => {
+		if (!naturalWidth.value) return 0;
+		return fittedWidth.value * scale.value / naturalWidth.value;
+	});
+	const realScalePercent = computed(() => formatPercent(realScale.value * 100));
+	function setScale(value) {
+		const clamped = Math.min(options.maxScale(), Math.max(options.minScale(), value));
+		scale.value = Number(clamped.toFixed(4));
+	}
+	function zoomIn() {
+		setScale(scale.value * options.zoomRate());
+	}
+	function zoomOut() {
+		setScale(scale.value / options.zoomRate());
+	}
+	function rotateLeft() {
+		rotation.value -= 90;
+		options.onRotate(rotation.value);
+	}
+	function rotateRight() {
+		rotation.value += 90;
+		options.onRotate(rotation.value);
+	}
+	function resetTransform() {
+		scale.value = 1;
+		rotation.value = 0;
+		offsetX.value = 0;
+		offsetY.value = 0;
+		isDragging.value = false;
+	}
+	function resetImageMetrics() {
+		naturalWidth.value = 0;
+		naturalHeight.value = 0;
+		fittedWidth.value = 0;
+		fittedHeight.value = 0;
+	}
+	function measureFitted() {
+		const el = options.imageEl.value;
+		if (!el) return;
+		fittedWidth.value = el.offsetWidth;
+		fittedHeight.value = el.offsetHeight;
+	}
+	function onImageLoad(event) {
+		const el = event.target;
+		naturalWidth.value = el.naturalWidth;
+		naturalHeight.value = el.naturalHeight;
+		measureFitted();
+	}
+	function startObservingImage() {
+		const el = options.imageEl.value;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		if (!resizeObserver) resizeObserver = new ResizeObserver(() => measureFitted());
+		resizeObserver.observe(el);
+		if (el.complete && el.naturalWidth) {
+			naturalWidth.value = el.naturalWidth;
+			naturalHeight.value = el.naturalHeight;
+		}
+		measureFitted();
+	}
+	function stopObservingImage() {
+		resizeObserver?.disconnect();
+	}
+	function onPointerDown(event) {
+		if (!options.draggable() || event.button !== 0) return;
+		event.preventDefault();
+		isDragging.value = true;
+		dragStartX = event.clientX;
+		dragStartY = event.clientY;
+		dragOffsetStartX = offsetX.value;
+		dragOffsetStartY = offsetY.value;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+	}
+	function onPointerMove(event) {
+		if (!isDragging.value) return;
+		offsetX.value = dragOffsetStartX + (event.clientX - dragStartX);
+		offsetY.value = dragOffsetStartY + (event.clientY - dragStartY);
+	}
+	function onPointerUp(event) {
+		if (!isDragging.value) return;
+		isDragging.value = false;
+		event.currentTarget.releasePointerCapture?.(event.pointerId);
+	}
+	return {
+		scale,
+		rotation,
+		offsetX,
+		offsetY,
+		isDragging,
+		naturalWidth,
+		naturalHeight,
+		fittedWidth,
+		fittedHeight,
+		imageStyle,
+		zoomValueText,
+		renderedWidth,
+		renderedHeight,
+		realScale,
+		realScalePercent,
+		setScale,
+		zoomIn,
+		zoomOut,
+		rotateLeft,
+		rotateRight,
+		resetTransform,
+		resetImageMetrics,
+		measureFitted,
+		onImageLoad,
+		startObservingImage,
+		stopObservingImage,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp
+	};
+}
+//#endregion
+//#region src/components/GrImageViewer/composables/useWheelGesture.ts
+var WHEEL_ZOOM_SENSITIVITY = .0015;
+var WHEEL_IDLE_MS = 120;
+/**
+* useWheelGesture — масштабирование колесом мыши / жестом трекпада с батчингом
+* по `requestAnimationFrame` (рендер не чаще кадра — без «дёрганья»/наслоения) и
+* временным отключением CSS-перехода на время жеста (`isWheelZooming`).
+*/
+function useWheelGesture(options) {
+	const isWheelZooming = ref(false);
+	let pendingWheelDelta = 0;
+	let wheelFrameId = null;
+	let wheelIdleTimer = null;
+	function cancelWheelFrame() {
+		if (wheelFrameId !== null) {
+			cancelAnimationFrame(wheelFrameId);
+			wheelFrameId = null;
+		}
+	}
+	function endWheelZoom() {
+		if (wheelIdleTimer !== null) {
+			clearTimeout(wheelIdleTimer);
+			wheelIdleTimer = null;
+		}
+		isWheelZooming.value = false;
+		pendingWheelDelta = 0;
+		cancelWheelFrame();
+	}
+	function flushWheelZoom() {
+		wheelFrameId = null;
+		const delta = pendingWheelDelta;
+		pendingWheelDelta = 0;
+		if (!delta) return;
+		const factor = Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY);
+		options.applyZoomFactor(factor);
+	}
+	function onWheel(event) {
+		if (!options.enabled()) return;
+		event.preventDefault();
+		isWheelZooming.value = true;
+		pendingWheelDelta += event.deltaY;
+		if (wheelFrameId === null) wheelFrameId = requestAnimationFrame(flushWheelZoom);
+		if (wheelIdleTimer !== null) clearTimeout(wheelIdleTimer);
+		wheelIdleTimer = setTimeout(() => {
+			wheelIdleTimer = null;
+			isWheelZooming.value = false;
+		}, WHEEL_IDLE_MS);
+	}
+	return {
+		isWheelZooming,
+		onWheel,
+		endWheelZoom
+	};
+}
+//#endregion
+//#region src/components/GrImageViewer/composables/useViewerKeyboard.ts
+/**
+* useViewerKeyboard — клавиатурное управление просмотрщиком:
+* Esc — закрыть, стрелки — переключение, `+`/`-`/`0` — зум/сброс.
+*/
+function useViewerKeyboard(options) {
+	const { actions } = options;
+	function onKeydown(event) {
+		switch (event.key) {
+			case "Escape":
+				if (!options.closeOnEscape()) return;
+				event.preventDefault();
+				actions.close();
+				return;
+			case "ArrowLeft":
+				event.preventDefault();
+				actions.prev();
+				return;
+			case "ArrowRight":
+				event.preventDefault();
+				actions.next();
+				return;
+			case "+":
+			case "=":
+			case "Add":
+				event.preventDefault();
+				actions.zoomIn();
+				return;
+			case "-":
+			case "_":
+			case "Subtract":
+				event.preventDefault();
+				actions.zoomOut();
+				return;
+			case "0":
+				event.preventDefault();
+				actions.reset();
+				break;
+			default:
+		}
+	}
+	return { onKeydown };
+}
+//#endregion
 //#region src/components/GrImageViewer/GrImageViewer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "fixed inset-0 overflow-hidden" };
 var _hoisted_2 = { class: "pointer-events-none absolute inset-x-0 top-0 z-30 px-3 py-3 sm:px-6" };
@@ -39,8 +283,6 @@ var _hoisted_19 = {
 var _hoisted_20 = ["aria-label"];
 var _hoisted_21 = ["aria-label"];
 var DEFAULT_Z_INDEX = 2e3;
-var WHEEL_ZOOM_SENSITIVITY = .0015;
-var WHEEL_IDLE_MS = 120;
 //#endregion
 //#region src/components/GrImageViewer/GrImageViewer.vue
 var GrImageViewer_default = /* @__PURE__ */ defineComponent({
@@ -106,114 +348,37 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 		const resolvedRotateRightLabel = computed(() => props.rotateRightLabel ?? t("gr.imageViewer.rotateRight", "Rotate right"));
 		const resolvedEmptyText = computed(() => props.emptyText ?? t("gr.imageViewer.empty", "No image"));
 		const emit = __emit;
-		const TRAILING_ZERO_DECIMAL_RE = /\.0$/;
 		const open = computed(() => props.modelValue);
+		const isClient = typeof window !== "undefined";
+		const { lock: lockBodyScroll, unlock: unlockBodyScroll } = useScrollLock();
 		const total = computed(() => props.urlList.length);
 		const hasImages = computed(() => total.value > 0);
 		const currentIndex = ref(0);
-		const scale = ref(1);
-		const rotation = ref(0);
-		const offsetX = ref(0);
-		const offsetY = ref(0);
 		const imageEl = ref(null);
-		const isWheelZooming = ref(false);
-		let pendingWheelDelta = 0;
-		let wheelFrameId = null;
-		let wheelIdleTimer = null;
-		const isDragging = ref(false);
-		let dragStartX = 0;
-		let dragStartY = 0;
-		let dragOffsetStartX = 0;
-		let dragOffsetStartY = 0;
-		const naturalWidth = ref(0);
-		const naturalHeight = ref(0);
-		const fittedWidth = ref(0);
-		const fittedHeight = ref(0);
-		let resizeObserver = null;
-		const currentUrl = computed(() => {
-			if (!hasImages.value) return;
-			return props.urlList[currentIndex.value];
+		const { scale, rotation, isDragging, naturalWidth, naturalHeight, renderedWidth, renderedHeight, realScale, realScalePercent, imageStyle, zoomValueText, setScale, zoomIn, zoomOut, rotateLeft, rotateRight, resetTransform, resetImageMetrics, onImageLoad, startObservingImage, stopObservingImage, onPointerDown, onPointerMove, onPointerUp } = useZoomPan({
+			minScale: () => props.minScale,
+			maxScale: () => props.maxScale,
+			zoomRate: () => props.zoomRate,
+			draggable: () => props.draggable,
+			imageEl,
+			onRotate: (deg) => emit("rotate", deg)
 		});
-		const displayIndex = computed(() => {
-			if (!hasImages.value) return 0;
-			return currentIndex.value + 1;
+		const { isWheelZooming, onWheel, endWheelZoom } = useWheelGesture({
+			enabled: () => props.wheelZoom && hasImages.value,
+			applyZoomFactor: (factor) => setScale(scale.value * factor)
 		});
+		const currentUrl = computed(() => hasImages.value ? props.urlList[currentIndex.value] : void 0);
+		const displayIndex = computed(() => hasImages.value ? currentIndex.value + 1 : 0);
 		const viewerStyle = computed(() => ({ zIndex: String(Number.isFinite(props.zIndex) ? props.zIndex : DEFAULT_Z_INDEX) }));
-		const imageStyle = computed(() => ({ transform: `translate3d(${offsetX.value}px, ${offsetY.value}px, 0) scale(${scale.value}) rotate(${rotation.value}deg)` }));
 		const imageTransitionClass = computed(() => isWheelZooming.value || isDragging.value ? "" : "transition-transform duration-150 ease-out");
 		const imageCursorClass = computed(() => {
 			if (!props.draggable) return "";
 			return isDragging.value ? "cursor-grabbing" : "cursor-grab";
 		});
-		function formatPercent(value) {
-			if (Number.isInteger(value)) return String(value);
-			return value.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, "");
-		}
-		const zoomValueText = computed(() => formatPercent(scale.value * 100));
-		const renderedWidth = computed(() => Math.round(fittedWidth.value * scale.value));
-		const renderedHeight = computed(() => Math.round(fittedHeight.value * scale.value));
-		const realScale = computed(() => {
-			if (!naturalWidth.value) return 0;
-			return fittedWidth.value * scale.value / naturalWidth.value;
-		});
-		const realScalePercent = computed(() => formatPercent(realScale.value * 100));
-		const toolbarSlotProps = computed(() => ({
-			index: currentIndex.value,
-			displayIndex: displayIndex.value,
-			total: total.value,
-			scale: scale.value,
-			rotation: rotation.value,
-			naturalWidth: naturalWidth.value,
-			naturalHeight: naturalHeight.value,
-			renderedWidth: renderedWidth.value,
-			renderedHeight: renderedHeight.value,
-			realScale: realScale.value,
-			realScalePercent: realScalePercent.value,
-			actions: toolbarActions
-		}));
 		function normalizeIndex(value) {
 			if (!hasImages.value) return 0;
 			return ((Number.isFinite(value) ? Math.trunc(value) : 0) % total.value + total.value) % total.value;
 		}
-		function resetTransform() {
-			scale.value = 1;
-			rotation.value = 0;
-			offsetX.value = 0;
-			offsetY.value = 0;
-			isDragging.value = false;
-		}
-		function resetImageMetrics() {
-			naturalWidth.value = 0;
-			naturalHeight.value = 0;
-			fittedWidth.value = 0;
-			fittedHeight.value = 0;
-		}
-		function measureFitted() {
-			const el = imageEl.value;
-			if (!el) return;
-			fittedWidth.value = el.offsetWidth;
-			fittedHeight.value = el.offsetHeight;
-		}
-		function onImageLoad(event) {
-			const el = event.target;
-			naturalWidth.value = el.naturalWidth;
-			naturalHeight.value = el.naturalHeight;
-			measureFitted();
-		}
-		function startObservingImage() {
-			const el = imageEl.value;
-			if (!el || typeof ResizeObserver === "undefined") return;
-			if (!resizeObserver) resizeObserver = new ResizeObserver(() => measureFitted());
-			resizeObserver.observe(el);
-			if (el.complete && el.naturalWidth) {
-				naturalWidth.value = el.naturalWidth;
-				naturalHeight.value = el.naturalHeight;
-			}
-			measureFitted();
-		}
-		function stopObservingImage() {
-			resizeObserver?.disconnect();
-		}
 		function setIndex(nextIndex, options) {
 			const normalizedIndex = normalizeIndex(nextIndex);
 			if (normalizedIndex === currentIndex.value) return;
@@ -250,79 +415,6 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 		function next() {
 			setIndex(currentIndex.value + 1);
 		}
-		function setScale(value) {
-			const clamped = Math.min(props.maxScale, Math.max(props.minScale, value));
-			scale.value = Number(clamped.toFixed(4));
-		}
-		function zoomIn() {
-			setScale(scale.value * props.zoomRate);
-		}
-		function zoomOut() {
-			setScale(scale.value / props.zoomRate);
-		}
-		function cancelWheelFrame() {
-			if (wheelFrameId !== null) {
-				cancelAnimationFrame(wheelFrameId);
-				wheelFrameId = null;
-			}
-		}
-		function endWheelZoom() {
-			if (wheelIdleTimer !== null) {
-				clearTimeout(wheelIdleTimer);
-				wheelIdleTimer = null;
-			}
-			isWheelZooming.value = false;
-			pendingWheelDelta = 0;
-			cancelWheelFrame();
-		}
-		function flushWheelZoom() {
-			wheelFrameId = null;
-			const delta = pendingWheelDelta;
-			pendingWheelDelta = 0;
-			if (!delta) return;
-			const factor = Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY);
-			setScale(scale.value * factor);
-		}
-		function onWheel(event) {
-			if (!props.wheelZoom || !hasImages.value) return;
-			event.preventDefault();
-			isWheelZooming.value = true;
-			pendingWheelDelta += event.deltaY;
-			if (wheelFrameId === null) wheelFrameId = requestAnimationFrame(flushWheelZoom);
-			if (wheelIdleTimer !== null) clearTimeout(wheelIdleTimer);
-			wheelIdleTimer = setTimeout(() => {
-				wheelIdleTimer = null;
-				isWheelZooming.value = false;
-			}, WHEEL_IDLE_MS);
-		}
-		function onPointerDown(event) {
-			if (!props.draggable || !hasImages.value || event.button !== 0) return;
-			event.preventDefault();
-			isDragging.value = true;
-			dragStartX = event.clientX;
-			dragStartY = event.clientY;
-			dragOffsetStartX = offsetX.value;
-			dragOffsetStartY = offsetY.value;
-			event.currentTarget.setPointerCapture?.(event.pointerId);
-		}
-		function onPointerMove(event) {
-			if (!isDragging.value) return;
-			offsetX.value = dragOffsetStartX + (event.clientX - dragStartX);
-			offsetY.value = dragOffsetStartY + (event.clientY - dragStartY);
-		}
-		function onPointerUp(event) {
-			if (!isDragging.value) return;
-			isDragging.value = false;
-			event.currentTarget.releasePointerCapture?.(event.pointerId);
-		}
-		function rotateLeft() {
-			rotation.value -= 90;
-			emit("rotate", rotation.value);
-		}
-		function rotateRight() {
-			rotation.value += 90;
-			emit("rotate", rotation.value);
-		}
 		const toolbarActions = {
 			close: closeViewer,
 			prev,
@@ -333,51 +425,44 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 			rotateLeft,
 			rotateRight
 		};
+		const toolbarSlotProps = computed(() => ({
+			index: currentIndex.value,
+			displayIndex: displayIndex.value,
+			total: total.value,
+			scale: scale.value,
+			rotation: rotation.value,
+			naturalWidth: naturalWidth.value,
+			naturalHeight: naturalHeight.value,
+			renderedWidth: renderedWidth.value,
+			renderedHeight: renderedHeight.value,
+			realScale: realScale.value,
+			realScalePercent: realScalePercent.value,
+			actions: toolbarActions
+		}));
 		function onBackdropClick() {
 			if (!props.hideOnClickModal) return;
 			closeViewer();
 		}
-		function onKeydown(event) {
-			switch (event.key) {
-				case "Escape":
-					if (!props.closeOnPressEscape) return;
-					event.preventDefault();
-					closeViewer();
-					return;
-				case "ArrowLeft":
-					event.preventDefault();
-					prev();
-					return;
-				case "ArrowRight":
-					event.preventDefault();
-					next();
-					return;
-				case "+":
-				case "=":
-				case "Add":
-					event.preventDefault();
-					zoomIn();
-					return;
-				case "-":
-				case "_":
-				case "Subtract":
-					event.preventDefault();
-					zoomOut();
-					return;
-				case "0":
-					event.preventDefault();
-					resetTransform();
-					break;
-				default:
+		const { onKeydown } = useViewerKeyboard({
+			closeOnEscape: () => props.closeOnPressEscape,
+			actions: {
+				close: closeViewer,
+				prev,
+				next,
+				zoomIn,
+				zoomOut,
+				reset: resetTransform
 			}
-		}
+		});
 		watch(() => props.modelValue, async (isOpen) => {
 			if (!isOpen) {
+				unlockBodyScroll();
 				stopObservingImage();
 				endWheelZoom();
 				isDragging.value = false;
 				return;
 			}
+			lockBodyScroll();
 			syncIndexFromInitial();
 			await nextTick();
 			startObservingImage();
@@ -396,11 +481,15 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 			preloadAt(normalizeIndex(index + 1));
 		}, { immediate: true });
 		onBeforeUnmount(() => {
+			unlockBodyScroll();
 			stopObservingImage();
 			endWheelZoom();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(unref(Se), {
+			return openBlock(), createBlock(Teleport, {
+				to: "body",
+				disabled: !isClient
+			}, [createVNode(unref(Se), {
 				show: open.value,
 				as: "template"
 			}, {
@@ -411,7 +500,7 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 					role: "dialog",
 					"aria-modal": "true",
 					static: true,
-					onKeydown
+					onKeydown: unref(onKeydown)
 				}, {
 					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(he), {
 						as: "template",
@@ -444,19 +533,19 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 							tabindex: "-1"
 						}, {
 							default: withCtx(() => [
-								createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [__props.showProgress ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(displayIndex.value) + " / " + toDisplayString(total.value), 1)) : createCommentVNode("", true), __props.showZoomValue ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(zoomValueText.value) + "% ", 1)) : createCommentVNode("", true)]), createElementVNode("button", {
+								createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [__props.showProgress ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(displayIndex.value) + " / " + toDisplayString(total.value), 1)) : createCommentVNode("", true), __props.showZoomValue ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(unref(zoomValueText)) + "% ", 1)) : createCommentVNode("", true)]), createElementVNode("button", {
 									type: "button",
 									"data-gr-image-viewer-close": "",
 									"aria-label": resolvedCloseLabel.value,
 									class: "h-11 w-11 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
 									onClick: closeViewer
-								}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
+								}, [..._cache[11] || (_cache[11] = [createElementVNode("span", {
 									"aria-hidden": "true",
 									class: "text-lg leading-none"
 								}, "✕", -1)])], 8, _hoisted_7)])]),
 								createElementVNode("div", {
 									class: "relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20",
-									onWheel
+									onWheel: _cache[5] || (_cache[5] = (...args) => unref(onWheel) && unref(onWheel)(...args))
 								}, [
 									total.value > 1 ? (openBlock(), createElementBlock("button", {
 										key: 0,
@@ -465,7 +554,7 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 										"aria-label": resolvedPrevLabel.value,
 										class: "absolute left-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:left-6",
 										onClick: prev
-									}, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
+									}, [..._cache[12] || (_cache[12] = [createElementVNode("span", {
 										"aria-hidden": "true",
 										class: "text-xl leading-none"
 									}, "‹", -1)])], 8, _hoisted_8)) : createCommentVNode("", true),
@@ -476,7 +565,7 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 										"aria-label": resolvedNextLabel.value,
 										class: "absolute right-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:right-6",
 										onClick: next
-									}, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
+									}, [..._cache[13] || (_cache[13] = [createElementVNode("span", {
 										"aria-hidden": "true",
 										class: "text-xl leading-none"
 									}, "›", -1)])], 8, _hoisted_9)) : createCommentVNode("", true),
@@ -489,12 +578,12 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 										alt: "",
 										draggable: "false",
 										class: normalizeClass(["max-h-full max-w-full select-none object-contain will-change-transform", [imageTransitionClass.value, imageCursorClass.value]]),
-										style: normalizeStyle(imageStyle.value),
-										onLoad: onImageLoad,
-										onPointerdown: onPointerDown,
-										onPointermove: onPointerMove,
-										onPointerup: onPointerUp,
-										onPointercancel: onPointerUp
+										style: normalizeStyle(unref(imageStyle)),
+										onLoad: _cache[0] || (_cache[0] = (...args) => unref(onImageLoad) && unref(onImageLoad)(...args)),
+										onPointerdown: _cache[1] || (_cache[1] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args)),
+										onPointermove: _cache[2] || (_cache[2] = (...args) => unref(onPointerMove) && unref(onPointerMove)(...args)),
+										onPointerup: _cache[3] || (_cache[3] = (...args) => unref(onPointerUp) && unref(onPointerUp)(...args)),
+										onPointercancel: _cache[4] || (_cache[4] = (...args) => unref(onPointerUp) && unref(onPointerUp)(...args))
 									}, null, 46, _hoisted_11)) : (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(resolvedEmptyText.value), 1))])
 								], 32),
 								createElementVNode("div", _hoisted_13, [createElementVNode("div", _hoisted_14, [renderSlot(_ctx.$slots, "toolbar", normalizeProps(guardReactiveProps(toolbarSlotProps.value)), () => [createElementVNode("div", _hoisted_15, [
@@ -503,29 +592,29 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 										"data-gr-image-viewer-zoom-out": "",
 										"aria-label": resolvedZoomOutLabel.value,
 										class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: zoomOut
+										onClick: _cache[6] || (_cache[6] = (...args) => unref(zoomOut) && unref(zoomOut)(...args))
 									}, " − ", 8, _hoisted_16),
 									createElementVNode("button", {
 										type: "button",
 										"data-gr-image-viewer-zoom-reset": "",
 										"aria-label": resolvedResetZoomLabel.value,
 										class: "h-11 min-w-11 px-3 flex items-center justify-center rounded-full text-xs font-700 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: resetTransform
+										onClick: _cache[7] || (_cache[7] = (...args) => unref(resetTransform) && unref(resetTransform)(...args))
 									}, " 100% ", 8, _hoisted_17),
 									createElementVNode("button", {
 										type: "button",
 										"data-gr-image-viewer-zoom-in": "",
 										"aria-label": resolvedZoomInLabel.value,
 										class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: zoomIn
+										onClick: _cache[8] || (_cache[8] = (...args) => unref(zoomIn) && unref(zoomIn)(...args))
 									}, " + ", 8, _hoisted_18),
 									_ctx.$slots["toolbar-actions"] ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-										_cache[3] || (_cache[3] = createElementVNode("div", {
+										_cache[14] || (_cache[14] = createElementVNode("div", {
 											class: "mx-1 h-6 w-px bg-white/25",
 											"aria-hidden": "true"
 										}, null, -1)),
 										renderSlot(_ctx.$slots, "toolbar-actions", normalizeProps(guardReactiveProps(toolbarSlotProps.value))),
-										_cache[4] || (_cache[4] = createElementVNode("div", {
+										_cache[15] || (_cache[15] = createElementVNode("div", {
 											class: "mx-1 h-6 w-px bg-white/25",
 											"aria-hidden": "true"
 										}, null, -1))
@@ -535,14 +624,14 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 										"data-gr-image-viewer-rotate-left": "",
 										"aria-label": resolvedRotateLeftLabel.value,
 										class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: rotateLeft
+										onClick: _cache[9] || (_cache[9] = (...args) => unref(rotateLeft) && unref(rotateLeft)(...args))
 									}, " ↺ ", 8, _hoisted_20),
 									createElementVNode("button", {
 										type: "button",
 										"data-gr-image-viewer-rotate-right": "",
 										"aria-label": resolvedRotateRightLabel.value,
 										class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: rotateRight
+										onClick: _cache[10] || (_cache[10] = (...args) => unref(rotateRight) && unref(rotateRight)(...args))
 									}, " ↻ ", 8, _hoisted_21)
 								])])])])
 							]),
@@ -551,9 +640,9 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 						_: 3
 					})])]),
 					_: 3
-				}, 8, ["style"])]),
+				}, 8, ["style", "onKeydown"])]),
 				_: 3
-			}, 8, ["show"])]);
+			}, 8, ["show"])], 8, ["disabled"]);
 		};
 	}
 });