uninstall panzoom + details ARCHITECTURE.md

ARCHITECTURE.md

@@ -46,8 +46,9 @@ Central hub = **⊙stylesheet** (everything CSS funnels through it). Selection/v
 
 ### Preview / iframe / interaction
 - `useIframeInteractions.js` — hover labels + click routing inside iframe → element/image/carte popups. getSelectorFromElement, getContentElement, getImageFigure, getCarteFigure, handleIframeMouseMove/Click, popup-close handlers. (Page-template dead code removed → archive/page-template-styling/.)
-- `usePreviewRenderer.js` — double-buffered iframe render w/ crossfade + scroll-% persistence. Builds srcdoc. watches ⊙stylesheet.content & ⊙narrative.data → renderPreview. setKeyboardShortcutHandler. → Coloris.close on iframe click.
-- `usePrintPreview.js` — collect iframe styles, swap into document, window.print(), reload.
+- `usePreviewRenderer.js` — double-buffered iframe render w/ crossfade + scroll-% persistence. Builds srcdoc. watches ⊙stylesheet.content & ⊙narrative.data → renderPreview. setKeyboardShortcutHandler. Forwards Space key from iframe to parent for pan mode. → Coloris.close on iframe click.
+- `usePreviewControls.js` — zoom (scale + --preview-h CSS var) + horizontal pan (Space+drag, overlay fixe, ±50% limit) + auto-centering. Wheel zoom proportional (deltaY×0.001). Replaces former ZoomControls logic and @panzoom/panzoom (removed).
+- `usePrintPreview.js` — collect iframe styles, swap into document, wait for images, inject print background CSS (computed values from iframe :root), window.print(), reload.
 - `useKeyboardShortcuts.js` — Cmd/Ctrl+S(save)/+P(print), Esc(close popup), `\`(toggle panel). Listens on document + attachToIframe.
 
 ### Fonts / spacing

package-lock.json

@@ -9,7 +9,6 @@
       "version": "0.0.0",
       "dependencies": {
         "@melloware/coloris": "^0.25.0",
-        "@panzoom/panzoom": "^4.6.2",
         "highlight.js": "^11.11.1",
         "pagedjs": "^0.4.3",
         "pinia": "^3.0.4",
@@ -550,12 +549,6 @@
       "integrity": "sha512-RBWVFLjWbup7GRkOXb9g3+ZtR9AevFtJinrRz2cYPLjZ3TCkNRGMWuNbmQWbZ5cF3VU7aQDZwUsYgIY/bGrh2g==",
       "license": "MIT"
     },
-    "node_modules/@panzoom/panzoom": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/@panzoom/panzoom/-/panzoom-4.6.2.tgz",
-      "integrity": "sha512-Zn3B5/hwa6eYIPRSKX0xf2clv8nviTX8AnAU5kU/EugiTDhG41ya2wlBqYrZJYCWQROr/5XkWObZhIkepi89qw==",
-      "license": "MIT"
-    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",

package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@melloware/coloris": "^0.25.0",
-    "@panzoom/panzoom": "^4.6.2",
     "highlight.js": "^11.11.1",
     "pagedjs": "^0.4.3",
     "pinia": "^3.0.4",

src/composables/usePanzoom.js

@@ -1,26 +0,0 @@
-import Panzoom from '@panzoom/panzoom';
-import { onMounted, onUnmounted, watch } from 'vue';
-
-// Handles pan only — zoom is managed separately via CSS on the outer wrapper.
-export function usePanzoom(panRef, isPaused) {
-  let pz = null;
-
-  onMounted(() => {
-    if (!panRef.value) return;
-    pz = Panzoom(panRef.value, {
-      disableZoom: true,
-      cursor: 'default',
-    });
-  });
-
-  onUnmounted(() => pz?.destroy());
-
-  watch(() => isPaused?.value, (paused) => {
-    if (!pz) return;
-    paused ? pz.pause() : pz.resume();
-  });
-
-  const resetPan = () => pz?.reset({ animate: true });
-
-  return { resetPan };
-}