@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

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

@@ -22,94 +22,98 @@ __export(comments_overlay_exports, {
 });
 module.exports = __toCommonJS(comments_overlay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_mentions = require("@tldraw/mentions");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_tldraw = require("tldraw");
 var import_computeClusterTable = require("../clustering/computeClusterTable");
 var import_runtime = require("../clustering/runtime");
-var import_comment_card = require("../ui/comment-card");
 var import_comment_composer = require("../ui/comment-composer");
 var import_comment_extensions = require("../ui/comment-extensions");
 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_anchor_lifecycle = require("./anchor-lifecycle");
 var import_cluster_input = require("./cluster-input");
-var import_comment_body = require("./comment-body");
+var import_comment_drafts = require("./comment-drafts");
+var import_comment_mutations = require("./comment-mutations");
 var import_comment_render = require("./comment-render");
 var import_comment_store = require("./comment-store");
 var import_hooks = require("./hooks");
 var import_license = require("./license");
 var import_options = require("./options");
-var import_region_options = require("./region-options");
+var import_pin_stacking = require("./pin-stacking");
 var import_state = require("./state");
+var import_thread_preview = require("./thread-preview");
+var import_thread_stack = require("./thread-stack");
 var import_thread_state = require("./thread-state");
+var import_thread_view = require("./thread-view");
 const stop = (e) => e.stopPropagation();
-const initialOf = (name) => ((0, import_tldraw.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__ */ (0, import_jsx_runtime.jsx)(import_comment_pin.CommentPin, { children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20h9" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(Body, { comment }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_body.CommentBody, { richText: comment.body, resolveName: props.resolveName });
-  return {
-    author: props.resolveName(comment.authorId) ?? import_comment_render.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 = (0, import_license.useCommentingEnabled)();
   if (!commentingEnabled) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CanvasCommentsLayer, { ...props });
 }
+function useTrailingPortalHost(container) {
+  const [host, setHost] = (0, import_react.useState)(null);
+  (0, import_react.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 = (0, import_tldraw.useEditor)();
   const options = (0, import_options.useCommentingOptions)();
   const container = (0, import_tldraw.useContainer)();
-  const regionOptions = (0, import_react.useMemo)(
-    () => ({ ...import_region_options.DEFAULT_REGION_COMMENT_OPTIONS, ...props.regionOptions }),
-    [props.regionOptions]
-  );
-  (0, import_react.useEffect)(() => (0, import_region_options.setRegionCommentOptions)(editor, regionOptions), [editor, regionOptions]);
+  const portalHost = useTrailingPortalHost(container);
   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 allThreads = (0, import_hooks.useCommentThreads)(editor);
   const pending = (0, import_state.usePendingComment)();
+  const canComment = (0, import_options.useCanComment)(props.currentUserId);
+  const canRenderComposer = canComment || options.components.ComposerFallback != null;
+  const showPendingComposer = pending != null && canRenderComposer;
+  (0, import_react.useEffect)(() => {
+    if (pending && !showPendingComposer) import_state.pendingComment.set(editor, null);
+  }, [editor, pending, showPendingComposer]);
   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 showResolved = (0, import_tldraw.useValue)("show resolved", () => import_state.sidebarFilters.get(editor).showResolved, [
+    editor
+  ]);
+  const threads = (0, import_react.useMemo)(
+    () => allThreads.filter((t) => showResolved || t.resolved == null || t.id === openId),
+    [allThreads, showResolved, openId]
+  );
+  (0, import_react.useEffect)(() => (0, import_anchor_lifecycle.registerCommentAnchorLifecycle)(editor), [editor]);
+  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)),
-      import_state.openThreadId.get(editor),
-      impreciseShapeAnchor
+      threads.filter((thread) => !heldThreadIds.has(thread.id)),
+      import_state.openThreadId.get(editor)
     ),
-    [editor, threads, impreciseShapeAnchor, movedThreadIds]
+    [editor, threads, heldThreadIds]
   );
   const clusterZoomBounds = (0, import_tldraw.useValue)(
     "comment cluster zoom bounds",
@@ -124,21 +128,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 +170,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,90 +185,113 @@ 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])),
     [threads]
   );
+  const pinStacks = (0, import_tldraw.useValue)("comment pin stacks", () => (0, import_pin_stacking.computePinStacks)(editor, threads), [
+    editor,
+    threads
+  ]);
   const openThread = openId ? threadsById.get(openId) : null;
   const hidden = (0, import_tldraw.useValue)("comments hidden", () => import_state.commentsHidden.get(editor), [editor]);
   (0, import_react.useEffect)(() => {
     return () => {
       import_state.openThreadId.set(editor, null);
+      import_state.openStackId.set(editor, null);
       import_state.pendingComment.set(editor, null);
+      import_state.revealThreadRequest.set(editor, null);
     };
   }, [editor]);
   (0, import_react.useEffect)(() => {
-    if (deepLinkHandled.current) return;
-    const id = new URLSearchParams(window.location.search).get("comment");
-    if (!id) {
-      deepLinkHandled.current = true;
-      return;
+    const key = import_state.openStackId.get(editor);
+    if (!key) return;
+    for (const id of pinStacks.keys()) {
+      const thread = threadsById.get(id);
+      if (!thread) continue;
+      const point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
+      if (point && (0, import_pin_stacking.pinStackKey)(point) === key) return;
     }
-    const record = (0, import_comment_store.getCommentRecord)(editor, id);
-    if (!record) return;
-    let thread;
-    if (record.typeName === "comment") {
-      thread = threadsById.get(record.threadId);
-    } else {
-      thread = record;
-    }
-    if (!thread) return;
-    deepLinkHandled.current = true;
-    revealDeepLinkedThread(
-      editor,
-      thread,
-      clusterModel.table,
-      clusterZoomBounds,
-      options,
-      impreciseShapeAnchor
-    );
-    import_state.openThreadId.set(editor, thread.id);
-  }, [clusterModel.table, clusterZoomBounds, editor, threadsById, impreciseShapeAnchor, options]);
+    import_state.openStackId.set(editor, null);
+  }, [editor, pinStacks, threadsById]);
+  const requestedRevealThread = (0, import_tldraw.useValue)(
+    "requested reveal thread",
+    () => {
+      const id = import_state.revealThreadRequest.get(editor);
+      if (!id) return null;
+      const record = (0, import_comment_store.getCommentRecord)(editor, id);
+      if (!record) return null;
+      const thread = record.typeName === "comment" ? (0, import_comment_store.getCommentRecord)(editor, record.threadId) : record;
+      return thread?.typeName === "comment-thread" ? thread : null;
+    },
+    [editor]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!requestedRevealThread) return;
+    import_state.revealThreadRequest.set(editor, null);
+    import_state.commentsHidden.set(editor, false);
+    revealThreadPin(editor, requestedRevealThread, clusterModel.table, clusterZoomBounds, options);
+    import_state.openThreadId.set(editor, requestedRevealThread.id);
+  }, [requestedRevealThread, clusterModel.table, clusterZoomBounds, editor, options]);
+  const revealClusteredThread = (0, import_react.useCallback)(
+    (thread) => {
+      revealThreadPin(
+        editor,
+        thread,
+        clusterModel.table,
+        clusterZoomBounds,
+        options,
+        CLUSTER_EXPAND_ZOOM_MS
+      );
+      import_state.openThreadId.set(editor, thread.id);
+    },
+    [clusterModel.table, clusterZoomBounds, editor, options]
+  );
   const zoomToClusterSplit = (0, import_react.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]
   );
   (0, import_react.useEffect)(() => {
     const onKeyDown = (e) => {
       if (e.key !== "Escape" || import_state.openThreadId.get(editor) === null) return;
-      if ((0, import_mention_suggestion.isMentionPickerOpen)()) return;
+      if ((0, import_mentions.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();
@@ -264,79 +311,78 @@ 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__ */ (0, import_jsx_runtime.jsx)(import_thread_stack.ThreadStackPin, { editor, threads: stackThreads, ...props });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadPin, { editor, thread, ...props });
+  };
+  if (!portalHost) 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;
+          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__ */ (0, import_jsx_runtime.jsx)(
-              ThreadPin,
+              ClusterBadge,
               {
                 editor,
-                thread,
-                ...props,
-                regionOptions
+                node,
+                onExpand: zoomToClusterSplit,
+                onSelectThread: revealClusteredThread,
+                threadsById,
+                currentUserId: props.currentUserId,
+                resolveAuthor: props.resolveAuthor
               }
             );
-          } else {
-            content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClusterBadge, { editor, node, onExpand: zoomToClusterSplit });
           }
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clusterFadeClassName(phase), children: content }, `cluster-fade:${node.id}`);
         }),
-        orphanThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          ThreadPin,
-          {
-            editor,
-            thread,
-            ...props,
-            regionOptions
-          },
-          thread.id
-        )),
-        movedThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          ThreadPin,
-          {
-            editor,
-            thread,
-            ...props,
-            regionOptions
-          },
-          thread.id
-        ))
+        orphanThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: renderThreadPin(thread) }, thread.id)),
+        heldThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { 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__ */ (0, import_jsx_runtime.jsx)(
-          ThreadPin,
-          {
-            editor,
-            thread,
-            ...props,
-            regionOptions
-          },
-          thread.id
-        ))
-      ),
-      openThread && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        ThreadPin,
-        {
-          editor,
-          thread: openThread,
-          ...props,
-          regionOptions
-        },
-        `open:${openThread.id}`
+        threads.filter((thread) => thread.id !== openId).map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: renderThreadPin(thread) }, thread.id))
       ),
+      openThread && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: renderThreadPin(openThread) }, `open:${openThread.id}`),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RegionDraftBox, { editor }),
-      pending?.anchor.type === "region" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RegionBox, { editor, box: pending.anchor }),
-      pending && props.currentUserId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PendingComposer, { editor, pending, ...props })
+      pending?.anchor.type === "region" && showPendingComposer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RegionBox, { editor, box: pending.anchor }),
+      pending && showPendingComposer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PendingComposer, { editor, pending, ...props })
     ] }),
-    container
+    portalHost
   );
 }
 const EMPTY_SET = /* @__PURE__ */ new Set();
@@ -405,7 +451,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 +468,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;
@@ -436,34 +477,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 = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor, impreciseShapeAnchor);
+  const point = (0, import_thread_state.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 = (0, import_thread_state.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 = (0, import_thread_state.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
     },
@@ -476,8 +519,16 @@ function clamp(value, min, max) {
 const ClusterBadge = (0, import_react.memo)(function ClusterBadge2({
   editor,
   node,
-  onExpand
+  onExpand,
+  onSelectThread,
+  threadsById,
+  ...props
 }) {
+  const container = (0, import_tldraw.useContainer)();
+  const msg = (0, import_tldraw.useTranslation)();
+  const badgeRef = (0, import_react.useRef)(null);
+  const { previewShown, previewHandlers } = (0, import_thread_preview.useMarkerPreview)(editor, `cluster:${node.id}`);
+  (0, import_tldraw.usePassThroughWheelEvents)(badgeRef);
   const point = (0, import_tldraw.useValue)(
     "cluster badge point",
     () => {
@@ -487,46 +538,63 @@ const ClusterBadge = (0, import_react.memo)(function ClusterBadge2({
     },
     [editor, node]
   );
-  if (!point) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: "cmt-canvas-cluster",
-      style: { left: point.x, top: point.y },
-      onPointerDown: stop,
-      onClick: (e) => {
-        e.stopPropagation();
-        onExpand(node);
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_count_badge.CountBadge, { count: node.count })
+  const previewThreads = (0, import_react.useMemo)(() => {
+    if (!previewShown) return [];
+    const threads = [];
+    for (const id of node.members) {
+      const thread = threadsById.get(id);
+      if (thread) threads.push(thread);
     }
-  );
+    return (0, import_thread_preview.sortThreadsForPreview)(threads);
+  }, [previewShown, node.members, threadsById]);
+  if (!point) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_count_badge.CountBadge, { count: node.count })
+      }
+    ),
+    previewShown && previewThreads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_thread_preview.ThreadPreview,
+      {
+        editor,
+        threads: previewThreads,
+        container,
+        variant: "list",
+        point,
+        onSelectThread,
+        ...previewHandlers,
+        ...props
+      }
+    )
+  ] });
 });
 function isInInflatedViewport(editor, point) {
   const viewport = editor.getViewportScreenBounds();
-  const margin = (0, import_options.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 = (0, import_react.useRef)(null);
-  (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 }),
-    container
-  );
-}
-function RegionBox({
-  editor,
-  box,
-  movable,
-  onPreview,
-  onCommit
-}) {
+function RegionBox({ editor, box }) {
   const rect = (0, import_tldraw.useValue)(
     "region rect",
     () => {
@@ -536,38 +604,7 @@ function RegionBox({
     },
     [editor, box.x, box.y, box.w, box.h]
   );
-  const grabRef = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: movable ? "cmt-canvas-region cmt-canvas-region--movable" : "cmt-canvas-region",
-      style: rect,
-      onPointerDown: movable ? startMove : void 0,
-      onPointerMove: movable ? onMove : void 0,
-      onPointerUp: movable ? endMove : void 0
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-canvas-region", style: rect });
 }
 function RegionDraftBox({ editor }) {
   const box = (0, import_tldraw.useValue)("region draft", () => import_state.regionDraft.get(editor), [editor]);
@@ -580,12 +617,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;
@@ -635,7 +666,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),
@@ -647,33 +678,22 @@ function RegionResizeHandles({
 const ThreadPin = (0, import_react.memo)(function ThreadPin2({
   editor,
   thread,
-  regionOptions,
   ...props
 }) {
-  const {
-    currentUserId,
-    resolveName,
-    onPostComment,
-    isCommentUnread,
-    onCommentRead,
-    getMentionSuggestions,
-    renderMentionSuggestion
-  } = props;
+  const { resolveAuthor } = props;
   const options = (0, import_options.useCommentingOptions)();
-  const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
+  const canComment = (0, import_options.useCanComment)(props.currentUserId);
   const container = (0, import_tldraw.useContainer)();
-  const comments = (0, import_hooks.useThreadComments)(editor, thread.id);
   const msg = (0, import_tldraw.useTranslation)();
+  const comments = (0, import_hooks.useThreadComments)(editor, thread.id);
   const open = (0, import_tldraw.useValue)("thread open", () => import_state.openThreadId.get(editor) === thread.id, [
     editor,
     thread.id
   ]);
-  const [reply, setReply] = (0, import_react.useState)(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);
   const [resizeBounds, setResizeBounds] = (0, import_react.useState)(null);
-  const [pinHovered, setPinHovered] = (0, import_react.useState)(false);
+  const { previewShown, previewHandlers } = (0, import_thread_preview.useMarkerPreview)(editor, `pin:${thread.id}`);
+  const previewThreads = (0, import_react.useMemo)(() => [thread], [thread]);
   const pointerInRegion = (0, import_tldraw.useValue)(
     "pointer in region",
     () => {
@@ -686,25 +706,30 @@ 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 revealed = open || resizeBounds != null || pointerInRegion;
+  const pinCorner = thread.anchor.type === "region" ? (0, import_thread_state.regionAnchorPinCorner)(thread.anchor) : import_thread_state.REGION_PIN_CORNER;
   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]
+    () => REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),
+    [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);
     };
@@ -715,165 +740,68 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     "pin point",
     () => {
       if (thread.pageId !== editor.getCurrentPageId()) return null;
-      const pagePoint = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor, impreciseShapeAnchor);
-      return pagePoint ? editor.pageToViewport(pagePoint) : null;
+      const pagePoint = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
+      if (!pagePoint) return null;
+      const viewportPoint = editor.pageToViewport(pagePoint);
+      const inset = (0, import_thread_state.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;
-  (0, import_react.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 ((0, import_comment_extensions.isCommentEmpty)(reply) || !currentUserId) return;
-    (0, import_state.commitCommentMutation)(editor, () => {
-      const comment = (0, import_tldraw.createComment)({
-        threadId: thread.id,
-        pageId: thread.pageId,
-        authorId: currentUserId,
-        body: reply
-      });
-      (0, import_comment_store.putCommentRecords)(editor, [comment]);
-      if (onPostComment) onPostComment(comment);
-    });
-    setReply(import_comment_extensions.EMPTY_COMMENT);
-  };
-  const toggleResolve = () => {
-    if (!currentUserId) return;
-    (0, import_state.commitCommentMutation)(editor, () => {
-      (0, import_comment_store.putCommentRecords)(editor, [
-        {
-          ...thread,
-          resolved: thread.resolved ? null : { at: Date.now(), by: currentUserId }
-        }
-      ]);
-    });
-  };
-  const deleteThread = () => {
-    import_state.openThreadId.set(editor, null);
-    (0, import_state.commitCommentMutation)(
-      editor,
-      () => (0, import_comment_store.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 || (0, import_comment_extensions.isCommentEmpty)(editText)) return;
-    (0, import_state.commitCommentMutation)(editor, () => {
-      (0, import_comment_store.putCommentRecords)(editor, [{ ...comment, body: editText, editedAt: Date.now() }]);
-    });
-    setEditingId(null);
-  };
-  const renderComment = (card, index) => {
-    const comment = comments[index];
-    if (editingId === comment.id) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: "cmt-editing",
-          onKeyDown: (e) => {
-            if (e.key === "Escape") {
-              setEditingId(null);
-              e.stopPropagation();
-            }
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_comment_composer.CommentComposer,
-            {
-              author: card.author,
-              placeholder: msg("comments.edit-placeholder"),
-              value: editText,
-              onChange: setEditText,
-              onSubmit: saveEdit,
-              sendLabel: msg("comments.save"),
-              disabled: (0, import_comment_extensions.isCommentEmpty)(editText),
-              getMentionSuggestions,
-              renderMentionSuggestion,
-              autoFocus: true
-            }
-          )
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      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
-      }
-    );
-  };
-  const headerActions = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    currentUserId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        className: "cmt-thread__action",
-        title: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
-        onClick: toggleResolve,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_tldraw.TldrawUiIcon,
-          {
-            icon: "check",
-            label: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
-            small: true
-          }
-        )
-      }
-    ),
-    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 })
-      }
-    )
-  ] });
   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 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mentions.Avatar, { author: threadAuthor ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR });
+  const pinLabel = msg(
+    thread.resolved ? "comments.pin-label-resolved" : "comments.pin-label"
+  ).replace("{name}", 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);
+    const inset = (0, import_thread_state.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 = (0, import_thread_state.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;
@@ -882,55 +810,59 @@ 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 };
+      const hit = (0, import_thread_state.commentTargetShapeAt)(editor, pagePoint);
+      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");
+    (0, import_comment_mutations.commitCommentMutation)(editor, () => (0, import_comment_mutations.putRecordsInCommit)(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 } }]),
-      {
-        history: "ignore"
-      }
+    if (!canComment) return;
+    (0, import_comment_mutations.commitCommentMutation)(
+      editor,
+      // Spread the existing anchor first so the region's pin corner survives a resize.
+      () => (0, import_comment_mutations.putRecordsInCommit)(editor, [{ ...thread, anchor: { ...regionAnchor, ...bounds } }]),
+      "drag"
     );
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    regionBoxBounds && (dragPagePoint || revealed) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      RegionBox,
-      {
-        editor,
-        box: regionBoxBounds,
-        movable: bodyMovable && !dragPagePoint,
-        onPreview: setResizeBounds,
-        onCommit: commitResize
-      }
-    ),
-    regionBoxBounds && revealed && !dragPagePoint && regionOptions.resize !== "none" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    regionBoxBounds && (dragPagePoint || revealed) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RegionBox, { editor, box: regionBoxBounds }),
+    regionBoxBounds && revealed && !dragPagePoint && canComment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       RegionResizeHandles,
       {
         editor,
@@ -943,51 +875,59 @@ 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",
+            "button",
             {
               ref: markerRef,
-              className: "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;
+                import_state.openThreadId.set(editor, import_state.openThreadId.get(editor) === thread.id ? null : thread.id);
+              },
+              onPointerEnter: previewHandlers.onPointerEnter,
+              onPointerLeave: previewHandlers.onPointerLeave,
+              onFocus: previewHandlers.onPointerEnter,
+              onBlur: previewHandlers.onPointerLeave,
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_pin.CommentPin, { resolved: thread.resolved != null, open, children: pinContent })
             }
           ),
           open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            ThreadPopover,
+            import_thread_view.ThreadPopover,
             {
               container,
-              style: { left: renderPoint.x + 36, top: renderPoint.y - 28 },
-              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)),
-                  resolvedBanner: thread.resolved ? msg("comments.resolved-by").replace(
-                    "{name}",
-                    resolveName(thread.resolved.by) ?? import_comment_render.UNKNOWN_AUTHOR
-                  ) : void 0,
-                  composer: currentUserId && !thread.resolved ? {
-                    author: resolveName(currentUserId) ?? import_comment_render.UNKNOWN_AUTHOR,
-                    placeholder: msg("comments.reply-placeholder"),
-                    sendLabel: msg("comments.send"),
-                    value: reply,
-                    onChange: setReply,
-                    onSubmit: postReply,
-                    disabled: (0, import_comment_extensions.isCommentEmpty)(reply),
-                    getMentionSuggestions,
-                    renderMentionSuggestion
-                  } : void 0
-                }
-              )
+              style: {
+                left: renderPoint.x + import_thread_view.POPOVER_OFFSET.thread.x,
+                top: renderPoint.y + import_thread_view.POPOVER_OFFSET.thread.y - THREAD_HEADER_BLOCK
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_thread_view.ThreadView, { editor, thread, ...props })
+            }
+          ),
+          previewShown && !dragPagePoint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_thread_preview.ThreadPreview,
+            {
+              editor,
+              threads: previewThreads,
+              container,
+              variant: "thread",
+              point: renderPoint,
+              onSelectThread: () => import_state.openThreadId.set(editor, thread.id),
+              ...previewHandlers,
+              currentUserId: props.currentUserId,
+              resolveAuthor
             }
           )
         ]
@@ -999,12 +939,18 @@ function PendingComposer({
   editor,
   pending,
   currentUserId,
-  resolveName,
+  resolveAuthor,
   onPostComment,
   getMentionSuggestions,
   renderMentionSuggestion
 }) {
-  const [text, setText] = (0, import_react.useState)(import_comment_extensions.EMPTY_COMMENT);
+  const ComposerFallback = (0, import_options.useCommentingOptions)().components.ComposerFallback;
+  const canComment = (0, import_options.useCanComment)(currentUserId);
+  const me = currentUserId ? resolveAuthor(currentUserId) : void 0;
+  const draftAvatar = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_pin.CommentPin, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mentions.Avatar, { author: me ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR }) });
+  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 +965,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);
@@ -1027,7 +973,7 @@ function PendingComposer({
   }, [editor]);
   const submit = () => {
     if ((0, import_comment_extensions.isCommentEmpty)(text) || !currentUserId) return;
-    (0, import_state.commitCommentMutation)(editor, () => {
+    (0, import_comment_mutations.commitCommentMutation)(editor, () => {
       const pageId = editor.getCurrentPageId();
       const thread = (0, import_tldraw.createCommentThread)({
         pageId,
@@ -1040,10 +986,11 @@ function PendingComposer({
         authorId: currentUserId,
         body: text
       });
-      (0, import_comment_store.putCommentRecords)(editor, [thread, comment]);
+      (0, import_comment_mutations.putRecordsInCommit)(editor, [thread, comment]);
       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,28 +998,36 @@ function PendingComposer({
       "div",
       {
         ref,
-        className: "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" && !(0, import_mention_suggestion.isMentionPickerOpen)()) import_state.pendingComment.set(editor, null);
+          if (e.key === "Escape" && !(0, import_mentions.isMentionPickerOpen)()) import_state.pendingComment.set(editor, null);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: canComment ? /* @__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),
+            disabled: (0, import_comment_extensions.isCommentEmpty)(text) || !currentUserId,
             getMentionSuggestions,
             renderMentionSuggestion,
             autoFocus: true,
             leading: draftAvatar
           }
-        )
+        ) : ComposerFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComposerFallback, { context: "pending" })
       }
     ),
     container