@botiverse/raft-ui 0.22.1 → 0.23.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageMultiSelect, $n as PopoverTitle, $r as ListRowTitle, $t as MessageItemAvatarSlot, A as MessageQuotedPreview, Ai as DialogSheetReset, Ar as PanelBody, At as MessageItemReadReceipt, B as MessageQuotedPreviewLoading, Bi as ThemeStateContext, Br as ScrollAreaThumb, Bt as MessageItemMeta, Ci as DialogSurface, Cn as PreviewCardHeader, Cr as DropdownMenuShortcut, Ct as MessageReactionTooltipMeta, D as MessageListHistoryLimited, Di as panelToggleAction, Dn as PreviewCardSeparator, Dr as Kbd, Dt as MessageReactionTooltipSeparator, E as MessageListEndFade, Ei as PanelAction, En as PreviewCardPortal, Er as DropdownMenuTrigger, Et as MessageReactionTooltipNames, F as MessageQuotedPreviewAuthorMeta, Fr as PanelSection, G as MessageEmbed, Gi as headEdgePull, Gr as ListRow, Gt as MessageItemTime, H as MessageQuotedPreviewThread, Hi as stackedActions, Hr as Checkbox, Ht as MessageItemSenderBadges, I as MessageQuotedPreviewAuthorName, Ii as useParentOverlayKind, Ir as ScrollArea, J as MessageEmbedHeader, Jn as PopoverDescription, Jr as ListRowChevron, Jt as MessageItemContent, K as MessageEmbedContent, Ki as headEdges, Kn as PopoverClose, Kr as ListRowBody, Kt as MessageItemAttachments, L as MessageQuotedPreviewChannel, Li as withOverlayLayer, Lr as ScrollAreaContent, M as MessageQuotedPreviewAttachments, Mi as buttonVariants, Mr as PanelHeaderRoot, Mt as MessageItemToolbar, N as MessageQuotedPreviewAuthor, Ni as Spinner, Nr as PanelScrollContent, Nt as MessageItemToolbarButton, O as MessageListNotice, Oi as TextLink, On as PreviewCardTitle, Or as KbdGroup, Ot as MessageItemBadge, Pi as defaultNativeButton, Pr as PanelScrollViewport, Q as MessageTextSelectionToolbarSeparator, Qn as PopoverSeparator, Qr as ListRowMeta, Qt as MessageItemSearchMatch, R as MessageQuotedPreviewContent, Ri as useThemeScopeProps, Rr as ScrollAreaCorner, Rt as MessageItemHeader, Sr as DropdownMenuSeparator, St as MessageReactionTooltipContent, T as MessageListDateDivider, Ti as DialogTrigger, Tn as PreviewCardPopup, Tr as DropdownMenuSubmenuTrigger, Tt as MessageReactionTooltipNameText, U as MessageQuotedPreviewTimestamp, Ui as useStackedActions, Un as PopoverArrow, Ur as CheckboxIndicator, Ut as MessageItemSenderButton, V as MessageQuotedPreviewText, Vi as tv, Vn as Popover, Vr as ScrollAreaViewport, Vt as MessageItemSender, W as MessageQuotedPreviewUnavailable, Wi as controlIconInset, Wn as PopoverBackdrop, Wr as PRESENCE_COLOR, Wt as MessageItemSenderGroup, X as MessageTextSelectionToolbar, Xn as PopoverPopup, Xr as ListRowGroup, Xt as MessageItemEmbedded, Y as messageEmbed, Yn as PopoverHeader, Yr as ListRowDescription, Yt as MessageItemEdited, Z as MessageTextSelectionToolbarButton, Zn as PopoverPortal, Zr as ListRowIcon, Zt as MessageItemFooter, _ as InboxItemTrailing, _n as PreviewCardArrow, _r as DropdownMenuPopup, _t as MessageReactionGlyph, a as InboxItemContext, ai as TooltipProvider, an as AvatarBadge, ar as MobileNavLabel, at as MessageReferenceIndicator, b as Skeleton, bi as DialogOverlay, bn as PreviewCardDescription, br as DropdownMenuRadioItem, bt as MessageReactionQuickButton, c as InboxItemLeading, cn as AvatarGroupCount, cr as DropdownMenuCheckboxItem, d as InboxItemMetadata, di as Dialog, dr as DropdownMenuFooter, dt as MessageReferenceUnavailable, ei as ListRowTop, en as MessageItemContinuationTime, er as PopoverTrigger, et as MessageMultiSelectCheckbox, f as InboxItemSelection, fi as DialogBody, fr as DropdownMenuItem, ft as inlineChip, g as InboxItemTitle, gi as DialogFooter, gt as MessageReactionErrorIndicator, h as InboxItemTimestamp, hi as DialogDescription, hn as PreviewCard, hr as DropdownMenuLabel, ht as MessageReactionCount, i as InboxItemContent, ii as TooltipPortal, in as Avatar, ir as MobileNavItem, j as MessageQuotedPreviewAttachment, ji as Button, jr as PanelFooter, jt as MessageItemSavedIndicator, k as MessageList, ki as textLinkVariants, kn as PreviewCardTrigger, kr as Panel, kt as MessageItemBadgeSeparator, l as InboxItemMarks, ln as AvatarImage, lr as DropdownMenuCheckboxItemIndicator, lt as MessageReferenceSuffix, m as InboxItemSubtitle, mi as DialogContent, mr as DropdownMenuItemLabel, mt as MessageReactionChip, n as InboxItemActions, ni as Tooltip, nn as MessageItem, nr as useHoldThenMoveTouchSensor, nt as MessageMultiSelectToolbarActions, o as InboxItemHeading, oi as TooltipTrigger, on as AvatarFallback, or as MobileNavRoot, ot as MessageReferenceLabel, p as InboxItemSender, pi as DialogClose, pr as DropdownMenuItemCount, pt as MessageReactionAddButton, q as MessageEmbedFooter, qi as decisionWidth, qn as PopoverContent, qr as ListRowBottom, qt as MessageItemBody, r as InboxItemBody, ri as TooltipContent, rn as searchHit, rr as useMouseOnlyPointerSensor, rt as MessageReferenceChip, s as InboxItemHoverTarget, si as Badge, sn as AvatarGroup, sr as DropdownMenu, st as MessageReferencePending, t as InboxItem, ti as ListRowValue, tn as MessageItemGutter, tr as PopoverViewport, tt as MessageMultiSelectToolbar, u as InboxItemMessage, ui as useMobileViewport, un as useOverflowTitle, ur as DropdownMenuContent, ut as MessageReferenceText, v as InboxItemTrigger, vi as DialogHeader, vr as DropdownMenuPortal, vt as MessageReactionPickerContent, wi as DialogTitle, wr as DropdownMenuSubmenu, wt as MessageReactionTooltipName, xi as DialogPortal, xr as DropdownMenuRadioItemIndicator, xt as MessageReactionQuickRow, yi as DialogNav, yn as PreviewCardContent, yr as DropdownMenuRadioGroup, yt as MessageReactionPickerStatic, z as MessageQuotedPreviewHeader, zi as useTheme, zr as ScrollAreaScrollbar, zt as MessageItemInlineStatus } from "./inbox-item-BtvK75T1.mjs";
+import { $ as MessageMultiSelect, $n as PopoverTitle, $r as ListRowTitle, $t as MessageItemAvatarSlot, A as MessageQuotedPreview, Ai as DialogSheetReset, Ar as PanelBody, At as MessageItemReadReceipt, B as MessageQuotedPreviewLoading, Bi as ThemeStateContext, Br as ScrollAreaThumb, Bt as MessageItemMeta, Ci as DialogSurface, Cn as PreviewCardHeader, Cr as DropdownMenuShortcut, Ct as MessageReactionTooltipMeta, D as MessageListHistoryLimited, Di as panelToggleAction, Dn as PreviewCardSeparator, Dr as Kbd, Dt as MessageReactionTooltipSeparator, E as MessageListEndFade, Ei as PanelAction, En as PreviewCardPortal, Er as DropdownMenuTrigger, Et as MessageReactionTooltipNames, F as MessageQuotedPreviewAuthorMeta, Fr as PanelSection, G as MessageEmbed, Gi as headEdgePull, Gr as ListRow, Gt as MessageItemTime, H as MessageQuotedPreviewThread, Hi as stackedActions, Hr as Checkbox, Ht as MessageItemSenderBadges, I as MessageQuotedPreviewAuthorName, Ii as useParentOverlayKind, Ir as ScrollArea, J as MessageEmbedHeader, Jn as PopoverDescription, Jr as ListRowChevron, Jt as MessageItemContent, K as MessageEmbedContent, Ki as headEdges, Kn as PopoverClose, Kr as ListRowBody, Kt as MessageItemAttachments, L as MessageQuotedPreviewChannel, Li as withOverlayLayer, Lr as ScrollAreaContent, M as MessageQuotedPreviewAttachments, Mi as buttonVariants, Mr as PanelHeaderRoot, Mt as MessageItemToolbar, N as MessageQuotedPreviewAuthor, Ni as Spinner, Nr as PanelScrollContent, Nt as MessageItemToolbarButton, O as MessageListNotice, Oi as TextLink, On as PreviewCardTitle, Or as KbdGroup, Ot as MessageItemBadge, Pi as defaultNativeButton, Pr as PanelScrollViewport, Q as MessageTextSelectionToolbarSeparator, Qn as PopoverSeparator, Qr as ListRowMeta, Qt as MessageItemSearchMatch, R as MessageQuotedPreviewContent, Ri as useThemeScopeProps, Rr as ScrollAreaCorner, Rt as MessageItemHeader, Sr as DropdownMenuSeparator, St as MessageReactionTooltipContent, T as MessageListDateDivider, Ti as DialogTrigger, Tn as PreviewCardPopup, Tr as DropdownMenuSubmenuTrigger, Tt as MessageReactionTooltipNameText, U as MessageQuotedPreviewTimestamp, Ui as useStackedActions, Un as PopoverArrow, Ur as CheckboxIndicator, Ut as MessageItemSenderButton, V as MessageQuotedPreviewText, Vi as tv, Vn as Popover, Vr as ScrollAreaViewport, Vt as MessageItemSender, W as MessageQuotedPreviewUnavailable, Wi as controlIconInset, Wn as PopoverBackdrop, Wr as PRESENCE_COLOR, Wt as MessageItemSenderGroup, X as MessageTextSelectionToolbar, Xn as PopoverPopup, Xr as ListRowGroup, Xt as MessageItemEmbedded, Y as messageEmbed, Yn as PopoverHeader, Yr as ListRowDescription, Yt as MessageItemEdited, Z as MessageTextSelectionToolbarButton, Zn as PopoverPortal, Zr as ListRowIcon, Zt as MessageItemFooter, _ as InboxItemTrailing, _n as PreviewCardArrow, _r as DropdownMenuPopup, _t as MessageReactionGlyph, a as InboxItemContext, ai as TooltipProvider, an as AvatarBadge, ar as MobileNavLabel, at as MessageReferenceIndicator, b as Skeleton, bi as DialogOverlay, bn as PreviewCardDescription, br as DropdownMenuRadioItem, bt as MessageReactionQuickButton, c as InboxItemLeading, cn as AvatarGroupCount, cr as DropdownMenuCheckboxItem, d as InboxItemMetadata, di as Dialog, dr as DropdownMenuFooter, dt as MessageReferenceUnavailable, ei as ListRowTop, en as MessageItemContinuationTime, er as PopoverTrigger, et as MessageMultiSelectCheckbox, f as InboxItemSelection, fi as DialogBody, fr as DropdownMenuItem, ft as inlineChip, g as InboxItemTitle, gi as DialogFooter, gt as MessageReactionErrorIndicator, h as InboxItemTimestamp, hi as DialogDescription, hn as PreviewCard, hr as DropdownMenuLabel, ht as MessageReactionCount, i as InboxItemContent, ii as TooltipPortal, in as Avatar, ir as MobileNavItem, j as MessageQuotedPreviewAttachment, ji as Button, jr as PanelFooter, jt as MessageItemSavedIndicator, k as MessageList, ki as textLinkVariants, kn as PreviewCardTrigger, kr as Panel, kt as MessageItemBadgeSeparator, l as InboxItemMarks, ln as AvatarImage, lr as DropdownMenuCheckboxItemIndicator, lt as MessageReferenceSuffix, m as InboxItemSubtitle, mi as DialogContent, mr as DropdownMenuItemLabel, mt as MessageReactionChip, n as InboxItemActions, ni as Tooltip, nn as MessageItem, nr as useHoldThenMoveTouchSensor, nt as MessageMultiSelectToolbarActions, o as InboxItemHeading, oi as TooltipTrigger, on as AvatarFallback, or as MobileNavRoot, ot as MessageReferenceLabel, p as InboxItemSender, pi as DialogClose, pr as DropdownMenuItemCount, pt as MessageReactionAddButton, q as MessageEmbedFooter, qi as decisionWidth, qn as PopoverContent, qr as ListRowBottom, qt as MessageItemBody, r as InboxItemBody, ri as TooltipContent, rn as searchHit, rr as useMouseOnlyPointerSensor, rt as MessageReferenceChip, s as InboxItemHoverTarget, si as Badge, sn as AvatarGroup, sr as DropdownMenu, st as MessageReferencePending, t as InboxItem, ti as ListRowValue, tn as MessageItemGutter, tr as PopoverViewport, tt as MessageMultiSelectToolbar, u as InboxItemMessage, ui as useMobileViewport, un as useOverflowTitle, ur as DropdownMenuContent, ut as MessageReferenceText, v as InboxItemTrigger, vi as DialogHeader, vr as DropdownMenuPortal, vt as MessageReactionPickerContent, wi as DialogTitle, wr as DropdownMenuSubmenu, wt as MessageReactionTooltipName, xi as DialogPortal, xr as DropdownMenuRadioItemIndicator, xt as MessageReactionQuickRow, yi as DialogNav, yn as PreviewCardContent, yr as DropdownMenuRadioGroup, yt as MessageReactionPickerStatic, z as MessageQuotedPreviewHeader, zi as useTheme, zr as ScrollAreaScrollbar, zt as MessageItemInlineStatus } from "./inbox-item-B56I-Ckt.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, Copy, FileText, Image, Info, TriangleAlert, Upload, X, Zap } from "lucide-react";
 import { Children, cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -587,6 +587,7 @@ function DrawerActions({ className, render, children, ...props }) {
 	const { actions } = drawer({ axis: swipeAxis });
 	const defaultProps = {
 		className: actions({ className }),
+		"data-stacked": swipeAxis === "x" ? void 0 : "",
 		children
 	};
 	return useRender({
@@ -2083,10 +2084,10 @@ const sidebarSectionRecipe = tv({ slots: {
 	sidebarSectionControls: [
 		"flex shrink-0 items-center gap-1",
 		"pointer-events-none absolute top-1/2 right-0 -translate-y-1/2 opacity-0",
-		"max-md:static max-md:pointer-events-auto max-md:translate-y-0 max-md:opacity-100",
-		"md:group-hover/section-header:pointer-events-auto md:group-hover/section-header:opacity-100",
-		"md:focus-within:pointer-events-auto md:focus-within:opacity-100",
-		"md:has-[[data-popup-open]]:pointer-events-auto md:has-[[data-popup-open]]:opacity-100"
+		"not-pointer-fine:static not-pointer-fine:pointer-events-auto not-pointer-fine:translate-y-0 not-pointer-fine:opacity-100",
+		"pointer-fine:group-hover/section-header:pointer-events-auto pointer-fine:group-hover/section-header:opacity-100",
+		"pointer-fine:focus-within:pointer-events-auto pointer-fine:focus-within:opacity-100",
+		"pointer-fine:has-data-popup-open:pointer-events-auto pointer-fine:has-data-popup-open:opacity-100"
 	],
 	sidebarSectionControl: ["flex h-7 w-auto min-w-7 shrink-0 items-center justify-center p-0 -my-1.5", "[&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4"]
 } });
@@ -4316,10 +4317,72 @@ function SwitchThumb({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/lib/use-merged-ref.ts
+/**
+* Merges refs into one setter. Returns `[setRef, getRef]`: `setRef(el)` stores `el` and passes it to
+* every ref; `getRef()` reads the stored element. When a ref changes between renders (checked while
+* rendering), the old one is cleared and the new one gets the stored element at once. The setter
+* calls ref callbacks itself, so what they return is ignored.
+*/
+function useMergedRef(...refs) {
+	const entries = useMemo(() => [], []);
+	const elementRef = useRef(null);
+	const getRef = useCallback(() => elementRef.current, []);
+	const clearEntry = useCallback((entry) => {
+		if (entry != null) {
+			if (entry.type === "RefCallback") entry.ref(null);
+			else entry.ref.current = null;
+		}
+	}, []);
+	const applyStoredElement = useCallback((ref) => {
+		if (typeof ref == "function") ref(getRef());
+		else ref.current = getRef();
+	}, [getRef]);
+	const setRef = useCallback((el) => {
+		elementRef.current = el;
+		for (const entry of entries) if (entry == null) continue;
+		else if (entry.type === "RefObject") entry.ref.current = el;
+		else entry.ref(el);
+	}, [entries]);
+	for (let i = 0; i < refs.length; i++) {
+		const ref = refs[i];
+		const entry = entries[i];
+		if (ref == null) {
+			clearEntry(entry);
+			entries[i] = null;
+		} else {
+			if (entry && entry.ref === ref) continue;
+			if (typeof ref == "function") {
+				if (entry != null) clearEntry(entry);
+				entries[i] = {
+					type: "RefCallback",
+					ref
+				};
+			} else {
+				if (entry != null) clearEntry(entry);
+				entries[i] = {
+					type: "RefObject",
+					ref
+				};
+			}
+			applyStoredElement(ref);
+		}
+	}
+	for (let i = refs.length; i < entries.length; i++) {
+		clearEntry(entries[i]);
+		entries[i] = null;
+	}
+	return [setRef, getRef];
+}
+//#endregion
 //#region src/components/segmented-control/segmented-control.tsx
 const segmentedControl = tv({
 	slots: {
-		root: ["inline-flex shrink-0 items-center", "w-fit flex-nowrap gap-[3px] rounded-[11px] bg-fill-muted p-[3px]"],
+		root: [
+			"inline-flex min-w-0 items-center",
+			"w-fit max-w-full flex-nowrap gap-[3px] rounded-[11px] bg-fill-muted p-[3px]",
+			"data-overflowing:overflow-x-auto data-overflowing:overscroll-x-contain data-overflowing:scrollbar-none"
+		],
 		item: [
 			"inline-flex min-w-0 shrink-0 items-center gap-1.5",
 			"outline-none disabled:pointer-events-none",
@@ -4354,20 +4417,204 @@ const segmentedControl = tv({
 			lg: { root: ["@max-lg:**:data-[slot=segmented-control-item]:relative @max-lg:**:data-[slot=segmented-control-item]:w-8 @max-lg:**:data-[slot=segmented-control-item]:px-0", "@max-lg:**:data-[slot=segmented-control-label]:sr-only @max-lg:**:data-[slot=segmented-control-count]:sr-only"] },
 			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-8 @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-8 @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"] }
-		}
+		},
+		iconsOnlyMeasured: { true: { root: ["data-icons-only:**:data-[slot=segmented-control-item]:relative data-icons-only:**:data-[slot=segmented-control-item]:w-8 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"] } }
 	}
 });
+const ICONS_ONLY_PRESETS = /* @__PURE__ */ new Set([
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+]);
+function isIconsOnlyPreset(value) {
+	return value !== void 0 && ICONS_ONLY_PRESETS.has(value);
+}
 const SegmentedControlIconsOnlyContext = createContext(false);
-function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default", className, ...props }) {
+/**
+* A length threshold in CSS pixels, or `undefined` for a value that isn't a
+* `px`, `rem` or `em` length. `em` is the container's font size, as in a
+* container query.
+*/
+function lengthToPx(value, container) {
+	const match = /^(\d*\.?\d+)(px|rem|em)$/.exec(value.trim());
+	if (!match) return void 0;
+	const amount = Number(match[1]);
+	if (match[2] === "px") return amount;
+	const fontOf = match[2] === "rem" ? document.documentElement : container;
+	return amount * parseFloat(getComputedStyle(fontOf).fontSize);
+}
+/** The nearest size container above the track, as a container query finds it; else its parent. */
+function queryContainerOf(track) {
+	for (let el = track.parentElement; el; el = el.parentElement) if (getComputedStyle(el).containerType !== "normal") return el;
+	return track.parentElement;
+}
+function contentInlineSize(el) {
+	const style = getComputedStyle(el);
+	return el.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+}
+/**
+* Whether the labelled segments fit the track's box: the segments, first to
+* last, and the track's padding take no more than its `clientWidth` (half a
+* pixel of rounding aside; `scrollWidth` would let the last segment eat into
+* the end padding first, and Base UI's visually hidden radio inputs must not
+* count), and no label is truncated (a track stretched with `*:flex-1`
+* shrinks its labels instead). Measured in the labelled layout
+* whatever the control shows now: the attribute comes off for the read and
+* goes back before anything paints. The track is `w-fit max-w-full min-w-0`,
+* so its box is the width it is given, a shrinking flex item's included,
+* never more than its labels need: the answer depends only on the room
+* around it, not on what it shows, and so can't flap at the boundary.
+*/
+function labelsFit(track) {
+	const iconsOnly = track.hasAttribute("data-icons-only");
+	if (iconsOnly) track.removeAttribute("data-icons-only");
+	const segments = Array.from(track.querySelectorAll(":scope > [data-slot=segmented-control-item]"));
+	let fits = true;
+	if (segments.length > 0) {
+		const style = getComputedStyle(track);
+		fits = segments[segments.length - 1].getBoundingClientRect().right - segments[0].getBoundingClientRect().left + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) - track.clientWidth <= .5;
+	}
+	if (fits) {
+		for (const label of Array.from(track.querySelectorAll("[data-slot=segmented-control-label]"))) if (label.scrollWidth - label.clientWidth > 1) {
+			fits = false;
+			break;
+		}
+	}
+	if (iconsOnly) track.setAttribute("data-icons-only", "");
+	return fits;
+}
+/**
+* Lays the track out and reports whether its segments run past its box. The
+* track comes from a callback ref, so a swapped element is measured too.
+*
+* With `iconsOnlyBelow="auto"` or a length, it decides here whether the
+* segments show only their icons, and sets `data-icons-only` on the track
+* (the presets are container queries in CSS and need nothing here). The
+* decision is taken synchronously, in the layout effect and in the observers'
+* callbacks, so the first frame and every resize paint the right layout.
+* Taken again when the track, a segment, the element it is measured against
+* (the parent for `auto`, the container for a length) or one of that
+* element's children resizes or comes and goes, a label, a count or the
+* selection changes, or a web font arrives.
+*
+* The overflow is the track's own `scrollWidth` against its `clientWidth`
+* after that decision, measured in the next frame.
+*/
+function useTrackFit(track, iconsOnlyBelow) {
+	const [overflowing, setOverflowing] = useState(false);
+	const measured = iconsOnlyBelow !== void 0 && !isIconsOnlyPreset(iconsOnlyBelow);
+	useLayoutEffect(() => {
+		if (!track || typeof ResizeObserver === "undefined") return void 0;
+		const reference = !measured ? null : iconsOnlyBelow === "auto" ? track.parentElement : queryContainerOf(track);
+		if (measured && iconsOnlyBelow !== "auto" && reference && lengthToPx(iconsOnlyBelow, reference) === void 0 && process.env.NODE_ENV !== "production") console.warn(`raft-ui: SegmentedControl iconsOnlyBelow="${iconsOnlyBelow}" is not a preset, "auto" or a px, rem or em length; the segments keep their labels.`);
+		const fitIcons = () => {
+			if (!measured) return;
+			let iconsOnly = false;
+			if (iconsOnlyBelow === "auto") iconsOnly = !labelsFit(track);
+			else if (reference) {
+				const threshold = lengthToPx(iconsOnlyBelow, reference);
+				iconsOnly = threshold !== void 0 && contentInlineSize(reference) < threshold;
+			}
+			if (iconsOnly !== track.hasAttribute("data-icons-only")) track.toggleAttribute("data-icons-only", iconsOnly);
+		};
+		let frame = 0;
+		const measure = () => {
+			frame = 0;
+			setOverflowing(track.scrollWidth - track.clientWidth > 1);
+		};
+		const schedule = () => {
+			if (frame === 0) frame = requestAnimationFrame(measure);
+		};
+		const update = () => {
+			fitIcons();
+			schedule();
+		};
+		const resize = new ResizeObserver(update);
+		const observeAll = () => {
+			resize.disconnect();
+			resize.observe(track);
+			for (const child of Array.from(track.children)) resize.observe(child);
+			if (reference) {
+				resize.observe(reference);
+				for (const child of Array.from(reference.children)) resize.observe(child);
+			}
+		};
+		observeAll();
+		const mutation = new MutationObserver(() => {
+			observeAll();
+			update();
+		});
+		mutation.observe(track, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributeFilter: ["data-checked"]
+		});
+		if (reference) mutation.observe(reference, { childList: true });
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		fonts?.addEventListener("loadingdone", update);
+		fitIcons();
+		measure();
+		return () => {
+			if (frame !== 0) cancelAnimationFrame(frame);
+			resize.disconnect();
+			mutation.disconnect();
+			fonts?.removeEventListener("loadingdone", update);
+			track.removeAttribute("data-icons-only");
+		};
+	}, [
+		track,
+		measured,
+		iconsOnlyBelow
+	]);
+	return overflowing;
+}
+/** In development, warns when segments that may show only their icons have none. */
+function useIconsOnlyWarning(ref, iconsOnlyBelow) {
+	useLayoutEffect(() => {
+		if (process.env.NODE_ENV === "production" || iconsOnlyBelow === void 0) return;
+		const items = ref.current?.querySelectorAll("[data-slot=segmented-control-item]") ?? [];
+		for (const item of Array.from(items)) if (!item.querySelector("svg, img")) {
+			console.warn("raft-ui: a SegmentedControl with iconsOnlyBelow has a segment with no icon; it would be left empty when the segments show only their icons. Give every segment an icon.");
+			return;
+		}
+	}, [ref, iconsOnlyBelow]);
+}
+function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default", className, ref, ...props }) {
+	const preset = isIconsOnlyPreset(iconsOnlyBelow);
 	const { root } = segmentedControl({
-		iconsOnlyBelow,
+		iconsOnlyBelow: preset ? iconsOnlyBelow : void 0,
+		iconsOnlyMeasured: iconsOnlyBelow !== void 0 && !preset ? true : void 0,
 		variant
 	});
+	const rootRef = useRef(null);
+	const [track, setTrack] = useState(null);
+	const [setRef] = useMergedRef(rootRef, setTrack, ref);
+	const overflowing = useTrackFit(track, iconsOnlyBelow);
+	useIconsOnlyWarning(rootRef, iconsOnlyBelow);
+	const value = props.value;
+	useLayoutEffect(() => {
+		const track = rootRef.current;
+		if (!overflowing || !track) return;
+		const checked = track.querySelector("[data-checked]");
+		if (!checked) return;
+		const trackLeft = track.getBoundingClientRect().left;
+		const box = checked.getBoundingClientRect();
+		const start = box.left - trackLeft + track.scrollLeft;
+		const end = start + box.width;
+		if (start < track.scrollLeft) track.scrollLeft = start;
+		else if (end > track.scrollLeft + track.clientWidth) track.scrollLeft = end - track.clientWidth;
+	}, [overflowing, value]);
 	return /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
 		value: iconsOnlyBelow !== void 0,
 		children: /* @__PURE__ */ jsx(RadioGroup$1, {
+			ref: setRef,
 			disabled,
 			"data-slot": "segmented-control",
+			"data-overflowing": overflowing ? "" : void 0,
 			className: root({ className }),
 			...props
 		})
@@ -4554,8 +4801,10 @@ const descriptionList = tv({
 	variants: { direction: {
 		vertical: {},
 		horizontal: { root: [
-			"grid items-baseline",
-			"max-sm:grid-cols-1 max-sm:gap-y-0.5",
+			"@container/description-list w-full grid items-baseline",
+			"[&>[data-slot=description-item]>*]:@max-sm/description-list:col-span-full",
+			"[&>[data-slot=description-item]>[data-slot=description-details]]:@max-sm/description-list:min-h-0",
+			"[&>[data-slot=description-item]+[data-slot=description-item]>[data-slot=description-term]]:@max-sm/description-list:mt-2",
 			"*:data-[slot=description-item]:contents",
 			"[&>[data-slot=description-item]>[data-slot=description-term]]:mb-0",
 			"[&>[data-slot=description-item]>[data-slot=description-term]]:max-w-40",
@@ -4774,16 +5023,33 @@ function CodeBlockBody({ children, className, render, ...props }) {
 * its own. Code that fits adds no Tab stop.
 */
 function CodeBlockPre({ render, ref, "aria-label": ariaLabel = "Code", ...props }) {
-	const preRef = useRef(null);
+	const [pre, setPre] = useState(null);
+	const preRef = useCallback((element) => setPre(element), []);
 	const [overflowing, setOverflowing] = useState(false);
-	useEffect(() => {
-		const pre = preRef.current;
+	useLayoutEffect(() => {
 		if (!pre) return;
-		const observer = new ResizeObserver(() => setOverflowing(pre.scrollWidth > pre.clientWidth));
-		observer.observe(pre);
-		for (const child of pre.children) observer.observe(child);
-		return () => observer.disconnect();
-	}, []);
+		const measure = () => setOverflowing(pre.scrollWidth > pre.clientWidth);
+		const resize = new ResizeObserver(measure);
+		const observe = () => {
+			resize.disconnect();
+			resize.observe(pre);
+			for (const child of pre.children) resize.observe(child);
+		};
+		observe();
+		const mutation = new MutationObserver(() => {
+			observe();
+			measure();
+		});
+		mutation.observe(pre, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		return () => {
+			resize.disconnect();
+			mutation.disconnect();
+		};
+	}, [pre]);
 	return useRender({
 		defaultTagName: "pre",
 		render,
@@ -5431,7 +5697,7 @@ const messageActionCard = tv({
 //#endregion
 //#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: ["p-3", "@container/action-card flex flex-col gap-2 px-3 pt-0 pb-3"],
 	panel: [
 		"h-(--collapsible-panel-height) overflow-hidden",
 		"transition-[height] duration-200 ease-out motion-reduce:transition-none",
@@ -5439,12 +5705,20 @@ const messageActionCardContent = tv({ slots: {
 	],
 	properties: [
 		"m-0 grid",
-		"max-sm:grid-cols-1 max-sm:gap-y-0.5",
+		"@max-sm/action-card:grid-cols-1",
 		"grid-cols-[minmax(88px,max-content)_minmax(0,1fr)] items-baseline gap-x-4 gap-y-0.5"
 	],
 	property: ["contents"],
-	propertyLabel: ["max-w-40 min-w-0 wrap-break-word", "text-footnote font-medium text-foreground-hint"],
-	propertyValue: ["m-0 min-w-0 wrap-break-word", "min-h-8 py-1.5 text-callout text-foreground"],
+	propertyLabel: [
+		"max-w-40 min-w-0 wrap-break-word",
+		"text-footnote font-medium text-foreground-hint",
+		"[[data-slot=message-action-card-property]+[data-slot=message-action-card-property]>&]:@max-sm/action-card:mt-2"
+	],
+	propertyValue: [
+		"m-0 min-w-0 wrap-break-word",
+		"min-h-8 py-1.5 text-callout text-foreground",
+		"@max-sm/action-card:min-h-0 @max-sm/action-card:py-0"
+	],
 	scopeList: ["mt-0 stack-y-1.5"],
 	scopeListViewport: ["overflow-y-auto overscroll-contain", "max-h-[164px] stack-y-1.5 pr-1"],
 	scopeListLabel: ["text-footnote font-medium text-foreground-hint"],
@@ -5916,7 +6190,7 @@ function MessageAttachmentAction({ className, render, ...props }) {
 //#region src/components/message-attachment/message-image-gallery.recipe.ts
 const messageImageGallery = tv({
 	slots: {
-		root: ["max-w-[min(360px,calc(100vw-112px))] stack-y-1 md:max-w-[360px]"],
+		root: ["@container/gallery w-full max-w-[min(360px,100%)] stack-y-1"],
 		row: ["grid", "gap-1"],
 		item: [
 			"group/img relative overflow-hidden text-left",
@@ -5941,28 +6215,24 @@ const messageImageGallery = tv({
 		{
 			count: 1,
 			single: false,
-			class: { row: "auto-rows-[8rem] sm:auto-rows-[9rem]" }
+			class: { row: "auto-rows-[8rem] @min-[360px]/gallery:auto-rows-[9rem]" }
 		},
 		{
 			count: 2,
 			single: false,
-			class: { row: "auto-rows-[8rem] sm:auto-rows-[9rem]" }
+			class: { row: "auto-rows-[8rem] @min-[360px]/gallery:auto-rows-[9rem]" }
 		},
 		{
 			count: 3,
 			single: false,
-			class: { row: "auto-rows-[7rem] sm:auto-rows-[8rem]" }
-		},
-		{
-			count: 3,
-			class: { row: "md:grid-cols-2" }
+			class: { row: "auto-rows-[7rem] @min-[360px]/gallery:auto-rows-[8rem]" }
 		}
 	],
 	variants: {
 		count: {
 			1: { row: "grid-cols-1" },
 			2: { row: "grid-cols-2" },
-			3: { row: "grid-cols-2 md:grid-cols-3" }
+			3: { row: "grid-cols-2" }
 		},
 		/** A single-image gallery keeps the image's proportions instead of a row height. */
 		single: { true: { item: ["inline-block w-fit max-w-[26rem] justify-self-start", "rounded-container"] } },
@@ -6136,7 +6406,7 @@ const messageVideoPreview = tv({ slots: {
 	root: [
 		"group/video relative aspect-video w-full overflow-hidden",
 		"bg-black text-left",
-		"max-w-[min(360px,calc(100vw-112px))] rounded-container border border-line-hairline bg-clip-padding"
+		"max-w-[min(360px,100%)] rounded-container border border-line-hairline bg-clip-padding"
 	],
 	media: "block size-full  bg-black object-contain",
 	fallback: "flex size-full  items-center justify-center bg-black text-white",
@@ -6323,14 +6593,14 @@ action: {
 */
 const messageForwardedBundleGallery = tv({
 	slots: {
-		root: ["min-w-0"],
+		root: ["@container/bundle w-full min-w-0"],
 		row: ["grid gap-2"],
 		tile: ["[&_img]:block [&_img]:size-full [&_img]:object-cover"]
 	},
 	variants: { count: {
-		1: { row: "grid-cols-1 auto-rows-[8rem] sm:auto-rows-[9rem]" },
-		2: { row: "grid-cols-2 auto-rows-[8rem] sm:auto-rows-[9rem]" },
-		3: { row: "grid-cols-2 auto-rows-[7rem] sm:auto-rows-[8rem] md:grid-cols-3" }
+		1: { row: "grid-cols-1 auto-rows-[8rem] @min-[360px]/bundle:auto-rows-[9rem]" },
+		2: { row: "grid-cols-2 auto-rows-[8rem] @min-[360px]/bundle:auto-rows-[9rem]" },
+		3: { row: "grid-cols-2 auto-rows-[7rem] @min-[360px]/bundle:auto-rows-[8rem] @min-[360px]/bundle:grid-cols-3" }
 	} }
 });
 //#endregion
@@ -12741,64 +13011,6 @@ function useMemoWithPrevious(fn, deps) {
 	});
 }
 //#endregion
-//#region src/components/virtual-list/hooks/use-merged-ref.ts
-/**
-* Merges refs into one setter. Returns `[setRef, getRef]`: `setRef(el)` stores `el` and passes it to
-* every ref; `getRef()` reads the stored element. When a ref changes between renders (checked while
-* rendering), the old one is cleared and the new one gets the stored element at once. The setter
-* calls ref callbacks itself, so what they return is ignored.
-*/
-function useMergedRef(...refs) {
-	const entries = useMemo(() => [], []);
-	const elementRef = useRef(null);
-	const getRef = useCallback(() => elementRef.current, []);
-	const clearEntry = useCallback((entry) => {
-		if (entry != null) {
-			if (entry.type === "RefCallback") entry.ref(null);
-			else entry.ref.current = null;
-		}
-	}, []);
-	const applyStoredElement = useCallback((ref) => {
-		if (typeof ref == "function") ref(getRef());
-		else ref.current = getRef();
-	}, [getRef]);
-	const setRef = useCallback((el) => {
-		elementRef.current = el;
-		for (const entry of entries) if (entry == null) continue;
-		else if (entry.type === "RefObject") entry.ref.current = el;
-		else entry.ref(el);
-	}, [entries]);
-	for (let i = 0; i < refs.length; i++) {
-		const ref = refs[i];
-		const entry = entries[i];
-		if (ref == null) {
-			clearEntry(entry);
-			entries[i] = null;
-		} else {
-			if (entry && entry.ref === ref) continue;
-			if (typeof ref == "function") {
-				if (entry != null) clearEntry(entry);
-				entries[i] = {
-					type: "RefCallback",
-					ref
-				};
-			} else {
-				if (entry != null) clearEntry(entry);
-				entries[i] = {
-					type: "RefObject",
-					ref
-				};
-			}
-			applyStoredElement(ref);
-		}
-	}
-	for (let i = refs.length; i < entries.length; i++) {
-		clearEntry(entries[i]);
-		entries[i] = null;
-	}
-	return [setRef, getRef];
-}
-//#endregion
 //#region src/components/virtual-list/hooks/use-non-passive-wheel.ts
 /**
 * Adds a non-passive `wheel` listener (so it may call `preventDefault`) to the element `getTarget`
@@ -14868,19 +15080,19 @@ function VirtualList(props) {
 //#endregion
 //#region src/components/tasks/tasks-panel.recipe.ts
 const tasksPanel = tv({ slots: {
-	root: ["flex min-h-0 min-w-0 flex-1 flex-col", "bg-layer-canvas text-foreground"],
+	root: ["@container/tasks flex min-h-0 min-w-0 flex-1 flex-col", "bg-layer-canvas text-foreground"],
 	toolbar: [
 		"grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2",
-		"md:flex md:flex-wrap md:items-center md:justify-between",
+		"@min-md/tasks:flex @min-md/tasks:flex-wrap @min-md/tasks:items-center @min-md/tasks:justify-between",
 		"min-h-14 border-b border-line-seam bg-layer-canvas px-5 py-3",
-		"max-md:px-4"
+		"@max-md/tasks:px-4"
 	],
 	toolbarGroup: ["flex flex-wrap items-center gap-2"],
 	toolbarNewTask: ["col-start-1 row-start-1 justify-self-start", "flex flex-wrap items-center gap-2"],
 	toolbarFilters: [
 		"col-span-2 row-start-2 min-w-0",
 		"only:col-auto only:row-auto",
-		"md:mr-auto",
+		"@min-md/tasks:mr-auto",
 		"flex flex-wrap items-center gap-2"
 	],
 	toolbarView: ["col-start-2 row-start-1 justify-self-end", "flex flex-wrap items-center gap-2"],
@@ -14895,7 +15107,7 @@ const tasksPanel = tv({ slots: {
 		"min-h-0 flex-1 overflow-auto overscroll-contain p-4",
 		"pb-[calc(1rem+env(safe-area-inset-bottom,0px))]",
 		"bg-layer-canvas px-5",
-		"max-md:px-4"
+		"@max-md/tasks:px-4"
 	],
 	empty: ["flex h-full flex-col items-center justify-center"]
 } });
@@ -15067,7 +15279,7 @@ const taskChip = tv({
 			closed: { root: ["bg-task-status-closed-soft"] }
 		},
 		variant: {
-			default: { root: ["h-[22px] gap-1.5 rounded-chip px-[7px] py-0", "text-[12px] leading-4"] },
+			default: { root: ["h-[22px] items-baseline gap-1.5 rounded-chip px-[7px] py-[3px] [&>svg]:self-center", "text-[12px] leading-4"] },
 			inline: {}
 		},
 		size: {
@@ -15088,7 +15300,7 @@ const taskChip = tv({
 	}, {
 		variant: "default",
 		size: "sm",
-		class: { root: ["h-5 gap-1 px-[5px]"] }
+		class: { root: ["h-5 gap-1 px-[5px] py-0.5"] }
 	}],
 	defaultVariants: {
 		variant: "default",
@@ -15471,9 +15683,7 @@ function ActivityInboxSidebar({ className, children, ...props }) {
 const activityInboxToolbar = tv({ slots: {
 	controls: ["flex shrink-0 flex-nowrap items-center gap-2", "bg-layer-canvas px-4 py-3"],
 	selectionToolbar: [
-		"flex min-h-11 shrink-0 items-center gap-2",
-		"max-md:flex-wrap max-md:py-2",
-		"md:h-11 md:flex-nowrap md:py-0",
+		"flex min-h-11 shrink-0 flex-wrap items-center gap-2 pt-1.5 pb-[5px]",
 		"border-b border-line-hairline bg-layer-canvas px-4",
 		"**:data-[activity-inbox-action=sort]:text-foreground-muted",
 		"**:data-[activity-inbox-action=sort]:hover:text-foreground"
@@ -15602,7 +15812,7 @@ const searchEntity = tv({ slots: {
 	entity: [
 		"flex min-w-0 w-full items-center gap-3 p-3 text-left transition-colors",
 		"relative rounded-none border-0 bg-transparent px-4 py-3 text-foreground shadow-none",
-		"max-md:min-h-16",
+		"pointer-coarse:min-h-16",
 		"not-first:before:absolute not-first:before:top-0 not-first:before:right-0 not-first:before:left-[55px] not-first:before:border-t not-first:before:border-line-hairline",
 		"hover:bg-fill-subtle active:bg-fill-medium",
 		"not-data-[selected=true]:data-popup-open:bg-fill-subtle",

package/dist/style.css

@@ -771,14 +771,14 @@
   }
 }
 
-@media (width >= 40rem) {
-  .r-steps--horizontal {
-    flex-wrap: wrap;
-    row-gap: 8px;
-  }
+.r-steps--horizontal {
+  flex-wrap: wrap;
+  row-gap: 8px;
+  inline-size: 100%;
+  container-type: inline-size;
 }
 
-@media (width < 40rem) {
+@container (width < 40rem) {
   .r-steps--horizontal > .r-step {
     --r-steps-connector-gap: 6px;
     --r-steps-connector-min-width: 8px;

package/dist/styles.css

@@ -225,6 +225,7 @@
   --color-brand-950: var(--brand-950);
   --color-brand-strong: var(--brand-strong);
   --color-brand-soft: var(--brand-soft);
+  --color-selection: var(--selection);
   --color-brand-hover: var(--brand-hover);
   --color-brand-active: var(--brand-active);
 
@@ -561,11 +562,12 @@ textarea:-webkit-autofill:disabled {
    yellow of a highlight and a 2px yellow underline; the passage of the open
    discussion gets the full yellow with ink type, like a search hit, in both
    modes. `--brand-400` is the `brand` role (what `bg-brand` paints):
-   `--color-brand` is an inline theme value and emits no variable. */
+   `--color-brand` is an inline theme value and emits no variable. In dark
+   mode the wash is `--selection` (brand at 22%), kept in one place. */
 ::highlight(raft-comment) {
   background-color: light-dark(
     color-mix(in oklch, var(--brand-400) 35%, transparent),
-    color-mix(in oklch, var(--brand-400) 22%, transparent)
+    var(--selection)
   );
   text-decoration-line: underline;
   text-decoration-color: var(--brand-400);