@botiverse/raft-ui 0.82.0 → 0.83.0

package/dist/components/fit-toolbar/fit-toolbar.mjs

@@ -0,0 +1,469 @@
+import { Button } from "../button/button.mjs";
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { fitToolbar } from "./fit-toolbar.recipe.mjs";
+import { Fragment, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/fit-toolbar/fit-toolbar.tsx
+const NONE = {
+	items: /* @__PURE__ */ new Map(),
+	more: [],
+	wrapping: false
+};
+const STEPS = [
+	"label",
+	"more",
+	"collapse",
+	"wrap"
+];
+const ID = "data-fit-id";
+const DECLARED = "data-fit-steps";
+const MORE_TRIGGER = "data-fit-more-trigger";
+const SHOWN = "data-fit-shown";
+const WRAPPING = "data-fit-wrapping";
+const ROW = "data-fit-row";
+const NO_WRAP = "data-fit-first-line";
+const WRAP_LINE = "data-fit-wrap-line";
+const BREAK = "data-fit-break";
+const stepAttribute = (step) => `data-fit-${step}`;
+function declare(steps) {
+	return STEPS.filter((step) => steps[step] !== void 0).map((step) => `${step}:${steps[step]}`).join(" ");
+}
+/** What a row holds, looking through `display: contents` wrappers. */
+function boxes(element) {
+	return Array.from(element.children).flatMap((child) => getComputedStyle(child).display === "contents" ? boxes(child) : [child]);
+}
+/**
+* Nothing pokes out of the toolbar or out of any of its rows, and no line has
+* broken by itself: while groups wrap, each line (one `order`) stays one line.
+*/
+function fits(root) {
+	if (![root, ...root.querySelectorAll(`[${ROW}]`)].every((row) => {
+		if (row.getClientRects().length === 0) return true;
+		const style = getComputedStyle(row);
+		const end = row.getBoundingClientRect().right - parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
+		return boxes(row).every((box) => box.getClientRects().length === 0 || box.getBoundingClientRect().right <= end + .5);
+	})) return false;
+	for (const scroller of root.querySelectorAll("[data-fit-scroll]")) {
+		if (scroller.getClientRects().length === 0) continue;
+		const first = boxes(scroller.querySelector("[data-slot=scroll-area-content]") ?? scroller).find((box) => box.getClientRects().length > 0);
+		if (first && scroller.clientWidth + .5 < first.getBoundingClientRect().width) return false;
+	}
+	if (!root.hasAttribute(WRAPPING)) return true;
+	const tops = /* @__PURE__ */ new Map();
+	for (const child of Array.from(root.children)) {
+		if (child.hasAttribute(BREAK) || child.getClientRects().length === 0) continue;
+		const line = getComputedStyle(child).order;
+		const top = child.getBoundingClientRect().top;
+		const first = tops.get(line);
+		if (first === void 0) tops.set(line, top);
+		else if (Math.abs(first - top) > .5) return false;
+	}
+	return true;
+}
+/**
+* Takes the steps one at a time, in their order, until the toolbar fits its
+* region; writes each on the DOM as it goes (React renders the same after)
+* and returns them. It starts from nothing taken every time, so the outcome
+* depends on the width alone.
+*/
+function measure(root, allowWrap) {
+	const elements = Array.from(root.querySelectorAll(`[${ID}]`));
+	const triggers = Array.from(root.querySelectorAll(`[${MORE_TRIGGER}]`));
+	for (const element of elements) {
+		for (const step of STEPS) element.removeAttribute(stepAttribute(step));
+		element.style.removeProperty("order");
+	}
+	for (const trigger of triggers) trigger.removeAttribute(SHOWN);
+	root.removeAttribute(WRAPPING);
+	for (const line of Array.from(root.querySelectorAll(`:scope > [${BREAK}]`))) line.remove();
+	root.style.setProperty("--fit-gap", getComputedStyle(root).columnGap);
+	const queue = elements.flatMap((element, index) => (element.getAttribute(DECLARED) ?? "").split(" ").filter(Boolean).map((entry) => {
+		const [step, order] = entry.split(":");
+		return {
+			element,
+			step,
+			order: Number(order),
+			index
+		};
+	}).filter(({ step, element: item }) => {
+		if (step === "more") return triggers.length > 0;
+		if (step === "wrap") return allowWrap && !item.hasAttribute(NO_WRAP);
+		return true;
+	}));
+	queue.sort((a, b) => a.order - b.order || b.index - a.index);
+	const taken = /* @__PURE__ */ new Map();
+	const history = [];
+	const showMore = () => {
+		const shown = Array.from(taken.values()).some((steps) => steps.has("more"));
+		for (const trigger of triggers) trigger.toggleAttribute(SHOWN, shown);
+	};
+	const take = (element, step) => {
+		const steps = taken.get(element) ?? /* @__PURE__ */ new Set();
+		steps.add(step);
+		taken.set(element, steps);
+		element.setAttribute(stepAttribute(step), "");
+		if (step === "more") showMore();
+		if (step === "wrap") layOutLines(root, elements);
+	};
+	const undo = (element, step) => {
+		taken.get(element)?.delete(step);
+		element.removeAttribute(stepAttribute(step));
+		if (step === "more") showMore();
+	};
+	for (const { element, step } of queue) {
+		if (fits(root)) break;
+		if (taken.get(element)?.has("more")) continue;
+		take(element, step);
+		history.push({
+			element,
+			step
+		});
+	}
+	for (let index = history.length - 1; index >= 0; index -= 1) {
+		const { element, step } = history[index];
+		if (step === "wrap") continue;
+		const group = element.closest(`[${stepAttribute("wrap")}]`);
+		if (!group || !root.contains(group)) continue;
+		if (history.findIndex((entry) => entry.element === group && entry.step === "wrap") < index) continue;
+		undo(element, step);
+		if (!fits(root)) take(element, step);
+	}
+	const items = /* @__PURE__ */ new Map();
+	const more = [];
+	let wrapping = false;
+	for (const element of elements) {
+		const steps = taken.get(element);
+		if (!steps || steps.size === 0) continue;
+		const id = element.getAttribute(ID);
+		items.set(id, steps);
+		if (steps.has("more")) more.push(id);
+		if (steps.has("wrap")) wrapping = true;
+	}
+	return {
+		items,
+		more,
+		wrapping
+	};
+}
+/**
+* Puts the wrapped groups on the lines after the first: groups with the same
+* `wrapLine` share a line, in their order; any other takes one of its own.
+* A zero-height break before each line ends the one before it.
+*/
+function layOutLines(root, elements) {
+	root.setAttribute(WRAPPING, "");
+	for (const line of Array.from(root.querySelectorAll(`:scope > [${BREAK}]`))) line.remove();
+	const lines = [];
+	for (const group of elements) {
+		if (!group.hasAttribute(stepAttribute("wrap"))) continue;
+		const line = group.getAttribute(WRAP_LINE) ?? `#${group.getAttribute(ID)}`;
+		let number = lines.indexOf(line);
+		if (number < 0) {
+			number = lines.push(line) - 1;
+			const lineBreak = document.createElement("span");
+			lineBreak.setAttribute(BREAK, "");
+			lineBreak.setAttribute("aria-hidden", "true");
+			lineBreak.style.cssText = `flex-basis: 100%; height: 0; order: ${2 * number + 1}`;
+			root.append(lineBreak);
+		}
+		group.style.order = String(2 * number + 2);
+	}
+}
+const keyOf = (applied) => `${applied.wrapping}|${Array.from(applied.items, ([id, steps]) => `${id}:${[...steps].join(",")}`).join(";")}`;
+/**
+* What each item shows in More while it is there, outside React state: the
+* items write it on every render, and only `FitToolbarMoreItems` (in an open
+* menu) reads it.
+*/
+function createMoreItemStore() {
+	const items = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	let version = 0;
+	const notify = () => {
+		version += 1;
+		for (const listener of listeners) listener();
+	};
+	return {
+		set(id, item) {
+			items.set(id, item);
+			notify();
+		},
+		delete(id) {
+			if (items.delete(id)) notify();
+		},
+		get: (id) => items.get(id),
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		version: () => version
+	};
+}
+const FitToolbarContext = createContext(null);
+/**
+* A toolbar whose items give way, in named steps and an order the items
+* declare, as the region it sits in narrows: it measures its content in its
+* own width, never the window's. The steps are written on each item as
+* `data-fit-<step>` for its styles. A Base UI Toolbar: one Tab stop, the
+* arrow keys inside.
+*/
+function FitToolbar({ className, wrap = false, ref, ...props }) {
+	const { root } = fitToolbar();
+	const rootRef = useRef(null);
+	const [element, setElement] = useState(null);
+	const [setRef] = useMergedRef(rootRef, setElement, ref);
+	const [applied, setApplied] = useState(NONE);
+	const [store] = useState(createMoreItemStore);
+	const update = useCallback(() => {
+		const current = rootRef.current;
+		if (!current) return;
+		const next = measure(current, wrap);
+		setApplied((previous) => keyOf(previous) === keyOf(next) ? previous : next);
+	}, [wrap]);
+	useLayoutEffect(update);
+	useLayoutEffect(() => {
+		if (!element) return;
+		const region = element.parentElement;
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+		if (region) resize?.observe(region);
+		const content = typeof MutationObserver === "undefined" ? null : new MutationObserver((records) => {
+			const own = (node) => node instanceof Element && node.hasAttribute(BREAK);
+			if (records.some((record) => record.type === "characterData" || ![...record.addedNodes, ...record.removedNodes].every(own))) update();
+		});
+		content?.observe(element, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		fonts?.addEventListener?.("loadingdone", update);
+		return () => {
+			resize?.disconnect();
+			content?.disconnect();
+			fonts?.removeEventListener?.("loadingdone", update);
+		};
+	}, [element, update]);
+	const context = useMemo(() => ({
+		applied,
+		store
+	}), [applied, store]);
+	return /* @__PURE__ */ jsx(FitToolbarContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Toolbar.Root, {
+			ref: setRef,
+			"data-slot": "fit-toolbar",
+			"data-fit-wrapping": applied.wrapping ? "" : void 0,
+			className: root({ className }),
+			...props
+		})
+	});
+}
+/**
+* Inside a FitToolbar: a control that would measure its own fit (a
+* SegmentedControl's `iconsOnlyBelow`) leaves it to the toolbar's steps.
+*/
+function useInFitToolbar() {
+	return useContext(FitToolbarContext) !== null;
+}
+/**
+* Makes an element an item of the nearest FitToolbar: spread `props` on it.
+* Says which steps it has taken, for what it renders (a tooltip once its
+* label is gone, say).
+*/
+function useFitItem({ moreItem, ...steps } = {}) {
+	const id = useId();
+	const context = useContext(FitToolbarContext);
+	const taken = context?.applied.items.get(id);
+	const store = context?.store;
+	const declared = declare(steps);
+	useLayoutEffect(() => {
+		if (moreItem !== void 0) store?.set(id, moreItem);
+	});
+	useLayoutEffect(() => () => store?.delete(id), [store, id]);
+	const props = {
+		[ID]: id,
+		[DECLARED]: declared || void 0
+	};
+	for (const step of STEPS) props[stepAttribute(step)] = taken?.has(step) ? "" : void 0;
+	return {
+		id,
+		props,
+		/** Steps it has taken. */
+		taken: (step) => taken?.has(step) ?? false
+	};
+}
+/**
+* Makes an element the toolbar's More: spread `props` on it. It shows only
+* while an item is in More (`data-fit-shown`); hide it otherwise.
+*/
+function useFitMore() {
+	const shown = (useContext(FitToolbarContext)?.applied.more.length ?? 0) > 0;
+	return {
+		shown,
+		props: {
+			[MORE_TRIGGER]: "",
+			[SHOWN]: shown ? "" : void 0
+		}
+	};
+}
+/** The items in More, in their order, each as its `moreItem`: put it in More's menu. */
+function FitToolbarMoreItems() {
+	const context = useContext(FitToolbarContext);
+	const store = context?.store;
+	useSyncExternalStore(store?.subscribe ?? noSubscription, store?.version ?? noVersion, store?.version ?? noVersion);
+	if (!context) return null;
+	return context.applied.more.map((id) => /* @__PURE__ */ jsx(Fragment, { children: context.store.get(id) }, id));
+}
+const noSubscription = () => () => {};
+const noVersion = () => 0;
+/**
+* A scrolling group: which side hides more (`data-overflow`, for
+* `mask-fade-x`), a vertical wheel scrolling it, and its `data-active` items
+* and the focused one kept in view, clear of the fade, with no animation.
+* The same as slock web's FilterStrip, so the two behave alike.
+*/
+function useScrollGroup(group) {
+	useLayoutEffect(() => {
+		if (!group) return;
+		const edges = () => {
+			const max = group.scrollWidth - group.clientWidth;
+			const start = group.scrollLeft > 1;
+			const end = max > 1 && group.scrollLeft < max - 1;
+			const next = start && end ? "both" : start ? "start" : end ? "end" : null;
+			if (next) group.setAttribute("data-overflow", next);
+			else group.removeAttribute("data-overflow");
+		};
+		const reveal = (item) => {
+			if (!(item instanceof HTMLElement) || !group.contains(item)) return;
+			const fade = parseFloat(getComputedStyle(group).getPropertyValue("--fade-edge")) || 24;
+			const start = item.getBoundingClientRect().left - group.getBoundingClientRect().left + group.scrollLeft;
+			const end = start + item.offsetWidth;
+			if (start - fade < group.scrollLeft) group.scrollLeft = Math.max(0, start - fade);
+			else if (end + fade > group.scrollLeft + group.clientWidth) group.scrollLeft = end + fade - group.clientWidth;
+			edges();
+		};
+		const revealActive = () => {
+			const active = group.querySelectorAll("[data-active]");
+			for (const item of Array.from(active).reverse()) reveal(item);
+		};
+		const onWheel = (event) => {
+			if (group.scrollWidth <= group.clientWidth) return;
+			if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+			const before = group.scrollLeft;
+			group.scrollLeft += event.deltaY;
+			if (group.scrollLeft !== before) event.preventDefault();
+		};
+		const onFocus = (event) => reveal(event.target);
+		revealActive();
+		edges();
+		group.addEventListener("scroll", edges, { passive: true });
+		group.addEventListener("wheel", onWheel, { passive: false });
+		group.addEventListener("focusin", onFocus);
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+			revealActive();
+			edges();
+		});
+		resize?.observe(group);
+		const changes = new MutationObserver((records) => {
+			if (records.some((record) => record.type !== "attributes" || record.attributeName === "data-active")) revealActive();
+			edges();
+		});
+		changes.observe(group, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true,
+			attributeFilter: ["data-active"]
+		});
+		return () => {
+			group.removeEventListener("scroll", edges);
+			group.removeEventListener("wheel", onWheel);
+			group.removeEventListener("focusin", onFocus);
+			resize?.disconnect();
+			changes.disconnect();
+		};
+	}, [group]);
+}
+/**
+* A group of items in one row, a fixed gap apart. A toolbar wraps only
+* between groups, the last first; groups with the same `wrapLine` share a
+* line, any other takes one of its own.
+*/
+function FitToolbarGroup({ className, wrapOrder = 0, firstLine = false, wrapLine, collapseOrder, collapsed, overflow, children, ref, ...props }) {
+	const { group, full, short, scroller, scrollContent } = fitToolbar({ scroll: overflow === "scroll" });
+	const [scrollerElement, setScroller] = useState(null);
+	useScrollGroup(overflow === "scroll" ? scrollerElement : null);
+	const item = useFitItem({
+		wrap: wrapOrder,
+		collapse: collapsed === void 0 ? void 0 : collapseOrder ?? 0
+	});
+	return /* @__PURE__ */ jsx(Toolbar.Group, {
+		ref,
+		"data-slot": "fit-toolbar-group",
+		"data-fit-row": overflow === "scroll" ? void 0 : "",
+		"data-fit-scroll": overflow === "scroll" ? "" : void 0,
+		"data-fit-first-line": firstLine ? "" : void 0,
+		"data-fit-wrap-line": wrapLine,
+		className: group({ className }),
+		...item.props,
+		...props,
+		children: overflow === "scroll" ? /* @__PURE__ */ jsx(ScrollArea, {
+			ref: setScroller,
+			orientation: "horizontal",
+			overscroll: "contain",
+			size: "small",
+			trigger: "scroll",
+			tabIndex: -1,
+			"data-fit-scroller": "",
+			className: scroller(),
+			contentClassName: scrollContent(),
+			children
+		}) : collapsed === void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "fit-toolbar-group-items",
+			className: full(),
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "fit-toolbar-group-collapsed",
+			className: short(),
+			children: collapsed
+		})] })
+	});
+}
+/**
+* A toolbar button that can give way: an `md` Button (ghost unless you say)
+* with an icon and a label, an icon square with its label as a tooltip from
+* `labelOrder` on, and hidden from `moreOrder` on.
+*/
+function FitToolbarButton({ icon, children, labelOrder, moreOrder, moreItem, variant = "ghost", className, ...props }) {
+	const { button, label } = fitToolbar();
+	const item = useFitItem({
+		label: labelOrder,
+		more: moreOrder,
+		moreItem
+	});
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !item.taken("label"),
+		children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+			"data-slot": "button",
+			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: /* @__PURE__ */ jsx(Button, {
+				variant,
+				size: "md",
+				className: button({ className }),
+				...item.props,
+				...props
+			}) }),
+			children: [icon, /* @__PURE__ */ jsx("span", {
+				"data-slot": "fit-toolbar-button-label",
+				className: label(),
+				children
+			})]
+		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
+	});
+}
+//#endregion
+export { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, useFitItem, useFitMore, useInFitToolbar };

package/dist/components/fit-toolbar/fit-toolbar.recipe.mjs

@@ -0,0 +1,21 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/fit-toolbar/fit-toolbar.recipe.ts
+const fitToolbar = tv({
+	slots: {
+		root: ["flex min-w-0 max-w-full flex-nowrap items-center", "data-fit-wrapping:flex-wrap data-fit-wrapping:gap-y-0"],
+		group: ["group/fit-group flex shrink-0 flex-nowrap items-center", "data-fit-wrap:mt-(--fit-gap)"],
+		full: ["contents group-data-fit-collapse/fit-group:hidden"],
+		short: ["hidden group-data-fit-collapse/fit-group:contents"],
+		button: ["data-fit-label:w-8 data-fit-label:px-0 md:pointer-fine:data-fit-label:w-(--control-height)", "data-fit-more:hidden"],
+		label: ["in-data-fit-label:sr-only"],
+		scroller: [],
+		scrollContent: []
+	},
+	variants: { scroll: { true: {
+		group: ["block min-w-0 flex-1 shrink basis-0"],
+		scroller: ["-my-1.5 w-full gap-[inherit] scroll-px-6 mask-fade-x"],
+		scrollContent: ["flex w-max items-center gap-[inherit] py-1.5"]
+	} } }
+});
+//#endregion
+export { fitToolbar };

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

@@ -0,0 +1,2 @@
+import { FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarProps, useFitItem, useFitMore, useInFitToolbar } from "./fit-toolbar.mjs";
+export { type FitItemOptions, type FitStep, type FitSteps, FitToolbar, FitToolbarButton, type FitToolbarButtonProps, FitToolbarGroup, type FitToolbarGroupProps, FitToolbarMoreItems, type FitToolbarProps, useFitItem, useFitMore, useInFitToolbar };

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;
@@ -47,7 +47,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
       root: string;
     };
     plain: {
-      root: string;
+      root: string[];
     };
     entry: {
       root: string;
@@ -89,7 +89,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
       root: string;
     };
     plain: {
-      root: string;
+      root: string[];
     };
     entry: {
       root: 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,7 +19,7 @@ const listRow = tv({
 			"aria-disabled:[--list-row-ink-2:var(--foreground-disabled)] aria-disabled:[--list-row-ink-3:var(--foreground-disabled)]"
 		],
 		icon: ["flex shrink-0 items-center justify-center", "text-(--list-row-ink-3) [&>svg]:size-5 [&>svg]:shrink-0"],
-		body: ["flex min-w-0 flex-1 flex-col gap-0.5"],
+		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",
@@ -34,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/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;