@solhun/feedback-kit-web 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -105,10 +105,19 @@ interface ElementPickingOpts {
         width: number;
         height: number;
     };
+    /**
+     * 요소를 고르면 호출된다. 주면 **인라인 팝업 대신 이걸 부른다** —
+     * 호스트가 리포트 모달을 열어 스크린샷·우선순위까지 받게 하기 위해서다.
+     *
+     * 모드는 켜진 채로 둔다. 한 번 켜고 여러 요소를 연달아 지목하는 게 이 모드의 목적이라,
+     * 요소 하나 고를 때마다 모드가 꺼지면 매번 다시 켜야 한다.
+     */
+    onPick?: (element: ElementInfo | null, point: FeedbackPin) => void;
 }
 declare class ElementPickingController {
     private readonly queue;
     private readonly createReport;
+    private readonly onPick;
     private readonly store;
     private readonly getPathname;
     private readonly doc;
@@ -152,6 +161,12 @@ declare class ElementPickingController {
     setAnnotationComment(value: string): void;
     /** 취소 — 마커도 제보도 남기지 않는다. 모드는 켜진 채로 둔다. */
     cancelAnnotation(): void;
+    /**
+     * 제출된 제보를 마커로 남긴다. 모달 경로에서 쓴다 — 마커 생성이 팝업 저장 안에만
+     * 있으면, 리포트 모달로 보낸 지목 제보는 화면에 흔적이 남지 않는다("보냈는지 알 수
+     * 없다"가 이 모드가 없애려던 불편이다).
+     */
+    noteSubmitted(report: FeedbackReport, delivered: boolean): void;
     /**
      * 주석 저장. 마커를 먼저 "전송 중"으로 찍고 나서 보낸다 — 사용자는 결과를 기다리지 않고
      * 다음 요소로 넘어갈 수 있어야 한다.
@@ -168,16 +183,20 @@ declare class ElementPickingController {
 
 /** 캡처에서 빼야 할 노드인가(위젯 자신의 UI). 결과에 자기 모달이 찍히면 안 된다. */
 declare function isOwnUi(node: Element): boolean;
-/**
- * 웹 기본 캡처 — 현재 viewport 를 JPEG 로.
- *
- * 실패하면 **null 을 돌려준다**(던지지 않는다). 코어가 "캡처 실패" 상태로 바꾸고
- * 사용자는 파일로 첨부할 수 있다 — 그림 때문에 제보 자체를 잃지 않는다.
- */
 declare const captureWebScreenshot: ScreenshotCapture;
 /** 8 MiB 정책이 요구할 때 기존 이미지를 JPEG 품질 단계로 다시 인코딩한다. */
 declare const reencodeWebScreenshot: ScreenshotReencode;
 
+/**
+ * 바깥 → 안쪽 순서의 컴포넌트 이름 목록.
+ * 예: `["App", "LoginPage", "LoginForm", "SubmitButton"]`
+ *
+ * @param limit 너무 깊은 트리는 자른다. 앱 루트까지 20 겹이면 이미 충분한 단서다.
+ */
+declare function reactComponentPath(node: Element, limit?: number): string[];
+/** 제보 본문에 실을 한 줄. 컴포넌트를 못 찾으면 null(빈 줄을 만들지 않는다). */
+declare function reactComponentSummary(node: Element): string | null;
+
 interface WebWidgetOpts extends Omit<WidgetControllerOpts, "platform" | "initialPicking" | "onPickingChange"> {
     /** 지목 모드 플래그와 마커를 담아 둘 저장소. 기본은 `localStorage`. */
     store?: MarkerStore;
@@ -226,4 +245,4 @@ declare function createWebStorage(backing?: SyncStorage): FeedbackStorage;
  */
 declare function webContextProviders(): ContextProviders;
 
-export { type AnnotationPopupState, ELEMENT_TEXT_MAX_CHARS, ElementPickingController, type ElementPickingOpts, FeedbackKit, type FeedbackKitProps, MARKER_KEY_PREFIX, MAX_MARKERS_PER_PATH, type MarkerStatus, MarkerStore, OWN_UI_ATTR, PICKING_MODE_KEY, type PickingListener, type PickingQueueLike, type PickingState, SELECTOR_MAX_DEPTH, type StorageLike, type StoredMarker, type WebWidget, type WebWidgetOpts, captureWebScreenshot, createWebStorage, createWebWidget, cssSelectorPath, describeElement, isOwnUi, reencodeWebScreenshot, visibleText, webContextProviders };
+export { type AnnotationPopupState, ELEMENT_TEXT_MAX_CHARS, ElementPickingController, type ElementPickingOpts, FeedbackKit, type FeedbackKitProps, MARKER_KEY_PREFIX, MAX_MARKERS_PER_PATH, type MarkerStatus, MarkerStore, OWN_UI_ATTR, PICKING_MODE_KEY, type PickingListener, type PickingQueueLike, type PickingState, SELECTOR_MAX_DEPTH, type StorageLike, type StoredMarker, type WebWidget, type WebWidgetOpts, captureWebScreenshot, createWebStorage, createWebWidget, cssSelectorPath, describeElement, isOwnUi, reactComponentPath, reactComponentSummary, reencodeWebScreenshot, visibleText, webContextProviders };

package/dist/index.js

@@ -16,6 +16,48 @@ import {
   WidgetController as WidgetController2
 } from "@solhun/feedback-kit-core";
 
+// src/react-tree.ts
+function componentName(type) {
+  if (typeof type === "function") {
+    const fn = type;
+    return fn.displayName || fn.name || null;
+  }
+  if (type !== null && typeof type === "object") {
+    const wrapped = type;
+    if (wrapped.displayName) return wrapped.displayName;
+    if (wrapped.render) return componentName(wrapped.render);
+    if (wrapped.type) return componentName(wrapped.type);
+  }
+  return null;
+}
+function fiberOf(node) {
+  for (const key of Object.getOwnPropertyNames(node)) {
+    if (key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")) {
+      const value = node[key];
+      if (value !== null && typeof value === "object") return value;
+    }
+  }
+  return null;
+}
+function reactComponentPath(node, limit = 20) {
+  try {
+    let fiber = fiberOf(node);
+    const names = [];
+    while (fiber && names.length < limit) {
+      const name = componentName(fiber.elementType ?? fiber.type);
+      if (name && names[0] !== name) names.unshift(name);
+      fiber = fiber.return ?? null;
+    }
+    return names;
+  } catch {
+    return [];
+  }
+}
+function reactComponentSummary(node) {
+  const path = reactComponentPath(node);
+  return path.length > 0 ? path.join(" > ") : null;
+}
+
 // src/element-info.ts
 var ELEMENT_TEXT_MAX_CHARS = 200;
 var SELECTOR_MAX_DEPTH = 8;
@@ -105,13 +147,20 @@ function describeElement(el) {
   } catch {
     boundingBox = null;
   }
+  const react = reactComponentSummary(el);
   return {
     tag: el.tagName.toLowerCase(),
     id: el.getAttribute("id"),
     className: el.getAttribute("class"),
     text: visibleText(el),
     boundingBox,
-    attributes,
+    attributes: {
+      ...attributes,
+      // 지목한 요소가 어느 컴포넌트에 속하는지. `div.flex.items-center` 만 오면
+      // 고치는 사람이 코드에서 다시 찾아야 하지만, `LoginForm > SubmitButton` 이
+      // 오면 바로 파일이 열린다. React 가 아니면 이 키 자체가 없다.
+      ...react ? { "react-components": react } : {}
+    },
     selector: cssSelectorPath(el)
   };
 }
@@ -239,6 +288,7 @@ var ElementPickingController = class {
     this.queue = opts.queue;
     this.createReport = opts.createReport;
     this.store = opts.store ?? new MarkerStore();
+    this.onPick = opts.onPick ?? null;
     this.getPathname = opts.getPathname ?? defaultPathname;
     this.doc = opts.doc === void 0 ? defaultDocument() : opts.doc;
     this.getViewport = opts.getViewport ?? defaultViewport;
@@ -352,6 +402,10 @@ var ElementPickingController = class {
   /** 클릭 지점 기준으로 주석 팝업을 연다. 좌표는 해상도 무관한 상대값으로 접어 둔다. */
   openAnnotation(element, clientPoint) {
     const point = normalizePin(clientPoint, this.getViewport());
+    if (this.onPick) {
+      this.onPick(describeElement(element), point);
+      return;
+    }
     this.popup = {
       element: describeElement(element),
       point,
@@ -374,6 +428,26 @@ var ElementPickingController = class {
     this.popup = null;
     this.emit();
   }
+  /**
+   * 제출된 제보를 마커로 남긴다. 모달 경로에서 쓴다 — 마커 생성이 팝업 저장 안에만
+   * 있으면, 리포트 모달로 보낸 지목 제보는 화면에 흔적이 남지 않는다("보냈는지 알 수
+   * 없다"가 이 모드가 없애려던 불편이다).
+   */
+  noteSubmitted(report, delivered) {
+    if (!report.element && !report.pin) return;
+    const pathname = this.getPathname();
+    const marker = {
+      id: report.clientSubmissionId,
+      x: report.pin?.x ?? 0,
+      y: report.pin?.y ?? 0,
+      selector: report.element?.selector ?? null,
+      comment: report.comment,
+      status: delivered ? "done" : "pending",
+      at: report.createdAt
+    };
+    this.markers = this.store.upsert(pathname, marker);
+    this.emit();
+  }
   /**
    * 주석 저장. 마커를 먼저 "전송 중"으로 찍고 나서 보낸다 — 사용자는 결과를 기다리지 않고
    * 다음 요소로 넘어갈 수 있어야 한다.
@@ -471,6 +545,30 @@ function payload(dataUrl) {
 function isOwnUi2(node) {
   return node.hasAttribute?.(OWN_UI_ATTR) === true || node.closest?.(`[${OWN_UI_ATTR}]`) !== null;
 }
+function freezeCanvases(source, clone) {
+  const originals = source.querySelectorAll("canvas");
+  const clones = clone.querySelectorAll("canvas");
+  for (let index = 0; index < originals.length && index < clones.length; index++) {
+    const from = originals[index];
+    const to = clones[index];
+    let dataUrl;
+    try {
+      dataUrl = from.toDataURL("image/png");
+    } catch {
+      continue;
+    }
+    if (!dataUrl.startsWith("data:image") || dataUrl.length < 64) continue;
+    const box = from.getBoundingClientRect();
+    if (box.width < 1 || box.height < 1) continue;
+    const image = clone.createElement("img");
+    image.src = dataUrl;
+    image.setAttribute("style", to.getAttribute("style") ?? "");
+    image.style.width = `${box.width}px`;
+    image.style.height = `${box.height}px`;
+    image.className = to.className;
+    to.replaceWith(image);
+  }
+}
 var captureWebScreenshot = async () => {
   const doc = globalThis.document;
   const view = doc?.defaultView;
@@ -488,6 +586,8 @@ var captureWebScreenshot = async () => {
       scale: Math.min(2, Math.max(1, view.devicePixelRatio || 1)),
       // 위젯 자신의 UI 는 결과에서 뺀다.
       ignoreElements: isOwnUi2,
+      // 캔버스(Rive·차트 등)는 이미지로 바꿔 넘긴다 — freezeCanvases 주석 참고.
+      onclone: (cloned) => freezeCanvases(doc, cloned),
       // 외부 이미지가 CORS 를 안 열어두면 그것 때문에 전체가 실패할 수 있다.
       // 못 가져오는 리소스는 건너뛰고 나머지를 그린다.
       useCORS: true,
@@ -528,13 +628,21 @@ var reencodeWebScreenshot = async (shot, quality) => {
 import { WidgetController } from "@solhun/feedback-kit-core";
 function createWebWidget(opts) {
   const store = opts.store ?? new MarkerStore();
+  let widgetRef = null;
   const picking = new ElementPickingController({
     queue: opts.queue,
     createReport: opts.createReport,
     store,
     getPathname: opts.getPathname,
     doc: opts.doc,
-    getViewport: opts.getViewport
+    getViewport: opts.getViewport,
+    // 요소를 고르면 인라인 팝업이 아니라 **리포트 모달**을 연다.
+    // 코멘트만 받던 팝업과 달리 스크린샷·우선순위까지 같은 화면에서 받는다.
+    // 모드는 켜진 채로 둬서 한 번 켜고 여러 요소를 연달아 지목할 수 있다.
+    onPick: (element, point) => {
+      void widgetRef?.openReport({ element });
+      widgetRef?.modal.setPin(point);
+    }
   });
   const widget = new WidgetController({
     ...opts,
@@ -548,6 +656,14 @@ function createWebWidget(opts) {
       else picking.stop();
     }
   });
+  widgetRef = widget;
+  const originalSubmit = widget.submitReport.bind(widget);
+  widget.submitReport = async () => {
+    const outcome = await originalSubmit();
+    const report = widget.modal.getLastReport();
+    if (report?.element) picking.noteSubmitted(report, outcome?.delivered === true);
+    return outcome;
+  };
   picking.restore();
   return {
     widget,
@@ -1364,6 +1480,8 @@ export {
   isOwnUi2 as isOwnUi,
   normalizePin2 as normalizePin,
   parseSourceAttr,
+  reactComponentPath,
+  reactComponentSummary,
   reencodeWebScreenshot,
   resolveConfig,
   shouldShowWidget,