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

package/dist-cjs/index.d.ts

@@ -1,6 +1,7 @@
 import { ComponentType } from 'react';
 import { Editor } from 'tldraw';
 import { EditorAtom } from 'tldraw';
+import { JsonObject } from 'tldraw';
 import { JSX } from 'react/jsx-runtime';
 import type { MentionNodeAttrs } from '@tiptap/extension-mention';
 import { ReactNode } from 'react';
@@ -34,15 +35,11 @@ export declare function anchorPagePoint(editor: Editor, anchor: TLCommentAnchor,
 
 /** A commenter's avatar — their image if provided, otherwise a single-initial coloured circle.
  * @public @react */
-export declare function Avatar({ name, color, image }: AvatarProps): JSX.Element;
+export declare function Avatar({ author }: AvatarProps): JSX.Element;
 
 /** @public */
 export declare interface AvatarProps {
-    name: string;
-    /** Background colour, used when there's no `image`. Falls back to the default avatar tint. */
-    color?: string;
-    /** Avatar image URL. When set, shows the image instead of the coloured initial. */
-    image?: string;
+    author: CommentAuthor;
 }
 
 /** A comment's metadata line: author name, relative time, and an edited marker. @public @react */
@@ -50,7 +47,7 @@ export declare function Byline({ author, date, edited }: BylineProps): JSX.Eleme
 
 /** @public */
 export declare interface BylineProps {
-    author: string;
+    author: CommentAuthor;
     /** ISO datetime; formatted to relative time by the component. */
     date: string;
     /** Shows an "edited" marker when the comment has been edited. */
@@ -74,8 +71,8 @@ export declare function CanvasComments(props: CanvasCommentsProps): JSX.Element
 export declare interface CanvasCommentsProps {
     /** The signed-in user's id, or null for a read-only viewer. Only a signed-in user composes. */
     currentUserId: null | string;
-    /** Map an author id to a display name, or `undefined` when the id can't be named. */
-    resolveName(id: string): string | undefined;
+    /** Map an author id to their display info, or `undefined` when the id can't be resolved. */
+    resolveAuthor(id: string): CommentAuthor | undefined;
     /** Called after any comment (a new thread's first comment, or a reply) is posted. */
     onPostComment?(comment: TLComment): void;
     /** Whether a comment is unread for the current user (return true for unread). */
@@ -100,17 +97,18 @@ export declare interface CanvasCommentsProps {
 }
 
 /**
- * A comments list panel for the current page, shown while the comment tool is active. Clicking a
- * thread brings its pin into view and opens it. Batteries-included over the store (a sibling to
- * `CanvasComments`); `CommentsList` is exported for a differently-placed or always-on list.
+ * A comments list panel for the current page, shown while {@link commentsSidebarOpen} is set (e.g.
+ * toggled by a button). Clicking a thread brings its pin into view and opens it. Batteries-included
+ * over the store (a sibling to `CanvasComments`); `CommentsList` is exported for a differently-placed
+ * or always-on list.
  * @public @react
  */
 export declare function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps): JSX.Element | null;
 
 /** @public */
 export declare interface CanvasCommentsSidebarProps {
-    /** Map an author id to a display name, or `undefined` when the id can't be named. */
-    resolveName(id: string): string | undefined;
+    /** Map an author id to their display info, or `undefined` when the id can't be resolved. */
+    resolveAuthor(id: string): CommentAuthor | undefined;
     /** The signed-in user's id. Enables the "only your threads" filter when present. */
     currentUserId?: string;
     /**
@@ -118,8 +116,6 @@ export declare interface CanvasCommentsSidebarProps {
      * "only unread" filter when present.
      */
     isCommentUnread?(commentId: TLCommentId): boolean;
-    /** Tool ids that show the sidebar. Defaults to the comment tool. */
-    tools?: string[];
     /** Header above the list. */
     header?: ReactNode;
     /** Shown when the page has no threads. */
@@ -170,23 +166,43 @@ export declare interface ClusterOptions {
 
 /** @public */
 export declare interface ClusterRuntime {
-    /** Events[0..k) are active. Exposed for tests and debugging. */
+    /** Events[0..k) are in the cursor (applied unless suppressed). Exposed for tests/debugging. */
     readonly k: number;
-    /** Reset state from scratch for the given zoom (cold start / after rebuild). */
+    /**
+     * Increments whenever the displayed partition changes. Subscribe to this, not `k`: detaches
+     * and suppressed-event healing change the partition without moving the cursor.
+     */
+    readonly version: number;
+    /** Number of suppressed band events currently inside the cursor. Exposed for tests. */
+    getSuppressedCount(): number;
+    /** Number of leaves currently detached from the displayed partition. Exposed for tests. */
+    getDetachedCount(): number;
+    /** Reset state from scratch for the given zoom (cold start / after rebuild). Clears detaches. */
     seed(zoom: number): void;
     /**
      * Reset state for the given zoom, carrying hysteresis state over from a previous partition
      * (the visible map of the model being replaced). Threshold-forced events ignore history:
-     * zoom \<= zMerge is always active, zoom \>= zSplit always inactive. An event inside its band
-     * is active iff its members were merged together in `previous`; a band event with no history
-     * (e.g. introduced by the rebuild) stays inactive until the next zoom-out crosses its zMerge.
-     * Active events must form a prefix of the table, so classification stops at the first
-     * inactive event; later band-active events conservatively resolve to split.
+     * zoom \<= zMerge is always merged, zoom \>= zSplit always split. An event inside its band
+     * keeps its previous state: merged iff its members were merged together in `previous`; a band
+     * event that was unmerged (or has no history, e.g. introduced by the rebuild) stays unmerged —
+     * inside the cursor but suppressed — until a zoom-out crosses its own zMerge, exactly like any
+     * other pending merge. Carryover is exact: no group changes state because of the swap alone.
+     * Clears detaches.
      */
     seedFrom(zoom: number, previous: ReadonlyMap<string, ClusterNode>): void;
     /** Advance/retreat the cursor for a camera change. No-op if zoom sits inside all bands. */
     onCamera(zoom: number): void;
-    /** The current partition: cluster id → node. Do not mutate. */
+    /**
+     * Remove one leaf from the displayed partition without touching the event table. Local by
+     * construction: only the nodes containing the leaf change — a badge shrinks in place (count
+     * and centroid recomputed from its remaining members), a pair collapses to its surviving
+     * leaf, and the leaf on its own disappears. Everything else is untouched, so a deletion,
+     * pop-out, or thread-open never re-flows the rest of the document. The table's thresholds
+     * around the detached leaf go stale; the caller is expected to hold a corrected rebuild and
+     * adopt it (with seedFrom) at the next zoom-out. Unknown or already-detached ids are no-ops.
+     */
+    detachLeaf(leafId: string): void;
+    /** The displayed partition: cluster id → node, with detaches applied. Do not mutate. */
     getVisible(): ReadonlyMap<string, ClusterNode>;
 }
 
@@ -207,6 +223,20 @@ export declare function collectClusterLeaves(editor: Editor, threads: readonly T
     y: number;
 }): LeafInput[];
 
+/** A comment author's display identity, resolved from an author id.
+ * @public */
+export declare interface CommentAuthor {
+    name: string;
+    /** The author's color (any CSS color) — colors their avatar and pins.
+     *  Omit for the default tint. */
+    color?: string;
+    /** Avatar image URL. When set, avatars show the image instead of the colored initial;
+     *  the canvas pin keeps the initial-on-color. */
+    image?: string;
+    /** User-defined metadata for the author, never read by the toolkit (like a shape's `meta`). */
+    meta?: JsonObject;
+}
+
 /**
  * Renders a comment's rich-text body read-only through the limited comment extension set (no
  * headings), so formatting (bold, links, lists, highlight) is preserved rather than flattened, and
@@ -227,7 +257,7 @@ export declare function CommentCard({ author, body, date, you, edited, actions }
 
 /** @public */
 export declare interface CommentCardProps {
-    author: string;
+    author: CommentAuthor;
     /** The rendered comment body. The card doesn't dictate a format — pass a `<CommentText>`
      *  for markdown, a rich-text render, or any node. */
     body: ReactNode;
@@ -251,7 +281,7 @@ export declare function CommentComposer({ author, placeholder, value, onChange,
 
 /** @public */
 export declare interface CommentComposerProps {
-    author: string;
+    author: CommentAuthor;
     placeholder: string;
     /** Controlled rich-text value. Omit for the presentational (display-only) composer. */
     value?: TLRichText;
@@ -326,6 +356,15 @@ export declare interface CommentingOptions {
         readonly x: number;
         readonly y: number;
     };
+    /**
+     * Whether a comment landing on a shape anchors precisely — pinned to the exact clicked spot
+     * within the shape — or imprecisely — pinned to the shape as a whole, rendered at
+     * `impreciseShapeAnchor`. Called wherever a shape anchor is created (placing with the comment
+     * tool, dropping a dragged pin onto a shape). Always precise by default. Return `false` for
+     * shape-level anchoring, or decide from the context — the Alt key's state, or the shape itself,
+     * e.g. precise only on notes. Governs new placements only; existing anchors render as stored.
+     */
+    shouldBePrecise(editor: Editor, context: ShapeCommentPrecisionContext): boolean;
     /** Screen-pixel margin by which the viewport is inflated when culling cluster badges. */
     readonly clusterCullMargin: number;
     /** How far past a cluster's split zoom to land when expanding it (1.05 = 5% overshoot). */
@@ -337,7 +376,7 @@ export declare interface CommentingOptions {
 /** @public */
 export declare interface CommentListItemProps {
     id: string;
-    author: string;
+    author: CommentAuthor;
     /** A short preview of the thread — e.g. the first comment's body. */
     preview: ReactNode;
     /** ISO datetime of the thread's first comment. */
@@ -354,7 +393,7 @@ export declare interface CommentListItemProps {
 /** A canvas comment marker: shows its `children` (or a check when resolved). Purely
  * presentational — it reflects open/resolved state via CSS; wrap it to make it clickable.
  * @public @react */
-export declare function CommentPin({ children, resolved, open }: CommentPinProps): JSX.Element;
+export declare function CommentPin({ children, resolved, open, color }: CommentPinProps): JSX.Element;
 
 /** @public */
 export declare interface CommentPinProps {
@@ -364,6 +403,9 @@ export declare interface CommentPinProps {
     resolved?: boolean;
     /** The pin's thread is open — shows the active/selected indicator state. */
     open?: boolean;
+    /** Background color (any CSS color). Falls back to the default pin tint.
+     *  Ignored while resolved — resolved pins are always grey. */
+    color?: string;
 }
 
 /** The funnel dropdown in the sidebar header: toggles for which threads the list shows.
@@ -424,6 +466,20 @@ export declare function CommentsMenuItem(): JSX.Element;
  * @public @react */
 export declare function CommentsOverflowMenu(): JSX.Element;
 
+/**
+ * Whether the comments sidebar (the thread list) is open. Driven by an explicit control — a button
+ * next to Share on dotcom — rather than by which tool is active, so browsing threads is separate
+ * from placing them. The comment tool additionally closes it on enter, keeping placement
+ * canvas-focused.
+ * @public
+ */
+export declare const commentsSidebarOpen: EditorAtom<boolean>;
+
+/** The sidebar header's show/hide toggle for comment pins — an eye that closes while comments
+ *  are hidden. The same state as the Shift+C shortcut.
+ * @public @react */
+export declare function CommentsVisibilityToggle(): JSX.Element;
+
 /** A comment's body, rendered as markdown (bold, italic, code, links, lists). @public @react */
 export declare function CommentText({ text }: CommentTextProps): JSX.Element;
 
@@ -458,9 +514,11 @@ export declare interface CommentThreadProps {
 }
 
 /**
- * The comment tool. A click starts a point/shape thread (the pin tracks the shape it lands on);
- * dragging out a rectangle starts a region thread anchored to that area. Placement only opens a
- * composer (via `pendingComment`); the records are created when the comment is posted.
+ * The comment tool. Pressing down opens the comment composer immediately at the pointer, and it
+ * follows the pointer until release — like placing a sticky note — settling on a point, or on a
+ * shape when released over one. (With region comments enabled, dragging past the threshold instead
+ * draws a region rectangle.) Placement only opens a composer (via `pendingComment`); the records
+ * are created when the comment is posted.
  * @public
  */
 export declare class CommentTool extends StateNode {
@@ -486,6 +544,7 @@ export declare class CommentTool extends StateNode {
      */
     options: CommentingOptions;
     onEnter(): void;
+    onExit(): void;
     onCancel(): void;
 }
 
@@ -540,7 +599,8 @@ export declare const DEFAULT_IMPRECISE_SHAPE_ANCHOR: {
  * @public */
 export declare const DEFAULT_REGION_COMMENT_OPTIONS: RegionCommentOptions;
 
-/** @public */
+/** The out-of-the-box view: every page's threads, resolved ones hidden until asked for.
+ * @public */
 export declare const DEFAULT_SIDEBAR_FILTERS: SidebarFilters;
 
 /**
@@ -559,6 +619,7 @@ export declare const defaultCommentingOptions: {
         readonly x: 1;
         readonly y: 0;
     };
+    readonly shouldBePrecise: () => true;
 };
 
 /** The empty state shown when a thread has no comments yet. @public @react */
@@ -641,14 +702,10 @@ export declare interface MentionListProps {
     renderMember?(member: MentionMember): ReactNode;
 }
 
-/** A person the composer's \@-mention picker can offer. @public */
-export declare interface MentionMember {
+/** A person the composer's \@-mention picker can offer: a {@link CommentAuthor} plus its id and
+ * picker-only display fields. @public */
+export declare interface MentionMember extends CommentAuthor {
     id: string;
-    name: string;
-    /** Avatar image URL. Falls back to a coloured initial when omitted. */
-    avatar?: string;
-    /** Avatar background colour, used when there's no `avatar` image. */
-    color?: string;
     /** A secondary line under the name — e.g. an email or handle. Omit for a single-line row. */
     secondary?: string;
     /** Marks the current user; shown as a "(You)" suffix after the name. */
@@ -720,6 +777,12 @@ export declare interface ReactionProps {
 /** The row of reactions under a comment, plus an add-reaction button. @public @react */
 export declare function Reactions(): JSX.Element;
 
+/** A region anchor's pin corner: the corner its creating drag released on, when recorded, else
+ *  the editor's configured default. @public */
+export declare function regionAnchorPinCorner(editor: Editor, anchor: Extract<TLCommentAnchor, {
+    type: 'region';
+}>): VecLike;
+
 /**
  * The configurable dimensions of region comments — a design surface for prototyping the interaction
  * before settling it. Region is **off by default**, so a consumer that leaves it unset keeps plain
@@ -772,8 +835,9 @@ export declare interface SendButtonProps {
 
 /**
  * A shape anchor for a page point. `x`/`y` are the point's normalized (0–1) offset within the
- * shape's page bounds, remembered either way. When `precise` (Alt held) the pin sits at exactly
- * `x`/`y`; otherwise it sits at the consumer's imprecise default (top-right out of the box).
+ * shape's page bounds, remembered either way. When `precise` the pin sits at exactly `x`/`y`;
+ * otherwise it sits at the consumer's imprecise default (top-right out of the box). Placement
+ * gestures get `precise` from the `shouldBePrecise` commenting option (always precise, by default).
  * @public
  */
 export declare function shapeAnchorAt(editor: Editor, shapeId: TLShapeId, page: {
@@ -781,6 +845,19 @@ export declare function shapeAnchorAt(editor: Editor, shapeId: TLShapeId, page:
     y: number;
 }, precise: boolean): TLCommentAnchor;
 
+/**
+ * The gesture that's creating a shape anchor, passed to
+ * {@link CommentingOptions.shouldBePrecise}: the target shape, the page point of the release, and
+ * whether Alt was held.
+ *
+ * @public
+ */
+export declare interface ShapeCommentPrecisionContext {
+    readonly shapeId: TLShapeId;
+    readonly point: VecLike;
+    readonly altKey: boolean;
+}
+
 /**
  * Which threads the comments sidebar shows. Held as an editor-scoped signal (the `sidebarFilters`
  * `EditorAtom` in `./state`) rather than component state so it survives the sidebar
@@ -820,6 +897,10 @@ export declare type TLCommentRecord = TLComment | TLCommentThread;
  * @public */
 export declare function toggleCommentsHidden(editor: Editor): void;
 
+/** Open or close the comments sidebar for an editor.
+ * @public */
+export declare function toggleCommentsSidebar(editor: Editor): void;
+
 /**
  * Whether commenting is licensed for this editor. Enabled in development; in production it requires
  * a tldraw license that includes the commenting feature (or the collaboration umbrella that grants
@@ -847,6 +928,10 @@ export declare function useComments(editor: Editor): TLComment[];
  * @public */
 export declare function useCommentsHidden(): boolean;
 
+/** React hook for whether the comments sidebar is open.
+ * @public */
+export declare function useCommentsSidebarOpen(): boolean;
+
 /** All comment threads in the store, reactively. @public */
 export declare function useCommentThreads(editor: Editor): TLCommentThread[];
 

package/dist-cjs/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   CommentsList: () => import_comments_list.CommentsList,
   CommentsMenuItem: () => import_comments_menu_item.CommentsMenuItem,
   CommentsOverflowMenu: () => import_comments_overflow_menu.CommentsOverflowMenu,
+  CommentsVisibilityToggle: () => import_comments_visibility_toggle.CommentsVisibilityToggle,
   CountBadge: () => import_count_badge.CountBadge,
   DEFAULT_IMPRECISE_SHAPE_ANCHOR: () => import_thread_state.DEFAULT_IMPRECISE_SHAPE_ANCHOR,
   DEFAULT_REGION_COMMENT_OPTIONS: () => import_region_options.DEFAULT_REGION_COMMENT_OPTIONS,
@@ -48,6 +49,7 @@ __export(index_exports, {
   commentToolOverrides: () => import_comment_tool.commentToolOverrides,
   commentTools: () => import_comment_tool.commentTools,
   commentsHidden: () => import_state.commentsHidden,
+  commentsSidebarOpen: () => import_state.commentsSidebarOpen,
   commitCommentMutation: () => import_state.commitCommentMutation,
   computeClusterTable: () => import_computeClusterTable.computeClusterTable,
   createClusterRuntime: () => import_runtime.createClusterRuntime,
@@ -63,17 +65,20 @@ __export(index_exports, {
   openThreadId: () => import_state.openThreadId,
   pendingComment: () => import_state.pendingComment,
   putCommentRecords: () => import_comment_store.putCommentRecords,
+  regionAnchorPinCorner: () => import_thread_state.regionAnchorPinCorner,
   removeCommentRecords: () => import_comment_store.removeCommentRecords,
   renderMarkdown: () => import_render_markdown.renderMarkdown,
   richTextToPlaintext: () => import_rich_text.richTextToPlaintext,
   shapeAnchorAt: () => import_thread_state.shapeAnchorAt,
   sidebarFilters: () => import_state.sidebarFilters,
   toggleCommentsHidden: () => import_state.toggleCommentsHidden,
+  toggleCommentsSidebar: () => import_state.toggleCommentsSidebar,
   useCommentThreads: () => import_hooks.useCommentThreads,
   useCommentingEnabled: () => import_license.useCommentingEnabled,
   useCommentingOptions: () => import_options.useCommentingOptions,
   useComments: () => import_hooks.useComments,
   useCommentsHidden: () => import_state.useCommentsHidden,
+  useCommentsSidebarOpen: () => import_state.useCommentsSidebarOpen,
   useOpenThreadId: () => import_state.useOpenThreadId,
   usePendingComment: () => import_state.usePendingComment,
   useSidebarFilters: () => import_state.useSidebarFilters,
@@ -110,6 +115,7 @@ var import_comments_menu_item = require("./canvas/comments-menu-item");
 var import_comments_overlay = require("./canvas/comments-overlay");
 var import_options = require("./canvas/options");
 var import_comments_overflow_menu = require("./canvas/comments-overflow-menu");
+var import_comments_visibility_toggle = require("./canvas/comments-visibility-toggle");
 var import_comments_sidebar = require("./canvas/comments-sidebar");
 var import_hooks = require("./canvas/hooks");
 var import_license = require("./canvas/license");
@@ -120,7 +126,7 @@ var import_state = require("./canvas/state");
 var import_thread_state = require("./canvas/thread-state");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/commenting",
-  "0.0.0-bootstrap",
+  "5.3.0-internal.1640468db8fd",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { registerTldrawLibraryVersion } from '@tldraw/utils'\n\n// Presentational commenting components. These are tldraw-independent and can be used to build\n// custom commenting UI.\nexport { Avatar, type AvatarProps } from './ui/avatar'\nexport { Byline, type BylineProps } from './ui/byline'\nexport { CommentCard, type CommentCardProps } from './ui/comment-card'\nexport { CommentComposer, type CommentComposerProps } from './ui/comment-composer'\nexport { CountBadge, type CountBadgeProps } from './ui/count-badge'\nexport { CommentPin, type CommentPinProps } from './ui/comment-pin'\nexport { CommentText, type CommentTextProps } from './ui/comment-text'\nexport { CommentThread, type CommentThreadProps } from './ui/comment-thread'\nexport { CommentsList, type CommentListItemProps, type CommentsListProps } from './ui/comments-list'\nexport { EmptyState, type EmptyStateProps } from './ui/empty-state'\nexport { formatRelativeTime } from './ui/format-time'\nexport { Mention, type MentionProps } from './ui/mention'\nexport { MentionList, type MentionListProps, type MentionMember } from './ui/mention-list'\nexport {\n\tcreateMentionSuggestion,\n\tfilterMentionMembers,\n\ttype MentionSuggestionOptions,\n} from './ui/mention-suggestion'\nexport { Reaction, type ReactionProps } from './ui/reaction'\nexport { Reactions } from './ui/reactions'\nexport { renderMarkdown } from './ui/render-markdown'\nexport { SendButton, type SendButtonProps } from './ui/send-button'\n\n// The tldraw-coupled commenting layer: the comment tool, reactive hooks over the comment\n// records, a rich-text body renderer, and a batteries-included <CanvasComments> overlay. Pairs\n// with the presentational components above.\nexport { CommentBody, type CommentBodyProps } from './canvas/comment-body'\nexport {\n\tCommentTool,\n\tcommentToolOverrides,\n\tcommentTools,\n\ttype PendingComment,\n} from './canvas/comment-tool'\nexport { collectClusterLeaves } from './canvas/cluster-input'\nexport { computeClusterTable } from './clustering/computeClusterTable'\nexport {\n\tgetCommentRecord,\n\tgetComments,\n\tgetCommentThreads,\n\tputCommentRecords,\n\tremoveCommentRecords,\n\ttype TLCommentRecord,\n} from './canvas/comment-store'\nexport { createClusterRuntime, type ClusterRuntime } from './clustering/runtime'\nexport type {\n\tClusterNode,\n\tClusterOptions,\n\tClusterTable,\n\tLeafInput,\n\tMergeEvent,\n} from './clustering/types'\nexport { CommentsFilterMenu, type CommentsFilterMenuProps } from './canvas/comments-filter-menu'\nexport { CommentsMenuItem } from './canvas/comments-menu-item'\nexport { CanvasComments, type CanvasCommentsProps } from './canvas/comments-overlay'\nexport {\n\ttype CommentingComponents,\n\ttype CommentingOptions,\n\tdefaultCommentingOptions,\n\tgetCommentingOptions,\n\tuseCommentingOptions,\n} from './canvas/options'\nexport { CommentsOverflowMenu } from './canvas/comments-overflow-menu'\nexport { CanvasCommentsSidebar, type CanvasCommentsSidebarProps } from './canvas/comments-sidebar'\nexport { useComments, useCommentThreads, useThreadComments } from './canvas/hooks'\nexport { useCommentingEnabled } from './canvas/license'\nexport { DEFAULT_REGION_COMMENT_OPTIONS, type RegionCommentOptions } from './canvas/region-options'\nexport { richTextToPlaintext } from './canvas/rich-text'\nexport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './canvas/sidebar-filters'\nexport {\n\tcommentsHidden,\n\tcommitCommentMutation,\n\topenThreadId,\n\tpendingComment,\n\tsidebarFilters,\n\ttoggleCommentsHidden,\n\tuseCommentsHidden,\n\tuseOpenThreadId,\n\tusePendingComment,\n\tuseSidebarFilters,\n} from './canvas/state'\nexport {\n\tanchorPagePoint,\n\tDEFAULT_IMPRECISE_SHAPE_ANCHOR,\n\tfocusThread,\n\tshapeAnchorAt,\n} from './canvas/thread-state'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;AAI7C,oBAAyC;AACzC,oBAAyC;AACzC,0BAAmD;AACnD,8BAA2D;AAC3D,yBAAiD;AACjD,yBAAiD;AACjD,0BAAmD;AACnD,4BAAuD;AACvD,2BAAgF;AAChF,yBAAiD;AACjD,yBAAmC;AACnC,qBAA2C;AAC3C,0BAAuE;AACvE,gCAIO;AACP,sBAA6C;AAC7C,uBAA0B;AAC1B,6BAA+B;AAC/B,yBAAiD;AAKjD,0BAAmD;AACnD,0BAKO;AACP,2BAAqC;AACrC,iCAAoC;AACpC,2BAOO;AACP,qBAA0D;AAQ1D,kCAAiE;AACjE,gCAAiC;AACjC,8BAAyD;AACzD,qBAMO;AACP,oCAAqC;AACrC,8BAAuE;AACvE,mBAAkE;AAClE,qBAAqC;AACrC,4BAA0E;AAC1E,uBAAoC;AACpC,6BAA6D;AAC7D,mBAWO;AACP,0BAKO;AAAA,IAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
+  "sourcesContent": ["import { registerTldrawLibraryVersion } from '@tldraw/utils'\n\n// Presentational commenting components. These are tldraw-independent and can be used to build\n// custom commenting UI.\nexport { Avatar, type AvatarProps } from './ui/avatar'\nexport { Byline, type BylineProps } from './ui/byline'\nexport { type CommentAuthor } from './ui/comment-author'\nexport { CommentCard, type CommentCardProps } from './ui/comment-card'\nexport { CommentComposer, type CommentComposerProps } from './ui/comment-composer'\nexport { CountBadge, type CountBadgeProps } from './ui/count-badge'\nexport { CommentPin, type CommentPinProps } from './ui/comment-pin'\nexport { CommentText, type CommentTextProps } from './ui/comment-text'\nexport { CommentThread, type CommentThreadProps } from './ui/comment-thread'\nexport { CommentsList, type CommentListItemProps, type CommentsListProps } from './ui/comments-list'\nexport { EmptyState, type EmptyStateProps } from './ui/empty-state'\nexport { formatRelativeTime } from './ui/format-time'\nexport { Mention, type MentionProps } from './ui/mention'\nexport { MentionList, type MentionListProps, type MentionMember } from './ui/mention-list'\nexport {\n\tcreateMentionSuggestion,\n\tfilterMentionMembers,\n\ttype MentionSuggestionOptions,\n} from './ui/mention-suggestion'\nexport { Reaction, type ReactionProps } from './ui/reaction'\nexport { Reactions } from './ui/reactions'\nexport { renderMarkdown } from './ui/render-markdown'\nexport { SendButton, type SendButtonProps } from './ui/send-button'\n\n// The tldraw-coupled commenting layer: the comment tool, reactive hooks over the comment\n// records, a rich-text body renderer, and a batteries-included <CanvasComments> overlay. Pairs\n// with the presentational components above.\nexport { CommentBody, type CommentBodyProps } from './canvas/comment-body'\nexport {\n\tCommentTool,\n\tcommentToolOverrides,\n\tcommentTools,\n\ttype PendingComment,\n} from './canvas/comment-tool'\nexport { collectClusterLeaves } from './canvas/cluster-input'\nexport { computeClusterTable } from './clustering/computeClusterTable'\nexport {\n\tgetCommentRecord,\n\tgetComments,\n\tgetCommentThreads,\n\tputCommentRecords,\n\tremoveCommentRecords,\n\ttype TLCommentRecord,\n} from './canvas/comment-store'\nexport { createClusterRuntime, type ClusterRuntime } from './clustering/runtime'\nexport type {\n\tClusterNode,\n\tClusterOptions,\n\tClusterTable,\n\tLeafInput,\n\tMergeEvent,\n} from './clustering/types'\nexport { CommentsFilterMenu, type CommentsFilterMenuProps } from './canvas/comments-filter-menu'\nexport { CommentsMenuItem } from './canvas/comments-menu-item'\nexport { CanvasComments, type CanvasCommentsProps } from './canvas/comments-overlay'\nexport {\n\ttype CommentingComponents,\n\ttype CommentingOptions,\n\tdefaultCommentingOptions,\n\tgetCommentingOptions,\n\ttype ShapeCommentPrecisionContext,\n\tuseCommentingOptions,\n} from './canvas/options'\nexport { CommentsOverflowMenu } from './canvas/comments-overflow-menu'\nexport { CommentsVisibilityToggle } from './canvas/comments-visibility-toggle'\nexport { CanvasCommentsSidebar, type CanvasCommentsSidebarProps } from './canvas/comments-sidebar'\nexport { useComments, useCommentThreads, useThreadComments } from './canvas/hooks'\nexport { useCommentingEnabled } from './canvas/license'\nexport { DEFAULT_REGION_COMMENT_OPTIONS, type RegionCommentOptions } from './canvas/region-options'\nexport { richTextToPlaintext } from './canvas/rich-text'\nexport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './canvas/sidebar-filters'\nexport {\n\tcommentsHidden,\n\tcommentsSidebarOpen,\n\tcommitCommentMutation,\n\topenThreadId,\n\tpendingComment,\n\tsidebarFilters,\n\ttoggleCommentsHidden,\n\ttoggleCommentsSidebar,\n\tuseCommentsHidden,\n\tuseCommentsSidebarOpen,\n\tuseOpenThreadId,\n\tusePendingComment,\n\tuseSidebarFilters,\n} from './canvas/state'\nexport {\n\tanchorPagePoint,\n\tDEFAULT_IMPRECISE_SHAPE_ANCHOR,\n\tfocusThread,\n\tregionAnchorPinCorner,\n\tshapeAnchorAt,\n} from './canvas/thread-state'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;AAI7C,oBAAyC;AACzC,oBAAyC;AAEzC,0BAAmD;AACnD,8BAA2D;AAC3D,yBAAiD;AACjD,yBAAiD;AACjD,0BAAmD;AACnD,4BAAuD;AACvD,2BAAgF;AAChF,yBAAiD;AACjD,yBAAmC;AACnC,qBAA2C;AAC3C,0BAAuE;AACvE,gCAIO;AACP,sBAA6C;AAC7C,uBAA0B;AAC1B,6BAA+B;AAC/B,yBAAiD;AAKjD,0BAAmD;AACnD,0BAKO;AACP,2BAAqC;AACrC,iCAAoC;AACpC,2BAOO;AACP,qBAA0D;AAQ1D,kCAAiE;AACjE,gCAAiC;AACjC,8BAAyD;AACzD,qBAOO;AACP,oCAAqC;AACrC,wCAAyC;AACzC,8BAAuE;AACvE,mBAAkE;AAClE,qBAAqC;AACrC,4BAA0E;AAC1E,uBAAoC;AACpC,6BAA6D;AAC7D,mBAcO;AACP,0BAMO;AAAA,IAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/dist-cjs/ui/avatar.js

@@ -26,17 +26,25 @@ var import_tldraw = require("tldraw");
 function initial(name) {
   return ((0, import_tldraw.getFirstCharacter)(name.trim()) || "?").toUpperCase();
 }
-function Avatar({ name, color, image }) {
-  if (image) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: "cmt-avatar cmt-avatar--image", src: image, alt: "", "aria-hidden": "true" });
+function Avatar({ author }) {
+  if (author.image) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        className: "tlui-cmt-avatar tlui-cmt-avatar--image",
+        src: author.image,
+        alt: "",
+        "aria-hidden": "true"
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: "cmt-avatar",
+      className: "tlui-cmt-avatar",
       "aria-hidden": "true",
-      style: color ? { backgroundColor: color } : void 0,
-      children: initial(name)
+      style: author.color ? { backgroundColor: author.color } : void 0,
+      children: initial(author.name)
     }
   );
 }

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

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

package/dist-cjs/ui/byline.js

@@ -24,11 +24,11 @@ module.exports = __toCommonJS(byline_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_format_time = require("./format-time");
 function Byline({ author, date, edited }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-head", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-author", children: author }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmt-time", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-head", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-author", children: author.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tlui-cmt-time", children: [
       (0, import_format_time.formatRelativeTime)(date),
-      edited && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-edited", children: " \xB7 edited" })
+      edited && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-edited", children: " \xB7 edited" })
     ] })
   ] });
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/byline.tsx"],
-  "sourcesContent": ["import { formatRelativeTime } from './format-time'\n\n/** @public */\nexport interface BylineProps {\n\tauthor: string\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\t/** Shows an \"edited\" marker when the comment has been edited. */\n\tedited?: boolean\n}\n\n/** A comment's metadata line: author name, relative time, and an edited marker. @public @react */\nexport function Byline({ author, date, edited }: BylineProps) {\n\treturn (\n\t\t<div className=\"cmt-head\">\n\t\t\t<span className=\"cmt-author\">{author}</span>\n\t\t\t<span className=\"cmt-time\">\n\t\t\t\t{formatRelativeTime(date)}\n\t\t\t\t{edited && <span className=\"cmt-edited\"> \u00B7 edited</span>}\n\t\t\t</span>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeG;AAfH,yBAAmC;AAY5B,SAAS,OAAO,EAAE,QAAQ,MAAM,OAAO,GAAgB;AAC7D,SACC,6CAAC,SAAI,WAAU,YACd;AAAA,gDAAC,UAAK,WAAU,cAAc,kBAAO;AAAA,IACrC,6CAAC,UAAK,WAAU,YACd;AAAA,iDAAmB,IAAI;AAAA,MACvB,UAAU,4CAAC,UAAK,WAAU,cAAa,0BAAS;AAAA,OAClD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { CommentAuthor } from './comment-author'\nimport { formatRelativeTime } from './format-time'\n\n/** @public */\nexport interface BylineProps {\n\tauthor: CommentAuthor\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\t/** Shows an \"edited\" marker when the comment has been edited. */\n\tedited?: boolean\n}\n\n/** A comment's metadata line: author name, relative time, and an edited marker. @public @react */\nexport function Byline({ author, date, edited }: BylineProps) {\n\treturn (\n\t\t<div className=\"tlui-cmt-head\">\n\t\t\t<span className=\"tlui-cmt-author\">{author.name}</span>\n\t\t\t<span className=\"tlui-cmt-time\">\n\t\t\t\t{formatRelativeTime(date)}\n\t\t\t\t{edited && <span className=\"tlui-cmt-edited\"> \u00B7 edited</span>}\n\t\t\t</span>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBG;AAfH,yBAAmC;AAY5B,SAAS,OAAO,EAAE,QAAQ,MAAM,OAAO,GAAgB;AAC7D,SACC,6CAAC,SAAI,WAAU,iBACd;AAAA,gDAAC,UAAK,WAAU,mBAAmB,iBAAO,MAAK;AAAA,IAC/C,6CAAC,UAAK,WAAU,iBACd;AAAA,iDAAmB,IAAI;AAAA,MACvB,UAAU,4CAAC,UAAK,WAAU,mBAAkB,0BAAS;AAAA,OACvD;AAAA,KACD;AAEF;",
   "names": []
 }

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

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_author_exports = {};
+module.exports = __toCommonJS(comment_author_exports);
+//# sourceMappingURL=comment-author.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comment-author.ts"],
+  "sourcesContent": ["import { JsonObject } from 'tldraw'\n\n/** A comment author's display identity, resolved from an author id.\n * @public */\nexport interface CommentAuthor {\n\tname: string\n\t/** The author's color (any CSS color) \u2014 colors their avatar and pins.\n\t *  Omit for the default tint. */\n\tcolor?: string\n\t/** Avatar image URL. When set, avatars show the image instead of the colored initial;\n\t *  the canvas pin keeps the initial-on-color. */\n\timage?: string\n\t/** User-defined metadata for the author, never read by the toolkit (like a shape's `meta`). */\n\tmeta?: JsonObject\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

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

@@ -25,13 +25,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_avatar = require("./avatar");
 var import_byline = require("./byline");
 function CommentCard({ author, body, date, you, edited, actions }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: you ? "cmt-card cmt-card--you" : "cmt-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { name: author }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-body", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: you ? "tlui-cmt-card tlui-cmt-card--you" : "tlui-cmt-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { author }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-body", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_byline.Byline, { author, date, edited }),
       body
     ] }),
-    actions !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-card__actions", children: actions })
+    actions !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-card__actions", children: actions })
   ] });
 }
 //# sourceMappingURL=comment-card.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/comment-card.tsx"],
-  "sourcesContent": ["import { ReactNode } from 'react'\nimport { Avatar } from './avatar'\nimport { Byline } from './byline'\n\n/** @public */\nexport interface CommentCardProps {\n\tauthor: string\n\t/** The rendered comment body. The card doesn't dictate a format \u2014 pass a `<CommentText>`\n\t *  for markdown, a rich-text render, or any node. */\n\tbody: ReactNode\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\tyou: boolean\n\t/** Whether the comment has been edited (shows an \"edited\" marker). */\n\tedited?: boolean\n\t/** Hover-revealed controls at the card's top-right (e.g. an edit affordance). */\n\tactions?: ReactNode\n}\n\n/** A single comment: Avatar, Byline, and a body slot the consumer renders. @public @react */\nexport function CommentCard({ author, body, date, you, edited, actions }: CommentCardProps) {\n\treturn (\n\t\t<div className={you ? 'cmt-card cmt-card--you' : 'cmt-card'}>\n\t\t\t<Avatar name={author} />\n\t\t\t<div className=\"cmt-body\">\n\t\t\t\t<Byline author={author} date={date} edited={edited} />\n\t\t\t\t{body}\n\t\t\t</div>\n\t\t\t{actions !== undefined && <div className=\"cmt-card__actions\">{actions}</div>}\n\t\t</div>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBG;AAtBH,oBAAuB;AACvB,oBAAuB;AAkBhB,SAAS,YAAY,EAAE,QAAQ,MAAM,MAAM,KAAK,QAAQ,QAAQ,GAAqB;AAC3F,SACC,6CAAC,SAAI,WAAW,MAAM,2BAA2B,YAChD;AAAA,gDAAC,wBAAO,MAAM,QAAQ;AAAA,IACtB,6CAAC,SAAI,WAAU,YACd;AAAA,kDAAC,wBAAO,QAAgB,MAAY,QAAgB;AAAA,MACnD;AAAA,OACF;AAAA,IACC,YAAY,UAAa,4CAAC,SAAI,WAAU,qBAAqB,mBAAQ;AAAA,KACvE;AAEF;",
+  "sourcesContent": ["import { ReactNode } from 'react'\nimport { Avatar } from './avatar'\nimport { Byline } from './byline'\nimport { CommentAuthor } from './comment-author'\n\n/** @public */\nexport interface CommentCardProps {\n\tauthor: CommentAuthor\n\t/** The rendered comment body. The card doesn't dictate a format \u2014 pass a `<CommentText>`\n\t *  for markdown, a rich-text render, or any node. */\n\tbody: ReactNode\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\tyou: boolean\n\t/** Whether the comment has been edited (shows an \"edited\" marker). */\n\tedited?: boolean\n\t/** Hover-revealed controls at the card's top-right (e.g. an edit affordance). */\n\tactions?: ReactNode\n}\n\n/** A single comment: Avatar, Byline, and a body slot the consumer renders. @public @react */\nexport function CommentCard({ author, body, date, you, edited, actions }: CommentCardProps) {\n\treturn (\n\t\t<div className={you ? 'tlui-cmt-card tlui-cmt-card--you' : 'tlui-cmt-card'}>\n\t\t\t<Avatar author={author} />\n\t\t\t<div className=\"tlui-cmt-body\">\n\t\t\t\t<Byline author={author} date={date} edited={edited} />\n\t\t\t\t{body}\n\t\t\t</div>\n\t\t\t{actions !== undefined && <div className=\"tlui-cmt-card__actions\">{actions}</div>}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBG;AAvBH,oBAAuB;AACvB,oBAAuB;AAmBhB,SAAS,YAAY,EAAE,QAAQ,MAAM,MAAM,KAAK,QAAQ,QAAQ,GAAqB;AAC3F,SACC,6CAAC,SAAI,WAAW,MAAM,qCAAqC,iBAC1D;AAAA,gDAAC,wBAAO,QAAgB;AAAA,IACxB,6CAAC,SAAI,WAAU,iBACd;AAAA,kDAAC,wBAAO,QAAgB,MAAY,QAAgB;AAAA,MACnD;AAAA,OACF;AAAA,IACC,YAAY,UAAa,4CAAC,SAAI,WAAU,0BAA0B,mBAAQ;AAAA,KAC5E;AAEF;",
   "names": []
 }