@guidelytech/guide-runtime 0.16.0 → 0.17.0

package/dist/capture.js

@@ -1,12 +1,38 @@
+import {
+  createScope
+} from "./chunk-63M4VHQG.js";
+import {
+  CAPTURE_INTERACTIVE_SELECTOR,
+  REDACT_SELECTOR,
+  actionTarget,
+  canCaptureScreen,
+  captureLabel,
+  captureRole,
+  classifyNumber,
+  collectRedactions,
+  describeCapturedElement,
+  encodeScreenshot,
+  fieldValue,
+  findSensitiveText,
+  grabFrame,
+  isMaskedElement,
+  isSensitiveField,
+  isTextEntry,
+  labelControl,
+  looksLikeSecretValue,
+  normalizeRect,
+  redactCanvas,
+  requestTabCapture,
+  screenshotDataUrl,
+  selectedOptionText,
+  toFrameRect
+} from "./chunk-THGKUOHM.js";
 import {
   composedTarget,
   describeElement,
-  isGuidelyElement,
-  normalizeText
-} from "./chunk-YU6SKJK4.js";
-import {
-  createScope
-} from "./chunk-KQGSHCNW.js";
+  isGuidelyElement
+} from "./chunk-EPR4LWA2.js";
+import "./chunk-V6TY7KAL.js";
 
 // src/capture-styles.ts
 var CAPTURE_STYLES = `
@@ -30,420 +56,6 @@ var CAPTURE_STYLES = `
 .g-cap[data-captured] .g-cap-dot,.g-cap[data-captured] .g-cap-dot::after{background:#22c55e}
 `;
 
-// src/capture-dom.ts
-var CAPTURE_INTERACTIVE_SELECTOR = "a,button,input,select,textarea,label,summary,[role=button],[role=link],[role=tab],[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio],[role=option],[role=checkbox],[role=radio],[role=switch],[role=combobox],[contenteditable]:not([contenteditable=false])";
-var REDACT_SELECTOR = "[data-guidely-redact]";
-var TEXT_INPUT_TYPES = /* @__PURE__ */ new Set(["", "text", "email", "search", "tel", "url", "number", "password", "date", "datetime-local", "month", "week", "time"]);
-function closestSafe(el, selector) {
-  if (!selector) return null;
-  try {
-    return el.closest(selector);
-  } catch {
-    return null;
-  }
-}
-function inputType(el) {
-  return el.tagName === "INPUT" ? (el.getAttribute("type") || "").toLowerCase() : "";
-}
-function isEditableHost(el) {
-  const v = el.getAttribute("contenteditable");
-  return v != null && v.toLowerCase() !== "false";
-}
-function isTextEntry(el) {
-  if (el.tagName === "TEXTAREA") return true;
-  if (el.tagName === "INPUT") return TEXT_INPUT_TYPES.has(inputType(el));
-  return isEditableHost(el) || !!closestSafe(el, "[contenteditable]:not([contenteditable=false])");
-}
-function actionTarget(target) {
-  const hit = closestSafe(target, CAPTURE_INTERACTIVE_SELECTOR) ?? target;
-  if (!isEditableHost(hit) && isTextEntry(hit) && hit.tagName !== "INPUT" && hit.tagName !== "TEXTAREA") return closestSafe(hit, "[contenteditable]:not([contenteditable=false])") ?? hit;
-  return hit;
-}
-function labelControl(el) {
-  if (el.tagName !== "LABEL") return null;
-  const label = el;
-  if (label.control) return label.control;
-  const forId = label.getAttribute("for");
-  if (forId) return label.ownerDocument.getElementById(forId);
-  return label.querySelector("input,select,textarea");
-}
-function isMaskedElement(el, maskSelector) {
-  return !!closestSafe(el, REDACT_SELECTOR) || !!closestSafe(el, maskSelector);
-}
-var SENSITIVE_NAME = /pass|card|cvv|cvc|ssn|secret|token|otp/i;
-var SENSITIVE_AUTOCOMPLETE = /cc-|one-time-code|current-password|new-password/i;
-function isSensitiveField(el, maskSelector = "") {
-  if (inputType(el) === "password") return true;
-  if (SENSITIVE_AUTOCOMPLETE.test(el.getAttribute("autocomplete") || "")) return true;
-  if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (SENSITIVE_NAME.test(el.getAttribute("name") || "") || SENSITIVE_NAME.test(el.id || ""))) return true;
-  return isMaskedElement(el, maskSelector);
-}
-var EMAIL = /[A-Z0-9._%+-]+@[A-Z0-9-]+(?:\.[A-Z0-9-]+)*\.[A-Z]{2,}/gi;
-var NUMBER_RUN = /(?:\+\d{1,3}[ .-]?)?(?:\(\d{2,4}\)[ .-]?)?\d+(?:[ .-]\d+)*/g;
-function classifyNumber(run) {
-  const groups = run.match(/\d+/g) ?? [];
-  const lens = groups.map((g) => g.length);
-  const digits = lens.reduce((a, b) => a + b, 0);
-  const special = /[+(.]/.test(run);
-  if (lens.length === 3 && lens[0] === 3 && lens[1] === 2 && lens[2] === 4 && /^\d{3}[ -]\d{2}[ -]\d{4}$/.test(run)) return "ssn";
-  if (digits >= 13 && digits <= 19 && !special && lens.every((l) => l >= 4)) return "card";
-  if (digits >= 10 && digits <= 13 && (/[+(]/.test(run) || lens.length >= 3 && lens[lens.length - 1] === 4 && lens.every((l) => l >= 2) && !run.includes("."))) return "phone";
-  return null;
-}
-function findSensitiveText(text) {
-  const out = [];
-  if (text.length < 7) return out;
-  if (text.includes("@")) {
-    EMAIL.lastIndex = 0;
-    for (let m = EMAIL.exec(text); m && out.length < 200; m = EMAIL.exec(text)) out.push([m.index, m.index + m[0].length]);
-  }
-  if (/\d{3}/.test(text)) {
-    NUMBER_RUN.lastIndex = 0;
-    for (let m = NUMBER_RUN.exec(text); m && out.length < 200; m = NUMBER_RUN.exec(text)) {
-      if (m[0].length >= 9 && classifyNumber(m[0])) out.push([m.index, m.index + m[0].length]);
-    }
-  }
-  return out;
-}
-function looksLikeSecretValue(value) {
-  NUMBER_RUN.lastIndex = 0;
-  for (let m = NUMBER_RUN.exec(value); m; m = NUMBER_RUN.exec(value)) {
-    const kind = classifyNumber(m[0]);
-    if (kind === "card" || kind === "ssn") return true;
-  }
-  return false;
-}
-var ROLE_MAP = {
-  button: "button",
-  link: "link",
-  tab: "tab",
-  menuitem: "menuitem",
-  menuitemcheckbox: "menuitem",
-  menuitemradio: "menuitem",
-  checkbox: "checkbox",
-  radio: "radio",
-  switch: "switch",
-  option: "option",
-  combobox: "dropdown",
-  listbox: "dropdown",
-  textbox: "field",
-  searchbox: "field",
-  spinbutton: "field"
-};
-function captureRole(el) {
-  const explicit = (el.getAttribute("role") || "").trim().split(/\s+/)[0].toLowerCase();
-  if (ROLE_MAP[explicit]) return ROLE_MAP[explicit];
-  const tag = el.tagName.toLowerCase();
-  if (tag === "a") return el.hasAttribute("href") ? "link" : "element";
-  if (tag === "button" || tag === "summary") return "button";
-  if (tag === "select") return "dropdown";
-  if (tag === "option") return "option";
-  if (tag === "textarea") return "field";
-  if (tag === "input") {
-    const t = inputType(el);
-    if (t === "checkbox") return "checkbox";
-    if (t === "radio") return "radio";
-    if (t === "button" || t === "submit" || t === "reset" || t === "image") return "button";
-    return "field";
-  }
-  if (isEditableHost(el)) return "field";
-  return "element";
-}
-var clip = (s, max = 80) => s.length > max ? `${s.slice(0, max - 1).trimEnd()}\u2026` : s;
-function textOf(el) {
-  return normalizeText(el.innerText ?? el.textContent);
-}
-function labelledBy(el) {
-  const ids = (el.getAttribute("aria-labelledby") || "").split(/\s+/).filter(Boolean);
-  return normalizeText(ids.map((id) => el.ownerDocument.getElementById(id)).filter((x) => !!x).map(textOf).join(" "));
-}
-function associatedLabel(el) {
-  const labels = el.labels;
-  if (labels && labels.length) return normalizeText(Array.from(labels).map(textOf).join(" "));
-  if (el.id) {
-    try {
-      const l = el.ownerDocument.querySelector(`label[for="${el.id.replace(/["\\]/g, "\\$&")}"]`);
-      if (l) return textOf(l);
-    } catch {
-    }
-  }
-  const wrap = el.parentElement?.closest("label");
-  return wrap ? textOf(wrap) : "";
-}
-function captureLabel(el) {
-  const attr = (name) => normalizeText(el.getAttribute(name));
-  const tag = el.tagName;
-  const field = tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || isEditableHost(el);
-  const candidates = [
-    () => attr("aria-label"),
-    () => labelledBy(el),
-    () => /^(INPUT|TEXTAREA|SELECT|METER|PROGRESS|OUTPUT)$/.test(tag) ? associatedLabel(el) : "",
-    () => tag === "INPUT" && /^(button|submit|reset)$/.test(inputType(el)) ? normalizeText(el.value) : "",
-    () => field ? "" : textOf(el),
-    () => attr("placeholder"),
-    () => attr("alt"),
-    () => normalizeText(el.querySelector?.("img[alt]")?.getAttribute("alt")),
-    () => attr("title"),
-    () => normalizeText(el.querySelector?.("svg title")?.textContent),
-    () => attr("name")
-  ];
-  for (const c of candidates) {
-    const v = c();
-    if (v) return clip(v);
-  }
-  return "";
-}
-function describeCapturedElement(el, maskSelector = "") {
-  return { label: isMaskedElement(el, maskSelector) ? "" : captureLabel(el), role: captureRole(el), tag: el.tagName.toLowerCase() };
-}
-function fieldValue(el) {
-  const raw = el.tagName === "INPUT" || el.tagName === "TEXTAREA" ? el.value : textOf(el);
-  return (raw || "").trim().slice(0, 200);
-}
-function selectedOptionText(el) {
-  return normalizeText(Array.from(el.selectedOptions ?? []).map((o) => o.text || o.value).join(", ")).slice(0, 200);
-}
-var clamp01 = (n) => Math.min(1, Math.max(0, n));
-var round = (n) => Math.round(n * 1e4) / 1e4;
-function normalizeRect(rect, viewport, pad = 4) {
-  if (!viewport.width || !viewport.height || rect.width <= 0 || rect.height <= 0) return null;
-  const x0 = clamp01((rect.x - pad) / viewport.width);
-  const y0 = clamp01((rect.y - pad) / viewport.height);
-  const x1 = clamp01((rect.x + rect.width + pad) / viewport.width);
-  const y1 = clamp01((rect.y + rect.height + pad) / viewport.height);
-  if (x1 <= x0 || y1 <= y0) return null;
-  return { x: round(x0), y: round(y0), width: round(x1 - x0), height: round(y1 - y0) };
-}
-function toFrameRect(rect, scaleX, scaleY, frame, pad = 0) {
-  const x0 = Math.max(0, Math.floor((rect.x - pad) * scaleX));
-  const y0 = Math.max(0, Math.floor((rect.y - pad) * scaleY));
-  const x1 = Math.min(frame.width, Math.ceil((rect.x + rect.width + pad) * scaleX));
-  const y1 = Math.min(frame.height, Math.ceil((rect.y + rect.height + pad) * scaleY));
-  return x1 > x0 && y1 > y0 ? { x: x0, y: y0, width: x1 - x0, height: y1 - y0 } : null;
-}
-function intersectsViewport(r, vw, vh) {
-  return r.width > 0 && r.height > 0 && r.x < vw && r.y < vh && r.x + r.width > 0 && r.y + r.height > 0;
-}
-var SKIP_TEXT_PARENTS = /^(SCRIPT|STYLE|NOSCRIPT|TEMPLATE|TEXTAREA|OPTION)$/;
-function collectRedactions(doc, options = {}) {
-  const win = doc.defaultView;
-  const vw = win?.innerWidth ?? 0;
-  const vh = win?.innerHeight ?? 0;
-  const out = [];
-  const push = (r) => {
-    if (intersectsViewport(r, vw, vh)) out.push({ x: r.x, y: r.y, width: r.width, height: r.height });
-  };
-  const root = doc.body;
-  if (!root) return out;
-  const mask = options.maskSelector || "";
-  const blocks = /* @__PURE__ */ new Set();
-  try {
-    root.querySelectorAll(mask ? `${REDACT_SELECTOR},${mask}` : REDACT_SELECTOR).forEach((el) => blocks.add(el));
-  } catch {
-    root.querySelectorAll(REDACT_SELECTOR).forEach((el) => blocks.add(el));
-  }
-  root.querySelectorAll("input,textarea,select,[contenteditable]:not([contenteditable=false])").forEach((el) => {
-    if (blocks.has(el)) return;
-    const t = inputType(el);
-    if (t === "hidden" || t === "checkbox" || t === "radio" || t === "button" || t === "submit" || t === "reset") return;
-    if (isSensitiveField(el, mask)) blocks.add(el);
-    else if ((el.tagName === "INPUT" || el.tagName === "TEXTAREA") && findSensitiveText(el.value || "").length) blocks.add(el);
-  });
-  blocks.forEach((el) => push(el.getBoundingClientRect()));
-  const max = options.maxTextNodes ?? 5e3;
-  const walker = doc.createTreeWalker(
-    root,
-    4
-    /* NodeFilter.SHOW_TEXT */
-  );
-  let range = null;
-  let seen = 0;
-  for (let node = walker.nextNode(); node && seen < max; node = walker.nextNode()) {
-    const text = node.nodeValue || "";
-    if (text.length < 7) continue;
-    seen++;
-    const parent = node.parentElement;
-    if (!parent || SKIP_TEXT_PARENTS.test(parent.tagName)) continue;
-    const hits = findSensitiveText(text);
-    if (!hits.length) continue;
-    if (Array.from(blocks).some((b) => b.contains(parent))) continue;
-    range ?? (range = doc.createRange());
-    for (const [start, end] of hits) {
-      try {
-        range.setStart(node, start);
-        range.setEnd(node, end);
-        Array.from(range.getClientRects()).forEach(push);
-      } catch {
-      }
-    }
-  }
-  return out;
-}
-
-// src/capture-screen.ts
-function canCaptureScreen() {
-  return typeof navigator !== "undefined" && !!navigator.mediaDevices && typeof navigator.mediaDevices.getDisplayMedia === "function";
-}
-async function requestTabCapture(container, doc = document) {
-  if (!canCaptureScreen()) return { ok: false, reason: "unsupported" };
-  let stream;
-  try {
-    stream = await navigator.mediaDevices.getDisplayMedia({
-      video: { displaySurface: "browser", frameRate: 5 },
-      audio: false,
-      preferCurrentTab: true,
-      selfBrowserSurface: "include",
-      surfaceSwitching: "exclude"
-    });
-  } catch (err) {
-    return { ok: false, reason: err?.name === "NotAllowedError" ? "denied" : "error" };
-  }
-  const track = stream.getVideoTracks()[0];
-  if (!track) {
-    stream.getTracks().forEach((t) => t.stop());
-    return { ok: false, reason: "error" };
-  }
-  const surface = track.getSettings?.()?.displaySurface;
-  if (surface && surface !== "browser") {
-    stream.getTracks().forEach((t) => t.stop());
-    return { ok: false, reason: "wrong-surface" };
-  }
-  const video = doc.createElement("video");
-  video.muted = true;
-  video.playsInline = true;
-  video.setAttribute("aria-hidden", "true");
-  video.style.cssText = "position:fixed;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none";
-  try {
-    video.srcObject = stream;
-    container.appendChild(video);
-  } catch {
-    stream.getTracks().forEach((t) => t.stop());
-    return { ok: false, reason: "error" };
-  }
-  try {
-    await video.play();
-    if (!video.videoWidth) await new Promise((resolve) => {
-      const done = () => resolve();
-      video.addEventListener("loadeddata", done, { once: true });
-      setTimeout(done, 1500);
-    });
-  } catch {
-  }
-  let ended = false;
-  const listeners = [];
-  const fv = video;
-  const rvfc = typeof fv.requestVideoFrameCallback === "function";
-  let frameAt = 0;
-  let waiters = [];
-  const onFrame = (now) => {
-    frameAt = now;
-    waiters.splice(0).forEach((w) => w());
-    if (!ended) fv.requestVideoFrameCallback(onFrame);
-  };
-  if (rvfc) fv.requestVideoFrameCallback(onFrame);
-  const end = () => {
-    if (ended) return;
-    ended = true;
-    stream.getTracks().forEach((t) => t.stop());
-    video.srcObject = null;
-    video.remove();
-    listeners.splice(0).forEach((cb) => cb());
-  };
-  track.addEventListener("ended", end);
-  return {
-    ok: true,
-    screen: {
-      live: () => !ended && track.readyState === "live",
-      onEnded: (cb) => ended ? cb() : listeners.push(cb),
-      grab: () => ended ? null : grabFrame(video, doc),
-      freshSince: (changedAt) => rvfc ? frameAt > changedAt : performance.now() - changedAt > 250,
-      nextFrame: (timeoutMs = 500) => new Promise((resolve) => {
-        const t = setTimeout(done, rvfc ? timeoutMs : 250);
-        function done() {
-          clearTimeout(t);
-          waiters = waiters.filter((w) => w !== done);
-          resolve();
-        }
-        if (rvfc) waiters.push(done);
-      }),
-      stop: () => {
-        listeners.length = 0;
-        end();
-      }
-    }
-  };
-}
-function grabFrame(video, doc = document) {
-  const w = video.videoWidth;
-  const h = video.videoHeight;
-  if (!w || !h) return null;
-  const canvas = doc.createElement("canvas");
-  canvas.width = w;
-  canvas.height = h;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return null;
-  ctx.drawImage(video, 0, 0, w, h);
-  return canvas;
-}
-function redactCanvas(canvas, rects, viewport) {
-  const ctx = canvas.getContext("2d");
-  if (!ctx || !rects.length || !viewport.width || !viewport.height) return 0;
-  const sx = canvas.width / viewport.width;
-  const sy = canvas.height / viewport.height;
-  const tmp = canvas.ownerDocument.createElement("canvas");
-  const tctx = tmp.getContext("2d");
-  if (!tctx) return 0;
-  let count = 0;
-  for (const rect of rects) {
-    const r = toFrameRect(rect, sx, sy, canvas, 4);
-    if (!r) continue;
-    const block = Math.max(16 * sy, Math.min(r.height, 48 * sy));
-    tmp.width = Math.max(1, Math.round(r.width / block));
-    tmp.height = Math.max(1, Math.round(r.height / block));
-    tctx.imageSmoothingEnabled = true;
-    tctx.drawImage(canvas, r.x, r.y, r.width, r.height, 0, 0, tmp.width, tmp.height);
-    ctx.imageSmoothingEnabled = true;
-    ctx.drawImage(tmp, 0, 0, tmp.width, tmp.height, r.x, r.y, r.width, r.height);
-    ctx.fillStyle = "rgba(120,120,120,.28)";
-    ctx.fillRect(r.x, r.y, r.width, r.height);
-    count++;
-  }
-  return count;
-}
-function scaled(canvas, maxWidth) {
-  if (canvas.width <= maxWidth) return canvas;
-  const out = canvas.ownerDocument.createElement("canvas");
-  out.width = maxWidth;
-  out.height = Math.round(canvas.height * maxWidth / canvas.width);
-  const ctx = out.getContext("2d");
-  if (!ctx) return canvas;
-  ctx.imageSmoothingQuality = "high";
-  ctx.drawImage(canvas, 0, 0, out.width, out.height);
-  return out;
-}
-var toBlob = (canvas, type, quality) => new Promise((resolve) => {
-  try {
-    canvas.toBlob((b) => resolve(b), type, quality);
-  } catch {
-    resolve(null);
-  }
-});
-async function encodeScreenshot(canvas, options = {}) {
-  const src = scaled(canvas, options.maxWidth ?? 2560);
-  const maxBytes = options.maxBytes ?? 8 * 1024 * 1024;
-  let blob = await toBlob(src, "image/webp", 0.85);
-  if (!blob || blob.type !== "image/webp") blob = await toBlob(src, "image/jpeg", 0.85);
-  if (blob && blob.size > maxBytes) blob = await toBlob(src, "image/jpeg", 0.6);
-  return blob && blob.size <= maxBytes ? blob : null;
-}
-function screenshotDataUrl(canvas) {
-  try {
-    return scaled(canvas, 1600).toDataURL("image/jpeg", 0.7);
-  } catch {
-    return null;
-  }
-}
-
 // src/capture.ts
 var DOUBLE_CLICK_MS = 400;
 var NAV_AFTER_ACTION_MS = 1500;