@botiverse/raft-ui 0.82.0 → 0.84.0

package/dist/components/mobile-nav/mobile-nav-server.mjs

@@ -1,4 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
+import { scrollToElement } from "../scroll-area/scroll-to-element.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { MobileNavItem } from "./mobile-nav.mjs";
 import "../../lib/touch-drag.mjs";
@@ -16,9 +17,10 @@ const mobileNavServer = tv({ slots: {
 	content: [
 		"flex flex-col",
 		"w-[calc(var(--anchor-width)-16px)] min-w-0",
-		"max-h-[min(60dvh,calc(var(--available-height)-env(safe-area-inset-top,0px)))]"
+		"max-h-[min(max(60dvh,var(--mobile-nav-server-popover-floor,0px)),calc(var(--available-height)-env(safe-area-inset-top,0px)))]"
 	],
-	list: ["flex min-h-0 flex-1 flex-col p-1"],
+	scroll: ["flex min-h-0 flex-col"],
+	list: ["flex min-h-[calc(var(--spacing-option)+var(--text-mono-meta--line-height)+(--spacing(2)))] flex-1 flex-col p-1"],
 	group: ["flex shrink-0 flex-col p-1"],
 	row: [
 		"flex w-full shrink-0 cursor-default select-none items-center",
@@ -26,7 +28,7 @@ const mobileNavServer = tv({ slots: {
 		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft active:bg-brand-soft focus-visible:bg-brand-soft",
-		"aria-[current=true]:font-bold",
+		"aria-current:font-bold",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
 		"[&>svg]:text-foreground-muted",
 		"*:data-[slot=avatar]:size-5 *:data-[slot=avatar]:shrink-0"
@@ -162,21 +164,49 @@ function MobileNavServerItem({ className, id, ref, onClick, onContextMenu, onPoi
 }
 /**
 * The popover above the tab bar, 8px from each side of it and 8px above it,
-* as tall as its content and at most 60% of the screen. It stops below the
-* top safe area (a notch in a standalone web app): Base UI's collision padding
-* takes only pixels, so the height cap subtracts `env(safe-area-inset-top)`.
-* The bottom needs none: the tab bar under the popover already pads the
-* bottom safe area. A column:
+* as tall as its content and at most 60% of the screen. The one exception:
+* the list always keeps one whole server row, so where the parts after it
+* leave less, the popover grows past 60% as far as that row needs (the
+* floor, measured from its children into `--mobile-nav-server-popover-floor`).
+* Where even that doesn't fit, the whole popover scrolls, the footer and the
+* pages with it: the children sit in a ScrollArea
+* (`data-slot="mobile-nav-server-popover-scroll"`) inside the popup. It stops below the top safe area (a notch in a standalone
+* web app): Base UI's collision padding takes only pixels, so the height cap
+* subtracts `env(safe-area-inset-top)`. The bottom needs none: the tab bar
+* under the popover already pads the bottom safe area. A column:
 * `MobileNavServerPopoverList` takes the room left and scrolls, and the
 * destinations and the footer after it stay in view.
+*
+* Focus on open goes to the current server's row (`aria-current="true"` in
+* the list), which the list has already scrolled into view, so focusing it
+* never scrolls the list back to the top. A touch opens it with focus on the
+* popover itself, without scrolling, so no keyboard comes up. `initialFocus`
+* overrides this.
 */
-function MobileNavServerPopoverContent({ anchor, side = "top", align = "center", sideOffset = 8, collisionPadding = 8, className, ...props }) {
+function MobileNavServerPopoverContent({ anchor, side = "top", align = "center", sideOffset = 8, collisionPadding = 8, initialFocus, className, children, ref, ...props }) {
 	const { triggerRef } = useMobileNavServerContext("MobileNavServerPopoverContent");
-	const { content } = mobileNavServer();
+	const { content, scroll } = mobileNavServer();
+	const popupRef = useRef(null);
 	const tabBar = useCallback(() => {
 		const trigger = triggerRef.current;
 		return trigger?.closest("[data-slot=mobile-nav-root]") ?? trigger;
 	}, [triggerRef]);
+	const setRef = useCallback((node) => {
+		popupRef.current = node;
+		assignRef(ref, node);
+		if (!node) return;
+		return () => {
+			popupRef.current = null;
+			assignRef(ref, null);
+		};
+	}, [ref]);
+	const setScrollRef = useCallback((node) => {
+		if (node) return keepOneRow(node);
+	}, []);
+	const focusCurrent = useCallback((openType) => {
+		if (openType === "touch") return true;
+		return popupRef.current?.querySelector(CURRENT_ROW) ?? true;
+	}, []);
 	return /* @__PURE__ */ jsx(PopoverContent, {
 		"data-slot": "mobile-nav-server-popover-content",
 		anchor: anchor ?? tabBar,
@@ -184,16 +214,115 @@ function MobileNavServerPopoverContent({ anchor, side = "top", align = "center",
 		align,
 		sideOffset,
 		collisionPadding,
+		initialFocus: initialFocus ?? focusCurrent,
 		className: content({ className }),
-		...props
+		ref: setRef,
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			"data-slot": "mobile-nav-server-popover-scroll",
+			overscroll: "contain",
+			tabIndex: -1,
+			ref: setScrollRef,
+			className: scroll(),
+			children
+		})
 	});
 }
+const LIST_SLOT = "mobile-nav-server-popover-list";
+const CURRENT_ROW = `[data-slot=${LIST_SLOT}] [aria-current="true"]`;
+const GUTTERS_SLOT = "scroll-area-gutters";
+/** Padding and border along the block axis. */
+function blockFrame(element) {
+	const style = getComputedStyle(element);
+	return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+}
+/**
+* Writes the popover's floor onto the popup, its height with the list at its
+* one-row minimum: the list's `min-height` plus the height of every other
+* part in the scroll area, and the popup's and the area's own padding and
+* border. Watched as the parts change.
+*/
+function keepOneRow(area) {
+	const popup = area.parentElement;
+	const measure = () => {
+		if (!popup) return;
+		let floor = blockFrame(popup) + blockFrame(area);
+		for (const child of area.children) {
+			if (!(child instanceof HTMLElement) || child.dataset.slot === GUTTERS_SLOT) continue;
+			const style = getComputedStyle(child);
+			if (style.display === "none" || style.position === "absolute" || style.position === "fixed") continue;
+			floor += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+			floor += child.dataset.slot === LIST_SLOT ? parseFloat(style.minHeight) || 0 : child.getBoundingClientRect().height;
+		}
+		popup.style.setProperty("--mobile-nav-server-popover-floor", `${floor}px`);
+	};
+	const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+	const watch = () => {
+		resize?.disconnect();
+		for (const child of area.children) if (child instanceof HTMLElement && child.dataset.slot !== LIST_SLOT) resize?.observe(child);
+		measure();
+	};
+	const mutation = new MutationObserver(watch);
+	mutation.observe(area, { childList: true });
+	watch();
+	return () => {
+		resize?.disconnect();
+		mutation.disconnect();
+	};
+}
+/**
+* Opens the list on the current server: scrolls it, and only it, to the row
+* with `aria-current="true"` at once, with no animation, and again as the
+* list takes its final size, until people scroll or press in it themselves.
+*/
+function openOnCurrent(list) {
+	let pinned = true;
+	const show = () => {
+		if (!pinned) return;
+		const current = list.querySelector("[aria-current=\"true\"]");
+		if (!current) return;
+		const offset = parseFloat(getComputedStyle(list).paddingBottom) || 0;
+		scrollToElement(list, current, "vertical", {
+			block: "nearest",
+			offset
+		});
+	};
+	const release = () => {
+		pinned = false;
+	};
+	const events = [
+		"pointerdown",
+		"touchstart",
+		"wheel",
+		"keydown"
+	];
+	for (const type of events) list.addEventListener(type, release, { passive: true });
+	const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(show);
+	resize?.observe(list);
+	show();
+	return () => {
+		resize?.disconnect();
+		for (const type of events) list.removeEventListener(type, release);
+	};
+}
 /** The server list: takes the room left in the popover and scrolls inside it,
-*  a ScrollArea (a column with no gap, so its gutters move nothing). */
-function MobileNavServerPopoverList({ className, ...props }) {
+*  a ScrollArea (a column with no gap, so its gutters move nothing). It is
+*  never shorter than one whole two-line row, and it opens scrolled to the
+*  current server's row (`aria-current="true"`), with no animation. */
+function MobileNavServerPopoverList({ className, ref, ...props }) {
 	const { list } = mobileNavServer();
+	const setRef = useCallback((node) => {
+		assignRef(ref, node);
+		if (!node) return;
+		const stop = openOnCurrent(node);
+		return () => {
+			stop();
+			assignRef(ref, null);
+		};
+	}, [ref]);
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "mobile-nav-server-popover-list",
+		ref: setRef,
 		overscroll: "contain",
 		tabIndex: -1,
 		...props,

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 }),

package/dist/components/preview-card/preview-card.d.mts

@@ -28,7 +28,11 @@ export declare function PreviewCardDescription({ className, ...props }: PreviewC
 export type PreviewCardArrowProps = StyledProps<PreviewCard.Arrow.Props>;
 export declare function PreviewCardArrow({ className, ...props }: PreviewCardArrowProps): import("react").JSX.Element;
 export type PreviewCardBodyProps = ComponentPropsWithRef<"div">;
-/** The item card's block: the id line, the title and the details row, in that order. */
+/**
+ * The item card's block: the id line, the title and the details row, in that
+ * order. Its parts are a card's in a message (AppLinkCard), so the two read
+ * the same.
+ */
 export declare function PreviewCardBody({ className, ...props }: PreviewCardBodyProps): import("react").JSX.Element;
 export type PreviewCardEyebrowProps = ComponentPropsWithRef<"p">;
 /** The muted line above the title that identifies the item, such as its id. One line, truncated. */

package/dist/components/preview-card/preview-card.mjs

@@ -2,6 +2,8 @@ import { tv } from "../../lib/tv.mjs";
 import { useTheme } from "../../lib/theme/use-theme.mjs";
 import { resolveThemeScopeProps, 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 { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/preview-card/preview-card.tsx
@@ -24,24 +26,11 @@ const previewCard = tv({
 		separator: ["border-t", "border-line-hairline"],
 		title: ["m-0 truncate", "font-sans text-headline font-bold text-foreground"],
 		description: ["m-0 truncate", "px-4 py-3 last:pb-4 font-sans text-callout text-foreground-muted"],
-		arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
-		body: [
-			"flex min-w-0 flex-col gap-1.5",
-			"px-4 pt-4 pb-3 last:pb-4",
-			"*:data-[slot=preview-card-title]:line-clamp-2 *:data-[slot=preview-card-title]:whitespace-normal"
-		],
-		eyebrow: ["m-0 truncate", "font-mono text-mono-meta text-foreground-muted"],
-		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-4 pb-3 last:pb-4"],
-		footer: [
-			"m-0 truncate",
-			"border-t border-line-hairline px-4 py-2",
-			"font-sans text-caption text-foreground-muted"
-		]
+		arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"]
 	},
 	variants: { size: {
 		profile: { popup: "w-[300px]" },
-		item: { popup: "w-[400px]" }
+		item: { popup: messageCard().popover() }
 	} },
 	defaultVariants: { size: "profile" }
 });
@@ -132,8 +121,9 @@ function PreviewCardSeparator({ className, ...props }) {
 		...props
 	});
 }
+const InItemBody = createContext(false);
 function PreviewCardTitle({ className, ...props }) {
-	const { title } = previewCard();
+	const title = useContext(InItemBody) ? messageCard().title : previewCard().title;
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "preview-card-title",
 		className: title({ className }),
@@ -156,18 +146,25 @@ function PreviewCardArrow({ className, ...props }) {
 		...props
 	});
 }
-/** The item card's block: the id line, the title and the details row, in that order. */
+/**
+* The item card's block: the id line, the title and the details row, in that
+* order. Its parts are a card's in a message (AppLinkCard), so the two read
+* the same.
+*/
 function PreviewCardBody({ className, ...props }) {
-	const { body } = previewCard();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "preview-card-body",
-		className: body({ className }),
-		...props
+	const { body } = messageCard();
+	return /* @__PURE__ */ jsx(InItemBody.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "preview-card-body",
+			className: body({ className }),
+			...props
+		})
 	});
 }
 /** The muted line above the title that identifies the item, such as its id. One line, truncated. */
 function PreviewCardEyebrow({ className, ...props }) {
-	const { eyebrow } = previewCard();
+	const { eyebrow } = messageCard();
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "preview-card-eyebrow",
 		className: eyebrow({ className }),
@@ -176,7 +173,7 @@ function PreviewCardEyebrow({ className, ...props }) {
 }
 /** The row under the title: one state chip, then muted details. Wraps when it runs out of room. */
 function PreviewCardMeta({ className, ...props }) {
-	const { meta } = previewCard();
+	const { meta } = messageCard();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "preview-card-meta",
 		className: meta({ className }),
@@ -185,7 +182,7 @@ function PreviewCardMeta({ className, ...props }) {
 }
 /** The row of at most two buttons. */
 function PreviewCardActions({ className, ...props }) {
-	const { actions } = previewCard();
+	const { actions } = messageCard();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "preview-card-actions",
 		className: actions({ className }),
@@ -194,10 +191,10 @@ function PreviewCardActions({ className, ...props }) {
 }
 /** The caption under a hairline at the bottom of the card: where the item comes from. */
 function PreviewCardFooter({ className, ...props }) {
-	const { footer } = previewCard();
+	const { sourceFooter } = messageCard();
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "preview-card-footer",
-		className: footer({ className }),
+		className: sourceFooter({ className }),
 		...props
 	});
 }

package/dist/components/save-status/save-status.d.mts

@@ -2,22 +2,29 @@ import { ComponentPropsWithRef } from "react";
 //#region src/components/save-status/save-status.d.ts
 export type SaveStatusProps = ComponentPropsWithRef<"span">;
 /**
- * The reserved line itself. Render it whatever the setting's state, and put
- * `SaveStatusSaved` or `SaveStatusError` inside. A `span` (shown as a block),
- * like every ListRow part, so it stays valid inside a row's body.
+ * The line under a setting that applies at once. Render it whatever the
+ * setting's state, with `SaveStatusError` inside when the change failed and
+ * nothing inside otherwise: empty, it is hidden and takes no height. A `span`
+ * (shown as a block), like every ListRow part, so it stays valid inside a
+ * row's body; give it an `id` for the control's `aria-describedby`.
  */
 export declare function SaveStatus({ className, ...props }: SaveStatusProps): import("react").JSX.Element;
 export type SaveStatusSavedProps = ComponentPropsWithRef<"span">;
 /**
- * The polite live region that says the change is stored. Keep it mounted,
- * empty, while nothing has happened, so a screen reader announces the words
- * when they arrive; the check shows only with them.
+ * @deprecated A setting that applies at once no longer says "Saved": the
+ * control showing its new value is the confirmation (Forms, settings that
+ * apply at once). Renders nothing, whatever its children, so its
+ * `SaveStatus` stays empty and takes no height. Leave it out: render
+ * `SaveStatusError` when the change failed and nothing otherwise. It drops
+ * every prop, its `id` too: point a control's `aria-describedby` at the
+ * `SaveStatus` instead.
  */
-export declare function SaveStatusSaved({ className, children, ...props }: SaveStatusSavedProps): import("react").JSX.Element;
+export declare function SaveStatusSaved(_props: SaveStatusSavedProps): null;
 export type SaveStatusErrorProps = ComponentPropsWithRef<"span">;
 /**
- * What failed, in place of `SaveStatusSaved`. It is an alert, announced when
- * it appears, and stays until the next change.
+ * What failed. It is an alert, announced when it appears, and stays until
+ * the next change. Its line appears with it, so the setting grows by one
+ * line while it shows.
  */
 export declare function SaveStatusError({ className, role, ...props }: SaveStatusErrorProps): import("react").JSX.Element;
 //#endregion

package/dist/components/save-status/save-status.mjs

@@ -1,24 +1,20 @@
 import { tv } from "../../lib/tv.mjs";
-import { CircleCheck } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/save-status/save-status.tsx
 const saveStatus = tv({ slots: {
 	root: [
-		"block min-h-lh min-w-0",
+		"block min-w-0 empty:hidden",
 		"mt-1 [[data-slot=field]>&]:-mt-0.5 [[data-slot=list-row-body]>&]:mt-0.5",
 		"text-footnote"
 	],
-	saved: [
-		"flex min-w-0 items-center gap-1",
-		"text-foreground-muted",
-		"[&>svg]:size-3 [&>svg]:shrink-0"
-	],
 	error: ["block wrap-anywhere", "text-danger-strong"]
 } });
 /**
-* The reserved line itself. Render it whatever the setting's state, and put
-* `SaveStatusSaved` or `SaveStatusError` inside. A `span` (shown as a block),
-* like every ListRow part, so it stays valid inside a row's body.
+* The line under a setting that applies at once. Render it whatever the
+* setting's state, with `SaveStatusError` inside when the change failed and
+* nothing inside otherwise: empty, it is hidden and takes no height. A `span`
+* (shown as a block), like every ListRow part, so it stays valid inside a
+* row's body; give it an `id` for the control's `aria-describedby`.
 */
 function SaveStatus({ className, ...props }) {
 	const { root } = saveStatus();
@@ -29,28 +25,21 @@ function SaveStatus({ className, ...props }) {
 	});
 }
 /**
-* The polite live region that says the change is stored. Keep it mounted,
-* empty, while nothing has happened, so a screen reader announces the words
-* when they arrive; the check shows only with them.
+* @deprecated A setting that applies at once no longer says "Saved": the
+* control showing its new value is the confirmation (Forms, settings that
+* apply at once). Renders nothing, whatever its children, so its
+* `SaveStatus` stays empty and takes no height. Leave it out: render
+* `SaveStatusError` when the change failed and nothing otherwise. It drops
+* every prop, its `id` too: point a control's `aria-describedby` at the
+* `SaveStatus` instead.
 */
-function SaveStatusSaved({ className, children, ...props }) {
-	const { saved } = saveStatus();
-	const hasContent = children !== null && children !== void 0 && children !== false && children !== "";
-	return /* @__PURE__ */ jsxs("span", {
-		"data-slot": "save-status-saved",
-		role: "status",
-		"aria-live": "polite",
-		className: saved({ className }),
-		...props,
-		children: [hasContent ? /* @__PURE__ */ jsx(CircleCheck, {
-			"aria-hidden": "true",
-			"data-slot": "save-status-icon"
-		}) : null, children]
-	});
+function SaveStatusSaved(_props) {
+	return null;
 }
 /**
-* What failed, in place of `SaveStatusSaved`. It is an alert, announced when
-* it appears, and stays until the next change.
+* What failed. It is an alert, announced when it appears, and stays until
+* the next change. Its line appears with it, so the setting grows by one
+* line while it shows.
 */
 function SaveStatusError({ className, role = "alert", ...props }) {
 	const { error } = saveStatus();

package/dist/components/segmented-control/segmented-control.d.mts

@@ -28,7 +28,7 @@ export type SegmentedControlProps<T extends string = string> = StyledProps<Radio
    */
   variant?: "default" | "on-frame";
 };
-export declare function SegmentedControl<T extends string = string>({ disabled, iconsOnlyBelow, variant, className, ref, ...props }: SegmentedControlProps<T>): import("react").JSX.Element;
+export declare function SegmentedControl<T extends string = string>({ disabled, iconsOnlyBelow: iconsOnlyBelowProp, variant, className, ref, ...props }: SegmentedControlProps<T>): import("react").JSX.Element;
 export type SegmentedControlItemProps<T extends string = string> = StyledProps<Radio.Root.Props<T>>;
 export declare function SegmentedControlItem<T extends string = string>({ className, ref, ...props }: SegmentedControlItemProps<T>): import("react").JSX.Element;
 export type SegmentedControlLabelProps = ComponentPropsWithRef<"span">;