@almadar/ui 4.50.4 → 4.50.6

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(
@@ -21137,10 +21138,18 @@ function useDataDnd(args) {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
-      return () => zonesRef.current.delete(zoneId);
+      dndLog.debug("zone:register:self", { zoneId, group: meta.group, itemCount: meta.itemIds.length, isRoot });
+      return () => {
+        zonesRef.current.delete(zoneId);
+        dndLog.debug("zone:unregister:self", { zoneId, group: meta.group });
+      };
     }
     target.registerZone(zoneId, meta);
-    return () => target.unregisterZone(zoneId);
+    dndLog.debug("zone:register", { zoneId, group: meta.group, itemCount: meta.itemIds.length, dropEvent: meta.dropEvent, reorderEvent: meta.reorderEvent });
+    return () => {
+      target.unregisterZone(zoneId);
+      dndLog.debug("zone:unregister", { zoneId, group: meta.group });
+    };
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = core$1.useSensors(
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -21148,10 +21157,18 @@ function useDataDnd(args) {
   );
   const collisionDetection = React80__namespace.default.useCallback((args2) => {
     const pointerCollisions = core$1.pointerWithin(args2);
-    if (pointerCollisions.length > 0) return pointerCollisions;
+    if (pointerCollisions.length > 0) {
+      dndLog.debug("collision:pointerWithin", { count: pointerCollisions.length, ids: pointerCollisions.map((c) => c.id) });
+      return pointerCollisions;
+    }
     const rectCollisions = core$1.rectIntersection(args2);
-    if (rectCollisions.length > 0) return rectCollisions;
-    return core$1.closestCorners(args2);
+    if (rectCollisions.length > 0) {
+      dndLog.debug("collision:rectIntersection", { count: rectCollisions.length, ids: rectCollisions.map((c) => c.id) });
+      return rectCollisions;
+    }
+    const cornerCollisions = core$1.closestCorners(args2);
+    dndLog.debug("collision:closestCorners", { count: cornerCollisions.length, ids: cornerCollisions.map((c) => c.id) });
+    return cornerCollisions;
   }, []);
   const findZoneByItem = React80__namespace.default.useCallback(
     (id) => {
@@ -21174,22 +21191,52 @@ function useDataDnd(args) {
   const handleDragEnd = React80__namespace.default.useCallback(
     (event) => {
       const { active, over } = event;
-      if (!over) return;
+      const allZones = Array.from(zonesRef.current.entries()).map(([id, m]) => ({ id, group: m.group, items: m.itemIds.length }));
+      dndLog.debug("dragEnd:received", {
+        activeId: active.id,
+        overId: over?.id,
+        overData: over?.data?.current,
+        zones: allZones
+      });
+      if (!over) {
+        dndLog.warn("dragEnd:abort:no-over", { activeId: active.id, reason: "no droppable under pointer at drop time \u2192 item snaps back" });
+        return;
+      }
       const sourceZone = findZoneByItem(active.id);
       const overData = over.data?.current;
       const targetGroup = overData?.dndGroup;
-      if (!sourceZone || !targetGroup) return;
+      dndLog.debug("dragEnd:resolved", { sourceGroup: sourceZone?.group, targetGroup, overDataKeys: overData ? Object.keys(overData) : null });
+      if (!sourceZone) {
+        dndLog.warn("dragEnd:abort:no-source-zone", { activeId: active.id });
+        return;
+      }
+      if (!targetGroup) {
+        dndLog.warn("dragEnd:abort:no-target-group", { overId: over.id, overData });
+        return;
+      }
       const targetZone = findZoneByGroup(targetGroup);
-      if (!targetZone) return;
+      if (!targetZone) {
+        dndLog.warn("dragEnd:abort:target-zone-not-registered", { targetGroup });
+        return;
+      }
       if (sourceZone.group !== targetZone.group) {
         if (targetZone.dropEvent) {
           const newIndex2 = targetZone.itemIds.indexOf(over.id);
+          dndLog.info("dragEnd:cross-container:emit", {
+            event: targetZone.dropEvent,
+            id: String(active.id),
+            sourceGroup: sourceZone.group,
+            targetGroup: targetZone.group,
+            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+          });
           eventBus.emit(targetZone.dropEvent, {
             id: String(active.id),
             sourceGroup: sourceZone.group,
             targetGroup: targetZone.group,
             newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
           });
+        } else {
+          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetZone.group });
         }
         return;
       }
@@ -21201,16 +21248,24 @@ function useDataDnd(args) {
         setLocalOrder(reordered);
       }
       if (sourceZone.reorderEvent) {
+        dndLog.info("dragEnd:reorder:emit", {
+          event: sourceZone.reorderEvent,
+          id: String(active.id),
+          oldIndex,
+          newIndex
+        });
         eventBus.emit(sourceZone.reorderEvent, {
           id: String(active.id),
           oldIndex,
           newIndex
         });
+      } else {
+        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceZone.group });
       }
     },
     [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,19 +21275,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = sortable.useSortable({ id, data: { dndGroup: ownGroup } });
-      const childrenRef = React80__namespace.default.useRef(children);
-      childrenRef.current = children;
-      React80__namespace.default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(childrenRef.current);
-        return () => overlaySink(null);
-      }, [isDragging]);
+      } = 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,
@@ -21246,73 +21298,91 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
+    const droppableId = `dnd-zone-${zoneId}`;
     const { setNodeRef, isOver } = core$1.useDroppable({
-      id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      id: droppableId,
+      data: sortableData
     });
+    React80__namespace.default.useEffect(() => {
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
+    }, [droppableId, isOver]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
+        "data-dnd-is-over": isOver ? "true" : "false",
         className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
   };
   const rootContextValue = React80__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
+  const handleDragStart = React80__namespace.default.useCallback((event) => {
+    const sourceZone = findZoneByItem(event.active.id);
+    dndLog.info("dragStart", {
+      activeId: event.active.id,
+      activeData: event.active.data?.current,
+      sourceGroup: sourceZone?.group,
+      zoneCount: zonesRef.current.size
+    });
+  }, [findZoneByItem]);
+  const handleDragOver = React80__namespace.default.useCallback((event) => {
+    dndLog.debug("dragOver", {
+      activeId: event.active.id,
+      overId: event.over?.id,
+      overData: event.over?.data?.current
+    });
+  }, []);
+  const handleDragCancel = React80__namespace.default.useCallback((event) => {
+    dndLog.warn("dragCancel", {
+      activeId: event.active.id,
+      reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
+    });
+  }, []);
   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(
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
           core$1.DndContext,
           {
             sensors,
             collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            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(
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
           core$1.DndContext,
           {
             sensors,
             collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              inner,
-              /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { children: overlayNode })
-            ]
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            children: inner
           }
         ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21322,12 +21392,13 @@ function useDataDnd(args) {
     orderedItems
   };
 }
-var RootCtx;
+var dndLog, RootCtx;
 var init_useDataDnd = __esm({
   "components/molecules/useDataDnd.tsx"() {
     "use client";
     init_useEventBus();
     init_Box();
+    dndLog = logger.createLogger("almadar:ui:dnd");
     RootCtx = React80__namespace.default.createContext(null);
   }
 });

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(
@@ -21091,10 +21092,18 @@ function useDataDnd(args) {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
-      return () => zonesRef.current.delete(zoneId);
+      dndLog.debug("zone:register:self", { zoneId, group: meta.group, itemCount: meta.itemIds.length, isRoot });
+      return () => {
+        zonesRef.current.delete(zoneId);
+        dndLog.debug("zone:unregister:self", { zoneId, group: meta.group });
+      };
     }
     target.registerZone(zoneId, meta);
-    return () => target.unregisterZone(zoneId);
+    dndLog.debug("zone:register", { zoneId, group: meta.group, itemCount: meta.itemIds.length, dropEvent: meta.dropEvent, reorderEvent: meta.reorderEvent });
+    return () => {
+      target.unregisterZone(zoneId);
+      dndLog.debug("zone:unregister", { zoneId, group: meta.group });
+    };
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -21102,10 +21111,18 @@ function useDataDnd(args) {
   );
   const collisionDetection = React80__default.useCallback((args2) => {
     const pointerCollisions = pointerWithin(args2);
-    if (pointerCollisions.length > 0) return pointerCollisions;
+    if (pointerCollisions.length > 0) {
+      dndLog.debug("collision:pointerWithin", { count: pointerCollisions.length, ids: pointerCollisions.map((c) => c.id) });
+      return pointerCollisions;
+    }
     const rectCollisions = rectIntersection(args2);
-    if (rectCollisions.length > 0) return rectCollisions;
-    return closestCorners(args2);
+    if (rectCollisions.length > 0) {
+      dndLog.debug("collision:rectIntersection", { count: rectCollisions.length, ids: rectCollisions.map((c) => c.id) });
+      return rectCollisions;
+    }
+    const cornerCollisions = closestCorners(args2);
+    dndLog.debug("collision:closestCorners", { count: cornerCollisions.length, ids: cornerCollisions.map((c) => c.id) });
+    return cornerCollisions;
   }, []);
   const findZoneByItem = React80__default.useCallback(
     (id) => {
@@ -21128,22 +21145,52 @@ function useDataDnd(args) {
   const handleDragEnd = React80__default.useCallback(
     (event) => {
       const { active, over } = event;
-      if (!over) return;
+      const allZones = Array.from(zonesRef.current.entries()).map(([id, m]) => ({ id, group: m.group, items: m.itemIds.length }));
+      dndLog.debug("dragEnd:received", {
+        activeId: active.id,
+        overId: over?.id,
+        overData: over?.data?.current,
+        zones: allZones
+      });
+      if (!over) {
+        dndLog.warn("dragEnd:abort:no-over", { activeId: active.id, reason: "no droppable under pointer at drop time \u2192 item snaps back" });
+        return;
+      }
       const sourceZone = findZoneByItem(active.id);
       const overData = over.data?.current;
       const targetGroup = overData?.dndGroup;
-      if (!sourceZone || !targetGroup) return;
+      dndLog.debug("dragEnd:resolved", { sourceGroup: sourceZone?.group, targetGroup, overDataKeys: overData ? Object.keys(overData) : null });
+      if (!sourceZone) {
+        dndLog.warn("dragEnd:abort:no-source-zone", { activeId: active.id });
+        return;
+      }
+      if (!targetGroup) {
+        dndLog.warn("dragEnd:abort:no-target-group", { overId: over.id, overData });
+        return;
+      }
       const targetZone = findZoneByGroup(targetGroup);
-      if (!targetZone) return;
+      if (!targetZone) {
+        dndLog.warn("dragEnd:abort:target-zone-not-registered", { targetGroup });
+        return;
+      }
       if (sourceZone.group !== targetZone.group) {
         if (targetZone.dropEvent) {
           const newIndex2 = targetZone.itemIds.indexOf(over.id);
+          dndLog.info("dragEnd:cross-container:emit", {
+            event: targetZone.dropEvent,
+            id: String(active.id),
+            sourceGroup: sourceZone.group,
+            targetGroup: targetZone.group,
+            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+          });
           eventBus.emit(targetZone.dropEvent, {
             id: String(active.id),
             sourceGroup: sourceZone.group,
             targetGroup: targetZone.group,
             newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
           });
+        } else {
+          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetZone.group });
         }
         return;
       }
@@ -21155,16 +21202,24 @@ function useDataDnd(args) {
         setLocalOrder(reordered);
       }
       if (sourceZone.reorderEvent) {
+        dndLog.info("dragEnd:reorder:emit", {
+          event: sourceZone.reorderEvent,
+          id: String(active.id),
+          oldIndex,
+          newIndex
+        });
         eventBus.emit(sourceZone.reorderEvent, {
           id: String(active.id),
           oldIndex,
           newIndex
         });
+      } else {
+        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceZone.group });
       }
     },
     [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,19 +21229,16 @@ function useDataDnd(args) {
         transform,
         transition,
         isDragging
-      } = useSortable({ id, data: { dndGroup: ownGroup } });
-      const childrenRef = React80__default.useRef(children);
-      childrenRef.current = children;
-      React80__default.useEffect(() => {
-        if (!isDragging || !overlaySink) return;
-        overlaySink(childrenRef.current);
-        return () => overlaySink(null);
-      }, [isDragging]);
+      } = 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,
@@ -21200,73 +21252,91 @@ function useDataDnd(args) {
         }
       );
     },
-    [ownGroup, enabled, overlaySink]
+    [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
+    const droppableId = `dnd-zone-${zoneId}`;
     const { setNodeRef, isOver } = useDroppable({
-      id: `dnd-zone-${zoneId}`,
-      data: { dndGroup: ownGroup }
+      id: droppableId,
+      data: sortableData
     });
+    React80__default.useEffect(() => {
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
+    }, [droppableId, isOver]);
     return /* @__PURE__ */ jsx(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
+        "data-dnd-is-over": isOver ? "true" : "false",
         className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
   };
   const rootContextValue = React80__default.useMemo(
-    () => ({ registerZone, unregisterZone, setOverlay }),
-    [registerZone, unregisterZone, setOverlay]
+    () => ({ registerZone, unregisterZone }),
+    [registerZone, unregisterZone]
   );
+  const handleDragStart = React80__default.useCallback((event) => {
+    const sourceZone = findZoneByItem(event.active.id);
+    dndLog.info("dragStart", {
+      activeId: event.active.id,
+      activeData: event.active.data?.current,
+      sourceGroup: sourceZone?.group,
+      zoneCount: zonesRef.current.size
+    });
+  }, [findZoneByItem]);
+  const handleDragOver = React80__default.useCallback((event) => {
+    dndLog.debug("dragOver", {
+      activeId: event.active.id,
+      overId: event.over?.id,
+      overData: event.over?.data?.current
+    });
+  }, []);
+  const handleDragCancel = React80__default.useCallback((event) => {
+    dndLog.warn("dragCancel", {
+      activeId: event.active.id,
+      reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
+    });
+  }, []);
   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(
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(
           DndContext,
           {
             sensors,
             collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              children,
-              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
-            ]
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            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(
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(
           DndContext,
           {
             sensors,
             collisionDetection,
-            onDragEnd: (e) => {
-              handleDragEnd(e);
-              clearOverlay();
-            },
-            onDragCancel: clearOverlay,
-            children: [
-              inner,
-              /* @__PURE__ */ jsx(DragOverlay, { children: overlayNode })
-            ]
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            children: inner
           }
         ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue, overlayNode, setOverlay]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -21276,12 +21346,13 @@ function useDataDnd(args) {
     orderedItems
   };
 }
-var RootCtx;
+var dndLog, RootCtx;
 var init_useDataDnd = __esm({
   "components/molecules/useDataDnd.tsx"() {
     "use client";
     init_useEventBus();
     init_Box();
+    dndLog = createLogger("almadar:ui:dnd");
     RootCtx = React80__default.createContext(null);
   }
 });

package/package.json

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