waygraph 0.15.52 → 0.15.54

package/examples/saucedemo/package.json

@@ -9,37 +9,20 @@
     "test": "waygraph test",
     "test:ui": "waygraph test ui",
     "flows": "waygraph list",
-    "demo": "waygraph demo --blocks \"loginFlow then shopFlow\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\"",
-    "demo:step": "waygraph demo --blocks \"loginFlow then shopFlow\" --title \"Shop demo\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\"",
-    "demo:auto-next": "waygraph demo --blocks \"loginFlow then shopFlow\" --auto-next --title \"Product then cart\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\"",
-    "auto": "waygraph auto",
-    "auto:cli": "waygraph auto --cli --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\"",
-    "prove:auto-cli": "node scripts/drive-auto-cli.mjs",
-    "traverse": "waygraph traverse --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --max-steps 40",
-    "traverse:parallel": "waygraph traverse --parallel 2 --session clone --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --max-steps 30",
-    "traverse:coverage": "waygraph traverse --min-edge-coverage 10% --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --max-steps 40",
+    "check": "waygraph check",
     "graph": "waygraph graph",
     "graph:mermaid": "waygraph graph --mermaid",
-    "demo:stub-on-error": "waygraph demo --blocks stubOnErrorFlow --auto-next --fast --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"locked_out_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --title \"stubOnError prove\"",
-    "prove:login-branch": "node scripts/prove-wrong-login-runtime.mjs",
-    "prove:graph": "node scripts/prove-auto-graph.mjs",
-    "prove:add-to-cart-menu": "node scripts/prove-add-to-cart-menu.mjs",
-    "prove": "npm run prove:login-branch && npm run prove:graph && npm run prove:add-to-cart-menu && npm test",
-    "record": "waygraph run --blocks \"loginFlow then shopFlow({\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}})\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --video --no-step",
-    "demo:device": "waygraph demo --blocks deviceShowcaseFlow --auto-next --title \"Device showcase\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\"",
-    "demo:device:video": "waygraph demo --blocks deviceShowcaseFlow --auto-play-video --title \"Device showcase\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\" --video ./.tmp/device-showcase",
-    "demo:bulk": "waygraph demo --blocks cartBulkFlow --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\"",
-    "demo:bulk:auto-next": "waygraph demo --blocks cartBulkFlow --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --auto-next --title \"Cart bulk demo\"",
-    "demo:bulk:video": "waygraph demo --blocks cartBulkFlow --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --auto-play-video --title \"Cart bulk demo\"",
-    "demo:checkout": "waygraph demo --blocks checkoutFlow --auto-next --title \"Owner: Full Checkout\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\"",
-    "demo:checkout:video": "waygraph demo --blocks checkoutFlow --auto-play-video --title \"Owner: Full Checkout\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"},\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}\"",
-    "demo:api": "waygraph demo --blocks apiDemoFlow --auto-next --title \"FE + BE in one Flow\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\"",
-    "demo:api:video": "waygraph demo --blocks apiDemoFlow --auto-play-video --title \"FE + BE in one Flow\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\"",
-    "run:bulk": "waygraph run --blocks \"loginFlow then add-all-to-cart then remove-all-from-cart\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\"",
-    "chain:bulk": "waygraph run --blocks \"loginFlow then add-all-to-cart then remove-all-from-cart\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --non-headless"
-  },
-  "waygraph": {
-    "baseUrl": "https://www.saucedemo.com"
+    "auto": "waygraph auto",
+    "auto:cli": "waygraph auto --cli",
+    "demo": "waygraph demo --blocks \"loginFlow then shopFlow\"",
+    "demo:auto-next": "waygraph demo --blocks \"loginFlow then shopFlow\" --auto-next",
+    "demo:checkout": "waygraph demo --blocks checkoutFlow --auto-next",
+    "demo:device": "waygraph demo --blocks deviceShowcaseFlow --auto-next",
+    "demo:bulk": "waygraph demo --blocks cartBulkFlow --auto-next",
+    "demo:api": "waygraph demo --blocks apiDemoFlow --auto-next",
+    "demo:video": "waygraph demo --blocks deviceShowcaseFlow --auto-play-video",
+    "record": "waygraph run --blocks \"loginFlow then shopFlow\" --video --no-step",
+    "traverse": "waygraph traverse --max-steps 40"
   },
   "dependencies": {
     "waygraph": "file:../.."

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

@@ -1,7 +1,5 @@
 import { defineNavClickBlock, Trait } from "waygraph";
-import type { StubCtx } from "waygraph";
 import type { CartPage } from "../../../states/checkout.states.js";
-import { InventorySel } from "../inventory/methods/inventory-items.js";
 import { CartSel } from "./cart.sel.js";
 
 /**
@@ -17,51 +15,4 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
   checkpoint: "CartPage",
   click: CartSel.cartLink,
   verify: [Trait.url({ pathname: "/cart.html" })],
-  stubBefore: (ctx: StubCtx) => {
-    ctx.title("Open cart · landscape");
-    ctx.landscape();
-    ctx.todos(
-      "saucedemo",
-      [
-        { id: "login-user", text: "Enter username", done: true },
-        { id: "login-pass", text: "Enter password", done: true },
-        { id: "login-submit", text: "Tap Login", done: true },
-        { id: "cart-find", text: "Find the product", done: true },
-        { id: "cart-add", text: "Add to cart", done: true },
-        { id: "cart-open", text: "Open cart" },
-      ],
-      { title: "Device showcase", index: 5 },
-    );
-    ctx.zoom(1.4);
-    ctx.zoomOut(false);
-    ctx.highlights({
-      cart: {
-        selector: CartSel.cartLink,
-        label: "Cart",
-        detail: "tone: planned (purple) - open cart",
-        tone: "planned",
-        focus: true,
-        zoomOut: false,
-        followMouse: false,
-        weight: "bold",
-        gesture: "tap",
-      },
-    });
-  },
-  stubAfter: (ctx: StubCtx) => {
-    ctx.banner("Your cart · desktop");
-    ctx.clearDevice();
-    ctx.hideTodos();
-    ctx.zoomOut(true);
-    ctx.ring("items", {
-      selector: InventorySel.cartItem,
-      label: "Cart items",
-      detail: "tone: success (green) - product in cart",
-      tone: "success",
-      focus: true,
-      zoomOut: true,
-      followMouse: false,
-      duration: true,
-    });
-  },
 });

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.ts

@@ -1,5 +1,8 @@
-import { defineMethodBlock, checkpoint, Trait, narrate, type StubCtx } from "waygraph";
-import type { CheckoutOverviewPage, OrderComplete } from "../../../../states/checkout.states.js";
+import { defineMethodBlock, checkpoint, Trait, narrate } from "waygraph";
+import type {
+  CheckoutOverviewPage,
+  OrderComplete,
+} from "../../../../states/checkout.states.js";
 import { CheckoutOverviewSel } from "./checkout-overview.sel.js";
 
 /**
@@ -10,34 +13,27 @@ import { CheckoutOverviewSel } from "./checkout-overview.sel.js";
  * Places the order on the overview page - form/finish click, not a NavBlock.
  * Stubs use open ctx lifecycles (preferred) - not static slot maps.
  */
-export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderComplete>({
+export const FinishOrderBlock = defineMethodBlock<
+  CheckoutOverviewPage,
+  OrderComplete
+>({
   name: "finish-order",
-  description: "Places the order and confirms the 'Thank you for your order!' completion page.",
+  description:
+    "Places the order and confirms the 'Thank you for your order!' completion page.",
   instruction: {
     async act(page) {
       const finishButton = page.locator(CheckoutOverviewSel.finishBtn);
-      await narrate(finishButton, "Placing the order", () => finishButton.click());
+      await narrate(finishButton, "Placing the order", () =>
+        finishButton.click(),
+      );
     },
     resolve: () => checkpoint("OrderComplete"),
-    verify: [Trait.text(CheckoutOverviewSel.completeHeader, "Thank you for your order!")],
-    stubBefore: (ctx: StubCtx) => {
-      ctx.ring("finish", {
-        selector: CheckoutOverviewSel.finishBtn,
-        label: "Finish",
-        detail: "tone: warning (yellow) - place order",
-        tone: "warning",
-        weight: "bold",
-      });
-    },
-    stubAfter: (ctx: StubCtx) => {
-      ctx.ring("thanks", {
-        selector: CheckoutOverviewSel.completeHeader,
-        label: "Order confirmed",
-        detail: "tone: success (green) - thank you!",
-        tone: "success",
-        duration: true,
-      });
-    },
+    verify: [
+      Trait.text(
+        CheckoutOverviewSel.completeHeader,
+        "Thank you for your order!",
+      ),
+    ],
     // Shown AFTER act (order already placed) - selectors must match the
     // completion page, not #finish on the overview.
     slides: [
@@ -50,7 +46,8 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
       },
       {
         caption: "Completion page is the durable proof",
-        detail: "tone: success - the thank-you header is what verify asserts on.",
+        detail:
+          "tone: success - the thank-you header is what verify asserts on.",
         tag: "YAP",
         tone: "success",
         selector: CheckoutOverviewSel.completeHeader,

package/examples/saucedemo/src/blocks/saucedemo-web/inventory/inventory.page.block.ts

@@ -1,5 +1,4 @@
 import { definePageBlock, Trait } from "waygraph";
-import type { StubCtx } from "waygraph";
 import type { LoggedIn } from "../../../states/checkout.states.js";
 import { AddToCartBlock } from "./methods/add-to-cart.effect.block.js";
 import { RemoveFromCartBlock } from "./methods/remove-from-cart.effect.block.js";
@@ -28,11 +27,6 @@ export const InventoryPageBlock = definePageBlock<LoggedIn>({
     Trait.url({ pathname: "/inventory.html" }),
     Trait.visible(InventorySel.list),
   ],
-  // Showcase responsive dashboard: tablet after mobile login (toast + lerp).
-  stubBefore: (ctx: StubCtx) => {
-    ctx.title("Inventory · tablet");
-    ctx.device("tablet");
-  },
   methods: {
     addToCart: () => AddToCartBlock,
     removeFromCart: () => RemoveFromCartBlock,

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

@@ -1,11 +1,13 @@
-import { defineEffectBlock, checkpoint, type Checkpoint, type WaygraphInstanceOption } from "waygraph";
-import type { StubCtx } from "waygraph";
+import {
+  defineEffectBlock,
+  checkpoint,
+  type Checkpoint,
+  type WaygraphInstanceOption,
+} from "waygraph";
 import type { ItemInCart } from "../../../../states/checkout.states.js";
 import { SelectedItem } from "../../../../states/checkout.mem-keys.js";
 import { collectAddableItems, InventorySel } from "./inventory-items.js";
 
-/** Showcase product for headed demos (matches shopFlow --data selectedItem). */
-const DEMO_PRODUCT_ID = "sauce-labs-backpack";
 
 /**
  * Kind: Effect
@@ -15,100 +17,40 @@ const DEMO_PRODUCT_ID = "sauce-labs-backpack";
  * Mutates cart for the mem-picked product. waygraph auto lists one
  * "Add ..." row per live Add button via instanceOptions.
  */
-export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>({
-  name: "add-to-cart",
-  description: "Adds the item named by mem (saucedemo.selectedItem) to the cart.",
-  requires: [SelectedItem.key],
-  instruction: {
-    async act(page, _input, mem) {
-      const { id } = mem.get(SelectedItem.key);
-      await page.locator(InventorySel.addBtn(id)).click();
-    },
-    resolve: () => checkpoint("ItemInCart"),
-    verify: [
-      {
-        name: "item-added-to-cart",
-        async check(page, mem) {
-          const { id } = mem.get(SelectedItem.key);
-          return await page.locator(InventorySel.removeBtn(id)).first().isVisible();
-        },
+export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
+  {
+    name: "add-to-cart",
+    description:
+      "Adds the item named by mem (saucedemo.selectedItem) to the cart.",
+    requires: [SelectedItem.key],
+    instruction: {
+      async act(page, _input, mem) {
+        const { id } = mem.get(SelectedItem.key);
+        await page.locator(InventorySel.addBtn(id)).click();
       },
-    ],
-    // Demo: zoom product -> add (stay zoomed), then badge after act.
-    stubBefore: (ctx: StubCtx) => {
-      ctx.title("Pick a product · tablet");
-      ctx.device("tablet");
-      ctx.portrait();
-      ctx.todos(
-        "saucedemo",
-        [
-          { id: "login-user", text: "Enter username", done: true },
-          { id: "login-pass", text: "Enter password", done: true },
-          { id: "login-submit", text: "Tap Login", done: true },
-          { id: "cart-find", text: "Find the product" },
-          { id: "cart-add", text: "Add to cart" },
-          { id: "cart-open", text: "Open cart" },
-        ],
-        { title: "Device showcase", index: 3 },
-      );
-      ctx.zoom(1.35);
-      ctx.zoomOut(false);
-      ctx.highlights({
-        product: {
-          selector: InventorySel.title(DEMO_PRODUCT_ID),
-          label: "Sauce Labs Backpack",
-          detail: "tone: info (blue)",
-          tone: "info",
-          focus: true,
-          zoom: 1.45,
-          zoomOut: false,
+      resolve: () => checkpoint("ItemInCart"),
+      verify: [
+        {
+          name: "item-added-to-cart",
+          async check(page, mem) {
+            const { id } = mem.get(SelectedItem.key);
+            return await page
+              .locator(InventorySel.removeBtn(id))
+              .first()
+              .isVisible();
+          },
         },
-        add: {
-          selector: InventorySel.addBtn(DEMO_PRODUCT_ID),
-          label: "Add to cart",
-          detail: "tone: success (green)",
-          tone: "success",
-          focus: true,
-          zoom: 1.5,
-          zoomOut: false,
-          weight: "bold",
-        },
-      });
+      ],
     },
-    stubAfter: (ctx: StubCtx) => {
-      ctx.banner("In the cart");
-      ctx.todos(
-        "saucedemo",
-        [
-          { id: "login-user", text: "Enter username", done: true },
-          { id: "login-pass", text: "Enter password", done: true },
-          { id: "login-submit", text: "Tap Login", done: true },
-          { id: "cart-find", text: "Find the product", done: true },
-          { id: "cart-add", text: "Add to cart" },
-          { id: "cart-open", text: "Open cart" },
-        ],
-        { title: "Device showcase", index: 4 },
-      );
-      ctx.zoomOut(false);
-      ctx.ring("badge", {
-        selector: InventorySel.cartBadge,
-        label: "Cart badge",
-        detail: "tone: success (green) - count updated",
-        tone: "success",
-        focus: true,
-        zoomOut: false,
-        duration: true,
-      });
+    async instanceOptions(page): Promise<readonly WaygraphInstanceOption[]> {
+      const items = await collectAddableItems(page);
+      return items.map((item) => ({
+        id: item.id,
+        label: `Add "${item.name}" to cart`,
+        key: SelectedItem.key,
+        value: item,
+        highlight: InventorySel.addBtn(item.id),
+      }));
     },
   },
-  async instanceOptions(page): Promise<readonly WaygraphInstanceOption[]> {
-    const items = await collectAddableItems(page);
-    return items.map((item) => ({
-      id: item.id,
-      label: `Add "${item.name}" to cart`,
-      key: SelectedItem.key,
-      value: item,
-      highlight: InventorySel.addBtn(item.id),
-    }));
-  },
-});
+);

package/examples/saucedemo/src/blocks/saucedemo-web/methods/fill-password.method.block.ts

@@ -1,4 +1,4 @@
-import { defineMethodBlock, checkpoint, type StubCtx } from "waygraph";
+import { defineMethodBlock, checkpoint } from "waygraph";
 import type { LoginPage } from "../../../states/checkout.states.js";
 import { LoginCreds } from "../../../states/checkout.mem-keys.js";
 import { LoginSel } from "./login.sel.js";
@@ -21,30 +21,5 @@ export const FillPasswordBlock = defineMethodBlock<LoginPage, LoginPage>({
       await page.locator(LoginSel.password).fill(password);
     },
     resolve: () => checkpoint("LoginPage"),
-    stubBefore: (ctx: StubCtx) => {
-      ctx.ring("password", {
-        selector: LoginSel.password,
-        label: "Password",
-        detail: "tone: planned (purple)",
-        todo: "login-pass",
-        tone: "planned",
-        focus: true,
-        zoom: 1.4,
-      });
-    },
-    stubAfter: (ctx: StubCtx) => {
-      ctx.todos(
-        "saucedemo",
-        [
-          { id: "login-user", text: "Enter username", done: true },
-          { id: "login-pass", text: "Enter password", done: true },
-          { id: "login-submit", text: "Tap Login" },
-          { id: "cart-find", text: "Find the product" },
-          { id: "cart-add", text: "Add to cart" },
-          { id: "cart-open", text: "Open cart" },
-        ],
-        { title: "Device showcase", index: 2 },
-      );
-    },
   },
 });

package/examples/saucedemo/src/blocks/saucedemo-web/methods/fill-username.method.block.ts

@@ -1,4 +1,4 @@
-import { defineMethodBlock, checkpoint, type StubCtx } from "waygraph";
+import { defineMethodBlock, checkpoint } from "waygraph";
 import type { LoginPage } from "../../../states/checkout.states.js";
 import { LoginCreds } from "../../../states/checkout.mem-keys.js";
 import { LoginSel } from "./login.sel.js";
@@ -23,49 +23,5 @@ export const FillUsernameBlock = defineMethodBlock<LoginPage, LoginPage>({
       await page.locator(LoginSel.username).fill(username);
     },
     resolve: () => checkpoint("LoginPage"),
-    stubBefore: (ctx: StubCtx) => {
-      ctx.title("Signing in · mobile");
-      ctx.device("mobile");
-      ctx.portrait();
-      ctx.todos(
-        "saucedemo",
-        [
-          { id: "login-user", text: "Enter username" },
-          { id: "login-pass", text: "Enter password" },
-          { id: "login-submit", text: "Tap Login" },
-          { id: "cart-find", text: "Find the product" },
-          { id: "cart-add", text: "Add to cart" },
-          { id: "cart-open", text: "Open cart" },
-        ],
-        { title: "Device showcase", index: 0 },
-      );
-      ctx.zoom(1.35);
-      const fromMem = ctx.mem?.get(LoginCreds.key)?.username;
-      ctx.ring("username", {
-        selector: LoginSel.username,
-        label: "Username",
-        detail: fromMem
-          ? `tone: info (blue) - mem ${fromMem}`
-          : "tone: info (blue)",
-        tone: "info",
-        todo: "login-user",
-        focus: true,
-        zoom: 1.4,
-      });
-    },
-    stubAfter: (ctx: StubCtx) => {
-      ctx.todos(
-        "saucedemo",
-        [
-          { id: "login-user", text: "Enter username", done: true },
-          { id: "login-pass", text: "Enter password" },
-          { id: "login-submit", text: "Tap Login" },
-          { id: "cart-find", text: "Find the product" },
-          { id: "cart-add", text: "Add to cart" },
-          { id: "cart-open", text: "Open cart" },
-        ],
-        { title: "Device showcase", index: 1 },
-      );
-    },
   },
 });

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

@@ -1,5 +1,8 @@
-import { defineMethodBlock, checkpoint, Trait, type StubCtx } from "waygraph";
-import type { LoginPage, LoginSubmitOutcome } from "../../../states/checkout.states.js";
+import { defineMethodBlock, checkpoint, Trait } from "waygraph";
+import type {
+  LoginPage,
+  LoginSubmitOutcome,
+} from "../../../states/checkout.states.js";
 import { LoginSel } from "./login.sel.js";
 
 type LoginObserve = "success" | "failure";
@@ -14,7 +17,10 @@ type LoginObserve = "success" | "failure";
  * already did that). One Block, one action: submit.
  * Branches: good creds -> LoggedIn; bad/locked -> LoginPage with error banner.
  */
-export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>({
+export const SubmitLoginBlock = defineMethodBlock<
+  LoginPage,
+  LoginSubmitOutcome
+>({
   name: "submit-login",
   description: "Submits the login form; stays on LoginPage when auth fails.",
   instruction: {
@@ -26,7 +32,9 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
     async observe(page): Promise<LoginObserve> {
       // Race inventory nav vs error banner - locked_out / wrong password show
       // Epic sadface immediately; do not burn the full inventory timeout.
-      const inventory = page.waitForURL(/\/inventory\.html/, { timeout: 8_000 }).then(() => "success" as const);
+      const inventory = page
+        .waitForURL(/\/inventory\.html/, { timeout: 8_000 })
+        .then(() => "success" as const);
       const errorBanner = page
         .locator(LoginSel.errorBanner)
         .first()
@@ -38,82 +46,11 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
         return "failure";
       }
     },
-    resolve: (observed) => checkpoint(observed === "success" ? "LoggedIn" : "LoginPage"),
+    resolve: (observed) =>
+      checkpoint(observed === "success" ? "LoggedIn" : "LoginPage"),
     verify: (out) =>
       out.__state === "LoggedIn"
         ? [Trait.url({ pathname: "/inventory.html" })]
         : [Trait.visible(LoginSel.errorBanner)],
-    stubBefore: (ctx: StubCtx) => {
-      ctx.highlights({
-        submit: {
-          selector: LoginSel.loginButton,
-          label: "Login",
-          detail: "tone: warning (yellow)",
-          todo: "login-submit",
-          tone: "warning",
-          focus: true,
-          zoom: 1.55,
-          weight: "bold",
-          gesture: "tap",
-        },
-      });
-    },
-    stubAfter: (ctx: StubCtx) => {
-      if (ctx.out && ctx.out.__state === "LoginPage") {
-        ctx.title("Login blocked");
-        ctx.todos(
-          "saucedemo",
-          [
-            { id: "login-user", text: "Enter username", done: true },
-            { id: "login-pass", text: "Enter password", done: true },
-            { id: "login-submit", text: "Click Login", done: true },
-          ],
-          { title: "Sign in", style: "checklist" },
-        );
-        ctx.ring("error", {
-          selector: LoginSel.errorBanner,
-          label: "Login error banner",
-          detail: "tone: danger (red)",
-          tone: "danger",
-          focus: true,
-          duration: true,
-        });
-        return;
-      }
-      ctx.banner("Inventory · landscape");
-      ctx.landscape();
-      ctx.todos(
-        "saucedemo",
-        [
-          { id: "login-user", text: "Enter username", done: true },
-          { id: "login-pass", text: "Enter password", done: true },
-          { id: "login-submit", text: "Tap Login", done: true },
-          { id: "cart-find", text: "Find the product" },
-          { id: "cart-add", text: "Add to cart" },
-          { id: "cart-open", text: "Open cart" },
-        ],
-        { title: "Device showcase", index: 3 },
-      );
-      ctx.ring("shelf", {
-        selector: ".inventory_list",
-        label: "Product shelf",
-        detail: "tone: success (green) - ready to shop",
-        tone: "success",
-        focus: true,
-        zoom: 1.25,
-        duration: true,
-      });
-    },
-    stubOnError: (ctx: StubCtx) => {
-      ctx.title("Login failed");
-      ctx.ring("error", {
-        selector: LoginSel.errorBanner,
-        label: "Login error banner",
-        detail: "tone: danger (red)",
-        tone: "danger",
-        focus: true,
-        duration: true,
-      });
-    },
   },
 });

package/examples/saucedemo/src/flows/api-demo.flow.ts

@@ -1,5 +1,6 @@
-import { Engine, start, end, withTitle, chainFlow, checkpoint, defineApiBlock } from "waygraph";
+import { checkpoint, defineApiBlock } from "waygraph";
 import type { Checkpoint, StubCtx } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
 import { loginFlow } from "./login.flow.js";
 
 /**
@@ -17,21 +18,26 @@ import { loginFlow } from "./login.flow.js";
 export type BackendHealthy = Checkpoint<"BackendHealthy">;
 export type BackendDown = Checkpoint<"BackendDown">;
 
-const engine = new Engine();
-
 const CheckBackendHealth = defineApiBlock<any, BackendHealthy | BackendDown>({
   name: "check-backend-health",
-  call: ({ request }) => request.get("https://jsonplaceholder.typicode.com/todos/1"),
-  resolve: (result) => (result.ok ? checkpoint("BackendHealthy") : checkpoint("BackendDown")),
+  call: ({ request }) =>
+    request.get("https://jsonplaceholder.typicode.com/todos/1"),
+  resolve: (result) =>
+    result.ok ? checkpoint("BackendHealthy") : checkpoint("BackendDown"),
   stubBefore: (ctx: StubCtx<BackendHealthy | BackendDown>) => {
     ctx.title("Checking backend health · real HTTP request, no browser");
   },
 });
 
-export const apiDemoEpisode = withTitle(
-  engine.defineFlow([start, CheckBackendHealth, end]),
-  "Backend health check (defineApiBlock)",
-);
+export const apiDemoEpisode = engine
+  .map()
+  .start()
+  .method(CheckBackendHealth)
+  .end();
 
-/** Full demo: Sign In (FE) -> backend health check (BE), one narrated Flow. */
-export const apiDemoFlow = chainFlow(loginFlow, apiDemoEpisode);
+export const apiDemoFlow = engine
+  .map({ memStub: true })
+  .start()
+  .flow(loginFlow)
+  .flow(apiDemoEpisode)
+  .end();

package/examples/saucedemo/src/flows/cart-bulk.flow.ts

@@ -1,19 +1,24 @@
-import { Engine, start, end, withTitle, chainFlow } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
+import "../states/checkout.mem-stubs.js";
 import { loginFlow } from "./login.flow.js";
 import { AddAllToCartBlock } from "../blocks/saucedemo-web/inventory/methods/add-all-to-cart.method.block.js";
 import { RemoveAllFromCartBlock } from "../blocks/saucedemo-web/inventory/methods/remove-all-from-cart.method.block.js";
 
-const engine = new Engine();
+/** Add every item, then remove them all (the bulk Methods). */
+export const cartBulkEpisode = engine
+  .map()
+  .start()
+  .method(
+    AddAllToCartBlock.stubBefore((ctx) =>
+      ctx.title("Cart bulk add/remove all"),
+    ),
+  )
+  .method(RemoveAllFromCartBlock)
+  .end();
 
-/**
- * Episode after login: drain every Add button, then every Remove button.
- * Proves bulk Methods + round-trip (LoggedIn <-> ItemInCart) without
- * instanceOptions. Pair with loginFlow via chainFlow for `waygraph demo`.
- */
-export const cartBulkEpisode = withTitle(
-  engine.defineFlow([start, AddAllToCartBlock, RemoveAllFromCartBlock, end]),
-  "Cart bulk add/remove all",
-);
-
-/** Full demo: Sign In -> Add all -> Remove all. */
-export const cartBulkFlow = chainFlow(loginFlow, cartBulkEpisode);
+export const cartBulkFlow = engine
+  .map({ memStub: true })
+  .start()
+  .flow(loginFlow)
+  .flow(cartBulkEpisode)
+  .end();