@tldraw/commenting 0.0.0-bootstrap

package/dist-cjs/ui/comment-text.js.map

@@ -0,0 +1,7 @@
+{
+  "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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUQ;AAVR,6BAA+B;AASxB,SAAS,YAAY,EAAE,KAAK,GAAqB;AACvD,SAAO,4CAAC,SAAI,WAAU,YAAY,qDAAe,IAAI,GAAE;AACxD;",
+  "names": []
+}

package/dist-cjs/ui/comment-thread.js

@@ -0,0 +1,45 @@
+"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_thread_exports = {};
+__export(comment_thread_exports, {
+  CommentThread: () => CommentThread
+});
+module.exports = __toCommonJS(comment_thread_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_comment_card = require("./comment-card");
+var import_comment_composer = require("./comment-composer");
+function CommentThread({
+  comments,
+  header,
+  headerActions,
+  resolvedBanner,
+  composer,
+  renderComment
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-thread", children: [
+    (header !== void 0 || headerActions !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-thread__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-thread__title", children: header }),
+      headerActions !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-thread__actions", children: headerActions })
+    ] }),
+    resolvedBanner !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-thread__resolved", children: resolvedBanner }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-thread__list", children: comments.map((comment, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: renderComment ? renderComment(comment, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_card.CommentCard, { ...comment }) }, i)) }),
+    composer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_composer.CommentComposer, { ...composer })
+  ] });
+}
+//# sourceMappingURL=comment-thread.js.map

package/dist-cjs/ui/comment-thread.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comment-thread.tsx"],
+  "sourcesContent": ["import { ReactNode } from 'react'\nimport { CommentCard, CommentCardProps } from './comment-card'\nimport { CommentComposer, CommentComposerProps } from './comment-composer'\n\n/** @public */\nexport interface CommentThreadProps {\n\t/** The thread's comments, already adapted to card props (oldest first). */\n\tcomments: CommentCardProps[]\n\t/** Optional header, e.g. \"Thread\". Omit for no header. */\n\theader?: ReactNode\n\t/** Action controls shown at the right of the header (resolve, delete, dismiss\u2026). */\n\theaderActions?: ReactNode\n\t/** When set, shows a banner above the comments (e.g. \"Resolved by Jess\"). */\n\tresolvedBanner?: ReactNode\n\t/** Reply composer props. Omit for a read-only thread (no composer). */\n\tcomposer?: CommentComposerProps\n\t/** Override how each comment renders. Defaults to `<CommentCard>`. */\n\trenderComment?(comment: CommentCardProps, index: number): ReactNode\n}\n\n/**\n * A comment thread: an optional header, an optional resolved banner, the comments, and an\n * optional reply composer. Presentational \u2014 you supply the comments (as card props) and the\n * composer's handlers; how each comment renders is overridable via `renderComment`.\n * @public @react\n */\nexport function CommentThread({\n\tcomments,\n\theader,\n\theaderActions,\n\tresolvedBanner,\n\tcomposer,\n\trenderComment,\n}: CommentThreadProps) {\n\treturn (\n\t\t<div className=\"cmt-thread\">\n\t\t\t{(header !== undefined || headerActions !== undefined) && (\n\t\t\t\t<div className=\"cmt-thread__header\">\n\t\t\t\t\t<span className=\"cmt-thread__title\">{header}</span>\n\t\t\t\t\t{headerActions !== undefined && (\n\t\t\t\t\t\t<div className=\"cmt-thread__actions\">{headerActions}</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{resolvedBanner !== undefined && <div className=\"cmt-thread__resolved\">{resolvedBanner}</div>}\n\t\t\t<div className=\"cmt-thread__list\">\n\t\t\t\t{comments.map((comment, i) => (\n\t\t\t\t\t<div key={i}>\n\t\t\t\t\t\t{renderComment ? renderComment(comment, i) : <CommentCard {...comment} />}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t{composer !== undefined && <CommentComposer {...composer} />}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCI;AApCJ,0BAA8C;AAC9C,8BAAsD;AAwB/C,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,SACC,6CAAC,SAAI,WAAU,cACZ;AAAA,gBAAW,UAAa,kBAAkB,WAC3C,6CAAC,SAAI,WAAU,sBACd;AAAA,kDAAC,UAAK,WAAU,qBAAqB,kBAAO;AAAA,MAC3C,kBAAkB,UAClB,4CAAC,SAAI,WAAU,uBAAuB,yBAAc;AAAA,OAEtD;AAAA,IAEA,mBAAmB,UAAa,4CAAC,SAAI,WAAU,wBAAwB,0BAAe;AAAA,IACvF,4CAAC,SAAI,WAAU,oBACb,mBAAS,IAAI,CAAC,SAAS,MACvB,4CAAC,SACC,0BAAgB,cAAc,SAAS,CAAC,IAAI,4CAAC,mCAAa,GAAG,SAAS,KAD9D,CAEV,CACA,GACF;AAAA,IACC,aAAa,UAAa,4CAAC,2CAAiB,GAAG,UAAU;AAAA,KAC3D;AAEF;",
+  "names": []
+}

package/dist-cjs/ui/comments-list.js

@@ -0,0 +1,106 @@
+"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_list_exports = {};
+__export(comments_list_exports, {
+  CommentsList: () => CommentsList
+});
+module.exports = __toCommonJS(comments_list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_avatar = require("./avatar");
+var import_byline = require("./byline");
+function CommentsList({
+  items,
+  onSelect,
+  header,
+  headerAction,
+  empty,
+  resolvedLabel,
+  renderItem
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-list", children: [
+    (header !== void 0 || headerAction) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-list__header", children: [
+      header !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-list__header-title", children: header }),
+      headerAction
+    ] }),
+    items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-list__empty", children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-list__items", children: items.map(
+      (item) => renderItem ? renderItem(item) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        CommentListItem,
+        {
+          ...item,
+          resolvedLabel,
+          onSelect
+        },
+        item.id
+      )
+    ) })
+  ] });
+}
+function CommentListItem({
+  id,
+  author,
+  preview,
+  date,
+  resolved,
+  page,
+  count,
+  selected,
+  resolvedLabel = "Resolved",
+  onSelect
+}) {
+  const handleClick = () => {
+    if (onSelect) onSelect(id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: selected ? "cmt-list__item cmt-list__item--selected" : "cmt-list__item",
+      "data-resolved": resolved || void 0,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { name: author }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-list__item-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_byline.Byline, { author, date }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-list__item-preview", children: preview }),
+          (resolved || page !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-list__item-meta", children: [
+            resolved && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmt-list__item-resolved", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}),
+              resolvedLabel
+            ] }),
+            page !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-list__item-page", children: page })
+          ] })
+        ] }),
+        count !== void 0 && count > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-list__item-count", children: count })
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M2.5 6.2 4.7 8.4 9.5 3.6",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+//# sourceMappingURL=comments-list.js.map

package/dist-cjs/ui/comments-list.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comments-list.tsx"],
+  "sourcesContent": ["import { ReactNode } from 'react'\nimport { Avatar } from './avatar'\nimport { Byline } from './byline'\n\n/** @public */\nexport interface CommentListItemProps {\n\tid: string\n\tauthor: string\n\t/** A short preview of the thread \u2014 e.g. the first comment's body. */\n\tpreview: ReactNode\n\t/** ISO datetime of the thread's first comment. */\n\tdate: string\n\tresolved?: boolean\n\t/** Name of the page the thread lives on, shown as a small label. Omit to hide. */\n\tpage?: string\n\t/** Total comments in the thread. */\n\tcount?: number\n\t/** Whether this thread is the open one. */\n\tselected?: boolean\n}\n\n/** @public */\nexport interface CommentsListProps {\n\titems: CommentListItemProps[]\n\t/** Called with a thread id when an item is chosen. */\n\tonSelect?(id: string): void\n\t/** Shown above the list (e.g. \"Comments\"). Omit for none. */\n\theader?: ReactNode\n\t/** Rendered at the right of the header row \u2014 e.g. a filter menu. */\n\theaderAction?: ReactNode\n\t/** Shown in place of the list when there are no threads. */\n\tempty?: ReactNode\n\t/** Label for a resolved thread's marker on its row. Defaults to \"Resolved\". */\n\tresolvedLabel?: string\n\t/** Override how each item renders. Defaults to `<CommentListItem>`. */\n\trenderItem?(item: CommentListItemProps): ReactNode\n}\n\n/**\n * A scrollable list of comment threads \u2014 each an avatar, byline, and a one-line preview.\n * Presentational: you supply the items (already summarised) and an `onSelect` handler; the canvas\n * `CanvasCommentsSidebar` wires it to the store, but a consumer can build their own list from this.\n * @public @react\n */\nexport function CommentsList({\n\titems,\n\tonSelect,\n\theader,\n\theaderAction,\n\tempty,\n\tresolvedLabel,\n\trenderItem,\n}: CommentsListProps) {\n\treturn (\n\t\t<div className=\"cmt-list\">\n\t\t\t{(header !== undefined || headerAction) && (\n\t\t\t\t<div className=\"cmt-list__header\">\n\t\t\t\t\t{header !== undefined && <span className=\"cmt-list__header-title\">{header}</span>}\n\t\t\t\t\t{headerAction}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{items.length === 0 ? (\n\t\t\t\t<div className=\"cmt-list__empty\">{empty}</div>\n\t\t\t) : (\n\t\t\t\t<div className=\"cmt-list__items\">\n\t\t\t\t\t{items.map((item) =>\n\t\t\t\t\t\trenderItem ? (\n\t\t\t\t\t\t\trenderItem(item)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<CommentListItem\n\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t{...item}\n\t\t\t\t\t\t\t\tresolvedLabel={resolvedLabel}\n\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nfunction CommentListItem({\n\tid,\n\tauthor,\n\tpreview,\n\tdate,\n\tresolved,\n\tpage,\n\tcount,\n\tselected,\n\tresolvedLabel = 'Resolved',\n\tonSelect,\n}: CommentListItemProps & { resolvedLabel?: string; onSelect?(id: string): void }) {\n\tconst handleClick = () => {\n\t\tif (onSelect) onSelect(id)\n\t}\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={selected ? 'cmt-list__item cmt-list__item--selected' : 'cmt-list__item'}\n\t\t\tdata-resolved={resolved || undefined}\n\t\t\tonClick={handleClick}\n\t\t>\n\t\t\t<Avatar name={author} />\n\t\t\t<div className=\"cmt-list__item-body\">\n\t\t\t\t<Byline author={author} date={date} />\n\t\t\t\t<div className=\"cmt-list__item-preview\">{preview}</div>\n\t\t\t\t{(resolved || page !== undefined) && (\n\t\t\t\t\t<div className=\"cmt-list__item-meta\">\n\t\t\t\t\t\t{resolved && (\n\t\t\t\t\t\t\t<span className=\"cmt-list__item-resolved\">\n\t\t\t\t\t\t\t\t<CheckIcon />\n\t\t\t\t\t\t\t\t{resolvedLabel}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{page !== undefined && <span className=\"cmt-list__item-page\">{page}</span>}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{count !== undefined && count > 1 && <span className=\"cmt-list__item-count\">{count}</span>}\n\t\t</button>\n\t)\n}\n\nfunction CheckIcon() {\n\treturn (\n\t\t<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n\t\t\t<path\n\t\t\t\td=\"M2.5 6.2 4.7 8.4 9.5 3.6\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AAvDJ,oBAAuB;AACvB,oBAAuB;AA0ChB,SAAS,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAsB;AACrB,SACC,6CAAC,SAAI,WAAU,YACZ;AAAA,gBAAW,UAAa,iBACzB,6CAAC,SAAI,WAAU,oBACb;AAAA,iBAAW,UAAa,4CAAC,UAAK,WAAU,0BAA0B,kBAAO;AAAA,MACzE;AAAA,OACF;AAAA,IAEA,MAAM,WAAW,IACjB,4CAAC,SAAI,WAAU,mBAAmB,iBAAM,IAExC,4CAAC,SAAI,WAAU,mBACb,gBAAM;AAAA,MAAI,CAAC,SACX,aACC,WAAW,IAAI,IAEf;AAAA,QAAC;AAAA;AAAA,UAEC,GAAG;AAAA,UACJ;AAAA,UACA;AAAA;AAAA,QAHK,KAAK;AAAA,MAIX;AAAA,IAEF,GACD;AAAA,KAEF;AAEF;AAEA,SAAS,gBAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACD,GAAmF;AAClF,QAAM,cAAc,MAAM;AACzB,QAAI,SAAU,UAAS,EAAE;AAAA,EAC1B;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAW,WAAW,4CAA4C;AAAA,MAClE,iBAAe,YAAY;AAAA,MAC3B,SAAS;AAAA,MAET;AAAA,oDAAC,wBAAO,MAAM,QAAQ;AAAA,QACtB,6CAAC,SAAI,WAAU,uBACd;AAAA,sDAAC,wBAAO,QAAgB,MAAY;AAAA,UACpC,4CAAC,SAAI,WAAU,0BAA0B,mBAAQ;AAAA,WAC/C,YAAY,SAAS,WACtB,6CAAC,SAAI,WAAU,uBACb;AAAA,wBACA,6CAAC,UAAK,WAAU,2BACf;AAAA,0DAAC,aAAU;AAAA,cACV;AAAA,eACF;AAAA,YAEA,SAAS,UAAa,4CAAC,UAAK,WAAU,uBAAuB,gBAAK;AAAA,aACpE;AAAA,WAEF;AAAA,QACC,UAAU,UAAa,QAAQ,KAAK,4CAAC,UAAK,WAAU,wBAAwB,iBAAM;AAAA;AAAA;AAAA,EACpF;AAEF;AAEA,SAAS,YAAY;AACpB,SACC,4CAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACvE;AAAA,IAAC;AAAA;AAAA,MACA,GAAE;AAAA,MACF,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA;AAAA,EAChB,GACD;AAEF;",
+  "names": []
+}

package/dist-cjs/ui/count-badge.js

@@ -0,0 +1,28 @@
+"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 count_badge_exports = {};
+__export(count_badge_exports, {
+  CountBadge: () => CountBadge
+});
+module.exports = __toCommonJS(count_badge_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function CountBadge({ count }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-count-badge", children: count });
+}
+//# sourceMappingURL=count-badge.js.map

package/dist-cjs/ui/count-badge.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/count-badge.tsx"],
+  "sourcesContent": ["/** @public */\nexport interface CountBadgeProps {\n\tcount: number\n}\n\n/** @public @react */\nexport function CountBadge({ count }: CountBadgeProps) {\n\treturn <div className=\"cmt-count-badge\">{count}</div>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOQ;AADD,SAAS,WAAW,EAAE,MAAM,GAAoB;AACtD,SAAO,4CAAC,SAAI,WAAU,mBAAmB,iBAAM;AAChD;",
+  "names": []
+}

package/dist-cjs/ui/empty-state.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 empty_state_exports = {};
+__export(empty_state_exports, {
+  EmptyState: () => EmptyState
+});
+module.exports = __toCommonJS(empty_state_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function EmptyState({ message }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-empty", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-empty__icon", "aria-hidden": "true", children: "\u{1F4AC}" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "cmt-empty__message", children: message })
+  ] });
+}
+//# sourceMappingURL=empty-state.js.map

package/dist-cjs/ui/empty-state.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/empty-state.tsx"],
+  "sourcesContent": ["/** @public */\nexport interface EmptyStateProps {\n\tmessage: string\n}\n\n/** The empty state shown when a thread has no comments yet. @public @react */\nexport function EmptyState({ message }: EmptyStateProps) {\n\treturn (\n\t\t<div className=\"cmt-empty\">\n\t\t\t<div className=\"cmt-empty__icon\" aria-hidden=\"true\">\n\t\t\t\t\uD83D\uDCAC\n\t\t\t</div>\n\t\t\t<p className=\"cmt-empty__message\">{message}</p>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AAFK,SAAS,WAAW,EAAE,QAAQ,GAAoB;AACxD,SACC,6CAAC,SAAI,WAAU,aACd;AAAA,gDAAC,SAAI,WAAU,mBAAkB,eAAY,QAAO,uBAEpD;AAAA,IACA,4CAAC,OAAE,WAAU,sBAAsB,mBAAQ;AAAA,KAC5C;AAEF;",
+  "names": []
+}

package/dist-cjs/ui/format-time.js

@@ -0,0 +1,46 @@
+"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 format_time_exports = {};
+__export(format_time_exports, {
+  formatRelativeTime: () => formatRelativeTime
+});
+module.exports = __toCommonJS(format_time_exports);
+const DIVISIONS = [
+  { amount: 60, unit: "second" },
+  { amount: 60, unit: "minute" },
+  { amount: 24, unit: "hour" },
+  { amount: 7, unit: "day" },
+  { amount: 4.34524, unit: "week" },
+  { amount: 12, unit: "month" },
+  { amount: Number.POSITIVE_INFINITY, unit: "year" }
+];
+function formatRelativeTime(iso, locale = "en") {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  let duration = (then - Date.now()) / 1e3;
+  for (const division of DIVISIONS) {
+    if (Math.abs(duration) < division.amount) {
+      return rtf.format(Math.round(duration), division.unit);
+    }
+    duration /= division.amount;
+  }
+  return "";
+}
+//# sourceMappingURL=format-time.js.map

package/dist-cjs/ui/format-time.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/format-time.ts"],
+  "sourcesContent": ["const DIVISIONS = [\n\t{ amount: 60, unit: 'second' },\n\t{ amount: 60, unit: 'minute' },\n\t{ amount: 24, unit: 'hour' },\n\t{ amount: 7, unit: 'day' },\n\t{ amount: 4.34524, unit: 'week' },\n\t{ amount: 12, unit: 'month' },\n\t{ amount: Number.POSITIVE_INFINITY, unit: 'year' },\n] as const\n\n/**\n * Format an ISO datetime as relative time (\"2 hours ago\", \"yesterday\", \"last week\").\n * Locale-aware via Intl.RelativeTimeFormat.\n * @public\n */\nexport function formatRelativeTime(iso: string, locale = 'en'): string {\n\tconst then = new Date(iso).getTime()\n\tif (Number.isNaN(then)) return ''\n\n\tconst rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })\n\tlet duration = (then - Date.now()) / 1000\n\tfor (const division of DIVISIONS) {\n\t\tif (Math.abs(duration) < division.amount) {\n\t\t\treturn rtf.format(Math.round(duration), division.unit)\n\t\t}\n\t\tduration /= division.amount\n\t}\n\treturn ''\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAM,YAAY;AAAA,EACjB,EAAE,QAAQ,IAAI,MAAM,SAAS;AAAA,EAC7B,EAAE,QAAQ,IAAI,MAAM,SAAS;AAAA,EAC7B,EAAE,QAAQ,IAAI,MAAM,OAAO;AAAA,EAC3B,EAAE,QAAQ,GAAG,MAAM,MAAM;AAAA,EACzB,EAAE,QAAQ,SAAS,MAAM,OAAO;AAAA,EAChC,EAAE,QAAQ,IAAI,MAAM,QAAQ;AAAA,EAC5B,EAAE,QAAQ,OAAO,mBAAmB,MAAM,OAAO;AAClD;AAOO,SAAS,mBAAmB,KAAa,SAAS,MAAc;AACtE,QAAM,OAAO,IAAI,KAAK,GAAG,EAAE,QAAQ;AACnC,MAAI,OAAO,MAAM,IAAI,EAAG,QAAO;AAE/B,QAAM,MAAM,IAAI,KAAK,mBAAmB,QAAQ,EAAE,SAAS,OAAO,CAAC;AACnE,MAAI,YAAY,OAAO,KAAK,IAAI,KAAK;AACrC,aAAW,YAAY,WAAW;AACjC,QAAI,KAAK,IAAI,QAAQ,IAAI,SAAS,QAAQ;AACzC,aAAO,IAAI,OAAO,KAAK,MAAM,QAAQ,GAAG,SAAS,IAAI;AAAA,IACtD;AACA,gBAAY,SAAS;AAAA,EACtB;AACA,SAAO;AACR;",
+  "names": []
+}

package/dist-cjs/ui/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, { name: member.name, color: member.color, image: member.avatar }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmt-mention-list__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmt-mention-list__name", children: [
+        member.name,
+        member.you && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-mention-list__you", children: `(${msg("comments.mention-you")})` })
+      ] }),
+      member.secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "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: "cmt-mention-list cmt-mention-list--empty", children: emptyLabel ?? msg("comments.mention-no-matches") });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "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 ? "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__ */ (0, import_jsx_runtime.jsx)(DefaultMemberRow, { member })
+      },
+      member.id
+    );
+  }) });
+}
+//# sourceMappingURL=mention-list.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCE;AArCF,oBAA+B;AAC/B,oBAAuB;AAiCvB,SAAS,iBAAiB,EAAE,OAAO,GAA8B;AAChE,QAAM,UAAM,8BAAe;AAC3B,SACC,4EACC;AAAA,gDAAC,wBAAO,MAAM,OAAO,MAAM,OAAO,OAAO,OAAO,OAAO,OAAO,QAAQ;AAAA,IACtE,6CAAC,UAAK,WAAU,0BACf;AAAA,mDAAC,UAAK,WAAU,0BACd;AAAA,eAAO;AAAA,QACP,OAAO,OACP,4CAAC,UAAK,WAAU,yBAAyB,cAAI,IAAI,sBAAsB,CAAC,KAAI;AAAA,SAE9E;AAAA,MACC,OAAO,aACP,4CAAC,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,UAAM,8BAAe;AAC3B,MAAI,QAAQ,WAAW,GAAG;AACzB,WACC,4CAAC,SAAI,WAAU,4CACb,wBAAc,IAAI,6BAA6B,GACjD;AAAA,EAEF;AACA,SACC,4CAAC,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,4CAAC,oBAAiB,QAAgB;AAAA;AAAA,MAjBpE,OAAO;AAAA,IAkBb;AAAA,EAEF,CAAC,GACF;AAEF;",
+  "names": []
+}

package/dist-cjs/ui/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(".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(".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 = "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