waygraph 0.15.53 → 0.16.0

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

@@ -0,0 +1,160 @@
+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;
+        el.dataset.home = pos;
+        try {
+            localStorage.setItem("wg-banner-pos", pos);
+        }
+        catch {
+            /* private mode / blocked storage - position still applies this page */
+        }
+    };
+    if (title) {
+        let banner = __wgById("wg-banner");
+        if (!banner) {
+            banner = document.createElement("div");
+            banner.id = "wg-banner";
+            let saved = null;
+            try {
+                saved = localStorage.getItem("wg-banner-pos");
+            }
+            catch {
+                /* ignore */
+            }
+            const startPos = saved && POSITIONS.includes(saved) ? saved : bannerPos;
+            applyPos(banner, startPos);
+            banner.title = "Click to move: top left / center / right";
+            banner.addEventListener("click", (e) => {
+                e.stopPropagation();
+                const i = POSITIONS.indexOf(banner.dataset.pos || "left");
+                applyPos(banner, POSITIONS[(i + 1) % POSITIONS.length]);
+            });
+            const tag = document.createElement("span");
+            tag.className = "wg-banner-tag";
+            tag.textContent = bannerTag || "waygraph demo";
+            const text = document.createElement("span");
+            text.className = "wg-banner-text";
+            text.textContent = title;
+            banner.appendChild(tag);
+            banner.appendChild(text);
+            __wgAdd(banner);
+        }
+        else {
+            // Fixture / episode title changes every step - update in place
+            // (banner is created once; do not leave the first step's text stuck). Fades out/in
+            // instead of an instant swap, so a title change reads as a deliberate beat, not a
+            // flicker - opt-out (or re-tune) via bannerUi.captionFadeMs, 0 = instant.
+            let text = banner.querySelector(".wg-banner-text");
+            if (!text) {
+                text = document.createElement("span");
+                text.className = "wg-banner-text";
+                banner.appendChild(text);
+            }
+            if (text.textContent !== title) {
+                const fadeMs = bannerUi && Number.isFinite(Number(bannerUi.captionFadeMs))
+                    ? Math.max(0, Number(bannerUi.captionFadeMs))
+                    : 220;
+                if (fadeMs <= 0 || !text.textContent) {
+                    text.textContent = title;
+                }
+                else {
+                    text.style.transition = "opacity " + fadeMs + "ms ease";
+                    text.style.opacity = "0";
+                    setTimeout(() => {
+                        text.textContent = title;
+                        text.style.opacity = "1";
+                    }, fadeMs);
+                }
+            }
+        }
+    }
+    // Authored banner UX (StubCtx.titlePos / bannerUi): applied every step, wins over click/env.
+    if (bannerUi) {
+        const cur = window.__wgBannerUi || {};
+        window.__wgBannerUi = { ...cur, ...bannerUi };
+    }
+    const bui = window.__wgBannerUi || {};
+    const bannerEl = __wgById("wg-banner");
+    if (bannerEl) {
+        if (bui.pos && POSITIONS.includes(bui.pos) && bannerEl.dataset.home !== bui.pos) {
+            bannerEl.dataset.pos = bui.pos;
+            bannerEl.dataset.home = bui.pos;
+            bannerEl.dataset.authored = "1";
+        }
+        bannerEl.dataset.collision = bui.collision === false ? "0" : "1";
+        bannerEl.style.display = bui.hidden ? "none" : "";
+    }
+    // Move the banner out of the way of a highlight ring (mirrors the todo dock's collision flip).
+    window.__wgBannerAvoidRing = (box) => {
+        const b = __wgById("wg-banner");
+        if (!b || !box || b.dataset.collision === "0" || b.style.display === "none")
+            return;
+        const pad = 10;
+        const hits = () => {
+            const r = b.getBoundingClientRect();
+            return !(r.right < box.x - pad ||
+                r.left > box.x + box.width + pad ||
+                r.bottom < box.y - pad ||
+                r.top > box.y + box.height + pad);
+        };
+        const home = b.dataset.home || b.dataset.pos || "left";
+        // Called every animation frame while a ring is followed - only log when the outcome changes.
+        const log = (state, line) => {
+            if (b.dataset.lastLog === state)
+                return;
+            b.dataset.lastLog = state;
+            if (line)
+                (window.__wgBannerLog = window.__wgBannerLog || []).push(line);
+        };
+        b.dataset.pos = home;
+        if (!hits()) {
+            delete b.dataset.moved;
+            log("clear");
+            return;
+        }
+        for (const cand of POSITIONS.filter((p) => p !== home)) {
+            b.dataset.pos = cand;
+            if (!hits()) {
+                b.dataset.moved = home + ">" + cand;
+                log("moved:" + cand, "moved " + home + " -> " + cand + " (ring overlap)");
+                return;
+            }
+        }
+        b.dataset.pos = home;
+        b.dataset.moved = "none-free";
+        log("none-free", "overlap at every position (kept " + home + ")");
+    };
+    window.__wgBannerRestore = () => {
+        const b = __wgById("wg-banner");
+        if (!b)
+            return;
+        if (b.dataset.home)
+            b.dataset.pos = b.dataset.home;
+        delete b.dataset.moved;
+        delete b.dataset.lastLog;
+    };
+    // Dim the banner while a ring caption is the focus - same "auto opacity" effect the todo
+    // dock already has via __wgTodosSetBehind, extended to the banner so both floating chrome
+    // pieces step back the same way instead of only one of them fading.
+    window.__wgBannerSetBehind = (on) => {
+        const b = __wgById("wg-banner");
+        if (!b)
+            return;
+        b.classList.toggle("wg-banner-behind", !!on);
+    };
+    // Tab title/favicon: a real navigation resets document.title and any
+    // <link rel="icon"> the new document brings, so re-check (not
+    // re-append) on every call instead of a one-time flag.
+    if (!document.title.startsWith("[waygraph] ")) {
+        document.title = "[waygraph] " + document.title;
+    }
+    let iconLink = document.querySelector("link[rel~='icon']");
+    if (!iconLink) {
+        iconLink = document.createElement("link");
+        iconLink.rel = "icon";
+        document.head.appendChild(iconLink);
+    }
+    if (iconLink.href !== favicon)
+        iconLink.href = favicon;
+}

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

@@ -0,0 +1,2 @@
+export declare function showCaption(text: any): void;
+export declare function hideCaption(): void;

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

@@ -0,0 +1,24 @@
+// In-page installer (page.evaluate target) - must stay self-contained, no module-scope closure.
+// Bottom narration caption - a white rounded card, not the dark zsign-ported scrim this started as
+// (see ui/css/caption.css's own header); narration-timeline/TTS sync not ported yet.
+export function showCaption(text) {
+    let bar = __wgById("wg-caption-bar");
+    if (!bar) {
+        bar = document.createElement("div");
+        bar.id = "wg-caption-bar";
+        bar.setAttribute("data-wg-ui", "1");
+        const span = document.createElement("span");
+        span.className = "wg-caption-text";
+        bar.appendChild(span);
+        __wgAdd(bar);
+    }
+    const span = bar.querySelector(".wg-caption-text");
+    if (span)
+        span.textContent = text;
+    bar.classList.add("wg-in");
+}
+export function hideCaption() {
+    const bar = __wgById("wg-caption-bar");
+    if (bar)
+        bar.classList.remove("wg-in");
+}

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

@@ -0,0 +1 @@
+export declare function installCore({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }: any): void;

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

@@ -0,0 +1,345 @@
+export function installCore({ title, favicon, bannerPos, todoPos, 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({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }: any): void;