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

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

@@ -1,92 +1,35 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isMentionPickerOpen } from "@tldraw/mentions";
+import { Fragment as Fragment2, useCallback, useEffect, useMemo, useRef } from "react";
+import { EditorPortal, useEditor, useValue } from "tldraw";
+import { registerCommentAnchorLifecycle } from "./anchor-lifecycle.mjs";
+import { ClusterBadge } from "./cluster-badge.mjs";
+import { clusterFadeClassName } from "./cluster-fade.mjs";
 import {
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { createPortal } from "react-dom";
-import {
-  createComment,
-  createCommentThread,
-  getFirstCharacter,
-  react,
-  TldrawUiIcon,
-  useContainer,
-  useEditor,
-  usePassThroughMouseOverEvents,
-  usePassThroughWheelEvents,
-  useTranslation,
-  useValue
-} from "tldraw";
-import { computeClusterTable } from "../clustering/computeClusterTable.mjs";
-import { createClusterRuntime } from "../clustering/runtime.mjs";
-import { CommentCard } from "../ui/comment-card.mjs";
-import { CommentComposer } from "../ui/comment-composer.mjs";
-import { EMPTY_COMMENT, isCommentEmpty } from "../ui/comment-extensions.mjs";
-import { CommentPin } from "../ui/comment-pin.mjs";
-import { CommentThread } from "../ui/comment-thread.mjs";
-import { CountBadge } from "../ui/count-badge.mjs";
-import { isMentionPickerOpen } from "../ui/mention-suggestion.mjs";
-import { collectClusterLeaves } from "./cluster-input.mjs";
-import { CommentBody } from "./comment-body.mjs";
-import { UNKNOWN_AUTHOR } from "./comment-render.mjs";
-import { getCommentRecord, putCommentRecords, removeCommentRecords } from "./comment-store.mjs";
-import { useCommentThreads, useThreadComments } from "./hooks.mjs";
+  CLUSTER_EXPAND_ZOOM_MS,
+  revealThreadPin,
+  useClusterModel,
+  zoomToClusterSplit
+} from "./cluster-model.mjs";
+import { getCommentRecord } from "./comment-store.mjs";
+import { useCommentThreads } from "./hooks.mjs";
 import { useCommentingEnabled } from "./license.mjs";
-import {
-  getCommentingOptions,
-  useCommentingOptions
-} from "./options.mjs";
-import {
-  DEFAULT_REGION_COMMENT_OPTIONS,
-  setRegionCommentOptions
-} from "./region-options.mjs";
+import { useCanComment, useCommentingOptions } from "./options.mjs";
+import { PendingComposer } from "./pending-composer.mjs";
+import { computePinStacks, isOpenStackKeyLive, pinStacksEqual } from "./pin-stacking.mjs";
+import { RegionBox, RegionDraftBox } from "./region-box.mjs";
 import {
   commentsHidden,
-  commitCommentMutation,
+  openStackId,
   openThreadId,
   pendingComment,
-  regionDraft,
+  revealThreadRequest,
+  sidebarFilters,
   toggleCommentsHidden,
   usePendingComment
 } from "./state.mjs";
-import { anchorPagePoint, regionPinPoint, shapeAnchorAt } from "./thread-state.mjs";
-const stop = (e) => e.stopPropagation();
-const initialOf = (name) => (getFirstCharacter(name.trim()) || "?").toUpperCase();
-const CLUSTER_FADE_MS = 150;
-const CLUSTER_EXPAND_ZOOM_MS = 450;
-const draftAvatar = /* @__PURE__ */ jsx(CommentPin, { children: /* @__PURE__ */ jsxs(
-  "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__ */ jsx("path", { d: "M12 20h9" }),
-      /* @__PURE__ */ 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__ */ jsx(Body, { comment }) : /* @__PURE__ */ jsx(CommentBody, { richText: comment.body, resolveName: props.resolveName });
-  return {
-    author: props.resolveName(comment.authorId) ?? UNKNOWN_AUTHOR,
-    body,
-    date: new Date(comment.createdAt).toISOString(),
-    you: comment.authorId === props.currentUserId,
-    edited: comment.editedAt != null
-  };
-}
+import { ThreadPin } from "./thread-pin.mjs";
+import { ThreadStackPin } from "./thread-stack.mjs";
 function CanvasComments(props) {
   const commentingEnabled = useCommentingEnabled();
   if (!commentingEnabled) return null;
@@ -95,166 +38,112 @@ function CanvasComments(props) {
 function CanvasCommentsLayer(props) {
   const editor = useEditor();
   const options = useCommentingOptions();
-  const container = useContainer();
-  const regionOptions = useMemo(
-    () => ({ ...DEFAULT_REGION_COMMENT_OPTIONS, ...props.regionOptions }),
-    [props.regionOptions]
-  );
-  useEffect(() => setRegionCommentOptions(editor, regionOptions), [editor, regionOptions]);
-  const layerRef = useRef(null);
-  usePassThroughWheelEvents(layerRef);
-  usePassThroughMouseOverEvents(layerRef);
-  const deepLinkHandled = useRef(false);
-  const threads = useCommentThreads(editor);
+  const allThreads = useCommentThreads(editor);
   const pending = usePendingComment();
-  const openId = useValue("open thread id", () => openThreadId.get(editor), [editor]);
-  const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
-  const [movedThreadIds, setMovedThreadIds] = useState(EMPTY_SET);
-  const adoptOnRebuild = useRef(false);
-  const clusterLeaves = useValue(
-    "comment cluster leaves",
-    () => collectClusterLeaves(
-      editor,
-      threads.filter((thread) => !movedThreadIds.has(thread.id)),
-      openThreadId.get(editor),
-      impreciseShapeAnchor
-    ),
-    [editor, threads, impreciseShapeAnchor, movedThreadIds]
-  );
-  const clusterZoomBounds = useValue(
-    "comment cluster zoom bounds",
-    () => getClusterZoomBounds(editor),
-    [editor]
-  );
-  const latestModel = useMemo(() => {
-    const table = computeClusterTable(clusterLeaves, clusterZoomBounds);
-    const runtime = createClusterRuntime(table);
-    runtime.seed(editor.getZoomLevel());
-    return { runtime, table };
-  }, [clusterLeaves, clusterZoomBounds, editor]);
-  const [renderedModel, setRenderedModel] = 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);
-  }
+  const canComment = useCanComment(props.currentUserId);
+  const canRenderComposer = canComment || options.components.ComposerFallback != null;
+  const showPendingComposer = pending != null && canRenderComposer;
   useEffect(() => {
-    if (movedThreadIds.size === 0) return;
-    let lastZoom = editor.getZoomLevel();
-    return 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]);
-  useEffect(() => {
-    if (clusterModel === latestModel) return;
-    let lastZoom = editor.getZoomLevel();
-    return 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 = 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 = useMemo(
-    () => threads.filter((thread) => movedThreadIds.has(thread.id) && thread.id !== openId),
-    [threads, movedThreadIds, openId]
-  );
-  const clusterCursor = useValue(
-    "comment cluster cursor",
-    () => {
-      clusterModel.runtime.onCamera(editor.getZoomLevel());
-      return clusterModel.runtime.k;
-    },
-    [clusterModel, editor]
+    if (pending && !showPendingComposer) pendingComment.set(editor, null);
+  }, [editor, pending, showPendingComposer]);
+  const openId = useValue("open thread id", () => openThreadId.get(editor), [editor]);
+  const showResolved = useValue("show resolved", () => sidebarFilters.get(editor).showResolved, [
+    editor
+  ]);
+  const threads = useMemo(
+    () => allThreads.filter((t) => showResolved || t.resolved == null || t.id === openId),
+    [allThreads, showResolved, openId]
   );
-  const visibleNodes = useMemo(() => {
-    const nodes = Array.from(clusterModel.runtime.getVisible().values());
-    console.debug(
-      `[comments] cluster cursor k=${clusterCursor} \u2192 re-rendering ${nodes.length} visible nodes`
-    );
-    return nodes;
-  }, [clusterModel, clusterCursor]);
-  const fadeNodes = useFadeVisibleNodes(visibleNodes, clusterModel);
+  useEffect(() => registerCommentAnchorLifecycle(editor), [editor]);
+  const {
+    model: clusterModel,
+    zoomBounds: clusterZoomBounds,
+    fadeNodes,
+    orphanThreads,
+    heldThreads
+  } = useClusterModel(editor, threads, openId);
   const threadsById = useMemo(
     () => new Map(threads.map((thread) => [thread.id, thread])),
     [threads]
   );
+  const pinStacksRef = useRef(/* @__PURE__ */ new Map());
+  const pinStacks = useValue(
+    "comment pin stacks",
+    () => {
+      const stacks = computePinStacks(editor, threads);
+      if (pinStacksEqual(pinStacksRef.current, stacks)) return pinStacksRef.current;
+      pinStacksRef.current = stacks;
+      return stacks;
+    },
+    [editor, threads]
+  );
   const openThread = openId ? threadsById.get(openId) : null;
   const hidden = useValue("comments hidden", () => commentsHidden.get(editor), [editor]);
   useEffect(() => {
     return () => {
       openThreadId.set(editor, null);
+      openStackId.set(editor, null);
       pendingComment.set(editor, null);
+      revealThreadRequest.set(editor, null);
     };
   }, [editor]);
+  const openStackKeyIsStale = useValue(
+    "open stack key stale",
+    () => {
+      const key = openStackId.get(editor);
+      if (!key) return false;
+      return !isOpenStackKeyLive(editor, key, pinStacks, threadsById);
+    },
+    [editor, pinStacks, threadsById]
+  );
   useEffect(() => {
-    if (deepLinkHandled.current) return;
-    const id = new URLSearchParams(window.location.search).get("comment");
-    if (!id) {
-      deepLinkHandled.current = true;
-      return;
-    }
-    const record = 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
-    );
-    openThreadId.set(editor, thread.id);
-  }, [clusterModel.table, clusterZoomBounds, editor, threadsById, impreciseShapeAnchor, options]);
-  const zoomToClusterSplit = 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) openStackId.set(editor, null);
+  }, [editor, openStackKeyIsStale]);
+  const requestedRevealThread = useValue(
+    "requested reveal thread",
+    () => {
+      const id = revealThreadRequest.get(editor);
+      if (!id) return null;
+      const record = getCommentRecord(editor, id);
+      if (!record) return null;
+      const thread = record.typeName === "comment" ? getCommentRecord(editor, record.threadId) : record;
+      return thread?.typeName === "comment-thread" ? thread : null;
+    },
+    [editor]
+  );
+  useEffect(() => {
+    if (!requestedRevealThread) return;
+    revealThreadRequest.set(editor, null);
+    commentsHidden.set(editor, false);
+    revealThreadPin(editor, requestedRevealThread, clusterModel.table, clusterZoomBounds, options);
+    openThreadId.set(editor, requestedRevealThread.id);
+  }, [requestedRevealThread, clusterModel.table, clusterZoomBounds, editor, options]);
+  const revealClusteredThread = useCallback(
+    (thread) => {
+      revealThreadPin(
+        editor,
+        thread,
+        clusterModel.table,
+        clusterZoomBounds,
+        options,
+        CLUSTER_EXPAND_ZOOM_MS
       );
-      centerOnPointAtZoom(editor, node.centroid, zoom, CLUSTER_EXPAND_ZOOM_MS);
+      openThreadId.set(editor, thread.id);
+    },
+    [clusterModel.table, clusterZoomBounds, editor, options]
+  );
+  const expandCluster = useCallback(
+    (node) => {
+      zoomToClusterSplit(editor, clusterModel.table, clusterZoomBounds, node);
     },
-    [clusterModel, clusterZoomBounds, editor, options]
+    [clusterModel.table, clusterZoomBounds, editor]
   );
   useEffect(() => {
     const onKeyDown = (e) => {
       if (e.key !== "Escape" || openThreadId.get(editor) === null) return;
       if (isMentionPickerOpen()) return;
       const target = e.target;
-      if (target && target.closest(".cmt-editing")) return;
+      if (target && target.closest(".tlui-cmt-editing")) return;
       openThreadId.set(editor, null);
       e.preventDefault();
       e.stopPropagation();
@@ -274,818 +163,76 @@ function CanvasCommentsLayer(props) {
     return () => document.removeEventListener("keydown", onKeyDown, true);
   }, [editor]);
   if (hidden) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "cmt-canvas-layer", children: [
+  const stackGroupOf = (node) => {
+    const group = pinStacks.get(node.members[0]);
+    if (!group) return null;
+    return node.members.every((id) => group.includes(id)) ? group : null;
+  };
+  const renderedThreadIds = /* @__PURE__ */ new Set();
+  if (options.enableClustering) {
+    for (const { node } of fadeNodes) {
+      if (node.count === 1) renderedThreadIds.add(node.id);
+      else if (stackGroupOf(node)) for (const id of node.members) renderedThreadIds.add(id);
+    }
+    for (const thread of orphanThreads) renderedThreadIds.add(thread.id);
+    for (const thread of heldThreads) renderedThreadIds.add(thread.id);
+  } else {
+    for (const thread of threads) renderedThreadIds.add(thread.id);
+  }
+  if (openThread) renderedThreadIds.add(openThread.id);
+  const renderThreadPin = (thread) => {
+    const group = pinStacks.get(thread.id);
+    if (group) {
+      const owner = group.find((id) => renderedThreadIds.has(id));
+      if (owner !== thread.id) return null;
+      const stackThreads = group.map((id) => threadsById.get(id)).filter((t) => t !== void 0);
+      return /* @__PURE__ */ jsx(ThreadStackPin, { editor, threads: stackThreads, ...props });
+    }
+    return /* @__PURE__ */ jsx(ThreadPin, { editor, thread, ...props });
+  };
+  return (
+    /* @__PURE__ */ jsx(EditorPortal, { children: /* @__PURE__ */ jsxs("div", { className: "tlui-cmt-canvas-layer", children: [
       options.enableClustering ? /* @__PURE__ */ jsxs(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__ */ jsx(
-              ThreadPin,
+              ClusterBadge,
               {
                 editor,
-                thread,
-                ...props,
-                regionOptions
+                node,
+                onExpand: expandCluster,
+                onSelectThread: revealClusteredThread,
+                threadsById,
+                currentUserId: props.currentUserId,
+                resolveAuthor: props.resolveAuthor
               }
             );
-          } else {
-            content = /* @__PURE__ */ jsx(ClusterBadge, { editor, node, onExpand: zoomToClusterSplit });
           }
           return /* @__PURE__ */ jsx("div", { className: clusterFadeClassName(phase), children: content }, `cluster-fade:${node.id}`);
         }),
-        orphanThreads.map((thread) => /* @__PURE__ */ jsx(
-          ThreadPin,
-          {
-            editor,
-            thread,
-            ...props,
-            regionOptions
-          },
-          thread.id
-        )),
-        movedThreads.map((thread) => /* @__PURE__ */ jsx(
-          ThreadPin,
-          {
-            editor,
-            thread,
-            ...props,
-            regionOptions
-          },
-          thread.id
-        ))
+        orphanThreads.map((thread) => /* @__PURE__ */ jsx(Fragment2, { children: renderThreadPin(thread) }, thread.id)),
+        heldThreads.map((thread) => /* @__PURE__ */ jsx(Fragment2, { 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__ */ jsx(
-          ThreadPin,
-          {
-            editor,
-            thread,
-            ...props,
-            regionOptions
-          },
-          thread.id
-        )))
-      ),
-      openThread && /* @__PURE__ */ jsx(
-        ThreadPin,
-        {
-          editor,
-          thread: openThread,
-          ...props,
-          regionOptions
-        },
-        `open:${openThread.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__ */ jsx(Fragment2, { children: renderThreadPin(thread) }, thread.id)
+        ))
       ),
+      openThread && /* @__PURE__ */ jsx(Fragment2, { children: renderThreadPin(openThread) }, `open:${openThread.id}`),
       /* @__PURE__ */ jsx(RegionDraftBox, { editor }),
-      pending?.anchor.type === "region" && /* @__PURE__ */ jsx(RegionBox, { editor, box: pending.anchor }),
-      pending && props.currentUserId && /* @__PURE__ */ jsx(PendingComposer, { editor, pending, ...props })
-    ] }),
-    container
-  );
-}
-const EMPTY_SET = /* @__PURE__ */ new Set();
-const MOVED_LEAF_EPSILON = 1e-6;
-function useFadeVisibleNodes(nodes, resetKey) {
-  const resetKeyRef = useRef(resetKey);
-  const didReset = resetKeyRef.current !== resetKey;
-  if (didReset) {
-    resetKeyRef.current = resetKey;
-  }
-  const [fadeNodes, setFadeNodes] = useState(() => toPresentFadeNodes(nodes));
-  const renderedNodes = didReset ? toPresentFadeNodes(nodes) : fadeNodes;
-  useEffect(() => {
-    setFadeNodes(toPresentFadeNodes(nodes));
-  }, [resetKey]);
-  useEffect(() => {
-    if (didReset) return;
-    setFadeNodes((previous) => reconcileFadeNodes(previous, nodes));
-  }, [didReset, nodes]);
-  const hasEntering = renderedNodes.some((item) => item.phase === "entering");
-  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");
-  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
-  };
-}
-function revealDeepLinkedThread(editor, thread, table, zoomBounds, options, impreciseShapeAnchor) {
-  if (thread.pageId !== editor.getCurrentPageId()) {
-    editor.setCurrentPage(thread.pageId);
-  }
-  const point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor);
-  if (!point) return;
-  if (options.enableClustering) {
-    const parentEvent = findDirectParentEvent(table, thread.id);
-    if (parentEvent && Number.isFinite(parentEvent.zSplit) && parentEvent.zSplit <= zoomBounds.maxZoom) {
-      const zoom = clamp(
-        parentEvent.zSplit * options.clusterSplitZoomFactor,
-        zoomBounds.minZoom,
-        zoomBounds.maxZoom
-      );
-      centerOnPointAtZoom(editor, point, zoom);
-      return;
-    }
-  }
-  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 = memo(function ClusterBadge2({
-  editor,
-  node,
-  onExpand
-}) {
-  const point = 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__ */ jsx(
-    "div",
-    {
-      className: "cmt-canvas-cluster",
-      style: { left: point.x, top: point.y },
-      onPointerDown: stop,
-      onClick: (e) => {
-        e.stopPropagation();
-        onExpand(node);
-      },
-      children: /* @__PURE__ */ jsx(CountBadge, { count: node.count })
-    }
-  );
-});
-function isInInflatedViewport(editor, point) {
-  const viewport = editor.getViewportScreenBounds();
-  const margin = 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 = useRef(null);
-  usePassThroughWheelEvents(ref);
-  usePassThroughMouseOverEvents(ref);
-  return createPortal(
-    /* @__PURE__ */ jsx("div", { ref, className: "cmt-canvas-popover", style, onPointerDown: stop, children }),
-    container
-  );
-}
-function RegionBox({
-  editor,
-  box,
-  movable,
-  onPreview,
-  onCommit
-}) {
-  const rect = 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 = 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__ */ 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 = useValue("region draft", () => regionDraft.get(editor), [editor]);
-  if (!box) return null;
-  return /* @__PURE__ */ 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 = useRef(null);
-  const points = 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__ */ jsx(Fragment, { children: points.map((h) => /* @__PURE__ */ 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 = memo(function ThreadPin2({
-  editor,
-  thread,
-  regionOptions,
-  ...props
-}) {
-  const {
-    currentUserId,
-    resolveName,
-    onPostComment,
-    isCommentUnread,
-    onCommentRead,
-    getMentionSuggestions,
-    renderMentionSuggestion
-  } = props;
-  const options = useCommentingOptions();
-  const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
-  const container = useContainer();
-  const comments = useThreadComments(editor, thread.id);
-  const msg = useTranslation();
-  const open = useValue("thread open", () => openThreadId.get(editor) === thread.id, [
-    editor,
-    thread.id
-  ]);
-  const [reply, setReply] = useState(EMPTY_COMMENT);
-  const [editingId, setEditingId] = useState(null);
-  const [editText, setEditText] = useState(EMPTY_COMMENT);
-  const [dragPagePoint, setDragPagePoint] = useState(null);
-  const [resizeBounds, setResizeBounds] = useState(null);
-  const [pinHovered, setPinHovered] = useState(false);
-  const pointerInRegion = 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 = 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 = useRef(null);
-  const markerRef = useRef(null);
-  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;
-      openThreadId.set(editor, null);
-    };
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => document.removeEventListener("pointerdown", onPointerDown, true);
-  }, [open, editor]);
-  const point = useValue(
-    "pin point",
-    () => {
-      if (thread.pageId !== editor.getCurrentPageId()) return null;
-      const pagePoint = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor);
-      return pagePoint ? editor.pageToViewport(pagePoint) : null;
-    },
-    [editor, thread.anchor, thread.pageId, impreciseShapeAnchor]
-  );
-  const visible = point !== null;
-  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 (isCommentEmpty(reply) || !currentUserId) return;
-    commitCommentMutation(editor, () => {
-      const comment = createComment({
-        threadId: thread.id,
-        pageId: thread.pageId,
-        authorId: currentUserId,
-        body: reply
-      });
-      putCommentRecords(editor, [comment]);
-      if (onPostComment) onPostComment(comment);
-    });
-    setReply(EMPTY_COMMENT);
-  };
-  const toggleResolve = () => {
-    if (!currentUserId) return;
-    commitCommentMutation(editor, () => {
-      putCommentRecords(editor, [
-        {
-          ...thread,
-          resolved: thread.resolved ? null : { at: Date.now(), by: currentUserId }
-        }
-      ]);
-    });
-  };
-  const deleteThread = () => {
-    openThreadId.set(editor, null);
-    commitCommentMutation(
-      editor,
-      () => 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 || isCommentEmpty(editText)) return;
-    commitCommentMutation(editor, () => {
-      putCommentRecords(editor, [{ ...comment, body: editText, editedAt: Date.now() }]);
-    });
-    setEditingId(null);
-  };
-  const renderComment = (card, index) => {
-    const comment = comments[index];
-    if (editingId === comment.id) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "cmt-editing",
-          onKeyDown: (e) => {
-            if (e.key === "Escape") {
-              setEditingId(null);
-              e.stopPropagation();
-            }
-          },
-          children: /* @__PURE__ */ jsx(
-            CommentComposer,
-            {
-              author: card.author,
-              placeholder: msg("comments.edit-placeholder"),
-              value: editText,
-              onChange: setEditText,
-              onSubmit: saveEdit,
-              sendLabel: msg("comments.save"),
-              disabled: isCommentEmpty(editText),
-              getMentionSuggestions,
-              renderMentionSuggestion,
-              autoFocus: true
-            }
-          )
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      CommentCard,
-      {
-        ...card,
-        actions: comment.authorId === currentUserId ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "cmt-thread__action",
-            title: msg("comments.edit"),
-            onClick: () => startEdit(comment),
-            children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "dots-horizontal", label: msg("comments.edit"), small: true })
-          }
-        ) : void 0
-      }
-    );
-  };
-  const headerActions = /* @__PURE__ */ jsxs(Fragment, { children: [
-    currentUserId && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "cmt-thread__action",
-        title: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
-        onClick: toggleResolve,
-        children: /* @__PURE__ */ jsx(
-          TldrawUiIcon,
-          {
-            icon: "check",
-            label: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
-            small: true
-          }
-        )
-      }
-    ),
-    currentUserId && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "cmt-thread__action",
-        title: msg("comments.delete"),
-        onClick: deleteThread,
-        children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "trash", label: msg("comments.delete"), small: true })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "cmt-thread__action",
-        title: msg("comments.dismiss"),
-        onClick: () => openThreadId.set(editor, null),
-        children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "cross-2", label: msg("comments.dismiss"), small: true })
-      }
-    )
-  ] });
-  const PinContent = options.components.PinContent;
-  const pinContent = PinContent ? /* @__PURE__ */ jsx(PinContent, { thread, comments }) : initialOf(resolveName(thread.createdBy) ?? 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) {
-      openThreadId.set(editor, 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 ? shapeAnchorAt(editor, hit.id, pagePoint, e.altKey) : { type: "point", x: pagePoint.x, y: pagePoint.y };
-    }
-    commitCommentMutation(editor, () => putCommentRecords(editor, [{ ...thread, anchor }]), "drag");
-  };
-  const livePinPage = resizeBounds ? 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(
-      () => putCommentRecords(editor, [{ ...thread, anchor: { type: "region", ...bounds } }]),
-      {
-        history: "ignore"
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    regionBoxBounds && (dragPagePoint || revealed) && /* @__PURE__ */ jsx(
-      RegionBox,
-      {
-        editor,
-        box: regionBoxBounds,
-        movable: bodyMovable && !dragPagePoint,
-        onPreview: setResizeBounds,
-        onCommit: commitResize
-      }
-    ),
-    regionBoxBounds && revealed && !dragPagePoint && regionOptions.resize !== "none" && /* @__PURE__ */ jsx(
-      RegionResizeHandles,
-      {
-        editor,
-        box: regionBoxBounds,
-        handles: resizeHandles,
-        onPreview: setResizeBounds,
-        onCommit: commitResize
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: open ? "cmt-canvas-pin cmt-canvas-pin--open" : "cmt-canvas-pin",
-        style: { left: renderPoint.x, top: renderPoint.y },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: markerRef,
-              className: "cmt-canvas-pin__marker",
-              onPointerDown: startDrag,
-              onPointerMove: onDrag,
-              onPointerUp: endDrag,
-              onPointerEnter: () => setPinHovered(true),
-              onPointerLeave: () => setPinHovered(false),
-              children: /* @__PURE__ */ jsx(CommentPin, { resolved: thread.resolved != null, open, children: pinContent })
-            }
-          ),
-          open && /* @__PURE__ */ jsx(
-            ThreadPopover,
-            {
-              container,
-              style: { left: renderPoint.x + 36, top: renderPoint.y - 28 },
-              children: /* @__PURE__ */ jsx(
-                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) ?? UNKNOWN_AUTHOR
-                  ) : void 0,
-                  composer: currentUserId && !thread.resolved ? {
-                    author: resolveName(currentUserId) ?? UNKNOWN_AUTHOR,
-                    placeholder: msg("comments.reply-placeholder"),
-                    sendLabel: msg("comments.send"),
-                    value: reply,
-                    onChange: setReply,
-                    onSubmit: postReply,
-                    disabled: isCommentEmpty(reply),
-                    getMentionSuggestions,
-                    renderMentionSuggestion
-                  } : void 0
-                }
-              )
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
-function PendingComposer({
-  editor,
-  pending,
-  currentUserId,
-  resolveName,
-  onPostComment,
-  getMentionSuggestions,
-  renderMentionSuggestion
-}) {
-  const [text, setText] = useState(EMPTY_COMMENT);
-  const ref = useRef(null);
-  const msg = useTranslation();
-  const container = useContainer();
-  usePassThroughWheelEvents(ref);
-  usePassThroughMouseOverEvents(ref);
-  const point = useValue("composer point", () => editor.pageToViewport(pending.point), [
-    editor,
-    pending.point
-  ]);
-  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;
-      pendingComment.set(editor, null);
-    };
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => document.removeEventListener("pointerdown", onPointerDown, true);
-  }, [editor]);
-  const submit = () => {
-    if (isCommentEmpty(text) || !currentUserId) return;
-    commitCommentMutation(editor, () => {
-      const pageId = editor.getCurrentPageId();
-      const thread = createCommentThread({
-        pageId,
-        anchor: pending.anchor,
-        createdBy: currentUserId
-      });
-      const comment = createComment({
-        threadId: thread.id,
-        pageId,
-        authorId: currentUserId,
-        body: text
-      });
-      putCommentRecords(editor, [thread, comment]);
-      if (onPostComment) onPostComment(comment);
-    });
-    setText(EMPTY_COMMENT);
-    pendingComment.set(editor, null);
-  };
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: "cmt-canvas-composer",
-        style: { left: point.x, top: point.y },
-        onPointerDown: stop,
-        onKeyDown: (e) => {
-          if (e.key === "Escape" && !isMentionPickerOpen()) pendingComment.set(editor, null);
-        },
-        children: /* @__PURE__ */ jsx(
-          CommentComposer,
-          {
-            author: currentUserId ? resolveName(currentUserId) ?? UNKNOWN_AUTHOR : "",
-            placeholder: msg("comments.add-placeholder"),
-            sendLabel: msg("comments.send"),
-            value: text,
-            onChange: setText,
-            onSubmit: submit,
-            disabled: isCommentEmpty(text),
-            getMentionSuggestions,
-            renderMentionSuggestion,
-            autoFocus: true,
-            leading: draftAvatar
-          }
-        )
-      }
-    ),
-    container
+      pending?.anchor.type === "region" && showPendingComposer && /* @__PURE__ */ jsx(RegionBox, { editor, box: pending.anchor }),
+      pending && showPendingComposer && /* @__PURE__ */ jsx(PendingComposer, { editor, pending, ...props })
+    ] }) })
   );
 }
 export {