@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

package/src/ui/reactions.tsx

@@ -1,15 +1,74 @@
-import { Reaction } from './reaction'
+import { ComponentType } from 'react'
+import { Reaction, ReactionTooltipProps, RenderReaction } from './reaction'
 
-/** The row of reactions under a comment, plus an add-reaction button. @public @react */
-export function Reactions() {
+/** One person who reacted with a given emoji, for the hover list. @public */
+export interface ReactionReactor {
+	/** Display name of the person who reacted. */
+	name: string
+	/** True for the current user. */
+	you: boolean
+}
+
+/** One emoji's reactions on a comment, already tallied. @public */
+export interface ReactionSummary {
+	emoji: string
+	/** How many people reacted with this emoji. */
+	count: number
+	/** True when the current user is one of them — renders the pill highlighted. */
+	active: boolean
+	/** Who reacted with this emoji, in reaction order — shown in the hover list. */
+	reactors: ReactionReactor[]
+}
+
+/** @public */
+export interface ReactionsProps {
+	/** The comment's reactions, grouped by emoji. Empty renders nothing. */
+	reactions: ReactionSummary[]
+	/** Toggles the current user's reaction for an emoji. */
+	onToggle?(emoji: string): void
+	/** Whether the current user may react. False makes the pills inert (e.g. a signed-out
+	 *  viewer, or a read-only thread) while still showing counts. */
+	canReact?: boolean
+	/** Whether hovering a pill shows its reactor list. Pass false to suppress it — e.g. while
+	 *  another popup menu on the comment is open. Defaults to true. */
+	enableHoverList?: boolean
+	/** How to draw each emoji token. Defaults to the token string (OS emoji font). */
+	renderReaction?: RenderReaction
+	/** The tooltip naming who reacted, shown when a pill is hovered. Defaults to an inline sentence
+	 *  (`DefaultReactionTooltip`). Swap it to render the reactor list however you like. */
+	ReactionTooltip?: ComponentType<ReactionTooltipProps>
+}
+
+/**
+ * The row of tallied reactions under a comment. Presentational — the host supplies the summaries
+ * and owns what toggling does. Hovering a pill lists who reacted (see `Reaction`).
+ *
+ * The add-reaction affordance is a separate component (`ReactionPicker`) so it can live outside
+ * this row — on a comment card it sits with the card's hover actions, which keeps its position
+ * fixed as reactions are added here.
+ * @public @react
+ */
+export function Reactions({
+	reactions,
+	onToggle,
+	canReact = true,
+	enableHoverList = true,
+	renderReaction,
+	ReactionTooltip,
+}: ReactionsProps) {
+	if (reactions.length === 0) return null
 	return (
-		<div className="cmt-reactions">
-			<Reaction emoji="👍" count={3} active={true} />
-			<Reaction emoji="🎉" count={1} active={false} />
-			<Reaction emoji="👀" count={2} active={false} />
-			<button className="cmt-reaction cmt-reaction--add" type="button" aria-label="Add reaction">
-				＋
-			</button>
+		<div className="tlui-cmt-reactions">
+			{reactions.map((reaction) => (
+				<Reaction
+					key={reaction.emoji}
+					{...reaction}
+					enableHoverList={enableHoverList}
+					renderReaction={renderReaction}
+					ReactionTooltip={ReactionTooltip}
+					onClick={canReact ? () => onToggle?.(reaction.emoji) : undefined}
+				/>
+			))}
 		</div>
 	)
 }

package/src/ui/reply-count.ts

@@ -0,0 +1,16 @@
+import { useTranslation } from 'tldraw'
+
+/**
+ * The localized "N replies" label (e.g. "1 reply", "3 replies") for a thread with `replyCount`
+ * replies — the comments after the opening one. Returns null when there are none, so callers render
+ * nothing rather than "0 replies". Shared by the sidebar row and the hover preview so both read the
+ * same, with each site owning where it puts the text.
+ */
+export function replyCountLabel(
+	msg: ReturnType<typeof useTranslation>,
+	replyCount: number
+): string | null {
+	if (replyCount <= 0) return null
+	const key = replyCount === 1 ? 'comments.replies-one' : 'comments.replies'
+	return msg(key).replace('{count}', String(replyCount))
+}

package/src/ui/send-button.tsx

@@ -1,15 +1,25 @@
+import { SendIcon } from './icons'
+
 /** @public */
 export interface SendButtonProps {
+	/** The button's accessible name (e.g. "Send"). Shown as an up-arrow icon, so this is its label. */
 	label: string
 	disabled?: boolean
 	onClick?(): void
 }
 
-/** The button that posts a comment. @public @react */
+/** The button that posts a comment — an up arrow. @public @react */
 export function SendButton({ label, disabled, onClick }: SendButtonProps) {
 	return (
-		<button className="cmt-send" type="button" disabled={disabled} onClick={onClick}>
-			{label}
+		<button
+			className="tlui-cmt-send"
+			type="button"
+			disabled={disabled}
+			onClick={onClick}
+			aria-label={label}
+			title={label}
+		>
+			<SendIcon />
 		</button>
 	)
 }

package/src/ui/visual-viewport.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { getVisibleViewport } from './visual-viewport'
+
+function makeWindow(
+	innerWidth: number,
+	innerHeight: number,
+	vv?: { offsetTop: number; offsetLeft: number; width: number; height: number }
+): Window {
+	return { innerWidth, innerHeight, visualViewport: vv ?? null } as unknown as Window
+}
+
+describe('getVisibleViewport', () => {
+	it('reads the visual viewport, carrying its offset into the derived edges', () => {
+		const win = makeWindow(1024, 768, { offsetTop: 40, offsetLeft: 10, width: 900, height: 500 })
+		expect(getVisibleViewport(win)).toEqual({
+			top: 40,
+			left: 10,
+			width: 900,
+			height: 500,
+			bottom: 540,
+			right: 910,
+		})
+	})
+
+	it('falls back to the layout viewport when visualViewport is absent', () => {
+		const win = makeWindow(1024, 768)
+		expect(getVisibleViewport(win)).toEqual({
+			top: 0,
+			left: 0,
+			width: 1024,
+			height: 768,
+			bottom: 768,
+			right: 1024,
+		})
+	})
+})

package/src/ui/visual-viewport.ts

@@ -0,0 +1,27 @@
+// The visual viewport is the region actually on screen. The software keyboard (and pinch-zoom)
+// shrink it while leaving the layout viewport — and CSS `dvh` — unchanged, most notably on iOS.
+// So placing a panel above the keyboard means measuring against `window.visualViewport`, not CSS.
+// These helpers are the single place the commenting layer reads it.
+
+/** The on-screen viewport region in window coordinates, falling back to the layout viewport where
+ *  `visualViewport` is unavailable. `top`/`left` carry the viewport's own offset — on iOS this is
+ *  non-zero while the keyboard is open, and dropping it misplaces anything measured against it. */
+export interface VisibleViewport {
+	top: number
+	left: number
+	width: number
+	height: number
+	bottom: number
+	right: number
+}
+
+/** Read the visible viewport once. Call it inside a `visualViewport` resize/scroll handler to keep
+ *  a measurement current as the keyboard opens and closes. */
+export function getVisibleViewport(win: Window): VisibleViewport {
+	const vv = win.visualViewport
+	const top = vv ? vv.offsetTop : 0
+	const left = vv ? vv.offsetLeft : 0
+	const width = vv ? vv.width : win.innerWidth
+	const height = vv ? vv.height : win.innerHeight
+	return { top, left, width, height, bottom: top + height, right: left + width }
+}

package/dist-cjs/canvas/region-options.js

@@ -1,49 +0,0 @@
-"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 region_options_exports = {};
-__export(region_options_exports, {
-  DEFAULT_REGION_COMMENT_OPTIONS: () => DEFAULT_REGION_COMMENT_OPTIONS,
-  getRegionCommentOptions: () => getRegionCommentOptions,
-  setRegionCommentOptions: () => setRegionCommentOptions
-});
-module.exports = __toCommonJS(region_options_exports);
-var import_tldraw = require("tldraw");
-const DEFAULT_REGION_COMMENT_OPTIONS = {
-  enabled: false,
-  pinCorner: { x: 1, y: 1 },
-  reveal: "pointer",
-  move: "pin",
-  resize: "corners"
-};
-const byEditor = /* @__PURE__ */ new WeakMap();
-function getEditorAtom(editor) {
-  let a = byEditor.get(editor);
-  if (!a) {
-    a = (0, import_tldraw.atom)("regionCommentOptions", DEFAULT_REGION_COMMENT_OPTIONS);
-    byEditor.set(editor, a);
-  }
-  return a;
-}
-function setRegionCommentOptions(editor, options) {
-  getEditorAtom(editor).set(options);
-}
-function getRegionCommentOptions(editor) {
-  return getEditorAtom(editor).get();
-}
-//# sourceMappingURL=region-options.js.map

package/dist-cjs/canvas/region-options.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/canvas/region-options.ts"],
-  "sourcesContent": ["import { atom, Atom, Editor, VecLike } from 'tldraw'\n\n/**\n * The configurable dimensions of region comments \u2014 a design surface for prototyping the interaction\n * before settling it. Region is **off by default**, so a consumer that leaves it unset keeps plain\n * click-only point/shape commenting. Set it per editor through `<CanvasComments regionOptions>`.\n * @public\n */\nexport interface RegionCommentOptions {\n\t/** Whether dragging the comment tool out creates a region anchor. Off \u2192 click-only. */\n\tenabled: boolean\n\t/** Which corner the pin and composer sit on, as a normalized 0\u20131 offset. Default bottom-right. */\n\tpinCorner: VecLike\n\t/** When the dashed box and its handles reveal: while the pointer is within the region, while the\n\t *  pin is hovered, or only while the thread is open. */\n\treveal: 'pointer' | 'pin-hover' | 'open'\n\t/** How a region is moved: dragging its pin, dragging its body, or either. */\n\tmove: 'pin' | 'body' | 'both'\n\t/** The resize affordance: corner handles, edge handles, or none. */\n\tresize: 'corners' | 'edges' | 'none'\n}\n\n/** The out-of-the-box region config: disabled, and \u2014 when a consumer enables it \u2014 the current\n *  bottom-right / pointer-reveal / pin-move / corner-resize behaviour.\n * @public */\nexport const DEFAULT_REGION_COMMENT_OPTIONS: RegionCommentOptions = {\n\tenabled: false,\n\tpinCorner: { x: 1, y: 1 },\n\treveal: 'pointer',\n\tmove: 'pin',\n\tresize: 'corners',\n}\n\n// Per-editor region config. The overlay publishes its merged `regionOptions` here so the comment\n// tool \u2014 which has no props of its own \u2014 can read the same per-instance config at interaction time.\n// Held in an atom so reactive readers (e.g. `anchorPagePoint`, called inside `useValue`) recompute\n// when the config changes; a plain map read wouldn't, leaving the pin at the stale default corner.\nconst byEditor = new WeakMap<Editor, Atom<RegionCommentOptions>>()\n\nfunction getEditorAtom(editor: Editor): Atom<RegionCommentOptions> {\n\tlet a = byEditor.get(editor)\n\tif (!a) {\n\t\ta = atom('regionCommentOptions', DEFAULT_REGION_COMMENT_OPTIONS)\n\t\tbyEditor.set(editor, a)\n\t}\n\treturn a\n}\n\n/** Publish an editor's region config (called by the overlay from its `regionOptions` prop). */\nexport function setRegionCommentOptions(editor: Editor, options: RegionCommentOptions): void {\n\tgetEditorAtom(editor).set(options)\n}\n\n/** The editor's region config, or the disabled default when none was set. */\nexport function getRegionCommentOptions(editor: Editor): RegionCommentOptions {\n\treturn getEditorAtom(editor).get()\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA4C;AAyBrC,MAAM,iCAAuD;AAAA,EACnE,SAAS;AAAA,EACT,WAAW,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EACxB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACT;AAMA,MAAM,WAAW,oBAAI,QAA4C;AAEjE,SAAS,cAAc,QAA4C;AAClE,MAAI,IAAI,SAAS,IAAI,MAAM;AAC3B,MAAI,CAAC,GAAG;AACP,YAAI,oBAAK,wBAAwB,8BAA8B;AAC/D,aAAS,IAAI,QAAQ,CAAC;AAAA,EACvB;AACA,SAAO;AACR;AAGO,SAAS,wBAAwB,QAAgB,SAAqC;AAC5F,gBAAc,MAAM,EAAE,IAAI,OAAO;AAClC;AAGO,SAAS,wBAAwB,QAAsC;AAC7E,SAAO,cAAc,MAAM,EAAE,IAAI;AAClC;",
-  "names": []
-}

package/dist-cjs/ui/avatar.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/avatar.tsx"],
-  "sourcesContent": ["import { getFirstCharacter } from 'tldraw'\n\n/** @public */\nexport interface AvatarProps {\n\tname: string\n\t/** Background colour, used when there's no `image`. Falls back to the default avatar tint. */\n\tcolor?: string\n\t/** Avatar image URL. When set, shows the image instead of the coloured initial. */\n\timage?: string\n}\n\nfunction initial(name: string) {\n\treturn (getFirstCharacter(name.trim()) || '?').toUpperCase()\n}\n\n/** A commenter's avatar \u2014 their image if provided, otherwise a single-initial coloured circle.\n * @public @react */\nexport function Avatar({ name, color, image }: AvatarProps) {\n\tif (image) {\n\t\treturn <img className=\"cmt-avatar cmt-avatar--image\" src={image} alt=\"\" aria-hidden=\"true\" />\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName=\"cmt-avatar\"\n\t\t\taria-hidden=\"true\"\n\t\t\tstyle={color ? { backgroundColor: color } : undefined}\n\t\t>\n\t\t\t{initial(name)}\n\t\t</div>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBS;AAnBT,oBAAkC;AAWlC,SAAS,QAAQ,MAAc;AAC9B,cAAQ,iCAAkB,KAAK,KAAK,CAAC,KAAK,KAAK,YAAY;AAC5D;AAIO,SAAS,OAAO,EAAE,MAAM,OAAO,MAAM,GAAgB;AAC3D,MAAI,OAAO;AACV,WAAO,4CAAC,SAAI,WAAU,gCAA+B,KAAK,OAAO,KAAI,IAAG,eAAY,QAAO;AAAA,EAC5F;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,OAAO,QAAQ,EAAE,iBAAiB,MAAM,IAAI;AAAA,MAE3C,kBAAQ,IAAI;AAAA;AAAA,EACd;AAEF;",
-  "names": []
-}

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

@@ -1,42 +0,0 @@
-"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_mention_exports = {};
-__export(comment_mention_exports, {
-  commentMention: () => commentMention
-});
-module.exports = __toCommonJS(comment_mention_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 commentMention({ resolveName, suggestion } = {}) {
-  return import_extension_mention.Mention.configure({
-    HTMLAttributes: { class: "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=comment-mention.js.map

package/dist-cjs/ui/comment-mention.js.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;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;AAoBO,SAAS,eAAe,EAAE,aAAa,WAAW,IAA2B,CAAC,GAAG;AACvF,SAAO,iCAAQ,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,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/ui/comment-text.js.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": ";;;;;;;;;;;;;;;;;;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/mention-list.js

@@ -1,70 +0,0 @@
-"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

@@ -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": ";;;;;;;;;;;;;;;;;;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

@@ -1,206 +0,0 @@
-"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