@almadar/ui 4.50.0 → 4.50.2

package/dist/avl/index.cjs

@@ -24914,10 +24914,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable$1);
+  const isZone = Boolean(dragGroup || accepts || sortable$1);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React93__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -24959,6 +24961,13 @@ function useDataDnd(args) {
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
     core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
+  const collisionDetection = React93__namespace.default.useCallback((args2) => {
+    const pointerCollisions = core$1.pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = core$1.rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return core$1.closestCorners(args2);
+  }, []);
   const findZoneByItem = React93__namespace.default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -25055,7 +25064,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -25068,16 +25078,21 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -25161,7 +25176,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -25177,7 +25193,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -25281,7 +25298,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -25567,7 +25584,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -25582,7 +25600,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -25695,7 +25714,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/avl/index.js

@@ -34,7 +34,7 @@ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js'
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { FieldTypeSchema, isInlineTrait, isEntityCall, schemaToIR, getPage, isCircuitEvent } from '@almadar/core';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, useDroppable } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, useDroppable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, arrayMove, useSortable, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useThree, useFrame, Canvas } from '@react-three/fiber';
@@ -24868,10 +24868,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable);
+  const isZone = Boolean(dragGroup || accepts || sortable);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React93__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -24913,6 +24915,13 @@ function useDataDnd(args) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const collisionDetection = React93__default.useCallback((args2) => {
+    const pointerCollisions = pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return closestCorners(args2);
+  }, []);
   const findZoneByItem = React93__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -25009,7 +25018,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -25022,16 +25032,21 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -25115,7 +25130,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -25131,7 +25147,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -25235,7 +25252,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -25521,7 +25538,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -25536,7 +25554,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -25649,7 +25668,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/components/index.cjs

@@ -20081,10 +20081,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable$1);
+  const isZone = Boolean(dragGroup || accepts || sortable$1);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React75__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -20126,6 +20128,13 @@ function useDataDnd(args) {
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
     core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
+  const collisionDetection = React75__namespace.default.useCallback((args2) => {
+    const pointerCollisions = core$1.pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = core$1.rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return core$1.closestCorners(args2);
+  }, []);
   const findZoneByItem = React75__namespace.default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -20222,7 +20231,8 @@ function useDataDnd(args) {
       exports.Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -20235,16 +20245,21 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -20328,7 +20343,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -20344,7 +20360,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -20448,7 +20465,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -20734,7 +20751,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -20749,7 +20767,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -20862,7 +20881,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/components/index.js

@@ -35,7 +35,7 @@ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js'
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { isInlineTrait } from '@almadar/core';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, 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';
@@ -20035,10 +20035,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable);
+  const isZone = Boolean(dragGroup || accepts || sortable);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React75__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -20080,6 +20082,13 @@ function useDataDnd(args) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const collisionDetection = React75__default.useCallback((args2) => {
+    const pointerCollisions = pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return closestCorners(args2);
+  }, []);
   const findZoneByItem = React75__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -20176,7 +20185,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -20189,16 +20199,21 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -20282,7 +20297,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -20298,7 +20314,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -20402,7 +20419,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -20688,7 +20705,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -20703,7 +20721,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -20816,7 +20835,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/components/molecules/DataGrid.d.ts

@@ -103,7 +103,7 @@ export interface DataGridProps<T extends EntityRow = EntityRow> extends DataDndP
     /** Max items to show before "Show More" button. Defaults to 0 (disabled). */
     pageSize?: number;
 }
-export declare function DataGrid<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, dndItemIdField, }: DataGridProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export declare function DataGrid<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, dndItemIdField, dndRoot, }: DataGridProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 export declare namespace DataGrid {
     var displayName: string;
 }

package/dist/components/molecules/DataList.d.ts

@@ -117,7 +117,7 @@ export interface DataListProps<T extends EntityRow = EntityRow> extends DataDndP
     /** Max items to show before "Show More" button. Defaults to 5. Set to 0 to disable. */
     pageSize?: number;
 }
-export declare function DataList<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, dndItemIdField, }: DataListProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export declare function DataList<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, dndItemIdField, dndRoot, }: DataListProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 export declare namespace DataList {
     var displayName: string;
 }

package/dist/components/molecules/useDataDnd.d.ts

@@ -26,6 +26,15 @@ export interface DataDndProps {
     dropEvent?: EventKey;
     reorderEvent?: EventKey;
     dndItemIdField?: string;
+    /**
+     * Mark this container as the DnD root for its subtree. Use on an outer
+     * container (e.g. a data-grid hosting inner data-lists) when the container
+     * itself is NOT a drop target or sortable, but descendant zones need to
+     * share one DndContext so items can be dragged between them. Inner zones
+     * with `accepts` / `dragGroup` / `sortable` detect this root and skip
+     * creating their own DndContext.
+     */
+    dndRoot?: boolean;
 }
 interface UseDataDndArgs<T extends EntityRow> extends DataDndProps {
     items: readonly T[];
@@ -33,6 +42,8 @@ interface UseDataDndArgs<T extends EntityRow> extends DataDndProps {
 }
 interface UseDataDndResult<T extends EntityRow> {
     enabled: boolean;
+    /** True when this container is a sortable zone (own items are draggable). False in dndRoot-only mode. */
+    isZone: boolean;
     wrapContainer: (children: React.ReactNode) => React.ReactNode;
     SortableItem: React.FC<{
         id: UniqueIdentifier;

package/dist/providers/index.cjs

@@ -21326,10 +21326,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable$1);
+  const isZone = Boolean(dragGroup || accepts || sortable$1);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React81__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -21371,6 +21373,13 @@ function useDataDnd(args) {
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
     core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
+  const collisionDetection = React81__namespace.default.useCallback((args2) => {
+    const pointerCollisions = core$1.pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = core$1.rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return core$1.closestCorners(args2);
+  }, []);
   const findZoneByItem = React81__namespace.default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -21467,7 +21476,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -21480,16 +21490,21 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -21573,7 +21588,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21589,7 +21605,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21693,7 +21710,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -21979,7 +21996,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21994,7 +22012,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -22107,7 +22126,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/providers/index.js

@@ -36,7 +36,7 @@ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js'
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { isInlineTrait } from '@almadar/core';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, 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';
@@ -21280,10 +21280,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable);
+  const isZone = Boolean(dragGroup || accepts || sortable);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React81__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -21325,6 +21327,13 @@ function useDataDnd(args) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const collisionDetection = React81__default.useCallback((args2) => {
+    const pointerCollisions = pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return closestCorners(args2);
+  }, []);
   const findZoneByItem = React81__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -21421,7 +21430,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -21434,16 +21444,21 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -21527,7 +21542,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21543,7 +21559,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21647,7 +21664,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -21933,7 +21950,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21948,7 +21966,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -22061,7 +22080,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/runtime/index.cjs

@@ -21095,10 +21095,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable$1);
+  const isZone = Boolean(dragGroup || accepts || sortable$1);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React80__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -21140,6 +21142,13 @@ function useDataDnd(args) {
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
     core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
+  const collisionDetection = React80__namespace.default.useCallback((args2) => {
+    const pointerCollisions = core$1.pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = core$1.rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return core$1.closestCorners(args2);
+  }, []);
   const findZoneByItem = React80__namespace.default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -21236,7 +21245,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -21249,16 +21259,21 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? sortable.rectSortingStrategy : sortable.verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsxRuntime.jsx(DropZoneShell, { children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -21342,7 +21357,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21358,7 +21374,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21462,7 +21479,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -21748,7 +21765,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21763,7 +21781,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21876,7 +21895,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/dist/runtime/index.js

@@ -36,7 +36,7 @@ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js'
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { isCircuitEvent, schemaToIR, getPage, clearSchemaCache as clearSchemaCache$1, isEntityCall, isInlineTrait } from '@almadar/core';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, 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';
@@ -21049,10 +21049,12 @@ function useDataDnd(args) {
     dropEvent,
     reorderEvent,
     dndItemIdField = "id",
+    dndRoot,
     items,
     layout
   } = args;
-  const enabled = Boolean(dragGroup || accepts || sortable);
+  const isZone = Boolean(dragGroup || accepts || sortable);
+  const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
   const parentRoot = React80__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
@@ -21094,6 +21096,13 @@ function useDataDnd(args) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const collisionDetection = React80__default.useCallback((args2) => {
+    const pointerCollisions = pointerWithin(args2);
+    if (pointerCollisions.length > 0) return pointerCollisions;
+    const rectCollisions = rectIntersection(args2);
+    if (rectCollisions.length > 0) return rectCollisions;
+    return closestCorners(args2);
+  }, []);
   const findZoneByItem = React80__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -21190,7 +21199,8 @@ function useDataDnd(args) {
       Box,
       {
         ref: setNodeRef,
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg" : void 0,
+        "data-dnd-zone": ownGroup,
+        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
     );
@@ -21203,16 +21213,21 @@ function useDataDnd(args) {
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
+      if (!isZone) {
+        if (!isRoot) return children;
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children }) });
+      }
       const inner = /* @__PURE__ */ jsx(DropZoneShell, { children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy, children }) });
       if (isRoot) {
-        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd: handleDragEnd, children: inner }) });
       }
       return inner;
     },
-    [enabled, layout, sensors, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
+    isZone,
     wrapContainer,
     SortableItem,
     orderedItems
@@ -21296,7 +21311,8 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21312,7 +21328,8 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21416,7 +21433,7 @@ function DataGrid({
             const id = itemData.id || String(index);
             const isSelected = selectedIds.has(id);
             const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-            const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+            const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
             if (hasRenderProp) {
               return wrapDnd(
                 /* @__PURE__ */ jsx(
@@ -21702,7 +21719,8 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
-  dndItemIdField
+  dndItemIdField,
+  dndRoot
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -21717,7 +21735,8 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
-    dndItemIdField
+    dndItemIdField,
+    dndRoot
   });
   const allData = dnd.orderedItems;
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -21830,7 +21849,7 @@ function DataList({
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
-    const wrapDnd = (node) => dnd.enabled ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
+    const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: dndId, children: node }) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
       return wrapDnd(

package/package.json

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