@botiverse/raft-ui 0.35.0 → 0.36.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageTextSelectionToolbarSeparator, $i as controlIconInset, $n as PopoverClose, $r as ListRow, $t as MessageItemSearchMatch, A as MessageList, An as PreviewCardHeader, Ar as DropdownMenuSeparator, At as MessageItemBadgeSeparator, B as MessageQuotedPreviewHeader, Bi as Button, Br as PanelHeaderRoot, Bt as MessageItemInlineStatus, Ci as DialogDescription, Cr as DropdownMenuLabel, Ct as MessageReactionTooltipContent, D as MessageListEndFade, Di as DialogNav, Dn as PreviewCardDescription, Dr as DropdownMenuRadioGroup, Dt as MessageReactionTooltipNames, E as MessageListDateDivider, Ei as DialogHeader, En as PreviewCardContent, Er as DropdownMenuPortal, Et as MessageReactionTooltipNameText, Fi as panelToggleAction, Fn as PreviewCardTitle, Fr as Kbd, G as MessageQuotedPreviewUnavailable, Gi as useParentOverlayKind, Gr as ScrollAreaContent, Gt as MessageItemSenderGroup, H as MessageQuotedPreviewText, Hi as Spinner, Hr as PanelScrollViewport, Ht as MessageItemSender, I as MessageQuotedPreviewAuthorMeta, Ii as TextLink, In as PreviewCardTrigger, Ir as KbdGroup, J as MessageEmbedFooter, Ji as useTheme, Jn as Popover, Jr as ScrollAreaThumb, Jt as MessageItemBody, K as MessageEmbed, Ki as withOverlayLayer, Kr as ScrollAreaCorner, Kt as MessageItemTime, L as MessageQuotedPreviewAuthorName, Li as TextLinkExternalIcon, Lr as Panel, M as MessageQuotedPreviewAttachment, Mi as DialogTitle, Mn as PreviewCardPopup, Mr as DropdownMenuSubmenu, Mt as MessageItemSavedIndicator, N as MessageQuotedPreviewAttachments, Ni as DialogTrigger, Nn as PreviewCardPortal, Nr as DropdownMenuSubmenuTrigger, Nt as MessageItemToolbar, O as MessageListHistoryLimited, Oi as DialogOverlay, Or as DropdownMenuRadioItem, Ot as MessageReactionTooltipSeparator, P as MessageQuotedPreviewAuthor, Pi as PanelAction, Pn as PreviewCardSeparator, Pr as DropdownMenuTrigger, Pt as MessageItemToolbarButton, Q as MessageTextSelectionToolbarButton, Qi as useStackedActions, Qr as PRESENCE_COLOR, Qt as MessageItemFooter, R as MessageQuotedPreviewChannel, Ri as textLinkVariants, Rr as PanelBody, Si as DialogContent, Sn as PreviewCard, Sr as DropdownMenuItemLabel, St as MessageReactionQuickRow, Tr as DropdownMenuPopup, Tt as MessageReactionTooltipName, U as MessageQuotedPreviewThread, Ui as defaultNativeButton, Ur as PanelSection, Ut as MessageItemSenderBadges, V as MessageQuotedPreviewLoading, Vi as buttonVariants, Vr as PanelScrollContent, Vt as MessageItemMeta, W as MessageQuotedPreviewTimestamp, Wr as ScrollArea, Wt as MessageItemSenderButton, X as messageEmbed, Xi as tv, Xn as PopoverArrow, Xr as Checkbox, Xt as MessageItemEdited, Y as MessageEmbedHeader, Yi as ThemeStateContext, Yr as ScrollAreaViewport, Yt as MessageItemContent, Z as MessageTextSelectionToolbar, Zi as stackedActions, Zn as PopoverBackdrop, Zr as CheckboxIndicator, Zt as MessageItemEmbedded, _ as InboxItemTrailing, _n as useOverflowTitle, _r as DropdownMenuCheckboxItemIndicator, _t as MessageReactionErrorIndicator, a as InboxItemContext, ai as ListRowIcon, an as Avatar, ar as PopoverSeparator, b as useLatestRef, bi as DialogBody, br as DropdownMenuItem, bt as MessageReactionPickerStatic, c as InboxItemLeading, ci as ListRowTop, cn as AvatarGroup, cr as PopoverViewport, ct as MessageReferencePending, d as InboxItemMetadata, di as TooltipContent, dn as RadioGroup, dr as useMouseOnlyPointerSensor, dt as MessageReferenceText, ea as headEdgePull, ei as ListRowBody, en as MessageItemAvatarSlot, er as PopoverContent, et as MessageMultiSelect, f as InboxItemSelection, fi as TooltipPortal, fn as RadioGroupIndicator, fr as MobileNavItem, ft as MessageReferenceUnavailable, g as InboxItemTitle, gn as InputGroupInput, gr as DropdownMenuCheckboxItem, gt as MessageReactionCount, h as InboxItemTimestamp, hi as Badge, hn as InputGroupAddon, hr as DropdownMenu, ht as MessageReactionChip, i as InboxItemContent, ii as ListRowGroup, in as searchHit, ir as PopoverPortal, it as MessageReferenceChip, j as MessageQuotedPreview, ji as DialogSurface, jr as DropdownMenuShortcut, jt as MessageItemReadReceipt, k as MessageListNotice, ki as DialogPortal, kr as DropdownMenuRadioItemIndicator, kt as MessageItemBadge, l as InboxItemMarks, li as ListRowValue, ln as AvatarGroupCount, lt as MessageReferenceReadMark, m as InboxItemSubtitle, mi as TooltipTrigger, mn as InputGroup, mr as MobileNavRoot, mt as MessageReactionAddButton, n as InboxItemActions, na as decisionWidth, ni as ListRowChevron, nn as MessageItemGutter, nr as PopoverHeader, nt as MessageMultiSelectToolbar, o as InboxItemHeading, oi as ListRowMeta, on as AvatarBadge, or as PopoverTitle, ot as MessageReferenceIndicator, p as InboxItemSender, pi as TooltipProvider, pn as RadioGroupItem, pr as MobileNavLabel, pt as inlineChip, q as MessageEmbedContent, qi as useThemeScopeProps, qr as ScrollAreaScrollbar, qt as MessageItemAttachments, r as InboxItemBody, ri as ListRowDescription, rn as MessageItem, rr as PopoverPopup, rt as MessageMultiSelectToolbarActions, s as InboxItemHoverTarget, si as ListRowTitle, sn as AvatarFallback, sr as PopoverTrigger, st as MessageReferenceLabel, t as InboxItem, ta as headEdges, ti as ListRowBottom, tn as MessageItemContinuationTime, tr as PopoverDescription, tt as MessageMultiSelectCheckbox, u as InboxItemMessage, ui as Tooltip, un as AvatarImage, ur as useHoldThenMoveTouchSensor, ut as MessageReferenceSuffix, v as InboxItemTrigger, vi as useMobileViewport, vr as DropdownMenuContent, vt as MessageReactionGlyph, wi as DialogFooter, wn as PreviewCardArrow, wt as MessageReactionTooltipMeta, x as Skeleton, xi as DialogClose, xr as DropdownMenuItemCount, xt as MessageReactionQuickButton, yi as Dialog, yr as DropdownMenuFooter, yt as MessageReactionPickerContent, z as MessageQuotedPreviewContent, zi as DialogSheetReset, zr as PanelFooter, zt as MessageItemHeader } from "./inbox-item-Cgu0ERol.mjs";
+import { $ as MessageListDateDivider, $i as DialogContent, $n as PreviewCardContent, $r as DropdownMenuItemLabel, $t as MessageReactionTooltipNameText, Aa as controlIconInset, Ai as ListRow, An as MessageItem, Ar as PopoverPopup, At as MessageMultiSelectToolbarActions, B as useDragSiblingTransition, Bi as ListRowValue, Bn as RadioGroupItem, Bt as inlineChip, C as DropPlaceholder, Ca as withOverlayLayer, Ci as ScrollAreaCorner, Cn as MessageItemEdited, Cr as PopoverArrow, Ct as messageEmbed, Da as tv, Di as Checkbox, Dn as MessageItemAvatarSlot, Dr as PopoverContent, Dt as MessageMultiSelect, Ea as ThemeStateContext, Ei as ScrollAreaViewport, En as MessageItemSearchMatch, Er as PopoverClose, Et as MessageTextSelectionToolbarSeparator, Fi as ListRowGroup, Fn as AvatarGroup, Fr as PopoverViewport, Ft as MessageReferencePending, G as SILENT_DRAG_ANNOUNCEMENTS, Gi as TooltipTrigger, Gr as MobileNavRoot, Gt as MessageReactionGlyph, Hi as TooltipContent, Hn as InputGroupAddon, Ht as MessageReactionChip, I as DragLift, Ii as ListRowIcon, In as AvatarGroupCount, It as MessageReferenceReadMark, Jr as DropdownMenuCheckboxItemIndicator, Jt as MessageReactionQuickButton, K as createDragAnnouncements, Ki as Badge, Kr as DropdownMenu, Kt as MessageReactionPickerContent, Li as ListRowMeta, Ln as AvatarImage, Lt as MessageReferenceSuffix, Ma as headEdges, Mi as ListRowBottom, Mn as Avatar, Mr as PopoverSeparator, Na as decisionWidth, Ni as ListRowChevron, Nn as AvatarBadge, Nr as PopoverTitle, Nt as MessageReferenceIndicator, Oa as stackedActions, Oi as CheckboxIndicator, On as MessageItemContinuationTime, Or as PopoverDescription, Ot as MessageMultiSelectCheckbox, Pi as ListRowDescription, Pn as AvatarFallback, Pr as PopoverTrigger, Pt as MessageReferenceLabel, Qi as DialogClose, Qr as DropdownMenuItemCount, Qt as MessageReactionTooltipName, Ri as ListRowTitle, Rn as RadioGroup, Rt as MessageReferenceText, Sa as useParentOverlayKind, Si as ScrollAreaContent, Sn as MessageItemContent, St as MessageEmbedHeader, Ta as useTheme, Ti as ScrollAreaThumb, Tn as MessageItemFooter, Tt as MessageTextSelectionToolbarButton, U as drag, Ui as TooltipPortal, Un as InputGroupInput, Ur as MobileNavItem, Ut as MessageReactionCount, V as useLiftContainer, Vi as Tooltip, Vn as InputGroup, Vt as MessageReactionAddButton, Wi as TooltipProvider, Wn as useOverflowTitle, Wr as MobileNavLabel, Wt as MessageReactionErrorIndicator, Xi as Dialog, Xr as DropdownMenuFooter, Xt as MessageReactionTooltipContent, Yi as useMobileViewport, Yn as PreviewCard, Yr as DropdownMenuContent, Yt as MessageReactionQuickRow, Zi as DialogBody, Zn as PreviewCardArrow, Zr as DropdownMenuItem, Zt as MessageReactionTooltipMeta, _ as InboxItemTrailing, _a as Button, _i as PanelHeaderRoot, _n as MessageItemSenderButton, _t as MessageQuotedPreviewTimestamp, a as InboxItemContext, aa as DialogOverlay, ai as DropdownMenuRadioItem, an as MessageItemSavedIndicator, ar as PreviewCardPopup, at as MessageQuotedPreviewAttachment, b as useLatestRef, ba as defaultNativeButton, bi as PanelSection, bn as MessageItemAttachments, bt as MessageEmbedContent, c as InboxItemLeading, ca as DialogSurface, ci as DropdownMenuShortcut, cr as PreviewCardTitle, d as InboxItemMetadata, da as PanelAction, di as DropdownMenuTrigger, dt as MessageQuotedPreviewChannel, ea as DialogDescription, ei as DropdownMenuLabel, en as MessageReactionTooltipNames, er as PreviewCardDescription, et as MessageListEndFade, f as InboxItemSelection, fa as panelToggleAction, fi as Kbd, fn as MessageItemHeader, ft as MessageQuotedPreviewContent, g as InboxItemTitle, ga as DialogSheetReset, gi as PanelFooter, gn as MessageItemSenderBadges, gt as MessageQuotedPreviewThread, h as InboxItemTimestamp, ha as textLinkVariants, hi as PanelBody, hn as MessageItemSender, ht as MessageQuotedPreviewText, i as InboxItemContent, ia as DialogNav, ii as DropdownMenuRadioGroup, in as MessageItemReadReceipt, it as MessageQuotedPreview, ja as headEdgePull, ji as ListRowBody, jn as searchHit, jr as PopoverPortal, jt as MessageReferenceChip, k as useDragSensors, ka as useStackedActions, ki as PRESENCE_COLOR, kn as MessageItemGutter, kr as PopoverHeader, kt as MessageMultiSelectToolbar, l as InboxItemMarks, la as DialogTitle, li as DropdownMenuSubmenu, lr as PreviewCardTrigger, lt as MessageQuotedPreviewAuthorMeta, m as InboxItemSubtitle, ma as TextLinkExternalIcon, mi as Panel, mn as MessageItemMeta, mt as MessageQuotedPreviewLoading, n as InboxItemActions, ni as DropdownMenuPopup, nn as MessageItemBadge, nt as MessageListNotice, o as InboxItemHeading, oa as DialogPortal, oi as DropdownMenuRadioItemIndicator, on as MessageItemToolbar, or as PreviewCardPortal, ot as MessageQuotedPreviewAttachments, p as InboxItemSender, pa as TextLink, pi as KbdGroup, pn as MessageItemInlineStatus, pt as MessageQuotedPreviewHeader, q as dragInstructions, qr as DropdownMenuCheckboxItem, qt as MessageReactionPickerStatic, r as InboxItemBody, ra as DialogHeader, ri as DropdownMenuPortal, rn as MessageItemBadgeSeparator, rr as PreviewCardHeader, rt as MessageList, s as InboxItemHoverTarget, si as DropdownMenuSeparator, sn as MessageItemToolbarButton, sr as PreviewCardSeparator, st as MessageQuotedPreviewAuthor, t as InboxItem, ta as DialogFooter, tn as MessageReactionTooltipSeparator, tt as MessageListHistoryLimited, u as InboxItemMessage, ua as DialogTrigger, ui as DropdownMenuSubmenuTrigger, ut as MessageQuotedPreviewAuthorName, v as InboxItemTrigger, va as buttonVariants, vi as PanelScrollContent, vn as MessageItemSenderGroup, vt as MessageQuotedPreviewUnavailable, wa as useThemeScopeProps, wi as ScrollAreaScrollbar, wn as MessageItemEmbedded, wr as PopoverBackdrop, wt as MessageTextSelectionToolbar, x as Skeleton, xi as ScrollArea, xn as MessageItemBody, xr as Popover, xt as MessageEmbedFooter, ya as Spinner, yi as PanelScrollViewport, yn as MessageItemTime, yt as MessageEmbed, zi as ListRowTop, zn as RadioGroupIndicator, zt as MessageReferenceUnavailable } from "./inbox-item-DIUkRiT4.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, Copy, FileText, Image, Info, TriangleAlert, 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";
@@ -13,7 +13,7 @@ import { Collapsible } from "@base-ui/react/collapsible";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
-import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, KeyboardCode, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable } from "@dnd-kit/core";
 import { Input as Input$1 } from "@base-ui/react/input";
 import { Field as Field$1 } from "@base-ui/react/field";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
@@ -24,7 +24,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 { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Toast } from "@base-ui/react/toast";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
@@ -8533,10 +8533,8 @@ function ComposerAttachmentsScrollArea({ children, className, onMouseEnter, onMo
 }
 //#endregion
 //#region src/components/composer/sortable-composer-attachments.tsx
-const SORTABLE_TRANSITION = {
-	duration: 160,
-	easing: "cubic-bezier(0.25, 1, 0.5, 1)"
-};
+/** Whether the lifted attachment still stands at its own index. */
+const SortableAttachmentsHomeContext = createContext(true);
 /**
 * Mixed-width flex-wrap cannot be predicted by rectSortingStrategy. Preview
 * position by live DOM reorder on dragOver instead; strategy returns null so
@@ -8544,18 +8542,6 @@ const SORTABLE_TRANSITION = {
 * @see https://github.com/clauderic/dnd-kit/issues/44
 */
 const liveReorderStrategy = () => null;
-const restrictToHorizontalAxis = ({ transform }) => ({
-	...transform,
-	y: 0
-});
-const HORIZONTAL_MODIFIERS = [restrictToHorizontalAxis];
-const HORIZONTAL_AUTO_SCROLL = {
-	threshold: {
-		x: .15,
-		y: 0
-	},
-	canScroll: (element) => element.scrollWidth > element.clientWidth + 1
-};
 /**
 * Prefer pointer hits; if the active droppable is still under the pointer /
 * closest center, keep it so layout reflow alone cannot claim a neighbor.
@@ -8592,7 +8578,30 @@ function attachmentsById(children) {
 	});
 	return byId;
 }
-function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, strategy }) {
+function setOrder(positions, ids) {
+	positions.clear();
+	ids.forEach((id, index) => positions.set(id, index));
+}
+/**
+* An attachment is said by its `label`, at its position. Over another
+* attachment the dragged one already stands where it would drop (live
+* reorder); with nothing under the hand it is home.
+*/
+function attachmentAnnouncementSource({ labels, home, draft }) {
+	return {
+		name: (id) => labels.get(String(id)) ?? "",
+		place: (id, overId) => {
+			const positions = overId == null ? home : draft;
+			const index = positions.get(String(id));
+			return index == null ? null : {
+				place: "",
+				position: index + 1,
+				count: positions.size
+			};
+		}
+	};
+}
+function SortableComposerAttachmentsRoot({ items, onReorder, children, messages, container, axis, strategy }) {
 	const dndContextId = useId();
 	const listRef = useRef(null);
 	const [activeId, setActiveId] = useState(null);
@@ -8601,11 +8610,31 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
 	const [listMinHeight, setListMinHeight] = useState();
 	const draftIdsRef = useRef([]);
 	const lastReorderPointerRef = useRef(null);
-	const sensors = useSensors(useMouseOnlyPointerSensor(6), useHoldThenMoveTouchSensor(), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const sensors = useDragSensors();
+	const liftContainer = useLiftContainer(container);
 	const attachments = useMemo(() => attachmentsById(children), [children]);
 	const itemIds = useMemo(() => items.map(String), [items]);
+	const [announced] = useState(() => ({
+		labels: /* @__PURE__ */ new Map(),
+		home: /* @__PURE__ */ new Map(),
+		draft: /* @__PURE__ */ new Map()
+	}));
+	useLayoutEffect(() => {
+		announced.labels.clear();
+		for (const [id, child] of attachments) if (child.props.label != null) announced.labels.set(id, child.props.label);
+		setOrder(announced.home, itemIds);
+	}, [
+		announced,
+		attachments,
+		itemIds
+	]);
+	const accessibility = useMemo(() => ({
+		screenReaderInstructions: dragInstructions(messages),
+		announcements: createDragAnnouncements(attachmentAnnouncementSource(announced), messages)
+	}), [announced, messages]);
 	const horizontal = axis === "x";
 	const displayIds = activeId !== null ? draftIds : itemIds;
+	const home = activeId === null || draftIds.indexOf(activeId) === itemIds.indexOf(activeId);
 	const orderedChildren = useMemo(() => displayIds.flatMap((id) => {
 		const child = attachments.get(id);
 		return child ? [child] : [];
@@ -8616,11 +8645,13 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
 		lastReorderPointerRef.current = null;
 		const nextDraft = [...itemIds];
 		draftIdsRef.current = nextDraft;
+		setOrder(announced.draft, nextDraft);
 		setDraftIds(nextDraft);
 		if (!horizontal && listRef.current) setListMinHeight(listRef.current.getBoundingClientRect().height);
 		setActiveId(id);
 		setOverlay(attachments.get(id)?.props.children ?? null);
 	}, [
+		announced,
 		attachments,
 		horizontal,
 		itemIds
@@ -8636,8 +8667,9 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
 		if (pointer && lastReorderPointerRef.current && samePointer(pointer, lastReorderPointerRef.current)) return;
 		if (pointer) lastReorderPointerRef.current = pointer;
 		draftIdsRef.current = next;
+		setOrder(announced.draft, next);
 		setDraftIds(next);
-	}, []);
+	}, [announced]);
 	const clearDrag = useCallback(() => {
 		lastReorderPointerRef.current = null;
 		draftIdsRef.current = [];
@@ -8653,13 +8685,12 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
 		onReorder(draftIdsRef.current);
 		clearDrag();
 	}, [clearDrag, onReorder]);
-	const modifiers = horizontal ? HORIZONTAL_MODIFIERS : void 0;
 	return /* @__PURE__ */ jsxs(DndContext, {
 		id: dndContextId,
+		accessibility,
 		sensors,
 		collisionDetection: sortableCollisionDetection,
-		modifiers,
-		autoScroll: horizontal ? HORIZONTAL_AUTO_SCROLL : false,
+		autoScroll: false,
 		onDragStart: handleDragStart,
 		onDragOver: handleDragOver,
 		onDragCancel: handleDragCancel,
@@ -8672,15 +8703,15 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
 			children: /* @__PURE__ */ jsx(SortableContext, {
 				items: displayIds,
 				strategy,
-				children: orderedChildren
+				children: /* @__PURE__ */ jsx(SortableAttachmentsHomeContext, {
+					value: home,
+					children: orderedChildren
+				})
 			})
-		}), /* @__PURE__ */ jsx(DragOverlay, {
-			dropAnimation: null,
-			modifiers,
-			children: activeId && overlay ? /* @__PURE__ */ jsx("div", {
-				className: "w-max max-w-full shrink-0 cursor-grabbing",
-				children: overlay
-			}) : null
+		}), /* @__PURE__ */ jsx(DragLift, {
+			className: "rounded-control",
+			container: liftContainer,
+			children: activeId && overlay ? overlay : null
 		})]
 	});
 }
@@ -8701,34 +8732,39 @@ function SortableComposerAttachmentsScroll(props) {
 	}) });
 }
 /**
-* Sized placeholder stays in the flex flow (opacity 0). DragOverlay is the
-* pointer ghost — the root reads these `children` for it. Live draft reorder
-* moves this slot to the drop index; wrap skips strategy transforms so siblings
-* FLIP via layout instead of wrong gaps.
+* The lifted attachment's own slot stays in the flex flow: at 40% while it is
+* still home, the dashed place once it stands anywhere else. DragLift holds
+* the copy that follows the hand; the root reads these `children` for it.
+* Live draft reorder moves this slot to the drop index; wrap skips strategy
+* transforms so siblings FLIP via layout instead of wrong gaps.
 */
 function SortableComposerAttachment({ id, label, children }) {
+	const home = use(SortableAttachmentsHomeContext);
+	const siblingTransition = useDragSiblingTransition();
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
 		id,
 		animateLayoutChanges: defaultAnimateLayoutChanges,
-		transition: SORTABLE_TRANSITION
+		transition: siblingTransition
 	});
 	const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
 	const style = {
 		transform: isDragging ? void 0 : CSS.Translate.toString(transform),
 		transition: isDragging ? void 0 : transition,
-		opacity: isDragging ? 0 : void 0,
 		zIndex: isDragging ? 0 : void 0
 	};
-	return /* @__PURE__ */ jsx("div", {
+	const place = isDragging && !home;
+	return /* @__PURE__ */ jsxs("div", {
 		ref: setNodeRef,
 		"aria-label": `Reorder ${label}`,
-		className: "w-max max-w-full shrink-0 cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing",
+		className: "relative w-max max-w-full shrink-0 cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing data-drop-place:[&>:not([data-slot=drop-placeholder])]:invisible",
 		"data-dragging": isDragging ? "true" : void 0,
+		"data-drag-origin": isDragging && home ? "" : void 0,
+		"data-drop-place": place ? "" : void 0,
 		"data-slot": "sortable-composer-attachment",
 		style,
 		...sortableAttributes,
 		...listeners,
-		children
+		children: [children, place ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0" }) : null]
 	});
 }
 //#endregion
@@ -10615,16 +10651,80 @@ function TabsList({ className, children, variant = "default", ref, ...props }) {
 		})
 	});
 }
-function SortableTabsList({ value, onReorder, onDragStart, children, variant = "default", ...props }) {
+/** What people call a tab: its `aria-label`, or its text. */
+function tabName(node) {
+	if (!node) return "";
+	return (node.getAttribute("aria-label") ?? node.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+/** What people call the row a tab is in: the tab list's accessible name, or nothing. */
+function tabListName(node) {
+	const list = node?.closest("[role=tablist]");
+	if (!list) return "";
+	const label = list.getAttribute("aria-label");
+	if (label) return label.trim();
+	return (list.getAttribute("aria-labelledby")?.split(/\s+/).filter(Boolean) ?? []).map((id) => list.ownerDocument.getElementById(id)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
+}
+/**
+* A tab is said by its name, at its position in the row: a drop on a tab
+* takes its place, and with nothing under the hand the tab is home. Read
+* when dnd-kit announces, never while rendering.
+*/
+function tabAnnouncementSource(positions, nodes) {
+	return {
+		name: (id) => tabName(nodes.get(String(id))),
+		place: (id, overId) => {
+			const index = positions.get(String(overId ?? id));
+			if (index == null) return null;
+			return {
+				place: tabListName(nodes.get(String(id))),
+				position: index + 1,
+				count: positions.size
+			};
+		}
+	};
+}
+function SortableTabsList({ value, onReorder, onDragStart, messages, container, children, variant = "default", ...props }) {
 	const [activeId, setActiveId] = useState(void 0);
 	const placement = use(TabsPlacementContext);
 	const dndContextId = useId();
-	const sensors = useSensors(useMouseOnlyPointerSensor(6), useHoldThenMoveTouchSensor());
+	const sensors = useDragSensors();
+	const [copies] = useState(() => /* @__PURE__ */ new Map());
+	const [nodes] = useState(() => /* @__PURE__ */ new Map());
+	const liftContainer = useLiftContainer(container);
+	const selectedValue = use(TabsValueContext);
+	const { tab: tabClassName, content: contentClassName } = tabs({
+		variant,
+		placement
+	});
 	const tabIds = useMemo(() => value.map(String), [value]);
+	const [positions] = useState(() => /* @__PURE__ */ new Map());
+	useLayoutEffect(() => {
+		positions.clear();
+		tabIds.forEach((id, index) => positions.set(id, index));
+	}, [positions, tabIds]);
+	const accessibility = useMemo(() => ({
+		screenReaderInstructions: dragInstructions(messages),
+		announcements: createDragAnnouncements(tabAnnouncementSource(positions, nodes), messages)
+	}), [
+		messages,
+		nodes,
+		positions
+	]);
 	const reorderContext = useMemo(() => ({
 		enabled: true,
-		activeId
-	}), [activeId]);
+		activeId,
+		copies,
+		nodes
+	}), [
+		activeId,
+		copies,
+		nodes
+	]);
+	const { onKeyDown: onListKeyDown, ...listProps } = props;
+	const handleListKeyDown = useCallback((event) => {
+		onListKeyDown?.(event);
+		if (activeId !== void 0) event.preventBaseUIHandler?.();
+	}, [activeId, onListKeyDown]);
 	const handleDragStart = useCallback(({ active }) => {
 		setActiveId(String(active.id));
 		onDragStart?.(String(active.id));
@@ -10644,27 +10744,42 @@ function SortableTabsList({ value, onReorder, onDragStart, children, variant = "
 		tabIds,
 		value
 	]);
-	return /* @__PURE__ */ jsx(DndContext, {
+	return /* @__PURE__ */ jsxs(DndContext, {
 		id: dndContextId,
+		accessibility,
 		autoScroll: false,
 		sensors,
 		collisionDetection: closestCenter,
 		onDragStart: handleDragStart,
 		onDragCancel: handleDragCancel,
 		onDragEnd: handleDragEnd,
-		children: /* @__PURE__ */ jsx(SortableContext, {
+		children: [/* @__PURE__ */ jsx(SortableContext, {
 			items: tabIds,
 			strategy: placement === "left" || placement === "right" ? verticalListSortingStrategy : horizontalListSortingStrategy,
 			children: /* @__PURE__ */ jsx(TabsReorderContext.Provider, {
 				value: reorderContext,
 				children: /* @__PURE__ */ jsx(TabsList, {
 					variant,
-					...props,
+					...listProps,
+					onKeyDown: handleListKeyDown,
 					"data-sorting": activeId ? "true" : void 0,
 					children
 				})
 			})
-		})
+		}), /* @__PURE__ */ jsx(DragLift, {
+			className: "rounded-control",
+			container: liftContainer,
+			children: activeId === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "tabs-tab",
+				"data-active": selectedValue === activeId ? "" : void 0,
+				className: tabClassName({ className: "pointer-events-none size-full" }),
+				children: /* @__PURE__ */ jsx("span", {
+					"data-slot": "tabs-tab-content",
+					className: contentClassName(),
+					children: copies.get(activeId)
+				})
+			})
+		})]
 	});
 }
 function TabsTab({ value, ...props }) {
@@ -10677,11 +10792,39 @@ function SortableTabsTab({ value, ...props }) {
 	const reorder = use(TabsReorderContext);
 	const activeValue = use(TabsValueContext);
 	const placement = use(TabsPlacementContext);
-	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+	const siblingTransition = useDragSiblingTransition();
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging, index, overIndex } = useSortable({
 		id: value,
-		disabled: !reorder.enabled
+		disabled: !reorder.enabled,
+		transition: siblingTransition
 	});
 	const isDraggingActive = isDragging && activeValue === String(value);
+	const home = overIndex < 0 || overIndex === index;
+	const copies = reorder.copies;
+	const key = String(value);
+	const { children } = props;
+	useLayoutEffect(() => {
+		if (!copies) return;
+		copies.set(key, children);
+		return () => {
+			copies.delete(key);
+		};
+	}, [
+		copies,
+		key,
+		children
+	]);
+	const nodes = reorder.nodes;
+	const sortableRef = useCallback((node) => {
+		setNodeRef(node);
+		if (!nodes) return;
+		if (node) nodes.set(key, node);
+		else nodes.delete(key);
+	}, [
+		setNodeRef,
+		nodes,
+		key
+	]);
 	const baseStyle = typeof props.style === "function" ? void 0 : props.style;
 	const vertical = placement === "left" || placement === "right";
 	const translate = vertical ? transform?.y : transform?.x;
@@ -10690,13 +10833,26 @@ function SortableTabsTab({ value, ...props }) {
 		transform: translate === void 0 ? void 0 : vertical ? `translate3d(0, ${translate}px, 0)` : `translate3d(${translate}px, 0, 0)`,
 		transition,
 		zIndex: isDragging ? 20 : baseStyle?.zIndex,
-		cursor: isDragging ? "grabbing" : "pointer"
+		cursor: isDragging ? "grabbing" : "pointer",
+		...isDragging && !home ? PLACE_STYLE : null
 	}), [
 		baseStyle,
 		vertical,
 		translate,
 		transition,
-		isDragging
+		isDragging,
+		home
+	]);
+	const { onKeyDown: onTabKeyDown } = props;
+	const { onKeyDown: onSortableKeyDown, ...sortableListeners } = listeners ?? {};
+	const handleKeyDown = useCallback((event) => {
+		onTabKeyDown?.(event);
+		if (reorder.activeId !== void 0) event.preventBaseUIHandler?.();
+		onSortableKeyDown?.(event);
+	}, [
+		onTabKeyDown,
+		onSortableKeyDown,
+		reorder.activeId
 	]);
 	if (!reorder.enabled) return /* @__PURE__ */ jsx(TabsTabButton, {
 		value,
@@ -10705,34 +10861,43 @@ function SortableTabsTab({ value, ...props }) {
 	const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
 	return /* @__PURE__ */ jsx(TabsTabButton, {
 		value,
-		sortableRef: setNodeRef,
+		sortableRef,
 		...props,
 		"data-dragging-active": isDraggingActive ? "true" : void 0,
 		"data-dragging-source": isDragging ? "true" : void 0,
+		"data-drag-origin": isDragging && home ? "" : void 0,
 		"data-reorderable": "true",
 		style,
 		...sortableAttributes,
-		...listeners
+		...sortableListeners,
+		onKeyDown: handleKeyDown,
+		dropPlace: isDragging && !home
 	});
 }
-function TabsTabButton({ value, sortableRef, className, children, ...props }) {
+/** The lifted tab's slot away from home: none of the tab's own look, under the dashed place. */
+const PLACE_STYLE = {
+	backgroundColor: "transparent",
+	borderColor: "transparent",
+	boxShadow: "none"
+};
+function TabsTabButton({ value, sortableRef, dropPlace = false, className, children, ...props }) {
 	const variant = use(TabsListVariantContext);
 	const placement = use(TabsPlacementContext);
 	const { content, tab } = tabs({
 		variant,
 		placement
 	});
-	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+	return /* @__PURE__ */ jsxs(Tabs$1.Tab, {
 		ref: sortableRef,
 		value,
 		"data-slot": "tabs-tab",
 		className: tab({ className }),
 		...props,
-		children: /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "tabs-tab-content",
-			className: content(),
+			className: content({ className: dropPlace ? "invisible" : void 0 }),
 			children
-		})
+		}), dropPlace ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0 z-10 rounded-control" }) : null]
 	});
 }
 function TabsLabel({ className, ...props }) {
@@ -11293,7 +11458,8 @@ const panelNotice = tv({
 			"flex shrink-0 items-start",
 			"min-h-10 gap-2.5 border-b border-line-seam px-5 py-2.5 max-md:px-4",
 			"font-sans text-callout font-semibold text-foreground",
-			"[&>svg]:lead-icon"
+			"[&>svg]:lead-icon",
+			"*:data-[slot=spinner]:lead-icon *:data-[slot=spinner]:w-4 *:data-[slot=spinner]:leading-[inherit]"
 		],
 		content: ["min-w-0 flex-1"],
 		actions: ["flex shrink-0 items-center", "-my-1.5 gap-3"]
@@ -12025,7 +12191,7 @@ const taskCard = tv({ slots: {
 		"rounded-container border border-line-hairline bg-layer-card p-3 text-foreground shadow-none",
 		"data-[interactive=true]:hover:overlay-subtle data-[interactive=true]:active:overlay-medium",
 		"data-[disabled=true]:bg-fill-muted data-[disabled=true]:opacity-100",
-		"group-data-[dragging=true]/task-draggable:shadow-float"
+		"group-data-[dragging=true]/task-draggable:not-in-data-drag-origin:shadow-float"
 	],
 	row: ["flex min-w-0 items-start gap-2"],
 	body: ["min-w-0 flex-1"],
@@ -12192,15 +12358,10 @@ const taskDnd = tv({ slots: {
 		"rounded-container",
 		"focus-visible:shadow-focus"
 	],
-	overlay: [
-		"group/task-drag-overlay pointer-events-none",
-		"z-20",
-		"**:data-[slot=task-card]:shadow-float"
-	],
+	overlay: ["group/task-drag-overlay pointer-events-none", "size-full rounded-[inherit]"],
 	placeholder: [
 		"hidden w-full shrink-0",
 		"h-(--task-dnd-placeholder-height,72px) rounded-container",
-		"border-[1.5px] border-dashed border-line-strong bg-transparent",
 		"data-[drop-state=allowed]:block"
 	]
 } });
@@ -12216,29 +12377,47 @@ const EMPTY_OVER_STORE = createTaskDndOverStore();
 const TaskDndOverContext = createContext(null);
 const allowTaskDrop = () => true;
 const NO_SENSORS = [];
-function TaskDndProvider({ children, accessibility, disabled = false, isDropAllowed = allowTaskDrop, onMove, onMoveError, onDragStart, onDragMove, onDragOver, onDragCancel, onDragEnd }) {
+function TaskDndProvider({ children, describe, messages, accessibility, disabled = false, isDropAllowed = allowTaskDrop, onMove, onMoveError, onDragStart, onDragMove, onDragOver, onDragCancel, onDragEnd }) {
 	const id = useId();
 	const [activeId, setActiveId] = useState(null);
+	const [activeDropId, setActiveDropId] = useState(null);
 	const [activeHeight, setActiveHeight] = useState(null);
+	const [overlay, setOverlay] = useState(false);
 	const [overStore] = useState(createTaskDndOverStore);
-	const sensors = useSensors(useMouseOnlyPointerSensor(5), useHoldThenMoveTouchSensor(), useSensor(KeyboardSensor, { coordinateGetter: taskKeyboardCoordinates }));
+	const sensors = useDragSensors({ coordinateGetter: taskKeyboardCoordinates });
+	const resolvedAccessibility = useMemo(() => ({
+		screenReaderInstructions: dragInstructions(messages),
+		announcements: describe ? createDragAnnouncements(describe, messages) : SILENT_DRAG_ANNOUNCEMENTS,
+		...accessibility
+	}), [
+		accessibility,
+		describe,
+		messages
+	]);
 	const context = useMemo(() => ({
 		activeId,
+		activeDropId,
 		activeHeight,
-		isDropAllowed
+		isDropAllowed,
+		overlay,
+		setOverlay
 	}), [
+		activeDropId,
 		activeHeight,
 		activeId,
-		isDropAllowed
+		isDropAllowed,
+		overlay
 	]);
 	const reset = useCallback(() => {
 		setActiveId(null);
+		setActiveDropId(null);
 		setActiveHeight(null);
 		overStore.update(EMPTY_OVER_SNAPSHOT);
 	}, [overStore]);
 	const handleDragStart = useCallback((event) => {
 		overStore.update(EMPTY_OVER_SNAPSHOT);
 		setActiveId(event.active.id);
+		setActiveDropId(getOwnDropId(event.active.data.current));
 		setActiveHeight(event.active.rect.current.initial?.height ?? null);
 		onDragStart?.(event);
 	}, [overStore, onDragStart]);
@@ -12266,7 +12445,8 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
 		const nextActiveId = event.active.id;
 		const nextOverId = event.over?.id;
 		const nextOverData = event.over?.data.current;
-		if (nextOverId != null && isDropAllowed(nextActiveId, nextOverId, nextOverData)) {
+		const ownDropId = getOwnDropId(event.active.data.current);
+		if (nextOverId != null && nextOverId !== ownDropId && isDropAllowed(nextActiveId, nextOverId, nextOverData)) {
 			const details = {
 				activeId: nextActiveId,
 				overId: nextOverId,
@@ -12288,7 +12468,8 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
 	]);
 	return /* @__PURE__ */ jsx(DndContext, {
 		id,
-		accessibility,
+		accessibility: resolvedAccessibility,
+		autoScroll: !overlay,
 		sensors: disabled ? NO_SENSORS : sensors,
 		onDragStart: handleDragStart,
 		onDragMove: handleDragMove,
@@ -12306,17 +12487,21 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
 }
 function TaskDraggable({ id, disabled = false, dropId, dropData, dropDisabled = false, className, ref: consumerRef, style, ...props }) {
 	const { draggable } = taskDnd();
+	const context = use(TaskDndContext);
+	const ownDrop = useMemo(() => dropId == null ? void 0 : { [OWN_DROP_ID]: dropId }, [dropId]);
 	const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
 		id,
-		disabled
+		disabled,
+		data: ownDrop
 	});
+	const lifted = isDragging && context?.overlay === true;
 	const { setNodeRef: setDropNodeRef, isOver: isDropOver } = useDroppable({
 		id: dropId ?? id,
 		data: dropData,
 		disabled: dropId == null || dropDisabled
 	});
 	const dragStyle = {
-		transform: CSS.Translate.toString(transform),
+		transform: lifted ? void 0 : CSS.Translate.toString(transform),
 		...style
 	};
 	const mergedRef = useCallback((node) => {
@@ -12334,6 +12519,7 @@ function TaskDraggable({ id, disabled = false, dropId, dropData, dropDisabled =
 		ref: mergedRef,
 		"data-slot": "task-draggable",
 		"data-dragging": isDragging ? "true" : void 0,
+		"data-drag-origin": lifted ? "" : void 0,
 		"data-drop-over": isDropOver ? "true" : void 0,
 		"data-disabled": disabled ? "true" : void 0,
 		className: draggable({ className }),
@@ -12368,6 +12554,7 @@ function TaskDropPlaceholder({ id, placement, className, render, style, ...props
 	const context = use(TaskDndContext);
 	const overStore = use(TaskDndOverContext) ?? EMPTY_OVER_STORE;
 	const { placeholder } = taskDnd();
+	const { placeholder: dropPlaceholder } = drag();
 	const dropState = useSyncExternalStore(overStore.subscribe, () => getPlaceholderDropState(context, overStore.getSnapshot(), id, placement), () => "idle");
 	const placeholderStyle = {
 		...style,
@@ -12381,16 +12568,29 @@ function TaskDropPlaceholder({ id, placement, className, render, style, ...props
 			"aria-hidden": true,
 			"data-slot": "task-drop-placeholder",
 			"data-drop-state": dropState,
-			className: placeholder({ className }),
+			className: dropPlaceholder({ className: placeholder({ className }) }),
 			style: placeholderStyle,
 			...props
 		}
 	});
 }
-function TaskDragOverlay({ children, className }) {
+/**
+* The copy of the dragged card that follows the hand: a `DragLift` with the
+* card's radius. On a drop it glides into the card's new place, and on a
+* cancel back home. While it is rendered, the dragged card stays in its place
+* at 40% instead of moving.
+*/
+function TaskDragOverlay({ children, className, container }) {
 	const { overlay } = taskDnd();
-	return /* @__PURE__ */ jsx(DragOverlay, {
-		dropAnimation: null,
+	const setOverlay = use(TaskDndContext)?.setOverlay;
+	useEffect(() => {
+		if (!setOverlay) return;
+		setOverlay(true);
+		return () => setOverlay(false);
+	}, [setOverlay]);
+	return /* @__PURE__ */ jsx(DragLift, {
+		className: "rounded-container",
+		container,
 		children: children == null ? null : /* @__PURE__ */ jsx("div", {
 			"data-slot": "task-drag-overlay",
 			"data-dragging": "true",
@@ -12399,6 +12599,11 @@ function TaskDragOverlay({ children, className }) {
 		})
 	});
 }
+const OWN_DROP_ID = "taskDndDropId";
+function getOwnDropId(data) {
+	const value = data?.[OWN_DROP_ID];
+	return typeof value === "string" || typeof value === "number" ? value : null;
+}
 /**
 * dnd-kit's `sortableKeyboardCoordinates` only moves when the dragged item is
 * itself a registered droppable under its own id (as with `useSortable`). Task
@@ -12469,6 +12674,7 @@ function getDropState(context, id, isOver, overData) {
 	return context?.isDropAllowed(activeId, id, overData) ? "allowed" : "blocked";
 }
 function getPlaceholderDropState(context, over, id, placement) {
+	if (context?.activeDropId != null && context.activeDropId === id) return "idle";
 	return getDropState(context, id, over.overId === id && (placement == null || over.overPlacement === placement), over.overData);
 }
 function createTaskDndOverStore() {