waygraph 0.15.53 → 0.16.0

package/templates/quickstart/src/stubs/device-showcase.ts

@@ -0,0 +1,191 @@
+import type { StubCtx } from "waygraph";
+import { LoginCreds } from "../states/checkout.mem-keys.js";
+import { LoginSel } from "../blocks/saucedemo-web/methods/login.sel.js";
+import { CartSel } from "../blocks/saucedemo-web/cart/cart.sel.js";
+import { InventorySel } from "../blocks/saucedemo-web/inventory/methods/inventory-items.js";
+
+const PRODUCT_ID = "sauce-labs-backpack";
+
+/** The six-step checklist of the device showcase; `done` is how many are ticked, `index` the highlighted one. */
+function checklist(done: number, index: number) {
+  const steps = [
+    "Enter username",
+    "Enter password",
+    "Tap Login",
+    "Find the product",
+    "Add to cart",
+    "Open cart",
+  ];
+  const ids = [
+    "login-user",
+    "login-pass",
+    "login-submit",
+    "cart-find",
+    "cart-add",
+    "cart-open",
+  ];
+  return [
+    ids.map((id, i) => ({
+      id,
+      text: steps[i]!,
+      ...(i < done ? { done: true } : {}),
+    })),
+    { title: "Device showcase", index },
+  ] as const;
+}
+
+/** Narration for the device showcase flow: phone login, tablet shelf, landscape cart. Each is a stub to chain on its Block. */
+export const deviceShowcase = {
+  username: {
+    before: (ctx: StubCtx) => {
+      ctx.title("Signing in · mobile");
+      ctx.device("mobile");
+      ctx.orientation("portrait");
+      ctx.todos("saucedemo", ...checklist(0, 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,
+      });
+    },
+    after: (ctx: StubCtx) => {
+      ctx.todos("saucedemo", ...checklist(1, 1));
+    },
+  },
+  password: {
+    before: (ctx: StubCtx) => {
+      ctx.ring("password", {
+        selector: LoginSel.password,
+        label: "Password",
+        detail: "tone: planned (purple)",
+        todo: "login-pass",
+        tone: "planned",
+        focus: true,
+        zoom: 1.4,
+      });
+    },
+    after: (ctx: StubCtx) => {
+      ctx.todos("saucedemo", ...checklist(2, 2));
+    },
+  },
+  submit: {
+    before: (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",
+        },
+      });
+    },
+    after: (ctx: StubCtx) => {
+      ctx.title("Inventory · landscape");
+      ctx.orientation("landscape");
+      ctx.todos("saucedemo", ...checklist(3, 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,
+      });
+    },
+  },
+  addToCart: {
+    before: (ctx: StubCtx) => {
+      ctx.title("Pick a product · tablet");
+      ctx.device("tablet");
+      ctx.orientation("portrait");
+      ctx.todos("saucedemo", ...checklist(3, 3));
+      ctx.zoom(1.35);
+      ctx.zoomOut(false);
+      ctx.highlights({
+        product: {
+          selector: InventorySel.title(PRODUCT_ID),
+          label: "Sauce Labs Backpack",
+          detail: "tone: info (blue)",
+          tone: "info",
+          focus: true,
+          zoom: 1.45,
+          zoomOut: false,
+        },
+        add: {
+          selector: InventorySel.addBtn(PRODUCT_ID),
+          label: "Add to cart",
+          detail: "tone: success (green)",
+          tone: "success",
+          focus: true,
+          zoom: 1.5,
+          zoomOut: false,
+          weight: "bold",
+        },
+      });
+    },
+    after: (ctx: StubCtx) => {
+      ctx.title("In the cart");
+      ctx.todos("saucedemo", ...checklist(4, 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,
+      });
+    },
+  },
+  openCart: {
+    before: (ctx: StubCtx) => {
+      ctx.title("Open cart · landscape");
+      ctx.orientation("landscape");
+      ctx.todos("saucedemo", ...checklist(5, 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,
+          weight: "bold",
+          gesture: "tap",
+        },
+      });
+    },
+    after: (ctx: StubCtx) => {
+      ctx.title("Your cart · desktop");
+      ctx.hideDevice();
+      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,
+        duration: true,
+      });
+    },
+  },
+};

package/templates/quickstart/src/stubs/login.ts

@@ -0,0 +1,37 @@
+import type { StubCtx } from "waygraph";
+import { LoginSel } from "../blocks/saucedemo-web/methods/login.sel.js";
+
+/** What a refused login looks like on screen: the title, a finished checklist and the error banner. */
+export function loginRefused(ctx: StubCtx): void {
+  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,
+  });
+}
+
+/** Rings the error banner when the login step itself throws. */
+export function loginFailed(ctx: StubCtx): void {
+  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/templates/quickstart/tests/chain-flow.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test";
-import { MemPage, checkpoint, chainFlow } from "waygraph";
+import { MemPage, checkpoint } from "waygraph";
+import { engine } from "../config/waygraph.config.js";
 import { loginFlow } from "../src/flows/login.flow.js";
 import { shopFlow } from "../src/flows/shop.flow.js";
 import { viewerBlockedFlow } from "../src/flows/viewer-blocked.flow.js";
@@ -7,12 +8,12 @@ import { LoginCreds, SelectedItem } from "../src/states/checkout.mem-keys.js";
 
 const BACKPACK = SelectedItem({ id: "sauce-labs-backpack", name: "Sauce Labs Backpack" });
 
-test("chainFlow: Episode 1 signs in + shops, Episode 2 locked-out user stays on LoginPage", async () => {
+test("nested flows: Episode 1 signs in + shops, Episode 2 locked-out user stays on LoginPage", async () => {
   const mem = new MemPage();
   mem.set(LoginCreds({ username: "standard_user", password: "secret_sauce" }));
   mem.set(BACKPACK);
 
-  const ep1 = chainFlow(loginFlow, shopFlow);
+  const ep1 = engine.map().start().flow(loginFlow).flow(shopFlow).end();
   const result1 = await ep1.run(mem);
   expect(result1).toEqual(checkpoint("OrderComplete"));
 
@@ -26,16 +27,12 @@ test("shopFlow alone: already-seeded SelectedItem completes checkout after login
   mem.set(LoginCreds({ username: "standard_user", password: "secret_sauce" }));
   mem.set(BACKPACK);
 
-  const result = await chainFlow(loginFlow, shopFlow).run(mem);
+  const result = await engine.map().start().flow(loginFlow).flow(shopFlow).end().run(mem);
   expect(result).toEqual(checkpoint("OrderComplete"));
 });
 
-test("chainFlow blocks() lists the flattened episode chain in order", () => {
-  expect(loginFlow.title).toBe("Sign In");
-  expect(shopFlow.title).toBe("Shop & Checkout");
-  expect(viewerBlockedFlow.title).toBe("Viewer: Blocked Login Attempt");
-
-  const blocks = chainFlow(loginFlow, shopFlow, viewerBlockedFlow).blocks();
+test("blocks() lists the flattened episode chain in order", () => {
+  const blocks = engine.map().start().flow(loginFlow).flow(shopFlow).flow(viewerBlockedFlow).end().blocks();
   expect(blocks.map((b) => b.name)).toEqual([
     "nav-login",
     "fill-username",

package/templates/scaffold/README.md

@@ -29,6 +29,7 @@ Change each `_nav.block.ts`'s `url` from the local `file://` path to a real one,
 `package.json`'s `"waygraph"` field - see the main docs' "Project config" section). That file also
 holds the test settings (`testDir`, `webServer`, `playwright: { workers, timeout, ... }`), so the
 project needs no `playwright.config.ts`. Keep each
-`src/map/` folder matching the URL it represents (`waygraph map` enforces this).
+`src/map/` folder matching the URL it represents (`waygraph map` enforces this). `(external)/hoppscotch` and
+`(external)/mailpit` keep their own `_states.ts` / `_keys.ts`, so `waygraph map pack <group>` can turn either into a package.
 
 Docs: https://deviate-dv8.github.io/waygraph/

package/templates/scaffold/STRUCTURE.md

@@ -24,9 +24,9 @@ Next.js route groups) and never appear in a URL or Checkpoint name.
 │   │   │   │       ├── assert-hello.method.block.ts   # + stubs + YAP slide
 │   │   │   │       └── assert-item-added.method.block.ts
 │   │   │   └── docs/                  # a second page, same shape
-│   │   ├── (external)/mailpit/        # a different origin (mail catcher)
-│   │   └── (external)/hoppscotch/     # API client, REST client, needs the hoppscotch extension
-│   ├── states/                        # Checkpoint types + mem keys
+│   │   ├── (external)/mailpit/        # a different origin (mail catcher); owns _states.ts + _keys.ts
+│   │   └── (external)/hoppscotch/     # API client, needs the hoppscotch extension; owns _states.ts + _keys.ts
+│   ├── states/                        # the app's Checkpoints + mem keys
 │   └── flows/                         # use cases, one file per scenario (see flows/README.md)
 │       ├── home/                      #   a page: hello, cart
 │       ├── (user-stories)/            #   flows that cross pages
@@ -45,9 +45,10 @@ page folder uses, so any agent or teammate knows where to look without asking.
 | Add an action on a page | one file in that page's `_methods/` |
 | Verify a state (button disabled, error shown) | `defineAssertBlock` + `Trait.disabled` / `Trait.enabled` |
 | Define a use case (success, failed, bad input) | one `*.flow.ts` in `src/flows/<page>/`, or `(user-stories)/` for one that crosses pages |
-| Give a flow fake data | `registerMemStub(key, fake)` + `memStub: true` in the flow's options (docs: docs/REFERENCE.md, "memStub") |
+| Give a flow fake data | `registerMemStub(key, fake)` in a `*.mem-stubs.ts` file + `memStub: true` in the flow's options; live sessions use the same fakes as defaults (docs: the reference, Engine features, "memStub") |
 | Explore by hand | `npm run auto` (headed) or `npm run auto:cli` |
 | Check your work | `npm run check`, `npm run graph`, `waygraph map` |
+| Share a tool's map with another project | `waygraph map pack hoppscotch`, then publish `.waygraph/packages/hoppscotch` |
 
 `waygraph map` fails if a folder path stops matching the real URL it claims to represent.
 Full convention: https://deviate-dv8.github.io/waygraph/consumer.html

package/templates/scaffold/config/waygraph.config.ts

@@ -26,6 +26,7 @@ const config = defineConfig(({ env }) => ({
   //   video: { viewport: "1920x1080" },
   // },
   // webServer: { command: "npm start", port: 3000 },   // started around test / run / demo / auto
+  // runLog: false,                          // each run is logged to .waygraph/runs/ (what Waygraph UI shows)
 
   // Another config for another environment: config/waygraph.staging.config.ts, chosen with `waygraph test --config staging`.
 

package/templates/scaffold/gitignore

@@ -3,3 +3,4 @@ dist/
 test-results/
 playwright-report/
 .waygraph-videos/
+.waygraph/

package/templates/scaffold/src/flows/README.md

@@ -32,8 +32,8 @@ src/flows/
 
 ## Writing one
 
-- Build it with `engine.map({ memStub })…end()`; nest another with `.flow(sub, { reset: true })`. No `defineFlow([...])`,
-  no nested `withTitle(withMemStub(...))`, and `.end()` takes nothing.
+- Build it with `engine.map({ memStub })…end()`; nest another with `.flow(sub, { reset: true })`;
+  `.end()` takes nothing.
 - The flow's name and narration are ctx stubs chained on the Block where they apply: `ctx.title("…")`, `ctx.ring(…)`.
 - A flow expected to fail (a locked-out user) says so in `map({ expectedFailure: "…" })`.
 - A step's speed in the demo is `{ pace }`: `.method(FillBlock, { pace: "blitz" })`.

package/templates/scaffold/src/map/(app_base)/docs/_nav.block.ts

@@ -1,11 +1,11 @@
 import { defineNavBlock, Trait } from "waygraph";
-import type { Docs } from "../../../states/demo.states.js";
+import { Docs } from "../../../states/demo.states.js";
 import { DocsSel, DOCS_URL } from "./_sel.js";
 
-export const NavDocsBlock = defineNavBlock<Docs>({
+export const NavDocsBlock = defineNavBlock({
   name: "nav-docs",
   description: "Opens the docs page (Waygraph Map convention demo).",
-  checkpoint: "Docs",
+  checkpoint: Docs,
   url: DOCS_URL,
   verify: [Trait.visible(DocsSel.heading)],
 });

package/templates/scaffold/src/map/(app_base)/docs/_page.block.ts

@@ -1,10 +1,10 @@
 import { definePageBlock, Trait } from "waygraph";
-import type { Docs } from "../../../states/demo.states.js";
+import { Docs } from "../../../states/demo.states.js";
 import { DocsSel } from "./_sel.js";
 
-export const DocsPageBlock = definePageBlock<Docs>({
+export const DocsPageBlock = definePageBlock({
   name: "page-docs",
   description: "Docs hub - Waygraph Map convention demo.",
-  checkpoint: "Docs",
+  checkpoint: Docs,
   verify: [Trait.visible(DocsSel.heading)],
 });

package/templates/scaffold/src/map/(app_base)/home/_methods/add-item.effect.block.ts

@@ -1,23 +1,23 @@
 import {
   defineEffectBlock,
-  checkpoint,
   type WaygraphInstanceOption,
 } from "waygraph";
-import type { CanAddItem, ItemInCart } from "../../../../states/demo.states.js";
+import { CanAddItem, ItemInCart } from "../../../../states/demo.states.js";
 import { SelectedItem } from "../../../../states/demo.mem-keys.js";
 import { DemoSel } from "../_sel.js";
 
 /** `waygraph auto` lists one "Add …" row per live Add button via `instanceOptions`. */
-export const AddItemBlock = defineEffectBlock<CanAddItem, ItemInCart>({
+export const AddItemBlock = defineEffectBlock({
   name: "add-item",
   description: "Adds the mem-selected catalog item to the cart.",
+  from: CanAddItem,
+  to: ItemInCart,
   requires: [SelectedItem.key],
   instruction: {
     async act(page, _input, mem) {
       const { id } = mem.get(SelectedItem.key);
       await page.locator(DemoSel.addBtn(id)).click();
     },
-    resolve: () => checkpoint("ItemInCart"),
     verify: [
       {
         name: "item-added",

package/templates/scaffold/src/map/(app_base)/home/_methods/assert-hello.method.block.ts

@@ -1,12 +1,12 @@
 import { defineAssertBlock, Trait } from "waygraph";
-import type { Home } from "../../../../states/demo.states.js";
+import { Home } from "../../../../states/demo.states.js";
 import { DemoSel } from "../_sel.js";
 
 /** Heading still shows after arrival; the slide is a YAP caption for the demo overlay. */
-export const AssertHelloBlock = defineAssertBlock<Home>({
+export const AssertHelloBlock = defineAssertBlock({
   name: "assert-hello",
   description: "Confirms the hello heading is still visible after arrival.",
-  checkpoint: "Home",
+  checkpoint: Home,
   waitForHeading: "Hello Waygraph",
   verify: [Trait.text(DemoSel.title, "Hello Waygraph"), Trait.visible(DemoSel.sub)],
   slides: [

package/templates/scaffold/src/map/(app_base)/home/_methods/assert-item-added.method.block.ts

@@ -1,5 +1,5 @@
 import { defineAssertBlock, Trait, type Trait as TraitType } from "waygraph";
-import type { ItemInCart } from "../../../../states/demo.states.js";
+import { ItemInCart } from "../../../../states/demo.states.js";
 import { SelectedItem } from "../../../../states/demo.mem-keys.js";
 import { DemoSel } from "../_sel.js";
 
@@ -13,9 +13,9 @@ const removeButtonVisibleForSelectedItem: TraitType = {
 };
 
 /** The mem-selected item's own Remove button appeared and the cart count reflects it. */
-export const AssertItemAddedBlock = defineAssertBlock<ItemInCart>({
+export const AssertItemAddedBlock = defineAssertBlock({
   name: "assert-item-added",
   description: "Confirms the mem-selected item's own Remove button appeared and the cart count reflects it.",
-  checkpoint: "ItemInCart",
+  checkpoint: ItemInCart,
   verify: [removeButtonVisibleForSelectedItem, Trait.text(DemoSel.cartCount, "1")],
 });

package/templates/scaffold/src/map/(app_base)/home/_methods/clear-cart.method.block.ts

@@ -1,15 +1,16 @@
-import { defineMethodBlock, checkpoint, Trait } from "waygraph";
-import type { ItemInCart, CartEmpty } from "../../../../states/demo.states.js";
+import { defineMethodBlock, Trait } from "waygraph";
+import { ItemInCart, CartEmpty } from "../../../../states/demo.states.js";
 import { DemoSel } from "../_sel.js";
 
-export const ClearCartBlock = defineMethodBlock<ItemInCart, CartEmpty>({
+export const ClearCartBlock = defineMethodBlock({
   name: "clear-cart",
   description: "Clears every item via the Clear cart control.",
+  from: ItemInCart,
+  to: CartEmpty,
   instruction: {
     async act(page) {
       await page.locator(DemoSel.clear).click();
     },
-    resolve: () => checkpoint("CartEmpty"),
     verify: [Trait.text(DemoSel.cartCount, "0")],
   },
 });

package/templates/scaffold/src/map/(app_base)/home/_methods/remove-item.effect.block.ts

@@ -1,22 +1,22 @@
 import {
   defineEffectBlock,
-  checkpoint,
   type WaygraphInstanceOption,
 } from "waygraph";
-import type { CartEmpty, ItemInCart } from "../../../../states/demo.states.js";
+import { CartEmpty, ItemInCart } from "../../../../states/demo.states.js";
 import { SelectedItem } from "../../../../states/demo.mem-keys.js";
 import { DemoSel } from "../_sel.js";
 
-export const RemoveItemBlock = defineEffectBlock<ItemInCart, CartEmpty>({
+export const RemoveItemBlock = defineEffectBlock({
   name: "remove-item",
   description: "Removes the mem-selected catalog item from the cart.",
+  from: ItemInCart,
+  to: CartEmpty,
   requires: [SelectedItem.key],
   instruction: {
     async act(page, _input, mem) {
       const { id } = mem.get(SelectedItem.key);
       await page.locator(DemoSel.removeBtn(id)).click();
     },
-    resolve: () => checkpoint("CartEmpty"),
     verify: [
       {
         name: "item-removed",

package/templates/scaffold/src/map/(app_base)/home/_nav.block.ts

@@ -1,11 +1,11 @@
 import { defineNavBlock, Trait } from "waygraph";
-import type { Home } from "../../../states/demo.states.js";
+import { Home } from "../../../states/demo.states.js";
 import { DemoSel, HOME_URL } from "./_sel.js";
 
-export const NavHomeBlock = defineNavBlock<Home>({
+export const NavHomeBlock = defineNavBlock({
   name: "nav-home",
   description: "Opens the offline catalog page (file://, no server).",
-  checkpoint: "Home",
+  checkpoint: Home,
   url: HOME_URL,
   verify: [Trait.text(DemoSel.title, "Hello Waygraph"), Trait.visible(DemoSel.catalog)],
 });

package/templates/scaffold/src/map/(app_base)/home/_page.block.ts

@@ -1,15 +1,15 @@
 import { definePageBlock, Trait } from "waygraph";
-import type { Home } from "../../../states/demo.states.js";
+import { Home } from "../../../states/demo.states.js";
 import { DemoSel } from "./_sel.js";
 import { AddItemBlock } from "./_methods/add-item.effect.block.js";
 import { RemoveItemBlock } from "./_methods/remove-item.effect.block.js";
 import { ClearCartBlock } from "./_methods/clear-cart.method.block.js";
 import { AssertHelloBlock } from "./_methods/assert-hello.method.block.js";
 
-export const HomePageBlock = definePageBlock<Home>({
+export const HomePageBlock = definePageBlock({
   name: "page-home",
   description: "Offline home hub - add/remove effects, clear, assert-hello.",
-  checkpoint: "Home",
+  checkpoint: Home,
   verify: [Trait.visible(DemoSel.catalog)],
   methods: {
     addItem: () => AddItemBlock,

package/templates/scaffold/src/map/(app_base)/home/nav-verification-link.block.ts

@@ -1,12 +1,12 @@
 import { defineNavBlock, Trait } from "waygraph";
-import type { HomeVerified } from "../../../states/demo.states.js";
-import { EmailLink } from "../../../states/demo.mem-keys.js";
+import { HomeVerified } from "../../../states/demo.states.js";
+import { EmailLink } from "../../(external)/mailpit/_keys.js";
 import { DemoSel } from "./_sel.js";
 
 /** Follows the link `extract-email-link` put in mem. No `requires`: an earlier Block in the chain produces it. */
-export const NavVerificationLinkBlock = defineNavBlock<HomeVerified>({
+export const NavVerificationLinkBlock = defineNavBlock({
   name: "nav-verification-link",
-  checkpoint: "HomeVerified",
+  checkpoint: HomeVerified,
   url: (mem) => mem.get(EmailLink.key).url,
   verify: [Trait.visible(DemoSel.verifiedBanner)],
 });

package/templates/scaffold/src/map/(external)/hoppscotch/_keys.ts

@@ -0,0 +1,21 @@
+import { key, keyGroup } from "waygraph";
+
+export const RequestMethod = key<string>("hoppscotch.requestMethod");
+export const RequestUrl = key<string>("hoppscotch.requestUrl");
+export const RequestHeaders = key<Record<string, string>>("hoppscotch.requestHeaders");
+export const RequestParams = key<Record<string, string>>("hoppscotch.requestParams");
+export const RequestBearerToken = key<string>("hoppscotch.requestBearerToken");
+
+/** Raw JSON text typed into the request body editor. */
+export const RequestBody = key<string>("hoppscotch.requestBody");
+export const ExpectedStatus = key<number>("hoppscotch.expectedStatus");
+
+/** Substring the response body must contain. */
+export const ExpectedResponseText = key<string>("hoppscotch.expectedResponseText");
+
+/** The raw response body, set by read-response-body. */
+export const ResponseBody = key<string>("hoppscotch.responseBody");
+
+/** Response headers (lower-cased names), set by read-response-headers. */
+export const ResponseHeaders = key<Record<string, string>>("hoppscotch.responseHeaders");
+export const ExpectedResponseHeader = keyGroup<{ name: string; value: string }>("hoppscotch.expectedResponseHeader");

package/templates/scaffold/src/map/(external)/hoppscotch/_methods/assert-response-body.method.block.ts

@@ -1,6 +1,6 @@
 import { defineAssertBlock, type Trait } from "waygraph";
-import type { HoppscotchRest } from "../../../../states/demo.states.js";
-import { ExpectedResponseText, ResponseBody } from "../../../../states/demo.mem-keys.js";
+import { HoppscotchRest } from "../_states.js";
+import { ExpectedResponseText, ResponseBody } from "../_keys.js";
 
 // Hoppscotch pretty-prints JSON, so compare with whitespace removed from both sides.
 const squash = (text: string): string => text.replace(/\s+/g, "");
@@ -12,10 +12,10 @@ const bodyContainsExpected: Trait = {
   },
 };
 
-export const AssertResponseBodyBlock = defineAssertBlock<HoppscotchRest>({
+export const AssertResponseBodyBlock = defineAssertBlock({
   name: "assert-response-body",
   description: "Confirms the response body read earlier contains the mem-supplied text (whitespace ignored).",
-  checkpoint: "HoppscotchRest",
+  checkpoint: HoppscotchRest,
   requires: [ExpectedResponseText],
   verify: [bodyContainsExpected],
 });

package/templates/scaffold/src/map/(external)/hoppscotch/_methods/assert-response-header.method.block.ts

@@ -1,6 +1,6 @@
 import { defineAssertBlock, type Trait } from "waygraph";
-import type { HoppscotchRest } from "../../../../states/demo.states.js";
-import { ExpectedResponseHeader, ResponseHeaders } from "../../../../states/demo.mem-keys.js";
+import { HoppscotchRest } from "../_states.js";
+import { ExpectedResponseHeader, ResponseHeaders } from "../_keys.js";
 
 const headerMatches: Trait = {
   name: "response-header-matches",
@@ -10,10 +10,10 @@ const headerMatches: Trait = {
   },
 };
 
-export const AssertResponseHeaderBlock = defineAssertBlock<HoppscotchRest>({
+export const AssertResponseHeaderBlock = defineAssertBlock({
   name: "assert-response-header",
   description: "Confirms a response header read earlier has the mem-supplied value.",
-  checkpoint: "HoppscotchRest",
+  checkpoint: HoppscotchRest,
   requires: [ExpectedResponseHeader.key],
   verify: [headerMatches],
 });

package/templates/scaffold/src/map/(external)/hoppscotch/_methods/assert-status.method.block.ts

@@ -1,6 +1,6 @@
 import { defineAssertBlock, type Trait } from "waygraph";
-import type { HoppscotchRest } from "../../../../states/demo.states.js";
-import { ExpectedStatus } from "../../../../states/demo.mem-keys.js";
+import { HoppscotchRest } from "../_states.js";
+import { ExpectedStatus } from "../_keys.js";
 import { HoppscotchSel } from "../_sel.js";
 
 const statusMatches: Trait = {
@@ -11,10 +11,10 @@ const statusMatches: Trait = {
   },
 };
 
-export const AssertStatusBlock = defineAssertBlock<HoppscotchRest>({
+export const AssertStatusBlock = defineAssertBlock({
   name: "assert-status",
   description: "Confirms the response status code equals the mem-supplied one.",
-  checkpoint: "HoppscotchRest",
+  checkpoint: HoppscotchRest,
   requires: [ExpectedStatus],
   verify: [statusMatches],
 });

package/templates/scaffold/src/map/(external)/hoppscotch/_methods/pick-extension-interceptor.method.block.ts

@@ -1,10 +1,12 @@
-import { defineMethodBlock, checkpoint } from "waygraph";
-import type { HoppscotchSettings } from "../../../../states/demo.states.js";
+import { defineMethodBlock } from "waygraph";
+import { HoppscotchSettings } from "../_states.js";
 import { HoppscotchSel } from "../_sel.js";
 
-export const PickExtensionInterceptorBlock = defineMethodBlock<HoppscotchSettings, HoppscotchSettings>({
+export const PickExtensionInterceptorBlock = defineMethodBlock({
   name: "pick-extension-interceptor",
   description: "Routes Hoppscotch's requests through the browser extension, which skips CORS.",
+  from: HoppscotchSettings,
+  to: HoppscotchSettings,
   instruction: {
     async act(page) {
       const radio = page.locator(HoppscotchSel.extensionInterceptor);
@@ -13,6 +15,5 @@ export const PickExtensionInterceptorBlock = defineMethodBlock<HoppscotchSetting
       });
       await radio.click();
     },
-    resolve: () => checkpoint("HoppscotchSettings"),
   },
 });