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

package/dist-cjs/canvas/state.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/state.ts"],
-  "sourcesContent": ["import { EditorAtom, type BoxModel, type Editor, useEditor, useValue } from 'tldraw'\nimport type { PendingComment } from './comment-tool'\nimport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './sidebar-filters'\n\n/**\n * Transient commenting UI state, scoped per editor via {@link EditorAtom}. Editor-scoping (rather\n * than module-global atoms) keeps two editors on one page \u2014 or an editor and a second instance \u2014\n * from sharing open-thread, visibility, and filter state. Reachable from both React (`useEditor()`)\n * and the comment tool (`this.editor`).\n */\n\n/** The id of the one open thread (only one popover is open at a time), or null when all closed.\n * @public */\nexport const openThreadId = new EditorAtom<string | null>('openThreadId', () => null)\n\n/** The coincident-pin stack whose thread list is showing (keyed by its oldest member's thread\n * id), or null. Editor state rather than component state: the stack pin remounts when its owning\n * render path changes (e.g. a member thread opens), and the open list must survive that.\n * @internal */\nexport const openStackId = new EditorAtom<string | null>('openStackId', () => null)\n\n/** The comment currently being placed (composer open, not yet posted), or null.\n * @internal */\nexport const pendingComment = new EditorAtom<PendingComment | null>('pendingComment', () => null)\n\n/**\n * A pending request to reveal a thread: a thread or comment id to open and bring into view, or\n * null when none is pending. Written by {@link revealThread}; served and cleared by\n * `CanvasComments`, which owns the wait for the records to sync in and the cluster-aware reveal.\n * @internal\n */\nexport const revealThreadRequest = new EditorAtom<string | null>('revealThreadRequest', () => null)\n\n/**\n * Open a thread and bring it into view, given a thread id or the id of any comment in it. Use it\n * to jump to a thread from outside the canvas \u2014 a notification, a deep link, your own list.\n *\n * The request is served by `CanvasComments`, so it works before the records have arrived: the\n * layer waits for them to sync in, switches pages if it needs to, unhides pins, zooms in far\n * enough to split the thread out of any cluster it's folded into, and then opens it. That also\n * means nothing happens if `CanvasComments` isn't mounted.\n *\n * To open a thread you already hold and skip the wait, see {@link focusThread}.\n *\n * @example\n * ```ts\n * revealThread(editor, new URLSearchParams(location.search).get('comment')!)\n * ```\n *\n * @public\n */\nexport function revealThread(editor: Editor, threadOrCommentId: string): void {\n\trevealThreadRequest.set(editor, threadOrCommentId)\n}\n\n/**\n * The id passed to the most recent {@link revealThread} call that `CanvasComments` hasn't served\n * yet, or null when there's nothing outstanding. A request also clears when `CanvasComments`\n * unmounts, since nothing is left to serve it.\n *\n * This is a plain, untracked read. In React, use {@link useRevealThreadPending} \u2014 but reach for\n * this one inside a timer or callback that needs the value as of *now* rather than as of the\n * render it closed over.\n *\n * @public\n */\nexport function getRevealThreadPending(editor: Editor): string | null {\n\treturn revealThreadRequest.get(editor)\n}\n\n/**\n * Reactive React hook for {@link getRevealThreadPending}.\n *\n * Use it to notice a reveal that never lands \u2014 most often a deep link to a comment that has since\n * been deleted. Give it a grace period before you act: a request also sits here while its records\n * are still syncing in, which is the normal case on a cold load. Re-check with\n * {@link getRevealThreadPending} when the grace period elapses, since the request can clear inside\n * it without this hook's value having caught up yet.\n *\n * @public\n */\nexport function useRevealThreadPending(): string | null {\n\tconst editor = useEditor()\n\treturn useValue('pending reveal thread', () => getRevealThreadPending(editor), [editor])\n}\n\n/** The region rectangle being dragged out right now (page coords), or null when not dragging. The\n *  comment tool writes it on each move; the overlay reads it to draw the live dashed box. */\nexport const regionDraft = new EditorAtom<BoxModel | null>('regionDraft', () => null)\n\n/**\n * Whether comment pins are hidden on the canvas. Governs the on-canvas layer (pins + open popover)\n * only \u2014 the sidebar is unaffected.\n * @public\n */\nexport const commentsHidden = new EditorAtom<boolean>('commentsHidden', () => false)\n\n/**\n * Whether the comments sidebar (the thread list) is open. Driven by an explicit control \u2014 a button\n * next to Share on dotcom \u2014 rather than by which tool is active, so browsing threads is separate\n * from placing them. The comment tool additionally closes it on enter, keeping placement\n * canvas-focused.\n * @public\n */\nexport const commentsSidebarOpen = new EditorAtom<boolean>('commentsSidebarOpen', () => false)\n\n/** Which threads the comments sidebar shows.\n * @public */\nexport const sidebarFilters = new EditorAtom<SidebarFilters>(\n\t'sidebarFilters',\n\t() => DEFAULT_SIDEBAR_FILTERS\n)\n\n/** Toggle comment-pin visibility for an editor.\n * @public */\nexport function toggleCommentsHidden(editor: Editor): void {\n\tcommentsHidden.update(editor, (hidden) => !hidden)\n}\n\n/** Open or close the comments sidebar for an editor.\n * @public */\nexport function toggleCommentsSidebar(editor: Editor): void {\n\tcommentsSidebarOpen.update(editor, (open) => !open)\n}\n\n/** React hook for the open thread id.\n * @public */\nexport function useOpenThreadId(): string | null {\n\tconst editor = useEditor()\n\treturn useValue('open thread id', () => openThreadId.get(editor), [editor])\n}\n\n/** React hook for the pending (being-placed) comment.\n * @internal */\nexport function usePendingComment(): PendingComment | null {\n\tconst editor = useEditor()\n\treturn useValue('pending comment', () => pendingComment.get(editor), [editor])\n}\n\n/** React hook for whether comment pins are hidden.\n * @public */\nexport function useCommentsHidden(): boolean {\n\tconst editor = useEditor()\n\treturn useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n}\n\n/** React hook for whether the comments sidebar is open.\n * @public */\nexport function useCommentsSidebarOpen(): boolean {\n\tconst editor = useEditor()\n\treturn useValue('comments sidebar open', () => commentsSidebarOpen.get(editor), [editor])\n}\n\n/** React hook for the current sidebar filters.\n * @public */\nexport function useSidebarFilters(): SidebarFilters {\n\tconst editor = useEditor()\n\treturn useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA4E;AAE5E,6BAA6D;AAWtD,MAAM,eAAe,IAAI,yBAA0B,gBAAgB,MAAM,IAAI;AAM7E,MAAM,cAAc,IAAI,yBAA0B,eAAe,MAAM,IAAI;AAI3E,MAAM,iBAAiB,IAAI,yBAAkC,kBAAkB,MAAM,IAAI;AAQzF,MAAM,sBAAsB,IAAI,yBAA0B,uBAAuB,MAAM,IAAI;AAoB3F,SAAS,aAAa,QAAgB,mBAAiC;AAC7E,sBAAoB,IAAI,QAAQ,iBAAiB;AAClD;AAaO,SAAS,uBAAuB,QAA+B;AACrE,SAAO,oBAAoB,IAAI,MAAM;AACtC;AAaO,SAAS,yBAAwC;AACvD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,yBAAyB,MAAM,uBAAuB,MAAM,GAAG,CAAC,MAAM,CAAC;AACxF;AAIO,MAAM,cAAc,IAAI,yBAA4B,eAAe,MAAM,IAAI;AAO7E,MAAM,iBAAiB,IAAI,yBAAoB,kBAAkB,MAAM,KAAK;AAS5E,MAAM,sBAAsB,IAAI,yBAAoB,uBAAuB,MAAM,KAAK;AAItF,MAAM,iBAAiB,IAAI;AAAA,EACjC;AAAA,EACA,MAAM;AACP;AAIO,SAAS,qBAAqB,QAAsB;AAC1D,iBAAe,OAAO,QAAQ,CAAC,WAAW,CAAC,MAAM;AAClD;AAIO,SAAS,sBAAsB,QAAsB;AAC3D,sBAAoB,OAAO,QAAQ,CAAC,SAAS,CAAC,IAAI;AACnD;AAIO,SAAS,kBAAiC;AAChD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,kBAAkB,MAAM,aAAa,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC3E;AAIO,SAAS,oBAA2C;AAC1D,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;AAIO,SAAS,oBAA6B;AAC5C,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;AAIO,SAAS,yBAAkC;AACjD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,yBAAyB,MAAM,oBAAoB,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACzF;AAIO,SAAS,oBAAoC;AACnD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;",
+  "sourcesContent": ["import { EditorAtom, type BoxModel, type Editor, useEditor, useValue } from 'tldraw'\nimport type { PendingComment } from './comment-tool'\nimport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './sidebar-filters'\n\n/**\n * Transient commenting UI state, scoped per editor via {@link EditorAtom} so two editors on one\n * page don't share open-thread, visibility, and filter state. Reachable from both React\n * (`useEditor()`) and the comment tool (`this.editor`).\n */\n\n/** The id of the one open thread (only one popover is open at a time), or null when all closed.\n * @public */\nexport const openThreadId = new EditorAtom<string | null>('openThreadId', () => null)\n\n/** The coincident-pin stack whose thread list is showing (keyed by its oldest member's thread id),\n *  or null. Editor state rather than component state: the stack pin remounts when its owning render\n *  path changes, and the open list must survive that.\n *  @internal */\nexport const openStackId = new EditorAtom<string | null>('openStackId', () => null)\n\n/** The comment currently being placed (composer open, not yet posted), or null.\n * @internal */\nexport const pendingComment = new EditorAtom<PendingComment | null>('pendingComment', () => null)\n\n/**\n * A pending request to reveal a thread: a thread or comment id to open and bring into view, or\n * null when none is pending. Written by {@link revealThread}; served and cleared by\n * `CanvasComments`, which owns the wait for the records to sync in and the cluster-aware reveal.\n * @internal\n */\nexport const revealThreadRequest = new EditorAtom<string | null>('revealThreadRequest', () => null)\n\n/**\n * Open a thread and bring it into view, given a thread id or the id of any comment in it. Use it to\n * jump to a thread from outside the canvas \u2014 a notification, a deep link, your own list.\n *\n * The request is served by `CanvasComments`, so it works before the records have arrived: the layer\n * waits for them, switches pages, unhides pins, and zooms far enough to split the thread out of any\n * cluster. That also means nothing happens if `CanvasComments` isn't mounted.\n *\n * To open a thread you already hold and skip the wait, see {@link focusThread}.\n *\n * @example\n * ```ts\n * revealThread(editor, new URLSearchParams(location.search).get('comment')!)\n * ```\n *\n * @public\n */\nexport function revealThread(editor: Editor, threadOrCommentId: string): void {\n\trevealThreadRequest.set(editor, threadOrCommentId)\n}\n\n/**\n * The id passed to the most recent {@link revealThread} call that `CanvasComments` hasn't served\n * yet, or null. A request also clears when `CanvasComments` unmounts.\n *\n * This is a plain, untracked read \u2014 in React, use {@link useRevealThreadPending}, unless you need\n * the value as of *now* rather than as of the render you closed over.\n *\n * @public\n */\nexport function getRevealThreadPending(editor: Editor): string | null {\n\treturn revealThreadRequest.get(editor)\n}\n\n/**\n * Reactive React hook for {@link getRevealThreadPending}.\n *\n * Use it to notice a reveal that never lands \u2014 usually a deep link to a deleted comment. Give it a\n * grace period first, since a request also sits here while its records sync in, and re-check with\n * {@link getRevealThreadPending} when it elapses.\n *\n * @public\n */\nexport function useRevealThreadPending(): string | null {\n\tconst editor = useEditor()\n\treturn useValue('pending reveal thread', () => getRevealThreadPending(editor), [editor])\n}\n\n/** The region rectangle being dragged out right now (page coords), or null when not dragging. The\n *  comment tool writes it on each move; the overlay reads it to draw the live dashed box. */\nexport const regionDraft = new EditorAtom<BoxModel | null>('regionDraft', () => null)\n\n/**\n * Whether comment pins are hidden on the canvas. Governs the on-canvas layer (pins + open popover)\n * only \u2014 the sidebar is unaffected.\n * @public\n */\nexport const commentsHidden = new EditorAtom<boolean>('commentsHidden', () => false)\n\n/**\n * Whether the comments sidebar (the thread list) is open. Driven by an explicit control rather than\n * by which tool is active, so browsing threads is separate from placing them.\n * @public\n */\nexport const commentsSidebarOpen = new EditorAtom<boolean>('commentsSidebarOpen', () => false)\n\n/** Which threads the comments sidebar shows.\n * @public */\nexport const sidebarFilters = new EditorAtom<SidebarFilters>(\n\t'sidebarFilters',\n\t() => DEFAULT_SIDEBAR_FILTERS\n)\n\n/** Toggle comment-pin visibility for an editor.\n * @public */\nexport function toggleCommentsHidden(editor: Editor): void {\n\tcommentsHidden.update(editor, (hidden) => !hidden)\n}\n\n/** Open or close the comments sidebar for an editor.\n * @public */\nexport function toggleCommentsSidebar(editor: Editor): void {\n\tcommentsSidebarOpen.update(editor, (open) => !open)\n}\n\n/** React hook for the open thread id.\n * @public */\nexport function useOpenThreadId(): string | null {\n\tconst editor = useEditor()\n\treturn useValue('open thread id', () => openThreadId.get(editor), [editor])\n}\n\n/** React hook for the pending (being-placed) comment.\n * @internal */\nexport function usePendingComment(): PendingComment | null {\n\tconst editor = useEditor()\n\treturn useValue('pending comment', () => pendingComment.get(editor), [editor])\n}\n\n/** React hook for whether comment pins are hidden.\n * @public */\nexport function useCommentsHidden(): boolean {\n\tconst editor = useEditor()\n\treturn useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n}\n\n/** React hook for whether the comments sidebar is open.\n * @public */\nexport function useCommentsSidebarOpen(): boolean {\n\tconst editor = useEditor()\n\treturn useValue('comments sidebar open', () => commentsSidebarOpen.get(editor), [editor])\n}\n\n/** React hook for the current sidebar filters.\n * @public */\nexport function useSidebarFilters(): SidebarFilters {\n\tconst editor = useEditor()\n\treturn useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA4E;AAE5E,6BAA6D;AAUtD,MAAM,eAAe,IAAI,yBAA0B,gBAAgB,MAAM,IAAI;AAM7E,MAAM,cAAc,IAAI,yBAA0B,eAAe,MAAM,IAAI;AAI3E,MAAM,iBAAiB,IAAI,yBAAkC,kBAAkB,MAAM,IAAI;AAQzF,MAAM,sBAAsB,IAAI,yBAA0B,uBAAuB,MAAM,IAAI;AAmB3F,SAAS,aAAa,QAAgB,mBAAiC;AAC7E,sBAAoB,IAAI,QAAQ,iBAAiB;AAClD;AAWO,SAAS,uBAAuB,QAA+B;AACrE,SAAO,oBAAoB,IAAI,MAAM;AACtC;AAWO,SAAS,yBAAwC;AACvD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,yBAAyB,MAAM,uBAAuB,MAAM,GAAG,CAAC,MAAM,CAAC;AACxF;AAIO,MAAM,cAAc,IAAI,yBAA4B,eAAe,MAAM,IAAI;AAO7E,MAAM,iBAAiB,IAAI,yBAAoB,kBAAkB,MAAM,KAAK;AAO5E,MAAM,sBAAsB,IAAI,yBAAoB,uBAAuB,MAAM,KAAK;AAItF,MAAM,iBAAiB,IAAI;AAAA,EACjC;AAAA,EACA,MAAM;AACP;AAIO,SAAS,qBAAqB,QAAsB;AAC1D,iBAAe,OAAO,QAAQ,CAAC,WAAW,CAAC,MAAM;AAClD;AAIO,SAAS,sBAAsB,QAAsB;AAC3D,sBAAoB,OAAO,QAAQ,CAAC,SAAS,CAAC,IAAI;AACnD;AAIO,SAAS,kBAAiC;AAChD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,kBAAkB,MAAM,aAAa,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC3E;AAIO,SAAS,oBAA2C;AAC1D,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;AAIO,SAAS,oBAA6B;AAC5C,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;AAIO,SAAS,yBAAkC;AACjD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,yBAAyB,MAAM,oBAAoB,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACzF;AAIO,SAAS,oBAAoC;AACnD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;",
   "names": []
 }

package/dist-cjs/canvas/thread-pin.js

@@ -0,0 +1,304 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var thread_pin_exports = {};
+__export(thread_pin_exports, {
+  ThreadPin: () => ThreadPin
+});
+module.exports = __toCommonJS(thread_pin_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_mentions = require("@tldraw/mentions");
+var import_react = require("react");
+var import_tldraw = require("tldraw");
+var import_comment_pin = require("../ui/comment-pin");
+var import_canvas_events = require("./canvas-events");
+var import_comment_mutations = require("./comment-mutations");
+var import_comment_render = require("./comment-render");
+var import_hooks = require("./hooks");
+var import_options = require("./options");
+var import_region_box = require("./region-box");
+var import_state = require("./state");
+var import_thread_preview = require("./thread-preview");
+var import_thread_state = require("./thread-state");
+var import_thread_view = require("./thread-view");
+const THREAD_HEADER_BLOCK = 36;
+const ThreadPin = (0, import_react.memo)(function ThreadPin2({
+  editor,
+  thread,
+  ...props
+}) {
+  const { resolveAuthor } = props;
+  const options = (0, import_options.useCommentingOptions)();
+  const canComment = (0, import_options.useCanComment)(props.currentUserId);
+  const container = (0, import_tldraw.useContainer)();
+  const msg = (0, import_tldraw.useTranslation)();
+  const comments = (0, import_hooks.useThreadComments)(editor, thread.id);
+  const open = (0, import_tldraw.useValue)("thread open", () => import_state.openThreadId.get(editor) === thread.id, [
+    editor,
+    thread.id
+  ]);
+  const [dragPagePoint, setDragPagePoint] = (0, import_react.useState)(null);
+  const [resizeBounds, setResizeBounds] = (0, import_react.useState)(null);
+  const { previewShown, previewHandlers } = (0, import_thread_preview.useMarkerPreview)(editor, `pin:${thread.id}`);
+  const previewThreads = (0, import_react.useMemo)(() => [thread], [thread]);
+  const pointerInRegion = (0, import_tldraw.useValue)(
+    "pointer in region",
+    () => {
+      if (thread.anchor.type !== "region" || thread.pageId !== editor.getCurrentPageId())
+        return false;
+      const m = import_region_box.REGION_HANDLE_MARGIN_PX / editor.getZoomLevel();
+      const p = editor.inputs.getCurrentPagePoint();
+      const a = thread.anchor;
+      return p.x >= a.x - m && p.x <= a.x + a.w + m && p.y >= a.y - m && p.y <= a.y + a.h + m;
+    },
+    [editor, thread.anchor, thread.pageId]
+  );
+  const revealed = open || resizeBounds != null || pointerInRegion;
+  const pinCorner = thread.anchor.type === "region" ? (0, import_thread_state.regionAnchorPinCorner)(thread.anchor) : import_thread_state.REGION_PIN_CORNER;
+  const resizeHandles = (0, import_react.useMemo)(
+    () => import_region_box.REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),
+    [pinCorner]
+  );
+  const dragRef = (0, import_react.useRef)(null);
+  const markerRef = (0, import_react.useRef)(null);
+  (0, import_tldraw.usePassThroughWheelEvents)(markerRef);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (dragRef.current) editor.setHintingShapes([]);
+    };
+  }, [editor]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!target) return;
+      if (target.closest(".tlui-cmt-canvas-popover")) return;
+      const marker = markerRef.current;
+      if (marker && marker.contains(target)) return;
+      if (target.closest(".tlui-cmt-canvas-region-handle")) return;
+      if (target.closest(".tlui-menu, [data-radix-popper-content-wrapper], .tlui-cmt-mention-popup"))
+        return;
+      import_state.openThreadId.set(editor, null);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open, editor]);
+  const exemptFromCull = open || dragPagePoint != null || resizeBounds != null;
+  const point = (0, import_tldraw.useValue)(
+    "pin point",
+    () => {
+      if (thread.pageId !== editor.getCurrentPageId()) return null;
+      const pagePoint = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
+      if (!pagePoint) return null;
+      const viewportPoint = editor.pageToViewport(pagePoint);
+      const inset = (0, import_thread_state.impreciseShapePinInset)(editor, thread.anchor);
+      const point2 = inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint;
+      if (!exemptFromCull) {
+        const visible = thread.anchor.type === "region" ? (0, import_thread_state.isBoxInInflatedViewport)(editor, thread.anchor) : (0, import_thread_state.isInInflatedViewport)(editor, point2);
+        if (!visible) return null;
+      }
+      return point2;
+    },
+    [editor, thread.anchor, thread.pageId, exemptFromCull]
+  );
+  if (!point) return null;
+  const PinContent = options.components.PinContent;
+  const threadAuthor = resolveAuthor(thread.createdBy);
+  const pinContent = PinContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinContent, { thread, comments }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mentions.Avatar, { author: threadAuthor ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR });
+  const pinLabel = msg(
+    thread.resolved ? "comments.pin-label-resolved" : "comments.pin-label"
+  ).replace("{name}", threadAuthor?.name ?? import_comment_render.UNKNOWN_AUTHOR);
+  const isRegion = thread.anchor.type === "region";
+  const startDrag = (e) => {
+    if ((0, import_canvas_events.isCanvasPanGesture)(editor, e)) {
+      (0, import_canvas_events.forwardPointerEventToCanvas)(container, e);
+      return;
+    }
+    e.stopPropagation();
+    const grabPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const anchorPage = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
+    const inset = (0, import_thread_state.impreciseShapePinInset)(editor, thread.anchor);
+    if (anchorPage && inset) {
+      const zoom = editor.getZoomLevel();
+      anchorPage.x += inset.x / zoom;
+      anchorPage.y += inset.y / zoom;
+    }
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      moved: false,
+      offsetX: anchorPage ? anchorPage.x - grabPage.x : 0,
+      offsetY: anchorPage ? anchorPage.y - grabPage.y : 0
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onDrag = (e) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    if (!canComment) return;
+    if (!drag.moved && Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < 4) return;
+    drag.moved = true;
+    const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY };
+    setDragPagePoint(pagePoint);
+    if (!isRegion) {
+      const hit = (0, import_thread_state.commentTargetShapeAt)(editor, pagePoint);
+      editor.setHintingShapes(hit ? [hit.id] : []);
+    }
+  };
+  const cancelDrag = (e) => {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    if (!drag) return;
+    setDragPagePoint(null);
+    editor.setHintingShapes([]);
+  };
+  const endDrag = (e) => {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    if (!drag) return;
+    editor.setHintingShapes([]);
+    if (!drag.moved) {
+      import_state.openThreadId.set(editor, import_state.openThreadId.get(editor) === thread.id ? null : thread.id);
+      return;
+    }
+    const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY };
+    setDragPagePoint(null);
+    let anchor;
+    if (thread.anchor.type === "region") {
+      anchor = {
+        ...thread.anchor,
+        x: pagePoint.x - pinCorner.x * thread.anchor.w,
+        y: pagePoint.y - pinCorner.y * thread.anchor.h
+      };
+    } else {
+      const hit = (0, import_thread_state.commentTargetShapeAt)(editor, pagePoint);
+      anchor = hit ? (0, import_thread_state.shapeAnchorAt)(
+        editor,
+        hit.id,
+        pagePoint,
+        (0, import_options.getCommentingOptions)(editor).shouldBePrecise(editor, {
+          shapeId: hit.id,
+          point: pagePoint,
+          altKey: e.altKey
+        })
+      ) : { type: "point", x: pagePoint.x, y: pagePoint.y };
+    }
+    (0, import_comment_mutations.commitCommentMutation)(editor, ({ put }) => put([{ ...thread, anchor }]), "drag");
+  };
+  const livePinPage = resizeBounds ? (0, import_thread_state.regionPinPoint)(resizeBounds, pinCorner) : dragPagePoint;
+  const renderPointBase = livePinPage ? editor.pageToViewport(livePinPage) : point;
+  const renderPoint = isRegion ? { x: renderPointBase.x - 17, y: renderPointBase.y + 17 } : renderPointBase;
+  const regionAnchor = thread.anchor.type === "region" ? thread.anchor : void 0;
+  const movedRegion = regionAnchor && dragPagePoint ? {
+    ...regionAnchor,
+    x: dragPagePoint.x - pinCorner.x * regionAnchor.w,
+    y: dragPagePoint.y - pinCorner.y * regionAnchor.h
+  } : regionAnchor;
+  const regionBoxBounds = resizeBounds ?? movedRegion;
+  const commitResize = (bounds) => {
+    setResizeBounds(null);
+    if (!canComment) return;
+    (0, import_comment_mutations.commitCommentMutation)(
+      editor,
+      // Spread the existing anchor first so the region's pin corner survives a resize.
+      ({ put }) => put([{ ...thread, anchor: { ...regionAnchor, ...bounds } }]),
+      "drag"
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    regionBoxBounds && (dragPagePoint || revealed) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_region_box.RegionBox, { editor, box: regionBoxBounds }),
+    regionBoxBounds && revealed && !dragPagePoint && canComment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_region_box.RegionResizeHandles,
+      {
+        editor,
+        box: regionBoxBounds,
+        handles: resizeHandles,
+        onPreview: setResizeBounds,
+        onCommit: commitResize
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: [
+          "tlui-cmt-canvas-pin",
+          open && "tlui-cmt-canvas-pin--open",
+          dragPagePoint && "tlui-cmt-canvas-pin--dragging"
+        ].filter(Boolean).join(" "),
+        style: { left: renderPoint.x, top: renderPoint.y },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              ref: markerRef,
+              type: "button",
+              className: "tlui-cmt-button tlui-cmt-canvas-pin__marker",
+              "aria-label": pinLabel,
+              "aria-expanded": open,
+              onPointerDown: startDrag,
+              onPointerMove: onDrag,
+              onPointerUp: endDrag,
+              onPointerCancel: cancelDrag,
+              onClick: (e) => {
+                if (e.detail !== 0) return;
+                import_state.openThreadId.set(editor, import_state.openThreadId.get(editor) === thread.id ? null : thread.id);
+              },
+              onPointerEnter: previewHandlers.onPointerEnter,
+              onPointerLeave: previewHandlers.onPointerLeave,
+              onFocus: previewHandlers.onPointerEnter,
+              onBlur: previewHandlers.onPointerLeave,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_pin.CommentPin, { resolved: thread.resolved != null, open, children: pinContent })
+            }
+          ),
+          open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_thread_view.ThreadPopover,
+            {
+              base: {
+                x: renderPoint.x + import_thread_view.POPOVER_OFFSET.thread.x,
+                y: renderPoint.y + import_thread_view.POPOVER_OFFSET.thread.y - THREAD_HEADER_BLOCK
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_thread_view.ThreadView, { editor, thread, ...props })
+            }
+          ),
+          previewShown && !dragPagePoint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_thread_preview.ThreadPreview,
+            {
+              editor,
+              threads: previewThreads,
+              variant: "thread",
+              point: renderPoint,
+              onSelectThread: () => import_state.openThreadId.set(editor, thread.id),
+              ...previewHandlers,
+              currentUserId: props.currentUserId,
+              resolveAuthor
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+//# sourceMappingURL=thread-pin.js.map

package/dist-cjs/canvas/thread-pin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/thread-pin.tsx"],
+  "sourcesContent": ["import { Avatar } from '@tldraw/mentions'\nimport {\n\tmemo,\n\ttype PointerEvent as ReactPointerEvent,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport {\n\ttype BoxModel,\n\tEditor,\n\tTLCommentThread,\n\tuseContainer,\n\tusePassThroughWheelEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { CommentPin } from '../ui/comment-pin'\nimport { forwardPointerEventToCanvas, isCanvasPanGesture } from './canvas-events'\nimport { commitCommentMutation } from './comment-mutations'\nimport { UNKNOWN_AUTHOR, UNKNOWN_COMMENT_AUTHOR } from './comment-render'\nimport { type CommentingContext } from './context'\nimport { useThreadComments } from './hooks'\nimport { getCommentingOptions, useCanComment, useCommentingOptions } from './options'\nimport {\n\tREGION_CORNERS,\n\tREGION_HANDLE_MARGIN_PX,\n\tRegionBox,\n\tRegionResizeHandles,\n} from './region-box'\nimport { openThreadId } from './state'\nimport { ThreadPreview, useMarkerPreview } from './thread-preview'\nimport {\n\tanchorPagePoint,\n\tcommentTargetShapeAt,\n\timpreciseShapePinInset,\n\tisBoxInInflatedViewport,\n\tisInInflatedViewport,\n\tREGION_PIN_CORNER,\n\tregionAnchorPinCorner,\n\tregionPinPoint,\n\tshapeAnchorAt,\n} from './thread-state'\nimport { POPOVER_OFFSET, ThreadPopover, ThreadView } from './thread-view'\n\n/** The opened popover has a header row the hover preview lacks, so it opens this much higher \u2014 the\n *  first comment then lands where the preview's sat. Re-measure if the header height or the preview\n *  panel padding changes. */\nconst THREAD_HEADER_BLOCK = 36\n\n/**\n * A single thread's pin: the marker at its anchor, the thread popover when it's open, the hover\n * preview, and \u2014 for a region anchor \u2014 the dashed box and its resize handles. Dragging the marker\n * re-anchors the thread.\n *\n * Memoized so a pin skips re-rendering when the layer re-renders for unrelated reasons; camera\n * tracking still works, since the pin subscribes to its own viewport position via signals.\n */\nexport const ThreadPin = memo(function ThreadPin({\n\teditor,\n\tthread,\n\t...props\n}: CommentingContext & {\n\teditor: Editor\n\tthread: TLCommentThread\n}) {\n\tconst { resolveAuthor } = props\n\tconst options = useCommentingOptions()\n\tconst canComment = useCanComment(props.currentUserId)\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst comments = useThreadComments(editor, thread.id)\n\t// Only one thread's popover is open at a time \u2014 shared across pins via the atom.\n\tconst open = useValue('thread open', () => openThreadId.get(editor) === thread.id, [\n\t\teditor,\n\t\tthread.id,\n\t])\n\t// While dragging the marker, its page point overrides the anchor's; committed on drop.\n\tconst [dragPagePoint, setDragPagePoint] = useState<{ x: number; y: number } | null>(null)\n\tconst [resizeBounds, setResizeBounds] = useState<BoxModel | null>(null)\n\t// Hovering the marker previews the thread's opening comment, on the delay every marker uses.\n\tconst { previewShown, previewHandlers } = useMarkerPreview(editor, `pin:${thread.id}`)\n\tconst previewThreads = useMemo(() => [thread], [thread])\n\t// The 'pointer' reveal mode: is the pointer within the region's bounds (plus a grab margin)?\n\t// Driven by pointer position, not DOM hover, so moving from anywhere in the region out to a corner\n\t// handle never loses the affordance \u2014 the box stays `pointer-events: none`.\n\tconst pointerInRegion = useValue(\n\t\t'pointer in region',\n\t\t() => {\n\t\t\tif (thread.anchor.type !== 'region' || thread.pageId !== editor.getCurrentPageId())\n\t\t\t\treturn false\n\t\t\tconst m = REGION_HANDLE_MARGIN_PX / editor.getZoomLevel()\n\t\t\tconst p = editor.inputs.getCurrentPagePoint()\n\t\t\tconst a = thread.anchor\n\t\t\treturn p.x >= a.x - m && p.x <= a.x + a.w + m && p.y >= a.y - m && p.y <= a.y + a.h + m\n\t\t},\n\t\t[editor, thread.anchor, thread.pageId]\n\t)\n\t// A region's box and handles are revealed while open, mid-resize, or while the pointer is\n\t// within the region.\n\tconst revealed = open || resizeBounds != null || pointerInRegion\n\t// A region thread's pin corner is its own (the corner its creating drag released on), with\n\t// the default as the fallback for older records.\n\tconst pinCorner =\n\t\tthread.anchor.type === 'region' ? regionAnchorPinCorner(thread.anchor) : REGION_PIN_CORNER\n\t// A region resizes from its corners \u2014 every corner but the pin's own, which the pin owns.\n\tconst resizeHandles = useMemo(\n\t\t() => REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),\n\t\t[pinCorner]\n\t)\n\tconst dragRef = useRef<{\n\t\tstartX: number\n\t\tstartY: number\n\t\tmoved: boolean\n\t\t// The anchor's page-space offset from the grab point, so a drag translates the pin by the\n\t\t// cursor's delta (like RegionBox's move) instead of snapping the anchor to the cursor.\n\t\toffsetX: number\n\t\toffsetY: number\n\t} | null>(null)\n\tconst markerRef = useRef<HTMLButtonElement>(null)\n\t// Wheel pass-through sits on the marker (which is never scrollable), not the layer root \u2014\n\t// see the note on the layer.\n\tusePassThroughWheelEvents(markerRef)\n\n\t// The drop-target hint is editor-global state with no automatic reset. If the pin unmounts\n\t// mid-drag (e.g. Shift+C hides comments), no pointer event will ever reach the drag handlers \u2014\n\t// clear the hint here or it stays on the shape indefinitely.\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (dragRef.current) editor.setHintingShapes([])\n\t\t}\n\t}, [editor])\n\n\t// Clicking outside the open popover closes the thread. Capture phase + a class check rather than\n\t// stopPropagation, since the popover portals elsewhere in the DOM. The marker is excluded so its own\n\t// click-to-toggle handles it instead of this closing and the toggle reopening.\n\tuseEffect(() => {\n\t\tif (!open) return\n\t\tconst onPointerDown = (e: PointerEvent) => {\n\t\t\tconst target = e.target as HTMLElement | null\n\t\t\tif (!target) return\n\t\t\tif (target.closest('.tlui-cmt-canvas-popover')) return\n\t\t\tconst marker = markerRef.current\n\t\t\tif (marker && marker.contains(target)) return\n\t\t\t// A press on a region's resize handle edits this thread \u2014 don't dismiss it.\n\t\t\tif (target.closest('.tlui-cmt-canvas-region-handle')) return\n\t\t\t// A click inside a menu/popover layered above us (the sidebar's filter or overflow\n\t\t\t// dropdown, or the composer's mention picker \u2014 all portaled elsewhere) belongs to that\n\t\t\t// layer; defer to its own dismissal instead of closing the thread out from under it.\n\t\t\tif (\n\t\t\t\ttarget.closest('.tlui-menu, [data-radix-popper-content-wrapper], .tlui-cmt-mention-popup')\n\t\t\t)\n\t\t\t\treturn\n\t\t\topenThreadId.set(editor, null)\n\t\t}\n\t\tdocument.addEventListener('pointerdown', onPointerDown, true)\n\t\treturn () => document.removeEventListener('pointerdown', onPointerDown, true)\n\t}, [open, editor])\n\n\t// The pin must not unmount mid-interaction: an open thread's popover hangs off it, and a drag\n\t// or resize holds pointer capture on it \u2014 so those states are exempt from the viewport cull.\n\tconst exemptFromCull = open || dragPagePoint != null || resizeBounds != null\n\tconst point = useValue(\n\t\t'pin point',\n\t\t() => {\n\t\t\tif (thread.pageId !== editor.getCurrentPageId()) return null\n\t\t\tconst pagePoint = anchorPagePoint(editor, thread.anchor)\n\t\t\tif (!pagePoint) return null\n\t\t\tconst viewportPoint = editor.pageToViewport(pagePoint)\n\t\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\t\tconst point = inset\n\t\t\t\t? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y }\n\t\t\t\t: viewportPoint\n\t\t\t// Off-screen pins (plus a pre-mount margin) unmount rather than re-render every camera frame. A\n\t\t\t// region thread stays mounted while any part of its box is on screen, since the box renders here too.\n\t\t\tif (!exemptFromCull) {\n\t\t\t\tconst visible =\n\t\t\t\t\tthread.anchor.type === 'region'\n\t\t\t\t\t\t? isBoxInInflatedViewport(editor, thread.anchor)\n\t\t\t\t\t\t: isInInflatedViewport(editor, point)\n\t\t\t\tif (!visible) return null\n\t\t\t}\n\t\t\treturn point\n\t\t},\n\t\t[editor, thread.anchor, thread.pageId, exemptFromCull]\n\t)\n\tif (!point) return null\n\n\tconst PinContent = options.components.PinContent\n\tconst threadAuthor = resolveAuthor(thread.createdBy)\n\tconst pinContent = PinContent ? (\n\t\t<PinContent thread={thread} comments={comments} />\n\t) : (\n\t\t<Avatar author={threadAuthor ?? UNKNOWN_COMMENT_AUTHOR} />\n\t)\n\tconst pinLabel = msg(\n\t\tthread.resolved ? 'comments.pin-label-resolved' : 'comments.pin-label'\n\t).replace('{name}', threadAuthor?.name ?? UNKNOWN_AUTHOR)\n\n\t// Drag the marker to move the thread: position is overridden locally while dragging, then re-anchored\n\t// on drop. A region translates keeping its size; a barely-moved pointer is a click.\n\tconst isRegion = thread.anchor.type === 'region'\n\t// The marker is a button (so it's keyboard-reachable), so the drag handlers are typed to it.\n\tconst startDrag = (e: ReactPointerEvent<HTMLButtonElement>) => {\n\t\t// A middle/right-button or space-held press over a pin is a camera pan, not a pin drag \u2014\n\t\t// hand it to the canvas untouched.\n\t\tif (isCanvasPanGesture(editor, e)) {\n\t\t\tforwardPointerEventToCanvas(container, e)\n\t\t\treturn\n\t\t}\n\t\te.stopPropagation()\n\t\tconst grabPage = editor.screenToPage({ x: e.clientX, y: e.clientY })\n\t\tconst anchorPage = anchorPagePoint(editor, thread.anchor)\n\t\t// The drag delta is taken from where the pin is drawn, which for an imprecise shape pin\n\t\t// is inset from its anchor point \u2014 without this the pin jumps by the inset on drag start.\n\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\tif (anchorPage && inset) {\n\t\t\tconst zoom = editor.getZoomLevel()\n\t\t\tanchorPage.x += inset.x / zoom\n\t\t\tanchorPage.y += inset.y / zoom\n\t\t}\n\t\tdragRef.current = {\n\t\t\tstartX: e.clientX,\n\t\t\tstartY: e.clientY,\n\t\t\tmoved: false,\n\t\t\toffsetX: anchorPage ? anchorPage.x - grabPage.x : 0,\n\t\t\toffsetY: anchorPage ? anchorPage.y - grabPage.y : 0,\n\t\t}\n\t\te.currentTarget.setPointerCapture(e.pointerId)\n\t}\n\tconst onDrag = (e: ReactPointerEvent<HTMLButtonElement>) => {\n\t\tconst drag = dragRef.current\n\t\tif (!drag) return\n\t\t// Moving a pin re-anchors the thread record \u2014 a commenting write. Without the permission the\n\t\t// press stays a click (`moved` never sets, so release toggles the popover and never commits).\n\t\tif (!canComment) return\n\t\tif (!drag.moved && Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < 4) return\n\t\tdrag.moved = true\n\t\tconst cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY })\n\t\tconst pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY }\n\t\tsetDragPagePoint(pagePoint)\n\t\t// Hint the shape the pin would re-anchor to on drop \u2014 the same hit-test endDrag resolves\n\t\t// with. Regions translate rather than re-anchor, so they never hint.\n\t\tif (!isRegion) {\n\t\t\tconst hit = commentTargetShapeAt(editor, pagePoint)\n\t\t\teditor.setHintingShapes(hit ? [hit.id] : [])\n\t\t}\n\t}\n\t// A cancelled pointer (touch gesture takeover, browser interruption) aborts the drag outright:\n\t// no re-anchor commit, no click-toggle \u2014 the pin snaps back and the hint clears.\n\tconst cancelDrag = (e: ReactPointerEvent<HTMLButtonElement>) => {\n\t\tconst drag = dragRef.current\n\t\tdragRef.current = null\n\t\tif (e.currentTarget.hasPointerCapture(e.pointerId)) {\n\t\t\te.currentTarget.releasePointerCapture(e.pointerId)\n\t\t}\n\t\tif (!drag) return\n\t\tsetDragPagePoint(null)\n\t\teditor.setHintingShapes([])\n\t}\n\tconst endDrag = (e: ReactPointerEvent<HTMLButtonElement>) => {\n\t\tconst drag = dragRef.current\n\t\tdragRef.current = null\n\t\tif (e.currentTarget.hasPointerCapture(e.pointerId)) {\n\t\t\te.currentTarget.releasePointerCapture(e.pointerId)\n\t\t}\n\t\tif (!drag) return\n\t\teditor.setHintingShapes([])\n\t\tif (!drag.moved) {\n\t\t\topenThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id)\n\t\t\treturn\n\t\t}\n\t\tconst cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY })\n\t\tconst pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY }\n\t\tsetDragPagePoint(null)\n\t\tlet anchor: TLCommentThread['anchor']\n\t\tif (thread.anchor.type === 'region') {\n\t\t\t// Translate so the pin (the region's pin corner) lands at the drop; size unchanged.\n\t\t\tanchor = {\n\t\t\t\t...thread.anchor,\n\t\t\t\tx: pagePoint.x - pinCorner.x * thread.anchor.w,\n\t\t\t\ty: pagePoint.y - pinCorner.y * thread.anchor.h,\n\t\t\t}\n\t\t} else {\n\t\t\tconst hit = commentTargetShapeAt(editor, pagePoint)\n\t\t\tanchor = hit\n\t\t\t\t? shapeAnchorAt(\n\t\t\t\t\t\teditor,\n\t\t\t\t\t\thit.id,\n\t\t\t\t\t\tpagePoint,\n\t\t\t\t\t\tgetCommentingOptions(editor).shouldBePrecise(editor, {\n\t\t\t\t\t\t\tshapeId: hit.id,\n\t\t\t\t\t\t\tpoint: pagePoint,\n\t\t\t\t\t\t\taltKey: e.altKey,\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t: { type: 'point', x: pagePoint.x, y: pagePoint.y }\n\t\t}\n\t\tcommitCommentMutation(editor, ({ put }) => put([{ ...thread, anchor }]), 'drag')\n\t}\n\n\t// The pin (and its popover) track the live edit: a resize moves it to the region's pin corner, a\n\t// move to the drag point; otherwise it sits at the stored anchor's viewport point.\n\tconst livePinPage = resizeBounds ? regionPinPoint(resizeBounds, pinCorner) : dragPagePoint\n\tconst renderPointBase = livePinPage ? editor.pageToViewport(livePinPage) : point\n\t// A region's pin centres on its corner \u2014 overlapping the box \u2014 rather than hanging off it.\n\t// The marker anchors bottom-left, so step half its 34px size left and down (screen px).\n\tconst renderPoint = isRegion\n\t\t? { x: renderPointBase.x - 17, y: renderPointBase.y + 17 }\n\t\t: renderPointBase\n\n\t// A region's live box bounds, by priority: a corner resize, else a pin-drag translation (the pin\n\t// corner tracks the cursor), else the stored anchor. Undefined for non-region threads.\n\tconst regionAnchor = thread.anchor.type === 'region' ? thread.anchor : undefined\n\tconst movedRegion =\n\t\tregionAnchor && dragPagePoint\n\t\t\t? {\n\t\t\t\t\t...regionAnchor,\n\t\t\t\t\tx: dragPagePoint.x - pinCorner.x * regionAnchor.w,\n\t\t\t\t\ty: dragPagePoint.y - pinCorner.y * regionAnchor.h,\n\t\t\t\t}\n\t\t\t: regionAnchor\n\tconst regionBoxBounds = resizeBounds ?? movedRegion\n\tconst commitResize = (bounds: BoxModel) => {\n\t\tsetResizeBounds(null)\n\t\tif (!canComment) return\n\t\t// Same commit path as a pin drag, so the configured `dragHistory` governs both \u2014 going\n\t\t// straight to `editor.run` here would make region resizes silently ignore the option.\n\t\tcommitCommentMutation(\n\t\t\teditor,\n\t\t\t// Spread the existing anchor first so the region's pin corner survives a resize.\n\t\t\t({ put }) => put([{ ...thread, anchor: { ...regionAnchor!, ...bounds } }]),\n\t\t\t'drag'\n\t\t)\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{regionBoxBounds && (dragPagePoint || revealed) && (\n\t\t\t\t<RegionBox editor={editor} box={regionBoxBounds} />\n\t\t\t)}\n\t\t\t{regionBoxBounds && revealed && !dragPagePoint && canComment && (\n\t\t\t\t<RegionResizeHandles\n\t\t\t\t\teditor={editor}\n\t\t\t\t\tbox={regionBoxBounds}\n\t\t\t\t\thandles={resizeHandles}\n\t\t\t\t\tonPreview={setResizeBounds}\n\t\t\t\t\tonCommit={commitResize}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={[\n\t\t\t\t\t'tlui-cmt-canvas-pin',\n\t\t\t\t\topen && 'tlui-cmt-canvas-pin--open',\n\t\t\t\t\tdragPagePoint && 'tlui-cmt-canvas-pin--dragging',\n\t\t\t\t]\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(' ')}\n\t\t\t\tstyle={{ left: renderPoint.x, top: renderPoint.y }}\n\t\t\t>\n\t\t\t\t<button\n\t\t\t\t\tref={markerRef}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"tlui-cmt-button tlui-cmt-canvas-pin__marker\"\n\t\t\t\t\taria-label={pinLabel}\n\t\t\t\t\taria-expanded={open}\n\t\t\t\t\tonPointerDown={startDrag}\n\t\t\t\t\tonPointerMove={onDrag}\n\t\t\t\t\tonPointerUp={endDrag}\n\t\t\t\t\tonPointerCancel={cancelDrag}\n\t\t\t\t\t// Pointer activation is already handled by endDrag (which distinguishes a click\n\t\t\t\t\t// from a drag), so only take keyboard-synthesised clicks here \u2014 those report\n\t\t\t\t\t// `detail === 0` \u2014 or the thread would toggle twice per mouse click.\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\tif (e.detail !== 0) return\n\t\t\t\t\t\topenThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id)\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerEnter={previewHandlers.onPointerEnter}\n\t\t\t\t\tonPointerLeave={previewHandlers.onPointerLeave}\n\t\t\t\t\t// Focus stands in for hover, so tabbing to a marker gets the same preview.\n\t\t\t\t\tonFocus={previewHandlers.onPointerEnter}\n\t\t\t\t\tonBlur={previewHandlers.onPointerLeave}\n\t\t\t\t>\n\t\t\t\t\t<CommentPin resolved={thread.resolved != null} open={open}>\n\t\t\t\t\t\t{pinContent}\n\t\t\t\t\t</CommentPin>\n\t\t\t\t</button>\n\t\t\t\t{/* The popover portals up to the menus layer (above the UI panels) so it isn't clipped;\n\t\t\t    the pin itself stays in the canvas-in-front layer, beneath the UI. */}\n\t\t\t\t{open && (\n\t\t\t\t\t<ThreadPopover\n\t\t\t\t\t\tbase={{\n\t\t\t\t\t\t\tx: renderPoint.x + POPOVER_OFFSET.thread.x,\n\t\t\t\t\t\t\ty: renderPoint.y + POPOVER_OFFSET.thread.y - THREAD_HEADER_BLOCK,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ThreadView editor={editor} thread={thread} {...props} />\n\t\t\t\t\t</ThreadPopover>\n\t\t\t\t)}\n\t\t\t\t{/* Not while dragging: the pin is being moved, not read, and a panel trailing the\n\t\t\t\t    cursor would obscure the drop target. */}\n\t\t\t\t{previewShown && !dragPagePoint && (\n\t\t\t\t\t<ThreadPreview\n\t\t\t\t\t\teditor={editor}\n\t\t\t\t\t\tthreads={previewThreads}\n\t\t\t\t\t\tvariant=\"thread\"\n\t\t\t\t\t\tpoint={renderPoint}\n\t\t\t\t\t\tonSelectThread={() => openThreadId.set(editor, thread.id)}\n\t\t\t\t\t\t{...previewHandlers}\n\t\t\t\t\t\tcurrentUserId={props.currentUserId}\n\t\t\t\t\t\tresolveAuthor={resolveAuthor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
+  "names": ["ThreadPin", "point"]
+}

package/dist-cjs/canvas/thread-preview.js

@@ -26,7 +26,6 @@ __export(thread_preview_exports, {
 module.exports = __toCommonJS(thread_preview_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_react_dom = require("react-dom");
 var import_tldraw = require("tldraw");
 var import_comment_card = require("../ui/comment-card");
 var import_reply_count = require("../ui/reply-count");
@@ -96,7 +95,6 @@ function useMarkerPreview(editor, markerId) {
 function ThreadPreview({
   editor,
   threads,
-  container,
   variant,
   point,
   onSelectThread,
@@ -131,53 +129,47 @@ function ThreadPreview({
     `tlui-cmt-canvas-preview__panel--${variant}`,
     isThread && onSelectThread ? "tlui-cmt-canvas-preview__panel--selectable" : ""
   ].filter(Boolean).join(" ");
-  return (0, import_react_dom.createPortal)(
-    // The root is the hover region — it carries the bridge back to the marker — while the panel
-    // inside it is the visible surface. Keeping them apart is what lets the surface light up on
-    // its own hover without the bridge (which reaches back over the marker) lighting it up too.
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref,
-        className: `tlui-cmt-canvas-preview tlui-cmt-canvas-preview--${variant}`,
-        style: {
-          left: point.x + offset.x,
-          top: point.y + offset.y,
-          // The stylesheet sizes the hover bridge against this, so the gap it spans follows
-          // the offset rather than being restated as a second magic number.
-          "--tlui-cmt-preview-offset": `${offset.x}px`
-        },
-        onPointerEnter,
-        onPointerLeave,
-        onPointerDown: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: panelClass, children: [
-          cards.map(({ thread, first }) => {
-            const replies = (0, import_reply_count.replyCountLabel)(msg, (countByThread.get(thread.id) ?? 1) - 1);
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                className: isThread ? void 0 : onSelectThread ? "tlui-cmt-preview-card tlui-cmt-preview-card--selectable" : "tlui-cmt-preview-card",
-                onClick: onSelectThread ? (e) => {
-                  e.stopPropagation();
-                  onSelectThread(thread);
-                } : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_comment_card.CommentCard,
-                  {
-                    ...(0, import_thread_view.toCardProps)(first, props, options.components, resolveName),
-                    footer: replies ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-card__replies", children: replies }) : void 0
-                  }
-                )
-              },
-              thread.id
-            );
-          }),
-          overflow > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-preview-more", children: msg("comments.preview-more").replace("{count}", String(overflow)) })
-        ] })
-      }
-    ),
-    container
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.EditorPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: `tlui-cmt-canvas-preview tlui-cmt-canvas-preview--${variant}`,
+      style: {
+        left: point.x + offset.x,
+        top: point.y + offset.y,
+        // The stylesheet sizes the hover bridge against this, so the gap it spans follows
+        // the offset rather than being restated as a second magic number.
+        "--tlui-cmt-preview-offset": `${offset.x}px`
+      },
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: panelClass, children: [
+        cards.map(({ thread, first }) => {
+          const replies = (0, import_reply_count.replyCountLabel)(msg, (countByThread.get(thread.id) ?? 1) - 1);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: isThread ? void 0 : onSelectThread ? "tlui-cmt-preview-card tlui-cmt-preview-card--selectable" : "tlui-cmt-preview-card",
+              onClick: onSelectThread ? (e) => {
+                e.stopPropagation();
+                onSelectThread(thread);
+              } : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_comment_card.CommentCard,
+                {
+                  ...(0, import_thread_view.toCardProps)(first, props, options.components, resolveName),
+                  footer: replies ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-card__replies", children: replies }) : void 0
+                }
+              )
+            },
+            thread.id
+          );
+        }),
+        overflow > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-preview-more", children: msg("comments.preview-more").replace("{count}", String(overflow)) })
+      ] })
+    }
+  ) });
 }
 function sortThreadsForPreview(threads) {
   return [...threads].sort((a, b) => a.createdAt - b.createdAt || (a.id < b.id ? -1 : 1));

package/dist-cjs/canvas/thread-preview.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/thread-preview.tsx"],
-  "sourcesContent": ["import { useEffect, useMemo, useRef, type CSSProperties } from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n\tEditor,\n\tEditorAtom,\n\tTLComment,\n\tTLCommentThread,\n\tusePassThroughWheelEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { CommentCard } from '../ui/comment-card'\nimport { replyCountLabel } from '../ui/reply-count'\nimport { type CommentingContext } from './context'\nimport { useComments } from './hooks'\nimport { useCommentingOptions } from './options'\nimport { openStackId, openThreadId } from './state'\nimport { POPOVER_OFFSET, toCardProps, useResolveName } from './thread-view'\n\n/**\n * Hover previews for every canvas marker \u2014 a single pin, a coincident stack, or a cluster badge.\n * Hovering shows the thread(s) behind the marker as cards; the marker's own click keeps whatever\n * it already did (open the thread, open the stack list, zoom to the cluster's split).\n *\n * The panel is live, not a passive tooltip: the pointer can travel right into it and hover each\n * card, and clicking one opens that thread \u2014 the same affordance the stack list gives its cards.\n * Two pieces make that work. The close delay survives the trip across the gap, and the panel\n * carries an invisible bridge over that gap (see `.tlui-cmt-canvas-preview::before`) so the\n * journey never crosses dead space and retracts the panel mid-move.\n *\n * Opening a thread from a card needs nothing more than setting `openThreadId`, including for a\n * thread currently folded inside a cluster badge: `collectClusterLeaves` skips the open thread, so\n * it drops out of its badge and renders its own pin and popover.\n */\n\n/** How long the pointer must rest on a marker before its preview appears. */\nconst PREVIEW_OPEN_DELAY_MS = 180\n/**\n * Grace period after the pointer leaves the marker *or* the panel. Long enough to cross the gap\n * between them by hand \u2014 the bridge element covers that gap geometrically, and this covers the\n * moment of transit between the two elements' enter/leave events.\n */\nconst PREVIEW_CLOSE_DELAY_MS = 220\n/** Cards shown before the panel falls back to a \"+N more\" line. */\nconst PREVIEW_MAX_THREADS = 5\n\n/** A thread paired with the comment that opens it \u2014 one card of a preview. */\nexport interface ThreadPreviewCard {\n\tthread: TLCommentThread\n\tfirst: TLComment\n}\n\n/**\n * The cards a marker's preview will show, and how many threads it will summarise as \"+N more\".\n *\n * A thread can exist before its opening comment does \u2014 a collaborator's, mid-sync \u2014 and has nothing\n * to preview until it arrives. Those are dropped here rather than rendered as blank cards, and they\n * don't count toward the overflow tally either, so \"+2 more\" always means two readable threads.\n */\nexport function selectPreviewCards(\n\tthreads: readonly TLCommentThread[],\n\tfirstCommentOf: (thread: TLCommentThread) => TLComment | undefined,\n\tmax = PREVIEW_MAX_THREADS\n): { cards: ThreadPreviewCard[]; overflow: number } {\n\tconst readable: ThreadPreviewCard[] = []\n\tfor (const thread of threads) {\n\t\tconst first = firstCommentOf(thread)\n\t\tif (first) readable.push({ thread, first })\n\t}\n\treturn { cards: readable.slice(0, max), overflow: Math.max(0, readable.length - max) }\n}\n\n/**\n * What a marker's click opens, which is what its preview imitates \u2014 the panel's surface, its\n * width, and how it lays a comment out.\n *\n * `'thread'` previews a single pin: a thread panel without the header. `'list'` previews a\n * coincident stack or a cluster: one card per thread, like the stack list.\n */\nexport type ThreadPreviewVariant = 'thread' | 'list'\n\n/**\n * Which marker's preview is showing, or null. One atom for the whole layer, so previews are\n * mutually exclusive by construction: the close delay means an outgoing marker's timer can still\n * be pending when the next marker opens, and per-component state would briefly show both.\n */\nconst hoveredMarkerId = new EditorAtom<string | null>('commentHoveredMarkerId', () => null)\n\n/**\n * Hover state for one marker. Returns whether its preview should render, plus the pointer handlers\n * to spread onto the marker element.\n *\n * `markerId` must be stable and unique per marker across the layer \u2014 prefix by kind, since a stack\n * is keyed by its oldest member's thread id and would otherwise collide with that thread's own pin.\n */\nexport function useMarkerPreview(editor: Editor, markerId: string) {\n\tconst openTimer = useRef(0)\n\tconst closeTimer = useRef(0)\n\n\t// Previews are a resting-state affordance. While a thread or stack list is open, that view is\n\t// the thing being read \u2014 a preview floating over it would just compete with it.\n\tconst suppressed = useValue(\n\t\t'marker preview suppressed',\n\t\t() => openThreadId.get(editor) !== null || openStackId.get(editor) !== null,\n\t\t[editor]\n\t)\n\tconst shown = useValue('marker preview shown', () => hoveredMarkerId.get(editor) === markerId, [\n\t\teditor,\n\t\tmarkerId,\n\t])\n\n\tuseEffect(() => {\n\t\tconst open = openTimer\n\t\tconst close = closeTimer\n\t\treturn () => {\n\t\t\twindow.clearTimeout(open.current)\n\t\t\twindow.clearTimeout(close.current)\n\t\t\t// Don't strand the atom on a marker that has unmounted \u2014 zoomed into a cluster, deleted,\n\t\t\t// or folded away \u2014 or no other marker's preview could ever show.\n\t\t\tif (hoveredMarkerId.get(editor) === markerId) hoveredMarkerId.set(editor, null)\n\t\t}\n\t}, [editor, markerId])\n\n\t// Suppression can start *while* a preview is up: clicking the hovered pin opens its thread.\n\t// Retract the preview rather than leaving it stranded behind the popover that just opened.\n\tuseEffect(() => {\n\t\tif (suppressed && hoveredMarkerId.get(editor) === markerId) {\n\t\t\thoveredMarkerId.set(editor, null)\n\t\t}\n\t}, [suppressed, editor, markerId])\n\n\tconst onPointerEnter = () => {\n\t\twindow.clearTimeout(openTimer.current)\n\t\twindow.clearTimeout(closeTimer.current)\n\t\tif (suppressed) return\n\t\topenTimer.current = window.setTimeout(\n\t\t\t() => hoveredMarkerId.set(editor, markerId),\n\t\t\tPREVIEW_OPEN_DELAY_MS\n\t\t)\n\t}\n\n\tconst onPointerLeave = () => {\n\t\twindow.clearTimeout(openTimer.current)\n\t\twindow.clearTimeout(closeTimer.current)\n\t\tcloseTimer.current = window.setTimeout(() => {\n\t\t\tif (hoveredMarkerId.get(editor) === markerId) hoveredMarkerId.set(editor, null)\n\t\t}, PREVIEW_CLOSE_DELAY_MS)\n\t}\n\n\treturn {\n\t\tpreviewShown: shown && !suppressed,\n\t\tpreviewHandlers: { onPointerEnter, onPointerLeave },\n\t}\n}\n\n/**\n * The hover panel: each thread's opening comment as a read-only card, capped with a \"+N more\"\n * line. Mounted only while hovering, so the store subscription it needs to find those comments\n * costs nothing at rest.\n */\nexport function ThreadPreview({\n\teditor,\n\tthreads,\n\tcontainer,\n\tvariant,\n\tpoint,\n\tonSelectThread,\n\tonPointerEnter,\n\tonPointerLeave,\n\t...props\n}: Pick<CommentingContext, 'currentUserId' | 'resolveAuthor'> & {\n\teditor: Editor\n\t/** The marker's threads, in the order they should read (oldest first). */\n\tthreads: readonly TLCommentThread[]\n\tcontainer: HTMLElement\n\t/** What the marker's click opens, which this panel imitates. */\n\tvariant: ThreadPreviewVariant\n\t/** The marker's anchor point in viewport space \u2014 the same origin its popover is placed from. */\n\tpoint: { x: number; y: number }\n\t/** Open a thread from its card. Omit to leave the cards inert. */\n\tonSelectThread?(thread: TLCommentThread): void\n\t/** The owning marker's hover handlers, so the panel counts as part of its hover region. */\n\tonPointerEnter?(): void\n\tonPointerLeave?(): void\n}) {\n\tconst options = useCommentingOptions()\n\tconst msg = useTranslation()\n\tconst comments = useComments(editor)\n\tconst resolveName = useResolveName(props.resolveAuthor)\n\n\t// The panel floats over the canvas and scrolls nothing of its own, so a wheel on it should zoom\n\t// and pan the canvas underneath \u2014 like every other tldraw panel, and like the popover it\n\t// previews. Without this the canvas would freeze wherever the preview happened to be.\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\t// Each thread's opening comment and its total comment count. `useComments` is oldest-first, so\n\t// the first hit per thread is that thread's first comment. One pass over every comment beats a\n\t// per-thread hook \u2014 the thread count here is driven by cluster size, which has no fixed bound.\n\tconst { firstByThread, countByThread } = useMemo(() => {\n\t\tconst first = new Map<string, TLComment>()\n\t\tconst count = new Map<string, number>()\n\t\tfor (const comment of comments) {\n\t\t\tif (!first.has(comment.threadId)) first.set(comment.threadId, comment)\n\t\t\tcount.set(comment.threadId, (count.get(comment.threadId) ?? 0) + 1)\n\t\t}\n\t\treturn { firstByThread: first, countByThread: count }\n\t}, [comments])\n\n\tconst { cards, overflow } = useMemo(\n\t\t() => selectPreviewCards(threads, (thread) => firstByThread.get(thread.id)),\n\t\t[threads, firstByThread]\n\t)\n\n\t// Nothing readable yet \u2014 render no panel rather than an empty one. It matters most for the\n\t// thread variant, where the panel *is* the card's surface: an empty one would paint as a blank\n\t// box floating on the canvas.\n\tif (cards.length === 0) return null\n\n\t// Placed at the same origin as the popover this previews, so the two only differ by what their\n\t// stylesheets do \u2014 see `.tlui-cmt-canvas-preview__panel--thread` for the header compensation.\n\tconst offset = POPOVER_OFFSET[variant]\n\t// A thread preview is one comment on the panel itself, so the panel carries the hover and the\n\t// click. A list preview puts each thread on its own card, as the stack list does.\n\tconst isThread = variant === 'thread'\n\tconst panelClass = [\n\t\t'tlui-cmt-canvas-preview__panel',\n\t\t`tlui-cmt-canvas-preview__panel--${variant}`,\n\t\tisThread && onSelectThread ? 'tlui-cmt-canvas-preview__panel--selectable' : '',\n\t]\n\t\t.filter(Boolean)\n\t\t.join(' ')\n\n\treturn createPortal(\n\t\t// The root is the hover region \u2014 it carries the bridge back to the marker \u2014 while the panel\n\t\t// inside it is the visible surface. Keeping them apart is what lets the surface light up on\n\t\t// its own hover without the bridge (which reaches back over the marker) lighting it up too.\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={`tlui-cmt-canvas-preview tlui-cmt-canvas-preview--${variant}`}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\tleft: point.x + offset.x,\n\t\t\t\t\ttop: point.y + offset.y,\n\t\t\t\t\t// The stylesheet sizes the hover bridge against this, so the gap it spans follows\n\t\t\t\t\t// the offset rather than being restated as a second magic number.\n\t\t\t\t\t'--tlui-cmt-preview-offset': `${offset.x}px`,\n\t\t\t\t} as CSSProperties\n\t\t\t}\n\t\t\tonPointerEnter={onPointerEnter}\n\t\t\tonPointerLeave={onPointerLeave}\n\t\t\t// The panel sits over the canvas; a press on it is not a canvas press.\n\t\t\tonPointerDown={(e) => e.stopPropagation()}\n\t\t>\n\t\t\t<div className={panelClass}>\n\t\t\t\t{cards.map(({ thread, first }) => {\n\t\t\t\t\t// The preview shows only the opening comment, so its reply count is what tells the\n\t\t\t\t\t// reader the thread continues past what they see.\n\t\t\t\t\tconst replies = replyCountLabel(msg, (countByThread.get(thread.id) ?? 1) - 1)\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={thread.id}\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisThread\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: onSelectThread\n\t\t\t\t\t\t\t\t\t\t? 'tlui-cmt-preview-card tlui-cmt-preview-card--selectable'\n\t\t\t\t\t\t\t\t\t\t: 'tlui-cmt-preview-card'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\tonSelectThread\n\t\t\t\t\t\t\t\t\t? (e) => {\n\t\t\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\t\t\tonSelectThread(thread)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CommentCard\n\t\t\t\t\t\t\t\t{...toCardProps(first, props, options.components, resolveName)}\n\t\t\t\t\t\t\t\tfooter={\n\t\t\t\t\t\t\t\t\treplies ? <span className=\"tlui-cmt-card__replies\">{replies}</span> : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\t{overflow > 0 && (\n\t\t\t\t\t<div className=\"tlui-cmt-preview-more\">\n\t\t\t\t\t\t{msg('comments.preview-more').replace('{count}', String(overflow))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>,\n\t\tcontainer\n\t)\n}\n\n/** Order a marker's threads for reading: oldest first, id as the tiebreak so it's stable. */\nexport function sortThreadsForPreview(\n\tthreads: readonly TLCommentThread[]\n): readonly TLCommentThread[] {\n\treturn [...threads].sort((a, b) => a.createdAt - b.createdAt || (a.id < b.id ? -1 : 1))\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useMemo, useRef, type CSSProperties } from 'react'\nimport {\n\tEditor,\n\tEditorAtom,\n\tEditorPortal,\n\tTLComment,\n\tTLCommentThread,\n\tusePassThroughWheelEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { CommentCard } from '../ui/comment-card'\nimport { replyCountLabel } from '../ui/reply-count'\nimport { type CommentingContext } from './context'\nimport { useComments } from './hooks'\nimport { useCommentingOptions } from './options'\nimport { openStackId, openThreadId } from './state'\nimport { POPOVER_OFFSET, toCardProps, useResolveName } from './thread-view'\n\n/**\n * Hover previews for every canvas marker \u2014 a single pin, a coincident stack, or a cluster badge.\n * Hovering shows the thread(s) behind the marker as cards; the marker's own click is unchanged.\n *\n * The panel is live, not a passive tooltip: the pointer can travel into it and click a card to open\n * that thread. Two pieces make that work \u2014 the close delay survives the trip across the gap, and\n * the panel carries an invisible bridge over it (see `.tlui-cmt-canvas-preview::before`).\n *\n * Opening a thread from a card needs nothing more than setting `openThreadId`, even for one folded\n * inside a badge: `collectClusterLeaves` skips the open thread, so it drops out and renders itself.\n */\n\n/** How long the pointer must rest on a marker before its preview appears. */\nconst PREVIEW_OPEN_DELAY_MS = 180\n/**\n * Grace period after the pointer leaves the marker *or* the panel \u2014 long enough to cross the gap\n * between them, which the bridge element covers geometrically.\n */\nconst PREVIEW_CLOSE_DELAY_MS = 220\n/** Cards shown before the panel falls back to a \"+N more\" line. */\nconst PREVIEW_MAX_THREADS = 5\n\n/** A thread paired with the comment that opens it \u2014 one card of a preview. */\nexport interface ThreadPreviewCard {\n\tthread: TLCommentThread\n\tfirst: TLComment\n}\n\n/**\n * The cards a marker's preview will show, and how many threads it will summarise as \"+N more\".\n *\n * A thread can exist before its opening comment does \u2014 a collaborator's, mid-sync. Those are\n * dropped rather than rendered blank, and don't count toward the overflow tally.\n */\nexport function selectPreviewCards(\n\tthreads: readonly TLCommentThread[],\n\tfirstCommentOf: (thread: TLCommentThread) => TLComment | undefined,\n\tmax = PREVIEW_MAX_THREADS\n): { cards: ThreadPreviewCard[]; overflow: number } {\n\tconst readable: ThreadPreviewCard[] = []\n\tfor (const thread of threads) {\n\t\tconst first = firstCommentOf(thread)\n\t\tif (first) readable.push({ thread, first })\n\t}\n\treturn { cards: readable.slice(0, max), overflow: Math.max(0, readable.length - max) }\n}\n\n/**\n * What a marker's click opens, which is what its preview imitates \u2014 the panel's surface, its\n * width, and how it lays a comment out.\n *\n * `'thread'` previews a single pin: a thread panel without the header. `'list'` previews a\n * coincident stack or a cluster: one card per thread, like the stack list.\n */\nexport type ThreadPreviewVariant = 'thread' | 'list'\n\n/**\n * Which marker's preview is showing, or null. One atom for the whole layer, so previews are\n * mutually exclusive: the close delay can leave an outgoing marker's timer pending when the next\n * opens, and per-component state would briefly show both.\n */\nconst hoveredMarkerId = new EditorAtom<string | null>('commentHoveredMarkerId', () => null)\n\n/**\n * Hover state for one marker. Returns whether its preview should render, plus the pointer handlers\n * to spread onto the marker element. `markerId` must be stable and unique per marker across the\n * layer \u2014 prefix by kind, or a stack collides with its oldest member's own pin.\n */\nexport function useMarkerPreview(editor: Editor, markerId: string) {\n\tconst openTimer = useRef(0)\n\tconst closeTimer = useRef(0)\n\n\t// Previews are a resting-state affordance. While a thread or stack list is open, that view is\n\t// the thing being read \u2014 a preview floating over it would just compete with it.\n\tconst suppressed = useValue(\n\t\t'marker preview suppressed',\n\t\t() => openThreadId.get(editor) !== null || openStackId.get(editor) !== null,\n\t\t[editor]\n\t)\n\tconst shown = useValue('marker preview shown', () => hoveredMarkerId.get(editor) === markerId, [\n\t\teditor,\n\t\tmarkerId,\n\t])\n\n\tuseEffect(() => {\n\t\tconst open = openTimer\n\t\tconst close = closeTimer\n\t\treturn () => {\n\t\t\twindow.clearTimeout(open.current)\n\t\t\twindow.clearTimeout(close.current)\n\t\t\t// Don't strand the atom on a marker that has unmounted \u2014 zoomed into a cluster, deleted,\n\t\t\t// or folded away \u2014 or no other marker's preview could ever show.\n\t\t\tif (hoveredMarkerId.get(editor) === markerId) hoveredMarkerId.set(editor, null)\n\t\t}\n\t}, [editor, markerId])\n\n\t// Suppression can start *while* a preview is up: clicking the hovered pin opens its thread.\n\t// Retract the preview rather than leaving it stranded behind the popover that just opened.\n\tuseEffect(() => {\n\t\tif (suppressed && hoveredMarkerId.get(editor) === markerId) {\n\t\t\thoveredMarkerId.set(editor, null)\n\t\t}\n\t}, [suppressed, editor, markerId])\n\n\tconst onPointerEnter = () => {\n\t\twindow.clearTimeout(openTimer.current)\n\t\twindow.clearTimeout(closeTimer.current)\n\t\tif (suppressed) return\n\t\topenTimer.current = window.setTimeout(\n\t\t\t() => hoveredMarkerId.set(editor, markerId),\n\t\t\tPREVIEW_OPEN_DELAY_MS\n\t\t)\n\t}\n\n\tconst onPointerLeave = () => {\n\t\twindow.clearTimeout(openTimer.current)\n\t\twindow.clearTimeout(closeTimer.current)\n\t\tcloseTimer.current = window.setTimeout(() => {\n\t\t\tif (hoveredMarkerId.get(editor) === markerId) hoveredMarkerId.set(editor, null)\n\t\t}, PREVIEW_CLOSE_DELAY_MS)\n\t}\n\n\treturn {\n\t\tpreviewShown: shown && !suppressed,\n\t\tpreviewHandlers: { onPointerEnter, onPointerLeave },\n\t}\n}\n\n/**\n * The hover panel: each thread's opening comment as a read-only card, capped with a \"+N more\" line.\n * Mounted only while hovering, so its store subscription costs nothing at rest.\n */\nexport function ThreadPreview({\n\teditor,\n\tthreads,\n\tvariant,\n\tpoint,\n\tonSelectThread,\n\tonPointerEnter,\n\tonPointerLeave,\n\t...props\n}: Pick<CommentingContext, 'currentUserId' | 'resolveAuthor'> & {\n\teditor: Editor\n\t/** The marker's threads, in the order they should read (oldest first). */\n\tthreads: readonly TLCommentThread[]\n\t/** What the marker's click opens, which this panel imitates. */\n\tvariant: ThreadPreviewVariant\n\t/** The marker's anchor point in viewport space \u2014 the same origin its popover is placed from. */\n\tpoint: { x: number; y: number }\n\t/** Open a thread from its card. Omit to leave the cards inert. */\n\tonSelectThread?(thread: TLCommentThread): void\n\t/** The owning marker's hover handlers, so the panel counts as part of its hover region. */\n\tonPointerEnter?(): void\n\tonPointerLeave?(): void\n}) {\n\tconst options = useCommentingOptions()\n\tconst msg = useTranslation()\n\tconst comments = useComments(editor)\n\tconst resolveName = useResolveName(props.resolveAuthor)\n\n\t// The panel floats over the canvas and scrolls nothing of its own, so a wheel on it should zoom\n\t// and pan the canvas underneath \u2014 like every other tldraw panel, and like the popover it\n\t// previews. Without this the canvas would freeze wherever the preview happened to be.\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\t// Each thread's opening comment and its total comment count. `useComments` is oldest-first, so\n\t// the first hit per thread is that thread's first comment. One pass over every comment beats a\n\t// per-thread hook \u2014 the thread count here is driven by cluster size, which has no fixed bound.\n\tconst { firstByThread, countByThread } = useMemo(() => {\n\t\tconst first = new Map<string, TLComment>()\n\t\tconst count = new Map<string, number>()\n\t\tfor (const comment of comments) {\n\t\t\tif (!first.has(comment.threadId)) first.set(comment.threadId, comment)\n\t\t\tcount.set(comment.threadId, (count.get(comment.threadId) ?? 0) + 1)\n\t\t}\n\t\treturn { firstByThread: first, countByThread: count }\n\t}, [comments])\n\n\tconst { cards, overflow } = useMemo(\n\t\t() => selectPreviewCards(threads, (thread) => firstByThread.get(thread.id)),\n\t\t[threads, firstByThread]\n\t)\n\n\t// Nothing readable yet \u2014 render no panel rather than an empty one. It matters most for the\n\t// thread variant, where the panel *is* the card's surface: an empty one would paint as a blank\n\t// box floating on the canvas.\n\tif (cards.length === 0) return null\n\n\t// Placed at the same origin as the popover this previews, so the two only differ by what their\n\t// stylesheets do \u2014 see `.tlui-cmt-canvas-preview__panel--thread` for the header compensation.\n\tconst offset = POPOVER_OFFSET[variant]\n\t// A thread preview is one comment on the panel itself, so the panel carries the hover and the\n\t// click. A list preview puts each thread on its own card, as the stack list does.\n\tconst isThread = variant === 'thread'\n\tconst panelClass = [\n\t\t'tlui-cmt-canvas-preview__panel',\n\t\t`tlui-cmt-canvas-preview__panel--${variant}`,\n\t\tisThread && onSelectThread ? 'tlui-cmt-canvas-preview__panel--selectable' : '',\n\t]\n\t\t.filter(Boolean)\n\t\t.join(' ')\n\n\treturn (\n\t\t<EditorPortal>\n\t\t\t{/* The root is the hover region \u2014 it carries the bridge back to the marker \u2014 while the panel\n\t\t    inside it is the visible surface. Keeping them apart is what lets the surface light up on\n\t\t    its own hover without the bridge (which reaches back over the marker) lighting it up too. */}\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={`tlui-cmt-canvas-preview tlui-cmt-canvas-preview--${variant}`}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\tleft: point.x + offset.x,\n\t\t\t\t\t\ttop: point.y + offset.y,\n\t\t\t\t\t\t// The stylesheet sizes the hover bridge against this, so the gap it spans follows\n\t\t\t\t\t\t// the offset rather than being restated as a second magic number.\n\t\t\t\t\t\t'--tlui-cmt-preview-offset': `${offset.x}px`,\n\t\t\t\t\t} as CSSProperties\n\t\t\t\t}\n\t\t\t\tonPointerEnter={onPointerEnter}\n\t\t\t\tonPointerLeave={onPointerLeave}\n\t\t\t\t// The panel sits over the canvas; a press on it is not a canvas press.\n\t\t\t\tonPointerDown={(e) => e.stopPropagation()}\n\t\t\t>\n\t\t\t\t<div className={panelClass}>\n\t\t\t\t\t{cards.map(({ thread, first }) => {\n\t\t\t\t\t\t// The preview shows only the opening comment, so its reply count is what tells the\n\t\t\t\t\t\t// reader the thread continues past what they see.\n\t\t\t\t\t\tconst replies = replyCountLabel(msg, (countByThread.get(thread.id) ?? 1) - 1)\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={thread.id}\n\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\tisThread\n\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t: onSelectThread\n\t\t\t\t\t\t\t\t\t\t\t? 'tlui-cmt-preview-card tlui-cmt-preview-card--selectable'\n\t\t\t\t\t\t\t\t\t\t\t: 'tlui-cmt-preview-card'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\tonSelectThread\n\t\t\t\t\t\t\t\t\t\t? (e) => {\n\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t\t\t\t\tonSelectThread(thread)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CommentCard\n\t\t\t\t\t\t\t\t\t{...toCardProps(first, props, options.components, resolveName)}\n\t\t\t\t\t\t\t\t\tfooter={\n\t\t\t\t\t\t\t\t\t\treplies ? <span className=\"tlui-cmt-card__replies\">{replies}</span> : undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\t{overflow > 0 && (\n\t\t\t\t\t\t<div className=\"tlui-cmt-preview-more\">\n\t\t\t\t\t\t\t{msg('comments.preview-more').replace('{count}', String(overflow))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</EditorPortal>\n\t)\n}\n\n/** Order a marker's threads for reading: oldest first, id as the tiebreak so it's stable. */\nexport function sortThreadsForPreview(\n\tthreads: readonly TLCommentThread[]\n): readonly TLCommentThread[] {\n\treturn [...threads].sort((a, b) => a.createdAt - b.createdAt || (a.id < b.id ? -1 : 1))\n}\n"],
+  "mappings": "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",
   "names": []
 }