issue-sticker 0.1.1 → 0.2.0

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

@@ -0,0 +1,764 @@
+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-B457EluY.js";
+import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-BkQcdrki.js";
+/**
+ * @license lucide-react v0.468.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Maximize2 = createLucideIcon("Maximize2", [
+  ["polyline", { points: "15 3 21 3 21 9", key: "mznyad" }],
+  ["polyline", { points: "9 21 3 21 3 15", key: "1avn1i" }],
+  ["line", { x1: "21", x2: "14", y1: "3", y2: "10", key: "ota7mn" }],
+  ["line", { x1: "3", x2: "10", y1: "21", y2: "14", key: "1atl0r" }]
+]);
+/**
+ * @license lucide-react v0.468.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const MousePointer2 = createLucideIcon("MousePointer2", [
+  [
+    "path",
+    {
+      d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z",
+      key: "edeuup"
+    }
+  ]
+]);
+/**
+ * @license lucide-react v0.468.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Pause = createLucideIcon("Pause", [
+  ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
+  ["rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", key: "1okwgv" }]
+]);
+/**
+ * @license lucide-react v0.468.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Play = createLucideIcon("Play", [
+  ["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]
+]);
+/**
+ * @license lucide-react v0.468.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const RotateCcw = createLucideIcon("RotateCcw", [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
+]);
+const rrwebStyle = '.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:center center;background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==);border-color:transparent}.replayer-mouse:after{content:"";display:inline-block;width:20px;height:20px;background:#4950f6;border-radius:100%;transform:translate(-50%,-50%);opacity:.3}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-width:4px;border-style:solid;border-radius:100%;margin-left:-37px;margin-top:-37px;border-color:#4950f600;transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}';
+async function loadReplayEvents(url) {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`리플레이 다운로드 실패: ${res.status}`);
+  }
+  const buffer = await res.arrayBuffer();
+  const json = ungzip_1(new Uint8Array(buffer), { to: "string" });
+  const parsed = JSON.parse(json);
+  if (!Array.isArray(parsed)) {
+    throw new Error("리플레이 데이터 형식이 올바르지 않습니다.");
+  }
+  return parsed;
+}
+const EVENT_TYPE_INCREMENTAL = 3;
+const EVENT_TYPE_META = 4;
+const SOURCE_MOUSE_INTERACTION = 2;
+const SOURCE_INPUT = 5;
+const MOUSE_CLICK = 2;
+function deriveTimeline(events) {
+  var _a;
+  const list = events;
+  const startTime = list.length ? Number(((_a = list[0]) == null ? void 0 : _a.timestamp) ?? 0) : 0;
+  let recordedWidth = 0;
+  let recordedHeight = 0;
+  let seenFirstMeta = false;
+  const out = [];
+  for (const ev of list) {
+    const ts = Number((ev == null ? void 0 : ev.timestamp) ?? 0);
+    const t = ts - startTime;
+    const data = (ev == null ? void 0 : ev.data) ?? {};
+    if ((ev == null ? void 0 : ev.type) === EVENT_TYPE_META) {
+      if (!seenFirstMeta) {
+        seenFirstMeta = true;
+        recordedWidth = Number(data.width ?? 0);
+        recordedHeight = Number(data.height ?? 0);
+        continue;
+      }
+      out.push({ t, type: "nav", href: String(data.href ?? "") });
+      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) });
+      } else if (source === SOURCE_INPUT) {
+        out.push({ t, type: "input", nodeId: Number(data.id) });
+      }
+    }
+  }
+  return { startTime, recordedWidth, recordedHeight, events: out };
+}
+const WIDGET_HOST_HTML_ID = "issue-sticker-host";
+const EVENT_FULL_SNAPSHOT = 2;
+const EVENT_INCREMENTAL = 3;
+const NODE_ELEMENT = 2;
+const SOURCE_MUTATION = 0;
+const SOURCE_MOUSE_MOVE = 1;
+function asNode(value) {
+  return value && typeof value === "object" ? value : null;
+}
+function asRecord(value) {
+  return value && typeof value === "object" ? value : {};
+}
+function isWidgetHost(node) {
+  var _a;
+  return node.type === NODE_ELEMENT && ((_a = node.attributes) == null ? void 0 : _a.id) === WIDGET_HOST_HTML_ID;
+}
+function collectIds(node, into) {
+  const n = asNode(node);
+  if (!n) return;
+  if (typeof n.id === "number") into.add(n.id);
+  for (const child of Array.isArray(n.childNodes) ? n.childNodes : []) {
+    collectIds(child, into);
+  }
+}
+function pruneTree(node, widgetIds) {
+  const n = asNode(node);
+  if (!n || !Array.isArray(n.childNodes)) return node;
+  const kept = [];
+  let changed = false;
+  for (const child of n.childNodes) {
+    const c = asNode(child);
+    if (c && isWidgetHost(c)) {
+      collectIds(c, widgetIds);
+      changed = true;
+      continue;
+    }
+    const prunedChild = pruneTree(child, widgetIds);
+    if (prunedChild !== child) changed = true;
+    kept.push(prunedChild);
+  }
+  return changed ? { ...n, childNodes: kept } : node;
+}
+function filterById(list, idOf, widgetIds) {
+  if (!Array.isArray(list)) return null;
+  const entries = list;
+  const kept = entries.filter((entry) => {
+    const id = idOf(entry);
+    return id === void 0 || !widgetIds.has(id);
+  });
+  return { list: kept, changed: kept.length !== entries.length };
+}
+function num(value) {
+  return typeof value === "number" ? value : void 0;
+}
+function stripAdds(adds, widgetIds) {
+  if (!Array.isArray(adds)) return null;
+  const kept = [];
+  let changed = false;
+  for (const raw of adds) {
+    const add = asRecord(raw);
+    const node = asNode(add.node);
+    const parentId = num(add.parentId);
+    if (node && isWidgetHost(node)) {
+      collectIds(node, widgetIds);
+      changed = true;
+      continue;
+    }
+    if (parentId !== void 0 && widgetIds.has(parentId)) {
+      if (node) collectIds(node, widgetIds);
+      changed = true;
+      continue;
+    }
+    kept.push(raw);
+  }
+  return { list: kept, changed };
+}
+function stripMutation(data, widgetIds) {
+  const next = { ...data };
+  let changed = false;
+  const adds = stripAdds(data.adds, widgetIds);
+  if (adds == null ? void 0 : adds.changed) {
+    next.adds = adds.list;
+    changed = true;
+  }
+  for (const key of ["removes", "texts", "attributes"]) {
+    const result = filterById(
+      data[key],
+      (entry) => num(entry.id),
+      widgetIds
+    );
+    if (result == null ? void 0 : result.changed) {
+      next[key] = result.list;
+      changed = true;
+    }
+  }
+  if (!changed) return data;
+  const isEmpty = ["adds", "removes", "texts", "attributes"].every((key) => {
+    const list = next[key];
+    return !Array.isArray(list) || list.length === 0;
+  });
+  return isEmpty ? null : next;
+}
+function stripWidgetEvents(events) {
+  const widgetIds = /* @__PURE__ */ new Set();
+  const out = [];
+  let removedEvents = 0;
+  for (const event of events) {
+    const ev = event;
+    if ((ev == null ? void 0 : ev.type) === EVENT_FULL_SNAPSHOT) {
+      const data2 = asRecord(ev.data);
+      const pruned = pruneTree(data2.node, widgetIds);
+      out.push(pruned === data2.node ? event : { ...ev, data: { ...data2, node: pruned } });
+      continue;
+    }
+    if ((ev == null ? void 0 : ev.type) !== EVENT_INCREMENTAL) {
+      out.push(event);
+      continue;
+    }
+    const data = asRecord(ev.data);
+    const source = num(data.source);
+    if (source === SOURCE_MUTATION) {
+      const next = stripMutation(data, widgetIds);
+      if (next === null) {
+        removedEvents += 1;
+        continue;
+      }
+      out.push(next === data ? event : { ...ev, data: next });
+      continue;
+    }
+    if (source === SOURCE_MOUSE_MOVE) {
+      const positions = filterById(
+        data.positions,
+        (entry) => num(entry.id),
+        widgetIds
+      );
+      if (!(positions == null ? void 0 : positions.changed)) {
+        out.push(event);
+        continue;
+      }
+      if (positions.list.length === 0) {
+        removedEvents += 1;
+        continue;
+      }
+      out.push({ ...ev, data: { ...data, positions: positions.list } });
+      continue;
+    }
+    const id = num(data.id);
+    if (id !== void 0 && widgetIds.has(id)) {
+      removedEvents += 1;
+      continue;
+    }
+    out.push(event);
+  }
+  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,
+  strokeStyle: "rgb(239, 68, 68)"
+};
+const INITIAL_SHOW_TRAIL = true;
+const SKIP_MS = 5e3;
+const TYPE_DOT = {
+  click: "bg-brand",
+  input: "bg-success",
+  nav: "bg-text-tertiary"
+};
+function formatTime(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const m = Math.floor(total / 60);
+  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
+}) {
+  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: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-text-primary", children: "이벤트 로그" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-tertiary", children: [
+        "전체 ",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 border-b border-line-subtle px-3 py-2", children: ["all", "click", "input", "nav"].map((f) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onFilterChange(f),
+        className: cn(
+          "rounded-full border px-2 py-0.5 text-xs",
+          filter === f ? "border-text-primary bg-text-primary text-text-inverse" : "border-line-subtle text-text-secondary"
+        ),
+        children: f === "all" ? "전체" : TYPE_LABEL[f]
+      },
+      f
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: filtered.map((row) => {
+      const isCurrent = row.index === currentIndex;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSeek(row.t),
+          className: cn(
+            "flex w-full items-center gap-2 border-b border-line-subtle px-3 py-2 text-left text-xs hover:bg-surface-2",
+            isCurrent && "bg-success-subtle"
+          ),
+          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: "shrink-0 text-text-tertiary", children: TYPE_LABEL[row.type] })
+          ]
+        },
+        `${row.t}-${row.index}`
+      );
+    }) })
+  ] });
+});
+function SessionReplayPlayer({ url }) {
+  const rootRef = useRef(null);
+  const hostRef = useRef(null);
+  const stageRef = useRef(null);
+  const replayerRef = useRef(null);
+  const startedRef = useRef(false);
+  const rafRef = useRef(null);
+  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);
+  const [durationMs, setDurationMs] = useState(0);
+  const [currentMs, setCurrentMs] = useState(0);
+  const [timeline, setTimeline] = useState([]);
+  const [logRows, setLogRows] = useState([]);
+  const [filter, setFilter] = useState("all");
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [widgetStripped, setWidgetStripped] = useState(false);
+  const applyDuration = (ms) => {
+    durationRef.current = ms;
+    setDurationMs(ms);
+  };
+  const applyIsPlaying = (v) => {
+    isPlayingRef.current = v;
+    setIsPlaying(v);
+  };
+  const stopRaf = useCallback(() => {
+    if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    rafRef.current = null;
+  }, []);
+  const startRaf = useCallback(() => {
+    stopRaf();
+    const tick = () => {
+      const r = replayerRef.current;
+      if (r) setCurrentMs(Math.min(r.getCurrentTime(), durationRef.current));
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+  }, [stopRaf]);
+  useEffect(() => {
+    let cancelled = false;
+    setState("loading");
+    applyIsPlaying(false);
+    setShowTrail(INITIAL_SHOW_TRAIL);
+    showTrailRef.current = INITIAL_SHOW_TRAIL;
+    mirrorRef.current = null;
+    setCurrentMs(0);
+    startedRef.current = false;
+    (async () => {
+      var _a;
+      try {
+        const loaded = await loadReplayEvents(url);
+        if (cancelled) return;
+        const { events, stripped } = stripWidgetEvents(loaded);
+        if (!hostRef.current || events.length < 2) {
+          setState("empty");
+          return;
+        }
+        setWidgetStripped(stripped);
+        const derived = deriveTimeline(events);
+        const host = hostRef.current;
+        let shadow = host.shadowRoot;
+        if (!shadow) {
+          shadow = host.attachShadow({ mode: "open" });
+          const styleEl = document.createElement("style");
+          styleEl.textContent = typeof rrwebStyle === "string" ? rrwebStyle : "";
+          shadow.appendChild(styleEl);
+        }
+        (_a = stageRef.current) == null ? void 0 : _a.remove();
+        const stage = document.createElement("div");
+        if (derived.recordedWidth > 0) {
+          const recW = derived.recordedWidth;
+          const recH = derived.recordedHeight || derived.recordedWidth;
+          stage.style.setProperty("--recorded-w", `${recW}px`);
+          stage.style.setProperty("--recorded-h", `${recH}px`);
+          stage.style.position = "absolute";
+          stage.style.left = "50%";
+          stage.style.top = "50%";
+          stage.style.transformOrigin = "center";
+          stage.style.transform = "translate(-50%, -50%) scale(min(tan(atan2(100cqw, var(--recorded-w))), tan(atan2(100cqh, var(--recorded-h)))))";
+          host.style.aspectRatio = `${recW} / ${recH}`;
+          host.style.containerType = "size";
+        }
+        shadow.appendChild(stage);
+        stageRef.current = stage;
+        const replayer = new Replayer(
+          events,
+          {
+            root: stage,
+            speed: 1,
+            showWarning: false,
+            mouseTail: INITIAL_SHOW_TRAIL ? MOUSE_TAIL_CONFIG : false
+          }
+        );
+        replayer.on("finish", () => {
+          if (cancelled) return;
+          applyIsPlaying(false);
+          startedRef.current = false;
+          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,
+          index: i
+        }));
+        setLogRows(rows);
+        setState("ready");
+      } catch {
+        if (!cancelled) setState("error");
+      }
+    })();
+    return () => {
+      var _a, _b;
+      cancelled = true;
+      stopRaf();
+      try {
+        (_b = (_a = replayerRef.current) == null ? void 0 : _a.destroy) == null ? void 0 : _b.call(_a);
+      } catch {
+      }
+      replayerRef.current = null;
+    };
+  }, [url]);
+  useEffect(() => {
+    const onChange = () => setIsFullscreen(document.fullscreenElement === rootRef.current);
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, []);
+  const seek = useCallback((ms) => {
+    const r = replayerRef.current;
+    if (!r) return;
+    const clamped = Math.max(0, Math.min(ms, durationRef.current));
+    if (isPlayingRef.current) r.play(clamped);
+    else r.pause(clamped);
+    startedRef.current = true;
+    setCurrentMs(clamped);
+  }, []);
+  const togglePlay = useCallback(() => {
+    const r = replayerRef.current;
+    if (!r) return;
+    if (isPlayingRef.current) {
+      r.pause();
+      applyIsPlaying(false);
+      stopRaf();
+    } else {
+      r.play(startedRef.current ? r.getCurrentTime() : 0);
+      startedRef.current = true;
+      applyIsPlaying(true);
+      startRaf();
+    }
+  }, [stopRaf, startRaf]);
+  const restart = useCallback(() => {
+    const r = replayerRef.current;
+    if (!r) return;
+    r.play(0);
+    startedRef.current = true;
+    applyIsPlaying(true);
+    startRaf();
+  }, [startRaf]);
+  const setSpeed = useCallback((speed) => {
+    var _a;
+    return (_a = replayerRef.current) == null ? void 0 : _a.setConfig({ speed });
+  }, []);
+  const toggleTrail = useCallback(() => {
+    var _a;
+    const next = !showTrailRef.current;
+    showTrailRef.current = next;
+    setShowTrail(next);
+    (_a = replayerRef.current) == null ? void 0 : _a.setConfig({ mouseTail: next ? MOUSE_TAIL_CONFIG : false });
+  }, []);
+  const toggleFullscreen = useCallback(() => {
+    var _a, _b;
+    if (document.fullscreenElement === rootRef.current) document.exitFullscreen();
+    else (_b = (_a = rootRef.current) == null ? void 0 : _a.requestFullscreen) == null ? void 0 : _b.call(_a);
+  }, []);
+  const onKeyDown = useCallback(
+    (e) => {
+      const target = e.target;
+      if (target.closest('button, input, select, textarea, a, [role="switch"]')) return;
+      if (e.code === "Space") {
+        e.preventDefault();
+        togglePlay();
+      } else if (e.code === "ArrowLeft") {
+        e.preventDefault();
+        seek(currentMs - SKIP_MS);
+      } else if (e.code === "ArrowRight") {
+        e.preventDefault();
+        seek(currentMs + SKIP_MS);
+      } else if (e.code === "KeyF") {
+        e.preventDefault();
+        toggleFullscreen();
+      }
+    },
+    [togglePlay, seek, currentMs, toggleFullscreen]
+  );
+  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: "리플레이를 불러오지 못했어요." });
+  }
+  if (state === "empty") {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "재생할 리플레이 데이터가 없어요." });
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      tabIndex: 0,
+      onKeyDown,
+      "data-testid": "session-replay-player",
+      className: cn(
+        "grid min-w-0 gap-3.5 outline-none md:grid-cols-[minmax(0,1fr)_minmax(260px,340px)]",
+        isFullscreen && "h-full w-full content-center overflow-hidden bg-surface-1 p-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+          state === "loading" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "리플레이 불러오는 중…" }) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: hostRef,
+              "data-testid": "session-replay-host",
+              className: "overflow-hidden rounded-t-md border border-line-subtle bg-surface-2",
+              style: { position: "relative", maxHeight: "80vh" }
+            }
+          ),
+          state === "ready" ? /* @__PURE__ */ jsxs("div", { className: "rounded-b-md border border-t-0 border-line-subtle bg-surface-1 px-3 pb-3 pt-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative mb-2 h-6", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  "aria-label": "재생 위치",
+                  min: 0,
+                  max: durationMs,
+                  value: currentMs,
+                  onChange: (e) => seek(Number(e.target.value)),
+                  className: "absolute inset-x-0 top-2 w-full accent-brand"
+                }
+              ),
+              durationMs > 0 ? timeline.map((ev, i) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${TYPE_LABEL[ev.type]} 지점으로 이동`,
+                  onClick: () => seek(ev.t),
+                  style: { left: `${ev.t / durationMs * 100}%` },
+                  className: cn(
+                    "absolute top-0 h-3 w-0.5 -translate-x-1/2 rounded-sm",
+                    TYPE_DOT[ev.type]
+                  )
+                },
+                i
+              )) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+              /* @__PURE__ */ jsx(
+                ControlButton,
+                {
+                  tip: "재생 / 일시정지 · Space",
+                  onClick: togglePlay,
+                  primary: true,
+                  label: isPlaying ? "일시정지" : "재생",
+                  children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(ControlButton, { tip: "처음부터", onClick: restart, label: "처음부터", children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-3.5 w-3.5" }) }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-text-secondary", children: [
+                formatTime(currentMs),
+                " / ",
+                formatTime(durationMs)
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+              /* @__PURE__ */ jsx("div", { className: "flex overflow-hidden rounded-md border border-line-subtle", children: [1, 2, 4].map((s) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSpeed(s),
+                  className: "px-2 py-1 text-xs text-text-secondary hover:bg-surface-2",
+                  children: [
+                    s,
+                    "x"
+                  ]
+                },
+                s
+              )) }),
+              /* @__PURE__ */ jsx(
+                ControlButton,
+                {
+                  tip: "마우스 궤적",
+                  onClick: toggleTrail,
+                  active: showTrail,
+                  label: "마우스 궤적",
+                  pressed: showTrail,
+                  children: /* @__PURE__ */ jsx(MousePointer2, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(ControlButton, { tip: "전체화면 · F", onClick: toggleFullscreen, label: "전체화면", children: /* @__PURE__ */ jsx(Maximize2, { className: "h-3.5 w-3.5" }) })
+            ] }),
+            widgetStripped ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-text-tertiary", children: "이슈스티커 위젯(버튼·이슈 생성 폼)은 재생에서 제외했습니다." }) : null
+          ] }) : null
+        ] }),
+        state === "ready" ? /* @__PURE__ */ jsx("div", { className: "relative min-h-0 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx(
+          EventLog,
+          {
+            rows: logRows,
+            currentIndex,
+            filter,
+            onFilterChange: setFilter,
+            onSeek: seek,
+            total: timeline.length,
+            mirror: mirrorRef.current
+          }
+        ) }) }) : null
+      ]
+    }
+  ) });
+}
+function ControlButton({
+  tip,
+  label,
+  onClick,
+  children,
+  primary,
+  active,
+  pressed
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        "aria-pressed": pressed,
+        onClick,
+        className: cn(
+          "inline-flex h-[30px] w-[30px] items-center justify-center rounded-md border",
+          primary ? "border-brand bg-brand text-brand-fg" : active ? "border-success text-success" : "border-line-subtle text-text-secondary hover:bg-surface-2"
+        ),
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tip })
+  ] });
+}
+function resolveSessionReplayUrl(issue) {
+  var _a;
+  const directUrl = issue == null ? void 0 : issue.session_replay_url;
+  if (typeof directUrl === "string" && directUrl.trim()) {
+    return directUrl;
+  }
+  const nestedUrl = (_a = issue == null ? void 0 : issue.session_replay) == null ? void 0 : _a.url;
+  return typeof nestedUrl === "string" && nestedUrl.trim() ? nestedUrl : null;
+}
+function SessionReplayViewer({ issue }) {
+  const url = resolveSessionReplayUrl(issue);
+  if (!url) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "첨부된 세션 리플레이가 없습니다." });
+  }
+  return /* @__PURE__ */ jsx(SessionReplayPlayer, { url });
+}
+export {
+  SessionReplayViewer
+};