@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.c5c7f1d817d0

package/dist-cjs/canvas/comment-body.js

@@ -26,6 +26,6 @@ var import_react = require("react");
 var import_comment_render = require("./comment-render");
 function CommentBody({ richText, resolveName }) {
   const html = (0, import_react.useMemo)(() => (0, import_comment_render.renderCommentHtml)(richText, resolveName), [richText, resolveName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-text", dangerouslySetInnerHTML: { __html: html } });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-text", dangerouslySetInnerHTML: { __html: html } });
 }
 //# sourceMappingURL=comment-body.js.map

package/dist-cjs/canvas/comment-body.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comment-body.tsx"],
-  "sourcesContent": ["import { useMemo } from 'react'\nimport { TLRichText } from 'tldraw'\nimport { renderCommentHtml } from './comment-render'\n\n/** @public */\nexport interface CommentBodyProps {\n\trichText: TLRichText\n\t/** Maps a member id to its current display name, so \\@mentions show the live name. */\n\tresolveName?(id: string): string | undefined\n}\n\n/**\n * Renders a comment's rich-text body read-only through the limited comment extension set (no\n * headings), so formatting (bold, links, lists, highlight) is preserved rather than flattened, and\n * headings can never render. Use this as the `body` of a `CommentCard` on a canvas.\n * @public @react\n */\nexport function CommentBody({ richText, resolveName }: CommentBodyProps) {\n\tconst html = useMemo(() => renderCommentHtml(richText, resolveName), [richText, resolveName])\n\treturn <div className=\"cmt-text\" dangerouslySetInnerHTML={{ __html: html }} />\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AAnBR,mBAAwB;AAExB,4BAAkC;AAe3B,SAAS,YAAY,EAAE,UAAU,YAAY,GAAqB;AACxE,QAAM,WAAO,sBAAQ,UAAM,yCAAkB,UAAU,WAAW,GAAG,CAAC,UAAU,WAAW,CAAC;AAC5F,SAAO,4CAAC,SAAI,WAAU,YAAW,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AAC7E;",
+  "sourcesContent": ["import { useMemo } from 'react'\nimport { TLRichText } from 'tldraw'\nimport { renderCommentHtml } from './comment-render'\n\n/** @public */\nexport interface CommentBodyProps {\n\trichText: TLRichText\n\t/** Maps a member id to its current display name, so \\@mentions show the live name. */\n\tresolveName?(id: string): string | undefined\n}\n\n/**\n * Renders a comment's rich-text body read-only through the limited comment extension set (no\n * headings), so formatting (bold, links, lists, highlight) is preserved rather than flattened, and\n * headings can never render. Use this as the `body` of a `CommentCard` on a canvas.\n * @public @react\n */\nexport function CommentBody({ richText, resolveName }: CommentBodyProps) {\n\tconst html = useMemo(() => renderCommentHtml(richText, resolveName), [richText, resolveName])\n\treturn <div className=\"tlui-cmt-text\" dangerouslySetInnerHTML={{ __html: html }} />\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AAnBR,mBAAwB;AAExB,4BAAkC;AAe3B,SAAS,YAAY,EAAE,UAAU,YAAY,GAAqB;AACxE,QAAM,WAAO,sBAAQ,UAAM,yCAAkB,UAAU,WAAW,GAAG,CAAC,UAAU,WAAW,CAAC;AAC5F,SAAO,4CAAC,SAAI,WAAU,iBAAgB,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AAClF;",
   "names": []
 }

package/dist-cjs/canvas/comments-filter-menu.js

@@ -39,7 +39,7 @@ function CommentsFilterMenu({
       "button",
       {
         type: "button",
-        className: "cmt-header-btn",
+        className: "tlui-cmt-header-btn",
         title: msg("comments.filter"),
         "aria-label": msg("comments.filter"),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterIcon, {})

package/dist-cjs/canvas/comments-filter-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comments-filter-menu.tsx"],
-  "sourcesContent": ["import {\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n\tTldrawUiMenuCheckboxItem,\n\tTldrawUiMenuContextProvider,\n\tTldrawUiMenuGroup,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { SidebarFilters } from './sidebar-filters'\nimport { sidebarFilters } from './state'\n\n/** @public */\nexport interface CommentsFilterMenuProps {\n\t/** Whether to offer the \"only your threads\" toggle (needs a known current user). */\n\tcanFilterByAuthor?: boolean\n\t/** Whether to offer the \"only unread\" toggle (needs a read-status source). */\n\tcanFilterByUnread?: boolean\n}\n\n/** The funnel dropdown in the sidebar header: toggles for which threads the list shows.\n * @public @react */\nexport function CommentsFilterMenu({\n\tcanFilterByAuthor,\n\tcanFilterByUnread,\n}: CommentsFilterMenuProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst filters = useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n\tconst toggle = (key: keyof SidebarFilters) => {\n\t\tsidebarFilters.update(editor, (f) => ({ ...f, [key]: !f[key] }))\n\t}\n\n\treturn (\n\t\t<TldrawUiDropdownMenuRoot id=\"comments-filter\">\n\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"cmt-header-btn\"\n\t\t\t\t\ttitle={msg('comments.filter')}\n\t\t\t\t\taria-label={msg('comments.filter')}\n\t\t\t\t>\n\t\t\t\t\t<FilterIcon />\n\t\t\t\t</button>\n\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t<TldrawUiDropdownMenuContent side=\"bottom\" align=\"start\">\n\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"menu\">\n\t\t\t\t\t<TldrawUiMenuGroup id=\"comments-filter\">\n\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\tid=\"show-resolved\"\n\t\t\t\t\t\t\tlabel=\"comments.show-resolved\"\n\t\t\t\t\t\t\tchecked={filters.showResolved}\n\t\t\t\t\t\t\tonSelect={() => toggle('showResolved')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{canFilterByAuthor && (\n\t\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\t\tid=\"only-mine\"\n\t\t\t\t\t\t\t\tlabel=\"comments.only-mine\"\n\t\t\t\t\t\t\t\tchecked={filters.onlyMine}\n\t\t\t\t\t\t\t\tonSelect={() => toggle('onlyMine')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{canFilterByUnread && (\n\t\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\t\tid=\"only-unread\"\n\t\t\t\t\t\t\t\tlabel=\"comments.only-unread\"\n\t\t\t\t\t\t\t\tchecked={filters.onlyUnread}\n\t\t\t\t\t\t\t\tonSelect={() => toggle('onlyUnread')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\tid=\"only-current-page\"\n\t\t\t\t\t\t\tlabel=\"comments.only-current-page\"\n\t\t\t\t\t\t\tchecked={filters.onlyCurrentPage}\n\t\t\t\t\t\t\tonSelect={() => toggle('onlyCurrentPage')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t</TldrawUiDropdownMenuContent>\n\t\t</TldrawUiDropdownMenuRoot>\n\t)\n}\n\nfunction FilterIcon() {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<line x1=\"2.5\" y1=\"5\" x2=\"13.5\" y2=\"5\" />\n\t\t\t<line x1=\"2.5\" y1=\"11\" x2=\"13.5\" y2=\"11\" />\n\t\t\t<circle cx=\"6\" cy=\"5\" r=\"1.9\" fill=\"currentColor\" stroke=\"none\" />\n\t\t\t<circle cx=\"10.5\" cy=\"11\" r=\"1.9\" fill=\"currentColor\" stroke=\"none\" />\n\t\t</svg>\n\t)\n}\n"],
+  "sourcesContent": ["import {\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n\tTldrawUiMenuCheckboxItem,\n\tTldrawUiMenuContextProvider,\n\tTldrawUiMenuGroup,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { SidebarFilters } from './sidebar-filters'\nimport { sidebarFilters } from './state'\n\n/** @public */\nexport interface CommentsFilterMenuProps {\n\t/** Whether to offer the \"only your threads\" toggle (needs a known current user). */\n\tcanFilterByAuthor?: boolean\n\t/** Whether to offer the \"only unread\" toggle (needs a read-status source). */\n\tcanFilterByUnread?: boolean\n}\n\n/** The funnel dropdown in the sidebar header: toggles for which threads the list shows.\n * @public @react */\nexport function CommentsFilterMenu({\n\tcanFilterByAuthor,\n\tcanFilterByUnread,\n}: CommentsFilterMenuProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst filters = useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n\tconst toggle = (key: keyof SidebarFilters) => {\n\t\tsidebarFilters.update(editor, (f) => ({ ...f, [key]: !f[key] }))\n\t}\n\n\treturn (\n\t\t<TldrawUiDropdownMenuRoot id=\"comments-filter\">\n\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"tlui-cmt-header-btn\"\n\t\t\t\t\ttitle={msg('comments.filter')}\n\t\t\t\t\taria-label={msg('comments.filter')}\n\t\t\t\t>\n\t\t\t\t\t<FilterIcon />\n\t\t\t\t</button>\n\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t<TldrawUiDropdownMenuContent side=\"bottom\" align=\"start\">\n\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"menu\">\n\t\t\t\t\t<TldrawUiMenuGroup id=\"comments-filter\">\n\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\tid=\"show-resolved\"\n\t\t\t\t\t\t\tlabel=\"comments.show-resolved\"\n\t\t\t\t\t\t\tchecked={filters.showResolved}\n\t\t\t\t\t\t\tonSelect={() => toggle('showResolved')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{canFilterByAuthor && (\n\t\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\t\tid=\"only-mine\"\n\t\t\t\t\t\t\t\tlabel=\"comments.only-mine\"\n\t\t\t\t\t\t\t\tchecked={filters.onlyMine}\n\t\t\t\t\t\t\t\tonSelect={() => toggle('onlyMine')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{canFilterByUnread && (\n\t\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\t\tid=\"only-unread\"\n\t\t\t\t\t\t\t\tlabel=\"comments.only-unread\"\n\t\t\t\t\t\t\t\tchecked={filters.onlyUnread}\n\t\t\t\t\t\t\t\tonSelect={() => toggle('onlyUnread')}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TldrawUiMenuCheckboxItem\n\t\t\t\t\t\t\tid=\"only-current-page\"\n\t\t\t\t\t\t\tlabel=\"comments.only-current-page\"\n\t\t\t\t\t\t\tchecked={filters.onlyCurrentPage}\n\t\t\t\t\t\t\tonSelect={() => toggle('onlyCurrentPage')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t</TldrawUiDropdownMenuContent>\n\t\t</TldrawUiDropdownMenuRoot>\n\t)\n}\n\nfunction FilterIcon() {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<line x1=\"2.5\" y1=\"5\" x2=\"13.5\" y2=\"5\" />\n\t\t\t<line x1=\"2.5\" y1=\"11\" x2=\"13.5\" y2=\"11\" />\n\t\t\t<circle cx=\"6\" cy=\"5\" r=\"1.9\" fill=\"currentColor\" stroke=\"none\" />\n\t\t\t<circle cx=\"10.5\" cy=\"11\" r=\"1.9\" fill=\"currentColor\" stroke=\"none\" />\n\t\t</svg>\n\t)\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CK;AA5CL,oBAUO;AAEP,mBAA+B;AAYxB,SAAS,mBAAmB;AAAA,EAClC;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,8BAAe;AAC3B,QAAM,cAAU,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACtF,QAAM,SAAS,CAAC,QAA8B;AAC7C,gCAAe,OAAO,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;AAAA,EAChE;AAEA,SACC,6CAAC,0CAAyB,IAAG,mBAC5B;AAAA,gDAAC,6CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,IAAI,iBAAiB;AAAA,QAC5B,cAAY,IAAI,iBAAiB;AAAA,QAEjC,sDAAC,cAAW;AAAA;AAAA,IACb,GACD;AAAA,IACA,4CAAC,6CAA4B,MAAK,UAAS,OAAM,SAChD,sDAAC,6CAA4B,MAAK,QAAO,UAAS,QACjD,uDAAC,mCAAkB,IAAG,mBACrB;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,cAAc;AAAA;AAAA,MACtC;AAAA,MACC,qBACA;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,UAAU;AAAA;AAAA,MAClC;AAAA,MAEA,qBACA;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,YAAY;AAAA;AAAA,MACpC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACA,IAAG;AAAA,UACH,OAAM;AAAA,UACN,SAAS,QAAQ;AAAA,UACjB,UAAU,MAAM,OAAO,iBAAiB;AAAA;AAAA,MACzC;AAAA,OACD,GACD,GACD;AAAA,KACD;AAEF;AAEA,SAAS,aAAa;AACrB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,eAAY;AAAA,MAEZ;AAAA,oDAAC,UAAK,IAAG,OAAM,IAAG,KAAI,IAAG,QAAO,IAAG,KAAI;AAAA,QACvC,4CAAC,UAAK,IAAG,OAAM,IAAG,MAAK,IAAG,QAAO,IAAG,MAAK;AAAA,QACzC,4CAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,MAAK,gBAAe,QAAO,QAAO;AAAA,QAChE,4CAAC,YAAO,IAAG,QAAO,IAAG,MAAK,GAAE,OAAM,MAAK,gBAAe,QAAO,QAAO;AAAA;AAAA;AAAA,EACrE;AAEF;",
   "names": []
 }

package/dist-cjs/canvas/comments-overflow-menu.js

@@ -34,7 +34,7 @@ function CommentsOverflowMenu() {
       "button",
       {
         type: "button",
-        className: "cmt-header-btn",
+        className: "tlui-cmt-header-btn",
         title: msg("comments.more-options"),
         "aria-label": msg("comments.more-options"),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MoreIcon, {})
@@ -44,11 +44,11 @@ function CommentsOverflowMenu() {
       "button",
       {
         type: "button",
-        className: "cmt-menu-item",
+        className: "tlui-cmt-menu-item",
         onClick: () => (0, import_state.toggleCommentsHidden)(editor),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: hidden ? msg("comments.show") : msg("comments.hide") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-menu-item__shortcut", children: HIDE_SHORTCUT })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-menu-item__shortcut", children: HIDE_SHORTCUT })
         ]
       }
     ) }) }) })

package/dist-cjs/canvas/comments-overflow-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comments-overflow-menu.tsx"],
-  "sourcesContent": ["import {\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuGroup,\n\tTldrawUiDropdownMenuItem,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { commentsHidden, toggleCommentsHidden } from './state'\n\n// A keyboard-shortcut glyph, not translatable copy \u2014 kept out of JSX as a constant.\nconst HIDE_SHORTCUT = '\u21E7C'\n\n/** The overflow (\u22EF) dropdown in the sidebar header. For now it holds the hide/show-comments\n *  toggle; it's the home for later comment-wide controls (notifications, mark all as read).\n * @public @react */\nexport function CommentsOverflowMenu() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\n\treturn (\n\t\t<TldrawUiDropdownMenuRoot id=\"comments-overflow\">\n\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"cmt-header-btn\"\n\t\t\t\t\ttitle={msg('comments.more-options')}\n\t\t\t\t\taria-label={msg('comments.more-options')}\n\t\t\t\t>\n\t\t\t\t\t<MoreIcon />\n\t\t\t\t</button>\n\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t<TldrawUiDropdownMenuContent side=\"bottom\" align=\"end\">\n\t\t\t\t<TldrawUiDropdownMenuGroup>\n\t\t\t\t\t<TldrawUiDropdownMenuItem>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclassName=\"cmt-menu-item\"\n\t\t\t\t\t\t\tonClick={() => toggleCommentsHidden(editor)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>{hidden ? msg('comments.show') : msg('comments.hide')}</span>\n\t\t\t\t\t\t\t<span className=\"cmt-menu-item__shortcut\">{HIDE_SHORTCUT}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</TldrawUiDropdownMenuItem>\n\t\t\t\t</TldrawUiDropdownMenuGroup>\n\t\t\t</TldrawUiDropdownMenuContent>\n\t\t</TldrawUiDropdownMenuRoot>\n\t)\n}\n\nfunction MoreIcon() {\n\treturn (\n\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t<circle cx=\"3\" cy=\"8\" r=\"1.4\" />\n\t\t\t<circle cx=\"8\" cy=\"8\" r=\"1.4\" />\n\t\t\t<circle cx=\"13\" cy=\"8\" r=\"1.4\" />\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCK;AAhCL,oBASO;AACP,mBAAqD;AAGrD,MAAM,gBAAgB;AAKf,SAAS,uBAAuB;AACtC,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,8BAAe;AAC3B,QAAM,aAAS,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAErF,SACC,6CAAC,0CAAyB,IAAG,qBAC5B;AAAA,gDAAC,6CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,IAAI,uBAAuB;AAAA,QAClC,cAAY,IAAI,uBAAuB;AAAA,QAEvC,sDAAC,YAAS;AAAA;AAAA,IACX,GACD;AAAA,IACA,4CAAC,6CAA4B,MAAK,UAAS,OAAM,OAChD,sDAAC,2CACA,sDAAC,0CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,UAAM,mCAAqB,MAAM;AAAA,QAE1C;AAAA,sDAAC,UAAM,mBAAS,IAAI,eAAe,IAAI,IAAI,eAAe,GAAE;AAAA,UAC5D,4CAAC,UAAK,WAAU,2BAA2B,yBAAc;AAAA;AAAA;AAAA,IAC1D,GACD,GACD,GACD;AAAA,KACD;AAEF;AAEA,SAAS,WAAW;AACnB,SACC,6CAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBAAe,eAAY,QAC/E;AAAA,gDAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,IAC9B,4CAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,IAC9B,4CAAC,YAAO,IAAG,MAAK,IAAG,KAAI,GAAE,OAAM;AAAA,KAChC;AAEF;",
+  "sourcesContent": ["import {\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuGroup,\n\tTldrawUiDropdownMenuItem,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n\tuseEditor,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { commentsHidden, toggleCommentsHidden } from './state'\n\n// A keyboard-shortcut glyph, not translatable copy \u2014 kept out of JSX as a constant.\nconst HIDE_SHORTCUT = '\u21E7C'\n\n/** The overflow (\u22EF) dropdown in the sidebar header. For now it holds the hide/show-comments\n *  toggle; it's the home for later comment-wide controls (notifications, mark all as read).\n * @public @react */\nexport function CommentsOverflowMenu() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\n\treturn (\n\t\t<TldrawUiDropdownMenuRoot id=\"comments-overflow\">\n\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"tlui-cmt-header-btn\"\n\t\t\t\t\ttitle={msg('comments.more-options')}\n\t\t\t\t\taria-label={msg('comments.more-options')}\n\t\t\t\t>\n\t\t\t\t\t<MoreIcon />\n\t\t\t\t</button>\n\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t<TldrawUiDropdownMenuContent side=\"bottom\" align=\"end\">\n\t\t\t\t<TldrawUiDropdownMenuGroup>\n\t\t\t\t\t<TldrawUiDropdownMenuItem>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclassName=\"tlui-cmt-menu-item\"\n\t\t\t\t\t\t\tonClick={() => toggleCommentsHidden(editor)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>{hidden ? msg('comments.show') : msg('comments.hide')}</span>\n\t\t\t\t\t\t\t<span className=\"tlui-cmt-menu-item__shortcut\">{HIDE_SHORTCUT}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</TldrawUiDropdownMenuItem>\n\t\t\t\t</TldrawUiDropdownMenuGroup>\n\t\t\t</TldrawUiDropdownMenuContent>\n\t\t</TldrawUiDropdownMenuRoot>\n\t)\n}\n\nfunction MoreIcon() {\n\treturn (\n\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t<circle cx=\"3\" cy=\"8\" r=\"1.4\" />\n\t\t\t<circle cx=\"8\" cy=\"8\" r=\"1.4\" />\n\t\t\t<circle cx=\"13\" cy=\"8\" r=\"1.4\" />\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCK;AAhCL,oBASO;AACP,mBAAqD;AAGrD,MAAM,gBAAgB;AAKf,SAAS,uBAAuB;AACtC,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,8BAAe;AAC3B,QAAM,aAAS,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAErF,SACC,6CAAC,0CAAyB,IAAG,qBAC5B;AAAA,gDAAC,6CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,IAAI,uBAAuB;AAAA,QAClC,cAAY,IAAI,uBAAuB;AAAA,QAEvC,sDAAC,YAAS;AAAA;AAAA,IACX,GACD;AAAA,IACA,4CAAC,6CAA4B,MAAK,UAAS,OAAM,OAChD,sDAAC,2CACA,sDAAC,0CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,UAAM,mCAAqB,MAAM;AAAA,QAE1C;AAAA,sDAAC,UAAM,mBAAS,IAAI,eAAe,IAAI,IAAI,eAAe,GAAE;AAAA,UAC5D,4CAAC,UAAK,WAAU,gCAAgC,yBAAc;AAAA;AAAA;AAAA,IAC/D,GACD,GACD,GACD;AAAA,KACD;AAEF;AAEA,SAAS,WAAW;AACnB,SACC,6CAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBAAe,eAAY,QAC/E;AAAA,gDAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,IAC9B,4CAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,IAC9B,4CAAC,YAAO,IAAG,MAAK,IAAG,KAAI,GAAE,OAAM;AAAA,KAChC;AAEF;",
   "names": []
 }

package/dist-cjs/canvas/comments-overlay.js

@@ -99,17 +99,17 @@ function CanvasCommentsLayer(props) {
   const pending = (0, import_state.usePendingComment)();
   const openId = (0, import_tldraw.useValue)("open thread id", () => import_state.openThreadId.get(editor), [editor]);
   const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
-  const [movedThreadIds, setMovedThreadIds] = (0, import_react.useState)(EMPTY_SET);
+  const [heldThreadIds, setHeldThreadIds] = (0, import_react.useState)(EMPTY_SET);
   const adoptOnRebuild = (0, import_react.useRef)(false);
   const clusterLeaves = (0, import_tldraw.useValue)(
     "comment cluster leaves",
     () => (0, import_cluster_input.collectClusterLeaves)(
       editor,
-      threads.filter((thread) => !movedThreadIds.has(thread.id)),
+      threads.filter((thread) => !heldThreadIds.has(thread.id)),
       import_state.openThreadId.get(editor),
       impreciseShapeAnchor
     ),
-    [editor, threads, impreciseShapeAnchor, movedThreadIds]
+    [editor, threads, impreciseShapeAnchor, heldThreadIds]
   );
   const clusterZoomBounds = (0, import_tldraw.useValue)(
     "comment cluster zoom bounds",
@@ -124,21 +124,41 @@ function CanvasCommentsLayer(props) {
   }, [clusterLeaves, clusterZoomBounds, editor]);
   const [renderedModel, setRenderedModel] = (0, import_react.useState)(latestModel);
   let clusterModel = renderedModel;
-  if (renderedModel !== latestModel && (adoptOnRebuild.current || hasRemovedLeaves(renderedModel.table, latestModel.table))) {
+  const pageId = (0, import_tldraw.useValue)("comment cluster page", () => editor.getCurrentPageId(), [editor]);
+  const pageRef = (0, import_react.useRef)(pageId);
+  if (pageRef.current !== pageId) {
+    pageRef.current = pageId;
+    adoptOnRebuild.current = false;
+    latestModel.runtime.seed(editor.getZoomLevel());
+    if (heldThreadIds.size > 0) setHeldThreadIds(EMPTY_SET);
+    setRenderedModel(latestModel);
+    clusterModel = latestModel;
+  }
+  const rejoinPending = heldThreadIds.size === 0 && adoptOnRebuild.current;
+  if (renderedModel !== latestModel && rejoinPending) {
     adoptOnRebuild.current = false;
     latestModel.runtime.seedFrom(editor.getZoomLevel(), renderedModel.runtime.getVisible());
     setRenderedModel(latestModel);
     clusterModel = latestModel;
+  } else if (heldThreadIds.size === 0 && renderedModel === latestModel) {
+    adoptOnRebuild.current = false;
   }
   const newlyMovedIds = findMovedClusteredLeafIds(clusterModel, latestModel);
   if (newlyMovedIds.length > 0) {
-    console.debug(`[comments] pins popped out of clustering: ${newlyMovedIds.join(", ")}`);
-    const next = new Set(movedThreadIds);
+    const next = new Set(heldThreadIds);
     for (const id of newlyMovedIds) next.add(id);
-    setMovedThreadIds(next);
+    setHeldThreadIds(next);
+  }
+  {
+    const latestLeafIds = new Set(latestModel.table.leaves.map((leaf) => leaf.id));
+    for (const leaf of clusterModel.table.leaves) {
+      if (!latestLeafIds.has(leaf.id)) {
+        clusterModel.runtime.detachLeaf(leaf.id);
+      }
+    }
   }
   (0, import_react.useEffect)(() => {
-    if (movedThreadIds.size === 0) return;
+    if (heldThreadIds.size === 0) return;
     let lastZoom = editor.getZoomLevel();
     return (0, import_tldraw.react)("rejoin moved comment pins on zoom out", () => {
       const zoom = editor.getZoomLevel();
@@ -146,9 +166,9 @@ function CanvasCommentsLayer(props) {
       lastZoom = zoom;
       if (zoom >= prevZoom) return;
       adoptOnRebuild.current = true;
-      setMovedThreadIds(EMPTY_SET);
+      setHeldThreadIds(EMPTY_SET);
     });
-  }, [movedThreadIds, editor]);
+  }, [heldThreadIds, editor]);
   (0, import_react.useEffect)(() => {
     if (clusterModel === latestModel) return;
     let lastZoom = editor.getZoomLevel();
@@ -161,31 +181,31 @@ function CanvasCommentsLayer(props) {
       setRenderedModel(latestModel);
     });
   }, [clusterModel, latestModel, editor]);
+  const partitionVersion = clusterModel.runtime.version;
   const orphanThreads = (0, import_react.useMemo)(() => {
     if (clusterModel === latestModel) return [];
-    const renderedIds = new Set(clusterModel.table.leaves.map((leaf) => leaf.id));
+    const displayed = /* @__PURE__ */ new Set();
+    for (const node of clusterModel.runtime.getVisible().values()) {
+      for (const member of node.members) displayed.add(member);
+    }
     const latestIds = new Set(latestModel.table.leaves.map((leaf) => leaf.id));
-    return threads.filter((thread) => latestIds.has(thread.id) && !renderedIds.has(thread.id));
-  }, [clusterModel, latestModel, threads]);
-  const movedThreads = (0, import_react.useMemo)(
-    () => threads.filter((thread) => movedThreadIds.has(thread.id) && thread.id !== openId),
-    [threads, movedThreadIds, openId]
+    return threads.filter((thread) => latestIds.has(thread.id) && !displayed.has(thread.id));
+  }, [clusterModel, latestModel, threads, partitionVersion]);
+  const heldThreads = (0, import_react.useMemo)(
+    () => threads.filter((thread) => heldThreadIds.has(thread.id) && thread.id !== openId),
+    [threads, heldThreadIds, openId]
   );
-  const clusterCursor = (0, import_tldraw.useValue)(
-    "comment cluster cursor",
+  (0, import_tldraw.useValue)(
+    "comment cluster version",
     () => {
       clusterModel.runtime.onCamera(editor.getZoomLevel());
-      return clusterModel.runtime.k;
+      return clusterModel.runtime.version;
     },
     [clusterModel, editor]
   );
   const visibleNodes = (0, import_react.useMemo)(() => {
-    const nodes = Array.from(clusterModel.runtime.getVisible().values());
-    console.debug(
-      `[comments] cluster cursor k=${clusterCursor} \u2192 re-rendering ${nodes.length} visible nodes`
-    );
-    return nodes;
-  }, [clusterModel, clusterCursor]);
+    return Array.from(clusterModel.runtime.getVisible().values());
+  }, [clusterModel, partitionVersion]);
   const fadeNodes = useFadeVisibleNodes(visibleNodes, clusterModel);
   const threadsById = (0, import_react.useMemo)(
     () => new Map(threads.map((thread) => [thread.id, thread])),
@@ -244,7 +264,7 @@ function CanvasCommentsLayer(props) {
       if (e.key !== "Escape" || import_state.openThreadId.get(editor) === null) return;
       if ((0, import_mention_suggestion.isMentionPickerOpen)()) return;
       const target = e.target;
-      if (target && target.closest(".cmt-editing")) return;
+      if (target && target.closest(".tlui-cmt-editing")) return;
       import_state.openThreadId.set(editor, null);
       e.preventDefault();
       e.stopPropagation();
@@ -265,7 +285,7 @@ function CanvasCommentsLayer(props) {
   }, [editor]);
   if (hidden) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: layerRef, className: "cmt-canvas-layer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: layerRef, className: "tlui-cmt-canvas-layer", children: [
       options.enableClustering ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         fadeNodes.map(({ node, phase }) => {
           let content;
@@ -296,7 +316,7 @@ function CanvasCommentsLayer(props) {
           },
           thread.id
         )),
-        movedThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        heldThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           ThreadPin,
           {
             editor,
@@ -405,7 +425,7 @@ function cancelClusterFadeFrame(frame) {
   else window.clearTimeout(frame);
 }
 function clusterFadeClassName(phase) {
-  return `cmt-cluster-fade cmt-cluster-fade--${phase}`;
+  return `tlui-cmt-cluster-fade tlui-cmt-cluster-fade--${phase}`;
 }
 function findMovedClusteredLeafIds(rendered, latest) {
   if (rendered.table === latest.table) return [];
@@ -422,11 +442,6 @@ function findMovedClusteredLeafIds(rendered, latest) {
   }
   return moved;
 }
-function hasRemovedLeaves(rendered, latest) {
-  if (rendered.leaves.length === 0) return false;
-  const latestIds = new Set(latest.leaves.map((leaf) => leaf.id));
-  return rendered.leaves.some((leaf) => !latestIds.has(leaf.id));
-}
 function getClusterZoomBounds(editor) {
   const cameraOptions = editor.getCameraOptions();
   const baseZoom = cameraOptions.constraints ? editor.getBaseZoom() : 1;
@@ -491,7 +506,7 @@ const ClusterBadge = (0, import_react.memo)(function ClusterBadge2({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: "cmt-canvas-cluster",
+      className: "tlui-cmt-canvas-cluster",
       style: { left: point.x, top: point.y },
       onPointerDown: stop,
       onClick: (e) => {
@@ -516,7 +531,7 @@ function ThreadPopover({
   (0, import_tldraw.usePassThroughWheelEvents)(ref);
   (0, import_tldraw.usePassThroughMouseOverEvents)(ref);
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "cmt-canvas-popover", style, onPointerDown: stop, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "tlui-cmt-canvas-popover", style, onPointerDown: stop, children }),
     container
   );
 }
@@ -561,7 +576,7 @@ function RegionBox({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: movable ? "cmt-canvas-region cmt-canvas-region--movable" : "cmt-canvas-region",
+      className: movable ? "tlui-cmt-canvas-region tlui-cmt-canvas-region--movable" : "tlui-cmt-canvas-region",
       style: rect,
       onPointerDown: movable ? startMove : void 0,
       onPointerMove: movable ? onMove : void 0,
@@ -635,7 +650,7 @@ function RegionResizeHandles({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: points.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: "cmt-canvas-region-handle",
+      className: "tlui-cmt-canvas-region-handle",
       style: { left: h.left, top: h.top, cursor: h.cursor },
       onPointerDown: startResize,
       onPointerMove: onResize(h),
@@ -700,11 +715,11 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     const onPointerDown = (e) => {
       const target = e.target;
       if (!target) return;
-      if (target.closest(".cmt-canvas-popover")) return;
+      if (target.closest(".tlui-cmt-canvas-popover")) return;
       const marker = markerRef.current;
       if (marker && marker.contains(target)) return;
-      if (target.closest(".cmt-canvas-region-handle, .cmt-canvas-region--movable")) return;
-      if (target.closest(".tlui-menu, [data-radix-popper-content-wrapper], .cmt-mention-popup"))
+      if (target.closest(".tlui-cmt-canvas-region-handle, .tlui-cmt-canvas-region--movable")) return;
+      if (target.closest(".tlui-menu, [data-radix-popper-content-wrapper], .tlui-cmt-mention-popup"))
         return;
       import_state.openThreadId.set(editor, null);
     };
@@ -780,7 +795,7 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
-          className: "cmt-editing",
+          className: "tlui-cmt-editing",
           onKeyDown: (e) => {
             if (e.key === "Escape") {
               setEditingId(null);
@@ -812,7 +827,7 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
         actions: comment.authorId === currentUserId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
-            className: "cmt-thread__action",
+            className: "tlui-cmt-thread__action",
             title: msg("comments.edit"),
             onClick: () => startEdit(comment),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "dots-horizontal", label: msg("comments.edit"), small: true })
@@ -825,7 +840,7 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     currentUserId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
-        className: "cmt-thread__action",
+        className: "tlui-cmt-thread__action",
         title: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
         onClick: toggleResolve,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -841,7 +856,7 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     currentUserId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
-        className: "cmt-thread__action",
+        className: "tlui-cmt-thread__action",
         title: msg("comments.delete"),
         onClick: deleteThread,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "trash", label: msg("comments.delete"), small: true })
@@ -850,7 +865,7 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
-        className: "cmt-thread__action",
+        className: "tlui-cmt-thread__action",
         title: msg("comments.dismiss"),
         onClick: () => import_state.openThreadId.set(editor, null),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiIcon, { icon: "cross-2", label: msg("comments.dismiss"), small: true })
@@ -943,14 +958,14 @@ const ThreadPin = (0, import_react.memo)(function ThreadPin2({
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        className: open ? "cmt-canvas-pin cmt-canvas-pin--open" : "cmt-canvas-pin",
+        className: open ? "tlui-cmt-canvas-pin tlui-cmt-canvas-pin--open" : "tlui-cmt-canvas-pin",
         style: { left: renderPoint.x, top: renderPoint.y },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
               ref: markerRef,
-              className: "cmt-canvas-pin__marker",
+              className: "tlui-cmt-canvas-pin__marker",
               onPointerDown: startDrag,
               onPointerMove: onDrag,
               onPointerUp: endDrag,
@@ -1019,7 +1034,7 @@ function PendingComposer({
       const el = ref.current;
       const target = e.target;
       if (!el || !target) return;
-      if (el.contains(target) || target.closest(".cmt-mention-popup")) return;
+      if (el.contains(target) || target.closest(".tlui-cmt-mention-popup")) return;
       import_state.pendingComment.set(editor, null);
     };
     document.addEventListener("pointerdown", onPointerDown, true);
@@ -1051,7 +1066,7 @@ function PendingComposer({
       "div",
       {
         ref,
-        className: "cmt-canvas-composer",
+        className: "tlui-cmt-canvas-composer",
         style: { left: point.x, top: point.y },
         onPointerDown: stop,
         onKeyDown: (e) => {