@almadar/ui 4.50.14 → 4.50.16

package/dist/runtime/index.cjs

@@ -21104,11 +21104,32 @@ function useDataDnd(args) {
   const eventBus = useEventBus();
   const parentRoot = React80__namespace.default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const [localOrder, setLocalOrder] = React80__namespace.default.useState(null);
-  const orderedItems = localOrder ?? items;
-  React80__namespace.default.useEffect(() => {
-    setLocalOrder(null);
-  }, [items]);
+  const zoneId = React80__namespace.default.useId();
+  const ownGroup = dragGroup ?? accepts ?? zoneId;
+  const [optimisticOrders, setOptimisticOrders] = React80__namespace.default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React80__namespace.default.useRef(optimisticOrders);
+  optimisticOrdersRef.current = optimisticOrders;
+  const clearOptimisticOrder = React80__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}`);
@@ -21121,6 +21142,15 @@ function useDataDnd(args) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [itemIdsSignature]
   );
+  const itemsContentSig = items.map((it, idx) => String(it[dndItemIdField] ?? `__${idx}`)).join("|");
+  React80__namespace.default.useEffect(() => {
+    const root = isRoot ? null : parentRoot;
+    if (root) {
+      root.clearOptimisticOrder(ownGroup);
+    } else {
+      clearOptimisticOrder(ownGroup);
+    }
+  }, [itemsContentSig, ownGroup]);
   const zonesRef = React80__namespace.default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React80__namespace.default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
@@ -21130,11 +21160,9 @@ function useDataDnd(args) {
   }, []);
   const [activeDrag, setActiveDrag] = React80__namespace.default.useState(null);
   const [overZoneGroup, setOverZoneGroup] = React80__namespace.default.useState(null);
-  const zoneId = React80__namespace.default.useId();
-  const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React80__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]
   );
   React80__namespace.default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
@@ -21181,7 +21209,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const findZoneByGroup = React80__namespace.default.useCallback(
+  React80__namespace.default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -21193,81 +21221,76 @@ function useDataDnd(args) {
   const handleDragEnd = React80__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 = React80__namespace.default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React80__namespace.default.useCallback(
@@ -21328,30 +21351,20 @@ function useDataDnd(args) {
     React80__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(
       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(
-            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 = React80__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 = React80__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -21373,13 +21386,73 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React80__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 = React80__namespace.default.useCallback((event) => {

package/dist/runtime/index.js

@@ -37,7 +37,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 { isCircuitEvent, schemaToIR, getPage, clearSchemaCache as clearSchemaCache$1, isEntityCall, 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 { getPatternDefinition, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
@@ -21058,11 +21058,32 @@ function useDataDnd(args) {
   const eventBus = useEventBus();
   const parentRoot = React80__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const [localOrder, setLocalOrder] = React80__default.useState(null);
-  const orderedItems = localOrder ?? items;
-  React80__default.useEffect(() => {
-    setLocalOrder(null);
-  }, [items]);
+  const zoneId = React80__default.useId();
+  const ownGroup = dragGroup ?? accepts ?? zoneId;
+  const [optimisticOrders, setOptimisticOrders] = React80__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React80__default.useRef(optimisticOrders);
+  optimisticOrdersRef.current = optimisticOrders;
+  const clearOptimisticOrder = React80__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}`);
@@ -21075,6 +21096,15 @@ function useDataDnd(args) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [itemIdsSignature]
   );
+  const itemsContentSig = items.map((it, idx) => String(it[dndItemIdField] ?? `__${idx}`)).join("|");
+  React80__default.useEffect(() => {
+    const root = isRoot ? null : parentRoot;
+    if (root) {
+      root.clearOptimisticOrder(ownGroup);
+    } else {
+      clearOptimisticOrder(ownGroup);
+    }
+  }, [itemsContentSig, ownGroup]);
   const zonesRef = React80__default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React80__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
@@ -21084,11 +21114,9 @@ function useDataDnd(args) {
   }, []);
   const [activeDrag, setActiveDrag] = React80__default.useState(null);
   const [overZoneGroup, setOverZoneGroup] = React80__default.useState(null);
-  const zoneId = React80__default.useId();
-  const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React80__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]
   );
   React80__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
@@ -21135,7 +21163,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const findZoneByGroup = React80__default.useCallback(
+  React80__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -21147,81 +21175,76 @@ function useDataDnd(args) {
   const handleDragEnd = React80__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 = React80__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React80__default.useCallback(
@@ -21282,30 +21305,20 @@ function useDataDnd(args) {
     React80__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 = React80__default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
-    [registerZone, unregisterZone, activeDrag, overZoneGroup]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
   const handleDragStart = React80__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -21327,13 +21340,73 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React80__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 = React80__default.useCallback((event) => {

package/package.json

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