@solhun/feedback-kit-web 0.9.0 → 0.10.0

package/dist/index.d.cts

@@ -369,8 +369,12 @@ interface WebWidgetOpts extends Omit<WidgetControllerOpts, "platform" | "initial
      * 개발자가 로컬에서 고치는 중일 때 라쏘런 왕복(보내고·트리아지하고·이슈가 되고)이 오히려
      * 느리다. 정작 고칠 사람은 지금 그 화면을 보고 있는 본인이다.
      *
-     * **기본은 꺼짐이고 마운트 시점에 고정한다** — 도는 중에 바뀌면 "지금 보낸 건 어디로 갔나"가
-     * 생긴다. 켜져 있는 동안은 그 사실이 화면에 계속 보여야 한다(조용한 유실을 막는 유일한 방어).
+     * **기본은 꺼짐**이다. 이건 초기값일 뿐이고, 사람이 화면의 톱니(설정)에서 켜거나 끄면
+     * 그 선택이 이 값을 이긴다 — 안 그러면 개발 빌드에서 끄려고 또 코드를 고쳐야 한다.
+     * 톱니는 **로컬(`localhost`)에서만** 뜬다. 배포된 화면에서 실사용자가 켜면 그 사람 제보는
+     * 어디에도 안 남고 본인은 보냈다고 믿는다. 이 값을 `true` 로 주면 톱니도 같이 뜬다.
+     *
+     * 켜져 있는 동안은 그 사실이 화면에 계속 보인다(조용한 유실을 막는 유일한 방어).
      *
      * 웹 전용이다. 앱에는 DOM 이 없어 선택자·컴포넌트 경로·소스 경로가 성립하지 않는다.
      */

package/dist/index.d.ts

@@ -369,8 +369,12 @@ interface WebWidgetOpts extends Omit<WidgetControllerOpts, "platform" | "initial
      * 개발자가 로컬에서 고치는 중일 때 라쏘런 왕복(보내고·트리아지하고·이슈가 되고)이 오히려
      * 느리다. 정작 고칠 사람은 지금 그 화면을 보고 있는 본인이다.
      *
-     * **기본은 꺼짐이고 마운트 시점에 고정한다** — 도는 중에 바뀌면 "지금 보낸 건 어디로 갔나"가
-     * 생긴다. 켜져 있는 동안은 그 사실이 화면에 계속 보여야 한다(조용한 유실을 막는 유일한 방어).
+     * **기본은 꺼짐**이다. 이건 초기값일 뿐이고, 사람이 화면의 톱니(설정)에서 켜거나 끄면
+     * 그 선택이 이 값을 이긴다 — 안 그러면 개발 빌드에서 끄려고 또 코드를 고쳐야 한다.
+     * 톱니는 **로컬(`localhost`)에서만** 뜬다. 배포된 화면에서 실사용자가 켜면 그 사람 제보는
+     * 어디에도 안 남고 본인은 보냈다고 믿는다. 이 값을 `true` 로 주면 톱니도 같이 뜬다.
+     *
+     * 켜져 있는 동안은 그 사실이 화면에 계속 보인다(조용한 유실을 막는 유일한 방어).
      *
      * 웹 전용이다. 앱에는 DOM 이 없어 선택자·컴포넌트 경로·소스 경로가 성립하지 않는다.
      */

package/dist/index.js

@@ -1174,7 +1174,7 @@ import {
 } from "react";
 
 // src/version.ts
-var VERSION = true ? "0.9.0" : "dev";
+var VERSION = true ? "0.10.0" : "dev";
 
 // src/dev-clipboard.ts
 import { sourceFromElement } from "@solhun/feedback-kit-core";
@@ -1222,6 +1222,37 @@ async function writeToClipboard(text) {
   }
 }
 
+// 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
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var TOKENS = {
@@ -1717,7 +1748,11 @@ function FeedbackKit(props) {
   const [widgetState, setWidgetState] = useState(null);
   const [pickingState, setPickingState] = useState(INITIAL_PICKING_STATE);
   const [announcement, setAnnouncement] = useState(null);
-  const [devMode] = useState(() => props.devMode === true);
+  const [devMode, setDevMode] = useState(() => resolveDevMode(props.devMode, readDevPreference()));
+  const [devSettingsAvailable] = useState(
+    () => props.devMode === true || isDevSettingsHost(globalThis.location?.hostname ?? "")
+  );
+  const [devSettingsOpen, setDevSettingsOpen] = useState(false);
   const devClipsRef = useRef([]);
   const [devClipCount, setDevClipCount] = useState(0);
   const [devFallbackText, setDevFallbackText] = useState(null);
@@ -1858,6 +1893,13 @@ function FeedbackKit(props) {
     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;
@@ -1870,6 +1912,16 @@ function FeedbackKit(props) {
     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);
@@ -1927,8 +1979,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;
@@ -1940,27 +2010,64 @@ function FeedbackKit(props) {
       style: { fontFamily: FONT_STACK, color: TOKENS.ink, fontSize: 14, lineHeight: 1.45 },
       children: [
         /* @__PURE__ */ jsx("style", { children: `@keyframes feedback-kit-spin{to{transform:rotate(360deg)}}` }),
-        floating ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            ref: floatingButtonRef,
-            id: FLOATING_BUTTON_ID,
-            type: "button",
-            "aria-label": "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30",
-            onClick: () => void pressFloatingButton(),
-            style: {
-              ...primaryButton,
-              position: "fixed",
-              right: 24,
-              bottom: 24,
-              zIndex: 2147483600,
-              minWidth: 112,
-              minHeight: 46,
-              borderRadius: 24,
-              boxShadow: TOKENS.shadow
-            },
-            children: "\uD53C\uB4DC\uBC31"
-          }
+        floating ? (
+          // 톱니와 피드백 버튼을 한 상자에 넣는다. 각각 fixed 로 두면 버튼 글자 길이가
+          // 바뀔 때마다 좌표를 다시 맞춰야 하고, 그러다 겹친다.
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "fixed",
+                right: 24,
+                bottom: 24,
+                zIndex: 2147483600,
+                display: "flex",
+                alignItems: "center",
+                gap: 8
+              },
+              children: [
+                devSettingsAvailable ? /* @__PURE__ */ 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__ */ jsx("span", { "aria-hidden": "true", children: "\u2699" })
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: floatingButtonRef,
+                    id: 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 ? (
           // 켠 줄 모르고 제보하면 "보냈다"고 믿는데 수집처엔 아무것도 안 남는다.
@@ -2022,23 +2129,80 @@ function FeedbackKit(props) {
             ]
           }
         ) : null,
-        announcement && !modal.open ? /* @__PURE__ */ jsx(
+        devSettingsOpen || announcement && !modal.open ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("label", { style: { display: "flex", alignItems: "flex-start", gap: 9, cursor: "pointer" }, children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: devMode,
+                          onChange: (event) => toggleDevMode(event.currentTarget.checked),
+                          style: { marginTop: 3 }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        /* @__PURE__ */ jsx("span", { style: { fontWeight: 700 }, children: "\uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC" }),
+                        /* @__PURE__ */ 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__ */ 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__ */ jsxs("p", { style: { margin: "12px 0 0", color: TOKENS.muted, fontSize: 12 }, children: [
+                      "\uC774 \uC124\uC815\uC740 \uB85C\uCEEC(",
+                      /* @__PURE__ */ 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__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 12 }, children: /* @__PURE__ */ jsx("button", { type: "button", style: baseButton, onClick: () => setDevSettingsOpen(false), children: "\uB2EB\uAE30" }) })
+                  ]
+                }
+              ) : null,
+              announcement && !modal.open ? /* @__PURE__ */ 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__ */ jsx(
@@ -2297,7 +2461,7 @@ function FeedbackKit(props) {
                             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"
                         }
                       )
                     ] })
@@ -2416,11 +2580,7 @@ function FeedbackKit(props) {
                   "aria-label": "\uC694\uC18C \uC8FC\uC11D",
                   onSubmit: (event) => {
                     event.preventDefault();
-                    if (devMode) {
-                      void copyOne();
-                      return;
-                    }
-                    void kit.picking.saveAnnotation();
+                    commitPopup();
                   },
                   onPaste: (event) => {
                     if (!firstImageOf(event.clipboardData)) return;
@@ -2502,7 +2662,7 @@ 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)",