@solhun/feedback-kit-web 0.8.0 → 0.10.0

package/dist/index.cjs

@@ -30,45 +30,45 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  COMMENT_MAX_CHARS: () => import_feedback_kit_core6.COMMENT_MAX_CHARS,
-  COMMENT_REQUIRED_MESSAGE: () => import_feedback_kit_core6.COMMENT_REQUIRED_MESSAGE,
-  COMMENT_TOO_LONG_MESSAGE: () => import_feedback_kit_core6.COMMENT_TOO_LONG_MESSAGE,
+  COMMENT_MAX_CHARS: () => import_feedback_kit_core7.COMMENT_MAX_CHARS,
+  COMMENT_REQUIRED_MESSAGE: () => import_feedback_kit_core7.COMMENT_REQUIRED_MESSAGE,
+  COMMENT_TOO_LONG_MESSAGE: () => import_feedback_kit_core7.COMMENT_TOO_LONG_MESSAGE,
   ELEMENT_TEXT_MAX_CHARS: () => ELEMENT_TEXT_MAX_CHARS,
   ElementPickingController: () => ElementPickingController,
-  FLOATING_BUTTON_ID: () => import_feedback_kit_core6.FLOATING_BUTTON_ID,
+  FLOATING_BUTTON_ID: () => import_feedback_kit_core7.FLOATING_BUTTON_ID,
   FeedbackKit: () => FeedbackKit,
-  HintProvider: () => import_feedback_kit_core7.HintProvider,
+  HintProvider: () => import_feedback_kit_core8.HintProvider,
   MARKER_KEY_PREFIX: () => MARKER_KEY_PREFIX,
   MAX_MARKERS_PER_PATH: () => MAX_MARKERS_PER_PATH,
-  MODAL_ACTION_HINT_TOGGLE: () => import_feedback_kit_core6.MODAL_ACTION_HINT_TOGGLE,
-  MODAL_ACTION_PICK: () => import_feedback_kit_core6.MODAL_ACTION_PICK,
+  MODAL_ACTION_HINT_TOGGLE: () => import_feedback_kit_core7.MODAL_ACTION_HINT_TOGGLE,
+  MODAL_ACTION_PICK: () => import_feedback_kit_core7.MODAL_ACTION_PICK,
   MarkerStore: () => MarkerStore,
   OWN_UI_ATTR: () => OWN_UI_ATTR,
   PICKING_MODE_KEY: () => PICKING_MODE_KEY,
-  ReportModalController: () => import_feedback_kit_core6.ReportModalController,
-  SCREENSHOT_FAILED_MESSAGE: () => import_feedback_kit_core6.SCREENSHOT_FAILED_MESSAGE,
+  ReportModalController: () => import_feedback_kit_core7.ReportModalController,
+  SCREENSHOT_FAILED_MESSAGE: () => import_feedback_kit_core7.SCREENSHOT_FAILED_MESSAGE,
   SELECTOR_MAX_DEPTH: () => SELECTOR_MAX_DEPTH,
-  SOURCE_ATTR: () => import_feedback_kit_core5.SOURCE_ATTR,
-  SUBMIT_DONE_MESSAGE: () => import_feedback_kit_core6.SUBMIT_DONE_MESSAGE,
-  SUBMIT_PENDING_MESSAGE: () => import_feedback_kit_core6.SUBMIT_PENDING_MESSAGE,
-  WidgetController: () => import_feedback_kit_core6.WidgetController,
+  SOURCE_ATTR: () => import_feedback_kit_core6.SOURCE_ATTR,
+  SUBMIT_DONE_MESSAGE: () => import_feedback_kit_core7.SUBMIT_DONE_MESSAGE,
+  SUBMIT_PENDING_MESSAGE: () => import_feedback_kit_core7.SUBMIT_PENDING_MESSAGE,
+  WidgetController: () => import_feedback_kit_core7.WidgetController,
   captureWebScreenshot: () => captureWebScreenshot,
   createRouteWatcher: () => createRouteWatcher,
   createWebStorage: () => createWebStorage,
   createWebWidget: () => createWebWidget,
   cssSelectorPath: () => cssSelectorPath,
-  denormalizePin: () => import_feedback_kit_core6.denormalizePin,
+  denormalizePin: () => import_feedback_kit_core7.denormalizePin,
   describeElement: () => describeElement,
   isOwnUi: () => isOwnUi2,
-  normalizePin: () => import_feedback_kit_core6.normalizePin,
-  parseSourceAttr: () => import_feedback_kit_core5.parseSourceAttr,
-  rankHints: () => import_feedback_kit_core7.rankHints,
+  normalizePin: () => import_feedback_kit_core7.normalizePin,
+  parseSourceAttr: () => import_feedback_kit_core6.parseSourceAttr,
+  rankHints: () => import_feedback_kit_core8.rankHints,
   reactComponentPath: () => reactComponentPath,
   reactComponentSummary: () => reactComponentSummary,
   reencodeWebScreenshot: () => reencodeWebScreenshot,
-  resolveConfig: () => import_feedback_kit_core4.resolveConfig,
-  shouldShowWidget: () => import_feedback_kit_core4.shouldShowWidget,
-  sourceFromElement: () => import_feedback_kit_core5.sourceFromElement,
+  resolveConfig: () => import_feedback_kit_core5.resolveConfig,
+  shouldShowWidget: () => import_feedback_kit_core5.shouldShowWidget,
+  sourceFromElement: () => import_feedback_kit_core6.sourceFromElement,
   visibleText: () => visibleText,
   webContextProviders: () => webContextProviders,
   webDiagnosticsOptions: () => webDiagnosticsOptions,
@@ -76,10 +76,10 @@ __export(index_exports, {
   webRouteWatcher: () => webRouteWatcher
 });
 module.exports = __toCommonJS(index_exports);
-var import_feedback_kit_core4 = require("@solhun/feedback-kit-core");
 var import_feedback_kit_core5 = require("@solhun/feedback-kit-core");
 var import_feedback_kit_core6 = require("@solhun/feedback-kit-core");
 var import_feedback_kit_core7 = require("@solhun/feedback-kit-core");
+var import_feedback_kit_core8 = require("@solhun/feedback-kit-core");
 
 // src/react-tree.ts
 var FRAMEWORK_INTERNALS = /* @__PURE__ */ new Set([
@@ -1210,11 +1210,88 @@ function createWebWidget(opts) {
 }
 
 // src/feedback-kit.tsx
-var import_feedback_kit_core3 = require("@solhun/feedback-kit-core");
+var import_feedback_kit_core4 = require("@solhun/feedback-kit-core");
 var import_react = require("react");
 
 // src/version.ts
-var VERSION = true ? "0.8.0" : "dev";
+var VERSION = true ? "0.10.0" : "dev";
+
+// src/dev-clipboard.ts
+var import_feedback_kit_core3 = require("@solhun/feedback-kit-core");
+function sourceLine(item) {
+  const mapping = (0, import_feedback_kit_core3.sourceFromElement)(item.element ?? void 0);
+  if (!mapping.sourceFile) return null;
+  return mapping.sourceLine === null ? `\uC18C\uC2A4: ${mapping.sourceFile}` : `\uC18C\uC2A4: ${mapping.sourceFile}:${mapping.sourceLine}`;
+}
+function elementLine(element) {
+  if (!element) return null;
+  const selector = element.selector ?? element.tag;
+  const text = element.text?.trim();
+  return text ? `\uC694\uC18C: ${selector} "${text}"` : `\uC694\uC18C: ${selector}`;
+}
+function componentLine(element) {
+  const summary = element?.attributes?.["react-components"];
+  return summary ? `\uCEF4\uD3EC\uB10C\uD2B8: ${summary}` : null;
+}
+function renderDevClipItem(item) {
+  const lines = [`[\uD53C\uB4DC\uBC31] ${item.comment.trim()}`];
+  const screen = item.screen?.trim();
+  if (screen) lines.push(`\uD654\uBA74: ${screen}`);
+  const element = elementLine(item.element);
+  if (element) lines.push(element);
+  const component = componentLine(item.element);
+  if (component) lines.push(component);
+  const source = sourceLine(item);
+  if (source) lines.push(source);
+  if (item.priority && item.priority !== "unset") lines.push(`\uC6B0\uC120\uC21C\uC704: ${item.priority}`);
+  return lines.join("\n");
+}
+function renderDevClipList(items) {
+  if (items.length === 0) return "";
+  if (items.length === 1) return renderDevClipItem(items[0]);
+  return items.map((item, index) => `${index + 1}. ${renderDevClipItem(item).split("\n").join("\n   ")}`).join("\n\n");
+}
+async function writeToClipboard(text) {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (!clipboard?.writeText) return false;
+  try {
+    await clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/dev-preference.ts
+var STORAGE_KEY = "feedback-kit:dev-mode";
+function isDevSettingsHost(hostname) {
+  const host = hostname.trim().toLowerCase();
+  if (host === "localhost" || host === "127.0.0.1" || host === "::1" || host === "[::1]") return true;
+  return host.endsWith(".localhost") || host.endsWith(".local");
+}
+function readDevPreference() {
+  try {
+    const raw = globalThis.localStorage?.getItem(STORAGE_KEY);
+    if (raw === "on") return true;
+    if (raw === "off") return false;
+    return null;
+  } catch {
+    return null;
+  }
+}
+function writeDevPreference(value) {
+  try {
+    const storage = globalThis.localStorage;
+    if (!storage) return;
+    if (value === null) storage.removeItem(STORAGE_KEY);
+    else storage.setItem(STORAGE_KEY, value ? "on" : "off");
+  } catch {
+  }
+}
+function resolveDevMode(propValue, stored) {
+  if (stored !== null) return stored;
+  return propValue === true;
+}
 
 // src/feedback-kit.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1483,7 +1560,10 @@ function PickBar({
   markerCount,
   onToggle,
   onTogglePause,
-  onClearMarkers
+  onClearMarkers,
+  onReportWholeScreen,
+  devClipCount,
+  onCopyAll
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
@@ -1538,6 +1618,48 @@ function PickBar({
             ]
           }
         ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            "data-fk-pick-whole": "",
+            title: "\uAC00\uB9AC\uD0A8 \uC694\uC18C \uC5C6\uC774 \uC774 \uD654\uBA74 \uC804\uCCB4\uC5D0 \uB300\uD574 \uC81C\uBCF4\uD569\uB2C8\uB2E4.",
+            onClick: onReportWholeScreen,
+            style: {
+              ...baseButton,
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              whiteSpace: "nowrap"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u25A3" }),
+              "\uD654\uBA74 \uC804\uCCB4\uB85C \uBCF4\uB0B4\uAE30"
+            ]
+          }
+        ),
+        devClipCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            "data-fk-copy-all": devClipCount,
+            title: "\uC774\uBC88 \uC138\uC158\uC5D0 \uCC0D\uC740 \uAC83\uC744 \uBC88\uD638 \uB9E4\uAE34 \uBAA9\uB85D \uD558\uB098\uB85C \uBCF5\uC0AC\uD569\uB2C8\uB2E4.",
+            onClick: onCopyAll,
+            style: {
+              ...baseButton,
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              whiteSpace: "nowrap",
+              fontWeight: 600
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u29C9" }),
+              "\uC804\uBD80 \uBCF5\uC0AC ",
+              devClipCount
+            ]
+          }
+        ) : null,
         markerCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "button",
           {
@@ -1592,7 +1714,7 @@ function HintChips({
       "button",
       {
         type: "button",
-        "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_HINT_TOGGLE,
+        "data-fk-focus-id": import_feedback_kit_core4.MODAL_ACTION_HINT_TOGGLE,
         "aria-expanded": hintsExpanded,
         disabled,
         onClick: onToggle,
@@ -1666,6 +1788,14 @@ function FeedbackKit(props) {
   const [widgetState, setWidgetState] = (0, import_react.useState)(null);
   const [pickingState, setPickingState] = (0, import_react.useState)(INITIAL_PICKING_STATE);
   const [announcement, setAnnouncement] = (0, import_react.useState)(null);
+  const [devMode, setDevMode] = (0, import_react.useState)(() => resolveDevMode(props.devMode, readDevPreference()));
+  const [devSettingsAvailable] = (0, import_react.useState)(
+    () => props.devMode === true || isDevSettingsHost(globalThis.location?.hostname ?? "")
+  );
+  const [devSettingsOpen, setDevSettingsOpen] = (0, import_react.useState)(false);
+  const devClipsRef = (0, import_react.useRef)([]);
+  const [devClipCount, setDevClipCount] = (0, import_react.useState)(0);
+  const [devFallbackText, setDevFallbackText] = (0, import_react.useState)(null);
   const {
     queue,
     createReport,
@@ -1726,7 +1856,7 @@ function FeedbackKit(props) {
     }
     if (modal2.closeConfirmVisible && !previousConfirmVisibleRef.current) confirmRef.current?.focus();
     const wasModal = previousScreenRef.current === "modal";
-    if (wasModal && screen2 === "button" && modal2.restoreFocusTo === import_feedback_kit_core3.FLOATING_BUTTON_ID) {
+    if (wasModal && screen2 === "button" && modal2.restoreFocusTo === import_feedback_kit_core4.FLOATING_BUTTON_ID) {
       void nextPaint().then(() => floatingButtonRef.current?.focus());
     }
     previousScreenRef.current = screen2;
@@ -1790,6 +1920,56 @@ function FeedbackKit(props) {
       if (root) root.style.visibility = previousVisibility;
     }
   }
+  function currentClip() {
+    const state = pickingState.popup;
+    if (!state) return null;
+    return {
+      comment: state.comment,
+      element: state.element ?? null,
+      screen: typeof location === "undefined" ? null : location.pathname
+    };
+  }
+  async function putOnClipboard(text) {
+    const ok = await writeToClipboard(text);
+    setDevFallbackText(ok ? null : text);
+  }
+  function commitPopup() {
+    if (devMode) {
+      void copyOne();
+      return;
+    }
+    void activeKit.picking.saveAnnotation();
+  }
+  async function copyOne() {
+    const clip = currentClip();
+    if (!clip || clip.comment.trim() === "") return;
+    devClipsRef.current = [...devClipsRef.current, clip];
+    setDevClipCount(devClipsRef.current.length);
+    activeKit.picking.cancelAnnotation();
+    await putOnClipboard(renderDevClipItem(clip));
+  }
+  async function copyAll() {
+    if (devClipsRef.current.length === 0) return;
+    await putOnClipboard(renderDevClipList(devClipsRef.current));
+  }
+  function toggleDevMode(next) {
+    writeDevPreference(next);
+    setDevMode(next);
+    devClipsRef.current = [];
+    setDevClipCount(0);
+    setDevFallbackText(null);
+    setAnnouncement(
+      next ? "\uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC\uB97C \uCF30\uC2B5\uB2C8\uB2E4. \uC774\uC81C \uC81C\uBCF4\uB294 \uC218\uC9D1\uCC98\uB85C \uAC00\uC9C0 \uC54A\uACE0 \uD074\uB9BD\uBCF4\uB4DC\uB85C \uBCF5\uC0AC\uB429\uB2C8\uB2E4." : "\uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC\uB97C \uAED0\uC2B5\uB2C8\uB2E4. \uC774\uC81C \uC81C\uBCF4\uAC00 \uC218\uC9D1\uCC98\uB85C \uAC11\uB2C8\uB2E4."
+    );
+  }
+  async function pressFloatingButton() {
+    if (props.defaultMode !== "report" && !pickingActive) {
+      setAnnouncement(null);
+      activeKit.widget.startPicking();
+      return;
+    }
+    await openReport();
+  }
   async function openReport() {
     setAnnouncement(null);
     await withOwnUiHidden(() => activeKit.widget.openReport());
@@ -1839,8 +2019,26 @@ function FeedbackKit(props) {
   }
   function submitReport(event) {
     event.preventDefault();
+    if (devMode) {
+      void copyFromModal();
+      return;
+    }
     void activeKit.widget.submitReport();
   }
+  async function copyFromModal() {
+    const modalState = activeKit.widget.getState().modal;
+    if (modalState.comment.trim() === "") return;
+    const clip = {
+      comment: modalState.comment,
+      element: modalState.element ?? null,
+      screen: typeof location === "undefined" ? null : location.pathname,
+      priority: modalState.priority
+    };
+    devClipsRef.current = [...devClipsRef.current, clip];
+    setDevClipCount(devClipsRef.current.length);
+    activeKit.widget.confirmCloseReport();
+    await putOnClipboard(renderDevClipItem(clip));
+  }
   const floating = screen === "button" || screen === "picking";
   const hoverBox = pickingState.hovered?.boundingBox;
   const popup = pickingState.popup;
@@ -1852,45 +2050,199 @@ function FeedbackKit(props) {
       style: { fontFamily: FONT_STACK, color: TOKENS.ink, fontSize: 14, lineHeight: 1.45 },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes feedback-kit-spin{to{transform:rotate(360deg)}}` }),
-        floating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+        floating ? (
+          // 톱니와 피드백 버튼을 한 상자에 넣는다. 각각 fixed 로 두면 버튼 글자 길이가
+          // 바뀔 때마다 좌표를 다시 맞춰야 하고, 그러다 겹친다.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                position: "fixed",
+                right: 24,
+                bottom: 24,
+                zIndex: 2147483600,
+                display: "flex",
+                alignItems: "center",
+                gap: 8
+              },
+              children: [
+                devSettingsAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "data-fk-dev-settings-toggle": "",
+                    "aria-label": "\uD53C\uB4DC\uBC31 \uC124\uC815",
+                    "aria-expanded": devSettingsOpen,
+                    onClick: () => setDevSettingsOpen((open) => !open),
+                    style: {
+                      ...baseButton,
+                      width: 46,
+                      minHeight: 46,
+                      padding: 0,
+                      borderRadius: 23,
+                      boxShadow: TOKENS.shadow,
+                      fontSize: 17,
+                      lineHeight: 1
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2699" })
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    ref: floatingButtonRef,
+                    id: import_feedback_kit_core4.FLOATING_BUTTON_ID,
+                    type: "button",
+                    "aria-label": "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30",
+                    onClick: () => void pressFloatingButton(),
+                    style: {
+                      ...primaryButton,
+                      minWidth: 112,
+                      minHeight: 46,
+                      borderRadius: 24,
+                      boxShadow: TOKENS.shadow
+                    },
+                    children: "\uD53C\uB4DC\uBC31"
+                  }
+                )
+              ]
+            }
+          )
+        ) : null,
+        floating && devMode ? (
+          // 켠 줄 모르고 제보하면 "보냈다"고 믿는데 수집처엔 아무것도 안 남는다.
+          // 조용한 유실이라 이 표시가 유일한 방어다. 버튼 **밖**에 두는 이유는 버튼의
+          // 접근성 이름을 오염시키지 않기 위해서다.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              "data-fk-dev-badge": "",
+              "aria-label": "\uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC\uAC00 \uCF1C\uC838 \uC788\uC2B5\uB2C8\uB2E4 \u2014 \uC81C\uBCF4\uAC00 \uC218\uC9D1\uCC98\uB85C \uAC00\uC9C0 \uC54A\uACE0 \uD074\uB9BD\uBCF4\uB4DC\uB85C \uBCF5\uC0AC\uB429\uB2C8\uB2E4",
+              style: {
+                position: "fixed",
+                right: 24,
+                bottom: 62,
+                zIndex: 2147483601,
+                padding: "2px 8px",
+                borderRadius: 6,
+                background: TOKENS.warning,
+                color: "#1f2933",
+                fontSize: 11,
+                fontWeight: 700,
+                pointerEvents: "none"
+              },
+              children: "\uAC1C\uBC1C\uC6A9 \u2014 \uD074\uB9BD\uBCF4\uB4DC\uB85C \uBCF5\uC0AC"
+            }
+          )
+        ) : null,
+        devFallbackText !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
           {
-            ref: floatingButtonRef,
-            id: import_feedback_kit_core3.FLOATING_BUTTON_ID,
-            type: "button",
-            "aria-label": "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30",
-            onClick: () => void openReport(),
+            role: "dialog",
+            "aria-label": "\uD074\uB9BD\uBCF4\uB4DC\uC5D0 \uBABB \uC368\uC11C \uB300\uC2E0 \uBCF4\uC5EC\uC90D\uB2C8\uB2E4",
+            "data-fk-dev-fallback": "",
             style: {
-              ...primaryButton,
               position: "fixed",
               right: 24,
-              bottom: 24,
-              zIndex: 2147483600,
-              minWidth: 112,
-              minHeight: 46,
-              borderRadius: 24,
-              boxShadow: TOKENS.shadow
+              bottom: 92,
+              zIndex: 2147483602,
+              width: "min(420px, calc(100vw - 48px))",
+              border: `1px solid ${TOKENS.line}`,
+              borderRadius: 12,
+              background: TOKENS.surface,
+              padding: 12,
+              boxShadow: TOKENS.shadow,
+              pointerEvents: "auto"
             },
-            children: "\uD53C\uB4DC\uBC31"
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 6, color: TOKENS.muted, fontSize: 12 }, children: "\uD074\uB9BD\uBCF4\uB4DC\uC5D0 \uC4F0\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4. \uC544\uB798\uC5D0\uC11C \uC9C1\uC811 \uBCF5\uC0AC\uD558\uC138\uC694." }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "textarea",
+                {
+                  readOnly: true,
+                  value: devFallbackText,
+                  onFocus: (event) => event.currentTarget.select(),
+                  style: { ...inputStyle, height: 140, fontFamily: "ui-monospace, monospace", fontSize: 12 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => setDevFallbackText(null), style: baseButton, children: "\uB2EB\uAE30" }) })
+            ]
           }
         ) : null,
-        announcement && !modal.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        devSettingsOpen || announcement && !modal.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
-            role: "status",
-            "aria-live": "polite",
             style: {
               position: "fixed",
               right: 24,
               bottom: 82,
               zIndex: 2147483601,
-              padding: "10px 14px",
-              borderRadius: 10,
-              background: TOKENS.ink,
-              color: TOKENS.surface,
-              boxShadow: TOKENS.shadow
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-end",
+              gap: 8
             },
-            children: announcement
+            children: [
+              devSettingsOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  role: "dialog",
+                  "aria-label": "\uD53C\uB4DC\uBC31 \uC124\uC815",
+                  "data-fk-dev-settings": "",
+                  style: {
+                    width: 292,
+                    maxWidth: "calc(100vw - 48px)",
+                    padding: 14,
+                    borderRadius: 12,
+                    border: `1px solid ${TOKENS.line}`,
+                    background: TOKENS.surface,
+                    boxShadow: TOKENS.shadow
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { display: "flex", alignItems: "flex-start", gap: 9, cursor: "pointer" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: devMode,
+                          onChange: (event) => toggleDevMode(event.currentTarget.checked),
+                          style: { marginTop: 3 }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 700 }, children: "\uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "block", marginTop: 4, color: TOKENS.muted, fontSize: 12.5 }, children: [
+                          "\uCF1C\uBA74 \uC81C\uBCF4\uB97C \uC218\uC9D1\uCC98\uB85C \uBCF4\uB0B4\uC9C0 \uC54A\uACE0 ",
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "\uD074\uB9BD\uBCF4\uB4DC\uB85C \uBCF5\uC0AC" }),
+                          "\uD569\uB2C8\uB2E4. \uBD99\uC5EC\uB123\uC73C\uBA74 \uD654\uBA74\xB7\uC694\uC18C\xB7 \uCEF4\uD3EC\uB10C\uD2B8\xB7\uC18C\uC2A4 \uACBD\uB85C\uAC00 \uAC19\uC774 \uB098\uC635\uB2C8\uB2E4."
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { margin: "12px 0 0", color: TOKENS.muted, fontSize: 12 }, children: [
+                      "\uC774 \uC124\uC815\uC740 \uB85C\uCEEC(",
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: "localhost" }),
+                      ")\uC5D0\uC11C\uB9CC \uBCF4\uC785\uB2C8\uB2E4. \uBC30\uD3EC\uB41C \uD654\uBA74\uC5D0\uC11C\uB294 \uC2E4\uC0AC\uC6A9\uC790\uAC00 \uCF24 \uC218 \uC5C6\uC5B4\uC57C \uD574\uC11C \uC544\uC608 \uB744\uC6B0\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4."
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: baseButton, onClick: () => setDevSettingsOpen(false), children: "\uB2EB\uAE30" }) })
+                  ]
+                }
+              ) : null,
+              announcement && !modal.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  role: "status",
+                  "aria-live": "polite",
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: 10,
+                    background: TOKENS.ink,
+                    color: TOKENS.surface,
+                    boxShadow: TOKENS.shadow
+                  },
+                  children: announcement
+                }
+              ) : null
+            ]
           }
         ) : null,
         screen === "modal" && modal.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1971,7 +2323,7 @@ function FeedbackKit(props) {
                         active: pickingActive,
                         paused: pickingState.paused,
                         disabled: draftLocked,
-                        focusId: import_feedback_kit_core3.MODAL_ACTION_PICK,
+                        focusId: import_feedback_kit_core4.MODAL_ACTION_PICK,
                         onToggle: togglePicking
                       }
                     ),
@@ -2005,7 +2357,7 @@ function FeedbackKit(props) {
                           "button",
                           {
                             type: "button",
-                            "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_REMOVE_SCREENSHOT,
+                            "data-fk-focus-id": import_feedback_kit_core4.MODAL_ACTION_REMOVE_SCREENSHOT,
                             disabled: draftLocked,
                             onClick: () => kit.widget.modal.removeScreenshot(),
                             style: baseButton,
@@ -2065,7 +2417,7 @@ function FeedbackKit(props) {
                       "textarea",
                       {
                         id: "feedback-kit-comment",
-                        "data-fk-focus-id": import_feedback_kit_core3.MODAL_FIELD_COMMENT,
+                        "data-fk-focus-id": import_feedback_kit_core4.MODAL_FIELD_COMMENT,
                         value: modal.comment,
                         disabled: draftLocked,
                         "aria-required": "true",
@@ -2086,7 +2438,7 @@ function FeedbackKit(props) {
                       "select",
                       {
                         id: "feedback-kit-priority",
-                        "data-fk-focus-id": import_feedback_kit_core3.MODAL_FIELD_PRIORITY,
+                        "data-fk-focus-id": import_feedback_kit_core4.MODAL_FIELD_PRIORITY,
                         value: modal.priority,
                         disabled: draftLocked,
                         onChange: (event) => kit.widget.modal.setPriority(event.currentTarget.value),
@@ -2118,7 +2470,7 @@ function FeedbackKit(props) {
                             "button",
                             {
                               type: "button",
-                              "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_RETRY,
+                              "data-fk-focus-id": import_feedback_kit_core4.MODAL_ACTION_RETRY,
                               onClick: () => void kit.widget.retryReport(),
                               style: { ...baseButton, marginLeft: 10 },
                               children: "\uB2E4\uC2DC \uBCF4\uB0B4\uAE30"
@@ -2132,7 +2484,7 @@ function FeedbackKit(props) {
                         "button",
                         {
                           type: "button",
-                          "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_CANCEL,
+                          "data-fk-focus-id": import_feedback_kit_core4.MODAL_ACTION_CANCEL,
                           onClick: closeReport,
                           style: baseButton,
                           children: "\uCDE8\uC18C"
@@ -2142,14 +2494,14 @@ function FeedbackKit(props) {
                         "button",
                         {
                           type: "submit",
-                          "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_SEND,
+                          "data-fk-focus-id": import_feedback_kit_core4.MODAL_ACTION_SEND,
                           disabled: !modal.canSubmit,
                           style: {
                             ...primaryButton,
                             opacity: modal.canSubmit ? 1 : 0.5,
                             cursor: modal.canSubmit ? "pointer" : "not-allowed"
                           },
-                          children: modal.submitStatus === "sending" ? "\uC804\uC1A1 \uC911\u2026" : "\uBCF4\uB0B4\uAE30"
+                          children: modal.submitStatus === "sending" ? "\uC804\uC1A1 \uC911\u2026" : devMode ? "\uBCF5\uC0AC" : "\uBCF4\uB0B4\uAE30"
                         }
                       )
                     ] })
@@ -2228,7 +2580,10 @@ function FeedbackKit(props) {
                   markerCount: pickingState.markers.length,
                   onToggle: togglePicking,
                   onTogglePause: () => activeKit.picking.togglePause(),
-                  onClearMarkers: () => activeKit.picking.clearMarkers()
+                  onClearMarkers: () => activeKit.picking.clearMarkers(),
+                  onReportWholeScreen: () => void openReport(),
+                  devClipCount: devMode ? devClipCount : 0,
+                  onCopyAll: () => void copyAll()
                 }
               ),
               pickingState.markers.map((marker, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -2265,7 +2620,7 @@ function FeedbackKit(props) {
                   "aria-label": "\uC694\uC18C \uC8FC\uC11D",
                   onSubmit: (event) => {
                     event.preventDefault();
-                    void kit.picking.saveAnnotation();
+                    commitPopup();
                   },
                   onPaste: (event) => {
                     if (!firstImageOf(event.clipboardData)) return;
@@ -2347,14 +2702,14 @@ function FeedbackKit(props) {
                           const native = event.nativeEvent;
                           if (native.isComposing) return;
                           event.preventDefault();
-                          void kit.picking.saveAnnotation();
+                          commitPopup();
                         },
                         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 > import_feedback_kit_core3.COMMENT_MAX_CHARS ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "alert", style: { marginTop: 4, color: TOKENS.danger }, children: "4,000\uC790 \uC774\uD558\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }) : null,
+                    popup.comment.length > import_feedback_kit_core4.COMMENT_MAX_CHARS ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
                       "div",
                       {
@@ -2418,7 +2773,7 @@ function FeedbackKit(props) {
                             opacity: popup.canSave && !popup.saving ? 1 : 0.5,
                             cursor: popup.canSave && !popup.saving ? "pointer" : "not-allowed"
                           },
-                          children: popup.saving ? "\uBCF4\uB0B4\uB294 \uC911\u2026" : "\uBCF4\uB0B4\uAE30"
+                          children: popup.saving ? "\uBCF4\uB0B4\uB294 \uC911\u2026" : devMode ? "\uBCF5\uC0AC" : "\uBCF4\uB0B4\uAE30"
                         }
                       )
                     ] })