waygraph 0.15.54 → 0.16.0

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: {

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

@@ -1,5 +1,4 @@
 import { checkpoint, defineApiBlock } from "waygraph";
-import type { Checkpoint, StubCtx } from "waygraph";
 import { engine } from "../../config/waygraph.config.js";
 import { loginFlow } from "./login.flow.js";
 
@@ -15,24 +14,27 @@ 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 CheckBackendHealth = defineApiBlock<any, BackendHealthy | BackendDown>({
+const CheckBackendHealth = defineApiBlock({
   name: "check-backend-health",
+  to: [BackendHealthy, 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");
-  },
+  resolve: (result) => (result.ok ? BackendHealthy : BackendDown),
 });
 
 export const apiDemoEpisode = engine
   .map()
   .start()
-  .method(CheckBackendHealth)
+  .method(
+    CheckBackendHealth.stubBefore((ctx) => {
+      ctx.title("Checking backend health · real HTTP request, no browser");
+    }),
+  )
   .end();
 
 export const apiDemoFlow = engine

package/examples/saucedemo/src/states/checkout.states.ts

@@ -1,19 +1,29 @@
-import type { Checkpoint } from "waygraph";
+import { checkpoint } from "waygraph";
 
 // One Checkpoint per real state the target app can be in - kept together so the
 // whole checkout flow's state space reads in one place, the same reason a
 // backend keeps its models together instead of scattered across handlers.
 // `Start` is waygraph's own exported type, not redeclared here.
 
-export type LoginPage = Checkpoint<"LoginPage">;
-export type LoggedIn = Checkpoint<"LoggedIn">;
+export const LoginPage = checkpoint("LoginPage");
+export type LoginPage = typeof LoginPage;
+export const LoggedIn = checkpoint("LoggedIn");
+export type LoggedIn = typeof LoggedIn;
 /** submit-login: inventory on success, login form + error banner on auth failure. */
-export type LoginSubmitOutcome = LoggedIn | LoginPage;
-export type ItemInCart = Checkpoint<"ItemInCart">;
+export const LoginSubmitOutcome = [LoggedIn, LoginPage] as const;
+export type LoginSubmitOutcome = (typeof LoginSubmitOutcome)[number];
+export const ItemInCart = checkpoint("ItemInCart");
+export type ItemInCart = typeof ItemInCart;
 /** remove-from-cart: still has items → ItemInCart; empty cart → LoggedIn. */
-export type RemoveFromCartOutcome = ItemInCart | LoggedIn;
-export type CartPage = Checkpoint<"CartPage">;
-export type CheckoutInfoPage = Checkpoint<"CheckoutInfoPage">;
-export type CheckoutOverviewPage = Checkpoint<"CheckoutOverviewPage">;
-export type ItemDetailPage = Checkpoint<"ItemDetailPage">;
-export type OrderComplete = Checkpoint<"OrderComplete">;
+export const RemoveFromCartOutcome = [ItemInCart, LoggedIn] as const;
+export type RemoveFromCartOutcome = (typeof RemoveFromCartOutcome)[number];
+export const CartPage = checkpoint("CartPage");
+export type CartPage = typeof CartPage;
+export const CheckoutInfoPage = checkpoint("CheckoutInfoPage");
+export type CheckoutInfoPage = typeof CheckoutInfoPage;
+export const CheckoutOverviewPage = checkpoint("CheckoutOverviewPage");
+export type CheckoutOverviewPage = typeof CheckoutOverviewPage;
+export const ItemDetailPage = checkpoint("ItemDetailPage");
+export type ItemDetailPage = typeof ItemDetailPage;
+export const OrderComplete = checkpoint("OrderComplete");
+export type OrderComplete = typeof OrderComplete;

package/examples/saucedemo/src/stubs/device-showcase.ts

@@ -40,7 +40,7 @@ export const deviceShowcase = {
     before: (ctx: StubCtx) => {
       ctx.title("Signing in · mobile");
       ctx.device("mobile");
-      ctx.portrait();
+      ctx.orientation("portrait");
       ctx.todos("saucedemo", ...checklist(0, 0));
       ctx.zoom(1.35);
       const fromMem = ctx.mem?.get(LoginCreds.key)?.username;
@@ -93,8 +93,8 @@ export const deviceShowcase = {
       });
     },
     after: (ctx: StubCtx) => {
-      ctx.banner("Inventory · landscape");
-      ctx.landscape();
+      ctx.title("Inventory · landscape");
+      ctx.orientation("landscape");
       ctx.todos("saucedemo", ...checklist(3, 3));
       ctx.ring("shelf", {
         selector: ".inventory_list",
@@ -111,7 +111,7 @@ export const deviceShowcase = {
     before: (ctx: StubCtx) => {
       ctx.title("Pick a product · tablet");
       ctx.device("tablet");
-      ctx.portrait();
+      ctx.orientation("portrait");
       ctx.todos("saucedemo", ...checklist(3, 3));
       ctx.zoom(1.35);
       ctx.zoomOut(false);
@@ -138,7 +138,7 @@ export const deviceShowcase = {
       });
     },
     after: (ctx: StubCtx) => {
-      ctx.banner("In the cart");
+      ctx.title("In the cart");
       ctx.todos("saucedemo", ...checklist(4, 4));
       ctx.zoomOut(false);
       ctx.ring("badge", {
@@ -155,7 +155,7 @@ export const deviceShowcase = {
   openCart: {
     before: (ctx: StubCtx) => {
       ctx.title("Open cart · landscape");
-      ctx.landscape();
+      ctx.orientation("landscape");
       ctx.todos("saucedemo", ...checklist(5, 5));
       ctx.zoom(1.4);
       ctx.zoomOut(false);
@@ -167,15 +167,14 @@ export const deviceShowcase = {
           tone: "planned",
           focus: true,
           zoomOut: false,
-          followMouse: false,
           weight: "bold",
           gesture: "tap",
         },
       });
     },
     after: (ctx: StubCtx) => {
-      ctx.banner("Your cart · desktop");
-      ctx.clearDevice();
+      ctx.title("Your cart · desktop");
+      ctx.hideDevice();
       ctx.hideTodos();
       ctx.zoomOut(true);
       ctx.ring("items", {
@@ -185,7 +184,6 @@ export const deviceShowcase = {
         tone: "success",
         focus: true,
         zoomOut: true,
-        followMouse: false,
         duration: true,
       });
     },

package/examples/saucedemo/tests/auto-graph.spec.ts

@@ -5,7 +5,7 @@ import { dirname, join } from "node:path";
 
 const projectDir = join(dirname(fileURLToPath(import.meta.url)), "..");
 
-test("waygraph auto discovers the decomposed saucedemo graph, skipping only the FFCompose auth step", async () => {
+test("waygraph auto discovers the decomposed saucedemo graph, with no Block skipped", async () => {
   const graph = await discoverGraph(projectDir);
 
   expect(graph.nodes.map((n) => n.checkpoint).sort()).toEqual(
@@ -22,9 +22,7 @@ test("waygraph auto discovers the decomposed saucedemo graph, skipping only the
   );
   // 24 vs the earlier 15: checkout-info split into fill-first-name/
   // fill-last-name/fill-postal-code (+2 net) plus the atomic login Blocks
-  // (fill-username/fill-password/submit-login's 2 branches) that static
-  // discovery still sees even though checkoutFlow itself now drives them
-  // through the ff-owner-auth composition below.
+  // (fill-username/fill-password/submit-login's 2 branches).
   expect(graph.edges.length).toBe(24);
   const removeEdges = graph.edges.filter((e) => e.block === "remove-from-cart");
   expect(removeEdges).toEqual(
@@ -37,14 +35,8 @@ test("waygraph auto discovers the decomposed saucedemo graph, skipping only the
   const loginFail = graph.edges.find((e) => e.block === "submit-login" && e.to === "LoginPage");
   expect(loginFail).toMatchObject({ from: "LoginPage", to: "LoginPage", kind: "action" });
 
-  // ff-owner-auth (fastForwardComposeBlock) collapses nav-login + fill-username
-  // + fill-password + submit-login into one opaque demo/run step - discoverGraph
-  // only understands plain defineMethodBlock/defineEffectBlock<In, Out> generic
-  // calls, so this one Block is expected to be skipped by static discovery even
-  // though it's a real, used step (see src/blocks/saucedemo-web/ff-owner-auth.block.ts).
-  expect(graph.skipped).toEqual([
-    expect.objectContaining({ block: "ff-owner-auth" }),
-  ]);
+  // Every Block has a route, so nothing is skipped.
+  expect(graph.skipped).toEqual([]);
 
   const logout = graph.edges.find((e) => e.block === "submit-logout");
   expect(logout).toMatchObject({ from: "LoggedIn", to: "LoginPage", kind: "action" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.15.54",
+  "version": "0.16.0",
   "type": "module",
   "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
   "license": "MIT",
@@ -12,7 +12,7 @@
       "default": "./dist/index.js"
     },
     "./runner": {
-      "default": "./dist/runner/index.js"
+      "default": "./dist/runner/runner.js"
     }
   },
   "bin": {
@@ -38,7 +38,9 @@
     "!**/playwright-report",
     "!**/playwright-report/**",
     "!**/.waygraph-chain-*.mjs",
-    "!**/*.log"
+    "!**/*.log",
+    "!examples/**/.waygraph",
+    "!examples/**/.waygraph/**"
   ],
   "repository": {
     "type": "git",
@@ -46,7 +48,7 @@
   },
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
-    "build": "npm run clean && tsc -p tsconfig.build.json && node scripts/copy-runner.mjs && node scripts/copy-ui-css.mjs",
+    "build": "npm run clean && tsc -p tsconfig.build.json && node scripts/copy-ui-css.mjs",
     "typecheck": "node bin/waygraph typecheck .",
     "test": "npm run check:structure && npm run knip && npm run test:unit && playwright test",
     "test:ui": "playwright test --ui",
@@ -58,7 +60,7 @@
     "docs:dev": "npm run docs:api && vitepress dev docs",
     "docs:build": "npm run docs:api && vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "docs:api": "typedoc && node scripts/gen-deprecated.mjs",
+    "docs:api": "typedoc && node scripts/gen-deprecated.mjs && node --import tsx scripts/gen-env.mjs",
     "knip": "knip",
     "sync:quickstart": "node scripts/sync-quickstart.mjs"
   },
@@ -67,8 +69,10 @@
   },
   "dependencies": {
     "open-props": "^1.7.23",
+    "ts-morph": "^28.0.0",
     "tsx": "^4.0.0",
-    "urlpattern-polyfill": "^10.1.0"
+    "urlpattern-polyfill": "^10.1.0",
+    "yaml": "^2.9.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.63.0",

package/templates/agents/waygraph-planner.agent.md

@@ -50,9 +50,9 @@ When there is no app codebase to read - a production target, or a deliberately
 codebase-blind engagement - discover the route/interaction structure live instead, using the
 `waygraph auto` session tools rather than skipping planning:
 
-1. `waygraph auto --cli --detach [--base-url <url>]` against a throwaway project dir (or the
+1. `waygraph browser start --headless [--base-url <url>] --goto /` against a throwaway project dir (or the
    target project once a `src/map/` or `src/blocks/` tree exists) - starts a driveable session, prints
-   `{sessionId, socketPath}`.
+   `{sessionId, socketPath, headless}`.
 2. `waygraph auto status <sessionId>` to read the current menu (what Blocks/edges are already
    discoverable) and `waygraph auto dom <sessionId>` (default `aria` mode) to see the live
    page's actual interactive elements by role/name - this is how you find real routes and

package/templates/quickstart/docs/CONVENTION.md

@@ -74,12 +74,12 @@ edges (including cycles via logout / continue-shopping / back-to-products).
 Prefer flags (or npm scripts) over a pile of `WAYGRAPH_*` env vars:
 
 ```bash
-npm run demo                 # waygraph demo shopFlow  (STEP+headed; BASE_URL from package.json / playwright)
-npm run demo:autoplay        # --autoplay --title "Shop demo"
+npm run demo                 # waygraph demo --blocks "loginFlow then shopFlow" (headed; baseUrl from config/waygraph.config.ts)
+npm run demo:auto-next       # the same, advancing on its own
 waygraph demo shopFlow --base-url https://www.saucedemo.com --title "Shop"
-waygraph chain "loginFlow" --step --no-autoplay
+waygraph demo loginFlow --no-auto-next
 ```
 
-Flags beat env: `--step` / `--no-step`, `--autoplay` / `--no-autoplay`,
+Flags beat env: `--auto-next` / `--no-auto-next`,
 `--base-url <url>`, `--title <text>`. Default BASE_URL resolution order for
 `demo`: `--base-url` > `WAYGRAPH_BASE_URL` > `baseUrl` in `config/waygraph.config.ts`.

package/templates/quickstart/docs/HELPERS.md

@@ -11,9 +11,8 @@ Runtime is always a `Block`. Helpers are TypeScript salt + clear intent.
 | `defineMethodBlock` | One-shot non-nav app step | `*.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`.
 
 ---
 
@@ -30,7 +29,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,
@@ -73,8 +72,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, _in, mem) { /* fill + click */ },
     async observe(page) {
@@ -93,7 +94,7 @@ defineMethodBlock<LoginPage, LoggedIn | LoginPage>({
 Optional routing for `runGraph`:
 
 ```ts
-branch(SubmitLoginActionBlock, {
+branch(SubmitLoginBlock, {
   LoggedIn: AddToCartBlock,
   LoginPage: null, // stop
 });
@@ -112,8 +113,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) {
@@ -140,9 +142,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/templates/quickstart/package.json

@@ -23,9 +23,6 @@
     "record": "waygraph run --blocks \"loginFlow then shopFlow\" --video --no-step",
     "traverse": "waygraph traverse --max-steps 40"
   },
-  "waygraph": {
-    "baseUrl": "https://www.saucedemo.com"
-  },
   "dependencies": {
     "waygraph": "latest"
   },

package/templates/quickstart/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/templates/quickstart/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/templates/quickstart/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/templates/quickstart/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/templates/quickstart/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/templates/quickstart/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/templates/quickstart/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/templates/quickstart/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/templates/quickstart/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/templates/quickstart/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/templates/quickstart/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);