@tldraw/commenting 0.0.0-bootstrap

package/dist-cjs/canvas/cluster-input.js

@@ -0,0 +1,40 @@
+"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 cluster_input_exports = {};
+__export(cluster_input_exports, {
+  collectClusterLeaves: () => collectClusterLeaves
+});
+module.exports = __toCommonJS(cluster_input_exports);
+var import_thread_state = require("./thread-state");
+function collectClusterLeaves(editor, threads, openThreadId, impreciseShapeAnchor) {
+  const pageId = editor.getCurrentPageId();
+  const leaves = [];
+  for (const thread of threads) {
+    if (thread.id === openThreadId) continue;
+    if (thread.pageId !== pageId) continue;
+    const point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor, impreciseShapeAnchor);
+    if (!point) continue;
+    leaves.push({
+      id: thread.id,
+      point: { x: point.x, y: point.y }
+    });
+  }
+  return leaves;
+}
+//# sourceMappingURL=cluster-input.js.map

package/dist-cjs/canvas/cluster-input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/cluster-input.ts"],
+  "sourcesContent": ["import type { Editor, TLCommentThread } from 'tldraw'\nimport type { LeafInput } from '../clustering/types'\nimport { anchorPagePoint } from './thread-state'\n\n/** @public */\nexport function collectClusterLeaves(\n\teditor: Editor,\n\tthreads: readonly TLCommentThread[],\n\topenThreadId: string | null,\n\timpreciseShapeAnchor?: { x: number; y: number }\n): LeafInput[] {\n\tconst pageId = editor.getCurrentPageId()\n\tconst leaves: LeafInput[] = []\n\n\tfor (const thread of threads) {\n\t\tif (thread.id === openThreadId) continue\n\t\tif (thread.pageId !== pageId) continue\n\n\t\tconst point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor)\n\t\tif (!point) continue\n\n\t\tleaves.push({\n\t\t\tid: thread.id,\n\t\t\tpoint: { x: point.x, y: point.y },\n\t\t})\n\t}\n\n\treturn leaves\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAgC;AAGzB,SAAS,qBACf,QACA,SACA,cACA,sBACc;AACd,QAAM,SAAS,OAAO,iBAAiB;AACvC,QAAM,SAAsB,CAAC;AAE7B,aAAW,UAAU,SAAS;AAC7B,QAAI,OAAO,OAAO,aAAc;AAChC,QAAI,OAAO,WAAW,OAAQ;AAE9B,UAAM,YAAQ,qCAAgB,QAAQ,OAAO,QAAQ,oBAAoB;AACzE,QAAI,CAAC,MAAO;AAEZ,WAAO,KAAK;AAAA,MACX,IAAI,OAAO;AAAA,MACX,OAAO,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE;AAAA,IACjC,CAAC;AAAA,EACF;AAEA,SAAO;AACR;",
+  "names": []
+}

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

@@ -0,0 +1,31 @@
+"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 comment_body_exports = {};
+__export(comment_body_exports, {
+  CommentBody: () => CommentBody
+});
+module.exports = __toCommonJS(comment_body_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+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 } });
+}
+//# sourceMappingURL=comment-body.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,72 @@
+"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 comment_render_exports = {};
+__export(comment_render_exports, {
+  UNKNOWN_AUTHOR: () => UNKNOWN_AUTHOR,
+  renderCommentHtml: () => renderCommentHtml,
+  renderCommentPlaintext: () => renderCommentPlaintext
+});
+module.exports = __toCommonJS(comment_render_exports);
+var import_core = require("@tiptap/core");
+var import_comment_extensions = require("../ui/comment-extensions");
+var import_comment_mention = require("../ui/comment-mention");
+const UNKNOWN_AUTHOR = "Someone";
+function demoteHeadings(node) {
+  const content = Array.isArray(node.content) ? node.content.map(demoteHeadings) : node.content;
+  if (node.type === "heading") {
+    const { attrs: _attrs, ...rest } = node;
+    return { ...rest, type: "paragraph", content };
+  }
+  return content === node.content ? node : { ...node, content };
+}
+function hasMention(node) {
+  if (node.type === "mention") return true;
+  return Array.isArray(node.content) ? node.content.some(hasMention) : false;
+}
+const htmlCache = /* @__PURE__ */ new WeakMap();
+function renderCommentHtml(richText, resolveName) {
+  const mentions = hasMention(richText);
+  if (!mentions) {
+    const cached = htmlCache.get(richText);
+    if (cached !== void 0) return cached;
+  }
+  const extensions = mentions ? [...import_comment_extensions.commentTipTapExtensions, (0, import_comment_mention.commentMention)({ resolveName })] : import_comment_extensions.commentTipTapExtensions;
+  const html = (0, import_core.generateHTML)(demoteHeadings(richText), extensions).replaceAll(
+    '<p dir="auto"></p>',
+    "<p><br /></p>"
+  );
+  if (!mentions) htmlCache.set(richText, html);
+  return html;
+}
+const textCache = /* @__PURE__ */ new WeakMap();
+function renderCommentPlaintext(richText, resolveName) {
+  if ((0, import_comment_extensions.isCommentEmpty)(richText)) return "";
+  const mentions = hasMention(richText);
+  if (!mentions) {
+    const cached = textCache.get(richText);
+    if (cached !== void 0) return cached;
+  }
+  const extensions = mentions ? [...import_comment_extensions.commentTipTapExtensions, (0, import_comment_mention.commentMention)({ resolveName })] : import_comment_extensions.commentTipTapExtensions;
+  const text = (0, import_core.generateText)(demoteHeadings(richText), extensions, {
+    blockSeparator: "\n"
+  });
+  if (!mentions) textCache.set(richText, text);
+  return text;
+}
+//# sourceMappingURL=comment-render.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/comment-render.ts"],
+  "sourcesContent": ["import { generateHTML, generateText, JSONContent } from '@tiptap/core'\nimport { TLRichText } from 'tldraw'\nimport { commentTipTapExtensions, isCommentEmpty } from '../ui/comment-extensions'\nimport { commentMention } from '../ui/comment-mention'\n\n/**\n * The author name shown in a byline when no source can name an id (e.g. a deleted account, or a\n * member with no comment and no live presence). The toolkit's one generic default, applied where a\n * byline needs a name; hosts pre-empt it by returning a name from `resolveName`. Not a translation\n * key \u2014 a single English literal, matching the prior host-side default.\n */\nexport const UNKNOWN_AUTHOR = 'Someone'\n\n/**\n * The comment extension set has no heading node, so a body that nonetheless contains one (e.g. a\n * record created programmatically or synced from a client with a fuller set) would make TipTap\n * throw on an unknown node type. Demote any heading to a paragraph first, so headings can never\n * render as headings and rendering never crashes.\n */\nfunction demoteHeadings(node: JSONContent): JSONContent {\n\tconst content = Array.isArray(node.content) ? node.content.map(demoteHeadings) : node.content\n\tif (node.type === 'heading') {\n\t\tconst { attrs: _attrs, ...rest } = node\n\t\treturn { ...rest, type: 'paragraph', content }\n\t}\n\treturn content === node.content ? node : { ...node, content }\n}\n\n/**\n * Whether a body contains a mention node. Mention text is resolved from a member id at render time,\n * so a body with one can't be cached by identity alone (the same body renders differently as names\n * change) \u2014 those bodies skip the cache and re-render each call.\n */\nfunction hasMention(node: JSONContent): boolean {\n\tif (node.type === 'mention') return true\n\treturn Array.isArray(node.content) ? node.content.some(hasMention) : false\n}\n\nconst htmlCache = new WeakMap<TLRichText, string>()\n\n/**\n * Render a comment body to HTML through the limited comment extension set (no headings), so a body\n * always renders with comment formatting regardless of the host editor's rich-text config. Mirrors\n * tldraw's `renderHtmlFromRichText`, including the empty-paragraph fix that keeps blank lines from\n * collapsing. `resolveName` maps a member id to its current name for any @mentions.\n */\nexport function renderCommentHtml(\n\trichText: TLRichText,\n\tresolveName?: (id: string) => string | undefined\n): string {\n\tconst mentions = hasMention(richText as JSONContent)\n\tif (!mentions) {\n\t\tconst cached = htmlCache.get(richText)\n\t\tif (cached !== undefined) return cached\n\t}\n\tconst extensions = mentions\n\t\t? [...commentTipTapExtensions, commentMention({ resolveName })]\n\t\t: commentTipTapExtensions\n\tconst html = generateHTML(demoteHeadings(richText as JSONContent), extensions).replaceAll(\n\t\t'<p dir=\"auto\"></p>',\n\t\t'<p><br /></p>'\n\t)\n\tif (!mentions) htmlCache.set(richText, html)\n\treturn html\n}\n\nconst textCache = new WeakMap<TLRichText, string>()\n\n/**\n * Flatten a comment body to plaintext through the limited comment extension set \u2014 paragraphs and\n * list items separated by newlines. Used for previews (e.g. the sidebar) where formatting is dropped.\n * `resolveName` maps a member id to its current name for any @mentions.\n */\nexport function renderCommentPlaintext(\n\trichText: TLRichText,\n\tresolveName?: (id: string) => string | undefined\n): string {\n\tif (isCommentEmpty(richText)) return ''\n\tconst mentions = hasMention(richText as JSONContent)\n\tif (!mentions) {\n\t\tconst cached = textCache.get(richText)\n\t\tif (cached !== undefined) return cached\n\t}\n\tconst extensions = mentions\n\t\t? [...commentTipTapExtensions, commentMention({ resolveName })]\n\t\t: commentTipTapExtensions\n\tconst text = generateText(demoteHeadings(richText as JSONContent), extensions, {\n\t\tblockSeparator: '\\n',\n\t})\n\tif (!mentions) textCache.set(richText, text)\n\treturn text\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwD;AAExD,gCAAwD;AACxD,6BAA+B;AAQxB,MAAM,iBAAiB;AAQ9B,SAAS,eAAe,MAAgC;AACvD,QAAM,UAAU,MAAM,QAAQ,KAAK,OAAO,IAAI,KAAK,QAAQ,IAAI,cAAc,IAAI,KAAK;AACtF,MAAI,KAAK,SAAS,WAAW;AAC5B,UAAM,EAAE,OAAO,QAAQ,GAAG,KAAK,IAAI;AACnC,WAAO,EAAE,GAAG,MAAM,MAAM,aAAa,QAAQ;AAAA,EAC9C;AACA,SAAO,YAAY,KAAK,UAAU,OAAO,EAAE,GAAG,MAAM,QAAQ;AAC7D;AAOA,SAAS,WAAW,MAA4B;AAC/C,MAAI,KAAK,SAAS,UAAW,QAAO;AACpC,SAAO,MAAM,QAAQ,KAAK,OAAO,IAAI,KAAK,QAAQ,KAAK,UAAU,IAAI;AACtE;AAEA,MAAM,YAAY,oBAAI,QAA4B;AAQ3C,SAAS,kBACf,UACA,aACS;AACT,QAAM,WAAW,WAAW,QAAuB;AACnD,MAAI,CAAC,UAAU;AACd,UAAM,SAAS,UAAU,IAAI,QAAQ;AACrC,QAAI,WAAW,OAAW,QAAO;AAAA,EAClC;AACA,QAAM,aAAa,WAChB,CAAC,GAAG,uDAAyB,uCAAe,EAAE,YAAY,CAAC,CAAC,IAC5D;AACH,QAAM,WAAO,0BAAa,eAAe,QAAuB,GAAG,UAAU,EAAE;AAAA,IAC9E;AAAA,IACA;AAAA,EACD;AACA,MAAI,CAAC,SAAU,WAAU,IAAI,UAAU,IAAI;AAC3C,SAAO;AACR;AAEA,MAAM,YAAY,oBAAI,QAA4B;AAO3C,SAAS,uBACf,UACA,aACS;AACT,UAAI,0CAAe,QAAQ,EAAG,QAAO;AACrC,QAAM,WAAW,WAAW,QAAuB;AACnD,MAAI,CAAC,UAAU;AACd,UAAM,SAAS,UAAU,IAAI,QAAQ;AACrC,QAAI,WAAW,OAAW,QAAO;AAAA,EAClC;AACA,QAAM,aAAa,WAChB,CAAC,GAAG,uDAAyB,uCAAe,EAAE,YAAY,CAAC,CAAC,IAC5D;AACH,QAAM,WAAO,0BAAa,eAAe,QAAuB,GAAG,YAAY;AAAA,IAC9E,gBAAgB;AAAA,EACjB,CAAC;AACD,MAAI,CAAC,SAAU,WAAU,IAAI,UAAU,IAAI;AAC3C,SAAO;AACR;",
+  "names": []
+}

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

@@ -0,0 +1,48 @@
+"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 comment_store_exports = {};
+__export(comment_store_exports, {
+  getCommentRecord: () => getCommentRecord,
+  getCommentThreads: () => getCommentThreads,
+  getComments: () => getComments,
+  putCommentRecords: () => putCommentRecords,
+  removeCommentRecords: () => removeCommentRecords
+});
+module.exports = __toCommonJS(comment_store_exports);
+function putCommentRecords(editor, records) {
+  editor.store.put(records);
+}
+function removeCommentRecords(editor, ids) {
+  editor.store.remove(ids);
+}
+function getCommentRecord(editor, id) {
+  const record = editor.store.get(id);
+  if (!record) return void 0;
+  if (record.typeName === "comment" || record.typeName === "comment-thread") return record;
+  return void 0;
+}
+function getCommentThreads(editor) {
+  const typeName = "comment-thread";
+  return editor.store.query.records(typeName).get();
+}
+function getComments(editor) {
+  const typeName = "comment";
+  return editor.store.query.records(typeName).get();
+}
+//# sourceMappingURL=comment-store.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/comment-store.ts"],
+  "sourcesContent": ["import {\n\tEditor,\n\tTLComment,\n\tTLCommentId,\n\tTLCommentThread,\n\tTLCommentThreadId,\n\tTLRecord,\n} from 'tldraw'\n\n/**\n * Typed access to comment records on the editor store.\n *\n * Comment threads and comments live on the editor's local store so the canvas can render them\n * reactively, but they are opt-in records that aren't part of the `TLRecord` union (they ride the\n * sync server's object-store lane on the wire \u2014 see `TLCommentThread`). `editor.store` is therefore\n * statically typed `Store<TLRecord>` and doesn't know about them, so every access has to reinterpret\n * the type. These helpers own that reinterpretation \u2014 an `unknown` hop to exactly the type the store\n * expects, so the rest of each call stays checked \u2014 behind one boundary, and keep call sites typed.\n */\n\n/** A record that lives in a comment thread: the thread itself or one of its messages. @public */\nexport type TLCommentRecord = TLComment | TLCommentThread\n\n/** Write comment records to the store. @public */\nexport function putCommentRecords(editor: Editor, records: TLCommentRecord[]): void {\n\teditor.store.put(records as unknown as TLRecord[])\n}\n\n/** Remove comment records from the store by id. @public */\nexport function removeCommentRecords(\n\teditor: Editor,\n\tids: (TLCommentId | TLCommentThreadId)[]\n): void {\n\teditor.store.remove(ids as unknown as TLRecord['id'][])\n}\n\n/** Read one comment record by id, or `undefined` if the id isn't a present comment record. @public */\nexport function getCommentRecord(editor: Editor, id: string): TLCommentRecord | undefined {\n\tconst record = editor.store.get(id as TLRecord['id']) as unknown as TLCommentRecord | undefined\n\tif (!record) return undefined\n\tif (record.typeName === 'comment' || record.typeName === 'comment-thread') return record\n\treturn undefined\n}\n\n/** All comment threads currently in the store (non-reactive; wrap in `useValue` to react). @public */\nexport function getCommentThreads(editor: Editor): TLCommentThread[] {\n\tconst typeName = 'comment-thread' as TLRecord['typeName']\n\treturn editor.store.query.records(typeName).get() as unknown as TLCommentThread[]\n}\n\n/** All comments currently in the store (non-reactive; wrap in `useValue` to react). @public */\nexport function getComments(editor: Editor): TLComment[] {\n\tconst typeName = 'comment' as TLRecord['typeName']\n\treturn editor.store.query.records(typeName).get() as unknown as TLComment[]\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBO,SAAS,kBAAkB,QAAgB,SAAkC;AACnF,SAAO,MAAM,IAAI,OAAgC;AAClD;AAGO,SAAS,qBACf,QACA,KACO;AACP,SAAO,MAAM,OAAO,GAAkC;AACvD;AAGO,SAAS,iBAAiB,QAAgB,IAAyC;AACzF,QAAM,SAAS,OAAO,MAAM,IAAI,EAAoB;AACpD,MAAI,CAAC,OAAQ,QAAO;AACpB,MAAI,OAAO,aAAa,aAAa,OAAO,aAAa,iBAAkB,QAAO;AAClF,SAAO;AACR;AAGO,SAAS,kBAAkB,QAAmC;AACpE,QAAM,WAAW;AACjB,SAAO,OAAO,MAAM,MAAM,QAAQ,QAAQ,EAAE,IAAI;AACjD;AAGO,SAAS,YAAY,QAA6B;AACxD,QAAM,WAAW;AACjB,SAAO,OAAO,MAAM,MAAM,QAAQ,QAAQ,EAAE,IAAI;AACjD;",
+  "names": []
+}

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

@@ -0,0 +1,160 @@
+"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 comment_tool_exports = {};
+__export(comment_tool_exports, {
+  CommentTool: () => CommentTool,
+  commentToolOverrides: () => commentToolOverrides,
+  commentTools: () => commentTools,
+  regionBetween: () => regionBetween
+});
+module.exports = __toCommonJS(comment_tool_exports);
+var import_tldraw = require("tldraw");
+var import_options = require("./options");
+var import_region_options = require("./region-options");
+var import_state = require("./state");
+var import_thread_state = require("./thread-state");
+function mergeCommentingOptions(base, overrides) {
+  return {
+    ...base,
+    ...overrides,
+    components: { ...base.components, ...overrides.components }
+  };
+}
+function regionBetween(a, b) {
+  return {
+    x: Math.min(a.x, b.x),
+    y: Math.min(a.y, b.y),
+    w: Math.abs(a.x - b.x),
+    h: Math.abs(a.y - b.y)
+  };
+}
+class CommentTool extends import_tldraw.StateNode {
+  static id = "comment";
+  static initial = "idle";
+  static children() {
+    return [CommentIdle, CommentPointing, CommentDragging];
+  }
+  /**
+   * Configure this tool's {@link CommentTool.options | `options`}, returning a configured subclass
+   * to register via `tools`. Mirrors `ShapeUtil.configure`. Layers over any prior `configure`, so
+   * calls can be chained.
+   *
+   * @example
+   * ```tsx
+   * <Tldraw tools={[CommentTool.configure({ history: 'ignore', enableClustering: false })]} />
+   * ```
+   */
+  static configure(options) {
+    return class extends this {
+      // @ts-expect-error
+      options = mergeCommentingOptions(this.options, options);
+    };
+  }
+  /**
+   * The merged commenting options for this editor. Read from anywhere via
+   * {@link getCommentingOptions}. Override with {@link CommentTool.configure}.
+   */
+  options = import_options.defaultCommentingOptions;
+  onEnter() {
+    this.editor.setCursor({ type: "cross", rotation: 0 });
+  }
+  // Escape leaves the tool, like the built-in tools (the editor dispatches `cancel` on Escape).
+  onCancel() {
+    this.editor.setCurrentTool("select");
+  }
+}
+class CommentIdle extends import_tldraw.StateNode {
+  static id = "idle";
+  onPointerDown() {
+    this.parent.transition("pointing");
+  }
+}
+class CommentPointing extends import_tldraw.StateNode {
+  static id = "pointing";
+  // Once the pointer passes the editor's drag threshold this is a region, not a click — but only
+  // when region comments are enabled; otherwise a drag is treated as a click (point/shape).
+  onPointerMove() {
+    if ((0, import_region_options.getRegionCommentOptions)(this.editor).enabled && this.editor.inputs.getIsDragging()) {
+      this.parent.transition("dragging");
+    }
+  }
+  // A pointer up with no drag is a click: anchor to the shape under it, or drop a point.
+  onPointerUp() {
+    const { editor } = this;
+    const point = editor.inputs.getCurrentPagePoint();
+    const hit = editor.getShapeAtPoint(point, { hitInside: true });
+    const anchor = hit ? (0, import_thread_state.shapeAnchorAt)(editor, hit.id, point, editor.inputs.getAltKey()) : { type: "point", x: point.x, y: point.y };
+    import_state.pendingComment.set(editor, { anchor, point: { x: point.x, y: point.y } });
+    editor.setCurrentTool("select");
+  }
+}
+class CommentDragging extends import_tldraw.StateNode {
+  static id = "dragging";
+  onEnter() {
+    this.updateDraft();
+  }
+  onPointerMove() {
+    this.updateDraft();
+  }
+  // Commit the dragged rectangle as a region anchor; the composer opens at its pin corner.
+  onPointerUp() {
+    const { editor } = this;
+    const region = regionBetween(
+      editor.inputs.getOriginPagePoint(),
+      editor.inputs.getCurrentPagePoint()
+    );
+    import_state.regionDraft.set(editor, null);
+    import_state.pendingComment.set(editor, {
+      anchor: { type: "region", ...region },
+      point: (0, import_thread_state.regionPinPoint)(region, (0, import_region_options.getRegionCommentOptions)(editor).pinCorner)
+    });
+    editor.setCurrentTool("select");
+  }
+  onCancel() {
+    this.cancel();
+  }
+  onInterrupt() {
+    this.cancel();
+  }
+  updateDraft() {
+    const { editor } = this;
+    import_state.regionDraft.set(
+      editor,
+      regionBetween(editor.inputs.getOriginPagePoint(), editor.inputs.getCurrentPagePoint())
+    );
+  }
+  cancel() {
+    import_state.regionDraft.set(this.editor, null);
+    this.editor.setCurrentTool("select");
+  }
+}
+const commentTools = [CommentTool];
+const commentToolOverrides = {
+  tools(editor, tools) {
+    tools.comment = {
+      id: "comment",
+      icon: "comment",
+      label: "Comment",
+      kbd: "c",
+      onSelect: () => editor.setCurrentTool("comment")
+    };
+    return tools;
+  }
+};
+//# sourceMappingURL=comment-tool.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/comment-tool.tsx"],
+  "sourcesContent": ["import {\n\tBoxModel,\n\tStateNode,\n\tTLCommentAnchor,\n\tTLStateNodeConstructor,\n\tTLUiOverrides,\n\tVecLike,\n} from 'tldraw'\nimport { type CommentingOptions, defaultCommentingOptions } from './options'\nimport { getRegionCommentOptions } from './region-options'\nimport { pendingComment, regionDraft } from './state'\nimport { regionPinPoint, shapeAnchorAt } from './thread-state'\n\n/** A comment being placed but not yet posted: where its composer sits and what it will anchor\n *  to. Shared between the tool (which sets it on click) and the overlay (which renders the\n *  composer). Null when nothing is being placed. The atom itself lives in `./state`\n *  ({@link pendingComment}), scoped per editor.\n * @public */\nexport interface PendingComment {\n\tanchor: TLCommentAnchor\n\t/** Page point where the composer opens (the click location, or a region's pin corner). */\n\tpoint: VecLike\n}\n\n/**\n * Merge configure options over a base. Shallow for scalars; `components` is merged rather than\n * replaced so chained `configure` calls layer their slots \u2014 a later `{ components: { PinContent } }`\n * doesn't drop an earlier `{ components: { CommentBody } }`.\n */\nfunction mergeCommentingOptions(\n\tbase: CommentingOptions,\n\toverrides: Partial<CommentingOptions>\n): CommentingOptions {\n\treturn {\n\t\t...base,\n\t\t...overrides,\n\t\tcomponents: { ...base.components, ...overrides.components },\n\t}\n}\n\n/** The page-space rectangle spanned by two points, normalized so w/h are non-negative. Shared by\n *  region creation (pointer-down \u2192 cursor) and corner resize (fixed corner \u2192 cursor). */\nexport function regionBetween(a: VecLike, b: VecLike): BoxModel {\n\treturn {\n\t\tx: Math.min(a.x, b.x),\n\t\ty: Math.min(a.y, b.y),\n\t\tw: Math.abs(a.x - b.x),\n\t\th: Math.abs(a.y - b.y),\n\t}\n}\n\n/**\n * The comment tool. A click starts a point/shape thread (the pin tracks the shape it lands on);\n * dragging out a rectangle starts a region thread anchored to that area. Placement only opens a\n * composer (via `pendingComment`); the records are created when the comment is posted.\n * @public\n */\nexport class CommentTool extends StateNode {\n\tstatic override id = 'comment'\n\tstatic override initial = 'idle'\n\tstatic override children(): TLStateNodeConstructor[] {\n\t\treturn [CommentIdle, CommentPointing, CommentDragging]\n\t}\n\n\t/**\n\t * Configure this tool's {@link CommentTool.options | `options`}, returning a configured subclass\n\t * to register via `tools`. Mirrors `ShapeUtil.configure`. Layers over any prior `configure`, so\n\t * calls can be chained.\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tldraw tools={[CommentTool.configure({ history: 'ignore', enableClustering: false })]} />\n\t * ```\n\t */\n\tstatic configure<T extends TLStateNodeConstructor>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\t// @ts-expect-error -- mirrors ShapeUtil.configure; extending `this` is sound at runtime.\n\t\treturn class extends this {\n\t\t\t// @ts-expect-error\n\t\t\toptions = mergeCommentingOptions(this.options, options)\n\t\t}\n\t}\n\n\t/**\n\t * The merged commenting options for this editor. Read from anywhere via\n\t * {@link getCommentingOptions}. Override with {@link CommentTool.configure}.\n\t */\n\toptions: CommentingOptions = defaultCommentingOptions\n\n\toverride onEnter() {\n\t\tthis.editor.setCursor({ type: 'cross', rotation: 0 })\n\t}\n\n\t// Escape leaves the tool, like the built-in tools (the editor dispatches `cancel` on Escape).\n\toverride onCancel() {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n\nclass CommentIdle extends StateNode {\n\tstatic override id = 'idle'\n\n\toverride onPointerDown() {\n\t\tthis.parent.transition('pointing')\n\t}\n}\n\nclass CommentPointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\t// Once the pointer passes the editor's drag threshold this is a region, not a click \u2014 but only\n\t// when region comments are enabled; otherwise a drag is treated as a click (point/shape).\n\toverride onPointerMove() {\n\t\tif (getRegionCommentOptions(this.editor).enabled && this.editor.inputs.getIsDragging()) {\n\t\t\tthis.parent.transition('dragging')\n\t\t}\n\t}\n\n\t// A pointer up with no drag is a click: anchor to the shape under it, or drop a point.\n\toverride onPointerUp() {\n\t\tconst { editor } = this\n\t\tconst point = editor.inputs.getCurrentPagePoint()\n\t\tconst hit = editor.getShapeAtPoint(point, { hitInside: true })\n\t\tconst anchor: TLCommentAnchor = hit\n\t\t\t? shapeAnchorAt(editor, hit.id, point, editor.inputs.getAltKey())\n\t\t\t: { type: 'point', x: point.x, y: point.y }\n\t\tpendingComment.set(editor, { anchor, point: { x: point.x, y: point.y } })\n\t\t// Hand back to select; the open composer is now the focus.\n\t\teditor.setCurrentTool('select')\n\t}\n}\n\nclass CommentDragging extends StateNode {\n\tstatic override id = 'dragging'\n\n\toverride onEnter() {\n\t\tthis.updateDraft()\n\t}\n\n\toverride onPointerMove() {\n\t\tthis.updateDraft()\n\t}\n\n\t// Commit the dragged rectangle as a region anchor; the composer opens at its pin corner.\n\toverride onPointerUp() {\n\t\tconst { editor } = this\n\t\tconst region = regionBetween(\n\t\t\teditor.inputs.getOriginPagePoint(),\n\t\t\teditor.inputs.getCurrentPagePoint()\n\t\t)\n\t\tregionDraft.set(editor, null)\n\t\tpendingComment.set(editor, {\n\t\t\tanchor: { type: 'region', ...region },\n\t\t\tpoint: regionPinPoint(region, getRegionCommentOptions(editor).pinCorner),\n\t\t})\n\t\teditor.setCurrentTool('select')\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\tprivate updateDraft() {\n\t\tconst { editor } = this\n\t\tregionDraft.set(\n\t\t\teditor,\n\t\t\tregionBetween(editor.inputs.getOriginPagePoint(), editor.inputs.getCurrentPagePoint())\n\t\t)\n\t}\n\n\tprivate cancel() {\n\t\tregionDraft.set(this.editor, null)\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n\n/** @public */\nexport const commentTools = [CommentTool]\n\n/** Registers the comment tool in the UI (icon, label, shortcut). Compose into your overrides.\n *  Once registered, tldraw's `DefaultToolbarContent` shows the comment button next to the eraser.\n * @public */\nexport const commentToolOverrides: TLUiOverrides = {\n\ttools(editor, tools) {\n\t\ttools.comment = {\n\t\t\tid: 'comment',\n\t\t\ticon: 'comment',\n\t\t\tlabel: 'Comment',\n\t\t\tkbd: 'c',\n\t\t\tonSelect: () => editor.setCurrentTool('comment'),\n\t\t}\n\t\treturn tools\n\t},\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,109 @@
+"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_filter_menu_exports = {};
+__export(comments_filter_menu_exports, {
+  CommentsFilterMenu: () => CommentsFilterMenu
+});
+module.exports = __toCommonJS(comments_filter_menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tldraw = require("tldraw");
+var import_state = require("./state");
+function CommentsFilterMenu({
+  canFilterByAuthor,
+  canFilterByUnread
+}) {
+  const editor = (0, import_tldraw.useEditor)();
+  const msg = (0, import_tldraw.useTranslation)();
+  const filters = (0, import_tldraw.useValue)("sidebar filters", () => import_state.sidebarFilters.get(editor), [editor]);
+  const toggle = (key) => {
+    import_state.sidebarFilters.update(editor, (f) => ({ ...f, [key]: !f[key] }));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiDropdownMenuRoot, { id: "comments-filter", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "cmt-header-btn",
+        title: msg("comments.filter"),
+        "aria-label": msg("comments.filter"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuContent, { side: "bottom", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiMenuContextProvider, { type: "menu", sourceId: "menu", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiMenuGroup, { id: "comments-filter", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tldraw.TldrawUiMenuCheckboxItem,
+        {
+          id: "show-resolved",
+          label: "comments.show-resolved",
+          checked: filters.showResolved,
+          onSelect: () => toggle("showResolved")
+        }
+      ),
+      canFilterByAuthor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tldraw.TldrawUiMenuCheckboxItem,
+        {
+          id: "only-mine",
+          label: "comments.only-mine",
+          checked: filters.onlyMine,
+          onSelect: () => toggle("onlyMine")
+        }
+      ),
+      canFilterByUnread && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tldraw.TldrawUiMenuCheckboxItem,
+        {
+          id: "only-unread",
+          label: "comments.only-unread",
+          checked: filters.onlyUnread,
+          onSelect: () => toggle("onlyUnread")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tldraw.TldrawUiMenuCheckboxItem,
+        {
+          id: "only-current-page",
+          label: "comments.only-current-page",
+          checked: filters.onlyCurrentPage,
+          onSelect: () => toggle("onlyCurrentPage")
+        }
+      )
+    ] }) }) })
+  ] });
+}
+function FilterIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2.5", y1: "5", x2: "13.5", y2: "5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2.5", y1: "11", x2: "13.5", y2: "11" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "5", r: "1.9", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10.5", cy: "11", r: "1.9", fill: "currentColor", stroke: "none" })
+      ]
+    }
+  );
+}
+//# sourceMappingURL=comments-filter-menu.js.map

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

@@ -0,0 +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"],
+  "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-menu-item.js

@@ -0,0 +1,42 @@
+"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_menu_item_exports = {};
+__export(comments_menu_item_exports, {
+  CommentsMenuItem: () => CommentsMenuItem
+});
+module.exports = __toCommonJS(comments_menu_item_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tldraw = require("tldraw");
+var import_state = require("./state");
+function CommentsMenuItem() {
+  const editor = (0, import_tldraw.useEditor)();
+  const hidden = (0, import_tldraw.useValue)("comments hidden", () => import_state.commentsHidden.get(editor), [editor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tldraw.TldrawUiMenuCheckboxItem,
+    {
+      id: "comments-visible",
+      label: "comments.title",
+      kbd: "!c",
+      readonlyOk: true,
+      checked: !hidden,
+      onSelect: () => (0, import_state.toggleCommentsHidden)(editor)
+    }
+  );
+}
+//# sourceMappingURL=comments-menu-item.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/comments-menu-item.tsx"],
+  "sourcesContent": ["import { TldrawUiMenuCheckboxItem, useEditor, useValue } from 'tldraw'\nimport { commentsHidden, toggleCommentsHidden } from './state'\n\n/**\n * A checkbox menu item for a \"View\" menu that shows/hides comment pins on the canvas \u2014 checked\n * when comments are visible, like tldraw's own grid/snap toggles. Reads and toggles the shared\n * {@link commentsHidden} signal, so it stays in sync with the Shift+C shortcut and the sidebar\n * control. Drop it into whichever menu your app owns.\n * @public @react\n */\nexport function CommentsMenuItem() {\n\tconst editor = useEditor()\n\tconst hidden = useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n\treturn (\n\t\t<TldrawUiMenuCheckboxItem\n\t\t\tid=\"comments-visible\"\n\t\t\tlabel=\"comments.title\"\n\t\t\tkbd=\"!c\"\n\t\t\treadonlyOk\n\t\t\tchecked={!hidden}\n\t\t\tonSelect={() => toggleCommentsHidden(editor)}\n\t\t/>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcE;AAdF,oBAA8D;AAC9D,mBAAqD;AAS9C,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,aAAS,wBAAS,mBAAmB,MAAM,4BAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACrF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAG;AAAA,MACH,OAAM;AAAA,MACN,KAAI;AAAA,MACJ,YAAU;AAAA,MACV,SAAS,CAAC;AAAA,MACV,UAAU,UAAM,mCAAqB,MAAM;AAAA;AAAA,EAC5C;AAEF;",
+  "names": []
+}