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

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

@@ -1,116 +1,43 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Avatar, isMentionPickerOpen } from "@tldraw/mentions";
-import {
-  Fragment as Fragment2,
-  memo,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { createPortal } from "react-dom";
-import {
-  createComment,
-  createCommentThread,
-  react,
-  useContainer,
-  useEditor,
-  usePassThroughMouseOverEvents,
-  usePassThroughWheelEvents,
-  useTranslation,
-  useValue
-} from "tldraw";
-import { computeClusterTable } from "../clustering/computeClusterTable.mjs";
-import { createClusterRuntime } from "../clustering/runtime.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 { CountBadge } from "../ui/count-badge.mjs";
+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 { collectClusterLeaves } from "./cluster-input.mjs";
+import { ClusterBadge } from "./cluster-badge.mjs";
+import { clusterFadeClassName } from "./cluster-fade.mjs";
 import {
-  clearCommentDraft,
-  getCommentDraft,
-  NEW_COMMENT_DRAFT,
-  saveCommentDraft
-} from "./comment-drafts.mjs";
-import { commitCommentMutation, putRecordsInCommit } from "./comment-mutations.mjs";
-import { UNKNOWN_AUTHOR, UNKNOWN_COMMENT_AUTHOR } from "./comment-render.mjs";
+  CLUSTER_EXPAND_ZOOM_MS,
+  revealThreadPin,
+  useClusterModel,
+  zoomToClusterSplit
+} from "./cluster-model.mjs";
 import { getCommentRecord } from "./comment-store.mjs";
-import { useCommentThreads, useThreadComments } from "./hooks.mjs";
+import { useCommentThreads } from "./hooks.mjs";
 import { useCommentingEnabled } from "./license.mjs";
-import {
-  getCommentingOptions,
-  useCanComment,
-  useCommentingOptions
-} from "./options.mjs";
-import { computePinStacks, pinStackKey } from "./pin-stacking.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,
   openStackId,
   openThreadId,
   pendingComment,
-  regionDraft,
   revealThreadRequest,
   sidebarFilters,
   toggleCommentsHidden,
   usePendingComment
 } from "./state.mjs";
-import { ThreadPreview, sortThreadsForPreview, useMarkerPreview } from "./thread-preview.mjs";
+import { ThreadPin } from "./thread-pin.mjs";
 import { ThreadStackPin } from "./thread-stack.mjs";
-import {
-  anchorPagePoint,
-  commentCenterScreenOffset,
-  commentTargetShapeAt,
-  impreciseShapePinInset,
-  REGION_PIN_CORNER,
-  regionAnchorPinCorner,
-  regionPinPoint,
-  shapeAnchorAt
-} from "./thread-state.mjs";
-import { POPOVER_OFFSET, ThreadPopover, ThreadView } from "./thread-view.mjs";
-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 = useCommentingEnabled();
   if (!commentingEnabled) return null;
   return /* @__PURE__ */ jsx(CanvasCommentsLayer, { ...props });
 }
-function useTrailingPortalHost(container) {
-  const [host, setHost] = useState(null);
-  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 = useEditor();
   const options = useCommentingOptions();
-  const container = useContainer();
-  const portalHost = useTrailingPortalHost(container);
-  const layerRef = useRef(null);
-  usePassThroughMouseOverEvents(layerRef);
   const allThreads = useCommentThreads(editor);
   const pending = usePendingComment();
   const canComment = useCanComment(props.currentUserId);
@@ -128,121 +55,28 @@ function CanvasCommentsLayer(props) {
     [allThreads, showResolved, openId]
   );
   useEffect(() => registerCommentAnchorLifecycle(editor), [editor]);
-  const [heldThreadIds, setHeldThreadIds] = useState(EMPTY_SET);
-  const adoptOnRebuild = useRef(false);
-  const clusterLeaves = useValue(
-    "comment cluster leaves",
-    () => collectClusterLeaves(
-      editor,
-      threads.filter((thread) => !heldThreadIds.has(thread.id)),
-      openThreadId.get(editor)
-    ),
-    [editor, threads, heldThreadIds]
-  );
-  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;
-  const pageId = useValue("comment cluster page", () => editor.getCurrentPageId(), [editor]);
-  const pageRef = 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);
-      }
-    }
-  }
-  useEffect(() => {
-    if (heldThreadIds.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;
-      setHeldThreadIds(EMPTY_SET);
-    });
-  }, [heldThreadIds, 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 partitionVersion = clusterModel.runtime.version;
-  const orphanThreads = 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 = useMemo(
-    () => threads.filter((thread) => heldThreadIds.has(thread.id) && thread.id !== openId),
-    [threads, heldThreadIds, openId]
-  );
-  useValue(
-    "comment cluster version",
-    () => {
-      clusterModel.runtime.onCamera(editor.getZoomLevel());
-      return clusterModel.runtime.version;
-    },
-    [clusterModel, editor]
-  );
-  const visibleNodes = useMemo(() => {
-    return Array.from(clusterModel.runtime.getVisible().values());
-  }, [clusterModel, partitionVersion]);
-  const fadeNodes = useFadeVisibleNodes(visibleNodes, clusterModel);
+  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 pinStacks = useValue("comment pin stacks", () => computePinStacks(editor, threads), [
-    editor,
-    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(() => {
@@ -253,17 +87,18 @@ function CanvasCommentsLayer(props) {
       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(() => {
-    const key = openStackId.get(editor);
-    if (!key) return;
-    for (const id of pinStacks.keys()) {
-      const thread = threadsById.get(id);
-      if (!thread) continue;
-      const point = anchorPagePoint(editor, thread.anchor);
-      if (point && pinStackKey(point) === key) return;
-    }
-    openStackId.set(editor, null);
-  }, [editor, pinStacks, threadsById]);
+    if (openStackKeyIsStale) openStackId.set(editor, null);
+  }, [editor, openStackKeyIsStale]);
   const requestedRevealThread = useValue(
     "requested reveal thread",
     () => {
@@ -297,18 +132,11 @@ function CanvasCommentsLayer(props) {
     },
     [clusterModel.table, clusterZoomBounds, editor, options]
   );
-  const zoomToClusterSplit = useCallback(
+  const expandCluster = 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);
+      zoomToClusterSplit(editor, clusterModel.table, clusterZoomBounds, node);
     },
-    [clusterModel, clusterZoomBounds, editor]
+    [clusterModel.table, clusterZoomBounds, editor]
   );
   useEffect(() => {
     const onKeyDown = (e) => {
@@ -362,9 +190,8 @@ function CanvasCommentsLayer(props) {
     }
     return /* @__PURE__ */ jsx(ThreadPin, { editor, thread, ...props });
   };
-  if (!portalHost) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "tlui-cmt-canvas-layer", children: [
+  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;
@@ -382,7 +209,7 @@ function CanvasCommentsLayer(props) {
               {
                 editor,
                 node,
-                onExpand: zoomToClusterSplit,
+                onExpand: expandCluster,
                 onSelectThread: revealClusteredThread,
                 threadsById,
                 currentUserId: props.currentUserId,
@@ -395,10 +222,8 @@ function CanvasCommentsLayer(props) {
         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.
+        // 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)
         ))
@@ -407,656 +232,7 @@ function CanvasCommentsLayer(props) {
       /* @__PURE__ */ jsx(RegionDraftBox, { editor }),
       pending?.anchor.type === "region" && showPendingComposer && /* @__PURE__ */ jsx(RegionBox, { editor, box: pending.anchor }),
       pending && showPendingComposer && /* @__PURE__ */ jsx(PendingComposer, { editor, pending, ...props })
-    ] }),
-    portalHost
-  );
-}
-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 `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 = 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 = 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 = 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 = memo(function ClusterBadge2({
-  editor,
-  node,
-  onExpand,
-  onSelectThread,
-  threadsById,
-  ...props
-}) {
-  const container = useContainer();
-  const msg = useTranslation();
-  const badgeRef = useRef(null);
-  const { previewShown, previewHandlers } = useMarkerPreview(editor, `cluster:${node.id}`);
-  usePassThroughWheelEvents(badgeRef);
-  const point = useValue(
-    "cluster badge point",
-    () => {
-      const pagePoint = editor.pageToViewport(node.centroid);
-      if (!isInInflatedViewport(editor, pagePoint)) return null;
-      return pagePoint;
-    },
-    [editor, node]
-  );
-  const previewThreads = useMemo(() => {
-    if (!previewShown) return [];
-    const threads = [];
-    for (const id of node.members) {
-      const thread = threadsById.get(id);
-      if (thread) threads.push(thread);
-    }
-    return sortThreadsForPreview(threads);
-  }, [previewShown, node.members, threadsById]);
-  if (!point) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ 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__ */ jsx(CountBadge, { count: node.count })
-      }
-    ),
-    previewShown && previewThreads.length > 0 && /* @__PURE__ */ jsx(
-      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 = 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__ */ jsx("div", { className: "tlui-cmt-canvas-region", style: rect });
-}
-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_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: "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 = memo(function ThreadPin2({
-  editor,
-  thread,
-  ...props
-}) {
-  const { resolveAuthor } = props;
-  const options = useCommentingOptions();
-  const canComment = useCanComment(props.currentUserId);
-  const container = useContainer();
-  const msg = useTranslation();
-  const comments = useThreadComments(editor, thread.id);
-  const open = useValue("thread open", () => openThreadId.get(editor) === thread.id, [
-    editor,
-    thread.id
-  ]);
-  const [dragPagePoint, setDragPagePoint] = useState(null);
-  const [resizeBounds, setResizeBounds] = useState(null);
-  const { previewShown, previewHandlers } = useMarkerPreview(editor, `pin:${thread.id}`);
-  const previewThreads = useMemo(() => [thread], [thread]);
-  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 || pointerInRegion;
-  const pinCorner = thread.anchor.type === "region" ? regionAnchorPinCorner(thread.anchor) : REGION_PIN_CORNER;
-  const resizeHandles = useMemo(
-    () => REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),
-    [pinCorner]
-  );
-  const dragRef = useRef(null);
-  const markerRef = useRef(null);
-  usePassThroughWheelEvents(markerRef);
-  useEffect(() => {
-    return () => {
-      if (dragRef.current) editor.setHintingShapes([]);
-    };
-  }, [editor]);
-  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;
-      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);
-      if (!pagePoint) return null;
-      const viewportPoint = editor.pageToViewport(pagePoint);
-      const inset = 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__ */ jsx(PinContent, { thread, comments }) : /* @__PURE__ */ jsx(Avatar, { author: threadAuthor ?? UNKNOWN_COMMENT_AUTHOR });
-  const pinLabel = msg(
-    thread.resolved ? "comments.pin-label-resolved" : "comments.pin-label"
-  ).replace("{name}", threadAuthor?.name ?? 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 = anchorPagePoint(editor, thread.anchor);
-    const inset = 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 = 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) {
-      openThreadId.set(editor, 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 = commentTargetShapeAt(editor, pagePoint);
-      anchor = hit ? shapeAnchorAt(
-        editor,
-        hit.id,
-        pagePoint,
-        getCommentingOptions(editor).shouldBePrecise(editor, {
-          shapeId: hit.id,
-          point: pagePoint,
-          altKey: e.altKey
-        })
-      ) : { type: "point", x: pagePoint.x, y: pagePoint.y };
-    }
-    commitCommentMutation(editor, () => putRecordsInCommit(editor, [{ ...thread, anchor }]), "drag");
-  };
-  const livePinPage = resizeBounds ? 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;
-    commitCommentMutation(
-      editor,
-      // Spread the existing anchor first so the region's pin corner survives a resize.
-      () => putRecordsInCommit(editor, [{ ...thread, anchor: { ...regionAnchor, ...bounds } }]),
-      "drag"
-    );
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    regionBoxBounds && (dragPagePoint || revealed) && /* @__PURE__ */ jsx(RegionBox, { editor, box: regionBoxBounds }),
-    regionBoxBounds && revealed && !dragPagePoint && canComment && /* @__PURE__ */ jsx(
-      RegionResizeHandles,
-      {
-        editor,
-        box: regionBoxBounds,
-        handles: resizeHandles,
-        onPreview: setResizeBounds,
-        onCommit: commitResize
-      }
-    ),
-    /* @__PURE__ */ 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__ */ 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;
-                openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id);
-              },
-              onPointerEnter: previewHandlers.onPointerEnter,
-              onPointerLeave: previewHandlers.onPointerLeave,
-              onFocus: previewHandlers.onPointerEnter,
-              onBlur: previewHandlers.onPointerLeave,
-              children: /* @__PURE__ */ jsx(CommentPin, { resolved: thread.resolved != null, open, children: pinContent })
-            }
-          ),
-          open && /* @__PURE__ */ jsx(
-            ThreadPopover,
-            {
-              container,
-              style: {
-                left: renderPoint.x + POPOVER_OFFSET.thread.x,
-                top: renderPoint.y + POPOVER_OFFSET.thread.y - THREAD_HEADER_BLOCK
-              },
-              children: /* @__PURE__ */ jsx(ThreadView, { editor, thread, ...props })
-            }
-          ),
-          previewShown && !dragPagePoint && /* @__PURE__ */ jsx(
-            ThreadPreview,
-            {
-              editor,
-              threads: previewThreads,
-              container,
-              variant: "thread",
-              point: renderPoint,
-              onSelectThread: () => openThreadId.set(editor, thread.id),
-              ...previewHandlers,
-              currentUserId: props.currentUserId,
-              resolveAuthor
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
-function PendingComposer({
-  editor,
-  pending,
-  currentUserId,
-  resolveAuthor,
-  onPostComment,
-  getMentionSuggestions,
-  renderMentionSuggestion
-}) {
-  const ComposerFallback = useCommentingOptions().components.ComposerFallback;
-  const canComment = useCanComment(currentUserId);
-  const me = currentUserId ? resolveAuthor(currentUserId) : void 0;
-  const draftAvatar = /* @__PURE__ */ jsx(CommentPin, { children: /* @__PURE__ */ jsx(Avatar, { author: me ?? UNKNOWN_COMMENT_AUTHOR }) });
-  const [text, setText] = useState(
-    () => getCommentDraft(NEW_COMMENT_DRAFT) ?? 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(".tlui-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
-      });
-      putRecordsInCommit(editor, [thread, comment]);
-      if (onPostComment) onPostComment(comment);
-    });
-    setText(EMPTY_COMMENT);
-    clearCommentDraft(NEW_COMMENT_DRAFT);
-    pendingComment.set(editor, null);
-  };
-  return createPortal(
-    /* @__PURE__ */ 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" && !isMentionPickerOpen()) pendingComment.set(editor, null);
-        },
-        children: canComment ? /* @__PURE__ */ jsx(
-          CommentComposer,
-          {
-            author: me ?? UNKNOWN_COMMENT_AUTHOR,
-            placeholder: msg("comments.add-placeholder"),
-            sendLabel: msg("comments.send"),
-            value: text,
-            onChange: (value) => {
-              setText(value);
-              saveCommentDraft(NEW_COMMENT_DRAFT, value);
-            },
-            onSubmit: submit,
-            disabled: isCommentEmpty(text) || !currentUserId,
-            getMentionSuggestions,
-            renderMentionSuggestion,
-            autoFocus: true,
-            leading: draftAvatar
-          }
-        ) : ComposerFallback && /* @__PURE__ */ jsx(ComposerFallback, { context: "pending" })
-      }
-    ),
-    container
+    ] }) })
   );
 }
 export {