@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/message-item/message-item-delegated.d.mts

@@ -0,0 +1,38 @@
+import { AvatarBadgeProps } from "../avatar/avatar.mjs";
+import "../avatar/index.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-delegated.d.ts
+export type MessageItemDelegatedByProps = useRender.ComponentProps<"span">;
+/**
+ * Says an assistant sent the message for its owner, the sender: "sent by
+ * Friday". Put it in `MessageItemHeader` after `MessageItemSenderGroup`, and
+ * the assistant's name in `MessageItemDelegatedByName` or
+ * `MessageItemDelegatedByButton`. The words, and the spaces around the name,
+ * come from the product. It takes at most 45% of the line: past that only
+ * the name truncates, never the words.
+ */
+export declare function MessageItemDelegatedBy({ className, render, ...props }: MessageItemDelegatedByProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemDelegatedByNameProps = useRender.ComponentProps<"span">;
+/** The assistant's name in `MessageItemDelegatedBy`, the part that truncates. */
+export declare function MessageItemDelegatedByName({ className, render, ...props }: MessageItemDelegatedByNameProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemDelegatedByButtonProps = useRender.ComponentProps<"button">;
+/**
+ * The assistant's name when it opens the assistant's profile: a `<button>`
+ * (or a link through `render`) that underlines on hover and truncates like
+ * `MessageItemDelegatedByName`.
+ */
+export declare function MessageItemDelegatedByButton({ className, render, ...props }: MessageItemDelegatedByButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemDelegatedAvatarProps = Omit<AvatarBadgeProps, "presence" | "offset"> & {
+  /** The assistant was deleted: its face is grayed and faded, over the
+   *  row's surface, never the owner's avatar. */
+  deleted?: boolean;
+};
+/**
+ * The assistant's face on its owner's avatar, in the corner a presence light
+ * takes: put it inside the owner's `md` `Avatar` with a `2xs` agent `Avatar`
+ * as its child. It is hidden from assistive technology, because
+ * `MessageItemDelegatedBy` already says who sent the message. Only on a
+ * person's avatar: an agent's corner is its presence light.
+ */
+export declare function MessageItemDelegatedAvatar({ className, deleted, ...props }: MessageItemDelegatedAvatarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/message-item/message-item-delegated.mjs

@@ -0,0 +1,72 @@
+import { AvatarBadge } from "../avatar/avatar.mjs";
+import { messageItem } from "./message-item.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-delegated.tsx
+/**
+* Says an assistant sent the message for its owner, the sender: "sent by
+* Friday". Put it in `MessageItemHeader` after `MessageItemSenderGroup`, and
+* the assistant's name in `MessageItemDelegatedByName` or
+* `MessageItemDelegatedByButton`. The words, and the spaces around the name,
+* come from the product. It takes at most 45% of the line: past that only
+* the name truncates, never the words.
+*/
+function MessageItemDelegatedBy({ className, render, ...props }) {
+	const { delegatedBy } = messageItem();
+	const defaultProps = { className: delegatedBy({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-delegated-by" }
+	});
+}
+/** The assistant's name in `MessageItemDelegatedBy`, the part that truncates. */
+function MessageItemDelegatedByName({ className, render, ...props }) {
+	const { delegatedByName } = messageItem();
+	const defaultProps = { className: delegatedByName({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-delegated-by-name" }
+	});
+}
+/**
+* The assistant's name when it opens the assistant's profile: a `<button>`
+* (or a link through `render`) that underlines on hover and truncates like
+* `MessageItemDelegatedByName`.
+*/
+function MessageItemDelegatedByButton({ className, render, ...props }) {
+	const { delegatedByButton } = messageItem();
+	const defaultProps = {
+		type: "button",
+		className: delegatedByButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-delegated-by-button" }
+	});
+}
+/**
+* The assistant's face on its owner's avatar, in the corner a presence light
+* takes: put it inside the owner's `md` `Avatar` with a `2xs` agent `Avatar`
+* as its child. It is hidden from assistive technology, because
+* `MessageItemDelegatedBy` already says who sent the message. Only on a
+* person's avatar: an agent's corner is its presence light.
+*/
+function MessageItemDelegatedAvatar({ className, deleted, ...props }) {
+	const { delegatedAvatar } = messageItem();
+	return /* @__PURE__ */ jsx(AvatarBadge, {
+		"aria-hidden": true,
+		"data-deleted": deleted ? "" : void 0,
+		className: delegatedAvatar({ className }),
+		render: /* @__PURE__ */ jsx("span", {}),
+		...props
+	});
+}
+//#endregion
+export { MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName };

package/dist/components/message-item/message-item-gutter.d.mts

@@ -0,0 +1,10 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-gutter.d.ts
+export type MessageItemGutterProps = useRender.ComponentProps<"div">;
+export declare function MessageItemGutter({ className, render, ...props }: MessageItemGutterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemAvatarSlotProps = useRender.ComponentProps<"div">;
+export declare function MessageItemAvatarSlot({ className, render, ...props }: MessageItemAvatarSlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemContinuationTimeProps = useRender.ComponentProps<"time">;
+/** Left-gutter hover clock for continuation rows, a `<time>`: pass the moment in `dateTime`. Show the hour and minute only, in the person's 12h/24h format, with no AM/PM (`6:35`, `18:35`). */
+export declare function MessageItemContinuationTime({ className, id, render, ...props }: MessageItemContinuationTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/message-item/message-item-gutter.mjs

@@ -0,0 +1,41 @@
+import { useMessageItemLabelId } from "./message-item-label.mjs";
+import { messageItem } from "./message-item.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-gutter.tsx
+function MessageItemGutter({ className, render, ...props }) {
+	const { gutter } = messageItem();
+	const defaultProps = { className: gutter({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-gutter" }
+	});
+}
+function MessageItemAvatarSlot({ className, render, ...props }) {
+	const { avatarSlot } = messageItem();
+	const defaultProps = { className: avatarSlot({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-avatar-slot" }
+	});
+}
+/** Left-gutter hover clock for continuation rows, a `<time>`: pass the moment in `dateTime`. Show the hour and minute only, in the person's 12h/24h format, with no AM/PM (`6:35`, `18:35`). */
+function MessageItemContinuationTime({ className, id, render, ...props }) {
+	const { continuationTime } = messageItem();
+	const defaultProps = {
+		id: useMessageItemLabelId("time", id),
+		className: continuationTime({ className })
+	};
+	return useRender({
+		defaultTagName: "time",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-continuation-time" }
+	});
+}
+//#endregion
+export { MessageItemAvatarSlot, MessageItemContinuationTime, MessageItemGutter };

package/dist/components/message-item/message-item-header.d.mts

@@ -0,0 +1,29 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-header.d.ts
+export type MessageItemHeaderProps = useRender.ComponentProps<"div">;
+export declare function MessageItemHeader({ className, render, ...props }: MessageItemHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemSenderGroupProps = useRender.ComponentProps<"span">;
+/**
+ * Holds the sender, its badges and its role, and decides who gives way when
+ * the header runs out of room: the role truncates first, then the name. The
+ * badges stay whole beside the name, and the time, outside the group, never
+ * truncates.
+ */
+export declare function MessageItemSenderGroup({ className, render, ...props }: MessageItemSenderGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemSenderProps = useRender.ComponentProps<"span">;
+export declare function MessageItemSender({ className, id, render, ...props }: MessageItemSenderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemSenderButtonProps = useRender.ComponentProps<"button">;
+export declare function MessageItemSenderButton({ className, id, render, ...props }: MessageItemSenderButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemSenderBadgesProps = useRender.ComponentProps<"span">;
+export declare function MessageItemSenderBadges({ className, render, ...props }: MessageItemSenderBadgesProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemMetaProps = useRender.ComponentProps<"span">;
+export declare function MessageItemMeta({ className, render, ...props }: MessageItemMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemTimeProps = useRender.ComponentProps<"time">;
+/**
+ * The message's time, right after the sender. A `<time>`: pass the moment in
+ * `dateTime` (ISO 8601) and the full date and time as its tooltip.
+ */
+export declare function MessageItemTime({ className, id, render, ...props }: MessageItemTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemInlineStatusProps = useRender.ComponentProps<"span">;
+export declare function MessageItemInlineStatus({ className, render, ...props }: MessageItemInlineStatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/message-item/message-item-header.mjs

@@ -0,0 +1,107 @@
+import { useMessageItemLabelId } from "./message-item-label.mjs";
+import { messageItem } from "./message-item.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-header.tsx
+function MessageItemHeader({ className, render, ...props }) {
+	const { header } = messageItem();
+	const defaultProps = { className: header({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-header" }
+	});
+}
+/**
+* Holds the sender, its badges and its role, and decides who gives way when
+* the header runs out of room: the role truncates first, then the name. The
+* badges stay whole beside the name, and the time, outside the group, never
+* truncates.
+*/
+function MessageItemSenderGroup({ className, render, ...props }) {
+	const { senderGroup } = messageItem();
+	const defaultProps = { className: senderGroup({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-sender-group" }
+	});
+}
+function MessageItemSender({ className, id, render, ...props }) {
+	const { sender } = messageItem();
+	const defaultProps = {
+		id: useMessageItemLabelId("sender", id),
+		className: sender({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-sender" }
+	});
+}
+function MessageItemSenderButton({ className, id, render, ...props }) {
+	const { senderButton } = messageItem();
+	const defaultProps = {
+		type: "button",
+		id: useMessageItemLabelId("sender", id),
+		className: senderButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-sender-button" }
+	});
+}
+function MessageItemSenderBadges({ className, render, ...props }) {
+	const { senderBadges } = messageItem();
+	const defaultProps = { className: senderBadges({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-sender-badges" }
+	});
+}
+function MessageItemMeta({ className, render, ...props }) {
+	const { meta } = messageItem();
+	const defaultProps = { className: meta({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-meta" }
+	});
+}
+/**
+* The message's time, right after the sender. A `<time>`: pass the moment in
+* `dateTime` (ISO 8601) and the full date and time as its tooltip.
+*/
+function MessageItemTime({ className, id, render, ...props }) {
+	const { time } = messageItem();
+	const defaultProps = {
+		id: useMessageItemLabelId("time", id),
+		className: time({ className })
+	};
+	return useRender({
+		defaultTagName: "time",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-time" }
+	});
+}
+function MessageItemInlineStatus({ className, render, ...props }) {
+	const { inlineStatus } = messageItem();
+	const defaultProps = { className: inlineStatus({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-inline-status" }
+	});
+}
+//#endregion
+export { MessageItemHeader, MessageItemInlineStatus, MessageItemMeta, MessageItemSender, MessageItemSenderBadges, MessageItemSenderButton, MessageItemSenderGroup, MessageItemTime };

package/dist/components/message-item/message-item-label.mjs

@@ -0,0 +1,113 @@
+import { createContext, isValidElement, useContext, useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/message-item/message-item-label.ts
+const MessageItemLabelContext = createContext(null);
+const MessageItemLabelProvider = MessageItemLabelContext.Provider;
+/**
+* The id of a sender or time part, registered with the MessageItem around it.
+* A consumer's own `id` wins and is the one registered. Outside a MessageItem
+* the part gets no id.
+*/
+function useMessageItemLabelId(part, id) {
+	const registry = useContext(MessageItemLabelContext);
+	const generatedId = useId();
+	const resolvedId = id ?? (registry ? generatedId : void 0);
+	useLayoutEffect(() => {
+		if (!registry || !resolvedId) return void 0;
+		return registry.register(part, resolvedId);
+	}, [
+		registry,
+		part,
+		resolvedId
+	]);
+	return resolvedId;
+}
+/** Roles that can't be named: on them the row writes no `aria-labelledby`. */
+const NAMELESS_ROLES = /* @__PURE__ */ new Set([
+	"none",
+	"presentation",
+	"generic"
+]);
+/**
+* The row's side: a stable registry for its parts and a ref for its element.
+* The row writes `role="article"` and `aria-labelledby` itself, and only once
+* something names it: a sender or time part, or the consumer's `aria-label` or
+* `aria-labelledby`. A row with none of them (a receipt card in the text
+* column, say) stays a plain `div`, not an article with no name.
+*
+* A consumer's `role` or `aria-labelledby` is rendered by React and left
+* alone. A consumer's `aria-label`, or a role that takes no name, turns the
+* parts' `aria-labelledby` off, since it would win over the label.
+*/
+function useMessageItemLabel(consumer) {
+	const consumerRef = useRef(consumer);
+	const [label] = useState(() => {
+		const parts = {
+			sender: [],
+			time: []
+		};
+		let element = null;
+		const write = (name, value) => {
+			if (!element) return;
+			if (!value) element.removeAttribute(name);
+			else if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+		};
+		const sync = () => {
+			const { role, ariaLabel, ariaLabelledBy } = consumerRef.current;
+			const ids = [...parts.sender, ...parts.time].join(" ");
+			if (role === void 0) write("role", ids !== "" || ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? "article" : "");
+			if (ariaLabelledBy === void 0) {
+				const nameable = role === void 0 || !NAMELESS_ROLES.has(role);
+				write("aria-labelledby", ariaLabel === void 0 && nameable ? ids : "");
+			}
+		};
+		const registry = { register(part, id) {
+			parts[part].push(id);
+			sync();
+			return () => {
+				const index = parts[part].indexOf(id);
+				if (index !== -1) parts[part].splice(index, 1);
+				sync();
+			};
+		} };
+		const ref = (node) => {
+			element = node;
+			sync();
+		};
+		return {
+			registry,
+			ref,
+			sync
+		};
+	});
+	const { role, ariaLabel, ariaLabelledBy } = consumer;
+	useLayoutEffect(() => {
+		consumerRef.current = {
+			role,
+			ariaLabel,
+			ariaLabelledBy
+		};
+		label.sync();
+	}, [
+		role,
+		ariaLabel,
+		ariaLabelledBy,
+		label
+	]);
+	return label;
+}
+/**
+* The consumer's role and name, from MessageItem's props and, where `render`
+* is an element, from that element's props, which Base UI merges over them.
+* A `render` function's props can't be read: pass them to MessageItem.
+*/
+function readConsumerLabel(props, render) {
+	const own = isValidElement(render) ? render.props : {};
+	const pick = (key) => key in own ? own[key] : props[key];
+	return {
+		role: pick("role"),
+		ariaLabel: pick("aria-label"),
+		ariaLabelledBy: pick("aria-labelledby")
+	};
+}
+//#endregion
+export { MessageItemLabelProvider, readConsumerLabel, useMessageItemLabel, useMessageItemLabelId };

package/dist/components/message-item/message-item-root.d.mts

@@ -0,0 +1,25 @@
+import { MessageItemVariantProps } from "./message-item.recipe.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-root.d.ts
+export type MessageItemProps = useRender.ComponentProps<"div"> & Pick<MessageItemVariantProps, "compact"> & {
+  /**
+   * The message someone just jumped to: the row shows `info-soft` at once
+   * and fades it out by `LOCATED_MS` (design/foundations/states.md#located).
+   * Pass `useLocated(request)`, which turns it off after `LOCATED_MS` and
+   * restarts it on the next jump; a search match, a checked row or an open
+   * popup keeps its own fill instead.
+   */
+  located?: boolean;
+};
+/**
+ * One message: an `article` named by its sender and its time
+ * (`aria-labelledby` pointing at `MessageItemSender` or
+ * `MessageItemSenderButton`, then `MessageItemTime` or
+ * `MessageItemContinuationTime`). A row with neither, and no `aria-label` or
+ * `aria-labelledby`, is a plain `div`. Pass `role`, `aria-label` or
+ * `aria-labelledby` on MessageItem or on a `render` element to override
+ * either; a `render` function's props can't be read, so pass them on
+ * MessageItem then.
+ */
+export declare function MessageItem({ className, compact, located, render, ...props }: MessageItemProps): import("react").JSX.Element;
+//#endregion

package/dist/components/message-item/message-item-root.mjs

@@ -0,0 +1,39 @@
+import { MessageItemLabelProvider, readConsumerLabel, useMessageItemLabel } from "./message-item-label.mjs";
+import { messageItem } from "./message-item.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-root.tsx
+/**
+* One message: an `article` named by its sender and its time
+* (`aria-labelledby` pointing at `MessageItemSender` or
+* `MessageItemSenderButton`, then `MessageItemTime` or
+* `MessageItemContinuationTime`). A row with neither, and no `aria-label` or
+* `aria-labelledby`, is a plain `div`. Pass `role`, `aria-label` or
+* `aria-labelledby` on MessageItem or on a `render` element to override
+* either; a `render` function's props can't be read, so pass them on
+* MessageItem then.
+*/
+function MessageItem({ className, compact, located = false, render, ...props }) {
+	const { root } = messageItem({ compact });
+	const label = useMessageItemLabel(readConsumerLabel(props, render));
+	const defaultProps = {
+		"data-message-item": "",
+		"data-compact": compact ? "true" : void 0,
+		"data-located": located ? "" : void 0,
+		className: root({ className })
+	};
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref: label.ref,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item" }
+	});
+	return /* @__PURE__ */ jsx(MessageItemLabelProvider, {
+		value: label.registry,
+		children: element
+	});
+}
+//#endregion
+export { MessageItem };

package/dist/components/message-item/message-item-toolbar.d.mts

@@ -0,0 +1,9 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-toolbar.d.ts
+export type MessageItemToolbarProps = useRender.ComponentProps<"div">;
+export declare function MessageItemToolbar({ className, render, ref, ...props }: MessageItemToolbarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemToolbarButtonProps = useRender.ComponentProps<"button"> & {
+  active?: boolean;
+};
+export declare function MessageItemToolbarButton({ active, className, render, ...props }: MessageItemToolbarButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/message-item/message-item-toolbar.mjs

@@ -0,0 +1,131 @@
+import { messageItem } from "./message-item.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-toolbar.tsx
+const TOOLBAR_WIDTH = "--mi-toolbar-width";
+/**
+* Five buttons' width (5 × 28px, 4 × 4px apart, 4px from the frame each
+* side): what the row fades until the toolbar has measured itself.
+*/
+const FALLBACK_WIDTH = "164px";
+/**
+* Toolbars watched while their row shows them, each with its row, and the one
+* ResizeObserver that watches them: it exists only while a toolbar shows.
+*/
+const watched = /* @__PURE__ */ new Map();
+let resizeObserver = null;
+function writeWidth(toolbar, row) {
+	row.style.setProperty(TOOLBAR_WIDTH, `${toolbar.offsetWidth}px`);
+}
+/** The recipe's has-data-popup-open / data-popup-open on the row. */
+function hasOpenPopup(row) {
+	return row.hasAttribute("data-popup-open") || row.querySelector("[data-popup-open]") !== null;
+}
+function resized(entries) {
+	for (const entry of entries) {
+		const target = entry.target;
+		const row = watched.get(target);
+		if (row) writeWidth(target, row);
+	}
+}
+function unwatch(toolbar) {
+	if (!watched.delete(toolbar)) return;
+	resizeObserver?.unobserve(toolbar);
+	if (watched.size > 0) return;
+	resizeObserver?.disconnect();
+	resizeObserver = null;
+}
+function watch(toolbar, row) {
+	if (watched.has(toolbar)) return;
+	writeWidth(toolbar, row);
+	if (typeof ResizeObserver === "undefined") return;
+	for (const [other, otherRow] of watched) if (!otherRow.matches(":hover, :focus-within") && !hasOpenPopup(otherRow)) unwatch(other);
+	resizeObserver ??= new ResizeObserver(resized);
+	watched.set(toolbar, row);
+	resizeObserver.observe(toolbar);
+}
+/**
+* Tells the row how wide the toolbar is (`--mi-toolbar-width` on the row), so
+* the header can fade out its end under the toolbar while it shows: the
+* header keeps no room for the toolbar (message-item.md, "The hover
+* toolbar"), and the toolbar's card only reaches part of the sender line.
+* A toolbar with more or fewer actions covers exactly its own width; nothing
+* on the row moves.
+*
+* Measured when the toolbar is about to show, not when it mounts: every row
+* of a timeline renders a toolbar, and the width matters only on the row the
+* pointer or focus is on. So mounting costs no React state (one commit per
+* row) and no ResizeObserver per row. The row's `pointerenter` and `focusin`
+* write the width in the input event's own task, before the frame that
+* applies the row's :hover / :focus-within styles, so the first frame that
+* shows the toolbar already masks its width; the toolbar is laid out at rest
+* (only its opacity is 0), so its `offsetWidth` is right then. A popup opens
+* from the toolbar only after a hover or a focus, so it finds the width
+* written. While the row shows the toolbar, one ResizeObserver shared by all
+* rows watches it, so a button added while it shows re-measures; it lets go
+* when the pointer and focus have left the row and no popup is open, and is
+* disconnected once no toolbar shows.
+*
+* On attach the row gets five buttons' width (164px) as a fallback: a plain
+* DOM write, no commit and no read, so a show that ever came without a
+* pointerenter or focusin (a row that appears under a resting pointer) fades
+* too much rather than leaving letters beside the card. Rows without a
+* toolbar never get the property, so their header's gradient stays invalid
+* and masks nothing.
+*
+* A stable callback ref with a cleanup (React 19), merged with the caller's
+* ref by `useRender`.
+*/
+function measureWidthOnShow(toolbar) {
+	const row = toolbar?.closest("[data-message-item]");
+	if (!toolbar || !row) return void 0;
+	const show = () => watch(toolbar, row);
+	const pointerLeft = () => {
+		if (!row.matches(":focus-within") && !hasOpenPopup(row)) unwatch(toolbar);
+	};
+	const focusLeft = (event) => {
+		const next = event.relatedTarget instanceof Node ? event.relatedTarget : null;
+		if (row.contains(next) || row.matches(":hover") || hasOpenPopup(row)) return;
+		unwatch(toolbar);
+	};
+	row.style.setProperty(TOOLBAR_WIDTH, FALLBACK_WIDTH);
+	row.addEventListener("pointerenter", show);
+	row.addEventListener("focusin", show);
+	row.addEventListener("pointerleave", pointerLeft);
+	row.addEventListener("focusout", focusLeft);
+	return () => {
+		row.removeEventListener("pointerenter", show);
+		row.removeEventListener("focusin", show);
+		row.removeEventListener("pointerleave", pointerLeft);
+		row.removeEventListener("focusout", focusLeft);
+		unwatch(toolbar);
+		row.style.removeProperty(TOOLBAR_WIDTH);
+	};
+}
+function MessageItemToolbar({ className, render, ref, ...props }) {
+	const { toolbar } = messageItem();
+	const defaultProps = { className: toolbar({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref: ref ? [ref, measureWidthOnShow] : measureWidthOnShow,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-toolbar" }
+	});
+}
+function MessageItemToolbarButton({ active = false, className, render, ...props }) {
+	const { toolbarButton } = messageItem();
+	const defaultProps = {
+		type: "button",
+		"data-active": active ? "true" : void 0,
+		className: toolbarButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-toolbar-button" }
+	});
+}
+//#endregion
+export { MessageItemToolbar, MessageItemToolbarButton };