@guidelytech/guide-runtime 0.5.0 → 0.6.2

package/dist/capture.js

@@ -0,0 +1,857 @@
+import {
+  describeElement,
+  isGuidelyElement,
+  normalizeText
+} from "./chunk-GUSKGNNR.js";
+import {
+  createScope
+} from "./chunk-7DOGZKWD.js";
+
+// src/capture-styles.ts
+var CAPTURE_STYLES = `
+.g-cap{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:calc(var(--g-z) + 10);pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:calc(100vw - 32px);font:500 13px/1.4 var(--g-font);color:#fff}
+.g-cap-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 6px 6px 14px;background:#111827;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.28)}
+.g-cap-dot{position:relative;flex:none;width:10px;height:10px;border-radius:999px;background:#9ca3af}
+.g-cap[data-state="recording"] .g-cap-dot{background:#ef4444}
+.g-cap[data-state="recording"] .g-cap-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#ef4444;animation:g-pulse 1.4s ease-out infinite}
+.g-cap-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(340px,60vw)}
+.g-cap .g-btn{min-height:28px;padding:3px 12px;font-size:13px;border-radius:999px}
+.g-cap .g-btn-secondary{background:rgba(255,255,255,.14);color:#fff;border-color:transparent}
+.g-cap .g-btn-secondary:hover{background:rgba(255,255,255,.22)}
+.g-cap .g-btn-ghost{color:#d1d5db}
+.g-cap .g-btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
+.g-cap .g-cap-warn{background:#f59e0b;color:#111827}
+.g-cap-note{max-width:min(420px,calc(100vw - 32px));padding:6px 12px;border-radius:10px;background:#7c2d12;box-shadow:0 6px 24px rgba(0,0,0,.28)}
+.g-cap-count{display:none;font-variant-numeric:tabular-nums}
+.g-cap[data-compact] .g-cap-row{gap:6px;padding:5px 10px;opacity:.85}
+.g-cap[data-compact] .g-cap-row>:not(.g-cap-dot):not(.g-cap-count):not(.g-cap-warn){display:none}
+.g-cap[data-compact] .g-cap-count{display:inline}
+.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;
+var NAV_SETTLE_MS = 600;
+var NOTICES = {
+  "wrong-surface": "Share this tab (not a window or the whole screen) so screenshots match the page.",
+  denied: "Screen sharing was cancelled. Start again, or record without screenshots.",
+  error: "Screen capture could not start. Try again, or record without screenshots.",
+  unsupported: "This browser cannot capture screenshots; steps are recorded without them.",
+  lost: "Screenshots paused: sharing stopped or the page reloaded."
+};
+function button(doc, text, cls, attr) {
+  const b = doc.createElement("button");
+  b.type = "button";
+  b.className = `g-btn ${cls}`;
+  b.textContent = text;
+  b.setAttribute(attr, "");
+  return b;
+}
+function eventTarget(e) {
+  const path = typeof e.composedPath === "function" ? e.composedPath() : [];
+  const first = path[0] ?? e.target;
+  if (!first) return null;
+  return first.nodeType === 1 ? first : first.parentElement;
+}
+function deepActiveElementIn(el) {
+  const root = el.getRootNode();
+  return root.activeElement ?? null;
+}
+function deepActiveElement(doc) {
+  let el = doc.activeElement;
+  while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
+  return el;
+}
+function startCapture(options) {
+  const doc = options.doc ?? document;
+  const win = doc.defaultView ?? window;
+  const mask = options.maskSelector ?? "";
+  const shotsAllowed = options.screenshots !== false;
+  const scope = createScope(null, { theme: "light", animation: "fade" }, doc);
+  const style = doc.createElement("style");
+  style.textContent = CAPTURE_STYLES;
+  scope.el.appendChild(style);
+  const bar = doc.createElement("div");
+  bar.className = "g-cap";
+  bar.setAttribute("data-guidely-capture-bar", "");
+  bar.setAttribute("role", "toolbar");
+  bar.setAttribute("aria-label", "Guidely how-to recorder");
+  const note = doc.createElement("div");
+  note.className = "g-cap-note";
+  note.setAttribute("data-guidely-capture-notice", "");
+  note.hidden = true;
+  const row = doc.createElement("div");
+  row.className = "g-cap-row";
+  const dot = doc.createElement("span");
+  dot.className = "g-cap-dot";
+  const status = doc.createElement("span");
+  status.className = "g-cap-status";
+  status.setAttribute("aria-live", "polite");
+  const count_ = doc.createElement("span");
+  count_.className = "g-cap-count";
+  count_.setAttribute("aria-hidden", "true");
+  const start = button(doc, "Start recording", "g-btn-primary", "data-guidely-capture-start");
+  const noShots = button(doc, "Record without screenshots", "g-btn-secondary", "data-guidely-capture-no-screenshots");
+  const resumeShots = button(doc, "Screenshots paused \u2014 Resume", "g-cap-warn", "data-guidely-capture-resume-screenshots");
+  const pause = button(doc, "Pause", "g-btn-secondary", "data-guidely-capture-pause");
+  const done = button(doc, "Done", "g-btn-primary", "data-guidely-capture-done");
+  const cancel = button(doc, "Cancel", "g-btn-ghost", "data-guidely-capture-cancel");
+  row.append(dot, count_, status, start, noShots, resumeShots, pause, done, cancel);
+  bar.append(note, row);
+  scope.el.appendChild(bar);
+  let phase = "ready";
+  let count = options.stepCount ?? 0;
+  let screen = null;
+  let wantShots = false;
+  let requesting = false;
+  let stopped = false;
+  let lastAction = 0;
+  let movedAt = -1;
+  let lastPress = null;
+  let lastUrl = win.location.href;
+  let navTimer = null;
+  let pulseTimer = null;
+  let typedAt = -1;
+  let expanded = false;
+  const baseline = /* @__PURE__ */ new WeakMap();
+  const recording = () => phase === "recording" && !stopped;
+  const steps = (n) => `${n} step${n === 1 ? "" : "s"}`;
+  const render = () => {
+    bar.setAttribute("data-state", phase);
+    bar.toggleAttribute("data-compact", phase === "recording" && !expanded);
+    const ready = phase === "ready";
+    const active = phase === "recording" || phase === "paused";
+    start.hidden = !ready;
+    start.disabled = requesting;
+    noShots.hidden = !ready || !shotsAllowed || !canCaptureScreen();
+    noShots.disabled = requesting;
+    resumeShots.hidden = !active || !wantShots || !!screen?.live();
+    resumeShots.disabled = requesting;
+    pause.hidden = !active;
+    pause.textContent = phase === "paused" ? "Resume" : "Pause";
+    done.hidden = !active;
+    cancel.hidden = phase === "saving";
+    if (ready) status.textContent = requesting ? "Choose this tab to share\u2026" : `Ready to record \u201C${options.title}\u201D`;
+    else if (phase === "saving") status.textContent = "Saving steps\u2026";
+    else status.textContent = `${phase === "paused" ? "Paused" : "Recording"} \xB7 ${steps(count)}`;
+    count_.textContent = String(count);
+  };
+  const showNotice = (text) => {
+    note.textContent = text ?? "";
+    note.hidden = !text;
+  };
+  const pulse = () => {
+    bar.setAttribute("data-captured", "");
+    if (pulseTimer) clearTimeout(pulseTimer);
+    pulseTimer = setTimeout(() => bar.removeAttribute("data-captured"), 700);
+  };
+  const shoot = (step, highlightEl) => {
+    const frame = screen?.live() ? screen.grab() : null;
+    if (!frame) return null;
+    const viewport = { width: win.innerWidth, height: win.innerHeight };
+    try {
+      step.redactions = redactCanvas(frame, collectRedactions(doc, { maskSelector: mask }), viewport);
+    } catch {
+      return null;
+    }
+    const highlight = highlightEl?.isConnected ? normalizeRect(highlightEl.getBoundingClientRect(), viewport) : null;
+    if (highlight) step.highlight = highlight;
+    else delete step.highlight;
+    return frame;
+  };
+  const record = (action, el, extra = {}) => {
+    const step = { action, url: win.location.href, pageTitle: (doc.title || "").slice(0, 300), redactions: 0, occurredAt: (/* @__PURE__ */ new Date()).toISOString() };
+    let highlightEl = null;
+    if (el) {
+      const masked = isMaskedElement(el, mask);
+      step.element = describeCapturedElement(el, mask);
+      step.selectors = describeElement(el).selectors.filter((s) => !masked || s.kind !== "text");
+      const box = extra.highlightEl?.getBoundingClientRect();
+      highlightEl = extra.highlightEl && box && (box.width || box.height) ? extra.highlightEl : el;
+    }
+    let frame = null;
+    if (screen?.live()) {
+      const s = screen;
+      const changedAt = action === "type" || action === "select" ? Math.max(movedAt, typedAt) : movedAt;
+      if (s.freshSince(changedAt)) frame = shoot(step, highlightEl);
+      else frame = s.nextFrame().then(() => shoot(step, highlightEl));
+    }
+    if (extra.value !== void 0) step.value = extra.value;
+    if (extra.valueRedacted) step.valueRedacted = true;
+    if (action !== "navigate") lastAction = Date.now();
+    count++;
+    render();
+    pulse();
+    options.onStep({ step, frame });
+  };
+  const flushField = (el) => {
+    if (!recording() || !isTextEntry(el)) return;
+    const host = el.tagName === "INPUT" || el.tagName === "TEXTAREA" ? el : actionTarget(el);
+    const value = fieldValue(host);
+    if (value === (baseline.get(host) ?? "")) return;
+    baseline.set(host, value);
+    if (!value) return;
+    if (isSensitiveField(host, mask) || looksLikeSecretValue(value)) record("type", host, { valueRedacted: true });
+    else record("type", host, { value });
+  };
+  const onPointerDown = (e) => {
+    if (!recording() || e.button !== 0) return;
+    const target = eventTarget(e);
+    if (!target || isGuidelyElement(target)) return;
+    const active = deepActiveElement(doc);
+    if (active && active !== target && !active.contains(target) && isTextEntry(active)) flushField(active);
+    let el = actionTarget(target);
+    let highlightEl = null;
+    const control = labelControl(el);
+    if (control) {
+      if (isTextEntry(control) || control.tagName === "SELECT") return;
+      highlightEl = el;
+      el = control;
+    }
+    if (isTextEntry(el) || el.tagName === "SELECT" || el.closest("select")) return;
+    if (el.disabled) return;
+    const now = Date.now();
+    if (lastPress && lastPress.el === el && now - lastPress.at < DOUBLE_CLICK_MS) {
+      lastPress.at = now;
+      return;
+    }
+    lastPress = { el, at: now };
+    record("click", el, { highlightEl });
+  };
+  const onChange = (e) => {
+    if (!recording()) return;
+    const el = eventTarget(e);
+    if (!el || isGuidelyElement(el)) return;
+    if (el.tagName === "SELECT") {
+      const sensitive = isSensitiveField(el, mask);
+      const value = sensitive ? "" : selectedOptionText(el);
+      record("select", el, sensitive ? { valueRedacted: true } : value ? { value } : {});
+      return;
+    }
+    const type = el.tagName === "INPUT" ? (el.getAttribute("type") || "").toLowerCase() : "";
+    if (type === "checkbox" || type === "radio") {
+      const pressed = lastPress && Date.now() - lastPress.at < 1e3 && lastPress.el === el;
+      if (!pressed) record("click", el);
+      return;
+    }
+    if (isTextEntry(el)) flushField(el);
+  };
+  const onFocusIn = (e) => {
+    const el = eventTarget(e);
+    if (el && !isGuidelyElement(el) && isTextEntry(el)) {
+      const host = el.tagName === "INPUT" || el.tagName === "TEXTAREA" ? el : actionTarget(el);
+      baseline.set(host, fieldValue(host));
+    }
+  };
+  const onFocusOut = (e) => {
+    const el = eventTarget(e);
+    if (el && el.tagName !== "INPUT" && el.tagName !== "TEXTAREA" && isTextEntry(el)) flushField(el);
+  };
+  const onKeyDown = (e) => {
+    if (e.key !== "Enter" || e.isComposing) return;
+    const el = eventTarget(e);
+    if (el && (el.tagName === "INPUT" || (e.metaKey || e.ctrlKey) && isTextEntry(el))) flushField(el);
+  };
+  const checkUrl = () => {
+    const url = win.location.href;
+    if (url === lastUrl) return;
+    lastUrl = url;
+    if (!recording() || Date.now() - lastAction < NAV_AFTER_ACTION_MS) return;
+    if (navTimer) clearTimeout(navTimer);
+    navTimer = setTimeout(() => {
+      navTimer = null;
+      if (recording()) record("navigate", null);
+    }, NAV_SETTLE_MS);
+  };
+  const poll = setInterval(checkUrl, 300);
+  const onMove = () => {
+    movedAt = performance.now();
+  };
+  const onInput = (e) => {
+    const el = eventTarget(e);
+    if (el && !isGuidelyElement(el)) typedAt = performance.now();
+  };
+  const expand = (open) => {
+    if (expanded === open) return;
+    expanded = open;
+    render();
+  };
+  const onBarEnter = () => expand(true);
+  const onBarLeave = () => expand(bar.contains(deepActiveElementIn(bar)));
+  const onBarFocusOut = (e) => expand(!!e.relatedTarget && bar.contains(e.relatedTarget));
+  bar.addEventListener("pointerenter", onBarEnter);
+  bar.addEventListener("pointerleave", onBarLeave);
+  bar.addEventListener("focusin", onBarEnter);
+  bar.addEventListener("focusout", onBarFocusOut);
+  const listen = { capture: true, passive: true };
+  doc.addEventListener("scroll", onMove, listen);
+  win.addEventListener("resize", onMove);
+  doc.addEventListener("pointerdown", onPointerDown, listen);
+  doc.addEventListener("change", onChange, listen);
+  doc.addEventListener("input", onInput, listen);
+  doc.addEventListener("focusin", onFocusIn, listen);
+  doc.addEventListener("focusout", onFocusOut, listen);
+  doc.addEventListener("keydown", onKeyDown, listen);
+  win.addEventListener("popstate", checkUrl);
+  win.addEventListener("hashchange", checkUrl);
+  const onLost = () => {
+    screen = null;
+    if (!stopped && wantShots) showNotice(NOTICES.lost);
+    render();
+  };
+  const requestScreen = async () => {
+    requesting = true;
+    showNotice(null);
+    render();
+    const res = await requestTabCapture(scope.el, doc);
+    requesting = false;
+    if (stopped) {
+      if (res.ok) res.screen.stop();
+      return false;
+    }
+    if (res.ok) {
+      screen = res.screen;
+      screen.onEnded(onLost);
+    } else showNotice(NOTICES[res.reason]);
+    render();
+    return res.ok;
+  };
+  const begin = (shots) => {
+    wantShots = shots;
+    phase = "recording";
+    expanded = false;
+    movedAt = performance.now();
+    primeActive();
+    lastUrl = win.location.href;
+    render();
+    options.onStart?.({ screenshots: shots });
+    record("navigate", null);
+  };
+  start.addEventListener("click", () => {
+    if (requesting) return;
+    if (!shotsAllowed || !canCaptureScreen()) {
+      if (shotsAllowed) showNotice(NOTICES.unsupported);
+      return begin(false);
+    }
+    void requestScreen().then((ok) => {
+      if (ok) begin(true);
+    });
+  });
+  noShots.addEventListener("click", () => {
+    showNotice(null);
+    begin(false);
+  });
+  resumeShots.addEventListener("click", () => {
+    if (!requesting) void requestScreen();
+  });
+  pause.addEventListener("click", () => {
+    if (phase === "recording") {
+      flushActive();
+      phase = "paused";
+    } else if (phase === "paused") {
+      phase = "recording";
+      lastUrl = win.location.href;
+    }
+    render();
+  });
+  const flushActive = () => {
+    const active = deepActiveElement(doc);
+    if (active && !isGuidelyElement(active) && isTextEntry(active)) flushField(active);
+  };
+  const primeActive = () => {
+    const active = deepActiveElement(doc);
+    if (active && !isGuidelyElement(active) && isTextEntry(active)) baseline.set(active, fieldValue(active));
+  };
+  done.addEventListener("click", () => {
+    if (phase === "saving") return;
+    flushActive();
+    options.onFinish();
+  });
+  cancel.addEventListener("click", () => {
+    stop();
+    options.onCancel();
+  });
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    clearInterval(poll);
+    if (navTimer) clearTimeout(navTimer);
+    if (pulseTimer) clearTimeout(pulseTimer);
+    doc.removeEventListener("scroll", onMove, listen);
+    win.removeEventListener("resize", onMove);
+    doc.removeEventListener("pointerdown", onPointerDown, listen);
+    doc.removeEventListener("change", onChange, listen);
+    doc.removeEventListener("input", onInput, listen);
+    doc.removeEventListener("focusin", onFocusIn, listen);
+    doc.removeEventListener("focusout", onFocusOut, listen);
+    doc.removeEventListener("keydown", onKeyDown, listen);
+    win.removeEventListener("popstate", checkUrl);
+    win.removeEventListener("hashchange", checkUrl);
+    screen?.stop();
+    screen = null;
+    scope.destroy();
+  };
+  if (options.resume) {
+    wantShots = shotsAllowed && options.resume.screenshots && canCaptureScreen();
+    phase = "recording";
+    if (wantShots) showNotice(NOTICES.lost);
+    primeActive();
+    render();
+    if (options.resume.navigate) record("navigate", null);
+  } else render();
+  return {
+    setSaving: (saving) => {
+      if (stopped) return;
+      phase = saving ? "saving" : "recording";
+      render();
+    },
+    isRecording: recording,
+    stop
+  };
+}
+export {
+  CAPTURE_INTERACTIVE_SELECTOR,
+  DOUBLE_CLICK_MS,
+  NAV_AFTER_ACTION_MS,
+  NAV_SETTLE_MS,
+  REDACT_SELECTOR,
+  actionTarget,
+  canCaptureScreen,
+  captureLabel,
+  captureRole,
+  classifyNumber,
+  collectRedactions,
+  describeCapturedElement,
+  encodeScreenshot,
+  fieldValue,
+  findSensitiveText,
+  grabFrame,
+  isMaskedElement,
+  isSensitiveField,
+  isTextEntry,
+  labelControl,
+  looksLikeSecretValue,
+  normalizeRect,
+  redactCanvas,
+  requestTabCapture,
+  screenshotDataUrl,
+  selectedOptionText,
+  startCapture,
+  toFrameRect
+};
+//# sourceMappingURL=capture.js.map