apostil 0.1.4 → 0.1.6

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,
@@ -529,11 +539,14 @@ 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();
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
     }
   }, [autoFocus]);
   const handleSubmit = () => {
@@ -565,7 +578,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-8 h-8 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 +606,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 +645,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 +718,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 +754,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,10 +906,12 @@ function findCommentTarget(el, boundary) {
   };
 }
 function CommentOverlay() {
-  const { threads, commentMode, setCommentMode, user, addThread, setActiveThreadId } = useApostil();
+  const { threads, commentMode, setCommentMode, user, addThread, 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;
@@ -957,6 +988,17 @@ function CommentOverlay() {
     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
+      });
+    });
+  }, [pendingPin]);
   useEffect5(() => {
     const hash = window.location.hash;
     console.log("[apostil] hash check:", hash, "threads:", threads.length, threads.map((t) => t.id));
@@ -1041,35 +1083,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 +1136,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 +1146,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 +1165,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 +1199,8 @@ function CommentSidebar() {
     sidebarOpen,
     setSidebarOpen,
     setActiveThreadId,
-    resolveThread
+    resolveThread,
+    brandColor
   } = useApostil();
   const [tab, setTab] = useState7("page");
   const [allPages, setAllPages] = useState7([]);
@@ -1187,7 +1244,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 +1257,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"