@ranganathmk/trq 0.1.0

package/dist/studio/main/replay-helpers.js

@@ -0,0 +1,542 @@
+"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/replay-helpers.ts
+  (() => {
+    if (window.__trqReplayInstalled) return;
+    window.__trqReplayInstalled = true;
+    function cssEscape2(s) {
+      if (typeof CSS !== "undefined" && CSS.escape) {
+        return CSS.escape(s);
+      }
+      return s.replace(/(['"\\])/g, "\\$1");
+    }
+    function isVisible(el) {
+      if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
+        return true;
+      }
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) return false;
+      const style = window.getComputedStyle(el);
+      if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return false;
+      return true;
+    }
+    function clickableRectOf(el) {
+      let cur = el;
+      let depth = 0;
+      while (cur && depth < 6) {
+        const r = cur.getBoundingClientRect();
+        if (r.width > 0 && r.height > 0) {
+          return { x: r.x, y: r.y, w: r.width, h: r.height };
+        }
+        cur = cur.parentElement;
+        depth++;
+      }
+      return null;
+    }
+    function resolveAria(name) {
+      try {
+        const ariaMatches = document.querySelectorAll(`[aria-label="${cssEscape2(name)}"]`);
+        for (const el of Array.from(ariaMatches)) if (isVisible(el)) return el;
+      } catch {
+      }
+      const labels = document.querySelectorAll("label");
+      for (const label of Array.from(labels)) {
+        const txt = label.textContent?.trim();
+        if (txt !== name) continue;
+        const forId = label.getAttribute("for");
+        if (forId) {
+          const t = document.getElementById(forId);
+          if (t && isVisible(t)) return t;
+        }
+        const inner = label.querySelector("input, textarea, select");
+        if (inner && isVisible(inner)) return inner;
+      }
+      const candidates = document.querySelectorAll('button, a, [role="button"], [role="link"], [role="menuitem"], [role="option"]');
+      for (const el of Array.from(candidates)) {
+        if (el.textContent?.trim() === name && isVisible(el)) return el;
+      }
+      try {
+        const titleMatches = document.querySelectorAll(`[title="${cssEscape2(name)}"]`);
+        for (const el of Array.from(titleMatches)) if (isVisible(el)) return el;
+      } catch {
+      }
+      try {
+        const phMatches = document.querySelectorAll(`[placeholder="${cssEscape2(name)}"]`);
+        for (const el of Array.from(phMatches)) if (isVisible(el)) return el;
+      } catch {
+      }
+      return null;
+    }
+    function resolveText(text) {
+      const candidates = document.querySelectorAll('button, a, [role="button"], [role="link"]');
+      for (const el of Array.from(candidates)) {
+        if (el.textContent?.trim() === text && isVisible(el)) return el;
+      }
+      return null;
+    }
+    function resolveXPath(expr) {
+      try {
+        const result = document.evaluate(expr, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+        const node = result.singleNodeValue;
+        if (node && node.getBoundingClientRect && isVisible(node)) {
+          return node;
+        }
+      } catch {
+      }
+      return null;
+    }
+    function resolveCss(sel) {
+      try {
+        const matches = document.querySelectorAll(sel);
+        for (const el of Array.from(matches)) if (isVisible(el)) return el;
+      } catch {
+      }
+      return null;
+    }
+    function resolveSingle(sel) {
+      const s = sel[0];
+      if (!s) return null;
+      if (s.startsWith("aria/")) return resolveAria(s.slice(5));
+      if (s.startsWith("text/")) return resolveText(s.slice(5));
+      if (s.startsWith("xpath=")) return resolveXPath(s.slice(6));
+      return resolveCss(s);
+    }
+    function resolveAny(selectors) {
+      for (const sel of selectors) {
+        const el = resolveSingle(sel);
+        if (el) return el;
+      }
+      return null;
+    }
+    function diagnoseFailure(selectors) {
+      const lines = [`[trq-resolve] FAIL url=${location.href}`];
+      for (const sel of selectors) {
+        const s = sel[0];
+        if (!s) {
+          lines.push("  (empty selector)");
+          continue;
+        }
+        if (s.startsWith("aria/")) {
+          const name = s.slice(5);
+          const ariaHits = document.querySelectorAll(`[aria-label]`);
+          const labels = Array.from(document.querySelectorAll("label")).map((l) => `"${l.textContent?.trim().slice(0, 80)}"`);
+          lines.push(`  aria "${name}": labels-on-page=${labels.length} sample=${labels.slice(0, 8).join(" | ")}`);
+        } else if (s.startsWith("text/")) {
+          lines.push(`  text "${s.slice(5)}": no match`);
+        } else if (s.startsWith("xpath=")) {
+          const x = s.slice(6);
+          try {
+            const r = document.evaluate(x, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+            const n = r.singleNodeValue;
+            if (!n) lines.push(`  xpath: no node`);
+            else lines.push(`  xpath: matched <${n.tagName.toLowerCase()}> but isVisible=${isVisible(n)}`);
+          } catch (err) {
+            lines.push(`  xpath: error ${err.message}`);
+          }
+        } else {
+          try {
+            const nodes = document.querySelectorAll(s);
+            if (nodes.length === 0) lines.push(`  css: 0 matches for ${s.slice(0, 100)}`);
+            else lines.push(`  css: ${nodes.length} match(es), first.isVisible=${isVisible(nodes[0])}`);
+          } catch (err) {
+            lines.push(`  css: error ${err.message}`);
+          }
+        }
+      }
+      return lines.join("\n");
+    }
+    window.__trqResolve = (selectors) => {
+      const el = resolveAny(selectors);
+      if (!el) {
+        const w = window;
+        if (w.__trqDebugResolve) {
+          console.log(diagnoseFailure(selectors));
+        }
+        return { found: false };
+      }
+      const rect = clickableRectOf(el) ?? { x: 0, y: 0, w: 0, h: 0 };
+      return { found: true, rect, tag: el.tagName };
+    };
+    window.__trqResolveEl = (selectors) => resolveAny(selectors);
+    window.__trqClick = (selectors) => {
+      const el = resolveAny(selectors);
+      if (!el) return { error: "no element matched any selector" };
+      el.scrollIntoView({ block: "center", inline: "center" });
+      const rect = clickableRectOf(el);
+      if (!rect) return { error: "resolved element has no clickable bounds" };
+      if (el instanceof HTMLElement) {
+        try {
+          el.click();
+        } catch {
+        }
+      }
+      return { rect };
+    };
+    window.__trqSetInput = (selectors, value) => {
+      const el = resolveAny(selectors);
+      if (!el) return { error: "no element matched" };
+      if (el instanceof HTMLInputElement) {
+        if (el.type === "checkbox" || el.type === "radio") {
+          const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked");
+          desc?.set?.call(el, value === "true");
+          el.dispatchEvent(new Event("change", { bubbles: true }));
+        } else {
+          el.focus();
+          const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+          desc?.set?.call(el, value);
+          el.dispatchEvent(new Event("input", { bubbles: true }));
+          el.dispatchEvent(new Event("change", { bubbles: true }));
+          el.blur();
+        }
+        return { ok: true };
+      }
+      if (el instanceof HTMLTextAreaElement) {
+        el.focus();
+        const desc = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value");
+        desc?.set?.call(el, value);
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        el.dispatchEvent(new Event("change", { bubbles: true }));
+        el.blur();
+        return { ok: true };
+      }
+      if (el instanceof HTMLSelectElement) {
+        el.value = value;
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        el.dispatchEvent(new Event("change", { bubbles: true }));
+        el.blur();
+        return { ok: true };
+      }
+      return { error: `element <${el.tagName.toLowerCase()}> is not an input` };
+    };
+    window.__trqFocus = (selectors) => {
+      const el = resolveAny(selectors);
+      if (!el) return { error: "no element matched" };
+      if (el instanceof HTMLElement) el.focus();
+      return { ok: true };
+    };
+    window.__trqAssert = (selectors, spec) => {
+      const el = resolveAny(selectors);
+      if (!el) return { ok: false, reason: "no element matched any selector" };
+      switch (spec.kind) {
+        case "visible":
+          return isVisible(el) ? { ok: true } : { ok: false, reason: "element resolved but is not visible" };
+        case "text-equals": {
+          const actual = el.textContent?.trim() ?? "";
+          if (actual === spec.text) return { ok: true };
+          return {
+            ok: false,
+            reason: `expected text "${spec.text}" but found "${actual.slice(0, 120)}"`
+          };
+        }
+        case "value-equals": {
+          let actual = "";
+          if (el instanceof HTMLInputElement) {
+            actual = el.type === "checkbox" || el.type === "radio" ? String(el.checked) : el.value;
+          } else if (el instanceof HTMLTextAreaElement) {
+            actual = el.value;
+          } else if (el instanceof HTMLSelectElement) {
+            actual = el.value;
+          } else {
+            return {
+              ok: false,
+              reason: `element <${el.tagName.toLowerCase()}> is not an input`
+            };
+          }
+          if (actual === spec.value) return { ok: true };
+          return {
+            ok: false,
+            reason: `expected value "${spec.value}" but found "${actual.slice(0, 120)}"`
+          };
+        }
+      }
+    };
+    function isDynamicId2(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 isStableAttr(name) {
+      if (name.startsWith("_ng")) return false;
+      if (name.startsWith("data-react")) return false;
+      if (name === "class" || name === "style") return false;
+      return true;
+    }
+    function attrWeight(name) {
+      if (name === "data-testid" || name.startsWith("data-test") || name === "data-cy" || name === "data-qa") return 5;
+      if (name === "name" || name === "role") return 3;
+      if (name === "value" || name === "type" || name === "placeholder") return 2;
+      if (name === "href" || name === "aria-label" || name === "aria-labelledby") return 2;
+      return 1;
+    }
+    function scoreCandidate(el, target) {
+      if (el.tagName !== target.tagName) return null;
+      if (!isVisible(el)) return null;
+      let score = 0;
+      const matched = [];
+      const elId = el.id;
+      const tgtId = target.attributes.id;
+      if (elId && tgtId && !isDynamicId2(elId) && !isDynamicId2(tgtId)) {
+        if (elId === tgtId) {
+          score += 6;
+          matched.push("id");
+        }
+      }
+      for (const [name, value] of Object.entries(target.attributes)) {
+        if (name === "id") continue;
+        if (!isStableAttr(name)) continue;
+        const actual = el.getAttribute(name);
+        if (actual == null) continue;
+        if (actual === value) {
+          score += attrWeight(name);
+          matched.push(name);
+        }
+      }
+      const tgtClass = (target.attributes.class || "").split(/\s+/).filter(Boolean);
+      const elClass = (el.getAttribute("class") || "").split(/\s+/).filter(Boolean);
+      if (tgtClass.length > 0 && elClass.length > 0) {
+        const tgtSet = new Set(tgtClass.filter((c) => !/^ng-(touched|untouched|dirty|pristine|valid|invalid|focused)$/.test(c)));
+        let classHits = 0;
+        for (const c of elClass) if (tgtSet.has(c)) classHits++;
+        if (classHits > 0) {
+          score += Math.min(3, classHits * 0.5);
+          matched.push(`class\xD7${classHits}`);
+        }
+      }
+      const elText = (el.textContent || "").trim();
+      const tgtText = (target.textContent || "").trim();
+      if (tgtText && elText === tgtText) {
+        score += 3;
+        matched.push("text");
+      }
+      return score > 0 ? { score, matched } : null;
+    }
+    function snapshotOf(el) {
+      const r = el.getBoundingClientRect();
+      const attrs = {};
+      for (const a of Array.from(el.attributes)) attrs[a.name] = a.value;
+      return {
+        tagName: el.tagName,
+        textContent: (el.textContent || "").trim().slice(0, 200) || null,
+        attributes: attrs,
+        boundingBox: {
+          x: Math.round(r.x),
+          y: Math.round(r.y),
+          width: Math.round(r.width),
+          height: Math.round(r.height)
+        }
+      };
+    }
+    window.__trqSuggest = (target, max = 3) => {
+      const all = document.querySelectorAll(target.tagName);
+      const scored = [];
+      const limit = Math.min(all.length, 5e3);
+      for (let i = 0; i < limit; i++) {
+        const el = all[i];
+        const s = scoreCandidate(el, target);
+        if (!s) continue;
+        scored.push({
+          score: s.score,
+          matched: s.matched,
+          selectors: buildSelectors(el),
+          target: snapshotOf(el)
+        });
+      }
+      scored.sort((a, b) => b.score - a.score);
+      return scored.slice(0, max);
+    };
+    let pickActive = false;
+    let pickHovered = null;
+    const HOVER_OUTLINE = "2px solid #f48771";
+    const HOVER_BG = "rgba(244, 135, 113, 0.15)";
+    const pickOriginal = /* @__PURE__ */ new WeakMap();
+    function unhighlight(el) {
+      if (!el || !(el instanceof HTMLElement)) return;
+      const o = pickOriginal.get(el);
+      if (o) {
+        el.style.outline = o.outline;
+        el.style.backgroundColor = o.bg;
+        pickOriginal.delete(el);
+      }
+    }
+    function highlight(el) {
+      if (!(el instanceof HTMLElement)) return;
+      if (pickOriginal.has(el)) return;
+      pickOriginal.set(el, { outline: el.style.outline, bg: el.style.backgroundColor });
+      el.style.outline = HOVER_OUTLINE;
+      el.style.backgroundColor = HOVER_BG;
+    }
+    function onPickMove(e) {
+      if (!pickActive) return;
+      const el = e.target;
+      if (!el || el === pickHovered) return;
+      unhighlight(pickHovered);
+      pickHovered = el;
+      highlight(el);
+    }
+    function onPickClick(e) {
+      if (!pickActive) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const el = e.target;
+      if (!el) return;
+      const payload = {
+        __trq: "pick",
+        selectors: buildSelectors(el),
+        target: snapshotOf(el)
+      };
+      cleanupPick();
+      try {
+        window.__trqEmit?.(JSON.stringify(payload));
+      } catch {
+      }
+    }
+    function onPickKey(e) {
+      if (!pickActive) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cleanupPick();
+        try {
+          window.__trqEmit?.(JSON.stringify({ __trq: "pick-cancel" }));
+        } catch {
+        }
+      }
+    }
+    function cleanupPick() {
+      pickActive = false;
+      unhighlight(pickHovered);
+      pickHovered = null;
+      document.removeEventListener("mousemove", onPickMove, true);
+      document.removeEventListener("click", onPickClick, true);
+      document.removeEventListener("keydown", onPickKey, true);
+    }
+    window.__trqStartPick = () => {
+      if (pickActive) return;
+      pickActive = true;
+      document.addEventListener("mousemove", onPickMove, true);
+      document.addEventListener("click", onPickClick, true);
+      document.addEventListener("keydown", onPickKey, true);
+    };
+    window.__trqStopPick = () => cleanupPick();
+  })();
+})();

package/dist/studio/preload/preload.cjs

@@ -0,0 +1,13 @@
+// src/preload/preload.ts
+var import_electron = require("electron");
+var bridge = {
+  invoke(channel, args) {
+    return import_electron.ipcRenderer.invoke(channel, args);
+  },
+  on(channel, listener) {
+    const wrapped = (_evt, payload) => listener(payload);
+    import_electron.ipcRenderer.on(channel, wrapped);
+    return () => import_electron.ipcRenderer.off(channel, wrapped);
+  }
+};
+import_electron.contextBridge.exposeInMainWorld("trq", bridge);