@botiverse/raft-ui 0.35.1 → 0.36.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { cn } from "./cn.mjs";
2
- 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";
2
+ 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-BB6vO4PO.mjs";
3
3
  import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
4
4
  import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, Copy, FileText, Image, Info, TriangleAlert, Upload, X, Zap } from "lucide-react";
5
5
  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";
13
13
  import { ContextMenu as ContextMenu$1 } from "@base-ui/react";
14
14
  import { useHotkey } from "@tanstack/react-hotkeys";
15
15
  import { Popover as Popover$1 } from "@base-ui/react/popover";
16
- import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
16
+ import { DndContext, KeyboardCode, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable } from "@dnd-kit/core";
17
17
  import { Input as Input$1 } from "@base-ui/react/input";
18
18
  import { Field as Field$1 } from "@base-ui/react/field";
19
19
  import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
@@ -24,7 +24,7 @@ import { Switch as Switch$1 } from "@base-ui/react/switch";
24
24
  import { Toggle } from "@base-ui/react/toggle";
25
25
  import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
26
26
  import { Progress as Progress$1 } from "@base-ui/react/progress";
27
- import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
27
+ import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
28
28
  import { CSS } from "@dnd-kit/utilities";
29
29
  import { Toast } from "@base-ui/react/toast";
30
30
  import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
@@ -8127,9 +8127,9 @@ const composer = tv({ slots: {
8127
8127
  "font-sans text-body font-normal text-foreground",
8128
8128
  "placeholder:text-foreground-hint"
8129
8129
  ],
8130
- toolbar: ["flex items-center justify-between", "mx-[calc(var(--control-embedded-inset)-0.75rem-1px)] gap-2"],
8131
- actions: ["flex items-center gap-2"],
8132
- meta: ["flex items-center", "gap-2"],
8130
+ toolbar: ["flex items-center justify-between", "mx-[calc(var(--control-embedded-inset)-0.75rem-1px)] gap-embedded-inset"],
8131
+ actions: ["flex items-center gap-embedded-inset"],
8132
+ meta: ["flex items-center", "gap-embedded-inset"],
8133
8133
  iconButton: [
8134
8134
  "size-8 rounded-chip text-foreground-muted",
8135
8135
  "disabled:border-transparent disabled:bg-transparent",
@@ -8533,10 +8533,8 @@ function ComposerAttachmentsScrollArea({ children, className, onMouseEnter, onMo
8533
8533
  }
8534
8534
  //#endregion
8535
8535
  //#region src/components/composer/sortable-composer-attachments.tsx
8536
- const SORTABLE_TRANSITION = {
8537
- duration: 160,
8538
- easing: "cubic-bezier(0.25, 1, 0.5, 1)"
8539
- };
8536
+ /** Whether the lifted attachment still stands at its own index. */
8537
+ const SortableAttachmentsHomeContext = createContext(true);
8540
8538
  /**
8541
8539
  * Mixed-width flex-wrap cannot be predicted by rectSortingStrategy. Preview
8542
8540
  * position by live DOM reorder on dragOver instead; strategy returns null so
@@ -8544,18 +8542,6 @@ const SORTABLE_TRANSITION = {
8544
8542
  * @see https://github.com/clauderic/dnd-kit/issues/44
8545
8543
  */
8546
8544
  const liveReorderStrategy = () => null;
8547
- const restrictToHorizontalAxis = ({ transform }) => ({
8548
- ...transform,
8549
- y: 0
8550
- });
8551
- const HORIZONTAL_MODIFIERS = [restrictToHorizontalAxis];
8552
- const HORIZONTAL_AUTO_SCROLL = {
8553
- threshold: {
8554
- x: .15,
8555
- y: 0
8556
- },
8557
- canScroll: (element) => element.scrollWidth > element.clientWidth + 1
8558
- };
8559
8545
  /**
8560
8546
  * Prefer pointer hits; if the active droppable is still under the pointer /
8561
8547
  * closest center, keep it so layout reflow alone cannot claim a neighbor.
@@ -8592,7 +8578,30 @@ function attachmentsById(children) {
8592
8578
  });
8593
8579
  return byId;
8594
8580
  }
8595
- function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, strategy }) {
8581
+ function setOrder(positions, ids) {
8582
+ positions.clear();
8583
+ ids.forEach((id, index) => positions.set(id, index));
8584
+ }
8585
+ /**
8586
+ * An attachment is said by its `label`, at its position. Over another
8587
+ * attachment the dragged one already stands where it would drop (live
8588
+ * reorder); with nothing under the hand it is home.
8589
+ */
8590
+ function attachmentAnnouncementSource({ labels, home, draft }) {
8591
+ return {
8592
+ name: (id) => labels.get(String(id)) ?? "",
8593
+ place: (id, overId) => {
8594
+ const positions = overId == null ? home : draft;
8595
+ const index = positions.get(String(id));
8596
+ return index == null ? null : {
8597
+ place: "",
8598
+ position: index + 1,
8599
+ count: positions.size
8600
+ };
8601
+ }
8602
+ };
8603
+ }
8604
+ function SortableComposerAttachmentsRoot({ items, onReorder, children, messages, container, axis, strategy }) {
8596
8605
  const dndContextId = useId();
8597
8606
  const listRef = useRef(null);
8598
8607
  const [activeId, setActiveId] = useState(null);
@@ -8601,11 +8610,31 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
8601
8610
  const [listMinHeight, setListMinHeight] = useState();
8602
8611
  const draftIdsRef = useRef([]);
8603
8612
  const lastReorderPointerRef = useRef(null);
8604
- const sensors = useSensors(useMouseOnlyPointerSensor(6), useHoldThenMoveTouchSensor(), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
8613
+ const sensors = useDragSensors();
8614
+ const liftContainer = useLiftContainer(container);
8605
8615
  const attachments = useMemo(() => attachmentsById(children), [children]);
8606
8616
  const itemIds = useMemo(() => items.map(String), [items]);
8617
+ const [announced] = useState(() => ({
8618
+ labels: /* @__PURE__ */ new Map(),
8619
+ home: /* @__PURE__ */ new Map(),
8620
+ draft: /* @__PURE__ */ new Map()
8621
+ }));
8622
+ useLayoutEffect(() => {
8623
+ announced.labels.clear();
8624
+ for (const [id, child] of attachments) if (child.props.label != null) announced.labels.set(id, child.props.label);
8625
+ setOrder(announced.home, itemIds);
8626
+ }, [
8627
+ announced,
8628
+ attachments,
8629
+ itemIds
8630
+ ]);
8631
+ const accessibility = useMemo(() => ({
8632
+ screenReaderInstructions: dragInstructions(messages),
8633
+ announcements: createDragAnnouncements(attachmentAnnouncementSource(announced), messages)
8634
+ }), [announced, messages]);
8607
8635
  const horizontal = axis === "x";
8608
8636
  const displayIds = activeId !== null ? draftIds : itemIds;
8637
+ const home = activeId === null || draftIds.indexOf(activeId) === itemIds.indexOf(activeId);
8609
8638
  const orderedChildren = useMemo(() => displayIds.flatMap((id) => {
8610
8639
  const child = attachments.get(id);
8611
8640
  return child ? [child] : [];
@@ -8616,11 +8645,13 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
8616
8645
  lastReorderPointerRef.current = null;
8617
8646
  const nextDraft = [...itemIds];
8618
8647
  draftIdsRef.current = nextDraft;
8648
+ setOrder(announced.draft, nextDraft);
8619
8649
  setDraftIds(nextDraft);
8620
8650
  if (!horizontal && listRef.current) setListMinHeight(listRef.current.getBoundingClientRect().height);
8621
8651
  setActiveId(id);
8622
8652
  setOverlay(attachments.get(id)?.props.children ?? null);
8623
8653
  }, [
8654
+ announced,
8624
8655
  attachments,
8625
8656
  horizontal,
8626
8657
  itemIds
@@ -8636,8 +8667,9 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
8636
8667
  if (pointer && lastReorderPointerRef.current && samePointer(pointer, lastReorderPointerRef.current)) return;
8637
8668
  if (pointer) lastReorderPointerRef.current = pointer;
8638
8669
  draftIdsRef.current = next;
8670
+ setOrder(announced.draft, next);
8639
8671
  setDraftIds(next);
8640
- }, []);
8672
+ }, [announced]);
8641
8673
  const clearDrag = useCallback(() => {
8642
8674
  lastReorderPointerRef.current = null;
8643
8675
  draftIdsRef.current = [];
@@ -8653,13 +8685,12 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
8653
8685
  onReorder(draftIdsRef.current);
8654
8686
  clearDrag();
8655
8687
  }, [clearDrag, onReorder]);
8656
- const modifiers = horizontal ? HORIZONTAL_MODIFIERS : void 0;
8657
8688
  return /* @__PURE__ */ jsxs(DndContext, {
8658
8689
  id: dndContextId,
8690
+ accessibility,
8659
8691
  sensors,
8660
8692
  collisionDetection: sortableCollisionDetection,
8661
- modifiers,
8662
- autoScroll: horizontal ? HORIZONTAL_AUTO_SCROLL : false,
8693
+ autoScroll: false,
8663
8694
  onDragStart: handleDragStart,
8664
8695
  onDragOver: handleDragOver,
8665
8696
  onDragCancel: handleDragCancel,
@@ -8672,15 +8703,15 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, str
8672
8703
  children: /* @__PURE__ */ jsx(SortableContext, {
8673
8704
  items: displayIds,
8674
8705
  strategy,
8675
- children: orderedChildren
8706
+ children: /* @__PURE__ */ jsx(SortableAttachmentsHomeContext, {
8707
+ value: home,
8708
+ children: orderedChildren
8709
+ })
8676
8710
  })
8677
- }), /* @__PURE__ */ jsx(DragOverlay, {
8678
- dropAnimation: null,
8679
- modifiers,
8680
- children: activeId && overlay ? /* @__PURE__ */ jsx("div", {
8681
- className: "w-max max-w-full shrink-0 cursor-grabbing",
8682
- children: overlay
8683
- }) : null
8711
+ }), /* @__PURE__ */ jsx(DragLift, {
8712
+ className: "rounded-control",
8713
+ container: liftContainer,
8714
+ children: activeId && overlay ? overlay : null
8684
8715
  })]
8685
8716
  });
8686
8717
  }
@@ -8701,34 +8732,39 @@ function SortableComposerAttachmentsScroll(props) {
8701
8732
  }) });
8702
8733
  }
8703
8734
  /**
8704
- * Sized placeholder stays in the flex flow (opacity 0). DragOverlay is the
8705
- * pointer ghost — the root reads these `children` for it. Live draft reorder
8706
- * moves this slot to the drop index; wrap skips strategy transforms so siblings
8707
- * FLIP via layout instead of wrong gaps.
8735
+ * The lifted attachment's own slot stays in the flex flow: at 40% while it is
8736
+ * still home, the dashed place once it stands anywhere else. DragLift holds
8737
+ * the copy that follows the hand; the root reads these `children` for it.
8738
+ * Live draft reorder moves this slot to the drop index; wrap skips strategy
8739
+ * transforms so siblings FLIP via layout instead of wrong gaps.
8708
8740
  */
8709
8741
  function SortableComposerAttachment({ id, label, children }) {
8742
+ const home = use(SortableAttachmentsHomeContext);
8743
+ const siblingTransition = useDragSiblingTransition();
8710
8744
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
8711
8745
  id,
8712
8746
  animateLayoutChanges: defaultAnimateLayoutChanges,
8713
- transition: SORTABLE_TRANSITION
8747
+ transition: siblingTransition
8714
8748
  });
8715
8749
  const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
8716
8750
  const style = {
8717
8751
  transform: isDragging ? void 0 : CSS.Translate.toString(transform),
8718
8752
  transition: isDragging ? void 0 : transition,
8719
- opacity: isDragging ? 0 : void 0,
8720
8753
  zIndex: isDragging ? 0 : void 0
8721
8754
  };
8722
- return /* @__PURE__ */ jsx("div", {
8755
+ const place = isDragging && !home;
8756
+ return /* @__PURE__ */ jsxs("div", {
8723
8757
  ref: setNodeRef,
8724
8758
  "aria-label": `Reorder ${label}`,
8725
- className: "w-max max-w-full shrink-0 cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing",
8759
+ 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",
8726
8760
  "data-dragging": isDragging ? "true" : void 0,
8761
+ "data-drag-origin": isDragging && home ? "" : void 0,
8762
+ "data-drop-place": place ? "" : void 0,
8727
8763
  "data-slot": "sortable-composer-attachment",
8728
8764
  style,
8729
8765
  ...sortableAttributes,
8730
8766
  ...listeners,
8731
- children
8767
+ children: [children, place ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0" }) : null]
8732
8768
  });
8733
8769
  }
8734
8770
  //#endregion
@@ -10615,16 +10651,80 @@ function TabsList({ className, children, variant = "default", ref, ...props }) {
10615
10651
  })
10616
10652
  });
10617
10653
  }
10618
- function SortableTabsList({ value, onReorder, onDragStart, children, variant = "default", ...props }) {
10654
+ /** What people call a tab: its `aria-label`, or its text. */
10655
+ function tabName(node) {
10656
+ if (!node) return "";
10657
+ return (node.getAttribute("aria-label") ?? node.textContent ?? "").replace(/\s+/g, " ").trim();
10658
+ }
10659
+ /** What people call the row a tab is in: the tab list's accessible name, or nothing. */
10660
+ function tabListName(node) {
10661
+ const list = node?.closest("[role=tablist]");
10662
+ if (!list) return "";
10663
+ const label = list.getAttribute("aria-label");
10664
+ if (label) return label.trim();
10665
+ return (list.getAttribute("aria-labelledby")?.split(/\s+/).filter(Boolean) ?? []).map((id) => list.ownerDocument.getElementById(id)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
10666
+ }
10667
+ /**
10668
+ * A tab is said by its name, at its position in the row: a drop on a tab
10669
+ * takes its place, and with nothing under the hand the tab is home. Read
10670
+ * when dnd-kit announces, never while rendering.
10671
+ */
10672
+ function tabAnnouncementSource(positions, nodes) {
10673
+ return {
10674
+ name: (id) => tabName(nodes.get(String(id))),
10675
+ place: (id, overId) => {
10676
+ const index = positions.get(String(overId ?? id));
10677
+ if (index == null) return null;
10678
+ return {
10679
+ place: tabListName(nodes.get(String(id))),
10680
+ position: index + 1,
10681
+ count: positions.size
10682
+ };
10683
+ }
10684
+ };
10685
+ }
10686
+ function SortableTabsList({ value, onReorder, onDragStart, messages, container, children, variant = "default", ...props }) {
10619
10687
  const [activeId, setActiveId] = useState(void 0);
10620
10688
  const placement = use(TabsPlacementContext);
10621
10689
  const dndContextId = useId();
10622
- const sensors = useSensors(useMouseOnlyPointerSensor(6), useHoldThenMoveTouchSensor());
10690
+ const sensors = useDragSensors();
10691
+ const [copies] = useState(() => /* @__PURE__ */ new Map());
10692
+ const [nodes] = useState(() => /* @__PURE__ */ new Map());
10693
+ const liftContainer = useLiftContainer(container);
10694
+ const selectedValue = use(TabsValueContext);
10695
+ const { tab: tabClassName, content: contentClassName } = tabs({
10696
+ variant,
10697
+ placement
10698
+ });
10623
10699
  const tabIds = useMemo(() => value.map(String), [value]);
10700
+ const [positions] = useState(() => /* @__PURE__ */ new Map());
10701
+ useLayoutEffect(() => {
10702
+ positions.clear();
10703
+ tabIds.forEach((id, index) => positions.set(id, index));
10704
+ }, [positions, tabIds]);
10705
+ const accessibility = useMemo(() => ({
10706
+ screenReaderInstructions: dragInstructions(messages),
10707
+ announcements: createDragAnnouncements(tabAnnouncementSource(positions, nodes), messages)
10708
+ }), [
10709
+ messages,
10710
+ nodes,
10711
+ positions
10712
+ ]);
10624
10713
  const reorderContext = useMemo(() => ({
10625
10714
  enabled: true,
10626
- activeId
10627
- }), [activeId]);
10715
+ activeId,
10716
+ copies,
10717
+ nodes
10718
+ }), [
10719
+ activeId,
10720
+ copies,
10721
+ nodes
10722
+ ]);
10723
+ const { onKeyDown: onListKeyDown, ...listProps } = props;
10724
+ const handleListKeyDown = useCallback((event) => {
10725
+ onListKeyDown?.(event);
10726
+ if (activeId !== void 0) event.preventBaseUIHandler?.();
10727
+ }, [activeId, onListKeyDown]);
10628
10728
  const handleDragStart = useCallback(({ active }) => {
10629
10729
  setActiveId(String(active.id));
10630
10730
  onDragStart?.(String(active.id));
@@ -10644,27 +10744,42 @@ function SortableTabsList({ value, onReorder, onDragStart, children, variant = "
10644
10744
  tabIds,
10645
10745
  value
10646
10746
  ]);
10647
- return /* @__PURE__ */ jsx(DndContext, {
10747
+ return /* @__PURE__ */ jsxs(DndContext, {
10648
10748
  id: dndContextId,
10749
+ accessibility,
10649
10750
  autoScroll: false,
10650
10751
  sensors,
10651
10752
  collisionDetection: closestCenter,
10652
10753
  onDragStart: handleDragStart,
10653
10754
  onDragCancel: handleDragCancel,
10654
10755
  onDragEnd: handleDragEnd,
10655
- children: /* @__PURE__ */ jsx(SortableContext, {
10756
+ children: [/* @__PURE__ */ jsx(SortableContext, {
10656
10757
  items: tabIds,
10657
10758
  strategy: placement === "left" || placement === "right" ? verticalListSortingStrategy : horizontalListSortingStrategy,
10658
10759
  children: /* @__PURE__ */ jsx(TabsReorderContext.Provider, {
10659
10760
  value: reorderContext,
10660
10761
  children: /* @__PURE__ */ jsx(TabsList, {
10661
10762
  variant,
10662
- ...props,
10763
+ ...listProps,
10764
+ onKeyDown: handleListKeyDown,
10663
10765
  "data-sorting": activeId ? "true" : void 0,
10664
10766
  children
10665
10767
  })
10666
10768
  })
10667
- })
10769
+ }), /* @__PURE__ */ jsx(DragLift, {
10770
+ className: "rounded-control",
10771
+ container: liftContainer,
10772
+ children: activeId === void 0 ? null : /* @__PURE__ */ jsx("span", {
10773
+ "data-slot": "tabs-tab",
10774
+ "data-active": selectedValue === activeId ? "" : void 0,
10775
+ className: tabClassName({ className: "pointer-events-none size-full" }),
10776
+ children: /* @__PURE__ */ jsx("span", {
10777
+ "data-slot": "tabs-tab-content",
10778
+ className: contentClassName(),
10779
+ children: copies.get(activeId)
10780
+ })
10781
+ })
10782
+ })]
10668
10783
  });
10669
10784
  }
10670
10785
  function TabsTab({ value, ...props }) {
@@ -10677,11 +10792,39 @@ function SortableTabsTab({ value, ...props }) {
10677
10792
  const reorder = use(TabsReorderContext);
10678
10793
  const activeValue = use(TabsValueContext);
10679
10794
  const placement = use(TabsPlacementContext);
10680
- const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
10795
+ const siblingTransition = useDragSiblingTransition();
10796
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging, index, overIndex } = useSortable({
10681
10797
  id: value,
10682
- disabled: !reorder.enabled
10798
+ disabled: !reorder.enabled,
10799
+ transition: siblingTransition
10683
10800
  });
10684
10801
  const isDraggingActive = isDragging && activeValue === String(value);
10802
+ const home = overIndex < 0 || overIndex === index;
10803
+ const copies = reorder.copies;
10804
+ const key = String(value);
10805
+ const { children } = props;
10806
+ useLayoutEffect(() => {
10807
+ if (!copies) return;
10808
+ copies.set(key, children);
10809
+ return () => {
10810
+ copies.delete(key);
10811
+ };
10812
+ }, [
10813
+ copies,
10814
+ key,
10815
+ children
10816
+ ]);
10817
+ const nodes = reorder.nodes;
10818
+ const sortableRef = useCallback((node) => {
10819
+ setNodeRef(node);
10820
+ if (!nodes) return;
10821
+ if (node) nodes.set(key, node);
10822
+ else nodes.delete(key);
10823
+ }, [
10824
+ setNodeRef,
10825
+ nodes,
10826
+ key
10827
+ ]);
10685
10828
  const baseStyle = typeof props.style === "function" ? void 0 : props.style;
10686
10829
  const vertical = placement === "left" || placement === "right";
10687
10830
  const translate = vertical ? transform?.y : transform?.x;
@@ -10690,13 +10833,26 @@ function SortableTabsTab({ value, ...props }) {
10690
10833
  transform: translate === void 0 ? void 0 : vertical ? `translate3d(0, ${translate}px, 0)` : `translate3d(${translate}px, 0, 0)`,
10691
10834
  transition,
10692
10835
  zIndex: isDragging ? 20 : baseStyle?.zIndex,
10693
- cursor: isDragging ? "grabbing" : "pointer"
10836
+ cursor: isDragging ? "grabbing" : "pointer",
10837
+ ...isDragging && !home ? PLACE_STYLE : null
10694
10838
  }), [
10695
10839
  baseStyle,
10696
10840
  vertical,
10697
10841
  translate,
10698
10842
  transition,
10699
- isDragging
10843
+ isDragging,
10844
+ home
10845
+ ]);
10846
+ const { onKeyDown: onTabKeyDown } = props;
10847
+ const { onKeyDown: onSortableKeyDown, ...sortableListeners } = listeners ?? {};
10848
+ const handleKeyDown = useCallback((event) => {
10849
+ onTabKeyDown?.(event);
10850
+ if (reorder.activeId !== void 0) event.preventBaseUIHandler?.();
10851
+ onSortableKeyDown?.(event);
10852
+ }, [
10853
+ onTabKeyDown,
10854
+ onSortableKeyDown,
10855
+ reorder.activeId
10700
10856
  ]);
10701
10857
  if (!reorder.enabled) return /* @__PURE__ */ jsx(TabsTabButton, {
10702
10858
  value,
@@ -10705,34 +10861,43 @@ function SortableTabsTab({ value, ...props }) {
10705
10861
  const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
10706
10862
  return /* @__PURE__ */ jsx(TabsTabButton, {
10707
10863
  value,
10708
- sortableRef: setNodeRef,
10864
+ sortableRef,
10709
10865
  ...props,
10710
10866
  "data-dragging-active": isDraggingActive ? "true" : void 0,
10711
10867
  "data-dragging-source": isDragging ? "true" : void 0,
10868
+ "data-drag-origin": isDragging && home ? "" : void 0,
10712
10869
  "data-reorderable": "true",
10713
10870
  style,
10714
10871
  ...sortableAttributes,
10715
- ...listeners
10872
+ ...sortableListeners,
10873
+ onKeyDown: handleKeyDown,
10874
+ dropPlace: isDragging && !home
10716
10875
  });
10717
10876
  }
10718
- function TabsTabButton({ value, sortableRef, className, children, ...props }) {
10877
+ /** The lifted tab's slot away from home: none of the tab's own look, under the dashed place. */
10878
+ const PLACE_STYLE = {
10879
+ backgroundColor: "transparent",
10880
+ borderColor: "transparent",
10881
+ boxShadow: "none"
10882
+ };
10883
+ function TabsTabButton({ value, sortableRef, dropPlace = false, className, children, ...props }) {
10719
10884
  const variant = use(TabsListVariantContext);
10720
10885
  const placement = use(TabsPlacementContext);
10721
10886
  const { content, tab } = tabs({
10722
10887
  variant,
10723
10888
  placement
10724
10889
  });
10725
- return /* @__PURE__ */ jsx(Tabs$1.Tab, {
10890
+ return /* @__PURE__ */ jsxs(Tabs$1.Tab, {
10726
10891
  ref: sortableRef,
10727
10892
  value,
10728
10893
  "data-slot": "tabs-tab",
10729
10894
  className: tab({ className }),
10730
10895
  ...props,
10731
- children: /* @__PURE__ */ jsx("span", {
10896
+ children: [/* @__PURE__ */ jsx("span", {
10732
10897
  "data-slot": "tabs-tab-content",
10733
- className: content(),
10898
+ className: content({ className: dropPlace ? "invisible" : void 0 }),
10734
10899
  children
10735
- })
10900
+ }), dropPlace ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0 z-10 rounded-control" }) : null]
10736
10901
  });
10737
10902
  }
10738
10903
  function TabsLabel({ className, ...props }) {
@@ -10948,13 +11113,9 @@ function AppShellSidebarSlot({ className, id: idProp, render, ...props }) {
10948
11113
  id,
10949
11114
  inert: collapsed ? true : void 0,
10950
11115
  className: sidebarSlot({ className: cn(className, sidebar?.collapsible && [
10951
- "will-change-[opacity]",
10952
- "transition-opacity duration-160 ease-slide",
10953
- "motion-reduce:transition-none",
10954
11116
  "group-data-[state=expanded]/app-shell:relative group-data-[state=expanded]/app-shell:z-1",
10955
11117
  "group-data-[state=collapsed]/app-shell:pointer-events-none",
10956
- "group-data-[state=collapsed]/app-shell:opacity-0",
10957
- "group-data-[state=collapsed]/app-shell:duration-120"
11118
+ "group-data-[state=collapsed]/app-shell:opacity-0"
10958
11119
  ]) })
10959
11120
  };
10960
11121
  return useRender({
@@ -10990,65 +11151,17 @@ function AppShellOverlaySlot({ className, render, ...props }) {
10990
11151
  }
10991
11152
  function AppShellMainSlot({ className, overlay = false, render, ...props }) {
10992
11153
  const { mainSlot } = appShell({ overlay });
10993
- const sidebar = useOptionalAppShellSidebar();
10994
- const collapsible = sidebar?.collapsible ?? false;
10995
- const sliding = useSidebarSlide(collapsible, sidebar?.open ?? true);
11154
+ const collapsible = useOptionalAppShellSidebar()?.collapsible ?? false;
10996
11155
  const defaultProps = {
10997
11156
  "data-slot": "app-shell-main-slot",
10998
- "data-sliding": sliding.active ? "" : void 0,
10999
- className: mainSlot({ className: cn(className, collapsible && [
11000
- "absolute inset-y-0 right-0 left-0",
11001
- "data-sliding:z-2",
11002
- "transition-[left] duration-220 ease-slide",
11003
- "motion-reduce:transition-none",
11004
- "group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"
11005
- ]) })
11157
+ className: mainSlot({ className: cn(className, collapsible && ["absolute inset-y-0 right-0 left-0", "group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"]) })
11006
11158
  };
11007
11159
  return useRender({
11008
11160
  defaultTagName: "main",
11009
11161
  render,
11010
- ref: sliding.ref,
11011
11162
  props: mergeProps(defaultProps, props)
11012
11163
  });
11013
11164
  }
11014
- function useSidebarSlide(collapsible, open) {
11015
- const elementRef = useRef(null);
11016
- const [slide, setSlide] = useState({
11017
- active: false,
11018
- open
11019
- });
11020
- if (slide.open !== open) setSlide({
11021
- active: collapsible,
11022
- open
11023
- });
11024
- const active = slide.active;
11025
- const ref = useCallback((element) => {
11026
- elementRef.current = element;
11027
- }, []);
11028
- useEffect(() => {
11029
- if (!active) return;
11030
- const transitions = elementRef.current?.getAnimations?.().filter((animation) => "transitionProperty" in animation && animation.transitionProperty === "left" && animation.effect?.getComputedTiming().activeDuration !== 0) ?? [];
11031
- let current = true;
11032
- const settle = () => {
11033
- if (current) setSlide((state) => state.open === open ? {
11034
- active: false,
11035
- open
11036
- } : state);
11037
- };
11038
- if (transitions.length === 0) {
11039
- settle();
11040
- return;
11041
- }
11042
- Promise.allSettled(transitions.map((transition) => transition.finished)).then(settle);
11043
- return () => {
11044
- current = false;
11045
- };
11046
- }, [active, open]);
11047
- return {
11048
- active,
11049
- ref
11050
- };
11051
- }
11052
11165
  function AppShellSidebarTrigger(props) {
11053
11166
  const sidebar = useOptionalAppShellSidebar();
11054
11167
  if (!sidebar?.collapsible) return null;
@@ -12026,7 +12139,7 @@ const taskCard = tv({ slots: {
12026
12139
  "rounded-container border border-line-hairline bg-layer-card p-3 text-foreground shadow-none",
12027
12140
  "data-[interactive=true]:hover:overlay-subtle data-[interactive=true]:active:overlay-medium",
12028
12141
  "data-[disabled=true]:bg-fill-muted data-[disabled=true]:opacity-100",
12029
- "group-data-[dragging=true]/task-draggable:shadow-float"
12142
+ "group-data-[dragging=true]/task-draggable:not-in-data-drag-origin:shadow-float"
12030
12143
  ],
12031
12144
  row: ["flex min-w-0 items-start gap-2"],
12032
12145
  body: ["min-w-0 flex-1"],
@@ -12193,15 +12306,10 @@ const taskDnd = tv({ slots: {
12193
12306
  "rounded-container",
12194
12307
  "focus-visible:shadow-focus"
12195
12308
  ],
12196
- overlay: [
12197
- "group/task-drag-overlay pointer-events-none",
12198
- "z-20",
12199
- "**:data-[slot=task-card]:shadow-float"
12200
- ],
12309
+ overlay: ["group/task-drag-overlay pointer-events-none", "size-full rounded-[inherit]"],
12201
12310
  placeholder: [
12202
12311
  "hidden w-full shrink-0",
12203
12312
  "h-(--task-dnd-placeholder-height,72px) rounded-container",
12204
- "border-[1.5px] border-dashed border-line-strong bg-transparent",
12205
12313
  "data-[drop-state=allowed]:block"
12206
12314
  ]
12207
12315
  } });
@@ -12217,29 +12325,47 @@ const EMPTY_OVER_STORE = createTaskDndOverStore();
12217
12325
  const TaskDndOverContext = createContext(null);
12218
12326
  const allowTaskDrop = () => true;
12219
12327
  const NO_SENSORS = [];
12220
- function TaskDndProvider({ children, accessibility, disabled = false, isDropAllowed = allowTaskDrop, onMove, onMoveError, onDragStart, onDragMove, onDragOver, onDragCancel, onDragEnd }) {
12328
+ function TaskDndProvider({ children, describe, messages, accessibility, disabled = false, isDropAllowed = allowTaskDrop, onMove, onMoveError, onDragStart, onDragMove, onDragOver, onDragCancel, onDragEnd }) {
12221
12329
  const id = useId();
12222
12330
  const [activeId, setActiveId] = useState(null);
12331
+ const [activeDropId, setActiveDropId] = useState(null);
12223
12332
  const [activeHeight, setActiveHeight] = useState(null);
12333
+ const [overlay, setOverlay] = useState(false);
12224
12334
  const [overStore] = useState(createTaskDndOverStore);
12225
- const sensors = useSensors(useMouseOnlyPointerSensor(5), useHoldThenMoveTouchSensor(), useSensor(KeyboardSensor, { coordinateGetter: taskKeyboardCoordinates }));
12335
+ const sensors = useDragSensors({ coordinateGetter: taskKeyboardCoordinates });
12336
+ const resolvedAccessibility = useMemo(() => ({
12337
+ screenReaderInstructions: dragInstructions(messages),
12338
+ announcements: describe ? createDragAnnouncements(describe, messages) : SILENT_DRAG_ANNOUNCEMENTS,
12339
+ ...accessibility
12340
+ }), [
12341
+ accessibility,
12342
+ describe,
12343
+ messages
12344
+ ]);
12226
12345
  const context = useMemo(() => ({
12227
12346
  activeId,
12347
+ activeDropId,
12228
12348
  activeHeight,
12229
- isDropAllowed
12349
+ isDropAllowed,
12350
+ overlay,
12351
+ setOverlay
12230
12352
  }), [
12353
+ activeDropId,
12231
12354
  activeHeight,
12232
12355
  activeId,
12233
- isDropAllowed
12356
+ isDropAllowed,
12357
+ overlay
12234
12358
  ]);
12235
12359
  const reset = useCallback(() => {
12236
12360
  setActiveId(null);
12361
+ setActiveDropId(null);
12237
12362
  setActiveHeight(null);
12238
12363
  overStore.update(EMPTY_OVER_SNAPSHOT);
12239
12364
  }, [overStore]);
12240
12365
  const handleDragStart = useCallback((event) => {
12241
12366
  overStore.update(EMPTY_OVER_SNAPSHOT);
12242
12367
  setActiveId(event.active.id);
12368
+ setActiveDropId(getOwnDropId(event.active.data.current));
12243
12369
  setActiveHeight(event.active.rect.current.initial?.height ?? null);
12244
12370
  onDragStart?.(event);
12245
12371
  }, [overStore, onDragStart]);
@@ -12267,7 +12393,8 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
12267
12393
  const nextActiveId = event.active.id;
12268
12394
  const nextOverId = event.over?.id;
12269
12395
  const nextOverData = event.over?.data.current;
12270
- if (nextOverId != null && isDropAllowed(nextActiveId, nextOverId, nextOverData)) {
12396
+ const ownDropId = getOwnDropId(event.active.data.current);
12397
+ if (nextOverId != null && nextOverId !== ownDropId && isDropAllowed(nextActiveId, nextOverId, nextOverData)) {
12271
12398
  const details = {
12272
12399
  activeId: nextActiveId,
12273
12400
  overId: nextOverId,
@@ -12289,7 +12416,8 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
12289
12416
  ]);
12290
12417
  return /* @__PURE__ */ jsx(DndContext, {
12291
12418
  id,
12292
- accessibility,
12419
+ accessibility: resolvedAccessibility,
12420
+ autoScroll: !overlay,
12293
12421
  sensors: disabled ? NO_SENSORS : sensors,
12294
12422
  onDragStart: handleDragStart,
12295
12423
  onDragMove: handleDragMove,
@@ -12307,17 +12435,21 @@ function TaskDndProvider({ children, accessibility, disabled = false, isDropAllo
12307
12435
  }
12308
12436
  function TaskDraggable({ id, disabled = false, dropId, dropData, dropDisabled = false, className, ref: consumerRef, style, ...props }) {
12309
12437
  const { draggable } = taskDnd();
12438
+ const context = use(TaskDndContext);
12439
+ const ownDrop = useMemo(() => dropId == null ? void 0 : { [OWN_DROP_ID]: dropId }, [dropId]);
12310
12440
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
12311
12441
  id,
12312
- disabled
12442
+ disabled,
12443
+ data: ownDrop
12313
12444
  });
12445
+ const lifted = isDragging && context?.overlay === true;
12314
12446
  const { setNodeRef: setDropNodeRef, isOver: isDropOver } = useDroppable({
12315
12447
  id: dropId ?? id,
12316
12448
  data: dropData,
12317
12449
  disabled: dropId == null || dropDisabled
12318
12450
  });
12319
12451
  const dragStyle = {
12320
- transform: CSS.Translate.toString(transform),
12452
+ transform: lifted ? void 0 : CSS.Translate.toString(transform),
12321
12453
  ...style
12322
12454
  };
12323
12455
  const mergedRef = useCallback((node) => {
@@ -12335,6 +12467,7 @@ function TaskDraggable({ id, disabled = false, dropId, dropData, dropDisabled =
12335
12467
  ref: mergedRef,
12336
12468
  "data-slot": "task-draggable",
12337
12469
  "data-dragging": isDragging ? "true" : void 0,
12470
+ "data-drag-origin": lifted ? "" : void 0,
12338
12471
  "data-drop-over": isDropOver ? "true" : void 0,
12339
12472
  "data-disabled": disabled ? "true" : void 0,
12340
12473
  className: draggable({ className }),
@@ -12369,6 +12502,7 @@ function TaskDropPlaceholder({ id, placement, className, render, style, ...props
12369
12502
  const context = use(TaskDndContext);
12370
12503
  const overStore = use(TaskDndOverContext) ?? EMPTY_OVER_STORE;
12371
12504
  const { placeholder } = taskDnd();
12505
+ const { placeholder: dropPlaceholder } = drag();
12372
12506
  const dropState = useSyncExternalStore(overStore.subscribe, () => getPlaceholderDropState(context, overStore.getSnapshot(), id, placement), () => "idle");
12373
12507
  const placeholderStyle = {
12374
12508
  ...style,
@@ -12382,16 +12516,29 @@ function TaskDropPlaceholder({ id, placement, className, render, style, ...props
12382
12516
  "aria-hidden": true,
12383
12517
  "data-slot": "task-drop-placeholder",
12384
12518
  "data-drop-state": dropState,
12385
- className: placeholder({ className }),
12519
+ className: dropPlaceholder({ className: placeholder({ className }) }),
12386
12520
  style: placeholderStyle,
12387
12521
  ...props
12388
12522
  }
12389
12523
  });
12390
12524
  }
12391
- function TaskDragOverlay({ children, className }) {
12525
+ /**
12526
+ * The copy of the dragged card that follows the hand: a `DragLift` with the
12527
+ * card's radius. On a drop it glides into the card's new place, and on a
12528
+ * cancel back home. While it is rendered, the dragged card stays in its place
12529
+ * at 40% instead of moving.
12530
+ */
12531
+ function TaskDragOverlay({ children, className, container }) {
12392
12532
  const { overlay } = taskDnd();
12393
- return /* @__PURE__ */ jsx(DragOverlay, {
12394
- dropAnimation: null,
12533
+ const setOverlay = use(TaskDndContext)?.setOverlay;
12534
+ useEffect(() => {
12535
+ if (!setOverlay) return;
12536
+ setOverlay(true);
12537
+ return () => setOverlay(false);
12538
+ }, [setOverlay]);
12539
+ return /* @__PURE__ */ jsx(DragLift, {
12540
+ className: "rounded-container",
12541
+ container,
12395
12542
  children: children == null ? null : /* @__PURE__ */ jsx("div", {
12396
12543
  "data-slot": "task-drag-overlay",
12397
12544
  "data-dragging": "true",
@@ -12400,6 +12547,11 @@ function TaskDragOverlay({ children, className }) {
12400
12547
  })
12401
12548
  });
12402
12549
  }
12550
+ const OWN_DROP_ID = "taskDndDropId";
12551
+ function getOwnDropId(data) {
12552
+ const value = data?.[OWN_DROP_ID];
12553
+ return typeof value === "string" || typeof value === "number" ? value : null;
12554
+ }
12403
12555
  /**
12404
12556
  * dnd-kit's `sortableKeyboardCoordinates` only moves when the dragged item is
12405
12557
  * itself a registered droppable under its own id (as with `useSortable`). Task
@@ -12470,6 +12622,7 @@ function getDropState(context, id, isOver, overData) {
12470
12622
  return context?.isDropAllowed(activeId, id, overData) ? "allowed" : "blocked";
12471
12623
  }
12472
12624
  function getPlaceholderDropState(context, over, id, placement) {
12625
+ if (context?.activeDropId != null && context.activeDropId === id) return "idle";
12473
12626
  return getDropState(context, id, over.overId === id && (placement == null || over.overPlacement === placement), over.overData);
12474
12627
  }
12475
12628
  function createTaskDndOverStore() {