@tonytangdev/pin-point 0.1.0

package/dist/index.mjs

@@ -0,0 +1,914 @@
+// src/FeedbackOverlay.tsx
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+
+// src/components/AdminKeyModal.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AdminKeyModal({ onValidate, onSuccess, onClose }) {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const handleSubmit = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const ok = await onValidate(value);
+      if (ok) {
+        onSuccess(value);
+      } else {
+        setError("Invalid admin key");
+      }
+    } catch {
+      setError("Could not reach server");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: backdrop click dismissal, Cancel button and Escape are primary dismissal paths
+    // biome-ignore lint/a11y/noStaticElementInteractions: backdrop is a visual scrim, inner dialog has role
+    /* @__PURE__ */ jsx("div", { className: "pp-modal-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "pp-modal",
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ jsx("h3", { children: "Enter admin key" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "password",
+              placeholder: "Admin key",
+              value,
+              onChange: (e) => setValue(e.target.value),
+              disabled: busy
+            }
+          ),
+          error && /* @__PURE__ */ jsx("div", { className: "pp-modal-error", children: error }),
+          /* @__PURE__ */ jsxs("div", { className: "pp-modal-actions", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, disabled: busy, children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleSubmit,
+                disabled: busy || !value,
+                children: "Save"
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  );
+}
+
+// src/components/ClickInterceptLayer.tsx
+import { useCallback, useRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ClickInterceptLayer({ onClick }) {
+  const lastClickTime = useRef(0);
+  const handleClick = useCallback(
+    (e) => {
+      const now = Date.now();
+      if (now - lastClickTime.current < 300) {
+        return;
+      }
+      lastClickTime.current = now;
+      onClick(e.clientX, e.clientY);
+    },
+    [onClick]
+  );
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: click-only overlay for pin placement
+    // biome-ignore lint/a11y/useKeyWithClickEvents: click-only overlay for pin placement
+    /* @__PURE__ */ jsx2("div", { className: "pp-intercept", onClick: handleClick })
+  );
+}
+
+// src/components/CommentPopover.tsx
+import { useEffect, useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var POPOVER_OFFSET = 14;
+var VIEWPORT_MARGIN = 8;
+function CommentPopover(props) {
+  const { mode, top, left } = props;
+  const popoverRef = useRef2(null);
+  const [placement, setPlacement] = useState2({
+    x: "right",
+    y: "bottom"
+  });
+  const [size, setSize] = useState2(
+    null
+  );
+  useLayoutEffect(() => {
+    const el = popoverRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const w = rect.width;
+    const h = rect.height;
+    const pinViewX = left - window.scrollX;
+    const pinViewY = top - window.scrollY;
+    const fitsRight = pinViewX - POPOVER_OFFSET + w + VIEWPORT_MARGIN <= window.innerWidth;
+    const fitsLeft = pinViewX + POPOVER_OFFSET - w - VIEWPORT_MARGIN >= 0;
+    const fitsBottom = pinViewY + POPOVER_OFFSET + h + VIEWPORT_MARGIN <= window.innerHeight;
+    const fitsTop = pinViewY - POPOVER_OFFSET - h - VIEWPORT_MARGIN >= 0;
+    setPlacement({
+      x: fitsRight ? "right" : fitsLeft ? "left" : "right",
+      y: fitsBottom ? "bottom" : fitsTop ? "top" : "bottom"
+    });
+    setSize({ width: w, height: h });
+  }, [top, left]);
+  const style = size ? {
+    top: `${placement.y === "bottom" ? top + POPOVER_OFFSET : top - POPOVER_OFFSET - size.height}px`,
+    left: `${placement.x === "right" ? left - POPOVER_OFFSET : left + POPOVER_OFFSET - size.width}px`
+  } : {
+    top: `${top + POPOVER_OFFSET}px`,
+    left: `${left - POPOVER_OFFSET}px`,
+    visibility: "hidden"
+  };
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: stopPropagation only, not interactive
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: popoverRef,
+        className: "pp-popover",
+        "data-placement-x": placement.x,
+        "data-placement-y": placement.y,
+        style,
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        children: [
+          /* @__PURE__ */ jsx3("div", { className: "pp-popover-arrow" }),
+          mode === "read" ? /* @__PURE__ */ jsx3(
+            ReadContent,
+            {
+              content: props.content,
+              createdAt: props.createdAt,
+              viewportWidth: props.viewportWidth,
+              onDelete: props.onDelete,
+              onUpdate: props.onUpdate
+            }
+          ) : /* @__PURE__ */ jsx3(CreateContent, { onSubmit: props.onSubmit, onCancel: props.onCancel })
+        ]
+      }
+    )
+  );
+}
+function ReadContent({
+  content,
+  createdAt,
+  viewportWidth,
+  onDelete,
+  onUpdate
+}) {
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState2(false);
+  const [isEditing, setIsEditing] = useState2(false);
+  const [editContent, setEditContent] = useState2(content);
+  const [saving, setSaving] = useState2(false);
+  const [deleting, setDeleting] = useState2(false);
+  const [deleteError, setDeleteError] = useState2(false);
+  const [editError, setEditError] = useState2(false);
+  useEffect(() => setEditContent(content), [content]);
+  const date = new Date(createdAt).toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          className: "pp-popover-textarea",
+          value: editContent,
+          onChange: (e) => setEditContent(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "pp-popover-actions", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "pp-btn pp-btn--cancel",
+            onClick: () => {
+              setIsEditing(false);
+              setEditContent(content);
+              setEditError(false);
+            },
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "pp-btn pp-btn--submit",
+            disabled: editContent.trim().length === 0 || saving,
+            onClick: async () => {
+              setSaving(true);
+              setEditError(false);
+              try {
+                await onUpdate?.(editContent);
+                setIsEditing(false);
+              } catch {
+                setEditError(true);
+              } finally {
+                setSaving(false);
+              }
+            },
+            children: "Save"
+          }
+        )
+      ] }),
+      editError && /* @__PURE__ */ jsx3("div", { className: "pp-popover-error", children: "Couldn't save. Try again." })
+    ] });
+  }
+  if (isConfirmingDelete) {
+    return /* @__PURE__ */ jsxs2("div", { className: "pp-delete-confirm", children: [
+      /* @__PURE__ */ jsx3("div", { className: "pp-delete-confirm-icon", children: /* @__PURE__ */ jsxs2(
+        "svg",
+        {
+          "aria-hidden": "true",
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx3("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsx3("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx3("p", { className: "pp-delete-confirm-text", children: "Delete this comment?" }),
+      deleteError && /* @__PURE__ */ jsx3("div", { className: "pp-popover-error", children: "Couldn't delete. Try again." }),
+      /* @__PURE__ */ jsxs2("div", { className: "pp-delete-confirm-actions", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "pp-btn pp-btn--cancel",
+            disabled: deleting,
+            onClick: () => {
+              setIsConfirmingDelete(false);
+              setDeleteError(false);
+            },
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "pp-btn pp-btn--danger",
+            disabled: deleting,
+            onClick: async () => {
+              setDeleting(true);
+              setDeleteError(false);
+              try {
+                await onDelete?.();
+              } catch {
+                setDeleteError(true);
+              } finally {
+                setDeleting(false);
+              }
+            },
+            children: deleting ? "Deleting..." : "Delete"
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("div", { className: "pp-popover-content", children: content }),
+    /* @__PURE__ */ jsxs2("div", { className: "pp-popover-footer", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "pp-popover-meta", children: [
+        date,
+        " \xB7 ",
+        viewportWidth,
+        "px viewport"
+      ] }),
+      (onDelete || onUpdate) && /* @__PURE__ */ jsxs2("div", { className: "pp-popover-actions-row", children: [
+        onUpdate && /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "pp-action-btn",
+            "aria-label": "Edit",
+            onClick: () => setIsEditing(true),
+            children: /* @__PURE__ */ jsxs2(
+              "svg",
+              {
+                "aria-hidden": "true",
+                width: "13",
+                height: "13",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx3("path", { d: "M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+                  /* @__PURE__ */ jsx3("path", { d: "m15 5 4 4" })
+                ]
+              }
+            )
+          }
+        ),
+        onDelete && /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "pp-action-btn pp-action-btn--danger",
+            "aria-label": "Delete",
+            onClick: () => setIsConfirmingDelete(true),
+            children: /* @__PURE__ */ jsxs2(
+              "svg",
+              {
+                "aria-hidden": "true",
+                width: "13",
+                height: "13",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx3("path", { d: "M3 6h18" }),
+                  /* @__PURE__ */ jsx3("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+                  /* @__PURE__ */ jsx3("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function CreateContent({
+  onSubmit,
+  onCancel
+}) {
+  const [text, setText] = useState2("");
+  const [error, setError] = useState2(null);
+  const [submitting, setSubmitting] = useState2(false);
+  const handleSubmit = async () => {
+    setError(null);
+    setSubmitting(true);
+    try {
+      await onSubmit(text);
+    } catch {
+      setError("Couldn't save. Try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      "textarea",
+      {
+        className: "pp-popover-textarea",
+        placeholder: "Leave your feedback...",
+        value: text,
+        onChange: (e) => setText(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "pp-popover-actions", children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "pp-btn pp-btn--cancel",
+          onClick: onCancel,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "pp-btn pp-btn--submit",
+          onClick: handleSubmit,
+          disabled: text.trim().length === 0 || submitting,
+          children: "Submit"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx3("div", { className: "pp-popover-error", children: error })
+  ] });
+}
+
+// src/components/FeedbackToolbar.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CommentIcon = () => /* @__PURE__ */ jsx4(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx4("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+  }
+);
+var KeyIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx4("path", { d: "m21 2-9.6 9.6" }),
+      /* @__PURE__ */ jsx4("circle", { cx: "7.5", cy: "15.5", r: "5.5" }),
+      /* @__PURE__ */ jsx4("path", { d: "m15.5 7.5 3 3" })
+    ]
+  }
+);
+function FeedbackToolbar({
+  auth,
+  commentCount,
+  pinModeActive,
+  onPinModeToggle,
+  onAdminKeyOpen,
+  shareButton,
+  error
+}) {
+  const commentDisabled = auth.role === "anonymous";
+  const commentTitle = commentDisabled ? "Sign in with a share link to leave feedback" : pinModeActive ? "Exit pin mode" : "Leave feedback";
+  const showAdminKey = auth.role !== "tokenHolder";
+  return /* @__PURE__ */ jsxs3("div", { className: "pp-toolbar", children: [
+    /* @__PURE__ */ jsx4("div", { className: "pp-toolbar-dot" }),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        className: "pp-toolbar-btn",
+        onClick: onPinModeToggle,
+        disabled: commentDisabled,
+        "aria-pressed": pinModeActive,
+        "aria-label": "Leave feedback",
+        title: commentTitle,
+        children: /* @__PURE__ */ jsx4(CommentIcon, {})
+      }
+    ),
+    showAdminKey && /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        className: "pp-toolbar-btn",
+        onClick: onAdminKeyOpen,
+        "aria-label": "Enter admin key",
+        title: "Enter admin key",
+        children: /* @__PURE__ */ jsx4(KeyIcon, {})
+      }
+    ),
+    shareButton,
+    error ? /* @__PURE__ */ jsx4("span", { className: "pp-toolbar-error", children: error }) : /* @__PURE__ */ jsxs3("span", { className: "pp-toolbar-badge", children: [
+      commentCount,
+      " ",
+      commentCount === 1 ? "comment" : "comments"
+    ] })
+  ] });
+}
+
+// src/components/PinMarker.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function PinMarker({ number, top, left, onClick }) {
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      className: "pp-pin",
+      style: { top: `${top}px`, left: `${left}px` },
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      children: number
+    }
+  );
+}
+
+// src/components/ShareLinkButton.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ShareIcon = () => /* @__PURE__ */ jsxs4(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx6("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }),
+      /* @__PURE__ */ jsx6("polyline", { points: "16 6 12 2 8 6" }),
+      /* @__PURE__ */ jsx6("line", { x1: "12", y1: "2", x2: "12", y2: "15" })
+    ]
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ jsx6(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx6("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
+function ShareLinkButton({ onCreate }) {
+  const [busy, setBusy] = useState3(false);
+  const [copied, setCopied] = useState3(false);
+  const handleClick = async () => {
+    setBusy(true);
+    try {
+      const { tokenId } = await onCreate();
+      const url = new URL(window.location.href);
+      url.searchParams.set("pin-token", tokenId);
+      await navigator.clipboard.writeText(url.toString());
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx6("div", { className: "pp-share-wrapper", children: /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      type: "button",
+      className: "pp-share-btn",
+      onClick: handleClick,
+      disabled: busy,
+      "data-state": copied ? "copied" : busy ? "busy" : "idle",
+      children: [
+        copied ? /* @__PURE__ */ jsx6(CheckIcon, {}) : /* @__PURE__ */ jsx6(ShareIcon, {}),
+        /* @__PURE__ */ jsx6("span", { children: copied ? "Link copied" : "Share for feedback" })
+      ]
+    }
+  ) });
+}
+
+// src/hooks/useAuth.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState4 } from "react";
+var ADMIN_KEY_STORAGE = "pin-admin-key";
+var TOKEN_QUERY_PARAM = "pin-token";
+var resolveAuth = () => {
+  if (typeof window === "undefined") return { role: "anonymous" };
+  const params = new URLSearchParams(window.location.search);
+  const token = params.get(TOKEN_QUERY_PARAM);
+  if (token) return { role: "tokenHolder", token };
+  const adminKey = localStorage.getItem(ADMIN_KEY_STORAGE);
+  if (adminKey) return { role: "admin", secret: adminKey };
+  return { role: "anonymous" };
+};
+var computeHeaders = (auth) => {
+  switch (auth.role) {
+    case "tokenHolder":
+      return { "X-Pin-Token": auth.token };
+    case "admin":
+      return { "X-Pin-Admin": auth.secret };
+    case "anonymous":
+      return {};
+  }
+};
+var useAuth = () => {
+  const [auth, setAuth] = useState4(resolveAuth);
+  useEffect2(() => {
+    const onPopState = () => setAuth(resolveAuth());
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+  const setAdminKey = useCallback2((secret) => {
+    localStorage.setItem(ADMIN_KEY_STORAGE, secret);
+    setAuth(resolveAuth());
+  }, []);
+  const clearAdminKey = useCallback2(() => {
+    localStorage.removeItem(ADMIN_KEY_STORAGE);
+    setAuth(resolveAuth());
+  }, []);
+  return {
+    auth,
+    authHeaders: computeHeaders(auth),
+    setAdminKey,
+    clearAdminKey
+  };
+};
+
+// src/utils/resolveAnchor.ts
+var DATA_ATTR_PRIORITY = ["data-testid", "data-cy"];
+function findAnchorElement(element) {
+  if (element.id) {
+    return { el: element, selector: `#${CSS.escape(element.id)}` };
+  }
+  let current = element.parentElement;
+  while (current && current !== document.body) {
+    if (current.id) {
+      return { el: current, selector: `#${CSS.escape(current.id)}` };
+    }
+    current = current.parentElement;
+  }
+  current = element;
+  while (current && current !== document.body) {
+    for (const attr of DATA_ATTR_PRIORITY) {
+      const value = current.getAttribute(attr);
+      if (value) {
+        return { el: current, selector: `[${attr}="${CSS.escape(value)}"]` };
+      }
+    }
+    for (const attr of current.getAttributeNames()) {
+      if (attr.startsWith("data-") && !DATA_ATTR_PRIORITY.includes(attr)) {
+        const value = current.getAttribute(attr);
+        return {
+          el: current,
+          selector: `[${attr}="${CSS.escape(value ?? "")}"]`
+        };
+      }
+    }
+    current = current.parentElement;
+  }
+  return { el: element, selector: buildStructuralSelector(element) };
+}
+function buildStructuralSelector(element) {
+  const parts = [];
+  let current = element;
+  let depth = 0;
+  while (current && current !== document.body && depth < 3) {
+    const tag = current.tagName.toLowerCase();
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (c) => c.tagName === current?.tagName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        parts.unshift(`${tag}:nth-of-type(${index})`);
+      } else {
+        parts.unshift(tag);
+      }
+    } else {
+      parts.unshift(tag);
+    }
+    current = parent;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+function computePercentages(anchorEl, clickX, clickY) {
+  const rect = anchorEl.getBoundingClientRect();
+  const width = rect.width || 1;
+  const height = rect.height || 1;
+  const xPercent = (clickX - rect.left) / width * 100;
+  const yPercent = (clickY - rect.top) / height * 100;
+  return { xPercent, yPercent };
+}
+function resolveAnchor(element, clickX, clickY) {
+  const { el, selector } = findAnchorElement(element);
+  const { xPercent, yPercent } = computePercentages(el, clickX, clickY);
+  return { selector, xPercent, yPercent };
+}
+
+// src/utils/restorePosition.ts
+function restorePosition(anchor) {
+  if (!anchor.selector) {
+    return null;
+  }
+  let el;
+  try {
+    el = document.querySelector(anchor.selector);
+  } catch {
+    return null;
+  }
+  if (!el) {
+    return null;
+  }
+  const rect = el.getBoundingClientRect();
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+  const left = rect.left + scrollX + rect.width * anchor.xPercent / 100;
+  const top = rect.top + scrollY + rect.height * anchor.yPercent / 100;
+  return { top, left };
+}
+
+// src/FeedbackOverlay.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function FeedbackOverlay({
+  onCommentCreate,
+  onCommentsFetch,
+  onCommentDelete,
+  onCommentUpdate,
+  onAdminValidate,
+  onShareLinkCreate,
+  children
+}) {
+  const { auth, authHeaders, setAdminKey } = useAuth();
+  const [comments, setComments] = useState5([]);
+  const [pendingPin, setPendingPin] = useState5(null);
+  const [expandedPinId, setExpandedPinId] = useState5(null);
+  const [fetchError, setFetchError] = useState5(null);
+  const [pinMode, setPinMode] = useState5(false);
+  const [adminModalOpen, setAdminModalOpen] = useState5(false);
+  const hasFetched = useRef3(false);
+  useEffect3(() => {
+    if (hasFetched.current) return;
+    hasFetched.current = true;
+    onCommentsFetch(authHeaders).then((data) => setComments([...data])).catch(() => setFetchError("Couldn't load comments."));
+  }, [onCommentsFetch, authHeaders]);
+  const handleClick = useCallback3((clientX, clientY) => {
+    setExpandedPinId(null);
+    const interceptLayer = document.querySelector(
+      ".pp-intercept"
+    );
+    if (interceptLayer) interceptLayer.style.pointerEvents = "none";
+    const elementBelow = document.elementFromPoint(clientX, clientY);
+    if (interceptLayer) interceptLayer.style.pointerEvents = "";
+    if (!elementBelow) return;
+    const anchor = resolveAnchor(elementBelow, clientX, clientY);
+    setPendingPin({
+      x: clientX + window.scrollX,
+      y: clientY + window.scrollY,
+      anchor
+    });
+  }, []);
+  const handleSubmit = useCallback3(
+    async (content) => {
+      if (!pendingPin) return;
+      const comment = {
+        id: crypto.randomUUID(),
+        url: window.location.pathname,
+        content,
+        anchor: pendingPin.anchor,
+        viewport: { width: window.innerWidth },
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      await onCommentCreate(comment, authHeaders);
+      setComments((prev) => [...prev, comment]);
+      setPendingPin(null);
+      setPinMode(false);
+    },
+    [pendingPin, onCommentCreate, authHeaders]
+  );
+  const handleCancel = useCallback3(() => {
+    setPendingPin(null);
+  }, []);
+  const handleDelete = useCallback3(
+    async (id) => {
+      if (!onCommentDelete) return;
+      await onCommentDelete(id, authHeaders);
+      setComments((prev) => prev.filter((c) => c.id !== id));
+      setExpandedPinId(null);
+    },
+    [onCommentDelete, authHeaders]
+  );
+  const handleUpdate = useCallback3(
+    async (id, content) => {
+      if (!onCommentUpdate) return;
+      const updated = await onCommentUpdate(id, content, authHeaders);
+      setComments((prev) => prev.map((c) => c.id === id ? updated : c));
+    },
+    [onCommentUpdate, authHeaders]
+  );
+  const handlePinModeToggle = useCallback3(() => {
+    setPinMode((prev) => {
+      const next = !prev;
+      if (!next) setPendingPin(null);
+      return next;
+    });
+  }, []);
+  const handleAdminValidate = useCallback3(
+    async (secret) => {
+      if (!onAdminValidate) return false;
+      return onAdminValidate(secret);
+    },
+    [onAdminValidate]
+  );
+  const handleAdminSuccess = useCallback3(
+    (secret) => {
+      setAdminKey(secret);
+      setAdminModalOpen(false);
+    },
+    [setAdminKey]
+  );
+  const handleShareCreate = useCallback3(
+    async (label, ttl) => {
+      if (!onShareLinkCreate) throw new Error("onShareLinkCreate not provided");
+      return onShareLinkCreate(label, ttl, authHeaders);
+    },
+    [onShareLinkCreate, authHeaders]
+  );
+  return /* @__PURE__ */ jsxs5("div", { "data-pin-point": "", children: [
+    children,
+    pinMode && /* @__PURE__ */ jsx7(ClickInterceptLayer, { onClick: handleClick }),
+    comments.map((comment, index) => {
+      const pos = restorePosition(comment.anchor);
+      if (!pos) return null;
+      return /* @__PURE__ */ jsx7(
+        PinMarker,
+        {
+          number: index + 1,
+          top: pos.top,
+          left: pos.left,
+          onClick: () => setExpandedPinId(expandedPinId === comment.id ? null : comment.id)
+        },
+        comment.id
+      );
+    }),
+    expandedPinId && (() => {
+      const comment = comments.find((c) => c.id === expandedPinId);
+      if (!comment) return null;
+      const pos = restorePosition(comment.anchor);
+      if (!pos) return null;
+      return /* @__PURE__ */ jsx7(
+        CommentPopover,
+        {
+          mode: "read",
+          content: comment.content,
+          createdAt: comment.createdAt,
+          viewportWidth: comment.viewport.width,
+          top: pos.top,
+          left: pos.left,
+          onDelete: onCommentDelete ? async () => handleDelete(comment.id) : void 0,
+          onUpdate: onCommentUpdate ? async (content) => {
+            await handleUpdate(comment.id, content);
+          } : void 0
+        }
+      );
+    })(),
+    pendingPin && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx7(
+        PinMarker,
+        {
+          number: comments.length + 1,
+          top: pendingPin.y,
+          left: pendingPin.x,
+          onClick: () => {
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        CommentPopover,
+        {
+          mode: "create",
+          top: pendingPin.y,
+          left: pendingPin.x,
+          onSubmit: handleSubmit,
+          onCancel: handleCancel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx7(
+      FeedbackToolbar,
+      {
+        auth,
+        commentCount: comments.length,
+        pinModeActive: pinMode,
+        onPinModeToggle: handlePinModeToggle,
+        onAdminKeyOpen: () => setAdminModalOpen(true),
+        shareButton: auth.role === "admin" && onShareLinkCreate ? /* @__PURE__ */ jsx7(ShareLinkButton, { onCreate: handleShareCreate }) : void 0,
+        error: fetchError ?? void 0
+      }
+    ),
+    adminModalOpen && /* @__PURE__ */ jsx7(
+      AdminKeyModal,
+      {
+        onValidate: handleAdminValidate,
+        onSuccess: handleAdminSuccess,
+        onClose: () => setAdminModalOpen(false)
+      }
+    )
+  ] });
+}
+export {
+  FeedbackOverlay
+};
+//# sourceMappingURL=index.mjs.map