feedtack 0.5.0 → 1.0.1

package/dist/react/index.js

@@ -6,7 +6,7 @@ import {
   getTargetMeta,
   getViewportMeta,
   themeToCSS
-} from "../chunk-NCW2V5JL.js";
+} from "../chunk-2A5LLDLP.js";
 
 // src/ui/colors.ts
 var PIN_PALETTE = [
@@ -92,20 +92,18 @@ function CommentForm({
             "button",
             {
               type: "button",
-              className: sentiment === "satisfied" ? "selected" : "",
-              onClick: () => onSentimentChange(sentiment === "satisfied" ? null : "satisfied"),
-              children: sentimentLabels.satisfied ?? "\u{1F60A} Satisfied"
+              className: sentiment === "good" ? "selected" : "",
+              onClick: () => onSentimentChange(sentiment === "good" ? null : "good"),
+              children: sentimentLabels.satisfied ?? "Good"
             }
           ),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: sentiment === "dissatisfied" ? "selected" : "",
-              onClick: () => onSentimentChange(
-                sentiment === "dissatisfied" ? null : "dissatisfied"
-              ),
-              children: sentimentLabels.dissatisfied ?? "\u{1F61E} Dissatisfied"
+              className: sentiment === "bad" ? "selected" : "",
+              onClick: () => onSentimentChange(sentiment === "bad" ? null : "bad"),
+              children: sentimentLabels.dissatisfied ?? "Bad"
             }
           )
         ] }),
@@ -145,8 +143,311 @@ function useFeedtackContext() {
   return ctx;
 }
 
-// src/react/ThreadPanel.tsx
+// src/react/FeedbackModal.tsx
+import { useEffect, useRef } from "react";
+
+// src/react/ThreadView.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ThreadView({
+  item,
+  replyBody,
+  onReplyBodyChange,
+  onReply,
+  onResolve,
+  onArchive,
+  onBack
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-thread-view", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", className: "feedtack-modal-back", onClick: onBack, children: "\u2190 Back" }),
+    /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-thread-content", children: [
+      /* @__PURE__ */ jsx2("strong", { children: item.payload.submittedBy.name }),
+      /* @__PURE__ */ jsx2("p", { children: item.payload.comment })
+    ] }),
+    item.replies.map((r) => /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-reply", children: [
+      /* @__PURE__ */ jsx2("span", { className: "feedtack-reply-author", children: r.author.name }),
+      /* @__PURE__ */ jsx2("p", { children: r.body })
+    ] }, r.id)),
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        className: "feedtack-modal-textarea",
+        placeholder: "Reply\u2026",
+        value: replyBody,
+        onChange: (e) => onReplyBodyChange(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-actions", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "feedtack-btn-submit", onClick: onReply, children: "Reply" }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "feedtack-btn-cancel",
+          onClick: onResolve,
+          children: "Resolve"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "feedtack-btn-cancel",
+          onClick: onArchive,
+          children: "Archive"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/react/FeedbackModal.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FeedbackModal({
+  isOpen,
+  onClose,
+  activeTab,
+  onTabChange,
+  siteFeedback,
+  pageFeedback,
+  comment,
+  onCommentChange,
+  commentError,
+  sentiment,
+  onSentimentChange,
+  submitting,
+  onSubmit,
+  onPlacePin,
+  replyBody,
+  onReplyBodyChange,
+  onReply,
+  onResolve,
+  onArchive,
+  openThreadId,
+  onOpenThread
+}) {
+  const panelRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const onDown = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        const btn = document.querySelector(".feedtack-btn");
+        if (btn?.contains(e.target)) return;
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDown);
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const threads = activeTab === "site" ? siteFeedback : pageFeedback;
+  const openItem = openThreadId ? threads.find((i) => i.payload.id === openThreadId) : null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: panelRef,
+      className: "feedtack-modal",
+      role: "dialog",
+      "aria-label": "Feedback",
+      "aria-modal": "true",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-header", children: [
+          /* @__PURE__ */ jsx3("span", { className: "feedtack-modal-title", children: "Feedback" }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-modal-close",
+              onClick: onClose,
+              "aria-label": "Close",
+              children: "\xD7"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-tabs", children: [
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              className: cx("feedtack-modal-tab", activeTab === "site" && "active"),
+              onClick: () => onTabChange("site"),
+              children: [
+                "Site",
+                siteFeedback.length > 0 && /* @__PURE__ */ jsx3("span", { className: "feedtack-tab-count", children: siteFeedback.length })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              className: cx("feedtack-modal-tab", activeTab === "page" && "active"),
+              onClick: () => onTabChange("page"),
+              children: [
+                "Page",
+                pageFeedback.length > 0 && /* @__PURE__ */ jsx3("span", { className: "feedtack-tab-count", children: pageFeedback.length })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "feedtack-modal-body", children: openItem ? /* @__PURE__ */ jsx3(
+          ThreadView,
+          {
+            item: openItem,
+            replyBody,
+            onReplyBodyChange,
+            onReply: () => onReply(openItem.payload.id),
+            onResolve: () => onResolve(openItem.payload.id),
+            onArchive: () => onArchive(openItem.payload.id),
+            onBack: () => onOpenThread(null)
+          }
+        ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+          threads.length > 0 && /* @__PURE__ */ jsx3("div", { className: "feedtack-modal-threads", children: threads.map((item) => /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-modal-thread-item",
+              onClick: () => onOpenThread(item.payload.id),
+              children: [
+                /* @__PURE__ */ jsx3("span", { className: "feedtack-thread-author", children: item.payload.submittedBy.name }),
+                /* @__PURE__ */ jsx3("span", { className: "feedtack-thread-comment", children: item.payload.comment }),
+                /* @__PURE__ */ jsxs3("span", { className: "feedtack-thread-meta", children: [
+                  item.replies.length > 0 && `${item.replies.length} ${item.replies.length === 1 ? "reply" : "replies"}`,
+                  item.resolutions.length > 0 && " \xB7 resolved"
+                ] })
+              ]
+            },
+            item.payload.id
+          )) }),
+          /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-compose", children: [
+            /* @__PURE__ */ jsx3(
+              "textarea",
+              {
+                className: cx(
+                  "feedtack-modal-textarea",
+                  commentError && "error"
+                ),
+                placeholder: "What's on your mind? (required)",
+                value: comment,
+                onChange: (e) => onCommentChange(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    onSubmit();
+                  }
+                },
+                "aria-invalid": commentError || void 0
+              }
+            ),
+            commentError && /* @__PURE__ */ jsx3("span", { className: "feedtack-error-msg", children: "Comment is required" }),
+            /* @__PURE__ */ jsxs3("div", { className: "feedtack-sentiment", children: [
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: sentiment === "good" ? "selected" : "",
+                  onClick: () => onSentimentChange(sentiment === "good" ? null : "good"),
+                  children: "Good"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: sentiment === "bad" ? "selected" : "",
+                  onClick: () => onSentimentChange(sentiment === "bad" ? null : "bad"),
+                  children: "Bad"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "feedtack-btn-submit",
+                onClick: onSubmit,
+                disabled: submitting,
+                children: submitting ? "Sending\u2026" : "Submit"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx3("div", { className: "feedtack-modal-footer", children: /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "feedtack-modal-pin-btn",
+            onClick: onPlacePin,
+            children: "Place a pin"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/react/PinOverlay.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function PinOverlay({
+  feedbackItems,
+  pathname,
+  isArchivedForUser,
+  hasValidPins,
+  hasUnread,
+  openThreadId,
+  setOpenThreadId,
+  getPosition,
+  renderPinIcon,
+  pinMarkerClass
+}) {
+  return /* @__PURE__ */ jsx4(Fragment2, { children: feedbackItems.filter((item) => item.payload.page.pathname === pathname).filter((item) => !isArchivedForUser(item)).filter((item) => hasValidPins(item)).map((item) => {
+    const pin = item.payload.pins[0];
+    const pos = getPosition(item.payload.id, pin);
+    return /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: cx(
+          "feedtack-pin-marker",
+          item.resolutions.length > 0 && "feedtack-pin-resolved",
+          pinMarkerClass
+        ),
+        style: {
+          background: pin.color,
+          left: pos.x,
+          top: pos.y,
+          position: "absolute",
+          cursor: "pointer"
+        },
+        onClick: () => setOpenThreadId(
+          openThreadId === item.payload.id ? null : item.payload.id
+        ),
+        children: [
+          renderPinIcon ? /* @__PURE__ */ jsx4("span", { className: "feedtack-pin-icon", children: renderPinIcon(item) }) : item.resolutions.length > 0 && /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: "feedtack-pin-icon",
+              role: "img",
+              "aria-label": "Resolved",
+              children: "\u2713"
+            }
+          ),
+          hasUnread(item) && /* @__PURE__ */ jsx4("div", { className: "feedtack-pin-badge" })
+        ]
+      },
+      item.payload.id
+    );
+  }) });
+}
+
+// src/react/ThreadPanel.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ThreadPanel({
   item,
   replyBody,
@@ -162,26 +463,26 @@ function ThreadPanel({
   if (!pin) return null;
   const { x, y } = pinPosition ?? pin;
   const pos = getAnchoredPosition(x, y);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: cx("feedtack-thread", className),
       style: { position: "fixed", ...pos },
       children: [
-        /* @__PURE__ */ jsx2("strong", { style: { fontSize: 13 }, children: item.payload.submittedBy.name }),
-        /* @__PURE__ */ jsx2("p", { style: { fontSize: 13 }, children: item.payload.comment }),
-        item.replies.map((r) => /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsx5("strong", { style: { fontSize: 13 }, children: item.payload.submittedBy.name }),
+        /* @__PURE__ */ jsx5("p", { style: { fontSize: 13 }, children: item.payload.comment }),
+        item.replies.map((r) => /* @__PURE__ */ jsxs5(
           "div",
           {
             style: { borderTop: "1px solid var(--ft-border)", paddingTop: 8 },
             children: [
-              /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
-              /* @__PURE__ */ jsx2("p", { style: { fontSize: 12 }, children: r.body })
+              /* @__PURE__ */ jsx5("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
+              /* @__PURE__ */ jsx5("p", { style: { fontSize: 12 }, children: r.body })
             ]
           },
           r.id
         )),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx5(
           "textarea",
           {
             placeholder: "Reply\u2026",
@@ -201,8 +502,8 @@ function ThreadPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -212,7 +513,7 @@ function ThreadPanel({
               children: "Reply"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -222,7 +523,7 @@ function ThreadPanel({
               children: "Mark Resolved"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -232,7 +533,7 @@ function ThreadPanel({
               children: "Archive"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -249,7 +550,7 @@ function ThreadPanel({
 }
 
 // src/react/useAnchoredPins.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect as useEffect2, useState } from "react";
 function useAnchoredPins(items, pathname) {
   const [positions, setPositions] = useState(
     /* @__PURE__ */ new Map()
@@ -265,10 +566,10 @@ function useAnchoredPins(items, pathname) {
     }
     setPositions(next);
   }, [items, pathname]);
-  useEffect(() => {
+  useEffect2(() => {
     resolve();
   }, [resolve]);
-  useEffect(() => {
+  useEffect2(() => {
     let raf = 0;
     const handler = () => {
       cancelAnimationFrame(raf);
@@ -310,7 +611,7 @@ function resolvePin(pin) {
 }
 
 // src/react/useFeedtackState.ts
-import { useCallback as useCallback5, useEffect as useEffect5, useState as useState3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useState as useState3 } from "react";
 
 // src/react/useFeedtackActions.ts
 import { useCallback as useCallback2 } from "react";
@@ -333,6 +634,7 @@ function useFeedtackActions(deps) {
       schemaVersion: SCHEMA_VERSION,
       id: generateId(),
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      scope: deps.getScope(),
       submittedBy: currentUser,
       comment: comment.trim(),
       sentiment: deps.getSentiment(),
@@ -436,11 +738,251 @@ function useFeedtackActions(deps) {
 }
 
 // src/react/useFeedtackDom.ts
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+
+// src/ui/modalStyles.ts
+var FEEDTACK_MODAL_STYLES = `
+  .feedtack-loading {
+    position: fixed;
+    bottom: 70px;
+    right: 24px;
+    font-size: 12px;
+    color: var(--ft-text-muted);
+    z-index: 2147483640;
+  }
+
+  .feedtack-modal {
+    position: fixed;
+    bottom: 72px;
+    right: 24px;
+    width: 360px;
+    max-height: 70vh;
+    background: var(--ft-bg);
+    border: 1px solid var(--ft-border);
+    border-radius: calc(var(--ft-radius) + 4px);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+    z-index: 2147483643;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .feedtack-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px 0;
+  }
+
+  .feedtack-modal-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--ft-text);
+  }
+
+  .feedtack-modal-close {
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    color: var(--ft-text-muted);
+    line-height: 1;
+    padding: 0 4px;
+  }
+
+  .feedtack-modal-tabs {
+    display: flex;
+    gap: 0;
+    padding: 12px 16px 0;
+    border-bottom: 1px solid var(--ft-border);
+  }
+
+  .feedtack-modal-tab {
+    flex: 1;
+    padding: 8px 12px;
+    border: none;
+    background: none;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    color: var(--ft-text-muted);
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+  }
+
+  .feedtack-modal-tab.active {
+    color: var(--ft-primary);
+    border-bottom-color: var(--ft-primary);
+  }
+
+  .feedtack-tab-count {
+    font-size: 11px;
+    background: var(--ft-surface);
+    color: var(--ft-text-muted);
+    padding: 1px 6px;
+    border-radius: 10px;
+  }
+
+  .feedtack-modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .feedtack-modal-threads {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .feedtack-modal-thread-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    text-align: left;
+    padding: 10px 12px;
+    background: var(--ft-surface);
+    border: 1px solid var(--ft-border);
+    border-radius: var(--ft-radius);
+    cursor: pointer;
+  }
+
+  .feedtack-modal-thread-item:hover {
+    border-color: var(--ft-primary);
+  }
+
+  .feedtack-thread-author {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ft-text);
+  }
+
+  .feedtack-thread-comment {
+    font-size: 13px;
+    color: var(--ft-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .feedtack-thread-meta {
+    font-size: 11px;
+    color: var(--ft-text-muted);
+  }
+
+  .feedtack-modal-compose {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .feedtack-modal-textarea {
+    width: 100%;
+    border: 1.5px solid var(--ft-border);
+    border-radius: var(--ft-radius);
+    padding: 8px;
+    font-size: 13px;
+    resize: vertical;
+    min-height: 72px;
+    outline: none;
+    background: var(--ft-surface);
+    color: var(--ft-text);
+  }
+
+  .feedtack-modal-textarea:focus {
+    border-color: var(--ft-primary);
+  }
+
+  .feedtack-modal-textarea.error {
+    border-color: var(--ft-error);
+  }
+
+  .feedtack-modal-footer {
+    padding: 10px 16px 14px;
+    border-top: 1px solid var(--ft-border);
+  }
+
+  .feedtack-modal-pin-btn {
+    width: 100%;
+    padding: 8px 14px;
+    border: 1.5px solid var(--ft-border);
+    border-radius: var(--ft-radius);
+    background: var(--ft-bg);
+    color: var(--ft-text);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: border-color 0.15s;
+  }
+
+  .feedtack-modal-pin-btn:hover {
+    border-color: var(--ft-primary);
+    color: var(--ft-primary);
+  }
+
+  .feedtack-modal-thread-view {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .feedtack-modal-back {
+    background: none;
+    border: none;
+    font-size: 13px;
+    color: var(--ft-primary);
+    cursor: pointer;
+    padding: 0;
+    text-align: left;
+  }
+
+  .feedtack-modal-thread-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+  }
+
+  .feedtack-modal-reply {
+    border-top: 1px solid var(--ft-border);
+    padding-top: 8px;
+    font-size: 12px;
+  }
+
+  .feedtack-reply-author {
+    font-weight: 600;
+  }
+
+  .feedtack-modal-actions {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: 480px) {
+    .feedtack-modal {
+      right: 0;
+      bottom: 64px;
+      width: 100vw;
+      max-height: 85vh;
+      border-radius: var(--ft-radius) var(--ft-radius) 0 0;
+      border-left: none;
+      border-right: none;
+      border-bottom: none;
+    }
+  }
+`;
 
 // src/ui/styles.ts
 var FEEDTACK_DEFAULT_TOKENS = `
-  #feedtack-root, .feedtack-form, .feedtack-thread {
+  #feedtack-root, .feedtack-form, .feedtack-thread, .feedtack-modal {
     --ft-primary: #2563eb;
     --ft-primary-hover: #1d4ed8;
     --ft-bg: #ffffff;
@@ -676,20 +1218,12 @@ var FEEDTACK_STYLES = `
     overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
   }
 
-  .feedtack-loading {
-    position: fixed;
-    bottom: 70px;
-    right: 24px;
-    font-size: 12px;
-    color: var(--ft-text-muted);
-    z-index: 2147483640;
-  }
-`;
+` + FEEDTACK_MODAL_STYLES;
 
 // src/react/useFeedtackDom.ts
 function useFeedtackDom(theme, disabled) {
-  const rootRef = useRef(null);
-  useEffect2(() => {
+  const rootRef = useRef2(null);
+  useEffect3(() => {
     if (disabled) return;
     if (document.getElementById("feedtack-styles")) return;
     const style = document.createElement("style");
@@ -700,7 +1234,7 @@ function useFeedtackDom(theme, disabled) {
       style.remove();
     };
   }, [disabled]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (disabled) return;
     const root = document.createElement("div");
     root.id = "feedtack-root";
@@ -710,7 +1244,7 @@ function useFeedtackDom(theme, disabled) {
       root.remove();
     };
   }, [disabled]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (disabled) return;
     const root = document.getElementById("feedtack-root");
     if (!root || !theme) return;
@@ -723,7 +1257,7 @@ function useFeedtackDom(theme, disabled) {
 }
 
 // src/react/useFeedtackFlush.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3 } from "react";
 var DEFAULT_IDLE_MS = 5 * 60 * 1e3;
 function useFeedtackFlush({
   pathname,
@@ -732,9 +1266,9 @@ function useFeedtackFlush({
   flushIdleMs = DEFAULT_IDLE_MS,
   disabled
 }) {
-  const flushedRef = useRef2(/* @__PURE__ */ new Set());
-  const prevPathnameRef = useRef2(pathname);
-  const idleTimerRef = useRef2(null);
+  const flushedRef = useRef3(/* @__PURE__ */ new Set());
+  const prevPathnameRef = useRef3(pathname);
+  const idleTimerRef = useRef3(null);
   const flush = useCallback3(
     (path, items) => {
       if (!onFlush || flushedRef.current.has(path)) return;
@@ -745,7 +1279,7 @@ function useFeedtackFlush({
     },
     [onFlush]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (disabled || !onFlush) return;
     const prev = prevPathnameRef.current;
     prevPathnameRef.current = pathname;
@@ -753,7 +1287,7 @@ function useFeedtackFlush({
       flush(prev, feedbackItems);
     }
   }, [pathname, feedbackItems, flush, onFlush, disabled]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (disabled || !onFlush || flushIdleMs <= 0) return;
     const resetTimer = () => {
       if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
@@ -770,7 +1304,7 @@ function useFeedtackFlush({
       for (const e of events) window.removeEventListener(e, resetTimer);
     };
   }, [pathname, feedbackItems, flush, onFlush, flushIdleMs, disabled]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (disabled || !onFlush) return;
     const handleUnload = () => flush(pathname, feedbackItems);
     window.addEventListener("beforeunload", handleUnload);
@@ -783,12 +1317,13 @@ function useFeedtackFlush({
 }
 
 // src/react/usePinMode.ts
-import { useCallback as useCallback4, useEffect as useEffect4, useState as useState2 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState2 } from "react";
 function usePinMode({
   hotkey,
   onDeactivate,
   disabled,
-  isModalOpen
+  isModalOpen,
+  onHotkey
 }) {
   const [isActive, setIsActive] = useState2(false);
   const [pendingPins, setPendingPins] = useState2([]);
@@ -801,7 +1336,7 @@ function usePinMode({
     setShowForm(false);
     onDeactivate?.();
   }, [onDeactivate]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isActive) {
       document.documentElement.classList.add("feedtack-crosshair");
     } else {
@@ -809,11 +1344,15 @@ function usePinMode({
     }
     return () => document.documentElement.classList.remove("feedtack-crosshair");
   }, [isActive]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (disabled) return;
     const handler = (e) => {
       if (e.key === hotkey.toUpperCase() && e.shiftKey) {
-        setIsActive((prev) => !prev);
+        if (onHotkey) {
+          onHotkey();
+        } else {
+          setIsActive((prev) => !prev);
+        }
       }
       if (e.key === "Escape") {
         deactivate();
@@ -829,7 +1368,7 @@ function usePinMode({
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm]);
+  }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm, onHotkey]);
   const placePin = useCallback4(
     (coords, target) => {
       if (target.closest("#feedtack-root, .feedtack-form, .feedtack-color-picker"))
@@ -867,7 +1406,7 @@ function usePinMode({
     },
     [isActive, placePin]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (disabled) return;
     document.addEventListener("click", handlePageClick, true);
     document.addEventListener("touchend", handleTouchEnd, true);
@@ -903,7 +1442,7 @@ function useFeedtackState({
   const [pathname, setPathname] = useState3(
     () => typeof window === "undefined" ? "/" : window.location.pathname
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const update = () => setPathname(window.location.pathname);
     const origPush = history.pushState.bind(history);
     const origReplace = history.replaceState.bind(history);
@@ -930,6 +1469,12 @@ function useFeedtackState({
   const [loading, setLoading] = useState3(true);
   const [openThreadId, setOpenThreadId] = useState3(null);
   const [replyBody, setReplyBody] = useState3("");
+  const [isModalOpen, setIsModalOpen] = useState3(false);
+  const [composeScope, setComposeScope] = useState3("site");
+  const [siteFeedback, setSiteFeedback] = useState3([]);
+  const [pageFeedback, setPageFeedback] = useState3([]);
+  const openModal = useCallback5(() => setIsModalOpen(true), []);
+  const closeModal = useCallback5(() => setIsModalOpen(false), []);
   const resetForm = useCallback5(() => {
     setComment("");
     setSentiment(null);
@@ -938,7 +1483,8 @@ function useFeedtackState({
   const pinMode = usePinMode({
     hotkey,
     disabled,
-    isModalOpen: openThreadId !== null,
+    isModalOpen: openThreadId !== null || isModalOpen,
+    onHotkey: openModal,
     onDeactivate: () => {
       resetForm();
       setOpenThreadId(null);
@@ -951,12 +1497,29 @@ function useFeedtackState({
     flushIdleMs,
     disabled
   });
-  useEffect5(() => {
+  useEffect6(() => {
     setLoading(true);
-    adapter.loadFeedback({ pathname }).then(setFeedbackItems).catch((err) => onError?.(err)).finally(() => setLoading(false));
+    adapter.loadFeedback({ pathname }).then((items) => {
+      const elementItems = [];
+      const siteItems = [];
+      const pageItems = [];
+      for (const item of items) {
+        if (item.payload.scope === "site") siteItems.push(item);
+        else if (item.payload.scope === "page") pageItems.push(item);
+        else elementItems.push(item);
+      }
+      setFeedbackItems(elementItems);
+      setSiteFeedback(siteItems);
+      setPageFeedback(pageItems);
+    }).catch((err) => onError?.(err)).finally(() => setLoading(false));
   }, [adapter, onError, pathname]);
+  const getCurrentScope = useCallback5(() => {
+    if (pinMode.isActive || pinMode.pendingPins.length > 0) return "element";
+    return composeScope;
+  }, [pinMode.isActive, pinMode.pendingPins.length, composeScope]);
   const commentRef = () => comment;
   const sentimentRef = () => sentiment;
+  const scopeRef = () => getCurrentScope();
   const pinsRef = () => pinMode.pendingPins;
   const replyRef = () => replyBody;
   const pathRef = () => pathname;
@@ -966,6 +1529,7 @@ function useFeedtackState({
     onError,
     getComment: commentRef,
     getSentiment: sentimentRef,
+    getScope: scopeRef,
     getPendingPins: pinsRef,
     getReplyBody: replyRef,
     getPathname: pathRef,
@@ -979,6 +1543,27 @@ function useFeedtackState({
     shouldRescope: rescopeRoles ? (role) => rescopeRoles.includes(role) : void 0,
     hasFlush: !!onFlush
   });
+  const handleModalSubmit = useCallback5(async () => {
+    if (!comment.trim()) {
+      setCommentError(true);
+      return;
+    }
+    await actions.handleSubmit();
+    const scope = composeScope;
+    setFeedbackItems((prev) => {
+      const newItem = prev[prev.length - 1];
+      if (newItem && newItem.payload.scope === scope) {
+        if (scope === "site") {
+          setSiteFeedback((s) => [...s, newItem]);
+        } else {
+          setPageFeedback((p) => [...p, newItem]);
+        }
+        return prev.slice(0, -1);
+      }
+      return prev;
+    });
+    resetForm();
+  }, [actions, composeScope, resetForm, comment]);
   const isArchivedForUser = (item) => item.archives.some((a) => a.archivedBy.id === currentUser.id);
   const hasUnread = (item) => item.replies.length > 0;
   const hasValidPins = (item) => Array.isArray(item.payload?.pins) && item.payload.pins.length > 0;
@@ -996,11 +1581,20 @@ function useFeedtackState({
     submitting,
     pathname,
     feedbackItems,
+    siteFeedback,
+    pageFeedback,
     loading,
     openThreadId,
     setOpenThreadId,
     replyBody,
     setReplyBody,
+    // Modal state
+    isModalOpen,
+    openModal,
+    closeModal,
+    composeScope,
+    setComposeScope,
+    handleModalSubmit,
     ...actions,
     isArchivedForUser,
     hasUnread,
@@ -1009,7 +1603,7 @@ function useFeedtackState({
 }
 
 // src/react/FeedtackProvider.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function FeedtackProvider({
   children,
   adapter,
@@ -1042,7 +1636,11 @@ function FeedtackProvider({
   const formPos = firstPin ? getAnchoredPosition(firstPin.x, firstPin.y) : {};
   const showButton = !adminOnly || currentUser.role === "admin";
   const openItem = state.openThreadId ? state.feedbackItems.find((i) => i.payload.id === state.openThreadId) : null;
-  return /* @__PURE__ */ jsxs3(
+  const handlePlacePin = () => {
+    state.closeModal();
+    state.activatePinMode();
+  };
+  return /* @__PURE__ */ jsxs6(
     FeedtackContext.Provider,
     {
       value: {
@@ -1050,31 +1648,35 @@ function FeedtackProvider({
         } : state.activatePinMode,
         deactivatePinMode: disabled ? () => {
         } : state.deactivatePinMode,
-        isPinModeActive: disabled ? false : state.isPinModeActive
+        isPinModeActive: disabled ? false : state.isPinModeActive,
+        selectedColor: state.selectedColor,
+        setSelectedColor: disabled ? () => {
+        } : state.setSelectedColor,
+        pinPalette: PIN_PALETTE,
+        openModal: disabled ? () => {
+        } : state.openModal,
+        closeModal: disabled ? () => {
+        } : state.closeModal,
+        isModalOpen: disabled ? false : state.isModalOpen
       },
       children: [
         children,
-        !disabled && showButton && /* @__PURE__ */ jsxs3(
+        !disabled && showButton && /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
             className: cx(
               "feedtack-btn",
-              state.isPinModeActive && "active",
+              (state.isPinModeActive || state.isModalOpen) && "active",
               classes.button
             ),
-            onClick: () => state.isPinModeActive ? state.deactivatePinMode() : state.activatePinMode(),
-            title: "Toggle feedback pin mode",
-            "aria-label": "Toggle feedback pin mode",
-            "aria-pressed": state.isPinModeActive,
-            children: [
-              "Drop Pin [Shift+",
-              hotkey.toUpperCase(),
-              "]"
-            ]
+            onClick: () => state.openModal(),
+            title: "Open feedback",
+            "aria-label": "Open feedback",
+            children: "Feedback"
           }
         ),
-        state.isPinModeActive && /* @__PURE__ */ jsx3("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx3(
+        state.isPinModeActive && /* @__PURE__ */ jsx6("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1088,7 +1690,7 @@ function FeedtackProvider({
           },
           color
         )) }),
-        state.pendingPins.map((pin) => /* @__PURE__ */ jsx3(
+        state.pendingPins.map((pin) => /* @__PURE__ */ jsx6(
           "div",
           {
             className: cx("feedtack-pin-marker", classes.pinMarker),
@@ -1101,7 +1703,7 @@ function FeedtackProvider({
           },
           `${pin.x}-${pin.y}-${pin.color}`
         )),
-        state.showForm && /* @__PURE__ */ jsx3(
+        state.showForm && /* @__PURE__ */ jsx6(
           CommentForm,
           {
             comment: state.comment,
@@ -1120,45 +1722,22 @@ function FeedtackProvider({
             onCancel: state.deactivatePinMode
           }
         ),
-        !state.loading && state.feedbackItems.filter((item) => item.payload.page.pathname === state.pathname).filter((item) => !state.isArchivedForUser(item)).filter((item) => state.hasValidPins(item)).map((item) => {
-          const pin = item.payload.pins[0];
-          const pos = getPosition(item.payload.id, pin);
-          return /* @__PURE__ */ jsxs3(
-            "button",
-            {
-              type: "button",
-              className: cx(
-                "feedtack-pin-marker",
-                item.resolutions.length > 0 && "feedtack-pin-resolved",
-                classes.pinMarker
-              ),
-              style: {
-                background: pin.color,
-                left: pos.x,
-                top: pos.y,
-                position: "absolute",
-                cursor: "pointer"
-              },
-              onClick: () => state.setOpenThreadId(
-                state.openThreadId === item.payload.id ? null : item.payload.id
-              ),
-              children: [
-                renderPinIcon ? /* @__PURE__ */ jsx3("span", { className: "feedtack-pin-icon", children: renderPinIcon(item) }) : item.resolutions.length > 0 && /* @__PURE__ */ jsx3(
-                  "span",
-                  {
-                    className: "feedtack-pin-icon",
-                    role: "img",
-                    "aria-label": "Resolved",
-                    children: "\u2713"
-                  }
-                ),
-                state.hasUnread(item) && /* @__PURE__ */ jsx3("div", { className: "feedtack-pin-badge" })
-              ]
-            },
-            item.payload.id
-          );
-        }),
-        openItem && /* @__PURE__ */ jsx3(
+        !state.loading && /* @__PURE__ */ jsx6(
+          PinOverlay,
+          {
+            feedbackItems: state.feedbackItems,
+            pathname: state.pathname,
+            isArchivedForUser: state.isArchivedForUser,
+            hasValidPins: state.hasValidPins,
+            hasUnread: state.hasUnread,
+            openThreadId: state.openThreadId,
+            setOpenThreadId: state.setOpenThreadId,
+            getPosition,
+            renderPinIcon,
+            pinMarkerClass: classes.pinMarker
+          }
+        ),
+        openItem && /* @__PURE__ */ jsx6(
           ThreadPanel,
           {
             item: openItem,
@@ -1175,7 +1754,36 @@ function FeedtackProvider({
             className: classes.thread
           }
         ),
-        state.loading && /* @__PURE__ */ jsx3("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
+        !disabled && /* @__PURE__ */ jsx6(
+          FeedbackModal,
+          {
+            isOpen: state.isModalOpen,
+            onClose: state.closeModal,
+            activeTab: state.composeScope,
+            onTabChange: state.setComposeScope,
+            siteFeedback: state.siteFeedback,
+            pageFeedback: state.pageFeedback,
+            comment: state.comment,
+            onCommentChange: (v) => {
+              state.setComment(v);
+              state.setCommentError(false);
+            },
+            commentError: state.commentError,
+            sentiment: state.sentiment,
+            onSentimentChange: state.setSentiment,
+            submitting: state.submitting,
+            onSubmit: state.handleModalSubmit,
+            onPlacePin: handlePlacePin,
+            replyBody: state.replyBody,
+            onReplyBodyChange: state.setReplyBody,
+            onReply: (id) => state.handleReply(id),
+            onResolve: (id) => state.handleResolve(id),
+            onArchive: (id) => state.handleArchive(id),
+            openThreadId: state.openThreadId,
+            onOpenThread: state.setOpenThreadId
+          }
+        ),
+        state.loading && /* @__PURE__ */ jsx6("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
       ]
     }
   );
@@ -1187,5 +1795,6 @@ function useFeedtack() {
 }
 export {
   FeedtackProvider,
+  PIN_PALETTE,
   useFeedtack
 };