add zoom composant

src/App.vue

@@ -6,6 +6,7 @@ import ElementPopup from './components/ElementPopup.vue';
 import PreviewLoader from './components/PreviewLoader.vue';
 import SaveButton from './components/SaveButton.vue';
 import PrintButton from './components/PrintButton.vue';
+import ZoomControls from './components/ui/ZoomControls.vue';
 import { onMounted, ref, computed, provide } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
 import { useNarrativeStore } from './stores/narrative';
@@ -73,6 +74,10 @@ const { handleKeyboardShortcut, isMac } = useKeyboardShortcuts({
 // Attach keyboard shortcut handler to renderer
 setKeyboardShortcutHandler(handleKeyboardShortcut);
 
+// Zoom
+const zoomControls = ref(null);
+const zoomStyle = computed(() => zoomControls.value?.zoomStyle ?? {});
+
 // Lifecycle: Initialize app on mount
 onMounted(async () => {
   // Load narrative data (narrativeUrl constructed from location, always present)
@@ -99,11 +104,13 @@ onMounted(async () => {
     ref="previewFrame1"
     class="preview-frame"
     :class="{ shifted: activeTab.length > 0 }"
+    :style="zoomStyle"
   ></iframe>
   <iframe
     ref="previewFrame2"
     class="preview-frame"
     :class="{ shifted: activeTab.length > 0 }"
+    :style="zoomStyle"
   ></iframe>
 
   <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
@@ -124,6 +131,8 @@ onMounted(async () => {
   -->
 
 
+  <ZoomControls ref="zoomControls" />
+
   <div id="group-btn">
     <SaveButton />
     <PrintButton :printPreview="printPreview" />
@@ -139,17 +148,16 @@ onMounted(async () => {
   width: 100vw;
   height: 100vh;
   border: none;
-  margin-left: 0;
-  transform: scale(1) translateY(0);
-  height: 100vh;
-  transition: all 0.2s ease-in-out var(--curve);
+  transform-origin: top center;
+  transition: transform 0.3s ease;
 }
 
-.preview-frame.shifted {
+
+/* .preview-frame.shifted {
   margin-left: 17.55rem;
   transform: scale(0.65) translateY(-40vh);
   height: 155vh;
-}
+} */
 
 .preview-frame:nth-of-type(1) {
   z-index: 1;
@@ -164,7 +172,7 @@ onMounted(async () => {
 .print-btn {
   position: fixed;
   bottom: 2rem;
-  right: 2rem;
+  left: 2rem;
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 50%;