@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.1640468db8fd

package/dist-cjs/canvas/comments-overlay.js

@@ -34,8 +34,10 @@ var import_comment_pin = require("../ui/comment-pin");
 var import_comment_thread = require("../ui/comment-thread");
 var import_count_badge = require("../ui/count-badge");
 var import_mention_suggestion = require("../ui/mention-suggestion");
+var import_tooltip_button = require("../ui/tooltip-button");
 var import_cluster_input = require("./cluster-input");
 var import_comment_body = require("./comment-body");
+var import_comment_drafts = require("./comment-drafts");
 var import_comment_render = require("./comment-render");
 var import_comment_store = require("./comment-store");
 var import_hooks = require("./hooks");
@@ -45,10 +47,26 @@ var import_region_options = require("./region-options");
 var import_state = require("./state");
 var import_thread_state = require("./thread-state");
 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) => ((0, import_tldraw.getFirstCharacter)(name.trim()) || "?").toUpperCase();
 const CLUSTER_FADE_MS = 150;
 const CLUSTER_EXPAND_ZOOM_MS = 450;
-const draftAvatar = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_pin.CommentPin, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+const draftAvatar = (color) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_pin.CommentPin, { color, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -66,11 +84,11 @@ const draftAvatar = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_p
     ]
   }
 ) });
-function toCardProps(comment, props, components) {
+function toCardProps(comment, props, components, resolveName) {
   const Body = components.CommentBody;
-  const body = Body ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Body, { comment }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_body.CommentBody, { richText: comment.body, resolveName: props.resolveName });
+  const body = Body ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Body, { comment }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_body.CommentBody, { richText: comment.body, resolveName });
   return {
-    author: props.resolveName(comment.authorId) ?? import_comment_render.UNKNOWN_AUTHOR,
+    author: props.resolveAuthor(comment.authorId) ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR,
     body,
     date: new Date(comment.createdAt).toISOString(),
     you: comment.authorId === props.currentUserId,
@@ -92,24 +110,23 @@ function CanvasCommentsLayer(props) {
   );
   (0, import_react.useEffect)(() => (0, import_region_options.setRegionCommentOptions)(editor, regionOptions), [editor, regionOptions]);
   const layerRef = (0, import_react.useRef)(null);
-  (0, import_tldraw.usePassThroughWheelEvents)(layerRef);
   (0, import_tldraw.usePassThroughMouseOverEvents)(layerRef);
   const deepLinkHandled = (0, import_react.useRef)(false);
   const threads = (0, import_hooks.useCommentThreads)(editor);
   const pending = (0, import_state.usePendingComment)();
   const openId = (0, import_tldraw.useValue)("open thread id", () => import_state.openThreadId.get(editor), [editor]);
   const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
-  const [movedThreadIds, setMovedThreadIds] = (0, import_react.useState)(EMPTY_SET);
+  const [heldThreadIds, setHeldThreadIds] = (0, import_react.useState)(EMPTY_SET);
   const adoptOnRebuild = (0, import_react.useRef)(false);
   const clusterLeaves = (0, import_tldraw.useValue)(
     "comment cluster leaves",
     () => (0, import_cluster_input.collectClusterLeaves)(
       editor,
-      threads.filter((thread) => !movedThreadIds.has(thread.id)),
+      threads.filter((thread) => !heldThreadIds.has(thread.id)),
       import_state.openThreadId.get(editor),
       impreciseShapeAnchor
     ),
-    [editor, threads, impreciseShapeAnchor, movedThreadIds]
+    [editor, threads, impreciseShapeAnchor, heldThreadIds]
   );
   const clusterZoomBounds = (0, import_tldraw.useValue)(
     "comment cluster zoom bounds",
@@ -124,21 +141,41 @@ function CanvasCommentsLayer(props) {
   }, [clusterLeaves, clusterZoomBounds, editor]);
   const [renderedModel, setRenderedModel] = (0, import_react.useState)(latestModel);
   let clusterModel = renderedModel;
-  if (renderedModel !== latestModel && (adoptOnRebuild.current || hasRemovedLeaves(renderedModel.table, latestModel.table))) {
+  const pageId = (0, import_tldraw.useValue)("comment cluster page", () => editor.getCurrentPageId(), [editor]);
+  const pageRef = (0, import_react.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);
+      }
+    }
   }
   (0, import_react.useEffect)(() => {
-    if (movedThreadIds.size === 0) return;
+    if (heldThreadIds.size === 0) return;
     let lastZoom = editor.getZoomLevel();
     return (0, import_tldraw.react)("rejoin moved comment pins on zoom out", () => {
       const zoom = editor.getZoomLevel();
@@ -146,9 +183,9 @@ function CanvasCommentsLayer(props) {
       lastZoom = zoom;
       if (zoom >= prevZoom) return;
       adoptOnRebuild.current = true;
-      setMovedThreadIds(EMPTY_SET);
+      setHeldThreadIds(EMPTY_SET);
     });
-  }, [movedThreadIds, editor]);
+  }, [heldThreadIds, editor]);
   (0, import_react.useEffect)(() => {
     if (clusterModel === latestModel) return;
     let lastZoom = editor.getZoomLevel();
@@ -161,31 +198,31 @@ function CanvasCommentsLayer(props) {
       setRenderedModel(latestModel);
     });
   }, [clusterModel, latestModel, editor]);
+  const partitionVersion = clusterModel.runtime.version;
   const orphanThreads = (0, import_react.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 = (0, import_react.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 = (0, import_react.useMemo)(
+    () => threads.filter((thread) => heldThreadIds.has(thread.id) && thread.id !== openId),
+    [threads, heldThreadIds, openId]
   );
-  const clusterCursor = (0, import_tldraw.useValue)(
-    "comment cluster cursor",
+  (0, import_tldraw.useValue)(
+    "comment cluster version",
     () => {
       clusterModel.runtime.onCamera(editor.getZoomLevel());
-      return clusterModel.runtime.k;
+      return clusterModel.runtime.version;
     },
     [clusterModel, editor]
   );
   const visibleNodes = (0, import_react.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 = (0, import_react.useMemo)(
     () => new Map(threads.map((thread) => [thread.id, thread])),
@@ -244,7 +281,7 @@ function CanvasCommentsLayer(props) {
       if (e.key !== "Escape" || import_state.openThreadId.get(editor) === null) return;
       if ((0, import_mention_suggestion.isMentionPickerOpen)()) return;
       const target = e.target;
-      if (target && target.closest(".cmt-editing")) return;
+      if (target && target.closest(".tlui-cmt-editing")) return;
       import_state.openThreadId.set(editor, null);
       e.preventDefault();
       e.stopPropagation();
@@ -265,7 +302,7 @@ function CanvasCommentsLayer(props) {
   }, [editor]);
   if (hidden) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: layerRef, className: "cmt-canvas-layer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: layerRef, className: "tlui-cmt-canvas-layer", children: [
       options.enableClustering ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         fadeNodes.map(({ node, phase }) => {
           let content;
@@ -296,7 +333,7 @@ function CanvasCommentsLayer(props) {
           },
           thread.id
         )),
-        movedThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        heldThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           ThreadPin,
           {
             editor,
@@ -405,7 +442,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 [];
@@ -422,11 +459,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;
@@ -478,6 +510,9 @@ const ClusterBadge = (0, import_react.memo)(function ClusterBadge2({
   node,
   onExpand
 }) {
+  const container = (0, import_tldraw.useContainer)();
+  const badgeRef = (0, import_react.useRef)(null);
+  (0, import_tldraw.usePassThroughWheelEvents)(badgeRef);
   const point = (0, import_tldraw.useValue)(
     "cluster badge point",
     () => {
@@ -491,9 +526,16 @@ const ClusterBadge = (0, import_react.memo)(function ClusterBadge2({
   return /* @__PURE__ */ (0, import_jsx_runtime.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);
@@ -516,7 +558,19 @@ function ThreadPopover({
   (0, import_tldraw.usePassThroughWheelEvents)(ref);
   (0, import_tldraw.usePassThroughMouseOverEvents)(ref);
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: "tlui-cmt-canvas-popover",
+        style,
+        onPointerDown: stop,
+        onContextMenu: stop,
+        children
+      }
+    ),
     container
   );
 }
@@ -537,12 +591,19 @@ function RegionBox({
     [editor, box.x, box.y, box.w, box.h]
   );
   const grabRef = (0, import_react.useRef)(null);
+  const container = (0, import_tldraw.useContainer)();
+  const boxRef = (0, import_react.useRef)(null);
+  (0, import_tldraw.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);
@@ -561,7 +622,8 @@ function RegionBox({
   return /* @__PURE__ */ (0, import_jsx_runtime.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,
@@ -635,7 +697,7 @@ function RegionResizeHandles({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: points.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.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),
@@ -652,13 +714,15 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
 }) {
   const {
     currentUserId,
-    resolveName,
+    resolveAuthor,
     onPostComment,
     isCommentUnread,
     onCommentRead,
     getMentionSuggestions,
     renderMentionSuggestion
   } = props;
+  const resolveName = (0, import_react.useCallback)((id) => resolveAuthor(id)?.name, [resolveAuthor]);
+  const me = currentUserId ? resolveAuthor(currentUserId) : void 0;
   const options = (0, import_options.useCommentingOptions)();
   const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
   const container = (0, import_tldraw.useContainer)();
@@ -668,7 +732,9 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     editor,
     thread.id
   ]);
-  const [reply, setReply] = (0, import_react.useState)(import_comment_extensions.EMPTY_COMMENT);
+  const [reply, setReply] = (0, import_react.useState)(
+    () => (0, import_comment_drafts.getCommentDraft)((0, import_comment_drafts.replyDraftSlot)(thread.id)) ?? import_comment_extensions.EMPTY_COMMENT
+  );
   const [editingId, setEditingId] = (0, import_react.useState)(null);
   const [editText, setEditText] = (0, import_react.useState)(import_comment_extensions.EMPTY_COMMENT);
   const [dragPagePoint, setDragPagePoint] = (0, import_react.useState)(null);
@@ -687,24 +753,29 @@ const ThreadPin = (0, import_react.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" ? (0, import_thread_state.regionAnchorPinCorner)(editor, thread.anchor) : regionOptions.pinCorner;
   const resizeHandles = (0, import_react.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 = (0, import_react.useRef)(null);
   const markerRef = (0, import_react.useRef)(null);
+  (0, import_tldraw.usePassThroughWheelEvents)(markerRef);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (dragRef.current) editor.setHintingShapes([]);
+    };
+  }, [editor]);
   (0, import_react.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;
       import_state.openThreadId.set(editor, null);
     };
@@ -716,7 +787,10 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     () => {
       if (thread.pageId !== editor.getCurrentPageId()) return null;
       const pagePoint = (0, import_thread_state.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]
   );
@@ -743,6 +817,7 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
       if (onPostComment) onPostComment(comment);
     });
     setReply(import_comment_extensions.EMPTY_COMMENT);
+    (0, import_comment_drafts.clearCommentDraft)((0, import_comment_drafts.replyDraftSlot)(thread.id));
   };
   const toggleResolve = () => {
     if (!currentUserId) return;
@@ -766,6 +841,16 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     setEditingId(comment.id);
     setEditText(comment.body);
   };
+  const deleteComment = (comment) => {
+    (0, import_state.commitCommentMutation)(editor, () => {
+      if (comments.length === 1) {
+        import_state.openThreadId.set(editor, null);
+        (0, import_comment_store.removeCommentRecords)(editor, [thread.id, comment.id]);
+      } else {
+        (0, import_comment_store.removeCommentRecords)(editor, [comment.id]);
+      }
+    });
+  };
   const saveEdit = () => {
     const comment = comments.find((c) => c.id === editingId);
     if (!comment || (0, import_comment_extensions.isCommentEmpty)(editText)) return;
@@ -780,7 +865,7 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
-          className: "cmt-editing",
+          className: "tlui-cmt-editing",
           onKeyDown: (e) => {
             if (e.key === "Escape") {
               setEditingId(null);
@@ -809,24 +894,54 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
       import_comment_card.CommentCard,
       {
         ...card,
-        actions: comment.authorId === currentUserId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          {
-            className: "cmt-thread__action",
-            title: msg("comments.edit"),
-            onClick: () => startEdit(comment),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "dots-horizontal", label: msg("comments.edit"), small: true })
-          }
-        ) : void 0
+        actions: comment.authorId === currentUserId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiDropdownMenuRoot, { id: `comment-actions-${comment.id}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tooltip_button.TooltipButton,
+            {
+              tooltip: msg("comments.more-options"),
+              className: "tlui-cmt-thread__action",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "dots-vertical", label: msg("comments.more-options"), small: true })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tldraw.TldrawUiDropdownMenuContent,
+            {
+              className: "tlui-cmt-menu",
+              side: "bottom",
+              align: "end",
+              alignOffset: 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiDropdownMenuGroup, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "tlui-cmt-menu-item",
+                    onClick: () => startEdit(comment),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: msg("comments.edit-comment") })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "tlui-cmt-menu-item tlui-cmt-menu-item--danger",
+                    onClick: () => deleteComment(comment),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: msg("comments.delete-comment") })
+                  }
+                ) })
+              ] })
+            }
+          )
+        ] }) : void 0
       }
     );
   };
   const headerActions = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     currentUserId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
+      import_tooltip_button.TooltipButton,
       {
-        className: "cmt-thread__action",
-        title: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
+        tooltip: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
+        className: "tlui-cmt-thread__action",
         onClick: toggleResolve,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_tldraw.TldrawUiIcon,
@@ -838,33 +953,62 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
         )
       }
     ),
-    currentUserId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        className: "cmt-thread__action",
-        title: msg("comments.delete"),
-        onClick: deleteThread,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "trash", label: msg("comments.delete"), small: true })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        className: "cmt-thread__action",
-        title: msg("comments.dismiss"),
-        onClick: () => import_state.openThreadId.set(editor, null),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "cross-2", label: msg("comments.dismiss"), small: true })
-      }
-    )
+    currentUserId && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiDropdownMenuRoot, { id: `comment-thread-actions-${thread.id}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tooltip_button.TooltipButton,
+        {
+          tooltip: msg("comments.more-options"),
+          className: "tlui-cmt-thread__action",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "dots-vertical", label: msg("comments.more-options"), small: true })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tldraw.TldrawUiDropdownMenuContent,
+        {
+          className: "tlui-cmt-menu",
+          side: "bottom",
+          align: "end",
+          alignOffset: 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "tlui-cmt-menu-item tlui-cmt-menu-item--danger",
+              onClick: deleteThread,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: msg("comments.delete") })
+            }
+          ) }) })
+        }
+      )
+    ] })
   ] });
   const PinContent = options.components.PinContent;
-  const pinContent = PinContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinContent, { thread, comments }) : initialOf(resolveName(thread.createdBy) ?? import_comment_render.UNKNOWN_AUTHOR);
+  const threadAuthor = resolveAuthor(thread.createdBy);
+  const pinContent = PinContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinContent, { thread, comments }) : initialOf(threadAuthor?.name ?? import_comment_render.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 = (0, import_thread_state.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) => {
@@ -873,7 +1017,23 @@ const ThreadPin = (0, import_react.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 });
+    const pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY };
+    setDragPagePoint(pagePoint);
+    if (!isRegion) {
+      const hit = editor.getShapeAtPoint(pagePoint, { hitInside: true });
+      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;
@@ -882,38 +1042,51 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
       e.currentTarget.releasePointerCapture(e.pointerId);
     }
     if (!drag) return;
+    editor.setHintingShapes([]);
     if (!drag.moved) {
       import_state.openThreadId.set(editor, import_state.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 ? (0, import_thread_state.shapeAnchorAt)(editor, hit.id, pagePoint, e.altKey) : { type: "point", x: pagePoint.x, y: pagePoint.y };
+      anchor = hit ? (0, import_thread_state.shapeAnchorAt)(
+        editor,
+        hit.id,
+        pagePoint,
+        (0, import_options.getCommentingOptions)(editor).shouldBePrecise(editor, {
+          shapeId: hit.id,
+          point: pagePoint,
+          altKey: e.altKey
+        })
+      ) : { type: "point", x: pagePoint.x, y: pagePoint.y };
     }
     (0, import_state.commitCommentMutation)(editor, () => (0, import_comment_store.putCommentRecords)(editor, [{ ...thread, anchor }]), "drag");
   };
-  const livePinPage = resizeBounds ? (0, import_thread_state.regionPinPoint)(resizeBounds, regionOptions.pinCorner) : dragPagePoint;
-  const renderPoint = livePinPage ? editor.pageToViewport(livePinPage) : point;
+  const livePinPage = resizeBounds ? (0, import_thread_state.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(
-      () => (0, import_comment_store.putCommentRecords)(editor, [{ ...thread, anchor: { type: "region", ...bounds } }]),
+      // Spread the existing anchor first so the region's pin corner survives a resize.
+      () => (0, import_comment_store.putCommentRecords)(editor, [{ ...thread, anchor: { ...regionAnchor, ...bounds } }]),
       {
         history: "ignore"
       }
@@ -943,44 +1116,52 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
               ref: markerRef,
-              className: "cmt-canvas-pin__marker",
+              className: "tlui-cmt-canvas-pin__marker",
               onPointerDown: startDrag,
               onPointerMove: onDrag,
               onPointerUp: endDrag,
+              onPointerCancel: cancelDrag,
               onPointerEnter: () => setPinHovered(true),
               onPointerLeave: () => setPinHovered(false),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_pin.CommentPin, { resolved: thread.resolved != null, open, children: pinContent })
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_pin.CommentPin, { resolved: thread.resolved != null, open, color: threadAuthor?.color, children: pinContent })
             }
           ),
           open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             ThreadPopover,
             {
               container,
-              style: { left: renderPoint.x + 36, top: renderPoint.y - 28 },
+              style: { left: renderPoint.x + 48, top: renderPoint.y - 54 },
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_comment_thread.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) ?? import_comment_render.UNKNOWN_AUTHOR
+                    resolveAuthor(thread.resolved.by)?.name ?? import_comment_render.UNKNOWN_AUTHOR
                   ) : void 0,
                   composer: currentUserId && !thread.resolved ? {
-                    author: resolveName(currentUserId) ?? import_comment_render.UNKNOWN_AUTHOR,
+                    author: me ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR,
                     placeholder: msg("comments.reply-placeholder"),
                     sendLabel: msg("comments.send"),
                     value: reply,
-                    onChange: setReply,
+                    onChange: (value) => {
+                      setReply(value);
+                      (0, import_comment_drafts.saveCommentDraft)((0, import_comment_drafts.replyDraftSlot)(thread.id), value);
+                    },
                     onSubmit: postReply,
                     disabled: (0, import_comment_extensions.isCommentEmpty)(reply),
                     getMentionSuggestions,
@@ -999,12 +1180,15 @@ function PendingComposer({
   editor,
   pending,
   currentUserId,
-  resolveName,
+  resolveAuthor,
   onPostComment,
   getMentionSuggestions,
   renderMentionSuggestion
 }) {
-  const [text, setText] = (0, import_react.useState)(import_comment_extensions.EMPTY_COMMENT);
+  const me = currentUserId ? resolveAuthor(currentUserId) : void 0;
+  const [text, setText] = (0, import_react.useState)(
+    () => (0, import_comment_drafts.getCommentDraft)(import_comment_drafts.NEW_COMMENT_DRAFT) ?? import_comment_extensions.EMPTY_COMMENT
+  );
   const ref = (0, import_react.useRef)(null);
   const msg = (0, import_tldraw.useTranslation)();
   const container = (0, import_tldraw.useContainer)();
@@ -1019,7 +1203,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;
       import_state.pendingComment.set(editor, null);
     };
     document.addEventListener("pointerdown", onPointerDown, true);
@@ -1044,6 +1228,7 @@ function PendingComposer({
       if (onPostComment) onPostComment(comment);
     });
     setText(import_comment_extensions.EMPTY_COMMENT);
+    (0, import_comment_drafts.clearCommentDraft)(import_comment_drafts.NEW_COMMENT_DRAFT);
     import_state.pendingComment.set(editor, null);
   };
   return (0, import_react_dom.createPortal)(
@@ -1051,26 +1236,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" && !(0, import_mention_suggestion.isMentionPickerOpen)()) import_state.pendingComment.set(editor, null);
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_comment_composer.CommentComposer,
           {
-            author: currentUserId ? resolveName(currentUserId) ?? import_comment_render.UNKNOWN_AUTHOR : "",
+            author: me ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR,
             placeholder: msg("comments.add-placeholder"),
             sendLabel: msg("comments.send"),
             value: text,
-            onChange: setText,
+            onChange: (value) => {
+              setText(value);
+              (0, import_comment_drafts.saveCommentDraft)(import_comment_drafts.NEW_COMMENT_DRAFT, value);
+            },
             onSubmit: submit,
             disabled: (0, import_comment_extensions.isCommentEmpty)(text),
             getMentionSuggestions,
             renderMentionSuggestion,
             autoFocus: true,
-            leading: draftAvatar
+            leading: draftAvatar(me?.color)
           }
         )
       }