waygraph 0.15.53 → 0.16.0

package/dist/runner/inpage/device.js

@@ -1,211 +0,0 @@
-// 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 = __wgById("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 = __wgById("wg-device-badge");
-            if (preset === "desktop" && !touch) {
-              if (badge) {
-                badge.classList.remove("wg-in");
-                setTimeout(() => {
-                  const b = __wgById("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");
-              __wgAdd(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 = __wgById("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");
-              __wgAdd(toast);
-            }
-            // Hide chip while toast is up (same corner).
-            const badge = __wgById("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 = __wgById("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 = __wgById("wg-device-badge");
-                if (badge) badge.remove();
-              }, 2600);
-            } else {
-              const badge = __wgById("wg-device-badge");
-              if (badge) badge.remove();
-              const toast = __wgById("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/network.d.ts

@@ -1,15 +0,0 @@
-/** In-page installer (page.evaluate target) - see network.js's own header. */
-export interface NetworkEntry {
-  method: string;
-  url: string;
-  status: number;
-  ok: boolean;
-  ms?: number | undefined;
-  reqHeaders?: Record<string, string> | undefined;
-  resHeaders?: Record<string, string> | undefined;
-  reqBody?: string | undefined;
-  resBody?: string | undefined;
-}
-export function addNetworkEntry(entry: NetworkEntry): void;
-export function setNetworkTabVisible(visible: boolean): void;
-export function clearNetworkLog(): void;

package/dist/runner/inpage/network.js

@@ -1,217 +0,0 @@
-// 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") return;
-
-  function esc(s) {
-    const d = document.createElement("div");
-    d.textContent = String(s == null ? "" : s);
-    return d.innerHTML;
-  }
-
-  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 '<div class="wg-net-empty">(none)</div>';
-    return (
-      '<table class="wg-net-headers">' +
-      keys.map((k) => "<tr><td>" + esc(k) + "</td><td>" + esc(h[k]) + "</td></tr>").join("") +
-      "</table>"
-    );
-  }
-
-  function renderBody(body) {
-    if (body === undefined || body === null || body === "") return '<div class="wg-net-empty">(empty)</div>';
-    let text = body;
-    try {
-      text = JSON.stringify(JSON.parse(body), null, 2);
-    } catch {
-      /* not JSON - show raw */
-    }
-    return "<pre class=\"wg-net-body\">" + esc(String(text).slice(0, 4000)) + "</pre>";
-  }
-
-  function renderDetail(e) {
-    return (
-      '<div class="wg-net-detail-section"><h4>Request headers</h4>' +
-      renderHeaders(e.reqHeaders) +
-      "</div>" +
-      (e.reqBody
-        ? '<div class="wg-net-detail-section"><h4>Request body</h4>' + renderBody(e.reqBody) + "</div>"
-        : "") +
-      '<div class="wg-net-detail-section"><h4>Response headers</h4>' +
-      renderHeaders(e.resHeaders) +
-      "</div>" +
-      '<div class="wg-net-detail-section"><h4>Response body</h4>' +
-      renderBody(e.resBody) +
-      "</div>" +
-      '<div class="wg-net-detail-section"><h4>cURL</h4>' +
-      '<pre class="wg-net-body wg-net-curl">' +
-      esc(toCurl(e)) +
-      "</pre>" +
-      '<button type="button" class="wg-net-copy" data-copy="1">Copy as cURL</button></div>'
-    );
-  }
-
-  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");
-  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 */
-  }
-  row.innerHTML =
-    '<span class="wg-net-method wg-net-method-' +
-    methodClass(entry.method) +
-    '">' +
-    esc((entry.method || "GET").toUpperCase()) +
-    '</span><span class="wg-net-path" title="' +
-    esc(entry.url) +
-    '">' +
-    esc(path) +
-    '</span><span class="wg-net-status">' +
-    esc(entry.status) +
-    (entry.ms !== undefined ? '</span><span class="wg-net-ms">' + esc(entry.ms) + "ms</span>" : "</span>");
-  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";
-    detail.innerHTML = 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.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/runner/inpage/panel-chrome.js

@@ -1,192 +0,0 @@
-// 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;
-          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.innerHTML =
-              '<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.innerHTML =
-              '<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);
-            }
-          }
-        };
-}