@botiverse/raft-ui 0.10.7 → 0.12.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [0.12.0](https://github.com/botiverse/raft-design/compare/v0.11.0...v0.12.0) (2026-10-21)
+
+### Breaking
+
+- `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))
+
+### Added
+
+- `ComboboxSelect` takes `listMaxHeight` (a CSS length or pixels, default `16rem`, the whole list's height); the side the list opens on follows it. ([#635](https://github.com/botiverse/raft-design/pull/635))
+- Jump controls that float over a conversation, from `@botiverse/raft-ui/wip`: `MessageListJumpControls`, `MessageListJumpPill` (a Button `outline md`), `MessageListJumpPillGroup` and `MessageListJumpPillDismiss`. ([#637](https://github.com/botiverse/raft-design/pull/637))
+- A message an assistant sent for its owner, from `@botiverse/raft-ui/wip`: `MessageItemDelegatedBy`, `MessageItemDelegatedByName`, `MessageItemDelegatedByButton`, `MessageItemDelegatedAvatar` (with `deleted`) and `MessageQuotedPreviewAuthorDelegatedBy`. ([#633](https://github.com/botiverse/raft-design/pull/633))
+
+### Fixed
+
+- The 32px and 36px buttons' hit area reaches 44px; the overhang now counts the 1.5px border. ([#637](https://github.com/botiverse/raft-design/pull/637))
+- Toast title and description use `text-callout` (desktop line height 20 to 22px). ([#637](https://github.com/botiverse/raft-design/pull/637))
+- In a message header the name, notes (model, role, badge text) and time stand on one baseline. ([#639](https://github.com/botiverse/raft-design/pull/639))
+- `MessageItemSenderGroup`: the gap before a role squeezed to nothing collapses with it. ([#633](https://github.com/botiverse/raft-design/pull/633))
+- `VirtualList`: a jump holds its target row by key, so rows prepended while it settles don't move it; the focused row stays mounted across a window switch. ([#636](https://github.com/botiverse/raft-design/pull/636))
+
+## [0.11.0](https://github.com/botiverse/raft-design/compare/v0.10.7...v0.11.0) (2026-10-21)
+
+### Added
+
+- `VirtualList`: a virtualized list for long, variable-height content such as a conversation, exported from the main entry. Rows are measured in block flow, so their margins collapse as in a plain list; it holds its anchor through items added above or below, jumps exactly to an item (`scrollTo` with `align`), lays out multi-column rows, and keeps mounted the row that holds focus (so End, Home, paging and wheel scrolling don't lose it) and the rows a text selection reaches into. The scroller takes native HTML attributes and its ref as `domRef`; styles are in `.r-virtual-list`. The implementation borrows from DeepSeek web's virtual list. ([#627](https://github.com/botiverse/raft-design/pull/627))
+
 ## [0.10.7](https://github.com/botiverse/raft-design/compare/v0.10.6...v0.10.7) (2026-10-21)
 
 ### Fixed

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

@@ -140,7 +140,7 @@
   width: var(--anchor-width, max-content);
   min-width: 13.75rem;
   max-width: var(--available-width);
-  max-height: min(var(--available-height), 24rem);
+  max-height: min(var(--available-height), max(24rem, var(--combobox-select-list-max-height, 0px)));
   overflow: hidden;
   border: 0;
   border-radius: 10px;
@@ -152,7 +152,8 @@
   outline: 0;
 }
 .r-combobox-select__list {
-  max-height: 16rem;
+  box-sizing: border-box;
+  max-height: var(--combobox-select-list-max-height, 16rem);
   overflow-y: auto;
   overscroll-behavior: contain;
   scroll-padding-block: 6px;
@@ -270,120 +271,14 @@
   background: var(--fill-muted);
   color: var(--foreground-disabled);
 }
-/* On a phone the field is a trigger, not a text input: a select-like button
-   that shows the value. Its hit area covers the whole field; the clear button
-   sits above it. */
-.r-combobox-select__trigger {
-  box-sizing: border-box;
-  min-width: 0;
-  min-height: inherit;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: start;
-  cursor: default;
-  -webkit-tap-highlight-color: transparent;
-}
-.r-combobox-select__trigger::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-}
-.r-combobox-select__trigger:disabled {
-  color: inherit;
-}
-.r-combobox-select__value {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.r-combobox-select__placeholder {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--foreground-hint);
-}
-.r-combobox-select__trigger .r-combobox-select__chips {
-  margin-inline-start: -6px;
-}
-.r-combobox-select__trigger .r-combobox-select__chip {
-  padding-inline-end: 8px;
-}
-.r-combobox-select__clear {
-  position: relative;
-  z-index: 1;
-}
-.r-combobox-select__arrow {
-  pointer-events: none;
-}
-.r-combobox-select__control--trigger[data-popup-open] .r-combobox-select__arrow > svg {
-  transform: rotate(180deg);
-}
-/* The phone's anchored list fits the room on its side instead of flipping. */
+/* On a phone the list keeps the side it opened on and fits the room there
+   instead of flipping (combobox-select.tsx), and the input stays at 16px or
+   more at every size: iOS zooms into a smaller one as it takes focus. */
 .r-combobox-select__popup--anchored .r-combobox-select__list {
-  box-sizing: border-box;
-  max-height: min(calc(16rem + 12px), var(--available-height, 100vh));
-}
-/* The phone's bottom sheet: the field's label as its title, the search input
-   at its top, then the whole list, scrolling in the rest of the sheet. */
-.r-combobox-select__sheet-popup {
-  height: 82dvh;
-}
-.r-combobox-select__sheet {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-}
-.r-combobox-select__sheet-header {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding-inline-end: 8px;
-}
-.r-combobox-select__sheet-title {
-  min-width: 0;
-  flex: 1;
-}
-.r-combobox-select__sheet-search {
-  flex: 0 0 auto;
-  padding: 4px 16px 8px;
-}
-.r-combobox-select__search-icon {
-  width: 16px;
-  height: 16px;
-  flex: 0 0 auto;
-  color: var(--foreground-hint);
-}
-.r-combobox-select__sheet-body {
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: 0 8px calc(16px + env(safe-area-inset-bottom, 0px));
-}
-.r-combobox-select__sheet .r-combobox-select__list {
-  max-height: none;
-  overflow: visible;
-  padding: 0;
-}
-.r-combobox-select__sheet .r-combobox-select__option {
-  min-height: 52px;
-  padding: 0 12px;
-  font-size: var(--text-body);
-  line-height: var(--text-body--line-height);
+  max-height: min(var(--combobox-select-list-max-height, 16rem), var(--available-height, 100vh));
 }
-.r-combobox-select__sheet .r-combobox-select__group-label {
-  padding: 12px 12px 4px;
+.r-combobox-select__control--phone .r-combobox-select__input {
+  font-size: max(1em, 16px);
 }
 @keyframes r-combobox-select-spin {
   to {

package/dist/components/virtual-list/styles/virtual-list.css

@@ -0,0 +1,64 @@
+/*
+ * VirtualList. The list is its own native scroll container (vertical overflow scrolls; `overflow-anchor: none`,
+ * because the list compensates size changes above the view itself); its native scrollbar is hidden unless
+ * `showScrollbar`. Plain CSS: every selector is written out.
+ *
+ * Classes: `.r-virtual-list` (the scroll container, `data-slot="virtual-list"`) with the modifiers
+ * `--x-scrollable` (with `columns`), `--show-scrollbar`, `--printable`, `--empty-centered` and
+ * `--ios-compensation-enabled`; `.r-virtual-list__empty` (`data-slot="virtual-list-empty"`, with `--center`).
+ * The spacer (`data-slot="virtual-list-items"`) and the rows' element (`data-slot="virtual-list-visible-items"`)
+ * take their few styles inline, from VirtualList.tsx.
+ *
+ * In the `components` layer, so a utility in the consumer's `className` (`h-*`, `max-h-*`, `overflow-*`)
+ * overrides these rules.
+ *
+ * CSS variables the list writes as inline styles, for sticky children to read:
+ *   --virtual-list-transform-y          on the rows' element: its translateY (the offset of the first
+ *                                       mounted row, less its top margin), "0px" with virtualization off
+ *   --virtual-list-ios-compensation-y   on the rows' element: the iOS momentum-scroll compensation
+ *                                       applied to the spacer as translateY(-value)
+ *   --virtual-list-width                on `.r-virtual-list`: the list's offsetWidth
+ */
+@layer components {
+  .r-virtual-list {
+    max-height: inherit;
+    overflow-anchor: none;
+    outline: none;
+    min-width: 1px;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .r-virtual-list.r-virtual-list--ios-compensation-enabled {
+    overscroll-behavior: none;
+  }
+  .r-virtual-list.r-virtual-list--x-scrollable {
+    overflow-x: auto;
+  }
+  .r-virtual-list:not(.r-virtual-list--show-scrollbar) {
+    scrollbar-width: none;
+  }
+  .r-virtual-list:not(.r-virtual-list--show-scrollbar)::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+  .r-virtual-list.r-virtual-list--empty-centered {
+    flex-direction: column;
+    display: flex;
+  }
+  .r-virtual-list__empty.r-virtual-list__empty--center {
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    min-height: 0;
+    display: flex;
+  }
+  @media print {
+    .r-virtual-list.r-virtual-list--printable {
+      max-height: none !important;
+      height: auto !important;
+      overflow: visible !important;
+    }
+  }
+}