@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/message-action-card/message-action-card.mjs

@@ -0,0 +1,298 @@
+import { Badge } from "../badge/badge.mjs";
+import { MessageEmbed, MessageEmbedContent, MessageEmbedHeader } from "../message-embed/message-embed.mjs";
+import { messageActionCard } from "./message-action-card.recipe.mjs";
+import { messageActionCardContent } from "./message-action-card-content.recipe.mjs";
+import { ChevronDown, Info, Zap } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/message-action-card/message-action-card.tsx
+/**
+* The card is a disclosure: open by default, and a consumer can fold a
+* resolved or view-only card to its header with `defaultOpen={false}` (or
+* control it with `open` / `onOpenChange`). The fold is offered by placing a
+* MessageActionCardCollapseTrigger in the header; without one the card simply
+* stays open.
+*/
+function MessageActionCard({ className, render, open, defaultOpen = true, onOpenChange, ...props }) {
+	const { root } = messageActionCard();
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		open,
+		defaultOpen,
+		onOpenChange,
+		render: /* @__PURE__ */ jsx(MessageEmbed, {
+			className: root({ className }),
+			render,
+			...props
+		})
+	});
+}
+function MessageActionCardContent({ className, render, ...props }) {
+	const { root, panel } = messageActionCardContent();
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		className: panel(),
+		children: /* @__PURE__ */ jsx(MessageEmbedContent, {
+			className: root({ className }),
+			render,
+			...props
+		})
+	});
+}
+/** The card type's icon. Without children it shows a generic action icon. */
+function MessageActionCardHeaderIcon({ className, render, children, ...props }) {
+	const { headerIcon } = messageActionCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			className: headerIcon({ className }),
+			"aria-hidden": true,
+			children: children ?? /* @__PURE__ */ jsx(Zap, {})
+		}, props),
+		state: { slot: "message-action-card-header-icon" }
+	});
+}
+function MessageActionCardHeaderTitle({ className, render, ...props }) {
+	const { headerTitle } = messageActionCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: headerTitle({ className }) }, props),
+		state: { slot: "message-action-card-header-title" }
+	});
+}
+/**
+* A line under the title: what happened on a resolved card ("Installed by Ada
+* → Lens"), or why you cannot act on a view-only one. Place it inside
+* MessageActionCardHeaderTitle; it stays visible while the card is folded.
+*/
+function MessageActionCardHeaderDescription({ className, render, ...props }) {
+	const { headerDescription } = messageActionCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: headerDescription({ className }) }, props),
+		state: { slot: "message-action-card-header-description" }
+	});
+}
+const STATUS_TONES = {
+	default: "neutral",
+	muted: "neutral",
+	primary: "primary",
+	you: "primary",
+	busy: "primary",
+	information: "information",
+	accent: "accent",
+	success: "success",
+	warning: "warning",
+	danger: "danger"
+};
+/**
+* The card's state label in the header: plain text led by a square pixel in
+* the variant's colour, so a column of "Done" cards does not shout.
+*/
+function MessageActionCardStatus({ className, appearance, ...props }) {
+	const { headerStatus, status } = messageActionCard({ tone: STATUS_TONES[props.variant ?? "default"] });
+	return /* @__PURE__ */ jsx(Badge, {
+		appearance: appearance ?? "soft",
+		className: headerStatus({ className: status({ className }) }),
+		...props
+	});
+}
+/** Folds the card to its header and back. Needs an accessible `aria-label`. */
+function MessageActionCardCollapseTrigger({ className, ...props }) {
+	const { collapseTrigger } = messageActionCard();
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		className: collapseTrigger({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true })
+	});
+}
+function MessageActionCardHeader({ className, render, ...props }) {
+	const { header } = messageActionCard();
+	return /* @__PURE__ */ jsx(MessageEmbedHeader, {
+		className: header({ className }),
+		render,
+		...props
+	});
+}
+function MessageActionCardHeaderStatus({ className, render, ...props }) {
+	const { headerStatus } = messageActionCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: headerStatus({ className }) }, props),
+		state: { slot: "message-action-card-header-status" }
+	});
+}
+function MessageActionCardProperties({ className, render, ...props }) {
+	const { properties } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "dl",
+		render,
+		props: mergeProps({ className: properties({ className }) }, props),
+		state: { slot: "message-action-card-properties" }
+	});
+}
+function MessageActionCardProperty({ className, render, ...props }) {
+	const { property } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: property({ className }) }, props),
+		state: { slot: "message-action-card-property" }
+	});
+}
+function MessageActionCardPropertyLabel({ className, render, ...props }) {
+	const { propertyLabel } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "dt",
+		render,
+		props: mergeProps({ className: propertyLabel({ className }) }, props),
+		state: { slot: "message-action-card-property-label" }
+	});
+}
+function MessageActionCardPropertyValue({ className, render, ...props }) {
+	const { propertyValue } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "dd",
+		render,
+		props: mergeProps({ className: propertyValue({ className }) }, props),
+		state: { slot: "message-action-card-property-value" }
+	});
+}
+function MessageActionCardScopeList({ className, render, ...props }) {
+	const { scopeList } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: scopeList({ className }) }, props),
+		state: { slot: "message-action-card-scope-list" }
+	});
+}
+function MessageActionCardScopeListLabel({ className, render, ...props }) {
+	const { scopeListLabel } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: scopeListLabel({ className }) }, props),
+		state: { slot: "message-action-card-scope-list-label" }
+	});
+}
+/**
+* Scrolls a long permission list. It is a Tab stop only while it overflows, so
+* keyboard users can scroll it; a short list adds no empty stop.
+*/
+function MessageActionCardScopeListViewport({ className, render, ...props }) {
+	const { scopeListViewport } = messageActionCardContent();
+	const [element, setElement] = useState(null);
+	const [overflows, setOverflows] = useState(false);
+	useEffect(() => {
+		if (element === null) return;
+		const measure = () => setOverflows(element.scrollHeight > element.clientHeight);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		for (const child of element.children) observer.observe(child);
+		return () => observer.disconnect();
+	}, [element]);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref: setElement,
+		props: mergeProps({
+			className: scopeListViewport({ className }),
+			tabIndex: overflows ? 0 : void 0
+		}, props),
+		state: { slot: "message-action-card-scope-list-viewport" }
+	});
+}
+function MessageActionCardScope({ className, render, ...props }) {
+	const { scope } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: scope({ className }) }, props),
+		state: { slot: "message-action-card-scope" }
+	});
+}
+function MessageActionCardScopeName({ className, render, ...props }) {
+	const { scopeName } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: scopeName({ className }) }, props),
+		state: { slot: "message-action-card-scope-name" }
+	});
+}
+function MessageActionCardScopeDescription({ className, render, ...props }) {
+	const { scopeDescription } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: scopeDescription({ className }) }, props),
+		state: { slot: "message-action-card-scope-description" }
+	});
+}
+function MessageActionCardHintLabel({ className, render, ...props }) {
+	const { hintLabel } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: hintLabel({ className }) }, props),
+		state: { slot: "message-action-card-hint-label" }
+	});
+}
+function MessageActionCardHint({ className, render, ...props }) {
+	const { hint } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: hint({ className }) }, props),
+		state: { slot: "message-action-card-hint" }
+	});
+}
+/** Raft's standing note. Leads with an info icon unless `icon` replaces it. */
+function MessageActionCardNotice({ className, render, icon, children, ...props }) {
+	const { notice } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			className: notice({ className }),
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [icon ?? /* @__PURE__ */ jsx(Info, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children })] })
+		}, props),
+		state: { slot: "message-action-card-notice" }
+	});
+}
+function MessageActionCardCompletion({ className, render, ...props }) {
+	const { completion } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: completion({ className }) }, props),
+		state: { slot: "message-action-card-completion" }
+	});
+}
+function MessageActionCardActions({ className, render, ...props }) {
+	const { actions } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: actions({ className }) }, props),
+		state: { slot: "message-action-card-actions" }
+	});
+}
+function MessageActionCardActionsNote({ className, render, ...props }) {
+	const { actionsNote } = messageActionCardContent();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: actionsNote({ className }) }, props),
+		state: { slot: "message-action-card-actions-note" }
+	});
+}
+//#endregion
+export { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardCollapseTrigger, MessageActionCardCompletion, MessageActionCardContent, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderIcon, MessageActionCardHeaderStatus, MessageActionCardHeaderTitle, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardNotice, MessageActionCardProperties, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyValue, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListViewport, MessageActionCardScopeName, MessageActionCardStatus };

package/dist/components/message-action-card/message-action-card.recipe.mjs

@@ -0,0 +1,47 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-action-card/message-action-card.recipe.ts
+const messageActionCard = tv({
+	slots: {
+		root: ["w-full", "group/action-card mt-2 max-w-[440px]"],
+		header: [
+			"flex items-start",
+			"gap-2 px-3 pt-3 pb-2 group-data-closed/action-card:pb-3",
+			"text-subhead font-bold text-foreground"
+		],
+		headerIcon: [
+			"flex shrink-0 items-center justify-center",
+			"[&>svg]:shrink-0",
+			"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
+			"[&>svg]:size-3.5"
+		],
+		headerTitle: ["min-w-0 flex-1", "pt-[calc((27px-1lh)/2)]"],
+		headerDescription: ["block", "mt-0.5 text-footnote font-normal text-foreground-muted"],
+		headerStatus: ["ml-auto shrink-0", "mt-[calc((27px-1lh)/2)] text-caption font-semibold text-foreground-muted"],
+		status: [
+			"inline-flex h-auto items-center gap-1.5 rounded-none border-0 bg-transparent p-0 shadow-none",
+			"text-caption font-semibold text-foreground-muted",
+			"before:size-2.5 before:shrink-0 before:rounded-[2px] before:border-[1.5px] before:border-sticker-ink before:content-['']"
+		],
+		collapseTrigger: [
+			"flex shrink-0 cursor-pointer items-center justify-center",
+			"[&>svg]:transition-transform [&>svg]:duration-200 motion-reduce:[&>svg]:transition-none",
+			"data-panel-open:[&>svg]:rotate-180",
+			"focus-visible:keyboard:outline-2 focus-visible:keyboard:outline-offset-1",
+			"my-0 -mr-1 size-[27px] rounded-chip text-foreground-muted",
+			"hover:bg-fill-medium hover:text-foreground active:bg-fill-medium",
+			"focus-visible:outline-none focus-visible:shadow-focus",
+			"[&>svg]:size-4"
+		]
+	},
+	variants: { tone: {
+		neutral: { status: ["before:bg-inactive"] },
+		primary: { status: ["before:bg-presence-busy"] },
+		information: { status: ["before:bg-info"] },
+		accent: { status: ["before:bg-attention"] },
+		success: { status: ["before:bg-success"] },
+		warning: { status: ["before:bg-warning"] },
+		danger: { status: ["before:bg-danger"] }
+	} }
+});
+//#endregion
+export { messageActionCard };

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

@@ -0,0 +1,5 @@
+import { MessageAttachmentAction, MessageAttachmentActionProps, MessageAttachmentCard, MessageAttachmentCardProps, MessageAttachmentCommentSummary, MessageAttachmentCommentSummaryProps, MessageAttachmentDiffAddition, MessageAttachmentDiffAdditionProps, MessageAttachmentDiffDeletion, MessageAttachmentDiffDeletionProps, MessageAttachmentDiffSummary, MessageAttachmentDiffSummaryProps, MessageAttachmentGroup, MessageAttachmentGroupProps, MessageAttachmentMeta, MessageAttachmentMetaEnd, MessageAttachmentMetaEndProps, MessageAttachmentMetaProps, MessageAttachmentMetaStart, MessageAttachmentMetaStartProps, MessageAttachmentSummary, MessageAttachmentSummaryProps, MessageAttachmentTitle, MessageAttachmentTitleProps } from "./message-attachment.mjs";
+import { MessageImageGalleryAspectKind, MessageImageGalleryFit, MessageImageGalleryImage, MessageImageGalleryItemLayout, MessageImageGalleryRowData, SINGLE_IMAGE_MAX_HEIGHT, SINGLE_IMAGE_MAX_WIDTH, buildMessageImageGalleryRows, classifyMessageImageAspect } from "./message-image-gallery-rows.mjs";
+import { MessageImageGallery, MessageImageGalleryAction, MessageImageGalleryActionProps, MessageImageGalleryItem, MessageImageGalleryItemProps, MessageImageGalleryMedia, MessageImageGalleryMediaProps, MessageImageGalleryOverlay, MessageImageGalleryOverlayProps, MessageImageGalleryPreview, MessageImageGalleryPreviewProps, MessageImageGalleryProps, MessageImageGalleryRow, MessageImageGalleryRowProps } from "./message-image-gallery.mjs";
+import { MessageVideoPreview, MessageVideoPreviewAction, MessageVideoPreviewActionProps, MessageVideoPreviewFailureAction, MessageVideoPreviewFailureActionProps, MessageVideoPreviewFailureContent, MessageVideoPreviewFailureContentProps, MessageVideoPreviewFailureIcon, MessageVideoPreviewFailureIconProps, MessageVideoPreviewFailureTitle, MessageVideoPreviewFailureTitleProps, MessageVideoPreviewFallback, MessageVideoPreviewFallbackProps, MessageVideoPreviewMedia, MessageVideoPreviewMediaProps, MessageVideoPreviewProps } from "./message-video-preview.mjs";
+export { MessageAttachmentAction, type MessageAttachmentActionProps, MessageAttachmentCard, type MessageAttachmentCardProps, MessageAttachmentCommentSummary, type MessageAttachmentCommentSummaryProps, MessageAttachmentDiffAddition, type MessageAttachmentDiffAdditionProps, MessageAttachmentDiffDeletion, type MessageAttachmentDiffDeletionProps, MessageAttachmentDiffSummary, type MessageAttachmentDiffSummaryProps, MessageAttachmentGroup, type MessageAttachmentGroupProps, MessageAttachmentMeta, MessageAttachmentMetaEnd, type MessageAttachmentMetaEndProps, type MessageAttachmentMetaProps, MessageAttachmentMetaStart, type MessageAttachmentMetaStartProps, MessageAttachmentSummary, type MessageAttachmentSummaryProps, MessageAttachmentTitle, type MessageAttachmentTitleProps, MessageImageGallery, MessageImageGalleryAction, type MessageImageGalleryActionProps, type MessageImageGalleryAspectKind, type MessageImageGalleryFit, type MessageImageGalleryImage, MessageImageGalleryItem, type MessageImageGalleryItemLayout, type MessageImageGalleryItemProps, MessageImageGalleryMedia, type MessageImageGalleryMediaProps, MessageImageGalleryOverlay, type MessageImageGalleryOverlayProps, MessageImageGalleryPreview, type MessageImageGalleryPreviewProps, type MessageImageGalleryProps, MessageImageGalleryRow, type MessageImageGalleryRowData, type MessageImageGalleryRowProps, MessageVideoPreview, MessageVideoPreviewAction, type MessageVideoPreviewActionProps, MessageVideoPreviewFailureAction, type MessageVideoPreviewFailureActionProps, MessageVideoPreviewFailureContent, type MessageVideoPreviewFailureContentProps, MessageVideoPreviewFailureIcon, type MessageVideoPreviewFailureIconProps, MessageVideoPreviewFailureTitle, type MessageVideoPreviewFailureTitleProps, MessageVideoPreviewFallback, type MessageVideoPreviewFallbackProps, MessageVideoPreviewMedia, type MessageVideoPreviewMediaProps, type MessageVideoPreviewProps, SINGLE_IMAGE_MAX_HEIGHT, SINGLE_IMAGE_MAX_WIDTH, buildMessageImageGalleryRows, classifyMessageImageAspect };

package/dist/components/message-attachment/message-attachment.d.mts

@@ -0,0 +1,27 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-attachment/message-attachment.d.ts
+export type MessageAttachmentGroupProps = useRender.ComponentProps<"div">;
+export declare function MessageAttachmentGroup({ className, render, ...props }: MessageAttachmentGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentCardProps = useRender.ComponentProps<"div">;
+export declare function MessageAttachmentCard({ className, render, ...props }: MessageAttachmentCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentTitleProps = useRender.ComponentProps<"span">;
+export declare function MessageAttachmentTitle({ className, render, ...props }: MessageAttachmentTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentMetaProps = useRender.ComponentProps<"span">;
+export declare function MessageAttachmentMeta({ className, render, ...props }: MessageAttachmentMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentMetaStartProps = useRender.ComponentProps<"span">;
+export declare function MessageAttachmentMetaStart({ className, render, ...props }: MessageAttachmentMetaStartProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentMetaEndProps = useRender.ComponentProps<"span">;
+export declare function MessageAttachmentMetaEnd({ className, render, ...props }: MessageAttachmentMetaEndProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentSummaryProps = useRender.ComponentProps<"span">;
+export declare function MessageAttachmentSummary({ className, render, ...props }: MessageAttachmentSummaryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentCommentSummaryProps = useRender.ComponentProps<"span">;
+export declare function MessageAttachmentCommentSummary({ className, render, ...props }: MessageAttachmentCommentSummaryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentDiffSummaryProps = useRender.ComponentProps<"span">;
+export declare function MessageAttachmentDiffSummary({ className, render, ...props }: MessageAttachmentDiffSummaryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentDiffAdditionProps = useRender.ComponentProps<"span">;
+export declare function MessageAttachmentDiffAddition({ className, render, ...props }: MessageAttachmentDiffAdditionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentDiffDeletionProps = useRender.ComponentProps<"span">;
+export declare function MessageAttachmentDiffDeletion({ className, render, ...props }: MessageAttachmentDiffDeletionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageAttachmentActionProps = useRender.ComponentProps<"button">;
+export declare function MessageAttachmentAction({ className, render, ...props }: MessageAttachmentActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/message-attachment/message-attachment.mjs

@@ -0,0 +1,129 @@
+import { messageAttachment } from "./message-attachment.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-attachment/message-attachment.tsx
+function MessageAttachmentGroup({ className, render, ...props }) {
+	const { group } = messageAttachment();
+	const defaultProps = { className: group({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-group" }
+	});
+}
+function MessageAttachmentCard({ className, render, ...props }) {
+	const { card } = messageAttachment();
+	const defaultProps = { className: card({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-card" }
+	});
+}
+function MessageAttachmentTitle({ className, render, ...props }) {
+	const { title } = messageAttachment();
+	const defaultProps = { className: title({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-title" }
+	});
+}
+function MessageAttachmentMeta({ className, render, ...props }) {
+	const { meta } = messageAttachment();
+	const defaultProps = { className: meta({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-meta" }
+	});
+}
+function MessageAttachmentMetaStart({ className, render, ...props }) {
+	const { metaStart } = messageAttachment();
+	const defaultProps = { className: metaStart({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-meta-start" }
+	});
+}
+function MessageAttachmentMetaEnd({ className, render, ...props }) {
+	const { metaEnd } = messageAttachment();
+	const defaultProps = { className: metaEnd({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-meta-end" }
+	});
+}
+function MessageAttachmentSummary({ className, render, ...props }) {
+	const { summary } = messageAttachment();
+	const defaultProps = { className: summary({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-summary" }
+	});
+}
+function MessageAttachmentCommentSummary({ className, render, ...props }) {
+	const { commentSummary } = messageAttachment();
+	const defaultProps = { className: commentSummary({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-comment-summary" }
+	});
+}
+function MessageAttachmentDiffSummary({ className, render, ...props }) {
+	const { diffSummary } = messageAttachment();
+	const defaultProps = { className: diffSummary({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-diff-summary" }
+	});
+}
+function MessageAttachmentDiffAddition({ className, render, ...props }) {
+	const { diffAddition } = messageAttachment();
+	const defaultProps = { className: diffAddition({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-diff-addition" }
+	});
+}
+function MessageAttachmentDiffDeletion({ className, render, ...props }) {
+	const { diffDeletion } = messageAttachment();
+	const defaultProps = { className: diffDeletion({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-diff-deletion" }
+	});
+}
+function MessageAttachmentAction({ className, render, ...props }) {
+	const { action } = messageAttachment();
+	const defaultProps = {
+		type: "button",
+		className: action({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-attachment-action" }
+	});
+}
+//#endregion
+export { MessageAttachmentAction, MessageAttachmentCard, MessageAttachmentCommentSummary, MessageAttachmentDiffAddition, MessageAttachmentDiffDeletion, MessageAttachmentDiffSummary, MessageAttachmentGroup, MessageAttachmentMeta, MessageAttachmentMetaEnd, MessageAttachmentMetaStart, MessageAttachmentSummary, MessageAttachmentTitle };

package/dist/components/message-attachment/message-attachment.recipe.mjs

@@ -0,0 +1,36 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-attachment/message-attachment.recipe.ts
+const messageAttachment = tv({ slots: {
+	group: "flex max-w-[360px] flex-wrap items-start gap-2",
+	card: [
+		"group/attachment relative inline-flex h-20 w-44 min-w-44 max-w-44 shrink-0 flex-col overflow-hidden",
+		"text-left",
+		"rounded-container border border-line-hairline bg-layer-card py-2 pr-[calc(var(--control-embedded-inset)-1px)] pl-2.5 text-foreground",
+		"outline-none hover:overlay-subtle active:overlay-medium focus-visible:shadow-focus",
+		"[&_[data-slot=message-attachment-action]_svg]:size-4"
+	],
+	title: ["block w-full max-w-full shrink-0 truncate", "pr-1 font-sans text-callout font-semibold text-foreground"],
+	meta: ["mt-auto flex w-full min-w-0 max-w-full items-center justify-between", "gap-2 font-mono text-mono-meta text-foreground-hint"],
+	metaStart: "min-w-0 flex-1 truncate",
+	metaEnd: ["ml-auto inline-flex shrink-0 items-center gap-1 self-stretch", "[&_svg]:size-[10px] [&_svg]:shrink-0"],
+	summary: [
+		"mt-0.5 inline-flex shrink-0 items-center whitespace-nowrap",
+		"[&_svg]:shrink-0",
+		"pr-1 font-mono text-mono-meta text-foreground-hint [&_svg]:size-3.5"
+	],
+	commentSummary: "gap-[2.5px]",
+	diffSummary: "gap-1.5",
+	diffAddition: ["text-success-strong"],
+	diffDeletion: ["text-danger-strong"],
+	action: [
+		"relative flex items-center justify-center",
+		"before:absolute before:-inset-1 before:content-['']",
+		"[&_svg]:shrink-0",
+		"-mt-1 mb-[calc(var(--control-embedded-inset)-9px)] size-6 self-end rounded-chip text-foreground",
+		"outline-none hover:bg-fill-medium active:bg-fill-medium",
+		"focus-visible:shadow-focus",
+		"[&_svg]:size-4"
+	]
+} });
+//#endregion
+export { messageAttachment };

package/dist/components/message-attachment/message-image-gallery-rows.d.mts

@@ -0,0 +1,47 @@
+//#region src/components/message-attachment/message-image-gallery-rows.d.ts
+/**
+ * Row-building rules shared by the message image gallery and the forwarded
+ * bundle gallery.
+ *
+ * Ported verbatim from the Raft web app's message gallery
+ * (`buildImageGalleryRows` / `classifyImageAspect`), including the two aspect
+ * thresholds and the split rules, so both surfaces lay the same attachments out
+ * identically:
+ *
+ * - a wide image (ratio >= 2.2) always takes a row of its own;
+ * - the others fill rows of three, except a lone buffer of exactly four,
+ *   which splits two-and-two;
+ * - normal images crop (`cover`), wide and tall (<= 0.55) ones stay fully
+ *   visible (`contain`);
+ * - a single image keeps its own proportions, capped to
+ *   SINGLE_IMAGE_MAX_WIDTH x SINGLE_IMAGE_MAX_HEIGHT, and reserves that box
+ *   before the image loads.
+ */
+export interface MessageImageGalleryImage {
+  width?: number | null;
+  height?: number | null;
+}
+export type MessageImageGalleryAspectKind = "wide" | "tall" | "normal";
+export type MessageImageGalleryFit = "cover" | "contain";
+export interface MessageImageGalleryItemLayout {
+  /** Index into the images array given to the builder. */
+  index: number;
+  /** `cover` crops to fill the cell; `contain` keeps the whole image visible. */
+  fit: MessageImageGalleryFit;
+  /**
+   * Present only for a single-image gallery: the box to reserve (as inline
+   * style) so the cell measures right before the image loads.
+   */
+  reserved?: {
+    width: string;
+    aspectRatio: string;
+  };
+}
+export interface MessageImageGalleryRowData {
+  items: MessageImageGalleryItemLayout[];
+}
+export declare const SINGLE_IMAGE_MAX_WIDTH = 416;
+export declare const SINGLE_IMAGE_MAX_HEIGHT = 288;
+export declare function classifyMessageImageAspect(image: MessageImageGalleryImage): MessageImageGalleryAspectKind;
+export declare function buildMessageImageGalleryRows(images: ReadonlyArray<MessageImageGalleryImage>): MessageImageGalleryRowData[];
+//#endregion

package/dist/components/message-attachment/message-image-gallery-rows.mjs

@@ -0,0 +1,55 @@
+//#region src/components/message-attachment/message-image-gallery-rows.ts
+const SINGLE_IMAGE_MAX_WIDTH = 416;
+const SINGLE_IMAGE_MAX_HEIGHT = 288;
+function classifyMessageImageAspect(image) {
+	if (!image.width || !image.height || image.width <= 0 || image.height <= 0) return "normal";
+	const ratio = image.width / image.height;
+	if (ratio >= 2.2) return "wide";
+	if (ratio <= .55) return "tall";
+	return "normal";
+}
+function reserveSingleImage(image) {
+	if (!image.width || !image.height || image.width <= 0 || image.height <= 0) return {
+		width: "min(11rem, 100%)",
+		aspectRatio: "4 / 3"
+	};
+	const scale = Math.min(416 / image.width, 288 / image.height, 1);
+	return {
+		width: `min(${Math.max(1, Math.round(image.width * scale))}px, 100%)`,
+		aspectRatio: `${image.width} / ${image.height}`
+	};
+}
+function itemLayout(image, index, single) {
+	if (single) return {
+		index,
+		fit: "contain",
+		reserved: reserveSingleImage(image)
+	};
+	return {
+		index,
+		fit: classifyMessageImageAspect(image) === "normal" ? "cover" : "contain"
+	};
+}
+function buildMessageImageGalleryRows(images) {
+	if (images.length === 1) return [{ items: [itemLayout(images[0], 0, true)] }];
+	const rows = [];
+	let buffer = [];
+	const pushBufferedRows = () => {
+		if (buffer.length === 0) return;
+		const chunkSize = buffer.length === 4 ? 2 : 3;
+		for (let i = 0; i < buffer.length; i += chunkSize) rows.push({ items: buffer.slice(i, i + chunkSize).map((index) => itemLayout(images[index], index, false)) });
+		buffer = [];
+	};
+	images.forEach((image, index) => {
+		if (classifyMessageImageAspect(image) === "wide") {
+			pushBufferedRows();
+			rows.push({ items: [itemLayout(image, index, false)] });
+			return;
+		}
+		buffer.push(index);
+	});
+	pushBufferedRows();
+	return rows;
+}
+//#endregion
+export { SINGLE_IMAGE_MAX_HEIGHT, SINGLE_IMAGE_MAX_WIDTH, buildMessageImageGalleryRows, classifyMessageImageAspect };