@solhun/feedback-kit-web 0.6.1 → 0.7.0

package/dist/index.d.cts

@@ -109,6 +109,18 @@ interface AnnotationPopupState {
 }
 interface PickingState {
     active: boolean;
+    /**
+     * 켜져 있지만 **클릭 가로채기만 잠시 끈 상태**.
+     *
+     * 왜 필요한가: 지목 모드는 페이지의 모든 클릭을 먹는다(그래야 지목하려고 누른 링크가
+     * 실제로 이동해 버리지 않는다). 그 대가로 **제보할 화면을 만들 수가 없다** — 드롭다운을
+     * 열고 그 안의 항목을 지목하고 싶어도 여는 클릭부터 막힌다. 그때 모드를 끄면 다시
+     * 켜야 하고, 사용자에겐 그게 "모드가 유지되지 않는다"로 읽힌다.
+     *
+     * 그래서 끄는 것과 멈추는 것을 나눈다. 멈춘 동안 페이지는 원래대로 동작하고, 모드는
+     * 켜진 채로 남는다.
+     */
+    paused: boolean;
     /** 지금 마우스가 올라가 있는 요소. 하이라이트를 그리는 근거. */
     hovered: ElementInfo | null;
     popup: AnnotationPopupState | null;
@@ -167,6 +179,12 @@ declare class ElementPickingController {
     private readonly rankHintsFor;
     private readonly listeners;
     private active;
+    /**
+     * 일시중지. **저장하지 않는다** — 멈추는 목적이 대개 "링크를 눌러 다른 화면으로 가는 것"
+     * 이라, 그 이동이 끝나면 지목이 돌아와 있는 게 목적에 맞다. 같은 이유로 경로가 바뀌면
+     * 스스로 풀린다(`syncPath`) — 그래야 SPA 이동과 새로고침이 같게 동작한다.
+     */
+    private paused;
     private attached;
     private hovered;
     private popup;
@@ -179,7 +197,7 @@ declare class ElementPickingController {
     /** 지금 도는 자동 캡처. Enter 가 캡처보다 빨랐을 때 기다릴 대상. */
     private capturing;
     /**
-     * 사용자가 [제안 ▾] 를 직접 건드렸는가. 한 번이라도 건드리면 이후 타이핑에 의한 자동
+     * 사용자가 [이런 건가요? ▾] 를 직접 건드렸는가. 한 번이라도 건드리면 이후 타이핑에 의한 자동
      * 접힘/펼침이 멈춘다 — 모달의 `userToggledHints` 와 같은 규칙. 팝업을 새로 열 때마다 리셋된다.
      */
     private userToggledHints;
@@ -188,10 +206,23 @@ declare class ElementPickingController {
     constructor(opts: ElementPickingOpts);
     getState(): PickingState;
     get isActive(): boolean;
+    /** 켜져 있지만 클릭을 안 먹는 상태인가. */
+    get isPaused(): boolean;
     subscribe(listener: PickingListener): () => void;
     start(): void;
     /** [지목 종료]. 저장된 플래그까지 지워서 새로고침해도 다시 켜지지 않게 한다. */
     stop(): void;
+    /**
+     * 잠시 멈춘다 — 페이지 클릭이 원래대로 동작하고, 모드는 켜진 채로 남는다.
+     *
+     * 팝업이 열려 있으면 **그대로 둔다.** 쓰던 한 줄을 여기서 지우면 「지목 켜면 모달 초안이
+     * 날아간다」와 같은 사고를 다른 자리에 만드는 셈이다. 팝업은 위젯 자신의 UI 라
+     * 리스너를 떼도 계속 눌린다.
+     */
+    pause(): void;
+    /** 다시 지목을 받는다. */
+    resume(): void;
+    togglePause(): void;
     /**
      * 저장돼 있던 모드를 되살린다. 새로고침·페이지 이동 직후에 한 번 부른다.
      * @returns 되살아났으면 true.
@@ -220,7 +251,7 @@ declare class ElementPickingController {
      * 아니면 줄바꿈 뒤 이어붙인다 — 모달의 `applyHint` 와 동일한 규칙이다.
      */
     applyHint(hintId: string): void;
-    /** [제안 ▾] 토글. 방향과 무관하게 이후 자동 접힘/펼침을 멈춘다. */
+    /** [이런 건가요? ▾] 토글. 방향과 무관하게 이후 자동 접힘/펼침을 멈춘다. */
     toggleHints(): void;
     /**
      * 사용자가 붙여넣기(Cmd+V)나 드래그로 넣은 그림. 자동 캡처 결과를 덮는다.

package/dist/index.d.ts

@@ -109,6 +109,18 @@ interface AnnotationPopupState {
 }
 interface PickingState {
     active: boolean;
+    /**
+     * 켜져 있지만 **클릭 가로채기만 잠시 끈 상태**.
+     *
+     * 왜 필요한가: 지목 모드는 페이지의 모든 클릭을 먹는다(그래야 지목하려고 누른 링크가
+     * 실제로 이동해 버리지 않는다). 그 대가로 **제보할 화면을 만들 수가 없다** — 드롭다운을
+     * 열고 그 안의 항목을 지목하고 싶어도 여는 클릭부터 막힌다. 그때 모드를 끄면 다시
+     * 켜야 하고, 사용자에겐 그게 "모드가 유지되지 않는다"로 읽힌다.
+     *
+     * 그래서 끄는 것과 멈추는 것을 나눈다. 멈춘 동안 페이지는 원래대로 동작하고, 모드는
+     * 켜진 채로 남는다.
+     */
+    paused: boolean;
     /** 지금 마우스가 올라가 있는 요소. 하이라이트를 그리는 근거. */
     hovered: ElementInfo | null;
     popup: AnnotationPopupState | null;
@@ -167,6 +179,12 @@ declare class ElementPickingController {
     private readonly rankHintsFor;
     private readonly listeners;
     private active;
+    /**
+     * 일시중지. **저장하지 않는다** — 멈추는 목적이 대개 "링크를 눌러 다른 화면으로 가는 것"
+     * 이라, 그 이동이 끝나면 지목이 돌아와 있는 게 목적에 맞다. 같은 이유로 경로가 바뀌면
+     * 스스로 풀린다(`syncPath`) — 그래야 SPA 이동과 새로고침이 같게 동작한다.
+     */
+    private paused;
     private attached;
     private hovered;
     private popup;
@@ -179,7 +197,7 @@ declare class ElementPickingController {
     /** 지금 도는 자동 캡처. Enter 가 캡처보다 빨랐을 때 기다릴 대상. */
     private capturing;
     /**
-     * 사용자가 [제안 ▾] 를 직접 건드렸는가. 한 번이라도 건드리면 이후 타이핑에 의한 자동
+     * 사용자가 [이런 건가요? ▾] 를 직접 건드렸는가. 한 번이라도 건드리면 이후 타이핑에 의한 자동
      * 접힘/펼침이 멈춘다 — 모달의 `userToggledHints` 와 같은 규칙. 팝업을 새로 열 때마다 리셋된다.
      */
     private userToggledHints;
@@ -188,10 +206,23 @@ declare class ElementPickingController {
     constructor(opts: ElementPickingOpts);
     getState(): PickingState;
     get isActive(): boolean;
+    /** 켜져 있지만 클릭을 안 먹는 상태인가. */
+    get isPaused(): boolean;
     subscribe(listener: PickingListener): () => void;
     start(): void;
     /** [지목 종료]. 저장된 플래그까지 지워서 새로고침해도 다시 켜지지 않게 한다. */
     stop(): void;
+    /**
+     * 잠시 멈춘다 — 페이지 클릭이 원래대로 동작하고, 모드는 켜진 채로 남는다.
+     *
+     * 팝업이 열려 있으면 **그대로 둔다.** 쓰던 한 줄을 여기서 지우면 「지목 켜면 모달 초안이
+     * 날아간다」와 같은 사고를 다른 자리에 만드는 셈이다. 팝업은 위젯 자신의 UI 라
+     * 리스너를 떼도 계속 눌린다.
+     */
+    pause(): void;
+    /** 다시 지목을 받는다. */
+    resume(): void;
+    togglePause(): void;
     /**
      * 저장돼 있던 모드를 되살린다. 새로고침·페이지 이동 직후에 한 번 부른다.
      * @returns 되살아났으면 true.
@@ -220,7 +251,7 @@ declare class ElementPickingController {
      * 아니면 줄바꿈 뒤 이어붙인다 — 모달의 `applyHint` 와 동일한 규칙이다.
      */
     applyHint(hintId: string): void;
-    /** [제안 ▾] 토글. 방향과 무관하게 이후 자동 접힘/펼침을 멈춘다. */
+    /** [이런 건가요? ▾] 토글. 방향과 무관하게 이후 자동 접힘/펼침을 멈춘다. */
     toggleHints(): void;
     /**
      * 사용자가 붙여넣기(Cmd+V)나 드래그로 넣은 그림. 자동 캡처 결과를 덮는다.

package/dist/index.js

@@ -320,6 +320,12 @@ var ElementPickingController = class {
   constructor(opts) {
     this.listeners = /* @__PURE__ */ new Set();
     this.active = false;
+    /**
+     * 일시중지. **저장하지 않는다** — 멈추는 목적이 대개 "링크를 눌러 다른 화면으로 가는 것"
+     * 이라, 그 이동이 끝나면 지목이 돌아와 있는 게 목적에 맞다. 같은 이유로 경로가 바뀌면
+     * 스스로 풀린다(`syncPath`) — 그래야 SPA 이동과 새로고침이 같게 동작한다.
+     */
+    this.paused = false;
     this.attached = false;
     this.hovered = null;
     this.popup = null;
@@ -331,7 +337,7 @@ var ElementPickingController = class {
     /** 지금 도는 자동 캡처. Enter 가 캡처보다 빨랐을 때 기다릴 대상. */
     this.capturing = null;
     /**
-     * 사용자가 [제안 ▾] 를 직접 건드렸는가. 한 번이라도 건드리면 이후 타이핑에 의한 자동
+     * 사용자가 [이런 건가요? ▾] 를 직접 건드렸는가. 한 번이라도 건드리면 이후 타이핑에 의한 자동
      * 접힘/펼침이 멈춘다 — 모달의 `userToggledHints` 와 같은 규칙. 팝업을 새로 열 때마다 리셋된다.
      */
     this.userToggledHints = false;
@@ -358,6 +364,7 @@ var ElementPickingController = class {
   getState() {
     return {
       active: this.active,
+      paused: this.paused,
       hovered: this.hovered,
       popup: this.popup,
       markers: this.markers
@@ -366,6 +373,10 @@ var ElementPickingController = class {
   get isActive() {
     return this.active;
   }
+  /** 켜져 있지만 클릭을 안 먹는 상태인가. */
+  get isPaused() {
+    return this.paused;
+  }
   subscribe(listener) {
     this.listeners.add(listener);
     listener(this.getState());
@@ -377,6 +388,7 @@ var ElementPickingController = class {
   start() {
     if (this.active) return;
     this.active = true;
+    this.paused = false;
     this.store.setPickingActive(true);
     this.attach();
     this.startPathWatch();
@@ -386,6 +398,7 @@ var ElementPickingController = class {
   /** [지목 종료]. 저장된 플래그까지 지워서 새로고침해도 다시 켜지지 않게 한다. */
   stop() {
     this.active = false;
+    this.paused = false;
     this.store.setPickingActive(false);
     this.detach();
     this.stopPathWatch();
@@ -393,6 +406,31 @@ var ElementPickingController = class {
     this.popup = null;
     this.emit();
   }
+  /**
+   * 잠시 멈춘다 — 페이지 클릭이 원래대로 동작하고, 모드는 켜진 채로 남는다.
+   *
+   * 팝업이 열려 있으면 **그대로 둔다.** 쓰던 한 줄을 여기서 지우면 「지목 켜면 모달 초안이
+   * 날아간다」와 같은 사고를 다른 자리에 만드는 셈이다. 팝업은 위젯 자신의 UI 라
+   * 리스너를 떼도 계속 눌린다.
+   */
+  pause() {
+    if (!this.active || this.paused) return;
+    this.paused = true;
+    this.detach();
+    this.hovered = null;
+    this.emit();
+  }
+  /** 다시 지목을 받는다. */
+  resume() {
+    if (!this.active || !this.paused) return;
+    this.paused = false;
+    this.attach();
+    this.emit();
+  }
+  togglePause() {
+    if (this.paused) this.resume();
+    else this.pause();
+  }
   /**
    * 저장돼 있던 모드를 되살린다. 새로고침·페이지 이동 직후에 한 번 부른다.
    * @returns 되살아났으면 true.
@@ -408,6 +446,7 @@ var ElementPickingController = class {
   }
   /** 경로가 바뀌었을 때 그 경로의 마커로 갈아 끼운다. */
   syncPath() {
+    if (this.paused) this.resume();
     this.lastPathname = this.getPathname();
     this.markers = this.store.list(this.lastPathname);
     this.reconcileMarkerOutcomes();
@@ -436,12 +475,12 @@ var ElementPickingController = class {
     this.attached = false;
   }
   handleMouseOver(event) {
-    if (!this.active || isOwnUi(event.target)) return;
+    if (!this.active || this.paused || isOwnUi(event.target)) return;
     this.hovered = describeElement(event.target);
     this.emit();
   }
   handleClick(event) {
-    if (!this.active) return;
+    if (!this.active || this.paused) return;
     if (isOwnUi(event.target)) return;
     event.preventDefault();
     event.stopPropagation();
@@ -522,7 +561,7 @@ ${hint.draft}`;
     };
     this.emit();
   }
-  /** [제안 ▾] 토글. 방향과 무관하게 이후 자동 접힘/펼침을 멈춘다. */
+  /** [이런 건가요? ▾] 토글. 방향과 무관하게 이후 자동 접힘/펼침을 멈춘다. */
   toggleHints() {
     if (!this.popup) return;
     this.userToggledHints = true;
@@ -973,7 +1012,7 @@ import {
 } from "react";
 
 // src/version.ts
-var VERSION = true ? "0.6.1" : "dev";
+var VERSION = true ? "0.7.0" : "dev";
 
 // src/feedback-kit.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -995,6 +1034,7 @@ var OWN_UI_PROPS = { [OWN_UI_ATTR]: "" };
 var FONT_STACK = "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
 var INITIAL_PICKING_STATE = {
   active: false,
+  paused: false,
   hovered: null,
   popup: null,
   markers: []
@@ -1148,6 +1188,7 @@ var inputStyle = {
 };
 function PickToggle({
   active,
+  paused,
   disabled,
   variant,
   focusId,
@@ -1175,14 +1216,9 @@ function PickToggle({
         // 항상 값을 준다. 조건부로 빼면 리렌더 때 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
+          // 위치는 감싸는 `PickBar` 가 잡는다 — 옆에 [잠시 멈춤] 이 함께 서야 하는데
+          // 토글이 스스로 fixed 면 둘을 나란히 둘 수 없다.
+          background: TOKENS.surface
         } : {
           width: "100%",
           justifyContent: "space-between",
@@ -1199,8 +1235,12 @@ function PickToggle({
           /* @__PURE__ */ jsx(
             "span",
             {
-              style: { fontSize: 12, fontWeight: 600, color: active ? TOKENS.accent : TOKENS.muted },
-              children: active ? "\uCF1C\uC9D0" : "\uAEBC\uC9D0"
+              style: {
+                fontSize: 12,
+                fontWeight: 600,
+                color: active && !paused ? TOKENS.accent : TOKENS.muted
+              },
+              children: active ? paused ? "\uC77C\uC2DC\uC911\uC9C0" : "\uCF1C\uC9D0" : "\uAEBC\uC9D0"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -1212,7 +1252,7 @@ function PickToggle({
                 width: 38,
                 height: 22,
                 borderRadius: 11,
-                background: active ? TOKENS.accent : TOKENS.line
+                background: active ? paused ? TOKENS.muted : TOKENS.accent : TOKENS.line
               },
               children: /* @__PURE__ */ jsx(
                 "span",
@@ -1236,6 +1276,58 @@ function PickToggle({
     }
   );
 }
+function PickBar({
+  paused,
+  onToggle,
+  onTogglePause
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 16,
+        left: "50%",
+        transform: "translateX(-50%)",
+        display: "flex",
+        alignItems: "stretch",
+        gap: 8,
+        // 오버레이 자체는 클릭을 통과시킨다(pointerEvents:none) — 이 막대만 되살린다.
+        pointerEvents: "auto",
+        padding: 6,
+        borderRadius: 12,
+        background: TOKENS.surface,
+        boxShadow: TOKENS.shadow
+      },
+      children: [
+        /* @__PURE__ */ jsx(PickToggle, { variant: "floating", active: true, paused, onToggle }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": paused,
+            "data-fk-pick-pause": paused ? "paused" : "running",
+            onClick: onTogglePause,
+            style: {
+              ...baseButton,
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              whiteSpace: "nowrap",
+              borderColor: paused ? TOKENS.accent : TOKENS.line,
+              color: paused ? TOKENS.accent : TOKENS.ink,
+              fontWeight: 600
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: paused ? "\u25B6" : "\u23F8" }),
+              paused ? "\uC9C0\uBAA9 \uC7AC\uAC1C" : "\uC7A0\uC2DC \uBA48\uCDA4"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 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: [
@@ -1259,47 +1351,7 @@ function HintChips({
   onToggle
 }) {
   return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
-    hintsExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { style: { margin: "0 0 7px", color: TOKENS.muted, fontSize: 12 }, children: "\uC774\uB7F0 \uAC74\uAC00\uC694?" }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "group",
-          "aria-label": "\uC790\uC8FC \uB098\uC624\uB294 \uC81C\uBCF4 \uC81C\uC548",
-          style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 7 },
-          children: hints.map((hint) => {
-            const used = usedHintIds.includes(hint.id);
-            return /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-fk-focus-id": `hint:${hint.id}`,
-                disabled: used || disabled,
-                "aria-pressed": used,
-                onClick: () => onApply(hint.id),
-                style: {
-                  ...baseButton,
-                  minHeight: 30,
-                  padding: "5px 10px",
-                  fontSize: 12,
-                  fontWeight: 600,
-                  borderRadius: 999,
-                  ...used ? {
-                    background: TOKENS.subtle,
-                    color: TOKENS.muted,
-                    borderColor: TOKENS.line,
-                    cursor: "default"
-                  } : {}
-                },
-                children: hint.label
-              },
-              hint.id
-            );
-          })
-        }
-      )
-    ] }) : null,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -1307,10 +1359,61 @@ function HintChips({
         "aria-expanded": hintsExpanded,
         disabled,
         onClick: onToggle,
-        style: { ...baseButton, minHeight: 28, padding: "4px 10px", fontSize: 12 },
-        children: hintsExpanded ? "\uC81C\uC548 \u25B4" : "\uC81C\uC548 \u25BE"
+        style: {
+          display: "block",
+          margin: "0 0 7px",
+          padding: 0,
+          border: "none",
+          background: "none",
+          font: "inherit",
+          fontSize: 12,
+          color: TOKENS.muted,
+          cursor: disabled ? "default" : "pointer",
+          textAlign: "left"
+        },
+        children: [
+          "\uC774\uB7F0 \uAC74\uAC00\uC694? ",
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: hintsExpanded ? "\u25B4" : "\u25BE" })
+        ]
       }
-    )
+    ),
+    hintsExpanded ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": "\uC790\uC8FC \uB098\uC624\uB294 \uC81C\uBCF4 \uC81C\uC548",
+        style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 7 },
+        children: hints.map((hint) => {
+          const used = usedHintIds.includes(hint.id);
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-fk-focus-id": `hint:${hint.id}`,
+              disabled: used || disabled,
+              "aria-pressed": used,
+              onClick: () => onApply(hint.id),
+              style: {
+                ...baseButton,
+                minHeight: 30,
+                padding: "5px 10px",
+                fontSize: 12,
+                fontWeight: 600,
+                borderRadius: 999,
+                ...used ? {
+                  background: TOKENS.subtle,
+                  color: TOKENS.muted,
+                  borderColor: TOKENS.line,
+                  cursor: "default"
+                } : {}
+              },
+              children: hint.label
+            },
+            hint.id
+          );
+        })
+      }
+    ) }) : null
   ] });
 }
 function FeedbackKit(props) {
@@ -1629,6 +1732,7 @@ function FeedbackKit(props) {
                       {
                         variant: "inline",
                         active: pickingActive,
+                        paused: pickingState.paused,
                         disabled: draftLocked,
                         focusId: MODAL_ACTION_PICK,
                         onToggle: togglePicking
@@ -1880,7 +1984,14 @@ function FeedbackKit(props) {
                   }
                 }
               ) : null,
-              /* @__PURE__ */ jsx(PickToggle, { variant: "floating", active: true, onToggle: togglePicking }),
+              /* @__PURE__ */ jsx(
+                PickBar,
+                {
+                  paused: pickingState.paused,
+                  onToggle: togglePicking,
+                  onTogglePause: () => activeKit.picking.togglePause()
+                }
+              ),
               pickingState.markers.map((marker, index) => /* @__PURE__ */ jsx(
                 "div",
                 {