@solhun/feedback-kit-web 0.3.0 → 0.5.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.5.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",
@@ -847,6 +973,96 @@ var inputStyle = {
   padding: "10px 11px",
   font: "inherit"
 };
+function PickToggle({
+  active,
+  disabled,
+  variant,
+  focusId,
+  onToggle
+}) {
+  const floating = variant === "floating";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": active,
+      "aria-label": "\uC694\uC18C \uC9C0\uBAA9 \uBAA8\uB4DC",
+      "data-fk-pick-toggle": active ? "on" : "off",
+      "data-fk-focus-id": focusId,
+      disabled,
+      onClick: onToggle,
+      style: {
+        ...baseButton,
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        opacity: disabled ? 0.5 : 1,
+        cursor: disabled ? "not-allowed" : "pointer",
+        // 항상 값을 준다. 조건부로 빼면 리렌더 때 shorthand(border)와 충돌한다고 React 가 경고한다.
+        borderColor: active ? TOKENS.accent : TOKENS.line,
+        ...floating ? {
+          position: "fixed",
+          top: 16,
+          left: "50%",
+          transform: "translateX(-50%)",
+          // 오버레이 자체는 클릭을 통과시킨다(pointerEvents:none) — 이 토글만 되살린다.
+          pointerEvents: "auto",
+          background: TOKENS.surface,
+          boxShadow: TOKENS.shadow
+        } : {
+          width: "100%",
+          justifyContent: "space-between",
+          marginBottom: 16,
+          background: active ? "rgba(49, 93, 115, 0.06)" : TOKENS.surface
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 7 }, children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: active ? TOKENS.accent : TOKENS.muted }, children: "\u25CE" }),
+          "\uC694\uC18C \uC9C0\uBAA9 \uBAA8\uB4DC"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { fontSize: 12, fontWeight: 600, color: active ? TOKENS.accent : TOKENS.muted },
+              children: active ? "\uCF1C\uC9D0" : "\uAEBC\uC9D0"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "relative",
+                display: "inline-block",
+                width: 38,
+                height: 22,
+                borderRadius: 11,
+                background: active ? TOKENS.accent : TOKENS.line
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 3,
+                    left: active ? 19 : 3,
+                    width: 16,
+                    height: 16,
+                    borderRadius: "50%",
+                    background: TOKENS.surface,
+                    boxShadow: "0 1px 3px rgba(23, 32, 42, 0.35)"
+                  }
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function MarkerStatus({ status }) {
   const presentation = status === "sending" ? { icon: "\u21BB", text: "\uC804\uC1A1 \uC911", color: TOKENS.accent } : status === "done" ? { icon: "\u2713", text: "\uC644\uB8CC", color: TOKENS.success } : { icon: "\u25F7", text: "\uB300\uAE30", color: TOKENS.warning };
   return /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: 4, alignItems: "center", color: presentation.color }, children: [
@@ -935,26 +1151,32 @@ 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" });
   }
   const activeKit = kit;
-  const { modal, screen } = widgetState;
+  const { modal, screen, pickingActive } = widgetState;
   const draftLocked = modal.submitStatus === "sending" || modal.submitStatus === "pending";
+  function togglePicking() {
+    if (pickingActive) activeKit.widget.stopPicking();
+    else activeKit.widget.startPicking();
+  }
   async function withOwnUiHidden(action) {
     const root = rootRef.current;
     const previousVisibility = root?.style.visibility ?? "";
@@ -977,11 +1199,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();
   }
@@ -1018,8 +1248,7 @@ function FeedbackKit(props) {
             ref: floatingButtonRef,
             id: FLOATING_BUTTON_ID,
             type: "button",
-            disabled: screen === "picking",
-            "aria-label": screen === "picking" ? "\uC694\uC18C \uC9C0\uBAA9 \uC911" : "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30",
+            "aria-label": "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30",
             onClick: () => void openReport(),
             style: {
               ...primaryButton,
@@ -1030,11 +1259,9 @@ function FeedbackKit(props) {
               minWidth: 112,
               minHeight: 46,
               borderRadius: 24,
-              boxShadow: TOKENS.shadow,
-              opacity: screen === "picking" ? 0.76 : 1,
-              cursor: screen === "picking" ? "default" : "pointer"
+              boxShadow: TOKENS.shadow
             },
-            children: screen === "picking" ? "\uC9C0\uBAA9 \uC911" : "\uD53C\uB4DC\uBC31"
+            children: "\uD53C\uB4DC\uBC31"
           }
         ) : null,
         announcement && !modal.open ? /* @__PURE__ */ jsx(
@@ -1118,7 +1345,17 @@ function FeedbackKit(props) {
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx("p", { style: { margin: "0 0 18px", color: TOKENS.muted }, children: "\uD604\uC7AC \uD654\uBA74\uC758 \uBB38\uC81C\uB098 \uC758\uACAC\uC744 \uB0A8\uACA8\uC8FC\uC138\uC694." }),
+                    /* @__PURE__ */ jsx("p", { style: { margin: "0 0 14px", color: TOKENS.muted }, children: "\uD604\uC7AC \uD654\uBA74\uC758 \uBB38\uC81C\uB098 \uC758\uACAC\uC744 \uB0A8\uACA8\uC8FC\uC138\uC694." }),
+                    /* @__PURE__ */ jsx(
+                      PickToggle,
+                      {
+                        variant: "inline",
+                        active: pickingActive,
+                        disabled: draftLocked,
+                        focusId: MODAL_ACTION_PICK,
+                        onToggle: togglePicking
+                      }
+                    ),
                     /* @__PURE__ */ jsxs("section", { "aria-labelledby": "feedback-kit-screenshot-label", style: { marginBottom: 16 }, children: [
                       /* @__PURE__ */ jsx("strong", { id: "feedback-kit-screenshot-label", children: "\uC2A4\uD06C\uB9B0\uC0F7" }),
                       /* @__PURE__ */ jsx(
@@ -1232,19 +1469,6 @@ function FeedbackKit(props) {
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        role: "switch",
-                        "aria-checked": "false",
-                        disabled: draftLocked,
-                        "data-fk-focus-id": MODAL_ACTION_PICK,
-                        onClick: () => kit.widget.startPicking(),
-                        style: { ...baseButton, width: "100%", marginTop: 16 },
-                        children: "\uC694\uC18C \uC9C0\uBAA9"
-                      }
-                    ),
                     modal.submitStatus !== "idle" || modal.pending > 0 ? /* @__PURE__ */ jsxs(
                       "div",
                       {
@@ -1367,22 +1591,7 @@ function FeedbackKit(props) {
                   }
                 }
               ) : null,
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => kit.widget.stopPicking(),
-                  style: {
-                    ...primaryButton,
-                    position: "fixed",
-                    top: 18,
-                    right: 18,
-                    pointerEvents: "auto",
-                    boxShadow: TOKENS.shadow
-                  },
-                  children: "\uC9C0\uBAA9 \uC885\uB8CC"
-                }
-              ),
+              /* @__PURE__ */ jsx(PickToggle, { variant: "floating", active: true, onToggle: togglePicking }),
               pickingState.markers.map((marker, index) => /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -1419,48 +1628,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 +1848,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,