@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

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

@@ -0,0 +1,170 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import {
+  EditorAtom,
+  usePassThroughWheelEvents,
+  useTranslation,
+  useValue
+} from "tldraw";
+import { CommentCard } from "../ui/comment-card.mjs";
+import { replyCountLabel } from "../ui/reply-count.mjs";
+import { useComments } from "./hooks.mjs";
+import { useCommentingOptions } from "./options.mjs";
+import { openStackId, openThreadId } from "./state.mjs";
+import { POPOVER_OFFSET, toCardProps, useResolveName } from "./thread-view.mjs";
+const PREVIEW_OPEN_DELAY_MS = 180;
+const PREVIEW_CLOSE_DELAY_MS = 220;
+const PREVIEW_MAX_THREADS = 5;
+function selectPreviewCards(threads, firstCommentOf, max = PREVIEW_MAX_THREADS) {
+  const readable = [];
+  for (const thread of threads) {
+    const first = firstCommentOf(thread);
+    if (first) readable.push({ thread, first });
+  }
+  return { cards: readable.slice(0, max), overflow: Math.max(0, readable.length - max) };
+}
+const hoveredMarkerId = new EditorAtom("commentHoveredMarkerId", () => null);
+function useMarkerPreview(editor, markerId) {
+  const openTimer = useRef(0);
+  const closeTimer = useRef(0);
+  const suppressed = useValue(
+    "marker preview suppressed",
+    () => openThreadId.get(editor) !== null || openStackId.get(editor) !== null,
+    [editor]
+  );
+  const shown = useValue("marker preview shown", () => hoveredMarkerId.get(editor) === markerId, [
+    editor,
+    markerId
+  ]);
+  useEffect(() => {
+    const open = openTimer;
+    const close = closeTimer;
+    return () => {
+      window.clearTimeout(open.current);
+      window.clearTimeout(close.current);
+      if (hoveredMarkerId.get(editor) === markerId) hoveredMarkerId.set(editor, null);
+    };
+  }, [editor, markerId]);
+  useEffect(() => {
+    if (suppressed && hoveredMarkerId.get(editor) === markerId) {
+      hoveredMarkerId.set(editor, null);
+    }
+  }, [suppressed, editor, markerId]);
+  const onPointerEnter = () => {
+    window.clearTimeout(openTimer.current);
+    window.clearTimeout(closeTimer.current);
+    if (suppressed) return;
+    openTimer.current = window.setTimeout(
+      () => hoveredMarkerId.set(editor, markerId),
+      PREVIEW_OPEN_DELAY_MS
+    );
+  };
+  const onPointerLeave = () => {
+    window.clearTimeout(openTimer.current);
+    window.clearTimeout(closeTimer.current);
+    closeTimer.current = window.setTimeout(() => {
+      if (hoveredMarkerId.get(editor) === markerId) hoveredMarkerId.set(editor, null);
+    }, PREVIEW_CLOSE_DELAY_MS);
+  };
+  return {
+    previewShown: shown && !suppressed,
+    previewHandlers: { onPointerEnter, onPointerLeave }
+  };
+}
+function ThreadPreview({
+  editor,
+  threads,
+  container,
+  variant,
+  point,
+  onSelectThread,
+  onPointerEnter,
+  onPointerLeave,
+  ...props
+}) {
+  const options = useCommentingOptions();
+  const msg = useTranslation();
+  const comments = useComments(editor);
+  const resolveName = useResolveName(props.resolveAuthor);
+  const ref = useRef(null);
+  usePassThroughWheelEvents(ref);
+  const { firstByThread, countByThread } = useMemo(() => {
+    const first = /* @__PURE__ */ new Map();
+    const count = /* @__PURE__ */ new Map();
+    for (const comment of comments) {
+      if (!first.has(comment.threadId)) first.set(comment.threadId, comment);
+      count.set(comment.threadId, (count.get(comment.threadId) ?? 0) + 1);
+    }
+    return { firstByThread: first, countByThread: count };
+  }, [comments]);
+  const { cards, overflow } = useMemo(
+    () => selectPreviewCards(threads, (thread) => firstByThread.get(thread.id)),
+    [threads, firstByThread]
+  );
+  if (cards.length === 0) return null;
+  const offset = POPOVER_OFFSET[variant];
+  const isThread = variant === "thread";
+  const panelClass = [
+    "tlui-cmt-canvas-preview__panel",
+    `tlui-cmt-canvas-preview__panel--${variant}`,
+    isThread && onSelectThread ? "tlui-cmt-canvas-preview__panel--selectable" : ""
+  ].filter(Boolean).join(" ");
+  return createPortal(
+    // The root is the hover region — it carries the bridge back to the marker — while the panel
+    // inside it is the visible surface. Keeping them apart is what lets the surface light up on
+    // its own hover without the bridge (which reaches back over the marker) lighting it up too.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `tlui-cmt-canvas-preview tlui-cmt-canvas-preview--${variant}`,
+        style: {
+          left: point.x + offset.x,
+          top: point.y + offset.y,
+          // The stylesheet sizes the hover bridge against this, so the gap it spans follows
+          // the offset rather than being restated as a second magic number.
+          "--tlui-cmt-preview-offset": `${offset.x}px`
+        },
+        onPointerEnter,
+        onPointerLeave,
+        onPointerDown: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxs("div", { className: panelClass, children: [
+          cards.map(({ thread, first }) => {
+            const replies = replyCountLabel(msg, (countByThread.get(thread.id) ?? 1) - 1);
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: isThread ? void 0 : onSelectThread ? "tlui-cmt-preview-card tlui-cmt-preview-card--selectable" : "tlui-cmt-preview-card",
+                onClick: onSelectThread ? (e) => {
+                  e.stopPropagation();
+                  onSelectThread(thread);
+                } : void 0,
+                children: /* @__PURE__ */ jsx(
+                  CommentCard,
+                  {
+                    ...toCardProps(first, props, options.components, resolveName),
+                    footer: replies ? /* @__PURE__ */ jsx("span", { className: "tlui-cmt-card__replies", children: replies }) : void 0
+                  }
+                )
+              },
+              thread.id
+            );
+          }),
+          overflow > 0 && /* @__PURE__ */ jsx("div", { className: "tlui-cmt-preview-more", children: msg("comments.preview-more").replace("{count}", String(overflow)) })
+        ] })
+      }
+    ),
+    container
+  );
+}
+function sortThreadsForPreview(threads) {
+  return [...threads].sort((a, b) => a.createdAt - b.createdAt || (a.id < b.id ? -1 : 1));
+}
+export {
+  ThreadPreview,
+  selectPreviewCards,
+  sortThreadsForPreview,
+  useMarkerPreview
+};
+//# sourceMappingURL=thread-preview.mjs.map

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

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

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

@@ -0,0 +1,190 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from "react";
+import {
+  useContainer,
+  usePassThroughWheelEvents,
+  useTranslation,
+  useValue
+} from "tldraw";
+import { CommentCard } from "../ui/comment-card.mjs";
+import { CountBadge } from "../ui/count-badge.mjs";
+import { UNKNOWN_AUTHOR } from "./comment-render.mjs";
+import { useThreadComments } from "./hooks.mjs";
+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 } from "./thread-state.mjs";
+import {
+  POPOVER_OFFSET,
+  ThreadPopover,
+  ThreadView,
+  toCardProps,
+  useResolveName
+} from "./thread-view.mjs";
+const ThreadStackPin = memo(function ThreadStackPin2({
+  editor,
+  threads,
+  ...props
+}) {
+  const container = useContainer();
+  const msg = useTranslation();
+  const badgeRef = useRef(null);
+  usePassThroughWheelEvents(badgeRef);
+  const { previewShown, previewHandlers } = useMarkerPreview(editor, `stack:${threads[0].id}`);
+  const stackId = useValue(
+    "stack id",
+    () => {
+      const pagePoint = anchorPagePoint(editor, threads[0].anchor);
+      return pagePoint ? pinStackKey(pagePoint) : threads[0].id;
+    },
+    [editor, threads]
+  );
+  const listOpen = useValue("stack list open", () => openStackId.get(editor) === stackId, [
+    editor,
+    stackId
+  ]);
+  const openId = useValue("open thread id", () => openThreadId.get(editor), [editor]);
+  const openMember = threads.find((thread) => thread.id === openId);
+  const open = listOpen || openMember !== void 0;
+  const point = useValue(
+    "stack point",
+    () => {
+      const first = threads[0];
+      if (first.pageId !== editor.getCurrentPageId()) return null;
+      const pagePoint = anchorPagePoint(editor, first.anchor);
+      return pagePoint ? editor.pageToViewport(pagePoint) : null;
+    },
+    [editor, threads]
+  );
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!target) return;
+      if (target.closest(".tlui-cmt-canvas-popover")) return;
+      const badge = badgeRef.current;
+      if (badge && badge.contains(target)) return;
+      if (target.closest(".tlui-menu, [data-radix-popper-content-wrapper], .tlui-cmt-mention-popup"))
+        return;
+      openStackId.set(editor, null);
+      openThreadId.set(editor, null);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open, editor]);
+  useEffect(() => {
+    if (!listOpen) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      openStackId.set(editor, null);
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [listOpen, editor]);
+  if (!point) return null;
+  const toggle = () => {
+    if (open) {
+      openStackId.set(editor, null);
+      openThreadId.set(editor, null);
+    } else {
+      openStackId.set(editor, stackId);
+    }
+  };
+  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",
+      {
+        ref: badgeRef,
+        type: "button",
+        className: "tlui-cmt-button tlui-cmt-canvas-stack-badge",
+        "aria-label": msg("comments.stack-label").replace("{count}", String(threads.length)),
+        "aria-expanded": open,
+        onPointerDown: (e) => e.stopPropagation(),
+        onClick: (e) => {
+          e.stopPropagation();
+          toggle();
+        },
+        ...previewHandlers,
+        onFocus: previewHandlers.onPointerEnter,
+        onBlur: previewHandlers.onPointerLeave,
+        children: /* @__PURE__ */ jsx(CountBadge, { count: threads.length, open })
+      }
+    ) }),
+    previewShown && !open && /* @__PURE__ */ jsx(
+      ThreadPreview,
+      {
+        editor,
+        threads,
+        container,
+        variant: "list",
+        point,
+        onSelectThread: (thread) => {
+          openStackId.set(editor, stackId);
+          openThreadId.set(editor, thread.id);
+        },
+        ...previewHandlers,
+        currentUserId: props.currentUserId,
+        resolveAuthor: props.resolveAuthor
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      ThreadPopover,
+      {
+        container,
+        style: {
+          left: point.x + POPOVER_OFFSET.list.x,
+          top: point.y + POPOVER_OFFSET.list.y - liftForHeader
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "tlui-cmt-stack-list", children: threads.map(
+          (thread) => thread.id === openId ? /* @__PURE__ */ jsx("div", { className: "tlui-cmt-stack-list__thread", children: /* @__PURE__ */ jsx(ThreadView, { editor, thread, ...props }) }, thread.id) : /* @__PURE__ */ jsx(
+            StackThreadCard,
+            {
+              editor,
+              thread,
+              ...props,
+              onOpen: () => openThreadId.set(editor, thread.id)
+            },
+            thread.id
+          )
+        ) })
+      }
+    )
+  ] });
+});
+function StackThreadCard({
+  editor,
+  thread,
+  onOpen,
+  ...props
+}) {
+  const msg = useTranslation();
+  const options = useCommentingOptions();
+  const comments = useThreadComments(editor, thread.id);
+  const resolveName = useResolveName(props.resolveAuthor);
+  const first = comments[0];
+  if (!first) return null;
+  const open = (e) => {
+    e.stopPropagation();
+    onOpen();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "tlui-cmt-stack-list__card", onClick: open, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "tlui-cmt-button tlui-cmt-stack-list__card-action",
+        "aria-label": msg(
+          thread.resolved ? "comments.pin-label-resolved" : "comments.pin-label"
+        ).replace("{name}", props.resolveAuthor(thread.createdBy)?.name ?? UNKNOWN_AUTHOR),
+        onClick: open
+      }
+    ),
+    /* @__PURE__ */ jsx(CommentCard, { ...toCardProps(first, props, options.components, resolveName) })
+  ] });
+}
+export {
+  ThreadStackPin
+};
+//# sourceMappingURL=thread-stack.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/thread-stack.tsx"],
+  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent, memo, useEffect, useRef } from 'react'\nimport {\n\tEditor,\n\tTLCommentThread,\n\tuseContainer,\n\tusePassThroughWheelEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { CommentCard } from '../ui/comment-card'\nimport { CountBadge } from '../ui/count-badge'\nimport { UNKNOWN_AUTHOR } from './comment-render'\nimport { type CommentingContext } from './context'\nimport { useThreadComments } from './hooks'\nimport { useCommentingOptions } from './options'\nimport { pinStackKey } from './pin-stacking'\nimport { openStackId, openThreadId } from './state'\nimport { ThreadPreview, useMarkerPreview } from './thread-preview'\nimport { anchorPagePoint } from './thread-state'\nimport {\n\tPOPOVER_OFFSET,\n\tThreadPopover,\n\tThreadView,\n\ttoCardProps,\n\tuseResolveName,\n} from './thread-view'\n\n/**\n * The pin for threads whose anchors resolve to the same page point \u2014 pins zooming can never\n * separate, so instead of stacked markers they share one count badge. Clicking it opens a\n * popover listing each thread as a card; clicking a card expands that thread in place (via the\n * single open-thread state, so expanding one collapses another).\n */\nexport const ThreadStackPin = memo(function ThreadStackPin({\n\teditor,\n\tthreads,\n\t...props\n}: CommentingContext & {\n\teditor: Editor\n\t/** The stack's threads, oldest first. All resolve to the same anchor point. */\n\tthreads: readonly TLCommentThread[]\n}) {\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst badgeRef = useRef<HTMLButtonElement>(null)\n\t// The badge takes pointer events (to open on click), so wheel input over it would otherwise be\n\t// swallowed instead of zooming \u2014 pass it through to the canvas, as the pin and cluster badge do.\n\tusePassThroughWheelEvents(badgeRef)\n\t// Hovering the badge previews its threads; clicking still opens them as the interactive list.\n\t// The preview is what makes the badge legible before you commit to opening it.\n\tconst { previewShown, previewHandlers } = useMarkerPreview(editor, `stack:${threads[0].id}`)\n\t// The list stays open while a member thread is expanded, and on its own after the member\n\t// collapses \u2014 so Escape steps back: expanded thread \u2192 card list \u2192 closed. Held in editor\n\t// state (not component state) because this pin remounts as its owning render path changes.\n\t// Keyed by the coincident page point, not a member id, so the open state survives losing a\n\t// member (including the oldest): the survivors keep the same key. Falls back to a thread id\n\t// only when the anchor can't resolve (off page), where the list isn't shown anyway.\n\tconst stackId = useValue(\n\t\t'stack id',\n\t\t() => {\n\t\t\tconst pagePoint = anchorPagePoint(editor, threads[0].anchor)\n\t\t\treturn pagePoint ? pinStackKey(pagePoint) : threads[0].id\n\t\t},\n\t\t[editor, threads]\n\t)\n\tconst listOpen = useValue('stack list open', () => openStackId.get(editor) === stackId, [\n\t\teditor,\n\t\tstackId,\n\t])\n\tconst openId = useValue('open thread id', () => openThreadId.get(editor), [editor])\n\tconst openMember = threads.find((thread) => thread.id === openId)\n\tconst open = listOpen || openMember !== undefined\n\n\tconst point = useValue(\n\t\t'stack point',\n\t\t() => {\n\t\t\tconst first = threads[0]\n\t\t\tif (first.pageId !== editor.getCurrentPageId()) return null\n\t\t\t// The badge hangs off its anchor point bottom-left (transform: translate(0, -100%)),\n\t\t\t// like a pin and like the cluster badge \u2014 but it sits at the raw page point with no pin\n\t\t\t// inset. The inset only tucks an imprecise single pin inside its shape; applying it here\n\t\t\t// would offset the badge from where the cluster badge sits (cluster centroids average\n\t\t\t// raw anchor points) and make it hop as pins flip between them.\n\t\t\tconst pagePoint = anchorPagePoint(editor, first.anchor)\n\t\t\treturn pagePoint ? editor.pageToViewport(pagePoint) : null\n\t\t},\n\t\t[editor, threads]\n\t)\n\n\t// Clicking outside the popover (and off the badge) closes the whole stack \u2014 mirrors the\n\t// single pin's dismiss. Capture phase + class checks, since the popover portals elsewhere.\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 badge = badgeRef.current\n\t\t\tif (badge && badge.contains(target)) return\n\t\t\t// A click inside a menu/popover layered above us belongs to that layer; defer to its\n\t\t\t// own dismissal instead of closing the stack 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\topenStackId.set(editor, null)\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// Escape with only the card list showing closes it. When a member thread is expanded, the\n\t// layer's Escape handler collapses that first and marks the event consumed \u2014 stepping back\n\t// to the list rather than closing everything at once.\n\tuseEffect(() => {\n\t\tif (!listOpen) return\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key !== 'Escape' || e.defaultPrevented) return\n\t\t\topenStackId.set(editor, null)\n\t\t}\n\t\tdocument.addEventListener('keydown', onKeyDown, true)\n\t\treturn () => document.removeEventListener('keydown', onKeyDown, true)\n\t}, [listOpen, editor])\n\n\tif (!point) return null\n\n\tconst toggle = () => {\n\t\tif (open) {\n\t\t\topenStackId.set(editor, null)\n\t\t\topenThreadId.set(editor, null)\n\t\t} else {\n\t\t\topenStackId.set(editor, stackId)\n\t\t}\n\t}\n\n\t// The expanded thread gains a \"Comment\" header that pushes its first comment down from where the\n\t// hover preview showed it. When that thread is the list's first, lift the whole list by the\n\t// header block so its \"You\" holds position across hover -> open: the single thread's\n\t// THREAD_HEADER_BLOCK (36) plus the 8px margin above the expanded entry, less the 2px top the\n\t// preview card sits its \"You\" down by. Only the first entry \u2014 lifting the list can't also hold a\n\t// lower thread's neighbours in place.\n\tconst liftForHeader = threads[0]?.id === openId ? 42 : 0\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"tlui-cmt-canvas-pin\" style={{ left: point.x, top: point.y }}>\n\t\t\t\t<button\n\t\t\t\t\tref={badgeRef}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"tlui-cmt-button tlui-cmt-canvas-stack-badge\"\n\t\t\t\t\taria-label={msg('comments.stack-label').replace('{count}', String(threads.length))}\n\t\t\t\t\taria-expanded={open}\n\t\t\t\t\tonPointerDown={(e) => e.stopPropagation()}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\ttoggle()\n\t\t\t\t\t}}\n\t\t\t\t\t{...previewHandlers}\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<CountBadge count={threads.length} open={open} />\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t{previewShown && !open && (\n\t\t\t\t<ThreadPreview\n\t\t\t\t\teditor={editor}\n\t\t\t\t\tthreads={threads}\n\t\t\t\t\tcontainer={container}\n\t\t\t\t\t// Lines the preview up with the stack list itself, so opening it leaves the cards\n\t\t\t\t\t// exactly where the preview had them.\n\t\t\t\t\tvariant=\"list\"\n\t\t\t\t\tpoint={point}\n\t\t\t\t\t// Picking a card from the preview lands in the same place clicking the badge and\n\t\t\t\t\t// then the card would: the list open, that thread expanded within it.\n\t\t\t\t\tonSelectThread={(thread) => {\n\t\t\t\t\t\topenStackId.set(editor, stackId)\n\t\t\t\t\t\topenThreadId.set(editor, thread.id)\n\t\t\t\t\t}}\n\t\t\t\t\t{...previewHandlers}\n\t\t\t\t\tcurrentUserId={props.currentUserId}\n\t\t\t\t\tresolveAuthor={props.resolveAuthor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{open && (\n\t\t\t\t<ThreadPopover\n\t\t\t\t\tcontainer={container}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: point.x + POPOVER_OFFSET.list.x,\n\t\t\t\t\t\ttop: point.y + POPOVER_OFFSET.list.y - liftForHeader,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-cmt-stack-list\">\n\t\t\t\t\t\t{threads.map((thread) =>\n\t\t\t\t\t\t\tthread.id === openId ? (\n\t\t\t\t\t\t\t\t<div key={thread.id} className=\"tlui-cmt-stack-list__thread\">\n\t\t\t\t\t\t\t\t\t<ThreadView editor={editor} thread={thread} {...props} />\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\t\t<StackThreadCard\n\t\t\t\t\t\t\t\t\tkey={thread.id}\n\t\t\t\t\t\t\t\t\teditor={editor}\n\t\t\t\t\t\t\t\t\tthread={thread}\n\t\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\t\tonOpen={() => openThreadId.set(editor, thread.id)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</ThreadPopover>\n\t\t\t)}\n\t\t</>\n\t)\n})\n\n/** A collapsed stack entry: the thread's first comment as a card; clicking expands the thread. */\nfunction StackThreadCard({\n\teditor,\n\tthread,\n\tonOpen,\n\t...props\n}: CommentingContext & { editor: Editor; thread: TLCommentThread; onOpen(): void }) {\n\tconst msg = useTranslation()\n\tconst options = useCommentingOptions()\n\tconst comments = useThreadComments(editor, thread.id)\n\tconst resolveName = useResolveName(props.resolveAuthor)\n\tconst first = comments[0]\n\tif (!first) return null\n\tconst open = (e: ReactMouseEvent) => {\n\t\te.stopPropagation()\n\t\tonOpen()\n\t}\n\treturn (\n\t\t<div className=\"tlui-cmt-stack-list__card\" onClick={open}>\n\t\t\t{/* The card's keyboard affordance. A button *wrapping* the card would put the comment\n\t\t\t    body inside it, and a body renders its links as real anchors \u2014 interactive content\n\t\t\t    nested in a button, which is an invalid content model and reads to assistive tech as a\n\t\t\t    broken control. So the button covers the card as a sibling instead, leaving the body's\n\t\t\t    own links above it and still reachable. */}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"tlui-cmt-button tlui-cmt-stack-list__card-action\"\n\t\t\t\taria-label={msg(\n\t\t\t\t\tthread.resolved ? 'comments.pin-label-resolved' : 'comments.pin-label'\n\t\t\t\t).replace('{name}', props.resolveAuthor(thread.createdBy)?.name ?? UNKNOWN_AUTHOR)}\n\t\t\t\tonClick={open}\n\t\t\t/>\n\t\t\t<CommentCard {...toCardProps(first, props, options.components, resolveName)} />\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": ["ThreadStackPin"]
+}

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

@@ -1,60 +1,109 @@
-import { getRegionCommentOptions } from "./region-options.mjs";
-import { openThreadId } from "./state.mjs";
-const DEFAULT_IMPRECISE_SHAPE_ANCHOR = { x: 1, y: 0 };
+import {
+  Mat,
+  Vec
+} from "tldraw";
+import { getCommentingOptions } from "./options.mjs";
+import { commentsSidebarOpen, openThreadId } from "./state.mjs";
+import { POPOVER_OFFSET } from "./thread-view.mjs";
+const IMPRECISE_PIN_INSET_PX = 20;
+function impreciseShapePinInset(editor, anchor) {
+  if (anchor.type !== "shape" || anchor.isPrecise) return null;
+  const spot = getCommentingOptions(editor).impreciseShapeAnchor;
+  const inset = {
+    x: Math.sign(0.5 - spot.x) * IMPRECISE_PIN_INSET_PX,
+    y: Math.sign(0.5 - spot.y) * IMPRECISE_PIN_INSET_PX
+  };
+  const rotation = editor.getShapePageTransform(anchor.shapeId)?.rotation() ?? 0;
+  return rotation === 0 ? inset : Vec.Rot(inset, rotation);
+}
 const REGION_PIN_CORNER = { x: 1, y: 1 };
+function regionAnchorPinCorner(anchor) {
+  if (anchor.pinX !== void 0 && anchor.pinY !== void 0) {
+    return { x: anchor.pinX, y: anchor.pinY };
+  }
+  return REGION_PIN_CORNER;
+}
 function regionPinPoint(region, corner = REGION_PIN_CORNER) {
   return {
     x: region.x + corner.x * region.w,
     y: region.y + corner.y * region.h
   };
 }
-function anchorPagePoint(editor, anchor, impreciseShapeAnchor = DEFAULT_IMPRECISE_SHAPE_ANCHOR) {
+function anchorPagePoint(editor, anchor) {
   switch (anchor.type) {
     case "shape": {
-      const bounds = editor.getShapePageBounds(anchor.shapeId);
-      if (!bounds) return null;
-      const { x, y } = anchor.isPrecise ? anchor : impreciseShapeAnchor;
-      return { x: bounds.minX + x * bounds.w, y: bounds.minY + y * bounds.h };
-    }
-    case "text-range": {
-      const bounds = editor.getShapePageBounds(anchor.shapeId);
-      if (!bounds) return null;
-      return { x: bounds.maxX, y: bounds.minY };
+      const shape = editor.getShape(anchor.shapeId);
+      if (!shape) return null;
+      const transform = editor.getShapePageTransform(shape);
+      if (!transform) return null;
+      const { point, size } = editor.getShapeGeometry(shape).bounds;
+      const spot = anchor.isPrecise ? anchor : getCommentingOptions(editor).impreciseShapeAnchor;
+      return Mat.applyToPoint(transform, Vec.Add(point, Vec.MulV(spot, size)));
     }
     case "point":
       return { x: anchor.x, y: anchor.y };
     case "region":
-      return regionPinPoint(anchor, getRegionCommentOptions(editor).pinCorner);
+      return regionPinPoint(anchor, regionAnchorPinCorner(anchor));
     case "page":
       return null;
   }
 }
+function commentTargetShapeAt(editor, page) {
+  return editor.getShapeAtPoint(page, {
+    hitInside: true,
+    hitFrameInside: true,
+    margin: editor.getHitTestMargin()
+  });
+}
 function shapeAnchorAt(editor, shapeId, page, precise) {
-  const bounds = editor.getShapePageBounds(shapeId);
-  if (!bounds || bounds.w === 0 || bounds.h === 0) {
+  const shape = editor.getShape(shapeId);
+  const bounds = shape && editor.getShapeGeometry(shape).bounds;
+  if (!shape || !bounds || bounds.w === 0 || bounds.h === 0) {
     return { type: "shape", shapeId, x: 0.5, y: 0.5, isPrecise: precise };
   }
+  const local = editor.getPointInShapeSpace(shape, page);
   return {
     type: "shape",
     shapeId,
-    x: (page.x - bounds.minX) / bounds.w,
-    y: (page.y - bounds.minY) / bounds.h,
+    x: (local.x - bounds.minX) / bounds.w,
+    y: (local.y - bounds.minY) / bounds.h,
     isPrecise: precise
   };
 }
-function focusThread(editor, thread, impreciseShapeAnchor) {
+function focusThread(editor, thread) {
   if (thread.pageId !== editor.getCurrentPageId()) {
     editor.setCurrentPage(thread.pageId);
   }
   openThreadId.set(editor, thread.id);
-  const point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor);
-  if (point) editor.centerOnPoint(point, { animation: { duration: 200 } });
+  const point = anchorPagePoint(editor, thread.anchor);
+  if (!point) return;
+  const offset = commentCenterScreenOffset(editor) / editor.getZoomLevel();
+  editor.centerOnPoint({ x: point.x + offset, y: point.y }, { animation: { duration: 200 } });
+}
+const CENTER_MARGIN_PX = 8;
+const THREAD_UI_EXTENT_PX = POPOVER_OFFSET.thread.x + 300;
+function commentCenterScreenOffset(editor) {
+  if (!commentsSidebarOpen.get(editor)) return 0;
+  const sidebar = editor.getContainer().querySelector(".tlui-cmt-canvas-sidebar");
+  if (!sidebar) return 0;
+  const viewport = editor.getViewportScreenBounds();
+  const sidebarLeft = sidebar.getBoundingClientRect().left - viewport.x;
+  if (sidebarLeft >= viewport.w) return 0;
+  const pinX = Math.max(
+    Math.min(sidebarLeft / 2, sidebarLeft - CENTER_MARGIN_PX - THREAD_UI_EXTENT_PX),
+    CENTER_MARGIN_PX
+  );
+  return viewport.w / 2 - pinX;
 }
 export {
-  DEFAULT_IMPRECISE_SHAPE_ANCHOR,
+  IMPRECISE_PIN_INSET_PX,
   REGION_PIN_CORNER,
   anchorPagePoint,
+  commentCenterScreenOffset,
+  commentTargetShapeAt,
   focusThread,
+  impreciseShapePinInset,
+  regionAnchorPinCorner,
   regionPinPoint,
   shapeAnchorAt
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/thread-state.ts"],
-  "sourcesContent": ["import { BoxModel, Editor, TLCommentAnchor, TLCommentThread, TLShapeId, VecLike } from 'tldraw'\nimport { getRegionCommentOptions } from './region-options'\nimport { openThreadId } from './state'\n\n/** Where an imprecise shape comment sits by default: the shape's top-right corner. Overridable. @public */\nexport const DEFAULT_IMPRECISE_SHAPE_ANCHOR = { x: 1, y: 0 }\n\n/** The default corner a region's pin and composer sit on, as a normalized 0\u20131 offset (bottom-right).\n *  Overridable per editor via region options; pin position, composer placement, region move, and\n *  which corner has no resize handle all derive from the chosen corner. */\nexport const REGION_PIN_CORNER: VecLike = { x: 1, y: 1 }\n\n/** The page point of a region's pin corner. */\nexport function regionPinPoint(region: BoxModel, corner: VecLike = REGION_PIN_CORNER): VecLike {\n\treturn {\n\t\tx: region.x + corner.x * region.w,\n\t\ty: region.y + corner.y * region.h,\n\t}\n}\n\n/**\n * Where a thread's pin sits on the page, for each anchor kind. Null hides the pin. For imprecise\n * shape anchors the pin uses `impreciseShapeAnchor` (a normalized 0\u20131 spot, top-right by default)\n * rather than the stored `x`/`y`.\n * @public\n */\nexport function anchorPagePoint(\n\teditor: Editor,\n\tanchor: TLCommentAnchor,\n\timpreciseShapeAnchor: { x: number; y: number } = DEFAULT_IMPRECISE_SHAPE_ANCHOR\n): { x: number; y: number } | null {\n\tswitch (anchor.type) {\n\t\tcase 'shape': {\n\t\t\tconst bounds = editor.getShapePageBounds(anchor.shapeId as TLShapeId)\n\t\t\tif (!bounds) return null\n\t\t\t// Precise pins sit at their stored x/y; imprecise ones at the consumer's default spot.\n\t\t\tconst { x, y } = anchor.isPrecise ? anchor : impreciseShapeAnchor\n\t\t\treturn { x: bounds.minX + x * bounds.w, y: bounds.minY + y * bounds.h }\n\t\t}\n\t\tcase 'text-range': {\n\t\t\tconst bounds = editor.getShapePageBounds(anchor.shapeId as TLShapeId)\n\t\t\tif (!bounds) return null\n\t\t\treturn { x: bounds.maxX, y: bounds.minY }\n\t\t}\n\t\tcase 'point':\n\t\t\treturn { x: anchor.x, y: anchor.y }\n\t\tcase 'region':\n\t\t\treturn regionPinPoint(anchor, getRegionCommentOptions(editor).pinCorner)\n\t\tcase 'page':\n\t\t\treturn null\n\t}\n}\n\n/**\n * A shape anchor for a page point. `x`/`y` are the point's normalized (0\u20131) offset within the\n * shape's page bounds, remembered either way. When `precise` (Alt held) the pin sits at exactly\n * `x`/`y`; otherwise it sits at the consumer's imprecise default (top-right out of the box).\n * @public\n */\nexport function shapeAnchorAt(\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\tpage: { x: number; y: number },\n\tprecise: boolean\n): TLCommentAnchor {\n\tconst bounds = editor.getShapePageBounds(shapeId)\n\tif (!bounds || bounds.w === 0 || bounds.h === 0) {\n\t\treturn { type: 'shape', shapeId, x: 0.5, y: 0.5, isPrecise: precise }\n\t}\n\treturn {\n\t\ttype: 'shape',\n\t\tshapeId,\n\t\tx: (page.x - bounds.minX) / bounds.w,\n\t\ty: (page.y - bounds.minY) / bounds.h,\n\t\tisPrecise: precise,\n\t}\n}\n\n/** Open a thread and bring it into view \u2014 switch to its page if needed, then center its pin. @public */\nexport function focusThread(\n\teditor: Editor,\n\tthread: TLCommentThread,\n\timpreciseShapeAnchor?: { x: number; y: number }\n): void {\n\tif (thread.pageId !== editor.getCurrentPageId()) {\n\t\teditor.setCurrentPage(thread.pageId as any)\n\t}\n\topenThreadId.set(editor, thread.id)\n\tconst point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor)\n\tif (point) editor.centerOnPoint(point, { animation: { duration: 200 } })\n}\n"],
-  "mappings": "AACA,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAGtB,MAAM,iCAAiC,EAAE,GAAG,GAAG,GAAG,EAAE;AAKpD,MAAM,oBAA6B,EAAE,GAAG,GAAG,GAAG,EAAE;AAGhD,SAAS,eAAe,QAAkB,SAAkB,mBAA4B;AAC9F,SAAO;AAAA,IACN,GAAG,OAAO,IAAI,OAAO,IAAI,OAAO;AAAA,IAChC,GAAG,OAAO,IAAI,OAAO,IAAI,OAAO;AAAA,EACjC;AACD;AAQO,SAAS,gBACf,QACA,QACA,uBAAiD,gCACf;AAClC,UAAQ,OAAO,MAAM;AAAA,IACpB,KAAK,SAAS;AACb,YAAM,SAAS,OAAO,mBAAmB,OAAO,OAAoB;AACpE,UAAI,CAAC,OAAQ,QAAO;AAEpB,YAAM,EAAE,GAAG,EAAE,IAAI,OAAO,YAAY,SAAS;AAC7C,aAAO,EAAE,GAAG,OAAO,OAAO,IAAI,OAAO,GAAG,GAAG,OAAO,OAAO,IAAI,OAAO,EAAE;AAAA,IACvE;AAAA,IACA,KAAK,cAAc;AAClB,YAAM,SAAS,OAAO,mBAAmB,OAAO,OAAoB;AACpE,UAAI,CAAC,OAAQ,QAAO;AACpB,aAAO,EAAE,GAAG,OAAO,MAAM,GAAG,OAAO,KAAK;AAAA,IACzC;AAAA,IACA,KAAK;AACJ,aAAO,EAAE,GAAG,OAAO,GAAG,GAAG,OAAO,EAAE;AAAA,IACnC,KAAK;AACJ,aAAO,eAAe,QAAQ,wBAAwB,MAAM,EAAE,SAAS;AAAA,IACxE,KAAK;AACJ,aAAO;AAAA,EACT;AACD;AAQO,SAAS,cACf,QACA,SACA,MACA,SACkB;AAClB,QAAM,SAAS,OAAO,mBAAmB,OAAO;AAChD,MAAI,CAAC,UAAU,OAAO,MAAM,KAAK,OAAO,MAAM,GAAG;AAChD,WAAO,EAAE,MAAM,SAAS,SAAS,GAAG,KAAK,GAAG,KAAK,WAAW,QAAQ;AAAA,EACrE;AACA,SAAO;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA,IAAI,KAAK,IAAI,OAAO,QAAQ,OAAO;AAAA,IACnC,IAAI,KAAK,IAAI,OAAO,QAAQ,OAAO;AAAA,IACnC,WAAW;AAAA,EACZ;AACD;AAGO,SAAS,YACf,QACA,QACA,sBACO;AACP,MAAI,OAAO,WAAW,OAAO,iBAAiB,GAAG;AAChD,WAAO,eAAe,OAAO,MAAa;AAAA,EAC3C;AACA,eAAa,IAAI,QAAQ,OAAO,EAAE;AAClC,QAAM,QAAQ,gBAAgB,QAAQ,OAAO,QAAQ,oBAAoB;AACzE,MAAI,MAAO,QAAO,cAAc,OAAO,EAAE,WAAW,EAAE,UAAU,IAAI,EAAE,CAAC;AACxE;",
+  "sourcesContent": ["import {\n\tBoxModel,\n\tEditor,\n\tMat,\n\tTLCommentAnchor,\n\tTLCommentThread,\n\tTLShape,\n\tTLShapeId,\n\tVec,\n\tVecLike,\n} from 'tldraw'\nimport { getCommentingOptions } from './options'\nimport { commentsSidebarOpen, openThreadId } from './state'\nimport { POPOVER_OFFSET } from './thread-view'\n\n/** How far an imprecise shape pin steps inside the shape from its anchor spot, in screen px \u2014\n *  most of the marker sits within the shape, with a small overhang past the corner. */\nexport const IMPRECISE_PIN_INSET_PX = 20\n\n/** Imprecise shape pins tuck inside the shape rather than hanging off its edge: the marker\n *  extends up-right of its anchor point, so step it toward the shape's centre. Screen px \u2014 the\n *  pin is screen-fixed while the shape scales with zoom. Null for anchors that need no inset. */\nexport function impreciseShapePinInset(\n\teditor: Editor,\n\tanchor: TLCommentThread['anchor']\n): { x: number; y: number } | null {\n\tif (anchor.type !== 'shape' || anchor.isPrecise) return null\n\tconst spot = getCommentingOptions(editor).impreciseShapeAnchor\n\tconst inset = {\n\t\tx: Math.sign(0.5 - spot.x) * IMPRECISE_PIN_INSET_PX,\n\t\ty: Math.sign(0.5 - spot.y) * IMPRECISE_PIN_INSET_PX,\n\t}\n\t// The spot is a corner of the shape's own bounds, so which way \"toward the centre\" points turns\n\t// with the shape: without this a rotated shape's pin would step out of the shape, not into it.\n\tconst rotation = editor.getShapePageTransform(anchor.shapeId as TLShapeId)?.rotation() ?? 0\n\treturn rotation === 0 ? inset : Vec.Rot(inset, rotation)\n}\n\n/** The corner a region's pin and composer sit on, as a normalized 0\u20131 offset (bottom-right). Pin\n *  position, composer placement, region move, and which corner has no resize handle all derive\n *  from it. */\nexport const REGION_PIN_CORNER: VecLike = { x: 1, y: 1 }\n\n/** A region anchor's pin corner: the corner its creating drag released on, when recorded, else\n *  {@link REGION_PIN_CORNER}. @internal */\nexport function regionAnchorPinCorner(\n\tanchor: Extract<TLCommentAnchor, { type: 'region' }>\n): VecLike {\n\tif (anchor.pinX !== undefined && anchor.pinY !== undefined) {\n\t\treturn { x: anchor.pinX, y: anchor.pinY }\n\t}\n\treturn REGION_PIN_CORNER\n}\n\n/** The page point of a region's pin corner. */\nexport function regionPinPoint(region: BoxModel, corner: VecLike = REGION_PIN_CORNER): VecLike {\n\treturn {\n\t\tx: region.x + corner.x * region.w,\n\t\ty: region.y + corner.y * region.h,\n\t}\n}\n\n/**\n * Where a thread's pin sits on the page, for each anchor kind. Null hides the pin. For imprecise\n * shape anchors the pin uses the editor's {@link CommentingOptions.impreciseShapeAnchor} (a\n * normalized 0\u20131 spot, top-right by default) rather than the stored `x`/`y`.\n *\n * A shape anchor's `x`/`y` are normalized within the shape's own bounds and resolved through the\n * shape's page transform, so the pin rides every part of that transform \u2014 rotating the shape\n * carries the pin around with it instead of leaving it behind in the bounding box.\n * @public\n */\nexport function anchorPagePoint(\n\teditor: Editor,\n\tanchor: TLCommentAnchor\n): { x: number; y: number } | null {\n\tswitch (anchor.type) {\n\t\tcase 'shape': {\n\t\t\tconst shape = editor.getShape(anchor.shapeId as TLShapeId)\n\t\t\tif (!shape) return null\n\t\t\tconst transform = editor.getShapePageTransform(shape)\n\t\t\tif (!transform) return null\n\t\t\tconst { point, size } = editor.getShapeGeometry(shape).bounds\n\t\t\t// Precise pins sit at their stored x/y; imprecise ones at the editor's configured spot.\n\t\t\tconst spot = anchor.isPrecise ? anchor : getCommentingOptions(editor).impreciseShapeAnchor\n\t\t\treturn Mat.applyToPoint(transform, Vec.Add(point, Vec.MulV(spot, size)))\n\t\t}\n\t\tcase 'point':\n\t\t\treturn { x: anchor.x, y: anchor.y }\n\t\tcase 'region':\n\t\t\treturn regionPinPoint(anchor, regionAnchorPinCorner(anchor))\n\t\tcase 'page':\n\t\t\treturn null\n\t}\n}\n\n/**\n * The shape a comment placed at a page point should anchor to, or undefined for empty canvas.\n *\n * Uses the editor's hit-test margin, the same slack select and hover use. Without it, shapes whose\n * geometry is an open path \u2014 arrows, lines, draw strokes \u2014 are unhittable in practice: their\n * geometry reports a positive distance for every point off the stroke, so a zero margin only\n * matches a pixel-perfect click right on the line.\n *\n * `hitFrameInside` lets a click inside a frame's body anchor to the frame \u2014 without it a frame is\n * hit only on its edge/label (the select-tool convention), so the frame's interior would fall\n * through to a bare point. A child shape under the pointer still wins (children sort above the\n * frame), so only a frame's empty interior anchors the frame.\n *\n * @internal\n */\nexport function commentTargetShapeAt(editor: Editor, page: VecLike): TLShape | undefined {\n\treturn editor.getShapeAtPoint(page, {\n\t\thitInside: true,\n\t\thitFrameInside: true,\n\t\tmargin: editor.getHitTestMargin(),\n\t})\n}\n\n/**\n * A shape anchor for a page point. `x`/`y` are the point's normalized (0\u20131) offset within the\n * shape's own bounds \u2014 taken in the shape's own space, so a pin placed on a rotated shape records\n * the spot it was dropped on rather than a spot in the bounding box. Remembered either way: when\n * `precise` the pin sits at exactly `x`/`y`; otherwise it sits at the consumer's imprecise default\n * (top-right out of the box). Placement gestures get `precise` from the `shouldBePrecise`\n * commenting option (always precise, by default).\n * @public\n */\nexport function shapeAnchorAt(\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\tpage: { x: number; y: number },\n\tprecise: boolean\n): TLCommentAnchor {\n\tconst shape = editor.getShape(shapeId)\n\tconst bounds = shape && editor.getShapeGeometry(shape).bounds\n\tif (!shape || !bounds || bounds.w === 0 || bounds.h === 0) {\n\t\treturn { type: 'shape', shapeId, x: 0.5, y: 0.5, isPrecise: precise }\n\t}\n\tconst local = editor.getPointInShapeSpace(shape, page)\n\treturn {\n\t\ttype: 'shape',\n\t\tshapeId,\n\t\tx: (local.x - bounds.minX) / bounds.w,\n\t\ty: (local.y - bounds.minY) / bounds.h,\n\t\tisPrecise: precise,\n\t}\n}\n\n/** Open a thread and bring it into view \u2014 switch to its page if needed, then center its pin. @public */\nexport function focusThread(editor: Editor, thread: TLCommentThread): void {\n\tif (thread.pageId !== editor.getCurrentPageId()) {\n\t\teditor.setCurrentPage(thread.pageId as any)\n\t}\n\topenThreadId.set(editor, thread.id)\n\tconst point = anchorPagePoint(editor, thread.anchor)\n\tif (!point) return\n\tconst offset = commentCenterScreenOffset(editor) / editor.getZoomLevel()\n\teditor.centerOnPoint({ x: point.x + offset, y: point.y }, { animation: { duration: 200 } })\n}\n\n/** The left inset a nudged pin never crosses, and the gap kept between thread UI and sidebar. */\nconst CENTER_MARGIN_PX = 8\n\n/** How far the open thread UI reaches right of its pin, in screen px: the popover's offset plus\n *  the thread panel's fixed width (300px, `.tlui-cmt-thread`). */\nconst THREAD_UI_EXTENT_PX = POPOVER_OFFSET.thread.x + 300\n\n/**\n * How far right of a centered-on pin the true viewport center should sit, in screen px. While the\n * comments sidebar covers the viewport's right edge, centering a pin dead-center puts the thread\n * popover that opens on it under the sidebar \u2014 so centering aims the pin at the middle of the\n * uncovered area instead, nudged further left if the thread UI would still reach the sidebar, but\n * never past the viewport's left edge. Zero when the sidebar is closed or not on screen.\n * @internal\n */\nexport function commentCenterScreenOffset(editor: Editor): number {\n\tif (!commentsSidebarOpen.get(editor)) return 0\n\tconst sidebar = editor.getContainer().querySelector('.tlui-cmt-canvas-sidebar')\n\tif (!sidebar) return 0\n\tconst viewport = editor.getViewportScreenBounds()\n\t// Viewport screen bounds are the container's client rect, so this is container-local.\n\tconst sidebarLeft = sidebar.getBoundingClientRect().left - viewport.x\n\tif (sidebarLeft >= viewport.w) return 0\n\t// Aim the pin at the middle of the uncovered area, nudged left until the thread UI clears the\n\t// sidebar \u2014 but never past the left edge (the edge wins when there's no room for both).\n\tconst pinX = Math.max(\n\t\tMath.min(sidebarLeft / 2, sidebarLeft - CENTER_MARGIN_PX - THREAD_UI_EXTENT_PX),\n\t\tCENTER_MARGIN_PX\n\t)\n\treturn viewport.w / 2 - pinX\n}\n"],
+  "mappings": "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",
   "names": []
 }