comment-mode 0.1.0

package/dist/index.js

@@ -0,0 +1,1116 @@
+'use strict';
+
+var react = require('react');
+var supabaseJs = require('@supabase/supabase-js');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/context/CommentsContext.tsx
+
+// src/constants.ts
+var DEFAULT_API_BASE_URL = "https://api.commentmode.dev/api/commentator";
+var AuthContext = react.createContext(void 0);
+function AuthProvider(props) {
+  var _a;
+  const { config, children } = props;
+  const [supabase, setSupabase] = react.useState(null);
+  const [user, setUser] = react.useState(null);
+  const [accessToken, setAccessToken] = react.useState(null);
+  const [isReady, setIsReady] = react.useState(false);
+  const [displayName, setDisplayNameState] = react.useState("");
+  const apiBaseUrl = (_a = config.apiBaseUrl) != null ? _a : DEFAULT_API_BASE_URL;
+  react.useEffect(() => {
+    let cancelled = false;
+    async function init() {
+      try {
+        let getDisplayNameFromUser2 = function(u) {
+          var _a2, _b, _c, _d, _e, _f;
+          const meta = u.user_metadata;
+          const fullName = ((_a2 = meta == null ? void 0 : meta.full_name) == null ? void 0 : _a2.trim()) || ((_b = meta == null ? void 0 : meta.name) == null ? void 0 : _b.trim());
+          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 || "";
+        };
+        var getDisplayNameFromUser = getDisplayNameFromUser2;
+        const response = await fetch(`${apiBaseUrl}/auth/config`);
+        if (!response.ok) {
+          throw new Error(`Failed to load auth config: ${response.status}`);
+        }
+        const data = await response.json();
+        if (cancelled) return;
+        const client = supabaseJs.createClient(data.supabaseUrl, data.supabaseAnonKey, {
+          auth: {
+            persistSession: true
+          }
+        });
+        setSupabase(client);
+        const {
+          data: { session }
+        } = await client.auth.getSession();
+        if (session == null ? void 0 : session.user) {
+          setUser({ id: session.user.id, email: session.user.email });
+          setAccessToken(session.access_token);
+          setDisplayNameState(getDisplayNameFromUser2(session.user));
+        }
+        client.auth.onAuthStateChange((_event, session2) => {
+          if (!session2 || !session2.user) {
+            setUser(null);
+            setAccessToken(null);
+            setDisplayNameState("");
+          } else {
+            setUser({ id: session2.user.id, email: session2.user.email });
+            setAccessToken(session2.access_token);
+            setDisplayNameState(getDisplayNameFromUser2(session2.user));
+          }
+        });
+      } catch (err) {
+        console.error("[commentator] Failed to initialise auth", err);
+      } finally {
+        if (!cancelled) {
+          setIsReady(true);
+        }
+      }
+    }
+    void init();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBaseUrl]);
+  const signInWithEmail = react.useCallback(
+    async (email) => {
+      if (!supabase) return;
+      const trimmed = email.trim();
+      if (!trimmed) return;
+      const redirectTo = typeof window !== "undefined" ? window.location.origin : void 0;
+      await supabase.auth.signInWithOtp({
+        email: trimmed,
+        options: {
+          emailRedirectTo: redirectTo
+        }
+      });
+    },
+    [supabase]
+  );
+  const signInWithGitHub = react.useCallback(async () => {
+    if (!supabase) return;
+    const redirectTo = typeof window !== "undefined" ? window.location.origin : void 0;
+    await supabase.auth.signInWithOAuth({
+      provider: "github",
+      options: { redirectTo }
+    });
+  }, [supabase]);
+  const signOut = react.useCallback(async () => {
+    if (!supabase) return;
+    await supabase.auth.signOut();
+    setUser(null);
+    setAccessToken(null);
+    setDisplayNameState("");
+  }, [supabase]);
+  const value = react.useMemo(
+    () => ({
+      supabase,
+      user,
+      accessToken,
+      isReady,
+      displayName,
+      signInWithEmail,
+      signInWithGitHub,
+      signOut
+    }),
+    [
+      supabase,
+      user,
+      accessToken,
+      isReady,
+      displayName,
+      signInWithEmail,
+      signInWithGitHub,
+      signOut
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
+}
+function useAuthInternal() {
+  const ctx = react.useContext(AuthContext);
+  if (!ctx) {
+    throw new Error("useAuthInternal must be used within an AuthProvider");
+  }
+  return ctx;
+}
+var CommentsContext = react.createContext(void 0);
+function CommentsProvider(props) {
+  var _a;
+  const { config, children } = props;
+  const { accessToken, isReady: isAuthReady } = useAuthInternal();
+  const [threads, setThreads] = react.useState([]);
+  const [commentsByThread, setCommentsByThread] = react.useState({});
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [commentModeEnabled, setCommentModeEnabled] = react.useState(true);
+  const [hoveredRect, setHoveredRect] = react.useState(null);
+  const [pendingAnchor, setPendingAnchor] = react.useState(null);
+  const surfaceRef = react.useRef(null);
+  const surfaceClickHandlerRef = react.useRef(null);
+  const onPinClickRef = react.useRef(null);
+  const apiBaseUrl = (_a = config.apiBaseUrl) != null ? _a : DEFAULT_API_BASE_URL;
+  react.useEffect(() => {
+    let cancelled = false;
+    async function fetchThreads() {
+      var _a2, _b;
+      if (!isAuthReady) return;
+      try {
+        setIsLoading(true);
+        setError(null);
+        const url = new URL(`${apiBaseUrl}/threads`);
+        url.searchParams.set("projectSlug", config.projectSlug);
+        url.searchParams.set("surfaceId", config.surfaceId);
+        const headers = {};
+        if (accessToken) {
+          headers.Authorization = `Bearer ${accessToken}`;
+        }
+        const response = await fetch(url.toString(), { headers });
+        if (!response.ok) {
+          throw new Error(`Failed to load threads: ${response.status}`);
+        }
+        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 : [];
+        setThreads(mapped);
+      } catch (err) {
+        if (cancelled) return;
+        const e = err instanceof Error ? err : new Error("Unknown error");
+        setError(e);
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+    fetchThreads();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBaseUrl, config.projectSlug, config.surfaceId, accessToken, isAuthReady]);
+  const createThread = react.useCallback(
+    async (anchor, initialCommentBody, initialAuthorName) => {
+      const optimisticThread = {
+        id: `${Date.now()}`,
+        anchor,
+        status: "open"
+      };
+      setThreads((prev) => [...prev, optimisticThread]);
+      try {
+        setIsLoading(true);
+        setError(null);
+        const response = await fetch(`${apiBaseUrl}/threads`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...accessToken ? { Authorization: `Bearer ${accessToken}` } : {}
+          },
+          body: JSON.stringify({
+            projectSlug: config.projectSlug,
+            surfaceId: config.surfaceId,
+            anchorX: anchor.x,
+            anchorY: anchor.y,
+            initialCommentBody: initialCommentBody != null ? initialCommentBody : null,
+            initialAuthorName: initialAuthorName != null ? initialAuthorName : null
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to create thread: ${response.status}`);
+        }
+        const data = await response.json();
+        const persistedThread = {
+          ...optimisticThread,
+          id: data.id
+        };
+        setThreads(
+          (prev) => prev.map((t) => t === optimisticThread ? persistedThread : t)
+        );
+        return persistedThread;
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error("Unknown error");
+        setError(e);
+        setThreads((prev) => prev.filter((t) => t !== optimisticThread));
+        throw e;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [apiBaseUrl, config.projectSlug, config.surfaceId, accessToken]
+  );
+  const loadComments = react.useCallback(
+    async (threadId) => {
+      var _a2, _b;
+      try {
+        setError(null);
+        const url = new URL(`${apiBaseUrl}/comments`);
+        url.searchParams.set("threadId", threadId);
+        const headers = {};
+        if (accessToken) {
+          headers.Authorization = `Bearer ${accessToken}`;
+        }
+        const response = await fetch(url.toString(), { headers });
+        if (!response.ok) {
+          throw new Error(`Failed to load comments: ${response.status}`);
+        }
+        const data = await response.json();
+        const mapped = (_b = (_a2 = data.comments) == null ? void 0 : _a2.map((c) => {
+          var _a3;
+          return {
+            id: c.id,
+            threadId: c.threadId,
+            body: c.body,
+            createdAt: c.createdAt,
+            authorName: (_a3 = c.authorName) != null ? _a3 : null
+          };
+        })) != null ? _b : [];
+        setCommentsByThread((prev) => ({
+          ...prev,
+          [threadId]: mapped
+        }));
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error("Unknown error");
+        setError(e);
+        throw e;
+      }
+    },
+    [apiBaseUrl, accessToken]
+  );
+  const addComment = react.useCallback(
+    async (threadId, body, authorName) => {
+      const trimmed = body.trim();
+      if (!trimmed) {
+        throw new Error("Comment body is empty");
+      }
+      const optimistic = {
+        id: `${Date.now()}`,
+        threadId,
+        body: trimmed,
+        authorName: authorName != null ? authorName : null
+      };
+      setCommentsByThread((prev) => {
+        var _a2;
+        return {
+          ...prev,
+          [threadId]: [...(_a2 = prev[threadId]) != null ? _a2 : [], optimistic]
+        };
+      });
+      try {
+        const response = await fetch(`${apiBaseUrl}/comments`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...accessToken ? { Authorization: `Bearer ${accessToken}` } : {}
+          },
+          body: JSON.stringify({ threadId, body: trimmed, authorName })
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to create comment: ${response.status}`);
+        }
+        const data = await response.json();
+        const persisted = {
+          id: data.id,
+          threadId,
+          body: trimmed,
+          createdAt: data.createdAt
+        };
+        setCommentsByThread((prev) => {
+          var _a2;
+          return {
+            ...prev,
+            [threadId]: ((_a2 = prev[threadId]) != null ? _a2 : []).map(
+              (c) => c === optimistic ? persisted : c
+            )
+          };
+        });
+        return persisted;
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error("Unknown error");
+        setError(e);
+        setCommentsByThread((prev) => {
+          var _a2;
+          return {
+            ...prev,
+            [threadId]: ((_a2 = prev[threadId]) != null ? _a2 : []).filter((c) => c !== optimistic)
+          };
+        });
+        throw e;
+      }
+    },
+    [apiBaseUrl, accessToken]
+  );
+  const deleteThread = react.useCallback(
+    async (threadId) => {
+      const headers = {
+        ...accessToken ? { Authorization: `Bearer ${accessToken}` } : {}
+      };
+      const response = await fetch(`${apiBaseUrl}/threads/${threadId}`, {
+        method: "DELETE",
+        headers
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to delete thread: ${response.status}`);
+      }
+      setThreads((prev) => prev.filter((t) => t.id !== threadId));
+      setCommentsByThread((prev) => {
+        const next = { ...prev };
+        delete next[threadId];
+        return next;
+      });
+    },
+    [apiBaseUrl, accessToken]
+  );
+  const value = react.useMemo(
+    () => ({
+      config,
+      threads,
+      commentsByThread,
+      isLoading,
+      error,
+      createThread,
+      loadComments,
+      addComment,
+      deleteThread,
+      commentModeEnabled,
+      setCommentModeEnabled,
+      surfaceRef,
+      hoveredRect,
+      setHoveredRect,
+      surfaceClickHandlerRef,
+      pendingAnchor,
+      setPendingAnchor,
+      onPinClickRef
+    }),
+    [
+      config,
+      threads,
+      commentsByThread,
+      isLoading,
+      error,
+      createThread,
+      loadComments,
+      addComment,
+      deleteThread,
+      commentModeEnabled,
+      hoveredRect,
+      pendingAnchor
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CommentsContext.Provider, { value, children });
+}
+function useCommentsInternal() {
+  const ctx = react.useContext(CommentsContext);
+  if (!ctx) {
+    throw new Error("useCommentsInternal must be used within a CommentsProvider");
+  }
+  return ctx;
+}
+function CommentProvider(props) {
+  const { config, children } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(CommentsProvider, { config, children }) });
+}
+
+// src/hooks.ts
+function useComments() {
+  const ctx = useCommentsInternal();
+  return {
+    config: ctx.config,
+    threads: ctx.threads,
+    commentsByThread: ctx.commentsByThread,
+    isLoading: ctx.isLoading,
+    error: ctx.error,
+    createThread: ctx.createThread,
+    loadComments: ctx.loadComments,
+    addComment: ctx.addComment,
+    deleteThread: ctx.deleteThread
+  };
+}
+var PIN_STYLE = {
+  position: "absolute",
+  transform: "translate(-50%, -50%)",
+  width: 18,
+  height: 18,
+  borderRadius: "999px",
+  background: "#f97316",
+  border: "2px solid #fff",
+  boxShadow: "0 4px 10px rgba(0,0,0,0.25)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#fff",
+  fontSize: 10,
+  fontWeight: 600,
+  cursor: "pointer"
+};
+function CommentSurface(props) {
+  const {
+    commentModeEnabled,
+    setHoveredRect,
+    surfaceRef,
+    surfaceClickHandlerRef,
+    pendingAnchor,
+    onPinClickRef
+  } = useCommentsInternal();
+  const { threads } = useComments();
+  const handleMouseMove = react.useCallback(
+    (e) => {
+      if (!commentModeEnabled) return;
+      const el = e.target;
+      const rect = el.getBoundingClientRect();
+      setHoveredRect({
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height
+      });
+    },
+    [commentModeEnabled, setHoveredRect]
+  );
+  const handleMouseLeave = react.useCallback(() => {
+    setHoveredRect(null);
+  }, [setHoveredRect]);
+  const handleClick = react.useCallback(
+    (e) => {
+      var _a, _b;
+      if (!commentModeEnabled) return;
+      const target = e.target;
+      if ((_a = target.closest) == null ? void 0 : _a.call(target, "[data-commentator-pin]")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      (_b = surfaceClickHandlerRef.current) == null ? void 0 : _b.call(surfaceClickHandlerRef, e);
+    },
+    [commentModeEnabled, surfaceClickHandlerRef]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: surfaceRef,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onClickCapture: handleClick,
+      style: { ...props.style, minHeight: "100%", position: "relative" },
+      className: props.className,
+      children: [
+        props.children,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              zIndex: 1
+            },
+            children: [
+              threads.map((thread) => /* @__PURE__ */ jsxRuntime.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();
+                      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"
+                  },
+                  children: "\u25CF"
+                },
+                thread.id
+              )),
+              pendingAnchor && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  "data-commentator-pin": true,
+                  style: {
+                    ...PIN_STYLE,
+                    left: `${pendingAnchor.x * 100}%`,
+                    top: `${pendingAnchor.y * 100}%`,
+                    cursor: "default",
+                    opacity: 0.7,
+                    pointerEvents: "auto"
+                  },
+                  children: "\u25CF"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/auth.ts
+function useCommentAuth() {
+  return useAuthInternal();
+}
+function CommentSettings() {
+  const {
+    user,
+    displayName,
+    signOut,
+    isReady: isAuthReady,
+    signInWithGitHub
+  } = useCommentAuth();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: 16,
+        padding: 16,
+        backgroundColor: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        display: "flex",
+        flexDirection: "column",
+        gap: 8
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 4
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: "#111827"
+                  },
+                  children: "Commentator settings"
+                }
+              ),
+              user && /* @__PURE__ */ jsxRuntime.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"
+                }
+              )
+            ]
+          }
+        ),
+        user ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              fontSize: 12,
+              color: "#6b7280"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Signed in as ",
+              displayName || user.email || "unknown user"
+            ] })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.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"
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+var PANEL_WIDTH = 280;
+var PANEL_HEIGHT = 260;
+var PANEL_MARGIN = 16;
+function computePanelPosition(clientX, clientY) {
+  if (typeof window === "undefined") {
+    return { top: 72, left: void 0 };
+  }
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let left = clientX + 24;
+  let top = clientY - PANEL_HEIGHT / 2;
+  if (left + PANEL_WIDTH + PANEL_MARGIN > vw) {
+    left = clientX - PANEL_WIDTH - 24;
+  }
+  left = Math.min(
+    Math.max(PANEL_MARGIN, left),
+    vw - PANEL_WIDTH - PANEL_MARGIN
+  );
+  top = Math.min(
+    Math.max(PANEL_MARGIN, top),
+    vh - PANEL_HEIGHT - PANEL_MARGIN
+  );
+  return { top, left };
+}
+function CommentOverlay(props) {
+  var _a;
+  const { position = "right" } = props;
+  const {
+    threads,
+    commentsByThread,
+    createThread,
+    loadComments,
+    addComment,
+    deleteThread
+  } = useComments();
+  const {
+    commentModeEnabled,
+    setCommentModeEnabled,
+    surfaceRef,
+    hoveredRect,
+    setHoveredRect,
+    surfaceClickHandlerRef,
+    pendingAnchor,
+    setPendingAnchor,
+    onPinClickRef
+  } = useCommentsInternal();
+  const {
+    user,
+    isReady: isAuthReady,
+    signInWithGitHub,
+    displayName
+  } = useCommentAuth();
+  const [activeThreadId, setActiveThreadId] = react.useState(null);
+  const [draft, setDraft] = react.useState("");
+  const [panelPosition, setPanelPosition] = react.useState(null);
+  const [showSettings, setShowSettings] = react.useState(false);
+  const activeComments = react.useMemo(
+    () => {
+      var _a2;
+      return activeThreadId ? (_a2 = commentsByThread[activeThreadId]) != null ? _a2 : [] : [];
+    },
+    [activeThreadId, commentsByThread]
+  );
+  react.useEffect(() => {
+    var _a2;
+    if (!activeThreadId || pendingAnchor) return;
+    if ((_a2 = commentsByThread[activeThreadId]) == null ? void 0 : _a2.length) return;
+    void loadComments(activeThreadId);
+  }, [activeThreadId, pendingAnchor, commentsByThread, loadComments]);
+  const handleSurfaceClick = react.useCallback(
+    (event) => {
+      var _a2;
+      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 });
+      setActiveThreadId(null);
+      setDraft("");
+      setPanelPosition(computePanelPosition(event.clientX, event.clientY));
+    },
+    [setPendingAnchor, surfaceRef]
+  );
+  react.useEffect(() => {
+    surfaceClickHandlerRef.current = handleSurfaceClick;
+    return () => {
+      surfaceClickHandlerRef.current = null;
+    };
+  }, [surfaceClickHandlerRef, handleSurfaceClick]);
+  react.useEffect(() => {
+    onPinClickRef.current = (threadId, clientX, clientY) => {
+      setShowSettings(false);
+      setActiveThreadId(threadId);
+      setPendingAnchor(null);
+      setPanelPosition(computePanelPosition(clientX, clientY));
+    };
+    return () => {
+      onPinClickRef.current = null;
+    };
+  }, [onPinClickRef]);
+  const handleToggle = react.useCallback(() => {
+    const next = !commentModeEnabled;
+    if (!next) setHoveredRect(null);
+    setCommentModeEnabled(next);
+    setActiveThreadId(null);
+    setPendingAnchor(null);
+    setDraft("");
+    setPanelPosition(null);
+  }, [commentModeEnabled, setCommentModeEnabled, setHoveredRect, setPendingAnchor]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 16,
+          [position]: 16,
+          zIndex: 2147483e3,
+          display: "flex",
+          alignItems: "center",
+          gap: 6
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleToggle,
+              "aria-pressed": commentModeEnabled,
+              style: {
+                padding: "8px 12px",
+                borderRadius: 999,
+                border: "1px solid rgba(0,0,0,0.12)",
+                background: commentModeEnabled ? "#111827" : "#f9fafb",
+                color: commentModeEnabled ? "#f9fafb" : "#111827",
+                fontSize: 12,
+                fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                cursor: "pointer"
+              },
+              children: commentModeEnabled ? "Comment mode: on" : "Comment mode: off"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowSettings((prev) => {
+                const next = !prev;
+                if (next) {
+                  setActiveThreadId(null);
+                  setPendingAnchor(null);
+                  setDraft("");
+                  setPanelPosition(null);
+                }
+                return next;
+              }),
+              "aria-label": "Commentator settings",
+              style: {
+                width: 28,
+                height: 28,
+                borderRadius: 999,
+                border: "1px solid rgba(0,0,0,0.12)",
+                background: "#ffffff",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.12)",
+                cursor: "pointer",
+                fontSize: 14,
+                color: "#4b5563"
+              },
+              children: "\u2699\uFE0F"
+            }
+          )
+        ]
+      }
+    ),
+    showSettings && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 54,
+          [position]: 16,
+          zIndex: 2147483e3,
+          maxWidth: 280
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(CommentSettings, {})
+      }
+    ),
+    !showSettings && (activeThreadId || pendingAnchor) && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: (_a = panelPosition == null ? void 0 : panelPosition.top) != null ? _a : 72,
+          left: panelPosition == null ? void 0 : panelPosition.left,
+          width: PANEL_WIDTH,
+          maxHeight: "70vh",
+          padding: 16,
+          borderRadius: 16,
+          backgroundColor: "#ffffff",
+          boxShadow: "0 18px 45px rgba(15,23,42,0.25)",
+          border: "1px solid rgba(148,163,184,0.35)",
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          zIndex: 2147483500
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: 4
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 13,
+                      fontWeight: 600,
+                      color: "#111827"
+                    },
+                    children: user ? activeThreadId ? "Thread" : "New comment" : "Sign in to comment"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  activeThreadId && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: async () => {
+                        try {
+                          await deleteThread(activeThreadId);
+                          setActiveThreadId(null);
+                          setPendingAnchor(null);
+                          setDraft("");
+                          setPanelPosition(null);
+                        } catch (err) {
+                          console.error("[commentator] Failed to delete thread", err);
+                        }
+                      },
+                      style: {
+                        border: "none",
+                        background: "transparent",
+                        color: "#b91c1c",
+                        fontSize: 12,
+                        cursor: "pointer"
+                      },
+                      children: "Delete thread"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setActiveThreadId(null);
+                        setPendingAnchor(null);
+                        setDraft("");
+                        setPanelPosition(null);
+                      },
+                      style: {
+                        border: "none",
+                        background: "transparent",
+                        color: "#6b7280",
+                        fontSize: 12,
+                        cursor: "pointer"
+                      },
+                      children: "Close"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          user ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  overflowY: "auto",
+                  paddingRight: 4
+                },
+                children: activeComments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    style: {
+                      fontSize: 13,
+                      color: "#9ca3af",
+                      margin: 0
+                    },
+                    children: "No comments yet. Be the first to comment."
+                  }
+                ) : activeComments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 13,
+                      color: "#111827",
+                      padding: "6px 8px",
+                      borderRadius: 10,
+                      backgroundColor: "#f9fafb",
+                      border: "1px solid #e5e7eb",
+                      marginBottom: 6
+                    },
+                    children: [
+                      comment.authorName && /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 11,
+                            color: "#6b7280",
+                            marginBottom: 2
+                          },
+                          children: comment.authorName
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { children: comment.body })
+                    ]
+                  },
+                  comment.id
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "form",
+              {
+                onSubmit: async (event) => {
+                  event.preventDefault();
+                  if (!draft.trim()) return;
+                  try {
+                    if (activeThreadId) {
+                      await addComment(activeThreadId, draft, displayName);
+                    } else if (pendingAnchor) {
+                      const thread = await createThread(
+                        pendingAnchor,
+                        draft,
+                        displayName || null
+                      );
+                      setActiveThreadId(thread.id);
+                      setPendingAnchor(null);
+                    }
+                    setDraft("");
+                  } catch (err) {
+                    console.error("[commentator] Failed to save comment", err);
+                  }
+                },
+                style: { marginTop: 4 },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "textarea",
+                    {
+                      value: draft,
+                      onChange: (event) => setDraft(event.target.value),
+                      rows: 3,
+                      placeholder: "Add a comment...",
+                      style: {
+                        width: "100%",
+                        resize: "none",
+                        fontSize: 13,
+                        fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+                        padding: "6px 8px",
+                        borderRadius: 10,
+                        border: "1px solid #d1d5db",
+                        boxSizing: "border-box",
+                        marginBottom: 6
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "submit",
+                      disabled: !draft.trim(),
+                      style: {
+                        width: "100%",
+                        padding: "6px 10px",
+                        borderRadius: 999,
+                        border: "none",
+                        backgroundColor: draft.trim() ? "#111827" : "#e5e7eb",
+                        color: draft.trim() ? "#f9fafb" : "#9ca3af",
+                        fontSize: 13,
+                        fontWeight: 500,
+                        cursor: draft.trim() ? "pointer" : "default"
+                      },
+                      children: "Post comment"
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.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"
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.CommentOverlay = CommentOverlay;
+exports.CommentProvider = CommentProvider;
+exports.CommentSettings = CommentSettings;
+exports.CommentSurface = CommentSurface;
+exports.useCommentAuth = useCommentAuth;
+exports.useComments = useComments;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map