waygraph 0.12.37 → 0.12.39

package/dist/cli.js

@@ -712,6 +712,7 @@ async function installOverlay(page, title) {
           if (!cursor) return;
           const travel = ms || 600;
           window.__wgCursorPos = { x: Number(x) || 0, y: Number(y) || 0 };
+          window.__wgCursorTravelUntil = Date.now() + (instant ? 0 : travel) + 40;
           cursor.style.setProperty("--wg-cursor-ms", travel + "ms");
           if (instant) {
             const prev = cursor.style.transition;
@@ -812,10 +813,8 @@ async function installOverlay(page, title) {
           let settled = zoom <= 1;
           const settleAt = Date.now() + camMs;
           const style = { size, weight, focus, color };
-          // Screen Studio / Screenify: dead zone = center ~40% of viewport.
-          // Pan only when the demo cursor leaves that zone - never hard-center
-          // on every mousemove (that fights like same-pole magnets).
-          const deadFrac = 0.4;
+          // Screen Studio / Screenify: dead zone follow (see followTick).
+          const deadFrac = 0.5;
           let lastPanAt = 0;
           const readCursorViewport = () => {
             const cursor = document.getElementById("wg-cursor");
@@ -833,6 +832,11 @@ async function installOverlay(page, title) {
             if (!window.__wgSetCamera || !window.__wgViewportToDoc) return;
             const cam = window.__wgCamera;
             if (!cam || !(cam.scale > 1.001)) return;
+            // Skip while the demo cursor is mid CSS travel - reading a
+            // mid-lerp rect makes the camera chase noise and teleport.
+            if (window.__wgCursorTravelUntil && Date.now() < window.__wgCursorTravelUntil) {
+              return;
+            }
             const pos = readCursorViewport();
             if (!pos) return;
             const vw = window.innerWidth;
@@ -849,12 +853,13 @@ async function installOverlay(page, title) {
             else if (dy < -deadY) oy = dy + deadY;
             if (ox === 0 && oy === 0) return;
             const now = Date.now();
-            if (now - lastPanAt < 80) return;
+            if (now - lastPanAt < 120) return;
             lastPanAt = now;
-            // Viewport overflow -> document delta (divide by scale).
-            const nx = cam.cx + ox / cam.scale;
-            const ny = cam.cy + oy / cam.scale;
-            window.__wgSetCamera(nx, ny, cam.scale, 220);
+            // Partial gain - never yank the full overflow in one pan.
+            const gain = 0.35;
+            const nx = cam.cx + (ox / cam.scale) * gain;
+            const ny = cam.cy + (oy / cam.scale) * gain;
+            window.__wgSetCamera(nx, ny, cam.scale, 280);
           };
           const tick = () => {
             const el = document.querySelector(sel);
@@ -887,9 +892,13 @@ async function installOverlay(page, title) {
                   };
               window.__wgCameraLock = true;
               window.__wgSetCamera(pt.x, pt.y, zoom, dur);
-              setTimeout(() => {
-                window.__wgCameraLock = false;
-              }, dur + 40);
+              // Unlock for dead-zone follow only when explicitly allowed.
+              // zoomOut:false / cart-edge targets stay locked through dwell+click.
+              if (followMouse && opts.allowFollow) {
+                setTimeout(() => {
+                  window.__wgCameraLock = false;
+                }, dur + 40);
+              }
             }
           }
           window.__wgRingRaf = requestAnimationFrame(tick);
@@ -1413,6 +1422,25 @@ async function renderBeforeStep(page, info) {
 
 async function ensureSelectorInView(page, selector) {
   try {
+    // Body-scale camera + scrollIntoView = teleport / "outside viewport" loop.
+    // When zoomed, pan the camera to the target instead of scrolling the document.
+    const zoomed = await page
+      .evaluate(() => !!(window.__wgCamera && window.__wgCamera.scale > 1.001))
+      .catch(() => false);
+    if (zoomed) {
+      await page
+        .evaluate((sel) => {
+          const el = document.querySelector(sel);
+          if (!el || !window.__wgSetCamera || !window.__wgElDocPoint) return;
+          const cam = window.__wgCamera;
+          const pt = window.__wgElDocPoint(el);
+          window.__wgCameraLock = true;
+          window.__wgSetCamera(pt.x, pt.y, cam.scale > 1 ? cam.scale : 1.4, 320);
+        }, selector)
+        .catch(() => {});
+      await new Promise((res) => setTimeout(res, 340));
+      return;
+    }
     const loc = page.locator(selector).first();
     await loc.scrollIntoViewIfNeeded().catch(() => {});
     await page
@@ -1636,7 +1664,7 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
       // body scale (html cursor is outside the transform).
       await page
         .evaluate(
-          ({ sel, label, tone, size, weight, focus, color, zoom, followMouse, camMs }) => {
+          ({ sel, label, tone, size, weight, focus, color, zoom, followMouse, camMs, allowFollow }) => {
             if (window.__wgStartHighlightTrack) {
               window.__wgStartHighlightTrack({
                 sel,
@@ -1649,6 +1677,7 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
                 zoom,
                 followMouse,
                 camMs,
+                allowFollow,
               });
             }
           },
@@ -1663,6 +1692,9 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
             zoom: z,
             followMouse,
             camMs,
+            // Follow only while zoomed-out-between-rings is OK. zoomOut:false
+            // means hold the frame for the upcoming click - no chase.
+            allowFollow: followMouse && h.zoomOut !== false,
           },
         )
         .catch(() => {});
@@ -1708,6 +1740,14 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
   const last = list.length > 0 ? list[list.length - 1] : null;
   if (!last || last.zoomOut !== false) {
     await resetCameraZoom(page);
+  } else {
+    // Hold lock into the upcoming act click so follow/scroll cannot yank
+    // the camera off the already-centered target (cart teleport bug).
+    await page
+      .evaluate(() => {
+        window.__wgCameraLock = true;
+      })
+      .catch(() => {});
   }
   if (list.length === 0) {
     await hideRing(page);
@@ -2444,10 +2484,11 @@ async function teardownOverlay(page) {
     .catch(() => {});
 }
 
-async function moveCursorTo(page, box, ms) {
+async function moveCursorTo(page, box, ms, opts) {
   const x = box.x + box.width / 2;
   const y = box.y + box.height / 2;
   const travel = Math.max(0, Number(ms) || 0);
+  const keepLock = !!(opts && opts.keepLock);
   // Freeze camera follow while the demo cursor travels - otherwise dead-zone
   // pans fight the click target (esp. right-edge cart chrome).
   await page
@@ -2462,11 +2503,13 @@ async function moveCursorTo(page, box, ms) {
   if (travel > 0) {
     await new Promise((res) => setTimeout(res, travel));
   }
-  await page
-    .evaluate(() => {
-      window.__wgCameraLock = false;
-    })
-    .catch(() => {});
+  if (!keepLock) {
+    await page
+      .evaluate(() => {
+        window.__wgCameraLock = false;
+      })
+      .catch(() => {});
+  }
   return { x, y };
 }
 
@@ -2594,6 +2637,7 @@ function instrumentInteractionHighlighting(page, mem, slowMo, pacing, stubBefore
     proto.click = async function (options) {
       let clickPoint = null;
       let clickTone = "auto";
+      let keptCameraLock = false;
       try {
         await installOverlay(page);
         // Wait until the target is visible BEFORE measuring - otherwise
@@ -2604,6 +2648,20 @@ function instrumentInteractionHighlighting(page, mem, slowMo, pacing, stubBefore
           state: "visible",
           timeout: (options && options.timeout) || 30000,
         }).catch(() => {});
+        // Body-scale camera + Playwright scrollIntoView = teleport storm.
+        // Lock the camera for the whole click when zoomed; force-click so
+        // Playwright does not try to scroll the transformed page.
+        const zoomed = await page
+          .evaluate(() => !!(window.__wgCamera && window.__wgCamera.scale > 1.001))
+          .catch(() => false);
+        if (zoomed) {
+          await page
+            .evaluate(() => {
+              window.__wgCameraLock = true;
+            })
+            .catch(() => {});
+          keptCameraLock = true;
+        }
         const box = await this.boundingBox();
         const narrated = box ? await wasJustNarrated(page) : false;
         if (box && !narrated) {
@@ -2625,8 +2683,18 @@ function instrumentInteractionHighlighting(page, mem, slowMo, pacing, stubBefore
           const stubs = (stubBeforeRef && stubBeforeRef.current) || [];
           const cap = await captionForLocator(page, this, stubs, fallback);
           clickTone = cap.tone;
-          clickPoint = await moveCursorTo(page, box, cursorMs(600));
-          await showRing(page, box, cap.label, cap.tone, {
+          // Already centered from stubBefore zoom: short cursor, keep lock.
+          const travel = zoomed ? cursorMs(160) : cursorMs(600);
+          clickPoint = await moveCursorTo(page, box, travel, {
+            keepLock: zoomed,
+          });
+          // Re-measure after cursor settle - stale pre-travel box teleports the ring.
+          const liveBox = (await this.boundingBox()) || box;
+          clickPoint = {
+            x: liveBox.x + liveBox.width / 2,
+            y: liveBox.y + liveBox.height / 2,
+          };
+          await showRing(page, liveBox, cap.label, cap.tone, {
             size: cap.size,
             weight: cap.weight,
           });
@@ -2638,7 +2706,10 @@ function instrumentInteractionHighlighting(page, mem, slowMo, pacing, stubBefore
         } else if (box) {
           // Ring/caption already handled by narrate() - still move the
           // cursor + pulse the click point, just skip re-showing the ring.
-          clickPoint = await moveCursorTo(page, box, cursorMs(200));
+          const travel = zoomed ? cursorMs(120) : cursorMs(200);
+          clickPoint = await moveCursorTo(page, box, travel, {
+            keepLock: zoomed,
+          });
           clickTone = "planned";
         }
       } catch {
@@ -2654,10 +2725,43 @@ function instrumentInteractionHighlighting(page, mem, slowMo, pacing, stubBefore
         // mock click visually completes before the real one fires.
         await new Promise((res) => setTimeout(res, skipTheater() ? 0 : 500));
       }
-      const result = await originalClick.call(this, options);
-      await new Promise((res) => setTimeout(res, clickPostPop()));
-      await hideRing(page);
-      return result;
+      const zoomedClick = await page
+        .evaluate(() => !!(window.__wgCamera && window.__wgCamera.scale > 1.001))
+        .catch(() => false);
+      try {
+        let result;
+        if (zoomedClick || keptCameraLock) {
+          // Playwright scrollIntoView + body-scale camera = "outside viewport"
+          // retry storm. Click the element in-page with no scrolling.
+          const handle = await this.elementHandle().catch(() => null);
+          if (handle) {
+            await handle.evaluate((el) => {
+              if (el && typeof el.click === "function") el.click();
+            });
+            await handle.dispose().catch(() => {});
+            result = undefined;
+          } else {
+            result = await originalClick.call(this, {
+              ...(options || {}),
+              force: true,
+              timeout: (options && options.timeout) || 5000,
+            });
+          }
+        } else {
+          result = await originalClick.call(this, options);
+        }
+        await new Promise((res) => setTimeout(res, clickPostPop()));
+        await hideRing(page);
+        return result;
+      } finally {
+        if (keptCameraLock) {
+          await page
+            .evaluate(() => {
+              window.__wgCameraLock = false;
+            })
+            .catch(() => {});
+        }
+      }
     };
   }
 

package/examples/saucedemo/src/blocks/saucedemo-web/cart/nav-cart.block.ts

@@ -30,7 +30,7 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
         color: "#c9a6ff",
         zoom: 1.55,
         zoomOut: false,
-        followMouse: true,
+        followMouse: false,
         weight: "bold",
       },
     });
@@ -45,7 +45,7 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
       focus: true,
       color: "#86efac",
       zoom: 1.4,
-      followMouse: true,
+      followMouse: false,
       duration: true,
     });
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.12.37",
+  "version": "0.12.39",
   "type": "module",
   "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
   "license": "MIT",

package/templates/quickstart/src/blocks/saucedemo-web/cart/nav-cart.block.ts

@@ -30,7 +30,7 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
         color: "#c9a6ff",
         zoom: 1.55,
         zoomOut: false,
-        followMouse: true,
+        followMouse: false,
         weight: "bold",
       },
     });
@@ -45,7 +45,7 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
       focus: true,
       color: "#86efac",
       zoom: 1.4,
-      followMouse: true,
+      followMouse: false,
       duration: true,
     });
   },