issue-sticker 0.8.1 → 0.9.1

package/dist/{mouse-pointer-2-BR00y3ir.js → three-_bdgDAmI.js}

@@ -2,6 +2,41 @@ import * as React from "react";
 import { useLayoutEffect, forwardRef, createElement } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
+const sources = /* @__PURE__ */ new WeakMap();
+const registrationListeners = /* @__PURE__ */ new Set();
+function onCanvasSourceRegistered(listener) {
+  registrationListeners.add(listener);
+  return () => {
+    registrationListeners.delete(listener);
+  };
+}
+function registerCanvasSource(canvas, source) {
+  const isNew = !sources.has(canvas);
+  sources.set(canvas, source);
+  if (isNew) {
+    registrationListeners.forEach((listener) => {
+      try {
+        listener(canvas);
+      } catch {
+      }
+    });
+  }
+  return () => {
+    if (sources.get(canvas) === source) {
+      sources.delete(canvas);
+    }
+  };
+}
+function getCanvasSource(canvas) {
+  return sources.get(canvas);
+}
+const REPLAY_EVENT_TYPE = {
+  FullSnapshot: 2,
+  IncrementalSnapshot: 3,
+  Meta: 4,
+  Custom: 5
+};
+const CANVAS_INTERACTION_TAG = "issue-sticker:canvas-interaction";
 /*! pako 2.2.0 https://github.com/nodeca/pako @license (MIT AND Zlib) */
 const Z_FIXED$1 = 4;
 const Z_BINARY = 0;
@@ -1893,9 +1928,9 @@ const _has = (obj, key) => {
   return Object.prototype.hasOwnProperty.call(obj, key);
 };
 var assign = function(obj) {
-  const sources = Array.prototype.slice.call(arguments, 1);
-  while (sources.length) {
-    const source = sources.shift();
+  const sources2 = Array.prototype.slice.call(arguments, 1);
+  while (sources2.length) {
+    const source = sources2.shift();
     if (!source) {
       continue;
     }
@@ -15433,6 +15468,42 @@ function inDom(n2) {
   if (!doc) return false;
   return index$2.contains(doc, n2) || shadowHostInDom(n2);
 }
+const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  StyleSheetMirror,
+  get _mirror() {
+    return _mirror;
+  },
+  closestElementOfNode,
+  getBaseDimension,
+  getNestedRule,
+  getPositionsAndIndex,
+  getRootShadowHost,
+  getShadowHost,
+  getWindowHeight,
+  getWindowScroll,
+  getWindowWidth,
+  hasShadowRoot,
+  hookSetter,
+  inDom,
+  isAncestorRemoved,
+  isBlocked,
+  isIgnored,
+  isSerialized,
+  isSerializedIframe,
+  isSerializedStylesheet,
+  iterateResolveTree,
+  legacy_isTouchEvent,
+  get nowTimestamp() {
+    return nowTimestamp;
+  },
+  on,
+  polyfill: polyfill$1,
+  queueToResolveTrees,
+  shadowHostInDom,
+  throttle,
+  uniqueTextMutations
+}, Symbol.toStringTag, { value: "Module" }));
 var EventType = /* @__PURE__ */ ((EventType2) => {
   EventType2[EventType2["DomContentLoaded"] = 0] = "DomContentLoaded";
   EventType2[EventType2["Load"] = 1] = "Load";
@@ -21615,6 +21686,222 @@ class Replayer {
 const { addCustomEvent } = record;
 const { freezePage } = record;
 const { takeFullSnapshot } = record;
+const rrweb = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  EventType,
+  IncrementalSource,
+  MouseInteractions,
+  Replayer,
+  ReplayerEvents,
+  addCustomEvent,
+  canvasMutation,
+  freezePage,
+  get mirror() {
+    return _mirror;
+  },
+  record,
+  takeFullSnapshot,
+  utils
+}, Symbol.toStringTag, { value: "Module" }));
+const threeHandles = /* @__PURE__ */ new WeakMap();
+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 _a2;
+  const three = handle.three;
+  if (!isThreeNamespace(three)) {
+    return null;
+  }
+  const children = (_a2 = handle.scene) == null ? void 0 : _a2.children;
+  if (!Array.isArray(children)) {
+    return null;
+  }
+  try {
+    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 _a3, _b;
+        return ((_a3 = candidate.object) == null ? void 0 : _a3.isMesh) === true && ((_b = candidate.object) == null ? void 0 : _b.visible) !== false && !isHelper(candidate.object);
+      }
+    );
+    return hit ? nameOf(hit.object) : null;
+  } catch {
+    return null;
+  }
+}
+function cameraMatrixOf(handle) {
+  var _a2, _b;
+  const matrix = (_a2 = handle.camera) == null ? void 0 : _a2.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;
+  }
+}
+function threeSourceOf(canvas) {
+  const current = () => threeHandles.get(canvas);
+  return {
+    redraw() {
+      const handle = current();
+      handle == null ? void 0 : handle.renderer.render(handle.scene, handle.camera);
+    },
+    pickTarget(pointer) {
+      const handle = current();
+      return handle ? pickTarget(handle, pointer) : null;
+    },
+    cameraMatrix() {
+      const handle = current();
+      return handle ? cameraMatrixOf(handle) : null;
+    }
+  };
+}
+function registerThreeRenderer(handle) {
+  var _a2;
+  const canvas = (_a2 = handle == null ? void 0 : handle.renderer) == null ? void 0 : _a2.domElement;
+  if (!(canvas instanceof HTMLCanvasElement)) {
+    return () => void 0;
+  }
+  threeHandles.set(canvas, handle);
+  const unregisterSource = registerCanvasSource(canvas, threeSourceOf(canvas));
+  return () => {
+    if (threeHandles.get(canvas) !== handle) return;
+    threeHandles.delete(canvas);
+    unregisterSource();
+  };
+}
+function installThreeAutoDetect() {
+  if (typeof window === "undefined") {
+    return () => void 0;
+  }
+  const holder = window;
+  const restorePatches = [];
+  const observe = (event) => {
+    const detail = event.detail;
+    if ((detail == null ? void 0 : detail.isWebGLRenderer) === true) {
+      observeRenderer(detail, restorePatches);
+    }
+  };
+  const wrap = (hook) => {
+    if (!hook) {
+      return {
+        dispatchEvent(event) {
+          observe(event);
+          return true;
+        }
+      };
+    }
+    const original = hook.dispatchEvent;
+    if (typeof original !== "function" || original.__probed === true) {
+      return hook;
+    }
+    const patched = function(event) {
+      observe(event);
+      return original.call(this, event);
+    };
+    patched.__probed = true;
+    hook.dispatchEvent = patched;
+    restorePatches.push(() => {
+      hook.dispatchEvent = original;
+    });
+    return hook;
+  };
+  const previousDescriptor = Object.getOwnPropertyDescriptor(window, "__THREE_DEVTOOLS__");
+  let current = wrap(holder.__THREE_DEVTOOLS__);
+  Object.defineProperty(window, "__THREE_DEVTOOLS__", {
+    configurable: true,
+    enumerable: true,
+    get: () => current,
+    set: (next) => {
+      current = wrap(next);
+    }
+  });
+  return () => {
+    restorePatches.forEach((restore) => restore());
+    restorePatches.length = 0;
+    const survivor = current;
+    delete window.__THREE_DEVTOOLS__;
+    if (previousDescriptor) {
+      Object.defineProperty(window, "__THREE_DEVTOOLS__", previousDescriptor);
+      return;
+    }
+    if (survivor && !holder.__THREE_DEVTOOLS__) {
+      const isOurs = Object.keys(survivor).length === 1 && "dispatchEvent" in survivor;
+      if (!isOurs) {
+        holder.__THREE_DEVTOOLS__ = survivor;
+      }
+    }
+  };
+}
+function isSceneLike(value) {
+  return (value == null ? void 0 : value.isScene) === true;
+}
+const lastDrawn = /* @__PURE__ */ new WeakMap();
+function observeRenderer(renderer, restorePatches) {
+  queueMicrotask(() => {
+    const owner = Object.prototype.hasOwnProperty.call(renderer, "render") ? renderer : Object.getPrototypeOf(renderer);
+    const original = owner.render;
+    if (typeof original !== "function") {
+      return;
+    }
+    owner.render = function(scene, camera) {
+      const canvas = (this == null ? void 0 : this.domElement) ?? renderer.domElement;
+      if (canvas instanceof HTMLCanvasElement) {
+        lastDrawn.set(canvas, [scene, camera]);
+        if (isSceneLike(scene)) {
+          const existing = threeHandles.get(canvas);
+          if (existing) {
+            existing.scene = scene;
+            existing.camera = camera;
+          } else {
+            registerThreeRenderer({
+              // 강제 렌더는 **앱이 마지막으로 그린 그대로** 다시 그린다. 후처리를 쓰면 화면을
+              // 그리는 것은 풀스크린 쿼드 패스라, 앱의 씬으로 그리면 후처리가 빠진다.
+              // 원본을 부른다 — 우리 래퍼를 다시 타지 않게 한다.
+              renderer: {
+                domElement: canvas,
+                render: (s2, c2) => {
+                  const last = lastDrawn.get(canvas);
+                  return last ? original.call(this, last[0], last[1]) : original.call(this, s2, c2);
+                }
+              },
+              scene,
+              camera
+            });
+          }
+        }
+      }
+      return original.call(this, scene, camera);
+    };
+    restorePatches.push(() => {
+      owner.render = original;
+    });
+  });
+}
 const OVERLAY_LAYER_INDEX = {
   // 익스텐션·SDK 위젯의 shadow host. isolation:isolate 로 stacking context 를 만들기 때문에
   // 아래 레이어 값들은 호스트 내부 순서만 정한다. 호스트 페이지의 오버레이와 겨루는 것은
@@ -27397,40 +27684,50 @@ const MousePointer2 = createLucideIcon("MousePointer2", [
     }
   ]
 ]);
+function registerThree(handle) {
+  return registerThreeRenderer(handle);
+}
+installThreeAutoDetect();
 export {
-  Anchor as A,
-  Content as C,
+  Root2 as A,
+  Anchor as B,
+  CANVAS_INTERACTION_TAG as C,
   DismissableLayer as D,
+  Arrow as E,
+  clsx as F,
+  Root as G,
+  createSlottable as H,
+  rrweb as I,
   MousePointer2 as M,
   OVERLAY_LAYER_INDEX as O,
   Presence as P,
-  Replayer as R,
+  REPLAY_EVENT_TYPE as R,
   Slot as S,
   VISUALLY_HIDDEN_STYLES as V,
   cn as a,
-  usePortalContainer as b,
+  Replayer as b,
   createLucideIcon as c,
-  OVERLAY_LAYER as d,
-  Primitive as e,
-  composeEventHandlers as f,
-  useDismissableLayerSurface as g,
-  useComposedRefs as h,
-  Portal as i,
-  createContextScope as j,
-  createSlot as k,
-  useControllableState as l,
-  useId as m,
-  useLayoutEffect2 as n,
-  useCallbackRef as o,
-  PortalContainerProvider as p,
-  gzip_1 as q,
-  record as r,
+  usePortalContainer as d,
+  OVERLAY_LAYER as e,
+  Primitive as f,
+  composeEventHandlers as g,
+  useDismissableLayerSurface as h,
+  useComposedRefs as i,
+  Portal as j,
+  createContextScope as k,
+  createSlot as l,
+  useControllableState as m,
+  useId as n,
+  useLayoutEffect2 as o,
+  useCallbackRef as p,
+  PortalContainerProvider as q,
+  registerThree as r,
   stopEscapePropagation as s,
-  createPopperScope as t,
+  getCanvasSource as t,
   ungzip_1 as u,
-  Root2 as v,
-  Arrow as w,
-  clsx as x,
-  Root as y,
-  createSlottable as z
+  onCanvasSourceRegistered as v,
+  gzip_1 as w,
+  record as x,
+  Content as y,
+  createPopperScope as z
 };

package/dist/{tooltip-DH02R32-.js → tooltip-UijEbdDX.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { P as Presence, i as Portal$1, w as Arrow, D as DismissableLayer, C as Content, y as Root, h as useComposedRefs, t as createPopperScope, j as createContextScope, z as createSlottable, m as useId, l as useControllableState, v as Root2, A as Anchor, e as Primitive, f as composeEventHandlers, b as usePortalContainer, a as cn, d as OVERLAY_LAYER, s as stopEscapePropagation } from "./mouse-pointer-2-BR00y3ir.js";
+import { P as Presence, j as Portal$1, E as Arrow, D as DismissableLayer, y as Content, G as Root, i as useComposedRefs, z as createPopperScope, k as createContextScope, H as createSlottable, n as useId, m as useControllableState, A as Root2, B as Anchor, f as Primitive, g as composeEventHandlers, d as usePortalContainer, a as cn, e as OVERLAY_LAYER, s as stopEscapePropagation } from "./three-_bdgDAmI.js";
 var [createTooltipContext] = createContextScope("Tooltip", [
   createPopperScope
 ]);

package/headless-react.d.ts

@@ -10,3 +10,29 @@ export interface SessionReplayViewerProps {
 export declare function SessionReplayViewer(
   props: SessionReplayViewerProps
 ): import('react').ReactElement;
+
+/**
+ * three.js 화면을 스크린샷과 세션 리플레이에 담기 위한 연결 지점.
+ *
+ * WebGL 캔버스는 `preserveDrawingBuffer` 기본값이 false 라 합성이 끝나면 드로잉 버퍼가
+ * 비워집니다. 렌더러를 넘기면 캡처 순간에 한 프레임 더 그린 뒤 바로 읽습니다.
+ */
+export interface ThreeRenderTarget {
+  domElement: HTMLCanvasElement;
+  render(scene: unknown, camera: unknown): void;
+}
+
+export interface ThreeHandle {
+  renderer: ThreeRenderTarget;
+  scene: unknown;
+  camera: unknown;
+  /**
+   * 앱이 쓰는 three 네임스페이스(`import * as THREE from 'three'`). 넘기면 캔버스 조작이
+   * 일어날 때 어떤 오브젝트를 눌렀는지 이슈스티커가 직접 계산해 세션 리플레이 로그에
+   * 이름으로 남깁니다.
+   */
+  three?: unknown;
+}
+
+/** three.js 렌더러를 캡처에 등록합니다. 반환값을 부르면 해제됩니다. */
+export declare function registerThree(handle: ThreeHandle): () => void;

package/headless.d.ts

@@ -160,6 +160,7 @@ export interface HeadlessConfig {
   capture?: {
     networkLogs?: boolean;
     consoleLogs?: boolean;
+    socketLogs?: boolean;
     excludeSelectors?: string[];
   };
 }
@@ -329,6 +330,33 @@ export declare class IssueStickerHeadlessError extends Error {
   constructor(code: HeadlessErrorCode, message: string, cause?: unknown);
 }
 
+/**
+ * three.js 화면을 스크린샷에 담기 위한 연결 지점.
+ *
+ * WebGL 캔버스는 `preserveDrawingBuffer` 기본값이 false 라 합성이 끝나면 드로잉 버퍼가
+ * 비워진다. 렌더러를 넘겨 주면 캡처 순간에 한 프레임 더 그린 뒤 바로 읽는다. 변경이 있을
+ * 때만 그리는 앱(편집기·컨피규레이터)은 이 등록이 있어야 WebGL 화면이 찍힌다.
+ */
+export interface ThreeRenderTarget {
+  domElement: HTMLCanvasElement;
+  render(scene: unknown, camera: unknown): void;
+}
+
+export interface ThreeHandle {
+  renderer: ThreeRenderTarget;
+  scene: unknown;
+  camera: unknown;
+  /**
+   * 앱이 쓰는 three 네임스페이스(`import * as THREE from 'three'`). 넘기면 캔버스 조작이
+   * 일어날 때 어떤 오브젝트를 눌렀는지 이슈스티커가 직접 계산해 세션 리플레이 로그에
+   * 이름으로 남깁니다. 넘기지 않으면 이름 없이 화면과 카메라만 남습니다.
+   */
+  three?: unknown;
+}
+
+/** three.js 렌더러를 캡처에 등록한다. 반환값을 부르면 해제된다. */
+export declare function registerThree(handle: ThreeHandle): () => void;
+
 export declare function createIssueStickerHeadless(config: HeadlessConfig): HeadlessClient;
 
 export default createIssueStickerHeadless;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "issue-sticker",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "IssueSticker SDK - Visual bug tracking widget for web applications",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -95,6 +95,8 @@
     "@testing-library/react": "^16.3.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/three": "^0.186.0",
+    "@types/ws": "^8.5.12",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/ui": "^3.2.6",
     "autoprefixer": "^10.4.23",
@@ -105,9 +107,11 @@
     "serve": "^14.2.6",
     "tailwindcss": "^3.4.19",
     "terser": "^5.44.1",
+    "three": "^0.186.0",
     "typescript": "^5.0.0",
     "vite": "^6.4.3",
-    "vitest": "^3.2.6"
+    "vitest": "^3.2.6",
+    "ws": "^8.18.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/react.d.ts

@@ -40,14 +40,42 @@ export interface UseIssueStickerConfig extends SDKConfig {
   enabled?: boolean;
 }
 
+/**
+ * three.js 화면을 스크린샷에 담기 위한 연결 지점.
+ *
+ * WebGL 캔버스는 `preserveDrawingBuffer` 기본값이 false 라 합성이 끝나면 드로잉 버퍼가
+ * 비워진다. 렌더러를 넘겨 주면 캡처 순간에 한 프레임 더 그린 뒤 바로 읽는다. 변경이 있을
+ * 때만 그리는 앱(편집기·컨피규레이터)은 이 등록이 있어야 WebGL 화면이 찍힌다.
+ */
+export interface ThreeRenderTarget {
+  domElement: HTMLCanvasElement;
+  render(scene: unknown, camera: unknown): void;
+}
+
+export interface ThreeHandle {
+  renderer: ThreeRenderTarget;
+  scene: unknown;
+  camera: unknown;
+  /**
+   * 앱이 쓰는 three 네임스페이스(`import * as THREE from 'three'`). 넘기면 캔버스 조작이
+   * 일어날 때 어떤 오브젝트를 눌렀는지 이슈스티커가 직접 계산해 세션 리플레이 로그에
+   * 이름으로 남깁니다. 넘기지 않으면 이름 없이 화면과 카메라만 남습니다.
+   */
+  three?: unknown;
+}
+
 export declare const IssueSticker: {
   init(config: SDKConfig): void;
   updateConfig(config: SDKConfig): void;
   destroy(): void;
   on(event: SDKEvent, callback: (...args: unknown[]) => void): void;
   off(event: SDKEvent, callback: (...args: unknown[]) => void): void;
+  /** three.js 렌더러를 캡처에 등록한다. 반환값을 부르면 해제된다. */
+  registerThree(handle: ThreeHandle): () => void;
 };
 
+export declare function registerThree(handle: ThreeHandle): () => void;
+
 export declare function useIssueSticker(config: UseIssueStickerConfig): void;
 
 export default IssueSticker;