@botiverse/raft-ui 0.64.0 → 0.65.0

package/dist/components/drawer/drawer.recipe.mjs

@@ -1,3 +1,4 @@
+import { barButton } from "../../lib/head-edges.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { panelHeadEdges } from "../panel/panel-header.recipe.mjs";
 //#region src/components/drawer/drawer.recipe.ts
@@ -84,6 +85,7 @@ const drawer = tv({
 			"before:rounded-full before:bg-line-seam"
 		],
 		close: ["shrink-0"],
+		closeButton: [barButton],
 		closeIcon: ["size-control-icon"],
 		header: ["flex flex-col", "items-stretch gap-1 px-4 pt-4 pb-2 text-left"],
 		body: ["flex flex-1 flex-col", "items-stretch px-4 pt-2 pb-4 text-left"],
@@ -136,12 +138,12 @@ const drawer = tv({
 					"before:w-1 before:h-9"
 				],
 				header: [
-					"min-h-14 shrink-0 flex-row items-center justify-between gap-2 py-0 text-left",
+					"min-h-(--header-height) shrink-0 flex-row items-center justify-between gap-2 py-0 text-left",
 					"border-b border-line-seam",
 					panelHeadEdges
 				],
-				body: ["items-stretch text-left", "min-h-0 overflow-y-auto px-5 py-4"],
-				footer: ["border-t border-line-seam px-5 py-3"],
+				body: ["items-stretch text-left", "min-h-0 overflow-y-auto px-(--surface-inset) pt-(--page-top) pb-(--page-inset)"],
+				footer: ["border-t border-line-seam px-(--surface-inset) py-3"],
 				title: ["min-w-0 max-w-none flex-1 text-left"],
 				description: ["max-w-none text-left"],
 				actions: ["flex-row flex-wrap justify-end", "**:data-[slot=button]:w-auto"]

package/dist/components/empty-state/empty-state.mjs

@@ -3,7 +3,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/empty-state/empty-state.tsx
 const emptyState = tv({ slots: {
-	root: ["flex w-full min-w-0 flex-col items-center justify-center px-6 py-12 text-center"],
+	root: ["flex w-full min-w-0 flex-col items-center justify-center px-6 md:pointer-fine:px-(--page-inset) py-12 text-center"],
 	content: [
 		"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-center",
 		"[&>[data-slot=empty-state-icon]]:mb-0",

package/dist/components/field/field.mjs

@@ -11,7 +11,7 @@ const field = tv({
 			"*:min-w-0",
 			"*:data-[slot=checkbox]:mt-[calc((1lh-1.25rem)/2)]",
 			"*:data-[slot=radio-group-item]:mt-[calc((1lh-1.25rem)/2)]",
-			"*:data-[slot=switch]:mt-[calc((1lh-1.875rem)/2)]"
+			"*:data-[slot=switch]:mt-[calc((1lh-var(--switch-height))/2)]"
 		],
 		label: [
 			"block wrap-anywhere",

package/dist/components/files/files.recipe.mjs

@@ -3,7 +3,7 @@ import { tv } from "../../lib/tv.mjs";
 const files = tv({ slots: {
 	panel: ["flex min-h-0 flex-1 flex-col", "bg-layer-canvas text-foreground"],
 	viewport: ["min-h-0 flex-1 overflow-y-auto"],
-	list: ["flex flex-col gap-2 px-5 py-3", "max-md:px-4"],
+	list: ["flex flex-col gap-2 px-(--surface-inset) py-3", "max-md:px-4"],
 	row: [
 		"group/file-row flex w-full min-w-0 gap-3 px-3",
 		"transition-colors",

package/dist/components/filter-chip/filter-chip.mjs

@@ -7,7 +7,7 @@ import { Button } from "@base-ui/react/button";
 //#region src/components/filter-chip/filter-chip.tsx
 const filterChip = tv({ slots: {
 	root: [
-		"inline-flex h-8 min-w-0 shrink items-center",
+		"inline-flex h-8 md:pointer-fine:h-control min-w-0 shrink items-center",
 		"gap-1.5 rounded-control bg-info-soft pr-1 pl-2.5",
 		"font-sans text-control font-semibold text-foreground",
 		"[&>svg]:pointer-events-none [&>svg]:shrink-0",

package/dist/components/form-section/form-section.mjs

@@ -5,7 +5,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/form-section/form-section.tsx
 const formSection = tv({ slots: {
-	root: ["flex flex-col gap-3 py-4 first:pt-0", "[[data-slot=form-section]+&]:border-t [[data-slot=form-section]+&]:border-line-hairline"],
+	root: ["flex flex-col gap-(--field-gap) py-[calc(var(--section-gap)/2)] first:pt-0", "[[data-slot=form-section]+&]:border-t [[data-slot=form-section]+&]:border-line-hairline"],
 	head: ["flex min-w-0 flex-col", "gap-0.5"],
 	titleRow: ["flex min-w-0 items-center gap-2"],
 	title: ["m-0 min-w-0 flex-1", "font-sans text-footnote font-bold text-foreground-muted"],

package/dist/components/icon-tile/icon-tile.mjs

@@ -12,9 +12,9 @@ const iconTile = tv({
 		},
 		size: {
 			xs: { root: "size-[19px] [&_svg:not([class*='size-'])]:size-[11px]" },
-			sm: { root: "size-[27px] [&_svg:not([class*='size-'])]:size-3.5" },
-			md: { root: "size-[35px] [&_svg:not([class*='size-'])]:size-[18px]" },
-			lg: { root: "size-[51px] [&_svg:not([class*='size-'])]:size-[22px]" }
+			sm: { root: "size-[27px] rounded-chip [&_svg:not([class*='size-'])]:size-3.5" },
+			md: { root: "size-[35px] rounded-control [&_svg:not([class*='size-'])]:size-[18px]" },
+			lg: { root: "size-[51px] rounded-container [&_svg:not([class*='size-'])]:size-[22px]" }
 		}
 	},
 	defaultVariants: {

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

@@ -9,6 +9,8 @@ const inboxItem = tv({
 			"has-data-[slot=inbox-item-leading]:grid-cols-[auto_minmax(0,1fr)_auto]",
 			"has-data-[slot=inbox-item-selection]:has-data-[slot=inbox-item-leading]:grid-cols-[auto_auto_minmax(0,1fr)_auto]",
 			"gap-x-3 gap-y-0 rounded-none border-0 py-3",
+			"md:pointer-fine:py-2",
+			"pointer-coarse:min-h-14 pointer-coarse:py-2",
 			listCell,
 			listCellStates,
 			"data-[active=true]:before:bg-fill-cell-selected",
@@ -73,7 +75,7 @@ const inboxItem = tv({
 		itemStatusWord: ["shrink-0 @max-[320px]/inbox-item-row:hidden"],
 		itemStatusPixel: ["hidden items-center @max-[320px]/inbox-item-row:inline-flex"],
 		itemListGroup: ["flex flex-col gap-0.5", "mt-1.5 first:mt-0"],
-		itemListHeading: ["mb-0.5 px-5 py-1", "font-sans text-footnote font-bold text-foreground-hint"],
+		itemListHeading: ["mb-0.5 px-(--surface-inset) py-1", "font-sans text-footnote font-bold text-foreground-hint"],
 		itemMarks: ["flex h-5 shrink-0 items-center justify-end gap-1.5", "text-foreground-hint"],
 		itemHoverTarget: ["pointer-events-auto"],
 		itemTimestamp: ["shrink-0 whitespace-nowrap text-right tabular-nums", "font-mono text-mono-meta text-foreground-hint"],
@@ -118,7 +120,7 @@ const inboxItem = tv({
 				"items-center",
 				"has-data-[slot=inbox-item-line]:@container/inbox-item-row",
 				"has-data-[slot=inbox-item-line]:[--inbox-item-content-end:-1]",
-				"has-data-[slot=inbox-item-line]:pointer-fine:[:hover,:focus-within,[data-active=true],[data-popup-open],:has([data-popup-open])]:[--inbox-item-actions-room:--spacing(10)]",
+				"has-data-[slot=inbox-item-line]:pointer-fine:hover:[--inbox-item-actions-room:--spacing(10)] has-data-[slot=inbox-item-line]:pointer-fine:[:focus-within,[data-active=true],[data-popup-open],:has([data-popup-open])]:[--inbox-item-actions-room:--spacing(10)]",
 				"has-data-[slot=inbox-item-line]:pointer-coarse:[--inbox-item-actions-room:--spacing(11)]",
 				"has-data-[slot=inbox-item-line]:hover:[--inbox-item-time-display:inline] has-data-[slot=inbox-item-line]:keyboard:focus-within:[--inbox-item-time-display:inline]"
 			],

package/dist/components/input/input.recipe.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/input/input.recipe.ts
 const input = tv({ slots: { root: [
 	"h-control w-full px-3 py-0 font-heading text-field font-field outline-none",
-	"rounded-control border-[1.5px] border-line-field bg-layer-card",
+	"rounded-(--control-radius) border-[1.5px] border-line-field bg-layer-card",
 	"text-foreground placeholder:text-foreground-hint",
 	"shadow-none transition-shadow duration-90 ease-out focus-visible:shadow-focus",
 	"data-invalid:border-danger-strong",

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