waygraph 0.15.30 → 0.15.32

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/components/ring.js

@@ -1,4 +1,6 @@
 import { TONES } from "../tokens.js";
+/** Prefix icon for gray (auto) labels. */
+const ROBOT = 'content:"\\1F916\\00a0";';
 const toneNames = Object.keys(TONES);
 /** Tone rules for `sel[data-tone=x]{...}` from the token table. */
 function toneRules(sel, decl, only) {
@@ -17,6 +19,8 @@ export function ringCss() {
         `max-width:min(360px,70vw);white-space:normal;padding:6px 10px;border-radius:7px;background:${p.labelBg};color:${p.labelFg};` +
         "font:600 12px/1.35 system-ui,sans-serif;transition:opacity .3s ease;}" +
         toneRules("#wg-ring-label", (t) => `background:${t.labelBg};color:${t.labelFg};`) +
+        // Gray = a real Playwright-driven instruction: mark it with a robot.
+        `#wg-ring-label[data-tone=auto]::before{${ROBOT}}` +
         "#wg-ring[data-size=sm]{border-width:1.5px;border-radius:8px;}" +
         "#wg-ring[data-size=lg]{border-width:4px;border-radius:12px;}" +
         "#wg-ring-label[data-size=sm]{font-size:10px;line-height:1.25;padding:4px 7px;border-radius:5px;}" +
@@ -36,6 +40,7 @@ export function pilotFxRingCss() {
         "max-width:min(360px,80vw);box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap;" +
         "overflow:hidden;text-overflow:ellipsis;transition:opacity .12s ease;}" +
         toneRules(".wg-pilot-fx-label", (t) => `background:${t.labelBg};color:${t.labelFg};`) +
+        `.wg-pilot-fx-label[data-tone=auto]::before{${ROBOT}}` +
         ".wg-pilot-fx-ring[data-size=sm]{border-width:1.5px;border-radius:8px;}" +
         ".wg-pilot-fx-ring[data-size=lg]{border-width:4px;border-radius:12px;}" +
         ".wg-pilot-fx-label[data-size=sm]{font-size:10px;padding:4px 7px;}" +

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/examples/saucedemo/.waygraph-auto/535e8922.json

@@ -0,0 +1,8 @@
+{
+  "sessionId": "535e8922",
+  "socketPath": "/tmp/waygraph-auto/535e8922.sock",
+  "pid": 699159,
+  "projectDir": "/home/dan/Desktop/Projects/waygraph/examples/saucedemo",
+  "startedAt": "2026-09-25T05:17:09.131Z",
+  "headless": false
+}

package/package.json

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