dnd-block-tree 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -213,6 +213,10 @@ interface SensorConfig {
     activationDistance?: number;
     activationDelay?: number;
     tolerance?: number;
+    /** Override the default long-press delay (200ms) for touch sensors */
+    longPressDelay?: number;
+    /** Trigger haptic feedback (vibration) on drag start for touch devices */
+    hapticFeedback?: boolean;
 }
 /**
  * Drop zone configuration
@@ -466,12 +470,19 @@ interface BlockTreeProps<T extends BaseBlock, C extends readonly T['type'][] = r
     selectedIds?: Set<string>;
     /** Called when selection changes (for multi-select) */
     onSelectionChange?: (selectedIds: Set<string>) => void;
+    /** Enable virtual scrolling for large trees (fixed item height only) */
+    virtualize?: {
+        /** Fixed height of each item in pixels */
+        itemHeight: number;
+        /** Number of extra items to render outside the visible range (default: 5) */
+        overscan?: number;
+    };
 }
 /**
  * Main BlockTree component
  * Provides drag-and-drop functionality for hierarchical block structures
  */
-declare function BlockTree<T extends BaseBlock, C extends readonly T['type'][] = readonly T['type'][]>({ blocks, renderers, containerTypes, onChange, dragOverlay, activationDistance, previewDebounce, className, dropZoneClassName, dropZoneActiveClassName, indentClassName, showDropPreview, onDragStart, onDragMove, onDragEnd, onDragCancel, onBeforeMove, onBlockMove, onExpandChange, onHoverChange, canDrag, canDrop, collisionDetection, sensors: sensorConfig, initialExpanded, orderingStrategy, maxDepth, keyboardNavigation, multiSelect, selectedIds: externalSelectedIds, onSelectionChange, }: BlockTreeProps<T, C>): react_jsx_runtime.JSX.Element;
+declare function BlockTree<T extends BaseBlock, C extends readonly T['type'][] = readonly T['type'][]>({ blocks, renderers, containerTypes, onChange, dragOverlay, activationDistance, previewDebounce, className, dropZoneClassName, dropZoneActiveClassName, indentClassName, showDropPreview, onDragStart, onDragMove, onDragEnd, onDragCancel, onBeforeMove, onBlockMove, onExpandChange, onHoverChange, canDrag, canDrop, collisionDetection, sensors: sensorConfig, animation, initialExpanded, orderingStrategy, maxDepth, keyboardNavigation, multiSelect, selectedIds: externalSelectedIds, onSelectionChange, virtualize, }: BlockTreeProps<T, C>): react_jsx_runtime.JSX.Element;
 
 interface TreeRendererProps<T extends BaseBlock> {
     blocks: T[];
@@ -502,11 +513,15 @@ interface TreeRendererProps<T extends BaseBlock> {
     selectedIds?: Set<string>;
     /** Click handler for multi-select */
     onBlockClick?: (blockId: string, event: React.MouseEvent) => void;
+    /** Animation configuration */
+    animation?: AnimationConfig;
+    /** When virtual scrolling is active, only render blocks in this set */
+    virtualVisibleIds?: Set<string> | null;
 }
 /**
  * Recursive tree renderer with smart drop zones
  */
-declare function TreeRenderer<T extends BaseBlock>({ blocks, blocksByParent, parentId, activeId, expandedMap, renderers, containerTypes, onHover, onToggleExpand, depth, dropZoneClassName, dropZoneActiveClassName, indentClassName, rootClassName, canDrag, previewPosition, draggedBlock, focusedId, selectedIds, onBlockClick, }: TreeRendererProps<T>): react_jsx_runtime.JSX.Element;
+declare function TreeRenderer<T extends BaseBlock>({ blocks, blocksByParent, parentId, activeId, expandedMap, renderers, containerTypes, onHover, onToggleExpand, depth, dropZoneClassName, dropZoneActiveClassName, indentClassName, rootClassName, canDrag, previewPosition, draggedBlock, focusedId, selectedIds, onBlockClick, animation, virtualVisibleIds, }: TreeRendererProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DropZoneProps {
     id: string;
@@ -536,6 +551,17 @@ interface DragOverlayProps<T extends BaseBlock> {
  */
 declare function DragOverlay<T extends BaseBlock>({ activeBlock, children, selectedCount, }: DragOverlayProps<T>): react_jsx_runtime.JSX.Element;
 
+interface BlockTreeSSRProps<T extends BaseBlock, C extends readonly T['type'][] = readonly T['type'][]> extends BlockTreeProps<T, C> {
+    /** Content to render before hydration completes (default: null) */
+    fallback?: ReactNode;
+}
+/**
+ * Hydration-safe wrapper for BlockTree in SSR environments.
+ * Renders the fallback (or nothing) on the server and during initial hydration,
+ * then mounts the full BlockTree after the client has hydrated.
+ */
+declare function BlockTreeSSR<T extends BaseBlock, C extends readonly T['type'][] = readonly T['type'][]>({ fallback, ...props }: BlockTreeSSRProps<T, C>): react_jsx_runtime.JSX.Element;
+
 /**
  * Create block state context and hooks
  */
@@ -588,6 +614,58 @@ interface UseBlockHistoryResult<T extends BaseBlock> {
  */
 declare function useBlockHistory<T extends BaseBlock>(initialBlocks: T[], options?: UseBlockHistoryOptions): UseBlockHistoryResult<T>;
 
+interface UseLayoutAnimationOptions {
+    /** Duration of the transition in ms (default: 200) */
+    duration?: number;
+    /** CSS easing function (default: 'ease') */
+    easing?: string;
+    /** CSS selector for animated children (default: '[data-block-id]') */
+    selector?: string;
+}
+/**
+ * FLIP-based layout animation hook for reorder transitions.
+ *
+ * Captures block positions before render (layout effect cleanup),
+ * computes the delta after render, and applies a CSS transform transition.
+ *
+ * Usage:
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null)
+ * useLayoutAnimation(containerRef, { duration: 200 })
+ * return <div ref={containerRef}>...</div>
+ * ```
+ */
+declare function useLayoutAnimation(containerRef: React.RefObject<HTMLElement | null>, options?: UseLayoutAnimationOptions): void;
+
+interface UseVirtualTreeOptions {
+    /** Ref to the scrollable container element */
+    containerRef: React.RefObject<HTMLElement | null>;
+    /** Total number of items in the tree */
+    itemCount: number;
+    /** Fixed height of each item in pixels */
+    itemHeight: number;
+    /** Number of extra items to render outside the visible range (default: 5) */
+    overscan?: number;
+}
+interface UseVirtualTreeResult {
+    /** Start and end indices of the visible range (inclusive) */
+    visibleRange: {
+        start: number;
+        end: number;
+    };
+    /** Total height of all items for the spacer div */
+    totalHeight: number;
+    /** Offset from top for the first rendered item */
+    offsetY: number;
+}
+/**
+ * Lightweight fixed-height virtual scrolling hook for tree lists.
+ *
+ * Tracks scroll position on the container and computes which items
+ * should be rendered based on the viewport and overscan.
+ */
+declare function useVirtualTree({ containerRef, itemCount, itemHeight, overscan, }: UseVirtualTreeOptions): UseVirtualTreeResult;
+
 /**
  * Clone a Map
  */
@@ -659,6 +737,29 @@ declare function debounce<Args extends unknown[]>(fn: (...args: Args) => void, d
  * Generate a unique ID (simple implementation)
  */
 declare function generateId(): string;
+/**
+ * Trigger haptic feedback (vibration) on supported devices.
+ * Safe to call in any environment — no-ops when `navigator.vibrate` is unavailable.
+ */
+declare function triggerHaptic(durationMs?: number): void;
+
+/**
+ * A nested/tree representation of a block.
+ * Omits `parentId` and `order` since they are reconstructed during flattening.
+ */
+type NestedBlock<T extends BaseBlock> = Omit<T, 'parentId' | 'order'> & {
+    children: NestedBlock<T>[];
+};
+/**
+ * Convert a flat block array into a nested tree structure.
+ * Groups blocks by parentId, sorts siblings by order, and recursively builds children arrays.
+ */
+declare function flatToNested<T extends BaseBlock>(blocks: T[]): NestedBlock<T>[];
+/**
+ * Convert a nested tree structure back to a flat block array.
+ * DFS walk assigning parentId and integer order on the way down.
+ */
+declare function nestedToFlat<T extends BaseBlock>(nested: NestedBlock<T>[]): T[];
 
 /**
  * Fractional indexing utilities
@@ -710,4 +811,4 @@ declare function initFractionalOrder<T extends {
     order: number | string;
 }>(blocks: T[]): T[];
 
-export { type AnimationConfig, type AutoExpandConfig, type BaseBlock, type BlockAction, type BlockAddEvent, type BlockDeleteEvent, type BlockIndex, type BlockMoveEvent, type BlockPosition, type BlockRendererProps, type BlockRenderers, type BlockStateContextValue, type BlockStateProviderProps, BlockTree, type BlockTreeCallbacks, type BlockTreeConfig, type BlockTreeCustomization, type BlockTreeProps, type CanDragFn, type CanDropFn, type ContainerRendererProps, type DragEndEvent, type DragMoveEvent, DragOverlay, type DragOverlayProps$1 as DragOverlayProps, type DragStartEvent, DropZone, type DropZoneConfig, type DropZoneProps, type DropZoneType, type ExpandChangeEvent, type HoverChangeEvent, type IdGeneratorFn, type InternalRenderers, type MoveOperation, type OrderingStrategy, type RendererPropsFor, type SensorConfig, TreeRenderer, type TreeRendererProps, type TreeStateContextValue, type TreeStateProviderProps, type UseBlockHistoryOptions, type UseBlockHistoryResult, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockState, createStickyCollision, createTreeState, debounce, deleteBlockAndDescendants, extractBlockId, extractUUID, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSensorConfig, getSubtreeDepth, initFractionalOrder, reparentBlockIndex, reparentMultipleBlocks, useBlockHistory, useConfiguredSensors, weightedVerticalCollision };
+export { type AnimationConfig, type AutoExpandConfig, type BaseBlock, type BlockAction, type BlockAddEvent, type BlockDeleteEvent, type BlockIndex, type BlockMoveEvent, type BlockPosition, type BlockRendererProps, type BlockRenderers, type BlockStateContextValue, type BlockStateProviderProps, BlockTree, type BlockTreeCallbacks, type BlockTreeConfig, type BlockTreeCustomization, type BlockTreeProps, BlockTreeSSR, type BlockTreeSSRProps, type CanDragFn, type CanDropFn, type ContainerRendererProps, type DragEndEvent, type DragMoveEvent, DragOverlay, type DragOverlayProps$1 as DragOverlayProps, type DragStartEvent, DropZone, type DropZoneConfig, type DropZoneProps, type DropZoneType, type ExpandChangeEvent, type HoverChangeEvent, type IdGeneratorFn, type InternalRenderers, type MoveOperation, type NestedBlock, type OrderingStrategy, type RendererPropsFor, type SensorConfig, TreeRenderer, type TreeRendererProps, type TreeStateContextValue, type TreeStateProviderProps, type UseBlockHistoryOptions, type UseBlockHistoryResult, type UseLayoutAnimationOptions, type UseVirtualTreeOptions, type UseVirtualTreeResult, buildOrderedBlocks, cloneMap, cloneParentMap, closestCenterCollision, compareFractionalKeys, computeNormalizedIndex, createBlockState, createStickyCollision, createTreeState, debounce, deleteBlockAndDescendants, extractBlockId, extractUUID, flatToNested, generateId, generateInitialKeys, generateKeyBetween, generateNKeysBetween, getBlockDepth, getDescendantIds, getDropZoneType, getSensorConfig, getSubtreeDepth, initFractionalOrder, nestedToFlat, reparentBlockIndex, reparentMultipleBlocks, triggerHaptic, useBlockHistory, useConfiguredSensors, useLayoutAnimation, useVirtualTree, weightedVerticalCollision };

package/dist/index.js

@@ -135,7 +135,7 @@ function useConfiguredSensors(config = {}) {
       distance: activationDistance
     };
     touchConstraint = {
-      delay: 200,
+      delay: config.longPressDelay ?? 200,
       tolerance: 5
     };
   }
@@ -197,6 +197,11 @@ function debounce(fn, delay) {
 function generateId() {
   return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 }
+function triggerHaptic(durationMs = 10) {
+  if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") {
+    navigator.vibrate(durationMs);
+  }
+}
 function DropZoneComponent({
   id,
   parentId,
@@ -278,10 +283,15 @@ function TreeRenderer({
   draggedBlock,
   focusedId,
   selectedIds,
-  onBlockClick
+  onBlockClick,
+  animation,
+  virtualVisibleIds
 }) {
   const items = blocksByParent.get(parentId) ?? [];
-  const filteredBlocks = items.filter((block) => block.id !== activeId);
+  let filteredBlocks = items.filter((block) => block.id !== activeId);
+  if (virtualVisibleIds && depth === 0) {
+    filteredBlocks = filteredBlocks.filter((block) => virtualVisibleIds.has(block.id));
+  }
   const showGhostHere = previewPosition?.parentId === parentId && draggedBlock;
   const containerClass = depth === 0 ? rootClassName : indentClassName;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, style: { minWidth: 0 }, children: [
@@ -325,7 +335,11 @@ function TreeRenderer({
             onBlockClick,
             children: ({ isDragging }) => {
               if (isContainer) {
-                const childContent = isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                const expandStyle = animation?.expandDuration ? {
+                  transition: `opacity ${animation.expandDuration}ms ${animation.easing ?? "ease"}`,
+                  opacity: isExpanded ? 1 : 0
+                } : void 0;
+                const childContent = isExpanded ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: expandStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
                   TreeRenderer,
                   {
                     blocks,
@@ -347,7 +361,9 @@ function TreeRenderer({
                     draggedBlock,
                     focusedId,
                     selectedIds,
-                    onBlockClick
+                    onBlockClick,
+                    animation,
+                    virtualVisibleIds
                   }
                 ) }) : null;
                 return Renderer({
@@ -786,18 +802,21 @@ function BlockTree({
   canDrop,
   collisionDetection,
   sensors: sensorConfig,
+  animation,
   initialExpanded,
   orderingStrategy = "integer",
   maxDepth,
   keyboardNavigation = false,
   multiSelect = false,
   selectedIds: externalSelectedIds,
-  onSelectionChange
+  onSelectionChange,
+  virtualize
 }) {
   const sensors = useConfiguredSensors({
     activationDistance: sensorConfig?.activationDistance ?? activationDistance,
     activationDelay: sensorConfig?.activationDelay,
-    tolerance: sensorConfig?.tolerance
+    tolerance: sensorConfig?.tolerance,
+    longPressDelay: sensorConfig?.longPressDelay
   });
   const initialExpandedMap = react.useMemo(
     () => computeInitialExpanded(blocks, containerTypes, initialExpanded),
@@ -1008,12 +1027,15 @@ function BlockTree({
         setSelectedIds(/* @__PURE__ */ new Set([id]));
       }
     }
+    if (sensorConfig?.hapticFeedback) {
+      triggerHaptic();
+    }
     stateRef.current.activeId = id;
     stateRef.current.isDragging = true;
     initialBlocksRef.current = [...blocks];
     cachedReorderRef.current = null;
     forceRender();
-  }, [blocks, canDrag, onDragStart, multiSelect, selectedIds, setSelectedIds, visibleBlockIds]);
+  }, [blocks, canDrag, onDragStart, multiSelect, selectedIds, setSelectedIds, visibleBlockIds, sensorConfig?.hapticFeedback]);
   const handleDragMove = react.useCallback((event) => {
     if (!onDragMove) return;
     const id = stateRef.current.activeId;
@@ -1207,6 +1229,61 @@ function BlockTree({
     forceRender();
   }, [blocks, onExpandChange]);
   toggleExpandRef.current = handleToggleExpand;
+  const virtualContainerRef = react.useRef(null);
+  const [virtualScroll, setVirtualScroll] = react.useState({ scrollTop: 0, clientHeight: 0 });
+  react.useEffect(() => {
+    if (!virtualize) return;
+    const el = virtualContainerRef.current;
+    if (!el) return;
+    setVirtualScroll({ scrollTop: el.scrollTop, clientHeight: el.clientHeight });
+    const onScroll = () => {
+      setVirtualScroll({ scrollTop: el.scrollTop, clientHeight: el.clientHeight });
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [virtualize]);
+  const virtualResult = react.useMemo(() => {
+    if (!virtualize) return null;
+    const { itemHeight, overscan = 5 } = virtualize;
+    const { scrollTop, clientHeight } = virtualScroll;
+    const totalHeight = visibleBlockIds.length * itemHeight;
+    const startRaw = Math.floor(scrollTop / itemHeight);
+    const visibleCount = Math.ceil(clientHeight / itemHeight);
+    const start = Math.max(0, startRaw - overscan);
+    const end = Math.min(visibleBlockIds.length - 1, startRaw + visibleCount + overscan);
+    const offsetY = start * itemHeight;
+    const visibleSet = /* @__PURE__ */ new Set();
+    for (let i = start; i <= end; i++) {
+      visibleSet.add(visibleBlockIds[i]);
+    }
+    return { totalHeight, offsetY, visibleSet };
+  }, [virtualize, virtualScroll, visibleBlockIds]);
+  const treeContent = /* @__PURE__ */ jsxRuntime.jsx(
+    TreeRenderer,
+    {
+      blocks,
+      blocksByParent,
+      parentId: null,
+      activeId: stateRef.current.activeId,
+      expandedMap: stateRef.current.expandedMap,
+      renderers,
+      containerTypes,
+      onHover: handleHover,
+      onToggleExpand: handleToggleExpand,
+      dropZoneClassName,
+      dropZoneActiveClassName,
+      indentClassName,
+      rootClassName: className,
+      canDrag,
+      previewPosition,
+      draggedBlock,
+      focusedId: keyboardNavigation ? focusedIdRef.current : void 0,
+      selectedIds: multiSelect ? selectedIds : void 0,
+      onBlockClick: multiSelect ? handleBlockClick : void 0,
+      animation,
+      virtualVisibleIds: virtualResult?.visibleSet ?? null
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.DndContext,
     {
@@ -1218,7 +1295,20 @@ function BlockTree({
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        virtualize ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: (el) => {
+              virtualContainerRef.current = el;
+              rootRef.current = el;
+            },
+            className,
+            style: { minWidth: 0, overflow: "auto", position: "relative" },
+            onKeyDown: keyboardNavigation ? handleKeyDown : void 0,
+            role: keyboardNavigation ? "tree" : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: virtualResult.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: virtualResult.offsetY, left: 0, right: 0 }, children: treeContent }) })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             ref: rootRef,
@@ -1226,30 +1316,7 @@ function BlockTree({
             style: { minWidth: 0 },
             onKeyDown: keyboardNavigation ? handleKeyDown : void 0,
             role: keyboardNavigation ? "tree" : void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              TreeRenderer,
-              {
-                blocks,
-                blocksByParent,
-                parentId: null,
-                activeId: stateRef.current.activeId,
-                expandedMap: stateRef.current.expandedMap,
-                renderers,
-                containerTypes,
-                onHover: handleHover,
-                onToggleExpand: handleToggleExpand,
-                dropZoneClassName,
-                dropZoneActiveClassName,
-                indentClassName,
-                rootClassName: className,
-                canDrag,
-                previewPosition,
-                draggedBlock,
-                focusedId: keyboardNavigation ? focusedIdRef.current : void 0,
-                selectedIds: multiSelect ? selectedIds : void 0,
-                onBlockClick: multiSelect ? handleBlockClick : void 0
-              }
-            )
+            children: treeContent
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(DragOverlay, { activeBlock, selectedCount: multiSelect ? selectedIds.size : 0, children: dragOverlay })
@@ -1257,6 +1324,16 @@ function BlockTree({
     }
   );
 }
+function BlockTreeSSR({ fallback = null, ...props }) {
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(BlockTree, { ...props });
+}
 function blockReducer(state, action, containerTypes = [], orderingStrategy = "integer", maxDepth) {
   switch (action.type) {
     case "ADD_ITEM": {
@@ -1661,8 +1738,143 @@ function useBlockHistory(initialBlocks, options = {}) {
     canRedo: state.future.length > 0
   };
 }
+function useLayoutAnimation(containerRef, options = {}) {
+  const {
+    duration = 200,
+    easing = "ease",
+    selector = "[data-block-id]"
+  } = options;
+  const prevPositions = react.useRef(/* @__PURE__ */ new Map());
+  react.useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const children = container.querySelectorAll(selector);
+    const currentPositions = /* @__PURE__ */ new Map();
+    children.forEach((el) => {
+      const id = el.dataset.blockId;
+      if (id) {
+        currentPositions.set(id, el.getBoundingClientRect());
+      }
+    });
+    children.forEach((el) => {
+      const htmlEl = el;
+      const id = htmlEl.dataset.blockId;
+      if (!id) return;
+      const prev = prevPositions.current.get(id);
+      const curr = currentPositions.get(id);
+      if (!prev || !curr) return;
+      const deltaY = prev.top - curr.top;
+      const deltaX = prev.left - curr.left;
+      if (deltaY === 0 && deltaX === 0) return;
+      htmlEl.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+      htmlEl.style.transition = "none";
+      requestAnimationFrame(() => {
+        htmlEl.style.transition = `transform ${duration}ms ${easing}`;
+        htmlEl.style.transform = "";
+        const onEnd = () => {
+          htmlEl.style.transition = "";
+          htmlEl.removeEventListener("transitionend", onEnd);
+        };
+        htmlEl.addEventListener("transitionend", onEnd);
+      });
+    });
+    prevPositions.current = currentPositions;
+  });
+}
+function useVirtualTree({
+  containerRef,
+  itemCount,
+  itemHeight,
+  overscan = 5
+}) {
+  const [scrollTop, setScrollTop] = react.useState(0);
+  const [containerHeight, setContainerHeight] = react.useState(0);
+  const rafId = react.useRef(0);
+  const handleScroll = react.useCallback(() => {
+    cancelAnimationFrame(rafId.current);
+    rafId.current = requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (el) {
+        setScrollTop(el.scrollTop);
+        setContainerHeight(el.clientHeight);
+      }
+    });
+  }, [containerRef]);
+  react.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setScrollTop(el.scrollTop);
+    setContainerHeight(el.clientHeight);
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+      cancelAnimationFrame(rafId.current);
+    };
+  }, [containerRef, handleScroll]);
+  const totalHeight = itemCount * itemHeight;
+  const startRaw = Math.floor(scrollTop / itemHeight);
+  const visibleCount = Math.ceil(containerHeight / itemHeight);
+  const start = Math.max(0, startRaw - overscan);
+  const end = Math.min(itemCount - 1, startRaw + visibleCount + overscan);
+  const offsetY = start * itemHeight;
+  return {
+    visibleRange: { start, end },
+    totalHeight,
+    offsetY
+  };
+}
+
+// src/utils/serialization.ts
+function flatToNested(blocks) {
+  const byParent = /* @__PURE__ */ new Map();
+  for (const block of blocks) {
+    const key = block.parentId ?? null;
+    const list = byParent.get(key);
+    if (list) {
+      list.push(block);
+    } else {
+      byParent.set(key, [block]);
+    }
+  }
+  for (const list of byParent.values()) {
+    list.sort((a, b) => {
+      if (typeof a.order === "string" && typeof b.order === "string") {
+        return a.order < b.order ? -1 : a.order > b.order ? 1 : 0;
+      }
+      return Number(a.order) - Number(b.order);
+    });
+  }
+  function buildChildren(parentId) {
+    const siblings = byParent.get(parentId) ?? [];
+    return siblings.map((block) => {
+      const { parentId: _p, order: _o, ...rest } = block;
+      return {
+        ...rest,
+        children: buildChildren(block.id)
+      };
+    });
+  }
+  return buildChildren(null);
+}
+function nestedToFlat(nested) {
+  const result = [];
+  function walk(nodes, parentId) {
+    for (let i = 0; i < nodes.length; i++) {
+      const { children, ...rest } = nodes[i];
+      result.push({
+        ...rest,
+        parentId,
+        order: i
+      });
+      walk(children, rest.id);
+    }
+  }
+  walk(nested, null);
+  return result;
+}
 
 exports.BlockTree = BlockTree;
+exports.BlockTreeSSR = BlockTreeSSR;
 exports.DragOverlay = DragOverlay;
 exports.DropZone = DropZone;
 exports.TreeRenderer = TreeRenderer;
@@ -1679,6 +1891,7 @@ exports.debounce = debounce;
 exports.deleteBlockAndDescendants = deleteBlockAndDescendants;
 exports.extractBlockId = extractBlockId;
 exports.extractUUID = extractUUID;
+exports.flatToNested = flatToNested;
 exports.generateId = generateId;
 exports.generateInitialKeys = generateInitialKeys;
 exports.generateKeyBetween = generateKeyBetween;
@@ -1689,10 +1902,14 @@ exports.getDropZoneType = getDropZoneType;
 exports.getSensorConfig = getSensorConfig;
 exports.getSubtreeDepth = getSubtreeDepth;
 exports.initFractionalOrder = initFractionalOrder;
+exports.nestedToFlat = nestedToFlat;
 exports.reparentBlockIndex = reparentBlockIndex;
 exports.reparentMultipleBlocks = reparentMultipleBlocks;
+exports.triggerHaptic = triggerHaptic;
 exports.useBlockHistory = useBlockHistory;
 exports.useConfiguredSensors = useConfiguredSensors;
+exports.useLayoutAnimation = useLayoutAnimation;
+exports.useVirtualTree = useVirtualTree;
 exports.weightedVerticalCollision = weightedVerticalCollision;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map