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

package/dist-esm/ui/comment-mention.mjs

@@ -1,22 +0,0 @@
-import { mergeAttributes } from "@tiptap/core";
-import { Mention } from "@tiptap/extension-mention";
-function mentionName(attrs, resolveName) {
-  const resolved = attrs.id && resolveName ? resolveName(attrs.id) : void 0;
-  return resolved ?? attrs.label ?? attrs.id ?? "";
-}
-function commentMention({ resolveName, suggestion } = {}) {
-  return Mention.configure({
-    HTMLAttributes: { class: "cmt-mention" },
-    renderText: ({ node }) => `@${mentionName(node.attrs, resolveName)}`,
-    renderHTML: ({ node, options }) => [
-      "span",
-      mergeAttributes(options.HTMLAttributes, { "data-mention-id": node.attrs.id }),
-      `@${mentionName(node.attrs, resolveName)}`
-    ],
-    ...(suggestion ? { suggestion } : {})
-  });
-}
-export {
-  commentMention
-};
-//# sourceMappingURL=comment-mention.mjs.map

package/dist-esm/ui/comment-mention.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/comment-mention.ts"],
-  "sourcesContent": ["import { mergeAttributes } from '@tiptap/core'\nimport { Mention, type MentionNodeAttrs, type MentionOptions } from '@tiptap/extension-mention'\n\n/**\n * A mention node's display name: the member's current name, resolved live from its id when a\n * resolver is given (so a rename shows through), falling back to the label captured at insert time\n * when no source can name the id \u2014 e.g. a deleted account. The stored id is always the source of\n * truth; live resolution only freshens the displayed name over that captured label.\n */\nfunction mentionName(\n\tattrs: MentionNodeAttrs,\n\tresolveName?: (id: string) => string | undefined\n): string {\n\tconst resolved = attrs.id && resolveName ? resolveName(attrs.id) : undefined\n\treturn resolved ?? attrs.label ?? attrs.id ?? ''\n}\n\nexport interface CommentMentionOptions {\n\t/**\n\t * Resolve a member id to its current display name \u2014 for the read-only render paths. Returns\n\t * `undefined` when the id can't be resolved, so the render falls back to the mention's stored label.\n\t */\n\tresolveName?(id: string): string | undefined\n\t/** The `@`-picker suggestion config \u2014 for the composer (omit on the render paths). */\n\tsuggestion?: MentionOptions['suggestion']\n}\n\n/**\n * The comment @-mention node \u2014 TipTap's `Mention` configured to render as a `.cmt-mention` pill.\n *\n * A factory rather than a shared constant because it's configured differently per context: the\n * read-only render paths pass `resolveName` (so the stored `{ id }` node always shows the member's\n * current name, not a copy frozen at insert time), while the composer passes a `suggestion` (the\n * `@` picker). The node schema is identical either way \u2014 only these two levers differ.\n */\nexport function commentMention({ resolveName, suggestion }: CommentMentionOptions = {}) {\n\treturn Mention.configure({\n\t\tHTMLAttributes: { class: 'cmt-mention' },\n\t\trenderText: ({ node }) => `@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,\n\t\trenderHTML: ({ node, options }) => [\n\t\t\t'span',\n\t\t\tmergeAttributes(options.HTMLAttributes, { 'data-mention-id': node.attrs.id }),\n\t\t\t`@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,\n\t\t],\n\t\t...(suggestion ? { suggestion } : {}),\n\t})\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,eAA2D;AAQpE,SAAS,YACR,OACA,aACS;AACT,QAAM,WAAW,MAAM,MAAM,cAAc,YAAY,MAAM,EAAE,IAAI;AACnE,SAAO,YAAY,MAAM,SAAS,MAAM,MAAM;AAC/C;AAoBO,SAAS,eAAe,EAAE,aAAa,WAAW,IAA2B,CAAC,GAAG;AACvF,SAAO,QAAQ,UAAU;AAAA,IACxB,gBAAgB,EAAE,OAAO,cAAc;AAAA,IACvC,YAAY,CAAC,EAAE,KAAK,MAAM,IAAI,YAAY,KAAK,OAA2B,WAAW,CAAC;AAAA,IACtF,YAAY,CAAC,EAAE,MAAM,QAAQ,MAAM;AAAA,MAClC;AAAA,MACA,gBAAgB,QAAQ,gBAAgB,EAAE,mBAAmB,KAAK,MAAM,GAAG,CAAC;AAAA,MAC5E,IAAI,YAAY,KAAK,OAA2B,WAAW,CAAC;AAAA,IAC7D;AAAA,IACA,GAAI,aAAa,EAAE,WAAW,IAAI,CAAC;AAAA,EACpC,CAAC;AACF;",
-  "names": []
-}

package/dist-esm/ui/comment-text.mjs

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { renderMarkdown } from "./render-markdown.mjs";
-function CommentText({ text }) {
-  return /* @__PURE__ */ jsx("div", { className: "cmt-text", children: renderMarkdown(text) });
-}
-export {
-  CommentText
-};
-//# sourceMappingURL=comment-text.mjs.map

package/dist-esm/ui/comment-text.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/comment-text.tsx"],
-  "sourcesContent": ["import { renderMarkdown } from './render-markdown'\n\n/** @public */\nexport interface CommentTextProps {\n\t/** Rich text body, authored as markdown. */\n\ttext: string\n}\n\n/** A comment's body, rendered as markdown (bold, italic, code, links, lists). @public @react */\nexport function CommentText({ text }: CommentTextProps) {\n\treturn <div className=\"cmt-text\">{renderMarkdown(text)}</div>\n}\n"],
-  "mappings": "AAUQ;AAVR,SAAS,sBAAsB;AASxB,SAAS,YAAY,EAAE,KAAK,GAAqB;AACvD,SAAO,oBAAC,SAAI,WAAU,YAAY,yBAAe,IAAI,GAAE;AACxD;",
-  "names": []
-}

package/dist-esm/ui/mention-list.mjs

@@ -1,50 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useTranslation } from "tldraw";
-import { Avatar } from "./avatar.mjs";
-function DefaultMemberRow({ member }) {
-  const msg = useTranslation();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Avatar, { name: member.name, color: member.color, image: member.avatar }),
-    /* @__PURE__ */ jsxs("span", { className: "cmt-mention-list__text", children: [
-      /* @__PURE__ */ jsxs("span", { className: "cmt-mention-list__name", children: [
-        member.name,
-        member.you && /* @__PURE__ */ jsx("span", { className: "cmt-mention-list__you", children: `(${msg("comments.mention-you")})` })
-      ] }),
-      member.secondary && /* @__PURE__ */ jsx("span", { className: "cmt-mention-list__secondary", children: member.secondary })
-    ] })
-  ] });
-}
-function MentionList({
-  members,
-  activeIndex = 0,
-  onSelect,
-  emptyLabel,
-  renderMember
-}) {
-  const msg = useTranslation();
-  if (members.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "cmt-mention-list cmt-mention-list--empty", children: emptyLabel ?? msg("comments.mention-no-matches") });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "cmt-mention-list", role: "listbox", children: members.map((member, i) => {
-    const active = i === activeIndex;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": active,
-        className: active ? "cmt-mention-list__item cmt-mention-list__item--active" : "cmt-mention-list__item",
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => {
-          if (onSelect) onSelect(member);
-        },
-        children: renderMember ? renderMember(member) : /* @__PURE__ */ jsx(DefaultMemberRow, { member })
-      },
-      member.id
-    );
-  }) });
-}
-export {
-  MentionList
-};
-//# sourceMappingURL=mention-list.mjs.map

package/dist-esm/ui/mention-list.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/mention-list.tsx"],
-  "sourcesContent": ["import { ReactNode } from 'react'\nimport { useTranslation } from 'tldraw'\nimport { Avatar } from './avatar'\n\n/** A person the composer's \\@-mention picker can offer. @public */\nexport interface MentionMember {\n\tid: string\n\tname: string\n\t/** Avatar image URL. Falls back to a coloured initial when omitted. */\n\tavatar?: string\n\t/** Avatar background colour, used when there's no `avatar` image. */\n\tcolor?: string\n\t/** A secondary line under the name \u2014 e.g. an email or handle. Omit for a single-line row. */\n\tsecondary?: string\n\t/** Marks the current user; shown as a \"(You)\" suffix after the name. */\n\tyou?: boolean\n\t/** Hosts may carry extra fields; a custom `renderMember` can read them. */\n\t[key: string]: unknown\n}\n\n/** @public */\nexport interface MentionListProps {\n\t/** Members to choose from \u2014 already resolved for the current query by the host. */\n\tmembers: MentionMember[]\n\t/** Index of the highlighted row, driven by the composer's keyboard navigation. */\n\tactiveIndex?: number\n\t/** Called when a member is chosen (click, or Enter on the active row). */\n\tonSelect?(member: MentionMember): void\n\t/** Shown when no member matches the query. Defaults to a translated \"No matches\". */\n\temptyLabel?: string\n\t/** Override a row's content (inside the selectable button). Defaults to avatar + name (+ secondary). */\n\trenderMember?(member: MentionMember): ReactNode\n}\n\n/** The default row content: avatar, name (with a \"(You)\" marker), and an optional secondary line. */\nfunction DefaultMemberRow({ member }: { member: MentionMember }) {\n\tconst msg = useTranslation()\n\treturn (\n\t\t<>\n\t\t\t<Avatar name={member.name} color={member.color} image={member.avatar} />\n\t\t\t<span className=\"cmt-mention-list__text\">\n\t\t\t\t<span className=\"cmt-mention-list__name\">\n\t\t\t\t\t{member.name}\n\t\t\t\t\t{member.you && (\n\t\t\t\t\t\t<span className=\"cmt-mention-list__you\">{`(${msg('comments.mention-you')})`}</span>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t{member.secondary && (\n\t\t\t\t\t<span className=\"cmt-mention-list__secondary\">{member.secondary}</span>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</>\n\t)\n}\n\n/**\n * The \\@-mention member picker: a popover list of people to mention, shown as the user types after\n * `@`. Presentational \u2014 the composer's suggestion plugin owns resolution, keyboard navigation, and\n * placement, and drives this with the host-resolved `members` and the highlighted `activeIndex`.\n * @public @react\n */\nexport function MentionList({\n\tmembers,\n\tactiveIndex = 0,\n\tonSelect,\n\temptyLabel,\n\trenderMember,\n}: MentionListProps) {\n\tconst msg = useTranslation()\n\tif (members.length === 0) {\n\t\treturn (\n\t\t\t<div className=\"cmt-mention-list cmt-mention-list--empty\">\n\t\t\t\t{emptyLabel ?? msg('comments.mention-no-matches')}\n\t\t\t</div>\n\t\t)\n\t}\n\treturn (\n\t\t<div className=\"cmt-mention-list\" role=\"listbox\">\n\t\t\t{members.map((member, i) => {\n\t\t\t\tconst active = i === activeIndex\n\t\t\t\treturn (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={member.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={active}\n\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\tactive\n\t\t\t\t\t\t\t\t? 'cmt-mention-list__item cmt-mention-list__item--active'\n\t\t\t\t\t\t\t\t: 'cmt-mention-list__item'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Keep the composer focused on a row press: it's portaled outside the editor, so a\n\t\t\t\t\t\t// bare mousedown would blur the composer \u2014 which now dismisses the picker \u2014 before\n\t\t\t\t\t\t// the click could select. Selection runs on click; focus stays put.\n\t\t\t\t\t\tonMouseDown={(e) => e.preventDefault()}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (onSelect) onSelect(member)\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderMember ? renderMember(member) : <DefaultMemberRow member={member} />}\n\t\t\t\t\t</button>\n\t\t\t\t)\n\t\t\t})}\n\t\t</div>\n\t)\n}\n"],
-  "mappings": "AAsCE,mBACC,KAEC,YAHF;AArCF,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AAiCvB,SAAS,iBAAiB,EAAE,OAAO,GAA8B;AAChE,QAAM,MAAM,eAAe;AAC3B,SACC,iCACC;AAAA,wBAAC,UAAO,MAAM,OAAO,MAAM,OAAO,OAAO,OAAO,OAAO,OAAO,QAAQ;AAAA,IACtE,qBAAC,UAAK,WAAU,0BACf;AAAA,2BAAC,UAAK,WAAU,0BACd;AAAA,eAAO;AAAA,QACP,OAAO,OACP,oBAAC,UAAK,WAAU,yBAAyB,cAAI,IAAI,sBAAsB,CAAC,KAAI;AAAA,SAE9E;AAAA,MACC,OAAO,aACP,oBAAC,UAAK,WAAU,+BAA+B,iBAAO,WAAU;AAAA,OAElE;AAAA,KACD;AAEF;AAQO,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACD,GAAqB;AACpB,QAAM,MAAM,eAAe;AAC3B,MAAI,QAAQ,WAAW,GAAG;AACzB,WACC,oBAAC,SAAI,WAAU,4CACb,wBAAc,IAAI,6BAA6B,GACjD;AAAA,EAEF;AACA,SACC,oBAAC,SAAI,WAAU,oBAAmB,MAAK,WACrC,kBAAQ,IAAI,CAAC,QAAQ,MAAM;AAC3B,UAAM,SAAS,MAAM;AACrB,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,WACC,SACG,0DACA;AAAA,QAKJ,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC,SAAS,MAAM;AACd,cAAI,SAAU,UAAS,MAAM;AAAA,QAC9B;AAAA,QAEC,yBAAe,aAAa,MAAM,IAAI,oBAAC,oBAAiB,QAAgB;AAAA;AAAA,MAjBpE,OAAO;AAAA,IAkBb;AAAA,EAEF,CAAC,GACF;AAEF;",
-  "names": []
-}

package/dist-esm/ui/mention-suggestion.mjs

@@ -1,186 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { ReactRenderer } from "@tiptap/react";
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { atom, react } from "tldraw";
-import { MentionList } from "./mention-list.mjs";
-const MentionPopup = forwardRef(function MentionPopup2({ items, command, renderMember }, ref) {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [prevItems, setPrevItems] = useState(items);
-  if (items !== prevItems) {
-    setPrevItems(items);
-    setActiveIndex(0);
-  }
-  const select = (member) => {
-    if (member) command({ id: member.id, label: member.name });
-  };
-  useImperativeHandle(ref, () => ({
-    onKeyDown: ({ event }) => {
-      if (items.length === 0) return false;
-      if (event.key === "ArrowUp") {
-        setActiveIndex((i) => (i + items.length - 1) % items.length);
-        return true;
-      }
-      if (event.key === "ArrowDown") {
-        setActiveIndex((i) => (i + 1) % items.length);
-        return true;
-      }
-      if (event.key === "Enter" || event.key === "Tab") {
-        select(items[activeIndex] ?? items[0]);
-        return true;
-      }
-      return false;
-    }
-  }));
-  return /* @__PURE__ */ jsx(
-    MentionList,
-    {
-      members: items,
-      activeIndex,
-      onSelect: select,
-      renderMember
-    }
-  );
-});
-const MAX_SUGGESTIONS = 8;
-function filterMentionMembers(members, query) {
-  const q = query.toLowerCase();
-  return members.filter((m) => m.name.toLowerCase().includes(q)).slice(0, MAX_SUGGESTIONS);
-}
-const mentionPickerOpen = atom("isMentionPickerOpen", false);
-function isMentionPickerOpen() {
-  return mentionPickerOpen.get();
-}
-function createMentionSuggestion(getSuggestions, options = {}) {
-  return {
-    char: "@",
-    items: ({ query }) => getSuggestions(query),
-    render: () => {
-      let renderer = null;
-      let container = null;
-      let editorEl = null;
-      let canvasEl = null;
-      let stopCameraReaction = null;
-      let anchorPage = null;
-      let popupWidth = 0;
-      const applyScreen = (left, top, width) => {
-        if (!container) return;
-        container.style.left = `${left}px`;
-        container.style.top = `${top + 4}px`;
-        container.style.width = `${width}px`;
-      };
-      const place = () => {
-        if (!container || !editorEl || container.style.display === "none") return;
-        const field = editorEl.closest(".cmt-composer__field") ?? editorEl;
-        const rect = field.getBoundingClientRect();
-        popupWidth = rect.width;
-        anchorPage = options.editor?.screenToPage({ x: rect.left, y: rect.bottom }) ?? null;
-        applyScreen(rect.left, rect.bottom, rect.width);
-      };
-      const reposition = () => {
-        if (!anchorPage || !options.editor) return;
-        const s = options.editor.pageToScreen(anchorPage);
-        applyScreen(s.x, s.y, popupWidth);
-      };
-      const startFollowing = () => {
-        window.addEventListener("scroll", place, true);
-        window.addEventListener("resize", place);
-        if (options.editor) {
-          stopCameraReaction = react("anchor mention popup to camera", () => {
-            options.editor.getCamera();
-            reposition();
-          });
-        }
-      };
-      const stopFollowing = () => {
-        window.removeEventListener("scroll", place, true);
-        window.removeEventListener("resize", place);
-        stopCameraReaction?.();
-        stopCameraReaction = null;
-        anchorPage = null;
-      };
-      const hide = () => {
-        if (container) container.style.display = "none";
-        mentionPickerOpen.set(false);
-      };
-      const onWheel = (e) => {
-        if (e.isSpecialRedispatchedEvent || !canvasEl) return;
-        const list = container?.querySelector(".cmt-mention-list");
-        if (list && list.scrollHeight > list.clientHeight) return;
-        e.preventDefault();
-        const redispatched = new WheelEvent("wheel", e);
-        redispatched.isSpecialRedispatchedEvent = true;
-        canvasEl.dispatchEvent(redispatched);
-      };
-      return {
-        onStart: (props) => {
-          renderer = new ReactRenderer(MentionPopup, {
-            props: {
-              items: props.items,
-              command: props.command,
-              renderMember: options.renderMember
-            },
-            editor: props.editor
-          });
-          editorEl = props.editor.view.dom;
-          editorEl.addEventListener("blur", hide);
-          container = document.createElement("div");
-          container.className = "cmt-mention-popup";
-          container.appendChild(renderer.element);
-          const themed = editorEl.closest(".tl-container");
-          (themed ?? document.body).appendChild(container);
-          canvasEl = themed?.querySelector(".tl-canvas") ?? null;
-          container.addEventListener("wheel", onWheel, { passive: false });
-          place();
-          startFollowing();
-          mentionPickerOpen.set(true);
-        },
-        onUpdate: (props) => {
-          if (renderer)
-            renderer.updateProps({
-              items: props.items,
-              command: props.command,
-              renderMember: options.renderMember
-            });
-          if (container) container.style.display = "";
-          mentionPickerOpen.set(true);
-          place();
-        },
-        onKeyDown: (props) => {
-          if (!isMentionPickerOpen()) return false;
-          if (props.event.key === "Escape") {
-            hide();
-            props.event.stopPropagation();
-            return true;
-          }
-          if (props.event.key === "Enter" || props.event.key === "Tab") {
-            const completed = renderer?.ref?.onKeyDown(props) ?? false;
-            if (!completed) {
-              hide();
-              props.event.stopPropagation();
-            }
-            return true;
-          }
-          if (renderer && renderer.ref) return renderer.ref.onKeyDown(props);
-          return false;
-        },
-        onExit: () => {
-          stopFollowing();
-          if (editorEl) editorEl.removeEventListener("blur", hide);
-          if (container) container.removeEventListener("wheel", onWheel);
-          if (container) container.remove();
-          if (renderer) renderer.destroy();
-          renderer = null;
-          container = null;
-          canvasEl = null;
-          mentionPickerOpen.set(false);
-        }
-      };
-    }
-  };
-}
-export {
-  createMentionSuggestion,
-  filterMentionMembers,
-  isMentionPickerOpen
-};
-//# sourceMappingURL=mention-suggestion.mjs.map

package/dist-esm/ui/mention-suggestion.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/mention-suggestion.tsx"],
-  "sourcesContent": ["import type { MentionNodeAttrs } from '@tiptap/extension-mention'\nimport { ReactRenderer } from '@tiptap/react'\nimport type { SuggestionKeyDownProps, SuggestionOptions } from '@tiptap/suggestion'\nimport { type ReactNode, forwardRef, useImperativeHandle, useState } from 'react'\nimport { type Editor as TldrawEditor, atom, react } from 'tldraw'\nimport { MentionList, MentionMember } from './mention-list'\n\n/** The handle the suggestion plugin drives \u2014 it forwards navigation keys into the popup. */\nexport interface MentionPopupHandle {\n\tonKeyDown(props: SuggestionKeyDownProps): boolean\n}\n\ninterface MentionPopupProps {\n\titems: MentionMember[]\n\tcommand(attrs: MentionNodeAttrs): void\n\trenderMember?(member: MentionMember): ReactNode\n}\n\n/** The live @-picker popup: owns the highlighted index and keyboard, renders the presentational list. */\nconst MentionPopup = forwardRef<MentionPopupHandle, MentionPopupProps>(function MentionPopup(\n\t{ items, command, renderMember },\n\tref\n) {\n\tconst [activeIndex, setActiveIndex] = useState(0)\n\t// A new query yields new items; reset the highlight to the top during render \u2014 not in an effect,\n\t// which would leave a frame where `activeIndex` still points past a shrunk list and Enter selects\n\t// its (now out-of-range, undefined) item, swallowing the key without inserting a mention.\n\tconst [prevItems, setPrevItems] = useState(items)\n\tif (items !== prevItems) {\n\t\tsetPrevItems(items)\n\t\tsetActiveIndex(0)\n\t}\n\n\tconst select = (member: MentionMember | undefined) => {\n\t\tif (member) command({ id: member.id, label: member.name })\n\t}\n\n\tuseImperativeHandle(ref, () => ({\n\t\tonKeyDown: ({ event }) => {\n\t\t\tif (items.length === 0) return false\n\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\tsetActiveIndex((i) => (i + items.length - 1) % items.length)\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\tsetActiveIndex((i) => (i + 1) % items.length)\n\t\t\t\treturn true\n\t\t\t}\n\t\t\t// Enter and Tab both complete the highlighted member (falling back to the top match so a\n\t\t\t// stale index never selects `undefined`). The empty-roster case is handled a level up, in\n\t\t\t// the suggestion's onKeyDown, which cancels the picker.\n\t\t\tif (event.key === 'Enter' || event.key === 'Tab') {\n\t\t\t\tselect(items[activeIndex] ?? items[0])\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t}))\n\n\treturn (\n\t\t<MentionList\n\t\t\tmembers={items}\n\t\t\tactiveIndex={activeIndex}\n\t\t\tonSelect={select}\n\t\t\trenderMember={renderMember}\n\t\t/>\n\t)\n})\n\nconst MAX_SUGGESTIONS = 8\n\n/** Members whose name contains the query (case-insensitive), capped to the popup's length.\n * @public */\nexport function filterMentionMembers(members: MentionMember[], query: string): MentionMember[] {\n\tconst q = query.toLowerCase()\n\treturn members.filter((m) => m.name.toLowerCase().includes(q)).slice(0, MAX_SUGGESTIONS)\n}\n\n// A reactive flag for whether the @-picker is showing. Deliberately NOT tldraw's open-menu registry:\n// registering there mounts MenuClickCapture, which covers the canvas with a click-capture overlay to\n// make it inert while a menu is open. But the picker is an inline autocomplete, not a modal \u2014 the\n// canvas must stay pannable/zoomable beneath it \u2014 so we track \"open\" ourselves instead.\nconst mentionPickerOpen = atom('isMentionPickerOpen', false)\n\n/**\n * Whether the @-mention picker is currently showing. Host dismissal (Escape, outside-click) checks\n * this so it can defer to the picker instead of tearing down the composer or thread beneath it.\n */\nexport function isMentionPickerOpen(): boolean {\n\treturn mentionPickerOpen.get()\n}\n\n/** @public */\nexport interface MentionSuggestionOptions {\n\t/** Override a member row's content in the picker. Defaults to avatar + name (+ secondary). */\n\trenderMember?(member: MentionMember): ReactNode\n\t/**\n\t * The tldraw editor the composer lives in. When provided, the popup re-anchors reactively as the\n\t * canvas camera moves (the composer rides it) instead of polling every frame. Omit off-canvas.\n\t */\n\teditor?: TldrawEditor | null\n}\n\n/**\n * Build the TipTap `suggestion` config for the comment \\@-picker. `getSuggestions(query)` is the\n * host's resolver \u2014 it returns the members matching the query (sync or async); the SDK owns neither\n * the roster nor the filtering. The plugin runs outside React, so `render` mounts `MentionPopup` via\n * a `ReactRenderer`, forwards navigation keys through the popup's imperative handle, and lets it call\n * `command` to insert.\n * @public\n */\nexport function createMentionSuggestion(\n\tgetSuggestions: (query: string) => MentionMember[] | Promise<MentionMember[]>,\n\toptions: MentionSuggestionOptions = {}\n): Omit<SuggestionOptions<MentionMember, MentionNodeAttrs>, 'editor'> {\n\treturn {\n\t\tchar: '@',\n\t\titems: ({ query }) => getSuggestions(query),\n\t\trender: () => {\n\t\t\tlet renderer: ReactRenderer<MentionPopupHandle, MentionPopupProps> | null = null\n\t\t\tlet container: HTMLElement | null = null\n\t\t\tlet editorEl: HTMLElement | null = null\n\t\t\tlet canvasEl: Element | null = null\n\t\t\tlet stopCameraReaction: (() => void) | null = null\n\t\t\t// The composer field's top-left in page space, plus the popup's screen width. Captured on a\n\t\t\t// fresh read so camera moves can re-derive the popup's screen position from the page anchor\n\t\t\t// (see reposition) rather than the field's DOM rect.\n\t\t\tlet anchorPage: { x: number; y: number } | null = null\n\t\t\tlet popupWidth = 0\n\n\t\t\tconst applyScreen = (left: number, top: number, width: number) => {\n\t\t\t\tif (!container) return\n\t\t\t\tcontainer.style.left = `${left}px`\n\t\t\t\tcontainer.style.top = `${top + 4}px`\n\t\t\t\tcontainer.style.width = `${width}px`\n\t\t\t}\n\n\t\t\t// Fresh placement: read the field's real screen rect, position the popup flush under it (not\n\t\t\t// the caret, matching its width), and remember the field's page-space anchor for reposition.\n\t\t\tconst place = () => {\n\t\t\t\tif (!container || !editorEl || container.style.display === 'none') return\n\t\t\t\tconst field = editorEl.closest('.cmt-composer__field') ?? editorEl\n\t\t\t\tconst rect = field.getBoundingClientRect()\n\t\t\t\tpopupWidth = rect.width\n\t\t\t\tanchorPage = options.editor?.screenToPage({ x: rect.left, y: rect.bottom }) ?? null\n\t\t\t\tapplyScreen(rect.left, rect.bottom, rect.width)\n\t\t\t}\n\n\t\t\t// Re-derive the popup's screen position from the remembered page anchor \u2014 pure camera math,\n\t\t\t// always current. Reading the field's DOM rect here instead would lag by a frame: the canvas\n\t\t\t// composer re-positions itself on a React commit (a `useValue(pageToViewport(...))`), which\n\t\t\t// lands after a camera reaction runs, so the rect is still last frame's during a pan.\n\t\t\tconst reposition = () => {\n\t\t\t\tif (!anchorPage || !options.editor) return\n\t\t\t\tconst s = options.editor.pageToScreen(anchorPage)\n\t\t\t\tapplyScreen(s.x, s.y, popupWidth)\n\t\t\t}\n\n\t\t\t// The popup is `position: fixed`, but its anchor \u2014 a canvas composer \u2014 rides the camera:\n\t\t\t// panning or zooming moves the composer with no scroll/resize event to hook. Re-anchor when\n\t\t\t// the camera actually changes (via a tldraw reaction) rather than polling every frame, plus\n\t\t\t// on window scroll/resize for the off-canvas case (which re-read the field directly).\n\t\t\tconst startFollowing = () => {\n\t\t\t\twindow.addEventListener('scroll', place, true)\n\t\t\t\twindow.addEventListener('resize', place)\n\t\t\t\tif (options.editor) {\n\t\t\t\t\tstopCameraReaction = react('anchor mention popup to camera', () => {\n\t\t\t\t\t\toptions.editor!.getCamera() // track the camera so this re-runs as it moves\n\t\t\t\t\t\treposition()\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst stopFollowing = () => {\n\t\t\t\twindow.removeEventListener('scroll', place, true)\n\t\t\t\twindow.removeEventListener('resize', place)\n\t\t\t\tstopCameraReaction?.()\n\t\t\t\tstopCameraReaction = null\n\t\t\t\tanchorPage = null\n\t\t\t}\n\n\t\t\t// Dismiss the roster \u2014 on Escape, or when the composer loses focus \u2014 by hiding it and\n\t\t\t// clearing the open flag, so isMentionPickerOpen() stays accurate and the thread's own\n\t\t\t// Escape/outside-click dismissal can take over. The TipTap suggestion stays active, so typing\n\t\t\t// re-shows the roster via onUpdate.\n\t\t\tconst hide = () => {\n\t\t\t\tif (container) container.style.display = 'none'\n\t\t\t\tmentionPickerOpen.set(false)\n\t\t\t}\n\n\t\t\t// Wheel/panning over the popup drives the canvas beneath it, so scrolling to pan or zoom\n\t\t\t// isn't swallowed by the roster \u2014 the same passthrough the rest of the comments UI gets from\n\t\t\t// `usePassThroughWheelEvents`. The list still scrolls itself when the roster overflows (we\n\t\t\t// only redispatch when it can't). Done imperatively because the popup lives outside React.\n\t\t\tconst onWheel = (e: WheelEvent) => {\n\t\t\t\tif ((e as any).isSpecialRedispatchedEvent || !canvasEl) return\n\t\t\t\tconst list = container?.querySelector('.cmt-mention-list')\n\t\t\t\tif (list && list.scrollHeight > list.clientHeight) return\n\t\t\t\te.preventDefault()\n\t\t\t\tconst redispatched = new WheelEvent('wheel', e)\n\t\t\t\t;(redispatched as any).isSpecialRedispatchedEvent = true\n\t\t\t\tcanvasEl.dispatchEvent(redispatched)\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonStart: (props) => {\n\t\t\t\t\trenderer = new ReactRenderer(MentionPopup, {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\titems: props.items,\n\t\t\t\t\t\t\tcommand: props.command,\n\t\t\t\t\t\t\trenderMember: options.renderMember,\n\t\t\t\t\t\t},\n\t\t\t\t\t\teditor: props.editor,\n\t\t\t\t\t})\n\t\t\t\t\teditorEl = props.editor.view.dom as HTMLElement\n\t\t\t\t\t// The TipTap suggestion has no blur handling, so without this the picker would stay\n\t\t\t\t\t// \"open\" (and the thread would defer its Escape to it) after focus moved away from the\n\t\t\t\t\t// composer \u2014 leaving Escape a no-op and the roster stuck on screen.\n\t\t\t\t\teditorEl.addEventListener('blur', hide)\n\t\t\t\t\tcontainer = document.createElement('div')\n\t\t\t\t\tcontainer.className = 'cmt-mention-popup'\n\t\t\t\t\tcontainer.appendChild(renderer.element)\n\t\t\t\t\t// Mount inside the tldraw container so the popup inherits the theme variables\n\t\t\t\t\t// (--tl-color-*); portaling to document.body would strip them and lose the panel.\n\t\t\t\t\tconst themed = editorEl.closest('.tl-container')\n\t\t\t\t\t;(themed ?? document.body).appendChild(container)\n\t\t\t\t\tcanvasEl = themed?.querySelector('.tl-canvas') ?? null\n\t\t\t\t\tcontainer.addEventListener('wheel', onWheel, { passive: false })\n\t\t\t\t\tplace()\n\t\t\t\t\tstartFollowing()\n\t\t\t\t\tmentionPickerOpen.set(true)\n\t\t\t\t},\n\t\t\t\tonUpdate: (props) => {\n\t\t\t\t\tif (renderer)\n\t\t\t\t\t\trenderer.updateProps({\n\t\t\t\t\t\t\titems: props.items,\n\t\t\t\t\t\t\tcommand: props.command,\n\t\t\t\t\t\t\trenderMember: options.renderMember,\n\t\t\t\t\t\t})\n\t\t\t\t\t// Typing after an Escape re-shows the roster.\n\t\t\t\t\tif (container) container.style.display = ''\n\t\t\t\t\tmentionPickerOpen.set(true)\n\t\t\t\t\tplace()\n\t\t\t\t},\n\t\t\t\tonKeyDown: (props) => {\n\t\t\t\t\t// Once the roster is hidden (a prior Escape), the TipTap suggestion is still active but\n\t\t\t\t\t// this handler goes inert \u2014 every key passes through to the composer/thread (so a second\n\t\t\t\t\t// Escape closes them, and Arrow/Enter don't select from an invisible list). Typing\n\t\t\t\t\t// re-shows the roster via onUpdate.\n\t\t\t\t\tif (!isMentionPickerOpen()) return false\n\t\t\t\t\tif (props.event.key === 'Escape') {\n\t\t\t\t\t\t// Dismiss only the roster: hide it and stop the key so the composer/thread beneath\n\t\t\t\t\t\t// doesn't also treat Escape as \"abandon\".\n\t\t\t\t\t\thide()\n\t\t\t\t\t\tprops.event.stopPropagation()\n\t\t\t\t\t\treturn true\n\t\t\t\t\t}\n\t\t\t\t\tif (props.event.key === 'Enter' || props.event.key === 'Tab') {\n\t\t\t\t\t\t// Complete the highlighted member if there is one to complete; if the roster is empty\n\t\t\t\t\t\t// there's nothing to pick, so cancel the picker and swallow the key \u2014 the composer\n\t\t\t\t\t\t// beneath neither submits (Enter) nor moves focus / indents (Tab).\n\t\t\t\t\t\tconst completed = renderer?.ref?.onKeyDown(props) ?? false\n\t\t\t\t\t\tif (!completed) {\n\t\t\t\t\t\t\thide()\n\t\t\t\t\t\t\tprops.event.stopPropagation()\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn true\n\t\t\t\t\t}\n\t\t\t\t\tif (renderer && renderer.ref) return renderer.ref.onKeyDown(props)\n\t\t\t\t\treturn false\n\t\t\t\t},\n\t\t\t\tonExit: () => {\n\t\t\t\t\tstopFollowing()\n\t\t\t\t\tif (editorEl) editorEl.removeEventListener('blur', hide)\n\t\t\t\t\tif (container) container.removeEventListener('wheel', onWheel)\n\t\t\t\t\tif (container) container.remove()\n\t\t\t\t\tif (renderer) renderer.destroy()\n\t\t\t\t\trenderer = null\n\t\t\t\t\tcontainer = null\n\t\t\t\t\tcanvasEl = null\n\t\t\t\t\tmentionPickerOpen.set(false)\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n}\n"],
-  "mappings": "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",
-  "names": ["MentionPopup"]
-}

package/dist-esm/ui/mention.mjs

@@ -1,11 +0,0 @@
-import { jsxs } from "react/jsx-runtime";
-function Mention({ name }) {
-  return /* @__PURE__ */ jsxs("span", { className: "cmt-mention", children: [
-    "@",
-    name
-  ] });
-}
-export {
-  Mention
-};
-//# sourceMappingURL=mention.mjs.map

package/dist-esm/ui/mention.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/mention.tsx"],
-  "sourcesContent": ["/** @public */\nexport interface MentionProps {\n\tname: string\n}\n\n/** An \\@-mention pill for referencing a person in a comment. @public @react */\nexport function Mention({ name }: MentionProps) {\n\treturn <span className=\"cmt-mention\">@{name}</span>\n}\n"],
-  "mappings": "AAOQ;AADD,SAAS,QAAQ,EAAE,KAAK,GAAiB;AAC/C,SAAO,qBAAC,UAAK,WAAU,eAAc;AAAA;AAAA,IAAE;AAAA,KAAK;AAC7C;",
-  "names": []
-}

package/dist-esm/ui/render-markdown.mjs

@@ -1,45 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-function renderMarkdown(text) {
-  return text.trim().split(/\n{2,}/).map((block, i) => {
-    const lines = block.split("\n");
-    if (lines.every((line) => /^\s*[-*]\s+/.test(line))) {
-      return (
-        /* @__PURE__ */ jsx("ul", { className: "md-list", children: lines.map((line, j) => /* @__PURE__ */ jsx("li", { children: renderInline(line.replace(/^\s*[-*]\s+/, "")) }, j)) }, i)
-      );
-    }
-    return /* @__PURE__ */ jsx("p", { className: "md-p", children: lines.map((line, j) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      j > 0 && /* @__PURE__ */ jsx("br", {}),
-      renderInline(line)
-    ] }, j)) }, i);
-  });
-}
-const INLINE = /(\*\*[^*]+\*\*|\*[^*]+\*|_[^_]+_|`[^`]+`|\[[^\]]+\]\([^)]+\))/g;
-function renderInline(text) {
-  const out = [];
-  let last = 0;
-  let key = 0;
-  for (const match of text.matchAll(INLINE)) {
-    const index = match.index ?? 0;
-    if (index > last) out.push(text.slice(last, index));
-    out.push(renderToken(match[0], key++));
-    last = index + match[0].length;
-  }
-  if (last < text.length) out.push(text.slice(last));
-  return out;
-}
-function renderToken(token, key) {
-  if (token.startsWith("**")) return /* @__PURE__ */ jsx("strong", { children: token.slice(2, -2) }, key);
-  if (token.startsWith("`"))
-    return /* @__PURE__ */ jsx("code", { className: "md-code", children: token.slice(1, -1) }, key);
-  if (token.startsWith("[")) {
-    const link = /\[([^\]]+)\]\(([^)]+)\)/.exec(token);
-    if (!link) return token;
-    return /* @__PURE__ */ jsx("a", { href: link[2], target: "_blank", rel: "noreferrer", children: link[1] }, key);
-  }
-  return /* @__PURE__ */ jsx("em", { children: token.slice(1, -1) }, key);
-}
-export {
-  renderMarkdown
-};
-//# sourceMappingURL=render-markdown.mjs.map

package/dist-esm/ui/render-markdown.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/render-markdown.tsx"],
-  "sourcesContent": ["import { Fragment, ReactNode } from 'react'\n\n/**\n * Minimal markdown for comment bodies: paragraphs, line breaks, bullet lists, and\n * inline **bold**, *italic*, `code`, and [links](url). Not a full CommonMark parser \u2014\n * just the markdown people actually write in comments. Renders React elements only \u2014\n * never raw HTML \u2014 so there's no HTML-injection surface.\n * @public\n */\nexport function renderMarkdown(text: string): ReactNode {\n\treturn text\n\t\t.trim()\n\t\t.split(/\\n{2,}/)\n\t\t.map((block, i) => {\n\t\t\tconst lines = block.split('\\n')\n\t\t\tif (lines.every((line) => /^\\s*[-*]\\s+/.test(line))) {\n\t\t\t\treturn (\n\t\t\t\t\t<ul key={i} className=\"md-list\">\n\t\t\t\t\t\t{lines.map((line, j) => (\n\t\t\t\t\t\t\t<li key={j}>{renderInline(line.replace(/^\\s*[-*]\\s+/, ''))}</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<p key={i} className=\"md-p\">\n\t\t\t\t\t{lines.map((line, j) => (\n\t\t\t\t\t\t<Fragment key={j}>\n\t\t\t\t\t\t\t{j > 0 && <br />}\n\t\t\t\t\t\t\t{renderInline(line)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</p>\n\t\t\t)\n\t\t})\n}\n\nconst INLINE = /(\\*\\*[^*]+\\*\\*|\\*[^*]+\\*|_[^_]+_|`[^`]+`|\\[[^\\]]+\\]\\([^)]+\\))/g\n\nfunction renderInline(text: string): ReactNode {\n\tconst out: ReactNode[] = []\n\tlet last = 0\n\tlet key = 0\n\tfor (const match of text.matchAll(INLINE)) {\n\t\tconst index = match.index ?? 0\n\t\tif (index > last) out.push(text.slice(last, index))\n\t\tout.push(renderToken(match[0], key++))\n\t\tlast = index + match[0].length\n\t}\n\tif (last < text.length) out.push(text.slice(last))\n\treturn out\n}\n\nfunction renderToken(token: string, key: number): ReactNode {\n\tif (token.startsWith('**')) return <strong key={key}>{token.slice(2, -2)}</strong>\n\tif (token.startsWith('`'))\n\t\treturn (\n\t\t\t<code key={key} className=\"md-code\">\n\t\t\t\t{token.slice(1, -1)}\n\t\t\t</code>\n\t\t)\n\tif (token.startsWith('[')) {\n\t\tconst link = /\\[([^\\]]+)\\]\\(([^)]+)\\)/.exec(token)\n\t\tif (!link) return token\n\t\treturn (\n\t\t\t<a key={key} href={link[2]} target=\"_blank\" rel=\"noreferrer\">\n\t\t\t\t{link[1]}\n\t\t\t</a>\n\t\t)\n\t}\n\treturn <em key={key}>{token.slice(1, -1)}</em>\n}\n"],
-  "mappings": "AAmBO,cAQD,YARC;AAnBP,SAAS,gBAA2B;AAS7B,SAAS,eAAe,MAAyB;AACvD,SAAO,KACL,KAAK,EACL,MAAM,QAAQ,EACd,IAAI,CAAC,OAAO,MAAM;AAClB,UAAM,QAAQ,MAAM,MAAM,IAAI;AAC9B,QAAI,MAAM,MAAM,CAAC,SAAS,cAAc,KAAK,IAAI,CAAC,GAAG;AACpD,aACC,oBAAC,QAAW,WAAU,WACpB,gBAAM,IAAI,CAAC,MAAM,MACjB,oBAAC,QAAY,uBAAa,KAAK,QAAQ,eAAe,EAAE,CAAC,KAAhD,CAAkD,CAC3D,KAHO,CAIT;AAAA,IAEF;AACA,WACC,oBAAC,OAAU,WAAU,QACnB,gBAAM,IAAI,CAAC,MAAM,MACjB,qBAAC,YACC;AAAA,UAAI,KAAK,oBAAC,QAAG;AAAA,MACb,aAAa,IAAI;AAAA,SAFJ,CAGf,CACA,KANM,CAOR;AAAA,EAEF,CAAC;AACH;AAEA,MAAM,SAAS;AAEf,SAAS,aAAa,MAAyB;AAC9C,QAAM,MAAmB,CAAC;AAC1B,MAAI,OAAO;AACX,MAAI,MAAM;AACV,aAAW,SAAS,KAAK,SAAS,MAAM,GAAG;AAC1C,UAAM,QAAQ,MAAM,SAAS;AAC7B,QAAI,QAAQ,KAAM,KAAI,KAAK,KAAK,MAAM,MAAM,KAAK,CAAC;AAClD,QAAI,KAAK,YAAY,MAAM,CAAC,GAAG,KAAK,CAAC;AACrC,WAAO,QAAQ,MAAM,CAAC,EAAE;AAAA,EACzB;AACA,MAAI,OAAO,KAAK,OAAQ,KAAI,KAAK,KAAK,MAAM,IAAI,CAAC;AACjD,SAAO;AACR;AAEA,SAAS,YAAY,OAAe,KAAwB;AAC3D,MAAI,MAAM,WAAW,IAAI,EAAG,QAAO,oBAAC,YAAkB,gBAAM,MAAM,GAAG,EAAE,KAAvB,GAAyB;AACzE,MAAI,MAAM,WAAW,GAAG;AACvB,WACC,oBAAC,UAAe,WAAU,WACxB,gBAAM,MAAM,GAAG,EAAE,KADR,GAEX;AAEF,MAAI,MAAM,WAAW,GAAG,GAAG;AAC1B,UAAM,OAAO,0BAA0B,KAAK,KAAK;AACjD,QAAI,CAAC,KAAM,QAAO;AAClB,WACC,oBAAC,OAAY,MAAM,KAAK,CAAC,GAAG,QAAO,UAAS,KAAI,cAC9C,eAAK,CAAC,KADA,GAER;AAAA,EAEF;AACA,SAAO,oBAAC,QAAc,gBAAM,MAAM,GAAG,EAAE,KAAvB,GAAyB;AAC1C;",
-  "names": []
-}

package/src/canvas/region-options.ts

@@ -1,57 +0,0 @@
-import { atom, Atom, Editor, VecLike } from 'tldraw'
-
-/**
- * The configurable dimensions of region comments — a design surface for prototyping the interaction
- * before settling it. Region is **off by default**, so a consumer that leaves it unset keeps plain
- * click-only point/shape commenting. Set it per editor through `<CanvasComments regionOptions>`.
- * @public
- */
-export interface RegionCommentOptions {
-	/** Whether dragging the comment tool out creates a region anchor. Off → click-only. */
-	enabled: boolean
-	/** Which corner the pin and composer sit on, as a normalized 0–1 offset. Default bottom-right. */
-	pinCorner: VecLike
-	/** When the dashed box and its handles reveal: while the pointer is within the region, while the
-	 *  pin is hovered, or only while the thread is open. */
-	reveal: 'pointer' | 'pin-hover' | 'open'
-	/** How a region is moved: dragging its pin, dragging its body, or either. */
-	move: 'pin' | 'body' | 'both'
-	/** The resize affordance: corner handles, edge handles, or none. */
-	resize: 'corners' | 'edges' | 'none'
-}
-
-/** The out-of-the-box region config: disabled, and — when a consumer enables it — the current
- *  bottom-right / pointer-reveal / pin-move / corner-resize behaviour.
- * @public */
-export const DEFAULT_REGION_COMMENT_OPTIONS: RegionCommentOptions = {
-	enabled: false,
-	pinCorner: { x: 1, y: 1 },
-	reveal: 'pointer',
-	move: 'pin',
-	resize: 'corners',
-}
-
-// Per-editor region config. The overlay publishes its merged `regionOptions` here so the comment
-// tool — which has no props of its own — can read the same per-instance config at interaction time.
-// Held in an atom so reactive readers (e.g. `anchorPagePoint`, called inside `useValue`) recompute
-// when the config changes; a plain map read wouldn't, leaving the pin at the stale default corner.
-const byEditor = new WeakMap<Editor, Atom<RegionCommentOptions>>()
-
-function getEditorAtom(editor: Editor): Atom<RegionCommentOptions> {
-	let a = byEditor.get(editor)
-	if (!a) {
-		a = atom('regionCommentOptions', DEFAULT_REGION_COMMENT_OPTIONS)
-		byEditor.set(editor, a)
-	}
-	return a
-}
-
-/** Publish an editor's region config (called by the overlay from its `regionOptions` prop). */
-export function setRegionCommentOptions(editor: Editor, options: RegionCommentOptions): void {
-	getEditorAtom(editor).set(options)
-}
-
-/** The editor's region config, or the disabled default when none was set. */
-export function getRegionCommentOptions(editor: Editor): RegionCommentOptions {
-	return getEditorAtom(editor).get()
-}

package/src/ui/avatar.tsx

@@ -1,31 +0,0 @@
-import { getFirstCharacter } from 'tldraw'
-
-/** @public */
-export interface AvatarProps {
-	name: string
-	/** Background colour, used when there's no `image`. Falls back to the default avatar tint. */
-	color?: string
-	/** Avatar image URL. When set, shows the image instead of the coloured initial. */
-	image?: string
-}
-
-function initial(name: string) {
-	return (getFirstCharacter(name.trim()) || '?').toUpperCase()
-}
-
-/** A commenter's avatar — their image if provided, otherwise a single-initial coloured circle.
- * @public @react */
-export function Avatar({ name, color, image }: AvatarProps) {
-	if (image) {
-		return <img className="cmt-avatar cmt-avatar--image" src={image} alt="" aria-hidden="true" />
-	}
-	return (
-		<div
-			className="cmt-avatar"
-			aria-hidden="true"
-			style={color ? { backgroundColor: color } : undefined}
-		>
-			{initial(name)}
-		</div>
-	)
-}

package/src/ui/comment-mention.ts

@@ -1,47 +0,0 @@
-import { mergeAttributes } from '@tiptap/core'
-import { Mention, type MentionNodeAttrs, type MentionOptions } from '@tiptap/extension-mention'
-
-/**
- * A mention node's display name: the member's current name, resolved live from its id when a
- * resolver is given (so a rename shows through), falling back to the label captured at insert time
- * when no source can name the id — e.g. a deleted account. The stored id is always the source of
- * truth; live resolution only freshens the displayed name over that captured label.
- */
-function mentionName(
-	attrs: MentionNodeAttrs,
-	resolveName?: (id: string) => string | undefined
-): string {
-	const resolved = attrs.id && resolveName ? resolveName(attrs.id) : undefined
-	return resolved ?? attrs.label ?? attrs.id ?? ''
-}
-
-export interface CommentMentionOptions {
-	/**
-	 * Resolve a member id to its current display name — for the read-only render paths. Returns
-	 * `undefined` when the id can't be resolved, so the render falls back to the mention's stored label.
-	 */
-	resolveName?(id: string): string | undefined
-	/** The `@`-picker suggestion config — for the composer (omit on the render paths). */
-	suggestion?: MentionOptions['suggestion']
-}
-
-/**
- * The comment @-mention node — TipTap's `Mention` configured to render as a `.cmt-mention` pill.
- *
- * A factory rather than a shared constant because it's configured differently per context: the
- * read-only render paths pass `resolveName` (so the stored `{ id }` node always shows the member's
- * current name, not a copy frozen at insert time), while the composer passes a `suggestion` (the
- * `@` picker). The node schema is identical either way — only these two levers differ.
- */
-export function commentMention({ resolveName, suggestion }: CommentMentionOptions = {}) {
-	return Mention.configure({
-		HTMLAttributes: { class: 'cmt-mention' },
-		renderText: ({ node }) => `@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,
-		renderHTML: ({ node, options }) => [
-			'span',
-			mergeAttributes(options.HTMLAttributes, { 'data-mention-id': node.attrs.id }),
-			`@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,
-		],
-		...(suggestion ? { suggestion } : {}),
-	})
-}

package/src/ui/comment-text.tsx

@@ -1,12 +0,0 @@
-import { renderMarkdown } from './render-markdown'
-
-/** @public */
-export interface CommentTextProps {
-	/** Rich text body, authored as markdown. */
-	text: string
-}
-
-/** A comment's body, rendered as markdown (bold, italic, code, links, lists). @public @react */
-export function CommentText({ text }: CommentTextProps) {
-	return <div className="cmt-text">{renderMarkdown(text)}</div>
-}