apostil 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -0,0 +1,1467 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ApostilProvider: () => ApostilProvider,
+  CommentOverlay: () => CommentOverlay,
+  CommentSidebar: () => CommentSidebar,
+  CommentToggle: () => CommentToggle,
+  debug: () => debug,
+  useApostil: () => useApostil,
+  useCommentMode: () => useCommentMode,
+  useComments: () => useComments
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/context.tsx
+var import_react = require("react");
+
+// src/adapters/rest.ts
+function createRestAdapter(baseUrl) {
+  return {
+    async load(pageId) {
+      const url = `${baseUrl}?pageId=${encodeURIComponent(pageId)}`;
+      try {
+        const res = await fetch(url);
+        if (!res.ok) {
+          console.warn(`[apostil] load failed: ${res.status} ${res.statusText} \u2014 ${url}`);
+          return [];
+        }
+        const data = await res.json();
+        return data;
+      } catch (e) {
+        console.warn(`[apostil] load error:`, e, `\u2014 ${url}`);
+        return [];
+      }
+    },
+    async save(pageId, threads) {
+      const url = `${baseUrl}?pageId=${encodeURIComponent(pageId)}`;
+      try {
+        const res = await fetch(url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(threads)
+        });
+        if (!res.ok) {
+          console.warn(`[apostil] save failed: ${res.status} ${res.statusText} \u2014 ${url}`);
+        }
+      } catch (e) {
+        console.warn(`[apostil] save error:`, e, `\u2014 ${url}`);
+      }
+    }
+  };
+}
+
+// src/utils.ts
+var counter = 0;
+function generateId() {
+  return `${Date.now()}-${++counter}-${Math.random().toString(36).slice(2, 7)}`;
+}
+var USER_KEY = "apostil-user";
+function loadUser() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(USER_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function saveUser(user) {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(USER_KEY, JSON.stringify(user));
+}
+var USER_COLORS = [
+  "#df461c",
+  "#2563eb",
+  "#16a34a",
+  "#9333ea",
+  "#ea580c",
+  "#0891b2",
+  "#c026d3",
+  "#4f46e5",
+  "#059669",
+  "#dc2626"
+];
+function getRandomColor() {
+  return USER_COLORS[Math.floor(Math.random() * USER_COLORS.length)];
+}
+
+// src/debug.ts
+var PREFIX = "[apostil]";
+function isDebug() {
+  if (typeof window === "undefined") return false;
+  try {
+    return localStorage.getItem("apostil-debug") === "true";
+  } catch {
+    return false;
+  }
+}
+var debug = {
+  log(...args) {
+    if (isDebug()) console.log(PREFIX, ...args);
+  },
+  warn(...args) {
+    if (isDebug()) console.warn(PREFIX, ...args);
+  },
+  error(...args) {
+    console.error(PREFIX, ...args);
+  },
+  /** Enable/disable debug logging */
+  enable() {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("apostil-debug", "true");
+      console.log(PREFIX, "debug logging enabled \u2014 reload to take effect");
+    }
+  },
+  disable() {
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("apostil-debug");
+      console.log(PREFIX, "debug logging disabled");
+    }
+  }
+};
+if (typeof window !== "undefined") {
+  window.__apostil_debug = debug;
+}
+
+// src/context.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultAdapter = createRestAdapter("/api/apostil");
+var ApostilContext = (0, import_react.createContext)(null);
+function ApostilProvider({
+  pageId,
+  storage,
+  children
+}) {
+  const adapter = storage ?? defaultAdapter;
+  const [threads, setThreads] = (0, import_react.useState)([]);
+  const [user, setUserState] = (0, import_react.useState)(null);
+  const [commentMode, setCommentMode] = (0, import_react.useState)(false);
+  const [activeThreadId, setActiveThreadId] = (0, import_react.useState)(null);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react.useState)(false);
+  const [loaded, setLoaded] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const saved = loadUser();
+    if (saved) setUserState(saved);
+  }, []);
+  const pageIdRef = (0, import_react.useRef)(pageId);
+  (0, import_react.useEffect)(() => {
+    pageIdRef.current = pageId;
+    setLoaded(false);
+    debug.log("loading threads for pageId:", pageId);
+    adapter.load(pageId).then((t) => {
+      if (pageIdRef.current === pageId) {
+        debug.log("loaded", t.length, "threads for", pageId);
+        setThreads(t);
+        setLoaded(true);
+      }
+    });
+  }, [pageId]);
+  (0, import_react.useEffect)(() => {
+    if (loaded && pageIdRef.current === pageId && threads.length > 0) {
+      debug.log("saving", threads.length, "threads for pageId:", pageId);
+      adapter.save(pageId, threads);
+    }
+  }, [threads, pageId, loaded]);
+  const setUser = (0, import_react.useCallback)((name) => {
+    const u = { id: generateId(), name, color: getRandomColor() };
+    setUserState(u);
+    saveUser(u);
+  }, []);
+  const addThread = (0, import_react.useCallback)(
+    (pinX, pinY, body, targetId, targetLabel) => {
+      if (!user) return;
+      const threadId = generateId();
+      const thread = {
+        id: threadId,
+        pageId,
+        pinX,
+        pinY,
+        targetId,
+        targetLabel,
+        resolved: false,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        comments: [{
+          id: generateId(),
+          threadId,
+          author: user,
+          body,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        }]
+      };
+      debug.log("new thread:", { threadId, pinX, pinY, targetId, targetLabel, body });
+      setThreads((prev) => [...prev, thread]);
+      setActiveThreadId(threadId);
+      setCommentMode(false);
+    },
+    [user, pageId]
+  );
+  const addReply = (0, import_react.useCallback)(
+    (threadId, body) => {
+      if (!user) return;
+      setThreads(
+        (prev) => prev.map(
+          (t) => t.id === threadId ? { ...t, comments: [...t.comments, { id: generateId(), threadId, author: user, body, createdAt: (/* @__PURE__ */ new Date()).toISOString() }] } : t
+        )
+      );
+    },
+    [user]
+  );
+  const resolveThread = (0, import_react.useCallback)((threadId) => {
+    setThreads((prev) => prev.map((t) => t.id === threadId ? { ...t, resolved: !t.resolved } : t));
+    setActiveThreadId(null);
+  }, []);
+  const deleteThread = (0, import_react.useCallback)((threadId) => {
+    setThreads((prev) => prev.filter((t) => t.id !== threadId));
+    setActiveThreadId(null);
+  }, []);
+  const unresolvedCount = threads.filter((t) => !t.resolved).length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApostilContext.Provider, { value: {
+    threads,
+    user,
+    commentMode,
+    activeThreadId,
+    sidebarOpen,
+    setCommentMode,
+    setActiveThreadId,
+    setSidebarOpen,
+    addThread,
+    addReply,
+    resolveThread,
+    deleteThread,
+    setUser,
+    unresolvedCount
+  }, children });
+}
+function useApostil() {
+  const ctx = (0, import_react.useContext)(ApostilContext);
+  if (!ctx) throw new Error("useApostil must be used within ApostilProvider");
+  return ctx;
+}
+
+// src/hooks/use-comments.ts
+function useComments() {
+  const { threads, addThread, addReply, resolveThread, deleteThread, unresolvedCount } = useApostil();
+  return {
+    threads,
+    openThreads: threads.filter((t) => !t.resolved),
+    resolvedThreads: threads.filter((t) => t.resolved),
+    addThread,
+    addReply,
+    resolveThread,
+    deleteThread,
+    unresolvedCount
+  };
+}
+
+// src/hooks/use-comment-mode.ts
+function useCommentMode() {
+  const { commentMode, setCommentMode, sidebarOpen, setSidebarOpen } = useApostil();
+  return {
+    commentMode,
+    setCommentMode,
+    toggleCommentMode: () => setCommentMode(!commentMode),
+    sidebarOpen,
+    setSidebarOpen,
+    toggleSidebar: () => setSidebarOpen(!sidebarOpen)
+  };
+}
+
+// src/components/comment-overlay.tsx
+var import_react6 = require("react");
+
+// src/components/comment-pin.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function findTargetElement(targetId) {
+  try {
+    const el = document.querySelector(targetId);
+    if (el instanceof HTMLElement) return el;
+  } catch {
+  }
+  try {
+    const el = document.querySelector(`[data-comment-target="${CSS.escape(targetId)}"]`);
+    if (el instanceof HTMLElement) return el;
+  } catch {
+  }
+  return null;
+}
+function resolveOverlayPosition(thread, overlayEl) {
+  if (!overlayEl) return null;
+  const overlayRect = overlayEl.getBoundingClientRect();
+  return {
+    left: thread.pinX / 100 * overlayRect.width,
+    top: thread.pinY / 100 * overlayRect.height
+  };
+}
+function resolvePosition(thread, overlayEl) {
+  if (!overlayEl) return null;
+  const overlayRect = overlayEl.getBoundingClientRect();
+  if (thread.targetId) {
+    const target = findTargetElement(thread.targetId);
+    if (target) {
+      const targetRect = target.getBoundingClientRect();
+      return {
+        left: targetRect.left - overlayRect.left + thread.pinX / 100 * targetRect.width,
+        top: targetRect.top - overlayRect.top + thread.pinY / 100 * targetRect.height
+      };
+    }
+    return null;
+  }
+  return {
+    left: thread.pinX / 100 * overlayRect.width,
+    top: thread.pinY / 100 * overlayRect.height
+  };
+}
+function PinButton({
+  thread,
+  index,
+  isActive,
+  onClick
+}) {
+  const authorColor = thread.comments[0]?.author.color ?? "#df461c";
+  const [hovered, setHovered] = (0, import_react2.useState)(false);
+  const buttonRef = (0, import_react2.useRef)(null);
+  const [tooltipPos, setTooltipPos] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!hovered || !buttonRef.current) {
+      setTooltipPos(null);
+      return;
+    }
+    const rect = buttonRef.current.getBoundingClientRect();
+    setTooltipPos({
+      left: rect.left + rect.width / 2,
+      top: rect.bottom + 4
+    });
+  }, [hovered]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        ref: buttonRef,
+        onClick,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: { position: "relative" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: `
+            flex items-center justify-center
+            w-7 h-7 rounded-full text-white text-xs font-semibold
+            shadow-lg cursor-pointer
+            transition-all duration-200
+            ${isActive ? "scale-125 ring-2 ring-white ring-offset-2" : "hover:scale-110"}
+            ${thread.resolved ? "opacity-40" : ""}
+          `,
+              style: { backgroundColor: authorColor },
+              children: index + 1
+            }
+          ),
+          !thread.resolved && !isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: "absolute inset-0 rounded-full animate-ping opacity-20",
+              style: { backgroundColor: authorColor }
+            }
+          )
+        ]
+      }
+    ),
+    thread.targetLabel && hovered && tooltipPos && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: "fixed whitespace-nowrap text-[10px] bg-neutral-800 text-white px-1.5 py-0.5 rounded pointer-events-none",
+          style: {
+            left: tooltipPos.left,
+            top: tooltipPos.top,
+            transform: "translateX(-50%)",
+            zIndex: 999999
+          },
+          children: thread.targetLabel
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function TargetedPin({
+  thread,
+  index
+}) {
+  const { activeThreadId, setActiveThreadId } = useApostil();
+  const isActive = activeThreadId === thread.id;
+  const [targetEl, setTargetEl] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!thread.targetId) return;
+    function tryFind() {
+      const el = findTargetElement(thread.targetId);
+      if (el) {
+        const pos = getComputedStyle(el).position;
+        if (pos === "static") el.style.position = "relative";
+        setTargetEl(el);
+      } else {
+        setTargetEl(null);
+      }
+    }
+    tryFind();
+    const observer = new MutationObserver(() => tryFind());
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [thread.targetId]);
+  if (!targetEl) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "absolute pointer-events-auto",
+        style: {
+          left: `${thread.pinX}%`,
+          top: `${thread.pinY}%`,
+          transform: "translate(-50%, -50%)",
+          zIndex: 10
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          PinButton,
+          {
+            thread,
+            index,
+            isActive,
+            onClick: (e) => {
+              e.stopPropagation();
+              setActiveThreadId(isActive ? null : thread.id);
+            }
+          }
+        )
+      }
+    ),
+    targetEl
+  );
+}
+function OverlayPin({
+  thread,
+  index,
+  overlayRef
+}) {
+  const { activeThreadId, setActiveThreadId } = useApostil();
+  const isActive = activeThreadId === thread.id;
+  const [pos, setPos] = (0, import_react2.useState)(null);
+  const updatePos = (0, import_react2.useCallback)(() => {
+    setPos(resolveOverlayPosition(thread, overlayRef.current));
+  }, [thread, overlayRef]);
+  (0, import_react2.useEffect)(() => {
+    updatePos();
+    window.addEventListener("resize", updatePos);
+    return () => window.removeEventListener("resize", updatePos);
+  }, [updatePos]);
+  if (!pos) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "absolute pointer-events-auto",
+      style: {
+        left: pos.left,
+        top: pos.top,
+        transform: "translate(-50%, -50%)",
+        zIndex: 60
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        PinButton,
+        {
+          thread,
+          index,
+          isActive,
+          onClick: (e) => {
+            e.stopPropagation();
+            setActiveThreadId(isActive ? null : thread.id);
+          }
+        }
+      )
+    }
+  );
+}
+function CommentPin({
+  thread,
+  index,
+  overlayRef
+}) {
+  if (thread.targetId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TargetedPin, { thread, index }, `targeted-${thread.id}`);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OverlayPin, { thread, index, overlayRef }, `overlay-${thread.id}`);
+}
+
+// src/components/comment-thread.tsx
+var import_react4 = require("react");
+
+// src/icons.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Send({ className = "w-4 h-4" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m22 2-7 20-4-9-9-4Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 2 11 13" })
+  ] });
+}
+function MessageSquare({ className = "w-4 h-4" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+}
+function List({ className = "w-4 h-4" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "8", x2: "21", y1: "6", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "8", x2: "21", y1: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "8", x2: "21", y1: "18", y2: "18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "3", x2: "3.01", y1: "6", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "3", x2: "3.01", y1: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "3", x2: "3.01", y1: "18", y2: "18" })
+  ] });
+}
+function X({ className = "w-4 h-4" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 6 12 12" })
+  ] });
+}
+function Check({ className = "w-4 h-4" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function Undo2({ className = "w-4 h-4" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })
+  ] });
+}
+function Globe({ className = "w-4 h-4" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 12h20" })
+  ] });
+}
+function FileText({ className = "w-4 h-4" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 17H8" })
+  ] });
+}
+function Trash2({ className = "w-4 h-4" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+  ] });
+}
+
+// src/components/comment-composer.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CommentComposer({
+  onSubmit,
+  placeholder = "Add a comment...",
+  autoFocus = false
+}) {
+  const [value, setValue] = (0, import_react3.useState)("");
+  const inputRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (autoFocus) {
+      inputRef.current?.focus();
+    }
+  }, [autoFocus]);
+  const handleSubmit = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onSubmit(trimmed);
+    setValue("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2 items-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "textarea",
+      {
+        ref: inputRef,
+        value,
+        onChange: (e) => setValue(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+          }
+        },
+        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]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        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",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Send, { className: "w-3.5 h-3.5" })
+      }
+    )
+  ] });
+}
+
+// src/components/comment-thread.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function timeAgo(iso) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+function ApostilThreadPopover({
+  thread,
+  overlayRef
+}) {
+  const { activeThreadId, setActiveThreadId, addReply, resolveThread, deleteThread, user } = useApostil();
+  const ref = (0, import_react4.useRef)(null);
+  const isOpen = activeThreadId === thread.id;
+  const [pos, setPos] = (0, import_react4.useState)(null);
+  const updatePos = (0, import_react4.useCallback)(() => {
+    setPos(resolvePosition(thread, overlayRef.current));
+  }, [thread, overlayRef]);
+  (0, import_react4.useEffect)(() => {
+    if (!isOpen) return;
+    updatePos();
+    window.addEventListener("resize", updatePos);
+    document.addEventListener("scroll", updatePos, true);
+    return () => {
+      window.removeEventListener("resize", updatePos);
+      document.removeEventListener("scroll", updatePos, true);
+    };
+  }, [isOpen, updatePos]);
+  (0, import_react4.useEffect)(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setActiveThreadId(null);
+      }
+    };
+    const timer = setTimeout(() => document.addEventListener("mousedown", handler), 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mousedown", handler);
+    };
+  }, [isOpen, setActiveThreadId]);
+  if (!isOpen || !pos) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      ref,
+      className: "absolute z-[70] ml-5 -mt-3",
+      style: { left: pos.left, top: pos.top },
+      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: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs font-medium text-neutral-500", children: [
+              thread.comments.length,
+              " ",
+              thread.comments.length === 1 ? "comment" : "comments"
+            ] }),
+            thread.targetLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium", children: thread.targetLabel }),
+            thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] text-emerald-600 font-medium", children: "Resolved" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: () => resolveThread(thread.id),
+                className: "p-1 rounded hover:bg-neutral-200 transition-colors",
+                title: thread.resolved ? "Reopen" : "Resolve",
+                children: thread.resolved ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Undo2, { className: "w-3.5 h-3.5 text-neutral-500" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Check, { className: "w-3.5 h-3.5 text-emerald-600" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: () => deleteThread(thread.id),
+                className: "p-1 rounded hover:bg-red-50 transition-colors",
+                title: "Delete thread",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Trash2, { className: "w-3.5 h-3.5 text-neutral-400 hover:text-red-500" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-h-64 overflow-y-auto", children: thread.comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "px-4 py-3 border-b border-neutral-50 last:border-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 mb-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                className: "w-5 h-5 rounded-full flex items-center justify-center text-white text-[10px] font-semibold shrink-0",
+                style: { backgroundColor: comment.author.color },
+                children: comment.author.name[0]?.toUpperCase()
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs font-medium text-neutral-800", children: comment.author.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] text-neutral-400 ml-auto", children: timeAgo(comment.createdAt) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-neutral-700 leading-relaxed pl-7", children: comment.body })
+        ] }, comment.id)) }),
+        user && !thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-3 py-2.5 border-t border-neutral-100 bg-neutral-50/50", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          CommentComposer,
+          {
+            onSubmit: (body) => addReply(thread.id, body),
+            placeholder: "Reply...",
+            autoFocus: true
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/components/user-prompt.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function UserPrompt() {
+  const { user, setUser, commentMode } = useApostil();
+  const [name, setName] = (0, import_react5.useState)("");
+  if (user || !commentMode) return null;
+  const handleSubmit = () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    setUser(trimmed);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[2px]",
+      style: { zIndex: 99999 },
+      onMouseDown: (e) => e.stopPropagation(),
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "bg-white rounded-xl shadow-2xl border border-neutral-200 p-6 w-80", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-sm font-semibold text-neutral-900 mb-1", children: "What's your name?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-neutral-500 mb-4", children: "This will be shown with your comments." }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleSubmit();
+            },
+            placeholder: "Enter your name",
+            autoFocus: true,
+            className: "w-full rounded-lg border border-neutral-200 px-3 py-2 text-sm\n                     placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-300 mb-3"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            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",
+            children: "Continue"
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/comment-overlay.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var cachedHighZ = 0;
+var cacheTimestamp = 0;
+function getHighestZIndex() {
+  const now = Date.now();
+  if (now - cacheTimestamp < 500) return cachedHighZ;
+  let max = 0;
+  const els = document.querySelectorAll("[style*='z-index'], [class*='z-']");
+  for (let i = 0; i < els.length; i++) {
+    const z = parseInt(getComputedStyle(els[i]).zIndex, 10);
+    if (!isNaN(z) && z > max) max = z;
+  }
+  cachedHighZ = Math.max(max, 100);
+  cacheTimestamp = now;
+  return cachedHighZ;
+}
+var SEMANTIC_TAGS = /* @__PURE__ */ new Set([
+  "SECTION",
+  "NAV",
+  "ASIDE",
+  "HEADER",
+  "FOOTER",
+  "MAIN",
+  "ARTICLE",
+  "FORM",
+  "DIALOG",
+  "DETAILS"
+]);
+var MIN_TARGET_SIZE = 50;
+var MAX_VIEWPORT_RATIO = 0.85;
+function isVisualPanel(el) {
+  const style = getComputedStyle(el);
+  if (/auto|scroll/.test(style.overflow + style.overflowY + style.overflowX)) return true;
+  if (style.borderWidth && style.borderWidth !== "0px" && style.borderStyle !== "none") return true;
+  if (style.borderRadius && style.borderRadius !== "0px") return true;
+  if (style.backgroundColor && style.backgroundColor !== "rgba(0, 0, 0, 0)" && style.backgroundColor !== "transparent") return true;
+  if (style.boxShadow && style.boxShadow !== "none") return true;
+  return false;
+}
+function inferLabel(el) {
+  const heading = el.querySelector("h1, h2, h3, h4, h5, h6, [class*='title'], [class*='heading']");
+  if (heading) {
+    const text = heading.textContent?.trim();
+    if (text && text.length <= 40) return text;
+  }
+  const firstText = el.querySelector("span, p, label, strong");
+  if (firstText) {
+    const text = firstText.textContent?.trim();
+    if (text && text.length <= 30) return text;
+  }
+  return null;
+}
+function getElementId(el) {
+  const manual = el.getAttribute("data-comment-target");
+  if (manual) return manual;
+  if (el.id) return `#${el.id}`;
+  const label = el.getAttribute("aria-label");
+  if (label) return `${el.tagName.toLowerCase()}[aria-label="${label}"]`;
+  const parts = [];
+  let cur = el;
+  for (let depth = 0; cur && depth < 5; depth++) {
+    if (cur.id) {
+      parts.unshift(`#${cur.id}`);
+      break;
+    }
+    const p = cur.parentElement;
+    if (p) {
+      const siblings = Array.from(p.children);
+      const idx = siblings.indexOf(cur);
+      parts.unshift(`${cur.tagName.toLowerCase()}:nth-child(${idx + 1})`);
+    } else {
+      parts.unshift(cur.tagName.toLowerCase());
+    }
+    cur = p;
+  }
+  return parts.join(" > ");
+}
+function getElementLabel(el) {
+  const manual = el.getAttribute("data-comment-label");
+  if (manual) return manual;
+  const ariaLabel = el.getAttribute("aria-label");
+  if (ariaLabel) return ariaLabel;
+  const inferred = inferLabel(el);
+  if (inferred) return inferred;
+  const role = el.getAttribute("role");
+  if (el.id) {
+    const pretty = el.id.replace(/[-_]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase());
+    return role ? `${pretty} (${role})` : pretty;
+  }
+  const tag = el.tagName.toLowerCase();
+  if (SEMANTIC_TAGS.has(el.tagName)) return role ? `${tag} (${role})` : tag;
+  if (role) return role;
+  return tag;
+}
+function findCommentTarget(el, boundary) {
+  let current = el;
+  const candidates = [];
+  let depth = 0;
+  while (current && current !== boundary && current !== document.body) {
+    const rect = current.getBoundingClientRect();
+    const isBigEnough = rect.width >= MIN_TARGET_SIZE && rect.height >= MIN_TARGET_SIZE;
+    const isTooBig = rect.width > window.innerWidth * MAX_VIEWPORT_RATIO && rect.height > window.innerHeight * MAX_VIEWPORT_RATIO;
+    if (isBigEnough && !isTooBig) {
+      let score = 0;
+      if (current.getAttribute("data-comment-target")) score = 100;
+      else if (current.id) score = 80;
+      else if (current.getAttribute("aria-label")) score = 70;
+      else if (current.getAttribute("role")) score = 60;
+      else if (SEMANTIC_TAGS.has(current.tagName)) score = 50;
+      else if (isVisualPanel(current)) score = 40;
+      if (score > 0) {
+        candidates.push({ el: current, score, depth });
+      }
+    }
+    current = current.parentElement;
+    depth++;
+  }
+  if (candidates.length === 0) return null;
+  candidates.sort((a, b) => {
+    const scoreA = a.score + Math.max(0, 10 - a.depth);
+    const scoreB = b.score + Math.max(0, 10 - b.depth);
+    return scoreB - scoreA;
+  });
+  const best = candidates[0];
+  const targetId = getElementId(best.el);
+  const targetLabel = getElementLabel(best.el);
+  debug.log(" candidates:", candidates.map((c) => ({
+    tag: c.el.tagName.toLowerCase(),
+    id: c.el.id || void 0,
+    class: c.el.className?.toString().slice(0, 60) || void 0,
+    score: c.score,
+    depth: c.depth,
+    label: getElementLabel(c.el)
+  })));
+  return {
+    targetId,
+    targetLabel,
+    element: best.el
+  };
+}
+function CommentOverlay() {
+  const { threads, commentMode, setCommentMode, user, addThread, setActiveThreadId } = 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 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 = "";
+      debug.log(" click at", { clientX: e.clientX, clientY: e.clientY });
+      debug.log(" element below overlay:", elementBelow);
+      if (elementBelow) {
+        const path = [];
+        let walk = elementBelow;
+        while (walk && walk !== document.body) {
+          const attrs = [walk.tagName.toLowerCase()];
+          if (walk.id) attrs.push(`#${walk.id}`);
+          if (walk.getAttribute("data-comment-target")) attrs.push(`[data-comment-target="${walk.getAttribute("data-comment-target")}"]`);
+          if (walk.getAttribute("aria-label")) attrs.push(`[aria-label="${walk.getAttribute("aria-label")}"]`);
+          if (walk.getAttribute("role")) attrs.push(`[role="${walk.getAttribute("role")}"]`);
+          if (SEMANTIC_TAGS.has(walk.tagName)) attrs.push("(semantic)");
+          path.push(attrs.join(""));
+          walk = walk.parentElement;
+        }
+        debug.log(" DOM path:", path.join(" \u2192 "));
+      }
+      const target = elementBelow ? findCommentTarget(elementBelow, overlayRef.current) : null;
+      if (target) {
+        const targetRect = target.element.getBoundingClientRect();
+        const x = (e.clientX - targetRect.left) / targetRect.width * 100;
+        const y = (e.clientY - targetRect.top) / targetRect.height * 100;
+        debug.log(" \u2705 target found:", {
+          targetId: target.targetId,
+          targetLabel: target.targetLabel,
+          element: target.element,
+          relativePos: { x: x.toFixed(1), y: y.toFixed(1) },
+          targetRect: { w: targetRect.width, h: targetRect.height }
+        });
+        setPendingPin({ x, y, targetId: target.targetId, targetLabel: target.targetLabel });
+      } else {
+        const x = (e.clientX - overlayRect.left) / overlayRect.width * 100;
+        const y = (e.clientY - overlayRect.top) / overlayRect.height * 100;
+        debug.log(" \u26A0\uFE0F no target found, using overlay-relative position:", {
+          x: x.toFixed(1),
+          y: y.toFixed(1)
+        });
+        setPendingPin({ x, y });
+      }
+      setPendingPixel({
+        left: e.clientX - overlayRect.left,
+        top: e.clientY - overlayRect.top
+      });
+      setActiveThreadId(null);
+    },
+    [commentMode, setActiveThreadId]
+  );
+  const handleNewComment = (0, import_react6.useCallback)(
+    (body) => {
+      if (!pendingPin) return;
+      debug.log(" saving thread:", {
+        pinX: pendingPin.x.toFixed(1),
+        pinY: pendingPin.y.toFixed(1),
+        targetId: pendingPin.targetId ?? "(none)",
+        targetLabel: pendingPin.targetLabel ?? "(none)",
+        body
+      });
+      addThread(pendingPin.x, pendingPin.y, body, pendingPin.targetId, pendingPin.targetLabel);
+      setPendingPin(null);
+      setPendingPixel(null);
+    },
+    [pendingPin, addThread]
+  );
+  const cancelPending = (0, import_react6.useCallback)(() => {
+    setPendingPin(null);
+    setPendingPixel(null);
+    setCommentMode(false);
+  }, [setCommentMode]);
+  (0, import_react6.useEffect)(() => {
+    const hash = window.location.hash;
+    console.log("[apostil] hash check:", hash, "threads:", threads.length, threads.map((t) => t.id));
+    if (!hash.startsWith("#apostil-")) return;
+    const threadId = hash.replace("#apostil-", "");
+    console.log("[apostil] looking for thread:", threadId);
+    if (threads.length === 0) {
+      console.log("[apostil] no threads loaded yet, waiting...");
+      return;
+    }
+    const found = threads.find((t) => t.id === threadId);
+    console.log("[apostil] found thread:", found ? "yes" : "no");
+    if (found) {
+      setActiveThreadId(threadId);
+      window.history.replaceState(null, "", window.location.pathname);
+    }
+  }, [threads, setActiveThreadId]);
+  (0, import_react6.useEffect)(() => {
+    const handler = (e) => {
+      const tag = e.target?.tagName;
+      if (e.key === "Escape") {
+        if (pendingPin) {
+          setPendingPin(null);
+          setPendingPixel(null);
+          setCommentMode(false);
+        } else if (commentMode) {
+          setCommentMode(false);
+        }
+        return;
+      }
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.key === "c" || e.key === "C") {
+        e.preventDefault();
+        if (!commentMode) {
+          debug.log(" comment mode ON");
+          setActiveThreadId(null);
+          setCommentMode(true);
+        } else {
+          debug.log(" comment mode OFF");
+          setCommentMode(false);
+        }
+      }
+    };
+    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();
+  });
+  const showingUserPrompt = commentMode && !user;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        ref: overlayRef,
+        className: `fixed inset-0 ${commentMode && !showingUserPrompt ? "cursor-crosshair pointer-events-auto" : "pointer-events-none"}`,
+        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: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CommentPin, { thread, index: i, overlayRef }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ApostilThreadPopover, { thread, overlayRef })
+          ] }, thread.id)),
+          pendingPin && pendingPixel && user && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "div",
+            {
+              className: "absolute z-[70] pointer-events-auto",
+              style: {
+                left: pendingPixel.left,
+                top: pendingPixel.top
+              },
+              onMouseDown: (e) => e.stopPropagation(),
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "div",
+                  {
+                    className: "absolute -translate-x-1/2 -translate-y-1/2 w-7 h-7 rounded-full\n                         flex items-center justify-center text-white text-xs font-semibold\n                         shadow-lg ring-2 ring-white ring-offset-2 animate-bounce",
+                    style: { backgroundColor: user.color },
+                    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"
+                    }
+                  )
+                ] }) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    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" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(UserPrompt, {})
+  ] });
+}
+
+// src/components/comment-toggle.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function CommentToggle() {
+  const {
+    commentMode,
+    setCommentMode,
+    sidebarOpen,
+    setSidebarOpen,
+    unresolvedCount,
+    setActiveThreadId
+  } = 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)(
+      "button",
+      {
+        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"}`,
+        title: "Toggle comment list",
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(List, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        onClick: () => {
+          if (commentMode) {
+            setCommentMode(false);
+          } else {
+            setActiveThreadId(null);
+            setCommentMode(true);
+          }
+        },
+        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"}`,
+        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" }),
+          unresolvedCount > 0 && !commentMode && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute -top-1 -right-1 min-w-[18px] h-[18px] rounded-full\n                           bg-red-500 text-white text-[10px] font-semibold\n                           flex items-center justify-center px-1", children: unresolvedCount })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/comment-sidebar.tsx
+var import_react7 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function timeAgo2(iso) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+function pageIdToDisplay(pageId) {
+  return pageId.replace(/--/g, "/").replace(/-/g, ".");
+}
+function CommentSidebar() {
+  const {
+    threads,
+    sidebarOpen,
+    setSidebarOpen,
+    setActiveThreadId,
+    resolveThread
+  } = useApostil();
+  const [tab, setTab] = (0, import_react7.useState)("page");
+  const [allPages, setAllPages] = (0, import_react7.useState)([]);
+  const [loadingAll, setLoadingAll] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    if (!sidebarOpen || tab !== "all") return;
+    setLoadingAll(true);
+    async function fetchAll() {
+      try {
+        const res = await fetch("/api/apostil");
+        if (res.ok) {
+          const data = await res.json();
+          setAllPages(data);
+        }
+      } catch {
+      }
+      setLoadingAll(false);
+    }
+    fetchAll();
+  }, [sidebarOpen, tab]);
+  if (!sidebarOpen) return null;
+  const openThreads = threads.filter((t) => !t.resolved);
+  const resolvedThreads = threads.filter((t) => t.resolved);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute top-0 right-0 bottom-0 w-80 z-[75] bg-white border-l border-neutral-200 shadow-xl flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-neutral-100", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MessageSquare, { className: "w-4 h-4 text-neutral-500" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-semibold text-neutral-900", children: "Comments" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          onClick: () => setSidebarOpen(false),
+          className: "p-1 rounded hover:bg-neutral-100 transition-colors",
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(X, { className: "w-4 h-4 text-neutral-500" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex border-b border-neutral-100", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "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"}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FileText, { className: "w-3 h-3" }),
+            "This Page",
+            openThreads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] bg-red-50 text-red-600 px-1.5 py-px rounded-full", children: openThreads.length })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "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"}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Globe, { className: "w-3 h-3" }),
+            "All Pages"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 overflow-y-auto", children: tab === "page" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      PageThreads,
+      {
+        threads,
+        openThreads,
+        resolvedThreads,
+        onSelect: setActiveThreadId,
+        onResolve: resolveThread
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      AllPagesView,
+      {
+        pages: allPages,
+        loading: loadingAll
+      }
+    ) })
+  ] });
+}
+function PageThreads({
+  threads,
+  openThreads,
+  resolvedThreads,
+  onSelect,
+  onResolve
+}) {
+  if (threads.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "p-6 text-center text-sm text-neutral-400", children: "No comments on this page." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    openThreads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-4 py-2 text-[10px] font-semibold text-neutral-400 uppercase tracking-wider", children: [
+        "Open (",
+        openThreads.length,
+        ")"
+      ] }),
+      openThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ThreadItem,
+        {
+          thread,
+          onSelect: () => onSelect(thread.id),
+          onResolve: () => onResolve(thread.id)
+        },
+        thread.id
+      ))
+    ] }),
+    resolvedThreads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-4 py-2 text-[10px] font-semibold text-neutral-400 uppercase tracking-wider", children: [
+        "Resolved (",
+        resolvedThreads.length,
+        ")"
+      ] }),
+      resolvedThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ThreadItem,
+        {
+          thread,
+          onSelect: () => onSelect(thread.id),
+          onResolve: () => onResolve(thread.id),
+          resolved: true
+        },
+        thread.id
+      ))
+    ] })
+  ] });
+}
+function AllPagesView({
+  pages,
+  loading
+}) {
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "p-6 text-center text-sm text-neutral-400", children: "Loading..." });
+  }
+  if (pages.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "p-6 text-center text-sm text-neutral-400", children: "No comments in this project yet." });
+  }
+  const totalOpen = pages.reduce((s, p) => s + p.threads.filter((t) => !t.resolved).length, 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    totalOpen > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-4 py-2 text-[10px] font-semibold text-neutral-400 uppercase tracking-wider", children: [
+      totalOpen,
+      " open across ",
+      pages.length,
+      " pages"
+    ] }),
+    pages.map((page) => {
+      const open = page.threads.filter((t) => !t.resolved);
+      const resolved = page.threads.filter((t) => t.resolved);
+      const displayName = pageIdToDisplay(page.pageId);
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "border-b border-neutral-50", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-4 py-2.5 flex items-center justify-between bg-neutral-50/50", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-semibold text-neutral-700 truncate", children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+            open.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] bg-red-50 text-red-600 px-1.5 py-px rounded-full font-medium", children: open.length }),
+            resolved.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] bg-neutral-100 text-neutral-500 px-1.5 py-px rounded-full font-medium", children: resolved.length })
+          ] })
+        ] }),
+        [...open, ...resolved].map((thread) => {
+          const firstComment = thread.comments[0];
+          if (!firstComment) return null;
+          const isResolved = thread.resolved;
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "div",
+            {
+              onClick: () => {
+                const path = page.pageId === "home" ? "/" : "/" + page.pageId.replace(/--/g, "/");
+                window.location.href = path + "#apostil-" + thread.id;
+              },
+              className: `px-4 py-2.5 border-b border-neutral-50 cursor-pointer hover:bg-neutral-50 transition-colors ${isResolved ? "opacity-50" : ""}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "div",
+                      {
+                        className: "w-4 h-4 rounded-full flex items-center justify-center text-white text-[8px] font-semibold",
+                        style: { backgroundColor: firstComment.author.color },
+                        children: firstComment.author.name[0]?.toUpperCase()
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium text-neutral-700", children: firstComment.author.name })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-neutral-400", children: timeAgo2(firstComment.createdAt) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-neutral-600 line-clamp-2 pl-6", children: firstComment.body }),
+                thread.comments.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-[10px] text-neutral-400 pl-6", children: [
+                  thread.comments.length - 1,
+                  " ",
+                  thread.comments.length - 1 === 1 ? "reply" : "replies"
+                ] })
+              ]
+            },
+            thread.id
+          );
+        })
+      ] }, page.pageId);
+    })
+  ] });
+}
+function ThreadItem({
+  thread,
+  onSelect,
+  onResolve,
+  resolved
+}) {
+  const firstComment = thread.comments[0];
+  if (!firstComment) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      onClick: onSelect,
+      className: `px-4 py-3 border-b border-neutral-50 cursor-pointer hover:bg-neutral-50 transition-colors
+        ${resolved ? "opacity-60" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "div",
+              {
+                className: "w-4 h-4 rounded-full flex items-center justify-center text-white text-[8px] font-semibold",
+                style: { backgroundColor: firstComment.author.color },
+                children: firstComment.author.name[0]?.toUpperCase()
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium text-neutral-700", children: firstComment.author.name })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-neutral-400", children: timeAgo2(firstComment.createdAt) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onResolve();
+                },
+                className: "p-0.5 rounded hover:bg-neutral-200 transition-colors",
+                children: resolved ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Undo2, { className: "w-3 h-3 text-neutral-400" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Check, { className: "w-3 h-3 text-emerald-600" })
+              }
+            )
+          ] })
+        ] }),
+        thread.targetLabel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-block text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium ml-6 mb-1", children: thread.targetLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-neutral-600 line-clamp-2 pl-6", children: firstComment.body }),
+        thread.comments.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-[10px] text-neutral-400 pl-6", children: [
+          thread.comments.length - 1,
+          " ",
+          thread.comments.length - 1 === 1 ? "reply" : "replies"
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApostilProvider,
+  CommentOverlay,
+  CommentSidebar,
+  CommentToggle,
+  debug,
+  useApostil,
+  useCommentMode,
+  useComments
+});
+//# sourceMappingURL=index.cjs.map