@dnd-block-tree/vanilla 2.3.0 → 2.4.0

package/dist/index.d.mts

@@ -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 */
@@ -324,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.
@@ -334,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;

package/dist/index.d.ts

@@ -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 */
@@ -324,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.
@@ -334,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;

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() {
@@ -775,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) {
@@ -791,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);
@@ -849,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);
   }
@@ -862,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());

package/dist/index.mjs

@@ -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() {
@@ -774,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) {
@@ -790,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);
@@ -848,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);
   }
@@ -861,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());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-block-tree/vanilla",
-  "version": "2.3.0",
+  "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
+  }
 }