@botiverse/raft-ui 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [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

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;
 };

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,

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";
@@ -1123,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.16.0",
+  "version": "0.17.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",