@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

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

@@ -22,61 +22,23 @@ __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_cluster_input = require("./cluster-input");
-var import_comment_body = require("./comment-body");
-var import_comment_render = require("./comment-render");
+var import_anchor_lifecycle = require("./anchor-lifecycle");
+var import_cluster_badge = require("./cluster-badge");
+var import_cluster_fade = require("./cluster-fade");
+var import_cluster_model = require("./cluster-model");
 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_pending_composer = require("./pending-composer");
+var import_pin_stacking = require("./pin-stacking");
+var import_region_box = require("./region-box");
 var import_state = require("./state");
-var import_thread_state = require("./thread-state");
-const stop = (e) => e.stopPropagation();
-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)(
-  "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
-  };
-}
+var import_thread_pin = require("./thread-pin");
+var import_thread_stack = require("./thread-stack");
 function CanvasComments(props) {
   const commentingEnabled = (0, import_license.useCommentingEnabled)();
   if (!commentingEnabled) return null;
@@ -85,166 +47,112 @@ function CanvasComments(props) {
 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 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 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 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
-    ),
-    [editor, threads, impreciseShapeAnchor, movedThreadIds]
-  );
-  const clusterZoomBounds = (0, import_tldraw.useValue)(
-    "comment cluster zoom bounds",
-    () => getClusterZoomBounds(editor),
-    [editor]
-  );
-  const latestModel = (0, import_react.useMemo)(() => {
-    const table = (0, import_computeClusterTable.computeClusterTable)(clusterLeaves, clusterZoomBounds);
-    const runtime = (0, import_runtime.createClusterRuntime)(table);
-    runtime.seed(editor.getZoomLevel());
-    return { runtime, table };
-  }, [clusterLeaves, clusterZoomBounds, editor]);
-  const [renderedModel, setRenderedModel] = (0, import_react.useState)(latestModel);
-  let clusterModel = renderedModel;
-  if (renderedModel !== latestModel && (adoptOnRebuild.current || hasRemovedLeaves(renderedModel.table, latestModel.table))) {
-    adoptOnRebuild.current = false;
-    latestModel.runtime.seedFrom(editor.getZoomLevel(), renderedModel.runtime.getVisible());
-    setRenderedModel(latestModel);
-    clusterModel = latestModel;
-  }
-  const newlyMovedIds = findMovedClusteredLeafIds(clusterModel, latestModel);
-  if (newlyMovedIds.length > 0) {
-    console.debug(`[comments] pins popped out of clustering: ${newlyMovedIds.join(", ")}`);
-    const next = new Set(movedThreadIds);
-    for (const id of newlyMovedIds) next.add(id);
-    setMovedThreadIds(next);
-  }
-  (0, import_react.useEffect)(() => {
-    if (movedThreadIds.size === 0) return;
-    let lastZoom = editor.getZoomLevel();
-    return (0, import_tldraw.react)("rejoin moved comment pins on zoom out", () => {
-      const zoom = editor.getZoomLevel();
-      const prevZoom = lastZoom;
-      lastZoom = zoom;
-      if (zoom >= prevZoom) return;
-      adoptOnRebuild.current = true;
-      setMovedThreadIds(EMPTY_SET);
-    });
-  }, [movedThreadIds, editor]);
+  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 (clusterModel === latestModel) return;
-    let lastZoom = editor.getZoomLevel();
-    return (0, import_tldraw.react)("adopt pending cluster model on zoom out", () => {
-      const zoom = editor.getZoomLevel();
-      const prevZoom = lastZoom;
-      lastZoom = zoom;
-      if (zoom >= prevZoom) return;
-      latestModel.runtime.seedFrom(zoom, clusterModel.runtime.getVisible());
-      setRenderedModel(latestModel);
-    });
-  }, [clusterModel, latestModel, editor]);
-  const orphanThreads = (0, import_react.useMemo)(() => {
-    if (clusterModel === latestModel) return [];
-    const renderedIds = new Set(clusterModel.table.leaves.map((leaf) => leaf.id));
-    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]
-  );
-  const clusterCursor = (0, import_tldraw.useValue)(
-    "comment cluster cursor",
-    () => {
-      clusterModel.runtime.onCamera(editor.getZoomLevel());
-      return clusterModel.runtime.k;
-    },
-    [clusterModel, editor]
+    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 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]
   );
-  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]);
-  const fadeNodes = useFadeVisibleNodes(visibleNodes, clusterModel);
+  (0, import_react.useEffect)(() => (0, import_anchor_lifecycle.registerCommentAnchorLifecycle)(editor), [editor]);
+  const {
+    model: clusterModel,
+    zoomBounds: clusterZoomBounds,
+    fadeNodes,
+    orphanThreads,
+    heldThreads
+  } = (0, import_cluster_model.useClusterModel)(editor, threads, openId);
   const threadsById = (0, import_react.useMemo)(
     () => new Map(threads.map((thread) => [thread.id, thread])),
     [threads]
   );
+  const pinStacksRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const pinStacks = (0, import_tldraw.useValue)(
+    "comment pin stacks",
+    () => {
+      const stacks = (0, import_pin_stacking.computePinStacks)(editor, threads);
+      if ((0, import_pin_stacking.pinStacksEqual)(pinStacksRef.current, stacks)) return pinStacksRef.current;
+      pinStacksRef.current = stacks;
+      return stacks;
+    },
+    [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]);
+  const openStackKeyIsStale = (0, import_tldraw.useValue)(
+    "open stack key stale",
+    () => {
+      const key = import_state.openStackId.get(editor);
+      if (!key) return false;
+      return !(0, import_pin_stacking.isOpenStackKeyLive)(editor, key, pinStacks, threadsById);
+    },
+    [editor, pinStacks, threadsById]
+  );
   (0, import_react.useEffect)(() => {
-    if (deepLinkHandled.current) return;
-    const id = new URLSearchParams(window.location.search).get("comment");
-    if (!id) {
-      deepLinkHandled.current = true;
-      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]);
-  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,
-        clusterZoomBounds.minZoom,
-        clusterZoomBounds.maxZoom
+    if (openStackKeyIsStale) import_state.openStackId.set(editor, null);
+  }, [editor, openStackKeyIsStale]);
+  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);
+    (0, import_cluster_model.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) => {
+      (0, import_cluster_model.revealThreadPin)(
+        editor,
+        thread,
+        clusterModel.table,
+        clusterZoomBounds,
+        options,
+        import_cluster_model.CLUSTER_EXPAND_ZOOM_MS
       );
-      centerOnPointAtZoom(editor, node.centroid, zoom, CLUSTER_EXPAND_ZOOM_MS);
+      import_state.openThreadId.set(editor, thread.id);
     },
-    [clusterModel, clusterZoomBounds, editor, options]
+    [clusterModel.table, clusterZoomBounds, editor, options]
+  );
+  const expandCluster = (0, import_react.useCallback)(
+    (node) => {
+      (0, import_cluster_model.zoomToClusterSplit)(editor, clusterModel.table, clusterZoomBounds, node);
+    },
+    [clusterModel.table, 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,818 +172,72 @@ function CanvasCommentsLayer(props) {
     return () => document.removeEventListener("keydown", onKeyDown, true);
   }, [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: [
-      options.enableClustering ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        fadeNodes.map(({ node, phase }) => {
-          let content;
-          if (node.count === 1) {
-            const thread = threadsById.get(node.id);
-            if (!thread) return null;
-            content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              ThreadPin,
-              {
-                editor,
-                thread,
-                ...props,
-                regionOptions
-              }
-            );
-          } 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
-        ))
-      ] }) : (
-        // 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}`
-      ),
-      /* @__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 })
-    ] }),
-    container
-  );
-}
-const EMPTY_SET = /* @__PURE__ */ new Set();
-const MOVED_LEAF_EPSILON = 1e-6;
-function useFadeVisibleNodes(nodes, resetKey) {
-  const resetKeyRef = (0, import_react.useRef)(resetKey);
-  const didReset = resetKeyRef.current !== resetKey;
-  if (didReset) {
-    resetKeyRef.current = resetKey;
-  }
-  const [fadeNodes, setFadeNodes] = (0, import_react.useState)(() => toPresentFadeNodes(nodes));
-  const renderedNodes = didReset ? toPresentFadeNodes(nodes) : fadeNodes;
-  (0, import_react.useEffect)(() => {
-    setFadeNodes(toPresentFadeNodes(nodes));
-  }, [resetKey]);
-  (0, import_react.useEffect)(() => {
-    if (didReset) return;
-    setFadeNodes((previous) => reconcileFadeNodes(previous, nodes));
-  }, [didReset, nodes]);
-  const hasEntering = renderedNodes.some((item) => item.phase === "entering");
-  (0, import_react.useEffect)(() => {
-    if (!hasEntering) return;
-    const frame = requestClusterFadeFrame(() => {
-      setFadeNodes(
-        (previous) => previous.map((item) => item.phase === "entering" ? { ...item, phase: "present" } : item)
-      );
-    });
-    return () => cancelClusterFadeFrame(frame);
-  }, [hasEntering, renderedNodes]);
-  const hasExiting = renderedNodes.some((item) => item.phase === "exiting");
-  (0, import_react.useEffect)(() => {
-    if (!hasExiting) return;
-    const timeout = window.setTimeout(() => {
-      setFadeNodes((previous) => previous.filter((item) => item.phase !== "exiting"));
-    }, CLUSTER_FADE_MS);
-    return () => window.clearTimeout(timeout);
-  }, [hasExiting, renderedNodes]);
-  return renderedNodes;
-}
-function toPresentFadeNodes(nodes) {
-  return nodes.map((node) => ({ node, phase: "present" }));
-}
-function reconcileFadeNodes(previous, nextNodes) {
-  const previousById = new Map(previous.map((item) => [item.node.id, item]));
-  const nextIds = new Set(nextNodes.map((node) => node.id));
-  const next = [];
-  for (const node of nextNodes) {
-    const previousItem = previousById.get(node.id);
-    next.push({
-      node,
-      phase: previousItem && previousItem.phase !== "exiting" ? previousItem.phase : previousItem ? "present" : "entering"
-    });
-  }
-  for (const item of previous) {
-    if (nextIds.has(item.node.id)) continue;
-    next.push(item.phase === "exiting" ? item : { ...item, phase: "exiting" });
-  }
-  return next;
-}
-function requestClusterFadeFrame(callback) {
-  if (typeof requestAnimationFrame === "function") return requestAnimationFrame(callback);
-  return window.setTimeout(() => callback(0), 16);
-}
-function cancelClusterFadeFrame(frame) {
-  if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
-  else window.clearTimeout(frame);
-}
-function clusterFadeClassName(phase) {
-  return `cmt-cluster-fade cmt-cluster-fade--${phase}`;
-}
-function findMovedClusteredLeafIds(rendered, latest) {
-  if (rendered.table === latest.table) return [];
-  const visible = rendered.runtime.getVisible();
-  const latestById = new Map(latest.table.leaves.map((leaf) => [leaf.id, leaf]));
-  const moved = [];
-  for (const leaf of rendered.table.leaves) {
-    if (visible.has(leaf.id)) continue;
-    const current = latestById.get(leaf.id);
-    if (!current) continue;
-    if (Math.abs(current.centroid.x - leaf.centroid.x) > MOVED_LEAF_EPSILON || Math.abs(current.centroid.y - leaf.centroid.y) > MOVED_LEAF_EPSILON) {
-      moved.push(leaf.id);
-    }
-  }
-  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;
-  const zoomSteps = cameraOptions.zoomSteps;
-  return {
-    minZoom: zoomSteps[0] * baseZoom,
-    maxZoom: zoomSteps[zoomSteps.length - 1] * baseZoom
+  const stackGroupOf = (node) => {
+    const group = pinStacks.get(node.members[0]);
+    if (!group) return null;
+    return node.members.every((id) => group.includes(id)) ? group : null;
   };
-}
-function revealDeepLinkedThread(editor, thread, table, zoomBounds, options, impreciseShapeAnchor) {
-  if (thread.pageId !== editor.getCurrentPageId()) {
-    editor.setCurrentPage(thread.pageId);
-  }
-  const point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor, impreciseShapeAnchor);
-  if (!point) return;
+  const renderedThreadIds = /* @__PURE__ */ new Set();
   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,
-        zoomBounds.minZoom,
-        zoomBounds.maxZoom
-      );
-      centerOnPointAtZoom(editor, point, zoom);
-      return;
+    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);
   }
-  editor.centerOnPoint(point, { animation: { duration: 200 } });
-}
-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();
-  editor.setCamera(
-    {
-      x: viewport.w / (2 * zoom) - point.x,
-      y: viewport.h / (2 * zoom) - point.y,
-      z: zoom
-    },
-    { animation: { duration } }
-  );
-}
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, value));
-}
-const ClusterBadge = (0, import_react.memo)(function ClusterBadge2({
-  editor,
-  node,
-  onExpand
-}) {
-  const point = (0, import_tldraw.useValue)(
-    "cluster badge point",
-    () => {
-      const pagePoint = editor.pageToViewport(node.centroid);
-      if (!isInInflatedViewport(editor, pagePoint)) return null;
-      return pagePoint;
-    },
-    [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 })
+  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 });
     }
-  );
-});
-function isInInflatedViewport(editor, point) {
-  const viewport = editor.getViewportScreenBounds();
-  const margin = (0, import_options.getCommentingOptions)(editor).clusterCullMargin;
-  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
-}) {
-  const rect = (0, import_tldraw.useValue)(
-    "region rect",
-    () => {
-      const topLeft = editor.pageToViewport({ x: box.x, y: box.y });
-      const zoom = editor.getZoomLevel();
-      return { left: topLeft.x, top: topLeft.y, width: box.w * zoom, height: box.h * zoom };
-    },
-    [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
-    }
-  );
-}
-function RegionDraftBox({ editor }) {
-  const box = (0, import_tldraw.useValue)("region draft", () => import_state.regionDraft.get(editor), [editor]);
-  if (!box) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RegionBox, { editor, box });
-}
-const REGION_CORNERS = [
-  { x: 0, y: 0, cursor: "nwse-resize" },
-  { x: 1, y: 0, cursor: "nesw-resize" },
-  { 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;
-  const controlsY = handle.y !== 0.5;
-  const fixedX = box.x + (1 - handle.x) * box.w;
-  const fixedY = box.y + (1 - handle.y) * box.h;
-  return {
-    x: controlsX ? Math.min(fixedX, cursor.x) : box.x,
-    y: controlsY ? Math.min(fixedY, cursor.y) : box.y,
-    w: controlsX ? Math.abs(cursor.x - fixedX) : box.w,
-    h: controlsY ? Math.abs(cursor.y - fixedY) : box.h
-  };
-}
-function RegionResizeHandles({
-  editor,
-  box,
-  handles,
-  onPreview,
-  onCommit
-}) {
-  const boxRef = (0, import_react.useRef)(null);
-  const points = (0, import_tldraw.useValue)(
-    "region handle points",
-    () => handles.map((h) => {
-      const p = editor.pageToViewport({ x: box.x + h.x * box.w, y: box.y + h.y * box.h });
-      return { ...h, key: `${h.x}-${h.y}`, left: p.x, top: p.y };
-    }),
-    [editor, box.x, box.y, box.w, box.h, handles]
-  );
-  const startResize = (e) => {
-    e.stopPropagation();
-    boxRef.current = box;
-    e.currentTarget.setPointerCapture(e.pointerId);
-  };
-  const resizedTo = (h, e) => resizeRegion(boxRef.current, h, editor.screenToPage({ x: e.clientX, y: e.clientY }));
-  const onResize = (h) => (e) => {
-    if (boxRef.current) onPreview(resizedTo(h, e));
-  };
-  const endResize = (h) => (e) => {
-    if (!boxRef.current) return;
-    const bounds = resizedTo(h, e);
-    boxRef.current = null;
-    if (e.currentTarget.hasPointerCapture(e.pointerId))
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    onCommit(bounds);
-  };
-  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",
-      style: { left: h.left, top: h.top, cursor: h.cursor },
-      onPointerDown: startResize,
-      onPointerMove: onResize(h),
-      onPointerUp: endResize(h)
-    },
-    h.key
-  )) });
-}
-const ThreadPin = (0, import_react.memo)(function ThreadPin2({
-  editor,
-  thread,
-  regionOptions,
-  ...props
-}) {
-  const {
-    currentUserId,
-    resolveName,
-    onPostComment,
-    isCommentUnread,
-    onCommentRead,
-    getMentionSuggestions,
-    renderMentionSuggestion
-  } = props;
-  const options = (0, import_options.useCommentingOptions)();
-  const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
-  const container = (0, import_tldraw.useContainer)();
-  const comments = (0, import_hooks.useThreadComments)(editor, thread.id);
-  const msg = (0, import_tldraw.useTranslation)();
-  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 pointerInRegion = (0, import_tldraw.useValue)(
-    "pointer in region",
-    () => {
-      if (thread.anchor.type !== "region" || thread.pageId !== editor.getCurrentPageId())
-        return false;
-      const m = REGION_HANDLE_MARGIN_PX / editor.getZoomLevel();
-      const p = editor.inputs.getCurrentPagePoint();
-      const a = thread.anchor;
-      return p.x >= a.x - m && p.x <= a.x + a.w + m && p.y >= a.y - m && p.y <= a.y + a.h + m;
-    },
-    [editor, thread.anchor, thread.pageId]
-  );
-  const revealed = open || resizeBounds != null || regionOptions.reveal === "pointer" && pointerInRegion || regionOptions.reveal === "pin-hover" && pinHovered;
-  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]
-  );
-  const dragRef = (0, import_react.useRef)(null);
-  const markerRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    if (!open) return;
-    const onPointerDown = (e) => {
-      const target = e.target;
-      if (!target) return;
-      if (target.closest(".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"))
-        return;
-      import_state.openThreadId.set(editor, null);
-    };
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => document.removeEventListener("pointerdown", onPointerDown, true);
-  }, [open, editor]);
-  const point = (0, import_tldraw.useValue)(
-    "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;
-    },
-    [editor, thread.anchor, thread.pageId, impreciseShapeAnchor]
-  );
-  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,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_thread_pin.ThreadPin, { editor, thread, ...props });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.EditorPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 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)(
+            import_cluster_badge.ClusterBadge,
             {
-              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
+              editor,
+              node,
+              onExpand: expandCluster,
+              onSelectThread: revealClusteredThread,
+              threadsById,
+              currentUserId: props.currentUserId,
+              resolveAuthor: props.resolveAuthor
             }
-          )
+          );
         }
-      );
-    }
-    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 isRegion = thread.anchor.type === "region";
-  const pinMovable = regionOptions.move !== "body";
-  const bodyMovable = regionOptions.move !== "pin";
-  const startDrag = (e) => {
-    e.stopPropagation();
-    dragRef.current = { startX: e.clientX, startY: e.clientY, moved: false };
-    e.currentTarget.setPointerCapture(e.pointerId);
-  };
-  const onDrag = (e) => {
-    const drag = dragRef.current;
-    if (!drag) return;
-    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 endDrag = (e) => {
-    const drag = dragRef.current;
-    dragRef.current = null;
-    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    }
-    if (!drag) return;
-    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 });
-    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
-      };
-    } 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 };
-    }
-    (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 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
-  } : 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"
-      }
-    );
-  };
-  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)(
-      RegionResizeHandles,
-      {
-        editor,
-        box: regionBoxBounds,
-        handles: resizeHandles,
-        onPreview: setResizeBounds,
-        onCommit: commitResize
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: open ? "cmt-canvas-pin cmt-canvas-pin--open" : "cmt-canvas-pin",
-        style: { left: renderPoint.x, top: renderPoint.y },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              ref: markerRef,
-              className: "cmt-canvas-pin__marker",
-              onPointerDown: startDrag,
-              onPointerMove: onDrag,
-              onPointerUp: endDrag,
-              onPointerEnter: () => setPinHovered(true),
-              onPointerLeave: () => setPinHovered(false),
-              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,
-            {
-              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
-                }
-              )
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
-function PendingComposer({
-  editor,
-  pending,
-  currentUserId,
-  resolveName,
-  onPostComment,
-  getMentionSuggestions,
-  renderMentionSuggestion
-}) {
-  const [text, setText] = (0, import_react.useState)(import_comment_extensions.EMPTY_COMMENT);
-  const ref = (0, import_react.useRef)(null);
-  const msg = (0, import_tldraw.useTranslation)();
-  const container = (0, import_tldraw.useContainer)();
-  (0, import_tldraw.usePassThroughWheelEvents)(ref);
-  (0, import_tldraw.usePassThroughMouseOverEvents)(ref);
-  const point = (0, import_tldraw.useValue)("composer point", () => editor.pageToViewport(pending.point), [
-    editor,
-    pending.point
-  ]);
-  (0, import_react.useEffect)(() => {
-    const onPointerDown = (e) => {
-      const el = ref.current;
-      const target = e.target;
-      if (!el || !target) return;
-      if (el.contains(target) || target.closest(".cmt-mention-popup")) return;
-      import_state.pendingComment.set(editor, null);
-    };
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => document.removeEventListener("pointerdown", onPointerDown, true);
-  }, [editor]);
-  const submit = () => {
-    if ((0, import_comment_extensions.isCommentEmpty)(text) || !currentUserId) return;
-    (0, import_state.commitCommentMutation)(editor, () => {
-      const pageId = editor.getCurrentPageId();
-      const thread = (0, import_tldraw.createCommentThread)({
-        pageId,
-        anchor: pending.anchor,
-        createdBy: currentUserId
-      });
-      const comment = (0, import_tldraw.createComment)({
-        threadId: thread.id,
-        pageId,
-        authorId: currentUserId,
-        body: text
-      });
-      (0, import_comment_store.putCommentRecords)(editor, [thread, comment]);
-      if (onPostComment) onPostComment(comment);
-    });
-    setText(import_comment_extensions.EMPTY_COMMENT);
-    import_state.pendingComment.set(editor, null);
-  };
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref,
-        className: "cmt-canvas-composer",
-        style: { left: point.x, top: point.y },
-        onPointerDown: 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 : "",
-            placeholder: msg("comments.add-placeholder"),
-            sendLabel: msg("comments.send"),
-            value: text,
-            onChange: setText,
-            onSubmit: submit,
-            disabled: (0, import_comment_extensions.isCommentEmpty)(text),
-            getMentionSuggestions,
-            renderMentionSuggestion,
-            autoFocus: true,
-            leading: draftAvatar
-          }
-        )
-      }
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cluster_fade.clusterFadeClassName)(phase), children: content }, `cluster-fade:${node.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 its own pin. The open thread is excluded and
+      // rendered once below, or it would mount a second, stacked pin.
+      threads.filter((thread) => thread.id !== openId).map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: renderThreadPin(thread) }, thread.id))
     ),
-    container
-  );
+    openThread && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: renderThreadPin(openThread) }, `open:${openThread.id}`),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_region_box.RegionDraftBox, { editor }),
+    pending?.anchor.type === "region" && showPendingComposer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_region_box.RegionBox, { editor, box: pending.anchor }),
+    pending && showPendingComposer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pending_composer.PendingComposer, { editor, pending, ...props })
+  ] }) });
 }
 //# sourceMappingURL=comments-overlay.js.map