@almadar/ui 4.50.14 → 4.50.16

package/dist/components/index.cjs

@@ -20090,11 +20090,32 @@ function useDataDnd(args) {
   const eventBus = useEventBus();
   const parentRoot = React75__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const [localOrder, setLocalOrder] = React75__namespace.default.useState(null);
-  const orderedItems = localOrder ?? items;
-  React75__namespace.default.useEffect(() => {
-    setLocalOrder(null);
-  }, [items]);
+  const zoneId = React75__namespace.default.useId();
+  const ownGroup = dragGroup ?? accepts ?? zoneId;
+  const [optimisticOrders, setOptimisticOrders] = React75__namespace.default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React75__namespace.default.useRef(optimisticOrders);
+  optimisticOrdersRef.current = optimisticOrders;
+  const clearOptimisticOrder = React75__namespace.default.useCallback((group) => {
+    setOptimisticOrders((prev) => {
+      if (!prev.has(group)) return prev;
+      const next = new Map(prev);
+      next.delete(group);
+      return next;
+    });
+  }, []);
+  const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
@@ -20107,6 +20128,15 @@ function useDataDnd(args) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [itemIdsSignature]
   );
+  const itemsContentSig = items.map((it, idx) => String(it[dndItemIdField] ?? `__${idx}`)).join("|");
+  React75__namespace.default.useEffect(() => {
+    const root = isRoot ? null : parentRoot;
+    if (root) {
+      root.clearOptimisticOrder(ownGroup);
+    } else {
+      clearOptimisticOrder(ownGroup);
+    }
+  }, [itemsContentSig, ownGroup]);
   const zonesRef = React75__namespace.default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React75__namespace.default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
@@ -20116,11 +20146,9 @@ function useDataDnd(args) {
   }, []);
   const [activeDrag, setActiveDrag] = React75__namespace.default.useState(null);
   const [overZoneGroup, setOverZoneGroup] = React75__namespace.default.useState(null);
-  const zoneId = React75__namespace.default.useId();
-  const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React75__namespace.default.useMemo(
-    () => ({ group: ownGroup, dropEvent, reorderEvent, itemIds }),
-    [ownGroup, dropEvent, reorderEvent, itemIds]
+    () => ({ group: ownGroup, dropEvent, reorderEvent, itemIds, rawItems: items, idField: dndItemIdField }),
+    [ownGroup, dropEvent, reorderEvent, itemIds, items, dndItemIdField]
   );
   React75__namespace.default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
@@ -20167,7 +20195,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const findZoneByGroup = React75__namespace.default.useCallback(
+  React75__namespace.default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -20179,81 +20207,76 @@ function useDataDnd(args) {
   const handleDragEnd = React75__namespace.default.useCallback(
     (event) => {
       const { active, over } = event;
-      const allZones = Array.from(zonesRef.current.entries()).map(([id, m]) => ({ id, group: m.group, items: m.itemIds.length }));
+      const activeIdStr = String(active.id);
       dndLog.debug("dragEnd:received", {
         activeId: active.id,
         overId: over?.id,
-        overData: over?.data?.current,
-        zones: allZones
+        overData: over?.data?.current
       });
-      if (!over) {
-        dndLog.warn("dragEnd:abort:no-over", { activeId: active.id, reason: "no droppable under pointer at drop time \u2192 item snaps back" });
-        return;
-      }
-      const sourceZone = findZoneByItem(active.id);
-      const overData = over.data?.current;
-      const targetGroup = overData?.dndGroup;
-      dndLog.debug("dragEnd:resolved", { sourceGroup: sourceZone?.group, targetGroup, overDataKeys: overData ? Object.keys(overData) : null });
-      if (!sourceZone) {
-        dndLog.warn("dragEnd:abort:no-source-zone", { activeId: active.id });
-        return;
-      }
-      if (!targetGroup) {
-        dndLog.warn("dragEnd:abort:no-target-group", { overId: over.id, overData });
-        return;
-      }
-      const targetZone = findZoneByGroup(targetGroup);
-      if (!targetZone) {
-        dndLog.warn("dragEnd:abort:target-zone-not-registered", { targetGroup });
+      let sourceMeta;
+      let oldIndex = -1;
+      let targetMeta;
+      let newIndex = -1;
+      for (const m of zonesRef.current.values()) {
+        const rawIdx = m.rawItems.findIndex((it) => String(it[m.idField]) === activeIdStr);
+        if (rawIdx >= 0) {
+          sourceMeta = m;
+          oldIndex = rawIdx;
+        }
+        const currentItems = optimisticOrdersRef.current.get(m.group) ?? m.rawItems;
+        const curIdx = currentItems.findIndex((it) => String(it[m.idField]) === activeIdStr);
+        if (curIdx >= 0) {
+          targetMeta = m;
+          newIndex = curIdx;
+        }
+      }
+      if (!sourceMeta || !targetMeta) {
+        dndLog.warn("dragEnd:abort:no-zone-resolved", { activeId: active.id, hasSource: !!sourceMeta, hasTarget: !!targetMeta });
         return;
       }
-      if (sourceZone.group !== targetZone.group) {
-        if (targetZone.dropEvent) {
-          const newIndex2 = targetZone.itemIds.indexOf(over.id);
-          const evt = `UI:${targetZone.dropEvent}`;
+      if (sourceMeta.group !== targetMeta.group) {
+        if (targetMeta.dropEvent) {
+          const evt = `UI:${targetMeta.dropEvent}`;
           dndLog.info("dragEnd:cross-container:emit", {
             event: evt,
-            id: String(active.id),
-            sourceGroup: sourceZone.group,
-            targetGroup: targetZone.group,
-            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+            id: activeIdStr,
+            sourceGroup: sourceMeta.group,
+            targetGroup: targetMeta.group,
+            newIndex
           });
           eventBus.emit(evt, {
-            id: String(active.id),
-            sourceGroup: sourceZone.group,
-            targetGroup: targetZone.group,
-            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+            id: activeIdStr,
+            sourceGroup: sourceMeta.group,
+            targetGroup: targetMeta.group,
+            newIndex
           });
         } else {
-          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetZone.group });
+          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetMeta.group });
         }
         return;
       }
-      const oldIndex = sourceZone.itemIds.indexOf(active.id);
-      const newIndex = sourceZone.itemIds.indexOf(over.id);
-      if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return;
-      if (sourceZone.group === ownGroup) {
-        const reordered = sortable.arrayMove(orderedItems, oldIndex, newIndex);
-        setLocalOrder(reordered);
+      if (oldIndex === newIndex) {
+        dndLog.debug("dragEnd:reorder:no-op", { sourceGroup: sourceMeta.group, oldIndex });
+        return;
       }
-      if (sourceZone.reorderEvent) {
-        const evt = `UI:${sourceZone.reorderEvent}`;
+      if (sourceMeta.reorderEvent) {
+        const evt = `UI:${sourceMeta.reorderEvent}`;
         dndLog.info("dragEnd:reorder:emit", {
           event: evt,
-          id: String(active.id),
+          id: activeIdStr,
           oldIndex,
           newIndex
         });
         eventBus.emit(evt, {
-          id: String(active.id),
+          id: activeIdStr,
           oldIndex,
           newIndex
         });
       } else {
-        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceZone.group });
+        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceMeta.group });
       }
     },
-    [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
+    [eventBus]
   );
   const sortableData = React75__namespace.default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React75__namespace.default.useCallback(
@@ -20314,30 +20337,20 @@ function useDataDnd(args) {
     React75__namespace.default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       exports.Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
         "data-dnd-is-over": isThisZoneOver ? "true" : "false",
-        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
-        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
-        ]
+        className: isThisZoneOver ? "ring-2 ring-primary/40 ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        children
       }
     );
   };
   const rootContextValue = React75__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
-    [registerZone, unregisterZone, activeDrag, overZoneGroup]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
   const handleDragStart = React75__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -20359,13 +20372,73 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React75__namespace.default.useCallback((event) => {
-    const overData = event.over?.data?.current;
-    const group = overData?.dndGroup ?? null;
-    setOverZoneGroup(group);
-    dndLog.debug("dragOver", {
-      activeId: event.active.id,
-      overId: event.over?.id,
-      overGroup: group
+    const { active, over } = event;
+    const overData = over?.data?.current;
+    const overGroup = overData?.dndGroup ?? null;
+    setOverZoneGroup(overGroup);
+    if (!over || !overGroup) return;
+    const activeIdStr = String(active.id);
+    let sourceMeta;
+    let sourceGroup;
+    for (const m of zonesRef.current.values()) {
+      const currentItems = optimisticOrdersRef.current.get(m.group) ?? m.rawItems;
+      const found = currentItems.find((it) => String(it[m.idField]) === activeIdStr);
+      if (found) {
+        sourceMeta = m;
+        sourceGroup = m.group;
+        break;
+      }
+    }
+    if (!sourceMeta || !sourceGroup) {
+      dndLog.debug("dragOver:no-source-zone", { activeId: active.id });
+      return;
+    }
+    let targetMeta;
+    for (const m of zonesRef.current.values()) {
+      if (m.group === overGroup) {
+        targetMeta = m;
+        break;
+      }
+    }
+    if (!targetMeta) {
+      dndLog.debug("dragOver:no-target-zone", { overGroup });
+      return;
+    }
+    if (sourceGroup === overGroup) {
+      setOptimisticOrders((prev) => {
+        const currentItems = prev.get(sourceGroup) ?? sourceMeta.rawItems;
+        const oldIndex = currentItems.findIndex((it) => String(it[sourceMeta.idField]) === activeIdStr);
+        const newIndex = currentItems.findIndex((it) => String(it[sourceMeta.idField]) === String(over.id));
+        if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return prev;
+        const reordered = sortable.arrayMove([...currentItems], oldIndex, newIndex);
+        const next = new Map(prev);
+        next.set(sourceGroup, reordered);
+        return next;
+      });
+      return;
+    }
+    setOptimisticOrders((prev) => {
+      const currentSource = prev.get(sourceGroup) ?? sourceMeta.rawItems;
+      const currentTarget = prev.get(overGroup) ?? targetMeta.rawItems;
+      const activeItem = currentSource.find((it) => String(it[sourceMeta.idField]) === activeIdStr);
+      if (!activeItem) return prev;
+      if (currentTarget.some((it) => String(it[targetMeta.idField]) === activeIdStr)) {
+        return prev;
+      }
+      const newSource = currentSource.filter((it) => String(it[sourceMeta.idField]) !== activeIdStr);
+      const overIdStr = String(over.id);
+      const overIndex = currentTarget.findIndex((it) => String(it[targetMeta.idField]) === overIdStr);
+      const insertAt = overIndex >= 0 ? overIndex : currentTarget.length;
+      const newTarget = [
+        ...currentTarget.slice(0, insertAt),
+        activeItem,
+        ...currentTarget.slice(insertAt)
+      ];
+      const next = new Map(prev);
+      next.set(sourceGroup, newSource);
+      next.set(overGroup, newTarget);
+      dndLog.debug("dragOver:cross-zone:splice", { sourceGroup, overGroup, sourceLen: newSource.length, targetLen: newTarget.length, insertAt });
+      return next;
     });
   }, []);
   const handleDragCancel = React75__namespace.default.useCallback((event) => {

package/dist/components/index.js

@@ -36,7 +36,7 @@ import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { isInlineTrait } from '@almadar/core';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, useDroppable } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates, arrayMove, useSortable, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { sortableKeyboardCoordinates, useSortable, arrayMove, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Handle, Position } from '@xyflow/react';
 import { useUISlots } from '@almadar/ui/context';
@@ -20044,11 +20044,32 @@ function useDataDnd(args) {
   const eventBus = useEventBus();
   const parentRoot = React75__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const [localOrder, setLocalOrder] = React75__default.useState(null);
-  const orderedItems = localOrder ?? items;
-  React75__default.useEffect(() => {
-    setLocalOrder(null);
-  }, [items]);
+  const zoneId = React75__default.useId();
+  const ownGroup = dragGroup ?? accepts ?? zoneId;
+  const [optimisticOrders, setOptimisticOrders] = React75__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React75__default.useRef(optimisticOrders);
+  optimisticOrdersRef.current = optimisticOrders;
+  const clearOptimisticOrder = React75__default.useCallback((group) => {
+    setOptimisticOrders((prev) => {
+      if (!prev.has(group)) return prev;
+      const next = new Map(prev);
+      next.delete(group);
+      return next;
+    });
+  }, []);
+  const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
@@ -20061,6 +20082,15 @@ function useDataDnd(args) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [itemIdsSignature]
   );
+  const itemsContentSig = items.map((it, idx) => String(it[dndItemIdField] ?? `__${idx}`)).join("|");
+  React75__default.useEffect(() => {
+    const root = isRoot ? null : parentRoot;
+    if (root) {
+      root.clearOptimisticOrder(ownGroup);
+    } else {
+      clearOptimisticOrder(ownGroup);
+    }
+  }, [itemsContentSig, ownGroup]);
   const zonesRef = React75__default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React75__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
@@ -20070,11 +20100,9 @@ function useDataDnd(args) {
   }, []);
   const [activeDrag, setActiveDrag] = React75__default.useState(null);
   const [overZoneGroup, setOverZoneGroup] = React75__default.useState(null);
-  const zoneId = React75__default.useId();
-  const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React75__default.useMemo(
-    () => ({ group: ownGroup, dropEvent, reorderEvent, itemIds }),
-    [ownGroup, dropEvent, reorderEvent, itemIds]
+    () => ({ group: ownGroup, dropEvent, reorderEvent, itemIds, rawItems: items, idField: dndItemIdField }),
+    [ownGroup, dropEvent, reorderEvent, itemIds, items, dndItemIdField]
   );
   React75__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
@@ -20121,7 +20149,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const findZoneByGroup = React75__default.useCallback(
+  React75__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -20133,81 +20161,76 @@ function useDataDnd(args) {
   const handleDragEnd = React75__default.useCallback(
     (event) => {
       const { active, over } = event;
-      const allZones = Array.from(zonesRef.current.entries()).map(([id, m]) => ({ id, group: m.group, items: m.itemIds.length }));
+      const activeIdStr = String(active.id);
       dndLog.debug("dragEnd:received", {
         activeId: active.id,
         overId: over?.id,
-        overData: over?.data?.current,
-        zones: allZones
+        overData: over?.data?.current
       });
-      if (!over) {
-        dndLog.warn("dragEnd:abort:no-over", { activeId: active.id, reason: "no droppable under pointer at drop time \u2192 item snaps back" });
-        return;
-      }
-      const sourceZone = findZoneByItem(active.id);
-      const overData = over.data?.current;
-      const targetGroup = overData?.dndGroup;
-      dndLog.debug("dragEnd:resolved", { sourceGroup: sourceZone?.group, targetGroup, overDataKeys: overData ? Object.keys(overData) : null });
-      if (!sourceZone) {
-        dndLog.warn("dragEnd:abort:no-source-zone", { activeId: active.id });
-        return;
-      }
-      if (!targetGroup) {
-        dndLog.warn("dragEnd:abort:no-target-group", { overId: over.id, overData });
-        return;
-      }
-      const targetZone = findZoneByGroup(targetGroup);
-      if (!targetZone) {
-        dndLog.warn("dragEnd:abort:target-zone-not-registered", { targetGroup });
+      let sourceMeta;
+      let oldIndex = -1;
+      let targetMeta;
+      let newIndex = -1;
+      for (const m of zonesRef.current.values()) {
+        const rawIdx = m.rawItems.findIndex((it) => String(it[m.idField]) === activeIdStr);
+        if (rawIdx >= 0) {
+          sourceMeta = m;
+          oldIndex = rawIdx;
+        }
+        const currentItems = optimisticOrdersRef.current.get(m.group) ?? m.rawItems;
+        const curIdx = currentItems.findIndex((it) => String(it[m.idField]) === activeIdStr);
+        if (curIdx >= 0) {
+          targetMeta = m;
+          newIndex = curIdx;
+        }
+      }
+      if (!sourceMeta || !targetMeta) {
+        dndLog.warn("dragEnd:abort:no-zone-resolved", { activeId: active.id, hasSource: !!sourceMeta, hasTarget: !!targetMeta });
         return;
       }
-      if (sourceZone.group !== targetZone.group) {
-        if (targetZone.dropEvent) {
-          const newIndex2 = targetZone.itemIds.indexOf(over.id);
-          const evt = `UI:${targetZone.dropEvent}`;
+      if (sourceMeta.group !== targetMeta.group) {
+        if (targetMeta.dropEvent) {
+          const evt = `UI:${targetMeta.dropEvent}`;
           dndLog.info("dragEnd:cross-container:emit", {
             event: evt,
-            id: String(active.id),
-            sourceGroup: sourceZone.group,
-            targetGroup: targetZone.group,
-            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+            id: activeIdStr,
+            sourceGroup: sourceMeta.group,
+            targetGroup: targetMeta.group,
+            newIndex
           });
           eventBus.emit(evt, {
-            id: String(active.id),
-            sourceGroup: sourceZone.group,
-            targetGroup: targetZone.group,
-            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+            id: activeIdStr,
+            sourceGroup: sourceMeta.group,
+            targetGroup: targetMeta.group,
+            newIndex
           });
         } else {
-          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetZone.group });
+          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetMeta.group });
         }
         return;
       }
-      const oldIndex = sourceZone.itemIds.indexOf(active.id);
-      const newIndex = sourceZone.itemIds.indexOf(over.id);
-      if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return;
-      if (sourceZone.group === ownGroup) {
-        const reordered = arrayMove(orderedItems, oldIndex, newIndex);
-        setLocalOrder(reordered);
+      if (oldIndex === newIndex) {
+        dndLog.debug("dragEnd:reorder:no-op", { sourceGroup: sourceMeta.group, oldIndex });
+        return;
       }
-      if (sourceZone.reorderEvent) {
-        const evt = `UI:${sourceZone.reorderEvent}`;
+      if (sourceMeta.reorderEvent) {
+        const evt = `UI:${sourceMeta.reorderEvent}`;
         dndLog.info("dragEnd:reorder:emit", {
           event: evt,
-          id: String(active.id),
+          id: activeIdStr,
           oldIndex,
           newIndex
         });
         eventBus.emit(evt, {
-          id: String(active.id),
+          id: activeIdStr,
           oldIndex,
           newIndex
         });
       } else {
-        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceZone.group });
+        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceMeta.group });
       }
     },
-    [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
+    [eventBus]
   );
   const sortableData = React75__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React75__default.useCallback(
@@ -20268,30 +20291,20 @@ function useDataDnd(args) {
     React75__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
         "data-dnd-is-over": isThisZoneOver ? "true" : "false",
-        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
-        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
-        ]
+        className: isThisZoneOver ? "ring-2 ring-primary/40 ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        children
       }
     );
   };
   const rootContextValue = React75__default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
-    [registerZone, unregisterZone, activeDrag, overZoneGroup]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
   const handleDragStart = React75__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -20313,13 +20326,73 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React75__default.useCallback((event) => {
-    const overData = event.over?.data?.current;
-    const group = overData?.dndGroup ?? null;
-    setOverZoneGroup(group);
-    dndLog.debug("dragOver", {
-      activeId: event.active.id,
-      overId: event.over?.id,
-      overGroup: group
+    const { active, over } = event;
+    const overData = over?.data?.current;
+    const overGroup = overData?.dndGroup ?? null;
+    setOverZoneGroup(overGroup);
+    if (!over || !overGroup) return;
+    const activeIdStr = String(active.id);
+    let sourceMeta;
+    let sourceGroup;
+    for (const m of zonesRef.current.values()) {
+      const currentItems = optimisticOrdersRef.current.get(m.group) ?? m.rawItems;
+      const found = currentItems.find((it) => String(it[m.idField]) === activeIdStr);
+      if (found) {
+        sourceMeta = m;
+        sourceGroup = m.group;
+        break;
+      }
+    }
+    if (!sourceMeta || !sourceGroup) {
+      dndLog.debug("dragOver:no-source-zone", { activeId: active.id });
+      return;
+    }
+    let targetMeta;
+    for (const m of zonesRef.current.values()) {
+      if (m.group === overGroup) {
+        targetMeta = m;
+        break;
+      }
+    }
+    if (!targetMeta) {
+      dndLog.debug("dragOver:no-target-zone", { overGroup });
+      return;
+    }
+    if (sourceGroup === overGroup) {
+      setOptimisticOrders((prev) => {
+        const currentItems = prev.get(sourceGroup) ?? sourceMeta.rawItems;
+        const oldIndex = currentItems.findIndex((it) => String(it[sourceMeta.idField]) === activeIdStr);
+        const newIndex = currentItems.findIndex((it) => String(it[sourceMeta.idField]) === String(over.id));
+        if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return prev;
+        const reordered = arrayMove([...currentItems], oldIndex, newIndex);
+        const next = new Map(prev);
+        next.set(sourceGroup, reordered);
+        return next;
+      });
+      return;
+    }
+    setOptimisticOrders((prev) => {
+      const currentSource = prev.get(sourceGroup) ?? sourceMeta.rawItems;
+      const currentTarget = prev.get(overGroup) ?? targetMeta.rawItems;
+      const activeItem = currentSource.find((it) => String(it[sourceMeta.idField]) === activeIdStr);
+      if (!activeItem) return prev;
+      if (currentTarget.some((it) => String(it[targetMeta.idField]) === activeIdStr)) {
+        return prev;
+      }
+      const newSource = currentSource.filter((it) => String(it[sourceMeta.idField]) !== activeIdStr);
+      const overIdStr = String(over.id);
+      const overIndex = currentTarget.findIndex((it) => String(it[targetMeta.idField]) === overIdStr);
+      const insertAt = overIndex >= 0 ? overIndex : currentTarget.length;
+      const newTarget = [
+        ...currentTarget.slice(0, insertAt),
+        activeItem,
+        ...currentTarget.slice(insertAt)
+      ];
+      const next = new Map(prev);
+      next.set(sourceGroup, newSource);
+      next.set(overGroup, newTarget);
+      dndLog.debug("dragOver:cross-zone:splice", { sourceGroup, overGroup, sourceLen: newSource.length, targetLen: newTarget.length, insertAt });
+      return next;
     });
   }, []);
   const handleDragCancel = React75__default.useCallback((event) => {