issue-sticker 0.3.1 → 0.5.0

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useRef, useState, useCallback, useEffect } from "react";
-import { c as createLucideIcon, u as ungzip_1, a as cn, R as Replayer } from "./createLucideIcon-CmSNiW63.js";
-import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-DciWyUWs.js";
+import { c as createLucideIcon, u as ungzip_1, a as cn, R as Replayer } from "./createLucideIcon-BzRMP02h.js";
+import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-B6UPO-U8.js";
 /**
  * @license lucide-react v0.468.0 - ISC
  *
@@ -72,8 +72,107 @@ async function loadReplayEvents(url) {
   }
   return parsed;
 }
+const TYPE_LABEL = {
+  click: "클릭",
+  input: "입력",
+  nav: "이동"
+};
+const NODE_TYPE_ELEMENT = 2;
+const NODE_TYPE_TEXT = 3;
+class NodeIndex {
+  constructor() {
+    this.nodes = /* @__PURE__ */ new Map();
+  }
+  /**
+   * 색인을 비우고 주어진 트리로 다시 채운다.
+   *
+   * FullSnapshot 마다 호출한다. rrweb 은 문서마다 `record()` 를 새로 돌리며 nodeId 를
+   * 1부터 다시 매기므로, 문서가 바뀌면 앞 문서의 색인이 남아 있으면 안 된다 — 남으면
+   * 같은 id 의 엉뚱한 요소 이름이 조용히 붙는다.
+   */
+  reset(root) {
+    this.nodes = /* @__PURE__ */ new Map();
+    if (root) this.add(root);
+  }
+  /** 노드와 그 하위 트리를 색인에 넣는다. `parentId` 를 주면 부모의 자식으로도 잇는다. */
+  add(node, parentId) {
+    var _a;
+    if (!node || typeof node.id !== "number") return;
+    this.nodes.set(node.id, { node, childIds: [] });
+    if (parentId !== void 0) {
+      (_a = this.nodes.get(parentId)) == null ? void 0 : _a.childIds.push(node.id);
+    }
+    for (const child of node.childNodes ?? []) {
+      this.add(child, node.id);
+    }
+  }
+  get(id) {
+    var _a;
+    return (_a = this.nodes.get(id)) == null ? void 0 : _a.node;
+  }
+  /** 직접 자식 노드들. 트리 안의 childNodes 와 mutation 으로 붙은 것을 함께 본다. */
+  childrenOf(id) {
+    const entry = this.nodes.get(id);
+    if (!entry) return [];
+    const fromTree = entry.node.childNodes ?? [];
+    const fromMutation = entry.childIds.map((childId) => {
+      var _a;
+      return (_a = this.nodes.get(childId)) == null ? void 0 : _a.node;
+    }).filter((n) => n !== void 0 && !fromTree.includes(n));
+    return [...fromTree, ...fromMutation];
+  }
+  /** 하위 텍스트를 모두 이어 붙인다. button·a 같은 리프 레이블용. */
+  deepText(id, depth = 0) {
+    if (depth > 10) return "";
+    const node = this.get(id);
+    if (!node) return "";
+    if (node.type === NODE_TYPE_TEXT) return node.textContent ?? "";
+    return this.childrenOf(id).map(
+      (child) => child.type === NODE_TYPE_TEXT ? child.textContent ?? "" : typeof child.id === "number" ? this.deepText(child.id, depth + 1) : ""
+    ).join("");
+  }
+  /**
+   * 상호작용 대상을 사람이 읽을 짧은 레이블로 바꾼다. 우선순위는 다음과 같다.
+   *  1. aria-label / title
+   *  2. form 컨트롤: placeholder → name → type (예: input[email])
+   *  3. 직접 자식 Text 노드만 결합 (컨테이너가 자손 텍스트를 통째로 빨아들이는 것 방지)
+   *  4. button / a: 하위 텍스트 전체 (리프 레이블이라 짧다)
+   *  5. 압축 셀렉터: tag.firstClass 또는 <tag>
+   *
+   * 40자로 자른다. 색인에 없으면 `TYPE_LABEL[type]` 폴백.
+   */
+  describe(id, type) {
+    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 ?? {};
+    const attr = (name) => {
+      const value = attrs[name];
+      return typeof value === "string" ? value : "";
+    };
+    const ariaLabel = (attr("aria-label") || attr("title")).trim();
+    if (ariaLabel) return ariaLabel.slice(0, 40);
+    const tag = (node.tagName ?? "").toLowerCase();
+    if (tag === "input" || tag === "textarea" || tag === "select") {
+      const placeholder = tag === "select" ? "" : attr("placeholder");
+      const name = attr("name");
+      const inputType = tag === "input" ? attr("type") : "";
+      const label = placeholder || name || (inputType ? `${tag}[${inputType}]` : tag);
+      return label.trim().slice(0, 40);
+    }
+    const directText = this.childrenOf(id).filter((child) => child.type === NODE_TYPE_TEXT).map((child) => child.textContent ?? "").join("").trim().replace(/\s+/g, " ");
+    if (directText) return directText.slice(0, 40);
+    if (tag === "button" || tag === "a") {
+      const deep = this.deepText(id).trim().replace(/\s+/g, " ");
+      if (deep) return deep.slice(0, 40);
+    }
+    const firstClass = attr("class").trim().split(/\s+/)[0];
+    return (firstClass ? `${tag}.${firstClass}` : `<${tag}>`).slice(0, 40);
+  }
+}
+const EVENT_TYPE_FULL_SNAPSHOT = 2;
 const EVENT_TYPE_INCREMENTAL = 3;
 const EVENT_TYPE_META = 4;
+const SOURCE_MUTATION$1 = 0;
 const SOURCE_MOUSE_INTERACTION = 2;
 const SOURCE_INPUT = 5;
 const MOUSE_CLICK = 2;
@@ -85,6 +184,7 @@ function deriveTimeline(events) {
   let recordedHeight = 0;
   let seenFirstMeta = false;
   const out = [];
+  const index = new NodeIndex();
   for (const ev of list) {
     const ts = Number((ev == null ? void 0 : ev.timestamp) ?? 0);
     const t = ts - startTime;
@@ -96,15 +196,26 @@ function deriveTimeline(events) {
         recordedHeight = Number(data.height ?? 0);
         continue;
       }
-      out.push({ t, type: "nav", href: String(data.href ?? "") });
+      const href = String(data.href ?? "");
+      out.push({ t, type: "nav", href, label: href || TYPE_LABEL.nav });
+      continue;
+    }
+    if ((ev == null ? void 0 : ev.type) === EVENT_TYPE_FULL_SNAPSHOT) {
+      index.reset(data.node);
       continue;
     }
     if ((ev == null ? void 0 : ev.type) === EVENT_TYPE_INCREMENTAL) {
       const source = Number(data.source);
-      if (source === SOURCE_MOUSE_INTERACTION && Number(data.type) === MOUSE_CLICK) {
-        out.push({ t, type: "click", nodeId: Number(data.id) });
+      if (source === SOURCE_MUTATION$1) {
+        for (const add of data.adds ?? []) {
+          index.add(add == null ? void 0 : add.node, add == null ? void 0 : add.parentId);
+        }
+      } else if (source === SOURCE_MOUSE_INTERACTION && Number(data.type) === MOUSE_CLICK) {
+        const nodeId = Number(data.id);
+        out.push({ t, type: "click", nodeId, label: index.describe(nodeId, "click") });
       } else if (source === SOURCE_INPUT) {
-        out.push({ t, type: "input", nodeId: Number(data.id) });
+        const nodeId = Number(data.id);
+        out.push({ t, type: "input", nodeId, label: index.describe(nodeId, "input") });
       }
     }
   }
@@ -265,38 +376,6 @@ function stripWidgetEvents(events) {
   }
   return { events: out, stripped: widgetIds.size > 0, removedEvents };
 }
-const TYPE_LABEL = {
-  click: "클릭",
-  input: "입력",
-  nav: "이동"
-};
-function describeNode(el, type) {
-  if (!el) return TYPE_LABEL[type];
-  const ariaLabel = (el.getAttribute("aria-label") ?? el.getAttribute("title") ?? "").trim();
-  if (ariaLabel) return ariaLabel.slice(0, 40);
-  const tag = el.tagName.toLowerCase();
-  if (tag === "input" || tag === "textarea" || tag === "select") {
-    const placeholder = tag !== "select" ? el.placeholder ?? "" : "";
-    const name = el.name ?? "";
-    const inputType = tag === "input" ? el.type ?? "" : "";
-    const label = placeholder || name || (inputType ? `${tag}[${inputType}]` : tag);
-    return label.trim().slice(0, 40);
-  }
-  let directText = "";
-  for (const child of Array.from(el.childNodes)) {
-    if (child.nodeType === Node.TEXT_NODE) {
-      directText += child.textContent ?? "";
-    }
-  }
-  directText = directText.trim().replace(/\s+/g, " ");
-  if (directText) return directText.slice(0, 40);
-  if (tag === "button" || tag === "a") {
-    const text = (el.textContent ?? "").trim().replace(/\s+/g, " ");
-    if (text) return text.slice(0, 40);
-  }
-  const firstClass = el.classList.item(0);
-  return (firstClass ? `${tag}.${firstClass}` : `<${tag}>`).slice(0, 40);
-}
 const MOUSE_TAIL_CONFIG = {
   lineCap: "round",
   lineWidth: 3,
@@ -315,36 +394,14 @@ function formatTime(ms) {
   const s = total % 60;
   return `${m}:${s.toString().padStart(2, "0")}`;
 }
-function describeEvent(mirror, ev) {
-  if (ev.type === "nav") return ev.href || TYPE_LABEL.nav;
-  const node = ev.nodeId != null && mirror ? mirror.getNode(ev.nodeId) : null;
-  return describeNode(node, ev.type);
-}
-function resolveLabel(mirror, row, cache) {
-  if (row.type === "nav") return row.href || TYPE_LABEL.nav;
-  if (row.nodeId == null) return TYPE_LABEL[row.type];
-  const cached = cache.get(row.nodeId);
-  if (cached !== void 0) return cached;
-  const label = describeEvent(mirror, row);
-  if (label !== TYPE_LABEL[row.type]) cache.set(row.nodeId, label);
-  return label;
-}
 const EventLog = memo(function EventLog2({
   rows,
   currentIndex,
   filter,
   onFilterChange,
   onSeek,
-  total,
-  mirror
+  total
 }) {
-  const labelCacheRef = useRef(/* @__PURE__ */ new Map());
-  const prevRowsRef = useRef(rows);
-  if (prevRowsRef.current !== rows) {
-    prevRowsRef.current = rows;
-    labelCacheRef.current = /* @__PURE__ */ new Map();
-  }
-  const labelCache = labelCacheRef.current;
   const filtered = filter === "all" ? rows : rows.filter((r) => r.type === filter);
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col rounded-md border border-line-subtle bg-surface-1", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-line-subtle px-3 py-2.5", children: [
@@ -381,7 +438,7 @@ const EventLog = memo(function EventLog2({
           children: [
             /* @__PURE__ */ jsx("span", { className: "w-9 shrink-0 tabular-nums text-text-tertiary", children: formatTime(row.t) }),
             /* @__PURE__ */ jsx("span", { className: cn("h-2 w-2 shrink-0 rounded-sm", TYPE_DOT[row.type]) }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-text-secondary", children: resolveLabel(mirror, row, labelCache) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-text-secondary", children: row.label }),
             /* @__PURE__ */ jsx("span", { className: "shrink-0 text-text-tertiary", children: TYPE_LABEL[row.type] })
           ]
         },
@@ -400,7 +457,6 @@ function SessionReplayPlayer({ url }) {
   const durationRef = useRef(0);
   const isPlayingRef = useRef(false);
   const showTrailRef = useRef(INITIAL_SHOW_TRAIL);
-  const mirrorRef = useRef(null);
   const [state, setState] = useState("loading");
   const [isPlaying, setIsPlaying] = useState(false);
   const [showTrail, setShowTrail] = useState(INITIAL_SHOW_TRAIL);
@@ -438,7 +494,6 @@ function SessionReplayPlayer({ url }) {
     applyIsPlaying(false);
     setShowTrail(INITIAL_SHOW_TRAIL);
     showTrailRef.current = INITIAL_SHOW_TRAIL;
-    mirrorRef.current = null;
     setCurrentMs(0);
     startedRef.current = false;
     (async () => {
@@ -463,6 +518,7 @@ function SessionReplayPlayer({ url }) {
         }
         (_a = stageRef.current) == null ? void 0 : _a.remove();
         const stage = document.createElement("div");
+        stage.style.pointerEvents = "none";
         if (derived.recordedWidth > 0) {
           const recW = derived.recordedWidth;
           const recH = derived.recordedHeight || derived.recordedWidth;
@@ -494,15 +550,13 @@ function SessionReplayPlayer({ url }) {
           stopRaf();
         });
         replayerRef.current = replayer;
-        mirrorRef.current = replayer.getMirror();
         setTimeline(derived.events);
         const totalTime = replayer.getMetaData().totalTime;
         applyDuration(totalTime);
         const rows = derived.events.map((ev, i) => ({
           t: ev.t,
           type: ev.type,
-          nodeId: ev.nodeId,
-          href: ev.href,
+          label: ev.label,
           index: i
         }));
         setLogRows(rows);
@@ -596,10 +650,10 @@ function SessionReplayPlayer({ url }) {
   );
   const currentIndex = logRows.reduce((acc, row) => row.t <= currentMs ? row.index : acc, -1);
   if (state === "error") {
-    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "리플레이를 불러오지 못했어요." });
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "리플레이를 불러오지 못했습니다." });
   }
   if (state === "empty") {
-    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "재생할 리플레이 데이터가 없어요." });
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "재생할 리플레이 데이터가 없습니다." });
   }
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
     "div",
@@ -620,7 +674,11 @@ function SessionReplayPlayer({ url }) {
             {
               ref: hostRef,
               "data-testid": "session-replay-host",
-              className: "overflow-hidden rounded-t-md border border-line-subtle bg-surface-2",
+              onClick: state === "ready" ? togglePlay : void 0,
+              className: cn(
+                "overflow-hidden rounded-t-md border border-line-subtle bg-surface-2",
+                state === "ready" && "cursor-pointer"
+              ),
               style: { position: "relative", maxHeight: "80vh" }
             }
           ),
@@ -708,8 +766,7 @@ function SessionReplayPlayer({ url }) {
             filter,
             onFilterChange: setFilter,
             onSeek: seek,
-            total: timeline.length,
-            mirror: mirrorRef.current
+            total: timeline.length
           }
         ) }) }) : null
       ]