apostil 0.1.5 → 0.1.6

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,
@@ -586,11 +596,14 @@ 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();
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
     }
   }, [autoFocus]);
   const handleSubmit = () => {
@@ -622,7 +635,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__ */ (0, import_jsx_runtime4.jsx)(Send, { className: "w-3.5 h-3.5" })
       }
     )
@@ -649,9 +663,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 +702,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 +775,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 +811,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,10 +963,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 = (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;
@@ -1014,6 +1045,17 @@ function CommentOverlay() {
     setPendingPixel(null);
     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
+      });
+    });
+  }, [pendingPin]);
   (0, import_react6.useEffect)(() => {
     const hash = window.location.hash;
     console.log("[apostil] hash check:", hash, "threads:", threads.length, threads.map((t) => t.id));
@@ -1098,35 +1140,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 +1193,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 +1203,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 +1222,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 +1256,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 +1301,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 +1314,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"