waygraph 0.15.54 → 0.16.0

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

@@ -0,0 +1,200 @@
+// In-page installer (page.evaluate target) - must stay self-contained, no module-scope closure
+// (page.evaluate serializes ONLY the passed function's own source, not sibling top-level
+// functions in this file - every helper below is nested inside addNetworkEntry itself for exactly
+// that reason; a row's click handler still works after addNetworkEntry returns because it's a
+// closure over ITS OWN invocation's nested helpers, not a reference to module scope).
+//
+// A real network-tab overlay (`#wg-network-log`): the DevTools Network panel itself can't be
+// embedded (it lives in browser chrome, not reachable from automation), but every entry's real
+// data is - this renders that, on-page: method, url, status, and (click a row) request/response
+// headers + bodies + a "copy as cURL" command, a Postman-style inspector for both real page
+// traffic (installNetworkCapture, network-capture.js) and defineApiBlock's own page.request calls.
+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(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({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }: any): 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({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }) {
+    // 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({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }: any): 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({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }) {
+    // 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({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }: any): void;