dnd-block-tree 1.1.0 → 1.2.0

package/dist/index.js

@@ -1933,6 +1933,743 @@ function useVirtualTree({
     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) {
@@ -1984,6 +2721,7 @@ function nestedToFlat(nested) {
 }
 
 exports.BlockTree = BlockTree;
+exports.BlockTreeDevTools = BlockTreeDevTools;
 exports.BlockTreeSSR = BlockTreeSSR;
 exports.DragOverlay = DragOverlay;
 exports.DropZone = DropZone;
@@ -2018,6 +2756,7 @@ exports.reparentMultipleBlocks = reparentMultipleBlocks;
 exports.triggerHaptic = triggerHaptic;
 exports.useBlockHistory = useBlockHistory;
 exports.useConfiguredSensors = useConfiguredSensors;
+exports.useDevToolsCallbacks = useDevToolsCallbacks;
 exports.useLayoutAnimation = useLayoutAnimation;
 exports.useVirtualTree = useVirtualTree;
 exports.validateBlockTree = validateBlockTree;