waygraph 0.15.54 → 0.16.1

package/dist/demo/overlay/inpage/core.js

@@ -0,0 +1,345 @@
+export function installCore({ envAutoplay, todoDockUi }) {
+    window.__wgTodoDockUi = todoDockUi || {
+        compact: true,
+        cap: 5,
+        expandCap: 14,
+        collision: true,
+        behindRing: true,
+    };
+    // Seed the live autoplay toggle from the env default on first ever
+    // load only - a real navigation re-runs this, and re-stamping here
+    // would silently undo a human's mid-run checkbox click.
+    try {
+        if (localStorage.getItem("wg-autoplay") === null) {
+            localStorage.setItem("wg-autoplay", envAutoplay ? "1" : "0");
+        }
+    }
+    catch {
+        /* private mode / blocked storage - falls back to manual gating */
+    }
+    // The one shared ring primitive (ui/css/ring.css) - #wg-ring/#wg-ring-label is just this
+    // surface's OWN ring instance, found by id like any other (see __wgEnsureRingEl below).
+    window.__wgEnsureRingEl = (ringId, labelId) => {
+        let ring = __wgById(ringId);
+        if (!ring) {
+            ring = document.createElement("div");
+            ring.id = ringId;
+            ring.className = "wg-ring-el";
+            __wgAdd(ring);
+        }
+        let label = __wgById(labelId);
+        if (!label) {
+            label = document.createElement("div");
+            label.id = labelId;
+            label.className = "wg-ring-el-label";
+            __wgAdd(label);
+        }
+        return [ring, label];
+    };
+    /** Bare positioning only - no collision/follow/focus-veil (those are #wg-ring's own extras, see __wgPositionRing). */
+    window.__wgPaintRingAt = (ringId, labelId, box, label, tone, style) => {
+        const [ring, ringLabel] = window.__wgEnsureRingEl(ringId, labelId);
+        if (!box)
+            return null;
+        const raw = (tone || "planned") + "";
+        const t = raw === "auto" || raw === "info" || raw === "warning" || raw === "danger" || raw === "success" || raw === "orange"
+            ? raw
+            : "planned";
+        const st = style && typeof style === "object" ? style : {};
+        const sizeRaw = (st.size || "md") + "";
+        const size = sizeRaw === "sm" || sizeRaw === "lg" ? sizeRaw : "md";
+        const weightRaw = (st.weight || "normal") + "";
+        const weight = weightRaw === "bold" ? "bold" : "normal";
+        ring.dataset.tone = t;
+        ringLabel.dataset.tone = t;
+        ring.dataset.size = size;
+        ringLabel.dataset.size = size;
+        ringLabel.dataset.weight = weight;
+        if (st.color)
+            ringLabel.style.color = st.color;
+        else
+            ringLabel.style.removeProperty("color");
+        const pad = size === "sm" ? 3 : size === "lg" ? 10 : 6;
+        const margin = 6;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const left = box.x - pad;
+        const top = box.y - pad;
+        const width = Math.max(4, box.width + pad * 2);
+        const height = Math.max(4, box.height + pad * 2);
+        ring.style.left = left + "px";
+        ring.style.top = top + "px";
+        ring.style.width = width + "px";
+        ring.style.height = height + "px";
+        ring.style.opacity = "1";
+        if (labelId === "wg-ring-label") {
+            // The demo ring's caption is drawn from data-label (CSS ::after), not DOM text, so the page's own
+            // text selectors (getByText, text=...) never match waygraph's overlay twice.
+            ringLabel.dataset.label = label || "";
+            ringLabel.textContent = "";
+        }
+        else {
+            ringLabel.textContent = label || "";
+        }
+        ringLabel.style.opacity = "1";
+        const lw = ringLabel.offsetWidth;
+        const lh = ringLabel.offsetHeight;
+        let labelLeft = left;
+        let labelTop = top + height + 8;
+        const aboveTop = top - lh - 8;
+        if (labelTop + lh > vh - margin) {
+            labelTop = aboveTop;
+        }
+        else {
+            // Below the ringed box is often the NEXT form field in a tightly stacked list (e.g.
+            // saucedemo's checkout "First Name" / "Last Name" / "Zip" inputs) - a fixed +8px gap
+            // has no idea that's there and the label just sits on top of it. Sample a few points
+            // under the would-be label and flip above if any land on real page content (not our
+            // own ring/label elements, which are the only things expected there otherwise).
+            const probe = (x, y) => {
+                const el = document.elementFromPoint(x, y);
+                return el && el.id !== ringId && el.id !== labelId && !(el.closest && el.closest("#wg-root"));
+            };
+            const hitsPageContent = probe(labelLeft + 2, labelTop + 2) ||
+                probe(labelLeft + lw - 2, labelTop + 2) ||
+                probe(labelLeft + 2, labelTop + lh - 2);
+            if (hitsPageContent && aboveTop >= margin)
+                labelTop = aboveTop;
+        }
+        if (labelTop < margin)
+            labelTop = margin;
+        if (labelLeft + lw > vw - margin)
+            labelLeft = Math.max(margin, vw - margin - lw);
+        if (labelLeft < margin)
+            labelLeft = margin;
+        ringLabel.style.left = labelLeft + "px";
+        ringLabel.style.top = labelTop + "px";
+        return [ring, ringLabel];
+    };
+    window.__wgEnsureRingEl("wg-ring", "wg-ring-label");
+    if (!__wgById("wg-cursor")) {
+        const cursor = document.createElement("div");
+        cursor.id = "wg-cursor";
+        // Dark fill + white stroke, same as help-center-clip-engine's own
+        // #clip-cursor - visible against any page background, light or
+        // dark, unlike a plain solid-white shape.
+        cursor.append(__wgSvg("<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>"));
+        __wgAdd(cursor);
+    }
+    if (!__wgById("wg-click-pulse")) {
+        const pulse = document.createElement("div");
+        pulse.id = "wg-click-pulse";
+        __wgAdd(pulse);
+    }
+    window.__wgMoveCursorTo = (x, y, ms, instant) => {
+        const cursor = __wgById("wg-cursor");
+        if (!cursor)
+            return;
+        cursor.style.setProperty("--wg-cursor-ms", (ms || 600) + "ms");
+        if (instant) {
+            const prev = cursor.style.transition;
+            cursor.style.transition = "none";
+            cursor.style.transform = "translate(" + x + "px," + y + "px)";
+            void cursor.offsetWidth;
+            cursor.style.transition = prev || "";
+        }
+        else {
+            cursor.style.transform = "translate(" + x + "px," + y + "px)";
+        }
+        cursor.style.opacity = "1";
+    };
+    window.__wgHideCursor = () => {
+        const cursor = __wgById("wg-cursor");
+        if (cursor)
+            cursor.style.opacity = "0";
+    };
+    // #wg-ring's own extras on top of the shared __wgPaintRingAt primitive: todo/banner
+    // collision avoidance only makes sense for the ONE "current action" ring, not Pilot's
+    // several independent fixture rings - kept here, not pushed down into the shared painter.
+    window.__wgPositionRing = (box, label, tone, style) => {
+        if (!box)
+            return;
+        window.__wgPaintRingAt("wg-ring", "wg-ring-label", box, label, tone, style);
+        if (window.__wgTodosSetBehind)
+            window.__wgTodosSetBehind(true);
+        if (window.__wgBannerSetBehind)
+            window.__wgBannerSetBehind(true);
+        if (window.__wgTodosAvoidRingCollision)
+            window.__wgTodosAvoidRingCollision(box);
+        if (window.__wgBannerAvoidRing)
+            window.__wgBannerAvoidRing(box);
+    };
+    /** Dim/lower floating todo docks while a ring caption is the focus. */
+    window.__wgTodosSetBehind = (on) => {
+        const ui = window.__wgTodoDockUi || {};
+        if (ui.behindRing === false) {
+            __wgQA(".wg-todo-dock, #wg-todo-dock").forEach((el) => {
+                el.classList.remove("wg-todo-behind");
+            });
+            return;
+        }
+        __wgQA(".wg-todo-dock, #wg-todo-dock").forEach((el) => {
+            el.classList.toggle("wg-todo-behind", !!on);
+        });
+    };
+    /**
+     * If the active ring box intersects a todo dock, flip L/R once.
+     * Locked until hideRing so follow-rAF does not thrash.
+     */
+    window.__wgTodosAvoidRingCollision = (box) => {
+        const ui = window.__wgTodoDockUi || {};
+        if (ui.collision === false)
+            return;
+        if (!box || window.__wgTodoCollisionLocked)
+            return;
+        const pad = 10;
+        const rx1 = box.x - pad;
+        const ry1 = box.y - pad;
+        const rx2 = box.x + box.width + pad;
+        const ry2 = box.y + box.height + pad;
+        const overlaps = (el) => {
+            const r = el.getBoundingClientRect();
+            return !(r.right < rx1 || r.left > rx2 || r.bottom < ry1 || r.top > ry2);
+        };
+        const docks = [...__wgQA(".wg-todo-dock, #wg-todo-dock")].filter((el, i, arr) => arr.indexOf(el) === i);
+        for (const dock of docks) {
+            if (!overlaps(dock))
+                continue;
+            const cur = dock.dataset.pos === "right" ? "right" : "left";
+            dock.dataset.pos = cur === "right" ? "left" : "right";
+            try {
+                localStorage.setItem("wg-todo-pos", dock.dataset.pos);
+            }
+            catch {
+                /* ignore */
+            }
+            // Still colliding after flip - tuck (shorter max-height).
+            if (overlaps(dock))
+                dock.dataset.tucked = "1";
+            else
+                delete dock.dataset.tucked;
+            window.__wgTodoCollisionLocked = true;
+            break;
+        }
+    };
+    /** Live-follow a resolved element with rAF (accurate under device shell scale). */
+    window.__wgStopRingFollow = () => {
+        if (window.__wgRingFollowRaf) {
+            cancelAnimationFrame(window.__wgRingFollowRaf);
+            window.__wgRingFollowRaf = 0;
+        }
+        window.__wgRingFollowEl = null;
+    };
+    // `el` is a real DOM element (a Playwright ElementHandle unwrapped by evaluate() - see
+    // rings.js's showRing), not a selector string - >> piercing / :has-text() are Playwright's
+    // own selector-engine syntax, which document.querySelector has no way to understand, so
+    // resolution happens once on the Node side via page.locator(), before this ever runs.
+    window.__wgFollowRing = (el, label, tone, style, focus) => {
+        window.__wgStopRingFollow();
+        if (!el)
+            return;
+        window.__wgRingFollowEl = el;
+        const tick = () => {
+            if (window.__wgRingFollowEl !== el)
+                return;
+            if (!el.isConnected) {
+                window.__wgRingFollowRaf = requestAnimationFrame(tick);
+                return;
+            }
+            const r = el.getBoundingClientRect();
+            const box = { x: r.x, y: r.y, width: r.width, height: r.height };
+            if (window.__wgPositionRing) {
+                window.__wgPositionRing(box, label, tone || "planned", style || {});
+            }
+            if (focus && window.__wgApplyFocus)
+                window.__wgApplyFocus(box);
+            window.__wgRingFollowRaf = requestAnimationFrame(tick);
+        };
+        tick();
+    };
+    window.__wgClickPulse = (x, y, tone) => {
+        const pulse = __wgById("wg-click-pulse");
+        if (!pulse)
+            return;
+        const raw = (tone || "planned") + "";
+        pulse.dataset.tone =
+            raw === "auto" || raw === "info" || raw === "warning" || raw === "danger" || raw === "success"
+                ? raw
+                : "planned";
+        pulse.style.left = x + "px";
+        pulse.style.top = y + "px";
+        pulse.classList.remove("wg-pulse");
+        void pulse.offsetWidth;
+        pulse.classList.add("wg-pulse");
+    };
+    window.__wgHideRing = (opts) => {
+        // While a narrate() call owns the ring (mid multi-step action),
+        // the auto-highlight click/fill patches' own end-of-step hide is
+        // a no-op - narrate() itself clears it once the WHOLE wrapped
+        // action finishes, not just its first sub-step.
+        if (window.__wgNarrateOwnsRing)
+            return;
+        if (window.__wgStopRingFollow)
+            window.__wgStopRingFollow();
+        const ring = __wgById("wg-ring");
+        const ringLabel = __wgById("wg-ring-label");
+        if (ring)
+            ring.style.opacity = "0";
+        if (ringLabel)
+            ringLabel.style.opacity = "0";
+        if (window.__wgClearFocus)
+            window.__wgClearFocus();
+        if (window.__wgTodosSetBehind)
+            window.__wgTodosSetBehind(false);
+        if (window.__wgBannerSetBehind)
+            window.__wgBannerSetBehind(false);
+        if (window.__wgBannerRestore)
+            window.__wgBannerRestore();
+        window.__wgTodoCollisionLocked = false;
+        __wgQA(".wg-todo-dock[data-tucked], #wg-todo-dock[data-tucked]").forEach((el) => {
+            delete el.dataset.tucked;
+        });
+        // Honor zoomOut:false - keep camera until next zoom / desktop clear.
+        const forceClear = opts && opts.clearZoom === true;
+        const skipClear = opts && opts.clearZoom === false;
+        if (!skipClear &&
+            (forceClear || window.__wgZoomOutOnHide !== false) &&
+            window.__wgClearZoom) {
+            window.__wgClearZoom();
+        }
+    };
+    window.__wgClearFocus = () => {
+        const veil = __wgById("wg-focus-veil");
+        if (!veil)
+            return;
+        veil.classList.remove("wg-in");
+        setTimeout(() => {
+            const v = __wgById("wg-focus-veil");
+            if (v && !v.classList.contains("wg-in"))
+                v.remove();
+        }, 320);
+    };
+    window.__wgApplyFocus = (box) => {
+        if (!box) {
+            if (window.__wgClearFocus)
+                window.__wgClearFocus();
+            return;
+        }
+        let veil = __wgById("wg-focus-veil");
+        if (!veil) {
+            veil = document.createElement("div");
+            veil.id = "wg-focus-veil";
+            veil.setAttribute("data-wg-ui", "1");
+            __wgAdd(veil);
+        }
+        const pad = 10;
+        veil.style.left = Math.max(0, box.x - pad) + "px";
+        veil.style.top = Math.max(0, box.y - pad) + "px";
+        veil.style.width = Math.max(8, box.width + pad * 2) + "px";
+        veil.style.height = Math.max(8, box.height + pad * 2) + "px";
+        void veil.offsetWidth;
+        veil.classList.add("wg-in");
+    };
+}

package/dist/demo/overlay/inpage/device-chip.d.ts

@@ -0,0 +1 @@
+export declare function installDevice(): void;

package/dist/demo/overlay/inpage/device-chip.js

@@ -0,0 +1,191 @@
+// In-page (runs inside the browser via page.evaluate, must stay self-contained): the device toast and chip.
+export function installDevice() {
+    // Device toast + chip (0.13.2+) - announce on set/clear; quiet chip on keep.
+    // Payload: { sync, device?, remain?, announce? }
+    window.__wgSyncDevice = (payload) => {
+        const sync = payload && (payload.sync === "clear" || payload.sync === "keep" || payload.sync === "set")
+            ? payload.sync
+            : "keep";
+        const device = payload && payload.device ? payload.device : null;
+        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' " +
+            "d='M6 3.5l1.4 22.5 5.8-5.4 4.2 9.4 3.6-1.6-4.2-9.2H26z'/></svg>";
+        const FINGER_SVG = "<svg viewBox='0 0 32 32' width='28' height='28'>" +
+            "<ellipse cx='16' cy='22' rx='7' ry='8' fill='#0C0C1A' stroke='#fff' stroke-width='1.4'/>" +
+            "<rect x='12' y='6' width='8' height='16' rx='4' fill='#0C0C1A' stroke='#fff' stroke-width='1.4'/>" +
+            "</svg>";
+        const DESKTOP_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
+            '<rect x="2.5" y="3.5" width="19" height="12.5" rx="1.5"/>' +
+            '<path d="M8 20h8M12 16v4"/></svg>';
+        const ICONS = {
+            mobile: '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
+                '<rect x="7" y="2.5" width="10" height="19" rx="2.2"/>' +
+                '<circle cx="12" cy="18.2" r="1.1" fill="#fff" stroke="none"/></svg>',
+            tablet: '<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
+                '<rect x="3.5" y="4" width="17" height="16" rx="2"/>' +
+                '<circle cx="12" cy="17.2" r="1" fill="#fff" stroke="none"/></svg>',
+            desktop: DESKTOP_ICON,
+        };
+        const setCursor = (touch) => {
+            if (!cursor)
+                return;
+            if (touch) {
+                cursor.setAttribute("data-touch", "1");
+                __wgSet(cursor, __wgSvg(FINGER_SVG));
+            }
+            else {
+                cursor.removeAttribute("data-touch");
+                __wgSet(cursor, __wgSvg(MOUSE_SVG));
+            }
+        };
+        const ensureChip = (preset, touch, remain, orientation) => {
+            let badge = __wgById("wg-device-badge");
+            if (preset === "desktop" && !touch) {
+                if (badge) {
+                    badge.classList.remove("wg-in");
+                    setTimeout(() => {
+                        const b = __wgById("wg-device-badge");
+                        if (b)
+                            b.remove();
+                    }, 320);
+                }
+                return;
+            }
+            if (!badge) {
+                badge = document.createElement("div");
+                badge.id = "wg-device-badge";
+                badge.setAttribute("data-wg-ui", "1");
+                __wgAdd(badge);
+            }
+            badge.dataset.preset = preset;
+            badge.dataset.touch = touch ? "1" : "0";
+            const orient = orientation === "landscape" || orientation === "portrait"
+                ? orientation
+                : "";
+            if (orient)
+                badge.dataset.orientation = orient;
+            const chipLabel = preset === "desktop" && !touch
+                ? "desktop"
+                : preset +
+                    (orient ? " · " + (orient === "landscape" ? "land" : "port") : "") +
+                    (remain ? " · remain" : "");
+            __wgSet(badge, __wgEl("span", { class: "wg-dev-icon" }, __wgSvg(ICONS[preset] ?? DESKTOP_ICON)), __wgEl("span", { class: "wg-dev-label" }, chipLabel));
+            void badge.offsetWidth;
+            badge.classList.add("wg-in");
+        };
+        const showToast = (preset, touch, title, sub, orientation) => {
+            let toast = __wgById("wg-device-toast");
+            if (toast && toast._wgTimer) {
+                clearTimeout(toast._wgTimer);
+                toast._wgTimer = undefined;
+            }
+            if (!toast) {
+                toast = document.createElement("div");
+                toast.id = "wg-device-toast";
+                toast.setAttribute("data-wg-ui", "1");
+                __wgAdd(toast);
+            }
+            // Hide chip while toast is up (same corner).
+            const badge = __wgById("wg-device-badge");
+            if (badge)
+                badge.classList.remove("wg-in");
+            toast.dataset.preset = preset;
+            __wgSet(toast, __wgEl("span", { class: "wg-dev-icon" }, __wgSvg(ICONS[preset] ?? DESKTOP_ICON)), __wgEl("span", { class: "wg-dev-copy" }, __wgEl("div", { class: "wg-dev-title" }, title), __wgEl("div", { class: "wg-dev-sub" }, sub)));
+            toast.classList.remove("wg-out");
+            void toast.offsetWidth;
+            toast.classList.add("wg-in");
+            toast._wgTimer = setTimeout(() => {
+                toast.classList.add("wg-out");
+                toast.classList.remove("wg-in");
+                setTimeout(() => {
+                    const t = __wgById("wg-device-toast");
+                    if (t)
+                        t.remove();
+                    if (preset !== "desktop" || touch) {
+                        ensureChip(preset, touch, true, orientation);
+                    }
+                }, 380);
+            }, 2200);
+        };
+        if (sync === "keep" && !device)
+            return;
+        const isDesktopClear = sync === "clear" ||
+            (device && device.preset === "desktop" && !device.touchMode);
+        if (isDesktopClear) {
+            setCursor(false);
+            const announce = payload?.announce !== false && sync !== "keep";
+            if (announce) {
+                const vp = device && device.viewport ? device.viewport : { width: 1280, height: 720 };
+                showToast("desktop", false, "Back to desktop", vp.width + "×" + vp.height + " · mouse", "landscape");
+                setTimeout(() => {
+                    const badge = __wgById("wg-device-badge");
+                    if (badge)
+                        badge.remove();
+                }, 2600);
+            }
+            else {
+                const badge = __wgById("wg-device-badge");
+                if (badge)
+                    badge.remove();
+                const toast = __wgById("wg-device-toast");
+                if (toast)
+                    toast.remove();
+            }
+            window.__wgDevicePreset = "desktop";
+            window.__wgDeviceOrientation = "landscape";
+            window.__wgDeviceTouch = false;
+            document.documentElement.dataset.wgTouch = "0";
+            if (window.__wgEnsureZoomBadge)
+                window.__wgEnsureZoomBadge();
+            return;
+        }
+        if (!device)
+            return;
+        const preset = device.preset || "desktop";
+        const touch = !!device.touchMode;
+        const remain = payload?.remain !== false;
+        const vp = device.viewport || { width: 0, height: 0 };
+        const orient = device.orientation === "landscape" || device.orientation === "portrait"
+            ? device.orientation
+            : vp.height > vp.width
+                ? "portrait"
+                : "landscape";
+        const prev = window.__wgDevicePreset || "";
+        const prevOrient = window.__wgDeviceOrientation || "";
+        const presetChanged = prev !== preset || (touch && prev === "desktop");
+        const orientChanged = prevOrient !== "" && prevOrient !== orient;
+        const changed = presetChanged || orientChanged || prev === "";
+        setCursor(touch);
+        window.__wgDevicePreset = preset;
+        window.__wgDeviceOrientation = orient;
+        window.__wgDeviceTouch = touch;
+        document.documentElement.dataset.wgTouch = touch ? "1" : "0";
+        if (window.__wgEnsureZoomBadge)
+            window.__wgEnsureZoomBadge();
+        const announce = payload?.announce === true ||
+            (payload?.announce !== false && sync === "set" && changed);
+        const size = (vp.width || "?") +
+            "×" +
+            (vp.height || "?") +
+            " · " +
+            orient +
+            (touch ? " · touch" : "");
+        const titles = {
+            mobile: "Now in mobile mode",
+            tablet: "Now in tablet mode",
+            desktop: "Now in desktop mode",
+        };
+        let titleText = titles[preset] || "Device updated";
+        if (orientChanged && !presetChanged) {
+            titleText =
+                orient === "landscape" ? "Rotated to landscape" : "Rotated to portrait";
+        }
+        if (announce) {
+            showToast(preset, touch, titleText, size, orient);
+        }
+        else {
+            ensureChip(preset, touch, remain, orient);
+        }
+    };
+}

package/dist/demo/overlay/inpage/network.d.ts

@@ -0,0 +1,10 @@
+import type { NetworkEntry } from "../../types.js";
+export declare function addNetworkEntry(entry: NetworkEntry): void;
+/**
+ * Shows or hides the network-tab panel - capture keeps happening either way (addNetworkEntry
+ * always builds the DOM row; this only toggles whether the panel itself is visible). Safe to call
+ * before any entry exists yet - it just remembers the flag for addNetworkEntry to check later.
+ */
+export declare function setNetworkTabVisible(visible: boolean): void;
+/** Clears every captured entry and removes the panel - a fresh navigation/session starting over. */
+export declare function clearNetworkLog(): void;