@tldraw/commenting 5.4.2 → 5.5.0-canary.0241f11f2e99

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

@@ -11,7 +11,7 @@ import {
   useClusterModel,
   zoomToClusterSplit
 } from "./cluster-model.mjs";
-import { getCommentRecord } from "./comment-store.mjs";
+import { getCommentRecord, getCommentThread } from "./comment-store.mjs";
 import { useCommentThreads } from "./hooks.mjs";
 import { useCommentingEnabled } from "./license.mjs";
 import { useCanComment, useCommentingOptions } from "./options.mjs";
@@ -113,31 +113,27 @@ function CanvasCommentsLayer(props) {
       if (!id) return null;
       const record = getCommentRecord(editor, id);
       if (!record) return null;
-      const thread = record.typeName === "comment" ? getCommentRecord(editor, record.threadId) : record;
+      const thread = record.typeName === "comment" ? getCommentThread(editor, record.threadId) : record;
       return thread?.typeName === "comment-thread" ? thread : null;
     },
     [editor]
   );
+  const revealAndOpenThread = useCallback(
+    (thread, duration) => {
+      revealThreadPin(editor, thread, clusterModel.table, clusterZoomBounds, options, duration);
+      openThreadId.set(editor, thread.id);
+    },
+    [clusterModel.table, clusterZoomBounds, editor, options]
+  );
   useEffect(() => {
     if (!requestedRevealThread) return;
     revealThreadRequest.set(editor, null);
     commentsHidden.set(editor, false);
-    revealThreadPin(editor, requestedRevealThread, clusterModel.table, clusterZoomBounds, options);
-    openThreadId.set(editor, requestedRevealThread.id);
-  }, [requestedRevealThread, clusterModel.table, clusterZoomBounds, editor, options]);
+    revealAndOpenThread(requestedRevealThread);
+  }, [requestedRevealThread, revealAndOpenThread, editor]);
   const revealClusteredThread = useCallback(
-    (thread) => {
-      revealThreadPin(
-        editor,
-        thread,
-        clusterModel.table,
-        clusterZoomBounds,
-        options,
-        CLUSTER_EXPAND_ZOOM_MS
-      );
-      openThreadId.set(editor, thread.id);
-    },
-    [clusterModel.table, clusterZoomBounds, editor, options]
+    (thread) => revealAndOpenThread(thread, CLUSTER_EXPAND_ZOOM_MS),
+    [revealAndOpenThread]
   );
   const expandCluster = useCallback(
     (node) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comments-overlay.tsx"],
-  "sourcesContent": ["import { isMentionPickerOpen } from '@tldraw/mentions'\nimport { Fragment, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { EditorPortal, TLCommentThread, useEditor, useValue } from 'tldraw'\nimport type { ClusterNode } from '../clustering/types'\nimport { registerCommentAnchorLifecycle } from './anchor-lifecycle'\nimport { ClusterBadge } from './cluster-badge'\nimport { clusterFadeClassName } from './cluster-fade'\nimport {\n\tCLUSTER_EXPAND_ZOOM_MS,\n\trevealThreadPin,\n\tuseClusterModel,\n\tzoomToClusterSplit,\n} from './cluster-model'\nimport { getCommentRecord } from './comment-store'\nimport { type CommentingContext } from './context'\nimport { useCommentThreads } from './hooks'\nimport { useCommentingEnabled } from './license'\nimport { useCanComment, useCommentingOptions } from './options'\nimport { PendingComposer } from './pending-composer'\nimport { computePinStacks, isOpenStackKeyLive, pinStacksEqual } from './pin-stacking'\nimport { RegionBox, RegionDraftBox } from './region-box'\nimport {\n\tcommentsHidden,\n\topenStackId,\n\topenThreadId,\n\tpendingComment,\n\trevealThreadRequest,\n\tsidebarFilters,\n\ttoggleCommentsHidden,\n\tusePendingComment,\n} from './state'\nimport { ThreadPin } from './thread-pin'\nimport { ThreadStackPin } from './thread-stack'\n\n/**\n * The host wiring for {@link CanvasComments} \u2014 see {@link CommentingContext}, which the sidebar\n * takes the same fields from.\n *\n * @public\n */\nexport type CanvasCommentsProps = CommentingContext\n\n/**\n * Which thread's pin a fade node should draw: its own thread for a single pin, `stackOwner` (when\n * still a member) for a coincident stack, null for neither. Never the open thread \u2014 the open-thread\n * render slot draws that one, and drawing it here too (which the fade-out window would otherwise\n * do) mounts its popover twice.\n * @internal\n */\nexport function fadeNodeMarkerThreadId(\n\tnode: ClusterNode,\n\tstackOwner: string | null,\n\topenId: string | null\n): string | null {\n\tconst candidate =\n\t\tnode.count === 1 ? node.id : stackOwner && node.members.includes(stackOwner) ? stackOwner : null\n\treturn candidate === openId ? null : candidate\n}\n\n/**\n * A ready-to-use comments layer for a tldraw canvas: pins each thread at its anchor, opens a\n * thread popover (with a reply composer) on click, and shows a composer where the comment tool\n * placed a new thread. Reads/writes comment records straight from `editor.store`.\n *\n * It's the batteries-included default: every visible piece is a slot on\n * `CommentTool.configure({ components })`, and the pieces it composes (`CommentPin`,\n * `CommentThread`, `CommentComposer`, the hooks, the tool) are all exported, so a consumer can\n * rebuild it from parts instead. The host wiring is the {@link CommentingContext}, which\n * `CanvasCommentsSidebar` takes too.\n *\n * @public @react\n */\nexport function CanvasComments(props: CanvasCommentsProps) {\n\t// The inner component holds every other hook, so mounting it as the license resolves keeps hook\n\t// order stable here.\n\tconst commentingEnabled = useCommentingEnabled()\n\tif (!commentingEnabled) return null\n\treturn <CanvasCommentsLayer {...props} />\n}\n\nfunction CanvasCommentsLayer(props: CommentingContext) {\n\tconst editor = useEditor()\n\tconst options = useCommentingOptions()\n\tconst allThreads = useCommentThreads(editor)\n\tconst pending = usePendingComment()\n\tconst canComment = useCanComment(props.currentUserId)\n\t// Nothing renders a pending comment when composing is blocked and there's no fallback slot, and\n\t// the dismiss handlers live inside PendingComposer \u2014 so clear the atom rather than strand it,\n\t// and leave the tool too: it holds while a composer is open, so staying would turn every click\n\t// into a silently swallowed placement.\n\tconst canRenderComposer = canComment || options.components.ComposerFallback != null\n\tconst showPendingComposer = pending != null && canRenderComposer\n\tuseEffect(() => {\n\t\tif (pending && !showPendingComposer) {\n\t\t\tpendingComment.set(editor, null)\n\t\t\tif (editor.isIn('comment')) editor.setCurrentTool('select')\n\t\t}\n\t}, [editor, pending, showPendingComposer])\n\tconst openId = useValue('open thread id', () => openThreadId.get(editor), [editor])\n\t// Matches the sidebar's `showResolved` filter. The open thread stays in \u2014 resolving from its own\n\t// popover shouldn't make the pin vanish under it.\n\tconst showResolved = useValue('show resolved', () => sidebarFilters.get(editor).showResolved, [\n\t\teditor,\n\t])\n\tconst threads = useMemo(\n\t\t() => allThreads.filter((t) => showResolved || t.resolved == null || t.id === openId),\n\t\t[allThreads, showResolved, openId]\n\t)\n\tuseEffect(() => registerCommentAnchorLifecycle(editor), [editor])\n\tconst {\n\t\tmodel: clusterModel,\n\t\tzoomBounds: clusterZoomBounds,\n\t\tfadeNodes,\n\t\torphanThreads,\n\t\theldThreads,\n\t} = useClusterModel(editor, threads, openId)\n\tconst threadsById = useMemo(\n\t\t() => new Map<string, TLCommentThread>(threads.map((thread) => [thread.id, thread])),\n\t\t[threads]\n\t)\n\t// Pins with the *same* anchor point coincide at every zoom, so they render as one count-badge\n\t// stack. Keyed on page-space anchors, so camera moves never recompute this. Holding the map's\n\t// identity while the grouping is unchanged keeps a reply from re-rendering every pin \u2014 but the\n\t// map has no positions in it, so anything needing a stack's *point* must read the anchors itself.\n\tconst pinStacksRef = useRef<Map<string, readonly string[]>>(new Map())\n\tconst pinStacks = useValue(\n\t\t'comment pin stacks',\n\t\t() => {\n\t\t\tconst stacks = computePinStacks(editor, threads)\n\t\t\tif (pinStacksEqual(pinStacksRef.current, stacks)) return pinStacksRef.current\n\t\t\tpinStacksRef.current = stacks\n\t\t\treturn stacks\n\t\t},\n\t\t[editor, threads]\n\t)\n\tconst openThread = openId ? threadsById.get(openId) : null\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\topenThreadId.set(editor, null)\n\t\t\topenStackId.set(editor, null)\n\t\t\tpendingComment.set(editor, null)\n\t\t\trevealThreadRequest.set(editor, null)\n\t\t}\n\t}, [editor])\n\n\t// Clear a stale open-stack key: only the stack's own mounted handlers clear it, so collapsing to\n\t// a single pin strands it \u2014 and `useMarkerPreview` reads any non-null value as \"a stack is open\"\n\t// and suppresses every hover preview. Kept while any live stack still sits at that key. Reads the\n\t// anchors rather than keying off `pinStacks`, whose identity survives a stack moving as a whole.\n\tconst openStackKeyIsStale = useValue(\n\t\t'open stack key stale',\n\t\t() => {\n\t\t\tconst key = openStackId.get(editor)\n\t\t\tif (!key) return false\n\t\t\treturn !isOpenStackKeyLive(editor, key, pinStacks, threadsById)\n\t\t},\n\t\t[editor, pinStacks, threadsById]\n\t)\n\tuseEffect(() => {\n\t\tif (openStackKeyIsStale) openStackId.set(editor, null)\n\t}, [editor, openStackKeyIsStale])\n\n\t// The requested thread, once it (and, for a comment id, its parent thread) has synced into the\n\t// store; null while records are still arriving or when no request is pending.\n\tconst requestedRevealThread = useValue(\n\t\t'requested reveal thread',\n\t\t() => {\n\t\t\tconst id = revealThreadRequest.get(editor)\n\t\t\tif (!id) return null\n\t\t\tconst record = getCommentRecord(editor, id)\n\t\t\tif (!record) return null\n\t\t\tconst thread =\n\t\t\t\trecord.typeName === 'comment' ? getCommentRecord(editor, record.threadId) : record\n\t\t\treturn thread?.typeName === 'comment-thread' ? thread : null\n\t\t},\n\t\t[editor]\n\t)\n\n\t// Serve a pending reveal request, zooming to the first cluster split that reveals the pin if it's\n\t// folded into a badge. Also unhides pins: the popover opens on the layer that hiding withholds.\n\tuseEffect(() => {\n\t\tif (!requestedRevealThread) return\n\t\trevealThreadRequest.set(editor, null)\n\t\tcommentsHidden.set(editor, false)\n\t\trevealThreadPin(editor, requestedRevealThread, clusterModel.table, clusterZoomBounds, options)\n\t\topenThreadId.set(editor, requestedRevealThread.id)\n\t}, [requestedRevealThread, clusterModel.table, clusterZoomBounds, editor, options])\n\n\t// Picking a thread out of a cluster's hover preview. `openThreadId` alone would work, but would\n\t// cut straight there from the badge \u2014 zoom in first, the same move the badge's own click makes.\n\tconst revealClusteredThread = useCallback(\n\t\t(thread: TLCommentThread) => {\n\t\t\trevealThreadPin(\n\t\t\t\teditor,\n\t\t\t\tthread,\n\t\t\t\tclusterModel.table,\n\t\t\t\tclusterZoomBounds,\n\t\t\t\toptions,\n\t\t\t\tCLUSTER_EXPAND_ZOOM_MS\n\t\t\t)\n\t\t\topenThreadId.set(editor, thread.id)\n\t\t},\n\t\t[clusterModel.table, clusterZoomBounds, editor, options]\n\t)\n\n\tconst expandCluster = useCallback(\n\t\t(node: ClusterNode) => {\n\t\t\tzoomToClusterSplit(editor, clusterModel.table, clusterZoomBounds, node)\n\t\t},\n\t\t[clusterModel.table, clusterZoomBounds, editor]\n\t)\n\n\t// Escape collapses the open thread. Capture-phase so it runs ahead of the editor, which would\n\t// otherwise cancel the tool or clear the selection.\n\tuseEffect(() => {\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key !== 'Escape' || openThreadId.get(editor) === null) return\n\t\t\t// The mention picker owns Escape while it's open \u2014 let it dismiss the roster alone.\n\t\t\tif (isMentionPickerOpen()) return\n\t\t\tconst target = e.target as HTMLElement | null\n\t\t\tif (target && target.closest('.tlui-cmt-editing')) return\n\t\t\topenThreadId.set(editor, null)\n\t\t\te.preventDefault()\n\t\t\te.stopPropagation()\n\t\t}\n\t\tdocument.addEventListener('keydown', onKeyDown, true)\n\t\treturn () => document.removeEventListener('keydown', onKeyDown, true)\n\t}, [editor])\n\n\t// Shift+C toggles pin visibility. Physical `KeyC` so it's layout-independent, and skipped while\n\t// typing so it never fires from inside a composer.\n\tuseEffect(() => {\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.code !== 'KeyC' || !e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return\n\t\t\tconst target = e.target as HTMLElement | null\n\t\t\tif (target && target.closest('input, textarea, [contenteditable=\"true\"]')) return\n\t\t\ttoggleCommentsHidden(editor)\n\t\t\te.preventDefault()\n\t\t}\n\t\tdocument.addEventListener('keydown', onKeyDown, true)\n\t\treturn () => document.removeEventListener('keydown', onKeyDown, true)\n\t}, [editor])\n\n\t// The signal is read above so this stays mounted and its shortcut/Escape effects keep running.\n\tif (hidden) return null\n\n\t// The node's pin-stack group when every member shares one \u2014 a stack standing on its own, which\n\t// renders as a cascading count-badge list rather than a zoom-to-split cluster badge. The group\n\t// can include an open or orphan member the node's own leaves omit.\n\tconst stackGroupOf = (node: ClusterNode): readonly string[] | null => {\n\t\tconst group = pinStacks.get(node.members[0])\n\t\tif (!group) return null\n\t\treturn node.members.every((id) => group.includes(id)) ? group : null\n\t}\n\n\t// Which threads are on screen this render. A stack renders once, owned by its first on-screen\n\t// member \u2014 members arrive by different paths, so ownership can't be decided per-path.\n\tconst renderedThreadIds = new Set<string>()\n\tif (options.enableClustering) {\n\t\tfor (const { node } of fadeNodes) {\n\t\t\tif (node.count === 1) renderedThreadIds.add(node.id)\n\t\t\t// A pure-stack node's members aren't count-1 leaves, so register them here for the owner\n\t\t\t// logic to pick from.\n\t\t\telse if (stackGroupOf(node)) for (const id of node.members) renderedThreadIds.add(id)\n\t\t}\n\t\tfor (const thread of orphanThreads) renderedThreadIds.add(thread.id)\n\t\tfor (const thread of heldThreads) renderedThreadIds.add(thread.id)\n\t} else {\n\t\tfor (const thread of threads) renderedThreadIds.add(thread.id)\n\t}\n\tif (openThread) renderedThreadIds.add(openThread.id)\n\n\t// A coincident-stack member renders as the group's single count-badge stack (if it owns it)\n\t// or not at all; everything else is an ordinary pin.\n\tconst renderThreadPin = (thread: TLCommentThread): ReactNode => {\n\t\tconst group = pinStacks.get(thread.id)\n\t\tif (group) {\n\t\t\tconst owner = group.find((id) => renderedThreadIds.has(id))\n\t\t\tif (owner !== thread.id) return null\n\t\t\tconst stackThreads = group\n\t\t\t\t.map((id) => threadsById.get(id))\n\t\t\t\t.filter((t): t is TLCommentThread => t !== undefined)\n\t\t\treturn <ThreadStackPin editor={editor} threads={stackThreads} {...props} />\n\t\t}\n\t\treturn <ThreadPin editor={editor} thread={thread} {...props} />\n\t}\n\n\t// Portalled rather than rendered into this component's slot: pins sit below the collaborator\n\t// cursors and popovers above the UI panels, and no single canvas layer spans both. The portal\n\t// also fixes where the layer lands among the container's children, keeping it behind the UI's\n\t// skip link in the tab order.\n\treturn (\n\t\t<EditorPortal>\n\t\t\t{/* Wheel pass-through lives on each interactive element, not this root: the root spans the\n\t\t\t    whole canvas, so a pin past its bottom/right edge inflates scrollHeight and the wheel\n\t\t\t    hook's is-this-scrollable guard silently disables pass-through. */}\n\t\t\t<div className=\"tlui-cmt-canvas-layer\">\n\t\t\t\t{options.enableClustering ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{fadeNodes.map(({ node, phase }) => {\n\t\t\t\t\t\t\tlet content: ReactNode\n\t\t\t\t\t\t\tconst stackGroup = node.count > 1 ? stackGroupOf(node) : null\n\t\t\t\t\t\t\tif (node.count === 1) {\n\t\t\t\t\t\t\t\tconst markerId = fadeNodeMarkerThreadId(node, null, openId)\n\t\t\t\t\t\t\t\tconst thread = markerId ? threadsById.get(markerId) : undefined\n\t\t\t\t\t\t\t\tif (!thread) return null\n\t\t\t\t\t\t\t\tcontent = renderThreadPin(thread)\n\t\t\t\t\t\t\t} else if (stackGroup) {\n\t\t\t\t\t\t\t\t// Routed through the stack's owner so the open/orphan/held slots stay deduped:\n\t\t\t\t\t\t\t\t// when the owner is one of them, that slot draws the stack and this draws nothing.\n\t\t\t\t\t\t\t\tconst owner = stackGroup.find((id) => renderedThreadIds.has(id)) ?? null\n\t\t\t\t\t\t\t\tconst markerId = fadeNodeMarkerThreadId(node, owner, openId)\n\t\t\t\t\t\t\t\tcontent = markerId ? renderThreadPin(threadsById.get(markerId)!) : null\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tcontent = (\n\t\t\t\t\t\t\t\t\t<ClusterBadge\n\t\t\t\t\t\t\t\t\t\teditor={editor}\n\t\t\t\t\t\t\t\t\t\tnode={node}\n\t\t\t\t\t\t\t\t\t\tonExpand={expandCluster}\n\t\t\t\t\t\t\t\t\t\tonSelectThread={revealClusteredThread}\n\t\t\t\t\t\t\t\t\t\tthreadsById={threadsById}\n\t\t\t\t\t\t\t\t\t\tcurrentUserId={props.currentUserId}\n\t\t\t\t\t\t\t\t\t\tresolveAuthor={props.resolveAuthor}\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}\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={`cluster-fade:${node.id}`} className={clusterFadeClassName(phase)}>\n\t\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{orphanThreads.map((thread) => (\n\t\t\t\t\t\t\t<Fragment key={thread.id}>{renderThreadPin(thread)}</Fragment>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{heldThreads.map((thread) => (\n\t\t\t\t\t\t\t<Fragment key={thread.id}>{renderThreadPin(thread)}</Fragment>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t// Clustering off: every thread renders its own pin. The open thread is excluded and\n\t\t\t\t\t// rendered once below, or it would mount a second, stacked pin.\n\t\t\t\t\tthreads\n\t\t\t\t\t\t.filter((thread) => thread.id !== openId)\n\t\t\t\t\t\t.map((thread) => <Fragment key={thread.id}>{renderThreadPin(thread)}</Fragment>)\n\t\t\t\t)}\n\t\t\t\t{openThread && (\n\t\t\t\t\t<Fragment key={`open:${openThread.id}`}>{renderThreadPin(openThread)}</Fragment>\n\t\t\t\t)}\n\t\t\t\t<RegionDraftBox editor={editor} />\n\t\t\t\t{/* Keep the region visible while composing \u2014 the drag draft is gone by now, and no thread\n\t\t\t\t    exists yet, so the pending anchor is what shows the area under the open composer. */}\n\t\t\t\t{pending?.anchor.type === 'region' && showPendingComposer && (\n\t\t\t\t\t<RegionBox editor={editor} box={pending.anchor} />\n\t\t\t\t)}\n\t\t\t\t{pending && showPendingComposer && (\n\t\t\t\t\t<PendingComposer editor={editor} pending={pending} {...props} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</EditorPortal>\n\t)\n}\n"],
-  "mappings": "AA6EQ,SA+NH,UA/NG,KA+NH,YA/NG;AA7ER,SAAS,2BAA2B;AACpC,SAAS,YAAAA,WAAqB,aAAa,WAAW,SAAS,cAAc;AAC7E,SAAS,cAA+B,WAAW,gBAAgB;AAEnE,SAAS,sCAAsC;AAC/C,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wBAAwB;AAEjC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,eAAe,4BAA4B;AACpD,SAAS,uBAAuB;AAChC,SAAS,kBAAkB,oBAAoB,sBAAsB;AACrE,SAAS,WAAW,sBAAsB;AAC1C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAiBxB,SAAS,uBACf,MACA,YACA,QACgB;AAChB,QAAM,YACL,KAAK,UAAU,IAAI,KAAK,KAAK,cAAc,KAAK,QAAQ,SAAS,UAAU,IAAI,aAAa;AAC7F,SAAO,cAAc,SAAS,OAAO;AACtC;AAeO,SAAS,eAAe,OAA4B;AAG1D,QAAM,oBAAoB,qBAAqB;AAC/C,MAAI,CAAC,kBAAmB,QAAO;AAC/B,SAAO,oBAAC,uBAAqB,GAAG,OAAO;AACxC;AAEA,SAAS,oBAAoB,OAA0B;AACtD,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,qBAAqB;AACrC,QAAM,aAAa,kBAAkB,MAAM;AAC3C,QAAM,UAAU,kBAAkB;AAClC,QAAM,aAAa,cAAc,MAAM,aAAa;AAKpD,QAAM,oBAAoB,cAAc,QAAQ,WAAW,oBAAoB;AAC/E,QAAM,sBAAsB,WAAW,QAAQ;AAC/C,YAAU,MAAM;AACf,QAAI,WAAW,CAAC,qBAAqB;AACpC,qBAAe,IAAI,QAAQ,IAAI;AAC/B,UAAI,OAAO,KAAK,SAAS,EAAG,QAAO,eAAe,QAAQ;AAAA,IAC3D;AAAA,EACD,GAAG,CAAC,QAAQ,SAAS,mBAAmB,CAAC;AACzC,QAAM,SAAS,SAAS,kBAAkB,MAAM,aAAa,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAGlF,QAAM,eAAe,SAAS,iBAAiB,MAAM,eAAe,IAAI,MAAM,EAAE,cAAc;AAAA,IAC7F;AAAA,EACD,CAAC;AACD,QAAM,UAAU;AAAA,IACf,MAAM,WAAW,OAAO,CAAC,MAAM,gBAAgB,EAAE,YAAY,QAAQ,EAAE,OAAO,MAAM;AAAA,IACpF,CAAC,YAAY,cAAc,MAAM;AAAA,EAClC;AACA,YAAU,MAAM,+BAA+B,MAAM,GAAG,CAAC,MAAM,CAAC;AAChE,QAAM;AAAA,IACL,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,gBAAgB,QAAQ,SAAS,MAAM;AAC3C,QAAM,cAAc;AAAA,IACnB,MAAM,IAAI,IAA6B,QAAQ,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC;AAAA,IACnF,CAAC,OAAO;AAAA,EACT;AAKA,QAAM,eAAe,OAAuC,oBAAI,IAAI,CAAC;AACrE,QAAM,YAAY;AAAA,IACjB;AAAA,IACA,MAAM;AACL,YAAM,SAAS,iBAAiB,QAAQ,OAAO;AAC/C,UAAI,eAAe,aAAa,SAAS,MAAM,EAAG,QAAO,aAAa;AACtE,mBAAa,UAAU;AACvB,aAAO;AAAA,IACR;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,EACjB;AACA,QAAM,aAAa,SAAS,YAAY,IAAI,MAAM,IAAI;AACtD,QAAM,SAAS,SAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAErF,YAAU,MAAM;AACf,WAAO,MAAM;AACZ,mBAAa,IAAI,QAAQ,IAAI;AAC7B,kBAAY,IAAI,QAAQ,IAAI;AAC5B,qBAAe,IAAI,QAAQ,IAAI;AAC/B,0BAAoB,IAAI,QAAQ,IAAI;AAAA,IACrC;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAMX,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA,MAAM;AACL,YAAM,MAAM,YAAY,IAAI,MAAM;AAClC,UAAI,CAAC,IAAK,QAAO;AACjB,aAAO,CAAC,mBAAmB,QAAQ,KAAK,WAAW,WAAW;AAAA,IAC/D;AAAA,IACA,CAAC,QAAQ,WAAW,WAAW;AAAA,EAChC;AACA,YAAU,MAAM;AACf,QAAI,oBAAqB,aAAY,IAAI,QAAQ,IAAI;AAAA,EACtD,GAAG,CAAC,QAAQ,mBAAmB,CAAC;AAIhC,QAAM,wBAAwB;AAAA,IAC7B;AAAA,IACA,MAAM;AACL,YAAM,KAAK,oBAAoB,IAAI,MAAM;AACzC,UAAI,CAAC,GAAI,QAAO;AAChB,YAAM,SAAS,iBAAiB,QAAQ,EAAE;AAC1C,UAAI,CAAC,OAAQ,QAAO;AACpB,YAAM,SACL,OAAO,aAAa,YAAY,iBAAiB,QAAQ,OAAO,QAAQ,IAAI;AAC7E,aAAO,QAAQ,aAAa,mBAAmB,SAAS;AAAA,IACzD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAIA,YAAU,MAAM;AACf,QAAI,CAAC,sBAAuB;AAC5B,wBAAoB,IAAI,QAAQ,IAAI;AACpC,mBAAe,IAAI,QAAQ,KAAK;AAChC,oBAAgB,QAAQ,uBAAuB,aAAa,OAAO,mBAAmB,OAAO;AAC7F,iBAAa,IAAI,QAAQ,sBAAsB,EAAE;AAAA,EAClD,GAAG,CAAC,uBAAuB,aAAa,OAAO,mBAAmB,QAAQ,OAAO,CAAC;AAIlF,QAAM,wBAAwB;AAAA,IAC7B,CAAC,WAA4B;AAC5B;AAAA,QACC;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,mBAAa,IAAI,QAAQ,OAAO,EAAE;AAAA,IACnC;AAAA,IACA,CAAC,aAAa,OAAO,mBAAmB,QAAQ,OAAO;AAAA,EACxD;AAEA,QAAM,gBAAgB;AAAA,IACrB,CAAC,SAAsB;AACtB,yBAAmB,QAAQ,aAAa,OAAO,mBAAmB,IAAI;AAAA,IACvE;AAAA,IACA,CAAC,aAAa,OAAO,mBAAmB,MAAM;AAAA,EAC/C;AAIA,YAAU,MAAM;AACf,UAAM,YAAY,CAAC,MAAqB;AACvC,UAAI,EAAE,QAAQ,YAAY,aAAa,IAAI,MAAM,MAAM,KAAM;AAE7D,UAAI,oBAAoB,EAAG;AAC3B,YAAM,SAAS,EAAE;AACjB,UAAI,UAAU,OAAO,QAAQ,mBAAmB,EAAG;AACnD,mBAAa,IAAI,QAAQ,IAAI;AAC7B,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACnB;AACA,aAAS,iBAAiB,WAAW,WAAW,IAAI;AACpD,WAAO,MAAM,SAAS,oBAAoB,WAAW,WAAW,IAAI;AAAA,EACrE,GAAG,CAAC,MAAM,CAAC;AAIX,YAAU,MAAM;AACf,UAAM,YAAY,CAAC,MAAqB;AACvC,UAAI,EAAE,SAAS,UAAU,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,OAAQ;AAC5E,YAAM,SAAS,EAAE;AACjB,UAAI,UAAU,OAAO,QAAQ,2CAA2C,EAAG;AAC3E,2BAAqB,MAAM;AAC3B,QAAE,eAAe;AAAA,IAClB;AACA,aAAS,iBAAiB,WAAW,WAAW,IAAI;AACpD,WAAO,MAAM,SAAS,oBAAoB,WAAW,WAAW,IAAI;AAAA,EACrE,GAAG,CAAC,MAAM,CAAC;AAGX,MAAI,OAAQ,QAAO;AAKnB,QAAM,eAAe,CAAC,SAAgD;AACrE,UAAM,QAAQ,UAAU,IAAI,KAAK,QAAQ,CAAC,CAAC;AAC3C,QAAI,CAAC,MAAO,QAAO;AACnB,WAAO,KAAK,QAAQ,MAAM,CAAC,OAAO,MAAM,SAAS,EAAE,CAAC,IAAI,QAAQ;AAAA,EACjE;AAIA,QAAM,oBAAoB,oBAAI,IAAY;AAC1C,MAAI,QAAQ,kBAAkB;AAC7B,eAAW,EAAE,KAAK,KAAK,WAAW;AACjC,UAAI,KAAK,UAAU,EAAG,mBAAkB,IAAI,KAAK,EAAE;AAAA,eAG1C,aAAa,IAAI,EAAG,YAAW,MAAM,KAAK,QAAS,mBAAkB,IAAI,EAAE;AAAA,IACrF;AACA,eAAW,UAAU,cAAe,mBAAkB,IAAI,OAAO,EAAE;AACnE,eAAW,UAAU,YAAa,mBAAkB,IAAI,OAAO,EAAE;AAAA,EAClE,OAAO;AACN,eAAW,UAAU,QAAS,mBAAkB,IAAI,OAAO,EAAE;AAAA,EAC9D;AACA,MAAI,WAAY,mBAAkB,IAAI,WAAW,EAAE;AAInD,QAAM,kBAAkB,CAAC,WAAuC;AAC/D,UAAM,QAAQ,UAAU,IAAI,OAAO,EAAE;AACrC,QAAI,OAAO;AACV,YAAM,QAAQ,MAAM,KAAK,CAAC,OAAO,kBAAkB,IAAI,EAAE,CAAC;AAC1D,UAAI,UAAU,OAAO,GAAI,QAAO;AAChC,YAAM,eAAe,MACnB,IAAI,CAAC,OAAO,YAAY,IAAI,EAAE,CAAC,EAC/B,OAAO,CAAC,MAA4B,MAAM,MAAS;AACrD,aAAO,oBAAC,kBAAe,QAAgB,SAAS,cAAe,GAAG,OAAO;AAAA,IAC1E;AACA,WAAO,oBAAC,aAAU,QAAgB,QAAiB,GAAG,OAAO;AAAA,EAC9D;AAMA,SACC,oBAAC,gBAIA,+BAAC,SAAI,WAAU,yBACb;AAAA,YAAQ,mBACR,iCACE;AAAA,gBAAU,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM;AACnC,YAAI;AACJ,cAAM,aAAa,KAAK,QAAQ,IAAI,aAAa,IAAI,IAAI;AACzD,YAAI,KAAK,UAAU,GAAG;AACrB,gBAAM,WAAW,uBAAuB,MAAM,MAAM,MAAM;AAC1D,gBAAM,SAAS,WAAW,YAAY,IAAI,QAAQ,IAAI;AACtD,cAAI,CAAC,OAAQ,QAAO;AACpB,oBAAU,gBAAgB,MAAM;AAAA,QACjC,WAAW,YAAY;AAGtB,gBAAM,QAAQ,WAAW,KAAK,CAAC,OAAO,kBAAkB,IAAI,EAAE,CAAC,KAAK;AACpE,gBAAM,WAAW,uBAAuB,MAAM,OAAO,MAAM;AAC3D,oBAAU,WAAW,gBAAgB,YAAY,IAAI,QAAQ,CAAE,IAAI;AAAA,QACpE,OAAO;AACN,oBACC;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,gBAAgB;AAAA,cAChB;AAAA,cACA,eAAe,MAAM;AAAA,cACrB,eAAe,MAAM;AAAA;AAAA,UACtB;AAAA,QAEF;AACA,eACC,oBAAC,SAAoC,WAAW,qBAAqB,KAAK,GACxE,qBADQ,gBAAgB,KAAK,EAAE,EAEjC;AAAA,MAEF,CAAC;AAAA,MACA,cAAc,IAAI,CAAC,WACnB,oBAACA,WAAA,EAA0B,0BAAgB,MAAM,KAAlC,OAAO,EAA6B,CACnD;AAAA,MACA,YAAY,IAAI,CAAC,WACjB,oBAACA,WAAA,EAA0B,0BAAgB,MAAM,KAAlC,OAAO,EAA6B,CACnD;AAAA,OACF;AAAA;AAAA;AAAA,MAIA,QACE,OAAO,CAAC,WAAW,OAAO,OAAO,MAAM,EACvC,IAAI,CAAC,WAAW,oBAACA,WAAA,EAA0B,0BAAgB,MAAM,KAAlC,OAAO,EAA6B,CAAW;AAAA;AAAA,IAEhF,cACA,oBAACA,WAAA,EAAwC,0BAAgB,UAAU,KAApD,QAAQ,WAAW,EAAE,EAAiC;AAAA,IAEtE,oBAAC,kBAAe,QAAgB;AAAA,IAG/B,SAAS,OAAO,SAAS,YAAY,uBACrC,oBAAC,aAAU,QAAgB,KAAK,QAAQ,QAAQ;AAAA,IAEhD,WAAW,uBACX,oBAAC,mBAAgB,QAAgB,SAAmB,GAAG,OAAO;AAAA,KAEhE,GACD;AAEF;",
+  "sourcesContent": ["import { isMentionPickerOpen } from '@tldraw/mentions'\nimport { Fragment, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { EditorPortal, TLCommentThread, useEditor, useValue } from 'tldraw'\nimport type { ClusterNode } from '../clustering/types'\nimport { registerCommentAnchorLifecycle } from './anchor-lifecycle'\nimport { ClusterBadge } from './cluster-badge'\nimport { clusterFadeClassName } from './cluster-fade'\nimport {\n\tCLUSTER_EXPAND_ZOOM_MS,\n\trevealThreadPin,\n\tuseClusterModel,\n\tzoomToClusterSplit,\n} from './cluster-model'\nimport { getCommentRecord, getCommentThread } from './comment-store'\nimport { type CommentingContext } from './context'\nimport { useCommentThreads } from './hooks'\nimport { useCommentingEnabled } from './license'\nimport { useCanComment, useCommentingOptions } from './options'\nimport { PendingComposer } from './pending-composer'\nimport { computePinStacks, isOpenStackKeyLive, pinStacksEqual } from './pin-stacking'\nimport { RegionBox, RegionDraftBox } from './region-box'\nimport {\n\tcommentsHidden,\n\topenStackId,\n\topenThreadId,\n\tpendingComment,\n\trevealThreadRequest,\n\tsidebarFilters,\n\ttoggleCommentsHidden,\n\tusePendingComment,\n} from './state'\nimport { ThreadPin } from './thread-pin'\nimport { ThreadStackPin } from './thread-stack'\n\n/**\n * The host wiring for {@link CanvasComments} \u2014 see {@link CommentingContext}, which the sidebar\n * takes the same fields from.\n *\n * @public\n */\nexport type CanvasCommentsProps = CommentingContext\n\n/**\n * Which thread's pin a fade node should draw: its own thread for a single pin, `stackOwner` (when\n * still a member) for a coincident stack, null for neither. Never the open thread \u2014 the open-thread\n * render slot draws that one, and drawing it here too (which the fade-out window would otherwise\n * do) mounts its popover twice.\n * @internal\n */\nexport function fadeNodeMarkerThreadId(\n\tnode: ClusterNode,\n\tstackOwner: string | null,\n\topenId: string | null\n): string | null {\n\tconst candidate =\n\t\tnode.count === 1 ? node.id : stackOwner && node.members.includes(stackOwner) ? stackOwner : null\n\treturn candidate === openId ? null : candidate\n}\n\n/**\n * A ready-to-use comments layer for a tldraw canvas: pins each thread at its anchor, opens a\n * thread popover (with a reply composer) on click, and shows a composer where the comment tool\n * placed a new thread. Reads/writes comment records straight from `editor.store`.\n *\n * It's the batteries-included default: every visible piece is a slot on\n * `CommentTool.configure({ components })`, and the pieces it composes (`CommentPin`,\n * `CommentThread`, `CommentComposer`, the hooks, the tool) are all exported, so a consumer can\n * rebuild it from parts instead. The host wiring is the {@link CommentingContext}, which\n * `CanvasCommentsSidebar` takes too.\n *\n * @public @react\n */\nexport function CanvasComments(props: CanvasCommentsProps) {\n\t// The inner component holds every other hook, so mounting it as the license resolves keeps hook\n\t// order stable here.\n\tconst commentingEnabled = useCommentingEnabled()\n\tif (!commentingEnabled) return null\n\treturn <CanvasCommentsLayer {...props} />\n}\n\nfunction CanvasCommentsLayer(props: CommentingContext) {\n\tconst editor = useEditor()\n\tconst options = useCommentingOptions()\n\tconst allThreads = useCommentThreads(editor)\n\tconst pending = usePendingComment()\n\tconst canComment = useCanComment(props.currentUserId)\n\t// Nothing renders a pending comment when composing is blocked and there's no fallback slot, and\n\t// the dismiss handlers live inside PendingComposer \u2014 so clear the atom rather than strand it,\n\t// and leave the tool too: it holds while a composer is open, so staying would turn every click\n\t// into a silently swallowed placement.\n\tconst canRenderComposer = canComment || options.components.ComposerFallback != null\n\tconst showPendingComposer = pending != null && canRenderComposer\n\tuseEffect(() => {\n\t\tif (pending && !showPendingComposer) {\n\t\t\tpendingComment.set(editor, null)\n\t\t\tif (editor.isIn('comment')) editor.setCurrentTool('select')\n\t\t}\n\t}, [editor, pending, showPendingComposer])\n\tconst openId = useValue('open thread id', () => openThreadId.get(editor), [editor])\n\t// Matches the sidebar's `showResolved` filter. The open thread stays in \u2014 resolving from its own\n\t// popover shouldn't make the pin vanish under it.\n\tconst showResolved = useValue('show resolved', () => sidebarFilters.get(editor).showResolved, [\n\t\teditor,\n\t])\n\tconst threads = useMemo(\n\t\t() => allThreads.filter((t) => showResolved || t.resolved == null || t.id === openId),\n\t\t[allThreads, showResolved, openId]\n\t)\n\tuseEffect(() => registerCommentAnchorLifecycle(editor), [editor])\n\tconst {\n\t\tmodel: clusterModel,\n\t\tzoomBounds: clusterZoomBounds,\n\t\tfadeNodes,\n\t\torphanThreads,\n\t\theldThreads,\n\t} = useClusterModel(editor, threads, openId)\n\tconst threadsById = useMemo(\n\t\t() => new Map<string, TLCommentThread>(threads.map((thread) => [thread.id, thread])),\n\t\t[threads]\n\t)\n\t// Pins with the *same* anchor point coincide at every zoom, so they render as one count-badge\n\t// stack. Keyed on page-space anchors, so camera moves never recompute this. Holding the map's\n\t// identity while the grouping is unchanged keeps a reply from re-rendering every pin \u2014 but the\n\t// map has no positions in it, so anything needing a stack's *point* must read the anchors itself.\n\tconst pinStacksRef = useRef<Map<string, readonly string[]>>(new Map())\n\tconst pinStacks = useValue(\n\t\t'comment pin stacks',\n\t\t() => {\n\t\t\tconst stacks = computePinStacks(editor, threads)\n\t\t\tif (pinStacksEqual(pinStacksRef.current, stacks)) return pinStacksRef.current\n\t\t\tpinStacksRef.current = stacks\n\t\t\treturn stacks\n\t\t},\n\t\t[editor, threads]\n\t)\n\tconst openThread = openId ? threadsById.get(openId) : null\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\topenThreadId.set(editor, null)\n\t\t\topenStackId.set(editor, null)\n\t\t\tpendingComment.set(editor, null)\n\t\t\trevealThreadRequest.set(editor, null)\n\t\t}\n\t}, [editor])\n\n\t// Clear a stale open-stack key: only the stack's own mounted handlers clear it, so collapsing to\n\t// a single pin strands it \u2014 and `useMarkerPreview` reads any non-null value as \"a stack is open\"\n\t// and suppresses every hover preview. Kept while any live stack still sits at that key. Reads the\n\t// anchors rather than keying off `pinStacks`, whose identity survives a stack moving as a whole.\n\tconst openStackKeyIsStale = useValue(\n\t\t'open stack key stale',\n\t\t() => {\n\t\t\tconst key = openStackId.get(editor)\n\t\t\tif (!key) return false\n\t\t\treturn !isOpenStackKeyLive(editor, key, pinStacks, threadsById)\n\t\t},\n\t\t[editor, pinStacks, threadsById]\n\t)\n\tuseEffect(() => {\n\t\tif (openStackKeyIsStale) openStackId.set(editor, null)\n\t}, [editor, openStackKeyIsStale])\n\n\t// The requested thread, once it (and, for a comment id, its parent thread) has synced into the\n\t// store; null while records are still arriving or when no request is pending.\n\tconst requestedRevealThread = useValue(\n\t\t'requested reveal thread',\n\t\t() => {\n\t\t\tconst id = revealThreadRequest.get(editor)\n\t\t\tif (!id) return null\n\t\t\tconst record = getCommentRecord(editor, id)\n\t\t\tif (!record) return null\n\t\t\tconst thread =\n\t\t\t\trecord.typeName === 'comment' ? getCommentThread(editor, record.threadId) : record\n\t\t\treturn thread?.typeName === 'comment-thread' ? thread : null\n\t\t},\n\t\t[editor]\n\t)\n\n\t// Bring a thread's pin into view (zooming to the first cluster split that unfolds it if it's\n\t// folded into a badge) and open it.\n\tconst revealAndOpenThread = useCallback(\n\t\t(thread: TLCommentThread, duration?: number) => {\n\t\t\trevealThreadPin(editor, thread, clusterModel.table, clusterZoomBounds, options, duration)\n\t\t\topenThreadId.set(editor, thread.id)\n\t\t},\n\t\t[clusterModel.table, clusterZoomBounds, editor, options]\n\t)\n\n\t// Serve a pending reveal request. Also unhides pins: the popover opens on the layer that hiding\n\t// withholds.\n\tuseEffect(() => {\n\t\tif (!requestedRevealThread) return\n\t\trevealThreadRequest.set(editor, null)\n\t\tcommentsHidden.set(editor, false)\n\t\trevealAndOpenThread(requestedRevealThread)\n\t}, [requestedRevealThread, revealAndOpenThread, editor])\n\n\t// Picking a thread out of a cluster's hover preview. `openThreadId` alone would work, but would\n\t// cut straight there from the badge \u2014 zoom in first, the same move the badge's own click makes.\n\tconst revealClusteredThread = useCallback(\n\t\t(thread: TLCommentThread) => revealAndOpenThread(thread, CLUSTER_EXPAND_ZOOM_MS),\n\t\t[revealAndOpenThread]\n\t)\n\n\tconst expandCluster = useCallback(\n\t\t(node: ClusterNode) => {\n\t\t\tzoomToClusterSplit(editor, clusterModel.table, clusterZoomBounds, node)\n\t\t},\n\t\t[clusterModel.table, clusterZoomBounds, editor]\n\t)\n\n\t// Escape collapses the open thread. Capture-phase so it runs ahead of the editor, which would\n\t// otherwise cancel the tool or clear the selection.\n\tuseEffect(() => {\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key !== 'Escape' || openThreadId.get(editor) === null) return\n\t\t\t// The mention picker owns Escape while it's open \u2014 let it dismiss the roster alone.\n\t\t\tif (isMentionPickerOpen()) return\n\t\t\tconst target = e.target as HTMLElement | null\n\t\t\tif (target && target.closest('.tlui-cmt-editing')) return\n\t\t\topenThreadId.set(editor, null)\n\t\t\te.preventDefault()\n\t\t\te.stopPropagation()\n\t\t}\n\t\tdocument.addEventListener('keydown', onKeyDown, true)\n\t\treturn () => document.removeEventListener('keydown', onKeyDown, true)\n\t}, [editor])\n\n\t// Shift+C toggles pin visibility. Physical `KeyC` so it's layout-independent, and skipped while\n\t// typing so it never fires from inside a composer.\n\tuseEffect(() => {\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.code !== 'KeyC' || !e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return\n\t\t\tconst target = e.target as HTMLElement | null\n\t\t\tif (target && target.closest('input, textarea, [contenteditable=\"true\"]')) return\n\t\t\ttoggleCommentsHidden(editor)\n\t\t\te.preventDefault()\n\t\t}\n\t\tdocument.addEventListener('keydown', onKeyDown, true)\n\t\treturn () => document.removeEventListener('keydown', onKeyDown, true)\n\t}, [editor])\n\n\t// The signal is read above so this stays mounted and its shortcut/Escape effects keep running.\n\tif (hidden) return null\n\n\t// The node's pin-stack group when every member shares one \u2014 a stack standing on its own, which\n\t// renders as a cascading count-badge list rather than a zoom-to-split cluster badge. The group\n\t// can include an open or orphan member the node's own leaves omit.\n\tconst stackGroupOf = (node: ClusterNode): readonly string[] | null => {\n\t\tconst group = pinStacks.get(node.members[0])\n\t\tif (!group) return null\n\t\treturn node.members.every((id) => group.includes(id)) ? group : null\n\t}\n\n\t// Which threads are on screen this render. A stack renders once, owned by its first on-screen\n\t// member \u2014 members arrive by different paths, so ownership can't be decided per-path.\n\tconst renderedThreadIds = new Set<string>()\n\tif (options.enableClustering) {\n\t\tfor (const { node } of fadeNodes) {\n\t\t\tif (node.count === 1) renderedThreadIds.add(node.id)\n\t\t\t// A pure-stack node's members aren't count-1 leaves, so register them here for the owner\n\t\t\t// logic to pick from.\n\t\t\telse if (stackGroupOf(node)) for (const id of node.members) renderedThreadIds.add(id)\n\t\t}\n\t\tfor (const thread of orphanThreads) renderedThreadIds.add(thread.id)\n\t\tfor (const thread of heldThreads) renderedThreadIds.add(thread.id)\n\t} else {\n\t\tfor (const thread of threads) renderedThreadIds.add(thread.id)\n\t}\n\tif (openThread) renderedThreadIds.add(openThread.id)\n\n\t// A coincident-stack member renders as the group's single count-badge stack (if it owns it)\n\t// or not at all; everything else is an ordinary pin.\n\tconst renderThreadPin = (thread: TLCommentThread): ReactNode => {\n\t\tconst group = pinStacks.get(thread.id)\n\t\tif (group) {\n\t\t\tconst owner = group.find((id) => renderedThreadIds.has(id))\n\t\t\tif (owner !== thread.id) return null\n\t\t\tconst stackThreads = group\n\t\t\t\t.map((id) => threadsById.get(id))\n\t\t\t\t.filter((t): t is TLCommentThread => t !== undefined)\n\t\t\treturn <ThreadStackPin editor={editor} threads={stackThreads} {...props} />\n\t\t}\n\t\treturn <ThreadPin editor={editor} thread={thread} {...props} />\n\t}\n\n\t// Portalled rather than rendered into this component's slot: pins sit below the collaborator\n\t// cursors and popovers above the UI panels, and no single canvas layer spans both. The portal\n\t// also fixes where the layer lands among the container's children, keeping it behind the UI's\n\t// skip link in the tab order.\n\treturn (\n\t\t<EditorPortal>\n\t\t\t{/* Wheel pass-through lives on each interactive element, not this root: the root spans the\n\t\t\t    whole canvas, so a pin past its bottom/right edge inflates scrollHeight and the wheel\n\t\t\t    hook's is-this-scrollable guard silently disables pass-through. */}\n\t\t\t<div className=\"tlui-cmt-canvas-layer\">\n\t\t\t\t{options.enableClustering ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{fadeNodes.map(({ node, phase }) => {\n\t\t\t\t\t\t\tlet content: ReactNode\n\t\t\t\t\t\t\tconst stackGroup = node.count > 1 ? stackGroupOf(node) : null\n\t\t\t\t\t\t\tif (node.count === 1) {\n\t\t\t\t\t\t\t\tconst markerId = fadeNodeMarkerThreadId(node, null, openId)\n\t\t\t\t\t\t\t\tconst thread = markerId ? threadsById.get(markerId) : undefined\n\t\t\t\t\t\t\t\tif (!thread) return null\n\t\t\t\t\t\t\t\tcontent = renderThreadPin(thread)\n\t\t\t\t\t\t\t} else if (stackGroup) {\n\t\t\t\t\t\t\t\t// Routed through the stack's owner so the open/orphan/held slots stay deduped:\n\t\t\t\t\t\t\t\t// when the owner is one of them, that slot draws the stack and this draws nothing.\n\t\t\t\t\t\t\t\tconst owner = stackGroup.find((id) => renderedThreadIds.has(id)) ?? null\n\t\t\t\t\t\t\t\tconst markerId = fadeNodeMarkerThreadId(node, owner, openId)\n\t\t\t\t\t\t\t\tcontent = markerId ? renderThreadPin(threadsById.get(markerId)!) : null\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tcontent = (\n\t\t\t\t\t\t\t\t\t<ClusterBadge\n\t\t\t\t\t\t\t\t\t\teditor={editor}\n\t\t\t\t\t\t\t\t\t\tnode={node}\n\t\t\t\t\t\t\t\t\t\tonExpand={expandCluster}\n\t\t\t\t\t\t\t\t\t\tonSelectThread={revealClusteredThread}\n\t\t\t\t\t\t\t\t\t\tthreadsById={threadsById}\n\t\t\t\t\t\t\t\t\t\tcurrentUserId={props.currentUserId}\n\t\t\t\t\t\t\t\t\t\tresolveAuthor={props.resolveAuthor}\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}\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={`cluster-fade:${node.id}`} className={clusterFadeClassName(phase)}>\n\t\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{orphanThreads.map((thread) => (\n\t\t\t\t\t\t\t<Fragment key={thread.id}>{renderThreadPin(thread)}</Fragment>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{heldThreads.map((thread) => (\n\t\t\t\t\t\t\t<Fragment key={thread.id}>{renderThreadPin(thread)}</Fragment>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t// Clustering off: every thread renders its own pin. The open thread is excluded and\n\t\t\t\t\t// rendered once below, or it would mount a second, stacked pin.\n\t\t\t\t\tthreads\n\t\t\t\t\t\t.filter((thread) => thread.id !== openId)\n\t\t\t\t\t\t.map((thread) => <Fragment key={thread.id}>{renderThreadPin(thread)}</Fragment>)\n\t\t\t\t)}\n\t\t\t\t{openThread && (\n\t\t\t\t\t<Fragment key={`open:${openThread.id}`}>{renderThreadPin(openThread)}</Fragment>\n\t\t\t\t)}\n\t\t\t\t<RegionDraftBox editor={editor} />\n\t\t\t\t{/* Keep the region visible while composing \u2014 the drag draft is gone by now, and no thread\n\t\t\t\t    exists yet, so the pending anchor is what shows the area under the open composer. */}\n\t\t\t\t{pending?.anchor.type === 'region' && showPendingComposer && (\n\t\t\t\t\t<RegionBox editor={editor} box={pending.anchor} />\n\t\t\t\t)}\n\t\t\t\t{pending && showPendingComposer && (\n\t\t\t\t\t<PendingComposer editor={editor} pending={pending} {...props} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</EditorPortal>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["Fragment"]
 }

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

@@ -1,16 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import {
-  EditorPortal,
-  useEditor,
-  useTranslation,
-  useValue
-} from "tldraw";
+import { EditorPortal, useEditor, useTranslation, useValue } from "tldraw";
 import { CommentsList } from "../ui/comments-list.mjs";
 import { UNKNOWN_COMMENT_AUTHOR } from "./comment-render.mjs";
 import { CommentsFilterMenu } from "./comments-filter-menu.mjs";
 import { CommentsVisibilityToggle } from "./comments-visibility-toggle.mjs";
-import { useComments, useCommentThreads } from "./hooks.mjs";
+import { getCommentsByThread, useCommentThreads } from "./hooks.mjs";
 import { useCommentingEnabled } from "./license.mjs";
 import { useCommentingOptions } from "./options.mjs";
 import { richTextToPlaintext } from "./rich-text.mjs";
@@ -24,7 +19,7 @@ function CanvasCommentsSidebar(props) {
   const commentingEnabled = useCommentingEnabled();
   const msg = useTranslation();
   const threads = useCommentThreads(editor);
-  const comments = useComments(editor);
+  const byThread = useValue("comments by thread", () => getCommentsByThread(editor).get(), [editor]);
   const currentPageId = useValue("page id", () => editor.getCurrentPageId(), [editor]);
   const open = useValue("sidebar open", () => commentsSidebarOpen.get(editor), [editor]);
   const openId = useValue("open thread", () => openThreadId.get(editor), [editor]);
@@ -35,12 +30,6 @@ function CanvasCommentsSidebar(props) {
     [editor]
   );
   if (!commentingEnabled || !open) return null;
-  const byThread = /* @__PURE__ */ new Map();
-  for (const comment of comments) {
-    const list = byThread.get(comment.threadId) ?? [];
-    list.push(comment);
-    byThread.set(comment.threadId, list);
-  }
   const pageThreads = threads.filter(
     (thread) => !filters.onlyCurrentPage || thread.pageId === currentPageId
   );

package/dist-esm/canvas/comments-sidebar.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comments-sidebar.tsx"],
-  "sourcesContent": ["import { ReactNode, useCallback } from 'react'\nimport {\n\tEditorPortal,\n\tTLComment,\n\tTLCommentThread,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { CommentListItemProps, CommentListItemRenderProps, CommentsList } from '../ui/comments-list'\nimport { UNKNOWN_COMMENT_AUTHOR } from './comment-render'\nimport { CommentsFilterMenu } from './comments-filter-menu'\nimport { CommentsVisibilityToggle } from './comments-visibility-toggle'\nimport { type CommentingContext } from './context'\nimport { useComments, useCommentThreads } from './hooks'\nimport { useCommentingEnabled } from './license'\nimport { useCommentingOptions } from './options'\nimport { richTextToPlaintext } from './rich-text'\nimport { commentsSidebarOpen, openThreadId, sidebarFilters } from './state'\nimport { focusThread } from './thread-state'\n\n/**\n * The host wiring for {@link CanvasCommentsSidebar}: the {@link CommentingContext} fields it reads,\n * plus the panel's own slots. A non-null `currentUserId` enables the \"only your threads\" filter, and\n * an `isCommentUnread` the \"only unread\" one. `CanvasComments` takes the same fields, so a host\n * mounting both can spread one object into each.\n *\n * @public\n */\nexport interface CanvasCommentsSidebarProps extends Pick<\n\tCommentingContext,\n\t'currentUserId' | 'resolveAuthor' | 'isCommentUnread' | 'getThreadHref'\n> {\n\t/** Header above the list. */\n\theader?: ReactNode\n\t/** Shown when the page has no threads. */\n\tempty?: ReactNode\n}\n\n/**\n * A comments list panel for the current page, shown while {@link commentsSidebarOpen} is set (e.g.\n * toggled by a button). Clicking a thread brings its pin into view and opens it. Batteries-included\n * over the store (a sibling to `CanvasComments`); `CommentsList` is exported for a differently-placed\n * or always-on list.\n * @public @react\n */\nexport function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {\n\tconst { resolveAuthor, currentUserId, isCommentUnread, header, empty, getThreadHref } = props\n\t// Name-only view of the resolver, for the plaintext previews (which resolve @-mentions).\n\tconst resolveName = useCallback((id: string) => resolveAuthor(id)?.name, [resolveAuthor])\n\tconst editor = useEditor()\n\tconst options = useCommentingOptions()\n\tconst commentingEnabled = useCommentingEnabled()\n\tconst msg = useTranslation()\n\tconst threads = useCommentThreads(editor)\n\tconst comments = useComments(editor)\n\tconst currentPageId = useValue('page id', () => editor.getCurrentPageId(), [editor])\n\tconst open = useValue('sidebar open', () => commentsSidebarOpen.get(editor), [editor])\n\tconst openId = useValue('open thread', () => openThreadId.get(editor), [editor])\n\tconst filters = useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n\tconst pageNames = useValue(\n\t\t'page names',\n\t\t() => new Map(editor.getPages().map((page) => [page.id, page.name])),\n\t\t[editor]\n\t)\n\n\tif (!commentingEnabled || !open) return null\n\n\t// Group comments by thread (they arrive oldest-first, so [0] is each thread's first comment).\n\tconst byThread = new Map<string, TLComment[]>()\n\tfor (const comment of comments) {\n\t\tconst list = byThread.get(comment.threadId) ?? []\n\t\tlist.push(comment)\n\t\tbyThread.set(comment.threadId, list)\n\t}\n\n\t// Page scoping is treated as scoping, not a filter: an empty page reads \"no comments yet\",\n\t// while a list emptied by the toggles below reads \"nothing matches your filters\".\n\tconst pageThreads = threads.filter(\n\t\t(thread) => !filters.onlyCurrentPage || thread.pageId === currentPageId\n\t)\n\n\tconst rows: SidebarRow[] = pageThreads\n\t\t.filter((thread) => filters.showResolved || thread.resolved == null)\n\t\t// \"Only mine\" is ignored without a known user \u2014 otherwise a persisted onlyMine=true would\n\t\t// empty the list for a signed-out viewer, with the (hidden) toggle giving no way to clear it.\n\t\t.filter(\n\t\t\t(thread) => !filters.onlyMine || currentUserId === null || thread.createdBy === currentUserId\n\t\t)\n\t\t// \"Only unread\" is likewise ignored without a read-status source.\n\t\t.filter(\n\t\t\t(thread) =>\n\t\t\t\t!filters.onlyUnread ||\n\t\t\t\tisCommentUnread === undefined ||\n\t\t\t\t(byThread.get(thread.id) ?? []).some((c) => isCommentUnread(c.id))\n\t\t)\n\t\t.map((thread) => {\n\t\t\tconst threadComments = byThread.get(thread.id) ?? []\n\t\t\tconst first = threadComments[0]\n\t\t\t// Comments arrive oldest-first, so the last one is the thread's most recent activity.\n\t\t\tconst last = threadComments[threadComments.length - 1]\n\t\t\tlet preview: ReactNode = ''\n\t\t\t// The `ThreadPreview` component slot overrides the built-in plaintext default.\n\t\t\tconst ThreadPreview = options.components.ThreadPreview\n\t\t\tif (first) {\n\t\t\t\tpreview = ThreadPreview ? (\n\t\t\t\t\t<ThreadPreview comment={first} />\n\t\t\t\t) : (\n\t\t\t\t\trichTextToPlaintext(first.body, resolveName)\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn {\n\t\t\t\titem: {\n\t\t\t\t\tid: thread.id,\n\t\t\t\t\tauthor: resolveAuthor(thread.createdBy) ?? UNKNOWN_COMMENT_AUTHOR,\n\t\t\t\t\tpreview,\n\t\t\t\t\tdate: new Date((first ?? thread).createdAt).toISOString(),\n\t\t\t\t\tresolved: thread.resolved != null,\n\t\t\t\t\t// The page label only earns its place when it adds information: multiple pages\n\t\t\t\t\t// exist, and the thread is somewhere other than where you already are.\n\t\t\t\t\tpage:\n\t\t\t\t\t\tpageNames.size > 1 && thread.pageId !== currentPageId\n\t\t\t\t\t\t\t? pageNames.get(thread.pageId)\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\tcount: threadComments.length,\n\t\t\t\t\tselected: openId === thread.id,\n\t\t\t\t\thref: getThreadHref?.(thread.id),\n\t\t\t\t},\n\t\t\t\tlastActivity: (last ?? thread).createdAt,\n\t\t\t}\n\t\t})\n\n\tconst items = sortSidebarRows(rows).map((row) => row.item)\n\n\tconst focus = (id: string) => {\n\t\tconst thread = threads.find((t) => t.id === id)\n\t\tif (thread) focusThread(editor, thread)\n\t}\n\n\t// The `ThreadRow` component slot overrides the built-in row. It gets the thread record alongside\n\t// the summarized row, so host state on `thread.meta` is in reach without a second lookup. Indexed\n\t// once rather than scanned per row \u2014 this runs for every row on every render of the panel.\n\tconst ThreadRow = options.components.ThreadRow\n\tconst renderItem = ThreadRow\n\t\t? (() => {\n\t\t\t\t// Keyed by plain string: a row's id comes back as one, not as a branded thread id.\n\t\t\t\tconst threadsById = new Map<string, TLCommentThread>(\n\t\t\t\t\tthreads.map((thread) => [thread.id, thread])\n\t\t\t\t)\n\t\t\t\treturn (rowProps: CommentListItemRenderProps) => {\n\t\t\t\t\tconst thread = threadsById.get(rowProps.id)\n\t\t\t\t\t// Can't happen \u2014 the items are built from these threads \u2014 but a row with no thread has\n\t\t\t\t\t// nothing to render, and the slot's contract says the record is there.\n\t\t\t\t\tif (!thread) return null\n\t\t\t\t\treturn <ThreadRow {...rowProps} thread={thread} />\n\t\t\t\t}\n\t\t\t})()\n\t\t: undefined\n\n\treturn (\n\t\t<SidebarPanel>\n\t\t\t<CommentsList\n\t\t\t\titems={items}\n\t\t\t\theader={header ?? msg('comments.title')}\n\t\t\t\theaderAction={\n\t\t\t\t\t<div className=\"tlui-cmt-list__header-actions\">\n\t\t\t\t\t\t<CommentsFilterMenu\n\t\t\t\t\t\t\tcanFilterByAuthor={currentUserId !== null}\n\t\t\t\t\t\t\tcanFilterByUnread={isCommentUnread !== undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<CommentsVisibilityToggle />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\tempty={\n\t\t\t\t\titems.length === 0 && pageThreads.length > 0\n\t\t\t\t\t\t? msg('comments.empty-filtered')\n\t\t\t\t\t\t: (empty ?? msg('comments.empty'))\n\t\t\t\t}\n\t\t\t\tresolvedLabel={msg('comments.resolved')}\n\t\t\t\tonSelect={focus}\n\t\t\t\trenderItem={renderItem}\n\t\t\t/>\n\t\t</SidebarPanel>\n\t)\n}\n\n/** A list row paired with the sort key that isn't part of what the row displays. @public */\nexport interface SidebarRow {\n\titem: CommentListItemProps\n\t/** When the thread's most recent comment was posted \u2014 what the list orders by. */\n\tlastActivity: number\n}\n\n/**\n * Order the list: unresolved threads first, then by most recent activity, id as a stable tiebreak.\n * Recency is the thread's *latest* comment, not its first, so a thread someone just replied to rises\n * to the top instead of staying wherever it was started. (The row still shows the thread's opening\n * comment and its date \u2014 that's what identifies the thread; only the ordering follows the replies.)\n *\n * Exported so a hand-built list can match the sidebar's ordering instead of re-deriving it.\n *\n * @public\n */\nexport function sortSidebarRows(rows: readonly SidebarRow[]): readonly SidebarRow[] {\n\treturn [...rows].sort(\n\t\t(a, b) =>\n\t\t\tNumber(!!a.item.resolved) - Number(!!b.item.resolved) ||\n\t\t\tb.lastActivity - a.lastActivity ||\n\t\t\t(a.item.id < b.item.id ? -1 : 1)\n\t)\n}\n\n/** The sidebar surface, portaled into the container. It scrolls its own list, so \u2014 unlike tldraw's\n *  wheel-transparent panels \u2014 a wheel over it doesn't pan the canvas. */\nfunction SidebarPanel({ children }: { children: ReactNode }) {\n\treturn (\n\t\t<EditorPortal>\n\t\t\t<div className=\"tlui-cmt-canvas-sidebar\" onContextMenu={(e) => e.stopPropagation()}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</EditorPortal>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { ReactNode, useCallback } from 'react'\nimport { EditorPortal, TLCommentThread, useEditor, useTranslation, useValue } from 'tldraw'\nimport { CommentListItemProps, CommentListItemRenderProps, CommentsList } from '../ui/comments-list'\nimport { UNKNOWN_COMMENT_AUTHOR } from './comment-render'\nimport { CommentsFilterMenu } from './comments-filter-menu'\nimport { CommentsVisibilityToggle } from './comments-visibility-toggle'\nimport { type CommentingContext } from './context'\nimport { getCommentsByThread, useCommentThreads } from './hooks'\nimport { useCommentingEnabled } from './license'\nimport { useCommentingOptions } from './options'\nimport { richTextToPlaintext } from './rich-text'\nimport { commentsSidebarOpen, openThreadId, sidebarFilters } from './state'\nimport { focusThread } from './thread-state'\n\n/**\n * The host wiring for {@link CanvasCommentsSidebar}: the {@link CommentingContext} fields it reads,\n * plus the panel's own slots. A non-null `currentUserId` enables the \"only your threads\" filter, and\n * an `isCommentUnread` the \"only unread\" one. `CanvasComments` takes the same fields, so a host\n * mounting both can spread one object into each.\n *\n * @public\n */\nexport interface CanvasCommentsSidebarProps extends Pick<\n\tCommentingContext,\n\t'currentUserId' | 'resolveAuthor' | 'isCommentUnread' | 'getThreadHref'\n> {\n\t/** Header above the list. */\n\theader?: ReactNode\n\t/** Shown when the page has no threads. */\n\tempty?: ReactNode\n}\n\n/**\n * A comments list panel for the current page, shown while {@link commentsSidebarOpen} is set (e.g.\n * toggled by a button). Clicking a thread brings its pin into view and opens it. Batteries-included\n * over the store (a sibling to `CanvasComments`); `CommentsList` is exported for a differently-placed\n * or always-on list.\n * @public @react\n */\nexport function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {\n\tconst { resolveAuthor, currentUserId, isCommentUnread, header, empty, getThreadHref } = props\n\t// Name-only view of the resolver, for the plaintext previews (which resolve @-mentions).\n\tconst resolveName = useCallback((id: string) => resolveAuthor(id)?.name, [resolveAuthor])\n\tconst editor = useEditor()\n\tconst options = useCommentingOptions()\n\tconst commentingEnabled = useCommentingEnabled()\n\tconst msg = useTranslation()\n\tconst threads = useCommentThreads(editor)\n\tconst byThread = useValue('comments by thread', () => getCommentsByThread(editor).get(), [editor])\n\tconst currentPageId = useValue('page id', () => editor.getCurrentPageId(), [editor])\n\tconst open = useValue('sidebar open', () => commentsSidebarOpen.get(editor), [editor])\n\tconst openId = useValue('open thread', () => openThreadId.get(editor), [editor])\n\tconst filters = useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n\tconst pageNames = useValue(\n\t\t'page names',\n\t\t() => new Map(editor.getPages().map((page) => [page.id, page.name])),\n\t\t[editor]\n\t)\n\n\tif (!commentingEnabled || !open) return null\n\n\t// Page scoping is treated as scoping, not a filter: an empty page reads \"no comments yet\",\n\t// while a list emptied by the toggles below reads \"nothing matches your filters\".\n\tconst pageThreads = threads.filter(\n\t\t(thread) => !filters.onlyCurrentPage || thread.pageId === currentPageId\n\t)\n\n\tconst rows: SidebarRow[] = pageThreads\n\t\t.filter((thread) => filters.showResolved || thread.resolved == null)\n\t\t// \"Only mine\" is ignored without a known user \u2014 otherwise a persisted onlyMine=true would\n\t\t// empty the list for a signed-out viewer, with the (hidden) toggle giving no way to clear it.\n\t\t.filter(\n\t\t\t(thread) => !filters.onlyMine || currentUserId === null || thread.createdBy === currentUserId\n\t\t)\n\t\t// \"Only unread\" is likewise ignored without a read-status source.\n\t\t.filter(\n\t\t\t(thread) =>\n\t\t\t\t!filters.onlyUnread ||\n\t\t\t\tisCommentUnread === undefined ||\n\t\t\t\t(byThread.get(thread.id) ?? []).some((c) => isCommentUnread(c.id))\n\t\t)\n\t\t.map((thread) => {\n\t\t\tconst threadComments = byThread.get(thread.id) ?? []\n\t\t\tconst first = threadComments[0]\n\t\t\t// Comments arrive oldest-first, so the last one is the thread's most recent activity.\n\t\t\tconst last = threadComments[threadComments.length - 1]\n\t\t\tlet preview: ReactNode = ''\n\t\t\t// The `ThreadPreview` component slot overrides the built-in plaintext default.\n\t\t\tconst ThreadPreview = options.components.ThreadPreview\n\t\t\tif (first) {\n\t\t\t\tpreview = ThreadPreview ? (\n\t\t\t\t\t<ThreadPreview comment={first} />\n\t\t\t\t) : (\n\t\t\t\t\trichTextToPlaintext(first.body, resolveName)\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn {\n\t\t\t\titem: {\n\t\t\t\t\tid: thread.id,\n\t\t\t\t\tauthor: resolveAuthor(thread.createdBy) ?? UNKNOWN_COMMENT_AUTHOR,\n\t\t\t\t\tpreview,\n\t\t\t\t\tdate: new Date((first ?? thread).createdAt).toISOString(),\n\t\t\t\t\tresolved: thread.resolved != null,\n\t\t\t\t\t// The page label only earns its place when it adds information: multiple pages\n\t\t\t\t\t// exist, and the thread is somewhere other than where you already are.\n\t\t\t\t\tpage:\n\t\t\t\t\t\tpageNames.size > 1 && thread.pageId !== currentPageId\n\t\t\t\t\t\t\t? pageNames.get(thread.pageId)\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\tcount: threadComments.length,\n\t\t\t\t\tselected: openId === thread.id,\n\t\t\t\t\thref: getThreadHref?.(thread.id),\n\t\t\t\t},\n\t\t\t\tlastActivity: (last ?? thread).createdAt,\n\t\t\t}\n\t\t})\n\n\tconst items = sortSidebarRows(rows).map((row) => row.item)\n\n\tconst focus = (id: string) => {\n\t\tconst thread = threads.find((t) => t.id === id)\n\t\tif (thread) focusThread(editor, thread)\n\t}\n\n\t// The `ThreadRow` component slot overrides the built-in row. It gets the thread record alongside\n\t// the summarized row, so host state on `thread.meta` is in reach without a second lookup. Indexed\n\t// once rather than scanned per row \u2014 this runs for every row on every render of the panel.\n\tconst ThreadRow = options.components.ThreadRow\n\tconst renderItem = ThreadRow\n\t\t? (() => {\n\t\t\t\t// Keyed by plain string: a row's id comes back as one, not as a branded thread id.\n\t\t\t\tconst threadsById = new Map<string, TLCommentThread>(\n\t\t\t\t\tthreads.map((thread) => [thread.id, thread])\n\t\t\t\t)\n\t\t\t\treturn (rowProps: CommentListItemRenderProps) => {\n\t\t\t\t\tconst thread = threadsById.get(rowProps.id)\n\t\t\t\t\t// Can't happen \u2014 the items are built from these threads \u2014 but a row with no thread has\n\t\t\t\t\t// nothing to render, and the slot's contract says the record is there.\n\t\t\t\t\tif (!thread) return null\n\t\t\t\t\treturn <ThreadRow {...rowProps} thread={thread} />\n\t\t\t\t}\n\t\t\t})()\n\t\t: undefined\n\n\treturn (\n\t\t<SidebarPanel>\n\t\t\t<CommentsList\n\t\t\t\titems={items}\n\t\t\t\theader={header ?? msg('comments.title')}\n\t\t\t\theaderAction={\n\t\t\t\t\t<div className=\"tlui-cmt-list__header-actions\">\n\t\t\t\t\t\t<CommentsFilterMenu\n\t\t\t\t\t\t\tcanFilterByAuthor={currentUserId !== null}\n\t\t\t\t\t\t\tcanFilterByUnread={isCommentUnread !== undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<CommentsVisibilityToggle />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\tempty={\n\t\t\t\t\titems.length === 0 && pageThreads.length > 0\n\t\t\t\t\t\t? msg('comments.empty-filtered')\n\t\t\t\t\t\t: (empty ?? msg('comments.empty'))\n\t\t\t\t}\n\t\t\t\tresolvedLabel={msg('comments.resolved')}\n\t\t\t\tonSelect={focus}\n\t\t\t\trenderItem={renderItem}\n\t\t\t/>\n\t\t</SidebarPanel>\n\t)\n}\n\n/** A list row paired with the sort key that isn't part of what the row displays. @public */\nexport interface SidebarRow {\n\titem: CommentListItemProps\n\t/** When the thread's most recent comment was posted \u2014 what the list orders by. */\n\tlastActivity: number\n}\n\n/**\n * Order the list: unresolved threads first, then by most recent activity, id as a stable tiebreak.\n * Recency is the thread's *latest* comment, not its first, so a thread someone just replied to rises\n * to the top instead of staying wherever it was started. (The row still shows the thread's opening\n * comment and its date \u2014 that's what identifies the thread; only the ordering follows the replies.)\n *\n * Exported so a hand-built list can match the sidebar's ordering instead of re-deriving it.\n *\n * @public\n */\nexport function sortSidebarRows(rows: readonly SidebarRow[]): readonly SidebarRow[] {\n\treturn [...rows].sort(\n\t\t(a, b) =>\n\t\t\tNumber(!!a.item.resolved) - Number(!!b.item.resolved) ||\n\t\t\tb.lastActivity - a.lastActivity ||\n\t\t\t(a.item.id < b.item.id ? -1 : 1)\n\t)\n}\n\n/** The sidebar surface, portaled into the container. It scrolls its own list, so \u2014 unlike tldraw's\n *  wheel-transparent panels \u2014 a wheel over it doesn't pan the canvas. */\nfunction SidebarPanel({ children }: { children: ReactNode }) {\n\treturn (\n\t\t<EditorPortal>\n\t\t\t<div className=\"tlui-cmt-canvas-sidebar\" onContextMenu={(e) => e.stopPropagation()}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</EditorPortal>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/canvas/hooks.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/hooks.ts"],
-  "sourcesContent": ["import {\n\tcomputed,\n\tComputed,\n\tEditor,\n\tisUninitialized,\n\tTLComment,\n\tTLCommentThread,\n\tTLCommentThreadId,\n\tuseValue,\n\tWeakCache,\n} from 'tldraw'\nimport { getLiveComments, getLiveCommentThreads } from './comment-store'\n\n/**\n * The comment threads that should render (pins, sidebar), reactively \u2014 the live set described by\n * {@link getLiveCommentThreads}. Use `getCommentThreads` for the unfiltered set, including\n * soft-deleted threads awaiting the server's prune.\n *\n * @public\n */\nexport function useCommentThreads(editor: Editor): TLCommentThread[] {\n\treturn useValue('comment threads', () => getLiveCommentThreads(editor), [editor])\n}\n\n/**\n * Every live comment grouped by thread, oldest first within each thread. One computed shared by\n * every mounted thread: each `useThreadComments` would otherwise scan and sort the whole comment\n * set, so N open threads did N full passes on every comment mutation. Cached per editor so the\n * grouping survives re-renders and is rebuilt only when the comment set actually changes.\n */\nconst commentsByThread = new WeakCache<Editor, Computed<Map<TLCommentThreadId, TLComment[]>>>()\n\n/** Exported for tests; use {@link useThreadComments} to consume. @internal */\nexport function getCommentsByThread(editor: Editor) {\n\treturn commentsByThread.get(editor, () =>\n\t\tcomputed('comments by thread', (prev) => {\n\t\t\tconst byThread = new Map<TLCommentThreadId, TLComment[]>()\n\t\t\tfor (const comment of getLiveComments(editor)) {\n\t\t\t\tconst existing = byThread.get(comment.threadId)\n\t\t\t\tif (existing) existing.push(comment)\n\t\t\t\telse byThread.set(comment.threadId, [comment])\n\t\t\t}\n\t\t\tfor (const [threadId, comments] of byThread) {\n\t\t\t\tcomments.sort((a, b) => a.createdAt - b.createdAt)\n\t\t\t\t// Reuse the previous per-thread array when that thread's comment list is unchanged\n\t\t\t\t// (record identities are stable while unchanged), so `useThreadComments` subscribers\n\t\t\t\t// on other threads don't re-render when one thread gains a reply.\n\t\t\t\tif (isUninitialized(prev)) continue\n\t\t\t\tconst prevComments = prev.get(threadId)\n\t\t\t\tif (\n\t\t\t\t\tprevComments &&\n\t\t\t\t\tprevComments.length === comments.length &&\n\t\t\t\t\tcomments.every((comment, i) => prevComments[i] === comment)\n\t\t\t\t) {\n\t\t\t\t\tbyThread.set(threadId, prevComments)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn byThread\n\t\t})\n\t)\n}\n\n/** A thread's live comments, oldest first, reactively. @public */\nexport function useThreadComments(editor: Editor, threadId: TLCommentThreadId): TLComment[] {\n\treturn useValue(\n\t\t'thread comments',\n\t\t() => getCommentsByThread(editor).get().get(threadId) ?? EMPTY_COMMENTS,\n\t\t[editor, threadId]\n\t)\n}\n\n/** Shared empty result so a thread with no comments doesn't churn referential equality. */\nconst EMPTY_COMMENTS: TLComment[] = []\n\n/** Every live comment in the store ({@link getLiveComments}), oldest first, reactively. Group by\n *  `threadId` for per-thread lists. @public */\nexport function useComments(editor: Editor): TLComment[] {\n\treturn useValue(\n\t\t'all comments',\n\t\t() => getLiveComments(editor).sort((a, b) => a.createdAt - b.createdAt),\n\t\t[editor]\n\t)\n}\n"],
+  "sourcesContent": ["import {\n\tcomputed,\n\tComputed,\n\tEditor,\n\tisUninitialized,\n\tTLComment,\n\tTLCommentThread,\n\tTLCommentThreadId,\n\tuseValue,\n\tWeakCache,\n} from 'tldraw'\nimport { getLiveComments, getLiveCommentThreads } from './comment-store'\n\n/**\n * The comment threads that should render (pins, sidebar), reactively \u2014 the live set described by\n * {@link getLiveCommentThreads}. Use `getCommentThreads` for the unfiltered set, including\n * soft-deleted threads awaiting the server's prune.\n *\n * @public\n */\nexport function useCommentThreads(editor: Editor): TLCommentThread[] {\n\treturn useValue('comment threads', () => getLiveCommentThreads(editor), [editor])\n}\n\n/**\n * Every live comment grouped by thread, oldest first within each thread. One computed shared by\n * every mounted thread: each `useThreadComments` would otherwise scan and sort the whole comment\n * set, so N open threads did N full passes on every comment mutation. Cached per editor so the\n * grouping survives re-renders and is rebuilt only when the comment set actually changes.\n */\nconst commentsByThread = new WeakCache<Editor, Computed<Map<TLCommentThreadId, TLComment[]>>>()\n\n/** Live comments grouped by thread id, cached per editor. @internal */\nexport function getCommentsByThread(editor: Editor) {\n\treturn commentsByThread.get(editor, () =>\n\t\tcomputed('comments by thread', (prev) => {\n\t\t\tconst byThread = new Map<TLCommentThreadId, TLComment[]>()\n\t\t\tfor (const comment of getLiveComments(editor)) {\n\t\t\t\tconst existing = byThread.get(comment.threadId)\n\t\t\t\tif (existing) existing.push(comment)\n\t\t\t\telse byThread.set(comment.threadId, [comment])\n\t\t\t}\n\t\t\tfor (const [threadId, comments] of byThread) {\n\t\t\t\tcomments.sort((a, b) => a.createdAt - b.createdAt)\n\t\t\t\t// Reuse the previous per-thread array when that thread's comment list is unchanged\n\t\t\t\t// (record identities are stable while unchanged), so `useThreadComments` subscribers\n\t\t\t\t// on other threads don't re-render when one thread gains a reply.\n\t\t\t\tif (isUninitialized(prev)) continue\n\t\t\t\tconst prevComments = prev.get(threadId)\n\t\t\t\tif (\n\t\t\t\t\tprevComments &&\n\t\t\t\t\tprevComments.length === comments.length &&\n\t\t\t\t\tcomments.every((comment, i) => prevComments[i] === comment)\n\t\t\t\t) {\n\t\t\t\t\tbyThread.set(threadId, prevComments)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn byThread\n\t\t})\n\t)\n}\n\n/** A thread's live comments, oldest first, reactively. @public */\nexport function useThreadComments(editor: Editor, threadId: TLCommentThreadId): TLComment[] {\n\treturn useValue(\n\t\t'thread comments',\n\t\t() => getCommentsByThread(editor).get().get(threadId) ?? EMPTY_COMMENTS,\n\t\t[editor, threadId]\n\t)\n}\n\n/** Shared empty result so a thread with no comments doesn't churn referential equality. */\nconst EMPTY_COMMENTS: TLComment[] = []\n\n/** Every live comment in the store ({@link getLiveComments}), oldest first, reactively. Group by\n *  `threadId` for per-thread lists. @public */\nexport function useComments(editor: Editor): TLComment[] {\n\treturn useValue(\n\t\t'all comments',\n\t\t() => getLiveComments(editor).sort((a, b) => a.createdAt - b.createdAt),\n\t\t[editor]\n\t)\n}\n"],
   "mappings": "AAAA;AAAA,EACC;AAAA,EAGA;AAAA,EAIA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,6BAA6B;AAShD,SAAS,kBAAkB,QAAmC;AACpE,SAAO,SAAS,mBAAmB,MAAM,sBAAsB,MAAM,GAAG,CAAC,MAAM,CAAC;AACjF;AAQA,MAAM,mBAAmB,IAAI,UAAiE;AAGvF,SAAS,oBAAoB,QAAgB;AACnD,SAAO,iBAAiB;AAAA,IAAI;AAAA,IAAQ,MACnC,SAAS,sBAAsB,CAAC,SAAS;AACxC,YAAM,WAAW,oBAAI,IAAoC;AACzD,iBAAW,WAAW,gBAAgB,MAAM,GAAG;AAC9C,cAAM,WAAW,SAAS,IAAI,QAAQ,QAAQ;AAC9C,YAAI,SAAU,UAAS,KAAK,OAAO;AAAA,YAC9B,UAAS,IAAI,QAAQ,UAAU,CAAC,OAAO,CAAC;AAAA,MAC9C;AACA,iBAAW,CAAC,UAAU,QAAQ,KAAK,UAAU;AAC5C,iBAAS,KAAK,CAAC,GAAG,MAAM,EAAE,YAAY,EAAE,SAAS;AAIjD,YAAI,gBAAgB,IAAI,EAAG;AAC3B,cAAM,eAAe,KAAK,IAAI,QAAQ;AACtC,YACC,gBACA,aAAa,WAAW,SAAS,UACjC,SAAS,MAAM,CAAC,SAAS,MAAM,aAAa,CAAC,MAAM,OAAO,GACzD;AACD,mBAAS,IAAI,UAAU,YAAY;AAAA,QACpC;AAAA,MACD;AACA,aAAO;AAAA,IACR,CAAC;AAAA,EACF;AACD;AAGO,SAAS,kBAAkB,QAAgB,UAA0C;AAC3F,SAAO;AAAA,IACN;AAAA,IACA,MAAM,oBAAoB,MAAM,EAAE,IAAI,EAAE,IAAI,QAAQ,KAAK;AAAA,IACzD,CAAC,QAAQ,QAAQ;AAAA,EAClB;AACD;AAGA,MAAM,iBAA8B,CAAC;AAI9B,SAAS,YAAY,QAA6B;AACxD,SAAO;AAAA,IACN;AAAA,IACA,MAAM,gBAAgB,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,YAAY,EAAE,SAAS;AAAA,IACtE,CAAC,MAAM;AAAA,EACR;AACD;",
   "names": []
 }

package/dist-esm/canvas/thread-pin.mjs

@@ -29,6 +29,7 @@ import { openThreadId } from "./state.mjs";
 import { ThreadPreview, useMarkerPreview } from "./thread-preview.mjs";
 import {
   anchorPagePoint,
+  anchorViewportPoint,
   commentTargetShapeAt,
   impreciseShapePinInset,
   isBoxInInflatedViewport,
@@ -36,6 +37,7 @@ import {
   REGION_PIN_CORNER,
   regionAnchorPinCorner,
   regionPinPoint,
+  regionWithPinAt,
   shapeAnchorAt
 } from "./thread-state.mjs";
 import { POPOVER_OFFSET, ThreadPopover, ThreadView } from "./thread-view.mjs";
@@ -75,7 +77,7 @@ const ThreadPin = memo(function ThreadPin2({
   const pinCorner = thread.anchor.type === "region" ? regionAnchorPinCorner(thread.anchor) : REGION_PIN_CORNER;
   const resizeHandles = useMemo(
     () => REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),
-    [pinCorner]
+    [pinCorner.x, pinCorner.y]
   );
   const dragRef = useRef(null);
   const markerRef = useRef(null);
@@ -106,11 +108,8 @@ const ThreadPin = memo(function ThreadPin2({
     "pin point",
     () => {
       if (thread.pageId !== editor.getCurrentPageId()) return null;
-      const pagePoint = anchorPagePoint(editor, thread.anchor);
-      if (!pagePoint) return null;
-      const viewportPoint = editor.pageToViewport(pagePoint);
-      const inset = impreciseShapePinInset(editor, thread.anchor);
-      const point2 = inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint;
+      const point2 = anchorViewportPoint(editor, thread.anchor);
+      if (!point2) return null;
       if (!exemptFromCull) {
         const visible = thread.anchor.type === "region" ? isBoxInInflatedViewport(editor, thread.anchor) : isInInflatedViewport(editor, point2);
         if (!visible) return null;
@@ -120,6 +119,7 @@ const ThreadPin = memo(function ThreadPin2({
     [editor, thread.anchor, thread.pageId, exemptFromCull]
   );
   if (!point) return null;
+  const toggleOpen = () => openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id);
   const PinContent = options.components.PinContent;
   const threadAuthor = resolveAuthor(thread.createdBy);
   const pinContent = PinContent ? /* @__PURE__ */ jsx(PinContent, { thread, comments }) : /* @__PURE__ */ jsx(Avatar, { author: threadAuthor ?? UNKNOWN_COMMENT_AUTHOR });
@@ -164,26 +164,25 @@ const ThreadPin = memo(function ThreadPin2({
       editor.setHintingShapes(hit ? [hit.id] : []);
     }
   };
-  const cancelDrag = (e) => {
+  const takeDrag = (e) => {
     const drag = dragRef.current;
     dragRef.current = null;
     if (e.currentTarget.hasPointerCapture(e.pointerId)) {
       e.currentTarget.releasePointerCapture(e.pointerId);
     }
-    if (!drag) return;
+    return drag;
+  };
+  const cancelDrag = (e) => {
+    if (!takeDrag(e)) 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);
-    }
+    const drag = takeDrag(e);
     if (!drag) return;
     editor.setHintingShapes([]);
     if (!drag.moved) {
-      openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id);
+      toggleOpen();
       return;
     }
     const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
@@ -191,11 +190,7 @@ const ThreadPin = memo(function ThreadPin2({
     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
-      };
+      anchor = regionWithPinAt(thread.anchor, pinCorner, pagePoint);
     } else {
       const hit = commentTargetShapeAt(editor, pagePoint);
       anchor = hit ? shapeAnchorAt(
@@ -215,11 +210,7 @@ const ThreadPin = memo(function ThreadPin2({
   const renderPointBase = livePinPage ? editor.pageToViewport(livePinPage) : point;
   const renderPoint = isRegion ? { x: renderPointBase.x - 14, y: renderPointBase.y + 14 } : 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 movedRegion = regionAnchor && dragPagePoint ? regionWithPinAt(regionAnchor, pinCorner, dragPagePoint) : regionAnchor;
   const regionBoxBounds = resizeBounds ?? movedRegion;
   const commitResize = (bounds) => {
     setResizeBounds(null);
@@ -266,8 +257,7 @@ const ThreadPin = memo(function ThreadPin2({
               onPointerUp: endDrag,
               onPointerCancel: cancelDrag,
               onClick: (e) => {
-                if (e.detail !== 0) return;
-                openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id);
+                if (e.detail === 0) toggleOpen();
               },
               onPointerEnter: previewHandlers.onPointerEnter,
               onPointerLeave: previewHandlers.onPointerLeave,

package/dist-esm/canvas/thread-pin.mjs.map

@@ -1,7 +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 28px size (--tlui-cmt-pin-size) left and\n\t// down (screen px), matching the draft composer's --region centring on the same corner.\n\tconst renderPoint = isRegion\n\t\t? { x: renderPointBase.x - 14, y: renderPointBase.y + 14 }\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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",
+  "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\tanchorViewportPoint,\n\tcommentTargetShapeAt,\n\timpreciseShapePinInset,\n\tisBoxInInflatedViewport,\n\tisInInflatedViewport,\n\tREGION_PIN_CORNER,\n\tregionAnchorPinCorner,\n\tregionPinPoint,\n\tregionWithPinAt,\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.x, pinCorner.y]\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 point = anchorViewportPoint(editor, thread.anchor)\n\t\t\tif (!point) return null\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 toggleOpen = () =>\n\t\topenThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id)\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// Release capture and take the drag record; null when no drag was in progress.\n\tconst takeDrag = (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\treturn drag\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\tif (!takeDrag(e)) return\n\t\tsetDragPagePoint(null)\n\t\teditor.setHintingShapes([])\n\t}\n\tconst endDrag = (e: ReactPointerEvent<HTMLButtonElement>) => {\n\t\tconst drag = takeDrag(e)\n\t\tif (!drag) return\n\t\teditor.setHintingShapes([])\n\t\tif (!drag.moved) {\n\t\t\ttoggleOpen()\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\tanchor = regionWithPinAt(thread.anchor, pinCorner, pagePoint)\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 28px size (--tlui-cmt-pin-size) left and\n\t// down (screen px), matching the draft composer's --region centring on the same corner.\n\tconst renderPoint = isRegion\n\t\t? { x: renderPointBase.x - 14, y: renderPointBase.y + 14 }\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? regionWithPinAt(regionAnchor, pinCorner, dragPagePoint)\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) toggleOpen()\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-esm/canvas/thread-stack.mjs

@@ -13,7 +13,7 @@ import { useCommentingOptions } from "./options.mjs";
 import { pinStackKey } from "./pin-stacking.mjs";
 import { openStackId, openThreadId } from "./state.mjs";
 import { ThreadPreview, useMarkerPreview } from "./thread-preview.mjs";
-import { anchorPagePoint, impreciseShapePinInset } from "./thread-state.mjs";
+import { anchorPagePoint, anchorViewportPoint } from "./thread-state.mjs";
 import {
   POPOVER_OFFSET,
   ThreadPopover,
@@ -50,11 +50,7 @@ const ThreadStackPin = memo(function ThreadStackPin2({
     () => {
       const first = threads[0];
       if (first.pageId !== editor.getCurrentPageId()) return null;
-      const pagePoint = anchorPagePoint(editor, first.anchor);
-      if (!pagePoint) return null;
-      const viewportPoint = editor.pageToViewport(pagePoint);
-      const inset = impreciseShapePinInset(editor, first.anchor);
-      return inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint;
+      return anchorViewportPoint(editor, first.anchor);
     },
     [editor, threads]
   );
@@ -92,7 +88,7 @@ const ThreadStackPin = memo(function ThreadStackPin2({
       openStackId.set(editor, stackId);
     }
   };
-  const liftForHeader = threads[0]?.id === openId ? 42 : 0;
+  const liftForHeader = threads[0].id === openId ? 42 : 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "tlui-cmt-canvas-pin", style: { left: point.x, top: point.y }, children: /* @__PURE__ */ jsx(
       "button",