waygraph 0.15.53 → 0.16.0

package/templates/quickstart/docs/CONVENTION.md

@@ -74,13 +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` > `package.json` `waygraph.baseUrl`
-> `playwright.config` `baseURL`.
+`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,13 +94,13 @@ defineMethodBlock<LoginPage, LoggedIn | LoginPage>({
 Optional routing for `runGraph`:
 
 ```ts
-branch(SubmitLoginActionBlock, {
+branch(SubmitLoginBlock, {
   LoggedIn: AddToCartBlock,
   LoginPage: null, // stop
 });
 ```
 
-Linear `defineFlow([start, …, end])` usually skips `branch()` (one happy path).
+A linear `map()` chain usually skips `branch()` (one happy path).
 
 ---
 
@@ -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

@@ -4,30 +4,27 @@
   "type": "module",
   "description": "Self-contained saucedemo quickstart (copied into a temp dir by `waygraph try demo`).",
   "scripts": {
+    "typecheck": "tsc --noEmit",
     "test": "waygraph test",
     "test:ui": "waygraph test ui",
-    "typecheck": "tsc --noEmit",
+    "flows": "waygraph list",
     "check": "waygraph check",
-    "auto": "waygraph auto",
-    "auto:cli": "waygraph auto --cli --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\"",
-    "traverse": "waygraph traverse --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --max-steps 40",
-    "traverse:parallel": "waygraph traverse --parallel 2 --session clone --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --max-steps 30",
-    "traverse:coverage": "waygraph traverse --min-edge-coverage 10% --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --max-steps 40",
     "graph": "waygraph graph",
     "graph:mermaid": "waygraph graph --mermaid",
-    "demo": "waygraph demo --blocks \"loginFlow then shopFlow({\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}) then viewerBlockedFlow({\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"locked_out_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}})\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\"",
-    "demo:auto-next": "waygraph demo --blocks \"loginFlow then shopFlow({\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}) then viewerBlockedFlow({\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"locked_out_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}})\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --auto-next",
-    "record": "waygraph run --blocks \"loginFlow then shopFlow({\\\"saucedemo.selectedItem\\\":{\\\"id\\\":\\\"sauce-labs-backpack\\\",\\\"name\\\":\\\"Sauce Labs Backpack\\\"}}) then viewerBlockedFlow({\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"locked_out_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}})\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --video --no-step",
-    "demo:bulk": "waygraph demo --blocks cartBulkFlow --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\"",
-    "demo:bulk:auto-next": "waygraph demo --blocks cartBulkFlow --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --auto-next --title \"Cart bulk demo\"",
-    "demo:bulk:video": "waygraph demo --blocks cartBulkFlow --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\" --auto-play-video --title \"Cart bulk demo\"",
-    "run:bulk": "waygraph run --blocks \"loginFlow then add-all-to-cart then remove-all-from-cart\" --data \"{\\\"saucedemo.credentials\\\":{\\\"username\\\":\\\"standard_user\\\",\\\"password\\\":\\\"secret_sauce\\\"}}\""
-  },
-  "waygraph": {
-    "baseUrl": "https://www.saucedemo.com"
+    "auto": "waygraph auto",
+    "auto:cli": "waygraph auto --cli",
+    "demo": "waygraph demo --blocks \"loginFlow then shopFlow\"",
+    "demo:auto-next": "waygraph demo --blocks \"loginFlow then shopFlow\" --auto-next",
+    "demo:checkout": "waygraph demo --blocks checkoutFlow --auto-next",
+    "demo:device": "waygraph demo --blocks deviceShowcaseFlow --auto-next",
+    "demo:bulk": "waygraph demo --blocks cartBulkFlow --auto-next",
+    "demo:api": "waygraph demo --blocks apiDemoFlow --auto-next",
+    "demo:video": "waygraph demo --blocks deviceShowcaseFlow --auto-play-video",
+    "record": "waygraph run --blocks \"loginFlow then shopFlow\" --video --no-step",
+    "traverse": "waygraph traverse --max-steps 40"
   },
   "dependencies": {
-    "waygraph": "^0.12.20"
+    "waygraph": "latest"
   },
   "devDependencies": {
     "@playwright/test": "^1.55.0",

package/templates/quickstart/src/blocks/SITE-MAP.md

@@ -8,11 +8,14 @@ src/blocks/
   SITE-MAP.md
   saucedemo-web/                      # URL /
     NAV.md
-    nav-login.block.ts                # Nav  defineNavBlock url:/
+    nav-login.block.ts                # Page  definePageBlock url:/
     methods/
-      submit-login.method.block.ts    # Method defineMethodBlock
+      fill-username.method.block.ts   # Method defineMethodBlock (self-loop on LoginPage)
+      fill-password.method.block.ts   # Method defineMethodBlock (self-loop on LoginPage)
+      submit-login.method.block.ts    # Method defineMethodBlock (click only; branches)
       submit-login-for-flow.ts        # helper (not a discoverable *.block.ts alone)
       submit-logout.method.block.ts   # Method defineMethodBlock
+      login.sel.ts                    # LoginSel (not a Block)
     inventory/                        # URL /inventory.html
       inventory.page.block.ts       # Page definePageBlock
       NAV.md
@@ -25,20 +28,27 @@ src/blocks/
         remove-from-cart.effect.block.ts
     inventory-item/                   # URL /inventory-item.html
       NAV.md
+      item-detail.sel.ts              # ItemDetailSel (not a Block)
       nav-continue-shopping.block.ts
       nav-back-to-products.block.ts
       nav-back-to-inventory.block.ts
     cart/                             # URL /cart.html
       NAV.md
+      cart.sel.ts                     # CartSel (not a Block)
       nav-cart.block.ts               # Nav click header cart
       nav-checkout-info.block.ts
     checkout-step-one/                # URL /checkout-step-one.html
       NAV.md
       methods/
-        submit-checkout-info.method.block.ts
+        checkout-info.sel.ts               # CheckoutInfoSel (not a Block)
+        fill-first-name.method.block.ts    # Method defineMethodBlock (self-loop on CheckoutInfoPage)
+        fill-last-name.method.block.ts     # Method defineMethodBlock (self-loop on CheckoutInfoPage)
+        fill-postal-code.method.block.ts   # Method defineMethodBlock (self-loop on CheckoutInfoPage)
+        submit-checkout-info.method.block.ts  # Method defineMethodBlock (click only)
     checkout-step-two/                # URL /checkout-step-two.html
       NAV.md
       methods/
+        checkout-overview.sel.ts      # CheckoutOverviewSel (not a Block)
         finish-order.method.block.ts
 ```
 

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,7 +1,5 @@
 import { defineNavClickBlock, Trait } from "waygraph";
-import type { StubCtx } from "waygraph";
-import type { CartPage } from "../../../states/checkout.states.js";
-import { InventorySel } from "../inventory/methods/inventory-items.js";
+import { CartPage } from "../../../states/checkout.states.js";
 import { CartSel } from "./cart.sel.js";
 
 /**
@@ -11,57 +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" })],
-  stubBefore: (ctx: StubCtx) => {
-    ctx.title("Open cart · 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", done: true },
-        { id: "cart-add", text: "Add to cart", done: true },
-        { id: "cart-open", text: "Open cart" },
-      ],
-      { title: "Device showcase", index: 5 },
-    );
-    ctx.zoom(1.4);
-    ctx.zoomOut(false);
-    ctx.highlights({
-      cart: {
-        selector: CartSel.cartLink,
-        label: "Cart",
-        detail: "tone: planned (purple) - open cart",
-        tone: "planned",
-        focus: true,
-        zoomOut: false,
-        followMouse: false,
-        weight: "bold",
-        gesture: "tap",
-      },
-    });
-  },
-  stubAfter: (ctx: StubCtx) => {
-    ctx.banner("Your cart · desktop");
-    ctx.clearDevice();
-    ctx.hideTodos();
-    ctx.zoomOut(true);
-    ctx.ring("items", {
-      selector: InventorySel.cartItem,
-      label: "Cart items",
-      detail: "tone: success (green) - product in cart",
-      tone: "success",
-      focus: true,
-      zoomOut: true,
-      followMouse: false,
-      duration: true,
-    });
-  },
 });

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

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