@botiverse/raft-ui 0.81.0 → 0.83.0

package/dist/components/list-row/list-row.recipe.d.mts

@@ -5,7 +5,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
       root: string;
     };
     plain: {
-      root: string;
+      root: string[];
     };
     entry: {
       root: string;
@@ -36,6 +36,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
   body: string[];
   line: string[];
   title: string[];
+  subtitle: string[];
   description: string[];
   meta: string[];
   value: string[];
@@ -46,7 +47,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
       root: string;
     };
     plain: {
-      root: string;
+      root: string[];
     };
     entry: {
       root: string;
@@ -77,6 +78,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
   body: string[];
   line: string[];
   title: string[];
+  subtitle: string[];
   description: string[];
   meta: string[];
   value: string[];
@@ -87,7 +89,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
       root: string;
     };
     plain: {
-      root: string;
+      root: string[];
     };
     entry: {
       root: string;
@@ -118,6 +120,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
   body: string[];
   line: string[];
   title: string[];
+  subtitle: string[];
   description: string[];
   meta: string[];
   value: string[];

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

@@ -7,6 +7,7 @@ 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)]",
@@ -18,13 +19,14 @@ 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"],
+		body: ["flex min-w-0 flex-1 flex-col gap-0.5", "-mb-(--list-row-status-space,0px)"],
 		line: ["flex min-w-0 items-center gap-2"],
 		title: [
 			"min-w-0 flex-1 truncate",
 			"text-body font-semibold",
 			"group-data-[tone=unread]/list-row:font-bold"
 		],
+		subtitle: ["min-w-0 flex-1 truncate", "text-footnote font-normal text-(--list-row-ink)"],
 		description: ["min-w-0 flex-1 truncate", "text-callout text-(--list-row-ink-2)"],
 		meta: ["min-w-0 truncate", "font-mono text-mono-meta font-normal tabular-nums text-(--list-row-ink-3)"],
 		value: ["max-w-[45%] shrink-0 truncate", "text-subhead text-(--list-row-ink-3)"],
@@ -33,7 +35,11 @@ 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) [--list-row-rule-start:16px]" },
+			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]"
+			] },
 			entry: { root: "" }
 		},
 		interactive: {

package/dist/components/message-action-card/index.d.mts

@@ -1,2 +1,2 @@
-import { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardActionsNoteProps, MessageActionCardActionsProps, MessageActionCardCollapseTrigger, MessageActionCardCollapseTriggerProps, MessageActionCardCompletion, MessageActionCardCompletionProps, MessageActionCardContent, MessageActionCardContentProps, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderDescriptionProps, MessageActionCardHeaderIcon, MessageActionCardHeaderIconProps, MessageActionCardHeaderProps, MessageActionCardHeaderStatus, MessageActionCardHeaderStatusProps, MessageActionCardHeaderTitle, MessageActionCardHeaderTitleProps, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardHintLabelProps, MessageActionCardHintProps, MessageActionCardNotice, MessageActionCardNoticeProps, MessageActionCardProperties, MessageActionCardPropertiesProps, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyLabelProps, MessageActionCardPropertyProps, MessageActionCardPropertyValue, MessageActionCardPropertyValueProps, MessageActionCardProps, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeDescriptionProps, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListLabelProps, MessageActionCardScopeListProps, MessageActionCardScopeListViewport, MessageActionCardScopeListViewportProps, MessageActionCardScopeName, MessageActionCardScopeNameProps, MessageActionCardScopeProps, MessageActionCardStatus, MessageActionCardStatusProps } from "./message-action-card.mjs";
-export { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, type MessageActionCardActionsNoteProps, type MessageActionCardActionsProps, MessageActionCardCollapseTrigger, type MessageActionCardCollapseTriggerProps, MessageActionCardCompletion, type MessageActionCardCompletionProps, MessageActionCardContent, type MessageActionCardContentProps, MessageActionCardHeader, MessageActionCardHeaderDescription, type MessageActionCardHeaderDescriptionProps, MessageActionCardHeaderIcon, type MessageActionCardHeaderIconProps, type MessageActionCardHeaderProps, MessageActionCardHeaderStatus, type MessageActionCardHeaderStatusProps, MessageActionCardHeaderTitle, type MessageActionCardHeaderTitleProps, MessageActionCardHint, MessageActionCardHintLabel, type MessageActionCardHintLabelProps, type MessageActionCardHintProps, MessageActionCardNotice, type MessageActionCardNoticeProps, MessageActionCardProperties, type MessageActionCardPropertiesProps, MessageActionCardProperty, MessageActionCardPropertyLabel, type MessageActionCardPropertyLabelProps, type MessageActionCardPropertyProps, MessageActionCardPropertyValue, type MessageActionCardPropertyValueProps, type MessageActionCardProps, MessageActionCardScope, MessageActionCardScopeDescription, type MessageActionCardScopeDescriptionProps, MessageActionCardScopeList, MessageActionCardScopeListLabel, type MessageActionCardScopeListLabelProps, type MessageActionCardScopeListProps, MessageActionCardScopeListViewport, type MessageActionCardScopeListViewportProps, MessageActionCardScopeName, type MessageActionCardScopeNameProps, type MessageActionCardScopeProps, MessageActionCardStatus, type MessageActionCardStatusProps };
+import { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardActionsNoteProps, MessageActionCardActionsProps, MessageActionCardCollapseTrigger, MessageActionCardCollapseTriggerProps, MessageActionCardCompletion, MessageActionCardCompletionProps, MessageActionCardContent, MessageActionCardContentProps, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderDescriptionProps, MessageActionCardHeaderIcon, MessageActionCardHeaderIconProps, MessageActionCardHeaderMeta, MessageActionCardHeaderMetaProps, MessageActionCardHeaderProps, MessageActionCardHeaderStatus, MessageActionCardHeaderStatusProps, MessageActionCardHeaderTitle, MessageActionCardHeaderTitleProps, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardHintLabelProps, MessageActionCardHintProps, MessageActionCardNotice, MessageActionCardNoticeProps, MessageActionCardProperties, MessageActionCardPropertiesProps, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyLabelProps, MessageActionCardPropertyProps, MessageActionCardPropertyValue, MessageActionCardPropertyValueProps, MessageActionCardProps, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeDescriptionProps, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListLabelProps, MessageActionCardScopeListProps, MessageActionCardScopeListViewport, MessageActionCardScopeListViewportProps, MessageActionCardScopeName, MessageActionCardScopeNameProps, MessageActionCardScopeProps, MessageActionCardStatus, MessageActionCardStatusProps } from "./message-action-card.mjs";
+export { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, type MessageActionCardActionsNoteProps, type MessageActionCardActionsProps, MessageActionCardCollapseTrigger, type MessageActionCardCollapseTriggerProps, MessageActionCardCompletion, type MessageActionCardCompletionProps, MessageActionCardContent, type MessageActionCardContentProps, MessageActionCardHeader, MessageActionCardHeaderDescription, type MessageActionCardHeaderDescriptionProps, MessageActionCardHeaderIcon, type MessageActionCardHeaderIconProps, MessageActionCardHeaderMeta, type MessageActionCardHeaderMetaProps, type MessageActionCardHeaderProps, MessageActionCardHeaderStatus, type MessageActionCardHeaderStatusProps, MessageActionCardHeaderTitle, type MessageActionCardHeaderTitleProps, MessageActionCardHint, MessageActionCardHintLabel, type MessageActionCardHintLabelProps, type MessageActionCardHintProps, MessageActionCardNotice, type MessageActionCardNoticeProps, MessageActionCardProperties, type MessageActionCardPropertiesProps, MessageActionCardProperty, MessageActionCardPropertyLabel, type MessageActionCardPropertyLabelProps, type MessageActionCardPropertyProps, MessageActionCardPropertyValue, type MessageActionCardPropertyValueProps, type MessageActionCardProps, MessageActionCardScope, MessageActionCardScopeDescription, type MessageActionCardScopeDescriptionProps, MessageActionCardScopeList, MessageActionCardScopeListLabel, type MessageActionCardScopeListLabelProps, type MessageActionCardScopeListProps, MessageActionCardScopeListViewport, type MessageActionCardScopeListViewportProps, MessageActionCardScopeName, type MessageActionCardScopeNameProps, type MessageActionCardScopeProps, MessageActionCardStatus, type MessageActionCardStatusProps };

package/dist/components/message-action-card/message-action-card.d.mts

@@ -23,6 +23,13 @@ export declare function MessageActionCardHeaderTitle({ className, render, ...pro
  * MessageActionCardHeaderTitle; it stays visible while the card is folded.
  */
 export declare function MessageActionCardHeaderDescription({ className, render, ...props }: useRender.ComponentProps<"span">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The time on a resolved card, in Space Mono at the hint tier. Place it
+ * inside MessageActionCardHeaderTitle for a line of its own under the title,
+ * or at the end of MessageActionCardHeaderDescription to close its line:
+ * "Approved by Martin · 10:51". It stays visible while the card is folded.
+ */
+export declare function MessageActionCardHeaderMeta({ className, render, ...props }: MessageActionCardHeaderMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * The card's state label in the header: plain text led by a square pixel in
  * the variant's colour, so a column of "Done" cards does not shout.
@@ -64,6 +71,7 @@ export type MessageActionCardProps = useRender.ComponentProps<"div"> & {
 export type MessageActionCardHeaderIconProps = useRender.ComponentProps<"span">;
 export type MessageActionCardHeaderTitleProps = useRender.ComponentProps<"span">;
 export type MessageActionCardHeaderDescriptionProps = useRender.ComponentProps<"span">;
+export type MessageActionCardHeaderMetaProps = useRender.ComponentProps<"span">;
 export type MessageActionCardStatusProps = BadgeProps;
 export type MessageActionCardCollapseTriggerProps = Omit<ComponentProps<typeof Collapsible.Trigger>, "className"> & {
   className?: string;

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

@@ -79,6 +79,21 @@ function MessageActionCardHeaderDescription({ className, render, ...props }) {
 		state: { slot: "message-action-card-header-description" }
 	});
 }
+/**
+* The time on a resolved card, in Space Mono at the hint tier. Place it
+* inside MessageActionCardHeaderTitle for a line of its own under the title,
+* or at the end of MessageActionCardHeaderDescription to close its line:
+* "Approved by Martin · 10:51". It stays visible while the card is folded.
+*/
+function MessageActionCardHeaderMeta({ className, render, ...props }) {
+	const { headerMeta } = messageActionCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: headerMeta({ className }) }, props),
+		state: { slot: "message-action-card-header-meta" }
+	});
+}
 const STATUS_TONES = {
 	default: "neutral",
 	muted: "neutral",
@@ -292,4 +307,4 @@ function MessageActionCardActionsNote({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardCollapseTrigger, MessageActionCardCompletion, MessageActionCardContent, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderIcon, MessageActionCardHeaderStatus, MessageActionCardHeaderTitle, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardNotice, MessageActionCardProperties, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyValue, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListViewport, MessageActionCardScopeName, MessageActionCardStatus };
+export { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardCollapseTrigger, MessageActionCardCompletion, MessageActionCardContent, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderIcon, MessageActionCardHeaderMeta, MessageActionCardHeaderStatus, MessageActionCardHeaderTitle, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardNotice, MessageActionCardProperties, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyValue, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListViewport, MessageActionCardScopeName, MessageActionCardStatus };

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

@@ -16,6 +16,11 @@ const messageActionCard = tv({
 		],
 		headerTitle: ["min-w-0 flex-1", "pt-[calc((27px-1lh)/2)]"],
 		headerDescription: ["block", "mt-0.5 text-footnote font-normal text-foreground-muted"],
+		headerMeta: [
+			"block in-data-[slot=message-action-card-header-description]:inline",
+			"mt-0.5 in-data-[slot=message-action-card-header-description]:mt-0",
+			"font-mono text-mono-meta font-normal tabular-nums text-foreground-hint"
+		],
 		headerStatus: ["ml-auto shrink-0", "mt-[calc((27px-1lh)/2)] text-caption font-semibold text-foreground-muted"],
 		status: [
 			"inline-flex h-auto items-center gap-1.5 rounded-none border-0 bg-transparent p-0 shadow-none",

package/dist/components/mobile-nav/mobile-nav-server.d.mts

@@ -19,19 +19,32 @@ export declare function MobileNavServerItem({ className, id, ref, onClick, onCon
 export type MobileNavServerPopoverContentProps = PopoverContentProps;
 /**
  * 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.
  */
-export declare function MobileNavServerPopoverContent({ anchor, side, align, sideOffset, collisionPadding, className, ...props }: MobileNavServerPopoverContentProps): import("react").JSX.Element;
+export declare function MobileNavServerPopoverContent({ anchor, side, align, sideOffset, collisionPadding, initialFocus, className, children, ref, ...props }: MobileNavServerPopoverContentProps): import("react").JSX.Element;
 export type MobileNavServerPopoverListProps = ScrollAreaProps;
 /** 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). */
-export declare function MobileNavServerPopoverList({ className, ...props }: MobileNavServerPopoverListProps): import("react").JSX.Element;
+ *  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. */
+export declare function MobileNavServerPopoverList({ className, ref, ...props }: MobileNavServerPopoverListProps): import("react").JSX.Element;
 export type MobileNavServerPopoverGroupProps = ComponentPropsWithRef<"div">;
 /** Rows that always stay in view, such as the footer actions. */
 export declare function MobileNavServerPopoverGroup({ className, ...props }: MobileNavServerPopoverGroupProps): import("react").JSX.Element;

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/resizable/resizable.recipe.mjs

@@ -5,17 +5,17 @@ const resizable = tv({ slots: {
 	panel: ["min-h-0 min-w-0"],
 	handle: [
 		"right-0 z-10 cursor-ew-resize touch-none select-none",
-		"relative -ml-1.5 -mr-1.5 flex w-3 shrink-0 items-center justify-center pointer-coarse:-ml-3 pointer-coarse:-mr-3 pointer-coarse:w-6",
+		"relative -mr-3 flex w-3 shrink-0 items-center justify-center pointer-coarse:-mr-6 pointer-coarse:w-6",
 		"before:pointer-events-none before:absolute before:transition-colors before:content-['']",
 		"focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-2 focus-visible:before:outline-foreground",
-		"data-[orientation=horizontal]:-mt-1.5 data-[orientation=horizontal]:-mb-1.5 data-[orientation=horizontal]:ml-0 data-[orientation=horizontal]:mr-0 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:cursor-ns-resize",
+		"data-[orientation=horizontal]:-mb-3 data-[orientation=horizontal]:mr-0 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:cursor-ns-resize pointer-coarse:data-[orientation=horizontal]:-mb-6 pointer-coarse:data-[orientation=horizontal]:mr-0 pointer-coarse:data-[orientation=horizontal]:h-6",
 		"bg-transparent",
-		"before:top-0 before:left-[5px] pointer-coarse:before:left-[11px] before:h-full before:w-px before:translate-none before:rounded-none",
+		"before:top-0 before:-left-px before:h-full before:w-px before:translate-none before:rounded-none",
 		"before:bg-transparent",
 		"hover:before:bg-foreground-muted",
 		"data-[separator=active]:before:bg-foreground-muted",
 		"focus-visible:keyboard:before:w-0.5 focus-visible:keyboard:before:bg-foreground focus-visible:before:outline-none",
-		"data-[orientation=horizontal]:before:top-[5px] data-[orientation=horizontal]:before:left-0",
+		"data-[orientation=horizontal]:before:-top-px data-[orientation=horizontal]:before:left-0",
 		"data-[orientation=horizontal]:before:h-px data-[orientation=horizontal]:before:w-full",
 		"data-[orientation=horizontal]:focus-visible:keyboard:before:h-0.5"
 	]

package/dist/components/scroll-area/use-scrollbars.mjs

@@ -399,7 +399,8 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 	/** Binds the observers and the scroll listener to `container`; returns what undoes it. */
 	const bind = useCallback((container, content, root) => {
 		container.addEventListener("scroll", handleScroll, { passive: true });
-		measure(true);
+		if (typeof ResizeObserver === "undefined") measure(true);
+		else scheduleFrame(true);
 		const classes = root && typeof MutationObserver !== "undefined" ? new MutationObserver(applyClasses) : null;
 		if (root) classes?.observe(root, {
 			attributeFilter: ["class"],

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">;

package/dist/components/segmented-control/segmented-control.mjs

@@ -2,6 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
 import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { useInFitToolbar } from "../fit-toolbar/fit-toolbar.mjs";
 import { createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
@@ -51,6 +52,11 @@ const segmentedControl = tv({
 			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
 			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
 		},
+		inFitToolbar: { true: { root: [
+			"shrink-0",
+			"data-fit-label:**:data-[slot=segmented-control-item]:relative data-fit-label:**:data-[slot=segmented-control-item]:w-(--segment-size) data-fit-label:**:data-[slot=segmented-control-item]:px-0",
+			"data-fit-label:**:data-[slot=segmented-control-label]:sr-only data-fit-label:**:data-[slot=segmented-control-count]:sr-only"
+		] } },
 		iconsOnlyMeasured: { true: { root: ["data-icons-only:**:data-[slot=segmented-control-item]:relative data-icons-only:**:data-[slot=segmented-control-item]:w-(--segment-size) data-icons-only:**:data-[slot=segmented-control-item]:px-0", "data-icons-only:**:data-[slot=segmented-control-label]:sr-only data-icons-only:**:data-[slot=segmented-control-count]:sr-only"] } }
 	}
 });
@@ -216,11 +222,14 @@ function useIconsOnlyWarning(ref, iconsOnlyBelow) {
 		}
 	}, [ref, iconsOnlyBelow]);
 }
-function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default", className, ref, ...props }) {
+function SegmentedControl({ disabled = false, iconsOnlyBelow: iconsOnlyBelowProp, variant = "default", className, ref, ...props }) {
+	const inFitToolbar = useInFitToolbar();
+	const iconsOnlyBelow = inFitToolbar ? void 0 : iconsOnlyBelowProp;
 	const preset = isIconsOnlyPreset(iconsOnlyBelow);
 	const { root } = segmentedControl({
 		iconsOnlyBelow: preset ? iconsOnlyBelow : void 0,
 		iconsOnlyMeasured: iconsOnlyBelow !== void 0 && !preset ? true : void 0,
+		inFitToolbar: inFitToolbar || void 0,
 		variant
 	});
 	const rootRef = useRef(null);
@@ -242,7 +251,7 @@ function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default
 		else if (end > track.scrollLeft + track.clientWidth) track.scrollLeft = end - track.clientWidth;
 	}, [overflowing, value]);
 	return /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
-		value: iconsOnlyBelow !== void 0,
+		value: inFitToolbar || iconsOnlyBelow !== void 0,
 		children: /* @__PURE__ */ jsx(RadioGroup, {
 			ref: setRef,
 			disabled,

package/dist/components/selection-toolbar/index.d.mts

@@ -0,0 +1,2 @@
+import { SelectionToolbar, SelectionToolbarAction, SelectionToolbarActionProps, SelectionToolbarActions, SelectionToolbarActionsProps, SelectionToolbarClose, SelectionToolbarCloseProps, SelectionToolbarCount, SelectionToolbarCountProps, SelectionToolbarCountValue, SelectionToolbarCountValueProps, SelectionToolbarDock, SelectionToolbarDockProps, SelectionToolbarHint, SelectionToolbarHintProps, SelectionToolbarItem, SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, SelectionToolbarMoreProps, SelectionToolbarProps } from "./selection-toolbar.mjs";
+export { SelectionToolbar, SelectionToolbarAction, type SelectionToolbarActionProps, SelectionToolbarActions, type SelectionToolbarActionsProps, SelectionToolbarClose, type SelectionToolbarCloseProps, SelectionToolbarCount, type SelectionToolbarCountProps, SelectionToolbarCountValue, type SelectionToolbarCountValueProps, SelectionToolbarDock, type SelectionToolbarDockProps, SelectionToolbarHint, type SelectionToolbarHintProps, SelectionToolbarItem, type SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, type SelectionToolbarMoreProps, type SelectionToolbarProps };

package/dist/components/selection-toolbar/selection-toolbar.d.mts

@@ -0,0 +1,100 @@
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarProps } from "../fit-toolbar/fit-toolbar.mjs";
+import "../fit-toolbar/index.mjs";
+import { ReactElement, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/selection-toolbar/selection-toolbar.d.ts
+export type SelectionToolbarDockProps = useRender.ComponentProps<"div">;
+/**
+ * Where the toolbar floats: centered, 12px above the bottom of the list or
+ * conversation it sits in (plus the safe area), 20px from its sides. Its
+ * parent must be positioned.
+ */
+export declare function SelectionToolbarDock({ className, render, ...props }: SelectionToolbarDockProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarProps = Omit<FitToolbarProps, "wrap" | "orientation">;
+/**
+ * The floating toolbar for selected items (messages, tasks): the count, an
+ * optional hint, the actions on the selection, More while some are out of
+ * the row, then ×. One row at any width: what doesn't fit gives way, measured
+ * in the width it floats in, and never wraps. A `role="toolbar"`, one Tab
+ * stop with the arrow keys inside: give it an `aria-label`.
+ */
+export declare function SelectionToolbar({ className, ...props }: SelectionToolbarProps): import("react").JSX.Element;
+export type SelectionToolbarCountProps = useRender.ComponentProps<"span">;
+/**
+ * What the actions act on ("3 selected"), first. Announced when it changes.
+ * Put the number in `SelectionToolbarCountValue`.
+ */
+export declare function SelectionToolbarCount({ className, render, ...props }: SelectionToolbarCountProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarCountValueProps = useRender.ComponentProps<"span">;
+/** The number in the count, in Space Mono. */
+export declare function SelectionToolbarCountValue({ className, render, ...props }: SelectionToolbarCountValueProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarHintProps = useRender.ComponentProps<"span">;
+/**
+ * A short line after the count, such as "1 will be skipped". The first to
+ * give way: it is then read by screen readers only.
+ */
+export declare function SelectionToolbarHint({ className, render, ...props }: SelectionToolbarHintProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarItemProps = {
+  /** The control, such as `<Checkbox />`. It keeps its own role and keys. */
+  children: ReactElement<Record<string, unknown>>;
+};
+/**
+ * Any other control of the toolbar, such as a thread's select-all checkbox
+ * before the count, so the arrow keys reach it. It takes the toolbar's focus
+ * handling only: the control keeps its role and its own keys.
+ */
+export declare function SelectionToolbarItem({ children }: SelectionToolbarItemProps): import("react").JSX.Element;
+export type SelectionToolbarActionsProps = Omit<FitToolbarGroupProps, "wrapOrder" | "firstLine" | "collapseOrder" | "collapsed">;
+/** The actions on the selection, in one row. */
+export declare function SelectionToolbarActions({ className, ...props }: SelectionToolbarActionsProps): import("react").JSX.Element;
+export type SelectionToolbarActionProps = Omit<ButtonProps, "variant" | "size" | "children"> & {
+  /** The action's 14px icon. */
+  icon: ReactNode;
+  /** The label. While only the icon shows, the label is its accessible name and its tooltip. */
+  children: ReactNode;
+  /** Moves into More before the labels give way, the last first. */
+  secondary?: boolean;
+} & ({
+  menu?: false;
+  /**
+   * What the action is in More's menu while it is there. By default a
+   * `DropdownMenuItem` with its icon and label that calls its `onClick`.
+   */
+  moreItem?: ReactNode;
+} | {
+  /** The action opens a menu: a 12px chevron follows the label. Open the menu upward. */
+  menu: true;
+  /**
+   * Required: its menu in More's (a `DropdownMenuSubmenu` with the same
+   * choices). Its `onClick` only opens its own menu, so it has no
+   * default, and without one it would vanish into More.
+   */
+  moreItem: ReactNode;
+});
+/**
+ * One action on the selection: a 14px icon and a label, an `md` ghost button
+ * with a mouse on a desktop, a 44px bar button showing its icon alone on a
+ * phone and a touch screen.
+ */
+export declare function SelectionToolbarAction({ icon, children, secondary, menu, moreItem, className, onClick, disabled, ...props }: SelectionToolbarActionProps): import("react").JSX.Element;
+export type SelectionToolbarMoreProps = Omit<ButtonProps, "variant" | "size" | "aria-label"> & {
+  /** Its accessible name, such as "More actions". */
+  "aria-label": string;
+};
+/**
+ * More, after the actions, shown only while some are in it. Render it as a
+ * `DropdownMenuTrigger` whose menu opens upward (`side="top"`), with
+ * `SelectionToolbarMoreItems` in the menu.
+ */
+export declare function SelectionToolbarMore({ className, children, ...props }: SelectionToolbarMoreProps): import("react").JSX.Element;
+/** The actions in More, in their order, each as its `moreItem`: put it in More's menu. */
+export declare const SelectionToolbarMoreItems: typeof FitToolbarMoreItems;
+export type SelectionToolbarCloseProps = Omit<ButtonProps, "variant" | "size" | "aria-label"> & {
+  /** Its accessible name, such as "Cancel". */
+  "aria-label": string;
+};
+/** ×, last: ends the selection, as Escape does. */
+export declare function SelectionToolbarClose({ className, children, ...props }: SelectionToolbarCloseProps): import("react").JSX.Element;
+//#endregion