@solhun/feedback-kit-web 0.8.0 → 0.9.0

package/dist/index.d.cts

@@ -354,6 +354,27 @@ interface WebWidgetOpts extends Omit<WidgetControllerOpts, "platform" | "initial
     };
     /** 요소를 고른 뒤 띄울 UI. 기본은 `popup`. */
     pickTarget?: PickTarget;
+    /**
+     * 플로팅 버튼을 눌렀을 때 무엇이 열리는가. **웹 기본은 `"pick"`(요소 지목)** 이다.
+     *
+     * 웹 제보는 대개 "이 요소요" 라서, 지목을 매번 켜게 하면 그 한 단계가 계속 남는다. 0.8.0
+     * 까지는 모달이 기본이었으므로, 그 동작을 유지하려면 `"report"` 를 준다.
+     *
+     * 앱에는 지목이 없어 이 설정이 없다(앱은 언제나 모달이다) — 없는 기능을 켤 수는 없다.
+     */
+    defaultMode?: "pick" | "report";
+    /**
+     * 개발용 모드. 제보를 **수집처로 보내지 않고 클립보드에 복사**한다.
+     *
+     * 개발자가 로컬에서 고치는 중일 때 라쏘런 왕복(보내고·트리아지하고·이슈가 되고)이 오히려
+     * 느리다. 정작 고칠 사람은 지금 그 화면을 보고 있는 본인이다.
+     *
+     * **기본은 꺼짐이고 마운트 시점에 고정한다** — 도는 중에 바뀌면 "지금 보낸 건 어디로 갔나"가
+     * 생긴다. 켜져 있는 동안은 그 사실이 화면에 계속 보여야 한다(조용한 유실을 막는 유일한 방어).
+     *
+     * 웹 전용이다. 앱에는 DOM 이 없어 선택자·컴포넌트 경로·소스 경로가 성립하지 않는다.
+     */
+    devMode?: boolean;
     /**
      * 정적 힌트 목록(설정으로 직접 넘김). 주면 서버에서 받아오지 않는다 — 도입 초기·오프라인
      * 데모·테스트용이다. 서버 목록과 합치지 않는다(둘을 섞으면 무엇이 보이는지 설명이 안 된다).

package/dist/index.d.ts

@@ -354,6 +354,27 @@ interface WebWidgetOpts extends Omit<WidgetControllerOpts, "platform" | "initial
     };
     /** 요소를 고른 뒤 띄울 UI. 기본은 `popup`. */
     pickTarget?: PickTarget;
+    /**
+     * 플로팅 버튼을 눌렀을 때 무엇이 열리는가. **웹 기본은 `"pick"`(요소 지목)** 이다.
+     *
+     * 웹 제보는 대개 "이 요소요" 라서, 지목을 매번 켜게 하면 그 한 단계가 계속 남는다. 0.8.0
+     * 까지는 모달이 기본이었으므로, 그 동작을 유지하려면 `"report"` 를 준다.
+     *
+     * 앱에는 지목이 없어 이 설정이 없다(앱은 언제나 모달이다) — 없는 기능을 켤 수는 없다.
+     */
+    defaultMode?: "pick" | "report";
+    /**
+     * 개발용 모드. 제보를 **수집처로 보내지 않고 클립보드에 복사**한다.
+     *
+     * 개발자가 로컬에서 고치는 중일 때 라쏘런 왕복(보내고·트리아지하고·이슈가 되고)이 오히려
+     * 느리다. 정작 고칠 사람은 지금 그 화면을 보고 있는 본인이다.
+     *
+     * **기본은 꺼짐이고 마운트 시점에 고정한다** — 도는 중에 바뀌면 "지금 보낸 건 어디로 갔나"가
+     * 생긴다. 켜져 있는 동안은 그 사실이 화면에 계속 보여야 한다(조용한 유실을 막는 유일한 방어).
+     *
+     * 웹 전용이다. 앱에는 DOM 이 없어 선택자·컴포넌트 경로·소스 경로가 성립하지 않는다.
+     */
+    devMode?: boolean;
     /**
      * 정적 힌트 목록(설정으로 직접 넘김). 주면 서버에서 받아오지 않는다 — 도입 초기·오프라인
      * 데모·테스트용이다. 서버 목록과 합치지 않는다(둘을 섞으면 무엇이 보이는지 설명이 안 된다).

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/index.ts
 import { resolveConfig, shouldShowWidget } from "@solhun/feedback-kit-core";
-import { parseSourceAttr, SOURCE_ATTR, sourceFromElement } from "@solhun/feedback-kit-core";
+import { parseSourceAttr, SOURCE_ATTR, sourceFromElement as sourceFromElement2 } from "@solhun/feedback-kit-core";
 import {
   COMMENT_MAX_CHARS as COMMENT_MAX_CHARS3,
   COMMENT_REQUIRED_MESSAGE,
@@ -1174,7 +1174,53 @@ import {
 } from "react";
 
 // src/version.ts
-var VERSION = true ? "0.8.0" : "dev";
+var VERSION = true ? "0.9.0" : "dev";
+
+// src/dev-clipboard.ts
+import { sourceFromElement } from "@solhun/feedback-kit-core";
+function sourceLine(item) {
+  const mapping = 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/feedback-kit.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1443,7 +1489,10 @@ function PickBar({
   markerCount,
   onToggle,
   onTogglePause,
-  onClearMarkers
+  onClearMarkers,
+  onReportWholeScreen,
+  devClipCount,
+  onCopyAll
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1498,6 +1547,48 @@ function PickBar({
             ]
           }
         ),
+        /* @__PURE__ */ 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__ */ jsx("span", { "aria-hidden": "true", children: "\u25A3" }),
+              "\uD654\uBA74 \uC804\uCCB4\uB85C \uBCF4\uB0B4\uAE30"
+            ]
+          }
+        ),
+        devClipCount > 0 ? /* @__PURE__ */ 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__ */ jsx("span", { "aria-hidden": "true", children: "\u29C9" }),
+              "\uC804\uBD80 \uBCF5\uC0AC ",
+              devClipCount
+            ]
+          }
+        ) : null,
         markerCount > 0 ? /* @__PURE__ */ jsxs(
           "button",
           {
@@ -1626,6 +1717,10 @@ 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 devClipsRef = useRef([]);
+  const [devClipCount, setDevClipCount] = useState(0);
+  const [devFallbackText, setDevFallbackText] = useState(null);
   const {
     queue,
     createReport,
@@ -1750,6 +1845,39 @@ 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);
+  }
+  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));
+  }
+  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());
@@ -1819,7 +1947,7 @@ function FeedbackKit(props) {
             id: FLOATING_BUTTON_ID,
             type: "button",
             "aria-label": "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30",
-            onClick: () => void openReport(),
+            onClick: () => void pressFloatingButton(),
             style: {
               ...primaryButton,
               position: "fixed",
@@ -1834,6 +1962,66 @@ function FeedbackKit(props) {
             children: "\uD53C\uB4DC\uBC31"
           }
         ) : null,
+        floating && devMode ? (
+          // 켠 줄 모르고 제보하면 "보냈다"고 믿는데 수집처엔 아무것도 안 남는다.
+          // 조용한 유실이라 이 표시가 유일한 방어다. 버튼 **밖**에 두는 이유는 버튼의
+          // 접근성 이름을 오염시키지 않기 위해서다.
+          /* @__PURE__ */ 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__ */ jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-label": "\uD074\uB9BD\uBCF4\uB4DC\uC5D0 \uBABB \uC368\uC11C \uB300\uC2E0 \uBCF4\uC5EC\uC90D\uB2C8\uB2E4",
+            "data-fk-dev-fallback": "",
+            style: {
+              position: "fixed",
+              right: 24,
+              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: [
+              /* @__PURE__ */ 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__ */ jsx(
+                "textarea",
+                {
+                  readOnly: true,
+                  value: devFallbackText,
+                  onFocus: (event) => event.currentTarget.select(),
+                  style: { ...inputStyle, height: 140, fontFamily: "ui-monospace, monospace", fontSize: 12 }
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 8 }, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setDevFallbackText(null), style: baseButton, children: "\uB2EB\uAE30" }) })
+            ]
+          }
+        ) : null,
         announcement && !modal.open ? /* @__PURE__ */ jsx(
           "div",
           {
@@ -2188,7 +2376,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__ */ jsx(
@@ -2225,6 +2416,10 @@ function FeedbackKit(props) {
                   "aria-label": "\uC694\uC18C \uC8FC\uC11D",
                   onSubmit: (event) => {
                     event.preventDefault();
+                    if (devMode) {
+                      void copyOne();
+                      return;
+                    }
                     void kit.picking.saveAnnotation();
                   },
                   onPaste: (event) => {
@@ -2378,7 +2573,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"
                         }
                       )
                     ] })
@@ -2460,7 +2655,7 @@ export {
   reencodeWebScreenshot,
   resolveConfig,
   shouldShowWidget,
-  sourceFromElement,
+  sourceFromElement2 as sourceFromElement,
   visibleText,
   webContextProviders,
   webDiagnosticsOptions,