southpaw 0.2.7

package/modules/page/tree.tsx

@@ -0,0 +1,860 @@
+import {
+  ActionIcon,
+  Center,
+  Flex,
+  Group,
+  Menu,
+  RenderTreeNodePayload,
+  Tabs,
+  Text,
+  Tree,
+  TreeProps,
+  useTree,
+} from "@mantine/core";
+import { modals } from "@mantine/modals";
+import {
+  FC,
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { ReactElementType } from "../../types/react_element";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconChevronUp,
+  IconCircle,
+  IconComponents,
+  IconCopy,
+  IconDotsVertical,
+  IconGripVertical,
+  IconList,
+  IconPlus,
+  IconTrash,
+} from "@tabler/icons-react";
+import {
+  DndContext,
+  DragEndEvent,
+  DragMoveEvent,
+  MeasuringStrategy,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS as dndCSS } from "@dnd-kit/utilities";
+import { ModalInsert } from "./insert-modal";
+import { FETCH } from "southpaw/api/client";
+import { TNode, useContextDev } from "southpaw/contexts/dev";
+import { FiberNodeType } from "../../types/fiber_node";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type DropPosition = "before" | "after" | "within";
+
+type DragOverData = {
+  overId: string | null;
+  position: DropPosition | null;
+};
+
+type TTreePayload = Omit<RenderTreeNodePayload, "node"> & { node: TNode };
+
+type ReactJsxEl = ReactElementType | string | number | ReactJsxEl[];
+
+type Props = { jsx: ReactElementType };
+
+// ---------------------------------------------------------------------------
+// Pure helpers — defined outside the component so closures are never stale
+// ---------------------------------------------------------------------------
+
+function flattenIds(items: TreeProps["data"]): string[] {
+  return items.reduce<string[]>((acc, item) => {
+    acc.push(item.value);
+    if (item.children?.length) acc.push(...flattenIds(item.children));
+    return acc;
+  }, []);
+}
+
+function findNodeByValue(
+  items: TreeProps["data"],
+  value: string,
+): TreeProps["data"][number] | null {
+  for (const item of items) {
+    if (item.value === value) return item;
+    if (item.children?.length) {
+      const found = findNodeByValue(item.children, value);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+function moveNodeOptimistically(
+  currentData: TreeProps["data"],
+  activeId: string,
+  overId: string,
+  position: DropPosition,
+): TreeProps["data"] {
+  let activeNode: TreeProps["data"][number] | null = null;
+
+  const removeNode = (items: TreeProps["data"]): TreeProps["data"] =>
+    items
+      .filter((item) => {
+        if (item.value === activeId) {
+          activeNode = item;
+          return false;
+        }
+        return true;
+      })
+      .map((item) => ({ ...item, children: removeNode(item.children ?? []) }));
+
+  const withoutActive = removeNode(currentData);
+  if (!activeNode) return currentData;
+
+  const insertNode = (items: TreeProps["data"]): TreeProps["data"] => {
+    const idx = items.findIndex((i) => i.value === overId);
+    if (idx !== -1) {
+      const copy = [...items];
+      if (position === "before") {
+        copy.splice(idx, 0, activeNode!);
+        return copy;
+      }
+      if (position === "after") {
+        copy.splice(idx + 1, 0, activeNode!);
+        return copy;
+      }
+      // "within" — append as last child of the target
+      return copy.map((item) =>
+        item.value === overId
+          ? { ...item, children: [...(item.children ?? []), activeNode!] }
+          : item,
+      );
+    }
+    return items.map((item) => ({
+      ...item,
+      children: insertNode(item.children ?? []),
+    }));
+  };
+
+  return insertNode(withoutActive);
+}
+
+function safeParse(str: string): unknown {
+  try {
+    return JSON.parse(str);
+  } catch {
+    return str;
+  }
+}
+
+/**
+ * Returns the [data-value] of the element under the pointer.
+ *
+ * The actively-dragged SortableLeaf has `pointer-events: none`, so
+ * elementFromPoint skips the ghost and returns the actual drop target
+ * underneath — even when dragging a non-child over a parent that already
+ * has visible children.
+ */
+function getNodeValueAtPoint(x: number, y: number): string | null {
+  const el = document.elementFromPoint(x, y);
+  if (!el) return null;
+  return el.closest<HTMLElement>("[data-value]")?.dataset.value ?? null;
+}
+
+/**
+ * Given a target node value and the current pointer Y, decide whether the
+ * pointer is in the top-25% (before), bottom-25% (after), or middle-50%
+ * (within) zone of that node's row.
+ */
+function computeDropPosition(
+  overId: string,
+  pointerY: number,
+  overNode: TreeProps["data"][number] | null,
+): DropPosition {
+  const el = document.querySelector<HTMLElement>(
+    `[data-value="${CSS.escape(overId)}"]`,
+  );
+  if (!el) return "after";
+
+  const rect = el.getBoundingClientRect();
+  const relY = pointerY - rect.top;
+
+  const canNest =
+    overNode != null &&
+    Object.keys(overNode.nodeProps ?? {}).includes("children");
+
+  if (canNest) {
+    const threshold = rect.height / 4;
+    if (relY < threshold) return "before";
+    if (relY > rect.height - threshold) return "after";
+    return "within";
+  }
+
+  return relY < rect.height / 2 ? "before" : "after";
+}
+
+// ---------------------------------------------------------------------------
+// LeafIcon
+// ---------------------------------------------------------------------------
+
+const LeafIcon: FC<{ label: string; isFolder: boolean; expanded: boolean }> = ({
+  label,
+  isFolder,
+  expanded,
+}) => {
+  if (isFolder) {
+    return expanded ? (
+      <IconChevronDown strokeWidth="1px" size={16} />
+    ) : (
+      <IconChevronRight strokeWidth="1px" size={16} />
+    );
+  }
+  return label.startsWith("Blocks.") ? (
+    <IconComponents size={16} />
+  ) : (
+    <IconCircle size={16} />
+  );
+};
+
+// ---------------------------------------------------------------------------
+// LeafMenu
+// ---------------------------------------------------------------------------
+
+const LeafMenu: FC<{
+  node: TNode;
+  level: number;
+  dispatch: ReturnType<typeof useContextDev>["dispatch"];
+  cannotInsertWithin: boolean;
+  isRoot: boolean;
+}> = ({ node, level, dispatch, cannotInsertWithin, isRoot }) => (
+  <Menu shadow="md" width={200} withinPortal={false}>
+    <Menu.Target>
+      <ActionIcon
+        flex="none"
+        onClick={(e) => e.stopPropagation()}
+        mr="sm"
+        p={2}
+        size="compact-xs"
+        variant="subtle"
+        color="dark"
+      >
+        <IconDotsVertical size={20} />
+      </ActionIcon>
+    </Menu.Target>
+
+    <Menu.Dropdown>
+      <Menu.Item
+        disabled={level === 1}
+        onClick={(e) => {
+          e.stopPropagation();
+          dispatch({
+            type: "TREE_SET_MENU_NODE",
+            args: { node, insertMode: "before" },
+          });
+          dispatch({ type: "MODALS_OPEN", args: { name: "insert" } });
+        }}
+        leftSection={
+          <IconList size={20} style={{ transform: "scale(-1,1)" }} />
+        }
+      >
+        Insert before
+      </Menu.Item>
+
+      <Menu.Item
+        disabled={cannotInsertWithin}
+        onClick={(e) => {
+          e.stopPropagation();
+          dispatch({
+            type: "TREE_SET_MENU_NODE",
+            args: { node, insertMode: "within" },
+          });
+          dispatch({ type: "MODALS_OPEN", args: { name: "insert" } });
+        }}
+        leftSection={<IconPlus size={20} />}
+      >
+        Insert within
+      </Menu.Item>
+
+      <Menu.Item
+        disabled={level === 1}
+        onClick={(e) => {
+          e.stopPropagation();
+          dispatch({
+            type: "TREE_SET_MENU_NODE",
+            args: { node, insertMode: "after" },
+          });
+          dispatch({ type: "MODALS_OPEN", args: { name: "insert" } });
+        }}
+        leftSection={<IconList size={20} />}
+      >
+        Insert after
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item
+        disabled={isRoot}
+        onClick={async (e) => {
+          e.stopPropagation();
+          await FETCH.page.duplicateNode({
+            source: JSON.parse(node.value) as FiberNodeType["_debugSource"],
+          });
+        }}
+        leftSection={<IconCopy size={20} />}
+      >
+        Duplicate
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item
+        disabled={isRoot}
+        onClick={async (e) => {
+          e.stopPropagation();
+          await FETCH.page.moveUpNode({
+            source: JSON.parse(node.value) as FiberNodeType["_debugSource"],
+          });
+        }}
+        leftSection={<IconChevronUp size={20} />}
+      >
+        Move up
+      </Menu.Item>
+
+      <Menu.Item
+        disabled={isRoot}
+        onClick={async (e) => {
+          e.stopPropagation();
+          await FETCH.page.moveDownNode({
+            source: JSON.parse(node.value) as FiberNodeType["_debugSource"],
+          });
+        }}
+        leftSection={<IconChevronDown size={20} />}
+      >
+        Move down
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item
+        disabled={level === 1}
+        color="red"
+        onClick={(e) => {
+          e.stopPropagation();
+          modals.openConfirmModal({
+            title: "Delete node",
+            children: (
+              <Text size="sm">
+                Are you sure you want to delete this {node.label}? This action
+                cannot be undone.
+              </Text>
+            ),
+            labels: { confirm: "Delete", cancel: "Cancel" },
+            confirmProps: { color: "red" },
+            onConfirm: async () => {
+              await FETCH.page.deleteNode({
+                source: JSON.parse(node.value) as FiberNodeType["_debugSource"],
+              });
+              dispatch({
+                type: "TREE_SELECT_NODE",
+                args: { selectedNode: null },
+              });
+            },
+          });
+        }}
+        leftSection={<IconTrash size={20} />}
+      >
+        Delete
+      </Menu.Item>
+    </Menu.Dropdown>
+  </Menu>
+);
+
+// ---------------------------------------------------------------------------
+// SortableLeaf
+// ---------------------------------------------------------------------------
+
+const SortableLeaf: FC<TTreePayload & { dragOverData: DragOverData }> = ({
+  node,
+  expanded,
+  hasChildren,
+  elementProps,
+  selected,
+  level,
+  dragOverData,
+}) => {
+  const { dispatch } = useContextDev();
+  const isRoot = level === 1;
+  const label = node.label!.toString();
+  const cannotInsertWithin = !Object.keys(node.nodeProps ?? {}).includes(
+    "children",
+  );
+  const isOverWithin =
+    dragOverData.overId === node.value && dragOverData.position === "within";
+  const isOverBefore =
+    dragOverData.overId === node.value && dragOverData.position === "before";
+  const isOverAfter =
+    dragOverData.overId === node.value && dragOverData.position === "after";
+
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useSortable({
+      id: node.value,
+      disabled: isRoot,
+    });
+
+  useEffect(() => {
+    if (selected) {
+      dispatch({ type: "TREE_SELECT_NODE", args: { selectedNode: node } });
+    }
+  }, [selected, dispatch, node]);
+
+  const { style: elementStyle, ...restElementProps } = elementProps ?? {};
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: dndCSS.Translate.toString(transform),
+        // No CSS transition — eliminates jitter on fast drags.
+        opacity: isDragging ? 0.3 : 1,
+        // KEY FIX: pointer-events:none while dragging makes document.elementFromPoint
+        // skip this element entirely. Without this, when dragging node X over a
+        // parent P that already has children, elementFromPoint would return X's
+        // ghost (still at its original DOM position) instead of P, so "within"
+        // would never fire for P.
+        pointerEvents: isDragging ? "none" : undefined,
+        cursor: "default",
+        position: "relative",
+        backgroundColor:
+          isOverWithin || selected
+            ? "var(--mantine-primary-color-light)"
+            : "transparent",
+        borderRadius: "var(--mantine-radius-sm)",
+        outline:
+          isOverWithin || selected
+            ? `1px ${isOverWithin ? "dashed" : "solid"} var(--mantine-primary-color-filled)`
+            : "none",
+        outlineOffset: -1,
+        ...elementStyle,
+      }}
+      {...restElementProps}
+    >
+      {!isRoot && (isOverBefore || isOverAfter) && (
+        <div
+          style={{
+            position: "absolute",
+            top: isOverBefore ? -2 : undefined,
+            bottom: isOverAfter ? -2 : undefined,
+            left: (level - 1) * 20,
+            right: 0,
+            height: 4,
+            backgroundColor: "var(--mantine-primary-color-filled)",
+            borderRadius: 2,
+            zIndex: 10,
+            pointerEvents: "none",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <div
+            style={{
+              width: 8,
+              height: 8,
+              backgroundColor: "var(--mantine-primary-color-filled)",
+              borderRadius: "50%",
+              marginLeft: -4,
+              boxShadow: "0 0 4px rgba(0,0,0,0.2)",
+            }}
+          />
+        </div>
+      )}
+      <Flex align="center" gap={5} pl={isRoot ? 10 : undefined}>
+        <Group flex={1} wrap="nowrap" style={{ overflow: "hidden" }} gap={0}>
+          {!isRoot && (
+            <Center
+              p={4}
+              style={{ cursor: "grab" }}
+              {...attributes}
+              {...listeners}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <IconGripVertical size={14} color="gray" />
+            </Center>
+          )}
+          <Center flex="none" ml={isRoot ? "sm" : 0}>
+            <LeafIcon
+              label={label}
+              isFolder={hasChildren}
+              expanded={expanded}
+            />
+          </Center>
+          <Text p="xs" truncate title={label}>
+            {label}
+          </Text>
+        </Group>
+
+        {label !== "Fragment" && (
+          <LeafMenu
+            node={node}
+            level={level}
+            dispatch={dispatch}
+            cannotInsertWithin={cannotInsertWithin}
+            isRoot={isRoot}
+          />
+        )}
+      </Flex>
+    </div>
+  );
+};
+
+// -------------------------------------------------------------------------
+// generateData — static recursive helper
+// -------------------------------------------------------------------------
+
+const generateData = async (
+  reactJsxEl: ReactJsxEl,
+  index: number,
+): Promise<TreeProps["data"][number] | null> => {
+  if (
+    Array.isArray(reactJsxEl) ||
+    typeof reactJsxEl === "string" ||
+    typeof reactJsxEl === "number" ||
+    typeof reactJsxEl === "boolean" ||
+    typeof reactJsxEl === "function"
+  ) {
+    return null;
+  }
+
+  const isBasicComponent =
+    reactJsxEl.$$typeof === Symbol.for("react.element") &&
+    typeof reactJsxEl.type === "function";
+
+  if (isBasicComponent) {
+    const fn = reactJsxEl.type as FC;
+    return {
+      label: fn.displayName || fn.name,
+      value: JSON.stringify(reactJsxEl._source),
+      children: [],
+      nodeProps: reactJsxEl.props,
+    };
+  }
+
+  const isFragment = reactJsxEl.type.toString() === "Symbol(react.fragment)";
+  if (isFragment) {
+    const nodeProps = reactJsxEl.props;
+    const raw = nodeProps.children
+      ? Array.isArray(nodeProps.children)
+        ? nodeProps.children
+        : [nodeProps.children]
+      : [];
+    const children = (await Promise.all(raw.map(generateData))).filter(Boolean);
+    return {
+      label: "Fragment",
+      value: `fragment-${index}`,
+      children,
+      nodeProps,
+    };
+  }
+
+  const isHtmlElement = typeof reactJsxEl.type === "string";
+  if (isHtmlElement) {
+    const nodeProps = reactJsxEl.props;
+    const raw = nodeProps.children
+      ? Array.isArray(nodeProps.children)
+        ? nodeProps.children
+        : [nodeProps.children]
+      : [];
+    const children = (await Promise.all(raw.map(generateData))).filter(Boolean);
+    return {
+      label: reactJsxEl.type as string,
+      value: JSON.stringify(reactJsxEl._source),
+      children,
+      nodeProps,
+    };
+  }
+
+  const displayName = (reactJsxEl.type as FunctionComponent).displayName;
+  if (!displayName) return null;
+
+  const isUI = displayName.startsWith("UI.");
+  const isBlock = displayName.startsWith("Blocks.");
+  const isComponent = displayName.startsWith("Components.");
+  if (!isUI && !isBlock && !isComponent) return null;
+
+  const [, name] = displayName.split(".");
+  let comp: { params: { props: Record<string, unknown> } };
+
+  if (isUI) ({ default: comp } = await import(`southpaw/ui/${name}`));
+  else if (isBlock)
+    ({ default: comp } = await import(`southpaw/ui/blocks/${name}`));
+  else ({ default: comp } = await import(`@/components/${name}`));
+
+  const nodeProps = { ...comp.params.props, ...reactJsxEl.props };
+  const raw = nodeProps.children
+    ? Array.isArray(nodeProps.children)
+      ? nodeProps.children
+      : [nodeProps.children]
+    : [];
+  const children = (await Promise.all(raw.map(generateData))).filter(Boolean);
+
+  return {
+    label: displayName,
+    value: JSON.stringify(reactJsxEl._source),
+    nodeProps,
+    children,
+  };
+};
+
+// ---------------------------------------------------------------------------
+// TabPageTree
+// ---------------------------------------------------------------------------
+
+export const TabPageTree: FC<Props> = ({ jsx }) => {
+  const { dispatch } = useContextDev();
+  const [data, setData] = useState<TreeProps["data"]>([]);
+  const [dragOverData, setDragOverData] = useState<DragOverData>({
+    overId: null,
+    position: null,
+  });
+
+  // Ref mirrors so event handlers always read fresh values without being in
+  // useCallback dependency arrays (which would cause unnecessary re-subscriptions).
+  const dragOverDataRef = useRef<DragOverData>({
+    overId: null,
+    position: null,
+  });
+  const dataRef = useRef<TreeProps["data"]>([]);
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
+  const tree = useTree();
+
+  // rAF handle for onDragMove throttling.
+  const rafRef = useRef<number | null>(null);
+
+  // Auto-expand: when hovering "within" a node for 600 ms, expand it.
+  const autoExpandTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearAutoExpand = useCallback(() => {
+    if (autoExpandTimer.current !== null) {
+      clearTimeout(autoExpandTimer.current);
+      autoExpandTimer.current = null;
+    }
+  }, []);
+
+  useEffect(
+    () => () => {
+      clearAutoExpand();
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    },
+    [clearAutoExpand],
+  );
+
+  // -------------------------------------------------------------------------
+  // setDragOver — single write path that keeps state + ref in sync and manages
+  //               the auto-expand timer. Skips update if nothing changed.
+  //               Safe to call from rAF callbacks (no setState in side-effects).
+  // -------------------------------------------------------------------------
+
+  const setDragOver = useCallback(
+    (next: DragOverData) => {
+      const prev = dragOverDataRef.current;
+      if (prev.overId === next.overId && prev.position === next.position)
+        return;
+
+      clearAutoExpand();
+
+      if (next.position === "within" && next.overId !== null) {
+        const id = next.overId;
+        autoExpandTimer.current = setTimeout(() => tree.expand(id), 600);
+      }
+
+      dragOverDataRef.current = next;
+      setDragOverData(next);
+    },
+    [clearAutoExpand, tree],
+  );
+
+  const refresh = useCallback(async () => {
+    const result = (
+      await Promise.all([jsx].map((el, i) => generateData(el, i)))
+    ).filter(Boolean) as TreeProps["data"];
+    setData(result);
+  }, [jsx]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  // -------------------------------------------------------------------------
+  // Sensors
+  // -------------------------------------------------------------------------
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+  );
+
+  // -------------------------------------------------------------------------
+  // Drag handlers
+  // -------------------------------------------------------------------------
+
+  const handleDragStart = useCallback(() => {
+    setDragOver({ overId: null, position: null });
+  }, [setDragOver]);
+
+  /**
+   * WHY onDragMove instead of onDragOver:
+   *
+   * onDragOver fires only when dnd-kit's collision target changes — i.e. when
+   * the pointer crosses from one droppable rect into another. Moving within a
+   * single node's row (e.g. from the top-25% "before" zone down into the
+   * middle-50% "within" zone) never changes over.id, so onDragOver never fires
+   * again and the position indicator freezes. onDragMove fires on every pointer
+   * move, so our zone calculation stays live.
+   *
+   * We throttle to one DOM read per animation frame (~60 fps).
+   */
+  const handleDragMove = useCallback(
+    ({ active, activatorEvent, delta }: DragMoveEvent) => {
+      // Snapshot coordinates now — the event object may be reused/pooled.
+      const activeId = active.id as string;
+      const clientX = (activatorEvent as MouseEvent).clientX + delta.x;
+      const clientY = (activatorEvent as MouseEvent).clientY + delta.y;
+
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+
+        // elementFromPoint skips the dragged element (pointer-events:none)
+        // and returns the actual node row underneath.
+        const overId = getNodeValueAtPoint(clientX, clientY);
+
+        if (!overId || overId === activeId) {
+          setDragOver({ overId: null, position: null });
+          return;
+        }
+
+        const overNode = findNodeByValue(dataRef.current, overId);
+        let position = computeDropPosition(overId, clientY, overNode);
+
+        // If dragging over the root node, force 'within' position
+        const isRootNode = dataRef.current?.[0]?.value === overId;
+        if (isRootNode && (position === "before" || position === "after")) {
+          position = "within";
+        }
+
+        setDragOver({ overId, position });
+      });
+    },
+    [setDragOver],
+  );
+
+  /**
+   * Reads dragOverDataRef (always current) rather than event.over.
+   * event.over comes from dnd-kit's collision detection, which we've replaced
+   * with our elementFromPoint approach via onDragMove — so event.over may
+   * be stale or simply wrong for our use case.
+   */
+  const handleDragEnd = useCallback(
+    async ({ active }: DragEndEvent) => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      clearAutoExpand();
+
+      const { overId, position } = dragOverDataRef.current;
+
+      // Reset visual state before any async work.
+      dragOverDataRef.current = { overId: null, position: null };
+      setDragOverData({ overId: null, position: null });
+
+      const activeValue = active.id as string;
+
+      if (
+        !overId ||
+        !position ||
+        overId === activeValue ||
+        !findNodeByValue(dataRef.current, activeValue) ||
+        !findNodeByValue(dataRef.current, overId)
+      ) {
+        return;
+      }
+
+      // Expand immediately so the newly-nested child is visible right away.
+      if (position === "within") tree.expand(overId);
+
+      // Optimistic local update before API round-trip.
+      setData((prev) =>
+        moveNodeOptimistically(prev, activeValue, overId, position),
+      );
+
+      await FETCH.page.moveNode({
+        source: safeParse(activeValue) as FiberNodeType["_debugSource"],
+        target: safeParse(overId) as FiberNodeType["_debugSource"],
+        position,
+      });
+    },
+    [clearAutoExpand, tree],
+  );
+
+  const handleDragCancel = useCallback(() => {
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    clearAutoExpand();
+    dragOverDataRef.current = { overId: null, position: null };
+    setDragOverData({ overId: null, position: null });
+  }, [clearAutoExpand]);
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+
+  const allIds = flattenIds(data);
+
+  return (
+    <Tabs.Panel
+      value="tree"
+      w={300}
+      style={{ overflow: "auto" }}
+      onClick={() => {
+        tree.clearSelected();
+        dispatch({ type: "TREE_SELECT_NODE", args: { selectedNode: null } });
+      }}
+    >
+      <ModalInsert />
+      <DndContext
+        sensors={sensors}
+        collisionDetection={() => []}
+        onDragStart={handleDragStart}
+        onDragMove={handleDragMove}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+        measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}
+      >
+        <SortableContext items={allIds} strategy={() => null}>
+          <Tree
+            tree={tree}
+            p="md"
+            selectOnClick
+            data={data}
+            onClick={(e) => e.stopPropagation()}
+            renderNode={(payload) => (
+              <SortableLeaf
+                {...(payload as TTreePayload)}
+                dragOverData={dragOverData}
+              />
+            )}
+          />
+        </SortableContext>
+      </DndContext>
+    </Tabs.Panel>
+  );
+};