@botiverse/raft-ui 0.23.1 → 0.25.0

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-B56I-Ckt.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-nHjMl3SO.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";
@@ -336,7 +336,7 @@ const drawer = tv({
 		swipeHandle: [
 			"relative z-10 shrink-0 cursor-grab select-none active:cursor-grabbing",
 			"before:absolute before:content-['']",
-			"before:rounded-[1px] before:bg-line-seam"
+			"before:rounded-full before:bg-line-seam"
 		],
 		close: ["shrink-0"],
 		closeIcon: ["size-control-icon"],
@@ -1049,7 +1049,8 @@ const appRail = tv({ slots: {
 	nav: [
 		"flex w-full flex-1 flex-col items-center py-2",
 		"gap-1.5 pt-2.5 pb-2 first:pt-2",
-		"[@media(max-height:600px)]:pt-1.5 [@media(max-height:600px)]:first:pt-1.5"
+		"[@media(max-height:600px)]:pt-1.5 [@media(max-height:600px)]:first:pt-1.5",
+		"after:mt-auto after:h-28 after:min-h-0 after:w-12 after:shrink after:content-[''] after:frame-decor-rail"
 	],
 	footer: ["flex w-full shrink-0 flex-col items-center justify-center", "h-auto gap-1.5 pb-2 [@media(max-height:600px)]:pb-1.5"],
 	item: [
@@ -1666,7 +1667,7 @@ const sidebarItemRecipe = tv({
 			"max-md:h-auto max-md:min-h-11 max-md:py-[8.5px]",
 			"font-sans text-subhead font-medium text-foreground",
 			"max-md:text-body max-md:font-semibold",
-			"data-active:border-sticker-ink data-active:bg-brand data-active:font-bold data-active:text-sticker-ink data-active:ring-[1.5px] data-active:ring-sticker-edge",
+			"data-active:border-brand-edge data-active:bg-brand data-active:font-bold data-active:text-sticker-ink data-active:ring-[1.5px] data-active:ring-sticker-edge",
 			"not-data-active:data-[tone=muted]:text-foreground-muted not-data-active:data-[tone=away]:text-foreground-hint",
 			"outline-none"
 		],
@@ -1764,7 +1765,7 @@ function MessageIcon(props) {
 		stroke: "currentColor",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		strokeWidth: 1,
+		strokeWidth: 1.5,
 		...props,
 		children: /* @__PURE__ */ jsx("path", { d: "M14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L9.5 13.25H14.25C15.35 13.25 16.25 12.35 16.25 11.25V4.25C16.25 3.15 15.35 2.25 14.25 2.25Z" })
 	});
@@ -1781,7 +1782,7 @@ function ChatIcon(props) {
 		stroke: "currentColor",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		strokeWidth: 1,
+		strokeWidth: 1.5,
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("path", { d: "M14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L9.5 13.25H14.25C15.35 13.25 16.25 12.35 16.25 11.25V4.25C16.25 3.15 15.35 2.25 14.25 2.25Z" }),
@@ -1846,13 +1847,9 @@ function ThreadIcon(props) {
 		stroke: "currentColor",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		strokeWidth: 1,
+		strokeWidth: 1.5,
 		...props,
-		children: [/* @__PURE__ */ jsx("path", { d: "M16.25 5V4.25C16.25 3.15 15.35 2.25 14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L7.5 14.85" }), /* @__PURE__ */ jsx("path", {
-			d: "M8.75 5.5H15.5C16.6 5.5 17.5 6.4 17.5 7.5V12.25C17.5 13.35 16.6 14.25 15.5 14.25H14V16.75L10.75 14.25H8.75C7.65 14.25 6.75 13.35 6.75 12.25V7.5C6.75 6.4 7.65 5.5 8.75 5.5Z",
-			fill: "currentColor",
-			stroke: "none"
-		})]
+		children: [/* @__PURE__ */ jsx("path", { d: "M3.5 11.5L1.75 13.25V4.25A2 2 0 0 1 3.75 2.25H11.25" }), /* @__PURE__ */ jsx("path", { d: "M8.25 5H14.5C15.6 5 16.5 5.9 16.5 7V11.75C16.5 12.85 15.6 13.75 14.5 13.75H13V16.25L9.75 13.75H8.25C7.15 13.75 6.25 12.85 6.25 11.75V7C6.25 5.9 7.15 5 8.25 5Z" })]
 	});
 }
 //#endregion
@@ -9491,7 +9488,7 @@ const banner = tv({
 	defaultVariants: { size: "md" },
 	compoundVariants: [{
 		size: "sm",
-		class: { root: "has-[>[data-slot=banner-action]]:py-[calc((--spacing(8)-1lh)/2+--spacing(1))]" }
+		class: { root: "has-[>[data-slot=banner-action],>[data-banner-close]]:py-[calc((--spacing(8)-1lh)/2+--spacing(1))]" }
 	}]
 });
 /**
@@ -9799,7 +9796,7 @@ const notificationCenter = tv({
 	variants: {
 		viewport: {
 			desktop: { popup: "w-[380px]" },
-			mobile: { popup: "w-[min(92vw,360px)]" }
+			mobile: { popup: "w-[min(var(--available-width,calc(100vw-16px)),480px)]" }
 		},
 		size: {
 			sm: { popup: "h-56" },
@@ -9828,6 +9825,13 @@ const notificationCenter = tv({
 		status: "info"
 	}
 });
+/**
+* On a phone the popup is as wide as the screen less 8px on each side, and the
+* collision padding stops it 8px from the edge it is pushed against, so it
+* lines up with the server list under the same top bar
+* (design/foundations/elevation.md#popups).
+*/
+const PHONE_INSET = 8;
 function NotificationCenter({ modal = false, ...props }) {
 	return /* @__PURE__ */ jsx(Popover$1.Root, {
 		modal,
@@ -9876,7 +9880,7 @@ function NotificationCenterPopup({ viewport = "desktop", size = "md", className,
 			arrowPadding,
 			collisionAvoidance,
 			collisionBoundary,
-			collisionPadding,
+			collisionPadding: collisionPadding ?? (viewport === "mobile" ? PHONE_INSET : void 0),
 			disableAnchorTracking,
 			positionMethod,
 			side,
@@ -13535,8 +13539,8 @@ function useIosMomentumCompensation({ enabled, listElRef, itemsElRef, syncViewpo
 		clampCompensation();
 		const listEl = listElRef.current;
 		if (listEl) {
-			if (listEl.scrollTop <= 0) {
-				if (touchEndedRef.current) flushCompensation("scrollToTop");
+			if (listEl.scrollTop <= 0 && touchEndedRef.current) {
+				flushCompensation("scrollToTop");
 				return true;
 			}
 			if (iosCompYRef.current > 0) {
@@ -14658,22 +14662,37 @@ function VirtualList(props) {
 			clearItemResizeQueue();
 			return;
 		}
+		const scrollTopBefore = listElBefore == null ? 0 : listElBefore.scrollTop;
+		const effectiveTopBefore = scrollTopBefore + compensationYRef.current;
 		applyLayoutStyles(startIndex);
-		onContentResize?.();
 		const listEl = listElRef.current;
+		let contentMoved = true;
 		if (listEl != null) {
-			if (pendingScrollTaskRef.current?.type === void 0) {
+			const pendingTask = pendingScrollTaskRef.current;
+			if (pendingTask?.type === void 0) {
 				const compensates = (index, key) => key !== void 0 && isFirstOfKey.get(key) === true && prependIndexes.includes(index) || index < viewTopIndex;
 				let compensation = 0;
+				let uncompensated = false;
 				for (const { index, key, delta } of resizes) if (compensates(index, key)) compensation += delta;
+				else if (delta !== 0) uncompensated = true;
 				const firstItem = items[0];
 				if (leadingMarginDelta !== 0 && (viewTop > 0 || compensates(0, firstItem === void 0 ? void 0 : getKey(firstItem)))) compensation += leadingMarginDelta;
-				if (compensation !== 0 && !addCompensation(compensation)) listEl.scrollBy(0, compensation);
-			} else replayPendingScrollTask();
+				else if (leadingMarginDelta !== 0) uncompensated = true;
+				if (compensation !== 0) {
+					const remaining = compensation - (listEl.scrollTop - scrollTopBefore);
+					if (remaining !== 0 && !addCompensation(remaining)) listEl.scrollBy(0, remaining);
+				}
+				const effectiveTop = listEl.scrollTop + compensationYRef.current;
+				contentMoved = uncompensated || Math.abs(effectiveTop - (effectiveTopBefore + compensation)) >= 1;
+			} else {
+				onContentResize?.();
+				replayPendingScrollTask();
+			}
 			const viewport = viewportRef.current;
 			viewport.scrollTop = listEl.scrollTop;
 			viewport.scrollLeft = listEl.scrollLeft;
-		}
+			if (pendingTask?.type === void 0 && contentMoved) onContentResize?.();
+		} else if (contentMoved) onContentResize?.();
 		clearItemResizeQueue();
 		updateRange("batchItemResize", false, null);
 	});

package/dist/styles.css

@@ -212,6 +212,7 @@
   --color-ink-40: var(--ink-40);
 
   --color-brand: var(--brand-400);
+  --color-brand-edge: var(--brand-edge);
   --color-brand-50: var(--brand-50);
   --color-brand-100: var(--brand-100);
   --color-brand-200: var(--brand-200);
@@ -679,6 +680,28 @@ textarea:-webkit-autofill:disabled {
    sticker overlay-sticker-medium, on the frame overlay-frame-medium.
    Use the bg-fill-* colours instead on a transparent control whose fill fades
    in with transition-colors. */
+/* Theme decorations on the frame (themes.css): the theme's sprites on the top
+   bar's right and above the rail's foot; none without a decorated theme. */
+/* The top bar's strip (190px) sits 72px from its right end, clear of the
+   right-hand controls; only from 1024px, where the centered search field
+   (at most min(32vw, 420px)) leaves it room. */
+@utility frame-decor-top {
+  background-repeat: no-repeat;
+  background-position: right 72px center;
+  @media (width >= 1024px) {
+    background-image: var(--frame-decor-top, none);
+  }
+}
+
+/* The rail's strip (48×112), for the nav's last flex item: laid out after
+   the items, so it never sits behind one, and clipped from the top when the
+   rail has less room than the strip. */
+@utility frame-decor-rail {
+  background-image: var(--frame-decor-rail, none);
+  background-repeat: no-repeat;
+  background-position: center bottom;
+}
+
 @utility overlay-subtle {
   background-image: linear-gradient(var(--fill-subtle), var(--fill-subtle));
 }