117Build a nested drag-and-drop tree editor with optimistic reordering

Build an outline editor (like a docs sidebar) where pages can be dragged into folders and reordered, and every move is saved to a server.

A node is { id, title, children: [] } (every node can have children).

1. moveNode(tree, nodeId, targetParentId, index) returns a new tree with the node removed from its current place and inserted into targetParentId's children at index ("root" is the id of the top-level node). Within the same parent, index refers to the position after removal. Throw an Error when moving a node into itself or into one of its descendants.
2. <TreeEditor initialTree={root} onMove={async (move) => …} />:
   • render each node as <div data-node-id={id} draggable="true">{title}</div> followed by its children in a nested list;
   • dropping a node on another node's row inserts it before that node (same parent); dropping it on the row's "Drop inside" zone (<div data-drop-inside={id}>) makes it that node's last child;
   • apply the move optimistically and call onMove({ nodeId, parentId, index });
   • if onMove rejects, undo only that move, keep other moves (even ones made after it), and show <p role="alert">.