create-waygraph 0.0.3 → 0.0.5

package/README.md

@@ -5,48 +5,50 @@ one fixed shape, no prompts, no template picker.
 
 This is the scaffold command linked from
 [waygraph GitHub Pages](https://deviate-dv8.github.io/waygraph/) (`npx create-waygraph`).
-Same template as `npx waygraph init` (waygraph >= 0.7.5). For a live saucedemo walkthrough
+Same template as `npx waygraph init` (waygraph >= 0.12.6). For a live saucedemo walkthrough
 without creating a folder in your cwd, use `npx waygraph try demo` instead.
 
+**Scaffold tree (authoritative):** https://deviate-dv8.github.io/waygraph/scaffold.html
+
 ```bash
 npx create-waygraph my-project
 cd my-project
 npm install
 npx playwright install chromium
 npm test
+npm run demo
 ```
 
-Generates:
+Generates (0.12+):
 
-```
+```text
 my-project/
-  package.json          waygraph + @playwright/test
-  tsconfig.json
-  playwright.config.ts
-  .gitignore
+  package.json
+  STRUCTURE.md
   src/
-    blocks/load-page.block.ts   one real Block (act/resolve/verify)
-    flows/example.flow.ts       Engine.defineFlow([start, LoadPageBlock, end])
-  tests/
-    example.spec.ts             runs the flow, asserts the terminal Checkpoint
+    blocks/
+      SITE-MAP.md
+      demo-web/                    # synthetic "/" (data: URL)
+        NAV.md
+        nav-home.block.ts
+        methods/
+          assert-hello.method.block.ts
+    states/demo.states.ts
+    flows/example.flow.ts          # withTitle + withHighlightFixtures
+  tests/example.spec.ts
 ```
 
-`npm test` goes green immediately, offline - the example Block navigates to a self-contained
-`data:` URL, not a live site, so scaffolding a project never depends on network access.
-
-Ships as its own package rather than a `waygraph init` subcommand, so consuming `waygraph`
-at runtime never pulls in scaffolding code - `npx create-waygraph` resolves and runs without
-adding anything to your own `node_modules`.
+`npm test` goes green offline - nav uses a `data:` URL. Stubs / fixtures / one YAP
+slide are already wired so `npm run demo` shows narration.
 
 ## Consumer layout (App Router projects)
 
-The minimal scaffold above is intentionally tiny (one block, no route tree). When the target
-app has real Next.js routes, **block folders mirror `app/` page routes**:
+When the target app has real Next.js routes, **block folders mirror `app/` page routes**:
 
 - URL `/` -> nav at namespace root (`zsign-web/` or `pia-web/`), not `landing/` or `root/`
 - Route groups `(auth)` / `(app)` vanish from folder names
 - Folders with no `page.tsx` are grouping only - no NAV.md, no nav block
 - Sidebar / layout chrome -> `shared/chrome/`, not a parallel `shell/nav/*` family
 
-Full contract: `WAYGRAPH-CONSUMER-CONVENTION.md` in your mesh
-(`.sm/seats/_shared/` on zsign/pia). Engine API: package `waygraph` README + WAYGRAPH-HANDOUT.
+Full contract: waygraph [Consumer layout](https://deviate-dv8.github.io/waygraph/consumer.html)
+and mesh handout `WAYGRAPH-CONSUMER-CONVENTION.md`.

package/bin/create-waygraph.js

@@ -39,7 +39,7 @@ console.log("  npm test");
 console.log("  npx waygraph list");
 console.log("  npx waygraph check");
 console.log("  npx waygraph auto              # headed panel");
-console.log("  npx waygraph demo src/flows/example.flow.ts");
+console.log("  npx waygraph agent-dive --loop claude");
 console.log("");
-console.log("(Same offline scaffold as: npx waygraph init <name> - waygraph >= 0.10.6.)");
+console.log("(Same offline scaffold as: npx waygraph init <name> - waygraph >= 0.12.7.)");
 console.log("(Live saucedemo: npx waygraph try auto | try demo - temp dir, not a scaffold.)");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-waygraph",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Scaffold a new waygraph project - package.json, tsconfig, playwright.config, and one working example flow.",
   "license": "MIT",
   "type": "module",

package/templates/README.md

@@ -0,0 +1,28 @@
+# __PROJECT_NAME__
+
+Offline waygraph scaffold - Nav, Page hub, Method, Effect (`instanceOptions` for
+`waygraph auto`), stubs/fixtures/YAP, mem keys.
+
+## Layout
+
+See [STRUCTURE.md](./STRUCTURE.md). Docs:
+https://deviate-dv8.github.io/waygraph/scaffold.html
+
+## Commands
+
+```bash
+npm install
+npx playwright install chromium
+npm test
+npm run list && npm run check && npm run graph
+npm run demo                 # exampleFlow (hello + YAP)
+npm run demo:shop            # Effect path (needs --data selectedItem)
+npm run auto                 # headed explore - pick Add Alpha / …
+npm run auto:cli
+npx waygraph agent-dive --loop claude   # coding-agent defs (optional)
+```
+
+Point `package.json` `waygraph.baseUrl` at your real app when you leave the
+fixture (and drop `scripts/with-fixture.mjs` wrappers). Keep route folders =
+app URLs (consumer layout).
+Offline fixture is HTTP `http://127.0.0.1:4177/home.html` (Flatpak-safe).

package/templates/STRUCTURE.md

@@ -0,0 +1,61 @@
+# Offline scaffold layout (`waygraph init` / `create-waygraph`)
+
+Shipped under `templates/scaffold/` in the **waygraph** package.
+Docs: [docs/scaffold.html](../../docs/scaffold.html)
+
+```text
+.
+├── package.json
+├── STRUCTURE.md              # this file
+├── README.md
+├── src/
+│   ├── blocks/
+│   │   ├── SITE-MAP.md
+│   │   └── demo-web/         # synthetic "/" (HTTP fixture :4177)
+│   │       ├── NAV.md
+│   │       ├── home.html     # offline fixture (catalog + cart)
+│   │       ├── demo-sel.ts
+│   │       ├── nav-home.block.ts          # Nav
+│   │       ├── home.page.block.ts         # Page hub (methods registry)
+│   │       └── methods/
+│   │           ├── assert-hello.method.block.ts   # Method + stubs + YAP
+│   │           ├── add-item.effect.block.ts       # Effect + instanceOptions (auto)
+│   │           ├── remove-item.effect.block.ts    # Effect + instanceOptions
+│   │           └── clear-cart.method.block.ts     # Method
+│   ├── states/
+│   │   ├── demo.states.ts
+│   │   └── demo.mem-keys.ts  # SelectedItem for Effect / auto
+│   └── flows/
+│       ├── example.flow.ts   # nav + assert (smoke)
+│       └── shop.flow.ts      # nav + add-item + clear (Effect path)
+├── scripts/
+│   ├── fixture-server.mjs    # serves home.html on :4177
+│   └── with-fixture.mjs      # start server + run waygraph auto/demo/run
+└── tests/
+    └── example.spec.ts
+```
+
+## Features covered
+
+| Feature | Where |
+|---------|--------|
+| Nav (`defineNavBlock`) | `nav-home.block.ts` |
+| Page hub (`definePageBlock` + `methods`) | `home.page.block.ts` |
+| Method (`defineMethodBlock`) | `assert-hello`, `clear-cart` |
+| Effect + `instanceOptions` (auto menus) | `add-item`, `remove-item` |
+| Mem (`keyGroup`) | `demo.mem-keys.ts` |
+| `stubBefore` / `stubAfter` / `stubOnError` | all instruction blocks |
+| Flow fixtures + title | `example.flow.ts`, `shop.flow.ts` |
+| YAP slides | `assert-hello` |
+| `withSessionReset` | `shop.flow.ts` |
+| `waygraph auto` / `auto --cli` | `npm run auto` |
+| `demo` / `run` / `list` / `check` / `graph` | `package.json` scripts |
+
+## Auto
+
+```bash
+npm run auto        # headed explore - pick Add Alpha / Add Beta from live DOM
+npm run auto:cli    # same menus in the terminal
+```
+
+After `nav-home`, Effect blocks expose one menu row per visible Add/Remove button.

package/templates/package.json

@@ -6,19 +6,25 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "playwright test",
+    "fixture": "node scripts/fixture-server.mjs",
     "list": "waygraph list",
     "check": "waygraph check",
-    "auto": "waygraph auto",
-    "auto:cli": "waygraph auto --cli",
-    "demo": "waygraph demo src/flows/example.flow.ts",
-    "run": "waygraph run src/flows/example.flow.ts",
-    "graph": "waygraph graph"
+    "graph": "waygraph graph",
+    "graph:mermaid": "waygraph graph --mermaid",
+    "auto": "node scripts/with-fixture.mjs waygraph auto",
+    "auto:cli": "node scripts/with-fixture.mjs waygraph auto --cli",
+    "demo": "node scripts/with-fixture.mjs waygraph demo --blocks exampleFlow",
+    "demo:auto-next": "node scripts/with-fixture.mjs waygraph demo --blocks exampleFlow --auto-next --title \"Scaffold hello\"",
+    "demo:shop": "node scripts/with-fixture.mjs waygraph demo --blocks shopFlow --data \"{\\\"demo.selectedItem\\\":{\\\"id\\\":\\\"alpha\\\",\\\"name\\\":\\\"Alpha\\\"}}\" --title \"Scaffold shop\"",
+    "demo:shop:auto-next": "node scripts/with-fixture.mjs waygraph demo --blocks shopFlow --auto-next --data \"{\\\"demo.selectedItem\\\":{\\\"id\\\":\\\"alpha\\\",\\\"name\\\":\\\"Alpha\\\"}}\"",
+    "run": "node scripts/with-fixture.mjs waygraph run --blocks exampleFlow",
+    "run:shop": "node scripts/with-fixture.mjs waygraph run --blocks shopFlow --data \"{\\\"demo.selectedItem\\\":{\\\"id\\\":\\\"alpha\\\",\\\"name\\\":\\\"Alpha\\\"}}\""
   },
   "waygraph": {
-    "baseUrl": "https://example.com"
+    "baseUrl": "http://127.0.0.1:4177"
   },
   "dependencies": {
-    "waygraph": "^0.10.6"
+    "waygraph": "^0.12.7"
   },
   "devDependencies": {
     "@playwright/test": "^1.55.0",

package/templates/playwright.config.ts

@@ -1,12 +1,27 @@
 import { defineConfig } from "@playwright/test";
 
+const FIXTURE_PORT = process.env.WAYGRAPH_FIXTURE_PORT || "4177";
+const FIXTURE_HOST = process.env.WAYGRAPH_FIXTURE_HOST || "127.0.0.1";
+const FIXTURE_ORIGIN = `http://${FIXTURE_HOST}:${FIXTURE_PORT}`;
+
 export default defineConfig({
   testDir: "./tests",
   fullyParallel: true,
   reporter: "list",
   use: {
+    baseURL: FIXTURE_ORIGIN,
     launchOptions: {
       executablePath: process.env.CHROME_PATH || process.env.CHROMIUM_PATH,
     },
   },
+  webServer: {
+    command: "node scripts/fixture-server.mjs",
+    url: `${FIXTURE_ORIGIN}/home.html`,
+    reuseExistingServer: !process.env.CI,
+    env: {
+      WAYGRAPH_FIXTURE_PORT: FIXTURE_PORT,
+      WAYGRAPH_FIXTURE_HOST: FIXTURE_HOST,
+      WAYGRAPH_FIXTURE_QUIET: "1",
+    },
+  },
 });

package/templates/scripts/fixture-server.mjs

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+/**
+ * Tiny static server for the offline scaffold fixture (home.html).
+ * Flatpak Chromium cannot open file:// under /tmp — HTTP localhost works.
+ */
+import { createServer } from "node:http";
+import { readFileSync, existsSync } from "node:fs";
+import { join, dirname, extname, normalize } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), "../src/blocks/demo-web");
+const PORT = Number(process.env.WAYGRAPH_FIXTURE_PORT || 4177);
+const HOST = process.env.WAYGRAPH_FIXTURE_HOST || "127.0.0.1";
+
+const TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+};
+
+const server = createServer((req, res) => {
+  const raw = (req.url || "/").split("?")[0] || "/";
+  const rel = raw === "/" ? "home.html" : raw.replace(/^\//, "");
+  const full = normalize(join(ROOT, rel));
+  if (!full.startsWith(ROOT) || !existsSync(full)) {
+    res.writeHead(404, { "content-type": "text/plain" });
+    res.end("not found");
+    return;
+  }
+  const type = TYPES[extname(full)] || "application/octet-stream";
+  res.writeHead(200, { "content-type": type });
+  res.end(readFileSync(full));
+});
+
+server.listen(PORT, HOST, () => {
+  if (process.env.WAYGRAPH_FIXTURE_QUIET !== "1") {
+    console.error(`waygraph fixture: http://${HOST}:${PORT}/home.html`);
+  }
+});

package/templates/scripts/with-fixture.mjs

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+/**
+ * Start fixture-server, run a child command, tear down on exit.
+ * Usage: node scripts/with-fixture.mjs [--] <cmd> [args...]
+ */
+import { spawn } from "node:child_process";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const PORT = process.env.WAYGRAPH_FIXTURE_PORT || "4177";
+const HOST = process.env.WAYGRAPH_FIXTURE_HOST || "127.0.0.1";
+
+const argv = process.argv.slice(2).filter((a) => a !== "--");
+if (argv.length === 0) {
+  console.error("usage: node scripts/with-fixture.mjs <cmd> [args...]");
+  process.exit(1);
+}
+
+const env = {
+  ...process.env,
+  WAYGRAPH_FIXTURE_PORT: PORT,
+  WAYGRAPH_FIXTURE_HOST: HOST,
+  WAYGRAPH_FIXTURE_QUIET: "1",
+  WAYGRAPH_BASE_URL: process.env.WAYGRAPH_BASE_URL || `http://${HOST}:${PORT}`,
+};
+
+const server = spawn(process.execPath, [join(HERE, "fixture-server.mjs")], {
+  env,
+  stdio: ["ignore", "ignore", "inherit"],
+});
+
+function killServer() {
+  try {
+    server.kill("SIGTERM");
+  } catch {
+    /* ignore */
+  }
+}
+
+async function waitReady(ms = 5000) {
+  const url = `http://${HOST}:${PORT}/home.html`;
+  const start = Date.now();
+  while (Date.now() - start < ms) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) return;
+    } catch {
+      /* retry */
+    }
+    await new Promise((r) => setTimeout(r, 50));
+  }
+  throw new Error(`fixture server not ready at ${url}`);
+}
+
+let code = 1;
+try {
+  await waitReady();
+  const child = spawn(argv[0], argv.slice(1), { env, stdio: "inherit", shell: false });
+  code = await new Promise((resolve) => {
+    child.on("exit", (c, signal) => resolve(signal ? 1 : (c ?? 1)));
+  });
+} catch (e) {
+  console.error(e instanceof Error ? e.message : String(e));
+  code = 1;
+} finally {
+  killServer();
+}
+process.exit(code);

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

@@ -0,0 +1,12 @@
+# Site map (scaffold)
+
+Offline catalog uses one synthetic namespace (`demo-web/`) and a local
+`home.html` fixture so `npm test` / `waygraph auto` need no network.
+
+| Folder | URL | Notes |
+|--------|-----|-------|
+| `demo-web/` | `/` (synthetic) | Nav + Page hub + methods/effects |
+| `demo-web/methods/` | same URL | assert, add/remove Effects, clear |
+
+When you wire a real app, rename `demo-web/` to your FE origin namespace and
+add one folder per real `page.tsx` route. See **Consumer layout** docs.

package/templates/src/blocks/demo-web/NAV.md

@@ -0,0 +1,29 @@
+# demo-web / (synthetic home)
+
+**URL:** `http://127.0.0.1:4177/home.html` (offline catalog via `scripts/fixture-server.mjs` - replace with your real `/`)
+
+## Nav-to
+
+| From | Block | How |
+|------|-------|-----|
+| start | `nav-home` | `defineNavBlock` `url` → home.html |
+
+## Page hub
+
+| Block | Checkpoint | Methods |
+|-------|------------|---------|
+| `page-home` | `Home` | add-item, remove-item, clear-cart, assert-hello |
+
+## Methods / Effects
+
+| Block | Kind | Auto |
+|-------|------|------|
+| `assert-hello` | Method | single row |
+| `add-item` | Effect | one row per live Add button (`instanceOptions`) |
+| `remove-item` | Effect | one row per live Remove button |
+| `clear-cart` | Method | single row |
+
+## States / mem-keys
+
+- Checkpoints: `Home`, `HomeVerified`, `ItemInCart`, `CartEmpty`
+- Mem: `demo.selectedItem` (`SelectedItem`) - filled by auto or `--data`

package/templates/src/blocks/demo-web/demo-sel.ts

@@ -0,0 +1,14 @@
+/** Offline catalog URL — HTTP fixture server (not file://; Flatpak Chromium blocks /tmp file URLs). */
+export const HOME_URL =
+  process.env.WAYGRAPH_HOME_URL ??
+  `http://${process.env.WAYGRAPH_FIXTURE_HOST || "127.0.0.1"}:${process.env.WAYGRAPH_FIXTURE_PORT || "4177"}/home.html`;
+
+export const DemoSel = {
+  title: "h1",
+  sub: "#sub",
+  cartCount: "[data-test=cart-count]",
+  catalog: "#catalog",
+  clear: "[data-test=clear-cart]",
+  addBtn: (id: string) => `[data-test=add-${id}]`,
+  removeBtn: (id: string) => `[data-test=remove-${id}]`,
+} as const;

package/templates/src/blocks/demo-web/home.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Waygraph scaffold demo</title>
+    <style>
+      body { font-family: system-ui, sans-serif; margin: 2rem; max-width: 32rem; }
+      h1 { margin: 0 0 0.5rem; }
+      #cart { margin: 1rem 0; font-weight: 600; }
+      .item { display: flex; gap: 0.75rem; align-items: center; margin: 0.5rem 0; }
+      button { cursor: pointer; }
+    </style>
+  </head>
+  <body>
+    <h1>Hello Waygraph</h1>
+    <p id="sub">Scaffold demo - Effect / auto / Page hub</p>
+    <div id="cart">Cart: <span data-test="cart-count">0</span></div>
+    <ul id="catalog">
+      <li class="item" data-id="alpha">
+        <span class="name">Alpha</span>
+        <button type="button" data-test="add-alpha" class="add">Add Alpha</button>
+        <button type="button" data-test="remove-alpha" class="remove" hidden>Remove Alpha</button>
+      </li>
+      <li class="item" data-id="beta">
+        <span class="name">Beta</span>
+        <button type="button" data-test="add-beta" class="add">Add Beta</button>
+        <button type="button" data-test="remove-beta" class="remove" hidden>Remove Beta</button>
+      </li>
+      <li class="item" data-id="gamma">
+        <span class="name">Gamma</span>
+        <button type="button" data-test="add-gamma" class="add">Add Gamma</button>
+        <button type="button" data-test="remove-gamma" class="remove" hidden>Remove Gamma</button>
+      </li>
+    </ul>
+    <button type="button" data-test="clear-cart" id="clear">Clear cart</button>
+    <script>
+      const countEl = document.querySelector("[data-test=cart-count]");
+      const sync = () => {
+        const n = document.querySelectorAll(".remove:not([hidden])").length;
+        countEl.textContent = String(n);
+      };
+      document.querySelectorAll(".item").forEach((row) => {
+        const add = row.querySelector(".add");
+        const remove = row.querySelector(".remove");
+        add.addEventListener("click", () => {
+          add.hidden = true;
+          remove.hidden = false;
+          sync();
+        });
+        remove.addEventListener("click", () => {
+          remove.hidden = true;
+          add.hidden = false;
+          sync();
+        });
+      });
+      document.getElementById("clear").addEventListener("click", () => {
+        document.querySelectorAll(".item").forEach((row) => {
+          row.querySelector(".add").hidden = false;
+          row.querySelector(".remove").hidden = true;
+        });
+        sync();
+      });
+    </script>
+  </body>
+</html>

package/templates/src/blocks/demo-web/home.page.block.ts

@@ -0,0 +1,29 @@
+import { definePageBlock, Trait } from "waygraph";
+import type { Home } from "../../states/demo.states.js";
+import { DemoSel } from "./demo-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";
+
+/**
+ * Kind: Page
+ * Helper: definePageBlock
+ * Route: demo-web/
+ *
+ * Hub for the offline home screen. Methods hang here for docs/auto grouping;
+ * edges in flows still reference the method Blocks directly.
+ * Arrival-only (nav-home already landed on Home).
+ */
+export const HomePageBlock = definePageBlock<Home>({
+  name: "page-home",
+  description: "Offline home hub - add/remove effects, clear, assert-hello.",
+  checkpoint: "Home",
+  verify: [Trait.visible(DemoSel.catalog)],
+  methods: {
+    addItem: () => AddItemBlock,
+    removeItem: () => RemoveItemBlock,
+    clearCart: () => ClearCartBlock,
+    assertHello: () => AssertHelloBlock,
+  },
+});

package/templates/src/blocks/demo-web/methods/add-item.effect.block.ts

@@ -0,0 +1,68 @@
+import {
+  defineEffectBlock,
+  checkpoint,
+  type Checkpoint,
+  type WaygraphInstanceOption,
+} from "waygraph";
+import type { ItemInCart } from "../../../states/demo.states.js";
+import { SelectedItem } from "../../../states/demo.mem-keys.js";
+import { DemoSel } from "../demo-sel.js";
+
+/**
+ * Kind: Effect
+ * Helper: defineEffectBlock
+ * Route: demo-web/methods/
+ *
+ * Mutates one catalog row from mem. `waygraph auto` lists one "Add …" row per
+ * live Add button via instanceOptions.
+ */
+export const AddItemBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>({
+  name: "add-item",
+  description: "Adds the mem-selected catalog item to the cart.",
+  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",
+        async check(page, mem) {
+          const { id } = mem.get(SelectedItem.key);
+          return page.locator(DemoSel.removeBtn(id)).isVisible();
+        },
+      },
+    ],
+    stubBefore: {
+      add: { selector: DemoSel.catalog, label: "Catalog" },
+    },
+    stubAfter: {
+      cart: { selector: DemoSel.cartCount, label: "Cart count", duration: true },
+    },
+    stubOnError: {
+      cart: { selector: DemoSel.cartCount, label: "Cart at failure", tag: "FAIL" },
+    },
+  },
+  async instanceOptions(page): Promise<readonly WaygraphInstanceOption[]> {
+    const buttons = page.locator("button.add:not([hidden])");
+    const n = await buttons.count();
+    const out: WaygraphInstanceOption[] = [];
+    for (let i = 0; i < n; i++) {
+      const btn = buttons.nth(i);
+      const label = ((await btn.textContent()) || "").trim();
+      const testId = await btn.getAttribute("data-test");
+      const id = (testId || "").replace(/^add-/, "");
+      if (!id) continue;
+      out.push({
+        id,
+        label: label || `Add ${id}`,
+        key: SelectedItem.key,
+        value: { id, name: id },
+        highlight: DemoSel.addBtn(id),
+      });
+    }
+    return out;
+  },
+});

package/templates/src/blocks/demo-web/methods/assert-hello.method.block.ts

@@ -0,0 +1,50 @@
+import { defineMethodBlock, checkpoint, Trait } from "waygraph";
+import { DemoSel } from "../demo-sel.js";
+
+/**
+ * Kind: Method
+ * Helper: defineMethodBlock
+ * Route: demo-web/methods/
+ *
+ * Same-URL assert after nav - stubs + fixtures + YAP slide.
+ */
+export const AssertHelloBlock = defineMethodBlock({
+  name: "assert-hello",
+  description: "Confirms the hello heading is still visible after arrival.",
+  instruction: {
+    async act(_page) {},
+    async observe(page) {
+      await page.locator(DemoSel.title).first().waitFor({ state: "visible", timeout: 5_000 });
+      return "ok" as const;
+    },
+    resolve: () => checkpoint("HomeVerified"),
+    verify: [Trait.text(DemoSel.title, "Hello Waygraph"), Trait.visible(DemoSel.sub)],
+    stubBefore: {
+      title: { selector: DemoSel.title, label: "Heading about to check" },
+    },
+    stubAfter: {
+      title: {
+        selector: DemoSel.title,
+        label: "Hello confirmed",
+        detail: "Offline scaffold proof point.",
+        duration: true,
+      },
+      sub: { selector: DemoSel.sub, label: "Subcopy", duration: 1500 },
+    },
+    stubOnError: {
+      title: {
+        selector: DemoSel.title,
+        label: "Heading at failure",
+        tag: "FAIL",
+      },
+    },
+    slides: [
+      {
+        caption: "Scaffold covers auto + narration",
+        detail: "Page hub, Effect instanceOptions, stubs, fixtures, YAP.",
+        tag: "YAP",
+        duration: true,
+      },
+    ],
+  },
+});

package/templates/src/blocks/demo-web/methods/clear-cart.method.block.ts

@@ -0,0 +1,26 @@
+import { defineMethodBlock, checkpoint, Trait } from "waygraph";
+import { DemoSel } from "../demo-sel.js";
+
+/**
+ * Kind: Method
+ * Helper: defineMethodBlock
+ * Route: demo-web/methods/
+ */
+export const ClearCartBlock = defineMethodBlock({
+  name: "clear-cart",
+  description: "Clears every item via the Clear cart control.",
+  instruction: {
+    async act(page) {
+      await page.locator(DemoSel.clear).click();
+    },
+    resolve: () => checkpoint("CartEmpty"),
+    verify: [Trait.text(DemoSel.cartCount, "0")],
+    stubBefore: {
+      clear: { selector: DemoSel.clear, label: "Clear cart" },
+    },
+    stubAfter: {
+      cart: { selector: DemoSel.cartCount, label: "Empty cart", duration: true },
+    },
+    stubOnError: {},
+  },
+});

package/templates/src/blocks/demo-web/methods/remove-item.effect.block.ts

@@ -0,0 +1,63 @@
+import {
+  defineEffectBlock,
+  checkpoint,
+  type Checkpoint,
+  type WaygraphInstanceOption,
+} from "waygraph";
+import type { CartEmpty } from "../../../states/demo.states.js";
+import { SelectedItem } from "../../../states/demo.mem-keys.js";
+import { DemoSel } from "../demo-sel.js";
+
+/**
+ * Kind: Effect
+ * Helper: defineEffectBlock
+ * Route: demo-web/methods/
+ *
+ * Removes one in-cart row. Auto menus one row per visible Remove button.
+ */
+export const RemoveItemBlock = defineEffectBlock<Checkpoint<string>, CartEmpty>({
+  name: "remove-item",
+  description: "Removes the mem-selected catalog item from the cart.",
+  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",
+        async check(page, mem) {
+          const { id } = mem.get(SelectedItem.key);
+          return page.locator(DemoSel.addBtn(id)).isVisible();
+        },
+      },
+    ],
+    stubBefore: {},
+    stubAfter: {
+      cart: { selector: DemoSel.cartCount, label: "Cart count", duration: true },
+    },
+    stubOnError: {},
+  },
+  async instanceOptions(page): Promise<readonly WaygraphInstanceOption[]> {
+    const buttons = page.locator("button.remove:not([hidden])");
+    const n = await buttons.count();
+    const out: WaygraphInstanceOption[] = [];
+    for (let i = 0; i < n; i++) {
+      const btn = buttons.nth(i);
+      const label = ((await btn.textContent()) || "").trim();
+      const testId = await btn.getAttribute("data-test");
+      const id = (testId || "").replace(/^remove-/, "");
+      if (!id) continue;
+      out.push({
+        id,
+        label: label || `Remove ${id}`,
+        key: SelectedItem.key,
+        value: { id, name: id },
+        highlight: DemoSel.removeBtn(id),
+      });
+    }
+    return out;
+  },
+});

package/templates/src/blocks/demo-web/nav-home.block.ts

@@ -0,0 +1,22 @@
+import { defineNavBlock, Trait } from "waygraph";
+import { DemoSel, HOME_URL } from "./demo-sel.js";
+
+/**
+ * Kind: Nav
+ * Helper: defineNavBlock
+ * Route: demo-web/  (synthetic "/")
+ */
+export const NavHomeBlock = defineNavBlock({
+  name: "nav-home",
+  description: "Opens the offline catalog page (HTTP fixture :4177).",
+  checkpoint: "Home",
+  url: HOME_URL,
+  verify: [Trait.text(DemoSel.title, "Hello Waygraph"), Trait.visible(DemoSel.catalog)],
+  stubBefore: {},
+  stubAfter: {
+    title: { selector: DemoSel.title, label: "Home heading", duration: true },
+  },
+  stubOnError: {
+    title: { selector: DemoSel.title, label: "Home heading at failure" },
+  },
+});

package/templates/src/flows/example.flow.ts

@@ -1,6 +1,27 @@
-import { Engine, start, end } from "waygraph";
-import { LoadPageBlock } from "../blocks/load-page.block.js";
+import { Engine, start, end, withTitle, withHighlightFixtures } from "waygraph";
+import { NavHomeBlock } from "../blocks/demo-web/nav-home.block.js";
+import { AssertHelloBlock } from "../blocks/demo-web/methods/assert-hello.method.block.js";
+// Page hub registered for auto/docs grouping (arrival-only after nav).
+import "../blocks/demo-web/home.page.block.js";
 
 const engine = new Engine();
 
-export const exampleFlow = engine.defineFlow([start, LoadPageBlock, end]);
+/** Smoke: nav + assert (no mem). Green offline. */
+export const exampleFlow = withHighlightFixtures(
+  withTitle(
+    engine.defineFlow([start, NavHomeBlock, AssertHelloBlock, end]),
+    "Scaffold: Hello Waygraph",
+  ),
+  {
+    "assert-hello": {
+      stubAfter: {
+        title: {
+          label: "AC · Hello visible",
+          detail: "Replace this fixture copy with your ticket lines.",
+          tag: "AC",
+          duration: true,
+        },
+      },
+    },
+  },
+);

package/templates/src/flows/shop.flow.ts

@@ -0,0 +1,42 @@
+import {
+  Engine,
+  start,
+  end,
+  withTitle,
+  withHighlightFixtures,
+  withSessionReset,
+} from "waygraph";
+import { NavHomeBlock } from "../blocks/demo-web/nav-home.block.js";
+import { AddItemBlock } from "../blocks/demo-web/methods/add-item.effect.block.js";
+import { ClearCartBlock } from "../blocks/demo-web/methods/clear-cart.method.block.js";
+import "../blocks/demo-web/home.page.block.js";
+
+const engine = new Engine();
+
+/**
+ * Effect + Method demo (set mem for add-item, or use `waygraph auto` which
+ * fills SelectedItem via instanceOptions).
+ *
+ *   waygraph demo --blocks shopFlow --data '{"demo.selectedItem":{"id":"alpha","name":"Alpha"}}'
+ *   waygraph auto   # after landing on home, pick Add Alpha / Add Beta / …
+ */
+export const shopFlow = withHighlightFixtures(
+  withTitle(
+    withSessionReset(
+      engine.defineFlow([start, NavHomeBlock, AddItemBlock, ClearCartBlock, end]),
+    ),
+    "Scaffold: Shop (Effect + clear)",
+  ),
+  {
+    "add-item": {
+      stubAfter: {
+        cart: {
+          label: "AC · item in cart",
+          detail: "Cart count bumped after Add.",
+          tag: "AC",
+          duration: true,
+        },
+      },
+    },
+  },
+);

package/templates/src/states/demo.mem-keys.ts

@@ -0,0 +1,7 @@
+import { keyGroup } from "waygraph";
+
+/**
+ * Which catalog row `add-item` / `remove-item` act on.
+ * `waygraph auto` fills this via Effect `instanceOptions` (one menu row per live button).
+ */
+export const SelectedItem = keyGroup<{ id: string; name: string }>("demo.selectedItem");

package/templates/src/states/demo.states.ts

@@ -0,0 +1,6 @@
+import type { Checkpoint } from "waygraph";
+
+export type Home = Checkpoint<"Home">;
+export type HomeVerified = Checkpoint<"HomeVerified">;
+export type ItemInCart = Checkpoint<"ItemInCart">;
+export type CartEmpty = Checkpoint<"CartEmpty">;

package/templates/tests/example.spec.ts

@@ -1,8 +1,17 @@
 import { test, expect } from "@playwright/test";
 import { MemPage, checkpoint } from "waygraph";
 import { exampleFlow } from "../src/flows/example.flow.js";
+import { shopFlow } from "../src/flows/shop.flow.js";
+import { SelectedItem } from "../src/states/demo.mem-keys.js";
 
-test("example flow reaches Loaded", async ({ context }) => {
+test("example flow reaches HomeVerified", async ({ context }) => {
   const result = await exampleFlow.run(context, new MemPage());
-  expect(result).toEqual(checkpoint("Loaded"));
+  expect(result).toEqual(checkpoint("HomeVerified"));
+});
+
+test("shop flow adds then clears (Effect + Method)", async ({ context }) => {
+  const mem = new MemPage();
+  mem.set(SelectedItem.key, { id: "alpha", name: "Alpha" });
+  const result = await shopFlow.run(context, mem);
+  expect(result).toEqual(checkpoint("CartEmpty"));
 });

package/templates/src/blocks/load-page.block.ts

@@ -1,18 +0,0 @@
-import { defineBlock, checkpoint, Trait } from "waygraph";
-import type { Checkpoint } from "waygraph";
-
-export type Start = Checkpoint<"__start__">;
-export type Loaded = Checkpoint<"Loaded">;
-
-const PAGE_URL = "data:text/html,<h1>Hello Waygraph</h1>";
-
-export const LoadPageBlock = defineBlock<Start, Loaded>({
-  name: "load-page",
-  instruction: {
-    async act(page) {
-      await page.goto(PAGE_URL);
-    },
-    resolve: () => checkpoint("Loaded"),
-    verify: [Trait.text("h1", "Hello Waygraph")],
-  },
-});