dnd-block-tree 0.2.0 → 0.3.0

package/README.md

@@ -1,5 +1,13 @@
 # dnd-block-tree
 
+[![npm version](https://img.shields.io/npm/v/dnd-block-tree.svg)](https://www.npmjs.com/package/dnd-block-tree)
+[![npm downloads](https://img.shields.io/npm/dm/dnd-block-tree.svg)](https://www.npmjs.com/package/dnd-block-tree)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/dnd-block-tree)](https://bundlephobia.com/package/dnd-block-tree)
+[![CI](https://github.com/thesandybridge/dnd-block-tree/actions/workflows/ci.yml/badge.svg)](https://github.com/thesandybridge/dnd-block-tree/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)
+[![demo](https://img.shields.io/badge/demo-live-brightgreen.svg)](https://dnd-block-tree.vercel.app)
+
 A headless React library for building hierarchical drag-and-drop interfaces. Bring your own components, we handle the complexity.
 
 ## Features
@@ -7,6 +15,7 @@ A headless React library for building hierarchical drag-and-drop interfaces. Bri
 - **Stable Drop Zones** - Zones render based on original block positions, not preview state, ensuring consistent drop targets during drag
 - **Ghost Preview** - Semi-transparent preview shows where blocks will land without affecting zone positions
 - **Depth-Aware Collision** - Smart algorithm prefers nested zones when cursor is at indented levels, with hysteresis to prevent flickering
+- **Mobile & Touch Support** - Separate touch/pointer activation constraints prevent interference with scrolling on mobile devices
 - **8px Activation Distance** - Prevents accidental drags. Pointer must move 8px before drag starts, allowing normal clicks
 - **Snapshot-Based Computation** - State captured at drag start. All preview computations use snapshot, ensuring consistent behavior
 - **Debounced Preview** - 150ms debounced virtual state for smooth drag previews without jitter

package/dist/index.js

@@ -122,23 +122,29 @@ function useConfiguredSensors(config = {}) {
     activationDelay,
     tolerance
   } = config;
-  let activationConstraint;
+  let pointerConstraint;
+  let touchConstraint;
   if (activationDelay !== void 0) {
-    activationConstraint = {
+    pointerConstraint = {
       delay: activationDelay,
       tolerance: tolerance ?? 5
     };
+    touchConstraint = pointerConstraint;
   } else {
-    activationConstraint = {
+    pointerConstraint = {
       distance: activationDistance
     };
+    touchConstraint = {
+      delay: 200,
+      tolerance: 5
+    };
   }
   return core.useSensors(
     core.useSensor(core.PointerSensor, {
-      activationConstraint
+      activationConstraint: pointerConstraint
     }),
     core.useSensor(core.TouchSensor, {
-      activationConstraint
+      activationConstraint: touchConstraint
     }),
     core.useSensor(core.KeyboardSensor)
   );
@@ -232,7 +238,16 @@ function DraggableBlock({
     id: block.id,
     disabled
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, ...attributes, ...listeners, children: children({ isDragging }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      ...attributes,
+      ...listeners,
+      style: { touchAction: "none", minWidth: 0 },
+      children: children({ isDragging })
+    }
+  );
 }
 function TreeRenderer({
   blocks,
@@ -257,7 +272,7 @@ function TreeRenderer({
   const filteredBlocks = items.filter((block) => block.id !== activeId);
   const showGhostHere = previewPosition?.parentId === parentId && draggedBlock;
   const containerClass = depth === 0 ? rootClassName : indentClassName;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, style: { minWidth: 0 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DropZone,
       {
@@ -283,7 +298,7 @@ function TreeRenderer({
       }
       const GhostRenderer = draggedBlock ? renderers[draggedBlock.type] : null;
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-        ghostBeforeThis && GhostRenderer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 pointer-events-none", children: GhostRenderer({
+        ghostBeforeThis && GhostRenderer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 pointer-events-none", style: { minWidth: 0 }, children: GhostRenderer({
           block: draggedBlock,
           isDragging: true,
           depth
@@ -342,7 +357,7 @@ function TreeRenderer({
     }),
     showGhostHere && previewPosition.index >= filteredBlocks.length && draggedBlock && (() => {
       const GhostRenderer = renderers[draggedBlock.type];
-      return GhostRenderer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 pointer-events-none", children: GhostRenderer({
+      return GhostRenderer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-50 pointer-events-none", style: { minWidth: 0 }, children: GhostRenderer({
         block: draggedBlock,
         isDragging: true,
         depth
@@ -782,7 +797,7 @@ function BlockTree({
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
           TreeRenderer,
           {
             blocks,