@botiverse/raft-ui 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,22 +1,86 @@
+## [0.14.0](https://github.com/botiverse/raft-design/compare/v0.13.0...v0.14.0) (2026-10-21)
+
+### Design System
+
+- **Option height**: an option in any popup list is as tall as its content, and the space above and below its text is constant. ([#647](https://github.com/botiverse/raft-design/pull/647))
+  - Why: options had a fixed 6px above and below whatever their content, which is less than a one-line 36px row leaves around its text, so a two-line option (a wrapped label, or a name with an id under it) looked more cramped than its one-line neighbors.
+  - Affects: space above and below an option 6px → 7px with a mouse (22px line), 8px on a touch screen (20px line); one line stays 36px; a second line adds only its own height. On short windows (600px tall or less) the menus' extra `py-1` is removed.
+  - Docs: https://raft-design.botiverse.build/patterns/forms/#option-height
+- **The ends of a header**: the icon buttons at both ends of every header (panels, threads, phone top bars, drawers, sheets, a dialog's ×, the sidebar) put their icon box on the content margin, and their empty hit area hangs outward. ([#650](https://github.com/botiverse/raft-design/pull/650))
+  - Why: a 44px button on a touch screen was placed by its own edge, so Back sat 11px inside the content line while the ⋮ at the other end stayed on it, and the two ends stopped mirroring.
+  - Affects: icon box on the margin, 16px on a phone and 20px on a desktop and in a dialog, at every button size (32px or 44px); a phone's top bar moves its icon boxes from 14px to 16px from the edge.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#the-ends-of-a-header
+
+- **A tab's own controls**: when a tab's content has controls (a view switch, filters, search, a sort), they go in one pinned toolbar row under the tabs, the same row the Tasks tab draws: filters and search on the left, a view switch on the right; a tab with no controls has no row. ([#652](https://github.com/botiverse/raft-design/pull/652))
+  - Why: a view switch sat directly on the divider under the tabs, and each tab placed its controls differently, so a switch under the selected tab read as a second row of tabs.
+  - Affects: the row has the content margin at its sides (20px desktop, 16px phone) and a `line-seam` below it.
+  - Docs: https://raft-design.botiverse.build/components/tabs/#a-tabs-own-controls
+
+### Added
+
+- **Utilities** `py-option-inset` and `min-h-option`, the constant option padding and the floor for an option with no line of text. ([#647](https://github.com/botiverse/raft-design/pull/647))
+  - Why: a product that builds its own option row keeps the same padding as raft-ui's.
+  - Affects: `py-option-inset` = (36px − one line) / 2; `min-h-option` 36px.
+  - Docs: https://raft-design.botiverse.build/patterns/forms/#option-height
+
+### Changed
+
+- **Select, Combobox, ComboboxSelect, DropdownMenu and ContextMenu options**: their padding is `py-option-inset` instead of a fixed 6px. ([#647](https://github.com/botiverse/raft-design/pull/647))
+  - Why: see Option height above.
+  - Affects: padding 6px → 7px (mouse) / 8px (touch); two-line options 2px taller with a mouse, 4px on a touch screen; one-line options unchanged at 36px.
+  - Docs: https://raft-design.botiverse.build/patterns/forms/#option-height
+- **PanelHeader, ThreadPanel, Drawer, Dialog, AlertDialog, Lightbox, NotificationCenter and Sidebar headers**: frameless icon buttons at the ends align by their icon box on the content margin. ([#650](https://github.com/botiverse/raft-design/pull/650))
+  - Why: see The ends of a header above.
+  - Affects: edge icon boxes at 16px (phone) / 20px (desktop, dialog) from the edge at every button size.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#the-ends-of-a-header
+
+### Fixed
+
+- **InputGroup**: a text addon is centered with flex, so older iOS Safari no longer sets its text at the top; long text still truncates. ([#646](https://github.com/botiverse/raft-design/pull/646))
+  - Why: the previous centering needed Safari 17.4.
+  - Docs: https://raft-design.botiverse.build/components/input-group/
+
 ## [0.13.0](https://github.com/botiverse/raft-design/compare/v0.12.0...v0.13.0) (2026-10-21)
 
+### Design System
+
+- **Row hover**: rows hover with their own lightest visible step, not the press overlay; a row whose menu is open is marked with one slightly stronger step. ([#641](https://github.com/botiverse/raft-design/pull/641), [#643](https://github.com/botiverse/raft-design/pull/643))
+  - Why: the press fill made hovered messages and list rows read as grey and heavy, and on a phone a long-press menu left no mark of which row it belonged to.
+  - Affects: hover `fill-pressed` 7.8% → `fill-row-hover` 4% (dark 3%), messages `fill-message-hover` 3% (dark 2.2%), menu-open `fill-row-open` 5% (dark 4%). Press and selection are unchanged; hover stays lighter than selection.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#row-hover
+
 ### Added
 
-- Tokens `fill-row-hover` (4% ink light, 3% dark), `fill-message-hover` (3% / 2.2%) and `fill-row-open` (5% / 4%), with utilities `row-hover-overlay` and `row-open-overlay`. ([#641](https://github.com/botiverse/raft-design/pull/641), [#643](https://github.com/botiverse/raft-design/pull/643))
+- **Tokens** `fill-row-hover`, `fill-message-hover` and `fill-row-open`, with utilities `row-hover-overlay` and `row-open-overlay` for rows on a card or a tinted surface. ([#641](https://github.com/botiverse/raft-design/pull/641), [#643](https://github.com/botiverse/raft-design/pull/643))
+  - Why: rows need a hover step lighter than press, and rows on a non-transparent surface need it as an overlay so the surface shows through.
+  - Affects: `fill-row-hover` 4% / 3%, `fill-message-hover` 3% / 2.2%, `fill-row-open` 5% / 4% (ink, light / dark).
+  - Docs: https://raft-design.botiverse.build/foundations/tokens/
 
 ### Changed
 
-- Rows hover with their own light step instead of the press overlay (`fill-pressed`, 7.8%): messages with `fill-message-hover`; sidebar items, list, inbox, search, table and file rows with `fill-row-hover`. Hover stays lighter than selection; press is unchanged. ([#641](https://github.com/botiverse/raft-design/pull/641))
-- A row with its menu open (right-click, ⋯ menu, phone long-press) takes `fill-row-open`, the one marker of which row the menu belongs to; selection still wins. Comment cards hover with `fill-row-hover`. ([#643](https://github.com/botiverse/raft-design/pull/643))
-- Select and Combobox default `collisionPadding` to 8px. ([#642](https://github.com/botiverse/raft-design/pull/642))
+- **Message, SidebarItem, List, Inbox, Search, Table and File rows**: hover with `fill-row-hover` (messages with `fill-message-hover`) instead of `fill-pressed`. ([#641](https://github.com/botiverse/raft-design/pull/641))
+  - Why: see Row hover above.
+  - Affects: hover background 7.8% → 4% (messages 3%).
+  - Docs: https://raft-design.botiverse.build/foundations/states/#row-hover
+- **Rows with a menu open** (right-click, ⋯ menu, phone long-press): take `fill-row-open` while the menu is open; selection still wins. **Comment cards** hover with `fill-row-hover`. ([#643](https://github.com/botiverse/raft-design/pull/643))
+  - Why: the open menu needs one marker of which row it belongs to, including on a phone where there is no hover.
+  - Affects: menu-open background `fill-row-open` 5% / 4%.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#row-hover
+- **Select, Combobox**: `collisionPadding` defaults to 8px. ([#642](https://github.com/botiverse/raft-design/pull/642))
+  - Why: popups touched the screen edge on phones.
+  - Affects: popup inset from the screen edge, 8px.
+  - Docs: https://raft-design.botiverse.build/patterns/forms/#long-values-in-fields
 
 ### Fixed
 
-- Long values stay inside form fields on narrow screens: Field labels, descriptions and errors wrap; a FieldItem label next to a checkbox, radio or switch shrinks; an InputGroup text prefix takes at most half the field and truncates; SelectValue, ComboboxSelect values and chips truncate with the full value as `title`; options wrap to 2 lines then clamp; Select and Combobox popups never get wider than the screen less 8px each side. ([#642](https://github.com/botiverse/raft-design/pull/642))
+- **Field, FieldItem, InputGroup, SelectValue, ComboboxSelect, chips and options**: long values stay inside form fields on narrow screens. Labels, descriptions and errors wrap. A FieldItem label next to a checkbox, radio or switch shrinks. An InputGroup text prefix takes at most half the field and truncates. Values and chips truncate, with the full value as `title`. Options wrap to 2 lines, then clamp. Select and Combobox popups are never wider than the screen less 8px on each side. ([#642](https://github.com/botiverse/raft-design/pull/642))
+  - Why: long names and values could push fields and popups past the screen edge on phones, so every form field, picker and option list was checked and fixed together.
+  - Affects: InputGroup prefix `max-w-1/2`; options clamp at 2 lines; popups are never wider than the screen less 8px on each side, and on a desktop at most the wider of the trigger and `24rem`.
+  - Docs: https://raft-design.botiverse.build/patterns/forms/#long-values-in-fields
 
 ## [0.12.0](https://github.com/botiverse/raft-design/compare/v0.11.0...v0.12.0) (2026-10-21)
 
-### Breaking
+### Breaking Changes
 
 - `ComboboxSelect` always takes typing on a phone, as on a desktop: tapping the field focuses it and typing filters; `create` and remote search work in the field. The phone-only pick-only mode and bottom sheet from 0.10.5 are gone, with their props `sheetThreshold`, `sheetTitle` and `messages.search` / `done` / `close`. A pick-only field uses `Select`. The list still picks its side once and doesn't flip while the keyboard opens. ([#635](https://github.com/botiverse/raft-design/pull/635))
 

package/dist/cn.mjs

@@ -6,7 +6,10 @@ const twMerge = extendTailwindMerge({ extend: {
 		"control",
 		"control-cta",
 		"control-icon",
-		"control-hit"
+		"control-hit",
+		"option",
+		"option-inset",
+		"icon-inset"
 	] },
 	classGroups: {
 		shadow: [{ shadow: [

package/dist/components/combobox-select/combobox-select.css

@@ -171,8 +171,10 @@
 .r-combobox-select__option {
   box-sizing: border-box;
   width: 100%;
+  /* The option inset (styles.css, --spacing-option-inset): one line is 36px,
+     and a second line adds only its own height (forms.md#option-height). */
   min-height: 36px;
-  padding: 6px 10px;
+  padding: calc((36px - 1lh) / 2) 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/dist/index.d.mts

@@ -1201,6 +1201,7 @@ declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
   root: string[];
   addon: string[];
   text: string[];
+  textInner: string[];
   control: string[];
 }, undefined, {
   align: {
@@ -1224,6 +1225,7 @@ declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
   root: string[];
   addon: string[];
   text: string[];
+  textInner: string[];
   control: string[];
 }, import("tailwind-variants/lite").TVReturnTypeLike<{
   align: {
@@ -1247,6 +1249,7 @@ declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
   root: string[];
   addon: string[];
   text: string[];
+  textInner: string[];
   control: string[];
 }>>;
 type InputGroupProps = ComponentPropsWithRef<"div">;
@@ -1254,7 +1257,7 @@ export declare function InputGroup({ className, ...props }: InputGroupProps): im
 type InputGroupAddonProps = ComponentPropsWithRef<"div"> & Pick<VariantProps<typeof inputGroup>, "align" | "variant">;
 declare function InputGroupAddonRoot({ align, variant, className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
 type InputGroupAddonTextProps = ComponentPropsWithRef<"span"> & Pick<VariantProps<typeof inputGroup>, "align" | "variant">;
-declare function TextAddon({ align, variant, className, ref, title, ...props }: InputGroupAddonTextProps): import("react").JSX.Element;
+declare function TextAddon({ align, variant, className, ref, title, children, ...props }: InputGroupAddonTextProps): import("react").JSX.Element;
 export declare const InputGroupAddon: typeof InputGroupAddonRoot & {
   Text: typeof TextAddon;
 };
@@ -3320,7 +3323,7 @@ declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<
   triggerBell: string[];
   triggerDot: string[];
   popup: string[];
-  header: string[];
+  header: (string | string[])[];
   title: string[];
   count: string[];
   scroller: string[];
@@ -3379,7 +3382,7 @@ declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<
   triggerBell: string[];
   triggerDot: string[];
   popup: string[];
-  header: string[];
+  header: (string | string[])[];
   title: string[];
   count: string[];
   scroller: string[];
@@ -3438,7 +3441,7 @@ declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<
   triggerBell: string[];
   triggerDot: string[];
   popup: string[];
-  header: string[];
+  header: (string | string[])[];
   title: string[];
   count: string[];
   scroller: string[];

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageReactionTooltipNameText, $t as DropdownMenuSeparator, A as MessageTextSelectionToolbarButton, An as DialogBody, At as MessageItem, B as MessageReferenceUnavailable, Bn as DialogTitle, Bt as DropdownMenuCheckboxItem, C as MessageQuotedPreviewUnavailable, Cn as Tooltip, Ct as MessageItemEdited, D as MessageEmbedHeader, Dn as TooltipTrigger, Dt as MessageItemAvatarSlot, E as MessageEmbedFooter, En as TooltipProvider, Et as MessageItemSearchMatch, F as MessageReferenceChip, Fn as DialogHeader, Ft as AvatarGroup, G as MessageReactionGlyph, Gn as defaultNativeButton, Gt as DropdownMenuItemCount, H as MessageReactionChip, Hn as Button, Ht as DropdownMenuContent, I as MessageReferenceIndicator, In as DialogNav, It as AvatarGroupCount, J as MessageReactionQuickButton, Jn as resolveThemeScopeProps, Jt as DropdownMenuPopup, K as MessageReactionPickerContent, Kn as useParentOverlayKind, Kt as DropdownMenuItemLabel, L as MessageReferenceLabel, Ln as DialogOverlay, Lt as AvatarImage, M as MessageMultiSelect, Mn as DialogContent, Mt as Avatar, N as MessageMultiSelectCheckbox, Nn as DialogDescription, Nt as AvatarBadge, O as messageEmbed, On as Badge, Ot as MessageItemContinuationTime, P as MessageMultiSelectToolbar, Pn as DialogFooter, Pt as AvatarFallback, Q as MessageReactionTooltipName, Qn as tv, Qt as DropdownMenuRadioItemIndicator, R as MessageReferencePending, Rn as DialogPortal, Rt as useOverflowTitle, S as MessageQuotedPreviewTimestamp, Sn as PRESENCE_COLOR, St as MessageItemContent, T as MessageEmbedContent, Tn as TooltipPortal, Tt as MessageItemFooter, U as MessageReactionCount, Un as buttonVariants, Ut as DropdownMenuFooter, V as MessageReactionAddButton, Vn as DialogTrigger, Vt as DropdownMenuCheckboxItemIndicator, W as MessageReactionErrorIndicator, Wn as Spinner, Wt as DropdownMenuItem, X as MessageReactionTooltipContent, Xn as useTheme, Xt as DropdownMenuRadioGroup, Y as MessageReactionQuickRow, Yn as useThemeScopeProps, Yt as DropdownMenuPortal, Z as MessageReactionTooltipMeta, Zn as ThemeStateContext, Zt as DropdownMenuRadioItem, _ as MessageQuotedPreviewContent, _n as ScrollAreaThumb, _t as MessageItemSenderButton, a as MessageListDateDivider, an as KbdGroup, at as MessageItemSavedIndicator, b as MessageQuotedPreviewText, bn as Checkbox, bt as MessageItemAttachments, c as MessageList, cn as PanelFooter, d as MessageQuotedPreviewAttachments, dn as PanelScrollViewport, en as DropdownMenuShortcut, et as MessageReactionTooltipNames, f as MessageQuotedPreviewAuthor, fn as PanelSection, ft as MessageItemHeader, g as MessageQuotedPreviewChannel, gn as ScrollAreaScrollbar, gt as MessageItemSenderBadges, h as MessageQuotedPreviewAuthorName, hn as ScrollAreaCorner, ht as MessageItemSender, in as Kbd, it as MessageItemReadReceipt, j as MessageTextSelectionToolbarSeparator, jn as DialogClose, jt as searchHit, k as MessageTextSelectionToolbar, kn as Dialog, kt as MessageItemGutter, l as MessageQuotedPreview, ln as PanelHeaderRoot, m as MessageQuotedPreviewAuthorMeta, mn as ScrollAreaContent, mt as MessageItemMeta, nn as DropdownMenuSubmenuTrigger, nt as MessageItemBadge, o as MessageListHistoryLimited, on as Panel, ot as MessageItemToolbar, pn as ScrollArea, pt as MessageItemInlineStatus, q as MessageReactionPickerStatic, qn as withOverlayLayer, qt as DropdownMenuLabel, rn as DropdownMenuTrigger, rt as MessageItemBadgeSeparator, s as MessageListNotice, sn as PanelBody, st as MessageItemToolbarButton, tn as DropdownMenuSubmenu, tt as MessageReactionTooltipSeparator, u as MessageQuotedPreviewAttachment, un as PanelScrollContent, v as MessageQuotedPreviewHeader, vn as ScrollAreaViewport, vt as MessageItemSenderGroup, w as MessageEmbed, wn as TooltipContent, wt as MessageItemEmbedded, x as MessageQuotedPreviewThread, xn as CheckboxIndicator, xt as MessageItemBody, y as MessageQuotedPreviewLoading, yn as useMobileViewport, yt as MessageItemTime, z as MessageReferenceText, zn as DialogSurface, zt as DropdownMenu } from "./message-list-DP03T8gF.mjs";
+import { $ as MessageReactionTooltipNameText, $n as controlIconInset, $t as DropdownMenuSeparator, A as MessageTextSelectionToolbarButton, An as DialogBody, At as MessageItem, B as MessageReferenceUnavailable, Bn as DialogTitle, Bt as DropdownMenuCheckboxItem, C as MessageQuotedPreviewUnavailable, Cn as Tooltip, Ct as MessageItemEdited, D as MessageEmbedHeader, Dn as TooltipTrigger, Dt as MessageItemAvatarSlot, E as MessageEmbedFooter, En as TooltipProvider, Et as MessageItemSearchMatch, F as MessageReferenceChip, Fn as DialogHeader, Ft as AvatarGroup, G as MessageReactionGlyph, Gn as defaultNativeButton, Gt as DropdownMenuItemCount, H as MessageReactionChip, Hn as Button, Ht as DropdownMenuContent, I as MessageReferenceIndicator, In as DialogNav, It as AvatarGroupCount, J as MessageReactionQuickButton, Jn as resolveThemeScopeProps, Jt as DropdownMenuPopup, K as MessageReactionPickerContent, Kn as useParentOverlayKind, Kt as DropdownMenuItemLabel, L as MessageReferenceLabel, Ln as DialogOverlay, Lt as AvatarImage, M as MessageMultiSelect, Mn as DialogContent, Mt as Avatar, N as MessageMultiSelectCheckbox, Nn as DialogDescription, Nt as AvatarBadge, O as messageEmbed, On as Badge, Ot as MessageItemContinuationTime, P as MessageMultiSelectToolbar, Pn as DialogFooter, Pt as AvatarFallback, Q as MessageReactionTooltipName, Qn as tv, Qt as DropdownMenuRadioItemIndicator, R as MessageReferencePending, Rn as DialogPortal, Rt as useOverflowTitle, S as MessageQuotedPreviewTimestamp, Sn as PRESENCE_COLOR, St as MessageItemContent, T as MessageEmbedContent, Tn as TooltipPortal, Tt as MessageItemFooter, U as MessageReactionCount, Un as buttonVariants, Ut as DropdownMenuFooter, V as MessageReactionAddButton, Vn as DialogTrigger, Vt as DropdownMenuCheckboxItemIndicator, W as MessageReactionErrorIndicator, Wn as Spinner, Wt as DropdownMenuItem, X as MessageReactionTooltipContent, Xn as useTheme, Xt as DropdownMenuRadioGroup, Y as MessageReactionQuickRow, Yn as useThemeScopeProps, Yt as DropdownMenuPortal, Z as MessageReactionTooltipMeta, Zn as ThemeStateContext, Zt as DropdownMenuRadioItem, _ as MessageQuotedPreviewContent, _n as ScrollAreaThumb, _t as MessageItemSenderButton, a as MessageListDateDivider, an as KbdGroup, at as MessageItemSavedIndicator, b as MessageQuotedPreviewText, bn as Checkbox, bt as MessageItemAttachments, c as MessageList, cn as PanelFooter, d as MessageQuotedPreviewAttachments, dn as PanelScrollViewport, en as DropdownMenuShortcut, er as headEdgePull, et as MessageReactionTooltipNames, f as MessageQuotedPreviewAuthor, fn as PanelSection, ft as MessageItemHeader, g as MessageQuotedPreviewChannel, gn as ScrollAreaScrollbar, gt as MessageItemSenderBadges, h as MessageQuotedPreviewAuthorName, hn as ScrollAreaCorner, ht as MessageItemSender, in as Kbd, it as MessageItemReadReceipt, j as MessageTextSelectionToolbarSeparator, jn as DialogClose, jt as searchHit, k as MessageTextSelectionToolbar, kn as Dialog, kt as MessageItemGutter, l as MessageQuotedPreview, ln as PanelHeaderRoot, m as MessageQuotedPreviewAuthorMeta, mn as ScrollAreaContent, mt as MessageItemMeta, nn as DropdownMenuSubmenuTrigger, nt as MessageItemBadge, o as MessageListHistoryLimited, on as Panel, ot as MessageItemToolbar, pn as ScrollArea, pt as MessageItemInlineStatus, q as MessageReactionPickerStatic, qn as withOverlayLayer, qt as DropdownMenuLabel, rn as DropdownMenuTrigger, rt as MessageItemBadgeSeparator, s as MessageListNotice, sn as PanelBody, st as MessageItemToolbarButton, tn as DropdownMenuSubmenu, tr as headEdges, tt as MessageReactionTooltipSeparator, u as MessageQuotedPreviewAttachment, un as PanelScrollContent, v as MessageQuotedPreviewHeader, vn as ScrollAreaViewport, vt as MessageItemSenderGroup, w as MessageEmbed, wn as TooltipContent, wt as MessageItemEmbedded, x as MessageQuotedPreviewThread, xn as CheckboxIndicator, xt as MessageItemBody, y as MessageQuotedPreviewLoading, yn as useMobileViewport, yt as MessageItemTime, z as MessageReferenceText, zn as DialogSurface, zt as DropdownMenu } from "./message-list-YsCZpkr7.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Copy, FileText, Image, Info, 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";
@@ -40,7 +40,11 @@ const alertDialog = tv({
 			"overflow-clip rounded-dialog bg-layer-popover text-foreground",
 			"shadow-float ring-1 ring-line-seam"
 		],
-		header: ["grid grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0", "gap-2 px-5 pt-5"],
+		header: [
+			"grid grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0",
+			"gap-2 px-5 pt-5",
+			headEdgePull
+		],
 		body: [
 			"min-w-0",
 			"px-5 pt-1.5 pb-5 first:pt-5",
@@ -81,7 +85,7 @@ function AlertDialogClose({ className, variant, size, children, "aria-label": ar
 			variant: variant ?? "ghost",
 			size: size ?? "icon-md",
 			"aria-label": ariaLabel ?? "Close",
-			className: cn("-my-1.5 -mr-1.5", className)
+			className: cn("-my-1.5", className)
 		}),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4.5" })
@@ -172,30 +176,21 @@ function AlertDialogCancel({ className, variant, size, ...props }) {
 //#region src/components/panel/panel-header.recipe.ts
 /**
 * Where a head's edge controls sit, shared by every head (panel, section,
-* drawer, thread). Phone: a filled thing (a sticker, a pill) puts its shape
-* on 16. A ghost button has no shape, so its empty 44px box overhangs, and
-* the two edge buttons mirror each other: the last action (6px padding,
-* `panelHeadActions`' -3px) and a leading Back (16px padding, -13px) both sit
-* 3px from their edge. Their 22px icon frames are then 14px in and every
-* glyph's centre 25px in, whatever the glyph (an arrow, a gear, a narrow ⋮);
-* aligning ink instead would move each button by its glyph's own side
-* bearing. A Button straight in the head (ghost ones are PanelActions) is a
-* filled control, so its shape ends on the content edge: 20 / 16.
+* 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,
+* 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.
 */
-const panelHeadEdges = [
-	"pr-3 pl-5 max-md:pr-1.5 max-md:pl-4",
-	"max-md:[&>[data-slot=panel-action]:first-child]:-ml-[13px]",
-	"[&>[data-slot=button]:last-child]:mr-2 max-md:[&>[data-slot=button]:last-child]:mr-2.5"
-];
+const panelHeadEdges = headEdges;
 /**
-* A head's trailing actions. The last glyph ends on the head's edge: 20px on
-* desktop (12px of padding, 1px here, the 32px button's 7px glyph inset); on
-* a phone 14px in (44px buttons, 11px inset), mirroring a leading Back. The
-* margin and gap follow the button's size, not the layout: a touch screen
-* from 768px has the desktop head with 44px buttons, so -3px puts its last
-* glyph on 20px too.
+* A head's trailing actions, 2px apart (4px on a desktop). The group declares
+* its PanelActions' icon inset, so the head pulls the group, not its last
+* 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 mr-[-3px] md:pointer-fine:mr-px md:pointer-fine:gap-1";
+const panelHeadActions = ["flex shrink-0 items-center gap-0.5 md:pointer-fine:gap-1", controlIconInset];
 /**
 * `header` and `sectionHeader` share one bar, expressed through
 * `compoundSlots`: a 56px row (the shell header height) with a seam under it.
@@ -336,7 +331,7 @@ const drawer = tv({
 			"before:rounded-[1px] before:bg-line-seam"
 		],
 		close: ["shrink-0"],
-		closeIcon: ["size-5.5"],
+		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"],
 		footer: ["mt-auto py-5", "px-4 pt-3 pb-4"],
@@ -1662,6 +1657,7 @@ const sidebarRecipe = tv({ slots: {
 		"h-(--shell-header-height,56px) shrink-0 gap-2 border-b border-line-seam px-5",
 		"bg-layer-sidebar text-foreground",
 		"max-md:bg-layer-frame max-md:px-4 max-md:text-foreground-on-frame",
+		headEdgePull,
 		"[@media(max-height:600px)]:h-12"
 	],
 	sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 -z-10 hidden"],
@@ -2626,9 +2622,9 @@ const contextMenu = tv({ slots: {
 		"shadow-float ring-1 ring-line-seam"
 	],
 	item: [
-		"flex w-full cursor-default select-none items-center [@media(max-height:600px)]:py-1",
+		"flex w-full cursor-default select-none items-center",
 		"text-left outline-none transition-colors",
-		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+		"min-h-option gap-2.5 rounded-control px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
 		"data-checked:font-bold",
@@ -2639,7 +2635,7 @@ const contextMenu = tv({ slots: {
 	radioItem: [
 		"flex w-full cursor-default select-none items-center",
 		"text-left outline-none transition-colors",
-		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+		"min-h-option gap-2.5 rounded-control px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
 		"data-checked:font-bold",
@@ -2648,9 +2644,9 @@ const contextMenu = tv({ slots: {
 		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
 	],
 	submenuTrigger: [
-		"flex w-full cursor-default select-none items-center [@media(max-height:600px)]:py-1",
+		"flex w-full cursor-default select-none items-center",
 		"text-left outline-none transition-colors",
-		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+		"min-h-option gap-2.5 rounded-control px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft data-highlighted:bg-brand-soft data-popup-open:bg-brand-soft",
 		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
@@ -2888,7 +2884,8 @@ const lightbox = tv({ slots: {
 		"pt-[calc(env(safe-area-inset-top,0px)+--spacing(3))]",
 		"pl-[calc(env(safe-area-inset-left,0px)+--spacing(4))]",
 		"pr-[calc(env(safe-area-inset-right,0px)+--spacing(4))]",
-		"bg-transparent shadow-none"
+		"bg-transparent shadow-none",
+		headEdgePull
 	],
 	toolbar: [
 		"pointer-events-auto shrink-0 flex items-center gap-3",
@@ -2896,7 +2893,8 @@ const lightbox = tv({ slots: {
 		"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",
-		"border-b border-line-seam bg-layer-canvas shadow-none"
+		"border-b border-line-seam bg-layer-canvas shadow-none",
+		headEdgePull
 	],
 	headerMeta: ["flex min-w-0 flex-1 items-center gap-1.5"],
 	headerLabel: [
@@ -2905,7 +2903,11 @@ const lightbox = tv({ slots: {
 		"font-sans text-caption font-semibold normal-case tracking-normal text-foreground-muted"
 	],
 	title: ["min-w-0 flex-1 truncate", "py-0 font-sans text-headline font-bold text-foreground"],
-	actions: ["flex shrink-0 items-center", "gap-1"],
+	actions: [
+		"flex shrink-0 items-center",
+		"gap-1",
+		"[&>[data-icon-inset]:last-child]:-mr-icon-inset"
+	],
 	stage: ["pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"],
 	media: ["pointer-events-auto max-h-[80vh] max-w-[86vw] border-0 bg-transparent shadow-none"],
 	navigationButton: [
@@ -3795,11 +3797,12 @@ const inputGroup = tv({
 			"[&>svg:not([class*='size-'])]:size-4.5"
 		],
 		text: [
-			"block min-w-0 max-w-1/2 shrink-0 content-center truncate px-3",
+			"flex min-w-0 max-w-1/2 shrink-0 items-center px-3",
 			"select-none",
 			"font-mono text-mono-code",
 			"text-(--ig-text-fg,var(--ig-text-fg-default,var(--foreground-hint)))"
 		],
+		textInner: ["min-w-0 truncate"],
 		control: [
 			"min-w-0 flex-1 bg-transparent pl-3 outline-none",
 			"pr-(--ig-control-pr,0.75rem)",
@@ -3904,8 +3907,8 @@ function InputGroupAddonRoot({ align = "inline-start", variant = "default", clas
 		...props
 	});
 }
-function TextAddon({ align = "inline-start", variant = "default", className, ref, title, ...props }) {
-	const { text } = inputGroup({
+function TextAddon({ align = "inline-start", variant = "default", className, ref, title, children, ...props }) {
+	const { text, textInner } = inputGroup({
 		align,
 		variant
 	});
@@ -3918,7 +3921,12 @@ function TextAddon({ align = "inline-start", variant = "default", className, ref
 		"data-variant": variant,
 		"data-input-group-trim": variant === "default" && align === "inline-end" ? align : void 0,
 		className: text({ className }),
-		...props
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "input-group-text-value",
+			className: textInner(),
+			children
+		})
 	});
 }
 const InputGroupAddon = Object.assign(InputGroupAddonRoot, { Text: TextAddon });
@@ -4000,7 +4008,7 @@ const combobox = tv({
 		item: [
 			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
 			"text-left outline-none transition-colors",
-			"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+			"min-h-option gap-2.5 rounded-control px-2.5 py-option-inset",
 			"font-sans text-callout font-medium text-foreground wrap-anywhere",
 			"bg-transparent hover:bg-brand-soft data-highlighted:bg-brand-soft",
 			"data-selected:font-bold",
@@ -4429,7 +4437,7 @@ const select = tv({
 		item: [
 			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
 			"text-left outline-none transition-colors",
-			"min-h-9 flex-wrap gap-x-2.5 gap-y-0.5 rounded-control px-2.5 py-1.5",
+			"min-h-option flex-wrap gap-x-2.5 gap-y-0.5 rounded-control px-2.5 py-option-inset",
 			"text-callout font-medium text-foreground",
 			"bg-transparent hover:bg-brand-soft data-highlighted:bg-brand-soft",
 			"data-selected:font-bold data-selected:**:data-[slot='select-item-text']:font-bold",
@@ -9887,7 +9895,11 @@ const notificationCenter = tv({
 			"rounded-container bg-layer-popover text-foreground",
 			"shadow-float ring-1 ring-line-seam"
 		],
-		header: ["flex items-center px-4", "min-h-13 gap-2 border-b border-line-seam py-0 pr-2 pl-4"],
+		header: [
+			"flex items-center px-4",
+			"min-h-13 gap-2 border-b border-line-seam py-0",
+			headEdgePull
+		],
 		title: ["font-sans text-headline text-foreground"],
 		count: ["ml-auto", "font-mono text-mono-meta text-foreground-hint"],
 		scroller: ["min-h-0 flex-1 overflow-y-auto overscroll-contain"],
@@ -11131,7 +11143,8 @@ const panelActionBase = tv({ base: [
 	"text-foreground",
 	"hover:bg-fill-pressed active:bg-fill-pressed",
 	"focus-visible:shadow-focus",
-	"[&>svg]:size-control-icon"
+	"[&>svg]:size-control-icon",
+	controlIconInset
 ] });
 const panelAction = tv({
 	extend: panelActionBase,
@@ -11163,6 +11176,7 @@ function PanelAction({ className, render, nativeButton, ...props }) {
 		nativeButton: nativeButton ?? defaultNativeButton(render),
 		type: "button",
 		"data-slot": "panel-action",
+		"data-icon-inset": "",
 		className: panelAction({ className })
 	});
 }
@@ -11539,6 +11553,7 @@ function PanelActions({ className, render, ...props }) {
 	const { actions } = panelHeader();
 	const defaultProps = {
 		"data-slot": "panel-actions",
+		"data-icon-inset": "",
 		className: actions({ className })
 	};
 	return useRender({
@@ -11554,6 +11569,7 @@ function PanelToggleAction({ className, ...props }) {
 		...props,
 		type: "button",
 		"data-slot": "panel-toggle-action",
+		"data-icon-inset": "",
 		className: panelToggleAction({ className })
 	});
 }
@@ -11775,6 +11791,7 @@ function ThreadPanelActions({ className, render, ...props }) {
 	const { actions } = threadPanel();
 	const defaultProps = {
 		"data-slot": "thread-panel-actions",
+		"data-icon-inset": "",
 		className: actions({ className })
 	};
 	return useRender({

package/dist/{message-list-DP03T8gF.mjs → message-list-YsCZpkr7.mjs}

@@ -14,6 +14,37 @@ import { Avatar } from "@base-ui/react";
 import { Menu } from "@base-ui/react/menu";
 import { Toggle } from "@base-ui/react/toggle";
 import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/lib/head-edges.ts
+/**
+* The ends of a header (design/foundations/alignment.md#the-ends-of-a-header).
+*
+* A head pads both sides by its column's content margin, so a shape (a
+* sticker, a filled button) and text land on the margin as they are. A
+* frameless icon button declares how far its icon box sits inside its edge,
+* `--icon-inset` = (button - icon) / 2, and the head pulls its first and last
+* child outward by that much: the icon box lands on the margin and the
+* button's empty hit area hangs past it, toward the edge. The two ends mirror,
+* and the line holds at every button size (32px with an 18px icon on a
+* desktop, 44px with a 22px icon on a phone and a touch screen) without a
+* number per size or per breakpoint. A title, a sticker or a filled button
+* declares no inset and stays on the margin.
+*
+* An element that declares an inset also carries `data-icon-inset`, which
+* anchors the head's `:first-child` / `:last-child` (packages/ui/CLAUDE.md,
+* Selector Cost). A group of actions declares its buttons' inset itself, so
+* the pull holds when its last action is hidden at some width.
+*/
+/** The pull alone, for a head whose padding is already its margin (a dialog's 20px). */
+const headEdgePull = ["[&>[data-icon-inset]:first-child]:-ml-icon-inset", "[&>[data-icon-inset]:last-child]:-mr-icon-inset"];
+/** A panel's head: the margin, 20px on a desktop and 16px on a phone, and the pull. */
+const headEdges = ["px-5 max-md:px-4", ...headEdgePull];
+/**
+* The inset of a control-height icon button (a PanelAction, a Button at
+* `icon-lg`): 7px on a desktop, 11px on a phone and on a touch screen. Written
+* as the arithmetic so it follows the control tokens wherever they switch.
+*/
+const controlIconInset = "[--icon-inset:calc((var(--control-height)-var(--control-icon-size))/2)]";
+//#endregion
 //#region src/lib/tv.ts
 const tv$1 = ((options) => {
 	const recipe = tv(options);
@@ -300,6 +331,20 @@ const buttonVariants = tv$1({
 			],
 			class: { root: ["disabled:border-transparent disabled:bg-transparent", "aria-disabled:border-transparent aria-disabled:bg-transparent"] }
 		},
+		{
+			variant: ["ghost", "on-frame"],
+			size: "icon-lg",
+			class: { root: controlIconInset }
+		},
+		{
+			variant: "ghost",
+			size: [
+				"icon-xs",
+				"icon-sm",
+				"icon-md"
+			],
+			class: { root: "[--icon-inset:calc((--spacing(8)-18px)/2)]" }
+		},
 		{
 			variant: "on-frame",
 			size: [
@@ -316,10 +361,17 @@ const buttonVariants = tv$1({
 				"icon-sm",
 				"icon-md"
 			],
-			class: { root: "size-9 after:-inset-[calc(--spacing(1)+1.5px)] [&_svg:not([class*='size-'])]:size-5" }
+			class: { root: ["size-9 after:-inset-[calc(--spacing(1)+1.5px)] [&_svg:not([class*='size-'])]:size-5", "[--icon-inset:calc((--spacing(9)-20px)/2)]"] }
 		}
 	]
 });
+const FRAMELESS = /* @__PURE__ */ new Set(["ghost", "on-frame"]);
+const ICON_SIZES = /* @__PURE__ */ new Set([
+	"icon-xs",
+	"icon-sm",
+	"icon-md",
+	"icon-lg"
+]);
 function Button$1({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
 	const { root, content, loadingIndicator } = buttonVariants({
 		variant,
@@ -330,6 +382,7 @@ function Button$1({ variant, size, loading = false, loadingLabel = "Loading", di
 		render,
 		nativeButton: nativeButton ?? defaultNativeButton(render),
 		"data-slot": "button",
+		"data-icon-inset": FRAMELESS.has(variant ?? "default") && ICON_SIZES.has(size ?? "md") ? "" : void 0,
 		className: root({ className }),
 		"data-loading": loading ? "true" : void 0,
 		disabled: disabled || loading,
@@ -357,7 +410,11 @@ const dialog = tv$1({
 			"overflow-clip rounded-dialog bg-layer-popover text-foreground",
 			"shadow-float ring-1 ring-line-seam"
 		],
-		header: ["grid shrink-0 grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0", "gap-2 px-5 pt-5"],
+		header: [
+			"grid shrink-0 grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0",
+			"gap-2 px-5 pt-5",
+			headEdgePull
+		],
 		body: [
 			"min-w-0 flex-1 overflow-y-auto",
 			"px-5 pt-1.5 pb-5 first:pt-5",
@@ -468,7 +525,7 @@ function DialogClose({ className, variant, size, children, render, "aria-label":
 			variant: variant ?? "ghost",
 			size: size ?? "icon-md",
 			"aria-label": ariaLabel ?? "Close",
-			className: cn("-my-1.5 -mr-1.5", className)
+			className: cn("-my-1.5", className)
 		}),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4.5" })
@@ -1253,9 +1310,9 @@ const dropdownMenu = tv$1({ slots: {
 		"shadow-float ring-1 ring-line-seam"
 	],
 	item: [
-		"flex w-full cursor-default select-none items-center [@media(max-height:600px)]:py-1",
+		"flex w-full cursor-default select-none items-center",
 		"text-left outline-none transition-colors",
-		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+		"min-h-option gap-2.5 rounded-control px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
 		"data-checked:font-bold data-[selected]:font-bold data-[emphasis=strong]:font-bold",
@@ -1266,7 +1323,7 @@ const dropdownMenu = tv$1({ slots: {
 	radioItem: [
 		"flex w-full cursor-default select-none items-center",
 		"text-left outline-none transition-colors",
-		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+		"min-h-option gap-2.5 rounded-control px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
 		"data-checked:font-bold",
@@ -1275,9 +1332,9 @@ const dropdownMenu = tv$1({ slots: {
 		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
 	],
 	submenuTrigger: [
-		"flex w-full cursor-default select-none items-center [@media(max-height:600px)]:py-1",
+		"flex w-full cursor-default select-none items-center",
 		"text-left outline-none transition-colors",
-		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+		"min-h-option gap-2.5 rounded-control px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft data-highlighted:bg-brand-soft data-popup-open:bg-brand-soft",
 		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
@@ -1539,6 +1596,13 @@ function assign(ref, node) {
 * It watches the element and its children, so a part whose text sits in a
 * child that truncates (a chip's label) is covered too. A `title` the caller
 * passes wins, and is never touched.
+*
+* Pass a stable `ref`: a ref object, or a callback ref made with `useCallback`
+* (or defined outside the component). The returned callback ref changes
+* whenever `ref` does, and React then detaches and re-attaches it, so an inline
+* `ref={(node) => ...}` disconnects and rebuilds both observers on every render.
+* The title stays right, but each render pays for new observers and a fresh
+* measurement.
 */
 function useOverflowTitle(ref, title) {
 	const cleanup = useRef(void 0);
@@ -3221,4 +3285,4 @@ function MessageListJumpPillDismiss({ className, children, render, nativeButton,
 	});
 }
 //#endregion
-export { MessageReactionTooltipNameText as $, DropdownMenuSeparator as $t, MessageTextSelectionToolbarButton as A, DialogBody as An, MessageItem as At, MessageReferenceUnavailable as B, DialogTitle as Bn, DropdownMenuCheckboxItem as Bt, MessageQuotedPreviewUnavailable as C, Tooltip$1 as Cn, MessageItemEdited as Ct, MessageEmbedHeader as D, TooltipTrigger as Dn, MessageItemAvatarSlot as Dt, MessageEmbedFooter as E, TooltipProvider as En, MessageItemSearchMatch as Et, MessageReferenceChip as F, DialogHeader as Fn, AvatarGroup as Ft, MessageReactionGlyph as G, defaultNativeButton as Gn, DropdownMenuItemCount as Gt, MessageReactionChip as H, Button$1 as Hn, DropdownMenuContent as Ht, MessageReferenceIndicator as I, DialogNav as In, AvatarGroupCount as It, MessageReactionQuickButton as J, resolveThemeScopeProps as Jn, DropdownMenuPopup as Jt, MessageReactionPickerContent as K, useParentOverlayKind as Kn, DropdownMenuItemLabel as Kt, MessageReferenceLabel as L, DialogOverlay as Ln, AvatarImage as Lt, MessageMultiSelect as M, DialogContent as Mn, Avatar$1 as Mt, MessageMultiSelectCheckbox as N, DialogDescription as Nn, AvatarBadge as Nt, messageEmbed as O, Badge as On, MessageItemContinuationTime as Ot, MessageMultiSelectToolbar as P, DialogFooter as Pn, AvatarFallback as Pt, MessageReactionTooltipName as Q, tv$1 as Qn, DropdownMenuRadioItemIndicator as Qt, MessageReferencePending as R, DialogPortal as Rn, useOverflowTitle as Rt, MessageQuotedPreviewTimestamp as S, PRESENCE_COLOR as Sn, MessageItemContent as St, MessageEmbedContent as T, TooltipPortal as Tn, MessageItemFooter as Tt, MessageReactionCount as U, buttonVariants as Un, DropdownMenuFooter as Ut, MessageReactionAddButton as V, DialogTrigger as Vn, DropdownMenuCheckboxItemIndicator as Vt, MessageReactionErrorIndicator as W, Spinner as Wn, DropdownMenuItem as Wt, MessageReactionTooltipContent as X, useTheme as Xn, DropdownMenuRadioGroup as Xt, MessageReactionQuickRow as Y, useThemeScopeProps as Yn, DropdownMenuPortal as Yt, MessageReactionTooltipMeta as Z, ThemeStateContext as Zn, DropdownMenuRadioItem as Zt, MessageQuotedPreviewContent as _, ScrollAreaThumb as _n, MessageItemSenderButton as _t, MessageListDateDivider as a, KbdGroup as an, MessageItemSavedIndicator as at, MessageQuotedPreviewText as b, Checkbox$1 as bn, MessageItemAttachments as bt, MessageList as c, PanelFooter as cn, MessageItemDelegatedAvatar as ct, MessageQuotedPreviewAttachments as d, PanelScrollViewport as dn, MessageItemDelegatedByName as dt, DropdownMenuShortcut as en, MessageReactionTooltipNames as et, MessageQuotedPreviewAuthor as f, PanelSection as fn, MessageItemHeader as ft, MessageQuotedPreviewChannel as g, ScrollAreaScrollbar as gn, MessageItemSenderBadges as gt, MessageQuotedPreviewAuthorName as h, ScrollAreaCorner as hn, MessageItemSender as ht, MessageListJumpPillGroup as i, Kbd as in, MessageItemReadReceipt as it, MessageTextSelectionToolbarSeparator as j, DialogClose as jn, searchHit as jt, MessageTextSelectionToolbar as k, Dialog$1 as kn, MessageItemGutter as kt, MessageQuotedPreview as l, PanelHeaderRoot as ln, MessageItemDelegatedBy as lt, MessageQuotedPreviewAuthorMeta as m, ScrollAreaContent as mn, MessageItemMeta as mt, MessageListJumpPill as n, DropdownMenuSubmenuTrigger as nn, MessageItemBadge as nt, MessageListHistoryLimited as o, Panel as on, MessageItemToolbar as ot, MessageQuotedPreviewAuthorDelegatedBy as p, ScrollArea$1 as pn, MessageItemInlineStatus as pt, MessageReactionPickerStatic as q, withOverlayLayer as qn, DropdownMenuLabel as qt, MessageListJumpPillDismiss as r, DropdownMenuTrigger as rn, MessageItemBadgeSeparator as rt, MessageListNotice as s, PanelBody as sn, MessageItemToolbarButton as st, MessageListJumpControls as t, DropdownMenuSubmenu as tn, MessageReactionTooltipSeparator as tt, MessageQuotedPreviewAttachment as u, PanelScrollContent as un, MessageItemDelegatedByButton as ut, MessageQuotedPreviewHeader as v, ScrollAreaViewport as vn, MessageItemSenderGroup as vt, MessageEmbed as w, TooltipContent as wn, MessageItemEmbedded as wt, MessageQuotedPreviewThread as x, CheckboxIndicator as xn, MessageItemBody as xt, MessageQuotedPreviewLoading as y, useMobileViewport as yn, MessageItemTime as yt, MessageReferenceText as z, DialogSurface as zn, DropdownMenu as zt };
+export { MessageReactionTooltipNameText as $, controlIconInset as $n, DropdownMenuSeparator as $t, MessageTextSelectionToolbarButton as A, DialogBody as An, MessageItem as At, MessageReferenceUnavailable as B, DialogTitle as Bn, DropdownMenuCheckboxItem as Bt, MessageQuotedPreviewUnavailable as C, Tooltip$1 as Cn, MessageItemEdited as Ct, MessageEmbedHeader as D, TooltipTrigger as Dn, MessageItemAvatarSlot as Dt, MessageEmbedFooter as E, TooltipProvider as En, MessageItemSearchMatch as Et, MessageReferenceChip as F, DialogHeader as Fn, AvatarGroup as Ft, MessageReactionGlyph as G, defaultNativeButton as Gn, DropdownMenuItemCount as Gt, MessageReactionChip as H, Button$1 as Hn, DropdownMenuContent as Ht, MessageReferenceIndicator as I, DialogNav as In, AvatarGroupCount as It, MessageReactionQuickButton as J, resolveThemeScopeProps as Jn, DropdownMenuPopup as Jt, MessageReactionPickerContent as K, useParentOverlayKind as Kn, DropdownMenuItemLabel as Kt, MessageReferenceLabel as L, DialogOverlay as Ln, AvatarImage as Lt, MessageMultiSelect as M, DialogContent as Mn, Avatar$1 as Mt, MessageMultiSelectCheckbox as N, DialogDescription as Nn, AvatarBadge as Nt, messageEmbed as O, Badge as On, MessageItemContinuationTime as Ot, MessageMultiSelectToolbar as P, DialogFooter as Pn, AvatarFallback as Pt, MessageReactionTooltipName as Q, tv$1 as Qn, DropdownMenuRadioItemIndicator as Qt, MessageReferencePending as R, DialogPortal as Rn, useOverflowTitle as Rt, MessageQuotedPreviewTimestamp as S, PRESENCE_COLOR as Sn, MessageItemContent as St, MessageEmbedContent as T, TooltipPortal as Tn, MessageItemFooter as Tt, MessageReactionCount as U, buttonVariants as Un, DropdownMenuFooter as Ut, MessageReactionAddButton as V, DialogTrigger as Vn, DropdownMenuCheckboxItemIndicator as Vt, MessageReactionErrorIndicator as W, Spinner as Wn, DropdownMenuItem as Wt, MessageReactionTooltipContent as X, useTheme as Xn, DropdownMenuRadioGroup as Xt, MessageReactionQuickRow as Y, useThemeScopeProps as Yn, DropdownMenuPortal as Yt, MessageReactionTooltipMeta as Z, ThemeStateContext as Zn, DropdownMenuRadioItem as Zt, MessageQuotedPreviewContent as _, ScrollAreaThumb as _n, MessageItemSenderButton as _t, MessageListDateDivider as a, KbdGroup as an, MessageItemSavedIndicator as at, MessageQuotedPreviewText as b, Checkbox$1 as bn, MessageItemAttachments as bt, MessageList as c, PanelFooter as cn, MessageItemDelegatedAvatar as ct, MessageQuotedPreviewAttachments as d, PanelScrollViewport as dn, MessageItemDelegatedByName as dt, DropdownMenuShortcut as en, headEdgePull as er, MessageReactionTooltipNames as et, MessageQuotedPreviewAuthor as f, PanelSection as fn, MessageItemHeader as ft, MessageQuotedPreviewChannel as g, ScrollAreaScrollbar as gn, MessageItemSenderBadges as gt, MessageQuotedPreviewAuthorName as h, ScrollAreaCorner as hn, MessageItemSender as ht, MessageListJumpPillGroup as i, Kbd as in, MessageItemReadReceipt as it, MessageTextSelectionToolbarSeparator as j, DialogClose as jn, searchHit as jt, MessageTextSelectionToolbar as k, Dialog$1 as kn, MessageItemGutter as kt, MessageQuotedPreview as l, PanelHeaderRoot as ln, MessageItemDelegatedBy as lt, MessageQuotedPreviewAuthorMeta as m, ScrollAreaContent as mn, MessageItemMeta as mt, MessageListJumpPill as n, DropdownMenuSubmenuTrigger as nn, MessageItemBadge as nt, MessageListHistoryLimited as o, Panel as on, MessageItemToolbar as ot, MessageQuotedPreviewAuthorDelegatedBy as p, ScrollArea$1 as pn, MessageItemInlineStatus as pt, MessageReactionPickerStatic as q, withOverlayLayer as qn, DropdownMenuLabel as qt, MessageListJumpPillDismiss as r, DropdownMenuTrigger as rn, MessageItemBadgeSeparator as rt, MessageListNotice as s, PanelBody as sn, MessageItemToolbarButton as st, MessageListJumpControls as t, DropdownMenuSubmenu as tn, headEdges as tr, MessageReactionTooltipSeparator as tt, MessageQuotedPreviewAttachment as u, PanelScrollContent as un, MessageItemDelegatedByButton as ut, MessageQuotedPreviewHeader as v, ScrollAreaViewport as vn, MessageItemSenderGroup as vt, MessageEmbed as w, TooltipContent as wn, MessageItemEmbedded as wt, MessageQuotedPreviewThread as x, CheckboxIndicator as xn, MessageItemBody as xt, MessageQuotedPreviewLoading as y, useMobileViewport as yn, MessageItemTime as yt, MessageReferenceText as z, DialogSurface as zn, DropdownMenu as zt };

package/dist/style.css

@@ -1247,7 +1247,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 10px;
-  padding: 6px 10px;
+  padding: calc(18px - .5lh) 10px;
   font-weight: 500;
   transition: background-color .12s, color .12s;
   display: flex;

package/dist/styles.css

@@ -370,6 +370,31 @@
   --spacing-control-cta: var(--control-height-cta);
   --spacing-control-icon: var(--control-icon-size);
   --spacing-control-hit: var(--control-hit-inset);
+  /* ─── Option metric axis ────────────────────────────────────────────────────
+     An option in a popup list (a Select, Combobox or ComboboxSelect option, a
+     menu item) is as tall as its content, with the same space above and below
+     its text whatever that content is (design/patterns/forms.md#option-height).
+     `py-option-inset` is that space: what a 36px row leaves around one line of the
+     option's own type (`1lh`, so 7px around a 22px line, 8px around 20px, 6px
+     around 24px). One line is exactly 36px; a second line, wrapped or a
+     description, adds its own height and nothing else. `min-h-option` is the
+     floor for an option with no text line, such as an empty one.
+
+     Consumers: `SelectItem`, `ComboboxItem`, the menu items of `DropdownMenu`
+     and `ContextMenu`, and `.r-combobox-select__option` (which writes the same
+     calc in its CSS). */
+  --spacing-option: 2.25rem;
+  --spacing-option-inset: calc((2.25rem - 1lh) / 2);
+  /* ─── Icon inset ────────────────────────────────────────────────────────────
+     How far a frameless icon button's icon box sits inside its edge:
+     (button - icon) / 2. 7px for a 32px button with an 18px icon, 11px for a
+     44px one with a 22px icon. The button declares it (`--icon-inset`, see
+     lib/head-edges.ts) and a head pulls its first and last child outward by
+     it (`-ml-icon-inset`, `-mr-icon-inset`), so the icon box, not the button,
+     lands on the head's content margin at every button size
+     (design/foundations/alignment.md#the-ends-of-a-header). A shape or text
+     declares nothing and stays on the margin. */
+  --spacing-icon-inset: var(--icon-inset);
 
   /* Deprecated utility names, kept until raft-ui 1.0 (see codemods/token-names.mjs). */
   --color-foreground-strong: var(--foreground);
@@ -435,6 +460,14 @@
   --shadow-raft-focus: var(--focus-ring);
 }
 
+/* Not inherited, so a wrapper never takes its button's inset: only the element
+   that declares it moves. */
+@property --icon-inset {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
 *,
 ::before,
 ::after {

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { Bn as DialogTitle, Gn as defaultNativeButton, Hn as Button$1, Mn as DialogContent, Qn as tv, Rt as useOverflowTitle, Vn as DialogTrigger, Xn as useTheme, Yn as useThemeScopeProps, ct as MessageItemDelegatedAvatar, dt as MessageItemDelegatedByName, i as MessageListJumpPillGroup, jn as DialogClose, kn as Dialog, lt as MessageItemDelegatedBy, n as MessageListJumpPill, p as MessageQuotedPreviewAuthorDelegatedBy, r as MessageListJumpPillDismiss, t as MessageListJumpControls, ut as MessageItemDelegatedByButton } from "./message-list-DP03T8gF.mjs";
+import { Bn as DialogTitle, Gn as defaultNativeButton, Hn as Button$1, Mn as DialogContent, Qn as tv, Rt as useOverflowTitle, Vn as DialogTrigger, Xn as useTheme, Yn as useThemeScopeProps, ct as MessageItemDelegatedAvatar, dt as MessageItemDelegatedByName, i as MessageListJumpPillGroup, jn as DialogClose, kn as Dialog, lt as MessageItemDelegatedBy, n as MessageListJumpPill, p as MessageQuotedPreviewAuthorDelegatedBy, r as MessageListJumpPillDismiss, t as MessageListJumpControls, ut as MessageItemDelegatedByButton } from "./message-list-YsCZpkr7.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
 import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",