waygraph 0.12.5 → 0.12.6

package/README.md

@@ -248,12 +248,13 @@ an opinionated Playwright," so a stealth-patched or otherwise customized launche
 the same `.launch()` shape as Playwright's own `chromium`/`firefox`/`webkit`.
 
 See **Getting started** above for `try demo`, `create-waygraph`, and `waygraph init`.
-Both scaffold commands emit the same offline tree (package.json, tsconfig, playwright.config,
-one example flow + `npm run check` / `npm run auto` / `npm run demo`).
+Both scaffold commands emit the same offline tree (route-shaped `demo-web/` +
+`methods/`, stubs, fixtures, one YAP slide). Layout:
+[`docs/scaffold.html`](./docs/scaffold.html) · `templates/scaffold/STRUCTURE.md`.
 
 **Consumer layout (Next.js App Router):** block folders mirror `app/` page routes (`/`
 at the namespace root; no invented `landing/`/`root/`; sidebar = chrome + edges). See
-`create-waygraph/README.md` "Consumer layout" and mesh handout
+[`docs/consumer.html`](./docs/consumer.html) and mesh handout
 `WAYGRAPH-CONSUMER-CONVENTION.md` - separate from this package API doc.
 
 Deliberately **not yet implemented** (tracked on the project board):

package/dist/cli.js

@@ -3237,8 +3237,10 @@ function initCommand(projectName) {
     console.log("  waygraph check       # nav hygiene + orphan Blocks");
     console.log("  waygraph auto        # interactive explore (headed panel)");
     console.log("  waygraph auto --cli  # same menus in the terminal");
-    console.log("  waygraph demo src/flows/example.flow.ts");
+    console.log("  waygraph demo --blocks exampleFlow");
     console.log("  waygraph graph       # static state graph JSON");
+    console.log("");
+    console.log("  Layout: see STRUCTURE.md (or https://deviate-dv8.github.io/waygraph/scaffold.html)");
 }
 async function checkCommand(projectDir) {
     const files = discoverBlocks(projectDir);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "type": "module",
   "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
   "license": "MIT",

package/templates/scaffold/README.md

@@ -0,0 +1,25 @@
+# __PROJECT_NAME__
+
+Offline waygraph scaffold (`data:` URL - no network for `npm test`).
+
+## Layout
+
+See [STRUCTURE.md](./STRUCTURE.md). Package 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 demo          # headed step (manual Next)
+npm run demo:auto-next
+npm run auto
+npm run auto:cli
+```
+
+Point `package.json` `waygraph.baseUrl` at your real app when you leave the
+`data:` demo. Keep route folders = app URLs (consumer layout).

package/templates/scaffold/STRUCTURE.md

@@ -0,0 +1,36 @@
+# Offline scaffold layout (`waygraph init` / `create-waygraph`)
+
+Shipped under `templates/scaffold/` in the **waygraph** package.
+Same tree is what `npx waygraph init my-app` copies.
+
+Docs (readable in the package site): [docs/scaffold.html](../../docs/scaffold.html)
+
+```text
+.
+├── package.json              # waygraph ^0.12.6, demo/run/auto scripts
+├── playwright.config.ts
+├── tsconfig.json
+├── STRUCTURE.md              # this file
+├── README.md
+├── src/
+│   ├── blocks/
+│   │   ├── SITE-MAP.md       # namespace map (consumer convention)
+│   │   └── demo-web/         # synthetic site (data: URL) - mirrors app "/"
+│   │       ├── 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
+```
+
+**Rule of thumb:** route folders = app URL folders; `/` lives at the namespace
+root (`demo-web/`). Methods hang under `methods/`. Chrome/shared UI would be
+`shared/chrome/` (not invented for this offline hello).
+
+Grow this into a real app by renaming `demo-web/` to your FE origin namespace
+and adding one folder per `page.tsx` URL. See package docs **Consumer layout**.

package/templates/scaffold/package.json

@@ -10,15 +10,16 @@
     "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",
+    "demo": "waygraph demo --blocks exampleFlow",
+    "demo:auto-next": "waygraph demo --blocks exampleFlow --auto-next --title \"Scaffold demo\"",
+    "run": "waygraph run --blocks exampleFlow",
     "graph": "waygraph graph"
   },
   "waygraph": {
-    "baseUrl": "https://example.com"
+    "baseUrl": "about:blank"
   },
   "dependencies": {
-    "waygraph": "^0.11.0"
+    "waygraph": "^0.12.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.55.0",

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

@@ -0,0 +1,13 @@
+# Site map (scaffold)
+
+Offline hello uses one synthetic namespace (`demo-web/`) and a `data:` home URL
+so `npm test` stays green without the network.
+
+| Folder | URL | Notes |
+|--------|-----|-------|
+| `demo-web/` | `/` (synthetic) | Nav + methods for the hello page |
+| `demo-web/methods/` | same URL | On-page asserts / future form acts |
+
+When you wire a real app, rename `demo-web/` to your FE origin namespace and
+add one folder per real `page.tsx` route. Grouping dirs without a page get no
+`NAV.md`. Full contract: waygraph **Consumer layout** docs.

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

@@ -0,0 +1,20 @@
+# demo-web / (synthetic home)
+
+**URL:** `data:text/html,…` (offline hello - replace with your real `/`)
+
+## Nav-to
+
+| From | Block | How |
+|------|-------|-----|
+| start | `nav-home` | `defineNavBlock` `url` → data HTML |
+
+## Methods
+
+| Block | Kind | Notes |
+|-------|------|-------|
+| `assert-hello` | Method | Verify heading; demo stubs + fixtures |
+
+## States / mem-keys
+
+- Checkpoint `Home` after nav
+- Checkpoint `HomeVerified` after assert-hello

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

@@ -0,0 +1,51 @@
+import { defineMethodBlock, checkpoint, Trait } from "waygraph";
+
+/**
+ * Kind: Method
+ * Helper: defineMethodBlock
+ * Route: demo-web/methods/
+ *
+ * Same-URL assert after nav - shows stubBefore / stubAfter / stubOnError shape.
+ */
+export const AssertHelloBlock = defineMethodBlock({
+  name: "assert-hello",
+  description: "Confirms the hello heading is still visible after arrival.",
+  instruction: {
+    async act(_page) {
+      // No DOM mutation - observe/verify own the proof.
+    },
+    async observe(page) {
+      await page.locator("h1").first().waitFor({ state: "visible", timeout: 5_000 });
+      return "ok" as const;
+    },
+    resolve: () => checkpoint("HomeVerified"),
+    verify: [Trait.text("h1", "Hello Waygraph"), Trait.visible("#sub")],
+    stubBefore: {
+      title: { selector: "h1", label: "Heading about to check" },
+    },
+    stubAfter: {
+      title: {
+        selector: "h1",
+        label: "Hello confirmed",
+        detail: "Offline scaffold proof point.",
+        duration: true,
+      },
+      sub: { selector: "#sub", label: "Subcopy", duration: 1500 },
+    },
+    stubOnError: {
+      title: {
+        selector: "h1",
+        label: "Heading at failure",
+        tag: "FAIL",
+      },
+    },
+    slides: [
+      {
+        caption: "Scaffold is route-shaped",
+        detail: "demo-web/ = synthetic /. Grow folders per real page.tsx.",
+        tag: "YAP",
+        duration: true,
+      },
+    ],
+  },
+});

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

@@ -0,0 +1,25 @@
+import { defineNavBlock, Trait } from "waygraph";
+
+/** Offline hello page - swap `url` for a real app route when you graduate. */
+export const HOME_URL =
+  'data:text/html,<!doctype html><html><body><h1>Hello Waygraph</h1><p id="sub">Scaffold demo</p></body></html>';
+
+/**
+ * Kind: Nav
+ * Helper: defineNavBlock
+ * Route: demo-web/  (synthetic "/")
+ */
+export const NavHomeBlock = defineNavBlock({
+  name: "nav-home",
+  description: "Opens the offline hello page (data: URL).",
+  checkpoint: "Home",
+  url: HOME_URL,
+  verify: [Trait.text("h1", "Hello Waygraph")],
+  stubBefore: {},
+  stubAfter: {
+    title: { selector: "h1", label: "Home heading", duration: true },
+  },
+  stubOnError: {
+    title: { selector: "h1", label: "Home heading at failure" },
+  },
+});

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

@@ -1,6 +1,28 @@
-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";
 
 const engine = new Engine();
 
-export const exampleFlow = engine.defineFlow([start, LoadPageBlock, end]);
+/**
+ * Offline example: nav to data: hello page, then assert heading.
+ * Flow fixtures override ticket-style copy on stubs (demo narration).
+ */
+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/scaffold/src/states/demo.states.ts

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

package/templates/scaffold/tests/example.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test";
 import { MemPage, checkpoint } from "waygraph";
 import { exampleFlow } from "../src/flows/example.flow.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"));
 });

package/templates/scaffold/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")],
-  },
-});