@offscript/sdk 0.1.1 → 0.1.2

package/dist/{chunk-3OSCH7J2.js → chunk-IBEPWI7S.js}

@@ -1,4 +1,4 @@
-import { buildPlaywrightContract, SDK_VERSION, SCHEMA_VERSION, SelectorGenerator, ACTION_SCHEMA_VERSION } from './chunk-LFXHB4PN.js';
+import { buildPlaywrightContract, SDK_VERSION, SCHEMA_VERSION, SelectorGenerator, ACTION_SCHEMA_VERSION } from './chunk-WUFW7TEL.js';
 
 // src/types/config.ts
 var DEFAULT_RECORDING = {
@@ -18,7 +18,7 @@ var DEFAULT_RECORDING = {
   stableAttributes: ["name", "data-id", "aria-label"]
 };
 var DEFAULT_PRIVACY = {
-  maskSensitiveInputs: true,
+  maskSensitiveInputs: false,
   maskAllText: false,
   captureRequestBodies: false,
   captureResponseBodies: false,
@@ -30,6 +30,7 @@ var DEFAULT_PRIVACY = {
   ignoreUrls: [],
   redactHeaders: [],
   redactKeys: [],
+  captureSensitiveValues: false,
   maxBodyBytes: 16 * 1024,
   textContentTypes: [/^text\//i, /json/i, /xml/i, /x-www-form-urlencoded/i, /javascript/i],
   localRetentionMs: 24 * 36e5
@@ -159,13 +160,15 @@ var DataSanitizer = class {
     this.cfg = cfg;
     this.headerSet = /* @__PURE__ */ new Set([...BASE_SENSITIVE_HEADERS, ...cfg.redactHeaders.map((h) => h.toLowerCase())]);
     this.extraKeys = new Set(cfg.redactKeys.map((k) => k.toLowerCase()));
+    this.open = cfg.captureSensitiveValues === true;
   }
   isSensitiveKey(key) {
+    if (this.open) return false;
     return BASE_SENSITIVE_KEY_PATTERN.test(key) || this.extraKeys.has(key.toLowerCase());
   }
   /** Mascara padrões sensíveis em texto livre (JWT, Bearer, CPF, CNPJ, cartões). */
   scrubString(input) {
-    if (!input) return input;
+    if (this.open || !input) return input;
     let s = input.replace(JWT, REDACTED).replace(BEARER, (_m, scheme) => `${scheme} ${REDACTED}`);
     s = s.replace(CNPJ, REDACTED).replace(CPF, REDACTED);
     s = s.replace(CARD, (m) => {
@@ -175,6 +178,7 @@ var DataSanitizer = class {
     return s;
   }
   sanitizeHeaders(headers) {
+    if (this.open) return { ...headers };
     const out = {};
     for (const [k, v] of Object.entries(headers)) {
       out[k] = this.headerSet.has(k.toLowerCase()) || this.isSensitiveKey(k) ? REDACTED : this.scrubString(v);
@@ -183,6 +187,7 @@ var DataSanitizer = class {
   }
   /** Redige query params sensíveis e credenciais embutidas (user:pass@). */
   sanitizeUrl(raw, base) {
+    if (this.open) return raw;
     try {
       const u = new URL(raw, base ?? (typeof location !== "undefined" ? location.href : void 0));
       if (u.username || u.password) {
@@ -201,7 +206,7 @@ var DataSanitizer = class {
   }
   /** Redige query/fragmento de um valor de atributo de URL preservando a forma original (relativa ou absoluta). */
   redactUrlAttribute(value) {
-    if (typeof value !== "string" || !/[?#@]/.test(value)) return value;
+    if (this.open || typeof value !== "string" || !/[?#@]/.test(value)) return value;
     const hashAt = value.indexOf("#");
     const hash = hashAt >= 0 ? value.slice(hashAt) : "";
     const noHash = hashAt >= 0 ? value.slice(0, hashAt) : value;
@@ -958,6 +963,7 @@ function guard(sink, name, fn) {
 
 // src/recorders/ActionRecorder.ts
 var KEYS = /* @__PURE__ */ new Set(["Enter", "Escape", "Tab", "Backspace", "Delete", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"]);
+var MODIFIERS = /* @__PURE__ */ new Set(["Control", "Shift", "Alt", "Meta"]);
 var INTERACTIVE = "a,button,input,select,textarea,summary,[role=button],[role=link],[role=menuitem],[role=tab],[role=option],[data-testid],[data-test],[data-cy]";
 var INPUT_IDLE_MS = 700;
 var DRAG_MIN_PX = 8;
@@ -1083,7 +1089,7 @@ var ActionRecorder = class {
   onInput(e) {
     const el = this.target(e);
     if (!el || !(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) return;
-    if (el instanceof HTMLInputElement && ["checkbox", "radio", "file", "range", "color"].includes(el.type)) return;
+    if (el instanceof HTMLInputElement && ["checkbox", "radio", "file"].includes(el.type)) return;
     if (this.pendingInput && this.pendingInput.el !== el) this.flushInput();
     this.pendingInput ?? (this.pendingInput = { el, inputType: e.inputType ?? "input", startedAt: Date.now() });
     if (this.inputTimer) clearTimeout(this.inputTimer);
@@ -1101,8 +1107,9 @@ var ActionRecorder = class {
     const policy = this.sink.config.privacy;
     const allowed = policy.allowedInputSelectors.join(",");
     const isPassword = el instanceof HTMLInputElement && el.type === "password";
-    if (!isPassword && allowed && safe(() => el.matches(allowed))) {
-      payload.value = this.sink.sanitizer.scrubString(value);
+    const listed = Boolean(allowed) && safe(() => el.matches(allowed));
+    if (policy.captureSensitiveValues || !isPassword && (!policy.maskSensitiveInputs || listed)) {
+      payload.value = policy.captureSensitiveValues ? value : this.sink.sanitizer.scrubString(value);
       payload.valueCaptured = true;
     } else {
       payload.valueCaptured = false;
@@ -1130,13 +1137,15 @@ var ActionRecorder = class {
     }
   }
   onKey(e) {
-    const el = this.target(e);
+    const el = this.target(e) ?? document.body;
     if (!el) return;
     const modified = e.ctrlKey || e.metaKey || e.altKey;
-    const relevant = KEYS.has(e.key) || /^F\d{1,2}$/.test(e.key) || modified && e.key.length === 1;
-    if (!relevant) return;
+    const isModifier = MODIFIERS.has(e.key);
+    const relevant = KEYS.has(e.key) || isModifier || /^F\d{1,2}$/.test(e.key) || modified && e.key.length === 1;
+    if (!relevant || isModifier && e.repeat) return;
     if (e.key === "Enter" || e.key === "Tab") this.flushInput();
-    this.emit({ type: "keydown", payload: { key: e.key, code: e.code, modifiers: mods(e), repeat: e.repeat } }, el);
+    const modifiers = mods(e).filter((name) => name !== e.key);
+    this.emit({ type: "keydown", payload: { key: e.key, code: e.code, modifiers, repeat: e.repeat } }, el);
   }
   onFocus(type, e) {
     const el = this.target(e);
@@ -1269,7 +1278,7 @@ function parseBrowser(ua) {
   }
   return {};
 }
-function collectContext(id, reason, appVersion) {
+function collectContext(id, reason, appVersion, captureSensitiveValues = false) {
   const nav = navigator;
   const ua = nav.userAgent ?? "";
   let browser = parseBrowser(ua);
@@ -1297,7 +1306,8 @@ function collectContext(id, reason, appVersion) {
     testCaseId: id.testCaseId,
     executionId: id.executionId,
     sdkVersion: SDK_VERSION,
-    appVersion
+    appVersion,
+    captureSensitiveValues
   };
 }
 var ContextRecorder = class {
@@ -1316,7 +1326,7 @@ var ContextRecorder = class {
   }
   record(reason) {
     guard(this.sink, this.name, () => {
-      const data = collectContext(this.identity(), reason, this.sink.config.appVersion);
+      const data = collectContext(this.identity(), reason, this.sink.config.appVersion, this.sink.config.privacy.captureSensitiveValues);
       data.url = this.sink.sanitizer.sanitizeUrl(data.url);
       if (data.referrer) data.referrer = this.sink.sanitizer.sanitizeUrl(data.referrer);
       this.sink.emit("context", data, { priority: "normal" });
@@ -1870,9 +1880,10 @@ var RRWebRecorder = class {
       emit: (event) => this.onEvent(event),
       blockSelector: block || void 0,
       maskTextSelector: maskText || void 0,
-      maskAllInputs: privacy.maskSensitiveInputs,
-      maskInputOptions: privacy.maskSensitiveInputs ? { password: true, email: true, tel: true, text: true, textarea: true, search: true, url: true, number: true, select: true, date: true, "datetime-local": true, month: true, time: true, week: true } : { password: true },
+      maskAllInputs: privacy.maskSensitiveInputs && !privacy.captureSensitiveValues,
+      maskInputOptions: privacy.captureSensitiveValues ? { password: false } : privacy.maskSensitiveInputs ? { password: true, email: true, tel: true, text: true, textarea: true, search: true, url: true, number: true, select: true, date: true, "datetime-local": true, month: true, time: true, week: true } : { password: true },
       maskInputFn: (text, el) => {
+        if (privacy.captureSensitiveValues) return text;
         if (el?.type === "password") return "*".repeat(text.length);
         if (allowed && safe(() => el.matches(allowed))) return text;
         return "*".repeat(text.length);
@@ -2036,6 +2047,9 @@ var SessionManager = class {
   get currentToken() {
     return this.token;
   }
+  hasTokenAvailable() {
+    return Boolean(this.token || readQueryToken());
+  }
   // ---- persistência -------------------------------------------------------
   loadPersisted() {
     const raw = safe(() => sessionStorage.getItem(this.storageKey));
@@ -2104,9 +2118,11 @@ var SessionManager = class {
   // ---- ciclo de vida ------------------------------------------------------
   /** Cria (ou obtém, de forma idempotente) a sessão no backend. */
   async create(opts, context) {
-    if (!opts?.sessionToken || !opts.executionId || !opts.testCaseId)
+    const queryToken = consumeQueryToken();
+    const sessionToken = opts?.sessionToken || this.token || queryToken;
+    if (!sessionToken || !opts.executionId || !opts.testCaseId)
       throw new AuthError("sessionToken, executionId e testCaseId s\xE3o obrigat\xF3rios");
-    this.token = opts.sessionToken;
+    this.token = sessionToken;
     const tabId = await resolveTabId(this.cfg.storagePrefix, this.loadPersisted()?.tabId);
     const res = await this.api.createSession({
       platformId: this.cfg.platformId,
@@ -2204,6 +2220,27 @@ var SessionManager = class {
     this.seq = 0;
   }
 };
+function consumeQueryToken() {
+  if (typeof window === "undefined") return "";
+  try {
+    const token = readQueryToken();
+    if (!token) return "";
+    const url = new URL(window.location.href);
+    url.searchParams.delete("offscript_token");
+    window.history.replaceState(window.history.state, typeof document === "undefined" ? "" : document.title, `${url.pathname}${url.search}${url.hash}`);
+    return token;
+  } catch {
+    return "";
+  }
+}
+function readQueryToken() {
+  if (typeof window === "undefined") return "";
+  try {
+    return new URL(window.location.href).searchParams.get("offscript_token")?.trim() ?? "";
+  } catch {
+    return "";
+  }
+}
 var heldLocks = [];
 async function resolveTabId(prefix, previous) {
   const candidate = previous ?? uid("tab_");
@@ -2262,10 +2299,628 @@ function resolveConfig(input) {
     autoResume: input.autoResume ?? true,
     heartbeatIntervalMs: input.heartbeatIntervalMs ?? 3e4,
     storagePrefix: input.storagePrefix ?? "offscript",
-    debug: input.debug ?? false
+    debug: input.debug ?? false,
+    controls: input.controls ?? true
   };
 }
 
+// src/ui/RecordingControls.ts
+var HOST_ATTR = "data-offscript-console";
+var EYE_SEQUENCE = [
+  { pose: "open", duration: 2600 },
+  { pose: "blink", duration: 160 },
+  { pose: "open", duration: 1800 },
+  { pose: "left", duration: 700 },
+  { pose: "open", duration: 1500 },
+  { pose: "wink", duration: 480 },
+  { pose: "open", duration: 1900 },
+  { pose: "right", duration: 700 },
+  { pose: "open", duration: 1600 },
+  { pose: "up", duration: 640 },
+  { pose: "happy", duration: 720 }
+];
+var EYE_PATHS = {
+  open: ["M59.5 79.5v15", "M93 79.5v15"],
+  blink: ["M52 89q7.5 5 15 0", "M85.5 89q7.5 5 15 0"],
+  wink: ["M52 89q7.5 5 15 0", "M93 79.5v15"],
+  happy: ["M52 91q7.5-12 15 0", "M85.5 91q7.5-12 15 0"]
+};
+var RecordingControls = class {
+  constructor(sdk) {
+    this.sdk = sdk;
+    this.eyeTimer = 0;
+    this.placeFrame = 0;
+    this.eyeIndex = 0;
+    this.busy = false;
+    this.expanded = true;
+    this.privacyOpen = true;
+    this.failure = "";
+    this.onVisibility = () => {
+      window.clearTimeout(this.eyeTimer);
+      if (!document.hidden) this.scheduleEye();
+    };
+    this.onViewport = () => {
+      this.placeConfirm();
+      this.schedulePlacePrivacy();
+    };
+  }
+  mount() {
+    if (this.host || typeof document === "undefined") return;
+    const host = document.createElement("div");
+    host.setAttribute(HOST_ATTR, "");
+    host.setAttribute("data-offscript-ignore", "");
+    host.className = "offscript-ignore";
+    host.style.cssText = "position:fixed;left:0;top:0;width:0;height:0;margin:0;padding:0;border:0;overflow:visible;z-index:2147483646;pointer-events:none;";
+    const shadow = host.attachShadow({ mode: "closed" });
+    shadow.innerHTML = TEMPLATE;
+    this.bind(shadow);
+    this.host = host;
+    this.shadow = shadow;
+    this.note = shadow.querySelector("[data-note]") ?? void 0;
+    this.place();
+    this.watchDom();
+    this.unsubscribe = this.sdk.on("statusChange", () => this.render());
+    window.addEventListener("resize", this.onViewport);
+    window.visualViewport?.addEventListener("resize", this.onViewport);
+    document.fonts?.ready.then(() => {
+      if (this.host) this.onViewport();
+    });
+    this.watchDock();
+    this.render();
+    this.startEyes();
+  }
+  unmount() {
+    this.unsubscribe?.();
+    this.unsubscribe = void 0;
+    this.observer?.disconnect();
+    this.observer = void 0;
+    this.dockWatch?.disconnect();
+    this.dockWatch = void 0;
+    window.cancelAnimationFrame(this.placeFrame);
+    this.placeFrame = 0;
+    window.clearTimeout(this.eyeTimer);
+    window.removeEventListener("resize", this.onViewport);
+    window.visualViewport?.removeEventListener("resize", this.onViewport);
+    document.removeEventListener("visibilitychange", this.onVisibility);
+    this.host?.remove();
+    this.host = void 0;
+    this.shadow = void 0;
+  }
+  place() {
+    const host = this.host;
+    const parent = document.body ?? document.documentElement;
+    if (!host || !parent || host.parentNode === parent) return;
+    parent.appendChild(host);
+  }
+  watchDom() {
+    if (typeof MutationObserver === "undefined") return;
+    this.observer?.disconnect();
+    this.observer = new MutationObserver(() => {
+      this.place();
+      if (document.body) this.observer?.observe(document.body, { childList: true });
+    });
+    this.observer.observe(document.documentElement, { childList: true });
+    if (document.body) this.observer.observe(document.body, { childList: true });
+  }
+  watchDock() {
+    const dock = this.shadow?.querySelector(".dock");
+    if (!(dock instanceof HTMLElement) || typeof ResizeObserver === "undefined") return;
+    this.dockWatch?.disconnect();
+    this.dockWatch = new ResizeObserver(() => this.placePrivacy());
+    this.dockWatch.observe(dock);
+  }
+  bind(shadow) {
+    const stop = (event) => event.stopPropagation();
+    shadow.addEventListener("click", (event) => {
+      const actionNode = event.composedPath().find((node) => node instanceof Element && node.hasAttribute("data-action"));
+      const action = actionNode instanceof Element ? actionNode.getAttribute("data-action") : null;
+      if (action === "open") {
+        this.expanded = true;
+        this.render();
+      } else if (action === "close") {
+        this.expanded = false;
+        this.render();
+      } else if (action === "record") void this.run(() => this.sdk.startArmedRecording());
+      else if (action === "pause") void this.run(() => this.sdk.pauseRecording());
+      else if (action === "resume") void this.run(() => this.sdk.resumeRecording());
+      else if (action === "stop") void this.run(() => this.sdk.stopRecording());
+      else if (action === "new") this.openConfirm();
+      else if (action === "cancel") this.closeConfirm();
+      else if (action === "confirm") {
+        this.closeConfirm();
+        void this.run(() => this.sdk.startNewSession());
+      } else if (action === "privacy-show") {
+        this.privacyOpen = true;
+        this.render();
+      } else if (action === "privacy-hide") {
+        this.privacyOpen = false;
+        this.render();
+      }
+    }, true);
+    for (const type of ["click", "dblclick", "auxclick", "contextmenu", "pointerdown", "pointerup", "mousedown", "mouseup", "keydown", "keyup", "keypress", "input", "change", "mouseover", "mouseout"]) {
+      shadow.addEventListener(type, stop);
+    }
+    shadow.querySelector("[data-confirm]")?.addEventListener("keydown", (event) => {
+      if (event instanceof KeyboardEvent && event.key === "Escape") this.closeConfirm();
+    });
+    shadow.querySelector("[data-privacy]")?.addEventListener("keydown", (event) => {
+      if (event instanceof KeyboardEvent && event.key === "Escape") {
+        this.privacyOpen = false;
+        this.render();
+      }
+    });
+  }
+  openConfirm() {
+    const bubble = this.shadow?.querySelector("[data-confirm]");
+    if (!(bubble instanceof HTMLElement) || this.busy || !bubble.hidden) return;
+    bubble.hidden = false;
+    this.placeConfirm();
+    this.paintPrivacy();
+    const cancel = bubble.querySelector("[data-action='cancel']");
+    if (cancel instanceof HTMLElement) cancel.focus();
+  }
+  placeConfirm() {
+    const bubble = this.shadow?.querySelector("[data-confirm]");
+    const card = bubble?.querySelector(".bubble");
+    const button = this.shadow?.querySelector("[data-action='new']");
+    if (!(bubble instanceof HTMLElement) || !(card instanceof HTMLElement) || !(button instanceof HTMLElement)) return;
+    const buttonBox = button.getBoundingClientRect();
+    const buttonCenter = buttonBox.left + buttonBox.width / 2;
+    const tailHalf = 4.5;
+    const margin = 12;
+    const viewport = document.documentElement.clientWidth;
+    let rightEdge = buttonCenter + 22 + tailHalf;
+    rightEdge = Math.min(viewport - margin, Math.max(margin + card.offsetWidth, rightEdge));
+    bubble.style.right = `${Math.round(viewport - rightEdge)}px`;
+    const tail = Math.min(Math.max(12, rightEdge - buttonCenter - tailHalf), Math.max(12, card.offsetWidth - 18));
+    card.style.setProperty("--tail", `${Math.round(tail)}px`);
+  }
+  closeConfirm() {
+    const bubble = this.shadow?.querySelector("[data-confirm]");
+    if (bubble instanceof HTMLElement) bubble.hidden = true;
+    this.paintPrivacy();
+  }
+  async run(task) {
+    if (this.busy) return;
+    this.busy = true;
+    this.failure = "";
+    this.render();
+    try {
+      await task();
+    } catch {
+      this.failure = "N\xE3o foi poss\xEDvel concluir";
+    } finally {
+      this.busy = false;
+      this.render();
+    }
+  }
+  render() {
+    this.place();
+    const status = this.sdk.getState().status;
+    const shell = this.shadow?.querySelector("[data-shell]");
+    shell?.setAttribute("data-open", this.expanded ? "true" : "false");
+    shell?.setAttribute("data-state", status);
+    if (this.note) this.note.textContent = this.failure;
+    const live = status === "recording" || status === "paused";
+    if (!live) this.closeConfirm();
+    this.paintPrivacy();
+    this.setHidden("record", live || status === "initializing" || status === "stopping");
+    this.setHidden("pause", status !== "recording");
+    this.setHidden("resume", status !== "paused");
+    this.setHidden("new", !live);
+    this.setHidden("stop", !live);
+    this.setEnabled("record", !this.busy && !live && status !== "initializing" && status !== "stopping");
+    this.setEnabled("pause", !this.busy && status === "recording");
+    this.setEnabled("resume", !this.busy && status === "paused");
+    this.setEnabled("stop", !this.busy && live);
+    this.setEnabled("new", !this.busy && live);
+  }
+  paintPrivacy() {
+    const flag = this.sdk.capturesSensitiveValues();
+    const confirm = this.shadow?.querySelector("[data-confirm]");
+    const confirmOpen = confirm instanceof HTMLElement && !confirm.hidden;
+    const bubble = this.shadow?.querySelector("[data-privacy]");
+    const show = flag && this.privacyOpen && this.expanded && !confirmOpen;
+    if (bubble instanceof HTMLElement) {
+      bubble.hidden = !show;
+      if (!show) this.clearPrivacyPlace(bubble);
+    }
+    if (show) this.schedulePlacePrivacy();
+    this.setHidden("privacy-show", !flag || this.privacyOpen || !this.expanded);
+  }
+  schedulePlacePrivacy() {
+    this.placePrivacy();
+    window.cancelAnimationFrame(this.placeFrame);
+    this.placeFrame = window.requestAnimationFrame(() => {
+      this.placePrivacy();
+      this.placeFrame = window.requestAnimationFrame(() => {
+        this.placeFrame = 0;
+        this.placePrivacy();
+      });
+    });
+  }
+  clearPrivacyPlace(wrap) {
+    wrap.style.position = "";
+    wrap.style.transform = "";
+    wrap.style.width = "";
+    wrap.style.maxWidth = "";
+    wrap.style.left = "";
+    wrap.style.right = "";
+    wrap.style.top = "";
+    wrap.style.bottom = "";
+  }
+  placePrivacy() {
+    const wrap = this.shadow?.querySelector("[data-privacy]");
+    const card = wrap?.querySelector(".bubble");
+    const face = this.shadow?.querySelector(".face");
+    if (!(wrap instanceof HTMLElement) || !(card instanceof HTMLElement) || !(face instanceof HTMLElement) || wrap.hidden) return;
+    const box = face.getBoundingClientRect();
+    if (box.width < 8 || box.height < 8 || box.top < 1 && box.left < 1) return;
+    const margin = 12;
+    const viewport = document.documentElement.clientWidth;
+    const maxWidth = Math.min(264, viewport - margin * 2);
+    wrap.style.position = "fixed";
+    wrap.style.transform = "none";
+    wrap.style.width = `${maxWidth}px`;
+    wrap.style.maxWidth = `${maxWidth}px`;
+    wrap.style.left = "auto";
+    wrap.style.bottom = "auto";
+    const faceCenter = box.left + box.width / 2;
+    const tailHalf = 5;
+    let rightEdge = faceCenter + 12 + tailHalf;
+    rightEdge = Math.min(viewport - margin, Math.max(margin + maxWidth, rightEdge));
+    wrap.style.right = `${Math.round(viewport - rightEdge)}px`;
+    wrap.style.top = `${Math.round(Math.max(margin, box.top - 10 - wrap.offsetHeight))}px`;
+    const tail = Math.min(Math.max(12, rightEdge - faceCenter - tailHalf), Math.max(12, maxWidth - 18));
+    card.style.setProperty("--tail", `${Math.round(tail)}px`);
+  }
+  setEnabled(action, enabled) {
+    const button = this.shadow?.querySelector(`[data-action='${action}']`);
+    if (button instanceof HTMLButtonElement) button.disabled = !enabled;
+  }
+  setHidden(action, hidden) {
+    const button = this.shadow?.querySelector(`[data-action='${action}']`);
+    if (button instanceof HTMLButtonElement) button.hidden = hidden;
+  }
+  startEyes() {
+    const media = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!media || media.matches) return;
+    document.addEventListener("visibilitychange", this.onVisibility);
+    this.scheduleEye();
+  }
+  scheduleEye() {
+    const beat = EYE_SEQUENCE[this.eyeIndex % EYE_SEQUENCE.length];
+    this.applyPose(beat.pose);
+    this.eyeIndex = (this.eyeIndex + 1) % EYE_SEQUENCE.length;
+    this.eyeTimer = window.setTimeout(() => this.scheduleEye(), beat.duration);
+  }
+  applyPose(pose) {
+    const [left, right] = EYE_PATHS[pose] ?? EYE_PATHS.open;
+    this.shadow?.querySelectorAll("[data-eye='left']").forEach((node) => node.setAttribute("d", left));
+    this.shadow?.querySelectorAll("[data-eye='right']").forEach((node) => node.setAttribute("d", right));
+    this.shadow?.querySelectorAll("[data-eyes]").forEach((node) => node.setAttribute("data-pose", pose));
+  }
+};
+var ICON = {
+  pause: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.5v9M11 3.5v9"/></svg>`,
+  play: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3.8 12.2 8 6 12.2z" fill="currentColor" stroke="none"/></svg>`,
+  close: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4 4 12"/></svg>`,
+  speak: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 3.5h9a1.5 1.5 0 0 1 1.5 1.5v5a1.5 1.5 0 0 1-1.5 1.5H7.2L4.5 13.5v-2H3.5A1.5 1.5 0 0 1 2 10V5a1.5 1.5 0 0 1 1.5-1.5Z"/></svg>`
+};
+function mark(gradientId) {
+  return `<svg class="mark" viewBox="14 9 138 126" fill="none" aria-hidden="true">
+    <defs>
+      <linearGradient id="${gradientId}" x1="112" y1="41" x2="143" y2="17" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stop-color="#753eff"></stop>
+        <stop offset="1" stop-color="#1772ff"></stop>
+      </linearGradient>
+    </defs>
+    <path d="M72 23C88 23 101 26 109 32L112 40C122 50 128 64 128 80C128 109 104 131 72 131C41 131 16 108 16 80C16 46 40 23 72 23Z" fill="#eeeef7"></path>
+    <path d="M112 41C119 37 123 27 131 22C135 19 139 18 143 17" stroke="url(#${gradientId})" stroke-width="8" stroke-linecap="round"></path>
+    <g class="eyes" data-eyes data-pose="open" stroke="#10182e" stroke-width="7" stroke-linecap="round">
+      <path data-eye="left" d="M59.5 79.5v15"></path>
+      <path data-eye="right" d="M93 79.5v15"></path>
+    </g>
+  </svg>`;
+}
+var TEMPLATE = `
+<style>
+  :host { color-scheme: dark; }
+  button {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid #3a4458;
+    border-radius: 999px;
+    background: transparent;
+    color: #f4f3fc;
+    cursor: pointer;
+  }
+  button svg {
+    width: 15px;
+    height: 15px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.7;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  button:hover:not(:disabled) { border-color: #a596ff; color: #d0c8ff; }
+  button:focus-visible { outline: 2px solid #a596ff; outline-offset: 2px; }
+  button:disabled { cursor: not-allowed; opacity: 0.4; }
+  button[hidden] { display: none; }
+  button.text {
+    width: auto;
+    padding: 0 12px;
+    font: 600 12px/1 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  }
+  button.record {
+    border: 0;
+    background: linear-gradient(100deg, #6847ff, #1673ff);
+    color: #fff;
+  }
+  button.finish {
+    border: 0;
+    background: #e5485f;
+    color: #fff;
+  }
+  button.record:hover:not(:disabled),
+  button.finish:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
+  button.primary {
+    border: 0;
+    background: linear-gradient(100deg, #6847ff, #1673ff);
+    color: #fff;
+  }
+  button.primary:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
+  .launcher, .dock {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    z-index: 1;
+    border: 1px solid #232b3b;
+    background: #151b27;
+    box-shadow: 0 18px 40px rgba(3, 5, 12, 0.5);
+    pointer-events: auto;
+    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  }
+  .launcher {
+    width: 56px;
+    height: 56px;
+    padding: 8px;
+    border-radius: 999px;
+    cursor: pointer;
+  }
+  .launcher .mark { width: 100%; height: 100%; }
+  .launcher::after {
+    content: "";
+    position: absolute;
+    right: 1px;
+    bottom: 1px;
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    background: #929bb1;
+    box-shadow: 0 0 0 2px #151b27;
+  }
+  [data-state="recording"] .launcher::after { background: #1673ff; }
+  [data-state="paused"] .launcher::after { background: #d0c8ff; }
+  [data-state="error"] .launcher::after { background: #e5485f; }
+  .dock {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    max-width: calc(100vw - 32px);
+    padding: 6px 6px 6px 12px;
+    border-radius: 999px;
+    color: #f4f3fc;
+    overflow: visible;
+  }
+  [data-open="false"] .dock, [data-open="true"] .launcher { display: none; }
+  .brand { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: visible; }
+  .face { position: relative; flex: none; width: 28px; height: 28px; overflow: visible; }
+  .dock .mark { width: 28px; height: 28px; }
+  .word {
+    color: #f4f3fc;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    line-height: 1;
+  }
+  .actions { display: flex; align-items: center; gap: 6px; }
+  .note {
+    position: fixed;
+    right: 16px;
+    bottom: 78px;
+    z-index: 1;
+    margin: 0;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: #151b27;
+    color: #ff9aa8;
+    font: 600 11px/1.3 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+    pointer-events: none;
+  }
+  .note:empty { display: none; }
+  [data-shell]:has(.note:not(:empty)) .privacy { bottom: calc(100% + 48px); }
+  .eyes {
+    transform-box: view-box;
+    transform-origin: 0 0;
+    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .eyes[data-pose="left"] { transform: translate(-4.5%, 0.8%); }
+  .eyes[data-pose="right"] { transform: translate(4.5%, 0.8%); }
+  .eyes[data-pose="up"] { transform: translate(0, -3.5%); }
+  @media (prefers-reduced-motion: reduce) {
+    .eyes { transition: none; }
+    .eyes[data-pose] { transform: none; }
+    .speak:not([hidden]) .bubble { animation: none; }
+  }
+  .speak {
+    position: fixed;
+    right: 16px;
+    bottom: 76px;
+    z-index: 2;
+    width: max-content;
+    max-width: min(16rem, calc(100vw - 32px));
+    pointer-events: auto;
+    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  }
+  .speak[hidden] { display: none; }
+  .bubble {
+    position: relative;
+    padding: 0.6rem 0.7rem 0.55rem;
+    border: 1px solid #3d3590;
+    border-radius: 1rem;
+    background: #1b1a3f;
+    color: #c7cadc;
+    box-shadow: 0 16px 40px rgba(3, 5, 12, 0.45);
+    animation: bubble-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .bubble::after {
+    content: "";
+    position: absolute;
+    right: var(--tail, 22px);
+    bottom: -5px;
+    width: 9px;
+    height: 9px;
+    border-right: 1px solid #3d3590;
+    border-bottom: 1px solid #3d3590;
+    background: #1b1a3f;
+    transform: rotate(45deg);
+  }
+  .bubble .mark {
+    display: block;
+    width: 22px;
+    height: 22px;
+    margin: 0 0 0.35rem;
+  }
+  @keyframes bubble-in {
+    from { opacity: 0; transform: translateY(8px) scale(0.96); }
+    to { opacity: 1; transform: none; }
+  }
+  .bubble p {
+    margin: 0;
+    color: #c7cadc;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.45;
+  }
+  .privacy {
+    position: absolute;
+    left: auto;
+    right: 50%;
+    bottom: calc(100% + 18px);
+    z-index: 3;
+    width: min(16.5rem, calc(100vw - 24px));
+    max-width: min(16.5rem, calc(100vw - 24px));
+    pointer-events: auto;
+    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+    transform: translateX(20px);
+  }
+  .privacy[hidden] { display: none; }
+  .privacy .bubble {
+    padding: 0.75rem 2.15rem 0.75rem 0.9rem;
+    border-radius: 16px;
+  }
+  .privacy .bubble::after {
+    right: var(--tail, 12px);
+    bottom: -5px;
+    width: 10px;
+    height: 10px;
+  }
+  @media (max-width: 560px) {
+    .word { display: none; }
+    .privacy {
+      position: fixed;
+      left: 12px;
+      right: 12px;
+      bottom: 76px;
+      width: auto;
+      max-width: none;
+      transform: none;
+    }
+    .privacy .bubble {
+      padding: 0.65rem 1.85rem 0.6rem 0.75rem;
+    }
+    .privacy .bubble p { font-size: 0.75rem; }
+  }
+  .privacy button.hide {
+    position: absolute;
+    top: 0.4rem;
+    right: 0.4rem;
+    width: 24px;
+    height: 24px;
+    border: 0;
+    background: transparent;
+    color: #c7cadc;
+  }
+  .privacy button.hide:hover:not(:disabled) { color: #f4f3fc; }
+  .choices { display: flex; gap: 6px; margin-top: 0.7rem; }
+  .speak button.choice {
+    width: auto;
+    height: auto;
+    min-height: 1.75rem;
+    padding: 0 0.7rem;
+    border-radius: 999px;
+    font: 600 0.75rem/1 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  }
+  .speak button.secondary {
+    border: 1px solid #3a4458;
+    background: transparent;
+    color: #f4f3fc;
+  }
+  .speak button.secondary:hover:not(:disabled) { border-color: #a596ff; color: #d0c8ff; }
+  .speak button.danger {
+    border: 0;
+    background: #e5485f;
+    color: #fff;
+  }
+  .speak button.danger:hover:not(:disabled) { color: #fff; background: color-mix(in srgb, #e5485f 88%, #fff); }
+</style>
+<div data-shell data-open="true" data-state="recording">
+  <button type="button" class="launcher" data-action="open" aria-label="Abrir controles da grava\xE7\xE3o">
+    ${mark("offscript-trail-launcher")}
+  </button>
+  <div class="dock" role="toolbar" aria-label="Controles da grava\xE7\xE3o">
+    <div class="brand">
+      <span class="face">
+        ${mark("offscript-trail-dock")}
+        <div class="privacy" data-privacy hidden>
+          <div class="bubble" role="status">
+            <button type="button" class="hide" data-action="privacy-hide" aria-label="Fechar aviso">${ICON.close}</button>
+            <p>Tudo vis\xEDvel na tela ser\xE1 gravado, inclusive o que for digitado \u2014 senha e dado sens\xEDvel tamb\xE9m.</p>
+          </div>
+        </div>
+      </span>
+      <span class="word">Offscript</span>
+    </div>
+    <div class="actions">
+      <button type="button" data-action="privacy-show" aria-label="Abrir aviso" title="Tudo vis\xEDvel na tela ser\xE1 gravado, inclusive o que for digitado" hidden>${ICON.speak}</button>
+      <button type="button" class="text record" data-action="record">Iniciar</button>
+      <button type="button" data-action="pause" aria-label="Pausar" title="Pausar">${ICON.pause}</button>
+      <button type="button" data-action="resume" aria-label="Retomar" title="Retomar">${ICON.play}</button>
+      <button type="button" class="text" data-action="new" title="Descarta o que foi gravado e volta ao in\xEDcio">Nova sess\xE3o</button>
+      <button type="button" class="text finish" data-action="stop" title="Encerra a coleta e envia o que foi gravado">Finalizar</button>
+      <button type="button" data-action="close" aria-label="Fechar" title="Fechar">${ICON.close}</button>
+    </div>
+  </div>
+  <div class="speak" data-confirm hidden>
+    <div class="bubble" role="dialog" aria-labelledby="offscript-confirm-title">
+      ${mark("offscript-trail-speak")}
+      <p id="offscript-confirm-title">Descartar esta sess\xE3o? O que foi gravado ser\xE1 ignorado.</p>
+      <div class="choices">
+        <button type="button" class="choice secondary" data-action="cancel">Cancelar</button>
+        <button type="button" class="choice danger" data-action="confirm">Descartar</button>
+      </div>
+    </div>
+  </div>
+  <p class="note" data-note></p>
+</div>
+`;
+
 // src/core/OffscriptSDK.ts
 var MAX_LOG = 5e3;
 var Offscript = class {
@@ -2288,6 +2943,9 @@ var Offscript = class {
   getState() {
     return { status: this.status, session: this.sessions.session, pending: this.transport?.pending ?? 0, lastError: this.lastError };
   }
+  capturesSensitiveValues() {
+    return this.config.privacy.captureSensitiveValues === true;
+  }
   getMetrics() {
     return { emitted: this.metrics.emitted, dropped: this.metrics.dropped, avgEmitMs: this.metrics.emitted ? this.metrics.emitMs / this.metrics.emitted : 0, bufferKind: this.transport?.bufferKind };
   }
@@ -2299,6 +2957,7 @@ var Offscript = class {
   }
   async doInit() {
     if (typeof window === "undefined") throw new OffscriptError("NOT_SUPPORTED", "O SDK requer um ambiente de navegador");
+    this.ensureControls();
     this.setStatus("initializing");
     try {
       const buffer = await openBuffer(`${this.config.storagePrefix}-${this.config.platformId}`, this.config.transport.persist);
@@ -2331,9 +2990,10 @@ var Offscript = class {
       throw new InvalidStateError(`J\xE1 existe grava\xE7\xE3o ativa para a execu\xE7\xE3o ${cur.executionId}. Encerre-a antes.`);
     }
     if (this.status === "stopping") throw new InvalidStateError("Grava\xE7\xE3o em encerramento");
+    this.lastStart = { testCaseId: opts.testCaseId, executionId: opts.executionId, sessionToken: opts.sessionToken };
     this.setStatus("initializing");
     try {
-      const ctx = collectContext({ platformId: this.config.platformId, testCaseId: opts.testCaseId, executionId: opts.executionId }, "initial", this.config.appVersion);
+      const ctx = collectContext({ platformId: this.config.platformId, testCaseId: opts.testCaseId, executionId: opts.executionId }, "initial", this.config.appVersion, this.config.privacy.captureSensitiveValues);
       await this.sessions.create(opts, { ...ctx, url: this.sanitizer.sanitizeUrl(ctx.url), referrer: void 0, title: void 0 });
       const s = this.sessions.session;
       await this.transport.start({ sessionId: s.sessionId, executionId: s.executionId, tabId: s.tabId });
@@ -2368,6 +3028,11 @@ var Offscript = class {
       if (state.status === "paused") this.recorders.forEach((r) => r.pause?.());
       this.actions?.recordPageLoad(safe(() => performance.getEntriesByType("navigation")[0]?.type), document.referrer);
       this.sessions.startHeartbeat((r) => this.onHeartbeat(r.status), (e) => void this.onFatal(e), () => this.transport?.pending ?? 0, () => this.status);
+      const token = this.sessions.currentToken;
+      if (token) {
+        this.lastStart = { testCaseId: s.testCaseId, executionId: s.executionId, sessionToken: token };
+        this.armed ?? (this.armed = { testCaseId: s.testCaseId, sessionToken: token });
+      }
       this.bus.emit("sessionStart", s);
     } catch (e) {
       await this.teardown();
@@ -2377,6 +3042,38 @@ var Offscript = class {
       if (!(e instanceof SessionExpiredError || e instanceof SessionDisabledError || e instanceof AuthError)) throw e;
     }
   }
+  /** Guarda caso de teste e token para o botão de gravar, sem abrir a sessão. */
+  armRecording(opts) {
+    this.armed = { testCaseId: opts.testCaseId, sessionToken: opts.sessionToken };
+  }
+  /** Abre a coleta com os dados armados, ou com os da última sessão. */
+  startArmedRecording() {
+    if ((this.status === "recording" || this.status === "paused") && this.sessions.session) return Promise.resolve(this.sessions.session);
+    return this.startRecording(this.freshStart());
+  }
+  /** Descarta a coleta atual e volta ao estado inicial, sem abrir outra. */
+  async startNewSession() {
+    if (this.status !== "recording" && this.status !== "paused") return;
+    await this.discardRecording();
+  }
+  freshStart() {
+    const base = this.armed ?? (this.lastStart ? { testCaseId: this.lastStart.testCaseId, sessionToken: this.lastStart.sessionToken } : void 0);
+    if (!base?.testCaseId || !base.sessionToken) throw new InvalidStateError("N\xE3o h\xE1 dados para iniciar a grava\xE7\xE3o");
+    return { testCaseId: base.testCaseId, sessionToken: base.sessionToken, executionId: uid("exec_") };
+  }
+  async discardRecording() {
+    const sessionId = this.sessions.session?.sessionId ?? "";
+    this.accepting = false;
+    this.stopRecorders();
+    this.sessions.stopHeartbeat();
+    this.transport?.stop();
+    if (sessionId) await this.transport?.clearSession(sessionId);
+    this.lifecycle?.uninstall();
+    this.sessions.clearPersisted();
+    this.sessions.reset();
+    this.setStatus("idle");
+    if (sessionId) this.bus.emit("sessionDiscard", { sessionId });
+  }
   async pauseRecording() {
     if (this.status === "paused") return;
     if (this.status !== "recording") throw new InvalidStateError(`N\xE3o \xE9 poss\xEDvel pausar no estado ${this.status}`);
@@ -2453,6 +3150,8 @@ var Offscript = class {
     }
     this.destroyed = true;
     await this.teardown();
+    this.controls?.unmount();
+    this.controls = void 0;
     this.sessions.reset();
     this.transport?.close();
     this.bus.clear();
@@ -2578,6 +3277,7 @@ var Offscript = class {
     this.transport?.setOnline(typeof navigator === "undefined" ? true : navigator.onLine !== false);
   }
   async startRecorders() {
+    this.ensureControls();
     const r = this.config.recording;
     const list = [];
     if (r.rrweb) list.push(this.rrweb = new RRWebRecorder(this));
@@ -2600,6 +3300,13 @@ var Offscript = class {
     for (const r of this.recorders.splice(0).reverse()) safe(() => r.stop());
     this.rrweb = this.actions = this.context = void 0;
   }
+  ensureControls() {
+    if (!this.config.controls || typeof document === "undefined" || !this.sessions.hasTokenAvailable()) return;
+    safe(() => {
+      this.controls ?? (this.controls = new RecordingControls(this));
+      this.controls.mount();
+    });
+  }
   async teardown() {
     this.accepting = false;
     this.stopRecorders();
@@ -2654,5 +3361,5 @@ var Offscript = class {
 Offscript.version = SDK_VERSION;
 
 export { AuthError, ConfigError, DEFAULT_PRIVACY, DEFAULT_RECORDING, DEFAULT_TRANSPORT, DataSanitizer, InvalidStateError, Offscript, OffscriptError, SessionDisabledError, SessionExpiredError, TransportError };
-//# sourceMappingURL=chunk-3OSCH7J2.js.map
-//# sourceMappingURL=chunk-3OSCH7J2.js.map
+//# sourceMappingURL=chunk-IBEPWI7S.js.map
+//# sourceMappingURL=chunk-IBEPWI7S.js.map