@botiverse/raft-ui 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,6 +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`, `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
+
+- **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
+
+- **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

@@ -77,6 +77,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* An option wraps onto a second line before it is cut off, so two long values
+   that share a beginning can still be told apart (forms.md#long-values-in-fields). */
+.r-combobox-select__option .r-combobox-select__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
 .r-combobox-select__actions {
   display: inline-flex;
   align-items: center;
@@ -162,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: 0 10px;
+  padding: calc((36px - 1lh) / 2) 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/dist/foundation.css

@@ -11,7 +11,10 @@
                  hairline < seam < strong for line
      layer = places on the elevation ladder; fill = neutral interaction fills
      (resting/hover/active/disabled surfaces): fill-muted and fill-strong are
-     opaque, the -pressed overlays are translucent ink laid over a surface.
+     opaque, the -pressed and -hover overlays are translucent ink laid over a
+     surface (a row hovers with fill-row-hover or fill-message-hover, and a
+     row with its menu open takes fill-row-open, all lighter than any
+     selection tint; press keeps fill-pressed).
    Families:  {family}(-{slot})
      family = brand | attention | info | success | warning | danger | inactive
      slot   = -strong (deep shade: readable text, rings) > bare (solid fill)
@@ -21,8 +24,8 @@
                 an opted-in family always gets both)
    Washes:    ink-{alpha%} (2..40) — neutral overlays, hairlines, hover fills.
    Opacity rule: layer tokens are opaque in every theme, except the two
-   backdrops (overlays by contract); among fills only the -pressed overlays are
-   translucent.
+   backdrops (overlays by contract); among fills only the -pressed and -hover
+   overlays are translucent.
    Interaction fills: transparent resting → ink-N directly; solid family fill →
    the family's -hover/-active pair; neutral or tinted surface → step up its ladder.
    Escape hatches: ink ramp for one-off washes; inline oklch() literals for
@@ -168,6 +171,19 @@
   --fill-strong: oklch(0.936 0.0006 17.62);
   --fill-frame-pressed: oklch(0.1813 0.005 17.62 / 0.122);
   --fill-pressed: oklch(0.1813 0.005 17.62 / 0.078);
+  /* Hover on a whole row (sidebar, list, inbox, search result, table, file row):
+     one perceptible step (OKLab dE about 2.8 in both modes), below every
+     selection tint, so text keeps its contrast. */
+  --fill-row-hover: oklch(0.1813 0.005 17.62 / 0.04);
+  /* Hover on a message: the lightest perceptible step (OKLab dE about 2.1 in
+     both modes), because a message is a large block someone reads with the
+     pointer resting on it. */
+  --fill-message-hover: oklch(0.1813 0.005 17.62 / 0.03);
+  /* Any row with its menu open (right-click, its menu button, press and hold):
+     one step over a hover (OKLab dE 3.4 to 4.3 on every row surface), because on
+     a phone, which has no hover, it is the only sign of which row the menu acts
+     on. Still under info-soft and brand-soft on every surface. */
+  --fill-row-open: oklch(0.1813 0.005 17.62 / 0.05);
   --line-strong: oklch(0.1813 0.005 17.62);
   --line-seam: oklch(0.1813 0.005 17.62 / 0.451);
   --line-hairline: oklch(0.1813 0.005 17.62 / 0.149);
@@ -326,6 +342,9 @@
   --fill-strong: oklch(0.3474 0.0051 106.66);
   --fill-frame-pressed: oklch(0.9843 0.004 106.47 / 0.078);
   --fill-pressed: oklch(0.9843 0.004 106.47 / 0.078);
+  --fill-row-hover: oklch(0.9843 0.004 106.47 / 0.03);
+  --fill-message-hover: oklch(0.9843 0.004 106.47 / 0.022);
+  --fill-row-open: oklch(0.9843 0.004 106.47 / 0.04);
   --line-strong: oklch(0.9211 0.004 106.48);
   --line-seam: oklch(0.9843 0.004 106.47 / 0.259);
   --line-hairline: oklch(0.9843 0.004 106.47 / 0.102);
@@ -407,6 +426,9 @@
     --fill-strong: oklch(0.3474 0.0051 106.66);
     --fill-frame-pressed: oklch(0.9843 0.004 106.47 / 0.078);
     --fill-pressed: oklch(0.9843 0.004 106.47 / 0.078);
+    --fill-row-hover: oklch(0.9843 0.004 106.47 / 0.03);
+    --fill-message-hover: oklch(0.9843 0.004 106.47 / 0.022);
+    --fill-row-open: oklch(0.9843 0.004 106.47 / 0.04);
     --line-strong: oklch(0.9211 0.004 106.48);
     --line-seam: oklch(0.9843 0.004 106.47 / 0.259);
     --line-hairline: oklch(0.9843 0.004 106.47 / 0.102);

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, ...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;
 };
@@ -1315,7 +1318,7 @@ export declare function ComboboxCollection(props: ComboboxCollectionProps): impo
 type ComboboxChipsProps = StyledProps<Combobox$1.Chips.Props>;
 export declare function ComboboxChips({ className, ...props }: ComboboxChipsProps): import("react").JSX.Element;
 type ComboboxChipProps = StyledProps<Combobox$1.Chip.Props>;
-export declare function ComboboxChip({ className, ...props }: ComboboxChipProps): import("react").JSX.Element;
+export declare function ComboboxChip({ className, ref, title, ...props }: ComboboxChipProps): import("react").JSX.Element;
 type ComboboxChipRemoveProps = StyledProps<Combobox$1.ChipRemove.Props>;
 export declare function ComboboxChipRemove({ className, children, ...props }: ComboboxChipRemoveProps): import("react").JSX.Element;
 //#endregion
@@ -1337,7 +1340,7 @@ export declare function Select<Value, Multiple extends boolean | undefined = fal
 type SelectTriggerProps = StyledProps<Select$1.Trigger.Props> & DataAttributes$1;
 export declare function SelectTrigger({ className, children, render, "data-invalid": dataInvalid, ...props }: SelectTriggerProps): import("react").JSX.Element;
 type SelectValueProps = StyledProps<Select$1.Value.Props>;
-export declare function SelectValue({ className, ...props }: SelectValueProps): import("react").JSX.Element;
+export declare function SelectValue({ className, ref, title, ...props }: SelectValueProps): import("react").JSX.Element;
 type SelectIconProps = StyledProps<Select$1.Icon.Props>;
 export declare function SelectIcon({ className, children, ...props }: SelectIconProps): import("react").JSX.Element;
 type SelectPortalProps = Select$1.Portal.Props;
@@ -1357,7 +1360,7 @@ export declare function SelectItemLeading({ className, ...props }: SelectItemLea
 type SelectItemIndicatorProps = StyledProps<Select$1.ItemIndicator.Props>;
 export declare function SelectItemIndicator({ className, children, ...props }: SelectItemIndicatorProps): import("react").JSX.Element;
 type SelectItemTextProps = StyledProps<Select$1.ItemText.Props>;
-export declare function SelectItemText({ className, id, ...props }: SelectItemTextProps): import("react").JSX.Element;
+export declare function SelectItemText({ className, id, ref, title, ...props }: SelectItemTextProps): import("react").JSX.Element;
 type SelectItemDescriptionProps = StyledProps<ComponentPropsWithRef<"span">>;
 /**
  * A second line under an option's label: what it means, not its name again.
@@ -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 DropdownMenuShortcut, A as MessageTextSelectionToolbarButton, An as DialogClose, At as MessageItem, B as MessageReferenceUnavailable, Bn as DialogTrigger, Bt as DropdownMenuCheckboxItemIndicator, C as MessageQuotedPreviewUnavailable, Cn as TooltipContent, Ct as MessageItemEdited, D as MessageEmbedHeader, Dn as Badge, Dt as MessageItemAvatarSlot, E as MessageEmbedFooter, En as TooltipTrigger, Et as MessageItemSearchMatch, F as MessageReferenceChip, Fn as DialogNav, Ft as AvatarGroup, G as MessageReactionGlyph, Gn as useParentOverlayKind, Gt as DropdownMenuItemLabel, H as MessageReactionChip, Hn as buttonVariants, Ht as DropdownMenuFooter, I as MessageReferenceIndicator, In as DialogOverlay, It as AvatarGroupCount, J as MessageReactionQuickButton, Jn as useThemeScopeProps, Jt as DropdownMenuPortal, K as MessageReactionPickerContent, Kn as withOverlayLayer, Kt as DropdownMenuLabel, L as MessageReferenceLabel, Ln as DialogPortal, Lt as AvatarImage, M as MessageMultiSelect, Mn as DialogDescription, Mt as Avatar, N as MessageMultiSelectCheckbox, Nn as DialogFooter, Nt as AvatarBadge, O as messageEmbed, On as Dialog, Ot as MessageItemContinuationTime, P as MessageMultiSelectToolbar, Pn as DialogHeader, Pt as AvatarFallback, Q as MessageReactionTooltipName, Qt as DropdownMenuSeparator, R as MessageReferencePending, Rn as DialogSurface, Rt as DropdownMenu, S as MessageQuotedPreviewTimestamp, Sn as Tooltip, St as MessageItemContent, T as MessageEmbedContent, Tn as TooltipProvider, Tt as MessageItemFooter, U as MessageReactionCount, Un as Spinner, Ut as DropdownMenuItem, V as MessageReactionAddButton, Vn as Button, Vt as DropdownMenuContent, W as MessageReactionErrorIndicator, Wn as defaultNativeButton, Wt as DropdownMenuItemCount, X as MessageReactionTooltipContent, Xn as ThemeStateContext, Xt as DropdownMenuRadioItem, Y as MessageReactionQuickRow, Yn as useTheme, Yt as DropdownMenuRadioGroup, Z as MessageReactionTooltipMeta, Zn as tv, Zt as DropdownMenuRadioItemIndicator, _ as MessageQuotedPreviewContent, _n as ScrollAreaViewport, _t as MessageItemSenderButton, a as MessageListDateDivider, an as Panel, at as MessageItemSavedIndicator, b as MessageQuotedPreviewText, bn as CheckboxIndicator, bt as MessageItemAttachments, c as MessageList, cn as PanelHeaderRoot, d as MessageQuotedPreviewAttachments, dn as PanelSection, en as DropdownMenuSubmenu, et as MessageReactionTooltipNames, f as MessageQuotedPreviewAuthor, fn as ScrollArea, ft as MessageItemHeader, g as MessageQuotedPreviewChannel, gn as ScrollAreaThumb, gt as MessageItemSenderBadges, h as MessageQuotedPreviewAuthorName, hn as ScrollAreaScrollbar, ht as MessageItemSender, in as KbdGroup, it as MessageItemReadReceipt, j as MessageTextSelectionToolbarSeparator, jn as DialogContent, jt as searchHit, k as MessageTextSelectionToolbar, kn as DialogBody, kt as MessageItemGutter, l as MessageQuotedPreview, ln as PanelScrollContent, m as MessageQuotedPreviewAuthorMeta, mn as ScrollAreaCorner, mt as MessageItemMeta, nn as DropdownMenuTrigger, nt as MessageItemBadge, o as MessageListHistoryLimited, on as PanelBody, ot as MessageItemToolbar, pn as ScrollAreaContent, pt as MessageItemInlineStatus, q as MessageReactionPickerStatic, qn as resolveThemeScopeProps, qt as DropdownMenuPopup, rn as Kbd, rt as MessageItemBadgeSeparator, s as MessageListNotice, sn as PanelFooter, st as MessageItemToolbarButton, tn as DropdownMenuSubmenuTrigger, tt as MessageReactionTooltipSeparator, u as MessageQuotedPreviewAttachment, un as PanelScrollViewport, v as MessageQuotedPreviewHeader, vn as useMobileViewport, vt as MessageItemSenderGroup, w as MessageEmbed, wn as TooltipPortal, wt as MessageItemEmbedded, x as MessageQuotedPreviewThread, xn as PRESENCE_COLOR, xt as MessageItemBody, y as MessageQuotedPreviewLoading, yn as Checkbox, yt as MessageItemTime, z as MessageReferenceText, zn as DialogTitle, zt as DropdownMenuCheckboxItem } from "./message-list-CxawdwMF.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"],
@@ -1056,9 +1051,9 @@ const listRow = tv({
 		},
 		interactive: {
 			true: { root: [
-				"not-disabled:not-aria-disabled:not-data-selected:hover:press-overlay",
+				"not-disabled:not-aria-disabled:not-data-selected:hover:row-hover-overlay",
 				"not-disabled:not-aria-disabled:not-data-selected:active:press-overlay",
-				"not-data-selected:data-popup-open:press-overlay"
+				"not-data-selected:data-popup-open:row-open-overlay not-disabled:not-aria-disabled:not-data-selected:data-popup-open:hover:row-open-overlay"
 			] },
 			false: {}
 		},
@@ -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"],
@@ -1972,7 +1968,7 @@ const sidebarItemRecipe = tv({
 	},
 	variants: {
 		interactive: {
-			true: { sidebarItem: ["hover:bg-fill-pressed active:bg-fill-pressed not-data-active:data-popup-open:bg-fill-pressed", "focus-visible:shadow-focus"] },
+			true: { sidebarItem: ["hover:bg-fill-row-hover active:bg-fill-pressed not-data-active:data-popup-open:bg-fill-row-open", "focus-visible:shadow-focus"] },
 			false: { sidebarItem: "cursor-default" }
 		},
 		wrap: {
@@ -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: [
@@ -3686,17 +3688,26 @@ const field = tv({
 		root: ["group/field flex flex-col gap-1.5"],
 		item: [
 			"group/field-item flex items-start gap-2",
+			"*: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)]"
 		],
 		label: [
-			"block",
+			"block wrap-anywhere",
 			"group-data-disabled/field:text-foreground-disabled",
 			"font-sans font-semibold text-foreground-muted"
 		],
-		description: ["group-data-disabled/field:text-foreground-disabled", "text-caption text-foreground-hint"],
-		error: ["group-data-disabled/field:text-foreground-disabled", "text-caption font-semibold text-danger-strong"]
+		description: [
+			"wrap-anywhere",
+			"group-data-disabled/field:text-foreground-disabled",
+			"text-caption text-foreground-hint"
+		],
+		error: [
+			"wrap-anywhere",
+			"group-data-disabled/field:text-foreground-disabled",
+			"text-caption font-semibold text-danger-strong"
+		]
 	},
 	variants: { size: {
 		sm: {
@@ -3786,11 +3797,12 @@ const inputGroup = tv({
 			"[&>svg:not([class*='size-'])]:size-4.5"
 		],
 		text: [
-			"flex shrink-0 items-center px-3",
-			"select-none whitespace-nowrap",
+			"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)",
@@ -3895,18 +3907,26 @@ function InputGroupAddonRoot({ align = "inline-start", variant = "default", clas
 		...props
 	});
 }
-function TextAddon({ align = "inline-start", variant = "default", className, ...props }) {
-	const { text } = inputGroup({
+function TextAddon({ align = "inline-start", variant = "default", className, ref, title, children, ...props }) {
+	const { text, textInner } = inputGroup({
 		align,
 		variant
 	});
+	const overflowRef = useOverflowTitle(ref, title);
 	return /* @__PURE__ */ jsx("span", {
+		ref: overflowRef,
+		title,
 		"data-slot": "input-group-text",
 		"data-align": align,
 		"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 });
@@ -3977,6 +3997,7 @@ const combobox = tv({
 		positioner: ["isolate z-50 outline-none"],
 		content: [
 			"h-auto max-h-(--available-height) min-w-[220px] overflow-hidden",
+			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
 			"outline-none",
 			"rounded-container bg-layer-popover text-foreground",
 			"shadow-float ring-1 ring-line-seam"
@@ -3987,8 +4008,8 @@ 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-0",
-			"font-sans text-callout font-medium text-foreground",
+			"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",
 			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
@@ -4016,12 +4037,13 @@ const combobox = tv({
 			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus"
 		],
 		chip: [
-			"inline-flex items-center",
+			"inline-flex min-w-0 max-w-full items-center overflow-hidden",
+			"[&>:not([data-slot=combobox-chip-remove])]:min-w-0 [&>:not([data-slot=combobox-chip-remove])]:truncate",
 			"h-7 gap-1.5 rounded-chip bg-fill-muted pr-0.5 pl-2",
 			"text-footnote font-semibold text-foreground"
 		],
 		chipRemove: [
-			"inline-flex items-center justify-center outline-none transition-colors",
+			"inline-flex shrink-0 items-center justify-center outline-none transition-colors",
 			"size-[22px] rounded-sticker text-foreground-hint",
 			"hover:bg-fill-pressed active:bg-fill-pressed focus-visible:shadow-focus",
 			"[&>svg]:size-3.5"
@@ -4202,7 +4224,7 @@ function ComboboxSeparator({ className, ...props }) {
 		...props
 	});
 }
-function ComboboxContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, initialFocus = false, finalFocus = false, ...props }) {
+function ComboboxContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding = 8, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, initialFocus = false, finalFocus = false, ...props }) {
 	const { positioner, content } = combobox();
 	return /* @__PURE__ */ jsx(ComboboxPortal, {
 		...portalProps,
@@ -4322,9 +4344,12 @@ function ComboboxChips({ className, ...props }) {
 		...props
 	});
 }
-function ComboboxChip({ className, ...props }) {
+function ComboboxChip({ className, ref, title, ...props }) {
 	const { chip } = combobox();
+	const overflowRef = useOverflowTitle(ref, title);
 	return /* @__PURE__ */ jsx(Combobox$1.Chip, {
+		ref: overflowRef,
+		title,
 		"data-slot": "combobox-chip",
 		className: chip({ className }),
 		...props
@@ -4403,6 +4428,7 @@ const select = tv({
 		positioner: ["isolate z-50 outline-none"],
 		content: [
 			"relative max-h-(--available-height) min-w-[max(var(--anchor-width),220px)] overflow-hidden",
+			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
 			"outline-none",
 			"rounded-container bg-layer-popover p-1.5 text-foreground",
 			"shadow-float ring-1 ring-line-seam"
@@ -4411,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",
@@ -4429,9 +4455,9 @@ const select = tv({
 			"[&>svg:not([class*='stroke-'])]:stroke-2"
 		],
 		itemIndicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "text-foreground [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-2 [&>svg_*]:stroke-2"],
-		itemText: ["min-w-0 flex-1 truncate"],
+		itemText: ["min-w-0 flex-1 line-clamp-2 wrap-anywhere"],
 		itemDescription: [
-			"order-last min-w-0 basis-full",
+			"order-last min-w-0 basis-full wrap-anywhere",
 			"[[data-slot=select-item-leading]~&]:ps-[calc(--spacing(4)+--spacing(2.5))]",
 			"font-sans text-caption font-normal text-foreground-hint"
 		],
@@ -4510,9 +4536,12 @@ function SelectTrigger({ className, children, render, "data-invalid": dataInvali
 		})
 	});
 }
-function SelectValue({ className, ...props }) {
+function SelectValue({ className, ref, title, ...props }) {
 	const { value } = select();
+	const overflowRef = useOverflowTitle(ref, title);
 	return /* @__PURE__ */ jsx(Select$1.Value, {
+		ref: overflowRef,
+		title,
 		"data-slot": "select-value",
 		className: value({ className }),
 		...props
@@ -4545,7 +4574,7 @@ function SelectPopup({ className, ...props }) {
 		...props
 	});
 }
-function SelectContent({ align = "start", alignItemWithTrigger = false, alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
+function SelectContent({ align = "start", alignItemWithTrigger = false, alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding = 8, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
 	const { positioner, content } = select();
 	const positionerNode = /* @__PURE__ */ jsx(Select$1.Positioner, {
 		align,
@@ -4623,8 +4652,9 @@ function SelectItemIndicator({ className, children, ...props }) {
 		children: children ?? defaultIndicator
 	});
 }
-function SelectItemText({ className, id, ...props }) {
+function SelectItemText({ className, id, ref, title, ...props }) {
 	const { itemText } = select();
+	const overflowRef = useOverflowTitle(ref, title);
 	const generatedId = useId();
 	const textId = id ?? generatedId;
 	const setTextId = useContext(SelectItemPartsContext)?.setTextId;
@@ -4633,6 +4663,8 @@ function SelectItemText({ className, id, ...props }) {
 		return () => setTextId?.(void 0);
 	}, [setTextId, textId]);
 	return /* @__PURE__ */ jsx(Select$1.ItemText, {
+		ref: overflowRef,
+		title,
 		id: textId,
 		"data-slot": "select-item-text",
 		className: itemText({ className }),
@@ -8063,8 +8095,13 @@ function OtterIndicator({ status, className, ...props }) {
 const table = tv({ slots: {
 	root: ["w-full border-collapse caption-bottom", "font-sans text-callout text-foreground"],
 	header: [],
-	body: ["[&>tr:last-child>td]:border-b-0 [&>tr:last-child>th]:border-b-0", "[&>tr]:hover:bg-fill-pressed"],
-	row: ["aria-selected:bg-info-soft aria-selected:hover:bg-info-soft", "data-[selected=true]:bg-info-soft data-[selected=true]:hover:bg-info-soft"],
+	body: ["[&>tr:last-child>td]:border-b-0 [&>tr:last-child>th]:border-b-0", "[&>tr]:hover:bg-fill-row-hover"],
+	row: [
+		"not-aria-selected:not-data-[selected=true]:data-popup-open:bg-fill-row-open",
+		"not-aria-selected:not-data-[selected=true]:has-data-popup-open:bg-fill-row-open",
+		"aria-selected:bg-info-soft aria-selected:hover:bg-info-soft",
+		"data-[selected=true]:bg-info-soft data-[selected=true]:hover:bg-info-soft"
+	],
 	head: [
 		"text-left whitespace-nowrap",
 		"border-b border-line-hairline px-3 py-2",
@@ -8425,7 +8462,8 @@ const files = tv({ slots: {
 		"group/file-row flex w-full min-w-0 gap-3 px-3",
 		"transition-colors",
 		"items-center rounded-container border border-line-hairline bg-layer-card py-2.5 pr-1.5 pl-2.5 shadow-none",
-		"[@media(hover:hover)]:has-[[data-slot=file-row-open]:hover]:press-overlay has-[[data-slot=file-row-open]:active]:press-overlay",
+		"[@media(hover:hover)]:has-[[data-slot=file-row-open]:hover]:row-hover-overlay has-[[data-slot=file-row-open]:active]:press-overlay",
+		"has-data-popup-open:row-open-overlay",
 		"has-[[data-slot=file-row-open]:focus-visible]:shadow-focus"
 	],
 	rowOpen: [
@@ -9857,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"],
@@ -11101,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,
@@ -11133,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 })
 	});
 }
@@ -11509,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({
@@ -11524,6 +11569,7 @@ function PanelToggleAction({ className, ...props }) {
 		...props,
 		type: "button",
 		"data-slot": "panel-toggle-action",
+		"data-icon-inset": "",
 		className: panelToggleAction({ className })
 	});
 }
@@ -11745,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({
@@ -15716,7 +15763,8 @@ const inboxItem = tv({
 			"[[data-slot=inbox-item]+&]:before:block has-data-[slot=inbox-item-selection]:before:left-11",
 			"has-data-[slot=inbox-item-leading]:before:left-16",
 			"has-data-[slot=inbox-item-selection]:has-data-[slot=inbox-item-leading]:before:left-23",
-			"hover:bg-fill-pressed",
+			"hover:bg-fill-row-hover",
+			"not-data-[active=true]:data-popup-open:bg-fill-row-open not-data-[active=true]:has-data-popup-open:bg-fill-row-open",
 			"data-[active=true]:bg-info-soft data-[active=true]:hover:bg-info-soft",
 			"data-disabled:pointer-events-none data-disabled:hover:bg-transparent",
 			"has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:inset-ring-2 has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:inset-ring-foreground",
@@ -16201,7 +16249,8 @@ const searchEntity = tv({ slots: {
 		"relative rounded-none border-0 bg-transparent px-4 py-3 text-foreground shadow-none",
 		"max-md:min-h-16",
 		"not-first:before:absolute not-first:before:top-0 not-first:before:right-0 not-first:before:left-[55px] not-first:before:border-t not-first:before:border-line-hairline",
-		"hover:bg-fill-pressed active:bg-fill-pressed",
+		"hover:bg-fill-row-hover active:bg-fill-pressed",
+		"not-data-[selected=true]:data-popup-open:bg-fill-row-open",
 		"disabled:cursor-default disabled:hover:bg-transparent disabled:active:bg-transparent",
 		"data-[selected=true]:bg-brand-soft data-[selected=true]:hover:bg-brand-soft",
 		"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"
@@ -16340,7 +16389,8 @@ const searchMessage = tv({ slots: {
 		"w-full text-left transition-colors",
 		"relative block rounded-none border-0 bg-transparent px-4 py-3 text-foreground shadow-none",
 		"not-first:before:absolute not-first:before:top-0 not-first:before:right-0 not-first:before:left-4 not-first:before:border-t not-first:before:border-line-hairline",
-		"hover:bg-fill-pressed active:bg-fill-pressed",
+		"hover:bg-fill-row-hover active:bg-fill-pressed",
+		"not-data-[selected=true]:data-popup-open:bg-fill-row-open",
 		"disabled:cursor-default disabled:hover:bg-transparent disabled:active:bg-transparent",
 		"data-[selected=true]:bg-brand-soft data-[selected=true]:hover:bg-brand-soft",
 		"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"

package/dist/{message-list-CxawdwMF.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",
@@ -1524,6 +1581,59 @@ function DropdownMenuCheckboxItemIndicator({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/lib/use-overflow-title.ts
+function cut(element) {
+	return element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1;
+}
+function assign(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+/**
+* Gives a value that is cut off (an ellipsis, a clamp) its whole text as its
+* `title`, and takes it away again when the value fits: a value that shows in
+* full needs no tooltip repeating it (design/patterns/forms.md#long-values-in-fields).
+* 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);
+	const own = title !== void 0;
+	return useCallback((node) => {
+		cleanup.current?.();
+		cleanup.current = void 0;
+		assign(ref, node);
+		const view = node?.ownerDocument.defaultView;
+		if (!node || own || !view || !("ResizeObserver" in view)) return;
+		const update = () => {
+			const text = node.textContent?.trim() ?? "";
+			if (text && (cut(node) || Array.from(node.children).some(cut))) node.title = text;
+			else node.removeAttribute("title");
+		};
+		const resize = new view.ResizeObserver(update);
+		resize.observe(node);
+		for (const child of Array.from(node.children)) resize.observe(child);
+		const mutation = new view.MutationObserver(update);
+		mutation.observe(node, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+		cleanup.current = () => {
+			resize.disconnect();
+			mutation.disconnect();
+		};
+	}, [own, ref]);
+}
+//#endregion
 //#region src/components/avatar/avatar.tsx
 const avatar = tv$1({
 	slots: {
@@ -1817,7 +1927,8 @@ const messageItem = tv$1({
 			"min-h-0 px-2 py-1 border-t-8 border-transparent bg-clip-padding",
 			"hover:[--mi-ct-color:var(--foreground-hint)] has-data-popup-open:[--mi-ct-color:var(--foreground-hint)]",
 			"bg-(--mi-row-fill) [--mi-row-fill:initial]",
-			"hover:[--mi-row-fill:var(--fill-pressed)] data-popup-open:[--mi-row-fill:var(--fill-pressed)] has-data-popup-open:[--mi-row-fill:var(--fill-pressed)]",
+			"hover:[--mi-row-fill:var(--fill-message-hover)]",
+			"data-popup-open:[--mi-row-fill:var(--fill-row-open)] has-data-popup-open:[--mi-row-fill:var(--fill-row-open)]",
 			"has-data-[slot=message-item-search-match]:[--mi-row-fill:var(--info-soft)] has-data-[slot=message-item-search-match]:hover:[--mi-row-fill:var(--info-soft)]",
 			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:[--mi-row-fill:var(--info-soft)]",
 			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:hover:[--mi-row-fill:var(--info-soft)]"
@@ -3174,4 +3285,4 @@ function MessageListJumpPillDismiss({ className, children, render, nativeButton,
 	});
 }
 //#endregion
-export { MessageReactionTooltipNameText as $, DropdownMenuShortcut as $t, MessageTextSelectionToolbarButton as A, DialogClose as An, MessageItem as At, MessageReferenceUnavailable as B, DialogTrigger as Bn, DropdownMenuCheckboxItemIndicator as Bt, MessageQuotedPreviewUnavailable as C, TooltipContent as Cn, MessageItemEdited as Ct, MessageEmbedHeader as D, Badge as Dn, MessageItemAvatarSlot as Dt, MessageEmbedFooter as E, TooltipTrigger as En, MessageItemSearchMatch as Et, MessageReferenceChip as F, DialogNav as Fn, AvatarGroup as Ft, MessageReactionGlyph as G, useParentOverlayKind as Gn, DropdownMenuItemLabel as Gt, MessageReactionChip as H, buttonVariants as Hn, DropdownMenuFooter as Ht, MessageReferenceIndicator as I, DialogOverlay as In, AvatarGroupCount as It, MessageReactionQuickButton as J, useThemeScopeProps as Jn, DropdownMenuPortal as Jt, MessageReactionPickerContent as K, withOverlayLayer as Kn, DropdownMenuLabel as Kt, MessageReferenceLabel as L, DialogPortal as Ln, AvatarImage as Lt, MessageMultiSelect as M, DialogDescription as Mn, Avatar$1 as Mt, MessageMultiSelectCheckbox as N, DialogFooter as Nn, AvatarBadge as Nt, messageEmbed as O, Dialog$1 as On, MessageItemContinuationTime as Ot, MessageMultiSelectToolbar as P, DialogHeader as Pn, AvatarFallback as Pt, MessageReactionTooltipName as Q, DropdownMenuSeparator as Qt, MessageReferencePending as R, DialogSurface as Rn, DropdownMenu as Rt, MessageQuotedPreviewTimestamp as S, Tooltip$1 as Sn, MessageItemContent as St, MessageEmbedContent as T, TooltipProvider as Tn, MessageItemFooter as Tt, MessageReactionCount as U, Spinner as Un, DropdownMenuItem as Ut, MessageReactionAddButton as V, Button$1 as Vn, DropdownMenuContent as Vt, MessageReactionErrorIndicator as W, defaultNativeButton as Wn, DropdownMenuItemCount as Wt, MessageReactionTooltipContent as X, ThemeStateContext as Xn, DropdownMenuRadioItem as Xt, MessageReactionQuickRow as Y, useTheme as Yn, DropdownMenuRadioGroup as Yt, MessageReactionTooltipMeta as Z, tv$1 as Zn, DropdownMenuRadioItemIndicator as Zt, MessageQuotedPreviewContent as _, ScrollAreaViewport as _n, MessageItemSenderButton as _t, MessageListDateDivider as a, Panel as an, MessageItemSavedIndicator as at, MessageQuotedPreviewText as b, CheckboxIndicator as bn, MessageItemAttachments as bt, MessageList as c, PanelHeaderRoot as cn, MessageItemDelegatedAvatar as ct, MessageQuotedPreviewAttachments as d, PanelSection as dn, MessageItemDelegatedByName as dt, DropdownMenuSubmenu as en, MessageReactionTooltipNames as et, MessageQuotedPreviewAuthor as f, ScrollArea$1 as fn, MessageItemHeader as ft, MessageQuotedPreviewChannel as g, ScrollAreaThumb as gn, MessageItemSenderBadges as gt, MessageQuotedPreviewAuthorName as h, ScrollAreaScrollbar as hn, MessageItemSender as ht, MessageListJumpPillGroup as i, KbdGroup as in, MessageItemReadReceipt as it, MessageTextSelectionToolbarSeparator as j, DialogContent as jn, searchHit as jt, MessageTextSelectionToolbar as k, DialogBody as kn, MessageItemGutter as kt, MessageQuotedPreview as l, PanelScrollContent as ln, MessageItemDelegatedBy as lt, MessageQuotedPreviewAuthorMeta as m, ScrollAreaCorner as mn, MessageItemMeta as mt, MessageListJumpPill as n, DropdownMenuTrigger as nn, MessageItemBadge as nt, MessageListHistoryLimited as o, PanelBody as on, MessageItemToolbar as ot, MessageQuotedPreviewAuthorDelegatedBy as p, ScrollAreaContent as pn, MessageItemInlineStatus as pt, MessageReactionPickerStatic as q, resolveThemeScopeProps as qn, DropdownMenuPopup as qt, MessageListJumpPillDismiss as r, Kbd as rn, MessageItemBadgeSeparator as rt, MessageListNotice as s, PanelFooter as sn, MessageItemToolbarButton as st, MessageListJumpControls as t, DropdownMenuSubmenuTrigger as tn, MessageReactionTooltipSeparator as tt, MessageQuotedPreviewAttachment as u, PanelScrollViewport as un, MessageItemDelegatedByButton as ut, MessageQuotedPreviewHeader as v, useMobileViewport as vn, MessageItemSenderGroup as vt, MessageEmbed as w, TooltipPortal as wn, MessageItemEmbedded as wt, MessageQuotedPreviewThread as x, PRESENCE_COLOR as xn, MessageItemBody as xt, MessageQuotedPreviewLoading as y, Checkbox$1 as yn, MessageItemTime as yt, MessageReferenceText as z, DialogTitle as zn, DropdownMenuCheckboxItem 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

@@ -1138,6 +1138,14 @@
   overflow: hidden;
 }
 
+.r-combobox-select__option .r-combobox-select__text {
+  -webkit-line-clamp: 2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+}
+
 .r-combobox-select__actions {
   flex: none;
   align-items: center;
@@ -1239,7 +1247,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 10px;
-  padding: 0 10px;
+  padding: calc(18px - .5lh) 10px;
   font-weight: 500;
   transition: background-color .12s, color .12s;
   display: flex;

package/dist/styles.css

@@ -283,6 +283,9 @@
   --color-foreground-on-frame-active: var(--foreground-on-frame-active);
   --color-fill-frame-pressed: var(--fill-frame-pressed);
   --color-fill-pressed: var(--fill-pressed);
+  --color-fill-row-hover: var(--fill-row-hover);
+  --color-fill-message-hover: var(--fill-message-hover);
+  --color-fill-row-open: var(--fill-row-open);
   --color-layer-code: var(--layer-code);
   --color-foreground-link: var(--foreground-link);
   --color-sticker-ink: var(--sticker-ink);
@@ -367,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);
@@ -432,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 {
@@ -490,6 +526,18 @@ body {
   background-image: linear-gradient(var(--fill-pressed), var(--fill-pressed));
 }
 
+/* A row laid over a solid surface (a list row on a card, a file row) hovers
+   with the lighter row step, as an overlay too, so press (press-overlay)
+   replaces it instead of stacking on it. */
+@utility row-hover-overlay {
+  background-image: linear-gradient(var(--fill-row-hover), var(--fill-row-hover));
+}
+
+/* The same row with its menu open: fill-row-open, as an overlay. */
+@utility row-open-overlay {
+  background-image: linear-gradient(var(--fill-row-open), var(--fill-row-open));
+}
+
 @utility press-overlay-sticker {
   background-image: linear-gradient(var(--sticker-pressed), var(--sticker-pressed));
 }

package/dist/tokens.json

@@ -1527,6 +1527,63 @@
           }
         }
       }
+    },
+    "row-hover": {
+      "$description": "Hover on a whole row (sidebar, list, inbox, search result, table, file row): one perceptible step (OKLab dE about 2.8 in both modes), below every selection tint, so text keeps its contrast.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.1813, 0.005, 17.62],
+        "alpha": 0.04
+      },
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.03
+            }
+          }
+        }
+      }
+    },
+    "message-hover": {
+      "$description": "Hover on a message: the lightest perceptible step (OKLab dE about 2.1 in both modes), because a message is a large block someone reads with the pointer resting on it.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.1813, 0.005, 17.62],
+        "alpha": 0.03
+      },
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.022
+            }
+          }
+        }
+      }
+    },
+    "row-open": {
+      "$description": "Any row with its menu open (right-click, its menu button, press and hold): one step over a hover (OKLab dE 3.4 to 4.3 on every row surface), because on a phone, which has no hover, it is the only sign of which row the menu acts on. Still under info-soft and brand-soft on every surface.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.1813, 0.005, 17.62],
+        "alpha": 0.05
+      },
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.04
+            }
+          }
+        }
+      }
     }
   },
   "line": {

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { An as DialogClose, Bn as DialogTrigger, Jn as useThemeScopeProps, On as Dialog, Vn as Button$1, Wn as defaultNativeButton, Yn as useTheme, Zn as tv, ct as MessageItemDelegatedAvatar, dt as MessageItemDelegatedByName, i as MessageListJumpPillGroup, jn as DialogContent, lt as MessageItemDelegatedBy, n as MessageListJumpPill, p as MessageQuotedPreviewAuthorDelegatedBy, r as MessageListJumpPillDismiss, t as MessageListJumpControls, ut as MessageItemDelegatedByButton, zn as DialogTitle } from "./message-list-CxawdwMF.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";
@@ -70,19 +70,21 @@ const defaultMessages = {
 	remove: (label) => `Remove ${label}`
 };
 const defaultRenderCreateLabel = (query) => `Create “${query}”`;
+/** An option's or a chip's text, with its whole value as the title when it is cut off. */
+function OverflowText({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref: useOverflowTitle(),
+		className: "r-combobox-select__text",
+		children
+	});
+}
 function recordLabel(record, renderLabel) {
 	return record.option === void 0 ? record.label : renderLabel?.(record.option) ?? record.label;
 }
 function renderOptionContent({ record, selected, renderLabel, renderOption, renderCreateLabel }) {
-	if (record.createQuery !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
-		className: "r-combobox-select__text",
-		children: renderCreateLabel(record.label)
-	})] });
+	if (record.createQuery !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": true }), /* @__PURE__ */ jsx(OverflowText, { children: renderCreateLabel(record.label) })] });
 	const content = record.option === void 0 ? record.label : renderOption?.(record.option, { selected }) ?? recordLabel(record, renderLabel);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-		className: "r-combobox-select__text",
-		children: content
-	}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 		className: "r-combobox-select__indicator",
 		children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true })
 	})] });
@@ -96,10 +98,7 @@ function renderSelectedChip({ record, index, tagLimit, strings, renderLabel, ren
 		"data-overflow": overflow || void 0,
 		"aria-label": record.label,
 		"aria-description": strings.chipDescription,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "r-combobox-select__text",
-			children: content
-		}), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+		children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 			className: "r-combobox-select__remove",
 			"aria-label": strings.remove(record.label),
 			children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
@@ -472,6 +471,7 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 			children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 				sideOffset: 4,
 				align: "start",
+				collisionPadding: 8,
 				...phone ? {
 					side: listSide,
 					collisionAvoidance: PHONE_LIST_COLLISION
@@ -634,7 +634,7 @@ const comment = tv({
 		cardTrigger: [
 			"absolute -inset-px z-10 cursor-pointer",
 			"rounded-container border-0 bg-transparent p-0",
-			"hover:bg-fill-pressed active:bg-fill-pressed",
+			"hover:bg-fill-row-hover active:bg-fill-pressed",
 			"outline-none focus-visible:shadow-focus"
 		],
 		cardQuote: ["sr-only"],

package/package.json

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