@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.5f14a24c179e

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

@@ -13,6 +13,11 @@ import {
   createCommentThread,
   getFirstCharacter,
   react,
+  TldrawUiDropdownMenuContent,
+  TldrawUiDropdownMenuGroup,
+  TldrawUiDropdownMenuItem,
+  TldrawUiDropdownMenuRoot,
+  TldrawUiDropdownMenuTrigger,
   TldrawUiIcon,
   useContainer,
   useEditor,
@@ -32,7 +37,14 @@ import { CountBadge } from "../ui/count-badge.mjs";
 import { isMentionPickerOpen } from "../ui/mention-suggestion.mjs";
 import { collectClusterLeaves } from "./cluster-input.mjs";
 import { CommentBody } from "./comment-body.mjs";
-import { UNKNOWN_AUTHOR } from "./comment-render.mjs";
+import {
+  clearCommentDraft,
+  getCommentDraft,
+  NEW_COMMENT_DRAFT,
+  replyDraftSlot,
+  saveCommentDraft
+} from "./comment-drafts.mjs";
+import { UNKNOWN_AUTHOR, UNKNOWN_COMMENT_AUTHOR } from "./comment-render.mjs";
 import { getCommentRecord, putCommentRecords, removeCommentRecords } from "./comment-store.mjs";
 import { useCommentThreads, useThreadComments } from "./hooks.mjs";
 import { useCommentingEnabled } from "./license.mjs";
@@ -53,12 +65,33 @@ import {
   toggleCommentsHidden,
   usePendingComment
 } from "./state.mjs";
-import { anchorPagePoint, regionPinPoint, shapeAnchorAt } from "./thread-state.mjs";
+import {
+  anchorPagePoint,
+  regionAnchorPinCorner,
+  regionPinPoint,
+  shapeAnchorAt
+} from "./thread-state.mjs";
 const stop = (e) => e.stopPropagation();
+const IMPRECISE_PIN_INSET_PX = 20;
+function impreciseShapePinInset(anchor, spot) {
+  if (anchor.type !== "shape" || anchor.isPrecise) return null;
+  return {
+    x: Math.sign(0.5 - spot.x) * IMPRECISE_PIN_INSET_PX,
+    y: Math.sign(0.5 - spot.y) * IMPRECISE_PIN_INSET_PX
+  };
+}
+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 initialOf = (name) => (getFirstCharacter(name.trim()) || "?").toUpperCase();
 const CLUSTER_FADE_MS = 150;
 const CLUSTER_EXPAND_ZOOM_MS = 450;
-const draftAvatar = /* @__PURE__ */ jsx(CommentPin, { children: /* @__PURE__ */ jsxs(
+const draftAvatar = (color) => /* @__PURE__ */ jsx(CommentPin, { color, children: /* @__PURE__ */ jsxs(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -76,11 +109,11 @@ const draftAvatar = /* @__PURE__ */ jsx(CommentPin, { children: /* @__PURE__ */
     ]
   }
 ) });
-function toCardProps(comment, props, components) {
+function toCardProps(comment, props, components, resolveName) {
   const Body = components.CommentBody;
-  const body = Body ? /* @__PURE__ */ jsx(Body, { comment }) : /* @__PURE__ */ jsx(CommentBody, { richText: comment.body, resolveName: props.resolveName });
+  const body = Body ? /* @__PURE__ */ jsx(Body, { comment }) : /* @__PURE__ */ jsx(CommentBody, { richText: comment.body, resolveName });
   return {
-    author: props.resolveName(comment.authorId) ?? UNKNOWN_AUTHOR,
+    author: props.resolveAuthor(comment.authorId) ?? UNKNOWN_COMMENT_AUTHOR,
     body,
     date: new Date(comment.createdAt).toISOString(),
     you: comment.authorId === props.currentUserId,
@@ -102,24 +135,23 @@ function CanvasCommentsLayer(props) {
   );
   useEffect(() => setRegionCommentOptions(editor, regionOptions), [editor, regionOptions]);
   const layerRef = useRef(null);
-  usePassThroughWheelEvents(layerRef);
   usePassThroughMouseOverEvents(layerRef);
   const deepLinkHandled = useRef(false);
   const threads = useCommentThreads(editor);
   const pending = usePendingComment();
   const openId = useValue("open thread id", () => openThreadId.get(editor), [editor]);
   const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
-  const [movedThreadIds, setMovedThreadIds] = useState(EMPTY_SET);
+  const [heldThreadIds, setHeldThreadIds] = useState(EMPTY_SET);
   const adoptOnRebuild = useRef(false);
   const clusterLeaves = useValue(
     "comment cluster leaves",
     () => collectClusterLeaves(
       editor,
-      threads.filter((thread) => !movedThreadIds.has(thread.id)),
+      threads.filter((thread) => !heldThreadIds.has(thread.id)),
       openThreadId.get(editor),
       impreciseShapeAnchor
     ),
-    [editor, threads, impreciseShapeAnchor, movedThreadIds]
+    [editor, threads, impreciseShapeAnchor, heldThreadIds]
   );
   const clusterZoomBounds = useValue(
     "comment cluster zoom bounds",
@@ -134,21 +166,41 @@ function CanvasCommentsLayer(props) {
   }, [clusterLeaves, clusterZoomBounds, editor]);
   const [renderedModel, setRenderedModel] = useState(latestModel);
   let clusterModel = renderedModel;
-  if (renderedModel !== latestModel && (adoptOnRebuild.current || hasRemovedLeaves(renderedModel.table, latestModel.table))) {
+  const pageId = useValue("comment cluster page", () => editor.getCurrentPageId(), [editor]);
+  const pageRef = useRef(pageId);
+  if (pageRef.current !== pageId) {
+    pageRef.current = pageId;
+    adoptOnRebuild.current = false;
+    latestModel.runtime.seed(editor.getZoomLevel());
+    if (heldThreadIds.size > 0) setHeldThreadIds(EMPTY_SET);
+    setRenderedModel(latestModel);
+    clusterModel = latestModel;
+  }
+  const rejoinPending = heldThreadIds.size === 0 && adoptOnRebuild.current;
+  if (renderedModel !== latestModel && rejoinPending) {
     adoptOnRebuild.current = false;
     latestModel.runtime.seedFrom(editor.getZoomLevel(), renderedModel.runtime.getVisible());
     setRenderedModel(latestModel);
     clusterModel = latestModel;
+  } else if (heldThreadIds.size === 0 && renderedModel === latestModel) {
+    adoptOnRebuild.current = false;
   }
   const newlyMovedIds = findMovedClusteredLeafIds(clusterModel, latestModel);
   if (newlyMovedIds.length > 0) {
-    console.debug(`[comments] pins popped out of clustering: ${newlyMovedIds.join(", ")}`);
-    const next = new Set(movedThreadIds);
+    const next = new Set(heldThreadIds);
     for (const id of newlyMovedIds) next.add(id);
-    setMovedThreadIds(next);
+    setHeldThreadIds(next);
+  }
+  {
+    const latestLeafIds = new Set(latestModel.table.leaves.map((leaf) => leaf.id));
+    for (const leaf of clusterModel.table.leaves) {
+      if (!latestLeafIds.has(leaf.id)) {
+        clusterModel.runtime.detachLeaf(leaf.id);
+      }
+    }
   }
   useEffect(() => {
-    if (movedThreadIds.size === 0) return;
+    if (heldThreadIds.size === 0) return;
     let lastZoom = editor.getZoomLevel();
     return react("rejoin moved comment pins on zoom out", () => {
       const zoom = editor.getZoomLevel();
@@ -156,9 +208,9 @@ function CanvasCommentsLayer(props) {
       lastZoom = zoom;
       if (zoom >= prevZoom) return;
       adoptOnRebuild.current = true;
-      setMovedThreadIds(EMPTY_SET);
+      setHeldThreadIds(EMPTY_SET);
     });
-  }, [movedThreadIds, editor]);
+  }, [heldThreadIds, editor]);
   useEffect(() => {
     if (clusterModel === latestModel) return;
     let lastZoom = editor.getZoomLevel();
@@ -171,31 +223,31 @@ function CanvasCommentsLayer(props) {
       setRenderedModel(latestModel);
     });
   }, [clusterModel, latestModel, editor]);
+  const partitionVersion = clusterModel.runtime.version;
   const orphanThreads = useMemo(() => {
     if (clusterModel === latestModel) return [];
-    const renderedIds = new Set(clusterModel.table.leaves.map((leaf) => leaf.id));
+    const displayed = /* @__PURE__ */ new Set();
+    for (const node of clusterModel.runtime.getVisible().values()) {
+      for (const member of node.members) displayed.add(member);
+    }
     const latestIds = new Set(latestModel.table.leaves.map((leaf) => leaf.id));
-    return threads.filter((thread) => latestIds.has(thread.id) && !renderedIds.has(thread.id));
-  }, [clusterModel, latestModel, threads]);
-  const movedThreads = useMemo(
-    () => threads.filter((thread) => movedThreadIds.has(thread.id) && thread.id !== openId),
-    [threads, movedThreadIds, openId]
+    return threads.filter((thread) => latestIds.has(thread.id) && !displayed.has(thread.id));
+  }, [clusterModel, latestModel, threads, partitionVersion]);
+  const heldThreads = useMemo(
+    () => threads.filter((thread) => heldThreadIds.has(thread.id) && thread.id !== openId),
+    [threads, heldThreadIds, openId]
   );
-  const clusterCursor = useValue(
-    "comment cluster cursor",
+  useValue(
+    "comment cluster version",
     () => {
       clusterModel.runtime.onCamera(editor.getZoomLevel());
-      return clusterModel.runtime.k;
+      return clusterModel.runtime.version;
     },
     [clusterModel, editor]
   );
   const visibleNodes = useMemo(() => {
-    const nodes = Array.from(clusterModel.runtime.getVisible().values());
-    console.debug(
-      `[comments] cluster cursor k=${clusterCursor} \u2192 re-rendering ${nodes.length} visible nodes`
-    );
-    return nodes;
-  }, [clusterModel, clusterCursor]);
+    return Array.from(clusterModel.runtime.getVisible().values());
+  }, [clusterModel, partitionVersion]);
   const fadeNodes = useFadeVisibleNodes(visibleNodes, clusterModel);
   const threadsById = useMemo(
     () => new Map(threads.map((thread) => [thread.id, thread])),
@@ -254,7 +306,7 @@ function CanvasCommentsLayer(props) {
       if (e.key !== "Escape" || openThreadId.get(editor) === null) return;
       if (isMentionPickerOpen()) return;
       const target = e.target;
-      if (target && target.closest(".cmt-editing")) return;
+      if (target && target.closest(".tlui-cmt-editing")) return;
       openThreadId.set(editor, null);
       e.preventDefault();
       e.stopPropagation();
@@ -275,7 +327,7 @@ function CanvasCommentsLayer(props) {
   }, [editor]);
   if (hidden) return null;
   return createPortal(
-    /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "cmt-canvas-layer", children: [
+    /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "tlui-cmt-canvas-layer", children: [
       options.enableClustering ? /* @__PURE__ */ jsxs(Fragment, { children: [
         fadeNodes.map(({ node, phase }) => {
           let content;
@@ -306,7 +358,7 @@ function CanvasCommentsLayer(props) {
           },
           thread.id
         )),
-        movedThreads.map((thread) => /* @__PURE__ */ jsx(
+        heldThreads.map((thread) => /* @__PURE__ */ jsx(
           ThreadPin,
           {
             editor,
@@ -415,7 +467,7 @@ function cancelClusterFadeFrame(frame) {
   else window.clearTimeout(frame);
 }
 function clusterFadeClassName(phase) {
-  return `cmt-cluster-fade cmt-cluster-fade--${phase}`;
+  return `tlui-cmt-cluster-fade tlui-cmt-cluster-fade--${phase}`;
 }
 function findMovedClusteredLeafIds(rendered, latest) {
   if (rendered.table === latest.table) return [];
@@ -432,11 +484,6 @@ function findMovedClusteredLeafIds(rendered, latest) {
   }
   return moved;
 }
-function hasRemovedLeaves(rendered, latest) {
-  if (rendered.leaves.length === 0) return false;
-  const latestIds = new Set(latest.leaves.map((leaf) => leaf.id));
-  return rendered.leaves.some((leaf) => !latestIds.has(leaf.id));
-}
 function getClusterZoomBounds(editor) {
   const cameraOptions = editor.getCameraOptions();
   const baseZoom = cameraOptions.constraints ? editor.getBaseZoom() : 1;
@@ -488,6 +535,9 @@ const ClusterBadge = memo(function ClusterBadge2({
   node,
   onExpand
 }) {
+  const container = useContainer();
+  const badgeRef = useRef(null);
+  usePassThroughWheelEvents(badgeRef);
   const point = useValue(
     "cluster badge point",
     () => {
@@ -501,9 +551,16 @@ const ClusterBadge = memo(function ClusterBadge2({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "cmt-canvas-cluster",
+      ref: badgeRef,
+      className: "tlui-cmt-canvas-cluster",
       style: { left: point.x, top: point.y },
-      onPointerDown: stop,
+      onPointerDown: (e) => {
+        if (isCanvasPanGesture(editor, e)) {
+          forwardPointerEventToCanvas(container, e);
+          return;
+        }
+        e.stopPropagation();
+      },
       onClick: (e) => {
         e.stopPropagation();
         onExpand(node);
@@ -526,7 +583,19 @@ function ThreadPopover({
   usePassThroughWheelEvents(ref);
   usePassThroughMouseOverEvents(ref);
   return createPortal(
-    /* @__PURE__ */ jsx("div", { ref, className: "cmt-canvas-popover", style, onPointerDown: stop, children }),
+    // contextmenu also stops here: portals bubble React events to the canvas's context-menu
+    // trigger (the layer mounts inside it), which would open the canvas menu over this panel.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: "tlui-cmt-canvas-popover",
+        style,
+        onPointerDown: stop,
+        onContextMenu: stop,
+        children
+      }
+    ),
     container
   );
 }
@@ -547,12 +616,19 @@ function RegionBox({
     [editor, box.x, box.y, box.w, box.h]
   );
   const grabRef = useRef(null);
+  const container = useContainer();
+  const boxRef = useRef(null);
+  usePassThroughWheelEvents(boxRef);
   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) => {
+    if (isCanvasPanGesture(editor, e)) {
+      forwardPointerEventToCanvas(container, e);
+      return;
+    }
     e.stopPropagation();
     grabRef.current = { page: editor.screenToPage({ x: e.clientX, y: e.clientY }), box };
     e.currentTarget.setPointerCapture(e.pointerId);
@@ -571,7 +647,8 @@ function RegionBox({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: movable ? "cmt-canvas-region cmt-canvas-region--movable" : "cmt-canvas-region",
+      ref: boxRef,
+      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,
@@ -645,7 +722,7 @@ function RegionResizeHandles({
   return /* @__PURE__ */ jsx(Fragment, { children: points.map((h) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: "cmt-canvas-region-handle",
+      className: "tlui-cmt-canvas-region-handle",
       style: { left: h.left, top: h.top, cursor: h.cursor },
       onPointerDown: startResize,
       onPointerMove: onResize(h),
@@ -662,13 +739,15 @@ const ThreadPin = memo(function ThreadPin2({
 }) {
   const {
     currentUserId,
-    resolveName,
+    resolveAuthor,
     onPostComment,
     isCommentUnread,
     onCommentRead,
     getMentionSuggestions,
     renderMentionSuggestion
   } = props;
+  const resolveName = useCallback((id) => resolveAuthor(id)?.name, [resolveAuthor]);
+  const me = currentUserId ? resolveAuthor(currentUserId) : void 0;
   const options = useCommentingOptions();
   const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
   const container = useContainer();
@@ -678,7 +757,9 @@ const ThreadPin = memo(function ThreadPin2({
     editor,
     thread.id
   ]);
-  const [reply, setReply] = useState(EMPTY_COMMENT);
+  const [reply, setReply] = useState(
+    () => getCommentDraft(replyDraftSlot(thread.id)) ?? EMPTY_COMMENT
+  );
   const [editingId, setEditingId] = useState(null);
   const [editText, setEditText] = useState(EMPTY_COMMENT);
   const [dragPagePoint, setDragPagePoint] = useState(null);
@@ -697,24 +778,24 @@ 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 pinCorner = thread.anchor.type === "region" ? regionAnchorPinCorner(editor, thread.anchor) : regionOptions.pinCorner;
   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]
+    () => regionOptions.resize === "edges" ? REGION_EDGES : REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),
+    [regionOptions.resize, pinCorner]
   );
   const dragRef = useRef(null);
   const markerRef = useRef(null);
+  usePassThroughWheelEvents(markerRef);
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (e) => {
       const target = e.target;
       if (!target) return;
-      if (target.closest(".cmt-canvas-popover")) return;
+      if (target.closest(".tlui-cmt-canvas-popover")) return;
       const marker = markerRef.current;
       if (marker && marker.contains(target)) return;
-      if (target.closest(".cmt-canvas-region-handle, .cmt-canvas-region--movable")) return;
-      if (target.closest(".tlui-menu, [data-radix-popper-content-wrapper], .cmt-mention-popup"))
+      if (target.closest(".tlui-cmt-canvas-region-handle, .tlui-cmt-canvas-region--movable")) return;
+      if (target.closest(".tlui-menu, [data-radix-popper-content-wrapper], .tlui-cmt-mention-popup"))
         return;
       openThreadId.set(editor, null);
     };
@@ -726,7 +807,10 @@ const ThreadPin = memo(function ThreadPin2({
     () => {
       if (thread.pageId !== editor.getCurrentPageId()) return null;
       const pagePoint = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor);
-      return pagePoint ? editor.pageToViewport(pagePoint) : null;
+      if (!pagePoint) return null;
+      const viewportPoint = editor.pageToViewport(pagePoint);
+      const inset = impreciseShapePinInset(thread.anchor, impreciseShapeAnchor);
+      return inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint;
     },
     [editor, thread.anchor, thread.pageId, impreciseShapeAnchor]
   );
@@ -753,6 +837,7 @@ const ThreadPin = memo(function ThreadPin2({
       if (onPostComment) onPostComment(comment);
     });
     setReply(EMPTY_COMMENT);
+    clearCommentDraft(replyDraftSlot(thread.id));
   };
   const toggleResolve = () => {
     if (!currentUserId) return;
@@ -776,6 +861,16 @@ const ThreadPin = memo(function ThreadPin2({
     setEditingId(comment.id);
     setEditText(comment.body);
   };
+  const deleteComment = (comment) => {
+    commitCommentMutation(editor, () => {
+      if (comments.length === 1) {
+        openThreadId.set(editor, null);
+        removeCommentRecords(editor, [thread.id, comment.id]);
+      } else {
+        removeCommentRecords(editor, [comment.id]);
+      }
+    });
+  };
   const saveEdit = () => {
     const comment = comments.find((c) => c.id === editingId);
     if (!comment || isCommentEmpty(editText)) return;
@@ -790,7 +885,7 @@ const ThreadPin = memo(function ThreadPin2({
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: "cmt-editing",
+          className: "tlui-cmt-editing",
           onKeyDown: (e) => {
             if (e.key === "Escape") {
               setEditingId(null);
@@ -819,15 +914,46 @@ const ThreadPin = memo(function ThreadPin2({
       CommentCard,
       {
         ...card,
-        actions: comment.authorId === currentUserId ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "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
+        actions: comment.authorId === currentUserId ? /* @__PURE__ */ jsxs(TldrawUiDropdownMenuRoot, { id: `comment-actions-${comment.id}`, children: [
+          /* @__PURE__ */ jsx(TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "tlui-cmt-thread__action",
+              title: msg("comments.more-options"),
+              children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "dots-vertical", label: msg("comments.more-options"), small: true })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            TldrawUiDropdownMenuContent,
+            {
+              className: "tlui-cmt-menu",
+              side: "bottom",
+              align: "end",
+              alignOffset: 0,
+              children: /* @__PURE__ */ jsxs(TldrawUiDropdownMenuGroup, { children: [
+                /* @__PURE__ */ jsx(TldrawUiDropdownMenuItem, { children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "tlui-cmt-menu-item",
+                    onClick: () => startEdit(comment),
+                    children: /* @__PURE__ */ jsx("span", { children: msg("comments.edit-comment") })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TldrawUiDropdownMenuItem, { children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "tlui-cmt-menu-item tlui-cmt-menu-item--danger",
+                    onClick: () => deleteComment(comment),
+                    children: /* @__PURE__ */ jsx("span", { children: msg("comments.delete-comment") })
+                  }
+                ) })
+              ] })
+            }
+          )
+        ] }) : void 0
       }
     );
   };
@@ -835,7 +961,7 @@ const ThreadPin = memo(function ThreadPin2({
     currentUserId && /* @__PURE__ */ jsx(
       "button",
       {
-        className: "cmt-thread__action",
+        className: "tlui-cmt-thread__action",
         title: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
         onClick: toggleResolve,
         children: /* @__PURE__ */ jsx(
@@ -848,33 +974,63 @@ const ThreadPin = memo(function ThreadPin2({
         )
       }
     ),
-    currentUserId && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "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: "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 })
-      }
-    )
+    currentUserId && /* @__PURE__ */ jsxs(TldrawUiDropdownMenuRoot, { id: `comment-thread-actions-${thread.id}`, children: [
+      /* @__PURE__ */ jsx(TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "tlui-cmt-thread__action",
+          title: msg("comments.more-options"),
+          children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "dots-vertical", label: msg("comments.more-options"), small: true })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        TldrawUiDropdownMenuContent,
+        {
+          className: "tlui-cmt-menu",
+          side: "bottom",
+          align: "end",
+          alignOffset: 0,
+          children: /* @__PURE__ */ jsx(TldrawUiDropdownMenuGroup, { children: /* @__PURE__ */ jsx(TldrawUiDropdownMenuItem, { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "tlui-cmt-menu-item tlui-cmt-menu-item--danger",
+              onClick: deleteThread,
+              children: /* @__PURE__ */ jsx("span", { children: msg("comments.delete") })
+            }
+          ) }) })
+        }
+      )
+    ] })
   ] });
   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 }) : initialOf(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, impreciseShapeAnchor);
+    const inset = impreciseShapePinInset(thread.anchor, impreciseShapeAnchor);
+    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) => {
@@ -883,7 +1039,8 @@ const ThreadPin = memo(function ThreadPin2({
     if (isRegion && !pinMovable) 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 });
+    setDragPagePoint({ x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY });
   };
   const endDrag = (e) => {
     const drag = dragRef.current;
@@ -896,14 +1053,15 @@ const ThreadPin = memo(function ThreadPin2({
       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 });
@@ -911,19 +1069,21 @@ const ThreadPin = memo(function ThreadPin2({
     }
     commitCommentMutation(editor, () => putCommentRecords(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 } }]),
+      // Spread the existing anchor first so the region's pin corner survives a resize.
+      () => putCommentRecords(editor, [{ ...thread, anchor: { ...regionAnchor, ...bounds } }]),
       {
         history: "ignore"
       }
@@ -953,44 +1113,51 @@ const ThreadPin = memo(function ThreadPin2({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: open ? "cmt-canvas-pin cmt-canvas-pin--open" : "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",
             {
               ref: markerRef,
-              className: "cmt-canvas-pin__marker",
+              className: "tlui-cmt-canvas-pin__marker",
               onPointerDown: startDrag,
               onPointerMove: onDrag,
               onPointerUp: endDrag,
               onPointerEnter: () => setPinHovered(true),
               onPointerLeave: () => setPinHovered(false),
-              children: /* @__PURE__ */ jsx(CommentPin, { resolved: thread.resolved != null, open, children: pinContent })
+              children: /* @__PURE__ */ jsx(CommentPin, { resolved: thread.resolved != null, open, color: threadAuthor?.color, children: pinContent })
             }
           ),
           open && /* @__PURE__ */ jsx(
             ThreadPopover,
             {
               container,
-              style: { left: renderPoint.x + 36, top: renderPoint.y - 28 },
+              style: { left: renderPoint.x + 48, top: renderPoint.y - 54 },
               children: /* @__PURE__ */ jsx(
                 CommentThread,
                 {
                   header: msg("comments.thread-title"),
                   headerActions,
                   renderComment,
-                  comments: comments.map((c) => toCardProps(c, props, options.components)),
+                  comments: comments.map((c) => toCardProps(c, props, options.components, resolveName)),
                   resolvedBanner: thread.resolved ? msg("comments.resolved-by").replace(
                     "{name}",
-                    resolveName(thread.resolved.by) ?? UNKNOWN_AUTHOR
+                    resolveAuthor(thread.resolved.by)?.name ?? UNKNOWN_AUTHOR
                   ) : void 0,
                   composer: currentUserId && !thread.resolved ? {
-                    author: resolveName(currentUserId) ?? UNKNOWN_AUTHOR,
+                    author: me ?? UNKNOWN_COMMENT_AUTHOR,
                     placeholder: msg("comments.reply-placeholder"),
                     sendLabel: msg("comments.send"),
                     value: reply,
-                    onChange: setReply,
+                    onChange: (value) => {
+                      setReply(value);
+                      saveCommentDraft(replyDraftSlot(thread.id), value);
+                    },
                     onSubmit: postReply,
                     disabled: isCommentEmpty(reply),
                     getMentionSuggestions,
@@ -1009,12 +1176,15 @@ function PendingComposer({
   editor,
   pending,
   currentUserId,
-  resolveName,
+  resolveAuthor,
   onPostComment,
   getMentionSuggestions,
   renderMentionSuggestion
 }) {
-  const [text, setText] = useState(EMPTY_COMMENT);
+  const me = currentUserId ? resolveAuthor(currentUserId) : void 0;
+  const [text, setText] = useState(
+    () => getCommentDraft(NEW_COMMENT_DRAFT) ?? EMPTY_COMMENT
+  );
   const ref = useRef(null);
   const msg = useTranslation();
   const container = useContainer();
@@ -1029,7 +1199,7 @@ function PendingComposer({
       const el = ref.current;
       const target = e.target;
       if (!el || !target) return;
-      if (el.contains(target) || target.closest(".cmt-mention-popup")) return;
+      if (el.contains(target) || target.closest(".tlui-cmt-mention-popup")) return;
       pendingComment.set(editor, null);
     };
     document.addEventListener("pointerdown", onPointerDown, true);
@@ -1054,6 +1224,7 @@ function PendingComposer({
       if (onPostComment) onPostComment(comment);
     });
     setText(EMPTY_COMMENT);
+    clearCommentDraft(NEW_COMMENT_DRAFT);
     pendingComment.set(editor, null);
   };
   return createPortal(
@@ -1061,26 +1232,33 @@ function PendingComposer({
       "div",
       {
         ref,
-        className: "cmt-canvas-composer",
+        className: [
+          "tlui-cmt-canvas-composer",
+          pending.anchor.type === "region" && "tlui-cmt-canvas-composer--region"
+        ].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(
           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),
             getMentionSuggestions,
             renderMentionSuggestion,
             autoFocus: true,
-            leading: draftAvatar
+            leading: draftAvatar(me?.color)
           }
         )
       }