waygraph 0.15.53 → 0.16.0

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, Trait, narrate } from "waygraph";
+import {
+  CheckoutOverviewPage,
+  OrderComplete,
+} from "../../../../states/checkout.states.js";
 import { CheckoutOverviewSel } from "./checkout-overview.sel.js";
 
 /**
@@ -8,36 +11,26 @@ import { CheckoutOverviewSel } from "./checkout-overview.sel.js";
  * Route: saucedemo-web/checkout-step-two/methods/  (= /checkout-step-two.html)
  *
  * 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({
   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.",
+  from: CheckoutOverviewPage,
+  to: OrderComplete,
   instruction: {
     async act(page) {
       const finishButton = page.locator(CheckoutOverviewSel.finishBtn);
-      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,
-      });
+      await narrate(finishButton, "Placing the order", () =>
+        finishButton.click(),
+      );
     },
+    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 +43,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,6 +1,5 @@
 import { definePageBlock, Trait } from "waygraph";
-import type { StubCtx } from "waygraph";
-import type { LoggedIn } from "../../../states/checkout.states.js";
+import { 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";
 import { AddAllToCartBlock } from "./methods/add-all-to-cart.method.block.js";
@@ -19,20 +18,15 @@ import { InventorySel } from "./methods/inventory-items.js";
  * to LoggedIn. Cart Effects/Methods use In Checkpoint<string> (from: "*") so
  * auto still offers them after leave/return - menu follows live DOM buttons.
  */
-export const InventoryPageBlock = definePageBlock<LoggedIn>({
+export const InventoryPageBlock = definePageBlock({
   name: "page-inventory",
   description:
     "Inventory catalog hub - per-item and bulk add/remove, open item detail.",
-  checkpoint: "LoggedIn",
+  checkpoint: LoggedIn,
   verify: [
     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-all-to-cart.method.block.ts

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint, type Checkpoint } from "waygraph";
-import type { RemoveFromCartOutcome } from "../../../../states/checkout.states.js";
+import { defineMethodBlock, checkpoint } from "waygraph";
+import { RemoveFromCartOutcome } from "../../../../states/checkout.states.js";
 import { collectAddableItems, InventorySel } from "./inventory-items.js";
 
 type BulkObserve = "added" | "nothing";
@@ -14,12 +14,10 @@ type BulkObserve = "added" | "nothing";
  * leave inventory and return, collectors re-read Add buttons from the DOM.
  * Out: ItemInCart if the cart has items after; LoggedIn if still empty.
  */
-export const AddAllToCartBlock = defineMethodBlock<
-  Checkpoint<string>,
-  RemoveFromCartOutcome
->({
+export const AddAllToCartBlock = defineMethodBlock({
   name: "add-all-to-cart",
   description: "Adds every product still showing Add to cart on this page.",
+  to: RemoveFromCartOutcome,
   instruction: {
     async act(page) {
       const items = await collectAddableItems(page);

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

@@ -1,12 +1,8 @@
-import { defineEffectBlock, checkpoint, type Checkpoint, type WaygraphInstanceOption } from "waygraph";
-import type { StubCtx } from "waygraph";
-import type { ItemInCart } from "../../../../states/checkout.states.js";
+import { defineEffectBlock, type WaygraphInstanceOption } from "waygraph";
+import { 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
  * Helper: defineEffectBlock
@@ -15,91 +11,29 @@ 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>({
+export const AddToCartBlock = defineEffectBlock({
   name: "add-to-cart",
-  description: "Adds the item named by mem (saucedemo.selectedItem) to the cart.",
+  description:
+    "Adds the item named by mem (saucedemo.selectedItem) to the cart.",
+  to: ItemInCart,
   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();
+          return await page
+            .locator(InventorySel.removeBtn(id))
+            .first()
+            .isVisible();
         },
       },
     ],
-    // 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,
-        },
-        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);

package/examples/saucedemo/src/blocks/saucedemo-web/inventory/methods/remove-all-from-cart.method.block.ts

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint, type Checkpoint } from "waygraph";
-import type { RemoveFromCartOutcome } from "../../../../states/checkout.states.js";
+import { defineMethodBlock, checkpoint } from "waygraph";
+import { RemoveFromCartOutcome } from "../../../../states/checkout.states.js";
 import { collectRemovableItems, InventorySel } from "./inventory-items.js";
 
 type BulkObserve = "still-has-items" | "cart-empty";
@@ -14,12 +14,10 @@ type BulkObserve = "still-has-items" | "cart-empty";
  * single-item remove. Out: LoggedIn when cart empty; ItemInCart if anything
  * remains (partial failure / race).
  */
-export const RemoveAllFromCartBlock = defineMethodBlock<
-  Checkpoint<string>,
-  RemoveFromCartOutcome
->({
+export const RemoveAllFromCartBlock = defineMethodBlock({
   name: "remove-all-from-cart",
   description: "Removes every product still showing Remove on this page.",
+  to: RemoveFromCartOutcome,
   instruction: {
     async act(page) {
       const items = await collectRemovableItems(page);

package/examples/saucedemo/src/blocks/saucedemo-web/inventory/methods/remove-from-cart.effect.block.ts

@@ -1,5 +1,5 @@
-import { defineEffectBlock, checkpoint, type Checkpoint, type WaygraphInstanceOption } from "waygraph";
-import type { RemoveFromCartOutcome } from "../../../../states/checkout.states.js";
+import { defineEffectBlock, checkpoint, type WaygraphInstanceOption } from "waygraph";
+import { RemoveFromCartOutcome } from "../../../../states/checkout.states.js";
 import { SelectedItem } from "../../../../states/checkout.mem-keys.js";
 import { collectRemovableItems, InventorySel } from "./inventory-items.js";
 
@@ -13,9 +13,10 @@ type RemoveObserve = "still-has-items" | "cart-empty";
  * Removes the mem-picked product. After Add, waygraph auto shows matching
  * "Remove ..." rows from live Remove buttons.
  */
-export const RemoveFromCartBlock = defineEffectBlock<Checkpoint<string>, RemoveFromCartOutcome>({
+export const RemoveFromCartBlock = defineEffectBlock({
   name: "remove-from-cart",
   description: "Removes the item named by mem (saucedemo.selectedItem) from the cart.",
+  to: RemoveFromCartOutcome,
   requires: [SelectedItem.key],
   instruction: {
     async act(page, _input, mem) {

package/examples/saucedemo/src/blocks/saucedemo-web/inventory/nav-item-detail.block.ts

@@ -1,5 +1,5 @@
 import { defineMemNavBlock, Trait, type WaygraphInstanceOption } from "waygraph";
-import type { ItemDetailPage } from "../../../states/checkout.states.js";
+import { ItemDetailPage } from "../../../states/checkout.states.js";
 import { SelectedItem } from "../../../states/checkout.mem-keys.js";
 import {
   collectInventoryItems,
@@ -14,10 +14,10 @@ import {
  * Opens the mem-picked product detail page. waygraph auto lists one
  * "Open ... details" row per inventory card via instanceOptions.
  */
-export const NavItemDetailBlock = defineMemNavBlock<ItemDetailPage>({
+export const NavItemDetailBlock = defineMemNavBlock({
   name: "nav-item-detail",
   description: "Opens the product named by mem (saucedemo.selectedItem) on its detail page.",
-  checkpoint: "ItemDetailPage",
+  checkpoint: ItemDetailPage,
   requires: [SelectedItem.key],
   click: (mem) => InventorySel.title(mem.get(SelectedItem.key).id),
   verify: [Trait.url({ pathname: "/inventory-item.html" })],

package/examples/saucedemo/src/blocks/saucedemo-web/inventory-item/nav-back-to-inventory.block.ts

@@ -1,5 +1,5 @@
 import { defineNavClickBlock, Trait } from "waygraph";
-import type { LoggedIn } from "../../../states/checkout.states.js";
+import { LoggedIn } from "../../../states/checkout.states.js";
 import { ItemDetailSel } from "./item-detail.sel.js";
 
 /**
@@ -10,10 +10,10 @@ import { ItemDetailSel } from "./item-detail.sel.js";
  * click, not url - detail page "Back to products". Separate Block from
  * nav-back-to-products (different From Checkpoint; atomic convention).
  */
-export const NavBackToInventoryBlock = defineNavClickBlock<LoggedIn>({
+export const NavBackToInventoryBlock = defineNavClickBlock({
   name: "nav-back-to-inventory",
   description: "Clicks 'Back to products' on the item detail page.",
-  checkpoint: "LoggedIn",
+  checkpoint: LoggedIn,
   click: ItemDetailSel.backToProductsBtn,
   verify: [Trait.url({ pathname: "/inventory.html" })],
 });

package/examples/saucedemo/src/blocks/saucedemo-web/inventory-item/nav-back-to-products.block.ts

@@ -1,5 +1,5 @@
 import { defineNavClickBlock, Trait } from "waygraph";
-import type { LoggedIn } from "../../../states/checkout.states.js";
+import { LoggedIn } from "../../../states/checkout.states.js";
 import { ItemDetailSel } from "./item-detail.sel.js";
 
 /**
@@ -10,10 +10,10 @@ import { ItemDetailSel } from "./item-detail.sel.js";
  * click, not url - order-complete "Back Home" proves the button path
  * (a url NavBlock would teleport without exercising the control).
  */
-export const NavBackToProductsBlock = defineNavClickBlock<LoggedIn>({
+export const NavBackToProductsBlock = defineNavClickBlock({
   name: "nav-back-to-products",
   description: "Clicks 'Back Home' on the order confirmation page.",
-  checkpoint: "LoggedIn",
+  checkpoint: LoggedIn,
   click: ItemDetailSel.backToProductsBtn,
   verify: [Trait.url({ pathname: "/inventory.html" })],
 });

package/examples/saucedemo/src/blocks/saucedemo-web/inventory-item/nav-continue-shopping.block.ts

@@ -1,5 +1,5 @@
 import { defineNavClickBlock, Trait } from "waygraph";
-import type { LoggedIn } from "../../../states/checkout.states.js";
+import { LoggedIn } from "../../../states/checkout.states.js";
 import { ItemDetailSel } from "./item-detail.sel.js";
 
 /**
@@ -9,10 +9,10 @@ import { ItemDetailSel } from "./item-detail.sel.js";
  *
  * click, not url - cart page "Continue Shopping" proves the app's own path.
  */
-export const NavContinueShoppingBlock = defineNavClickBlock<LoggedIn>({
+export const NavContinueShoppingBlock = defineNavClickBlock({
   name: "nav-continue-shopping",
   description: "Clicks 'Continue Shopping' on the cart page.",
-  checkpoint: "LoggedIn",
+  checkpoint: LoggedIn,
   click: ItemDetailSel.continueShoppingBtn,
   verify: [Trait.url({ pathname: "/inventory.html" })],
 });

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

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint, type StubCtx } from "waygraph";
-import type { LoginPage } from "../../../states/checkout.states.js";
+import { defineMethodBlock } from "waygraph";
+import { LoginPage } from "../../../states/checkout.states.js";
 import { LoginCreds } from "../../../states/checkout.mem-keys.js";
 import { LoginSel } from "./login.sel.js";
 
@@ -11,40 +11,16 @@ import { LoginSel } from "./login.sel.js";
  * Fills the password field only - self-loop on LoginPage. See
  * fill-username.method.block.ts for why this is split from submit.
  */
-export const FillPasswordBlock = defineMethodBlock<LoginPage, LoginPage>({
+export const FillPasswordBlock = defineMethodBlock({
   name: "fill-password",
   description: "Fills the password field on the login form.",
+  from: LoginPage,
+  to: LoginPage,
   requires: [LoginCreds.key],
   instruction: {
     async act(page, _input, mem) {
       const { password } = mem.get(LoginCreds.key);
       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,5 +1,5 @@
-import { defineMethodBlock, checkpoint, type StubCtx } from "waygraph";
-import type { LoginPage } from "../../../states/checkout.states.js";
+import { defineMethodBlock } from "waygraph";
+import { LoginPage } from "../../../states/checkout.states.js";
 import { LoginCreds } from "../../../states/checkout.mem-keys.js";
 import { LoginSel } from "./login.sel.js";
 
@@ -13,59 +13,16 @@ import { LoginSel } from "./login.sel.js";
  * graph/demo show fill vs submit as real, distinct steps instead of one
  * Block doing "input username and password and login at the same time".
  */
-export const FillUsernameBlock = defineMethodBlock<LoginPage, LoginPage>({
+export const FillUsernameBlock = defineMethodBlock({
   name: "fill-username",
   description: "Fills the username field on the login form.",
+  from: LoginPage,
+  to: LoginPage,
   requires: [LoginCreds.key],
   instruction: {
     async act(page, _input, mem) {
       const { username } = mem.get(LoginCreds.key);
       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 {
+  LoginPage,
+  LoginSubmitOutcome,
+} from "../../../states/checkout.states.js";
 import { LoginSel } from "./login.sel.js";
 
 type LoginObserve = "success" | "failure";
@@ -14,9 +17,11 @@ 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({
   name: "submit-login",
   description: "Submits the login form; stays on LoginPage when auth fails.",
+  from: LoginPage,
+  to: LoginSubmitOutcome,
   instruction: {
     async act(page) {
       // noWaitAfter: observe owns the inventory URL wait. Default click
@@ -26,7 +31,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 +45,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/blocks/saucedemo-web/methods/submit-logout.method.block.ts

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint, Trait } from "waygraph";
-import type { LoggedIn, LoginPage } from "../../../states/checkout.states.js";
+import { defineMethodBlock, Trait } from "waygraph";
+import { LoggedIn, LoginPage } from "../../../states/checkout.states.js";
 import { LoginSel } from "./login.sel.js";
 
 /**
@@ -9,15 +9,16 @@ import { LoginSel } from "./login.sel.js";
  *
  * Burger menu Logout - real cycle back to LoginPage (same Checkpoint nav-login lands on).
  */
-export const SubmitLogoutBlock = defineMethodBlock<LoggedIn, LoginPage>({
+export const SubmitLogoutBlock = defineMethodBlock({
   name: "submit-logout",
   description: "Opens the burger menu and logs out.",
+  from: LoggedIn,
+  to: LoginPage,
   instruction: {
     async act(page) {
       await page.locator(LoginSel.burgerMenuButton).click();
       await page.locator(LoginSel.logoutLink).click();
     },
-    resolve: () => checkpoint("LoginPage"),
     verify: [Trait.visible(LoginSel.loginButton)],
   },
 });

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

@@ -1,5 +1,5 @@
 import { definePageBlock, Trait } from "waygraph";
-import type { LoginPage } from "../../states/checkout.states.js";
+import { LoginPage } from "../../states/checkout.states.js";
 import { FillUsernameBlock } from "./methods/fill-username.method.block.js";
 import { FillPasswordBlock } from "./methods/fill-password.method.block.js";
 import { SubmitLoginBlock } from "./methods/submit-login.method.block.js";
@@ -17,10 +17,10 @@ import { LoginSel } from "./methods/login.sel.js";
  * and submits. Name stays `nav-login` so existing flows / chain specs keep
  * working.
  */
-export const NavLoginBlock = definePageBlock<LoginPage>({
+export const NavLoginBlock = definePageBlock({
   name: "nav-login",
   description: "Goes to the Swag Labs login page.",
-  checkpoint: "LoginPage",
+  checkpoint: LoginPage,
   url: "/",
   verify: [Trait.visible(LoginSel.loginButton)],
   methods: {