issue-sticker 0.8.1 → 0.9.0

package/dist/{tooltip-DH02R32-.js → tooltip-BBukUPo_.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, i as Portal$1, W as Arrow, D as DismissableLayer, S as Content, _ as Root, h as useComposedRefs, T as createPopperScope, j as createContextScope, $ as createSlottable, m as useId, l as useControllableState, U as Root2, V as Anchor, e as Primitive, f as composeEventHandlers, b as usePortalContainer, a as cn, d as OVERLAY_LAYER, s as stopEscapePropagation } from "./three-B7nbYqGK.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.0",
   "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;