waygraph 0.15.28 → 0.15.29

package/dist/runner/inpage/panel-chrome.js

@@ -0,0 +1,152 @@
+// In-page installer (runs inside the browser via page.evaluate): must stay self-contained - no module-scope closure.
+// Split out of the former single installOverlay evaluate (see src/ARCHITECTURE.md). Shares state only via window.__wg*.
+/* eslint-disable no-unused-vars */
+export function installPanelChrome({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }) {
+        // Hide/Show for #wg-panel - call after every panel.innerHTML 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;
+          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 = document.getElementById("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;
+            if (titleEl) {
+              titleEl.textContent = hidden
+                ? (label || chromeTitle || "waygraph demo")
+                : (chromeTitle || "waygraph demo");
+            }
+            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 = document.getElementById("wg-run");
+              if (runBtn && !runBtn.disabled) {
+                runBtn.click();
+                return;
+              }
+              if (typeof window.__wgNext === "function") window.__wgNext({});
+            });
+          }
+          const autoCb = document.getElementById("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/runner/inpage/stamp.js

@@ -0,0 +1,46 @@
+// In-page installer (runs inside the browser via page.evaluate): must stay self-contained - no module-scope closure.
+// Split out of the former single installOverlay evaluate (see src/ARCHITECTURE.md). Shares state only via window.__wg*.
+/* eslint-disable no-unused-vars */
+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(document.querySelectorAll("[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 = document.getElementById("wg-banner");
+        if (existingBanner) window.__wgStampModal(existingBanner, "banner", { ready: true });
+}

package/dist/runner/inpage/swipe-zoom.js

@@ -0,0 +1,220 @@
+// In-page installer (runs inside the browser via page.evaluate): must stay self-contained - no module-scope closure.
+// Split out of the former single installOverlay evaluate (see src/ARCHITECTURE.md). Shares state only via window.__wg*.
+/* eslint-disable no-unused-vars */
+export function installSwipeZoom({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }) {
+        /**
+         * 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 = document.getElementById("wg-swipe-layer");
+          if (layer && layer._wgTimer) {
+            clearTimeout(layer._wgTimer);
+            layer._wgTimer = null;
+          }
+          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);
+          document.documentElement.appendChild(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 = document.getElementById("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 = document.getElementById("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="#fde68a" 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 = document.getElementById("wg-zoom-badge");
+          if (!badge) {
+            badge = document.createElement("div");
+            badge.id = "wg-zoom-badge";
+            badge.setAttribute("data-wg-ui", "1");
+            document.documentElement.appendChild(badge);
+          }
+          const zoomed = level > 1.001 || level < 0.999;
+          badge.dataset.zoomed = zoomed ? "1" : "0";
+          const txt = level.toFixed(2) + "\u00d7";
+          badge.innerHTML =
+            '<span class="wg-zoom-ico">' +
+            ZOOM_ICO +
+            '</span><span class="wg-zoom-val">' +
+            txt +
+            "</span>";
+          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 = document.getElementById("wg-typing-badge");
+          if (!on) {
+            if (badge) {
+              badge.classList.remove("wg-in");
+              setTimeout(() => {
+                const b = document.getElementById("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");
+            document.documentElement.appendChild(badge);
+          }
+          const text = label ? String(label).slice(0, 40) : "typing";
+          badge.innerHTML =
+            '<span class="wg-ty-dots">\u25cf\u25cf\u25cf</span><span>typing \u00b7 ' +
+            text.replace(/</g, "&lt;") +
+            "</span>";
+          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 = document.getElementById("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();
+}