apostil 0.1.5 → 0.1.7

package/dist/index.js

@@ -93,6 +93,7 @@ var ApostilContext = createContext(null);
 function ApostilProvider({
   pageId,
   storage,
+  brandColor = "#171717",
   children
 }) {
   const adapter = storage ?? defaultAdapter;
@@ -110,6 +111,7 @@ function ApostilProvider({
   useEffect(() => {
     pageIdRef.current = pageId;
     setLoaded(false);
+    hadThreadsRef.current = false;
     debug.log("loading threads for pageId:", pageId);
     adapter.load(pageId).then((t) => {
       if (pageIdRef.current === pageId) {
@@ -119,10 +121,17 @@ function ApostilProvider({
       }
     });
   }, [pageId]);
+  const hadThreadsRef = useRef(false);
   useEffect(() => {
-    if (loaded && pageIdRef.current === pageId && threads.length > 0) {
+    if (!loaded || pageIdRef.current !== pageId) return;
+    if (threads.length > 0) {
+      hadThreadsRef.current = true;
       debug.log("saving", threads.length, "threads for pageId:", pageId);
       adapter.save(pageId, threads);
+    } else if (hadThreadsRef.current) {
+      debug.log("saving empty threads for pageId:", pageId);
+      adapter.save(pageId, threads);
+      hadThreadsRef.current = false;
     }
   }, [threads, pageId, loaded]);
   const setUser = useCallback((name) => {
@@ -184,6 +193,7 @@ function ApostilProvider({
     commentMode,
     activeThreadId,
     sidebarOpen,
+    brandColor,
     setCommentMode,
     setActiveThreadId,
     setSidebarOpen,
@@ -417,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(
@@ -450,6 +464,7 @@ function CommentPin({
   index,
   overlayRef
 }) {
+  if (thread.resolved) return null;
   if (thread.targetId) {
     return /* @__PURE__ */ jsx2(TargetedPin, { thread, index }, `targeted-${thread.id}`);
   }
@@ -529,11 +544,15 @@ function CommentComposer({
   placeholder = "Add a comment...",
   autoFocus = false
 }) {
+  const { brandColor } = useApostil();
   const [value, setValue] = useState3("");
   const inputRef = useRef3(null);
   useEffect3(() => {
     if (autoFocus) {
-      inputRef.current?.focus();
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 50);
+      return () => clearTimeout(timer);
     }
   }, [autoFocus]);
   const handleSubmit = () => {
@@ -557,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(
@@ -565,7 +584,8 @@ function CommentComposer({
       {
         onClick: handleSubmit,
         disabled: !value.trim(),
-        className: "flex items-center justify-center w-8 h-8 rounded-lg\n                   bg-neutral-900 text-white disabled:opacity-30\n                   hover:bg-neutral-700 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" })
       }
     )
@@ -592,9 +612,17 @@ function ApostilThreadPopover({
   const ref = useRef4(null);
   const isOpen = activeThreadId === thread.id;
   const [pos, setPos] = useState4(null);
+  const [flip, setFlip] = useState4({ x: false, y: false });
   const updatePos = useCallback3(() => {
     setPos(resolvePosition(thread, overlayRef.current));
   }, [thread, overlayRef]);
+  useEffect4(() => {
+    if (!isOpen || !pos || !ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const flipX = rect.right > window.innerWidth;
+    const flipY = rect.bottom > window.innerHeight;
+    setFlip({ x: flipX, y: flipY });
+  }, [isOpen, pos]);
   useEffect4(() => {
     if (!isOpen) return;
     updatePos();
@@ -623,8 +651,14 @@ function ApostilThreadPopover({
     "div",
     {
       ref,
-      className: "absolute z-[70] ml-5 -mt-3",
-      style: { left: pos.left, top: pos.top },
+      className: "absolute z-[70]",
+      style: {
+        left: pos.left,
+        top: pos.top,
+        marginLeft: flip.x ? -340 : 20,
+        marginTop: flip.y ? -12 : -12,
+        ...flip.y ? { transform: "translateY(-100%)" } : {}
+      },
       onClick: (e) => e.stopPropagation(),
       children: /* @__PURE__ */ jsxs4("div", { className: "w-80 bg-white rounded-xl shadow-2xl border border-neutral-200 overflow-hidden", children: [
         /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-neutral-100 bg-neutral-50", children: [
@@ -690,7 +724,7 @@ function ApostilThreadPopover({
 import { useState as useState5 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function UserPrompt() {
-  const { user, setUser, commentMode } = useApostil();
+  const { user, setUser, commentMode, brandColor } = useApostil();
   const [name, setName] = useState5("");
   if (user || !commentMode) return null;
   const handleSubmit = () => {
@@ -726,7 +760,8 @@ function UserPrompt() {
           {
             onClick: handleSubmit,
             disabled: !name.trim(),
-            className: "w-full py-2 rounded-lg bg-neutral-900 text-white text-sm font-medium\n                     disabled:opacity-30 hover:bg-neutral-700 transition-colors",
+            className: "w-full py-2 rounded-lg text-white text-sm font-medium\n                     disabled:opacity-30 transition-colors",
+            style: { backgroundColor: brandColor },
             children: "Continue"
           }
         )
@@ -877,18 +912,26 @@ function findCommentTarget(el, boundary) {
   };
 }
 function CommentOverlay() {
-  const { threads, commentMode, setCommentMode, user, addThread, setActiveThreadId } = 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);
+  const pendingRef = useRef5(null);
+  const [pendingFlip, setPendingFlip] = useState6({ x: false, y: false });
   const handleClick = useCallback4(
     (e) => {
       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) {
@@ -957,6 +1000,16 @@ function CommentOverlay() {
     setPendingPixel(null);
     setCommentMode(false);
   }, [setCommentMode]);
+  useEffect5(() => {
+    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
+    });
+  }, [pendingPixel, overlayRef]);
   useEffect5(() => {
     const hash = window.location.hash;
     console.log("[apostil] hash check:", hash, "threads:", threads.length, threads.map((t) => t.id));
@@ -982,6 +1035,8 @@ function CommentOverlay() {
           setPendingPin(null);
           setPendingPixel(null);
           setCommentMode(false);
+        } else if (activeThreadId) {
+          setActiveThreadId(null);
         } else if (commentMode) {
           setCommentMode(false);
         }
@@ -1003,11 +1058,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(
@@ -1018,7 +1070,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)),
@@ -1041,35 +1093,46 @@ function CommentOverlay() {
                     children: "+"
                   }
                 ),
-                /* @__PURE__ */ jsx7("div", { className: "absolute ml-5 -mt-3 w-72", children: /* @__PURE__ */ jsxs6("div", { className: "bg-white rounded-xl shadow-2xl border border-neutral-200 p-3", children: [
-                  /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 mb-2", children: [
-                    /* @__PURE__ */ jsx7("p", { className: "text-xs text-neutral-500", children: "New comment" }),
-                    pendingPin.targetLabel && /* @__PURE__ */ jsx7("span", { className: "text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium", children: pendingPin.targetLabel })
-                  ] }),
-                  /* @__PURE__ */ jsx7(
-                    CommentComposer,
-                    {
-                      onSubmit: handleNewComment,
-                      placeholder: "What's on your mind?",
-                      autoFocus: true
-                    }
-                  ),
-                  /* @__PURE__ */ jsx7(
-                    "button",
-                    {
-                      onClick: cancelPending,
-                      className: "mt-2 text-xs text-neutral-400 hover:text-neutral-600 transition-colors",
-                      children: "Cancel"
-                    }
-                  )
-                ] }) })
+                /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    ref: pendingRef,
+                    className: "absolute w-72",
+                    style: {
+                      marginLeft: pendingFlip.x ? -308 : 20,
+                      marginTop: pendingFlip.y ? void 0 : -12,
+                      ...pendingFlip.y ? { bottom: 0 } : {}
+                    },
+                    children: /* @__PURE__ */ jsxs6("div", { className: "bg-white rounded-xl shadow-2xl border border-neutral-200 p-3", children: [
+                      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 mb-2", children: [
+                        /* @__PURE__ */ jsx7("p", { className: "text-xs text-neutral-500", children: "New comment" }),
+                        pendingPin.targetLabel && /* @__PURE__ */ jsx7("span", { className: "text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium", children: pendingPin.targetLabel })
+                      ] }),
+                      /* @__PURE__ */ jsx7(
+                        CommentComposer,
+                        {
+                          onSubmit: handleNewComment,
+                          placeholder: "What's on your mind?",
+                          autoFocus: true
+                        }
+                      )
+                    ] })
+                  }
+                )
               ]
             }
           )
         ]
       }
     ),
-    commentMode && !pendingPin && !showingUserPrompt && /* @__PURE__ */ jsx7("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 z-[60] pointer-events-none", children: /* @__PURE__ */ jsx7("div", { className: "bg-neutral-900/80 text-white text-sm px-4 py-2 rounded-full backdrop-blur-sm", children: "Click anywhere to add a comment" }) }),
+    commentMode && !pendingPin && !showingUserPrompt && /* @__PURE__ */ jsx7("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 z-[60] pointer-events-none", children: /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: "text-white text-sm px-4 py-2 rounded-full backdrop-blur-sm",
+        style: { backgroundColor: `color-mix(in oklab, ${brandColor} 80%, transparent)` },
+        children: "Click anywhere to add a comment"
+      }
+    ) }),
     /* @__PURE__ */ jsx7(UserPrompt, {})
   ] });
 }
@@ -1083,7 +1146,8 @@ function CommentToggle() {
     sidebarOpen,
     setSidebarOpen,
     unresolvedCount,
-    setActiveThreadId
+    setActiveThreadId,
+    brandColor
   } = useApostil();
   return /* @__PURE__ */ jsxs7("div", { className: "absolute bottom-5 right-5 z-[65] flex flex-col gap-2 items-end", children: [
     /* @__PURE__ */ jsx8(
@@ -1092,7 +1156,8 @@ function CommentToggle() {
         onClick: () => setSidebarOpen(!sidebarOpen),
         className: `flex items-center justify-center w-10 h-10 rounded-full shadow-lg
                     transition-all duration-200 hover:scale-105
-                    ${sidebarOpen ? "bg-neutral-900 text-white" : "bg-white text-neutral-600 hover:bg-neutral-50 border border-neutral-200"}`,
+                    ${sidebarOpen ? "text-white" : "bg-white text-neutral-600 hover:bg-neutral-50 border border-neutral-200"}`,
+        style: sidebarOpen ? { backgroundColor: brandColor } : void 0,
         title: "Toggle comment list",
         children: /* @__PURE__ */ jsx8(List, { className: "w-4 h-4" })
       }
@@ -1110,7 +1175,8 @@ function CommentToggle() {
         },
         className: `relative flex items-center justify-center w-12 h-12 rounded-full shadow-lg
                     transition-all duration-200 hover:scale-105
-                    ${commentMode ? "bg-neutral-900 text-white ring-2 ring-neutral-400" : "bg-white text-neutral-700 hover:bg-neutral-50 border border-neutral-200"}`,
+                    ${commentMode ? "text-white ring-2 ring-neutral-400" : "bg-white text-neutral-700 hover:bg-neutral-50 border border-neutral-200"}`,
+        style: commentMode ? { backgroundColor: brandColor } : void 0,
         title: commentMode ? "Exit comment mode" : "Add comment",
         children: [
           commentMode ? /* @__PURE__ */ jsx8(X, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx8(MessageSquare, { className: "w-5 h-5" }),
@@ -1143,7 +1209,8 @@ function CommentSidebar() {
     sidebarOpen,
     setSidebarOpen,
     setActiveThreadId,
-    resolveThread
+    resolveThread,
+    brandColor
   } = useApostil();
   const [tab, setTab] = useState7("page");
   const [allPages, setAllPages] = useState7([]);
@@ -1187,7 +1254,8 @@ function CommentSidebar() {
         "button",
         {
           onClick: () => setTab("page"),
-          className: `flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-medium transition-colors ${tab === "page" ? "text-neutral-900 border-b-2 border-neutral-900" : "text-neutral-400 hover:text-neutral-600"}`,
+          className: `flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-medium transition-colors ${tab === "page" ? "border-b-2" : "text-neutral-400 hover:text-neutral-600"}`,
+          style: tab === "page" ? { color: brandColor, borderColor: brandColor } : void 0,
           children: [
             /* @__PURE__ */ jsx9(FileText, { className: "w-3 h-3" }),
             "This Page",
@@ -1199,7 +1267,8 @@ function CommentSidebar() {
         "button",
         {
           onClick: () => setTab("all"),
-          className: `flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-medium transition-colors ${tab === "all" ? "text-neutral-900 border-b-2 border-neutral-900" : "text-neutral-400 hover:text-neutral-600"}`,
+          className: `flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-medium transition-colors ${tab === "all" ? "border-b-2" : "text-neutral-400 hover:text-neutral-600"}`,
+          style: tab === "all" ? { color: brandColor, borderColor: brandColor } : void 0,
           children: [
             /* @__PURE__ */ jsx9(Globe, { className: "w-3 h-3" }),
             "All Pages"