@botiverse/raft-ui 0.83.0 → 0.84.0

package/dist/components/list-row/list-row.recipe.mjs

@@ -7,7 +7,6 @@ const listRow = tv({
 			"group/list-row flex w-full min-w-0 items-center gap-3 py-3 text-left",
 			"font-sans no-underline",
 			"[--list-row-ink:var(--foreground)] [--list-row-ink-2:var(--foreground-muted)] [--list-row-ink-3:var(--foreground-hint)]",
-			"[--list-row-status-space:0px]",
 			"text-(--list-row-ink)",
 			"not-disabled:not-aria-disabled:data-[tone=unread]:[--list-row-ink-2:var(--foreground)]",
 			"not-disabled:not-aria-disabled:data-[tone=muted]:[--list-row-ink:var(--foreground-muted)]",
@@ -19,7 +18,7 @@ const listRow = tv({
 			"aria-disabled:[--list-row-ink-2:var(--foreground-disabled)] aria-disabled:[--list-row-ink-3:var(--foreground-disabled)]"
 		],
 		icon: ["flex shrink-0 items-center justify-center", "text-(--list-row-ink-3) [&>svg]:size-5 [&>svg]:shrink-0"],
-		body: ["flex min-w-0 flex-1 flex-col gap-0.5", "-mb-(--list-row-status-space,0px)"],
+		body: ["flex min-w-0 flex-1 flex-col gap-0.5"],
 		line: ["flex min-w-0 items-center gap-2"],
 		title: [
 			"min-w-0 flex-1 truncate",
@@ -35,17 +34,17 @@ const listRow = tv({
 	variants: {
 		variant: {
 			default: { root: "min-h-16 pointer-coarse:min-h-14 pointer-coarse:py-2 [--list-row-rule-start:63px]" },
-			plain: { root: [
-				"py-(--settings-row-inset) pb-[calc(var(--settings-row-inset)+var(--list-row-status-space))]",
-				"has-[>[data-slot=list-row-body]>[data-slot=save-status]]:[--list-row-status-space:calc(--spacing(1)+var(--text-footnote--line-height))]",
-				"[--list-row-rule-start:16px]"
-			] },
+			plain: { root: ["py-(--settings-row-inset)", "[--list-row-rule-start:16px]"] },
 			entry: { root: "" }
 		},
 		interactive: {
 			true: {},
 			false: {}
 		},
+		attached: {
+			true: {},
+			false: {}
+		},
 		cell: {
 			false: { root: [
 				"relative px-4",
@@ -67,6 +66,7 @@ const listRow = tv({
 	compoundVariants: [
 		{
 			cell: false,
+			attached: false,
 			variant: ["default", "plain"],
 			class: { root: [
 				"before:pointer-events-none before:absolute before:top-0 before:right-0 before:hidden",
@@ -74,6 +74,17 @@ const listRow = tv({
 				"[[data-slot=list-row]+&]:before:block [li+li>&]:before:block"
 			] }
 		},
+		{
+			variant: "plain",
+			attached: true,
+			class: { root: "pt-0" }
+		},
+		{
+			variant: "plain",
+			attached: true,
+			interactive: true,
+			class: { root: "min-h-control" }
+		},
 		{
 			cell: false,
 			interactive: true,
@@ -92,6 +103,7 @@ const listRow = tv({
 	defaultVariants: {
 		variant: "default",
 		interactive: true,
+		attached: false,
 		cell: false,
 		wrap: false
 	}

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

@@ -1,7 +1,7 @@
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/message-action-card/message-action-card-content.recipe.ts
 const messageActionCardContent = tv({ slots: {
-	root: ["p-3", "flex flex-col gap-2 px-3 pt-0 pb-3"],
+	root: ["flex flex-col gap-2 pt-0"],
 	panel: [
 		"h-(--collapsible-panel-height) overflow-hidden",
 		"transition-[height] duration-200 ease-out motion-reduce:transition-none",
@@ -44,8 +44,8 @@ const messageActionCardContent = tv({ slots: {
 		"[&>svg]:mt-[calc((1lh-14px)/2)] [&>svg]:text-foreground-muted"
 	],
 	completion: ["inline-flex items-center gap-1.5 text-footnote text-foreground-muted", "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-foreground"],
-	actions: ["flex flex-wrap items-center justify-end", "mt-1 gap-2"],
-	actionsNote: ["min-w-0 flex-1 basis-40", "text-footnote text-foreground-muted"]
+	actions: ["mt-1"],
+	actionsNote: ["min-w-0 basis-full", "text-footnote text-foreground-muted"]
 } });
 //#endregion
 export { messageActionCardContent };

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

@@ -1,5 +1,6 @@
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Badge } from "../badge/badge.mjs";
+import { messageCard } from "../message-embed/message-embed.recipe.mjs";
 import { useLabelValueFit } from "../../lib/label-value-fit.mjs";
 import { MessageEmbed, MessageEmbedContent, MessageEmbedHeader } from "../message-embed/message-embed.mjs";
 import { messageActionCard } from "./message-action-card.recipe.mjs";
@@ -25,6 +26,7 @@ function MessageActionCard({ className, render, open, defaultOpen = true, onOpen
 		defaultOpen,
 		onOpenChange,
 		render: /* @__PURE__ */ jsx(MessageEmbed, {
+			size: "item",
 			className: root({ className }),
 			render,
 			...props
@@ -36,7 +38,7 @@ function MessageActionCardContent({ className, render, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		className: panel(),
 		children: /* @__PURE__ */ jsx(MessageEmbedContent, {
-			className: root({ className }),
+			className: messageCard().inset({ className: root({ className }) }),
 			render,
 			...props
 		})
@@ -129,8 +131,9 @@ function MessageActionCardCollapseTrigger({ className, ...props }) {
 }
 function MessageActionCardHeader({ className, render, ...props }) {
 	const { header } = messageActionCard();
+	const { inset, heading } = messageCard();
 	return /* @__PURE__ */ jsx(MessageEmbedHeader, {
-		className: header({ className }),
+		className: inset({ className: heading({ className: header({ className }) }) }),
 		render,
 		...props
 	});
@@ -290,10 +293,11 @@ function MessageActionCardCompletion({ className, render, ...props }) {
 }
 function MessageActionCardActions({ className, render, ...props }) {
 	const { actions } = messageActionCardContent();
+	const { actionRow } = messageCard();
 	return useRender({
 		defaultTagName: "div",
 		render,
-		props: mergeProps({ className: actions({ className }) }, props),
+		props: mergeProps({ className: actionRow({ className: actions({ className }) }) }, props),
 		state: { slot: "message-action-card-actions" }
 	});
 }

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

@@ -2,12 +2,8 @@ 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"
-		],
+		root: ["group/action-card mt-2"],
+		header: ["flex items-start", "gap-2 pb-2 group-data-closed/action-card:pb-3"],
 		headerIcon: [
 			"flex shrink-0 items-center justify-center",
 			"[&>svg]:shrink-0",

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

@@ -1,2 +1,3 @@
 import { MessageEmbed, MessageEmbedContent, MessageEmbedContentProps, MessageEmbedFooter, MessageEmbedFooterProps, MessageEmbedHeader, MessageEmbedHeaderProps, MessageEmbedProps } from "./message-embed.mjs";
-export { MessageEmbed, MessageEmbedContent, type MessageEmbedContentProps, MessageEmbedFooter, type MessageEmbedFooterProps, MessageEmbedHeader, type MessageEmbedHeaderProps, type MessageEmbedProps };
+import { messageCard, messageEmbed } from "./message-embed.recipe.mjs";
+export { MessageEmbed, MessageEmbedContent, type MessageEmbedContentProps, MessageEmbedFooter, type MessageEmbedFooterProps, MessageEmbedHeader, type MessageEmbedHeaderProps, type MessageEmbedProps, messageCard, messageEmbed };

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

@@ -1,7 +1,7 @@
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/message-embed/message-embed.d.ts
 type DivProps = useRender.ComponentProps<"div">;
-export declare function MessageEmbed({ interactive, className, render, ...props }: MessageEmbedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function MessageEmbed({ interactive, size, className, render, ...props }: MessageEmbedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageEmbedHeader({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageEmbedContent({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageEmbedFooter({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
@@ -13,6 +13,13 @@ export type MessageEmbedProps = DivProps & {
    * @default false
    */
   interactive?: boolean;
+  /**
+   * The card's width, one of the two a card in a message has
+   * (cards-in-messages.md): `item` for a card that opens one thing, at most
+   * 400px and the message's width on a phone; `content` for a card that
+   * shows other messages, at most 560px. Unset, the card sets no width.
+   */
+  size?: "item" | "content";
 };
 export type MessageEmbedHeaderProps = DivProps;
 export type MessageEmbedContentProps = DivProps;

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

@@ -2,8 +2,8 @@ import { messageEmbed } from "./message-embed.recipe.mjs";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/message-embed/message-embed.tsx
-function MessageEmbed({ interactive = false, className, render, ...props }) {
-	const { root } = messageEmbed();
+function MessageEmbed({ interactive = false, size, className, render, ...props }) {
+	const { root } = messageEmbed({ size });
 	const defaultProps = {
 		"data-interactive": interactive ? "true" : void 0,
 		className: root({ className })

package/dist/components/message-embed/message-embed.recipe.d.mts

@@ -0,0 +1,160 @@
+//#region src/components/message-embed/message-embed.recipe.d.ts
+export declare const messageEmbed: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    item: {
+      root: string[];
+    };
+    content: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string[];
+  content: string[];
+  footer: string[];
+}, undefined, {
+  size: {
+    item: {
+      root: string[];
+    };
+    content: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string[];
+  content: string[];
+  footer: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    item: {
+      root: string[];
+    };
+    content: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string[];
+  content: string[];
+  footer: string[];
+}>>;
+export declare const messageCard: import("tailwind-variants/lite").TVReturnType<{
+  [key: string]: {
+    [key: string]: {
+      actionGroup?: import("tailwind-variants/lite").ClassValue;
+      actionRow?: import("tailwind-variants/lite").ClassValue;
+      actions?: import("tailwind-variants/lite").ClassValue;
+      body?: import("tailwind-variants/lite").ClassValue;
+      eyebrow?: import("tailwind-variants/lite").ClassValue;
+      heading?: import("tailwind-variants/lite").ClassValue;
+      inset?: import("tailwind-variants/lite").ClassValue;
+      meta?: import("tailwind-variants/lite").ClassValue;
+      popover?: import("tailwind-variants/lite").ClassValue;
+      source?: import("tailwind-variants/lite").ClassValue;
+      sourceFooter?: import("tailwind-variants/lite").ClassValue;
+      sourceHost?: import("tailwind-variants/lite").ClassValue;
+      sourceHostText?: import("tailwind-variants/lite").ClassValue;
+      sourceIcon?: import("tailwind-variants/lite").ClassValue;
+      sourceName?: import("tailwind-variants/lite").ClassValue;
+      title?: import("tailwind-variants/lite").ClassValue;
+    } | import("tailwind-variants/lite").ClassValue;
+  };
+} | {
+  [x: string]: {
+    [x: string]: {
+      actionGroup?: import("tailwind-variants/lite").ClassValue;
+      actionRow?: import("tailwind-variants/lite").ClassValue;
+      actions?: import("tailwind-variants/lite").ClassValue;
+      body?: import("tailwind-variants/lite").ClassValue;
+      eyebrow?: import("tailwind-variants/lite").ClassValue;
+      heading?: import("tailwind-variants/lite").ClassValue;
+      inset?: import("tailwind-variants/lite").ClassValue;
+      meta?: import("tailwind-variants/lite").ClassValue;
+      popover?: import("tailwind-variants/lite").ClassValue;
+      source?: import("tailwind-variants/lite").ClassValue;
+      sourceFooter?: import("tailwind-variants/lite").ClassValue;
+      sourceHost?: import("tailwind-variants/lite").ClassValue;
+      sourceHostText?: import("tailwind-variants/lite").ClassValue;
+      sourceIcon?: import("tailwind-variants/lite").ClassValue;
+      sourceName?: import("tailwind-variants/lite").ClassValue;
+      title?: import("tailwind-variants/lite").ClassValue;
+    } | import("tailwind-variants/lite").ClassValue;
+  };
+} | {}, {
+  source: string[];
+  sourceIcon: string[];
+  sourceName: string[];
+  sourceHost: string[];
+  sourceHostText: string[];
+  sourceFooter: string[];
+  body: string[];
+  eyebrow: string[];
+  title: string[];
+  heading: string[];
+  meta: string[];
+  actions: string[];
+  actionRow: string[];
+  actionGroup: string[];
+  inset: string[];
+  popover: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: {
+      actionGroup?: import("tailwind-variants/lite").ClassValue;
+      actionRow?: import("tailwind-variants/lite").ClassValue;
+      actions?: import("tailwind-variants/lite").ClassValue;
+      body?: import("tailwind-variants/lite").ClassValue;
+      eyebrow?: import("tailwind-variants/lite").ClassValue;
+      heading?: import("tailwind-variants/lite").ClassValue;
+      inset?: import("tailwind-variants/lite").ClassValue;
+      meta?: import("tailwind-variants/lite").ClassValue;
+      popover?: import("tailwind-variants/lite").ClassValue;
+      source?: import("tailwind-variants/lite").ClassValue;
+      sourceFooter?: import("tailwind-variants/lite").ClassValue;
+      sourceHost?: import("tailwind-variants/lite").ClassValue;
+      sourceHostText?: import("tailwind-variants/lite").ClassValue;
+      sourceIcon?: import("tailwind-variants/lite").ClassValue;
+      sourceName?: import("tailwind-variants/lite").ClassValue;
+      title?: import("tailwind-variants/lite").ClassValue;
+    } | import("tailwind-variants/lite").ClassValue;
+  };
+} | {}, {
+  source: string[];
+  sourceIcon: string[];
+  sourceName: string[];
+  sourceHost: string[];
+  sourceHostText: string[];
+  sourceFooter: string[];
+  body: string[];
+  eyebrow: string[];
+  title: string[];
+  heading: string[];
+  meta: string[];
+  actions: string[];
+  actionRow: string[];
+  actionGroup: string[];
+  inset: string[];
+  popover: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<unknown, {
+  source: string[];
+  sourceIcon: string[];
+  sourceName: string[];
+  sourceHost: string[];
+  sourceHostText: string[];
+  sourceFooter: string[];
+  body: string[];
+  eyebrow: string[];
+  title: string[];
+  heading: string[];
+  meta: string[];
+  actions: string[];
+  actionRow: string[];
+  actionGroup: string[];
+  inset: string[];
+  popover: string[];
+}>>;
+//#endregion

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

@@ -1,15 +1,54 @@
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/message-embed/message-embed.recipe.ts
-const messageEmbed = tv({ slots: {
-	root: [
-		"group block min-w-0 text-left",
-		"rounded-container border border-line-hairline bg-layer-card",
-		"outline-none focus-visible:shadow-focus",
-		"data-[interactive=true]:hover:overlay-subtle data-[interactive=true]:active:overlay-medium"
+const messageEmbed = tv({
+	slots: {
+		root: [
+			"group block min-w-0 text-left",
+			"rounded-container border border-line-hairline bg-layer-card",
+			"outline-none focus-visible:shadow-focus",
+			"data-[interactive=true]:hover:overlay-subtle data-[interactive=true]:active:overlay-medium",
+			"not-data-[frame=bar]:*:data-[slot=message-embed-content]:first:rounded-t-[calc(var(--radius-container)-1px)] not-data-[frame=bar]:*:data-[slot=message-embed-content]:first:overflow-clip",
+			"not-data-[frame=bar]:*:data-[slot=message-embed-content]:last:rounded-b-[calc(var(--radius-container)-1px)] not-data-[frame=bar]:*:data-[slot=message-embed-content]:last:overflow-clip"
+		],
+		header: ["min-w-0", "px-3 py-2"],
+		content: ["min-w-0"],
+		footer: ["min-w-0", "px-3 py-2"]
+	},
+	variants: { size: {
+		item: { root: ["w-full max-w-[400px] max-md:max-w-none"] },
+		content: { root: ["w-full max-w-[560px]"] }
+	} }
+});
+const messageCard = tv({ slots: {
+	source: [
+		"flex min-w-0 items-center gap-1.5",
+		"border-b border-line-hairline px-3 py-2",
+		"font-sans text-caption text-foreground-muted"
 	],
-	header: ["min-w-0", "px-3 py-2"],
-	content: ["min-w-0"],
-	footer: ["min-w-0", "px-3 py-2"]
+	sourceIcon: ["inline-flex size-4 shrink-0 items-center justify-center", "*:size-full *:shrink-0 [&>img]:rounded-[2px] [&>img]:object-cover"],
+	sourceName: ["min-w-0 truncate", "font-semibold text-foreground"],
+	sourceHost: ["flex min-w-0 items-baseline", "before:shrink-0 before:pe-1.5 before:content-['·']"],
+	sourceHostText: ["min-w-0 truncate"],
+	sourceFooter: [
+		"m-0 truncate",
+		"border-t border-line-hairline px-3 py-2",
+		"font-sans text-caption text-foreground-muted"
+	],
+	body: ["flex min-w-0 flex-col gap-1.5", "p-3"],
+	eyebrow: ["m-0 truncate", "font-mono text-mono-meta text-foreground-muted"],
+	title: [
+		"m-0 line-clamp-2",
+		"font-sans text-subhead font-bold text-foreground",
+		"[&_a]:rounded-[2px] [&_a]:decoration-[1.5px] [&_a]:underline-offset-[3px] [&_a]:hover:underline",
+		"[&_a]:outline-none [&_a]:focus-visible:shadow-focus"
+	],
+	heading: ["font-sans text-subhead font-bold text-foreground"],
+	meta: ["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", "m-0 font-sans text-callout text-foreground-muted"],
+	actions: ["flex flex-wrap items-center justify-end gap-2", "px-3 pb-3"],
+	actionRow: ["flex flex-wrap items-center justify-end gap-2"],
+	actionGroup: ["flex min-w-0 max-w-full flex-wrap items-center justify-end gap-2", "ms-auto"],
+	inset: ["p-3"],
+	popover: ["w-[400px] max-w-(--available-width)"]
 } });
 //#endregion
-export { messageEmbed };
+export { messageCard, messageEmbed };

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

@@ -56,6 +56,7 @@ function MessageForwardedBundle({ className, fullWidth = false, render, ...props
 	return /* @__PURE__ */ jsx(MessageForwardedBundleFoldContext.Provider, {
 		value: fold,
 		children: /* @__PURE__ */ jsx(MessageEmbed, {
+			size: fullWidth ? void 0 : "content",
 			className: root({ className }),
 			render,
 			...props

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

@@ -2,7 +2,7 @@ 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%)]"],
+		root: ["mt-1"],
 		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"],

package/dist/components/message-quoted-preview/message-quoted-preview.mjs

@@ -7,6 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 function MessageQuotedPreview({ className, render, ...props }) {
 	const { root } = messageQuotedPreview();
 	return /* @__PURE__ */ jsx(MessageEmbed, {
+		"data-frame": "bar",
 		className: root({ className }),
 		render,
 		...props
@@ -126,6 +127,7 @@ function MessageQuotedPreviewAttachment({ className, render, ...props }) {
 function MessageQuotedPreviewLoading({ className, render, ...props }) {
 	const { loading } = messageQuotedPreview();
 	return /* @__PURE__ */ jsx(MessageEmbed, {
+		"data-frame": "bar",
 		className: loading({ className }),
 		render,
 		...props

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

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/message-replies/message-replies.tsx
 function MessageReplies({ className, render, ...props }) {
 	const { root } = messageReplies();
-	const { root: embedRoot } = messageEmbed();
+	const { root: embedRoot } = messageEmbed({ size: "content" });
 	const defaultProps = { className: embedRoot({ className: root({ className }) }) };
 	return useRender({
 		defaultTagName: "button",

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

@@ -4,7 +4,7 @@ const messageReplies = tv({ slots: {
 	root: [
 		"group/message-replies flex min-w-0 w-full flex-col text-left",
 		"transition-colors focus-visible:keyboard:outline-1 focus-visible:keyboard:outline-line-strong",
-		"mt-2 max-w-[480px] gap-1 rounded-container border-0 px-2.5 py-2",
+		"mt-2 gap-1 border-0 px-2.5 py-2",
 		"bg-fill-muted text-foreground-muted hover:overlay-subtle active:overlay-medium",
 		"focus-visible:outline-none focus-visible:shadow-focus"
 	],

package/dist/components/popover/popover.d.mts

@@ -13,8 +13,17 @@ export declare function PopoverPopup({ className, ...props }: PopoverPopupProps)
 export type PopoverContentProps = StyledProps<Popover.Popup.Props> & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
   container?: PopoverPortalProps["container"];
   portalProps?: PopoverPortalProps;
+  /**
+   * `item` for a popover about an app's item, such as the question before
+   * its link previews are shown: 400px, and `PopoverBody`, `PopoverTitle`
+   * and `PopoverActions` take a card's parts and 12px inset, like the item
+   * card (PreviewCard `size="item"`). Choose it by what the popover is
+   * about, not by its parts.
+   * @default "default"
+   */
+  size?: "default" | "item";
 };
-export declare function PopoverContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, container, portalProps, className, ...props }: PopoverContentProps): import("react").JSX.Element;
+export declare function PopoverContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, container, portalProps, size, className, ...props }: PopoverContentProps): import("react").JSX.Element;
 export type PopoverViewportProps = StyledProps<Popover.Viewport.Props>;
 export declare function PopoverViewport({ className, ...props }: PopoverViewportProps): import("react").JSX.Element;
 export type PopoverHeaderProps = ComponentPropsWithRef<"div">;
@@ -32,7 +41,7 @@ export declare function PopoverArrow({ className, ...props }: PopoverArrowProps)
 export type PopoverBackdropProps = StyledProps<Popover.Backdrop.Props>;
 export declare function PopoverBackdrop({ className, ...props }: PopoverBackdropProps): import("react").JSX.Element;
 export type PopoverBodyProps = ComponentPropsWithRef<"div">;
-/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges. */
+/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges (12px in a `size="item"` popover). */
 export declare function PopoverBody({ className, ...props }: PopoverBodyProps): import("react").JSX.Element;
 export type PopoverActionsProps = ComponentPropsWithRef<"div">;
 /** The panel's buttons, at its end, under `PopoverBody`: the way out first, then the confirm button. */

package/dist/components/popover/popover.mjs

@@ -1,37 +1,46 @@
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { usePopupCollision } from "../../lib/frame-insets.mjs";
+import { messageCard } from "../message-embed/message-embed.recipe.mjs";
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/popover/popover.tsx
-const popover = tv({ slots: {
-	trigger: ["select-none"],
-	positioner: ["isolate z-50 outline-none"],
-	content: [
-		"max-h-(--available-height) min-w-[220px] overflow-hidden",
-		"outline-none",
-		"rounded-container bg-layer-popover text-foreground",
-		"shadow-float ring-1 ring-line-seam"
-	],
-	header: ["flex items-center justify-between px-3", "min-h-11 gap-2 py-1.5 pr-1.5 pl-4"],
-	body: ["flex min-w-0 flex-col gap-1.5", "px-4 pt-4 pb-3 last:pb-4"],
-	actions: ["flex flex-wrap items-center justify-end gap-2", "px-4 pb-3 last:pb-4"],
-	separator: ["border-t", "border-line-hairline"],
-	title: ["m-0", "font-sans text-headline font-bold text-foreground"],
-	description: ["m-0", "font-sans text-footnote text-foreground-muted"],
-	close: [
-		"inline-flex items-center justify-center",
-		"outline-none transition-colors",
-		"h-8 min-w-8 rounded-chip px-1.5",
-		"font-sans text-footnote font-bold text-foreground",
-		"hover:bg-fill-medium active:bg-fill-medium",
-		"focus-visible:shadow-focus",
-		"[&_svg]:size-4.5"
-	],
-	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
-	backdrop: ["fixed inset-0", "bg-transparent"],
-	viewport: ["block"]
-} });
+const popover = tv({
+	slots: {
+		trigger: ["select-none"],
+		positioner: ["isolate z-50 outline-none"],
+		content: [
+			"max-h-(--available-height) min-w-[220px] overflow-hidden",
+			"outline-none",
+			"rounded-container bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		header: ["flex items-center justify-between px-3", "min-h-11 gap-2 py-1.5 pr-1.5 pl-4"],
+		body: ["flex min-w-0 flex-col gap-1.5", "px-4 pt-4 pb-3 last:pb-4"],
+		actions: ["flex flex-wrap items-center justify-end gap-2", "px-4 pb-3 last:pb-4"],
+		separator: ["border-t", "border-line-hairline"],
+		title: ["m-0", "font-sans text-headline font-bold text-foreground"],
+		description: ["m-0", "font-sans text-footnote text-foreground-muted"],
+		close: [
+			"inline-flex items-center justify-center",
+			"outline-none transition-colors",
+			"h-8 min-w-8 rounded-chip px-1.5",
+			"font-sans text-footnote font-bold text-foreground",
+			"hover:bg-fill-medium active:bg-fill-medium",
+			"focus-visible:shadow-focus",
+			"[&_svg]:size-4.5"
+		],
+		arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
+		backdrop: ["fixed inset-0", "bg-transparent"],
+		viewport: ["block"]
+	},
+	variants: { size: {
+		default: {},
+		item: { content: messageCard().popover() }
+	} }
+});
+const PopoverSizeContext = createContext("default");
 function Popover$1(props) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		"data-slot": "popover",
@@ -67,8 +76,8 @@ function PopoverFramePositioner({ collisionBoundary, collisionPadding, container
 		...props
 	});
 }
-function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, container, portalProps, className, ...props }) {
-	const { positioner, content } = popover();
+function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, container, portalProps, size = "default", className, ...props }) {
+	const { positioner, content } = popover({ size });
 	const portalContainer = container !== void 0 ? container : portalProps?.container;
 	return /* @__PURE__ */ jsx(PopoverPortal, {
 		...portalProps,
@@ -88,10 +97,14 @@ function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding
 			sideOffset,
 			sticky,
 			className: positioner(),
-			children: /* @__PURE__ */ jsx(Popover.Popup, {
-				"data-slot": "popover-content",
-				className: content({ className }),
-				...props
+			children: /* @__PURE__ */ jsx(PopoverSizeContext.Provider, {
+				value: size,
+				children: /* @__PURE__ */ jsx(Popover.Popup, {
+					"data-slot": "popover-content",
+					"data-size": size,
+					className: content({ className }),
+					...props
+				})
 			})
 		})
 	});
@@ -123,7 +136,7 @@ function PopoverSeparator({ className, ...props }) {
 	});
 }
 function PopoverTitle({ className, ...props }) {
-	const { title } = popover();
+	const title = useContext(PopoverSizeContext) === "item" ? messageCard().title : popover().title;
 	return /* @__PURE__ */ jsx(Popover.Title, {
 		"data-slot": "popover-title",
 		className: title({ className }),
@@ -162,9 +175,9 @@ function PopoverBackdrop({ className, ...props }) {
 		...props
 	});
 }
-/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges. */
+/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges (12px in a `size="item"` popover). */
 function PopoverBody({ className, ...props }) {
-	const { body } = popover();
+	const body = useContext(PopoverSizeContext) === "item" ? messageCard().body : popover().body;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "popover-body",
 		className: body({ className }),
@@ -173,7 +186,7 @@ function PopoverBody({ className, ...props }) {
 }
 /** The panel's buttons, at its end, under `PopoverBody`: the way out first, then the confirm button. */
 function PopoverActions({ className, ...props }) {
-	const { actions } = popover();
+	const actions = useContext(PopoverSizeContext) === "item" ? messageCard().actions : popover().actions;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "popover-actions",
 		className: actions({ className }),