@tldraw/commenting 5.3.0-next.2fa9c61a8de6 → 5.3.0-next.7654e7ac2a02

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

@@ -24,69 +24,29 @@ 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_composer = require("../ui/comment-composer");
-var import_comment_extensions = require("../ui/comment-extensions");
-var import_comment_pin = require("../ui/comment-pin");
-var import_count_badge = require("../ui/count-badge");
 var import_anchor_lifecycle = require("./anchor-lifecycle");
-var import_cluster_input = require("./cluster-input");
-var import_comment_drafts = require("./comment-drafts");
-var import_comment_mutations = require("./comment-mutations");
-var import_comment_render = require("./comment-render");
+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_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_preview = require("./thread-preview");
+var import_thread_pin = require("./thread-pin");
 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 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 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 portalHost = useTrailingPortalHost(container);
-  const layerRef = (0, import_react.useRef)(null);
-  (0, import_tldraw.usePassThroughMouseOverEvents)(layerRef);
   const allThreads = (0, import_hooks.useCommentThreads)(editor);
   const pending = (0, import_state.usePendingComment)();
   const canComment = (0, import_options.useCanComment)(props.currentUserId);
@@ -104,121 +64,28 @@ function CanvasCommentsLayer(props) {
     [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) => !heldThreadIds.has(thread.id)),
-      import_state.openThreadId.get(editor)
-    ),
-    [editor, threads, heldThreadIds]
-  );
-  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;
-  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) {
-    const next = new Set(heldThreadIds);
-    for (const id of newlyMovedIds) next.add(id);
-    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 (heldThreadIds.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;
-      setHeldThreadIds(EMPTY_SET);
-    });
-  }, [heldThreadIds, editor]);
-  (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 partitionVersion = clusterModel.runtime.version;
-  const orphanThreads = (0, import_react.useMemo)(() => {
-    if (clusterModel === latestModel) return [];
-    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) && !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]
-  );
-  (0, import_tldraw.useValue)(
-    "comment cluster version",
-    () => {
-      clusterModel.runtime.onCamera(editor.getZoomLevel());
-      return clusterModel.runtime.version;
-    },
-    [clusterModel, editor]
-  );
-  const visibleNodes = (0, import_react.useMemo)(() => {
-    return Array.from(clusterModel.runtime.getVisible().values());
-  }, [clusterModel, partitionVersion]);
-  const fadeNodes = useFadeVisibleNodes(visibleNodes, clusterModel);
+  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 pinStacks = (0, import_tldraw.useValue)("comment pin stacks", () => (0, import_pin_stacking.computePinStacks)(editor, threads), [
-    editor,
-    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)(() => {
@@ -229,17 +96,18 @@ function CanvasCommentsLayer(props) {
       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)(() => {
-    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;
-    }
-    import_state.openStackId.set(editor, null);
-  }, [editor, pinStacks, threadsById]);
+    if (openStackKeyIsStale) import_state.openStackId.set(editor, null);
+  }, [editor, openStackKeyIsStale]);
   const requestedRevealThread = (0, import_tldraw.useValue)(
     "requested reveal thread",
     () => {
@@ -256,35 +124,28 @@ function CanvasCommentsLayer(props) {
     if (!requestedRevealThread) return;
     import_state.revealThreadRequest.set(editor, null);
     import_state.commentsHidden.set(editor, false);
-    revealThreadPin(editor, requestedRevealThread, clusterModel.table, clusterZoomBounds, options);
+    (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) => {
-      revealThreadPin(
+      (0, import_cluster_model.revealThreadPin)(
         editor,
         thread,
         clusterModel.table,
         clusterZoomBounds,
         options,
-        CLUSTER_EXPAND_ZOOM_MS
+        import_cluster_model.CLUSTER_EXPAND_ZOOM_MS
       );
       import_state.openThreadId.set(editor, thread.id);
     },
     [clusterModel.table, clusterZoomBounds, editor, options]
   );
-  const zoomToClusterSplit = (0, import_react.useCallback)(
+  const expandCluster = (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 * CLUSTER_SPLIT_ZOOM_FACTOR,
-        clusterZoomBounds.minZoom,
-        clusterZoomBounds.maxZoom
-      );
-      centerOnPointAtZoom(editor, node.centroid, zoom, CLUSTER_EXPAND_ZOOM_MS);
+      (0, import_cluster_model.zoomToClusterSplit)(editor, clusterModel.table, clusterZoomBounds, node);
     },
-    [clusterModel, clusterZoomBounds, editor]
+    [clusterModel.table, clusterZoomBounds, editor]
   );
   (0, import_react.useEffect)(() => {
     const onKeyDown = (e) => {
@@ -336,701 +197,47 @@ function CanvasCommentsLayer(props) {
       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: "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)(
-              ClusterBadge,
-              {
-                editor,
-                node,
-                onExpand: zoomToClusterSplit,
-                onSelectThread: revealClusteredThread,
-                threadsById,
-                currentUserId: props.currentUserId,
-                resolveAuthor: props.resolveAuthor
-              }
-            );
-          }
-          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)(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)(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" && showPendingComposer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RegionBox, { editor, box: pending.anchor }),
-      pending && showPendingComposer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PendingComposer, { editor, pending, ...props })
-    ] }),
-    portalHost
-  );
-}
-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 `tlui-cmt-cluster-fade tlui-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 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
-  };
-}
-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);
-  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 * CLUSTER_SPLIT_ZOOM_FACTOR,
-        zoomBounds.minZoom,
-        zoomBounds.maxZoom
-      );
-      centerOnPointAtZoom(editor, point, zoom, duration);
-      return;
-    }
-  }
-  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 - offset) / 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,
-  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",
-    () => {
-      const pagePoint = editor.pageToViewport(node.centroid);
-      if (!isInInflatedViewport(editor, pagePoint)) return null;
-      return pagePoint;
-    },
-    [editor, node]
-  );
-  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 = CLUSTER_CULL_MARGIN_PX;
-  return point.x >= -margin && point.y >= -margin && point.x <= viewport.w + margin && point.y <= viewport.h + margin;
-}
-function RegionBox({ editor, box }) {
-  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]
-  );
-  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]);
-  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_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);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_thread_pin.ThreadPin, { editor, thread, ...props });
   };
-  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: "tlui-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,
-  ...props
-}) {
-  const { resolveAuthor } = props;
-  const options = (0, import_options.useCommentingOptions)();
-  const canComment = (0, import_options.useCanComment)(props.currentUserId);
-  const container = (0, import_tldraw.useContainer)();
-  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 [dragPagePoint, setDragPagePoint] = (0, import_react.useState)(null);
-  const [resizeBounds, setResizeBounds] = (0, import_react.useState)(null);
-  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",
-    () => {
-      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 || 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)(
-    () => 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(".tlui-cmt-canvas-popover")) return;
-      const marker = markerRef.current;
-      if (marker && marker.contains(target)) return;
-      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);
-    };
-    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);
-      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]
-  );
-  if (!point) return null;
-  const PinContent = options.components.PinContent;
-  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 startDrag = (e) => {
-    if (isCanvasPanGesture(editor, e)) {
-      forwardPointerEventToCanvas(container, e);
-      return;
-    }
-    e.stopPropagation();
-    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 (!canComment) return;
-    if (!drag.moved && Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < 4) return;
-    drag.moved = true;
-    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;
-    dragRef.current = null;
-    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-      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 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 - pinCorner.x * thread.anchor.w,
-        y: pagePoint.y - pinCorner.y * thread.anchor.h
-      };
-    } else {
-      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_comment_mutations.commitCommentMutation)(editor, () => (0, import_comment_mutations.putRecordsInCommit)(editor, [{ ...thread, anchor }]), "drag");
-  };
-  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 - pinCorner.x * regionAnchor.w,
-    y: dragPagePoint.y - pinCorner.y * regionAnchor.h
-  } : regionAnchor;
-  const regionBoxBounds = resizeBounds ?? movedRegion;
-  const commitResize = (bounds) => {
-    setResizeBounds(null);
-    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 }),
-    regionBoxBounds && revealed && !dragPagePoint && canComment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      RegionResizeHandles,
-      {
-        editor,
-        box: regionBoxBounds,
-        handles: resizeHandles,
-        onPreview: setResizeBounds,
-        onCommit: commitResize
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        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)(
-            "button",
-            {
-              ref: markerRef,
-              type: "button",
-              className: "tlui-cmt-button tlui-cmt-canvas-pin__marker",
-              "aria-label": pinLabel,
-              "aria-expanded": open,
-              onPointerDown: startDrag,
-              onPointerMove: onDrag,
-              onPointerUp: endDrag,
-              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)(
-            import_thread_view.ThreadPopover,
-            {
-              container,
-              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,
+  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,
             {
               editor,
-              threads: previewThreads,
-              container,
-              variant: "thread",
-              point: renderPoint,
-              onSelectThread: () => import_state.openThreadId.set(editor, thread.id),
-              ...previewHandlers,
+              node,
+              onExpand: expandCluster,
+              onSelectThread: revealClusteredThread,
+              threadsById,
               currentUserId: props.currentUserId,
-              resolveAuthor
+              resolveAuthor: props.resolveAuthor
             }
-          )
-        ]
-      }
-    )
-  ] });
-});
-function PendingComposer({
-  editor,
-  pending,
-  currentUserId,
-  resolveAuthor,
-  onPostComment,
-  getMentionSuggestions,
-  renderMentionSuggestion
-}) {
-  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)();
-  (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(".tlui-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_comment_mutations.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_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)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref,
-        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_mentions.isMentionPickerOpen)()) import_state.pendingComment.set(editor, null);
-        },
-        children: canComment ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_comment_composer.CommentComposer,
-          {
-            author: me ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR,
-            placeholder: msg("comments.add-placeholder"),
-            sendLabel: msg("comments.send"),
-            value: text,
-            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) || !currentUserId,
-            getMentionSuggestions,
-            renderMentionSuggestion,
-            autoFocus: true,
-            leading: draftAvatar
-          }
-        ) : ComposerFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComposerFallback, { context: "pending" })
-      }
+          );
+        }
+        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