waygraph 0.15.53 → 0.16.0

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

@@ -1,5 +1,5 @@
-import { Engine, start, end, withTitle, chainFlow, checkpoint, defineApiBlock } from "waygraph";
-import type { Checkpoint, StubCtx } from "waygraph";
+import { checkpoint, defineApiBlock } from "waygraph";
+import { engine } from "../../config/waygraph.config.js";
 import { loginFlow } from "./login.flow.js";
 
 /**
@@ -14,24 +14,32 @@ import { loginFlow } from "./login.flow.js";
  * hits a well-known public REST test API (jsonplaceholder) purely to prove
  * the mechanism - a real project would point `call` at its own backend.
  */
-export type BackendHealthy = Checkpoint<"BackendHealthy">;
-export type BackendDown = Checkpoint<"BackendDown">;
+export const BackendHealthy = checkpoint("BackendHealthy");
+export type BackendHealthy = typeof BackendHealthy;
+export const BackendDown = checkpoint("BackendDown");
+export type BackendDown = typeof BackendDown;
 
-const engine = new Engine();
-
-const CheckBackendHealth = defineApiBlock<any, BackendHealthy | BackendDown>({
+const CheckBackendHealth = defineApiBlock({
   name: "check-backend-health",
-  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");
-  },
+  to: [BackendHealthy, BackendDown],
+  call: ({ request }) =>
+    request.get("https://jsonplaceholder.typicode.com/todos/1"),
+  resolve: (result) => (result.ok ? BackendHealthy : BackendDown),
 });
 
-export const apiDemoEpisode = withTitle(
-  engine.defineFlow([start, CheckBackendHealth, end]),
-  "Backend health check (defineApiBlock)",
-);
+export const apiDemoEpisode = engine
+  .map()
+  .start()
+  .method(
+    CheckBackendHealth.stubBefore((ctx) => {
+      ctx.title("Checking backend health · real HTTP request, no browser");
+    }),
+  )
+  .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();

package/examples/saucedemo/src/flows/shop.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 { 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 { NavCheckoutInfoBlock } from "../blocks/saucedemo-web/cart/nav-checkout-info.block.js";
@@ -8,22 +9,16 @@ import { FillPostalCodeBlock } from "../blocks/saucedemo-web/checkout-step-one/m
 import { SubmitCheckoutInfoBlock } from "../blocks/saucedemo-web/checkout-step-one/methods/submit-checkout-info.method.block.js";
 import { FinishOrderBlock } from "../blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.js";
 
-const engine = new Engine();
-
-// Episode-2 half of chainFlow(loginFlow, shopFlow) - assumes already LoggedIn
-// (AddToCartBlock's In is the Checkpoint<string> wildcard).
-export const shopFlow = withTitle(
-  engine
-    .map()
-    .start()
-    .method(AddToCartBlock)
-    .gotoPage(NavCartBlock)
-    .gotoPage(NavCheckoutInfoBlock)
-    .method(FillFirstNameBlock)
-    .method(FillLastNameBlock)
-    .method(FillPostalCodeBlock)
-    .method(SubmitCheckoutInfoBlock)
-    .method(FinishOrderBlock)
-    .end(),
-  "Shop & Checkout",
-);
+/** Add the selected item, check out and place the order. Starts signed in (run it after loginFlow). */
+export const shopFlow = engine
+  .map({ memStub: true })
+  .start()
+  .method(AddToCartBlock.stubBefore((ctx) => ctx.title("Shop & Checkout")))
+  .gotoPage(NavCartBlock)
+  .gotoPage(NavCheckoutInfoBlock)
+  .method(FillFirstNameBlock)
+  .method(FillLastNameBlock)
+  .method(FillPostalCodeBlock)
+  .method(SubmitCheckoutInfoBlock)
+  .method(FinishOrderBlock)
+  .end();

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

@@ -1,33 +1,18 @@
-import { Engine, start, end } from "waygraph";
-import type { LoginPage, LoggedIn, ItemInCart } 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";
 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";
 
-const engine = new Engine();
-
-// The QA case: a smoke test only cares that it was able to navigate this far -
-// it doesn't need the same DOM confirmation the real checkout.flow.ts wants.
-// Same Blocks, same act/resolve, zero duplication - only verify differs.
-// .withVerify([]) reads from the Block itself, discoverable by typing
-// "NavLoginBlock."/"SubmitLoginForFlow." in an editor - not a free function
-// you have to already know exists.
-//
-// Explicit <LoginPage, LoginPage, LoginPage, LoggedIn, ItemInCart> here -
-// AddToCartBlock's In is now the wildcard Checkpoint<string> (it's reused as
-// shopFlow's own entry block too), and inferring the chain purely from
-// several chained .withVerify([]) calls in one array trips TS's overload
-// resolution into unifying the wrong Out type partway through; pinning the
-// type args sidesteps it rather than fighting it. The two middle `LoginPage`
-// entries are fill-username / fill-password (self-loop Methods).
-export const smokeFlow = engine.defineFlow<LoginPage, LoginPage, LoginPage, LoggedIn, ItemInCart>([
-  start,
-  NavLoginBlock.withVerify([]),
-  FillUsernameBlock,
-  FillPasswordBlock,
-  SubmitLoginForFlow.withVerify([]),
-  AddToCartBlock.withVerify([]),
-  end,
-]);
+/** Smoke: the happy path with the Blocks' own verify lists switched off where a later step already proves the outcome. */
+export const smokeFlow = engine
+  .map()
+  .start()
+  .gotoPage(NavLoginBlock.withVerify([]))
+  .method(FillUsernameBlock)
+  .method(FillPasswordBlock)
+  .method(SubmitLoginForFlow.withVerify([]))
+  .method(AddToCartBlock.withVerify([]))
+  .end();