waygraph 0.15.54 → 0.16.1

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

@@ -0,0 +1,189 @@
+export function addNetworkEntry(entry) {
+    // No-op outside a demo/pilot/auto run - ensureShadowRoot() (and its __wgById/__wgAdd globals)
+    // is never installed for a plain `waygraph run`/Playwright test, and this must not throw there.
+    if (typeof __wgById !== "function" || typeof __wgAdd !== "function" || typeof __wgEl !== "function")
+        return;
+    function methodClass(method) {
+        const m = (method || "GET").toUpperCase();
+        if (m === "GET")
+            return "get";
+        if (m === "POST")
+            return "post";
+        if (m === "PUT" || m === "PATCH")
+            return "put";
+        if (m === "DELETE")
+            return "delete";
+        return "other";
+    }
+    function toCurl(e) {
+        let cmd = "curl -X " + (e.method || "GET") + " '" + String(e.url || "").replace(/'/g, "'\\''") + "'";
+        const headers = e.reqHeaders || {};
+        for (const k of Object.keys(headers)) {
+            if (/^:/.test(k))
+                continue; // HTTP/2 pseudo-headers - not valid curl -H input
+            cmd += " \\\n  -H '" + k + ": " + String(headers[k]).replace(/'/g, "'\\''") + "'";
+        }
+        if (e.reqBody)
+            cmd += " \\\n  --data '" + String(e.reqBody).replace(/'/g, "'\\''") + "'";
+        return cmd;
+    }
+    function renderHeaders(headers) {
+        const h = headers || {};
+        const keys = Object.keys(h);
+        if (keys.length === 0)
+            return __wgEl("div", { class: "wg-net-empty" }, "(none)");
+        return __wgEl("table", { class: "wg-net-headers" }, keys.map((k) => __wgEl("tr", null, __wgEl("td", null, k), __wgEl("td", null, String(h[k])))));
+    }
+    function renderBody(body) {
+        if (body === undefined || body === null || body === "")
+            return __wgEl("div", { class: "wg-net-empty" }, "(empty)");
+        let text = body;
+        try {
+            text = JSON.stringify(JSON.parse(body), null, 2);
+        }
+        catch {
+            /* not JSON - show raw */
+        }
+        return __wgEl("pre", { class: "wg-net-body" }, String(text).slice(0, 4000));
+    }
+    function section(heading, ...content) {
+        return __wgEl("div", { class: "wg-net-detail-section" }, __wgEl("h4", null, heading), ...content);
+    }
+    function renderDetail(e) {
+        return [
+            section("Request headers", renderHeaders(e.reqHeaders)),
+            e.reqBody ? section("Request body", renderBody(e.reqBody)) : null,
+            section("Response headers", renderHeaders(e.resHeaders)),
+            section("Response body", renderBody(e.resBody)),
+            section("cURL", __wgEl("pre", { class: "wg-net-body wg-net-curl" }, toCurl(e)), __wgEl("button", { class: "wg-net-copy", data: { copy: "1" }, attrs: { type: "button" } }, "Copy as cURL")),
+        ];
+    }
+    let panel = __wgById("wg-network-log");
+    if (!panel) {
+        panel = document.createElement("div");
+        panel.id = "wg-network-log";
+        panel.setAttribute("data-wg-ui", "1");
+        const header = document.createElement("div");
+        header.className = "wg-net-header";
+        const title = document.createElement("span");
+        title.className = "wg-net-title";
+        title.textContent = "Network";
+        const count = document.createElement("span");
+        count.className = "wg-net-count";
+        count.textContent = "0";
+        const toggle = document.createElement("button");
+        toggle.type = "button";
+        toggle.className = "wg-net-collapse";
+        toggle.textContent = "−"; // minus
+        toggle.addEventListener("click", (ev) => {
+            ev.stopPropagation();
+            panel.classList.toggle("wg-net-collapsed");
+            toggle.textContent = panel.classList.contains("wg-net-collapsed") ? "+" : "−";
+        });
+        header.appendChild(title);
+        header.appendChild(count);
+        header.appendChild(toggle);
+        const list = document.createElement("ol");
+        list.className = "wg-net-list";
+        panel.appendChild(header);
+        panel.appendChild(list);
+        __wgAdd(panel);
+    }
+    const w = window;
+    w.__wgNetworkEntries = w.__wgNetworkEntries || [];
+    w.__wgNetworkEntries.push(entry);
+    while (w.__wgNetworkEntries.length > 30)
+        w.__wgNetworkEntries.shift();
+    const list = panel.querySelector(".wg-net-list");
+    if (!list)
+        return;
+    const row = document.createElement("li");
+    row.className = "wg-net-row";
+    row.dataset.ok = entry.ok ? "1" : "0";
+    let path = entry.url;
+    try {
+        const u = new URL(String(entry.url));
+        path = u.pathname + u.search;
+    }
+    catch {
+        /* not an absolute URL - show as given */
+    }
+    __wgSet(row, __wgEl("span", { class: "wg-net-method wg-net-method-" + methodClass(entry.method) }, (entry.method || "GET").toUpperCase()), __wgEl("span", { class: "wg-net-path", title: String(entry.url) }, path), __wgEl("span", { class: "wg-net-status" }, String(entry.status ?? "")), entry.ms !== undefined ? __wgEl("span", { class: "wg-net-ms" }, entry.ms + "ms") : null);
+    row.addEventListener("click", () => {
+        const open = row.classList.contains("wg-net-open");
+        __wgQA(".wg-net-row.wg-net-open").forEach((r) => {
+            r.classList.remove("wg-net-open");
+            const d = r.nextElementSibling;
+            if (d && d.classList && d.classList.contains("wg-net-detail"))
+                d.remove();
+        });
+        if (open)
+            return;
+        row.classList.add("wg-net-open");
+        const detail = document.createElement("li");
+        detail.className = "wg-net-detail";
+        __wgSet(detail, renderDetail(entry));
+        const copyBtn = detail.querySelector("[data-copy]");
+        if (copyBtn) {
+            copyBtn.addEventListener("click", (ev) => {
+                ev.stopPropagation();
+                const text = toCurl(entry);
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    navigator.clipboard.writeText(text).catch(() => { });
+                }
+                copyBtn.textContent = "Copied!";
+                setTimeout(() => {
+                    copyBtn.textContent = "Copy as cURL";
+                }, 1200);
+            });
+        }
+        row.after(detail);
+    });
+    list.appendChild(row);
+    while (list.children.length > 30 && list.firstChild)
+        list.removeChild(list.firstChild);
+    const countEl = panel.querySelector(".wg-net-count");
+    if (countEl)
+        countEl.textContent = String(w.__wgNetworkEntries.length);
+    // Always captured, only shown when explicitly turned on (ctx.showNetworkTab(); default hidden -
+    // see StubCtx's own doc comment) - the DOM/row still gets built either way, so toggling visible
+    // later shows the full history immediately, not just entries captured after that point.
+    if (w.__wgNetworkTabVisible) {
+        panel.classList.remove("wg-out");
+        void panel.offsetWidth;
+        panel.classList.add("wg-in");
+        void row.offsetWidth;
+        row.classList.add("wg-in");
+    }
+}
+/**
+ * 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 function setNetworkTabVisible(visible) {
+    if (typeof __wgById !== "function")
+        return;
+    window.__wgNetworkTabVisible = !!visible;
+    const panel = __wgById("wg-network-log");
+    if (!panel)
+        return;
+    if (visible) {
+        panel.classList.remove("wg-out");
+        panel.classList.add("wg-in");
+        __wgQA(".wg-net-row").forEach((r) => r.classList.add("wg-in"));
+    }
+    else {
+        panel.classList.remove("wg-in");
+        panel.classList.add("wg-out");
+    }
+}
+/** Clears every captured entry and removes the panel - a fresh navigation/session starting over. */
+export function clearNetworkLog() {
+    if (typeof __wgById !== "function")
+        return;
+    window.__wgNetworkEntries = [];
+    const panel = __wgById("wg-network-log");
+    if (panel)
+        panel.remove();
+}

package/dist/demo/overlay/inpage/panel-chrome.d.ts

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

package/dist/demo/overlay/inpage/panel-chrome.js

@@ -0,0 +1,203 @@
+// In-page (runs inside the browser via page.evaluate, must stay self-contained): the step panel's Hide/Show chrome and mini Next.
+export function installPanelChrome() {
+    // Hide/Show for #wg-panel - call after every panel content refresh.
+    // Collapsed = "N / M · block" + Next (when not auto). Never pass
+    // forceCollapsed:false - omit so Hide/localStorage wins.
+    window.__wgWirePanelChrome = (panel, storageKey, chromeTitle, opts) => {
+        if (!panel)
+            return;
+        opts = opts || {};
+        const ensureChrome = () => {
+            let chrome = panel.querySelector(":scope > .wg-chrome");
+            if (!chrome) {
+                const body = document.createElement("div");
+                body.className = "wg-body";
+                while (panel.firstChild)
+                    body.appendChild(panel.firstChild);
+                chrome = document.createElement("div");
+                chrome.className = "wg-chrome";
+                const titleEl = document.createElement("span");
+                titleEl.className = "wg-chrome-title";
+                titleEl.textContent = chromeTitle || "waygraph demo";
+                const actions = document.createElement("div");
+                actions.className = "wg-chrome-actions";
+                const nextBtn = document.createElement("button");
+                nextBtn.type = "button";
+                nextBtn.className = "wg-mini-next";
+                nextBtn.setAttribute("data-wg-mini-next", "1");
+                nextBtn.textContent = "Next ▶";
+                const btn = document.createElement("button");
+                btn.type = "button";
+                btn.className = "wg-hide-btn";
+                btn.setAttribute("data-wg-toggle", "1");
+                btn.textContent = "Hide";
+                actions.appendChild(nextBtn);
+                actions.appendChild(btn);
+                chrome.appendChild(titleEl);
+                chrome.appendChild(actions);
+                panel.appendChild(chrome);
+                panel.appendChild(body);
+                return;
+            }
+            // Yap slides ship a bare chrome - ensure actions + mini Next exist.
+            let actions = chrome.querySelector(".wg-chrome-actions");
+            if (!actions) {
+                actions = document.createElement("div");
+                actions.className = "wg-chrome-actions";
+                const hide = chrome.querySelector("[data-wg-toggle]");
+                if (hide)
+                    actions.appendChild(hide);
+                chrome.appendChild(actions);
+            }
+            if (!actions.querySelector("[data-wg-mini-next]")) {
+                const nextBtn = document.createElement("button");
+                nextBtn.type = "button";
+                nextBtn.className = "wg-mini-next";
+                nextBtn.setAttribute("data-wg-mini-next", "1");
+                nextBtn.textContent = "Next ▶";
+                actions.insertBefore(nextBtn, actions.firstChild);
+            }
+        };
+        ensureChrome();
+        const stepLabel = opts.stepLabel || panel.dataset.wgStepLabel || "";
+        if (stepLabel)
+            panel.dataset.wgStepLabel = stepLabel;
+        if (opts.fastForward !== undefined) {
+            panel.dataset.wgFastForward = opts.fastForward ? "1" : "0";
+        }
+        if (opts.isApi !== undefined) {
+            panel.dataset.wgIsApi = opts.isApi ? "1" : "0";
+        }
+        const buildFfIcon = () => {
+            const span = document.createElement("span");
+            span.className = "wg-ff-icon";
+            span.setAttribute("aria-hidden", "true");
+            span.append(__wgSvg('<svg viewBox="0 0 16 16" fill="none">' +
+                '<path class="wg-ff-chev" d="M2 3l5 5-5 5" stroke="#c9a6ff" stroke-width="1.8" ' +
+                'stroke-linecap="round" stroke-linejoin="round"/>' +
+                '<path class="wg-ff-chev" d="M8 3l5 5-5 5" stroke="#c9a6ff" stroke-width="1.8" ' +
+                'stroke-linecap="round" stroke-linejoin="round"/></svg>'));
+            return span;
+        };
+        // Terminal icon: the current step is an API check (defineApiBlock) - no DOM change, no
+        // ring of its own, so without this it's an unexplained instant step with nothing visibly
+        // happening on the page at all (worse than a fast-forward block, which at least has the
+        // FF icon marking it as different).
+        const buildApiIcon = () => {
+            const span = document.createElement("span");
+            span.className = "wg-api-icon";
+            span.setAttribute("aria-hidden", "true");
+            span.append(__wgSvg('<svg viewBox="0 0 16 16" fill="none">' +
+                '<rect x="1" y="2" width="14" height="12" rx="1.5" stroke="#7dd3fc" stroke-width="1.3"/>' +
+                '<path d="M3.5 5.5l2.5 2.5-2.5 2.5" stroke="#7dd3fc" stroke-width="1.3" ' +
+                'stroke-linecap="round" stroke-linejoin="round"/>' +
+                '<path d="M7.5 10.5h4" stroke="#7dd3fc" stroke-width="1.3" stroke-linecap="round"/></svg>'));
+            return span;
+        };
+        const syncMiniNext = (hidden) => {
+            const miniNext = panel.querySelector("[data-wg-mini-next]");
+            if (!miniNext)
+                return;
+            let auto = false;
+            try {
+                auto = localStorage.getItem("wg-autoplay") === "1";
+            }
+            catch {
+                /* ignore */
+            }
+            const runBtn = __wgById("wg-run");
+            const show = !!hidden && !auto && !!runBtn;
+            miniNext.classList.toggle("wg-mini-next-show", show);
+            if (runBtn) {
+                miniNext.textContent = runBtn.textContent || "Next ▶";
+                miniNext.disabled = !!runBtn.disabled;
+            }
+            else {
+                miniNext.disabled = true;
+            }
+        };
+        const apply = (hidden, persist) => {
+            panel.classList.toggle("wg-collapsed", hidden);
+            panel.setAttribute("data-wg-collapsed", hidden ? "1" : "0");
+            const t = panel.querySelector("[data-wg-toggle]");
+            const titleEl = panel.querySelector(".wg-chrome-title");
+            const label = panel.dataset.wgStepLabel || stepLabel;
+            const isFf = panel.dataset.wgFastForward === "1";
+            const isApi = panel.dataset.wgIsApi === "1";
+            if (titleEl) {
+                const text = hidden
+                    ? (label || chromeTitle || "waygraph demo")
+                    : (chromeTitle || "waygraph demo");
+                titleEl.textContent = "";
+                if (hidden && isFf)
+                    titleEl.appendChild(buildFfIcon());
+                if (hidden && isApi)
+                    titleEl.appendChild(buildApiIcon());
+                titleEl.appendChild(document.createTextNode(text));
+            }
+            if (t)
+                t.textContent = hidden ? "Show" : "Hide";
+            syncMiniNext(hidden);
+            if (persist !== false) {
+                try {
+                    localStorage.setItem(storageKey, hidden ? "1" : "0");
+                }
+                catch {
+                    /* private mode */
+                }
+            }
+        };
+        let hidden = false;
+        if (opts.forceCollapsed === true) {
+            hidden = true;
+        }
+        else {
+            try {
+                hidden = localStorage.getItem(storageKey) === "1";
+            }
+            catch {
+                /* ignore */
+            }
+        }
+        // force mini does not overwrite Hide preference in storage.
+        apply(hidden, opts.forceCollapsed === true ? false : true);
+        const toggle = panel.querySelector("[data-wg-toggle]");
+        if (toggle && !toggle.dataset.wgWired) {
+            toggle.dataset.wgWired = "1";
+            toggle.addEventListener("click", (e) => {
+                e.stopPropagation();
+                apply(!panel.classList.contains("wg-collapsed"), true);
+            });
+        }
+        const miniNext = panel.querySelector("[data-wg-mini-next]");
+        if (miniNext && !miniNext.dataset.wgWired) {
+            miniNext.dataset.wgWired = "1";
+            miniNext.addEventListener("click", (e) => {
+                e.stopPropagation();
+                const runBtn = __wgById("wg-run");
+                if (runBtn && !runBtn.disabled) {
+                    runBtn.click();
+                    return;
+                }
+                if (typeof window.__wgNext === "function")
+                    window.__wgNext({});
+            });
+        }
+        const autoCb = __wgById("wg-autoplay-cb");
+        if (autoCb && !autoCb.dataset.wgMiniWired) {
+            autoCb.dataset.wgMiniWired = "1";
+            autoCb.addEventListener("change", () => {
+                syncMiniNext(panel.classList.contains("wg-collapsed"));
+            });
+        }
+        const cur = panel.querySelector("#wg-modules .wg-mod-current");
+        if (cur && typeof cur.scrollIntoView === "function") {
+            try {
+                cur.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
+            }
+            catch {
+                cur.scrollIntoView(false);
+            }
+        }
+    };
+}

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

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

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

@@ -0,0 +1,46 @@
+// In-page (runs inside the browser via page.evaluate, must stay self-contained): readiness stamps agents read to know a panel painted.
+export function installStamp() {
+    // Blind-agent overlay beacons: every modal root gets data-wg-ui /
+    // data-wg-modal / data-wg-ready so tests can fail on a blank panel.
+    window.__wgStampModal = (el, kind, meta) => {
+        if (!el)
+            return;
+        meta = meta || {};
+        el.setAttribute("data-wg-ui", "1");
+        el.setAttribute("data-wg-modal", kind || "panel");
+        if (meta.phase != null)
+            el.setAttribute("data-wg-phase", String(meta.phase));
+        if (meta.step != null)
+            el.setAttribute("data-wg-step", String(meta.step));
+        if (meta.total != null)
+            el.setAttribute("data-wg-total", String(meta.total));
+        if (meta.block != null)
+            el.setAttribute("data-wg-block", String(meta.block));
+        el.setAttribute("data-wg-collapsed", el.classList.contains("wg-collapsed") ? "1" : "0");
+        el.setAttribute("data-wg-ready", meta.ready === false ? "0" : "1");
+    };
+    window.__wgOverlayBeacon = () => {
+        return Array.from(__wgQA("[data-wg-ui=\"1\"]")).map((el) => {
+            const r = el.getBoundingClientRect();
+            const st = getComputedStyle(el);
+            return {
+                id: el.id || null,
+                modal: el.getAttribute("data-wg-modal"),
+                ready: el.getAttribute("data-wg-ready") === "1",
+                phase: el.getAttribute("data-wg-phase"),
+                step: el.getAttribute("data-wg-step"),
+                block: el.getAttribute("data-wg-block"),
+                collapsed: el.getAttribute("data-wg-collapsed") === "1" ||
+                    el.classList.contains("wg-collapsed"),
+                opacity: st.opacity,
+                textLen: (el.innerText || "").trim().length,
+                w: Math.round(r.width),
+                h: Math.round(r.height),
+                visible: r.width > 0 && r.height > 0 && Number(st.opacity) > 0.05,
+            };
+        });
+    };
+    const existingBanner = __wgById("wg-banner");
+    if (existingBanner)
+        window.__wgStampModal(existingBanner, "banner", { ready: true });
+}

package/dist/demo/overlay/inpage/swipe-zoom.d.ts

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

package/dist/demo/overlay/inpage/swipe-zoom.js

@@ -0,0 +1,220 @@
+// In-page (runs inside the browser via page.evaluate, must stay self-contained): swipe trails and ring zoom.
+export function installSwipeZoom() {
+    /**
+     * Finger swipe trail for touch theater (orientation rotate / device change).
+     * opts: { dir: 'left'|'right'|'up'|'down', label?, ms? }
+     * Returns duration waited (ms) via Promise when called from page.evaluate async.
+     */
+    window.__wgSwipeTrail = (opts) => {
+        const o = opts || {};
+        const dir = o.dir === "right" || o.dir === "up" || o.dir === "down" ? o.dir : "left";
+        const ms = Math.max(280, Math.min(1400, Number(o.ms) || 720));
+        const label = o.label ||
+            (dir === "left" || dir === "right" ? "swipe" : "swipe") +
+                (o.hint ? " \u00b7 " + o.hint : "");
+        let layer = __wgById("wg-swipe-layer");
+        if (layer && layer._wgTimer) {
+            clearTimeout(layer._wgTimer);
+            layer._wgTimer = undefined;
+        }
+        if (layer)
+            layer.remove();
+        layer = document.createElement("div");
+        layer.id = "wg-swipe-layer";
+        layer.setAttribute("data-wg-ui", "1");
+        const finger = document.createElement("div");
+        finger.className = "wg-swipe-finger";
+        const lab = document.createElement("div");
+        lab.className = "wg-swipe-label";
+        lab.textContent = label;
+        layer.appendChild(lab);
+        layer.appendChild(finger);
+        __wgAdd(layer);
+        const vw = window.innerWidth || 390;
+        const vh = window.innerHeight || 844;
+        const pad = Math.min(vw, vh) * 0.18;
+        let x0;
+        let y0;
+        let x1;
+        let y1;
+        if (dir === "left") {
+            x0 = vw - pad;
+            x1 = pad;
+            y0 = y1 = vh * 0.52;
+        }
+        else if (dir === "right") {
+            x0 = pad;
+            x1 = vw - pad;
+            y0 = y1 = vh * 0.52;
+        }
+        else if (dir === "up") {
+            x0 = x1 = vw * 0.5;
+            y0 = vh - pad;
+            y1 = pad;
+        }
+        else {
+            x0 = x1 = vw * 0.5;
+            y0 = pad;
+            y1 = vh - pad;
+        }
+        finger.style.left = x0 + "px";
+        finger.style.top = y0 + "px";
+        finger.style.opacity = "1";
+        void layer.offsetWidth;
+        layer.classList.add("wg-in");
+        const steps = 12;
+        const stepMs = Math.floor(ms / steps);
+        let i = 0;
+        const tick = () => {
+            i += 1;
+            const t = Math.min(1, i / steps);
+            const e = t * t * (3 - 2 * t);
+            const x = x0 + (x1 - x0) * e;
+            const y = y0 + (y1 - y0) * e;
+            finger.style.left = x + "px";
+            finger.style.top = y + "px";
+            const dot = document.createElement("div");
+            dot.className = "wg-swipe-dot";
+            dot.style.left = x + "px";
+            dot.style.top = y + "px";
+            dot.style.opacity = String(0.85 - t * 0.55);
+            layer.appendChild(dot);
+            requestAnimationFrame(() => {
+                dot.style.transition = "opacity .45s ease, transform .45s ease";
+                dot.style.opacity = "0";
+                dot.style.transform = "scale(1.8)";
+            });
+            if (i < steps) {
+                layer._wgTimer = setTimeout(tick, stepMs);
+            }
+            else {
+                finger.style.opacity = "0";
+                layer.classList.remove("wg-in");
+                layer._wgTimer = setTimeout(() => {
+                    const el = __wgById("wg-swipe-layer");
+                    if (el)
+                        el.remove();
+                }, 380);
+            }
+        };
+        layer._wgTimer = setTimeout(tick, 40);
+        return ms + 120;
+    };
+    window.__wgClearZoom = () => {
+        // Strip leftover element transforms from older zoom path.
+        document.querySelectorAll("[data-wg-zoomed=\"1\"]").forEach((el) => {
+            el.style.removeProperty("transform");
+            el.style.removeProperty("transform-origin");
+            el.style.removeProperty("transition");
+            el.style.removeProperty("z-index");
+            el.style.removeProperty("position");
+            delete el.dataset.wgZoomed;
+        });
+        // Undo any prior shell-camera experiment - restore device fit scale only.
+        const shell = __wgById("wg-device-shell");
+        if (shell && shell.dataset.wgCamBase != null) {
+            shell.style.transform = shell.dataset.wgCamBase;
+            if (shell.dataset.wgCamOrigin) {
+                shell.style.transformOrigin = shell.dataset.wgCamOrigin;
+            }
+            else {
+                shell.style.transformOrigin = "center center";
+            }
+            delete shell.dataset.wgCamBase;
+            delete shell.dataset.wgCamOrigin;
+            delete shell.dataset.wgCamZoom;
+        }
+        window.__wgZoomLevel = 1;
+        window.__wgZoomSel = "";
+        if (window.__wgSetZoomBadge)
+            window.__wgSetZoomBadge(1, "");
+    };
+    const ZOOM_ICO = '<svg viewBox="0 0 24 24" fill="none" stroke="#c9a6ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        '<circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>';
+    window.__wgSetZoomBadge = (scale, sel) => {
+        const n = Number(scale);
+        const level = Number.isFinite(n) && n > 0 ? n : 1;
+        let badge = __wgById("wg-zoom-badge");
+        if (!badge) {
+            badge = document.createElement("div");
+            badge.id = "wg-zoom-badge";
+            badge.setAttribute("data-wg-ui", "1");
+            __wgAdd(badge);
+        }
+        const zoomed = level > 1.001 || level < 0.999;
+        badge.dataset.zoomed = zoomed ? "1" : "0";
+        const txt = level.toFixed(2) + "\u00d7";
+        __wgSet(badge, __wgEl("span", { class: "wg-zoom-ico" }, __wgSvg(ZOOM_ICO)), __wgEl("span", { class: "wg-zoom-val" }, txt));
+        badge.classList.add("wg-in");
+        window.__wgZoomLevel = level;
+        window.__wgZoomSel = sel || "";
+    };
+    window.__wgEnsureZoomBadge = () => {
+        if (window.__wgSetZoomBadge) {
+            window.__wgSetZoomBadge(window.__wgZoomLevel || 1, window.__wgZoomSel || "");
+        }
+    };
+    window.__wgSetTypingBadge = (on, label) => {
+        let badge = __wgById("wg-typing-badge");
+        if (!on) {
+            if (badge) {
+                badge.classList.remove("wg-in");
+                setTimeout(() => {
+                    const b = __wgById("wg-typing-badge");
+                    if (b && !b.classList.contains("wg-in"))
+                        b.remove();
+                }, 220);
+            }
+            return;
+        }
+        if (!badge) {
+            badge = document.createElement("div");
+            badge.id = "wg-typing-badge";
+            badge.setAttribute("data-wg-ui", "1");
+            __wgAdd(badge);
+        }
+        const text = label ? String(label).slice(0, 40) : "typing";
+        __wgSet(badge, __wgEl("span", { class: "wg-ty-dots" }, "\u25cf\u25cf\u25cf"), __wgEl("span", null, "typing \u00b7 " + text));
+        void badge.offsetWidth;
+        badge.classList.add("wg-in");
+    };
+    /**
+     * Zoom HUD only - never CSS-scale the target or the device shell.
+     * Shell camera zoom fought device-theater fit-scale (broke ring follow
+     * + uneven border-radius). Element scale mangled cart rows. Emphasis
+     * is ring + focus veil; badge still shows authored zoom level.
+     */
+    window.__wgApplyZoom = (sel, scale) => {
+        document.querySelectorAll("[data-wg-zoomed=\"1\"]").forEach((el) => {
+            el.style.removeProperty("transform");
+            el.style.removeProperty("transform-origin");
+            el.style.removeProperty("transition");
+            el.style.removeProperty("z-index");
+            el.style.removeProperty("position");
+            delete el.dataset.wgZoomed;
+        });
+        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";
+            delete shell.dataset.wgCamBase;
+            delete shell.dataset.wgCamOrigin;
+            delete shell.dataset.wgCamZoom;
+        }
+        const n = Number(scale);
+        if (!Number.isFinite(n) || n <= 1.001) {
+            window.__wgZoomLevel = 1;
+            window.__wgZoomSel = "";
+            if (window.__wgSetZoomBadge)
+                window.__wgSetZoomBadge(1, "");
+            return;
+        }
+        window.__wgZoomLevel = n;
+        window.__wgZoomSel = sel || "";
+        if (window.__wgSetZoomBadge)
+            window.__wgSetZoomBadge(n, sel || "");
+    };
+    // Mount zoom HUD immediately so demos always show 1.00x.
+    if (window.__wgEnsureZoomBadge)
+        window.__wgEnsureZoomBadge();
+}

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

@@ -0,0 +1,2 @@
+import type { OverlayInstallArgs } from "../../types.js";
+export declare function installTodos({ todoPos }: OverlayInstallArgs): void;