waygraph 0.16.1 → 0.16.4

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

@@ -38,13 +38,13 @@ function checklist(done: number, index: number) {
 export const deviceShowcase = {
   username: {
     before: (ctx: StubCtx) => {
-      ctx.title("Signing in · mobile");
-      ctx.device("mobile");
-      ctx.orientation("portrait");
-      ctx.todos("saucedemo", ...checklist(0, 0));
-      ctx.zoom(1.35);
+      ctx.ui.title("Signing in · mobile");
+      ctx.ui.device("mobile");
+      ctx.ui.orientation("portrait");
+      ctx.ui.todos("saucedemo", ...checklist(0, 0));
+      ctx.ui.zoom(1.35);
       const fromMem = ctx.mem?.get(LoginCreds.key)?.username;
-      ctx.ring("username", {
+      ctx.ui.ring("username", {
         selector: LoginSel.username,
         label: "Username",
         detail: fromMem
@@ -57,12 +57,12 @@ export const deviceShowcase = {
       });
     },
     after: (ctx: StubCtx) => {
-      ctx.todos("saucedemo", ...checklist(1, 1));
+      ctx.ui.todos("saucedemo", ...checklist(1, 1));
     },
   },
   password: {
     before: (ctx: StubCtx) => {
-      ctx.ring("password", {
+      ctx.ui.ring("password", {
         selector: LoginSel.password,
         label: "Password",
         detail: "tone: planned (purple)",
@@ -73,30 +73,28 @@ export const deviceShowcase = {
       });
     },
     after: (ctx: StubCtx) => {
-      ctx.todos("saucedemo", ...checklist(2, 2));
+      ctx.ui.todos("saucedemo", ...checklist(2, 2));
     },
   },
   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.ui.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) => {
-      ctx.title("Inventory · landscape");
-      ctx.orientation("landscape");
-      ctx.todos("saucedemo", ...checklist(3, 3));
-      ctx.ring("shelf", {
+      ctx.ui.title("Inventory · landscape");
+      ctx.ui.orientation("landscape");
+      ctx.ui.todos("saucedemo", ...checklist(3, 3));
+      ctx.ui.ring("shelf", {
         selector: ".inventory_list",
         label: "Product shelf",
         detail: "tone: success (green) - ready to shop",
@@ -109,39 +107,37 @@ export const deviceShowcase = {
   },
   addToCart: {
     before: (ctx: StubCtx) => {
-      ctx.title("Pick a product · tablet");
-      ctx.device("tablet");
-      ctx.orientation("portrait");
-      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.ui.title("Pick a product · tablet");
+      ctx.ui.device("tablet");
+      ctx.ui.orientation("portrait");
+      ctx.ui.todos("saucedemo", ...checklist(3, 3));
+      ctx.ui.zoom(1.35);
+      ctx.ui.zoomOut(false);
+      ctx.ui.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.ui.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) => {
-      ctx.title("In the cart");
-      ctx.todos("saucedemo", ...checklist(4, 4));
-      ctx.zoomOut(false);
-      ctx.ring("badge", {
+      ctx.ui.title("In the cart");
+      ctx.ui.todos("saucedemo", ...checklist(4, 4));
+      ctx.ui.zoomOut(false);
+      ctx.ui.ring("badge", {
         selector: InventorySel.cartBadge,
         label: "Cart badge",
         detail: "tone: success (green) - count updated",
@@ -154,30 +150,28 @@ export const deviceShowcase = {
   },
   openCart: {
     before: (ctx: StubCtx) => {
-      ctx.title("Open cart · landscape");
-      ctx.orientation("landscape");
-      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.ui.title("Open cart · landscape");
+      ctx.ui.orientation("landscape");
+      ctx.ui.todos("saucedemo", ...checklist(5, 5));
+      ctx.ui.zoom(1.4);
+      ctx.ui.zoomOut(false);
+      ctx.ui.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) => {
-      ctx.title("Your cart · desktop");
-      ctx.hideDevice();
-      ctx.hideTodos();
-      ctx.zoomOut(true);
-      ctx.ring("items", {
+      ctx.ui.title("Your cart · desktop");
+      ctx.ui.hideDevice();
+      ctx.ui.hideTodos();
+      ctx.ui.zoomOut(true);
+      ctx.ui.ring("items", {
         selector: InventorySel.cartItem,
         label: "Cart items",
         detail: "tone: success (green) - product in cart",

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.ui.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.ui.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/examples/saucedemo/src/stubs/login.ts

@@ -3,8 +3,8 @@ import { LoginSel } from "../blocks/saucedemo-web/methods/login.sel.js";
 
 /** What a refused login looks like on screen: the title, a finished checklist and the error banner. */
 export function loginRefused(ctx: StubCtx): void {
-  ctx.title("Login blocked");
-  ctx.todos(
+  ctx.ui.title("Login blocked");
+  ctx.ui.todos(
     "saucedemo",
     [
       { id: "login-user", text: "Enter username", done: true },
@@ -13,7 +13,7 @@ export function loginRefused(ctx: StubCtx): void {
     ],
     { title: "Sign in", style: "checklist" },
   );
-  ctx.ring("error", {
+  ctx.ui.ring("error", {
     selector: LoginSel.errorBanner,
     label: "Login error banner",
     detail: "tone: danger (red)",
@@ -25,8 +25,8 @@ export function loginRefused(ctx: StubCtx): void {
 
 /** Rings the error banner when the login step itself throws. */
 export function loginFailed(ctx: StubCtx): void {
-  ctx.title("Login failed");
-  ctx.ring("error", {
+  ctx.ui.title("Login failed");
+  ctx.ui.ring("error", {
     selector: LoginSel.errorBanner,
     label: "Login error banner",
     detail: "tone: danger (red)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.16.1",
+  "version": "0.16.4",
   "type": "module",
   "engines": {
     "node": ">=22"
@@ -14,6 +14,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./beta": {
+      "types": "./dist/beta.d.ts",
+      "default": "./dist/beta.js"
+    },
     "./runner": {
       "default": "./dist/runner/runner.js"
     }

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/api-demo.flow.ts

@@ -32,7 +32,7 @@ export const apiDemoEpisode = engine
   .start()
   .method(
     CheckBackendHealth.stubBefore((ctx) => {
-      ctx.title("Checking backend health · real HTTP request, no browser");
+      ctx.ui.title("Checking backend health · real HTTP request, no browser");
     }),
   )
   .end();

package/templates/quickstart/src/flows/cart-bulk.flow.ts

@@ -10,7 +10,7 @@ export const cartBulkEpisode = engine
   .start()
   .method(
     AddAllToCartBlock.stubBefore((ctx) =>
-      ctx.title("Cart bulk add/remove all"),
+      ctx.ui.title("Cart bulk add/remove all"),
     ),
   )
   .method(RemoveAllFromCartBlock)

package/templates/quickstart/src/flows/cart-continue.flow.ts

@@ -7,7 +7,7 @@ export const cartContinueFlow = engine
   .map()
   .start()
   .gotoPage(
-    NavCartBlock.stubBefore((ctx) => ctx.title("Cart then continue shopping")),
+    NavCartBlock.stubBefore((ctx) => ctx.ui.title("Cart then continue shopping")),
   )
   .gotoPage(NavContinueShoppingBlock)
   .end();

package/templates/quickstart/src/flows/catalog-logout.flow.ts

@@ -9,7 +9,7 @@ export const catalogLogoutFlow = engine
   .start()
   .gotoPage(
     NavItemDetailBlock.stubBefore((ctx) =>
-      ctx.title("Catalog browse then logout"),
+      ctx.ui.title("Catalog browse then logout"),
     ),
   )
   .gotoPage(NavBackToInventoryBlock)

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. */
@@ -20,7 +21,7 @@ export const checkoutThenBrowseAgainFlow = engine
   .start()
   .gotoPage(
     NavLoginBlock.stubBefore((ctx) =>
-      ctx.title(
+      ctx.ui.title(
         "Owner: Checkout, then click Back Home (click-based NavBlock demo)",
       ),
     ),
@@ -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
@@ -20,7 +21,7 @@ export const checkoutFlow = engine
   .gotoPage(NavLoginBlock, { ff: true })
   .method(
     FillUsernameBlock.stubBefore((ctx) => {
-      ctx.ring("username", {
+      ctx.ui.ring("username", {
         selector: LoginSel.username,
         label: "Demo user",
         detail:
@@ -34,7 +35,7 @@ export const checkoutFlow = engine
   )
   .method(
     FillPasswordBlock.stubBefore((ctx) => {
-      ctx.ring("password", {
+      ctx.ui.ring("password", {
         selector: LoginSel.password,
         label: "Password",
         detail: "Filled from Mem credentials.",
@@ -46,7 +47,7 @@ export const checkoutFlow = engine
   )
   .method(
     SubmitLoginForFlow.stubBefore((ctx) => {
-      ctx.ring("submit", {
+      ctx.ui.ring("submit", {
         selector: LoginSel.loginButton,
         label: "Sign in",
         tag: "GATE",
@@ -58,27 +59,27 @@ export const checkoutFlow = engine
     }),
     { ff: true },
   )
-  .method(AddToCartBlock.stubBefore((ctx) => ctx.title("Owner: Full Checkout")))
+  .method(AddToCartBlock.stubBefore((ctx) => ctx.ui.title("Owner: Full Checkout")))
   .gotoPage(NavCartBlock)
   .gotoPage(NavCheckoutInfoBlock)
   .method(
     FillFirstNameBlock.stubBefore((ctx) => {
-      ctx.caption("Enter the first name on the order");
-      ctx.titlePos("left");
+      ctx.ui.caption("Enter the first name on the order");
+      ctx.ui.titlePos("left");
     }),
   )
   .method(
     FillLastNameBlock.stubBefore((ctx) => {
-      ctx.caption("Enter the last name on the order");
-      ctx.titlePos("center");
+      ctx.ui.caption("Enter the last name on the order");
+      ctx.ui.titlePos("center");
     }),
   )
   .method(
     FillPostalCodeBlock.stubBefore((ctx) => {
-      ctx.caption("Enter a postal code to calculate shipping");
-      ctx.titlePos("right");
+      ctx.ui.caption("Enter a postal code to calculate shipping");
+      ctx.ui.titlePos("right");
     }),
   )
-  .method(SubmitCheckoutInfoBlock.stubBefore((ctx) => ctx.hideCaption()))
-  .method(FinishOrderBlock)
+  .method(SubmitCheckoutInfoBlock.stubBefore((ctx) => ctx.ui.hideCaption()))
+  .method(FinishOrderBlock.stubBefore(placingOrder).stubAfter(orderPlacedYap))
   .end();

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

@@ -9,7 +9,7 @@ import { SubmitLoginForFlow } from "../blocks/saucedemo-web/methods/submit-login
 export const loginFlow = engine
   .map({ memStub: true })
   .start()
-  .gotoPage(NavLoginBlock.stubBefore((ctx) => ctx.title("Sign In")))
+  .gotoPage(NavLoginBlock.stubBefore((ctx) => ctx.ui.title("Sign In")))
   .method(FillUsernameBlock)
   .method(FillPasswordBlock)
   .method(SubmitLoginForFlow)

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

@@ -8,17 +8,18 @@ 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
   .map({ memStub: true })
   .start()
-  .method(AddToCartBlock.stubBefore((ctx) => ctx.title("Shop & Checkout")))
+  .method(AddToCartBlock.stubBefore((ctx) => ctx.ui.title("Shop & Checkout")))
   .gotoPage(NavCartBlock)
   .gotoPage(NavCheckoutInfoBlock)
   .method(FillFirstNameBlock)
   .method(FillLastNameBlock)
   .method(FillPostalCodeBlock)
   .method(SubmitCheckoutInfoBlock)
-  .method(FinishOrderBlock)
+  .method(FinishOrderBlock.stubBefore(placingOrder).stubAfter(orderPlacedYap))
   .end();

package/templates/quickstart/src/flows/stub-on-error.flow.ts

@@ -19,7 +19,7 @@ export const stubOnErrorFlow = engine
   .start()
   .gotoPage(
     NavLoginBlock.stubBefore((ctx) =>
-      ctx.title("stubOnError: locked_out fail rings"),
+      ctx.ui.title("stubOnError: locked_out fail rings"),
     ),
   )
   .method(FillUsernameBlock)

package/templates/quickstart/src/flows/viewer-blocked.flow.ts

@@ -19,7 +19,7 @@ export const viewerBlockedFlow = engine
   .start()
   .gotoPage(
     NavLoginBlock.stubBefore((ctx) =>
-      ctx.title("Viewer: Blocked Login Attempt"),
+      ctx.ui.title("Viewer: Blocked Login Attempt"),
     ),
   )
   .method(FillUsernameBlock)