feedtack 0.4.0 → 0.5.0

package/dist/react/index.js

@@ -155,11 +155,13 @@ function ThreadPanel({
   onResolve,
   onArchive,
   onClose,
-  className
+  className,
+  pinPosition
 }) {
   const pin = item.payload?.pins?.[0];
   if (!pin) return null;
-  const pos = getAnchoredPosition(pin.x, pin.y);
+  const { x, y } = pinPosition ?? pin;
+  const pos = getAnchoredPosition(x, y);
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -246,11 +248,195 @@ function ThreadPanel({
   );
 }
 
+// src/react/useAnchoredPins.ts
+import { useCallback, useEffect, useState } from "react";
+function useAnchoredPins(items, pathname) {
+  const [positions, setPositions] = useState(
+    /* @__PURE__ */ new Map()
+  );
+  const resolve = useCallback(() => {
+    const next = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      if (item.payload.page.pathname !== pathname) continue;
+      const pin = item.payload.pins[0];
+      if (!pin) continue;
+      const pos = resolvePin(pin);
+      next.set(item.payload.id, pos);
+    }
+    setPositions(next);
+  }, [items, pathname]);
+  useEffect(() => {
+    resolve();
+  }, [resolve]);
+  useEffect(() => {
+    let raf = 0;
+    const handler = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(resolve);
+    };
+    window.addEventListener("resize", handler, { passive: true });
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", handler);
+      window.removeEventListener("scroll", handler);
+    };
+  }, [resolve]);
+  const getPosition = useCallback(
+    (itemId, fallbackPin) => {
+      return positions.get(itemId) ?? { x: fallbackPin.x, y: fallbackPin.y };
+    },
+    [positions]
+  );
+  return { getPosition };
+}
+function resolvePin(pin) {
+  const { target } = pin;
+  if (!target.selector) return { x: pin.x, y: pin.y };
+  let el = null;
+  try {
+    el = document.querySelector(target.selector);
+  } catch {
+    return { x: pin.x, y: pin.y };
+  }
+  if (!el) return { x: pin.x, y: pin.y };
+  const rect = el.getBoundingClientRect();
+  const origRect = target.boundingRect;
+  const ratioX = origRect.width > 0 ? (pin.x - origRect.x) / origRect.width : 0.5;
+  const ratioY = origRect.height > 0 ? (pin.y - origRect.y) / origRect.height : 0.5;
+  const x = rect.x + window.scrollX + ratioX * rect.width;
+  const y = rect.y + window.scrollY + ratioY * rect.height;
+  return { x, y };
+}
+
 // src/react/useFeedtackState.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useState as useState2 } from "react";
+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, useRef } from "react";
+import { useEffect as useEffect2, useRef } from "react";
 
 // src/ui/styles.ts
 var FEEDTACK_DEFAULT_TOKENS = `
@@ -503,7 +689,7 @@ var FEEDTACK_STYLES = `
 // src/react/useFeedtackDom.ts
 function useFeedtackDom(theme, disabled) {
   const rootRef = useRef(null);
-  useEffect(() => {
+  useEffect2(() => {
     if (disabled) return;
     if (document.getElementById("feedtack-styles")) return;
     const style = document.createElement("style");
@@ -514,7 +700,7 @@ function useFeedtackDom(theme, disabled) {
       style.remove();
     };
   }, [disabled]);
-  useEffect(() => {
+  useEffect2(() => {
     if (disabled) return;
     const root = document.createElement("div");
     root.id = "feedtack-root";
@@ -524,7 +710,7 @@ function useFeedtackDom(theme, disabled) {
       root.remove();
     };
   }, [disabled]);
-  useEffect(() => {
+  useEffect2(() => {
     if (disabled) return;
     const root = document.getElementById("feedtack-root");
     if (!root || !theme) return;
@@ -537,7 +723,7 @@ function useFeedtackDom(theme, disabled) {
 }
 
 // src/react/useFeedtackFlush.ts
-import { useCallback, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
 var DEFAULT_IDLE_MS = 5 * 60 * 1e3;
 function useFeedtackFlush({
   pathname,
@@ -549,7 +735,7 @@ function useFeedtackFlush({
   const flushedRef = useRef2(/* @__PURE__ */ new Set());
   const prevPathnameRef = useRef2(pathname);
   const idleTimerRef = useRef2(null);
-  const flush = useCallback(
+  const flush = useCallback3(
     (path, items) => {
       if (!onFlush || flushedRef.current.has(path)) return;
       const pageItems = items.filter((i) => i.payload.page.pathname === path);
@@ -559,7 +745,7 @@ function useFeedtackFlush({
     },
     [onFlush]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     if (disabled || !onFlush) return;
     const prev = prevPathnameRef.current;
     prevPathnameRef.current = pathname;
@@ -567,7 +753,7 @@ function useFeedtackFlush({
       flush(prev, feedbackItems);
     }
   }, [pathname, feedbackItems, flush, onFlush, disabled]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (disabled || !onFlush || flushIdleMs <= 0) return;
     const resetTimer = () => {
       if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
@@ -584,38 +770,38 @@ function useFeedtackFlush({
       for (const e of events) window.removeEventListener(e, resetTimer);
     };
   }, [pathname, feedbackItems, flush, onFlush, flushIdleMs, disabled]);
-  useEffect2(() => {
+  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 = useCallback((path) => {
+  const clearFlushed = useCallback3((path) => {
     flushedRef.current.delete(path);
   }, []);
   return { clearFlushed };
 }
 
 // src/react/usePinMode.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useState } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useState as useState2 } from "react";
 function usePinMode({
   hotkey,
   onDeactivate,
   disabled,
   isModalOpen
 }) {
-  const [isActive, setIsActive] = useState(false);
-  const [pendingPins, setPendingPins] = useState([]);
-  const [selectedColor, setSelectedColor] = useState(PIN_PALETTE[0]);
-  const [showForm, setShowForm] = useState(false);
-  const activate = useCallback2(() => setIsActive(true), []);
-  const deactivate = useCallback2(() => {
+  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]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isActive) {
       document.documentElement.classList.add("feedtack-crosshair");
     } else {
@@ -623,7 +809,7 @@ function usePinMode({
     }
     return () => document.documentElement.classList.remove("feedtack-crosshair");
   }, [isActive]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (disabled) return;
     const handler = (e) => {
       if (e.key === hotkey.toUpperCase() && e.shiftKey) {
@@ -644,7 +830,7 @@ function usePinMode({
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
   }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm]);
-  const placePin = useCallback2(
+  const placePin = useCallback4(
     (coords, target) => {
       if (target.closest("#feedtack-root, .feedtack-form, .feedtack-color-picker"))
         return;
@@ -660,7 +846,7 @@ function usePinMode({
     },
     [selectedColor]
   );
-  const handlePageClick = useCallback2(
+  const handlePageClick = useCallback4(
     (e) => {
       if (!isActive) return;
       e.preventDefault();
@@ -669,7 +855,7 @@ function usePinMode({
     },
     [isActive, placePin]
   );
-  const handleTouchEnd = useCallback2(
+  const handleTouchEnd = useCallback4(
     (e) => {
       if (!isActive) return;
       const touch = e.changedTouches[0];
@@ -681,7 +867,7 @@ function usePinMode({
     },
     [isActive, placePin]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (disabled) return;
     document.addEventListener("click", handlePageClick, true);
     document.addEventListener("touchend", handleTouchEnd, true);
@@ -714,10 +900,10 @@ function useFeedtackState({
   rescopeRoles
 }) {
   useFeedtackDom(theme, disabled);
-  const [pathname, setPathname] = useState2(
+  const [pathname, setPathname] = useState3(
     () => typeof window === "undefined" ? "/" : window.location.pathname
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const update = () => setPathname(window.location.pathname);
     const origPush = history.pushState.bind(history);
     const origReplace = history.replaceState.bind(history);
@@ -736,15 +922,15 @@ function useFeedtackState({
       history.replaceState = origReplace;
     };
   }, []);
-  const [comment, setComment] = useState2("");
-  const [sentiment, setSentiment] = useState2(null);
-  const [commentError, setCommentError] = useState2(false);
-  const [submitting, setSubmitting] = useState2(false);
-  const [feedbackItems, setFeedbackItems] = useState2([]);
-  const [loading, setLoading] = useState2(true);
-  const [openThreadId, setOpenThreadId] = useState2(null);
-  const [replyBody, setReplyBody] = useState2("");
-  const resetForm = useCallback3(() => {
+  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);
@@ -765,113 +951,34 @@ function useFeedtackState({
     flushIdleMs,
     disabled
   });
-  useEffect4(() => {
+  useEffect5(() => {
     setLoading(true);
     adapter.loadFeedback({ pathname }).then(setFeedbackItems).catch((err) => onError?.(err)).finally(() => setLoading(false));
   }, [adapter, onError, pathname]);
-  const updateItem = (id, fn) => setFeedbackItems(
-    (prev) => prev.map((i) => i.payload.id === id ? fn(i) : i)
-  );
-  const handleSubmit = async () => {
-    if (!comment.trim()) {
-      setCommentError(true);
-      return;
-    }
-    setSubmitting(true);
-    const payload = {
-      schemaVersion: SCHEMA_VERSION,
-      id: generateId(),
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      submittedBy: currentUser,
-      comment: comment.trim(),
-      sentiment,
-      pins: pinMode.pendingPins.map((p, i) => ({ ...p, index: i + 1 })),
-      page: getPageMeta(),
-      viewport: getViewportMeta(),
-      device: getDeviceMeta()
-    };
-    try {
-      await adapter.submit(payload);
-      setFeedbackItems((prev) => [
-        ...prev,
-        { payload, replies: [], resolutions: [], archives: [] }
-      ]);
-      pinMode.deactivate();
-    } catch (err) {
-      onError?.(err);
-    } finally {
-      setSubmitting(false);
-    }
-  };
-  const handleReply = async (feedbackId) => {
-    if (!replyBody.trim()) return;
-    const ts = (/* @__PURE__ */ new Date()).toISOString();
-    const body = replyBody.trim();
-    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 triggerRescope = rescopeRoles ? rescopeRoles.includes(currentUser.role) : currentUser.role !== "agent";
-        if (triggerRescope && updated.resolutions.length === 0 && onFlush) {
-          clearFlushed(pathname);
-        }
-        return updated;
-      });
-      setReplyBody("");
-    } catch (err) {
-      onError?.(err);
-    }
-  };
-  const handleResolve = 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);
-    }
-  };
-  const handleArchive = 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 }
-        ]
-      }));
-      setOpenThreadId(null);
-    } catch (err) {
-      onError?.(err);
-    }
-  };
+  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;
@@ -894,10 +1001,7 @@ function useFeedtackState({
     setOpenThreadId,
     replyBody,
     setReplyBody,
-    handleSubmit,
-    handleReply,
-    handleResolve,
-    handleArchive,
+    ...actions,
     isArchivedForUser,
     hasUnread,
     hasValidPins
@@ -933,6 +1037,7 @@ function FeedtackProvider({
     flushIdleMs,
     rescopeRoles
   });
+  const { getPosition } = useAnchoredPins(state.feedbackItems, state.pathname);
   const firstPin = state.pendingPins[0];
   const formPos = firstPin ? getAnchoredPosition(firstPin.x, firstPin.y) : {};
   const showButton = !adminOnly || currentUser.role === "admin";
@@ -1017,6 +1122,7 @@ function FeedtackProvider({
         ),
         !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",
             {
@@ -1028,8 +1134,8 @@ function FeedtackProvider({
               ),
               style: {
                 background: pin.color,
-                left: pin.x,
-                top: pin.y,
+                left: pos.x,
+                top: pos.y,
                 position: "absolute",
                 cursor: "pointer"
               },
@@ -1062,6 +1168,10 @@ function FeedtackProvider({
             onResolve: () => state.handleResolve(openItem.payload.id),
             onArchive: () => state.handleArchive(openItem.payload.id),
             onClose: () => state.setOpenThreadId(null),
+            pinPosition: getPosition(
+              openItem.payload.id,
+              openItem.payload.pins[0]
+            ),
             className: classes.thread
           }
         ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedtack",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",