waygraph 0.11.2 → 0.12.4

package/templates/quickstart/src/blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.ts

@@ -26,6 +26,7 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
         selector: ".complete-header",
         label: "Order confirmed",
         detail: "Thank you for your order!",
+        duration: true,
       },
     },
     // Shown AFTER act (order already placed) - selectors must match the
@@ -35,18 +36,23 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
         caption: "Checkout is a short pipeline",
         detail: "Cart -> info -> overview -> done. You just placed the order.",
         tag: "YAP",
+        duration: true,
       },
       {
         caption: "Completion page is the durable proof",
         detail: "The thank-you header is what verify asserts on.",
         tag: "YAP",
         selector: ".complete-header",
+        duration: 2500,
+        fastMode: 700,
       },
       {
         caption: "Episode continues after this yap",
         detail: "Next step rings the same banner, then you move on.",
         tag: "YAP",
         selector: ".complete-header",
+        duration: true,
+        fastMode: 500,
       },
     ],
   },

package/templates/quickstart/src/blocks/saucedemo-web/ff-owner-auth.block.ts

@@ -0,0 +1,17 @@
+import { fastForwardComposeBlock } from "waygraph";
+import { NavLoginBlock } from "./nav-login.block.js";
+import { SubmitLoginForFlow } from "./methods/submit-login-for-flow.js";
+
+/**
+ * Kind: FFCompose (fast-forward)
+ * Helper: fastForwardComposeBlock
+ * Route: saucedemo-web/  (auth prefix)
+ *
+ * Collapses nav-login + submit-login into one opaque demo/run step so
+ * checkout demos skip watching auth. Use --ff-expand to gate inners again.
+ * loginFlow stays expanded for Sign In episode narration.
+ */
+export const FfOwnerAuthBlock = fastForwardComposeBlock("ff-owner-auth", [
+  NavLoginBlock,
+  SubmitLoginForFlow,
+]);

package/templates/quickstart/src/blocks/saucedemo-web/methods/submit-login.method.block.ts

@@ -26,9 +26,16 @@ export const SubmitLoginActionBlock = defineMethodBlock<LoginPage, LoginSubmitOu
       await page.locator("#login-button").click({ noWaitAfter: true });
     },
     async observe(page): Promise<LoginObserve> {
+      // Race inventory nav vs error banner - locked_out / wrong password show
+      // Epic sadface immediately; do not burn the full inventory timeout.
+      const inventory = page.waitForURL(/\/inventory\.html/, { timeout: 8_000 }).then(() => "success" as const);
+      const errorBanner = page
+        .locator('[data-test="error"]')
+        .first()
+        .waitFor({ state: "visible", timeout: 8_000 })
+        .then(() => "failure" as const);
       try {
-        await page.waitForURL(/\/inventory\.html/, { timeout: 8_000 });
-        return "success";
+        return await Promise.race([inventory, errorBanner]);
       } catch {
         return "failure";
       }
@@ -44,5 +51,12 @@ export const SubmitLoginActionBlock = defineMethodBlock<LoginPage, LoginSubmitOu
       submit: { selector: "#login-button", label: "Login" },
     },
     stubAfter: {},
+    stubOnError: {
+      error: {
+        selector: '[data-test="error"]',
+        label: "Login error banner",
+        duration: true,
+      },
+    },
   },
 });

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

@@ -1,6 +1,5 @@
 import { Engine, start, end, withTitle, withHighlightFixtures } from "waygraph";
 import type {
-  LoginPage,
   LoggedIn,
   ItemInCart,
   CartPage,
@@ -8,8 +7,7 @@ import type {
   CheckoutOverviewPage,
   OrderComplete,
 } from "../states/checkout.states.js";
-import { NavLoginBlock } from "../blocks/saucedemo-web/nav-login.block.js";
-import { SubmitLoginForFlow } from "../blocks/saucedemo-web/methods/submit-login-for-flow.js";
+import { FfOwnerAuthBlock } from "../blocks/saucedemo-web/ff-owner-auth.block.js";
 import { AddToCartBlock } from "../blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.js";
 import { NavCartBlock } from "../blocks/saucedemo-web/cart/nav-cart.block.js";
 import { NavCheckoutInfoBlock } from "../blocks/saucedemo-web/cart/nav-checkout-info.block.js";
@@ -18,18 +16,10 @@ import { FinishOrderBlock } from "../blocks/saucedemo-web/checkout-step-two/meth
 
 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.
-//
-// 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
+// Auth is one FFCompose step so demo pacing skips login; --ff-expand for inners.
 export const checkoutFlow = withHighlightFixtures(
   withTitle(
     engine.defineFlow<
-      LoginPage,
       LoggedIn,
       ItemInCart,
       CartPage,
@@ -38,8 +28,7 @@ export const checkoutFlow = withHighlightFixtures(
       OrderComplete
     >([
       start,
-      NavLoginBlock,
-      SubmitLoginForFlow,
+      FfOwnerAuthBlock,
       AddToCartBlock,
       NavCartBlock,
       NavCheckoutInfoBlock,
@@ -50,15 +39,26 @@ export const checkoutFlow = withHighlightFixtures(
     "Owner: Full Checkout",
   ),
   {
+    "ff-owner-auth": {
+      stubAfter: {
+        inventory: {
+          label: "Signed in (fast-forward)",
+          detail: "Auth collapsed via FFCompose - interesting work starts here.",
+          tag: "AC",
+          duration: true,
+        },
+      },
+    },
     "submit-login": {
       stubBefore: {
         username: {
           label: "Demo user",
-          detail: "standard_user from Mem — library block stays neutral.",
+          detail: "standard_user from Mem - library block stays neutral.",
           tag: "AC",
+          duration: true,
         },
-        password: { label: "Password", detail: "Filled from Mem credentials." },
-        submit: { label: "Sign in", tag: "GATE" },
+        password: { label: "Password", detail: "Filled from Mem credentials.", duration: 1500 },
+        submit: { label: "Sign in", tag: "GATE", duration: true, fastMode: 500 },
       },
     },
     "add-to-cart": {
@@ -67,6 +67,7 @@ export const checkoutFlow = withHighlightFixtures(
           label: "Cart now has the item",
           detail: "Badge updates after Add to cart.",
           tag: "AC",
+          duration: true,
         },
       },
     },
@@ -76,9 +77,10 @@ export const checkoutFlow = withHighlightFixtures(
           label: "Order placed",
           detail: "Completion header is the durable proof.",
           tag: "GATE",
+          duration: 2500,
+          fastMode: 700,
         },
       },
-      // Optional: fixture can replace block slides; leave unset to use block slides.
     },
   },
 );