fix(editor): prevent stuck list after pasting plain text

marked.parse() emits a trailing newline that became a whitespace text
node at the body level, which parseSlice converted into a spurious
paragraph at the end of the target — inside a list item this blocked
the "Enter exits list" behavior since splitListItem's empty-last-block
check never fired.
Strip whitespace-only text nodes between block elements before parsing
the slice, and place the cursor at the end of the inserted content.
Also extend transformPasted to drop trailing hardBreaks and whitespace
text nodes for the HTML-clipboard path.

apps/client/package.json

@@ -7,18 +7,13 @@
     "build": "tsc && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\"",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-flourish": "^2.0.15",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-live-region": "^1.3.4",
     "@casl/react": "^5.0.1",
     "@docmost/editor-ext": "workspace:*",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@excalidraw/excalidraw": "0.18.0-3a5ef40",
     "@mantine/core": "^8.3.18",
     "@mantine/dates": "^8.3.18",
@@ -27,16 +22,13 @@
     "@mantine/modals": "^8.3.18",
     "@mantine/notifications": "^8.3.18",
     "@mantine/spotlight": "^8.3.18",
-    "@slidoapp/emoji-mart": "^5.8.7",
-    "@slidoapp/emoji-mart-data": "^1.2.4",
-    "@slidoapp/emoji-mart-react": "^1.1.5",
     "@tabler/icons-react": "^3.40.0",
     "@tanstack/react-query": "5.90.17",
-    "@tanstack/react-virtual": "3.13.24",
     "alfaaz": "^1.1.0",
     "axios": "1.16.0",
     "blueimp-load-image": "^5.16.0",
     "clsx": "^2.1.1",
+    "emoji-mart": "^5.6.0",
     "file-saver": "^2.0.5",
     "highlightjs-sap-abap": "^0.3.0",
     "i18next": "25.10.1",
@@ -52,6 +44,7 @@
     "mitt": "^3.0.1",
     "posthog-js": "1.372.2",
     "react": "^18.3.1",
+    "react-arborist": "3.4.0",
     "react-clear-modal": "^2.0.18",
     "react-dom": "^18.3.1",
     "react-drawio": "^1.0.7",
@@ -66,8 +59,6 @@
   "devDependencies": {
     "@eslint/js": "^9.28.0",
     "@tanstack/eslint-plugin-query": "^5.94.4",
-    "@testing-library/jest-dom": "^6.6.0",
-    "@testing-library/react": "^16.1.0",
     "@types/blueimp-load-image": "^5.16.6",
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
@@ -81,7 +72,6 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^15.13.0",
-    "jsdom": "^25.0.0",
     "optics-ts": "^2.4.1",
     "postcss": "^8.5.12",
     "postcss-preset-mantine": "^1.18.0",
@@ -89,7 +79,6 @@
     "prettier": "^3.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.57.1",
-    "vite": "8.0.5",
-    "vitest": "^4.1.6"
+    "vite": "8.0.5"
   }
 }

apps/client/src/components/ui/emoji-picker.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useState } from "react";
 import {
   ActionIcon,
   Popover,
@@ -7,24 +7,9 @@ import {
 } from "@mantine/core";
 import { useClickOutside, useDisclosure, useWindowEvent } from "@mantine/hooks";
 import { Suspense } from "react";
+const Picker = React.lazy(() => import("@emoji-mart/react"));
 import { useTranslation } from "react-i18next";
 
-// Load the picker module AND the emoji data in parallel inside the lazy
-// resolution, then bind the data into the component. React.lazy only finishes
-// suspending once both are in memory, so the Suspense boundary hides the
-// Remove button until the Picker can render with real content.
-const Picker = React.lazy(async () => {
-  const [pickerModule, dataModule] = await Promise.all([
-    import("@slidoapp/emoji-mart-react"),
-    import("@slidoapp/emoji-mart-data"),
-  ]);
-  const PickerComp = pickerModule.default;
-  const data = dataModule.default;
-  return {
-    default: (props: any) => <PickerComp {...props} data={data} />,
-  };
-});
-
 export interface EmojiPickerInterface {
   onEmojiSelect: (emoji: any) => void;
   icon: ReactNode;
@@ -34,7 +19,6 @@ export interface EmojiPickerInterface {
     size?: string;
     variant?: string;
     c?: string;
-    tabIndex?: number;
   };
 }
 
@@ -66,38 +50,6 @@ function EmojiPicker({
     }
   });
 
-  // emoji-mart's built-in autoFocus calls .focus() without preventScroll, which
-  // makes the browser scroll every scrollable ancestor of the search input to
-  // bring it on screen — including the page editor's scroll container, so the
-  // page jumps to the top whenever the picker is opened from a scrolled-down
-  // position. The search input lives inside the <em-emoji-picker> custom
-  // element's shadow root, so we poll for it after the dropdown mounts and
-  // focus it ourselves with preventScroll.
-  useEffect(() => {
-    if (!opened || !dropdown) return;
-    let cancelled = false;
-    let rafId = 0;
-    const tryFocus = (attempts: number) => {
-      if (cancelled) return;
-      const pickerEl = dropdown.querySelector("em-emoji-picker");
-      const input = pickerEl?.shadowRoot?.querySelector<HTMLInputElement>(
-        'input[type="search"]',
-      );
-      if (input) {
-        input.focus({ preventScroll: true });
-        return;
-      }
-      if (attempts < 60) {
-        rafId = requestAnimationFrame(() => tryFocus(attempts + 1));
-      }
-    };
-    rafId = requestAnimationFrame(() => tryFocus(0));
-    return () => {
-      cancelled = true;
-      cancelAnimationFrame(rafId);
-    };
-  }, [opened, dropdown]);
-
   const handleEmojiSelect = (emoji) => {
     onEmojiSelect(emoji);
     handlers.close();
@@ -122,7 +74,6 @@ function EmojiPicker({
           c={actionIconProps?.c || "gray"}
           variant={actionIconProps?.variant || "transparent"}
           size={actionIconProps?.size}
-          tabIndex={actionIconProps?.tabIndex}
           onClick={handlers.toggle}
           aria-label={t("Pick emoji")}
           aria-haspopup="dialog"
@@ -134,6 +85,7 @@ function EmojiPicker({
       <Suspense fallback={null}>
         <Popover.Dropdown bg="000" style={{ border: "none" }} ref={setDropdown}>
           <Picker
+            data={async () => (await import("@emoji-mart/data")).default}
             onEmojiSelect={handleEmojiSelect}
             perLine={8}
             skinTonePosition="search"

apps/client/src/features/editor/components/emoji-menu/utils.ts

@@ -21,7 +21,7 @@ let _emojiIndex: EmojiIndexEntry[] | null = null;
 
 export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
   if (_emojiIndex) return _emojiIndex;
-  const { default: data } = await import('@slidoapp/emoji-mart-data');
+  const { default: data } = await import("@emoji-mart/data");
   _emojiIndex = (Object.values((data as any).emojis) as any[])
     .filter((e) => e.id && e.name && e.skins?.[0]?.native)
     .map((e) => ({
@@ -74,7 +74,7 @@ let _cats: EmojiCategory[] | null = null;
 export const getEmojiCategories = async (): Promise<EmojiCategory[]> => {
   if (_cats) return _cats;
   const [{ default: data }, index] = await Promise.all([
-    import("@slidoapp/emoji-mart-data"),
+    import("@emoji-mart/data"),
     buildEmojiIndex(),
   ]);
   const byId = new Map(index.map((e) => [e.id, e]));

apps/client/src/features/editor/components/mention/mention-list.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -35,7 +36,7 @@ import {
   usePageQuery,
 } from "@/features/page/queries/page-query";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { treeModel } from "@/features/page/tree/model/tree-model";
+import { SimpleTree } from "react-arborist";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
@@ -52,6 +53,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   const [renderItems, setRenderItems] = useState<MentionSuggestionItem[]>([]);
   const { t } = useTranslation();
   const [data, setData] = useAtom(treeDataAtom);
+  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
   const createPageMutation = useCreatePageMutation();
   const emit = useQueryEmit();
   const isInCommentContext = props.isInCommentContext ?? false;
@@ -218,20 +220,20 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     try {
       createdPage = await createPageMutation.mutateAsync(payload);
       const parentId = page.id || null;
-      const newNode: SpaceTreeNode = {
+      const data = {
         id: createdPage.id,
         slugId: createdPage.slugId,
         name: createdPage.title,
         position: createdPage.position,
         spaceId: createdPage.spaceId,
         parentPageId: createdPage.parentPageId,
-        hasChildren: false,
         children: [],
-      };
+      } as any;
 
-      const lastIndex = data.length;
+      const lastIndex = tree.data.length;
 
-      setData(treeModel.insert(data, parentId, newNode, lastIndex));
+      tree.create({ parentId, index: lastIndex, data });
+      setData(tree.data);
 
       props.command({
         id: uuid7(),
@@ -249,7 +251,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
           payload: {
             parentId,
             index: lastIndex,
-            data: newNode,
+            data,
           },
         });
       }, 50);

apps/client/src/features/editor/extensions/markdown-clipboard.ts

@@ -81,6 +81,7 @@ export const MarkdownClipboard = Extension.create({
 
             const parsed = markdownToHtml(text.replace(/\n+$/, ""));
             const body = elementFromString(parsed);
+            stripBlockLevelWhitespaceNodes(body);
             normalizeTableColumnWidths(body);
 
             const contentNodes = DOMParser.fromSchema(
@@ -91,7 +92,7 @@ export const MarkdownClipboard = Extension.create({
 
             tr.replaceRange(from, to, contentNodes);
             const insertEnd = tr.mapping.map(from, 1);
-            tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(from, insertEnd - 2)), -1));
+            tr.setSelection(TextSelection.near(tr.doc.resolve(insertEnd), -1));
             tr.setMeta('paste', true)
             view.dispatch(tr);
             return true;
@@ -104,21 +105,28 @@ export const MarkdownClipboard = Extension.create({
           transformPasted: (slice) => {
             let { content, openStart, openEnd } = slice;
 
-            // Remove trailing paragraphs that contain only whitespace
-            while (content.childCount > 1) {
-              const lastChild = content.lastChild;
-              if (
-                lastChild?.type.name === "paragraph" &&
-                lastChild.textContent.trim() === ""
-              ) {
-                const children = [];
-                for (let i = 0; i < content.childCount - 1; i++) {
-                  children.push(content.child(i));
-                }
-                content = Fragment.from(children);
-              } else {
-                break;
+            const isTrailingNoise = (node: any) => {
+              if (!node) return false;
+              if (node.type.name === "hardBreak") return true;
+              if (node.isText && (node.text ?? "").trim() === "") return true;
+              if (node.type.name === "paragraph") {
+                let onlyNoise = true;
+                node.content.forEach((c: any) => {
+                  if (c.type.name === "hardBreak") return;
+                  if (c.isText && (c.text ?? "").trim() === "") return;
+                  onlyNoise = false;
+                });
+                return onlyNoise;
               }
+              return false;
+            };
+
+            while (content.childCount > 1 && isTrailingNoise(content.lastChild)) {
+              const children = [];
+              for (let i = 0; i < content.childCount - 1; i++) {
+                children.push(content.child(i));
+              }
+              content = Fragment.from(children);
             }
 
             if (content !== slice.content) {
@@ -140,6 +148,21 @@ function elementFromString(value) {
   return new window.DOMParser().parseFromString(wrappedValue, "text/html").body;
 }
 
+// marked.parse() emits "<p>...</p>\n<p>...</p>\n" — those literal newlines
+// become whitespace text nodes that parseSlice (preserveWhitespace: true)
+// converts into spurious empty paragraphs at the insertion site. Inside a
+// list item the trailing one prevents Enter from exiting the list.
+function stripBlockLevelWhitespaceNodes(body: HTMLElement): void {
+  Array.from(body.childNodes).forEach((node) => {
+    if (
+      node.nodeType === 3 /* TEXT_NODE */ &&
+      (node.textContent ?? "").trim() === ""
+    ) {
+      body.removeChild(node);
+    }
+  });
+}
+
 const DEFAULT_PASTE_COL_WIDTH_PX = 150;
 
 function parsePixelWidth(el: Element): number | null {

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -29,7 +29,7 @@ import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { notifications } from "@mantine/notifications";
 import { getAppUrl } from "@/lib/config.ts";
 import { extractPageSlugId } from "@/lib";
-import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
+import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
 import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
 import { Trans, useTranslation } from "react-i18next";
@@ -134,7 +134,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
     pageId: extractPageSlugId(pageSlug),
   });
   const { openDeleteModal } = useDeletePageModal();
-  const { handleDelete } = useTreeMutation(page?.spaceId ?? "");
+  const [tree] = useAtom(treeApiAtom);
   const [exportOpened, { open: openExportModal, close: closeExportModal }] =
     useDisclosure(false);
   const [
@@ -183,7 +183,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
   };
 
   const handleDeletePage = () => {
-    openDeleteModal({ onConfirm: () => handleDelete(page.id) });
+    openDeleteModal({ onConfirm: () => tree?.delete(page.id) });
   };
 
   const handleToggleFavorite = () => {

apps/client/src/features/page/queries/page-query.ts

@@ -37,7 +37,7 @@ import { validate as isValidUuid } from "uuid";
 import { useTranslation } from "react-i18next";
 import { useAtom } from "jotai";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { treeModel } from "@/features/page/tree/model/tree-model";
+import { SimpleTree } from "react-arborist";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 
@@ -170,8 +170,11 @@ export function useRestorePageMutation() {
     onSuccess: async (restoredPage) => {
       notifications.show({ message: "Page restored successfully" });
 
+      // Add the restored page back to the tree
+      const treeApi = new SimpleTree<SpaceTreeNode>(treeData);
+
       // Check if the page already exists in the tree (it shouldn't)
-      if (!treeModel.find(treeData, restoredPage.id)) {
+      if (!treeApi.find(restoredPage.id)) {
         // Create the tree node data with hasChildren from backend
         const nodeData: SpaceTreeNode = {
           id: restoredPage.id,
@@ -190,17 +193,24 @@ export function useRestorePageMutation() {
         let index = 0;
 
         if (parentId) {
-          const parentNode = treeModel.find(treeData, parentId);
+          const parentNode = treeApi.find(parentId);
           if (parentNode) {
             index = parentNode.children?.length || 0;
           }
         } else {
           // Root level page
-          index = treeData.length;
+          index = treeApi.data.length;
         }
 
         // Add the node to the tree
-        setTreeData(treeModel.insert(treeData, parentId, nodeData, index));
+        treeApi.create({
+          parentId,
+          index,
+          data: nodeData,
+        });
+
+        // Update the tree data
+        setTreeData(treeApi.data);
 
         // Emit websocket event to sync with other users
         setTimeout(() => {

apps/client/src/features/page/tree/atoms/open-tree-nodes-atom.ts

@@ -1,5 +0,0 @@
-import { atom } from "jotai";
-
-export type OpenMap = Record<string, boolean>;
-
-export const openTreeNodesAtom = atom<OpenMap>({});

apps/client/src/features/page/tree/atoms/tree-api-atom.ts

@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+import { TreeApi } from "react-arborist";
+import { SpaceTreeNode } from "../types";
+
+export const treeApiAtom = atom<TreeApi<SpaceTreeNode> | null>(null);

apps/client/src/features/page/tree/components/doc-tree-drag-preview.module.css

@@ -1,26 +0,0 @@
-.preview {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    background-color: light-dark(
-        var(--mantine-color-white),
-        var(--mantine-color-dark-6)
-    );
-    color: light-dark(
-        var(--mantine-color-gray-9),
-        var(--mantine-color-dark-0)
-    );
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
-    border: 1px solid light-dark(
-        var(--mantine-color-gray-3),
-        var(--mantine-color-dark-4)
-    );
-    max-width: 260px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}

apps/client/src/features/page/tree/components/doc-tree-drag-preview.tsx

@@ -1,9 +0,0 @@
-import styles from './doc-tree-drag-preview.module.css';
-
-type Props = {
-  label: string;
-};
-
-export function DocTreeDragPreview({ label }: Props) {
-  return <div className={styles.preview}>{label || 'Untitled'}</div>;
-}

apps/client/src/features/page/tree/components/doc-tree-drop-indicator.tsx

@@ -1,39 +0,0 @@
-import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import styles from '../styles/tree.module.css';
-
-type Props = {
-  instruction: Instruction;
-  indentPx: number;
-};
-
-export function DocTreeDropIndicator({ instruction, indentPx }: Props) {
-  const blocked = instruction.type === 'instruction-blocked';
-  const inst = blocked ? instruction.desired : instruction;
-
-  const style = {
-    ['--drop-line-indent' as never]: `${indentPx}px`,
-  } as React.CSSProperties;
-
-  if (inst.type === 'reorder-above') {
-    return (
-      <div
-        className={styles.dropLine}
-        data-edge="top"
-        data-blocked={blocked || undefined}
-        style={style}
-      />
-    );
-  }
-  if (inst.type === 'reorder-below') {
-    return (
-      <div
-        className={styles.dropLine}
-        data-edge="bottom"
-        data-blocked={blocked || undefined}
-        style={style}
-      />
-    );
-  }
-  // 'combine' (make-child) is rendered via [data-receiving-drop] on the row itself.
-  return null;
-}

apps/client/src/features/page/tree/components/doc-tree-row.tsx

@@ -1,398 +0,0 @@
-import {
-  memo,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
-import { createRoot } from 'react-dom/client';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import {
-  draggable,
-  dropTargetForElements,
-} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
-import {
-  attachInstruction,
-  extractInstruction,
-  type Instruction,
-  type ItemMode,
-} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { triggerPostMoveFlash } from '@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash';
-import * as liveRegion from '@atlaskit/pragmatic-drag-and-drop-live-region';
-
-import type { TreeNode, DropOp } from '../model/tree-model.types';
-import { treeModel } from '../model/tree-model';
-import { DocTreeDropIndicator } from './doc-tree-drop-indicator';
-import { DocTreeDragPreview } from './doc-tree-drag-preview';
-import type { RenderRowProps } from './doc-tree';
-import styles from '../styles/tree.module.css';
-
-type Props<T extends object> = {
-  node: TreeNode<T>;
-  level: number;
-  isLastSibling: boolean;
-  openIds: ReadonlySet<string>;
-  selectedId?: string;
-  // Roving tabindex: the single row that currently carries tabIndex={0}.
-  activeId?: string;
-  renderRow: (props: RenderRowProps<T>) => ReactNode;
-  indentPerLevel: number;
-  onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
-  onToggle: (id: string, isOpen: boolean) => void;
-  readOnly: boolean;
-  disableDrag?: (node: TreeNode<T>) => boolean;
-  disableDrop?: (node: TreeNode<T>) => boolean;
-  getDragLabel: (node: TreeNode<T>) => string;
-  contextId: symbol;
-  registerRowElement: (id: string, el: HTMLElement | null) => void;
-  // Stable accessor — calling it returns the latest tree. Avoids passing the
-  // tree itself as a prop (which would break memo and re-run every row's DnD
-  // useEffect on every mutation).
-  getRootData: () => TreeNode<T>[];
-};
-
-const DRAG_TYPE = 'doc-tree-item';
-const AUTO_EXPAND_MS = 500;
-
-function DocTreeRowInner<T extends object>(props: Props<T>) {
-  const {
-    node,
-    level,
-    isLastSibling,
-    openIds,
-    selectedId,
-    activeId,
-    renderRow,
-    indentPerLevel,
-    onMove,
-    onToggle,
-    readOnly,
-    disableDrag,
-    disableDrop,
-    getDragLabel,
-    contextId,
-    registerRowElement,
-    getRootData,
-  } = props;
-
-  const isOpen = openIds.has(node.id);
-  // "Has children" includes both already-loaded children AND the consumer's
-  // own server-side flag (`hasChildren` is a docmost convention on
-  // SpaceTreeNode / SharedPageTreeNode). The flag lets the chevron and the
-  // auto-expand timer recognize unloaded subtrees so the consumer's lazy-load
-  // (via onToggle) can populate them on demand.
-  const hasLoadedChildren = !!node.children && node.children.length > 0;
-  const declaredHasChildren =
-    (node as { hasChildren?: boolean }).hasChildren === true;
-  const hasChildren = hasLoadedChildren || declaredHasChildren;
-  const isSelected = selectedId === node.id;
-
-  const rowRef = useRef<HTMLElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [instruction, setInstruction] = useState<Instruction | null>(null);
-  const autoExpandTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const cancelAutoExpand = useCallback(() => {
-    if (autoExpandTimerRef.current) {
-      clearTimeout(autoExpandTimerRef.current);
-      autoExpandTimerRef.current = null;
-    }
-  }, []);
-
-  const toggleOpen = useCallback(() => {
-    onToggle(node.id, !isOpen);
-  }, [onToggle, node.id, isOpen]);
-
-  useEffect(() => {
-    registerRowElement(node.id, rowRef.current);
-    return () => registerRowElement(node.id, null);
-  }, [registerRowElement, node.id]);
-
-  // Restore lazy-loaded children when the row mounts open but its children
-  // aren't loaded (e.g. cross-space page move drops a node into a new tree
-  // that still has its id in openIds). Calling onToggle(id, true) is
-  // idempotent for open state and triggers the consumer's lazy-load.
-  useEffect(() => {
-    if (isOpen && declaredHasChildren && !hasLoadedChildren) {
-      onToggle(node.id, true);
-    }
-  }, [isOpen, declaredHasChildren, hasLoadedChildren, node.id, onToggle]);
-
-  useEffect(() => {
-    const el = rowRef.current;
-    if (!el || readOnly) return;
-    const dragDisabled = disableDrag?.(node) ?? false;
-    const dropDisabled = disableDrop?.(node) ?? false;
-
-    const cleanups: Array<() => void> = [];
-
-    if (!dragDisabled) {
-      cleanups.push(
-        draggable({
-          element: el,
-          getInitialData: () => ({
-            id: node.id,
-            type: DRAG_TYPE,
-            uniqueContextId: contextId,
-            isOpenOnDragStart: isOpen,
-          }),
-          onGenerateDragPreview: ({ nativeSetDragImage }) => {
-            setCustomNativeDragPreview({
-              nativeSetDragImage,
-              getOffset: pointerOutsideOfPreview({ x: '16px', y: '8px' }),
-              render: ({ container }) => {
-                const root = createRoot(container);
-                root.render(<DocTreeDragPreview label={getDragLabel(node)} />);
-                return () => root.unmount();
-              },
-            });
-          },
-          onDragStart: () => setIsDragging(true),
-          onDrop: () => setIsDragging(false),
-        }),
-      );
-    }
-
-    if (!dropDisabled) {
-      const mode: ItemMode =
-        isOpen && hasChildren
-          ? 'expanded'
-          : isLastSibling
-            ? 'last-in-group'
-            : 'standard';
-      // Always block 'reparent' (out of scope per spec).
-      // Block 'reorder-below' when the row is open with children — ambiguous gesture,
-      // force users to drop into the folder via 'make-child' instead.
-      const block: Instruction['type'][] = ['reparent'];
-      if (isOpen && hasChildren) block.push('reorder-below');
-
-      cleanups.push(
-        dropTargetForElements({
-          element: el,
-          canDrop: ({ source }) =>
-            source.data.type === DRAG_TYPE &&
-            source.data.uniqueContextId === contextId &&
-            source.data.id !== node.id &&
-            !treeModel.isDescendant(
-              getRootData(),
-              source.data.id as string,
-              node.id,
-            ),
-          getData: ({ input, element }) =>
-            attachInstruction(
-              { id: node.id, type: DRAG_TYPE },
-              {
-                input,
-                element,
-                currentLevel: level,
-                indentPerLevel,
-                mode,
-                block,
-              },
-            ),
-          onDrag: ({ self }) => {
-            const inst = extractInstruction(self.data);
-            setInstruction(inst);
-            // Auto-expand on hover over any collapsed row that has children,
-            // regardless of the specific instruction type. Reorder-before and
-            // reorder-after also benefit: once expanded, the user can see the
-            // children and refine their drop target.
-            if (
-              inst &&
-              hasChildren &&
-              !isOpen &&
-              !autoExpandTimerRef.current
-            ) {
-              autoExpandTimerRef.current = setTimeout(() => {
-                onToggle(node.id, true);
-                autoExpandTimerRef.current = null;
-              }, AUTO_EXPAND_MS);
-            }
-          },
-          onDragLeave: () => {
-            setInstruction(null);
-            cancelAutoExpand();
-          },
-          onDrop: ({ source, self }) => {
-            setInstruction(null);
-            cancelAutoExpand();
-            const inst = extractInstruction(self.data);
-            if (!inst || inst.type === 'instruction-blocked') return;
-            const sourceId = source.data.id as string;
-            const op: DropOp =
-              inst.type === 'reorder-above'
-                ? { kind: 'reorder-before', targetId: node.id }
-                : inst.type === 'reorder-below'
-                  ? { kind: 'reorder-after', targetId: node.id }
-                  : inst.type === 'make-child'
-                    ? { kind: 'make-child', targetId: node.id }
-                    : null!;
-            if (!op) return;
-            onMove(sourceId, op);
-            triggerPostMoveFlash(el);
-            const liveTree = getRootData();
-            const parentName =
-              op.kind === 'make-child'
-                ? getDragLabel(node)
-                : (() => {
-                    const sib = treeModel.siblingsOf(liveTree, op.targetId);
-                    const parent = sib?.parentId
-                      ? treeModel.find(liveTree, sib.parentId)
-                      : null;
-                    return parent ? getDragLabel(parent) : 'root';
-                  })();
-            const sourceNode = treeModel.find(liveTree, sourceId);
-            const sourceLabel = sourceNode
-              ? getDragLabel(sourceNode)
-              : 'item';
-            liveRegion.announce(`Moved ${sourceLabel} under ${parentName}.`);
-            // After a make-child drop, expand this row so the user sees the
-            // just-dropped child — especially important when the row had no
-            // children before (chevron just appeared) so the drop would
-            // otherwise be invisible.
-            if (op.kind === 'make-child') onToggle(node.id, true);
-            if (source.data.isOpenOnDragStart) onToggle(sourceId, true);
-          },
-        }),
-      );
-    }
-
-    return combine(...cleanups);
-  }, [
-    node,
-    level,
-    isOpen,
-    hasChildren,
-    isLastSibling,
-    readOnly,
-    disableDrag,
-    disableDrop,
-    contextId,
-    indentPerLevel,
-    getDragLabel,
-    onMove,
-    onToggle,
-    getRootData,
-    cancelAutoExpand,
-  ]);
-
-  useEffect(() => () => cancelAutoExpand(), [cancelAutoExpand]);
-
-  const effectiveInst =
-    instruction?.type === 'instruction-blocked'
-      ? instruction.desired
-      : instruction;
-  const blocked = instruction?.type === 'instruction-blocked';
-  const receivingDrop: 'before' | 'after' | 'make-child' | null = (() => {
-    if (!effectiveInst) return null;
-    if (effectiveInst.type === 'reorder-above') return 'before';
-    if (effectiveInst.type === 'reorder-below') return 'after';
-    if (effectiveInst.type === 'make-child') return 'make-child';
-    return null;
-  })();
-
-  // Treeitem semantics ride on the row's focusable element (the consumer's
-  // <a>). The outer <li> is presentational layout. aria-label uses the row's
-  // label so the SR's accessible name is just the page title, not the
-  // concatenation of inner action-button aria-labels.
-  const treeItemProps = {
-    role: 'treeitem' as const,
-    'aria-level': level + 1,
-    'aria-expanded': hasChildren ? isOpen : undefined,
-    'aria-selected': isSelected ? (true as const) : undefined,
-    'aria-current': isSelected ? ('page' as const) : undefined,
-    'aria-label': getDragLabel(node),
-    'data-row-id': node.id,
-  };
-
-  return (
-    <div
-      className={styles.rowWrapper}
-      style={{ paddingLeft: level * indentPerLevel }}
-    >
-      <div
-        className={styles.node}
-        data-dragging={isDragging || undefined}
-        data-selected={isSelected || undefined}
-        data-receiving-drop={
-          receivingDrop === 'make-child'
-            ? blocked
-              ? 'make-child-blocked'
-              : 'make-child'
-            : undefined
-        }
-      >
-        {renderRow({
-          node,
-          level,
-          isOpen,
-          hasChildren,
-          isSelected,
-          isDragging,
-          isReceivingDrop: receivingDrop,
-          rowRef,
-          tabIndex: activeId === node.id ? 0 : -1,
-          treeItemProps,
-          toggleOpen,
-        })}
-      </div>
-      {instruction && (
-        <DocTreeDropIndicator
-          instruction={instruction}
-          indentPx={level * indentPerLevel}
-        />
-      )}
-    </div>
-  );
-}
-
-// Custom memo comparator. The default shallow compare re-renders every row
-// when `openIds` (a Set) or `selectedId` (a string) on the parent changes,
-// because all rows receive the same reference via {...props} spread. With 1K
-// rows that's a perceptible stall on every expand and every navigate.
-//
-// Resolve openIds / selectedId per-row: only re-render if THIS row's own
-// open-state or selected-state actually flipped. Everything else uses
-// reference equality (callbacks are useCallback-stable from the parent).
-function arePropsEqual<T extends object>(
-  prev: Props<T>,
-  next: Props<T>,
-): boolean {
-  if (prev.node !== next.node) return false;
-  if (prev.level !== next.level) return false;
-  if (prev.isLastSibling !== next.isLastSibling) return false;
-  if (prev.readOnly !== next.readOnly) return false;
-  if (prev.contextId !== next.contextId) return false;
-  if (prev.indentPerLevel !== next.indentPerLevel) return false;
-  if (prev.renderRow !== next.renderRow) return false;
-  if (prev.onMove !== next.onMove) return false;
-  if (prev.onToggle !== next.onToggle) return false;
-  if (prev.disableDrag !== next.disableDrag) return false;
-  if (prev.disableDrop !== next.disableDrop) return false;
-  if (prev.getDragLabel !== next.getDragLabel) return false;
-  if (prev.registerRowElement !== next.registerRowElement) return false;
-  if (prev.getRootData !== next.getRootData) return false;
-
-  const id = next.node.id;
-  // openIds: only this row's own membership matters.
-  if (prev.openIds.has(id) !== next.openIds.has(id)) return false;
-  // selectedId: re-render only the rows whose isSelected actually flipped.
-  const wasSelected = prev.selectedId === id;
-  const isSelected = next.selectedId === id;
-  if (wasSelected !== isSelected) return false;
-  // activeId: same trick — only the outgoing and incoming active rows
-  // re-render when the user moves focus through the tree.
-  const wasActive = prev.activeId === id;
-  const isActive = next.activeId === id;
-  if (wasActive !== isActive) return false;
-
-  return true;
-}
-
-export const DocTreeRow = memo(
-  DocTreeRowInner,
-  arePropsEqual,
-) as typeof DocTreeRowInner;

apps/client/src/features/page/tree/components/doc-tree.tsx

@@ -1,541 +0,0 @@
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-  type Ref,
-} from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import type { TreeNode, DropOp } from '../model/tree-model.types';
-import { treeModel } from '../model/tree-model';
-import { DocTreeRow } from './doc-tree-row';
-import styles from '../styles/tree.module.css';
-
-export type RenderRowProps<T extends object> = {
-  node: TreeNode<T>;
-  level: number;
-  isOpen: boolean;
-  hasChildren: boolean;
-  isSelected: boolean;
-  isDragging: boolean;
-  isReceivingDrop: 'before' | 'after' | 'make-child' | null;
-
-  rowRef: Ref<HTMLElement>;
-  // Roving tabindex: exactly one row in the tree carries tabIndex={0} (the
-  // active row); every other row gets tabIndex={-1}. Consumers must spread
-  // this onto the same element they wire rowRef to.
-  tabIndex: 0 | -1;
-  // Treeitem semantics for the row's focusable element. Consumers MUST spread
-  // these onto the same element rowRef points at, so the focused element IS
-  // the treeitem. This makes screen readers announce "treeitem" (not "link")
-  // and replaces the descendant-text accname with the row's label, so action
-  // button labels inside the row don't get concatenated.
-  treeItemProps: {
-    role: 'treeitem';
-    'aria-level': number;
-    'aria-expanded'?: boolean;
-    'aria-selected'?: true;
-    'aria-current'?: 'page';
-    'aria-label': string;
-    'data-row-id': string;
-  };
-  toggleOpen: () => void;
-};
-
-export type DocTreeProps<T extends object> = {
-  data: TreeNode<T>[];
-  openIds: ReadonlySet<string>;
-  selectedId?: string;
-
-  renderRow: (props: RenderRowProps<T>) => ReactNode;
-  indentPerLevel?: number;
-  rowHeight?: number;
-  emptyState?: ReactNode;
-
-  onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
-  onToggle: (id: string, isOpen: boolean) => void;
-  onSelect?: (id: string) => void;
-
-  readOnly?: boolean;
-  disableDrag?: (node: TreeNode<T>) => boolean;
-  disableDrop?: (node: TreeNode<T>) => boolean;
-
-  getDragLabel: (node: TreeNode<T>) => string;
-  uniqueContextId?: symbol;
-
-  // Accessible name for the tree itself (e.g. "Pages"). Rendered as
-  // aria-label on the <ul role="tree"> so screen readers announce what
-  // collection of items the user has entered.
-  'aria-label'?: string;
-};
-
-export type DocTreeApi = {
-  select: (
-    id: string,
-    opts?: { scrollIntoView?: boolean; focus?: boolean },
-  ) => void;
-  scrollTo: (id: string) => void;
-  focus: (id: string) => void;
-};
-
-type FlatRow<T extends object> = {
-  node: TreeNode<T>;
-  level: number;
-  isLastSibling: boolean;
-};
-
-// DFS-walk the tree, emitting only the visible nodes (root nodes always, plus
-// the descendants of nodes whose id is in `openIds`). Each emitted row carries
-// the precomputed `level` and `isLastSibling` it needs.
-function flattenVisible<T extends object>(
-  data: TreeNode<T>[],
-  openIds: ReadonlySet<string>,
-): FlatRow<T>[] {
-  const out: FlatRow<T>[] = [];
-  const walk = (nodes: TreeNode<T>[], level: number) => {
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      out.push({ node, level, isLastSibling: i === nodes.length - 1 });
-      if (openIds.has(node.id) && node.children?.length) {
-        walk(node.children, level + 1);
-      }
-    }
-  };
-  walk(data, 0);
-  return out;
-}
-
-type RowElementMap = Map<string, HTMLElement>;
-
-function DocTreeInner<T extends object>(
-  props: DocTreeProps<T>,
-  ref: Ref<DocTreeApi>,
-) {
-  const {
-    data,
-    openIds,
-    selectedId,
-    renderRow,
-    indentPerLevel = 16,
-    rowHeight = 32,
-    onMove,
-    onToggle,
-    onSelect,
-    readOnly = false,
-    disableDrag,
-    disableDrop,
-    getDragLabel,
-    uniqueContextId,
-    emptyState,
-    'aria-label': ariaLabel,
-  } = props;
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const rowElementsRef = useRef<RowElementMap>(new Map());
-  // Set by the keyboard handler when the navigation target hasn't been
-  // virtualized yet. Consumed by registerRowElement when the row mounts.
-  const pendingFocusIdRef = useRef<string | null>(null);
-  // Typeahead state: accumulated buffer, plus the timer that clears it after
-  // ~500ms of no typing. Refs only — no re-render needed per keystroke.
-  const typeaheadBufferRef = useRef('');
-  const typeaheadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Roving tabindex: the row most-recently focused by the user. Falls back
-  // to selectedId, then to the first visible row, when the tracked id is
-  // gone from the flat list (e.g. its branch was collapsed).
-  const [activeId, setActiveId] = useState<string | undefined>(undefined);
-  const contextId = useMemo(
-    () => uniqueContextId ?? Symbol('doc-tree'),
-    [uniqueContextId],
-  );
-
-  const registerRowElement = useCallback(
-    (id: string, el: HTMLElement | null) => {
-      if (el) {
-        rowElementsRef.current.set(id, el);
-        if (pendingFocusIdRef.current === id) {
-          pendingFocusIdRef.current = null;
-          // rAF lets the virtualizer settle layout/transform before focus,
-          // so the freshly-scrolled-in row is actually painted in view.
-          requestAnimationFrame(() => el.focus());
-        }
-      } else {
-        rowElementsRef.current.delete(id);
-      }
-    },
-    [],
-  );
-
-  // Stable live tree accessor — keeps the row useEffect deps stable across
-  // tree mutations.
-  const rootDataRef = useRef(data);
-  rootDataRef.current = data;
-  const getRootData = useCallback(() => rootDataRef.current, []);
-
-  // Flat visible list drives virtualization. Re-flattens on data or openIds
-  // change — cheap O(N) walk of the loaded tree.
-  const flat = useMemo(
-    () => flattenVisible(data, openIds),
-    [data, openIds],
-  );
-
-  // Membership lookup for the flat list. Used to validate activeId/selectedId
-  // before promoting them to the effective active row.
-  const flatIds = useMemo(() => new Set(flat.map((r) => r.node.id)), [flat]);
-
-  // Effective active row for tabindex purposes. Prefers user-focused row,
-  // then the currently selected page, then the first visible row. The user's
-  // arrow / Home / End / typeahead navigation updates activeId via the focus
-  // event delegated on the <ul>; explicit clicks also flow through focus.
-  const effectiveActiveId = useMemo(() => {
-    if (activeId && flatIds.has(activeId)) return activeId;
-    if (selectedId && flatIds.has(selectedId)) return selectedId;
-    return flat[0]?.node.id;
-  }, [activeId, selectedId, flatIds, flat]);
-
-  const virtualizer = useVirtualizer({
-    count: flat.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => rowHeight,
-    overscan: 10,
-  });
-
-  useImperativeHandle(
-    ref,
-    (): DocTreeApi => ({
-      select: (id, opts) => {
-        onSelect?.(id);
-        const idx = flat.findIndex((r) => r.node.id === id);
-        if (idx >= 0 && opts?.scrollIntoView) {
-          virtualizer.scrollToIndex(idx, { align: 'auto' });
-        }
-        if (opts?.focus) rowElementsRef.current.get(id)?.focus();
-      },
-      scrollTo: (id) => {
-        const idx = flat.findIndex((r) => r.node.id === id);
-        if (idx >= 0) virtualizer.scrollToIndex(idx, { align: 'auto' });
-      },
-      focus: (id) => {
-        rowElementsRef.current.get(id)?.focus();
-      },
-    }),
-    [onSelect, flat, virtualizer],
-  );
-
-  // Auto-scroll the container during drag so users can target rows currently
-  // scrolled off-screen. Scoped to drags originating in this DocTree instance
-  // via uniqueContextId.
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    return autoScrollForElements({
-      element: el,
-      canScroll: ({ source }) =>
-        source.data.uniqueContextId === contextId,
-    });
-  }, [contextId]);
-
-  // Scroll the selected row into view when it enters the flat list. If the
-  // row is already fully visible, leave the user's scroll position alone —
-  // only scroll when it's off-screen, and when we do, center it for context.
-  // Deep pages may not be in flat at the moment selectedId changes (ancestors
-  // still lazy-loading); the effect re-fires once flat contains the row.
-  // Guarded by a ref so subsequent flat changes don't fight manual scroll.
-  const lastScrolledIdRef = useRef<string | undefined>(undefined);
-  useEffect(() => {
-    if (!selectedId) {
-      lastScrolledIdRef.current = undefined;
-      return;
-    }
-    if (lastScrolledIdRef.current === selectedId) return;
-    const idx = flat.findIndex((r) => r.node.id === selectedId);
-    if (idx < 0) return;
-
-    const containerHeight = scrollRef.current?.clientHeight ?? 0;
-    const scrollOffset = virtualizer.scrollOffset ?? 0;
-    const item = virtualizer
-      .getVirtualItems()
-      .find((v) => v.index === idx);
-    const isFullyVisible =
-      !!item &&
-      item.start >= scrollOffset &&
-      item.start + item.size <= scrollOffset + containerHeight;
-
-    if (!isFullyVisible) {
-      virtualizer.scrollToIndex(idx, { align: 'center' });
-    }
-    lastScrolledIdRef.current = selectedId;
-  }, [selectedId, flat, virtualizer]);
-
-  // Keyboard navigation handler — single delegated listener on the <ul role="tree">.
-  // The focused row is identified by walking up the DOM to the nearest element
-  // carrying data-row-id, so this works whether the user has focused the row
-  // itself or one of its inner buttons (chevron, +). No per-row re-renders;
-  // focus is moved via .focus() on the registered element, with a pending-id
-  // hand-off when the target row is currently virtualized out of view.
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLUListElement>) => {
-      // Ctrl/Alt/Meta are reserved for browser/OS shortcuts; bail out.
-      // Shift is allowed through so typeahead can match capital letters.
-      if (e.altKey || e.ctrlKey || e.metaKey) return;
-      const isNavKey =
-        !e.shiftKey &&
-        (e.key === 'ArrowDown' ||
-          e.key === 'ArrowUp' ||
-          e.key === 'ArrowLeft' ||
-          e.key === 'ArrowRight' ||
-          e.key === 'Home' ||
-          e.key === 'End');
-      // Star expands all sibling subtrees of the focused row (WAI-ARIA tree
-      // pattern). Allowed with Shift since on most keyboards Shift+8 is how
-      // "*" is produced. Handled separately from typeahead.
-      const isStarKey = e.key === '*';
-      // Space activates the focused row — same effect as clicking it. Native
-      // <a> doesn't get this for free (only <button> does), so we wire it up
-      // explicitly to satisfy the WAI-ARIA tree pattern.
-      const isActivateKey = e.key === ' ';
-      // Single printable character → typeahead. e.key.length === 1 excludes
-      // multi-char names like "ArrowDown", "Enter", "Tab", etc.
-      const isTypeahead =
-        e.key.length === 1 && !isNavKey && !isStarKey && !isActivateKey;
-      if (!isNavKey && !isTypeahead && !isStarKey && !isActivateKey) return;
-
-      const target = e.target as HTMLElement;
-      if (target.matches('input, textarea, [contenteditable="true"]')) return;
-      const rowEl = target.closest('[data-row-id]');
-      if (!rowEl) return;
-      const id = rowEl.getAttribute('data-row-id');
-      if (!id) return;
-
-      const idx = flat.findIndex((r) => r.node.id === id);
-      if (idx < 0) return;
-
-      const focusByIndex = (targetIdx: number) => {
-        if (targetIdx < 0 || targetIdx >= flat.length) return;
-        const targetId = flat[targetIdx].node.id;
-        const existing = rowElementsRef.current.get(targetId);
-        if (existing) {
-          existing.focus();
-        } else {
-          pendingFocusIdRef.current = targetId;
-          virtualizer.scrollToIndex(targetIdx, { align: 'auto' });
-        }
-      };
-
-      // Space activates the focused row by synthesizing a click on the
-      // registered row element (its <a> Link). Skip if focus is on an inner
-      // button (chevron, +, menu) — those handle Space via native button
-      // semantics, and intercepting here would block their default behavior.
-      if (isActivateKey) {
-        const registered = rowElementsRef.current.get(id);
-        if (target === registered) {
-          e.preventDefault();
-          registered.click();
-        }
-        return;
-      }
-
-      // Typeahead: accumulate printable chars, jump to next row whose label
-      // starts with the buffer. Same-letter presses cycle through matches; a
-      // multi-char buffer searches from the current row so the user can
-      // refine the prefix. Buffer resets after ~500ms of no typing.
-      if (isTypeahead) {
-        e.preventDefault();
-        const wasEmpty = typeaheadBufferRef.current.length === 0;
-        typeaheadBufferRef.current = (
-          typeaheadBufferRef.current + e.key
-        ).toLowerCase();
-        const buffer = typeaheadBufferRef.current;
-        if (typeaheadTimerRef.current) {
-          clearTimeout(typeaheadTimerRef.current);
-        }
-        typeaheadTimerRef.current = setTimeout(() => {
-          typeaheadBufferRef.current = '';
-          typeaheadTimerRef.current = null;
-        }, 500);
-        // Single-char buffer cycles to the next match (start at idx + 1);
-        // multi-char buffer can keep matching the current row.
-        const startIdx = wasEmpty ? (idx + 1) % flat.length : idx;
-        for (let i = 0; i < flat.length; i++) {
-          const probeIdx = (startIdx + i) % flat.length;
-          const label = getDragLabel(flat[probeIdx].node).toLowerCase();
-          if (label.startsWith(buffer)) {
-            focusByIndex(probeIdx);
-            break;
-          }
-        }
-        return;
-      }
-
-      const row = flat[idx];
-      const hasChildren =
-        (row.node.children && row.node.children.length > 0) ||
-        (row.node as { hasChildren?: boolean }).hasChildren === true;
-      const isOpen = openIds.has(row.node.id);
-
-      // Asterisk: expand every sibling subtree at the focused row's level.
-      // Walks the authoritative tree (not flat, which only carries visible
-      // rows) so we also expand siblings whose own subtree is currently
-      // collapsed. Focus and selection stay put per the WAI-ARIA pattern.
-      if (isStarKey) {
-        e.preventDefault();
-        const info = treeModel.siblingsOf(rootDataRef.current, row.node.id);
-        if (info) {
-          for (const sib of info.siblings) {
-            const sibHasChildren =
-              (sib.children && sib.children.length > 0) ||
-              (sib as { hasChildren?: boolean }).hasChildren === true;
-            if (sibHasChildren && !openIds.has(sib.id)) {
-              onToggle(sib.id, true);
-            }
-          }
-        }
-        return;
-      }
-
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          focusByIndex(idx + 1);
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          focusByIndex(idx - 1);
-          break;
-        case 'ArrowRight':
-          e.preventDefault();
-          if (hasChildren && !isOpen) {
-            onToggle(row.node.id, true);
-          } else if (
-            isOpen &&
-            row.node.children &&
-            row.node.children.length > 0
-          ) {
-            focusByIndex(idx + 1);
-          }
-          break;
-        case 'ArrowLeft': {
-          e.preventDefault();
-          if (isOpen && hasChildren) {
-            onToggle(row.node.id, false);
-          } else {
-            // Move to parent — first preceding row with smaller level.
-            // Bounded by sibling-count to parent in the flat list; tree depth
-            // and sibling counts are small in practice.
-            const currentLevel = row.level;
-            for (let i = idx - 1; i >= 0; i--) {
-              if (flat[i].level < currentLevel) {
-                focusByIndex(i);
-                break;
-              }
-            }
-          }
-          break;
-        }
-        case 'Home':
-          e.preventDefault();
-          focusByIndex(0);
-          break;
-        case 'End':
-          e.preventDefault();
-          focusByIndex(flat.length - 1);
-          break;
-      }
-    },
-    [flat, openIds, onToggle, virtualizer, getDragLabel],
-  );
-
-  // Clear the typeahead timer if the component unmounts mid-buffer.
-  useEffect(
-    () => () => {
-      if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
-    },
-    [],
-  );
-
-  // Event-delegated focus tracking — when any descendant (a row's Link, or an
-  // inner action button) gains focus, mark the enclosing row as active. Keeps
-  // tabIndex aligned with the user's current position whether they got there
-  // by click, arrow nav, or focusByIndex's programmatic .focus() call.
-  const handleFocusIn = useCallback(
-    (e: React.FocusEvent<HTMLUListElement>) => {
-      const rowEl = (e.target as HTMLElement).closest('[data-row-id]');
-      const id = rowEl?.getAttribute('data-row-id');
-      if (id) setActiveId(id);
-    },
-    [],
-  );
-
-  if (data.length === 0 && emptyState) {
-    return <div className={styles.treeContainer}>{emptyState}</div>;
-  }
-
-  const virtualItems = virtualizer.getVirtualItems();
-  const totalSize = virtualizer.getTotalSize();
-
-  return (
-    <div ref={scrollRef} className={styles.treeContainer}>
-      <ul
-        role="tree"
-        aria-label={ariaLabel}
-        onKeyDown={handleKeyDown}
-        onFocus={handleFocusIn}
-        style={{
-          position: 'relative',
-          height: totalSize,
-          margin: 0,
-          padding: 0,
-          listStyle: 'none',
-        }}
-      >
-        {virtualItems.map((virtualItem) => {
-          const row = flat[virtualItem.index];
-          return (
-            <li
-              key={row.node.id}
-              // role="none" — the treeitem role lives on the focusable child
-              // (the row's <a>), so screen readers announce "treeitem" on
-              // navigation. The <li> is just layout glue.
-              role="none"
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                transform: `translateY(${virtualItem.start}px)`,
-              }}
-            >
-              <DocTreeRow
-                node={row.node}
-                level={row.level}
-                isLastSibling={row.isLastSibling}
-                openIds={openIds}
-                selectedId={selectedId}
-                activeId={effectiveActiveId}
-                renderRow={renderRow}
-                indentPerLevel={indentPerLevel}
-                onMove={onMove}
-                onToggle={onToggle}
-                readOnly={readOnly}
-                disableDrag={disableDrag}
-                disableDrop={disableDrop}
-                getDragLabel={getDragLabel}
-                contextId={contextId}
-                registerRowElement={registerRowElement}
-                getRootData={getRootData}
-              />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
-
-export const DocTree = forwardRef(DocTreeInner) as <T extends object>(
-  props: DocTreeProps<T> & { ref?: Ref<DocTreeApi> },
-) => ReturnType<typeof DocTreeInner>;

apps/client/src/features/page/tree/components/space-tree-node-menu.tsx

@@ -1,259 +0,0 @@
-import { useAtom } from "jotai";
-import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
-import { ActionIcon, Menu, rem } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { notifications } from "@mantine/notifications";
-import {
-  IconArrowRight,
-  IconCopy,
-  IconDotsVertical,
-  IconFileExport,
-  IconLink,
-  IconStar,
-  IconStarFilled,
-  IconTrash,
-} from "@tabler/icons-react";
-
-import ExportModal from "@/components/common/export-modal";
-import MovePageModal from "@/features/page/components/move-page-modal.tsx";
-import CopyPageModal from "@/features/page/components/copy-page-modal.tsx";
-import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { duplicatePage } from "@/features/page/services/page-service.ts";
-import { useClipboard } from "@/hooks/use-clipboard";
-import { getAppUrl } from "@/lib/config.ts";
-import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
-import {
-  useFavoriteIds,
-  useAddFavoriteMutation,
-  useRemoveFavoriteMutation,
-} from "@/features/favorite/queries/favorite-query";
-
-import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
-import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
-
-export interface NodeMenuProps {
-  node: SpaceTreeNode;
-  canEdit: boolean;
-}
-
-export function NodeMenu({ node, canEdit }: NodeMenuProps) {
-  const { t } = useTranslation();
-  const clipboard = useClipboard({ timeout: 500 });
-  const { spaceSlug } = useParams();
-  const { openDeleteModal } = useDeletePageModal();
-  const { handleDelete } = useTreeMutation(node.spaceId);
-  const [data, setData] = useAtom(treeDataAtom);
-  const emit = useQueryEmit();
-  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
-    useDisclosure(false);
-  const [
-    movePageModalOpened,
-    { open: openMovePageModal, close: closeMoveSpaceModal },
-  ] = useDisclosure(false);
-  const [
-    copyPageModalOpened,
-    { open: openCopyPageModal, close: closeCopySpaceModal },
-  ] = useDisclosure(false);
-  const favoriteIds = useFavoriteIds("page", node.spaceId);
-  const addFavorite = useAddFavoriteMutation();
-  const removeFavorite = useRemoveFavoriteMutation();
-  const isFavorited = favoriteIds.has(node.id);
-
-  const handleCopyLink = () => {
-    const pageUrl =
-      getAppUrl() + buildPageUrl(spaceSlug, node.slugId, node.name);
-    clipboard.copy(pageUrl);
-    notifications.show({ message: t("Link copied") });
-  };
-
-  const handleDuplicatePage = async () => {
-    try {
-      const duplicatedPage = await duplicatePage({ pageId: node.id });
-
-      // figure out parent + insertion index
-      const siblings = treeModel.siblingsOf(data, node.id);
-      const parentId = siblings?.parentId ?? null;
-      const currentIndex = siblings?.index ?? 0;
-      const newIndex = currentIndex + 1;
-
-      const treeNodeData: SpaceTreeNode = {
-        id: duplicatedPage.id,
-        slugId: duplicatedPage.slugId,
-        name: duplicatedPage.title,
-        position: duplicatedPage.position,
-        spaceId: duplicatedPage.spaceId,
-        parentPageId: duplicatedPage.parentPageId,
-        icon: duplicatedPage.icon,
-        hasChildren: duplicatedPage.hasChildren,
-        canEdit: true,
-        children: [],
-      };
-
-      setData((prev) =>
-        treeModel.insert(prev, parentId, treeNodeData, newIndex),
-      );
-
-      setTimeout(() => {
-        emit({
-          operation: "addTreeNode",
-          spaceId: node.spaceId,
-          payload: {
-            parentId,
-            index: newIndex,
-            data: treeNodeData,
-          },
-        });
-      }, 50);
-
-      notifications.show({ message: t("Page duplicated successfully") });
-    } catch (err: any) {
-      notifications.show({
-        message: err?.response?.data?.message || "An error occurred",
-        color: "red",
-      });
-    }
-  };
-
-  return (
-    <>
-      <Menu shadow="md" width={200}>
-        <Menu.Target>
-          <ActionIcon
-            variant="transparent"
-            c="gray"
-            aria-label={t("Page menu")}
-            tabIndex={-1}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-          >
-            <IconDotsVertical
-              style={{ width: rem(20), height: rem(20) }}
-              stroke={2}
-            />
-          </ActionIcon>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          <Menu.Item
-            leftSection={<IconLink size={16} />}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleCopyLink();
-            }}
-          >
-            {t("Copy link")}
-          </Menu.Item>
-
-          <Menu.Item
-            leftSection={
-              isFavorited ? <IconStarFilled size={16} /> : <IconStar size={16} />
-            }
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              if (isFavorited) {
-                removeFavorite.mutate({ type: "page", pageId: node.id });
-              } else {
-                addFavorite.mutate({ type: "page", pageId: node.id });
-              }
-            }}
-          >
-            {isFavorited ? t("Remove from favorites") : t("Add to favorites")}
-          </Menu.Item>
-
-          <Menu.Item
-            leftSection={<IconFileExport size={16} />}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              openExportModal();
-            }}
-          >
-            {t("Export page")}
-          </Menu.Item>
-
-          {canEdit && (
-            <>
-              <Menu.Item
-                leftSection={<IconCopy size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleDuplicatePage();
-                }}
-              >
-                {t("Duplicate")}
-              </Menu.Item>
-
-              <Menu.Item
-                leftSection={<IconArrowRight size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openMovePageModal();
-                }}
-              >
-                {t("Move")}
-              </Menu.Item>
-
-              <Menu.Item
-                leftSection={<IconCopy size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openCopyPageModal();
-                }}
-              >
-                {t("Copy to space")}
-              </Menu.Item>
-
-              <Menu.Divider />
-              <Menu.Item
-                c="red"
-                leftSection={<IconTrash size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openDeleteModal({
-                    onConfirm: () => handleDelete(node.id),
-                  });
-                }}
-              >
-                {t("Move to trash")}
-              </Menu.Item>
-            </>
-          )}
-        </Menu.Dropdown>
-      </Menu>
-
-      <MovePageModal
-        pageId={node.id}
-        slugId={node.slugId}
-        currentSpaceSlug={spaceSlug}
-        onClose={closeMoveSpaceModal}
-        open={movePageModalOpened}
-      />
-
-      <CopyPageModal
-        pageId={node.id}
-        currentSpaceSlug={spaceSlug}
-        onClose={closeCopySpaceModal}
-        open={copyPageModalOpened}
-      />
-
-      <ExportModal
-        type="page"
-        id={node.id}
-        open={exportOpened}
-        onClose={closeExportModal}
-      />
-    </>
-  );
-}

apps/client/src/features/page/tree/components/space-tree-row.tsx

@@ -1,288 +0,0 @@
-import { useRef } from "react";
-import { Link, useParams } from "react-router-dom";
-import { useAtom } from "jotai";
-import { useTranslation } from "react-i18next";
-import { ActionIcon, rem } from "@mantine/core";
-import {
-  IconChevronDown,
-  IconChevronRight,
-  IconFileDescription,
-  IconPlus,
-  IconPointFilled,
-} from "@tabler/icons-react";
-
-import EmojiPicker from "@/components/ui/emoji-picker.tsx";
-import { queryClient } from "@/main.tsx";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { getPageById } from "@/features/page/services/page-service.ts";
-import {
-  useUpdatePageMutation,
-  fetchAllAncestorChildren,
-} from "@/features/page/queries/page-query.ts";
-import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
-import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
-import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
-
-import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
-import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
-import type { RenderRowProps } from "./doc-tree";
-import { NodeMenu } from "./space-tree-node-menu";
-import classes from "@/features/page/tree/styles/tree.module.css";
-import { updateTreeNodeIcon } from "@/features/page/tree/utils/utils.ts";
-
-type SpaceTreeRowProps = RenderRowProps<SpaceTreeNode> & {
-  readOnly: boolean;
-};
-
-export function SpaceTreeRow({
-  node,
-  isOpen,
-  hasChildren,
-  toggleOpen,
-  rowRef,
-  tabIndex,
-  treeItemProps,
-  readOnly,
-}: SpaceTreeRowProps) {
-  const { t } = useTranslation();
-  const { spaceSlug } = useParams();
-  const updatePageMutation = useUpdatePageMutation();
-  const [, setTreeData] = useAtom(treeDataAtom);
-  const emit = useQueryEmit();
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
-  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
-
-  const canEdit = !readOnly && node.canEdit !== false;
-  const pageUrl = buildPageUrl(spaceSlug, node.slugId, node.name);
-
-  const prefetchPage = () => {
-    timerRef.current = setTimeout(async () => {
-      const page = await queryClient.fetchQuery({
-        queryKey: ["pages", node.id],
-        queryFn: () => getPageById({ pageId: node.id }),
-        staleTime: 5 * 60 * 1000,
-      });
-      if (page?.slugId) {
-        queryClient.setQueryData(["pages", page.slugId], page);
-      }
-    }, 150);
-  };
-
-  const cancelPagePrefetch = () => {
-    if (timerRef.current) {
-      window.clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-
-  const handleUpdateNodeIcon = (nodeId: string, newIcon: string | null) => {
-    setTreeData((prev) =>
-      updateTreeNodeIcon(prev, nodeId, newIcon),
-    );
-  };
-
-  const handleEmojiIconClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  const handleEmojiSelect = (emoji: { native: string }) => {
-    handleUpdateNodeIcon(node.id, emoji.native);
-    updatePageMutation
-      .mutateAsync({ pageId: node.id, icon: emoji.native })
-      .then((data) => {
-        setTimeout(() => {
-          emit({
-            operation: "updateOne",
-            spaceId: node.spaceId,
-            entity: ["pages"],
-            id: node.id,
-            payload: { icon: emoji.native, parentPageId: data.parentPageId },
-          });
-        }, 50);
-      });
-  };
-
-  const handleRemoveEmoji = () => {
-    handleUpdateNodeIcon(node.id, null);
-    updatePageMutation.mutateAsync({ pageId: node.id, icon: null });
-
-    setTimeout(() => {
-      emit({
-        operation: "updateOne",
-        spaceId: node.spaceId,
-        entity: ["pages"],
-        id: node.id,
-        payload: { icon: null },
-      });
-    }, 50);
-  };
-
-  const handleLoadChildren = async () => {
-    if (!node.hasChildren) return;
-    try {
-      const childrenTree = await fetchAllAncestorChildren({
-        pageId: node.id,
-        spaceId: node.spaceId,
-      });
-      setTreeData((prev) =>
-        treeModel.appendChildren(prev, node.id, childrenTree),
-      );
-    } catch (error) {
-      console.error("Failed to fetch children:", error);
-    }
-  };
-
-  return (
-    <Link
-      ref={rowRef as React.Ref<HTMLAnchorElement>}
-      to={pageUrl}
-      className={classes.node}
-      tabIndex={tabIndex}
-      {...treeItemProps}
-      onClick={() => {
-        if (mobileSidebarOpened) {
-          toggleMobileSidebar();
-        }
-      }}
-      onMouseEnter={prefetchPage}
-      onMouseLeave={cancelPagePrefetch}
-    >
-      <PageArrow
-        isOpen={isOpen}
-        hasChildren={hasChildren}
-        onToggle={toggleOpen}
-      />
-
-      <div onClick={handleEmojiIconClick} style={{ marginRight: "4px" }}>
-        <EmojiPicker
-          onEmojiSelect={handleEmojiSelect}
-          icon={
-            node.icon ? node.icon : <IconFileDescription size="18" />
-          }
-          readOnly={!canEdit}
-          removeEmojiAction={handleRemoveEmoji}
-          actionIconProps={{ tabIndex: -1 }}
-        />
-      </div>
-
-      <span className={classes.text}>{node.name || t("untitled")}</span>
-
-      <div className={classes.actions}>
-        <NodeMenu node={node} canEdit={canEdit} />
-
-        {canEdit && (
-          <CreateNode
-            node={node}
-            isOpen={isOpen}
-            hasChildren={hasChildren}
-            onToggle={toggleOpen}
-            onExpandTree={handleLoadChildren}
-          />
-        )}
-      </div>
-    </Link>
-  );
-}
-
-interface PageArrowProps {
-  isOpen: boolean;
-  hasChildren: boolean;
-  onToggle: () => void;
-}
-
-function PageArrow({ isOpen, hasChildren, onToggle }: PageArrowProps) {
-  const { t } = useTranslation();
-
-  if (!hasChildren) {
-    return (
-      <span
-        aria-hidden
-        style={{
-          width: 20,
-          height: 20,
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "var(--mantine-color-gray-6)",
-          flexShrink: 0,
-        }}
-      >
-        <IconPointFilled size={8} />
-      </span>
-    );
-  }
-
-  return (
-    <ActionIcon
-      size={20}
-      variant="subtle"
-      c="gray"
-      aria-label={isOpen ? t("Collapse") : t("Expand")}
-      aria-expanded={isOpen}
-      tabIndex={-1}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onToggle();
-      }}
-    >
-      {isOpen ? (
-        <IconChevronDown stroke={2} size={18} />
-      ) : (
-        <IconChevronRight stroke={2} size={18} />
-      )}
-    </ActionIcon>
-  );
-}
-
-interface CreateNodeProps {
-  node: SpaceTreeNode;
-  isOpen: boolean;
-  hasChildren: boolean;
-  onToggle: () => void;
-  onExpandTree: () => Promise<void> | void;
-}
-
-function CreateNode({
-  node,
-  isOpen,
-  hasChildren,
-  onToggle,
-  onExpandTree,
-}: CreateNodeProps) {
-  const { t } = useTranslation();
-  const { handleCreate } = useTreeMutation(node.spaceId);
-
-  async function handleClickCreate() {
-    if (node.hasChildren && !hasChildren) {
-      // Expand and lazy-load before creating a child. handleCreate reads the
-      // latest tree imperatively (via useStore) so we no longer need a
-      // setTimeout to wait for React to rerun the closure with fresh data.
-      if (!isOpen) onToggle();
-      await onExpandTree();
-    } else if (!isOpen) {
-      onToggle();
-    }
-    handleCreate(node.id);
-  }
-
-  return (
-    <ActionIcon
-      variant="transparent"
-      c="gray"
-      aria-label={t("Create page")}
-      tabIndex={-1}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        handleClickCreate();
-      }}
-    >
-      <IconPlus style={{ width: rem(20), height: rem(20) }} stroke={2} />
-    </ActionIcon>
-  );
-}

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -1,47 +1,110 @@
-import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { Text } from "@mantine/core";
+import {
+  NodeApi,
+  NodeRendererProps,
+  Tree,
+  TreeApi,
+  SimpleTree,
+} from "react-arborist";
+import { atom, useAtom } from "jotai";
+import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import {
   fetchAllAncestorChildren,
   useGetRootSidebarPagesQuery,
   usePageQuery,
+  useUpdatePageMutation,
 } from "@/features/page/queries/page-query.ts";
+import { useEffect, useRef, useState } from "react";
+import { Link, useParams } from "react-router-dom";
 import classes from "@/features/page/tree/styles/tree.module.css";
-import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { openTreeNodesAtom } from "@/features/page/tree/atoms/open-tree-nodes-atom.ts";
+import { ActionIcon, Box, Menu, rem, Text } from "@mantine/core";
+import {
+  IconArrowRight,
+  IconChevronDown,
+  IconChevronRight,
+  IconCopy,
+  IconDotsVertical,
+  IconFileDescription,
+  IconFileExport,
+  IconLink,
+  IconPlus,
+  IconPointFilled,
+  IconStar,
+  IconStarFilled,
+  IconTrash,
+} from "@tabler/icons-react";
+import {
+  appendNodeChildrenAtom,
+  treeDataAtom,
+} from "@/features/page/tree/atoms/tree-data-atom.ts";
+import clsx from "clsx";
+import EmojiPicker from "@/components/ui/emoji-picker.tsx";
 import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
 import {
+  appendNodeChildren,
   buildTree,
   buildTreeWithChildren,
   mergeRootTrees,
+  updateTreeNodeIcon,
 } from "@/features/page/tree/utils/utils.ts";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import { getPageBreadcrumbs } from "@/features/page/services/page-service.ts";
-import { IPage } from "@/features/page/types/page.types.ts";
+import {
+  getPageBreadcrumbs,
+  getPageById,
+  getSidebarPages,
+} from "@/features/page/services/page-service.ts";
+import { IPage, SidebarPagesParams } from "@/features/page/types/page.types.ts";
+import { queryClient } from "@/main.tsx";
+import { OpenMap } from "react-arborist/dist/main/state/open-slice";
+import { useDisclosure, useElementSize, useMergedRef } from "@mantine/hooks";
+import { useClipboard } from "@/hooks/use-clipboard";
+import { dfs } from "react-arborist/dist/module/utils";
+import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { notifications } from "@mantine/notifications";
+import { getAppUrl } from "@/lib/config.ts";
 import { extractPageSlugId } from "@/lib";
-import { DocTree } from "./doc-tree";
-import { SpaceTreeRow } from "./space-tree-row";
+import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
+import { useTranslation } from "react-i18next";
+import ExportModal from "@/components/common/export-modal";
+import MovePageModal from "../../components/move-page-modal.tsx";
+import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
+import CopyPageModal from "../../components/copy-page-modal.tsx";
+import { duplicatePage } from "../../services/page-service.ts";
+import { useFavoriteIds, useAddFavoriteMutation, useRemoveFavoriteMutation } from "@/features/favorite/queries/favorite-query";
 
 interface SpaceTreeProps {
   spaceId: string;
   readOnly: boolean;
 }
 
+const openTreeNodesAtom = atom<OpenMap>({});
+
 export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
   const { t } = useTranslation();
   const { pageSlug } = useParams();
-  const [data, setData] = useAtom(treeDataAtom);
-  const { handleMove } = useTreeMutation(spaceId);
+  const { data, setData, controllers } =
+    useTreeMutation<TreeApi<SpaceTreeNode>>(spaceId);
   const {
     data: pagesData,
     hasNextPage,
     fetchNextPage,
     isFetching,
-  } = useGetRootSidebarPagesQuery({ spaceId });
-  const [openTreeNodes, setOpenTreeNodes] = useAtom(openTreeNodesAtom);
+  } = useGetRootSidebarPagesQuery({
+    spaceId,
+  });
+  const [, setTreeApi] = useAtom<TreeApi<SpaceTreeNode>>(treeApiAtom);
+  const treeApiRef = useRef<TreeApi<SpaceTreeNode>>();
+  const [openTreeNodes, setOpenTreeNodes] = useAtom<OpenMap>(openTreeNodesAtom);
+  const rootElement = useRef<HTMLDivElement>();
+  const [isRootReady, setIsRootReady] = useState(false);
+  const { ref: sizeRef, width, height } = useElementSize();
+  const mergedRef = useMergedRef((element) => {
+    rootElement.current = element;
+    if (element && !isRootReady) {
+      setIsRootReady(true);
+    }
+  }, sizeRef);
   const [isDataLoaded, setIsDataLoaded] = useState(false);
   const spaceIdRef = useRef(spaceId);
   spaceIdRef.current = spaceId;
@@ -60,24 +123,23 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
   }, [hasNextPage, fetchNextPage, isFetching, spaceId]);
 
   useEffect(() => {
-    if (!pagesData?.pages || hasNextPage) return;
+    if (pagesData?.pages && !hasNextPage) {
+      const allItems = pagesData.pages.flatMap((page) => page.items);
+      const treeData = buildTree(allItems);
 
-    const allItems = pagesData.pages.flatMap((page) => page.items);
-    const treeData = buildTree(allItems);
+      setData((prev) => {
+        // fresh space; full reset
+        if (prev.length === 0 || prev[0]?.spaceId !== spaceId) {
+          setIsDataLoaded(true);
+          setOpenTreeNodes({});
+          return treeData;
+        }
 
-    setData((prev) => {
-      // Keep nodes belonging to other spaces — filteredData filters by spaceId
-      // for rendering, so accumulating is safe. Preserves lazy-loaded children
-      // and open-state when the user returns to a previously-visited space.
-      const otherSpaces = prev.filter((n) => n?.spaceId !== spaceId);
-      const currentSpace = prev.filter((n) => n?.spaceId === spaceId);
-      const refreshed =
-        currentSpace.length > 0
-          ? mergeRootTrees(currentSpace, treeData)
-          : treeData;
-      return [...otherSpaces, ...refreshed];
-    });
-    setIsDataLoaded(true);
+        // same space; append only missing roots
+        setIsDataLoaded(true);
+        return mergeRootTrees(prev, treeData);
+      });
+    }
   }, [pagesData, hasNextPage, spaceId]);
 
   useEffect(() => {
@@ -86,7 +148,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     const fetchData = async () => {
       if (isDataLoaded && currentPage) {
         // check if pageId node is present in the tree
-        const node = treeModel.find(data, currentPage.id);
+        const node = dfs(treeApiRef.current?.root, currentPage.id);
         if (node) {
           // if node is found, no need to traverse its ancestors
           return;
@@ -98,12 +160,14 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
 
         if (spaceIdRef.current !== effectSpaceId) return;
 
-        if (ancestors && ancestors.length > 1) {
+        if (ancestors && ancestors?.length > 1) {
           let flatTreeItems = [...buildTree(ancestors)];
 
           const fetchAndUpdateChildren = async (ancestor: IPage) => {
             // we don't want to fetch the children of the opened page
-            if (ancestor.id === currentPage.id) return;
+            if (ancestor.id === currentPage.id) {
+              return;
+            }
             const children = await fetchAllAncestorChildren({
               pageId: ancestor.id,
               spaceId: ancestor.spaceId,
@@ -121,6 +185,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
             fetchAndUpdateChildren(ancestor),
           );
 
+          // Wait for all fetch operations to complete
           Promise.all(fetchPromises).then(() => {
             if (spaceIdRef.current !== effectSpaceId) return;
 
@@ -130,24 +195,15 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
             const rootChild = ancestorsTree[0];
 
             // attach built ancestors to tree using functional updater
+            // to avoid stale closure overwriting the current tree data
             setData((currentData) =>
-              treeModel.appendChildren(
-                currentData,
-                rootChild.id,
-                rootChild.children ?? [],
-              ),
+              appendNodeChildren(currentData, rootChild.id, rootChild.children),
             );
 
-            // open all ancestors of the current page. DocTree picks up the
-            // selectedId change and scrolls the row into view on its own once
-            // flat contains it.
-            setOpenTreeNodes((prev) => {
-              const next = { ...prev };
-              for (const a of ancestors) {
-                if (a.id !== currentPage.id) next[a.id] = true;
-              }
-              return next;
-            });
+            setTimeout(() => {
+              // focus on node and open all parents
+              treeApiRef.current?.select(currentPage.id);
+            }, 100);
           });
         }
       }
@@ -156,76 +212,556 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     fetchData();
   }, [isDataLoaded, currentPage?.id]);
 
-  const openIds = useMemo(
-    () => new Set(Object.keys(openTreeNodes).filter((k) => openTreeNodes[k])),
-    [openTreeNodes],
-  );
+  useEffect(() => {
+    if (currentPage?.id) {
+      setTimeout(() => {
+        // focus on node and open all parents
+        treeApiRef.current?.select(currentPage.id, { align: "auto" });
+      }, 200);
+    } else {
+      treeApiRef.current?.deselectAll();
+    }
+  }, [currentPage?.id]);
 
-  const handleToggle = useCallback(
-    async (id: string, isOpen: boolean) => {
-      setOpenTreeNodes((prev) => ({ ...prev, [id]: isOpen }));
-      if (isOpen) {
-        const node = treeModel.find(data, id) as SpaceTreeNode | null;
-        if (
-          node?.hasChildren &&
-          (!node.children || node.children.length === 0)
-        ) {
-          const fetched = await fetchAllAncestorChildren({
-            pageId: id,
-            spaceId: node.spaceId,
-          });
-          setData((prev) => treeModel.appendChildren(prev, id, fetched));
-        }
-      }
-    },
-    [data, setOpenTreeNodes, setData],
-  );
+  // Clean up tree API on unmount
+  useEffect(() => {
+    return () => {
+      // @ts-ignore
+      setTreeApi(null);
+    };
+  }, [setTreeApi]);
 
-  const filteredData = useMemo(
-    () => data.filter((node) => node?.spaceId === spaceId),
-    [data, spaceId],
-  );
-
-  // Stable callbacks for DocTree. Without these, every parent render recreates
-  // the props and tears down every row's draggable/dropTarget subscription,
-  // defeating memo(DocTreeRow).
-  const renderRow = useCallback(
-    (rowProps: Parameters<typeof SpaceTreeRow>[0]) => (
-      <SpaceTreeRow {...rowProps} readOnly={readOnly} />
-    ),
-    [readOnly],
-  );
-  const disableDragDrop = useCallback(
-    (n: SpaceTreeNode) => n.canEdit === false,
-    [],
-  );
-  const getDragLabel = useCallback(
-    (n: SpaceTreeNode) => n.name || t("untitled"),
-    [t],
-  );
+  const filteredData = data.filter((node) => node?.spaceId === spaceId);
 
   return (
-    <div className={classes.treeContainer}>
+    <div ref={mergedRef} className={classes.treeContainer}>
       {isDataLoaded && filteredData.length === 0 && (
         <Text size="xs" c="dimmed" py="xs" px="sm">
           {t("No pages yet")}
         </Text>
       )}
-      {isDataLoaded && filteredData.length > 0 && (
-        <DocTree<SpaceTreeNode>
+      {isRootReady && rootElement.current && (
+        <Tree
           data={filteredData}
-          openIds={openIds}
-          selectedId={currentPage?.id}
-          renderRow={renderRow}
-          onMove={handleMove}
-          onToggle={handleToggle}
-          readOnly={readOnly}
-          disableDrag={disableDragDrop}
-          disableDrop={disableDragDrop}
-          getDragLabel={getDragLabel}
-          aria-label={t("Pages")}
-        />
+          disableDrag={
+            readOnly
+              ? true
+              : (data) => {
+                  return data.canEdit === false;
+                }
+          }
+          disableDrop={
+            readOnly
+              ? true
+              : ({ parentNode }) => parentNode?.data?.canEdit === false
+          }
+          disableEdit={readOnly ? true : (data) => data.canEdit === false}
+          {...controllers}
+          width={width}
+          height={rootElement.current.clientHeight}
+          ref={(ref) => {
+            treeApiRef.current = ref;
+            if (ref) {
+              //@ts-ignore
+              setTreeApi(ref);
+            }
+          }}
+          openByDefault={false}
+          disableMultiSelection={true}
+          className={classes.tree}
+          rowClassName={classes.row}
+          rowHeight={30}
+          overscanCount={10}
+          dndRootElement={rootElement.current}
+          onToggle={() => {
+            setOpenTreeNodes(treeApiRef.current?.openState);
+          }}
+          initialOpenState={openTreeNodes}
+        >
+          {Node}
+        </Tree>
       )}
     </div>
   );
 }
+
+function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
+  const { t } = useTranslation();
+  const updatePageMutation = useUpdatePageMutation();
+  const [treeData, setTreeData] = useAtom(treeDataAtom);
+  const [, appendChildren] = useAtom(appendNodeChildrenAtom);
+  const emit = useQueryEmit();
+  const { spaceSlug } = useParams();
+  const timerRef = useRef(null);
+  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
+  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
+
+  const prefetchPage = () => {
+    timerRef.current = setTimeout(async () => {
+      const page = await queryClient.fetchQuery({
+        queryKey: ["pages", node.data.id],
+        queryFn: () => getPageById({ pageId: node.data.id }),
+        staleTime: 5 * 60 * 1000,
+      });
+      if (page?.slugId) {
+        queryClient.setQueryData(["pages", page.slugId], page);
+      }
+    }, 150);
+  };
+
+  const cancelPagePrefetch = () => {
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+
+  async function handleLoadChildren(node: NodeApi<SpaceTreeNode>) {
+    if (!node.data.hasChildren) return;
+    // in conflict with use-query-subscription.ts => case "addTreeNode","moveTreeNode" etc with websocket
+    // if (node.data.children && node.data.children.length > 0) {
+    //   return;
+    // }
+
+    try {
+      const params: SidebarPagesParams = {
+        pageId: node.data.id,
+        spaceId: node.data.spaceId,
+      };
+
+      const childrenTree = await fetchAllAncestorChildren(params);
+
+      appendChildren({
+        parentId: node.data.id,
+        children: childrenTree,
+      });
+    } catch (error) {
+      console.error("Failed to fetch children:", error);
+    }
+  }
+
+  const handleUpdateNodeIcon = (nodeId: string, newIcon: string) => {
+    const updatedTree = updateTreeNodeIcon(treeData, nodeId, newIcon);
+    setTreeData(updatedTree);
+  };
+
+  const handleEmojiIconClick = (e: any) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleEmojiSelect = (emoji: { native: string }) => {
+    handleUpdateNodeIcon(node.id, emoji.native);
+    updatePageMutation
+      .mutateAsync({ pageId: node.id, icon: emoji.native })
+      .then((data) => {
+        setTimeout(() => {
+          emit({
+            operation: "updateOne",
+            spaceId: node.data.spaceId,
+            entity: ["pages"],
+            id: node.id,
+            payload: { icon: emoji.native, parentPageId: data.parentPageId },
+          });
+        }, 50);
+      });
+  };
+
+  const handleRemoveEmoji = () => {
+    handleUpdateNodeIcon(node.id, null);
+    updatePageMutation.mutateAsync({ pageId: node.id, icon: null });
+
+    setTimeout(() => {
+      emit({
+        operation: "updateOne",
+        spaceId: node.data.spaceId,
+        entity: ["pages"],
+        id: node.id,
+        payload: { icon: null },
+      });
+    }, 50);
+  };
+
+  if (
+    node.willReceiveDrop &&
+    node.isClosed &&
+    (node.children.length > 0 || node.data.hasChildren)
+  ) {
+    handleLoadChildren(node);
+    setTimeout(() => {
+      if (node.state.willReceiveDrop) {
+        node.open();
+      }
+    }, 650);
+  }
+
+  const pageUrl = buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
+
+  return (
+    <>
+      <Box
+        style={style}
+        className={clsx(classes.node, node.state)}
+        component={Link}
+        to={pageUrl}
+        // @ts-ignore
+        ref={dragHandle}
+        onClick={() => {
+          if (mobileSidebarOpened) {
+            toggleMobileSidebar();
+          }
+        }}
+        onMouseEnter={prefetchPage}
+        onMouseLeave={cancelPagePrefetch}
+      >
+        <PageArrow node={node} onExpandTree={() => handleLoadChildren(node)} />
+
+        <div onClick={handleEmojiIconClick} style={{ marginRight: "4px" }}>
+          <EmojiPicker
+            onEmojiSelect={handleEmojiSelect}
+            icon={
+              node.data.icon ? (
+                node.data.icon
+              ) : (
+                <IconFileDescription size="18" />
+              )
+            }
+            readOnly={
+              tree.props.disableEdit === true || node.data.canEdit === false
+            }
+            removeEmojiAction={handleRemoveEmoji}
+          />
+        </div>
+
+        <span className={classes.text}>{node.data.name || t("untitled")}</span>
+
+        <div className={classes.actions}>
+          <NodeMenu node={node} treeApi={tree} spaceId={node.data.spaceId} />
+
+          {tree.props.disableEdit !== true && node.data.canEdit !== false && (
+            <CreateNode
+              node={node}
+              treeApi={tree}
+              onExpandTree={() => handleLoadChildren(node)}
+            />
+          )}
+        </div>
+      </Box>
+    </>
+  );
+}
+
+interface CreateNodeProps {
+  node: NodeApi<SpaceTreeNode>;
+  treeApi: TreeApi<SpaceTreeNode>;
+  onExpandTree?: () => void;
+}
+
+function CreateNode({ node, treeApi, onExpandTree }: CreateNodeProps) {
+  const { t } = useTranslation();
+
+  function handleCreate() {
+    if (node.data.hasChildren && node.children.length === 0) {
+      node.toggle();
+      onExpandTree();
+
+      setTimeout(() => {
+        treeApi?.create({ type: "internal", parentId: node.id, index: 0 });
+      }, 500);
+    } else {
+      treeApi?.create({ type: "internal", parentId: node.id });
+    }
+  }
+
+  return (
+    <ActionIcon
+      variant="transparent"
+      c="gray"
+      aria-label={t("Create page")}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleCreate();
+      }}
+    >
+      <IconPlus style={{ width: rem(20), height: rem(20) }} stroke={2} />
+    </ActionIcon>
+  );
+}
+
+interface NodeMenuProps {
+  node: NodeApi<SpaceTreeNode>;
+  treeApi: TreeApi<SpaceTreeNode>;
+  spaceId: string;
+}
+
+function NodeMenu({ node, treeApi, spaceId }: NodeMenuProps) {
+  const { t } = useTranslation();
+  const clipboard = useClipboard({ timeout: 500 });
+  const { spaceSlug } = useParams();
+  const { openDeleteModal } = useDeletePageModal();
+  const [data, setData] = useAtom(treeDataAtom);
+  const emit = useQueryEmit();
+  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
+    useDisclosure(false);
+  const [
+    movePageModalOpened,
+    { open: openMovePageModal, close: closeMoveSpaceModal },
+  ] = useDisclosure(false);
+  const [
+    copyPageModalOpened,
+    { open: openCopyPageModal, close: closeCopySpaceModal },
+  ] = useDisclosure(false);
+  const favoriteIds = useFavoriteIds("page", spaceId);
+  const addFavorite = useAddFavoriteMutation();
+  const removeFavorite = useRemoveFavoriteMutation();
+  const isFavorited = favoriteIds.has(node.data.id);
+
+  const handleCopyLink = () => {
+    const pageUrl =
+      getAppUrl() + buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
+    clipboard.copy(pageUrl);
+    notifications.show({ message: t("Link copied") });
+  };
+
+  const handleDuplicatePage = async () => {
+    try {
+      const duplicatedPage = await duplicatePage({
+        pageId: node.id,
+      });
+
+      // Find the index of the current node
+      const parentId =
+        node.parent?.id === "__REACT_ARBORIST_INTERNAL_ROOT__"
+          ? null
+          : node.parent?.id;
+      const siblings = parentId ? node.parent.children : treeApi?.props.data;
+      const currentIndex =
+        siblings?.findIndex((sibling) => sibling.id === node.id) || 0;
+      const newIndex = currentIndex + 1;
+
+      // Add the duplicated page to the tree
+      const treeNodeData: SpaceTreeNode = {
+        id: duplicatedPage.id,
+        slugId: duplicatedPage.slugId,
+        name: duplicatedPage.title,
+        position: duplicatedPage.position,
+        spaceId: duplicatedPage.spaceId,
+        parentPageId: duplicatedPage.parentPageId,
+        icon: duplicatedPage.icon,
+        hasChildren: duplicatedPage.hasChildren,
+        canEdit: true,
+        children: [],
+      };
+
+      // Update local tree
+      const simpleTree = new SimpleTree(data);
+      simpleTree.create({
+        parentId,
+        index: newIndex,
+        data: treeNodeData,
+      });
+      setData(simpleTree.data);
+
+      // Emit socket event
+      setTimeout(() => {
+        emit({
+          operation: "addTreeNode",
+          spaceId: spaceId,
+          payload: {
+            parentId,
+            index: newIndex,
+            data: treeNodeData,
+          },
+        });
+      }, 50);
+
+      notifications.show({
+        message: t("Page duplicated successfully"),
+      });
+    } catch (err) {
+      notifications.show({
+        message: err.response?.data.message || "An error occurred",
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <>
+      <Menu shadow="md" width={200}>
+        <Menu.Target>
+          <ActionIcon
+            variant="transparent"
+            c="gray"
+            aria-label={t("Page menu")}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+          >
+            <IconDotsVertical
+              style={{ width: rem(20), height: rem(20) }}
+              stroke={2}
+            />
+          </ActionIcon>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconLink size={16} />}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleCopyLink();
+            }}
+          >
+            {t("Copy link")}
+          </Menu.Item>
+
+          <Menu.Item
+            leftSection={isFavorited ? <IconStarFilled size={16} /> : <IconStar size={16} />}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (isFavorited) {
+                removeFavorite.mutate({ type: "page", pageId: node.data.id });
+              } else {
+                addFavorite.mutate({ type: "page", pageId: node.data.id });
+              }
+            }}
+          >
+            {isFavorited ? t("Remove from favorites") : t("Add to favorites")}
+          </Menu.Item>
+
+          <Menu.Item
+            leftSection={<IconFileExport size={16} />}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              openExportModal();
+            }}
+          >
+            {t("Export page")}
+          </Menu.Item>
+
+          {treeApi.props.disableEdit !== true &&
+            node.data.canEdit !== false && (
+              <>
+                <Menu.Item
+                  leftSection={<IconCopy size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleDuplicatePage();
+                  }}
+                >
+                  {t("Duplicate")}
+                </Menu.Item>
+
+                <Menu.Item
+                  leftSection={<IconArrowRight size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openMovePageModal();
+                  }}
+                >
+                  {t("Move")}
+                </Menu.Item>
+
+                <Menu.Item
+                  leftSection={<IconCopy size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openCopyPageModal();
+                  }}
+                >
+                  {t("Copy to space")}
+                </Menu.Item>
+
+                <Menu.Divider />
+                <Menu.Item
+                  c="red"
+                  leftSection={<IconTrash size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openDeleteModal({ onConfirm: () => treeApi?.delete(node) });
+                  }}
+                >
+                  {t("Move to trash")}
+                </Menu.Item>
+              </>
+            )}
+        </Menu.Dropdown>
+      </Menu>
+
+      <MovePageModal
+        pageId={node.id}
+        slugId={node.data.slugId}
+        currentSpaceSlug={spaceSlug}
+        onClose={closeMoveSpaceModal}
+        open={movePageModalOpened}
+      />
+
+      <CopyPageModal
+        pageId={node.id}
+        currentSpaceSlug={spaceSlug}
+        onClose={closeCopySpaceModal}
+        open={copyPageModalOpened}
+      />
+
+      <ExportModal
+        type="page"
+        id={node.id}
+        open={exportOpened}
+        onClose={closeExportModal}
+      />
+    </>
+  );
+}
+
+interface PageArrowProps {
+  node: NodeApi<SpaceTreeNode>;
+  onExpandTree?: () => void;
+}
+
+function PageArrow({ node, onExpandTree }: PageArrowProps) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (node.isOpen) {
+      onExpandTree();
+    }
+  }, []);
+
+  return (
+    <ActionIcon
+      size={20}
+      variant="subtle"
+      c="gray"
+      aria-label={node.isOpen ? t("Collapse") : t("Expand")}
+      aria-expanded={node.isInternal ? node.isOpen : undefined}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        node.toggle();
+        onExpandTree();
+      }}
+    >
+      {node.isInternal ? (
+        node.children && (node.children.length > 0 || node.data.hasChildren) ? (
+          node.isOpen ? (
+            <IconChevronDown stroke={2} size={18} />
+          ) : (
+            <IconChevronRight stroke={2} size={18} />
+          )
+        ) : (
+          <IconPointFilled size={8} />
+        )
+      ) : null}
+    </ActionIcon>
+  );
+}

apps/client/src/features/page/tree/hooks/drop-op-to-move-payload.test.ts

@@ -1,100 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import type { SpaceTreeNode } from '@/features/page/tree/types';
-import { dropOpToMovePayload } from './drop-op-to-move-payload';
-
-vi.mock('fractional-indexing-jittered', () => ({
-  generateJitteredKeyBetween: (a: string | null, b: string | null) =>
-    `${a ?? 'START'}|${b ?? 'END'}`,
-}));
-
-const n = (id: string, position: string, children?: SpaceTreeNode[]): SpaceTreeNode =>
-  ({ id, position, children, name: id } as unknown as SpaceTreeNode);
-
-const tree: SpaceTreeNode[] = [
-  n('a', 'A', [n('a1', 'AA'), n('a2', 'AB')]),
-  n('b', 'B'),
-];
-
-describe('dropOpToMovePayload', () => {
-  it('reorder-before computes parentId + position between prev and target', () => {
-    const p = dropOpToMovePayload(tree, 'a2', {
-      kind: 'reorder-before',
-      targetId: 'a1',
-    });
-    expect(p).toEqual({ pageId: 'a2', parentPageId: 'a', position: 'START|AA' });
-  });
-
-  it('reorder-after computes position between target and next', () => {
-    const p = dropOpToMovePayload(tree, 'a1', {
-      kind: 'reorder-after',
-      targetId: 'a2',
-    });
-    expect(p).toEqual({ pageId: 'a1', parentPageId: 'a', position: 'AB|END' });
-  });
-
-  it('make-child appends with position after last child', () => {
-    const p = dropOpToMovePayload(tree, 'b', {
-      kind: 'make-child',
-      targetId: 'a',
-    });
-    expect(p).toEqual({ pageId: 'b', parentPageId: 'a', position: 'AB|END' });
-  });
-
-  it('reorder-before at root: parentPageId is null', () => {
-    const p = dropOpToMovePayload(tree, 'b', {
-      kind: 'reorder-before',
-      targetId: 'a',
-    });
-    expect(p).toEqual({ pageId: 'b', parentPageId: null, position: 'START|A' });
-  });
-
-  // Regression: when source is already adjacent to target, the BEFORE-tree
-  // treats source itself as the target's neighbor and falls back to null,
-  // producing an unbounded fractional key that overshoots other siblings.
-  // The fix uses the AFTER-tree, where source occupies its destination slot
-  // surrounded by its REAL neighbors.
-  it('reorder-after when source is immediately after target uses post-move neighbors', () => {
-    const adjacent: SpaceTreeNode[] = [
-      n('a', 'A'),
-      n('b', 'AB'),
-      n('c', 'B'),
-      n('d', 'BC'),
-    ];
-    const p = dropOpToMovePayload(adjacent, 'b', {
-      kind: 'reorder-after',
-      targetId: 'a',
-    });
-    // After-tree is [a, b, c, d] (no-op shape). Source 'b' at index 1.
-    // prev = 'A', next = 'B'. Old buggy code returned prev='A', next=null.
-    expect(p).toEqual({ pageId: 'b', parentPageId: null, position: 'A|B' });
-  });
-
-  it('reorder-before when source is immediately before target uses post-move neighbors', () => {
-    const adjacent: SpaceTreeNode[] = [
-      n('a', 'A'),
-      n('b', 'AB'),
-      n('c', 'B'),
-      n('d', 'BC'),
-    ];
-    const p = dropOpToMovePayload(adjacent, 'b', {
-      kind: 'reorder-before',
-      targetId: 'c',
-    });
-    // After-tree is [a, b, c, d]. Source 'b' at index 1.
-    // prev = 'A', next = 'B'. Old buggy code returned prev=null, next='B'.
-    expect(p).toEqual({ pageId: 'b', parentPageId: null, position: 'A|B' });
-  });
-
-  it('make-child when source is already last child of target uses post-move neighbors', () => {
-    const t: SpaceTreeNode[] = [
-      n('p', 'P', [n('x', 'X'), n('y', 'Y')]),
-    ];
-    const p = dropOpToMovePayload(t, 'y', {
-      kind: 'make-child',
-      targetId: 'p',
-    });
-    // After-tree: 'y' becomes last child of 'p' → [x, y]. y at index 1.
-    // prev = 'X', next = null. Old buggy: prev=Y (source's own position), next=null.
-    expect(p).toEqual({ pageId: 'y', parentPageId: 'p', position: 'X|END' });
-  });
-});

apps/client/src/features/page/tree/hooks/drop-op-to-move-payload.ts

@@ -1,36 +0,0 @@
-import { generateJitteredKeyBetween } from 'fractional-indexing-jittered';
-import type { SpaceTreeNode } from '@/features/page/tree/types';
-import type { IMovePage } from '@/features/page/types/page.types';
-import type { DropOp } from '@/features/page/tree/model/tree-model.types';
-import { treeModel } from '@/features/page/tree/model/tree-model';
-
-export function dropOpToMovePayload(
-  tree: SpaceTreeNode[],
-  sourceId: string,
-  op: DropOp,
-): IMovePage {
-  // Compute the post-move tree so we read source's REAL neighbors at its new
-  // position. Reading from the before-tree would mean treating source itself
-  // as a neighbor of the target — wrong when source is adjacent to target.
-  const { tree: after } = treeModel.move(tree, sourceId, op);
-  const info = treeModel.siblingsOf(after, sourceId);
-  if (!info) {
-    return {
-      pageId: sourceId,
-      parentPageId: null,
-      position: generateJitteredKeyBetween(null, null),
-    };
-  }
-
-  const prev = info.siblings[info.index - 1] as SpaceTreeNode | undefined;
-  const next = info.siblings[info.index + 1] as SpaceTreeNode | undefined;
-
-  return {
-    pageId: sourceId,
-    parentPageId: info.parentId,
-    position: generateJitteredKeyBetween(
-      prev?.position ?? null,
-      next?.position ?? null,
-    ),
-  };
-}

apps/client/src/features/page/tree/hooks/use-tree-mutation.ts

@@ -1,15 +1,16 @@
-import { useCallback } from "react";
-import { useAtom, useStore } from "jotai";
-import { notifications } from "@mantine/notifications";
-import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
-
+import { useMemo } from "react";
+import {
+  CreateHandler,
+  DeleteHandler,
+  MoveHandler,
+  NodeApi,
+  RenameHandler,
+  SimpleTree,
+} from "react-arborist";
+import { useAtom } from "jotai";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import type { DropOp } from "@/features/page/tree/model/tree-model.types";
-import { dropOpToMovePayload } from "./drop-op-to-move-payload";
-import { SpaceTreeNode } from "@/features/page/tree/types.ts";
-import { IPage } from "@/features/page/types/page.types.ts";
+import { IMovePage, IPage } from "@/features/page/types/page.types.ts";
+import { useNavigate, useParams } from "react-router-dom";
 import {
   useCreatePageMutation,
   useRemovePageMutation,
@@ -17,250 +18,258 @@ import {
   useUpdatePageMutation,
   updateCacheOnMovePage,
 } from "@/features/page/queries/page-query.ts";
+import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
+import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { getSpaceUrl } from "@/lib/config.ts";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
 
-export type UseTreeMutation = {
-  handleMove: (sourceId: string, op: DropOp) => Promise<void>;
-  handleCreate: (parentId: string | null) => Promise<void>;
-  handleRename: (id: string, name: string) => Promise<void>;
-  handleDelete: (id: string) => Promise<void>;
-};
-
-export function useTreeMutation(spaceId: string): UseTreeMutation {
-  const { t } = useTranslation();
-  const [, setData] = useAtom(treeDataAtom);
-  // `store` reads the *current* treeDataAtom imperatively in handlers — avoids
-  // stale-closure issues when the caller updates the tree (e.g. lazy-load
-  // children) and then immediately invokes a handler.
-  const store = useStore();
+export function useTreeMutation<T>(spaceId: string) {
+  const [data, setData] = useAtom(treeDataAtom);
+  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
   const createPageMutation = useCreatePageMutation();
   const updatePageMutation = useUpdatePageMutation();
   const removePageMutation = useRemovePageMutation();
   const movePageMutation = useMovePageMutation();
   const navigate = useNavigate();
-  const { spaceSlug, pageSlug } = useParams();
+  const { spaceSlug } = useParams();
+  const { pageSlug } = useParams();
   const emit = useQueryEmit();
 
-  const handleMove = useCallback(
-    async (sourceId: string, op: DropOp) => {
-      const before = store.get(treeDataAtom);
-      const { tree: after, result } = treeModel.move(before, sourceId, op);
-      if (after === before) return;
+  const onCreate: CreateHandler<T> = async ({ parentId, index, type }) => {
+    const payload: { spaceId: string; parentPageId?: string } = {
+      spaceId: spaceId,
+    };
+    if (parentId) {
+      payload.parentPageId = parentId;
+    }
 
-      const payload = dropOpToMovePayload(before, sourceId, op);
-      const source = treeModel.find(before, sourceId) as SpaceTreeNode | null;
-      if (!source) return;
-      const oldParentId = source.parentPageId ?? null;
+    let createdPage: IPage;
+    try {
+      createdPage = await createPageMutation.mutateAsync(payload);
+    } catch (err) {
+      throw new Error("Failed to create page");
+    }
 
-      // optimistic apply with the new position from the payload
-      let optimistic = treeModel.update(after, sourceId, {
-        position: payload.position,
-        parentPageId: payload.parentPageId,
-      } as Partial<SpaceTreeNode>);
+    const data = {
+      id: createdPage.id,
+      slugId: createdPage.slugId,
+      name: "",
+      position: createdPage.position,
+      spaceId: createdPage.spaceId,
+      parentPageId: createdPage.parentPageId,
+      children: [],
+    } as any;
 
-      // If the old parent has no children left, mark hasChildren: false so the
-      // chevron disappears. Without this, the empty parent keeps rendering an
-      // expand toggle that fetches zero rows on click.
-      if (oldParentId) {
-        const oldParent = treeModel.find(optimistic, oldParentId);
-        if (!oldParent?.children?.length) {
-          optimistic = treeModel.update(optimistic, oldParentId, {
-            hasChildren: false,
-          } as Partial<SpaceTreeNode>);
-        }
-      }
+    let lastIndex: number;
+    if (parentId === null) {
+      lastIndex = tree.data.length;
+    } else {
+      lastIndex = tree.find(parentId).children.length;
+    }
+    // to place the newly created node at the bottom
+    index = lastIndex;
 
-      // For make-child onto a previously-childless target: flip hasChildren on
-      // so the new parent shows its chevron.
-      if (op.kind === "make-child") {
-        optimistic = treeModel.update(optimistic, op.targetId, {
-          hasChildren: true,
-        } as Partial<SpaceTreeNode>);
-      }
+    tree.create({ parentId, index, data });
+    setData(tree.data);
 
-      setData(optimistic);
+    setTimeout(() => {
+      emit({
+        operation: "addTreeNode",
+        spaceId: spaceId,
+        payload: {
+          parentId,
+          index,
+          data,
+        },
+      });
+    }, 50);
 
-      try {
-        await movePageMutation.mutateAsync(payload);
-      } catch {
-        setData(before);
-        notifications.show({
-          message: t("Failed to move page"),
-          color: "red",
+    const pageUrl = buildPageUrl(
+      spaceSlug,
+      createdPage.slugId,
+      createdPage.title
+    );
+    navigate(pageUrl);
+    return data;
+  };
+
+  const onMove: MoveHandler<T> = async (args: {
+    dragIds: string[];
+    dragNodes: NodeApi<T>[];
+    parentId: string | null;
+    parentNode: NodeApi<T> | null;
+    index: number;
+  }) => {
+    const draggedNodeId = args.dragIds[0];
+
+    tree.move({
+      id: draggedNodeId,
+      parentId: args.parentId,
+      index: args.index,
+    });
+
+    const newDragIndex = tree.find(draggedNodeId)?.childIndex;
+
+    const currentTreeData = args.parentId
+      ? tree.find(args.parentId).children
+      : tree.data;
+
+    // if there is a parentId, tree.find(args.parentId).children returns a SimpleNode array
+    // we have to access the node differently via currentTreeData[args.index]?.data?.position
+    // this makes it possible to correctly sort children of a parent node that is not the root
+
+    const afterPosition =
+      // @ts-ignore
+      currentTreeData[newDragIndex - 1]?.position ||
+      // @ts-ignore
+      currentTreeData[args.index - 1]?.data?.position ||
+      null;
+
+    const beforePosition =
+      // @ts-ignore
+      currentTreeData[newDragIndex + 1]?.position ||
+      // @ts-ignore
+      currentTreeData[args.index + 1]?.data?.position ||
+      null;
+
+    let newPosition: string;
+
+    if (afterPosition && beforePosition && afterPosition === beforePosition) {
+      // if after is equal to before, put it next to the after node
+      newPosition = generateJitteredKeyBetween(afterPosition, null);
+    } else {
+      // if both are null then, it is the first index
+      newPosition = generateJitteredKeyBetween(afterPosition, beforePosition);
+    }
+
+    // update the node position in tree
+    tree.update({
+      id: draggedNodeId,
+      changes: { position: newPosition } as any,
+    });
+
+    const previousParent = args.dragNodes[0].parent;
+    if (
+      previousParent.id !== args.parentId &&
+      previousParent.id !== "__REACT_ARBORIST_INTERNAL_ROOT__"
+    ) {
+      // if the page was moved to another parent,
+      // check if the previous still has children
+      // if no children left, change 'hasChildren' to false, to make the page toggle arrows work properly
+      const childrenCount = previousParent.children.filter(
+        (child) => child.id !== draggedNodeId
+      ).length;
+      if (childrenCount === 0) {
+        tree.update({
+          id: previousParent.id,
+          changes: { ...previousParent.data, hasChildren: false } as any,
         });
-        return;
       }
+    }
 
-      const pageData: Partial<IPage> = {
-        id: source.id,
-        slugId: source.slugId,
-        title: source.name,
-        icon: source.icon,
-        position: payload.position,
-        spaceId: source.spaceId,
-        parentPageId: payload.parentPageId,
-        hasChildren: source.hasChildren,
-      };
+    setData(tree.data);
 
-      updateCacheOnMovePage(
-        spaceId,
-        sourceId,
-        oldParentId,
-        payload.parentPageId,
-        pageData,
-      );
+    const payload: IMovePage = {
+      pageId: draggedNodeId,
+      position: newPosition,
+      parentPageId: args.parentId,
+    };
+
+    const draggedNode = args.dragNodes[0];
+    const nodeData = draggedNode.data as SpaceTreeNode;
+    const oldParentId = nodeData.parentPageId ?? null;
+    const pageData = {
+      id: nodeData.id,
+      slugId: nodeData.slugId,
+      title: nodeData.name,
+      icon: nodeData.icon,
+      position: newPosition,
+      spaceId: nodeData.spaceId,
+      parentPageId: args.parentId,
+      hasChildren: nodeData.hasChildren,
+    };
+
+    try {
+      await movePageMutation.mutateAsync(payload);
+
+      updateCacheOnMovePage(spaceId, draggedNodeId, oldParentId, args.parentId, pageData);
 
       setTimeout(() => {
         emit({
           operation: "moveTreeNode",
           spaceId: spaceId,
           payload: {
-            id: sourceId,
-            parentId: payload.parentPageId,
+            id: draggedNodeId,
+            parentId: args.parentId,
             oldParentId,
-            index: result.index,
-            position: payload.position,
+            index: args.index,
+            position: newPosition,
             pageData,
           },
         });
       }, 50);
-    },
-    [setData, store, movePageMutation, spaceId, emit, t],
-  );
+    } catch (error) {
+      console.error("Error moving page:", error);
+    }
+  };
 
-  const handleCreate = useCallback(
-    async (parentId: string | null) => {
-      const payload: { spaceId: string; parentPageId?: string } = { spaceId };
-      if (parentId) payload.parentPageId = parentId;
+  const onRename: RenameHandler<T> = ({ name, id }) => {
+    tree.update({ id, changes: { name } as any });
+    setData(tree.data);
 
-      let createdPage: IPage;
-      try {
-        createdPage = await createPageMutation.mutateAsync(payload);
-      } catch {
-        throw new Error("Failed to create page");
-      }
+    try {
+      updatePageMutation.mutateAsync({ pageId: id, title: name });
+    } catch (error) {
+      console.error("Error updating page title:", error);
+    }
+  };
 
-      const newNode: SpaceTreeNode = {
-        id: createdPage.id,
-        slugId: createdPage.slugId,
-        name: "",
-        position: createdPage.position,
-        spaceId: createdPage.spaceId,
-        parentPageId: createdPage.parentPageId,
-        hasChildren: false,
-        children: [],
-      };
-
-      // Read latest tree at call time. Without this, callers that mutate the
-      // tree (e.g. lazy-load children on expand) immediately before calling
-      // handleCreate hit a stale closure and compute lastIndex against the
-      // pre-load tree, requiring a setTimeout-based wait at the call site.
-      const current = store.get(treeDataAtom);
-      let lastIndex: number;
-      if (parentId === null) {
-        lastIndex = current.length;
+  const isPageInNode = (
+    node: { data: SpaceTreeNode; children?: any[] },
+    pageSlug: string
+  ): boolean => {
+    if (node.data.slugId === pageSlug) {
+      return true;
+    }
+    for (const item of node.children) {
+      if (item.data.slugId === pageSlug) {
+        return true;
       } else {
-        const parent = treeModel.find(current, parentId);
-        lastIndex = parent?.children?.length ?? 0;
+        return isPageInNode(item, pageSlug);
+      }
+    }
+    return false;
+  };
+
+  const onDelete: DeleteHandler<T> = async (args: { ids: string[] }) => {
+    try {
+      await removePageMutation.mutateAsync(args.ids[0]);
+
+      const node = tree.find(args.ids[0]);
+      if (!node) {
+        return;
       }
 
-      setData((prev) => treeModel.insert(prev, parentId, newNode, lastIndex));
+      tree.drop({ id: args.ids[0] });
+      setData(tree.data);
+
+      if (pageSlug && isPageInNode(node, pageSlug.split("-")[1])) {
+        navigate(getSpaceUrl(spaceSlug));
+      }
 
       setTimeout(() => {
         emit({
-          operation: "addTreeNode",
-          spaceId,
-          payload: {
-            parentId,
-            index: lastIndex,
-            data: newNode,
-          },
+          operation: "deleteTreeNode",
+          spaceId: spaceId,
+          payload: { node: node.data },
         });
       }, 50);
+    } catch (error) {
+      console.error("Failed to delete page:", error);
+    }
+  };
 
-      const pageUrl = buildPageUrl(
-        spaceSlug,
-        createdPage.slugId,
-        createdPage.title,
-      );
-      navigate(pageUrl);
-    },
-    [spaceId, createPageMutation, setData, store, emit, navigate, spaceSlug],
-  );
-
-  const handleRename = useCallback(
-    async (id: string, name: string) => {
-      setData((prev) =>
-        treeModel.update(prev, id, { name } as Partial<SpaceTreeNode>),
-      );
-      try {
-        await updatePageMutation.mutateAsync({ pageId: id, title: name });
-      } catch (error) {
-        console.error("Error updating page title:", error);
-      }
-    },
-    [updatePageMutation, setData],
-  );
-
-  const handleDelete = useCallback(
-    async (id: string) => {
-      const node = treeModel.find(
-        store.get(treeDataAtom),
-        id,
-      ) as SpaceTreeNode | null;
-      const parentPageId = node?.parentPageId ?? null;
-      try {
-        await removePageMutation.mutateAsync(id);
-        setData((prev) => {
-          let next = treeModel.remove(prev, id);
-          // If the parent has no children left, mark hasChildren: false so the
-          // chevron disappears. Without this, the empty parent keeps rendering an
-          // expand toggle that fetches zero rows on click.
-          if (parentPageId) {
-            const parent = treeModel.find(next, parentPageId);
-            if (!parent?.children?.length) {
-              next = treeModel.update(next, parentPageId, {
-                hasChildren: false,
-              } as Partial<SpaceTreeNode>);
-            }
-          }
-          return next;
-        });
-
-        if (
-          node &&
-          pageSlug &&
-          (node.slugId === pageSlug.split("-")[1] ||
-            isPageInNode(node, pageSlug.split("-")[1]))
-        ) {
-          navigate(getSpaceUrl(spaceSlug));
-        }
-
-        setTimeout(() => {
-          if (!node) return;
-          emit({
-            operation: "deleteTreeNode",
-            spaceId,
-            payload: { node },
-          });
-        }, 50);
-      } catch (error) {
-        console.error("Failed to delete page:", error);
-      }
-    },
-    [removePageMutation, setData, store, pageSlug, navigate, spaceSlug, emit, spaceId],
-  );
-
-  return { handleMove, handleCreate, handleRename, handleDelete };
-}
-
-function isPageInNode(node: SpaceTreeNode, pageSlug: string): boolean {
-  if (node.slugId === pageSlug) return true;
-  if (!node.children) return false;
-  for (const child of node.children) {
-    if (isPageInNode(child, pageSlug)) return true;
-  }
-  return false;
+  const controllers = { onMove, onRename, onCreate, onDelete };
+  return { data, setData, controllers } as const;
 }

apps/client/src/features/page/tree/model/tree-model.test.ts

@@ -1,329 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { treeModel } from './tree-model';
-import type { TreeNode } from './tree-model.types';
-
-type N = TreeNode<{ name: string }>;
-
-const fixture: N[] = [
-  {
-    id: 'a',
-    name: 'A',
-    children: [
-      { id: 'a1', name: 'A1', children: [{ id: 'a1a', name: 'A1a' }] },
-      { id: 'a2', name: 'A2' },
-    ],
-  },
-  { id: 'b', name: 'B' },
-];
-
-describe('treeModel.find', () => {
-  it('finds a root node', () => {
-    expect(treeModel.find(fixture, 'a')?.name).toBe('A');
-  });
-  it('finds a deeply nested node', () => {
-    expect(treeModel.find(fixture, 'a1a')?.name).toBe('A1a');
-  });
-  it('returns null for unknown id', () => {
-    expect(treeModel.find(fixture, 'zzz')).toBeNull();
-  });
-});
-
-describe('treeModel.path', () => {
-  it('returns root-to-leaf path for nested id', () => {
-    const p = treeModel.path(fixture, 'a1a');
-    expect(p?.map((n) => n.id)).toEqual(['a', 'a1', 'a1a']);
-  });
-  it('returns [node] for root-level id', () => {
-    expect(treeModel.path(fixture, 'b')?.map((n) => n.id)).toEqual(['b']);
-  });
-  it('returns null for unknown id', () => {
-    expect(treeModel.path(fixture, 'zzz')).toBeNull();
-  });
-});
-
-describe('treeModel.siblingsOf', () => {
-  it('returns siblings + parent + index for a child', () => {
-    const info = treeModel.siblingsOf(fixture, 'a2');
-    expect(info?.parentId).toBe('a');
-    expect(info?.siblings.map((n) => n.id)).toEqual(['a1', 'a2']);
-    expect(info?.index).toBe(1);
-  });
-  it('returns parentId null + root siblings for a root id', () => {
-    const info = treeModel.siblingsOf(fixture, 'b');
-    expect(info?.parentId).toBeNull();
-    expect(info?.siblings.map((n) => n.id)).toEqual(['a', 'b']);
-    expect(info?.index).toBe(1);
-  });
-  it('returns null for unknown id', () => {
-    expect(treeModel.siblingsOf(fixture, 'zzz')).toBeNull();
-  });
-});
-
-describe('treeModel.isDescendant', () => {
-  it('returns true when descendantId is nested under ancestorId', () => {
-    expect(treeModel.isDescendant(fixture, 'a', 'a1a')).toBe(true);
-  });
-  it('returns false when ids are siblings', () => {
-    expect(treeModel.isDescendant(fixture, 'a1', 'a2')).toBe(false);
-  });
-  it('returns false when ancestorId is the same as descendantId', () => {
-    expect(treeModel.isDescendant(fixture, 'a', 'a')).toBe(false);
-  });
-  it('returns false for unknown ids', () => {
-    expect(treeModel.isDescendant(fixture, 'zzz', 'a')).toBe(false);
-  });
-});
-
-describe('treeModel.visible', () => {
-  it('returns only root nodes when no openIds', () => {
-    const v = treeModel.visible(fixture, new Set());
-    expect(v.map((n) => n.id)).toEqual(['a', 'b']);
-  });
-  it('includes children of open ids in DFS order', () => {
-    const v = treeModel.visible(fixture, new Set(['a']));
-    expect(v.map((n) => n.id)).toEqual(['a', 'a1', 'a2', 'b']);
-  });
-  it('recursively descends through chains of open ids', () => {
-    const v = treeModel.visible(fixture, new Set(['a', 'a1']));
-    expect(v.map((n) => n.id)).toEqual(['a', 'a1', 'a1a', 'a2', 'b']);
-  });
-  it('ignores openIds that are not in the tree', () => {
-    const v = treeModel.visible(fixture, new Set(['ghost']));
-    expect(v.map((n) => n.id)).toEqual(['a', 'b']);
-  });
-});
-
-describe('treeModel.insert', () => {
-  const leaf = (id: string): N => ({ id, name: id.toUpperCase() });
-
-  it('inserts at end when index is undefined', () => {
-    const t = treeModel.insert(fixture, 'a', leaf('a3'));
-    expect(treeModel.siblingsOf(t, 'a3')?.siblings.map((n) => n.id)).toEqual([
-      'a1', 'a2', 'a3',
-    ]);
-  });
-  it('inserts at index 0', () => {
-    const t = treeModel.insert(fixture, 'a', leaf('a0'), 0);
-    expect(treeModel.siblingsOf(t, 'a0')?.siblings.map((n) => n.id)).toEqual([
-      'a0', 'a1', 'a2',
-    ]);
-  });
-  it('inserts in the middle', () => {
-    const t = treeModel.insert(fixture, 'a', leaf('a1half'), 1);
-    expect(
-      treeModel.siblingsOf(t, 'a1half')?.siblings.map((n) => n.id),
-    ).toEqual(['a1', 'a1half', 'a2']);
-  });
-  it('inserts at root when parentId is null', () => {
-    const t = treeModel.insert(fixture, null, leaf('c'));
-    expect(t.map((n) => n.id)).toEqual(['a', 'b', 'c']);
-  });
-  it('returns same array reference for unknown parentId', () => {
-    const t = treeModel.insert(fixture, 'ghost', leaf('zz'));
-    expect(t).toBe(fixture);
-  });
-  it('initializes children array when parent had no children', () => {
-    const t = treeModel.insert(fixture, 'b', leaf('b1'));
-    expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['b1']);
-  });
-});
-
-describe('treeModel.remove', () => {
-  it('removes a leaf', () => {
-    const t = treeModel.remove(fixture, 'a2');
-    expect(treeModel.find(t, 'a2')).toBeNull();
-  });
-  it('removes a subtree', () => {
-    const t = treeModel.remove(fixture, 'a1');
-    expect(treeModel.find(t, 'a1')).toBeNull();
-    expect(treeModel.find(t, 'a1a')).toBeNull();
-  });
-  it('removes a root node', () => {
-    const t = treeModel.remove(fixture, 'b');
-    expect(t.map((n) => n.id)).toEqual(['a']);
-  });
-  it('returns same array reference for unknown id', () => {
-    expect(treeModel.remove(fixture, 'ghost')).toBe(fixture);
-  });
-});
-
-describe('treeModel.update', () => {
-  it('shallow-merges a patch on the matching node', () => {
-    const t = treeModel.update(fixture, 'a1', { name: 'A1-renamed' });
-    expect(treeModel.find(t, 'a1')?.name).toBe('A1-renamed');
-  });
-  it('returns same array reference for unknown id', () => {
-    expect(treeModel.update(fixture, 'ghost', { name: 'x' })).toBe(fixture);
-  });
-  it("preserves children when patching parent's own fields", () => {
-    const t = treeModel.update(fixture, 'a', { name: 'A-renamed' });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a1', 'a2',
-    ]);
-  });
-  it('preserves reference identity of unrelated subtrees', () => {
-    const t = treeModel.update(fixture, 'a1', { name: 'X' });
-    expect(t[1]).toBe(fixture[1]);
-  });
-});
-
-describe('treeModel.appendChildren', () => {
-  const kid = (id: string): N => ({ id, name: id });
-
-  it('appends to existing children', () => {
-    const t = treeModel.appendChildren(fixture, 'a', [kid('a3'), kid('a4')]);
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a1', 'a2', 'a3', 'a4',
-    ]);
-  });
-  it('initializes children when parent had none', () => {
-    const t = treeModel.appendChildren(fixture, 'b', [kid('b1')]);
-    expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['b1']);
-  });
-  it('returns same array reference for unknown parentId', () => {
-    expect(treeModel.appendChildren(fixture, 'ghost', [kid('zz')])).toBe(
-      fixture,
-    );
-  });
-
-  // Regression: lazy-load + auto-expand can race and call appendChildren with
-  // children that overlap what's already there. React then crashes on duplicate
-  // keys. Defensive dedup at the model level.
-  it('dedups against existing children by id', () => {
-    const t1 = treeModel.appendChildren(fixture, 'a', [
-      kid('a3'),
-      kid('a4'),
-    ]);
-    const t2 = treeModel.appendChildren(t1, 'a', [
-      kid('a3'),
-      kid('a4'),
-      kid('a5'),
-    ]);
-    expect(treeModel.find(t2, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a1', 'a2', 'a3', 'a4', 'a5',
-    ]);
-  });
-
-  it('returns same array reference when every child is a duplicate', () => {
-    const t1 = treeModel.appendChildren(fixture, 'a', [kid('a3')]);
-    const t2 = treeModel.appendChildren(t1, 'a', [kid('a3')]);
-    expect(t2).toBe(t1);
-  });
-});
-
-describe('treeModel.place', () => {
-  it('moves a node to a new parent at a given index', () => {
-    const t = treeModel.place(fixture, 'a2', { parentId: 'b', index: 0 });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual(['a1']);
-    expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['a2']);
-  });
-  it('moves a node to root', () => {
-    const t = treeModel.place(fixture, 'a1', { parentId: null, index: 0 });
-    expect(t.map((n) => n.id)).toEqual(['a1', 'a', 'b']);
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual(['a2']);
-  });
-  it('reorders within the same parent', () => {
-    const t = treeModel.place(fixture, 'a2', { parentId: 'a', index: 0 });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a2', 'a1',
-    ]);
-  });
-  it('returns same array reference for unknown source', () => {
-    expect(
-      treeModel.place(fixture, 'ghost', { parentId: 'a', index: 0 }),
-    ).toBe(fixture);
-  });
-  it('returns same array reference for unknown destination parent', () => {
-    expect(
-      treeModel.place(fixture, 'a1', { parentId: 'ghost', index: 0 }),
-    ).toBe(fixture);
-  });
-});
-
-describe('treeModel.move', () => {
-  it('reorder-before within same parent: moves source to target index', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'a2', {
-      kind: 'reorder-before',
-      targetId: 'a1',
-    });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a2', 'a1',
-    ]);
-    expect(result).toEqual({ parentId: 'a', index: 0 });
-  });
-  it('reorder-after within same parent', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'a1', {
-      kind: 'reorder-after',
-      targetId: 'a2',
-    });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a2', 'a1',
-    ]);
-    expect(result).toEqual({ parentId: 'a', index: 1 });
-  });
-  it('make-child appends at end of target children', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'b', {
-      kind: 'make-child',
-      targetId: 'a',
-    });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a1', 'a2', 'b',
-    ]);
-    expect(result).toEqual({ parentId: 'a', index: 2 });
-  });
-  it('make-child initializes children when target had none', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'a2', {
-      kind: 'make-child',
-      targetId: 'b',
-    });
-    expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['a2']);
-    expect(result).toEqual({ parentId: 'b', index: 0 });
-  });
-  it('reorder-before across parents', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'b', {
-      kind: 'reorder-before',
-      targetId: 'a1',
-    });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'b', 'a1', 'a2',
-    ]);
-    expect(result).toEqual({ parentId: 'a', index: 0 });
-  });
-  it('reorder-after to root', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'a1', {
-      kind: 'reorder-after',
-      targetId: 'a',
-    });
-    expect(t.map((n) => n.id)).toEqual(['a', 'a1', 'b']);
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual(['a2']);
-    expect(result).toEqual({ parentId: null, index: 1 });
-  });
-  it('no-op when sourceId === targetId', () => {
-    const out = treeModel.move(fixture, 'a', {
-      kind: 'make-child',
-      targetId: 'a',
-    });
-    expect(out.tree).toBe(fixture);
-  });
-  it('no-op when target is descendant of source', () => {
-    const out = treeModel.move(fixture, 'a', {
-      kind: 'make-child',
-      targetId: 'a1a',
-    });
-    expect(out.tree).toBe(fixture);
-  });
-  it('no-op when source is unknown', () => {
-    const out = treeModel.move(fixture, 'ghost', {
-      kind: 'reorder-before',
-      targetId: 'a',
-    });
-    expect(out.tree).toBe(fixture);
-  });
-  it('no-op when target is unknown', () => {
-    const out = treeModel.move(fixture, 'a1', {
-      kind: 'reorder-before',
-      targetId: 'ghost',
-    });
-    expect(out.tree).toBe(fixture);
-  });
-});

apps/client/src/features/page/tree/model/tree-model.ts

@@ -1,222 +0,0 @@
-import type { TreeNode, SiblingsInfo } from './tree-model.types';
-
-function findInternal<T extends object>(
-  nodes: TreeNode<T>[],
-  id: string,
-): { parents: TreeNode<T>[]; node: TreeNode<T> } | null {
-  for (const node of nodes) {
-    if (node.id === id) return { parents: [], node };
-    if (node.children) {
-      const inner = findInternal(node.children, id);
-      if (inner) return { parents: [node, ...inner.parents], node: inner.node };
-    }
-  }
-  return null;
-}
-
-export const treeModel = {
-  find<T extends object>(tree: TreeNode<T>[], id: string): TreeNode<T> | null {
-    return findInternal(tree, id)?.node ?? null;
-  },
-
-  path<T extends object>(tree: TreeNode<T>[], id: string): TreeNode<T>[] | null {
-    const found = findInternal(tree, id);
-    if (!found) return null;
-    return [...found.parents, found.node];
-  },
-
-  siblingsOf<T extends object>(
-    tree: TreeNode<T>[],
-    id: string,
-  ): SiblingsInfo<T> | null {
-    const found = findInternal(tree, id);
-    if (!found) return null;
-    const parent = found.parents[found.parents.length - 1];
-    const siblings = parent ? parent.children! : tree;
-    return {
-      parentId: parent?.id ?? null,
-      siblings,
-      index: siblings.findIndex((n) => n.id === id),
-    };
-  },
-
-  isDescendant<T extends object>(
-    tree: TreeNode<T>[],
-    ancestorId: string,
-    descendantId: string,
-  ): boolean {
-    if (ancestorId === descendantId) return false;
-    const ancestor = treeModel.find(tree, ancestorId);
-    if (!ancestor?.children) return false;
-    return findInternal(ancestor.children, descendantId) !== null;
-  },
-
-  visible<T extends object>(
-    tree: TreeNode<T>[],
-    openIds: ReadonlySet<string>,
-  ): TreeNode<T>[] {
-    const out: TreeNode<T>[] = [];
-    const walk = (nodes: TreeNode<T>[]) => {
-      for (const node of nodes) {
-        out.push(node);
-        if (openIds.has(node.id) && node.children?.length) walk(node.children);
-      }
-    };
-    walk(tree);
-    return out;
-  },
-
-  insert<T extends object>(
-    tree: TreeNode<T>[],
-    parentId: string | null,
-    node: TreeNode<T>,
-    index?: number,
-  ): TreeNode<T>[] {
-    if (parentId === null) {
-      const idx = index ?? tree.length;
-      return [...tree.slice(0, idx), node, ...tree.slice(idx)];
-    }
-    let touched = false;
-    const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] =>
-      nodes.map((n) => {
-        if (n.id === parentId) {
-          touched = true;
-          const kids = n.children ?? [];
-          const idx = index ?? kids.length;
-          return {
-            ...n,
-            children: [...kids.slice(0, idx), node, ...kids.slice(idx)],
-          };
-        }
-        if (n.children) {
-          const next = walk(n.children);
-          if (next !== n.children) return { ...n, children: next };
-        }
-        return n;
-      });
-    const out = walk(tree);
-    return touched ? out : tree;
-  },
-
-  remove<T extends object>(tree: TreeNode<T>[], id: string): TreeNode<T>[] {
-    let touched = false;
-    const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] => {
-      const filtered = nodes.filter((n) => {
-        if (n.id === id) {
-          touched = true;
-          return false;
-        }
-        return true;
-      });
-      return filtered.map((n) => {
-        if (n.children) {
-          const next = walk(n.children);
-          if (next !== n.children) return { ...n, children: next };
-        }
-        return n;
-      });
-    };
-    const out = walk(tree);
-    return touched ? out : tree;
-  },
-
-  // `patch` excludes `id` (immutable) and `children` (use insert / remove /
-  // appendChildren for structural changes — otherwise referential identity of
-  // unrelated subtrees gets blown away).
-  update<T extends object>(
-    tree: TreeNode<T>[],
-    id: string,
-    patch: Omit<Partial<T>, "id" | "children">,
-  ): TreeNode<T>[] {
-    let touched = false;
-    const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] =>
-      nodes.map((n) => {
-        if (n.id === id) {
-          touched = true;
-          return { ...n, ...patch };
-        }
-        if (n.children) {
-          const next = walk(n.children);
-          if (next !== n.children) return { ...n, children: next };
-        }
-        return n;
-      });
-    const out = walk(tree);
-    return touched ? out : tree;
-  },
-
-  appendChildren<T extends object>(
-    tree: TreeNode<T>[],
-    parentId: string,
-    children: TreeNode<T>[],
-  ): TreeNode<T>[] {
-    let touched = false;
-    const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] =>
-      nodes.map((n) => {
-        if (n.id === parentId) {
-          const existing = n.children ?? [];
-          // Dedup against existing ids — auto-expand + manual toggle can race
-          // and produce overlapping fetches; we don't want React to see two
-          // children with the same key.
-          const existingIds = new Set(existing.map((c) => c.id));
-          const fresh = children.filter((c) => !existingIds.has(c.id));
-          if (fresh.length === 0) return n;
-          touched = true;
-          return { ...n, children: [...existing, ...fresh] };
-        }
-        if (n.children) {
-          const next = walk(n.children);
-          if (next !== n.children) return { ...n, children: next };
-        }
-        return n;
-      });
-    const out = walk(tree);
-    return touched ? out : tree;
-  },
-
-  place<T extends object>(
-    tree: TreeNode<T>[],
-    sourceId: string,
-    to: { parentId: string | null; index: number },
-  ): TreeNode<T>[] {
-    const source = treeModel.find(tree, sourceId);
-    if (!source) return tree;
-    if (to.parentId !== null && !treeModel.find(tree, to.parentId)) return tree;
-    const removed = treeModel.remove(tree, sourceId);
-    return treeModel.insert(removed, to.parentId, source, to.index);
-  },
-
-  move<T extends object>(
-    tree: TreeNode<T>[],
-    sourceId: string,
-    op: import('./tree-model.types').DropOp,
-  ): { tree: TreeNode<T>[]; result: import('./tree-model.types').DropResult } {
-    if (sourceId === op.targetId) return { tree, result: { parentId: null, index: 0 } };
-    if (!treeModel.find(tree, sourceId) || !treeModel.find(tree, op.targetId)) {
-      return { tree, result: { parentId: null, index: 0 } };
-    }
-    if (treeModel.isDescendant(tree, sourceId, op.targetId)) {
-      return { tree, result: { parentId: null, index: 0 } };
-    }
-
-    let parentId: string | null;
-    let index: number;
-
-    if (op.kind === 'make-child') {
-      parentId = op.targetId;
-      const target = treeModel.find(tree, op.targetId)!;
-      index = target.children?.length ?? 0;
-    } else {
-      const info = treeModel.siblingsOf(tree, op.targetId)!;
-      parentId = info.parentId;
-      const sourceInfo = treeModel.siblingsOf(tree, sourceId)!;
-      const sameParent = sourceInfo.parentId === parentId;
-      const adjust =
-        sameParent && sourceInfo.index < info.index ? -1 : 0;
-      index = info.index + adjust + (op.kind === 'reorder-after' ? 1 : 0);
-    }
-
-    const next = treeModel.place(tree, sourceId, { parentId, index });
-    return { tree: next, result: { parentId, index } };
-  },
-};

apps/client/src/features/page/tree/model/tree-model.types.ts

@@ -1,20 +0,0 @@
-export type TreeNode<T extends object = object> = T & {
-  id: string;
-  children?: TreeNode<T>[];
-};
-
-export type DropOp =
-  | { kind: 'reorder-before'; targetId: string }
-  | { kind: 'reorder-after'; targetId: string }
-  | { kind: 'make-child'; targetId: string };
-
-export type DropResult = {
-  parentId: string | null;
-  index: number;
-};
-
-export type SiblingsInfo<T extends object> = {
-  parentId: string | null;
-  siblings: TreeNode<T>[];
-  index: number;
-};

apps/client/src/features/page/tree/styles/tree.module.css

@@ -5,11 +5,10 @@
 .treeContainer {
     height: 100%;
     min-width: 0;
-    /* DocTree renders a vanilla <ul role="tree"> with no internal virtualizer,
-       so the container must own the scroll. Without this the tree grows past
-       its parent and the page scrolls instead. */
-    overflow-y: auto;
-    overflow-x: hidden;
+
+    > div, > div > .tree {
+        height: 100% !important;
+    }
 }
 
 .node {
@@ -18,39 +17,76 @@
     display: flex;
     align-items: center;
     height: 100%;
-    width: 100%;
+    width: 93%; /* not to overlap with scroll bar */
     text-decoration: none;
     color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
 
-    /* Gate hover styles to mouse-capable devices. Touch browsers synthesize
-       :hover on the first tap (sticky hover) and only fire click on the
-       second tap, requiring a double-tap to navigate. */
-    @media (hover: hover) {
-        &:hover {
-            background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
-        }
+    &:hover {
+        background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+        /*background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));*/
+     }
 
-        &:hover .actions {
-            opacity: 1;
-            pointer-events: auto;
-        }
-    }
 
     .actions {
-        display: inline-flex;
-        flex-shrink: 0;
-        align-items: center;
-        margin-left: 4px;
-        opacity: 0;
-        pointer-events: none;
+        visibility: hidden;
+        position: absolute;
+        height: 100%;
+        top: 0;
+        right: 0;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
     }
 
-    &:focus-within .actions {
-        opacity: 1;
-        pointer-events: auto;
+      &:hover .actions {
+       visibility: visible;
     }
+
 }
 
+.node:global(.willReceiveDrop) {
+    background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-gray-7));
+}
+
+.node:global(.isSelected) {
+    border-radius: 0;
+
+    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
+/*
+    color: white;
+
+ // background-color: light-dark(
+  //  var(--mantine-color-gray-0),
+   // var(--mantine-color-dark-6)
+  //);
+  //background: rgb(20, 127, 250, 0.5);*/
+}
+
+.node:global(.isSelectedStart.isSelectedEnd) {
+    border-radius: 4px;
+}
+
+.row:focus .node:global(.isSelected) {
+    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+
+.row:focus .node:global(.isFocused) {
+    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+
+.row {
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.row:focus {
+    outline: none;
+}
+
+.row:focus .node {
+    /** come back to this **/
+   /* background-color: light-dark(var(--mantine-color-red-2), var(--mantine-color-dark-5));*/
+}
 
 .icon {
     margin: 0 rem(10px);
@@ -59,12 +95,8 @@
 
 .text {
     flex: 1;
-    /* min-width: 0 lets a flex child shrink below its content size — required
-       for text-overflow: ellipsis on flex items. */
-    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
     font-size: rem(14px);
     font-weight: 500;
 }
@@ -76,113 +108,3 @@
 [role="treeitem"] {
     padding-bottom: 2px;
 }
-
-/* Strip the browser's default <ul> bullet + indent from the DocTree
-   <ul role="tree"> and nested <ul role="group"> nodes. The tree's own indent
-   is driven by paddingLeft on .rowWrapper. */
-[role="tree"],
-[role="tree"] [role="group"] {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-/* ---- pragmatic-tree additions ---- */
-
-.rowWrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    border-radius: 4px;
-}
-
-.node[data-dragging="true"] {
-    opacity: 0.4;
-}
-
-.node:focus-visible {
-    outline: 2px solid light-dark(
-        var(--mantine-color-blue-5),
-        var(--mantine-color-blue-4)
-    );
-    outline-offset: -2px;
-}
-
-.node :focus-visible {
-    outline-offset: -2px;
-}
-
-.node[data-selected="true"] {
-    background-color: light-dark(
-        var(--mantine-color-gray-3),
-        var(--mantine-color-dark-6)
-    );
-}
-
-.node[data-selected="true"] .actions {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.node[data-receiving-drop="make-child"] {
-    background-color: light-dark(
-        var(--mantine-color-blue-1),
-        rgba(56, 139, 253, 0.15)
-    );
-    outline: 2px solid light-dark(
-        var(--mantine-color-blue-5),
-        var(--mantine-color-blue-7)
-    );
-    outline-offset: -1px;
-}
-
-.node[data-receiving-drop="make-child-blocked"] {
-    outline-color: light-dark(
-        var(--mantine-color-red-5),
-        var(--mantine-color-red-7)
-    );
-}
-
-.dropLine {
-    position: absolute;
-    left: var(--drop-line-indent, 0);
-    right: 8px;
-    height: 2px;
-    background: light-dark(
-        var(--mantine-color-blue-5),
-        var(--mantine-color-blue-4)
-    );
-    pointer-events: none;
-    z-index: 1;
-}
-
-.dropLine::before {
-    content: "";
-    position: absolute;
-    left: -4px;
-    top: -3px;
-    width: 8px;
-    height: 8px;
-    border: 2px solid currentColor;
-    border-radius: 50%;
-    color: light-dark(
-        var(--mantine-color-blue-5),
-        var(--mantine-color-blue-4)
-    );
-    background: var(--mantine-color-body);
-}
-
-.dropLine[data-blocked="true"] {
-    background: light-dark(
-        var(--mantine-color-red-5),
-        var(--mantine-color-red-4)
-    );
-}
-
-.dropLine[data-edge="top"] {
-    top: -1px;
-}
-
-.dropLine[data-edge="bottom"] {
-    bottom: -1px;
-}

apps/client/src/features/share/atoms/open-shared-tree-nodes-atom.ts

@@ -1,3 +0,0 @@
-import { atom } from "jotai";
-
-export const openSharedTreeNodesAtom = atom<Record<string, boolean>>({});

apps/client/src/features/share/components/shared-tree.tsx

@@ -1,11 +1,14 @@
 import { ISharedPageTree } from "@/features/share/types/share.types.ts";
+import { NodeApi, NodeRendererProps, Tree, TreeApi } from "react-arborist";
 import {
   buildSharedPageTree,
   SharedPageTreeNode,
 } from "@/features/share/utils.ts";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useElementSize, useMergedRef } from "@mantine/hooks";
+import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { Link, useParams } from "react-router-dom";
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai/index";
 import { useTranslation } from "react-i18next";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import clsx from "clsx";
@@ -17,204 +20,176 @@ import {
 } from "@tabler/icons-react";
 import { ActionIcon, Box } from "@mantine/core";
 import { extractPageSlugId } from "@/lib";
+import { OpenMap } from "react-arborist/dist/main/state/open-slice";
 import classes from "@/features/page/tree/styles/tree.module.css";
 import styles from "./share.module.css";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import EmojiPicker from "@/components/ui/emoji-picker.tsx";
-import {
-  DocTree,
-  type DocTreeApi,
-  type RenderRowProps,
-} from "@/features/page/tree/components/doc-tree";
-import { openSharedTreeNodesAtom } from "@/features/share/atoms/open-shared-tree-nodes-atom";
 
-interface SharedTreeProps {
+interface SharedTree {
   sharedPageTree: ISharedPageTree;
 }
 
-export default function SharedTree({ sharedPageTree }: SharedTreeProps) {
-  const { t } = useTranslation();
-  const treeRef = useRef<DocTreeApi | null>(null);
+const openSharedTreeNodesAtom = atom<OpenMap>({});
+
+export default function SharedTree({ sharedPageTree }: SharedTree) {
+  const [tree, setTree] = useState<
+    TreeApi<SharedPageTreeNode> | null | undefined
+  >(null);
+  const rootElement = useRef<HTMLDivElement>();
+  const { ref: sizeRef, width, height } = useElementSize();
+  const mergedRef = useMergedRef(rootElement, sizeRef);
   const { pageSlug } = useParams();
-  const [openTreeNodes, setOpenTreeNodes] = useAtom(openSharedTreeNodesAtom);
+  const [openTreeNodes, setOpenTreeNodes] = useAtom<OpenMap>(
+    openSharedTreeNodesAtom,
+  );
 
   const currentNodeId = extractPageSlugId(pageSlug);
 
   const treeData: SharedPageTreeNode[] = useMemo(() => {
-    if (!sharedPageTree?.pageTree) return [] as SharedPageTreeNode[];
+    if (!sharedPageTree?.pageTree) return;
     return buildSharedPageTree(sharedPageTree.pageTree);
   }, [sharedPageTree?.pageTree]);
 
-  const openIds = useMemo(
-    () =>
-      new Set(
-        Object.keys(openTreeNodes).filter((k) => openTreeNodes[k]),
-      ),
-    [openTreeNodes],
-  );
-
   useEffect(() => {
-    // Auto-open the first level of the shared tree on initial load.
-    const root = treeData?.[0];
-    if (!root) return;
-    setOpenTreeNodes((prev) => {
-      if (prev[root.slugId]) return prev;
-      const next = { ...prev, [root.slugId]: true };
-      for (const child of root.children ?? []) {
-        next[child.slugId] = true;
-      }
-      return next;
-    });
-  }, [treeData, setOpenTreeNodes]);
+    const parentNodeId = treeData?.[0]?.slugId;
 
-  useEffect(() => {
-    if (currentNodeId) {
-      treeRef.current?.select(currentNodeId, { scrollIntoView: true });
+    if (parentNodeId && tree) {
+      const parentNode = tree.get(parentNodeId);
+
+      setTimeout(() => {
+        if (parentNode) {
+          tree.openSiblings(parentNode);
+        }
+      });
+
+      // open direct children of parent node
+      parentNode?.children.forEach((node) => {
+        tree.openSiblings(node);
+      });
     }
-  }, [currentNodeId, treeData]);
+  }, [treeData, tree]);
 
-  // Stable callbacks so memo(DocTreeRow) actually saves work — see I2 in the
-  // post-implementation code review.
-  const handleToggle = useCallback(
-    (id: string, isOpen: boolean) =>
-      setOpenTreeNodes((prev) => ({ ...prev, [id]: isOpen })),
-    [setOpenTreeNodes],
-  );
-  const getDragLabel = useCallback(
-    (n: SharedPageTreeNode) => n.name || "untitled",
-    [],
-  );
+  useEffect(() => {
+    if (currentNodeId && tree) {
+      setTimeout(() => {
+        // focus on node and open all parents
+        tree?.select(currentNodeId, { align: "auto" });
+      }, 200);
+    } else {
+      tree?.deselectAll();
+    }
+  }, [currentNodeId, tree]);
 
   if (!sharedPageTree || !sharedPageTree?.pageTree) {
     return null;
   }
 
   return (
-    <div className={classes.treeContainer}>
-      <DocTree<SharedPageTreeNode>
-        readOnly
-        ref={treeRef}
-        data={treeData}
-        openIds={openIds}
-        selectedId={currentNodeId}
-        renderRow={SharedTreeRow}
-        onMove={noopMove}
-        onToggle={handleToggle}
-        getDragLabel={getDragLabel}
-        aria-label={t("Pages")}
-      />
+    <div ref={mergedRef} className={classes.treeContainer}>
+      {rootElement.current && (
+        <Tree
+          data={treeData}
+          disableDrag={true}
+          disableDrop={true}
+          disableEdit={true}
+          width={width}
+          height={rootElement.current.clientHeight}
+          ref={(t) => setTree(t)}
+          openByDefault={false}
+          disableMultiSelection={true}
+          className={classes.tree}
+          rowClassName={classes.row}
+          rowHeight={30}
+          overscanCount={10}
+          dndRootElement={rootElement.current}
+          onToggle={() => {
+            setOpenTreeNodes(tree?.openState);
+          }}
+          initialOpenState={openTreeNodes}
+          onClick={(e) => {
+            if (tree && tree.focusedNode) {
+              tree.select(tree.focusedNode);
+            }
+          }}
+        >
+          {Node}
+        </Tree>
+      )}
     </div>
   );
 }
 
-// Module-scope noop so it's a stable reference across renders.
-const noopMove = () => {};
-
-function SharedTreeRow({
-  node,
-  isOpen,
-  hasChildren,
-  isSelected,
-  rowRef,
-  tabIndex,
-  treeItemProps,
-  toggleOpen,
-}: RenderRowProps<SharedPageTreeNode>) {
+function Node({ node, style, tree }: NodeRendererProps<any>) {
   const { shareId } = useParams();
   const { t } = useTranslation();
   const [, setMobileSidebarState] = useAtom(mobileSidebarAtom);
 
   const pageUrl = buildSharedPageUrl({
     shareId: shareId,
-    pageSlugId: node.slugId,
-    pageTitle: node.name,
+    pageSlugId: node.data.slugId,
+    pageTitle: node.data.name,
   });
 
   return (
-    <Box
-      ref={rowRef as React.Ref<HTMLAnchorElement>}
-      tabIndex={tabIndex}
-      {...treeItemProps}
-      data-selected={isSelected || undefined}
-      className={clsx(classes.node, styles.treeNode)}
-      component={Link}
-      to={pageUrl}
-      onClick={() => {
-        setMobileSidebarState(false);
-      }}
-    >
-      <SharedPageArrow
-        isOpen={isOpen}
-        hasChildren={hasChildren}
-        onToggle={toggleOpen}
-      />
-      <div style={{ marginRight: "4px" }}>
-        <EmojiPicker
-          onEmojiSelect={() => {}}
-          icon={
-            node.icon ? (
-              node.icon
-            ) : (
-              <IconFileDescription size="18" />
-            )
-          }
-          readOnly={true}
-          removeEmojiAction={() => {}}
-          actionIconProps={{ tabIndex: -1 }}
-        />
-      </div>
-      <span className={classes.text}>{node.name || t("untitled")}</span>
-    </Box>
+    <>
+      <Box
+        style={style}
+        className={clsx(classes.node, node.state, styles.treeNode)}
+        component={Link}
+        to={pageUrl}
+        onClick={() => {
+          setMobileSidebarState(false);
+        }}
+      >
+        <PageArrow node={node} />
+        <div style={{ marginRight: "4px" }}>
+          <EmojiPicker
+            onEmojiSelect={() => {}}
+            icon={
+              node.data.icon ? (
+                node.data.icon
+              ) : (
+                <IconFileDescription size="18" />
+              )
+            }
+            readOnly={true}
+            removeEmojiAction={() => {}}
+          />
+        </div>
+        <span className={classes.text}>{node.data.name || t("untitled")}</span>
+      </Box>
+    </>
   );
 }
 
-interface SharedPageArrowProps {
-  isOpen: boolean;
-  hasChildren: boolean;
-  onToggle: () => void;
+interface PageArrowProps {
+  node: NodeApi<SpaceTreeNode>;
 }
 
-function SharedPageArrow({
-  isOpen,
-  hasChildren,
-  onToggle,
-}: SharedPageArrowProps) {
-  if (!hasChildren) {
-    return (
-      <span
-        aria-hidden
-        style={{
-          width: 20,
-          height: 20,
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "var(--mantine-color-gray-6)",
-          flexShrink: 0,
-        }}
-      >
-        <IconPointFilled size={4} />
-      </span>
-    );
-  }
-
+function PageArrow({ node }: PageArrowProps) {
   return (
     <ActionIcon
       size={20}
       variant="subtle"
       c="gray"
-      tabIndex={-1}
       onClick={(e) => {
         e.preventDefault();
         e.stopPropagation();
-        onToggle();
+        node.toggle();
       }}
     >
-      {isOpen ? (
-        <IconChevronDown stroke={2} size={16} />
-      ) : (
-        <IconChevronRight stroke={2} size={16} />
-      )}
+      {node.isInternal ? (
+        node.children && (node.children.length > 0 || node.data.hasChildren) ? (
+          node.isOpen ? (
+            <IconChevronDown stroke={2} size={16} />
+          ) : (
+            <IconChevronRight stroke={2} size={16} />
+          )
+        ) : (
+          <IconPointFilled size={4} />
+        )
+      ) : null}
     </ActionIcon>
   );
 }

apps/client/src/features/space/components/sidebar/space-sidebar.tsx

@@ -28,7 +28,7 @@ import {
 import classes from "./space-sidebar.module.css";
 import React from "react";
 import { useAtom } from "jotai";
-import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
+import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import { Link, useLocation, useParams } from "react-router-dom";
 import clsx from "clsx";
 import { useDisclosure } from "@mantine/hooks";
@@ -56,6 +56,7 @@ import { searchSpotlight } from "@/features/search/constants";
 
 export function SpaceSidebar() {
   const { t } = useTranslation();
+  const [tree] = useAtom(treeApiAtom);
   const location = useLocation();
   const [opened, { open: openSettings, close: closeSettings }] =
     useDisclosure(false);
@@ -67,14 +68,13 @@ export function SpaceSidebar() {
 
   const spaceRules = space?.membership?.permissions;
   const spaceAbility = useSpaceAbility(spaceRules);
-  const { handleCreate } = useTreeMutation(space?.id ?? "");
 
   if (!space) {
     return <></>;
   }
 
   function handleCreatePage() {
-    handleCreate(null);
+    tree?.create({ parentId: null, type: "internal", index: 0 });
   }
 
   return (

apps/client/src/features/websocket/use-tree-socket.ts

@@ -1,27 +1,37 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { socketAtom } from "@/features/websocket/atoms/socket-atom.ts";
 import { useAtom } from "jotai";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
 import { WebSocketEvent } from "@/features/websocket/types";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { useQueryClient } from "@tanstack/react-query";
-import { treeModel } from "@/features/page/tree/model/tree-model";
+import { SimpleTree } from "react-arborist";
 import localEmitter from "@/lib/local-emitter.ts";
 
 export const useTreeSocket = () => {
   const [socket] = useAtom(socketAtom);
-  const [, setTreeData] = useAtom(treeDataAtom);
+  const [treeData, setTreeData] = useAtom(treeDataAtom);
   const queryClient = useQueryClient();
+  const initialTreeData = useRef(treeData);
+
+  useEffect(() => {
+    initialTreeData.current = treeData;
+  }, [treeData]);
 
   useEffect(() => {
     const updateNodeName = (event) => {
-      if (event.payload?.title === undefined) return;
-      setTreeData((prev) => {
-        if (!treeModel.find(prev, event?.id)) return prev;
-        return treeModel.update(prev, event.id, {
-          name: event.payload.title,
-        } as Partial<SpaceTreeNode>);
-      });
+      const initialData = initialTreeData.current;
+      const treeApi = new SimpleTree<SpaceTreeNode>(initialData);
+
+      if (treeApi.find(event?.id)) {
+        if (event.payload?.title !== undefined) {
+          treeApi.update({
+            id: event.id,
+            changes: { name: event.payload.title },
+          });
+          setTreeData(treeApi.data);
+        }
+      }
     };
 
     localEmitter.on("message", updateNodeName);
@@ -32,110 +42,70 @@ export const useTreeSocket = () => {
 
   useEffect(() => {
     socket?.on("message", (event: WebSocketEvent) => {
+      const initialData = initialTreeData.current;
+      const treeApi = new SimpleTree<SpaceTreeNode>(initialData);
+
       switch (event.operation) {
         case "updateOne":
           if (event.entity[0] === "pages") {
-            setTreeData((prev) => {
-              if (!treeModel.find(prev, event.id)) return prev;
-              let next = prev;
+            if (treeApi.find(event.id)) {
               if (event.payload?.title !== undefined) {
-                next = treeModel.update(next, event.id, {
-                  name: event.payload.title,
-                } as Partial<SpaceTreeNode>);
+                treeApi.update({
+                  id: event.id,
+                  changes: { name: event.payload.title },
+                });
               }
               if (event.payload?.icon !== undefined) {
-                next = treeModel.update(next, event.id, {
-                  icon: event.payload.icon,
-                } as Partial<SpaceTreeNode>);
+                treeApi.update({
+                  id: event.id,
+                  changes: { icon: event.payload.icon },
+                });
               }
-              return next;
-            });
+              setTreeData(treeApi.data);
+            }
           }
           break;
         case "addTreeNode":
-          setTreeData((prev) => {
-            if (treeModel.find(prev, event.payload.data.id)) return prev;
-            const newParentId = event.payload.parentId as string | null;
-            let next = treeModel.insert(
-              prev,
-              newParentId,
-              event.payload.data,
-              event.payload.index,
-            );
-            // Mirror the emitter: flip new parent's hasChildren to true so
-            // the chevron renders on the receiver.
-            if (newParentId) {
-              next = treeModel.update(next, newParentId, {
-                hasChildren: true,
-              } as Partial<SpaceTreeNode>);
-            }
-            return next;
+          if (treeApi.find(event.payload.data.id)) return;
+
+          treeApi.create({
+            parentId: event.payload.parentId,
+            index: event.payload.index,
+            data: event.payload.data,
           });
+          setTreeData(treeApi.data);
+
           break;
         case "moveTreeNode":
-          setTreeData((prev) => {
-            const sourceBefore = treeModel.find(prev, event.payload.id);
-            if (!sourceBefore) return prev;
-            const oldParentId =
-              (sourceBefore as SpaceTreeNode).parentPageId ?? null;
-            const newParentId = event.payload.parentId as string | null;
-
-            const placed = treeModel.place(prev, event.payload.id, {
-              parentId: newParentId,
+          // move node
+          if (treeApi.find(event.payload.id)) {
+            treeApi.move({
+              id: event.payload.id,
+              parentId: event.payload.parentId,
               index: event.payload.index,
             });
-            // `place` silently returns the same reference if the destination
-            // parent isn't loaded on this client. Falling back to removing the
-            // source keeps the UI consistent (the source will reappear when
-            // the user expands the new parent and lazy-load fetches it).
-            if (placed === prev) {
-              return treeModel.remove(prev, event.payload.id);
-            }
 
-            let next = treeModel.update(placed, event.payload.id, {
-              position: event.payload.position,
-              parentPageId: newParentId,
-            } as Partial<SpaceTreeNode>);
+            // update node position
+            treeApi.update({
+              id: event.payload.id,
+              changes: {
+                position: event.payload.position,
+              },
+            });
 
-            // Mirror the emitter's hasChildren bookkeeping so both clients
-            // converge to the same chevron state.
-            if (oldParentId) {
-              const oldParent = treeModel.find(next, oldParentId);
-              if (!oldParent?.children?.length) {
-                next = treeModel.update(next, oldParentId, {
-                  hasChildren: false,
-                } as Partial<SpaceTreeNode>);
-              }
-            }
-            if (newParentId) {
-              next = treeModel.update(next, newParentId, {
-                hasChildren: true,
-              } as Partial<SpaceTreeNode>);
-            }
+            setTreeData(treeApi.data);
+          }
 
-            return next;
-          });
           break;
         case "deleteTreeNode":
-          setTreeData((prev) => {
-            if (!treeModel.find(prev, event.payload.node.id)) return prev;
+          if (treeApi.find(event.payload.node.id)) {
+            treeApi.drop({ id: event.payload.node.id });
+            setTreeData(treeApi.data);
+
             queryClient.invalidateQueries({
               queryKey: ["pages", event.payload.node.slugId].filter(Boolean),
             });
-            let next = treeModel.remove(prev, event.payload.node.id);
-            // Mirror the emitter's hasChildren bookkeeping so both clients
-            // converge to the same chevron state when the last child is deleted.
-            const parentPageId = event.payload.node.parentPageId;
-            if (parentPageId) {
-              const parent = treeModel.find(next, parentPageId);
-              if (!parent?.children?.length) {
-                next = treeModel.update(next, parentPageId, {
-                  hasChildren: false,
-                } as Partial<SpaceTreeNode>);
-              }
-            }
-            return next;
-          });
+          }
           break;
       }
     });

apps/client/vitest.config.ts

@@ -1,17 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import react from '@vitejs/plugin-react';
-import * as path from 'path';
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: [],
-  },
-});

apps/server/src/ws/ws.service.ts

@@ -54,7 +54,7 @@ export class WsService {
       return;
     }
 
-    await this.broadcastToAuthorizedUsers(room, client.id, pageId, data);
+    await this.broadcastToAuthorizedUsers(room, client.data.userId, pageId, data);
   }
 
   async invalidateSpaceRestrictionCache(spaceId: string): Promise<void> {
@@ -115,17 +115,14 @@ export class WsService {
 
   private async broadcastToAuthorizedUsers(
     room: string,
-    excludeSocketId: string | null,
+    excludeUserId: string | null,
     pageId: string,
     data: any,
   ): Promise<void> {
     const sockets = await this.server.in(room).fetchSockets();
 
-    // Exclude only the originating socket, not every socket of the originating
-    // user. Excluding by userId silently dropped the originator's other tabs
-    // from receiving restricted-space tree events.
-    const otherSockets = excludeSocketId
-      ? sockets.filter((s) => s.id !== excludeSocketId)
+    const otherSockets = excludeUserId
+      ? sockets.filter((s) => s.data.userId !== excludeUserId)
       : sockets;
     if (otherSockets.length === 0) return;
 

package.json

@@ -95,6 +95,7 @@
   "packageManager": "pnpm@10.4.0",
   "pnpm": {
     "patchedDependencies": {
+      "react-arborist@3.4.0": "patches/react-arborist@3.4.0.patch",
       "scimmy@1.3.5": "patches/scimmy@1.3.5.patch"
     },
     "overrides": {

patches/react-arborist@3.4.0.patch

@@ -0,0 +1,33 @@
+diff --git a/dist/module/components/default-container.js b/dist/module/components/default-container.js
+index 47724f59b482454fe3144dbb98bd16d3df6a9c17..2285e35ea0073a773b7b74e22758056fd3514c1a 100644
+--- a/dist/module/components/default-container.js
++++ b/dist/module/components/default-container.js
+@@ -34,28 +34,6 @@ export function DefaultContainer() {
+                 return;
+             }
+             if (e.key === "Backspace") {
+-                if (!tree.props.onDelete)
+-                    return;
+-                const ids = Array.from(tree.selectedIds);
+-                if (ids.length > 1) {
+-                    let nextFocus = tree.mostRecentNode;
+-                    while (nextFocus && nextFocus.isSelected) {
+-                        nextFocus = nextFocus.nextSibling;
+-                    }
+-                    if (!nextFocus)
+-                        nextFocus = tree.lastNode;
+-                    tree.focus(nextFocus, { scroll: false });
+-                    tree.delete(Array.from(ids));
+-                }
+-                else {
+-                    const node = tree.focusedNode;
+-                    if (node) {
+-                        const sib = node.nextSibling;
+-                        const parent = node.parent;
+-                        tree.focus(sib || parent, { scroll: false });
+-                        tree.delete(node);
+-                    }
+-                }
+                 return;
+             }
+             if (e.key === "Tab" && !e.shiftKey) {