@almadar/ui 4.50.2 → 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(
@@ -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,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,
@@ -25053,7 +25063,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -25071,24 +25081,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,

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,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,
@@ -25007,7 +25017,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -25025,24 +25035,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,

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,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,
@@ -20220,7 +20230,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -20238,24 +20248,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,

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,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,
@@ -20174,7 +20184,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -20192,24 +20202,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,

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,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,
@@ -21465,7 +21475,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -21483,24 +21493,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,

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,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,
@@ -21419,7 +21429,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -21437,24 +21447,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,

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,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,
@@ -21234,7 +21244,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
@@ -21252,24 +21262,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,

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,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,
@@ -21188,7 +21198,7 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled]
+    [ownGroup, enabled, overlaySink]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
@@ -21206,24 +21216,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,

package/package.json

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