@almadar/ui 4.50.1 → 4.50.3

package/dist/avl/index.cjs

@@ -24942,6 +24942,10 @@ function useDataDnd(args) {
   const unregisterZone = React93__namespace.default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [overlayNode, setOverlayNode] = React93__namespace.default.useState(null);
+  const setOverlay = React93__namespace.default.useCallback((node) => {
+    setOverlayNode(node);
+  }, []);
   const zoneId = React93__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React93__namespace.default.useMemo(
@@ -24961,6 +24965,13 @@ function useDataDnd(args) {
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
     core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
+  const collisionDetection = React93__namespace.default.useCallback((args2) => {
+    const pointerCollisions = core$1.pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = core$1.rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return core$1.closestCorners(args2);
+  }, []);
   const findZoneByItem = React93__namespace.default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -25018,6 +25029,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
+  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
   const SortableItem = React93__namespace.default.useCallback(
     ({ id, children }) => {
       const {
@@ -25028,6 +25040,11 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
+      React93__namespace.default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(children);
+        return () => overlaySink(null);
+      }, [isDragging, children]);
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
@@ -25046,7 +25063,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -25064,27 +25081,59 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React93__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, setOverlay }),
+    [registerZone, unregisterZone, setOverlay]
   );
   const wrapContainer = React93__namespace.default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      const clearOverlay = () => setOverlay(null);
       if (!isZone) {
         if (!isRoot) return children;
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              children,
+              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              inner,
+              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -25290,7 +25339,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -25706,7 +25755,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/avl/index.js

@@ -34,7 +34,7 @@ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js'
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { FieldTypeSchema, isInlineTrait, isEntityCall, schemaToIR, getPage, isCircuitEvent } from '@almadar/core';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, DragOverlay, useDroppable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, arrayMove, useSortable, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useThree, useFrame, Canvas } from '@react-three/fiber';
@@ -24896,6 +24896,10 @@ function useDataDnd(args) {
   const unregisterZone = React93__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [overlayNode, setOverlayNode] = React93__default.useState(null);
+  const setOverlay = React93__default.useCallback((node) => {
+    setOverlayNode(node);
+  }, []);
   const zoneId = React93__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React93__default.useMemo(
@@ -24915,6 +24919,13 @@ function useDataDnd(args) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const collisionDetection = React93__default.useCallback((args2) => {
+    const pointerCollisions = pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return closestCorners(args2);
+  }, []);
   const findZoneByItem = React93__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -24972,6 +24983,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
+  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
   const SortableItem = React93__default.useCallback(
     ({ id, children }) => {
       const {
@@ -24982,6 +24994,11 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = useSortable({ id, data: { dndGroup: ownGroup } });
+      React93__default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(children);
+        return () => overlaySink(null);
+      }, [isDragging, children]);
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
@@ -25000,7 +25017,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -25018,27 +25035,59 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React93__default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, setOverlay }),
+    [registerZone, unregisterZone, setOverlay]
   );
   const wrapContainer = React93__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      const clearOverlay = () => setOverlay(null);
       if (!isZone) {
         if (!isRoot) return children;
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxs(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              children,
+              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxs(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              inner,
+              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -25244,7 +25293,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -25660,7 +25709,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/components/index.cjs

@@ -20109,6 +20109,10 @@ function useDataDnd(args) {
   const unregisterZone = React75__namespace.default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [overlayNode, setOverlayNode] = React75__namespace.default.useState(null);
+  const setOverlay = React75__namespace.default.useCallback((node) => {
+    setOverlayNode(node);
+  }, []);
   const zoneId = React75__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React75__namespace.default.useMemo(
@@ -20128,6 +20132,13 @@ function useDataDnd(args) {
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
     core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
+  const collisionDetection = React75__namespace.default.useCallback((args2) => {
+    const pointerCollisions = core$1.pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = core$1.rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return core$1.closestCorners(args2);
+  }, []);
   const findZoneByItem = React75__namespace.default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -20185,6 +20196,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
+  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
   const SortableItem = React75__namespace.default.useCallback(
     ({ id, children }) => {
       const {
@@ -20195,6 +20207,11 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
+      React75__namespace.default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(children);
+        return () => overlaySink(null);
+      }, [isDragging, children]);
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
@@ -20213,7 +20230,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -20231,27 +20248,59 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React75__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, setOverlay }),
+    [registerZone, unregisterZone, setOverlay]
   );
   const wrapContainer = React75__namespace.default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      const clearOverlay = () => setOverlay(null);
       if (!isZone) {
         if (!isRoot) return children;
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              children,
+              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              inner,
+              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -20457,7 +20506,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -20873,7 +20922,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/components/index.js

@@ -35,7 +35,7 @@ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js'
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { isInlineTrait } from '@almadar/core';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, DragOverlay, useDroppable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, arrayMove, useSortable, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Handle, Position } from '@xyflow/react';
@@ -20063,6 +20063,10 @@ function useDataDnd(args) {
   const unregisterZone = React75__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [overlayNode, setOverlayNode] = React75__default.useState(null);
+  const setOverlay = React75__default.useCallback((node) => {
+    setOverlayNode(node);
+  }, []);
   const zoneId = React75__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React75__default.useMemo(
@@ -20082,6 +20086,13 @@ function useDataDnd(args) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const collisionDetection = React75__default.useCallback((args2) => {
+    const pointerCollisions = pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return closestCorners(args2);
+  }, []);
   const findZoneByItem = React75__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -20139,6 +20150,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
+  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
   const SortableItem = React75__default.useCallback(
     ({ id, children }) => {
       const {
@@ -20149,6 +20161,11 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = useSortable({ id, data: { dndGroup: ownGroup } });
+      React75__default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(children);
+        return () => overlaySink(null);
+      }, [isDragging, children]);
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
@@ -20167,7 +20184,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -20185,27 +20202,59 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React75__default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, setOverlay }),
+    [registerZone, unregisterZone, setOverlay]
   );
   const wrapContainer = React75__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      const clearOverlay = () => setOverlay(null);
       if (!isZone) {
         if (!isRoot) return children;
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxs(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              children,
+              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxs(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              inner,
+              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -20411,7 +20460,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -20827,7 +20876,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/components/molecules/useDataDnd.d.ts

@@ -42,6 +42,8 @@ interface UseDataDndArgs<T extends EntityRow> extends DataDndProps {
 }
 interface UseDataDndResult<T extends EntityRow> {
     enabled: boolean;
+    /** True when this container is a sortable zone (own items are draggable). False in dndRoot-only mode. */
+    isZone: boolean;
     wrapContainer: (children: React.ReactNode) => React.ReactNode;
     SortableItem: React.FC<{
         id: UniqueIdentifier;

package/dist/providers/index.cjs

@@ -21354,6 +21354,10 @@ function useDataDnd(args) {
   const unregisterZone = React81__namespace.default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [overlayNode, setOverlayNode] = React81__namespace.default.useState(null);
+  const setOverlay = React81__namespace.default.useCallback((node) => {
+    setOverlayNode(node);
+  }, []);
   const zoneId = React81__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React81__namespace.default.useMemo(
@@ -21373,6 +21377,13 @@ function useDataDnd(args) {
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
     core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
+  const collisionDetection = React81__namespace.default.useCallback((args2) => {
+    const pointerCollisions = core$1.pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = core$1.rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return core$1.closestCorners(args2);
+  }, []);
   const findZoneByItem = React81__namespace.default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -21430,6 +21441,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
+  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
   const SortableItem = React81__namespace.default.useCallback(
     ({ id, children }) => {
       const {
@@ -21440,6 +21452,11 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
+      React81__namespace.default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(children);
+        return () => overlaySink(null);
+      }, [isDragging, children]);
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
@@ -21458,7 +21475,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -21476,27 +21493,59 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React81__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, setOverlay }),
+    [registerZone, unregisterZone, setOverlay]
   );
   const wrapContainer = React81__namespace.default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      const clearOverlay = () => setOverlay(null);
       if (!isZone) {
         if (!isRoot) return children;
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              children,
+              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              inner,
+              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -21702,7 +21751,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -22118,7 +22167,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/providers/index.js

@@ -36,7 +36,7 @@ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js'
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { isInlineTrait } from '@almadar/core';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, DragOverlay, useDroppable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, arrayMove, useSortable, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Handle, Position } from '@xyflow/react';
@@ -21308,6 +21308,10 @@ function useDataDnd(args) {
   const unregisterZone = React81__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [overlayNode, setOverlayNode] = React81__default.useState(null);
+  const setOverlay = React81__default.useCallback((node) => {
+    setOverlayNode(node);
+  }, []);
   const zoneId = React81__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React81__default.useMemo(
@@ -21327,6 +21331,13 @@ function useDataDnd(args) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const collisionDetection = React81__default.useCallback((args2) => {
+    const pointerCollisions = pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return closestCorners(args2);
+  }, []);
   const findZoneByItem = React81__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -21384,6 +21395,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
+  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
   const SortableItem = React81__default.useCallback(
     ({ id, children }) => {
       const {
@@ -21394,6 +21406,11 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = useSortable({ id, data: { dndGroup: ownGroup } });
+      React81__default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(children);
+        return () => overlaySink(null);
+      }, [isDragging, children]);
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
@@ -21412,7 +21429,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -21430,27 +21447,59 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React81__default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, setOverlay }),
+    [registerZone, unregisterZone, setOverlay]
   );
   const wrapContainer = React81__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      const clearOverlay = () => setOverlay(null);
       if (!isZone) {
         if (!isRoot) return children;
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxs(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              children,
+              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxs(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              inner,
+              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -21656,7 +21705,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -22072,7 +22121,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/runtime/index.cjs

@@ -21123,6 +21123,10 @@ function useDataDnd(args) {
   const unregisterZone = React80__namespace.default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [overlayNode, setOverlayNode] = React80__namespace.default.useState(null);
+  const setOverlay = React80__namespace.default.useCallback((node) => {
+    setOverlayNode(node);
+  }, []);
   const zoneId = React80__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React80__namespace.default.useMemo(
@@ -21142,6 +21146,13 @@ function useDataDnd(args) {
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
     core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
+  const collisionDetection = React80__namespace.default.useCallback((args2) => {
+    const pointerCollisions = core$1.pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = core$1.rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return core$1.closestCorners(args2);
+  }, []);
   const findZoneByItem = React80__namespace.default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -21199,6 +21210,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
+  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
   const SortableItem = React80__namespace.default.useCallback(
     ({ id, children }) => {
       const {
@@ -21209,6 +21221,11 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
+      React80__namespace.default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(children);
+        return () => overlaySink(null);
+      }, [isDragging, children]);
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
@@ -21227,7 +21244,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -21245,27 +21262,59 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React80__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, setOverlay }),
+    [registerZone, unregisterZone, setOverlay]
   );
   const wrapContainer = React80__namespace.default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      const clearOverlay = () => setOverlay(null);
       if (!isZone) {
         if (!isRoot) return children;
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              children,
+              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              inner,
+              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -21471,7 +21520,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -21887,7 +21936,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/runtime/index.js

@@ -36,7 +36,7 @@ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js'
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { isCircuitEvent, schemaToIR, getPage, clearSchemaCache as clearSchemaCache$1, isEntityCall, isInlineTrait } from '@almadar/core';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, DragOverlay, useDroppable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, arrayMove, useSortable, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Handle, Position } from '@xyflow/react';
@@ -21077,6 +21077,10 @@ function useDataDnd(args) {
   const unregisterZone = React80__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [overlayNode, setOverlayNode] = React80__default.useState(null);
+  const setOverlay = React80__default.useCallback((node) => {
+    setOverlayNode(node);
+  }, []);
   const zoneId = React80__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React80__default.useMemo(
@@ -21096,6 +21100,13 @@ function useDataDnd(args) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const collisionDetection = React80__default.useCallback((args2) => {
+    const pointerCollisions = pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return closestCorners(args2);
+  }, []);
   const findZoneByItem = React80__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -21153,6 +21164,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
+  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
   const SortableItem = React80__default.useCallback(
     ({ id, children }) => {
       const {
@@ -21163,6 +21175,11 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = useSortable({ id, data: { dndGroup: ownGroup } });
+      React80__default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(children);
+        return () => overlaySink(null);
+      }, [isDragging, children]);
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
@@ -21181,7 +21198,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -21199,27 +21216,59 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React80__default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, setOverlay }),
+    [registerZone, unregisterZone, setOverlay]
   );
   const wrapContainer = React80__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      const clearOverlay = () => setOverlay(null);
       if (!isZone) {
         if (!isRoot) return children;
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxs(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              children,
+              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxs(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragEnd: (e) => {
+              handleDragEnd(e);
+              clearOverlay();
+            },
+            onDragCancel: clearOverlay,
+            children: [
+              inner,
+              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
+            ]
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -21425,7 +21474,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -21841,7 +21890,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.50.1",
+  "version": "4.50.3",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [