@almadar/ui 4.50.3 → 4.50.5

package/dist/avl/index.cjs

@@ -24928,12 +24928,17 @@ function useDataDnd(args) {
   React93__namespace.default.useEffect(() => {
     setLocalOrder(null);
   }, [items]);
+  const itemIdsSignature = orderedItems.map((it, idx) => {
+    const raw = it[dndItemIdField];
+    return String(raw ?? `__idx_${idx}`);
+  }).join("|");
   const itemIds = React93__namespace.default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
     }),
-    [orderedItems, dndItemIdField]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemIdsSignature]
   );
   const zonesRef = React93__namespace.default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React93__namespace.default.useCallback((zoneId2, meta2) => {
@@ -24942,10 +24947,6 @@ 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(
@@ -25029,7 +25030,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
-  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
+  const sortableData = React93__namespace.default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React93__namespace.default.useCallback(
     ({ id, children }) => {
       const {
@@ -25039,17 +25040,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
-      React93__namespace.default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(children);
-        return () => overlaySink(null);
-      }, [isDragging, children]);
+      } = sortable.useSortable({ id, data: sortableData });
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.4 : 1,
-        cursor: enabled ? "grab" : void 0
+        cursor: enabled ? "grab" : void 0,
+        // Lift the dragged element above siblings so its visual movement
+        // isn't hidden behind other cards / column boundaries.
+        zIndex: isDragging ? 50 : void 0,
+        position: isDragging ? "relative" : void 0
       };
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
@@ -25063,12 +25063,12 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
       id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      data: sortableData
     });
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -25081,55 +25081,24 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React93__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
   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.jsxs(
-          core$1.DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
       }
       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.jsxs(
-          core$1.DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              inner,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -25339,7 +25308,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(
@@ -25755,7 +25724,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, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, 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';
@@ -24882,12 +24882,17 @@ function useDataDnd(args) {
   React93__default.useEffect(() => {
     setLocalOrder(null);
   }, [items]);
+  const itemIdsSignature = orderedItems.map((it, idx) => {
+    const raw = it[dndItemIdField];
+    return String(raw ?? `__idx_${idx}`);
+  }).join("|");
   const itemIds = React93__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
     }),
-    [orderedItems, dndItemIdField]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemIdsSignature]
   );
   const zonesRef = React93__default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React93__default.useCallback((zoneId2, meta2) => {
@@ -24896,10 +24901,6 @@ 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(
@@ -24983,7 +24984,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
-  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
+  const sortableData = React93__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React93__default.useCallback(
     ({ id, children }) => {
       const {
@@ -24993,17 +24994,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = useSortable({ id, data: { dndGroup: ownGroup } });
-      React93__default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(children);
-        return () => overlaySink(null);
-      }, [isDragging, children]);
+      } = useSortable({ id, data: sortableData });
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.4 : 1,
-        cursor: enabled ? "grab" : void 0
+        cursor: enabled ? "grab" : void 0,
+        // Lift the dragged element above siblings so its visual movement
+        // isn't hidden behind other cards / column boundaries.
+        zIndex: isDragging ? 50 : void 0,
+        position: isDragging ? "relative" : void 0
       };
       return /* @__PURE__ */ jsx(
         Box,
@@ -25017,12 +25017,12 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
       id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      data: sortableData
     });
     return /* @__PURE__ */ jsx(
       Box,
@@ -25035,55 +25035,24 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React93__default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
   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__ */ jsxs(
-          DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
       }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        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 /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -25293,7 +25262,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(
@@ -25709,7 +25678,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

@@ -20095,12 +20095,17 @@ function useDataDnd(args) {
   React75__namespace.default.useEffect(() => {
     setLocalOrder(null);
   }, [items]);
+  const itemIdsSignature = orderedItems.map((it, idx) => {
+    const raw = it[dndItemIdField];
+    return String(raw ?? `__idx_${idx}`);
+  }).join("|");
   const itemIds = React75__namespace.default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
     }),
-    [orderedItems, dndItemIdField]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemIdsSignature]
   );
   const zonesRef = React75__namespace.default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React75__namespace.default.useCallback((zoneId2, meta2) => {
@@ -20109,10 +20114,6 @@ 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(
@@ -20196,7 +20197,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
-  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
+  const sortableData = React75__namespace.default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React75__namespace.default.useCallback(
     ({ id, children }) => {
       const {
@@ -20206,17 +20207,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
-      React75__namespace.default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(children);
-        return () => overlaySink(null);
-      }, [isDragging, children]);
+      } = sortable.useSortable({ id, data: sortableData });
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.4 : 1,
-        cursor: enabled ? "grab" : void 0
+        cursor: enabled ? "grab" : void 0,
+        // Lift the dragged element above siblings so its visual movement
+        // isn't hidden behind other cards / column boundaries.
+        zIndex: isDragging ? 50 : void 0,
+        position: isDragging ? "relative" : void 0
       };
       return /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
@@ -20230,12 +20230,12 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
       id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      data: sortableData
     });
     return /* @__PURE__ */ jsxRuntime.jsx(
       exports.Box,
@@ -20248,55 +20248,24 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React75__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
   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.jsxs(
-          core$1.DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
       }
       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.jsxs(
-          core$1.DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              inner,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -20506,7 +20475,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(
@@ -20922,7 +20891,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, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, 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';
@@ -20049,12 +20049,17 @@ function useDataDnd(args) {
   React75__default.useEffect(() => {
     setLocalOrder(null);
   }, [items]);
+  const itemIdsSignature = orderedItems.map((it, idx) => {
+    const raw = it[dndItemIdField];
+    return String(raw ?? `__idx_${idx}`);
+  }).join("|");
   const itemIds = React75__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
     }),
-    [orderedItems, dndItemIdField]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemIdsSignature]
   );
   const zonesRef = React75__default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React75__default.useCallback((zoneId2, meta2) => {
@@ -20063,10 +20068,6 @@ 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(
@@ -20150,7 +20151,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
-  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
+  const sortableData = React75__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React75__default.useCallback(
     ({ id, children }) => {
       const {
@@ -20160,17 +20161,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = useSortable({ id, data: { dndGroup: ownGroup } });
-      React75__default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(children);
-        return () => overlaySink(null);
-      }, [isDragging, children]);
+      } = useSortable({ id, data: sortableData });
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.4 : 1,
-        cursor: enabled ? "grab" : void 0
+        cursor: enabled ? "grab" : void 0,
+        // Lift the dragged element above siblings so its visual movement
+        // isn't hidden behind other cards / column boundaries.
+        zIndex: isDragging ? 50 : void 0,
+        position: isDragging ? "relative" : void 0
       };
       return /* @__PURE__ */ jsx(
         Box,
@@ -20184,12 +20184,12 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
       id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      data: sortableData
     });
     return /* @__PURE__ */ jsx(
       Box,
@@ -20202,55 +20202,24 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React75__default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
   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__ */ jsxs(
-          DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
       }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        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 /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -20460,7 +20429,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(
@@ -20876,7 +20845,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

@@ -21340,12 +21340,17 @@ function useDataDnd(args) {
   React81__namespace.default.useEffect(() => {
     setLocalOrder(null);
   }, [items]);
+  const itemIdsSignature = orderedItems.map((it, idx) => {
+    const raw = it[dndItemIdField];
+    return String(raw ?? `__idx_${idx}`);
+  }).join("|");
   const itemIds = React81__namespace.default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
     }),
-    [orderedItems, dndItemIdField]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemIdsSignature]
   );
   const zonesRef = React81__namespace.default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React81__namespace.default.useCallback((zoneId2, meta2) => {
@@ -21354,10 +21359,6 @@ 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(
@@ -21441,7 +21442,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
-  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
+  const sortableData = React81__namespace.default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React81__namespace.default.useCallback(
     ({ id, children }) => {
       const {
@@ -21451,17 +21452,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
-      React81__namespace.default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(children);
-        return () => overlaySink(null);
-      }, [isDragging, children]);
+      } = sortable.useSortable({ id, data: sortableData });
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.4 : 1,
-        cursor: enabled ? "grab" : void 0
+        cursor: enabled ? "grab" : void 0,
+        // Lift the dragged element above siblings so its visual movement
+        // isn't hidden behind other cards / column boundaries.
+        zIndex: isDragging ? 50 : void 0,
+        position: isDragging ? "relative" : void 0
       };
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
@@ -21475,12 +21475,12 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
       id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      data: sortableData
     });
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -21493,55 +21493,24 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React81__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
   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.jsxs(
-          core$1.DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
       }
       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.jsxs(
-          core$1.DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              inner,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21751,7 +21720,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(
@@ -22167,7 +22136,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, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, 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';
@@ -21294,12 +21294,17 @@ function useDataDnd(args) {
   React81__default.useEffect(() => {
     setLocalOrder(null);
   }, [items]);
+  const itemIdsSignature = orderedItems.map((it, idx) => {
+    const raw = it[dndItemIdField];
+    return String(raw ?? `__idx_${idx}`);
+  }).join("|");
   const itemIds = React81__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
     }),
-    [orderedItems, dndItemIdField]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemIdsSignature]
   );
   const zonesRef = React81__default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React81__default.useCallback((zoneId2, meta2) => {
@@ -21308,10 +21313,6 @@ 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(
@@ -21395,7 +21396,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
-  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
+  const sortableData = React81__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React81__default.useCallback(
     ({ id, children }) => {
       const {
@@ -21405,17 +21406,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = useSortable({ id, data: { dndGroup: ownGroup } });
-      React81__default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(children);
-        return () => overlaySink(null);
-      }, [isDragging, children]);
+      } = useSortable({ id, data: sortableData });
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.4 : 1,
-        cursor: enabled ? "grab" : void 0
+        cursor: enabled ? "grab" : void 0,
+        // Lift the dragged element above siblings so its visual movement
+        // isn't hidden behind other cards / column boundaries.
+        zIndex: isDragging ? 50 : void 0,
+        position: isDragging ? "relative" : void 0
       };
       return /* @__PURE__ */ jsx(
         Box,
@@ -21429,12 +21429,12 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
       id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      data: sortableData
     });
     return /* @__PURE__ */ jsx(
       Box,
@@ -21447,55 +21447,24 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React81__default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
   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__ */ jsxs(
-          DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
       }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        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 /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21705,7 +21674,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(
@@ -22121,7 +22090,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

@@ -21109,12 +21109,17 @@ function useDataDnd(args) {
   React80__namespace.default.useEffect(() => {
     setLocalOrder(null);
   }, [items]);
+  const itemIdsSignature = orderedItems.map((it, idx) => {
+    const raw = it[dndItemIdField];
+    return String(raw ?? `__idx_${idx}`);
+  }).join("|");
   const itemIds = React80__namespace.default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
     }),
-    [orderedItems, dndItemIdField]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemIdsSignature]
   );
   const zonesRef = React80__namespace.default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React80__namespace.default.useCallback((zoneId2, meta2) => {
@@ -21123,10 +21128,6 @@ 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(
@@ -21210,7 +21211,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
-  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
+  const sortableData = React80__namespace.default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React80__namespace.default.useCallback(
     ({ id, children }) => {
       const {
@@ -21220,17 +21221,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
-      React80__namespace.default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(children);
-        return () => overlaySink(null);
-      }, [isDragging, children]);
+      } = sortable.useSortable({ id, data: sortableData });
       const style = {
         transform: utilities.CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.4 : 1,
-        cursor: enabled ? "grab" : void 0
+        cursor: enabled ? "grab" : void 0,
+        // Lift the dragged element above siblings so its visual movement
+        // isn't hidden behind other cards / column boundaries.
+        zIndex: isDragging ? 50 : void 0,
+        position: isDragging ? "relative" : void 0
       };
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
@@ -21244,12 +21244,12 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = core$1.useDroppable({
       id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      data: sortableData
     });
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -21262,55 +21262,24 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React80__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
   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.jsxs(
-          core$1.DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
       }
       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.jsxs(
-          core$1.DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              inner,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21520,7 +21489,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(
@@ -21936,7 +21905,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, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, 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';
@@ -21063,12 +21063,17 @@ function useDataDnd(args) {
   React80__default.useEffect(() => {
     setLocalOrder(null);
   }, [items]);
+  const itemIdsSignature = orderedItems.map((it, idx) => {
+    const raw = it[dndItemIdField];
+    return String(raw ?? `__idx_${idx}`);
+  }).join("|");
   const itemIds = React80__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
     }),
-    [orderedItems, dndItemIdField]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemIdsSignature]
   );
   const zonesRef = React80__default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React80__default.useCallback((zoneId2, meta2) => {
@@ -21077,10 +21082,6 @@ 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(
@@ -21164,7 +21165,7 @@ function useDataDnd(args) {
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
   );
-  const overlaySink = isRoot ? setOverlay : parentRoot?.setOverlay;
+  const sortableData = React80__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React80__default.useCallback(
     ({ id, children }) => {
       const {
@@ -21174,17 +21175,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = useSortable({ id, data: { dndGroup: ownGroup } });
-      React80__default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(children);
-        return () => overlaySink(null);
-      }, [isDragging, children]);
+      } = useSortable({ id, data: sortableData });
       const style = {
         transform: CSS.Transform.toString(transform),
         transition,
         opacity: isDragging ? 0.4 : 1,
-        cursor: enabled ? "grab" : void 0
+        cursor: enabled ? "grab" : void 0,
+        // Lift the dragged element above siblings so its visual movement
+        // isn't hidden behind other cards / column boundaries.
+        zIndex: isDragging ? 50 : void 0,
+        position: isDragging ? "relative" : void 0
       };
       return /* @__PURE__ */ jsx(
         Box,
@@ -21198,12 +21198,12 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
     const { setNodeRef, isOver } = useDroppable({
       id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      data: sortableData
     });
     return /* @__PURE__ */ jsx(
       Box,
@@ -21216,55 +21216,24 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React80__default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
   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__ */ jsxs(
-          DndContext,
-          {
-            sensors,
-            collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
-            ]
-          }
-        ) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
       }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        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 /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21474,7 +21443,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(
@@ -21890,7 +21859,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.3",
+  "version": "4.50.5",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [