feedtack 0.5.1 → 1.1.0

package/dist/react/index.js

@@ -1,33 +1,9 @@
 import {
-  SCHEMA_VERSION,
-  getDeviceMeta,
-  getPageMeta,
-  getPinCoords,
-  getTargetMeta,
-  getViewportMeta,
-  themeToCSS
-} from "../chunk-PPM4AIJU.js";
-
-// src/ui/colors.ts
-var PIN_PALETTE = [
-  "#ef4444",
-  // red
-  "#3b82f6",
-  // blue
-  "#22c55e",
-  // green
-  "#f59e0b",
-  // amber
-  "#a855f7",
-  // purple
-  "#ec4899"
-  // pink
-];
+  FeedtackEngine,
+  PIN_PALETTE
+} from "../chunk-3INDOI4N.js";
 
 // src/react/utils.ts
-function generateId() {
-  return `ft_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
-}
 function getAnchoredPosition(x, y) {
   const FORM_HEIGHT = 220;
   const EDGE = 300;
@@ -92,20 +68,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 +119,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 +439,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 +478,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 +489,7 @@ function ThreadPanel({
               children: "Reply"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -222,7 +499,7 @@ function ThreadPanel({
               children: "Mark Resolved"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -232,7 +509,7 @@ function ThreadPanel({
               children: "Archive"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -249,7 +526,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 +542,10 @@ function useAnchoredPins(items, pathname) {
     }
     setPositions(next);
   }, [items, pathname]);
-  useEffect(() => {
+  useEffect2(() => {
     resolve();
   }, [resolve]);
-  useEffect(() => {
+  useEffect2(() => {
     let raf = 0;
     const handler = () => {
       cancelAnimationFrame(raf);
@@ -310,584 +587,7 @@ function resolvePin(pin) {
 }
 
 // src/react/useFeedtackState.ts
-import { useCallback as useCallback5, useEffect as useEffect5, useState as useState3 } from "react";
-
-// src/react/useFeedtackActions.ts
-import { useCallback as useCallback2 } from "react";
-function useFeedtackActions(deps) {
-  const { adapter, currentUser, onError } = deps;
-  const updateItem = useCallback2(
-    (id, fn) => deps.setFeedbackItems(
-      (prev) => prev.map((i) => i.payload.id === id ? fn(i) : i)
-    ),
-    [deps.setFeedbackItems]
-  );
-  const handleSubmit = useCallback2(async () => {
-    const comment = deps.getComment();
-    if (!comment.trim()) {
-      deps.setCommentError(true);
-      return;
-    }
-    deps.setSubmitting(true);
-    const payload = {
-      schemaVersion: SCHEMA_VERSION,
-      id: generateId(),
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      submittedBy: currentUser,
-      comment: comment.trim(),
-      sentiment: deps.getSentiment(),
-      pins: deps.getPendingPins().map((p, i) => ({ ...p, index: i + 1 })),
-      page: getPageMeta(),
-      viewport: getViewportMeta(),
-      device: getDeviceMeta()
-    };
-    try {
-      await adapter.submit(payload);
-      deps.setFeedbackItems((prev) => [
-        ...prev,
-        { payload, replies: [], resolutions: [], archives: [] }
-      ]);
-      deps.deactivatePinMode();
-    } catch (err) {
-      onError?.(err);
-    } finally {
-      deps.setSubmitting(false);
-    }
-  }, [adapter, currentUser, onError, deps]);
-  const handleReply = useCallback2(
-    async (feedbackId) => {
-      const body = deps.getReplyBody().trim();
-      if (!body) return;
-      const ts = (/* @__PURE__ */ new Date()).toISOString();
-      try {
-        await adapter.reply(feedbackId, {
-          author: currentUser,
-          body,
-          timestamp: ts
-        });
-        updateItem(feedbackId, (item) => {
-          const updated = {
-            ...item,
-            replies: [
-              ...item.replies,
-              {
-                id: generateId(),
-                feedbackId,
-                author: currentUser,
-                body,
-                timestamp: ts
-              }
-            ]
-          };
-          const rescope = deps.shouldRescope?.(currentUser.role) ?? currentUser.role !== "agent";
-          if (rescope && updated.resolutions.length === 0 && deps.hasFlush) {
-            deps.clearFlushed?.(deps.getPathname());
-          }
-          return updated;
-        });
-        deps.setReplyBody("");
-      } catch (err) {
-        onError?.(err);
-      }
-    },
-    [adapter, currentUser, onError, updateItem, deps]
-  );
-  const handleResolve = useCallback2(
-    async (feedbackId) => {
-      const ts = (/* @__PURE__ */ new Date()).toISOString();
-      try {
-        await adapter.resolve(feedbackId, {
-          resolvedBy: currentUser,
-          timestamp: ts
-        });
-        updateItem(feedbackId, (item) => ({
-          ...item,
-          resolutions: [
-            ...item.resolutions,
-            { feedbackId, resolvedBy: currentUser, timestamp: ts }
-          ]
-        }));
-      } catch (err) {
-        onError?.(err);
-      }
-    },
-    [adapter, currentUser, onError, updateItem]
-  );
-  const handleArchive = useCallback2(
-    async (feedbackId) => {
-      const ts = (/* @__PURE__ */ new Date()).toISOString();
-      try {
-        await adapter.archive(feedbackId, currentUser.id);
-        updateItem(feedbackId, (item) => ({
-          ...item,
-          archives: [
-            ...item.archives,
-            { feedbackId, archivedBy: currentUser, timestamp: ts }
-          ]
-        }));
-        deps.setOpenThreadId(null);
-      } catch (err) {
-        onError?.(err);
-      }
-    },
-    [adapter, currentUser, onError, updateItem, deps]
-  );
-  return { handleSubmit, handleReply, handleResolve, handleArchive };
-}
-
-// src/react/useFeedtackDom.ts
-import { useEffect as useEffect2, useRef } from "react";
-
-// src/ui/styles.ts
-var FEEDTACK_DEFAULT_TOKENS = `
-  #feedtack-root, .feedtack-form, .feedtack-thread {
-    --ft-primary: #2563eb;
-    --ft-primary-hover: #1d4ed8;
-    --ft-bg: #ffffff;
-    --ft-surface: #f9fafb;
-    --ft-text: #111827;
-    --ft-text-muted: #6b7280;
-    --ft-border: #e5e7eb;
-    --ft-radius: 8px;
-    --ft-error: #ef4444;
-    --ft-badge: #f59e0b;
-  }
-`;
-var FEEDTACK_STYLES = `
-  #feedtack-root * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-family: system-ui, -apple-system, sans-serif;
-    line-height: 1.5;
-  }
-
-  .feedtack-btn {
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-    z-index: 2147483640;
-    background: var(--ft-text);
-    color: var(--ft-bg);
-    border: none;
-    border-radius: var(--ft-radius);
-    padding: 8px 14px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    transition: background 0.15s;
-  }
-
-  .feedtack-btn:hover {
-    opacity: 0.85;
-  }
-
-  .feedtack-btn.active {
-    background: var(--ft-primary);
-  }
-
-  .feedtack-crosshair * {
-    cursor: crosshair !important;
-  }
-
-  .feedtack-pin-marker {
-    position: absolute;
-    z-index: 2147483641;
-    width: 24px;
-    height: 24px;
-    border-radius: 50% 50% 50% 0;
-    transform: translate(-50%, -100%) rotate(-45deg);
-    transform-origin: bottom center;
-    border: 2px solid rgba(255,255,255,0.8);
-    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
-    cursor: pointer;
-    pointer-events: all;
-  }
-
-  .feedtack-pin-resolved { opacity: 0.6; }
-
-  .feedtack-pin-icon {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: rotate(45deg);
-    font-size: 12px;
-    font-weight: 700;
-    color: #fff;
-    line-height: 1;
-    pointer-events: none;
-  }
-
-  .feedtack-pin-badge {
-    position: absolute;
-    top: -4px;
-    right: -4px;
-    width: 10px;
-    height: 10px;
-    background: var(--ft-badge);
-    border-radius: 50%;
-    border: 1.5px solid var(--ft-bg);
-  }
-
-  .feedtack-color-picker {
-    display: flex;
-    gap: 6px;
-    padding: 8px;
-    background: var(--ft-bg) !important;
-    border-radius: var(--ft-radius);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    position: fixed;
-    bottom: 72px;
-    right: 24px;
-    z-index: 2147483641;
-  }
-
-  .feedtack-color-swatch {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 2px solid transparent;
-    cursor: pointer;
-    transition: transform 0.1s;
-  }
-
-  .feedtack-color-swatch.selected {
-    border-color: var(--ft-text);
-    transform: scale(1.15);
-  }
-
-  .feedtack-form {
-    position: absolute;
-    z-index: 2147483642;
-    background: var(--ft-bg) !important;
-    border-radius: calc(var(--ft-radius) + 2px);
-    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
-    padding: 16px;
-    width: 280px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .feedtack-form textarea {
-    width: 100%;
-    border: 1.5px solid var(--ft-border);
-    border-radius: var(--ft-radius);
-    padding: 8px;
-    font-size: 13px;
-    resize: vertical;
-    min-height: 80px;
-    outline: none;
-    background: var(--ft-surface);
-    color: var(--ft-text);
-  }
-
-  .feedtack-form textarea:focus {
-    border-color: var(--ft-primary);
-  }
-
-  .feedtack-form textarea.error {
-    border-color: var(--ft-error);
-  }
-
-  .feedtack-error-msg {
-    font-size: 12px;
-    color: var(--ft-error);
-  }
-
-  .feedtack-sentiment {
-    display: flex;
-    gap: 8px;
-  }
-
-  .feedtack-sentiment button {
-    flex: 1;
-    padding: 6px 10px;
-    border: 1.5px solid var(--ft-border);
-    border-radius: var(--ft-radius);
-    background: var(--ft-bg);
-    color: var(--ft-text);
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.1s;
-  }
-
-  .feedtack-sentiment button.selected {
-    border-color: var(--ft-primary);
-    background: var(--ft-surface);
-    color: var(--ft-primary);
-  }
-
-  .feedtack-form-actions {
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-  }
-
-  .feedtack-btn-cancel {
-    padding: 6px 12px;
-    border: 1.5px solid var(--ft-border);
-    border-radius: var(--ft-radius);
-    background: var(--ft-bg);
-    color: var(--ft-text);
-    font-size: 13px;
-    cursor: pointer;
-  }
-
-  .feedtack-btn-submit {
-    padding: 6px 12px;
-    border: none;
-    border-radius: var(--ft-radius);
-    background: var(--ft-primary);
-    color: #fff;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-  }
-
-  .feedtack-btn-submit:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .feedtack-thread {
-    position: absolute;
-    z-index: 2147483642;
-    background: var(--ft-bg) !important;
-    border-radius: calc(var(--ft-radius) + 2px);
-    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
-    padding: 16px;
-    width: 300px;
-    max-height: 400px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .feedtack-sr-only {
-    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-    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;
-  }
-`;
-
-// src/react/useFeedtackDom.ts
-function useFeedtackDom(theme, disabled) {
-  const rootRef = useRef(null);
-  useEffect2(() => {
-    if (disabled) return;
-    if (document.getElementById("feedtack-styles")) return;
-    const style = document.createElement("style");
-    style.id = "feedtack-styles";
-    style.textContent = FEEDTACK_DEFAULT_TOKENS + FEEDTACK_STYLES;
-    document.head.appendChild(style);
-    return () => {
-      style.remove();
-    };
-  }, [disabled]);
-  useEffect2(() => {
-    if (disabled) return;
-    const root = document.createElement("div");
-    root.id = "feedtack-root";
-    document.body.appendChild(root);
-    rootRef.current = root;
-    return () => {
-      root.remove();
-    };
-  }, [disabled]);
-  useEffect2(() => {
-    if (disabled) return;
-    const root = document.getElementById("feedtack-root");
-    if (!root || !theme) return;
-    const tokens = themeToCSS(theme);
-    for (const [k, v] of Object.entries(tokens)) {
-      root.style.setProperty(k, v);
-    }
-  }, [theme, disabled]);
-  return rootRef;
-}
-
-// src/react/useFeedtackFlush.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
-var DEFAULT_IDLE_MS = 5 * 60 * 1e3;
-function useFeedtackFlush({
-  pathname,
-  feedbackItems,
-  onFlush,
-  flushIdleMs = DEFAULT_IDLE_MS,
-  disabled
-}) {
-  const flushedRef = useRef2(/* @__PURE__ */ new Set());
-  const prevPathnameRef = useRef2(pathname);
-  const idleTimerRef = useRef2(null);
-  const flush = useCallback3(
-    (path, items) => {
-      if (!onFlush || flushedRef.current.has(path)) return;
-      const pageItems = items.filter((i) => i.payload.page.pathname === path);
-      if (pageItems.length === 0) return;
-      flushedRef.current.add(path);
-      onFlush({ pathname: path, items: pageItems });
-    },
-    [onFlush]
-  );
-  useEffect3(() => {
-    if (disabled || !onFlush) return;
-    const prev = prevPathnameRef.current;
-    prevPathnameRef.current = pathname;
-    if (prev !== pathname) {
-      flush(prev, feedbackItems);
-    }
-  }, [pathname, feedbackItems, flush, onFlush, disabled]);
-  useEffect3(() => {
-    if (disabled || !onFlush || flushIdleMs <= 0) return;
-    const resetTimer = () => {
-      if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
-      idleTimerRef.current = setTimeout(() => {
-        flush(pathname, feedbackItems);
-      }, flushIdleMs);
-    };
-    const events = ["mousemove", "keydown", "scroll", "touchstart"];
-    for (const e of events)
-      window.addEventListener(e, resetTimer, { passive: true });
-    resetTimer();
-    return () => {
-      if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
-      for (const e of events) window.removeEventListener(e, resetTimer);
-    };
-  }, [pathname, feedbackItems, flush, onFlush, flushIdleMs, disabled]);
-  useEffect3(() => {
-    if (disabled || !onFlush) return;
-    const handleUnload = () => flush(pathname, feedbackItems);
-    window.addEventListener("beforeunload", handleUnload);
-    return () => window.removeEventListener("beforeunload", handleUnload);
-  }, [pathname, feedbackItems, flush, onFlush, disabled]);
-  const clearFlushed = useCallback3((path) => {
-    flushedRef.current.delete(path);
-  }, []);
-  return { clearFlushed };
-}
-
-// src/react/usePinMode.ts
-import { useCallback as useCallback4, useEffect as useEffect4, useState as useState2 } from "react";
-function usePinMode({
-  hotkey,
-  onDeactivate,
-  disabled,
-  isModalOpen
-}) {
-  const [isActive, setIsActive] = useState2(false);
-  const [pendingPins, setPendingPins] = useState2([]);
-  const [selectedColor, setSelectedColor] = useState2(PIN_PALETTE[0]);
-  const [showForm, setShowForm] = useState2(false);
-  const activate = useCallback4(() => setIsActive(true), []);
-  const deactivate = useCallback4(() => {
-    setIsActive(false);
-    setPendingPins([]);
-    setShowForm(false);
-    onDeactivate?.();
-  }, [onDeactivate]);
-  useEffect4(() => {
-    if (isActive) {
-      document.documentElement.classList.add("feedtack-crosshair");
-    } else {
-      document.documentElement.classList.remove("feedtack-crosshair");
-    }
-    return () => document.documentElement.classList.remove("feedtack-crosshair");
-  }, [isActive]);
-  useEffect4(() => {
-    if (disabled) return;
-    const handler = (e) => {
-      if (e.key === hotkey.toUpperCase() && e.shiftKey) {
-        setIsActive((prev) => !prev);
-      }
-      if (e.key === "Escape") {
-        deactivate();
-      }
-      if (isActive && !isModalOpen && !showForm && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-        e.preventDefault();
-        setSelectedColor((prev) => {
-          const idx = PIN_PALETTE.indexOf(prev);
-          const dir = e.key === "ArrowRight" ? 1 : -1;
-          return PIN_PALETTE[(idx + dir + PIN_PALETTE.length) % PIN_PALETTE.length];
-        });
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm]);
-  const placePin = useCallback4(
-    (coords, target) => {
-      if (target.closest("#feedtack-root, .feedtack-form, .feedtack-color-picker"))
-        return;
-      setPendingPins((prev) => [
-        ...prev,
-        {
-          color: selectedColor,
-          ...getPinCoords(coords),
-          target: getTargetMeta(target)
-        }
-      ]);
-      setShowForm(true);
-    },
-    [selectedColor]
-  );
-  const handlePageClick = useCallback4(
-    (e) => {
-      if (!isActive) return;
-      e.preventDefault();
-      e.stopPropagation();
-      placePin(e, e.target);
-    },
-    [isActive, placePin]
-  );
-  const handleTouchEnd = useCallback4(
-    (e) => {
-      if (!isActive) return;
-      const touch = e.changedTouches[0];
-      if (!touch) return;
-      const target = document.elementFromPoint(touch.clientX, touch.clientY);
-      if (!target) return;
-      e.preventDefault();
-      placePin(touch, target);
-    },
-    [isActive, placePin]
-  );
-  useEffect4(() => {
-    if (disabled) return;
-    document.addEventListener("click", handlePageClick, true);
-    document.addEventListener("touchend", handleTouchEnd, true);
-    return () => {
-      document.removeEventListener("click", handlePageClick, true);
-      document.removeEventListener("touchend", handleTouchEnd, true);
-    };
-  }, [handlePageClick, handleTouchEnd, disabled]);
-  return {
-    isActive,
-    activate,
-    deactivate,
-    pendingPins,
-    selectedColor,
-    setSelectedColor,
-    showForm
-  };
-}
-
-// src/react/useFeedtackState.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useSyncExternalStore } from "react";
 function useFeedtackState({
   adapter,
   currentUser,
@@ -899,109 +599,112 @@ function useFeedtackState({
   flushIdleMs,
   rescopeRoles
 }) {
-  useFeedtackDom(theme, disabled);
-  const [pathname, setPathname] = useState3(
-    () => typeof window === "undefined" ? "/" : window.location.pathname
+  const engineRef = useRef2(null);
+  if (!engineRef.current) {
+    engineRef.current = new FeedtackEngine({
+      adapter,
+      currentUser,
+      hotkey,
+      theme,
+      onError,
+      disabled,
+      onFlush,
+      flushIdleMs,
+      rescopeRoles
+    });
+  }
+  const engine = engineRef.current;
+  useEffect3(() => {
+    engine.mount();
+    return () => engine.destroy();
+  }, [engine]);
+  const subscribe = useCallback2(
+    (cb) => engine.subscribe(cb),
+    [engine]
+  );
+  const getSnapshot = useCallback2(() => engine.getState(), [engine]);
+  const state = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getSnapshot
+  );
+  const isArchivedForUser = useCallback2(
+    (item) => engine.isArchivedForUser(item),
+    [engine]
+  );
+  const hasUnread = useCallback2(
+    (item) => engine.hasUnread(item),
+    [engine]
+  );
+  const hasValidPins = useCallback2(
+    (item) => engine.hasValidPins(item),
+    [engine]
   );
-  useEffect5(() => {
-    const update = () => setPathname(window.location.pathname);
-    const origPush = history.pushState.bind(history);
-    const origReplace = history.replaceState.bind(history);
-    history.pushState = (...args) => {
-      origPush(...args);
-      queueMicrotask(update);
-    };
-    history.replaceState = (...args) => {
-      origReplace(...args);
-      queueMicrotask(update);
-    };
-    window.addEventListener("popstate", update);
-    return () => {
-      window.removeEventListener("popstate", update);
-      history.pushState = origPush;
-      history.replaceState = origReplace;
-    };
-  }, []);
-  const [comment, setComment] = useState3("");
-  const [sentiment, setSentiment] = useState3(null);
-  const [commentError, setCommentError] = useState3(false);
-  const [submitting, setSubmitting] = useState3(false);
-  const [feedbackItems, setFeedbackItems] = useState3([]);
-  const [loading, setLoading] = useState3(true);
-  const [openThreadId, setOpenThreadId] = useState3(null);
-  const [replyBody, setReplyBody] = useState3("");
-  const resetForm = useCallback5(() => {
-    setComment("");
-    setSentiment(null);
-    setCommentError(false);
-  }, []);
-  const pinMode = usePinMode({
-    hotkey,
-    disabled,
-    isModalOpen: openThreadId !== null,
-    onDeactivate: () => {
-      resetForm();
-      setOpenThreadId(null);
-    }
-  });
-  const { clearFlushed } = useFeedtackFlush({
-    pathname,
-    feedbackItems,
-    onFlush,
-    flushIdleMs,
-    disabled
-  });
-  useEffect5(() => {
-    setLoading(true);
-    adapter.loadFeedback({ pathname }).then(setFeedbackItems).catch((err) => onError?.(err)).finally(() => setLoading(false));
-  }, [adapter, onError, pathname]);
-  const commentRef = () => comment;
-  const sentimentRef = () => sentiment;
-  const pinsRef = () => pinMode.pendingPins;
-  const replyRef = () => replyBody;
-  const pathRef = () => pathname;
-  const actions = useFeedtackActions({
-    adapter,
-    currentUser,
-    onError,
-    getComment: commentRef,
-    getSentiment: sentimentRef,
-    getPendingPins: pinsRef,
-    getReplyBody: replyRef,
-    getPathname: pathRef,
-    setCommentError,
-    setSubmitting,
-    setFeedbackItems,
-    setReplyBody,
-    setOpenThreadId,
-    deactivatePinMode: pinMode.deactivate,
-    clearFlushed,
-    shouldRescope: rescopeRoles ? (role) => rescopeRoles.includes(role) : void 0,
-    hasFlush: !!onFlush
-  });
-  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;
   return {
-    ...pinMode,
-    isPinModeActive: pinMode.isActive,
-    activatePinMode: pinMode.activate,
-    deactivatePinMode: pinMode.deactivate,
-    comment,
-    setComment,
-    sentiment,
-    setSentiment,
-    commentError,
-    setCommentError,
-    submitting,
-    pathname,
-    feedbackItems,
-    loading,
-    openThreadId,
-    setOpenThreadId,
-    replyBody,
-    setReplyBody,
-    ...actions,
+    // Pin mode
+    isPinModeActive: state.isPinModeActive,
+    isActive: state.isPinModeActive,
+    activatePinMode: useCallback2(() => engine.activatePinMode(), [engine]),
+    activate: useCallback2(() => engine.activatePinMode(), [engine]),
+    deactivatePinMode: useCallback2(() => engine.deactivatePinMode(), [engine]),
+    deactivate: useCallback2(() => engine.deactivatePinMode(), [engine]),
+    pendingPins: state.pendingPins,
+    selectedColor: state.selectedColor,
+    setSelectedColor: useCallback2(
+      (c) => engine.setSelectedColor(c),
+      [engine]
+    ),
+    showForm: state.showForm,
+    // Form
+    comment: state.comment,
+    setComment: useCallback2((v) => engine.setComment(v), [engine]),
+    sentiment: state.sentiment,
+    setSentiment: useCallback2(
+      (v) => engine.setSentiment(v),
+      [engine]
+    ),
+    commentError: state.commentError,
+    setCommentError: useCallback2(
+      (v) => engine.setCommentError(v),
+      [engine]
+    ),
+    submitting: state.submitting,
+    // Feedback
+    feedbackItems: state.feedbackItems,
+    siteFeedback: state.siteFeedback,
+    pageFeedback: state.pageFeedback,
+    loading: state.loading,
+    pathname: state.pathname,
+    // Thread
+    openThreadId: state.openThreadId,
+    setOpenThreadId: useCallback2(
+      (id) => engine.setOpenThreadId(id),
+      [engine]
+    ),
+    replyBody: state.replyBody,
+    setReplyBody: useCallback2((v) => engine.setReplyBody(v), [engine]),
+    // Modal
+    isModalOpen: state.isModalOpen,
+    openModal: useCallback2(() => engine.openModal(), [engine]),
+    closeModal: useCallback2(() => engine.closeModal(), [engine]),
+    composeScope: state.composeScope,
+    setComposeScope: useCallback2(
+      (s) => engine.setComposeScope(s),
+      [engine]
+    ),
+    // Actions
+    handleSubmit: useCallback2(() => engine.handleSubmit(), [engine]),
+    handleModalSubmit: useCallback2(() => engine.handleModalSubmit(), [engine]),
+    handleReply: useCallback2((id) => engine.handleReply(id), [engine]),
+    handleResolve: useCallback2(
+      (id) => engine.handleResolve(id),
+      [engine]
+    ),
+    handleArchive: useCallback2(
+      (id) => engine.handleArchive(id),
+      [engine]
+    ),
+    // Derived helpers
     isArchivedForUser,
     hasUnread,
     hasValidPins
@@ -1009,7 +712,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 +745,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: {
@@ -1054,31 +761,31 @@ function FeedtackProvider({
         selectedColor: state.selectedColor,
         setSelectedColor: disabled ? () => {
         } : state.setSelectedColor,
-        pinPalette: PIN_PALETTE
+        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",
@@ -1092,7 +799,7 @@ function FeedtackProvider({
           },
           color
         )) }),
-        state.pendingPins.map((pin) => /* @__PURE__ */ jsx3(
+        state.pendingPins.map((pin) => /* @__PURE__ */ jsx6(
           "div",
           {
             className: cx("feedtack-pin-marker", classes.pinMarker),
@@ -1105,7 +812,7 @@ function FeedtackProvider({
           },
           `${pin.x}-${pin.y}-${pin.color}`
         )),
-        state.showForm && /* @__PURE__ */ jsx3(
+        state.showForm && /* @__PURE__ */ jsx6(
           CommentForm,
           {
             comment: state.comment,
@@ -1124,45 +831,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,
@@ -1179,7 +863,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" })
       ]
     }
   );