comment-mode 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useState, useMemo, useEffect, useRef, useContext } from 'react';
+import { createContext, useState, useCallback, useLayoutEffect, useMemo, useEffect, useRef, useContext } from 'react';
 import { createClient } from '@supabase/supabase-js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -15,6 +15,7 @@ function AuthProvider(props) {
   const [accessToken, setAccessToken] = useState(null);
   const [isReady, setIsReady] = useState(false);
   const [displayName, setDisplayNameState] = useState("");
+  const [avatarUrl, setAvatarUrl] = useState(null);
   const apiBaseUrl = (_a = config.apiBaseUrl) != null ? _a : DEFAULT_API_BASE_URL;
   useEffect(() => {
     let cancelled = false;
@@ -27,8 +28,13 @@ function AuthProvider(props) {
           const userName = ((_c = meta == null ? void 0 : meta.user_name) == null ? void 0 : _c.trim()) || ((_d = meta == null ? void 0 : meta.preferred_username) == null ? void 0 : _d.trim());
           const emailPrefix = (_f = (_e = u.email) == null ? void 0 : _e.split("@")[0]) == null ? void 0 : _f.trim();
           return fullName || userName || emailPrefix || "";
+        }, getAvatarUrlFromUser2 = function(u) {
+          var _a2;
+          const meta = u.user_metadata;
+          const url = (_a2 = meta == null ? void 0 : meta.avatar_url) == null ? void 0 : _a2.trim();
+          return url || null;
         };
-        var getDisplayNameFromUser = getDisplayNameFromUser2;
+        var getDisplayNameFromUser = getDisplayNameFromUser2, getAvatarUrlFromUser = getAvatarUrlFromUser2;
         const response = await fetch(`${apiBaseUrl}/auth/config`);
         if (!response.ok) {
           throw new Error(`Failed to load auth config: ${response.status}`);
@@ -48,16 +54,19 @@ function AuthProvider(props) {
           setUser({ id: session.user.id, email: session.user.email });
           setAccessToken(session.access_token);
           setDisplayNameState(getDisplayNameFromUser2(session.user));
+          setAvatarUrl(getAvatarUrlFromUser2(session.user));
         }
         client.auth.onAuthStateChange((_event, session2) => {
           if (!session2 || !session2.user) {
             setUser(null);
             setAccessToken(null);
             setDisplayNameState("");
+            setAvatarUrl(null);
           } else {
             setUser({ id: session2.user.id, email: session2.user.email });
             setAccessToken(session2.access_token);
             setDisplayNameState(getDisplayNameFromUser2(session2.user));
+            setAvatarUrl(getAvatarUrlFromUser2(session2.user));
           }
         });
       } catch (err) {
@@ -102,6 +111,7 @@ function AuthProvider(props) {
     setUser(null);
     setAccessToken(null);
     setDisplayNameState("");
+    setAvatarUrl(null);
   }, [supabase]);
   const value = useMemo(
     () => ({
@@ -110,6 +120,7 @@ function AuthProvider(props) {
       accessToken,
       isReady,
       displayName,
+      avatarUrl,
       signInWithEmail,
       signInWithGitHub,
       signOut
@@ -120,6 +131,7 @@ function AuthProvider(props) {
       accessToken,
       isReady,
       displayName,
+      avatarUrl,
       signInWithEmail,
       signInWithGitHub,
       signOut
@@ -134,6 +146,49 @@ function useAuthInternal() {
   }
   return ctx;
 }
+
+// src/selector.ts
+function getSelector(element, root) {
+  if (element === root) return ":scope";
+  const id = element.id;
+  if (id && /^[a-zA-Z][\w-]*$/.test(id) && !id.toLowerCase().startsWith("radix")) {
+    try {
+      const matches = root.querySelectorAll(`#${escapeSelectorId(id)}`);
+      if (matches.length === 1 && matches[0] === element) return `#${escapeSelectorId(id)}`;
+    } catch {
+    }
+  }
+  const path = [];
+  let current = element;
+  while (current && current !== root) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id && /^[a-zA-Z][\w-]*$/.test(current.id)) {
+      selector += `#${escapeSelectorId(current.id)}`;
+      path.unshift(selector);
+      break;
+    }
+    const parent = current.parentElement;
+    if (!parent) break;
+    const siblings = Array.from(parent.children).filter(
+      (el) => el.tagName === current.tagName
+    );
+    const index = siblings.indexOf(current);
+    if (siblings.length > 1) selector += `:nth-of-type(${index + 1})`;
+    path.unshift(selector);
+    current = parent;
+  }
+  return path.join(" > ");
+}
+function escapeSelectorId(id) {
+  return CSS.escape(id);
+}
+function isElementVisible(el) {
+  const rect = el.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) return false;
+  const style = window.getComputedStyle(el);
+  if (style.display === "none" || style.visibility === "hidden") return false;
+  return true;
+}
 var CommentsContext = createContext(void 0);
 function CommentsProvider(props) {
   var _a;
@@ -146,6 +201,7 @@ function CommentsProvider(props) {
   const [commentModeEnabled, setCommentModeEnabled] = useState(true);
   const [hoveredRect, setHoveredRect] = useState(null);
   const [pendingAnchor, setPendingAnchor] = useState(null);
+  const pendingAnchorElementRef = useRef(null);
   const surfaceRef = useRef(null);
   const surfaceClickHandlerRef = useRef(null);
   const onPinClickRef = useRef(null);
@@ -171,11 +227,17 @@ function CommentsProvider(props) {
         }
         const data = await response.json();
         if (cancelled) return;
-        const mapped = (_b = (_a2 = data.threads) == null ? void 0 : _a2.map((t) => ({
-          id: t.id,
-          anchor: { x: t.anchorX, y: t.anchorY },
-          status: "open"
-        }))) != null ? _b : [];
+        const mapped = (_b = (_a2 = data.threads) == null ? void 0 : _a2.map((t) => {
+          var _a3, _b2;
+          return {
+            id: t.id,
+            anchor: { x: t.anchorX, y: t.anchorY },
+            anchorSelector: (_a3 = t.anchorSelector) != null ? _a3 : null,
+            anchorRelative: typeof t.anchorRelativeX === "number" && typeof t.anchorRelativeY === "number" ? { x: t.anchorRelativeX, y: t.anchorRelativeY } : null,
+            status: "open",
+            firstCommentAuthorAvatarUrl: (_b2 = t.firstCommentAuthorAvatarUrl) != null ? _b2 : null
+          };
+        })) != null ? _b : [];
         setThreads(mapped);
       } catch (err) {
         if (cancelled) return;
@@ -193,11 +255,30 @@ function CommentsProvider(props) {
     };
   }, [apiBaseUrl, config.projectSlug, config.surfaceId, accessToken, isAuthReady]);
   const createThread = useCallback(
-    async (anchor, initialCommentBody, initialAuthorName) => {
+    async (anchor, initialCommentBody, initialAuthorName, anchorElement, initialAuthorAvatarUrl) => {
+      var _a2, _b, _c;
+      const root = surfaceRef.current;
+      const anchorSelector = root && anchorElement && root.contains(anchorElement) ? getSelector(anchorElement, root) : null;
+      let anchorRelative = null;
+      if (root && anchorElement && anchorSelector) {
+        const surfaceRect = root.getBoundingClientRect();
+        const elRect = anchorElement.getBoundingClientRect();
+        if (elRect.width > 0 && elRect.height > 0) {
+          const clickX = surfaceRect.left + anchor.x * surfaceRect.width;
+          const clickY = surfaceRect.top + anchor.y * surfaceRect.height;
+          anchorRelative = {
+            x: Math.max(0, Math.min(1, (clickX - elRect.left) / elRect.width)),
+            y: Math.max(0, Math.min(1, (clickY - elRect.top) / elRect.height))
+          };
+        }
+      }
       const optimisticThread = {
         id: `${Date.now()}`,
         anchor,
-        status: "open"
+        anchorSelector: anchorSelector != null ? anchorSelector : void 0,
+        anchorRelative: anchorRelative != null ? anchorRelative : void 0,
+        status: "open",
+        firstCommentAuthorAvatarUrl: initialAuthorAvatarUrl != null ? initialAuthorAvatarUrl : null
       };
       setThreads((prev) => [...prev, optimisticThread]);
       try {
@@ -214,8 +295,12 @@ function CommentsProvider(props) {
             surfaceId: config.surfaceId,
             anchorX: anchor.x,
             anchorY: anchor.y,
+            anchorSelector: anchorSelector != null ? anchorSelector : null,
+            anchorRelativeX: (_a2 = anchorRelative == null ? void 0 : anchorRelative.x) != null ? _a2 : null,
+            anchorRelativeY: (_b = anchorRelative == null ? void 0 : anchorRelative.y) != null ? _b : null,
             initialCommentBody: initialCommentBody != null ? initialCommentBody : null,
-            initialAuthorName: initialAuthorName != null ? initialAuthorName : null
+            initialAuthorName: initialAuthorName != null ? initialAuthorName : null,
+            initialAuthorAvatarUrl: initialAuthorAvatarUrl != null ? initialAuthorAvatarUrl : null
           })
         });
         if (!response.ok) {
@@ -224,7 +309,8 @@ function CommentsProvider(props) {
         const data = await response.json();
         const persistedThread = {
           ...optimisticThread,
-          id: data.id
+          id: data.id,
+          firstCommentAuthorAvatarUrl: (_c = initialAuthorAvatarUrl != null ? initialAuthorAvatarUrl : optimisticThread.firstCommentAuthorAvatarUrl) != null ? _c : null
         };
         setThreads(
           (prev) => prev.map((t) => t === optimisticThread ? persistedThread : t)
@@ -258,13 +344,14 @@ function CommentsProvider(props) {
         }
         const data = await response.json();
         const mapped = (_b = (_a2 = data.comments) == null ? void 0 : _a2.map((c) => {
-          var _a3;
+          var _a3, _b2;
           return {
             id: c.id,
             threadId: c.threadId,
             body: c.body,
             createdAt: c.createdAt,
-            authorName: (_a3 = c.authorName) != null ? _a3 : null
+            authorName: (_a3 = c.authorName) != null ? _a3 : null,
+            authorAvatarUrl: (_b2 = c.authorAvatarUrl) != null ? _b2 : null
           };
         })) != null ? _b : [];
         setCommentsByThread((prev) => ({
@@ -280,7 +367,7 @@ function CommentsProvider(props) {
     [apiBaseUrl, accessToken]
   );
   const addComment = useCallback(
-    async (threadId, body, authorName) => {
+    async (threadId, body, authorName, authorAvatarUrl) => {
       const trimmed = body.trim();
       if (!trimmed) {
         throw new Error("Comment body is empty");
@@ -289,7 +376,8 @@ function CommentsProvider(props) {
         id: `${Date.now()}`,
         threadId,
         body: trimmed,
-        authorName: authorName != null ? authorName : null
+        authorName: authorName != null ? authorName : null,
+        authorAvatarUrl: authorAvatarUrl != null ? authorAvatarUrl : null
       };
       setCommentsByThread((prev) => {
         var _a2;
@@ -305,7 +393,7 @@ function CommentsProvider(props) {
             "Content-Type": "application/json",
             ...accessToken ? { Authorization: `Bearer ${accessToken}` } : {}
           },
-          body: JSON.stringify({ threadId, body: trimmed, authorName })
+          body: JSON.stringify({ threadId, body: trimmed, authorName, authorAvatarUrl: authorAvatarUrl != null ? authorAvatarUrl : null })
         });
         if (!response.ok) {
           throw new Error(`Failed to create comment: ${response.status}`);
@@ -315,7 +403,9 @@ function CommentsProvider(props) {
           id: data.id,
           threadId,
           body: trimmed,
-          createdAt: data.createdAt
+          createdAt: data.createdAt,
+          authorName: authorName != null ? authorName : null,
+          authorAvatarUrl: authorAvatarUrl != null ? authorAvatarUrl : null
         };
         setCommentsByThread((prev) => {
           var _a2;
@@ -382,6 +472,7 @@ function CommentsProvider(props) {
       surfaceClickHandlerRef,
       pendingAnchor,
       setPendingAnchor,
+      pendingAnchorElementRef,
       onPinClickRef
     }),
     [
@@ -428,22 +519,33 @@ function useComments() {
     deleteThread: ctx.deleteThread
   };
 }
-var PIN_STYLE = {
+var PIN_SIZE = 28;
+var PIN_BASE_STYLE = {
   position: "absolute",
   transform: "translate(-50%, -50%)",
-  width: 18,
-  height: 18,
+  width: PIN_SIZE,
+  height: PIN_SIZE,
   borderRadius: "999px",
-  background: "#f97316",
-  border: "2px solid #fff",
-  boxShadow: "0 4px 10px rgba(0,0,0,0.25)",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  cursor: "pointer"
+};
+var PIN_DOT_STYLE = {
+  ...PIN_BASE_STYLE,
+  background: "#f97316",
+  border: "2px solid #fff",
+  boxShadow: "0 4px 10px rgba(0,0,0,0.25)",
   color: "#fff",
   fontSize: 10,
-  fontWeight: 600,
-  cursor: "pointer"
+  fontWeight: 600
+};
+var PIN_AVATAR_STYLE = {
+  ...PIN_BASE_STYLE,
+  border: "2px solid #fff",
+  boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+  overflow: "hidden",
+  backgroundColor: "#e5e7eb"
 };
 function CommentSurface(props) {
   const {
@@ -455,6 +557,67 @@ function CommentSurface(props) {
     onPinClickRef
   } = useCommentsInternal();
   const { threads } = useComments();
+  const [resolvedPinPositions, setResolvedPinPositions] = useState({});
+  const recalcPinPositions = useCallback(() => {
+    const root = surfaceRef.current;
+    if (!root) return;
+    const surfaceRect = root.getBoundingClientRect();
+    if (surfaceRect.width === 0 && surfaceRect.height === 0) return;
+    const next = {};
+    threads.forEach((thread) => {
+      if (thread.anchorSelector) {
+        try {
+          const el = root.querySelector(thread.anchorSelector);
+          if (!el || !(el instanceof HTMLElement)) {
+            next[thread.id] = "hide";
+            return;
+          }
+          if (!isElementVisible(el)) {
+            next[thread.id] = "hide";
+            return;
+          }
+          const elRect = el.getBoundingClientRect();
+          const rel = thread.anchorRelative;
+          const rx = rel && typeof rel.x === "number" ? rel.x : 0.5;
+          const ry = rel && typeof rel.y === "number" ? rel.y : 0.5;
+          const left = (elRect.left - surfaceRect.left + rx * elRect.width) / surfaceRect.width;
+          const top = (elRect.top - surfaceRect.top + ry * elRect.height) / surfaceRect.height;
+          next[thread.id] = { left, top };
+        } catch {
+          next[thread.id] = "hide";
+        }
+      }
+    });
+    setResolvedPinPositions(next);
+  }, [threads, surfaceRef]);
+  useLayoutEffect(() => {
+    recalcPinPositions();
+  }, [recalcPinPositions]);
+  useLayoutEffect(() => {
+    const root = surfaceRef.current;
+    if (!root) return;
+    const scrollables = [root];
+    const walk = (el) => {
+      if (el === root) return;
+      const style = window.getComputedStyle(el);
+      const overflow = style.overflow + style.overflowX + style.overflowY;
+      if (overflow.includes("scroll") || overflow.includes("auto")) {
+        scrollables.push(el);
+      }
+      if (el instanceof HTMLElement && el.children.length) {
+        Array.from(el.children).forEach(walk);
+      }
+    };
+    walk(root);
+    const handleScroll = () => recalcPinPositions();
+    scrollables.forEach((el) => el.addEventListener("scroll", handleScroll, { passive: true }));
+    const ro = new ResizeObserver(handleScroll);
+    ro.observe(root);
+    return () => {
+      scrollables.forEach((el) => el.removeEventListener("scroll", handleScroll));
+      ro.disconnect();
+    };
+  }, [recalcPinPositions, surfaceRef]);
   const handleMouseMove = useCallback(
     (e) => {
       if (!commentModeEnabled) return;
@@ -506,42 +669,58 @@ function CommentSurface(props) {
               zIndex: 1
             },
             children: [
-              threads.map((thread) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-commentator-pin": true,
-                  role: "button",
-                  tabIndex: 0,
-                  onClick: (e) => {
-                    var _a;
-                    e.stopPropagation();
-                    (_a = onPinClickRef.current) == null ? void 0 : _a.call(onPinClickRef, thread.id, e.clientX, e.clientY);
-                  },
-                  onKeyDown: (e) => {
-                    var _a;
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
+              threads.map((thread) => {
+                const resolved = resolvedPinPositions[thread.id];
+                if (resolved === "hide") return null;
+                const left = typeof resolved === "object" ? resolved.left : thread.anchor.x;
+                const top = typeof resolved === "object" ? resolved.top : thread.anchor.y;
+                const pinStyle = {
+                  ...thread.firstCommentAuthorAvatarUrl ? PIN_AVATAR_STYLE : PIN_DOT_STYLE,
+                  left: `${left * 100}%`,
+                  top: `${top * 100}%`,
+                  pointerEvents: "auto"
+                };
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-commentator-pin": true,
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: (e) => {
+                      var _a;
                       e.stopPropagation();
-                      (_a = onPinClickRef.current) == null ? void 0 : _a.call(onPinClickRef, thread.id, 0, 0);
-                    }
-                  },
-                  style: {
-                    ...PIN_STYLE,
-                    left: `${thread.anchor.x * 100}%`,
-                    top: `${thread.anchor.y * 100}%`,
-                    pointerEvents: "auto"
+                      (_a = onPinClickRef.current) == null ? void 0 : _a.call(onPinClickRef, thread.id, e.clientX, e.clientY);
+                    },
+                    onKeyDown: (e) => {
+                      var _a;
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        (_a = onPinClickRef.current) == null ? void 0 : _a.call(onPinClickRef, thread.id, 0, 0);
+                      }
+                    },
+                    style: pinStyle,
+                    children: thread.firstCommentAuthorAvatarUrl ? /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: thread.firstCommentAuthorAvatarUrl,
+                        alt: "",
+                        width: PIN_SIZE,
+                        height: PIN_SIZE,
+                        style: { display: "block", width: PIN_SIZE, height: PIN_SIZE, objectFit: "cover" }
+                      }
+                    ) : "\u25CF"
                   },
-                  children: "\u25CF"
-                },
-                thread.id
-              )),
+                  thread.id
+                );
+              }),
               pendingAnchor && /* @__PURE__ */ jsx(
                 "div",
                 {
                   "aria-hidden": true,
                   "data-commentator-pin": true,
                   style: {
-                    ...PIN_STYLE,
+                    ...PIN_DOT_STYLE,
                     left: `${pendingAnchor.x * 100}%`,
                     top: `${pendingAnchor.y * 100}%`,
                     cursor: "default",
@@ -567,11 +746,12 @@ function CommentSettings() {
   const {
     user,
     displayName,
+    avatarUrl,
     signOut,
     isReady: isAuthReady,
     signInWithGitHub
   } = useCommentAuth();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -583,90 +763,79 @@ function CommentSettings() {
         flexDirection: "column",
         gap: 8
       },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              marginBottom: 4
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: 14,
-                    fontWeight: 600,
-                    color: "#111827"
-                  },
-                  children: "Commentator settings"
-                }
-              ),
-              user && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => signOut().catch(() => {
-                  }),
-                  style: {
-                    borderRadius: 999,
-                    border: "1px solid #e5e7eb",
-                    backgroundColor: "#ffffff",
-                    padding: "4px 10px",
-                    fontSize: 11,
-                    color: "#374151",
-                    cursor: "pointer"
-                  },
-                  children: "Sign out"
+      children: user ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            fontSize: 12,
+            color: "#6b7280"
+          },
+          children: [
+            avatarUrl && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: avatarUrl,
+                alt: "",
+                width: 24,
+                height: 24,
+                style: {
+                  borderRadius: "50%",
+                  flexShrink: 0
                 }
-              )
-            ]
-          }
-        ),
-        user ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: 12,
-              color: "#6b7280"
-            },
-            children: /* @__PURE__ */ jsxs("span", { children: [
-              "Signed in as ",
-              displayName || user.email || "unknown user"
-            ] })
-          }
-        ) : /* @__PURE__ */ jsx("div", { style: { marginTop: 4 }, children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => signInWithGitHub().catch(() => {
-            }),
-            disabled: !isAuthReady,
-            style: {
-              width: "100%",
-              padding: "8px 12px",
-              borderRadius: 10,
-              border: "1px solid #e5e7eb",
-              backgroundColor: "#24292f",
-              color: "#fff",
-              fontSize: 13,
-              fontWeight: 500,
-              cursor: isAuthReady ? "pointer" : "default",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 8
-            },
-            children: [
-              /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" }) }),
-              "Sign in with GitHub"
-            ]
-          }
-        ) })
-      ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: displayName || user.email || "unknown user" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => signOut().catch(() => {
+                }),
+                style: {
+                  borderRadius: 999,
+                  border: "1px solid #e5e7eb",
+                  backgroundColor: "#ffffff",
+                  padding: "4px 10px",
+                  fontSize: 11,
+                  color: "#374151",
+                  cursor: "pointer"
+                },
+                children: "Sign out"
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("div", { style: { marginTop: 4 }, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => signInWithGitHub().catch(() => {
+          }),
+          disabled: !isAuthReady,
+          style: {
+            width: "100%",
+            padding: "8px 12px",
+            borderRadius: 10,
+            border: "1px solid #e5e7eb",
+            backgroundColor: "#24292f",
+            color: "#fff",
+            fontSize: 13,
+            fontWeight: 500,
+            cursor: isAuthReady ? "pointer" : "default",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8
+          },
+          children: [
+            /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" }) }),
+            "Sign in with GitHub"
+          ]
+        }
+      ) })
     }
   );
 }
@@ -714,13 +883,15 @@ function CommentOverlay(props) {
     surfaceClickHandlerRef,
     pendingAnchor,
     setPendingAnchor,
+    pendingAnchorElementRef,
     onPinClickRef
   } = useCommentsInternal();
   const {
     user,
     isReady: isAuthReady,
     signInWithGitHub,
-    displayName
+    displayName,
+    avatarUrl
   } = useCommentAuth();
   const [activeThreadId, setActiveThreadId] = useState(null);
   const [draft, setDraft] = useState("");
@@ -741,18 +912,19 @@ function CommentOverlay(props) {
   }, [activeThreadId, pendingAnchor, commentsByThread, loadComments]);
   const handleSurfaceClick = useCallback(
     (event) => {
-      var _a2;
+      var _a2, _b;
       setShowSettings(false);
       const rect = (_a2 = surfaceRef.current) == null ? void 0 : _a2.getBoundingClientRect();
       if (!rect) return;
       const x = (event.clientX - rect.left) / rect.width;
       const y = (event.clientY - rect.top) / rect.height;
       setPendingAnchor({ x, y });
+      pendingAnchorElementRef.current = (_b = event.target) != null ? _b : null;
       setActiveThreadId(null);
       setDraft("");
       setPanelPosition(computePanelPosition(event.clientX, event.clientY));
     },
-    [setPendingAnchor, surfaceRef]
+    [setPendingAnchor, surfaceRef, pendingAnchorElementRef]
   );
   useEffect(() => {
     surfaceClickHandlerRef.current = handleSurfaceClick;
@@ -780,6 +952,19 @@ function CommentOverlay(props) {
     setDraft("");
     setPanelPosition(null);
   }, [commentModeEnabled, setCommentModeEnabled, setHoveredRect, setPendingAnchor]);
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "m") {
+        const target = e.target;
+        const isEditable = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
+        if (isEditable) return;
+        e.preventDefault();
+        handleToggle();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [handleToggle]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -843,7 +1028,36 @@ function CommentOverlay(props) {
                 fontSize: 14,
                 color: "#4b5563"
               },
-              children: "\u2699\uFE0F"
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  strokeWidth: 1.5,
+                  stroke: "currentColor",
+                  style: { width: 18, height: 18 },
+                  "aria-hidden": true,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                      }
+                    )
+                  ]
+                }
+              )
             }
           )
         ]
@@ -892,15 +1106,40 @@ function CommentOverlay(props) {
                 marginBottom: 4
               },
               children: [
-                /* @__PURE__ */ jsx(
-                  "span",
+                /* @__PURE__ */ jsxs(
+                  "div",
                   {
                     style: {
-                      fontSize: 13,
-                      fontWeight: 600,
-                      color: "#111827"
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8
                     },
-                    children: user ? activeThreadId ? "Thread" : "New comment" : "Sign in to comment"
+                    children: [
+                      user && avatarUrl && /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: avatarUrl,
+                          alt: "",
+                          width: 24,
+                          height: 24,
+                          style: {
+                            borderRadius: "50%",
+                            flexShrink: 0
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 13,
+                            fontWeight: 600,
+                            color: "#111827"
+                          },
+                          children: user ? activeThreadId ? "Thread" : "New comment" : "Sign in to comment"
+                        }
+                      )
+                    ]
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
@@ -1007,19 +1246,24 @@ function CommentOverlay(props) {
               "form",
               {
                 onSubmit: async (event) => {
+                  var _a2;
                   event.preventDefault();
                   if (!draft.trim()) return;
                   try {
                     if (activeThreadId) {
-                      await addComment(activeThreadId, draft, displayName);
+                      await addComment(activeThreadId, draft, displayName, avatarUrl != null ? avatarUrl : null);
                     } else if (pendingAnchor) {
+                      const element = (_a2 = pendingAnchorElementRef.current) != null ? _a2 : void 0;
                       const thread = await createThread(
                         pendingAnchor,
                         draft,
-                        displayName || null
+                        displayName || null,
+                        element,
+                        avatarUrl != null ? avatarUrl : null
                       );
                       setActiveThreadId(thread.id);
                       setPendingAnchor(null);
+                      pendingAnchorElementRef.current = null;
                     }
                     setDraft("");
                   } catch (err) {
@@ -1037,6 +1281,7 @@ function CommentOverlay(props) {
                       placeholder: "Add a comment...",
                       style: {
                         width: "100%",
+                        color: "#000000",
                         resize: "none",
                         fontSize: 13,
                         fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
@@ -1103,7 +1348,27 @@ function CommentOverlay(props) {
     )
   ] });
 }
+function Commentator(props) {
+  const {
+    config,
+    position = "right",
+    surfaceStyle,
+    surfaceClassName,
+    children
+  } = props;
+  return /* @__PURE__ */ jsxs(CommentProvider, { config, children: [
+    /* @__PURE__ */ jsx(
+      CommentSurface,
+      {
+        style: { minHeight: "100%", position: "relative", ...surfaceStyle },
+        className: surfaceClassName,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(CommentOverlay, { position })
+  ] });
+}
 
-export { CommentOverlay, CommentProvider, CommentSettings, CommentSurface, useCommentAuth, useComments };
+export { CommentOverlay, CommentProvider, CommentSettings, CommentSurface, Commentator, useCommentAuth, useComments };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map