@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.1640468db8fd

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

@@ -22,7 +22,6 @@ __export(comment_composer_exports, {
 });
 module.exports = __toCommonJS(comment_composer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_core = require("@tiptap/core");
 var import_react = require("@tiptap/react");
 var import_react2 = require("react");
 var import_tldraw = require("tldraw");
@@ -57,26 +56,48 @@ function CommentComposer({
   const renderMentionSuggestionRef = (0, import_react2.useRef)(renderMentionSuggestion);
   renderMentionSuggestionRef.current = renderMentionSuggestion;
   const [isEmpty, setIsEmpty] = (0, import_react2.useState)(() => !value || (0, import_comment_extensions.isCommentEmpty)(value));
-  const submitExtension = (0, import_react2.useMemo)(
-    () => import_core.Extension.create({
-      name: "commentComposerSubmit",
-      priority: 1e3,
-      addKeyboardShortcuts() {
-        return {
-          Enter: () => {
-            if ((0, import_mention_suggestion.isMentionPickerOpen)()) return false;
-            if (!disabledRef.current) onSubmitRef.current?.();
-            return true;
-          }
-        };
-      }
-    }),
-    []
-  );
+  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  const expandedRef = (0, import_react2.useRef)(expanded);
+  expandedRef.current = expanded;
+  const inputWrapRef = (0, import_react2.useRef)(null);
+  const mirrorRef = (0, import_react2.useRef)(null);
+  const remeasure = () => {
+    const wrap = inputWrapRef.current;
+    const mirror = mirrorRef.current;
+    const editor2 = editorRef.current;
+    if (!wrap || !mirror || !editor2) return;
+    if (editor2.isEmpty) {
+      if (expandedRef.current) setExpanded(false);
+      return;
+    }
+    if (wrap.clientWidth === 0) return;
+    const doc = editor2.state.doc;
+    const multiBlock = doc.childCount > 1 || doc.firstChild !== null && doc.firstChild.type.name !== "paragraph";
+    if (multiBlock) {
+      if (!expandedRef.current) setExpanded(true);
+      return;
+    }
+    const field = wrap.parentElement;
+    const send = field ? field.querySelector(".tlui-cmt-send") : null;
+    const input = wrap.querySelector(".tlui-cmt-input");
+    if (!send || !input) return;
+    mirror.innerHTML = input.innerHTML;
+    const textWidth = mirror.offsetWidth;
+    const collapsedAvailable = wrap.clientWidth - (expandedRef.current ? send.offsetWidth + 6 : 0);
+    if (!expandedRef.current && textWidth > collapsedAvailable - 8) {
+      setExpanded(true);
+    } else if (expandedRef.current && textWidth < collapsedAvailable - 24) {
+      setExpanded(false);
+    }
+  };
+  const remeasureRef = (0, import_react2.useRef)(remeasure);
+  remeasureRef.current = remeasure;
+  const editorRef = (0, import_react2.useRef)(null);
+  const replayingEnter = (0, import_react2.useRef)(false);
   const mentionsEnabled = !!getMentionSuggestions;
   const hasCustomRow = !!renderMentionSuggestion;
   const extensions = (0, import_react2.useMemo)(() => {
-    const list = [...import_comment_extensions.commentTipTapExtensions, submitExtension];
+    const list = [...import_comment_extensions.commentTipTapExtensions];
     if (mentionsEnabled) {
       const resolveSuggestions = (query) => getMentionSuggestionsRef.current?.(query) ?? [];
       const renderRow = hasCustomRow ? (member) => renderMentionSuggestionRef.current?.(member) : void 0;
@@ -92,7 +113,7 @@ function CommentComposer({
       list.push((0, import_comment_mention.commentMention)({ suggestion: { char: "@", allow: () => false } }));
     }
     return list;
-  }, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor]);
+  }, [mentionsEnabled, hasCustomRow, tlEditor]);
   const editor = (0, import_react.useEditor)(
     {
       extensions,
@@ -103,34 +124,76 @@ function CommentComposer({
       // mirrors RichTextArea's setup.
       enableCoreExtensions: { textDirection: false },
       textDirection: "auto",
-      editorProps: { attributes: { class: "cmt-input" } },
+      editorProps: {
+        attributes: { class: "tlui-cmt-input" },
+        // Runs before every keymap plugin, so it can distinguish Shift+Enter from Enter — an
+        // `Enter` keymap binding also fires on Shift+Enter and would otherwise swallow it.
+        handleKeyDown: (_view, event) => {
+          if (replayingEnter.current) return false;
+          if (event.key !== "Enter" || event.isComposing) return false;
+          if ((0, import_mention_suggestion.isMentionPickerOpen)()) return false;
+          if (event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+            replayingEnter.current = true;
+            try {
+              editorRef.current?.commands.enter();
+            } finally {
+              replayingEnter.current = false;
+            }
+            return true;
+          }
+          if (!disabledRef.current) onSubmitRef.current?.();
+          return true;
+        }
+      },
       onUpdate: ({ editor: editor2 }) => {
         setIsEmpty(editor2.isEmpty);
+        remeasureRef.current();
         onChangeRef.current?.(editor2.getJSON());
       }
     },
     [interactive]
   );
+  editorRef.current = editor;
   (0, import_react2.useEffect)(() => {
     if (!editor || value === void 0) return;
     if ((0, import_tldraw.isEqual)(editor.getJSON(), value)) return;
     editor.commands.setContent(value);
     setIsEmpty(editor.isEmpty);
   }, [editor, value]);
+  (0, import_react2.useLayoutEffect)(() => {
+    remeasureRef.current();
+  }, [editor, value]);
   (0, import_react2.useEffect)(() => {
     if (!autoFocus || !editor) return;
     const raf = requestAnimationFrame(() => editor.commands.focus("end"));
     return () => cancelAnimationFrame(raf);
   }, [autoFocus, editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-composer", children: [
-    leading ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { name: author }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-composer__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-composer__input-wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EditorContent, { editor }),
-        isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-input__placeholder", "aria-hidden": "true", children: placeholder })
-      ] }),
-      interactive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_send_button.SendButton, { label: sendLabel, onClick: onSubmit, disabled })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-composer", children: [
+    leading ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { author }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: [
+          "tlui-cmt-composer__field",
+          interactive && expanded && "tlui-cmt-composer__field--expanded"
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-composer__input-wrap", ref: inputWrapRef, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EditorContent, { editor }),
+            isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-input__placeholder", "aria-hidden": "true", children: placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "tlui-cmt-composer__mirror tlui-cmt-input",
+                ref: mirrorRef,
+                "aria-hidden": "true"
+              }
+            )
+          ] }),
+          interactive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_send_button.SendButton, { label: sendLabel, onClick: onSubmit, disabled })
+        ]
+      }
+    )
   ] });
 }
 //# sourceMappingURL=comment-composer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/comment-composer.tsx"],
-  "sourcesContent": ["import { Extension, JSONContent } from '@tiptap/core'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport { ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { isEqual, TLRichText, useMaybeEditor } from 'tldraw'\nimport { Avatar } from './avatar'\nimport { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from './comment-extensions'\nimport { commentMention } from './comment-mention'\nimport { MentionMember } from './mention-list'\nimport { createMentionSuggestion, isMentionPickerOpen } from './mention-suggestion'\nimport { SendButton } from './send-button'\n\n/** @public */\nexport interface CommentComposerProps {\n\tauthor: string\n\tplaceholder: string\n\t/** Controlled rich-text value. Omit for the presentational (display-only) composer. */\n\tvalue?: TLRichText\n\tonChange?(value: TLRichText): void\n\t/** Called on Send click or Enter. When set, the composer is interactive. */\n\tonSubmit?(): void\n\tsendLabel?: string\n\tdisabled?: boolean\n\tautoFocus?: boolean\n\t/** The leading element before the field. Defaults to the author's avatar. */\n\tleading?: ReactNode\n\t/** Resolve the members matching an `@`-query (sync or async). Provide to enable mentions. */\n\tgetMentionSuggestions?(query: string): MentionMember[] | Promise<MentionMember[]>\n\t/** Override a picker row's content. Defaults to avatar + name (+ secondary). */\n\trenderMentionSuggestion?(member: MentionMember): ReactNode\n}\n\n/**\n * The input for writing a comment: a TipTap rich-text editor restricted to the comment extension\n * set (bold, italic, lists, links, code, highlight \u2014 no headings), with a Send button. Formatting\n * is applied through markdown and keyboard shortcuts (e.g. `**bold**`, `- `, Cmd+B); there's no\n * floating toolbar. Presentational by default; pass value/onChange/onSubmit to drive it as a form.\n * @public @react\n */\nexport function CommentComposer({\n\tauthor,\n\tplaceholder,\n\tvalue,\n\tonChange,\n\tonSubmit,\n\tsendLabel = 'Send',\n\tdisabled,\n\tautoFocus,\n\tleading,\n\tgetMentionSuggestions,\n\trenderMentionSuggestion,\n}: CommentComposerProps) {\n\tconst interactive = !!onChange || !!onSubmit\n\t// The canvas editor the composer lives in, if any \u2014 lets the mention popup track the camera. Null\n\t// when the composer is used outside a tldraw editor (e.g. an isolated demo).\n\tconst tlEditor = useMaybeEditor()\n\n\t// Callbacks are read through refs so the editor instance doesn't need to be recreated when they\n\t// change identity between renders.\n\tconst onChangeRef = useRef(onChange)\n\tonChangeRef.current = onChange\n\tconst onSubmitRef = useRef(onSubmit)\n\tonSubmitRef.current = onSubmit\n\tconst disabledRef = useRef(disabled)\n\tdisabledRef.current = disabled\n\tconst getMentionSuggestionsRef = useRef(getMentionSuggestions)\n\tgetMentionSuggestionsRef.current = getMentionSuggestions\n\tconst renderMentionSuggestionRef = useRef(renderMentionSuggestion)\n\trenderMentionSuggestionRef.current = renderMentionSuggestion\n\n\tconst [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value))\n\n\t// Enter submits the comment. Shift+Enter (and Cmd/Ctrl+Enter) keep their default behavior \u2014 a\n\t// new line \u2014 for the occasional multi-line comment.\n\tconst submitExtension = useMemo(\n\t\t() =>\n\t\t\tExtension.create({\n\t\t\t\tname: 'commentComposerSubmit',\n\t\t\t\tpriority: 1000,\n\t\t\t\taddKeyboardShortcuts() {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tEnter: () => {\n\t\t\t\t\t\t\t// While the @-mention picker is open, Enter selects the highlighted member.\n\t\t\t\t\t\t\t// This extension outranks the mention plugin (priority 1000), so defer to the\n\t\t\t\t\t\t\t// picker here or Enter would submit before the member could be inserted.\n\t\t\t\t\t\t\tif (isMentionPickerOpen()) return false\n\t\t\t\t\t\t\tif (!disabledRef.current) onSubmitRef.current?.()\n\t\t\t\t\t\t\treturn true\n\t\t\t\t\t\t},\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t}),\n\t\t[]\n\t)\n\n\t// The suggestion plugin is built once (the editor is recreated only on `interactive`) and runs\n\t// outside React, so it must read the mention callbacks through refs \u2014 like onChange/onSubmit \u2014\n\t// or it queries the roster present at mount forever, never seeing a member who loads or joins\n\t// later. Whether mentions (and a custom picker row) are wired at all is fixed at mount; only the\n\t// callbacks themselves are live.\n\tconst mentionsEnabled = !!getMentionSuggestions\n\tconst hasCustomRow = !!renderMentionSuggestion\n\tconst extensions = useMemo(() => {\n\t\tconst list = [...commentTipTapExtensions, submitExtension]\n\t\t// Always register the mention node so an existing body that contains a mention keeps it on\n\t\t// edit (an unregistered node would be stripped by ProseMirror when the content loads). The `@`\n\t\t// picker itself only turns on when the host provides a resolver; otherwise the node is present\n\t\t// but its trigger is disabled.\n\t\tif (mentionsEnabled) {\n\t\t\tconst resolveSuggestions = (query: string) => getMentionSuggestionsRef.current?.(query) ?? []\n\t\t\tconst renderRow = hasCustomRow\n\t\t\t\t? (member: MentionMember) => renderMentionSuggestionRef.current?.(member)\n\t\t\t\t: undefined\n\t\t\tlist.push(\n\t\t\t\tcommentMention({\n\t\t\t\t\tsuggestion: createMentionSuggestion(resolveSuggestions, {\n\t\t\t\t\t\trenderMember: renderRow,\n\t\t\t\t\t\teditor: tlEditor,\n\t\t\t\t\t}),\n\t\t\t\t})\n\t\t\t)\n\t\t} else {\n\t\t\tlist.push(commentMention({ suggestion: { char: '@', allow: () => false } }))\n\t\t}\n\t\treturn list\n\t}, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor])\n\n\tconst editor = useEditor(\n\t\t{\n\t\t\textensions,\n\t\t\tcontent: (value ?? EMPTY_COMMENT) as JSONContent,\n\t\t\teditable: interactive,\n\t\t\t// tldraw's default extensions add their own TextDirection extension (so it can be\n\t\t\t// overridden), so disable TipTap's core one to avoid a duplicate-extension warning \u2014\n\t\t\t// mirrors RichTextArea's setup.\n\t\t\tenableCoreExtensions: { textDirection: false },\n\t\t\ttextDirection: 'auto',\n\t\t\teditorProps: { attributes: { class: 'cmt-input' } },\n\t\t\tonUpdate: ({ editor }) => {\n\t\t\t\tsetIsEmpty(editor.isEmpty)\n\t\t\t\tonChangeRef.current?.(editor.getJSON() as TLRichText)\n\t\t\t},\n\t\t},\n\t\t[interactive]\n\t)\n\n\t// Sync controlled resets (e.g. the parent clearing to EMPTY_COMMENT after posting) into the\n\t// editor without echoing back the value the editor itself just emitted.\n\tuseEffect(() => {\n\t\tif (!editor || value === undefined) return\n\t\tif (isEqual(editor.getJSON(), value)) return\n\t\teditor.commands.setContent(value as JSONContent)\n\t\tsetIsEmpty(editor.isEmpty)\n\t}, [editor, value])\n\n\t// Focus on the next frame rather than via TipTap's autofocus: the composer often mounts from a\n\t// canvas pointer event whose default focus handling would otherwise steal it back.\n\tuseEffect(() => {\n\t\tif (!autoFocus || !editor) return\n\t\tconst raf = requestAnimationFrame(() => editor.commands.focus('end'))\n\t\treturn () => cancelAnimationFrame(raf)\n\t}, [autoFocus, editor])\n\n\treturn (\n\t\t<div className=\"cmt-composer\">\n\t\t\t{leading ?? <Avatar name={author} />}\n\t\t\t<div className=\"cmt-composer__field\">\n\t\t\t\t<div className=\"cmt-composer__input-wrap\">\n\t\t\t\t\t<EditorContent editor={editor} />\n\t\t\t\t\t{isEmpty && (\n\t\t\t\t\t\t<div className=\"cmt-input__placeholder\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{interactive && <SendButton label={sendLabel} onClick={onSubmit} disabled={disabled} />}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoKe;AApKf,kBAAuC;AACvC,mBAAyC;AACzC,IAAAA,gBAAgE;AAChE,oBAAoD;AACpD,oBAAuB;AACvB,gCAAuE;AACvE,6BAA+B;AAE/B,gCAA6D;AAC7D,yBAA2B;AA6BpB,SAAS,gBAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC;AAGpC,QAAM,eAAW,8BAAe;AAIhC,QAAM,kBAAc,sBAAO,QAAQ;AACnC,cAAY,UAAU;AACtB,QAAM,kBAAc,sBAAO,QAAQ;AACnC,cAAY,UAAU;AACtB,QAAM,kBAAc,sBAAO,QAAQ;AACnC,cAAY,UAAU;AACtB,QAAM,+BAA2B,sBAAO,qBAAqB;AAC7D,2BAAyB,UAAU;AACnC,QAAM,iCAA6B,sBAAO,uBAAuB;AACjE,6BAA2B,UAAU;AAErC,QAAM,CAAC,SAAS,UAAU,QAAI,wBAAS,MAAM,CAAC,aAAS,0CAAe,KAAK,CAAC;AAI5E,QAAM,sBAAkB;AAAA,IACvB,MACC,sBAAU,OAAO;AAAA,MAChB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,uBAAuB;AACtB,eAAO;AAAA,UACN,OAAO,MAAM;AAIZ,oBAAI,+CAAoB,EAAG,QAAO;AAClC,gBAAI,CAAC,YAAY,QAAS,aAAY,UAAU;AAChD,mBAAO;AAAA,UACR;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAC;AAAA,IACF,CAAC;AAAA,EACF;AAOA,QAAM,kBAAkB,CAAC,CAAC;AAC1B,QAAM,eAAe,CAAC,CAAC;AACvB,QAAM,iBAAa,uBAAQ,MAAM;AAChC,UAAM,OAAO,CAAC,GAAG,mDAAyB,eAAe;AAKzD,QAAI,iBAAiB;AACpB,YAAM,qBAAqB,CAAC,UAAkB,yBAAyB,UAAU,KAAK,KAAK,CAAC;AAC5F,YAAM,YAAY,eACf,CAAC,WAA0B,2BAA2B,UAAU,MAAM,IACtE;AACH,WAAK;AAAA,YACJ,uCAAe;AAAA,UACd,gBAAY,mDAAwB,oBAAoB;AAAA,YACvD,cAAc;AAAA,YACd,QAAQ;AAAA,UACT,CAAC;AAAA,QACF,CAAC;AAAA,MACF;AAAA,IACD,OAAO;AACN,WAAK,SAAK,uCAAe,EAAE,YAAY,EAAE,MAAM,KAAK,OAAO,MAAM,MAAM,EAAE,CAAC,CAAC;AAAA,IAC5E;AACA,WAAO;AAAA,EACR,GAAG,CAAC,iBAAiB,iBAAiB,cAAc,QAAQ,CAAC;AAE7D,QAAM,aAAS;AAAA,IACd;AAAA,MACC;AAAA,MACA,SAAU,SAAS;AAAA,MACnB,UAAU;AAAA;AAAA;AAAA;AAAA,MAIV,sBAAsB,EAAE,eAAe,MAAM;AAAA,MAC7C,eAAe;AAAA,MACf,aAAa,EAAE,YAAY,EAAE,OAAO,YAAY,EAAE;AAAA,MAClD,UAAU,CAAC,EAAE,QAAAC,QAAO,MAAM;AACzB,mBAAWA,QAAO,OAAO;AACzB,oBAAY,UAAUA,QAAO,QAAQ,CAAe;AAAA,MACrD;AAAA,IACD;AAAA,IACA,CAAC,WAAW;AAAA,EACb;AAIA,+BAAU,MAAM;AACf,QAAI,CAAC,UAAU,UAAU,OAAW;AACpC,YAAI,uBAAQ,OAAO,QAAQ,GAAG,KAAK,EAAG;AACtC,WAAO,SAAS,WAAW,KAAoB;AAC/C,eAAW,OAAO,OAAO;AAAA,EAC1B,GAAG,CAAC,QAAQ,KAAK,CAAC;AAIlB,+BAAU,MAAM;AACf,QAAI,CAAC,aAAa,CAAC,OAAQ;AAC3B,UAAM,MAAM,sBAAsB,MAAM,OAAO,SAAS,MAAM,KAAK,CAAC;AACpE,WAAO,MAAM,qBAAqB,GAAG;AAAA,EACtC,GAAG,CAAC,WAAW,MAAM,CAAC;AAEtB,SACC,6CAAC,SAAI,WAAU,gBACb;AAAA,eAAW,4CAAC,wBAAO,MAAM,QAAQ;AAAA,IAClC,6CAAC,SAAI,WAAU,uBACd;AAAA,mDAAC,SAAI,WAAU,4BACd;AAAA,oDAAC,8BAAc,QAAgB;AAAA,QAC9B,WACA,4CAAC,SAAI,WAAU,0BAAyB,eAAY,QAClD,uBACF;AAAA,SAEF;AAAA,MACC,eAAe,4CAAC,iCAAW,OAAO,WAAW,SAAS,UAAU,UAAoB;AAAA,OACtF;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { JSONContent } from '@tiptap/core'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport { ReactNode, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { isEqual, TLRichText, useMaybeEditor } from 'tldraw'\nimport { Avatar } from './avatar'\nimport { CommentAuthor } from './comment-author'\nimport { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from './comment-extensions'\nimport { commentMention } from './comment-mention'\nimport { MentionMember } from './mention-list'\nimport { createMentionSuggestion, isMentionPickerOpen } from './mention-suggestion'\nimport { SendButton } from './send-button'\n\n/** @public */\nexport interface CommentComposerProps {\n\tauthor: CommentAuthor\n\tplaceholder: string\n\t/** Controlled rich-text value. Omit for the presentational (display-only) composer. */\n\tvalue?: TLRichText\n\tonChange?(value: TLRichText): void\n\t/** Called on Send click or Enter. When set, the composer is interactive. */\n\tonSubmit?(): void\n\tsendLabel?: string\n\tdisabled?: boolean\n\tautoFocus?: boolean\n\t/** The leading element before the field. Defaults to the author's avatar. */\n\tleading?: ReactNode\n\t/** Resolve the members matching an `@`-query (sync or async). Provide to enable mentions. */\n\tgetMentionSuggestions?(query: string): MentionMember[] | Promise<MentionMember[]>\n\t/** Override a picker row's content. Defaults to avatar + name (+ secondary). */\n\trenderMentionSuggestion?(member: MentionMember): ReactNode\n}\n\n/**\n * The input for writing a comment: a TipTap rich-text editor restricted to the comment extension\n * set (bold, italic, lists, links, code, highlight \u2014 no headings), with a Send button. Formatting\n * is applied through markdown and keyboard shortcuts (e.g. `**bold**`, `- `, Cmd+B); there's no\n * floating toolbar. Presentational by default; pass value/onChange/onSubmit to drive it as a form.\n * @public @react\n */\nexport function CommentComposer({\n\tauthor,\n\tplaceholder,\n\tvalue,\n\tonChange,\n\tonSubmit,\n\tsendLabel = 'Send',\n\tdisabled,\n\tautoFocus,\n\tleading,\n\tgetMentionSuggestions,\n\trenderMentionSuggestion,\n}: CommentComposerProps) {\n\tconst interactive = !!onChange || !!onSubmit\n\t// The canvas editor the composer lives in, if any \u2014 lets the mention popup track the camera. Null\n\t// when the composer is used outside a tldraw editor (e.g. an isolated demo).\n\tconst tlEditor = useMaybeEditor()\n\n\t// Callbacks are read through refs so the editor instance doesn't need to be recreated when they\n\t// change identity between renders.\n\tconst onChangeRef = useRef(onChange)\n\tonChangeRef.current = onChange\n\tconst onSubmitRef = useRef(onSubmit)\n\tonSubmitRef.current = onSubmit\n\tconst disabledRef = useRef(disabled)\n\tdisabledRef.current = disabled\n\tconst getMentionSuggestionsRef = useRef(getMentionSuggestions)\n\tgetMentionSuggestionsRef.current = getMentionSuggestions\n\tconst renderMentionSuggestionRef = useRef(renderMentionSuggestion)\n\trenderMentionSuggestionRef.current = renderMentionSuggestion\n\n\tconst [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value))\n\t// Whether the field has grown to two rows: input across the full width, send button below.\n\t// Flips when the (single-line) content width reaches the space left beside the send button.\n\tconst [expanded, setExpanded] = useState(false)\n\tconst expandedRef = useRef(expanded)\n\texpandedRef.current = expanded\n\tconst inputWrapRef = useRef<HTMLDivElement>(null)\n\tconst mirrorRef = useRef<HTMLDivElement>(null)\n\n\t// Measure whether the content still fits on one line beside the send button. The mirror is a\n\t// hidden, nowrap clone of the editor's rendered content, so marks and mention chips measure at\n\t// their true width. A small dead zone between the expand and collapse thresholds keeps the\n\t// layout from flapping while typing at the boundary.\n\tconst remeasure = () => {\n\t\tconst wrap = inputWrapRef.current\n\t\tconst mirror = mirrorRef.current\n\t\tconst editor = editorRef.current\n\t\tif (!wrap || !mirror || !editor) return\n\t\t// Empty always fits \u2014 and measuring before TipTap's DOM has laid out reads zero widths,\n\t\t// which would flash the expanded layout for a frame on mount.\n\t\tif (editor.isEmpty) {\n\t\t\tif (expandedRef.current) setExpanded(false)\n\t\t\treturn\n\t\t}\n\t\tif (wrap.clientWidth === 0) return\n\t\tconst doc = editor.state.doc\n\t\tconst multiBlock =\n\t\t\tdoc.childCount > 1 || (doc.firstChild !== null && doc.firstChild.type.name !== 'paragraph')\n\t\tif (multiBlock) {\n\t\t\tif (!expandedRef.current) setExpanded(true)\n\t\t\treturn\n\t\t}\n\t\tconst field = wrap.parentElement\n\t\tconst send = field ? field.querySelector<HTMLElement>('.tlui-cmt-send') : null\n\t\tconst input = wrap.querySelector('.tlui-cmt-input')\n\t\tif (!send || !input) return\n\t\tmirror.innerHTML = input.innerHTML\n\t\tconst textWidth = mirror.offsetWidth\n\t\t// The single-line space the input has beside the send button: when already expanded the\n\t\t// wrap spans the full field, so subtract the button (plus the field's 6px gap) back out.\n\t\tconst collapsedAvailable = wrap.clientWidth - (expandedRef.current ? send.offsetWidth + 6 : 0)\n\t\tif (!expandedRef.current && textWidth > collapsedAvailable - 8) {\n\t\t\tsetExpanded(true)\n\t\t} else if (expandedRef.current && textWidth < collapsedAvailable - 24) {\n\t\t\tsetExpanded(false)\n\t\t}\n\t}\n\tconst remeasureRef = useRef(remeasure)\n\tremeasureRef.current = remeasure\n\n\t// The editor instance, reachable from `handleKeyDown` (which is created before `useEditor`\n\t// returns). Updated on every render so the ref never points at a stale editor.\n\tconst editorRef = useRef<ReturnType<typeof useEditor>>(null)\n\n\t// Set while we replay Enter through the keymaps for a Shift+Enter newline: `commands.enter()`\n\t// re-dispatches Enter through `handleKeyDown`, and without this guard our own handler would catch\n\t// that synthetic Enter and submit instead.\n\tconst replayingEnter = useRef(false)\n\n\t// Enter and Cmd/Ctrl+Enter submit the comment; Shift+Enter inserts a new line for the occasional\n\t// multi-line comment. This is handled through `editorProps.handleKeyDown` (below) rather than a\n\t// keyboard-shortcut extension: ProseMirror runs `handleKeyDown` before every keymap plugin, so it\n\t// can tell Shift+Enter apart from Enter \u2014 an `Enter` keymap binding also fires on Shift/Cmd+Enter\n\t// and would otherwise swallow the newline.\n\n\t// The suggestion plugin is built once (the editor is recreated only on `interactive`) and runs\n\t// outside React, so it must read the mention callbacks through refs \u2014 like onChange/onSubmit \u2014\n\t// or it queries the roster present at mount forever, never seeing a member who loads or joins\n\t// later. Whether mentions (and a custom picker row) are wired at all is fixed at mount; only the\n\t// callbacks themselves are live.\n\tconst mentionsEnabled = !!getMentionSuggestions\n\tconst hasCustomRow = !!renderMentionSuggestion\n\tconst extensions = useMemo(() => {\n\t\tconst list = [...commentTipTapExtensions]\n\t\t// Always register the mention node so an existing body that contains a mention keeps it on\n\t\t// edit (an unregistered node would be stripped by ProseMirror when the content loads). The `@`\n\t\t// picker itself only turns on when the host provides a resolver; otherwise the node is present\n\t\t// but its trigger is disabled.\n\t\tif (mentionsEnabled) {\n\t\t\tconst resolveSuggestions = (query: string) => getMentionSuggestionsRef.current?.(query) ?? []\n\t\t\tconst renderRow = hasCustomRow\n\t\t\t\t? (member: MentionMember) => renderMentionSuggestionRef.current?.(member)\n\t\t\t\t: undefined\n\t\t\tlist.push(\n\t\t\t\tcommentMention({\n\t\t\t\t\tsuggestion: createMentionSuggestion(resolveSuggestions, {\n\t\t\t\t\t\trenderMember: renderRow,\n\t\t\t\t\t\teditor: tlEditor,\n\t\t\t\t\t}),\n\t\t\t\t})\n\t\t\t)\n\t\t} else {\n\t\t\tlist.push(commentMention({ suggestion: { char: '@', allow: () => false } }))\n\t\t}\n\t\treturn list\n\t}, [mentionsEnabled, hasCustomRow, tlEditor])\n\n\tconst editor = useEditor(\n\t\t{\n\t\t\textensions,\n\t\t\tcontent: (value ?? EMPTY_COMMENT) as JSONContent,\n\t\t\teditable: interactive,\n\t\t\t// tldraw's default extensions add their own TextDirection extension (so it can be\n\t\t\t// overridden), so disable TipTap's core one to avoid a duplicate-extension warning \u2014\n\t\t\t// mirrors RichTextArea's setup.\n\t\t\tenableCoreExtensions: { textDirection: false },\n\t\t\ttextDirection: 'auto',\n\t\t\teditorProps: {\n\t\t\t\tattributes: { class: 'tlui-cmt-input' },\n\t\t\t\t// Runs before every keymap plugin, so it can distinguish Shift+Enter from Enter \u2014 an\n\t\t\t\t// `Enter` keymap binding also fires on Shift+Enter and would otherwise swallow it.\n\t\t\t\thandleKeyDown: (_view, event) => {\n\t\t\t\t\t// Let the keymaps handle the synthetic Enter we replay for a Shift+Enter newline.\n\t\t\t\t\tif (replayingEnter.current) return false\n\t\t\t\t\tif (event.key !== 'Enter' || event.isComposing) return false\n\t\t\t\t\t// While the @-mention picker is open, Enter selects the highlighted member \u2014 defer.\n\t\t\t\t\tif (isMentionPickerOpen()) return false\n\t\t\t\t\t// Shift+Enter inserts a new line. Replay a plain Enter through the keymaps (guarded so\n\t\t\t\t\t// we don't re-enter and submit) to reuse the editor's list-aware Enter handling \u2014 a new\n\t\t\t\t\t// list item in a list, a new paragraph otherwise. tldraw doesn't do soft breaks.\n\t\t\t\t\tif (event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {\n\t\t\t\t\t\treplayingEnter.current = true\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\teditorRef.current?.commands.enter()\n\t\t\t\t\t\t} finally {\n\t\t\t\t\t\t\treplayingEnter.current = false\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn true\n\t\t\t\t\t}\n\t\t\t\t\t// Enter, Cmd+Enter, and Ctrl+Enter submit.\n\t\t\t\t\tif (!disabledRef.current) onSubmitRef.current?.()\n\t\t\t\t\treturn true\n\t\t\t\t},\n\t\t\t},\n\t\t\tonUpdate: ({ editor }) => {\n\t\t\t\tsetIsEmpty(editor.isEmpty)\n\t\t\t\t// Same-value state sets don't re-render, so measure here \u2014 the editor's DOM is\n\t\t\t\t// already updated when onUpdate fires.\n\t\t\t\tremeasureRef.current()\n\t\t\t\tonChangeRef.current?.(editor.getJSON() as TLRichText)\n\t\t\t},\n\t\t},\n\t\t[interactive]\n\t)\n\teditorRef.current = editor\n\n\t// Sync controlled resets (e.g. the parent clearing to EMPTY_COMMENT after posting) into the\n\t// editor without echoing back the value the editor itself just emitted.\n\tuseEffect(() => {\n\t\tif (!editor || value === undefined) return\n\t\tif (isEqual(editor.getJSON(), value)) return\n\t\teditor.commands.setContent(value as JSONContent)\n\t\tsetIsEmpty(editor.isEmpty)\n\t}, [editor, value])\n\n\t// Measure once the editor's content is in the DOM, so a composer that mounts pre-filled (the\n\t// edit-in-place composer) starts in the right layout.\n\tuseLayoutEffect(() => {\n\t\tremeasureRef.current()\n\t}, [editor, value])\n\n\t// Focus on the next frame rather than via TipTap's autofocus: the composer often mounts from a\n\t// canvas pointer event whose default focus handling would otherwise steal it back.\n\tuseEffect(() => {\n\t\tif (!autoFocus || !editor) return\n\t\tconst raf = requestAnimationFrame(() => editor.commands.focus('end'))\n\t\treturn () => cancelAnimationFrame(raf)\n\t}, [autoFocus, editor])\n\n\treturn (\n\t\t<div className=\"tlui-cmt-composer\">\n\t\t\t{leading ?? <Avatar author={author} />}\n\t\t\t<div\n\t\t\t\tclassName={[\n\t\t\t\t\t'tlui-cmt-composer__field',\n\t\t\t\t\tinteractive && expanded && 'tlui-cmt-composer__field--expanded',\n\t\t\t\t]\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(' ')}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-cmt-composer__input-wrap\" ref={inputWrapRef}>\n\t\t\t\t\t<EditorContent editor={editor} />\n\t\t\t\t\t{isEmpty && (\n\t\t\t\t\t\t<div className=\"tlui-cmt-input__placeholder\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"tlui-cmt-composer__mirror tlui-cmt-input\"\n\t\t\t\t\t\tref={mirrorRef}\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{interactive && <SendButton label={sendLabel} onClick={onSubmit} disabled={disabled} />}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["import_react", "editor"]
 }

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

@@ -29,7 +29,7 @@ function mentionName(attrs, resolveName) {
 }
 function commentMention({ resolveName, suggestion } = {}) {
   return import_extension_mention.Mention.configure({
-    HTMLAttributes: { class: "cmt-mention" },
+    HTMLAttributes: { class: "tlui-cmt-mention" },
     renderText: ({ node }) => `@${mentionName(node.attrs, resolveName)}`,
     renderHTML: ({ node, options }) => [
       "span",

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

@@ -1,7 +1,7 @@
 {
   "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;",
+  "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 `.tlui-cmt-mention` pill.\n *\n * A factory rather than a shared constant because it's configured differently per context: the\n * read-only render paths pass `resolveName` (so the stored `{ id }` node always shows the member's\n * current name, not a copy frozen at insert time), while 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: 'tlui-cmt-mention' },\n\t\trenderText: ({ node }) => `@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,\n\t\trenderHTML: ({ node, options }) => [\n\t\t\t'span',\n\t\t\tmergeAttributes(options.HTMLAttributes, { 'data-mention-id': node.attrs.id }),\n\t\t\t`@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,\n\t\t],\n\t\t...(suggestion ? { suggestion } : {}),\n\t})\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,+BAAoE;AAQpE,SAAS,YACR,OACA,aACS;AACT,QAAM,WAAW,MAAM,MAAM,cAAc,YAAY,MAAM,EAAE,IAAI;AACnE,SAAO,YAAY,MAAM,SAAS,MAAM,MAAM;AAC/C;AAoBO,SAAS,eAAe,EAAE,aAAa,WAAW,IAA2B,CAAC,GAAG;AACvF,SAAO,iCAAQ,UAAU;AAAA,IACxB,gBAAgB,EAAE,OAAO,mBAAmB;AAAA,IAC5C,YAAY,CAAC,EAAE,KAAK,MAAM,IAAI,YAAY,KAAK,OAA2B,WAAW,CAAC;AAAA,IACtF,YAAY,CAAC,EAAE,MAAM,QAAQ,MAAM;AAAA,MAClC;AAAA,UACA,6BAAgB,QAAQ,gBAAgB,EAAE,mBAAmB,KAAK,MAAM,GAAG,CAAC;AAAA,MAC5E,IAAI,YAAY,KAAK,OAA2B,WAAW,CAAC;AAAA,IAC7D;AAAA,IACA,GAAI,aAAa,EAAE,WAAW,IAAI,CAAC;AAAA,EACpC,CAAC;AACF;",
   "names": []
 }

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

@@ -22,8 +22,28 @@ __export(comment_pin_exports, {
 });
 module.exports = __toCommonJS(comment_pin_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function CommentPin({ children, resolved, open }) {
-  const className = ["cmt-pin", resolved && "cmt-pin--resolved", open && "cmt-pin--open"].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: resolved ? "\u2713" : children });
+const resolvedCheck = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "15",
+    height: "15",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 12.5l5 5L20 6.5" })
+  }
+);
+function CommentPin({ children, resolved, open, color }) {
+  const className = [
+    "tlui-cmt-pin",
+    resolved && "tlui-cmt-pin--resolved",
+    open && "tlui-cmt-pin--open"
+  ].filter(Boolean).join(" ");
+  const style = color && !resolved ? { "--tlui-cmt-pin-color": color } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, children: resolved ? resolvedCheck : children });
 }
 //# sourceMappingURL=comment-pin.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/comment-pin.tsx"],
-  "sourcesContent": ["import { ReactNode } from 'react'\n\n/** @public */\nexport interface CommentPinProps {\n\t/** What the pin shows when unresolved \u2014 a number, an author initial, an <Avatar>, etc.\n\t *  Left as a lever so consumers aren't locked into a count. */\n\tchildren?: ReactNode\n\tresolved?: boolean\n\t/** The pin's thread is open \u2014 shows the active/selected indicator state. */\n\topen?: boolean\n}\n\n/** A canvas comment marker: shows its `children` (or a check when resolved). Purely\n * presentational \u2014 it reflects open/resolved state via CSS; wrap it to make it clickable.\n * @public @react */\nexport function CommentPin({ children, resolved, open }: CommentPinProps) {\n\tconst className = ['cmt-pin', resolved && 'cmt-pin--resolved', open && 'cmt-pin--open']\n\t\t.filter(Boolean)\n\t\t.join(' ')\n\treturn <div className={className}>{resolved ? '\u2713' : children}</div>\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AAJD,SAAS,WAAW,EAAE,UAAU,UAAU,KAAK,GAAoB;AACzE,QAAM,YAAY,CAAC,WAAW,YAAY,qBAAqB,QAAQ,eAAe,EACpF,OAAO,OAAO,EACd,KAAK,GAAG;AACV,SAAO,4CAAC,SAAI,WAAuB,qBAAW,WAAM,UAAS;AAC9D;",
+  "sourcesContent": ["import { CSSProperties, ReactNode } from 'react'\n\n/** @public */\nexport interface CommentPinProps {\n\t/** What the pin shows when unresolved \u2014 a number, an author initial, an <Avatar>, etc.\n\t *  Left as a lever so consumers aren't locked into a count. */\n\tchildren?: ReactNode\n\tresolved?: boolean\n\t/** The pin's thread is open \u2014 shows the active/selected indicator state. */\n\topen?: boolean\n\t/** Background color (any CSS color). Falls back to the default pin tint.\n\t *  Ignored while resolved \u2014 resolved pins are always grey. */\n\tcolor?: string\n}\n\n/* An inline check, not a text glyph \u2014 the '\u2713' character sits off-baseline and varies by font. */\nconst resolvedCheck = (\n\t<svg\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth=\"15\"\n\t\theight=\"15\"\n\t\tfill=\"none\"\n\t\tstroke=\"currentColor\"\n\t\tstrokeWidth=\"2.5\"\n\t\tstrokeLinecap=\"round\"\n\t\tstrokeLinejoin=\"round\"\n\t\taria-hidden=\"true\"\n\t>\n\t\t<path d=\"M4 12.5l5 5L20 6.5\" />\n\t</svg>\n)\n\n/** A canvas comment marker: shows its `children` (or a check when resolved). Purely\n * presentational \u2014 it reflects open/resolved state via CSS; wrap it to make it clickable.\n * @public @react */\nexport function CommentPin({ children, resolved, open, color }: CommentPinProps) {\n\tconst className = [\n\t\t'tlui-cmt-pin',\n\t\tresolved && 'tlui-cmt-pin--resolved',\n\t\topen && 'tlui-cmt-pin--open',\n\t]\n\t\t.filter(Boolean)\n\t\t.join(' ')\n\t// A custom property rather than backgroundColor, so the open ring follows the tint too.\n\tconst style =\n\t\tcolor && !resolved ? ({ '--tlui-cmt-pin-color': color } as CSSProperties) : undefined\n\treturn (\n\t\t<div className={className} style={style}>\n\t\t\t{resolved ? resolvedCheck : children}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BE;AAZF,MAAM,gBACL;AAAA,EAAC;AAAA;AAAA,IACA,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IAEZ,sDAAC,UAAK,GAAE,sBAAqB;AAAA;AAC9B;AAMM,SAAS,WAAW,EAAE,UAAU,UAAU,MAAM,MAAM,GAAoB;AAChF,QAAM,YAAY;AAAA,IACjB;AAAA,IACA,YAAY;AAAA,IACZ,QAAQ;AAAA,EACT,EACE,OAAO,OAAO,EACd,KAAK,GAAG;AAEV,QAAM,QACL,SAAS,CAAC,WAAY,EAAE,wBAAwB,MAAM,IAAsB;AAC7E,SACC,4CAAC,SAAI,WAAsB,OACzB,qBAAW,gBAAgB,UAC7B;AAEF;",
   "names": []
 }

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

@@ -24,6 +24,6 @@ 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) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-text", children: (0, import_render_markdown.renderMarkdown)(text) });
 }
 //# sourceMappingURL=comment-text.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/comment-text.tsx"],
-  "sourcesContent": ["import { renderMarkdown } from './render-markdown'\n\n/** @public */\nexport interface CommentTextProps {\n\t/** Rich text body, authored as markdown. */\n\ttext: string\n}\n\n/** A comment's body, rendered as markdown (bold, italic, code, links, lists). @public @react */\nexport function CommentText({ text }: CommentTextProps) {\n\treturn <div className=\"cmt-text\">{renderMarkdown(text)}</div>\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUQ;AAVR,6BAA+B;AASxB,SAAS,YAAY,EAAE,KAAK,GAAqB;AACvD,SAAO,4CAAC,SAAI,WAAU,YAAY,qDAAe,IAAI,GAAE;AACxD;",
+  "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=\"tlui-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,iBAAiB,qDAAe,IAAI,GAAE;AAC7D;",
   "names": []
 }

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

@@ -32,13 +32,13 @@ function CommentThread({
   composer,
   renderComment
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-thread", children: [
-    (header !== void 0 || headerActions !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-thread__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-thread__title", children: header }),
-      headerActions !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-thread__actions", children: headerActions })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-thread", children: [
+    (header !== void 0 || headerActions !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-thread__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-thread__title", children: header }),
+      headerActions !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-thread__actions", children: headerActions })
     ] }),
-    resolvedBanner !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-thread__resolved", children: resolvedBanner }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-thread__list", children: comments.map((comment, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: renderComment ? renderComment(comment, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_card.CommentCard, { ...comment }) }, i)) }),
+    resolvedBanner !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-thread__resolved", children: resolvedBanner }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-thread__list", children: comments.map((comment, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: renderComment ? renderComment(comment, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_card.CommentCard, { ...comment }) }, i)) }),
     composer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_composer.CommentComposer, { ...composer })
   ] });
 }

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

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

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

@@ -33,12 +33,12 @@ function CommentsList({
   resolvedLabel,
   renderItem
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-list", children: [
-    (header !== void 0 || headerAction) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-list__header", children: [
-      header !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-list__header-title", children: header }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-list", children: [
+    (header !== void 0 || headerAction) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-list__header", children: [
+      header !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-list__header-title", children: header }),
       headerAction
     ] }),
-    items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-list__empty", children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-list__items", children: items.map(
+    items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-list__empty", children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-list__items", children: items.map(
       (item) => renderItem ? renderItem(item) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         CommentListItem,
         {
@@ -70,23 +70,23 @@ function CommentListItem({
     "button",
     {
       type: "button",
-      className: selected ? "cmt-list__item cmt-list__item--selected" : "cmt-list__item",
+      className: selected ? "tlui-cmt-list__item tlui-cmt-list__item--selected" : "tlui-cmt-list__item",
       "data-resolved": resolved || void 0,
       onClick: handleClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { name: author }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-list__item-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { author }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-list__item-body", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_byline.Byline, { author, date }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-list__item-preview", children: preview }),
-          (resolved || page !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-list__item-meta", children: [
-            resolved && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmt-list__item-resolved", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-list__item-preview", children: preview }),
+          (resolved || page !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-list__item-meta", children: [
+            resolved && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tlui-cmt-list__item-resolved", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}),
               resolvedLabel
             ] }),
-            page !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-list__item-page", children: page })
+            page !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-list__item-page", children: page })
           ] })
         ] }),
-        count !== void 0 && count > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-list__item-count", children: count })
+        count !== void 0 && count > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-list__item-count", children: count })
       ]
     }
   );

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

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

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

@@ -23,6 +23,6 @@ __export(count_badge_exports, {
 module.exports = __toCommonJS(count_badge_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 function CountBadge({ count }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-count-badge", children: count });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-count-badge", children: count });
 }
 //# sourceMappingURL=count-badge.js.map

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

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

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

@@ -23,9 +23,9 @@ __export(empty_state_exports, {
 module.exports = __toCommonJS(empty_state_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 function EmptyState({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-empty", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-empty__icon", "aria-hidden": "true", children: "\u{1F4AC}" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "cmt-empty__message", children: message })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-empty", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-empty__icon", "aria-hidden": "true", children: "\u{1F4AC}" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "tlui-cmt-empty__message", children: message })
   ] });
 }
 //# sourceMappingURL=empty-state.js.map

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

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

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

@@ -35,6 +35,9 @@ function formatRelativeTime(iso, locale = "en") {
   if (Number.isNaN(then)) return "";
   const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
   let duration = (then - Date.now()) / 1e3;
+  if (Math.abs(duration) < 60) {
+    return rtf.format(0, "second");
+  }
   for (const division of DIVISIONS) {
     if (Math.abs(duration) < division.amount) {
       return rtf.format(Math.round(duration), division.unit);

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

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