@tldraw/commenting 5.3.0-internal.c5c7f1d817d0 → 5.3.0-next.2fa9c61a8de6

package/dist-esm/canvas/comments-overlay.mjs

@@ -1,8 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, isMentionPickerOpen } from "@tldraw/mentions";
 import {
+  Fragment as Fragment2,
   memo,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState
@@ -11,9 +14,7 @@ import { createPortal } from "react-dom";
 import {
   createComment,
   createCommentThread,
-  getFirstCharacter,
   react,
-  TldrawUiIcon,
   useContainer,
   useEditor,
   usePassThroughMouseOverEvents,
@@ -23,92 +24,110 @@ import {
 } from "tldraw";
 import { computeClusterTable } from "../clustering/computeClusterTable.mjs";
 import { createClusterRuntime } from "../clustering/runtime.mjs";
-import { CommentCard } from "../ui/comment-card.mjs";
 import { CommentComposer } from "../ui/comment-composer.mjs";
 import { EMPTY_COMMENT, isCommentEmpty } from "../ui/comment-extensions.mjs";
 import { CommentPin } from "../ui/comment-pin.mjs";
-import { CommentThread } from "../ui/comment-thread.mjs";
 import { CountBadge } from "../ui/count-badge.mjs";
-import { isMentionPickerOpen } from "../ui/mention-suggestion.mjs";
+import { registerCommentAnchorLifecycle } from "./anchor-lifecycle.mjs";
 import { collectClusterLeaves } from "./cluster-input.mjs";
-import { CommentBody } from "./comment-body.mjs";
-import { UNKNOWN_AUTHOR } from "./comment-render.mjs";
-import { getCommentRecord, putCommentRecords, removeCommentRecords } from "./comment-store.mjs";
+import {
+  clearCommentDraft,
+  getCommentDraft,
+  NEW_COMMENT_DRAFT,
+  saveCommentDraft
+} from "./comment-drafts.mjs";
+import { commitCommentMutation, putRecordsInCommit } from "./comment-mutations.mjs";
+import { UNKNOWN_AUTHOR, UNKNOWN_COMMENT_AUTHOR } from "./comment-render.mjs";
+import { getCommentRecord } from "./comment-store.mjs";
 import { useCommentThreads, useThreadComments } from "./hooks.mjs";
 import { useCommentingEnabled } from "./license.mjs";
 import {
   getCommentingOptions,
+  useCanComment,
   useCommentingOptions
 } from "./options.mjs";
-import {
-  DEFAULT_REGION_COMMENT_OPTIONS,
-  setRegionCommentOptions
-} from "./region-options.mjs";
+import { computePinStacks, pinStackKey } from "./pin-stacking.mjs";
 import {
   commentsHidden,
-  commitCommentMutation,
+  openStackId,
   openThreadId,
   pendingComment,
   regionDraft,
+  revealThreadRequest,
+  sidebarFilters,
   toggleCommentsHidden,
   usePendingComment
 } from "./state.mjs";
-import { anchorPagePoint, regionPinPoint, shapeAnchorAt } from "./thread-state.mjs";
+import { ThreadPreview, sortThreadsForPreview, useMarkerPreview } from "./thread-preview.mjs";
+import { ThreadStackPin } from "./thread-stack.mjs";
+import {
+  anchorPagePoint,
+  commentCenterScreenOffset,
+  commentTargetShapeAt,
+  impreciseShapePinInset,
+  REGION_PIN_CORNER,
+  regionAnchorPinCorner,
+  regionPinPoint,
+  shapeAnchorAt
+} from "./thread-state.mjs";
+import { POPOVER_OFFSET, ThreadPopover, ThreadView } from "./thread-view.mjs";
 const stop = (e) => e.stopPropagation();
-const initialOf = (name) => (getFirstCharacter(name.trim()) || "?").toUpperCase();
+const isCanvasPanGesture = (editor, e) => e.button !== 0 || editor.inputs.keys.has("Space");
+function forwardPointerEventToCanvas(container, e) {
+  const cvs = container.querySelector(".tl-canvas");
+  if (!cvs) return;
+  const newEvent = new PointerEvent(e.type, e.nativeEvent);
+  newEvent.isSpecialRedispatchedEvent = true;
+  cvs.dispatchEvent(newEvent);
+}
 const CLUSTER_FADE_MS = 150;
 const CLUSTER_EXPAND_ZOOM_MS = 450;
-const draftAvatar = /* @__PURE__ */ jsx(CommentPin, { children: /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: "15",
-    height: "15",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsx("path", { d: "M12 20h9" }),
-      /* @__PURE__ */ jsx("path", { d: "M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" })
-    ]
-  }
-) });
-function toCardProps(comment, props, components) {
-  const Body = components.CommentBody;
-  const body = Body ? /* @__PURE__ */ jsx(Body, { comment }) : /* @__PURE__ */ jsx(CommentBody, { richText: comment.body, resolveName: props.resolveName });
-  return {
-    author: props.resolveName(comment.authorId) ?? UNKNOWN_AUTHOR,
-    body,
-    date: new Date(comment.createdAt).toISOString(),
-    you: comment.authorId === props.currentUserId,
-    edited: comment.editedAt != null
-  };
-}
+const CLUSTER_SPLIT_ZOOM_FACTOR = 1.05;
+const CLUSTER_CULL_MARGIN_PX = 120;
+const THREAD_HEADER_BLOCK = 36;
 function CanvasComments(props) {
   const commentingEnabled = useCommentingEnabled();
   if (!commentingEnabled) return null;
   return /* @__PURE__ */ jsx(CanvasCommentsLayer, { ...props });
 }
+function useTrailingPortalHost(container) {
+  const [host, setHost] = useState(null);
+  useLayoutEffect(() => {
+    const elm = container.ownerDocument.createElement("div");
+    elm.style.display = "contents";
+    container.appendChild(elm);
+    setHost(elm);
+    return () => {
+      elm.remove();
+      setHost(null);
+    };
+  }, [container]);
+  return host;
+}
 function CanvasCommentsLayer(props) {
   const editor = useEditor();
   const options = useCommentingOptions();
   const container = useContainer();
-  const regionOptions = useMemo(
-    () => ({ ...DEFAULT_REGION_COMMENT_OPTIONS, ...props.regionOptions }),
-    [props.regionOptions]
-  );
-  useEffect(() => setRegionCommentOptions(editor, regionOptions), [editor, regionOptions]);
+  const portalHost = useTrailingPortalHost(container);
   const layerRef = useRef(null);
-  usePassThroughWheelEvents(layerRef);
   usePassThroughMouseOverEvents(layerRef);
-  const deepLinkHandled = useRef(false);
-  const threads = useCommentThreads(editor);
+  const allThreads = useCommentThreads(editor);
   const pending = usePendingComment();
+  const canComment = useCanComment(props.currentUserId);
+  const canRenderComposer = canComment || options.components.ComposerFallback != null;
+  const showPendingComposer = pending != null && canRenderComposer;
+  useEffect(() => {
+    if (pending && !showPendingComposer) pendingComment.set(editor, null);
+  }, [editor, pending, showPendingComposer]);
   const openId = useValue("open thread id", () => openThreadId.get(editor), [editor]);
-  const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
+  const showResolved = useValue("show resolved", () => sidebarFilters.get(editor).showResolved, [
+    editor
+  ]);
+  const threads = useMemo(
+    () => allThreads.filter((t) => showResolved || t.resolved == null || t.id === openId),
+    [allThreads, showResolved, openId]
+  );
+  useEffect(() => registerCommentAnchorLifecycle(editor), [editor]);
   const [heldThreadIds, setHeldThreadIds] = useState(EMPTY_SET);
   const adoptOnRebuild = useRef(false);
   const clusterLeaves = useValue(
@@ -116,10 +135,9 @@ function CanvasCommentsLayer(props) {
     () => collectClusterLeaves(
       editor,
       threads.filter((thread) => !heldThreadIds.has(thread.id)),
-      openThreadId.get(editor),
-      impreciseShapeAnchor
+      openThreadId.get(editor)
     ),
-    [editor, threads, impreciseShapeAnchor, heldThreadIds]
+    [editor, threads, heldThreadIds]
   );
   const clusterZoomBounds = useValue(
     "comment cluster zoom bounds",
@@ -221,53 +239,76 @@ function CanvasCommentsLayer(props) {
     () => new Map(threads.map((thread) => [thread.id, thread])),
     [threads]
   );
+  const pinStacks = useValue("comment pin stacks", () => computePinStacks(editor, threads), [
+    editor,
+    threads
+  ]);
   const openThread = openId ? threadsById.get(openId) : null;
   const hidden = useValue("comments hidden", () => commentsHidden.get(editor), [editor]);
   useEffect(() => {
     return () => {
       openThreadId.set(editor, null);
+      openStackId.set(editor, null);
       pendingComment.set(editor, null);
+      revealThreadRequest.set(editor, null);
     };
   }, [editor]);
   useEffect(() => {
-    if (deepLinkHandled.current) return;
-    const id = new URLSearchParams(window.location.search).get("comment");
-    if (!id) {
-      deepLinkHandled.current = true;
-      return;
-    }
-    const record = getCommentRecord(editor, id);
-    if (!record) return;
-    let thread;
-    if (record.typeName === "comment") {
-      thread = threadsById.get(record.threadId);
-    } else {
-      thread = record;
+    const key = openStackId.get(editor);
+    if (!key) return;
+    for (const id of pinStacks.keys()) {
+      const thread = threadsById.get(id);
+      if (!thread) continue;
+      const point = anchorPagePoint(editor, thread.anchor);
+      if (point && pinStackKey(point) === key) return;
     }
-    if (!thread) return;
-    deepLinkHandled.current = true;
-    revealDeepLinkedThread(
-      editor,
-      thread,
-      clusterModel.table,
-      clusterZoomBounds,
-      options,
-      impreciseShapeAnchor
-    );
-    openThreadId.set(editor, thread.id);
-  }, [clusterModel.table, clusterZoomBounds, editor, threadsById, impreciseShapeAnchor, options]);
+    openStackId.set(editor, null);
+  }, [editor, pinStacks, threadsById]);
+  const requestedRevealThread = useValue(
+    "requested reveal thread",
+    () => {
+      const id = revealThreadRequest.get(editor);
+      if (!id) return null;
+      const record = getCommentRecord(editor, id);
+      if (!record) return null;
+      const thread = record.typeName === "comment" ? getCommentRecord(editor, record.threadId) : record;
+      return thread?.typeName === "comment-thread" ? thread : null;
+    },
+    [editor]
+  );
+  useEffect(() => {
+    if (!requestedRevealThread) return;
+    revealThreadRequest.set(editor, null);
+    commentsHidden.set(editor, false);
+    revealThreadPin(editor, requestedRevealThread, clusterModel.table, clusterZoomBounds, options);
+    openThreadId.set(editor, requestedRevealThread.id);
+  }, [requestedRevealThread, clusterModel.table, clusterZoomBounds, editor, options]);
+  const revealClusteredThread = useCallback(
+    (thread) => {
+      revealThreadPin(
+        editor,
+        thread,
+        clusterModel.table,
+        clusterZoomBounds,
+        options,
+        CLUSTER_EXPAND_ZOOM_MS
+      );
+      openThreadId.set(editor, thread.id);
+    },
+    [clusterModel.table, clusterZoomBounds, editor, options]
+  );
   const zoomToClusterSplit = useCallback(
     (node) => {
       const event = clusterModel.table.events.find((e) => e.result.id === node.id);
       if (!event || !Number.isFinite(event.zSplit)) return;
       const zoom = clamp(
-        event.zSplit * options.clusterSplitZoomFactor,
+        event.zSplit * CLUSTER_SPLIT_ZOOM_FACTOR,
         clusterZoomBounds.minZoom,
         clusterZoomBounds.maxZoom
       );
       centerOnPointAtZoom(editor, node.centroid, zoom, CLUSTER_EXPAND_ZOOM_MS);
     },
-    [clusterModel, clusterZoomBounds, editor, options]
+    [clusterModel, clusterZoomBounds, editor]
   );
   useEffect(() => {
     const onKeyDown = (e) => {
@@ -294,79 +335,80 @@ function CanvasCommentsLayer(props) {
     return () => document.removeEventListener("keydown", onKeyDown, true);
   }, [editor]);
   if (hidden) return null;
+  const stackGroupOf = (node) => {
+    const group = pinStacks.get(node.members[0]);
+    if (!group) return null;
+    return node.members.every((id) => group.includes(id)) ? group : null;
+  };
+  const renderedThreadIds = /* @__PURE__ */ new Set();
+  if (options.enableClustering) {
+    for (const { node } of fadeNodes) {
+      if (node.count === 1) renderedThreadIds.add(node.id);
+      else if (stackGroupOf(node)) for (const id of node.members) renderedThreadIds.add(id);
+    }
+    for (const thread of orphanThreads) renderedThreadIds.add(thread.id);
+    for (const thread of heldThreads) renderedThreadIds.add(thread.id);
+  } else {
+    for (const thread of threads) renderedThreadIds.add(thread.id);
+  }
+  if (openThread) renderedThreadIds.add(openThread.id);
+  const renderThreadPin = (thread) => {
+    const group = pinStacks.get(thread.id);
+    if (group) {
+      const owner = group.find((id) => renderedThreadIds.has(id));
+      if (owner !== thread.id) return null;
+      const stackThreads = group.map((id) => threadsById.get(id)).filter((t) => t !== void 0);
+      return /* @__PURE__ */ jsx(ThreadStackPin, { editor, threads: stackThreads, ...props });
+    }
+    return /* @__PURE__ */ jsx(ThreadPin, { editor, thread, ...props });
+  };
+  if (!portalHost) return null;
   return createPortal(
     /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "tlui-cmt-canvas-layer", children: [
       options.enableClustering ? /* @__PURE__ */ jsxs(Fragment, { children: [
         fadeNodes.map(({ node, phase }) => {
           let content;
+          const stackGroup = node.count > 1 ? stackGroupOf(node) : null;
           if (node.count === 1) {
             const thread = threadsById.get(node.id);
             if (!thread) return null;
+            content = renderThreadPin(thread);
+          } else if (stackGroup) {
+            const owner = stackGroup.find((id) => renderedThreadIds.has(id));
+            content = owner && node.members.includes(owner) ? renderThreadPin(threadsById.get(owner)) : null;
+          } else {
             content = /* @__PURE__ */ jsx(
-              ThreadPin,
+              ClusterBadge,
               {
                 editor,
-                thread,
-                ...props,
-                regionOptions
+                node,
+                onExpand: zoomToClusterSplit,
+                onSelectThread: revealClusteredThread,
+                threadsById,
+                currentUserId: props.currentUserId,
+                resolveAuthor: props.resolveAuthor
               }
             );
-          } else {
-            content = /* @__PURE__ */ jsx(ClusterBadge, { editor, node, onExpand: zoomToClusterSplit });
           }
           return /* @__PURE__ */ jsx("div", { className: clusterFadeClassName(phase), children: content }, `cluster-fade:${node.id}`);
         }),
-        orphanThreads.map((thread) => /* @__PURE__ */ jsx(
-          ThreadPin,
-          {
-            editor,
-            thread,
-            ...props,
-            regionOptions
-          },
-          thread.id
-        )),
-        heldThreads.map((thread) => /* @__PURE__ */ jsx(
-          ThreadPin,
-          {
-            editor,
-            thread,
-            ...props,
-            regionOptions
-          },
-          thread.id
-        ))
+        orphanThreads.map((thread) => /* @__PURE__ */ jsx(Fragment2, { children: renderThreadPin(thread) }, thread.id)),
+        heldThreads.map((thread) => /* @__PURE__ */ jsx(Fragment2, { children: renderThreadPin(thread) }, thread.id))
       ] }) : (
         // Clustering off: every thread renders as its own live pin (each returns null when it's
         // not on the current page or its anchor is missing). The open thread is excluded here and
         // rendered once below, mirroring how the clustering path keeps it out of the cluster leaves —
         // otherwise it would mount a second, stacked pin.
-        (threads.filter((thread) => thread.id !== openId).map((thread) => /* @__PURE__ */ jsx(
-          ThreadPin,
-          {
-            editor,
-            thread,
-            ...props,
-            regionOptions
-          },
-          thread.id
-        )))
-      ),
-      openThread && /* @__PURE__ */ jsx(
-        ThreadPin,
-        {
-          editor,
-          thread: openThread,
-          ...props,
-          regionOptions
-        },
-        `open:${openThread.id}`
+        (threads.filter((thread) => thread.id !== openId).map(
+          (thread) => /* @__PURE__ */ jsx(Fragment2, { children: renderThreadPin(thread) }, thread.id)
+        ))
       ),
+      openThread && /* @__PURE__ */ jsx(Fragment2, { children: renderThreadPin(openThread) }, `open:${openThread.id}`),
       /* @__PURE__ */ jsx(RegionDraftBox, { editor }),
-      pending?.anchor.type === "region" && /* @__PURE__ */ jsx(RegionBox, { editor, box: pending.anchor }),
-      pending && props.currentUserId && /* @__PURE__ */ jsx(PendingComposer, { editor, pending, ...props })
+      pending?.anchor.type === "region" && showPendingComposer && /* @__PURE__ */ jsx(RegionBox, { editor, box: pending.anchor }),
+      pending && showPendingComposer && /* @__PURE__ */ jsx(PendingComposer, { editor, pending, ...props })
     ] }),
-    container
+    portalHost
   );
 }
 const EMPTY_SET = /* @__PURE__ */ new Set();
@@ -461,34 +503,36 @@ function getClusterZoomBounds(editor) {
     maxZoom: zoomSteps[zoomSteps.length - 1] * baseZoom
   };
 }
-function revealDeepLinkedThread(editor, thread, table, zoomBounds, options, impreciseShapeAnchor) {
+function revealThreadPin(editor, thread, table, zoomBounds, options, duration = 200) {
   if (thread.pageId !== editor.getCurrentPageId()) {
     editor.setCurrentPage(thread.pageId);
   }
-  const point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor);
+  const point = anchorPagePoint(editor, thread.anchor);
   if (!point) return;
   if (options.enableClustering) {
     const parentEvent = findDirectParentEvent(table, thread.id);
     if (parentEvent && Number.isFinite(parentEvent.zSplit) && parentEvent.zSplit <= zoomBounds.maxZoom) {
       const zoom = clamp(
-        parentEvent.zSplit * options.clusterSplitZoomFactor,
+        parentEvent.zSplit * CLUSTER_SPLIT_ZOOM_FACTOR,
         zoomBounds.minZoom,
         zoomBounds.maxZoom
       );
-      centerOnPointAtZoom(editor, point, zoom);
+      centerOnPointAtZoom(editor, point, zoom, duration);
       return;
     }
   }
-  editor.centerOnPoint(point, { animation: { duration: 200 } });
+  const offset = commentCenterScreenOffset(editor) / editor.getZoomLevel();
+  editor.centerOnPoint({ x: point.x + offset, y: point.y }, { animation: { duration } });
 }
 function findDirectParentEvent(table, threadId) {
   return table.events.find((event) => event.children.some((child) => child.id === threadId));
 }
 function centerOnPointAtZoom(editor, point, zoom, duration = 200) {
   const viewport = editor.getViewportScreenBounds();
+  const offset = commentCenterScreenOffset(editor);
   editor.setCamera(
     {
-      x: viewport.w / (2 * zoom) - point.x,
+      x: (viewport.w / 2 - offset) / zoom - point.x,
       y: viewport.h / (2 * zoom) - point.y,
       z: zoom
     },
@@ -501,8 +545,16 @@ function clamp(value, min, max) {
 const ClusterBadge = memo(function ClusterBadge2({
   editor,
   node,
-  onExpand
+  onExpand,
+  onSelectThread,
+  threadsById,
+  ...props
 }) {
+  const container = useContainer();
+  const msg = useTranslation();
+  const badgeRef = useRef(null);
+  const { previewShown, previewHandlers } = useMarkerPreview(editor, `cluster:${node.id}`);
+  usePassThroughWheelEvents(badgeRef);
   const point = useValue(
     "cluster badge point",
     () => {
@@ -512,46 +564,63 @@ const ClusterBadge = memo(function ClusterBadge2({
     },
     [editor, node]
   );
-  if (!point) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "tlui-cmt-canvas-cluster",
-      style: { left: point.x, top: point.y },
-      onPointerDown: stop,
-      onClick: (e) => {
-        e.stopPropagation();
-        onExpand(node);
-      },
-      children: /* @__PURE__ */ jsx(CountBadge, { count: node.count })
+  const previewThreads = useMemo(() => {
+    if (!previewShown) return [];
+    const threads = [];
+    for (const id of node.members) {
+      const thread = threadsById.get(id);
+      if (thread) threads.push(thread);
     }
-  );
+    return sortThreadsForPreview(threads);
+  }, [previewShown, node.members, threadsById]);
+  if (!point) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: badgeRef,
+        type: "button",
+        className: "tlui-cmt-button tlui-cmt-canvas-cluster",
+        style: { left: point.x, top: point.y },
+        "aria-label": msg("comments.cluster-label").replace("{count}", String(node.count)),
+        onPointerDown: (e) => {
+          if (isCanvasPanGesture(editor, e)) {
+            forwardPointerEventToCanvas(container, e);
+            return;
+          }
+          e.stopPropagation();
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          onExpand(node);
+        },
+        ...previewHandlers,
+        onFocus: previewHandlers.onPointerEnter,
+        onBlur: previewHandlers.onPointerLeave,
+        children: /* @__PURE__ */ jsx(CountBadge, { count: node.count })
+      }
+    ),
+    previewShown && previewThreads.length > 0 && /* @__PURE__ */ jsx(
+      ThreadPreview,
+      {
+        editor,
+        threads: previewThreads,
+        container,
+        variant: "list",
+        point,
+        onSelectThread,
+        ...previewHandlers,
+        ...props
+      }
+    )
+  ] });
 });
 function isInInflatedViewport(editor, point) {
   const viewport = editor.getViewportScreenBounds();
-  const margin = getCommentingOptions(editor).clusterCullMargin;
+  const margin = CLUSTER_CULL_MARGIN_PX;
   return point.x >= -margin && point.y >= -margin && point.x <= viewport.w + margin && point.y <= viewport.h + margin;
 }
-function ThreadPopover({
-  container,
-  style,
-  children
-}) {
-  const ref = useRef(null);
-  usePassThroughWheelEvents(ref);
-  usePassThroughMouseOverEvents(ref);
-  return createPortal(
-    /* @__PURE__ */ jsx("div", { ref, className: "tlui-cmt-canvas-popover", style, onPointerDown: stop, children }),
-    container
-  );
-}
-function RegionBox({
-  editor,
-  box,
-  movable,
-  onPreview,
-  onCommit
-}) {
+function RegionBox({ editor, box }) {
   const rect = useValue(
     "region rect",
     () => {
@@ -561,38 +630,7 @@ function RegionBox({
     },
     [editor, box.x, box.y, box.w, box.h]
   );
-  const grabRef = useRef(null);
-  const translated = (e) => {
-    const g = grabRef.current;
-    const p = editor.screenToPage({ x: e.clientX, y: e.clientY });
-    return { ...g.box, x: g.box.x + (p.x - g.page.x), y: g.box.y + (p.y - g.page.y) };
-  };
-  const startMove = (e) => {
-    e.stopPropagation();
-    grabRef.current = { page: editor.screenToPage({ x: e.clientX, y: e.clientY }), box };
-    e.currentTarget.setPointerCapture(e.pointerId);
-  };
-  const onMove = (e) => {
-    if (grabRef.current) onPreview?.(translated(e));
-  };
-  const endMove = (e) => {
-    if (!grabRef.current) return;
-    const bounds = translated(e);
-    grabRef.current = null;
-    if (e.currentTarget.hasPointerCapture(e.pointerId))
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    onCommit?.(bounds);
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: movable ? "tlui-cmt-canvas-region tlui-cmt-canvas-region--movable" : "tlui-cmt-canvas-region",
-      style: rect,
-      onPointerDown: movable ? startMove : void 0,
-      onPointerMove: movable ? onMove : void 0,
-      onPointerUp: movable ? endMove : void 0
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { className: "tlui-cmt-canvas-region", style: rect });
 }
 function RegionDraftBox({ editor }) {
   const box = useValue("region draft", () => regionDraft.get(editor), [editor]);
@@ -605,12 +643,6 @@ const REGION_CORNERS = [
   { x: 0, y: 1, cursor: "nesw-resize" },
   { x: 1, y: 1, cursor: "nwse-resize" }
 ];
-const REGION_EDGES = [
-  { x: 0.5, y: 0, cursor: "ns-resize" },
-  { x: 1, y: 0.5, cursor: "ew-resize" },
-  { x: 0.5, y: 1, cursor: "ns-resize" },
-  { x: 0, y: 0.5, cursor: "ew-resize" }
-];
 const REGION_HANDLE_MARGIN_PX = 12;
 function resizeRegion(box, handle, cursor) {
   const controlsX = handle.x !== 0.5;
@@ -672,33 +704,22 @@ function RegionResizeHandles({
 const ThreadPin = memo(function ThreadPin2({
   editor,
   thread,
-  regionOptions,
   ...props
 }) {
-  const {
-    currentUserId,
-    resolveName,
-    onPostComment,
-    isCommentUnread,
-    onCommentRead,
-    getMentionSuggestions,
-    renderMentionSuggestion
-  } = props;
+  const { resolveAuthor } = props;
   const options = useCommentingOptions();
-  const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
+  const canComment = useCanComment(props.currentUserId);
   const container = useContainer();
-  const comments = useThreadComments(editor, thread.id);
   const msg = useTranslation();
+  const comments = useThreadComments(editor, thread.id);
   const open = useValue("thread open", () => openThreadId.get(editor) === thread.id, [
     editor,
     thread.id
   ]);
-  const [reply, setReply] = useState(EMPTY_COMMENT);
-  const [editingId, setEditingId] = useState(null);
-  const [editText, setEditText] = useState(EMPTY_COMMENT);
   const [dragPagePoint, setDragPagePoint] = useState(null);
   const [resizeBounds, setResizeBounds] = useState(null);
-  const [pinHovered, setPinHovered] = useState(false);
+  const { previewShown, previewHandlers } = useMarkerPreview(editor, `pin:${thread.id}`);
+  const previewThreads = useMemo(() => [thread], [thread]);
   const pointerInRegion = useValue(
     "pointer in region",
     () => {
@@ -711,15 +732,20 @@ const ThreadPin = memo(function ThreadPin2({
     },
     [editor, thread.anchor, thread.pageId]
   );
-  const revealed = open || resizeBounds != null || regionOptions.reveal === "pointer" && pointerInRegion || regionOptions.reveal === "pin-hover" && pinHovered;
+  const revealed = open || resizeBounds != null || pointerInRegion;
+  const pinCorner = thread.anchor.type === "region" ? regionAnchorPinCorner(thread.anchor) : REGION_PIN_CORNER;
   const resizeHandles = useMemo(
-    () => regionOptions.resize === "edges" ? REGION_EDGES : REGION_CORNERS.filter(
-      (c) => c.x !== regionOptions.pinCorner.x || c.y !== regionOptions.pinCorner.y
-    ),
-    [regionOptions.resize, regionOptions.pinCorner]
+    () => REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),
+    [pinCorner]
   );
   const dragRef = useRef(null);
   const markerRef = useRef(null);
+  usePassThroughWheelEvents(markerRef);
+  useEffect(() => {
+    return () => {
+      if (dragRef.current) editor.setHintingShapes([]);
+    };
+  }, [editor]);
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (e) => {
@@ -740,165 +766,68 @@ const ThreadPin = memo(function ThreadPin2({
     "pin point",
     () => {
       if (thread.pageId !== editor.getCurrentPageId()) return null;
-      const pagePoint = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor);
-      return pagePoint ? editor.pageToViewport(pagePoint) : null;
+      const pagePoint = anchorPagePoint(editor, thread.anchor);
+      if (!pagePoint) return null;
+      const viewportPoint = editor.pageToViewport(pagePoint);
+      const inset = impreciseShapePinInset(editor, thread.anchor);
+      return inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint;
     },
-    [editor, thread.anchor, thread.pageId, impreciseShapeAnchor]
+    [editor, thread.anchor, thread.pageId]
   );
-  const visible = point !== null;
-  useEffect(() => {
-    if (!open || !visible || !isCommentUnread || !onCommentRead) return;
-    for (const comment of comments) {
-      if (isCommentUnread(comment.id)) {
-        onCommentRead(comment.id);
-      }
-    }
-  }, [open, visible, comments, isCommentUnread, onCommentRead]);
   if (!point) return null;
-  const postReply = () => {
-    if (isCommentEmpty(reply) || !currentUserId) return;
-    commitCommentMutation(editor, () => {
-      const comment = createComment({
-        threadId: thread.id,
-        pageId: thread.pageId,
-        authorId: currentUserId,
-        body: reply
-      });
-      putCommentRecords(editor, [comment]);
-      if (onPostComment) onPostComment(comment);
-    });
-    setReply(EMPTY_COMMENT);
-  };
-  const toggleResolve = () => {
-    if (!currentUserId) return;
-    commitCommentMutation(editor, () => {
-      putCommentRecords(editor, [
-        {
-          ...thread,
-          resolved: thread.resolved ? null : { at: Date.now(), by: currentUserId }
-        }
-      ]);
-    });
-  };
-  const deleteThread = () => {
-    openThreadId.set(editor, null);
-    commitCommentMutation(
-      editor,
-      () => removeCommentRecords(editor, [thread.id, ...comments.map((c) => c.id)])
-    );
-  };
-  const startEdit = (comment) => {
-    setEditingId(comment.id);
-    setEditText(comment.body);
-  };
-  const saveEdit = () => {
-    const comment = comments.find((c) => c.id === editingId);
-    if (!comment || isCommentEmpty(editText)) return;
-    commitCommentMutation(editor, () => {
-      putCommentRecords(editor, [{ ...comment, body: editText, editedAt: Date.now() }]);
-    });
-    setEditingId(null);
-  };
-  const renderComment = (card, index) => {
-    const comment = comments[index];
-    if (editingId === comment.id) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "tlui-cmt-editing",
-          onKeyDown: (e) => {
-            if (e.key === "Escape") {
-              setEditingId(null);
-              e.stopPropagation();
-            }
-          },
-          children: /* @__PURE__ */ jsx(
-            CommentComposer,
-            {
-              author: card.author,
-              placeholder: msg("comments.edit-placeholder"),
-              value: editText,
-              onChange: setEditText,
-              onSubmit: saveEdit,
-              sendLabel: msg("comments.save"),
-              disabled: isCommentEmpty(editText),
-              getMentionSuggestions,
-              renderMentionSuggestion,
-              autoFocus: true
-            }
-          )
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      CommentCard,
-      {
-        ...card,
-        actions: comment.authorId === currentUserId ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "tlui-cmt-thread__action",
-            title: msg("comments.edit"),
-            onClick: () => startEdit(comment),
-            children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "dots-horizontal", label: msg("comments.edit"), small: true })
-          }
-        ) : void 0
-      }
-    );
-  };
-  const headerActions = /* @__PURE__ */ jsxs(Fragment, { children: [
-    currentUserId && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "tlui-cmt-thread__action",
-        title: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
-        onClick: toggleResolve,
-        children: /* @__PURE__ */ jsx(
-          TldrawUiIcon,
-          {
-            icon: "check",
-            label: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
-            small: true
-          }
-        )
-      }
-    ),
-    currentUserId && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "tlui-cmt-thread__action",
-        title: msg("comments.delete"),
-        onClick: deleteThread,
-        children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "trash", label: msg("comments.delete"), small: true })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "tlui-cmt-thread__action",
-        title: msg("comments.dismiss"),
-        onClick: () => openThreadId.set(editor, null),
-        children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "cross-2", label: msg("comments.dismiss"), small: true })
-      }
-    )
-  ] });
   const PinContent = options.components.PinContent;
-  const pinContent = PinContent ? /* @__PURE__ */ jsx(PinContent, { thread, comments }) : initialOf(resolveName(thread.createdBy) ?? UNKNOWN_AUTHOR);
+  const threadAuthor = resolveAuthor(thread.createdBy);
+  const pinContent = PinContent ? /* @__PURE__ */ jsx(PinContent, { thread, comments }) : /* @__PURE__ */ jsx(Avatar, { author: threadAuthor ?? UNKNOWN_COMMENT_AUTHOR });
+  const pinLabel = msg(
+    thread.resolved ? "comments.pin-label-resolved" : "comments.pin-label"
+  ).replace("{name}", threadAuthor?.name ?? UNKNOWN_AUTHOR);
   const isRegion = thread.anchor.type === "region";
-  const pinMovable = regionOptions.move !== "body";
-  const bodyMovable = regionOptions.move !== "pin";
   const startDrag = (e) => {
+    if (isCanvasPanGesture(editor, e)) {
+      forwardPointerEventToCanvas(container, e);
+      return;
+    }
     e.stopPropagation();
-    dragRef.current = { startX: e.clientX, startY: e.clientY, moved: false };
+    const grabPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const anchorPage = anchorPagePoint(editor, thread.anchor);
+    const inset = impreciseShapePinInset(editor, thread.anchor);
+    if (anchorPage && inset) {
+      const zoom = editor.getZoomLevel();
+      anchorPage.x += inset.x / zoom;
+      anchorPage.y += inset.y / zoom;
+    }
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      moved: false,
+      offsetX: anchorPage ? anchorPage.x - grabPage.x : 0,
+      offsetY: anchorPage ? anchorPage.y - grabPage.y : 0
+    };
     e.currentTarget.setPointerCapture(e.pointerId);
   };
   const onDrag = (e) => {
     const drag = dragRef.current;
     if (!drag) return;
-    if (isRegion && !pinMovable) return;
+    if (!canComment) return;
     if (!drag.moved && Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < 4) return;
     drag.moved = true;
-    setDragPagePoint(editor.screenToPage({ x: e.clientX, y: e.clientY }));
+    const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY };
+    setDragPagePoint(pagePoint);
+    if (!isRegion) {
+      const hit = commentTargetShapeAt(editor, pagePoint);
+      editor.setHintingShapes(hit ? [hit.id] : []);
+    }
+  };
+  const cancelDrag = (e) => {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    if (!drag) return;
+    setDragPagePoint(null);
+    editor.setHintingShapes([]);
   };
   const endDrag = (e) => {
     const drag = dragRef.current;
@@ -907,55 +836,59 @@ const ThreadPin = memo(function ThreadPin2({
       e.currentTarget.releasePointerCapture(e.pointerId);
     }
     if (!drag) return;
+    editor.setHintingShapes([]);
     if (!drag.moved) {
       openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id);
       return;
     }
-    const pagePoint = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY };
     setDragPagePoint(null);
     let anchor;
     if (thread.anchor.type === "region") {
       anchor = {
         ...thread.anchor,
-        x: pagePoint.x - regionOptions.pinCorner.x * thread.anchor.w,
-        y: pagePoint.y - regionOptions.pinCorner.y * thread.anchor.h
+        x: pagePoint.x - pinCorner.x * thread.anchor.w,
+        y: pagePoint.y - pinCorner.y * thread.anchor.h
       };
     } else {
-      const hit = editor.getShapeAtPoint(pagePoint, { hitInside: true });
-      anchor = hit ? shapeAnchorAt(editor, hit.id, pagePoint, e.altKey) : { type: "point", x: pagePoint.x, y: pagePoint.y };
+      const hit = commentTargetShapeAt(editor, pagePoint);
+      anchor = hit ? shapeAnchorAt(
+        editor,
+        hit.id,
+        pagePoint,
+        getCommentingOptions(editor).shouldBePrecise(editor, {
+          shapeId: hit.id,
+          point: pagePoint,
+          altKey: e.altKey
+        })
+      ) : { type: "point", x: pagePoint.x, y: pagePoint.y };
     }
-    commitCommentMutation(editor, () => putCommentRecords(editor, [{ ...thread, anchor }]), "drag");
+    commitCommentMutation(editor, () => putRecordsInCommit(editor, [{ ...thread, anchor }]), "drag");
   };
-  const livePinPage = resizeBounds ? regionPinPoint(resizeBounds, regionOptions.pinCorner) : dragPagePoint;
-  const renderPoint = livePinPage ? editor.pageToViewport(livePinPage) : point;
+  const livePinPage = resizeBounds ? regionPinPoint(resizeBounds, pinCorner) : dragPagePoint;
+  const renderPointBase = livePinPage ? editor.pageToViewport(livePinPage) : point;
+  const renderPoint = isRegion ? { x: renderPointBase.x - 17, y: renderPointBase.y + 17 } : renderPointBase;
   const regionAnchor = thread.anchor.type === "region" ? thread.anchor : void 0;
   const movedRegion = regionAnchor && dragPagePoint ? {
     ...regionAnchor,
-    x: dragPagePoint.x - regionOptions.pinCorner.x * regionAnchor.w,
-    y: dragPagePoint.y - regionOptions.pinCorner.y * regionAnchor.h
+    x: dragPagePoint.x - pinCorner.x * regionAnchor.w,
+    y: dragPagePoint.y - pinCorner.y * regionAnchor.h
   } : regionAnchor;
   const regionBoxBounds = resizeBounds ?? movedRegion;
   const commitResize = (bounds) => {
     setResizeBounds(null);
-    editor.run(
-      () => putCommentRecords(editor, [{ ...thread, anchor: { type: "region", ...bounds } }]),
-      {
-        history: "ignore"
-      }
+    if (!canComment) return;
+    commitCommentMutation(
+      editor,
+      // Spread the existing anchor first so the region's pin corner survives a resize.
+      () => putRecordsInCommit(editor, [{ ...thread, anchor: { ...regionAnchor, ...bounds } }]),
+      "drag"
     );
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    regionBoxBounds && (dragPagePoint || revealed) && /* @__PURE__ */ jsx(
-      RegionBox,
-      {
-        editor,
-        box: regionBoxBounds,
-        movable: bodyMovable && !dragPagePoint,
-        onPreview: setResizeBounds,
-        onCommit: commitResize
-      }
-    ),
-    regionBoxBounds && revealed && !dragPagePoint && regionOptions.resize !== "none" && /* @__PURE__ */ jsx(
+    regionBoxBounds && (dragPagePoint || revealed) && /* @__PURE__ */ jsx(RegionBox, { editor, box: regionBoxBounds }),
+    regionBoxBounds && revealed && !dragPagePoint && canComment && /* @__PURE__ */ jsx(
       RegionResizeHandles,
       {
         editor,
@@ -968,19 +901,33 @@ const ThreadPin = memo(function ThreadPin2({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: open ? "tlui-cmt-canvas-pin tlui-cmt-canvas-pin--open" : "tlui-cmt-canvas-pin",
+        className: [
+          "tlui-cmt-canvas-pin",
+          open && "tlui-cmt-canvas-pin--open",
+          dragPagePoint && "tlui-cmt-canvas-pin--dragging"
+        ].filter(Boolean).join(" "),
         style: { left: renderPoint.x, top: renderPoint.y },
         children: [
           /* @__PURE__ */ jsx(
-            "div",
+            "button",
             {
               ref: markerRef,
-              className: "tlui-cmt-canvas-pin__marker",
+              type: "button",
+              className: "tlui-cmt-button tlui-cmt-canvas-pin__marker",
+              "aria-label": pinLabel,
+              "aria-expanded": open,
               onPointerDown: startDrag,
               onPointerMove: onDrag,
               onPointerUp: endDrag,
-              onPointerEnter: () => setPinHovered(true),
-              onPointerLeave: () => setPinHovered(false),
+              onPointerCancel: cancelDrag,
+              onClick: (e) => {
+                if (e.detail !== 0) return;
+                openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id);
+              },
+              onPointerEnter: previewHandlers.onPointerEnter,
+              onPointerLeave: previewHandlers.onPointerLeave,
+              onFocus: previewHandlers.onPointerEnter,
+              onBlur: previewHandlers.onPointerLeave,
               children: /* @__PURE__ */ jsx(CommentPin, { resolved: thread.resolved != null, open, children: pinContent })
             }
           ),
@@ -988,31 +935,25 @@ const ThreadPin = memo(function ThreadPin2({
             ThreadPopover,
             {
               container,
-              style: { left: renderPoint.x + 36, top: renderPoint.y - 28 },
-              children: /* @__PURE__ */ jsx(
-                CommentThread,
-                {
-                  header: msg("comments.thread-title"),
-                  headerActions,
-                  renderComment,
-                  comments: comments.map((c) => toCardProps(c, props, options.components)),
-                  resolvedBanner: thread.resolved ? msg("comments.resolved-by").replace(
-                    "{name}",
-                    resolveName(thread.resolved.by) ?? UNKNOWN_AUTHOR
-                  ) : void 0,
-                  composer: currentUserId && !thread.resolved ? {
-                    author: resolveName(currentUserId) ?? UNKNOWN_AUTHOR,
-                    placeholder: msg("comments.reply-placeholder"),
-                    sendLabel: msg("comments.send"),
-                    value: reply,
-                    onChange: setReply,
-                    onSubmit: postReply,
-                    disabled: isCommentEmpty(reply),
-                    getMentionSuggestions,
-                    renderMentionSuggestion
-                  } : void 0
-                }
-              )
+              style: {
+                left: renderPoint.x + POPOVER_OFFSET.thread.x,
+                top: renderPoint.y + POPOVER_OFFSET.thread.y - THREAD_HEADER_BLOCK
+              },
+              children: /* @__PURE__ */ jsx(ThreadView, { editor, thread, ...props })
+            }
+          ),
+          previewShown && !dragPagePoint && /* @__PURE__ */ jsx(
+            ThreadPreview,
+            {
+              editor,
+              threads: previewThreads,
+              container,
+              variant: "thread",
+              point: renderPoint,
+              onSelectThread: () => openThreadId.set(editor, thread.id),
+              ...previewHandlers,
+              currentUserId: props.currentUserId,
+              resolveAuthor
             }
           )
         ]
@@ -1024,12 +965,18 @@ function PendingComposer({
   editor,
   pending,
   currentUserId,
-  resolveName,
+  resolveAuthor,
   onPostComment,
   getMentionSuggestions,
   renderMentionSuggestion
 }) {
-  const [text, setText] = useState(EMPTY_COMMENT);
+  const ComposerFallback = useCommentingOptions().components.ComposerFallback;
+  const canComment = useCanComment(currentUserId);
+  const me = currentUserId ? resolveAuthor(currentUserId) : void 0;
+  const draftAvatar = /* @__PURE__ */ jsx(CommentPin, { children: /* @__PURE__ */ jsx(Avatar, { author: me ?? UNKNOWN_COMMENT_AUTHOR }) });
+  const [text, setText] = useState(
+    () => getCommentDraft(NEW_COMMENT_DRAFT) ?? EMPTY_COMMENT
+  );
   const ref = useRef(null);
   const msg = useTranslation();
   const container = useContainer();
@@ -1065,10 +1012,11 @@ function PendingComposer({
         authorId: currentUserId,
         body: text
       });
-      putCommentRecords(editor, [thread, comment]);
+      putRecordsInCommit(editor, [thread, comment]);
       if (onPostComment) onPostComment(comment);
     });
     setText(EMPTY_COMMENT);
+    clearCommentDraft(NEW_COMMENT_DRAFT);
     pendingComment.set(editor, null);
   };
   return createPortal(
@@ -1076,28 +1024,36 @@ function PendingComposer({
       "div",
       {
         ref,
-        className: "tlui-cmt-canvas-composer",
+        className: [
+          "tlui-cmt-canvas-composer",
+          pending.anchor.type === "region" && "tlui-cmt-canvas-composer--region",
+          !canComment && "tlui-cmt-canvas-composer--fallback"
+        ].filter(Boolean).join(" "),
         style: { left: point.x, top: point.y },
         onPointerDown: stop,
+        onContextMenu: stop,
         onKeyDown: (e) => {
           if (e.key === "Escape" && !isMentionPickerOpen()) pendingComment.set(editor, null);
         },
-        children: /* @__PURE__ */ jsx(
+        children: canComment ? /* @__PURE__ */ jsx(
           CommentComposer,
           {
-            author: currentUserId ? resolveName(currentUserId) ?? UNKNOWN_AUTHOR : "",
+            author: me ?? UNKNOWN_COMMENT_AUTHOR,
             placeholder: msg("comments.add-placeholder"),
             sendLabel: msg("comments.send"),
             value: text,
-            onChange: setText,
+            onChange: (value) => {
+              setText(value);
+              saveCommentDraft(NEW_COMMENT_DRAFT, value);
+            },
             onSubmit: submit,
-            disabled: isCommentEmpty(text),
+            disabled: isCommentEmpty(text) || !currentUserId,
             getMentionSuggestions,
             renderMentionSuggestion,
             autoFocus: true,
             leading: draftAvatar
           }
-        )
+        ) : ComposerFallback && /* @__PURE__ */ jsx(ComposerFallback, { context: "pending" })
       }
     ),
     container