@almadar/ui 4.50.5 → 4.50.7

package/dist/components/index.cjs

@@ -20124,10 +20124,18 @@ function useDataDnd(args) {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
-      return () => zonesRef.current.delete(zoneId);
+      dndLog.debug("zone:register:self", { zoneId, group: meta.group, itemCount: meta.itemIds.length, isRoot });
+      return () => {
+        zonesRef.current.delete(zoneId);
+        dndLog.debug("zone:unregister:self", { zoneId, group: meta.group });
+      };
     }
     target.registerZone(zoneId, meta);
-    return () => target.unregisterZone(zoneId);
+    dndLog.debug("zone:register", { zoneId, group: meta.group, itemCount: meta.itemIds.length, dropEvent: meta.dropEvent, reorderEvent: meta.reorderEvent });
+    return () => {
+      target.unregisterZone(zoneId);
+      dndLog.debug("zone:unregister", { zoneId, group: meta.group });
+    };
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = core$1.useSensors(
     core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -20135,10 +20143,18 @@ function useDataDnd(args) {
   );
   const collisionDetection = React75__namespace.default.useCallback((args2) => {
     const pointerCollisions = core$1.pointerWithin(args2);
-    if (pointerCollisions.length > 0) return pointerCollisions;
+    if (pointerCollisions.length > 0) {
+      dndLog.debug("collision:pointerWithin", { count: pointerCollisions.length, ids: pointerCollisions.map((c) => c.id) });
+      return pointerCollisions;
+    }
     const rectCollisions = core$1.rectIntersection(args2);
-    if (rectCollisions.length > 0) return rectCollisions;
-    return core$1.closestCorners(args2);
+    if (rectCollisions.length > 0) {
+      dndLog.debug("collision:rectIntersection", { count: rectCollisions.length, ids: rectCollisions.map((c) => c.id) });
+      return rectCollisions;
+    }
+    const cornerCollisions = core$1.closestCorners(args2);
+    dndLog.debug("collision:closestCorners", { count: cornerCollisions.length, ids: cornerCollisions.map((c) => c.id) });
+    return cornerCollisions;
   }, []);
   const findZoneByItem = React75__namespace.default.useCallback(
     (id) => {
@@ -20161,22 +20177,53 @@ function useDataDnd(args) {
   const handleDragEnd = React75__namespace.default.useCallback(
     (event) => {
       const { active, over } = event;
-      if (!over) return;
+      const allZones = Array.from(zonesRef.current.entries()).map(([id, m]) => ({ id, group: m.group, items: m.itemIds.length }));
+      dndLog.debug("dragEnd:received", {
+        activeId: active.id,
+        overId: over?.id,
+        overData: over?.data?.current,
+        zones: allZones
+      });
+      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;
-      if (!sourceZone || !targetGroup) return;
+      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) return;
+      if (!targetZone) {
+        dndLog.warn("dragEnd:abort:target-zone-not-registered", { targetGroup });
+        return;
+      }
       if (sourceZone.group !== targetZone.group) {
         if (targetZone.dropEvent) {
           const newIndex2 = targetZone.itemIds.indexOf(over.id);
-          eventBus.emit(targetZone.dropEvent, {
+          const evt = `UI:${targetZone.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
           });
+          eventBus.emit(evt, {
+            id: String(active.id),
+            sourceGroup: sourceZone.group,
+            targetGroup: targetZone.group,
+            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+          });
+        } else {
+          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetZone.group });
         }
         return;
       }
@@ -20188,11 +20235,20 @@ function useDataDnd(args) {
         setLocalOrder(reordered);
       }
       if (sourceZone.reorderEvent) {
-        eventBus.emit(sourceZone.reorderEvent, {
+        const evt = `UI:${sourceZone.reorderEvent}`;
+        dndLog.info("dragEnd:reorder:emit", {
+          event: evt,
           id: String(active.id),
           oldIndex,
           newIndex
         });
+        eventBus.emit(evt, {
+          id: String(active.id),
+          oldIndex,
+          newIndex
+        });
+      } else {
+        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceZone.group });
       }
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
@@ -20233,15 +20289,20 @@ function useDataDnd(args) {
     [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
+    const droppableId = `dnd-zone-${zoneId}`;
     const { setNodeRef, isOver } = core$1.useDroppable({
-      id: `dnd-zone-${zoneId}`,
+      id: droppableId,
       data: sortableData
     });
+    React75__namespace.default.useEffect(() => {
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
+    }, [droppableId, isOver]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       exports.Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
+        "data-dnd-is-over": isOver ? "true" : "false",
         className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
@@ -20251,21 +20312,65 @@ function useDataDnd(args) {
     () => ({ registerZone, unregisterZone }),
     [registerZone, unregisterZone]
   );
+  const handleDragStart = React75__namespace.default.useCallback((event) => {
+    const sourceZone = findZoneByItem(event.active.id);
+    dndLog.info("dragStart", {
+      activeId: event.active.id,
+      activeData: event.active.data?.current,
+      sourceGroup: sourceZone?.group,
+      zoneCount: zonesRef.current.size
+    });
+  }, [findZoneByItem]);
+  const handleDragOver = React75__namespace.default.useCallback((event) => {
+    dndLog.debug("dragOver", {
+      activeId: event.active.id,
+      overId: event.over?.id,
+      overData: event.over?.data?.current
+    });
+  }, []);
+  const handleDragCancel = React75__namespace.default.useCallback((event) => {
+    dndLog.warn("dragCancel", {
+      activeId: event.active.id,
+      reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
+    });
+  }, []);
   const wrapContainer = React75__namespace.default.useCallback(
     (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 }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            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, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+          core$1.DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            children: inner
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -20275,12 +20380,13 @@ function useDataDnd(args) {
     orderedItems
   };
 }
-var RootCtx;
+var dndLog, RootCtx;
 var init_useDataDnd = __esm({
   "components/molecules/useDataDnd.tsx"() {
     "use client";
     init_useEventBus();
     init_Box();
+    dndLog = logger.createLogger("almadar:ui:dnd");
     RootCtx = React75__namespace.default.createContext(null);
   }
 });

package/dist/components/index.js

@@ -20078,10 +20078,18 @@ function useDataDnd(args) {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
-      return () => zonesRef.current.delete(zoneId);
+      dndLog.debug("zone:register:self", { zoneId, group: meta.group, itemCount: meta.itemIds.length, isRoot });
+      return () => {
+        zonesRef.current.delete(zoneId);
+        dndLog.debug("zone:unregister:self", { zoneId, group: meta.group });
+      };
     }
     target.registerZone(zoneId, meta);
-    return () => target.unregisterZone(zoneId);
+    dndLog.debug("zone:register", { zoneId, group: meta.group, itemCount: meta.itemIds.length, dropEvent: meta.dropEvent, reorderEvent: meta.reorderEvent });
+    return () => {
+      target.unregisterZone(zoneId);
+      dndLog.debug("zone:unregister", { zoneId, group: meta.group });
+    };
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -20089,10 +20097,18 @@ function useDataDnd(args) {
   );
   const collisionDetection = React75__default.useCallback((args2) => {
     const pointerCollisions = pointerWithin(args2);
-    if (pointerCollisions.length > 0) return pointerCollisions;
+    if (pointerCollisions.length > 0) {
+      dndLog.debug("collision:pointerWithin", { count: pointerCollisions.length, ids: pointerCollisions.map((c) => c.id) });
+      return pointerCollisions;
+    }
     const rectCollisions = rectIntersection(args2);
-    if (rectCollisions.length > 0) return rectCollisions;
-    return closestCorners(args2);
+    if (rectCollisions.length > 0) {
+      dndLog.debug("collision:rectIntersection", { count: rectCollisions.length, ids: rectCollisions.map((c) => c.id) });
+      return rectCollisions;
+    }
+    const cornerCollisions = closestCorners(args2);
+    dndLog.debug("collision:closestCorners", { count: cornerCollisions.length, ids: cornerCollisions.map((c) => c.id) });
+    return cornerCollisions;
   }, []);
   const findZoneByItem = React75__default.useCallback(
     (id) => {
@@ -20115,22 +20131,53 @@ function useDataDnd(args) {
   const handleDragEnd = React75__default.useCallback(
     (event) => {
       const { active, over } = event;
-      if (!over) return;
+      const allZones = Array.from(zonesRef.current.entries()).map(([id, m]) => ({ id, group: m.group, items: m.itemIds.length }));
+      dndLog.debug("dragEnd:received", {
+        activeId: active.id,
+        overId: over?.id,
+        overData: over?.data?.current,
+        zones: allZones
+      });
+      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;
-      if (!sourceZone || !targetGroup) return;
+      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) return;
+      if (!targetZone) {
+        dndLog.warn("dragEnd:abort:target-zone-not-registered", { targetGroup });
+        return;
+      }
       if (sourceZone.group !== targetZone.group) {
         if (targetZone.dropEvent) {
           const newIndex2 = targetZone.itemIds.indexOf(over.id);
-          eventBus.emit(targetZone.dropEvent, {
+          const evt = `UI:${targetZone.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
           });
+          eventBus.emit(evt, {
+            id: String(active.id),
+            sourceGroup: sourceZone.group,
+            targetGroup: targetZone.group,
+            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+          });
+        } else {
+          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetZone.group });
         }
         return;
       }
@@ -20142,11 +20189,20 @@ function useDataDnd(args) {
         setLocalOrder(reordered);
       }
       if (sourceZone.reorderEvent) {
-        eventBus.emit(sourceZone.reorderEvent, {
+        const evt = `UI:${sourceZone.reorderEvent}`;
+        dndLog.info("dragEnd:reorder:emit", {
+          event: evt,
           id: String(active.id),
           oldIndex,
           newIndex
         });
+        eventBus.emit(evt, {
+          id: String(active.id),
+          oldIndex,
+          newIndex
+        });
+      } else {
+        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceZone.group });
       }
     },
     [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
@@ -20187,15 +20243,20 @@ function useDataDnd(args) {
     [sortableData, enabled]
   );
   const DropZoneShell = ({ children }) => {
+    const droppableId = `dnd-zone-${zoneId}`;
     const { setNodeRef, isOver } = useDroppable({
-      id: `dnd-zone-${zoneId}`,
+      id: droppableId,
       data: sortableData
     });
+    React75__default.useEffect(() => {
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
+    }, [droppableId, isOver]);
     return /* @__PURE__ */ jsx(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
+        "data-dnd-is-over": isOver ? "true" : "false",
         className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children
       }
@@ -20205,21 +20266,65 @@ function useDataDnd(args) {
     () => ({ registerZone, unregisterZone }),
     [registerZone, unregisterZone]
   );
+  const handleDragStart = React75__default.useCallback((event) => {
+    const sourceZone = findZoneByItem(event.active.id);
+    dndLog.info("dragStart", {
+      activeId: event.active.id,
+      activeData: event.active.data?.current,
+      sourceGroup: sourceZone?.group,
+      zoneCount: zonesRef.current.size
+    });
+  }, [findZoneByItem]);
+  const handleDragOver = React75__default.useCallback((event) => {
+    dndLog.debug("dragOver", {
+      activeId: event.active.id,
+      overId: event.over?.id,
+      overData: event.over?.data?.current
+    });
+  }, []);
+  const handleDragCancel = React75__default.useCallback((event) => {
+    dndLog.warn("dragCancel", {
+      activeId: event.active.id,
+      reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
+    });
+  }, []);
   const wrapContainer = React75__default.useCallback(
     (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 }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            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, onDragEnd: handleDragEnd, children: inner }) });
+        return /* @__PURE__ */ jsx(RootCtx.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(
+          DndContext,
+          {
+            sensors,
+            collisionDetection,
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            children: inner
+          }
+        ) });
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragEnd, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -20229,12 +20334,13 @@ function useDataDnd(args) {
     orderedItems
   };
 }
-var RootCtx;
+var dndLog, RootCtx;
 var init_useDataDnd = __esm({
   "components/molecules/useDataDnd.tsx"() {
     "use client";
     init_useEventBus();
     init_Box();
+    dndLog = createLogger("almadar:ui:dnd");
     RootCtx = React75__default.createContext(null);
   }
 });