dnd-block-tree 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { useDroppable, useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, DragOverlay as DragOverlay$1, DndContext, useDraggable } from '@dnd-kit/core';
-import { memo, useCallback, useEffect, Fragment, useRef, useReducer, createContext, useContext, useState, useMemo } from 'react';
+import { memo, useCallback, useEffect, Fragment, useMemo, useRef, useReducer, createContext, useContext, useState } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 
 // src/core/types.ts
@@ -13,11 +13,8 @@ function extractBlockId(zoneId) {
 }
 
 // src/core/collision.ts
-var weightedVerticalCollision = ({
-  droppableContainers,
-  collisionRect
-}) => {
-  if (!collisionRect) return [];
+function computeCollisionScores(droppableContainers, collisionRect) {
+  const pointerX = collisionRect.left + collisionRect.width / 2;
   const pointerY = collisionRect.top + collisionRect.height / 2;
   const candidates = droppableContainers.map((container) => {
     const rect = container.rect.current;
@@ -27,11 +24,19 @@ var weightedVerticalCollision = ({
     const edgeDistance = Math.min(distanceToTop, distanceToBottom);
     const isBelowCenter = pointerY > rect.top + rect.height / 2;
     const bias = isBelowCenter ? -5 : 0;
+    const isWithinX = pointerX >= rect.left && pointerX <= rect.right;
+    let horizontalScore = 0;
+    if (isWithinX) {
+      horizontalScore = -rect.left * 0.1;
+    } else {
+      const distanceToZone = pointerX < rect.left ? rect.left - pointerX : pointerX - rect.right;
+      horizontalScore = Math.min(distanceToZone, 50);
+    }
     return {
       id: container.id,
       data: {
         droppableContainer: container,
-        value: edgeDistance + bias
+        value: edgeDistance + bias + horizontalScore
       }
     };
   }).filter((c) => c !== null);
@@ -40,8 +45,44 @@ var weightedVerticalCollision = ({
     const bValue = b.data.value;
     return aValue - bValue;
   });
+  return candidates;
+}
+var weightedVerticalCollision = ({
+  droppableContainers,
+  collisionRect
+}) => {
+  if (!collisionRect) return [];
+  const candidates = computeCollisionScores(droppableContainers, collisionRect);
   return candidates.slice(0, 1);
 };
+function createStickyCollision(threshold = 15) {
+  let currentZoneId = null;
+  const detector = ({
+    droppableContainers,
+    collisionRect
+  }) => {
+    if (!collisionRect) return [];
+    const candidates = computeCollisionScores(droppableContainers, collisionRect);
+    if (candidates.length === 0) return [];
+    const bestCandidate = candidates[0];
+    const bestScore = bestCandidate.data.value;
+    if (currentZoneId !== null) {
+      const currentCandidate = candidates.find((c) => c.id === currentZoneId);
+      if (currentCandidate) {
+        const currentScore = currentCandidate.data.value;
+        if (currentScore - bestScore < threshold) {
+          return [currentCandidate];
+        }
+      }
+    }
+    currentZoneId = bestCandidate.id;
+    return [bestCandidate];
+  };
+  detector.reset = () => {
+    currentZoneId = null;
+  };
+  return detector;
+}
 var closestCenterCollision = ({
   droppableContainers,
   collisionRect
@@ -74,38 +115,57 @@ var closestCenterCollision = ({
 };
 var DEFAULT_ACTIVATION_DISTANCE = 8;
 function useConfiguredSensors(config = {}) {
-  const { activationDistance = DEFAULT_ACTIVATION_DISTANCE } = config;
+  const {
+    activationDistance = DEFAULT_ACTIVATION_DISTANCE,
+    activationDelay,
+    tolerance
+  } = config;
+  let activationConstraint;
+  if (activationDelay !== void 0) {
+    activationConstraint = {
+      delay: activationDelay,
+      tolerance: tolerance ?? 5
+    };
+  } else {
+    activationConstraint = {
+      distance: activationDistance
+    };
+  }
   return useSensors(
     useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: activationDistance
-      }
+      activationConstraint
     }),
     useSensor(TouchSensor, {
-      activationConstraint: {
-        distance: activationDistance
-      }
+      activationConstraint
     }),
     useSensor(KeyboardSensor)
   );
 }
-function getSensorConfig(activationDistance = DEFAULT_ACTIVATION_DISTANCE) {
+function getSensorConfig(config = {}) {
+  const {
+    activationDistance = DEFAULT_ACTIVATION_DISTANCE,
+    activationDelay,
+    tolerance
+  } = config;
+  let activationConstraint;
+  if (activationDelay !== void 0) {
+    activationConstraint = {
+      delay: activationDelay,
+      tolerance: tolerance ?? 5
+    };
+  } else {
+    activationConstraint = {
+      distance: activationDistance
+    };
+  }
   return {
-    pointer: {
-      activationConstraint: {
-        distance: activationDistance
-      }
-    },
-    touch: {
-      activationConstraint: {
-        distance: activationDistance
-      }
-    }
+    pointer: { activationConstraint },
+    touch: { activationConstraint }
   };
 }
 
 // src/utils/helper.ts
-function extractUUID(id, pattern = "^(before|after|into)-") {
+function extractUUID(id, pattern = "^(before|after|into|end)-") {
   const regex = new RegExp(pattern);
   return id.replace(regex, "");
 }
@@ -145,8 +205,10 @@ function DropZoneComponent({
   useEffect(() => {
     if (isOver) handleInternalHover();
   }, [isOver, handleInternalHover]);
-  if (active?.id && extractUUID(id) === String(active.id)) return null;
-  if (activeId && extractUUID(id) === activeId) return null;
+  const zoneBlockId = extractUUID(id);
+  const isIntoZone = id.startsWith("into-");
+  if (isIntoZone && active?.id && zoneBlockId === String(active.id)) return null;
+  if (isIntoZone && activeId && zoneBlockId === activeId) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -161,10 +223,12 @@ function DropZoneComponent({
 var DropZone = memo(DropZoneComponent);
 function DraggableBlock({
   block,
-  children
+  children,
+  disabled
 }) {
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-    id: block.id
+    id: block.id,
+    disabled
   });
   return /* @__PURE__ */ jsx("div", { ref: setNodeRef, ...attributes, ...listeners, children: children({ isDragging }) });
 }
@@ -182,47 +246,49 @@ function TreeRenderer({
   dropZoneClassName,
   dropZoneActiveClassName,
   indentClassName = "ml-6 border-l border-gray-200 pl-4",
-  rootClassName = "flex flex-col gap-1"
+  rootClassName = "flex flex-col gap-1",
+  canDrag,
+  previewPosition,
+  draggedBlock
 }) {
   const items = blocksByParent.get(parentId) ?? [];
   const filteredBlocks = items.filter((block) => block.id !== activeId);
-  const firstVisibleBlockId = filteredBlocks[0]?.id;
+  const showGhostHere = previewPosition?.parentId === parentId && draggedBlock;
   const containerClass = depth === 0 ? rootClassName : indentClassName;
-  return /* @__PURE__ */ jsx("div", { className: containerClass, children: filteredBlocks.map((block) => {
-    const isContainer = containerTypes.includes(block.type);
-    const isExpanded = expandedMap[block.id] !== false;
-    const Renderer = renderers[block.type];
-    if (!Renderer) {
-      console.warn(`No renderer found for block type: ${block.type}`);
-      return null;
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      block.id === firstVisibleBlockId && /* @__PURE__ */ jsx(
-        DropZone,
-        {
-          id: `before-${block.id}`,
-          parentId: block.parentId,
-          onHover,
-          activeId,
-          className: dropZoneClassName,
-          activeClassName: dropZoneActiveClassName
-        }
-      ),
-      /* @__PURE__ */ jsx(DraggableBlock, { block, children: ({ isDragging }) => {
-        if (isContainer) {
-          const childContent = isExpanded ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx(
-              DropZone,
-              {
-                id: `into-${block.id}`,
-                parentId: block.id,
-                onHover,
-                activeId,
-                className: dropZoneClassName,
-                activeClassName: dropZoneActiveClassName
-              }
-            ),
-            /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: containerClass, children: [
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        id: parentId ? `into-${parentId}` : "root-start",
+        parentId,
+        onHover,
+        activeId,
+        className: dropZoneClassName,
+        activeClassName: dropZoneActiveClassName
+      }
+    ),
+    filteredBlocks.map((block, index) => {
+      const isContainer = containerTypes.includes(block.type);
+      const isExpanded = expandedMap[block.id] !== false;
+      const Renderer = renderers[block.type];
+      const isDragDisabled = canDrag ? !canDrag(block) : false;
+      const ghostBeforeThis = showGhostHere && previewPosition.index === index;
+      const originalIndex = items.findIndex((b) => b.id === block.id);
+      const isLastInOriginal = originalIndex === items.length - 1;
+      if (!Renderer) {
+        console.warn(`No renderer found for block type: ${block.type}`);
+        return null;
+      }
+      const GhostRenderer = draggedBlock ? renderers[draggedBlock.type] : null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        ghostBeforeThis && GhostRenderer && /* @__PURE__ */ jsx("div", { className: "opacity-50 pointer-events-none", children: GhostRenderer({
+          block: draggedBlock,
+          isDragging: true,
+          depth
+        }) }),
+        /* @__PURE__ */ jsx(DraggableBlock, { block, disabled: isDragDisabled, children: ({ isDragging }) => {
+          if (isContainer) {
+            const childContent = isExpanded ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
               TreeRenderer,
               {
                 blocks,
@@ -238,38 +304,60 @@ function TreeRenderer({
                 dropZoneClassName,
                 dropZoneActiveClassName,
                 indentClassName,
-                rootClassName
+                rootClassName,
+                canDrag,
+                previewPosition,
+                draggedBlock
               }
-            )
-          ] }) : null;
+            ) }) : null;
+            return Renderer({
+              block,
+              children: childContent,
+              isDragging,
+              depth,
+              isExpanded,
+              onToggleExpand: () => onToggleExpand(block.id)
+            });
+          }
           return Renderer({
             block,
-            children: childContent,
             isDragging,
-            depth,
-            isExpanded,
-            onToggleExpand: () => onToggleExpand(block.id)
+            depth
           });
-        }
-        return Renderer({
-          block,
-          isDragging,
-          depth
-        });
-      } }),
-      /* @__PURE__ */ jsx(
-        DropZone,
-        {
-          id: `after-${block.id}`,
-          parentId: block.parentId,
-          onHover,
-          activeId,
-          className: dropZoneClassName,
-          activeClassName: dropZoneActiveClassName
-        }
-      )
-    ] }, block.id);
-  }) });
+        } }),
+        !isLastInOriginal && /* @__PURE__ */ jsx(
+          DropZone,
+          {
+            id: `after-${block.id}`,
+            parentId: block.parentId,
+            onHover,
+            activeId,
+            className: dropZoneClassName,
+            activeClassName: dropZoneActiveClassName
+          }
+        )
+      ] }, block.id);
+    }),
+    showGhostHere && previewPosition.index >= filteredBlocks.length && draggedBlock && (() => {
+      const GhostRenderer = renderers[draggedBlock.type];
+      return GhostRenderer ? /* @__PURE__ */ jsx("div", { className: "opacity-50 pointer-events-none", children: GhostRenderer({
+        block: draggedBlock,
+        isDragging: true,
+        depth
+      }) }) : null;
+    })(),
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        id: parentId ? `end-${parentId}` : "root-end",
+        parentId,
+        onHover,
+        activeId,
+        className: dropZoneClassName,
+        activeClassName: dropZoneActiveClassName
+      }
+    )
+  ] });
 }
 function DragOverlay({
   activeBlock,
@@ -329,12 +417,15 @@ function reparentBlockIndex(state, activeId, targetZone, containerTypes = []) {
   const byParent = cloneParentMap(state.byParent);
   const dragged = byId.get(String(activeId));
   if (!dragged) return state;
+  const isRootStart = targetZone === "root-start";
+  const isRootEnd = targetZone === "root-end";
+  const isEnd = targetZone.startsWith("end-") || isRootEnd;
   const zoneTargetId = extractUUID(targetZone);
   const isAfter = targetZone.startsWith("after-");
-  const isInto = targetZone.startsWith("into-");
+  const isInto = targetZone.startsWith("into-") || isRootStart;
   const target = byId.get(zoneTargetId);
   const oldParentId = dragged.parentId ?? null;
-  const newParentId = isInto ? zoneTargetId : target?.parentId ?? null;
+  const newParentId = isRootStart || isRootEnd ? null : isInto || isEnd ? zoneTargetId : target?.parentId ?? null;
   if (containerTypes.includes(dragged.type) && newParentId !== null) {
     const newParent = byId.get(newParentId);
     if (newParent && !containerTypes.includes(newParent.type)) {
@@ -346,8 +437,12 @@ function reparentBlockIndex(state, activeId, targetZone, containerTypes = []) {
   const filtered = oldList.filter((id) => id !== dragged.id);
   byParent.set(oldParentId, filtered);
   const newList = [...byParent.get(newParentId) ?? []];
-  let insertIndex = newList.length;
-  if (!isInto) {
+  let insertIndex;
+  if (isInto) {
+    insertIndex = 0;
+  } else if (isEnd) {
+    insertIndex = newList.length;
+  } else {
     const idx = newList.indexOf(zoneTargetId);
     insertIndex = idx === -1 ? newList.length : isAfter ? idx + 1 : idx;
   }
@@ -387,6 +482,30 @@ function deleteBlockAndDescendants(state, id) {
   }
   return { byId, byParent };
 }
+function getBlockPosition(blocks, blockId) {
+  const block = blocks.find((b) => b.id === blockId);
+  if (!block) return { parentId: null, index: 0 };
+  const siblings = blocks.filter((b) => b.parentId === block.parentId);
+  const index = siblings.findIndex((b) => b.id === blockId);
+  return { parentId: block.parentId, index };
+}
+function computeInitialExpanded(blocks, containerTypes, initialExpanded) {
+  if (initialExpanded === "none") {
+    return {};
+  }
+  const expandedMap = {};
+  const containers = blocks.filter((b) => containerTypes.includes(b.type));
+  if (initialExpanded === "all" || initialExpanded === void 0) {
+    for (const container of containers) {
+      expandedMap[container.id] = true;
+    }
+  } else if (Array.isArray(initialExpanded)) {
+    for (const id of initialExpanded) {
+      expandedMap[id] = true;
+    }
+  }
+  return expandedMap;
+}
 function BlockTree({
   blocks,
   renderers,
@@ -398,17 +517,45 @@ function BlockTree({
   className = "flex flex-col gap-1",
   dropZoneClassName,
   dropZoneActiveClassName,
-  indentClassName
+  indentClassName,
+  showDropPreview = true,
+  // Callbacks
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  onDragCancel,
+  onBlockMove,
+  onExpandChange,
+  onHoverChange,
+  // Customization
+  canDrag,
+  canDrop,
+  collisionDetection,
+  sensors: sensorConfig,
+  initialExpanded
 }) {
-  const sensors = useConfiguredSensors({ activationDistance });
+  const sensors = useConfiguredSensors({
+    activationDistance: sensorConfig?.activationDistance ?? activationDistance,
+    activationDelay: sensorConfig?.activationDelay,
+    tolerance: sensorConfig?.tolerance
+  });
+  const initialExpandedMap = useMemo(
+    () => computeInitialExpanded(blocks, containerTypes, initialExpanded),
+    // Only compute on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   const stateRef = useRef({
     activeId: null,
     hoverZone: null,
-    expandedMap: {},
-    virtualState: null
+    expandedMap: initialExpandedMap,
+    virtualState: null,
+    isDragging: false
   });
   const initialBlocksRef = useRef([]);
   const cachedReorderRef = useRef(null);
+  const fromPositionRef = useRef(null);
+  const stickyCollisionRef = useRef(createStickyCollision(20));
   const [, forceRender] = useReducer((x) => x + 1, 0);
   const debouncedSetVirtual = useRef(
     debounce((newBlocks) => {
@@ -420,72 +567,218 @@ function BlockTree({
       forceRender();
     }, previewDebounce)
   ).current;
-  const effectiveIndex = stateRef.current.virtualState ?? computeNormalizedIndex(blocks);
+  const debouncedDragMove = useRef(
+    debounce((event) => {
+      onDragMove?.(event);
+    }, 50)
+  ).current;
+  const originalIndex = computeNormalizedIndex(blocks);
   const blocksByParent = /* @__PURE__ */ new Map();
-  for (const [parentId, ids] of effectiveIndex.byParent.entries()) {
+  for (const [parentId, ids] of originalIndex.byParent.entries()) {
     blocksByParent.set(
       parentId,
-      ids.map((id) => effectiveIndex.byId.get(id)).filter(Boolean)
+      ids.map((id) => originalIndex.byId.get(id)).filter(Boolean)
     );
   }
-  const activeBlock = stateRef.current.activeId ? effectiveIndex.byId.get(stateRef.current.activeId) ?? null : null;
+  const previewPosition = useMemo(() => {
+    if (!showDropPreview || !stateRef.current.virtualState || !stateRef.current.activeId) {
+      return null;
+    }
+    const virtualIndex = stateRef.current.virtualState;
+    const activeId = stateRef.current.activeId;
+    const block = virtualIndex.byId.get(activeId);
+    if (!block) return null;
+    const parentId = block.parentId ?? null;
+    const siblings = virtualIndex.byParent.get(parentId) ?? [];
+    const index = siblings.indexOf(activeId);
+    return { parentId, index };
+  }, [showDropPreview, stateRef.current.virtualState, stateRef.current.activeId]);
+  const activeBlock = stateRef.current.activeId ? originalIndex.byId.get(stateRef.current.activeId) ?? null : null;
+  const draggedBlock = activeBlock;
   const handleDragStart = useCallback((event) => {
     const id = String(event.active.id);
+    const block = blocks.find((b) => b.id === id);
+    if (!block) return;
+    if (canDrag && !canDrag(block)) {
+      return;
+    }
+    const dragEvent = {
+      block,
+      blockId: id
+    };
+    const result = onDragStart?.(dragEvent);
+    if (result === false) {
+      return;
+    }
+    fromPositionRef.current = getBlockPosition(blocks, id);
+    stickyCollisionRef.current.reset();
     stateRef.current.activeId = id;
+    stateRef.current.isDragging = true;
     initialBlocksRef.current = [...blocks];
     cachedReorderRef.current = null;
     forceRender();
-  }, [blocks]);
+  }, [blocks, canDrag, onDragStart]);
+  const handleDragMove = useCallback((event) => {
+    if (!onDragMove) return;
+    const id = stateRef.current.activeId;
+    if (!id) return;
+    const block = blocks.find((b) => b.id === id);
+    if (!block) return;
+    const moveEvent = {
+      block,
+      blockId: id,
+      overZone: stateRef.current.hoverZone,
+      coordinates: {
+        x: event.delta.x,
+        y: event.delta.y
+      }
+    };
+    debouncedDragMove(moveEvent);
+  }, [blocks, onDragMove, debouncedDragMove]);
   const handleDragOver = useCallback((event) => {
     if (!event.over) return;
     const targetZone = String(event.over.id);
     const activeId = stateRef.current.activeId;
     if (!activeId) return;
+    const activeBlock2 = blocks.find((b) => b.id === activeId);
+    const targetBlockId = extractBlockId(targetZone);
+    const targetBlock = blocks.find((b) => b.id === targetBlockId) ?? null;
+    if (canDrop && activeBlock2 && !canDrop(activeBlock2, targetZone, targetBlock)) {
+      return;
+    }
+    if (stateRef.current.hoverZone !== targetZone) {
+      const zoneType = getDropZoneType(targetZone);
+      const hoverEvent = {
+        zoneId: targetZone,
+        zoneType,
+        targetBlock
+      };
+      onHoverChange?.(hoverEvent);
+    }
     stateRef.current.hoverZone = targetZone;
     const baseIndex = computeNormalizedIndex(initialBlocksRef.current);
     const updatedIndex = reparentBlockIndex(baseIndex, activeId, targetZone, containerTypes);
     const orderedBlocks = buildOrderedBlocks(updatedIndex, containerTypes);
     cachedReorderRef.current = { targetId: targetZone, reorderedBlocks: orderedBlocks };
-    debouncedSetVirtual(orderedBlocks);
-  }, [containerTypes, debouncedSetVirtual]);
+    if (showDropPreview) {
+      debouncedSetVirtual(orderedBlocks);
+    }
+  }, [blocks, containerTypes, debouncedSetVirtual, canDrop, onHoverChange, showDropPreview]);
   const handleDragEnd = useCallback((_event) => {
     debouncedSetVirtual.cancel();
+    debouncedDragMove.cancel();
     const cached = cachedReorderRef.current;
+    const activeId = stateRef.current.activeId;
+    const activeBlockData = activeId ? blocks.find((b) => b.id === activeId) : null;
+    if (activeBlockData) {
+      const endEvent = {
+        block: activeBlockData,
+        blockId: activeId,
+        targetZone: cached?.targetId ?? null,
+        cancelled: false
+      };
+      onDragEnd?.(endEvent);
+    }
+    if (cached && activeBlockData && fromPositionRef.current) {
+      const toPosition = getBlockPosition(cached.reorderedBlocks, activeBlockData.id);
+      const moveEvent = {
+        block: activeBlockData,
+        from: fromPositionRef.current,
+        to: toPosition,
+        blocks: cached.reorderedBlocks
+      };
+      onBlockMove?.(moveEvent);
+    }
     stateRef.current.activeId = null;
     stateRef.current.hoverZone = null;
     stateRef.current.virtualState = null;
+    stateRef.current.isDragging = false;
     cachedReorderRef.current = null;
     initialBlocksRef.current = [];
+    fromPositionRef.current = null;
     if (cached && onChange) {
       onChange(cached.reorderedBlocks);
     }
     forceRender();
-  }, [debouncedSetVirtual, onChange]);
+  }, [blocks, debouncedSetVirtual, debouncedDragMove, onChange, onDragEnd, onBlockMove]);
+  const handleDragCancel = useCallback((_event) => {
+    debouncedSetVirtual.cancel();
+    debouncedDragMove.cancel();
+    const activeId = stateRef.current.activeId;
+    const activeBlockData = activeId ? blocks.find((b) => b.id === activeId) : null;
+    if (activeBlockData) {
+      const cancelEvent = {
+        block: activeBlockData,
+        blockId: activeId,
+        targetZone: null,
+        cancelled: true
+      };
+      onDragCancel?.(cancelEvent);
+      onDragEnd?.(cancelEvent);
+    }
+    stateRef.current.activeId = null;
+    stateRef.current.hoverZone = null;
+    stateRef.current.virtualState = null;
+    stateRef.current.isDragging = false;
+    cachedReorderRef.current = null;
+    initialBlocksRef.current = [];
+    fromPositionRef.current = null;
+    forceRender();
+  }, [blocks, debouncedSetVirtual, debouncedDragMove, onDragCancel, onDragEnd]);
   const handleHover = useCallback((zoneId, _parentId) => {
     const activeId = stateRef.current.activeId;
     if (!activeId) return;
+    const activeBlockData = blocks.find((b) => b.id === activeId);
+    const targetBlockId = extractBlockId(zoneId);
+    const targetBlock = blocks.find((b) => b.id === targetBlockId) ?? null;
+    if (canDrop && activeBlockData && !canDrop(activeBlockData, zoneId, targetBlock)) {
+      return;
+    }
+    if (stateRef.current.hoverZone !== zoneId) {
+      const zoneType = getDropZoneType(zoneId);
+      const hoverEvent = {
+        zoneId,
+        zoneType,
+        targetBlock
+      };
+      onHoverChange?.(hoverEvent);
+    }
     stateRef.current.hoverZone = zoneId;
     const baseIndex = computeNormalizedIndex(initialBlocksRef.current);
     const updatedIndex = reparentBlockIndex(baseIndex, activeId, zoneId, containerTypes);
     const orderedBlocks = buildOrderedBlocks(updatedIndex, containerTypes);
     cachedReorderRef.current = { targetId: zoneId, reorderedBlocks: orderedBlocks };
-    debouncedSetVirtual(orderedBlocks);
-  }, [containerTypes, debouncedSetVirtual]);
+    if (showDropPreview) {
+      debouncedSetVirtual(orderedBlocks);
+    }
+  }, [blocks, containerTypes, debouncedSetVirtual, canDrop, onHoverChange, showDropPreview]);
   const handleToggleExpand = useCallback((id) => {
+    const newExpanded = stateRef.current.expandedMap[id] === false;
     stateRef.current.expandedMap = {
       ...stateRef.current.expandedMap,
-      [id]: stateRef.current.expandedMap[id] === false
+      [id]: newExpanded
     };
+    const block = blocks.find((b) => b.id === id);
+    if (block && onExpandChange) {
+      const expandEvent = {
+        block,
+        blockId: id,
+        expanded: newExpanded
+      };
+      onExpandChange(expandEvent);
+    }
     forceRender();
-  }, []);
+  }, [blocks, onExpandChange]);
   return /* @__PURE__ */ jsxs(
     DndContext,
     {
       sensors,
-      collisionDetection: weightedVerticalCollision,
+      collisionDetection: collisionDetection ?? stickyCollisionRef.current,
       onDragStart: handleDragStart,
+      onDragMove: handleDragMove,
       onDragOver: handleDragOver,
       onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
       children: [
         /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
           TreeRenderer,
@@ -502,7 +795,10 @@ function BlockTree({
             dropZoneClassName,
             dropZoneActiveClassName,
             indentClassName,
-            rootClassName: className
+            rootClassName: className,
+            canDrag,
+            previewPosition,
+            draggedBlock
           }
         ) }),
         /* @__PURE__ */ jsx(DragOverlay, { activeBlock, children: dragOverlay })
@@ -575,7 +871,6 @@ function createBlockState() {
       reducerWithContainerTypes,
       computeNormalizedIndex(initialBlocks)
     );
-    const [lastCreatedItem, setLastCreatedItem] = useState(null);
     const blocks = useMemo(() => {
       const result = [];
       const walk = (parentId) => {
@@ -624,7 +919,6 @@ function createBlockState() {
           order: 0
         };
         dispatch({ type: "ADD_ITEM", payload: newItem });
-        setLastCreatedItem(newItem);
         return newItem;
       },
       []
@@ -647,7 +941,6 @@ function createBlockState() {
           type: "INSERT_ITEM",
           payload: { item: newItem, parentId, index: insertIndex }
         });
-        setLastCreatedItem(newItem);
         return newItem;
       },
       [state]
@@ -843,6 +1136,6 @@ function createTreeState(options = {}) {
   };
 }
 
-export { BlockTree, DragOverlay, DropZone, TreeRenderer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, computeNormalizedIndex, createBlockState, createTreeState, debounce, deleteBlockAndDescendants, extractBlockId, extractUUID, generateId, getDescendantIds, getDropZoneType, getSensorConfig, reparentBlockIndex, useConfiguredSensors, weightedVerticalCollision };
+export { BlockTree, DragOverlay, DropZone, TreeRenderer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, computeNormalizedIndex, createBlockState, createStickyCollision, createTreeState, debounce, deleteBlockAndDescendants, extractBlockId, extractUUID, generateId, getDescendantIds, getDropZoneType, getSensorConfig, reparentBlockIndex, useConfiguredSensors, weightedVerticalCollision };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map