From 1c7fe6394807a09e2e353bc6e5e91ebed8e74604 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Mon, 8 Jun 2026 12:21:04 +0100
Subject: [PATCH 1/9] feat(Viewer): add zoom and pan to image viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Install panzoom library (9.4.4, 6 kB) and apply it to the image
viewer wrapper in ViewerHandlerImages.vue:

- Scroll wheel to zoom in/out (1× – 8×)
- Drag to pan when zoomed in
- Double-click to zoom in 3× at cursor, double-click again to reset
- Auto-center image when zoom returns to 1×
- Pan blocked at minimum zoom to prevent accidental shifts
- Cursor changes: zoom-in at 1×, grab/grabbing when zoomed

Fixes #1535

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 package-lock.json                             |  72 +++++++++
 package.json                                  |   1 +
 .../renderer/Viewer/ViewerHandlerImages.vue   | 137 ++++++++++++++++--
 3 files changed, 200 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 306ade85a..4c0386397 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "electron-squirrel-startup": "^1.0.1",
         "howler": "^2.2.4",
         "mri": "^1.2.0",
+        "panzoom": "^9.4.4",
         "pinia": "^4.0.2",
         "semver": "^7.8.5",
         "unzip-crx-3": "^0.2.0",
@@ -5144,6 +5145,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/amator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+      "integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+      "license": "MIT",
+      "dependencies": {
+        "bezier-easing": "^2.0.3"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-5.0.0.tgz",
@@ -5449,6 +5459,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==",
+      "license": "MIT"
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "dev": true,
@@ -12012,6 +12028,12 @@
       "integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA==",
       "license": "MIT"
     },
+    "node_modules/ngraph.events": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.4.0.tgz",
+      "integrity": "sha512-NeDGI4DSyjBNBRtA86222JoYietsmCXbs8CEB0dZ51Xeh4lhVl1y3wpWLumczvnha8sFQIW4E0vvVWwgmX2mGw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -12646,6 +12668,17 @@
       "version": "1.0.11",
       "license": "(MIT AND Zlib)"
     },
+    "node_modules/panzoom": {
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.4.tgz",
+      "integrity": "sha512-r1KfkNZvsBw59IPq7Yy+GWZnZE1YCG/t7aG6caSkij/TBqdxTzmxNTm/lHf3h6qlVMFisIGIO+lgS2Ym23PIoA==",
+      "license": "MIT",
+      "dependencies": {
+        "amator": "^1.1.0",
+        "ngraph.events": "^1.2.2",
+        "wheel": "^1.0.0"
+      }
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -16543,6 +16576,12 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/wheel": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+      "integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "dev": true,
@@ -20051,6 +20090,14 @@
       "integrity": "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==",
       "dev": true
     },
+    "amator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+      "integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+      "requires": {
+        "bezier-easing": "^2.0.3"
+      }
+    },
     "ansi-escapes": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-5.0.0.tgz",
@@ -20250,6 +20297,11 @@
       "version": "0.6.1",
       "dev": true
     },
+    "bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "big.js": {
       "version": "5.2.2",
       "dev": true
@@ -24596,6 +24648,11 @@
       "resolved": "https://registry.npmjs.org/nested-property/-/nested-property-4.0.0.tgz",
       "integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA=="
     },
+    "ngraph.events": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.4.0.tgz",
+      "integrity": "sha512-NeDGI4DSyjBNBRtA86222JoYietsmCXbs8CEB0dZ51Xeh4lhVl1y3wpWLumczvnha8sFQIW4E0vvVWwgmX2mGw=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -25008,6 +25065,16 @@
     "pako": {
       "version": "1.0.11"
     },
+    "panzoom": {
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.4.tgz",
+      "integrity": "sha512-r1KfkNZvsBw59IPq7Yy+GWZnZE1YCG/t7aG6caSkij/TBqdxTzmxNTm/lHf3h6qlVMFisIGIO+lgS2Ym23PIoA==",
+      "requires": {
+        "amator": "^1.1.0",
+        "ngraph.events": "^1.2.2",
+        "wheel": "^1.0.0"
+      }
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -27603,6 +27670,11 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "wheel": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+      "integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA=="
+    },
     "which": {
       "version": "2.0.2",
       "dev": true,
diff --git a/package.json b/package.json
index 813255d69..334715110 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "electron-squirrel-startup": "^1.0.1",
     "howler": "^2.2.4",
     "mri": "^1.2.0",
+    "panzoom": "^9.4.4",
     "pinia": "^4.0.2",
     "semver": "^7.8.5",
     "unzip-crx-3": "^0.2.0",
diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 2f3762d58..429221cf0 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -4,7 +4,8 @@
 -->
 
 <script setup>
-import { computed } from 'vue'
+import panzoom from 'panzoom'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
 import { generateFilePreviewUrl } from './viewer.utils.ts'
 
@@ -14,19 +15,135 @@ const props = defineProps({
 		required: true,
 	},
 })
+const ZOOM_MIN = 1
+const ZOOM_MAX = 8
+const ZOOM_FACTOR = 3
 
 const src = computed(() => generateFilePreviewUrl(props.file.fileid, props.file.etag))
+
+const wrapperRef = ref(null)
+const instance = ref(null)
+const scale = ref(1)
+const grabbing = ref(false)
+
+const cursorClass = computed(() => {
+	if (scale.value === 1) {
+		return 'viewer-image--zoom-in'
+	}
+	return grabbing.value ? 'viewer-image--grabbing' : 'viewer-image--grab'
+})
+
+function initPanzoom() {
+	if (!wrapperRef.value) {
+		return
+	}
+	instance.value = panzoom(wrapperRef.value, {
+		minZoom: ZOOM_MIN,
+		maxZoom: ZOOM_MAX,
+		bounds: true,
+		boundsPadding: 0.1,
+	})
+	instance.value.on('zoom', (pz) => {
+		const transform = pz.getTransform()
+		scale.value = transform.scale
+		if (transform.scale <= ZOOM_MIN) {
+			pz.smoothMoveTo(0, 0)
+		}
+	})
+	instance.value.on('panstart', (pz) => {
+		if (pz.getTransform().scale <= ZOOM_MIN) {
+			return
+		}
+		grabbing.value = true
+	})
+	instance.value.on('panend', () => {
+		grabbing.value = false
+	})
+}
+
+function disposePanzoom() {
+	instance.value?.dispose()
+	instance.value = null
+	scale.value = 1
+	grabbing.value = false
+}
+
+function onImageLoad(handleLoadEnd) {
+	handleLoadEnd(false)
+	initPanzoom()
+}
+
+function onImageError(handleLoadEnd) {
+	handleLoadEnd(true)
+	disposePanzoom()
+}
+
+function onDoubleClick(event) {
+	if (!instance.value) {
+		return
+	}
+	event.preventDefault()
+	event.stopPropagation()
+	const rect = event.currentTarget.getBoundingClientRect()
+	const x = event.clientX - rect.left
+	const y = event.clientY - rect.top
+	if (scale.value === 1) {
+		instance.value.smoothZoom(x, y, ZOOM_FACTOR)
+	} else {
+		instance.value.smoothZoomAbs(x, y, 0)
+	}
+}
+
+watch(src, disposePanzoom)
+
+onBeforeUnmount(disposePanzoom)
 </script>
 
 <template>
-	<ViewerHandlerMedia v-slot="{ mediaClass, handleLoadEnd }">
-		<img
-			:key="src"
-			class="viewer-image"
-			:class="mediaClass"
-			:src="src"
-			:alt="file.basename"
-			@load="handleLoadEnd(false)"
-			@error="handleLoadEnd(true)">
+	<ViewerHandlerMedia v-slot="{ handleLoadEnd }">
+		<div class="viewer-image-container" @dblclick.capture="onDoubleClick">
+			<div ref="wrapperRef" class="viewer-image-wrapper" :class="cursorClass">
+				<img
+					:key="src"
+					class="viewer-image"
+					:src="src"
+					:alt="file.basename"
+					@load="onImageLoad(handleLoadEnd)"
+					@error="onImageError(handleLoadEnd)">
+			</div>
+		</div>
 	</ViewerHandlerMedia>
 </template>
+
+<style scoped>
+.viewer-image-container {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.viewer-image-wrapper {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.viewer-image {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.viewer-image--zoom-in {
+	cursor: zoom-in;
+}
+
+.viewer-image--grab {
+	cursor: grab;
+}
+
+.viewer-image--grabbing {
+	cursor: grabbing;
+}
+</style>

From 6683dfbf655d5f04e1823ccd844de3e21a090a3a Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Wed, 17 Jun 2026 19:47:30 +0100
Subject: [PATCH 2/9] fix(Viewer): add JSDoc param types to image viewer
 functions

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerHandlerImages.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 429221cf0..e836c1d89 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -68,16 +68,25 @@ function disposePanzoom() {
 	grabbing.value = false
 }
 
+/**
+ * @param {Function} handleLoadEnd - Callback to signal load completion
+ */
 function onImageLoad(handleLoadEnd) {
 	handleLoadEnd(false)
 	initPanzoom()
 }
 
+/**
+ * @param {Function} handleLoadEnd - Callback to signal load error
+ */
 function onImageError(handleLoadEnd) {
 	handleLoadEnd(true)
 	disposePanzoom()
 }
 
+/**
+ * @param {MouseEvent} event - The double-click event
+ */
 function onDoubleClick(event) {
 	if (!instance.value) {
 		return

From d5aedc88c6d7a65b83efe35324dfa16c92b3e0d4 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Wed, 17 Jun 2026 20:20:23 +0100
Subject: [PATCH 3/9] fix(Viewer): block pan at minimum zoom; apply cursor
 class to image element

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerHandlerImages.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index e836c1d89..95e385dd1 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -41,7 +41,10 @@ function initPanzoom() {
 		minZoom: ZOOM_MIN,
 		maxZoom: ZOOM_MAX,
 		bounds: true,
-		boundsPadding: 0.1,
+		boundsPadding: 0,
+		beforeMouseDown() {
+			return scale.value <= ZOOM_MIN
+		},
 	})
 	instance.value.on('zoom', (pz) => {
 		const transform = pz.getTransform()
@@ -111,10 +114,11 @@ onBeforeUnmount(disposePanzoom)
 <template>
 	<ViewerHandlerMedia v-slot="{ handleLoadEnd }">
 		<div class="viewer-image-container" @dblclick.capture="onDoubleClick">
-			<div ref="wrapperRef" class="viewer-image-wrapper" :class="cursorClass">
+			<div ref="wrapperRef" class="viewer-image-wrapper">
 				<img
 					:key="src"
 					class="viewer-image"
+					:class="cursorClass"
 					:src="src"
 					:alt="file.basename"
 					@load="onImageLoad(handleLoadEnd)"

From 13233bb51e91fd78744e0c6105f1325eceea845f Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Wed, 17 Jun 2026 20:23:42 +0100
Subject: [PATCH 4/9] refactor(Viewer): apply review nitpicks for image viewer

- Use useTemplateRef API (Vue 3.5+) for panzoom wrapper ref
- Use plain variable for panzoom instance (no reactive state needed)
- Remove unnecessary null guard in initPanzoom (wrapperRef is always
  defined when called from onImageLoad)
- Add comment explaining dblclick.capture usage

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 .../renderer/Viewer/ViewerHandlerImages.vue   | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 95e385dd1..ce71ac55e 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -5,7 +5,7 @@
 
 <script setup>
 import panzoom from 'panzoom'
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
 import { generateFilePreviewUrl } from './viewer.utils.ts'
 
@@ -21,8 +21,8 @@ const ZOOM_FACTOR = 3
 
 const src = computed(() => generateFilePreviewUrl(props.file.fileid, props.file.etag))
 
-const wrapperRef = ref(null)
-const instance = ref(null)
+const panzoomWrapperRef = useTemplateRef('panzoomWrapper')
+let instance = null
 const scale = ref(1)
 const grabbing = ref(false)
 
@@ -34,10 +34,7 @@ const cursorClass = computed(() => {
 })
 
 function initPanzoom() {
-	if (!wrapperRef.value) {
-		return
-	}
-	instance.value = panzoom(wrapperRef.value, {
+	instance = panzoom(panzoomWrapperRef.value, {
 		minZoom: ZOOM_MIN,
 		maxZoom: ZOOM_MAX,
 		bounds: true,
@@ -46,27 +43,27 @@ function initPanzoom() {
 			return scale.value <= ZOOM_MIN
 		},
 	})
-	instance.value.on('zoom', (pz) => {
+	instance.on('zoom', (pz) => {
 		const transform = pz.getTransform()
 		scale.value = transform.scale
 		if (transform.scale <= ZOOM_MIN) {
 			pz.smoothMoveTo(0, 0)
 		}
 	})
-	instance.value.on('panstart', (pz) => {
+	instance.on('panstart', (pz) => {
 		if (pz.getTransform().scale <= ZOOM_MIN) {
 			return
 		}
 		grabbing.value = true
 	})
-	instance.value.on('panend', () => {
+	instance.on('panend', () => {
 		grabbing.value = false
 	})
 }
 
 function disposePanzoom() {
-	instance.value?.dispose()
-	instance.value = null
+	instance?.dispose()
+	instance = null
 	scale.value = 1
 	grabbing.value = false
 }
@@ -91,7 +88,7 @@ function onImageError(handleLoadEnd) {
  * @param {MouseEvent} event - The double-click event
  */
 function onDoubleClick(event) {
-	if (!instance.value) {
+	if (!instance) {
 		return
 	}
 	event.preventDefault()
@@ -100,9 +97,9 @@ function onDoubleClick(event) {
 	const x = event.clientX - rect.left
 	const y = event.clientY - rect.top
 	if (scale.value === 1) {
-		instance.value.smoothZoom(x, y, ZOOM_FACTOR)
+		instance.smoothZoom(x, y, ZOOM_FACTOR)
 	} else {
-		instance.value.smoothZoomAbs(x, y, 0)
+		instance.smoothZoomAbs(x, y, 0)
 	}
 }
 
@@ -113,8 +110,9 @@ onBeforeUnmount(disposePanzoom)
 
 <template>
 	<ViewerHandlerMedia v-slot="{ handleLoadEnd }">
+		<!-- capture phase intercepts dblclick before panzoom's own handler; stopPropagation prevents the parent viewer from closing -->
 		<div class="viewer-image-container" @dblclick.capture="onDoubleClick">
-			<div ref="wrapperRef" class="viewer-image-wrapper">
+			<div ref="panzoomWrapper" class="viewer-image-wrapper">
 				<img
 					:key="src"
 					class="viewer-image"

From e3ba715ad9e68567b134375e5c6c497771fbd2a0 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Thu, 18 Jun 2026 14:06:16 +0100
Subject: [PATCH 5/9] fix(Viewer): clamp pan position to viewport bounds when
 zoomed

Replace panzoom's built-in bounds option (ineffective when the panzoom
element fills its parent 100%) with manual clamping via
getBoundingClientRect. clampToBounds() is called on panend and after
each zoom to smoothly return the image within the viewport if needed.

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 .../renderer/Viewer/ViewerHandlerImages.vue   | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index ce71ac55e..70e0dfdee 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -33,12 +33,29 @@ const cursorClass = computed(() => {
 	return grabbing.value ? 'viewer-image--grabbing' : 'viewer-image--grab'
 })
 
+function clampToBounds() {
+	if (!instance) return
+	const el = panzoomWrapperRef.value
+	const rect = el.getBoundingClientRect()
+	const parentRect = el.parentElement.getBoundingClientRect()
+	const { x, y } = instance.getTransform()
+
+	let newX = x
+	let newY = y
+	if (rect.left > parentRect.left) newX -= rect.left - parentRect.left
+	if (rect.right < parentRect.right) newX += parentRect.right - rect.right
+	if (rect.top > parentRect.top) newY -= rect.top - parentRect.top
+	if (rect.bottom < parentRect.bottom) newY += parentRect.bottom - rect.bottom
+
+	if (newX !== x || newY !== y) {
+		instance.smoothMoveTo(newX, newY)
+	}
+}
+
 function initPanzoom() {
 	instance = panzoom(panzoomWrapperRef.value, {
 		minZoom: ZOOM_MIN,
 		maxZoom: ZOOM_MAX,
-		bounds: true,
-		boundsPadding: 0,
 		beforeMouseDown() {
 			return scale.value <= ZOOM_MIN
 		},
@@ -48,6 +65,8 @@ function initPanzoom() {
 		scale.value = transform.scale
 		if (transform.scale <= ZOOM_MIN) {
 			pz.smoothMoveTo(0, 0)
+		} else {
+			clampToBounds()
 		}
 	})
 	instance.on('panstart', (pz) => {
@@ -58,6 +77,7 @@ function initPanzoom() {
 	})
 	instance.on('panend', () => {
 		grabbing.value = false
+		clampToBounds()
 	})
 }
 

From f8f32ecc7f71f003d0da5e3070cb8ed7f508f1af Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Thu, 18 Jun 2026 16:23:39 +0100
Subject: [PATCH 6/9] fix(Viewer): enforce pan bounds in real time during drag

- Clamp on every pan event (not just panend) for immediate stopping
- Disable smoothScroll (inertia) so the image halts on release without
  overshooting the boundary

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerHandlerImages.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 70e0dfdee..c05444b91 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -48,7 +48,7 @@ function clampToBounds() {
 	if (rect.bottom < parentRect.bottom) newY += parentRect.bottom - rect.bottom
 
 	if (newX !== x || newY !== y) {
-		instance.smoothMoveTo(newX, newY)
+		instance.moveTo(newX, newY)
 	}
 }
 
@@ -56,6 +56,9 @@ function initPanzoom() {
 	instance = panzoom(panzoomWrapperRef.value, {
 		minZoom: ZOOM_MIN,
 		maxZoom: ZOOM_MAX,
+		// Disable inertia so the image stops immediately on release,
+		// allowing clampToBounds to take effect without being overridden
+		smoothScroll: false,
 		beforeMouseDown() {
 			return scale.value <= ZOOM_MIN
 		},
@@ -75,6 +78,9 @@ function initPanzoom() {
 		}
 		grabbing.value = true
 	})
+	instance.on('pan', () => {
+		clampToBounds()
+	})
 	instance.on('panend', () => {
 		grabbing.value = false
 		clampToBounds()

From 05aa4bb347d9774cac4f22c84d6297d12b880b9c Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Mon, 22 Jun 2026 10:04:43 +0100
Subject: [PATCH 7/9] fix(Viewer): restore image to original scale on
 double-click zoom-out

smoothZoomAbs(x, y, 0) scaled the image to zero, making it disappear.
Using ZOOM_MIN (1) correctly returns the image to its original size.

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerHandlerImages.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index c05444b91..86a7a3c37 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -125,7 +125,7 @@ function onDoubleClick(event) {
 	if (scale.value === 1) {
 		instance.smoothZoom(x, y, ZOOM_FACTOR)
 	} else {
-		instance.smoothZoomAbs(x, y, 0)
+		instance.smoothZoomAbs(x, y, ZOOM_MIN)
 	}
 }
 

From 1c1770da6c9c9ba1ba830353b5105c696b3882e9 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Mon, 29 Jun 2026 14:40:05 +0300
Subject: [PATCH 8/9] feat(Viewer): add rotate left/right to image viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add rotate left (−90°) and rotate right (+90°) buttons to the image
viewer actions menu alongside the existing "Open in web browser" action.

Rotation state and controls are fully self-contained in ViewerHandlerImages:
- rotateLeft/rotateRight adjust rotation in 90° steps using unbounded angle
  increments so the CSS transition always animates in the correct direction
- Rotation resets to 0 when switching images
- ViewerHandlerImages exposes an actions array; ViewerApp renders it
  generically via component :is — no image-specific code in ViewerApp

Fixes #1757

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerApp.vue        | 12 +++++++++
 .../renderer/Viewer/ViewerHandlerImages.vue   | 27 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/talk/renderer/Viewer/ViewerApp.vue b/src/talk/renderer/Viewer/ViewerApp.vue
index 675f70661..df3619f64 100644
--- a/src/talk/renderer/Viewer/ViewerApp.vue
+++ b/src/talk/renderer/Viewer/ViewerApp.vue
@@ -7,6 +7,7 @@
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { computed, ref } from 'vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcModal from '@nextcloud/vue/components/NcModal'
 import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
@@ -19,6 +20,7 @@ function noop() {}
 const isOpen = ref(false)
 const onClose = ref(noop)
 const file = ref(null)
+const viewerRef = ref(null)
 
 const viewComponent = computed(() => file.value && window.OCA.Viewer.availableHandlers.find((handler) => handler.mimes.includes(file.value.mime))?.component)
 
@@ -67,9 +69,19 @@ defineExpose({
 		<component
 			:is="viewComponent"
 			v-if="viewComponent"
+			ref="viewerRef"
 			:file="file" />
 
 		<template #actions>
+			<NcActionButton
+				v-for="action in (viewerRef?.actions ?? [])"
+				:key="action.key"
+				@click="action.onClick()">
+				<template #icon>
+					<component :is="action.icon" :size="20" />
+				</template>
+				{{ action.label }}
+			</NcActionButton>
 			<NcActionLink :href="link">
 				<template #icon>
 					<IconOpenInNew :size="20" />
diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 86a7a3c37..bbba9571d 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -6,6 +6,9 @@
 <script setup>
 import panzoom from 'panzoom'
 import { computed, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+import { translate as t } from '@nextcloud/l10n'
+import IconRotateLeft from 'vue-material-design-icons/RotateLeft.vue'
+import IconRotateRight from 'vue-material-design-icons/RotateRight.vue'
 import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
 import { generateFilePreviewUrl } from './viewer.utils.ts'
 
@@ -18,6 +21,7 @@ const props = defineProps({
 const ZOOM_MIN = 1
 const ZOOM_MAX = 8
 const ZOOM_FACTOR = 3
+const ROTATION_STEP = 90
 
 const src = computed(() => generateFilePreviewUrl(props.file.fileid, props.file.etag))
 
@@ -25,6 +29,7 @@ const panzoomWrapperRef = useTemplateRef('panzoomWrapper')
 let instance = null
 const scale = ref(1)
 const grabbing = ref(false)
+const rotation = ref(0)
 
 const cursorClass = computed(() => {
 	if (scale.value === 1) {
@@ -129,7 +134,25 @@ function onDoubleClick(event) {
 	}
 }
 
-watch(src, disposePanzoom)
+function rotateLeft() {
+	rotation.value -= ROTATION_STEP
+}
+
+function rotateRight() {
+	rotation.value += ROTATION_STEP
+}
+
+const actions = computed(() => [
+	{ key: 'rotate-left', label: t('talk_desktop', 'Rotate left'), icon: IconRotateLeft, onClick: rotateLeft },
+	{ key: 'rotate-right', label: t('talk_desktop', 'Rotate right'), icon: IconRotateRight, onClick: rotateRight },
+])
+
+defineExpose({ actions })
+
+watch(src, () => {
+	disposePanzoom()
+	rotation.value = 0
+})
 
 onBeforeUnmount(disposePanzoom)
 </script>
@@ -143,6 +166,7 @@ onBeforeUnmount(disposePanzoom)
 					:key="src"
 					class="viewer-image"
 					:class="cursorClass"
+					:style="{ transform: `rotate(${rotation}deg)` }"
 					:src="src"
 					:alt="file.basename"
 					@load="onImageLoad(handleLoadEnd)"
@@ -170,6 +194,7 @@ onBeforeUnmount(disposePanzoom)
 .viewer-image {
 	max-width: 100%;
 	max-height: 100%;
+	transition: transform 0.3s ease;
 }
 
 .viewer-image--zoom-in {

From 65cedba847c8f0fa73ab7affd65f034e8359cafa Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Wed, 15 Jul 2026 16:34:25 +0100
Subject: [PATCH 9/9] fix(Viewer): rework image zoom/pan bounds and scale
 handling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes the issues found in review:

- Pan could move a letterboxed image almost entirely out of the viewport:
  bounds were clamped against the full-size wrapper instead of the image.
  Bounds are now computed from the image fit box (layout values only) —
  per axis the image is centered while it fits the container and its edges
  never leave the container edges once it exceeds it.
- Dragging at the pan boundary could freeze the viewer: clampToBounds()
  called moveTo() from the 'pan' event handler, which re-fires 'pan'
  recursively while getBoundingClientRect() still returns the pre-repaint
  geometry, so the correction never converged. The clamp now mutates the
  panzoom transform model in place inside the event handlers (applied with
  the already scheduled repaint) and cannot re-trigger events.
- Double-click zoom-out around an off-center point left the image
  displaced or off-screen: the bounds correction now re-centers the image
  on every animation frame, so it smoothly returns to the centered fit.
- After a zoom-out animation the scale settled at ~1.002..1.007 instead
  of 1 (panzoom's animation never applies the final t=1 frame), so strict
  scale === 1 checks left the viewer in a state where neither pan nor
  zoom worked. All fit checks now use an epsilon and the scale is snapped
  to exactly 1 when the zoom-out animation ends.
- Rotating an image by 90°/270° could overflow the container: the rotated
  image is now compensated to keep it fully visible.
- Container resizes re-measure the fit box and re-clamp the transform.

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-5
---
 .../renderer/Viewer/ViewerHandlerImages.vue   | 210 ++++++++++++++----
 1 file changed, 161 insertions(+), 49 deletions(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index bbba9571d..cbd99e501 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -4,9 +4,9 @@
 -->
 
 <script setup>
-import panzoom from 'panzoom'
-import { computed, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 import { translate as t } from '@nextcloud/l10n'
+import panzoom from 'panzoom'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 import IconRotateLeft from 'vue-material-design-icons/RotateLeft.vue'
 import IconRotateRight from 'vue-material-design-icons/RotateRight.vue'
 import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
@@ -22,81 +22,173 @@ const ZOOM_MIN = 1
 const ZOOM_MAX = 8
 const ZOOM_FACTOR = 3
 const ROTATION_STEP = 90
+// Smooth zoom animations in panzoom undershoot their target by up to ~0.1%
+// of the zoom range (amator never calls step() for the final t=1 frame), so
+// after zooming out the scale is ~1.002..1.007, never exactly 1. All
+// fit-state checks go through this epsilon, and the 'zoomend' handler snaps
+// the settled scale back to exactly ZOOM_MIN.
+const SCALE_EPSILON = 0.01
 
 const src = computed(() => generateFilePreviewUrl(props.file.fileid, props.file.etag))
 
 const panzoomWrapperRef = useTemplateRef('panzoomWrapper')
+const imageRef = useTemplateRef('image')
 let instance = null
 const scale = ref(1)
 const grabbing = ref(false)
 const rotation = ref(0)
+// Extra downscale so an image rotated by an odd number of quarter turns
+// still fits the container
+const rotationFitScale = ref(1)
+// Fit box of the *image* (not the wrapper) in unscaled container coordinates.
+// Built from layout values only — CSS transforms never affect offsetWidth or
+// clientWidth, so bounds math never reads mid-animation (stale) geometry.
+let fitBox = null
+
+const imageStyle = computed(() => ({
+	transform: `rotate(${rotation.value}deg) scale(${rotationFitScale.value})`,
+}))
+
+const isFitZoom = () => scale.value <= ZOOM_MIN + SCALE_EPSILON
 
 const cursorClass = computed(() => {
-	if (scale.value === 1) {
+	if (isFitZoom()) {
 		return 'viewer-image--zoom-in'
 	}
 	return grabbing.value ? 'viewer-image--grabbing' : 'viewer-image--grab'
 })
 
-function clampToBounds() {
-	if (!instance) return
-	const el = panzoomWrapperRef.value
-	const rect = el.getBoundingClientRect()
-	const parentRect = el.parentElement.getBoundingClientRect()
-	const { x, y } = instance.getTransform()
-
-	let newX = x
-	let newY = y
-	if (rect.left > parentRect.left) newX -= rect.left - parentRect.left
-	if (rect.right < parentRect.right) newX += parentRect.right - rect.right
-	if (rect.top > parentRect.top) newY -= rect.top - parentRect.top
-	if (rect.bottom < parentRect.bottom) newY += parentRect.bottom - rect.bottom
-
-	if (newX !== x || newY !== y) {
-		instance.moveTo(newX, newY)
+/**
+ *
+ */
+function measureFitBox() {
+	const image = imageRef.value
+	const width = image?.offsetWidth
+	const height = image?.offsetHeight
+	const containerWidth = panzoomWrapperRef.value.clientWidth
+	const containerHeight = panzoomWrapperRef.value.clientHeight
+	if (!width || !height || !containerWidth || !containerHeight) {
+		fitBox = null
+		return
+	}
+	const rotated = (rotation.value / ROTATION_STEP) % 2 !== 0
+	rotationFitScale.value = rotated
+		? Math.min(1, containerWidth / height, containerHeight / width)
+		: 1
+	const visualWidth = (rotated ? height : width) * rotationFitScale.value
+	const visualHeight = (rotated ? width : height) * rotationFitScale.value
+	// The image is flex-centered in the wrapper, so its center is always the
+	// container center in layout coordinates
+	fitBox = {
+		cx: containerWidth / 2,
+		cy: containerHeight / 2,
+		halfW: visualWidth / 2,
+		halfH: visualHeight / 2,
+	}
+}
+
+/**
+ * Clamp/center the transform in place. Mutating panzoom's transform model
+ * synchronously inside its event handlers applies before the pending repaint
+ * and, unlike calling moveTo() from a handler, cannot re-trigger events.
+ * Per axis: if the scaled image fits the container — keep it centered,
+ * otherwise never let an image edge move inside the container edge.
+ *
+ * @param {object} transform - Panzoom transform model to adjust
+ */
+function applyBounds(transform) {
+	if (!fitBox) {
+		return
+	}
+	const containerWidth = panzoomWrapperRef.value.clientWidth
+	const containerHeight = panzoomWrapperRef.value.clientHeight
+
+	const halfW = fitBox.halfW * transform.scale
+	const centerX = fitBox.cx * transform.scale + transform.x
+	if (halfW * 2 <= containerWidth + 1) {
+		transform.x = containerWidth / 2 - fitBox.cx * transform.scale
+	} else if (centerX - halfW > 0) {
+		transform.x -= centerX - halfW
+	} else if (centerX + halfW < containerWidth) {
+		transform.x += containerWidth - (centerX + halfW)
+	}
+
+	const halfH = fitBox.halfH * transform.scale
+	const centerY = fitBox.cy * transform.scale + transform.y
+	if (halfH * 2 <= containerHeight + 1) {
+		transform.y = containerHeight / 2 - fitBox.cy * transform.scale
+	} else if (centerY - halfH > 0) {
+		transform.y -= centerY - halfH
+	} else if (centerY + halfH < containerHeight) {
+		transform.y += containerHeight - (centerY + halfH)
+	}
+}
+
+/**
+ *
+ */
+function reclamp() {
+	if (!instance) {
+		return
 	}
+	const transform = instance.getTransform()
+	// moveTo triggers the 'pan' event (a single applyBounds pass) and
+	// schedules a repaint of the corrected values
+	instance.moveTo(transform.x, transform.y)
 }
 
+/**
+ *
+ */
 function initPanzoom() {
 	instance = panzoom(panzoomWrapperRef.value, {
 		minZoom: ZOOM_MIN,
 		maxZoom: ZOOM_MAX,
-		// Disable inertia so the image stops immediately on release,
-		// allowing clampToBounds to take effect without being overridden
+		// Disable inertia so the image stops exactly where bounds put it
 		smoothScroll: false,
-		beforeMouseDown() {
-			return scale.value <= ZOOM_MIN
-		},
+		// At fit zoom there is nothing to pan — let panzoom ignore the mousedown
+		beforeMouseDown: () => isFitZoom(),
 	})
 	instance.on('zoom', (pz) => {
 		const transform = pz.getTransform()
+		applyBounds(transform)
 		scale.value = transform.scale
-		if (transform.scale <= ZOOM_MIN) {
-			pz.smoothMoveTo(0, 0)
-		} else {
-			clampToBounds()
+	})
+	instance.on('zoomend', (pz) => {
+		const transform = pz.getTransform()
+		if (transform.scale <= ZOOM_MIN + SCALE_EPSILON) {
+			// The zoom-out animation settled near fit — snap to exactly ZOOM_MIN
+			transform.scale = ZOOM_MIN
+			scale.value = ZOOM_MIN
+			reclamp()
 		}
 	})
-	instance.on('panstart', (pz) => {
-		if (pz.getTransform().scale <= ZOOM_MIN) {
+	instance.on('pan', (pz) => {
+		applyBounds(pz.getTransform())
+	})
+	instance.on('panstart', () => {
+		if (isFitZoom()) {
 			return
 		}
 		grabbing.value = true
 	})
-	instance.on('pan', () => {
-		clampToBounds()
-	})
 	instance.on('panend', () => {
 		grabbing.value = false
-		clampToBounds()
 	})
 }
 
+/**
+ *
+ */
 function disposePanzoom() {
 	instance?.dispose()
 	instance = null
+	if (panzoomWrapperRef.value) {
+		panzoomWrapperRef.value.style.transform = ''
+	}
 	scale.value = 1
 	grabbing.value = false
+	fitBox = null
 }
 
 /**
@@ -104,6 +196,7 @@ function disposePanzoom() {
  */
 function onImageLoad(handleLoadEnd) {
 	handleLoadEnd(false)
+	measureFitBox()
 	initPanzoom()
 }
 
@@ -122,29 +215,30 @@ function onDoubleClick(event) {
 	if (!instance) {
 		return
 	}
-	event.preventDefault()
-	event.stopPropagation()
 	const rect = event.currentTarget.getBoundingClientRect()
 	const x = event.clientX - rect.left
 	const y = event.clientY - rect.top
-	if (scale.value === 1) {
+	if (isFitZoom()) {
 		instance.smoothZoom(x, y, ZOOM_FACTOR)
 	} else {
+		// applyBounds re-centers the image on every animation frame while it
+		// zooms out, and the 'zoomend' handler snaps the final scale to fit
 		instance.smoothZoomAbs(x, y, ZOOM_MIN)
 	}
 }
 
-function rotateLeft() {
-	rotation.value -= ROTATION_STEP
-}
-
-function rotateRight() {
-	rotation.value += ROTATION_STEP
+/**
+ * @param {number} step - Rotation step in degrees (±ROTATION_STEP)
+ */
+function onRotate(step) {
+	rotation.value += step
+	measureFitBox()
+	reclamp()
 }
 
 const actions = computed(() => [
-	{ key: 'rotate-left', label: t('talk_desktop', 'Rotate left'), icon: IconRotateLeft, onClick: rotateLeft },
-	{ key: 'rotate-right', label: t('talk_desktop', 'Rotate right'), icon: IconRotateRight, onClick: rotateRight },
+	{ key: 'rotate-left', label: t('talk_desktop', 'Rotate left'), icon: IconRotateLeft, onClick: () => onRotate(-ROTATION_STEP) },
+	{ key: 'rotate-right', label: t('talk_desktop', 'Rotate right'), icon: IconRotateRight, onClick: () => onRotate(ROTATION_STEP) },
 ])
 
 defineExpose({ actions })
@@ -152,23 +246,41 @@ defineExpose({ actions })
 watch(src, () => {
 	disposePanzoom()
 	rotation.value = 0
+	rotationFitScale.value = 1
 })
 
-onBeforeUnmount(disposePanzoom)
+let resizeObserver = null
+
+onMounted(() => {
+	resizeObserver = new ResizeObserver(() => {
+		measureFitBox()
+		reclamp()
+	})
+	resizeObserver.observe(panzoomWrapperRef.value)
+})
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect()
+	disposePanzoom()
+})
 </script>
 
 <template>
 	<ViewerHandlerMedia v-slot="{ handleLoadEnd }">
-		<!-- capture phase intercepts dblclick before panzoom's own handler; stopPropagation prevents the parent viewer from closing -->
-		<div class="viewer-image-container" @dblclick.capture="onDoubleClick">
+		<!-- Capture phase intercepts dblclick before panzoom's own handler (its
+			built-in dblclick zoom cannot be disabled via options); stop prevents
+			the parent viewer from reacting -->
+		<div class="viewer-image-container" @dblclick.capture.stop.prevent="onDoubleClick">
 			<div ref="panzoomWrapper" class="viewer-image-wrapper">
 				<img
 					:key="src"
+					ref="image"
 					class="viewer-image"
 					:class="cursorClass"
-					:style="{ transform: `rotate(${rotation}deg)` }"
+					:style="imageStyle"
 					:src="src"
 					:alt="file.basename"
+					draggable="false"
 					@load="onImageLoad(handleLoadEnd)"
 					@error="onImageError(handleLoadEnd)">
 			</div>