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

package/dist-cjs/ui/reaction-picker.js

@@ -0,0 +1,71 @@
+"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 reaction_picker_exports = {};
+__export(reaction_picker_exports, {
+  ReactionPicker: () => ReactionPicker
+});
+module.exports = __toCommonJS(reaction_picker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tldraw = require("tldraw");
+var import_emoji_picker = require("./emoji-picker");
+var import_icons = require("./icons");
+function ReactionPicker({
+  emoji,
+  selected,
+  onSelect,
+  renderReaction,
+  palette: Palette = import_emoji_picker.EmojiPicker,
+  menuId,
+  className = "tlui-cmt-thread__action"
+}) {
+  const msg = (0, import_tldraw.useTranslation)();
+  const editor = (0, import_tldraw.useMaybeEditor)();
+  const generatedId = (0, import_react.useId)();
+  const id = menuId ?? `comment-reactions-${generatedId}`;
+  const handleSelect = (0, import_react.useCallback)(
+    (value) => {
+      onSelect?.(value);
+      import_tldraw.tlmenus.deleteOpenMenu(id, editor?.contextId);
+    },
+    [onSelect, id, editor]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tldraw.TldrawUiDropdownMenuRoot, { id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tldraw.TldrawUiButton,
+      {
+        type: "icon",
+        tooltip: msg("comments.add-reaction"),
+        title: msg("comments.add-reaction"),
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SmileyIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiDropdownMenuContent, { side: "bottom", align: "start", alignOffset: 0, sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Palette,
+      {
+        emoji,
+        selected,
+        onSelect: handleSelect,
+        renderReaction
+      }
+    ) })
+  ] });
+}
+//# sourceMappingURL=reaction-picker.js.map

package/dist-cjs/ui/reaction-picker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/reaction-picker.tsx"],
+  "sourcesContent": ["import { useCallback, useId, type ComponentType } from 'react'\nimport {\n\tTldrawUiButton,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n\ttlmenus,\n\tuseMaybeEditor,\n\tuseTranslation,\n} from 'tldraw'\nimport { EmojiPicker, type EmojiPickerProps } from './emoji-picker'\nimport { SmileyIcon } from './icons'\nimport { RenderReaction } from './reaction'\n\n/** @public */\nexport interface ReactionPickerProps {\n\t/** The emoji to offer. Defaults to `DEFAULT_REACTION_EMOJI`. */\n\temoji?: string[]\n\t/** Emoji the current user has already reacted with; shown as pressed in the grid. */\n\tselected?: string[]\n\t/** Called when an emoji is chosen. */\n\tonSelect?(emoji: string): void\n\t/** How to draw each emoji token. Defaults to the token string (OS emoji font). */\n\trenderReaction?: RenderReaction\n\t/**\n\t * What the button opens \u2014 the thing that produces a token. Defaults to `EmojiPicker`, the grid of\n\t * emoji. Swap it for any component taking the same props to offer something else entirely (the\n\t * drawn reactions example replaces it with a canvas you draw in); the props are passed straight\n\t * through either way.\n\t */\n\tpalette?: ComponentType<EmojiPickerProps>\n\t/**\n\t * Identifies the menu in tldraw's global menu registry, which keys open/closed state by id.\n\t * A thread renders one picker per comment, so this must differ per comment \u2014 sharing an id\n\t * makes every picker in the thread open at once. Defaults to a per-instance generated id;\n\t * pass one only for a stabler, more debuggable value.\n\t */\n\tmenuId?: string\n\t/** Class for the trigger button. Defaults to the card-action style, matching the \u22EF button. */\n\tclassName?: string\n}\n\n/**\n * The add-reaction affordance: a smiley button that opens an emoji grid.\n *\n * Anchored to its own button rather than to the reactions row, so the menu keeps its position as\n * reactions are added and the row reflows.\n *\n * Picking an emoji dismisses the grid \u2014 adding and removing alike, since either way the picker has\n * done its job \u2014 and hands focus back to the trigger.\n * @public @react\n */\nexport function ReactionPicker({\n\temoji,\n\tselected,\n\tonSelect,\n\trenderReaction,\n\tpalette: Palette = EmojiPicker,\n\tmenuId,\n\tclassName = 'tlui-cmt-thread__action',\n}: ReactionPickerProps) {\n\tconst msg = useTranslation()\n\tconst editor = useMaybeEditor()\n\t// Unique per mounted picker unless the host supplies something stabler \u2014 see `menuId`.\n\tconst generatedId = useId()\n\tconst id = menuId ?? `comment-reactions-${generatedId}`\n\n\t// The dropdown's open state lives in tldraw's global menu registry, so dropping the entry is\n\t// what closes it. The palette's tokens are plain buttons \u2014 a swappable component, not radix\n\t// menu items \u2014 so nothing dismisses the menu on its own.\n\tconst handleSelect = useCallback(\n\t\t(value: string) => {\n\t\t\tonSelect?.(value)\n\t\t\ttlmenus.deleteOpenMenu(id, editor?.contextId)\n\t\t},\n\t\t[onSelect, id, editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiDropdownMenuRoot id={id}>\n\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttooltip={msg('comments.add-reaction')}\n\t\t\t\t\ttitle={msg('comments.add-reaction')}\n\t\t\t\t\tclassName={className}\n\t\t\t\t>\n\t\t\t\t\t<SmileyIcon />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t{/* left-aligned under the trigger, so the grid opens rightward off the card's edge */}\n\t\t\t<TldrawUiDropdownMenuContent side=\"bottom\" align=\"start\" alignOffset={0} sideOffset={4}>\n\t\t\t\t<Palette\n\t\t\t\t\temoji={emoji}\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\trenderReaction={renderReaction}\n\t\t\t\t/>\n\t\t\t</TldrawUiDropdownMenuContent>\n\t\t</TldrawUiDropdownMenuRoot>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EE;AA/EF,mBAAuD;AACvD,oBAQO;AACP,0BAAmD;AACnD,mBAA2B;AAyCpB,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,UAAU;AAAA,EACnB;AAAA,EACA,YAAY;AACb,GAAwB;AACvB,QAAM,UAAM,8BAAe;AAC3B,QAAM,aAAS,8BAAe;AAE9B,QAAM,kBAAc,oBAAM;AAC1B,QAAM,KAAK,UAAU,qBAAqB,WAAW;AAKrD,QAAM,mBAAe;AAAA,IACpB,CAAC,UAAkB;AAClB,iBAAW,KAAK;AAChB,4BAAQ,eAAe,IAAI,QAAQ,SAAS;AAAA,IAC7C;AAAA,IACA,CAAC,UAAU,IAAI,MAAM;AAAA,EACtB;AAEA,SACC,6CAAC,0CAAyB,IACzB;AAAA,gDAAC,6CACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,SAAS,IAAI,uBAAuB;AAAA,QACpC,OAAO,IAAI,uBAAuB;AAAA,QAClC;AAAA,QAEA,sDAAC,2BAAW;AAAA;AAAA,IACb,GACD;AAAA,IAEA,4CAAC,6CAA4B,MAAK,UAAS,OAAM,SAAQ,aAAa,GAAG,YAAY,GACpF;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
+  "names": []
+}

package/dist-cjs/ui/reaction.js

@@ -18,14 +18,66 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var reaction_exports = {};
 __export(reaction_exports, {
-  Reaction: () => Reaction
+  DefaultReactionTooltip: () => DefaultReactionTooltip,
+  DefaultReactionTooltipContent: () => DefaultReactionTooltipContent,
+  Reaction: () => Reaction,
+  defaultRenderReaction: () => defaultRenderReaction
 });
 module.exports = __toCommonJS(reaction_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function Reaction({ emoji, count, active }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: active ? "cmt-reaction cmt-reaction--active" : "cmt-reaction", type: "button", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-reaction__emoji", children: emoji }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-reaction__count", children: count })
-  ] });
+var import_tldraw = require("tldraw");
+function defaultRenderReaction(token) {
+  return token;
+}
+function Reaction({
+  emoji,
+  count,
+  active,
+  reactors,
+  enableHoverList = true,
+  renderReaction = defaultRenderReaction,
+  ReactionTooltip = DefaultReactionTooltip,
+  onClick
+}) {
+  const Tag = onClick ? "button" : "span";
+  const pill = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Tag,
+    {
+      className: active ? "tlui-cmt-reaction tlui-cmt-reaction--active" : "tlui-cmt-reaction",
+      ...onClick ? { type: "button", "aria-pressed": active, onClick } : { role: "img" },
+      "aria-label": `${emoji} ${count}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-reaction__emoji", children: renderReaction(emoji) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-reaction__count", children: count })
+      ]
+    }
+  );
+  if (!enableHoverList || reactors.length === 0) return pill;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReactionTooltip, { reactors, children: pill });
+}
+function DefaultReactionTooltip({ reactors, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiTooltip, { side: "bottom", content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultReactionTooltipContent, { reactors }), children });
+}
+function DefaultReactionTooltipContent({ reactors }) {
+  const msg = (0, import_tldraw.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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: msg("comments.reacted-1").replace("{a}", a) });
+    case 2:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: msg("comments.reacted-2").replace("{a}", a).replace("{b}", b) });
+    case 3:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: msg(template).replace("{a}", a).replace("{b}", b).replace("{c}", c).replace("{count}", String(others)) });
+    }
+  }
 }
 //# sourceMappingURL=reaction.js.map

package/dist-cjs/ui/reaction.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUE;AAFK,SAAS,SAAS,EAAE,OAAO,OAAO,OAAO,GAAkB;AACjE,SACC,6CAAC,YAAO,WAAW,SAAS,sCAAsC,gBAAgB,MAAK,UACtF;AAAA,gDAAC,UAAK,WAAU,uBAAuB,iBAAM;AAAA,IAC7C,4CAAC,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\t// An inert pill (no handler) is plain content, not a control \u2014 rendering it as a span keeps it\n\t// valid inside an anchor row (e.g. a notification list item) and out of the tab order.\n\tconst Tag = onClick ? 'button' : 'span'\n\tconst pill = (\n\t\t<Tag\n\t\t\tclassName={active ? 'tlui-cmt-reaction tlui-cmt-reaction--active' : 'tlui-cmt-reaction'}\n\t\t\t{...(onClick\n\t\t\t\t? { type: 'button' as const, 'aria-pressed': active, onClick }\n\t\t\t\t: { role: 'img' as const })}\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. The inert span needs the\n\t\t\t// img role for the label to be announced at all.\n\t\t\taria-label={`${emoji} ${count}`}\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</Tag>\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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoDE;AAnDF,oBAAgD;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;AAGjB,QAAM,MAAM,UAAU,WAAW;AACjC,QAAM,OACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,SAAS,gDAAgD;AAAA,MACnE,GAAI,UACF,EAAE,MAAM,UAAmB,gBAAgB,QAAQ,QAAQ,IAC3D,EAAE,MAAM,MAAe;AAAA,MAI1B,cAAY,GAAG,KAAK,IAAI,KAAK;AAAA,MAE7B;AAAA,oDAAC,UAAK,WAAU,4BAA4B,yBAAe,KAAK,GAAE;AAAA,QAClE,4CAAC,UAAK,WAAU,4BAA4B,iBAAM;AAAA;AAAA;AAAA,EACnD;AAID,MAAI,CAAC,mBAAmB,SAAS,WAAW,EAAG,QAAO;AAItD,SAAO,4CAAC,mBAAgB,UAAqB,gBAAK;AACnD;AAiBO,SAAS,uBAAuB,EAAE,UAAU,SAAS,GAAyB;AACpF,SACC,4CAAC,iCAAgB,MAAK,UAAS,SAAS,4CAAC,iCAA8B,UAAoB,GACzF,UACF;AAEF;AASO,SAAS,8BAA8B,EAAE,SAAS,GAAoC;AAC5F,QAAM,UAAM,8BAAe;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,2EAAG,cAAI,oBAAoB,EAAE,QAAQ,OAAO,CAAC,GAAE;AAAA,IACvD,KAAK;AACJ,aAAO,2EAAG,cAAI,oBAAoB,EAAE,QAAQ,OAAO,CAAC,EAAE,QAAQ,OAAO,CAAC,GAAE;AAAA,IACzE,KAAK;AACJ,aAAO,2EAAG,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,2EACE,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-cjs/ui/reactions.js

@@ -23,12 +23,25 @@ __export(reactions_exports, {
 module.exports = __toCommonJS(reactions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_reaction = require("./reaction");
-function Reactions() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-reactions", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reaction.Reaction, { emoji: "\u{1F44D}", count: 3, active: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reaction.Reaction, { emoji: "\u{1F389}", count: 1, active: false }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reaction.Reaction, { emoji: "\u{1F440}", count: 2, active: false }),
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-reactions", children: reactions.map((reaction) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_reaction.Reaction,
+    {
+      ...reaction,
+      enableHoverList,
+      renderReaction,
+      ReactionTooltip,
+      onClick: canReact ? () => onToggle?.(reaction.emoji) : void 0
+    },
+    reaction.emoji
+  )) });
 }
 //# sourceMappingURL=reactions.js.map

package/dist-cjs/ui/reactions.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKE;AALF,sBAAyB;AAGlB,SAAS,YAAY;AAC3B,SACC,6CAAC,SAAI,WAAU,iBACd;AAAA,gDAAC,4BAAS,OAAM,aAAK,OAAO,GAAG,QAAQ,MAAM;AAAA,IAC7C,4CAAC,4BAAS,OAAM,aAAK,OAAO,GAAG,QAAQ,OAAO;AAAA,IAC9C,4CAAC,4BAAS,OAAM,aAAK,OAAO,GAAG,QAAQ,OAAO;AAAA,IAC9C,4CAAC,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DI;AA7DJ,sBAA+D;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,4CAAC,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-cjs/ui/{mention.js → reply-count.js}

@@ -16,16 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var mention_exports = {};
-__export(mention_exports, {
-  Mention: () => Mention
+var reply_count_exports = {};
+__export(reply_count_exports, {
+  replyCountLabel: () => replyCountLabel
 });
-module.exports = __toCommonJS(mention_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-function Mention({ name }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmt-mention", children: [
-    "@",
-    name
-  ] });
+module.exports = __toCommonJS(reply_count_exports);
+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));
 }
-//# sourceMappingURL=mention.js.map
+//# sourceMappingURL=reply-count.js.map

package/dist-cjs/ui/reply-count.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;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-cjs/ui/send-button.js

@@ -22,7 +22,19 @@ __export(send_button_exports, {
 });
 module.exports = __toCommonJS(send_button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_icons = require("./icons");
 function SendButton({ label, disabled, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "cmt-send", type: "button", disabled, onClick, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      className: "tlui-cmt-send",
+      type: "button",
+      disabled,
+      onClick,
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SendIcon, {})
+    }
+  );
 }
 //# sourceMappingURL=send-button.js.map

package/dist-cjs/ui/send-button.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUE;AAFK,SAAS,WAAW,EAAE,OAAO,UAAU,QAAQ,GAAoB;AACzE,SACC,4CAAC,YAAO,WAAU,YAAW,MAAK,UAAS,UAAoB,SAC7D,iBACF;AAEF;",
+  "sourcesContent": ["import { SendIcon } from './icons'\n\n/** @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<SendIcon />\n\t\t</button>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBG;AArBH,mBAAyB;AAWlB,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,sDAAC,yBAAS;AAAA;AAAA,EACX;AAEF;",
   "names": []
 }

package/dist-cjs/ui/{comment-text.js → visual-viewport.js}

@@ -16,14 +16,17 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var comment_text_exports = {};
-__export(comment_text_exports, {
-  CommentText: () => CommentText
+var visual_viewport_exports = {};
+__export(visual_viewport_exports, {
+  getVisibleViewport: () => getVisibleViewport
 });
-module.exports = __toCommonJS(comment_text_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_render_markdown = require("./render-markdown");
-function CommentText({ text }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-text", children: (0, import_render_markdown.renderMarkdown)(text) });
+module.exports = __toCommonJS(visual_viewport_exports);
+function getVisibleViewport(win) {
+  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 };
 }
-//# sourceMappingURL=comment-text.js.map
+//# sourceMappingURL=visual-viewport.js.map

package/dist-cjs/ui/visual-viewport.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/visual-viewport.ts"],
+  "sourcesContent": ["// The visual viewport is the region actually on screen. The software keyboard (and pinch-zoom)\n// shrink it while leaving the layout viewport \u2014 and CSS `dvh` \u2014 unchanged, most notably on iOS.\n// So placing a panel above the keyboard means measuring against `window.visualViewport`, not CSS.\n// These helpers are the single place the commenting layer reads it.\n\n/** The on-screen viewport region in window coordinates, falling back to the layout viewport where\n *  `visualViewport` is unavailable. `top`/`left` carry the viewport's own offset \u2014 on iOS this is\n *  non-zero while the keyboard is open, and dropping it misplaces anything measured against it. */\nexport interface VisibleViewport {\n\ttop: number\n\tleft: number\n\twidth: number\n\theight: number\n\tbottom: number\n\tright: number\n}\n\n/** Read the visible viewport once. Call it inside a `visualViewport` resize/scroll handler to keep\n *  a measurement current as the keyboard opens and closes. */\nexport function getVisibleViewport(win: Window): VisibleViewport {\n\tconst vv = win.visualViewport\n\tconst top = vv ? vv.offsetTop : 0\n\tconst left = vv ? vv.offsetLeft : 0\n\tconst width = vv ? vv.width : win.innerWidth\n\tconst height = vv ? vv.height : win.innerHeight\n\treturn { top, left, width, height, bottom: top + height, right: left + width }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBO,SAAS,mBAAmB,KAA8B;AAChE,QAAM,KAAK,IAAI;AACf,QAAM,MAAM,KAAK,GAAG,YAAY;AAChC,QAAM,OAAO,KAAK,GAAG,aAAa;AAClC,QAAM,QAAQ,KAAK,GAAG,QAAQ,IAAI;AAClC,QAAM,SAAS,KAAK,GAAG,SAAS,IAAI;AACpC,SAAO,EAAE,KAAK,MAAM,OAAO,QAAQ,QAAQ,MAAM,QAAQ,OAAO,OAAO,MAAM;AAC9E;",
+  "names": []
+}

package/dist-esm/canvas/anchor-lifecycle.mjs

@@ -0,0 +1,128 @@
+import { WeakCache } from "@tldraw/utils";
+import { commitCommentMutation } from "./comment-mutations.mjs";
+import { getCommentRecord, getComments, getCommentThreads } from "./comment-store.mjs";
+import { anchorPagePoint, impreciseShapePinInset } from "./thread-state.mjs";
+const convertedByShapeCache = new WeakCache();
+function isAnchoredToShape(thread, shapeId) {
+  const anchor = thread.anchor;
+  return anchor.type === "shape" && anchor.shapeId === shapeId;
+}
+function registerCommentAnchorLifecycle(editor) {
+  const pendingByShape = /* @__PURE__ */ new Map();
+  const convertedByShape = convertedByShapeCache.get(editor, () => /* @__PURE__ */ new Map());
+  function rehomeThread(thread, pageId, updates) {
+    updates.push({ ...thread, pageId });
+    for (const comment of getComments(editor)) {
+      if (comment.threadId === thread.id) updates.push({ ...comment, pageId });
+    }
+  }
+  const disposeBeforeDelete = editor.sideEffects.registerBeforeDeleteHandler(
+    "shape",
+    (shape, source) => {
+      if (source === "remote") return;
+      for (const thread of getCommentThreads(editor)) {
+        if (!isAnchoredToShape(thread, shape.id)) continue;
+        let snapshot = pendingByShape.get(shape.id);
+        if (!snapshot) {
+          snapshot = /* @__PURE__ */ new Map();
+          pendingByShape.set(shape.id, snapshot);
+        }
+        let point = anchorPagePoint(editor, thread.anchor);
+        const inset = impreciseShapePinInset(editor, thread.anchor);
+        if (point && inset) {
+          const zoom = editor.getZoomLevel();
+          point = { x: point.x + inset.x / zoom, y: point.y + inset.y / zoom };
+        }
+        snapshot.set(thread.id, point);
+      }
+    }
+  );
+  const returnedShapeIds = /* @__PURE__ */ new Set();
+  const disposeOperationComplete = editor.sideEffects.registerOperationCompleteHandler((source) => {
+    if (source === "remote") return;
+    if (pendingByShape.size === 0 && returnedShapeIds.size === 0) return;
+    const settled = [...pendingByShape.entries()];
+    pendingByShape.clear();
+    const returned = [...returnedShapeIds];
+    returnedShapeIds.clear();
+    const updates = [];
+    for (const [shapeId, threadPoints] of settled) {
+      if (editor.getShape(shapeId)) continue;
+      for (const [threadId, point] of threadPoints) {
+        if (!point) continue;
+        const thread = getCommentRecord(editor, threadId);
+        if (!thread || thread.typeName !== "comment-thread") continue;
+        if (!isAnchoredToShape(thread, shapeId)) continue;
+        let converted = convertedByShape.get(shapeId);
+        if (!converted) {
+          converted = [];
+          convertedByShape.set(shapeId, converted);
+        }
+        converted.push({ threadId, anchor: thread.anchor, point });
+        updates.push({ ...thread, anchor: { type: "point", x: point.x, y: point.y } });
+      }
+    }
+    for (const shapeId of returned) {
+      const shape = editor.getShape(shapeId);
+      if (!shape) continue;
+      const converted = convertedByShape.get(shapeId);
+      if (!converted) continue;
+      convertedByShape.delete(shapeId);
+      const pageId = editor.getAncestorPageId(shape);
+      for (const { threadId, anchor, point } of converted) {
+        const thread = getCommentRecord(editor, threadId);
+        if (!thread || thread.typeName !== "comment-thread") continue;
+        const current = thread.anchor;
+        if (current.type !== "point" || current.x !== point.x || current.y !== point.y) {
+          continue;
+        }
+        if (!pageId || thread.pageId === pageId) {
+          updates.push({ ...thread, anchor });
+        } else {
+          rehomeThread({ ...thread, anchor }, pageId, updates);
+        }
+      }
+    }
+    if (updates.length > 0) {
+      commitCommentMutation(editor, ({ put }) => put(updates));
+    }
+  });
+  const disposeAfterCreate = editor.sideEffects.registerAfterCreateHandler(
+    "shape",
+    (shape, source) => {
+      if (source === "remote") return;
+      if (convertedByShape.has(shape.id)) returnedShapeIds.add(shape.id);
+    }
+  );
+  const disposeAfterChange = editor.sideEffects.registerAfterChangeHandler(
+    "shape",
+    (prev, next, source) => {
+      if (source === "remote") return;
+      if (prev.parentId === next.parentId) return;
+      const pageId = editor.getAncestorPageId(next);
+      if (!pageId) return;
+      const movedIds = editor.getShapeAndDescendantIds([next.id]);
+      const updates = [];
+      for (const thread of getCommentThreads(editor)) {
+        const anchor = thread.anchor;
+        if (anchor.type !== "shape") continue;
+        if (!movedIds.has(anchor.shapeId)) continue;
+        if (thread.pageId === pageId) continue;
+        rehomeThread(thread, pageId, updates);
+      }
+      if (updates.length > 0) {
+        commitCommentMutation(editor, ({ put }) => put(updates));
+      }
+    }
+  );
+  return () => {
+    disposeBeforeDelete();
+    disposeOperationComplete();
+    disposeAfterCreate();
+    disposeAfterChange();
+  };
+}
+export {
+  registerCommentAnchorLifecycle
+};
+//# sourceMappingURL=anchor-lifecycle.mjs.map

package/dist-esm/canvas/anchor-lifecycle.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/anchor-lifecycle.ts"],
+  "sourcesContent": ["import { WeakCache } from '@tldraw/utils'\nimport { Editor, TLCommentAnchor, TLCommentThread, TLPageId, TLShapeId, VecLike } from 'tldraw'\nimport { commitCommentMutation } from './comment-mutations'\nimport { getCommentRecord, getComments, getCommentThreads, TLCommentRecord } from './comment-store'\nimport { anchorPagePoint, impreciseShapePinInset } from './thread-state'\n\ntype ShapeAnchor = Extract<TLCommentAnchor, { type: 'shape' }>\n\n/**\n * Threads converted to point anchors because their shape was deleted, kept so the anchor can be\n * restored if the shape comes back. Owned by the editor, not the registration closure: the\n * registering effect can re-run, and an undo can arrive long after the delete.\n */\nconst convertedByShapeCache = new WeakCache<\n\tEditor,\n\tMap<TLShapeId, { threadId: string; anchor: ShapeAnchor; point: VecLike }[]>\n>()\n\nfunction isAnchoredToShape(\n\tthread: TLCommentThread,\n\tshapeId: TLShapeId\n): thread is TLCommentThread & { anchor: ShapeAnchor } {\n\tconst anchor = thread.anchor\n\treturn anchor.type === 'shape' && anchor.shapeId === shapeId\n}\n\n/**\n * Keep shape-anchored threads alive across their shape's lifecycle:\n *\n * - When the shape is deleted, the thread converts to a `point` anchor where its pin last sat, so\n *   the conversation outlives the shape instead of becoming invisible.\n * - When the shape moves to another page, the thread follows: its `pageId` and each comment's\n *   denormalized `pageId` update, and the anchor keeps riding the shape.\n * - When a deleted shape comes back, the thread re-attaches \u2014 unless its pin was manually moved in\n *   the meantime, in which case the manual placement wins.\n *\n * A page move is `deleteShapes` + re-create with preserved ids inside one `editor.run`, but each\n * store write is its own operation, so \"this shape is being moved\" is never observable as a single\n * event. The handlers therefore cooperate across operations: `beforeDelete` snapshots where each\n * affected pin sits, the operation-complete pass converts threads whose shape is really gone, and\n * `afterCreate` plus that same pass restore the anchor once the store has settled. Undo/redo of a\n * move replays as a `parentId` update, so `afterChange` re-homes threads on cross-page reparents \u2014\n * including threads anchored to descendants, which move without change events of their own.\n *\n * Remote changes are ignored: the client that performed the operation runs this same maintenance\n * and syncs the result. Writes honour the {@link CommentingOptions.history} option.\n *\n * Registered by `CanvasComments` on mount; parts-built consumers can call this directly. Returns a\n * cleanup function that unregisters all handlers.\n *\n * @public\n */\nexport function registerCommentAnchorLifecycle(editor: Editor): () => void {\n\t// Pin positions snapshotted during the current operation: shape id -> (thread id -> pin page\n\t// point).\n\tconst pendingByShape = new Map<TLShapeId, Map<string, VecLike | null>>()\n\tconst convertedByShape = convertedByShapeCache.get(editor, () => new Map())\n\n\tfunction rehomeThread(thread: TLCommentThread, pageId: TLPageId, updates: TLCommentRecord[]) {\n\t\tupdates.push({ ...thread, pageId })\n\t\tfor (const comment of getComments(editor)) {\n\t\t\tif (comment.threadId === thread.id) updates.push({ ...comment, pageId })\n\t\t}\n\t}\n\n\tconst disposeBeforeDelete = editor.sideEffects.registerBeforeDeleteHandler(\n\t\t'shape',\n\t\t(shape, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tfor (const thread of getCommentThreads(editor)) {\n\t\t\t\tif (!isAnchoredToShape(thread, shape.id)) continue\n\t\t\t\tlet snapshot = pendingByShape.get(shape.id)\n\t\t\t\tif (!snapshot) {\n\t\t\t\t\tsnapshot = new Map()\n\t\t\t\t\tpendingByShape.set(shape.id, snapshot)\n\t\t\t\t}\n\t\t\t\t// Snapshot where the pin is drawn, not just the anchor point: imprecise shape pins render inset\n\t\t\t\t// toward the shape's centre, so without baking the inset in at the current zoom the pin would jump.\n\t\t\t\tlet point = anchorPagePoint(editor, thread.anchor)\n\t\t\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\t\t\tif (point && inset) {\n\t\t\t\t\tconst zoom = editor.getZoomLevel()\n\t\t\t\t\tpoint = { x: point.x + inset.x / zoom, y: point.y + inset.y / zoom }\n\t\t\t\t}\n\t\t\t\tsnapshot.set(thread.id, point)\n\t\t\t}\n\t\t}\n\t)\n\n\t// Shape ids from `convertedByShape` re-created during the current operation. Settled at operation\n\t// complete rather than in `afterCreate`: creation order within an operation is arbitrary, so a shape\n\t// can appear before its parent and not resolve an ancestor page yet.\n\tconst returnedShapeIds = new Set<TLShapeId>()\n\n\tconst disposeOperationComplete = editor.sideEffects.registerOperationCompleteHandler((source) => {\n\t\t// Only user-sourced handlers populate the maps and only local operations should settle\n\t\t// them; a remote operation completing leaves any (impossible-in-practice) leftovers for\n\t\t// the next local settle rather than judging them against remote state.\n\t\tif (source === 'remote') return\n\t\tif (pendingByShape.size === 0 && returnedShapeIds.size === 0) return\n\t\tconst settled = [...pendingByShape.entries()]\n\t\tpendingByShape.clear()\n\t\tconst returned = [...returnedShapeIds]\n\t\treturnedShapeIds.clear()\n\n\t\tconst updates: TLCommentRecord[] = []\n\t\tfor (const [shapeId, threadPoints] of settled) {\n\t\t\tif (editor.getShape(shapeId)) continue\n\t\t\tfor (const [threadId, point] of threadPoints) {\n\t\t\t\tif (!point) continue\n\t\t\t\tconst thread = getCommentRecord(editor, threadId)\n\t\t\t\tif (!thread || thread.typeName !== 'comment-thread') continue\n\t\t\t\tif (!isAnchoredToShape(thread, shapeId)) continue\n\t\t\t\tlet converted = convertedByShape.get(shapeId)\n\t\t\t\tif (!converted) {\n\t\t\t\t\tconverted = []\n\t\t\t\t\tconvertedByShape.set(shapeId, converted)\n\t\t\t\t}\n\t\t\t\tconverted.push({ threadId, anchor: thread.anchor, point })\n\t\t\t\tupdates.push({ ...thread, anchor: { type: 'point', x: point.x, y: point.y } })\n\t\t\t}\n\t\t}\n\n\t\tfor (const shapeId of returned) {\n\t\t\tconst shape = editor.getShape(shapeId)\n\t\t\tif (!shape) continue\n\t\t\tconst converted = convertedByShape.get(shapeId)\n\t\t\tif (!converted) continue\n\t\t\tconvertedByShape.delete(shapeId)\n\n\t\t\tconst pageId = editor.getAncestorPageId(shape)\n\t\t\tfor (const { threadId, anchor, point } of converted) {\n\t\t\t\tconst thread = getCommentRecord(editor, threadId)\n\t\t\t\tif (!thread || thread.typeName !== 'comment-thread') continue\n\t\t\t\t// Re-attach only threads still sitting exactly where the conversion left them \u2014 a\n\t\t\t\t// pin moved since then was placed deliberately, and that placement wins.\n\t\t\t\tconst current = thread.anchor\n\t\t\t\tif (current.type !== 'point' || current.x !== point.x || current.y !== point.y) {\n\t\t\t\t\tcontinue\n\t\t\t\t}\n\t\t\t\tif (!pageId || thread.pageId === pageId) {\n\t\t\t\t\tupdates.push({ ...thread, anchor })\n\t\t\t\t} else {\n\t\t\t\t\trehomeThread({ ...thread, anchor }, pageId, updates)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (updates.length > 0) {\n\t\t\tcommitCommentMutation(editor, ({ put }) => put(updates))\n\t\t}\n\t})\n\n\tconst disposeAfterCreate = editor.sideEffects.registerAfterCreateHandler(\n\t\t'shape',\n\t\t(shape, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tif (convertedByShape.has(shape.id)) returnedShapeIds.add(shape.id)\n\t\t}\n\t)\n\n\tconst disposeAfterChange = editor.sideEffects.registerAfterChangeHandler(\n\t\t'shape',\n\t\t(prev, next, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tif (prev.parentId === next.parentId) return\n\t\t\tconst pageId = editor.getAncestorPageId(next)\n\t\t\tif (!pageId) return\n\t\t\t// Descendants move with their parent without change events of their own.\n\t\t\tconst movedIds = editor.getShapeAndDescendantIds([next.id])\n\t\t\tconst updates: TLCommentRecord[] = []\n\t\t\tfor (const thread of getCommentThreads(editor)) {\n\t\t\t\tconst anchor = thread.anchor\n\t\t\t\tif (anchor.type !== 'shape') continue\n\t\t\t\tif (!movedIds.has(anchor.shapeId)) continue\n\t\t\t\tif (thread.pageId === pageId) continue\n\t\t\t\trehomeThread(thread, pageId, updates)\n\t\t\t}\n\t\t\tif (updates.length > 0) {\n\t\t\t\tcommitCommentMutation(editor, ({ put }) => put(updates))\n\t\t\t}\n\t\t}\n\t)\n\n\treturn () => {\n\t\tdisposeBeforeDelete()\n\t\tdisposeOperationComplete()\n\t\tdisposeAfterCreate()\n\t\tdisposeAfterChange()\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,aAAa,yBAA0C;AAClF,SAAS,iBAAiB,8BAA8B;AASxD,MAAM,wBAAwB,IAAI,UAGhC;AAEF,SAAS,kBACR,QACA,SACsD;AACtD,QAAM,SAAS,OAAO;AACtB,SAAO,OAAO,SAAS,WAAW,OAAO,YAAY;AACtD;AA4BO,SAAS,+BAA+B,QAA4B;AAG1E,QAAM,iBAAiB,oBAAI,IAA4C;AACvE,QAAM,mBAAmB,sBAAsB,IAAI,QAAQ,MAAM,oBAAI,IAAI,CAAC;AAE1E,WAAS,aAAa,QAAyB,QAAkB,SAA4B;AAC5F,YAAQ,KAAK,EAAE,GAAG,QAAQ,OAAO,CAAC;AAClC,eAAW,WAAW,YAAY,MAAM,GAAG;AAC1C,UAAI,QAAQ,aAAa,OAAO,GAAI,SAAQ,KAAK,EAAE,GAAG,SAAS,OAAO,CAAC;AAAA,IACxE;AAAA,EACD;AAEA,QAAM,sBAAsB,OAAO,YAAY;AAAA,IAC9C;AAAA,IACA,CAAC,OAAO,WAAW;AAClB,UAAI,WAAW,SAAU;AACzB,iBAAW,UAAU,kBAAkB,MAAM,GAAG;AAC/C,YAAI,CAAC,kBAAkB,QAAQ,MAAM,EAAE,EAAG;AAC1C,YAAI,WAAW,eAAe,IAAI,MAAM,EAAE;AAC1C,YAAI,CAAC,UAAU;AACd,qBAAW,oBAAI,IAAI;AACnB,yBAAe,IAAI,MAAM,IAAI,QAAQ;AAAA,QACtC;AAGA,YAAI,QAAQ,gBAAgB,QAAQ,OAAO,MAAM;AACjD,cAAM,QAAQ,uBAAuB,QAAQ,OAAO,MAAM;AAC1D,YAAI,SAAS,OAAO;AACnB,gBAAM,OAAO,OAAO,aAAa;AACjC,kBAAQ,EAAE,GAAG,MAAM,IAAI,MAAM,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,IAAI,KAAK;AAAA,QACpE;AACA,iBAAS,IAAI,OAAO,IAAI,KAAK;AAAA,MAC9B;AAAA,IACD;AAAA,EACD;AAKA,QAAM,mBAAmB,oBAAI,IAAe;AAE5C,QAAM,2BAA2B,OAAO,YAAY,iCAAiC,CAAC,WAAW;AAIhG,QAAI,WAAW,SAAU;AACzB,QAAI,eAAe,SAAS,KAAK,iBAAiB,SAAS,EAAG;AAC9D,UAAM,UAAU,CAAC,GAAG,eAAe,QAAQ,CAAC;AAC5C,mBAAe,MAAM;AACrB,UAAM,WAAW,CAAC,GAAG,gBAAgB;AACrC,qBAAiB,MAAM;AAEvB,UAAM,UAA6B,CAAC;AACpC,eAAW,CAAC,SAAS,YAAY,KAAK,SAAS;AAC9C,UAAI,OAAO,SAAS,OAAO,EAAG;AAC9B,iBAAW,CAAC,UAAU,KAAK,KAAK,cAAc;AAC7C,YAAI,CAAC,MAAO;AACZ,cAAM,SAAS,iBAAiB,QAAQ,QAAQ;AAChD,YAAI,CAAC,UAAU,OAAO,aAAa,iBAAkB;AACrD,YAAI,CAAC,kBAAkB,QAAQ,OAAO,EAAG;AACzC,YAAI,YAAY,iBAAiB,IAAI,OAAO;AAC5C,YAAI,CAAC,WAAW;AACf,sBAAY,CAAC;AACb,2BAAiB,IAAI,SAAS,SAAS;AAAA,QACxC;AACA,kBAAU,KAAK,EAAE,UAAU,QAAQ,OAAO,QAAQ,MAAM,CAAC;AACzD,gBAAQ,KAAK,EAAE,GAAG,QAAQ,QAAQ,EAAE,MAAM,SAAS,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE,EAAE,CAAC;AAAA,MAC9E;AAAA,IACD;AAEA,eAAW,WAAW,UAAU;AAC/B,YAAM,QAAQ,OAAO,SAAS,OAAO;AACrC,UAAI,CAAC,MAAO;AACZ,YAAM,YAAY,iBAAiB,IAAI,OAAO;AAC9C,UAAI,CAAC,UAAW;AAChB,uBAAiB,OAAO,OAAO;AAE/B,YAAM,SAAS,OAAO,kBAAkB,KAAK;AAC7C,iBAAW,EAAE,UAAU,QAAQ,MAAM,KAAK,WAAW;AACpD,cAAM,SAAS,iBAAiB,QAAQ,QAAQ;AAChD,YAAI,CAAC,UAAU,OAAO,aAAa,iBAAkB;AAGrD,cAAM,UAAU,OAAO;AACvB,YAAI,QAAQ,SAAS,WAAW,QAAQ,MAAM,MAAM,KAAK,QAAQ,MAAM,MAAM,GAAG;AAC/E;AAAA,QACD;AACA,YAAI,CAAC,UAAU,OAAO,WAAW,QAAQ;AACxC,kBAAQ,KAAK,EAAE,GAAG,QAAQ,OAAO,CAAC;AAAA,QACnC,OAAO;AACN,uBAAa,EAAE,GAAG,QAAQ,OAAO,GAAG,QAAQ,OAAO;AAAA,QACpD;AAAA,MACD;AAAA,IACD;AAEA,QAAI,QAAQ,SAAS,GAAG;AACvB,4BAAsB,QAAQ,CAAC,EAAE,IAAI,MAAM,IAAI,OAAO,CAAC;AAAA,IACxD;AAAA,EACD,CAAC;AAED,QAAM,qBAAqB,OAAO,YAAY;AAAA,IAC7C;AAAA,IACA,CAAC,OAAO,WAAW;AAClB,UAAI,WAAW,SAAU;AACzB,UAAI,iBAAiB,IAAI,MAAM,EAAE,EAAG,kBAAiB,IAAI,MAAM,EAAE;AAAA,IAClE;AAAA,EACD;AAEA,QAAM,qBAAqB,OAAO,YAAY;AAAA,IAC7C;AAAA,IACA,CAAC,MAAM,MAAM,WAAW;AACvB,UAAI,WAAW,SAAU;AACzB,UAAI,KAAK,aAAa,KAAK,SAAU;AACrC,YAAM,SAAS,OAAO,kBAAkB,IAAI;AAC5C,UAAI,CAAC,OAAQ;AAEb,YAAM,WAAW,OAAO,yBAAyB,CAAC,KAAK,EAAE,CAAC;AAC1D,YAAM,UAA6B,CAAC;AACpC,iBAAW,UAAU,kBAAkB,MAAM,GAAG;AAC/C,cAAM,SAAS,OAAO;AACtB,YAAI,OAAO,SAAS,QAAS;AAC7B,YAAI,CAAC,SAAS,IAAI,OAAO,OAAO,EAAG;AACnC,YAAI,OAAO,WAAW,OAAQ;AAC9B,qBAAa,QAAQ,QAAQ,OAAO;AAAA,MACrC;AACA,UAAI,QAAQ,SAAS,GAAG;AACvB,8BAAsB,QAAQ,CAAC,EAAE,IAAI,MAAM,IAAI,OAAO,CAAC;AAAA,MACxD;AAAA,IACD;AAAA,EACD;AAEA,SAAO,MAAM;AACZ,wBAAoB;AACpB,6BAAyB;AACzB,uBAAmB;AACnB,uBAAmB;AAAA,EACpB;AACD;",
+  "names": []
+}

package/dist-esm/canvas/canvas-events.mjs

@@ -0,0 +1,15 @@
+function isCanvasPanGesture(editor, e) {
+  return e.button !== 0 || editor.inputs.keys.has("Space");
+}
+function forwardPointerEventToCanvas(container, e) {
+  const cvs = container.querySelector(".tl-canvas");
+  if (!cvs) return;
+  const newEvent = new PointerEvent(e.type, e.nativeEvent);
+  newEvent.isSpecialRedispatchedEvent = true;
+  cvs.dispatchEvent(newEvent);
+}
+export {
+  forwardPointerEventToCanvas,
+  isCanvasPanGesture
+};
+//# sourceMappingURL=canvas-events.mjs.map

package/dist-esm/canvas/canvas-events.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/canvas-events.ts"],
+  "sourcesContent": ["import { type PointerEvent as ReactPointerEvent } from 'react'\nimport { Editor } from 'tldraw'\n\n/** A pointer-down that belongs to the camera, not the comment UI: any non-primary button\n *  (middle/right-button pans), or a primary press with the spacebar pan key held. */\nexport function isCanvasPanGesture(editor: Editor, e: ReactPointerEvent) {\n\treturn e.button !== 0 || editor.inputs.keys.has('Space')\n}\n\n/** Hand a pointer event to the canvas beneath the comments layer, marked the same way the\n *  pass-through wheel/hover hooks mark their re-dispatched events. */\nexport function forwardPointerEventToCanvas(container: HTMLElement, e: ReactPointerEvent) {\n\tconst cvs = container.querySelector('.tl-canvas')\n\tif (!cvs) return\n\tconst newEvent = new PointerEvent(e.type, e.nativeEvent as any)\n\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\tcvs.dispatchEvent(newEvent)\n}\n"],
+  "mappings": "AAKO,SAAS,mBAAmB,QAAgB,GAAsB;AACxE,SAAO,EAAE,WAAW,KAAK,OAAO,OAAO,KAAK,IAAI,OAAO;AACxD;AAIO,SAAS,4BAA4B,WAAwB,GAAsB;AACzF,QAAM,MAAM,UAAU,cAAc,YAAY;AAChD,MAAI,CAAC,IAAK;AACV,QAAM,WAAW,IAAI,aAAa,EAAE,MAAM,EAAE,WAAkB;AAC7D,EAAC,SAAiB,6BAA6B;AAChD,MAAI,cAAc,QAAQ;AAC3B;",
+  "names": []
+}