@botiverse/raft-ui 0.63.1 → 0.65.0

package/dist/components/input-group/input-group.mjs

@@ -8,7 +8,7 @@ const inputGroup = tv({
 		root: [
 			"group/input-group relative flex w-full min-w-0 items-center",
 			"has-data-[input-group-trim=inline-end]:[--ig-control-pr:0]",
-			"h-control overflow-hidden rounded-control border-[1.5px] border-line-field bg-layer-card text-foreground",
+			"h-control overflow-hidden rounded-(--control-radius) border-[1.5px] border-line-field bg-layer-card text-foreground",
 			"shadow-none transition-shadow duration-90 ease-out has-focus-visible:shadow-focus",
 			"has-[[data-slot=input-group-control][data-invalid]]:border-danger-strong",
 			"has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-line-hairline has-[[data-slot=input-group-control]:disabled]:bg-fill-muted",

package/dist/components/lightbox/lightbox.mjs

@@ -28,7 +28,7 @@ const lightbox = tv({ slots: {
 	],
 	toolbar: [
 		"pointer-events-auto shrink-0 flex items-center gap-3",
-		"h-[calc(56px+env(safe-area-inset-top,0px))] pt-[env(safe-area-inset-top,0px)]",
+		"h-[calc(var(--header-height)+env(safe-area-inset-top,0px))] pt-[env(safe-area-inset-top,0px)]",
 		"pl-[calc(16px+env(safe-area-inset-left,0px))] pr-[calc(16px+env(safe-area-inset-right,0px))]",
 		"**:data-lightbox-close:static **:data-lightbox-close:inset-auto",
 		"**:data-lightbox-close:top-auto **:data-lightbox-close:right-auto",

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

@@ -32,8 +32,8 @@ const listRow = tv({
 	},
 	variants: {
 		variant: {
-			default: { root: "min-h-16 [--list-row-rule-start:63px]" },
-			plain: { root: "[--list-row-rule-start:16px]" },
+			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]" },
 			entry: { root: "" }
 		},
 		interactive: {

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

@@ -24,7 +24,7 @@ const messageActionCardContent = tv({ slots: {
 		"@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"],
+	scopeListViewport: ["overflow-y-auto overscroll-contain", "max-h-[136px] stack-y-1.5 pr-1"],
 	scopeListLabel: ["text-footnote font-medium text-foreground-hint"],
 	scope: ["min-w-0 border p-1.5", "rounded-control border-line-hairline bg-layer-card px-2.5 py-2"],
 	scopeName: ["break-all font-mono", "text-mono-meta font-normal text-foreground"],

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

@@ -11,7 +11,7 @@ const messageActionCard = tv({
 		headerIcon: [
 			"flex shrink-0 items-center justify-center",
 			"[&>svg]:shrink-0",
-			"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
+			"size-[27px] rounded-chip bg-fill-muted text-foreground-muted",
 			"[&>svg]:size-3.5"
 		],
 		headerTitle: ["min-w-0 flex-1", "pt-[calc((27px-1lh)/2)]"],

package/dist/components/message-item/index.d.mts

@@ -1,6 +1,6 @@
 import { MessageItem, MessageItemProps } from "./message-item-root.mjs";
 import { MessageItemAvatarSlot, MessageItemAvatarSlotProps, MessageItemContinuationTime, MessageItemContinuationTimeProps, MessageItemGutter, MessageItemGutterProps } from "./message-item-gutter.mjs";
-import { MessageItemAttachments, MessageItemAttachmentsProps, MessageItemBody, MessageItemBodyProps, MessageItemContent, MessageItemContentProps, MessageItemEdited, MessageItemEditedProps, MessageItemEmbedded, MessageItemEmbeddedProps, MessageItemFooter, MessageItemFooterProps, MessageItemSearchMatch, MessageItemSearchMatchProps } from "./message-item-content.mjs";
+import { MessageItemAttachments, MessageItemAttachmentsProps, MessageItemBody, MessageItemBodyProps, MessageItemContent, MessageItemContentProps, MessageItemEdited, MessageItemEditedProps, MessageItemEmbedded, MessageItemEmbeddedProps, MessageItemFooter, MessageItemFooterProps, MessageItemSearchMatch, MessageItemSearchMatchProps, MessageItemTrailing, MessageItemTrailingProps } from "./message-item-content.mjs";
 import { MessageItemHeader, MessageItemHeaderProps, MessageItemInlineStatus, MessageItemInlineStatusProps, MessageItemMeta, MessageItemMetaProps, MessageItemSender, MessageItemSenderBadges, MessageItemSenderBadgesProps, MessageItemSenderButton, MessageItemSenderButtonProps, MessageItemSenderGroup, MessageItemSenderGroupProps, MessageItemSenderProps, MessageItemTime, MessageItemTimeProps } from "./message-item-header.mjs";
 import { MessageItemDelegatedAvatar, MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, MessageItemDelegatedByNameProps, MessageItemDelegatedByProps } from "./message-item-delegated.mjs";
 import { MessageItemToolbar, MessageItemToolbarButton, MessageItemToolbarButtonProps, MessageItemToolbarProps } from "./message-item-toolbar.mjs";
@@ -9,4 +9,4 @@ import { MessageReactionAddButton, MessageReactionAddButtonProps, MessageReactio
 import { MessageReferenceChipVariant, MessageReferenceTextVariant } from "./message-reference.recipe.mjs";
 import { MessageReferenceChip, MessageReferenceChipProps, MessageReferenceIcon, MessageReferenceIconProps, MessageReferenceIndicator, MessageReferenceIndicatorProps, MessageReferenceLabel, MessageReferenceLabelProps, MessageReferencePending, MessageReferencePendingProps, MessageReferenceReadMark, MessageReferenceReadMarkProps, MessageReferenceSuffix, MessageReferenceSuffixProps, MessageReferenceText, MessageReferenceTextProps, MessageReferenceUnavailable, MessageReferenceUnavailableProps } from "./message-reference.mjs";
 import { MessageMultiSelect, MessageMultiSelectCheckbox, MessageMultiSelectCheckboxProps, MessageMultiSelectProps, MessageMultiSelectToolbar, MessageMultiSelectToolbarActions, MessageMultiSelectToolbarActionsProps, MessageMultiSelectToolbarProps } from "./message-multi-select.mjs";
-export { MessageItem, MessageItemAttachments, type MessageItemAttachmentsProps, MessageItemAvatarSlot, type MessageItemAvatarSlotProps, MessageItemBadge, type MessageItemBadgeProps, MessageItemBadgeSeparator, type MessageItemBadgeSeparatorProps, type MessageItemBadgeStatus, MessageItemBody, type MessageItemBodyProps, MessageItemContent, type MessageItemContentProps, MessageItemContinuationTime, type MessageItemContinuationTimeProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageItemEdited, type MessageItemEditedProps, MessageItemEmbedded, type MessageItemEmbeddedProps, MessageItemFooter, type MessageItemFooterProps, MessageItemGutter, type MessageItemGutterProps, MessageItemHeader, type MessageItemHeaderProps, MessageItemInlineStatus, type MessageItemInlineStatusProps, MessageItemMeta, type MessageItemMetaProps, type MessageItemProps, MessageItemReadReceipt, type MessageItemReadReceiptProps, MessageItemSavedIndicator, type MessageItemSavedIndicatorProps, MessageItemSearchMatch, type MessageItemSearchMatchProps, MessageItemSender, MessageItemSenderBadges, type MessageItemSenderBadgesProps, MessageItemSenderButton, type MessageItemSenderButtonProps, MessageItemSenderGroup, type MessageItemSenderGroupProps, type MessageItemSenderProps, MessageItemTime, type MessageItemTimeProps, MessageItemToolbar, MessageItemToolbarButton, type MessageItemToolbarButtonProps, type MessageItemToolbarProps, MessageMultiSelect, MessageMultiSelectCheckbox, type MessageMultiSelectCheckboxProps, type MessageMultiSelectProps, MessageMultiSelectToolbar, MessageMultiSelectToolbarActions, type MessageMultiSelectToolbarActionsProps, type MessageMultiSelectToolbarProps, MessageReactionAddButton, type MessageReactionAddButtonProps, MessageReactionChip, type MessageReactionChipProps, MessageReactionCount, type MessageReactionCountProps, MessageReactionErrorIndicator, type MessageReactionErrorIndicatorProps, MessageReactionGlyph, type MessageReactionGlyphProps, MessageReactionPickerContent, type MessageReactionPickerContentProps, MessageReactionPickerStatic, type MessageReactionPickerStaticProps, MessageReactionQuickButton, type MessageReactionQuickButtonProps, MessageReactionQuickRow, type MessageReactionQuickRowProps, MessageReactionTooltipContent, type MessageReactionTooltipContentProps, MessageReactionTooltipMeta, type MessageReactionTooltipMetaProps, MessageReactionTooltipName, type MessageReactionTooltipNameProps, MessageReactionTooltipNameText, type MessageReactionTooltipNameTextProps, MessageReactionTooltipNames, type MessageReactionTooltipNamesProps, MessageReactionTooltipSeparator, type MessageReactionTooltipSeparatorProps, MessageReferenceChip, type MessageReferenceChipProps, type MessageReferenceChipVariant, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceIndicator, type MessageReferenceIndicatorProps, MessageReferenceLabel, type MessageReferenceLabelProps, MessageReferencePending, type MessageReferencePendingProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, MessageReferenceSuffix, type MessageReferenceSuffixProps, MessageReferenceText, type MessageReferenceTextProps, type MessageReferenceTextVariant, MessageReferenceUnavailable, type MessageReferenceUnavailableProps };
+export { MessageItem, MessageItemAttachments, type MessageItemAttachmentsProps, MessageItemAvatarSlot, type MessageItemAvatarSlotProps, MessageItemBadge, type MessageItemBadgeProps, MessageItemBadgeSeparator, type MessageItemBadgeSeparatorProps, type MessageItemBadgeStatus, MessageItemBody, type MessageItemBodyProps, MessageItemContent, type MessageItemContentProps, MessageItemContinuationTime, type MessageItemContinuationTimeProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageItemEdited, type MessageItemEditedProps, MessageItemEmbedded, type MessageItemEmbeddedProps, MessageItemFooter, type MessageItemFooterProps, MessageItemGutter, type MessageItemGutterProps, MessageItemHeader, type MessageItemHeaderProps, MessageItemInlineStatus, type MessageItemInlineStatusProps, MessageItemMeta, type MessageItemMetaProps, type MessageItemProps, MessageItemReadReceipt, type MessageItemReadReceiptProps, MessageItemSavedIndicator, type MessageItemSavedIndicatorProps, MessageItemSearchMatch, type MessageItemSearchMatchProps, MessageItemSender, MessageItemSenderBadges, type MessageItemSenderBadgesProps, MessageItemSenderButton, type MessageItemSenderButtonProps, MessageItemSenderGroup, type MessageItemSenderGroupProps, type MessageItemSenderProps, MessageItemTime, type MessageItemTimeProps, MessageItemToolbar, MessageItemToolbarButton, type MessageItemToolbarButtonProps, type MessageItemToolbarProps, MessageItemTrailing, type MessageItemTrailingProps, MessageMultiSelect, MessageMultiSelectCheckbox, type MessageMultiSelectCheckboxProps, type MessageMultiSelectProps, MessageMultiSelectToolbar, MessageMultiSelectToolbarActions, type MessageMultiSelectToolbarActionsProps, type MessageMultiSelectToolbarProps, MessageReactionAddButton, type MessageReactionAddButtonProps, MessageReactionChip, type MessageReactionChipProps, MessageReactionCount, type MessageReactionCountProps, MessageReactionErrorIndicator, type MessageReactionErrorIndicatorProps, MessageReactionGlyph, type MessageReactionGlyphProps, MessageReactionPickerContent, type MessageReactionPickerContentProps, MessageReactionPickerStatic, type MessageReactionPickerStaticProps, MessageReactionQuickButton, type MessageReactionQuickButtonProps, MessageReactionQuickRow, type MessageReactionQuickRowProps, MessageReactionTooltipContent, type MessageReactionTooltipContentProps, MessageReactionTooltipMeta, type MessageReactionTooltipMetaProps, MessageReactionTooltipName, type MessageReactionTooltipNameProps, MessageReactionTooltipNameText, type MessageReactionTooltipNameTextProps, MessageReactionTooltipNames, type MessageReactionTooltipNamesProps, MessageReactionTooltipSeparator, type MessageReactionTooltipSeparatorProps, MessageReferenceChip, type MessageReferenceChipProps, type MessageReferenceChipVariant, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceIndicator, type MessageReferenceIndicatorProps, MessageReferenceLabel, type MessageReferenceLabelProps, MessageReferencePending, type MessageReferencePendingProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, MessageReferenceSuffix, type MessageReferenceSuffixProps, MessageReferenceText, type MessageReferenceTextProps, type MessageReferenceTextVariant, MessageReferenceUnavailable, type MessageReferenceUnavailableProps };

package/dist/components/message-item/message-item-content.d.mts

@@ -19,4 +19,18 @@ export type MessageItemAttachmentsProps = useRender.ComponentProps<"div">;
 export declare function MessageItemAttachments({ className, render, ...props }: MessageItemAttachmentsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type MessageItemFooterProps = useRender.ComponentProps<"div">;
 export declare function MessageItemFooter({ className, render, ...props }: MessageItemFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageItemTrailingProps = useRender.ComponentProps<"span">;
+/**
+ * Something small that ends the message (the faces of the agents that read it,
+ * a read mark): the last child of `MessageItemBody`. It takes no column: it sits
+ * at the inline end of the body's last line, and the last line keeps room for it,
+ * so the text wraps under it only when that line is full. When the body ends with
+ * a block that isn't text (a code block, a table, an image), it sits on a line of
+ * its own under that block. Logical properties, so it is right in RTL too.
+ *
+ * It finds the body's last block itself and stamps it (`data-trailing-line`, or
+ * `data-trailing="block"` on the body), so the CSS needs no structural selector,
+ * and one shared ResizeObserver sets the room (`--message-trailing-width`).
+ */
+export declare function MessageItemTrailing({ className, render, ref, ...props }: MessageItemTrailingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/components/message-item/message-item-content.mjs

@@ -1,4 +1,5 @@
 import { messageItem } from "./message-item.recipe.mjs";
+import { useCallback, useLayoutEffect, useRef } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/message-item/message-item-content.tsx
@@ -77,5 +78,149 @@ function MessageItemFooter({ className, render, ...props }) {
 		state: { slot: "message-item-footer" }
 	});
 }
+/** The space kept before a trailing slot on the body's last line. */
+const TRAILING_GAP_PX = 8;
+const BODY_SELECTOR = "[data-slot=\"message-item-body\"]";
+const TEXT_BLOCKS = /* @__PURE__ */ new Set([
+	"P",
+	"H1",
+	"H2",
+	"H3",
+	"H4",
+	"H5",
+	"H6",
+	"SPAN"
+]);
+const BLOCKS = /* @__PURE__ */ new Set([
+	...TEXT_BLOCKS,
+	"UL",
+	"OL",
+	"BLOCKQUOTE",
+	"PRE",
+	"TABLE",
+	"DIV",
+	"FIGURE",
+	"IMG"
+]);
+const slotOfBody = /* @__PURE__ */ new WeakMap();
+const pendingWidths = /* @__PURE__ */ new Map();
+const pendingStamps = /* @__PURE__ */ new Map();
+let frame = 0;
+function flush() {
+	frame = 0;
+	for (const [body, width] of pendingWidths) body.style.setProperty("--message-trailing-width", `${Math.ceil(width) + TRAILING_GAP_PX}px`);
+	for (const [body, slot] of pendingStamps) if (body.contains(slot)) stampLastLine(body, slot);
+	pendingWidths.clear();
+	pendingStamps.clear();
+}
+let sharedObserver = null;
+function trailingObserver() {
+	if (typeof ResizeObserver === "undefined") return null;
+	sharedObserver ??= new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const target = entry.target;
+			const slot = slotOfBody.get(target);
+			if (slot) {
+				pendingStamps.set(target, slot);
+				continue;
+			}
+			const body = target.closest(BODY_SELECTOR);
+			if (!body) continue;
+			const box = entry.borderBoxSize?.[0];
+			pendingWidths.set(body, box ? box.inlineSize : entry.contentRect.width);
+		}
+		if (!frame) frame = requestAnimationFrame(flush);
+	});
+	return sharedObserver;
+}
+/** Marks the text block the slot ends (`data-trailing-line`), or the body as ending in a block. */
+function stampLastLine(body, slot) {
+	const block = lastBlock(body, slot);
+	const line = block ? lastLine(block) : null;
+	const previous = body.querySelector("[data-trailing-line]");
+	if (previous && previous !== line) previous.removeAttribute("data-trailing-line");
+	if (line && !line.hasAttribute("data-trailing-line")) line.setAttribute("data-trailing-line", "");
+	const ending = line ? "line" : "block";
+	if (body.dataset.trailing !== ending) body.dataset.trailing = ending;
+}
+/** The body's last block before the slot, through wrappers that only hold blocks (a markdown root). */
+function lastBlock(body, slot) {
+	let el = slot.previousElementSibling;
+	while (el && !BLOCKS.has(el.tagName)) el = el.previousElementSibling;
+	while (el && el.tagName === "DIV" && !el.hasAttribute("data-slot") && el.lastElementChild && BLOCKS.has(el.lastElementChild.tagName)) el = el.lastElementChild;
+	return el && body.contains(el) ? el : null;
+}
+/** The text block that ends a last block, or null when it ends with something else. */
+function lastLine(block) {
+	if (TEXT_BLOCKS.has(block.tagName)) return block;
+	if (block.tagName === "UL" || block.tagName === "OL") {
+		const item = block.lastElementChild;
+		if (!item || item.tagName !== "LI") return null;
+		const inner = item.lastElementChild;
+		if (inner && inner.tagName === "P") return inner;
+		return inner && BLOCKS.has(inner.tagName) ? null : item;
+	}
+	if (block.tagName === "BLOCKQUOTE") {
+		const inner = block.lastElementChild;
+		return inner && inner.tagName === "P" ? inner : null;
+	}
+	return null;
+}
+/**
+* Something small that ends the message (the faces of the agents that read it,
+* a read mark): the last child of `MessageItemBody`. It takes no column: it sits
+* at the inline end of the body's last line, and the last line keeps room for it,
+* so the text wraps under it only when that line is full. When the body ends with
+* a block that isn't text (a code block, a table, an image), it sits on a line of
+* its own under that block. Logical properties, so it is right in RTL too.
+*
+* It finds the body's last block itself and stamps it (`data-trailing-line`, or
+* `data-trailing="block"` on the body), so the CSS needs no structural selector,
+* and one shared ResizeObserver sets the room (`--message-trailing-width`).
+*/
+function MessageItemTrailing({ className, render, ref, ...props }) {
+	const { trailing } = messageItem();
+	const own = useRef(null);
+	useLayoutEffect(() => {
+		const slot = own.current;
+		const body = slot?.closest(BODY_SELECTOR);
+		if (slot && body) stampLastLine(body, slot);
+	});
+	useLayoutEffect(() => {
+		const slot = own.current;
+		const body = slot?.closest(BODY_SELECTOR);
+		const observer = trailingObserver();
+		if (slot && observer) observer.observe(slot);
+		if (slot && body && observer) {
+			slotOfBody.set(body, slot);
+			observer.observe(body);
+		}
+		return () => {
+			if (slot && observer) observer.unobserve(slot);
+			if (body) {
+				if (observer) observer.unobserve(body);
+				slotOfBody.delete(body);
+				body.querySelector("[data-trailing-line]")?.removeAttribute("data-trailing-line");
+				delete body.dataset.trailing;
+				body.style.removeProperty("--message-trailing-width");
+			}
+		};
+	}, []);
+	const setRef = useCallback((el) => {
+		own.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	}, [ref]);
+	const defaultProps = {
+		className: trailing({ className }),
+		ref: setRef
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-trailing" }
+	});
+}
 //#endregion
-export { MessageItemAttachments, MessageItemBody, MessageItemContent, MessageItemEdited, MessageItemEmbedded, MessageItemFooter, MessageItemSearchMatch };
+export { MessageItemAttachments, MessageItemBody, MessageItemContent, MessageItemEdited, MessageItemEmbedded, MessageItemFooter, MessageItemSearchMatch, MessageItemTrailing };

package/dist/components/message-item/message-item.recipe.d.mts

@@ -25,6 +25,7 @@ export declare const messageItem: import("tailwind-variants/lite").TVReturnType<
   delegatedByButton: string[];
   delegatedAvatar: string[];
   edited: string[];
+  trailing: string[];
   body: string[];
   searchMatch: string[];
   embedded: string[];
@@ -57,6 +58,7 @@ export declare const messageItem: import("tailwind-variants/lite").TVReturnType<
   delegatedByButton: string[];
   delegatedAvatar: string[];
   edited: string[];
+  trailing: string[];
   body: string[];
   searchMatch: string[];
   embedded: string[];
@@ -89,6 +91,7 @@ export declare const messageItem: import("tailwind-variants/lite").TVReturnType<
   delegatedByButton: string[];
   delegatedAvatar: string[];
   edited: string[];
+  trailing: string[];
   body: string[];
   searchMatch: string[];
   embedded: string[];

package/dist/components/message-item/message-item.recipe.mjs

@@ -81,6 +81,7 @@ const messageItem = tv({
 			"dark:shadow-[0_0_0_3px_var(--mi-row-fill,transparent),0_0_0_3px_var(--layer-canvas)]"
 		],
 		edited: ["ms-1 whitespace-nowrap", "text-caption text-foreground-hint"],
+		trailing: ["absolute end-0 bottom-0 z-10 flex h-lh items-center", "select-none! **:select-none!"],
 		body: [
 			"wrap-break-word select-text",
 			"**:select-text",
@@ -95,13 +96,13 @@ const messageItem = tv({
 			"absolute z-20 flex items-center",
 			"opacity-(--mi-toolbar-opacity,0)",
 			"[pointer-events:var(--mi-toolbar-pe,none)]",
-			"top-[-18px] right-3 gap-1 overflow-visible rounded-container p-1",
+			"top-[-18px] md:pointer-fine:top-[calc(-1*(var(--control-height)+8px)/2)] right-3 gap-1 overflow-visible rounded-container p-1",
 			"bg-layer-popover ring-1 ring-line-seam ring-inset shadow-float"
 		],
 		toolbarButton: [
 			"inline-flex shrink-0 items-center justify-center",
 			"[&_svg]:shrink-0",
-			"size-7 rounded-chip border-0 bg-transparent p-0",
+			"size-7 rounded-chip md:pointer-fine:size-control md:pointer-fine:rounded-control border-0 bg-transparent p-0",
 			"text-foreground-muted hover:bg-fill-medium active:bg-fill-medium",
 			"data-popup-open:bg-fill-medium data-active:text-foreground",
 			"outline-none focus-visible:shadow-focus",

package/dist/components/message-item/message-reaction.recipe.mjs

@@ -45,20 +45,21 @@ const messageReaction = tv({ slots: {
 	],
 	quickRow: [
 		"flex shrink-0 items-center",
-		"justify-between gap-0.5 bg-layer-popover px-0.75 py-0",
-		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0 *:[[role=menuitem]]:justify-center"
+		"justify-start gap-0.5 bg-layer-popover p-0",
+		"[&>[role=menuitem]]:size-9 md:pointer-fine:[&>[role=menuitem]]:size-control [&>[role=menuitem]]:p-0 *:[[role=menuitem]]:justify-center"
 	],
 	quickButton: [
 		"flex items-center justify-center",
 		"bg-transparent transition-colors",
 		"size-9 rounded-chip p-0 text-xl leading-none text-foreground-muted",
+		"md:pointer-fine:size-control md:pointer-fine:rounded-control",
 		"hover:bg-brand-soft data-highlighted:bg-brand-soft active:bg-brand-soft",
 		"outline-none focus-visible:shadow-focus"
 	],
 	pickerContent: [
 		"inline-flex items-center",
 		"min-w-0 flex-row gap-0.5 p-1",
-		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0"
+		"[&>[role=menuitem]]:size-9 md:pointer-fine:[&>[role=menuitem]]:size-control [&>[role=menuitem]]:p-0"
 	],
 	pickerStatic: [
 		"inline-flex items-center",

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

@@ -41,7 +41,9 @@ const messageListJump = tv({
 			"rounded-s-none border-s-0",
 			"text-foreground-muted hover:text-foreground",
 			"[&_svg:not([class*='size-'])]:size-4",
-			"after:-inset-y-[calc(--spacing(1.5)+1.5px)] after:right-[calc(-0.75rem-1.5px)] after:left-0"
+			"after:-inset-y-[calc(--spacing(1.5)+1.5px)] after:right-[calc(-0.75rem-1.5px)] after:left-0",
+			"md:pointer-fine:after:-inset-y-[calc(var(--control-hit-inset)+1.5px)]",
+			"md:pointer-fine:after:right-[calc(-2*var(--control-hit-inset)-1.5px)] md:pointer-fine:after:left-0"
 		]
 	},
 	variants: { side: {

package/dist/components/mode-bar/mode-bar.mjs

@@ -15,7 +15,7 @@ import { useRender } from "@base-ui/react/use-render";
 const modeBar = tv({ slots: {
 	root: [
 		"flex shrink-0 items-start",
-		"min-h-10 gap-4 px-5 py-2.5 max-md:px-4",
+		"min-h-10 gap-4 px-(--surface-inset) py-2.5 max-md:px-4",
 		"bg-layer-hud font-sans text-callout text-foreground-on-hud"
 	],
 	content: ["min-w-0 flex-1 wrap-break-word"],

package/dist/components/notification-center/notification-center.mjs

@@ -46,7 +46,7 @@ const notificationCenter = tv({
 		itemRow: ["flex items-start", "gap-3"],
 		itemIcon: [
 			"flex shrink-0 items-center justify-center",
-			"mt-0 size-[35px] rounded-sticker bg-fill-muted text-foreground-muted",
+			"mt-0 size-[35px] rounded-control bg-fill-muted text-foreground-muted",
 			"[&_svg]:size-[18px]"
 		],
 		itemContent: ["min-w-0 flex-1"],

package/dist/components/panel/panel-action.recipe.mjs

@@ -1,4 +1,4 @@
-import { controlIconInset } from "../../lib/head-edges.mjs";
+import { barButtonHit, barIconInset } from "../../lib/head-edges.mjs";
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/panel/panel-action.recipe.ts
 const panelActionBase = tv({ base: [
@@ -6,14 +6,14 @@ const panelActionBase = tv({ base: [
 	"overflow-visible font-sans leading-none tabular-nums select-none outline-none",
 	"transition-all duration-100",
 	"[&>svg]:pointer-events-none [&>svg]:shrink-0",
-	"h-control min-w-control rounded-control border-[1.5px] border-transparent bg-transparent py-0",
-	"px-2 md:pointer-fine:px-[5px]",
-	"after:absolute after:-inset-[calc(var(--spacing-control-hit)+1.5px)]",
+	"h-(--bar-button-size) min-w-(--bar-button-size) rounded-(--bar-button-radius) border-[1.5px] border-transparent bg-transparent py-0",
+	"px-2 md:pointer-fine:px-[calc((var(--bar-button-size)-var(--control-icon-size)-3px)/2)]",
+	barButtonHit,
 	"text-foreground",
 	"hover:bg-fill-medium active:bg-fill-medium",
 	"focus-visible:shadow-focus",
 	"[&>svg]:size-control-icon",
-	controlIconInset
+	barIconInset
 ] });
 const panelAction = tv({
 	extend: panelActionBase,

package/dist/components/panel/panel-header.recipe.mjs

@@ -1,14 +1,13 @@
-import { controlIconInset, headEdges } from "../../lib/head-edges.mjs";
+import { barIconInset, headEdges } from "../../lib/head-edges.mjs";
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/panel/panel-header.recipe.ts
 /**
 * Where a head's edge controls sit, shared by every head (panel, section,
 * drawer, thread): see lib/head-edges.ts. Both sides pad by the content
-* margin, 20px on a desktop and 16px on a phone, so a filled thing (a sticker,
+* margin (16px on a phone, 20px from 768px by touch, 16px with a mouse), so a filled thing (a sticker,
 * a pill, a filled Button) puts its shape on it, and the first and last
 * frameless icon button are pulled out by their icon inset so their icon box
-* lands on it: 20px on a desktop and on a touch screen with the desktop
-* layout, 16px on a phone, mirrored at the two ends.
+* lands on it, mirrored at the two ends.
 */
 const panelHeadEdges = headEdges;
 /**
@@ -17,10 +16,11 @@ const panelHeadEdges = headEdges;
 * button: an action hidden at some width (a thread's Close below 1024px) then
 * leaves the next one on the edge.
 */
-const panelHeadActions = ["flex shrink-0 items-center gap-0.5 md:pointer-fine:gap-1", controlIconInset];
+const panelHeadActions = ["flex shrink-0 items-center gap-0.5 md:pointer-fine:gap-1", barIconInset];
 /**
 * `header` and `sectionHeader` share one bar, expressed through
-* `compoundSlots`: a 56px row (the shell header height) with a seam under it.
+* `compoundSlots`: a header-height row (the shell header height, 56px on a
+* phone and 44px on a desktop) with a seam under it.
 * On a phone the section head sits on the frame.
 */
 const panelHeader = tv({
@@ -29,14 +29,15 @@ const panelHeader = tv({
 		sectionHeader: [],
 		headerIcon: [
 			"flex size-[27px] shrink-0 items-center justify-center",
+			"md:pointer-fine:size-(--bar-button-size) md:pointer-fine:rounded-(--bar-button-radius)",
 			"rounded-sticker border-[1.5px] border-sticker-ink bg-brand text-sticker-ink ring-[1.5px] ring-sticker-edge",
 			"not-data-[icon-kind=avatar]:[&_svg]:size-3.5 not-data-[icon-kind=avatar]:[&_svg]:stroke-2",
 			"data-[icon-kind=avatar]:size-auto data-[icon-kind=avatar]:border-transparent data-[icon-kind=avatar]:bg-transparent"
 		],
-		headerContent: "flex min-w-0 flex-1 flex-col justify-center",
+		headerContent: ["flex min-w-0 flex-1 flex-col justify-center", "md:pointer-fine:flex-row md:pointer-fine:items-baseline md:pointer-fine:justify-start md:pointer-fine:gap-2"],
 		heading: "flex min-w-0 items-center gap-2",
 		title: "truncate font-sans text-headline font-bold text-foreground",
-		meta: "min-w-0 truncate font-sans text-caption text-foreground-hint",
+		meta: ["min-w-0 truncate font-sans text-caption text-foreground-hint", "md:pointer-fine:flex-1 md:pointer-fine:shrink-1000"],
 		status: [
 			"inline-flex shrink-0 items-center gap-1 border-0 bg-transparent p-0",
 			"font-sans text-caption font-medium normal-case text-foreground-hint",
@@ -57,7 +58,7 @@ const panelHeader = tv({
 	compoundSlots: [{
 		slots: ["header", "sectionHeader"],
 		class: [
-			"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
+			"flex h-(--shell-header-height,var(--header-height)) shrink-0 items-center gap-3 max-md:gap-2",
 			panelHeadEdges,
 			"border-b border-line-seam bg-layer-canvas text-foreground",
 			"max-md:sticky max-md:top-0 max-md:z-30"

package/dist/components/panel/panel.recipe.mjs

@@ -3,11 +3,11 @@ import { tv } from "../../lib/tv.mjs";
 const panel = tv({
 	slots: {
 		root: ["[--panel-footer-clearance:10rem]", "bg-layer-canvas text-foreground"],
-		header: ["[@media(max-height:600px)]:h-12"],
+		header: ["[@media(max-height:600px)]:h-(--header-height-short)"],
 		body: ["relative min-h-0 flex-1 overflow-hidden"],
 		scrollViewport: ["h-full min-h-0 overflow-y-auto overscroll-contain", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
 		scrollContent: ["min-h-full"],
-		section: ["border-t px-5 py-4", "border-line-hairline"],
+		section: ["border-t px-(--surface-inset) py-4", "border-line-hairline"],
 		footer: [
 			"relative flex shrink-0 items-center pt-3",
 			"bg-layer-canvas",

package/dist/components/picker-trigger-button/picker-trigger-button.mjs

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 //#region src/components/picker-trigger-button/picker-trigger-button.tsx
 const pickerTriggerButton = tv({ base: [
-	"relative inline-flex h-8 shrink-0 items-center justify-center",
+	"relative inline-flex h-8 md:pointer-fine:h-control shrink-0 items-center justify-center",
 	"whitespace-nowrap select-none",
 	"outline-[1px] outline-offset-2 outline-transparent transition-colors duration-100 focus-visible:outline-transparent",
 	"disabled:pointer-events-none disabled:transform-none",

package/dist/components/profile-panel/profile-panel.recipe.mjs

@@ -8,7 +8,7 @@ const profilePanel = tv({ slots: {
 	],
 	header: [],
 	headerContent: ["items-stretch gap-0"],
-	section: ["border-line-hairline px-5 py-4"]
+	section: ["border-line-hairline px-(--surface-inset) py-4"]
 } });
 //#endregion
 export { profilePanel };

package/dist/components/scroll-area/scroll-area.css

@@ -587,10 +587,7 @@
       block-size var(--r-scroll-area-duration) var(--r-scroll-area-easing);
   }
 
-  /* Shown while hovered (trigger="hover"), always (trigger="none"), and while scrolling or dragging (every trigger). */
-  .r-scroll-area.r-scroll-area--hover-trigger:hover
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter,
+  /* Shown always (trigger="none"), and while scrolling or dragging (every trigger). */
   .r-scroll-area.r-scroll-area--none-trigger > .r-scroll-area__gutters > .r-scroll-area__gutter,
   .r-scroll-area
     > .r-scroll-area__gutters.r-scroll-area__gutters--scrolling
@@ -602,31 +599,7 @@
     transition-duration: var(--r-scroll-area-duration-fade-in);
   }
 
-  /*
-   * trigger="scroll": a hidden gutter doesn't catch presses meant for the
-   * content under it. A gutter the pointer is already on (it was shown by
-   * scrolling) stays visible and usable after `hideDelay`, until the pointer
-   * leaves it; a hidden gutter can't become hovered, so it never shows on hover.
-   */
-  .r-scroll-area.r-scroll-area--scroll-trigger
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter:hover {
-    opacity: 1;
-    transition-duration: var(--r-scroll-area-duration-fade-in);
-  }
-  .r-scroll-area.r-scroll-area--scroll-trigger
-    > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
-      .r-scroll-area__gutters--dragging
-    )
-    > .r-scroll-area__gutter:not(:hover) {
-    pointer-events: none;
-  }
-
-  /* Pointed at, or while dragged: the thumb thickens and darkens. */
-  .r-scroll-area
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter--vertical:hover
-    > .r-scroll-area__thumb,
+  /* While dragged: the thumb thickens and darkens. */
   .r-scroll-area
     > .r-scroll-area__gutters
     > .r-scroll-area__gutter--vertical.r-scroll-area__gutter--dragging
@@ -634,10 +607,6 @@
     background: var(--r-scroll-area-thumb-color-hover);
     inline-size: var(--r-scroll-area-thumb-size-hover);
   }
-  .r-scroll-area
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter--horizontal:hover
-    > .r-scroll-area__thumb,
   .r-scroll-area
     > .r-scroll-area__gutters
     > .r-scroll-area__gutter--horizontal.r-scroll-area__gutter--dragging
@@ -646,6 +615,78 @@
     block-size: var(--r-scroll-area-thumb-size-hover);
   }
 
+  /*
+   * Hover only with a pointer that hovers (design/foundations/states.md): on a
+   * touch screen the last thing tapped stays `:hover`, which would leave the
+   * scrollbars shown, the thumb thick and a hidden gutter catching taps.
+   */
+  @media (hover: hover) {
+    /* trigger="hover": shown while the pointer is over the area. */
+    .r-scroll-area.r-scroll-area--hover-trigger:hover
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter {
+      opacity: 1;
+      transition-duration: var(--r-scroll-area-duration-fade-in);
+    }
+
+    /*
+     * trigger="scroll": a hidden gutter doesn't catch presses meant for the
+     * content under it. A gutter the pointer is already on (it was shown by
+     * scrolling) stays visible and usable after `hideDelay`, until the pointer
+     * leaves it; a hidden gutter can't become hovered, so it never shows on hover.
+     */
+    .r-scroll-area.r-scroll-area--scroll-trigger
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter:hover {
+      opacity: 1;
+      transition-duration: var(--r-scroll-area-duration-fade-in);
+    }
+    .r-scroll-area.r-scroll-area--scroll-trigger
+      > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
+        .r-scroll-area__gutters--dragging
+      )
+      > .r-scroll-area__gutter:not(:hover) {
+      pointer-events: none;
+    }
+
+    /* Pointed at: the thumb thickens and darkens, as while dragged. */
+    .r-scroll-area
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter--vertical:hover
+      > .r-scroll-area__thumb {
+      background: var(--r-scroll-area-thumb-color-hover);
+      inline-size: var(--r-scroll-area-thumb-size-hover);
+    }
+    .r-scroll-area
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter--horizontal:hover
+      > .r-scroll-area__thumb {
+      background: var(--r-scroll-area-thumb-color-hover);
+      block-size: var(--r-scroll-area-thumb-size-hover);
+    }
+  }
+
+  /*
+   * Where nothing hovers, trigger="hover" and "scroll" both show the scrollbars
+   * only while the area scrolls or a thumb is dragged, and a hidden gutter
+   * never catches a tap: it goes to the content under it. A scrollbar shown by
+   * scrolling takes the finger, so its thumb can be dragged; the drag keeps it.
+   */
+  @media (hover: none) {
+    .r-scroll-area.r-scroll-area--hover-trigger
+      > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
+        .r-scroll-area__gutters--dragging
+      )
+      > .r-scroll-area__gutter,
+    .r-scroll-area.r-scroll-area--scroll-trigger
+      > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
+        .r-scroll-area__gutters--dragging
+      )
+      > .r-scroll-area__gutter {
+      pointer-events: none;
+    }
+  }
+
   /*
    * Scroll-driven thumbs: the browser moves each thumb from the scroll itself,
    * on the compositor, with no script per scroll. The container names its

package/dist/components/search/search-entity.recipe.mjs

@@ -5,7 +5,8 @@ const searchEntity = tv({ slots: {
 	entity: [
 		"flex min-w-0 w-full items-center gap-3 text-left",
 		"rounded-none border-0 py-3 text-foreground",
-		"pointer-coarse:min-h-16",
+		"md:pointer-fine:py-2",
+		"pointer-coarse:min-h-14 pointer-coarse:py-2",
 		listCell,
 		listCellStates,
 		"disabled:cursor-default",
@@ -15,7 +16,7 @@ const searchEntity = tv({ slots: {
 	entityLeading: ["relative flex shrink-0"],
 	entityIcon: [
 		"flex items-center justify-center overflow-hidden",
-		"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
+		"size-[27px] rounded-chip bg-fill-muted text-foreground-muted",
 		"[&_svg]:size-3.5"
 	],
 	entityActivity: [