@solhun/feedback-kit-web 0.3.0 → 0.4.0

package/dist/index.js

@@ -2,7 +2,7 @@
 import { resolveConfig, shouldShowWidget } from "@solhun/feedback-kit-core";
 import { parseSourceAttr, SOURCE_ATTR, sourceFromElement } from "@solhun/feedback-kit-core";
 import {
-  COMMENT_MAX_CHARS as COMMENT_MAX_CHARS2,
+  COMMENT_MAX_CHARS as COMMENT_MAX_CHARS3,
   COMMENT_REQUIRED_MESSAGE,
   COMMENT_TOO_LONG_MESSAGE,
   denormalizePin,
@@ -294,6 +294,7 @@ var MarkerStore = class {
 // src/picking.ts
 import {
   COMMENT_MAX_CHARS,
+  captureWithinLimit,
   normalizePin
 } from "@solhun/feedback-kit-core";
 var OWN_UI_ATTR = "data-feedback-kit";
@@ -323,6 +324,10 @@ var ElementPickingController = class {
     this.markers = [];
     this.pathWatch = null;
     this.saving = false;
+    /** 늦게 끝난 캡처가 다음 주석의 그림을 덮지 못하게 하는 세대 번호. */
+    this.shotGeneration = 0;
+    /** 지금 도는 자동 캡처. Enter 가 캡처보다 빨랐을 때 기다릴 대상. */
+    this.capturing = null;
     this.onClick = (event) => this.handleClick(event);
     this.onMouseOver = (event) => this.handleMouseOver(event);
     this.queue = opts.queue;
@@ -332,6 +337,9 @@ var ElementPickingController = class {
     this.getPathname = opts.getPathname ?? defaultPathname;
     this.doc = opts.doc === void 0 ? defaultDocument() : opts.doc;
     this.getViewport = opts.getViewport ?? defaultViewport;
+    this.capture = opts.capture ?? null;
+    this.reencode = opts.reencode ?? null;
+    this.screenshotLimitBytes = opts.screenshotLimitBytes;
     this.lastPathname = this.getPathname();
     this.markers = this.store.list(this.lastPathname);
     this.unsubscribeQueue = this.queue.subscribe?.(() => {
@@ -450,24 +458,84 @@ var ElementPickingController = class {
       element: describeElement(element),
       point,
       comment: "",
-      canSave: false
+      canSave: false,
+      screenshot: null,
+      screenshotStatus: this.capture ? "capturing" : "none",
+      saving: false
     };
     this.emit();
+    if (this.capture) this.capturing = this.runCapture();
   }
   setAnnotationComment(value) {
     if (!this.popup) return;
     this.popup = {
       ...this.popup,
       comment: value,
-      canSave: value.trim().length > 0 && value.length <= COMMENT_MAX_CHARS
+      canSave: this.isSavable(value)
     };
     this.emit();
   }
+  /**
+   * 사용자가 붙여넣기(Cmd+V)나 드래그로 넣은 그림. 자동 캡처 결과를 덮는다.
+   *
+   * 자동 캡처보다 이게 우선인 이유: 사용자가 굳이 그림을 붙였다면 그건 "지금 화면"이
+   * 아니라 **보여주고 싶은 다른 것**이다(잘라낸 부분, 다른 탭, 기대하는 디자인).
+   */
+  async attachAnnotationImage(shot) {
+    if (!this.popup || this.popup.saving) return;
+    const generation = ++this.shotGeneration;
+    const outcome = await captureWithinLimit({
+      capture: () => shot,
+      reencode: this.reencode,
+      limitBytes: this.screenshotLimitBytes
+    });
+    if (generation !== this.shotGeneration || !this.popup) return;
+    this.popup = {
+      ...this.popup,
+      screenshot: outcome.failed ? null : outcome.screenshot,
+      screenshotStatus: outcome.failed || !outcome.screenshot ? "failed" : "ready"
+    };
+    this.emit();
+  }
+  /** 그림만 뗀다. 코멘트는 그대로 — 그림이 없어도 주석은 성립한다. */
+  removeAnnotationImage() {
+    if (!this.popup || this.popup.saving) return;
+    this.shotGeneration += 1;
+    this.popup = { ...this.popup, screenshot: null, screenshotStatus: "none" };
+    this.emit();
+  }
   /** 취소 — 마커도 제보도 남기지 않는다. 모드는 켜진 채로 둔다. */
   cancelAnnotation() {
+    this.shotGeneration += 1;
     this.popup = null;
     this.emit();
   }
+  isSavable(comment) {
+    return comment.trim().length > 0 && comment.length <= COMMENT_MAX_CHARS;
+  }
+  /** 도는 캡처가 있으면 끝나기를 기다린다. 캡처가 던져도 저장을 막지 않는다. */
+  async settleCapture() {
+    try {
+      await this.capturing;
+    } catch {
+    }
+  }
+  async runCapture() {
+    if (!this.capture) return;
+    const generation = ++this.shotGeneration;
+    const outcome = await captureWithinLimit({
+      capture: this.capture,
+      reencode: this.reencode,
+      limitBytes: this.screenshotLimitBytes
+    });
+    if (generation !== this.shotGeneration || !this.popup) return;
+    this.popup = {
+      ...this.popup,
+      screenshot: outcome.failed ? null : outcome.screenshot,
+      screenshotStatus: outcome.failed || !outcome.screenshot ? "failed" : "ready"
+    };
+    this.emit();
+  }
   /**
    * 제출된 제보를 마커로 남긴다. 모달 경로에서 쓴다 — 마커 생성이 팝업 저장 안에만
    * 있으면, 리포트 모달로 보낸 지목 제보는 화면에 흔적이 남지 않는다("보냈는지 알 수
@@ -498,14 +566,22 @@ var ElementPickingController = class {
     const popup = this.popup;
     if (!popup || !popup.canSave || this.saving) return null;
     this.saving = true;
+    if (popup.screenshotStatus === "capturing") await this.settleCapture();
+    const settled = this.popup;
+    if (!settled) {
+      this.saving = false;
+      return null;
+    }
+    this.popup = { ...settled, saving: true };
+    this.emit();
     const pathname = this.getPathname();
     const parts = {
       kind: "annotation",
-      comment: popup.comment,
+      comment: settled.comment,
       priority: "unset",
-      screenshot: null,
-      pin: popup.point,
-      element: popup.element
+      screenshot: settled.screenshot,
+      pin: settled.point,
+      element: settled.element
     };
     let report;
     try {
@@ -518,10 +594,10 @@ var ElementPickingController = class {
     }
     const marker = {
       id: report.clientSubmissionId,
-      x: popup.point.x,
-      y: popup.point.y,
-      selector: popup.element?.selector ?? null,
-      comment: popup.comment,
+      x: settled.point.x,
+      y: settled.point.y,
+      selector: settled.element?.selector ?? null,
+      comment: settled.comment,
       status: "sending",
       at: report.createdAt
     };
@@ -669,6 +745,8 @@ import { WidgetController } from "@solhun/feedback-kit-core";
 function createWebWidget(opts) {
   const store = opts.store ?? new MarkerStore();
   let widgetRef = null;
+  const capture = opts.capture === void 0 ? captureWebScreenshot : opts.capture;
+  const reencode = opts.reencode === void 0 ? reencodeWebScreenshot : opts.reencode;
   const picking = new ElementPickingController({
     queue: opts.queue,
     createReport: opts.createReport,
@@ -676,18 +754,20 @@ function createWebWidget(opts) {
     getPathname: opts.getPathname,
     doc: opts.doc,
     getViewport: opts.getViewport,
-    // 요소를 고르면 인라인 팝업이 아니라 **리포트 모달**을 연다.
-    // 코멘트만 받던 팝업과 달리 스크린샷·우선순위까지 같은 화면에서 받는다.
-    // 모드는 켜진 채로 둬서 한 번 켜고 여러 요소를 연달아 지목할 수 있다.
-    onPick: (element, point) => {
-      void widgetRef?.openReport({ element });
-      widgetRef?.modal.setPin(point);
-    }
+    // 퀵 주석도 같은 캡처를 쓴다. 캡처가 위젯 자신의 UI 를 빼주므로 팝업이 찍히지 않는다.
+    capture,
+    reencode,
+    screenshotLimitBytes: opts.screenshotLimitBytes,
+    // 기본은 클릭 자리의 퀵 입력창이라 onPick 을 주지 않는다(주면 팝업 대신 그걸 부른다).
+    // 모드는 어느 쪽이든 켜진 채로 둬서 한 번 켜고 여러 요소를 연달아 지목할 수 있다.
+    onPick: opts.pickTarget === "modal" ? (element, point) => {
+      void widgetRef?.openReport({ element, pin: point });
+    } : void 0
   });
   const widget = new WidgetController({
     ...opts,
-    capture: opts.capture === void 0 ? captureWebScreenshot : opts.capture,
-    reencode: opts.reencode === void 0 ? reencodeWebScreenshot : opts.reencode,
+    capture,
+    reencode,
     platform: "web",
     // 새로고침·페이지 이동 직후에도 켜져 있던 모드를 그대로 이어받는다.
     initialPicking: store.isPickingActive(),
@@ -718,6 +798,7 @@ function createWebWidget(opts) {
 
 // src/feedback-kit.tsx
 import {
+  COMMENT_MAX_CHARS as COMMENT_MAX_CHARS2,
   FLOATING_BUTTON_ID,
   MODAL_ACTION_CANCEL,
   MODAL_ACTION_PICK,
@@ -734,10 +815,10 @@ import {
 } from "react";
 
 // src/version.ts
-var VERSION = true ? "0.3.0" : "dev";
+var VERSION = true ? "0.4.0" : "dev";
 
 // src/feedback-kit.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var TOKENS = {
   ink: "#17202a",
   muted: "#667085",
@@ -763,29 +844,63 @@ var INITIAL_PICKING_STATE = {
 function screenshotSource(screenshot) {
   return `data:${screenshot.contentType};base64,${screenshot.base64}`;
 }
-function readScreenshotFile(file) {
-  if (file.type !== "image/png" && file.type !== "image/jpeg") {
-    return Promise.resolve(null);
-  }
-  const contentType = file.type;
+function readDataUrl(blob) {
   return new Promise((resolve) => {
     const reader = new FileReader();
     reader.onerror = () => resolve(null);
-    reader.onload = () => {
-      const result = typeof reader.result === "string" ? reader.result : "";
-      const comma = result.indexOf(",");
-      if (comma < 0) {
-        resolve(null);
-        return;
-      }
-      resolve({
-        base64: result.slice(comma + 1),
-        contentType
-      });
-    };
-    reader.readAsDataURL(file);
+    reader.onload = () => resolve(typeof reader.result === "string" ? reader.result : null);
+    reader.readAsDataURL(blob);
   });
 }
+function base64Of(dataUrl) {
+  const comma = dataUrl.indexOf(",");
+  return comma >= 0 ? dataUrl.slice(comma + 1) : null;
+}
+async function transcodeToJpeg(dataUrl) {
+  const image = await new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(null);
+    img.src = dataUrl;
+  });
+  if (!image) return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = image.naturalWidth || image.width;
+  canvas.height = image.naturalHeight || image.height;
+  if (canvas.width < 1 || canvas.height < 1) return null;
+  const context = canvas.getContext("2d");
+  if (!context) return null;
+  context.drawImage(image, 0, 0);
+  try {
+    const base64 = base64Of(canvas.toDataURL("image/jpeg", 0.9));
+    return base64 ? { base64, contentType: "image/jpeg" } : null;
+  } catch {
+    return null;
+  }
+}
+async function readImageFile(file) {
+  if (!file.type.startsWith("image/")) return null;
+  const dataUrl = await readDataUrl(file);
+  if (!dataUrl) return null;
+  if (file.type === "image/png" || file.type === "image/jpeg") {
+    const base64 = base64Of(dataUrl);
+    return base64 ? { base64, contentType: file.type } : null;
+  }
+  return transcodeToJpeg(dataUrl);
+}
+function firstImageOf(transfer) {
+  if (!transfer) return null;
+  for (const item of Array.from(transfer.items ?? [])) {
+    if (item.kind === "file" && item.type.startsWith("image/")) {
+      const file = item.getAsFile();
+      if (file) return file;
+    }
+  }
+  for (const file of Array.from(transfer.files ?? [])) {
+    if (file.type.startsWith("image/")) return file;
+  }
+  return null;
+}
 function nextPaint() {
   return new Promise((resolve) => {
     if (typeof requestAnimationFrame === "function") {
@@ -837,6 +952,17 @@ var primaryButton = {
   background: TOKENS.accent,
   color: TOKENS.surface
 };
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
 var inputStyle = {
   width: "100%",
   boxSizing: "border-box",
@@ -935,20 +1061,22 @@ function FeedbackKit(props) {
   useEffect(() => {
     if (!kit || !widgetState) return;
     const { screen: screen2, modal: modal2 } = widgetState;
-    if (screen2 !== "modal" && screen2 !== "pin") return;
+    const quickOpen = screen2 === "picking" && pickingState.popup !== null;
+    if (screen2 !== "modal" && screen2 !== "pin" && !quickOpen) return;
     const widget = kit.widget;
     function onKeyDownCapture(event) {
       if (event.key !== "Escape") return;
       if (event.isComposing) return;
       event.stopPropagation();
       event.preventDefault();
-      if (screen2 === "pin") widget.cancelPin();
+      if (quickOpen) kit.picking.cancelAnnotation();
+      else if (screen2 === "pin") widget.cancelPin();
       else if (modal2.closeConfirmVisible) widget.cancelCloseReport();
       else widget.closeReport();
     }
     document.addEventListener("keydown", onKeyDownCapture, true);
     return () => document.removeEventListener("keydown", onKeyDownCapture, true);
-  }, [kit, widgetState]);
+  }, [kit, widgetState, pickingState.popup]);
   if (!kit || !widgetState) {
     return /* @__PURE__ */ jsx("div", { ...OWN_UI_PROPS, "data-feedback-kit-loading": "true" });
   }
@@ -977,11 +1105,19 @@ function FeedbackKit(props) {
     const input = event.currentTarget;
     const file = input.files?.[0];
     if (file) {
-      const screenshot = await readScreenshotFile(file);
+      const screenshot = await readImageFile(file);
       if (screenshot) await activeKit.widget.modal.attachFile(screenshot);
     }
     input.value = "";
   }
+  async function attachToPopup(transfer) {
+    const file = firstImageOf(transfer);
+    if (!file) return false;
+    const screenshot = await readImageFile(file);
+    if (!screenshot) return false;
+    await activeKit.picking.attachAnnotationImage(screenshot);
+    return true;
+  }
   function closeReport() {
     activeKit.widget.closeReport();
   }
@@ -1419,48 +1555,147 @@ function FeedbackKit(props) {
                     event.preventDefault();
                     void kit.picking.saveAnnotation();
                   },
+                  onPaste: (event) => {
+                    if (!firstImageOf(event.clipboardData)) return;
+                    event.preventDefault();
+                    void attachToPopup(event.clipboardData);
+                  },
+                  onDragOver: (event) => {
+                    if (firstImageOf(event.dataTransfer)) event.preventDefault();
+                  },
+                  onDrop: (event) => {
+                    if (!firstImageOf(event.dataTransfer)) return;
+                    event.preventDefault();
+                    void attachToPopup(event.dataTransfer);
+                  },
                   style: {
                     position: "fixed",
-                    left: `min(${popup.point.x * 100}vw, calc(100vw - 336px))`,
-                    top: `min(${popup.point.y * 100}vh, calc(100vh - 230px))`,
-                    width: "min(320px, calc(100vw - 32px))",
+                    // 클릭한 지점 바로 옆에 띄운다. 화면 밖으로 나가지 않게 양쪽을 물린다.
+                    left: `clamp(8px, calc(${popup.point.x * 100}vw + 14px), calc(100vw - 340px))`,
+                    top: `clamp(8px, calc(${popup.point.y * 100}vh + 14px), calc(100vh - 200px))`,
+                    width: "min(332px, calc(100vw - 16px))",
                     boxSizing: "border-box",
                     border: `1px solid ${TOKENS.line}`,
                     borderRadius: 12,
                     background: TOKENS.surface,
-                    padding: 14,
+                    padding: 12,
                     boxShadow: TOKENS.shadow,
                     pointerEvents: "auto"
                   },
                   children: [
-                    /* @__PURE__ */ jsx("label", { htmlFor: "feedback-kit-annotation", style: { display: "block", fontWeight: 700 }, children: "\uC774 \uC694\uC18C\uC5D0 \uC8FC\uC11D \uB0A8\uAE30\uAE30" }),
-                    popup.element?.text ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 9px", color: TOKENS.muted }, children: popup.element.text }) : null,
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 6,
+                          marginBottom: 7,
+                          color: TOKENS.muted,
+                          fontSize: 12
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25CE" }),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              children: popup.element?.text?.trim() || popup.element?.selector || "\uC774 \uC9C0\uC810"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("label", { htmlFor: "feedback-kit-annotation", style: visuallyHidden, children: "\uC774 \uC694\uC18C\uC5D0 \uB0A8\uAE38 \uC758\uACAC" }),
                     /* @__PURE__ */ jsx(
                       "textarea",
                       {
                         id: "feedback-kit-annotation",
                         autoFocus: true,
                         value: popup.comment,
+                        disabled: popup.saving,
                         onChange: (event) => kit.picking.setAnnotationComment(event.currentTarget.value),
-                        rows: 4,
-                        placeholder: "\uC758\uACAC\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694",
-                        style: { ...inputStyle, resize: "vertical" }
+                        onKeyDown: (event) => {
+                          if (event.key !== "Enter" || event.shiftKey) return;
+                          const native = event.nativeEvent;
+                          if (native.isComposing) return;
+                          event.preventDefault();
+                          void kit.picking.saveAnnotation();
+                        },
+                        rows: 2,
+                        placeholder: "\uBB34\uC5C7\uC774 \uBB38\uC81C\uC778\uAC00\uC694? (Enter \uB85C \uBCF4\uB0B4\uAE30)",
+                        style: { ...inputStyle, resize: "vertical", minHeight: 58 }
+                      }
+                    ),
+                    popup.comment.length > COMMENT_MAX_CHARS2 ? /* @__PURE__ */ jsx("div", { role: "alert", style: { marginTop: 4, color: TOKENS.danger }, children: "4,000\uC790 \uC774\uD558\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }) : null,
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 8,
+                          marginTop: 8,
+                          color: TOKENS.muted,
+                          fontSize: 12
+                        },
+                        children: popup.screenshot ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              src: screenshotSource(popup.screenshot),
+                              alt: "\uC774 \uC8FC\uC11D\uC5D0 \uCCA8\uBD80\uB41C \uD654\uBA74",
+                              style: {
+                                width: 40,
+                                height: 26,
+                                objectFit: "cover",
+                                borderRadius: 4,
+                                border: `1px solid ${TOKENS.line}`
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: "\uD654\uBA74 \uCCA8\uBD80\uB428 \xB7 \uBD99\uC5EC\uB123\uAE30\uB85C \uAD50\uCCB4" }),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              disabled: popup.saving,
+                              onClick: () => kit.picking.removeAnnotationImage(),
+                              style: { ...baseButton, minHeight: 26, padding: "2px 8px", fontSize: 12 },
+                              children: "\uC81C\uAC70"
+                            }
+                          )
+                        ] }) : /* @__PURE__ */ jsx("span", { role: "status", style: { flex: 1 }, children: popup.screenshotStatus === "capturing" ? "\uD654\uBA74 \uCEA1\uCC98 \uC911\u2026" : popup.screenshotStatus === "failed" ? "\uCEA1\uCC98 \uC2E4\uD328 \u2014 \uC774\uBBF8\uC9C0\uB97C \uBD99\uC5EC\uB123\uC5B4 \uC8FC\uC138\uC694" : "\uC774\uBBF8\uC9C0\uB97C \uBD99\uC5EC\uB123\uAC70\uB098 \uB04C\uC5B4\uB2E4 \uB193\uC744 \uC218 \uC788\uC5B4\uC694" })
                       }
                     ),
-                    popup.comment.length > 4e3 ? /* @__PURE__ */ jsx("div", { role: "alert", style: { marginTop: 4, color: TOKENS.danger }, children: "4,000\uC790 \uC774\uD558\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }) : null,
                     /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 10 }, children: [
-                      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => kit.picking.cancelAnnotation(), style: baseButton, children: "\uCDE8\uC18C" }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          disabled: popup.saving,
+                          onClick: () => kit.picking.cancelAnnotation(),
+                          style: { ...baseButton, minHeight: 32, padding: "5px 10px" },
+                          children: "\uCDE8\uC18C"
+                        }
+                      ),
                       /* @__PURE__ */ jsx(
                         "button",
                         {
                           type: "submit",
-                          disabled: !popup.canSave,
+                          disabled: !popup.canSave || popup.saving,
                           style: {
                             ...primaryButton,
-                            opacity: popup.canSave ? 1 : 0.5,
-                            cursor: popup.canSave ? "pointer" : "not-allowed"
+                            minHeight: 32,
+                            padding: "5px 12px",
+                            opacity: popup.canSave && !popup.saving ? 1 : 0.5,
+                            cursor: popup.canSave && !popup.saving ? "pointer" : "not-allowed"
                           },
-                          children: "\uC800\uC7A5"
+                          children: popup.saving ? "\uBCF4\uB0B4\uB294 \uC911\u2026" : "\uBCF4\uB0B4\uAE30"
                         }
                       )
                     ] })
@@ -1540,7 +1775,7 @@ function webContextProviders() {
   };
 }
 export {
-  COMMENT_MAX_CHARS2 as COMMENT_MAX_CHARS,
+  COMMENT_MAX_CHARS3 as COMMENT_MAX_CHARS,
   COMMENT_REQUIRED_MESSAGE,
   COMMENT_TOO_LONG_MESSAGE,
   ELEMENT_TEXT_MAX_CHARS,