@dnd-block-tree/vanilla 2.2.1 → 2.4.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { BaseBlock, BlockRendererProps as BlockRendererProps$1, BlockRenderers as BlockRenderers$1, OrderingStrategy, CanDragFn, CanDropFn, IdGeneratorFn, SensorConfig, BlockTreeCallbacks, ContainerRendererProps as ContainerRendererProps$1, InternalRenderers as InternalRenderers$1, RendererPropsFor as RendererPropsFor$1, BlockTreeInstance, Rect, CollisionCandidate, CoreCollisionDetection } from '@dnd-block-tree/core';
-export { AnimationConfig, AutoExpandConfig, BaseBlock, BlockAction, BlockAddEvent, BlockDeleteEvent, BlockIndex, BlockMoveEvent, BlockPosition, BlockStateContextValue, BlockTreeCallbacks, BlockTreeConfig, BlockTreeCustomization, BlockTreeEvents, BlockTreeInstance, BlockTreeOptions, CanDragFn, CanDropFn, CollisionCandidate, CollisionResult, CoreCollisionDetection, DragEndEvent, DragMoveEvent, DragStartEvent, DropZoneConfig, DropZoneType, EventEmitter, ExpandAction, ExpandChangeEvent, HistoryAction, HistoryState, HoverChangeEvent, IdGeneratorFn, MoveOperation, NestedBlock, OrderingStrategy, Rect, SensorConfig, SnapshotRectsRef, TreeValidationResult, blockReducer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockTree, createStickyCollision, debounce, deleteBlockAndDescendants, expandReducer, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSubtreeDepth, historyReducer, initFractionalOrder, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, validateBlockTree, weightedVerticalCollision } from '@dnd-block-tree/core';
+import { BaseBlock, BlockRendererProps as BlockRendererProps$1, BlockRenderers as BlockRenderers$1, OrderingStrategy, CanDragFn, CanDropFn, IdGeneratorFn, SensorConfig, BlockTreeCallbacks, ContainerRendererProps as ContainerRendererProps$1, InternalRenderers as InternalRenderers$1, RendererPropsFor as RendererPropsFor$1, BlockTreeInstance, Rect, CollisionCandidate, CoreCollisionDetection, MergeBlockVersionsOptions } from '@dnd-block-tree/core';
+export { AnimationConfig, AutoExpandConfig, BaseBlock, BlockAction, BlockAddEvent, BlockDeleteEvent, BlockIndex, BlockMoveEvent, BlockPosition, BlockStateContextValue, BlockTreeCallbacks, BlockTreeConfig, BlockTreeCustomization, BlockTreeEvents, BlockTreeInstance, BlockTreeOptions, CanDragFn, CanDropFn, CollisionCandidate, CollisionResult, CoreCollisionDetection, DragEndEvent, DragMoveEvent, DragStartEvent, DropZoneConfig, DropZoneType, EventEmitter, ExpandAction, ExpandChangeEvent, HistoryAction, HistoryState, HoverChangeEvent, IdGeneratorFn, MergeBlockVersionsOptions, MoveOperation, NestedBlock, OrderingStrategy, Rect, SensorConfig, SnapshotRectsRef, TreeValidationResult, blockReducer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockTree, createStickyCollision, debounce, deleteBlockAndDescendants, expandReducer, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSubtreeDepth, historyReducer, initFractionalOrder, mergeBlockVersions, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, validateBlockTree, weightedVerticalCollision } from '@dnd-block-tree/core';
 
 type BlockRendererProps<T extends BaseBlock = BaseBlock> = BlockRendererProps$1<T, HTMLElement>;
 type ContainerRendererProps<T extends BaseBlock = BaseBlock> = ContainerRendererProps$1<T, HTMLElement>;
@@ -54,8 +54,13 @@ interface RenderBlockContext {
 /** DefaultRenderer options */
 interface DefaultRendererOptions<T extends BaseBlock = BaseBlock> {
     container: HTMLElement;
+    containerTypes?: readonly string[];
     renderBlock: (block: T, ctx: RenderBlockContext) => HTMLElement;
     dropZoneHeight?: number;
+    dropZoneClassName?: string;
+    dropZoneActiveClassName?: string;
+    rootClassName?: string;
+    indentClassName?: string;
     animateExpand?: boolean;
 }
 /** Cleanup function */
@@ -142,6 +147,54 @@ interface BlockHistory<T extends BaseBlock> {
  */
 declare function createBlockHistory<T extends BaseBlock>(initialBlocks: T[], options?: BlockHistoryOptions): BlockHistory<T>;
 
+interface DeferredSyncOptions<T extends BaseBlock> {
+    /** Called when remote data is applied (only when not busy) */
+    onResolve?: (blocks: T[]) => void;
+    /** Options passed to mergeBlockVersions when using 'merge' strategy */
+    mergeOptions?: MergeBlockVersionsOptions;
+}
+interface DeferredSync<T extends BaseBlock> {
+    /** Whether sync is currently deferred */
+    isBusy(): boolean;
+    /** Apply remote blocks — queues if busy, calls onResolve if idle */
+    apply(remoteBlocks: T[]): void;
+    /** Enter busy state (call before editing or dragging) */
+    enterBusy(): void;
+    /**
+     * Exit busy state and resolve any queued remote changes.
+     * Returns the merged result if a queue existed, null otherwise.
+     */
+    exitBusy(localBlocks: T[], strategy: 'merge' | 'lww'): T[] | null;
+}
+/**
+ * Imperative deferred sync factory for vanilla JS.
+ * Queues remote updates during blocking actions and resolves
+ * on exit using merge or last-write-wins strategy.
+ *
+ * @param options - Configuration including onResolve callback and merge options
+ * @returns DeferredSync instance with busy/queue/flush methods
+ *
+ * @example
+ * ```ts
+ * const sync = createDeferredSync<MyBlock>({
+ *   onResolve: (blocks) => controller.setBlocks(blocks),
+ * })
+ *
+ * // In your realtime subscription:
+ * socket.on('blocks', (blocks) => sync.apply(blocks))
+ *
+ * // Drag lifecycle:
+ * controller.on('drag:statechange', ({ isDragging }) => {
+ *   if (isDragging) sync.enterBusy()
+ *   else {
+ *     const result = sync.exitBusy(controller.getBlocks(), 'lww')
+ *     if (result) socket.emit('blocks', result)
+ *   }
+ * })
+ * ```
+ */
+declare function createDeferredSync<T extends BaseBlock>(options?: DeferredSyncOptions<T>): DeferredSync<T>;
+
 interface LayoutAnimationOptions {
     duration?: number;
     easing?: string;
@@ -276,6 +329,9 @@ interface TreeRendererOptions<T extends BaseBlock> {
     renderBlock: (block: T, ctx: RenderBlockContext) => HTMLElement;
     containerTypes: readonly string[];
     dropZoneHeight?: number;
+    dropZoneClassName?: string;
+    rootClassName?: string;
+    indentClassName?: string;
 }
 /**
  * Recursive DOM tree builder. Creates the full tree DOM from blocks.
@@ -286,6 +342,7 @@ declare function renderTree<T extends BaseBlock>(blocks: T[], expandedMap: Recor
 interface DropZoneOptions {
     id: string;
     height?: number;
+    className?: string;
 }
 declare function createDropZoneElement(options: DropZoneOptions): HTMLElement;
 declare function setDropZoneActive(el: HTMLElement, active: boolean): void;
@@ -311,4 +368,4 @@ declare function createDisposable(): Disposable & {
     add(fn: () => void): void;
 };
 
-export { type BlockHistory, type BlockHistoryOptions, type BlockRendererProps, type BlockRenderers, type BlockTreeController, type BlockTreeControllerOptions, type ContainerRendererProps, type ControllerEvents, type DefaultRenderer, type DefaultRendererOptions, type Disposable, DragOverlay, type DragOverlayOptions, type DragState, type InternalRenderers, KeyboardSensor, type KeyboardSensorCallbacks, LayoutAnimation, type LayoutAnimationOptions, PointerSensor, type PointerSensorOptions, type RenderBlockContext, type RendererPropsFor, type Sensor, type SensorCallbacks, TouchSensor, type TouchSensorOptions, type TreeRendererOptions, type Unsubscribe, type VanillaSensorConfig, type VirtualRange, VirtualScroller, type VirtualScrollerOptions, buildCandidates, closestWithData, createBlockHistory, createBlockTreeController, createDefaultRenderer, createDisposable, createDropZoneElement, createElement, createGhostPreview, detectCollision, measureDropZoneRects, pointerToRect, renderTree, setDataAttributes, setDropZoneActive, triggerHaptic };
+export { type BlockHistory, type BlockHistoryOptions, type BlockRendererProps, type BlockRenderers, type BlockTreeController, type BlockTreeControllerOptions, type ContainerRendererProps, type ControllerEvents, type DefaultRenderer, type DefaultRendererOptions, type DeferredSync, type DeferredSyncOptions, type Disposable, DragOverlay, type DragOverlayOptions, type DragState, type InternalRenderers, KeyboardSensor, type KeyboardSensorCallbacks, LayoutAnimation, type LayoutAnimationOptions, PointerSensor, type PointerSensorOptions, type RenderBlockContext, type RendererPropsFor, type Sensor, type SensorCallbacks, TouchSensor, type TouchSensorOptions, type TreeRendererOptions, type Unsubscribe, type VanillaSensorConfig, type VirtualRange, VirtualScroller, type VirtualScrollerOptions, buildCandidates, closestWithData, createBlockHistory, createBlockTreeController, createDefaultRenderer, createDeferredSync, createDisposable, createDropZoneElement, createElement, createGhostPreview, detectCollision, measureDropZoneRects, pointerToRect, renderTree, setDataAttributes, setDropZoneActive, triggerHaptic };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { BaseBlock, BlockRendererProps as BlockRendererProps$1, BlockRenderers as BlockRenderers$1, OrderingStrategy, CanDragFn, CanDropFn, IdGeneratorFn, SensorConfig, BlockTreeCallbacks, ContainerRendererProps as ContainerRendererProps$1, InternalRenderers as InternalRenderers$1, RendererPropsFor as RendererPropsFor$1, BlockTreeInstance, Rect, CollisionCandidate, CoreCollisionDetection } from '@dnd-block-tree/core';
-export { AnimationConfig, AutoExpandConfig, BaseBlock, BlockAction, BlockAddEvent, BlockDeleteEvent, BlockIndex, BlockMoveEvent, BlockPosition, BlockStateContextValue, BlockTreeCallbacks, BlockTreeConfig, BlockTreeCustomization, BlockTreeEvents, BlockTreeInstance, BlockTreeOptions, CanDragFn, CanDropFn, CollisionCandidate, CollisionResult, CoreCollisionDetection, DragEndEvent, DragMoveEvent, DragStartEvent, DropZoneConfig, DropZoneType, EventEmitter, ExpandAction, ExpandChangeEvent, HistoryAction, HistoryState, HoverChangeEvent, IdGeneratorFn, MoveOperation, NestedBlock, OrderingStrategy, Rect, SensorConfig, SnapshotRectsRef, TreeValidationResult, blockReducer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockTree, createStickyCollision, debounce, deleteBlockAndDescendants, expandReducer, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSubtreeDepth, historyReducer, initFractionalOrder, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, validateBlockTree, weightedVerticalCollision } from '@dnd-block-tree/core';
+import { BaseBlock, BlockRendererProps as BlockRendererProps$1, BlockRenderers as BlockRenderers$1, OrderingStrategy, CanDragFn, CanDropFn, IdGeneratorFn, SensorConfig, BlockTreeCallbacks, ContainerRendererProps as ContainerRendererProps$1, InternalRenderers as InternalRenderers$1, RendererPropsFor as RendererPropsFor$1, BlockTreeInstance, Rect, CollisionCandidate, CoreCollisionDetection, MergeBlockVersionsOptions } from '@dnd-block-tree/core';
+export { AnimationConfig, AutoExpandConfig, BaseBlock, BlockAction, BlockAddEvent, BlockDeleteEvent, BlockIndex, BlockMoveEvent, BlockPosition, BlockStateContextValue, BlockTreeCallbacks, BlockTreeConfig, BlockTreeCustomization, BlockTreeEvents, BlockTreeInstance, BlockTreeOptions, CanDragFn, CanDropFn, CollisionCandidate, CollisionResult, CoreCollisionDetection, DragEndEvent, DragMoveEvent, DragStartEvent, DropZoneConfig, DropZoneType, EventEmitter, ExpandAction, ExpandChangeEvent, HistoryAction, HistoryState, HoverChangeEvent, IdGeneratorFn, MergeBlockVersionsOptions, MoveOperation, NestedBlock, OrderingStrategy, Rect, SensorConfig, SnapshotRectsRef, TreeValidationResult, blockReducer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockTree, createStickyCollision, debounce, deleteBlockAndDescendants, expandReducer, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSubtreeDepth, historyReducer, initFractionalOrder, mergeBlockVersions, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, validateBlockTree, weightedVerticalCollision } from '@dnd-block-tree/core';
 
 type BlockRendererProps<T extends BaseBlock = BaseBlock> = BlockRendererProps$1<T, HTMLElement>;
 type ContainerRendererProps<T extends BaseBlock = BaseBlock> = ContainerRendererProps$1<T, HTMLElement>;
@@ -54,8 +54,13 @@ interface RenderBlockContext {
 /** DefaultRenderer options */
 interface DefaultRendererOptions<T extends BaseBlock = BaseBlock> {
     container: HTMLElement;
+    containerTypes?: readonly string[];
     renderBlock: (block: T, ctx: RenderBlockContext) => HTMLElement;
     dropZoneHeight?: number;
+    dropZoneClassName?: string;
+    dropZoneActiveClassName?: string;
+    rootClassName?: string;
+    indentClassName?: string;
     animateExpand?: boolean;
 }
 /** Cleanup function */
@@ -142,6 +147,54 @@ interface BlockHistory<T extends BaseBlock> {
  */
 declare function createBlockHistory<T extends BaseBlock>(initialBlocks: T[], options?: BlockHistoryOptions): BlockHistory<T>;
 
+interface DeferredSyncOptions<T extends BaseBlock> {
+    /** Called when remote data is applied (only when not busy) */
+    onResolve?: (blocks: T[]) => void;
+    /** Options passed to mergeBlockVersions when using 'merge' strategy */
+    mergeOptions?: MergeBlockVersionsOptions;
+}
+interface DeferredSync<T extends BaseBlock> {
+    /** Whether sync is currently deferred */
+    isBusy(): boolean;
+    /** Apply remote blocks — queues if busy, calls onResolve if idle */
+    apply(remoteBlocks: T[]): void;
+    /** Enter busy state (call before editing or dragging) */
+    enterBusy(): void;
+    /**
+     * Exit busy state and resolve any queued remote changes.
+     * Returns the merged result if a queue existed, null otherwise.
+     */
+    exitBusy(localBlocks: T[], strategy: 'merge' | 'lww'): T[] | null;
+}
+/**
+ * Imperative deferred sync factory for vanilla JS.
+ * Queues remote updates during blocking actions and resolves
+ * on exit using merge or last-write-wins strategy.
+ *
+ * @param options - Configuration including onResolve callback and merge options
+ * @returns DeferredSync instance with busy/queue/flush methods
+ *
+ * @example
+ * ```ts
+ * const sync = createDeferredSync<MyBlock>({
+ *   onResolve: (blocks) => controller.setBlocks(blocks),
+ * })
+ *
+ * // In your realtime subscription:
+ * socket.on('blocks', (blocks) => sync.apply(blocks))
+ *
+ * // Drag lifecycle:
+ * controller.on('drag:statechange', ({ isDragging }) => {
+ *   if (isDragging) sync.enterBusy()
+ *   else {
+ *     const result = sync.exitBusy(controller.getBlocks(), 'lww')
+ *     if (result) socket.emit('blocks', result)
+ *   }
+ * })
+ * ```
+ */
+declare function createDeferredSync<T extends BaseBlock>(options?: DeferredSyncOptions<T>): DeferredSync<T>;
+
 interface LayoutAnimationOptions {
     duration?: number;
     easing?: string;
@@ -276,6 +329,9 @@ interface TreeRendererOptions<T extends BaseBlock> {
     renderBlock: (block: T, ctx: RenderBlockContext) => HTMLElement;
     containerTypes: readonly string[];
     dropZoneHeight?: number;
+    dropZoneClassName?: string;
+    rootClassName?: string;
+    indentClassName?: string;
 }
 /**
  * Recursive DOM tree builder. Creates the full tree DOM from blocks.
@@ -286,6 +342,7 @@ declare function renderTree<T extends BaseBlock>(blocks: T[], expandedMap: Recor
 interface DropZoneOptions {
     id: string;
     height?: number;
+    className?: string;
 }
 declare function createDropZoneElement(options: DropZoneOptions): HTMLElement;
 declare function setDropZoneActive(el: HTMLElement, active: boolean): void;
@@ -311,4 +368,4 @@ declare function createDisposable(): Disposable & {
     add(fn: () => void): void;
 };
 
-export { type BlockHistory, type BlockHistoryOptions, type BlockRendererProps, type BlockRenderers, type BlockTreeController, type BlockTreeControllerOptions, type ContainerRendererProps, type ControllerEvents, type DefaultRenderer, type DefaultRendererOptions, type Disposable, DragOverlay, type DragOverlayOptions, type DragState, type InternalRenderers, KeyboardSensor, type KeyboardSensorCallbacks, LayoutAnimation, type LayoutAnimationOptions, PointerSensor, type PointerSensorOptions, type RenderBlockContext, type RendererPropsFor, type Sensor, type SensorCallbacks, TouchSensor, type TouchSensorOptions, type TreeRendererOptions, type Unsubscribe, type VanillaSensorConfig, type VirtualRange, VirtualScroller, type VirtualScrollerOptions, buildCandidates, closestWithData, createBlockHistory, createBlockTreeController, createDefaultRenderer, createDisposable, createDropZoneElement, createElement, createGhostPreview, detectCollision, measureDropZoneRects, pointerToRect, renderTree, setDataAttributes, setDropZoneActive, triggerHaptic };
+export { type BlockHistory, type BlockHistoryOptions, type BlockRendererProps, type BlockRenderers, type BlockTreeController, type BlockTreeControllerOptions, type ContainerRendererProps, type ControllerEvents, type DefaultRenderer, type DefaultRendererOptions, type DeferredSync, type DeferredSyncOptions, type Disposable, DragOverlay, type DragOverlayOptions, type DragState, type InternalRenderers, KeyboardSensor, type KeyboardSensorCallbacks, LayoutAnimation, type LayoutAnimationOptions, PointerSensor, type PointerSensorOptions, type RenderBlockContext, type RendererPropsFor, type Sensor, type SensorCallbacks, TouchSensor, type TouchSensorOptions, type TreeRendererOptions, type Unsubscribe, type VanillaSensorConfig, type VirtualRange, VirtualScroller, type VirtualScrollerOptions, buildCandidates, closestWithData, createBlockHistory, createBlockTreeController, createDefaultRenderer, createDeferredSync, createDisposable, createDropZoneElement, createElement, createGhostPreview, detectCollision, measureDropZoneRects, pointerToRect, renderTree, setDataAttributes, setDropZoneActive, triggerHaptic };

package/dist/index.js

@@ -55,6 +55,8 @@ var DragOverlay = class {
     const overlay = document.createElement("div");
     overlay.setAttribute("data-drag-overlay", "true");
     overlay.style.position = "fixed";
+    overlay.style.left = "0";
+    overlay.style.top = "0";
     overlay.style.zIndex = "9999";
     overlay.style.pointerEvents = "none";
     overlay.style.opacity = "0.7";
@@ -380,11 +382,11 @@ function createBlockTreeController(options = {}) {
   const draggableElements = /* @__PURE__ */ new Map();
   const dropZoneElements = /* @__PURE__ */ new Map();
   let snapshotRects = null;
+  let dragFromPosition = null;
   const selectedIds = /* @__PURE__ */ new Set();
   let lastSelectedId = null;
   const activeSensors = [];
-  const overlay = new DragOverlay();
-  let overlayRenderer = null;
+  let overlay = new DragOverlay();
   let history = null;
   tree.on("blocks:change", (blocks) => {
     onChange?.(blocks);
@@ -417,18 +419,26 @@ function createBlockTreeController(options = {}) {
   const sensorCallbacks = {
     onDragStart(blockId, x, y) {
       const draggedIds = selectedIds.has(blockId) && selectedIds.size > 1 ? [...selectedIds] : [blockId];
+      const blocks = tree.getBlocks();
+      const dragBlock = blocks.find((b) => b.id === blockId);
+      if (dragBlock) {
+        const siblings = blocks.filter((b) => b.parentId === dragBlock.parentId);
+        dragFromPosition = {
+          parentId: dragBlock.parentId,
+          index: siblings.findIndex((b) => b.id === blockId)
+        };
+      }
       const started = tree.startDrag(blockId, draggedIds);
-      if (!started) return;
+      if (!started) {
+        dragFromPosition = null;
+        return;
+      }
       stickyCollision.reset();
       snapshotRects = measureDropZoneRects(dropZoneElements);
       const block = tree.getBlock(blockId);
       const el = draggableElements.get(blockId);
       if (block && el) {
-        if (overlayRenderer) {
-          overlay.show(block, el, x, y);
-        } else {
-          overlay.show(block, el, x, y);
-        }
+        overlay.show(block, el, x, y);
       }
       emitter.emit("drag:statechange", getDragState());
     },
@@ -439,22 +449,35 @@ function createBlockTreeController(options = {}) {
       if (!detector) return;
       const targetZone = detectCollision(detector, snapshotRects, x, y);
       if (targetZone) {
+        const prevHover = tree.getHoverZone();
         tree.updateDrag(targetZone);
+        if (tree.getHoverZone() !== prevHover) {
+          emitter.emit("drag:statechange", getDragState());
+        }
       }
     },
     onDragEnd(_x, _y) {
+      const draggedBlockIds = selectedIds.size > 1 ? [...selectedIds] : [];
+      const activeDragId = tree.getActiveId();
       const result = tree.endDrag();
       overlay.hide();
       snapshotRects = null;
-      if (result && callbacks?.onBlockMove) {
-        callbacks.onBlockMove({
-          block: tree.getBlock(tree.getBlocks()[0]?.id),
-          from: { parentId: null, index: 0 },
-          to: { parentId: null, index: 0 },
-          blocks: result.blocks,
-          movedIds: []
-        });
+      if (result && callbacks?.onBlockMove && activeDragId) {
+        const movedBlock = result.blocks.find((b) => b.id === activeDragId);
+        const movedIds = draggedBlockIds.length > 0 ? draggedBlockIds : activeDragId ? [activeDragId] : [];
+        if (movedBlock) {
+          const siblings = result.blocks.filter((b) => b.parentId === movedBlock.parentId);
+          const toIndex = siblings.findIndex((b) => b.id === activeDragId);
+          callbacks.onBlockMove({
+            block: movedBlock,
+            from: dragFromPosition ?? { parentId: null, index: 0 },
+            to: { parentId: movedBlock.parentId, index: toIndex },
+            blocks: result.blocks,
+            movedIds
+          });
+        }
       }
+      dragFromPosition = null;
       emitter.emit("drag:statechange", getDragState());
       emitter.emit("render", tree.getBlocks(), tree.getExpandedMap());
     },
@@ -658,7 +681,7 @@ function createBlockTreeController(options = {}) {
       return emitter.on(event, handler);
     },
     setOverlayRenderer(render) {
-      overlayRenderer = render;
+      overlay = new DragOverlay({ renderOverlay: render });
     },
     getTree: () => tree,
     destroy() {
@@ -673,6 +696,33 @@ function createBlockTreeController(options = {}) {
   };
   return controller;
 }
+function createDeferredSync(options) {
+  let busy = false;
+  let queue = null;
+  return {
+    isBusy: () => busy,
+    apply(remoteBlocks) {
+      if (busy) {
+        queue = remoteBlocks;
+      } else {
+        options?.onResolve?.(remoteBlocks);
+      }
+    },
+    enterBusy() {
+      busy = true;
+    },
+    exitBusy(localBlocks, strategy) {
+      busy = false;
+      const queued = queue;
+      queue = null;
+      if (!queued) return null;
+      if (strategy === "lww") {
+        return localBlocks;
+      }
+      return core.mergeBlockVersions(localBlocks, queued, options?.mergeOptions);
+    }
+  };
+}
 
 // src/layout-animation.ts
 var LayoutAnimation = class {
@@ -748,14 +798,18 @@ var VirtualScroller = class {
 
 // src/renderer/drop-zone.ts
 function createDropZoneElement(options) {
-  const { id, height = 4 } = options;
+  const { id, height = 4, className } = options;
   const el = createElement("div");
   setDataAttributes(el, {
     "zone-id": id
   });
-  el.style.height = `${height}px`;
-  el.style.minHeight = `${height}px`;
-  el.style.transition = "background-color 150ms ease";
+  if (className) {
+    el.className = className;
+  } else {
+    el.style.height = `${height}px`;
+    el.style.minHeight = `${height}px`;
+    el.style.transition = "background-color 150ms ease";
+  }
   return el;
 }
 function setDropZoneActive(el, active) {
@@ -764,29 +818,32 @@ function setDropZoneActive(el, active) {
 
 // src/renderer/tree-renderer.ts
 function renderTree(blocks, expandedMap, controller, options, parentId = null, depth = 0) {
-  const { renderBlock, containerTypes, dropZoneHeight } = options;
+  const { renderBlock, containerTypes, dropZoneHeight, dropZoneClassName, rootClassName, indentClassName } = options;
   const container = createElement("div", {
     role: parentId === null ? "tree" : "group"
   });
   if (parentId === null) {
     container.setAttribute("data-dnd-tree-root", "true");
+    if (rootClassName) container.className = rootClassName;
+  } else {
+    if (indentClassName) container.className = indentClassName;
   }
   const children = blocks.filter((b) => b.parentId === parentId);
   const activeId = controller.getDragState().activeId;
   const selectedIds = controller.getSelectedIds();
   const index = controller.getTree().getBlockIndex();
   if (parentId !== null) {
-    const startZone = createDropZoneElement({ id: `into-${parentId}`, height: dropZoneHeight });
+    const startZone = createDropZoneElement({ id: `into-${parentId}`, height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone(`into-${parentId}`, startZone);
     container.appendChild(startZone);
   } else {
-    const rootStart = createDropZoneElement({ id: "root-start", height: dropZoneHeight });
+    const rootStart = createDropZoneElement({ id: "root-start", height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone("root-start", rootStart);
     container.appendChild(rootStart);
   }
   for (const block of children) {
     if (block.id === activeId) continue;
-    const beforeZone = createDropZoneElement({ id: `before-${block.id}`, height: dropZoneHeight });
+    const beforeZone = createDropZoneElement({ id: `before-${block.id}`, height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone(`before-${block.id}`, beforeZone);
     container.appendChild(beforeZone);
     const isContainer = containerTypes.includes(block.type);
@@ -822,11 +879,11 @@ function renderTree(blocks, expandedMap, controller, options, parentId = null, d
     container.appendChild(blockEl);
   }
   if (parentId !== null) {
-    const endZone = createDropZoneElement({ id: `end-${parentId}`, height: dropZoneHeight });
+    const endZone = createDropZoneElement({ id: `end-${parentId}`, height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone(`end-${parentId}`, endZone);
     container.appendChild(endZone);
   } else {
-    const rootEnd = createDropZoneElement({ id: "root-end", height: dropZoneHeight });
+    const rootEnd = createDropZoneElement({ id: "root-end", height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone("root-end", rootEnd);
     container.appendChild(rootEnd);
   }
@@ -835,21 +892,47 @@ function renderTree(blocks, expandedMap, controller, options, parentId = null, d
 
 // src/renderer/default-renderer.ts
 function createDefaultRenderer(controller, options) {
-  const { container, renderBlock, dropZoneHeight, animateExpand } = options;
-  const containerTypes = controller.getTree().containerTypes ?? [];
+  const { container, containerTypes: explicitContainerTypes, renderBlock, dropZoneHeight, dropZoneClassName, dropZoneActiveClassName } = options;
+  const containerTypes = explicitContainerTypes ?? controller.getTree().containerTypes ?? [];
+  const activeClasses = dropZoneActiveClassName?.split(/\s+/).filter(Boolean) ?? [];
   function render(blocks, expandedMap) {
-    container.innerHTML = "";
+    while (container.firstChild) container.removeChild(container.firstChild);
     const tree = renderTree(blocks, expandedMap, controller, {
       renderBlock,
       containerTypes,
-      dropZoneHeight
+      dropZoneHeight,
+      dropZoneClassName,
+      rootClassName: options.rootClassName,
+      indentClassName: options.indentClassName
     });
     container.appendChild(tree);
   }
+  let activeZoneEl = null;
+  function onDragStateChange(state) {
+    if (activeZoneEl) {
+      setDropZoneActive(activeZoneEl, false);
+      if (activeClasses.length) {
+        activeZoneEl.classList.remove(...activeClasses);
+      }
+      activeZoneEl = null;
+    }
+    if (state.isDragging && state.hoverZone) {
+      const zoneEl = container.querySelector(`[data-zone-id="${state.hoverZone}"]`);
+      if (zoneEl) {
+        setDropZoneActive(zoneEl, true);
+        if (activeClasses.length) {
+          zoneEl.classList.add(...activeClasses);
+        }
+        activeZoneEl = zoneEl;
+      }
+    }
+  }
   const unsubRender = controller.on("render", render);
+  const unsubDrag = controller.on("drag:statechange", onDragStateChange);
   render(controller.getBlocks(), controller.getExpandedMap());
   const renderer = () => {
     unsubRender();
+    unsubDrag();
   };
   renderer.refresh = () => {
     render(controller.getBlocks(), controller.getExpandedMap());
@@ -988,6 +1071,10 @@ Object.defineProperty(exports, "initFractionalOrder", {
   enumerable: true,
   get: function () { return core.initFractionalOrder; }
 });
+Object.defineProperty(exports, "mergeBlockVersions", {
+  enumerable: true,
+  get: function () { return core.mergeBlockVersions; }
+});
 Object.defineProperty(exports, "nestedToFlat", {
   enumerable: true,
   get: function () { return core.nestedToFlat; }
@@ -1019,6 +1106,7 @@ exports.closestWithData = closestWithData;
 exports.createBlockHistory = createBlockHistory;
 exports.createBlockTreeController = createBlockTreeController;
 exports.createDefaultRenderer = createDefaultRenderer;
+exports.createDeferredSync = createDeferredSync;
 exports.createDisposable = createDisposable;
 exports.createDropZoneElement = createDropZoneElement;
 exports.createElement = createElement;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { historyReducer, createStickyCollision, createBlockTree, EventEmitter, getBlockDepth } from '@dnd-block-tree/core';
-export { EventEmitter, blockReducer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockTree, createStickyCollision, debounce, deleteBlockAndDescendants, expandReducer, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSubtreeDepth, historyReducer, initFractionalOrder, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, validateBlockTree, weightedVerticalCollision } from '@dnd-block-tree/core';
+import { historyReducer, createStickyCollision, createBlockTree, EventEmitter, mergeBlockVersions, getBlockDepth } from '@dnd-block-tree/core';
+export { EventEmitter, blockReducer, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockTree, createStickyCollision, debounce, deleteBlockAndDescendants, expandReducer, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSubtreeDepth, historyReducer, initFractionalOrder, mergeBlockVersions, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, validateBlockTree, weightedVerticalCollision } from '@dnd-block-tree/core';
 
 // src/index.ts
 
@@ -54,6 +54,8 @@ var DragOverlay = class {
     const overlay = document.createElement("div");
     overlay.setAttribute("data-drag-overlay", "true");
     overlay.style.position = "fixed";
+    overlay.style.left = "0";
+    overlay.style.top = "0";
     overlay.style.zIndex = "9999";
     overlay.style.pointerEvents = "none";
     overlay.style.opacity = "0.7";
@@ -379,11 +381,11 @@ function createBlockTreeController(options = {}) {
   const draggableElements = /* @__PURE__ */ new Map();
   const dropZoneElements = /* @__PURE__ */ new Map();
   let snapshotRects = null;
+  let dragFromPosition = null;
   const selectedIds = /* @__PURE__ */ new Set();
   let lastSelectedId = null;
   const activeSensors = [];
-  const overlay = new DragOverlay();
-  let overlayRenderer = null;
+  let overlay = new DragOverlay();
   let history = null;
   tree.on("blocks:change", (blocks) => {
     onChange?.(blocks);
@@ -416,18 +418,26 @@ function createBlockTreeController(options = {}) {
   const sensorCallbacks = {
     onDragStart(blockId, x, y) {
       const draggedIds = selectedIds.has(blockId) && selectedIds.size > 1 ? [...selectedIds] : [blockId];
+      const blocks = tree.getBlocks();
+      const dragBlock = blocks.find((b) => b.id === blockId);
+      if (dragBlock) {
+        const siblings = blocks.filter((b) => b.parentId === dragBlock.parentId);
+        dragFromPosition = {
+          parentId: dragBlock.parentId,
+          index: siblings.findIndex((b) => b.id === blockId)
+        };
+      }
       const started = tree.startDrag(blockId, draggedIds);
-      if (!started) return;
+      if (!started) {
+        dragFromPosition = null;
+        return;
+      }
       stickyCollision.reset();
       snapshotRects = measureDropZoneRects(dropZoneElements);
       const block = tree.getBlock(blockId);
       const el = draggableElements.get(blockId);
       if (block && el) {
-        if (overlayRenderer) {
-          overlay.show(block, el, x, y);
-        } else {
-          overlay.show(block, el, x, y);
-        }
+        overlay.show(block, el, x, y);
       }
       emitter.emit("drag:statechange", getDragState());
     },
@@ -438,22 +448,35 @@ function createBlockTreeController(options = {}) {
       if (!detector) return;
       const targetZone = detectCollision(detector, snapshotRects, x, y);
       if (targetZone) {
+        const prevHover = tree.getHoverZone();
         tree.updateDrag(targetZone);
+        if (tree.getHoverZone() !== prevHover) {
+          emitter.emit("drag:statechange", getDragState());
+        }
       }
     },
     onDragEnd(_x, _y) {
+      const draggedBlockIds = selectedIds.size > 1 ? [...selectedIds] : [];
+      const activeDragId = tree.getActiveId();
       const result = tree.endDrag();
       overlay.hide();
       snapshotRects = null;
-      if (result && callbacks?.onBlockMove) {
-        callbacks.onBlockMove({
-          block: tree.getBlock(tree.getBlocks()[0]?.id),
-          from: { parentId: null, index: 0 },
-          to: { parentId: null, index: 0 },
-          blocks: result.blocks,
-          movedIds: []
-        });
+      if (result && callbacks?.onBlockMove && activeDragId) {
+        const movedBlock = result.blocks.find((b) => b.id === activeDragId);
+        const movedIds = draggedBlockIds.length > 0 ? draggedBlockIds : activeDragId ? [activeDragId] : [];
+        if (movedBlock) {
+          const siblings = result.blocks.filter((b) => b.parentId === movedBlock.parentId);
+          const toIndex = siblings.findIndex((b) => b.id === activeDragId);
+          callbacks.onBlockMove({
+            block: movedBlock,
+            from: dragFromPosition ?? { parentId: null, index: 0 },
+            to: { parentId: movedBlock.parentId, index: toIndex },
+            blocks: result.blocks,
+            movedIds
+          });
+        }
       }
+      dragFromPosition = null;
       emitter.emit("drag:statechange", getDragState());
       emitter.emit("render", tree.getBlocks(), tree.getExpandedMap());
     },
@@ -657,7 +680,7 @@ function createBlockTreeController(options = {}) {
       return emitter.on(event, handler);
     },
     setOverlayRenderer(render) {
-      overlayRenderer = render;
+      overlay = new DragOverlay({ renderOverlay: render });
     },
     getTree: () => tree,
     destroy() {
@@ -672,6 +695,33 @@ function createBlockTreeController(options = {}) {
   };
   return controller;
 }
+function createDeferredSync(options) {
+  let busy = false;
+  let queue = null;
+  return {
+    isBusy: () => busy,
+    apply(remoteBlocks) {
+      if (busy) {
+        queue = remoteBlocks;
+      } else {
+        options?.onResolve?.(remoteBlocks);
+      }
+    },
+    enterBusy() {
+      busy = true;
+    },
+    exitBusy(localBlocks, strategy) {
+      busy = false;
+      const queued = queue;
+      queue = null;
+      if (!queued) return null;
+      if (strategy === "lww") {
+        return localBlocks;
+      }
+      return mergeBlockVersions(localBlocks, queued, options?.mergeOptions);
+    }
+  };
+}
 
 // src/layout-animation.ts
 var LayoutAnimation = class {
@@ -747,14 +797,18 @@ var VirtualScroller = class {
 
 // src/renderer/drop-zone.ts
 function createDropZoneElement(options) {
-  const { id, height = 4 } = options;
+  const { id, height = 4, className } = options;
   const el = createElement("div");
   setDataAttributes(el, {
     "zone-id": id
   });
-  el.style.height = `${height}px`;
-  el.style.minHeight = `${height}px`;
-  el.style.transition = "background-color 150ms ease";
+  if (className) {
+    el.className = className;
+  } else {
+    el.style.height = `${height}px`;
+    el.style.minHeight = `${height}px`;
+    el.style.transition = "background-color 150ms ease";
+  }
   return el;
 }
 function setDropZoneActive(el, active) {
@@ -763,29 +817,32 @@ function setDropZoneActive(el, active) {
 
 // src/renderer/tree-renderer.ts
 function renderTree(blocks, expandedMap, controller, options, parentId = null, depth = 0) {
-  const { renderBlock, containerTypes, dropZoneHeight } = options;
+  const { renderBlock, containerTypes, dropZoneHeight, dropZoneClassName, rootClassName, indentClassName } = options;
   const container = createElement("div", {
     role: parentId === null ? "tree" : "group"
   });
   if (parentId === null) {
     container.setAttribute("data-dnd-tree-root", "true");
+    if (rootClassName) container.className = rootClassName;
+  } else {
+    if (indentClassName) container.className = indentClassName;
   }
   const children = blocks.filter((b) => b.parentId === parentId);
   const activeId = controller.getDragState().activeId;
   const selectedIds = controller.getSelectedIds();
   const index = controller.getTree().getBlockIndex();
   if (parentId !== null) {
-    const startZone = createDropZoneElement({ id: `into-${parentId}`, height: dropZoneHeight });
+    const startZone = createDropZoneElement({ id: `into-${parentId}`, height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone(`into-${parentId}`, startZone);
     container.appendChild(startZone);
   } else {
-    const rootStart = createDropZoneElement({ id: "root-start", height: dropZoneHeight });
+    const rootStart = createDropZoneElement({ id: "root-start", height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone("root-start", rootStart);
     container.appendChild(rootStart);
   }
   for (const block of children) {
     if (block.id === activeId) continue;
-    const beforeZone = createDropZoneElement({ id: `before-${block.id}`, height: dropZoneHeight });
+    const beforeZone = createDropZoneElement({ id: `before-${block.id}`, height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone(`before-${block.id}`, beforeZone);
     container.appendChild(beforeZone);
     const isContainer = containerTypes.includes(block.type);
@@ -821,11 +878,11 @@ function renderTree(blocks, expandedMap, controller, options, parentId = null, d
     container.appendChild(blockEl);
   }
   if (parentId !== null) {
-    const endZone = createDropZoneElement({ id: `end-${parentId}`, height: dropZoneHeight });
+    const endZone = createDropZoneElement({ id: `end-${parentId}`, height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone(`end-${parentId}`, endZone);
     container.appendChild(endZone);
   } else {
-    const rootEnd = createDropZoneElement({ id: "root-end", height: dropZoneHeight });
+    const rootEnd = createDropZoneElement({ id: "root-end", height: dropZoneHeight, className: dropZoneClassName });
     controller.registerDropZone("root-end", rootEnd);
     container.appendChild(rootEnd);
   }
@@ -834,21 +891,47 @@ function renderTree(blocks, expandedMap, controller, options, parentId = null, d
 
 // src/renderer/default-renderer.ts
 function createDefaultRenderer(controller, options) {
-  const { container, renderBlock, dropZoneHeight, animateExpand } = options;
-  const containerTypes = controller.getTree().containerTypes ?? [];
+  const { container, containerTypes: explicitContainerTypes, renderBlock, dropZoneHeight, dropZoneClassName, dropZoneActiveClassName } = options;
+  const containerTypes = explicitContainerTypes ?? controller.getTree().containerTypes ?? [];
+  const activeClasses = dropZoneActiveClassName?.split(/\s+/).filter(Boolean) ?? [];
   function render(blocks, expandedMap) {
-    container.innerHTML = "";
+    while (container.firstChild) container.removeChild(container.firstChild);
     const tree = renderTree(blocks, expandedMap, controller, {
       renderBlock,
       containerTypes,
-      dropZoneHeight
+      dropZoneHeight,
+      dropZoneClassName,
+      rootClassName: options.rootClassName,
+      indentClassName: options.indentClassName
     });
     container.appendChild(tree);
   }
+  let activeZoneEl = null;
+  function onDragStateChange(state) {
+    if (activeZoneEl) {
+      setDropZoneActive(activeZoneEl, false);
+      if (activeClasses.length) {
+        activeZoneEl.classList.remove(...activeClasses);
+      }
+      activeZoneEl = null;
+    }
+    if (state.isDragging && state.hoverZone) {
+      const zoneEl = container.querySelector(`[data-zone-id="${state.hoverZone}"]`);
+      if (zoneEl) {
+        setDropZoneActive(zoneEl, true);
+        if (activeClasses.length) {
+          zoneEl.classList.add(...activeClasses);
+        }
+        activeZoneEl = zoneEl;
+      }
+    }
+  }
   const unsubRender = controller.on("render", render);
+  const unsubDrag = controller.on("drag:statechange", onDragStateChange);
   render(controller.getBlocks(), controller.getExpandedMap());
   const renderer = () => {
     unsubRender();
+    unsubDrag();
   };
   renderer.refresh = () => {
     render(controller.getBlocks(), controller.getExpandedMap());
@@ -883,4 +966,4 @@ function createDisposable() {
   };
 }
 
-export { DragOverlay, KeyboardSensor, LayoutAnimation, PointerSensor, TouchSensor, VirtualScroller, buildCandidates, closestWithData, createBlockHistory, createBlockTreeController, createDefaultRenderer, createDisposable, createDropZoneElement, createElement, createGhostPreview, detectCollision, measureDropZoneRects, pointerToRect, renderTree, setDataAttributes, setDropZoneActive, triggerHaptic };
+export { DragOverlay, KeyboardSensor, LayoutAnimation, PointerSensor, TouchSensor, VirtualScroller, buildCandidates, closestWithData, createBlockHistory, createBlockTreeController, createDefaultRenderer, createDeferredSync, createDisposable, createDropZoneElement, createElement, createGhostPreview, detectCollision, measureDropZoneRects, pointerToRect, renderTree, setDataAttributes, setDropZoneActive, triggerHaptic };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-block-tree/vanilla",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "description": "Vanilla JS/TS adapter for dnd-block-tree — zero framework dependencies",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -50,5 +50,9 @@
     "vanilla",
     "headless",
     "hierarchical"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
 }