proto-comments 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,934 @@
+"use client";
+
+// src/index.jsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+
+// src/store.js
+import { useSyncExternalStore } from "react";
+
+// src/anchors.js
+var ROOT_SEL = (el) => el.id ? `#${CSS.escape(el.id)}` : el.dataset?.cid ? `[data-cid="${el.dataset.cid}"]` : null;
+var segmenter = typeof Intl !== "undefined" && Intl.Segmenter ? new Intl.Segmenter() : null;
+var cut = (s, n) => {
+  if (s.length <= n || !segmenter) return s.slice(0, n);
+  let out = "";
+  for (const { segment } of segmenter.segment(s)) {
+    if (out.length + segment.length > n) break;
+    out += segment;
+  }
+  return out;
+};
+var textOf = (el) => cut((el.innerText || el.getAttribute?.("aria-label") || "").replace(/\s+/g, " ").trim(), 60);
+function selectorFor(el) {
+  const parts = [];
+  for (let n = el; n && n !== document.body; n = n.parentElement) {
+    const root = ROOT_SEL(n);
+    if (root) {
+      parts.unshift(root);
+      break;
+    }
+    const tag = n.tagName.toLowerCase();
+    const cls = [...n.classList].find((c) => !c.startsWith("pc-"));
+    const same = n.parentElement ? [...n.parentElement.children].filter((c) => c.tagName === n.tagName) : [];
+    parts.unshift(`${tag}${cls ? "." + CSS.escape(cls) : ""}${same.length > 1 ? `:nth-of-type(${same.indexOf(n) + 1})` : ""}`);
+  }
+  return parts.join(" > ");
+}
+var HEADING = 'h1, h2, h3, h4, h5, h6, legend, [class*="title"], label';
+function blockFor(el, extra = "") {
+  const sel = extra ? `${extra}, ${HEADING}` : HEADING;
+  if (el.matches(sel) || el.closest(extra ? `${extra}, h1, h2, h3, h4, h5, h6, legend` : "h1, h2, h3, h4, h5, h6, legend")) return "";
+  const own = textOf(el);
+  const before = (h) => h.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING;
+  for (let n = el.parentElement; n && n !== document.body; n = n.parentElement) {
+    const h = [...n.querySelectorAll(sel)].find((h2) => before(h2) && !h2.closest(".pc-root") && textOf(h2) && textOf(h2) !== own);
+    if (h) return textOf(h);
+    if (n.tagName === "MAIN") break;
+  }
+  return "";
+}
+var placeOf = (a) => [...new Set([a.block, a.text].filter(Boolean))].join(" \u203A ") || `<${a.tag}>`;
+function anchorFor(el, x, y, headingSelector) {
+  const r = el.getBoundingClientRect();
+  return {
+    selector: selectorFor(el),
+    text: textOf(el),
+    block: blockFor(el, headingSelector),
+    tag: el.tagName.toLowerCase(),
+    offset: { x: r.width ? (x - r.left) / r.width : 0, y: r.height ? (y - r.top) / r.height : 0 }
+  };
+}
+function findAnchor(a) {
+  let el = null;
+  try {
+    el = document.querySelector(a.selector);
+  } catch {
+  }
+  if (el && (!a.text || textOf(el) === a.text)) return el;
+  if (a.text) {
+    const same = [...document.querySelectorAll(a.tag)].filter((n) => !n.closest(".pc-root") && textOf(n) === a.text);
+    if (same.length === 1) return same[0];
+  }
+  return el;
+}
+
+// src/store.js
+var state = { list: [], mode: false, historyOpen: false, openId: null, draft: null, flashId: null, bornId: null, filter: "all" };
+var subs = /* @__PURE__ */ new Set();
+var getC = () => state;
+var setC = (patch) => {
+  state = { ...state, ...patch };
+  subs.forEach((f) => f());
+};
+var subscribe = (f) => {
+  subs.add(f);
+  return () => subs.delete(f);
+};
+var useC = (sel) => useSyncExternalStore(subscribe, () => sel(state), () => sel(state));
+var GO_KEY = "proto-comments:go";
+var DEFAULTS = {
+  endpoint: "/api/comments",
+  author: "Reviewer",
+  getScreen: () => ({ key: location.pathname + location.hash, label: location.pathname + location.hash }),
+  getSnapshot: () => ({ url: location.href }),
+  restoreSnapshot: (snap) => {
+    if (!snap?.url || snap.url === location.href) return;
+    try {
+      sessionStorage.setItem(GO_KEY, pendingId);
+    } catch {
+    }
+    location.assign(snap.url);
+    return "navigating";
+  },
+  getContext: () => "",
+  headingSelector: ""
+};
+var cfg = DEFAULTS;
+var pendingId = null;
+var setConfig = (c) => {
+  cfg = c;
+};
+var getConfig = () => cfg;
+async function api(method, body) {
+  const res = await fetch(cfg.endpoint, { method, headers: { "content-type": "application/json" }, body: body && JSON.stringify(body) });
+  if (!res.ok) throw new Error(`proto-comments: ${method} ${cfg.endpoint} \u2192 ${res.status}`);
+  return res.json();
+}
+async function loadComments() {
+  const list = await api("GET");
+  if (JSON.stringify(list) !== JSON.stringify(state.list)) setC({ list });
+}
+async function addComment(anchor, text) {
+  const screen = cfg.getScreen();
+  const c = await api("POST", { screen: screen.key, screenLabel: screen.label, context: cfg.getContext(), snapshot: cfg.getSnapshot(), anchor, text, author: cfg.author });
+  setC({ list: [...state.list, c], draft: null, bornId: c.id });
+  setTimeout(() => {
+    if (state.bornId === c.id) setC({ bornId: null });
+  }, 400);
+}
+async function patchComment(id, patch) {
+  const c = await api("PATCH", { id, author: cfg.author, ...patch });
+  setC({ list: state.list.map((x) => x.id === id ? c : x) });
+}
+async function markComments(ids, queued) {
+  setC({ list: await api("PATCH", { ids, queued }) });
+}
+async function deleteComment(id) {
+  await api("DELETE", { id });
+  setC({ list: state.list.filter((x) => x.id !== id), openId: null });
+}
+function reveal(c) {
+  const smooth = !matchMedia("(prefers-reduced-motion: reduce)").matches;
+  findAnchor(c.anchor)?.scrollIntoView({ block: "center", behavior: smooth ? "smooth" : "auto" });
+  setC({ openId: c.id, flashId: c.id });
+  setTimeout(() => setC({ flashId: null }), 1600);
+}
+async function goToComment(c) {
+  const onScreen = cfg.getScreen().key === c.screen && findAnchor(c.anchor);
+  setC({ openId: null, historyOpen: false });
+  if (onScreen) return reveal(c);
+  pendingId = c.id;
+  if (await cfg.restoreSnapshot(c.snapshot, c) === "navigating") return;
+  setTimeout(() => reveal(c), 450);
+}
+function resumePendingGo() {
+  let id = null;
+  try {
+    id = sessionStorage.getItem(GO_KEY);
+    sessionStorage.removeItem(GO_KEY);
+  } catch {
+  }
+  const c = id && state.list.find((x) => x.id === id);
+  if (c) setTimeout(() => reveal(c), 450);
+}
+
+// src/ui.jsx
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+// src/icons.jsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PATHS = {
+  comment: /* @__PURE__ */ jsx("path", { d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }),
+  history: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7v5l4 2" })
+  ] }),
+  x: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }),
+  check: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }),
+  reopen: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
+  ] }),
+  agent: /* @__PURE__ */ jsx("path", { d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" }),
+  trash: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 11v6M14 11v6M3 6h18" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+  ] })
+};
+function Icon({ name }) {
+  return /* @__PURE__ */ jsx("svg", { className: "pc-i", viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: PATHS[name] });
+}
+function Grip() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: [5, 12, 19].map((y) => [9, 15].map((x) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: "1.75" }, `${x}${y}`))) });
+}
+
+// src/ui.jsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var nameOf = (a) => a.text || a.block || `<${a.tag}>`;
+var when = (iso) => {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const year = d.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? void 0 : "numeric";
+  return d.toLocaleString("en-US", { year, month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+};
+var byline = (author, iso) => [author, when(iso)].filter(Boolean).join(" \xB7 ");
+function usePop(x, y, lost) {
+  const ref = useRef(null);
+  const [h, setH] = useState(0);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    setH(el.offsetHeight);
+    const ro = new ResizeObserver(() => setH(el.offsetHeight));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const w = Math.min(320, window.innerWidth - 16);
+  const left = Math.max(8, Math.min(x + 18, window.innerWidth - w - 8));
+  const top = Math.max(8, Math.min(y - 8, window.innerHeight - h - 8));
+  return { ref, style: { left, top, transformOrigin: lost ? "center top" : `${x - left}px ${y - top}px` } };
+}
+var reducedMotion = () => matchMedia("(prefers-reduced-motion: reduce)").matches;
+var MAX_TEXT = 5e3;
+function Field({ placeholder, submit, onCancel, label, bare }) {
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const go = async () => {
+    if (!text.trim() || busy) return;
+    setBusy(true);
+    try {
+      await submit(text.trim());
+      setText("");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        className: "pc-input",
+        autoFocus: true,
+        rows: 3,
+        maxLength: MAX_TEXT,
+        placeholder,
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            go();
+          }
+        }
+      }
+    ),
+    !bare && /* @__PURE__ */ jsxs2("div", { className: "pc-actions", children: [
+      onCancel && /* @__PURE__ */ jsx2("button", { className: "pc-btn", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx2("button", { className: "pc-btn primary", disabled: !text.trim() || busy, onClick: go, children: label })
+    ] })
+  ] });
+}
+function Draft({ draft }) {
+  const pop = usePop(draft.x, draft.y);
+  return /* @__PURE__ */ jsxs2("div", { className: "pc-pop", ref: pop.ref, style: pop.style, children: [
+    /* @__PURE__ */ jsx2("div", { className: "pc-head", children: /* @__PURE__ */ jsx2("b", { "data-tip": placeOf(draft.anchor), children: nameOf(draft.anchor) }) }),
+    /* @__PURE__ */ jsx2("div", { className: "pc-pane", children: /* @__PURE__ */ jsx2(Field, { placeholder: "Leave a comment", label: "Comment", submit: (text) => addComment(draft.anchor, text), onCancel: () => setC({ draft: null }) }) })
+  ] });
+}
+var resolvedOf = (c) => ({ status: c.status === "resolved" ? "open" : "resolved" });
+var toggleResolved = (c) => patchComment(c.id, resolvedOf(c));
+var toggleQueued = (c) => markComments([c.id], !c.queued);
+function Thread({ c, x, y, lost }) {
+  const resolved = c.status === "resolved";
+  const pop = usePop(x, y, lost);
+  const msgs = useRef(null);
+  useLayoutEffect(() => {
+    msgs.current.scrollTop = msgs.current.scrollHeight;
+  }, [c.replies.length]);
+  return /* @__PURE__ */ jsxs2("div", { className: "pc-pop", ref: pop.ref, style: pop.style, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "pc-head", children: [
+      /* @__PURE__ */ jsx2("b", { "data-tip": placeOf(c.anchor), children: nameOf(c.anchor) }),
+      c.queued && /* @__PURE__ */ jsx2("i", { className: "pc-tag", children: "For Agent" }),
+      /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: () => deleteComment(c.id), "aria-label": "Delete comment", "data-tip": "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) }),
+      /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => setC({ openId: null }), "aria-label": "Close", "data-tip": "Close", children: /* @__PURE__ */ jsx2(Icon, { name: "x" }) })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "pc-pane msgs", ref: msgs, children: [
+      lost && /* @__PURE__ */ jsx2("div", { className: "pc-lost", children: "The element isn't on this screen any more." }),
+      /* @__PURE__ */ jsxs2("div", { className: "pc-msg", children: [
+        /* @__PURE__ */ jsx2("div", { className: "pc-meta", children: byline(c.author, c.createdAt) }),
+        c.text
+      ] }),
+      c.replies.map((r, i) => /* @__PURE__ */ jsxs2("div", { className: "pc-msg", children: [
+        /* @__PURE__ */ jsx2("div", { className: "pc-meta", children: byline(r.author, r.createdAt) }),
+        r.text
+      ] }, i)),
+      resolved && c.resolvedBy && /* @__PURE__ */ jsx2("div", { className: "pc-meta", children: ["Resolved by " + c.resolvedBy, when(c.resolvedAt)].filter(Boolean).join(" \xB7 ") })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "pc-pane", children: /* @__PURE__ */ jsx2(Field, { bare: true, placeholder: "Add a comment", submit: (text) => patchComment(c.id, { reply: { author: getConfig().author, text } }) }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "pc-actions foot", children: [
+      /* @__PURE__ */ jsx2("button", { className: "pc-btn sm tertiary", onClick: () => toggleResolved(c), children: resolved ? "Reopen" : "Resolve" }),
+      !resolved && /* @__PURE__ */ jsx2("button", { className: "pc-btn sm primary", onClick: () => toggleQueued(c), children: c.queued ? "Unmark" : "Mark for Agent" })
+    ] })
+  ] });
+}
+function Pin({ c, x, y }) {
+  const open = useC((s) => s.openId === c.id);
+  const flash = useC((s) => s.flashId === c.id);
+  const born = useC((s) => s.bornId === c.id);
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      className: `pc-pin${c.status === "resolved" ? " done" : ""}${c.queued ? " queued" : ""}${open ? " on" : ""}${flash ? " flash" : ""}${born ? " born" : ""}`,
+      style: { left: x, top: y },
+      onClick: () => setC({ openId: open ? null : c.id, draft: null }),
+      "aria-label": c.status === "resolved" ? "Resolved comment" : `Comment ${c.n}`,
+      children: c.status === "resolved" ? /* @__PURE__ */ jsx2(Icon, { name: "check" }) : c.n
+    }
+  );
+}
+var FILTERS = [["all", "All"], ["open", "Open"], ["queued", "For Agent"], ["resolved", "Resolved"]];
+var matches = (c, f) => f === "all" || (f === "queued" ? c.queued && c.status === "open" : c.status === f);
+var groupBy = (items, key) => items.reduce((m, it) => {
+  var _a;
+  (m[_a = key(it)] || (m[_a] = [])).push(it);
+  return m;
+}, {});
+function History() {
+  const isOpen = useC((s) => s.historyOpen);
+  const list = useC((s) => s.list);
+  const filter = useC((s) => s.filter);
+  const shown = list.filter((c) => matches(c, filter)).sort((a, b) => (a.status === "resolved") - (b.status === "resolved"));
+  const groups = Object.entries(groupBy(shown, (c) => c.screenLabel));
+  const count = (f) => list.filter((c) => matches(c, f)).length;
+  const [picked, setPicked] = useState([]);
+  const selectable = shown.map((c) => c.id);
+  const sel = picked.filter((id) => selectable.includes(id));
+  const allPicked = selectable.length > 0 && sel.length === selectable.length;
+  const toggle = (id) => setPicked((p) => p.includes(id) ? p.filter((x) => x !== id) : [...p, id]);
+  useEffect(() => {
+    if (!isOpen) setPicked([]);
+  }, [isOpen]);
+  const [leaving, setLeaving] = useState([]);
+  const leave = async (items, next, action) => {
+    const ids = items.filter((c) => !next || !matches({ ...c, ...next(c) }, filter)).map((c) => c.id);
+    if (ids.length) {
+      setLeaving((l) => [...l, ...ids]);
+      if (!reducedMotion()) await new Promise((res) => setTimeout(res, 150));
+    }
+    try {
+      await action();
+    } finally {
+      setLeaving((l) => l.filter((id) => !ids.includes(id)));
+    }
+  };
+  const picks = shown.filter((c) => sel.includes(c.id));
+  const open = picks.filter((c) => c.status === "open");
+  const allResolved = picks.length > 0 && !open.length;
+  const allQueued = open.length > 0 && open.every((c) => c.queued);
+  const done = () => setPicked([]);
+  const setStatus = (status) => leave(picks, () => ({ status }), async () => {
+    for (const c of picks) if (c.status !== status) await patchComment(c.id, { status });
+    done();
+  });
+  const mark = () => leave(open, () => ({ queued: !allQueued }), () => markComments(open.map((c) => c.id), !allQueued).then(done));
+  const remove = () => leave(picks, null, async () => {
+    for (const c of picks) await deleteComment(c.id);
+    done();
+  });
+  return /* @__PURE__ */ jsxs2("aside", { className: "pc-history", "data-open": isOpen || void 0, "aria-label": "Comments", children: [
+    /* @__PURE__ */ jsxs2("header", { children: [
+      /* @__PURE__ */ jsx2("b", { children: "Comments" }),
+      /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => setC({ historyOpen: false }), "aria-label": "Close", "data-tip": "Close", children: /* @__PURE__ */ jsx2(Icon, { name: "x" }) })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "pc-tabs", role: "tablist", children: FILTERS.map(([f, l]) => /* @__PURE__ */ jsxs2("button", { className: "pc-tab", role: "tab", "aria-selected": filter === f, onClick: () => setC({ filter: f }), children: [
+      l,
+      /* @__PURE__ */ jsx2("span", { children: count(f) })
+    ] }, f)) }),
+    selectable.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "pc-selbar", children: [
+      /* @__PURE__ */ jsxs2("label", { className: "pc-check", children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: allPicked, onChange: () => setPicked(allPicked ? [] : selectable) }),
+        sel.length ? `${sel.length} selected` : "Select all"
+      ] }),
+      sel.length > 0 && /* @__PURE__ */ jsxs2("span", { className: "pc-bulk", children: [
+        /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => setStatus(allResolved ? "open" : "resolved"), "aria-label": allResolved ? "Reopen" : "Resolve", "data-tip": allResolved ? "Reopen" : "Resolve", children: /* @__PURE__ */ jsx2(Icon, { name: allResolved ? "reopen" : "check" }) }),
+        open.length > 0 && /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-agent", "aria-pressed": allQueued, onClick: mark, "aria-label": allQueued ? "Unmark" : "Mark for Agent", "data-tip": allQueued ? "Unmark" : "Mark for Agent", children: /* @__PURE__ */ jsx2(Icon, { name: "agent" }) }),
+        /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: remove, "aria-label": "Delete selected", "data-tip": "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "pc-groups", children: [
+      !shown.length && /* @__PURE__ */ jsx2("p", { className: "pc-empty", children: "No comments here. Press C and click an element to leave one." }),
+      groups.map(([label, items]) => /* @__PURE__ */ jsx2("section", { children: items.map((c) => /* @__PURE__ */ jsxs2("div", { className: `pc-row${c.status === "resolved" ? " done" : ""}${leaving.includes(c.id) ? " leaving" : ""}`, children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", className: "pc-pick", checked: sel.includes(c.id), onChange: () => toggle(c.id), "aria-label": `Select comment ${c.n}` }),
+        /* @__PURE__ */ jsxs2("button", { className: "pc-item", onClick: () => goToComment(c), children: [
+          /* @__PURE__ */ jsx2("span", { className: `pc-n${c.queued ? " queued" : ""}`, children: c.status === "resolved" ? /* @__PURE__ */ jsx2(Icon, { name: "check" }) : c.n }),
+          /* @__PURE__ */ jsxs2("span", { className: "pc-body", children: [
+            /* @__PURE__ */ jsx2("span", { className: "pc-text", children: c.text }),
+            /* @__PURE__ */ jsxs2("span", { className: "pc-meta", "data-tip": placeOf(c.anchor), children: [
+              c.queued && /* @__PURE__ */ jsx2("i", { className: "pc-tag", children: "For Agent" }),
+              /* @__PURE__ */ jsx2("span", { children: [nameOf(c.anchor), c.context, when(c.createdAt), c.replies.length && `${c.replies.length + 1} comments`].filter(Boolean).join(" \xB7 ") })
+            ] }),
+            c.status === "resolved" && c.resolvedBy && /* @__PURE__ */ jsxs2("span", { className: "pc-meta", children: [
+              "Resolved by ",
+              c.resolvedBy
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { className: "pc-row-actions", children: [
+          /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => leave([c], resolvedOf, () => toggleResolved(c)), "aria-label": c.status === "resolved" ? "Reopen" : "Resolve", "data-tip": c.status === "resolved" ? "Reopen" : "Resolve", children: /* @__PURE__ */ jsx2(Icon, { name: c.status === "resolved" ? "reopen" : "check" }) }),
+          c.status === "open" && /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-agent", "aria-pressed": !!c.queued, onClick: () => leave([c], (x) => ({ queued: !x.queued }), () => toggleQueued(c)), "aria-label": c.queued ? "Unmark" : "Mark for Agent", "data-tip": c.queued ? "Unmark" : "Mark for Agent", children: /* @__PURE__ */ jsx2(Icon, { name: "agent" }) }),
+          /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: () => leave([c], null, () => deleteComment(c.id)), "aria-label": "Delete comment", "data-tip": "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) })
+        ] })
+      ] }, c.id)) }, label))
+    ] })
+  ] });
+}
+var POS_KEY = "proto-comments:toolbar";
+function Toolbar() {
+  const mode = useC((c) => c.mode);
+  const historyOpen = useC((c) => c.historyOpen);
+  const open = useC((c) => c.list.filter((x) => x.status === "open").length);
+  const [pos, setPos] = useState(null);
+  const drag = useRef(null);
+  useEffect(() => {
+    try {
+      const p = JSON.parse(localStorage.getItem(POS_KEY));
+      if (p) setPos(p);
+    } catch {
+    }
+  }, []);
+  const onDown = (e) => {
+    const r = e.currentTarget.parentElement.getBoundingClientRect();
+    drag.current = { dx: e.clientX - r.left, dy: e.clientY - r.top, w: r.width, h: r.height };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onMove = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    setPos({
+      x: Math.max(8, Math.min(e.clientX - d.dx, window.innerWidth - d.w - 8)),
+      y: Math.max(8, Math.min(e.clientY - d.dy, window.innerHeight - d.h - 8))
+    });
+  };
+  const onUp = () => {
+    drag.current = null;
+    try {
+      localStorage.setItem(POS_KEY, JSON.stringify(pos));
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "pc-bar", "data-tips": pos && pos.y < 48 ? "below" : void 0, style: pos ? { left: pos.x, top: pos.y, bottom: "auto", transform: "none" } : void 0, role: "toolbar", "aria-label": "Comments", children: [
+    /* @__PURE__ */ jsx2("span", { className: "pc-grip", onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, "aria-hidden": "true", children: /* @__PURE__ */ jsx2(Grip, {}) }),
+    /* @__PURE__ */ jsxs2("button", { "aria-pressed": mode, onClick: () => setC({ mode: !getC().mode, draft: null, openId: null }), "aria-label": mode ? "Stop commenting" : "Comment", "aria-keyshortcuts": mode ? "V" : "C", children: [
+      /* @__PURE__ */ jsx2(Icon, { name: "comment" }),
+      /* @__PURE__ */ jsxs2("span", { className: "pc-tip", "aria-hidden": "true", children: [
+        mode ? "Stop commenting" : "Comment",
+        /* @__PURE__ */ jsx2("kbd", { children: mode ? "V" : "C" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("button", { "aria-pressed": historyOpen, onClick: () => setC({ historyOpen: !historyOpen }), "aria-label": open ? `History, ${open} open` : "History", "aria-keyshortcuts": "H", children: [
+      /* @__PURE__ */ jsx2(Icon, { name: "history" }),
+      open > 0 && /* @__PURE__ */ jsx2("i", { className: "pc-dot" }),
+      /* @__PURE__ */ jsxs2("span", { className: "pc-tip", "aria-hidden": "true", children: [
+        open ? `History \xB7 ${open} open` : "History",
+        /* @__PURE__ */ jsx2("kbd", { children: "H" })
+      ] })
+    ] })
+  ] });
+}
+var TIP_DELAY = 300;
+function Tooltip() {
+  const [tip, setTip] = useState(null);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!matchMedia("(hover: hover)").matches) return;
+    let el = null, timer, hiddenAt = 0;
+    const hide = () => {
+      clearTimeout(timer);
+      if (el) hiddenAt = Date.now();
+      el = null;
+      setTip(null);
+    };
+    const over = (e) => {
+      const next = e.target.closest?.(".pc-root [data-tip]");
+      if (next === el) return;
+      if (!next) return hide();
+      const warm = el || Date.now() - hiddenAt < TIP_DELAY;
+      clearTimeout(timer);
+      el = next;
+      timer = setTimeout(() => setTip({ text: next.dataset.tip, rect: next.getBoundingClientRect() }), warm ? 0 : TIP_DELAY);
+    };
+    document.addEventListener("pointerover", over);
+    document.addEventListener("pointerdown", hide, true);
+    window.addEventListener("scroll", hide, true);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("pointerover", over);
+      document.removeEventListener("pointerdown", hide, true);
+      window.removeEventListener("scroll", hide, true);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!tip || !node) return;
+    const { rect } = tip;
+    const half = node.offsetWidth / 2;
+    const below = rect.top - node.offsetHeight - 10 < 8;
+    node.style.left = `${Math.max(8 + half, Math.min(rect.left + rect.width / 2, window.innerWidth - 8 - half))}px`;
+    if (below) {
+      node.dataset.side = "below";
+      node.style.top = `${rect.bottom + 10}px`;
+    } else node.style.bottom = `${window.innerHeight - rect.top + 10}px`;
+    node.getBoundingClientRect();
+    node.setAttribute("data-open", "");
+  }, [tip]);
+  return tip && /* @__PURE__ */ jsx2("span", { ref, className: "pc-tip float", role: "tooltip", children: tip.text }, tip.text + tip.rect.x + tip.rect.y);
+}
+
+// src/styles.js
+var styles_default = `
+.pc-root{
+  /* surfaces */
+  --pc-popover:#FFFFFF;                 /* component-on-sunken: Popover */
+  --pc-container:#FFFFFF;               /* container: Drawer */
+  --pc-field:#FFFFFF;                   /* component-on-container-strong: Textarea, secondary Button, active Tab */
+  --pc-field-hover:#F9F9F9;
+  --pc-component:#0000000f;             /* component: Tabs track, Badge, Kbd */
+  --pc-hover:#0000000f;                 /* transparent-hover */
+  --pc-active:#0000001f;
+  --pc-row-hover:#F0F0F0;               /* --pc-hover over the container, as a solid */
+  --pc-dark:#202020;                    /* standout: toolbar, Tooltip */
+  --pc-inverted:#000000f2; --pc-inverted-hover:#000000cc; --pc-inverted-active:#000000b3; --pc-on-inverted:#FFFFFF;
+  /* text */
+  --pc-text-strong:#000000df;           /* primary-foreground */
+  --pc-text:#0000009b;                  /* secondary-foreground */
+  --pc-faint:#00000072;                 /* tertiary-foreground */
+  --pc-disabled:#00000044;
+  /* lines */
+  --pc-border:#0000000f;                /* border-default */
+  --pc-border-strong:#00000026;
+  --pc-tab-border:#D9D9D9;              /* gray-6: Tabs indicator */
+  /* accents */
+  --pc-primary:#0090FF; --pc-primary-hover:#0588F0; --pc-primary-soft:#008FF519; --pc-primary-text:#0D74CE;
+  --pc-focus:#0080FF8c;                 /* brand-border-focus */
+  --pc-danger:#C12400cc; --pc-danger-solid:#E54D2E; --pc-danger-solid-hover:#DD4425; --pc-danger-solid-active:#D13415;
+  --pc-danger-soft:#FF200008; --pc-danger-soft-hover:#F52B0018; --pc-danger-soft-active:#FF35003a;
+  --pc-warn:#CC4E00; --pc-warn-soft:#FF9C0026;
+  --pc-agent:#6E56CF; --pc-agent-soft:#3201FF1a; --pc-agent-text:#6550B9;
+  --pc-done:#BBBBBB;
+  /* shadows: s-default, s-extra-large */
+  --pc-shadow-sm:0 0 0 .5px #0000000f, 0 1px 1px -1px #0000001a, 0 1px 2px 0 #0000000d;
+  --pc-shadow:0 0 0 .5px #0000000f, 0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026;
+  --pc-z:2147483000;
+  font:400 13px/20px InterVariable, Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-feature-settings:"ss03";
+  color:var(--pc-text-strong); -webkit-font-smoothing:antialiased;
+}
+:root.dark .pc-root, .dark .pc-root, .pc-root.dark{
+  --pc-popover:#2A2A2A; --pc-container:#111111; --pc-field:#ffffff12; --pc-field-hover:#ffffff1b;
+  --pc-component:#ffffff12; --pc-hover:#ffffff1b; --pc-active:#ffffff22; --pc-row-hover:#282828;
+  --pc-dark:#222222;
+  --pc-inverted:#fffffff2; --pc-inverted-hover:#ffffffcc; --pc-inverted-active:#ffffffb3; --pc-on-inverted:#000000;
+  --pc-text-strong:#ffffffed; --pc-text:#ffffffaf; --pc-faint:#ffffff64; --pc-disabled:#ffffff55;
+  --pc-border:#ffffff12; --pc-border-strong:#ffffff2c; --pc-tab-border:#484848;
+  --pc-primary:#0090FF; --pc-primary-hover:#3B9EFF; --pc-primary-soft:#0077FF3a; --pc-primary-text:#70B8FF; --pc-focus:#3B94FFf7;
+  --pc-danger:#FF7A57d9; --pc-danger-solid:#E54D2E; --pc-danger-solid-hover:#EC6142; --pc-danger-solid-active:#FF977D;
+  --pc-danger-soft:#FF60390d; --pc-danger-soft-hover:#FF482D26; --pc-danger-soft-active:#FF6F4F4a;
+  --pc-warn:#FFA057; --pc-warn-soft:#FF7C0021;
+  --pc-agent-soft:#7A5BFF26; --pc-agent-text:#BAA7FF; --pc-done:#606060;
+  --pc-shadow-sm:0 0 0 .5px #ffffff12 inset;
+  --pc-shadow:0 0 0 .5px #ffffff12 inset, 0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026;
+}
+.pc-root *, .pc-root *::before, .pc-root *::after{ box-sizing:border-box; }
+/* :where() keeps these resets weaker than the component classes below */
+:where(.pc-root) button{ font:inherit; color:inherit; cursor:pointer; }
+:where(.pc-root) :is(textarea, input){ font:inherit; color:inherit; }
+.pc-root :focus-visible{ outline:2px solid var(--pc-focus); outline-offset:1px; }
+.pc-i{ flex:none; }
+
+html.pc-mode, html.pc-mode *{ cursor:crosshair !important; }
+html.pc-mode .pc-root, html.pc-mode .pc-root *{ cursor:auto !important; }
+html.pc-mode .pc-root button, html.pc-mode .pc-root label{ cursor:pointer !important; }
+html.pc-mode .pc-grip{ cursor:grab !important; }
+
+/* Button (int-btn). Default = secondary, md: 28px, 10px padding, 6px radius, 13px medium. */
+.pc-btn{ --bg:var(--pc-field); --bg-hover:var(--pc-field-hover); --bg-active:var(--bg-hover); --fg:var(--pc-text-strong); --fg-hover:var(--fg);
+  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:28px; padding:0 10px; border:0; border-radius:6px;
+  background:var(--bg); color:var(--fg); box-shadow:var(--pc-shadow-sm); font-size:13px; line-height:20px; font-weight:500; white-space:nowrap; user-select:none;
+  transition:color .15s cubic-bezier(0,0,.2,1), background-color .15s cubic-bezier(0,0,.2,1), transform .15s cubic-bezier(0,0,.2,1); }
+@media (hover:hover){ .pc-btn:enabled:hover{ background:var(--bg-hover); color:var(--fg-hover); } }
+.pc-btn:enabled:active{ background:var(--bg-active); transform:scale(.97); }
+.pc-btn.sm{ height:24px; padding:0 8px; gap:4px; }
+.pc-btn.primary{ --bg:var(--pc-inverted); --bg-hover:var(--pc-inverted-hover); --bg-active:var(--pc-inverted-active); --fg:var(--pc-on-inverted); box-shadow:none; }
+.pc-btn.tertiary{ --bg:var(--pc-component); --bg-hover:var(--pc-active); box-shadow:none; }
+.pc-btn.ghost{ --bg:transparent; --bg-hover:var(--pc-hover); --fg:var(--pc-text); --fg-hover:var(--pc-text-strong); box-shadow:none; }
+.pc-btn:disabled{ background:var(--pc-component); color:var(--pc-disabled); box-shadow:none; cursor:not-allowed; }
+/* icon-only transparent, sm: 24px */
+.pc-ibtn{ width:24px; height:24px; flex:none; display:inline-grid; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:var(--pc-text); transition:background-color .15s, color .15s, transform .15s cubic-bezier(0,0,.2,1); }
+@media (hover:hover){ .pc-ibtn:hover{ background:var(--pc-hover); color:var(--pc-text-strong); } }
+.pc-ibtn:active{ transform:scale(.97); }
+@media (hover:hover){ .pc-trash:hover{ color:var(--pc-danger); background:var(--pc-danger-soft-hover); } }
+
+/* Badge: 20px, 6px padding, 12px, 4px radius */
+.pc-tag{ display:inline-flex; align-items:center; flex:none; height:20px; padding:0 6px; margin-right:6px; border-radius:4px; background:var(--pc-agent-soft); color:var(--pc-agent-text); font-style:normal; font-size:12px; line-height:16px; font-weight:400; user-select:none; }
+
+/* Tabs: gray track, white indicator with a gray-6 border */
+.pc-tabs{ display:inline-flex; align-self:flex-start; padding:0; border-radius:6px; background:var(--pc-component); font-weight:500; }
+.pc-tab{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--pc-text); white-space:nowrap; transition:color .2s cubic-bezier(.4,0,.2,1); }
+.pc-tab span{ color:var(--pc-faint); font-variant-numeric:tabular-nums; }
+@media (hover:hover){ .pc-tab:hover{ color:var(--pc-text-strong); } }
+.pc-tab[aria-selected="true"]{ background:var(--pc-field); border-color:var(--pc-tab-border); color:var(--pc-text-strong); }
+
+/* Kbd: 16px, 0.5px border, 4px radius, 11px medium uppercase */
+.pc-root kbd{ display:inline-flex; align-items:center; justify-content:center; flex:none; height:16px; min-width:16px; padding:0 3px; border:.5px solid var(--pc-border); border-radius:4px; background:var(--pc-component); color:var(--pc-text); font-family:inherit; font-size:11px; line-height:16px; font-weight:500; font-feature-settings:"ss02"; text-transform:uppercase; }
+
+/* Checkbox: 14px, 1.5px border, 4px radius, brand fill when checked */
+.pc-root input[type=checkbox]{ appearance:none; -webkit-appearance:none; position:relative; width:14px; height:14px; margin:0; flex:none; border:1.5px solid var(--pc-border-strong); border-radius:4px; background:transparent; background-size:60%; cursor:pointer; transition:background-color .2s cubic-bezier(.23,1,.32,1), background-size .15s cubic-bezier(.23,1,.32,1), transform .15s cubic-bezier(.23,1,.32,1); }
+@media (hover:hover){ .pc-root input[type=checkbox]:hover{ background-color:var(--pc-hover); } }
+.pc-root input[type=checkbox]:active{ transform:scale(.97); }
+.pc-root input[type=checkbox]:checked{ border-color:transparent; background:var(--pc-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
+@media (hover:hover){ .pc-root input[type=checkbox]:checked:hover{ background-color:var(--pc-primary-hover); } }
+
+/* Textarea: white field with s-default, 8px radius; blue ring on focus */
+.pc-input{ display:block; width:100%; min-height:80px; resize:none; field-sizing:content; max-height:200px; border:0; border-radius:8px; padding:4px 8px; background:var(--pc-field); color:var(--pc-text-strong); caret-color:var(--pc-text); box-shadow:var(--pc-shadow-sm); font-size:13px; line-height:20px; transition:color .15s, background-color .15s, box-shadow .15s; }
+.pc-input::placeholder{ color:var(--pc-faint); }
+@media (hover:hover){ .pc-input:hover{ background:var(--pc-field-hover); } }
+.pc-input:focus{ outline:none; background:var(--pc-field); box-shadow:0 0 0 1px var(--pc-focus), inset 0 0 0 .5px var(--pc-focus); }
+
+/* toolbar: standout surface, dark like the Tooltip */
+.pc-bar{ position:fixed; z-index:calc(var(--pc-z) + 4); left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:2px; padding:4px; border-radius:10px; background:var(--pc-dark); color:#ffffffaf; box-shadow:0 0 0 .5px #ffffff12 inset, 0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026; user-select:none; }
+.pc-bar button{ position:relative; display:inline-grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; transition:background-color .15s, color .15s, transform .15s cubic-bezier(0,0,.2,1); }
+@media (hover:hover){ .pc-bar button:hover{ background:#ffffff1b; color:#ffffffed; } }
+.pc-bar button:active{ transform:scale(.97); }
+.pc-bar button[aria-pressed="true"]{ background:#ffffff22; color:#ffffffed; box-shadow:0 0 0 .5px #ffffff12 inset; }
+.pc-bar kbd{ border-color:#ffffff12; background:#ffffff12; color:#ffffffaf; }
+/* open comments: a dot on the History icon */
+.pc-dot{ position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--pc-primary); box-shadow:0 0 0 1.5px var(--pc-dark); }
+/* Tooltip (DS): standout surface, 8px radius, 12px medium; shows after a short delay, hides at once */
+.pc-tip{ position:absolute; left:50%; bottom:calc(100% + 10px); display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:var(--pc-dark); color:#ffffffed; box-shadow:0 0 0 .5px #ffffff12 inset; font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; pointer-events:none; opacity:0; transform:translate(-50%, 4px) scale(.95); transform-origin:50% 100%; transition:opacity .15s, transform .15s cubic-bezier(.23,1,.32,1); }
+.pc-bar[data-tips="below"] .pc-tip{ bottom:auto; top:calc(100% + 10px); transform:translate(-50%, -4px) scale(.95); transform-origin:50% 0; }
+.pc-bar button:hover .pc-tip, .pc-bar button:focus-visible .pc-tip{ opacity:1; transform:translate(-50%, 0) scale(1); transition-duration:.2s; transition-delay:.3s; }
+@media (hover:none){ .pc-tip{ display:none; } }
+/* The same Tooltip for [data-tip] controls: <Tooltip> places it by the control, so a scrolling panel can't clip it */
+.pc-tip.float{ position:fixed; z-index:calc(var(--pc-z) + 5); bottom:auto; }
+.pc-tip.float[data-side="below"]{ transform:translate(-50%, -4px) scale(.95); transform-origin:50% 0; }
+.pc-tip.float[data-open]{ opacity:1; transform:translate(-50%, 0) scale(1); transition-duration:.2s; }
+.pc-grip{ display:grid; place-items:center; width:20px; height:28px; opacity:.5; cursor:grab; touch-action:none; transition:opacity .15s; }
+@media (hover:hover){ .pc-grip:hover{ opacity:1; } }
+/* Tooltip */
+.pc-hint{ position:fixed; z-index:calc(var(--pc-z) + 1); left:50%; bottom:calc(60px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); padding:6px 10px; border-radius:8px; background:var(--pc-dark); color:#ffffffed; box-shadow:0 0 0 .5px #ffffff12 inset; font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; animation:pc-hint-in .15s cubic-bezier(0,0,.2,1); }
+/* translate (the property) composes with the centering transform above */
+@keyframes pc-hint-in{ from{ opacity:0; translate:0 4px; } }
+
+/* pins */
+.pc-outline{ position:fixed; z-index:var(--pc-z); pointer-events:none; outline:1.5px solid var(--pc-primary); outline-offset:1px; border-radius:4px; background:var(--pc-primary-soft); }
+.pc-outline.flash{ animation:pc-flash 1.6s cubic-bezier(0,0,.2,1) forwards; }
+@keyframes pc-flash{ 0%,60%{ opacity:1 } 100%{ opacity:0 } }
+.pc-pin{ position:fixed; z-index:calc(var(--pc-z) + 1); transform:translate(-2px,-100%); min-width:24px; height:24px; padding:0 7px; border:2px solid #fff; border-radius:12px 12px 12px 2px; background:var(--pc-primary); color:#fff !important; font-size:12px !important; font-weight:500; font-variant-numeric:tabular-nums; box-shadow:var(--pc-shadow); transform-origin:left bottom; }
+.pc-pin.on{ background:#202020; z-index:calc(var(--pc-z) + 2); }
+.pc-pin.queued, .pc-n.queued{ background:var(--pc-agent); }
+.pc-pin.done{ background:var(--pc-done); padding:0; width:24px; display:grid; place-items:center; }
+.pc-pin .pc-i, .pc-n .pc-i{ width:12px; height:12px; }
+.pc-pin.flash{ animation:pc-pin .5s cubic-bezier(.23,1,.32,1) 2; }
+@keyframes pc-pin{ 50%{ transform:translate(-2px,-100%) scale(1.15) } }
+/* a pin that was just left: grows out of its tail, where the draft popover was */
+.pc-pin.born{ animation:pc-pin-in .2s cubic-bezier(.32,.72,0,1); }
+@keyframes pc-pin-in{ from{ opacity:0; transform:translate(-2px,-100%) scale(.8) } }
+
+/* Popover: 10px radius, s-extra-large, 0.5px dividers */
+.pc-pop{ position:fixed; z-index:calc(var(--pc-z) + 5); width:min(320px, calc(100vw - 16px)); padding:0; display:flex; flex-direction:column; background:var(--pc-popover); color:var(--pc-text-strong); border-radius:10px; box-shadow:var(--pc-shadow); max-height:calc(100vh - 16px); overflow:hidden; animation:pc-pop-in .18s cubic-bezier(.32,.72,0,1); }
+/* transform-origin is set inline, at the pin or click point */
+@keyframes pc-pop-in{ from{ opacity:0; transform:scale(.97) } }
+.pc-head{ flex:none; display:flex; align-items:center; gap:2px; min-height:40px; padding:8px 8px 8px 12px; border-bottom:.5px solid var(--pc-border); }
+.pc-head b{ flex:1; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pc-head .pc-tag{ margin:0 6px; }
+/* header, reply field and actions stay put; only the messages scroll */
+.pc-pane{ flex:none; display:flex; flex-direction:column; gap:10px; padding:12px; }
+.pc-pane.msgs{ flex:0 1 auto; min-height:48px; overflow:auto; overscroll-behavior:contain; padding-bottom:0; }
+.pc-pane.msgs + .pc-pane{ padding-top:10px; }
+.pc-actions{ display:flex; justify-content:flex-end; gap:8px; }
+.pc-actions.foot{ flex:none; padding:6px 8px; border-top:.5px solid var(--pc-border); }
+.pc-msg{ white-space:pre-wrap; overflow-wrap:anywhere; }
+.pc-meta{ display:block; font-size:12px; line-height:16px; color:var(--pc-faint); margin-bottom:2px; }
+.pc-lost{ font-size:12px; line-height:16px; color:var(--pc-warn); background:var(--pc-warn-soft); border-radius:6px; padding:6px 8px; }
+
+/* History: right Drawer */
+.pc-history{ position:fixed; z-index:calc(var(--pc-z) + 3); top:0; right:0; bottom:0; width:384px; max-width:100%; background:var(--pc-container); color:var(--pc-text-strong); border-left:.5px solid var(--pc-border); box-shadow:var(--pc-shadow); display:flex; flex-direction:column;
+  transform:translateX(100%); visibility:hidden; transition:transform .18s cubic-bezier(.32,.72,0,1), visibility 0s .18s; }
+/* a transition, not keyframes: toggling History mid-slide reverses it smoothly. Closing is faster than opening */
+.pc-history[data-open]{ transform:none; visibility:visible; transition:transform .25s cubic-bezier(.32,.72,0,1); }
+.pc-history header{ display:flex; align-items:center; gap:6px; padding:16px 16px 12px 20px; }
+.pc-history header b{ flex:1; font-size:18px; line-height:24px; font-weight:500; }
+.pc-history > .pc-tabs{ display:flex; align-self:stretch; margin:0 20px 12px; }
+/* narrow drawer or 4-digit counts: tabs shrink instead of overflowing */
+.pc-history > .pc-tabs .pc-tab{ flex:1 1 auto; min-width:0; justify-content:center; gap:4px; padding:0 6px; overflow:hidden; }
+.pc-selbar{ display:flex; align-items:center; gap:6px; min-height:40px; padding:6px 16px 6px 20px; border-top:.5px solid var(--pc-border); border-bottom:.5px solid var(--pc-border); }
+.pc-check{ flex:1; display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--pc-text); font-weight:500; user-select:none; }
+.pc-check:has(:checked){ color:var(--pc-text-strong); }
+.pc-bulk{ display:flex; gap:2px; margin-right:-4px; }
+/* Command list: 6px-radius items */
+/* the bottom padding keeps the last row clear of the toolbar when the drawer is full width */
+.pc-groups{ flex:1; overflow:auto; padding:8px 12px 72px; }
+/* row: checkbox, pin and the first text line share one 20px line */
+.pc-row{ position:relative; display:flex; align-items:flex-start; gap:10px; padding:8px; border-radius:6px; transition:background-color .15s, opacity .15s cubic-bezier(.4,0,1,1); }
+/* fades before it leaves the filtered list */
+.pc-row.leaving{ opacity:0; pointer-events:none; }
+@media (hover:hover){ .pc-row:hover{ background:var(--pc-hover); } }
+.pc-root .pc-row .pc-pick{ width:14px; height:14px; flex:none; margin:3px 0 0; }
+.pc-item{ flex:1; min-width:0; display:flex; align-items:flex-start; gap:10px; padding:0; border:0; background:transparent; text-align:left; }
+.pc-n{ flex:none; min-width:20px; height:20px; padding:0 5px; border-radius:10px 10px 10px 2px; background:var(--pc-primary); color:#fff; font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; display:grid; place-items:center; }
+/* row actions: the thread's Resolve, Mark for Agent and Delete; shown on hover or focus, always on touch */
+/* overlaid at the row's right edge so hidden actions take no width; the fade matches the row's hover fill */
+.pc-row-actions{ position:absolute; top:6px; right:6px; display:flex; gap:2px; padding-left:20px; border-radius:6px; background:linear-gradient(to right, transparent, var(--pc-row-hover) 20px); opacity:0; pointer-events:none; transition:opacity .15s; }
+.pc-row:hover .pc-row-actions, .pc-row:focus-within .pc-row-actions{ opacity:1; pointer-events:auto; }
+/* on touch they are always there, so they take their own column instead of covering the text */
+@media (hover:none){ .pc-row-actions{ position:static; flex:none; opacity:1; pointer-events:auto; padding-left:0; background:none; margin:-2px -2px 0 0; } }
+.pc-agent[aria-pressed="true"]{ color:var(--pc-agent-text); background:var(--pc-agent-soft); }
+.pc-row.done .pc-n{ background:var(--pc-done); padding:0; width:20px; }
+.pc-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
+.pc-text{ font-weight:450; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+.pc-row.done .pc-text{ color:var(--pc-faint); }
+.pc-body .pc-meta{ display:flex; align-items:center; gap:6px; min-width:0; margin:0; }
+.pc-body .pc-meta > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pc-body .pc-tag{ margin:0; }
+.pc-empty{ margin:8px; color:var(--pc-faint); }
+
+@media (prefers-reduced-motion:reduce){ .pc-root *{ transition:none !important; animation:none !important; } }
+`;
+
+// src/index.jsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TEXT_INPUT = 'input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=range]):not([type=color]), textarea, [contenteditable="true"]';
+var typing = (t) => t.closest?.(TEXT_INPUT);
+var ours = (t) => t.closest?.(".pc-root");
+var BLOCK = ["pointerdown", "mousedown", "mouseup", "click", "dblclick"];
+var rectOf = (el) => {
+  const r = el.getBoundingClientRect();
+  return { left: r.left, top: r.top, width: r.width, height: r.height };
+};
+function useStyles() {
+  useEffect2(() => {
+    if (document.getElementById("proto-comments-css")) return;
+    const s = document.createElement("style");
+    s.id = "proto-comments-css";
+    s.textContent = styles_default;
+    document.head.appendChild(s);
+  }, []);
+}
+var clippers = (el) => {
+  const out = [];
+  for (let n = el.parentElement; n && n !== document.body; n = n.parentElement) {
+    const s = getComputedStyle(n);
+    if (s.overflowX !== "visible" || s.overflowY !== "visible") out.push(n);
+  }
+  return out;
+};
+var inside = (x, y, els) => els.every((n) => {
+  const r = n.getBoundingClientRect();
+  return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+});
+var PIN_H = 24;
+var pinWidth = (c) => c.status === "resolved" ? 24 : Math.max(24, 18 + 7 * String(c.n).length);
+function place(list, pos) {
+  const placed = [];
+  list.filter((c) => pos[c.id]).sort((a, b) => a.n - b.n).forEach((c) => {
+    const p = pos[c.id], w = pinWidth(c);
+    p.x = Math.max(4, Math.min(p.x, window.innerWidth - w - 2));
+    p.y = Math.max(PIN_H + 4, Math.min(p.y, window.innerHeight - 4));
+    const startX = p.x;
+    for (let moved = true; moved; ) {
+      moved = false;
+      for (const q of placed) {
+        if (Math.abs(p.y - q.y) < PIN_H && p.x < q.x + q.w + 2 && p.x + w + 2 > q.x) {
+          p.x = q.x + q.w + 2;
+          moved = true;
+        }
+      }
+      if (p.x + w > window.innerWidth - 2) {
+        p.x = startX;
+        p.y += PIN_H + 2;
+        moved = true;
+      }
+    }
+    placed.push({ x: p.x, y: p.y, w });
+  });
+}
+function useFrame(list, openId, flashId) {
+  const [frame, setFrame] = useState2({ screen: null, pos: {} });
+  useEffect2(() => {
+    let raf, last = "", lastScreen = null, dirty = true, found = {};
+    const mo = new MutationObserver((records) => {
+      if (records.some((r) => !ours(r.target.nodeType === 1 ? r.target : r.target.parentElement))) dirty = true;
+    });
+    mo.observe(document.body, { childList: true, characterData: true, subtree: true });
+    const timer = setInterval(() => {
+      dirty = true;
+    }, 1e3);
+    const tick = () => {
+      const screen = getConfig().getScreen().key;
+      const shown = list.filter((c) => c.screen === screen && (c.status === "open" || c.id === openId));
+      if (dirty || screen !== lastScreen) {
+        found = {};
+        shown.forEach((c) => {
+          const el = findAnchor(c.anchor);
+          if (el) found[c.id] = { el, clip: clippers(el) };
+        });
+        dirty = false;
+        lastScreen = screen;
+      }
+      const pos = {};
+      shown.forEach((c) => {
+        const f = found[c.id];
+        if (!f || !f.el.isConnected || !f.el.getClientRects().length) return;
+        const r = rectOf(f.el);
+        const x = r.left + c.anchor.offset.x * r.width, y = r.top + c.anchor.offset.y * r.height;
+        if (c.id !== openId && !inside(x, y, f.clip)) return;
+        pos[c.id] = { x, y, rect: c.id === flashId ? r : null };
+      });
+      place(shown, pos);
+      const key = JSON.stringify([screen, pos]);
+      if (key !== last) {
+        last = key;
+        setFrame({ screen, pos });
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    tick();
+    return () => {
+      cancelAnimationFrame(raf);
+      clearInterval(timer);
+      mo.disconnect();
+    };
+  }, [list, openId, flashId]);
+  return frame;
+}
+function ProtoComments(props) {
+  const cfg2 = { ...DEFAULTS, ...Object.fromEntries(Object.entries(props).filter(([, v]) => v !== void 0)) };
+  setConfig(cfg2);
+  useStyles();
+  const [root, setRoot] = useState2(null);
+  useEffect2(() => {
+    const el = document.createElement("div");
+    el.className = "pc-root";
+    document.body.appendChild(el);
+    setRoot(el);
+    return () => el.remove();
+  }, []);
+  const { list, mode, draft, openId, flashId } = useC((s) => s);
+  const [hover, setHover] = useState2(null);
+  useEffect2(() => {
+    const load = () => {
+      if (document.visibilityState === "visible") return loadComments().catch((e) => console.warn(e.message));
+    };
+    Promise.resolve(load()).then(resumePendingGo);
+    document.addEventListener("visibilitychange", load);
+    window.addEventListener("focus", load);
+    return () => {
+      document.removeEventListener("visibilitychange", load);
+      window.removeEventListener("focus", load);
+    };
+  }, []);
+  useEffect2(() => {
+    const onKey = (e) => {
+      const c = getC();
+      if (e.key === "Escape" && (c.draft || c.openId || c.historyOpen)) {
+        e.stopPropagation();
+        if (c.draft) setC({ draft: null });
+        else if (c.openId) setC({ openId: null });
+        else setC({ historyOpen: false });
+        return;
+      }
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.code === "KeyV" && c.mode && !(typing(e.target) && ours(e.target))) {
+        e.preventDefault();
+        e.stopPropagation();
+        setC({ mode: false, draft: null });
+      }
+      if (e.code === "KeyC" && !c.mode && !typing(e.target)) setC({ mode: true, openId: null });
+      if (e.code === "KeyH" && !typing(e.target)) setC({ historyOpen: !c.historyOpen });
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, []);
+  useEffect2(() => {
+    if (!mode) {
+      setHover(null);
+      return;
+    }
+    const onMove = (e) => setHover(ours(e.target) ? null : rectOf(e.target));
+    const block = (e) => {
+      if (ours(e.target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.type === "click") setC({ draft: { anchor: anchorFor(e.target, e.clientX, e.clientY, cfg2.headingSelector), x: e.clientX, y: e.clientY }, openId: null });
+    };
+    document.addEventListener("mousemove", onMove, true);
+    BLOCK.forEach((t) => document.addEventListener(t, block, true));
+    if (!ours(document.activeElement)) document.activeElement?.blur();
+    document.documentElement.classList.add("pc-mode");
+    return () => {
+      document.removeEventListener("mousemove", onMove, true);
+      BLOCK.forEach((t) => document.removeEventListener(t, block, true));
+      document.documentElement.classList.remove("pc-mode");
+    };
+  }, [mode, cfg2.headingSelector]);
+  const { screen, pos } = useFrame(list, openId, flashId);
+  const lastScreen = useRef2(screen);
+  useEffect2(() => {
+    if (lastScreen.current !== null && screen !== lastScreen.current) setC({ openId: null, draft: null });
+    lastScreen.current = screen;
+  }, [screen]);
+  const here = list.filter((c) => pos[c.id]);
+  const open = list.find((c) => c.id === openId);
+  if (!root) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      hover && !draft && /* @__PURE__ */ jsx3("div", { className: "pc-outline", style: hover }),
+      here.map((c) => /* @__PURE__ */ jsx3(Pin, { c, x: pos[c.id].x, y: pos[c.id].y }, c.id)),
+      here.map((c) => pos[c.id].rect && /* @__PURE__ */ jsx3("div", { className: "pc-outline flash", style: pos[c.id].rect }, `f${c.id}`)),
+      draft && /* @__PURE__ */ jsx3(Draft, { draft }),
+      open && (pos[open.id] ? /* @__PURE__ */ jsx3(Thread, { c: open, x: pos[open.id].x, y: pos[open.id].y }, open.id) : /* @__PURE__ */ jsx3(Thread, { c: open, x: window.innerWidth / 2 - 160, y: 120, lost: true }, open.id)),
+      /* @__PURE__ */ jsx3(History, {}),
+      /* @__PURE__ */ jsx3(Toolbar, {}),
+      /* @__PURE__ */ jsx3(Tooltip, {}),
+      mode && /* @__PURE__ */ jsx3("div", { className: "pc-hint", children: "Click an element to comment \xB7 V to stop" })
+    ] }),
+    root
+  );
+}
+var index_default = ProtoComments;
+export {
+  ProtoComments,
+  index_default as default,
+  placeOf
+};