waygraph 0.12.35 → 0.12.37

package/dist/cli.js

@@ -711,6 +711,7 @@ async function installOverlay(page, title) {
           const cursor = document.getElementById("wg-cursor");
           if (!cursor) return;
           const travel = ms || 600;
+          window.__wgCursorPos = { x: Number(x) || 0, y: Number(y) || 0 };
           cursor.style.setProperty("--wg-cursor-ms", travel + "ms");
           if (instant) {
             const prev = cursor.style.transition;
@@ -811,6 +812,50 @@ 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;
+          let lastPanAt = 0;
+          const readCursorViewport = () => {
+            const cursor = document.getElementById("wg-cursor");
+            if (cursor && cursor.style.opacity !== "0") {
+              const r = cursor.getBoundingClientRect();
+              if (r.width || r.height || r.left || r.top) {
+                return { x: r.left, y: r.top };
+              }
+            }
+            if (window.__wgCursorPos) return window.__wgCursorPos;
+            return null;
+          };
+          const followTick = () => {
+            if (!followMouse || !settled || window.__wgCameraLock) return;
+            if (!window.__wgSetCamera || !window.__wgViewportToDoc) return;
+            const cam = window.__wgCamera;
+            if (!cam || !(cam.scale > 1.001)) return;
+            const pos = readCursorViewport();
+            if (!pos) return;
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            const dx = pos.x - vw / 2;
+            const dy = pos.y - vh / 2;
+            const deadX = (vw * deadFrac) / 2;
+            const deadY = (vh * deadFrac) / 2;
+            let ox = 0;
+            let oy = 0;
+            if (dx > deadX) ox = dx - deadX;
+            else if (dx < -deadX) ox = dx + deadX;
+            if (dy > deadY) oy = dy - deadY;
+            else if (dy < -deadY) oy = dy + deadY;
+            if (ox === 0 && oy === 0) return;
+            const now = Date.now();
+            if (now - lastPanAt < 80) 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);
+          };
           const tick = () => {
             const el = document.querySelector(sel);
             if (el && window.__wgPositionRing) {
@@ -823,32 +868,34 @@ async function installOverlay(page, title) {
               );
             }
             if (!settled && Date.now() >= settleAt) settled = true;
+            followTick();
             window.__wgRingRaf = requestAnimationFrame(tick);
           };
           if (zoom > 1 && window.__wgSetCamera) {
             const el0 = document.querySelector(sel);
             if (el0) {
-              const r0 = el0.getBoundingClientRect();
               const already =
                 window.__wgCamera && window.__wgCamera.scale > 1.001;
-              // Already zoomed (zoomOut:false chain): short pan, not full zoom-in.
               const dur = already ? Math.min(camMs, 420) : camMs;
-              window.__wgSetCamera(
-                r0.left + r0.width / 2,
-                r0.top + r0.height / 2,
-                zoom,
-                dur,
-              );
+              // Focus must be document-space, not raw getBoundingClientRect
+              // (viewport) - otherwise already-zoomed pans fight the cursor.
+              const pt = window.__wgElDocPoint
+                ? window.__wgElDocPoint(el0)
+                : {
+                    x: el0.getBoundingClientRect().left + el0.getBoundingClientRect().width / 2,
+                    y: el0.getBoundingClientRect().top + el0.getBoundingClientRect().height / 2,
+                  };
+              window.__wgCameraLock = true;
+              window.__wgSetCamera(pt.x, pt.y, zoom, dur);
+              setTimeout(() => {
+                window.__wgCameraLock = false;
+              }, dur + 40);
             }
           }
           window.__wgRingRaf = requestAnimationFrame(tick);
+          // Real mouse only seeds cursor pos; dead-zone follow runs in RAF.
           const onMove = (ev) => {
-            if (!followMouse || !settled) return;
-            if (!window.__wgSetCamera) return;
-            const cam = window.__wgCamera;
-            const scale = (cam && cam.scale > 1 ? cam.scale : zoom) || zoom;
-            if (!(scale > 1)) return;
-            window.__wgSetCamera(ev.clientX, ev.clientY, scale, 140);
+            window.__wgCursorPos = { x: ev.clientX, y: ev.clientY };
           };
           window.addEventListener("mousemove", onMove, { passive: true });
           window.__wgRingTrack = onMove;
@@ -889,10 +936,38 @@ async function installOverlay(page, title) {
           if (ring) ring.style.opacity = "0";
           if (ringLabel) ringLabel.style.opacity = "0";
           if (window.__wgHideFocusVeil) window.__wgHideFocusVeil();
-          if (window.__wgClearZoom) window.__wgClearZoom();
+          // Do NOT clear camera zoom here - zoomOut:false keeps scale between
+          // rings; only resetCameraZoom / teardown call __wgClearZoom.
         };
         // Screen Studio-style camera: scale <body>, keep overlays on <html> fixed.
-        window.__wgCamera = { scale: 1, cx: 0, cy: 0 };
+        // Focus (cx,cy) is DOCUMENT space (pre-transform). Viewport mouse/rects
+        // must go through __wgViewportToDoc before SetCamera.
+        window.__wgCamera = {
+          scale: 1,
+          cx: window.innerWidth / 2,
+          cy: window.innerHeight / 2,
+        };
+        window.__wgCameraLock = false;
+        window.__wgViewportToDoc = (vx, vy) => {
+          const cam = window.__wgCamera || {
+            scale: 1,
+            cx: window.innerWidth / 2,
+            cy: window.innerHeight / 2,
+          };
+          const s = cam.scale > 1.001 ? cam.scale : 1;
+          if (s <= 1.001) return { x: vx, y: vy };
+          return {
+            x: (vx - window.innerWidth / 2) / s + cam.cx,
+            y: (vy - window.innerHeight / 2) / s + cam.cy,
+          };
+        };
+        window.__wgElDocPoint = (el) => {
+          const r = el.getBoundingClientRect();
+          return window.__wgViewportToDoc(
+            r.left + r.width / 2,
+            r.top + r.height / 2,
+          );
+        };
         window.__wgSetCamera = (fx, fy, scale, ms) => {
           const body = document.body;
           if (!body) return;
@@ -960,7 +1035,7 @@ async function installOverlay(page, title) {
             '<div class="wg-todo-head">Checklist</div><ul>' + rows + '</ul>';
           modal.classList.add("wg-todo-on");
         };
-window.__wgResetCamera = () => {
+        window.__wgResetCamera = () => {
           window.__wgSetCamera(window.innerWidth / 2, window.innerHeight / 2, 1);
         };
         window.__wgClearZoom = () => {
@@ -1412,13 +1487,17 @@ async function applyCameraZoom(page, box, zoom, ms) {
     }).catch(() => {});
     return;
   }
-  const cx = box.x + box.width / 2;
-  const cy = box.y + box.height / 2;
+  const vx = box.x + box.width / 2;
+  const vy = box.y + box.height / 2;
   const dur = ms != null ? ms : 650;
   await page
-    .evaluate(({ cx, cy, scale, dur }) => {
-      if (window.__wgSetCamera) window.__wgSetCamera(cx, cy, scale, dur);
-    }, { cx, cy, scale: z, dur })
+    .evaluate(({ vx, vy, scale, dur }) => {
+      if (!window.__wgSetCamera) return;
+      const pt = window.__wgViewportToDoc
+        ? window.__wgViewportToDoc(vx, vy)
+        : { x: vx, y: vy };
+      window.__wgSetCamera(pt.x, pt.y, scale, dur);
+    }, { vx, vy, scale: z, dur })
     .catch(() => {});
 }
 
@@ -1552,16 +1631,9 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
           : h.follow !== undefined
             ? !!h.follow
             : z > 1;
-      const cx = box.x + box.width / 2;
-      const cy = box.y + box.height / 2;
-      if (h.cursor !== false) {
-        await page
-          .evaluate(({ cx, cy, camMs }) => {
-            if (window.__wgMoveCursorTo) window.__wgMoveCursorTo(cx, cy, camMs, false);
-          }, { cx, cy, camMs })
-          .catch(() => {});
-      }
-      // Track first: ring rides visual rect through the zoom (no re-adjust).
+      // Track/zoom first, then park the demo cursor on the LIVE rect.
+      // Placing the cursor on a pre-zoom boundingBox leaves it stranded after
+      // body scale (html cursor is outside the transform).
       await page
         .evaluate(
           ({ sel, label, tone, size, weight, focus, color, zoom, followMouse, camMs }) => {
@@ -1599,7 +1671,21 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
         .catch(() => false);
       const waitMs = alreadyZoomed ? Math.min(camMs, 420) : camMs;
       await new Promise((res) => setTimeout(res, waitMs));
-
+      if (h.cursor !== false) {
+        await page
+          .evaluate(({ sel, ms }) => {
+            const el = document.querySelector(sel);
+            if (!el || !window.__wgMoveCursorTo) return;
+            window.__wgCameraLock = true;
+            const r = el.getBoundingClientRect();
+            window.__wgMoveCursorTo(r.left + r.width / 2, r.top + r.height / 2, ms, false);
+            setTimeout(() => {
+              window.__wgCameraLock = false;
+            }, ms + 40);
+          }, { sel: h.selector, ms: Math.min(280, camMs) })
+          .catch(() => {});
+        await new Promise((res) => setTimeout(res, Math.min(280, camMs)));
+      }
       // Appear settle
       await new Promise((res) => setTimeout(res, fadeMs));
       const authored = resolveFixtureDwellMs(h, { gatesFast, pace });
@@ -1618,7 +1704,11 @@ async function cycleHighlightRings(page, highlights, gatesFast, opts) {
     }
   }
   await stopLiveFollow();
-  await resetCameraZoom(page);
+  // Keep camera if the last ring (or phase default) asked zoomOut:false.
+  const last = list.length > 0 ? list[list.length - 1] : null;
+  if (!last || last.zoomOut !== false) {
+    await resetCameraZoom(page);
+  }
   if (list.length === 0) {
     await hideRing(page);
   }
@@ -2345,6 +2435,7 @@ async function teardownOverlay(page) {
         window.__wgRingTrack = null;
       }
       window.__wgNarrateOwnsRing = false;
+      if (window.__wgClearZoom) window.__wgClearZoom();
       for (const id of ["wg-panel", "wg-ring", "wg-ring-label", "wg-cursor", "wg-click-pulse", "wg-banner", "wg-todo-modal", "wg-focus-veil"]) {
         const el = document.getElementById(id);
         if (el) el.remove();
@@ -2357,8 +2448,11 @@ async function moveCursorTo(page, box, ms) {
   const x = box.x + box.width / 2;
   const y = box.y + box.height / 2;
   const travel = Math.max(0, Number(ms) || 0);
+  // Freeze camera follow while the demo cursor travels - otherwise dead-zone
+  // pans fight the click target (esp. right-edge cart chrome).
   await page
     .evaluate(({ x, y, ms }) => {
+      window.__wgCameraLock = true;
       if (window.__wgMoveCursorTo) window.__wgMoveCursorTo(x, y, ms);
     }, { x, y, ms: travel })
     .catch(() => {});
@@ -2368,6 +2462,11 @@ async function moveCursorTo(page, box, ms) {
   if (travel > 0) {
     await new Promise((res) => setTimeout(res, travel));
   }
+  await page
+    .evaluate(() => {
+      window.__wgCameraLock = false;
+    })
+    .catch(() => {});
   return { x, y };
 }
 

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

@@ -20,6 +20,7 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
     ctx.todos(["Find the product", "Add to cart", "Open cart"]);
     ctx.todoIndex(2);
     ctx.zoom(1.4);
+    ctx.zoomOut(false);
     ctx.highlights({
       cart: {
         selector: ".shopping_cart_link",

package/examples/saucedemo/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts

@@ -66,6 +66,7 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
       ctx.banner("In the cart");
       ctx.todos(["Find the product", "Add to cart", "Open cart"]);
       ctx.todoIndex(1);
+      ctx.zoomOut(false);
       ctx.ring("badge", {
         selector: InventorySel.cartBadge,
         label: "Cart badge",
@@ -73,6 +74,7 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
         focus: true,
         color: "#86efac",
         zoom: 1.6,
+        zoomOut: false,
         followMouse: true,
         duration: true,
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.12.35",
+  "version": "0.12.37",
   "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

@@ -20,6 +20,7 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
     ctx.todos(["Find the product", "Add to cart", "Open cart"]);
     ctx.todoIndex(2);
     ctx.zoom(1.4);
+    ctx.zoomOut(false);
     ctx.highlights({
       cart: {
         selector: ".shopping_cart_link",

package/templates/quickstart/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts

@@ -66,6 +66,7 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
       ctx.banner("In the cart");
       ctx.todos(["Find the product", "Add to cart", "Open cart"]);
       ctx.todoIndex(1);
+      ctx.zoomOut(false);
       ctx.ring("badge", {
         selector: InventorySel.cartBadge,
         label: "Cart badge",
@@ -73,6 +74,7 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
         focus: true,
         color: "#86efac",
         zoom: 1.6,
+        zoomOut: false,
         followMouse: true,
         duration: true,
       });