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

package/dist-cjs/canvas/comments-sidebar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comments-sidebar.tsx"],
-  "sourcesContent": ["import { ReactNode, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n\tTLComment,\n\tTLCommentId,\n\tuseContainer,\n\tuseEditor,\n\tusePassThroughMouseOverEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { CommentListItemProps, CommentsList } from '../ui/comments-list'\nimport { UNKNOWN_AUTHOR } from './comment-render'\nimport { CommentsFilterMenu } from './comments-filter-menu'\nimport { CommentsOverflowMenu } from './comments-overflow-menu'\nimport { useComments, useCommentThreads } from './hooks'\nimport { useCommentingEnabled } from './license'\nimport { useCommentingOptions } from './options'\nimport { richTextToPlaintext } from './rich-text'\nimport { openThreadId, sidebarFilters } from './state'\nimport { focusThread } from './thread-state'\n\n/** @public */\nexport interface CanvasCommentsSidebarProps {\n\t/** Map an author id to a display name, or `undefined` when the id can't be named. */\n\tresolveName(id: string): string | undefined\n\t/** The signed-in user's id. Enables the \"only your threads\" filter when present. */\n\tcurrentUserId?: string\n\t/**\n\t * Whether a comment is unread for the current user (return true for unread). Enables the\n\t * \"only unread\" filter when present.\n\t */\n\tisCommentUnread?(commentId: TLCommentId): boolean\n\t/** Tool ids that show the sidebar. Defaults to the comment tool. */\n\ttools?: string[]\n\t/** Header above the list. */\n\theader?: ReactNode\n\t/** Shown when the page has no threads. */\n\tempty?: ReactNode\n\t/** Where imprecise shape pins sit, so navigation centres on the same spot. Default top-right. */\n\timpreciseShapeAnchor?: { x: number; y: number }\n}\n\n/**\n * A comments list panel for the current page, shown while the comment tool is active. Clicking a\n * thread brings its pin into view and opens it. Batteries-included over the store (a sibling to\n * `CanvasComments`); `CommentsList` is exported for a differently-placed or always-on list.\n * @public @react\n */\nexport function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {\n\tconst {\n\t\tresolveName,\n\t\tcurrentUserId,\n\t\tisCommentUnread,\n\t\ttools,\n\t\theader,\n\t\tempty,\n\t\timpreciseShapeAnchor,\n\t} = props\n\tconst editor = useEditor()\n\tconst options = useCommentingOptions()\n\tconst sidebarTools = tools ?? ['comment']\n\tconst container = useContainer()\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 activeTool = useValue('tool id', () => editor.getCurrentToolId(), [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 || !sidebarTools.includes(activeTool)) 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 items: CommentListItemProps[] = 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) =>\n\t\t\t\t!filters.onlyMine || currentUserId === undefined || 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\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\tid: thread.id,\n\t\t\t\tauthor: resolveName(thread.createdBy) ?? UNKNOWN_AUTHOR,\n\t\t\t\tpreview,\n\t\t\t\tdate: new Date((first ?? thread).createdAt).toISOString(),\n\t\t\t\tresolved: thread.resolved != null,\n\t\t\t\tpage: pageNames.get(thread.pageId),\n\t\t\t\tcount: threadComments.length,\n\t\t\t\tselected: openId === thread.id,\n\t\t\t}\n\t\t})\n\t\t// unresolved first, then most-recent first\n\t\t.sort((a, b) => {\n\t\t\tif (!!a.resolved !== !!b.resolved) return a.resolved ? 1 : -1\n\t\t\treturn b.date.localeCompare(a.date)\n\t\t})\n\n\tconst focus = (id: string) => {\n\t\tconst thread = threads.find((t) => t.id === id)\n\t\t// Resolve prop-or-option like the overlay pins do, so sidebar navigation centers on the same\n\t\t// spot the pin renders at when the anchor is configured via `CommentTool.configure`.\n\t\tif (thread) focusThread(editor, thread, impreciseShapeAnchor ?? options.impreciseShapeAnchor)\n\t}\n\n\treturn (\n\t\t<SidebarPanel container={container}>\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=\"cmt-list__header-actions\">\n\t\t\t\t\t\t<CommentsFilterMenu\n\t\t\t\t\t\t\tcanFilterByAuthor={currentUserId !== undefined}\n\t\t\t\t\t\t\tcanFilterByUnread={isCommentUnread !== undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<CommentsOverflowMenu />\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/>\n\t\t</SidebarPanel>\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. Hover still passes through so\n *  shapes beneath it stay interactive. */\nfunction SidebarPanel({ container, children }: { container: HTMLElement; children: ReactNode }) {\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughMouseOverEvents(ref)\n\treturn createPortal(\n\t\t<div ref={ref} className=\"cmt-canvas-sidebar\">\n\t\t\t{children}\n\t\t</div>,\n\t\tcontainer\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { ReactNode, useCallback, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n\tTLComment,\n\tuseContainer,\n\tuseEditor,\n\tusePassThroughMouseOverEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { CommentListItemProps, 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 container = useContainer()\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\treturn (\n\t\t<SidebarPanel container={container}>\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/>\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. */\ninterface 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 */\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. Hover still passes through so\n *  shapes beneath it stay interactive. */\nfunction SidebarPanel({ container, children }: { container: HTMLElement; children: ReactNode }) {\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughMouseOverEvents(ref)\n\treturn createPortal(\n\t\t<div ref={ref} className=\"tlui-cmt-canvas-sidebar\" onContextMenu={(e) => e.stopPropagation()}>\n\t\t\t{children}\n\t\t</div>,\n\t\tcontainer\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-cjs/canvas/comments-visibility-toggle.js

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comments_visibility_toggle_exports = {};
+__export(comments_visibility_toggle_exports, {
+  CommentsVisibilityToggle: () => CommentsVisibilityToggle
+});
+module.exports = __toCommonJS(comments_visibility_toggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tldraw = require("tldraw");
+var import_tooltip_button = require("../ui/tooltip-button");
+var import_state = require("./state");
+function CommentsVisibilityToggle() {
+  const editor = (0, import_tldraw.useEditor)();
+  const msg = (0, import_tldraw.useTranslation)();
+  const hidden = (0, import_tldraw.useValue)("comments hidden", () => import_state.commentsHidden.get(editor), [editor]);
+  const label = hidden ? msg("comments.show") : msg("comments.hide");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tooltip_button.TooltipButton,
+    {
+      tooltip: label,
+      className: "tlui-cmt-header-btn",
+      onClick: () => (0, import_state.toggleCommentsHidden)(editor),
+      children: hidden ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeClosedIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeOpenIcon, {})
+    }
+  );
+}
+function EyeOpenIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.5C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function EyeClosedIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 11 7.50001 11C6.99965 11 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.39889 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 10 7.50001 10C10.3078 10 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+//# sourceMappingURL=comments-visibility-toggle.js.map

package/dist-cjs/canvas/comments-visibility-toggle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/comments-visibility-toggle.tsx"],
+  "sourcesContent": ["import { useEditor, useTranslation, useValue } from 'tldraw'\nimport { TooltipButton } from '../ui/tooltip-button'\nimport { commentsHidden, toggleCommentsHidden } from './state'\n\n/** The sidebar header's show/hide toggle for comment pins \u2014 an eye that closes while comments\n *  are hidden. The same state as the Shift+C shortcut.\n * @public @react */\nexport function CommentsVisibilityToggle() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\tconst label = hidden ? msg('comments.show') : msg('comments.hide')\n\n\treturn (\n\t\t<TooltipButton\n\t\t\ttooltip={label}\n\t\t\tclassName=\"tlui-cmt-header-btn\"\n\t\t\tonClick={() => toggleCommentsHidden(editor)}\n\t\t>\n\t\t\t{hidden ? <EyeClosedIcon /> : <EyeOpenIcon />}\n\t\t</TooltipButton>\n\t)\n}\n\nfunction EyeOpenIcon() {\n\treturn (\n\t\t<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" aria-hidden=\"true\">\n\t\t\t<path\n\t\t\t\td=\"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.5C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\tclipRule=\"evenodd\"\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n\nfunction EyeClosedIcon() {\n\treturn (\n\t\t<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" aria-hidden=\"true\">\n\t\t\t<path\n\t\t\t\td=\"M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 11 7.50001 11C6.99965 11 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.39889 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 10 7.50001 10C10.3078 10 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\tclipRule=\"evenodd\"\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBa;AAnBb,oBAAoD;AACpD,4BAA8B;AAC9B,mBAAqD;AAK9C,SAAS,2BAA2B;AAC1C,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,8BAAe;AAC3B,QAAM,aAAS,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACrF,QAAM,QAAQ,SAAS,IAAI,eAAe,IAAI,IAAI,eAAe;AAEjE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAS,UAAM,mCAAqB,MAAM;AAAA,MAEzC,mBAAS,4CAAC,iBAAc,IAAK,4CAAC,eAAY;AAAA;AAAA,EAC5C;AAEF;AAEA,SAAS,cAAc;AACtB,SACC,4CAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACvE;AAAA,IAAC;AAAA;AAAA,MACA,GAAE;AAAA,MACF,MAAK;AAAA,MACL,UAAS;AAAA,MACT,UAAS;AAAA;AAAA,EACV,GACD;AAEF;AAEA,SAAS,gBAAgB;AACxB,SACC,4CAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACvE;AAAA,IAAC;AAAA;AAAA,MACA,GAAE;AAAA,MACF,MAAK;AAAA,MACL,UAAS;AAAA,MACT,UAAS;AAAA;AAAA,EACV,GACD;AAEF;",
+  "names": []
+}

package/dist-cjs/canvas/context.js

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var context_exports = {};
+module.exports = __toCommonJS(context_exports);
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/context.ts"],
+  "sourcesContent": ["import { type CommentAuthor, type MentionMember } from '@tldraw/mentions'\nimport { type ReactNode } from 'react'\nimport { type TLComment, type TLCommentId, type TLCommentThreadId } from 'tldraw'\n\n/**\n * The live, host-supplied half of commenting: who the viewer is, how author ids become names, read\n * status, and the mention roster. (The static half is {@link CommentingOptions}, configured once on\n * the tool.)\n *\n * Every commenting surface reads the same set, so a host mounting more than one \u2014 `CanvasComments`\n * and `CanvasCommentsSidebar`, say \u2014 can build it once and spread it into each rather than\n * repeating the props:\n *\n * ```tsx\n * const commenting: CommentingContext = { currentUserId, resolveAuthor, isCommentUnread }\n *\n * <CanvasComments {...commenting} />\n * <CanvasCommentsSidebar {...commenting} />\n * ```\n *\n * @public\n */\nexport interface CommentingContext {\n\t/** The signed-in user's id, or null for a read-only viewer. Only a signed-in user composes. */\n\tcurrentUserId: string | null\n\t/** Map an author id to their display info, or `undefined` when the id can't be resolved. */\n\tresolveAuthor(id: string): CommentAuthor | undefined\n\t/** Called after any comment (a new thread's first comment, or a reply) is posted. */\n\tonPostComment?(comment: TLComment): void\n\t/** Whether a comment is unread for the current user (return true for unread). */\n\tisCommentUnread?(commentId: TLCommentId): boolean\n\t/**\n\t * Called for each unread comment shown to the user in an open thread popover, so hosts can\n\t * record a read receipt. Needs `isCommentUnread` to know what's unread.\n\t */\n\tonCommentRead?(commentId: TLCommentId): void\n\t/** Resolve the members matching an `@`-query in the composers (sync or async). */\n\tgetMentionSuggestions?(query: string): MentionMember[] | Promise<MentionMember[]>\n\t/** Override a mention-picker row's content. */\n\trenderMentionSuggestion?(member: MentionMember): ReactNode\n\t/**\n\t * The host's URL for a thread, so surfaces can link to it \u2014 e.g. the sidebar's rows render as\n\t * anchors when this is present, letting ctrl/cmd-click and middle-click open the thread in a\n\t * new tab (a plain click still selects the thread in place; the href isn't followed).\n\t */\n\tgetThreadHref?(threadId: TLCommentThreadId): string | undefined\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dist-cjs/canvas/hooks.js

@@ -26,19 +26,38 @@ module.exports = __toCommonJS(hooks_exports);
 var import_tldraw = require("tldraw");
 var import_comment_store = require("./comment-store");
 function useCommentThreads(editor) {
-  return (0, import_tldraw.useValue)("comment threads", () => (0, import_comment_store.getCommentThreads)(editor), [editor]);
+  return (0, import_tldraw.useValue)("comment threads", () => (0, import_comment_store.getLiveCommentThreads)(editor), [editor]);
+}
+const commentsByThread = new import_tldraw.WeakCache();
+function getCommentsByThread(editor) {
+  return commentsByThread.get(
+    editor,
+    () => (0, import_tldraw.computed)("comments by thread", () => {
+      const byThread = /* @__PURE__ */ new Map();
+      for (const comment of (0, import_comment_store.getLiveComments)(editor)) {
+        const existing = byThread.get(comment.threadId);
+        if (existing) existing.push(comment);
+        else byThread.set(comment.threadId, [comment]);
+      }
+      for (const comments of byThread.values()) {
+        comments.sort((a, b) => a.createdAt - b.createdAt);
+      }
+      return byThread;
+    })
+  );
 }
 function useThreadComments(editor, threadId) {
   return (0, import_tldraw.useValue)(
     "thread comments",
-    () => (0, import_comment_store.getComments)(editor).filter((c) => c.threadId === threadId).sort((a, b) => a.createdAt - b.createdAt),
+    () => getCommentsByThread(editor).get().get(threadId) ?? EMPTY_COMMENTS,
     [editor, threadId]
   );
 }
+const EMPTY_COMMENTS = [];
 function useComments(editor) {
   return (0, import_tldraw.useValue)(
     "all comments",
-    () => (0, import_comment_store.getComments)(editor).sort((a, b) => a.createdAt - b.createdAt),
+    () => (0, import_comment_store.getLiveComments)(editor).sort((a, b) => a.createdAt - b.createdAt),
     [editor]
   );
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/hooks.ts"],
-  "sourcesContent": ["import { Editor, TLComment, TLCommentThread, TLCommentThreadId, useValue } from 'tldraw'\nimport { getComments, getCommentThreads } from './comment-store'\n\n/** All comment threads in the store, reactively. @public */\nexport function useCommentThreads(editor: Editor): TLCommentThread[] {\n\treturn useValue('comment threads', () => getCommentThreads(editor), [editor])\n}\n\n/** A thread's comments, oldest first, reactively. @public */\nexport function useThreadComments(editor: Editor, threadId: TLCommentThreadId): TLComment[] {\n\treturn useValue(\n\t\t'thread comments',\n\t\t() =>\n\t\t\tgetComments(editor)\n\t\t\t\t.filter((c) => c.threadId === threadId)\n\t\t\t\t.sort((a, b) => a.createdAt - b.createdAt),\n\t\t[editor, threadId]\n\t)\n}\n\n/** Every comment in the store, oldest first, reactively. Group by `threadId` for per-thread lists. @public */\nexport function useComments(editor: Editor): TLComment[] {\n\treturn useValue(\n\t\t'all comments',\n\t\t() => getComments(editor).sort((a, b) => a.createdAt - b.createdAt),\n\t\t[editor]\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAgF;AAChF,2BAA+C;AAGxC,SAAS,kBAAkB,QAAmC;AACpE,aAAO,wBAAS,mBAAmB,UAAM,wCAAkB,MAAM,GAAG,CAAC,MAAM,CAAC;AAC7E;AAGO,SAAS,kBAAkB,QAAgB,UAA0C;AAC3F,aAAO;AAAA,IACN;AAAA,IACA,UACC,kCAAY,MAAM,EAChB,OAAO,CAAC,MAAM,EAAE,aAAa,QAAQ,EACrC,KAAK,CAAC,GAAG,MAAM,EAAE,YAAY,EAAE,SAAS;AAAA,IAC3C,CAAC,QAAQ,QAAQ;AAAA,EAClB;AACD;AAGO,SAAS,YAAY,QAA6B;AACxD,aAAO;AAAA,IACN;AAAA,IACA,UAAM,kCAAY,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,YAAY,EAAE,SAAS;AAAA,IAClE,CAAC,MAAM;AAAA,EACR;AACD;",
+  "sourcesContent": ["import {\n\tcomputed,\n\tComputed,\n\tEditor,\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\nfunction getCommentsByThread(editor: Editor) {\n\treturn commentsByThread.get(editor, () =>\n\t\tcomputed('comments by thread', () => {\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 comments of byThread.values()) {\n\t\t\t\tcomments.sort((a, b) => a.createdAt - b.createdAt)\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASO;AACP,2BAAuD;AAShD,SAAS,kBAAkB,QAAmC;AACpE,aAAO,wBAAS,mBAAmB,UAAM,4CAAsB,MAAM,GAAG,CAAC,MAAM,CAAC;AACjF;AAQA,MAAM,mBAAmB,IAAI,wBAAiE;AAE9F,SAAS,oBAAoB,QAAgB;AAC5C,SAAO,iBAAiB;AAAA,IAAI;AAAA,IAAQ,UACnC,wBAAS,sBAAsB,MAAM;AACpC,YAAM,WAAW,oBAAI,IAAoC;AACzD,iBAAW,eAAW,sCAAgB,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,YAAY,SAAS,OAAO,GAAG;AACzC,iBAAS,KAAK,CAAC,GAAG,MAAM,EAAE,YAAY,EAAE,SAAS;AAAA,MAClD;AACA,aAAO;AAAA,IACR,CAAC;AAAA,EACF;AACD;AAGO,SAAS,kBAAkB,QAAgB,UAA0C;AAC3F,aAAO;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,aAAO;AAAA,IACN;AAAA,IACA,UAAM,sCAAgB,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,YAAY,EAAE,SAAS;AAAA,IACtE,CAAC,MAAM;AAAA,EACR;AACD;",
   "names": []
 }

package/dist-cjs/canvas/options.js

@@ -19,19 +19,25 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var options_exports = {};
 __export(options_exports, {
   defaultCommentingOptions: () => defaultCommentingOptions,
+  getCanComment: () => getCanComment,
   getCommentingOptions: () => getCommentingOptions,
+  useCanComment: () => useCanComment,
   useCommentingOptions: () => useCommentingOptions
 });
 module.exports = __toCommonJS(options_exports);
 var import_react = require("react");
 var import_tldraw = require("tldraw");
+var import_emoji_picker = require("../ui/emoji-picker");
 const defaultCommentingOptions = {
   history: "ignore",
   dragHistory: void 0,
   enableClustering: true,
+  allowMultipleReactions: true,
+  isAllowedReaction: import_emoji_picker.isAllowedReactionEmoji,
+  enableRegions: false,
+  canComment: void 0,
   impreciseShapeAnchor: { x: 1, y: 0 },
-  clusterCullMargin: 120,
-  clusterSplitZoomFactor: 1.05,
+  shouldBePrecise: () => true,
   components: {}
 };
 function getCommentingOptions(editor) {
@@ -42,4 +48,15 @@ function useCommentingOptions() {
   const editor = (0, import_tldraw.useEditor)();
   return (0, import_react.useMemo)(() => getCommentingOptions(editor), [editor]);
 }
+function getCanComment(editor, currentUserId) {
+  const { canComment } = getCommentingOptions(editor);
+  return canComment ? canComment({ editor, currentUserId: currentUserId ?? null }) : currentUserId != null;
+}
+function useCanComment(currentUserId) {
+  const editor = (0, import_tldraw.useEditor)();
+  return (0, import_tldraw.useValue)("can comment", () => getCanComment(editor, currentUserId), [
+    editor,
+    currentUserId
+  ]);
+}
 //# sourceMappingURL=options.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/options.ts"],
-  "sourcesContent": ["import { useMemo, type ComponentType } from 'react'\nimport {\n\ttype Editor,\n\ttype TLComment,\n\ttype TLCommentThread,\n\ttype TLHistoryBatchOptions,\n\tuseEditor,\n} from 'tldraw'\n\n/**\n * Component overrides for the batteries-included comments layer. Each slot replaces a built-in\n * piece; leave a slot unset to keep its default.\n *\n * @public\n */\nexport interface CommentingComponents {\n\t/** A comment's body. Replaces the default rich-text `<CommentBody>`. */\n\tCommentBody?: ComponentType<{ comment: TLComment }>\n\t/** A pin's inner content. Replaces the author-initial default. */\n\tPinContent?: ComponentType<{ thread: TLCommentThread; comments: TLComment[] }>\n\t/** A sidebar row's preview. Replaces the plaintext default. */\n\tThreadPreview?: ComponentType<{ comment: TLComment }>\n}\n\n/**\n * Configuration for the commenting layer. Static config only \u2014 pass it once via\n * `CommentTool.configure({ ... })`, mirroring `ShapeUtil.configure`. Live, reactive values\n * (`currentUserId`, `resolveName`, read-status callbacks) stay as props on `<CanvasComments>`.\n *\n * For defaults, see {@link defaultCommentingOptions}.\n *\n * @example\n * ```tsx\n * <Tldraw tools={[CommentTool.configure({ history: 'ignore', enableClustering: false })]} />\n * ```\n *\n * @public\n */\nexport interface CommentingOptions {\n\t// \u2500\u2500 History / undo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/**\n\t * How comment mutations (post, reply, edit, resolve, delete) interact with the editor undo\n\t * stack. Defaults to `'ignore'` \u2014 comments are deliberately not undoable (see `TLComment`).\n\t * `'record'` is a multiplayer footgun: undoing a delete resurrects a thread a collaborator\n\t * already removed, and undoing a resolve/edit reverts their newer state. Safe only single-player\n\t * or on a non-synced local comment store.\n\t */\n\treadonly history: TLHistoryBatchOptions['history']\n\t/**\n\t * History mode for the pin drag-to-move re-anchor specifically. Unlike posts/edits this is a\n\t * spatial edit that may reasonably be undoable alongside a shape move. Defaults to `history`.\n\t */\n\treadonly dragHistory: TLHistoryBatchOptions['history'] | undefined\n\n\t// \u2500\u2500 Feature toggles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/** Fold nearby pins into count badges as the camera zooms out. */\n\treadonly enableClustering: boolean\n\n\t// \u2500\u2500 Anchoring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/** Normalized (0\u20131) spot within a shape where imprecise shape pins sit. Default top-right. */\n\treadonly impreciseShapeAnchor: { readonly x: number; readonly y: number }\n\n\t// \u2500\u2500 Clustering tuning \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/** Screen-pixel margin by which the viewport is inflated when culling cluster badges. */\n\treadonly clusterCullMargin: number\n\t/** How far past a cluster's split zoom to land when expanding it (1.05 = 5% overshoot). */\n\treadonly clusterSplitZoomFactor: number\n\n\t// \u2500\u2500 Components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/** Component overrides. See {@link CommentingComponents}. */\n\treadonly components: CommentingComponents\n}\n\n/**\n * The default {@link CommentingOptions}. Override via `CommentTool.configure({ ... })`.\n *\n * @public\n */\nexport const defaultCommentingOptions = {\n\thistory: 'ignore',\n\tdragHistory: undefined,\n\tenableClustering: true,\n\timpreciseShapeAnchor: { x: 1, y: 0 },\n\tclusterCullMargin: 120,\n\tclusterSplitZoomFactor: 1.05,\n\tcomponents: {},\n} as const satisfies CommentingOptions\n\n/**\n * The merged {@link CommentingOptions} for an editor, read off the registered comment tool (which\n * carries them via `CommentTool.configure`). Falls back to {@link defaultCommentingOptions} when\n * the comment tool isn't registered. Usable from anywhere with an `Editor` \u2014 including the tool's\n * own state, which has no React context.\n *\n * @public\n */\nexport function getCommentingOptions(editor: Editor): CommentingOptions {\n\tconst tool = editor.getStateDescendant('comment') as { options?: CommentingOptions } | undefined\n\treturn tool?.options ?? defaultCommentingOptions\n}\n\n/**\n * React hook for {@link getCommentingOptions}. Options are fixed per editor (set at tool\n * registration), so this doesn't need to be reactive.\n *\n * @public\n */\nexport function useCommentingOptions(): CommentingOptions {\n\tconst editor = useEditor()\n\treturn useMemo(() => getCommentingOptions(editor), [editor])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAC5C,oBAMO;AAuEA,MAAM,2BAA2B;AAAA,EACvC,SAAS;AAAA,EACT,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,sBAAsB,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EACnC,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,YAAY,CAAC;AACd;AAUO,SAAS,qBAAqB,QAAmC;AACvE,QAAM,OAAO,OAAO,mBAAmB,SAAS;AAChD,SAAO,MAAM,WAAW;AACzB;AAQO,SAAS,uBAA0C;AACzD,QAAM,aAAS,yBAAU;AACzB,aAAO,sBAAQ,MAAM,qBAAqB,MAAM,GAAG,CAAC,MAAM,CAAC;AAC5D;",
+  "sourcesContent": ["import { useMemo, type ComponentType } from 'react'\nimport {\n\ttype Editor,\n\ttype TLComment,\n\ttype TLCommentThread,\n\ttype TLHistoryBatchOptions,\n\ttype TLShapeId,\n\ttype VecLike,\n\tuseEditor,\n\tuseValue,\n} from 'tldraw'\nimport { isAllowedReactionEmoji, type EmojiPickerProps } from '../ui/emoji-picker'\nimport { type ReactionTooltipProps } from '../ui/reaction'\n\n/**\n * The gesture that's creating a shape anchor, passed to\n * {@link CommentingOptions.shouldBePrecise}: the target shape, the page point of the release, and\n * whether Alt was held.\n *\n * @public\n */\nexport interface ShapeCommentPrecisionContext {\n\treadonly shapeId: TLShapeId\n\treadonly point: VecLike\n\treadonly altKey: boolean\n}\n\n/**\n * Component overrides for the batteries-included comments layer. Each slot replaces a built-in\n * piece; leave a slot unset to keep its default.\n *\n * @public\n */\nexport interface CommentingComponents {\n\t/** A comment's body. Replaces the default rich-text `<CommentBody>`. */\n\tCommentBody?: ComponentType<{ comment: TLComment }>\n\t/** A pin's inner content. Replaces the author-initial default. */\n\tPinContent?: ComponentType<{ thread: TLCommentThread; comments: TLComment[] }>\n\t/** A sidebar row's preview. Replaces the plaintext default. */\n\tThreadPreview?: ComponentType<{ comment: TLComment }>\n\t/**\n\t * A reaction's visual, given its token. The default renders the token string for the OS emoji\n\t * font to draw (so the token is the emoji glyph). Override this to render your own palette \u2014\n\t * return an `<img>` for custom emoji, an SVG, or anything. The token is whatever your picker\n\t * emits and is what gets stored/synced; this only controls how it's drawn.\n\t */\n\tReactionContent?: ComponentType<{ token: string }>\n\t/**\n\t * What the add-reaction button opens: the thing that produces a reaction token. Replaces the\n\t * default `<EmojiPicker>` grid. Pairs with `ReactionContent` (which draws whatever tokens this\n\t * emits) and with `isAllowedReaction` (which has to accept them).\n\t */\n\tReactionPalette?: ComponentType<EmojiPickerProps>\n\t/**\n\t * The hover affordance naming who reacted with an emoji. It receives the reactors and the pill\n\t * (as `children`) and returns the whole thing \u2014 so it owns the tooltip, its box, size, shape, and\n\t * position. Replaces the default (`DefaultReactionTooltip`). For a simple wording change, translate\n\t * the `comments.reacted-*` strings instead; reach for this to change the structure \u2014 a different\n\t * box, avatars, a banner anywhere on screen.\n\t */\n\tReactionTooltip?: ComponentType<ReactionTooltipProps>\n\t/** Shown where a composer would sit when the viewer can't compose (see\n\t *  {@link CommentingOptions.canComment} \u2014 a signed-out viewer, a viewer role, a host that\n\t *  turns commenting off). `context` says which surface is rendering it: the bottom of an open\n\t *  thread popover (`'thread'`) or the placement popover the comment tool opens (`'pending'`).\n\t *  Unset, those surfaces render nothing. */\n\tComposerFallback?: ComponentType<{ context: 'pending' | 'thread' }>\n}\n\n/**\n * Configuration for the commenting layer. Static config only \u2014 pass it once via\n * `CommentTool.configure({ ... })`, mirroring `ShapeUtil.configure`. Live, reactive values\n * (`currentUserId`, author resolution, read-status callbacks) are the `CommentingContext`, passed as\n * props to each commenting surface.\n *\n * For defaults, see {@link defaultCommentingOptions}.\n *\n * @example\n * ```tsx\n * <Tldraw tools={[CommentTool.configure({ history: 'ignore', enableClustering: false })]} />\n * ```\n *\n * @public\n */\nexport interface CommentingOptions {\n\t// \u2500\u2500 History / undo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/**\n\t * How comment mutations (post, reply, edit, resolve, delete) interact with the editor undo\n\t * stack. Defaults to `'ignore'` \u2014 comments are deliberately not undoable (see `TLComment`).\n\t * `'record'` is a multiplayer footgun: undoing a delete resurrects a thread a collaborator\n\t * already removed, and undoing a resolve/edit reverts their newer state. Safe only single-player\n\t * or on a non-synced local comment store.\n\t */\n\treadonly history: TLHistoryBatchOptions['history']\n\t/**\n\t * History mode for the pin drag-to-move re-anchor specifically. Unlike posts/edits this is a\n\t * spatial edit that may reasonably be undoable alongside a shape move. Defaults to `history`.\n\t */\n\treadonly dragHistory: TLHistoryBatchOptions['history'] | undefined\n\n\t// \u2500\u2500 Feature toggles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/** Fold nearby pins into count badges as the camera zooms out. */\n\treadonly enableClustering: boolean\n\t/**\n\t * Whether a user may hold several emoji reactions on one comment. `true` (the default) is the\n\t * Slack model: each emoji toggles independently. `false` is single-select: picking a new emoji\n\t * replaces the user's existing reaction. Note this is enforced client-side; the server accepts\n\t * per-emoji records either way.\n\t */\n\treadonly allowMultipleReactions: boolean\n\t/**\n\t * Whether a token may be added as a reaction. Defaults to {@link isAllowedReactionEmoji} against\n\t * the built-in emoji palette, which is what keeps a scripted client from writing junk `emoji`\n\t * values the picker would never offer. Override it alongside a custom `ReactionPalette` so the\n\t * tokens that palette emits get through. Removals aren't checked \u2014 a reaction carrying an\n\t * off-palette token must still be clearable.\n\t */\n\tisAllowedReaction(token: string): boolean\n\t/**\n\t * Whether dragging the comment tool out creates a region anchor \u2014 a comment attached to a\n\t * rectangular area of the page, drawn as a dashed box with the thread's pin on the corner the\n\t * drag released on. Off by default: comments attach to points and shapes only, and a drag just\n\t * trails the composer. A region reveals its box while the pointer is inside it, moves by its\n\t * pin, and resizes from its corners.\n\t */\n\treadonly enableRegions: boolean\n\n\t// \u2500\u2500 Permissions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/**\n\t * Whether the viewer may participate in commenting: composing new threads and replies, editing\n\t * and deleting comments, resolving threads, and moving pins or regions. Composers render when\n\t * it returns true; when it returns false, the {@link CommentingComponents.ComposerFallback}\n\t * slot renders in their place (or nothing, if that slot is unset) and the action affordances\n\t * are hidden. Unset, participation is allowed exactly when `currentUserId` is set.\n\t *\n\t * Called during render via {@link useCanComment}, so reactive reads (signals) are tracked.\n\t * The comment tool itself stays registered and selectable \u2014 hosts that want its toolbar button\n\t * to do something else (e.g. open a sign-in dialog) can override the tool item's `onSelect`.\n\t * Note posting still requires a `currentUserId` to author the records, so a callback that\n\t * returns true for a signed-out viewer yields a composer whose send button stays disabled.\n\t */\n\treadonly canComment:\n\t\t| ((ctx: { editor: Editor; currentUserId: string | null }) => boolean)\n\t\t| undefined\n\n\t// \u2500\u2500 Anchoring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/** Normalized (0\u20131) spot within a shape where imprecise shape pins sit. Default top-right. */\n\treadonly impreciseShapeAnchor: { readonly x: number; readonly y: number }\n\t/**\n\t * Whether a comment landing on a shape anchors precisely \u2014 pinned to the exact clicked spot\n\t * within the shape \u2014 or imprecisely \u2014 pinned to the shape as a whole, rendered at\n\t * `impreciseShapeAnchor`. Called wherever a shape anchor is created (placing with the comment\n\t * tool, dropping a dragged pin onto a shape). Always precise by default. Return `false` for\n\t * shape-level anchoring, or decide from the context \u2014 the Alt key's state, or the shape itself,\n\t * e.g. precise only on notes. Governs new placements only; existing anchors render as stored.\n\t */\n\tshouldBePrecise(editor: Editor, context: ShapeCommentPrecisionContext): boolean\n\n\t// \u2500\u2500 Components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t/** Component overrides. See {@link CommentingComponents}. */\n\treadonly components: CommentingComponents\n}\n\n/**\n * The default {@link CommentingOptions}. Override via `CommentTool.configure({ ... })`.\n *\n * @public\n */\nexport const defaultCommentingOptions = {\n\thistory: 'ignore',\n\tdragHistory: undefined,\n\tenableClustering: true,\n\tallowMultipleReactions: true,\n\tisAllowedReaction: isAllowedReactionEmoji,\n\tenableRegions: false,\n\tcanComment: undefined,\n\timpreciseShapeAnchor: { x: 1, y: 0 },\n\tshouldBePrecise: () => true,\n\tcomponents: {},\n} as const satisfies CommentingOptions\n\n/**\n * The merged {@link CommentingOptions} for an editor, read off the registered comment tool (which\n * carries them via `CommentTool.configure`). Falls back to {@link defaultCommentingOptions} when\n * the comment tool isn't registered. Usable from anywhere with an `Editor` \u2014 including the tool's\n * own state, which has no React context.\n *\n * @public\n */\nexport function getCommentingOptions(editor: Editor): CommentingOptions {\n\tconst tool = editor.getStateDescendant('comment') as { options?: CommentingOptions } | undefined\n\treturn tool?.options ?? defaultCommentingOptions\n}\n\n/**\n * React hook for {@link getCommentingOptions}. Options are fixed per editor (set at tool\n * registration), so this doesn't need to be reactive.\n *\n * @public\n */\nexport function useCommentingOptions(): CommentingOptions {\n\tconst editor = useEditor()\n\treturn useMemo(() => getCommentingOptions(editor), [editor])\n}\n\n/**\n * Whether the viewer may participate in commenting, per {@link CommentingOptions.canComment}\n * (defaulting to `currentUserId != null` when unset). Where this is false, composers give way to\n * the {@link CommentingComponents.ComposerFallback} slot and action affordances are hidden.\n *\n * This is a plain, untracked read \u2014 a `canComment` callback that reads signals is not observed.\n * In React, use {@link useCanComment} instead.\n *\n * @public\n */\nexport function getCanComment(editor: Editor, currentUserId: string | null | undefined): boolean {\n\tconst { canComment } = getCommentingOptions(editor)\n\treturn canComment\n\t\t? canComment({ editor, currentUserId: currentUserId ?? null })\n\t\t: currentUserId != null\n}\n\n/**\n * Reactive React hook for {@link getCanComment}: a `canComment` callback that reads signals\n * re-evaluates when they change.\n *\n * @public\n */\nexport function useCanComment(currentUserId: string | null | undefined): boolean {\n\tconst editor = useEditor()\n\treturn useValue('can comment', () => getCanComment(editor, currentUserId), [\n\t\teditor,\n\t\tcurrentUserId,\n\t])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAC5C,oBASO;AACP,0BAA8D;AA6JvD,MAAM,2BAA2B;AAAA,EACvC,SAAS;AAAA,EACT,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,wBAAwB;AAAA,EACxB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,sBAAsB,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EACnC,iBAAiB,MAAM;AAAA,EACvB,YAAY,CAAC;AACd;AAUO,SAAS,qBAAqB,QAAmC;AACvE,QAAM,OAAO,OAAO,mBAAmB,SAAS;AAChD,SAAO,MAAM,WAAW;AACzB;AAQO,SAAS,uBAA0C;AACzD,QAAM,aAAS,yBAAU;AACzB,aAAO,sBAAQ,MAAM,qBAAqB,MAAM,GAAG,CAAC,MAAM,CAAC;AAC5D;AAYO,SAAS,cAAc,QAAgB,eAAmD;AAChG,QAAM,EAAE,WAAW,IAAI,qBAAqB,MAAM;AAClD,SAAO,aACJ,WAAW,EAAE,QAAQ,eAAe,iBAAiB,KAAK,CAAC,IAC3D,iBAAiB;AACrB;AAQO,SAAS,cAAc,eAAmD;AAChF,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,eAAe,MAAM,cAAc,QAAQ,aAAa,GAAG;AAAA,IAC1E;AAAA,IACA;AAAA,EACD,CAAC;AACF;",
   "names": []
 }

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

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pin_stacking_exports = {};
+__export(pin_stacking_exports, {
+  computePinStacks: () => computePinStacks,
+  pinStackKey: () => pinStackKey
+});
+module.exports = __toCommonJS(pin_stacking_exports);
+var import_thread_state = require("./thread-state");
+const PIN_STACK_QUANTUM = 0.1;
+function pinStackKey(point) {
+  return `${Math.round(point.x / PIN_STACK_QUANTUM)}:${Math.round(point.y / PIN_STACK_QUANTUM)}`;
+}
+function computePinStacks(editor, threads) {
+  const pageId = editor.getCurrentPageId();
+  const groups = /* @__PURE__ */ new Map();
+  for (const thread of threads) {
+    if (thread.pageId !== pageId) continue;
+    const point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
+    if (!point) continue;
+    const key = pinStackKey(point);
+    const group = groups.get(key);
+    if (group) {
+      group.push(thread);
+    } else {
+      groups.set(key, [thread]);
+    }
+  }
+  const stacks = /* @__PURE__ */ new Map();
+  for (const group of groups.values()) {
+    if (group.length < 2) continue;
+    group.sort((a, b) => a.createdAt - b.createdAt || (a.id < b.id ? -1 : 1));
+    const ids = group.map((thread) => thread.id);
+    for (const id of ids) {
+      stacks.set(id, ids);
+    }
+  }
+  return stacks;
+}
+//# sourceMappingURL=pin-stacking.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/pin-stacking.ts"],
+  "sourcesContent": ["import type { Editor, TLCommentThread } from 'tldraw'\nimport { anchorPagePoint } from './thread-state'\n\n/** Two anchors within this page-space distance (per axis) share a stack. Identical imprecise\n *  anchors on one shape resolve to the same point exactly; the tolerance only absorbs float noise. */\nconst PIN_STACK_QUANTUM = 0.1\n\n/**\n * The key a page point stacks under. Threads sharing a key are coincident. Stable identity for a\n * stack itself: it survives losing any member (the survivors keep the same key), unlike keying by\n * a particular thread id, so open-stack state stays put when the stack's oldest thread is deleted.\n */\nexport function pinStackKey(point: { x: number; y: number }): string {\n\treturn `${Math.round(point.x / PIN_STACK_QUANTUM)}:${Math.round(point.y / PIN_STACK_QUANTUM)}`\n}\n\n/**\n * Group threads whose pins land on the same page point \u2014 coincident pins (typically several\n * imprecise comments on one shape) that zooming can never separate. The overlay renders each\n * group as a single count-badge pin that opens the threads as a list. Every member id maps to\n * its group's ordered member ids (oldest first); threads without an entry pin individually.\n *\n * Keyed by page-space anchor point, not screen position, so the result only changes when threads\n * or their anchors move \u2014 never on camera moves.\n * @internal\n */\nexport function computePinStacks(\n\teditor: Editor,\n\tthreads: readonly TLCommentThread[]\n): Map<string, readonly string[]> {\n\tconst pageId = editor.getCurrentPageId()\n\tconst groups = new Map<string, TLCommentThread[]>()\n\n\tfor (const thread of threads) {\n\t\tif (thread.pageId !== pageId) continue\n\t\tconst point = anchorPagePoint(editor, thread.anchor)\n\t\tif (!point) continue\n\t\tconst key = pinStackKey(point)\n\t\tconst group = groups.get(key)\n\t\tif (group) {\n\t\t\tgroup.push(thread)\n\t\t} else {\n\t\t\tgroups.set(key, [thread])\n\t\t}\n\t}\n\n\tconst stacks = new Map<string, readonly string[]>()\n\tfor (const group of groups.values()) {\n\t\tif (group.length < 2) continue\n\t\tgroup.sort((a, b) => a.createdAt - b.createdAt || (a.id < b.id ? -1 : 1))\n\t\tconst ids = group.map((thread) => thread.id)\n\t\tfor (const id of ids) {\n\t\t\tstacks.set(id, ids)\n\t\t}\n\t}\n\treturn stacks\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAAgC;AAIhC,MAAM,oBAAoB;AAOnB,SAAS,YAAY,OAAyC;AACpE,SAAO,GAAG,KAAK,MAAM,MAAM,IAAI,iBAAiB,CAAC,IAAI,KAAK,MAAM,MAAM,IAAI,iBAAiB,CAAC;AAC7F;AAYO,SAAS,iBACf,QACA,SACiC;AACjC,QAAM,SAAS,OAAO,iBAAiB;AACvC,QAAM,SAAS,oBAAI,IAA+B;AAElD,aAAW,UAAU,SAAS;AAC7B,QAAI,OAAO,WAAW,OAAQ;AAC9B,UAAM,YAAQ,qCAAgB,QAAQ,OAAO,MAAM;AACnD,QAAI,CAAC,MAAO;AACZ,UAAM,MAAM,YAAY,KAAK;AAC7B,UAAM,QAAQ,OAAO,IAAI,GAAG;AAC5B,QAAI,OAAO;AACV,YAAM,KAAK,MAAM;AAAA,IAClB,OAAO;AACN,aAAO,IAAI,KAAK,CAAC,MAAM,CAAC;AAAA,IACzB;AAAA,EACD;AAEA,QAAM,SAAS,oBAAI,IAA+B;AAClD,aAAW,SAAS,OAAO,OAAO,GAAG;AACpC,QAAI,MAAM,SAAS,EAAG;AACtB,UAAM,KAAK,CAAC,GAAG,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE;AACxE,UAAM,MAAM,MAAM,IAAI,CAAC,WAAW,OAAO,EAAE;AAC3C,eAAW,MAAM,KAAK;AACrB,aAAO,IAAI,IAAI,GAAG;AAAA,IACnB;AAAA,EACD;AACA,SAAO;AACR;",
+  "names": []
+}

package/dist-cjs/canvas/sidebar-filters.js

@@ -22,9 +22,9 @@ __export(sidebar_filters_exports, {
 });
 module.exports = __toCommonJS(sidebar_filters_exports);
 const DEFAULT_SIDEBAR_FILTERS = {
-  showResolved: true,
+  showResolved: false,
   onlyMine: false,
   onlyUnread: false,
-  onlyCurrentPage: true
+  onlyCurrentPage: false
 };
 //# sourceMappingURL=sidebar-filters.js.map

package/dist-cjs/canvas/sidebar-filters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/sidebar-filters.ts"],
-  "sourcesContent": ["/**\n * Which threads the comments sidebar shows. Held as an editor-scoped signal (the `sidebarFilters`\n * `EditorAtom` in `./state`) rather than component state so it survives the sidebar\n * unmounting when the comment tool deactivates \u2014 a user's \"hide resolved\" choice shouldn't reset\n * every time they leave the tool.\n * @public\n */\nexport interface SidebarFilters {\n\t/** Include resolved threads. */\n\tshowResolved: boolean\n\t/** Only threads the current user started. Ignored when there's no current user. */\n\tonlyMine: boolean\n\t/** Only threads with unread comments. Ignored when the host provides no read status. */\n\tonlyUnread: boolean\n\t/** Only threads on the current page. Off = every page's threads, each labelled. */\n\tonlyCurrentPage: boolean\n}\n\n/** @public */\nexport const DEFAULT_SIDEBAR_FILTERS: SidebarFilters = {\n\tshowResolved: true,\n\tonlyMine: false,\n\tonlyUnread: false,\n\tonlyCurrentPage: true,\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBO,MAAM,0BAA0C;AAAA,EACtD,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,iBAAiB;AAClB;",
+  "sourcesContent": ["/**\n * Which threads the comments sidebar shows. Held as an editor-scoped signal (the `sidebarFilters`\n * `EditorAtom` in `./state`) rather than component state so it survives the sidebar\n * unmounting when the comment tool deactivates \u2014 a user's \"hide resolved\" choice shouldn't reset\n * every time they leave the tool.\n * @public\n */\nexport interface SidebarFilters {\n\t/** Include resolved threads. */\n\tshowResolved: boolean\n\t/** Only threads the current user started. Ignored when there's no current user. */\n\tonlyMine: boolean\n\t/** Only threads with unread comments. Ignored when the host provides no read status. */\n\tonlyUnread: boolean\n\t/** Only threads on the current page. Off = every page's threads, each labelled. */\n\tonlyCurrentPage: boolean\n}\n\n/** The out-of-the-box view: every page's threads, resolved ones hidden until asked for.\n * @public */\nexport const DEFAULT_SIDEBAR_FILTERS: SidebarFilters = {\n\tshowResolved: false,\n\tonlyMine: false,\n\tonlyUnread: false,\n\tonlyCurrentPage: false,\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBO,MAAM,0BAA0C;AAAA,EACtD,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,iBAAiB;AAClB;",
   "names": []
 }

package/dist-cjs/canvas/state.js

@@ -19,25 +19,44 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var state_exports = {};
 __export(state_exports, {
   commentsHidden: () => commentsHidden,
-  commitCommentMutation: () => commitCommentMutation,
+  commentsSidebarOpen: () => commentsSidebarOpen,
+  getRevealThreadPending: () => getRevealThreadPending,
+  openStackId: () => openStackId,
   openThreadId: () => openThreadId,
   pendingComment: () => pendingComment,
   regionDraft: () => regionDraft,
+  revealThread: () => revealThread,
+  revealThreadRequest: () => revealThreadRequest,
   sidebarFilters: () => sidebarFilters,
   toggleCommentsHidden: () => toggleCommentsHidden,
+  toggleCommentsSidebar: () => toggleCommentsSidebar,
   useCommentsHidden: () => useCommentsHidden,
+  useCommentsSidebarOpen: () => useCommentsSidebarOpen,
   useOpenThreadId: () => useOpenThreadId,
   usePendingComment: () => usePendingComment,
+  useRevealThreadPending: () => useRevealThreadPending,
   useSidebarFilters: () => useSidebarFilters
 });
 module.exports = __toCommonJS(state_exports);
 var import_tldraw = require("tldraw");
-var import_options = require("./options");
 var import_sidebar_filters = require("./sidebar-filters");
 const openThreadId = new import_tldraw.EditorAtom("openThreadId", () => null);
+const openStackId = new import_tldraw.EditorAtom("openStackId", () => null);
 const pendingComment = new import_tldraw.EditorAtom("pendingComment", () => null);
+const revealThreadRequest = new import_tldraw.EditorAtom("revealThreadRequest", () => null);
+function revealThread(editor, threadOrCommentId) {
+  revealThreadRequest.set(editor, threadOrCommentId);
+}
+function getRevealThreadPending(editor) {
+  return revealThreadRequest.get(editor);
+}
+function useRevealThreadPending() {
+  const editor = (0, import_tldraw.useEditor)();
+  return (0, import_tldraw.useValue)("pending reveal thread", () => getRevealThreadPending(editor), [editor]);
+}
 const regionDraft = new import_tldraw.EditorAtom("regionDraft", () => null);
 const commentsHidden = new import_tldraw.EditorAtom("commentsHidden", () => false);
+const commentsSidebarOpen = new import_tldraw.EditorAtom("commentsSidebarOpen", () => false);
 const sidebarFilters = new import_tldraw.EditorAtom(
   "sidebarFilters",
   () => import_sidebar_filters.DEFAULT_SIDEBAR_FILTERS
@@ -45,6 +64,9 @@ const sidebarFilters = new import_tldraw.EditorAtom(
 function toggleCommentsHidden(editor) {
   commentsHidden.update(editor, (hidden) => !hidden);
 }
+function toggleCommentsSidebar(editor) {
+  commentsSidebarOpen.update(editor, (open) => !open);
+}
 function useOpenThreadId() {
   const editor = (0, import_tldraw.useEditor)();
   return (0, import_tldraw.useValue)("open thread id", () => openThreadId.get(editor), [editor]);
@@ -57,20 +79,12 @@ function useCommentsHidden() {
   const editor = (0, import_tldraw.useEditor)();
   return (0, import_tldraw.useValue)("comments hidden", () => commentsHidden.get(editor), [editor]);
 }
+function useCommentsSidebarOpen() {
+  const editor = (0, import_tldraw.useEditor)();
+  return (0, import_tldraw.useValue)("comments sidebar open", () => commentsSidebarOpen.get(editor), [editor]);
+}
 function useSidebarFilters() {
   const editor = (0, import_tldraw.useEditor)();
   return (0, import_tldraw.useValue)("sidebar filters", () => sidebarFilters.get(editor), [editor]);
 }
-function commitCommentMutation(editor, fn, kind = "mutation") {
-  const options = (0, import_options.getCommentingOptions)(editor);
-  const history = kind === "drag" ? options.dragHistory ?? options.history : options.history;
-  let result;
-  editor.run(
-    () => {
-      result = fn();
-    },
-    { history }
-  );
-  return result;
-}
 //# sourceMappingURL=state.js.map

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

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