@ranganathmk/trq 0.1.0

package/dist/studio/main/bootstrap.js

@@ -0,0 +1,708 @@
+"use strict";
+(() => {
+  // src/selectors.ts
+  var INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
+    "button",
+    "link",
+    "option",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "tab",
+    "checkbox",
+    "radio",
+    "switch",
+    "treeitem"
+  ]);
+  function hasInteractiveRole(el) {
+    const role = el.getAttribute("role");
+    return !!role && INTERACTIVE_ROLES.has(role);
+  }
+  function isClickableElement(el) {
+    return el.tagName === "BUTTON" || el.tagName === "A" || hasInteractiveRole(el) || el.tagName.includes("-");
+  }
+  function buildSelectors(el) {
+    const list = [];
+    const ariaName = computeAccessibleName(el);
+    if (ariaName) list.push([`aria/${ariaName}`]);
+    for (const attr of ["data-testid", "data-test", "data-cy", "data-qa"]) {
+      const v = el.getAttribute(attr);
+      if (v) list.push([`[${attr}='${cssEscape(v)}']`]);
+    }
+    if (isClickableElement(el)) {
+      const text = el.textContent?.trim();
+      if (text && text.length > 0 && text.length < 80) {
+        list.push([`text/${text}`]);
+      }
+    }
+    list.push([buildCssPath(el)]);
+    list.push([`xpath=${buildXPath(el)}`]);
+    return list;
+  }
+  function computeAccessibleName(el) {
+    const ariaLabel = el.getAttribute("aria-label")?.trim();
+    if (ariaLabel) return ariaLabel;
+    const labelledBy = el.getAttribute("aria-labelledby");
+    if (labelledBy) {
+      const ref = document.getElementById(labelledBy);
+      if (ref) {
+        const t = ref.textContent?.trim();
+        if (t) return t;
+      }
+    }
+    if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
+      if (el.id) {
+        const label = document.querySelector(`label[for='${cssEscape(el.id)}']`);
+        const t = label?.textContent?.trim();
+        if (t) return t;
+      }
+      const placeholder = el.getAttribute("placeholder")?.trim();
+      if (placeholder) return placeholder;
+      const name = el.getAttribute("name")?.trim();
+      if (name) return name;
+    }
+    if (el.tagName === "BUTTON" || el.tagName === "A" || hasInteractiveRole(el) || el.tagName.includes("-")) {
+      const t = el.textContent?.trim();
+      if (t && t.length < 80) return t;
+    }
+    const title = el.getAttribute("title")?.trim();
+    if (title) return title;
+    return null;
+  }
+  function isDynamicId(id) {
+    if (/^(mat|cdk|ng|md|rc|react-select|radix-)/i.test(id) && /\d/.test(id)) return true;
+    if (/^:r[a-z0-9]+:?$/.test(id)) return true;
+    if (/^[a-z]+-\d{3,}$/i.test(id)) return true;
+    return false;
+  }
+  function buildCssPath(el) {
+    const parts = [];
+    let cur = el;
+    let depth = 0;
+    while (cur && cur.nodeType === 1 && depth < 8) {
+      let part = cur.tagName.toLowerCase();
+      if (cur.id && !isDynamicId(cur.id)) {
+        parts.unshift(`#${cssEscape(cur.id)}`);
+        break;
+      }
+      const classAttr = cur.getAttribute("class");
+      const classes = classAttr ? classAttr.trim().split(/\s+/).filter((c) => c && !/^\d/.test(c)).slice(0, 2) : [];
+      if (classes.length) part += "." + classes.map(cssEscape).join(".");
+      const parent = cur.parentElement;
+      if (parent) {
+        const sameTag = Array.from(parent.children).filter((c) => c.tagName === cur.tagName);
+        if (sameTag.length > 1) {
+          part += `:nth-of-type(${sameTag.indexOf(cur) + 1})`;
+        }
+      }
+      parts.unshift(part);
+      if (cur === document.body) break;
+      cur = cur.parentElement;
+      depth++;
+    }
+    return parts.join(" > ");
+  }
+  function buildXPath(el) {
+    const parts = [];
+    let cur = el;
+    while (cur && cur.nodeType === 1 && cur !== document.documentElement) {
+      const parent = cur.parentElement;
+      if (!parent) break;
+      const sameTag = Array.from(parent.children).filter((c) => c.tagName === cur.tagName);
+      const idx = sameTag.indexOf(cur) + 1;
+      parts.unshift(`${cur.tagName.toLowerCase()}[${idx}]`);
+      cur = parent;
+    }
+    return "/html/" + parts.join("/");
+  }
+  function cssEscape(s) {
+    if (typeof CSS !== "undefined" && CSS.escape) return CSS.escape(s);
+    return s.replace(/(['"\\])/g, "\\$1");
+  }
+
+  // src/bootstrap.ts
+  (() => {
+    if (window.__trqInstalled) return;
+    window.__trqInstalled = true;
+    window.__trqMode = window.__trqMode || "recording";
+    let stepCount = 0;
+    let renderOverlay = null;
+    window.__trqSetStep = (n) => {
+      stepCount = n;
+      renderOverlay?.();
+    };
+    function emit(event) {
+      if (window.__trqMode !== "recording") return;
+      if (typeof window.__trqEmit !== "function") return;
+      try {
+        window.__trqEmit(JSON.stringify(event));
+      } catch {
+      }
+    }
+    function emitMeta(event) {
+      if (typeof window.__trqEmit !== "function") return;
+      try {
+        window.__trqEmit(JSON.stringify(event));
+      } catch {
+      }
+    }
+    function getViewport() {
+      return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        devicePixelRatio: window.devicePixelRatio
+      };
+    }
+    function targetSnapshot(el) {
+      const attrs = {};
+      for (const a of Array.from(el.attributes)) attrs[a.name] = a.value;
+      const rect = el.getBoundingClientRect();
+      const text = el.textContent?.trim().slice(0, 200) ?? null;
+      return {
+        tagName: el.tagName,
+        textContent: text,
+        attributes: attrs,
+        boundingBox: {
+          x: Math.round(rect.x),
+          y: Math.round(rect.y),
+          width: Math.round(rect.width),
+          height: Math.round(rect.height)
+        }
+      };
+    }
+    function isInteractive(el) {
+      const tag = el.tagName;
+      if (tag === "BUTTON" || tag === "A" || tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA") return true;
+      const role = el.getAttribute("role");
+      if (role && ["button", "link", "checkbox", "radio", "tab", "menuitem", "option", "switch"].includes(role)) return true;
+      if (el.hasAttribute("onclick")) return true;
+      const tabIndex = el.tabIndex;
+      if (typeof tabIndex === "number" && tabIndex >= 0 && el.hasAttribute("tabindex")) return true;
+      return false;
+    }
+    function mouseModifiers(e) {
+      const m = [];
+      if (e.altKey) m.push("Alt");
+      if (e.ctrlKey) m.push("Control");
+      if (e.metaKey) m.push("Meta");
+      if (e.shiftKey) m.push("Shift");
+      return m;
+    }
+    function keyModifiers(e) {
+      const m = [];
+      if (e.altKey) m.push("Alt");
+      if (e.ctrlKey) m.push("Control");
+      if (e.metaKey) m.push("Meta");
+      if (e.shiftKey) m.push("Shift");
+      return m;
+    }
+    function isInputLike(el) {
+      return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT";
+    }
+    function getInputKind(el) {
+      if (el.tagName === "TEXTAREA") return "textarea";
+      if (el.tagName === "SELECT") {
+        return el.multiple ? "select-multiple" : "select-one";
+      }
+      if (el.tagName === "INPUT") {
+        const type = el.type;
+        if (type === "checkbox") return "checkbox";
+        if (type === "radio") return "radio";
+        return "text";
+      }
+      return "unknown";
+    }
+    function isPassword(el) {
+      return el.tagName === "INPUT" && el.type === "password";
+    }
+    function readValue(el) {
+      if (el.tagName === "INPUT") {
+        const inp = el;
+        if (inp.type === "checkbox" || inp.type === "radio") return String(inp.checked);
+        return inp.value;
+      }
+      if (el.tagName === "TEXTAREA") return el.value;
+      if (el.tagName === "SELECT") {
+        const sel = el;
+        if (sel.multiple) {
+          return JSON.stringify(Array.from(sel.selectedOptions).map((o) => o.value));
+        }
+        return sel.value;
+      }
+      return "";
+    }
+    const lastEmitted = /* @__PURE__ */ new WeakMap();
+    function flushInput(el) {
+      if (!isInputLike(el)) return;
+      const value = readValue(el);
+      if (value === "[object Object]") return;
+      if (!lastEmitted.has(el)) {
+        lastEmitted.set(el, value);
+        return;
+      }
+      if (lastEmitted.get(el) === value) return;
+      lastEmitted.set(el, value);
+      emit({
+        type: "input",
+        timestamp: Date.now(),
+        url: location.href,
+        frame: "main",
+        target: targetSnapshot(el),
+        selectors: buildSelectors(el),
+        inputKind: getInputKind(el),
+        value,
+        isPassword: isPassword(el),
+        viewport: getViewport()
+      });
+    }
+    document.addEventListener(
+      "change",
+      (e) => {
+        if (!e.isTrusted) return;
+        if (e.target instanceof Element) flushInput(e.target);
+      },
+      true
+    );
+    document.addEventListener(
+      "focusout",
+      (e) => {
+        if (!e.isTrusted) return;
+        if (e.target instanceof Element) flushInput(e.target);
+      },
+      true
+    );
+    document.addEventListener(
+      "focusin",
+      (e) => {
+        if (!e.isTrusted) return;
+        if (e.target instanceof Element && isInputLike(e.target)) {
+          if (!lastEmitted.has(e.target)) {
+            lastEmitted.set(e.target, readValue(e.target));
+          }
+        }
+      },
+      true
+    );
+    const SPECIAL_KEYS = /* @__PURE__ */ new Set([
+      "Enter",
+      "Tab",
+      "Escape",
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight"
+    ]);
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (!e.isTrusted) return;
+        if (!SPECIAL_KEYS.has(e.key)) return;
+        const target = e.target;
+        if (!(target instanceof Element)) return;
+        if ((e.key === "Enter" || e.key === "Tab") && isInputLike(target)) {
+          flushInput(target);
+        }
+        emit({
+          type: "key",
+          timestamp: Date.now(),
+          url: location.href,
+          frame: "main",
+          target: targetSnapshot(target),
+          selectors: buildSelectors(target),
+          key: e.key,
+          modifiers: keyModifiers(e),
+          viewport: getViewport()
+        });
+      },
+      true
+    );
+    let assertMode = null;
+    let onAssertModeExit = null;
+    let highlightHost = null;
+    let highlightedEl = null;
+    function ensureHighlightHost() {
+      if (highlightHost) return highlightHost;
+      highlightHost = document.createElement("div");
+      highlightHost.id = "__trq_highlight";
+      highlightHost.style.cssText = [
+        "position:fixed !important",
+        "left:0 !important",
+        "top:0 !important",
+        "width:0 !important",
+        "height:0 !important",
+        "pointer-events:none !important",
+        "z-index:2147483646 !important",
+        "border:2px solid #3b82f6 !important",
+        "background:rgba(59,130,246,.10) !important",
+        "border-radius:3px !important",
+        "box-shadow:0 0 0 9999px rgba(0,0,0,.18) !important",
+        "display:none !important",
+        "transition:left .04s, top .04s, width .04s, height .04s !important"
+      ].join(";");
+      document.documentElement.appendChild(highlightHost);
+      return highlightHost;
+    }
+    function showHighlight(el) {
+      if (highlightedEl === el) return;
+      highlightedEl = el;
+      const host = ensureHighlightHost();
+      const r = el.getBoundingClientRect();
+      host.style.setProperty("display", "block", "important");
+      host.style.setProperty("left", `${r.left - 2}px`, "important");
+      host.style.setProperty("top", `${r.top - 2}px`, "important");
+      host.style.setProperty("width", `${r.width}px`, "important");
+      host.style.setProperty("height", `${r.height}px`, "important");
+    }
+    function clearHighlight() {
+      highlightedEl = null;
+      if (highlightHost) highlightHost.style.setProperty("display", "none", "important");
+    }
+    let menuHost = null;
+    function unmountMenu() {
+      if (menuHost) {
+        menuHost.remove();
+        menuHost = null;
+      }
+    }
+    function isInOverlay(target) {
+      if (!(target instanceof Element)) return false;
+      return target.id === "__trq_overlay" || target.id === "__trq_assert_menu";
+    }
+    function enterAssertPicking() {
+      if (assertMode !== null) return;
+      assertMode = "picking";
+      document.documentElement.style.setProperty("cursor", "crosshair", "important");
+      ensureHighlightHost();
+    }
+    function exitAssertMode() {
+      assertMode = null;
+      document.documentElement.style.removeProperty("cursor");
+      clearHighlight();
+      unmountMenu();
+      onAssertModeExit?.();
+    }
+    function onElementPicked(el) {
+      if (assertMode !== "picking") return;
+      assertMode = "editing";
+      clearHighlight();
+      mountMenu(el);
+    }
+    function emitAssertion(el, spec) {
+      emit({
+        type: "assert",
+        timestamp: Date.now(),
+        url: location.href,
+        frame: "main",
+        target: targetSnapshot(el),
+        selectors: buildSelectors(el),
+        assertion: spec,
+        viewport: getViewport()
+      });
+    }
+    function mountMenu(el) {
+      unmountMenu();
+      const rect = el.getBoundingClientRect();
+      menuHost = document.createElement("div");
+      menuHost.id = "__trq_assert_menu";
+      const below = window.innerHeight - rect.bottom > 220;
+      const top = below ? rect.bottom + 8 : Math.max(8, rect.top - 220);
+      const left = Math.min(
+        Math.max(8, rect.left),
+        window.innerWidth - 360
+      );
+      menuHost.style.cssText = [
+        "position:fixed !important",
+        `top:${top}px !important`,
+        `left:${left}px !important`,
+        "z-index:2147483647 !important",
+        "pointer-events:auto !important",
+        "margin:0 !important",
+        "padding:0 !important"
+      ].join(";");
+      const shadow = menuHost.attachShadow({ mode: "closed" });
+      const text = el.textContent?.trim() ?? "";
+      const hasText = text.length > 0 && text.length < 200;
+      const isInputEl = el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement;
+      const value = isInputEl ? readValue(el) : "";
+      shadow.innerHTML = `
+      <style>
+        :host { all: initial; }
+        .menu {
+          background:#1a1a1a; color:#fff;
+          font: 13px/1.4 system-ui, sans-serif;
+          padding:14px 16px; border-radius:10px;
+          box-shadow:0 8px 32px rgba(0,0,0,.4);
+          width:340px; user-select:none;
+        }
+        .head { color:#a3a3a3; font-size:11px; margin-bottom:10px; text-transform:uppercase; letter-spacing:.5px; }
+        .head b { color:#fff; font-weight:600; text-transform:none; letter-spacing:0; }
+        .row { display:flex; align-items:center; gap:8px; padding:6px 0; }
+        .row label { display:flex; align-items:center; gap:8px; cursor:pointer; flex:1; }
+        .row input[type=radio] { accent-color:#3b82f6; }
+        .row input[type=text] {
+          flex:1; background:#0e0e0e; color:#fff; border:1px solid #2a2a2a;
+          border-radius:5px; padding:5px 8px; font: 12px/1.2 ui-monospace, monospace;
+          min-width:0;
+        }
+        .row input[type=text]:focus { outline:none; border-color:#3b82f6; }
+        .row input[type=text]:disabled { opacity:.4; }
+        .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
+        button.b {
+          background:#2a2a2a; color:#fff; border:0; border-radius:6px;
+          padding:6px 14px; font: 12px/1 system-ui, sans-serif; cursor:pointer;
+        }
+        button.b:hover { background:#3a3a3a; }
+        button.b.primary { background:#3b82f6; }
+        button.b.primary:hover { background:#2563eb; }
+      </style>
+      <div class="menu">
+        <div class="head">Assert about <b>&lt;${el.tagName.toLowerCase()}&gt;</b></div>
+        <div class="row">
+          <label><input type="radio" name="kind" value="visible" ${!hasText && !isInputEl ? "checked" : ""}/> Is visible</label>
+        </div>
+        ${hasText ? `<div class="row">
+                <label><input type="radio" name="kind" value="text-equals" checked/> Has text</label>
+                <input type="text" id="text-input" value="${escapeAttr(text)}"/>
+              </div>` : ""}
+        ${isInputEl ? `<div class="row">
+                <label><input type="radio" name="kind" value="value-equals" ${!hasText ? "checked" : ""}/> Has value</label>
+                <input type="text" id="value-input" value="${escapeAttr(value)}"/>
+              </div>` : ""}
+        <div class="actions">
+          <button class="b" id="cancel" type="button">Cancel</button>
+          <button class="b primary" id="confirm" type="button">Confirm</button>
+        </div>
+      </div>
+    `;
+      document.documentElement.appendChild(menuHost);
+      const confirmBtn = shadow.getElementById("confirm");
+      const cancelBtn = shadow.getElementById("cancel");
+      cancelBtn?.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        exitAssertMode();
+      });
+      confirmBtn?.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        const checked = shadow.querySelector('input[name="kind"]:checked');
+        const kind = checked?.value ?? "visible";
+        let spec = { kind: "visible" };
+        if (kind === "text-equals") {
+          const inp = shadow.getElementById("text-input");
+          spec = { kind: "text-equals", text: inp?.value ?? "" };
+        } else if (kind === "value-equals") {
+          const inp = shadow.getElementById("value-input");
+          spec = { kind: "value-equals", value: inp?.value ?? "" };
+        }
+        emitAssertion(el, spec);
+        exitAssertMode();
+      });
+    }
+    function escapeAttr(s) {
+      return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+    let lastHoverEmit = 0;
+    const HOVER_THROTTLE_MS = 33;
+    document.addEventListener(
+      "mousemove",
+      (e) => {
+        const t = e.target;
+        if (!(t instanceof Element)) return;
+        if (isInOverlay(t)) return;
+        if (assertMode === "picking") {
+          showHighlight(t);
+          return;
+        }
+        if (window.__trqInspect) {
+          showHighlight(t);
+          const now = Date.now();
+          if (now - lastHoverEmit < HOVER_THROTTLE_MS) return;
+          lastHoverEmit = now;
+          let el = t;
+          let walked = 0;
+          while (!isInteractive(el) && el.parentElement && walked < 5) {
+            el = el.parentElement;
+            walked++;
+          }
+          if (el.tagName === "HTML" || el.tagName === "BODY") return;
+          emitMeta({
+            __trq: "hover",
+            timestamp: now,
+            target: targetSnapshot(el),
+            selectors: buildSelectors(el)
+          });
+        }
+      },
+      true
+    );
+    let highlightTimer = null;
+    window.__trqHighlight = (selectors) => {
+      if (typeof window.__trqResolveEl !== "function") return false;
+      const el = window.__trqResolveEl(selectors);
+      if (!el) return false;
+      el.scrollIntoView({ block: "center", behavior: "smooth" });
+      showHighlight(el);
+      if (highlightTimer !== null) clearTimeout(highlightTimer);
+      highlightTimer = window.setTimeout(() => {
+        clearHighlight();
+        highlightTimer = null;
+      }, 2e3);
+      return true;
+    };
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key !== "Escape") return;
+        if (assertMode !== null) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          exitAssertMode();
+        }
+      },
+      true
+    );
+    document.addEventListener(
+      "click",
+      (e) => {
+        if (!e.isTrusted) return;
+        const target = e.target;
+        if (!(target instanceof Element)) return;
+        if (assertMode === "picking" && !isInOverlay(target)) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          onElementPicked(target);
+          return;
+        }
+        if (assertMode === "editing" && !isInOverlay(target)) {
+          return;
+        }
+        const active = document.activeElement;
+        if (active instanceof Element && isInputLike(active)) flushInput(active);
+        let el = target;
+        let walked = 0;
+        let foundInteractive = isInteractive(el);
+        while (!foundInteractive && el.parentElement && walked < 5) {
+          el = el.parentElement;
+          walked++;
+          foundInteractive = isInteractive(el);
+        }
+        if (!foundInteractive) return;
+        if (el.tagName === "HTML" || el.tagName === "BODY") return;
+        const rect = el.getBoundingClientRect();
+        emit({
+          type: "click",
+          timestamp: Date.now(),
+          url: location.href,
+          frame: "main",
+          target: targetSnapshot(el),
+          selectors: buildSelectors(el),
+          click: {
+            button: ["left", "middle", "right"][e.button] ?? "left",
+            clickCount: e.detail || 1,
+            modifiers: mouseModifiers(e),
+            offsetX: Math.round(e.clientX - rect.x),
+            offsetY: Math.round(e.clientY - rect.y)
+          },
+          viewport: getViewport()
+        });
+      },
+      true
+    );
+    if (window === window.top) installOverlay();
+    if (typeof window.__trqEmit === "function") {
+      try {
+        window.__trqEmit(JSON.stringify({ __trq: "ready" }));
+      } catch {
+      }
+    }
+    function installOverlay() {
+      const mount = () => {
+        if (window.__trqInspect) return;
+        if (document.getElementById("__trq_overlay")) return;
+        const host = document.createElement("div");
+        host.id = "__trq_overlay";
+        host.style.cssText = [
+          "position:fixed !important",
+          "top:12px !important",
+          "left:50% !important",
+          "transform:translateX(-50%) !important",
+          "z-index:2147483647 !important",
+          "margin:0 !important",
+          "padding:0 !important",
+          "border:0 !important",
+          "display:inline-block !important",
+          "width:auto !important",
+          "height:auto !important",
+          "max-width:360px !important",
+          // Host receives pointer events so the Assert button is clickable.
+          // Inner spans default to pointer-events:none via the shadow CSS,
+          // so only the button captures clicks.
+          "pointer-events:auto !important",
+          "user-select:none !important"
+        ].join(";");
+        const shadow = host.attachShadow({ mode: "closed" });
+        shadow.innerHTML = `
+        <style>
+          /* Default everything inside the overlay to non-interactive so it
+             can't intercept the page's hover/click. Buttons opt back in. */
+          * { pointer-events: none !important; user-select: none !important; }
+          .btn { pointer-events: auto !important; cursor: pointer !important; }
+          .panel {
+            display: flex; align-items: center; gap: 10px;
+            background: #1a1a1a; color: #fff; padding: 6px 14px;
+            border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
+            font: 12px/1 system-ui, sans-serif;
+            backdrop-filter: blur(6px);
+          }
+          .dot { width:8px; height:8px; border-radius:50%; background:#ef4444; flex:none; animation: pulse 1.5s ease-in-out infinite; }
+          @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
+          .name { font-weight:600; letter-spacing:.2px; }
+          .sep { width:1px; height:10px; background:#3a3a3a; }
+          .stats { color:#a3a3a3; }
+          .btn {
+            background:#2a2a2a; color:#fff; border:0; border-radius:999px;
+            padding:4px 10px; font: 11px/1 system-ui, sans-serif;
+          }
+          .btn:hover { background:#3a3a3a; }
+          .btn.active { background:#3b82f6; }
+          .mode-label { color:#3b82f6; font-weight:600; }
+        </style>
+        <div class="panel">
+          <span class="dot"></span>
+          <span class="name">trq</span>
+          <span class="sep"></span>
+          <span class="stats" id="stats">0 steps</span>
+          <span class="sep"></span>
+          <button class="btn" id="assert-btn" type="button">\u2713 Assert</button>
+        </div>
+      `;
+        (document.body || document.documentElement).appendChild(host);
+        const stats = shadow.getElementById("stats");
+        renderOverlay = () => {
+          if (stats) stats.textContent = `${stepCount} step${stepCount === 1 ? "" : "s"}`;
+        };
+        renderOverlay();
+        const assertBtn = shadow.getElementById("assert-btn");
+        assertBtn?.addEventListener("click", (ev) => {
+          ev.stopPropagation();
+          if (assertMode === null) {
+            enterAssertPicking();
+            assertBtn.classList.add("active");
+            assertBtn.textContent = "Click target\u2026 (esc)";
+          } else {
+            exitAssertMode();
+          }
+        });
+        onAssertModeExit = () => {
+          if (!assertBtn) return;
+          assertBtn.classList.remove("active");
+          assertBtn.textContent = "\u2713 Assert";
+        };
+      };
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", mount, { once: true });
+      } else {
+        mount();
+      }
+    }
+  })();
+})();