@particle-academy/react-fancy 2.8.0 → 2.9.0

package/dist/index.d.cts

@@ -2231,7 +2231,12 @@ interface CanvasContextValue {
     nodeRects: Map<string, NodeRect>;
     registryVersion: number;
     containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Grid spacing in canvas-space pixels (unaffected by zoom). */
+    gridSize: number;
+    /** When true, dragged nodes snap their top-left corner to the grid. */
+    snapToGrid: boolean;
 }
+type GridStyle = "dots" | "lines" | "none";
 interface CanvasProps {
     children: ReactNode;
     viewport?: ViewportState;
@@ -2241,8 +2246,17 @@ interface CanvasProps {
     maxZoom?: number;
     pannable?: boolean;
     zoomable?: boolean;
+    /** Grid spacing in canvas-space pixels. Defaults to 20. */
     gridSize?: number;
+    /** Show/hide the canvas grid. Defaults to false. */
     showGrid?: boolean;
+    /** Grid pattern when shown — dots (default), lines, or none. Setting this
+     *  to "none" hides the grid even when `showGrid` is true. */
+    gridStyle?: GridStyle;
+    /** Grid color (any CSS color). Defaults to a faint zinc. */
+    gridColor?: string;
+    /** Snap dragged nodes to the grid. Defaults to false. */
+    snapToGrid?: boolean;
     /** Automatically fit all nodes into view on initial mount */
     fitOnMount?: boolean;
     className?: string;
@@ -2308,7 +2322,7 @@ declare namespace CanvasControls {
     var displayName: string;
 }
 
-declare function CanvasRoot({ children, viewport: controlledViewport, defaultViewport, onViewportChange, minZoom, maxZoom, pannable, zoomable, showGrid, fitOnMount, className, style, }: CanvasProps): react_jsx_runtime.JSX.Element;
+declare function CanvasRoot({ children, viewport: controlledViewport, defaultViewport, onViewportChange, minZoom, maxZoom, pannable, zoomable, showGrid, gridStyle, gridSize, gridColor, snapToGrid, fitOnMount, className, style, }: CanvasProps): react_jsx_runtime.JSX.Element;
 declare const Canvas: typeof CanvasRoot & {
     Node: typeof CanvasNode;
     Edge: typeof CanvasEdge;
@@ -2474,6 +2488,15 @@ interface TreeNavProps {
     draggable?: boolean;
     /** Callback when a node is moved via drag and drop */
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    /** Accept drops from outside the tree — OS files, items from other
+     *  components, etc. When true, drag-over is allowed for any data source
+     *  and `onExternalDrop` fires on drop. (default: false) */
+    acceptExternalDrops?: boolean;
+    /** Called when an external drag (file or cross-component) is dropped on
+     *  a node. The raw event lets you read `event.dataTransfer.files` for OS
+     *  file drops or `event.dataTransfer.getData(type)` for custom MIME
+     *  payloads from other components. */
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
     /** Controlled expanded node IDs */
     expandedIds?: string[];
     /** Default expanded node IDs (uncontrolled) */
@@ -2501,6 +2524,8 @@ interface TreeNavContextValue {
     dragState: DragState;
     setDragState: (state: DragState) => void;
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    acceptExternalDrops: boolean;
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
     nodes: TreeNodeData[];
     expandNode: (id: string) => void;
 }
@@ -2515,7 +2540,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -2231,7 +2231,12 @@ interface CanvasContextValue {
     nodeRects: Map<string, NodeRect>;
     registryVersion: number;
     containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Grid spacing in canvas-space pixels (unaffected by zoom). */
+    gridSize: number;
+    /** When true, dragged nodes snap their top-left corner to the grid. */
+    snapToGrid: boolean;
 }
+type GridStyle = "dots" | "lines" | "none";
 interface CanvasProps {
     children: ReactNode;
     viewport?: ViewportState;
@@ -2241,8 +2246,17 @@ interface CanvasProps {
     maxZoom?: number;
     pannable?: boolean;
     zoomable?: boolean;
+    /** Grid spacing in canvas-space pixels. Defaults to 20. */
     gridSize?: number;
+    /** Show/hide the canvas grid. Defaults to false. */
     showGrid?: boolean;
+    /** Grid pattern when shown — dots (default), lines, or none. Setting this
+     *  to "none" hides the grid even when `showGrid` is true. */
+    gridStyle?: GridStyle;
+    /** Grid color (any CSS color). Defaults to a faint zinc. */
+    gridColor?: string;
+    /** Snap dragged nodes to the grid. Defaults to false. */
+    snapToGrid?: boolean;
     /** Automatically fit all nodes into view on initial mount */
     fitOnMount?: boolean;
     className?: string;
@@ -2308,7 +2322,7 @@ declare namespace CanvasControls {
     var displayName: string;
 }
 
-declare function CanvasRoot({ children, viewport: controlledViewport, defaultViewport, onViewportChange, minZoom, maxZoom, pannable, zoomable, showGrid, fitOnMount, className, style, }: CanvasProps): react_jsx_runtime.JSX.Element;
+declare function CanvasRoot({ children, viewport: controlledViewport, defaultViewport, onViewportChange, minZoom, maxZoom, pannable, zoomable, showGrid, gridStyle, gridSize, gridColor, snapToGrid, fitOnMount, className, style, }: CanvasProps): react_jsx_runtime.JSX.Element;
 declare const Canvas: typeof CanvasRoot & {
     Node: typeof CanvasNode;
     Edge: typeof CanvasEdge;
@@ -2474,6 +2488,15 @@ interface TreeNavProps {
     draggable?: boolean;
     /** Callback when a node is moved via drag and drop */
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    /** Accept drops from outside the tree — OS files, items from other
+     *  components, etc. When true, drag-over is allowed for any data source
+     *  and `onExternalDrop` fires on drop. (default: false) */
+    acceptExternalDrops?: boolean;
+    /** Called when an external drag (file or cross-component) is dropped on
+     *  a node. The raw event lets you read `event.dataTransfer.files` for OS
+     *  file drops or `event.dataTransfer.getData(type)` for custom MIME
+     *  payloads from other components. */
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
     /** Controlled expanded node IDs */
     expandedIds?: string[];
     /** Default expanded node IDs (uncontrolled) */
@@ -2501,6 +2524,8 @@ interface TreeNavContextValue {
     dragState: DragState;
     setDragState: (state: DragState) => void;
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    acceptExternalDrops: boolean;
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
     nodes: TreeNodeData[];
     expandNode: (id: string) => void;
 }
@@ -2515,7 +2540,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }

package/dist/index.js

@@ -11152,12 +11152,30 @@ function countCardChildren(children) {
       n += 1;
       return;
     }
-    if (child.type === Fragment$1) {
-      n += countCardChildren(child.props.children);
-    }
+    const inner = child.props.children;
+    if (inner !== void 0) n += countCardChildren(inner);
   });
   return n;
 }
+function findCardIndex(children, cardId) {
+  let idx = -1;
+  let i = 0;
+  function walk2(nodes) {
+    Children.forEach(nodes, (child) => {
+      if (idx !== -1) return;
+      if (!isValidElement(child)) return;
+      if (child.type === KanbanCard) {
+        if (child.props.id === cardId) idx = i;
+        i += 1;
+        return;
+      }
+      const inner = child.props.children;
+      if (inner !== void 0) walk2(inner);
+    });
+  }
+  walk2(children);
+  return idx;
+}
 function KanbanColumn({
   children,
   id,
@@ -11170,26 +11188,46 @@ function KanbanColumn({
   const { onCardMove, draggedCard, dragSource, registerColumn } = useKanban();
   const [dragOver, setDragOver] = useState(false);
   const [dropIndex, setDropIndex] = useState(null);
+  const [dropY, setDropY] = useState(null);
   const cardsRef = useRef(null);
   useEffect(() => registerColumn(id), [id, registerColumn]);
-  const updateDropIndex = useCallback((clientY) => {
+  const updateDrop = useCallback((clientY) => {
     const container = cardsRef.current;
     if (!container) {
       setDropIndex(null);
+      setDropY(null);
       return;
     }
-    const cards = container.querySelectorAll(
-      ":scope > [data-react-fancy-kanban-card]"
+    const all = Array.from(
+      container.querySelectorAll(
+        "[data-react-fancy-kanban-card]"
+      )
+    );
+    const cards = all.filter(
+      (el) => el.closest("[data-react-fancy-kanban-column]") === cardsRef.current?.closest("[data-react-fancy-kanban-column]")
     );
+    const containerRect = container.getBoundingClientRect();
+    if (cards.length === 0) {
+      setDropIndex(0);
+      setDropY(0);
+      return;
+    }
     let idx = cards.length;
+    let yRel = 0;
     for (let i = 0; i < cards.length; i++) {
       const rect = cards[i].getBoundingClientRect();
       if (clientY < rect.top + rect.height / 2) {
         idx = i;
+        yRel = rect.top - containerRect.top;
         break;
       }
     }
+    if (idx === cards.length) {
+      const last = cards[cards.length - 1].getBoundingClientRect();
+      yRel = last.bottom - containerRect.top;
+    }
     setDropIndex(idx);
+    setDropY(yRel);
   }, []);
   const handleDragOver = useCallback(
     (e) => {
@@ -11197,14 +11235,15 @@ function KanbanColumn({
       e.preventDefault();
       e.stopPropagation();
       setDragOver(true);
-      updateDropIndex(e.clientY);
+      updateDrop(e.clientY);
     },
-    [draggedCard, updateDropIndex]
+    [draggedCard, updateDrop]
   );
   const handleDragLeave = useCallback((e) => {
     if (e.currentTarget.contains(e.relatedTarget)) return;
     setDragOver(false);
     setDropIndex(null);
+    setDropY(null);
   }, []);
   const handleDrop = useCallback(
     (e) => {
@@ -11212,16 +11251,15 @@ function KanbanColumn({
       e.preventDefault();
       e.stopPropagation();
       const target = dropIndex ?? 0;
-      if (dragSource && draggedCard) {
+      if (dragSource) {
         let finalIdx = target;
         if (dragSource === id) {
           const srcIdx = findCardIndex(children, draggedCard);
-          if (srcIdx !== -1 && target > srcIdx) {
-            finalIdx = target - 1;
-          }
+          if (srcIdx !== -1 && target > srcIdx) finalIdx = target - 1;
           if (srcIdx === finalIdx) {
             setDragOver(false);
             setDropIndex(null);
+            setDropY(null);
             return;
           }
         }
@@ -11229,27 +11267,13 @@ function KanbanColumn({
       }
       setDragOver(false);
       setDropIndex(null);
+      setDropY(null);
     },
     [draggedCard, dragSource, dropIndex, id, onCardMove, children]
   );
   const cardCount = countCardChildren(children);
-  if (hideWhenEmpty && cardCount === 0 && !draggedCard) {
-    return null;
-  }
-  let cardSeen = 0;
-  const showIndicator = draggedCard !== null && dropIndex !== null && dragOver;
-  const renderedChildren = Children.toArray(children).map((child, i) => {
-    const isCard = isValidElement(child) && child.type === KanbanCard;
-    const indicator = showIndicator && isCard && cardSeen === dropIndex ? /* @__PURE__ */ jsx(DropIndicator, {}, `drop-${i}`) : null;
-    if (isCard) cardSeen += 1;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      indicator,
-      child
-    ] }, i);
-  });
-  if (showIndicator && dropIndex === cardCount) {
-    renderedChildren.push(/* @__PURE__ */ jsx(DropIndicator, {}, "drop-end"));
-  }
+  if (hideWhenEmpty && cardCount === 0 && !draggedCard) return null;
+  const showIndicator = draggedCard !== null && dropIndex !== null && dropY !== null && dragOver;
   const overWip = wipLimit !== void 0 && cardCount > wipLimit;
   return /* @__PURE__ */ jsx(KanbanColumnContext.Provider, { value: id, children: /* @__PURE__ */ jsxs(
     "div",
@@ -11284,36 +11308,22 @@ function KanbanColumn({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { ref: cardsRef, className: "flex flex-1 flex-col gap-2", children: renderedChildren })
+        /* @__PURE__ */ jsxs("div", { ref: cardsRef, className: "relative flex flex-1 flex-col gap-2", children: [
+          children,
+          showIndicator && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-react-fancy-kanban-drop-indicator": "",
+              style: { top: dropY },
+              className: "pointer-events-none absolute left-0 right-0 h-0.5 -translate-y-1/2 rounded-full bg-blue-500/80 shadow-[0_0_0_3px_rgba(59,130,246,0.15)]"
+            }
+          )
+        ] })
       ]
     }
   ) });
 }
 KanbanColumn.displayName = "KanbanColumn";
-function DropIndicator() {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-react-fancy-kanban-drop-indicator": "",
-      className: "h-0.5 -my-1 rounded-full bg-blue-500/80"
-    }
-  );
-}
-function findCardIndex(children, cardId) {
-  let idx = -1;
-  let i = 0;
-  Children.forEach(children, (child) => {
-    if (idx !== -1) return;
-    if (!isValidElement(child)) return;
-    if (child.type === KanbanCard) {
-      if (child.props.id === cardId) {
-        idx = i;
-      }
-      i += 1;
-    }
-  });
-  return idx;
-}
 function KanbanColumnHandle({
   children,
   className
@@ -11451,7 +11461,7 @@ function useCanvas() {
   return ctx;
 }
 function CanvasNode({ children, id, x, y, draggable, onPositionChange, className, style }) {
-  const { registerNode, unregisterNode, viewport } = useCanvas();
+  const { registerNode, unregisterNode, viewport, gridSize, snapToGrid } = useCanvas();
   const nodeRef = useRef(null);
   const isDragging = useRef(false);
   const dragStart = useRef({ mouseX: 0, mouseY: 0, nodeX: 0, nodeY: 0 });
@@ -11484,9 +11494,15 @@ function CanvasNode({ children, id, x, y, draggable, onPositionChange, className
       if (!isDragging.current) return;
       const dx = (e.clientX - dragStart.current.mouseX) / viewport.zoom;
       const dy = (e.clientY - dragStart.current.mouseY) / viewport.zoom;
-      onPositionChange?.(dragStart.current.nodeX + dx, dragStart.current.nodeY + dy);
+      let nx = dragStart.current.nodeX + dx;
+      let ny = dragStart.current.nodeY + dy;
+      if (snapToGrid && gridSize > 0) {
+        nx = Math.round(nx / gridSize) * gridSize;
+        ny = Math.round(ny / gridSize) * gridSize;
+      }
+      onPositionChange?.(nx, ny);
     },
-    [viewport.zoom, onPositionChange]
+    [viewport.zoom, onPositionChange, snapToGrid, gridSize]
   );
   const handlePointerUp = useCallback(() => {
     isDragging.current = false;
@@ -11734,6 +11750,10 @@ function CanvasRoot({
   pannable = true,
   zoomable = true,
   showGrid = false,
+  gridStyle = "dots",
+  gridSize = 20,
+  gridColor = "rgb(161 161 170 / 0.3)",
+  snapToGrid = false,
   fitOnMount = false,
   className,
   style
@@ -11751,8 +11771,8 @@ function CanvasRoot({
     containerRef
   });
   const ctx = useMemo(
-    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef }),
-    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion]
+    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef, gridSize, snapToGrid }),
+    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, gridSize, snapToGrid]
   );
   const hasFitted = useRef(false);
   useEffect(() => {
@@ -11808,9 +11828,13 @@ function CanvasRoot({
           {
             "data-canvas-bg": "",
             className: "absolute inset-0",
-            style: showGrid ? {
-              backgroundImage: `radial-gradient(circle, rgb(161 161 170 / 0.3) 1px, transparent 1px)`,
-              backgroundSize: `${20 * viewport.zoom}px ${20 * viewport.zoom}px`,
+            style: showGrid && gridStyle !== "none" ? gridStyle === "lines" ? {
+              backgroundImage: `linear-gradient(to right, ${gridColor} 1px, transparent 1px), linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`,
+              backgroundSize: `${gridSize * viewport.zoom}px ${gridSize * viewport.zoom}px`,
+              backgroundPosition: `${viewport.panX}px ${viewport.panY}px`
+            } : {
+              backgroundImage: `radial-gradient(circle, ${gridColor} 1px, transparent 1px)`,
+              backgroundSize: `${gridSize * viewport.zoom}px ${gridSize * viewport.zoom}px`,
               backgroundPosition: `${viewport.panX}px ${viewport.panY}px`
             } : void 0
           }
@@ -12527,6 +12551,8 @@ function TreeNode({ node, depth }) {
     dragState,
     setDragState,
     onNodeMove,
+    acceptExternalDrops,
+    onExternalDrop,
     nodes,
     expandNode
   } = useTreeNav();
@@ -12569,14 +12595,18 @@ function TreeNode({ node, depth }) {
     clearAutoExpand();
     setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
   }, [clearAutoExpand, setDragState]);
+  const isExternalDrag = !dragState.draggedNodeId;
   const handleDragOver = useCallback((e) => {
-    if (!dragState.draggedNodeId) return;
-    const sourceId = dragState.draggedNodeId;
-    if (sourceId === node.id) return;
-    if (isDescendantOf(nodes, sourceId, node.id)) return;
+    if (isExternalDrag) {
+      if (!acceptExternalDrops) return;
+    } else {
+      const sourceId = dragState.draggedNodeId;
+      if (sourceId === node.id) return;
+      if (isDescendantOf(nodes, sourceId, node.id)) return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    e.dataTransfer.dropEffect = "move";
+    e.dataTransfer.dropEffect = isExternalDrag ? "copy" : "move";
     const position = computeDropPosition(e, !!isFolder);
     if (isFolder && !isExpanded && position === "inside") {
       if (!autoExpandTimer.current) {
@@ -12589,9 +12619,9 @@ function TreeNode({ node, depth }) {
       clearAutoExpand();
     }
     if (dragState.dropTargetId !== node.id || dragState.dropPosition !== position) {
-      setDragState({ draggedNodeId: sourceId, dropTargetId: node.id, dropPosition: position });
+      setDragState({ draggedNodeId: dragState.draggedNodeId, dropTargetId: node.id, dropPosition: position });
     }
-  }, [dragState, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
+  }, [dragState, isExternalDrag, acceptExternalDrops, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
   const handleDragLeave = useCallback((e) => {
     if (!e.currentTarget.contains(e.relatedTarget)) {
       clearAutoExpand();
@@ -12605,21 +12635,25 @@ function TreeNode({ node, depth }) {
     e.stopPropagation();
     clearAutoExpand();
     const sourceId = dragState.draggedNodeId;
-    const position = dragState.dropPosition;
-    if (!sourceId || !position) return;
-    if (sourceId === node.id) return;
-    if (isDescendantOf(nodes, sourceId, node.id)) return;
-    onNodeMove?.(sourceId, node.id, position);
+    const position = dragState.dropPosition ?? computeDropPosition(e, !!isFolder);
+    if (sourceId) {
+      if (sourceId === node.id) return;
+      if (isDescendantOf(nodes, sourceId, node.id)) return;
+      onNodeMove?.(sourceId, node.id, position);
+    } else if (acceptExternalDrops) {
+      onExternalDrop?.(e, node, position);
+    }
     setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
-  }, [dragState, node.id, nodes, onNodeMove, setDragState, clearAutoExpand]);
+  }, [dragState, node, isFolder, nodes, onNodeMove, acceptExternalDrops, onExternalDrop, setDragState, clearAutoExpand]);
   const canDrag = draggable && !node.disabled;
+  const dropEnabled = draggable || acceptExternalDrops;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-react-fancy-tree-node": "",
-      onDragOver: draggable ? handleDragOver : void 0,
-      onDragLeave: draggable ? handleDragLeave : void 0,
-      onDrop: draggable ? handleDrop : void 0,
+      onDragOver: dropEnabled ? handleDragOver : void 0,
+      onDragLeave: dropEnabled ? handleDragLeave : void 0,
+      onDrop: dropEnabled ? handleDrop : void 0,
       children: [
         isDropTarget && dropPosition === "before" && /* @__PURE__ */ jsx(
           "div",
@@ -12692,6 +12726,8 @@ function TreeNavRoot({
   onNodeContextMenu,
   draggable = false,
   onNodeMove,
+  acceptExternalDrops = false,
+  onExternalDrop,
   expandedIds: controlledExpanded,
   defaultExpandedIds,
   onExpandedChange,
@@ -12745,6 +12781,8 @@ function TreeNavRoot({
       dragState,
       setDragState,
       onNodeMove,
+      acceptExternalDrops,
+      onExternalDrop,
       nodes,
       expandNode
     }),
@@ -12759,16 +12797,19 @@ function TreeNavRoot({
       draggable,
       dragState,
       onNodeMove,
+      acceptExternalDrops,
+      onExternalDrop,
       nodes,
       expandNode
     ]
   );
+  const dropEnabled = draggable || acceptExternalDrops;
   return /* @__PURE__ */ jsx(TreeNavContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     "nav",
     {
       "data-react-fancy-tree-nav": "",
       className: cn("flex flex-col gap-0.5 py-1 text-sm", className),
-      onDragEnd: draggable ? handleDragEnd : void 0,
+      onDragEnd: dropEnabled ? handleDragEnd : void 0,
       children: nodes.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, depth: 0 }, node.id))
     }
   ) });