waygraph 0.12.25 → 0.12.27

package/dist/cli.js

@@ -2565,9 +2565,10 @@ async function runStepMode(engine, start, end, context, page, mem, resolved, slo
     const stubBeforeTodos = stubBeforePhase.todos || [];
     const isNavBlock = r.block.__waygraphKind === "nav";
     const autoNow = await currentAutoplay();
-    // Auto-next: tuck stepper on NavBlocks so the page transition fills the frame.
-    // Video recording still collapses every step.
-    const forceCollapsed = !!process.env.WAYGRAPH_VIDEO || (autoNow && isNavBlock);
+    // Video recording: keep chrome compact. Live auto-next used to force-collapse
+    // every NavBlock and hid the stepper (todos / modules) - only collapse while
+    // act() runs (markStepRunning) so Playwright clicks hit the page, not the panel.
+    const forceCollapsed = !!process.env.WAYGRAPH_VIDEO;
     const requires = r.block.requires ?? [];
     const keys = requires.map((k) => {
       let value = "<not yet set>";
@@ -2622,8 +2623,7 @@ async function runStepMode(engine, start, end, context, page, mem, resolved, slo
       }
     }
     const recordingVideo = !!process.env.WAYGRAPH_VIDEO;
-    const autoCollapsePanel = recordingVideo || (await currentAutoplay() && isNavBlock) || forceCollapsed;
-    await markStepRunning(page, { autoCollapsePanel });
+    await markStepRunning(page, {});
     // NavBlock click-nav: label the upcoming Locator.click demo cursor as
     // "nav: <block>" so pia/demo watchers see cursor+pulse on click nav
     // (not only on regular Block clicks).
@@ -2799,8 +2799,7 @@ async function runStepMode(engine, start, end, context, page, mem, resolved, slo
       episodeTitle: r.episodeTitle,
       stepperMode,
       todos: stubAfterTodos,
-      // After a nav under auto-next, stay compact until the next action block expands.
-      forceCollapsed: !!process.env.WAYGRAPH_VIDEO || ((await currentAutoplay()) && isNavBlock),
+      forceCollapsed: !!process.env.WAYGRAPH_VIDEO,
     });
     await gate();
   }
@@ -4197,7 +4196,7 @@ Aliases (compat): \`chain <spec>\` -> run --blocks; \`chain auto A B\` -> auto -
 
 Project path optional (defaults to cwd). Flags beat WAYGRAPH_* env.
 \`run\`/\`demo\`/\`auto\`: Flow export, .flow.ts path, or "a then b" chain (auto also explores).
-Hide stepper = compact "N / M · block" pill. Auto-next auto-hides on NavBlocks.
+Hide stepper = compact "N / M · block" pill. Collapses while a step runs (clicks hit the page). Video mode stays compact.
 `);
     process.exit(0);
 }

package/examples/saucedemo/src/blocks/saucedemo-web/methods/submit-login.method.block.ts

@@ -45,23 +45,30 @@ export const SubmitLoginActionBlock = defineMethodBlock<LoginPage, LoginSubmitOu
       out.__state === "LoggedIn"
         ? [Trait.url({ pathname: "/inventory.html" })]
         : [Trait.visible('[data-test="error"]')],
-    // Open lifecycle: set fixtures + rings inside the fn (not a closed slot object).
+    // Open lifecycle: todos + zoom; stubAfter rings a lower inventory item
+    // so smooth auto-scroll is visible after login.
     stubBefore: (ctx) => {
       ctx.todos(["Enter username", "Enter password", "Click Login"]);
       ctx.todoIndex(0);
+      ctx.zoom(1.25);
       ctx.highlights({
-        username: { selector: "#user-name", label: "Username" },
-        password: { selector: "#password", label: "Password" },
-        submit: { selector: "#login-button", label: "Login" },
+        username: { selector: "#user-name", label: "Username", zoom: 1.3 },
+        password: { selector: "#password", label: "Password", zoom: 1.3 },
+        submit: { selector: "#login-button", label: "Login", zoom: 1.45 },
       });
     },
     stubAfter: (ctx) => {
-      // Sequential plan: bump index after a successful submit beat.
       ctx.todos(["Enter username", "Enter password", "Click Login"]);
       ctx.todoIndex(2);
+      // Inventory is tall - fleece sits lower; demo smooth-scrolls + zooms it.
+      ctx.ring("fleece", {
+        selector: '[data-test="add-to-cart-sauce-labs-fleece-jacket"]',
+        label: "Fleece jacket",
+        detail: "Smooth scroll + zoom",
+        zoom: 1.4,
+        duration: true,
+      });
     },
-    // Fail-path rings (demo step throw only) - locked-out / wrong-password
-    // bug-repro narration; success never shows these.
     stubOnError: (ctx) => {
       ctx.ring("error", {
         selector: '[data-test="error"]',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.12.25",
+  "version": "0.12.27",
   "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/methods/submit-login.method.block.ts

@@ -48,15 +48,23 @@ export const SubmitLoginActionBlock = defineMethodBlock<LoginPage, LoginSubmitOu
     stubBefore: (ctx) => {
       ctx.todos(["Enter username", "Enter password", "Click Login"]);
       ctx.todoIndex(0);
+      ctx.zoom(1.25);
       ctx.highlights({
-        username: { selector: "#user-name", label: "Username" },
-        password: { selector: "#password", label: "Password" },
-        submit: { selector: "#login-button", label: "Login" },
+        username: { selector: "#user-name", label: "Username", zoom: 1.3 },
+        password: { selector: "#password", label: "Password", zoom: 1.3 },
+        submit: { selector: "#login-button", label: "Login", zoom: 1.45 },
       });
     },
     stubAfter: (ctx) => {
       ctx.todos(["Enter username", "Enter password", "Click Login"]);
       ctx.todoIndex(2);
+      ctx.ring("fleece", {
+        selector: '[data-test="add-to-cart-sauce-labs-fleece-jacket"]',
+        label: "Fleece jacket",
+        detail: "Smooth scroll + zoom",
+        zoom: 1.4,
+        duration: true,
+      });
     },
     stubOnError: (ctx) => {
       ctx.ring("error", {