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

package/src/ui/count-badge.tsx

@@ -1,9 +1,16 @@
 /** @public */
 export interface CountBadgeProps {
 	count: number
+	/** The badge's list is showing — shows the active/selected indicator state, as an open pin does. */
+	open?: boolean
 }
 
 /** @public @react */
-export function CountBadge({ count }: CountBadgeProps) {
-	return <div className="cmt-count-badge">{count}</div>
+export function CountBadge({ count, open }: CountBadgeProps) {
+	// `tlui-cmt-marker` carries the resting shadow, the hover lift, and the open ring — the same
+	// treatment a comment pin wears, so the two markers behave alike.
+	const className = ['tlui-cmt-marker', 'tlui-cmt-count-badge', open && 'tlui-cmt-marker--open']
+		.filter(Boolean)
+		.join(' ')
+	return <div className={className}>{count}</div>
 }

package/src/ui/emoji-picker.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { DEFAULT_REACTION_EMOJI, isAllowedReactionEmoji } from './emoji-picker'
+
+describe('isAllowedReactionEmoji', () => {
+	it('accepts every emoji in the default palette', () => {
+		for (const emoji of DEFAULT_REACTION_EMOJI) {
+			expect(isAllowedReactionEmoji(emoji)).toBe(true)
+		}
+	})
+
+	it('rejects emoji not in the palette', () => {
+		expect(isAllowedReactionEmoji('🦄')).toBe(false)
+	})
+
+	// the record's emoji field is a free string, so this is the guard against junk values
+	it('rejects arbitrary non-emoji strings', () => {
+		expect(isAllowedReactionEmoji('not an emoji')).toBe(false)
+		expect(isAllowedReactionEmoji('')).toBe(false)
+	})
+
+	it('checks against a custom palette when given one', () => {
+		expect(isAllowedReactionEmoji('🦄', ['🦄', '🌈'])).toBe(true)
+		expect(isAllowedReactionEmoji('👍', ['🦄', '🌈'])).toBe(false)
+	})
+})

package/src/ui/emoji-picker.tsx

@@ -0,0 +1,76 @@
+import { RenderReaction, defaultRenderReaction } from './reaction'
+
+/**
+ * The reaction emoji palette: the small, opinionated set the picker offers *and* the set a
+ * reaction is allowed to use. It's deliberately short — a quick affordance under a comment, not a
+ * full emoji keyboard — and it's the single source of truth for "which emoji may a reaction
+ * carry". A reaction's `emoji` field is a free-form `string`, so this palette is what keeps it to
+ * real, offered emoji; check membership with {@link isAllowedReactionEmoji}. Pass a custom `emoji`
+ * array to `ReactionPicker` to offer a different set — validate against that same set if you do.
+ *
+ * @public
+ */
+export const DEFAULT_REACTION_EMOJI = ['👍', '👎', '❤️', '🎉', '😄', '😮', '😢', '🙏', '👀', '🔥']
+
+/**
+ * Whether `emoji` belongs to a reaction palette (defaults to {@link DEFAULT_REACTION_EMOJI}). Use
+ * it to reject arbitrary strings before writing a reaction, so a scripted client can't spam a
+ * comment with junk `emoji` values that the picker would never offer. Pass a custom `palette` to
+ * match a customized picker.
+ *
+ * @public
+ */
+export function isAllowedReactionEmoji(
+	emoji: string,
+	palette: readonly string[] = DEFAULT_REACTION_EMOJI
+): boolean {
+	return palette.includes(emoji)
+}
+
+/** @public */
+export interface EmojiPickerProps {
+	/** The emoji to offer. Defaults to `DEFAULT_REACTION_EMOJI`. */
+	emoji?: string[]
+	/** Emoji the current user has already reacted with; shown as pressed. */
+	selected?: string[]
+	/** Called when an emoji is chosen. */
+	onSelect?(emoji: string): void
+	/** How to draw each emoji token. Defaults to the token string (OS emoji font). */
+	renderReaction?: RenderReaction
+}
+
+/**
+ * A grid of emoji to react with. Presentational and unpositioned — the host owns placement and
+ * dismissal; `ReactionPicker` renders it in a dropdown under the add-reaction button.
+ * @public @react
+ */
+export function EmojiPicker({
+	emoji = DEFAULT_REACTION_EMOJI,
+	selected,
+	onSelect,
+	renderReaction = defaultRenderReaction,
+}: EmojiPickerProps) {
+	return (
+		<div className="tlui-cmt-emoji-picker" role="group">
+			{emoji.map((value) => {
+				const active = selected?.includes(value) ?? false
+				return (
+					<button
+						key={value}
+						type="button"
+						className={
+							active
+								? 'tlui-cmt-emoji-picker__item tlui-cmt-emoji-picker__item--active'
+								: 'tlui-cmt-emoji-picker__item'
+						}
+						aria-label={value}
+						aria-pressed={active}
+						onClick={() => onSelect?.(value)}
+					>
+						{renderReaction(value)}
+					</button>
+				)
+			})}
+		</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

@@ -9,7 +9,7 @@ const DIVISIONS = [
 ] as const
 
 /**
- * Format an ISO datetime as relative time ("2 hours ago", "yesterday", "last week").
+ * Format an ISO datetime as short relative time ("2 hr. ago", "yesterday", "last wk.").
  * Locale-aware via Intl.RelativeTimeFormat.
  * @public
  */
@@ -17,8 +17,13 @@ export function formatRelativeTime(iso: string, locale = 'en'): string {
 	const then = new Date(iso).getTime()
 	if (Number.isNaN(then)) return ''
 
-	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'short' })
 	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/reaction-picker.tsx

@@ -0,0 +1,109 @@
+import { useCallback, useId, type ComponentType } from 'react'
+import {
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuTrigger,
+	tlmenus,
+	useMaybeEditor,
+	useTranslation,
+} from 'tldraw'
+import { EmojiPicker, type EmojiPickerProps } from './emoji-picker'
+import { RenderReaction } from './reaction'
+import { TooltipButton } from './tooltip-button'
+
+/** @public */
+export interface ReactionPickerProps {
+	/** The emoji to offer. Defaults to `DEFAULT_REACTION_EMOJI`. */
+	emoji?: string[]
+	/** Emoji the current user has already reacted with; shown as pressed in the grid. */
+	selected?: string[]
+	/** Called when an emoji is chosen. */
+	onSelect?(emoji: string): void
+	/** How to draw each emoji token. Defaults to the token string (OS emoji font). */
+	renderReaction?: RenderReaction
+	/**
+	 * What the button opens — the thing that produces a token. Defaults to `EmojiPicker`, the grid of
+	 * emoji. Swap it for any component taking the same props to offer something else entirely (the
+	 * drawn reactions example replaces it with a canvas you draw in); the props are passed straight
+	 * through either way.
+	 */
+	palette?: ComponentType<EmojiPickerProps>
+	/**
+	 * Identifies the menu in tldraw's global menu registry, which keys open/closed state by id.
+	 * A thread renders one picker per comment, so this must differ per comment — sharing an id
+	 * makes every picker in the thread open at once. Defaults to a per-instance generated id;
+	 * pass one only for a stabler, more debuggable value.
+	 */
+	menuId?: string
+	/** Class for the trigger button. Defaults to the card-action style, matching the ⋯ button. */
+	className?: string
+}
+
+/**
+ * The add-reaction affordance: a smiley button that opens an emoji grid.
+ *
+ * Anchored to its own button rather than to the reactions row, so the menu keeps its position as
+ * reactions are added and the row reflows.
+ *
+ * Picking an emoji dismisses the grid — adding and removing alike, since either way the picker has
+ * done its job — and hands focus back to the trigger.
+ * @public @react
+ */
+export function ReactionPicker({
+	emoji,
+	selected,
+	onSelect,
+	renderReaction,
+	palette: Palette = EmojiPicker,
+	menuId,
+	className = 'tlui-cmt-thread__action',
+}: ReactionPickerProps) {
+	const msg = useTranslation()
+	const editor = useMaybeEditor()
+	// Unique per mounted picker unless the host supplies something stabler — see `menuId`.
+	const generatedId = useId()
+	const id = menuId ?? `comment-reactions-${generatedId}`
+
+	// The dropdown's open state lives in tldraw's global menu registry, so dropping the entry is
+	// what closes it. The palette's tokens are plain buttons — a swappable component, not radix
+	// menu items — so nothing dismisses the menu on its own.
+	const handleSelect = useCallback(
+		(value: string) => {
+			onSelect?.(value)
+			tlmenus.deleteOpenMenu(id, editor?.contextId)
+		},
+		[onSelect, id, editor]
+	)
+
+	return (
+		<TldrawUiDropdownMenuRoot id={id}>
+			<TldrawUiDropdownMenuTrigger>
+				<TooltipButton tooltip={msg('comments.add-reaction')} className={className}>
+					<SmileyIcon />
+				</TooltipButton>
+			</TldrawUiDropdownMenuTrigger>
+			{/* left-aligned under the trigger, so the grid opens rightward off the card's edge */}
+			<TldrawUiDropdownMenuContent side="bottom" align="start" alignOffset={0} sideOffset={4}>
+				<Palette
+					emoji={emoji}
+					selected={selected}
+					onSelect={handleSelect}
+					renderReaction={renderReaction}
+				/>
+			</TldrawUiDropdownMenuContent>
+		</TldrawUiDropdownMenuRoot>
+	)
+}
+
+function SmileyIcon() {
+	return (
+		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+			<path
+				d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82708 7.49972C1.82708 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82708 10.6327 1.82708 7.49972ZM5.03747 9.21395C4.87949 8.98746 4.56782 8.93193 4.34133 9.08991C4.11484 9.24789 4.05931 9.55956 4.21729 9.78605C4.93926 10.8211 6.14033 11.5 7.50004 11.5C8.85974 11.5 10.0608 10.8211 10.7828 9.78605C10.9408 9.55956 10.8852 9.24789 10.6587 9.08991C10.4323 8.93193 10.1206 8.98746 9.9626 9.21395C9.41963 9.99238 8.51907 10.5 7.50004 10.5C6.481 10.5 5.58044 9.99238 5.03747 9.21395ZM5.37503 6.84998C5.85828 6.84998 6.25003 6.45815 6.25003 5.97498C6.25003 5.4918 5.85828 5.09998 5.37503 5.09998C4.89179 5.09998 4.50003 5.4918 4.50003 5.97498C4.50003 6.45815 4.89179 6.84998 5.37503 6.84998ZM10.5 5.97498C10.5 6.45815 10.1083 6.84998 9.62503 6.84998C9.14179 6.84998 8.75003 6.45815 8.75003 5.97498C8.75003 5.4918 9.14179 5.09998 9.62503 5.09998C10.1083 5.09998 10.5 5.4918 10.5 5.97498Z"
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			/>
+		</svg>
+	)
+}

package/src/ui/reaction.tsx

@@ -1,16 +1,131 @@
+import { ComponentType, ReactNode } from 'react'
+import { TldrawUiTooltip, useTranslation } from 'tldraw'
+import { ReactionReactor } from './reactions'
+
+/** Render a reaction token to its visual — the emoji glyph by default. @public */
+export type RenderReaction = (token: string) => ReactNode
+
+/** The default reaction renderer: emits the token string for the OS emoji font to draw. @public */
+export function defaultRenderReaction(token: string): ReactNode {
+	return token
+}
+
 /** @public */
 export interface ReactionProps {
 	emoji: string
 	count: number
 	active: boolean
+	/** How to draw the emoji token. Defaults to the token string (OS emoji font). */
+	renderReaction?: RenderReaction
+	/** Who reacted with this emoji, in reaction order — shown when the pill is hovered. */
+	reactors: ReactionReactor[]
+	/** Whether hovering shows the reactor list. Pass false to suppress it — e.g. while another
+	 *  popup menu on the comment is open. Defaults to true. */
+	enableHoverList?: boolean
+	/** The hover affordance for the pill, naming who reacted. It receives the reactors and the pill
+	 *  itself (as `children`) and returns the whole thing — so it owns the tooltip, its box, size,
+	 *  shape, and position, not just the text inside. Defaults to `DefaultReactionTooltip`, which
+	 *  hangs the built-in inline sentence below the pill. */
+	ReactionTooltip?: ComponentType<ReactionTooltipProps>
+	/** Called when the pill is pressed — toggles the current user's reaction. */
+	onClick?(): void
 }
 
-/** 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>
+/**
+ * A single emoji reaction pill with a count, highlighted when the user reacted. Hovering it shows a
+ * tooltip naming who reacted (the current user included), when `enableHoverList` is set.
+ * @public @react
+ */
+export function Reaction({
+	emoji,
+	count,
+	active,
+	reactors,
+	enableHoverList = true,
+	renderReaction = defaultRenderReaction,
+	ReactionTooltip = DefaultReactionTooltip,
+	onClick,
+}: ReactionProps) {
+	const pill = (
+		<button
+			className={active ? 'tlui-cmt-reaction tlui-cmt-reaction--active' : 'tlui-cmt-reaction'}
+			type="button"
+			// The emoji alone announces as its unicode name ("thumbs up"); pairing it with the count
+			// is what makes the pill's state legible to a screen reader.
+			aria-label={`${emoji} ${count}`}
+			aria-pressed={active}
+			onClick={onClick}
+		>
+			<span className="tlui-cmt-reaction__emoji">{renderReaction(emoji)}</span>
+			<span className="tlui-cmt-reaction__count">{count}</span>
 		</button>
 	)
+
+	// A bare pill when hovering is suppressed, or when there's no one to name.
+	if (!enableHoverList || reactors.length === 0) return pill
+
+	// Hand the whole hover affordance to the tooltip component: it wraps the pill and owns how the
+	// reactor list is presented.
+	return <ReactionTooltip reactors={reactors}>{pill}</ReactionTooltip>
+}
+
+/** @public */
+export interface ReactionTooltipProps {
+	/** Who reacted with this emoji, in reaction order. */
+	reactors: ReactionReactor[]
+	/** The reaction pill to wrap. Anchor the hover affordance to this and render it. */
+	children: ReactNode
+}
+
+/**
+ * The default reactor tooltip: hangs the built-in inline sentence (`DefaultReactionTooltipContent`)
+ * in a standard tooltip below the pill — the same tooltip the toolbar uses. Replace it via
+ * `CommentingComponents.ReactionTooltip` to present the reactor list any other way (a different box,
+ * avatars, a banner, anywhere on screen); it receives the pill as `children`.
+ * @public @react
+ */
+export function DefaultReactionTooltip({ reactors, children }: ReactionTooltipProps) {
+	return (
+		<TldrawUiTooltip side="bottom" content={<DefaultReactionTooltipContent reactors={reactors} />}>
+			{children}
+		</TldrawUiTooltip>
+	)
+}
+
+/**
+ * The default reactor sentence naming who reacted — up to three names spelled out, then "and N
+ * others" (e.g. "You reacted", "You and Bo reacted", "You, Bo and Ada reacted", "You, Bo, Ada and 2
+ * others reacted"). The wording lives in the `comments.reacted-*` translation strings so each locale
+ * controls the grammar. Exported so a custom `ReactionTooltip` can reuse it inside its own box.
+ * @public @react
+ */
+export function DefaultReactionTooltipContent({ reactors }: { reactors: ReactionReactor[] }) {
+	const msg = useTranslation()
+	const names = reactors.map((reactor) =>
+		reactor.you ? msg('comments.mention-you') : reactor.name
+	)
+	const [a, b, c] = names
+	switch (names.length) {
+		case 0:
+			return null
+		case 1:
+			return <>{msg('comments.reacted-1').replace('{a}', a)}</>
+		case 2:
+			return <>{msg('comments.reacted-2').replace('{a}', a).replace('{b}', b)}</>
+		case 3:
+			return <>{msg('comments.reacted-3').replace('{a}', a).replace('{b}', b).replace('{c}', c)}</>
+		default: {
+			const others = names.length - 3
+			const template = others === 1 ? 'comments.reacted-more-one' : 'comments.reacted-more'
+			return (
+				<>
+					{msg(template)
+						.replace('{a}', a)
+						.replace('{b}', b)
+						.replace('{c}', c)
+						.replace('{count}', String(others))}
+				</>
+			)
+		}
+	}
 }

package/src/ui/reactions.tsx

@@ -1,15 +1,74 @@
-import { Reaction } from './reaction'
+import { ComponentType } from 'react'
+import { Reaction, ReactionTooltipProps, RenderReaction } from './reaction'
 
-/** The row of reactions under a comment, plus an add-reaction button. @public @react */
-export function Reactions() {
+/** One person who reacted with a given emoji, for the hover list. @public */
+export interface ReactionReactor {
+	/** Display name of the person who reacted. */
+	name: string
+	/** True for the current user. */
+	you: boolean
+}
+
+/** One emoji's reactions on a comment, already tallied. @public */
+export interface ReactionSummary {
+	emoji: string
+	/** How many people reacted with this emoji. */
+	count: number
+	/** True when the current user is one of them — renders the pill highlighted. */
+	active: boolean
+	/** Who reacted with this emoji, in reaction order — shown in the hover list. */
+	reactors: ReactionReactor[]
+}
+
+/** @public */
+export interface ReactionsProps {
+	/** The comment's reactions, grouped by emoji. Empty renders nothing. */
+	reactions: ReactionSummary[]
+	/** Toggles the current user's reaction for an emoji. */
+	onToggle?(emoji: string): void
+	/** Whether the current user may react. False makes the pills inert (e.g. a signed-out
+	 *  viewer, or a read-only thread) while still showing counts. */
+	canReact?: boolean
+	/** Whether hovering a pill shows its reactor list. Pass false to suppress it — e.g. while
+	 *  another popup menu on the comment is open. Defaults to true. */
+	enableHoverList?: boolean
+	/** How to draw each emoji token. Defaults to the token string (OS emoji font). */
+	renderReaction?: RenderReaction
+	/** The tooltip naming who reacted, shown when a pill is hovered. Defaults to an inline sentence
+	 *  (`DefaultReactionTooltip`). Swap it to render the reactor list however you like. */
+	ReactionTooltip?: ComponentType<ReactionTooltipProps>
+}
+
+/**
+ * The row of tallied reactions under a comment. Presentational — the host supplies the summaries
+ * and owns what toggling does. Hovering a pill lists who reacted (see `Reaction`).
+ *
+ * The add-reaction affordance is a separate component (`ReactionPicker`) so it can live outside
+ * this row — on a comment card it sits with the card's hover actions, which keeps its position
+ * fixed as reactions are added here.
+ * @public @react
+ */
+export function Reactions({
+	reactions,
+	onToggle,
+	canReact = true,
+	enableHoverList = true,
+	renderReaction,
+	ReactionTooltip,
+}: ReactionsProps) {
+	if (reactions.length === 0) return null
 	return (
-		<div className="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>
+		<div className="tlui-cmt-reactions">
+			{reactions.map((reaction) => (
+				<Reaction
+					key={reaction.emoji}
+					{...reaction}
+					enableHoverList={enableHoverList}
+					renderReaction={renderReaction}
+					ReactionTooltip={ReactionTooltip}
+					onClick={canReact ? () => onToggle?.(reaction.emoji) : undefined}
+				/>
+			))}
 		</div>
 	)
 }

package/src/ui/reply-count.ts

@@ -0,0 +1,16 @@
+import { useTranslation } from 'tldraw'
+
+/**
+ * The localized "N replies" label (e.g. "1 reply", "3 replies") for a thread with `replyCount`
+ * replies — the comments after the opening one. Returns null when there are none, so callers render
+ * nothing rather than "0 replies". Shared by the sidebar row and the hover preview so both read the
+ * same, with each site owning where it puts the text.
+ */
+export function replyCountLabel(
+	msg: ReturnType<typeof useTranslation>,
+	replyCount: number
+): string | null {
+	if (replyCount <= 0) return null
+	const key = replyCount === 1 ? 'comments.replies-one' : 'comments.replies'
+	return msg(key).replace('{count}', String(replyCount))
+}

package/src/ui/send-button.tsx

@@ -1,15 +1,30 @@
 /** @public */
 export interface SendButtonProps {
+	/** The button's accessible name (e.g. "Send"). Shown as an up-arrow icon, so this is its label. */
 	label: string
 	disabled?: boolean
 	onClick?(): void
 }
 
-/** The button that posts a comment. @public @react */
+/** The button that posts a comment — an up arrow. @public @react */
 export function SendButton({ label, disabled, onClick }: SendButtonProps) {
 	return (
-		<button className="cmt-send" type="button" disabled={disabled} onClick={onClick}>
-			{label}
+		<button
+			className="tlui-cmt-send"
+			type="button"
+			disabled={disabled}
+			onClick={onClick}
+			aria-label={label}
+			title={label}
+		>
+			<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+				<path
+					d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z"
+					fill="currentColor"
+					fillRule="evenodd"
+					clipRule="evenodd"
+				/>
+			</svg>
 		</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>
+		)
+	}
+)

package/dist-cjs/canvas/region-options.js

@@ -1,49 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var region_options_exports = {};
-__export(region_options_exports, {
-  DEFAULT_REGION_COMMENT_OPTIONS: () => DEFAULT_REGION_COMMENT_OPTIONS,
-  getRegionCommentOptions: () => getRegionCommentOptions,
-  setRegionCommentOptions: () => setRegionCommentOptions
-});
-module.exports = __toCommonJS(region_options_exports);
-var import_tldraw = require("tldraw");
-const DEFAULT_REGION_COMMENT_OPTIONS = {
-  enabled: false,
-  pinCorner: { x: 1, y: 1 },
-  reveal: "pointer",
-  move: "pin",
-  resize: "corners"
-};
-const byEditor = /* @__PURE__ */ new WeakMap();
-function getEditorAtom(editor) {
-  let a = byEditor.get(editor);
-  if (!a) {
-    a = (0, import_tldraw.atom)("regionCommentOptions", DEFAULT_REGION_COMMENT_OPTIONS);
-    byEditor.set(editor, a);
-  }
-  return a;
-}
-function setRegionCommentOptions(editor, options) {
-  getEditorAtom(editor).set(options);
-}
-function getRegionCommentOptions(editor) {
-  return getEditorAtom(editor).get();
-}
-//# sourceMappingURL=region-options.js.map

package/dist-cjs/canvas/region-options.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/canvas/region-options.ts"],
-  "sourcesContent": ["import { atom, Atom, Editor, VecLike } from 'tldraw'\n\n/**\n * The configurable dimensions of region comments \u2014 a design surface for prototyping the interaction\n * before settling it. Region is **off by default**, so a consumer that leaves it unset keeps plain\n * click-only point/shape commenting. Set it per editor through `<CanvasComments regionOptions>`.\n * @public\n */\nexport interface RegionCommentOptions {\n\t/** Whether dragging the comment tool out creates a region anchor. Off \u2192 click-only. */\n\tenabled: boolean\n\t/** Which corner the pin and composer sit on, as a normalized 0\u20131 offset. Default bottom-right. */\n\tpinCorner: VecLike\n\t/** When the dashed box and its handles reveal: while the pointer is within the region, while the\n\t *  pin is hovered, or only while the thread is open. */\n\treveal: 'pointer' | 'pin-hover' | 'open'\n\t/** How a region is moved: dragging its pin, dragging its body, or either. */\n\tmove: 'pin' | 'body' | 'both'\n\t/** The resize affordance: corner handles, edge handles, or none. */\n\tresize: 'corners' | 'edges' | 'none'\n}\n\n/** The out-of-the-box region config: disabled, and \u2014 when a consumer enables it \u2014 the current\n *  bottom-right / pointer-reveal / pin-move / corner-resize behaviour.\n * @public */\nexport const DEFAULT_REGION_COMMENT_OPTIONS: RegionCommentOptions = {\n\tenabled: false,\n\tpinCorner: { x: 1, y: 1 },\n\treveal: 'pointer',\n\tmove: 'pin',\n\tresize: 'corners',\n}\n\n// Per-editor region config. The overlay publishes its merged `regionOptions` here so the comment\n// tool \u2014 which has no props of its own \u2014 can read the same per-instance config at interaction time.\n// Held in an atom so reactive readers (e.g. `anchorPagePoint`, called inside `useValue`) recompute\n// when the config changes; a plain map read wouldn't, leaving the pin at the stale default corner.\nconst byEditor = new WeakMap<Editor, Atom<RegionCommentOptions>>()\n\nfunction getEditorAtom(editor: Editor): Atom<RegionCommentOptions> {\n\tlet a = byEditor.get(editor)\n\tif (!a) {\n\t\ta = atom('regionCommentOptions', DEFAULT_REGION_COMMENT_OPTIONS)\n\t\tbyEditor.set(editor, a)\n\t}\n\treturn a\n}\n\n/** Publish an editor's region config (called by the overlay from its `regionOptions` prop). */\nexport function setRegionCommentOptions(editor: Editor, options: RegionCommentOptions): void {\n\tgetEditorAtom(editor).set(options)\n}\n\n/** The editor's region config, or the disabled default when none was set. */\nexport function getRegionCommentOptions(editor: Editor): RegionCommentOptions {\n\treturn getEditorAtom(editor).get()\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA4C;AAyBrC,MAAM,iCAAuD;AAAA,EACnE,SAAS;AAAA,EACT,WAAW,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EACxB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACT;AAMA,MAAM,WAAW,oBAAI,QAA4C;AAEjE,SAAS,cAAc,QAA4C;AAClE,MAAI,IAAI,SAAS,IAAI,MAAM;AAC3B,MAAI,CAAC,GAAG;AACP,YAAI,oBAAK,wBAAwB,8BAA8B;AAC/D,aAAS,IAAI,QAAQ,CAAC;AAAA,EACvB;AACA,SAAO;AACR;AAGO,SAAS,wBAAwB,QAAgB,SAAqC;AAC5F,gBAAc,MAAM,EAAE,IAAI,OAAO;AAClC;AAGO,SAAS,wBAAwB,QAAsC;AAC7E,SAAO,cAAc,MAAM,EAAE,IAAI;AAClC;",
-  "names": []
-}