@almadar/ui 4.50.10 → 4.50.11

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,30 +25128,49 @@ 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;
     React93__namespace.default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder });
+    }, [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", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
+      height,
       zoneCount: zonesRef.current.size
     });
   }, [findZoneByItem]);
@@ -25162,11 +25182,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 +25205,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -25195,7 +25220,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -25203,7 +25228,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,30 +25082,49 @@ 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;
     React93__default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsx(
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder });
+    }, [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", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
+      height,
       zoneCount: zonesRef.current.size
     });
   }, [findZoneByItem]);
@@ -25116,11 +25136,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 +25159,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -25149,7 +25174,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -25157,7 +25182,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,30 +20295,49 @@ 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;
     React75__namespace.default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder });
+    }, [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", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
+      height,
       zoneCount: zonesRef.current.size
     });
   }, [findZoneByItem]);
@@ -20329,11 +20349,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 +20372,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -20362,7 +20387,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -20370,7 +20395,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,30 +20249,49 @@ 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;
     React75__default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsx(
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder });
+    }, [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", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
+      height,
       zoneCount: zonesRef.current.size
     });
   }, [findZoneByItem]);
@@ -20283,11 +20303,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 +20326,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -20316,7 +20341,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -20324,7 +20349,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,30 +21540,49 @@ 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;
     React81__namespace.default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder });
+    }, [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", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
+      height,
       zoneCount: zonesRef.current.size
     });
   }, [findZoneByItem]);
@@ -21574,11 +21594,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 +21617,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -21607,7 +21632,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -21615,7 +21640,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,30 +21494,49 @@ 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;
     React81__default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsx(
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder });
+    }, [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", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
+      height,
       zoneCount: zonesRef.current.size
     });
   }, [findZoneByItem]);
@@ -21528,11 +21548,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 +21571,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -21561,7 +21586,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -21569,7 +21594,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,30 +21309,49 @@ 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;
     React80__namespace.default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder });
+    }, [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", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
+      height,
       zoneCount: zonesRef.current.size
     });
   }, [findZoneByItem]);
@@ -21343,11 +21363,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 +21386,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -21376,7 +21401,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -21384,7 +21409,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,30 +21263,49 @@ 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;
     React80__default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsx(
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder });
+    }, [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", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
+      height,
       zoneCount: zonesRef.current.size
     });
   }, [findZoneByItem]);
@@ -21297,11 +21317,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 +21340,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -21330,7 +21355,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -21338,7 +21363,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.11",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [