@tldraw/commenting 0.0.0-bootstrap

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

@@ -0,0 +1,1094 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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";
+import { useCommentingEnabled } from "./license.mjs";
+import {
+  getCommentingOptions,
+  useCommentingOptions
+} from "./options.mjs";
+import {
+  DEFAULT_REGION_COMMENT_OPTIONS,
+  setRegionCommentOptions
+} from "./region-options.mjs";
+import {
+  commentsHidden,
+  commitCommentMutation,
+  openThreadId,
+  pendingComment,
+  regionDraft,
+  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
+  };
+}
+function CanvasComments(props) {
+  const commentingEnabled = useCommentingEnabled();
+  if (!commentingEnabled) return null;
+  return /* @__PURE__ */ jsx(CanvasCommentsLayer, { ...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 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);
+  }
+  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]
+  );
+  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);
+  const threadsById = useMemo(
+    () => new Map(threads.map((thread) => [thread.id, thread])),
+    [threads]
+  );
+  const openThread = openId ? threadsById.get(openId) : null;
+  const hidden = useValue("comments hidden", () => commentsHidden.get(editor), [editor]);
+  useEffect(() => {
+    return () => {
+      openThreadId.set(editor, null);
+      pendingComment.set(editor, null);
+    };
+  }, [editor]);
+  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
+      );
+      centerOnPointAtZoom(editor, node.centroid, zoom, CLUSTER_EXPAND_ZOOM_MS);
+    },
+    [clusterModel, clusterZoomBounds, editor, options]
+  );
+  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;
+      openThreadId.set(editor, null);
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [editor]);
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.code !== "KeyC" || !e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return;
+      const target = e.target;
+      if (target && target.closest('input, textarea, [contenteditable="true"]')) return;
+      toggleCommentsHidden(editor);
+      e.preventDefault();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [editor]);
+  if (hidden) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "cmt-canvas-layer", children: [
+      options.enableClustering ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        fadeNodes.map(({ node, phase }) => {
+          let content;
+          if (node.count === 1) {
+            const thread = threadsById.get(node.id);
+            if (!thread) return null;
+            content = /* @__PURE__ */ jsx(
+              ThreadPin,
+              {
+                editor,
+                thread,
+                ...props,
+                regionOptions
+              }
+            );
+          } 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
+        ))
+      ] }) : (
+        // 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}`
+      ),
+      /* @__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
+  );
+}
+export {
+  CanvasComments
+};
+//# sourceMappingURL=comments-overlay.mjs.map