@tldraw/mentions 0.0.0-bootstrap

package/README.md

@@ -0,0 +1,16 @@
+# @tldraw/mentions
+
+The tldraw `@`-mention picker and TipTap mention node. Shared by `@tldraw/commenting` (the comment
+composer) and tldraw shape rich text, so mentioning works the same wherever rich text is edited.
+
+This package owns:
+
+- `createMentionExtension` — the TipTap mention node, configured to render as a pill and (optionally)
+  drive the `@` picker.
+- `createMentionSuggestion` — the TipTap `suggestion` config that shows the live member picker as you
+  type after `@`, anchored to the editor and (on canvas) re-anchored as the camera moves.
+- `MentionList` / `Mention` / `Avatar` — the presentational picker and pill components.
+- `filterMentionMembers`, `isMentionPickerOpen` — helpers for hosts.
+
+The host owns the roster: pass a resolver that returns the members matching an `@`-query, and a
+`resolveName` that maps a stored member id to its current display name.

package/dist-cjs/avatar.js

@@ -0,0 +1,51 @@
+"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 avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => Avatar
+});
+module.exports = __toCommonJS(avatar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tldraw = require("tldraw");
+function initial(name) {
+  return ((0, import_tldraw.getFirstCharacter)(name.trim()) || "?").toUpperCase();
+}
+function Avatar({ author }) {
+  if (author.image) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        className: "tlui-cmt-avatar tlui-cmt-avatar--image",
+        src: author.image,
+        alt: "",
+        "aria-hidden": "true"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "tlui-cmt-avatar",
+      "aria-hidden": "true",
+      style: author.color ? { backgroundColor: author.color } : void 0,
+      children: initial(author.name)
+    }
+  );
+}
+//# sourceMappingURL=avatar.js.map

package/dist-cjs/avatar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/avatar.tsx"],
+  "sourcesContent": ["import { getFirstCharacter } from 'tldraw'\nimport { CommentAuthor } from './comment-author'\n\n/** @public */\nexport interface AvatarProps {\n\tauthor: CommentAuthor\n}\n\nfunction initial(name: string) {\n\treturn (getFirstCharacter(name.trim()) || '?').toUpperCase()\n}\n\n/** A person's avatar \u2014 their image if provided, otherwise a single-initial coloured circle.\n * @public @react */\nexport function Avatar({ author }: AvatarProps) {\n\tif (author.image) {\n\t\treturn (\n\t\t\t<img\n\t\t\t\tclassName=\"tlui-cmt-avatar tlui-cmt-avatar--image\"\n\t\t\t\tsrc={author.image}\n\t\t\t\talt=\"\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName=\"tlui-cmt-avatar\"\n\t\t\taria-hidden=\"true\"\n\t\t\tstyle={author.color ? { backgroundColor: author.color } : undefined}\n\t\t>\n\t\t\t{initial(author.name)}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBG;AAjBH,oBAAkC;AAQlC,SAAS,QAAQ,MAAc;AAC9B,cAAQ,iCAAkB,KAAK,KAAK,CAAC,KAAK,KAAK,YAAY;AAC5D;AAIO,SAAS,OAAO,EAAE,OAAO,GAAgB;AAC/C,MAAI,OAAO,OAAO;AACjB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,KAAK,OAAO;AAAA,QACZ,KAAI;AAAA,QACJ,eAAY;AAAA;AAAA,IACb;AAAA,EAEF;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,OAAO,OAAO,QAAQ,EAAE,iBAAiB,OAAO,MAAM,IAAI;AAAA,MAEzD,kBAAQ,OAAO,IAAI;AAAA;AAAA,EACrB;AAEF;",
+  "names": []
+}

package/dist-cjs/comment-author.js

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

package/dist-cjs/comment-author.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/comment-author.ts"],
+  "sourcesContent": ["import { JsonObject } from 'tldraw'\n\n/** A comment author's display identity, resolved from an author id.\n * @public */\nexport interface CommentAuthor {\n\tname: string\n\t/** The author's color (any CSS color) \u2014 colors their avatar and pins.\n\t *  Omit for the default tint. */\n\tcolor?: string\n\t/** Avatar image URL. When set, avatars show the image instead of the colored initial;\n\t *  the canvas pin keeps the initial-on-color. */\n\timage?: string\n\t/** User-defined metadata for the author, never read by the toolkit (like a shape's `meta`). */\n\tmeta?: JsonObject\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dist-cjs/index.d.ts

@@ -0,0 +1,131 @@
+import { Editor } from 'tldraw';
+import { JsonObject } from 'tldraw';
+import { JSX } from 'react/jsx-runtime';
+import { MentionNodeAttrs } from '@tiptap/extension-mention';
+import { MentionOptions } from '@tiptap/extension-mention';
+import { Node as Node_2 } from '@tiptap/core';
+import { ReactNode } from 'react';
+import type { SuggestionOptions } from '@tiptap/suggestion';
+
+/** A person's avatar — their image if provided, otherwise a single-initial coloured circle.
+ * @public @react */
+export declare function Avatar({ author }: AvatarProps): JSX.Element;
+
+/** @public */
+export declare interface AvatarProps {
+    author: CommentAuthor;
+}
+
+/** A comment author's display identity, resolved from an author id.
+ * @public */
+export declare interface CommentAuthor {
+    name: string;
+    /** The author's color (any CSS color) — colors their avatar and pins.
+     *  Omit for the default tint. */
+    color?: string;
+    /** Avatar image URL. When set, avatars show the image instead of the colored initial;
+     *  the canvas pin keeps the initial-on-color. */
+    image?: string;
+    /** User-defined metadata for the author, never read by the toolkit (like a shape's `meta`). */
+    meta?: JsonObject;
+}
+
+/**
+ * The \@-mention node — TipTap's `Mention` configured to render as a `.tlui-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 an editor passes a `suggestion` (the `@`
+ * picker). Shape rich text passes both — the same extension both edits and renders. The node schema
+ * is identical either way — only these two levers differ.
+ * @public
+ */
+export declare function createMentionExtension({ resolveName, suggestion }?: MentionExtensionOptions): Node_2<MentionOptions<any, MentionNodeAttrs>, any>;
+
+/**
+ * Build the TipTap `suggestion` config for the \@-picker. `getSuggestions(query)` is the host's
+ * resolver — it returns the members matching the query (sync or async); the SDK owns neither the
+ * roster nor the filtering. The plugin runs outside React, so `render` mounts `MentionPopup` via a
+ * `ReactRenderer`, forwards navigation keys through the popup's imperative handle, and lets it call
+ * `command` to insert.
+ * @public
+ */
+export declare function createMentionSuggestion(getSuggestions: (query: string) => MentionMember[] | Promise<MentionMember[]>, options?: MentionSuggestionOptions): Omit<SuggestionOptions<MentionMember, MentionNodeAttrs>, 'editor'>;
+
+/** Members whose name contains the query (case-insensitive), capped to the popup's length.
+ * @public */
+export declare function filterMentionMembers(members: MentionMember[], query: string): MentionMember[];
+
+/**
+ * Whether the \@-mention picker is currently showing. Host dismissal (Escape, outside-click) checks
+ * this so it can defer to the picker instead of tearing down the composer or thread beneath it.
+ * @public
+ */
+export declare function isMentionPickerOpen(): boolean;
+
+/** An \@-mention pill for referencing a person. @public @react */
+export declare function Mention({ name }: MentionProps): JSX.Element;
+
+/** @public */
+export declare interface MentionExtensionOptions {
+    /**
+     * Resolve a member id to its current display name — for the read-only render paths, and for the
+     * editor while a mention is displayed. 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 editing (omit on read-only render paths). */
+    suggestion?: MentionOptions['suggestion'];
+}
+
+/**
+ * The \@-mention member picker: a popover list of people to mention, shown as the user types after
+ * `@`. Presentational — the composer's suggestion plugin owns resolution, keyboard navigation, and
+ * placement, and drives this with the host-resolved `members` and the highlighted `activeIndex`.
+ * @public @react
+ */
+export declare function MentionList({ members, activeIndex, onSelect, emptyLabel, renderMember }: MentionListProps): JSX.Element;
+
+/** @public */
+export declare interface MentionListProps {
+    /** Members to choose from — already resolved for the current query by the host. */
+    members: MentionMember[];
+    /** Index of the highlighted row, driven by the composer's keyboard navigation. */
+    activeIndex?: number;
+    /** Called when a member is chosen (click, or Enter on the active row). */
+    onSelect?(member: MentionMember): void;
+    /** Shown when no member matches the query. Defaults to a translated "No matches". */
+    emptyLabel?: string;
+    /** Override a row's content (inside the selectable button). Defaults to avatar + name (+ secondary). */
+    renderMember?(member: MentionMember): ReactNode;
+}
+
+/** A person the composer's \@-mention picker can offer: a {@link CommentAuthor} plus its id and
+ * picker-only display fields. @public */
+export declare interface MentionMember extends CommentAuthor {
+    id: string;
+    /** A secondary line under the name — e.g. an email or handle. Omit for a single-line row. */
+    secondary?: string;
+    /** Marks the current user; shown as a "(You)" suffix after the name. */
+    you?: boolean;
+    /** Hosts may carry extra fields; a custom `renderMember` can read them. */
+    [key: string]: unknown;
+}
+
+/** @public */
+export declare interface MentionProps {
+    name: string;
+}
+
+/** @public */
+export declare interface MentionSuggestionOptions {
+    /** Override a member row's content in the picker. Defaults to avatar + name (+ secondary). */
+    renderMember?(member: MentionMember): ReactNode;
+    /**
+     * The tldraw editor the composer lives in. When provided, the popup re-anchors reactively as the
+     * canvas camera moves (the composer rides it) instead of polling every frame. Omit off-canvas.
+     */
+    editor?: null | Editor;
+}
+
+export { }

package/dist-cjs/index.js

@@ -0,0 +1,41 @@
+"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 index_exports = {};
+__export(index_exports, {
+  Avatar: () => import_avatar.Avatar,
+  Mention: () => import_mention.Mention,
+  MentionList: () => import_mention_list.MentionList,
+  createMentionExtension: () => import_mention_extension.createMentionExtension,
+  createMentionSuggestion: () => import_mention_suggestion.createMentionSuggestion,
+  filterMentionMembers: () => import_mention_suggestion.filterMentionMembers,
+  isMentionPickerOpen: () => import_mention_suggestion.isMentionPickerOpen
+});
+module.exports = __toCommonJS(index_exports);
+var import_utils = require("@tldraw/utils");
+var import_avatar = require("./avatar");
+var import_mention = require("./mention");
+var import_mention_list = require("./mention-list");
+var import_mention_extension = require("./mention-extension");
+var import_mention_suggestion = require("./mention-suggestion");
+(0, import_utils.registerTldrawLibraryVersion)(
+  "@tldraw/mentions",
+  "0.0.0-bootstrap",
+  "cjs"
+);
+//# sourceMappingURL=index.js.map

package/dist-cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["import { registerTldrawLibraryVersion } from '@tldraw/utils'\n\n// Presentational mention components. These are tldraw-independent and can be used to build custom\n// mention UI.\nexport { Avatar, type AvatarProps } from './avatar'\nexport { type CommentAuthor } from './comment-author'\nexport { Mention, type MentionProps } from './mention'\nexport { MentionList, type MentionListProps, type MentionMember } from './mention-list'\n\n// The TipTap mention node + `@`-picker suggestion. Add the node to a rich-text editor's extensions\n// (comments composer, shape rich text) to render mention pills and \u2014 when a suggestion is provided \u2014\n// drive the picker.\nexport { createMentionExtension, type MentionExtensionOptions } from './mention-extension'\nexport {\n\tcreateMentionSuggestion,\n\tfilterMentionMembers,\n\tisMentionPickerOpen,\n\ttype MentionSuggestionOptions,\n} from './mention-suggestion'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;AAI7C,oBAAyC;AAEzC,qBAA2C;AAC3C,0BAAuE;AAKvE,+BAAqE;AACrE,gCAKO;AAAA,IAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
+  "names": []
+}

package/dist-cjs/mention-extension.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 mention_extension_exports = {};
+__export(mention_extension_exports, {
+  createMentionExtension: () => createMentionExtension
+});
+module.exports = __toCommonJS(mention_extension_exports);
+var import_core = require("@tiptap/core");
+var import_extension_mention = require("@tiptap/extension-mention");
+function mentionName(attrs, resolveName) {
+  const resolved = attrs.id && resolveName ? resolveName(attrs.id) : void 0;
+  return resolved ?? attrs.label ?? attrs.id ?? "";
+}
+function createMentionExtension({ resolveName, suggestion } = {}) {
+  return import_extension_mention.Mention.configure({
+    HTMLAttributes: { class: "tlui-cmt-mention" },
+    renderText: ({ node }) => `@${mentionName(node.attrs, resolveName)}`,
+    renderHTML: ({ node, options }) => [
+      "span",
+      (0, import_core.mergeAttributes)(options.HTMLAttributes, { "data-mention-id": node.attrs.id }),
+      `@${mentionName(node.attrs, resolveName)}`
+    ],
+    ...suggestion ? { suggestion } : {}
+  });
+}
+//# sourceMappingURL=mention-extension.js.map

package/dist-cjs/mention-extension.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/mention-extension.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\n/** @public */\nexport interface MentionExtensionOptions {\n\t/**\n\t * Resolve a member id to its current display name \u2014 for the read-only render paths, and for the\n\t * editor while a mention is displayed. Returns `undefined` when the id can't be resolved, so the\n\t * 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 editing (omit on read-only render paths). */\n\tsuggestion?: MentionOptions['suggestion']\n}\n\n/**\n * The \\@-mention node \u2014 TipTap's `Mention` configured to render as a `.tlui-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 an editor passes a `suggestion` (the `@`\n * picker). Shape rich text passes both \u2014 the same extension both edits and renders. The node schema\n * is identical either way \u2014 only these two levers differ.\n * @public\n */\nexport function createMentionExtension({ resolveName, suggestion }: MentionExtensionOptions = {}) {\n\treturn Mention.configure({\n\t\tHTMLAttributes: { class: 'tlui-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;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,+BAAoE;AAQpE,SAAS,YACR,OACA,aACS;AACT,QAAM,WAAW,MAAM,MAAM,cAAc,YAAY,MAAM,EAAE,IAAI;AACnE,SAAO,YAAY,MAAM,SAAS,MAAM,MAAM;AAC/C;AAwBO,SAAS,uBAAuB,EAAE,aAAa,WAAW,IAA6B,CAAC,GAAG;AACjG,SAAO,iCAAQ,UAAU;AAAA,IACxB,gBAAgB,EAAE,OAAO,mBAAmB;AAAA,IAC5C,YAAY,CAAC,EAAE,KAAK,MAAM,IAAI,YAAY,KAAK,OAA2B,WAAW,CAAC;AAAA,IACtF,YAAY,CAAC,EAAE,MAAM,QAAQ,MAAM;AAAA,MAClC;AAAA,UACA,6BAAgB,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-cjs/mention-list.js

@@ -0,0 +1,70 @@
+"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 mention_list_exports = {};
+__export(mention_list_exports, {
+  MentionList: () => MentionList
+});
+module.exports = __toCommonJS(mention_list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tldraw = require("tldraw");
+var import_avatar = require("./avatar");
+function DefaultMemberRow({ member }) {
+  const msg = (0, import_tldraw.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { author: member }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tlui-cmt-mention-list__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tlui-cmt-mention-list__name", children: [
+        member.name,
+        member.you && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-mention-list__you", children: `(${msg("comments.mention-you")})` })
+      ] }),
+      member.secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-mention-list__secondary", children: member.secondary })
+    ] })
+  ] });
+}
+function MentionList({
+  members,
+  activeIndex = 0,
+  onSelect,
+  emptyLabel,
+  renderMember
+}) {
+  const msg = (0, import_tldraw.useTranslation)();
+  if (members.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-mention-list tlui-cmt-mention-list--empty", children: emptyLabel ?? msg("comments.mention-no-matches") });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-mention-list", role: "listbox", children: members.map((member, i) => {
+    const active = i === activeIndex;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": active,
+        className: active ? "tlui-cmt-mention-list__item tlui-cmt-mention-list__item--active" : "tlui-cmt-mention-list__item",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => {
+          if (onSelect) onSelect(member);
+        },
+        children: renderMember ? renderMember(member) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultMemberRow, { member })
+      },
+      member.id
+    );
+  }) });
+}
+//# sourceMappingURL=mention-list.js.map

package/dist-cjs/mention-list.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/mention-list.tsx"],
+  "sourcesContent": ["import { ReactNode } from 'react'\nimport { useTranslation } from 'tldraw'\nimport { Avatar } from './avatar'\nimport { CommentAuthor } from './comment-author'\n\n/** A person the composer's \\@-mention picker can offer: a {@link CommentAuthor} plus its id and\n * picker-only display fields. @public */\nexport interface MentionMember extends CommentAuthor {\n\tid: 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 author={member} />\n\t\t\t<span className=\"tlui-cmt-mention-list__text\">\n\t\t\t\t<span className=\"tlui-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=\"tlui-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=\"tlui-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=\"tlui-cmt-mention-list tlui-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=\"tlui-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? 'tlui-cmt-mention-list__item tlui-cmt-mention-list__item--active'\n\t\t\t\t\t\t\t\t: 'tlui-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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCE;AAlCF,oBAA+B;AAC/B,oBAAuB;AA8BvB,SAAS,iBAAiB,EAAE,OAAO,GAA8B;AAChE,QAAM,UAAM,8BAAe;AAC3B,SACC,4EACC;AAAA,gDAAC,wBAAO,QAAQ,QAAQ;AAAA,IACxB,6CAAC,UAAK,WAAU,+BACf;AAAA,mDAAC,UAAK,WAAU,+BACd;AAAA,eAAO;AAAA,QACP,OAAO,OACP,4CAAC,UAAK,WAAU,8BAA8B,cAAI,IAAI,sBAAsB,CAAC,KAAI;AAAA,SAEnF;AAAA,MACC,OAAO,aACP,4CAAC,UAAK,WAAU,oCAAoC,iBAAO,WAAU;AAAA,OAEvE;AAAA,KACD;AAEF;AAQO,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACD,GAAqB;AACpB,QAAM,UAAM,8BAAe;AAC3B,MAAI,QAAQ,WAAW,GAAG;AACzB,WACC,4CAAC,SAAI,WAAU,sDACb,wBAAc,IAAI,6BAA6B,GACjD;AAAA,EAEF;AACA,SACC,4CAAC,SAAI,WAAU,yBAAwB,MAAK,WAC1C,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,oEACA;AAAA,QAKJ,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC,SAAS,MAAM;AACd,cAAI,SAAU,UAAS,MAAM;AAAA,QAC9B;AAAA,QAEC,yBAAe,aAAa,MAAM,IAAI,4CAAC,oBAAiB,QAAgB;AAAA;AAAA,MAjBpE,OAAO;AAAA,IAkBb;AAAA,EAEF,CAAC,GACF;AAEF;",
+  "names": []
+}

package/dist-cjs/mention-suggestion.js

@@ -0,0 +1,206 @@
+"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 mention_suggestion_exports = {};
+__export(mention_suggestion_exports, {
+  createMentionSuggestion: () => createMentionSuggestion,
+  filterMentionMembers: () => filterMentionMembers,
+  isMentionPickerOpen: () => isMentionPickerOpen
+});
+module.exports = __toCommonJS(mention_suggestion_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@tiptap/react");
+var import_react2 = require("react");
+var import_tldraw = require("tldraw");
+var import_mention_list = require("./mention-list");
+const MentionPopup = (0, import_react2.forwardRef)(function MentionPopup2({ items, command, renderMember }, ref) {
+  const [activeIndex, setActiveIndex] = (0, import_react2.useState)(0);
+  const [prevItems, setPrevItems] = (0, import_react2.useState)(items);
+  if (items !== prevItems) {
+    setPrevItems(items);
+    setActiveIndex(0);
+  }
+  const select = (member) => {
+    if (member) command({ id: member.id, label: member.name });
+  };
+  (0, import_react2.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__ */ (0, import_jsx_runtime.jsx)(
+    import_mention_list.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 = (0, import_tldraw.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(".tlui-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 = (0, import_tldraw.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(".tlui-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 import_react.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 = "tlui-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);
+        }
+      };
+    }
+  };
+}
+//# sourceMappingURL=mention-suggestion.js.map