waygraph 0.15.28 → 0.15.29

package/dist/runner/inpage/banner.js

@@ -0,0 +1,68 @@
+// 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 installBanner({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }) {
+        const POSITIONS = ["left", "center", "right"];
+        const applyPos = (el, pos) => {
+          el.dataset.pos = pos;
+          try {
+            localStorage.setItem("wg-banner-pos", pos);
+          } catch {
+            /* private mode / blocked storage - position still applies this page */
+          }
+        };
+        if (title) {
+          let banner = document.getElementById("wg-banner");
+          if (!banner) {
+            banner = document.createElement("div");
+            banner.id = "wg-banner";
+            let saved = null;
+            try {
+              saved = localStorage.getItem("wg-banner-pos");
+            } catch {
+              /* ignore */
+            }
+            const startPos =
+              saved && POSITIONS.includes(saved) ? saved : bannerPos;
+            applyPos(banner, startPos);
+            banner.title = "Click to move: top left / center / right";
+            banner.addEventListener("click", (e) => {
+              e.stopPropagation();
+              const i = POSITIONS.indexOf(banner.dataset.pos || "left");
+              applyPos(banner, POSITIONS[(i + 1) % POSITIONS.length]);
+            });
+            const tag = document.createElement("span");
+            tag.className = "wg-banner-tag";
+            tag.textContent = "waygraph demo";
+            const text = document.createElement("span");
+            text.className = "wg-banner-text";
+            text.textContent = title;
+            banner.appendChild(tag);
+            banner.appendChild(text);
+            document.documentElement.appendChild(banner);
+          } else {
+            // Fixture / episode title changes every step - update in place
+            // (banner is created once; do not leave the first step's text stuck).
+            let text = banner.querySelector(".wg-banner-text");
+            if (!text) {
+              text = document.createElement("span");
+              text.className = "wg-banner-text";
+              banner.appendChild(text);
+            }
+            text.textContent = title;
+          }
+        }
+        // Tab title/favicon: a real navigation resets document.title and any
+        // <link rel="icon"> the new document brings, so re-check (not
+        // re-append) on every call instead of a one-time flag.
+        if (!document.title.startsWith("[waygraph] ")) {
+          document.title = "[waygraph] " + document.title;
+        }
+        let iconLink = document.querySelector("link[rel~='icon']");
+        if (!iconLink) {
+          iconLink = document.createElement("link");
+          iconLink.rel = "icon";
+          document.head.appendChild(iconLink);
+        }
+        if (iconLink.href !== favicon) iconLink.href = favicon;
+}

package/dist/runner/inpage/core.js

@@ -0,0 +1,267 @@
+// 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 installCore({ title, favicon, bannerPos, todoPos, envAutoplay, todoDockUi }) {
+        window.__wgTodoDockUi = todoDockUi || {
+          compact: true,
+          cap: 5,
+          expandCap: 14,
+          collision: true,
+          behindRing: true,
+        };
+        // Seed the live autoplay toggle from the env default on first ever
+        // load only - a real navigation re-runs this, and re-stamping here
+        // would silently undo a human's mid-run checkbox click.
+        try {
+          if (localStorage.getItem("wg-autoplay") === null) {
+            localStorage.setItem("wg-autoplay", envAutoplay ? "1" : "0");
+          }
+        } catch {
+          /* private mode / blocked storage - falls back to manual gating */
+        }
+        if (!document.getElementById("wg-ring")) {
+          const ring = document.createElement("div");
+          ring.id = "wg-ring";
+          document.documentElement.appendChild(ring);
+        }
+        if (!document.getElementById("wg-ring-label")) {
+          const ringLabel = document.createElement("div");
+          ringLabel.id = "wg-ring-label";
+          document.documentElement.appendChild(ringLabel);
+        }
+        if (!document.getElementById("wg-cursor")) {
+          const cursor = document.createElement("div");
+          cursor.id = "wg-cursor";
+          // Dark fill + white stroke, same as help-center-clip-engine's own
+          // #clip-cursor - visible against any page background, light or
+          // dark, unlike a plain solid-white shape.
+          cursor.innerHTML =
+            "<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>";
+          document.documentElement.appendChild(cursor);
+        }
+        if (!document.getElementById("wg-click-pulse")) {
+          const pulse = document.createElement("div");
+          pulse.id = "wg-click-pulse";
+          document.documentElement.appendChild(pulse);
+        }
+        window.__wgMoveCursorTo = (x, y, ms, instant) => {
+          const cursor = document.getElementById("wg-cursor");
+          if (!cursor) return;
+          cursor.style.setProperty("--wg-cursor-ms", (ms || 600) + "ms");
+          if (instant) {
+            const prev = cursor.style.transition;
+            cursor.style.transition = "none";
+            cursor.style.transform = "translate(" + x + "px," + y + "px)";
+            void cursor.offsetWidth;
+            cursor.style.transition = prev || "";
+          } else {
+            cursor.style.transform = "translate(" + x + "px," + y + "px)";
+          }
+          cursor.style.opacity = "1";
+        };
+        window.__wgHideCursor = () => {
+          const cursor = document.getElementById("wg-cursor");
+          if (cursor) cursor.style.opacity = "0";
+        };
+        window.__wgPositionRing = (box, label, tone, style) => {
+          const ring = document.getElementById("wg-ring");
+          const ringLabel = document.getElementById("wg-ring-label");
+          if (!ring || !ringLabel || !box) return;
+          const raw = (tone || "planned") + "";
+          const t =
+            raw === "auto" || raw === "info" || raw === "warning" || raw === "danger" || raw === "success"
+              ? raw
+              : "planned";
+          const st = style && typeof style === "object" ? style : {};
+          const sizeRaw = (st.size || "md") + "";
+          const size =
+            sizeRaw === "sm" || sizeRaw === "lg" ? sizeRaw : "md";
+          const weightRaw = (st.weight || "normal") + "";
+          const weight = weightRaw === "bold" ? "bold" : "normal";
+          ring.dataset.tone = t;
+          ringLabel.dataset.tone = t;
+          ring.dataset.size = size;
+          ringLabel.dataset.size = size;
+          ringLabel.dataset.weight = weight;
+          const pad = size === "sm" ? 3 : size === "lg" ? 10 : 6;
+          const margin = 6;
+          const vw = window.innerWidth;
+          const vh = window.innerHeight;
+          // Pin ring EXACTLY to the element - never clamp the ring away from
+          // the target (that looked "strapped on" the viewport).
+          const left = box.x - pad;
+          const top = box.y - pad;
+          const width = Math.max(4, box.width + pad * 2);
+          const height = Math.max(4, box.height + pad * 2);
+          ring.style.left = left + "px";
+          ring.style.top = top + "px";
+          ring.style.width = width + "px";
+          ring.style.height = height + "px";
+          ring.style.opacity = "1";
+          ringLabel.textContent = label || "";
+          ringLabel.style.opacity = "1";
+          const lw = ringLabel.offsetWidth;
+          const lh = ringLabel.offsetHeight;
+          let labelLeft = left;
+          let labelTop = top + height + 8;
+          if (labelTop + lh > vh - margin) labelTop = top - lh - 8;
+          if (labelTop < margin) labelTop = margin;
+          if (labelLeft + lw > vw - margin) labelLeft = Math.max(margin, vw - margin - lw);
+          if (labelLeft < margin) labelLeft = margin;
+          ringLabel.style.left = labelLeft + "px";
+          ringLabel.style.top = labelTop + "px";
+          if (window.__wgTodosSetBehind) window.__wgTodosSetBehind(true);
+          if (window.__wgTodosAvoidRingCollision) window.__wgTodosAvoidRingCollision(box);
+        };
+        /** Dim/lower floating todo docks while a ring caption is the focus. */
+        window.__wgTodosSetBehind = (on) => {
+          const ui = window.__wgTodoDockUi || {};
+          if (ui.behindRing === false) {
+            document.querySelectorAll(".wg-todo-dock, #wg-todo-dock").forEach((el) => {
+              el.classList.remove("wg-todo-behind");
+            });
+            return;
+          }
+          document.querySelectorAll(".wg-todo-dock, #wg-todo-dock").forEach((el) => {
+            el.classList.toggle("wg-todo-behind", !!on);
+          });
+        };
+        /**
+         * If the active ring box intersects a todo dock, flip L/R once.
+         * Locked until hideRing so follow-rAF does not thrash.
+         */
+        window.__wgTodosAvoidRingCollision = (box) => {
+          const ui = window.__wgTodoDockUi || {};
+          if (ui.collision === false) return;
+          if (!box || window.__wgTodoCollisionLocked) return;
+          const pad = 10;
+          const rx1 = box.x - pad;
+          const ry1 = box.y - pad;
+          const rx2 = box.x + box.width + pad;
+          const ry2 = box.y + box.height + pad;
+          const overlaps = (el) => {
+            const r = el.getBoundingClientRect();
+            return !(r.right < rx1 || r.left > rx2 || r.bottom < ry1 || r.top > ry2);
+          };
+          const docks = [...document.querySelectorAll(".wg-todo-dock, #wg-todo-dock")].filter(
+            (el, i, arr) => arr.indexOf(el) === i,
+          );
+          for (const dock of docks) {
+            if (!overlaps(dock)) continue;
+            const cur = dock.dataset.pos === "right" ? "right" : "left";
+            dock.dataset.pos = cur === "right" ? "left" : "right";
+            try {
+              localStorage.setItem("wg-todo-pos", dock.dataset.pos);
+            } catch {
+              /* ignore */
+            }
+            // Still colliding after flip - tuck (shorter max-height).
+            if (overlaps(dock)) dock.dataset.tucked = "1";
+            else delete dock.dataset.tucked;
+            window.__wgTodoCollisionLocked = true;
+            break;
+          }
+        };
+        /** Live-follow a selector with rAF (accurate under device shell scale). */
+        window.__wgStopRingFollow = () => {
+          if (window.__wgRingFollowRaf) {
+            cancelAnimationFrame(window.__wgRingFollowRaf);
+            window.__wgRingFollowRaf = 0;
+          }
+          window.__wgRingFollowSel = "";
+        };
+        window.__wgFollowRing = (sel, label, tone, style, focus) => {
+          window.__wgStopRingFollow();
+          if (!sel) return;
+          window.__wgRingFollowSel = sel;
+          const tick = () => {
+            if (window.__wgRingFollowSel !== sel) return;
+            const el = document.querySelector(sel);
+            if (!el) {
+              window.__wgRingFollowRaf = requestAnimationFrame(tick);
+              return;
+            }
+            const r = el.getBoundingClientRect();
+            const box = { x: r.x, y: r.y, width: r.width, height: r.height };
+            if (window.__wgPositionRing) {
+              window.__wgPositionRing(box, label, tone || "planned", style || {});
+            }
+            if (focus && window.__wgApplyFocus) window.__wgApplyFocus(box);
+            window.__wgRingFollowRaf = requestAnimationFrame(tick);
+          };
+          tick();
+        };
+        window.__wgClickPulse = (x, y, tone) => {
+          const pulse = document.getElementById("wg-click-pulse");
+          if (!pulse) return;
+          const raw = (tone || "planned") + "";
+          pulse.dataset.tone =
+            raw === "auto" || raw === "info" || raw === "warning" || raw === "danger" || raw === "success"
+              ? raw
+              : "planned";
+          pulse.style.left = x + "px";
+          pulse.style.top = y + "px";
+          pulse.classList.remove("wg-pulse");
+          void pulse.offsetWidth;
+          pulse.classList.add("wg-pulse");
+        };
+        window.__wgHideRing = (opts) => {
+          // While a narrate() call owns the ring (mid multi-step action),
+          // the auto-highlight click/fill patches' own end-of-step hide is
+          // a no-op - narrate() itself clears it once the WHOLE wrapped
+          // action finishes, not just its first sub-step.
+          if (window.__wgNarrateOwnsRing) return;
+          if (window.__wgStopRingFollow) window.__wgStopRingFollow();
+          const ring = document.getElementById("wg-ring");
+          const ringLabel = document.getElementById("wg-ring-label");
+          if (ring) ring.style.opacity = "0";
+          if (ringLabel) ringLabel.style.opacity = "0";
+          if (window.__wgClearFocus) window.__wgClearFocus();
+          if (window.__wgTodosSetBehind) window.__wgTodosSetBehind(false);
+          window.__wgTodoCollisionLocked = false;
+          document.querySelectorAll(".wg-todo-dock[data-tucked], #wg-todo-dock[data-tucked]").forEach((el) => {
+            delete el.dataset.tucked;
+          });
+          // Honor zoomOut:false - keep camera until next zoom / desktop clear.
+          const forceClear = opts && opts.clearZoom === true;
+          const skipClear = opts && opts.clearZoom === false;
+          if (
+            !skipClear &&
+            (forceClear || window.__wgZoomOutOnHide !== false) &&
+            window.__wgClearZoom
+          ) {
+            window.__wgClearZoom();
+          }
+        };
+        window.__wgClearFocus = () => {
+          const veil = document.getElementById("wg-focus-veil");
+          if (!veil) return;
+          veil.classList.remove("wg-in");
+          setTimeout(() => {
+            const v = document.getElementById("wg-focus-veil");
+            if (v && !v.classList.contains("wg-in")) v.remove();
+          }, 320);
+        };
+        window.__wgApplyFocus = (box) => {
+          if (!box) {
+            if (window.__wgClearFocus) window.__wgClearFocus();
+            return;
+          }
+          let veil = document.getElementById("wg-focus-veil");
+          if (!veil) {
+            veil = document.createElement("div");
+            veil.id = "wg-focus-veil";
+            veil.setAttribute("data-wg-ui", "1");
+            document.documentElement.appendChild(veil);
+          }
+          const pad = 10;
+          veil.style.left = Math.max(0, box.x - pad) + "px";
+          veil.style.top = Math.max(0, box.y - pad) + "px";
+          veil.style.width = Math.max(8, box.width + pad * 2) + "px";
+          veil.style.height = Math.max(8, box.height + pad * 2) + "px";
+          void veil.offsetWidth;
+          veil.classList.add("wg-in");
+        };
+}

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