@almadar/ui 4.50.10 → 4.50.12

package/dist/avl/index.cjs

@@ -24947,6 +24947,7 @@ function useDataDnd(args) {
   const unregisterZone = React93__namespace.default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [activeDrag, setActiveDrag] = React93__namespace.default.useState(null);
   const zoneId = React93__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React93__namespace.default.useMemo(
@@ -25127,33 +25128,64 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
+    const ctx = React93__namespace.default.useContext(RootCtx);
+    const activeDrag2 = ctx?.activeDrag ?? null;
+    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    dndLog.debug("dropzone:render", {
+      group: ownGroup,
+      isOver,
+      activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
+      activeDragHeight: activeDrag2?.height ?? null,
+      showForeignPlaceholder,
+      ctxAvailable: ctx != null
+    });
     React93__namespace.default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, showForeignPlaceholder]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       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
+        children: [
+          children,
+          showForeignPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              "data-dnd-placeholder": true,
+              style: { height: activeDrag2.height },
+              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
+            }
+          ) : null
+        ]
       }
     );
   };
   const rootContextValue = React93__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, activeDrag }),
+    [registerZone, unregisterZone, activeDrag]
   );
   const handleDragStart = React93__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
+    const rect = event.active.rect.current.initial;
+    const height = rect?.height && rect.height > 0 ? rect.height : 64;
+    if (sourceZone) {
+      setActiveDrag({ sourceGroup: sourceZone.group, height });
+      dndLog.info("dragStart:activeDrag:set", { sourceGroup: sourceZone.group, height, isRoot, hookZoneId: zoneId });
+    } else {
+      dndLog.warn("dragStart:no-source-zone", { activeId: event.active.id, zoneCount: zonesRef.current.size, isRoot });
+    }
     dndLog.info("dragStart", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
-      zoneCount: zonesRef.current.size
+      height,
+      zoneCount: zonesRef.current.size,
+      isRoot
     });
-  }, [findZoneByItem]);
+  }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React93__namespace.default.useCallback((event) => {
     dndLog.debug("dragOver", {
       activeId: event.active.id,
@@ -25162,11 +25194,16 @@ function useDataDnd(args) {
     });
   }, []);
   const handleDragCancel = React93__namespace.default.useCallback((event) => {
+    setActiveDrag(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
+  const handleDragEndWithCleanup = React93__namespace.default.useCallback((event) => {
+    handleDragEnd(event);
+    setActiveDrag(null);
+  }, [handleDragEnd]);
   const wrapContainer = React93__namespace.default.useCallback(
     (children) => {
       if (!enabled) return children;
@@ -25180,7 +25217,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -25195,7 +25232,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -25203,7 +25240,7 @@ function useDataDnd(args) {
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEndWithCleanup, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,

package/dist/avl/index.js

@@ -24901,6 +24901,7 @@ function useDataDnd(args) {
   const unregisterZone = React93__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [activeDrag, setActiveDrag] = React93__default.useState(null);
   const zoneId = React93__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React93__default.useMemo(
@@ -25081,33 +25082,64 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
+    const ctx = React93__default.useContext(RootCtx);
+    const activeDrag2 = ctx?.activeDrag ?? null;
+    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    dndLog.debug("dropzone:render", {
+      group: ownGroup,
+      isOver,
+      activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
+      activeDragHeight: activeDrag2?.height ?? null,
+      showForeignPlaceholder,
+      ctxAvailable: ctx != null
+    });
     React93__default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsx(
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, showForeignPlaceholder]);
+    return /* @__PURE__ */ jsxs(
       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
+        children: [
+          children,
+          showForeignPlaceholder ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              "data-dnd-placeholder": true,
+              style: { height: activeDrag2.height },
+              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
+            }
+          ) : null
+        ]
       }
     );
   };
   const rootContextValue = React93__default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, activeDrag }),
+    [registerZone, unregisterZone, activeDrag]
   );
   const handleDragStart = React93__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
+    const rect = event.active.rect.current.initial;
+    const height = rect?.height && rect.height > 0 ? rect.height : 64;
+    if (sourceZone) {
+      setActiveDrag({ sourceGroup: sourceZone.group, height });
+      dndLog.info("dragStart:activeDrag:set", { sourceGroup: sourceZone.group, height, isRoot, hookZoneId: zoneId });
+    } else {
+      dndLog.warn("dragStart:no-source-zone", { activeId: event.active.id, zoneCount: zonesRef.current.size, isRoot });
+    }
     dndLog.info("dragStart", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
-      zoneCount: zonesRef.current.size
+      height,
+      zoneCount: zonesRef.current.size,
+      isRoot
     });
-  }, [findZoneByItem]);
+  }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React93__default.useCallback((event) => {
     dndLog.debug("dragOver", {
       activeId: event.active.id,
@@ -25116,11 +25148,16 @@ function useDataDnd(args) {
     });
   }, []);
   const handleDragCancel = React93__default.useCallback((event) => {
+    setActiveDrag(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
+  const handleDragEndWithCleanup = React93__default.useCallback((event) => {
+    handleDragEnd(event);
+    setActiveDrag(null);
+  }, [handleDragEnd]);
   const wrapContainer = React93__default.useCallback(
     (children) => {
       if (!enabled) return children;
@@ -25134,7 +25171,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -25149,7 +25186,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -25157,7 +25194,7 @@ function useDataDnd(args) {
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEndWithCleanup, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,

package/dist/components/index.cjs

@@ -20114,6 +20114,7 @@ function useDataDnd(args) {
   const unregisterZone = React75__namespace.default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [activeDrag, setActiveDrag] = React75__namespace.default.useState(null);
   const zoneId = React75__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React75__namespace.default.useMemo(
@@ -20294,33 +20295,64 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
+    const ctx = React75__namespace.default.useContext(RootCtx);
+    const activeDrag2 = ctx?.activeDrag ?? null;
+    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    dndLog.debug("dropzone:render", {
+      group: ownGroup,
+      isOver,
+      activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
+      activeDragHeight: activeDrag2?.height ?? null,
+      showForeignPlaceholder,
+      ctxAvailable: ctx != null
+    });
     React75__namespace.default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, showForeignPlaceholder]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       exports.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
+        children: [
+          children,
+          showForeignPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Box,
+            {
+              "data-dnd-placeholder": true,
+              style: { height: activeDrag2.height },
+              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
+            }
+          ) : null
+        ]
       }
     );
   };
   const rootContextValue = React75__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, activeDrag }),
+    [registerZone, unregisterZone, activeDrag]
   );
   const handleDragStart = React75__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
+    const rect = event.active.rect.current.initial;
+    const height = rect?.height && rect.height > 0 ? rect.height : 64;
+    if (sourceZone) {
+      setActiveDrag({ sourceGroup: sourceZone.group, height });
+      dndLog.info("dragStart:activeDrag:set", { sourceGroup: sourceZone.group, height, isRoot, hookZoneId: zoneId });
+    } else {
+      dndLog.warn("dragStart:no-source-zone", { activeId: event.active.id, zoneCount: zonesRef.current.size, isRoot });
+    }
     dndLog.info("dragStart", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
-      zoneCount: zonesRef.current.size
+      height,
+      zoneCount: zonesRef.current.size,
+      isRoot
     });
-  }, [findZoneByItem]);
+  }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React75__namespace.default.useCallback((event) => {
     dndLog.debug("dragOver", {
       activeId: event.active.id,
@@ -20329,11 +20361,16 @@ function useDataDnd(args) {
     });
   }, []);
   const handleDragCancel = React75__namespace.default.useCallback((event) => {
+    setActiveDrag(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
+  const handleDragEndWithCleanup = React75__namespace.default.useCallback((event) => {
+    handleDragEnd(event);
+    setActiveDrag(null);
+  }, [handleDragEnd]);
   const wrapContainer = React75__namespace.default.useCallback(
     (children) => {
       if (!enabled) return children;
@@ -20347,7 +20384,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -20362,7 +20399,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -20370,7 +20407,7 @@ function useDataDnd(args) {
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEndWithCleanup, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,

package/dist/components/index.js

@@ -20068,6 +20068,7 @@ function useDataDnd(args) {
   const unregisterZone = React75__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [activeDrag, setActiveDrag] = React75__default.useState(null);
   const zoneId = React75__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React75__default.useMemo(
@@ -20248,33 +20249,64 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
+    const ctx = React75__default.useContext(RootCtx);
+    const activeDrag2 = ctx?.activeDrag ?? null;
+    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    dndLog.debug("dropzone:render", {
+      group: ownGroup,
+      isOver,
+      activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
+      activeDragHeight: activeDrag2?.height ?? null,
+      showForeignPlaceholder,
+      ctxAvailable: ctx != null
+    });
     React75__default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsx(
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, showForeignPlaceholder]);
+    return /* @__PURE__ */ jsxs(
       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
+        children: [
+          children,
+          showForeignPlaceholder ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              "data-dnd-placeholder": true,
+              style: { height: activeDrag2.height },
+              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
+            }
+          ) : null
+        ]
       }
     );
   };
   const rootContextValue = React75__default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, activeDrag }),
+    [registerZone, unregisterZone, activeDrag]
   );
   const handleDragStart = React75__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
+    const rect = event.active.rect.current.initial;
+    const height = rect?.height && rect.height > 0 ? rect.height : 64;
+    if (sourceZone) {
+      setActiveDrag({ sourceGroup: sourceZone.group, height });
+      dndLog.info("dragStart:activeDrag:set", { sourceGroup: sourceZone.group, height, isRoot, hookZoneId: zoneId });
+    } else {
+      dndLog.warn("dragStart:no-source-zone", { activeId: event.active.id, zoneCount: zonesRef.current.size, isRoot });
+    }
     dndLog.info("dragStart", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
-      zoneCount: zonesRef.current.size
+      height,
+      zoneCount: zonesRef.current.size,
+      isRoot
     });
-  }, [findZoneByItem]);
+  }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React75__default.useCallback((event) => {
     dndLog.debug("dragOver", {
       activeId: event.active.id,
@@ -20283,11 +20315,16 @@ function useDataDnd(args) {
     });
   }, []);
   const handleDragCancel = React75__default.useCallback((event) => {
+    setActiveDrag(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
+  const handleDragEndWithCleanup = React75__default.useCallback((event) => {
+    handleDragEnd(event);
+    setActiveDrag(null);
+  }, [handleDragEnd]);
   const wrapContainer = React75__default.useCallback(
     (children) => {
       if (!enabled) return children;
@@ -20301,7 +20338,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -20316,7 +20353,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -20324,7 +20361,7 @@ function useDataDnd(args) {
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEndWithCleanup, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,

package/dist/providers/index.cjs

@@ -21359,6 +21359,7 @@ function useDataDnd(args) {
   const unregisterZone = React81__namespace.default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [activeDrag, setActiveDrag] = React81__namespace.default.useState(null);
   const zoneId = React81__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React81__namespace.default.useMemo(
@@ -21539,33 +21540,64 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
+    const ctx = React81__namespace.default.useContext(RootCtx);
+    const activeDrag2 = ctx?.activeDrag ?? null;
+    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    dndLog.debug("dropzone:render", {
+      group: ownGroup,
+      isOver,
+      activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
+      activeDragHeight: activeDrag2?.height ?? null,
+      showForeignPlaceholder,
+      ctxAvailable: ctx != null
+    });
     React81__namespace.default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, showForeignPlaceholder]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       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
+        children: [
+          children,
+          showForeignPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              "data-dnd-placeholder": true,
+              style: { height: activeDrag2.height },
+              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
+            }
+          ) : null
+        ]
       }
     );
   };
   const rootContextValue = React81__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, activeDrag }),
+    [registerZone, unregisterZone, activeDrag]
   );
   const handleDragStart = React81__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
+    const rect = event.active.rect.current.initial;
+    const height = rect?.height && rect.height > 0 ? rect.height : 64;
+    if (sourceZone) {
+      setActiveDrag({ sourceGroup: sourceZone.group, height });
+      dndLog.info("dragStart:activeDrag:set", { sourceGroup: sourceZone.group, height, isRoot, hookZoneId: zoneId });
+    } else {
+      dndLog.warn("dragStart:no-source-zone", { activeId: event.active.id, zoneCount: zonesRef.current.size, isRoot });
+    }
     dndLog.info("dragStart", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
-      zoneCount: zonesRef.current.size
+      height,
+      zoneCount: zonesRef.current.size,
+      isRoot
     });
-  }, [findZoneByItem]);
+  }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React81__namespace.default.useCallback((event) => {
     dndLog.debug("dragOver", {
       activeId: event.active.id,
@@ -21574,11 +21606,16 @@ function useDataDnd(args) {
     });
   }, []);
   const handleDragCancel = React81__namespace.default.useCallback((event) => {
+    setActiveDrag(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
+  const handleDragEndWithCleanup = React81__namespace.default.useCallback((event) => {
+    handleDragEnd(event);
+    setActiveDrag(null);
+  }, [handleDragEnd]);
   const wrapContainer = React81__namespace.default.useCallback(
     (children) => {
       if (!enabled) return children;
@@ -21592,7 +21629,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -21607,7 +21644,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -21615,7 +21652,7 @@ function useDataDnd(args) {
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEndWithCleanup, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,

package/dist/providers/index.js

@@ -21313,6 +21313,7 @@ function useDataDnd(args) {
   const unregisterZone = React81__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [activeDrag, setActiveDrag] = React81__default.useState(null);
   const zoneId = React81__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React81__default.useMemo(
@@ -21493,33 +21494,64 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
+    const ctx = React81__default.useContext(RootCtx);
+    const activeDrag2 = ctx?.activeDrag ?? null;
+    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    dndLog.debug("dropzone:render", {
+      group: ownGroup,
+      isOver,
+      activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
+      activeDragHeight: activeDrag2?.height ?? null,
+      showForeignPlaceholder,
+      ctxAvailable: ctx != null
+    });
     React81__default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsx(
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, showForeignPlaceholder]);
+    return /* @__PURE__ */ jsxs(
       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
+        children: [
+          children,
+          showForeignPlaceholder ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              "data-dnd-placeholder": true,
+              style: { height: activeDrag2.height },
+              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
+            }
+          ) : null
+        ]
       }
     );
   };
   const rootContextValue = React81__default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, activeDrag }),
+    [registerZone, unregisterZone, activeDrag]
   );
   const handleDragStart = React81__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
+    const rect = event.active.rect.current.initial;
+    const height = rect?.height && rect.height > 0 ? rect.height : 64;
+    if (sourceZone) {
+      setActiveDrag({ sourceGroup: sourceZone.group, height });
+      dndLog.info("dragStart:activeDrag:set", { sourceGroup: sourceZone.group, height, isRoot, hookZoneId: zoneId });
+    } else {
+      dndLog.warn("dragStart:no-source-zone", { activeId: event.active.id, zoneCount: zonesRef.current.size, isRoot });
+    }
     dndLog.info("dragStart", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
-      zoneCount: zonesRef.current.size
+      height,
+      zoneCount: zonesRef.current.size,
+      isRoot
     });
-  }, [findZoneByItem]);
+  }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React81__default.useCallback((event) => {
     dndLog.debug("dragOver", {
       activeId: event.active.id,
@@ -21528,11 +21560,16 @@ function useDataDnd(args) {
     });
   }, []);
   const handleDragCancel = React81__default.useCallback((event) => {
+    setActiveDrag(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
+  const handleDragEndWithCleanup = React81__default.useCallback((event) => {
+    handleDragEnd(event);
+    setActiveDrag(null);
+  }, [handleDragEnd]);
   const wrapContainer = React81__default.useCallback(
     (children) => {
       if (!enabled) return children;
@@ -21546,7 +21583,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -21561,7 +21598,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -21569,7 +21606,7 @@ function useDataDnd(args) {
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEndWithCleanup, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,

package/dist/runtime/index.cjs

@@ -21128,6 +21128,7 @@ function useDataDnd(args) {
   const unregisterZone = React80__namespace.default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [activeDrag, setActiveDrag] = React80__namespace.default.useState(null);
   const zoneId = React80__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React80__namespace.default.useMemo(
@@ -21308,33 +21309,64 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
+    const ctx = React80__namespace.default.useContext(RootCtx);
+    const activeDrag2 = ctx?.activeDrag ?? null;
+    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    dndLog.debug("dropzone:render", {
+      group: ownGroup,
+      isOver,
+      activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
+      activeDragHeight: activeDrag2?.height ?? null,
+      showForeignPlaceholder,
+      ctxAvailable: ctx != null
+    });
     React80__namespace.default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, showForeignPlaceholder]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       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
+        children: [
+          children,
+          showForeignPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              "data-dnd-placeholder": true,
+              style: { height: activeDrag2.height },
+              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
+            }
+          ) : null
+        ]
       }
     );
   };
   const rootContextValue = React80__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, activeDrag }),
+    [registerZone, unregisterZone, activeDrag]
   );
   const handleDragStart = React80__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
+    const rect = event.active.rect.current.initial;
+    const height = rect?.height && rect.height > 0 ? rect.height : 64;
+    if (sourceZone) {
+      setActiveDrag({ sourceGroup: sourceZone.group, height });
+      dndLog.info("dragStart:activeDrag:set", { sourceGroup: sourceZone.group, height, isRoot, hookZoneId: zoneId });
+    } else {
+      dndLog.warn("dragStart:no-source-zone", { activeId: event.active.id, zoneCount: zonesRef.current.size, isRoot });
+    }
     dndLog.info("dragStart", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
-      zoneCount: zonesRef.current.size
+      height,
+      zoneCount: zonesRef.current.size,
+      isRoot
     });
-  }, [findZoneByItem]);
+  }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React80__namespace.default.useCallback((event) => {
     dndLog.debug("dragOver", {
       activeId: event.active.id,
@@ -21343,11 +21375,16 @@ function useDataDnd(args) {
     });
   }, []);
   const handleDragCancel = React80__namespace.default.useCallback((event) => {
+    setActiveDrag(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
+  const handleDragEndWithCleanup = React80__namespace.default.useCallback((event) => {
+    handleDragEnd(event);
+    setActiveDrag(null);
+  }, [handleDragEnd]);
   const wrapContainer = React80__namespace.default.useCallback(
     (children) => {
       if (!enabled) return children;
@@ -21361,7 +21398,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -21376,7 +21413,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -21384,7 +21421,7 @@ function useDataDnd(args) {
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEndWithCleanup, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,

package/dist/runtime/index.js

@@ -21082,6 +21082,7 @@ function useDataDnd(args) {
   const unregisterZone = React80__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [activeDrag, setActiveDrag] = React80__default.useState(null);
   const zoneId = React80__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React80__default.useMemo(
@@ -21262,33 +21263,64 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
+    const ctx = React80__default.useContext(RootCtx);
+    const activeDrag2 = ctx?.activeDrag ?? null;
+    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    dndLog.debug("dropzone:render", {
+      group: ownGroup,
+      isOver,
+      activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
+      activeDragHeight: activeDrag2?.height ?? null,
+      showForeignPlaceholder,
+      ctxAvailable: ctx != null
+    });
     React80__default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsx(
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, showForeignPlaceholder]);
+    return /* @__PURE__ */ jsxs(
       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
+        children: [
+          children,
+          showForeignPlaceholder ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              "data-dnd-placeholder": true,
+              style: { height: activeDrag2.height },
+              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
+            }
+          ) : null
+        ]
       }
     );
   };
   const rootContextValue = React80__default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, activeDrag }),
+    [registerZone, unregisterZone, activeDrag]
   );
   const handleDragStart = React80__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
+    const rect = event.active.rect.current.initial;
+    const height = rect?.height && rect.height > 0 ? rect.height : 64;
+    if (sourceZone) {
+      setActiveDrag({ sourceGroup: sourceZone.group, height });
+      dndLog.info("dragStart:activeDrag:set", { sourceGroup: sourceZone.group, height, isRoot, hookZoneId: zoneId });
+    } else {
+      dndLog.warn("dragStart:no-source-zone", { activeId: event.active.id, zoneCount: zonesRef.current.size, isRoot });
+    }
     dndLog.info("dragStart", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
-      zoneCount: zonesRef.current.size
+      height,
+      zoneCount: zonesRef.current.size,
+      isRoot
     });
-  }, [findZoneByItem]);
+  }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React80__default.useCallback((event) => {
     dndLog.debug("dragOver", {
       activeId: event.active.id,
@@ -21297,11 +21329,16 @@ function useDataDnd(args) {
     });
   }, []);
   const handleDragCancel = React80__default.useCallback((event) => {
+    setActiveDrag(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
+  const handleDragEndWithCleanup = React80__default.useCallback((event) => {
+    handleDragEnd(event);
+    setActiveDrag(null);
+  }, [handleDragEnd]);
   const wrapContainer = React80__default.useCallback(
     (children) => {
       if (!enabled) return children;
@@ -21315,7 +21352,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -21330,7 +21367,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -21338,7 +21375,7 @@ function useDataDnd(args) {
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEndWithCleanup, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,

package/package.json

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