issue-sticker 0.4.0 → 0.5.0

package/dist/{externalUserPayload-BVNl_35M.js → externalUserPayload-zu5IXBjn.js}

@@ -1,4 +1,4 @@
-import { d as OVERLAY_LAYER_INDEX, q as gzip_1, r as record, a as cn, l as useCallbackRef$1, j as useComposedRefs, P as Primitive, h as Presence, n as Portal$1, g as composeEventHandlers, i as createContextScope, o as createSlot, D as DismissableLayer, C as Content, t as createPopperScope, e as useControllableState, v as Root2$1, f as useId, A as Anchor, w as Arrow, b as usePortalContainer, O as OVERLAY_LAYER, s as stopEscapePropagation, k as useLayoutEffect2, V as VISUALLY_HIDDEN_STYLES, c as createLucideIcon, x as clsx, S as Slot$2 } from "./createLucideIcon-C0Ldhp96.js";
+import { d as OVERLAY_LAYER_INDEX, q as gzip_1, r as record, a as cn, o as useCallbackRef$1, h as useComposedRefs, e as Primitive, P as Presence, i as Portal$1, f as composeEventHandlers, j as createContextScope, k as createSlot, D as DismissableLayer, C as Content, t as createPopperScope, l as useControllableState, v as Root2$1, m as useId, A as Anchor, w as Arrow, b as usePortalContainer, O as OVERLAY_LAYER, s as stopEscapePropagation, n as useLayoutEffect2, V as VISUALLY_HIDDEN_STYLES, c as createLucideIcon, x as clsx, S as Slot$2 } from "./createLucideIcon-BzRMP02h.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useState, createContext, useContext, useCallback, useRef, useLayoutEffect, useEffect, useMemo } from "react";
@@ -282,14 +282,63 @@ class ScreenRecordingController {
 }
 const SESSION_REPLAY_BLOCK_CLASS = "rr-block";
 const SESSION_REPLAY_MASK_CLASS = "rr-mask";
+const SESSION_REPLAY_UNMASK_CLASS = "rr-unmask";
 const FOREIGN_BLOCK_SELECTORS = [
+  // FullStory
   ".fs-exclude",
+  ".fs-block",
+  // Sentry — ignore 는 의미가 "입력 이벤트를 기록하지 않는다"라 차단과 어긋나지만,
+  // 빼면 이미 그것에 기대고 있는 고객에게 회귀다. 과잉 마스킹은 안전한 방향이라 둔다.
   ".sentry-block",
   ".sentry-ignore",
+  "[data-sentry-block]",
+  // PostHog
   ".ph-no-capture",
-  "[data-hj-suppress]"
+  // Hotjar
+  "[data-hj-suppress]",
+  // OpenReplay
+  "[data-openreplay-hidden]",
+  // Highlight.io
+  ".highlight-block",
+  ".highlight-ignore",
+  // Heap
+  "[data-heap-ignore]",
+  ".heap-ignore"
+];
+const FOREIGN_MASK_SELECTORS = [
+  // FullStory
+  ".fs-mask",
+  // Sentry
+  ".sentry-mask",
+  "[data-sentry-mask]",
+  // LogRocket
+  "[data-private]",
+  // Microsoft Clarity
+  "[data-clarity-mask]",
+  // Hotjar
+  "[data-hj-masked]",
+  // OpenReplay
+  "[data-openreplay-obscured]",
+  // Highlight.io
+  ".highlight-mask",
+  // ContentSquare
+  "[data-cs-mask]",
+  "[data-cs-encrypt]",
+  // Heap
+  "[data-heap-redact-text]",
+  "[data-heap-redact-attributes]",
+  // Amplitude
+  "[data-amp-mask]",
+  // Matomo
+  "[data-matomo-mask]"
+];
+const FOREIGN_UNMASK_SELECTORS = [
+  ".fs-unmask",
+  ".sentry-unmask",
+  "[data-clarity-unmask]",
+  "[data-amp-unmask]",
+  "[data-cs-capture]"
 ];
-const FOREIGN_MASK_SELECTORS = [".fs-mask", ".sentry-mask"];
 const SESSION_REPLAY_FULL_MASK_SELECTOR = [
   `.${SESSION_REPLAY_MASK_CLASS}`,
   ...FOREIGN_MASK_SELECTORS
@@ -298,11 +347,25 @@ const SESSION_REPLAY_BLOCK_SELECTOR = [
   `.${SESSION_REPLAY_BLOCK_CLASS}`,
   ...FOREIGN_BLOCK_SELECTORS
 ].join(",");
+const SESSION_REPLAY_UNMASK_SELECTOR = [
+  `.${SESSION_REPLAY_UNMASK_CLASS}`,
+  ...FOREIGN_UNMASK_SELECTORS
+].join(",");
+function isElementFullyMasked(element, maskSelector = SESSION_REPLAY_FULL_MASK_SELECTOR, unmaskSelector = SESSION_REPLAY_UNMASK_SELECTOR) {
+  if (!element) return false;
+  try {
+    const nearest = element.closest(`${maskSelector},${unmaskSelector}`);
+    return nearest !== null && nearest.matches(maskSelector);
+  } catch {
+    return true;
+  }
+}
 const DEFAULT_PRIVACY_CONFIG_V2 = {
   version: "v2",
   maskAllInputs: true,
   maskTextSelector: "*",
   fullMaskSelector: SESSION_REPLAY_FULL_MASK_SELECTOR,
+  unmaskSelector: SESSION_REPLAY_UNMASK_SELECTOR,
   blockSelector: SESSION_REPLAY_BLOCK_SELECTOR,
   allowCanvasRecording: false
 };
@@ -324,7 +387,8 @@ function appendEvent(segments, event, isCheckout) {
   }
   return copy;
 }
-function trimSegments(segments, windowMs, now) {
+function trimSegments(segments, windowMs, now, checkoutMs) {
+  var _a, _b;
   const cutoff = now - windowMs;
   let startIdx = 0;
   for (let i2 = 0; i2 < segments.length; i2 += 1) {
@@ -334,6 +398,10 @@ function trimSegments(segments, windowMs, now) {
       startIdx = i2;
     }
   }
+  const headStart = (_b = (_a = segments[startIdx]) == null ? void 0 : _a.events[0]) == null ? void 0 : _b.timestamp;
+  if (checkoutMs !== void 0 && headStart !== void 0 && headStart < cutoff - checkoutMs && startIdx < segments.length - 1) {
+    startIdx += 1;
+  }
   return segments.slice(startIdx);
 }
 function flattenEvents(segments) {
@@ -518,6 +586,12 @@ const RRN_CANDIDATE_PATTERN = /\b(\d{2})(\d{2})(\d{2})-?([1-8])(\d{6})\b/g;
 const BRN_CANDIDATE_PATTERN = /\b(\d{3})-?(\d{2})-?(\d{5})\b/g;
 const BRN_WEIGHTS = [1, 3, 7, 1, 3, 7, 1, 3, 5];
 const KR_MOBILE_PATTERN = /\b01[016789]-?\d{3,4}-?\d{4}\b/g;
+const EMAIL_PATTERN = /[A-Za-z0-9._%+-]+@[A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)+/g;
+function redactEmails(text) {
+  if (!text) return text;
+  const out = text.replace(EMAIL_PATTERN, REDACTED_BODY_VALUE);
+  return out === text ? text : out;
+}
 function passesBrnChecksum(digits) {
   let sum = 0;
   for (let i2 = 0; i2 < 9; i2 += 1) {
@@ -664,17 +738,17 @@ function redactReplayEvents(events) {
   }
   return events;
 }
-const RRWEB_VERSION = "2.0.0";
+const RRWEB_VERSION = "2.1.0";
 const SESSION_REPLAY_WINDOW_MS = 12e4;
 const SESSION_REPLAY_CHECKOUT_MS = 6e4;
 const REPLAY_MASK_VALUE = "[redacted]";
 function maskReplayInput(text) {
   return text ? REPLAY_MASK_VALUE : text;
 }
-function createMaskTextFn(fullMaskSelector) {
+function createMaskTextFn(fullMaskSelector, unmaskSelector) {
   return (text, element) => {
     try {
-      if (fullMaskSelector && (element == null ? void 0 : element.closest(fullMaskSelector))) {
+      if (fullMaskSelector && isElementFullyMasked(element, fullMaskSelector, unmaskSelector)) {
         return REPLAY_MASK_VALUE;
       }
       return redactSensitiveValues(text);
@@ -684,12 +758,21 @@ function createMaskTextFn(fullMaskSelector) {
   };
 }
 const IDLE_CHECKOUT_POLL_MS = 5e3;
+function spanSeconds(segments) {
+  var _a, _b;
+  const events = flattenEvents(segments);
+  const first = (_a = events[0]) == null ? void 0 : _a.timestamp;
+  const last = (_b = events[events.length - 1]) == null ? void 0 : _b.timestamp;
+  if (first === void 0 || last === void 0) return 0;
+  return Math.round((last - first) / 1e3);
+}
 class RingBufferRecorder {
   constructor(options = {}) {
     this.options = options;
     this.segments = createSegments();
     this.stopFn = null;
     this.idleCheckoutTimer = null;
+    this.visibilityListener = null;
     this.tailCutoff = null;
   }
   get windowMs() {
@@ -710,8 +793,13 @@ class RingBufferRecorder {
   /**
    * 유휴가 길어 경계가 없으면 FullSnapshot 을 강제로 찍는다.
    *
-   * 숨은 탭에서는 건너뛴다 — 보이지도 않는 페이지의 DOM 을 주기적으로 직렬화할 이유가 없고,
-   * 다시 보이게 되면 그때 다음 검사에서 찍힌다.
+   * 숨은 탭에서는 주기 검사를 건너뛴다 — 보이지도 않는 페이지의 DOM 을 주기적으로 직렬화할
+   * 이유가 없다. 대신 다시 보이는 순간 `visibilitychange` 로 여기를 한 번 더 부른다.
+   * 다음 폴링을 기다리면 그 사이에 스냅샷을 뜰 때 과길이 버퍼가 그대로 올라간다.
+   *
+   * rrweb 은 `recording` 이 false 면 던진다. 그 값은 모듈 전역이라 옛 recorder 의 stop 이
+   * 늦게 돌면 살아 있는 recorder 의 인터벌이 5초마다 던지게 된다. 고객 페이지에서 도는
+   * 코드라 밖으로 새면 안 된다.
    */
   forceCheckoutIfIdle() {
     var _a;
@@ -720,7 +808,10 @@ class RingBufferRecorder {
     if (start === null) return;
     if (this.nowFn() - start < this.checkoutEveryMs) return;
     const recordFn = this.options.recordFn ?? record;
-    (_a = recordFn.takeFullSnapshot) == null ? void 0 : _a.call(recordFn, true);
+    try {
+      (_a = recordFn.takeFullSnapshot) == null ? void 0 : _a.call(recordFn, true);
+    } catch {
+    }
   }
   start() {
     if (this.stopFn) return;
@@ -732,20 +823,24 @@ class RingBufferRecorder {
       emit: (event, isCheckout) => {
         var _a, _b;
         this.segments = appendEvent(this.segments, event, Boolean(isCheckout));
-        this.segments = trimSegments(this.segments, this.windowMs, now());
+        this.segments = trimSegments(this.segments, this.windowMs, now(), this.checkoutEveryMs);
         (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a);
       },
       checkoutEveryNms: this.options.checkoutEveryNms ?? SESSION_REPLAY_CHECKOUT_MS,
       maskAllInputs: cfg.maskAllInputs,
       blockSelector: cfg.blockSelector,
       maskTextSelector: cfg.maskTextSelector,
-      maskTextFn: createMaskTextFn(cfg.fullMaskSelector),
+      maskTextFn: createMaskTextFn(cfg.fullMaskSelector, cfg.unmaskSelector),
       maskInputFn: maskReplayInput,
       recordCanvas: cfg.allowCanvasRecording
       // rrweb 옵션 타입이 버전별로 달라 캐스팅한다.
     });
     this.stopFn = typeof stop === "function" ? stop : null;
     this.idleCheckoutTimer = setInterval(() => this.forceCheckoutIfIdle(), IDLE_CHECKOUT_POLL_MS);
+    if (typeof document !== "undefined") {
+      this.visibilityListener = () => this.forceCheckoutIfIdle();
+      document.addEventListener("visibilitychange", this.visibilityListener);
+    }
   }
   stop() {
     var _a;
@@ -755,6 +850,10 @@ class RingBufferRecorder {
       clearInterval(this.idleCheckoutTimer);
       this.idleCheckoutTimer = null;
     }
+    if (this.visibilityListener !== null) {
+      document.removeEventListener("visibilitychange", this.visibilityListener);
+      this.visibilityListener = null;
+    }
   }
   /**
    * 이슈 생성 단계의 시작을 표시한다. 이 시각 이후는 스냅샷에서 빠진다.
@@ -790,17 +889,30 @@ class RingBufferRecorder {
   restore(segments) {
     var _a, _b;
     if (segments.length === 0) return;
-    this.segments = trimSegments([...segments, ...this.segments], this.windowMs, this.nowFn());
+    this.segments = trimSegments(
+      [...segments, ...this.segments],
+      this.windowMs,
+      this.nowFn(),
+      this.checkoutEveryMs
+    );
     (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a);
   }
-  /** 현재 버퍼를 업로드 가능한 스냅샷으로 직렬화한다. */
+  /**
+   * 현재 버퍼를 업로드 가능한 스냅샷으로 직렬화한다.
+   *
+   * 여기서도 한 번 더 트림한다. emit 시점의 트림만으로는 마지막 이벤트 이후 흐른 시간이
+   * 무제한으로 실린다. 기준 시각은 꼬리 컷오프가 있으면 그 시점이다 — 폼을 채우는 동안
+   * 흐른 시간 때문에 버그 직전 구간이 밀려나면 안 된다.
+   */
   async snapshot() {
     const cfg = resolvePrivacyConfig(this.options.privacyConfig);
-    const segments = this.tailCutoff === null ? this.segments : dropEventsAfter(this.segments, this.tailCutoff);
+    const until = this.tailCutoff ?? this.nowFn();
+    const trimmed = trimSegments(this.segments, this.windowMs, until, this.checkoutEveryMs);
+    const segments = this.tailCutoff === null ? trimmed : dropEventsAfter(trimmed, this.tailCutoff);
     return serializeSnapshot({
       segments,
       redactEvents: redactReplayEvents,
-      windowSeconds: Math.round(this.windowMs / 1e3),
+      windowSeconds: spanSeconds(segments),
       rrwebVersion: RRWEB_VERSION,
       privacyConfigVersion: cfg.version
     });
@@ -1231,27 +1343,11 @@ function createReplaySession(options = {}) {
     }
   };
 }
-const STORAGE_KEY = "issue-sticker-session-replay-attach:v1";
-function getReplayAttachPreference() {
-  try {
-    const raw = window.localStorage.getItem(STORAGE_KEY);
-    if (raw === null) return true;
-    return raw !== "off";
-  } catch {
-    return true;
-  }
-}
-function setReplayAttachPreference(enabled) {
-  try {
-    window.localStorage.setItem(STORAGE_KEY, enabled ? "on" : "off");
-  } catch {
-  }
-}
 function createInitialSnapshot() {
   return {
     available: false,
     canAttach: false,
-    enabled: getReplayAttachPreference(),
+    enabled: true,
     error: null
   };
 }
@@ -1312,7 +1408,6 @@ class SessionReplayCaptureController {
     }
   }
   setEnabled(enabled) {
-    setReplayAttachPreference(enabled);
     this.setSnapshot({ enabled });
   }
   /** 이슈 폼이 열렸다. 이후 구간은 리플레이에서 빠진다. */
@@ -1350,10 +1445,189 @@ class SessionReplayCaptureController {
     this.listeners.forEach((listener) => listener(this.snapshot));
   }
 }
+function forEachElementDeep(root, callback) {
+  if (root instanceof Element) {
+    callback(root);
+    if (root.shadowRoot) {
+      forEachElementDeep(root.shadowRoot, callback);
+    }
+  }
+  Array.from(root.children).forEach((child) => {
+    forEachElementDeep(child, callback);
+  });
+}
+const SCREENSHOT_FULL_MASK_SELECTOR = SESSION_REPLAY_FULL_MASK_SELECTOR;
+const SCREENSHOT_BLOCK_SELECTOR = SESSION_REPLAY_BLOCK_SELECTOR;
+const SCREENSHOT_MASK_BACKGROUND = "rgba(148, 148, 148, 0.28)";
+const SCREENSHOT_BLOCK_BACKGROUND = "rgba(148, 148, 148, 0.85)";
+const MASK_LABEL_WIDTH = 44;
+const MASK_LABEL_HEIGHT = 16;
+const MASK_LABEL_IMAGE = `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+  `<svg xmlns="http://www.w3.org/2000/svg" width="${MASK_LABEL_WIDTH}" height="${MASK_LABEL_HEIGHT}" viewBox="0 0 ${MASK_LABEL_WIDTH} ${MASK_LABEL_HEIGHT}"><text x="${MASK_LABEL_WIDTH / 2}" y="12" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="600" fill="#262626">가려짐</text></svg>`
+)}")`;
+const MASK_LABEL_MIN_WIDTH = MASK_LABEL_WIDTH + 8;
+const MASK_LABEL_MIN_HEIGHT = MASK_LABEL_HEIGHT + 8;
+const TEXT_HIDING_PROPERTIES = [
+  ["color", "transparent"],
+  ["-webkit-text-fill-color", "transparent"],
+  ["text-shadow", "none"],
+  ["fill", "transparent"]
+];
+const REPLACED_MEDIA_SELECTOR = "img, svg, video, canvas, picture, iframe, object, embed";
+const VALUE_ELEMENT_SELECTOR = "input, textarea, select";
+const SENSITIVE_AUTOCOMPLETE_TOKENS = /* @__PURE__ */ new Set([
+  // 자격증명
+  "current-password",
+  "new-password",
+  "one-time-code",
+  // 결제
+  "cc-number",
+  "cc-exp",
+  "cc-exp-month",
+  "cc-exp-year",
+  "cc-csc",
+  "cc-name",
+  "cc-type",
+  "cc-given-name",
+  "cc-additional-name",
+  "cc-family-name",
+  // 신원
+  "name",
+  "given-name",
+  "additional-name",
+  "family-name",
+  "honorific-prefix",
+  "honorific-suffix",
+  "nickname",
+  "bday",
+  "bday-day",
+  "bday-month",
+  "bday-year",
+  "sex",
+  // 주소
+  "street-address",
+  "address-line1",
+  "address-line2",
+  "address-line3",
+  "postal-code",
+  // 연락처
+  "tel",
+  "tel-national",
+  "tel-local",
+  "tel-area-code",
+  "email",
+  "impp"
+]);
+function redactScreenshotText(text) {
+  return redactEmails(redactSensitiveValues(text));
+}
+function matchesSafely(element, selector) {
+  try {
+    return element.matches(selector);
+  } catch {
+    return false;
+  }
+}
+function closestSafely(element, selector) {
+  if (!element) return null;
+  try {
+    return element.closest(selector);
+  } catch {
+    return null;
+  }
+}
+function hasSensitiveValueHint(element) {
+  var _a;
+  if (((_a = element.getAttribute("type")) == null ? void 0 : _a.toLowerCase()) === "password") {
+    return true;
+  }
+  const autocomplete = element.getAttribute("autocomplete");
+  if (!autocomplete) return false;
+  return autocomplete.toLowerCase().split(/\s+/).some((token) => SENSITIVE_AUTOCOMPLETE_TOKENS.has(token));
+}
+const overwriteProperty = (element, name, value) => {
+  const style = element.style;
+  style == null ? void 0 : style.setProperty(name, value, "important");
+};
+function coverMaskedRegion(region, setProperty) {
+  setProperty(region, "background-color", SCREENSHOT_MASK_BACKGROUND);
+  forEachElementDeep(region, (node) => {
+    if (!isElementFullyMasked(node)) return;
+    TEXT_HIDING_PROPERTIES.forEach(([name, value]) => setProperty(node, name, value));
+    if (matchesSafely(node, REPLACED_MEDIA_SELECTOR)) {
+      setProperty(node, "visibility", "hidden");
+    }
+  });
+}
+function parsePixels(value) {
+  const parsed = Number.parseFloat(value ?? "");
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function fitsMaskLabel(region) {
+  const rect = region.getBoundingClientRect();
+  const style = region.style;
+  const width = rect.width || parsePixels(style == null ? void 0 : style.width);
+  const height = rect.height || parsePixels(style == null ? void 0 : style.height);
+  return width >= MASK_LABEL_MIN_WIDTH && height >= MASK_LABEL_MIN_HEIGHT;
+}
+function coverBlockedRegion(region, setProperty) {
+  const labeled = fitsMaskLabel(region);
+  setProperty(region, "visibility", "visible");
+  setProperty(region, "background-color", SCREENSHOT_BLOCK_BACKGROUND);
+  setProperty(region, "background-image", labeled ? MASK_LABEL_IMAGE : "none");
+  if (labeled) {
+    setProperty(region, "background-repeat", "no-repeat");
+    setProperty(region, "background-position", "center");
+    setProperty(region, "background-size", "auto");
+  }
+  TEXT_HIDING_PROPERTIES.forEach(([name, value]) => setProperty(region, name, value));
+  setProperty(region, "pointer-events", "none");
+  forEachElementDeep(region, (descendant) => {
+    if (descendant !== region) {
+      setProperty(descendant, "visibility", "hidden");
+    }
+  });
+}
+function coverPrivateRegions(root, setProperty) {
+  const blocked = [];
+  const masked = [];
+  forEachElementDeep(root, (element) => {
+    if (matchesSafely(element, SCREENSHOT_BLOCK_SELECTOR)) {
+      blocked.push(element);
+      return;
+    }
+    if (matchesSafely(element, SCREENSHOT_FULL_MASK_SELECTOR) && isElementFullyMasked(element)) {
+      masked.push(element);
+    }
+  });
+  masked.forEach((region) => coverMaskedRegion(region, setProperty));
+  blocked.forEach((region) => coverBlockedRegion(region, setProperty));
+}
+function applyScreenshotPrivacyMask(clonedRoot) {
+  coverPrivateRegions(clonedRoot, overwriteProperty);
+  const walker = clonedRoot.ownerDocument.createTreeWalker(clonedRoot, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const text = node.nodeValue;
+    if (!text) continue;
+    node.nodeValue = redactScreenshotText(text);
+  }
+  clonedRoot.querySelectorAll(VALUE_ELEMENT_SELECTOR).forEach((element) => {
+    const value = element.getAttribute("value");
+    if (!value) return;
+    const hidden = closestSafely(element, SCREENSHOT_BLOCK_SELECTOR) !== null || isElementFullyMasked(element) || hasSensitiveValueHint(element);
+    element.setAttribute("value", hidden ? "" : redactScreenshotText(value));
+  });
+}
 const SCREENSHOT_DATA_URL_QUALITY = 0.95;
-const CAPTURE_EXCLUDE_NODE_ID_ATTRIBUTE = "data-issue-sticker-capture-exclude-node-id";
-const MODERN_STICKY_NODE_ID_ATTRIBUTE = "data-issue-sticker-modern-sticky-node-id";
-const MODERN_SCROLL_ANCESTOR_ID_ATTRIBUTE = "data-issue-sticker-modern-scroll-ancestor-id";
+let nextCaptureRunId = 0;
+function createCaptureAttributeNames() {
+  const runId = ++nextCaptureRunId;
+  return {
+    excludeNodeId: `data-issue-sticker-capture-exclude-node-id-${runId}`,
+    stickyNodeId: `data-issue-sticker-modern-sticky-node-id-${runId}`,
+    scrollAncestorId: `data-issue-sticker-modern-scroll-ancestor-id-${runId}`
+  };
+}
 let modernScreenshotModule = null;
 function loadModernScreenshot() {
   if (!modernScreenshotModule) {
@@ -1378,17 +1652,6 @@ async function waitForDocumentFonts() {
   }
   await fontFaceSet.ready;
 }
-function forEachElementDeep(root, callback) {
-  if (root instanceof Element) {
-    callback(root);
-    if (root.shadowRoot) {
-      forEachElementDeep(root.shadowRoot, callback);
-    }
-  }
-  Array.from(root.children).forEach((child) => {
-    forEachElementDeep(child, callback);
-  });
-}
 function isScrollableOnAxis(element, axis) {
   const style = getComputedStyle(element);
   const overflowValue = axis === "y" ? style.overflowY || style.overflow : style.overflowX || style.overflow;
@@ -1412,28 +1675,27 @@ function parseStickyInset(value) {
   const parsed = Number.parseFloat(value);
   return Number.isFinite(parsed) ? parsed : null;
 }
-function createExcludeElementSnapshot(root, excludeSelectors) {
+function createExcludeElementSnapshot(root, excludeSelectors, attributeNames) {
   if (excludeSelectors.length === 0) {
     return {
       applyToClone: () => void 0,
       cleanup: () => void 0
     };
   }
+  const { excludeNodeId: excludeAttribute } = attributeNames;
   const markedElements = [];
   let nextCaptureId = 0;
   forEachElementDeep(root, (element) => {
     if (!excludeSelectors.some((selector) => element.matches(selector))) {
       return;
     }
-    const captureId = String(++nextCaptureId);
-    const previousValue = element.getAttribute(CAPTURE_EXCLUDE_NODE_ID_ATTRIBUTE);
-    element.setAttribute(CAPTURE_EXCLUDE_NODE_ID_ATTRIBUTE, captureId);
-    markedElements.push({ element, previousValue });
+    element.setAttribute(excludeAttribute, String(++nextCaptureId));
+    markedElements.push(element);
   });
   return {
     applyToClone(clonedRoot) {
       forEachElementDeep(clonedRoot, (element) => {
-        if (!element.hasAttribute(CAPTURE_EXCLUDE_NODE_ID_ATTRIBUTE)) {
+        if (!element.hasAttribute(excludeAttribute)) {
           return;
         }
         const styledElement = element;
@@ -1442,35 +1704,29 @@ function createExcludeElementSnapshot(root, excludeSelectors) {
           styledElement.style.setProperty("visibility", "hidden", "important");
           styledElement.style.setProperty("pointer-events", "none", "important");
         }
-        element.removeAttribute(CAPTURE_EXCLUDE_NODE_ID_ATTRIBUTE);
+        element.removeAttribute(excludeAttribute);
       });
     },
     cleanup() {
-      markedElements.forEach(({ element, previousValue }) => {
-        if (previousValue === null) {
-          element.removeAttribute(CAPTURE_EXCLUDE_NODE_ID_ATTRIBUTE);
-          return;
-        }
-        element.setAttribute(CAPTURE_EXCLUDE_NODE_ID_ATTRIBUTE, previousValue);
-      });
+      markedElements.forEach((element) => element.removeAttribute(excludeAttribute));
     }
   };
 }
-function createModernStickySnapshot(root) {
+function createModernStickySnapshot(root, attributeNames) {
+  const { stickyNodeId: stickyAttribute, scrollAncestorId: scrollAncestorAttribute } = attributeNames;
   const stickyOverlays = /* @__PURE__ */ new Map();
   const markedStickyElements = [];
   const markedScrollAncestors = [];
   let nextStickyId = 0;
   let nextScrollAncestorId = 0;
   function ensureScrollAncestorId(element) {
-    const existingId = element.getAttribute(MODERN_SCROLL_ANCESTOR_ID_ATTRIBUTE);
+    const existingId = element.getAttribute(scrollAncestorAttribute);
     if (existingId) {
       return existingId;
     }
     const ancestorId = `scroll-${++nextScrollAncestorId}`;
-    const previousValue = element.getAttribute(MODERN_SCROLL_ANCESTOR_ID_ATTRIBUTE);
-    element.setAttribute(MODERN_SCROLL_ANCESTOR_ID_ATTRIBUTE, ancestorId);
-    markedScrollAncestors.push({ element, previousValue });
+    element.setAttribute(scrollAncestorAttribute, ancestorId);
+    markedScrollAncestors.push(element);
     return ancestorId;
   }
   forEachElementDeep(root, (node) => {
@@ -1497,7 +1753,6 @@ function createModernStickySnapshot(root) {
       return;
     }
     const captureId = String(++nextStickyId);
-    const previousValue = node.getAttribute(MODERN_STICKY_NODE_ID_ATTRIBUTE);
     const ancestorId = ensureScrollAncestorId(scrollAncestor);
     stickyOverlays.set(captureId, {
       ancestorId,
@@ -1506,8 +1761,8 @@ function createModernStickySnapshot(root) {
       width: nodeRect.width,
       height: nodeRect.height
     });
-    node.setAttribute(MODERN_STICKY_NODE_ID_ATTRIBUTE, captureId);
-    markedStickyElements.push({ element: node, previousValue });
+    node.setAttribute(stickyAttribute, captureId);
+    markedStickyElements.push(node);
   });
   return {
     applyToClone(clonedRoot) {
@@ -1517,11 +1772,11 @@ function createModernStickySnapshot(root) {
         if (!(node instanceof HTMLElement)) {
           return;
         }
-        const captureId = node.getAttribute(MODERN_STICKY_NODE_ID_ATTRIBUTE);
+        const captureId = node.getAttribute(stickyAttribute);
         if (captureId) {
           stickyById.set(captureId, node);
         }
-        const scrollAncestorId = node.getAttribute(MODERN_SCROLL_ANCESTOR_ID_ATTRIBUTE);
+        const scrollAncestorId = node.getAttribute(scrollAncestorAttribute);
         if (scrollAncestorId) {
           scrollAncestorById.set(scrollAncestorId, node);
         }
@@ -1536,8 +1791,8 @@ function createModernStickySnapshot(root) {
         if (!(overlay instanceof HTMLElement)) {
           return;
         }
-        overlay.removeAttribute(MODERN_STICKY_NODE_ID_ATTRIBUTE);
-        overlay.removeAttribute(MODERN_SCROLL_ANCESTOR_ID_ATTRIBUTE);
+        overlay.removeAttribute(stickyAttribute);
+        overlay.removeAttribute(scrollAncestorAttribute);
         overlay.style.position = "absolute";
         overlay.style.top = `${top}px`;
         overlay.style.left = `${left}px`;
@@ -1563,36 +1818,34 @@ function createModernStickySnapshot(root) {
         if (!(node instanceof HTMLElement)) {
           return;
         }
-        node.removeAttribute(MODERN_STICKY_NODE_ID_ATTRIBUTE);
-        node.removeAttribute(MODERN_SCROLL_ANCESTOR_ID_ATTRIBUTE);
+        node.removeAttribute(stickyAttribute);
+        node.removeAttribute(scrollAncestorAttribute);
       });
     },
     cleanup() {
-      markedStickyElements.forEach(({ element, previousValue }) => {
-        if (previousValue === null) {
-          element.removeAttribute(MODERN_STICKY_NODE_ID_ATTRIBUTE);
-          return;
-        }
-        element.setAttribute(MODERN_STICKY_NODE_ID_ATTRIBUTE, previousValue);
-      });
-      markedScrollAncestors.forEach(({ element, previousValue }) => {
-        if (previousValue === null) {
-          element.removeAttribute(MODERN_SCROLL_ANCESTOR_ID_ATTRIBUTE);
-          return;
-        }
-        element.setAttribute(MODERN_SCROLL_ANCESTOR_ID_ATTRIBUTE, previousValue);
-      });
+      markedStickyElements.forEach((element) => element.removeAttribute(stickyAttribute));
+      markedScrollAncestors.forEach((element) => element.removeAttribute(scrollAncestorAttribute));
     }
   };
 }
+function blobToDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(reader.error ?? new Error("스크린샷을 dataUrl 로 변환하지 못했습니다."));
+    reader.readAsDataURL(blob);
+  });
+}
 async function captureWithModernScreenshot(options) {
-  const { domToWebp } = await loadModernScreenshot();
+  const { domToBlob } = await loadModernScreenshot();
   const { element, excludeSelectors = [], width, height, scale = getCaptureScale() } = options;
   await waitForDocumentFonts();
-  const stickySnapshot = createModernStickySnapshot(element);
-  const excludeSnapshot = createExcludeElementSnapshot(element, excludeSelectors);
+  const attributeNames = createCaptureAttributeNames();
+  const stickySnapshot = createModernStickySnapshot(element, attributeNames);
+  const excludeSnapshot = createExcludeElementSnapshot(element, excludeSelectors, attributeNames);
   try {
     const captureOptions = {
+      type: "image/webp",
       scale,
       quality: SCREENSHOT_DATA_URL_QUALITY,
       features: {
@@ -1604,6 +1857,7 @@ async function captureWithModernScreenshot(options) {
         }
         stickySnapshot.applyToClone(cloned);
         excludeSnapshot.applyToClone(cloned);
+        applyScreenshotPrivacyMask(cloned);
       }
     };
     if (width) {
@@ -1612,12 +1866,53 @@ async function captureWithModernScreenshot(options) {
     if (height) {
       captureOptions.height = height;
     }
-    return await domToWebp(element, captureOptions);
+    return await blobToDataUrl(await domToBlob(element, captureOptions));
   } finally {
     excludeSnapshot.cleanup();
     stickySnapshot.cleanup();
   }
 }
+const ISSUE_STICKER_INTERNAL_LOG_PREFIX = "__ISSUE_STICKER_INTERNAL_DEBUG__";
+function isInternalDebugLog$1(message2) {
+  return Boolean(message2 == null ? void 0 : message2.includes(ISSUE_STICKER_INTERNAL_LOG_PREFIX));
+}
+function isIssueStickerInternalConsoleLog$1(log) {
+  return isInternalDebugLog$1(log.message);
+}
+const __vite_import_meta_env__ = { "DEV": false };
+function isDevLoggingEnabled() {
+  const env = __vite_import_meta_env__;
+  {
+    return env.DEV;
+  }
+}
+function isInternalDebugLog(message2) {
+  return Boolean(message2 == null ? void 0 : message2.includes(ISSUE_STICKER_INTERNAL_LOG_PREFIX));
+}
+function write(method, scope, args) {
+  if (!isDevLoggingEnabled()) {
+    return;
+  }
+  const log = console[method];
+  log(ISSUE_STICKER_INTERNAL_LOG_PREFIX, `[${scope}]`, ...args);
+}
+const devLogger = {
+  log(scope, ...args) {
+    write("log", scope, args);
+  },
+  info(scope, ...args) {
+    write("info", scope, args);
+  },
+  warn(scope, ...args) {
+    write("warn", scope, args);
+  },
+  error(scope, ...args) {
+    write("error", scope, args);
+  },
+  debug(scope, ...args) {
+    write("debug", scope, args);
+  }
+};
 class DirectUploadError extends Error {
   constructor(message2, status, data) {
     super(message2);
@@ -3515,13 +3810,6 @@ async function uploadScreenshotDataUrls(screenshotDataUrls, uploadSignedMedia, i
   }
   throw new Error("스크린샷 업로드 응답에 URL이 없습니다.");
 }
-const ISSUE_STICKER_INTERNAL_LOG_PREFIX = "__ISSUE_STICKER_INTERNAL_DEBUG__";
-function isInternalDebugLog$1(message2) {
-  return Boolean(message2 == null ? void 0 : message2.includes(ISSUE_STICKER_INTERNAL_LOG_PREFIX));
-}
-function isIssueStickerInternalConsoleLog$1(log) {
-  return isInternalDebugLog$1(log.message);
-}
 function getCurrentPageUrl() {
   if (typeof window === "undefined") {
     return "";
@@ -13477,40 +13765,6 @@ function buildIssueIntegrationsPayload({
   }
   return payload.jira || payload.notion ? payload : void 0;
 }
-const __vite_import_meta_env__ = { "DEV": false };
-function isDevLoggingEnabled() {
-  const env = __vite_import_meta_env__;
-  {
-    return env.DEV;
-  }
-}
-function isInternalDebugLog(message2) {
-  return Boolean(message2 == null ? void 0 : message2.includes(ISSUE_STICKER_INTERNAL_LOG_PREFIX));
-}
-function write(method, scope, args) {
-  if (!isDevLoggingEnabled()) {
-    return;
-  }
-  const log = console[method];
-  log(ISSUE_STICKER_INTERNAL_LOG_PREFIX, `[${scope}]`, ...args);
-}
-const devLogger = {
-  log(scope, ...args) {
-    write("log", scope, args);
-  },
-  info(scope, ...args) {
-    write("info", scope, args);
-  },
-  warn(scope, ...args) {
-    write("warn", scope, args);
-  },
-  error(scope, ...args) {
-    write("error", scope, args);
-  },
-  debug(scope, ...args) {
-    write("debug", scope, args);
-  }
-};
 function buildGuestOwnerQuery(mode, externalUserId) {
   if (mode !== "public") return "";
   if (!externalUserId) return "";
@@ -13636,65 +13890,66 @@ function buildExternalUserPayload(user) {
   };
 }
 export {
-  DatePicker as $,
+  X as $,
   trimLogBackupPayload as A,
   createSafeLogBackup as B,
   ConsoleCollector as C,
   getLogBackupSessionId as D,
   createIndexedDbLogBackup as E,
   PopoverTrigger as F,
-  PopoverContent as G,
-  Select$1 as H,
-  Input as I,
-  SelectTrigger as J,
-  SelectValue as K,
+  Input as G,
+  PopoverContent as H,
+  ISSUE_STICKER_INTERNAL_LOG_PREFIX as I,
+  Select$1 as J,
+  SelectTrigger as K,
   Label as L,
-  SelectContent as M,
+  SelectValue as M,
   NetworkCollector as N,
-  SelectItem as O,
+  SelectContent as O,
   Popover as P,
-  getJiraMetadata as Q,
-  buildJiraIssueFields as R,
+  SelectItem as Q,
+  getJiraMetadata as R,
   ScreenRecordingController as S,
-  Button$1 as T,
-  Root2 as U,
-  Trigger as V,
-  ChevronDown as W,
-  Portal as X,
-  Content2 as Y,
-  Check as Z,
-  X as _,
+  buildJiraIssueFields as T,
+  Button$1 as U,
+  Root2 as V,
+  Trigger as W,
+  ChevronDown as X,
+  Portal as Y,
+  Content2 as Z,
+  Check as _,
   uploadSignedMediaWithApi as a,
-  getNotionPageMetadata as a0,
-  buildNotionFieldViews as a1,
-  DirectUploadError as a2,
-  getRegisteredUploadId as a3,
-  subscribe as a4,
+  DatePicker as a0,
+  getNotionPageMetadata as a1,
+  buildNotionFieldViews as a2,
+  DirectUploadError as a3,
+  toast as a4,
   getSnapshot as a5,
-  toast as a6,
-  ChevronRight as a7,
-  getExposedJiraFields as a8,
-  isJiraFieldExposed as a9,
-  getPrimaryJiraMapping as aa,
-  createCollection as ab,
-  useDirection as ac,
-  ReactRemoveScroll as ad,
-  hideOthers as ae,
-  useFocusGuards as af,
-  FocusScope as ag,
-  getPrimaryNotionMapping as ah,
-  buttonVariants as ai,
-  findElementBySelector as aj,
-  findElementByXPath as ak,
-  OnboardingProvider as al,
-  useOnboardingTarget as am,
-  useOnboardingFlow as an,
-  ISSUE_STICKER_HOST_ELEMENT_ID as ao,
-  getIssueStickerRuntimeOwner as ap,
-  ISSUE_STICKER_RUNTIME_OWNER as aq,
-  createRuntimeHostElement as ar,
-  attachHostTypingGuard as as,
-  ISSUE_STICKER_EXTENSION_RUNTIME_READY_EVENT as at,
+  subscribe as a6,
+  getRegisteredUploadId as a7,
+  ChevronRight as a8,
+  ReactRemoveScroll as a9,
+  hideOthers as aa,
+  useFocusGuards as ab,
+  FocusScope as ac,
+  getExposedJiraFields as ad,
+  isJiraFieldExposed as ae,
+  getPrimaryJiraMapping as af,
+  createCollection as ag,
+  useDirection as ah,
+  getPrimaryNotionMapping as ai,
+  buttonVariants as aj,
+  findElementBySelector as ak,
+  findElementByXPath as al,
+  OnboardingProvider as am,
+  useOnboardingTarget as an,
+  useOnboardingFlow as ao,
+  ISSUE_STICKER_HOST_ELEMENT_ID as ap,
+  getIssueStickerRuntimeOwner as aq,
+  ISSUE_STICKER_RUNTIME_OWNER as ar,
+  createRuntimeHostElement as as,
+  attachHostTypingGuard as at,
+  ISSUE_STICKER_EXTENSION_RUNTIME_READY_EVENT as au,
   normalizeJiraFieldId as b,
   captureWithModernScreenshot as c,
   directUploadToSignedUrl as d,