waygraph 0.15.46 → 0.15.47

package/dist/pilot-overlay/fixtures.js

@@ -104,37 +104,21 @@ export async function showPilotFixtures(page, fixtures) {
     const bannerPos = fixtures.clear ? undefined : fixtures.titlePos;
     const bannerHidden = !!fixtures.clear || !!fixtures.bannerUi?.hidden;
     const bannerCollision = fixtures.bannerUi?.collision !== false;
+    // Same #wg-banner installer the demo runner uses (runner/inpage/banner.js) - not a separate
+    // re-implementation. `tag: "waygraph pilot"` is the only Pilot-specific bit.
+    if (bannerTitle !== undefined || bannerHidden) {
+        const { installBanner } = await import("../runner/inpage/banner.js");
+        await page
+            .evaluate(installBanner, {
+            title: bannerTitle,
+            bannerPos: bannerPos || "left",
+            bannerUi: { hidden: bannerHidden, collision: bannerCollision, ...(bannerPos ? { pos: bannerPos } : {}) },
+            tag: "waygraph pilot",
+        })
+            .catch(() => { });
+    }
     return page
-        .evaluate(({ rings, todoGroups, todoPos, holdMs, zoom, zoomSelector, zoomOut, clearAll, todoUi, bannerTitle, bannerPos, bannerHidden, bannerCollision, }) => {
-        // Same #wg-banner element/CSS the demo runner paints (ui/css/banner.css, already in the
-        // shared bundle) - so ctx.title / ctx.titlePos / ctx.bannerUi behave identically on a Pilot
-        // session, not a separate re-implementation.
-        if (bannerHidden) {
-            const b = __wgById("wg-banner");
-            if (b)
-                b.style.display = "none";
-        }
-        else if (bannerTitle) {
-            let banner = __wgById("wg-banner");
-            if (!banner) {
-                banner = document.createElement("div");
-                banner.id = "wg-banner";
-                const tag = document.createElement("span");
-                tag.className = "wg-banner-tag";
-                tag.textContent = "waygraph pilot";
-                const text = document.createElement("span");
-                text.className = "wg-banner-text";
-                banner.appendChild(tag);
-                banner.appendChild(text);
-                __wgAdd(banner);
-            }
-            banner.style.display = "";
-            banner.dataset.pos = bannerPos || banner.dataset.pos || "left";
-            banner.dataset.collision = bannerCollision ? "1" : "0";
-            const textEl = banner.querySelector(".wg-banner-text");
-            if (textEl)
-                textEl.textContent = bannerTitle;
-        }
+        .evaluate(({ rings, todoGroups, todoPos, holdMs, zoom, zoomSelector, zoomOut, clearAll, todoUi, }) => {
         const w = window;
         if (w.__wgPilotFxHideTimer)
             clearTimeout(w.__wgPilotFxHideTimer);
@@ -346,10 +330,6 @@ export async function showPilotFixtures(page, fixtures) {
         zoomOut,
         clearAll: fixtures.clear === true,
         todoUi,
-        bannerTitle,
-        bannerPos,
-        bannerHidden,
-        bannerCollision,
     })
         .catch(() => ({ painted: 0, missing: rings.map((r) => r.selector) }));
 }

package/dist/runner/inpage/banner.d.ts

@@ -0,0 +1,13 @@
+/** In-page installer (page.evaluate target) - see banner.js's own header. Creates/updates #wg-banner
+ * (click-to-move position, localStorage-persisted, authored titlePos/bannerUi support). `tag`
+ * overrides the small caption above the title (default "waygraph demo"). */
+export function installBanner(args: {
+  title?: string | undefined;
+  favicon?: string | undefined;
+  bannerPos?: string | undefined;
+  todoPos?: string | undefined;
+  envAutoplay?: boolean | undefined;
+  todoDockUi?: unknown;
+  bannerUi?: { hidden?: boolean | undefined; collision?: boolean | undefined; pos?: string | undefined } | undefined;
+  tag?: string | undefined;
+}): void;

package/dist/runner/inpage/banner.js

@@ -1,7 +1,7 @@
 // In-page installer (runs inside the browser via page.evaluate): must stay self-contained - no module-scope closure.
 // Split out of the former single installOverlay evaluate (see src/ARCHITECTURE.md). Shares state only via window.__wg*.
 /* eslint-disable no-unused-vars */
-export function installBanner({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi, bannerUi }) {
+export function installBanner({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi, bannerUi, tag: bannerTag }) {
         const POSITIONS = ["left", "center", "right"];
         const applyPos = (el, pos) => {
           el.dataset.pos = pos;
@@ -34,7 +34,7 @@ export function installBanner({ title, favicon, bannerPos, todoPos, envAutoplay,
             });
             const tag = document.createElement("span");
             tag.className = "wg-banner-tag";
-            tag.textContent = "waygraph demo";
+            tag.textContent = bannerTag || "waygraph demo";
             const text = document.createElement("span");
             text.className = "wg-banner-text";
             text.textContent = title;

package/examples/saucedemo/.waygraph-auto/02f7dd22.log

@@ -0,0 +1,20 @@
+[13:39:10.711] waygraph pilot: stub.before ctx.title("Signing in · mobile")
+[13:39:10.717] waygraph pilot: stub.before ctx.todos n=6 index=0
+[13:39:10.719] waygraph pilot: stub.before ctx.device(mobile)
+[13:39:10.719] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:39:10.719] waygraph pilot: stub.before ring #user-name tone=info label="Username"
+[13:39:11.863] waygraph pilot: stub.after ctx.todos n=6 index=1
+[13:39:13.470] waygraph pilot: stub.before ring #password tone=planned label="Password"
+[13:39:13.668] waygraph pilot: stub.after ctx.todos n=6 index=2
+[13:39:15.550] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
+[13:39:15.936] waygraph pilot: stub.after ctx.title("Inventory · landscape")
+[13:39:15.936] waygraph pilot: stub.after ctx.todos n=6 index=3
+[13:39:15.936] waygraph pilot: stub.after ctx.device(mobile)
+[13:39:15.936] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
+[13:39:20.251] waygraph pilot: stub.before ctx.title("Open cart · landscape")
+[13:39:20.252] waygraph pilot: stub.before ctx.todos n=6 index=5
+[13:39:20.252] waygraph pilot: stub.before ctx.device(mobile)
+[13:39:20.252] waygraph pilot: stub.before ctx.zoom(1.4)
+[13:39:20.252] waygraph pilot: stub.before ring .shopping_cart_link tone=planned label="Cart"
+[13:39:20.880] waygraph pilot: stub.after ctx.title("Your cart · desktop")
+[13:39:20.880] waygraph pilot: stub.after ring .cart_item tone=success label="Cart items"

package/examples/saucedemo/.waygraph-auto/61333142.log

@@ -0,0 +1,5 @@
+[13:38:59.878] waygraph pilot: highlight ctx.todos n=3 index=0
+[13:38:59.879] waygraph pilot: highlight ring #user-name tone=planned label="Username"
+[13:38:59.879] waygraph pilot: highlight ring #password tone=info label="Password"
+[13:39:04.334] waygraph pilot: highlight ring #no-such-element-waygraph tone=danger label="Gone"
+[13:39:07.137] waygraph pilot: highlight ring #login-button tone=success label="Login"

package/examples/saucedemo/.waygraph-auto/61937e83.log

@@ -0,0 +1,22 @@
+[13:39:08.704] waygraph pilot: stub.before ctx.title("Signing in · mobile")
+[13:39:08.704] waygraph pilot: stub.before ctx.todos n=6 index=0
+[13:39:08.704] waygraph pilot: stub.before ctx.device(mobile)
+[13:39:08.704] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:39:08.704] waygraph pilot: stub.before ring #user-name tone=info label="Username"
+[13:39:10.099] waygraph pilot: stub.after ctx.todos n=6 index=1
+[13:39:12.713] waygraph pilot: stub.before ring #password tone=planned label="Password"
+[13:39:12.931] waygraph pilot: stub.after ctx.todos n=6 index=2
+[13:39:16.082] waygraph pilot: stub.before ring #login-button tone=warning label="Login"
+[13:39:16.398] waygraph pilot: stub.after ctx.title("Inventory · landscape")
+[13:39:16.398] waygraph pilot: stub.after ctx.todos n=6 index=3
+[13:39:16.398] waygraph pilot: stub.after ctx.device(mobile)
+[13:39:16.398] waygraph pilot: stub.after ring .inventory_list tone=success label="Product shelf"
+[13:39:23.208] waygraph pilot: stub.before ctx.title("Pick a product · tablet")
+[13:39:23.209] waygraph pilot: stub.before ctx.todos n=6 index=3
+[13:39:23.209] waygraph pilot: stub.before ctx.device(tablet)
+[13:39:23.209] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:39:23.209] waygraph pilot: stub.before ring div.inventory_item:has(button[data-test="add-to-cart-sauce-labs-backpack"], button[data-test="remove-sauce-labs-backpack"]) .inventory_item_name tone=info label="Sauce Labs Backpack"
+[13:39:23.209] waygraph pilot: stub.before ring [data-test="add-to-cart-sauce-labs-backpack"] tone=success label="Add to cart"
+[13:39:24.455] waygraph pilot: stub.after ctx.title("In the cart")
+[13:39:24.456] waygraph pilot: stub.after ctx.todos n=6 index=4
+[13:39:24.456] waygraph pilot: stub.after ring .shopping_cart_badge tone=success label="Cart badge"

package/examples/saucedemo/.waygraph-auto/8d960d31.log

@@ -0,0 +1 @@
+[13:38:18.838] waygraph pilot: highlight ctx.title("Pilot demo") pos=right

package/examples/saucedemo/.waygraph-auto/ded5511a.log

@@ -0,0 +1,6 @@
+[13:39:57.044] waygraph pilot: stub.before ctx.title("Signing in · mobile")
+[13:39:57.044] waygraph pilot: stub.before ctx.todos n=6 index=0
+[13:39:57.045] waygraph pilot: stub.before ctx.device(mobile)
+[13:39:57.045] waygraph pilot: stub.before ctx.zoom(1.35)
+[13:39:57.045] waygraph pilot: stub.before ring #user-name tone=info label="Username"
+[13:39:58.588] waygraph pilot: stub.after ctx.todos n=6 index=1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waygraph",
-  "version": "0.15.46",
+  "version": "0.15.47",
   "type": "module",
   "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
   "license": "MIT",