waygraph 0.15.27 → 0.15.29

package/dist/runner/inpage/device.js

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

package/dist/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();
+}