fix: zoom should be wrt the current scrubbers

app/hooks/useTimeline.ts

@@ -82,10 +82,13 @@ export const useTimeline = () => {
   }, [zoomLevel]);
 
   // Zoom functions that update scrubber positions and widths accordingly
-  const handleZoomIn = useCallback(() => {
+  // Zoom is relative to the center point (ruler position) so that the timeline
+  // zooms towards/away from the current playhead position
+  const handleZoomIn = useCallback((centerPx: number = 0) => {
     const currentZoom = zoomLevelRef.current;
     const newZoom = Math.min(MAX_ZOOM, currentZoom * 1.5);
     const zoomRatio = newZoom / currentZoom;
+    const offset = centerPx * (1 - zoomRatio);
 
     zoomLevelRef.current = newZoom;
     setZoomLevel(newZoom);
@@ -96,17 +99,18 @@ export const useTimeline = () => {
         ...track,
         scrubbers: track.scrubbers.map((scrubber) => ({
           ...scrubber,
-          left: scrubber.left * zoomRatio,
+          left: scrubber.left * zoomRatio + offset,
           width: scrubber.width * zoomRatio,
         })),
       })),
     }));
   }, []);
 
-  const handleZoomOut = useCallback(() => {
+  const handleZoomOut = useCallback((centerPx: number = 0) => {
     const currentZoom = zoomLevelRef.current;
     const newZoom = Math.max(MIN_ZOOM, currentZoom / 1.5);
     const zoomRatio = newZoom / currentZoom;
+    const offset = centerPx * (1 - zoomRatio);
 
     zoomLevelRef.current = newZoom;
     setZoomLevel(newZoom);
@@ -117,17 +121,18 @@ export const useTimeline = () => {
         ...track,
         scrubbers: track.scrubbers.map((scrubber) => ({
           ...scrubber,
-          left: scrubber.left * zoomRatio,
+          left: scrubber.left * zoomRatio + offset,
           width: scrubber.width * zoomRatio,
         })),
       })),
     }));
   }, []);
 
-  const handleZoomReset = useCallback(() => {
+  const handleZoomReset = useCallback((centerPx: number = 0) => {
     const currentZoom = zoomLevelRef.current;
     const newZoom = DEFAULT_ZOOM;
     const zoomRatio = newZoom / currentZoom;
+    const offset = centerPx * (1 - zoomRatio);
 
     zoomLevelRef.current = newZoom;
     setZoomLevel(newZoom);
@@ -138,7 +143,7 @@ export const useTimeline = () => {
         ...track,
         scrubbers: track.scrubbers.map((scrubber) => ({
           ...scrubber,
-          left: scrubber.left * zoomRatio,
+          left: scrubber.left * zoomRatio + offset,
           width: scrubber.width * zoomRatio,
         })),
       })),

app/routes/home.tsx

@@ -660,9 +660,9 @@ export default function TimelineEditor() {
         const scrollDirection = e.deltaY > 0 ? -1 : 1;
 
         if (scrollDirection > 0) {
-          handleZoomIn();
+          handleZoomIn(rulerPositionPx);
         } else {
-          handleZoomOut();
+          handleZoomOut(rulerPositionPx);
         }
       }
     };
@@ -673,7 +673,7 @@ export default function TimelineEditor() {
     return () => {
       timelineContainer.removeEventListener("wheel", handleWheel);
     };
-  }, [handleZoomIn, handleZoomOut]);
+  }, [handleZoomIn, handleZoomOut, rulerPositionPx]);
 
   const { user, isLoading: isAuthLoading, isSigningIn, signInWithGoogle, signOut } = useAuth();
 
@@ -924,22 +924,22 @@ export default function TimelineEditor() {
                       <Button
                         variant="ghost"
                         size="sm"
-                        onClick={handleZoomOut}
+                        onClick={() => handleZoomOut(rulerPositionPx)}
                         className="h-6 w-6 p-0 text-xs"
                         title="Zoom Out">
                         <Minus className="h-3 w-3" />
                       </Button>
                       <Badge
                         variant="secondary"
                         className="text-xs h-4 px-1.5 font-mono cursor-pointer hover:bg-secondary/80 transition-colors"
-                        onClick={handleZoomReset}
+                        onClick={() => handleZoomReset(rulerPositionPx)}
                         title="Click to reset zoom to 100%">
                         {Math.round(zoomLevel * 100)}%
                       </Badge>
                       <Button
                         variant="ghost"
                         size="sm"
-                        onClick={handleZoomIn}
+                        onClick={() => handleZoomIn(rulerPositionPx)}
                         className="h-6 w-6 p-0 text-xs"
                         title="Zoom In">
                         <Plus className="h-3 w-3" />

app/utils/llm-handler.ts

@@ -156,21 +156,24 @@ export function llmDeleteTrackByNumber(
 // ============================
 
 export function llmZoomIn(
-  handleZoomIn: () => void
+  handleZoomIn: (centerPx?: number) => void,
+  centerPx?: number
 ) {
-  handleZoomIn();
+  handleZoomIn(centerPx);
 }
 
 export function llmZoomOut(
-  handleZoomOut: () => void
+  handleZoomOut: (centerPx?: number) => void,
+  centerPx?: number
 ) {
-  handleZoomOut();
+  handleZoomOut(centerPx);
 }
 
 export function llmZoomReset(
-  handleZoomReset: () => void
+  handleZoomReset: (centerPx?: number) => void,
+  centerPx?: number
 ) {
-  handleZoomReset();
+  handleZoomReset(centerPx);
 }
 
 export function llmSetTimelinePosition(