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

package/src/ui/count-badge.tsx

@@ -5,5 +5,5 @@ export interface CountBadgeProps {
 
 /** @public @react */
 export function CountBadge({ count }: CountBadgeProps) {
-	return <div className="cmt-count-badge">{count}</div>
+	return <div className="tlui-cmt-count-badge">{count}</div>
 }

package/src/ui/empty-state.tsx

@@ -6,11 +6,11 @@ export interface EmptyStateProps {
 /** The empty state shown when a thread has no comments yet. @public @react */
 export function EmptyState({ message }: EmptyStateProps) {
 	return (
-		<div className="cmt-empty">
-			<div className="cmt-empty__icon" aria-hidden="true">
+		<div className="tlui-cmt-empty">
+			<div className="tlui-cmt-empty__icon" aria-hidden="true">
 				💬
 			</div>
-			<p className="cmt-empty__message">{message}</p>
+			<p className="tlui-cmt-empty__message">{message}</p>
 		</div>
 	)
 }

package/src/ui/format-time.ts

@@ -19,6 +19,11 @@ export function formatRelativeTime(iso: string, locale = 'en'): string {
 
 	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
 	let duration = (then - Date.now()) / 1000
+	// Under a minute is just "now" — with second granularity the label visibly ticks while
+	// typing a reply (every keystroke re-renders the card).
+	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/src/ui/mention-list.tsx

@@ -1,15 +1,12 @@
 import { ReactNode } from 'react'
 import { useTranslation } from 'tldraw'
 import { Avatar } from './avatar'
+import { CommentAuthor } from './comment-author'
 
-/** A person the composer's \@-mention picker can offer. @public */
-export interface MentionMember {
+/** A person the composer's \@-mention picker can offer: a {@link CommentAuthor} plus its id and
+ * picker-only display fields. @public */
+export 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. */
@@ -37,16 +34,16 @@ function DefaultMemberRow({ member }: { member: MentionMember }) {
 	const msg = useTranslation()
 	return (
 		<>
-			<Avatar name={member.name} color={member.color} image={member.avatar} />
-			<span className="cmt-mention-list__text">
-				<span className="cmt-mention-list__name">
+			<Avatar author={member} />
+			<span className="tlui-cmt-mention-list__text">
+				<span className="tlui-cmt-mention-list__name">
 					{member.name}
 					{member.you && (
-						<span className="cmt-mention-list__you">{`(${msg('comments.mention-you')})`}</span>
+						<span className="tlui-cmt-mention-list__you">{`(${msg('comments.mention-you')})`}</span>
 					)}
 				</span>
 				{member.secondary && (
-					<span className="cmt-mention-list__secondary">{member.secondary}</span>
+					<span className="tlui-cmt-mention-list__secondary">{member.secondary}</span>
 				)}
 			</span>
 		</>
@@ -69,13 +66,13 @@ export function MentionList({
 	const msg = useTranslation()
 	if (members.length === 0) {
 		return (
-			<div className="cmt-mention-list cmt-mention-list--empty">
+			<div className="tlui-cmt-mention-list tlui-cmt-mention-list--empty">
 				{emptyLabel ?? msg('comments.mention-no-matches')}
 			</div>
 		)
 	}
 	return (
-		<div className="cmt-mention-list" role="listbox">
+		<div className="tlui-cmt-mention-list" role="listbox">
 			{members.map((member, i) => {
 				const active = i === activeIndex
 				return (
@@ -86,8 +83,8 @@ export function MentionList({
 						aria-selected={active}
 						className={
 							active
-								? 'cmt-mention-list__item cmt-mention-list__item--active'
-								: 'cmt-mention-list__item'
+								? 'tlui-cmt-mention-list__item tlui-cmt-mention-list__item--active'
+								: 'tlui-cmt-mention-list__item'
 						}
 						// Keep the composer focused on a row press: it's portaled outside the editor, so a
 						// bare mousedown would blur the composer — which now dismisses the picker — before

package/src/ui/mention-suggestion.tsx

@@ -139,7 +139,7 @@ export function createMentionSuggestion(
 			// the caret, matching its width), and remember the field's page-space anchor for reposition.
 			const place = () => {
 				if (!container || !editorEl || container.style.display === 'none') return
-				const field = editorEl.closest('.cmt-composer__field') ?? editorEl
+				const field = editorEl.closest('.tlui-cmt-composer__field') ?? editorEl
 				const rect = field.getBoundingClientRect()
 				popupWidth = rect.width
 				anchorPage = options.editor?.screenToPage({ x: rect.left, y: rect.bottom }) ?? null
@@ -193,7 +193,7 @@ export function createMentionSuggestion(
 			// only redispatch when it can't). Done imperatively because the popup lives outside React.
 			const onWheel = (e: WheelEvent) => {
 				if ((e as any).isSpecialRedispatchedEvent || !canvasEl) return
-				const list = container?.querySelector('.cmt-mention-list')
+				const list = container?.querySelector('.tlui-cmt-mention-list')
 				if (list && list.scrollHeight > list.clientHeight) return
 				e.preventDefault()
 				const redispatched = new WheelEvent('wheel', e)
@@ -217,7 +217,7 @@ export function createMentionSuggestion(
 					// composer — leaving Escape a no-op and the roster stuck on screen.
 					editorEl.addEventListener('blur', hide)
 					container = document.createElement('div')
-					container.className = 'cmt-mention-popup'
+					container.className = 'tlui-cmt-mention-popup'
 					container.appendChild(renderer.element)
 					// Mount inside the tldraw container so the popup inherits the theme variables
 					// (--tl-color-*); portaling to document.body would strip them and lose the panel.

package/src/ui/mention.tsx

@@ -5,5 +5,5 @@ export interface MentionProps {
 
 /** An \@-mention pill for referencing a person in a comment. @public @react */
 export function Mention({ name }: MentionProps) {
-	return <span className="cmt-mention">@{name}</span>
+	return <span className="tlui-cmt-mention">@{name}</span>
 }

package/src/ui/reaction.tsx

@@ -8,9 +8,12 @@ export interface ReactionProps {
 /** A single emoji reaction pill with a count, highlighted when the user reacted. @public @react */
 export function Reaction({ emoji, count, active }: ReactionProps) {
 	return (
-		<button className={active ? 'cmt-reaction cmt-reaction--active' : 'cmt-reaction'} type="button">
-			<span className="cmt-reaction__emoji">{emoji}</span>
-			<span className="cmt-reaction__count">{count}</span>
+		<button
+			className={active ? 'tlui-cmt-reaction tlui-cmt-reaction--active' : 'tlui-cmt-reaction'}
+			type="button"
+		>
+			<span className="tlui-cmt-reaction__emoji">{emoji}</span>
+			<span className="tlui-cmt-reaction__count">{count}</span>
 		</button>
 	)
 }

package/src/ui/reactions.tsx

@@ -3,11 +3,15 @@ import { Reaction } from './reaction'
 /** The row of reactions under a comment, plus an add-reaction button. @public @react */
 export function Reactions() {
 	return (
-		<div className="cmt-reactions">
+		<div className="tlui-cmt-reactions">
 			<Reaction emoji="👍" count={3} active={true} />
 			<Reaction emoji="🎉" count={1} active={false} />
 			<Reaction emoji="👀" count={2} active={false} />
-			<button className="cmt-reaction cmt-reaction--add" type="button" aria-label="Add reaction">
+			<button
+				className="tlui-cmt-reaction tlui-cmt-reaction--add"
+				type="button"
+				aria-label="Add reaction"
+			>
 				＋
 			</button>
 		</div>

package/src/ui/send-button.tsx

@@ -8,7 +8,7 @@ export interface SendButtonProps {
 /** The button that posts a comment. @public @react */
 export function SendButton({ label, disabled, onClick }: SendButtonProps) {
 	return (
-		<button className="cmt-send" type="button" disabled={disabled} onClick={onClick}>
+		<button className="tlui-cmt-send" type="button" disabled={disabled} onClick={onClick}>
 			{label}
 		</button>
 	)

package/src/ui/tooltip-button.tsx

@@ -0,0 +1,20 @@
+import { type ButtonHTMLAttributes, forwardRef } from 'react'
+import { TldrawUiTooltip } from 'tldraw'
+
+interface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	tooltip: string
+}
+
+/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button
+ *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */
+export const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(
+	function TooltipButton({ tooltip, children, ...props }, ref) {
+		return (
+			<TldrawUiTooltip content={tooltip}>
+				<button ref={ref} type="button" aria-label={tooltip} {...props}>
+					{children}
+				</button>
+			</TldrawUiTooltip>
+		)
+	}
+)