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

package/dist-esm/ui/reaction.mjs

@@ -1,11 +1,64 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-function Reaction({ emoji, count, active }) {
-  return /* @__PURE__ */ jsxs("button", { className: active ? "cmt-reaction cmt-reaction--active" : "cmt-reaction", type: "button", children: [
-    /* @__PURE__ */ jsx("span", { className: "cmt-reaction__emoji", children: emoji }),
-    /* @__PURE__ */ jsx("span", { className: "cmt-reaction__count", children: count })
-  ] });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TldrawUiTooltip, useTranslation } from "tldraw";
+function defaultRenderReaction(token) {
+  return token;
+}
+function Reaction({
+  emoji,
+  count,
+  active,
+  reactors,
+  enableHoverList = true,
+  renderReaction = defaultRenderReaction,
+  ReactionTooltip = DefaultReactionTooltip,
+  onClick
+}) {
+  const pill = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: active ? "tlui-cmt-reaction tlui-cmt-reaction--active" : "tlui-cmt-reaction",
+      type: "button",
+      "aria-label": `${emoji} ${count}`,
+      "aria-pressed": active,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "tlui-cmt-reaction__emoji", children: renderReaction(emoji) }),
+        /* @__PURE__ */ jsx("span", { className: "tlui-cmt-reaction__count", children: count })
+      ]
+    }
+  );
+  if (!enableHoverList || reactors.length === 0) return pill;
+  return /* @__PURE__ */ jsx(ReactionTooltip, { reactors, children: pill });
+}
+function DefaultReactionTooltip({ reactors, children }) {
+  return /* @__PURE__ */ jsx(TldrawUiTooltip, { side: "bottom", content: /* @__PURE__ */ jsx(DefaultReactionTooltipContent, { reactors }), children });
+}
+function DefaultReactionTooltipContent({ reactors }) {
+  const msg = useTranslation();
+  const names = reactors.map(
+    (reactor) => reactor.you ? msg("comments.mention-you") : reactor.name
+  );
+  const [a, b, c] = names;
+  switch (names.length) {
+    case 0:
+      return null;
+    case 1:
+      return /* @__PURE__ */ jsx(Fragment, { children: msg("comments.reacted-1").replace("{a}", a) });
+    case 2:
+      return /* @__PURE__ */ jsx(Fragment, { children: msg("comments.reacted-2").replace("{a}", a).replace("{b}", b) });
+    case 3:
+      return /* @__PURE__ */ jsx(Fragment, { children: msg("comments.reacted-3").replace("{a}", a).replace("{b}", b).replace("{c}", c) });
+    default: {
+      const others = names.length - 3;
+      const template = others === 1 ? "comments.reacted-more-one" : "comments.reacted-more";
+      return /* @__PURE__ */ jsx(Fragment, { children: msg(template).replace("{a}", a).replace("{b}", b).replace("{c}", c).replace("{count}", String(others)) });
+    }
+  }
 }
 export {
-  Reaction
+  DefaultReactionTooltip,
+  DefaultReactionTooltipContent,
+  Reaction,
+  defaultRenderReaction
 };
 //# sourceMappingURL=reaction.mjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/reaction.tsx"],
-  "sourcesContent": ["/** @public */\nexport interface ReactionProps {\n\temoji: string\n\tcount: number\n\tactive: boolean\n}\n\n/** A single emoji reaction pill with a count, highlighted when the user reacted. @public @react */\nexport function Reaction({ emoji, count, active }: ReactionProps) {\n\treturn (\n\t\t<button className={active ? 'cmt-reaction cmt-reaction--active' : 'cmt-reaction'} type=\"button\">\n\t\t\t<span className=\"cmt-reaction__emoji\">{emoji}</span>\n\t\t\t<span className=\"cmt-reaction__count\">{count}</span>\n\t\t</button>\n\t)\n}\n"],
-  "mappings": "AAUE,SACC,KADD;AAFK,SAAS,SAAS,EAAE,OAAO,OAAO,OAAO,GAAkB;AACjE,SACC,qBAAC,YAAO,WAAW,SAAS,sCAAsC,gBAAgB,MAAK,UACtF;AAAA,wBAAC,UAAK,WAAU,uBAAuB,iBAAM;AAAA,IAC7C,oBAAC,UAAK,WAAU,uBAAuB,iBAAM;AAAA,KAC9C;AAEF;",
+  "sourcesContent": ["import { ComponentType, ReactNode } from 'react'\nimport { TldrawUiTooltip, useTranslation } from 'tldraw'\nimport { ReactionReactor } from './reactions'\n\n/** Render a reaction token to its visual \u2014 the emoji glyph by default. @public */\nexport type RenderReaction = (token: string) => ReactNode\n\n/** The default reaction renderer: emits the token string for the OS emoji font to draw. @public */\nexport function defaultRenderReaction(token: string): ReactNode {\n\treturn token\n}\n\n/** @public */\nexport interface ReactionProps {\n\temoji: string\n\tcount: number\n\tactive: boolean\n\t/** How to draw the emoji token. Defaults to the token string (OS emoji font). */\n\trenderReaction?: RenderReaction\n\t/** Who reacted with this emoji, in reaction order \u2014 shown when the pill is hovered. */\n\treactors: ReactionReactor[]\n\t/** Whether hovering shows the reactor list. Pass false to suppress it \u2014 e.g. while another\n\t *  popup menu on the comment is open. Defaults to true. */\n\tenableHoverList?: boolean\n\t/** The hover affordance for the pill, naming who reacted. It receives the reactors and the pill\n\t *  itself (as `children`) and returns the whole thing \u2014 so it owns the tooltip, its box, size,\n\t *  shape, and position, not just the text inside. Defaults to `DefaultReactionTooltip`, which\n\t *  hangs the built-in inline sentence below the pill. */\n\tReactionTooltip?: ComponentType<ReactionTooltipProps>\n\t/** Called when the pill is pressed \u2014 toggles the current user's reaction. */\n\tonClick?(): void\n}\n\n/**\n * A single emoji reaction pill with a count, highlighted when the user reacted. Hovering it shows a\n * tooltip naming who reacted (the current user included), when `enableHoverList` is set.\n * @public @react\n */\nexport function Reaction({\n\temoji,\n\tcount,\n\tactive,\n\treactors,\n\tenableHoverList = true,\n\trenderReaction = defaultRenderReaction,\n\tReactionTooltip = DefaultReactionTooltip,\n\tonClick,\n}: ReactionProps) {\n\tconst pill = (\n\t\t<button\n\t\t\tclassName={active ? 'tlui-cmt-reaction tlui-cmt-reaction--active' : 'tlui-cmt-reaction'}\n\t\t\ttype=\"button\"\n\t\t\t// The emoji alone announces as its unicode name (\"thumbs up\"); pairing it with the count\n\t\t\t// is what makes the pill's state legible to a screen reader.\n\t\t\taria-label={`${emoji} ${count}`}\n\t\t\taria-pressed={active}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<span className=\"tlui-cmt-reaction__emoji\">{renderReaction(emoji)}</span>\n\t\t\t<span className=\"tlui-cmt-reaction__count\">{count}</span>\n\t\t</button>\n\t)\n\n\t// A bare pill when hovering is suppressed, or when there's no one to name.\n\tif (!enableHoverList || reactors.length === 0) return pill\n\n\t// Hand the whole hover affordance to the tooltip component: it wraps the pill and owns how the\n\t// reactor list is presented.\n\treturn <ReactionTooltip reactors={reactors}>{pill}</ReactionTooltip>\n}\n\n/** @public */\nexport interface ReactionTooltipProps {\n\t/** Who reacted with this emoji, in reaction order. */\n\treactors: ReactionReactor[]\n\t/** The reaction pill to wrap. Anchor the hover affordance to this and render it. */\n\tchildren: ReactNode\n}\n\n/**\n * The default reactor tooltip: hangs the built-in inline sentence (`DefaultReactionTooltipContent`)\n * in a standard tooltip below the pill \u2014 the same tooltip the toolbar uses. Replace it via\n * `CommentingComponents.ReactionTooltip` to present the reactor list any other way (a different box,\n * avatars, a banner, anywhere on screen); it receives the pill as `children`.\n * @public @react\n */\nexport function DefaultReactionTooltip({ reactors, children }: ReactionTooltipProps) {\n\treturn (\n\t\t<TldrawUiTooltip side=\"bottom\" content={<DefaultReactionTooltipContent reactors={reactors} />}>\n\t\t\t{children}\n\t\t</TldrawUiTooltip>\n\t)\n}\n\n/**\n * The default reactor sentence naming who reacted \u2014 up to three names spelled out, then \"and N\n * others\" (e.g. \"You reacted\", \"You and Bo reacted\", \"You, Bo and Ada reacted\", \"You, Bo, Ada and 2\n * others reacted\"). The wording lives in the `comments.reacted-*` translation strings so each locale\n * controls the grammar. Exported so a custom `ReactionTooltip` can reuse it inside its own box.\n * @public @react\n */\nexport function DefaultReactionTooltipContent({ reactors }: { reactors: ReactionReactor[] }) {\n\tconst msg = useTranslation()\n\tconst names = reactors.map((reactor) =>\n\t\treactor.you ? msg('comments.mention-you') : reactor.name\n\t)\n\tconst [a, b, c] = names\n\tswitch (names.length) {\n\t\tcase 0:\n\t\t\treturn null\n\t\tcase 1:\n\t\t\treturn <>{msg('comments.reacted-1').replace('{a}', a)}</>\n\t\tcase 2:\n\t\t\treturn <>{msg('comments.reacted-2').replace('{a}', a).replace('{b}', b)}</>\n\t\tcase 3:\n\t\t\treturn <>{msg('comments.reacted-3').replace('{a}', a).replace('{b}', b).replace('{c}', c)}</>\n\t\tdefault: {\n\t\t\tconst others = names.length - 3\n\t\t\tconst template = others === 1 ? 'comments.reacted-more-one' : 'comments.reacted-more'\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{msg(template)\n\t\t\t\t\t\t.replace('{a}', a)\n\t\t\t\t\t\t.replace('{b}', b)\n\t\t\t\t\t\t.replace('{c}', c)\n\t\t\t\t\t\t.replace('{count}', String(others))}\n\t\t\t\t</>\n\t\t\t)\n\t\t}\n\t}\n}\n"],
+  "mappings": "AAiDE,SA8DQ,UArDP,KATD;AAhDF,SAAS,iBAAiB,sBAAsB;AAOzC,SAAS,sBAAsB,OAA0B;AAC/D,SAAO;AACR;AA4BO,SAAS,SAAS;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB;AACD,GAAkB;AACjB,QAAM,OACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,SAAS,gDAAgD;AAAA,MACpE,MAAK;AAAA,MAGL,cAAY,GAAG,KAAK,IAAI,KAAK;AAAA,MAC7B,gBAAc;AAAA,MACd;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,4BAA4B,yBAAe,KAAK,GAAE;AAAA,QAClE,oBAAC,UAAK,WAAU,4BAA4B,iBAAM;AAAA;AAAA;AAAA,EACnD;AAID,MAAI,CAAC,mBAAmB,SAAS,WAAW,EAAG,QAAO;AAItD,SAAO,oBAAC,mBAAgB,UAAqB,gBAAK;AACnD;AAiBO,SAAS,uBAAuB,EAAE,UAAU,SAAS,GAAyB;AACpF,SACC,oBAAC,mBAAgB,MAAK,UAAS,SAAS,oBAAC,iCAA8B,UAAoB,GACzF,UACF;AAEF;AASO,SAAS,8BAA8B,EAAE,SAAS,GAAoC;AAC5F,QAAM,MAAM,eAAe;AAC3B,QAAM,QAAQ,SAAS;AAAA,IAAI,CAAC,YAC3B,QAAQ,MAAM,IAAI,sBAAsB,IAAI,QAAQ;AAAA,EACrD;AACA,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI;AAClB,UAAQ,MAAM,QAAQ;AAAA,IACrB,KAAK;AACJ,aAAO;AAAA,IACR,KAAK;AACJ,aAAO,gCAAG,cAAI,oBAAoB,EAAE,QAAQ,OAAO,CAAC,GAAE;AAAA,IACvD,KAAK;AACJ,aAAO,gCAAG,cAAI,oBAAoB,EAAE,QAAQ,OAAO,CAAC,EAAE,QAAQ,OAAO,CAAC,GAAE;AAAA,IACzE,KAAK;AACJ,aAAO,gCAAG,cAAI,oBAAoB,EAAE,QAAQ,OAAO,CAAC,EAAE,QAAQ,OAAO,CAAC,EAAE,QAAQ,OAAO,CAAC,GAAE;AAAA,IAC3F,SAAS;AACR,YAAM,SAAS,MAAM,SAAS;AAC9B,YAAM,WAAW,WAAW,IAAI,8BAA8B;AAC9D,aACC,gCACE,cAAI,QAAQ,EACX,QAAQ,OAAO,CAAC,EAChB,QAAQ,OAAO,CAAC,EAChB,QAAQ,OAAO,CAAC,EAChB,QAAQ,WAAW,OAAO,MAAM,CAAC,GACpC;AAAA,IAEF;AAAA,EACD;AACD;",
   "names": []
 }

package/dist-esm/ui/reactions.mjs

@@ -1,12 +1,25 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Reaction } from "./reaction.mjs";
-function Reactions() {
-  return /* @__PURE__ */ jsxs("div", { className: "cmt-reactions", children: [
-    /* @__PURE__ */ jsx(Reaction, { emoji: "\u{1F44D}", count: 3, active: true }),
-    /* @__PURE__ */ jsx(Reaction, { emoji: "\u{1F389}", count: 1, active: false }),
-    /* @__PURE__ */ jsx(Reaction, { emoji: "\u{1F440}", count: 2, active: false }),
-    /* @__PURE__ */ jsx("button", { className: "cmt-reaction cmt-reaction--add", type: "button", "aria-label": "Add reaction", children: "\uFF0B" })
-  ] });
+function Reactions({
+  reactions,
+  onToggle,
+  canReact = true,
+  enableHoverList = true,
+  renderReaction,
+  ReactionTooltip
+}) {
+  if (reactions.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "tlui-cmt-reactions", children: reactions.map((reaction) => /* @__PURE__ */ jsx(
+    Reaction,
+    {
+      ...reaction,
+      enableHoverList,
+      renderReaction,
+      ReactionTooltip,
+      onClick: canReact ? () => onToggle?.(reaction.emoji) : void 0
+    },
+    reaction.emoji
+  )) });
 }
 export {
   Reactions

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/reactions.tsx"],
-  "sourcesContent": ["import { Reaction } from './reaction'\n\n/** The row of reactions under a comment, plus an add-reaction button. @public @react */\nexport function Reactions() {\n\treturn (\n\t\t<div className=\"cmt-reactions\">\n\t\t\t<Reaction emoji=\"\uD83D\uDC4D\" count={3} active={true} />\n\t\t\t<Reaction emoji=\"\uD83C\uDF89\" count={1} active={false} />\n\t\t\t<Reaction emoji=\"\uD83D\uDC40\" count={2} active={false} />\n\t\t\t<button className=\"cmt-reaction cmt-reaction--add\" type=\"button\" aria-label=\"Add reaction\">\n\t\t\t\t\uFF0B\n\t\t\t</button>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": "AAKE,SACC,KADD;AALF,SAAS,gBAAgB;AAGlB,SAAS,YAAY;AAC3B,SACC,qBAAC,SAAI,WAAU,iBACd;AAAA,wBAAC,YAAS,OAAM,aAAK,OAAO,GAAG,QAAQ,MAAM;AAAA,IAC7C,oBAAC,YAAS,OAAM,aAAK,OAAO,GAAG,QAAQ,OAAO;AAAA,IAC9C,oBAAC,YAAS,OAAM,aAAK,OAAO,GAAG,QAAQ,OAAO;AAAA,IAC9C,oBAAC,YAAO,WAAU,kCAAiC,MAAK,UAAS,cAAW,gBAAe,oBAE3F;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { ComponentType } from 'react'\nimport { Reaction, ReactionTooltipProps, RenderReaction } from './reaction'\n\n/** One person who reacted with a given emoji, for the hover list. @public */\nexport interface ReactionReactor {\n\t/** Display name of the person who reacted. */\n\tname: string\n\t/** True for the current user. */\n\tyou: boolean\n}\n\n/** One emoji's reactions on a comment, already tallied. @public */\nexport interface ReactionSummary {\n\temoji: string\n\t/** How many people reacted with this emoji. */\n\tcount: number\n\t/** True when the current user is one of them \u2014 renders the pill highlighted. */\n\tactive: boolean\n\t/** Who reacted with this emoji, in reaction order \u2014 shown in the hover list. */\n\treactors: ReactionReactor[]\n}\n\n/** @public */\nexport interface ReactionsProps {\n\t/** The comment's reactions, grouped by emoji. Empty renders nothing. */\n\treactions: ReactionSummary[]\n\t/** Toggles the current user's reaction for an emoji. */\n\tonToggle?(emoji: string): void\n\t/** Whether the current user may react. False makes the pills inert (e.g. a signed-out\n\t *  viewer, or a read-only thread) while still showing counts. */\n\tcanReact?: boolean\n\t/** Whether hovering a pill shows its reactor list. Pass false to suppress it \u2014 e.g. while\n\t *  another popup menu on the comment is open. Defaults to true. */\n\tenableHoverList?: boolean\n\t/** How to draw each emoji token. Defaults to the token string (OS emoji font). */\n\trenderReaction?: RenderReaction\n\t/** The tooltip naming who reacted, shown when a pill is hovered. Defaults to an inline sentence\n\t *  (`DefaultReactionTooltip`). Swap it to render the reactor list however you like. */\n\tReactionTooltip?: ComponentType<ReactionTooltipProps>\n}\n\n/**\n * The row of tallied reactions under a comment. Presentational \u2014 the host supplies the summaries\n * and owns what toggling does. Hovering a pill lists who reacted (see `Reaction`).\n *\n * The add-reaction affordance is a separate component (`ReactionPicker`) so it can live outside\n * this row \u2014 on a comment card it sits with the card's hover actions, which keeps its position\n * fixed as reactions are added here.\n * @public @react\n */\nexport function Reactions({\n\treactions,\n\tonToggle,\n\tcanReact = true,\n\tenableHoverList = true,\n\trenderReaction,\n\tReactionTooltip,\n}: ReactionsProps) {\n\tif (reactions.length === 0) return null\n\treturn (\n\t\t<div className=\"tlui-cmt-reactions\">\n\t\t\t{reactions.map((reaction) => (\n\t\t\t\t<Reaction\n\t\t\t\t\tkey={reaction.emoji}\n\t\t\t\t\t{...reaction}\n\t\t\t\t\tenableHoverList={enableHoverList}\n\t\t\t\t\trenderReaction={renderReaction}\n\t\t\t\t\tReactionTooltip={ReactionTooltip}\n\t\t\t\t\tonClick={canReact ? () => onToggle?.(reaction.emoji) : undefined}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "AA8DI;AA7DJ,SAAS,gBAAsD;AAiDxD,SAAS,UAAU;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA;AACD,GAAmB;AAClB,MAAI,UAAU,WAAW,EAAG,QAAO;AACnC,SACC,oBAAC,SAAI,WAAU,sBACb,oBAAU,IAAI,CAAC,aACf;AAAA,IAAC;AAAA;AAAA,MAEC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAW,MAAM,WAAW,SAAS,KAAK,IAAI;AAAA;AAAA,IALlD,SAAS;AAAA,EAMf,CACA,GACF;AAEF;",
   "names": []
 }

package/dist-esm/ui/reply-count.mjs

@@ -0,0 +1,9 @@
+function replyCountLabel(msg, replyCount) {
+  if (replyCount <= 0) return null;
+  const key = replyCount === 1 ? "comments.replies-one" : "comments.replies";
+  return msg(key).replace("{count}", String(replyCount));
+}
+export {
+  replyCountLabel
+};
+//# sourceMappingURL=reply-count.mjs.map

package/dist-esm/ui/reply-count.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/reply-count.ts"],
+  "sourcesContent": ["import { useTranslation } from 'tldraw'\n\n/**\n * The localized \"N replies\" label (e.g. \"1 reply\", \"3 replies\") for a thread with `replyCount`\n * replies \u2014 the comments after the opening one. Returns null when there are none, so callers render\n * nothing rather than \"0 replies\". Shared by the sidebar row and the hover preview so both read the\n * same, with each site owning where it puts the text.\n */\nexport function replyCountLabel(\n\tmsg: ReturnType<typeof useTranslation>,\n\treplyCount: number\n): string | null {\n\tif (replyCount <= 0) return null\n\tconst key = replyCount === 1 ? 'comments.replies-one' : 'comments.replies'\n\treturn msg(key).replace('{count}', String(replyCount))\n}\n"],
+  "mappings": "AAQO,SAAS,gBACf,KACA,YACgB;AAChB,MAAI,cAAc,EAAG,QAAO;AAC5B,QAAM,MAAM,eAAe,IAAI,yBAAyB;AACxD,SAAO,IAAI,GAAG,EAAE,QAAQ,WAAW,OAAO,UAAU,CAAC;AACtD;",
+  "names": []
+}

package/dist-esm/ui/send-button.mjs

@@ -1,6 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 function SendButton({ label, disabled, onClick }) {
-  return /* @__PURE__ */ jsx("button", { className: "cmt-send", type: "button", disabled, onClick, children: label });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "tlui-cmt-send",
+      type: "button",
+      disabled,
+      onClick,
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      ) })
+    }
+  );
 }
 export {
   SendButton

package/dist-esm/ui/send-button.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/send-button.tsx"],
-  "sourcesContent": ["/** @public */\nexport interface SendButtonProps {\n\tlabel: string\n\tdisabled?: boolean\n\tonClick?(): void\n}\n\n/** The button that posts a comment. @public @react */\nexport function SendButton({ label, disabled, onClick }: SendButtonProps) {\n\treturn (\n\t\t<button className=\"cmt-send\" type=\"button\" disabled={disabled} onClick={onClick}>\n\t\t\t{label}\n\t\t</button>\n\t)\n}\n"],
-  "mappings": "AAUE;AAFK,SAAS,WAAW,EAAE,OAAO,UAAU,QAAQ,GAAoB;AACzE,SACC,oBAAC,YAAO,WAAU,YAAW,MAAK,UAAS,UAAoB,SAC7D,iBACF;AAEF;",
+  "sourcesContent": ["/** @public */\nexport interface SendButtonProps {\n\t/** The button's accessible name (e.g. \"Send\"). Shown as an up-arrow icon, so this is its label. */\n\tlabel: string\n\tdisabled?: boolean\n\tonClick?(): void\n}\n\n/** The button that posts a comment \u2014 an up arrow. @public @react */\nexport function SendButton({ label, disabled, onClick }: SendButtonProps) {\n\treturn (\n\t\t<button\n\t\t\tclassName=\"tlui-cmt-send\"\n\t\t\ttype=\"button\"\n\t\t\tdisabled={disabled}\n\t\t\tonClick={onClick}\n\t\t\taria-label={label}\n\t\t\ttitle={label}\n\t\t>\n\t\t\t<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" aria-hidden=\"true\">\n\t\t\t\t<path\n\t\t\t\t\td=\"M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</button>\n\t)\n}\n"],
+  "mappings": "AAoBI;AAXG,SAAS,WAAW,EAAE,OAAO,UAAU,QAAQ,GAAoB;AACzE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,OAAO;AAAA,MAEP,8BAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACvE;AAAA,QAAC;AAAA;AAAA,UACA,GAAE;AAAA,UACF,MAAK;AAAA,UACL,UAAS;AAAA,UACT,UAAS;AAAA;AAAA,MACV,GACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/dist-esm/ui/tooltip-button.mjs

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TldrawUiTooltip } from "tldraw";
+const TooltipButton = forwardRef(
+  function TooltipButton2({ tooltip, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(TldrawUiTooltip, { content: tooltip, children: /* @__PURE__ */ jsx("button", { ref, type: "button", "aria-label": tooltip, ...props, children }) });
+  }
+);
+export {
+  TooltipButton
+};
+//# sourceMappingURL=tooltip-button.mjs.map

package/dist-esm/ui/tooltip-button.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/tooltip-button.tsx"],
+  "sourcesContent": ["import { type ButtonHTMLAttributes, forwardRef } from 'react'\nimport { TldrawUiTooltip } from 'tldraw'\n\ninterface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\ttooltip: string\n}\n\n/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button\n *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */\nexport const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(\n\tfunction TooltipButton({ tooltip, children, ...props }, ref) {\n\t\treturn (\n\t\t\t<TldrawUiTooltip content={tooltip}>\n\t\t\t\t<button ref={ref} type=\"button\" aria-label={tooltip} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t</TldrawUiTooltip>\n\t\t)\n\t}\n)\n"],
+  "mappings": "AAaI;AAbJ,SAAoC,kBAAkB;AACtD,SAAS,uBAAuB;AAQzB,MAAM,gBAAgB;AAAA,EAC5B,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAC5D,WACC,oBAAC,mBAAgB,SAAS,SACzB,8BAAC,YAAO,KAAU,MAAK,UAAS,cAAY,SAAU,GAAG,OACvD,UACF,GACD;AAAA,EAEF;AACD;",
+  "names": ["TooltipButton"]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/commenting",
   "description": "tldraw commenting UI components.",
-  "version": "0.0.0-bootstrap",
+  "version": "5.3.0-canary.31036673d3f8",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -28,7 +28,7 @@
     "test": "yarn run -T vitest --passWithNoTests",
     "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
     "predev": "node ./scripts/copy-css-files.mjs",
-    "dev": "chokidar 'src/ui/comments.css' 'src/canvas/canvas.css' -c 'node ./scripts/copy-css-files.mjs'",
+    "dev": "chokidar '../mentions/mentions.css' 'src/ui/comments.css' 'src/canvas/canvas.css' -c 'node ./scripts/copy-css-files.mjs'",
     "prebuild": "node ./scripts/copy-css-files.mjs",
     "build": "yarn run -T tsx ../../internal/scripts/build-package.ts",
     "build-api": "yarn run -T tsx ../../internal/scripts/build-api.ts",
@@ -38,6 +38,7 @@
     "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "devDependencies": {
+    "@tldraw/driver": "5.3.0-canary.31036673d3f8",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.1",
@@ -52,12 +53,11 @@
   },
   "dependencies": {
     "@tiptap/core": "^3.12.1",
-    "@tiptap/extension-mention": "3.13.0",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tiptap/suggestion": "3.13.0",
-    "@tldraw/utils": "5.2.5",
-    "tldraw": "5.2.5"
+    "@tldraw/mentions": "5.3.0-canary.31036673d3f8",
+    "@tldraw/utils": "5.3.0-canary.31036673d3f8",
+    "tldraw": "5.3.0-canary.31036673d3f8"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

package/src/canvas/anchor-lifecycle.test.ts

@@ -0,0 +1,290 @@
+import {
+	commentSchemaRecords,
+	createCommentThread,
+	createShapeId,
+	createTLSchema,
+	createTLStore,
+	defaultBindingUtils,
+	defaultShapeUtils,
+	defaultTools,
+	Editor,
+	toRichText,
+	createComment as tlCreateComment,
+	TLPageId,
+	TLShapeId,
+} from 'tldraw'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { registerCommentAnchorLifecycle } from './anchor-lifecycle'
+import { commitCommentMutation, putCommentRecords } from './comment-mutations'
+import { getCommentRecord, getComments } from './comment-store'
+import { CommentTool } from './comment-tool'
+
+/**
+ * These tests need a real editor: the behavior under test is the interplay between store
+ * side effects (the beforeDelete snapshot, operation-complete settlement) and real editor
+ * operations like `deleteShapes` and `moveShapesToPage` — exactly what a stub can't model.
+ */
+
+let editor: Editor
+let dispose: () => void
+
+beforeEach(() => {
+	editor = new Editor({
+		store: createTLStore({ schema: createTLSchema({ records: commentSchemaRecords }) }),
+		shapeUtils: defaultShapeUtils,
+		bindingUtils: defaultBindingUtils,
+		tools: defaultTools,
+		getContainer: () => document.body,
+	})
+	dispose = registerCommentAnchorLifecycle(editor)
+})
+
+afterEach(() => {
+	dispose()
+	editor.dispose()
+})
+
+function makeShape(x = 100, y = 100, w = 100, h = 50): TLShapeId {
+	const id = createShapeId()
+	editor.createShape({ id, type: 'geo', x, y, props: { w, h } })
+	return id
+}
+
+function makeThread(shapeId: TLShapeId, anchorX = 0.5, anchorY = 0.5, isPrecise = true) {
+	const thread = createCommentThread({
+		pageId: editor.getCurrentPageId(),
+		anchor: { type: 'shape', shapeId, x: anchorX, y: anchorY, isPrecise },
+		createdBy: 'me',
+	})
+	const comment = tlCreateComment({
+		threadId: thread.id,
+		pageId: thread.pageId,
+		authorId: 'me',
+		body: toRichText('hello'),
+	})
+	putCommentRecords(editor, [thread, comment])
+	return { thread, comment }
+}
+
+function makeSecondPage(): TLPageId {
+	editor.createPage({ name: 'page 2' })
+	return editor.getPages()[1].id
+}
+
+describe('shape deletion', () => {
+	it('converts a precise shape anchor to a point anchor where the pin sat', () => {
+		const shapeId = makeShape(100, 100, 100, 50)
+		const { thread } = makeThread(shapeId, 0.5, 0.5, true)
+
+		editor.deleteShape(shapeId)
+
+		const updated = getCommentRecord(editor, thread.id)!
+		expect(updated.typeName).toBe('comment-thread')
+		expect((updated as typeof thread).anchor).toEqual({ type: 'point', x: 150, y: 125 })
+	})
+
+	it('converts an imprecise shape anchor where the inset pin is drawn, not at the raw corner', () => {
+		const shapeId = makeShape(100, 100, 100, 50)
+		const { thread } = makeThread(shapeId, 0.2, 0.9, false)
+
+		editor.deleteShape(shapeId)
+
+		// Top-right corner (200, 100) plus the 20px screen inset toward the shape's centre.
+		const updated = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updated.anchor).toEqual({ type: 'point', x: 180, y: 120 })
+	})
+
+	it('resolves the imprecise spot from the commenting options when no override is passed', () => {
+		const configured = new Editor({
+			store: createTLStore({ schema: createTLSchema({ records: commentSchemaRecords }) }),
+			shapeUtils: defaultShapeUtils,
+			bindingUtils: defaultBindingUtils,
+			tools: [...defaultTools, CommentTool.configure({ impreciseShapeAnchor: { x: 0, y: 1 } })],
+			getContainer: () => document.body,
+		})
+		const disposeConfigured = registerCommentAnchorLifecycle(configured)
+		try {
+			const shapeId = createShapeId()
+			configured.createShape({ id: shapeId, type: 'geo', x: 100, y: 100, props: { w: 100, h: 50 } })
+			const thread = createCommentThread({
+				pageId: configured.getCurrentPageId(),
+				anchor: { type: 'shape', shapeId, x: 0.5, y: 0.5, isPrecise: false },
+				createdBy: 'me',
+			})
+			putCommentRecords(configured, [thread])
+
+			configured.deleteShape(shapeId)
+
+			// Bottom-left corner (100, 150) plus the inset toward the shape's centre.
+			const updated = getCommentRecord(configured, thread.id) as typeof thread
+			expect(updated.anchor).toEqual({ type: 'point', x: 120, y: 130 })
+		} finally {
+			disposeConfigured()
+			configured.dispose()
+		}
+	})
+
+	it('converts anchors on children when their frame is deleted with them', () => {
+		const frameId = createShapeId()
+		editor.createShape({ id: frameId, type: 'frame', x: 0, y: 0, props: { w: 400, h: 400 } })
+		const childId = createShapeId()
+		editor.createShape({
+			id: childId,
+			type: 'geo',
+			parentId: frameId,
+			x: 50,
+			y: 50,
+			props: { w: 100, h: 100 },
+		})
+		const { thread } = makeThread(childId, 0.5, 0.5, true)
+
+		editor.deleteShape(frameId)
+
+		const updated = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updated.anchor).toEqual({ type: 'point', x: 100, y: 100 })
+	})
+
+	it('re-attaches the thread when the delete is undone', () => {
+		const shapeId = makeShape(100, 100, 100, 50)
+		const { thread } = makeThread(shapeId, 0.5, 0.5, true)
+		editor.markHistoryStoppingPoint()
+
+		editor.deleteShape(shapeId)
+		expect((getCommentRecord(editor, thread.id) as typeof thread).anchor.type).toBe('point')
+
+		editor.undo()
+
+		const updated = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updated.anchor).toEqual(thread.anchor)
+	})
+
+	it('keeps the restore when a returning shape cannot resolve its page yet', () => {
+		const frameId = createShapeId()
+		editor.createShape({ id: frameId, type: 'frame', x: 0, y: 0, props: { w: 400, h: 400 } })
+		const childId = createShapeId()
+		editor.createShape({
+			id: childId,
+			type: 'geo',
+			parentId: frameId,
+			x: 50,
+			y: 50,
+			props: { w: 100, h: 100 },
+		})
+		const { thread } = makeThread(childId, 0.5, 0.5, true)
+		const childRecord = editor.getShape(childId)!
+		const frameRecord = editor.getShape(frameId)!
+
+		editor.deleteShape(frameId)
+		expect((getCommentRecord(editor, thread.id) as typeof thread).anchor.type).toBe('point')
+
+		// The child returns in an earlier operation than its parent, so its ancestor page can't
+		// resolve when it first reappears.
+		editor.store.put([childRecord])
+		editor.store.put([frameRecord])
+
+		const updated = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updated.anchor).toEqual(thread.anchor)
+	})
+
+	it('re-attaches on undo even when the lifecycle was re-registered in between', () => {
+		const shapeId = makeShape(100, 100, 100, 50)
+		const { thread } = makeThread(shapeId, 0.5, 0.5, true)
+		editor.markHistoryStoppingPoint()
+
+		editor.deleteShape(shapeId)
+		expect((getCommentRecord(editor, thread.id) as typeof thread).anchor.type).toBe('point')
+
+		// The registering effect re-runs whenever its inputs change identity; conversion memory
+		// must not live and die with any one registration.
+		dispose()
+		dispose = registerCommentAnchorLifecycle(editor)
+
+		editor.undo()
+
+		const updated = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updated.anchor).toEqual(thread.anchor)
+	})
+
+	it('does not re-attach on undo when the pin was moved after the conversion', () => {
+		const shapeId = makeShape(100, 100, 100, 50)
+		const { thread } = makeThread(shapeId, 0.5, 0.5, true)
+		editor.markHistoryStoppingPoint()
+
+		editor.deleteShape(shapeId)
+		const converted = getCommentRecord(editor, thread.id) as typeof thread
+		commitCommentMutation(editor, () =>
+			putCommentRecords(editor, [{ ...converted, anchor: { type: 'point', x: 900, y: 900 } }])
+		)
+
+		editor.undo()
+
+		const updated = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updated.anchor).toEqual({ type: 'point', x: 900, y: 900 })
+	})
+
+	it('leaves threads on other shapes untouched', () => {
+		const shapeId = makeShape()
+		const otherId = makeShape(300, 300)
+		const { thread } = makeThread(otherId)
+
+		editor.deleteShape(shapeId)
+
+		const updated = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updated.anchor.type).toBe('shape')
+	})
+})
+
+describe('moving a shape to another page', () => {
+	it('re-homes the thread and its comments to the new page, keeping the shape anchor', () => {
+		const shapeId = makeShape()
+		const { thread, comment } = makeThread(shapeId)
+		const page2 = makeSecondPage()
+
+		editor.moveShapesToPage([shapeId], page2)
+
+		const updatedThread = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updatedThread.pageId).toBe(page2)
+		expect(updatedThread.anchor).toEqual(thread.anchor)
+		const updatedComment = getComments(editor).find((c) => c.id === comment.id)!
+		expect(updatedComment.pageId).toBe(page2)
+	})
+
+	it('re-homes threads anchored to children of a moved frame', () => {
+		const frameId = createShapeId()
+		editor.createShape({ id: frameId, type: 'frame', x: 0, y: 0, props: { w: 400, h: 400 } })
+		const childId = createShapeId()
+		editor.createShape({
+			id: childId,
+			type: 'geo',
+			parentId: frameId,
+			x: 50,
+			y: 50,
+			props: { w: 100, h: 100 },
+		})
+		const { thread } = makeThread(childId)
+		const page2 = makeSecondPage()
+
+		editor.moveShapesToPage([frameId], page2)
+
+		const updatedThread = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updatedThread.pageId).toBe(page2)
+		expect(updatedThread.anchor.type).toBe('shape')
+	})
+
+	it('re-homes the thread back when the move is undone', () => {
+		const shapeId = makeShape()
+		const { thread } = makeThread(shapeId)
+		const page1 = editor.getCurrentPageId()
+		const page2 = makeSecondPage()
+		editor.markHistoryStoppingPoint()
+
+		editor.moveShapesToPage([shapeId], page2)
+		expect((getCommentRecord(editor, thread.id) as typeof thread).pageId).toBe(page2)
+
+		editor.undo()
+
+		const updatedThread = getCommentRecord(editor, thread.id) as typeof thread
+		expect(updatedThread.pageId).toBe(page1)
+		expect(updatedThread.anchor.type).toBe('shape')
+	})
+})