waygraph 0.10.8 → 0.11.0

package/templates/quickstart/src/flows/checkout.flow.ts

@@ -1,4 +1,4 @@
-import { Engine, start, end, withTitle } from "waygraph";
+import { Engine, start, end, withTitle, withHighlightFixtures } from "waygraph";
 import type {
   LoginPage,
   LoggedIn,
@@ -21,25 +21,64 @@ const engine = new Engine({ headless: false, slowMo: 250 });
 // Atomic nav/action per real URL - the shape `waygraph auto` discovers.
 // Explicit type args: AddToCartBlock's In is Checkpoint<string> (wildcard),
 // which trips defineFlow overload inference across a long array.
-export const checkoutFlow = withTitle(
-  engine.defineFlow<
-    LoginPage,
-    LoggedIn,
-    ItemInCart,
-    CartPage,
-    CheckoutInfoPage,
-    CheckoutOverviewPage,
-    OrderComplete
-  >([
-    start,
-    NavLoginBlock,
-    SubmitLoginForFlow,
-    AddToCartBlock,
-    NavCartBlock,
-    NavCheckoutInfoBlock,
-    SubmitCheckoutInfoBlock,
-    FinishOrderBlock,
-    end,
-  ]),
-  "Owner: Full Checkout",
+//
+// Demo narration showcase (waygraph 0.11+):
+// - Block stubs: submit-login stubBefore, add-to-cart / finish-order stubAfter
+// - Flow fixtures: ticket-style captions (unlimited purposes on .flow.ts)
+// - Slides on finish-order: multi-step yap with Next between slides
+export const checkoutFlow = withHighlightFixtures(
+  withTitle(
+    engine.defineFlow<
+      LoginPage,
+      LoggedIn,
+      ItemInCart,
+      CartPage,
+      CheckoutInfoPage,
+      CheckoutOverviewPage,
+      OrderComplete
+    >([
+      start,
+      NavLoginBlock,
+      SubmitLoginForFlow,
+      AddToCartBlock,
+      NavCartBlock,
+      NavCheckoutInfoBlock,
+      SubmitCheckoutInfoBlock,
+      FinishOrderBlock,
+      end,
+    ]),
+    "Owner: Full Checkout",
+  ),
+  {
+    "submit-login": {
+      stubBefore: {
+        username: {
+          label: "Demo user",
+          detail: "standard_user from Mem — library block stays neutral.",
+          tag: "AC",
+        },
+        password: { label: "Password", detail: "Filled from Mem credentials." },
+        submit: { label: "Sign in", tag: "GATE" },
+      },
+    },
+    "add-to-cart": {
+      stubAfter: {
+        badge: {
+          label: "Cart now has the item",
+          detail: "Badge updates after Add to cart.",
+          tag: "AC",
+        },
+      },
+    },
+    "finish-order": {
+      stubAfter: {
+        thanks: {
+          label: "Order placed",
+          detail: "Completion header is the durable proof.",
+          tag: "GATE",
+        },
+      },
+      // Optional: fixture can replace block slides; leave unset to use block slides.
+    },
+  },
 );

package/templates/scaffold/package.json

@@ -18,7 +18,7 @@
     "baseUrl": "https://example.com"
   },
   "dependencies": {
-    "waygraph": "^0.10.6"
+    "waygraph": "^0.11.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.55.0",