waygraph 0.16.1 → 0.16.2

package/examples/saucedemo/src/stubs/device-showcase.ts

@@ -78,18 +78,16 @@ export const deviceShowcase = {
   },
   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",
-        },
+      ctx.ring("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) => {
@@ -115,26 +113,24 @@ export const deviceShowcase = {
       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",
-        },
+      ctx.ring("product", {
+        selector: InventorySel.title(PRODUCT_ID),
+        label: "Sauce Labs Backpack",
+        detail: "tone: info (blue)",
+        tone: "info",
+        focus: true,
+        zoom: 1.45,
+        zoomOut: false,
+      });
+      ctx.ring("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) => {
@@ -159,17 +155,15 @@ export const deviceShowcase = {
       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",
-        },
+      ctx.ring("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) => {

package/examples/saucedemo/src/stubs/finish-order.ts

@@ -0,0 +1,38 @@
+import type { StubCtx } from "waygraph";
+import { CheckoutOverviewSel } from "../blocks/saucedemo-web/checkout-step-two/methods/checkout-overview.sel.js";
+
+/** Rings Finish while the order is placed. */
+export function placingOrder(ctx: StubCtx): void {
+  ctx.ring("finish", { selector: CheckoutOverviewSel.finishBtn, label: "Placing the order" });
+}
+
+/** Yap slides after the order is placed. They play on the completion page, so they ring its header, not #finish. */
+export function orderPlacedYap(ctx: StubCtx): void {
+  ctx.slides([
+    {
+      caption: "Checkout is a short pipeline",
+      detail: "Cart -> info -> overview -> done. You just placed the order.",
+      tag: "YAP",
+      tone: "info",
+      duration: true,
+    },
+    {
+      caption: "Completion page is the durable proof",
+      detail: "tone: success - the thank-you header is what verify asserts on.",
+      tag: "YAP",
+      tone: "success",
+      selector: CheckoutOverviewSel.completeHeader,
+      duration: 2500,
+      fastMode: 700,
+    },
+    {
+      caption: "Episode continues after this yap",
+      detail: "Next step rings the same banner, then you move on.",
+      tag: "YAP",
+      tone: "planned",
+      selector: CheckoutOverviewSel.completeHeader,
+      duration: true,
+      fastMode: 500,
+    },
+  ]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "type": "module",
   "engines": {
     "node": ">=22"

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

@@ -1,4 +1,4 @@
-import { defineMethodBlock, Trait, narrate } from "waygraph";
+import { defineMethodBlock, Trait } from "waygraph";
 import {
   CheckoutOverviewPage,
   OrderComplete,
@@ -21,9 +21,7 @@ export const FinishOrderBlock = defineMethodBlock({
   instruction: {
     async act(page) {
       const finishButton = page.locator(CheckoutOverviewSel.finishBtn);
-      await narrate(finishButton, "Placing the order", () =>
-        finishButton.click(),
-      );
+      await finishButton.click();
     },
     verify: [
       Trait.text(
@@ -31,35 +29,5 @@ export const FinishOrderBlock = defineMethodBlock({
         "Thank you for your order!",
       ),
     ],
-    // Shown AFTER act (order already placed) - selectors must match the
-    // completion page, not #finish on the overview.
-    slides: [
-      {
-        caption: "Checkout is a short pipeline",
-        detail: "Cart -> info -> overview -> done. You just placed the order.",
-        tag: "YAP",
-        tone: "info",
-        duration: true,
-      },
-      {
-        caption: "Completion page is the durable proof",
-        detail:
-          "tone: success - the thank-you header is what verify asserts on.",
-        tag: "YAP",
-        tone: "success",
-        selector: CheckoutOverviewSel.completeHeader,
-        duration: 2500,
-        fastMode: 700,
-      },
-      {
-        caption: "Episode continues after this yap",
-        detail: "Next step rings the same banner, then you move on.",
-        tag: "YAP",
-        tone: "planned",
-        selector: CheckoutOverviewSel.completeHeader,
-        duration: true,
-        fastMode: 500,
-      },
-    ],
   },
 });

package/templates/quickstart/src/flows/checkout-then-browse-again.flow.ts

@@ -12,6 +12,7 @@ import { FillLastNameBlock } from "../blocks/saucedemo-web/checkout-step-one/met
 import { FillPostalCodeBlock } from "../blocks/saucedemo-web/checkout-step-one/methods/fill-postal-code.method.block.js";
 import { SubmitCheckoutInfoBlock } from "../blocks/saucedemo-web/checkout-step-one/methods/submit-checkout-info.method.block.js";
 import { FinishOrderBlock } from "../blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.js";
+import { orderPlacedYap, placingOrder } from "../stubs/finish-order.js";
 import { NavBackToProductsBlock } from "../blocks/saucedemo-web/inventory-item/nav-back-to-products.block.js";
 
 /** Full checkout, then the "Back Home" click-based Nav Block returns to the catalogue. */
@@ -35,6 +36,6 @@ export const checkoutThenBrowseAgainFlow = engine
   .method(FillLastNameBlock)
   .method(FillPostalCodeBlock)
   .method(SubmitCheckoutInfoBlock)
-  .method(FinishOrderBlock)
+  .method(FinishOrderBlock.stubBefore(placingOrder).stubAfter(orderPlacedYap))
   .gotoPage(NavBackToProductsBlock)
   .end();

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

@@ -12,6 +12,7 @@ import { FillLastNameBlock } from "../blocks/saucedemo-web/checkout-step-one/met
 import { FillPostalCodeBlock } from "../blocks/saucedemo-web/checkout-step-one/methods/fill-postal-code.method.block.js";
 import { SubmitCheckoutInfoBlock } from "../blocks/saucedemo-web/checkout-step-one/methods/submit-checkout-info.method.block.js";
 import { FinishOrderBlock } from "../blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.js";
+import { orderPlacedYap, placingOrder } from "../stubs/finish-order.js";
 import { LoginSel } from "../blocks/saucedemo-web/methods/login.sel.js";
 
 export const checkoutFlow = engine
@@ -80,5 +81,5 @@ export const checkoutFlow = engine
     }),
   )
   .method(SubmitCheckoutInfoBlock.stubBefore((ctx) => ctx.hideCaption()))
-  .method(FinishOrderBlock)
+  .method(FinishOrderBlock.stubBefore(placingOrder).stubAfter(orderPlacedYap))
   .end();

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

@@ -8,6 +8,7 @@ import { FillLastNameBlock } from "../blocks/saucedemo-web/checkout-step-one/met
 import { FillPostalCodeBlock } from "../blocks/saucedemo-web/checkout-step-one/methods/fill-postal-code.method.block.js";
 import { SubmitCheckoutInfoBlock } from "../blocks/saucedemo-web/checkout-step-one/methods/submit-checkout-info.method.block.js";
 import { FinishOrderBlock } from "../blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.js";
+import { orderPlacedYap, placingOrder } from "../stubs/finish-order.js";
 
 /** Add the selected item, check out and place the order. Starts signed in (run it after loginFlow). */
 export const shopFlow = engine
@@ -20,5 +21,5 @@ export const shopFlow = engine
   .method(FillLastNameBlock)
   .method(FillPostalCodeBlock)
   .method(SubmitCheckoutInfoBlock)
-  .method(FinishOrderBlock)
+  .method(FinishOrderBlock.stubBefore(placingOrder).stubAfter(orderPlacedYap))
   .end();

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

@@ -78,18 +78,16 @@ export const deviceShowcase = {
   },
   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",
-        },
+      ctx.ring("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) => {
@@ -115,26 +113,24 @@ export const deviceShowcase = {
       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",
-        },
+      ctx.ring("product", {
+        selector: InventorySel.title(PRODUCT_ID),
+        label: "Sauce Labs Backpack",
+        detail: "tone: info (blue)",
+        tone: "info",
+        focus: true,
+        zoom: 1.45,
+        zoomOut: false,
+      });
+      ctx.ring("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) => {
@@ -159,17 +155,15 @@ export const deviceShowcase = {
       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",
-        },
+      ctx.ring("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) => {

package/templates/quickstart/src/stubs/finish-order.ts

@@ -0,0 +1,38 @@
+import type { StubCtx } from "waygraph";
+import { CheckoutOverviewSel } from "../blocks/saucedemo-web/checkout-step-two/methods/checkout-overview.sel.js";
+
+/** Rings Finish while the order is placed. */
+export function placingOrder(ctx: StubCtx): void {
+  ctx.ring("finish", { selector: CheckoutOverviewSel.finishBtn, label: "Placing the order" });
+}
+
+/** Yap slides after the order is placed. They play on the completion page, so they ring its header, not #finish. */
+export function orderPlacedYap(ctx: StubCtx): void {
+  ctx.slides([
+    {
+      caption: "Checkout is a short pipeline",
+      detail: "Cart -> info -> overview -> done. You just placed the order.",
+      tag: "YAP",
+      tone: "info",
+      duration: true,
+    },
+    {
+      caption: "Completion page is the durable proof",
+      detail: "tone: success - the thank-you header is what verify asserts on.",
+      tag: "YAP",
+      tone: "success",
+      selector: CheckoutOverviewSel.completeHeader,
+      duration: 2500,
+      fastMode: 700,
+    },
+    {
+      caption: "Episode continues after this yap",
+      detail: "Next step rings the same banner, then you move on.",
+      tag: "YAP",
+      tone: "planned",
+      selector: CheckoutOverviewSel.completeHeader,
+      duration: true,
+      fastMode: 500,
+    },
+  ]);
+}

package/templates/scaffold/src/flows/home/hello.flow.ts

@@ -33,6 +33,9 @@ export const homeHelloFlow = engine
           duration: true,
         });
         ctx.ring("sub", { selector: DemoSel.sub, label: "Subcopy", duration: 1500 });
+        ctx.slides([
+          { caption: "Scaffold covers auto + narration", detail: "Page hub, Effect instanceOptions, stubs, YAP.", tag: "YAP", duration: true },
+        ]);
       })
       .stubOnError((ctx) => {
         ctx.ring("title", { selector: DemoSel.title, label: "Heading at failure", tag: "FAIL" });

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

@@ -2,19 +2,11 @@ import { defineAssertBlock, Trait } from "waygraph";
 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. */
+/** Heading still shows after arrival. */
 export const AssertHelloBlock = defineAssertBlock({
   name: "assert-hello",
   description: "Confirms the hello heading is still visible after arrival.",
   checkpoint: Home,
   waitForHeading: "Hello Waygraph",
   verify: [Trait.text(DemoSel.title, "Hello Waygraph"), Trait.visible(DemoSel.sub)],
-  slides: [
-    {
-      caption: "Scaffold covers auto + narration",
-      detail: "Page hub, Effect instanceOptions, stubs, fixtures, YAP.",
-      tag: "YAP",
-      duration: true,
-    },
-  ],
 });