waygraph 0.15.30 → 0.15.32

package/dist/runner/inpage/device.js

@@ -10,7 +10,7 @@ export function installDevice({ title, favicon, bannerPos, todoPos, envAutoplay,
               ? payload.sync
               : "keep";
           const device = payload && payload.device ? payload.device : null;
-          const cursor = document.getElementById("wg-cursor");
+          const cursor = __wgById("wg-cursor");
           const MOUSE_SVG =
             "<svg viewBox='0 0 32 32' width='24' height='24'>" +
             "<path fill='#0C0C1A' stroke='#fff' stroke-width='1.4' stroke-linejoin='round' " +
@@ -45,12 +45,12 @@ export function installDevice({ title, favicon, bannerPos, todoPos, envAutoplay,
             }
           };
           const ensureChip = (preset, touch, remain, orientation) => {
-            let badge = document.getElementById("wg-device-badge");
+            let badge = __wgById("wg-device-badge");
             if (preset === "desktop" && !touch) {
               if (badge) {
                 badge.classList.remove("wg-in");
                 setTimeout(() => {
-                  const b = document.getElementById("wg-device-badge");
+                  const b = __wgById("wg-device-badge");
                   if (b) b.remove();
                 }, 320);
               }
@@ -60,7 +60,7 @@ export function installDevice({ title, favicon, bannerPos, todoPos, envAutoplay,
               badge = document.createElement("div");
               badge.id = "wg-device-badge";
               badge.setAttribute("data-wg-ui", "1");
-              document.documentElement.appendChild(badge);
+              __wgAdd(badge);
             }
             badge.dataset.preset = preset;
             badge.dataset.touch = touch ? "1" : "0";
@@ -85,7 +85,7 @@ export function installDevice({ title, favicon, bannerPos, todoPos, envAutoplay,
             badge.classList.add("wg-in");
           };
           const showToast = (preset, touch, title, sub, orientation) => {
-            let toast = document.getElementById("wg-device-toast");
+            let toast = __wgById("wg-device-toast");
             if (toast && toast._wgTimer) {
               clearTimeout(toast._wgTimer);
               toast._wgTimer = null;
@@ -94,10 +94,10 @@ export function installDevice({ title, favicon, bannerPos, todoPos, envAutoplay,
               toast = document.createElement("div");
               toast.id = "wg-device-toast";
               toast.setAttribute("data-wg-ui", "1");
-              document.documentElement.appendChild(toast);
+              __wgAdd(toast);
             }
             // Hide chip while toast is up (same corner).
-            const badge = document.getElementById("wg-device-badge");
+            const badge = __wgById("wg-device-badge");
             if (badge) badge.classList.remove("wg-in");
             toast.dataset.preset = preset;
             toast.innerHTML =
@@ -115,7 +115,7 @@ export function installDevice({ title, favicon, bannerPos, todoPos, envAutoplay,
               toast.classList.add("wg-out");
               toast.classList.remove("wg-in");
               setTimeout(() => {
-                const t = document.getElementById("wg-device-toast");
+                const t = __wgById("wg-device-toast");
                 if (t) t.remove();
                 if (preset !== "desktop" || touch) {
                   ensureChip(preset, touch, true, orientation);
@@ -142,13 +142,13 @@ export function installDevice({ title, favicon, bannerPos, todoPos, envAutoplay,
                 "landscape",
               );
               setTimeout(() => {
-                const badge = document.getElementById("wg-device-badge");
+                const badge = __wgById("wg-device-badge");
                 if (badge) badge.remove();
               }, 2600);
             } else {
-              const badge = document.getElementById("wg-device-badge");
+              const badge = __wgById("wg-device-badge");
               if (badge) badge.remove();
-              const toast = document.getElementById("wg-device-toast");
+              const toast = __wgById("wg-device-toast");
               if (toast) toast.remove();
             }
             window.__wgDevicePreset = "desktop";

package/dist/runner/inpage/panel-chrome.js

@@ -69,7 +69,7 @@ export function installPanelChrome({ title, favicon, bannerPos, todoPos, envAuto
             } catch {
               /* ignore */
             }
-            const runBtn = document.getElementById("wg-run");
+            const runBtn = __wgById("wg-run");
             const show = !!hidden && !auto && !!runBtn;
             miniNext.classList.toggle("wg-mini-next-show", show);
             if (runBtn) {
@@ -125,7 +125,7 @@ export function installPanelChrome({ title, favicon, bannerPos, todoPos, envAuto
             miniNext.dataset.wgWired = "1";
             miniNext.addEventListener("click", (e) => {
               e.stopPropagation();
-              const runBtn = document.getElementById("wg-run");
+              const runBtn = __wgById("wg-run");
               if (runBtn && !runBtn.disabled) {
                 runBtn.click();
                 return;
@@ -133,7 +133,7 @@ export function installPanelChrome({ title, favicon, bannerPos, todoPos, envAuto
               if (typeof window.__wgNext === "function") window.__wgNext({});
             });
           }
-          const autoCb = document.getElementById("wg-autoplay-cb");
+          const autoCb = __wgById("wg-autoplay-cb");
           if (autoCb && !autoCb.dataset.wgMiniWired) {
             autoCb.dataset.wgMiniWired = "1";
             autoCb.addEventListener("change", () => {

package/dist/runner/inpage/stamp.js

@@ -20,7 +20,7 @@ export function installStamp({ title, favicon, bannerPos, todoPos, envAutoplay,
           el.setAttribute("data-wg-ready", meta.ready === false ? "0" : "1");
         };
         window.__wgOverlayBeacon = () => {
-          return Array.from(document.querySelectorAll("[data-wg-ui=\"1\"]")).map((el) => {
+          return Array.from(__wgQA("[data-wg-ui=\"1\"]")).map((el) => {
             const r = el.getBoundingClientRect();
             const st = getComputedStyle(el);
             return {
@@ -41,6 +41,6 @@ export function installStamp({ title, favicon, bannerPos, todoPos, envAutoplay,
             };
           });
         };
-        const existingBanner = document.getElementById("wg-banner");
+        const existingBanner = __wgById("wg-banner");
         if (existingBanner) window.__wgStampModal(existingBanner, "banner", { ready: true });
 }

package/dist/runner/inpage/swipe-zoom.js

@@ -15,7 +15,7 @@ export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutopl
             o.label ||
             (dir === "left" || dir === "right" ? "swipe" : "swipe") +
               (o.hint ? " \u00b7 " + o.hint : "");
-          let layer = document.getElementById("wg-swipe-layer");
+          let layer = __wgById("wg-swipe-layer");
           if (layer && layer._wgTimer) {
             clearTimeout(layer._wgTimer);
             layer._wgTimer = null;
@@ -31,7 +31,7 @@ export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutopl
           lab.textContent = label;
           layer.appendChild(lab);
           layer.appendChild(finger);
-          document.documentElement.appendChild(layer);
+          __wgAdd(layer);
           const vw = window.innerWidth || 390;
           const vh = window.innerHeight || 844;
           const pad = Math.min(vw, vh) * 0.18;
@@ -89,7 +89,7 @@ export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutopl
               finger.style.opacity = "0";
               layer.classList.remove("wg-in");
               layer._wgTimer = setTimeout(() => {
-                const el = document.getElementById("wg-swipe-layer");
+                const el = __wgById("wg-swipe-layer");
                 if (el) el.remove();
               }, 380);
             }
@@ -108,7 +108,7 @@ export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutopl
             delete el.dataset.wgZoomed;
           });
           // Undo any prior shell-camera experiment - restore device fit scale only.
-          const shell = document.getElementById("wg-device-shell");
+          const shell = __wgById("wg-device-shell");
           if (shell && shell.dataset.wgCamBase != null) {
             shell.style.transform = shell.dataset.wgCamBase;
             if (shell.dataset.wgCamOrigin) {
@@ -130,12 +130,12 @@ export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutopl
         window.__wgSetZoomBadge = (scale, sel) => {
           const n = Number(scale);
           const level = Number.isFinite(n) && n > 0 ? n : 1;
-          let badge = document.getElementById("wg-zoom-badge");
+          let badge = __wgById("wg-zoom-badge");
           if (!badge) {
             badge = document.createElement("div");
             badge.id = "wg-zoom-badge";
             badge.setAttribute("data-wg-ui", "1");
-            document.documentElement.appendChild(badge);
+            __wgAdd(badge);
           }
           const zoomed = level > 1.001 || level < 0.999;
           badge.dataset.zoomed = zoomed ? "1" : "0";
@@ -156,12 +156,12 @@ export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutopl
           }
         };
         window.__wgSetTypingBadge = (on, label) => {
-          let badge = document.getElementById("wg-typing-badge");
+          let badge = __wgById("wg-typing-badge");
           if (!on) {
             if (badge) {
               badge.classList.remove("wg-in");
               setTimeout(() => {
-                const b = document.getElementById("wg-typing-badge");
+                const b = __wgById("wg-typing-badge");
                 if (b && !b.classList.contains("wg-in")) b.remove();
               }, 220);
             }
@@ -171,7 +171,7 @@ export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutopl
             badge = document.createElement("div");
             badge.id = "wg-typing-badge";
             badge.setAttribute("data-wg-ui", "1");
-            document.documentElement.appendChild(badge);
+            __wgAdd(badge);
           }
           const text = label ? String(label).slice(0, 40) : "typing";
           badge.innerHTML =
@@ -196,7 +196,7 @@ export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutopl
             el.style.removeProperty("position");
             delete el.dataset.wgZoomed;
           });
-          const shell = document.getElementById("wg-device-shell");
+          const shell = __wgById("wg-device-shell");
           if (shell && shell.dataset.wgCamBase != null) {
             shell.style.transform = shell.dataset.wgCamBase;
             shell.style.transformOrigin = shell.dataset.wgCamOrigin || "center center";

package/dist/runner/inpage/todos.js

@@ -43,10 +43,10 @@ export function installTodos({ title, favicon, bannerPos, todoPos, envAutoplay,
             "_default";
 
           // Drop any in-panel leftover (old builds put #wg-todos in .wg-body).
-          document.querySelectorAll("#wg-panel #wg-todos").forEach((el) => el.remove());
+          __wgQA("#wg-panel #wg-todos").forEach((el) => el.remove());
 
           const allDocks = () =>
-            [...document.querySelectorAll(".wg-todo-dock, #wg-todo-dock")].filter(
+            [...__wgQA(".wg-todo-dock, #wg-todo-dock")].filter(
               (el, i, arr) => arr.indexOf(el) === i,
             );
           const relayoutTodoDocks = () => {
@@ -60,11 +60,11 @@ export function installTodos({ title, favicon, bannerPos, todoPos, envAutoplay,
           const findDock = (key) => {
             if (key === "_default") {
               return (
-                document.querySelector('.wg-todo-dock[data-wg-todo-key="_default"]') ||
-                document.getElementById("wg-todo-dock")
+                __wgQ('.wg-todo-dock[data-wg-todo-key="_default"]') ||
+                __wgById("wg-todo-dock")
               );
             }
-            const all = document.querySelectorAll(".wg-todo-dock");
+            const all = __wgQA(".wg-todo-dock");
             for (let i = 0; i < all.length; i++) {
               if (all[i].getAttribute("data-wg-todo-key") === String(key)) return all[i];
             }
@@ -141,7 +141,7 @@ export function installTodos({ title, favicon, bannerPos, todoPos, envAutoplay,
                 /* ignore */
               }
             });
-            document.documentElement.appendChild(dock);
+            __wgAdd(dock);
           } else if (wantPos) {
             dock.dataset.pos = wantPos;
             try {

package/dist/runner/overlay-css.js

@@ -115,24 +115,6 @@ export const RING_CSS =
   ".wg-todo-dock .wg-todo-dock-title{font:700 11px/1.2 system-ui,sans-serif;color:#c9a6ff;" +
   "letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;}" +
   ".wg-todo-dock .wg-todos-list,#wg-todo-dock #wg-todos,.wg-todo-dock #wg-todos{list-style:none;margin:0;padding:0;background:transparent;border:none;}" +
-  // Video device stage: keep recordVideo size fixed; center a device-sized shell.
-  "html.wg-video-device-stage{background:#0b1220 !important;}" +
-  "html.wg-video-device-stage body{margin:0 !important;min-height:100vh !important;" +
-  "display:flex !important;align-items:center !important;justify-content:center !important;" +
-  "background:#0b1220 !important;overflow:hidden !important;}" +
-  "#wg-device-shell{flex-shrink:0;overflow:auto;background:#fff;" +
-  "border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);" +
-  "transform-origin:center center;" +
-  /* Force radius clip on all corners (Chrome + transform/scale). */
-  "-webkit-mask-image:-webkit-radial-gradient(white,black);" +
-  "isolation:isolate;" +
-  "transition:border-radius .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease," +
-  "transform .55s cubic-bezier(.22,1,.36,1),width .5s ease,height .5s ease,max-width .5s ease,max-height .5s ease;}" +
-  "#wg-device-shell.wg-shell-enter{border-radius:0;box-shadow:none;}" +
-  "#wg-device-shell.wg-shell-shutter-out{border-radius:0 !important;" +
-  "box-shadow:none !important;outline:none !important;border:none !important;}" +
-  "#wg-device-shell.wg-shell-desktop-flat{border-radius:0 !important;box-shadow:none !important;" +
-  "outline:none !important;border:none !important;-webkit-mask-image:none;}" +
   // Always-on zoom HUD - bottom-right (top-left is crowded: todos + banners).
   "#wg-zoom-badge{position:fixed;z-index:2147483646;bottom:14px;right:14px;" +
   "display:flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;" +
@@ -329,3 +311,24 @@ export const WAYGRAPH_FAVICON =
     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>" +
       "<circle cx='16' cy='16' r='14' fill='#7C3AED'/></svg>",
   );
+
+// Rules that style the HOST page (device stage) - these must stay in the light DOM, outside the overlay's shadow root.
+export const HOST_CSS =
+  // Video device stage: keep recordVideo size fixed; center a device-sized shell.
+  "html.wg-video-device-stage{background:#0b1220 !important;}" +
+  "html.wg-video-device-stage body{margin:0 !important;min-height:100vh !important;" +
+  "display:flex !important;align-items:center !important;justify-content:center !important;" +
+  "background:#0b1220 !important;overflow:hidden !important;}" +
+  "#wg-device-shell{flex-shrink:0;overflow:auto;background:#fff;" +
+  "border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);" +
+  "transform-origin:center center;" +
+  /* Force radius clip on all corners (Chrome + transform/scale). */
+  "-webkit-mask-image:-webkit-radial-gradient(white,black);" +
+  "isolation:isolate;" +
+  "transition:border-radius .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease," +
+  "transform .55s cubic-bezier(.22,1,.36,1),width .5s ease,height .5s ease,max-width .5s ease,max-height .5s ease;}" +
+  "#wg-device-shell.wg-shell-enter{border-radius:0;box-shadow:none;}" +
+  "#wg-device-shell.wg-shell-shutter-out{border-radius:0 !important;" +
+  "box-shadow:none !important;outline:none !important;border:none !important;}" +
+  "#wg-device-shell.wg-shell-desktop-flat{border-radius:0 !important;box-shadow:none !important;" +
+  "outline:none !important;border:none !important;-webkit-mask-image:none;}";

package/dist/runner/overlay-install.js

@@ -1,6 +1,7 @@
 // Moved verbatim from the former CHAIN_RUNNER_SCRIPT template string in cli.ts (see src/ARCHITECTURE.md).
 // Runs inside the target project's own waygraph copy - keep it dependency-light and self-contained.
-import { RING_CSS, WAYGRAPH_FAVICON } from "./overlay-css.js";
+import { HOST_CSS, RING_CSS, WAYGRAPH_FAVICON } from "./overlay-css.js";
+import { ensureShadowRoot } from "../ui/shadow.js";
 import { resolveTodoDockUi } from "../highlights.js";
 import { installCore } from "./inpage/core.js";
 import { installSwipeZoom } from "./inpage/swipe-zoom.js";
@@ -12,7 +13,9 @@ import { installDevice } from "./inpage/device.js";
 import { applyVideoDeviceStage } from "./device-stage.js";
 
 export async function installOverlay(page, title) {
-  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.addStyleTag({ content: HOST_CSS }).catch(() => {});
   // Default top-left; override with WAYGRAPH_TITLE_POS=left|center|right.
   // Click cycles left -> center -> right (persisted in localStorage so a
   // navigation that rebuilds the banner keeps the human's last pick).

package/dist/runner/rings.js

@@ -247,7 +247,7 @@ export async function cycleHighlightRings(page, highlights, gatesFast, opts) {
                 return;
               }
               // Fallback for pages that never got installOverlay sync helper.
-              const ul = document.getElementById("wg-todos");
+              const ul = __wgById("wg-todos");
               if (!ul) return;
               ul.innerHTML = todos
                 .map((t) => {

package/dist/runner/slides.js

@@ -66,7 +66,7 @@ export async function presentSlides(page, slides, _gate, opts) {
     }
     await page.evaluate(
       (info) => {
-        let panel = document.getElementById("wg-panel");
+        let panel = __wgById("wg-panel");
         const isNew = !panel;
         if (!panel) {
           panel = document.createElement("div");
@@ -139,7 +139,7 @@ export async function presentSlides(page, slides, _gate, opts) {
           ">Auto-advancing...</div>" +
           "</div>";
         if (isNew) {
-          document.documentElement.appendChild(panel);
+          __wgAdd(panel);
           requestAnimationFrame(() => panel.classList.add("wg-in"));
         }
         if (window.__wgWirePanelChrome) {
@@ -172,7 +172,7 @@ export async function presentSlides(page, slides, _gate, opts) {
         } catch {
           /* ignore */
         }
-        const cb = document.getElementById("wg-autoplay-cb");
+        const cb = __wgById("wg-autoplay-cb");
         if (cb) {
           cb.checked = autoNow;
           cb.addEventListener("change", () => {
@@ -181,17 +181,17 @@ export async function presentSlides(page, slides, _gate, opts) {
             } catch {
               /* ignore */
             }
-            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";
           });
         }
-        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 = autoNow ? "none" : "";
         if (auto) auto.style.display = autoNow ? "" : "none";
-        const runBtn = document.getElementById("wg-run");
+        const runBtn = __wgById("wg-run");
         if (runBtn) {
           runBtn.removeAttribute("data-wg-acked");
           runBtn.addEventListener("click", (e) => {
@@ -205,8 +205,8 @@ export async function presentSlides(page, slides, _gate, opts) {
           const unlockAt = Date.now() + info.dwellMs;
           const tick = () => {
             const left = Math.max(0, unlockAt - Date.now());
-            const hint = document.getElementById("wg-dwell-hint");
-            const btn = document.getElementById("wg-run");
+            const hint = __wgById("wg-dwell-hint");
+            const btn = __wgById("wg-run");
             if (left <= 0) {
               if (hint) hint.remove();
               if (btn) btn.disabled = false;
@@ -248,7 +248,7 @@ export async function presentSlides(page, slides, _gate, opts) {
     for (;;) {
       const acked = await page
         .evaluate(() => {
-          const btn = document.getElementById("wg-run");
+          const btn = __wgById("wg-run");
           return !!(btn && btn.getAttribute("data-wg-acked") === "1");
         })
         .catch(() => false);

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");