feedtack 0.3.1 → 0.5.0

package/dist/index.d.ts

@@ -50,7 +50,10 @@ declare class WebhookAdapter implements FeedtackAdapter {
 declare function getViewportMeta(): FeedtackViewportMeta;
 declare function getPageMeta(): FeedtackPageMeta;
 declare function getDeviceMeta(): FeedtackDeviceMeta;
-declare function getPinCoords(event: MouseEvent): {
+declare function getPinCoords(event: {
+    clientX: number;
+    clientY: number;
+}): {
     x: number;
     y: number;
     xPct: number;

package/dist/react/index.d.ts

@@ -1,6 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme, e as FeedbackItem } from '../theme-C-uctIoI.js';
+import { e as FeedbackItem, F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme } from '../theme-C-uctIoI.js';
+
+interface FeedtackFlushEvent {
+    pathname: string;
+    items: FeedbackItem[];
+}
 
 interface FeedtackClasses {
     button?: string;
@@ -26,8 +31,14 @@ interface FeedtackProviderProps {
     disabled?: boolean;
     /** Render custom content inside a submitted pin marker. Receives the feedback item. */
     renderPinIcon?: (item: FeedbackItem) => React.ReactNode;
+    /** Called with batched feedback when user leaves a page or goes idle */
+    onFlush?: (event: FeedtackFlushEvent) => void;
+    /** Idle timeout in ms before flushing (default 5 min) */
+    flushIdleMs?: number;
+    /** User roles that trigger re-scope on reply (default: any non-'agent' role) */
+    rescopeRoles?: string[];
 }
-declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, disabled, renderPinIcon, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
+declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, disabled, renderPinIcon, onFlush, flushIdleMs, rescopeRoles, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
 
 interface FeedtackContextValue {
     activatePinMode: () => void;
@@ -38,4 +49,4 @@ interface FeedtackContextValue {
 /** Hook for host app to programmatically control feedtack */
 declare function useFeedtack(): FeedtackContextValue;
 
-export { type FeedtackClasses, FeedtackProvider, type FeedtackProviderProps, type FeedtackSentimentLabels, useFeedtack };
+export { type FeedtackClasses, type FeedtackFlushEvent, FeedtackProvider, type FeedtackProviderProps, type FeedtackSentimentLabels, useFeedtack };

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",
     {
@@ -191,6 +193,10 @@ function ThreadPanel({
               padding: 6,
               borderRadius: 6,
               border: "1px solid var(--ft-border)",
+              background: "var(--ft-surface)",
+              color: "var(--ft-text)",
+              minHeight: 60,
+              resize: "vertical",
               marginTop: 4
             }
           }
@@ -242,15 +248,199 @@ 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 useCallback2, useEffect as useEffect3, 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 = `
-  #feedtack-root {
+  #feedtack-root, .feedtack-form, .feedtack-thread {
     --ft-primary: #2563eb;
     --ft-primary-hover: #1d4ed8;
     --ft-bg: #ffffff;
@@ -499,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");
@@ -510,7 +700,7 @@ function useFeedtackDom(theme, disabled) {
       style.remove();
     };
   }, [disabled]);
-  useEffect(() => {
+  useEffect2(() => {
     if (disabled) return;
     const root = document.createElement("div");
     root.id = "feedtack-root";
@@ -520,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;
@@ -532,26 +722,86 @@ function useFeedtackDom(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, useEffect as useEffect2, 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 = useCallback(() => setIsActive(true), []);
-  const deactivate = useCallback(() => {
+  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]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (isActive) {
       document.documentElement.classList.add("feedtack-crosshair");
     } else {
@@ -559,7 +809,7 @@ function usePinMode({
     }
     return () => document.documentElement.classList.remove("feedtack-crosshair");
   }, [isActive]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (disabled) return;
     const handler = (e) => {
       if (e.key === hotkey.toUpperCase() && e.shiftKey) {
@@ -580,31 +830,52 @@ function usePinMode({
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
   }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm]);
-  const handlePageClick = useCallback(
-    (e) => {
-      if (!isActive) return;
-      const target = e.target;
+  const placePin = useCallback4(
+    (coords, target) => {
       if (target.closest("#feedtack-root, .feedtack-form, .feedtack-color-picker"))
         return;
-      e.preventDefault();
-      e.stopPropagation();
       setPendingPins((prev) => [
         ...prev,
         {
           color: selectedColor,
-          ...getPinCoords(e),
+          ...getPinCoords(coords),
           target: getTargetMeta(target)
         }
       ]);
       setShowForm(true);
     },
-    [isActive, selectedColor]
+    [selectedColor]
   );
-  useEffect2(() => {
+  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);
-    return () => document.removeEventListener("click", handlePageClick, true);
-  }, [handlePageClick, disabled]);
+    document.addEventListener("touchend", handleTouchEnd, true);
+    return () => {
+      document.removeEventListener("click", handlePageClick, true);
+      document.removeEventListener("touchend", handleTouchEnd, true);
+    };
+  }, [handlePageClick, handleTouchEnd, disabled]);
   return {
     isActive,
     activate,
@@ -623,11 +894,16 @@ function useFeedtackState({
   hotkey,
   theme,
   onError,
-  disabled
+  disabled,
+  onFlush,
+  flushIdleMs,
+  rescopeRoles
 }) {
   useFeedtackDom(theme, disabled);
-  const [pathname, setPathname] = useState2(() => window.location.pathname);
-  useEffect3(() => {
+  const [pathname, setPathname] = useState3(
+    () => typeof window === "undefined" ? "/" : window.location.pathname
+  );
+  useEffect5(() => {
     const update = () => setPathname(window.location.pathname);
     const origPush = history.pushState.bind(history);
     const origReplace = history.replaceState.bind(history);
@@ -646,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 = useCallback2(() => {
+  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);
@@ -668,106 +944,44 @@ function useFeedtackState({
       setOpenThreadId(null);
     }
   });
-  useEffect3(() => {
+  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 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) => ({
-        ...item,
-        replies: [
-          ...item.replies,
-          {
-            id: generateId(),
-            feedbackId,
-            author: currentUser,
-            body,
-            timestamp: ts
-          }
-        ]
-      }));
-      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;
   return {
     ...pinMode,
     isPinModeActive: pinMode.isActive,
@@ -787,13 +1001,10 @@ function useFeedtackState({
     setOpenThreadId,
     replyBody,
     setReplyBody,
-    handleSubmit,
-    handleReply,
-    handleResolve,
-    handleArchive,
-    isArchivedForUser: (item) => item.archives.some((a) => a.archivedBy.id === currentUser.id),
-    hasUnread: (item) => item.replies.length > 0,
-    hasValidPins: (item) => Array.isArray(item.payload?.pins) && item.payload.pins.length > 0
+    ...actions,
+    isArchivedForUser,
+    hasUnread,
+    hasValidPins
   };
 }
 
@@ -810,7 +1021,10 @@ function FeedtackProvider({
   sentimentLabels = {},
   onError,
   disabled = false,
-  renderPinIcon
+  renderPinIcon,
+  onFlush,
+  flushIdleMs,
+  rescopeRoles
 }) {
   const state = useFeedtackState({
     adapter,
@@ -818,8 +1032,12 @@ function FeedtackProvider({
     hotkey,
     theme,
     onError,
-    disabled
+    disabled,
+    onFlush,
+    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";
@@ -904,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",
             {
@@ -915,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"
               },
@@ -949,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.3.1",
+  "version": "0.5.0",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",