@botiverse/raft-ui 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## [0.17.0](https://github.com/botiverse/raft-design/compare/v0.16.0...v0.17.0) (2026-10-21)
+
+### Design System
+
+- **Dragging on a touch screen**: on an item that can be moved, holding still opens its menu and holding then moving drags it. The item arms after 500ms, the same moment raft-ui's long-press menu opens, and the drag starts on the first 10px of movement; moving earlier is a scroll, and a second finger cancels. The component that owns the item's menu closes it when the drag starts. ([#662](https://github.com/botiverse/raft-design/pull/662))
+  - Why: on a phone, a long press on a draggable item opened its context menu first, and a scroll that started on a tab, task card or attachment picked the item up instead.
+  - Affects: touch drag hold 0ms (tabs, cards and attachments picked up at once) → 500ms, then 10px; held items get `select-none`, `-webkit-touch-callout: none` and `touch-manipulation`. Mouse and pen still start a drag after 5–6px, with no hold.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#dragging-on-a-touch-screen
+
+### Added
+
+- **SortableTabsList** `onDragStart`: called when a tab drag starts, so an app that puts its own menu on a tab can close it. ([#662](https://github.com/botiverse/raft-design/pull/662))
+  - Why: the component that owns an item's menu closes it when the item's drag starts.
+  - Docs: https://raft-design.botiverse.build/components/tabs/
+
+### Fixed
+
+- **SortableTabsList, task drag-and-drop and SortableComposerAttachments**: on a touch screen a finger no longer starts a drag at once; it has to hold still for 500ms and then move. Scrolling that starts on a card or an attachment scrolls again. ([#662](https://github.com/botiverse/raft-design/pull/662))
+  - Why: the pointer sensor took every touch before the touch sensor could, and `touch-none` stopped the page from scrolling.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#dragging-on-a-touch-screen
+
+## [0.16.0](https://github.com/botiverse/raft-design/compare/v0.15.0...v0.16.0) (2026-10-21)
+
+### Breaking Changes
+
+- **VirtualList** `items`: compared by reference. A row renders again only when its item, its index or one of the list's render props changes, so replace an item to change it instead of editing it in place. ([#658](https://github.com/botiverse/raft-design/pull/658))
+  - Why: keeping rows across range updates is what removes the per-frame re-render.
+  - Migrate: if your code edits an item object in place, or a render function reads mutable state outside the props, replace the item (a new object) when it changes.
+  - Docs: https://raft-design.botiverse.build/components/virtual-list/
+
+### Changed
+
+- **VirtualList**: scrolling no longer restyles or re-renders every mounted row. Rows that stay in range keep their elements; rows are mounted ahead of the view in batches and passed rows stay mounted for a while; only the rows that fill the view below are mounted; rows above the view are planned at the average measured height; resize passes where nothing changed size write nothing. ([#658](https://github.com/botiverse/raft-design/pull/658))
+  - Why: in a long chat timeline the list dropped more frames than a plain list while scrolling, most with a slow CPU: every row was restyled on almost every frame, and each range change re-rendered every row.
+  - Affects: with a 4x slower CPU, frames over 33ms scrolling 320 messages 9 → 0 down and 24 → 0 up, p95 33ms → 16.7ms; main-thread time per frame 10–17ms → 2–5ms. Up to 2.5 viewports of passed rows stay mounted; after a jump only the rows in view mount, as before.
+  - Docs: https://raft-design.botiverse.build/components/virtual-list/
+
 ## [0.15.0](https://github.com/botiverse/raft-design/compare/v0.14.0...v0.15.0) (2026-10-21)
 
 ### Design System

package/dist/index.d.mts

@@ -3890,8 +3890,12 @@ export declare function TabsList({ className, children, variant, ref, ...props }
 type SortableTabsListProps<T extends string = string> = TabsListProps & {
   value: readonly T[];
   onReorder: (value: T[]) => void;
+  /** A tab was picked up. On a touch screen the long press that armed it may
+   *  have opened a menu the caller owns: close it here (DS › States ›
+   *  Dragging on a touch screen). */
+  onDragStart?: (value: T) => void;
 };
-export declare function SortableTabsList<T extends string = string>({ value, onReorder, children, variant, ...props }: SortableTabsListProps<T>): import("react").JSX.Element;
+export declare function SortableTabsList<T extends string = string>({ value, onReorder, onDragStart, children, variant, ...props }: SortableTabsListProps<T>): import("react").JSX.Element;
 type TabsTabProps<T extends string = string> = StyledProps<Tabs$1.Tab.Props> & {
   value: T;
 };
@@ -4387,11 +4391,17 @@ interface VirtualListProps<T> extends VirtualListNativeProps {
    * result is the row's `renderedItemWithCols`.
    */
   renderItemWithCols?: ((info: RenderItemWithColsInfo) => ReactNode) | undefined;
-  /** The items, one row each, in order. */
+  /**
+   * The items, one row each, in order. Treat them as immutable: a mounted row is rendered again only
+   * when its item (by reference) or its index changes, or a render prop does (`children`,
+   * `ItemComponent`, `getKey`, `renderCol`, `renderItemWithCols`, `itemResizable`, `ignoreItemResize`,
+   * `sessionId`, `virtual`), so replace an item's object to change its row.
+   */
   items?: readonly T[] | undefined;
   /**
-   * The shortest a row can be, in px, or less: the list mounts as many rows as fit in the view at this
-   * size, plus one, so a larger value leaves the end of the view empty.
+   * The shortest a row can be, in px, or less: to fill the view, rows not measured yet count at this
+   * size (after a jump, as many rows as fit at it, plus one), so a larger value leaves the end of the
+   * view empty. While the list scrolls, rows ahead of the view are mounted on top of these.
    */
   itemMinSize: number;
   /** The size, in px, counted for a row not measured yet (its offset and the spacer's height). */
@@ -4450,6 +4460,8 @@ interface VirtualListProps<T> extends VirtualListNativeProps {
   /**
    * Renders a row: called for each item in or near the view with the item, its index, the `domRef` to
    * put on the row's root element and the `style` to spread on it. Give the element the `key` it gets.
+   * A mounted row is rendered again only when its item, its index or a render prop changes (see
+   * `items`): read no other mutable state here.
    */
   children?: ((props: ItemRenderProps<T> & {
     key: string | undefined;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.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-03unCFnE.mjs";
+import { $ as MessageReactionTooltipMeta, $n as ThemeStateContext, $t as DropdownMenuRadioItem, A as messageEmbed, An as Badge, At as MessageItemContinuationTime, B as MessageReferencePending, Bn as DialogPortal, Bt as useOverflowTitle, C as MessageQuotedPreviewThread, Cn as CheckboxIndicator, Ct as MessageItemBody, D as MessageEmbedContent, Dn as TooltipPortal, Dt as MessageItemFooter, E as MessageEmbed, En as TooltipContent, Et as MessageItemEmbedded, F as MessageMultiSelectCheckbox, Fn as DialogDescription, Ft as AvatarBadge, G as MessageReactionCount, Gn as buttonVariants, Gt as DropdownMenuFooter, H as MessageReferenceUnavailable, Hn as DialogTitle, Ht as DropdownMenuCheckboxItem, I as MessageMultiSelectToolbar, In as DialogFooter, It as AvatarFallback, J as MessageReactionPickerContent, Jn as useParentOverlayKind, Jt as DropdownMenuItemLabel, K as MessageReactionErrorIndicator, Kn as Spinner, Kt as DropdownMenuItem, L as MessageReferenceChip, Ln as DialogHeader, Lt as AvatarGroup, M as MessageTextSelectionToolbarButton, Mn as DialogBody, Mt as MessageItem, N as MessageTextSelectionToolbarSeparator, Nn as DialogClose, Nt as searchHit, O as MessageEmbedFooter, On as TooltipProvider, Ot as MessageItemSearchMatch, P as MessageMultiSelect, Pn as DialogContent, Pt as Avatar, Q as MessageReactionTooltipContent, Qn as useTheme, Qt as DropdownMenuRadioGroup, R as MessageReferenceIndicator, Rn as DialogNav, Rt as AvatarGroupCount, S as MessageQuotedPreviewText, Sn as Checkbox, St as MessageItemAttachments, T as MessageQuotedPreviewUnavailable, Tn as Tooltip, Tt as MessageItemEdited, U as MessageReactionAddButton, Un as DialogTrigger, Ut as DropdownMenuCheckboxItemIndicator, V as MessageReferenceText, Vn as DialogSurface, Vt as DropdownMenu, W as MessageReactionChip, Wn as Button, Wt as DropdownMenuContent, X as MessageReactionQuickButton, Xn as resolveThemeScopeProps, Xt as DropdownMenuPopup, Y as MessageReactionPickerStatic, Yn as withOverlayLayer, Yt as DropdownMenuLabel, Z as MessageReactionQuickRow, Zn as useThemeScopeProps, Zt as DropdownMenuPortal, _ as MessageQuotedPreviewAuthorName, _n as ScrollAreaCorner, _t as MessageItemSender, an as DropdownMenuTrigger, at as MessageItemBadgeSeparator, b as MessageQuotedPreviewHeader, bn as ScrollAreaViewport, bt as MessageItemSenderGroup, c as MessageListHistoryLimited, cn as Panel, ct as MessageItemToolbar, d as MessageQuotedPreview, dn as PanelHeaderRoot, en as DropdownMenuRadioItemIndicator, er as tv, et as MessageReactionTooltipName, f as MessageQuotedPreviewAttachment, fn as PanelScrollContent, g as MessageQuotedPreviewAuthorMeta, gn as ScrollAreaContent, gt as MessageItemMeta, hn as ScrollArea, ht as MessageItemInlineStatus, in as DropdownMenuSubmenuTrigger, it as MessageItemBadge, j as MessageTextSelectionToolbar, jn as Dialog, jt as MessageItemGutter, k as MessageEmbedHeader, kn as TooltipTrigger, kt as MessageItemAvatarSlot, l as MessageListNotice, ln as PanelBody, lt as MessageItemToolbarButton, m as MessageQuotedPreviewAuthor, mn as PanelSection, mt as MessageItemHeader, n as useMouseOnlyPointerSensor, nn as DropdownMenuShortcut, nr as headEdgePull, nt as MessageReactionTooltipNames, on as Kbd, ot as MessageItemReadReceipt, p as MessageQuotedPreviewAttachments, pn as PanelScrollViewport, q as MessageReactionGlyph, qn as defaultNativeButton, qt as DropdownMenuItemCount, rn as DropdownMenuSubmenu, rr as headEdges, rt as MessageReactionTooltipSeparator, s as MessageListDateDivider, sn as KbdGroup, st as MessageItemSavedIndicator, t as useHoldThenMoveTouchSensor, tn as DropdownMenuSeparator, tr as controlIconInset, tt as MessageReactionTooltipNameText, u as MessageList, un as PanelFooter, v as MessageQuotedPreviewChannel, vn as ScrollAreaScrollbar, vt as MessageItemSenderBadges, w as MessageQuotedPreviewTimestamp, wn as PRESENCE_COLOR, wt as MessageItemContent, x as MessageQuotedPreviewLoading, xn as useMobileViewport, xt as MessageItemTime, y as MessageQuotedPreviewContent, yn as ScrollAreaThumb, yt as MessageItemSenderButton, z as MessageReferenceLabel, zn as DialogOverlay, zt as AvatarImage } from "./touch-drag-CbWqiMlZ.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";
@@ -23,7 +23,7 @@ import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Progress as Progress$1 } from "@base-ui/react/progress";
-import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Toast } from "@base-ui/react/toast";
@@ -9065,10 +9065,7 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
 	const [listMinHeight, setListMinHeight] = useState();
 	const draftIdsRef = useRef([]);
 	const lastReorderPointerRef = useRef(null);
-	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: {
-		delay: 350,
-		tolerance: 8
-	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const sensors = useSensors(useMouseOnlyPointerSensor(6), useHoldThenMoveTouchSensor(), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
 	const attachments = useMemo(() => attachmentsById(children), [children]);
 	const itemIds = useMemo(() => items.map(String), [items]);
 	const horizontal = axis === "x";
@@ -9189,7 +9186,7 @@ function SortableComposerAttachment({ id, label, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref: setNodeRef,
 		"aria-label": `Reorder ${label}`,
-		className: "w-max max-w-full shrink-0 cursor-grab touch-none active:cursor-grabbing",
+		className: "w-max max-w-full shrink-0 cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing",
 		"data-dragging": isDragging ? "true" : void 0,
 		"data-slot": "sortable-composer-attachment",
 		style,
@@ -10735,7 +10732,7 @@ const tabs = tv({
 		],
 		background: ["", "hidden"],
 		tab: [
-			"relative z-10 flex shrink-0 cursor-pointer touch-manipulation items-center gap-1.5 whitespace-nowrap outline-none",
+			"relative z-10 flex shrink-0 cursor-pointer touch-manipulation select-none [-webkit-touch-callout:none] items-center gap-1.5 whitespace-nowrap outline-none",
 			"data-[reorderable=true]:cursor-pointer data-[dragging-source=true]:cursor-grabbing",
 			"font-sans text-callout font-semibold text-foreground-muted",
 			"transition-[background-color,box-shadow,color] duration-100 ease-out",
@@ -10949,14 +10946,11 @@ function TabsList({ className, children, variant = "default", ref, ...props }) {
 		})
 	});
 }
-function SortableTabsList({ value, onReorder, children, variant = "default", ...props }) {
+function SortableTabsList({ value, onReorder, onDragStart, children, variant = "default", ...props }) {
 	const [activeId, setActiveId] = useState(void 0);
 	const placement = use(TabsPlacementContext);
 	const dndContextId = useId();
-	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: {
-		delay: 350,
-		tolerance: 8
-	} }));
+	const sensors = useSensors(useMouseOnlyPointerSensor(6), useHoldThenMoveTouchSensor());
 	const tabIds = useMemo(() => value.map(String), [value]);
 	const reorderContext = useMemo(() => ({
 		enabled: true,
@@ -10964,7 +10958,8 @@ function SortableTabsList({ value, onReorder, children, variant = "default", ...
 	}), [activeId]);
 	const handleDragStart = useCallback(({ active }) => {
 		setActiveId(String(active.id));
-	}, []);
+		onDragStart?.(String(active.id));
+	}, [onDragStart]);
 	const handleDragCancel = useCallback(() => {
 		setActiveId(void 0);
 	}, []);
@@ -12505,7 +12500,7 @@ function TaskCardStatus({ busy = false, status, className, render, children, ...
 //#region src/components/task-dnd/task-dnd.recipe.ts
 const taskDnd = tv({ slots: {
 	draggable: [
-		"group/task-draggable relative cursor-grab touch-none active:cursor-grabbing",
+		"group/task-draggable relative cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing",
 		"outline-none",
 		"data-[dragging=true]:z-20 data-[dragging=true]:will-change-transform",
 		"data-[disabled=true]:cursor-default data-[disabled=true]:touch-auto",
@@ -12541,10 +12536,7 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
 	const [activeId, setActiveId] = useState(null);
 	const [activeHeight, setActiveHeight] = useState(null);
 	const [overStore] = useState(createTaskDndOverStore);
-	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(TouchSensor, { activationConstraint: {
-		delay: 200,
-		tolerance: 5
-	} }), useSensor(KeyboardSensor, { coordinateGetter: taskKeyboardCoordinates }));
+	const sensors = useSensors(useMouseOnlyPointerSensor(5), useHoldThenMoveTouchSensor(), useSensor(KeyboardSensor, { coordinateGetter: taskKeyboardCoordinates }));
 	const context = useMemo(() => ({
 		activeId,
 		activeHeight,
@@ -13399,10 +13391,45 @@ function toLayoutUnit(value) {
 	return Math.round(value * 64) / 64;
 }
 //#endregion
+//#region src/components/virtual-list/utils/size-cache.ts
+/**
+* Records `size` as the measured size of row `key` in `offsets`, kept even when it equals the estimate
+* (an offset of 0), so the row counts as measured. Returns whether the cache changed.
+*/
+function recordMeasuredSize(offsets, key, size, itemEstimatedSize) {
+	const offset = size - itemEstimatedSize;
+	if (offsets.get(key) === offset) return false;
+	offsets.set(key, offset);
+	return true;
+}
+function createTypicalSizeCache() {
+	return {
+		version: -1,
+		itemEstimatedSize: NaN,
+		size: 0
+	};
+}
+/**
+* The size rows typically are: the mean size of the measured rows (`offsets`), or `itemEstimatedSize`
+* before any is measured, and at least `itemMinSize` (and 1). Kept in `cache` and computed again only
+* when `version` (bumped whenever `offsets` changes) or `itemEstimatedSize` changes.
+*/
+function getTypicalSize(cache, offsets, version, itemEstimatedSize, itemMinSize) {
+	if (cache.version !== version || cache.itemEstimatedSize !== itemEstimatedSize) {
+		let total = 0;
+		for (const offset of offsets.values()) total += offset;
+		cache.size = itemEstimatedSize + (offsets.size === 0 ? 0 : total / offsets.size);
+		cache.version = version;
+		cache.itemEstimatedSize = itemEstimatedSize;
+	}
+	return Math.max(cache.size, itemMinSize, 1);
+}
+//#endregion
 //#region src/components/virtual-list/utils/range.ts
 /**
 * The items to render: from the item at `scrollTop - paddingTop` through as many items as fit in
-* `listHeight` at their minimum size, plus one (no overscan). Empty (`0..-1`) before the list has been
+* `listHeight` at their minimum size, plus one (the overscan is `getOverscannedRange`'s). Empty
+* (`0..-1`) before the list has been
 * measured or when there are no items.
 */
 function getVerticalRange({ fenwickTree, scrollTop, listHeight, itemMinSize, itemCount, paddingTop }) {
@@ -13416,6 +13443,60 @@ function getVerticalRange({ fenwickTree, scrollTop, listHeight, itemMinSize, ite
 		endIndex: Math.min(startIndex + Math.ceil(listHeight / itemMinSize + 1), itemCount - 1)
 	};
 }
+const OVERSCAN_MIN = .25;
+const OVERSCAN_TARGET = 1;
+const OVERSCAN_MAX = 2.5;
+const OVERSCAN_BELOW = .25;
+/**
+* The last row needed to fill the view from row `startIndex` down: measured rows (`isMeasured`) count at
+* their size, the others at `itemMinSize`, so the view is filled whatever the unmeasured rows turn out
+* to be. `viewTop` is the view's top in item offsets.
+*/
+function getNeededEnd({ fenwickTree, startIndex, viewTop, listHeight, itemMinSize, itemCount, isMeasured }) {
+	const bottom = viewTop + listHeight;
+	let offset = fenwickTree.sum(startIndex);
+	let index = startIndex;
+	for (; index < itemCount - 1; ++index) {
+		offset += isMeasured(index) ? fenwickTree.get(index) : Math.max(itemMinSize, 1);
+		if (offset >= bottom) break;
+	}
+	return index;
+}
+/**
+* The items to render with overscan (see above), from the range in view (`view`, as `getVerticalRange`
+* gives it), the last row needed to fill the view (`neededEnd`) and the rendered range (`prev`).
+* `viewTop` is the view's top in item offsets, `moved` how far it moved since the last range update,
+* `movingUp` whether it last moved up, `settling` whether a jump is settling, `plannedSize` the size a
+* row is counted at when planning how many rows to mount above the view. With a `listHeight` of 0
+* (not laid out) there is no overscan: `view` is returned.
+*/
+function getOverscannedRange({ fenwickTree, view, prev, neededEnd, viewTop, moved, movingUp, settling, plannedSize, listHeight, itemCount }) {
+	const last = itemCount - 1;
+	const min = OVERSCAN_MIN * listHeight;
+	const target = OVERSCAN_TARGET * listHeight;
+	const max = OVERSCAN_MAX * listHeight;
+	const apart = view.startIndex > prev.endIndex || view.endIndex < prev.startIndex;
+	if (listHeight <= 0 || view.endIndex < view.startIndex || prev.endIndex < prev.startIndex || prev.endIndex > last || moved > max || apart && moved === 0) return view;
+	let ahead = view.startIndex;
+	for (let above = viewTop - fenwickTree.sum(ahead); ahead > 0 && above < target;) {
+		ahead -= 1;
+		above += plannedSize(ahead);
+	}
+	let startIndex = prev.startIndex;
+	if (prev.startIndex > view.startIndex) startIndex = movingUp && !settling ? ahead : view.startIndex;
+	else if (!settling) {
+		const above = viewTop - fenwickTree.sum(prev.startIndex);
+		if (movingUp ? above < min : above > max) startIndex = movingUp ? Math.min(ahead, prev.startIndex) : ahead;
+	}
+	const needed = Math.min(neededEnd, view.endIndex);
+	const neededBottom = fenwickTree.sum(needed + 1);
+	let endIndex = prev.endIndex;
+	if (prev.endIndex < needed || movingUp && !settling && fenwickTree.sum(prev.endIndex + 1) - neededBottom > max) endIndex = Math.min(Math.max(fenwickTree.getBound(neededBottom + OVERSCAN_BELOW * listHeight), needed), last);
+	return {
+		startIndex,
+		endIndex
+	};
+}
 /** The columns to render: the ones in `scrollLeft .. scrollLeft + listWidth`, plus one on each side. */
 function getHorizontalRange({ xFenwickTree, scrollLeft, listWidth, columnCount }) {
 	if (xFenwickTree === null || columnCount === 0) return {
@@ -13866,7 +13947,11 @@ function VirtualList(props) {
 	const keptKeysRef = useRef([]);
 	/** The key of the row that holds focus (`document.activeElement` is in it), tracked by focusin / focusout. */
 	const focusedKeyRef = useRef(null);
+	/** The measured rows' sizes, by key (see `utils/size-cache.ts`). */
 	const keyToHeightOffsetRef = useRef(/* @__PURE__ */ new Map());
+	/** Bumped whenever `keyToHeightOffsetRef` changes (see `getTypicalSize`). */
+	const measuredVersionRef = useRef(0);
+	const typicalSizeRef = useRef(createTypicalSizeCache());
 	const leadingMarginRef = useRef(0);
 	/**
 	* Where the first mounted row in flow starts in the visible-items element (its top margin there,
@@ -13877,6 +13962,8 @@ function VirtualList(props) {
 	const pendingScrollTaskTimeoutRef = useRef(null);
 	const pendingScrollTaskRafRef = useRef(null);
 	const wheelScrollingRef = useRef(false);
+	/** Whether the view last moved up (see `updateRange`). */
+	const scrollingUpRef = useRef(false);
 	/** Clears `wheelScrollingRef` in the next frame; this list's own, so other lists cannot replace it. */
 	const [runLatestInNextFrame] = useState(createLatestInNextFrame);
 	/** The wheel is only taken over (catchWheel) where the pointer is not coarse. */
@@ -13944,6 +14031,7 @@ function VirtualList(props) {
 		keptKeysRef.current = [];
 		focusedKeyRef.current = null;
 		keyToHeightOffsetRef.current.clear();
+		measuredVersionRef.current += 1;
 		leadingMarginRef.current = 0;
 		keyToIndexRef.current = /* @__PURE__ */ new Map();
 		rangeRef.current = {
@@ -14135,9 +14223,12 @@ function VirtualList(props) {
 			}
 		}
 	}, [virtual]);
+	/** The size rows typically are: the mean of the measured rows (`getTypicalSize`). */
+	const getTypicalRowSize = useEventCallback(() => getTypicalSize(typicalSizeRef.current, keyToHeightOffsetRef.current, measuredVersionRef.current, itemEstimatedSize, itemMinSize));
 	/**
 	* The viewport sync. The range starts at the item at `scrollTop + compensation - paddingTop` and
-	* holds as many items as fit at `itemMinSize`, plus one. Items holding the text selection, and the item
+	* holds as many items as fit at `itemMinSize`, plus one, and is overscanned in batches
+	* (`getOverscannedRange`). Items holding the text selection, and the item
 	* holding focus, stay
 	* mounted ("kept"). When the new range is inside the old one, only the layout styles are written;
 	* otherwise the items entering above the old start are recorded (`prependIndexes`) and the range is
@@ -14163,7 +14254,7 @@ function VirtualList(props) {
 			startIndex: range.verticalStartIndex,
 			endIndex: range.verticalEndIndex
 		};
-		const nextRange = getVerticalRange({
+		const viewRange = getVerticalRange({
 			fenwickTree,
 			scrollTop: effectiveScrollTop,
 			listHeight: viewport.listHeight,
@@ -14171,8 +14262,37 @@ function VirtualList(props) {
 			itemCount: items.length,
 			paddingTop: getRowsTop()
 		});
+		const overscanned = viewport.listHeight > 0;
+		if (scrollTop !== viewport.scrollTop) scrollingUpRef.current = scrollTop < viewport.scrollTop;
+		const nextRange = overscanned ? getOverscannedRange({
+			fenwickTree,
+			view: viewRange,
+			prev: prevRange,
+			neededEnd: getNeededEnd({
+				fenwickTree,
+				startIndex: viewRange.startIndex,
+				viewTop: effectiveScrollTop - getRowsTop(),
+				listHeight: viewport.listHeight,
+				itemMinSize,
+				itemCount: items.length,
+				isMeasured: (index) => {
+					const item = items[index];
+					return item !== void 0 && keyToHeightOffsetRef.current.has(getKey(item));
+				}
+			}),
+			viewTop: effectiveScrollTop - getRowsTop(),
+			moved: Math.abs(scrollTop - viewport.scrollTop),
+			movingUp: scrollingUpRef.current,
+			settling: pendingScrollTaskRef.current !== null,
+			plannedSize: (index) => {
+				const item = items[index];
+				return item !== void 0 && keyToHeightOffsetRef.current.has(getKey(item)) ? fenwickTree.get(index) : getTypicalRowSize();
+			},
+			listHeight: viewport.listHeight,
+			itemCount: items.length
+		}) : viewRange;
 		const rangeChanged = prevRange.startIndex !== nextRange.startIndex || prevRange.endIndex !== nextRange.endIndex;
-		const nextInsidePrev = nextRange.startIndex >= prevRange.startIndex && prevRange.endIndex >= nextRange.endIndex;
+		const nextInsidePrev = !overscanned && nextRange.startIndex >= prevRange.startIndex && prevRange.endIndex >= nextRange.endIndex;
 		const prevColRange = {
 			startIndex: range.horizontalStartIndex,
 			endIndex: range.horizontalEndIndex
@@ -14406,9 +14526,8 @@ function VirtualList(props) {
 		rows.forEach(({ key, index }, i) => {
 			const size = spans[i];
 			const previousSize = fenwickTree.get(index);
+			if (recordMeasuredSize(keyToHeightOffsetRef.current, key, size, itemEstimatedSize)) measuredVersionRef.current += 1;
 			if (size === previousSize) return;
-			if (size - itemEstimatedSize === 0) keyToHeightOffsetRef.current.delete(key);
-			else keyToHeightOffsetRef.current.set(key, size - itemEstimatedSize);
 			fenwickTree.add(index, size - previousSize);
 			resizes.push({
 				index,
@@ -14728,6 +14847,10 @@ function VirtualList(props) {
 		const isFirstOfKey = /* @__PURE__ */ new Map();
 		for (const { key, isFirst } of queue) if (!isFirstOfKey.has(key)) isFirstOfKey.set(key, isFirst);
 		const { resizes, leadingMarginDelta } = measureFlowRun();
+		if (resizes.length === 0 && leadingMarginDelta === 0 && pendingScrollTaskRef.current === null) {
+			clearItemResizeQueue();
+			return;
+		}
 		applyLayoutStyles(startIndex);
 		onContentResize?.();
 		const listEl = listElRef.current;
@@ -15001,7 +15124,45 @@ function VirtualList(props) {
 		ItemComponent,
 		renderItemChild
 	]);
-	const renderedVisibleItems = useMemo(() => visibleItems.map((item) => renderItem(item, false)), [renderItem, visibleItems]);
+	const renderInputs = useMemo(() => ({}), [
+		virtual,
+		getKey,
+		renderCol,
+		renderItemWithCols,
+		itemResizable,
+		sessionId,
+		ignoreItemResize,
+		ItemComponent,
+		renderItemChild
+	]);
+	const [flowElements] = useState(() => /* @__PURE__ */ new Map());
+	const renderedVisibleItems = useMemo(() => {
+		const nodes = visibleItems.map((item) => {
+			const key = getKey(item);
+			const index = keyToIndexRef.current.get(key);
+			const cached = flowElements.get(key);
+			if (cached !== void 0 && cached.item === item && cached.index === index && cached.inputs === renderInputs) return cached.node;
+			const node = renderItem(item, false);
+			flowElements.set(key, {
+				item,
+				index,
+				inputs: renderInputs,
+				node
+			});
+			return node;
+		});
+		if (flowElements.size > visibleItems.length) {
+			const inRange = new Set(visibleItems.map(getKey));
+			for (const key of flowElements.keys()) if (!inRange.has(key)) flowElements.delete(key);
+		}
+		return nodes;
+	}, [
+		renderItem,
+		visibleItems,
+		getKey,
+		flowElements,
+		renderInputs
+	]);
 	const renderedKeptBefore = useMemo(() => keptItemsBefore.map((item) => renderItem(item, true)), [renderItem, keptItemsBefore]);
 	const renderedKeptAfter = useMemo(() => keptItemsAfter.map((item) => renderItem(item, true)), [renderItem, keptItemsAfter]);
 	useNonVirtualContentResize(itemsElRef, onContentResize, !virtual);
@@ -15045,9 +15206,7 @@ function VirtualList(props) {
 				const { spans, firstStart } = measureRowSpans(visibleItemsEl, rows.map((row) => row.el));
 				if (rows[0] !== void 0 && keyToIndexRef.current.get(rows[0].key) === 0) leadingMarginRef.current = firstStart;
 				rows.forEach(({ key }, i) => {
-					const offset = spans[i] - itemEstimatedSize;
-					if (offset === 0) keyToHeightOffsetRef.current.delete(key);
-					else keyToHeightOffsetRef.current.set(key, offset);
+					if (recordMeasuredSize(keyToHeightOffsetRef.current, key, spans[i], itemEstimatedSize)) measuredVersionRef.current += 1;
 				});
 			}
 		}

package/dist/{message-list-03unCFnE.mjs → touch-drag-CbWqiMlZ.mjs}

@@ -14,6 +14,7 @@ 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";
+import { PointerSensor, TouchSensor, useSensor } from "@dnd-kit/core";
 //#region src/lib/head-edges.ts
 /**
 * The ends of a header (design/foundations/alignment.md#the-ends-of-a-header).
@@ -3287,5 +3288,99 @@ function MessageListJumpPillDismiss({ className, children, render, nativeButton,
 		})
 	});
 }
+const holds = /* @__PURE__ */ new WeakMap();
+function touchPoint(event) {
+	const touch = event.touches?.[0] ?? event.changedTouches?.[0];
+	return touch ? {
+		x: touch.clientX,
+		y: touch.clientY
+	} : null;
+}
+function farther(from, to, limit) {
+	return Math.hypot(to.x - from.x, to.y - from.y) > limit;
+}
+var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
+	static activators = TouchSensor.activators;
+	static setup() {
+		return TouchSensor.setup();
+	}
+	attach() {
+		super.attach();
+		const self = this;
+		const { holdMs = 500 } = self.props.options;
+		const state = {
+			heldAt: null,
+			last: null,
+			timer: setTimeout(() => {
+				state.heldAt = state.last ?? self.initialCoordinates;
+			}, holdMs)
+		};
+		holds.set(this, state);
+	}
+	handleMove(event) {
+		const self = this;
+		const state = holds.get(this);
+		if (self.activated || !state) {
+			super.handleMove(event);
+			return;
+		}
+		if ((event.touches?.length ?? 1) > 1) {
+			self.handleCancel();
+			return;
+		}
+		const point = touchPoint(event);
+		const start = self.initialCoordinates;
+		if (!point || !start) return;
+		state.last = point;
+		const { distance = 10, tolerance = 10 } = self.props.options;
+		if (!state.heldAt) {
+			if (farther(start, point, tolerance)) self.handleCancel();
+			return;
+		}
+		if (event.cancelable) event.preventDefault();
+		if (farther(state.heldAt, point, distance)) self.handleStart();
+	}
+	detach() {
+		const state = holds.get(this);
+		if (state) clearTimeout(state.timer);
+		holds.delete(this);
+		super.detach();
+	}
+};
+/** A TouchSensor that starts a drag on the first move after a still hold (see above). */
+const HoldThenMoveTouchSensor = HoldThenMoveTouchSensorImpl;
+/**
+* dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
+* left to `HoldThenMoveTouchSensor`.
+*/
+var MouseOnlyPointerSensor = class extends PointerSensor {
+	static activators = [{
+		eventName: "onPointerDown",
+		handler: (event, options) => event.nativeEvent.pointerType === "touch" ? false : PointerSensor.activators[0].handler(event, options)
+	}];
+};
+/**
+* `useSensor(HoldThenMoveTouchSensor, …)` with the activation the sensor relies
+* on: no constraint dnd-kit would act on by itself, so only a move after the
+* hold starts the drag.
+*/
+function useHoldThenMoveTouchSensor({ holdMs = 500, distance = 10, tolerance = 10 } = {}) {
+	const options = useMemo(() => ({
+		holdMs,
+		distance,
+		tolerance,
+		activationConstraint: { distance: Number.POSITIVE_INFINITY }
+	}), [
+		holdMs,
+		distance,
+		tolerance
+	]);
+	return useSensor(HoldThenMoveTouchSensor, options);
+}
+/** The mouse / pen sensor that goes with it: picks up after `distance` px. */
+function useMouseOnlyPointerSensor(distance) {
+	const options = useMemo(() => ({ activationConstraint: { distance } }), [distance]);
+	return useSensor(MouseOnlyPointerSensor, options);
+}
 //#endregion
-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 };
+export { MessageReactionTooltipMeta as $, ThemeStateContext as $n, DropdownMenuRadioItem as $t, messageEmbed as A, Badge as An, MessageItemContinuationTime as At, MessageReferencePending as B, DialogPortal as Bn, useOverflowTitle as Bt, MessageQuotedPreviewThread as C, CheckboxIndicator as Cn, MessageItemBody as Ct, MessageEmbedContent as D, TooltipPortal as Dn, MessageItemFooter as Dt, MessageEmbed as E, TooltipContent as En, MessageItemEmbedded as Et, MessageMultiSelectCheckbox as F, DialogDescription as Fn, AvatarBadge as Ft, MessageReactionCount as G, buttonVariants as Gn, DropdownMenuFooter as Gt, MessageReferenceUnavailable as H, DialogTitle as Hn, DropdownMenuCheckboxItem as Ht, MessageMultiSelectToolbar as I, DialogFooter as In, AvatarFallback as It, MessageReactionPickerContent as J, useParentOverlayKind as Jn, DropdownMenuItemLabel as Jt, MessageReactionErrorIndicator as K, Spinner as Kn, DropdownMenuItem as Kt, MessageReferenceChip as L, DialogHeader as Ln, AvatarGroup as Lt, MessageTextSelectionToolbarButton as M, DialogBody as Mn, MessageItem as Mt, MessageTextSelectionToolbarSeparator as N, DialogClose as Nn, searchHit as Nt, MessageEmbedFooter as O, TooltipProvider as On, MessageItemSearchMatch as Ot, MessageMultiSelect as P, DialogContent as Pn, Avatar$1 as Pt, MessageReactionTooltipContent as Q, useTheme as Qn, DropdownMenuRadioGroup as Qt, MessageReferenceIndicator as R, DialogNav as Rn, AvatarGroupCount as Rt, MessageQuotedPreviewText as S, Checkbox$1 as Sn, MessageItemAttachments as St, MessageQuotedPreviewUnavailable as T, Tooltip$1 as Tn, MessageItemEdited as Tt, MessageReactionAddButton as U, DialogTrigger as Un, DropdownMenuCheckboxItemIndicator as Ut, MessageReferenceText as V, DialogSurface as Vn, DropdownMenu as Vt, MessageReactionChip as W, Button$1 as Wn, DropdownMenuContent as Wt, MessageReactionQuickButton as X, resolveThemeScopeProps as Xn, DropdownMenuPopup as Xt, MessageReactionPickerStatic as Y, withOverlayLayer as Yn, DropdownMenuLabel as Yt, MessageReactionQuickRow as Z, useThemeScopeProps as Zn, DropdownMenuPortal as Zt, MessageQuotedPreviewAuthorName as _, ScrollAreaCorner as _n, MessageItemSender as _t, MessageListJumpPillDismiss as a, DropdownMenuTrigger as an, MessageItemBadgeSeparator as at, MessageQuotedPreviewHeader as b, ScrollAreaViewport as bn, MessageItemSenderGroup as bt, MessageListHistoryLimited as c, Panel as cn, MessageItemToolbar as ct, MessageQuotedPreview as d, PanelHeaderRoot as dn, MessageItemDelegatedBy as dt, DropdownMenuRadioItemIndicator as en, tv$1 as er, MessageReactionTooltipName as et, MessageQuotedPreviewAttachment as f, PanelScrollContent as fn, MessageItemDelegatedByButton as ft, MessageQuotedPreviewAuthorMeta as g, ScrollAreaContent as gn, MessageItemMeta as gt, MessageQuotedPreviewAuthorDelegatedBy as h, ScrollArea$1 as hn, MessageItemInlineStatus as ht, MessageListJumpPill as i, DropdownMenuSubmenuTrigger as in, MessageItemBadge as it, MessageTextSelectionToolbar as j, Dialog$1 as jn, MessageItemGutter as jt, MessageEmbedHeader as k, TooltipTrigger as kn, MessageItemAvatarSlot as kt, MessageListNotice as l, PanelBody as ln, MessageItemToolbarButton as lt, MessageQuotedPreviewAuthor as m, PanelSection as mn, MessageItemHeader as mt, useMouseOnlyPointerSensor as n, DropdownMenuShortcut as nn, headEdgePull as nr, MessageReactionTooltipNames as nt, MessageListJumpPillGroup as o, Kbd as on, MessageItemReadReceipt as ot, MessageQuotedPreviewAttachments as p, PanelScrollViewport as pn, MessageItemDelegatedByName as pt, MessageReactionGlyph as q, defaultNativeButton as qn, DropdownMenuItemCount as qt, MessageListJumpControls as r, DropdownMenuSubmenu as rn, headEdges as rr, MessageReactionTooltipSeparator as rt, MessageListDateDivider as s, KbdGroup as sn, MessageItemSavedIndicator as st, useHoldThenMoveTouchSensor as t, DropdownMenuSeparator as tn, controlIconInset as tr, MessageReactionTooltipNameText as tt, MessageList as u, PanelFooter as un, MessageItemDelegatedAvatar as ut, MessageQuotedPreviewChannel as v, ScrollAreaScrollbar as vn, MessageItemSenderBadges as vt, MessageQuotedPreviewTimestamp as w, PRESENCE_COLOR as wn, MessageItemContent as wt, MessageQuotedPreviewLoading as x, useMobileViewport as xn, MessageItemTime as xt, MessageQuotedPreviewContent as y, ScrollAreaThumb as yn, MessageItemSenderButton as yt, MessageReferenceLabel as z, DialogOverlay as zn, AvatarImage as zt };

package/dist/wip.d.mts

@@ -1,8 +1,9 @@
 import { C as MessageQuotedPreviewAuthorDelegatedBy, Hi as DialogTitleProps, Ki as ButtonProps, Si as DialogClose, Ti as DialogContentProps, Ui as DialogTrigger, Xi as StyledProps, Yi as DataAttributes, a as MessageListJumpPillDismissProps, c as MessageListJumpPillProps, cn as MessageItemDelegatedAvatar, dn as MessageItemDelegatedByButton, fn as MessageItemDelegatedByButtonProps, hn as MessageItemDelegatedByProps, i as MessageListJumpPillDismiss, ln as MessageItemDelegatedAvatarProps, mn as MessageItemDelegatedByNameProps, n as MessageListJumpControlsProps, o as MessageListJumpPillGroup, pn as MessageItemDelegatedByName, r as MessageListJumpPill, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, un as MessageItemDelegatedBy, w as MessageQuotedPreviewAuthorDelegatedByProps, yi as Dialog } from "./index-DsVVBZ5T.mjs";
-import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+import { CSSProperties, ComponentPropsWithRef, PointerEvent, ReactNode } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
 import { Combobox } from "@base-ui/react/combobox";
+import { PointerSensor, TouchSensor, TouchSensorOptions } from "@dnd-kit/core";
 //#region src/components/combobox-select/combobox-select.types.d.ts
 type ComboboxSelectValue = string | number;
 interface ComboboxSelectOption {
@@ -265,4 +266,20 @@ type UseCommentMarginFitsOptions = {
  */
 export declare function useCommentMarginFits(element: Element | null, { minWidth }?: UseCommentMarginFitsOptions): boolean;
 //#endregion
-export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, type UseCommentMarginFitsOptions };
+//#region src/lib/touch-drag.d.ts
+type HoldThenMoveOptions = {
+  /** How long the finger stays still before a move can start the drag. */
+  holdMs?: number;
+  /** How far the finger moves after the hold to start the drag. */
+  distance?: number;
+  /** How far the finger may drift during the hold before it counts as a scroll. */
+  tolerance?: number;
+};
+/**
+ * `useSensor(HoldThenMoveTouchSensor, …)` with the activation the sensor relies
+ * on: no constraint dnd-kit would act on by itself, so only a move after the
+ * hold starts the drag.
+ */
+export declare function useHoldThenMoveTouchSensor({ holdMs, distance, tolerance }?: HoldThenMoveOptions): import("@dnd-kit/core").SensorDescriptor<TouchSensorOptions>;
+//#endregion
+export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, type HoldThenMoveOptions, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, type UseCommentMarginFitsOptions };

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-03unCFnE.mjs";
+import { Bt as useOverflowTitle, Hn as DialogTitle, Nn as DialogClose, Pn as DialogContent, Qn as useTheme, Un as DialogTrigger, Wn as Button$1, Zn as useThemeScopeProps, a as MessageListJumpPillDismiss, dt as MessageItemDelegatedBy, er as tv, ft as MessageItemDelegatedByButton, h as MessageQuotedPreviewAuthorDelegatedBy, i as MessageListJumpPill, jn as Dialog, o as MessageListJumpPillGroup, pt as MessageItemDelegatedByName, qn as defaultNativeButton, r as MessageListJumpControls, t as useHoldThenMoveTouchSensor, ut as MessageItemDelegatedAvatar } from "./touch-drag-CbWqiMlZ.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";
@@ -27,17 +27,20 @@ function getSnapshot() {
 function usePhoneMedia() {
 	return useSyncExternalStore(subscribe, getSnapshot, () => false);
 }
+//#endregion
+//#region src/components/combobox-select/combobox-select.list-side.ts
+/** One option row (36px) and the list's 6px padding above and below. */
+const ROW = 36;
+const LIST_PADDING = 12;
+/** The gap between the field and the list (the positioner's sideOffset). */
+const SIDE_OFFSET = 4;
 /**
-* The side a phone's list opens on, chosen once when it opens so it never flips
-* while it is open (a phone's visual viewport keeps changing under it, as the
-* keyboard and the address bar come and go). Below, unless the room below is
-* short of the list and there is more above. `listHeight` is the list's full
-* height and `maxHeight` its cap (`listMaxHeight`), both in pixels.
+* Whether fewer than three rows of a phone's list fit between the field and the
+* bottom of the visual viewport. The list always opens below the field on a
+* phone and never flips; when this is true the field is scrolled up instead.
 */
-function preferredListSide(anchor, viewport, listHeight, maxHeight) {
-	const below = viewport.top + viewport.height - anchor.bottom;
-	const above = anchor.top - viewport.top;
-	return below >= Math.min(listHeight, maxHeight) || below >= above ? "bottom" : "top";
+function roomBelowIsShort(field, viewport, rows = 3) {
+	return viewport.top + viewport.height - field.bottom - SIDE_OFFSET < rows * ROW + LIST_PADDING;
 }
 //#endregion
 //#region src/components/combobox-select/combobox-select.options.ts
@@ -106,37 +109,41 @@ function renderSelectedChip({ record, index, tagLimit, strings, renderLabel, ren
 	}, optionKey(record.value));
 }
 /**
-* On a phone the list keeps the side it opened on: it never flips while it is
-* open, as the keyboard or the address bar change the visual viewport under it.
+* On a phone the list always opens below the field, between the field and the
+* keyboard, as a native autocomplete does, and never flips: which side has more
+* room depends on whether the keyboard happens to be up, so choosing a side made
+* the same field open up one time and down the next.
 */
 const PHONE_LIST_COLLISION = {
 	side: "none",
 	align: "shift",
 	fallbackAxisSide: "none"
 };
-/** A CSS length in pixels, as the document resolves it (rem, vh, calc()). */
-function resolveLength(doc, length) {
-	const probe = doc.createElement("div");
-	probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;width:0";
-	probe.style.height = length;
-	doc.body.append(probe);
-	const height = probe.getBoundingClientRect().height;
-	probe.remove();
-	return height;
-}
-/** The side the phone's list opens on, from the room around the field and the list's cap. */
-function measureListSide(anchor, groups, maxHeight) {
-	const view = anchor?.ownerDocument.defaultView;
-	if (!anchor || !view) return "bottom";
+/**
+* Keeps room for the list below the field on a phone: when fewer than three
+* rows fit between the field and the bottom of the visual viewport (the
+* keyboard's top edge while it is up), scrolls the field up to the top of
+* what is visible instead of flipping the list above it.
+*/
+function keepRoomBelow(field) {
+	const view = field?.ownerDocument.defaultView;
+	if (!field || !view) return;
 	const visual = view.visualViewport;
-	const rows = groups.reduce((count, group) => count + group.items.length + (group.label == null ? 0 : 1), 0);
-	return preferredListSide(anchor.getBoundingClientRect(), visual ? {
+	const viewport = visual ? {
 		top: visual.offsetTop,
 		height: visual.height
 	} : {
 		top: 0,
 		height: view.innerHeight
-	}, rows * 36 + 12, resolveLength(anchor.ownerDocument, maxHeight));
+	};
+	if (roomBelowIsShort(field.getBoundingClientRect(), viewport)) {
+		if (!field.style.scrollMarginTop) field.style.scrollMarginTop = "2.5rem";
+		field.scrollIntoView({
+			block: "start",
+			inline: "nearest",
+			behavior: "instant"
+		});
+	}
 }
 /** Options-driven composition. The stable compound Combobox API stays unchanged. */
 function isItemEqualToValue(a, b) {
@@ -422,17 +429,27 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 	const valueChange = handleValueChange;
 	const listHeight = typeof listMaxHeight === "number" ? `${listMaxHeight}px` : listMaxHeight;
 	const fieldRef = useRef(null);
-	const [listSide, setListSide] = useState("bottom");
-	const groups = normalized.groups;
+	const [phoneOpen, setPhoneOpen] = useState(false);
 	const handleOpenChange = useCallback((next, details) => {
 		onOpenChange?.(next, details);
-		if (next && phone && !details.isCanceled) setListSide(measureListSide(fieldRef.current, groups, listHeight ?? "16rem"));
-	}, [
-		onOpenChange,
-		phone,
-		groups,
-		listHeight
-	]);
+		if (phone && !details.isCanceled) setPhoneOpen(next);
+	}, [onOpenChange, phone]);
+	useEffect(() => {
+		if (!phone || !phoneOpen) return;
+		const field = fieldRef.current;
+		const visual = field?.ownerDocument.defaultView?.visualViewport;
+		let frame = 0;
+		const check = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => keepRoomBelow(field));
+		};
+		check();
+		visual?.addEventListener("resize", check);
+		return () => {
+			cancelAnimationFrame(frame);
+			visual?.removeEventListener("resize", check);
+		};
+	}, [phone, phoneOpen]);
 	const popupPropsStyle = popupProps?.style;
 	const popupStyle = useMemo(() => {
 		if (listHeight === void 0) return popupPropsStyle;
@@ -473,7 +490,7 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 				align: "start",
 				collisionPadding: 8,
 				...phone ? {
-					side: listSide,
+					side: "bottom",
 					collisionAvoidance: PHONE_LIST_COLLISION
 				} : null,
 				...positionerProps,
@@ -1106,4 +1123,4 @@ function useCommentMarginFits(element, { minWidth = 784 } = {}) {
 	return desktop && element !== null && width >= minWidth;
 }
 //#endregion
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",
@@ -86,6 +86,7 @@
     "react-dom": "^19"
   },
   "scripts": {
+    "bench:virtual-list": "node bench/virtual-list/run.mjs",
     "build:tokens": "node scripts/build-tokens.mjs",
     "build": "vp pack",
     "check": "vp check",