waygraph 0.15.29 → 0.15.31

package/dist/runner/step-panels.js

@@ -33,7 +33,7 @@ export async function renderBeforeStep(page, info) {
       // flash - it only ever fades in ONCE, the first time this page
       // genuinely has no panel yet (a real navigation wiped the whole
       // document, or this is the very first step).
-      let panel = document.getElementById("wg-panel");
+      let panel = __wgById("wg-panel");
       const isNewPanel = !panel;
       if (!panel) {
         panel = document.createElement("div");
@@ -126,7 +126,7 @@ export async function renderBeforeStep(page, info) {
         ">Auto-advancing...</div>";
       panel.innerHTML = html;
       if (isNewPanel) {
-        document.documentElement.appendChild(panel);
+        __wgAdd(panel);
         requestAnimationFrame(() => panel.classList.add("wg-in"));
       } else {
         panel.classList.add("wg-in");
@@ -204,7 +204,7 @@ export async function renderBeforeStep(page, info) {
       panel.querySelectorAll("textarea[data-key]").forEach((ta) => {
         ta.addEventListener("input", applyKeyPretty);
       });
-      const runBtn = document.getElementById("wg-run");
+      const runBtn = __wgById("wg-run");
       if (runBtn) {
         runBtn.addEventListener("click", () => {
           const edits = {};
@@ -220,7 +220,7 @@ export async function renderBeforeStep(page, info) {
       // still always wins over an active autoplay wait, whichever the
       // checkbox says - this is the "hybrid" control: autoplay is a
       // default, not a lockout.
-      const cb = document.getElementById("wg-autoplay-cb");
+      const cb = __wgById("wg-autoplay-cb");
       if (cb) {
         cb.addEventListener("change", () => {
           try {
@@ -228,8 +228,8 @@ export async function renderBeforeStep(page, info) {
           } catch {
             /* private mode / blocked storage - toggle still works this page */
           }
-          const manual = document.getElementById("wg-gate-manual");
-          const auto = document.getElementById("wg-gate-auto");
+          const manual = __wgById("wg-gate-manual");
+          const auto = __wgById("wg-gate-auto");
           if (manual) manual.style.display = cb.checked ? "none" : "";
           if (auto) auto.style.display = cb.checked ? "" : "none";
         });
@@ -256,8 +256,8 @@ export async function renderBeforeStep(page, info) {
           return {
             ok: !!(panel && textOk && opacityOk),
             beacons,
-            hasRun: !!document.getElementById("wg-run"),
-            readyAttr: document.getElementById("wg-panel")?.getAttribute("data-wg-ready") || null,
+            hasRun: !!__wgById("wg-run"),
+            readyAttr: __wgById("wg-panel")?.getAttribute("data-wg-ready") || null,
           };
         })
         .catch((e) => ({ ok: false, reason: String(e && e.message ? e.message : e) }));
@@ -412,7 +412,7 @@ export async function renderAfterStep(page, info) {
   await page
     .evaluate((info) => {
       // Reused in place - see renderBeforeStep's own comment on this.
-      let panel = document.getElementById("wg-panel");
+      let panel = __wgById("wg-panel");
       const isNewPanel = !panel;
       if (!panel) {
         panel = document.createElement("div");
@@ -497,7 +497,7 @@ export async function renderAfterStep(page, info) {
         resultHtml +
         gateHtml;
       if (isNewPanel) {
-        document.documentElement.appendChild(panel);
+        __wgAdd(panel);
         requestAnimationFrame(() => panel.classList.add("wg-in"));
       } else {
         panel.classList.add("wg-in");
@@ -546,9 +546,9 @@ export async function renderAfterStep(page, info) {
           panel.querySelector(".wg-result-json").style.display = wantPretty ? "none" : "block";
         });
       });
-      const runBtn = document.getElementById("wg-run");
+      const runBtn = __wgById("wg-run");
       if (runBtn) runBtn.addEventListener("click", () => window.__wgNext({}));
-      const cb = document.getElementById("wg-autoplay-cb");
+      const cb = __wgById("wg-autoplay-cb");
       if (cb) {
         cb.addEventListener("change", () => {
           try {
@@ -556,8 +556,8 @@ export async function renderAfterStep(page, info) {
           } catch {
             /* private mode / blocked storage - toggle still works this page */
           }
-          const manual = document.getElementById("wg-gate-manual");
-          const auto = document.getElementById("wg-gate-auto");
+          const manual = __wgById("wg-gate-manual");
+          const auto = __wgById("wg-gate-auto");
           if (manual) manual.style.display = cb.checked ? "none" : "";
           if (auto) auto.style.display = cb.checked ? "" : "none";
         });
@@ -579,7 +579,7 @@ async function renderStepError(page, info) {
   await page
     .evaluate((info) => {
       // Reused in place - see renderBeforeStep's own comment on this.
-      let panel = document.getElementById("wg-panel");
+      let panel = __wgById("wg-panel");
       const isNewPanel = !panel;
       if (!panel) {
         panel = document.createElement("div");
@@ -631,7 +631,7 @@ async function renderStepError(page, info) {
         "<button id=\"wg-run\" class=\"wg-error-stop\">Stop</button>" +
         "</div>";
       if (isNewPanel) {
-        document.documentElement.appendChild(panel);
+        __wgAdd(panel);
         requestAnimationFrame(() => panel.classList.add("wg-in"));
       } else {
         panel.classList.add("wg-in");
@@ -651,9 +651,9 @@ async function renderStepError(page, info) {
           ready: true,
         });
       }
-      const runBtn = document.getElementById("wg-run");
+      const runBtn = __wgById("wg-run");
       if (runBtn) runBtn.addEventListener("click", () => window.__wgNext({}));
-      const retryBtn = document.getElementById("wg-error-retry");
+      const retryBtn = __wgById("wg-error-retry");
       if (retryBtn) retryBtn.addEventListener("click", () => window.__wgNext({ __wgRetry: "1" }));
     }, errorPayload)
     .catch(() => {});

package/dist/runner/teardown.js

@@ -38,17 +38,17 @@ import { formatHighlightCaption } from "../highlights.js";
 export async function markStepRunning(page, _opts) {
   await page
     .evaluate(() => {
-      const runBtn = document.getElementById("wg-run");
+      const runBtn = __wgById("wg-run");
       if (runBtn) {
         runBtn.disabled = true;
         runBtn.textContent = "Running \u25B6";
       }
-      const autoEl = document.getElementById("wg-gate-auto");
+      const autoEl = __wgById("wg-gate-auto");
       if (autoEl) autoEl.textContent = "Running...";
-      document.querySelectorAll("#wg-panel textarea[data-key]").forEach((ta) => {
+      __wgQA("#wg-panel textarea[data-key]").forEach((ta) => {
         ta.disabled = true;
       });
-      const panel = document.getElementById("wg-panel");
+      const panel = __wgById("wg-panel");
       if (panel) {
         panel.classList.add("wg-collapsed");
         panel.setAttribute("data-wg-collapsed", "1");
@@ -83,13 +83,13 @@ export async function markStepRunning(page, _opts) {
 export async function restoreTheaterAfterNavigation(page, todoDockRef, deviceRef, stubBeforeRef) {
   const needs =
     (await page
-      .evaluate(() => !window.__wgSyncTodos || !document.getElementById("wg-ring"))
+      .evaluate(() => !window.__wgSyncTodos || !__wgById("wg-ring"))
       .catch(() => true)) || false;
   if (!needs) {
     // Overlay survived (SPA / no full document wipe) - still refresh dock
     // if Node has a carry and the DOM lost .wg-todo-dock.
     const hasDock = await page
-      .evaluate(() => !!document.querySelector(".wg-todo-dock, #wg-todo-dock"))
+      .evaluate(() => !!__wgQ(".wg-todo-dock, #wg-todo-dock"))
       .catch(() => false);
     if (hasDock || !todoDockRef || !todoDockRef.current) return;
   }
@@ -162,10 +162,10 @@ export async function teardownOverlay(page) {
         "wg-device-toast",
         "wg-device-badge",
       ]) {
-        const el = document.getElementById(id);
+        const el = __wgById(id);
         if (el) el.remove();
       }
-      document.querySelectorAll(".wg-todo-dock").forEach((el) => el.remove());
+      __wgQA(".wg-todo-dock").forEach((el) => el.remove());
       document.documentElement.classList.remove("wg-video-device-stage");
     })
     .catch(() => {});

package/dist/runner/todo-dock.js

@@ -115,7 +115,7 @@ export async function syncTodoDockAdvance(page, todoDockRef, stubIndex, stub) {
 export async function probeTodoDocksOnPage(page) {
   return page
     .evaluate(() => {
-      const docks = [...document.querySelectorAll(".wg-todo-dock, #wg-todo-dock")];
+      const docks = [...__wgQA(".wg-todo-dock, #wg-todo-dock")];
       return docks.map((el) => {
         const r = el.getBoundingClientRect();
         const items = el.querySelectorAll("li");

package/dist/step-overlay.js

@@ -1,38 +1,40 @@
+import { ensureShadowRoot } from "./ui/shadow.js";
 import { composeStepOverlay } from "./ui/compose.js";
 const RING_CSS = composeStepOverlay();
 const FAVICON = "data:image/svg+xml," +
     encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='#7C3AED'/></svg>");
 export async function installDemoChrome(page, title = "waygraph auto", options = {}) {
     const showBanner = options.banner !== false;
-    await page.addStyleTag({ content: RING_CSS }).catch(() => { });
+    await ensureShadowRoot(page);
+    await page.evaluate(([css, key]) => __wgCss(css, key), [RING_CSS, "wg-overlay-css"]).catch(() => { });
     await page
         .evaluate(({ title, favicon, showBanner }) => {
-        if (!document.getElementById("wg-ring")) {
+        if (!__wgById("wg-ring")) {
             const ring = document.createElement("div");
             ring.id = "wg-ring";
-            document.documentElement.appendChild(ring);
+            __wgAdd(ring);
         }
-        if (!document.getElementById("wg-ring-label")) {
+        if (!__wgById("wg-ring-label")) {
             const ringLabel = document.createElement("div");
             ringLabel.id = "wg-ring-label";
-            document.documentElement.appendChild(ringLabel);
+            __wgAdd(ringLabel);
         }
-        if (!document.getElementById("wg-cursor")) {
+        if (!__wgById("wg-cursor")) {
             const cursor = document.createElement("div");
             cursor.id = "wg-cursor";
             cursor.innerHTML =
                 "<svg viewBox='0 0 32 32' width='24' height='24'>" +
                     "<path fill='#0C0C1A' stroke='#fff' stroke-width='1.4' stroke-linejoin='round' " +
                     "d='M6 3.5l1.4 22.5 5.8-5.4 4.2 9.4 3.6-1.6-4.2-9.2H26z'/></svg>";
-            document.documentElement.appendChild(cursor);
+            __wgAdd(cursor);
         }
-        if (!document.getElementById("wg-click-pulse")) {
+        if (!__wgById("wg-click-pulse")) {
             const pulse = document.createElement("div");
             pulse.id = "wg-click-pulse";
-            document.documentElement.appendChild(pulse);
+            __wgAdd(pulse);
         }
         window.__wgMoveCursorTo = (x, y, ms) => {
-            const cursor = document.getElementById("wg-cursor");
+            const cursor = __wgById("wg-cursor");
             if (!cursor)
                 return;
             cursor.style.setProperty("--wg-cursor-ms", (ms || 600) + "ms");
@@ -40,7 +42,7 @@ export async function installDemoChrome(page, title = "waygraph auto", options =
             cursor.style.opacity = "1";
         };
         window.__wgClickPulse = (x, y, tone) => {
-            const pulse = document.getElementById("wg-click-pulse");
+            const pulse = __wgById("wg-click-pulse");
             if (!pulse)
                 return;
             const raw = (tone || "planned") + "";
@@ -59,8 +61,8 @@ export async function installDemoChrome(page, title = "waygraph auto", options =
             pulse.classList.add("wg-pulse");
         };
         window.__wgPositionRing = (box, label, tone, style) => {
-            const ring = document.getElementById("wg-ring");
-            const ringLabel = document.getElementById("wg-ring-label");
+            const ring = __wgById("wg-ring");
+            const ringLabel = __wgById("wg-ring-label");
             if (!ring || !ringLabel)
                 return;
             const raw = (tone || "planned") + "";
@@ -92,25 +94,25 @@ export async function installDemoChrome(page, title = "waygraph auto", options =
             ringLabel.style.opacity = "1";
         };
         window.__wgHideRing = () => {
-            const ring = document.getElementById("wg-ring");
-            const ringLabel = document.getElementById("wg-ring-label");
+            const ring = __wgById("wg-ring");
+            const ringLabel = __wgById("wg-ring-label");
             if (ring)
                 ring.style.opacity = "0";
             if (ringLabel)
                 ringLabel.style.opacity = "0";
         };
-        if (showBanner && title && !document.getElementById("wg-banner")) {
+        if (showBanner && title && !__wgById("wg-banner")) {
             const banner = document.createElement("div");
             banner.id = "wg-banner";
             banner.innerHTML =
                 "<span class='wg-banner-tag'>waygraph auto</span><span>" + title + "</span>";
-            document.documentElement.appendChild(banner);
+            __wgAdd(banner);
             banner.setAttribute("data-wg-ui", "1");
             banner.setAttribute("data-wg-modal", "banner");
             banner.setAttribute("data-wg-ready", "1");
         }
         else {
-            const existing = document.getElementById("wg-banner");
+            const existing = __wgById("wg-banner");
             if (existing) {
                 existing.setAttribute("data-wg-ui", "1");
                 existing.setAttribute("data-wg-modal", "banner");

package/dist/ui/shadow.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shadow-DOM mount for every waygraph overlay element. Overlay UI lives in one open shadow root under
+ * `<div id="wg-root">`, so the host page's CSS can't restyle it and ours can't leak out.
+ *
+ * `installShadowRoot` runs INSIDE the page (page.evaluate / addInitScript), so it must stay
+ * self-contained. It defines the `__wg*` helpers the overlay code uses in place of `document.*`:
+ * lookups check the shadow root first and fall back to the light DOM (the device stage shell and
+ * host-page markers such as `[data-wg-zoomed]` intentionally stay in the light DOM).
+ */
+import type { BrowserContext, Page } from "@playwright/test";
+export declare function installShadowRoot(): void;
+/** Idempotent; call before any overlay install on a page. */
+export declare function ensureShadowRoot(page: Page): Promise<void>;
+/** Also define the helpers on every future document (pilot overlay persists across navigations). */
+export declare function installShadowRootEverywhere(context: BrowserContext): Promise<void>;

package/dist/ui/shadow.js

@@ -0,0 +1,42 @@
+export function installShadowRoot() {
+    const w = window;
+    if (w.__wgById)
+        return;
+    const root = () => {
+        let host = document.getElementById("wg-root");
+        if (!host || !host.shadowRoot) {
+            host?.remove();
+            host = document.createElement("div");
+            host.id = "wg-root";
+            // No box of its own: children are position:fixed, so the host must never affect page layout.
+            host.style.cssText = "display:contents";
+            host.attachShadow({ mode: "open" });
+            document.documentElement.appendChild(host);
+        }
+        return host.shadowRoot;
+    };
+    w.__wgRoot = root;
+    w.__wgById = (id) => root().getElementById(id) || document.getElementById(id);
+    w.__wgQ = (sel) => root().querySelector(sel) || document.querySelector(sel);
+    w.__wgQA = (sel) => Array.from(root().querySelectorAll(sel)).concat(Array.from(document.querySelectorAll(sel)));
+    w.__wgAdd = (node) => root().appendChild(node);
+    w.__wgCss = (css, key) => {
+        const r = root();
+        let style = Array.from(r.children).find((c) => c.tagName === "STYLE" && c.getAttribute("data-key") === key);
+        if (!style) {
+            style = document.createElement("style");
+            style.setAttribute("data-key", key);
+            r.insertBefore(style, r.firstChild);
+        }
+        if (style.textContent !== css)
+            style.textContent = css;
+    };
+}
+/** Idempotent; call before any overlay install on a page. */
+export async function ensureShadowRoot(page) {
+    await page.evaluate(installShadowRoot).catch(() => { });
+}
+/** Also define the helpers on every future document (pilot overlay persists across navigations). */
+export async function installShadowRootEverywhere(context) {
+    await context.addInitScript(installShadowRoot);
+}

package/package.json

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