waygraph 0.12.38 → 0.12.39

package/dist/cli.js

@@ -892,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);
@@ -1418,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
@@ -1641,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,
@@ -1654,6 +1677,7 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
                 zoom,
                 followMouse,
                 camMs,
+                allowFollow,
               });
             }
           },
@@ -1668,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(() => {});
@@ -2701,12 +2728,28 @@ function instrumentInteractionHighlighting(page, mem, slowMo, pacing, stubBefore
       const zoomedClick = await page
         .evaluate(() => !!(window.__wgCamera && window.__wgCamera.scale > 1.001))
         .catch(() => false);
-      const clickOpts =
-        zoomedClick || keptCameraLock
-          ? { ...(options || {}), force: true }
-          : options;
       try {
-        const result = await originalClick.call(this, clickOpts);
+        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;

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.38",
+  "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,
     });
   },