issue-sticker 0.12.0 → 0.13.0

package/dist/issue-sticker-headless-react.js

@@ -1,8 +1,8 @@
-import { c as createLucideIcon, u as ungzip_1, R as REPLAY_EVENT_TYPE, C as CANVAS_INTERACTION_TAG, a as cn, b as Replayer, M as MousePointer2 } from "./three-B228j4M6.js";
-import { r } from "./three-B228j4M6.js";
+import { c as createLucideIcon, u as ungzip_1, a as REPLAY_MASKED_ATTRIBUTE, M as MASKING_COPY, b as REPLAY_EVENT_TYPE, C as CANVAS_INTERACTION_TAG, d as REPLAY_MASKED_STYLE_RULES, e as cn, f as Replayer, g as MousePointer2 } from "./three-FamoZZKK.js";
+import { r } from "./three-FamoZZKK.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-CT7e9xbU.js";
+import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-BVA6ikuJ.js";
 /**
  * @license lucide-react v0.468.0 - ISC
  *
@@ -120,6 +120,7 @@ class NodeIndex {
   }
   /**
    * 상호작용 대상을 사람이 읽을 짧은 레이블로 바꾼다. 우선순위는 다음과 같다.
+   *  0. 마스킹 정책으로 가린 노드: 보안 정책으로 가려짐
    *  1. aria-label / title
    *  2. form 컨트롤: placeholder → name → type (예: input[email])
    *  3. 직접 자식 Text 노드만 결합 (컨테이너가 자손 텍스트를 통째로 빨아들이는 것 방지)
@@ -132,6 +133,7 @@ class NodeIndex {
     const node = id === void 0 ? void 0 : this.get(id);
     if (!node || node.type !== NODE_TYPE_ELEMENT || id === void 0) return TYPE_LABEL[type];
     const attrs = node.attributes ?? {};
+    if (REPLAY_MASKED_ATTRIBUTE in attrs) return MASKING_COPY.maskedLabel;
     const attr = (name) => {
       const value = attrs[name];
       return typeof value === "string" ? value : "";
@@ -392,6 +394,52 @@ function stripWidgetEvents(events) {
   }
   return { events: out, stripped: widgetIds.size > 0, removedEvents };
 }
+const STYLED = /* @__PURE__ */ new WeakSet();
+function isShadowRoot(node) {
+  return node.nodeType === 11 && "host" in node;
+}
+function adoptMaskedSheet(root, view) {
+  var _a;
+  let proto = Object.getPrototypeOf(root);
+  let native;
+  while (proto && !native) {
+    native = Object.getOwnPropertyDescriptor(proto, "adoptedStyleSheets");
+    proto = Object.getPrototypeOf(proto);
+  }
+  if (!(native == null ? void 0 : native.get) || !native.set || typeof ((_a = view.CSSStyleSheet) == null ? void 0 : _a.prototype.replaceSync) !== "function")
+    return false;
+  const sheet = new view.CSSStyleSheet();
+  sheet.replaceSync(REPLAY_MASKED_STYLE_RULES.join("\n"));
+  const { get, set } = native;
+  const adopt = (sheets) => set.call(root, [...Array.from(sheets).filter((other) => other !== sheet), sheet]);
+  Object.defineProperty(root, "adoptedStyleSheets", {
+    configurable: true,
+    get: () => get.call(root),
+    set: adopt
+  });
+  adopt(get.call(root));
+  return true;
+}
+function styleShadowRoot(root) {
+  if (STYLED.has(root)) return;
+  STYLED.add(root);
+  const doc = root.ownerDocument;
+  const view = doc.defaultView;
+  if (view && adoptMaskedSheet(root, view)) return;
+  const style = doc.createElement("style");
+  style.textContent = REPLAY_MASKED_STYLE_RULES.join("\n");
+  root.prepend(style);
+}
+const maskedShadowStylePlugin = {
+  onBuild(node) {
+    const built = node;
+    if (typeof built.getRootNode !== "function") return;
+    const own = built.shadowRoot;
+    if (own) styleShadowRoot(own);
+    const root = built.getRootNode();
+    if (isShadowRoot(root)) styleShadowRoot(root);
+  }
+};
 const MOUSE_TAIL_CONFIG = {
   lineCap: "round",
   lineWidth: 3,
@@ -495,6 +543,9 @@ async function waitForReplayCanvas(replayerRef, shot, cancelled) {
     await new Promise((resolve) => requestAnimationFrame(resolve));
   }
 }
+function canvasKey(shot) {
+  return shot.nodeId ?? `i${shot.canvasIndex}`;
+}
 function findReplayCanvas(replayer, shot) {
   var _a, _b;
   const replayDocument = (_a = replayer == null ? void 0 : replayer.iframe) == null ? void 0 : _a.contentDocument;
@@ -604,7 +655,11 @@ function SessionReplayPlayer({ url }) {
             root: stage,
             speed: 1,
             showWarning: false,
-            mouseTail: INITIAL_SHOW_TRAIL ? MOUSE_TAIL_CONFIG : false
+            mouseTail: INITIAL_SHOW_TRAIL ? MOUSE_TAIL_CONFIG : false,
+            // 마스킹 정책으로 가린 상자. rrweb 기본 차단 표시(currentColor 단색)는 "깨졌다"로 읽힌다.
+            insertStyleRules: REPLAY_MASKED_STYLE_RULES,
+            // insertStyleRules 는 shadow root 안에 닿지 않는다. 같은 규칙을 shadow root 마다 넣는다.
+            plugins: [maskedShadowStylePlugin]
           }
         );
         replayer.on("fullsnapshot-rebuilded", () => {
@@ -727,20 +782,21 @@ function SessionReplayPlayer({ url }) {
   const currentShots = useMemo(() => {
     const byCanvas = /* @__PURE__ */ new Map();
     for (const shot of canvasShots) {
-      const applies = shot.t <= currentMs || shot.baseline && !byCanvas.has(shot.canvasIndex);
+      const key = canvasKey(shot);
+      const applies = shot.t <= currentMs || shot.baseline && !byCanvas.has(key);
       if (applies) {
-        byCanvas.set(shot.canvasIndex, shot);
+        byCanvas.set(key, shot);
       }
     }
     return Array.from(byCanvas.values());
   }, [canvasShots, currentMs]);
-  const shotKey = currentShots.map((shot) => `${shot.canvasIndex}:${shot.t}`).join("|");
+  const shotKey = currentShots.map((shot) => `${canvasKey(shot)}:${shot.t}`).join("|");
   useEffect(() => {
     let cancelled = false;
     const painted = paintedCanvasRef.current;
     const apply = async () => {
       for (const shot of currentShots) {
-        const prev = painted.get(shot.canvasIndex);
+        const prev = painted.get(canvasKey(shot));
         if (prev && prev.src === shot.src && prev.rebuild === rebuildTick && prev.node.isConnected) {
           continue;
         }
@@ -761,12 +817,12 @@ function SessionReplayPlayer({ url }) {
         node.style.backgroundImage = `url("${shot.src}")`;
         node.style.backgroundSize = "100% 100%";
         node.style.backgroundRepeat = "no-repeat";
-        painted.set(shot.canvasIndex, { node, src: shot.src, rebuild: rebuildTick });
+        painted.set(canvasKey(shot), { node, src: shot.src, rebuild: rebuildTick });
       }
-      for (const [canvasIndex, entry] of Array.from(painted.entries())) {
-        if (!currentShots.some((shot) => shot.canvasIndex === canvasIndex)) {
+      for (const [key, entry] of Array.from(painted.entries())) {
+        if (!currentShots.some((shot) => canvasKey(shot) === key)) {
           entry.node.style.backgroundImage = "";
-          painted.delete(canvasIndex);
+          painted.delete(key);
         }
       }
     };