@solhun/feedback-kit-web 0.10.0 → 0.12.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { ElementInfo, FeedbackPin, FeedbackScreenshot, FeedbackHint, FeedbackReport, SubmitOutcome, QueueStatus, ReportParts, ScreenshotCapture, ScreenshotReencode, RouteWatcher, WidgetControllerOpts, HintProvider, WidgetController, FeedbackStorage, ContextProviders, DiagnosticsInstallOpts, RouteTrailStore } from '@solhun/feedback-kit-core';
+import { ElementInfo, FeedbackPin, FeedbackScreenshot, FeedbackHint, FeedbackReport, SubmitOutcome, QueueStatus, ReportParts, ScreenshotCapture, ScreenshotReencode, RouteWatcher, WidgetControllerOpts, HintProvider, WidgetController, FeedbackAdapter, FeedbackStorage, ContextProviders, DiagnosticsInstallOpts, RouteTrailStore } from '@solhun/feedback-kit-core';
 export { COMMENT_MAX_CHARS, COMMENT_REQUIRED_MESSAGE, COMMENT_TOO_LONG_MESSAGE, ElementInfo, ElementLike, FLOATING_BUTTON_ID, FeedbackAdapter, FeedbackConfig, FeedbackContext, FeedbackHint, FeedbackPin, FeedbackReport, FeedbackStorage, FeedbackUser, HintCatalog, HintElementRule, HintPlatform, HintProvider, HintRankInput, HintScope, MODAL_ACTION_HINT_TOGGLE, MODAL_ACTION_PICK, ModalSubmitStatus, ReportModalController, ReportModalState, ResolvedConfig, SCREENSHOT_FAILED_MESSAGE, SOURCE_ATTR, SUBMIT_DONE_MESSAGE, SUBMIT_PENDING_MESSAGE, ScreenshotStatus, SubmitResult, Visibility, VisibilityEnv, VisibilityFn, WidgetController, WidgetPosition, WidgetScreen, WidgetState, denormalizePin, normalizePin, parseSourceAttr, rankHints, resolveConfig, shouldShowWidget, sourceFromElement } from '@solhun/feedback-kit-core';
 import * as react from 'react';
 
@@ -391,6 +391,11 @@ interface WebWidget {
     widget: WidgetController;
     picking: ElementPickingController;
     store: MarkerStore;
+    /**
+     * "이 화면의 제보가 어디로 가나" 조회. 어댑터가 지원하지 않으면 `null` 이고,
+     * 그러면 설정 화면이 "확인 못 했습니다"를 보여준다. 표시용이라 없어도 제보에는 영향이 없다.
+     */
+    fetchConnection: NonNullable<FeedbackAdapter["fetchConnection"]> | null;
     dispose(): void;
 }
 declare function createWebWidget(opts: WebWidgetOpts): WebWidget;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ElementInfo, FeedbackPin, FeedbackScreenshot, FeedbackHint, FeedbackReport, SubmitOutcome, QueueStatus, ReportParts, ScreenshotCapture, ScreenshotReencode, RouteWatcher, WidgetControllerOpts, HintProvider, WidgetController, FeedbackStorage, ContextProviders, DiagnosticsInstallOpts, RouteTrailStore } from '@solhun/feedback-kit-core';
+import { ElementInfo, FeedbackPin, FeedbackScreenshot, FeedbackHint, FeedbackReport, SubmitOutcome, QueueStatus, ReportParts, ScreenshotCapture, ScreenshotReencode, RouteWatcher, WidgetControllerOpts, HintProvider, WidgetController, FeedbackAdapter, FeedbackStorage, ContextProviders, DiagnosticsInstallOpts, RouteTrailStore } from '@solhun/feedback-kit-core';
 export { COMMENT_MAX_CHARS, COMMENT_REQUIRED_MESSAGE, COMMENT_TOO_LONG_MESSAGE, ElementInfo, ElementLike, FLOATING_BUTTON_ID, FeedbackAdapter, FeedbackConfig, FeedbackContext, FeedbackHint, FeedbackPin, FeedbackReport, FeedbackStorage, FeedbackUser, HintCatalog, HintElementRule, HintPlatform, HintProvider, HintRankInput, HintScope, MODAL_ACTION_HINT_TOGGLE, MODAL_ACTION_PICK, ModalSubmitStatus, ReportModalController, ReportModalState, ResolvedConfig, SCREENSHOT_FAILED_MESSAGE, SOURCE_ATTR, SUBMIT_DONE_MESSAGE, SUBMIT_PENDING_MESSAGE, ScreenshotStatus, SubmitResult, Visibility, VisibilityEnv, VisibilityFn, WidgetController, WidgetPosition, WidgetScreen, WidgetState, denormalizePin, normalizePin, parseSourceAttr, rankHints, resolveConfig, shouldShowWidget, sourceFromElement } from '@solhun/feedback-kit-core';
 import * as react from 'react';
 
@@ -391,6 +391,11 @@ interface WebWidget {
     widget: WidgetController;
     picking: ElementPickingController;
     store: MarkerStore;
+    /**
+     * "이 화면의 제보가 어디로 가나" 조회. 어댑터가 지원하지 않으면 `null` 이고,
+     * 그러면 설정 화면이 "확인 못 했습니다"를 보여준다. 표시용이라 없어도 제보에는 영향이 없다.
+     */
+    fetchConnection: NonNullable<FeedbackAdapter["fetchConnection"]> | null;
     dispose(): void;
 }
 declare function createWebWidget(opts: WebWidgetOpts): WebWidget;

package/dist/index.js

@@ -1062,6 +1062,11 @@ function hintSourceFrom(queue) {
   const cacheKey = adapter.hintsCacheKey ?? "default";
   return { fetchHints: adapter.fetchHints.bind(adapter), cacheKey };
 }
+function connectionSourceFrom(queue) {
+  const adapter = queue.adapter;
+  if (!adapter || typeof adapter.fetchConnection !== "function") return null;
+  return adapter.fetchConnection.bind(adapter);
+}
 function resolveHintProvider(opts) {
   if (opts.hintProvider) return opts.hintProvider;
   if (opts.hints) {
@@ -1147,6 +1152,7 @@ function createWebWidget(opts) {
     widget,
     picking,
     store,
+    fetchConnection: connectionSourceFrom(opts.queue),
     dispose() {
       picking.dispose();
       widget.dispose();
@@ -1174,7 +1180,7 @@ import {
 } from "react";
 
 // src/version.ts
-var VERSION = true ? "0.10.0" : "dev";
+var VERSION = true ? "0.12.0" : "dev";
 
 // src/dev-clipboard.ts
 import { sourceFromElement } from "@solhun/feedback-kit-core";
@@ -1252,6 +1258,36 @@ function resolveDevMode(propValue, stored) {
   if (stored !== null) return stored;
   return propValue === true;
 }
+var SETTINGS_FLAG = "fk-settings";
+var SESSION_KEY = "feedback-kit:settings-visible";
+function isSettingsRequested(search, session) {
+  const store = session === void 0 ? sessionStorageOrNull() : session;
+  let requested = false;
+  try {
+    requested = new URLSearchParams(search).get(SETTINGS_FLAG) === "1";
+  } catch {
+    requested = false;
+  }
+  if (requested) {
+    try {
+      store?.setItem(SESSION_KEY, "1");
+    } catch {
+    }
+    return true;
+  }
+  try {
+    return store?.getItem(SESSION_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+function sessionStorageOrNull() {
+  try {
+    return globalThis.sessionStorage ?? null;
+  } catch {
+    return null;
+  }
+}
 
 // src/feedback-kit.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1749,10 +1785,15 @@ function FeedbackKit(props) {
   const [pickingState, setPickingState] = useState(INITIAL_PICKING_STATE);
   const [announcement, setAnnouncement] = useState(null);
   const [devMode, setDevMode] = useState(() => resolveDevMode(props.devMode, readDevPreference()));
-  const [devSettingsAvailable] = useState(
+  const [devToggleAvailable] = useState(
     () => props.devMode === true || isDevSettingsHost(globalThis.location?.hostname ?? "")
   );
+  const [devSettingsAvailable] = useState(
+    () => props.devMode === true || isDevSettingsHost(globalThis.location?.hostname ?? "") || isSettingsRequested(globalThis.location?.search ?? "")
+  );
   const [devSettingsOpen, setDevSettingsOpen] = useState(false);
+  const [connection, setConnection] = useState(null);
+  const [connectionState, setConnectionState] = useState("idle");
   const devClipsRef = useRef([]);
   const [devClipCount, setDevClipCount] = useState(0);
   const [devFallbackText, setDevFallbackText] = useState(null);
@@ -1912,6 +1953,20 @@ function FeedbackKit(props) {
     if (devClipsRef.current.length === 0) return;
     await putOnClipboard(renderDevClipList(devClipsRef.current));
   }
+  function openDevSettings() {
+    setDevSettingsOpen(true);
+    if (connectionState !== "idle") return;
+    const fetchConnection = activeKit.fetchConnection;
+    if (!fetchConnection) {
+      setConnectionState("fail");
+      return;
+    }
+    setConnectionState("loading");
+    void fetchConnection().then((value) => {
+      setConnection(value);
+      setConnectionState(value ? "done" : "fail");
+    }).catch(() => setConnectionState("fail"));
+  }
   function toggleDevMode(next) {
     writeDevPreference(next);
     setDevMode(next);
@@ -2033,7 +2088,7 @@ function FeedbackKit(props) {
                     "data-fk-dev-settings-toggle": "",
                     "aria-label": "\uD53C\uB4DC\uBC31 \uC124\uC815",
                     "aria-expanded": devSettingsOpen,
-                    onClick: () => setDevSettingsOpen((open) => !open),
+                    onClick: () => devSettingsOpen ? setDevSettingsOpen(false) : openDevSettings(),
                     style: {
                       ...baseButton,
                       width: 46,
@@ -2165,6 +2220,7 @@ function FeedbackKit(props) {
                         {
                           type: "checkbox",
                           checked: devMode,
+                          disabled: !devToggleAvailable,
                           onChange: (event) => toggleDevMode(event.currentTarget.checked),
                           style: { marginTop: 3 }
                         }
@@ -2178,11 +2234,61 @@ function FeedbackKit(props) {
                         ] })
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs("p", { style: { margin: "12px 0 0", color: TOKENS.muted, fontSize: 12 }, children: [
-                      "\uC774 \uC124\uC815\uC740 \uB85C\uCEEC(",
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-fk-connection": "",
+                        style: {
+                          marginTop: 12,
+                          paddingTop: 12,
+                          borderTop: `1px solid ${TOKENS.line}`,
+                          fontSize: 12.5
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, marginBottom: 6 }, children: "\uBCF4\uB0B4\uB294 \uACF3" }),
+                          connectionState === "loading" ? /* @__PURE__ */ jsx("div", { style: { color: TOKENS.muted }, children: "\uD655\uC778\uD558\uB294 \uC911\u2026" }) : connectionState === "fail" || !connection ? (
+                            // 조용히 비우면 "연결이 없다"로 읽힌다. 못 물어봤다는 것과 없다는 것은 다르다.
+                            /* @__PURE__ */ jsx("div", { style: { color: TOKENS.muted }, children: "\uD655\uC778\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4(\uC218\uC9D1\uCC98\uAC00 \uC751\uB2F5\uD558\uC9C0 \uC54A\uC74C)." })
+                          ) : /* @__PURE__ */ jsxs("ul", { style: { margin: 0, paddingLeft: 16, color: TOKENS.ink, lineHeight: 1.7 }, children: [
+                            /* @__PURE__ */ jsxs("li", { children: [
+                              "\uC218\uC9D1\uCC98 \xB7 ",
+                              connection.project.name ?? "\uC774\uB984 \uC5C6\uB294 \uD504\uB85C\uC81D\uD2B8"
+                            ] }),
+                            /* @__PURE__ */ jsxs("li", { children: [
+                              "Linear \xB7",
+                              " ",
+                              connection.linear.connected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                connection.linear.teamName ?? "\uC5F0\uACB0\uB41C \uD300",
+                                connection.linear.projectName ? ` / ${connection.linear.projectName}` : "",
+                                " \u2014 ",
+                                /* @__PURE__ */ jsx("b", { children: connection.linear.autoExport ? "\uC81C\uBCF4\uAC00 \uC790\uB3D9\uC73C\uB85C \uB098\uAC11\uB2C8\uB2E4" : "\uC790\uB3D9 \uBC1C\uC1A1 \uAEBC\uC9D0" })
+                              ] }) : "\uC5F0\uACB0 \uC5C6\uC74C"
+                            ] }),
+                            /* @__PURE__ */ jsxs("li", { children: [
+                              "Symphony \xB7",
+                              " ",
+                              connection.symphonySlug ? `${connection.symphonySlug} \uAC00 \uCC98\uB9AC` : "\uC790\uB3D9 \uCC98\uB9AC \uC548 \uD568"
+                            ] })
+                          ] }),
+                          devMode ? (
+                            // 개발용 모드가 켜져 있으면 위 목록은 "원래 가던 곳"일 뿐이다. 그대로 두면
+                            // 지금도 거기로 가는 줄 읽는다.
+                            /* @__PURE__ */ jsx("div", { style: { marginTop: 8, color: TOKENS.warning, fontWeight: 700 }, children: "\uC9C0\uAE08\uC740 \uC5B4\uB514\uC5D0\uB3C4 \uC548 \uBCF4\uB0C5\uB2C8\uB2E4 \u2014 \uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC\uAC00 \uCF1C\uC838 \uC788\uC2B5\uB2C8\uB2E4." })
+                          ) : null
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("p", { style: { margin: "12px 0 0", color: TOKENS.muted, fontSize: 12 }, children: devToggleAvailable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC\uB294 \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."
-                    ] }),
+                      ")\uC5D0\uC11C\uB9CC \uCF24 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uBC30\uD3EC\uB41C \uD654\uBA74\uC5D0\uC11C \uC2E4\uC0AC\uC6A9\uC790\uAC00 \uCF1C\uBA74 \uADF8 \uC0AC\uB78C \uC81C\uBCF4\uAC00 \uC5B4\uB514\uC5D0\uB3C4 \uC548 \uB0A8\uAE30 \uB54C\uBB38\uC785\uB2C8\uB2E4."
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\uC5EC\uAE30\uC11C\uB294 ",
+                      /* @__PURE__ */ jsx("b", { children: "\uBCF4\uAE30\uB9CC" }),
+                      " \uB429\uB2C8\uB2E4. \uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC\uB294 \uB85C\uCEEC(",
+                      /* @__PURE__ */ jsx("code", { children: "localhost" }),
+                      ")\uC5D0\uC11C\uB9CC \uCF24 \uC218 \uC788\uC2B5\uB2C8\uB2E4 \u2014 \uC2E4\uC0AC\uC6A9\uC790\uAC00 \uCF1C\uBA74 \uADF8 \uC0AC\uB78C \uC81C\uBCF4\uAC00 \uC5B4\uB514\uC5D0\uB3C4 \uC548 \uB0A8\uAE30 \uB54C\uBB38\uC785\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" }) })
                   ]
                 }