waygraph 0.15.53 → 0.15.54

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();

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

@@ -1,11 +1,13 @@
-import { Engine, start, end, withTitle } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
+import "../states/checkout.mem-stubs.js";
 import { NavCartBlock } from "../blocks/saucedemo-web/cart/nav-cart.block.js";
 import { NavContinueShoppingBlock } from "../blocks/saucedemo-web/inventory-item/nav-continue-shopping.block.js";
 
-const engine = new Engine();
-
-// Open cart and continue shopping - wires orphan nav-continue-shopping Block.
-export const cartContinueFlow = withTitle(
-  engine.defineFlow([start, NavCartBlock, NavContinueShoppingBlock, end]),
-  "Cart then continue shopping",
-);
+export const cartContinueFlow = engine
+  .map()
+  .start()
+  .gotoPage(
+    NavCartBlock.stubBefore((ctx) => ctx.title("Cart then continue shopping")),
+  )
+  .gotoPage(NavContinueShoppingBlock)
+  .end();

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

@@ -1,9 +1,9 @@
-import { Engine, start, end } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
+import "../states/checkout.mem-stubs.js";
 import { RemoveFromCartBlock } from "../blocks/saucedemo-web/inventory/methods/remove-from-cart.effect.block.js";
 
-const engine = new Engine();
-
-// Registers remove-from-cart in the discoverable graph so waygraph auto can
-// offer live "Remove … from cart" rows. Not a product checkout path - Add /
-// Remove pairing for interactive explore.
-export const cartMemFlow = engine.defineFlow([start, RemoveFromCartBlock, end]);
+export const cartMemFlow = engine
+  .map()
+  .start()
+  .method(RemoveFromCartBlock)
+  .end();

package/examples/saucedemo/src/flows/catalog-logout.flow.ts

@@ -1,12 +1,17 @@
-import { Engine, start, end, withTitle } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
+import "../states/checkout.mem-stubs.js";
 import { NavItemDetailBlock } from "../blocks/saucedemo-web/inventory/nav-item-detail.block.js";
 import { NavBackToInventoryBlock } from "../blocks/saucedemo-web/inventory-item/nav-back-to-inventory.block.js";
 import { SubmitLogoutBlock } from "../blocks/saucedemo-web/methods/submit-logout.method.block.js";
 
-const engine = new Engine();
-
-// Browse one product, return to inventory, log out - wires orphan catalog + logout Blocks.
-export const catalogLogoutFlow = withTitle(
-  engine.defineFlow([start, NavItemDetailBlock, NavBackToInventoryBlock, SubmitLogoutBlock, end]),
-  "Catalog browse then logout",
-);
+export const catalogLogoutFlow = engine
+  .map()
+  .start()
+  .gotoPage(
+    NavItemDetailBlock.stubBefore((ctx) =>
+      ctx.title("Catalog browse then logout"),
+    ),
+  )
+  .gotoPage(NavBackToInventoryBlock)
+  .method(SubmitLogoutBlock)
+  .end();

package/examples/saucedemo/src/flows/checkout-then-browse-again.flow.ts

@@ -1,13 +1,5 @@
-import { Engine, start, end, withTitle } from "waygraph";
-import type {
-  LoginPage,
-  LoggedIn,
-  ItemInCart,
-  CartPage,
-  CheckoutInfoPage,
-  CheckoutOverviewPage,
-  OrderComplete,
-} from "../states/checkout.states.js";
+import { engine } from "../../config/waygraph.config.js";
+import "../states/checkout.mem-stubs.js";
 import { NavLoginBlock } from "../blocks/saucedemo-web/nav-login.block.js";
 import { FillUsernameBlock } from "../blocks/saucedemo-web/methods/fill-username.method.block.js";
 import { FillPasswordBlock } from "../blocks/saucedemo-web/methods/fill-password.method.block.js";
@@ -22,41 +14,27 @@ import { SubmitCheckoutInfoBlock } from "../blocks/saucedemo-web/checkout-step-o
 import { FinishOrderBlock } from "../blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.js";
 import { NavBackToProductsBlock } from "../blocks/saucedemo-web/inventory-item/nav-back-to-products.block.js";
 
-const engine = new Engine({ headless: false, slowMo: 250 });
-
-// Same atomic checkout chain, plus click-based nav-back-to-products
-// (proves OrderComplete -> LoggedIn without a goto teleport).
-export const checkoutThenBrowseAgainFlow = withTitle(
-  engine.defineFlow<
-    LoginPage,
-    LoginPage,
-    LoginPage,
-    LoggedIn,
-    ItemInCart,
-    CartPage,
-    CheckoutInfoPage,
-    CheckoutInfoPage,
-    CheckoutInfoPage,
-    CheckoutInfoPage,
-    CheckoutOverviewPage,
-    OrderComplete,
-    LoggedIn
-  >([
-    start,
-    NavLoginBlock,
-    FillUsernameBlock,
-    FillPasswordBlock,
-    SubmitLoginForFlow,
-    AddToCartBlock,
-    NavCartBlock,
-    NavCheckoutInfoBlock,
-    FillFirstNameBlock,
-    FillLastNameBlock,
-    FillPostalCodeBlock,
-    SubmitCheckoutInfoBlock,
-    FinishOrderBlock,
-    NavBackToProductsBlock,
-    end,
-  ]),
-  "Owner: Checkout, then click Back Home (click-based NavBlock demo)",
-);
+/** Full checkout, then the "Back Home" click-based Nav Block returns to the catalogue. */
+export const checkoutThenBrowseAgainFlow = engine
+  .map({ memStub: true })
+  .start()
+  .gotoPage(
+    NavLoginBlock.stubBefore((ctx) =>
+      ctx.title(
+        "Owner: Checkout, then click Back Home (click-based NavBlock demo)",
+      ),
+    ),
+  )
+  .method(FillUsernameBlock)
+  .method(FillPasswordBlock)
+  .method(SubmitLoginForFlow)
+  .method(AddToCartBlock)
+  .gotoPage(NavCartBlock)
+  .gotoPage(NavCheckoutInfoBlock)
+  .method(FillFirstNameBlock)
+  .method(FillLastNameBlock)
+  .method(FillPostalCodeBlock)
+  .method(SubmitCheckoutInfoBlock)
+  .method(FinishOrderBlock)
+  .gotoPage(NavBackToProductsBlock)
+  .end();

package/examples/saucedemo/src/flows/checkout.flow.ts

@@ -1,4 +1,5 @@
-import { Engine, withTitle } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
+import "../states/checkout.mem-stubs.js";
 import { NavLoginBlock } from "../blocks/saucedemo-web/nav-login.block.js";
 import { FillUsernameBlock } from "../blocks/saucedemo-web/methods/fill-username.method.block.js";
 import { FillPasswordBlock } from "../blocks/saucedemo-web/methods/fill-password.method.block.js";
@@ -13,88 +14,71 @@ import { SubmitCheckoutInfoBlock } from "../blocks/saucedemo-web/checkout-step-o
 import { FinishOrderBlock } from "../blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.js";
 import { LoginSel } from "../blocks/saucedemo-web/methods/login.sel.js";
 
-const engine = new Engine({ headless: false, slowMo: 250 });
-
-/**
- * Owner checkout via map() with inline `{ ff: true }` (no separate
- * FfOwnerAuthBlock, no HighlightFixtureMap, no .ffStart()/.ffEnd() bracket -
- * the three auth steps below merge into one fast-forward block just by
- * flagging each one). Auth collapses to one blitz step; post-login blocks
- * keep their own ctx stubBefore/stubAfter. Call-site decorate example on
- * fill-username when --ff-expand shows inners again.
- *
- * Also demonstrates two other recent conventions on the checkout-step-one
- * leg: ctx.caption() (bottom subtitle-bar, ported from zsign's help-center
- * clip engine) narrating each field, and ctx.titlePos() moving the banner
- * left -> center -> right across three consecutive steps.
- */
-export const checkoutFlow = withTitle(
-  engine
-    .map()
-    .start()
-    .gotoPage(NavLoginBlock, { ff: true })
-    .method(
-      FillUsernameBlock.stubBefore((ctx) => {
-        ctx.ring("username", {
-          selector: LoginSel.username,
-          label: "Demo user",
-          detail: "standard_user from Mem - library block stays neutral underneath",
-          tag: "AC",
-          duration: true,
-          focus: true,
-        });
-      }),
-      { ff: true },
-    )
-    .method(
-      FillPasswordBlock.stubBefore((ctx) => {
-        ctx.ring("password", {
-          selector: LoginSel.password,
-          label: "Password",
-          detail: "Filled from Mem credentials.",
-          duration: 1500,
-          focus: true,
-        });
-      }),
-      { ff: true },
-    )
-    .method(
-      SubmitLoginForFlow.stubBefore((ctx) => {
-        ctx.ring("submit", {
-          selector: LoginSel.loginButton,
-          label: "Sign in",
-          tag: "GATE",
-          duration: true,
-          fastMode: 500,
-          focus: true,
-          weight: "bold",
-        });
-      }),
-      { ff: true },
-    )
-    .method(AddToCartBlock)
-    .gotoPage(NavCartBlock)
-    .gotoPage(NavCheckoutInfoBlock)
-    .method(
-      FillFirstNameBlock.stubBefore((ctx) => {
-        ctx.caption("Enter the first name on the order");
-        ctx.titlePos("left");
-      }),
-    )
-    .method(
-      FillLastNameBlock.stubBefore((ctx) => {
-        ctx.caption("Enter the last name on the order");
-        ctx.titlePos("center");
-      }),
-    )
-    .method(
-      FillPostalCodeBlock.stubBefore((ctx) => {
-        ctx.caption("Enter a postal code to calculate shipping");
-        ctx.titlePos("right");
-      }),
-    )
-    .method(SubmitCheckoutInfoBlock.stubBefore((ctx) => ctx.hideCaption()))
-    .method(FinishOrderBlock)
-    .end(),
-  "Owner: Full Checkout",
-);
+export const checkoutFlow = engine
+  .map({ memStub: true })
+  .start()
+  .gotoPage(NavLoginBlock, { ff: true })
+  .method(
+    FillUsernameBlock.stubBefore((ctx) => {
+      ctx.ring("username", {
+        selector: LoginSel.username,
+        label: "Demo user",
+        detail:
+          "standard_user from Mem - library block stays neutral underneath",
+        tag: "AC",
+        duration: true,
+        focus: true,
+      });
+    }),
+    { ff: true },
+  )
+  .method(
+    FillPasswordBlock.stubBefore((ctx) => {
+      ctx.ring("password", {
+        selector: LoginSel.password,
+        label: "Password",
+        detail: "Filled from Mem credentials.",
+        duration: 1500,
+        focus: true,
+      });
+    }),
+    { ff: true },
+  )
+  .method(
+    SubmitLoginForFlow.stubBefore((ctx) => {
+      ctx.ring("submit", {
+        selector: LoginSel.loginButton,
+        label: "Sign in",
+        tag: "GATE",
+        duration: true,
+        fastMode: 500,
+        focus: true,
+        weight: "bold",
+      });
+    }),
+    { ff: true },
+  )
+  .method(AddToCartBlock.stubBefore((ctx) => ctx.title("Owner: Full Checkout")))
+  .gotoPage(NavCartBlock)
+  .gotoPage(NavCheckoutInfoBlock)
+  .method(
+    FillFirstNameBlock.stubBefore((ctx) => {
+      ctx.caption("Enter the first name on the order");
+      ctx.titlePos("left");
+    }),
+  )
+  .method(
+    FillLastNameBlock.stubBefore((ctx) => {
+      ctx.caption("Enter the last name on the order");
+      ctx.titlePos("center");
+    }),
+  )
+  .method(
+    FillPostalCodeBlock.stubBefore((ctx) => {
+      ctx.caption("Enter a postal code to calculate shipping");
+      ctx.titlePos("right");
+    }),
+  )
+  .method(SubmitCheckoutInfoBlock.stubBefore((ctx) => ctx.hideCaption()))
+  .method(FinishOrderBlock)
+  .end();

package/examples/saucedemo/src/flows/device-showcase.flow.ts

@@ -1,32 +1,31 @@
-import { Engine, start, end, withTitle } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
+import "../states/checkout.mem-stubs.js";
 import { NavLoginBlock } from "../blocks/saucedemo-web/nav-login.block.js";
 import { FillUsernameBlock } from "../blocks/saucedemo-web/methods/fill-username.method.block.js";
 import { FillPasswordBlock } from "../blocks/saucedemo-web/methods/fill-password.method.block.js";
 import { SubmitLoginForFlow } from "../blocks/saucedemo-web/methods/submit-login-for-flow.js";
 import { AddToCartBlock } from "../blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.js";
 import { NavCartBlock } from "../blocks/saucedemo-web/cart/nav-cart.block.js";
+import { deviceShowcase as d } from "../stubs/device-showcase.js";
 
-const engine = new Engine();
-
-/**
- * Short device/orientation showcase (0.13.3+):
- *   login mobile portrait -> land on inventory landscape ->
- *   add-to-cart tablet portrait -> open cart tablet landscape -> desktop
- *
- * Run:
- *   npm run demo:device
- *   npm run demo:device:video
- */
-export const deviceShowcaseFlow = withTitle(
-  engine.defineFlow([
-    start,
-    NavLoginBlock,
-    FillUsernameBlock,
-    FillPasswordBlock,
-    SubmitLoginForFlow,
-    AddToCartBlock,
-    NavCartBlock,
-    end,
-  ]),
-  "Device showcase",
-);
+/** Sign in on a phone, shop on a tablet, open the cart in landscape: the device and zoom narration in src/stubs/device-showcase.ts. */
+export const deviceShowcaseFlow = engine
+  .map({ memStub: true })
+  .start()
+  .gotoPage(NavLoginBlock)
+  .method(
+    FillUsernameBlock.stubBefore(d.username.before).stubAfter(d.username.after),
+  )
+  .method(
+    FillPasswordBlock.stubBefore(d.password.before).stubAfter(d.password.after),
+  )
+  .method(
+    SubmitLoginForFlow.stubBefore(d.submit.before).stubAfter(d.submit.after),
+  )
+  .method(
+    AddToCartBlock.stubBefore(d.addToCart.before).stubAfter(d.addToCart.after),
+  )
+  .gotoPage(
+    NavCartBlock.stubBefore(d.openCart.before).stubAfter(d.openCart.after),
+  )
+  .end();

package/examples/saucedemo/src/flows/login.flow.ts

@@ -1,23 +1,16 @@
-import { Engine, withTitle } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
+import "../states/checkout.mem-stubs.js";
 import { NavLoginBlock } from "../blocks/saucedemo-web/nav-login.block.js";
 import { FillUsernameBlock } from "../blocks/saucedemo-web/methods/fill-username.method.block.js";
 import { FillPasswordBlock } from "../blocks/saucedemo-web/methods/fill-password.method.block.js";
 import { SubmitLoginForFlow } from "../blocks/saucedemo-web/methods/submit-login-for-flow.js";
 
-const engine = new Engine();
-
-// The step-mode overlay prepends "Episode N: " itself - the title here is
-// just the label, not the full heading.
-// map() + ctx stubs on the Method blocks (see fill-username / fill-password /
-// submit-login) - no HighlightFixtureMap.
-export const loginFlow = withTitle(
-  engine
-    .map()
-    .start()
-    .gotoPage(NavLoginBlock)
-    .method(FillUsernameBlock)
-    .method(FillPasswordBlock)
-    .method(SubmitLoginForFlow)
-    .end(),
-  "Sign In",
-);
+/** Standard user signs in. Credentials come from the memStub in src/states/checkout.mem-stubs.ts unless --data / mem set them. */
+export const loginFlow = engine
+  .map({ memStub: true })
+  .start()
+  .gotoPage(NavLoginBlock.stubBefore((ctx) => ctx.title("Sign In")))
+  .method(FillUsernameBlock)
+  .method(FillPasswordBlock)
+  .method(SubmitLoginForFlow)
+  .end();

package/examples/saucedemo/src/flows/mem-stub-demo.flow.ts

@@ -1,23 +1,12 @@
-import { Engine, withMemStub, registerMemStub } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
+import "../states/checkout.mem-stubs.js";
 import { NavLoginBlock } from "../blocks/saucedemo-web/nav-login.block.js";
 import { FillUsernameBlock } from "../blocks/saucedemo-web/methods/fill-username.method.block.js";
-import { LoginCreds } from "../states/checkout.mem-keys.js";
 
-/**
- * Test-only fixture for waygraph's own `--mem-stub` CLI flag
- * (tests/cli/mem-stub.spec.ts) - not part of the saucedemo showcase's own
- * demo/story. Registers a fake LoginCreds so `waygraph run
- * mem-stub-demo.flow.ts --mem-stub` succeeds with zero --data, proving the
- * registry + preflight fallback work against the real CLI, not just the
- * in-process engine tests in tests/core/mem-stub.spec.ts.
- */
-registerMemStub(LoginCreds.key, () => ({
-  username: "standard_user",
-  password: "secret_sauce",
-}));
-
-const engine = new Engine();
-
-export const memStubDemoFlow = withMemStub(
-  engine.map().start().gotoPage(NavLoginBlock).method(FillUsernameBlock).end(),
-);
+/** memStub: the credentials are never supplied; src/states/checkout.mem-stubs.ts fills them. */
+export const memStubDemoFlow = engine
+  .map({ memStub: true })
+  .start()
+  .gotoPage(NavLoginBlock)
+  .method(FillUsernameBlock)
+  .end();