issue-sticker 0.8.0 → 0.9.0

package/dist/{externalUserPayload-k9LSBeMB.js → externalUserPayload-CVp5Hz2L.js}

@@ -1,4 +1,4 @@
-import { 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, d as OVERLAY_LAYER, s as stopEscapePropagation, n as useLayoutEffect2, V as VISUALLY_HIDDEN_STYLES, c as createLucideIcon, x as clsx, S as Slot$2, O as OVERLAY_LAYER_INDEX, M as MousePointer2 } from "./mouse-pointer-2-BR00y3ir.js";
+import { q as onThreeRendererRegistered, t as shouldOverlayCanvas, v as getThreeHandle, C as CANVAS_INTERACTION_TAG, w as rendersBlank, x as gzip_1, y as redactUrlSecrets, z as redactSensitiveValues, A as record, B as resolvePrivacyConfig, E as isElementFullyMasked, F as grabCanvasFrames, G as applyScreenshotPrivacyMask, H as overlayCanvasFrames, I as forEachElementDeep, J as redactSensitiveText, K as REDACTED_BODY_VALUE, L as isSensitiveFieldName, N as redactSensitiveHeaders, Q as redactSensitiveBody, 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, S as Content, T as createPopperScope, l as useControllableState, U as Root2$1, m as useId, V as Anchor, W as Arrow, b as usePortalContainer, d as OVERLAY_LAYER, s as stopEscapePropagation, n as useLayoutEffect2, X as VISUALLY_HIDDEN_STYLES, c as createLucideIcon, Y as clsx, Z as Slot$2, O as OVERLAY_LAYER_INDEX, M as MousePointer2 } from "./three-B7nbYqGK.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";
@@ -18,10 +18,12 @@ function getDefaultDisplayMedia() {
   if (typeof navigator === "undefined" || !((_a = navigator.mediaDevices) == null ? void 0 : _a.getDisplayMedia)) {
     throw new Error("Screen recording is not supported in this browser.");
   }
-  return navigator.mediaDevices.getDisplayMedia({
-    video: { frameRate: 30 },
-    audio: false
-  });
+  const options = {
+    video: { frameRate: 30, displaySurface: "browser" },
+    audio: false,
+    selfBrowserSurface: "include"
+  };
+  return navigator.mediaDevices.getDisplayMedia(options);
 }
 function createDefaultMediaRecorder(stream, options) {
   if (typeof MediaRecorder === "undefined") {
@@ -205,98 +207,361 @@ class ScreenRecordingController {
     this.listeners.forEach((listener) => listener(this.snapshot));
   }
 }
-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",
-  // 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 SESSION_REPLAY_FULL_MASK_SELECTOR = [
-  `.${SESSION_REPLAY_MASK_CLASS}`,
-  ...FOREIGN_MASK_SELECTORS
-].join(",");
-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;
+const SNAPSHOT_MAX_WIDTH = 640;
+const SNAPSHOT_QUALITY = 0.8;
+const SAMPLE_INTERVAL_MS = 250;
+const SAMPLED_MAX_WIDTH = 480;
+const SAMPLED_QUALITY = 0.6;
+const DRAG_THRESHOLD_PX = 6;
+const DISCRETE_MIN_GAP_MS = 60;
+const SETTLE_TAIL_MS = 300;
+function isThreeNamespace(value) {
+  const candidate = value;
+  return typeof (candidate == null ? void 0 : candidate.Raycaster) === "function" && typeof (candidate == null ? void 0 : candidate.Vector2) === "function";
+}
+function isHelper(object) {
+  let current = object;
+  while (current) {
+    if (typeof current.type === "string" && current.type.endsWith("Helper")) {
+      return true;
+    }
+    current = current.parent;
+  }
+  return false;
+}
+function nameOf(object) {
+  let current = object;
+  while (current) {
+    if (current.name) {
+      return current.name;
+    }
+    current = current.parent;
+  }
+  return (object == null ? void 0 : object.type) ?? null;
+}
+function pickTarget(handle, pointer) {
+  var _a;
+  const three = handle.three;
+  if (!isThreeNamespace(three)) {
+    return null;
+  }
+  const children = (_a = handle.scene) == null ? void 0 : _a.children;
+  if (!Array.isArray(children)) {
+    return null;
+  }
   try {
-    const nearest = element.closest(`${maskSelector},${unmaskSelector}`);
-    return nearest !== null && nearest.matches(maskSelector);
+    const raycaster = new three.Raycaster();
+    raycaster.setFromCamera(new three.Vector2(pointer[0], pointer[1]), handle.camera);
+    const hits = raycaster.intersectObjects(children, true);
+    const hit = hits.find(
+      (candidate) => {
+        var _a2, _b;
+        return ((_a2 = candidate.object) == null ? void 0 : _a2.isMesh) === true && ((_b = candidate.object) == null ? void 0 : _b.visible) !== false && !isHelper(candidate.object);
+      }
+    );
+    return hit ? nameOf(hit.object) : null;
   } catch {
-    return true;
+    return null;
   }
 }
-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
-};
-function resolvePrivacyConfig(override) {
-  if (!override) return DEFAULT_PRIVACY_CONFIG_V2;
-  return { ...DEFAULT_PRIVACY_CONFIG_V2, ...override };
+function cameraMatrixOf(handle) {
+  var _a, _b;
+  const matrix = (_a = handle.camera) == null ? void 0 : _a.matrixWorld;
+  try {
+    const values = (_b = matrix == null ? void 0 : matrix.toArray) == null ? void 0 : _b.call(matrix);
+    return Array.isArray(values) ? values : null;
+  } catch {
+    return null;
+  }
+}
+const FINGERPRINT_WIDTH = 32;
+const FINGERPRINT_HEIGHT = 18;
+async function captureSnapshot(canvas, handle, maxWidth, quality) {
+  try {
+    if (handle) {
+      handle.renderer.render(handle.scene, handle.camera);
+    } else if (rendersBlank(canvas)) {
+      return null;
+    }
+    const bitmap = await createImageBitmap(canvas);
+    try {
+      const scale = Math.min(1, maxWidth / bitmap.width);
+      const output = document.createElement("canvas");
+      output.width = Math.max(1, Math.round(bitmap.width * scale));
+      output.height = Math.max(1, Math.round(bitmap.height * scale));
+      const context = output.getContext("2d");
+      if (!context) {
+        return null;
+      }
+      context.drawImage(bitmap, 0, 0, output.width, output.height);
+      const thumb = document.createElement("canvas");
+      thumb.width = FINGERPRINT_WIDTH;
+      thumb.height = FINGERPRINT_HEIGHT;
+      const thumbContext = thumb.getContext("2d");
+      thumbContext == null ? void 0 : thumbContext.drawImage(bitmap, 0, 0, FINGERPRINT_WIDTH, FINGERPRINT_HEIGHT);
+      const fingerprint = thumbContext ? Array.from(
+        thumbContext.getImageData(0, 0, FINGERPRINT_WIDTH, FINGERPRINT_HEIGHT).data
+      ).join(",") : "";
+      return { dataUrl: output.toDataURL("image/webp", quality), fingerprint };
+    } finally {
+      bitmap.close();
+    }
+  } catch {
+    return null;
+  }
+}
+const FRAME_WAIT_MS = 120;
+function settleFrame() {
+  return new Promise((resolve) => {
+    let done = false;
+    const finish = () => {
+      if (!done) {
+        done = true;
+        resolve();
+      }
+    };
+    requestAnimationFrame(finish);
+    setTimeout(finish, FRAME_WAIT_MS);
+  });
+}
+async function resolveNodeId(canvas) {
+  var _a;
+  try {
+    const { record: record2 } = await import("./three-B7nbYqGK.js").then((n) => n.a0);
+    const id = (_a = record2.mirror) == null ? void 0 : _a.getId(canvas);
+    return typeof id === "number" && id > 0 ? id : null;
+  } catch {
+    return null;
+  }
+}
+function canvasIndexOf(canvas) {
+  return Array.prototype.indexOf.call(document.querySelectorAll("canvas"), canvas);
+}
+function startCanvasInteractionTracking(options = {}) {
+  if (typeof document === "undefined") {
+    return Object.assign(() => void 0, { captureBaseline: () => void 0 });
+  }
+  const snapshotMaxWidth = options.snapshotMaxWidth ?? SNAPSHOT_MAX_WIDTH;
+  const sampleIntervalMs = options.sampleIntervalMs ?? SAMPLE_INTERVAL_MS;
+  const lastSnapshot = /* @__PURE__ */ new WeakMap();
+  let pending = null;
+  const emit2 = options.emit ?? ((tag, payload) => {
+    void import("./three-B7nbYqGK.js").then((n) => n.a0).then(({ addCustomEvent }) => addCustomEvent(tag, payload));
+  });
+  const pointerOf = (started, rect) => [
+    (started.x - rect.left) / rect.width * 2 - 1,
+    -((started.y - rect.top) / rect.height) * 2 + 1
+  ];
+  const trackedCanvases = () => Array.from(document.querySelectorAll("canvas")).filter((canvas) => {
+    const rect = canvas.getBoundingClientRect();
+    return rect.width >= 1 && rect.height >= 1 && shouldOverlayCanvas(canvas, []);
+  });
+  const emitShot = async (canvas, shot) => {
+    const handle = getThreeHandle(canvas);
+    const snapshot = await captureSnapshot(
+      canvas,
+      handle,
+      shot.detail ? snapshotMaxWidth : SAMPLED_MAX_WIDTH,
+      shot.detail ? SNAPSHOT_QUALITY : SAMPLED_QUALITY
+    );
+    if (snapshot && shot.sampled && !shot.baseline && lastSnapshot.get(canvas) === snapshot.fingerprint) {
+      return;
+    }
+    if (snapshot) {
+      lastSnapshot.set(canvas, snapshot.fingerprint);
+    }
+    const cameraMatrix = handle ? cameraMatrixOf(handle) : null;
+    if (!snapshot && !shot.target && !cameraMatrix) {
+      return;
+    }
+    const payload = {
+      kind: shot.kind,
+      target: shot.target,
+      nodeId: await resolveNodeId(canvas),
+      canvasIndex: canvasIndexOf(canvas),
+      pointer: shot.pointer,
+      cameraStartMatrix: shot.cameraStartMatrix,
+      cameraMatrix,
+      snapshot: (snapshot == null ? void 0 : snapshot.dataUrl) ?? null,
+      ...shot.sampled ? { sampled: true } : {},
+      ...shot.baseline ? { baseline: true } : {}
+    };
+    try {
+      emit2(CANVAS_INTERACTION_TAG, payload);
+    } catch {
+    }
+  };
+  const sweep = async (shot) => {
+    for (const canvas of trackedCanvases()) {
+      await emitShot(canvas, {
+        kind: "external",
+        target: null,
+        pointer: null,
+        cameraStartMatrix: null,
+        ...shot
+      });
+    }
+  };
+  let sweeping = false;
+  let pendingSweep = null;
+  const runSweep = async (shot) => {
+    if (sweeping) {
+      pendingSweep = shot;
+      return;
+    }
+    sweeping = true;
+    try {
+      await sweep(shot);
+      while (pendingSweep) {
+        const next = pendingSweep;
+        pendingSweep = null;
+        await sweep(next);
+      }
+    } finally {
+      sweeping = false;
+    }
+  };
+  let sampleTimer = null;
+  let tailTimer = null;
+  let lastDiscreteAt = 0;
+  const clearTimers = () => {
+    if (sampleTimer !== null) {
+      window.clearInterval(sampleTimer);
+      sampleTimer = null;
+    }
+    if (tailTimer !== null) {
+      window.clearTimeout(tailTimer);
+      tailTimer = null;
+    }
+  };
+  const markChanged = () => {
+    if (sampleTimer === null && sampleIntervalMs > 0) {
+      sampleTimer = window.setInterval(() => {
+        void runSweep({ sampled: true, detail: false });
+      }, sampleIntervalMs);
+    }
+    if (tailTimer !== null) {
+      window.clearTimeout(tailTimer);
+    }
+    tailTimer = window.setTimeout(() => {
+      tailTimer = null;
+      if (sampleTimer !== null) {
+        window.clearInterval(sampleTimer);
+        sampleTimer = null;
+      }
+      void (async () => {
+        await settleFrame();
+        await runSweep({ sampled: true, detail: true });
+      })();
+    }, SETTLE_TAIL_MS);
+  };
+  const onPointerDown = (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLCanvasElement) || !shouldOverlayCanvas(target, [])) {
+      return;
+    }
+    const handle = getThreeHandle(target);
+    pending = {
+      canvas: target,
+      x: event.clientX,
+      y: event.clientY,
+      cameraStartMatrix: handle ? cameraMatrixOf(handle) : null
+    };
+  };
+  const onPointerMove = (event) => {
+    const started = pending;
+    if (!started) {
+      return;
+    }
+    if (Math.hypot(event.clientX - started.x, event.clientY - started.y) <= DRAG_THRESHOLD_PX) {
+      return;
+    }
+    markChanged();
+  };
+  const captureDiscrete = () => {
+    const now = Date.now();
+    if (now - lastDiscreteAt >= DISCRETE_MIN_GAP_MS) {
+      lastDiscreteAt = now;
+      void (async () => {
+        await settleFrame();
+        await runSweep({ sampled: true, detail: false });
+      })();
+    }
+    markChanged();
+  };
+  const onContinuousInput = () => {
+    markChanged();
+  };
+  const onPointerUp = (event) => {
+    const started = pending;
+    pending = null;
+    if (!started) {
+      captureDiscrete();
+      return;
+    }
+    clearTimers();
+    const handle = getThreeHandle(started.canvas);
+    const rect = started.canvas.getBoundingClientRect();
+    if (rect.width < 1 || rect.height < 1) {
+      return;
+    }
+    const moved = Math.hypot(event.clientX - started.x, event.clientY - started.y);
+    const kind = moved > DRAG_THRESHOLD_PX ? "drag" : "click";
+    const target = handle ? pickTarget(handle, pointerOf(started, rect)) : null;
+    void (async () => {
+      await settleFrame();
+      await emitShot(started.canvas, {
+        kind,
+        target,
+        pointer: pointerOf(started, rect),
+        cameraStartMatrix: started.cameraStartMatrix,
+        sampled: false,
+        detail: true
+      });
+    })();
+    markChanged();
+  };
+  const captureBaseline = () => {
+    void (async () => {
+      await settleFrame();
+      await runSweep({ sampled: true, detail: true, baseline: true });
+    })();
+  };
+  document.addEventListener("pointerdown", onPointerDown, true);
+  document.addEventListener("pointermove", onPointerMove, true);
+  document.addEventListener("pointerup", onPointerUp, true);
+  document.addEventListener("pointercancel", onPointerUp, true);
+  document.addEventListener("input", onContinuousInput, true);
+  document.addEventListener("keydown", onContinuousInput, true);
+  document.addEventListener("change", captureDiscrete, true);
+  const unsubscribeRegistration = onThreeRendererRegistered((canvas) => {
+    void (async () => {
+      await settleFrame();
+      await emitShot(canvas, {
+        kind: "external",
+        target: null,
+        pointer: null,
+        cameraStartMatrix: null,
+        sampled: true,
+        detail: true,
+        baseline: true
+      });
+    })();
+  });
+  const stop = () => {
+    clearTimers();
+    unsubscribeRegistration();
+    document.removeEventListener("pointerdown", onPointerDown, true);
+    document.removeEventListener("pointermove", onPointerMove, true);
+    document.removeEventListener("pointerup", onPointerUp, true);
+    document.removeEventListener("pointercancel", onPointerUp, true);
+    document.removeEventListener("input", onContinuousInput, true);
+    document.removeEventListener("keydown", onContinuousInput, true);
+    document.removeEventListener("change", captureDiscrete, true);
+    pending = null;
+  };
+  captureBaseline();
+  return Object.assign(stop, { captureBaseline });
 }
 function createSegments() {
   return [{ events: [] }];
@@ -329,264 +594,49 @@ function trimSegments(segments, windowMs, now, checkoutMs) {
   }
   return segments.slice(startIdx);
 }
+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);
+}
 function flattenEvents(segments) {
   return segments.flatMap((s2) => s2.events);
 }
 function dropEventsAfter(segments, cutoff) {
   return segments.map((s2) => ({ events: s2.events.filter((e2) => e2.timestamp <= cutoff) })).filter((s2) => s2.events.length > 0);
 }
-async function sha256Hex(bytes) {
+const REPLAY_SNAPSHOT_MAX_BYTES = 16 * 1024 * 1024;
+async function sha256Hex$1(bytes) {
   const digest = await crypto.subtle.digest("SHA-256", bytes.buffer);
   return Array.from(new Uint8Array(digest)).map((b) => b.toString(16).padStart(2, "0")).join("");
 }
 async function serializeSnapshot(input) {
-  const events = (input.redactEvents ?? ((e2) => e2))(flattenEvents(input.segments));
-  const json = JSON.stringify(events);
-  const payload = gzip_1(json);
-  const checksumSha256 = await sha256Hex(payload);
+  const redact = input.redactEvents ?? ((e2) => e2);
+  const maxBytes = input.maxBytes ?? REPLAY_SNAPSHOT_MAX_BYTES;
+  const compress2 = (segments2) => {
+    const events2 = redact(flattenEvents(segments2));
+    return { events: events2, payload: gzip_1(JSON.stringify(events2)) };
+  };
+  let segments = input.segments;
+  let { events, payload } = compress2(segments);
+  while (payload.byteLength > maxBytes && segments.length > 1) {
+    segments = segments.slice(1);
+    ({ events, payload } = compress2(segments));
+  }
+  const checksumSha256 = await sha256Hex$1(payload);
   return {
     payload,
     checksumSha256,
-    windowSeconds: input.windowSeconds,
+    windowSeconds: spanSeconds(segments),
     eventCount: events.length,
     sizeBytes: payload.byteLength,
     rrwebVersion: input.rrwebVersion,
     privacyConfigVersion: input.privacyConfigVersion
   };
 }
-const REDACTED_HEADER_VALUE = "[redacted]";
-const SENSITIVE_HEADER_NAMES = /* @__PURE__ */ new Set([
-  "authorization",
-  "proxy-authorization",
-  "cookie",
-  "set-cookie",
-  "x-api-key",
-  "api-key",
-  "apikey",
-  "x-auth-token",
-  "x-access-token",
-  "x-refresh-token",
-  "x-session-token",
-  "x-csrf-token",
-  "x-xsrf-token",
-  "x-amz-security-token",
-  "x-goog-api-key"
-]);
-function isSensitiveHeaderName(headerName) {
-  return SENSITIVE_HEADER_NAMES.has(headerName.toLowerCase());
-}
-function redactSensitiveHeaders(headers) {
-  if (!headers) return headers;
-  let changed = false;
-  const redacted = {};
-  for (const [name, value] of Object.entries(headers)) {
-    if (value && isSensitiveHeaderName(name)) {
-      redacted[name] = REDACTED_HEADER_VALUE;
-      changed = true;
-    } else {
-      redacted[name] = value;
-    }
-  }
-  return changed ? redacted : headers;
-}
-const REDACTED_BODY_VALUE = "[redacted]";
-const SENSITIVE_KEY_MARKERS = [
-  "password",
-  "passwd",
-  "pwd",
-  "secret",
-  "token",
-  "apikey",
-  "privatekey",
-  "credential",
-  // 결제·본인확인 계열. 토스페이먼츠 공식 문서의 필드명을 그대로 딴다.
-  // cardNumber / customerIdentityNumber / businessNumber / accountNumber(가상계좌)
-  "cardnumber",
-  "identitynumber",
-  "businessnumber",
-  "registrationnumber",
-  "accountnumber"
-];
-const SENSITIVE_KEY_EXACT = /* @__PURE__ */ new Set([
-  "otp",
-  "auth",
-  "authorization",
-  "bearer",
-  // 토스페이먼츠. billingKey + customerKey 조합이면 결제를 낼 수 있고, authKey 는 일회성
-  // 인증 키다(우리 admin 결제 성공 URL 의 쿼리 파라미터로 실제로 실린다).
-  // paymentKey 는 넣지 않는다 — 시크릿 키 없이는 아무것도 못 하는 식별자이고, 결제 장애
-  // 진단의 출발점이라 가리면 로그가 쓸모를 잃는다.
-  "billingkey",
-  "customerkey",
-  "authkey"
-]);
-const MAX_WALK_DEPTH = 20;
-function isSensitiveFieldName(name) {
-  const normalized = name.toLowerCase().replace(/[-_\s]/g, "");
-  if (SENSITIVE_KEY_EXACT.has(normalized)) {
-    return true;
-  }
-  return SENSITIVE_KEY_MARKERS.some((marker) => normalized.includes(marker));
-}
-function redactJsonValue(value, depth) {
-  if (typeof value === "string") {
-    const redacted = redactSensitiveValues(value);
-    return { value: redacted, changed: redacted !== value };
-  }
-  if (depth > MAX_WALK_DEPTH || value === null || typeof value !== "object") {
-    return { value, changed: false };
-  }
-  if (Array.isArray(value)) {
-    let changed2 = false;
-    const next2 = value.map((item) => {
-      const result = redactJsonValue(item, depth + 1);
-      changed2 || (changed2 = result.changed);
-      return result.value;
-    });
-    return changed2 ? { value: next2, changed: changed2 } : { value, changed: changed2 };
-  }
-  let changed = false;
-  const next = {};
-  for (const [key, item] of Object.entries(value)) {
-    if (item !== "" && item != null && typeof item !== "boolean" && isSensitiveFieldName(key)) {
-      next[key] = REDACTED_BODY_VALUE;
-      changed = true;
-      continue;
-    }
-    const result = redactJsonValue(item, depth + 1);
-    changed || (changed = result.changed);
-    next[key] = result.value;
-  }
-  return changed ? { value: next, changed } : { value, changed };
-}
-function redactKeyValuePairs(body) {
-  let changed = false;
-  const redacted = body.split("&").map((pair) => {
-    const separator = pair.indexOf("=");
-    if (separator <= 0) {
-      return pair;
-    }
-    const rawKey = pair.slice(0, separator);
-    const rawValue = pair.slice(separator + 1);
-    if (!rawValue) {
-      return pair;
-    }
-    if (isSensitiveFieldName(decodeURIComponent(rawKey))) {
-      changed = true;
-      return `${rawKey}=${encodeURIComponent(REDACTED_BODY_VALUE)}`;
-    }
-    const redactedValue = redactSensitiveValues(decodeURIComponent(rawValue));
-    if (redactedValue === decodeURIComponent(rawValue)) {
-      return pair;
-    }
-    changed = true;
-    return `${rawKey}=${encodeURIComponent(redactedValue)}`;
-  }).join("&");
-  return changed ? redacted : body;
-}
-function looksLikeFormUrlEncoded(body) {
-  return /^[^=&\s]+=[^&]*(&[^=&\s]+=[^&]*)*$/.test(body);
-}
-function redactSensitiveBody(body) {
-  if (!body) return body;
-  const trimmed = body.trim();
-  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
-    try {
-      const parsed = JSON.parse(trimmed);
-      const { value, changed } = redactJsonValue(parsed, 0);
-      return changed ? JSON.stringify(value) : body;
-    } catch {
-    }
-  }
-  if (looksLikeFormUrlEncoded(trimmed)) {
-    const redacted = redactKeyValuePairs(trimmed);
-    return redacted === trimmed ? body : redacted;
-  }
-  return body;
-}
-const JWT_PATTERN = /eyJ[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{4,}\.[A-Za-z0-9_-]*/g;
-const BEARER_PATTERN = /(Bearer\s+)[A-Za-z0-9._~+/-]{12,}=*/gi;
-const CARD_CANDIDATE_PATTERN = /\b[2-6](?:[ -]?\d){13,18}\b/g;
-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) {
-    sum += (digits.charCodeAt(i2) - 48) * BRN_WEIGHTS[i2];
-  }
-  sum += Math.floor((digits.charCodeAt(8) - 48) * 5 / 10);
-  return (10 - sum % 10) % 10 === digits.charCodeAt(9) - 48;
-}
-function passesLuhn(digits) {
-  let sum = 0;
-  let double = false;
-  for (let i2 = digits.length - 1; i2 >= 0; i2 -= 1) {
-    let digit = digits.charCodeAt(i2) - 48;
-    if (double) {
-      digit *= 2;
-      if (digit > 9) digit -= 9;
-    }
-    sum += digit;
-    double = !double;
-  }
-  return sum % 10 === 0;
-}
-function looksLikeBirthDate(month, day) {
-  const monthValue = Number(month);
-  const dayValue = Number(day);
-  return monthValue >= 1 && monthValue <= 12 && dayValue >= 1 && dayValue <= 31;
-}
-function redactSensitiveValues(text) {
-  if (!text) return text;
-  let out = text;
-  out = out.replace(JWT_PATTERN, REDACTED_BODY_VALUE);
-  out = out.replace(BEARER_PATTERN, `$1${REDACTED_BODY_VALUE}`);
-  out = out.replace(CARD_CANDIDATE_PATTERN, (match2) => {
-    const digits = match2.replace(/[ -]/g, "");
-    return digits.length >= 14 && digits.length <= 19 && passesLuhn(digits) ? REDACTED_BODY_VALUE : match2;
-  });
-  out = out.replace(
-    RRN_CANDIDATE_PATTERN,
-    (match2, _year, month, day) => looksLikeBirthDate(month, day) ? REDACTED_BODY_VALUE : match2
-  );
-  out = out.replace(BRN_CANDIDATE_PATTERN, (match2) => {
-    const digits = match2.replace(/-/g, "");
-    return passesBrnChecksum(digits) ? REDACTED_BODY_VALUE : match2;
-  });
-  out = out.replace(KR_MOBILE_PATTERN, REDACTED_BODY_VALUE);
-  return out === text ? text : out;
-}
-function redactUrlSecrets(url) {
-  if (!url) return url;
-  const queryStart = url.indexOf("?");
-  const fragmentStart = url.indexOf("#");
-  if (queryStart < 0 && fragmentStart < 0) {
-    return redactSensitiveValues(url);
-  }
-  const hasQuery = queryStart >= 0 && (fragmentStart < 0 || queryStart < fragmentStart);
-  const base = url.slice(0, hasQuery ? queryStart : fragmentStart);
-  const query = hasQuery ? url.slice(queryStart + 1, fragmentStart >= 0 ? fragmentStart : void 0) : "";
-  const fragment = fragmentStart >= 0 ? url.slice(fragmentStart + 1) : "";
-  const redactedQuery = redactKeyValuePairs(query);
-  const redactedFragment = fragment.includes("=") ? redactKeyValuePairs(fragment) : fragment;
-  const redactedBase = redactSensitiveValues(base);
-  if (redactedBase === base && redactedQuery === query && redactedFragment === fragment) {
-    return url;
-  }
-  return redactedBase + (hasQuery ? `?${redactedQuery}` : "") + (fragmentStart >= 0 ? `#${redactedFragment}` : "");
-}
-function redactSensitiveText(text) {
-  if (!text) return text;
-  return redactSensitiveValues(redactUrlSecrets(redactSensitiveBody(text)));
-}
 const META_EVENT_TYPE = 4;
 const FULL_SNAPSHOT_EVENT_TYPE = 2;
 const INCREMENTAL_SNAPSHOT_EVENT_TYPE = 3;
@@ -667,7 +717,13 @@ 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) {
+const UNMASKED_INPUT_TYPES = /* @__PURE__ */ new Set(["range", "color", "checkbox", "radio"]);
+function maskReplayInput(text, element) {
+  var _a;
+  const type = (_a = element == null ? void 0 : element.type) == null ? void 0 : _a.toLowerCase();
+  if (type && UNMASKED_INPUT_TYPES.has(type)) {
+    return text;
+  }
   return text ? REPLAY_MASK_VALUE : text;
 }
 function createMaskTextFn(fullMaskSelector, unmaskSelector) {
@@ -683,19 +739,12 @@ function createMaskTextFn(fullMaskSelector, unmaskSelector) {
   };
 }
 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.stopCanvasTracking = null;
     this.idleCheckoutTimer = null;
     this.visibilityListener = null;
     this.tailCutoff = null;
@@ -746,10 +795,13 @@ class RingBufferRecorder {
     this.segments = createSegments();
     const stop = recordFn({
       emit: (event, isCheckout) => {
-        var _a, _b;
+        var _a, _b, _c;
         this.segments = appendEvent(this.segments, event, Boolean(isCheckout));
         this.segments = trimSegments(this.segments, this.windowMs, now(), this.checkoutEveryMs);
-        (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a);
+        if (isCheckout) {
+          (_a = this.stopCanvasTracking) == null ? void 0 : _a.captureBaseline();
+        }
+        (_c = (_b = this.options).onChange) == null ? void 0 : _c.call(_b);
       },
       checkoutEveryNms: this.options.checkoutEveryNms ?? SESSION_REPLAY_CHECKOUT_MS,
       maskAllInputs: cfg.maskAllInputs,
@@ -761,6 +813,9 @@ class RingBufferRecorder {
       // rrweb 옵션 타입이 버전별로 달라 캐스팅한다.
     });
     this.stopFn = typeof stop === "function" ? stop : null;
+    if (this.options.trackCanvasInteractions !== false) {
+      this.stopCanvasTracking = startCanvasInteractionTracking();
+    }
     this.idleCheckoutTimer = setInterval(() => this.forceCheckoutIfIdle(), IDLE_CHECKOUT_POLL_MS);
     if (typeof document !== "undefined") {
       this.visibilityListener = () => this.forceCheckoutIfIdle();
@@ -768,9 +823,11 @@ class RingBufferRecorder {
     }
   }
   stop() {
-    var _a;
+    var _a, _b;
     (_a = this.stopFn) == null ? void 0 : _a.call(this);
     this.stopFn = null;
+    (_b = this.stopCanvasTracking) == null ? void 0 : _b.call(this);
+    this.stopCanvasTracking = null;
     if (this.idleCheckoutTimer !== null) {
       clearInterval(this.idleCheckoutTimer);
       this.idleCheckoutTimer = null;
@@ -837,7 +894,6 @@ class RingBufferRecorder {
     return serializeSnapshot({
       segments,
       redactEvents: redactReplayEvents,
-      windowSeconds: spanSeconds(segments),
       rrwebVersion: RRWEB_VERSION,
       privacyConfigVersion: cfg.version
     });
@@ -870,17 +926,31 @@ function withoutBody(log) {
   }
   return stripped;
 }
+function withoutFrameData(connection) {
+  if (connection.frames.length === 0) return connection;
+  return {
+    ...connection,
+    frames: connection.frames.map((frame) => {
+      if (frame.data === void 0) return frame;
+      const stripped = { ...frame };
+      delete stripped.data;
+      return stripped;
+    })
+  };
+}
 function trimLogBackupPayload(payload, budgetBytes = LOG_BACKUP_BUDGET_BYTES) {
+  var _a;
   if (payloadSizeBytes(payload) <= budgetBytes) return payload;
   let trimmed = {
     network: payload.network.map(withoutBody),
-    console: payload.console
+    console: payload.console,
+    socket: (_a = payload.socket) == null ? void 0 : _a.map(withoutFrameData)
   };
   while (payloadSizeBytes(trimmed) > budgetBytes && trimmed.network.length > 0) {
-    trimmed = { network: trimmed.network.slice(1), console: trimmed.console };
+    trimmed = { ...trimmed, network: trimmed.network.slice(1) };
   }
   while (payloadSizeBytes(trimmed) > budgetBytes && trimmed.console.length > 0) {
-    trimmed = { network: trimmed.network, console: trimmed.console.slice(1) };
+    trimmed = { ...trimmed, console: trimmed.console.slice(1) };
   }
   return trimmed;
 }
@@ -1029,13 +1099,29 @@ const DB_NAME = "issue-sticker-replay";
 const DB_VERSION = 1;
 const STORE_NAME = "segments";
 const REPLAY_BACKUP_TTL_MS = 24 * 60 * 60 * 1e3;
-const REPLAY_BACKUP_EVENT_BUDGET = 12e3;
-function countEvents(segments) {
-  return segments.reduce((total, segment) => total + segment.events.length, 0);
+const REPLAY_BACKUP_SIZE_BUDGET = 32 * 1024 * 1024;
+const eventSizes = /* @__PURE__ */ new WeakMap();
+function sizeOfEvent(event) {
+  const cached = eventSizes.get(event);
+  if (cached !== void 0) return cached;
+  let size;
+  try {
+    size = JSON.stringify(event).length;
+  } catch {
+    size = Number.MAX_SAFE_INTEGER;
+  }
+  eventSizes.set(event, size);
+  return size;
+}
+function sizeOfSegments(segments) {
+  return segments.reduce(
+    (total, segment) => total + segment.events.reduce((sum, event) => sum + sizeOfEvent(event), 0),
+    0
+  );
 }
-function trimReplayBackup(segments, eventBudget = REPLAY_BACKUP_EVENT_BUDGET) {
+function trimReplayBackup(segments, sizeBudget = REPLAY_BACKUP_SIZE_BUDGET) {
   let trimmed = segments;
-  while (trimmed.length > 1 && countEvents(trimmed) > eventBudget) {
+  while (trimmed.length > 1 && sizeOfSegments(trimmed) > sizeBudget) {
     trimmed = trimmed.slice(1);
   }
   return trimmed;
@@ -1236,6 +1322,8 @@ function createReplaySession(options = {}) {
     backup.schedule();
   };
   const recorder = options.recorder ?? new RingBufferRecorder({
+    ...options.trackCanvasInteractions === false ? { trackCanvasInteractions: false } : {},
+    ...options.windowMs === void 0 ? {} : { windowMs: options.windowMs },
     privacyConfig: options.privacyConfig,
     onChange: scheduleBackup
   });
@@ -1318,7 +1406,11 @@ class SessionReplayCaptureController {
         this.setSnapshot({ available: false, canAttach: false, error: null });
         return;
       }
-      const recorder = this.createRecorder((sessionReplay == null ? void 0 : sessionReplay.privacyConfig) ?? void 0);
+      const windowSeconds = sessionReplay == null ? void 0 : sessionReplay.windowSeconds;
+      const recorder = this.createRecorder({
+        ...(sessionReplay == null ? void 0 : sessionReplay.privacyConfig) ? { privacyConfig: sessionReplay.privacyConfig } : {},
+        ...typeof windowSeconds === "number" && windowSeconds > 0 ? { windowMs: windowSeconds * 1e3 } : {}
+      });
       recorder.start();
       this.recorder = recorder;
       this.setSnapshot({ available: true, canAttach, error: null });
@@ -1354,8 +1446,8 @@ class SessionReplayCaptureController {
     this.stopRecorder();
     this.listeners.clear();
   }
-  createRecorder(privacyConfig) {
-    return this.options.createRecorder ? this.options.createRecorder(privacyConfig) : createReplaySession({ privacyConfig });
+  createRecorder(config) {
+    return this.options.createRecorder ? this.options.createRecorder(config) : createReplaySession(config);
   }
   stopRecorder() {
     var _a;
@@ -1370,179 +1462,6 @@ 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;
 let nextCaptureRunId = 0;
 function createCaptureAttributeNames() {
@@ -1761,10 +1680,18 @@ function blobToDataUrl(blob) {
     reader.readAsDataURL(blob);
   });
 }
+function captureOrigin(element) {
+  if (element === document.documentElement || element === document.body) {
+    return { x: 0, y: 0 };
+  }
+  const rect = element.getBoundingClientRect();
+  return { x: rect.left, y: rect.top };
+}
 async function captureWithModernScreenshot(options) {
   const { domToBlob } = await loadModernScreenshot();
   const { element, excludeSelectors = [], width, height, scale = getCaptureScale() } = options;
   await waitForDocumentFonts();
+  const canvasFrames = await grabCanvasFrames(element, excludeSelectors);
   const attributeNames = createCaptureAttributeNames();
   const stickySnapshot = createModernStickySnapshot(element, attributeNames);
   const excludeSnapshot = createExcludeElementSnapshot(element, excludeSelectors, attributeNames);
@@ -1791,8 +1718,21 @@ async function captureWithModernScreenshot(options) {
     if (height) {
       captureOptions.height = height;
     }
-    return await blobToDataUrl(await domToBlob(element, captureOptions));
+    const captured = await domToBlob(element, captureOptions);
+    if (canvasFrames.length === 0) {
+      return await blobToDataUrl(captured);
+    }
+    return await blobToDataUrl(
+      await overlayCanvasFrames(
+        captured,
+        canvasFrames,
+        captureOrigin(element),
+        width ?? element.getBoundingClientRect().width,
+        SCREENSHOT_DATA_URL_QUALITY
+      )
+    );
   } finally {
+    canvasFrames.forEach((frame) => frame.bitmap.close());
     excludeSnapshot.cleanup();
     stickySnapshot.cleanup();
   }
@@ -1877,7 +1817,7 @@ async function calculateSha256Hex(file) {
 }
 function normalizeUploadMimeType(mimeType, mediaType) {
   var _a;
-  const fallback = mediaType === "screenshot" ? "image/webp" : mediaType === "replay" ? "application/gzip" : "video/webm";
+  const fallback = mediaType === "screenshot" ? "image/webp" : mediaType === "replay" || mediaType === "socket" ? "application/gzip" : "video/webm";
   const normalized = (_a = (mimeType || fallback).split(";", 1)[0]) == null ? void 0 : _a.trim().toLowerCase();
   return normalized && normalized.length > 0 ? normalized : fallback;
 }
@@ -4188,8 +4128,8 @@ function pristineFetch(input, init) {
   }
   return typeof window !== "undefined" ? window.fetch(input, init) : fetch(input, init);
 }
-const INSTRUMENTATION_FAILURE_LIMIT = 5;
-const REPATCH_LIMIT = 2;
+const INSTRUMENTATION_FAILURE_LIMIT$1 = 5;
+const REPATCH_LIMIT$1 = 2;
 function setInternalField(target, key, value) {
   Object.defineProperty(target, key, {
     value,
@@ -4286,7 +4226,7 @@ function omitTooLargeResponseBody(sizeBytes) {
     responseBodySizeBytes: sizeBytes
   };
 }
-function bytesToBase64(bytes) {
+function bytesToBase64$1(bytes) {
   let binary = "";
   const chunkSize = 32768;
   for (let offset = 0; offset < bytes.length; offset += chunkSize) {
@@ -4296,7 +4236,7 @@ function bytesToBase64(bytes) {
   return btoa(binary);
 }
 async function arrayBufferToBase64(arrayBuffer) {
-  return bytesToBase64(new Uint8Array(arrayBuffer));
+  return bytesToBase64$1(new Uint8Array(arrayBuffer));
 }
 function getResponseDetailLevel(response) {
   if (response.type === "opaque" || response.type === "opaqueredirect") return "opaque";
@@ -4413,7 +4353,7 @@ class NetworkCollector {
   ensurePatched() {
     if (!this.running) return;
     if (window.fetch === this.patchedFetch) return;
-    if (this.repatchCount >= REPATCH_LIMIT) return;
+    if (this.repatchCount >= REPATCH_LIMIT$1) return;
     this.repatchCount += 1;
     this.interceptFetch();
   }
@@ -4459,7 +4399,7 @@ class NetworkCollector {
    */
   recordInstrumentationFailure() {
     this.instrumentationFailures += 1;
-    if (this.instrumentationFailures >= INSTRUMENTATION_FAILURE_LIMIT) {
+    if (this.instrumentationFailures >= INSTRUMENTATION_FAILURE_LIMIT$1) {
       this.stop();
     }
   }
@@ -4681,6 +4621,422 @@ class NetworkCollector {
     this.patchedXHR = null;
   }
 }
+const SOCKET_FRAME_WINDOW_MS = 12e4;
+const SOCKET_FRAME_BUDGET_BYTES = 2 * 1024 * 1024;
+const SOCKET_FRAME_MAX_BYTES = 8 * 1024;
+const SOCKET_CONNECTION_LIMIT = 32;
+const SOCKET_TRANSCRIPT_MAX_BYTES = 5 * 1024 * 1024;
+const INSTRUMENTATION_FAILURE_LIMIT = 5;
+const REPATCH_LIMIT = 2;
+function toComparableOrigin(url) {
+  return url.replace(/^wss:\/\//i, "https://").replace(/^ws:\/\//i, "http://");
+}
+function bytesToBase64(bytes) {
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return btoa(binary);
+}
+function toFrameData(data, dir) {
+  if (typeof data === "string") {
+    return { opcode: "text", size: new TextEncoder().encode(data).length, text: data };
+  }
+  if (typeof Blob !== "undefined" && data instanceof Blob) {
+    return { opcode: "binary", size: data.size, bytes: new Uint8Array(0) };
+  }
+  if (data instanceof ArrayBuffer) {
+    const bytes = new Uint8Array(data);
+    return { opcode: "binary", size: bytes.length, bytes };
+  }
+  if (ArrayBuffer.isView(data)) {
+    const bytes = new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+    return { opcode: "binary", size: bytes.length, bytes };
+  }
+  if (dir === "send") {
+    const text = String(data);
+    return { opcode: "text", size: new TextEncoder().encode(text).length, text };
+  }
+  throw new TypeError("WebSocketCollector: 지원하지 않는 프레임 데이터 형식");
+}
+const MASK_PRESLICE_MARGIN_BYTES = SOCKET_FRAME_MAX_BYTES * 4;
+function bytesNeededForBase64Length(charLength) {
+  return Math.ceil(charLength * 3 / 4) + 3;
+}
+function maskFrameText(text) {
+  return redactSensitiveValues(redactSensitiveBody(text));
+}
+class WebSocketCollector {
+  constructor(apiBaseUrl, options) {
+    this.connections = [];
+    this.originalWebSocket = null;
+    this.patchedWebSocket = null;
+    this.originalSend = null;
+    this.patchedSend = null;
+    this.running = false;
+    this.nextId = 1;
+    this.totalBytes = 0;
+    this.instrumentationFailures = 0;
+    this.repatchCount = 0;
+    this.sink = null;
+    this.logByConnectionId = /* @__PURE__ */ new Map();
+    this.apiBaseUrl = typeof apiBaseUrl === "string" && apiBaseUrl.trim().length > 0 ? apiBaseUrl.trim() : null;
+    this.onChange = (options == null ? void 0 : options.onChange) ?? null;
+  }
+  start() {
+    if (this.running) return;
+    if (typeof globalThis.WebSocket !== "function") return;
+    this.running = true;
+    this.instrumentationFailures = 0;
+    this.patch();
+  }
+  stop() {
+    if (!this.running) return;
+    this.running = false;
+    this.unpatch();
+  }
+  /**
+   * 우리 래퍼가 아직 걸려 있는지 확인하고, 아니면 다시 붙인다.
+   *
+   * NetworkCollector.ensurePatched 와 같은 이유다 — 다른 계측이 `window.WebSocket` 을
+   * 통째로 갈아치우면 수집이 조용히 멈춘다.
+   */
+  ensurePatched() {
+    if (!this.running) return;
+    if (globalThis.WebSocket === this.patchedWebSocket) return;
+    if (this.repatchCount >= REPATCH_LIMIT) return;
+    this.repatchCount += 1;
+    this.patch();
+  }
+  /**
+   * 기존 네트워크 로그 목록에 소켓 연결을 한 줄로 흘려보낸다.
+   *
+   * `NetworkCollector.ingest` 를 그대로 받는다 — 새 읽기 경로를 만들지 않고 로그를 읽는
+   * 세 소비자(SDK content·SDK headless·익스텐션 iife)가 이미 보는 목록에 얹는다.
+   */
+  bindNetworkLogSink(ingest) {
+    this.sink = ingest;
+  }
+  /**
+   * 연결이 열릴 때 줄을 한 번만 만들어 싱크로 내보낸다.
+   *
+   * 이후 프레임·닫힘 갱신은 `syncConnectionLog` 가 이 객체를 그대로 고친다 — 싱크
+   * 소비자는 배열에 새 항목이 늘지 않고 이미 받은 참조가 갱신되는 것만 본다.
+   */
+  emitConnectionLog(connection) {
+    if (!this.sink) return;
+    const log = {
+      url: connection.url,
+      // 핸드셰이크는 GET 으로 나가고 성공이면 101 이다.
+      method: "GET",
+      statusCode: 101,
+      timestamp: connection.openedAt,
+      type: "websocket",
+      socketConnectionId: connection.id,
+      frameCount: 0,
+      frameBytes: 0,
+      droppedFrames: 0
+    };
+    this.logByConnectionId.set(connection.id, log);
+    this.sink(log);
+  }
+  /**
+   * `emitConnectionLog` 가 내보낸 줄을 연결의 최신 상태로 고친다.
+   *
+   * `frameCount` 는 버린 프레임까지 센다("실제로 몇 건 오갔나") — `frameBytes` 는 지금
+   * 보관 중인 프레임의 크기 합이라 기준이 다르다. 버린 프레임의 바이트는 이미 사라졌으니
+   * 더할 수 없다.
+   */
+  syncConnectionLog(connection) {
+    const log = this.logByConnectionId.get(connection.id);
+    if (!log) return;
+    log.frameCount = connection.frames.length + connection.droppedFrames;
+    log.frameBytes = connection.frames.reduce((sum, frame) => sum + frame.size, 0);
+    log.droppedFrames = connection.droppedFrames;
+    if (connection.closeCode != null) log.socketCloseCode = connection.closeCode;
+  }
+  getConnections() {
+    return this.connections.map((connection) => ({
+      ...connection,
+      frames: [...connection.frames]
+    }));
+  }
+  clear() {
+    this.connections = [];
+    this.totalBytes = 0;
+    this.logByConnectionId.clear();
+  }
+  /**
+   * 백업에서 되돌린 연결을 지금 목록 앞에 합친다.
+   *
+   * 합친 결과가 상한을 넘으면 앞쪽(오래된 쪽)부터 잘려나간다 — 그중엔 이미
+   * `logByConnectionId` 에 줄이 등록된 연결(리로드 사이 짧게 살아있던 연결)이 섞여 있을
+   * 수 있다. 맵에서도 같이 지우지 않으면 다시 채워질 일 없는 항목으로 계속 남는다.
+   *
+   * 창·예산도 복원 직후 바로 적용한다 — 안 하면 다음 프레임이 올 때까지 상한 없이
+   * 방치된다. 리로드 직후 되돌린 연결이 정확히 이 경우다.
+   *
+   * **`nextId` 도 여기서 올린다.** `nextId` 는 매 세션 1 에서 시작하는데 복원은 그걸 모르고
+   * 지나간다 — MPA 리로드 뒤 백업에서 `ws-1` 이 돌아오고, 그 문서에서 새로 여는 첫 소켓도
+   * 똑같이 `ws-1` 을 받는다. 전사 파일에 같은 id 가 둘 생기고, 뷰어의
+   * `find((c) => c.id === connectionId)` 가 배열 앞쪽(복원된 옛 연결)을 집어 새 연결을 눌러도
+   * 옛 프레임이 보인다. id 에 세션 접두사를 박는 대안도 있지만, 그러면 MCP 조회의
+   * url·direction 필터가 문자열 그대로 비교하는 기존 `ws-<n>` 형식이 깨진다. 복원된 id 의
+   * 최댓값 다음부터 잇는 쪽이 형식을 그대로 지키면서 diff 도 가장 작다.
+   */
+  restore(connections) {
+    if (connections.length === 0) return;
+    this.connections = [...connections, ...this.connections].slice(-SOCKET_CONNECTION_LIMIT);
+    this.totalBytes = this.sumBytes(this.connections);
+    this.bumpNextIdPast(this.connections);
+    const survivingIds = new Set(this.connections.map((connection) => connection.id));
+    for (const id of this.logByConnectionId.keys()) {
+      if (!survivingIds.has(id)) this.logByConnectionId.delete(id);
+    }
+    this.prune();
+  }
+  /** `ws-<n>` 형식 id 중 가장 큰 번호 다음부터 잇도록 `nextId` 를 올린다. 낮추지는 않는다. */
+  bumpNextIdPast(connections) {
+    for (const connection of connections) {
+      const match2 = /^ws-(\d+)$/.exec(connection.id);
+      if (!match2) continue;
+      const numeric = Number(match2[1]);
+      if (numeric >= this.nextId) this.nextId = numeric + 1;
+    }
+  }
+  sumBytes(connections) {
+    var _a;
+    let sum = 0;
+    for (const connection of connections) {
+      for (const frame of connection.frames) sum += ((_a = frame.data) == null ? void 0 : _a.length) ?? 0;
+    }
+    return sum;
+  }
+  /**
+   * 우리 백엔드로 가는 연결은 레코드를 아예 만들지 않는다.
+   *
+   * `byInstance` 에 등록되지 않으면 이후 `send` 프레임도 자동으로 따라오지 않는다
+   * (patchedSend 가 `byInstance.get` 실패 시 아무것도 기록하지 않는다).
+   */
+  track(socket, url, protocols) {
+    var _a;
+    try {
+      if (isSelfTrafficOrigin(toComparableOrigin(url), this.apiBaseUrl ? [this.apiBaseUrl] : []))
+        return null;
+      const connection = {
+        id: `ws-${this.nextId++}`,
+        url: redactUrlSecrets(url),
+        // 서브프로토콜에 토큰을 싣는 패턴(`new WebSocket(url, [token])`)이 실제로 쓰인다.
+        // 값 형태 스크럽까지 거는 이유는 프레임 본문과 같다.
+        protocol: maskFrameText(Array.isArray(protocols) ? protocols[0] : protocols),
+        openedAt: Date.now(),
+        frames: [],
+        droppedFrames: 0,
+        droppedBytes: 0
+      };
+      this.connections.push(connection);
+      if (this.connections.length > SOCKET_CONNECTION_LIMIT) {
+        const closedIndex = this.connections.findIndex((c2) => c2.closedAt != null);
+        const [evicted] = this.connections.splice(closedIndex >= 0 ? closedIndex : 0, 1);
+        this.totalBytes -= this.sumBytes([evicted]);
+        this.logByConnectionId.delete(evicted.id);
+      }
+      socket.addEventListener("message", (event) => {
+        this.addFrame(connection, "recv", event.data);
+      });
+      socket.addEventListener("close", (event) => {
+        var _a2;
+        if (!this.running) return;
+        try {
+          const closeEvent = event;
+          connection.closedAt = Date.now();
+          connection.closeCode = closeEvent.code;
+          connection.closeReason = closeEvent.reason;
+          (_a2 = this.onChange) == null ? void 0 : _a2.call(this);
+          this.syncConnectionLog(connection);
+        } catch {
+          this.recordInstrumentationFailure();
+        }
+      });
+      socket.addEventListener("error", () => {
+        var _a2;
+        if (!this.running) return;
+        try {
+          connection.errored = true;
+          (_a2 = this.onChange) == null ? void 0 : _a2.call(this);
+        } catch {
+          this.recordInstrumentationFailure();
+        }
+      });
+      (_a = this.onChange) == null ? void 0 : _a.call(this);
+      this.emitConnectionLog(connection);
+      return connection;
+    } catch {
+      this.recordInstrumentationFailure();
+      return null;
+    }
+  }
+  /**
+   * 계측이 스스로 꺼지는 차단기. NetworkCollector.recordInstrumentationFailure 와 같은 규칙이다.
+   *
+   * 계측에서 난 예외가 반복된다는 건 우리가 이해하지 못하는 환경에 들어와 있다는 뜻이다.
+   * 고객 페이지에 계속 손대는 것보다 패치를 걷어내고 로그를 포기하는 쪽이 안전하다.
+   */
+  recordInstrumentationFailure() {
+    this.instrumentationFailures += 1;
+    if (this.instrumentationFailures >= INSTRUMENTATION_FAILURE_LIMIT) {
+      this.stop();
+    }
+  }
+  addFrame(connection, dir, data) {
+    var _a;
+    if (!this.running) return;
+    try {
+      const captured = toFrameData(data, dir);
+      const truncated = captured.size > SOCKET_FRAME_MAX_BYTES;
+      const frameData = this.buildFrameData(captured, truncated);
+      connection.frames.push({
+        t: Date.now(),
+        dir,
+        opcode: captured.opcode,
+        size: captured.size,
+        data: frameData,
+        ...truncated ? { truncated: true } : {}
+      });
+      this.totalBytes += frameData.length;
+      this.prune();
+      (_a = this.onChange) == null ? void 0 : _a.call(this);
+      this.syncConnectionLog(connection);
+    } catch {
+      this.recordInstrumentationFailure();
+    }
+  }
+  /**
+   * 프레임 본문을 마스킹·절단해 저장용 문자열로 만든다.
+   *
+   * **상한 아래면 지금까지와 완전히 같다** — 아래 두 분기 모두 `truncated` 가 false 면
+   * 원본 그대로 마스킹만 거치고 절단 코드를 타지 않는다.
+   *
+   * 상한을 넘을 때만 순서가 바뀐다: 절단은 항상 크기(`byteLength`/`Blob.size`/문자열
+   * 길이)를 이미 아는 값으로 먼저 가늠하고, **변환(base64)·마스킹은 그 뒤 필요한 만큼만**
+   * 돌린다. 텍스트는 마스킹이 끝난 뒤 최종 상한으로 한 번 더 자른다 — 마스킹이 앞부분을
+   * 줄이거나 늘릴 수 있어서다(`MASK_PRESLICE_MARGIN_BYTES` 주석 참조).
+   */
+  buildFrameData(captured, truncated) {
+    if (captured.opcode === "binary") {
+      if (!truncated) return bytesToBase64(captured.bytes);
+      const bytesNeeded = Math.min(
+        captured.bytes.length,
+        bytesNeededForBase64Length(SOCKET_FRAME_MAX_BYTES)
+      );
+      return bytesToBase64(captured.bytes.subarray(0, bytesNeeded)).slice(
+        0,
+        SOCKET_FRAME_MAX_BYTES
+      );
+    }
+    if (!truncated) return maskFrameText(captured.text);
+    const preSliced = captured.text.slice(0, MASK_PRESLICE_MARGIN_BYTES);
+    return maskFrameText(preSliced).slice(0, SOCKET_FRAME_MAX_BYTES);
+  }
+  /**
+   * 시간 창 밖 프레임과 전역 바이트 예산 초과분을 버린다.
+   *
+   * 창 정리는 연결별로 본다 — 각 연결의 프레임은 시간순이라 앞에서부터 잘라내면 된다.
+   * 예산은 전역이라 연결이 여럿이면 가장 오래된 프레임을 가진 연결부터 줄인다.
+   */
+  prune() {
+    var _a, _b, _c;
+    const cutoff = Date.now() - SOCKET_FRAME_WINDOW_MS;
+    const touched = /* @__PURE__ */ new Set();
+    for (const connection of this.connections) {
+      let removed = 0;
+      let removedBytes = 0;
+      while (connection.frames.length > 0 && connection.frames[0].t < cutoff) {
+        const [frame] = connection.frames.splice(0, 1);
+        removed += 1;
+        removedBytes += ((_a = frame.data) == null ? void 0 : _a.length) ?? 0;
+      }
+      if (removed > 0) {
+        connection.droppedFrames += removed;
+        connection.droppedBytes += removedBytes;
+        this.totalBytes -= removedBytes;
+        touched.add(connection);
+      }
+    }
+    while (this.totalBytes > SOCKET_FRAME_BUDGET_BYTES) {
+      const oldest = this.connections.filter((connection) => connection.frames.length > 0).sort((a2, b) => a2.frames[0].t - b.frames[0].t)[0];
+      if (!oldest) break;
+      const [frame] = oldest.frames.splice(0, 1);
+      oldest.droppedFrames += 1;
+      oldest.droppedBytes += ((_b = frame.data) == null ? void 0 : _b.length) ?? 0;
+      this.totalBytes -= ((_c = frame.data) == null ? void 0 : _c.length) ?? 0;
+      touched.add(oldest);
+    }
+    for (const connection of touched) this.syncConnectionLog(connection);
+  }
+  patch() {
+    this.originalWebSocket = globalThis.WebSocket;
+    const OriginalWebSocket = this.originalWebSocket;
+    const track = this.track.bind(this);
+    const addFrame = this.addFrame.bind(this);
+    const byInstance = /* @__PURE__ */ new WeakMap();
+    class PatchedWebSocket extends OriginalWebSocket {
+      constructor(url, protocols) {
+        super(url, protocols);
+        const connection = track(this, typeof url === "string" ? url : url.href, protocols);
+        if (connection) byInstance.set(this, connection);
+      }
+    }
+    this.originalSend = OriginalWebSocket.prototype.send;
+    const originalSend = this.originalSend;
+    const patchedSend = function(data) {
+      const connection = byInstance.get(this);
+      if (connection) addFrame(connection, "send", data);
+      return originalSend.call(this, data);
+    };
+    OriginalWebSocket.prototype.send = patchedSend;
+    this.patchedSend = patchedSend;
+    globalThis.WebSocket = PatchedWebSocket;
+    this.patchedWebSocket = PatchedWebSocket;
+  }
+  /**
+   * 우리 래퍼가 아직 현재 값일 때만 되돌린다.
+   *
+   * `NetworkCollector.restoreFetch`/`restoreXHR` 과 같은 규칙 — 무조건 되돌리면 우리
+   * 뒤에 붙은 남의 계측(다른 APM 등)의 래퍼가 통째로 사라진다. 남의 것이 위에 있으면
+   * 우리 래퍼는 체인에 남겨 두고 수집만 멈춘다.
+   */
+  unpatch() {
+    if (this.originalWebSocket && globalThis.WebSocket === this.patchedWebSocket) {
+      globalThis.WebSocket = this.originalWebSocket;
+    }
+    if (this.originalWebSocket && this.originalSend && this.originalWebSocket.prototype.send === this.patchedSend) {
+      this.originalWebSocket.prototype.send = this.originalSend;
+    }
+    this.originalWebSocket = null;
+    this.patchedWebSocket = null;
+    this.originalSend = null;
+    this.patchedSend = null;
+  }
+}
+async function sha256Hex(bytes) {
+  const digest = await crypto.subtle.digest("SHA-256", bytes.buffer);
+  return Array.from(new Uint8Array(digest)).map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+async function serializeSocketTranscript(connections) {
+  const frameCount = connections.reduce(
+    (sum, connection) => sum + connection.frames.length + connection.droppedFrames,
+    0
+  );
+  if (connections.length === 0 || frameCount === 0) return null;
+  const json = JSON.stringify({ connections });
+  const payload = gzip_1(json);
+  return {
+    payload,
+    checksumSha256: await sha256Hex(payload),
+    sizeBytes: payload.byteLength,
+    connectionCount: connections.length,
+    frameCount
+  };
+}
 var NetworkLogType = /* @__PURE__ */ ((NetworkLogType2) => {
   NetworkLogType2["MAIN_FRAME"] = "main_frame";
   NetworkLogType2["SUB_FRAME"] = "sub_frame";
@@ -13299,6 +13655,7 @@ function OnboardingOverlay({
   targetRect,
   targetRadius,
   avoidRects,
+  affordanceRect,
   elevateHighlight,
   allowSkip = true,
   className,
@@ -13318,6 +13675,23 @@ function OnboardingOverlay({
     cutoutRect.width / 2,
     cutoutRect.height / 2
   ) : 0;
+  const hasAffordanceTarget = !!step.affordanceTargetId;
+  const affordanceCutout = affordanceRect ? padRect(affordanceRect, MASK_PADDING) : null;
+  const affordanceDiameter = affordanceRect ? Math.max(affordanceRect.width, affordanceRect.height) + MASK_PADDING * 2 : 0;
+  const affordanceCircle = affordanceRect ? (() => {
+    const centerX = (affordanceRect.left + affordanceRect.right) / 2;
+    const centerY = (affordanceRect.top + affordanceRect.bottom) / 2;
+    const radius = affordanceDiameter / 2;
+    return {
+      left: centerX - radius,
+      top: centerY - radius,
+      right: centerX + radius,
+      bottom: centerY + radius,
+      width: affordanceDiameter,
+      height: affordanceDiameter
+    };
+  })() : null;
+  const popoverAnchorRect = hasAffordanceTarget && affordanceCutout ? affordanceCutout : cutoutRect;
   const popoverRef = React.useRef(null);
   const [popoverSize, setPopoverSize] = React.useState(
     null
@@ -13339,17 +13713,20 @@ function OnboardingOverlay({
   }, [step.id, step.body]);
   const effectiveSize = popoverSize && popoverSize.width > 0 && popoverSize.height > 0 ? popoverSize : DEFAULT_POPOVER_SIZE;
   const placement = resolvePopoverPlacement(
-    step.position ?? (cutoutRect ? "bottom" : "center"),
-    cutoutRect ?? getViewportRect(),
+    step.position ?? (popoverAnchorRect ? "bottom" : "center"),
+    popoverAnchorRect ?? getViewportRect(),
     effectiveSize,
-    cutoutRect ? avoidRects ?? [] : []
+    popoverAnchorRect ? avoidRects ?? [] : []
   );
   const { left: popoverLeft, top: popoverTop } = placement;
-  const shouldCenterPopover = !cutoutRect && (step.position ?? "center") === "center";
+  const shouldCenterPopover = !popoverAnchorRect && (step.position ?? "center") === "center";
   const maskColor = isTargetInteractionStep(step) ? "rgba(8, 13, 18, 0.74)" : "rgba(8, 13, 18, 0.62)";
   const isPassthrough = !!step.advanceOn;
   const isTargetInteraction = isTargetInteractionStep(step);
   const clickHint = isTargetInteraction ? step.clickHint ?? labels.clickHint : null;
+  const isCutoutInteractionStyled = isTargetInteraction && !hasAffordanceTarget;
+  const showAffordanceEmphasis = isTargetInteraction && hasAffordanceTarget && !!affordanceCircle;
+  const ringCursorRect = !isTargetInteraction ? null : hasAffordanceTarget ? affordanceCircle : cutoutRect;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -13442,7 +13819,7 @@ function OnboardingOverlay({
               "data-testid": "onboarding-cutout-outline",
               className: cn(
                 "issue-sticker-onboarding-highlight fixed",
-                isTargetInteraction ? "border-2 border-brand" : "border border-white/90"
+                isCutoutInteractionStyled ? "border-2 border-brand" : "border border-white/90"
               ),
               style: {
                 left: cutoutRect.left,
@@ -13457,7 +13834,31 @@ function OnboardingOverlay({
             step.id
           )
         ) : null,
-        cutoutRect && isTargetInteraction ? renderHighlight(
+        showAffordanceEmphasis && affordanceCircle ? renderHighlight(
+          /* 강조(컷아웃)와 클릭 유도 위치가 분리된 단계의 브랜드 링. 컷아웃 테두리는
+           * 위에서 이미 순수 강조 스타일로 그렸으니, 여기서는 실제로 눌러야 할 요소
+           * 중심에 원을 그린다 — 사각형 컷아웃과 구별돼야 "강조 대상이 아니라 이걸
+           * 누르라"는 뜻이 선다. */
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-testid": "onboarding-affordance-ring",
+              className: "issue-sticker-onboarding-highlight fixed rounded-full border-2 border-brand",
+              style: {
+                left: affordanceCircle.left,
+                top: affordanceCircle.top,
+                width: affordanceCircle.width,
+                height: affordanceCircle.height,
+                borderRadius: 9999,
+                pointerEvents: "none",
+                zIndex: elevateHighlight ? OVERLAY_LAYER_INDEX.runtimeHost : void 0
+              }
+            },
+            `${step.id}-affordance`
+          )
+        ) : null,
+        ringCursorRect ? renderHighlight(
           /* 클릭하는 커서. 테두리만으로는 "봐야 할 곳"까지만 전달되고 "클릭하라"가
            * 전달되지 않는다. 손 모양 반복 동작이 그 자리를 맡는다. */
           /* @__PURE__ */ jsxs(
@@ -13467,8 +13868,8 @@ function OnboardingOverlay({
               "data-testid": "onboarding-cutout-cursor",
               className: "issue-sticker-onboarding-tap fixed",
               style: {
-                left: cutoutRect.right - TAP_INSET,
-                top: cutoutRect.bottom - TAP_INSET,
+                left: ringCursorRect.right - TAP_INSET,
+                top: ringCursorRect.bottom - TAP_INSET,
                 pointerEvents: "none",
                 zIndex: elevateHighlight ? OVERLAY_LAYER_INDEX.runtimeHost : void 0
               },
@@ -13705,18 +14106,24 @@ function OnboardingProvider({
     () => activeTargetIds.map((id) => targetMapRef.current.get(id) ?? null).filter((el) => el !== null),
     [activeTargetIds]
   );
+  const activeAffordanceTargetId = activeStep == null ? void 0 : activeStep.affordanceTargetId;
+  const getObservedElements = React.useCallback(() => {
+    const elements = getActiveTargetElements();
+    const affordanceElement = activeAffordanceTargetId ? targetMapRef.current.get(activeAffordanceTargetId) ?? null : null;
+    return affordanceElement ? [...elements, affordanceElement] : elements;
+  }, [activeAffordanceTargetId, getActiveTargetElements]);
   const scheduleLayoutUpdate = React.useCallback(() => {
     clearLayoutFrame();
     frameRef.current = window.requestAnimationFrame(() => {
       frameRef.current = null;
       const nextRect = unionRect(
-        getActiveTargetElements().map(getElementRect).filter((r2) => r2 !== null)
+        getObservedElements().map(getElementRect).filter((r2) => r2 !== null)
       );
       if (areRectsEqual(lastRectRef.current, nextRect)) return;
       lastRectRef.current = nextRect;
       setLayoutVersion((version2) => version2 + 1);
     });
-  }, [clearLayoutFrame, getActiveTargetElements]);
+  }, [clearLayoutFrame, getObservedElements]);
   const openAtStep = React.useCallback(
     (stepIndex) => {
       var _a;
@@ -13874,7 +14281,7 @@ function OnboardingProvider({
   }, [activeStep, advanceFromTargetClick, goToStep, isActiveRoute, isOpen]);
   React.useEffect(() => {
     if (!isOpen || !isActiveRoute) return;
-    const elements = getActiveTargetElements();
+    const elements = getObservedElements();
     if (elements.length === 0) return;
     scheduleLayoutUpdate();
     window.addEventListener("resize", scheduleLayoutUpdate);
@@ -13889,7 +14296,7 @@ function OnboardingProvider({
     };
   }, [
     clearLayoutFrame,
-    getActiveTargetElements,
+    getObservedElements,
     isActiveRoute,
     isOpen,
     scheduleLayoutUpdate,
@@ -13902,6 +14309,7 @@ function OnboardingProvider({
   const targetRect = isOpen && isActiveRoute && allTargetsResolved ? unionRect(resolvedTargetRects.filter((r2) => r2 !== null)) : null;
   const targetRadius = activeTargetIds.length === 1 ? getElementRadius(targetMapRef.current.get(activeTargetIds[0]) ?? null) : null;
   const avoidRects = ((activeStep == null ? void 0 : activeStep.avoidTargetIds) ?? []).map((id) => getElementRect(targetMapRef.current.get(id) ?? null)).filter((rect) => rect !== null);
+  const affordanceRect = (activeStep == null ? void 0 : activeStep.affordanceTargetId) ? getElementRect(targetMapRef.current.get(activeStep.affordanceTargetId) ?? null) : null;
   const shouldRenderOverlay = isOpen && activeStep && isActiveRoute && !suppressed && !activeStep.silent && (!stepHasTarget || targetRect);
   const isTargetReady = !stepHasTarget || targetRect !== null;
   React.useEffect(() => {
@@ -13954,6 +14362,7 @@ function OnboardingProvider({
         targetRect,
         targetRadius,
         avoidRects,
+        affordanceRect,
         elevateHighlight,
         allowSkip,
         className,
@@ -14175,6 +14584,20 @@ function filterExcludeServiceRelatedConsoleLogs(consoleLogs) {
     return !isIssueStickerInternalConsoleLog(log) && !isIssueStickerServiceConsoleLog(log);
   });
 }
+const TRANSCRIPT_CONTENT_TYPE = "application/gzip";
+async function uploadSocketTranscript(api, snapshot, options = {}) {
+  if (snapshot.sizeBytes > SOCKET_TRANSCRIPT_MAX_BYTES) return null;
+  try {
+    const file = new File([snapshot.payload], "socket-transcript.json.gz", {
+      type: TRANSCRIPT_CONTENT_TYPE
+    });
+    const uploaded = await uploadSignedMediaWithApi(api, file, "socket", options);
+    return { uploadId: uploaded.id };
+  } catch (error) {
+    devLogger.error("socketTranscriptUpload", "소켓 전사 업로드 실패:", error);
+    return null;
+  }
+}
 function buildExternalUserPayload(user) {
   if (!user) return {};
   return {
@@ -14183,60 +14606,63 @@ function buildExternalUserPayload(user) {
   };
 }
 export {
-  getNotionPageMetadata as $,
-  getLogBackupSessionId as A,
-  createIndexedDbLogBackup as B,
+  Check as $,
+  trimLogBackupPayload as A,
+  createSafeLogBackup as B,
   ConsoleCollector as C,
-  PopoverTrigger as D,
-  Input as E,
-  PopoverContent as F,
-  Select$1 as G,
-  SelectTrigger as H,
+  getLogBackupSessionId as D,
+  createIndexedDbLogBackup as E,
+  PopoverTrigger as F,
+  Input as G,
+  PopoverContent as H,
   ISSUE_STICKER_INTERNAL_LOG_PREFIX as I,
-  SelectValue as J,
-  SelectContent as K,
+  Select$1 as J,
+  SelectTrigger as K,
   Label as L,
-  SelectItem as M,
+  SelectValue as M,
   NetworkCollector as N,
-  getJiraMetadata as O,
+  SelectContent as O,
   Popover as P,
-  buildJiraIssueFields as Q,
-  Button$1 as R,
+  SelectItem as Q,
+  getJiraMetadata as R,
   ScreenRecordingController as S,
-  Root2 as T,
-  Trigger as U,
-  ChevronDown as V,
-  Portal as W,
-  Content2 as X,
-  Check as Y,
-  X as Z,
-  DatePicker as _,
+  buildJiraIssueFields as T,
+  Button$1 as U,
+  Root2 as V,
+  WebSocketCollector as W,
+  Trigger as X,
+  ChevronDown as Y,
+  Portal as Z,
+  Content2 as _,
   uploadSignedMediaWithApi as a,
-  buildNotionFieldViews as a0,
-  DirectUploadError as a1,
-  toast as a2,
-  getSnapshot as a3,
-  subscribe as a4,
-  getRegisteredUploadId as a5,
-  ChevronRight as a6,
-  ReactRemoveScroll as a7,
-  hideOthers as a8,
-  useFocusGuards as a9,
-  FocusScope as aa,
-  getExposedJiraFields as ab,
-  isJiraFieldExposed as ac,
-  normalizeExposedJiraFields as ad,
-  getPrimaryJiraMapping as ae,
-  createCollection as af,
-  useDirection as ag,
-  getPrimaryNotionMapping as ah,
-  buttonVariants as ai,
-  findElementBySelector as aj,
-  findElementByXPath as ak,
-  OnboardingProvider as al,
-  useOnboardingTarget as am,
-  useOnboardingFlow as an,
-  PopoverAnchor as ao,
+  X as a0,
+  DatePicker as a1,
+  getNotionPageMetadata as a2,
+  buildNotionFieldViews as a3,
+  DirectUploadError as a4,
+  toast as a5,
+  getSnapshot as a6,
+  subscribe as a7,
+  getRegisteredUploadId as a8,
+  ChevronRight as a9,
+  ReactRemoveScroll as aa,
+  hideOthers as ab,
+  useFocusGuards as ac,
+  FocusScope as ad,
+  getExposedJiraFields as ae,
+  isJiraFieldExposed as af,
+  normalizeExposedJiraFields as ag,
+  getPrimaryJiraMapping as ah,
+  createCollection as ai,
+  useDirection as aj,
+  getPrimaryNotionMapping as ak,
+  buttonVariants as al,
+  findElementBySelector as am,
+  findElementByXPath as an,
+  OnboardingProvider as ao,
+  useOnboardingTarget as ap,
+  useOnboardingFlow as aq,
+  PopoverAnchor as ar,
   buildJiraCreateFields as b,
   captureWithModernScreenshot as c,
   directUploadToSignedUrl as d,
@@ -14257,9 +14683,9 @@ export {
   selectNetworkLogsForSubmit as s,
   sanitizeString as t,
   uploadScreenshotDataUrls as u,
-  getCurrentPageUrl as v,
-  SessionReplayCaptureController as w,
-  preloadModernScreenshot as x,
-  trimLogBackupPayload as y,
-  createSafeLogBackup as z
+  serializeSocketTranscript as v,
+  uploadSocketTranscript as w,
+  getCurrentPageUrl as x,
+  SessionReplayCaptureController as y,
+  preloadModernScreenshot as z
 };