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

package/dist-esm/canvas/comments-filter-menu.mjs.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": "AA4CK,cAKA,YALA;AA5CL;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,SAAS,sBAAsB;AAYxB,SAAS,mBAAmB;AAAA,EAClC;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,UAAU,SAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACtF,QAAM,SAAS,CAAC,QAA8B;AAC7C,mBAAe,OAAO,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;AAAA,EAChE;AAEA,SACC,qBAAC,4BAAyB,IAAG,mBAC5B;AAAA,wBAAC,+BACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,IAAI,iBAAiB;AAAA,QAC5B,cAAY,IAAI,iBAAiB;AAAA,QAEjC,8BAAC,cAAW;AAAA;AAAA,IACb,GACD;AAAA,IACA,oBAAC,+BAA4B,MAAK,UAAS,OAAM,SAChD,8BAAC,+BAA4B,MAAK,QAAO,UAAS,QACjD,+BAAC,qBAAkB,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,4BAAC,UAAK,IAAG,OAAM,IAAG,KAAI,IAAG,QAAO,IAAG,KAAI;AAAA,QACvC,oBAAC,UAAK,IAAG,OAAM,IAAG,MAAK,IAAG,QAAO,IAAG,MAAK;AAAA,QACzC,oBAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,MAAK,gBAAe,QAAO,QAAO;AAAA,QAChE,oBAAC,YAAO,IAAG,QAAO,IAAG,MAAK,GAAE,OAAM,MAAK,gBAAe,QAAO,QAAO;AAAA;AAAA;AAAA,EACrE;AAEF;",
   "names": []
 }

package/dist-esm/canvas/comments-overflow-menu.mjs

@@ -20,7 +20,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__ */ jsx(MoreIcon, {})
@@ -30,11 +30,11 @@ function CommentsOverflowMenu() {
       "button",
       {
         type: "button",
-        className: "cmt-menu-item",
+        className: "tlui-cmt-menu-item",
         onClick: () => toggleCommentsHidden(editor),
         children: [
           /* @__PURE__ */ jsx("span", { children: hidden ? msg("comments.show") : msg("comments.hide") }),
-          /* @__PURE__ */ jsx("span", { className: "cmt-menu-item__shortcut", children: HIDE_SHORTCUT })
+          /* @__PURE__ */ jsx("span", { className: "tlui-cmt-menu-item__shortcut", children: HIDE_SHORTCUT })
         ]
       }
     ) }) }) })

package/dist-esm/canvas/comments-overflow-menu.mjs.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": "AAgCK,cAMC,YAND;AAhCL;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,gBAAgB,4BAA4B;AAGrD,MAAM,gBAAgB;AAKf,SAAS,uBAAuB;AACtC,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS,SAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAErF,SACC,qBAAC,4BAAyB,IAAG,qBAC5B;AAAA,wBAAC,+BACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,IAAI,uBAAuB;AAAA,QAClC,cAAY,IAAI,uBAAuB;AAAA,QAEvC,8BAAC,YAAS;AAAA;AAAA,IACX,GACD;AAAA,IACA,oBAAC,+BAA4B,MAAK,UAAS,OAAM,OAChD,8BAAC,6BACA,8BAAC,4BACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM,qBAAqB,MAAM;AAAA,QAE1C;AAAA,8BAAC,UAAM,mBAAS,IAAI,eAAe,IAAI,IAAI,eAAe,GAAE;AAAA,UAC5D,oBAAC,UAAK,WAAU,2BAA2B,yBAAc;AAAA;AAAA;AAAA,IAC1D,GACD,GACD,GACD;AAAA,KACD;AAEF;AAEA,SAAS,WAAW;AACnB,SACC,qBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBAAe,eAAY,QAC/E;AAAA,wBAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,IAC9B,oBAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,IAC9B,oBAAC,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": "AAgCK,cAMC,YAND;AAhCL;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,gBAAgB,4BAA4B;AAGrD,MAAM,gBAAgB;AAKf,SAAS,uBAAuB;AACtC,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS,SAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAErF,SACC,qBAAC,4BAAyB,IAAG,qBAC5B;AAAA,wBAAC,+BACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,IAAI,uBAAuB;AAAA,QAClC,cAAY,IAAI,uBAAuB;AAAA,QAEvC,8BAAC,YAAS;AAAA;AAAA,IACX,GACD;AAAA,IACA,oBAAC,+BAA4B,MAAK,UAAS,OAAM,OAChD,8BAAC,6BACA,8BAAC,4BACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM,qBAAqB,MAAM;AAAA,QAE1C;AAAA,8BAAC,UAAM,mBAAS,IAAI,eAAe,IAAI,IAAI,eAAe,GAAE;AAAA,UAC5D,oBAAC,UAAK,WAAU,gCAAgC,yBAAc;AAAA;AAAA;AAAA,IAC/D,GACD,GACD,GACD;AAAA,KACD;AAEF;AAEA,SAAS,WAAW;AACnB,SACC,qBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBAAe,eAAY,QAC/E;AAAA,wBAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,IAC9B,oBAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,IAC9B,oBAAC,YAAO,IAAG,MAAK,IAAG,KAAI,GAAE,OAAM;AAAA,KAChC;AAEF;",
   "names": []
 }

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

@@ -109,17 +109,17 @@ function CanvasCommentsLayer(props) {
   const pending = usePendingComment();
   const openId = useValue("open thread id", () => openThreadId.get(editor), [editor]);
   const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor;
-  const [movedThreadIds, setMovedThreadIds] = useState(EMPTY_SET);
+  const [heldThreadIds, setHeldThreadIds] = useState(EMPTY_SET);
   const adoptOnRebuild = useRef(false);
   const clusterLeaves = useValue(
     "comment cluster leaves",
     () => collectClusterLeaves(
       editor,
-      threads.filter((thread) => !movedThreadIds.has(thread.id)),
+      threads.filter((thread) => !heldThreadIds.has(thread.id)),
       openThreadId.get(editor),
       impreciseShapeAnchor
     ),
-    [editor, threads, impreciseShapeAnchor, movedThreadIds]
+    [editor, threads, impreciseShapeAnchor, heldThreadIds]
   );
   const clusterZoomBounds = useValue(
     "comment cluster zoom bounds",
@@ -134,21 +134,41 @@ function CanvasCommentsLayer(props) {
   }, [clusterLeaves, clusterZoomBounds, editor]);
   const [renderedModel, setRenderedModel] = useState(latestModel);
   let clusterModel = renderedModel;
-  if (renderedModel !== latestModel && (adoptOnRebuild.current || hasRemovedLeaves(renderedModel.table, latestModel.table))) {
+  const pageId = useValue("comment cluster page", () => editor.getCurrentPageId(), [editor]);
+  const pageRef = 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);
+      }
+    }
   }
   useEffect(() => {
-    if (movedThreadIds.size === 0) return;
+    if (heldThreadIds.size === 0) return;
     let lastZoom = editor.getZoomLevel();
     return react("rejoin moved comment pins on zoom out", () => {
       const zoom = editor.getZoomLevel();
@@ -156,9 +176,9 @@ function CanvasCommentsLayer(props) {
       lastZoom = zoom;
       if (zoom >= prevZoom) return;
       adoptOnRebuild.current = true;
-      setMovedThreadIds(EMPTY_SET);
+      setHeldThreadIds(EMPTY_SET);
     });
-  }, [movedThreadIds, editor]);
+  }, [heldThreadIds, editor]);
   useEffect(() => {
     if (clusterModel === latestModel) return;
     let lastZoom = editor.getZoomLevel();
@@ -171,31 +191,31 @@ function CanvasCommentsLayer(props) {
       setRenderedModel(latestModel);
     });
   }, [clusterModel, latestModel, editor]);
+  const partitionVersion = clusterModel.runtime.version;
   const orphanThreads = 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 = 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 = useMemo(
+    () => threads.filter((thread) => heldThreadIds.has(thread.id) && thread.id !== openId),
+    [threads, heldThreadIds, openId]
   );
-  const clusterCursor = useValue(
-    "comment cluster cursor",
+  useValue(
+    "comment cluster version",
     () => {
       clusterModel.runtime.onCamera(editor.getZoomLevel());
-      return clusterModel.runtime.k;
+      return clusterModel.runtime.version;
     },
     [clusterModel, editor]
   );
   const visibleNodes = 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 = useMemo(
     () => new Map(threads.map((thread) => [thread.id, thread])),
@@ -254,7 +274,7 @@ function CanvasCommentsLayer(props) {
       if (e.key !== "Escape" || openThreadId.get(editor) === null) return;
       if (isMentionPickerOpen()) return;
       const target = e.target;
-      if (target && target.closest(".cmt-editing")) return;
+      if (target && target.closest(".tlui-cmt-editing")) return;
       openThreadId.set(editor, null);
       e.preventDefault();
       e.stopPropagation();
@@ -275,7 +295,7 @@ function CanvasCommentsLayer(props) {
   }, [editor]);
   if (hidden) return null;
   return createPortal(
-    /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "cmt-canvas-layer", children: [
+    /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "tlui-cmt-canvas-layer", children: [
       options.enableClustering ? /* @__PURE__ */ jsxs(Fragment, { children: [
         fadeNodes.map(({ node, phase }) => {
           let content;
@@ -306,7 +326,7 @@ function CanvasCommentsLayer(props) {
           },
           thread.id
         )),
-        movedThreads.map((thread) => /* @__PURE__ */ jsx(
+        heldThreads.map((thread) => /* @__PURE__ */ jsx(
           ThreadPin,
           {
             editor,
@@ -415,7 +435,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 [];
@@ -432,11 +452,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;
@@ -501,7 +516,7 @@ const ClusterBadge = memo(function ClusterBadge2({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "cmt-canvas-cluster",
+      className: "tlui-cmt-canvas-cluster",
       style: { left: point.x, top: point.y },
       onPointerDown: stop,
       onClick: (e) => {
@@ -526,7 +541,7 @@ function ThreadPopover({
   usePassThroughWheelEvents(ref);
   usePassThroughMouseOverEvents(ref);
   return createPortal(
-    /* @__PURE__ */ jsx("div", { ref, className: "cmt-canvas-popover", style, onPointerDown: stop, children }),
+    /* @__PURE__ */ jsx("div", { ref, className: "tlui-cmt-canvas-popover", style, onPointerDown: stop, children }),
     container
   );
 }
@@ -571,7 +586,7 @@ function RegionBox({
   return /* @__PURE__ */ 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,
@@ -645,7 +660,7 @@ function RegionResizeHandles({
   return /* @__PURE__ */ jsx(Fragment, { children: points.map((h) => /* @__PURE__ */ 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),
@@ -710,11 +725,11 @@ const ThreadPin = 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;
       openThreadId.set(editor, null);
     };
@@ -790,7 +805,7 @@ const ThreadPin = memo(function ThreadPin2({
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: "cmt-editing",
+          className: "tlui-cmt-editing",
           onKeyDown: (e) => {
             if (e.key === "Escape") {
               setEditingId(null);
@@ -822,7 +837,7 @@ const ThreadPin = memo(function ThreadPin2({
         actions: comment.authorId === currentUserId ? /* @__PURE__ */ jsx(
           "button",
           {
-            className: "cmt-thread__action",
+            className: "tlui-cmt-thread__action",
             title: msg("comments.edit"),
             onClick: () => startEdit(comment),
             children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "dots-horizontal", label: msg("comments.edit"), small: true })
@@ -835,7 +850,7 @@ const ThreadPin = memo(function ThreadPin2({
     currentUserId && /* @__PURE__ */ jsx(
       "button",
       {
-        className: "cmt-thread__action",
+        className: "tlui-cmt-thread__action",
         title: msg(thread.resolved ? "comments.reopen" : "comments.resolve"),
         onClick: toggleResolve,
         children: /* @__PURE__ */ jsx(
@@ -851,7 +866,7 @@ const ThreadPin = memo(function ThreadPin2({
     currentUserId && /* @__PURE__ */ jsx(
       "button",
       {
-        className: "cmt-thread__action",
+        className: "tlui-cmt-thread__action",
         title: msg("comments.delete"),
         onClick: deleteThread,
         children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "trash", label: msg("comments.delete"), small: true })
@@ -860,7 +875,7 @@ const ThreadPin = memo(function ThreadPin2({
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: "cmt-thread__action",
+        className: "tlui-cmt-thread__action",
         title: msg("comments.dismiss"),
         onClick: () => openThreadId.set(editor, null),
         children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "cross-2", label: msg("comments.dismiss"), small: true })
@@ -953,14 +968,14 @@ const ThreadPin = memo(function ThreadPin2({
     /* @__PURE__ */ 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__ */ jsx(
             "div",
             {
               ref: markerRef,
-              className: "cmt-canvas-pin__marker",
+              className: "tlui-cmt-canvas-pin__marker",
               onPointerDown: startDrag,
               onPointerMove: onDrag,
               onPointerUp: endDrag,
@@ -1029,7 +1044,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;
       pendingComment.set(editor, null);
     };
     document.addEventListener("pointerdown", onPointerDown, true);
@@ -1061,7 +1076,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) => {