@almadar/ui 4.50.2 → 4.50.4

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(
@@ -25025,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 {
@@ -25035,6 +25040,13 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
+      const childrenRef = React93__namespace.default.useRef(children);
+      childrenRef.current = children;
+      React93__namespace.default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(childrenRef.current);
+        return () => overlaySink(null);
+      }, [isDragging]);
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
@@ -25053,7 +25065,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -25071,24 +25083,55 @@ 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, 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, 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, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
@@ -25298,7 +25341,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -25714,7 +25757,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : 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, pointerWithin, rectIntersection, closestCorners, DndContext, 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(
@@ -24979,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 {
@@ -24989,6 +24994,13 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = useSortable({ id, data: { dndGroup: ownGroup } });
+      const childrenRef = React93__default.useRef(children);
+      childrenRef.current = children;
+      React93__default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(childrenRef.current);
+        return () => overlaySink(null);
+      }, [isDragging]);
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
@@ -25007,7 +25019,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -25025,24 +25037,55 @@ 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, 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, 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, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
@@ -25252,7 +25295,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -25668,7 +25711,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : 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(
@@ -20192,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 {
@@ -20202,6 +20207,13 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
+      const childrenRef = React75__namespace.default.useRef(children);
+      childrenRef.current = children;
+      React75__namespace.default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(childrenRef.current);
+        return () => overlaySink(null);
+      }, [isDragging]);
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
@@ -20220,7 +20232,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -20238,24 +20250,55 @@ 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, 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, 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, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
@@ -20465,7 +20508,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -20881,7 +20924,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : 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, pointerWithin, rectIntersection, closestCorners, DndContext, 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(
@@ -20146,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 {
@@ -20156,6 +20161,13 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = useSortable({ id, data: { dndGroup: ownGroup } });
+      const childrenRef = React75__default.useRef(children);
+      childrenRef.current = children;
+      React75__default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(childrenRef.current);
+        return () => overlaySink(null);
+      }, [isDragging]);
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
@@ -20174,7 +20186,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -20192,24 +20204,55 @@ 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, 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, 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, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
@@ -20419,7 +20462,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -20835,7 +20878,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

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(
@@ -21437,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 {
@@ -21447,6 +21452,13 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
+      const childrenRef = React81__namespace.default.useRef(children);
+      childrenRef.current = children;
+      React81__namespace.default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(childrenRef.current);
+        return () => overlaySink(null);
+      }, [isDragging]);
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
@@ -21465,7 +21477,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -21483,24 +21495,55 @@ 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, 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, 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, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
@@ -21710,7 +21753,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -22126,7 +22169,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : 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, pointerWithin, rectIntersection, closestCorners, DndContext, 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(
@@ -21391,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 {
@@ -21401,6 +21406,13 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = useSortable({ id, data: { dndGroup: ownGroup } });
+      const childrenRef = React81__default.useRef(children);
+      childrenRef.current = children;
+      React81__default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(childrenRef.current);
+        return () => overlaySink(null);
+      }, [isDragging]);
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
@@ -21419,7 +21431,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -21437,24 +21449,55 @@ 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, 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, 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, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
@@ -21664,7 +21707,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -22080,7 +22123,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : 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(
@@ -21206,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 {
@@ -21216,6 +21221,13 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
+      const childrenRef = React80__namespace.default.useRef(children);
+      childrenRef.current = children;
+      React80__namespace.default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(childrenRef.current);
+        return () => overlaySink(null);
+      }, [isDragging]);
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
@@ -21234,7 +21246,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -21252,24 +21264,55 @@ 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, 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, 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, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
@@ -21479,7 +21522,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -21895,7 +21938,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : 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, pointerWithin, rectIntersection, closestCorners, DndContext, 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(
@@ -21160,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 {
@@ -21170,6 +21175,13 @@ function useDataDnd(args) {
         transition,
         isDragging
       } = useSortable({ id, data: { dndGroup: ownGroup } });
+      const childrenRef = React80__default.useRef(children);
+      childrenRef.current = children;
+      React80__default.useEffect(() => {
+        if (!isDragging || !overlaySink) return;
+        overlaySink(childrenRef.current);
+        return () => overlaySink(null);
+      }, [isDragging]);
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
@@ -21188,7 +21200,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -21206,24 +21218,55 @@ 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, 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, 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, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
   );
   return {
     enabled,
@@ -21433,7 +21476,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -21849,7 +21892,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/package.json

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