@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/message-forwarded-bundle/message-forwarded-bundle.mjs

@@ -0,0 +1,324 @@
+import { MessageEmbed, MessageEmbedContent, MessageEmbedFooter, MessageEmbedHeader } from "../message-embed/message-embed.mjs";
+import { MessageImageGallery, MessageImageGalleryItem } from "../message-attachment/message-image-gallery.mjs";
+import { messageForwardedBundle, messageForwardedBundleGallery, messageForwardedBundleItem } from "./message-forwarded-bundle.recipe.mjs";
+import { Children, createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
+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-forwarded-bundle/message-forwarded-bundle.tsx
+const MessageForwardedBundleFoldContext = createContext(null);
+/**
+* The card folds when the items' text renders beyond this many lines in
+* total. This is the component's own rule — consumers render the parts and get
+* the fold for free — and it is measured from the rendered content, so
+* wrapping, zoom and language do not need to be modelled anywhere.
+*/
+const FOLD_LINE_LIMIT = 8;
+/** Fallback line height when the computed style reports `normal`. */
+const FOLD_LINE_HEIGHT_FALLBACK = 20;
+function measureLineHeight(slot) {
+	if (!slot) return FOLD_LINE_HEIGHT_FALLBACK;
+	return Number.parseFloat(getComputedStyle(slot).lineHeight) || FOLD_LINE_HEIGHT_FALLBACK;
+}
+function exceedsFoldLineLimit(slots, lineHeight, lineLimit) {
+	if (slots.length === 0) return false;
+	return slots.reduce((height, slot) => height + slot.getBoundingClientRect().height, 0) > lineHeight * lineLimit + 1;
+}
+function MessageForwardedBundle({ className, fullWidth = false, render, ...props }) {
+	const { root } = messageForwardedBundle({ fullWidth });
+	const [collapsed, setCollapsed] = useState(false);
+	const [foldable, setFoldable] = useState(false);
+	const [auto, setAuto] = useState(false);
+	const touchedRef = useRef(false);
+	const toggle = useCallback(() => {
+		touchedRef.current = true;
+		setCollapsed((current) => !current);
+	}, []);
+	const reportFold = useCallback((nextFoldable) => {
+		setFoldable(nextFoldable);
+		setAuto(true);
+		if (!nextFoldable) setCollapsed(false);
+		else if (!touchedRef.current) setCollapsed(true);
+	}, []);
+	const fold = useMemo(() => ({
+		collapsed,
+		foldable,
+		auto,
+		toggle,
+		reportFold
+	}), [
+		collapsed,
+		foldable,
+		auto,
+		toggle,
+		reportFold
+	]);
+	return /* @__PURE__ */ jsx(MessageForwardedBundleFoldContext.Provider, {
+		value: fold,
+		children: /* @__PURE__ */ jsx(MessageEmbed, {
+			className: root({ className }),
+			render,
+			...props
+		})
+	});
+}
+function MessageForwardedBundleHeader({ className, render, ...props }) {
+	const { header } = messageForwardedBundle();
+	return /* @__PURE__ */ jsx(MessageEmbedHeader, {
+		className: header({ className }),
+		render,
+		...props
+	});
+}
+function MessageForwardedBundleHeaderContent({ className, render, ...props }) {
+	const { headerContent } = messageForwardedBundle();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: headerContent({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-header-content" }
+	});
+}
+function MessageForwardedBundleHeaderLabel({ className, render, ...props }) {
+	const { headerLabel } = messageForwardedBundle();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: headerLabel({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-header-label" }
+	});
+}
+function MessageForwardedBundleHeaderCount({ className, render, ...props }) {
+	const { headerCount } = messageForwardedBundle();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: headerCount({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-header-count" }
+	});
+}
+/**
+* The items surface. Without a `collapsed` prop the fold is component-owned:
+* the surface measures its item-content slots and collapses itself to
+* `foldLineLimit` lines when the text renders beyond that many lines in total
+* (eight by default). Passing `collapsed` switches to the controlled mode
+* (the detail view pins everything open) and skips the measurement.
+*/
+function MessageForwardedBundleItems({ className, collapsed, foldLineLimit = FOLD_LINE_LIMIT, render, style, ...props }) {
+	const fold = useContext(MessageForwardedBundleFoldContext);
+	const controlled = collapsed !== void 0;
+	const isCollapsed = controlled ? collapsed : fold?.collapsed ?? false;
+	const { items } = messageForwardedBundle({ collapsed: isCollapsed });
+	const containerRef = useRef(null);
+	const [foldHeight, setFoldHeight] = useState(null);
+	useLayoutEffect(() => {
+		if (controlled || !fold) return;
+		const container = containerRef.current;
+		if (!container) return;
+		let cancelled = false;
+		const measure = () => {
+			if (cancelled) return;
+			const slots = [...container.querySelectorAll("[data-slot=\"message-forwarded-bundle-item-content\"]")];
+			const lineHeight = measureLineHeight(slots[0]);
+			fold.reportFold(exceedsFoldLineLimit(slots, lineHeight, foldLineLimit));
+			setFoldHeight(slots.length > 0 ? lineHeight * foldLineLimit : null);
+		};
+		measure();
+		const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+		resizeObserver?.observe(container);
+		const mutationObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(measure);
+		mutationObserver?.observe(container, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		return () => {
+			cancelled = true;
+			resizeObserver?.disconnect();
+			mutationObserver?.disconnect();
+		};
+	}, [
+		controlled,
+		fold,
+		foldLineLimit
+	]);
+	const clampStyle = useMemo(() => isCollapsed && foldHeight !== null ? { maxHeight: `${foldHeight}px` } : void 0, [isCollapsed, foldHeight]);
+	const mergedStyle = useMemo(() => clampStyle || style ? {
+		...clampStyle,
+		...style
+	} : void 0, [clampStyle, style]);
+	const tightFold = foldHeight !== null && foldHeight < 60;
+	return /* @__PURE__ */ jsx(MessageEmbedContent, {
+		ref: containerRef,
+		className: items({ className }),
+		"data-collapsed": isCollapsed || void 0,
+		"data-tight-fold": tightFold || void 0,
+		style: mergedStyle,
+		render,
+		...props
+	});
+}
+function MessageForwardedBundleItem({ className, render, ...props }) {
+	const { root } = messageForwardedBundleItem();
+	return useRender({
+		defaultTagName: "article",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-item" }
+	});
+}
+function MessageForwardedBundleItemMeta({ className, render, ...props }) {
+	const { meta } = messageForwardedBundleItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: meta({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-item-meta" }
+	});
+}
+function MessageForwardedBundleItemAuthor({ className, render, ...props }) {
+	const { author } = messageForwardedBundleItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: author({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-item-author" }
+	});
+}
+/**
+* The item's text body. The component-owned fold measures these slots: when
+* their combined content renders beyond the fold line limit the card folds.
+*/
+function MessageForwardedBundleItemContent({ className, render, ...props }) {
+	const { itemContent } = messageForwardedBundleItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: itemContent({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-item-content" }
+	});
+}
+function MessageForwardedBundleAttachments({ className, render, ...props }) {
+	const { attachments } = messageForwardedBundleItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: attachments({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-attachments" }
+	});
+}
+function MessageForwardedBundleAttachment({ className, interactive = false, render, ...props }) {
+	const { attachment } = messageForwardedBundleItem({ action: interactive ? "interactive" : "static" });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachment({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-attachment" }
+	});
+}
+function MessageForwardedBundleAttachmentName({ className, render, ...props }) {
+	const { attachmentName } = messageForwardedBundleItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachmentName({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-attachment-name" }
+	});
+}
+function MessageForwardedBundleAttachmentMeta({ className, render, ...props }) {
+	const { attachmentMeta } = messageForwardedBundleItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachmentMeta({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-attachment-meta" }
+	});
+}
+function MessageForwardedBundleFooter({ className, render, ...props }) {
+	const fold = useContext(MessageForwardedBundleFoldContext);
+	if (fold?.auto && !fold.foldable) return null;
+	return /* @__PURE__ */ jsx(MessageEmbedFooter, {
+		className,
+		render,
+		...props
+	});
+}
+function MessageForwardedBundleSource({ className, render, ...props }) {
+	const { source } = messageForwardedBundle();
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			type: "button",
+			className: source({ className })
+		}, props),
+		state: { slot: "message-forwarded-bundle-source" }
+	});
+}
+function MessageForwardedBundleSourceLabel({ className, render, ...props }) {
+	const { sourceLabel } = messageForwardedBundle();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: sourceLabel({ className }) }, props),
+		state: { slot: "message-forwarded-bundle-source-label" }
+	});
+}
+function MessageForwardedBundleFooterAction({ className, render, onClick, children, expandedContent, ...props }) {
+	const fold = useContext(MessageForwardedBundleFoldContext);
+	const { footerAction } = messageForwardedBundle();
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) fold?.toggle();
+	}, [fold, onClick]);
+	const expanded = fold ? fold.auto && !fold.collapsed : false;
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			type: "button",
+			className: footerAction({ className }),
+			onClick: handleClick,
+			"aria-expanded": fold?.auto ? expanded : void 0,
+			children: expanded && expandedContent !== void 0 ? expandedContent : children
+		}, props),
+		state: { slot: "message-forwarded-bundle-footer-action" }
+	});
+}
+/**
+* Image rows for forwarded attachments. The gallery owns the layout — rows of
+* three (a lone row of exactly four splits two-and-two) at the message gallery
+* row heights — and composes the shared MessageImageGallery surfaces, so
+* forwarded images are the same component family as images in a message.
+* Consumers only place the media (`MessageForwardedBundleGalleryTile`).
+*/
+function MessageForwardedBundleGallery({ className, children, ...props }) {
+	const { root, row } = messageForwardedBundleGallery();
+	const items = Children.toArray(children);
+	const chunkSize = items.length === 4 ? 2 : 3;
+	const rows = [];
+	for (let index = 0; index < items.length; index += chunkSize) rows.push(items.slice(index, index + chunkSize));
+	return /* @__PURE__ */ jsx(MessageImageGallery, {
+		className: root({ className }),
+		...props,
+		children: rows.map((rowItems, index) => /* @__PURE__ */ jsx("div", {
+			className: row({ count: rowItems.length }),
+			"data-slot": "message-forwarded-bundle-gallery-row",
+			children: rowItems
+		}, index))
+	});
+}
+/**
+* A media cell in the forwarded gallery rows: the shared message gallery item
+* (its surface and rounding come from MessageImageGalleryItem).
+*/
+function MessageForwardedBundleGalleryTile({ className, render, ...props }) {
+	const { tile } = messageForwardedBundleGallery();
+	return /* @__PURE__ */ jsx(MessageImageGalleryItem, {
+		className: tile({ className }),
+		render,
+		...props
+	});
+}
+//#endregion
+export { MessageForwardedBundle, MessageForwardedBundleAttachment, MessageForwardedBundleAttachmentMeta, MessageForwardedBundleAttachmentName, MessageForwardedBundleAttachments, MessageForwardedBundleFooter, MessageForwardedBundleFooterAction, MessageForwardedBundleGallery, MessageForwardedBundleGalleryTile, MessageForwardedBundleHeader, MessageForwardedBundleHeaderContent, MessageForwardedBundleHeaderCount, MessageForwardedBundleHeaderLabel, MessageForwardedBundleItem, MessageForwardedBundleItemAuthor, MessageForwardedBundleItemContent, MessageForwardedBundleItemMeta, MessageForwardedBundleItems, MessageForwardedBundleSource, MessageForwardedBundleSourceLabel };

package/dist/components/message-forwarded-bundle/message-forwarded-bundle.recipe.mjs

@@ -0,0 +1,81 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-forwarded-bundle/message-forwarded-bundle.recipe.ts
+const messageForwardedBundle = tv({
+	slots: {
+		root: ["mt-1 max-w-[min(34rem,100%)]"],
+		header: ["flex flex-wrap items-center justify-between", "gap-2"],
+		headerContent: ["flex min-w-0 items-center", "gap-2"],
+		headerLabel: ["inline-flex shrink-0 items-center", "gap-1 text-footnote font-bold text-foreground-muted [&_svg]:size-3.5"],
+		headerCount: ["shrink-0", "font-mono text-mono-meta text-foreground-hint"],
+		source: [
+			"min-w-0 truncate",
+			"inline-flex items-center gap-1 rounded-[2px] text-caption font-semibold text-foreground-hint",
+			"decoration-[1.5px] underline-offset-[3px] hover:text-foreground hover:underline",
+			"outline-none focus-visible:shadow-focus",
+			"[&_svg]:size-3.5"
+		],
+		sourceLabel: ["min-w-0 truncate", "inline-flex items-center gap-1 text-caption text-foreground-hint [&_svg]:size-3.5"],
+		items: ["relative", ""],
+		footerAction: [
+			"inline-flex items-center gap-1 rounded-[2px] text-footnote font-semibold text-foreground",
+			"decoration-[1.5px] underline-offset-[3px] hover:underline",
+			"outline-none focus-visible:shadow-focus"
+		]
+	},
+	variants: {
+		fullWidth: { true: { root: "w-full max-w-none" } },
+		collapsed: { true: { items: ["max-h-40 overflow-clip", "mask-fade-b data-tight-fold:mask-fade-b-edge"] } }
+	}
+});
+const messageForwardedBundleItem = tv({
+	slots: {
+		root: ["px-3 py-2.5 text-body text-foreground"],
+		meta: ["flex min-w-0 flex-wrap items-center", "mb-0.5 gap-1.5 font-mono text-mono-meta tabular-nums text-foreground-hint"],
+		author: ["font-sans text-footnote font-bold text-foreground"],
+		/** The item's text body — also the fold measurement's reading surface. */
+		itemContent: ["min-w-0 max-w-full wrap-break-word"],
+		attachments: ["flex flex-wrap", "mt-1.5 gap-1.5"],
+		attachment: [
+			"inline-flex max-w-full items-center",
+			"h-[22px] gap-1 rounded-chip bg-fill-muted pr-[6.5px] pl-[5.5px]",
+			"text-caption font-semibold text-foreground [&_svg]:size-3.5"
+		],
+		attachmentName: ["min-w-0 truncate"],
+		attachmentMeta: ["shrink-0", "font-mono font-normal text-foreground-hint"]
+	},
+	variants: { 
+	/**
+	* `interactive` marks an attachment the consumer wired to open (preview
+	* or download). The affordance is style-only here; the element and the
+	* action stay with the consumer via `render`.
+	*/
+action: {
+		static: {},
+		interactive: { attachment: [
+			"cursor-pointer focus-visible:keyboard:outline-2 focus-visible:keyboard:outline-offset-2 focus-visible:keyboard:outline-line-strong",
+			"hover:overlay-medium active:overlay-medium",
+			"focus-visible:outline-none focus-visible:shadow-focus"
+		] }
+	} },
+	defaultVariants: { action: "static" }
+});
+/**
+* Image rows for forwarded attachments: message-scale rows that compose the
+* shared MessageImageGallery surfaces, so forwarded images read the same as
+* images in a message. The component owns the layout (rows of three; a lone
+* row of exactly four splits two-and-two) and the consumer owns the media.
+*/
+const messageForwardedBundleGallery = tv({
+	slots: {
+		root: ["@container/bundle w-full min-w-0"],
+		row: ["grid gap-2"],
+		tile: ["[&_img]:block [&_img]:size-full [&_img]:object-cover"]
+	},
+	variants: { count: {
+		1: { row: "grid-cols-1 auto-rows-[8rem] @min-[360px]/bundle:auto-rows-[9rem]" },
+		2: { row: "grid-cols-2 auto-rows-[8rem] @min-[360px]/bundle:auto-rows-[9rem]" },
+		3: { row: "grid-cols-2 auto-rows-[7rem] @min-[360px]/bundle:auto-rows-[8rem] @min-[360px]/bundle:grid-cols-3" }
+	} }
+});
+//#endregion
+export { messageForwardedBundle, messageForwardedBundleGallery, messageForwardedBundleItem };

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

@@ -0,0 +1,13 @@
+import { MessageItem, MessageItemProps } from "./message-item-root.mjs";
+import { MessageItemAvatarSlot, MessageItemAvatarSlotProps, MessageItemContinuationTime, MessageItemContinuationTimeProps, MessageItemGutter, MessageItemGutterProps } from "./message-item-gutter.mjs";
+import { MessageItemAttachments, MessageItemAttachmentsProps, MessageItemBody, MessageItemBodyProps, MessageItemContent, MessageItemContentProps, MessageItemEdited, MessageItemEditedProps, MessageItemEmbedded, MessageItemEmbeddedProps, MessageItemFooter, MessageItemFooterProps, MessageItemSearchMatch, MessageItemSearchMatchProps } from "./message-item-content.mjs";
+import { MessageItemHeader, MessageItemHeaderProps, MessageItemInlineStatus, MessageItemInlineStatusProps, MessageItemMeta, MessageItemMetaProps, MessageItemSender, MessageItemSenderBadges, MessageItemSenderBadgesProps, MessageItemSenderButton, MessageItemSenderButtonProps, MessageItemSenderGroup, MessageItemSenderGroupProps, MessageItemSenderProps, MessageItemTime, MessageItemTimeProps } from "./message-item-header.mjs";
+import { MessageItemDelegatedAvatar, MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, MessageItemDelegatedByNameProps, MessageItemDelegatedByProps } from "./message-item-delegated.mjs";
+import { MessageItemToolbar, MessageItemToolbarButton, MessageItemToolbarButtonProps, MessageItemToolbarProps } from "./message-item-toolbar.mjs";
+import { MessageItemBadge, MessageItemBadgeProps, MessageItemBadgeSeparator, MessageItemBadgeSeparatorProps, MessageItemBadgeStatus, MessageItemReadReceipt, MessageItemReadReceiptProps, MessageItemSavedIndicator, MessageItemSavedIndicatorProps } from "./message-footer.mjs";
+import { MessageReactionAddButton, MessageReactionAddButtonProps, MessageReactionChip, MessageReactionChipProps, MessageReactionCount, MessageReactionCountProps, MessageReactionErrorIndicator, MessageReactionErrorIndicatorProps, MessageReactionGlyph, MessageReactionGlyphProps, MessageReactionPickerContent, MessageReactionPickerContentProps, MessageReactionPickerStatic, MessageReactionPickerStaticProps, MessageReactionQuickButton, MessageReactionQuickButtonProps, MessageReactionQuickRow, MessageReactionQuickRowProps, MessageReactionTooltipContent, MessageReactionTooltipContentProps, MessageReactionTooltipMeta, MessageReactionTooltipMetaProps, MessageReactionTooltipName, MessageReactionTooltipNameProps, MessageReactionTooltipNameText, MessageReactionTooltipNameTextProps, MessageReactionTooltipNames, MessageReactionTooltipNamesProps, MessageReactionTooltipSeparator, MessageReactionTooltipSeparatorProps } from "./message-reaction.mjs";
+import { MessageReferenceChipVariant, MessageReferenceTextVariant } from "./message-reference.recipe.mjs";
+import { MessageReferenceChip, MessageReferenceChipProps, MessageReferenceIcon, MessageReferenceIconProps, MessageReferenceIndicator, MessageReferenceIndicatorProps, MessageReferenceLabel, MessageReferenceLabelProps, MessageReferencePending, MessageReferencePendingProps, MessageReferenceReadMark, MessageReferenceReadMarkProps, MessageReferenceSuffix, MessageReferenceSuffixProps, MessageReferenceText, MessageReferenceTextProps, MessageReferenceUnavailable, MessageReferenceUnavailableProps } from "./message-reference.mjs";
+import { MessageMultiSelect, MessageMultiSelectCheckbox, MessageMultiSelectCheckboxProps, MessageMultiSelectProps, MessageMultiSelectToolbar, MessageMultiSelectToolbarActions, MessageMultiSelectToolbarActionsProps, MessageMultiSelectToolbarProps } from "./message-multi-select.mjs";
+import { MessageTextSelectionAnchor, MessageTextSelectionToolbar, MessageTextSelectionToolbarButton, MessageTextSelectionToolbarButtonProps, MessageTextSelectionToolbarProps, MessageTextSelectionToolbarSeparator, MessageTextSelectionToolbarSeparatorProps, createMessageTextSelectionAnchor } from "./message-text-selection-toolbar.mjs";
+export { MessageItem, MessageItemAttachments, type MessageItemAttachmentsProps, MessageItemAvatarSlot, type MessageItemAvatarSlotProps, MessageItemBadge, type MessageItemBadgeProps, MessageItemBadgeSeparator, type MessageItemBadgeSeparatorProps, type MessageItemBadgeStatus, MessageItemBody, type MessageItemBodyProps, MessageItemContent, type MessageItemContentProps, MessageItemContinuationTime, type MessageItemContinuationTimeProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageItemEdited, type MessageItemEditedProps, MessageItemEmbedded, type MessageItemEmbeddedProps, MessageItemFooter, type MessageItemFooterProps, MessageItemGutter, type MessageItemGutterProps, MessageItemHeader, type MessageItemHeaderProps, MessageItemInlineStatus, type MessageItemInlineStatusProps, MessageItemMeta, type MessageItemMetaProps, type MessageItemProps, MessageItemReadReceipt, type MessageItemReadReceiptProps, MessageItemSavedIndicator, type MessageItemSavedIndicatorProps, MessageItemSearchMatch, type MessageItemSearchMatchProps, MessageItemSender, MessageItemSenderBadges, type MessageItemSenderBadgesProps, MessageItemSenderButton, type MessageItemSenderButtonProps, MessageItemSenderGroup, type MessageItemSenderGroupProps, type MessageItemSenderProps, MessageItemTime, type MessageItemTimeProps, MessageItemToolbar, MessageItemToolbarButton, type MessageItemToolbarButtonProps, type MessageItemToolbarProps, MessageMultiSelect, MessageMultiSelectCheckbox, type MessageMultiSelectCheckboxProps, type MessageMultiSelectProps, MessageMultiSelectToolbar, MessageMultiSelectToolbarActions, type MessageMultiSelectToolbarActionsProps, type MessageMultiSelectToolbarProps, MessageReactionAddButton, type MessageReactionAddButtonProps, MessageReactionChip, type MessageReactionChipProps, MessageReactionCount, type MessageReactionCountProps, MessageReactionErrorIndicator, type MessageReactionErrorIndicatorProps, MessageReactionGlyph, type MessageReactionGlyphProps, MessageReactionPickerContent, type MessageReactionPickerContentProps, MessageReactionPickerStatic, type MessageReactionPickerStaticProps, MessageReactionQuickButton, type MessageReactionQuickButtonProps, MessageReactionQuickRow, type MessageReactionQuickRowProps, MessageReactionTooltipContent, type MessageReactionTooltipContentProps, MessageReactionTooltipMeta, type MessageReactionTooltipMetaProps, MessageReactionTooltipName, type MessageReactionTooltipNameProps, MessageReactionTooltipNameText, type MessageReactionTooltipNameTextProps, MessageReactionTooltipNames, type MessageReactionTooltipNamesProps, MessageReactionTooltipSeparator, type MessageReactionTooltipSeparatorProps, MessageReferenceChip, type MessageReferenceChipProps, type MessageReferenceChipVariant, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceIndicator, type MessageReferenceIndicatorProps, MessageReferenceLabel, type MessageReferenceLabelProps, MessageReferencePending, type MessageReferencePendingProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, MessageReferenceSuffix, type MessageReferenceSuffixProps, MessageReferenceText, type MessageReferenceTextProps, type MessageReferenceTextVariant, MessageReferenceUnavailable, type MessageReferenceUnavailableProps, type MessageTextSelectionAnchor, MessageTextSelectionToolbar, MessageTextSelectionToolbarButton, type MessageTextSelectionToolbarButtonProps, type MessageTextSelectionToolbarProps, MessageTextSelectionToolbarSeparator, type MessageTextSelectionToolbarSeparatorProps, createMessageTextSelectionAnchor };

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

@@ -0,0 +1,20 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-footer.d.ts
+export type MessageItemBadgeStatus = "read" | "unread";
+export type MessageItemBadgeProps = useRender.ComponentProps<"span"> & {
+  status?: MessageItemBadgeStatus;
+};
+export declare function MessageItemBadge({ className, status, ...props }: MessageItemBadgeProps): import("react").JSX.Element;
+export type MessageItemBadgeSeparatorProps = useRender.ComponentProps<"span">;
+export declare function MessageItemBadgeSeparator({ className, render, ...props }: MessageItemBadgeSeparatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemSavedIndicatorProps = useRender.ComponentProps<"span"> & {
+  /**
+   * Square icon-only affordance. Replaces the old `data-icon-only`
+   * attribute contract with an explicit prop.
+   */
+  iconOnly?: boolean;
+};
+export declare function MessageItemSavedIndicator({ className, iconOnly, render, ...props }: MessageItemSavedIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemReadReceiptProps = useRender.ComponentProps<"span">;
+export declare function MessageItemReadReceipt({ className, render, ...props }: MessageItemReadReceiptProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

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

@@ -0,0 +1,54 @@
+import { Badge } from "../badge/badge.mjs";
+import { messageFooter } from "./message-footer.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-footer.tsx
+function MessageItemBadge({ className, status = "read", ...props }) {
+	const { badge } = messageFooter({ badgeStatus: status });
+	return /* @__PURE__ */ jsx(Badge, {
+		appearance: "soft",
+		"data-slot": "message-item-badge",
+		variant: "muted",
+		className: badge({ className }),
+		...props
+	});
+}
+function MessageItemBadgeSeparator({ className, render, ...props }) {
+	const { badgeSeparator } = messageFooter();
+	const defaultProps = {
+		"aria-hidden": true,
+		className: badgeSeparator({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-badge-separator" }
+	});
+}
+function MessageItemSavedIndicator({ className, iconOnly = false, render, ...props }) {
+	const { savedIndicator } = messageFooter({ iconOnly });
+	const defaultProps = {
+		...iconOnly ? { "data-icon-only": "" } : {},
+		className: savedIndicator({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-saved-indicator" }
+	});
+}
+function MessageItemReadReceipt({ className, render, ...props }) {
+	const { readReceipt } = messageFooter();
+	const defaultProps = { className: readReceipt({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-read-receipt" }
+	});
+}
+//#endregion
+export { MessageItemBadge, MessageItemBadgeSeparator, MessageItemReadReceipt, MessageItemSavedIndicator };

package/dist/components/message-item/message-footer.recipe.mjs

@@ -0,0 +1,46 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-item/message-footer.recipe.ts
+const messageFooter = tv({
+	slots: {
+		savedIndicator: [
+			"inline-flex min-w-0 max-w-full items-center gap-1 overflow-hidden whitespace-nowrap select-none",
+			"[&_svg]:shrink-0",
+			"h-[22px] rounded-chip pr-[6.5px] pl-[5.5px]",
+			"text-caption font-semibold text-foreground-muted",
+			"bg-fill-muted hover:overlay-medium active:overlay-medium",
+			"outline-none focus-visible:shadow-focus",
+			"[&_svg]:size-3.5 [&_svg]:text-foreground"
+		],
+		readReceipt: [
+			"ml-auto inline-flex shrink-0 items-center gap-1 whitespace-nowrap",
+			"[&_svg]:shrink-0",
+			"h-[22px] font-mono text-mono-meta text-foreground-hint [&_svg]:size-3"
+		],
+		badge: [
+			"inline-flex min-w-0 max-w-full items-center overflow-hidden whitespace-nowrap select-none",
+			"transition-colors [&_svg]:shrink-0",
+			"h-6 gap-1 rounded-chip border-0 px-2 shadow-none",
+			"text-footnote font-bold text-foreground-muted",
+			"bg-fill-muted hover:overlay-medium active:overlay-medium",
+			"[&_svg]:size-3.5"
+		],
+		badgeSeparator: ["text-foreground/45"]
+	},
+	variants: {
+		badgeStatus: {
+			read: {},
+			unread: { badge: ["text-foreground"] }
+		},
+		iconOnly: {
+			true: { savedIndicator: [
+				"justify-center p-0",
+				"size-8 rounded-control bg-transparent",
+				"[&_svg]:size-[18px] [&_svg]:text-foreground-muted"
+			] },
+			false: {}
+		}
+	},
+	defaultVariants: { iconOnly: false }
+});
+//#endregion
+export { messageFooter };

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

@@ -0,0 +1,22 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-item-content.d.ts
+export type MessageItemContentProps = useRender.ComponentProps<"div">;
+export declare function MessageItemContent({ className, render, ...props }: MessageItemContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemBodyProps = useRender.ComponentProps<"div">;
+export declare function MessageItemBody({ className, render, ...props }: MessageItemBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemEditedProps = useRender.ComponentProps<"span">;
+/**
+ * The edited marker, inline at the end of the message text on every row, full
+ * or continuation. Put it inside the last paragraph so it follows the last
+ * word; pass the copy ("(edited)") as children and the edit time as its tooltip.
+ */
+export declare function MessageItemEdited({ className, render, ...props }: MessageItemEditedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemSearchMatchProps = useRender.ComponentProps<"mark">;
+export declare function MessageItemSearchMatch({ className, render, ...props }: MessageItemSearchMatchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemEmbeddedProps = useRender.ComponentProps<"div">;
+export declare function MessageItemEmbedded({ className, render, ...props }: MessageItemEmbeddedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemAttachmentsProps = useRender.ComponentProps<"div">;
+export declare function MessageItemAttachments({ className, render, ...props }: MessageItemAttachmentsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemFooterProps = useRender.ComponentProps<"div">;
+export declare function MessageItemFooter({ className, render, ...props }: MessageItemFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

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

@@ -0,0 +1,81 @@
+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-content.tsx
+function MessageItemContent({ className, render, ...props }) {
+	const { content } = messageItem();
+	const defaultProps = { className: content({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-content" }
+	});
+}
+function MessageItemBody({ className, render, ...props }) {
+	const { body } = messageItem();
+	const defaultProps = { className: body({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-body" }
+	});
+}
+/**
+* The edited marker, inline at the end of the message text on every row, full
+* or continuation. Put it inside the last paragraph so it follows the last
+* word; pass the copy ("(edited)") as children and the edit time as its tooltip.
+*/
+function MessageItemEdited({ className, render, ...props }) {
+	const { edited } = messageItem();
+	const defaultProps = { className: edited({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-edited" }
+	});
+}
+function MessageItemSearchMatch({ className, render, ...props }) {
+	const { searchMatch } = messageItem();
+	const defaultProps = { className: searchMatch({ className }) };
+	return useRender({
+		defaultTagName: "mark",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-search-match" }
+	});
+}
+function MessageItemEmbedded({ className, render, ...props }) {
+	const { embedded } = messageItem();
+	const defaultProps = { className: embedded({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-embedded" }
+	});
+}
+function MessageItemAttachments({ className, render, ...props }) {
+	const { attachments } = messageItem();
+	const defaultProps = { className: attachments({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-attachments" }
+	});
+}
+function MessageItemFooter({ className, render, ...props }) {
+	const { footer } = messageItem();
+	const defaultProps = { className: footer({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-footer" }
+	});
+}
+//#endregion
+export { MessageItemAttachments, MessageItemBody, MessageItemContent, MessageItemEdited, MessageItemEmbedded, MessageItemFooter, MessageItemSearchMatch };