apostil 0.1.6 → 0.2.0

package/dist/index.js

@@ -427,7 +427,11 @@ function OverlayPin({
   useEffect2(() => {
     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__ */ jsx2(
@@ -460,6 +464,7 @@ function CommentPin({
   index,
   overlayRef
 }) {
+  if (thread.resolved) return null;
   if (thread.targetId) {
     return /* @__PURE__ */ jsx2(TargetedPin, { thread, index }, `targeted-${thread.id}`);
   }
@@ -544,9 +549,10 @@ function CommentComposer({
   const inputRef = useRef3(null);
   useEffect3(() => {
     if (autoFocus) {
-      requestAnimationFrame(() => {
+      const timer = setTimeout(() => {
         inputRef.current?.focus();
-      });
+      }, 50);
+      return () => clearTimeout(timer);
     }
   }, [autoFocus]);
   const handleSubmit = () => {
@@ -570,7 +576,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__ */ jsx4(
@@ -578,7 +584,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__ */ jsx4(Send, { className: "w-3.5 h-3.5" })
       }
@@ -906,7 +912,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 = useRef5(null);
   const [pendingPin, setPendingPin] = useState6(null);
   const [pendingPixel, setPendingPixel] = useState6(null);
@@ -917,9 +923,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) {
@@ -983,34 +995,28 @@ function CommentOverlay() {
     },
     [pendingPin, addThread]
   );
-  const cancelPending = useCallback4(() => {
-    setPendingPin(null);
-    setPendingPixel(null);
-    setCommentMode(false);
-  }, [setCommentMode]);
   useEffect5(() => {
-    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]);
   useEffect5(() => {
     const hash = window.location.hash;
-    console.log("[apostil] hash check:", hash, "threads:", threads.length, threads.map((t) => t.id));
+    debug.log("hash check:", hash, "threads:", threads.length);
     if (!hash.startsWith("#apostil-")) return;
     const threadId = hash.replace("#apostil-", "");
-    console.log("[apostil] looking for thread:", threadId);
+    debug.log("looking for thread:", threadId);
     if (threads.length === 0) {
-      console.log("[apostil] no threads loaded yet, waiting...");
+      debug.log("no threads loaded yet, waiting...");
       return;
     }
     const found = threads.find((t) => t.id === threadId);
-    console.log("[apostil] found thread:", found ? "yes" : "no");
+    debug.log("found thread:", found ? "yes" : "no");
     if (found) {
       setActiveThreadId(threadId);
       window.history.replaceState(null, "", window.location.pathname);
@@ -1024,6 +1030,8 @@ function CommentOverlay() {
           setPendingPin(null);
           setPendingPixel(null);
           setCommentMode(false);
+        } else if (activeThreadId) {
+          setActiveThreadId(null);
         } else if (commentMode) {
           setCommentMode(false);
         }
@@ -1045,11 +1053,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__ */ jsxs6(Fragment2, { children: [
     /* @__PURE__ */ jsxs6(
@@ -1060,7 +1065,7 @@ function CommentOverlay() {
         style: { zIndex: commentMode ? getHighestZIndex() + 10 : 55 },
         onMouseDown: handleClick,
         children: [
-          sortedThreads.map((thread, i) => /* @__PURE__ */ jsxs6("div", { className: "pointer-events-auto", children: [
+          visibleThreads.map((thread, i) => /* @__PURE__ */ jsxs6("div", { className: "pointer-events-auto", children: [
             /* @__PURE__ */ jsx7(CommentPin, { thread, index: i, overlayRef }),
             /* @__PURE__ */ jsx7(ApostilThreadPopover, { thread, overlayRef })
           ] }, thread.id)),