@arbidocs/react 0.5.110 → 0.5.112

package/dist/annotations/AnnotationPageOverlay.js

@@ -0,0 +1,807 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Check, MessageSquare, RotateCcw, Send, Trash2, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { DRAW_TOOLS, TEXT_TOOLS } from "./controller.js";
+import { dragToNorm, isTooSmall } from "./geometry.js";
+import {
+  clampRect
+} from "./model.js";
+import { dragRect, patchForRect, singleRect } from "./overlay-geometry.js";
+import { PAGE_ATTRIBUTE } from "./selection-marks.js";
+const FALLBACK_PAGE_WIDTH_PT = 612;
+const COMMENT_ICON_PX = 24;
+const DEFAULT_STAMP = { w: 0.32, h: 0.06 };
+const MOVE_THRESHOLD_PX = 3;
+function useElementSize(ref) {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      setSize(
+        (prev) => prev.width === r.width && prev.height === r.height ? prev : { width: r.width, height: r.height }
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+}
+function useHasTextLayer(ref) {
+  const [hasText, setHasText] = useState(false);
+  useLayoutEffect(() => {
+    const container = ref.current?.parentElement;
+    if (!container) return;
+    const check = () => setHasText(container.querySelector(".textLayer span") !== null);
+    check();
+    const observer = new MutationObserver(check);
+    observer.observe(container, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [ref]);
+  return hasText;
+}
+const pct = (n) => `${n * 100}%`;
+const rectStyle = (r) => ({
+  left: pct(r.x),
+  top: pct(r.y),
+  width: pct(r.w),
+  height: pct(r.h)
+});
+function AnnotationPageOverlay({
+  controller,
+  pageNumber,
+  pageWidthPt
+}) {
+  const rootRef = useRef(null);
+  const size = useElementSize(rootRef);
+  const pxPerPt = size.width / (pageWidthPt ?? FALLBACK_PAGE_WIDTH_PT);
+  const { tool, selectedId, settings } = controller;
+  const [draft, setDraft] = useState(null);
+  const [drag, setDrag] = useState(null);
+  const [openComment, setOpenComment] = useState(null);
+  const marks = controller.layer.annotations.filter((a) => a.page === pageNumber);
+  const hasText = useHasTextLayer(rootRef);
+  const readOnly = controller.readOnly;
+  const drawing = !readOnly && (DRAW_TOOLS.includes(tool) || TEXT_TOOLS.includes(tool) && !hasText);
+  useEffect(() => {
+    if (openComment && selectedId !== openComment) setOpenComment(null);
+  }, [selectedId, openComment]);
+  const local = useCallback((e) => {
+    const r = rootRef.current.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+  }, []);
+  const pageSize = () => {
+    const r = rootRef.current.getBoundingClientRect();
+    return { width: r.width, height: r.height };
+  };
+  const finishDraft = useCallback(
+    (a, b) => {
+      const page = pageSize();
+      const rect = dragToNorm(a, b, page);
+      if (tool === "box") {
+        if (isTooSmall(rect)) return;
+        controller.add({
+          kind: "box",
+          page: pageNumber,
+          rect,
+          color: settings.colors.box,
+          strokeWidth: settings.strokeWidth
+        });
+      } else if (tool === "highlight") {
+        if (isTooSmall(rect)) return;
+        controller.add({
+          kind: "highlight",
+          page: pageNumber,
+          rects: [rect],
+          color: settings.colors.highlight
+        });
+      } else if (tool === "redact-area" || tool === "redact-text") {
+        if (isTooSmall(rect)) return;
+        controller.add({
+          kind: "redaction",
+          page: pageNumber,
+          rects: [rect],
+          reason: settings.redactionReason,
+          status: "pending"
+        });
+      } else if (tool === "stamp" && settings.stampImage) {
+        const { image, label } = settings.stampImage;
+        const size2 = pngPixelSize(image);
+        const h = 0.06;
+        const w = Math.min(
+          0.5,
+          h * page.height * (size2.width / Math.max(1, size2.height)) / page.width
+        );
+        const id = controller.add({
+          kind: "stamp",
+          page: pageNumber,
+          rect: clampRect({ x: a.x / page.width - w / 2, y: a.y / page.height - h / 2, w, h }),
+          label,
+          color: "#0d1a59",
+          image
+        });
+        controller.setSettings({ stampImage: null });
+        controller.setTool("select");
+        if (id) controller.select(id);
+      } else if (tool === "stamp") {
+        const placed = isTooSmall(rect) ? clampRect({
+          x: a.x / page.width - DEFAULT_STAMP.w / 2,
+          y: a.y / page.height - DEFAULT_STAMP.h / 2,
+          ...DEFAULT_STAMP
+        }) : rect;
+        controller.add({
+          kind: "stamp",
+          page: pageNumber,
+          rect: placed,
+          label: settings.stampLabel,
+          color: settings.colors.stamp
+        });
+      } else if (tool === "comment") {
+        const anchor = clampRect({
+          x: a.x / page.width,
+          y: a.y / page.height,
+          w: COMMENT_ICON_PX / page.width,
+          h: COMMENT_ICON_PX / page.height
+        });
+        const id = controller.add({
+          kind: "comment",
+          page: pageNumber,
+          rect: anchor,
+          body: "",
+          replies: [],
+          resolved: false
+        });
+        if (id) {
+          controller.setTool("select");
+          controller.select(id);
+          setOpenComment(id);
+        }
+      }
+    },
+    [controller, tool, settings, pageNumber]
+  );
+  const onRootPointerDown = (e) => {
+    if (!drawing || e.button !== 0 || e.target !== e.currentTarget) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const p = local(e);
+    setDraft({ a: p, b: p });
+  };
+  const onRootPointerMove = (e) => {
+    if (draft) setDraft({ a: draft.a, b: local(e) });
+  };
+  const onRootPointerUp = (e) => {
+    if (!draft) return;
+    const b = local(e);
+    const a = draft.a;
+    setDraft(null);
+    finishDraft(a, b);
+  };
+  const beginDrag = (e, a, mode) => {
+    const origin = singleRect(a);
+    if (!origin || e.button !== 0 || readOnly) return;
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setDrag({
+      id: a.id,
+      mode,
+      startX: e.clientX,
+      startY: e.clientY,
+      origin,
+      rect: origin,
+      moved: false
+    });
+  };
+  const moveDrag = (e) => {
+    if (!drag) return;
+    const page = pageSize();
+    const dxPx = e.clientX - drag.startX;
+    const dyPx = e.clientY - drag.startY;
+    const moved = drag.moved || Math.hypot(dxPx, dyPx) > MOVE_THRESHOLD_PX;
+    if (!moved) return;
+    setDrag({
+      ...drag,
+      moved: true,
+      rect: dragRect(drag.origin, drag.mode, dxPx / page.width, dyPx / page.height)
+    });
+  };
+  const endDrag = (a) => {
+    if (!drag) return;
+    if (drag.moved) controller.update(a.id, patchForRect(a, drag.rect));
+    setDrag(null);
+  };
+  const interactive = (a) => readOnly ? a.kind === "comment" : tool === "select" || tool === "comment" && a.kind === "comment";
+  const selected = marks.find((a) => a.id === selectedId);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      ...{ [PAGE_ATTRIBUTE]: pageNumber },
+      "data-testid": `annotation-overlay-${pageNumber}`,
+      className: cn(
+        "absolute inset-0 z-10 select-none overflow-hidden",
+        drawing && "cursor-crosshair"
+      ),
+      style: {
+        pointerEvents: drawing ? "auto" : "none",
+        touchAction: drawing ? "none" : void 0
+      },
+      onPointerDown: onRootPointerDown,
+      onPointerMove: onRootPointerMove,
+      onPointerUp: onRootPointerUp,
+      onPointerCancel: () => setDraft(null),
+      children: [
+        marks.map((a) => /* @__PURE__ */ jsx(
+          MarkView,
+          {
+            annotation: a,
+            rectOverride: drag?.id === a.id ? drag.rect : void 0,
+            pxPerPt,
+            width: size.width,
+            height: size.height,
+            selected: a.id === selectedId,
+            interactive: interactive(a),
+            onPointerDown: (e) => {
+              if (!interactive(a)) return;
+              e.stopPropagation();
+              controller.select(a.id);
+              if (a.kind === "comment") setOpenComment(a.id);
+              beginDrag(e, a, "move");
+            },
+            onPointerMove: moveDrag,
+            onPointerUp: () => endDrag(a),
+            onActivate: () => {
+              controller.select(a.id);
+              if (a.kind === "comment") setOpenComment(a.id);
+            },
+            onDelete: () => controller.remove(a.id)
+          },
+          a.id
+        )),
+        selected && tool === "select" && !readOnly && singleRect(selected) && /* @__PURE__ */ jsx(
+          Handles,
+          {
+            rect: drag?.id === selected.id ? drag.rect : singleRect(selected),
+            onPointerDown: (e, mode) => beginDrag(e, selected, mode),
+            onPointerMove: moveDrag,
+            onPointerUp: () => endDrag(selected)
+          }
+        ),
+        selected && tool === "select" && !readOnly && /* @__PURE__ */ jsx(
+          ActionBar,
+          {
+            annotation: selected,
+            controller,
+            rect: drag?.id === selected.id ? drag.rect : firstRect(selected)
+          }
+        ),
+        draft && /* @__PURE__ */ jsx(Draft, { draft, tool }),
+        openComment && selected?.kind === "comment" && selected.id === openComment && /* @__PURE__ */ jsx(
+          CommentPopover,
+          {
+            annotation: selected,
+            controller,
+            pageHeight: size.height,
+            onClose: () => {
+              setOpenComment(null);
+              controller.select(null);
+            }
+          },
+          selected.id
+        )
+      ]
+    }
+  );
+}
+const firstRect = (a) => a.kind === "highlight" || a.kind === "redaction" ? a.rects[0] : a.rect;
+function MarkView(props) {
+  const { annotation: a, rectOverride, pxPerPt, width, height, selected, interactive } = props;
+  const handlers = {
+    onPointerDown: props.onPointerDown,
+    onPointerMove: props.onPointerMove,
+    onPointerUp: props.onPointerUp,
+    onPointerCancel: props.onPointerUp,
+    onKeyDown: (e) => {
+      if (e.key === "Enter") props.onActivate();
+      if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        props.onDelete();
+      }
+    }
+  };
+  const base = (label) => ({
+    "data-testid": `annotation-mark-${a.id}`,
+    "data-kind": a.kind,
+    "data-selected": selected ? "true" : void 0,
+    role: "button",
+    tabIndex: interactive ? 0 : -1,
+    "aria-label": label,
+    ...handlers
+  });
+  const ring = selected ? "outline outline-2 outline-offset-2 outline-primary" : "";
+  const events = interactive ? "auto" : "none";
+  const dragsByTouch = selected && singleRect(a) !== null;
+  const cursor = interactive ? singleRect(a) ? "move" : "pointer" : void 0;
+  if (a.kind === "highlight") {
+    return /* @__PURE__ */ jsx(Fragment, { children: a.rects.map((r, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...i === 0 ? base(`Highlight: ${a.text ?? ""}`) : {},
+        className: cn("absolute rounded-sm", i === 0 && ring),
+        style: {
+          ...rectStyle(r),
+          background: a.color,
+          mixBlendMode: "multiply",
+          opacity: 0.7,
+          pointerEvents: events,
+          touchAction: dragsByTouch ? "none" : void 0,
+          cursor
+        }
+      },
+      i
+    )) });
+  }
+  if (a.kind === "box") {
+    const r = rectOverride ?? a.rect;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...base("Box"),
+        className: cn("absolute", ring),
+        style: {
+          ...rectStyle(r),
+          border: `${a.strokeWidth * pxPerPt}px solid ${a.color}`,
+          pointerEvents: events,
+          touchAction: dragsByTouch ? "none" : void 0,
+          cursor,
+          boxSizing: "border-box"
+        }
+      }
+    );
+  }
+  if (a.kind === "stamp" && a.image) {
+    const r = rectOverride ?? a.rect;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...base(`Stamp: ${a.label}`),
+        className: cn("absolute", ring),
+        style: {
+          ...rectStyle(r),
+          pointerEvents: events,
+          touchAction: dragsByTouch ? "none" : void 0,
+          cursor
+        },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: `data:image/png;base64,${a.image}`,
+            alt: a.label,
+            draggable: false,
+            className: "pointer-events-none h-full w-full object-contain select-none"
+          }
+        )
+      }
+    );
+  }
+  if (a.kind === "stamp") {
+    const r = rectOverride ?? a.rect;
+    const fontPx = Math.max(
+      6,
+      Math.min(r.h * height * 0.6, r.w * width * 0.9 / Math.max(1, a.label.length * 0.7))
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...base(`Stamp: ${a.label}`),
+        className: cn("absolute flex items-center justify-center font-bold uppercase", ring),
+        style: {
+          ...rectStyle(r),
+          border: `${2 * pxPerPt}px solid ${a.color}`,
+          color: a.color,
+          fontSize: fontPx,
+          lineHeight: 1,
+          pointerEvents: events,
+          touchAction: dragsByTouch ? "none" : void 0,
+          cursor,
+          boxSizing: "border-box",
+          fontFamily: "Helvetica, Arial, sans-serif"
+        },
+        children: a.label
+      }
+    );
+  }
+  if (a.kind === "comment") {
+    const r = rectOverride ?? a.rect;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        ...base(`Comment: ${a.body || "empty"}`),
+        onMouseDown: (e) => e.preventDefault(),
+        className: cn(
+          "absolute flex items-center justify-center rounded-md border border-amber-700/60 bg-amber-300 text-amber-900 shadow-sm",
+          a.resolved && "opacity-50",
+          ring
+        ),
+        style: {
+          left: pct(r.x),
+          top: pct(r.y),
+          width: COMMENT_ICON_PX,
+          height: COMMENT_ICON_PX,
+          pointerEvents: events,
+          touchAction: dragsByTouch ? "none" : void 0,
+          cursor
+        },
+        children: [
+          /* @__PURE__ */ jsx(MessageSquare, { size: 14 }),
+          a.replies.length > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 rounded-full bg-amber-900 px-1 text-[9px] leading-3 text-white", children: a.replies.length })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(RedactionView, { ...props, annotation: a, ring, cursor, base });
+}
+function RedactionView({
+  annotation: a,
+  rectOverride,
+  interactive,
+  selected,
+  ring,
+  cursor,
+  base
+}) {
+  const events = interactive ? "auto" : "none";
+  const dragsByTouch = selected && singleRect(a) !== null;
+  const rects = rectOverride ? [rectOverride] : a.rects;
+  const approved = a.status === "approved";
+  const rejected = a.status === "rejected";
+  const label = `Redaction (${a.status}, not applied): ${a.reason}`;
+  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...i === 0 ? { ...base(label), title: label } : {},
+      "data-status": i === 0 ? a.status : void 0,
+      className: cn(
+        "absolute flex items-center justify-center overflow-hidden text-[10px] leading-none",
+        i === 0 && ring
+      ),
+      style: {
+        ...rectStyle(r),
+        pointerEvents: events,
+        touchAction: dragsByTouch ? "none" : void 0,
+        cursor,
+        boxSizing: "border-box",
+        ...approved ? { background: "#000", color: "#fff" } : rejected ? { border: "1px dotted #868e96", opacity: 0.6 } : {
+          background: "rgba(224,49,49,0.18)",
+          border: "2px dashed #e03131",
+          color: "#c92a2a"
+        }
+      },
+      children: i === 0 && !rejected && /* @__PURE__ */ jsx("span", { className: "truncate px-1", children: "[REDACTED]" })
+    },
+    i
+  )) });
+}
+function Draft({ draft, tool }) {
+  const x = Math.min(draft.a.x, draft.b.x);
+  const y = Math.min(draft.a.y, draft.b.y);
+  const w = Math.abs(draft.b.x - draft.a.x);
+  const h = Math.abs(draft.b.y - draft.a.y);
+  const redact = tool === "redact-area" || tool === "redact-text";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "annotation-draft",
+      className: "pointer-events-none absolute",
+      style: {
+        left: x,
+        top: y,
+        width: w,
+        height: h,
+        border: redact ? "2px dashed #e03131" : "2px solid #1c7ed6",
+        background: redact ? "rgba(224,49,49,0.18)" : "rgba(28,126,214,0.08)"
+      }
+    }
+  );
+}
+const HANDLES = [
+  { mode: "nw", style: { left: 0, top: 0 }, cursor: "nwse-resize" },
+  { mode: "ne", style: { left: "100%", top: 0 }, cursor: "nesw-resize" },
+  { mode: "sw", style: { left: 0, top: "100%" }, cursor: "nesw-resize" },
+  { mode: "se", style: { left: "100%", top: "100%" }, cursor: "nwse-resize" }
+];
+function Handles({
+  rect,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute", style: rectStyle(rect), children: HANDLES.map((h) => (
+    // The visible dot is small; the element a finger or pointer hits is a larger transparent
+    // square around it (44px on touch screens, the usual minimum target).
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": `annotation-handle-${h.mode}`,
+        className: "pointer-events-auto absolute flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:h-11 pointer-coarse:w-11",
+        style: { ...h.style, cursor: h.cursor, touchAction: "none" },
+        onPointerDown: (e) => onPointerDown(e, h.mode),
+        onPointerMove,
+        onPointerUp,
+        onPointerCancel: onPointerUp,
+        children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none h-3 w-3 rounded-full border-2 border-primary bg-background" })
+      },
+      h.mode
+    )
+  )) });
+}
+const ACTION = "inline-flex h-7 w-7 items-center justify-center rounded text-foreground hover:bg-muted";
+function ActionBar({
+  annotation: a,
+  controller,
+  rect
+}) {
+  const above = rect.y > 0.05;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "annotation-actions",
+      className: "pointer-events-auto absolute z-20 flex gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md",
+      style: {
+        left: pct(rect.x),
+        top: above ? `calc(${pct(rect.y)} - 36px)` : `calc(${pct(rect.y + rect.h)} + 6px)`
+      },
+      onPointerDown: (e) => e.stopPropagation(),
+      children: [
+        a.kind === "redaction" && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "max-w-44 truncate self-center px-1.5 text-xs text-muted-foreground",
+            title: a.reason,
+            "data-testid": "annotation-action-reason",
+            children: a.reason
+          }
+        ),
+        a.kind === "redaction" && a.status !== "approved" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: ACTION,
+            title: "Approve redaction",
+            "aria-label": "Approve redaction",
+            "data-testid": "annotation-action-approve",
+            onClick: () => controller.setRedactionStatus([a.id], "approved"),
+            children: /* @__PURE__ */ jsx(Check, { size: 15 })
+          }
+        ),
+        a.kind === "redaction" && a.status !== "rejected" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: ACTION,
+            title: "Reject redaction (leave visible)",
+            "aria-label": "Reject redaction",
+            "data-testid": "annotation-action-reject",
+            onClick: () => controller.setRedactionStatus([a.id], "rejected"),
+            children: /* @__PURE__ */ jsx(X, { size: 15 })
+          }
+        ),
+        a.kind === "redaction" && a.status !== "pending" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: ACTION,
+            title: "Back to pending",
+            "aria-label": "Mark pending",
+            "data-testid": "annotation-action-pending",
+            onClick: () => controller.setRedactionStatus([a.id], "pending"),
+            children: /* @__PURE__ */ jsx(RotateCcw, { size: 15 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: ACTION,
+            title: "Delete",
+            "aria-label": "Delete annotation",
+            "data-testid": "annotation-action-delete",
+            onClick: () => controller.remove(a.id),
+            children: /* @__PURE__ */ jsx(Trash2, { size: 15 })
+          }
+        )
+      ]
+    }
+  );
+}
+function CommentPopover({
+  annotation: a,
+  controller,
+  pageHeight,
+  onClose
+}) {
+  const [body, setBody] = useState(a.body);
+  const [reply, setReply] = useState("");
+  const [lift, setLift] = useState(0);
+  const popRef = useRef(null);
+  const unsaved = useRef(null);
+  const readOnly = controller.readOnly;
+  const mine = a.author === controller.author && !readOnly;
+  useEffect(() => setBody(a.body), [a.body]);
+  useLayoutEffect(() => {
+    const el = popRef.current;
+    if (!el) return;
+    const top = a.rect.y * pageHeight;
+    const fit = () => setLift(Math.min(top, Math.max(0, top + el.offsetHeight - pageHeight)));
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [a.rect.y, pageHeight]);
+  const commitBody = () => {
+    if (mine && body !== a.body) controller.update(a.id, { body });
+    unsaved.current = null;
+  };
+  useEffect(
+    () => () => {
+      if (unsaved.current !== null) controller.update(a.id, { body: unsaved.current });
+      unsaved.current = null;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- runs once, when this comment's box unmounts
+    [a.id]
+  );
+  const close = () => {
+    commitBody();
+    if (!readOnly && body.trim() === "" && a.replies.length === 0) controller.remove(a.id);
+    onClose();
+  };
+  const sendReply = () => {
+    const text = reply.trim();
+    if (!text) return;
+    commitBody();
+    controller.reply(a.id, text);
+    setReply("");
+  };
+  const onRight = a.rect.x > 0.6;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: popRef,
+      "data-testid": "annotation-comment-popover",
+      className: "pointer-events-auto absolute z-30 w-64 rounded-lg border border-border bg-background p-3 text-sm shadow-lg",
+      style: {
+        top: pct(a.rect.y),
+        marginTop: -lift,
+        ...onRight ? { right: `calc(${pct(1 - a.rect.x)} + 8px)` } : { left: `calc(${pct(a.rect.x)} + ${COMMENT_ICON_PX + 8}px)` }
+      },
+      onPointerDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+            a.author,
+            " \xB7 ",
+            new Date(a.createdAt).toLocaleString()
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close comment",
+              "data-testid": "annotation-comment-close",
+              className: ACTION,
+              onClick: close,
+              children: /* @__PURE__ */ jsx(X, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            autoFocus: a.body === "",
+            "data-testid": "annotation-comment-body",
+            className: "field-sizing-content max-h-60 min-h-24 w-full resize-y rounded-md border border-input bg-background p-2 text-sm",
+            placeholder: "Add a comment",
+            value: body,
+            readOnly: !mine,
+            onChange: (e) => {
+              setBody(e.target.value);
+              unsaved.current = e.target.value;
+            },
+            onBlur: commitBody,
+            onKeyDown: (e) => {
+              if (e.key === "Escape") close();
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                commitBody();
+                onClose();
+              }
+            }
+          }
+        ),
+        a.replies.length > 0 && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: "mt-2 max-h-40 space-y-2 overflow-y-auto",
+            "data-testid": "annotation-comment-replies",
+            children: a.replies.map((r) => /* @__PURE__ */ jsxs("li", { className: "rounded-md bg-muted p-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: r.author }),
+              /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: r.body })
+            ] }, r.id))
+          }
+        ),
+        !readOnly && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "data-testid": "annotation-comment-reply",
+              className: "h-8 min-w-0 flex-1 rounded-md border border-input bg-background px-2 text-sm",
+              placeholder: "Reply",
+              value: reply,
+              onChange: (e) => setReply(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  sendReply();
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Send reply",
+              "data-testid": "annotation-comment-send",
+              className: ACTION,
+              onClick: sendReply,
+              children: /* @__PURE__ */ jsx(Send, { size: 14 })
+            }
+          )
+        ] }),
+        readOnly ? /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-muted-foreground", "data-testid": "annotation-comment-status", children: a.resolved ? "Resolved" : "Open" }) : /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-testid": "annotation-comment-resolve",
+              className: "text-xs text-primary hover:underline",
+              onClick: () => controller.resolve(a.id, !a.resolved),
+              children: a.resolved ? "Reopen" : "Resolve"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-testid": "annotation-comment-delete",
+              className: "text-xs text-destructive hover:underline",
+              onClick: () => {
+                controller.remove(a.id);
+                onClose();
+              },
+              children: "Delete"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function pngPixelSize(base64) {
+  const raw = atob(base64.slice(0, 64));
+  const at = (i) => (raw.charCodeAt(i) << 24 | raw.charCodeAt(i + 1) << 16 | raw.charCodeAt(i + 2) << 8 | raw.charCodeAt(i + 3)) >>> 0;
+  return { width: at(16), height: at(20) };
+}
+export {
+  AnnotationPageOverlay
+};
+//# sourceMappingURL=AnnotationPageOverlay.js.map