@botiverse/raft-ui 0.82.0 → 0.84.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;
@@ -15,6 +15,10 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
     true: {};
     false: {};
   };
+  attached: {
+    true: {};
+    false: {};
+  };
   cell: {
     false: {
       root: string[];
@@ -47,7 +51,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
       root: string;
     };
     plain: {
-      root: string;
+      root: string[];
     };
     entry: {
       root: string;
@@ -57,6 +61,10 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
     true: {};
     false: {};
   };
+  attached: {
+    true: {};
+    false: {};
+  };
   cell: {
     false: {
       root: string[];
@@ -89,7 +97,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
       root: string;
     };
     plain: {
-      root: string;
+      root: string[];
     };
     entry: {
       root: string;
@@ -99,6 +107,10 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
     true: {};
     false: {};
   };
+  attached: {
+    true: {};
+    false: {};
+  };
   cell: {
     false: {
       root: string[];

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

@@ -34,13 +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) [--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",
@@ -62,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",
@@ -69,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,
@@ -87,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/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;