@dnd-block-tree/react 2.0.0

package/dist/index.mjs

@@ -0,0 +1,2360 @@
+import { extractUUID, createStickyCollision, debounce, computeNormalizedIndex, extractBlockId, reparentBlockIndex, getDropZoneType, reparentMultipleBlocks, buildOrderedBlocks, historyReducer, getBlockDepth, validateBlockTree, blockReducer, generateKeyBetween, generateId, getDescendantIds, expandReducer } 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 { useDroppable, useDraggable, useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, DragOverlay as DragOverlay$1, DndContext } from '@dnd-kit/core';
+import { memo, useCallback, useEffect, Fragment, useMemo, useRef, useReducer, useState, createContext, useLayoutEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+
+// src/index.ts
+
+// src/bridge.ts
+function adaptCollisionDetection(coreDetector) {
+  return ({ droppableContainers, collisionRect }) => {
+    if (!collisionRect) return [];
+    const candidates = [];
+    for (const container of droppableContainers) {
+      const rect = container.rect.current;
+      if (!rect) continue;
+      candidates.push({
+        id: String(container.id),
+        rect: {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height,
+          right: rect.right,
+          bottom: rect.bottom
+        }
+      });
+    }
+    const pointerRect = {
+      top: collisionRect.top,
+      left: collisionRect.left,
+      width: collisionRect.width,
+      height: collisionRect.height,
+      right: collisionRect.left + collisionRect.width,
+      bottom: collisionRect.top + collisionRect.height
+    };
+    const results = coreDetector(candidates, pointerRect);
+    return results.map((result) => {
+      const container = droppableContainers.find((c) => String(c.id) === result.id);
+      if (!container) return null;
+      return {
+        id: result.id,
+        data: {
+          droppableContainer: container,
+          value: result.value,
+          left: result.left
+        }
+      };
+    }).filter((c) => c !== null);
+  };
+}
+
+// src/utils/haptic.ts
+function triggerHaptic(durationMs = 10) {
+  if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") {
+    navigator.vibrate(durationMs);
+  }
+}
+var DEFAULT_ACTIVATION_DISTANCE = 8;
+function useConfiguredSensors(config = {}) {
+  const {
+    activationDistance = DEFAULT_ACTIVATION_DISTANCE,
+    activationDelay,
+    tolerance
+  } = config;
+  let pointerConstraint;
+  let touchConstraint;
+  if (activationDelay !== void 0) {
+    pointerConstraint = {
+      delay: activationDelay,
+      tolerance: tolerance ?? 5
+    };
+    touchConstraint = pointerConstraint;
+  } else {
+    pointerConstraint = {
+      distance: activationDistance
+    };
+    touchConstraint = {
+      delay: config.longPressDelay ?? 200,
+      tolerance: 5
+    };
+  }
+  return useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: pointerConstraint
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: touchConstraint
+    }),
+    useSensor(KeyboardSensor)
+  );
+}
+function getSensorConfig(config = {}) {
+  const {
+    activationDistance = DEFAULT_ACTIVATION_DISTANCE,
+    activationDelay,
+    tolerance
+  } = config;
+  let activationConstraint;
+  if (activationDelay !== void 0) {
+    activationConstraint = {
+      delay: activationDelay,
+      tolerance: tolerance ?? 5
+    };
+  } else {
+    activationConstraint = {
+      distance: activationDistance
+    };
+  }
+  return {
+    pointer: { activationConstraint },
+    touch: { activationConstraint }
+  };
+}
+function DropZoneComponent({
+  id,
+  parentId,
+  onHover,
+  activeId,
+  className = "h-1 rounded transition-colors",
+  activeClassName = "bg-blue-500",
+  height = 4
+}) {
+  const { setNodeRef, isOver, active } = useDroppable({ id });
+  const handleInternalHover = useCallback(() => {
+    onHover(id, parentId);
+  }, [onHover, id, parentId]);
+  useEffect(() => {
+    if (isOver) handleInternalHover();
+  }, [isOver, handleInternalHover]);
+  const zoneBlockId = extractUUID(id);
+  const isIntoZone = id.startsWith("into-");
+  if (isIntoZone && active?.id && zoneBlockId === String(active.id)) return null;
+  if (isIntoZone && activeId && zoneBlockId === activeId) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      "data-zone-id": id,
+      "data-parent-id": parentId ?? "",
+      style: { height: isOver ? height * 2 : height },
+      className: `${className} ${isOver ? activeClassName : "bg-transparent"}`
+    }
+  );
+}
+var DropZone = memo(DropZoneComponent);
+function GhostPreview({ children }) {
+  return /* @__PURE__ */ jsx("div", { "data-dnd-ghost": true, className: "opacity-50", style: { pointerEvents: "none" }, children });
+}
+function DraggableBlock({
+  block,
+  children,
+  disabled,
+  focusedId,
+  isSelected,
+  onBlockClick,
+  isContainer,
+  isExpanded,
+  depth,
+  posInSet,
+  setSize
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: block.id,
+    disabled
+  });
+  const isFocused = focusedId === block.id;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      ...attributes,
+      ...listeners,
+      "data-block-id": block.id,
+      tabIndex: isFocused ? 0 : -1,
+      onClick: onBlockClick ? (e) => onBlockClick(block.id, e) : void 0,
+      "data-selected": isSelected || void 0,
+      style: { touchAction: "none", minWidth: 0, outline: "none" },
+      role: "treeitem",
+      "aria-level": depth + 1,
+      "aria-posinset": posInSet,
+      "aria-setsize": setSize,
+      "aria-expanded": isContainer ? isExpanded : void 0,
+      "aria-selected": isSelected ?? void 0,
+      children: children({ isDragging })
+    }
+  );
+}
+function TreeRendererInner({
+  blocks,
+  blocksByParent,
+  parentId,
+  activeId,
+  expandedMap,
+  renderers,
+  containerTypes,
+  onHover,
+  onToggleExpand,
+  depth = 0,
+  dropZoneClassName,
+  dropZoneActiveClassName,
+  indentClassName = "ml-6 border-l border-gray-200 pl-4",
+  rootClassName = "flex flex-col gap-1",
+  canDrag,
+  previewPosition,
+  draggedBlock,
+  focusedId,
+  selectedIds,
+  onBlockClick,
+  animation,
+  virtualVisibleIds
+}) {
+  const items = blocksByParent.get(parentId) ?? [];
+  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__ */ jsxs("div", { className: containerClass, style: { minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        id: parentId ? `into-${parentId}` : "root-start",
+        parentId,
+        onHover,
+        activeId,
+        className: dropZoneClassName,
+        activeClassName: dropZoneActiveClassName
+      }
+    ),
+    filteredBlocks.map((block, index) => {
+      const isContainer = containerTypes.includes(block.type);
+      const isExpanded = expandedMap[block.id] !== false;
+      const Renderer = renderers[block.type];
+      const isDragDisabled = canDrag ? !canDrag(block) : false;
+      const ghostBeforeThis = showGhostHere && previewPosition.index === index;
+      const originalIndex = items.findIndex((b) => b.id === block.id);
+      const isLastInOriginal = originalIndex === items.length - 1;
+      if (!Renderer) {
+        console.warn(`No renderer found for block type: ${block.type}`);
+        return null;
+      }
+      const GhostRenderer = draggedBlock ? renderers[draggedBlock.type] : null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        ghostBeforeThis && GhostRenderer && /* @__PURE__ */ jsx(GhostPreview, { children: GhostRenderer({
+          block: draggedBlock,
+          isDragging: true,
+          depth
+        }) }),
+        /* @__PURE__ */ jsx(
+          DraggableBlock,
+          {
+            block,
+            disabled: isDragDisabled,
+            focusedId,
+            isSelected: selectedIds?.has(block.id),
+            onBlockClick,
+            isContainer,
+            isExpanded,
+            depth,
+            posInSet: originalIndex + 1,
+            setSize: items.length,
+            children: ({ isDragging }) => {
+              if (isContainer) {
+                const animated = animation?.expandDuration && animation.expandDuration > 0;
+                const easing = animation?.easing ?? "ease";
+                const duration = animation?.expandDuration ?? 0;
+                let childContent;
+                if (animated) {
+                  childContent = /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "grid",
+                        gridTemplateRows: isExpanded ? "1fr" : "0fr",
+                        transition: `grid-template-rows ${duration}ms ${easing}`
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            overflow: "hidden",
+                            minHeight: 0,
+                            opacity: isExpanded ? 1 : 0,
+                            transition: `opacity ${duration}ms ${easing}`
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            TreeRenderer,
+                            {
+                              blocks,
+                              blocksByParent,
+                              parentId: block.id,
+                              activeId,
+                              expandedMap,
+                              renderers,
+                              containerTypes,
+                              onHover,
+                              onToggleExpand,
+                              depth: depth + 1,
+                              dropZoneClassName,
+                              dropZoneActiveClassName,
+                              indentClassName,
+                              rootClassName,
+                              canDrag,
+                              previewPosition,
+                              draggedBlock,
+                              focusedId,
+                              selectedIds,
+                              onBlockClick,
+                              animation,
+                              virtualVisibleIds
+                            }
+                          )
+                        }
+                      )
+                    }
+                  );
+                } else {
+                  childContent = isExpanded ? /* @__PURE__ */ jsx(
+                    TreeRenderer,
+                    {
+                      blocks,
+                      blocksByParent,
+                      parentId: block.id,
+                      activeId,
+                      expandedMap,
+                      renderers,
+                      containerTypes,
+                      onHover,
+                      onToggleExpand,
+                      depth: depth + 1,
+                      dropZoneClassName,
+                      dropZoneActiveClassName,
+                      indentClassName,
+                      rootClassName,
+                      canDrag,
+                      previewPosition,
+                      draggedBlock,
+                      focusedId,
+                      selectedIds,
+                      onBlockClick,
+                      animation,
+                      virtualVisibleIds
+                    }
+                  ) : null;
+                }
+                return Renderer({
+                  block,
+                  children: childContent,
+                  isDragging,
+                  depth,
+                  isExpanded,
+                  onToggleExpand: () => onToggleExpand(block.id)
+                });
+              }
+              return Renderer({
+                block,
+                isDragging,
+                depth
+              });
+            }
+          }
+        ),
+        !isLastInOriginal && /* @__PURE__ */ jsx(
+          DropZone,
+          {
+            id: `after-${block.id}`,
+            parentId: block.parentId,
+            onHover,
+            activeId,
+            className: dropZoneClassName,
+            activeClassName: dropZoneActiveClassName
+          }
+        )
+      ] }, block.id);
+    }),
+    showGhostHere && previewPosition.index >= filteredBlocks.length && draggedBlock && (() => {
+      const GhostRenderer = renderers[draggedBlock.type];
+      return GhostRenderer ? /* @__PURE__ */ jsx(GhostPreview, { children: GhostRenderer({
+        block: draggedBlock,
+        isDragging: true,
+        depth
+      }) }) : null;
+    })(),
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        id: parentId ? `end-${parentId}` : "root-end",
+        parentId,
+        onHover,
+        activeId,
+        className: dropZoneClassName,
+        activeClassName: dropZoneActiveClassName
+      }
+    )
+  ] });
+}
+var TreeRenderer = memo(TreeRendererInner);
+function DragOverlay({
+  activeBlock,
+  children,
+  selectedCount = 0
+}) {
+  const showBadge = selectedCount > 1;
+  return /* @__PURE__ */ jsx(DragOverlay$1, { children: activeBlock && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    showBadge && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 4,
+            left: 4,
+            right: -4,
+            bottom: -4,
+            borderRadius: 8,
+            border: "1px solid #d1d5db",
+            background: "#f3f4f6",
+            opacity: 0.6,
+            zIndex: -1
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: -8,
+            right: -8,
+            background: "#3b82f6",
+            color: "white",
+            borderRadius: "50%",
+            width: 22,
+            height: 22,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 11,
+            fontWeight: 700,
+            zIndex: 10,
+            boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+          },
+          children: selectedCount
+        }
+      )
+    ] }),
+    children ? children(activeBlock) : /* @__PURE__ */ jsxs("div", { className: "bg-white border border-gray-300 shadow-md rounded-md p-3 text-sm w-64 pointer-events-none", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-gray-500 uppercase text-xs tracking-wide mb-1", children: activeBlock.type }),
+      /* @__PURE__ */ jsxs("div", { className: "font-semibold text-gray-800", children: [
+        "Block ",
+        activeBlock.id.slice(0, 8)
+      ] })
+    ] })
+  ] }) });
+}
+function getBlockPosition(blocks, blockId) {
+  const block = blocks.find((b) => b.id === blockId);
+  if (!block) return { parentId: null, index: 0 };
+  const siblings = blocks.filter((b) => b.parentId === block.parentId);
+  const index = siblings.findIndex((b) => b.id === blockId);
+  return { parentId: block.parentId, index };
+}
+function computeInitialExpanded(blocks, containerTypes, initialExpanded) {
+  if (initialExpanded === "none") {
+    const expandedMap2 = {};
+    const containers2 = blocks.filter((b) => containerTypes.includes(b.type));
+    for (const container of containers2) {
+      expandedMap2[container.id] = false;
+    }
+    return expandedMap2;
+  }
+  const expandedMap = {};
+  const containers = blocks.filter((b) => containerTypes.includes(b.type));
+  if (initialExpanded === "all" || initialExpanded === void 0) {
+    for (const container of containers) {
+      expandedMap[container.id] = true;
+    }
+  } else if (Array.isArray(initialExpanded)) {
+    for (const id of initialExpanded) {
+      expandedMap[id] = true;
+    }
+  }
+  return expandedMap;
+}
+function getVisibleBlockIds(blocksByParent, containerTypes, expandedMap, parentId = null) {
+  const result = [];
+  const children = blocksByParent.get(parentId) ?? [];
+  for (const block of children) {
+    result.push(block.id);
+    if (containerTypes.includes(block.type) && expandedMap[block.id] !== false) {
+      result.push(...getVisibleBlockIds(blocksByParent, containerTypes, expandedMap, block.id));
+    }
+  }
+  return result;
+}
+function BlockTree({
+  blocks,
+  renderers,
+  containerTypes = [],
+  onChange,
+  dragOverlay,
+  activationDistance = 8,
+  previewDebounce = 150,
+  className = "flex flex-col gap-1",
+  dropZoneClassName,
+  dropZoneActiveClassName,
+  indentClassName,
+  showDropPreview = true,
+  // Callbacks
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  onDragCancel,
+  onBeforeMove,
+  onBlockMove,
+  onExpandChange,
+  onHoverChange,
+  // Customization
+  canDrag,
+  canDrop,
+  collisionDetection,
+  sensors: sensorConfig,
+  animation,
+  initialExpanded,
+  orderingStrategy = "integer",
+  maxDepth,
+  keyboardNavigation = false,
+  multiSelect = false,
+  selectedIds: externalSelectedIds,
+  onSelectionChange,
+  virtualize
+}) {
+  const sensors = useConfiguredSensors({
+    activationDistance: sensorConfig?.activationDistance ?? activationDistance,
+    activationDelay: sensorConfig?.activationDelay,
+    tolerance: sensorConfig?.tolerance,
+    longPressDelay: sensorConfig?.longPressDelay
+  });
+  const initialExpandedMap = useMemo(
+    () => computeInitialExpanded(blocks, containerTypes, initialExpanded),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const stateRef = useRef({
+    activeId: null,
+    hoverZone: null,
+    expandedMap: initialExpandedMap,
+    virtualState: null,
+    isDragging: false
+  });
+  const initialBlocksRef = useRef([]);
+  const cachedReorderRef = useRef(null);
+  const fromPositionRef = useRef(null);
+  const draggedIdsRef = useRef([]);
+  const snapshotRectsRef = useRef(null);
+  const needsResnapshot = useRef(false);
+  const stickyCollisionRef = useRef(
+    adaptCollisionDetection(createStickyCollision(20, snapshotRectsRef))
+  );
+  const coreStickyRef = useRef(createStickyCollision(20, snapshotRectsRef));
+  const snapshotZoneRects = useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const zones = root.querySelectorAll("[data-zone-id]");
+    const map = /* @__PURE__ */ new Map();
+    zones.forEach((el) => {
+      const id = el.getAttribute("data-zone-id");
+      if (id) map.set(id, el.getBoundingClientRect());
+    });
+    snapshotRectsRef.current = map;
+  }, []);
+  const [, forceRender] = useReducer((x) => x + 1, 0);
+  const debouncedSetVirtual = useRef(
+    debounce((newBlocks) => {
+      if (newBlocks) {
+        stateRef.current.virtualState = computeNormalizedIndex(newBlocks);
+      } else {
+        stateRef.current.virtualState = null;
+      }
+      needsResnapshot.current = true;
+      forceRender();
+    }, previewDebounce)
+  ).current;
+  const debouncedDragMove = useRef(
+    debounce((event) => {
+      onDragMove?.(event);
+    }, 50)
+  ).current;
+  const originalIndex = useMemo(
+    () => computeNormalizedIndex(blocks, orderingStrategy),
+    [blocks, orderingStrategy]
+  );
+  const blocksByParent = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const [parentId, ids] of originalIndex.byParent.entries()) {
+      map.set(parentId, ids.map((id) => originalIndex.byId.get(id)).filter(Boolean));
+    }
+    return map;
+  }, [originalIndex]);
+  const focusedIdRef = useRef(null);
+  const rootRef = useRef(null);
+  const lastClickedIdRef = useRef(null);
+  const [internalSelectedIds, setInternalSelectedIds] = useReducer(
+    (_, next) => next,
+    /* @__PURE__ */ new Set()
+  );
+  const selectedIds = externalSelectedIds ?? internalSelectedIds;
+  const setSelectedIds = useCallback((ids) => {
+    if (onSelectionChange) {
+      onSelectionChange(ids);
+    } else {
+      setInternalSelectedIds(ids);
+    }
+  }, [onSelectionChange]);
+  const visibleBlockIds = useMemo(
+    () => getVisibleBlockIds(blocksByParent, containerTypes, stateRef.current.expandedMap),
+    [blocksByParent, containerTypes, stateRef.current.expandedMap]
+  );
+  const focusBlock = useCallback((id) => {
+    focusedIdRef.current = id;
+    if (id && rootRef.current) {
+      const el = rootRef.current.querySelector(`[data-block-id="${id}"]`);
+      el?.focus();
+    }
+    forceRender();
+  }, []);
+  const toggleExpandRef = useRef(() => {
+  });
+  const handleKeyDown = useCallback((event) => {
+    if (!keyboardNavigation) return;
+    const currentId = focusedIdRef.current;
+    const currentIndex = currentId ? visibleBlockIds.indexOf(currentId) : -1;
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const nextIndex = currentIndex < visibleBlockIds.length - 1 ? currentIndex + 1 : currentIndex;
+        focusBlock(visibleBlockIds[nextIndex] ?? null);
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+        focusBlock(visibleBlockIds[prevIndex] ?? null);
+        break;
+      }
+      case "ArrowRight": {
+        event.preventDefault();
+        if (currentId) {
+          const block = originalIndex.byId.get(currentId);
+          if (block && containerTypes.includes(block.type)) {
+            if (stateRef.current.expandedMap[currentId] === false) {
+              toggleExpandRef.current(currentId);
+            } else {
+              const children = blocksByParent.get(currentId) ?? [];
+              if (children.length > 0) focusBlock(children[0].id);
+            }
+          }
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        if (currentId) {
+          const block = originalIndex.byId.get(currentId);
+          if (block && containerTypes.includes(block.type) && stateRef.current.expandedMap[currentId] !== false) {
+            toggleExpandRef.current(currentId);
+          } else if (block?.parentId) {
+            focusBlock(block.parentId);
+          }
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        if (currentId) {
+          const block = originalIndex.byId.get(currentId);
+          if (block && containerTypes.includes(block.type)) {
+            toggleExpandRef.current(currentId);
+          }
+        }
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        if (visibleBlockIds.length > 0) focusBlock(visibleBlockIds[0]);
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        if (visibleBlockIds.length > 0) focusBlock(visibleBlockIds[visibleBlockIds.length - 1]);
+        break;
+      }
+    }
+  }, [keyboardNavigation, visibleBlockIds, focusBlock, originalIndex, containerTypes, blocksByParent]);
+  const handleBlockClick = useCallback((blockId, event) => {
+    if (!multiSelect) return;
+    if (event.metaKey || event.ctrlKey) {
+      const next = new Set(selectedIds);
+      if (next.has(blockId)) {
+        next.delete(blockId);
+      } else {
+        next.add(blockId);
+      }
+      setSelectedIds(next);
+    } else if (event.shiftKey && lastClickedIdRef.current) {
+      const startIdx = visibleBlockIds.indexOf(lastClickedIdRef.current);
+      const endIdx = visibleBlockIds.indexOf(blockId);
+      if (startIdx !== -1 && endIdx !== -1) {
+        const [from, to] = startIdx < endIdx ? [startIdx, endIdx] : [endIdx, startIdx];
+        const next = new Set(selectedIds);
+        for (let i = from; i <= to; i++) {
+          next.add(visibleBlockIds[i]);
+        }
+        setSelectedIds(next);
+      }
+    } else {
+      setSelectedIds(/* @__PURE__ */ new Set([blockId]));
+    }
+    lastClickedIdRef.current = blockId;
+  }, [multiSelect, selectedIds, setSelectedIds, visibleBlockIds]);
+  useEffect(() => {
+    if (!needsResnapshot.current || !stateRef.current.isDragging) return;
+    needsResnapshot.current = false;
+    requestAnimationFrame(() => {
+      snapshotZoneRects();
+    });
+  });
+  useEffect(() => {
+    if (!keyboardNavigation || !focusedIdRef.current || !rootRef.current) return;
+    const el = rootRef.current.querySelector(`[data-block-id="${focusedIdRef.current}"]`);
+    el?.focus();
+  });
+  const previewPosition = useMemo(() => {
+    if (!showDropPreview || !stateRef.current.virtualState || !stateRef.current.activeId) {
+      return null;
+    }
+    const virtualIndex = stateRef.current.virtualState;
+    const activeId = stateRef.current.activeId;
+    const block = virtualIndex.byId.get(activeId);
+    if (!block) return null;
+    const parentId = block.parentId ?? null;
+    const siblings = virtualIndex.byParent.get(parentId) ?? [];
+    const index = siblings.indexOf(activeId);
+    return { parentId, index };
+  }, [showDropPreview, stateRef.current.virtualState, stateRef.current.activeId]);
+  const activeBlock = stateRef.current.activeId ? originalIndex.byId.get(stateRef.current.activeId) ?? null : null;
+  const draggedBlock = activeBlock;
+  const handleDragStart = useCallback((event) => {
+    const id = String(event.active.id);
+    const block = blocks.find((b) => b.id === id);
+    if (!block) return;
+    if (canDrag && !canDrag(block)) {
+      return;
+    }
+    const dragEvent = {
+      block,
+      blockId: id
+    };
+    const result = onDragStart?.(dragEvent);
+    if (result === false) {
+      return;
+    }
+    fromPositionRef.current = getBlockPosition(blocks, id);
+    coreStickyRef.current.reset();
+    if (multiSelect && selectedIds.has(id)) {
+      draggedIdsRef.current = visibleBlockIds.filter((vid) => selectedIds.has(vid));
+    } else {
+      draggedIdsRef.current = [id];
+      if (multiSelect) {
+        setSelectedIds(/* @__PURE__ */ new Set([id]));
+      }
+    }
+    if (sensorConfig?.hapticFeedback) {
+      triggerHaptic();
+    }
+    stateRef.current.activeId = id;
+    stateRef.current.isDragging = true;
+    initialBlocksRef.current = [...blocks];
+    cachedReorderRef.current = null;
+    needsResnapshot.current = true;
+    forceRender();
+  }, [blocks, canDrag, onDragStart, multiSelect, selectedIds, setSelectedIds, visibleBlockIds, sensorConfig?.hapticFeedback]);
+  const handleDragMove = useCallback((event) => {
+    if (!onDragMove) return;
+    const id = stateRef.current.activeId;
+    if (!id) return;
+    const block = blocks.find((b) => b.id === id);
+    if (!block) return;
+    const moveEvent = {
+      block,
+      blockId: id,
+      overZone: stateRef.current.hoverZone,
+      coordinates: {
+        x: event.delta.x,
+        y: event.delta.y
+      }
+    };
+    debouncedDragMove(moveEvent);
+  }, [blocks, onDragMove, debouncedDragMove]);
+  const handleDragOver = useCallback((event) => {
+    if (!event.over) return;
+    const targetZone = String(event.over.id);
+    const activeId = stateRef.current.activeId;
+    if (!activeId) return;
+    const activeBlock2 = blocks.find((b) => b.id === activeId);
+    const targetBlockId = extractBlockId(targetZone);
+    const targetBlock = blocks.find((b) => b.id === targetBlockId) ?? null;
+    if (canDrop && activeBlock2 && !canDrop(activeBlock2, targetZone, targetBlock)) {
+      return;
+    }
+    if (maxDepth != null && activeBlock2) {
+      const baseIndex2 = computeNormalizedIndex(initialBlocksRef.current, orderingStrategy);
+      const testResult = reparentBlockIndex(baseIndex2, activeId, targetZone, containerTypes, orderingStrategy, maxDepth);
+      if (testResult === baseIndex2) return;
+    }
+    if (stateRef.current.hoverZone !== targetZone) {
+      const zoneType = getDropZoneType(targetZone);
+      const hoverEvent = {
+        zoneId: targetZone,
+        zoneType,
+        targetBlock
+      };
+      onHoverChange?.(hoverEvent);
+    }
+    stateRef.current.hoverZone = targetZone;
+    const baseIndex = computeNormalizedIndex(initialBlocksRef.current, orderingStrategy);
+    const ids = draggedIdsRef.current;
+    const updatedIndex = ids.length > 1 ? reparentMultipleBlocks(baseIndex, ids, targetZone, containerTypes, orderingStrategy, maxDepth) : reparentBlockIndex(baseIndex, activeId, targetZone, containerTypes, orderingStrategy, maxDepth);
+    const orderedBlocks = buildOrderedBlocks(updatedIndex, containerTypes, orderingStrategy);
+    cachedReorderRef.current = { targetId: targetZone, reorderedBlocks: orderedBlocks };
+    if (showDropPreview) {
+      debouncedSetVirtual(orderedBlocks);
+    }
+  }, [blocks, containerTypes, debouncedSetVirtual, canDrop, onHoverChange, showDropPreview, maxDepth, orderingStrategy]);
+  const handleDragEnd = useCallback((_event) => {
+    debouncedSetVirtual.cancel();
+    debouncedDragMove.cancel();
+    let cached = cachedReorderRef.current;
+    const activeId = stateRef.current.activeId;
+    const activeBlockData = activeId ? blocks.find((b) => b.id === activeId) : null;
+    if (cached && activeBlockData && fromPositionRef.current && onBeforeMove) {
+      const operation = {
+        block: activeBlockData,
+        from: fromPositionRef.current,
+        targetZone: cached.targetId
+      };
+      const result = onBeforeMove(operation);
+      if (result === false) {
+        stateRef.current.activeId = null;
+        stateRef.current.hoverZone = null;
+        stateRef.current.virtualState = null;
+        stateRef.current.isDragging = false;
+        cachedReorderRef.current = null;
+        initialBlocksRef.current = [];
+        fromPositionRef.current = null;
+        snapshotRectsRef.current = null;
+        forceRender();
+        return;
+      }
+      if (result && result.targetZone !== cached.targetId) {
+        const baseIndex = computeNormalizedIndex(initialBlocksRef.current, orderingStrategy);
+        const ids = draggedIdsRef.current;
+        const updatedIndex = ids.length > 1 ? reparentMultipleBlocks(baseIndex, ids, result.targetZone, containerTypes, orderingStrategy, maxDepth) : reparentBlockIndex(baseIndex, activeId, result.targetZone, containerTypes, orderingStrategy, maxDepth);
+        const reorderedBlocks = buildOrderedBlocks(updatedIndex, containerTypes, orderingStrategy);
+        cached = { targetId: result.targetZone, reorderedBlocks };
+      }
+    }
+    if (activeBlockData) {
+      const endEvent = {
+        block: activeBlockData,
+        blockId: activeId,
+        targetZone: cached?.targetId ?? null,
+        cancelled: false
+      };
+      onDragEnd?.(endEvent);
+    }
+    if (cached && activeBlockData && fromPositionRef.current) {
+      const toPosition = getBlockPosition(cached.reorderedBlocks, activeBlockData.id);
+      const moveEvent = {
+        block: activeBlockData,
+        from: fromPositionRef.current,
+        to: toPosition,
+        blocks: cached.reorderedBlocks,
+        movedIds: [...draggedIdsRef.current]
+      };
+      onBlockMove?.(moveEvent);
+    }
+    stateRef.current.activeId = null;
+    stateRef.current.hoverZone = null;
+    stateRef.current.virtualState = null;
+    stateRef.current.isDragging = false;
+    cachedReorderRef.current = null;
+    initialBlocksRef.current = [];
+    fromPositionRef.current = null;
+    draggedIdsRef.current = [];
+    snapshotRectsRef.current = null;
+    if (cached && onChange) {
+      onChange(cached.reorderedBlocks);
+    }
+    forceRender();
+  }, [blocks, containerTypes, orderingStrategy, debouncedSetVirtual, debouncedDragMove, onChange, onDragEnd, onBlockMove, onBeforeMove]);
+  const handleDragCancel = useCallback((_event) => {
+    debouncedSetVirtual.cancel();
+    debouncedDragMove.cancel();
+    const activeId = stateRef.current.activeId;
+    const activeBlockData = activeId ? blocks.find((b) => b.id === activeId) : null;
+    if (activeBlockData) {
+      const cancelEvent = {
+        block: activeBlockData,
+        blockId: activeId,
+        targetZone: null,
+        cancelled: true
+      };
+      onDragCancel?.(cancelEvent);
+      onDragEnd?.(cancelEvent);
+    }
+    stateRef.current.activeId = null;
+    stateRef.current.hoverZone = null;
+    stateRef.current.virtualState = null;
+    stateRef.current.isDragging = false;
+    cachedReorderRef.current = null;
+    initialBlocksRef.current = [];
+    fromPositionRef.current = null;
+    draggedIdsRef.current = [];
+    snapshotRectsRef.current = null;
+    forceRender();
+  }, [blocks, debouncedSetVirtual, debouncedDragMove, onDragCancel, onDragEnd]);
+  const handleHover = useCallback((zoneId, _parentId) => {
+    const activeId = stateRef.current.activeId;
+    if (!activeId) return;
+    const activeBlockData = blocks.find((b) => b.id === activeId);
+    const targetBlockId = extractBlockId(zoneId);
+    const targetBlock = blocks.find((b) => b.id === targetBlockId) ?? null;
+    if (canDrop && activeBlockData && !canDrop(activeBlockData, zoneId, targetBlock)) {
+      return;
+    }
+    if (maxDepth != null && activeBlockData) {
+      const baseIdx = computeNormalizedIndex(initialBlocksRef.current, orderingStrategy);
+      const testResult = reparentBlockIndex(baseIdx, activeId, zoneId, containerTypes, orderingStrategy, maxDepth);
+      if (testResult === baseIdx) return;
+    }
+    if (stateRef.current.hoverZone !== zoneId) {
+      const zoneType = getDropZoneType(zoneId);
+      const hoverEvent = {
+        zoneId,
+        zoneType,
+        targetBlock
+      };
+      onHoverChange?.(hoverEvent);
+    }
+    stateRef.current.hoverZone = zoneId;
+    const baseIndex = computeNormalizedIndex(initialBlocksRef.current, orderingStrategy);
+    const ids = draggedIdsRef.current;
+    const updatedIndex = ids.length > 1 ? reparentMultipleBlocks(baseIndex, ids, zoneId, containerTypes, orderingStrategy, maxDepth) : reparentBlockIndex(baseIndex, activeId, zoneId, containerTypes, orderingStrategy, maxDepth);
+    const orderedBlocks = buildOrderedBlocks(updatedIndex, containerTypes, orderingStrategy);
+    cachedReorderRef.current = { targetId: zoneId, reorderedBlocks: orderedBlocks };
+    if (showDropPreview) {
+      debouncedSetVirtual(orderedBlocks);
+    }
+  }, [blocks, containerTypes, orderingStrategy, debouncedSetVirtual, canDrop, onHoverChange, showDropPreview, maxDepth]);
+  const handleToggleExpand = useCallback((id) => {
+    const newExpanded = stateRef.current.expandedMap[id] === false;
+    stateRef.current.expandedMap = {
+      ...stateRef.current.expandedMap,
+      [id]: newExpanded
+    };
+    const block = blocks.find((b) => b.id === id);
+    if (block && onExpandChange) {
+      const expandEvent = {
+        block,
+        blockId: id,
+        expanded: newExpanded
+      };
+      onExpandChange(expandEvent);
+    }
+    forceRender();
+  }, [blocks, onExpandChange]);
+  toggleExpandRef.current = handleToggleExpand;
+  const virtualContainerRef = useRef(null);
+  const [virtualScroll, setVirtualScroll] = useState({ scrollTop: 0, clientHeight: 0 });
+  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 = 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 effectiveCollision = collisionDetection ?? stickyCollisionRef.current;
+  const treeContent = /* @__PURE__ */ 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__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: effectiveCollision,
+      onDragStart: handleDragStart,
+      onDragMove: handleDragMove,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      children: [
+        virtualize ? /* @__PURE__ */ 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__ */ jsx("div", { style: { height: virtualResult.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: virtualResult.offsetY, left: 0, right: 0 }, children: treeContent }) })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: rootRef,
+            className,
+            style: { minWidth: 0 },
+            onKeyDown: keyboardNavigation ? handleKeyDown : void 0,
+            role: keyboardNavigation ? "tree" : void 0,
+            children: treeContent
+          }
+        ),
+        /* @__PURE__ */ jsx(DragOverlay, { activeBlock, selectedCount: multiSelect ? selectedIds.size : 0, children: dragOverlay })
+      ]
+    }
+  );
+}
+function BlockTreeSSR({ fallback = null, ...props }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx(BlockTree, { ...props });
+}
+function createBlockState() {
+  const BlockContext = createContext(null);
+  function useBlockState() {
+    const ctx = useContext(BlockContext);
+    if (!ctx) throw new Error("useBlockState must be used inside BlockStateProvider");
+    return ctx;
+  }
+  function BlockStateProvider({
+    children,
+    initialBlocks = [],
+    containerTypes = [],
+    onChange,
+    orderingStrategy = "integer",
+    maxDepth,
+    onBlockAdd,
+    onBlockDelete
+  }) {
+    const reducerWithOptions = useCallback(
+      (state2, action) => blockReducer(state2, action, containerTypes, orderingStrategy, maxDepth),
+      [containerTypes, orderingStrategy, maxDepth]
+    );
+    const [state, dispatch] = useReducer(
+      reducerWithOptions,
+      computeNormalizedIndex(initialBlocks, orderingStrategy)
+    );
+    const blocks = useMemo(() => {
+      const result = [];
+      const walk = (parentId) => {
+        const children2 = state.byParent.get(parentId) ?? [];
+        for (let i = 0; i < children2.length; i++) {
+          const id = children2[i];
+          const b = state.byId.get(id);
+          if (b) {
+            result.push(orderingStrategy === "fractional" ? b : { ...b, order: i });
+            if (containerTypes.includes(b.type)) walk(b.id);
+          }
+        }
+      };
+      walk(null);
+      return result;
+    }, [state, containerTypes, orderingStrategy]);
+    useMemo(() => {
+      onChange?.(blocks);
+    }, [blocks, onChange]);
+    const blockMap = useMemo(() => state.byId, [state]);
+    const childrenMap = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const [parentId, ids] of state.byParent.entries()) {
+        map.set(
+          parentId,
+          ids.map((id) => state.byId.get(id)).filter(Boolean)
+        );
+      }
+      return map;
+    }, [state]);
+    const indexMap = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const ids of state.byParent.values()) {
+        ids.forEach((id, index) => {
+          map.set(id, index);
+        });
+      }
+      return map;
+    }, [state]);
+    const createItem = useCallback(
+      (type, parentId = null) => {
+        const siblings = state.byParent.get(parentId) ?? [];
+        let order = siblings.length;
+        if (orderingStrategy === "fractional") {
+          const lastId = siblings[siblings.length - 1];
+          const lastOrder = lastId ? String(state.byId.get(lastId).order) : null;
+          order = generateKeyBetween(lastOrder, null);
+        }
+        const newItem = { id: generateId(), type, parentId, order };
+        dispatch({ type: "ADD_ITEM", payload: newItem });
+        onBlockAdd?.({ block: newItem, parentId, index: siblings.length });
+        return newItem;
+      },
+      [state, orderingStrategy, onBlockAdd]
+    );
+    const insertItem = useCallback(
+      (type, referenceId, position) => {
+        const referenceBlock = state.byId.get(referenceId);
+        if (!referenceBlock) throw new Error(`Reference block ${referenceId} not found`);
+        const parentId = referenceBlock.parentId ?? null;
+        const siblings = state.byParent.get(parentId) ?? [];
+        const index = siblings.indexOf(referenceId);
+        const insertIndex = position === "before" ? index : index + 1;
+        let order = insertIndex;
+        if (orderingStrategy === "fractional") {
+          const prevId = insertIndex > 0 ? siblings[insertIndex - 1] : null;
+          const nextId = insertIndex < siblings.length ? siblings[insertIndex] : null;
+          const prevOrder = prevId ? String(state.byId.get(prevId).order) : null;
+          const nextOrder = nextId ? String(state.byId.get(nextId).order) : null;
+          order = generateKeyBetween(prevOrder, nextOrder);
+        }
+        const newItem = { id: generateId(), type, parentId, order };
+        dispatch({
+          type: "INSERT_ITEM",
+          payload: { item: newItem, parentId, index: insertIndex }
+        });
+        onBlockAdd?.({ block: newItem, parentId, index: insertIndex });
+        return newItem;
+      },
+      [state, orderingStrategy, onBlockAdd]
+    );
+    const deleteItem = useCallback((id) => {
+      const block = state.byId.get(id);
+      if (block && onBlockDelete) {
+        const deletedIds = [...getDescendantIds(state, id)];
+        onBlockDelete({ block, deletedIds, parentId: block.parentId });
+      }
+      dispatch({ type: "DELETE_ITEM", payload: { id } });
+    }, [state, onBlockDelete]);
+    const moveItem = useCallback((activeId, targetZone) => {
+      dispatch({ type: "MOVE_ITEM", payload: { activeId, targetZone } });
+    }, []);
+    const setAll = useCallback((all) => {
+      dispatch({ type: "SET_ALL", payload: all });
+    }, []);
+    const value = useMemo(
+      () => ({
+        blocks,
+        blockMap,
+        childrenMap,
+        indexMap,
+        normalizedIndex: state,
+        createItem,
+        insertItem,
+        deleteItem,
+        moveItem,
+        setAll
+      }),
+      [
+        blocks,
+        blockMap,
+        childrenMap,
+        indexMap,
+        state,
+        createItem,
+        insertItem,
+        deleteItem,
+        moveItem,
+        setAll
+      ]
+    );
+    return /* @__PURE__ */ jsx(BlockContext.Provider, { value, children });
+  }
+  return {
+    BlockStateProvider,
+    useBlockState
+  };
+}
+function createTreeState(options = {}) {
+  const { previewDebounce = 150, containerTypes = [] } = options;
+  const TreeContext = createContext(null);
+  function useTreeState() {
+    const ctx = useContext(TreeContext);
+    if (!ctx) throw new Error("useTreeState must be used inside TreeStateProvider");
+    return ctx;
+  }
+  function TreeStateProvider({ children, blocks, blockMap }) {
+    const [activeId, setActiveId] = useState(null);
+    const [hoverZone, setHoverZone] = useState(null);
+    const [virtualState, setVirtualState] = useState(null);
+    const [expandedMap, dispatchExpand] = useReducer(expandReducer, {});
+    const initialBlocksRef = useRef([]);
+    const cachedReorderRef = useRef(null);
+    const activeBlock = useMemo(() => {
+      if (!activeId) return null;
+      return blockMap.get(activeId) ?? null;
+    }, [activeId, blockMap]);
+    const debouncedSetVirtualBlocks = useMemo(
+      () => debounce((newBlocks) => {
+        if (!newBlocks) {
+          setVirtualState(null);
+        } else {
+          setVirtualState(computeNormalizedIndex(newBlocks));
+        }
+      }, previewDebounce),
+      [previewDebounce]
+    );
+    const effectiveState = useMemo(() => {
+      return virtualState ?? computeNormalizedIndex(blocks);
+    }, [virtualState, blocks]);
+    const effectiveBlocks = useMemo(() => {
+      return buildOrderedBlocks(effectiveState, containerTypes);
+    }, [effectiveState, containerTypes]);
+    const blocksByParent = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const [parentId, ids] of effectiveState.byParent.entries()) {
+        map.set(
+          parentId,
+          ids.map((id) => effectiveState.byId.get(id)).filter(Boolean)
+        );
+      }
+      return map;
+    }, [effectiveState]);
+    const handleDragStart = useCallback(
+      (id) => {
+        setActiveId(id);
+        if (id) {
+          initialBlocksRef.current = [...blocks];
+          cachedReorderRef.current = null;
+        }
+      },
+      [blocks]
+    );
+    const handleDragOver = useCallback(
+      (targetZone) => {
+        if (!activeId) return;
+        setHoverZone(targetZone);
+        const baseIndex = computeNormalizedIndex(initialBlocksRef.current);
+        const updatedIndex = reparentBlockIndex(baseIndex, activeId, targetZone, containerTypes);
+        const orderedBlocks = buildOrderedBlocks(updatedIndex, containerTypes);
+        cachedReorderRef.current = { targetId: targetZone, reorderedBlocks: orderedBlocks };
+        debouncedSetVirtualBlocks(orderedBlocks);
+      },
+      [activeId, debouncedSetVirtualBlocks, containerTypes]
+    );
+    useCallback(() => {
+      debouncedSetVirtualBlocks.cancel();
+      setVirtualState(null);
+      setActiveId(null);
+      setHoverZone(null);
+      const result = cachedReorderRef.current;
+      cachedReorderRef.current = null;
+      initialBlocksRef.current = [];
+      return result;
+    }, [debouncedSetVirtualBlocks]);
+    const handleHover = useCallback(
+      (zoneId, _parentId) => {
+        if (!activeId) return;
+        handleDragOver(zoneId);
+      },
+      [activeId, handleDragOver]
+    );
+    const toggleExpand = useCallback((id) => {
+      dispatchExpand({ type: "TOGGLE", id });
+    }, []);
+    const setExpandAll = useCallback(
+      (expanded) => {
+        const containerIds = blocks.filter((b) => containerTypes.includes(b.type)).map((b) => b.id);
+        dispatchExpand({ type: "SET_ALL", expanded, ids: containerIds });
+      },
+      [blocks, containerTypes]
+    );
+    useEffect(() => {
+      return () => {
+        debouncedSetVirtualBlocks.cancel();
+      };
+    }, [debouncedSetVirtualBlocks]);
+    const value = useMemo(
+      () => ({
+        activeId,
+        activeBlock,
+        hoverZone,
+        expandedMap,
+        effectiveBlocks,
+        blocksByParent,
+        setActiveId: handleDragStart,
+        setHoverZone,
+        toggleExpand,
+        setExpandAll,
+        handleHover
+      }),
+      [
+        activeId,
+        activeBlock,
+        hoverZone,
+        expandedMap,
+        effectiveBlocks,
+        blocksByParent,
+        handleDragStart,
+        toggleExpand,
+        setExpandAll,
+        handleHover
+      ]
+    );
+    return /* @__PURE__ */ jsx(TreeContext.Provider, { value, children });
+  }
+  return {
+    TreeStateProvider,
+    useTreeState
+  };
+}
+function useBlockHistory(initialBlocks, options = {}) {
+  const { maxSteps = 50 } = options;
+  const [state, dispatch] = useReducer(historyReducer, {
+    past: [],
+    present: initialBlocks,
+    future: []
+  });
+  const set = useCallback(
+    (blocks) => dispatch({ type: "SET", payload: blocks, maxSteps }),
+    [maxSteps]
+  );
+  const undo = useCallback(() => dispatch({ type: "UNDO" }), []);
+  const redo = useCallback(() => dispatch({ type: "REDO" }), []);
+  return {
+    blocks: state.present,
+    set,
+    undo,
+    redo,
+    canUndo: state.past.length > 0,
+    canRedo: state.future.length > 0
+  };
+}
+function useLayoutAnimation(containerRef, options = {}) {
+  const {
+    duration = 200,
+    easing = "ease",
+    selector = "[data-block-id]"
+  } = options;
+  const prevPositions = useRef(/* @__PURE__ */ new Map());
+  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] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const rafId = useRef(0);
+  const handleScroll = useCallback(() => {
+    cancelAnimationFrame(rafId.current);
+    rafId.current = requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (el) {
+        setScrollTop(el.scrollTop);
+        setContainerHeight(el.clientHeight);
+      }
+    });
+  }, [containerRef]);
+  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
+  };
+}
+var MAX_EVENTS = 100;
+function useDevToolsCallbacks() {
+  const [events, setEvents] = useState([]);
+  const nextIdRef = useRef(1);
+  const addEvent = useCallback((type, summary) => {
+    const entry = {
+      id: nextIdRef.current++,
+      timestamp: Date.now(),
+      type,
+      summary
+    };
+    setEvents((prev) => [entry, ...prev].slice(0, MAX_EVENTS));
+  }, []);
+  const clearEvents = useCallback(() => {
+    setEvents([]);
+  }, []);
+  const callbacks = useMemo(() => ({
+    onDragStart: (event) => {
+      addEvent("dragStart", `Started dragging "${event.blockId}"`);
+    },
+    onDragEnd: (event) => {
+      if (event.cancelled) {
+        addEvent("dragEnd", `Cancelled drag of "${event.blockId}"`);
+      } else {
+        addEvent("dragEnd", `Dropped "${event.blockId}" at ${event.targetZone ?? "none"}`);
+      }
+    },
+    onBlockMove: (event) => {
+      const fromStr = `parent=${event.from.parentId ?? "root"}[${event.from.index}]`;
+      const toStr = `parent=${event.to.parentId ?? "root"}[${event.to.index}]`;
+      const ids = event.movedIds.length > 1 ? ` (${event.movedIds.length} blocks)` : "";
+      addEvent("blockMove", `Moved "${event.block.id}" from ${fromStr} to ${toStr}${ids}`);
+    },
+    onExpandChange: (event) => {
+      addEvent("expandChange", `${event.expanded ? "Expanded" : "Collapsed"} "${event.blockId}"`);
+    },
+    onHoverChange: (event) => {
+      if (event.zoneId) {
+        addEvent("hoverChange", `Hovering over zone "${event.zoneId}"`);
+      }
+    }
+  }), [addEvent]);
+  return { callbacks, events, clearEvents };
+}
+function DevToolsLogo({ size = 20 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "8", height: "5", rx: "1", fill: "#3b82f6", opacity: "0.9" }),
+        /* @__PURE__ */ jsx("rect", { x: "8", y: "10", width: "8", height: "5", rx: "1", fill: "#10b981", opacity: "0.9" }),
+        /* @__PURE__ */ jsx("rect", { x: "14", y: "18", width: "8", height: "5", rx: "1", fill: "#f59e0b", opacity: "0.9" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 7 L6 10 L8 10", stroke: "#888", strokeWidth: "1.5", fill: "none", opacity: "0.6" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 15 L12 18 L14 18", stroke: "#888", strokeWidth: "1.5", fill: "none", opacity: "0.6" })
+      ]
+    }
+  );
+}
+function computeDiffMap(prev, next) {
+  const prevMap = new Map(prev.map((b) => [b.id, b]));
+  const changeMap = /* @__PURE__ */ new Map();
+  for (const block of next) {
+    const prevBlock = prevMap.get(block.id);
+    if (!prevBlock) {
+      changeMap.set(block.id, "added");
+    } else if (prevBlock.parentId !== block.parentId || prevBlock.order !== block.order) {
+      changeMap.set(block.id, "moved");
+    } else {
+      changeMap.set(block.id, "unchanged");
+    }
+  }
+  return changeMap;
+}
+function buildDiffTree(blocks, changeMap) {
+  const result = [];
+  const byParent = /* @__PURE__ */ new Map();
+  for (const block of blocks) {
+    const key = block.parentId ?? null;
+    const list = byParent.get(key) ?? [];
+    list.push(block);
+    byParent.set(key, list);
+  }
+  function walk(parentId, depth) {
+    const children = byParent.get(parentId) ?? [];
+    children.sort((a, b) => {
+      const ao = a.order, bo = b.order;
+      if (typeof ao === "number" && typeof bo === "number") return ao - bo;
+      return String(ao) < String(bo) ? -1 : String(ao) > String(bo) ? 1 : 0;
+    });
+    for (const block of children) {
+      result.push({ block, changeType: changeMap.get(block.id) ?? "unchanged", depth });
+      walk(block.id, depth + 1);
+    }
+  }
+  walk(null, 0);
+  return result;
+}
+var TYPE_COLORS = {
+  dragStart: "#3b82f6",
+  dragEnd: "#10b981",
+  blockMove: "#f59e0b",
+  expandChange: "#8b5cf6",
+  hoverChange: "#6b7280"
+};
+var TYPE_LABELS = {
+  dragStart: "DRAG",
+  dragEnd: "DROP",
+  blockMove: "MOVE",
+  expandChange: "EXPAND",
+  hoverChange: "HOVER"
+};
+var TYPE_TOOLTIPS = {
+  dragStart: "onDragStart -- a block was picked up",
+  dragEnd: "onDragEnd -- a block was dropped or drag was cancelled",
+  blockMove: "onBlockMove -- a block was reparented to a new position",
+  expandChange: "onExpandChange -- a container was expanded or collapsed",
+  hoverChange: "onHoverChange -- the pointer entered a drop zone"
+};
+var DEFAULT_WIDTH = 340;
+var DEFAULT_HEIGHT = 420;
+var DIFF_EXTRA_WIDTH = 300;
+var MIN_WIDTH = 280;
+var MIN_HEIGHT = 200;
+var BTN_SIZE = 40;
+var BTN_MARGIN = 16;
+var STORAGE_KEY = "dnd-devtools-position";
+var BTN_DRAG_THRESHOLD = 5;
+function cornerToXY(corner) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+  switch (corner) {
+    case "top-left":
+      return { x: BTN_MARGIN, y: BTN_MARGIN };
+    case "top-right":
+      return { x: vw - BTN_MARGIN - BTN_SIZE, y: BTN_MARGIN };
+    case "bottom-right":
+      return { x: vw - BTN_MARGIN - BTN_SIZE, y: vh - BTN_MARGIN - BTN_SIZE };
+    case "bottom-left":
+    default:
+      return { x: BTN_MARGIN, y: vh - BTN_MARGIN - BTN_SIZE };
+  }
+}
+function xyToCorner(x, y) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+  const isLeft = x + BTN_SIZE / 2 < vw / 2;
+  const isTop = y + BTN_SIZE / 2 < vh / 2;
+  if (isTop && isLeft) return "top-left";
+  if (isTop) return "top-right";
+  if (isLeft) return "bottom-left";
+  return "bottom-right";
+}
+function loadStoredPosition() {
+  if (typeof window === "undefined") return null;
+  try {
+    const v = localStorage.getItem(STORAGE_KEY);
+    if (v === "bottom-left" || v === "bottom-right" || v === "top-left" || v === "top-right") return v;
+  } catch {
+  }
+  return null;
+}
+function savePosition(corner) {
+  try {
+    localStorage.setItem(STORAGE_KEY, corner);
+  } catch {
+  }
+}
+function computeCardOrigin(corner, width, height) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+  let x;
+  let y;
+  switch (corner) {
+    case "bottom-right":
+      x = vw - BTN_MARGIN - width;
+      y = vh - BTN_MARGIN - height - BTN_SIZE - 8;
+      break;
+    case "top-left":
+      x = BTN_MARGIN;
+      y = BTN_MARGIN + BTN_SIZE + 8;
+      break;
+    case "top-right":
+      x = vw - BTN_MARGIN - width;
+      y = BTN_MARGIN + BTN_SIZE + 8;
+      break;
+    case "bottom-left":
+    default:
+      x = BTN_MARGIN;
+      y = vh - BTN_MARGIN - height - BTN_SIZE - 8;
+      break;
+  }
+  return {
+    x: Math.max(0, Math.min(x, vw - width)),
+    y: Math.max(0, Math.min(y, vh - height))
+  };
+}
+function BlockTreeDevTools({
+  blocks,
+  containerTypes = [],
+  events,
+  onClearEvents,
+  getLabel = (b) => b.type,
+  initialOpen = false,
+  position = "bottom-left",
+  buttonStyle,
+  panelStyle,
+  forceMount = false
+}) {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production" && !forceMount) {
+    return null;
+  }
+  const [isOpen, setIsOpen] = useState(initialOpen);
+  const [showDiff, setShowDiff] = useState(false);
+  const [cardPos, setCardPos] = useState(null);
+  const [cardSize, setCardSize] = useState({ w: DEFAULT_WIDTH, h: DEFAULT_HEIGHT });
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [activeCorner, setActiveCorner] = useState(() => loadStoredPosition() ?? position);
+  const [btnPos, setBtnPos] = useState(null);
+  const [btnDragging, setBtnDragging] = useState(false);
+  const [btnTransition, setBtnTransition] = useState(false);
+  const btnDragRef = useRef({
+    active: false,
+    startX: 0,
+    startY: 0,
+    origX: 0,
+    origY: 0,
+    moved: false
+  });
+  useEffect(() => {
+    if (!btnDragging) {
+      setBtnPos(cornerToXY(activeCorner));
+    }
+  }, [activeCorner, btnDragging]);
+  useEffect(() => {
+    const onResize = () => {
+      if (!btnDragRef.current.active) {
+        setBtnPos(cornerToXY(activeCorner));
+      }
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [activeCorner]);
+  const handleBtnPointerDown = useCallback((e) => {
+    if (!btnPos) return;
+    btnDragRef.current = {
+      active: true,
+      startX: e.clientX,
+      startY: e.clientY,
+      origX: btnPos.x,
+      origY: btnPos.y,
+      moved: false
+    };
+    e.target.setPointerCapture(e.pointerId);
+  }, [btnPos]);
+  const handleBtnPointerMove = useCallback((e) => {
+    const r = btnDragRef.current;
+    if (!r.active) return;
+    const dx = e.clientX - r.startX;
+    const dy = e.clientY - r.startY;
+    if (!r.moved && Math.abs(dx) < BTN_DRAG_THRESHOLD && Math.abs(dy) < BTN_DRAG_THRESHOLD) return;
+    r.moved = true;
+    setBtnDragging(true);
+    const newX = r.origX + dx;
+    const newY = r.origY + dy;
+    const maxX = window.innerWidth - BTN_SIZE;
+    const maxY = window.innerHeight - BTN_SIZE;
+    setBtnPos({
+      x: Math.max(0, Math.min(newX, maxX)),
+      y: Math.max(0, Math.min(newY, maxY))
+    });
+  }, []);
+  const handleBtnPointerUp = useCallback(() => {
+    if (!btnPos) return;
+    const wasMoved = btnDragRef.current.moved;
+    btnDragRef.current.active = false;
+    if (wasMoved) {
+      const newCorner = xyToCorner(btnPos.x, btnPos.y);
+      setActiveCorner(newCorner);
+      savePosition(newCorner);
+      setBtnTransition(true);
+      setBtnPos(cornerToXY(newCorner));
+      setTimeout(() => {
+        setBtnTransition(false);
+        setBtnDragging(false);
+      }, 300);
+    } else {
+      setBtnDragging(false);
+      setIsOpen((prev) => !prev);
+    }
+  }, [btnPos]);
+  const dragRef = useRef({
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    origX: 0,
+    origY: 0
+  });
+  const resizeRef = useRef({ active: false, edge: "", startX: 0, startY: 0, origX: 0, origY: 0, origW: 0, origH: 0 });
+  const cardRef = useRef(null);
+  const prevBlocksRef = useRef(blocks);
+  const diffChangeMap = useMemo(() => computeDiffMap(prevBlocksRef.current, blocks), [blocks]);
+  useEffect(() => {
+    prevBlocksRef.current = blocks;
+  }, [blocks]);
+  const diffTree = useMemo(() => buildDiffTree(blocks, diffChangeMap), [blocks, diffChangeMap]);
+  const diffStats = useMemo(() => {
+    let added = 0, moved = 0;
+    for (const { changeType } of diffTree) {
+      if (changeType === "added") added++;
+      if (changeType === "moved") moved++;
+    }
+    return { added, moved };
+  }, [diffTree]);
+  useEffect(() => {
+    setCardSize((prev) => {
+      const targetW = showDiff ? DEFAULT_WIDTH + DIFF_EXTRA_WIDTH : DEFAULT_WIDTH;
+      const wasDefault = Math.abs(prev.w - DEFAULT_WIDTH) < 20;
+      const wasExpanded = Math.abs(prev.w - (DEFAULT_WIDTH + DIFF_EXTRA_WIDTH)) < 20;
+      let newW = prev.w;
+      if (showDiff && (wasDefault || prev.w < targetW)) {
+        newW = targetW;
+      } else if (!showDiff && wasExpanded) {
+        newW = DEFAULT_WIDTH;
+      }
+      if (newW !== prev.w) {
+        setCardPos((cp) => {
+          if (!cp) return cp;
+          const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+          const maxX = Math.max(0, vw - newW);
+          if (cp.x > maxX) return { ...cp, x: maxX };
+          return cp;
+        });
+        return { ...prev, w: newW };
+      }
+      return prev;
+    });
+  }, [showDiff]);
+  const getDefaultCardPos = useCallback(() => {
+    return computeCardOrigin(activeCorner, cardSize.w, cardSize.h);
+  }, [activeCorner, cardSize.w, cardSize.h]);
+  useEffect(() => {
+    if (isOpen && !cardPos) {
+      setCardPos(getDefaultCardPos());
+    }
+  }, [isOpen, cardPos, getDefaultCardPos]);
+  const handleDragPointerDown = useCallback((e) => {
+    e.preventDefault();
+    dragRef.current = {
+      dragging: true,
+      startX: e.clientX,
+      startY: e.clientY,
+      origX: cardPos?.x ?? 0,
+      origY: cardPos?.y ?? 0
+    };
+    e.target.setPointerCapture(e.pointerId);
+  }, [cardPos]);
+  const handleDragPointerMove = useCallback((e) => {
+    if (!dragRef.current.dragging) return;
+    const dx = e.clientX - dragRef.current.startX;
+    const dy = e.clientY - dragRef.current.startY;
+    const newX = dragRef.current.origX + dx;
+    const newY = dragRef.current.origY + dy;
+    const maxX = window.innerWidth - cardSize.w;
+    const maxY = window.innerHeight - 40;
+    setCardPos({
+      x: Math.max(0, Math.min(newX, maxX)),
+      y: Math.max(0, Math.min(newY, maxY))
+    });
+  }, [cardSize.w]);
+  const handleDragPointerUp = useCallback(() => {
+    dragRef.current.dragging = false;
+  }, []);
+  const handleResizePointerDown = useCallback((edge) => (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resizeRef.current = {
+      active: true,
+      edge,
+      startX: e.clientX,
+      startY: e.clientY,
+      origX: cardPos?.x ?? 0,
+      origY: cardPos?.y ?? 0,
+      origW: cardSize.w,
+      origH: cardSize.h
+    };
+    e.target.setPointerCapture(e.pointerId);
+  }, [cardPos, cardSize]);
+  const handleResizePointerMove = useCallback((e) => {
+    const r = resizeRef.current;
+    if (!r.active) return;
+    const dx = e.clientX - r.startX;
+    const dy = e.clientY - r.startY;
+    let newW = r.origW;
+    let newH = r.origH;
+    let newX = r.origX;
+    let newY = r.origY;
+    if (r.edge.includes("e")) newW = Math.max(MIN_WIDTH, r.origW + dx);
+    if (r.edge.includes("w")) {
+      newW = Math.max(MIN_WIDTH, r.origW - dx);
+      newX = r.origX + (r.origW - newW);
+    }
+    if (r.edge.includes("s")) newH = Math.max(MIN_HEIGHT, r.origH + dy);
+    if (r.edge.includes("n")) {
+      newH = Math.max(MIN_HEIGHT, r.origH - dy);
+      newY = r.origY + (r.origH - newH);
+    }
+    setCardSize({ w: newW, h: newH });
+    setCardPos({ x: newX, y: newY });
+  }, []);
+  const handleResizePointerUp = useCallback(() => {
+    resizeRef.current.active = false;
+  }, []);
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const toggleDiff = useCallback(() => {
+    setShowDiff((prev) => !prev);
+  }, []);
+  const renderCountRef = useRef(0);
+  const lastRenderTimeRef = useRef(performance.now());
+  const prevBlockCountRef = useRef(blocks.length);
+  renderCountRef.current++;
+  const renderTime = performance.now() - lastRenderTimeRef.current;
+  lastRenderTimeRef.current = performance.now();
+  const blockCountDelta = blocks.length - prevBlockCountRef.current;
+  useEffect(() => {
+    prevBlockCountRef.current = blocks.length;
+  }, [blocks.length]);
+  const treeStats = useMemo(() => {
+    const index = computeNormalizedIndex(blocks);
+    const containers = blocks.filter((b) => containerTypes.includes(b.type));
+    let maxDepthVal = 0;
+    for (const block of blocks) {
+      const d = getBlockDepth(index, block.id);
+      if (d > maxDepthVal) maxDepthVal = d;
+    }
+    const validation = validateBlockTree(index);
+    return {
+      blockCount: blocks.length,
+      containerCount: containers.length,
+      maxDepth: maxDepthVal,
+      validation
+    };
+  }, [blocks, containerTypes]);
+  const formatTime = (ts) => {
+    const d = new Date(ts);
+    return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}`;
+  };
+  const isBottom = activeCorner.startsWith("bottom");
+  const isLeft = activeCorner.endsWith("left");
+  if (!btnPos) return null;
+  const triggerBtnStyle = {
+    position: "fixed",
+    left: btnPos.x,
+    top: btnPos.y,
+    zIndex: 99998,
+    width: BTN_SIZE,
+    height: BTN_SIZE,
+    borderRadius: "50%",
+    border: "none",
+    background: isOpen ? "rgba(59, 130, 246, 0.9)" : "rgba(30, 30, 30, 0.85)",
+    color: "#fff",
+    cursor: btnDragging ? "grabbing" : "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+    transition: btnTransition ? "left 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s" : "background 0.15s",
+    touchAction: "none",
+    userSelect: "none",
+    ...buttonStyle
+  };
+  const tooltipStyle = {
+    position: "absolute",
+    whiteSpace: "nowrap",
+    fontSize: 11,
+    fontWeight: 500,
+    padding: "4px 10px",
+    borderRadius: 6,
+    background: "rgba(15, 15, 20, 0.95)",
+    color: "#ccc",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+    pointerEvents: "none",
+    ...isBottom ? { bottom: "100%", marginBottom: 8 } : { top: "100%", marginTop: 8 },
+    ...isLeft ? { left: 0 } : { right: 0 }
+  };
+  const cardStyle = {
+    position: "fixed",
+    left: cardPos?.x ?? 0,
+    top: cardPos?.y ?? 0,
+    zIndex: 99999,
+    width: cardSize.w,
+    height: cardSize.h,
+    background: "rgba(20, 20, 24, 0.95)",
+    backdropFilter: "blur(12px)",
+    border: "1px solid rgba(255,255,255,0.1)",
+    borderRadius: 10,
+    color: "#e0e0e0",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: 12,
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
+    overflow: "hidden",
+    ...panelStyle
+  };
+  const titleBarStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 12px",
+    gap: 8,
+    background: "rgba(255,255,255,0.04)",
+    borderBottom: "1px solid rgba(255,255,255,0.08)",
+    cursor: "grab",
+    userSelect: "none",
+    flexShrink: 0,
+    touchAction: "none"
+  };
+  const titleTextStyle = {
+    fontSize: 11,
+    fontWeight: 600,
+    letterSpacing: "0.03em",
+    opacity: 0.8,
+    flexShrink: 0
+  };
+  const titleBtnStyle = (active) => ({
+    height: 22,
+    padding: "0 8px",
+    borderRadius: 4,
+    border: "1px solid " + (active ? "rgba(59,130,246,0.5)" : "rgba(128,128,128,0.25)"),
+    background: active ? "rgba(59,130,246,0.15)" : "transparent",
+    color: active ? "#93b8f7" : "#999",
+    cursor: "pointer",
+    fontSize: 10,
+    fontWeight: 600,
+    letterSpacing: "0.02em",
+    flexShrink: 0
+  });
+  const closeBtnStyle = {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    border: "none",
+    background: "transparent",
+    color: "#999",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 14,
+    lineHeight: "1",
+    padding: 0,
+    flexShrink: 0
+  };
+  const bodyStyle = {
+    flex: 1,
+    display: "flex",
+    flexDirection: "row",
+    overflow: "hidden",
+    minHeight: 0
+  };
+  const mainColumnStyle = {
+    flex: showDiff ? "0 0 50%" : "1 1 100%",
+    overflow: "auto",
+    padding: "10px 12px",
+    minWidth: 0
+  };
+  const diffColumnStyle = {
+    flex: "0 0 50%",
+    overflow: "auto",
+    padding: "10px 12px",
+    borderLeft: "1px solid rgba(255,255,255,0.08)",
+    minWidth: 0
+  };
+  const sectionStyle = {
+    marginBottom: 8
+  };
+  const headingStyle = {
+    fontSize: 11,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    opacity: 0.6,
+    marginBottom: 6
+  };
+  const statRowStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    fontSize: 12,
+    padding: "2px 0"
+  };
+  const statValueStyle = {
+    fontFamily: "monospace",
+    fontSize: 11,
+    opacity: 0.8
+  };
+  const badgeStyle = (color) => ({
+    display: "inline-block",
+    fontSize: 9,
+    fontWeight: 700,
+    fontFamily: "monospace",
+    padding: "1px 5px",
+    borderRadius: 3,
+    backgroundColor: color + "22",
+    color,
+    marginRight: 6,
+    flexShrink: 0
+  });
+  const eventListStyle = {
+    maxHeight: 160,
+    overflowY: "auto",
+    fontSize: 11,
+    lineHeight: "1.6"
+  };
+  const eventItemStyle = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 4,
+    padding: "2px 0",
+    borderBottom: "1px solid rgba(128,128,128,0.1)"
+  };
+  const timeStyle = {
+    fontFamily: "monospace",
+    fontSize: 10,
+    opacity: 0.4,
+    flexShrink: 0,
+    minWidth: 52
+  };
+  const clearBtnStyle = {
+    fontSize: 10,
+    padding: "2px 8px",
+    border: "1px solid rgba(128,128,128,0.3)",
+    borderRadius: 4,
+    background: "transparent",
+    color: "#ccc",
+    cursor: "pointer",
+    opacity: 0.7
+  };
+  const EDGE_SIZE = 6;
+  const resizeEdge = (edge) => {
+    const base = {
+      position: "absolute",
+      zIndex: 1
+    };
+    const cursors = {
+      n: "ns-resize",
+      s: "ns-resize",
+      e: "ew-resize",
+      w: "ew-resize",
+      ne: "nesw-resize",
+      nw: "nwse-resize",
+      se: "nwse-resize",
+      sw: "nesw-resize"
+    };
+    const styles = {
+      n: { top: 0, left: EDGE_SIZE, right: EDGE_SIZE, height: EDGE_SIZE },
+      s: { bottom: 0, left: EDGE_SIZE, right: EDGE_SIZE, height: EDGE_SIZE },
+      e: { right: 0, top: EDGE_SIZE, bottom: EDGE_SIZE, width: EDGE_SIZE },
+      w: { left: 0, top: EDGE_SIZE, bottom: EDGE_SIZE, width: EDGE_SIZE },
+      ne: { top: 0, right: 0, width: EDGE_SIZE * 2, height: EDGE_SIZE * 2 },
+      nw: { top: 0, left: 0, width: EDGE_SIZE * 2, height: EDGE_SIZE * 2 },
+      se: { bottom: 0, right: 0, width: EDGE_SIZE * 2, height: EDGE_SIZE * 2 },
+      sw: { bottom: 0, left: 0, width: EDGE_SIZE * 2, height: EDGE_SIZE * 2 }
+    };
+    return { ...base, cursor: cursors[edge], ...styles[edge] };
+  };
+  const EDGES = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+  const diffRowColor = (ct) => {
+    if (ct === "added") return { background: "rgba(16,185,129,0.1)", color: "#34d399" };
+    if (ct === "moved") return { background: "rgba(245,158,11,0.1)", color: "#fbbf24" };
+    return { color: "rgba(200,200,200,0.5)" };
+  };
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "fixed", left: btnPos.x, top: btnPos.y, zIndex: 99998 }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onPointerDown: handleBtnPointerDown,
+          onPointerMove: handleBtnPointerMove,
+          onPointerUp: handleBtnPointerUp,
+          onMouseEnter: () => setShowTooltip(true),
+          onMouseLeave: () => setShowTooltip(false),
+          style: triggerBtnStyle,
+          "aria-label": isOpen ? "Close DevTools" : "Open DevTools",
+          children: /* @__PURE__ */ jsx(DevToolsLogo, { size: 20 })
+        }
+      ),
+      showTooltip && !isOpen && !btnDragging && /* @__PURE__ */ jsx("div", { style: tooltipStyle, children: "dnd-block-tree DevTools" })
+    ] }),
+    isOpen && cardPos && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: cardRef,
+        style: cardStyle,
+        "data-devtools-root": "",
+        children: [
+          EDGES.map((edge) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: resizeEdge(edge),
+              onPointerDown: handleResizePointerDown(edge),
+              onPointerMove: handleResizePointerMove,
+              onPointerUp: handleResizePointerUp
+            },
+            edge
+          )),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: titleBarStyle,
+              onPointerDown: handleDragPointerDown,
+              onPointerMove: handleDragPointerMove,
+              onPointerUp: handleDragPointerUp,
+              children: [
+                /* @__PURE__ */ jsx("span", { style: titleTextStyle, children: "DevTools" }),
+                /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: toggleDiff,
+                    style: titleBtnStyle(showDiff),
+                    onPointerDown: (e) => e.stopPropagation(),
+                    title: "Toggle structure diff",
+                    children: "Diff"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: toggle,
+                    style: closeBtnStyle,
+                    onPointerDown: (e) => e.stopPropagation(),
+                    "aria-label": "Close DevTools",
+                    children: "\xD7"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: bodyStyle, children: [
+            /* @__PURE__ */ jsxs("div", { style: mainColumnStyle, children: [
+              /* @__PURE__ */ jsxs("div", { style: sectionStyle, "data-devtools-section": "tree-state", children: [
+                /* @__PURE__ */ jsx("div", { style: headingStyle, title: "Live snapshot of the block tree structure", children: "Tree State" }),
+                /* @__PURE__ */ jsxs("div", { style: statRowStyle, title: "Total number of blocks", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Blocks" }),
+                  /* @__PURE__ */ jsx("span", { style: statValueStyle, children: treeStats.blockCount })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: statRowStyle, title: "Container blocks", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Containers" }),
+                  /* @__PURE__ */ jsx("span", { style: statValueStyle, children: treeStats.containerCount })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: statRowStyle, title: "Deepest nesting level", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Max Depth" }),
+                  /* @__PURE__ */ jsx("span", { style: statValueStyle, children: treeStats.maxDepth })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: statRowStyle, title: "Tree validation status", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Validation" }),
+                  /* @__PURE__ */ jsx("span", { style: {
+                    ...statValueStyle,
+                    color: treeStats.validation.valid ? "#10b981" : "#ef4444"
+                  }, children: treeStats.validation.valid ? "Valid" : `${treeStats.validation.issues.length} issue(s)` })
+                ] }),
+                !treeStats.validation.valid && /* @__PURE__ */ jsx("div", { style: { fontSize: 10, color: "#ef4444", marginTop: 4 }, children: treeStats.validation.issues.map((issue, i) => /* @__PURE__ */ jsx("div", { children: issue }, i)) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: sectionStyle, "data-devtools-section": "event-log", children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: headingStyle, title: "Event log", children: [
+                    "Event Log (",
+                    events.length,
+                    ")"
+                  ] }),
+                  events.length > 0 && /* @__PURE__ */ jsx("button", { onClick: onClearEvents, style: clearBtnStyle, children: "Clear" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { style: eventListStyle, children: events.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 11, opacity: 0.4, padding: "8px 0" }, children: "No events yet. Drag some blocks!" }) : events.map((event) => /* @__PURE__ */ jsxs("div", { style: eventItemStyle, children: [
+                  /* @__PURE__ */ jsx("span", { style: timeStyle, children: formatTime(event.timestamp) }),
+                  /* @__PURE__ */ jsx("span", { style: badgeStyle(TYPE_COLORS[event.type]), title: TYPE_TOOLTIPS[event.type], children: TYPE_LABELS[event.type] }),
+                  /* @__PURE__ */ jsx("span", { style: { wordBreak: "break-word" }, children: event.summary })
+                ] }, event.id)) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: sectionStyle, "data-devtools-section": "performance", children: [
+                /* @__PURE__ */ jsx("div", { style: headingStyle, title: "Render metrics", children: "Performance" }),
+                /* @__PURE__ */ jsxs("div", { style: statRowStyle, title: "Render count", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Render Count" }),
+                  /* @__PURE__ */ jsx("span", { style: statValueStyle, children: renderCountRef.current })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: statRowStyle, title: "Time since previous render", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Last Render" }),
+                  /* @__PURE__ */ jsxs("span", { style: statValueStyle, children: [
+                    renderTime.toFixed(1),
+                    "ms"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { style: statRowStyle, children: /* @__PURE__ */ jsxs("span", { style: {
+                  ...statValueStyle,
+                  color: blockCountDelta > 0 ? "#10b981" : blockCountDelta < 0 ? "#ef4444" : void 0
+                }, children: [
+                  blockCountDelta > 0 ? "+" : "",
+                  blockCountDelta
+                ] }) })
+              ] })
+            ] }),
+            showDiff && /* @__PURE__ */ jsxs("div", { style: diffColumnStyle, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+                /* @__PURE__ */ jsx("div", { style: headingStyle, title: "Tree structure diff", children: "Structure" }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, fontSize: 11, fontWeight: 500 }, children: [
+                  diffStats.added > 0 && /* @__PURE__ */ jsxs("span", { style: { color: "#34d399", display: "flex", alignItems: "center", gap: 4 }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { width: 5, height: 5, borderRadius: "50%", background: "#34d399", display: "inline-block" } }),
+                    diffStats.added,
+                    " new"
+                  ] }),
+                  diffStats.moved > 0 && /* @__PURE__ */ jsxs("span", { style: { color: "#fbbf24", display: "flex", alignItems: "center", gap: 4 }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { width: 5, height: 5, borderRadius: "50%", background: "#fbbf24", display: "inline-block" } }),
+                    diffStats.moved,
+                    " moved"
+                  ] }),
+                  diffStats.added === 0 && diffStats.moved === 0 && /* @__PURE__ */ jsx("span", { style: { opacity: 0.4 }, children: "No changes" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { fontFamily: "monospace", fontSize: 11, lineHeight: "1.7" }, children: diffTree.map(({ block, changeType, depth }) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    paddingLeft: depth * 14,
+                    padding: "2px 6px 2px " + (depth * 14 + 6) + "px",
+                    borderRadius: 4,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    ...diffRowColor(changeType)
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { style: { width: 12, textAlign: "center", fontWeight: 700, fontSize: 10 }, children: [
+                      changeType === "added" && "+",
+                      changeType === "moved" && "~"
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { style: {
+                      textTransform: "uppercase",
+                      fontSize: 9,
+                      letterSpacing: "0.05em",
+                      width: 50,
+                      flexShrink: 0,
+                      opacity: changeType === "unchanged" ? 0.5 : 1
+                    }, children: block.type }),
+                    /* @__PURE__ */ jsx("span", { style: {
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      flex: 1,
+                      minWidth: 0
+                    }, children: getLabel(block) }),
+                    /* @__PURE__ */ jsx("span", { style: {
+                      fontFamily: "monospace",
+                      fontSize: 10,
+                      flexShrink: 0,
+                      padding: "1px 5px",
+                      borderRadius: 3,
+                      ...changeType === "added" ? { background: "rgba(16,185,129,0.2)", color: "#34d399" } : changeType === "moved" ? { background: "rgba(245,158,11,0.2)", color: "#fbbf24" } : { background: "rgba(128,128,128,0.15)", color: "rgba(200,200,200,0.4)" }
+                    }, children: String(block.order) })
+                  ]
+                },
+                block.id
+              )) })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+export { BlockTree, BlockTreeDevTools, BlockTreeSSR, DragOverlay, DropZone, TreeRenderer, adaptCollisionDetection, createBlockState, createTreeState, getSensorConfig, triggerHaptic, useBlockHistory, useConfiguredSensors, useDevToolsCallbacks, useLayoutAnimation, useVirtualTree };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map