@dnd-block-tree/vanilla 2.1.0

package/dist/index.mjs

@@ -0,0 +1,888 @@
+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';
+
+// src/index.ts
+
+// src/collision-bridge.ts
+function measureDropZoneRects(zones) {
+  const rects = /* @__PURE__ */ new Map();
+  for (const [id, el] of zones) {
+    const domRect = el.getBoundingClientRect();
+    rects.set(id, {
+      top: domRect.top,
+      left: domRect.left,
+      width: domRect.width,
+      height: domRect.height,
+      right: domRect.right,
+      bottom: domRect.bottom
+    });
+  }
+  return rects;
+}
+function buildCandidates(snapshotRects) {
+  const candidates = [];
+  for (const [id, rect] of snapshotRects) {
+    candidates.push({ id, rect });
+  }
+  return candidates;
+}
+function pointerToRect(x, y) {
+  return {
+    top: y,
+    left: x,
+    width: 1,
+    height: 1,
+    right: x + 1,
+    bottom: y + 1
+  };
+}
+function detectCollision(detector, snapshotRects, pointerX, pointerY) {
+  const candidates = buildCandidates(snapshotRects);
+  const pointerRect = pointerToRect(pointerX, pointerY);
+  const results = detector(candidates, pointerRect);
+  return results.length > 0 ? results[0].id : null;
+}
+
+// src/drag-overlay.ts
+var DragOverlay = class {
+  constructor(options = {}) {
+    this.overlay = null;
+    this.options = options;
+  }
+  show(block, sourceEl, x, y) {
+    this.hide();
+    const overlay = document.createElement("div");
+    overlay.setAttribute("data-drag-overlay", "true");
+    overlay.style.position = "fixed";
+    overlay.style.zIndex = "9999";
+    overlay.style.pointerEvents = "none";
+    overlay.style.opacity = "0.7";
+    overlay.style.backdropFilter = "blur(4px)";
+    overlay.style.willChange = "transform";
+    if (this.options.renderOverlay) {
+      overlay.appendChild(this.options.renderOverlay(block));
+    } else {
+      const rect = sourceEl.getBoundingClientRect();
+      overlay.style.width = `${rect.width}px`;
+      const clone = sourceEl.cloneNode(true);
+      clone.style.margin = "0";
+      overlay.appendChild(clone);
+    }
+    this.setPosition(overlay, x, y);
+    document.body.appendChild(overlay);
+    this.overlay = overlay;
+  }
+  move(x, y) {
+    if (this.overlay) {
+      this.setPosition(this.overlay, x, y);
+    }
+  }
+  hide() {
+    if (this.overlay) {
+      this.overlay.remove();
+      this.overlay = null;
+    }
+  }
+  setPosition(el, x, y) {
+    el.style.transform = `translate(${x}px, ${y}px)`;
+  }
+};
+
+// src/utils/dom.ts
+function createElement(tag, attrs, children) {
+  const el = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      el.setAttribute(key, value);
+    }
+  }
+  if (children) {
+    for (const child of children) {
+      if (typeof child === "string") {
+        el.appendChild(document.createTextNode(child));
+      } else {
+        el.appendChild(child);
+      }
+    }
+  }
+  return el;
+}
+function setDataAttributes(el, data) {
+  for (const [key, value] of Object.entries(data)) {
+    if (value === false) {
+      el.removeAttribute(`data-${key}`);
+    } else {
+      el.setAttribute(`data-${key}`, String(value));
+    }
+  }
+}
+function closestWithData(el, dataAttr) {
+  return el.closest(`[data-${dataAttr}]`);
+}
+
+// src/sensors/pointer-sensor.ts
+var PointerSensor = class {
+  constructor(callbacks, options = {}) {
+    this.container = null;
+    this.isDragging = false;
+    this.startX = 0;
+    this.startY = 0;
+    this.blockId = null;
+    this.callbacks = callbacks;
+    this.activationDistance = options.activationDistance ?? 8;
+    this.boundPointerDown = this.onPointerDown.bind(this);
+    this.boundPointerMove = this.onPointerMove.bind(this);
+    this.boundPointerUp = this.onPointerUp.bind(this);
+  }
+  attach(container) {
+    this.container = container;
+    container.addEventListener("pointerdown", this.boundPointerDown);
+  }
+  detach() {
+    this.cleanup();
+    this.container?.removeEventListener("pointerdown", this.boundPointerDown);
+    this.container = null;
+  }
+  onPointerDown(e) {
+    if (e.button !== 0) return;
+    const draggable = closestWithData(e.target, "draggable-id");
+    if (!draggable) return;
+    const id = draggable.getAttribute("data-draggable-id");
+    if (!id) return;
+    this.blockId = id;
+    this.startX = e.clientX;
+    this.startY = e.clientY;
+    this.isDragging = false;
+    document.addEventListener("pointermove", this.boundPointerMove);
+    document.addEventListener("pointerup", this.boundPointerUp);
+  }
+  onPointerMove(e) {
+    const dx = e.clientX - this.startX;
+    const dy = e.clientY - this.startY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (!this.isDragging) {
+      if (distance >= this.activationDistance) {
+        this.isDragging = true;
+        this.callbacks.onDragStart(this.blockId, this.startX, this.startY);
+      }
+      return;
+    }
+    this.callbacks.onDragMove(e.clientX, e.clientY);
+  }
+  onPointerUp(e) {
+    if (this.isDragging) {
+      this.callbacks.onDragEnd(e.clientX, e.clientY);
+    }
+    this.cleanup();
+  }
+  cleanup() {
+    this.isDragging = false;
+    this.blockId = null;
+    document.removeEventListener("pointermove", this.boundPointerMove);
+    document.removeEventListener("pointerup", this.boundPointerUp);
+  }
+};
+
+// src/utils/haptic.ts
+function triggerHaptic(durationMs = 10) {
+  if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") {
+    navigator.vibrate(durationMs);
+  }
+}
+
+// src/sensors/touch-sensor.ts
+var TouchSensor = class {
+  constructor(callbacks, options = {}) {
+    this.container = null;
+    this.isDragging = false;
+    this.pressTimer = null;
+    this.blockId = null;
+    this.callbacks = callbacks;
+    this.longPressDelay = options.longPressDelay ?? 200;
+    this.hapticFeedback = options.hapticFeedback ?? true;
+    this.boundTouchStart = this.onTouchStart.bind(this);
+    this.boundTouchMove = this.onTouchMove.bind(this);
+    this.boundTouchEnd = this.onTouchEnd.bind(this);
+  }
+  attach(container) {
+    this.container = container;
+    container.addEventListener("touchstart", this.boundTouchStart, { passive: false });
+  }
+  detach() {
+    this.cleanup();
+    this.container?.removeEventListener("touchstart", this.boundTouchStart);
+    this.container = null;
+  }
+  onTouchStart(e) {
+    if (e.touches.length !== 1) return;
+    const draggable = closestWithData(e.target, "draggable-id");
+    if (!draggable) return;
+    const id = draggable.getAttribute("data-draggable-id");
+    if (!id) return;
+    this.blockId = id;
+    const touch = e.touches[0];
+    this.pressTimer = setTimeout(() => {
+      this.isDragging = true;
+      if (this.hapticFeedback) triggerHaptic();
+      this.callbacks.onDragStart(this.blockId, touch.clientX, touch.clientY);
+    }, this.longPressDelay);
+    document.addEventListener("touchmove", this.boundTouchMove, { passive: false });
+    document.addEventListener("touchend", this.boundTouchEnd);
+    document.addEventListener("touchcancel", this.boundTouchEnd);
+  }
+  onTouchMove(e) {
+    const touch = e.touches[0];
+    if (!this.isDragging) {
+      if (this.pressTimer) {
+        clearTimeout(this.pressTimer);
+        this.pressTimer = null;
+        this.cleanup();
+      }
+      return;
+    }
+    e.preventDefault();
+    this.callbacks.onDragMove(touch.clientX, touch.clientY);
+  }
+  onTouchEnd(e) {
+    if (this.isDragging) {
+      const touch = e.changedTouches[0];
+      this.callbacks.onDragEnd(touch.clientX, touch.clientY);
+    }
+    this.cleanup();
+  }
+  cleanup() {
+    if (this.pressTimer) {
+      clearTimeout(this.pressTimer);
+      this.pressTimer = null;
+    }
+    this.isDragging = false;
+    this.blockId = null;
+    document.removeEventListener("touchmove", this.boundTouchMove);
+    document.removeEventListener("touchend", this.boundTouchEnd);
+    document.removeEventListener("touchcancel", this.boundTouchEnd);
+  }
+};
+
+// src/sensors/keyboard-sensor.ts
+var KeyboardSensor = class {
+  constructor(callbacks) {
+    this.container = null;
+    this.callbacks = callbacks;
+    this.boundKeyDown = this.onKeyDown.bind(this);
+  }
+  attach(container) {
+    this.container = container;
+    container.addEventListener("keydown", this.boundKeyDown);
+  }
+  detach() {
+    this.container?.removeEventListener("keydown", this.boundKeyDown);
+    this.container = null;
+  }
+  onKeyDown(e) {
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault();
+        this.callbacks.onFocusPrev();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        this.callbacks.onFocusNext();
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        this.callbacks.onExpand();
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        this.callbacks.onCollapse();
+        break;
+      case "Home":
+        e.preventDefault();
+        this.callbacks.onFocusFirst();
+        break;
+      case "End":
+        e.preventDefault();
+        this.callbacks.onFocusLast();
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        this.callbacks.onToggleExpand();
+        break;
+      case "Escape":
+        this.callbacks.onDragCancel();
+        break;
+    }
+  }
+};
+function createBlockHistory(initialBlocks, options = {}) {
+  const { maxSteps = 50 } = options;
+  let state = {
+    past: [],
+    present: initialBlocks,
+    future: []
+  };
+  return {
+    push(blocks) {
+      state = historyReducer(state, { type: "SET", payload: blocks, maxSteps });
+    },
+    undo() {
+      if (state.past.length === 0) return null;
+      state = historyReducer(state, { type: "UNDO" });
+      return state.present;
+    },
+    redo() {
+      if (state.future.length === 0) return null;
+      state = historyReducer(state, { type: "REDO" });
+      return state.present;
+    },
+    canUndo: () => state.past.length > 0,
+    canRedo: () => state.future.length > 0,
+    getPresent: () => state.present,
+    clear(blocks) {
+      state = { past: [], present: blocks, future: [] };
+    }
+  };
+}
+
+// src/controller.ts
+function createBlockTreeController(options = {}) {
+  const {
+    initialBlocks = [],
+    containerTypes = [],
+    orderingStrategy,
+    maxDepth,
+    previewDebounce,
+    canDrag,
+    canDrop,
+    idGenerator,
+    initialExpanded,
+    sensors: sensorConfig,
+    onChange,
+    callbacks
+  } = options;
+  const stickyCollision = createStickyCollision(15);
+  const tree = createBlockTree({
+    initialBlocks,
+    containerTypes,
+    orderingStrategy,
+    maxDepth,
+    previewDebounce,
+    canDrag,
+    canDrop,
+    idGenerator,
+    initialExpanded,
+    collisionDetection: stickyCollision
+  });
+  const emitter = new EventEmitter();
+  let container = null;
+  const draggableElements = /* @__PURE__ */ new Map();
+  const dropZoneElements = /* @__PURE__ */ new Map();
+  let snapshotRects = null;
+  const selectedIds = /* @__PURE__ */ new Set();
+  let lastSelectedId = null;
+  const activeSensors = [];
+  const overlay = new DragOverlay();
+  let overlayRenderer = null;
+  let history = null;
+  tree.on("blocks:change", (blocks) => {
+    onChange?.(blocks);
+    if (history) {
+      history.push(blocks);
+    }
+    emitter.emit("render", blocks, tree.getExpandedMap());
+  });
+  tree.on("expand:change", () => {
+    emitter.emit("render", tree.getBlocks(), tree.getExpandedMap());
+  });
+  if (callbacks?.onDragStart) {
+    tree.on("drag:start", (e) => callbacks.onDragStart(e));
+  }
+  if (callbacks?.onDragEnd) {
+    tree.on("drag:end", (e) => callbacks.onDragEnd(e));
+  }
+  if (callbacks?.onBlockAdd) {
+    tree.on("block:add", (e) => callbacks.onBlockAdd(e));
+  }
+  if (callbacks?.onBlockDelete) {
+    tree.on("block:delete", (e) => callbacks.onBlockDelete(e));
+  }
+  if (callbacks?.onExpandChange) {
+    tree.on("expand:change", (e) => callbacks.onExpandChange(e));
+  }
+  if (callbacks?.onHoverChange) {
+    tree.on("hover:change", (e) => callbacks.onHoverChange(e));
+  }
+  const sensorCallbacks = {
+    onDragStart(blockId, x, y) {
+      const draggedIds = selectedIds.has(blockId) && selectedIds.size > 1 ? [...selectedIds] : [blockId];
+      const started = tree.startDrag(blockId, draggedIds);
+      if (!started) 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);
+        }
+      }
+      emitter.emit("drag:statechange", getDragState());
+    },
+    onDragMove(x, y) {
+      if (!snapshotRects) return;
+      overlay.move(x, y);
+      const detector = tree.getCollisionDetection();
+      if (!detector) return;
+      const targetZone = detectCollision(detector, snapshotRects, x, y);
+      if (targetZone) {
+        tree.updateDrag(targetZone);
+      }
+    },
+    onDragEnd(_x, _y) {
+      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: []
+        });
+      }
+      emitter.emit("drag:statechange", getDragState());
+      emitter.emit("render", tree.getBlocks(), tree.getExpandedMap());
+    },
+    onDragCancel() {
+      tree.cancelDrag();
+      overlay.hide();
+      snapshotRects = null;
+      emitter.emit("drag:statechange", getDragState());
+      emitter.emit("render", tree.getBlocks(), tree.getExpandedMap());
+    }
+  };
+  function getDragState() {
+    return {
+      isDragging: tree.getActiveId() !== null,
+      activeId: tree.getActiveId(),
+      hoverZone: tree.getHoverZone()
+    };
+  }
+  function setupSensors() {
+    const config = sensorConfig ?? {};
+    if (!container) return;
+    if (config.pointer !== false) {
+      const pointer = new PointerSensor(sensorCallbacks, {
+        activationDistance: config.activationDistance
+      });
+      pointer.attach(container);
+      activeSensors.push(pointer);
+    }
+    if (config.touch !== false) {
+      const touch = new TouchSensor(sensorCallbacks, {
+        longPressDelay: config.longPressDelay,
+        hapticFeedback: config.hapticFeedback
+      });
+      touch.attach(container);
+      activeSensors.push(touch);
+    }
+    if (config.keyboard) {
+      const visibleBlocks = () => tree.getEffectiveBlocks();
+      let focusedIndex = -1;
+      const keyboard = new KeyboardSensor({
+        ...sensorCallbacks,
+        onFocusPrev() {
+          const blocks = visibleBlocks();
+          focusedIndex = Math.max(0, focusedIndex - 1);
+          const block = blocks[focusedIndex];
+          if (block) focusDraggable(block.id);
+        },
+        onFocusNext() {
+          const blocks = visibleBlocks();
+          focusedIndex = Math.min(blocks.length - 1, focusedIndex + 1);
+          const block = blocks[focusedIndex];
+          if (block) focusDraggable(block.id);
+        },
+        onExpand() {
+          const blocks = visibleBlocks();
+          const block = blocks[focusedIndex];
+          if (block && containerTypes.includes(block.type) && !tree.isExpanded(block.id)) {
+            tree.toggleExpand(block.id);
+          }
+        },
+        onCollapse() {
+          const blocks = visibleBlocks();
+          const block = blocks[focusedIndex];
+          if (block && containerTypes.includes(block.type) && tree.isExpanded(block.id)) {
+            tree.toggleExpand(block.id);
+          }
+        },
+        onFocusFirst() {
+          focusedIndex = 0;
+          const blocks = visibleBlocks();
+          if (blocks[0]) focusDraggable(blocks[0].id);
+        },
+        onFocusLast() {
+          const blocks = visibleBlocks();
+          focusedIndex = blocks.length - 1;
+          if (blocks[focusedIndex]) focusDraggable(blocks[focusedIndex].id);
+        },
+        onToggleExpand() {
+          const blocks = visibleBlocks();
+          const block = blocks[focusedIndex];
+          if (block && containerTypes.includes(block.type)) {
+            tree.toggleExpand(block.id);
+          }
+        },
+        onSelect() {
+          const blocks = visibleBlocks();
+          const block = blocks[focusedIndex];
+          if (block) {
+            controller.select(block.id, "toggle");
+          }
+        }
+      });
+      keyboard.attach(container);
+      activeSensors.push(keyboard);
+    }
+  }
+  function focusDraggable(id) {
+    const el = draggableElements.get(id);
+    if (el) el.focus();
+  }
+  function teardownSensors() {
+    for (const sensor of activeSensors) {
+      sensor.detach();
+    }
+    activeSensors.length = 0;
+  }
+  const controller = {
+    mount(el) {
+      container = el;
+      setupSensors();
+      emitter.emit("render", tree.getBlocks(), tree.getExpandedMap());
+    },
+    unmount() {
+      teardownSensors();
+      overlay.hide();
+      container = null;
+    },
+    registerDraggable(id, element) {
+      element.setAttribute("data-draggable-id", id);
+      element.setAttribute("data-block-id", id);
+      draggableElements.set(id, element);
+      return () => {
+        draggableElements.delete(id);
+      };
+    },
+    registerDropZone(id, element) {
+      element.setAttribute("data-zone-id", id);
+      dropZoneElements.set(id, element);
+      return () => {
+        dropZoneElements.delete(id);
+      };
+    },
+    getDragState,
+    getBlocks: () => tree.getBlocks(),
+    getEffectiveBlocks: () => tree.getEffectiveBlocks(),
+    getExpandedMap: () => tree.getExpandedMap(),
+    getBlock: (id) => tree.getBlock(id),
+    toggleExpand(id) {
+      tree.toggleExpand(id);
+    },
+    setExpandAll(expanded) {
+      tree.setExpandAll(expanded);
+    },
+    addBlock(type, parentId = null) {
+      return tree.addBlock(type, parentId);
+    },
+    deleteBlock(id) {
+      tree.deleteBlock(id);
+    },
+    setBlocks(blocks) {
+      tree.setBlocks(blocks);
+    },
+    select(id, mode) {
+      if (mode === "single") {
+        selectedIds.clear();
+        selectedIds.add(id);
+      } else if (mode === "toggle") {
+        if (selectedIds.has(id)) {
+          selectedIds.delete(id);
+        } else {
+          selectedIds.add(id);
+        }
+      } else if (mode === "range" && lastSelectedId) {
+        const blocks = tree.getBlocks();
+        const startIdx = blocks.findIndex((b) => b.id === lastSelectedId);
+        const endIdx = blocks.findIndex((b) => b.id === id);
+        if (startIdx !== -1 && endIdx !== -1) {
+          const [from, to] = startIdx < endIdx ? [startIdx, endIdx] : [endIdx, startIdx];
+          for (let i = from; i <= to; i++) {
+            selectedIds.add(blocks[i].id);
+          }
+        }
+      }
+      lastSelectedId = id;
+      emitter.emit("selection:change", new Set(selectedIds));
+    },
+    clearSelection() {
+      selectedIds.clear();
+      lastSelectedId = null;
+      emitter.emit("selection:change", /* @__PURE__ */ new Set());
+    },
+    getSelectedIds: () => new Set(selectedIds),
+    enableHistory(maxSteps = 50) {
+      history = createBlockHistory(tree.getBlocks(), { maxSteps });
+    },
+    undo() {
+      if (!history) return null;
+      const blocks = history.undo();
+      if (blocks) tree.setBlocks(blocks);
+      return blocks;
+    },
+    redo() {
+      if (!history) return null;
+      const blocks = history.redo();
+      if (blocks) tree.setBlocks(blocks);
+      return blocks;
+    },
+    canUndo: () => history?.canUndo() ?? false,
+    canRedo: () => history?.canRedo() ?? false,
+    on(event, handler) {
+      return emitter.on(event, handler);
+    },
+    setOverlayRenderer(render) {
+      overlayRenderer = render;
+    },
+    getTree: () => tree,
+    destroy() {
+      teardownSensors();
+      overlay.hide();
+      tree.destroy();
+      emitter.removeAllListeners();
+      draggableElements.clear();
+      dropZoneElements.clear();
+      selectedIds.clear();
+    }
+  };
+  return controller;
+}
+
+// src/layout-animation.ts
+var LayoutAnimation = class {
+  constructor(options = {}) {
+    this.snapshots = /* @__PURE__ */ new Map();
+    this.duration = options.duration ?? 200;
+    this.easing = options.easing ?? "ease";
+  }
+  /** Record current positions of all block elements in a container */
+  snapshot(container) {
+    this.snapshots.clear();
+    const blocks = container.querySelectorAll("[data-block-id]");
+    for (const el of blocks) {
+      const id = el.getAttribute("data-block-id");
+      if (id) {
+        this.snapshots.set(id, el.getBoundingClientRect());
+      }
+    }
+  }
+  /** After DOM update, animate elements from old to new positions */
+  animate(container) {
+    if (this.snapshots.size === 0) return;
+    const blocks = container.querySelectorAll("[data-block-id]");
+    for (const el of blocks) {
+      const id = el.getAttribute("data-block-id");
+      if (!id) continue;
+      const oldRect = this.snapshots.get(id);
+      if (!oldRect) continue;
+      const newRect = el.getBoundingClientRect();
+      const deltaX = oldRect.left - newRect.left;
+      const deltaY = oldRect.top - newRect.top;
+      if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) continue;
+      el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+      el.style.transition = "none";
+      requestAnimationFrame(() => {
+        el.style.transition = `transform ${this.duration}ms ${this.easing}`;
+        el.style.transform = "";
+        const onEnd = () => {
+          el.style.transition = "";
+          el.removeEventListener("transitionend", onEnd);
+        };
+        el.addEventListener("transitionend", onEnd, { once: true });
+      });
+    }
+    this.snapshots.clear();
+  }
+};
+
+// src/virtual-scroller.ts
+var VirtualScroller = class {
+  constructor(options) {
+    this.itemHeight = options.itemHeight;
+    this.overscan = options.overscan ?? 5;
+  }
+  /** Calculate the visible range for a given scroll state */
+  calculate(scrollTop, viewportHeight, totalItems, blockIds) {
+    const startIndex = Math.max(0, Math.floor(scrollTop / this.itemHeight) - this.overscan);
+    const visibleCount = Math.ceil(viewportHeight / this.itemHeight) + 2 * this.overscan;
+    const endIndex = Math.min(totalItems, startIndex + visibleCount);
+    const visibleIds = /* @__PURE__ */ new Set();
+    for (let i = startIndex; i < endIndex && i < blockIds.length; i++) {
+      visibleIds.add(blockIds[i]);
+    }
+    return {
+      startIndex,
+      endIndex,
+      offsetY: startIndex * this.itemHeight,
+      totalHeight: totalItems * this.itemHeight,
+      visibleIds
+    };
+  }
+};
+
+// src/renderer/drop-zone.ts
+function createDropZoneElement(options) {
+  const { id, height = 4 } = 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";
+  return el;
+}
+function setDropZoneActive(el, active) {
+  setDataAttributes(el, { "zone-active": active });
+}
+
+// src/renderer/tree-renderer.ts
+function renderTree(blocks, expandedMap, controller, options, parentId = null, depth = 0) {
+  const { renderBlock, containerTypes, dropZoneHeight } = options;
+  const container = createElement("div", {
+    role: parentId === null ? "tree" : "group"
+  });
+  if (parentId === null) {
+    container.setAttribute("data-dnd-tree-root", "true");
+  }
+  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 });
+    controller.registerDropZone(`into-${parentId}`, startZone);
+    container.appendChild(startZone);
+  } else {
+    const rootStart = createDropZoneElement({ id: "root-start", height: dropZoneHeight });
+    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 });
+    controller.registerDropZone(`before-${block.id}`, beforeZone);
+    container.appendChild(beforeZone);
+    const isContainer = containerTypes.includes(block.type);
+    const isExpanded = expandedMap[block.id] !== false;
+    const blockDepth = getBlockDepth(index, block.id);
+    let childrenEl = null;
+    if (isContainer && isExpanded) {
+      childrenEl = renderTree(blocks, expandedMap, controller, options, block.id, depth + 1);
+    }
+    const ctx = {
+      children: childrenEl,
+      depth: blockDepth,
+      isExpanded,
+      isDragging: block.id === activeId,
+      isSelected: selectedIds.has(block.id),
+      onToggleExpand: isContainer ? () => controller.toggleExpand(block.id) : null
+    };
+    const blockEl = renderBlock(block, ctx);
+    setDataAttributes(blockEl, {
+      "block-id": block.id,
+      "block-type": block.type,
+      depth: String(blockDepth),
+      dragging: block.id === activeId,
+      selected: selectedIds.has(block.id)
+    });
+    controller.registerDraggable(block.id, blockEl);
+    blockEl.setAttribute("role", "treeitem");
+    blockEl.setAttribute("aria-level", String(blockDepth + 1));
+    if (isContainer) {
+      blockEl.setAttribute("aria-expanded", String(isExpanded));
+    }
+    blockEl.setAttribute("tabindex", "-1");
+    container.appendChild(blockEl);
+  }
+  if (parentId !== null) {
+    const endZone = createDropZoneElement({ id: `end-${parentId}`, height: dropZoneHeight });
+    controller.registerDropZone(`end-${parentId}`, endZone);
+    container.appendChild(endZone);
+  } else {
+    const rootEnd = createDropZoneElement({ id: "root-end", height: dropZoneHeight });
+    controller.registerDropZone("root-end", rootEnd);
+    container.appendChild(rootEnd);
+  }
+  return container;
+}
+
+// src/renderer/default-renderer.ts
+function createDefaultRenderer(controller, options) {
+  const { container, renderBlock, dropZoneHeight, animateExpand } = options;
+  const containerTypes = controller.getTree().containerTypes ?? [];
+  function render(blocks, expandedMap) {
+    container.innerHTML = "";
+    const tree = renderTree(blocks, expandedMap, controller, {
+      renderBlock,
+      containerTypes,
+      dropZoneHeight
+    });
+    container.appendChild(tree);
+  }
+  const unsubRender = controller.on("render", render);
+  render(controller.getBlocks(), controller.getExpandedMap());
+  const renderer = () => {
+    unsubRender();
+  };
+  renderer.refresh = () => {
+    render(controller.getBlocks(), controller.getExpandedMap());
+  };
+  return renderer;
+}
+
+// src/renderer/ghost-preview.ts
+function createGhostPreview(sourceEl) {
+  const ghost = sourceEl.cloneNode(true);
+  setDataAttributes(ghost, { "dnd-ghost": "true" });
+  ghost.style.opacity = "0.3";
+  ghost.style.pointerEvents = "none";
+  ghost.removeAttribute("data-draggable-id");
+  ghost.removeAttribute("data-block-id");
+  return ghost;
+}
+
+// src/utils/disposable.ts
+function createDisposable() {
+  const cleanups = [];
+  return {
+    add(fn) {
+      cleanups.push(fn);
+    },
+    dispose() {
+      for (const fn of cleanups.reverse()) {
+        fn();
+      }
+      cleanups.length = 0;
+    }
+  };
+}
+
+export { DragOverlay, KeyboardSensor, LayoutAnimation, PointerSensor, TouchSensor, VirtualScroller, buildCandidates, closestWithData, createBlockHistory, createBlockTreeController, createDefaultRenderer, createDisposable, createDropZoneElement, createElement, createGhostPreview, detectCollision, measureDropZoneRects, pointerToRect, renderTree, setDataAttributes, setDropZoneActive, triggerHaptic };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map