raft-ui 0.0.11 → 0.0.13

package/dist/wip.mjs

@@ -1,6 +1,6 @@
 import { cn } from "./cn.mjs";
 import { a as tv, n as useThemeFamily } from "./use-theme-Y_h1DKll.mjs";
-import { MessageSquare } from "lucide-react";
+import { Check, MessageSquare } from "lucide-react";
 import { Button } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -999,4 +999,765 @@ function DescriptionAction({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { ConversationPreviewCard, ConversationPreviewCardAction, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, ConversationPreviewCardAuthorSubtitle, ConversationPreviewCardChannel, ConversationPreviewCardContent, ConversationPreviewCardFooter, ConversationPreviewCardMeta, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, ConversationPreviewCardPreviewLeading, ConversationPreviewCardSecondaryPreview, ConversationPreviewCardTimestamp, DescriptionAction, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, ListItem, ListItemActionGroup, ListItemBody, ListItemDescription, ListItemIcon, ListItemMeta, ListItemRow, ListItemTitle, MediaListItem, MediaListItemActionGroup, MediaListItemAside, MediaListItemBody, MediaListItemSubtitle, MediaListItemText, MediaListItemTitle, MediaListItemVisual, PanelHeader, PanelHeaderActions, PanelHeaderContent, PanelHeaderIcon, PanelHeaderSubtitle, PanelHeaderSuffix, PanelHeaderTitle, PanelHeaderTitleRow, PanelHeaderVisual, PreviewShell, QuotedMessageCard, QuotedMessageCardAttachments, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, QuotedMessageCardAuthorSubtitle, QuotedMessageCardBody, QuotedMessageCardChannel, QuotedMessageCardContent, QuotedMessageCardContentWrap, QuotedMessageCardHeader, QuotedMessageCardMeta, QuotedMessageCardSeparator, QuotedMessageCardTag, QuotedMessageCardThread, QuotedMessageCardTimestamp, QuotedMessageCardUnavailable, SectionHeader, SectionHeaderActions, SectionHeaderContent, SectionHeaderCount, SectionHeaderIcon, SectionHeaderTitle, SectionLabel, ToggleGroup, ToggleGroupCount, ToggleGroupItem, ToggleGroupLabel };
+//#region src/components/message-item/recipe.ts
+const messageItem = tv({
+	slots: {
+		root: [
+			"group/message relative mb-1 mt-1.5 flex h-fit min-h-[3rem] min-w-0 gap-3 px-2 py-1",
+			"border-2 border-transparent text-left",
+			"transition-colors duration-100",
+			"hover:border-line-strong hover:bg-layer-panel active:border-line-strong active:bg-layer-panel"
+		],
+		gutter: ["relative w-9 shrink-0 self-stretch"],
+		avatarSlot: ["relative mt-0.5 shrink-0 self-start hover:brightness-90 transition-colors"],
+		selectMark: [
+			"mt-1.5 inline-flex size-5 shrink-0 items-center justify-center self-start rounded-full",
+			"border-2 border-line-strong bg-layer-panel text-transparent",
+			"data-[checked=true]:bg-brutal-yellow data-[checked=true]:text-black",
+			"[&_svg]:size-3 [&_svg]:stroke-[3]"
+		],
+		continuationTime: ["absolute right-1 top-1 select-none font-mono text-[10px] leading-none tabular-nums", "text-foreground/0 group-hover/message:text-foreground/40"],
+		content: ["min-w-0 flex-1"],
+		header: ["flex min-w-0 items-center gap-2 overflow-hidden pr-24"],
+		sender: ["min-w-0 shrink-0 truncate text-sm font-bold text-foreground-strong"],
+		senderState: ["inline-flex shrink-0 items-center border border-line-strong bg-gray-300 px-1.5 py-0.5", "text-[10px] font-bold uppercase leading-none text-foreground/60"],
+		meta: ["min-w-0 truncate font-mono text-xs text-foreground/40"],
+		time: ["shrink-0 whitespace-nowrap font-mono text-xs text-foreground/40"],
+		inlineStatus: ["shrink-0 text-[10px] font-bold text-foreground/40"],
+		body: ["break-words text-sm leading-5 text-foreground-strong select-text", "[&_*]:select-text"],
+		embedded: ["mt-1.5 min-w-0"],
+		notice: ["mt-1 inline-flex max-w-full border border-line-strong bg-soft-signal/40 px-2 py-1", "text-xs font-bold text-foreground/70"],
+		attachments: ["mt-1 space-y-2"],
+		footer: ["mt-1.5 flex flex-wrap items-center gap-1.5"],
+		toolbar: [
+			"absolute -top-3.5 right-2 z-20 hidden items-center overflow-hidden",
+			"border-2 border-line-strong bg-white shadow-brutal-sm",
+			"group-hover/message:flex"
+		],
+		toolbarButton: [
+			"inline-flex size-6 shrink-0 items-center justify-center",
+			"text-black/50 transition-colors duration-100 hover:bg-soft-signal/30 hover:text-black",
+			"data-[active=true]:text-foreground-strong",
+			"data-[saved=true]:text-brutal-orange",
+			"[&_svg]:size-[13px] [&_svg]:shrink-0"
+		],
+		savedIndicator: [
+			"absolute right-1 top-1 flex size-6 items-center justify-center",
+			"text-brutal-orange group-hover/message:hidden",
+			"[&_svg]:size-[13px]"
+		],
+		systemRoot: ["mb-1 flex min-w-0 items-center justify-center gap-2 px-2 py-1.5"],
+		systemTime: ["shrink-0 whitespace-nowrap font-mono text-xs text-foreground/40"],
+		systemContent: ["min-w-0 truncate text-xs text-foreground/50"],
+		imageGallery: ["max-w-[min(22rem,calc(100vw-7rem))] space-y-2 md:max-w-[28rem]"],
+		imageGalleryRow: ["grid gap-2"],
+		imageGalleryItem: [
+			"group/img relative overflow-hidden border-2 border-line-strong text-left",
+			"bg-brutal-cream/60 hover:brightness-95",
+			"data-[optimistic=true]:opacity-70 data-[single=true]:inline-block data-[single=true]:w-fit data-[single=true]:max-w-[26rem] data-[single=true]:justify-self-start"
+		],
+		imageGalleryMedia: ["block h-full w-full", "data-[fit=contain]:object-contain data-[fit=cover]:object-cover"],
+		imageGalleryOverlay: ["absolute inset-0 flex items-center justify-center"],
+		imageGalleryAction: [
+			"absolute right-1 bottom-1 z-10 hidden size-6 items-center justify-center",
+			"border border-line-strong bg-white/80 text-black/50",
+			"hover:text-black focus:flex focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-strong",
+			"group-hover/img:flex",
+			"[&_svg]:size-3"
+		],
+		videoPreview: [
+			"group/video relative w-full max-w-[min(28rem,calc(100vw-7rem))] overflow-hidden",
+			"border-2 border-line-strong bg-black text-left",
+			"data-[optimistic=true]:opacity-70"
+		],
+		videoPreviewFrame: ["relative aspect-video w-full bg-black"],
+		videoPreviewMedia: ["block h-full w-full bg-black object-contain"],
+		videoPreviewFallback: ["flex h-full w-full items-center justify-center bg-black text-white", "data-[interactive=true]:hover:bg-black/90 data-[interactive=true]:cursor-pointer data-[interactive=false]:cursor-default"],
+		videoPreviewAction: [
+			"absolute right-1.5 top-1.5 flex size-6 items-center justify-center",
+			"border border-line-strong bg-white/80 text-black/60",
+			"hover:bg-white hover:text-black",
+			"[&_svg]:size-3"
+		],
+		attachmentCard: [
+			"group/img relative inline-flex h-20 w-44 min-w-44 max-w-44 shrink-0 flex-col justify-between overflow-hidden",
+			"border border-black/15 bg-white px-2.5 py-2 text-left",
+			"text-black transition-colors duration-100 hover:border-black/30 hover:bg-black/5",
+			"data-[loading=true]:!bg-soft-signal/30 data-[loading=true]:cursor-wait data-[optimistic=true]:opacity-70",
+			"[&_svg]:size-4 [&_svg]:shrink-0"
+		],
+		attachmentIcon: ["absolute bottom-1.5 right-1.5 flex items-center justify-center", "text-black/60 group-hover/img:text-black"],
+		attachmentBody: ["w-full min-w-0 max-w-full overflow-hidden"],
+		attachmentTitle: ["block w-full max-w-full truncate text-xs font-bold text-black"],
+		attachmentMeta: ["mt-0.5 block truncate text-[10px] leading-4 text-black/45"],
+		attachmentAction: [
+			"absolute bottom-1.5 right-1.5 flex items-center justify-center",
+			"text-black/60 group-hover/img:text-black",
+			"[&_svg]:size-3"
+		],
+		badge: [
+			"inline-flex h-5 min-w-0 max-w-full items-center gap-1 overflow-hidden whitespace-nowrap",
+			"border border-line-strong px-1.5 text-[10px] font-bold leading-none",
+			"text-foreground-strong transition-colors duration-100",
+			"[&_svg]:size-3 [&_svg]:shrink-0"
+		],
+		reactionChip: [
+			"inline-flex h-5 min-w-0 max-w-full items-center gap-1 overflow-hidden rounded px-1.5",
+			"whitespace-nowrap bg-[#EEEDE6] text-[12px] font-bold leading-none text-foreground-strong",
+			"transition-colors duration-100 hover:bg-[#E0DED4]",
+			"data-[reacted=true]:bg-brutal-pink/20 data-[reacted=true]:hover:bg-brutal-pink/30",
+			"data-[failed=true]:bg-brutal-orange/30"
+		],
+		reactionGlyph: [
+			"inline-flex items-center justify-center leading-none",
+			"data-[emoji=true]:shrink-0",
+			"[&>svg]:size-[13px] [&>svg]:shrink-0"
+		],
+		reactionCount: ["inline-flex min-w-[1ch] items-center justify-center font-mono leading-none tabular-nums"],
+		reactionQuickRow: ["flex h-9 items-center gap-1 bg-white px-2"],
+		reactionQuickButton: ["flex size-7 items-center justify-center rounded bg-transparent transition-colors", "hover:bg-brutal-pink/20 active:bg-brutal-pink/20"],
+		reactionPicker: ["inline-flex items-center gap-0.5 border-2 border-line-strong bg-white px-1.5 py-1"],
+		reactionPopover: ["inline-block max-w-[280px] border-2 border-line-strong bg-white px-2 py-1.5", "text-xs font-bold text-black"],
+		reactionPopoverNames: ["flex max-w-60 flex-wrap items-center gap-y-0.5"],
+		reactionPopoverName: ["inline-flex min-w-0 items-baseline leading-5"],
+		reactionPopoverNameText: ["max-w-28 truncate"],
+		reactionPopoverSeparator: ["shrink-0 text-black/45"]
+	},
+	variants: {
+		rowState: {
+			active: { root: "border-line-strong bg-layer-panel" },
+			"search-match": { root: "border-line-strong bg-brutal-cyan/25 shadow-brutal" }
+		},
+		badgeTone: {
+			default: { badge: "bg-white" },
+			cyan: { badge: "bg-brutal-cyan/20 hover:bg-brutal-cyan/40" }
+		},
+		compact: { true: { root: "mt-0 min-h-0" } },
+		toolbarVisible: { true: { toolbar: "flex" } }
+	}
+});
+//#endregion
+//#region src/components/message-item/root-parts.tsx
+function MessageItem({ className, compact, render, rowState, ...props }) {
+	const { root } = messageItem({
+		compact,
+		rowState
+	});
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-row-state": rowState,
+			className: root({ className })
+		}, props),
+		state: { slot: "message-item" }
+	});
+}
+function MessageItemGutter({ className, render, ...props }) {
+	const { gutter } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: gutter({ className }) }, props),
+		state: { slot: "message-item-gutter" }
+	});
+}
+function MessageItemAvatarSlot({ className, render, ...props }) {
+	const { avatarSlot } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: avatarSlot({ className }) }, props),
+		state: { slot: "message-item-avatar-slot" }
+	});
+}
+function MessageItemSelectMark({ checked = false, className, render, ...props }) {
+	const { selectMark } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			"aria-hidden": true,
+			"data-checked": checked ? "true" : "false",
+			className: selectMark({ className }),
+			children: checked ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true }) : null
+		}, props),
+		state: { slot: "message-item-select-mark" }
+	});
+}
+function MessageItemContinuationTime({ className, render, ...props }) {
+	const { continuationTime } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: continuationTime({ className }) }, props),
+		state: { slot: "message-item-continuation-time" }
+	});
+}
+function MessageItemContent({ className, render, ...props }) {
+	const { content } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: content({ className }) }, props),
+		state: { slot: "message-item-content" }
+	});
+}
+function MessageItemHeader({ className, render, ...props }) {
+	const { header } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: header({ className }) }, props),
+		state: { slot: "message-item-header" }
+	});
+}
+function MessageItemSender({ className, render, ...props }) {
+	const { sender } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: sender({ className }) }, props),
+		state: { slot: "message-item-sender" }
+	});
+}
+function MessageItemSenderState({ className, render, ...props }) {
+	const { senderState } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: senderState({ className }) }, props),
+		state: { slot: "message-item-sender-state" }
+	});
+}
+function MessageItemMeta({ className, render, ...props }) {
+	const { meta } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: meta({ className }) }, props),
+		state: { slot: "message-item-meta" }
+	});
+}
+function MessageItemTime({ className, render, ...props }) {
+	const { time } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: time({ className }) }, props),
+		state: { slot: "message-item-time" }
+	});
+}
+function MessageItemInlineStatus({ className, render, ...props }) {
+	const { inlineStatus } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: inlineStatus({ className }) }, props),
+		state: { slot: "message-item-inline-status" }
+	});
+}
+function MessageItemBody({ className, render, ...props }) {
+	const { body } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: body({ className }) }, props),
+		state: { slot: "message-item-body" }
+	});
+}
+function MessageItemEmbedded({ className, render, ...props }) {
+	const { embedded } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: embedded({ className }) }, props),
+		state: { slot: "message-item-embedded" }
+	});
+}
+function MessageItemNotice({ className, render, ...props }) {
+	const { notice } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: notice({ className }) }, props),
+		state: { slot: "message-item-notice" }
+	});
+}
+function MessageItemAttachments({ className, render, ...props }) {
+	const { attachments } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: attachments({ className }) }, props),
+		state: { slot: "message-item-attachments" }
+	});
+}
+function MessageItemFooter({ className, render, ...props }) {
+	const { footer } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: footer({ className }) }, props),
+		state: { slot: "message-item-footer" }
+	});
+}
+function MessageItemBadge({ className, render, tone = "default", ...props }) {
+	const { badge } = messageItem({ badgeTone: tone });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: badge({ className }) }, props),
+		state: { slot: "message-item-badge" }
+	});
+}
+function MessageItemToolbar({ className, render, visible, ...props }) {
+	const { toolbar } = messageItem({ toolbarVisible: visible });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: toolbar({ className }) }, props),
+		state: { slot: "message-item-toolbar" }
+	});
+}
+function MessageItemToolbarButton({ active, saved, className, render, ...props }) {
+	const { toolbarButton } = messageItem();
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			type: "button",
+			"data-active": active ? "true" : void 0,
+			"data-saved": saved ? "true" : void 0,
+			className: toolbarButton({ className })
+		}, props),
+		state: { slot: "message-item-toolbar-button" }
+	});
+}
+function MessageItemSavedIndicator({ className, render, ...props }) {
+	const { savedIndicator } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			"aria-hidden": true,
+			className: savedIndicator({ className })
+		}, props),
+		state: { slot: "message-item-saved-indicator" }
+	});
+}
+function SystemMessageItem({ className, render, ...props }) {
+	const { systemRoot } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: systemRoot({ className }) }, props),
+		state: { slot: "system-message-item" }
+	});
+}
+function SystemMessageItemTime({ className, render, ...props }) {
+	const { systemTime } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: systemTime({ className }) }, props),
+		state: { slot: "system-message-item-time" }
+	});
+}
+function SystemMessageItemContent({ className, render, ...props }) {
+	const { systemContent } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: systemContent({ className }) }, props),
+		state: { slot: "system-message-item-content" }
+	});
+}
+//#endregion
+//#region src/components/message-item/media-parts.tsx
+function MessageImageGallery({ className, render, ...props }) {
+	const { imageGallery } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: imageGallery({ className }) }, props),
+		state: { slot: "message-image-gallery" }
+	});
+}
+function MessageImageGalleryRow({ className, render, ...props }) {
+	const { imageGalleryRow } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: imageGalleryRow({ className }) }, props),
+		state: { slot: "message-image-gallery-row" }
+	});
+}
+function MessageImageGalleryItem({ optimistic, single, className, render, ...props }) {
+	const { imageGalleryItem } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-optimistic": optimistic ? "true" : void 0,
+			"data-single": single ? "true" : void 0,
+			className: imageGalleryItem({ className })
+		}, props),
+		state: { slot: "message-image-gallery-item" }
+	});
+}
+function MessageImageGalleryMedia({ fit = "cover", className, render, ...props }) {
+	const { imageGalleryMedia } = messageItem();
+	return useRender({
+		defaultTagName: "img",
+		render,
+		props: mergeProps({
+			"data-fit": fit,
+			className: imageGalleryMedia({ className })
+		}, props),
+		state: { slot: "message-image-gallery-media" }
+	});
+}
+function MessageImageGalleryOverlay({ className, render, ...props }) {
+	const { imageGalleryOverlay } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: imageGalleryOverlay({ className }) }, props),
+		state: { slot: "message-image-gallery-overlay" }
+	});
+}
+function MessageImageGalleryAction({ className, render, ...props }) {
+	const { imageGalleryAction } = messageItem();
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			type: "button",
+			className: imageGalleryAction({ className })
+		}, props),
+		state: { slot: "message-image-gallery-action" }
+	});
+}
+function MessageVideoPreview({ optimistic, className, render, ...props }) {
+	const { videoPreview } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-optimistic": optimistic ? "true" : void 0,
+			className: videoPreview({ className })
+		}, props),
+		state: { slot: "message-video-preview" }
+	});
+}
+function MessageVideoPreviewFrame({ className, render, ...props }) {
+	const { videoPreviewFrame } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: videoPreviewFrame({ className }) }, props),
+		state: { slot: "message-video-preview-frame" }
+	});
+}
+function MessageVideoPreviewMedia({ className, render, ...props }) {
+	const { videoPreviewMedia } = messageItem();
+	return useRender({
+		defaultTagName: "video",
+		render,
+		props: mergeProps({ className: videoPreviewMedia({ className }) }, props),
+		state: { slot: "message-video-preview-media" }
+	});
+}
+function MessageVideoPreviewFallback({ interactive = false, className, render, ...props }) {
+	const { videoPreviewFallback } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-interactive": interactive ? "true" : "false",
+			className: videoPreviewFallback({ className })
+		}, props),
+		state: { slot: "message-video-preview-fallback" }
+	});
+}
+function MessageVideoPreviewAction({ className, render, ...props }) {
+	const { videoPreviewAction } = messageItem();
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			type: "button",
+			className: videoPreviewAction({ className })
+		}, props),
+		state: { slot: "message-video-preview-action" }
+	});
+}
+//#endregion
+//#region src/components/message-item/attachment-parts.tsx
+function MessageAttachmentCard({ optimistic, loading, className, render, ...props }) {
+	const { attachmentCard } = messageItem();
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			type: "button",
+			"aria-busy": loading ? "true" : void 0,
+			"data-loading": loading ? "true" : void 0,
+			"data-optimistic": optimistic ? "true" : void 0,
+			className: attachmentCard({ className })
+		}, props),
+		state: { slot: "message-attachment-card" }
+	});
+}
+function MessageAttachmentIcon({ className, render, ...props }) {
+	const { attachmentIcon } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachmentIcon({ className }) }, props),
+		state: { slot: "message-attachment-icon" }
+	});
+}
+function MessageAttachmentBody({ className, render, ...props }) {
+	const { attachmentBody } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachmentBody({ className }) }, props),
+		state: { slot: "message-attachment-body" }
+	});
+}
+function MessageAttachmentTitle({ className, render, ...props }) {
+	const { attachmentTitle } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachmentTitle({ className }) }, props),
+		state: { slot: "message-attachment-title" }
+	});
+}
+function MessageAttachmentMeta({ className, render, ...props }) {
+	const { attachmentMeta } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachmentMeta({ className }) }, props),
+		state: { slot: "message-attachment-meta" }
+	});
+}
+function MessageAttachmentAction({ className, render, ...props }) {
+	const { attachmentAction } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachmentAction({ className }) }, props),
+		state: { slot: "message-attachment-action" }
+	});
+}
+//#endregion
+//#region src/components/message-item/reaction-sprite.ts
+const REACTION_SPRITE_DATA_URI = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHdpZHRoPSIxNjgiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNjggMjQiPgogIDxnIGlkPSJ0aHVtYnNfdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiPjxwYXRoIGZpbGw9IiNGRkQ0NDAiIGQ9Ik04IDEwaDNsMS4zLTUuMmMuMi0uOCAxLTEuMyAxLjgtMS4xIDEgLjIgMS42IDEuMiAxLjMgMi4yTDE0LjUgMTBIMTljMS4xIDAgMiAuOSAyIDJ2MS4yYzAgLjQtLjEuOC0uMyAxLjFMMTguOCAyMGMtLjMuNi0xIDEtMS43IDFIOFYxMFoiIC8+IDxwYXRoIGZpbGw9IiNGRkY4RTciIGQ9Ik0xMy4yIDUuM2MuMi0uNy45LTEuMSAxLjYtLjguMS4xLjIuMS4zLjItLjYgMC0xIC40LTEuMiAxTDEzIDloLTEuMmwxLjQtMy43WiIgLz4gPHBhdGggZmlsbD0iIzhGQzREOSIgZD0iTTMgMTBoNXYxMUgzeiIgLz4gPHBhdGggc3Ryb2tlPSIjMTQxMTExIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik04IDEwaDNsMS4zLTUuMmMuMi0uOCAxLTEuMyAxLjgtMS4xIDEgLjIgMS42IDEuMiAxLjMgMi4yTDE0LjUgMTBIMTljMS4xIDAgMiAuOSAyIDJ2MS4yYzAgLjQtLjEuOC0uMyAxLjFMMTguOCAyMGMtLjMuNi0xIDEtMS43IDFIOFYxMFoiIC8+IDxwYXRoIHN0cm9rZT0iIzE0MTExMSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMyAxMGg1djExSDN6IiAvPjwvZz4KICA8ZyBpZD0iaGVhcnQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDApIj48cGF0aCBmaWxsPSIjRjk3MjY0IiBkPSJNMTIgMjEgNC40IDEzLjRDMi4zIDExLjMgMi4yIDggNC4xIDYuMSA1LjggNC40IDguNCA0LjUgMTAgNi4xbDIgMiAyLTJjMS42LTEuNiA0LjItMS43IDUuOSAwIDEuOSAxLjkgMS44IDUuMi0uMyA3LjNMMTIgMjFaIiAvPiA8cGF0aCBmaWxsPSIjRkZGOEU3IiBkPSJNNi4xIDcuMmMuOC0uOCAyLS44IDIuOS0uMUw2IDEwLjFjLS41LS45LS40LTIuMi4xLTIuOVoiIC8+IDxwYXRoIHN0cm9rZT0iIzE0MTExMSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTIgMjEgNC40IDEzLjRDMi4zIDExLjMgMi4yIDggNC4xIDYuMSA1LjggNC40IDguNCA0LjUgMTAgNi4xbDIgMiAyLTJjMS42LTEuNiA0LjItMS43IDUuOSAwIDEuOSAxLjkgMS44IDUuMi0uMyA3LjNMMTIgMjFaIiAvPjwvZz4KICA8ZyBpZD0icGFydHlfcG9wcGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OCAwKSI+PHBhdGggZmlsbD0iI0JCQUZFNiIgZD0iTTQgMjAgOC41IDguNSAxNiAxNiA0IDIwWiIgLz4gPHBhdGggZmlsbD0iI0ZGRDQ0MCIgZD0iTTYuOCAxMi4yIDExLjggMTcuMiA4LjMgMTguMyA1LjcgMTUuNHoiIC8+IDxwYXRoIHN0cm9rZT0iIzE0MTExMSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNNCAyMCA4LjUgOC41IDE2IDE2IDQgMjBaIiAvPiA8cGF0aCBzdHJva2U9IiMxNDExMTEiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE0IDVoM00xOCA5bDIuMy0yLjNNMTkgMTNoMi41IiAvPiA8cGF0aCBmaWxsPSIjRjk3MjY0IiBkPSJNMTggM2gyLjV2Mi41SDE4eiIgLz4gPHBhdGggZmlsbD0iIzI3Q0NGMyIgZD0iTTEzIDZoMi41djIuNUgxM3oiIC8+PC9nPgogIDxnIGlkPSJleWVzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MiAwKSI+PHBhdGggZmlsbD0iIzI3Q0NGMyIgZD0iTTMgMTFjMC0zLjEgMi4yLTUgNC44LTVzNC44IDEuOSA0LjggNS0yLjIgNS00LjggNVMzIDE0LjEgMyAxMVoiIC8+IDxwYXRoIGZpbGw9IiMyN0NDRjMiIGQ9Ik0xMS40IDExYzAtMy4xIDIuMi01IDQuOC01UzIxIDcuOSAyMSAxMXMtMi4yIDUtNC44IDUtNC44LTEuOS00LjgtNVoiIC8+IDxwYXRoIGZpbGw9IiNGRkY4RTciIGQ9Ik01LjIgOS4yaDJ2MmgtMnpNMTMuNiA5LjJoMnYyaC0yeiIgLz4gPHBhdGggZmlsbD0iIzE0MTExMSIgZD0iTTcuOCA4LjhoMi44djQuNkg3Ljh6TTE2LjIgOC44SDE5djQuNmgtMi44eiIgLz4gPHBhdGggc3Ryb2tlPSIjMTQxMTExIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDExYzAtMy4xIDIuMi01IDQuOC01czQuOCAxLjkgNC44IDUtMi4yIDUtNC44IDVTMyAxNC4xIDMgMTFaIiAvPiA8cGF0aCBzdHJva2U9IiMxNDExMTEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTExLjQgMTFjMC0zLjEgMi4yLTUgNC44LTVTMjEgNy45IDIxIDExcy0yLjIgNS00LjggNS00LjgtMS45LTQuOC01WiIgLz48L2c+CiAgPGcgaWQ9ImZpcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDk2IDApIj48cGF0aCBmaWxsPSIjRjhBMTZGIiBkPSJNMTIgMjJjLTQuNCAwLTcuNi0zLTcuNi03LjEgMC0zLjEgMS45LTUuNCA0LjEtNy4xLjMgMiAxLjIgMy4yIDIuMyAzLjktLjMtMy4zIDEtNi4zIDQuMS04LjcuNSAzIDIuMSA0LjcgMy40IDYuMyAxLjEgMS40IDEuMyAyLjkgMS4zIDUuMSAwIDQuNC0zLjEgNy42LTcuNiA3LjZaIiAvPiA8cGF0aCBmaWxsPSIjRkZENDQwIiBkPSJNMTIuMSAxOS44Yy0yLjIgMC0zLjgtMS40LTMuOC0zLjUgMC0xLjUuOS0yLjcgMi4xLTMuNi4yIDEgLjYgMS43IDEuMyAyIC4xLTEuOC44LTMuMiAyLjMtNC40LjMgMS41IDEgMi40IDEuNyAzLjIuNi43LjggMS40LjggMi41IDAgMi4zLTEuNyAzLjgtNC40IDMuOFoiIC8+IDxwYXRoIHN0cm9rZT0iIzE0MTExMSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTIgMjJjLTQuNCAwLTcuNi0zLTcuNi03LjEgMC0zLjEgMS45LTUuNCA0LjEtNy4xLjMgMiAxLjIgMy4yIDIuMyAzLjktLjMtMy4zIDEtNi4zIDQuMS04LjcuNSAzIDIuMSA0LjcgMy40IDYuMyAxLjEgMS40IDEuMyAyLjkgMS4zIDUuMSAwIDQuNC0zLjEgNy42LTcuNiA3LjZaIiAvPiA8cGF0aCBzdHJva2U9IiMxNDExMTEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTIuMSAxOS44Yy0yLjIgMC0zLjgtMS40LTMuOC0zLjUgMC0xLjUuOS0yLjcgMi4xLTMuNi4yIDEgLjYgMS43IDEuMyAyIC4xLTEuOC44LTMuMiAyLjMtNC40LjMgMS41IDEgMi40IDEuNyAzLjIuNi43LjggMS40LjggMi41IDAgMi4zLTEuNyAzLjgtNC40IDMuOFoiIC8+PC9nPgogIDxnIGlkPSJqb3kiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMCAwKSI+PHBhdGggZmlsbD0iI0ZGRDQ0MCIgZD0iTTQgNWgxNnYxNEg0eiIgLz4gPHBhdGggZmlsbD0iIzE0MTExMSIgZD0iTTcgOWgzLjJ2Mi40SDd6TTEzLjggOUgxN3YyLjRoLTMuMnpNOCAxNGg4djJIOHoiIC8+IDxwYXRoIGZpbGw9IiMyN0NDRjMiIGQ9Ik01IDEyaDIuNHY0LjVINXpNMTYuNiAxMkgxOXY0LjVoLTIuNHoiIC8+IDxwYXRoIHN0cm9rZT0iIzE0MTExMSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNNCA1aDE2djE0SDR6IiAvPiA8cGF0aCBzdHJva2U9IiMxNDExMTEiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNOCAxNmMxIDEuMiAyLjIgMS44IDQgMS44czMtLjYgNC0xLjgiIC8+PC9nPgogIDxnIGlkPSJjaGVja19tYXJrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDQgMCkiPjxwYXRoIGZpbGw9IiM5RENBQUEiIGQ9Ik00IDRoMTZ2MTZINHoiIC8+IDxwYXRoIGZpbGw9IiNGRkY4RTciIGQ9Ik03IDExaDN2M0g3ek0xMCAxNGgzdjNoLTN6TTEzIDExaDN2M2gtM3pNMTYgOGgzdjNoLTN6TTE4IDZoMnYzaC0yeiIgLz4gPHBhdGggc3Ryb2tlPSIjMTQxMTExIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik00IDRoMTZ2MTZINHoiIC8+PC9nPgo8L3N2Zz4K";
+//#endregion
+//#region src/components/message-item/reaction-parts.tsx
+const MESSAGE_QUICK_REACTIONS = [
+	"👍",
+	"❤️",
+	"🎉",
+	"👀",
+	"🔥",
+	"😂",
+	"✅"
+];
+const REACTION_SPRITE_PATH = REACTION_SPRITE_DATA_URI;
+const REACTION_SPRITE_WIDTH = 168;
+const REACTION_SPRITE_HEIGHT = 24;
+const REACTION_SPRITE_ITEMS = {
+	"👍": {
+		id: "thumbs_up",
+		x: 0,
+		y: 0,
+		width: 24,
+		height: 24
+	},
+	"❤️": {
+		id: "heart",
+		x: 24,
+		y: 0,
+		width: 24,
+		height: 24
+	},
+	"❤": {
+		id: "heart",
+		x: 24,
+		y: 0,
+		width: 24,
+		height: 24
+	},
+	"🎉": {
+		id: "party_popper",
+		x: 48,
+		y: 0,
+		width: 24,
+		height: 24
+	},
+	"👀": {
+		id: "eyes",
+		x: 72,
+		y: 0,
+		width: 24,
+		height: 24
+	},
+	"🔥": {
+		id: "fire",
+		x: 96,
+		y: 0,
+		width: 24,
+		height: 24
+	},
+	"😂": {
+		id: "joy",
+		x: 120,
+		y: 0,
+		width: 24,
+		height: 24
+	},
+	"✅": {
+		id: "check_mark",
+		x: 144,
+		y: 0,
+		width: 24,
+		height: 24
+	}
+};
+function MessageReactionChip({ reacted, failed, className, render, ...props }) {
+	const { reactionChip } = messageItem();
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			type: "button",
+			"data-reacted": reacted ? "true" : void 0,
+			"data-failed": failed ? "true" : void 0,
+			className: reactionChip({ className })
+		}, props),
+		state: { slot: "message-reaction-chip" }
+	});
+}
+function MessageReactionGlyph({ children, className, emoji, render, size = 15, spritePath = REACTION_SPRITE_PATH, style, ...props }) {
+	const { reactionGlyph } = messageItem();
+	const glyph = emoji ?? (typeof children === "string" ? children : void 0);
+	const spriteItem = glyph ? REACTION_SPRITE_ITEMS[glyph] : void 0;
+	const spriteScale = spriteItem ? size / spriteItem.width : 1;
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			"aria-label": spriteItem ? glyph : void 0,
+			"data-emoji": glyph ? "true" : void 0,
+			"data-reaction-glyph": spriteItem?.id,
+			"data-reaction-sprite-path": spriteItem ? spritePath : void 0,
+			children: spriteItem ? void 0 : glyph ?? children,
+			className: reactionGlyph({ className }),
+			role: spriteItem ? "img" : void 0,
+			style: glyph ? {
+				backgroundImage: spriteItem ? `url(${spritePath})` : void 0,
+				backgroundPosition: spriteItem ? `${-spriteItem.x * spriteScale}px ${-spriteItem.y * spriteScale}px` : void 0,
+				backgroundRepeat: spriteItem ? "no-repeat" : void 0,
+				backgroundSize: spriteItem ? `${REACTION_SPRITE_WIDTH * spriteScale}px ${REACTION_SPRITE_HEIGHT * spriteScale}px` : void 0,
+				fontSize: size,
+				height: size,
+				lineHeight: 1,
+				width: size,
+				...style
+			} : style
+		}, props),
+		state: { slot: "message-reaction-glyph" }
+	});
+}
+function MessageReactionCount({ className, render, ...props }) {
+	const { reactionCount } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: reactionCount({ className }) }, props),
+		state: { slot: "message-reaction-count" }
+	});
+}
+function MessageReactionQuickRow({ className, render, ...props }) {
+	const { reactionQuickRow } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: reactionQuickRow({ className }) }, props),
+		state: { slot: "message-reaction-quick-row" }
+	});
+}
+function MessageReactionQuickButton({ className, render, ...props }) {
+	const { reactionQuickButton } = messageItem();
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			type: "button",
+			className: reactionQuickButton({ className })
+		}, props),
+		state: { slot: "message-reaction-quick-button" }
+	});
+}
+function MessageReactionPicker({ className, render, ...props }) {
+	const { reactionPicker } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: reactionPicker({ className }) }, props),
+		state: { slot: "message-reaction-picker" }
+	});
+}
+function MessageReactionPopover({ className, render, ...props }) {
+	const { reactionPopover } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: reactionPopover({ className }) }, props),
+		state: { slot: "message-reaction-popover" }
+	});
+}
+function MessageReactionPopoverNames({ className, render, ...props }) {
+	const { reactionPopoverNames } = messageItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: reactionPopoverNames({ className }) }, props),
+		state: { slot: "message-reaction-popover-names" }
+	});
+}
+function MessageReactionPopoverName({ className, render, ...props }) {
+	const { reactionPopoverName } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: reactionPopoverName({ className }) }, props),
+		state: { slot: "message-reaction-popover-name" }
+	});
+}
+function MessageReactionPopoverNameText({ className, render, ...props }) {
+	const { reactionPopoverNameText } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: reactionPopoverNameText({ className }) }, props),
+		state: { slot: "message-reaction-popover-name-text" }
+	});
+}
+function MessageReactionPopoverSeparator({ className, render, ...props }) {
+	const { reactionPopoverSeparator } = messageItem();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: reactionPopoverSeparator({ className }) }, props),
+		state: { slot: "message-reaction-popover-separator" }
+	});
+}
+//#endregion
+export { ConversationPreviewCard, ConversationPreviewCardAction, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, ConversationPreviewCardAuthorSubtitle, ConversationPreviewCardChannel, ConversationPreviewCardContent, ConversationPreviewCardFooter, ConversationPreviewCardMeta, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, ConversationPreviewCardPreviewLeading, ConversationPreviewCardSecondaryPreview, ConversationPreviewCardTimestamp, DescriptionAction, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, ListItem, ListItemActionGroup, ListItemBody, ListItemDescription, ListItemIcon, ListItemMeta, ListItemRow, ListItemTitle, MESSAGE_QUICK_REACTIONS, MediaListItem, MediaListItemActionGroup, MediaListItemAside, MediaListItemBody, MediaListItemSubtitle, MediaListItemText, MediaListItemTitle, MediaListItemVisual, MessageAttachmentAction, MessageAttachmentBody, MessageAttachmentCard, MessageAttachmentIcon, MessageAttachmentMeta, MessageAttachmentTitle, MessageImageGallery, MessageImageGalleryAction, MessageImageGalleryItem, MessageImageGalleryMedia, MessageImageGalleryOverlay, MessageImageGalleryRow, MessageItem, MessageItemAttachments, MessageItemAvatarSlot, MessageItemBadge, MessageItemBody, MessageItemContent, MessageItemContinuationTime, MessageItemEmbedded, MessageItemFooter, MessageItemGutter, MessageItemHeader, MessageItemInlineStatus, MessageItemMeta, MessageItemNotice, MessageItemSavedIndicator, MessageItemSelectMark, MessageItemSender, MessageItemSenderState, MessageItemTime, MessageItemToolbar, MessageItemToolbarButton, MessageReactionChip, MessageReactionCount, MessageReactionGlyph, MessageReactionPicker, MessageReactionPopover, MessageReactionPopoverName, MessageReactionPopoverNameText, MessageReactionPopoverNames, MessageReactionPopoverSeparator, MessageReactionQuickButton, MessageReactionQuickRow, MessageVideoPreview, MessageVideoPreviewAction, MessageVideoPreviewFallback, MessageVideoPreviewFrame, MessageVideoPreviewMedia, PanelHeader, PanelHeaderActions, PanelHeaderContent, PanelHeaderIcon, PanelHeaderSubtitle, PanelHeaderSuffix, PanelHeaderTitle, PanelHeaderTitleRow, PanelHeaderVisual, PreviewShell, QuotedMessageCard, QuotedMessageCardAttachments, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, QuotedMessageCardAuthorSubtitle, QuotedMessageCardBody, QuotedMessageCardChannel, QuotedMessageCardContent, QuotedMessageCardContentWrap, QuotedMessageCardHeader, QuotedMessageCardMeta, QuotedMessageCardSeparator, QuotedMessageCardTag, QuotedMessageCardThread, QuotedMessageCardTimestamp, QuotedMessageCardUnavailable, SectionHeader, SectionHeaderActions, SectionHeaderContent, SectionHeaderCount, SectionHeaderIcon, SectionHeaderTitle, SectionLabel, SystemMessageItem, SystemMessageItemContent, SystemMessageItemTime, ToggleGroup, ToggleGroupCount, ToggleGroupItem, ToggleGroupLabel };