@agent-native/core 0.175.2-nightly-20260826150235 → 0.175.3

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -5,6 +5,13 @@ import {
 } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
 import { type ReviewThread } from "@agent-native/core/client/review";
+import {
+  clampZoomFactor,
+  normalizeWheelDeltaPx,
+  resolveZoomGestureDevice,
+  zoomFactorForWheelDelta,
+  type ZoomGestureDevice,
+} from "@agent-native/core/client/zoom-gesture";
 import type { ReviewComment } from "@agent-native/core/review";
 import { injectDocumentMarkup } from "@agent-native/core/shared";
 import { isLoopbackPreviewAllowed } from "@shared/builder-preview-url";
@@ -1239,6 +1246,7 @@ export function DesignCanvas({
   // Queue them here until ready fires (or the iframe finishes loading, as a
   // fallback for older/interact-mode documents that never inject the chrome
   // bridge and thus never post ready) and flush in order.
+  const pinchZoomDeviceRef = useRef<ZoomGestureDevice | null>(null);
   const bridgeReadyRef = useRef(false);
   const [readyIframeDocumentIdentity, setReadyIframeDocumentIdentity] =
     useState<string | null>(null);
@@ -1517,6 +1525,19 @@ export function DesignCanvas({
         .replace("__EDITING_SAFETY_ENABLED__", interactMode ? "false" : "true"),
     [interactMode],
   );
+  // srcdoc is rebuilt per document, so unlike the keyed live-edit bundle above
+  // it can carry the real first-paint value: forwarding that arrives only by
+  // postMessage stays dead until the handshake, and is stranded by a swap.
+  const embeddedGestureBridgeForSrcdoc = useMemo(
+    () =>
+      EMBEDDED_WHEEL_BRIDGE_SCRIPT.replace(
+        "__EMBEDDED_WHEEL_FORWARDING_ENABLED__",
+        isEmbeddedFrame && !interactMode ? "true" : "false",
+      )
+        .replace("__EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__", "false")
+        .replace("__EDITING_SAFETY_ENABLED__", interactMode ? "false" : "true"),
+    [interactMode, isEmbeddedFrame],
+  );
   const includeLiveEditEditorChrome = !interactMode && !readOnly;
   const liveEditBridgeScript = useMemo(
     () =>
@@ -2420,7 +2441,7 @@ export function DesignCanvas({
       ZOOM_BRIDGE_SCRIPT +
       NAV_BRIDGE_SCRIPT +
       LIGHTWEIGHT_HIT_TEST_BRIDGE_SCRIPT +
-      embeddedGestureBridgeForCurrentState +
+      embeddedGestureBridgeForSrcdoc +
       editorChromeBridge +
       imageDiagBridge;
     const frameContent = getEmbeddedFrameDocumentContent({
@@ -2468,7 +2489,7 @@ export function DesignCanvas({
     interactMode,
     isEmbeddedFrame,
     embeddedFrameBackground,
-    embeddedGestureBridgeForCurrentState,
+    embeddedGestureBridgeForSrcdoc,
     iframeRenderContent,
     transparentBackground,
   ]);
@@ -3147,6 +3168,10 @@ export function DesignCanvas({
         return;
       }
       if (e.data.type === "pinch-zoom-wheel") {
+        // An embedded frame's zoom belongs to the parent canvas, which already
+        // gets the same gesture as embedded-canvas-wheel. Both bridges are
+        // installed in every document, so without this the two apply twice.
+        if (isEmbeddedFrame) return;
         if (!onZoomChange) return;
         const iframe = iframeRef.current;
         const scroll = scrollContainerRef.current;
@@ -3158,15 +3183,26 @@ export function DesignCanvas({
         // handler above applies to its own wheel deltas/coordinates).
         const rawDeltaY = Number(e.data.deltaY);
         if (!Number.isFinite(rawDeltaY)) return;
-        // Mirror usePinchZoom's algorithm here. We can't reliably re-dispatch
-        // a synthetic WheelEvent to trigger the hook's listener — untrusted
-        // events are inconsistent across browsers — so just compute the
-        // next zoom directly using the same exponential factor + cursor-anchor
-        // math. Clamp range matches the usePinchZoom call above
-        // (DEFAULT_CANVAS_MIN_ZOOM–DEFAULT_CANVAS_MAX_ZOOM).
+        // A synthetic WheelEvent cannot reliably reach usePinchZoom's listener,
+        // so this path computes the factor itself — from the same module, never
+        // re-derived by hand, or the two curves drift apart again.
+        const forwardedMode = Number(e.data.deltaMode);
+        const deltaMode = Number.isFinite(forwardedMode) ? forwardedMode : 0;
+        pinchZoomDeviceRef.current = resolveZoomGestureDevice({
+          deltaY: rawDeltaY,
+          deltaMode,
+          ctrlKey: Boolean(e.data.ctrlKey),
+          metaKey: Boolean(e.data.metaKey),
+          atMs: performance.now(),
+          previous: pinchZoomDeviceRef.current,
+        });
         const currentZoom = zoomRef.current;
-        const clampedDelta = Math.max(-50, Math.min(50, rawDeltaY));
-        const factor = Math.exp(-clampedDelta * 0.01);
+        const factor = clampZoomFactor(
+          zoomFactorForWheelDelta(
+            normalizeWheelDeltaPx(rawDeltaY, deltaMode),
+            pinchZoomDeviceRef.current.pinch,
+          ),
+        );
         const nextZoom = Math.max(
           DEFAULT_CANVAS_MIN_ZOOM,
           Math.min(DEFAULT_CANVAS_MAX_ZOOM, currentZoom * factor),

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -4,7 +4,9 @@ import {
 } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
 import {
+  CANVAS_FIT_PADDING_PX,
   DEFAULT_CANVAS_MAX_ZOOM,
+  DEFAULT_CANVAS_AUTOFIT_MIN_ZOOM,
   DEFAULT_CANVAS_MIN_ZOOM,
   DEFAULT_SNAP_THRESHOLD_SCREEN_PX,
   canvasToScreenPoint,
@@ -178,7 +180,10 @@ const EMPTY_SCREEN_IDS: readonly string[] = [];
 // redeclared locally and drifting from the shared constant.
 const MIN_ZOOM = DEFAULT_CANVAS_MIN_ZOOM;
 const MAX_ZOOM = DEFAULT_CANVAS_MAX_ZOOM;
-const MAX_WHEEL_PAN_DELTA = 140;
+const AUTOFIT_MIN_ZOOM = DEFAULT_CANVAS_AUTOFIT_MIN_ZOOM;
+// Must match embedded-wheel.bridge.ts's payload bound, or every fast swipe
+// arriving over a screen loses its tail to the tighter of the two clamps.
+const MAX_WHEEL_PAN_DELTA = 240;
 /** Live counter-scale for constant-size frame chrome, written on the world
  *  element every gesture frame by applyViewToDom. React supplies the same
  *  number as the var's fallback, so first paint and SSR are unaffected. */
@@ -379,9 +384,12 @@ import {
 import type { AlignmentGuide, CanvasFrameEntry } from "./multi-screen/types";
 import { vectorEditCanvasToLocalPoint } from "./multi-screen/vector-edit-geometry";
 import {
-  isPinchZoomDelta,
+  accumulateZoomFactor,
+  clampZoomFactor,
+  normalizeWheelDeltaPx,
   resolveExternalZoomAnchor,
-  resolveZoomFactor,
+  resolveZoomGestureDevice,
+  type ZoomGestureDevice,
 } from "./multi-screen/zoom-gesture";
 
 /**
@@ -1003,7 +1011,18 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
    *  reply overwrites the selection the user actually made. */
   const drillInRequestRef = useRef(0);
   const feedbackTimerRef = useRef<number | null>(null);
-  const pendingWheelGestureRef = useRef<PendingWheelGesture | null>(null);
+  // Two slots, not one: Cmd pressed or released mid-scroll turns a single
+  // physical stream into interleaved zoom and pan ticks, and a shared slot
+  // drops whichever kind the other overwrote.
+  const pendingZoomGestureRef = useRef<Extract<
+    PendingWheelGesture,
+    { mode: "zoom" }
+  > | null>(null);
+  const pendingPanGestureRef = useRef<Extract<
+    PendingWheelGesture,
+    { mode: "pan" }
+  > | null>(null);
+  const zoomGestureDeviceRef = useRef<ZoomGestureDevice | null>(null);
   const wheelGestureFrameRef = useRef<number | null>(null);
   const worldRef = useRef<HTMLDivElement>(null);
   const pixelGridRef = useRef<HTMLDivElement>(null);
@@ -1649,12 +1668,15 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     const boundsTop = bounds?.top ?? 0;
     // Leave a Figma-like board gutter beside the last frame for quick drops/draws,
     // and fit tall single frames so lower canvas interactions remain reachable.
+    const minFitScale = AUTOFIT_MIN_ZOOM / 100;
     const widthFitScale =
       renderedScreens.length > 1 && totalWidth > 0
-        ? Math.max(0.1, (rect.width - 180) / totalWidth)
+        ? Math.max(minFitScale, (rect.width - 180) / totalWidth)
         : scale;
     const heightFitScale =
-      totalHeight > 0 ? Math.max(0.1, (rect.height - 96) / totalHeight) : scale;
+      totalHeight > 0
+        ? Math.max(minFitScale, (rect.height - 96) / totalHeight)
+        : scale;
     const nextScale = Math.min(scale, widthFitScale, heightFitScale);
     if (nextScale < scale) {
       const nextZoom = nextScale * 100;
@@ -1662,8 +1684,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       setCanvasZoom(nextZoom);
       onZoomChange?.(nextZoom);
     }
-    const visualLeft = Math.max(24, (rect.width - totalWidth * nextScale) / 2);
-    const visualTop = Math.max(24, (rect.height - totalHeight * nextScale) / 2);
+    // Genuinely centred, including when content overflows: flooring these
+    // pins an oversized lineup against one edge and runs it off the other.
+    const visualLeft = (rect.width - totalWidth * nextScale) / 2;
+    const visualTop = (rect.height - totalHeight * nextScale) / 2;
     const nextPan = {
       x: visualLeft - (SURFACE_PADDING + boundsLeft) * nextScale,
       y: visualTop - (SURFACE_PADDING + boundsTop) * nextScale,
@@ -7050,7 +7074,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         cameraCommand.fitBounds,
         { width: rect.width, height: rect.height },
         {
-          paddingScreenPx: cameraCommand.paddingScreenPx ?? 64,
+          paddingScreenPx:
+            cameraCommand.paddingScreenPx ?? CANVAS_FIT_PADDING_PX,
           // Frame geometry is canvas-space, while every frame DOM node lives
           // inside the padded world. Include that shared origin so fitting a
           // small drawn/preset frame actually centers its painted card.
@@ -7147,70 +7172,65 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
 
   const flushPendingWheelGesture = useCallback(() => {
     wheelGestureFrameRef.current = null;
-    const gesture = pendingWheelGestureRef.current;
-    pendingWheelGestureRef.current = null;
-    if (!gesture) return;
+    const zoomGesture = pendingZoomGestureRef.current;
+    const panGesture = pendingPanGestureRef.current;
+    pendingZoomGestureRef.current = null;
+    pendingPanGestureRef.current = null;
+
+    let nextPan = panRef.current;
+    let moved = false;
+    let settleChrome = false;
 
-    if (gesture.mode === "zoom") {
+    if (zoomGesture) {
       const currentZoom = zoomRef.current;
       const nextZoom = clamp(
-        currentZoom * resolveZoomFactor(gesture.deltaY, gesture.pinch),
+        currentZoom * clampZoomFactor(zoomGesture.factor),
         MIN_ZOOM,
         MAX_ZOOM,
       );
-      if (nextZoom === currentZoom) return;
+      if (nextZoom !== currentZoom) {
+        nextPan = getPanForZoomToCursor({
+          pan: nextPan,
+          cursor: zoomGesture.cursor,
+          oldZoom: currentZoom,
+          nextZoom,
+        });
+        zoomRef.current = nextZoom;
+        moved = true;
+        settleChrome = true;
+      }
+    }
 
-      const nextPan = getPanForZoomToCursor({
-        pan: panRef.current,
-        cursor: gesture.cursor,
-        oldZoom: currentZoom,
-        nextZoom,
-      });
-      zoomRef.current = nextZoom;
-      panRef.current = nextPan;
-      markWheelGestureActive();
-      applyViewToDom();
-      scheduleViewCommit({ settleChrome: true });
-      return;
+    if (panGesture) {
+      nextPan = {
+        x: nextPan.x - panGesture.deltaX,
+        y: nextPan.y - panGesture.deltaY,
+      };
+      moved = true;
     }
 
-    const nextPan = {
-      x: panRef.current.x - gesture.deltaX,
-      y: panRef.current.y - gesture.deltaY,
-    };
+    if (!moved) return;
     panRef.current = nextPan;
     markWheelGestureActive();
     applyViewToDom();
-    scheduleViewCommit();
+    scheduleViewCommit(settleChrome ? { settleChrome: true } : undefined);
   }, [applyViewToDom, markWheelGestureActive, scheduleViewCommit]);
 
   const enqueueWheelGesture = useCallback(
     (gesture: PendingWheelGesture) => {
-      const pending = pendingWheelGestureRef.current;
-      // Only accumulate like with like: a pinch delta and a wheel notch map to
-      // zoom through different curves, so summing them would apply one curve to
-      // the other's units.
-      if (
-        pending?.mode === "zoom" &&
-        gesture.mode === "zoom" &&
-        pending.pinch === gesture.pinch
-      ) {
-        pendingWheelGestureRef.current = {
-          mode: "zoom",
-          deltaY: pending.deltaY + gesture.deltaY,
-          pinch: gesture.pinch,
-          cursor: gesture.cursor,
-          clientX: gesture.clientX,
-          clientY: gesture.clientY,
+      if (gesture.mode === "zoom") {
+        const pending = pendingZoomGestureRef.current;
+        pendingZoomGestureRef.current = {
+          ...gesture,
+          factor: (pending?.factor ?? 1) * gesture.factor,
         };
-      } else if (pending?.mode === "pan" && gesture.mode === "pan") {
-        pendingWheelGestureRef.current = {
+      } else {
+        const pending = pendingPanGestureRef.current;
+        pendingPanGestureRef.current = {
           mode: "pan",
-          deltaX: pending.deltaX + gesture.deltaX,
-          deltaY: pending.deltaY + gesture.deltaY,
+          deltaX: (pending?.deltaX ?? 0) + gesture.deltaX,
+          deltaY: (pending?.deltaY ?? 0) + gesture.deltaY,
         };
-      } else {
-        pendingWheelGestureRef.current = gesture;
       }
 
       if (wheelGestureFrameRef.current !== null) return;
@@ -7244,13 +7264,18 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         // no forced style/layout read on the hot pan path.
         const rect = surfaceRef.current?.getBoundingClientRect();
         if (!rect) return;
-        // Raw delta: the per-frame clamp lives on the zoom FACTOR now (see
-        // resolveZoomFactor), so accumulation stays frame-rate independent.
-        // Line/page delta modes are always discrete wheels, never a pinch.
+        const device = resolveZoomGestureDevice({
+          deltaY: args.deltaY,
+          deltaMode: args.deltaMode,
+          ctrlKey: args.ctrlKey,
+          metaKey: args.metaKey,
+          atMs: performance.now(),
+          previous: zoomGestureDeviceRef.current,
+        });
+        zoomGestureDeviceRef.current = device;
         enqueueWheelGesture({
           mode: "zoom",
-          deltaY: delta.y,
-          pinch: args.deltaMode === 0 && isPinchZoomDelta(args.deltaY),
+          factor: accumulateZoomFactor(1, delta.y, device.pinch),
           cursor: {
             x: args.clientX - rect.left,
             y: args.clientY - rect.top,
@@ -7289,7 +7314,9 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       if (!event.isTrusted) return;
       // Pan/zoom mid-drag invalidates the gesture's cached snap viewport.
       invalidateSnapGesture();
-      event.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 (event.cancelable) event.preventDefault();
       event.stopPropagation();
       enqueueWheelGestureFromClient({
         deltaX: event.deltaX,
@@ -11586,10 +11613,9 @@ function getWheelDeltaFromValues(
   deltaY: number,
   deltaMode: number,
 ) {
-  const multiplier = deltaMode === 1 ? 16 : deltaMode === 2 ? 800 : 1;
   return {
-    x: deltaX * multiplier,
-    y: deltaY * multiplier,
+    x: normalizeWheelDeltaPx(deltaX, deltaMode),
+    y: normalizeWheelDeltaPx(deltaY, deltaMode),
   };
 }
 

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -5717,7 +5717,9 @@ declare var __INITIAL_SOURCE_HEAD__: string;
   }
 
   function stopNativeInteraction(e: Event): void {
-    e.preventDefault();
+    // A fling's wheel events are not cancelable; cancelling one logs a browser
+    // Intervention per event and scrolls anyway.
+    if (e.cancelable) e.preventDefault();
     e.stopPropagation();
     if (e.stopImmediatePropagation) e.stopImmediatePropagation();
   }

package/corpus/templates/design/app/components/design/bridge/embedded-wheel.bridge.ts

@@ -96,7 +96,9 @@ declare var __EDITING_SAFETY_ENABLED__: boolean;
   }
 
   function stopNativeInteraction(e: Event): void {
-    e.preventDefault();
+    // A fling's wheel events are not cancelable; cancelling one logs a browser
+    // Intervention per event and scrolls anyway.
+    if (e.cancelable) e.preventDefault();
     e.stopPropagation();
     if (e.stopImmediatePropagation) e.stopImmediatePropagation();
   }
@@ -120,7 +122,11 @@ declare var __EDITING_SAFETY_ENABLED__: boolean;
   }
 
   function onWheel(e: WheelEvent): void {
-    if (!wheelEnabled) return;
+    // Zoom forwards whatever the pan flag says: the flag only arrives by
+    // postMessage and a document swap strands it, while the zoom bridge cancels
+    // ctrl/meta wheel here regardless — so gating it makes the gesture vanish.
+    var zoomIntent = !!(e.ctrlKey || e.metaKey);
+    if (!wheelEnabled && !zoomIntent) return;
     stopNativeInteraction(e);
     postToParent({
       type: "embedded-canvas-wheel",

package/corpus/templates/design/app/components/design/bridge/zoom.bridge.ts

@@ -8,7 +8,8 @@
  *
  * Protocol (iframe → parent):
  *
- *   { type: 'pinch-zoom-wheel', deltaY, clientX, clientY }
+ *   { type: 'pinch-zoom-wheel', deltaY, deltaMode, clientX, clientY,
+ *     ctrlKey, metaKey }
  *
  * Rules:
  *   • No import/require of any module (DOM globals only).
@@ -23,7 +24,9 @@
     document.documentElement || document.body || document;
   function onWheel(e: WheelEvent): void {
     if (!(e.ctrlKey || e.metaKey)) return;
-    e.preventDefault();
+    // A fling's wheel events are not cancelable; cancelling one logs a browser
+    // Intervention per event and scrolls anyway.
+    if (e.cancelable) e.preventDefault();
     try {
       (window.parent as Window).postMessage(
         {
@@ -31,6 +34,12 @@
           deltaY: e.deltaY,
           clientX: e.clientX,
           clientY: e.clientY,
+          // The parent classifies and scales from these three. Dropping the
+          // modifiers puts every pinch on the notch curve; dropping the mode
+          // makes a Firefox line tick read as 3px of travel.
+          deltaMode: e.deltaMode,
+          ctrlKey: !!e.ctrlKey,
+          metaKey: !!e.metaKey,
         },
         "*",
       );

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -857,10 +857,9 @@ export type DragState =
 export type PendingWheelGesture =
   | {
       mode: "zoom";
-      deltaY: number;
-      /** Trackpad pinch rather than a discrete mouse notch — the two use
-       *  different sensitivities, so accumulation must not mix them. */
-      pinch: boolean;
+      /** Already-curved multiplier, not a raw delta: the two devices' curves
+       *  differ, so only the factor is safe to accumulate across events. */
+      factor: number;
       cursor: Point;
       clientX: number;
       clientY: number;

package/corpus/templates/design/app/components/design/multi-screen/zoom-gesture.ts

@@ -1,69 +1,25 @@
 /**
- * Wheel/pinch → zoom-factor conversion.
+ * Wheel/pinch zoom for the overview canvas.
  *
- * The two input devices are not comparable and must not share a sensitivity.
- * A mouse wheel emits coarse, discrete notches (one detent ≈ 100px in Chrome's
- * pixel delta mode); a trackpad pinch emits fine, often fractional deltas at a
- * far higher rate. Feeding both through one `exp(-deltaY * 0.01)` meant a
- * single mouse notch multiplied zoom by e¹ ≈ 2.72× — which is what made canvas
- * zoom feel uncontrollable next to Figma's ~1.1× per notch.
- *
- * The clamp applies to the resulting FACTOR, not to the accumulated delta.
- * Clamping the delta made the step frame-rate dependent: deltas accumulate
- * between animation frames, so a dropped frame silently doubled the distance
- * travelled. Clamping the factor means a dropped frame costs smoothness, never
- * distance.
- */
-
-/** 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;
-
-/**
- * Whether a ctrl/meta-modified wheel delta came from a trackpad pinch rather
- * than a mouse wheel. Browsers report macOS pinch as a synthetic ctrl+wheel
- * with small, frequently fractional pixel deltas, while a real wheel detent is
- * a whole number near the notch size. Only meaningful for `deltaMode === 0`;
- * line/page modes are always discrete wheels and callers must not ask.
+ * The device split and both curves are shared, because a surface that
+ * re-implements either half reproduces the same mouse-reads-as-pinch bug.
+ * Only the anchor below belongs to this surface.
  */
-export function isPinchZoomDelta(deltaY: number): boolean {
-  if (!Number.isFinite(deltaY)) return false;
-  return (
-    !Number.isInteger(deltaY) || Math.abs(deltaY) < MOUSE_WHEEL_NOTCH_PX / 2
-  );
-}
-
-/** 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: number,
-  pinch: boolean,
-): number {
-  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: number): number {
-  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),
-  );
-}
-
-/** The zoom multiplier to apply for one flushed gesture frame. */
-export function resolveZoomFactor(deltaY: number, pinch: boolean): number {
-  return clampZoomFactor(zoomFactorForWheelDelta(deltaY, pinch));
-}
+export {
+  accumulateZoomFactor,
+  clampZoomFactor,
+  isPinchZoomDelta,
+  MAX_PINCH_DELTA_PX,
+  MAX_ZOOM_FACTOR_PER_FRAME,
+  MOUSE_WHEEL_NOTCH_PX,
+  normalizeWheelDeltaPx,
+  PINCH_ZOOM_SENSITIVITY,
+  resolveZoomGestureDevice,
+  ZOOM_GESTURE_IDLE_RESET_MS,
+  ZOOM_STEP_PER_NOTCH,
+  zoomFactorForWheelDelta,
+  type ZoomGestureDevice,
+} from "@agent-native/core/client/zoom-gesture";
 
 /** Anchor for an externally driven zoom change. Only hold the frame centre when
  *  it is on screen: a frame taller than the viewport has its centre off-screen,

package/corpus/templates/design/app/pages/design-editor/overview-camera.ts

@@ -1,5 +1,6 @@
 import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
 import {
+  CANVAS_FIT_PADDING_PX,
   DEFAULT_CANVAS_MAX_ZOOM,
   DEFAULT_CANVAS_MIN_ZOOM,
   getCameraForBounds,
@@ -169,7 +170,7 @@ export function computeFitCameraForFrames(
   const bounds = getFrameGroupBounds(frames);
   if (!bounds) return null;
   return getCameraForBounds(bounds, viewport, {
-    paddingScreenPx: options?.paddingScreenPx ?? 64,
+    paddingScreenPx: options?.paddingScreenPx ?? CANVAS_FIT_PADDING_PX,
     minZoom: DEFAULT_CANVAS_MIN_ZOOM,
     maxZoom: DEFAULT_CANVAS_MAX_ZOOM,
     fallbackZoom: 100,

package/corpus/templates/design/shared/canvas-math.ts

@@ -282,6 +282,16 @@ export const DEFAULT_ASSIGNED_REGION_MAX_COLUMNS = 3;
 export const DEFAULT_CANVAS_MIN_ZOOM = 2;
 export const DEFAULT_CANVAS_MAX_ZOOM = 25600;
 
+/**
+ * Floor for the AUTOMATIC shrink-to-fit that runs on a screen-count change —
+ * never for an explicit Zoom to fit, which must be free to reach MIN_ZOOM or a
+ * board of more than ~9 screens in a row stops fitting.
+ */
+export const DEFAULT_CANVAS_AUTOFIT_MIN_ZOOM = 10;
+
+/** Breathing room a fit leaves around the fitted bounds, in screen px. */
+export const CANVAS_FIT_PADDING_PX = 64;
+
 export function screenToCanvasPoint(
   point: CanvasPoint,
   camera: CanvasCamera,
@@ -511,7 +521,7 @@ export function getCameraForBounds(
   bounds: FrameBounds | FrameGeometry | null,
   viewport: CanvasSize,
   {
-    paddingScreenPx = 48,
+    paddingScreenPx = CANVAS_FIT_PADDING_PX,
     canvasPadding = 0,
     minZoom = 10,
     maxZoom = 400,