waygraph 0.15.54 → 0.16.0

package/examples/saucedemo/docs/HELPERS.md

@@ -12,19 +12,16 @@ Runtime is always a `Block`. Helpers are TypeScript salt + clear intent.
 | `defineAssertBlock` | Self-loop assertion, no state change - `verify` only | `*.method.block.ts` under `methods/` |
 | `defineEffectBlock` | Instance mutate + auto menu rows | `*.effect.block.ts` under `methods/` |
 | `defineBlock` | Escape hatch: tests, unsure, probes | any |
-| `defineActionBlock` | **Deprecated** alias of `defineMethodBlock` | - |
 
-`defineNavBlock({ click })` still works (compat) - prefer `defineNavClickBlock` in app code.
+`defineNavBlock({ click })` and `defineNavClickBlock` build the same Block; app code reads better with `defineNavClickBlock`.
 
 **One distinct action per Block.** A Method that fills fields *and* submits is wrong even if
 it "works" - split it (`fill-username` + `fill-password` + `submit-login`, not one Block).
 `defineAssertBlock({ name, checkpoint, verify, waitForHeading?, requires? })` is the
 self-loop-only shape for "assert something on the current page, no state change" - no
 hand-written `act`/`resolve` to accidentally make do two things. `waygraph check` warns when
-a `verify` array inlines a literal selector string instead of a `*Sel` reference. Give it an
-explicit type argument (`defineAssertBlock<LoggedIn>({...})`) whenever it is not the last
-Block before `end` - otherwise `Out` defaults to wildcard `Checkpoint<string>`, which breaks
-`defineFlow`'s tuple typing mid-chain.
+a `verify` array inlines a literal selector string instead of a `*Sel` reference. Its `checkpoint` is a Checkpoint
+value, which types it on both sides, so it sits anywhere in a `map()` chain.
 
 ---
 
@@ -41,7 +38,7 @@ export const InventorySel = {
 
 export const InventoryPageBlock = definePageBlock({
   name: "page-inventory",
-  checkpoint: "LoggedIn",
+  checkpoint: LoggedIn,
   verify: [Trait.url({ pathname: "/inventory.html" }), Trait.visible(InventorySel.list)],
   methods: {
     addToCart: () => AddToCartBlock,
@@ -84,8 +81,10 @@ Checkpoint = place on the map. `branch()` = which road to take from that place.
 Conditional Out (no `branch()` needed for auto/graph):
 
 ```ts
-defineMethodBlock<LoginPage, LoggedIn | LoginPage>({
+defineMethodBlock({
   name: "submit-login",
+  from: LoginPage,
+  to: [LoggedIn, LoginPage],
   instruction: {
     async act(page) { /* click only - fields were filled by earlier Blocks */ },
     async observe(page) {
@@ -123,8 +122,9 @@ then run the Block (act reads mem as usual).
 ### Effect - spawn Method-like rows (Add / Remove)
 
 ```ts
-defineEffectBlock<Checkpoint<string>, ItemInCart>({
+defineEffectBlock({
   name: "add-to-cart",
+  to: ItemInCart, // no `from`: runs from anywhere
   requires: [SelectedItem.key],
   instruction: {
     async act(page, _in, mem) {
@@ -151,9 +151,9 @@ Auto shows: `Add "Sauce Labs Backpack" to cart`, `Add "Bike Light"…`, …
 ### MemNav - spawn Nav rows (Open details)
 
 ```ts
-defineMemNavBlock<ItemDetailPage>({
+defineMemNavBlock({
   name: "nav-item-detail",
-  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/SITE-MAP.md

@@ -9,7 +9,6 @@ src/blocks/
   saucedemo-web/                      # URL /
     NAV.md
     nav-login.block.ts                # Page  definePageBlock url:/
-    ff-owner-auth.block.ts            # FFCompose (nav-login + fill-username + fill-password + submit-login)
     methods/
       fill-username.method.block.ts   # Method defineMethodBlock (self-loop on LoginPage)
       fill-password.method.block.ts   # Method defineMethodBlock (self-loop on LoginPage)

package/examples/saucedemo/src/blocks/saucedemo-web/NAV.md

@@ -27,11 +27,7 @@ Fill and submit are three separate Blocks (not one that fills both fields and
 clicks Login) so the graph/demo show each as its own step - no Block does
 more than one distinct action.
 
-## Other
-
-| File | Kind | Notes |
-|------|------|-------|
-| `ff-owner-auth.block.ts` | FFCompose | Collapses nav-login + fill-username + fill-password + submit-login into one opaque demo/run step (`--ff-expand` shows all 4 again) |
+A flow that wants to skip watching auth marks those steps `{ ff: true }` (see `src/flows/checkout.flow.ts`).
 
 ## Related mem keys / checkpoints
 

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

@@ -1,5 +1,5 @@
 import { defineNavClickBlock, Trait } from "waygraph";
-import type { CartPage } from "../../../states/checkout.states.js";
+import { CartPage } from "../../../states/checkout.states.js";
 import { CartSel } from "./cart.sel.js";
 
 /**
@@ -9,10 +9,10 @@ import { CartSel } from "./cart.sel.js";
  *
  * click, not url - header cart link from inventory-adjacent pages.
  */
-export const NavCartBlock = defineNavClickBlock<CartPage>({
+export const NavCartBlock = defineNavClickBlock({
   name: "nav-cart",
   description: "Clicks the cart link in the header.",
-  checkpoint: "CartPage",
+  checkpoint: CartPage,
   click: CartSel.cartLink,
   verify: [Trait.url({ pathname: "/cart.html" })],
 });

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

@@ -1,5 +1,5 @@
 import { defineNavClickBlock, Trait } from "waygraph";
-import type { CheckoutInfoPage } from "../../../states/checkout.states.js";
+import { CheckoutInfoPage } from "../../../states/checkout.states.js";
 import { CartSel } from "./cart.sel.js";
 
 /**
@@ -9,10 +9,10 @@ import { CartSel } from "./cart.sel.js";
  *
  * Cart page "Checkout" button - owns the nav into step one.
  */
-export const NavCheckoutInfoBlock = defineNavClickBlock<CheckoutInfoPage>({
+export const NavCheckoutInfoBlock = defineNavClickBlock({
   name: "nav-checkout-info",
   description: "Clicks 'Checkout' on the cart page.",
-  checkpoint: "CheckoutInfoPage",
+  checkpoint: CheckoutInfoPage,
   click: CartSel.checkoutBtn,
   verify: [Trait.url({ pathname: "/checkout-step-one.html" })],
 });

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/methods/fill-first-name.method.block.ts

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint } from "waygraph";
-import type { CheckoutInfoPage } from "../../../../states/checkout.states.js";
+import { defineMethodBlock } from "waygraph";
+import { CheckoutInfoPage } from "../../../../states/checkout.states.js";
 import { CheckoutInfoSel } from "./checkout-info.sel.js";
 
 /**
@@ -10,13 +10,14 @@ import { CheckoutInfoSel } from "./checkout-info.sel.js";
  * Fills the first name field only - self-loop on CheckoutInfoPage. Continue
  * is its own Block (submit-checkout-info.method.block.ts).
  */
-export const FillFirstNameBlock = defineMethodBlock<CheckoutInfoPage, CheckoutInfoPage>({
+export const FillFirstNameBlock = defineMethodBlock({
   name: "fill-first-name",
   description: "Fills the first name field on the shipping info form.",
+  from: CheckoutInfoPage,
+  to: CheckoutInfoPage,
   instruction: {
     async act(page) {
       await page.locator(CheckoutInfoSel.firstName).fill("Ada");
     },
-    resolve: () => checkpoint("CheckoutInfoPage"),
   },
 });

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/methods/fill-last-name.method.block.ts

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint } from "waygraph";
-import type { CheckoutInfoPage } from "../../../../states/checkout.states.js";
+import { defineMethodBlock } from "waygraph";
+import { CheckoutInfoPage } from "../../../../states/checkout.states.js";
 import { CheckoutInfoSel } from "./checkout-info.sel.js";
 
 /**
@@ -9,13 +9,14 @@ import { CheckoutInfoSel } from "./checkout-info.sel.js";
  *
  * Fills the last name field only - self-loop on CheckoutInfoPage.
  */
-export const FillLastNameBlock = defineMethodBlock<CheckoutInfoPage, CheckoutInfoPage>({
+export const FillLastNameBlock = defineMethodBlock({
   name: "fill-last-name",
   description: "Fills the last name field on the shipping info form.",
+  from: CheckoutInfoPage,
+  to: CheckoutInfoPage,
   instruction: {
     async act(page) {
       await page.locator(CheckoutInfoSel.lastName).fill("Lovelace");
     },
-    resolve: () => checkpoint("CheckoutInfoPage"),
   },
 });

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/methods/fill-postal-code.method.block.ts

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint } from "waygraph";
-import type { CheckoutInfoPage } from "../../../../states/checkout.states.js";
+import { defineMethodBlock } from "waygraph";
+import { CheckoutInfoPage } from "../../../../states/checkout.states.js";
 import { CheckoutInfoSel } from "./checkout-info.sel.js";
 
 /**
@@ -9,13 +9,14 @@ import { CheckoutInfoSel } from "./checkout-info.sel.js";
  *
  * Fills the postal code field only - self-loop on CheckoutInfoPage.
  */
-export const FillPostalCodeBlock = defineMethodBlock<CheckoutInfoPage, CheckoutInfoPage>({
+export const FillPostalCodeBlock = defineMethodBlock({
   name: "fill-postal-code",
   description: "Fills the postal code field on the shipping info form.",
+  from: CheckoutInfoPage,
+  to: CheckoutInfoPage,
   instruction: {
     async act(page) {
       await page.locator(CheckoutInfoSel.postalCode).fill("1000");
     },
-    resolve: () => checkpoint("CheckoutInfoPage"),
   },
 });

package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-one/methods/submit-checkout-info.method.block.ts

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint, Trait } from "waygraph";
-import type { CheckoutInfoPage, CheckoutOverviewPage } from "../../../../states/checkout.states.js";
+import { defineMethodBlock, Trait } from "waygraph";
+import { CheckoutInfoPage, CheckoutOverviewPage } from "../../../../states/checkout.states.js";
 import { CheckoutInfoSel } from "./checkout-info.sel.js";
 
 /**
@@ -11,14 +11,15 @@ import { CheckoutInfoSel } from "./checkout-info.sel.js";
  * fill-last-name / fill-postal-code (each its own Block). One Block, one
  * action: submit.
  */
-export const SubmitCheckoutInfoBlock = defineMethodBlock<CheckoutInfoPage, CheckoutOverviewPage>({
+export const SubmitCheckoutInfoBlock = defineMethodBlock({
   name: "submit-checkout-info",
   description: "Continues from the shipping info form to the order overview.",
+  from: CheckoutInfoPage,
+  to: CheckoutOverviewPage,
   instruction: {
     async act(page) {
       await page.locator(CheckoutInfoSel.continueBtn).click();
     },
-    resolve: () => checkpoint("CheckoutOverviewPage"),
     verify: [Trait.url({ pathname: "/checkout-step-two.html" })],
   },
 });

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

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint, Trait, narrate } from "waygraph";
-import type {
+import { defineMethodBlock, Trait, narrate } from "waygraph";
+import {
   CheckoutOverviewPage,
   OrderComplete,
 } from "../../../../states/checkout.states.js";
@@ -11,15 +11,13 @@ 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.",
+  from: CheckoutOverviewPage,
+  to: OrderComplete,
   instruction: {
     async act(page) {
       const finishButton = page.locator(CheckoutOverviewSel.finishBtn);
@@ -27,7 +25,6 @@ export const FinishOrderBlock = defineMethodBlock<
         finishButton.click(),
       );
     },
-    resolve: () => checkpoint("OrderComplete"),
     verify: [
       Trait.text(
         CheckoutOverviewSel.completeHeader,

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

@@ -1,5 +1,5 @@
 import { definePageBlock, Trait } 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";
@@ -18,11 +18,11 @@ 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),

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,14 +1,8 @@
-import {
-  defineEffectBlock,
-  checkpoint,
-  type Checkpoint,
-  type WaygraphInstanceOption,
-} 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";
 
-
 /**
  * Kind: Effect
  * Helper: defineEffectBlock
@@ -17,40 +11,38 @@ import { collectAddableItems, InventorySel } from "./inventory-items.js";
  * 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();
-          },
-        },
-      ],
-    },
-    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),
-      }));
+export const AddToCartBlock = defineEffectBlock({
+  name: "add-to-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();
     },
+    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();
+        },
+      },
+    ],
+  },
+  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/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 } 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,15 +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"),
   },
 });

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

@@ -1,5 +1,5 @@
-import { defineMethodBlock, checkpoint } 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,15 +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"),
   },
 });

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

@@ -1,5 +1,5 @@
 import { defineMethodBlock, checkpoint, Trait } from "waygraph";
-import type {
+import {
   LoginPage,
   LoginSubmitOutcome,
 } from "../../../states/checkout.states.js";
@@ -17,12 +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

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)],
   },
 });