fix: resolve zoom desynchronization during rapid scrolling

svg-time-series/src/chart/zoomScheduler.ts

@@ -44,7 +44,7 @@ export class ZoomScheduler {
    * ZoomScheduler state transitions
    *
    *     [idle] -- user event/programmatic start --> [pending]
-   *     [pending] -- conflicting transform --------> [pending] (ignored)
+   *     [pending] -- conflicting transform --------> [pending] (updated)
    *     [pending] -- finalize ---------------------> [idle]
    */
   public zoom(
@@ -88,9 +88,13 @@ export class ZoomScheduler {
     return true;
   }
 
-  // pending -> pending (restore previous transform)
-  private handleProgrammaticConflict(prevTransform: ZoomTransform): boolean {
-    this.currentPanZoomTransformState = prevTransform;
+  // pending -> pending (accept newer transform so followers stay up-to-date)
+  private handleProgrammaticConflict(_prevTransform: ZoomTransform): boolean {
+    // Keep the newer transform (already stored in
+    // currentPanZoomTransformState) instead of reverting to the previous
+    // one.  During rapid scrolling the leader chart may fire several
+    // programmatic zooms before the follower's RAF runs; reverting would
+    // cause the follower to render with a stale transform.
     return false;
   }
 

svg-time-series/src/chart/zoomState.ts

@@ -150,11 +150,21 @@ export class ZoomState {
       rawSourceEvent == null && this.zoomScheduler.isPending()
     );
 
+    // Fire the callback immediately for user-initiated events so that
+    // follower charts (multi-chart sync) can schedule their own RAF in the
+    // same event-handler turn.  This ensures all charts render in the same
+    // animation frame instead of the follower lagging one frame behind.
+    if (sourceEvent && shouldUpdateCallback) {
+      this.zoomCallback(schedulerEvent as D3ZoomEvent<SVGRectElement, unknown>);
+    }
+
     this.zoomScheduler.zoom(
       event.transform,
       sourceEvent,
       schedulerEvent,
-      shouldUpdateCallback
+      // Only defer the callback for programmatic (forwarded) zooms; user
+      // events already fired it synchronously above.
+      shouldUpdateCallback && !sourceEvent
         ? (e) => {
             this.zoomCallback(e as D3ZoomEvent<SVGRectElement, unknown>);
           }

svg-time-series/test/chart/zoomScheduler.test.ts

@@ -39,7 +39,7 @@ describe("ZoomScheduler", () => {
     expect(apply).toHaveBeenCalledWith({ x: 1, k: 2 });
   });
 
-  it("rejects conflicting programmatic transforms", () => {
+  it("accepts newer programmatic transforms while pending", () => {
     const apply = vi.fn();
     const refresh = vi.fn();
     const zs = new ZoomScheduler(apply, refresh);
@@ -51,7 +51,9 @@ describe("ZoomScheduler", () => {
       false,
     );
     vi.runAllTimers();
+    // The newer transform should be applied, not the first one
     expect(apply).toHaveBeenCalledTimes(1);
+    expect(apply).toHaveBeenCalledWith({ x: 5, k: 3 });
   });
 
   it("finalizes transform after confirmation", () => {

svg-time-series/test/chart/zoomState.test.ts

@@ -258,8 +258,10 @@ describe("ZoomState", () => {
     expect(applyZoomTransform).toHaveBeenCalledTimes(3);
     expect(applyZoomTransform).toHaveBeenLastCalledWith({ x: 2, k: 3 });
     expect(refresh).toHaveBeenCalledTimes(2);
-    expect(zoomCb).toHaveBeenCalledTimes(1);
-    const cbEvent = zoomCb.mock.calls[0]![0] as {
+    // User events fire the callback eagerly (synchronously) so that
+    // follower charts can schedule their refresh in the same frame.
+    expect(zoomCb).toHaveBeenCalledTimes(2);
+    const cbEvent = zoomCb.mock.calls[1]![0] as {
       transform: { x: number; k: number };
     };
     expect(cbEvent.transform).toMatchObject({ x: 2, k: 3 });