@agent-native/core 0.175.1 → 0.175.2-nightly-20260826165737

package/corpus/templates/slides/app/components/editor/EditorSidebar.tsx

@@ -132,6 +132,22 @@ function isAgentPresenceUser(user: CollabUser): boolean {
   );
 }
 
+function getNextSlideId(
+  slides: Slide[],
+  activeSlideId: string,
+  key: "ArrowUp" | "ArrowDown",
+): string | null {
+  const currentIndex = slides.findIndex((s) => s.id === activeSlideId);
+  if (currentIndex === -1) return null;
+
+  const nextIndex =
+    key === "ArrowUp"
+      ? Math.max(0, currentIndex - 1)
+      : Math.min(slides.length - 1, currentIndex + 1);
+
+  return nextIndex === currentIndex ? null : (slides[nextIndex]?.id ?? null);
+}
+
 /** Small presence avatar circle with hover card showing name + email */
 function PresenceAvatarTip({
   user,
@@ -197,6 +213,7 @@ function SortableSlideThumb({
   index,
   isActive,
   onSelect,
+  onArrowNavigate,
   registerButtonRef,
   presenceUsers = [],
   aspectRatio,
@@ -219,6 +236,7 @@ function SortableSlideThumb({
   index: number;
   isActive: boolean;
   onSelect: () => void;
+  onArrowNavigate: (key: "ArrowUp" | "ArrowDown") => void;
   readOnly?: boolean;
   registerButtonRef: (slideId: string, node: HTMLButtonElement | null) => void;
   presenceUsers?: CollabUser[];
@@ -280,6 +298,14 @@ function SortableSlideThumb({
             type="button"
             {...(readOnly ? {} : attributes)}
             {...(readOnly ? {} : listeners)}
+            onKeyDown={(event) => {
+              listeners?.onKeyDown?.(event);
+              if (event.defaultPrevented) return;
+              if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+              event.preventDefault();
+              event.stopPropagation();
+              onArrowNavigate(event.key);
+            }}
             onClick={(event) => {
               // Safari does not focus a button on click, and the slide copy/paste
               // and delete shortcuts are scoped to a focused thumbnail.
@@ -603,6 +629,21 @@ export default function EditorSidebar({
     [describeSlideId],
   );
 
+  const navigateToSlide = useCallback(
+    (fromSlideId: string, key: "ArrowUp" | "ArrowDown") => {
+      const nextSlideId = getNextSlideId(slides, fromSlideId, key);
+      if (!nextSlideId) return;
+
+      onSelectSlide(nextSlideId);
+      requestAnimationFrame(() => {
+        const nextButton = slideButtonRefs.current.get(nextSlideId);
+        nextButton?.focus({ preventScroll: true });
+        nextButton?.scrollIntoView({ block: "nearest" });
+      });
+    },
+    [onSelectSlide, slides],
+  );
+
   const describeSlideIndex = describeSlideId
     ? slides.findIndex((s) => s.id === describeSlideId)
     : -1;
@@ -629,28 +670,12 @@ export default function EditorSidebar({
         return;
 
       e.preventDefault();
-      const currentIndex = slides.findIndex((s) => s.id === activeSlideId);
-      if (currentIndex === -1) return;
-
-      const nextIndex =
-        e.key === "ArrowUp"
-          ? Math.max(0, currentIndex - 1)
-          : Math.min(slides.length - 1, currentIndex + 1);
-
-      if (nextIndex !== currentIndex) {
-        const nextSlideId = slides[nextIndex].id;
-        onSelectSlide(nextSlideId);
-        requestAnimationFrame(() => {
-          const nextButton = slideButtonRefs.current.get(nextSlideId);
-          nextButton?.focus({ preventScroll: true });
-          nextButton?.scrollIntoView({ block: "nearest" });
-        });
-      }
+      navigateToSlide(activeSlideId, e.key as "ArrowUp" | "ArrowDown");
     };
 
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [slides, activeSlideId, onSelectSlide]);
+  }, [activeSlideId, navigateToSlide]);
 
   return (
     <div className="flex h-full min-h-0 w-48 flex-shrink-0 flex-col bg-background sm:w-52">
@@ -677,6 +702,7 @@ export default function EditorSidebar({
                 index={index}
                 isActive={slide.id === activeSlideId}
                 onSelect={() => onSelectSlide(slide.id)}
+                onArrowNavigate={(key) => navigateToSlide(slide.id, key)}
                 readOnly={readOnly}
                 registerButtonRef={registerSlideButton}
                 presenceUsers={slidePresence?.get(slide.id) ?? []}

package/corpus/templates/slides/app/components/editor/SlideEditor.tsx

@@ -59,7 +59,11 @@ import {
   CanvasCommentPins,
   MultiSelectChip,
 } from "@/components/visual-editor";
-import type { Slide, UpdateSlideOptions } from "@/context/DeckContext";
+import {
+  flushPendingSaves,
+  type Slide,
+  type UpdateSlideOptions,
+} from "@/context/DeckContext";
 import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
 import {
   computeCanvasFitZoom,
@@ -1549,6 +1553,45 @@ export default function SlideEditor({
   );
   const previousSlideIdRef = useRef(slide.id);
 
+  // Inline editing keeps its latest HTML in the DOM until blur so React does
+  // not rerender the contentEditable on every keystroke. Hand that draft to
+  // the keepalive queue before browser teardown.
+  useEffect(() => {
+    const flushInlineEditDraft = () => {
+      const draft = inlineEditDraftRef.current;
+      if (!draft) return;
+      onUpdateSlideRef.current({ content: draft.content }, draft.slideId, {
+        persistence: "debounced",
+      });
+      inlineEditDraftRef.current = null;
+      flushPendingSaves();
+    };
+    const flushWhenHidden = () => {
+      if (document.visibilityState === "hidden") flushInlineEditDraft();
+    };
+
+    window.addEventListener("beforeunload", flushInlineEditDraft, {
+      capture: true,
+    });
+    window.addEventListener("pagehide", flushInlineEditDraft, {
+      capture: true,
+    });
+    document.addEventListener("visibilitychange", flushWhenHidden, {
+      capture: true,
+    });
+    return () => {
+      window.removeEventListener("beforeunload", flushInlineEditDraft, {
+        capture: true,
+      });
+      window.removeEventListener("pagehide", flushInlineEditDraft, {
+        capture: true,
+      });
+      document.removeEventListener("visibilitychange", flushWhenHidden, {
+        capture: true,
+      });
+    };
+  }, []);
+
   const readCurrentSlideContentHtml = useCallback(() => {
     const slideContent = containerRef.current?.querySelector(
       ".slide-content",

package/corpus/templates/slides/app/context/DeckContext.tsx

@@ -382,7 +382,7 @@ const inFlightSaves = new Set<string>();
 const inFlightSaveChains = new Map<string, Promise<void>>();
 const inFlightSaveControllers = new Map<string, AbortController>();
 const deckSaveGenerations = new Map<string, number>();
-const immediateFlushRequests = new Set<string>();
+const immediateFlushRequests = new Map<string, boolean>();
 const deckSaveRetryAttempts = new Map<string, number>();
 const failedSaveDecks = new Set<string>();
 const saveStateListeners = new Set<() => void>();
@@ -502,11 +502,64 @@ function deckPayload(deck: Deck): Record<string, unknown> {
  * the `save-deck` action is called first, then any trailing granular ops are
  * sent through `patch-deck`.
  */
+async function sendKeepaliveAction(
+  url: string,
+  method: "POST" | "PUT",
+  body: Record<string, unknown>,
+  signal?: AbortSignal,
+): Promise<void> {
+  const response = await fetch(url, {
+    method,
+    headers: {
+      "Content-Type": "application/json",
+      "X-Agent-Native-Frontend": "1",
+    },
+    body: JSON.stringify(body),
+    cache: "no-store",
+    keepalive: true,
+    signal,
+  });
+  if (!response.ok) {
+    throw new Error(`Action request failed with status ${response.status}`);
+  }
+}
+
 async function persistDeckOps(
   deckId: string,
   ops: GranularOp[],
   signal?: AbortSignal,
+  options?: { keepalive?: boolean },
 ) {
+  if (options?.keepalive) {
+    const actionsBase = agentNativePath("/_agent-native/actions");
+    if (ops[0].op === "full-replace") {
+      const deck = ops[0].deck;
+      await sendKeepaliveAction(
+        `${actionsBase}/save-deck`,
+        "PUT",
+        { deckId, deck: deckPayload(deck) },
+        signal,
+      );
+      const trailingOps = ops.slice(1) as PatchDeckOp[];
+      if (trailingOps.length > 0) {
+        await sendKeepaliveAction(
+          `${actionsBase}/patch-deck`,
+          "POST",
+          { deckId, operations: trailingOps },
+          signal,
+        );
+      }
+    } else {
+      await sendKeepaliveAction(
+        `${actionsBase}/patch-deck`,
+        "POST",
+        { deckId, operations: ops as PatchDeckOp[] },
+        signal,
+      );
+    }
+    return;
+  }
+
   if (ops[0].op === "full-replace") {
     // Legacy full-deck write — used by undo/redo and setDeckSlides.
     // `callAction` bounds it so a stalled save can't wedge `inFlightSaves`
@@ -547,14 +600,21 @@ async function persistDeckOps(
  * could otherwise complete out of order and let a stale drag overwrite a
  * newer resize.
  */
-function drainPendingDeckOps(deckId: string): Promise<void> {
+function drainPendingDeckOps(
+  deckId: string,
+  options?: { keepalive?: boolean },
+): Promise<void> {
   const timer = pendingSaves.get(deckId);
   if (timer) clearTimeout(timer);
   pendingSaves.delete(deckId);
 
   const active = inFlightSaveChains.get(deckId);
   if (active) {
-    immediateFlushRequests.add(deckId);
+    immediateFlushRequests.set(
+      deckId,
+      (immediateFlushRequests.get(deckId) ?? false) ||
+        options?.keepalive === true,
+    );
     notifySaveListeners();
     return active;
   }
@@ -574,7 +634,7 @@ function drainPendingDeckOps(deckId: string): Promise<void> {
   inFlightOpSlides.set(deckId, ops);
   const isCurrentGeneration = () =>
     (deckSaveGenerations.get(deckId) ?? 0) === generation;
-  const next = persistDeckOps(deckId, ops, controller?.signal)
+  const next = persistDeckOps(deckId, ops, controller?.signal, options)
     .then(() => {
       if (!isCurrentGeneration()) return;
       deckSaveRetryAttempts.delete(deckId);
@@ -613,10 +673,15 @@ function drainPendingDeckOps(deckId: string): Promise<void> {
         }
         inFlightSaves.delete(deckId);
         inFlightOpSlides.delete(deckId);
-        const flushImmediately = immediateFlushRequests.delete(deckId);
+        const requestedFlush = immediateFlushRequests.get(deckId);
+        const flushImmediately = requestedFlush !== undefined;
+        immediateFlushRequests.delete(deckId);
         notifySaveListeners();
         if (flushImmediately) {
-          void drainPendingDeckOps(deckId);
+          void drainPendingDeckOps(
+            deckId,
+            requestedFlush ? { keepalive: true } : undefined,
+          );
         }
       }
     });
@@ -704,71 +769,20 @@ function saveDeckToAPI(deck: Deck) {
 }
 
 /**
- * Synchronously flush every pending (debounced) deck op queue using
- * `fetch(..., { keepalive: true })` so in-flight edits survive a tab
+ * Flush every pending (debounced) deck op through the same per-deck queue used
+ * by normal saves, using keepalive transport so in-flight edits survive a tab
  * close / navigation. Called from a `pagehide` / `visibilitychange(hidden)`
- * handler — without it there is a ~500ms window (the debounce) where the
+ * handler - without it there is a ~500ms window (the debounce) where the
  * user's most recent edits are only in memory and are lost on tab close.
  *
  * keepalive requests are best-effort and capped (~64KB by the browser), which
  * is fine: granular ops are small, and if a full-replace payload is too large
  * to send keepalive the normal debounce/poll path still catches up on reopen.
  */
-function flushPendingSaves() {
-  const actionsBase = agentNativePath("/_agent-native/actions");
-  const actionUrl = `${actionsBase}/patch-deck`;
-  const saveDeckUrl = `${actionsBase}/save-deck`;
-  for (const [deckId, timer] of pendingSaves) {
-    clearTimeout(timer);
-    const ops = pendingOpsQueue.get(deckId);
-    pendingOpsQueue.delete(deckId);
-    if (!ops || ops.length === 0) continue;
-    try {
-      if (ops[0].op === "full-replace") {
-        const deck = ops[0].deck;
-        void fetch(saveDeckUrl, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-            "X-Agent-Native-Frontend": "1",
-          },
-          body: JSON.stringify({ deckId, deck }),
-          keepalive: true,
-        });
-        const trailingOps = ops.slice(1) as PatchDeckOp[];
-        if (trailingOps.length === 0) continue;
-        void fetch(actionUrl, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "X-Agent-Native-Frontend": "1",
-          },
-          body: JSON.stringify({
-            deckId,
-            operations: trailingOps,
-          }),
-          keepalive: true,
-        });
-      } else {
-        void fetch(actionUrl, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "X-Agent-Native-Frontend": "1",
-          },
-          body: JSON.stringify({
-            deckId,
-            operations: ops as PatchDeckOp[],
-          }),
-          keepalive: true,
-        });
-      }
-    } catch {
-      // Best-effort — nothing more we can do as the page is unloading.
-    }
+export function flushPendingSaves() {
+  for (const deckId of [...pendingSaves.keys()]) {
+    void drainPendingDeckOps(deckId, { keepalive: true });
   }
-  pendingSaves.clear();
-  notifySaveListeners();
 }
 
 function discardPendingDeckOps(deckId: string) {

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -182,7 +182,9 @@ export default function DeckEditor() {
   const { hasUnsavedChanges: hasUnsavedSave } = useSaveState();
   const hasPendingDeckEdits =
     inlineEditActive || (id ? hasUnsavedDeckChanges(id) : hasUnsavedSave);
-  usePendingDeckUnloadGuard(hasPendingDeckEdits);
+  // Inline drafts flush through SlideEditor keepalive handlers. The native
+  // prompt only needs to cover queued or in-flight writes now.
+  usePendingDeckUnloadGuard(id ? hasUnsavedDeckChanges(id) : hasUnsavedSave);
   const pendingDeckNavigationBlocker = useBlocker(
     useCallback(
       ({ currentLocation, nextLocation }) =>

package/corpus/templates/slides/changelog/2026-08-26-thumbnail-arrow-keys-now-navigate-slides-after-selection.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-26
+---
+
+Clicking a slide thumbnail now keeps arrow keys on slide navigation instead of scrolling the thumbnail pane.

package/dist/client/embed-auth.js

@@ -291,8 +291,10 @@ function isOpaqueOriginFrame(win) {
 function stripTokenFromUrl(win) {
     // Keep the token in the URL for opaque-origin frames — see
     // isOpaqueOriginFrame. Stripping it there breaks re-auth on any document
-    // reload. Referrer-Policy is set to no-referrer on embed responses, so the
-    // retained token does not leak via the Referer header.
+    // reload. Embed responses now use Referrer-Policy: same-origin, but that
+    // never leaks the retained token here: an opaque origin never equals any
+    // other origin (including its own), so "same-origin" requests from this
+    // document never qualify and no Referer is sent at all.
     if (isOpaqueOriginFrame(win))
         return;
     try {

package/dist/client/hooks/index.d.ts

@@ -10,5 +10,6 @@ export { createAgentNativeQueryClient } from "../create-query-client.js";
 export { AppProviders, type AppProvidersProps } from "../app-providers.js";
 export { APP_CHAT_SIDEBAR_STATE_EVENT, APP_CHAT_SIDEBAR_STATE_MESSAGE, APP_CHAT_SIDEBAR_STATE_REQUEST_MESSAGE, buildAppChatSidebarStateMessage, buildAppChatSidebarStateRequest, isPerAppChatStorageKey, requestPerAppChatCommand, usePerAppChatState, usePerAppChatOpen, type AppChatSidebarCommand, type AppChatSidebarState, } from "../app-chat-sidebar.js";
 export { usePinchZoom, type UsePinchZoomOptions } from "../use-pinch-zoom.js";
+export { isPinchZoomDelta, normalizeWheelDeltaPx, resolveZoomGestureDevice, MAX_PINCH_DELTA_PX, ZOOM_GESTURE_IDLE_RESET_MS, type ZoomGestureDevice, } from "../zoom-gesture.js";
 export { useAvatarUrl, uploadAvatar, invalidateAvatarCache, } from "../use-avatar.js";
 export { usePollLoop, type UsePollLoopOptions, type UsePollLoopHandle, } from "../use-poll-loop.js";

package/dist/client/hooks/index.js

@@ -10,5 +10,6 @@ export { createAgentNativeQueryClient } from "../create-query-client.js";
 export { AppProviders } from "../app-providers.js";
 export { APP_CHAT_SIDEBAR_STATE_EVENT, APP_CHAT_SIDEBAR_STATE_MESSAGE, APP_CHAT_SIDEBAR_STATE_REQUEST_MESSAGE, buildAppChatSidebarStateMessage, buildAppChatSidebarStateRequest, isPerAppChatStorageKey, requestPerAppChatCommand, usePerAppChatState, usePerAppChatOpen, } from "../app-chat-sidebar.js";
 export { usePinchZoom } from "../use-pinch-zoom.js";
+export { isPinchZoomDelta, normalizeWheelDeltaPx, resolveZoomGestureDevice, MAX_PINCH_DELTA_PX, ZOOM_GESTURE_IDLE_RESET_MS, } from "../zoom-gesture.js";
 export { useAvatarUrl, uploadAvatar, invalidateAvatarCache, } from "../use-avatar.js";
 export { usePollLoop, } from "../use-poll-loop.js";

package/dist/client/use-pinch-zoom.js

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react";
+import { clampZoomFactor, normalizeWheelDeltaPx, resolveZoomGestureDevice, zoomFactorForWheelDelta, } from "./zoom-gesture.js";
 /**
  * Pinch-to-zoom for canvas-style editors. Wires the trackpad pinch / Cmd+scroll
  * wheel gesture and 2-pointer touchscreen pinch onto a scrolling container.
@@ -46,6 +47,7 @@ export function usePinchZoom({ containerRef, zoom, setZoom, min = 25, max = 400,
         let simScrollLeft = 0;
         let simScrollTop = 0;
         let rafId = null;
+        let gestureDevice = null;
         const flush = () => {
             rafId = null;
             if (pendingZoom === null)
@@ -68,13 +70,23 @@ export function usePinchZoom({ containerRef, zoom, setZoom, min = 25, max = 400,
         const handleWheel = (e) => {
             if (!(e.ctrlKey || e.metaKey))
                 return;
-            e.preventDefault();
+            // Chrome sends non-cancelable wheel events during a fling; cancelling one
+            // is a no-op that logs an Intervention per event and still scrolls.
+            if (e.cancelable)
+                e.preventDefault();
+            gestureDevice = resolveZoomGestureDevice({
+                deltaY: e.deltaY,
+                deltaMode: e.deltaMode,
+                ctrlKey: e.ctrlKey,
+                metaKey: e.metaKey,
+                atMs: e.timeStamp,
+                previous: gestureDevice,
+            });
             // Use the latest not-yet-applied zoom (if a flush is pending) so rapid
             // wheel events within the same frame compound correctly instead of
             // each computing off the last-committed React state.
             const currentZoom = pendingZoom ?? zoomRef.current;
-            const clampedDelta = Math.max(-50, Math.min(50, e.deltaY));
-            const factor = Math.exp(-clampedDelta * 0.01);
+            const factor = clampZoomFactor(zoomFactorForWheelDelta(normalizeWheelDeltaPx(e.deltaY, e.deltaMode), gestureDevice.pinch));
             const nextZoom = clamp(currentZoom * factor);
             if (nextZoom === currentZoom)
                 return;
@@ -137,7 +149,8 @@ export function usePinchZoom({ containerRef, zoom, setZoom, min = 25, max = 400,
                     pendingZoom = nextZoom;
                     scheduleFlush();
                 }
-                e.preventDefault();
+                if (e.cancelable)
+                    e.preventDefault();
             }
         };
         const handlePointerEnd = (e) => {

package/dist/client/zoom-gesture.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Wheel/pinch → zoom-factor conversion, shared by every zoomable canvas.
+ *
+ * A mouse wheel and a trackpad pinch arrive as the same event type, their
+ * deltas overlap, and the sensitivity each needs differs by roughly 8x — so a
+ * surface that re-implements either half gets the split wrong the same way.
+ */
+/**
+ * Largest |deltaY| finger separation produces; above it every device is a
+ * wheel. macOS reports an accelerated mouse wheel as large FRACTIONAL deltas,
+ * so fractionality alone cannot separate the two.
+ */
+export declare const MAX_PINCH_DELTA_PX = 40;
+/**
+ * A ctrl/meta wheel run with a longer gap than this starts a new gesture and
+ * the device is classified again.
+ */
+export declare const ZOOM_GESTURE_IDLE_RESET_MS = 150;
+/** Which curve a zoom gesture's deltas run through, latched for its duration. */
+export type ZoomGestureDevice = {
+    pinch: boolean;
+    lastEventAtMs: number;
+};
+/**
+ * Whether a delta is small enough to be finger separation. Magnitude only —
+ * `resolveZoomGestureDevice` owns the modifier and delta-mode part of the
+ * decision, and is what callers should ask.
+ */
+export declare function isPinchZoomDelta(deltaY: number): boolean;
+/**
+ * Latch the input device for a zoom gesture: one delta cannot identify a device
+ * (macOS ramps an accelerated wheel up from pinch-sized values), so this only
+ * ever loosens pinch → wheel, and re-decides after an idle gap.
+ */
+export declare function resolveZoomGestureDevice(args: {
+    deltaY: number;
+    deltaMode: number;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    atMs: number;
+    previous: ZoomGestureDevice | null;
+}): ZoomGestureDevice;
+/** One mouse-wheel detent in `deltaMode === 0` pixels (Chrome/Safari). */
+export declare const MOUSE_WHEEL_NOTCH_PX = 100;
+/** Zoom multiplier for one full mouse-wheel notch, matching Figma's feel. */
+export declare const ZOOM_STEP_PER_NOTCH = 1.1;
+/** Multiplier exponent per pixel of trackpad pinch delta. */
+export declare const PINCH_ZOOM_SENSITIVITY = 0.0075;
+/** Ceiling on a single frame's zoom change, in either direction. */
+export declare const MAX_ZOOM_FACTOR_PER_FRAME = 1.6;
+/** Pixels one `DOM_DELTA_LINE` step stands for. */
+export declare const WHEEL_LINE_HEIGHT_PX = 16;
+/** Pixels one `DOM_DELTA_PAGE` step stands for. */
+export declare const WHEEL_PAGE_HEIGHT_PX = 800;
+/**
+ * Convert a delta to pixels. The curves below are calibrated in pixels, so a
+ * Firefox line-mode tick of 3 is a full notch, not 3px of travel. Classify
+ * with the RAW delta and its real mode — normalising first would push a line
+ * tick into the pinch band.
+ */
+export declare function normalizeWheelDeltaPx(delta: number, deltaMode: number): number;
+/** Unclamped zoom multiplier for a wheel/pinch delta. Negative delta (scroll
+ *  up / pinch open) zooms in, matching the browser's wheel convention. */
+export declare function zoomFactorForWheelDelta(deltaY: number, pinch: boolean): number;
+/** Bounds one frame's zoom change symmetrically in multiplicative space, so
+ *  zooming in and back out by the same clamped amount is a round trip. */
+export declare function clampZoomFactor(factor: number): number;
+/**
+ * Fold one event into a frame's accumulated zoom. Both curves are exponential
+ * in the delta, so multiplying per-event factors equals summing same-curve
+ * deltas — and unlike a delta sum it stays exact when a frame catches two
+ * curves, instead of forcing the accumulator to discard one of them.
+ */
+export declare function accumulateZoomFactor(pendingFactor: number, deltaY: number, pinch: boolean): number;

package/dist/client/zoom-gesture.js

@@ -0,0 +1,100 @@
+/**
+ * Wheel/pinch → zoom-factor conversion, shared by every zoomable canvas.
+ *
+ * A mouse wheel and a trackpad pinch arrive as the same event type, their
+ * deltas overlap, and the sensitivity each needs differs by roughly 8x — so a
+ * surface that re-implements either half gets the split wrong the same way.
+ */
+/**
+ * Largest |deltaY| finger separation produces; above it every device is a
+ * wheel. macOS reports an accelerated mouse wheel as large FRACTIONAL deltas,
+ * so fractionality alone cannot separate the two.
+ */
+export const MAX_PINCH_DELTA_PX = 40;
+/**
+ * A ctrl/meta wheel run with a longer gap than this starts a new gesture and
+ * the device is classified again.
+ */
+export const ZOOM_GESTURE_IDLE_RESET_MS = 150;
+/**
+ * Whether a delta is small enough to be finger separation. Magnitude only —
+ * `resolveZoomGestureDevice` owns the modifier and delta-mode part of the
+ * decision, and is what callers should ask.
+ */
+export function isPinchZoomDelta(deltaY) {
+    if (!Number.isFinite(deltaY))
+        return false;
+    return Math.abs(deltaY) < MAX_PINCH_DELTA_PX;
+}
+/**
+ * Latch the input device for a zoom gesture: one delta cannot identify a device
+ * (macOS ramps an accelerated wheel up from pinch-sized values), so this only
+ * ever loosens pinch → wheel, and re-decides after an idle gap.
+ */
+export function resolveZoomGestureDevice(args) {
+    const { deltaY, deltaMode, ctrlKey, metaKey, atMs, previous } = args;
+    const at = Number.isFinite(atMs) ? atMs : 0;
+    // Line/page modes are always discrete wheels. A held Cmd means the user
+    // reached for a modifier, so the wheel is whatever device they are holding —
+    // only the browser's synthetic ctrl+wheel can be a trackpad pinch.
+    const looksLikePinch = deltaMode === 0 && ctrlKey && !metaKey && isPinchZoomDelta(deltaY);
+    const continuesGesture = previous !== null &&
+        Number.isFinite(previous.lastEventAtMs) &&
+        at - previous.lastEventAtMs <= ZOOM_GESTURE_IDLE_RESET_MS;
+    if (!continuesGesture)
+        return { pinch: looksLikePinch, lastEventAtMs: at };
+    return { pinch: previous.pinch && looksLikePinch, lastEventAtMs: at };
+}
+/** One mouse-wheel detent in `deltaMode === 0` pixels (Chrome/Safari). */
+export const MOUSE_WHEEL_NOTCH_PX = 100;
+/** Zoom multiplier for one full mouse-wheel notch, matching Figma's feel. */
+export const ZOOM_STEP_PER_NOTCH = 1.1;
+/** Multiplier exponent per pixel of trackpad pinch delta. */
+export const PINCH_ZOOM_SENSITIVITY = 0.0075;
+/** Ceiling on a single frame's zoom change, in either direction. */
+export const MAX_ZOOM_FACTOR_PER_FRAME = 1.6;
+/** Pixels one `DOM_DELTA_LINE` step stands for. */
+export const WHEEL_LINE_HEIGHT_PX = 16;
+/** Pixels one `DOM_DELTA_PAGE` step stands for. */
+export const WHEEL_PAGE_HEIGHT_PX = 800;
+/**
+ * Convert a delta to pixels. The curves below are calibrated in pixels, so a
+ * Firefox line-mode tick of 3 is a full notch, not 3px of travel. Classify
+ * with the RAW delta and its real mode — normalising first would push a line
+ * tick into the pinch band.
+ */
+export function normalizeWheelDeltaPx(delta, deltaMode) {
+    if (!Number.isFinite(delta))
+        return 0;
+    if (deltaMode === 1)
+        return delta * WHEEL_LINE_HEIGHT_PX;
+    if (deltaMode === 2)
+        return delta * WHEEL_PAGE_HEIGHT_PX;
+    return delta;
+}
+/** Unclamped zoom multiplier for a wheel/pinch delta. Negative delta (scroll
+ *  up / pinch open) zooms in, matching the browser's wheel convention. */
+export function zoomFactorForWheelDelta(deltaY, pinch) {
+    if (!Number.isFinite(deltaY) || deltaY === 0)
+        return 1;
+    return pinch
+        ? Math.exp(-deltaY * PINCH_ZOOM_SENSITIVITY)
+        : Math.pow(ZOOM_STEP_PER_NOTCH, -deltaY / MOUSE_WHEEL_NOTCH_PX);
+}
+/** Bounds one frame's zoom change symmetrically in multiplicative space, so
+ *  zooming in and back out by the same clamped amount is a round trip. */
+export function clampZoomFactor(factor) {
+    if (!Number.isFinite(factor) || factor <= 0)
+        return 1;
+    return Math.min(MAX_ZOOM_FACTOR_PER_FRAME, Math.max(1 / MAX_ZOOM_FACTOR_PER_FRAME, factor));
+}
+/**
+ * Fold one event into a frame's accumulated zoom. Both curves are exponential
+ * in the delta, so multiplying per-event factors equals summing same-curve
+ * deltas — and unlike a delta sum it stays exact when a frame catches two
+ * curves, instead of forcing the accumulator to discard one of them.
+ */
+export function accumulateZoomFactor(pendingFactor, deltaY, pinch) {
+    const base = Number.isFinite(pendingFactor) && pendingFactor > 0 ? pendingFactor : 1;
+    return base * zoomFactorForWheelDelta(deltaY, pinch);
+}