@botiverse/raft-ui 0.35.1 → 0.36.0

package/dist/wip.mjs

@@ -1,4 +1,5 @@
-import { $r as ListRow, Ai as DialogSheetBack, Bi as Button$1, Bn as MobileNavServerPopoverDestination, C as MessageListJumpPill, Cn as PreviewCardActions, F as MessageQuotedPreviewAuthorDelegatedBy, Ft as MessageItemDelegatedAvatar, Gi as useParentOverlayKind, Gn as MobileNavServerPopoverRowBody, Hi as Spinner, Hn as MobileNavServerPopoverGroup, Ii as TextLink, It as MessageItemDelegatedBy, Ji as useTheme, Kn as MobileNavServerPopoverRowDescription, Ln as MobileNavServerItem, Lt as MessageItemDelegatedByButton, Mi as DialogTitle, Ni as DialogTrigger, On as PreviewCardEyebrow, Qn as PopoverBody, Rn as MobileNavServerPopover, Rt as MessageItemDelegatedByName, S as MessageListJumpControls, Si as DialogContent, T as MessageListJumpPillGroup, Ti as DialogFooterNote, Tn as PreviewCardBody, Ui as defaultNativeButton, Un as MobileNavServerPopoverList, Vn as MobileNavServerPopoverDestinations, Wi as OverlayLayerProvider, Wn as MobileNavServerPopoverRow, Xi as tv, Xr as Checkbox, Yn as PopoverActions, _ as InboxItemTrailing, _i as DialogSheetContent, _n as useOverflowTitle, a as InboxItemContext, at as MessageReferenceIcon, b as useLatestRef, bn as observeTruncation, c as InboxItemLeading, ci as ListRowTop, di as TooltipContent, dn as RadioGroup, ei as ListRowBody, g as InboxItemTitle, gi as DialogCommit, gn as InputGroupInput, h as InboxItemTimestamp, hn as InputGroupAddon, i as InboxItemContent, jn as PreviewCardMeta, kn as PreviewCardFooter, lr as TOUCH_DRAG_HOLD_MS, lt as MessageReferenceReadMark, mi as TooltipTrigger, mn as InputGroup, o as InboxItemHeading, oi as ListRowMeta, pn as RadioGroupItem, qi as useThemeScopeProps, qn as MobileNavServerPopoverRowLabel, r as InboxItemBody, ri as ListRowDescription, si as ListRowTitle, t as InboxItem, ti as ListRowBottom, ui as Tooltip, ur as useHoldThenMoveTouchSensor, vn as measureContent, w as MessageListJumpPillDismiss, wr as DropdownMenuLinkItem, x as Skeleton, xi as DialogClose, xn as readNow, y as inboxItem, yi as Dialog, yn as measureElement, zn as MobileNavServerPopoverContent } from "./inbox-item-Cgu0ERol.mjs";
+import { cn } from "./cn.mjs";
+import { $i as DialogContent, A as DRAG_AUTO_SCROLL_ZONE_PX, Ai as ListRow, B as useDragSiblingTransition, Bn as RadioGroupItem, Br as TOUCH_DRAG_TOLERANCE_PX, C as DropPlaceholder, D as listKeyboardCoordinates, Da as tv, Di as Checkbox, E as MOUSE_DRAG_DISTANCE_PX, F as DROP_GLIDE, G as SILENT_DRAG_ANNOUNCEMENTS, Gi as TooltipTrigger, Gn as measureContent, H as LIFT_CLASS, Hi as TooltipContent, Hn as InputGroupAddon, Hr as useMouseOnlyPointerSensor, I as DragLift, Ir as HoldThenMoveTouchSensor, It as MessageReferenceReadMark, J as dragMessages, Ji as DialogSheetContent, Jn as readNow, K as createDragAnnouncements, Kn as measureElement, L as ORIGIN_OPACITY, Li as ListRowMeta, Lr as MouseOnlyPointerSensor, M as DRAG_LIFT_Z_INDEX, Mi as ListRowBottom, Mt as MessageReferenceIcon, N as DRAG_SETTLE, O as useDragAcrossLists, P as DRAG_SIBLING_TRANSITION, Pi as ListRowDescription, Q as MessageListJumpPillGroup, Qi as DialogClose, Qn as PreviewCardBody, R as cancelDrag, Ri as ListRowTitle, Rn as RadioGroup, Rr as TOUCH_DRAG_DISTANCE_PX, S as DragRefusalHint, Sa as useParentOverlayKind, Sr as PopoverActions, T as DragRemeasure, Ta as useTheme, Tr as PopoverBody, Un as InputGroupInput, Vi as Tooltip, Vn as InputGroup, Vr as useHoldThenMoveTouchSensor, W as DEFAULT_DRAG_MESSAGES, Wn as useOverflowTitle, X as MessageListJumpPill, Xi as Dialog, Xn as PreviewCardActions, Y as MessageListJumpControls, Z as MessageListJumpPillDismiss, _ as InboxItemTrailing, _a as Button$1, _r as MobileNavServerPopoverRow, a as InboxItemContext, b as useLatestRef, ba as defaultNativeButton, br as MobileNavServerPopoverRowLabel, c as InboxItemLeading, cn as MessageItemDelegatedAvatar, ct as MessageQuotedPreviewAuthorDelegatedBy, dn as MessageItemDelegatedByName, dr as MobileNavServerPopover, fr as MobileNavServerPopoverContent, g as InboxItemTitle, gr as MobileNavServerPopoverList, h as InboxItemTimestamp, hr as MobileNavServerPopoverGroup, i as InboxItemContent, ir as PreviewCardMeta, j as DRAG_KEYBOARD_OFFSET_PX, ji as ListRowBody, k as useDragSensors, la as DialogTitle, ln as MessageItemDelegatedBy, mr as MobileNavServerPopoverDestinations, na as DialogFooterNote, nr as PreviewCardFooter, o as InboxItemHeading, pa as TextLink, pr as MobileNavServerPopoverDestination, q as dragInstructions, qi as DialogCommit, qn as observeTruncation, r as InboxItemBody, sa as DialogSheetBack, t as InboxItem, ti as DropdownMenuLinkItem, tr as PreviewCardEyebrow, ua as DialogTrigger, un as MessageItemDelegatedByButton, ur as MobileNavServerItem, vr as MobileNavServerPopoverRowBody, w as DRAG_KEYBOARD_CODES, wa as useThemeScopeProps, x as Skeleton, xa as OverlayLayerProvider, y as inboxItem, ya as Spinner, yr as MobileNavServerPopoverRowDescription, z as keepGrabInside, zi as ListRowTop, zr as TOUCH_DRAG_HOLD_MS } from "./inbox-item-DIUkRiT4.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, Search, X } from "lucide-react";
 import { createContext, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -6,6 +7,7 @@ import { Button } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { Combobox } from "@base-ui/react/combobox";
+import { arrayMove, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { Meter as Meter$1 } from "@base-ui/react/meter";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 //#region src/lib/phone-media.ts
@@ -1125,6 +1127,255 @@ function useCommentMarginFits(element, { minWidth = 784 } = {}) {
 	return desktop && element !== null && width >= minWidth;
 }
 //#endregion
+//#region src/components/drag/drag-lists.tsx
+/** dnd-kit's vertical strategy, except that nothing moves while the hand is outside the list. */
+const dragListStrategy = (args) => args.overIndex < 0 ? null : verticalListSortingStrategy(args);
+/**
+* Items in one or more lists that can be reordered and moved between lists
+* (a sidebar's sections, a board's columns): the lists half of the drag
+* model (design/patterns/drag-and-drop.md#where-it-will-land). While dragging,
+* the item stands at its landing spot (its own slot is the place; siblings
+* slide apart), a list can refuse it, and every step is announced by name.
+* The keyboard is measured from the item's real place, so the arrows never
+* skip one after a move into another list.
+*
+* Spread `handlers`, `collisionDetection` and `accessibility` on the
+* `DndContext`, pass `coordinateGetter` to `useDragSensors`, and render
+* `DragRemeasure version={items}` inside it.
+*/
+function useDragLists({ lists, items, onItemsChange, listName, itemName, refuse, collisionDetection, announce, messages }) {
+	const say = useMemo(() => dragMessages(messages), [messages]);
+	const across = useDragAcrossLists(collisionDetection);
+	const itemsRef = useRef(items);
+	useLayoutEffect(() => {
+		itemsRef.current = items;
+	}, [items]);
+	const [activeId, setActiveId] = useState(null);
+	const [originList, setOriginList] = useState(null);
+	const [refusal, setRefusalState] = useState(null);
+	const refusalRef = useRef(refusal);
+	const setRefusal = (next) => {
+		refusalRef.current = next;
+		setRefusalState(next);
+	};
+	const origin = useRef(null);
+	const inserted = useRef(null);
+	const listOf = useCallback((state, id) => lists.includes(id) ? id : lists.find((list) => state[list].includes(String(id))) ?? null, [lists]);
+	const isList = (id) => lists.includes(id);
+	const where = (state, id) => {
+		const list = listOf(state, id);
+		return {
+			place: listName(list),
+			position: state[list].indexOf(id) + 1,
+			count: state[list].length
+		};
+	};
+	const update = (next) => {
+		itemsRef.current = next;
+		onItemsChange(next);
+	};
+	/** Still home: in its own list, at its own index (pass the sortable's projected index). */
+	const isHome = useCallback((id, index) => {
+		const start = origin.current;
+		return start != null && listOf(itemsRef.current, id) === start.list && index === start.index;
+	}, [listOf]);
+	const onDragStart = ({ active, activatorEvent }) => {
+		const id = String(active.id);
+		const list = listOf(items, id);
+		if (!list) return;
+		origin.current = {
+			list,
+			index: items[list].indexOf(id),
+			snapshot: items,
+			keyboard: typeof KeyboardEvent !== "undefined" && activatorEvent instanceof KeyboardEvent
+		};
+		inserted.current = null;
+		setActiveId(id);
+		setOriginList(list);
+		announce(say.pickedUp({
+			name: itemName(id),
+			...where(items, id)
+		}));
+	};
+	const onDragOver = ({ active, over }) => {
+		const start = origin.current;
+		if (!start) return;
+		const id = String(active.id);
+		if (!over) {
+			if (refusalRef.current) setRefusal(null);
+			announce(say.notOver({ name: itemName(id) }));
+			return;
+		}
+		const current = itemsRef.current;
+		const from = listOf(current, id);
+		const to = listOf(current, over.id);
+		if (!from || !to) return;
+		const reason = refuse?.(start.list, to, id) ?? null;
+		if (reason) {
+			setRefusal({
+				list: to,
+				reason
+			});
+			update(start.snapshot);
+			inserted.current = null;
+			announce(say.refused({
+				name: itemName(id),
+				place: listName(to),
+				reason
+			}));
+			return;
+		}
+		if (refusalRef.current) setRefusal(null);
+		if (from !== to) {
+			const fromList = current[from].filter((item) => item !== id);
+			const toList = [...current[to]];
+			let at = toList.indexOf(String(over.id));
+			if (at < 0) at = toList.length;
+			else if (start.keyboard) {
+				if (lists.indexOf(from) > lists.indexOf(to)) at += 1;
+			} else {
+				const rect = active.rect.current.translated;
+				if (rect && rect.top + rect.height / 2 > over.rect.top + over.rect.height / 2) at += 1;
+			}
+			toList.splice(at, 0, id);
+			const next = {
+				...current,
+				[from]: fromList,
+				[to]: toList
+			};
+			across.moved(start.keyboard);
+			update(next);
+			inserted.current = isList(over.id) ? null : over.id;
+			announce(say.over({
+				name: itemName(id),
+				...where(next, id)
+			}));
+			return;
+		}
+		if (over.id === id) {
+			inserted.current = null;
+			return;
+		}
+		const list = current[to];
+		if (inserted.current === over.id) {
+			announce(say.over({
+				name: itemName(id),
+				...where(current, id)
+			}));
+			return;
+		}
+		inserted.current = null;
+		const overIndex = isList(over.id) ? list.length - 1 : list.indexOf(String(over.id));
+		announce(say.over({
+			name: itemName(id),
+			place: listName(to),
+			position: overIndex + 1,
+			count: list.length
+		}));
+	};
+	const finish = (dropped, overId) => {
+		const start = origin.current;
+		const id = activeId;
+		const refused = refusalRef.current;
+		origin.current = null;
+		across.reset();
+		setActiveId(null);
+		setOriginList(null);
+		setRefusal(null);
+		if (!start || !id) return;
+		if (!dropped || overId == null || refused) {
+			update(start.snapshot);
+			const home = {
+				name: itemName(id),
+				...where(start.snapshot, id)
+			};
+			announce(refused && dropped ? say.refusedDrop({
+				...home,
+				reason: refused.reason
+			}) : say.cancelled(home));
+			return;
+		}
+		const current = itemsRef.current;
+		const list = listOf(current, id);
+		const ids = current[list];
+		const fromIndex = ids.indexOf(id);
+		const toIndex = inserted.current === overId ? fromIndex : isList(overId) ? ids.length - 1 : ids.indexOf(String(overId));
+		const next = toIndex >= 0 && toIndex !== fromIndex ? {
+			...current,
+			[list]: arrayMove([...ids], fromIndex, toIndex)
+		} : current;
+		update(next);
+		announce(say.dropped({
+			name: itemName(id),
+			...where(next, id)
+		}));
+	};
+	const accessibility = useMemo(() => ({
+		announcements: SILENT_DRAG_ANNOUNCEMENTS,
+		screenReaderInstructions: dragInstructions(messages)
+	}), [messages]);
+	return {
+		/** The dragged item's id, or null. */
+		activeId,
+		/** The list that refuses the item under the hand, and why. */
+		refusal,
+		/** The list the drag started in, while dragging. */
+		originList,
+		isHome,
+		listOf,
+		collisionDetection: across.collisionDetection,
+		coordinateGetter: across.coordinateGetter,
+		accessibility,
+		handlers: {
+			onDragStart,
+			onDragOver,
+			onDragEnd: ({ over }) => finish(true, over?.id ?? null),
+			onDragCancel: () => finish(false, null)
+		}
+	};
+}
+/**
+* Wraps each item's content in a list. The dragged item's own node is at 40%
+* while it is still home, and the dashed place (its size, its radius) once it
+* stands anywhere else. Every other item renders as it is: the wrapper stays
+* the same, so the item keeps focus when its drag starts.
+*/
+function DraggedSlot({ dragging = false, home, radius, className, children }) {
+	const place = dragging && !home;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "drag-slot",
+		className: "relative",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-drag-origin": dragging && home ? "" : void 0,
+			className: place ? "invisible" : void 0,
+			children
+		}), place ? /* @__PURE__ */ jsx(DropPlaceholder, { className: cn("absolute inset-0", radius, className) }) : null]
+	});
+}
+/** The last announcement, for a polite live region (`DragLiveRegion`). Repeats are dropped. */
+function useDragAnnouncer() {
+	const [message, setMessage] = useState("");
+	const last = useRef("");
+	return {
+		message,
+		announce: useCallback((text) => {
+			if (text === last.current) return;
+			last.current = text;
+			setMessage(text);
+		}, [])
+	};
+}
+/** A polite, visually hidden live region for drag announcements. */
+function DragLiveRegion({ message }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children: message
+	});
+}
+//#endregion
 //#region src/components/ellipsis/ellipsis.tsx
 const ellipsis = tv({
 	slots: {
@@ -2660,4 +2911,4 @@ function ChoiceList(props) {
 	});
 }
 //#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, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, ListRowSkeleton, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, TOUCH_DRAG_HOLD_MS, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+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, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/package.json

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