1 files changed, 39 insertions, 2 deletions
diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index f85f914..074b711 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -1279,11 +1279,48 @@
             updateProperties();
         });
 
-        // Mouse wheel diagonal scroll (follows time-ordered sequence cascade)
+        // Mouse wheel: zoom (with Ctrl/Cmd) or diagonal scroll
         timelineContainer.addEventListener('wheel', (e) => {
             e.preventDefault();
 
-            // Horizontal scroll
+            // Zoom mode: Ctrl/Cmd + wheel
+            if (e.ctrlKey || e.metaKey) {
+                // Get mouse position relative to timeline container
+                const rect = timelineContainer.getBoundingClientRect();
+                const mouseX = e.clientX - rect.left; // Mouse X in viewport coordinates
+
+                // Calculate time position under cursor BEFORE zoom
+                const scrollLeft = timelineContainer.scrollLeft;
+                const timeUnderCursor = (scrollLeft + mouseX) / pixelsPerSecond;
+
+                // Calculate new zoom level
+                const zoomDelta = e.deltaY > 0 ? -10 : 10; // Wheel down = zoom out, wheel up = zoom in
+                const oldPixelsPerSecond = pixelsPerSecond;
+                const newPixelsPerSecond = Math.max(10, Math.min(500, pixelsPerSecond + zoomDelta));
+
+                if (newPixelsPerSecond !== oldPixelsPerSecond) {
+                    pixelsPerSecond = newPixelsPerSecond;
+
+                    // Update zoom slider and labels
+                    zoomSlider.value = pixelsPerSecond;
+                    zoomLevel.textContent = `${pixelsPerSecond}%`;
+                    pixelsPerSecLabel.textContent = pixelsPerSecond;
+
+                    // Re-render waveform and timeline at new zoom
+                    if (audioBuffer) {
+                        renderWaveform();
+                    }
+                    renderTimeline();
+
+                    // Adjust scroll position so time under cursor stays in same place
+                    // After zoom: new_scrollLeft = time_under_cursor * newPixelsPerSecond - mouseX
+                    const newScrollLeft = timeUnderCursor * newPixelsPerSecond - mouseX;
+                    timelineContainer.scrollLeft = newScrollLeft;
+                }
+                return;
+            }
+
+            // Normal mode: diagonal scroll
             timelineContainer.scrollLeft += e.deltaY;
 
             // Calculate current time position with 10% headroom for visual comfort