apostil 0.1.5 → 0.1.7

package/README.md

@@ -98,13 +98,19 @@ Core context provider. Use directly for custom setups. When not using `npx apost
 ```tsx
 import "apostil/styles.css";
 
-<ApostilProvider pageId="my-page" storage={customAdapter}>
+<ApostilProvider pageId="my-page" storage={customAdapter} brandColor="#2563eb">
   {children}
   <CommentOverlay />
   <CommentToggle />
 </ApostilProvider>
 ```
 
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `pageId` | `string` | required | Current page identifier |
+| `storage` | `ApostilStorage` | REST `/api/apostil` | Storage adapter |
+| `brandColor` | `string` | `"#171717"` | Accent color for buttons, tabs, and UI elements |
+
 ### `<CommentOverlay>`
 
 Captures clicks in comment mode. Auto-detects z-index to sit above popovers and modals.

package/dist/index.cjs

@@ -150,6 +150,7 @@ var ApostilContext = (0, import_react.createContext)(null);
 function ApostilProvider({
   pageId,
   storage,
+  brandColor = "#171717",
   children
 }) {
   const adapter = storage ?? defaultAdapter;
@@ -167,6 +168,7 @@ function ApostilProvider({
   (0, import_react.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) {
@@ -176,10 +178,17 @@ function ApostilProvider({
       }
     });
   }, [pageId]);
+  const hadThreadsRef = (0, import_react.useRef)(false);
   (0, import_react.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 = (0, import_react.useCallback)((name) => {
@@ -241,6 +250,7 @@ function ApostilProvider({
     commentMode,
     activeThreadId,
     sidebarOpen,
+    brandColor,
     setCommentMode,
     setActiveThreadId,
     setSidebarOpen,
@@ -474,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)(
@@ -507,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}`);
   }
@@ -586,11 +601,15 @@ function CommentComposer({
   placeholder = "Add a comment...",
   autoFocus = false
 }) {
+  const { brandColor } = useApostil();
   const [value, setValue] = (0, import_react3.useState)("");
   const inputRef = (0, import_react3.useRef)(null);
   (0, import_react3.useEffect)(() => {
     if (autoFocus) {
-      inputRef.current?.focus();
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 50);
+      return () => clearTimeout(timer);
     }
   }, [autoFocus]);
   const handleSubmit = () => {
@@ -614,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)(
@@ -622,7 +641,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__ */ (0, import_jsx_runtime4.jsx)(Send, { className: "w-3.5 h-3.5" })
       }
     )
@@ -649,9 +669,17 @@ function ApostilThreadPopover({
   const ref = (0, import_react4.useRef)(null);
   const isOpen = activeThreadId === thread.id;
   const [pos, setPos] = (0, import_react4.useState)(null);
+  const [flip, setFlip] = (0, import_react4.useState)({ x: false, y: false });
   const updatePos = (0, import_react4.useCallback)(() => {
     setPos(resolvePosition(thread, overlayRef.current));
   }, [thread, overlayRef]);
+  (0, import_react4.useEffect)(() => {
+    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]);
   (0, import_react4.useEffect)(() => {
     if (!isOpen) return;
     updatePos();
@@ -680,8 +708,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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-80 bg-white rounded-xl shadow-2xl border border-neutral-200 overflow-hidden", children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-neutral-100 bg-neutral-50", children: [
@@ -747,7 +781,7 @@ function ApostilThreadPopover({
 var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function UserPrompt() {
-  const { user, setUser, commentMode } = useApostil();
+  const { user, setUser, commentMode, brandColor } = useApostil();
   const [name, setName] = (0, import_react5.useState)("");
   if (user || !commentMode) return null;
   const handleSubmit = () => {
@@ -783,7 +817,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"
           }
         )
@@ -934,18 +969,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 = (0, import_react6.useRef)(null);
   const [pendingPin, setPendingPin] = (0, import_react6.useState)(null);
   const [pendingPixel, setPendingPixel] = (0, import_react6.useState)(null);
+  const pendingRef = (0, import_react6.useRef)(null);
+  const [pendingFlip, setPendingFlip] = (0, import_react6.useState)({ x: false, y: false });
   const handleClick = (0, import_react6.useCallback)(
     (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) {
@@ -1014,6 +1057,16 @@ function CommentOverlay() {
     setPendingPixel(null);
     setCommentMode(false);
   }, [setCommentMode]);
+  (0, import_react6.useEffect)(() => {
+    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]);
   (0, import_react6.useEffect)(() => {
     const hash = window.location.hash;
     console.log("[apostil] hash check:", hash, "threads:", threads.length, threads.map((t) => t.id));
@@ -1039,6 +1092,8 @@ function CommentOverlay() {
           setPendingPin(null);
           setPendingPixel(null);
           setCommentMode(false);
+        } else if (activeThreadId) {
+          setActiveThreadId(null);
         } else if (commentMode) {
           setCommentMode(false);
         }
@@ -1060,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)(
@@ -1075,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)),
@@ -1098,35 +1150,46 @@ function CommentOverlay() {
                     children: "+"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute ml-5 -mt-3 w-72", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "bg-white rounded-xl shadow-2xl border border-neutral-200 p-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-neutral-500", children: "New comment" }),
-                    pendingPin.targetLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium", children: pendingPin.targetLabel })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    CommentComposer,
-                    {
-                      onSubmit: handleNewComment,
-                      placeholder: "What's on your mind?",
-                      autoFocus: true
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    "button",
-                    {
-                      onClick: cancelPending,
-                      className: "mt-2 text-xs text-neutral-400 hover:text-neutral-600 transition-colors",
-                      children: "Cancel"
-                    }
-                  )
-                ] }) })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "bg-white rounded-xl shadow-2xl border border-neutral-200 p-3", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-neutral-500", children: "New comment" }),
+                        pendingPin.targetLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium", children: pendingPin.targetLabel })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        CommentComposer,
+                        {
+                          onSubmit: handleNewComment,
+                          placeholder: "What's on your mind?",
+                          autoFocus: true
+                        }
+                      )
+                    ] })
+                  }
+                )
               ]
             }
           )
         ]
       }
     ),
-    commentMode && !pendingPin && !showingUserPrompt && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 z-[60] pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 z-[60] pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "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__ */ (0, import_jsx_runtime7.jsx)(UserPrompt, {})
   ] });
 }
@@ -1140,7 +1203,8 @@ function CommentToggle() {
     sidebarOpen,
     setSidebarOpen,
     unresolvedCount,
-    setActiveThreadId
+    setActiveThreadId,
+    brandColor
   } = useApostil();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "absolute bottom-5 right-5 z-[65] flex flex-col gap-2 items-end", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1149,7 +1213,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__ */ (0, import_jsx_runtime8.jsx)(List, { className: "w-4 h-4" })
       }
@@ -1167,7 +1232,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__ */ (0, import_jsx_runtime8.jsx)(X, { className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MessageSquare, { className: "w-5 h-5" }),
@@ -1200,7 +1266,8 @@ function CommentSidebar() {
     sidebarOpen,
     setSidebarOpen,
     setActiveThreadId,
-    resolveThread
+    resolveThread,
+    brandColor
   } = useApostil();
   const [tab, setTab] = (0, import_react7.useState)("page");
   const [allPages, setAllPages] = (0, import_react7.useState)([]);
@@ -1244,7 +1311,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__ */ (0, import_jsx_runtime9.jsx)(FileText, { className: "w-3 h-3" }),
             "This Page",
@@ -1256,7 +1324,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__ */ (0, import_jsx_runtime9.jsx)(Globe, { className: "w-3 h-3" }),
             "All Pages"