dnd-block-tree 1.2.0 → 2.0.0

package/dist/index.js

@@ -1,2765 +1,14 @@
 'use strict';
 
-var core = require('@dnd-kit/core');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
+var react = require('@dnd-block-tree/react');
 
-// src/core/types.ts
-function getDropZoneType(zoneId) {
-  if (zoneId.startsWith("before-")) return "before";
-  if (zoneId.startsWith("into-")) return "into";
-  return "after";
-}
-function extractBlockId(zoneId) {
-  return zoneId.replace(/^(before|after|into)-/, "");
-}
 
-// src/core/collision.ts
-function collisionValue(d) {
-  return d.data.value;
-}
-function collisionLeft(d) {
-  return d.data.left;
-}
-function computeCollisionScores(droppableContainers, collisionRect, snapshotRects) {
-  const pointerX = collisionRect.left + collisionRect.width / 2;
-  const pointerY = collisionRect.top + collisionRect.height / 2;
-  const candidates = droppableContainers.map((container) => {
-    const rect = snapshotRects?.get(container.id) ?? container.rect.current;
-    if (!rect) return null;
-    const distanceToTop = Math.abs(pointerY - rect.top);
-    const distanceToBottom = Math.abs(pointerY - rect.bottom);
-    const edgeDistance = Math.min(distanceToTop, distanceToBottom);
-    const isBelowCenter = pointerY > rect.top + rect.height / 2;
-    const bias = isBelowCenter ? -5 : 0;
-    const isWithinX = pointerX >= rect.left && pointerX <= rect.right;
-    let horizontalScore = 0;
-    if (isWithinX) {
-      horizontalScore = Math.abs(pointerX - rect.left) * 0.3;
-    } else {
-      const distanceToZone = pointerX < rect.left ? rect.left - pointerX : pointerX - rect.right;
-      horizontalScore = distanceToZone * 2;
-    }
-    return {
-      id: container.id,
-      data: {
-        droppableContainer: container,
-        value: edgeDistance + bias + horizontalScore,
-        left: rect.left
-      }
-    };
-  }).filter((c) => c !== null);
-  candidates.sort((a, b) => collisionValue(a) - collisionValue(b));
-  return candidates;
-}
-var weightedVerticalCollision = ({
-  droppableContainers,
-  collisionRect
-}) => {
-  if (!collisionRect) return [];
-  const candidates = computeCollisionScores(droppableContainers, collisionRect);
-  return candidates.slice(0, 1);
-};
-function createStickyCollision(threshold = 15, snapshotRef) {
-  let currentZoneId = null;
-  const detector = ({
-    droppableContainers,
-    collisionRect
-  }) => {
-    if (!collisionRect) return [];
-    const candidates = computeCollisionScores(droppableContainers, collisionRect, snapshotRef?.current);
-    if (candidates.length === 0) return [];
-    const bestCandidate = candidates[0];
-    const bestScore = collisionValue(bestCandidate);
-    if (currentZoneId !== null) {
-      const currentCandidate = candidates.find((c) => c.id === currentZoneId);
-      if (currentCandidate) {
-        const currentScore = collisionValue(currentCandidate);
-        const currentLeft = collisionLeft(currentCandidate);
-        const bestLeft = collisionLeft(bestCandidate);
-        const crossDepth = Math.abs(currentLeft - bestLeft) > 20;
-        const effectiveThreshold = crossDepth ? threshold * 0.25 : threshold;
-        if (currentScore - bestScore < effectiveThreshold) {
-          return [currentCandidate];
-        }
-      }
-    }
-    currentZoneId = bestCandidate.id;
-    return [bestCandidate];
-  };
-  detector.reset = () => {
-    currentZoneId = null;
-  };
-  return detector;
-}
-var closestCenterCollision = ({
-  droppableContainers,
-  collisionRect
-}) => {
-  if (!collisionRect) return [];
-  const centerY = collisionRect.top + collisionRect.height / 2;
-  const centerX = collisionRect.left + collisionRect.width / 2;
-  const candidates = droppableContainers.map((container) => {
-    const rect = container.rect.current;
-    if (!rect) return null;
-    const containerCenterX = rect.left + rect.width / 2;
-    const containerCenterY = rect.top + rect.height / 2;
-    const distance = Math.sqrt(
-      Math.pow(centerX - containerCenterX, 2) + Math.pow(centerY - containerCenterY, 2)
-    );
-    return {
-      id: container.id,
-      data: {
-        droppableContainer: container,
-        value: distance
-      }
-    };
-  }).filter((c) => c !== null);
-  candidates.sort((a, b) => collisionValue(a) - collisionValue(b));
-  return candidates.slice(0, 1);
-};
-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 core.useSensors(
-    core.useSensor(core.PointerSensor, {
-      activationConstraint: pointerConstraint
-    }),
-    core.useSensor(core.TouchSensor, {
-      activationConstraint: touchConstraint
-    }),
-    core.useSensor(core.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 }
-  };
-}
 
-// src/utils/helper.ts
-function extractUUID(id, pattern = "^(before|after|into|end)-") {
-  const regex = new RegExp(pattern);
-  return id.replace(regex, "");
-}
-function debounce(fn, delay) {
-  let timeoutId = null;
-  const debounced = ((...args) => {
-    if (timeoutId) clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => {
-      fn(...args);
-      timeoutId = null;
-    }, delay);
-  });
-  debounced.cancel = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
-    }
-  };
-  return debounced;
-}
-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,
-  onHover,
-  activeId,
-  className = "h-1 rounded transition-colors",
-  activeClassName = "bg-blue-500",
-  height = 4
-}) {
-  const { setNodeRef, isOver, active } = core.useDroppable({ id });
-  const handleInternalHover = react.useCallback(() => {
-    onHover(id, parentId);
-  }, [onHover, id, parentId]);
-  react.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__ */ jsxRuntime.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 = react.memo(DropZoneComponent);
-function GhostPreview({ children }) {
-  return /* @__PURE__ */ jsxRuntime.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 } = core.useDraggable({
-    id: block.id,
-    disabled
-  });
-  const isFocused = focusedId === block.id;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: containerClass, style: { minWidth: 0 }, children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-        ghostBeforeThis && GhostRenderer && /* @__PURE__ */ jsxRuntime.jsx(GhostPreview, { children: GhostRenderer({
-          block: draggedBlock,
-          isDragging: true,
-          depth
-        }) }),
-        /* @__PURE__ */ jsxRuntime.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 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,
-                    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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GhostPreview, { children: GhostRenderer({
-        block: draggedBlock,
-        isDragging: true,
-        depth
-      }) }) : null;
-    })(),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DropZone,
-      {
-        id: parentId ? `end-${parentId}` : "root-end",
-        parentId,
-        onHover,
-        activeId,
-        className: dropZoneClassName,
-        activeClassName: dropZoneActiveClassName
-      }
-    )
-  ] });
-}
-var TreeRenderer = react.memo(TreeRendererInner);
-function DragOverlay({
-  activeBlock,
-  children,
-  selectedCount = 0
-}) {
-  const showBadge = selectedCount > 1;
-  return /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { children: activeBlock && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
-    showBadge && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "bg-white border border-gray-300 shadow-md rounded-md p-3 text-sm w-64 pointer-events-none", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 uppercase text-xs tracking-wide mb-1", children: activeBlock.type }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-semibold text-gray-800", children: [
-        "Block ",
-        activeBlock.id.slice(0, 8)
-      ] })
-    ] })
-  ] }) });
-}
-
-// src/utils/fractional.ts
-var ALPHABET = "0123456789abcdefghijklmnopqrstuvwxyz";
-var BASE = ALPHABET.length;
-var FLOOR = ALPHABET[0];
-var MID_IDX = Math.floor(BASE / 2);
-var MID_CHAR = ALPHABET[MID_IDX];
-function charToIdx(c) {
-  const n = ALPHABET.indexOf(c);
-  if (n === -1) throw new Error(`Invalid fractional key character: "${c}"`);
-  return n;
-}
-function computeMidpoint(lo, hi) {
-  const len = Math.max(lo.length, hi.length) + 1;
-  const loD = Array.from(lo.padEnd(len, FLOOR)).map(charToIdx);
-  const hiD = Array.from(hi.padEnd(len, FLOOR)).map(charToIdx);
-  const sum = new Array(len + 1).fill(0);
-  let carry = 0;
-  for (let i = len - 1; i >= 0; i--) {
-    const s = loD[i] + hiD[i] + carry;
-    sum[i + 1] = s % BASE;
-    carry = Math.floor(s / BASE);
-  }
-  sum[0] = carry;
-  const mid = new Array(len + 1).fill(0);
-  let rem = 0;
-  for (let i = 0; i <= len; i++) {
-    const val = rem * BASE + sum[i];
-    mid[i] = Math.floor(val / 2);
-    rem = val % 2;
-  }
-  const digits = mid.slice(1);
-  let end = digits.length;
-  while (end > 1 && digits[end - 1] === 0) end--;
-  return digits.slice(0, end).map((n) => ALPHABET[n]).join("");
-}
-function keyBefore(hi) {
-  const firstIdx = charToIdx(hi[0]);
-  if (firstIdx > 1) {
-    return ALPHABET[Math.floor(firstIdx / 2)];
-  }
-  if (hi.length === 1) {
-    return FLOOR + MID_CHAR;
-  }
-  return FLOOR + keyBefore(hi.slice(1));
-}
-function generateKeyBetween(lo, hi) {
-  if (lo !== null && hi !== null) {
-    if (lo >= hi) throw new Error(`lo must be strictly less than hi: "${lo}" >= "${hi}"`);
-    return computeMidpoint(lo, hi);
-  }
-  if (lo === null && hi === null) return MID_CHAR;
-  if (lo === null) return keyBefore(hi);
-  return lo + MID_CHAR;
-}
-function generateNKeysBetween(lo, hi, n) {
-  if (n <= 0) return [];
-  if (n === 1) return [generateKeyBetween(lo, hi)];
-  const keys = new Array(n);
-  function fill(loKey, hiKey, from, to) {
-    if (from >= to) return;
-    const mid = Math.floor((from + to) / 2);
-    keys[mid] = generateKeyBetween(loKey, hiKey);
-    fill(loKey, keys[mid], from, mid);
-    fill(keys[mid], hiKey, mid + 1, to);
-  }
-  fill(lo, hi, 0, n);
-  return keys;
-}
-function generateInitialKeys(n) {
-  return generateNKeysBetween(null, null, n);
-}
-function compareFractionalKeys(a, b) {
-  return a < b ? -1 : a > b ? 1 : 0;
-}
-function initFractionalOrder(blocks) {
-  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);
-  }
-  const updated = /* @__PURE__ */ new Map();
-  for (const siblings of byParent.values()) {
-    siblings.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;
-    });
-    const keys = generateNKeysBetween(null, null, siblings.length);
-    siblings.forEach((block, i) => {
-      updated.set(block.id, { ...block, order: keys[i] });
-    });
-  }
-  return blocks.map((b) => updated.get(b.id) ?? b);
-}
-
-// src/utils/blocks.ts
-function cloneMap(map) {
-  return new Map(map);
-}
-function cloneParentMap(map) {
-  const newMap = /* @__PURE__ */ new Map();
-  for (const [k, v] of map.entries()) {
-    newMap.set(k, [...v]);
-  }
-  return newMap;
-}
-function computeNormalizedIndex(blocks, orderingStrategy = "integer") {
-  const byId = /* @__PURE__ */ new Map();
-  const byParent = /* @__PURE__ */ new Map();
-  for (const block of blocks) {
-    byId.set(block.id, block);
-    const key = block.parentId ?? null;
-    const list = byParent.get(key) ?? [];
-    byParent.set(key, [...list, block.id]);
-  }
-  if (orderingStrategy === "fractional") {
-    for (const [parentId, ids] of byParent.entries()) {
-      ids.sort((a, b) => {
-        const orderA = String(byId.get(a).order);
-        const orderB = String(byId.get(b).order);
-        return compareFractionalKeys(orderA, orderB);
-      });
-      byParent.set(parentId, ids);
-    }
-  }
-  return { byId, byParent };
-}
-function buildOrderedBlocks(index, containerTypes = [], orderingStrategy = "integer") {
-  const result = [];
-  const walk = (parentId) => {
-    const children = index.byParent.get(parentId) ?? [];
-    for (let i = 0; i < children.length; i++) {
-      const id = children[i];
-      const block = index.byId.get(id);
-      if (block) {
-        result.push(orderingStrategy === "fractional" ? block : { ...block, order: i });
-        if (containerTypes.includes(block.type)) {
-          walk(block.id);
-        }
-      }
-    }
-  };
-  walk(null);
-  return result;
-}
-function reparentBlockIndex(state, activeId, targetZone, containerTypes = [], orderingStrategy = "integer", maxDepth) {
-  const byId = cloneMap(state.byId);
-  const byParent = cloneParentMap(state.byParent);
-  const dragged = byId.get(String(activeId));
-  if (!dragged) return state;
-  const isRootStart = targetZone === "root-start";
-  const isRootEnd = targetZone === "root-end";
-  const isEnd = targetZone.startsWith("end-") || isRootEnd;
-  const zoneTargetId = extractUUID(targetZone);
-  const isAfter = targetZone.startsWith("after-");
-  const isInto = targetZone.startsWith("into-") || isRootStart;
-  const target = byId.get(zoneTargetId);
-  const oldParentId = dragged.parentId ?? null;
-  const newParentId = isRootStart || isRootEnd ? null : isInto || isEnd ? zoneTargetId : target?.parentId ?? null;
-  if (containerTypes.includes(dragged.type) && newParentId !== null) {
-    const newParent = byId.get(newParentId);
-    if (newParent && !containerTypes.includes(newParent.type)) {
-      return state;
-    }
-  }
-  if (maxDepth != null) {
-    const parentDepth = newParentId !== null ? getBlockDepth(state, newParentId) : 0;
-    const subtreeDepth = getSubtreeDepth(state, dragged.id);
-    if (parentDepth + subtreeDepth > maxDepth) return state;
-  }
-  if (dragged.id === zoneTargetId) return state;
-  if (newParentId !== null && getDescendantIds(state, dragged.id).has(newParentId)) {
-    return state;
-  }
-  const oldList = byParent.get(oldParentId) ?? [];
-  const currentIndexInOldParent = oldList.indexOf(dragged.id);
-  const preNewList = byParent.get(newParentId) ?? [];
-  let targetIndex;
-  if (isInto) {
-    targetIndex = 0;
-  } else if (isEnd) {
-    targetIndex = preNewList.length;
-  } else {
-    const idx = preNewList.indexOf(zoneTargetId);
-    targetIndex = idx === -1 ? preNewList.length : isAfter ? idx + 1 : idx;
-  }
-  if (oldParentId === newParentId && currentIndexInOldParent !== -1) {
-    const adjustedTarget = targetIndex > currentIndexInOldParent ? targetIndex - 1 : targetIndex;
-    if (adjustedTarget === currentIndexInOldParent) {
-      return state;
-    }
-  }
-  const filtered = oldList.filter((id) => id !== dragged.id);
-  byParent.set(oldParentId, filtered);
-  const newList = [...byParent.get(newParentId) ?? []];
-  let insertIndex;
-  if (isInto) {
-    insertIndex = 0;
-  } else if (isEnd) {
-    insertIndex = newList.length;
-  } else {
-    const idx = newList.indexOf(zoneTargetId);
-    insertIndex = idx === -1 ? newList.length : isAfter ? idx + 1 : idx;
-  }
-  newList.splice(insertIndex, 0, dragged.id);
-  byParent.set(newParentId, newList);
-  let newOrder = dragged.order;
-  if (orderingStrategy === "fractional") {
-    const siblings = newList;
-    const movedIdx = siblings.indexOf(dragged.id);
-    const prevId = movedIdx > 0 ? siblings[movedIdx - 1] : null;
-    const nextId = movedIdx < siblings.length - 1 ? siblings[movedIdx + 1] : null;
-    const prevOrder = prevId ? String(byId.get(prevId).order) : null;
-    const nextOrder = nextId ? String(byId.get(nextId).order) : null;
-    newOrder = generateKeyBetween(prevOrder, nextOrder);
-  }
-  byId.set(dragged.id, {
-    ...dragged,
-    parentId: newParentId,
-    order: newOrder
-  });
-  return { byId, byParent };
-}
-function getBlockDepth(index, blockId) {
-  let depth = 0;
-  let current = blockId;
-  const visited = /* @__PURE__ */ new Set();
-  while (current !== null) {
-    if (visited.has(current)) break;
-    visited.add(current);
-    depth++;
-    const block = index.byId.get(current);
-    current = block?.parentId ?? null;
-  }
-  return depth;
-}
-function getSubtreeDepth(index, blockId, visited = /* @__PURE__ */ new Set()) {
-  if (visited.has(blockId)) return 0;
-  visited.add(blockId);
-  const children = index.byParent.get(blockId) ?? [];
-  if (children.length === 0) return 1;
-  let max = 0;
-  for (const childId of children) {
-    max = Math.max(max, getSubtreeDepth(index, childId, visited));
-  }
-  return 1 + max;
-}
-function getDescendantIds(state, parentId) {
-  const toDelete = /* @__PURE__ */ new Set();
-  const stack = [parentId];
-  while (stack.length > 0) {
-    const current = stack.pop();
-    toDelete.add(current);
-    const children = state.byParent.get(current) ?? [];
-    stack.push(...children);
-  }
-  return toDelete;
-}
-function reparentMultipleBlocks(state, blockIds, targetZone, containerTypes = [], orderingStrategy = "integer", maxDepth) {
-  if (blockIds.length === 0) return state;
-  if (blockIds.length === 1) {
-    return reparentBlockIndex(state, blockIds[0], targetZone, containerTypes, orderingStrategy, maxDepth);
-  }
-  let result = reparentBlockIndex(state, blockIds[0], targetZone, containerTypes, orderingStrategy, maxDepth);
-  if (result === state) return state;
-  for (let i = 1; i < blockIds.length; i++) {
-    result = reparentBlockIndex(result, blockIds[i], `after-${blockIds[i - 1]}`, containerTypes, orderingStrategy, maxDepth);
-  }
-  return result;
-}
-function validateBlockTree(index) {
-  const issues = [];
-  for (const [id] of index.byId) {
-    const visited = /* @__PURE__ */ new Set();
-    let current = id;
-    while (current !== null) {
-      if (visited.has(current)) {
-        issues.push(`Cycle detected: block "${id}" has a circular parentId chain`);
-        break;
-      }
-      visited.add(current);
-      const block = index.byId.get(current);
-      current = block?.parentId ?? null;
-    }
-  }
-  for (const [id, block] of index.byId) {
-    if (block.parentId !== null && !index.byId.has(block.parentId)) {
-      issues.push(`Orphan: block "${id}" references non-existent parent "${block.parentId}"`);
-    }
-  }
-  for (const [parentId, childIds] of index.byParent) {
-    for (const childId of childIds) {
-      if (!index.byId.has(childId)) {
-        issues.push(`Stale ref: byParent key "${parentId}" lists non-existent block "${childId}"`);
-      }
-    }
-  }
-  if (issues.length > 0) {
-    for (const issue of issues) {
-      console.warn(`[dnd-block-tree] ${issue}`);
-    }
-  }
-  return { valid: issues.length === 0, issues };
-}
-function deleteBlockAndDescendants(state, id) {
-  const byId = cloneMap(state.byId);
-  const byParent = cloneParentMap(state.byParent);
-  const idsToDelete = getDescendantIds(state, id);
-  for (const deleteId of idsToDelete) {
-    byId.delete(deleteId);
-    byParent.delete(deleteId);
-  }
-  for (const [parent, list] of byParent.entries()) {
-    byParent.set(parent, list.filter((itemId) => !idsToDelete.has(itemId)));
-  }
-  return { byId, byParent };
-}
-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 = react.useMemo(
-    () => computeInitialExpanded(blocks, containerTypes, initialExpanded),
-    // Only compute on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const stateRef = react.useRef({
-    activeId: null,
-    hoverZone: null,
-    expandedMap: initialExpandedMap,
-    virtualState: null,
-    isDragging: false
-  });
-  const initialBlocksRef = react.useRef([]);
-  const cachedReorderRef = react.useRef(null);
-  const fromPositionRef = react.useRef(null);
-  const draggedIdsRef = react.useRef([]);
-  const snapshotRectsRef = react.useRef(null);
-  const needsResnapshot = react.useRef(false);
-  const stickyCollisionRef = react.useRef(createStickyCollision(20, snapshotRectsRef));
-  const snapshotZoneRects = react.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] = react.useReducer((x) => x + 1, 0);
-  const debouncedSetVirtual = react.useRef(
-    debounce((newBlocks) => {
-      if (newBlocks) {
-        stateRef.current.virtualState = computeNormalizedIndex(newBlocks);
-      } else {
-        stateRef.current.virtualState = null;
-      }
-      needsResnapshot.current = true;
-      forceRender();
-    }, previewDebounce)
-  ).current;
-  const debouncedDragMove = react.useRef(
-    debounce((event) => {
-      onDragMove?.(event);
-    }, 50)
-  ).current;
-  const originalIndex = react.useMemo(
-    () => computeNormalizedIndex(blocks, orderingStrategy),
-    [blocks, orderingStrategy]
-  );
-  const blocksByParent = react.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 = react.useRef(null);
-  const rootRef = react.useRef(null);
-  const lastClickedIdRef = react.useRef(null);
-  const [internalSelectedIds, setInternalSelectedIds] = react.useReducer(
-    (_, next) => next,
-    /* @__PURE__ */ new Set()
-  );
-  const selectedIds = externalSelectedIds ?? internalSelectedIds;
-  const setSelectedIds = react.useCallback((ids) => {
-    if (onSelectionChange) {
-      onSelectionChange(ids);
-    } else {
-      setInternalSelectedIds(ids);
-    }
-  }, [onSelectionChange]);
-  const visibleBlockIds = react.useMemo(
-    () => getVisibleBlockIds(blocksByParent, containerTypes, stateRef.current.expandedMap),
-    [blocksByParent, containerTypes, stateRef.current.expandedMap]
-  );
-  const focusBlock = react.useCallback((id) => {
-    focusedIdRef.current = id;
-    if (id && rootRef.current) {
-      const el = rootRef.current.querySelector(`[data-block-id="${id}"]`);
-      el?.focus();
-    }
-    forceRender();
-  }, []);
-  const toggleExpandRef = react.useRef(() => {
-  });
-  const handleKeyDown = react.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 = react.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]);
-  react.useEffect(() => {
-    if (!needsResnapshot.current || !stateRef.current.isDragging) return;
-    needsResnapshot.current = false;
-    requestAnimationFrame(() => {
-      snapshotZoneRects();
-    });
-  });
-  react.useEffect(() => {
-    if (!keyboardNavigation || !focusedIdRef.current || !rootRef.current) return;
-    const el = rootRef.current.querySelector(`[data-block-id="${focusedIdRef.current}"]`);
-    el?.focus();
-  });
-  const previewPosition = react.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 = react.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);
-    stickyCollisionRef.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 = react.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 = react.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 = react.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 = react.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 = react.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 = react.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 = 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,
-    {
-      sensors,
-      collisionDetection: collisionDetection ?? stickyCollisionRef.current,
-      onDragStart: handleDragStart,
-      onDragMove: handleDragMove,
-      onDragOver: handleDragOver,
-      onDragEnd: handleDragEnd,
-      onDragCancel: handleDragCancel,
-      children: [
-        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,
-            className,
-            style: { minWidth: 0 },
-            onKeyDown: keyboardNavigation ? handleKeyDown : void 0,
-            role: keyboardNavigation ? "tree" : void 0,
-            children: treeContent
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(DragOverlay, { activeBlock, selectedCount: multiSelect ? selectedIds.size : 0, children: dragOverlay })
-      ]
-    }
-  );
-}
-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": {
-      const byId = cloneMap(state.byId);
-      const byParent = cloneParentMap(state.byParent);
-      const item = action.payload;
-      byId.set(item.id, item);
-      const parentKey = item.parentId ?? null;
-      const list = byParent.get(parentKey) ?? [];
-      const insertAt = typeof item.order === "number" && item.order <= list.length ? item.order : list.length;
-      const newList = [...list];
-      newList.splice(insertAt, 0, item.id);
-      byParent.set(parentKey, newList);
-      return { byId, byParent };
-    }
-    case "INSERT_ITEM": {
-      const { item, parentId, index } = action.payload;
-      const updated = new Map(state.byParent);
-      const siblings = [...updated.get(parentId) ?? []];
-      siblings.splice(index, 0, item.id);
-      updated.set(parentId, siblings);
-      return {
-        byId: new Map(state.byId).set(item.id, item),
-        byParent: updated
-      };
-    }
-    case "DELETE_ITEM": {
-      return deleteBlockAndDescendants(state, action.payload.id);
-    }
-    case "SET_ALL": {
-      return computeNormalizedIndex(action.payload);
-    }
-    case "MOVE_ITEM": {
-      return reparentBlockIndex(
-        state,
-        action.payload.activeId,
-        action.payload.targetZone,
-        containerTypes,
-        orderingStrategy,
-        maxDepth
-      );
-    }
-    default:
-      return state;
-  }
-}
-function createBlockState() {
-  const BlockContext = react.createContext(null);
-  function useBlockState() {
-    const ctx = react.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 = react.useCallback(
-      (state2, action) => blockReducer(state2, action, containerTypes, orderingStrategy, maxDepth),
-      [containerTypes, orderingStrategy, maxDepth]
-    );
-    const [state, dispatch] = react.useReducer(
-      reducerWithOptions,
-      computeNormalizedIndex(initialBlocks, orderingStrategy)
-    );
-    const blocks = react.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]);
-    react.useMemo(() => {
-      onChange?.(blocks);
-    }, [blocks, onChange]);
-    const blockMap = react.useMemo(() => state.byId, [state]);
-    const childrenMap = react.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 = react.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 = react.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 = react.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 = react.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 = react.useCallback((activeId, targetZone) => {
-      dispatch({ type: "MOVE_ITEM", payload: { activeId, targetZone } });
-    }, []);
-    const setAll = react.useCallback((all) => {
-      dispatch({ type: "SET_ALL", payload: all });
-    }, []);
-    const value = react.useMemo(
-      () => ({
-        blocks,
-        blockMap,
-        childrenMap,
-        indexMap,
-        normalizedIndex: state,
-        createItem,
-        insertItem,
-        deleteItem,
-        moveItem,
-        setAll
-      }),
-      [
-        blocks,
-        blockMap,
-        childrenMap,
-        indexMap,
-        state,
-        createItem,
-        insertItem,
-        deleteItem,
-        moveItem,
-        setAll
-      ]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(BlockContext.Provider, { value, children });
-  }
-  return {
-    BlockStateProvider,
-    useBlockState
-  };
-}
-function expandReducer(state, action) {
-  switch (action.type) {
-    case "TOGGLE":
-      return { ...state, [action.id]: !state[action.id] };
-    case "SET_ALL": {
-      const newState = {};
-      for (const id of action.ids) {
-        newState[id] = action.expanded;
-      }
-      return newState;
-    }
-    default:
-      return state;
-  }
-}
-function createTreeState(options = {}) {
-  const { previewDebounce = 150, containerTypes = [] } = options;
-  const TreeContext = react.createContext(null);
-  function useTreeState() {
-    const ctx = react.useContext(TreeContext);
-    if (!ctx) throw new Error("useTreeState must be used inside TreeStateProvider");
-    return ctx;
-  }
-  function TreeStateProvider({ children, blocks, blockMap }) {
-    const [activeId, setActiveId] = react.useState(null);
-    const [hoverZone, setHoverZone] = react.useState(null);
-    const [virtualState, setVirtualState] = react.useState(null);
-    const [expandedMap, dispatchExpand] = react.useReducer(expandReducer, {});
-    const initialBlocksRef = react.useRef([]);
-    const cachedReorderRef = react.useRef(null);
-    const activeBlock = react.useMemo(() => {
-      if (!activeId) return null;
-      return blockMap.get(activeId) ?? null;
-    }, [activeId, blockMap]);
-    const debouncedSetVirtualBlocks = react.useMemo(
-      () => debounce((newBlocks) => {
-        if (!newBlocks) {
-          setVirtualState(null);
-        } else {
-          setVirtualState(computeNormalizedIndex(newBlocks));
-        }
-      }, previewDebounce),
-      [previewDebounce]
-    );
-    const effectiveState = react.useMemo(() => {
-      return virtualState ?? computeNormalizedIndex(blocks);
-    }, [virtualState, blocks]);
-    const effectiveBlocks = react.useMemo(() => {
-      return buildOrderedBlocks(effectiveState, containerTypes);
-    }, [effectiveState, containerTypes]);
-    const blocksByParent = react.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 = react.useCallback(
-      (id) => {
-        setActiveId(id);
-        if (id) {
-          initialBlocksRef.current = [...blocks];
-          cachedReorderRef.current = null;
-        }
-      },
-      [blocks]
-    );
-    const handleDragOver = react.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]
-    );
-    react.useCallback(() => {
-      debouncedSetVirtualBlocks.cancel();
-      setVirtualState(null);
-      setActiveId(null);
-      setHoverZone(null);
-      const result = cachedReorderRef.current;
-      cachedReorderRef.current = null;
-      initialBlocksRef.current = [];
-      return result;
-    }, [debouncedSetVirtualBlocks]);
-    const handleHover = react.useCallback(
-      (zoneId, _parentId) => {
-        if (!activeId) return;
-        handleDragOver(zoneId);
-      },
-      [activeId, handleDragOver]
-    );
-    const toggleExpand = react.useCallback((id) => {
-      dispatchExpand({ type: "TOGGLE", id });
-    }, []);
-    const setExpandAll = react.useCallback(
-      (expanded) => {
-        const containerIds = blocks.filter((b) => containerTypes.includes(b.type)).map((b) => b.id);
-        dispatchExpand({ type: "SET_ALL", expanded, ids: containerIds });
-      },
-      [blocks, containerTypes]
-    );
-    react.useEffect(() => {
-      return () => {
-        debouncedSetVirtualBlocks.cancel();
-      };
-    }, [debouncedSetVirtualBlocks]);
-    const value = react.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__ */ jsxRuntime.jsx(TreeContext.Provider, { value, children });
-  }
-  return {
-    TreeStateProvider,
-    useTreeState
-  };
-}
-function historyReducer(state, action) {
-  switch (action.type) {
-    case "SET": {
-      const past = [...state.past, state.present];
-      if (past.length > action.maxSteps) {
-        past.shift();
-      }
-      return {
-        past,
-        present: action.payload,
-        future: []
-      };
-    }
-    case "UNDO": {
-      if (state.past.length === 0) return state;
-      const previous = state.past[state.past.length - 1];
-      return {
-        past: state.past.slice(0, -1),
-        present: previous,
-        future: [state.present, ...state.future]
-      };
-    }
-    case "REDO": {
-      if (state.future.length === 0) return state;
-      const next = state.future[0];
-      return {
-        past: [...state.past, state.present],
-        present: next,
-        future: state.future.slice(1)
-      };
-    }
-    default:
-      return state;
-  }
-}
-function useBlockHistory(initialBlocks, options = {}) {
-  const { maxSteps = 50 } = options;
-  const [state, dispatch] = react.useReducer(historyReducer, {
-    past: [],
-    present: initialBlocks,
-    future: []
-  });
-  const set = react.useCallback(
-    (blocks) => dispatch({ type: "SET", payload: blocks, maxSteps }),
-    [maxSteps]
-  );
-  const undo = react.useCallback(() => dispatch({ type: "UNDO" }), []);
-  const redo = react.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 = 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
-  };
-}
-var MAX_EVENTS = 100;
-function useDevToolsCallbacks() {
-  const [events, setEvents] = react.useState([]);
-  const nextIdRef = react.useRef(1);
-  const addEvent = react.useCallback((type, summary) => {
-    const entry = {
-      id: nextIdRef.current++,
-      timestamp: Date.now(),
-      type,
-      summary
-    };
-    setEvents((prev) => [entry, ...prev].slice(0, MAX_EVENTS));
-  }, []);
-  const clearEvents = react.useCallback(() => {
-    setEvents([]);
-  }, []);
-  const callbacks = react.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__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "2", width: "8", height: "5", rx: "1", fill: "#3b82f6", opacity: "0.9" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "10", width: "8", height: "5", rx: "1", fill: "#10b981", opacity: "0.9" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "18", width: "8", height: "5", rx: "1", fill: "#f59e0b", opacity: "0.9" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 7 L6 10 L8 10", stroke: "#888", strokeWidth: "1.5", fill: "none", opacity: "0.6" }),
-        /* @__PURE__ */ jsxRuntime.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 \u2014 a block was picked up",
-  dragEnd: "onDragEnd \u2014 a block was dropped or drag was cancelled",
-  blockMove: "onBlockMove \u2014 a block was reparented to a new position",
-  expandChange: "onExpandChange \u2014 a container was expanded or collapsed",
-  hoverChange: "onHoverChange \u2014 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;
-function getAnchorCSS(position) {
-  switch (position) {
-    case "bottom-right":
-      return { bottom: 16, right: 16 };
-    case "top-left":
-      return { top: 16, left: 16 };
-    case "top-right":
-      return { top: 16, right: 16 };
-    case "bottom-left":
-    default:
-      return { bottom: 16, left: 16 };
-  }
-}
-function computeCardOrigin(position, width, height) {
-  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
-  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
-  switch (position) {
-    case "bottom-right":
-      return { x: Math.max(0, vw - 16 - width), y: Math.max(0, vh - 16 - height - 48) };
-    case "top-left":
-      return { x: 16, y: 16 + 48 };
-    case "top-right":
-      return { x: Math.max(0, vw - 16 - width), y: 16 + 48 };
-    case "bottom-left":
-    default:
-      return { x: 16, y: Math.max(0, vh - 16 - height - 48) };
-  }
-}
-function BlockTreeDevTools({
-  blocks,
-  containerTypes = [],
-  events,
-  onClearEvents,
-  getLabel = (b) => b.type,
-  initialOpen = false,
-  position = "bottom-left",
-  buttonStyle,
-  panelStyle
-}) {
-  const [isOpen, setIsOpen] = react.useState(initialOpen);
-  const [showDiff, setShowDiff] = react.useState(false);
-  const [cardPos, setCardPos] = react.useState(null);
-  const [cardSize, setCardSize] = react.useState({ w: DEFAULT_WIDTH, h: DEFAULT_HEIGHT });
-  const [showTooltip, setShowTooltip] = react.useState(false);
-  const dragRef = react.useRef({
-    dragging: false,
-    startX: 0,
-    startY: 0,
-    origX: 0,
-    origY: 0
-  });
-  const resizeRef = react.useRef({ active: false, edge: "", startX: 0, startY: 0, origX: 0, origY: 0, origW: 0, origH: 0 });
-  const cardRef = react.useRef(null);
-  const prevBlocksRef = react.useRef(blocks);
-  const diffChangeMap = react.useMemo(() => computeDiffMap(prevBlocksRef.current, blocks), [blocks]);
-  react.useEffect(() => {
-    prevBlocksRef.current = blocks;
-  }, [blocks]);
-  const diffTree = react.useMemo(() => buildDiffTree(blocks, diffChangeMap), [blocks, diffChangeMap]);
-  const diffStats = react.useMemo(() => {
-    let added = 0, moved = 0;
-    for (const { changeType } of diffTree) {
-      if (changeType === "added") added++;
-      if (changeType === "moved") moved++;
-    }
-    return { added, moved };
-  }, [diffTree]);
-  react.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;
-      if (showDiff && (wasDefault || prev.w < targetW)) {
-        return { ...prev, w: targetW };
-      }
-      if (!showDiff && wasExpanded) {
-        return { ...prev, w: DEFAULT_WIDTH };
-      }
-      return prev;
-    });
-  }, [showDiff]);
-  const getDefaultCardPos = react.useCallback(() => {
-    return computeCardOrigin(position, cardSize.w, cardSize.h);
-  }, [position, cardSize.w, cardSize.h]);
-  react.useEffect(() => {
-    if (isOpen && !cardPos) {
-      setCardPos(getDefaultCardPos());
-    }
-  }, [isOpen, cardPos, getDefaultCardPos]);
-  const handleDragPointerDown = react.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 = react.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 = react.useCallback(() => {
-    dragRef.current.dragging = false;
-  }, []);
-  const handleResizePointerDown = react.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 = react.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 = react.useCallback(() => {
-    resizeRef.current.active = false;
-  }, []);
-  const toggle = react.useCallback(() => {
-    setIsOpen((prev) => !prev);
-  }, []);
-  const toggleDiff = react.useCallback(() => {
-    setShowDiff((prev) => !prev);
-  }, []);
-  const renderCountRef = react.useRef(0);
-  const lastRenderTimeRef = react.useRef(performance.now());
-  const prevBlockCountRef = react.useRef(blocks.length);
-  renderCountRef.current++;
-  const renderTime = performance.now() - lastRenderTimeRef.current;
-  lastRenderTimeRef.current = performance.now();
-  const blockCountDelta = blocks.length - prevBlockCountRef.current;
-  react.useEffect(() => {
-    prevBlockCountRef.current = blocks.length;
-  }, [blocks.length]);
-  const treeStats = react.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 anchor = getAnchorCSS(position);
-  const triggerBtnStyle = {
-    position: "fixed",
-    ...anchor,
-    zIndex: 99998,
-    width: 40,
-    height: 40,
-    borderRadius: "50%",
-    border: "none",
-    background: isOpen ? "rgba(59, 130, 246, 0.9)" : "rgba(30, 30, 30, 0.85)",
-    color: "#fff",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
-    transition: "background 0.15s, transform 0.15s",
-    ...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",
-    // Position based on anchor corner
-    ...anchor.bottom !== void 0 ? { bottom: "100%", marginBottom: 8 } : { top: "100%", marginTop: 8 },
-    ...anchor.left !== void 0 ? { 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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", ...anchor, zIndex: 99998 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: toggle,
-          onMouseEnter: () => setShowTooltip(true),
-          onMouseLeave: () => setShowTooltip(false),
-          style: triggerBtnStyle,
-          "aria-label": isOpen ? "Close DevTools" : "Open DevTools",
-          children: /* @__PURE__ */ jsxRuntime.jsx(DevToolsLogo, { size: 20 })
-        }
-      ),
-      showTooltip && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { style: tooltipStyle, children: "dnd-block-tree DevTools" })
-    ] }),
-    isOpen && cardPos && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: cardRef,
-        style: cardStyle,
-        "data-devtools-root": "",
-        children: [
-          EDGES.map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: resizeEdge(edge),
-              onPointerDown: handleResizePointerDown(edge),
-              onPointerMove: handleResizePointerMove,
-              onPointerUp: handleResizePointerUp
-            },
-            edge
-          )),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style: titleBarStyle,
-              onPointerDown: handleDragPointerDown,
-              onPointerMove: handleDragPointerMove,
-              onPointerUp: handleDragPointerUp,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: titleTextStyle, children: "DevTools" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    onClick: toggleDiff,
-                    style: titleBtnStyle(showDiff),
-                    onPointerDown: (e) => e.stopPropagation(),
-                    title: "Toggle structure diff \u2014 shows which blocks were added, moved, or unchanged",
-                    children: "Diff"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    onClick: toggle,
-                    style: closeBtnStyle,
-                    onPointerDown: (e) => e.stopPropagation(),
-                    "aria-label": "Close DevTools",
-                    children: "\xD7"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: bodyStyle, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: mainColumnStyle, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle, "data-devtools-section": "tree-state", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: headingStyle, title: "Live snapshot of the block tree structure", children: "Tree State" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statRowStyle, title: "Total number of blocks in the flat array", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Blocks" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: statValueStyle, children: treeStats.blockCount })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statRowStyle, title: "Blocks whose type is in containerTypes (can have children)", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Containers" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: statValueStyle, children: treeStats.containerCount })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statRowStyle, title: "Deepest nesting level in the tree (root = 1)", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Max Depth" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: statValueStyle, children: treeStats.maxDepth })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statRowStyle, title: "Checks for cycles, orphans, and stale parent refs", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Validation" }),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { fontSize: 10, color: "#ef4444", marginTop: 4 }, children: treeStats.validation.issues.map((issue, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: issue }, i)) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle, "data-devtools-section": "event-log", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headingStyle, title: "Chronological log of drag, drop, move, expand, and hover events", children: [
-                    "Event Log (",
-                    events.length,
-                    ")"
-                  ] }),
-                  events.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClearEvents, style: clearBtnStyle, children: "Clear" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: eventListStyle, children: events.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, opacity: 0.4, padding: "8px 0" }, children: "No events yet. Drag some blocks!" }) : events.map((event) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: eventItemStyle, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: timeStyle, children: formatTime(event.timestamp) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeStyle(TYPE_COLORS[event.type]), title: TYPE_TOOLTIPS[event.type], children: TYPE_LABELS[event.type] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { wordBreak: "break-word" }, children: event.summary })
-                ] }, event.id)) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle, "data-devtools-section": "performance", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: headingStyle, title: "Render metrics for the DevTools component itself", children: "Performance" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statRowStyle, title: "How many times this DevTools component has rendered", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Render Count" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: statValueStyle, children: renderCountRef.current })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: statRowStyle, title: "Time since the previous render of this component", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Last Render" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: statValueStyle, children: [
-                    renderTime.toFixed(1),
-                    "ms"
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: statRowStyle, title: "Change in block count since the last render (+added / -removed)", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: {
-                  ...statValueStyle,
-                  color: blockCountDelta > 0 ? "#10b981" : blockCountDelta < 0 ? "#ef4444" : void 0
-                }, children: [
-                  blockCountDelta > 0 ? "+" : "",
-                  blockCountDelta
-                ] }) })
-              ] })
-            ] }),
-            showDiff && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: diffColumnStyle, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: headingStyle, title: "Tree structure diff \u2014 compares current state to the previous render", children: "Structure" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 10, fontSize: 11, fontWeight: 500 }, children: [
-                  diffStats.added > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#34d399", display: "flex", alignItems: "center", gap: 4 }, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 5, height: 5, borderRadius: "50%", background: "#34d399", display: "inline-block" } }),
-                    diffStats.added,
-                    " new"
-                  ] }),
-                  diffStats.moved > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#fbbf24", display: "flex", alignItems: "center", gap: 4 }, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 5, height: 5, borderRadius: "50%", background: "#fbbf24", display: "inline-block" } }),
-                    diffStats.moved,
-                    " moved"
-                  ] }),
-                  diffStats.added === 0 && diffStats.moved === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.4 }, children: "No changes" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "monospace", fontSize: 11, lineHeight: "1.7" }, children: diffTree.map(({ block, changeType, depth }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { style: { width: 12, textAlign: "center", fontWeight: 700, fontSize: 10 }, children: [
-                      changeType === "added" && "+",
-                      changeType === "moved" && "~"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                      textTransform: "uppercase",
-                      fontSize: 9,
-                      letterSpacing: "0.05em",
-                      width: 50,
-                      flexShrink: 0,
-                      opacity: changeType === "unchanged" ? 0.5 : 1
-                    }, children: block.type }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                      flex: 1,
-                      minWidth: 0
-                    }, children: getLabel(block) }),
-                    /* @__PURE__ */ jsxRuntime.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
-              )) })
-            ] })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-
-// 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.BlockTreeDevTools = BlockTreeDevTools;
-exports.BlockTreeSSR = BlockTreeSSR;
-exports.DragOverlay = DragOverlay;
-exports.DropZone = DropZone;
-exports.TreeRenderer = TreeRenderer;
-exports.buildOrderedBlocks = buildOrderedBlocks;
-exports.cloneMap = cloneMap;
-exports.cloneParentMap = cloneParentMap;
-exports.closestCenterCollision = closestCenterCollision;
-exports.compareFractionalKeys = compareFractionalKeys;
-exports.computeNormalizedIndex = computeNormalizedIndex;
-exports.createBlockState = createBlockState;
-exports.createStickyCollision = createStickyCollision;
-exports.createTreeState = createTreeState;
-exports.debounce = debounce;
-exports.deleteBlockAndDescendants = deleteBlockAndDescendants;
-exports.extractBlockId = extractBlockId;
-exports.extractUUID = extractUUID;
-exports.flatToNested = flatToNested;
-exports.generateId = generateId;
-exports.generateInitialKeys = generateInitialKeys;
-exports.generateKeyBetween = generateKeyBetween;
-exports.generateNKeysBetween = generateNKeysBetween;
-exports.getBlockDepth = getBlockDepth;
-exports.getDescendantIds = getDescendantIds;
-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.useDevToolsCallbacks = useDevToolsCallbacks;
-exports.useLayoutAnimation = useLayoutAnimation;
-exports.useVirtualTree = useVirtualTree;
-exports.validateBlockTree = validateBlockTree;
-exports.weightedVerticalCollision = weightedVerticalCollision;
+Object.keys(react).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return react[k]; }
+	});
+});
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map