apostil 0.1.6 → 0.1.7

package/dist/index.cjs

@@ -484,7 +484,11 @@ function OverlayPin({
   (0, import_react2.useEffect)(() => {
     updatePos();
     window.addEventListener("resize", updatePos);
-    return () => window.removeEventListener("resize", updatePos);
+    document.addEventListener("scroll", updatePos, true);
+    return () => {
+      window.removeEventListener("resize", updatePos);
+      document.removeEventListener("scroll", updatePos, true);
+    };
   }, [updatePos]);
   if (!pos) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -517,6 +521,7 @@ function CommentPin({
   index,
   overlayRef
 }) {
+  if (thread.resolved) return null;
   if (thread.targetId) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TargetedPin, { thread, index }, `targeted-${thread.id}`);
   }
@@ -601,9 +606,10 @@ function CommentComposer({
   const inputRef = (0, import_react3.useRef)(null);
   (0, import_react3.useEffect)(() => {
     if (autoFocus) {
-      requestAnimationFrame(() => {
+      const timer = setTimeout(() => {
         inputRef.current?.focus();
-      });
+      }, 50);
+      return () => clearTimeout(timer);
     }
   }, [autoFocus]);
   const handleSubmit = () => {
@@ -627,7 +633,7 @@ function CommentComposer({
         },
         placeholder,
         rows: 1,
-        className: "flex-1 resize-none rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm\n                   placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-300\n                   min-h-[36px] max-h-[120px]"
+        className: "flex-1 resize-none rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm\n                   placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-300\n                   min-h-[36px] max-h-[120px]"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -635,7 +641,7 @@ function CommentComposer({
       {
         onClick: handleSubmit,
         disabled: !value.trim(),
-        className: "flex items-center justify-center w-8 h-8 rounded-lg\n                   text-white disabled:opacity-30\n                   transition-colors shrink-0",
+        className: "flex items-center justify-center w-9 h-9 rounded-lg\n                   text-white disabled:opacity-30\n                   transition-colors shrink-0",
         style: { backgroundColor: brandColor },
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Send, { className: "w-3.5 h-3.5" })
       }
@@ -963,7 +969,7 @@ function findCommentTarget(el, boundary) {
   };
 }
 function CommentOverlay() {
-  const { threads, commentMode, setCommentMode, user, addThread, setActiveThreadId, brandColor } = useApostil();
+  const { threads, commentMode, setCommentMode, user, addThread, activeThreadId, setActiveThreadId, brandColor } = useApostil();
   const overlayRef = (0, import_react6.useRef)(null);
   const [pendingPin, setPendingPin] = (0, import_react6.useState)(null);
   const [pendingPixel, setPendingPixel] = (0, import_react6.useState)(null);
@@ -974,9 +980,15 @@ function CommentOverlay() {
       if (!commentMode || !overlayRef.current) return;
       const overlayRect = overlayRef.current.getBoundingClientRect();
       const overlay = overlayRef.current;
-      overlay.style.pointerEvents = "none";
-      const elementBelow = document.elementFromPoint(e.clientX, e.clientY);
-      overlay.style.pointerEvents = "";
+      const elements = document.elementsFromPoint(e.clientX, e.clientY);
+      let elementBelow = null;
+      for (const el of elements) {
+        if (el === overlay || overlay.contains(el)) continue;
+        if (el instanceof HTMLElement) {
+          elementBelow = el;
+          break;
+        }
+      }
       debug.log(" click at", { clientX: e.clientX, clientY: e.clientY });
       debug.log(" element below overlay:", elementBelow);
       if (elementBelow) {
@@ -1046,16 +1058,15 @@ function CommentOverlay() {
     setCommentMode(false);
   }, [setCommentMode]);
   (0, import_react6.useEffect)(() => {
-    if (!pendingPin || !pendingRef.current) return;
-    requestAnimationFrame(() => {
-      if (!pendingRef.current) return;
-      const rect = pendingRef.current.getBoundingClientRect();
-      setPendingFlip({
-        x: rect.right > window.innerWidth,
-        y: rect.bottom > window.innerHeight
-      });
+    if (!pendingPixel || !overlayRef.current) return;
+    const overlayRect = overlayRef.current.getBoundingClientRect();
+    const clickX = overlayRect.left + pendingPixel.left;
+    const clickY = overlayRect.top + pendingPixel.top;
+    setPendingFlip({
+      x: clickX + 308 > window.innerWidth,
+      y: clickY + 200 > window.innerHeight
     });
-  }, [pendingPin]);
+  }, [pendingPixel, overlayRef]);
   (0, import_react6.useEffect)(() => {
     const hash = window.location.hash;
     console.log("[apostil] hash check:", hash, "threads:", threads.length, threads.map((t) => t.id));
@@ -1081,6 +1092,8 @@ function CommentOverlay() {
           setPendingPin(null);
           setPendingPixel(null);
           setCommentMode(false);
+        } else if (activeThreadId) {
+          setActiveThreadId(null);
         } else if (commentMode) {
           setCommentMode(false);
         }
@@ -1102,11 +1115,8 @@ function CommentOverlay() {
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [commentMode, pendingPin, setCommentMode, setActiveThreadId]);
-  const sortedThreads = [...threads].sort((a, b) => {
-    if (a.resolved !== b.resolved) return a.resolved ? 1 : -1;
-    return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
-  });
+  }, [commentMode, pendingPin, activeThreadId, setCommentMode, setActiveThreadId]);
+  const visibleThreads = threads.filter((t) => !t.resolved).sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
   const showingUserPrompt = commentMode && !user;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1117,7 +1127,7 @@ function CommentOverlay() {
         style: { zIndex: commentMode ? getHighestZIndex() + 10 : 55 },
         onMouseDown: handleClick,
         children: [
-          sortedThreads.map((thread, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pointer-events-auto", children: [
+          visibleThreads.map((thread, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pointer-events-auto", children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CommentPin, { thread, index: i, overlayRef }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ApostilThreadPopover, { thread, overlayRef })
           ] }, thread.id)),