waygraph 0.16.2 → 0.16.4

package/examples/saucedemo/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/examples/saucedemo/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/examples/saucedemo/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/examples/saucedemo/src/flows/checkout-then-browse-again.flow.ts

@@ -21,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)",
       ),
     ),

package/examples/saucedemo/src/flows/checkout.flow.ts

@@ -21,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:
@@ -35,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.",
@@ -47,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",
@@ -59,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(SubmitCheckoutInfoBlock.stubBefore((ctx) => ctx.ui.hideCaption()))
   .method(FinishOrderBlock.stubBefore(placingOrder).stubAfter(orderPlacedYap))
   .end();

package/examples/saucedemo/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/examples/saucedemo/src/flows/shop.flow.ts

@@ -14,7 +14,7 @@ import { orderPlacedYap, placingOrder } from "../stubs/finish-order.js";
 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)

package/examples/saucedemo/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/examples/saucedemo/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)

package/examples/saucedemo/src/states/checkout.reads.ts

@@ -0,0 +1,9 @@
+import { reads } from "waygraph/beta";
+
+// What the store's pages show, by namespace: the Read Blocks fill these, `pilot read` returns them as JSON.
+export const Catalog = reads("catalog")<{
+  items: { name: string; price: number; inCart: boolean }[];
+  sort: string;
+}>();
+export const Cart = reads("cart")<{ lines: { name: string; qty: number; price: number }[] }>();
+export const Header = reads("header")<{ title: string; cartCount: number }>();

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,12 +73,12 @@ export const deviceShowcase = {
       });
     },
     after: (ctx: StubCtx) => {
-      ctx.todos("saucedemo", ...checklist(2, 2));
+      ctx.ui.todos("saucedemo", ...checklist(2, 2));
     },
   },
   submit: {
     before: (ctx: StubCtx) => {
-      ctx.ring("submit", {
+      ctx.ui.ring("submit", {
         selector: LoginSel.loginButton,
         label: "Login",
         detail: "tone: warning (yellow)",
@@ -91,10 +91,10 @@ export const deviceShowcase = {
       });
     },
     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",
@@ -107,13 +107,13 @@ 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.ring("product", {
+      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)",
@@ -122,7 +122,7 @@ export const deviceShowcase = {
         zoom: 1.45,
         zoomOut: false,
       });
-      ctx.ring("add", {
+      ctx.ui.ring("add", {
         selector: InventorySel.addBtn(PRODUCT_ID),
         label: "Add to cart",
         detail: "tone: success (green)",
@@ -134,10 +134,10 @@ export const deviceShowcase = {
       });
     },
     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",
@@ -150,12 +150,12 @@ 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.ring("cart", {
+      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",
@@ -167,11 +167,11 @@ export const deviceShowcase = {
       });
     },
     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

@@ -3,12 +3,12 @@ import { CheckoutOverviewSel } from "../blocks/saucedemo-web/checkout-step-two/m
 
 /** Rings Finish while the order is placed. */
 export function placingOrder(ctx: StubCtx): void {
-  ctx.ring("finish", { selector: CheckoutOverviewSel.finishBtn, label: "Placing the order" });
+  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.slides([
+  ctx.ui.slides([
     {
       caption: "Checkout is a short pipeline",
       detail: "Cart -> info -> overview -> done. You just placed the order.",

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.2",
+  "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/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

@@ -21,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)",
       ),
     ),

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

@@ -21,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:
@@ -35,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.",
@@ -47,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",
@@ -59,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(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

@@ -14,7 +14,7 @@ import { orderPlacedYap, placingOrder } from "../stubs/finish-order.js";
 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)

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)

package/templates/quickstart/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,12 +73,12 @@ export const deviceShowcase = {
       });
     },
     after: (ctx: StubCtx) => {
-      ctx.todos("saucedemo", ...checklist(2, 2));
+      ctx.ui.todos("saucedemo", ...checklist(2, 2));
     },
   },
   submit: {
     before: (ctx: StubCtx) => {
-      ctx.ring("submit", {
+      ctx.ui.ring("submit", {
         selector: LoginSel.loginButton,
         label: "Login",
         detail: "tone: warning (yellow)",
@@ -91,10 +91,10 @@ export const deviceShowcase = {
       });
     },
     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",
@@ -107,13 +107,13 @@ 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.ring("product", {
+      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)",
@@ -122,7 +122,7 @@ export const deviceShowcase = {
         zoom: 1.45,
         zoomOut: false,
       });
-      ctx.ring("add", {
+      ctx.ui.ring("add", {
         selector: InventorySel.addBtn(PRODUCT_ID),
         label: "Add to cart",
         detail: "tone: success (green)",
@@ -134,10 +134,10 @@ export const deviceShowcase = {
       });
     },
     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",
@@ -150,12 +150,12 @@ 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.ring("cart", {
+      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",
@@ -167,11 +167,11 @@ export const deviceShowcase = {
       });
     },
     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",