fix

cleanup
fix: close table handle menu when drag starts
2026-05-15 05:04:06 +08:00 · 2026-05-14 00:36:30 +01:00 · 2026-05-14 00:31:26 +01:00 · 2026-05-14 00:25:00 +01:00 · 2026-05-13 23:11:36 +01:00 · 2026-05-13 23:01:04 +01:00
78 changed files with 7093 additions and 2509 deletions
@@ -7,78 +7,89 @@
    "build": "tsc && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
-    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
+    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
  },
  "dependencies": {
-    "@casl/react": "^5.0.1",
+    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
+    "@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",
-    "@mantine/form": "^8.3.18",
-    "@mantine/hooks": "^8.3.18",
-    "@mantine/modals": "^8.3.18",
-    "@mantine/notifications": "^8.3.18",
-    "@mantine/spotlight": "^8.3.18",
-    "@tabler/icons-react": "^3.40.0",
+    "@mantine/core": "8.3.18",
+    "@mantine/dates": "8.3.18",
+    "@mantine/form": "8.3.18",
+    "@mantine/hooks": "8.3.18",
+    "@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",
-    "alfaaz": "^1.1.0",
+    "@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",
+    "blueimp-load-image": "5.16.0",
+    "clsx": "2.1.1",
+    "file-saver": "2.0.5",
+    "highlightjs-sap-abap": "0.3.0",
    "i18next": "25.10.1",
    "i18next-http-backend": "3.0.6",
-    "jotai": "^2.18.1",
-    "jotai-optics": "^0.4.0",
-    "js-cookie": "^3.0.5",
-    "jwt-decode": "^4.0.0",
+    "jotai": "2.18.1",
+    "jotai-optics": "0.4.0",
+    "js-cookie": "3.0.5",
+    "jwt-decode": "4.0.0",
    "katex": "0.16.40",
-    "lowlight": "^3.3.0",
-    "mantine-form-zod-resolver": "^1.3.0",
-    "mermaid": "^11.13.0",
-    "mitt": "^3.0.1",
+    "lowlight": "3.3.0",
+    "mantine-form-zod-resolver": "1.3.0",
+    "mermaid": "11.15.0",
+    "mitt": "3.0.1",
    "posthog-js": "1.372.2",
-    "react": "^18.3.1",
-    "react-arborist": "3.4.0",
+    "react": "18.3.1",
    "react-clear-modal": "^2.0.18",
    "react-dom": "^18.3.1",
-    "react-drawio": "^1.0.7",
-    "react-error-boundary": "^6.1.1",
-    "react-helmet-async": "^3.0.0",
+    "react-drawio": "1.0.7",
+    "react-error-boundary": "6.1.1",
+    "react-helmet-async": "3.0.0",
    "react-i18next": "16.5.8",
-    "react-router-dom": "^7.13.1",
-    "semver": "^7.7.4",
-    "socket.io-client": "^4.8.3",
-    "zod": "^4.3.6"
+    "react-router-dom": "7.13.1",
+    "semver": "7.7.4",
+    "socket.io-client": "4.8.3",
+    "zod": "4.3.6"
  },
  "devDependencies": {
-    "@eslint/js": "^9.28.0",
-    "@tanstack/eslint-plugin-query": "^5.94.4",
-    "@types/blueimp-load-image": "^5.16.6",
-    "@types/file-saver": "^2.0.7",
-    "@types/js-cookie": "^3.0.6",
-    "@types/katex": "^0.16.8",
+    "@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",
+    "@types/katex": "0.16.8",
    "@types/node": "22.19.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.28.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^15.13.0",
-    "optics-ts": "^2.4.1",
-    "postcss": "^8.5.12",
-    "postcss-preset-mantine": "^1.18.0",
-    "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.1",
-    "vite": "8.0.5"
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "6.0.1",
+    "eslint": "9.28.0",
+    "eslint-plugin-react": "7.37.5",
+    "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.14",
+    "postcss-preset-mantine": "1.18.0",
+    "postcss-simple-vars": "7.0.1",
+    "prettier": "3.8.1",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.57.1",
+    "vite": "8.0.5",
+    "vitest": "4.1.6"
  }
 }
@@ -286,6 +286,19 @@
  "Add row above": "Add row above",
  "Add row below": "Add row below",
  "Delete table": "Delete table",
+  "Add column left": "Add column left",
+  "Add column right": "Add column right",
+  "Clear cell": "Clear cell",
+  "Clear cells": "Clear cells",
+  "Toggle header cell": "Toggle header cell",
+  "Toggle header column": "Toggle header column",
+  "Toggle header row": "Toggle header row",
+  "Move column left": "Move column left",
+  "Move column right": "Move column right",
+  "Move row down": "Move row down",
+  "Move row up": "Move row up",
+  "Sort A → Z": "Sort A → Z",
+  "Sort Z → A": "Sort Z → A",
  "Info": "Info",
  "Note": "Note",
  "Success": "Success",
@@ -997,5 +1010,8 @@
  "No pages with this label": "No pages with this label",
  "Pages tagged with this label will appear here.": "Pages tagged with this label will appear here.",
  "No pages match your search.": "No pages match your search.",
-  "Updated {{date}}": "Updated {{date}}"
+  "Updated {{date}}": "Updated {{date}}",
+  "Cell actions": "Cell actions",
+  "Column actions": "Column actions",
+  "Row actions": "Row actions"
 }
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import {
  ActionIcon,
  Popover,
@@ -7,9 +7,24 @@ 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;
@@ -19,6 +34,7 @@ export interface EmojiPickerInterface {
    size?: string;
    variant?: string;
    c?: string;
+    tabIndex?: number;
  };
 }

@@ -50,6 +66,38 @@ 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();
@@ -74,6 +122,7 @@ 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"
@@ -85,7 +134,6 @@ 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"
@@ -21,7 +21,7 @@ let _emojiIndex: EmojiIndexEntry[] | null = null;

 export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
  if (_emojiIndex) return _emojiIndex;
-  const { default: data } = await import("@emoji-mart/data");
+  const { default: data } = await import('@slidoapp/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("@emoji-mart/data"),
+    import("@slidoapp/emoji-mart-data"),
    buildEmojiIndex(),
  ]);
  const byId = new Map(index.map((e) => [e.id, e]));
@@ -3,7 +3,7 @@
  top: calc(var(--app-shell-header-offset, 0rem) + 45px);
  inset-inline-start: var(--app-shell-navbar-offset, 0rem);
  inset-inline-end: var(--app-shell-aside-offset, 0rem);
-  z-index: 50;
+  z-index: 99;
  display: flex;
  align-items: center;
  background: var(--mantine-color-body);
@@ -28,6 +28,7 @@ export const FixedToolbar: FC = () => {
    <>
      <div
        className={classes.fixedToolbar}
+        data-fixed-toolbar="true"
        role="toolbar"
        aria-label="Editor toolbar"
        onMouseDown={(e) => e.preventDefault()}
@@ -3,7 +3,6 @@ import React, {
  useCallback,
  useEffect,
  useImperativeHandle,
-  useMemo,
  useRef,
  useState,
 } from "react";
@@ -36,7 +35,7 @@ import {
  usePageQuery,
 } from "@/features/page/queries/page-query";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { SimpleTree } from "react-arborist";
+import { treeModel } from "@/features/page/tree/model/tree-model";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
@@ -53,7 +52,6 @@ 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;
@@ -220,20 +218,20 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
    try {
      createdPage = await createPageMutation.mutateAsync(payload);
      const parentId = page.id || null;
-      const data = {
+      const newNode: SpaceTreeNode = {
        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 = tree.data.length;
+      const lastIndex = data.length;

-      tree.create({ parentId, index: lastIndex, data });
-      setData(tree.data);
+      setData(treeModel.insert(data, parentId, newNode, lastIndex));

      props.command({
        id: uuid7(),
@@ -251,7 +249,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
          payload: {
            parentId,
            index: lastIndex,
-            data,
+            data: newNode,
          },
        });
      }, 50);
@@ -0,0 +1,126 @@
+import React, { useCallback, useEffect } from "react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { TextSelection } from "@tiptap/pm/state";
+import { columnResizingPluginKey } from "@tiptap/pm/tables";
+import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
+import { Menu, UnstyledButton } from "@mantine/core";
+import { IconChevronDown } from "@tabler/icons-react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { isCellSelection } from "@docmost/editor-ext";
+import { CellChevronMenu } from "./menus/cell-chevron-menu";
+import classes from "./handle.module.css";
+
+interface CellChevronProps {
+  editor: Editor;
+  cellPos: number;
+  tableNode: ProseMirrorNode;
+  tablePos: number;
+}
+
+export const CellChevron = React.memo(function CellChevron({
+  editor,
+  cellPos,
+  tableNode,
+  tablePos,
+}: CellChevronProps) {
+  const { t } = useTranslation();
+  const cellDom = editor.view.nodeDOM(cellPos) as HTMLElement | null;
+
+  const { refs, floatingStyles, middlewareData } = useFloating({
+    placement: "top-end",
+    // crossAxis pulls the chevron INWARD from the cell's right edge. We need
+    // enough inset that we don't overlap PM-tables' column-resize hot zone
+    // (~5px wide around the column boundary). Without this, hovering near the
+    // column edge picks up the chevron's `cursor: pointer` instead of
+    // `col-resize`, and a drag near the edge clicks the chevron.
+    middleware: [offset({ mainAxis: -22, crossAxis: -10 }), hide()],
+    whileElementsMounted: autoUpdate,
+    strategy: "absolute",
+  });
+  const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
+
+  useEffect(() => {
+    refs.setReference(cellDom);
+  }, [cellDom, refs]);
+
+  // Hide the chevron while the user is resizing a column. PM-tables sets
+  // `activeHandle > -1` whenever the mouse is near a column boundary OR
+  // actively dragging it. Either way we don't want the chevron in the way.
+  const isResizingColumn = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return false;
+      const state = columnResizingPluginKey.getState(ctx.editor.state) as
+        | { activeHandle: number }
+        | undefined;
+      return !!state && state.activeHandle > -1;
+    },
+  });
+
+  const onOpen = useCallback(() => {
+    const current = editor.state.selection;
+
+    // Preserve an existing multi-cell CellSelection that already covers
+    // this cell so merge etc. operate on the user's whole range.
+    let preserveExisting = false;
+    if (isCellSelection(current)) {
+      current.forEachCell((_node, pos) => {
+        if (pos === cellPos) preserveExisting = true;
+      });
+    }
+
+    if (!preserveExisting) {
+      // Drop a collapsed cursor inside the cell rather than a single-cell
+      // CellSelection — PM-tables paints the latter as a text-range
+      // highlight on the cell content.
+      try {
+        const $inside = editor.state.doc.resolve(cellPos + 1);
+        const sel = TextSelection.near($inside, 1);
+        editor.view.dispatch(editor.state.tr.setSelection(sel));
+      } catch {}
+    }
+    editor.commands.freezeHandles();
+  }, [editor, cellPos]);
+
+  const onClose = useCallback(() => {
+    editor.commands.unfreezeHandles();
+  }, [editor]);
+
+  if (!cellDom) return null;
+  if (isResizingColumn) return null;
+
+  return (
+    <Menu
+      position="bottom-end"
+      onOpen={onOpen}
+      onClose={onClose}
+      withinPortal
+      shadow="md"
+    >
+      <Menu.Target>
+        <UnstyledButton
+          ref={refs.setFloating}
+          style={{
+            ...floatingStyles,
+            ...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
+          }}
+          className={clsx(classes.cellChevron)}
+          aria-label={t("Cell actions")}
+        >
+          <IconChevronDown size={14} />
+        </UnstyledButton>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <CellChevronMenu
+          editor={editor}
+          cellPos={cellPos}
+          tableNode={tableNode}
+          tablePos={tablePos}
+        />
+      </Menu.Dropdown>
+    </Menu>
+  );
+});
@@ -0,0 +1,127 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
+import { Menu } from "@mantine/core";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
+import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
+import { ColumnHandleMenu } from "./menus/column-handle-menu";
+import classes from "./handle.module.css";
+
+interface ColumnHandleProps {
+  editor: Editor;
+  index: number;
+  anchorPos: number;
+  tableNode: ProseMirrorNode;
+  tablePos: number;
+}
+
+export const ColumnHandle = React.memo(function ColumnHandle({
+  editor,
+  index,
+  anchorPos,
+  tableNode,
+  tablePos,
+}: ColumnHandleProps) {
+  const { t } = useTranslation();
+  // Hold the cell DOM in a ref-backed state so we never unmount the handle
+  // mid-drag. A remote edit can transiently flip `nodeDOM(anchorPos)` to null
+  // (the plugin re-emits `hoveringCell` with the mapped pos a tick later);
+  // unmounting the source element here would make pragmatic-dnd silently
+  // abort the active drag.
+  const lookupCellDom = editor.view.nodeDOM(anchorPos) as HTMLElement | null;
+  const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
+  const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
+  useEffect(() => {
+    if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
+      lastCellDomRef.current = lookupCellDom;
+      setCellDom(lookupCellDom);
+    }
+  }, [lookupCellDom]);
+
+  const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
+
+  const { refs, floatingStyles, middlewareData } = useFloating({
+    placement: "top",
+    middleware: [offset(-4), hide()],
+    whileElementsMounted: autoUpdate,
+  });
+  const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
+
+  useEffect(() => {
+    refs.setReference(cellDom);
+  }, [cellDom, refs]);
+
+  // `cellDom` is inside the table, so `closest('.tableWrapper')` finds the
+  // wrapper for this drag's auto-scroll. The handle itself lives in a
+  // floating layer outside the editor DOM, so we can't walk up from it.
+  const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
+
+  const [menuOpened, setMenuOpened] = useState(false);
+  const closeMenu = useCallback(() => setMenuOpened(false), []);
+  useTableHandleDrag(editor, "col", handleEl, wrapper, closeMenu);
+
+  const { onOpen, onClose } = useColumnRowMenuLifecycle({
+    editor,
+    orientation: "col",
+    index,
+    tableNode,
+    tablePos,
+  });
+
+  if (!cellDom) return null;
+
+  return (
+    <Menu
+      opened={menuOpened}
+      onChange={setMenuOpened}
+      position="bottom-start"
+      onOpen={onOpen}
+      onClose={onClose}
+      withinPortal
+      shadow="md"
+    >
+      <Menu.Target>
+        <div
+          ref={(node) => {
+            refs.setFloating(node);
+            setHandleEl(node);
+          }}
+          style={{
+            ...floatingStyles,
+            ...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
+          }}
+          className={clsx(classes.handle, classes.columnHandle)}
+          role="button"
+          tabIndex={0}
+          aria-label={t("Column actions")}
+        >
+          <span style={{ pointerEvents: "none", display: "inline-flex" }}>
+            <GripIcon />
+          </span>
+        </div>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <ColumnHandleMenu
+          editor={editor}
+          index={index}
+          tableNode={tableNode}
+          tablePos={tablePos}
+        />
+      </Menu.Dropdown>
+    </Menu>
+  );
+});
+
+function GripIcon() {
+  return (
+    <svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
+      <path
+        fill="currentColor"
+        d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,108 @@
+.handle {
+  position: absolute;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: rgba(55, 53, 47, 0.45);
+  background: var(--mantine-color-body);
+  border: 1px solid rgba(55, 53, 47, 0.12);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  cursor: grab;
+  padding: 0;
+  transition: background-color 120ms ease, color 120ms ease;
+
+  @mixin dark {
+    color: rgba(255, 255, 255, 0.55);
+    background: var(--mantine-color-dark-7);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+
+.handle:hover {
+  background: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+  color: light-dark(
+    var(--mantine-color-gray-7),
+    var(--mantine-color-dark-0)
+  );
+}
+
+.handle:active {
+  cursor: grabbing;
+}
+
+.columnHandle {
+  width: 28px;
+  height: 16px;
+}
+
+.columnHandle svg {
+  transform: rotate(90deg);
+}
+
+.rowHandle {
+  width: 16px;
+  height: 28px;
+}
+
+@media (max-width: 600px) {
+  .handle {
+    display: none;
+  }
+}
+
+.cellChevron {
+  position: absolute;
+  z-index: 50;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: light-dark(
+    var(--mantine-color-gray-7),
+    var(--mantine-color-dark-1)
+  );
+  background: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+  border: 1px solid rgba(55, 53, 47, 0.12);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+  padding: 0;
+  transition: background-color 120ms ease, color 120ms ease;
+
+  @mixin dark {
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+
+.cellChevron:hover {
+  background: light-dark(
+    var(--mantine-color-gray-2),
+    var(--mantine-color-dark-4)
+  );
+  color: light-dark(
+    var(--mantine-color-gray-8),
+    var(--mantine-color-dark-0)
+  );
+}
+
+@media (max-width: 600px) {
+  .cellChevron {
+    display: none;
+  }
+}
+
+@media print {
+  .handle,
+  .cellChevron {
+    display: none !important;
+  }
+}
@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+import type { Editor } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { buildRowOrColumnSelection, Orientation } from "../lib/select-row-column";
+
+interface Args {
+  editor: Editor;
+  orientation: Orientation;
+  index: number;
+  tableNode: ProseMirrorNode;
+  tablePos: number;
+}
+
+export function useColumnRowMenuLifecycle({
+  editor,
+  orientation,
+  index,
+  tableNode,
+  tablePos,
+}: Args) {
+  const onOpen = useCallback(() => {
+    const selection = buildRowOrColumnSelection(
+      editor.state,
+      tableNode,
+      tablePos,
+      orientation,
+      index,
+    );
+    const tr = editor.state.tr;
+    if (selection) tr.setSelection(selection);
+    editor.view.dispatch(tr);
+    editor.commands.freezeHandles();
+  }, [editor, orientation, index, tableNode, tablePos]);
+
+  const onClose = useCallback(() => {
+    editor.commands.unfreezeHandles();
+  }, [editor]);
+
+  return { onOpen, onClose };
+}
@@ -0,0 +1,54 @@
+import { useCallback } from "react";
+import type { Editor } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { TableMap } from "@tiptap/pm/tables";
+
+type Scope =
+  | { kind: "col"; index: number }
+  | { kind: "row"; index: number }
+  | { kind: "cell"; cellPos: number };
+
+export function useTableClear(
+  editor: Editor,
+  tableNode: ProseMirrorNode,
+  tablePos: number,
+  scope: Scope,
+) {
+  return useCallback(() => {
+    const tr = editor.state.tr;
+    const tableStart = tablePos + 1;
+    const map = TableMap.get(tableNode);
+    const paragraph = editor.schema.nodes.paragraph;
+    if (!paragraph) return;
+
+    const cellOffsets: number[] = [];
+
+    if (scope.kind === "col") {
+      for (let row = 0; row < map.height; row++) {
+        cellOffsets.push(map.map[row * map.width + scope.index]);
+      }
+    } else if (scope.kind === "row") {
+      for (let col = 0; col < map.width; col++) {
+        cellOffsets.push(map.map[scope.index * map.width + col]);
+      }
+    }
+
+    const targets =
+      scope.kind === "cell"
+        ? [scope.cellPos]
+        : Array.from(new Set(cellOffsets)).map((o) => tableStart + o);
+
+    // Process in reverse position order so earlier replacements don't shift later ones.
+    targets.sort((a, b) => b - a);
+
+    for (const cellPos of targets) {
+      const node = tr.doc.nodeAt(cellPos);
+      if (!node) continue;
+      const start = cellPos + 1;
+      const end = cellPos + node.nodeSize - 1;
+      tr.replaceWith(start, end, paragraph.create());
+    }
+
+    if (tr.docChanged) editor.view.dispatch(tr);
+  }, [editor, tableNode, tablePos, scope]);
+}
@@ -0,0 +1,79 @@
+import { useEffect } from "react";
+import type { Editor } from "@tiptap/react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
+import {
+  autoScrollForElements,
+  autoScrollWindowForElements,
+} from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { getTableHandlePluginSpec } from "@docmost/editor-ext";
+
+// Uses pragmatic-drag-and-drop instead of native HTML5 DnD because the native
+// dragstart→dragover→drop lifecycle was being silently cancelled
+export function useTableHandleDrag(
+  editor: Editor,
+  orientation: "col" | "row",
+  element: HTMLElement | null,
+  wrapper: HTMLElement | null,
+  onDragStart?: () => void,
+) {
+  useEffect(() => {
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        getInitialData: () => ({ type: `table-${orientation}` }),
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          // We render our own floating preview via PreviewController, so hide
+          // the native drag image entirely.
+          disableNativeDragPreview({ nativeSetDragImage });
+        },
+        onDragStart: ({ location }) => {
+          // The menu (if open from a prior click on the handle) won't dismiss
+          // on its own — pragmatic-dnd swallows the events Mantine listens for.
+          onDragStart?.();
+          const spec = getTableHandlePluginSpec(editor);
+          if (!spec) return;
+          const { clientX, clientY } = location.initial.input;
+          spec.startDragFromHandle(orientation, clientX, clientY);
+        },
+        onDrag: ({ location }) => {
+          const spec = getTableHandlePluginSpec(editor);
+          if (!spec) return;
+          const { clientX, clientY } = location.current.input;
+          spec.updateDragPosition(clientX, clientY);
+        },
+        onDrop: ({ location }) => {
+          const spec = getTableHandlePluginSpec(editor);
+          if (!spec) return;
+          const { clientX, clientY } = location.current.input;
+          // Make sure the final position is recorded before committing the drop.
+          spec.updateDragPosition(clientX, clientY);
+          spec.commitDrop();
+          spec.endDrag();
+        },
+      }),
+      // Wrapper owns horizontal auto-scroll (it has `overflow-x: auto`);
+      // window owns vertical. Locking each axis prevents the window's
+      // horizontal auto-scroll from running when the cursor approaches
+      // the viewport edge — without the cap, the preview's `left` follows
+      // the cursor past the viewport, the page widens to contain it, the
+      // plugin scrolls the now-wider page further, and the loop never
+      // ends.
+      // Only the column handle registers wrapper auto-scroll (rows can't
+      // scroll horizontally) — registering twice on the same wrapper
+      // triggers a dev-mode warning from pragmatic-dnd-auto-scroll.
+      orientation === "col" &&
+      wrapper &&
+      !wrapper.classList.contains("tableWrapperNoOverflow")
+        ? autoScrollForElements({
+            element: wrapper,
+            getAllowedAxis: () => "horizontal",
+          })
+        : () => {},
+      autoScrollWindowForElements({ getAllowedAxis: () => "vertical" }),
+    );
+  }, [editor, orientation, element, wrapper, onDragStart]);
+}
@@ -0,0 +1,23 @@
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
+import { TableDndKey, TableHandleState } from "@docmost/editor-ext";
+
+const FALLBACK: TableHandleState = {
+  hoveringCell: null,
+  tableNode: null,
+  tablePos: null,
+  dragging: null,
+  frozen: false,
+};
+
+export function useTableHandleState(editor: Editor | null): TableHandleState {
+  const state = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return null;
+      return TableDndKey.getState(ctx.editor.state) ?? null;
+    },
+  });
+
+  return state ?? FALLBACK;
+}
@@ -0,0 +1,50 @@
+import { useCallback, useMemo } from "react";
+import type { Editor } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { TableMap } from "@tiptap/pm/tables";
+import { moveColumn, moveRow } from "@docmost/editor-ext";
+
+export type MoveDirection = "left" | "right" | "up" | "down";
+
+export function useTableMoveRowColumn(
+  editor: Editor,
+  orientation: "col" | "row",
+  index: number,
+  direction: MoveDirection,
+  tableNode: ProseMirrorNode,
+  tablePos: number,
+) {
+  const target =
+    direction === "left" || direction === "up" ? index - 1 : index + 1;
+
+  const maxIndex = useMemo(() => {
+    const map = TableMap.get(tableNode);
+    return orientation === "col" ? map.width - 1 : map.height - 1;
+  }, [tableNode, orientation]);
+
+  const canMove = target >= 0 && target <= maxIndex;
+
+  const handleMove = useCallback(() => {
+    if (!canMove) return;
+    const tr = editor.state.tr;
+    const moved =
+      orientation === "col"
+        ? moveColumn({
+            tr,
+            originIndex: index,
+            targetIndex: target,
+            select: true,
+            pos: tablePos + 1,
+          })
+        : moveRow({
+            tr,
+            originIndex: index,
+            targetIndex: target,
+            select: true,
+            pos: tablePos + 1,
+          });
+    if (moved) editor.view.dispatch(tr);
+  }, [editor, orientation, index, target, tablePos, canMove]);
+
+  return { canMove, handleMove };
+}
@@ -0,0 +1,100 @@
+import { useCallback, useMemo } from "react";
+import type { Editor } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import {
+  convertArrayOfRowsToTableNode,
+  convertTableNodeToArrayOfRows,
+  transpose,
+} from "@docmost/editor-ext";
+import {
+  getCellSortText,
+  isCellEmpty,
+  isHeaderCell,
+  type SortDirection,
+  type SortableItem,
+  sortItems,
+  weaveItems,
+} from "../lib/sort-cells";
+
+interface Args {
+  editor: Editor;
+  orientation: "col" | "row";
+  index: number;
+  tableNode: ProseMirrorNode;
+  tablePos: number;
+  direction: SortDirection;
+}
+
+function tableHasMergedCells(tableNode: ProseMirrorNode): boolean {
+  for (let r = 0; r < tableNode.childCount; r++) {
+    const row = tableNode.child(r);
+    for (let c = 0; c < row.childCount; c++) {
+      const { colspan = 1, rowspan = 1 } = row.child(c).attrs;
+      if (colspan > 1 || rowspan > 1) return true;
+    }
+  }
+  return false;
+}
+
+function isAllHeader(cells: (ProseMirrorNode | null)[]): boolean {
+  return cells.every((c) => c !== null && isHeaderCell(c));
+}
+
+export function useTableSort({
+  editor,
+  orientation,
+  index,
+  tableNode,
+  tablePos,
+  direction,
+}: Args) {
+  const canSort = useMemo(() => {
+    if (tableHasMergedCells(tableNode)) return false;
+
+    const rows = convertTableNodeToArrayOfRows(tableNode);
+    const axes = orientation === "col" ? rows : transpose(rows);
+    if (axes.length < 2) return false;
+
+    return axes.some((cells) => {
+      if (isAllHeader(cells)) return false;
+      const sortCell = cells[index];
+      return !!sortCell && !isCellEmpty(sortCell);
+    });
+  }, [tableNode, orientation, index]);
+
+  const handleSort = useCallback(() => {
+    if (!canSort) return;
+
+    const rows = convertTableNodeToArrayOfRows(tableNode);
+    const axes = orientation === "col" ? rows : transpose(rows);
+
+    const items: SortableItem<(ProseMirrorNode | null)[]>[] = axes.map(
+      (cells, originalOrder) => {
+        const sortCell = cells[index];
+        return {
+          payload: cells,
+          text: sortCell ? getCellSortText(sortCell) : "",
+          isHeader: isAllHeader(cells),
+          isEmpty: !sortCell || isCellEmpty(sortCell),
+          originalOrder,
+        };
+      },
+    );
+
+    const dataItems = items.filter((it) => !it.isHeader);
+    const sortedData = sortItems(dataItems, direction);
+    const woven = weaveItems(items, sortedData);
+
+    const newAxes = woven.map((it) => it.payload);
+    const newRows = orientation === "col" ? newAxes : transpose(newAxes);
+
+    const newTable = convertArrayOfRowsToTableNode(tableNode, newRows);
+
+    const tr = editor.state.tr;
+    tr.replaceWith(tablePos, tablePos + tableNode.nodeSize, newTable);
+
+    if (tr.docChanged) editor.view.dispatch(tr);
+  }, [editor, tableNode, tablePos, orientation, index, direction, canSort]);
+
+  return { canSort, handleSort };
+}
@@ -0,0 +1,34 @@
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { EditorState } from "@tiptap/pm/state";
+import { CellSelection, TableMap } from "@tiptap/pm/tables";
+
+export type Orientation = "col" | "row";
+
+export function buildRowOrColumnSelection(
+  state: EditorState,
+  tableNode: ProseMirrorNode,
+  tablePos: number,
+  orientation: Orientation,
+  index: number,
+): CellSelection | null {
+  const map = TableMap.get(tableNode);
+  const tableStart = tablePos + 1;
+
+  if (orientation === "col") {
+    if (index < 0 || index >= map.width) return null;
+    const firstCellPos = tableStart + map.map[index];
+    const lastCellPos =
+      tableStart + map.map[(map.height - 1) * map.width + index];
+    const $first = state.doc.resolve(firstCellPos);
+    const $last = state.doc.resolve(lastCellPos);
+    return CellSelection.colSelection($first, $last);
+  }
+
+  if (index < 0 || index >= map.height) return null;
+  const firstCellPos = tableStart + map.map[index * map.width];
+  const lastCellPos =
+    tableStart + map.map[index * map.width + (map.width - 1)];
+  const $first = state.doc.resolve(firstCellPos);
+  const $last = state.doc.resolve(lastCellPos);
+  return CellSelection.rowSelection($first, $last);
+}
@@ -0,0 +1,57 @@
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+
+export type SortDirection = "asc" | "desc";
+
+export interface SortableItem<T> {
+  payload: T;
+  text: string;
+  isHeader: boolean;
+  isEmpty: boolean;
+  originalOrder: number;
+}
+
+const HEADER_TYPE_NAMES = new Set(["tableHeader", "table_header"]);
+
+export function isHeaderCell(node: ProseMirrorNode): boolean {
+  if (HEADER_TYPE_NAMES.has(node.type.name)) return true;
+  return node.attrs?.header === true;
+}
+
+export function getCellSortText(node: ProseMirrorNode): string {
+  let text = "";
+  node.descendants((child) => {
+    if (child.isText) text += child.text ?? "";
+    return true;
+  });
+  return text.trim().toLowerCase();
+}
+
+export function isCellEmpty(node: ProseMirrorNode): boolean {
+  return getCellSortText(node) === "";
+}
+
+export const collator = new Intl.Collator(undefined, {
+  sensitivity: "base",
+  numeric: true,
+});
+
+export function sortItems<T>(
+  data: SortableItem<T>[],
+  direction: SortDirection,
+): SortableItem<T>[] {
+  return [...data].sort((a, b) => {
+    if (a.isEmpty && !b.isEmpty) return 1;
+    if (!a.isEmpty && b.isEmpty) return -1;
+    if (a.isEmpty && b.isEmpty) return a.originalOrder - b.originalOrder;
+    const cmp = collator.compare(a.text, b.text);
+    return direction === "asc" ? cmp : -cmp;
+  });
+}
+
+export function weaveItems<T>(
+  all: SortableItem<T>[],
+  sortedData: SortableItem<T>[],
+): SortableItem<T>[] {
+  const dataQueue = [...sortedData];
+  return all.map((item) => (item.isHeader ? item : dataQueue.shift()!));
+}
@@ -0,0 +1,49 @@
+import React from "react";
+import type { Editor } from "@tiptap/react";
+import { Menu } from "@mantine/core";
+import {
+  IconAlignCenter,
+  IconAlignLeft,
+  IconAlignRight,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+
+interface AlignmentSubmenuProps {
+  editor: Editor;
+}
+
+export const AlignmentSubmenu = React.memo(function AlignmentSubmenu({
+  editor,
+}: AlignmentSubmenuProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Menu.Sub position="right-start">
+      <Menu.Sub.Target>
+        <Menu.Sub.Item leftSection={<IconAlignLeft size={16} />}>
+          {t("Text alignment")}
+        </Menu.Sub.Item>
+      </Menu.Sub.Target>
+      <Menu.Sub.Dropdown>
+        <Menu.Item
+          leftSection={<IconAlignLeft size={16} />}
+          onClick={() => editor.chain().focus().setTextAlign("left").run()}
+        >
+          {t("Align left")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconAlignCenter size={16} />}
+          onClick={() => editor.chain().focus().setTextAlign("center").run()}
+        >
+          {t("Align center")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconAlignRight size={16} />}
+          onClick={() => editor.chain().focus().setTextAlign("right").run()}
+        >
+          {t("Align right")}
+        </Menu.Item>
+      </Menu.Sub.Dropdown>
+    </Menu.Sub>
+  );
+});
@@ -0,0 +1,154 @@
+import React from "react";
+import type { Editor } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { ColorSwatch, Menu } from "@mantine/core";
+import {
+  IconBoxMargin,
+  IconColumnInsertRight,
+  IconColumnRemove,
+  IconEraser,
+  IconPalette,
+  IconRowInsertBottom,
+  IconRowRemove,
+  IconSquareToggle,
+  IconTableRow,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useTableClear } from "../hooks/use-table-clear";
+import { TABLE_COLORS } from "../../table-background-color";
+import { AlignmentSubmenu } from "./alignment-submenu";
+
+interface CellChevronMenuProps {
+  editor: Editor;
+  cellPos: number;
+  tableNode: ProseMirrorNode;
+  tablePos: number;
+}
+
+export const CellChevronMenu = React.memo(function CellChevronMenu({
+  editor,
+  cellPos,
+  tableNode,
+  tablePos,
+}: CellChevronMenuProps) {
+  const { t } = useTranslation();
+
+  const clearCell = useTableClear(editor, tableNode, tablePos, {
+    kind: "cell",
+    cellPos,
+  });
+
+  const setBackground = (color: string, name: string) => {
+    editor
+      .chain()
+      .focus()
+      .updateAttributes("tableCell", {
+        backgroundColor: color || null,
+        backgroundColorName: color ? name : null,
+      })
+      .updateAttributes("tableHeader", {
+        backgroundColor: color || null,
+        backgroundColorName: color ? name : null,
+      })
+      .run();
+  };
+
+  return (
+    <>
+      <Menu.Sub position="right-start">
+        <Menu.Sub.Target>
+          <Menu.Sub.Item leftSection={<IconPalette size={16} />}>
+            {t("Background color")}
+          </Menu.Sub.Item>
+        </Menu.Sub.Target>
+        <Menu.Sub.Dropdown>
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(4, 1fr)",
+              gap: 8,
+              padding: 8,
+            }}
+          >
+            {TABLE_COLORS.map((c) => (
+              <button
+                key={c.name}
+                type="button"
+                onClick={() => setBackground(c.color, c.name)}
+                aria-label={t(c.name)}
+                style={{
+                  border: "none",
+                  background: "transparent",
+                  padding: 0,
+                  cursor: "pointer",
+                }}
+              >
+                <ColorSwatch
+                  color={c.color || "#ffffff"}
+                  size={22}
+                  style={{
+                    border: c.color === "" ? "1px solid #e5e7eb" : undefined,
+                  }}
+                />
+              </button>
+            ))}
+          </div>
+        </Menu.Sub.Dropdown>
+      </Menu.Sub>
+
+      <AlignmentSubmenu editor={editor} />
+
+      <Menu.Item
+        leftSection={<IconBoxMargin size={16} />}
+        onClick={() => editor.chain().focus().mergeCells().run()}
+        disabled={!editor.can().mergeCells()}
+      >
+        {t("Merge cells")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconSquareToggle size={16} />}
+        onClick={() => editor.chain().focus().splitCell().run()}
+        disabled={!editor.can().splitCell()}
+      >
+        {t("Split cell")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconTableRow size={16} />}
+        onClick={() => editor.chain().focus().toggleHeaderCell().run()}
+      >
+        {t("Toggle header cell")}
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item
+        leftSection={<IconColumnInsertRight size={16} />}
+        onClick={() => editor.chain().focus().addColumnAfter().run()}
+      >
+        {t("Add column right")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconRowInsertBottom size={16} />}
+        onClick={() => editor.chain().focus().addRowAfter().run()}
+      >
+        {t("Add row below")}
+      </Menu.Item>
+
+      <Menu.Item leftSection={<IconEraser size={16} />} onClick={clearCell}>
+        {t("Clear cell")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconColumnRemove size={16} />}
+        onClick={() => editor.chain().focus().deleteColumn().run()}
+      >
+        {t("Delete column")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconRowRemove size={16} />}
+        onClick={() => editor.chain().focus().deleteRow().run()}
+      >
+        {t("Delete row")}
+      </Menu.Item>
+    </>
+  );
+});
@@ -0,0 +1,177 @@
+import React from "react";
+import type { Editor } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { ColorSwatch, Menu } from "@mantine/core";
+import { TABLE_COLORS } from "../../table-background-color";
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconColumnInsertLeft,
+  IconColumnInsertRight,
+  IconColumnRemove,
+  IconEraser,
+  IconPalette,
+  IconSortAscendingLetters,
+  IconSortDescendingLetters,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
+import { useTableClear } from "../hooks/use-table-clear";
+import { useTableSort } from "../hooks/use-table-sort";
+import { AlignmentSubmenu } from "./alignment-submenu";
+
+interface ColumnHandleMenuProps {
+  editor: Editor;
+  index: number;
+  tableNode: ProseMirrorNode;
+  tablePos: number;
+}
+
+export const ColumnHandleMenu = React.memo(function ColumnHandleMenu({
+  editor,
+  index,
+  tableNode,
+  tablePos,
+}: ColumnHandleMenuProps) {
+  const { t } = useTranslation();
+
+  const moveLeft = useTableMoveRowColumn(editor, "col", index, "left", tableNode, tablePos);
+  const moveRight = useTableMoveRowColumn(editor, "col", index, "right", tableNode, tablePos);
+  const clearCol = useTableClear(editor, tableNode, tablePos, {
+    kind: "col",
+    index,
+  });
+
+  const setBackground = (color: string, name: string) => {
+    editor
+      .chain()
+      .focus()
+      .updateAttributes("tableCell", {
+        backgroundColor: color || null,
+        backgroundColorName: color ? name : null,
+      })
+      .updateAttributes("tableHeader", {
+        backgroundColor: color || null,
+        backgroundColorName: color ? name : null,
+      })
+      .run();
+  };
+
+  const sortAsc = useTableSort({
+    editor,
+    orientation: "col",
+    index,
+    tableNode,
+    tablePos,
+    direction: "asc",
+  });
+  const sortDesc = useTableSort({
+    editor,
+    orientation: "col",
+    index,
+    tableNode,
+    tablePos,
+    direction: "desc",
+  });
+
+  return (
+    <>
+      <Menu.Item
+        leftSection={<IconSortAscendingLetters size={16} />}
+        onClick={sortAsc.handleSort}
+        disabled={!sortAsc.canSort}
+      >
+        {t("Sort A → Z")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconSortDescendingLetters size={16} />}
+        onClick={sortDesc.handleSort}
+        disabled={!sortDesc.canSort}
+      >
+        {t("Sort Z → A")}
+      </Menu.Item>
+      <Menu.Divider />
+
+      <Menu.Sub position="right-start">
+        <Menu.Sub.Target>
+          <Menu.Sub.Item leftSection={<IconPalette size={16} />}>
+            {t("Background color")}
+          </Menu.Sub.Item>
+        </Menu.Sub.Target>
+        <Menu.Sub.Dropdown>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
+            {TABLE_COLORS.map((c) => (
+              <button
+                key={c.name}
+                type="button"
+                onClick={() => setBackground(c.color, c.name)}
+                aria-label={t(c.name)}
+                style={{
+                  border: "none",
+                  background: "transparent",
+                  padding: 0,
+                  cursor: "pointer",
+                }}
+              >
+                <ColorSwatch
+                  color={c.color || "#ffffff"}
+                  size={22}
+                  style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
+                />
+              </button>
+            ))}
+          </div>
+        </Menu.Sub.Dropdown>
+      </Menu.Sub>
+
+      <AlignmentSubmenu editor={editor} />
+
+      <Menu.Divider />
+
+      <Menu.Item
+        leftSection={<IconColumnInsertLeft size={16} />}
+        onClick={() => editor.chain().focus().addColumnBefore().run()}
+      >
+        {t("Add column left")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconColumnInsertRight size={16} />}
+        onClick={() => editor.chain().focus().addColumnAfter().run()}
+      >
+        {t("Add column right")}
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item
+        leftSection={<IconEraser size={16} />}
+        onClick={clearCol}
+      >
+        {t("Clear cells")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconColumnRemove size={16} />}
+        onClick={() => editor.chain().focus().deleteColumn().run()}
+      >
+        {t("Delete column")}
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item
+        leftSection={<IconArrowLeft size={16} />}
+        onClick={moveLeft.handleMove}
+        disabled={!moveLeft.canMove}
+      >
+        {t("Move column left")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconArrowRight size={16} />}
+        onClick={moveRight.handleMove}
+        disabled={!moveRight.canMove}
+      >
+        {t("Move column right")}
+      </Menu.Item>
+    </>
+  );
+});
@@ -0,0 +1,138 @@
+import React from "react";
+import type { Editor } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { ColorSwatch, Menu } from "@mantine/core";
+import { TABLE_COLORS } from "../../table-background-color";
+import {
+  IconArrowDown,
+  IconArrowUp,
+  IconEraser,
+  IconPalette,
+  IconRowInsertBottom,
+  IconRowInsertTop,
+  IconRowRemove,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
+import { useTableClear } from "../hooks/use-table-clear";
+import { AlignmentSubmenu } from "./alignment-submenu";
+
+interface RowHandleMenuProps {
+  editor: Editor;
+  index: number;
+  tableNode: ProseMirrorNode;
+  tablePos: number;
+}
+
+export const RowHandleMenu = React.memo(function RowHandleMenu({
+  editor,
+  index,
+  tableNode,
+  tablePos,
+}: RowHandleMenuProps) {
+  const { t } = useTranslation();
+
+  const setBackground = (color: string, name: string) => {
+    editor
+      .chain()
+      .focus()
+      .updateAttributes("tableCell", {
+        backgroundColor: color || null,
+        backgroundColorName: color ? name : null,
+      })
+      .updateAttributes("tableHeader", {
+        backgroundColor: color || null,
+        backgroundColorName: color ? name : null,
+      })
+      .run();
+  };
+
+  const moveUp = useTableMoveRowColumn(editor, "row", index, "up", tableNode, tablePos);
+  const moveDown = useTableMoveRowColumn(editor, "row", index, "down", tableNode, tablePos);
+  const clearRow = useTableClear(editor, tableNode, tablePos, {
+    kind: "row",
+    index,
+  });
+
+  return (
+    <>
+      <Menu.Sub position="right-start">
+        <Menu.Sub.Target>
+          <Menu.Sub.Item leftSection={<IconPalette size={16} />}>
+            {t("Background color")}
+          </Menu.Sub.Item>
+        </Menu.Sub.Target>
+        <Menu.Sub.Dropdown>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
+            {TABLE_COLORS.map((c) => (
+              <button
+                key={c.name}
+                type="button"
+                onClick={() => setBackground(c.color, c.name)}
+                aria-label={t(c.name)}
+                style={{
+                  border: "none",
+                  background: "transparent",
+                  padding: 0,
+                  cursor: "pointer",
+                }}
+              >
+                <ColorSwatch
+                  color={c.color || "#ffffff"}
+                  size={22}
+                  style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
+                />
+              </button>
+            ))}
+          </div>
+        </Menu.Sub.Dropdown>
+      </Menu.Sub>
+
+      <AlignmentSubmenu editor={editor} />
+
+      <Menu.Divider />
+
+      <Menu.Item
+        leftSection={<IconRowInsertTop size={16} />}
+        onClick={() => editor.chain().focus().addRowBefore().run()}
+      >
+        {t("Add row above")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconRowInsertBottom size={16} />}
+        onClick={() => editor.chain().focus().addRowAfter().run()}
+      >
+        {t("Add row below")}
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item leftSection={<IconEraser size={16} />} onClick={clearRow}>
+        {t("Clear cells")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconRowRemove size={16} />}
+        onClick={() => editor.chain().focus().deleteRow().run()}
+      >
+        {t("Delete row")}
+      </Menu.Item>
+
+      <Menu.Divider />
+
+      <Menu.Item
+        leftSection={<IconArrowUp size={16} />}
+        onClick={moveUp.handleMove}
+        disabled={!moveUp.canMove}
+      >
+        {t("Move row up")}
+      </Menu.Item>
+      <Menu.Item
+        leftSection={<IconArrowDown size={16} />}
+        onClick={moveDown.handleMove}
+        disabled={!moveDown.canMove}
+      >
+        {t("Move row down")}
+      </Menu.Item>
+    </>
+  );
+});
@@ -0,0 +1,122 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
+import { Menu } from "@mantine/core";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
+import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
+import { RowHandleMenu } from "./menus/row-handle-menu";
+import classes from "./handle.module.css";
+
+interface RowHandleProps {
+  editor: Editor;
+  index: number;
+  anchorPos: number;
+  tableNode: ProseMirrorNode;
+  tablePos: number;
+}
+
+export const RowHandle = React.memo(function RowHandle({
+  editor,
+  index,
+  anchorPos,
+  tableNode,
+  tablePos,
+}: RowHandleProps) {
+  const { t } = useTranslation();
+  // See ColumnHandle for the rationale: keep the last valid cell DOM cached
+  // so the handle div stays mounted across stale-anchor renders, otherwise
+  // pragmatic-dnd silently aborts an in-flight drag.
+  const lookupCellDom = editor.view.nodeDOM(anchorPos) as HTMLElement | null;
+  const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
+  const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
+  useEffect(() => {
+    if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
+      lastCellDomRef.current = lookupCellDom;
+      setCellDom(lookupCellDom);
+    }
+  }, [lookupCellDom]);
+
+  const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
+
+  const { refs, floatingStyles, middlewareData } = useFloating({
+    placement: "left",
+    middleware: [offset(-4), hide()],
+    whileElementsMounted: autoUpdate,
+  });
+  const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
+
+  useEffect(() => {
+    refs.setReference(cellDom);
+  }, [cellDom, refs]);
+
+  const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
+
+  const [menuOpened, setMenuOpened] = useState(false);
+  const closeMenu = useCallback(() => setMenuOpened(false), []);
+  useTableHandleDrag(editor, "row", handleEl, wrapper, closeMenu);
+
+  const { onOpen, onClose } = useColumnRowMenuLifecycle({
+    editor,
+    orientation: "row",
+    index,
+    tableNode,
+    tablePos,
+  });
+
+  if (!cellDom) return null;
+
+  return (
+    <Menu
+      opened={menuOpened}
+      onChange={setMenuOpened}
+      position="right-start"
+      onOpen={onOpen}
+      onClose={onClose}
+      withinPortal
+      shadow="md"
+    >
+      <Menu.Target>
+        <div
+          ref={(node) => {
+            refs.setFloating(node);
+            setHandleEl(node);
+          }}
+          style={{
+            ...floatingStyles,
+            ...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
+          }}
+          className={clsx(classes.handle, classes.rowHandle)}
+          role="button"
+          tabIndex={0}
+          aria-label={t("Row actions")}
+        >
+          <span style={{ pointerEvents: "none", display: "inline-flex" }}>
+            <GripIcon />
+          </span>
+        </div>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <RowHandleMenu
+          editor={editor}
+          index={index}
+          tableNode={tableNode}
+          tablePos={tablePos}
+        />
+      </Menu.Dropdown>
+    </Menu>
+  );
+});
+
+function GripIcon() {
+  return (
+    <svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
+      <path
+        fill="currentColor"
+        d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,44 @@
+import React from "react";
+import type { Editor } from "@tiptap/react";
+import { useTableHandleState } from "./hooks/use-table-handle-state";
+import { ColumnHandle } from "./column-handle";
+import { RowHandle } from "./row-handle";
+import { CellChevron } from "./cell-chevron";
+
+interface TableHandlesLayerProps {
+  editor: Editor | null;
+}
+
+export const TableHandlesLayer = React.memo(function TableHandlesLayer({
+  editor,
+}: TableHandlesLayerProps) {
+  const state = useTableHandleState(editor);
+
+  if (!editor || !editor.isEditable) return null;
+  if (!state.hoveringCell || !state.tableNode || state.tablePos == null) return null;
+
+  return (
+    <>
+      <ColumnHandle
+        editor={editor}
+        index={state.hoveringCell.colIndex}
+        anchorPos={state.hoveringCell.colFirstCellPos}
+        tableNode={state.tableNode!}
+        tablePos={state.tablePos!}
+      />
+      <RowHandle
+        editor={editor}
+        index={state.hoveringCell.rowIndex}
+        anchorPos={state.hoveringCell.rowFirstCellPos}
+        tableNode={state.tableNode!}
+        tablePos={state.tablePos!}
+      />
+      <CellChevron
+        editor={editor}
+        cellPos={state.hoveringCell.cellPos}
+        tableNode={state.tableNode!}
+        tablePos={state.tablePos!}
+      />
+    </>
+  );
+});
@@ -22,7 +22,7 @@ interface TableBackgroundColorProps {
  editor: Editor | null;
 }

-const TABLE_COLORS: TableColorItem[] = [
+export const TABLE_COLORS: TableColorItem[] = [
  { name: "Default", color: "" },
  { name: "Blue", color: "#b4d5ff" },
  { name: "Green", color: "#acf5d2" },
@@ -104,12 +104,12 @@ export const TableMenu = React.memo(
          element.style.zIndex = "99";
        }}
        options={{
-          placement: "top",
+          placement: "bottom",
          offset: {
            mainAxis: 15,
          },
          flip: {
-            fallbackPlacements: ["top", "bottom"],
+            fallbackPlacements: ["bottom", "top"],
            padding: { top: 35 + 15, left: 8, right: 8, bottom: -Infinity },
            boundary: editor.options.element as HTMLElement,
          },
@@ -86,11 +86,11 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
      transitionProps={{ transition: "pop" }}
    >
      <Popover.Target>
-        <Tooltip label={t("Text alignment")} withArrow>
+        <Tooltip label={t("Text align")} withArrow>
          <ActionIcon
            variant="subtle"
            size="lg"
-            aria-label={t("Text alignment")}
+            aria-label={t("Text align")}
            onClick={() => setOpened(!opened)}
          >
            <activeItem.icon size={18} />
@@ -60,6 +60,23 @@ function nodeDOMAtCoords(
  options: GlobalDragHandleOptions,
  view: EditorView,
 ) {
+  // Custom nodes (transclusion, …) render via tiptap's React node-view
+  // renderer, which emits `class="react-renderer node-${name}"` on the
+  // live wrapper — the `data-type` attribute is for static HTML
+  // serialization only. Match both so we cover live and parsed DOM.
+  // Inside a custom node, also match plain `p` so the first paragraph
+  // (which doesn't match `:not(:first-child)`) still gets its own
+  // handle; only hovers on the custom node's padding/border fall
+  // through to the wrapper.
+  const customSelectors = options.customNodes.flatMap((node) => [
+    `[data-type=${node}]`,
+    `.node-${node}`,
+  ]);
+  const customParagraphSelectors = options.customNodes.flatMap((node) => [
+    `[data-type=${node}] p`,
+    `.node-${node} p`,
+  ]);
+
  const selectors = [
    "li",
    "p:not(:first-child)",
@@ -71,7 +88,13 @@ function nodeDOMAtCoords(
    "h4",
    "h5",
    "h6",
-    ...options.customNodes.map((node) => `[data-type=${node}]`),
+    // Tables nested in another block (toggle, transclusion, …) have a
+    // wrapper that isn't a direct child of .ProseMirror, so the
+    // parent-check below skips it. Match the wrapper explicitly so the
+    // handle shows up even with empty cells.
+    ".tableWrapper",
+    ...customParagraphSelectors,
+    ...customSelectors,
  ].join(", ");
  return document
    .elementsFromPoint(coords.x, coords.y)
@@ -99,6 +122,22 @@ function nodePosAtDOM(
  })?.inside;
 }

+function isCustomNodeDOM(
+  elem: Element | null | undefined,
+  options: GlobalDragHandleOptions,
+): boolean {
+  if (!elem) return false;
+  for (const name of options.customNodes) {
+    if (
+      elem.getAttribute("data-type") === name ||
+      elem.classList.contains(`node-${name}`)
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
 function calcNodePos(pos: number, view: EditorView) {
  const $pos = view.state.doc.resolve(pos);
  if ($pos.depth > 1) return $pos.before($pos.depth);
@@ -137,7 +176,6 @@ export function DragHandlePlugin(

    const nodePos = view.state.doc.resolve(fromSelectionPos);

-    // Check if nodePos points to the top level node
    if (nodePos.node().type.name === "doc") differentNodeSelected = true;
    else {
      const nodeSelection = NodeSelection.create(
@@ -166,14 +204,46 @@ export function DragHandlePlugin(
    } else {
      selection = NodeSelection.create(view.state.doc, draggedNodePos);

-      // if inline node is selected, e.g mention -> go to the parent node to select the whole node
-      // if table row is selected, go to the parent node to select the whole node
-      if (
-        (selection as NodeSelection).node.type.isInline ||
-        (selection as NodeSelection).node.type.name === "tableRow"
-      ) {
-        let $pos = view.state.doc.resolve(selection.from);
-        selection = NodeSelection.create(view.state.doc, $pos.before());
+      const $sel = view.state.doc.resolve(selection.from);
+
+      if (isCustomNodeDOM(node, options)) {
+        // The drag landed on a custom-node container (transclusion etc.).
+        // Walk up to the matching node so the drag moves the whole
+        // container, not whatever inner element the click landed on.
+        const customTypes = new Set(options.customNodes);
+        for (let d = $sel.depth; d > 0; d--) {
+          if (customTypes.has($sel.node(d).type.name)) {
+            selection = NodeSelection.create(
+              view.state.doc,
+              $sel.before(d),
+            );
+            break;
+          }
+        }
+      } else {
+        // If the selected node lives inside a table (at any nesting
+        // depth), promote to the whole table — the global drag handle is
+        // meant to move the table as a single block, not a row/cell. The
+        // earlier tableRow-only check only worked when the table sat at
+        // the doc root; once wrapped in another node (toggle, layout,
+        // etc.) the selection lands on a cell/paragraph and that check
+        // never fired.
+        let tableDepth = -1;
+        for (let d = $sel.depth; d > 0; d--) {
+          if ($sel.node(d).type.name === "table") {
+            tableDepth = d;
+            break;
+          }
+        }
+        if (tableDepth > 0) {
+          selection = NodeSelection.create(
+            view.state.doc,
+            $sel.before(tableDepth),
+          );
+        } else if ((selection as NodeSelection).node.type.isInline) {
+          // Inline node (e.g. mention): walk up to the parent block.
+          selection = NodeSelection.create(view.state.doc, $sel.before());
+        }
      }
    }
    view.dispatch(view.state.tr.setSelection(selection));
@@ -313,6 +383,27 @@ export function DragHandlePlugin(
            return;
          }

+          const isCustomNode = isCustomNodeDOM(node, options);
+
+          // Custom nodes pin the handle to the inner NodeViewWrapper's top-left:
+          // the natural anchor sits in transient/empty space outside the visible block.
+          if (isCustomNode) {
+            // tiptap React node-views emit an outer `.react-renderer` whose first
+            // child is the visible NodeViewWrapper; walk to that outer first since
+            // `node` may be either the outer or an inner element with data-type.
+            const rendererOuter =
+              (node.closest(".react-renderer") as HTMLElement | null) ?? node;
+            const inner =
+              (rendererOuter.firstElementChild as HTMLElement | null) ??
+              rendererOuter;
+            const innerRect = absoluteRect(inner);
+            if (!dragHandleElement) return;
+            dragHandleElement.style.left = `${innerRect.left + 4}px`;
+            dragHandleElement.style.top = `${innerRect.top + 4}px`;
+            showDragHandle();
+            return;
+          }
+
          const compStyle = window.getComputedStyle(node);
          const parsedLineHeight = parseInt(compStyle.lineHeight, 10);
          const lineHeight = isNaN(parsedLineHeight)
@@ -328,6 +419,13 @@ export function DragHandlePlugin(
          if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
            rect.left -= options.dragHandleWidth;
          }
+          // Tables: clear the table's own row-drag handle so the two
+          // grips don't stack on each other. `nodeDOMAtCoords` returns
+          // the wrapper for top-level hovers (wrapper is direct child of
+          // .ProseMirror) and a descendant for deeper hovers — cover both.
+          if (node.closest(".tableWrapper")) {
+            rect.left -= options.dragHandleWidth;
+          }
          rect.width = options.dragHandleWidth;

          if (!dragHandleElement) return;
@@ -45,6 +45,9 @@ import {
  SearchAndReplace,
  Mention,
  TableDndExtension,
+  TableHandleCommandsExtension,
+  TableHeaderPin,
+  TableReadonlySort,
  Subpages,
  Heading,
  Highlight,
@@ -56,6 +59,7 @@ import {
  Status,
  TransclusionSource,
  TransclusionReference,
+  TableView,
 } from "@docmost/editor-ext";
 import {
  randomElement,
@@ -259,11 +263,16 @@ export const mainExtensions = [
    resizable: true,
    lastColumnResizable: true,
    allowTableNodeSelection: true,
+    cellMinWidth: 49,
+    View: TableView,
  }),
  TableRow,
  TableCell,
  TableHeader,
  TableDndExtension,
+  TableHandleCommandsExtension,
+  TableHeaderPin,
+  TableReadonlySort,
  MathInline.configure({
    view: MathInlineView,
  }),
@@ -44,6 +44,7 @@ import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubbl
 import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
 import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
+import { TableHandlesLayer } from "@/features/editor/components/table/handle/table-handles-layer";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
 import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
@@ -424,7 +425,7 @@ export default function PageEditor({
                <EditorLinkMenu editor={editor} />
                <EditorBubbleMenu editor={editor} />
                <TableMenu editor={editor} />
-                <TableCellMenu editor={editor} appendTo={menuContainerRef} />
+                <TableHandlesLayer editor={editor} />
                <ImageMenu editor={editor} />
                <VideoMenu editor={editor} />
                <PdfMenu editor={editor} />
@@ -203,7 +203,8 @@
    }
  }

-  .resize-cursor {
+  &.resize-cursor,
+  &.resize-cursor * {
    cursor: ew-resize;
    cursor: col-resize;
  }
@@ -15,7 +15,8 @@
 }

 .table-dnd-drop-indicator {
-  background-color: #adf;
+  background-color: var(--mantine-color-blue-5);
+  z-index: 3;
 }

 .ProseMirror {
@@ -57,13 +58,14 @@
    }

    .column-resize-handle {
-      background-color: #adf;
+      background-color: var(--mantine-color-blue-5);
      bottom: -1px;
      position: absolute;
-      right: -2px;
+      right: -1px;
      pointer-events: none;
      top: 0;
-      width: 4px;
+      width: 2px;
+      z-index: 3;
    }

    .selectedCell:after {
@@ -129,6 +131,139 @@
  }
 }

+
+/* Header-row pinning. Two CSS paths, picked by `header-pin/controller.ts`:
+   - native sticky (preferred): wrapper drops its overflow constraint so
+     `position: sticky` on the row can resolve against the document scroll.
+   - transform fallback: wrapper keeps `overflow-x: auto` for horizontal
+     scrolling; the row is positioned imperatively per scroll frame.
+
+   `--editor-pin-offset` is published to :root by `pinOffsetWatcher` in
+   `header-pin/offset.ts`, measured against the lowest fixed surface above
+   the editor (app shell header, page header, fixed toolbar). */
+
+.tableWrapper.tableWrapperNoOverflow,
+.tableWrapper.tableWrapperNoOverflow table {
+  overflow: visible;
+}
+
+.tableWrapper.tableHeaderPinned table tr:first-child {
+  z-index: 2;
+}
+
+.tableWrapper.tableWrapperNoOverflow.tableHeaderPinned table tr:first-child {
+  position: sticky;
+  top: var(--editor-pin-offset, 90px);
+}
+
+.tableWrapper.tableHeaderPinned:not(.tableWrapperNoOverflow) table tr:first-child {
+  position: relative;
+  transform: translateY(var(--table-pin-offset, 0px));
+}
+
+@media print {
+  .tableWrapper.tableHeaderPinned table tr:first-child {
+    position: static;
+    transform: none;
+  }
+}
+
+.tableReadonlySortChevron {
+  /* Anchor to the cell's right edge, vertically centered with the cell
+     content. The cell content (a <p>) is block-level so an inline chevron
+     would wrap to a new line; absolute positioning takes it out of flow. */
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  background: light-dark(
+    rgba(55, 53, 47, 0.08),
+    rgba(255, 255, 255, 0.08)
+  );
+  color: light-dark(
+    rgba(55, 53, 47, 0.55),
+    rgba(255, 255, 255, 0.55)
+  );
+  user-select: none;
+  cursor: pointer;
+  z-index: 1;
+  /* Hidden by default; revealed on header-cell hover or when this column is
+     the active sort (see selectors below). */
+  opacity: 0;
+  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
+}
+
+.ProseMirror table th:hover .tableReadonlySortChevron,
+.tableReadonlySortChevron[data-sort] {
+  opacity: 1;
+}
+
+.ProseMirror table th:has(.tableReadonlySortChevron) {
+  padding-right: 30px;
+}
+
+.tableReadonlySortChevron:hover {
+  background: light-dark(
+    rgba(55, 53, 47, 0.16),
+    rgba(255, 255, 255, 0.16)
+  );
+}
+
+/* Immediate tooltip on the chevron — same style language as the rest of the
+   app (small, dark, rounded), unlike the native `title` tooltip which only
+   appears after a long delay. */
+.tableReadonlySortChevron::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  /* Below the chevron — placing it above the cell hits the table's
+     overflow clipping (the wrapper has `overflow-x: auto` which forces
+     `overflow-y: auto` per spec). */
+  top: calc(100% + 6px);
+  right: 0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: var(--mantine-color-dark-7);
+  color: var(--mantine-color-white);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+  z-index: 10;
+}
+
+.tableReadonlySortChevron:hover::after {
+  opacity: 1;
+}
+
+.tableReadonlySortChevron svg {
+  display: block;
+}
+
+.tableReadonlySortChevron[data-sort="asc"],
+.tableReadonlySortChevron[data-sort="desc"] {
+  background: light-dark(
+    var(--mantine-color-blue-1),
+    var(--mantine-color-blue-9)
+  );
+  color: light-dark(
+    var(--mantine-color-blue-7),
+    var(--mantine-color-blue-2)
+  );
+}
+
+.tableReadonlySortChevron[data-sort="asc"] svg {
+  transform: rotate(180deg);
+}
+
 .editor-container:has(.table-dnd-drop-indicator[data-dragging="true"]) {
  .prosemirror-dropcursor-block {
    display: none;
@@ -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 { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
+import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.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 [tree] = useAtom(treeApiAtom);
+  const { handleDelete } = useTreeMutation(page?.spaceId ?? "");
  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
    useDisclosure(false);
  const [
@@ -183,7 +183,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
  };

  const handleDeletePage = () => {
-    openDeleteModal({ onConfirm: () => tree?.delete(page.id) });
+    openDeleteModal({ onConfirm: () => handleDelete(page.id) });
  };

  const handleToggleFavorite = () => {
@@ -8,7 +8,7 @@ interface Props {
 }
 export default function PageHeader({ readOnly }: Props) {
  return (
-    <div className={classes.header}>
+    <div className={classes.header} data-page-header="true">
      <Group justify="space-between" h="100%" px="md" wrap="nowrap" className={classes.group}>
        <Breadcrumb />

@@ -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 { SimpleTree } from "react-arborist";
+import { treeModel } from "@/features/page/tree/model/tree-model";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";

@@ -170,11 +170,8 @@ 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 (!treeApi.find(restoredPage.id)) {
+      if (!treeModel.find(treeData, restoredPage.id)) {
        // Create the tree node data with hasChildren from backend
        const nodeData: SpaceTreeNode = {
          id: restoredPage.id,
@@ -193,24 +190,17 @@ export function useRestorePageMutation() {
        let index = 0;

        if (parentId) {
-          const parentNode = treeApi.find(parentId);
+          const parentNode = treeModel.find(treeData, parentId);
          if (parentNode) {
            index = parentNode.children?.length || 0;
          }
        } else {
          // Root level page
-          index = treeApi.data.length;
+          index = treeData.length;
        }

        // Add the node to the tree
-        treeApi.create({
-          parentId,
-          index,
-          data: nodeData,
-        });
-
-        // Update the tree data
-        setTreeData(treeApi.data);
+        setTreeData(treeModel.insert(treeData, parentId, nodeData, index));

        // Emit websocket event to sync with other users
        setTimeout(() => {
@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+
+export type OpenMap = Record<string, boolean>;
+
+export const openTreeNodesAtom = atom<OpenMap>({});
@@ -1,5 +0,0 @@
-import { atom } from "jotai";
-import { TreeApi } from "react-arborist";
-import { SpaceTreeNode } from "../types";
-
-export const treeApiAtom = atom<TreeApi<SpaceTreeNode> | null>(null);
@@ -0,0 +1,26 @@
+.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;
+}
@@ -0,0 +1,9 @@
+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>;
+}
@@ -0,0 +1,39 @@
+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;
+}
@@ -0,0 +1,398 @@
+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;
@@ -0,0 +1,541 @@
+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>;
@@ -0,0 +1,259 @@
+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}
+      />
+    </>
+  );
+}
@@ -0,0 +1,288 @@
+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>
+  );
+}
@@ -1,110 +1,47 @@
-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 { 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 {
  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 { 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 { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
+import { openTreeNodesAtom } from "@/features/page/tree/atoms/open-tree-nodes-atom.ts";
 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 {
-  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 { 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 { extractPageSlugId } from "@/lib";
-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";
+import { DocTree } from "./doc-tree";
+import { SpaceTreeRow } from "./space-tree-row";

 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, controllers } =
-    useTreeMutation<TreeApi<SpaceTreeNode>>(spaceId);
+  const [data, setData] = useAtom(treeDataAtom);
+  const { handleMove } = useTreeMutation(spaceId);
  const {
    data: pagesData,
    hasNextPage,
    fetchNextPage,
    isFetching,
-  } = 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);
+  } = useGetRootSidebarPagesQuery({ spaceId });
+  const [openTreeNodes, setOpenTreeNodes] = useAtom(openTreeNodesAtom);
  const [isDataLoaded, setIsDataLoaded] = useState(false);
  const spaceIdRef = useRef(spaceId);
  spaceIdRef.current = spaceId;
@@ -123,23 +60,24 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
  }, [hasNextPage, fetchNextPage, isFetching, spaceId]);

  useEffect(() => {
-    if (pagesData?.pages && !hasNextPage) {
-      const allItems = pagesData.pages.flatMap((page) => page.items);
-      const treeData = buildTree(allItems);
+    if (!pagesData?.pages || hasNextPage) return;

-      setData((prev) => {
-        // fresh space; full reset
-        if (prev.length === 0 || prev[0]?.spaceId !== spaceId) {
-          setIsDataLoaded(true);
-          setOpenTreeNodes({});
-          return treeData;
-        }
+    const allItems = pagesData.pages.flatMap((page) => page.items);
+    const treeData = buildTree(allItems);

-        // same space; append only missing roots
-        setIsDataLoaded(true);
-        return mergeRootTrees(prev, 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);
  }, [pagesData, hasNextPage, spaceId]);

  useEffect(() => {
@@ -148,7 +86,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 = dfs(treeApiRef.current?.root, currentPage.id);
+        const node = treeModel.find(data, currentPage.id);
        if (node) {
          // if node is found, no need to traverse its ancestors
          return;
@@ -160,14 +98,12 @@ 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,
@@ -185,7 +121,6 @@ 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;

@@ -195,15 +130,24 @@ 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) =>
-              appendNodeChildren(currentData, rootChild.id, rootChild.children),
+              treeModel.appendChildren(
+                currentData,
+                rootChild.id,
+                rootChild.children ?? [],
+              ),
            );

-            setTimeout(() => {
-              // focus on node and open all parents
-              treeApiRef.current?.select(currentPage.id);
-            }, 100);
+            // 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;
+            });
          });
        }
      }
@@ -212,556 +156,76 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
    fetchData();
  }, [isDataLoaded, currentPage?.id]);

-  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 openIds = useMemo(
+    () => new Set(Object.keys(openTreeNodes).filter((k) => openTreeNodes[k])),
+    [openTreeNodes],
+  );

-  // Clean up tree API on unmount
-  useEffect(() => {
-    return () => {
-      // @ts-ignore
-      setTreeApi(null);
-    };
-  }, [setTreeApi]);
+  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],
+  );

-  const filteredData = data.filter((node) => node?.spaceId === spaceId);
+  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],
+  );

  return (
-    <div ref={mergedRef} className={classes.treeContainer}>
+    <div className={classes.treeContainer}>
      {isDataLoaded && filteredData.length === 0 && (
        <Text size="xs" c="dimmed" py="xs" px="sm">
          {t("No pages yet")}
        </Text>
      )}
-      {isRootReady && rootElement.current && (
-        <Tree
+      {isDataLoaded && filteredData.length > 0 && (
+        <DocTree<SpaceTreeNode>
          data={filteredData}
-          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>
+          openIds={openIds}
+          selectedId={currentPage?.id}
+          renderRow={renderRow}
+          onMove={handleMove}
+          onToggle={handleToggle}
+          readOnly={readOnly}
+          disableDrag={disableDragDrop}
+          disableDrop={disableDragDrop}
+          getDragLabel={getDragLabel}
+          aria-label={t("Pages")}
+        />
      )}
    </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>
-  );
-}
@@ -0,0 +1,100 @@
+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' });
+  });
+});
@@ -0,0 +1,36 @@
+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,
+    ),
+  };
+}
@@ -1,16 +1,15 @@
-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 { IMovePage, IPage } from "@/features/page/types/page.types.ts";
+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 { 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 {
  useCreatePageMutation,
  useRemovePageMutation,
@@ -18,258 +17,250 @@ 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 function useTreeMutation<T>(spaceId: string) {
-  const [data, setData] = useAtom(treeDataAtom);
-  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
+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();
  const createPageMutation = useCreatePageMutation();
  const updatePageMutation = useUpdatePageMutation();
  const removePageMutation = useRemovePageMutation();
  const movePageMutation = useMovePageMutation();
  const navigate = useNavigate();
-  const { spaceSlug } = useParams();
-  const { pageSlug } = useParams();
+  const { spaceSlug, pageSlug } = useParams();
  const emit = useQueryEmit();

-  const onCreate: CreateHandler<T> = async ({ parentId, index, type }) => {
-    const payload: { spaceId: string; parentPageId?: string } = {
-      spaceId: spaceId,
-    };
-    if (parentId) {
-      payload.parentPageId = parentId;
-    }
+  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;

-    let createdPage: IPage;
-    try {
-      createdPage = await createPageMutation.mutateAsync(payload);
-    } catch (err) {
-      throw new Error("Failed to create page");
-    }
+      const payload = dropOpToMovePayload(before, sourceId, op);
+      const source = treeModel.find(before, sourceId) as SpaceTreeNode | null;
+      if (!source) return;
+      const oldParentId = source.parentPageId ?? null;

-    const data = {
-      id: createdPage.id,
-      slugId: createdPage.slugId,
-      name: "",
-      position: createdPage.position,
-      spaceId: createdPage.spaceId,
-      parentPageId: createdPage.parentPageId,
-      children: [],
-    } as any;
+      // optimistic apply with the new position from the payload
+      let optimistic = treeModel.update(after, sourceId, {
+        position: payload.position,
+        parentPageId: payload.parentPageId,
+      } 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;
-
-    tree.create({ parentId, index, data });
-    setData(tree.data);
-
-    setTimeout(() => {
-      emit({
-        operation: "addTreeNode",
-        spaceId: spaceId,
-        payload: {
-          parentId,
-          index,
-          data,
-        },
-      });
-    }, 50);
-
-    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,
-        });
+      // 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>);
+        }
      }
-    }

-    setData(tree.data);
+      // 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>);
+      }

-    const payload: IMovePage = {
-      pageId: draggedNodeId,
-      position: newPosition,
-      parentPageId: args.parentId,
-    };
+      setData(optimistic);

-    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);
+      } catch {
+        setData(before);
+        notifications.show({
+          message: t("Failed to move page"),
+          color: "red",
+        });
+        return;
+      }

-    try {
-      await movePageMutation.mutateAsync(payload);
+      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,
+      };

-      updateCacheOnMovePage(spaceId, draggedNodeId, oldParentId, args.parentId, pageData);
+      updateCacheOnMovePage(
+        spaceId,
+        sourceId,
+        oldParentId,
+        payload.parentPageId,
+        pageData,
+      );

      setTimeout(() => {
        emit({
          operation: "moveTreeNode",
          spaceId: spaceId,
          payload: {
-            id: draggedNodeId,
-            parentId: args.parentId,
+            id: sourceId,
+            parentId: payload.parentPageId,
            oldParentId,
-            index: args.index,
-            position: newPosition,
+            index: result.index,
+            position: payload.position,
            pageData,
          },
        });
      }, 50);
-    } catch (error) {
-      console.error("Error moving page:", error);
-    }
-  };
+    },
+    [setData, store, movePageMutation, spaceId, emit, t],
+  );

-  const onRename: RenameHandler<T> = ({ name, id }) => {
-    tree.update({ id, changes: { name } as any });
-    setData(tree.data);
+  const handleCreate = useCallback(
+    async (parentId: string | null) => {
+      const payload: { spaceId: string; parentPageId?: string } = { spaceId };
+      if (parentId) payload.parentPageId = parentId;

-    try {
-      updatePageMutation.mutateAsync({ pageId: id, title: name });
-    } catch (error) {
-      console.error("Error updating page title:", error);
-    }
-  };
+      let createdPage: IPage;
+      try {
+        createdPage = await createPageMutation.mutateAsync(payload);
+      } catch {
+        throw new Error("Failed to create page");
+      }

-  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;
+      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;
      } else {
-        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;
+        const parent = treeModel.find(current, parentId);
+        lastIndex = parent?.children?.length ?? 0;
      }

-      tree.drop({ id: args.ids[0] });
-      setData(tree.data);
-
-      if (pageSlug && isPageInNode(node, pageSlug.split("-")[1])) {
-        navigate(getSpaceUrl(spaceSlug));
-      }
+      setData((prev) => treeModel.insert(prev, parentId, newNode, lastIndex));

      setTimeout(() => {
        emit({
-          operation: "deleteTreeNode",
-          spaceId: spaceId,
-          payload: { node: node.data },
+          operation: "addTreeNode",
+          spaceId,
+          payload: {
+            parentId,
+            index: lastIndex,
+            data: newNode,
+          },
        });
      }, 50);
-    } catch (error) {
-      console.error("Failed to delete page:", error);
-    }
-  };

-  const controllers = { onMove, onRename, onCreate, onDelete };
-  return { data, setData, controllers } as const;
+      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;
 }
@@ -0,0 +1,329 @@
+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);
+  });
+});
@@ -0,0 +1,222 @@
+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 } };
+  },
+};
@@ -0,0 +1,20 @@
+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;
+};
@@ -5,10 +5,11 @@
 .treeContainer {
    height: 100%;
    min-width: 0;
-
-    > div, > div > .tree {
-        height: 100% !important;
-    }
+    /* 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;
 }

 .node {
@@ -17,76 +18,39 @@
    display: flex;
    align-items: center;
    height: 100%;
-    width: 93%; /* not to overlap with scroll bar */
+    width: 100%;
    text-decoration: none;
    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));

-    &: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));*/
-     }
+    /* 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 .actions {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }

    .actions {
-        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));
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        margin-left: 4px;
+        opacity: 0;
+        pointer-events: none;
    }

-      &:hover .actions {
-       visibility: visible;
+    &:focus-within .actions {
+        opacity: 1;
+        pointer-events: auto;
    }
-
 }

-.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);
@@ -95,8 +59,12 @@

 .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;
 }
@@ -108,3 +76,113 @@
 [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;
+}
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const openSharedTreeNodesAtom = atom<Record<string, boolean>>({});
@@ -1,14 +1,11 @@
 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 { useEffect, useMemo, useRef, useState } from "react";
-import { useElementSize, useMergedRef } from "@mantine/hooks";
-import { SpaceTreeNode } from "@/features/page/tree/types.ts";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Link, useParams } from "react-router-dom";
-import { atom, useAtom } from "jotai/index";
+import { useAtom } from "jotai";
 import { useTranslation } from "react-i18next";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import clsx from "clsx";
@@ -20,176 +17,204 @@ 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 SharedTree {
+interface SharedTreeProps {
  sharedPageTree: ISharedPageTree;
 }

-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);
+export default function SharedTree({ sharedPageTree }: SharedTreeProps) {
+  const { t } = useTranslation();
+  const treeRef = useRef<DocTreeApi | null>(null);
  const { pageSlug } = useParams();
-  const [openTreeNodes, setOpenTreeNodes] = useAtom<OpenMap>(
-    openSharedTreeNodesAtom,
-  );
+  const [openTreeNodes, setOpenTreeNodes] = useAtom(openSharedTreeNodesAtom);

  const currentNodeId = extractPageSlugId(pageSlug);

  const treeData: SharedPageTreeNode[] = useMemo(() => {
-    if (!sharedPageTree?.pageTree) return;
+    if (!sharedPageTree?.pageTree) return [] as SharedPageTreeNode[];
    return buildSharedPageTree(sharedPageTree.pageTree);
  }, [sharedPageTree?.pageTree]);

-  useEffect(() => {
-    const parentNodeId = treeData?.[0]?.slugId;
-
-    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);
-      });
-    }
-  }, [treeData, tree]);
+  const openIds = useMemo(
+    () =>
+      new Set(
+        Object.keys(openTreeNodes).filter((k) => openTreeNodes[k]),
+      ),
+    [openTreeNodes],
+  );

  useEffect(() => {
-    if (currentNodeId && tree) {
-      setTimeout(() => {
-        // focus on node and open all parents
-        tree?.select(currentNodeId, { align: "auto" });
-      }, 200);
-    } else {
-      tree?.deselectAll();
+    // 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]);
+
+  useEffect(() => {
+    if (currentNodeId) {
+      treeRef.current?.select(currentNodeId, { scrollIntoView: true });
    }
-  }, [currentNodeId, tree]);
+  }, [currentNodeId, treeData]);
+
+  // 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",
+    [],
+  );

  if (!sharedPageTree || !sharedPageTree?.pageTree) {
    return null;
  }

  return (
-    <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 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>
  );
 }

-function Node({ node, style, tree }: NodeRendererProps<any>) {
+// 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>) {
  const { shareId } = useParams();
  const { t } = useTranslation();
  const [, setMobileSidebarState] = useAtom(mobileSidebarAtom);

  const pageUrl = buildSharedPageUrl({
    shareId: shareId,
-    pageSlugId: node.data.slugId,
-    pageTitle: node.data.name,
+    pageSlugId: node.slugId,
+    pageTitle: node.name,
  });

  return (
-    <>
-      <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>
-    </>
+    <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>
  );
 }

-interface PageArrowProps {
-  node: NodeApi<SpaceTreeNode>;
+interface SharedPageArrowProps {
+  isOpen: boolean;
+  hasChildren: boolean;
+  onToggle: () => void;
 }

-function PageArrow({ node }: PageArrowProps) {
+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>
+    );
+  }
+
  return (
    <ActionIcon
      size={20}
      variant="subtle"
      c="gray"
+      tabIndex={-1}
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
-        node.toggle();
+        onToggle();
      }}
    >
-      {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}
+      {isOpen ? (
+        <IconChevronDown stroke={2} size={16} />
+      ) : (
+        <IconChevronRight stroke={2} size={16} />
+      )}
    </ActionIcon>
  );
 }
@@ -28,7 +28,7 @@ import {
 import classes from "./space-sidebar.module.css";
 import React from "react";
 import { useAtom } from "jotai";
-import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
+import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
 import { Link, useLocation, useParams } from "react-router-dom";
 import clsx from "clsx";
 import { useDisclosure } from "@mantine/hooks";
@@ -56,7 +56,6 @@ 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);
@@ -68,13 +67,14 @@ export function SpaceSidebar() {

  const spaceRules = space?.membership?.permissions;
  const spaceAbility = useSpaceAbility(spaceRules);
+  const { handleCreate } = useTreeMutation(space?.id ?? "");

  if (!space) {
    return <></>;
  }

  function handleCreatePage() {
-    tree?.create({ parentId: null, type: "internal", index: 0 });
+    handleCreate(null);
  }

  return (
@@ -1,37 +1,27 @@
-import { useEffect, useRef } from "react";
+import { useEffect } 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 { SimpleTree } from "react-arborist";
+import { treeModel } from "@/features/page/tree/model/tree-model";
 import localEmitter from "@/lib/local-emitter.ts";

 export const useTreeSocket = () => {
  const [socket] = useAtom(socketAtom);
-  const [treeData, setTreeData] = useAtom(treeDataAtom);
+  const [, setTreeData] = useAtom(treeDataAtom);
  const queryClient = useQueryClient();
-  const initialTreeData = useRef(treeData);
-
-  useEffect(() => {
-    initialTreeData.current = treeData;
-  }, [treeData]);

  useEffect(() => {
    const updateNodeName = (event) => {
-      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);
-        }
-      }
+      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>);
+      });
    };

    localEmitter.on("message", updateNodeName);
@@ -42,70 +32,110 @@ 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") {
-            if (treeApi.find(event.id)) {
+            setTreeData((prev) => {
+              if (!treeModel.find(prev, event.id)) return prev;
+              let next = prev;
              if (event.payload?.title !== undefined) {
-                treeApi.update({
-                  id: event.id,
-                  changes: { name: event.payload.title },
-                });
+                next = treeModel.update(next, event.id, {
+                  name: event.payload.title,
+                } as Partial<SpaceTreeNode>);
              }
              if (event.payload?.icon !== undefined) {
-                treeApi.update({
-                  id: event.id,
-                  changes: { icon: event.payload.icon },
-                });
+                next = treeModel.update(next, event.id, {
+                  icon: event.payload.icon,
+                } as Partial<SpaceTreeNode>);
              }
-              setTreeData(treeApi.data);
-            }
+              return next;
+            });
          }
          break;
        case "addTreeNode":
-          if (treeApi.find(event.payload.data.id)) return;
-
-          treeApi.create({
-            parentId: event.payload.parentId,
-            index: event.payload.index,
-            data: event.payload.data,
+          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;
          });
-          setTreeData(treeApi.data);
-
          break;
        case "moveTreeNode":
-          // move node
-          if (treeApi.find(event.payload.id)) {
-            treeApi.move({
-              id: event.payload.id,
-              parentId: event.payload.parentId,
+          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,
              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);
+            }

-            // update node position
-            treeApi.update({
-              id: event.payload.id,
-              changes: {
-                position: event.payload.position,
-              },
-            });
+            let next = treeModel.update(placed, event.payload.id, {
+              position: event.payload.position,
+              parentPageId: newParentId,
+            } as Partial<SpaceTreeNode>);

-            setTreeData(treeApi.data);
-          }
+            // 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>);
+            }

+            return next;
+          });
          break;
        case "deleteTreeNode":
-          if (treeApi.find(event.payload.node.id)) {
-            treeApi.drop({ id: event.payload.node.id });
-            setTreeData(treeApi.data);
-
+          setTreeData((prev) => {
+            if (!treeModel.find(prev, event.payload.node.id)) return prev;
            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;
      }
    });
@@ -0,0 +1,17 @@
+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: [],
+  },
+});
@@ -54,7 +54,7 @@ export class WsService {
      return;
    }

-    await this.broadcastToAuthorizedUsers(room, client.data.userId, pageId, data);
+    await this.broadcastToAuthorizedUsers(room, client.id, pageId, data);
  }

  async invalidateSpaceRestrictionCache(spaceId: string): Promise<void> {
@@ -115,14 +115,17 @@ export class WsService {

  private async broadcastToAuthorizedUsers(
    room: string,
-    excludeUserId: string | null,
+    excludeSocketId: string | null,
    pageId: string,
    data: any,
  ): Promise<void> {
    const sockets = await this.server.in(room).fetchSockets();

-    const otherSockets = excludeUserId
-      ? sockets.filter((s) => s.data.userId !== excludeUserId)
+    // 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)
      : sockets;
    if (otherSockets.length === 0) return;

@@ -95,7 +95,6 @@
  "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": {
@@ -1,76 +0,0 @@
-import { DraggingDOMs } from "./utils";
-
-const EDGE_THRESHOLD = 100;
-const SCROLL_SPEED = 10;
-
-export class AutoScrollController {
-    private _autoScrollInterval?: number;
-
-    checkYAutoScroll = (clientY: number) => {
-        const scrollContainer = document.documentElement;
-
-        if (clientY < 0 + EDGE_THRESHOLD) {
-            this._startYAutoScroll(scrollContainer!, -1 * SCROLL_SPEED);
-        } else if (clientY > window.innerHeight - EDGE_THRESHOLD) {
-            this._startYAutoScroll(scrollContainer!, SCROLL_SPEED);
-        } else {
-            this._stopYAutoScroll();
-        }
-    }
-
-    checkXAutoScroll = (clientX: number, draggingDOMs: DraggingDOMs) => {
-        const table = draggingDOMs?.table;
-        if (!table) return;
-
-        const scrollContainer = table.closest<HTMLElement>('.tableWrapper');
-        const editorRect = scrollContainer.getBoundingClientRect();
-        if (!scrollContainer) return;
-
-        if (clientX < editorRect.left + EDGE_THRESHOLD) {
-            this._startXAutoScroll(scrollContainer!, -1 * SCROLL_SPEED);
-        } else if (clientX > editorRect.right - EDGE_THRESHOLD) {
-            this._startXAutoScroll(scrollContainer!, SCROLL_SPEED);
-        } else {
-            this._stopXAutoScroll();
-        }
-    }
-
-    stop = () => {
-        this._stopXAutoScroll();
-        this._stopYAutoScroll();
-    }
-
-    private _startXAutoScroll = (scrollContainer: HTMLElement, speed: number) => {
-        if (this._autoScrollInterval) {
-            clearInterval(this._autoScrollInterval);
-        }
-
-        this._autoScrollInterval = window.setInterval(() => {
-            scrollContainer.scrollLeft += speed;
-        }, 16);
-    }
-
-    private _stopXAutoScroll = () => {
-        if (this._autoScrollInterval) {
-            clearInterval(this._autoScrollInterval);
-            this._autoScrollInterval = undefined;
-        }
-    }
-
-    private _startYAutoScroll = (scrollContainer: HTMLElement, speed: number) => {
-        if (this._autoScrollInterval) {
-            clearInterval(this._autoScrollInterval);
-        }
-
-        this._autoScrollInterval = window.setInterval(() => {
-            scrollContainer.scrollTop += speed;
-        }, 16);
-    }
-
-    private _stopYAutoScroll = () => {
-        if (this._autoScrollInterval) {
-            clearInterval(this._autoScrollInterval);
-            this._autoScrollInterval = undefined;
-        }
-    }
-}
@@ -1,316 +1,393 @@
 import { Editor, Extension } from "@tiptap/core";
-import { PluginKey, Plugin, PluginSpec } from "@tiptap/pm/state";
+import { PluginKey, Plugin, PluginSpec, TextSelection, Transaction } from "@tiptap/pm/state";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { EditorProps, EditorView } from "@tiptap/pm/view";
+import { columnResizingPluginKey } from "@tiptap/pm/tables";
+import { cellAround } from "@tiptap/pm/tables";
 import {
+  cellInfoFromResolvedCell,
  DraggingDOMs,
  getDndRelatedDOMs,
  getHoveringCell,
  HoveringCellInfo,
 } from "./utils";
 import { getDragOverColumn, getDragOverRow } from "./calc-drag-over";
+import { findTable } from "../utils/query";
 import { moveColumn, moveRow } from "../utils";
 import { PreviewController } from "./preview/preview-controller";
 import { DropIndicatorController } from "./preview/drop-indicator-controller";
-import { DragHandleController } from "./handle/drag-handle-controller";
-import { EmptyImageController } from "./handle/empty-image-controller";
-import { AutoScrollController } from "./auto-scroll-controller";

-export const TableDndKey = new PluginKey("table-drag-and-drop");
+export interface TableHandleState {
+  hoveringCell: HoveringCellInfo | null;
+  tableNode: ProseMirrorNode | null;
+  tablePos: number | null;
+  dragging: { orientation: "col" | "row"; index: number } | null;
+  frozen: boolean;
+}

-class TableDragHandlePluginSpec implements PluginSpec<void> {
+const INITIAL_STATE: TableHandleState = {
+  hoveringCell: null,
+  tableNode: null,
+  tablePos: null,
+  dragging: null,
+  frozen: false,
+};
+
+export const TableDndKey = new PluginKey<TableHandleState>("table-handles");
+
+class TableHandlePluginSpec implements PluginSpec<TableHandleState> {
  key = TableDndKey;
-  props: EditorProps<Plugin<void>>;
+  props: EditorProps<Plugin<TableHandleState>>;
+
+  private _previewController: PreviewController;
+  private _dropIndicatorController: DropIndicatorController;

-  private _colDragHandle: HTMLElement;
-  private _rowDragHandle: HTMLElement;
  private _hoveringCell?: HoveringCellInfo;
  private _disposables: (() => void)[] = [];
-  private _draggingCoords: { x: number; y: number } = { x: 0, y: 0 };
-  private _dragging = false;
  private _draggingDirection: "col" | "row" = "col";
  private _draggingIndex = -1;
  private _droppingIndex = -1;
-  private _draggingDOMs?: DraggingDOMs | undefined;
-  private _startCoords: { x: number; y: number } = { x: 0, y: 0 };
-  private _previewController: PreviewController;
-  private _dropIndicatorController: DropIndicatorController;
-  private _dragHandleController: DragHandleController;
-  private _emptyImageController: EmptyImageController;
-  private _autoScrollController: AutoScrollController;
+  private _draggingDOMs?: DraggingDOMs;
+  private _startCoords = { x: 0, y: 0 };
+  private _dragging = false;
+
+  state = {
+    init: (): TableHandleState => INITIAL_STATE,
+    apply: (tr: Transaction, prev: TableHandleState): TableHandleState => {
+      const meta = tr.getMeta(TableDndKey) as Partial<TableHandleState> | null;
+      if (!meta) return prev;
+      let changed = false;
+      for (const key in meta) {
+        if (!Object.is(prev[key as keyof TableHandleState], meta[key as keyof TableHandleState])) {
+          changed = true;
+          break;
+        }
+      }
+      return changed ? { ...prev, ...meta } : prev;
+    },
+  };

  constructor(public editor: Editor) {
    this.props = {
      handleDOMEvents: {
-        pointerover: this._pointerOver,
+        pointermove: this._pointerMove,
+        // Force-unfreeze on any pointerdown that lands on the editor.
+        // Mantine's `Menu.onClose` doesn't always fire on outside click
+        // (the dropdown vanishes visually but the callback is skipped),
+        // which would otherwise leave `frozen=true` permanently.
+        pointerdown: this._pointerDown,
      },
    };

-    this._dragHandleController = new DragHandleController();
-    this._colDragHandle = this._dragHandleController.colDragHandle;
-    this._rowDragHandle = this._dragHandleController.rowDragHandle;
-
    this._previewController = new PreviewController();
    this._dropIndicatorController = new DropIndicatorController();
-    this._emptyImageController = new EmptyImageController();
-
-    this._autoScrollController = new AutoScrollController();
-
-    this._bindDragEvents();
  }

  view = () => {
    const wrapper = this.editor.options.element;
-    //@ts-ignore
-    wrapper.appendChild(this._colDragHandle);
-    //@ts-ignore
-    wrapper.appendChild(this._rowDragHandle);
-    //@ts-ignore
+    // @ts-ignore
    wrapper.appendChild(this._previewController.previewRoot);
-    //@ts-ignore
+    // @ts-ignore
    wrapper.appendChild(this._dropIndicatorController.dropIndicatorRoot);

+    // Track the cursor cell so handles follow keyboard nav and clicks too.
+    this.editor.on("selectionUpdate", this._onSelectionUpdate);
+    this._disposables.push(() =>
+      this.editor.off("selectionUpdate", this._onSelectionUpdate),
+    );
+
    return {
-      update: this.update,
      destroy: this.destroy,
    };
  };

-  update = () => {};
-
  destroy = () => {
-    if (!this.editor.isDestroyed) return;
-    this._dragHandleController.destroy();
-    this._emptyImageController.destroy();
    this._previewController.destroy();
    this._dropIndicatorController.destroy();
-    this._autoScrollController.stop();
-
-    this._disposables.forEach((disposable) => disposable());
+    this._disposables.forEach((d) => d());
  };

-  private _pointerOver = (view: EditorView, event: PointerEvent) => {
-    if (this._dragging) return;
+  private _pointerDown = (view: EditorView, _event: PointerEvent): boolean => {
+    const current = TableDndKey.getState(view.state);
+    if (current?.frozen) this.editor.commands.unfreezeHandles();
+    return false;
+  };
+
+  private _pointerMove = (view: EditorView, event: PointerEvent) => {
+    const current = TableDndKey.getState(view.state);
+    if (current?.frozen || current?.dragging) return;
+
+    const resizeState = columnResizingPluginKey.getState(view.state);
+    if (resizeState?.dragging) return;

-    // Don't show drag handles in readonly mode
    if (!this.editor.isEditable) {
-      this._dragHandleController.hide();
+      if (current?.hoveringCell == null && current?.tableNode == null && current?.tablePos == null) return;
+      this._dispatchMeta({ hoveringCell: null, tableNode: null, tablePos: null });
      return;
    }

    const hoveringCell = getHoveringCell(view, event);
-    this._hoveringCell = hoveringCell;
-    if (!hoveringCell) {
-      this._dragHandleController.hide();
-    } else {
-      this._dragHandleController.show(this.editor, hoveringCell);
+    if (hoveringCell) {
+      if (current?.hoveringCell?.cellPos === hoveringCell.cellPos) return;
+      this._hoveringCell = hoveringCell;
+      const $cell = view.state.doc.resolve(hoveringCell.cellPos);
+      const tableInfo = findTable($cell);
+      this._dispatchMeta({
+        hoveringCell,
+        tableNode: tableInfo?.node ?? null,
+        tablePos: tableInfo?.pos ?? null,
+      });
+      return;
    }
+
+    // Pointer isn't over a cell but may be transiting toward a handle that
+    // floats outside the cell — fall back to the selection's cell so the
+    // handles stay visible.
+    const $cellPos = cellAround(view.state.selection.$head);
+    if ($cellPos) {
+      const cellInfo = cellInfoFromResolvedCell($cellPos);
+      if (current?.hoveringCell?.cellPos === cellInfo.cellPos) return;
+      this._hoveringCell = cellInfo;
+      const tableInfo = findTable($cellPos);
+      this._dispatchMeta({
+        hoveringCell: cellInfo,
+        tableNode: tableInfo?.node ?? null,
+        tablePos: tableInfo?.pos ?? null,
+      });
+      return;
+    }
+
+    this._hoveringCell = undefined;
+    if (current?.hoveringCell == null && current?.tableNode == null && current?.tablePos == null) return;
+    this._dispatchMeta({ hoveringCell: null, tableNode: null, tablePos: null });
  };

-  private _onDragColStart = (event: DragEvent) => {
-    this._onDragStart(event, "col");
+  private _onSelectionUpdate = () => {
+    if (!this.editor.isEditable) return;
+
+    const current = TableDndKey.getState(this.editor.state);
+    if (current?.frozen || current?.dragging) return;
+
+    const $cellPos = cellAround(this.editor.state.selection.$head);
+    if (!$cellPos) return;
+
+    const cellInfo = cellInfoFromResolvedCell($cellPos);
+    if (current?.hoveringCell?.cellPos === cellInfo.cellPos) return;
+
+    this._hoveringCell = cellInfo;
+    const tableInfo = findTable($cellPos);
+    this._dispatchMeta({
+      hoveringCell: cellInfo,
+      tableNode: tableInfo?.node ?? null,
+      tablePos: tableInfo?.pos ?? null,
+    });
  };

-  private _onDraggingCol = (event: DragEvent) => {
+  private _dispatchMeta = (patch: Partial<TableHandleState>) => {
+    const tr = this.editor.state.tr.setMeta(TableDndKey, patch);
+    tr.setMeta("addToHistory", false);
+    this.editor.view.dispatch(tr);
+  };
+
+  // ---- Public API for the React handle layer ----
+
+  // Returns true if the drag was set up successfully.
+  startDragFromHandle = (
+    orientation: "col" | "row",
+    clientX: number,
+    clientY: number,
+  ): boolean => {
+    if (!this._hoveringCell) return false;
+    this._dragging = true;
+    this._draggingDirection = orientation;
+    this._startCoords = { x: clientX, y: clientY };
+
+    const draggingIndex =
+      (orientation === "col"
+        ? this._hoveringCell.colIndex
+        : this._hoveringCell.rowIndex) ?? 0;
+    this._draggingIndex = draggingIndex;
+
+    const relatedDoms = getDndRelatedDOMs(
+      this.editor.view,
+      this._hoveringCell.cellPos,
+      draggingIndex,
+      orientation,
+    );
+    if (!relatedDoms) {
+      this._dragging = false;
+      return false;
+    }
+    this._draggingDOMs = relatedDoms;
+
+    this._previewController.onDragStart(relatedDoms, draggingIndex, orientation);
+    this._dropIndicatorController.onDragStart(relatedDoms, orientation);
+
+    // Park the selection inside the dragged cell unless it's already in the
+    // same table. PM auto-maps `selection.from` through concurrent remote
+    // transactions, so commitDrop can resolve the table even if the doc
+    // shifted mid-drag — same trick the pre-pragmatic-dnd implementation
+    // relied on.
+    const state = this.editor.state;
+    const currentTable = findTable(state.selection.$from);
+    const hoverTable = (() => {
+      try {
+        return findTable(state.doc.resolve(this._hoveringCell.cellPos));
+      } catch {
+        return undefined;
+      }
+    })();
+    const tr = state.tr;
+    if (
+      hoverTable &&
+      (!currentTable || currentTable.pos !== hoverTable.pos)
+    ) {
+      try {
+        const $inside = state.doc.resolve(this._hoveringCell.cellPos + 1);
+        tr.setSelection(TextSelection.near($inside, 1));
+      } catch {}
+    }
+    tr.setMeta(TableDndKey, {
+      dragging: { orientation, index: draggingIndex },
+    });
+    tr.setMeta("addToHistory", false);
+    this.editor.view.dispatch(tr);
+    return true;
+  };
+
+  updateDragPosition = (clientX: number, clientY: number) => {
    const draggingDOMs = this._draggingDOMs;
-    if (!draggingDOMs) return;
+    if (!draggingDOMs || !this._dragging) return;

-    this._draggingCoords = { x: event.clientX, y: event.clientY };
-    this._previewController.onDragging(
-      draggingDOMs,
-      this._draggingCoords.x,
-      this._draggingCoords.y,
-      "col",
-    );
+    if (this._draggingDirection === "col") {
+      this._previewController.onDragging(
+        draggingDOMs,
+        clientX,
+        clientY,
+        "col",
+      );
+      const direction = this._startCoords.x > clientX ? "left" : "right";
+      const dragOverColumn = getDragOverColumn(draggingDOMs.table, clientX);
+      if (!dragOverColumn) return;
+      const [col, index] = dragOverColumn;
+      this._droppingIndex = index;
+      this._dropIndicatorController.onDragging(col, direction, "col");
+      return;
+    }

-    this._autoScrollController.checkXAutoScroll(event.clientX, draggingDOMs);
-
-    const direction =
-      this._startCoords.x > this._draggingCoords.x ? "left" : "right";
-    const dragOverColumn = getDragOverColumn(
-      draggingDOMs.table,
-      this._draggingCoords.x,
-    );
-    if (!dragOverColumn) return;
-
-    const [col, index] = dragOverColumn;
-    this._droppingIndex = index;
-    this._dropIndicatorController.onDragging(col, direction, "col");
-  };
-
-  private _onDragRowStart = (event: DragEvent) => {
-    this._onDragStart(event, "row");
-  };
-
-  private _onDraggingRow = (event: DragEvent) => {
-    const draggingDOMs = this._draggingDOMs;
-    if (!draggingDOMs) return;
-
-    this._draggingCoords = { x: event.clientX, y: event.clientY };
-    this._previewController.onDragging(
-      draggingDOMs,
-      this._draggingCoords.x,
-      this._draggingCoords.y,
-      "row",
-    );
-
-    this._autoScrollController.checkYAutoScroll(event.clientY);
-
-    const direction =
-      this._startCoords.y > this._draggingCoords.y ? "up" : "down";
-    const dragOverRow = getDragOverRow(
-      draggingDOMs.table,
-      this._draggingCoords.y,
-    );
+    this._previewController.onDragging(draggingDOMs, clientX, clientY, "row");
+    const direction = this._startCoords.y > clientY ? "up" : "down";
+    const dragOverRow = getDragOverRow(draggingDOMs.table, clientY);
    if (!dragOverRow) return;
-
    const [row, index] = dragOverRow;
    this._droppingIndex = index;
    this._dropIndicatorController.onDragging(row, direction, "row");
  };

-  private _onDragEnd = () => {
-    this._dragging = false;
-    this._draggingIndex = -1;
-    this._droppingIndex = -1;
-    this._startCoords = { x: 0, y: 0 };
-    this._autoScrollController.stop();
-    this._dropIndicatorController.onDragEnd();
-    this._previewController.onDragEnd();
-  };
-
-  private _bindDragEvents = () => {
-    this._colDragHandle.addEventListener("dragstart", this._onDragColStart);
-    this._disposables.push(() => {
-      this._colDragHandle.removeEventListener(
-        "dragstart",
-        this._onDragColStart,
-      );
-    });
-
-    this._colDragHandle.addEventListener("dragend", this._onDragEnd);
-    this._disposables.push(() => {
-      this._colDragHandle.removeEventListener("dragend", this._onDragEnd);
-    });
-
-    this._rowDragHandle.addEventListener("dragstart", this._onDragRowStart);
-    this._disposables.push(() => {
-      this._rowDragHandle.removeEventListener(
-        "dragstart",
-        this._onDragRowStart,
-      );
-    });
-
-    this._rowDragHandle.addEventListener("dragend", this._onDragEnd);
-    this._disposables.push(() => {
-      this._rowDragHandle.removeEventListener("dragend", this._onDragEnd);
-    });
-
-    const ownerDocument = this.editor.view.dom?.ownerDocument;
-    if (ownerDocument) {
-      // To make `drop` event work, we need to prevent the default behavior of the
-      // `dragover` event for drop zone. Here we set the whole document as the
-      // drop zone so that even the mouse moves outside the editor, the `drop`
-      // event will still be triggered.
-      ownerDocument.addEventListener("drop", this._onDrop);
-      ownerDocument.addEventListener("dragover", this._onDrag);
-      this._disposables.push(() => {
-        ownerDocument.removeEventListener("drop", this._onDrop);
-        ownerDocument.removeEventListener("dragover", this._onDrag);
-      });
-    }
-  };
-
-  private _onDragStart = (event: DragEvent, type: "col" | "row") => {
-    const dataTransfer = event.dataTransfer;
-    if (dataTransfer) {
-      dataTransfer.effectAllowed = "move";
-      this._emptyImageController.hideDragImage(dataTransfer);
-    }
-    this._dragging = true;
-    this._draggingDirection = type;
-    this._startCoords = { x: event.clientX, y: event.clientY };
-    const draggingIndex =
-      (type === "col"
-        ? this._hoveringCell?.colIndex
-        : this._hoveringCell?.rowIndex) ?? 0;
-
-    this._draggingIndex = draggingIndex;
-
-    const relatedDoms = getDndRelatedDOMs(
-      this.editor.view,
-      this._hoveringCell?.cellPos,
-      draggingIndex,
-      type,
-    );
-    this._draggingDOMs = relatedDoms;
-
-    const index =
-      type === "col"
-        ? this._hoveringCell?.colIndex
-        : this._hoveringCell?.rowIndex;
-
-    this._previewController.onDragStart(relatedDoms, index, type);
-    this._dropIndicatorController.onDragStart(relatedDoms, type);
-  };
-
-  private _onDrag = (event: DragEvent) => {
-    event.preventDefault();
-    if (!this._dragging) return;
-    if (this._draggingDirection === "col") {
-      this._onDraggingCol(event);
-    } else {
-      this._onDraggingRow(event);
-    }
-  };
-
-  private _onDrop = () => {
+  commitDrop = () => {
    if (!this._dragging) return;
    const direction = this._draggingDirection;
    const from = this._draggingIndex;
    const to = this._droppingIndex;
+
+    if (from < 0 || to < 0 || from === to) return;
+
+    // Use the live (auto-mapped) selection as the table anchor — PM has
+    // already mapped it through any concurrent remote transactions, so
+    // it's safe to resolve even if the doc shifted mid-drag.
    const tr = this.editor.state.tr;
    const pos = this.editor.state.selection.from;

    if (direction === "col") {
-      const canMove = moveColumn({
-        tr,
-        originIndex: from,
-        targetIndex: to,
-        select: true,
-        pos,
-      });
-      if (canMove) {
+      if (moveColumn({ tr, originIndex: from, targetIndex: to, select: true, pos })) {
        this.editor.view.dispatch(tr);
      }
-
      return;
    }
-
-    if (direction === "row") {
-      const canMove = moveRow({
-        tr,
-        originIndex: from,
-        targetIndex: to,
-        select: true,
-        pos,
-      });
-      if (canMove) {
-        this.editor.view.dispatch(tr);
-      }
-
-      return;
+    if (moveRow({ tr, originIndex: from, targetIndex: to, select: true, pos })) {
+      this.editor.view.dispatch(tr);
    }
  };
+
+  endDrag = () => {
+    this._dragging = false;
+    this._draggingIndex = -1;
+    this._droppingIndex = -1;
+    this._startCoords = { x: 0, y: 0 };
+    this._draggingDOMs = undefined;
+    this._dropIndicatorController.onDragEnd();
+    this._previewController.onDragEnd();
+    this._dispatchMeta({ dragging: null });
+  };
+}
+
+export type { TableHandlePluginSpec };
+
+// Resolve via plugin key, not a module singleton — survives StrictMode / HMR.
+export function getTableHandlePluginSpec(
+  editor: Editor,
+): TableHandlePluginSpec | null {
+  const plugin = TableDndKey.get(editor.state);
+  if (!plugin) return null;
+  return plugin.spec as unknown as TableHandlePluginSpec;
 }

 export const TableDndExtension = Extension.create({
  name: "table-drag-and-drop",
  addProseMirrorPlugins() {
    const editor = this.editor;
-
-    const dragHandlePluginSpec = new TableDragHandlePluginSpec(editor);
-    const dragHandlePlugin = new Plugin(dragHandlePluginSpec);
-
-    return [dragHandlePlugin];
+    const spec = new TableHandlePluginSpec(editor);
+    return [new Plugin(spec)];
  },
 });
+
+export const TableHandleCommandsExtension = Extension.create({
+  name: "table-handle-commands",
+  addCommands() {
+    return {
+      freezeHandles:
+        () =>
+        ({ tr, dispatch }) => {
+          if (dispatch) {
+            tr.setMeta(TableDndKey, { frozen: true });
+            tr.setMeta("addToHistory", false);
+          }
+          return true;
+        },
+      unfreezeHandles:
+        () =>
+        ({ tr, state, dispatch }) => {
+          if (dispatch) {
+            // Re-sync `hoveringCell` to the cursor's cell as we unfreeze:
+            // `selectionUpdate` was gated while frozen, so the stored
+            // hoveringCell may be stale.
+            const patch: Partial<TableHandleState> = { frozen: false };
+            const $cellPos = cellAround(state.selection.$head);
+            if ($cellPos) {
+              const cellInfo = cellInfoFromResolvedCell($cellPos);
+              const tableInfo = findTable($cellPos);
+              patch.hoveringCell = cellInfo;
+              patch.tableNode = tableInfo?.node ?? null;
+              patch.tablePos = tableInfo?.pos ?? null;
+            } else {
+              patch.hoveringCell = null;
+              patch.tableNode = null;
+              patch.tablePos = null;
+            }
+            tr.setMeta(TableDndKey, patch);
+            tr.setMeta("addToHistory", false);
+          }
+          return true;
+        },
+    };
+  },
+});
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    tableHandleCommands: {
+      freezeHandles: () => ReturnType;
+      unfreezeHandles: () => ReturnType;
+    };
+  }
+}
@@ -1,105 +0,0 @@
-import { Editor } from "@tiptap/core";
-import { HoveringCellInfo } from "../utils";
-import { computePosition, offset } from "@floating-ui/dom";
-
-export class DragHandleController {
-    private _colDragHandle: HTMLElement;
-    private _rowDragHandle: HTMLElement;
-
-    constructor() {
-        this._colDragHandle = this._createDragHandleDom('col');
-        this._rowDragHandle = this._createDragHandleDom('row');
-    }
-
-    get colDragHandle() {
-        return this._colDragHandle;
-    }
-
-    get rowDragHandle() {
-        return this._rowDragHandle;
-    }
-
-    show = (editor: Editor, hoveringCell: HoveringCellInfo) => {
-        this._showColDragHandle(editor, hoveringCell);
-        this._showRowDragHandle(editor, hoveringCell);
-    }
-
-    hide = () => {
-        Object.assign(this._colDragHandle.style, {
-            display: 'none',
-            left: '-999px',
-            top: '-999px',
-        });
-        Object.assign(this._rowDragHandle.style, {
-            display: 'none',
-            left: '-999px',
-            top: '-999px',
-        });
-    }
-
-    destroy = () => {
-        this._colDragHandle.remove()
-        this._rowDragHandle.remove()
-    }
-
-    private _createDragHandleDom = (type: 'col' | 'row') => {
-        const dragHandle = document.createElement('div')
-        dragHandle.classList.add('drag-handle')
-        dragHandle.setAttribute('draggable', 'true')
-        dragHandle.setAttribute('data-direction', type === 'col' ? 'horizontal' : 'vertical')
-        dragHandle.setAttribute('data-drag-handle', '')
-        Object.assign(dragHandle.style, {
-            position: 'absolute',
-            top: '-999px',
-            left: '-999px',
-            display: 'none',
-        })
-        return dragHandle;
-    }
-
-    private _showColDragHandle(editor: Editor, hoveringCell: HoveringCellInfo) {
-        const referenceCell = editor.view.nodeDOM(hoveringCell.colFirstCellPos);
-        if (!referenceCell) return;
-
-        const yOffset = -1 * parseInt(getComputedStyle(this._colDragHandle).height) / 2;
-
-        computePosition(
-            referenceCell as HTMLElement,
-            this._colDragHandle,
-            {
-                placement: 'top',
-                middleware: [offset(yOffset)]
-            }
-        )
-            .then(({ x, y }) => {
-                Object.assign(this._colDragHandle.style, {
-                    display: 'block',
-                    top: `${y}px`,
-                    left: `${x}px`,
-                });
-            })
-    }
-
-    private _showRowDragHandle(editor: Editor, hoveringCell: HoveringCellInfo) {
-        const referenceCell = editor.view.nodeDOM(hoveringCell.rowFirstCellPos);
-        if (!referenceCell) return;
-
-        const xOffset = -1 * parseInt(getComputedStyle(this._rowDragHandle).width) / 2;
-
-        computePosition(
-            referenceCell as HTMLElement,
-            this._rowDragHandle,
-            {
-                middleware: [offset(xOffset)],
-                placement: 'left'
-            }
-        )
-            .then(({ x, y}) => {
-                Object.assign(this._rowDragHandle.style, {
-                    display: 'block',
-                    top: `${y}px`,
-                    left: `${x}px`,
-                });
-            })
-    }
-}
@@ -1,21 +0,0 @@
-export class EmptyImageController {
-    private _emptyImage: HTMLImageElement;
-
-    constructor() {
-        this._emptyImage = new Image(1, 1);
-        this._emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-    }
-
-    get emptyImage() {
-        return this._emptyImage;
-    }
-
-    hideDragImage = (dataTransfer: DataTransfer) => {
-        dataTransfer.effectAllowed = 'move';
-        dataTransfer.setDragImage(this._emptyImage, 0, 0);
-    }
-
-    destroy = () => {
-        this._emptyImage.remove();
-    }
-}
@@ -1 +1,7 @@
-export * from './dnd-extension'
+export {
+  TableDndExtension,
+  TableHandleCommandsExtension,
+  TableDndKey,
+  getTableHandlePluginSpec,
+} from "./dnd-extension";
+export type { TableHandleState, TableHandlePluginSpec } from "./dnd-extension";
@@ -99,4 +99,4 @@ export class DropIndicatorController {
        });
    }

-}
+}
@@ -1,4 +1,4 @@
-import { computePosition, offset, ReferenceElement } from "@floating-ui/dom";
+import { computePosition, offset, shift, ReferenceElement } from "@floating-ui/dom";
 import { DraggingDOMs } from "../utils";
 import { clearPreviewDOM, createPreviewDOM } from "./render-preview";

@@ -23,7 +23,7 @@ export class PreviewController {
    onDragStart = (relatedDoms: DraggingDOMs, index: number | undefined, type: 'col' | 'row') => {
        this._initPreviewStyle(relatedDoms.table, relatedDoms.cell, type);
        createPreviewDOM(relatedDoms.table, this._preview, index, type)
-        this._initPreviewPosition(relatedDoms.cell, type);
+        this._initPreviewPosition(relatedDoms.table, relatedDoms.cell, type);
    }

    onDragEnd = () => {
@@ -32,7 +32,7 @@ export class PreviewController {
    }

    onDragging = (relatedDoms: DraggingDOMs, x: number, y: number, type: 'col' | 'row') => {
-        this._updatePreviewPosition(x, y, relatedDoms.cell, type);
+        this._updatePreviewPosition(x, y, relatedDoms.table, relatedDoms.cell, type);
    }

    destroy = () => {
@@ -60,7 +60,7 @@ export class PreviewController {
        }
    }

-    private _initPreviewPosition(cell: HTMLElement, type: 'col' | 'row') {
+    private _initPreviewPosition(table: HTMLElement, cell: HTMLElement, type: 'col' | 'row') {
        void computePosition(cell, this._preview, {
            placement: type === 'row' ? 'right' : 'bottom',
            middleware: [
@@ -70,6 +70,7 @@ export class PreviewController {
                    }
                    return -rects.reference.width
                }),
+                shift({ boundary: table, padding: 0 }),
            ],
        }).then(({ x, y }) => {
            Object.assign(this._preview.style, {
@@ -79,11 +80,20 @@ export class PreviewController {
        });
    }

-    private _updatePreviewPosition(x: number, y: number, cell: HTMLElement, type: 'col' | 'row') {
+    // Clamp the preview to within the table's bounds via `shift({ boundary })`
+    // so it can't track the cursor past the table edge. Without the clamp,
+    // dragging near the viewport edge pushes the preview's `left` (or `top`)
+    // beyond the document's natural width/height, the browser extends the
+    // page to contain it, and the auto-scroll plugin then has a wider area
+    // to keep scrolling into — a feedback loop that grows the page forever.
+    private _updatePreviewPosition(x: number, y: number, table: HTMLElement, cell: HTMLElement, type: 'col' | 'row') {
        computePosition(
            getVirtualElement(cell, x, y),
            this._preview,
-            { placement: type === 'row' ? 'right' : 'bottom' },
+            {
+                placement: type === 'row' ? 'right' : 'bottom',
+                middleware: [shift({ boundary: table, padding: 0 })],
+            },
        ).then(({ x, y }) => {
            if (type === 'row') {
                Object.assign(this._preview.style, {
@@ -1,4 +1,5 @@
 import { cellAround, TableMap } from "@tiptap/pm/tables"
+import { ResolvedPos } from "@tiptap/pm/model"
 import { EditorView } from "@tiptap/pm/view"

 export function getHoveringCell(
@@ -8,19 +9,30 @@ export function getHoveringCell(
  const domCell = domCellAround(event.target as HTMLElement | null)
  if (!domCell) return

-  const { left, top, width, height } = domCell.getBoundingClientRect()
-  const eventPos = view.posAtCoords({
-    // Use the center coordinates of the cell to ensure we're within the
-    // selected cell. This prevents potential issues when the mouse is on the
-    // border of two cells.
-    left: left + width / 2,
-    top: top + height / 2,
-  })
-  if (!eventPos) return
-
-  const $cellPos = cellAround(view.state.doc.resolve(eventPos.pos))
+  // Resolve directly from the cell DOM rather than via coords. The previous
+  // center-coords approach broke on tall merged cells — their visual center
+  // can land in empty space whose closest PM position resolves to an
+  // adjacent cell. `posAtDOM(td, 0)` is always inside this cell, regardless
+  // of rowspan/colspan.
+  let pos: number
+  try {
+    pos = view.posAtDOM(domCell, 0)
+  } catch {
+    return
+  }
+  const $cellPos = cellAround(view.state.doc.resolve(pos))
  if (!$cellPos) return

+  return cellInfoFromResolvedCell($cellPos)
+}
+
+/**
+ * Build HoveringCellInfo from a resolved position whose parent is a
+ * table cell (i.e. the result of `cellAround` on some inner position).
+ */
+export function cellInfoFromResolvedCell(
+  $cellPos: ResolvedPos,
+): HoveringCellInfo {
  const map = TableMap.get($cellPos.node(-1))
  const tableStart = $cellPos.start(-1)
  const cellRect = map.findCell($cellPos.pos - tableStart)
@@ -0,0 +1,186 @@
+// Per-table header-pin controller: native sticky when table fits its wrapper, transform fallback when it doesn't.
+
+import { computePinTop, pinOffsetWatcher } from './offset';
+
+const WRAPPER_NO_OVERFLOW = 'tableWrapperNoOverflow';
+const HEADER_PINNED = 'tableHeaderPinned';
+const PIN_OFFSET_VAR = '--table-pin-offset';
+
+type PinMode = 'off' | 'native' | 'fallback';
+
+function firstRowIsAllHeaders(row: HTMLTableRowElement | null): boolean {
+  if (!row) return false;
+  const cells = Array.from(row.cells);
+  return cells.length > 0 && cells.every((c) => c.tagName === 'TH');
+}
+
+function isNestedTable(wrapper: HTMLElement): boolean {
+  return wrapper.closest('table .tableWrapper') !== null;
+}
+
+function isLayoutInert(rect: DOMRectReadOnly): boolean {
+  return rect.width === 0 && rect.height === 0;
+}
+
+const fallbackControllers = new Set<TablePinController>();
+let fallbackScrollListener: (() => void) | null = null;
+let fallbackRafPending = false;
+
+function ensureFallbackListener() {
+  if (fallbackScrollListener) return;
+  fallbackScrollListener = () => {
+    if (fallbackRafPending) return;
+    fallbackRafPending = true;
+    requestAnimationFrame(() => {
+      fallbackRafPending = false;
+      for (const ctrl of fallbackControllers) ctrl.updateFallbackOffset();
+    });
+  };
+  document.addEventListener('scroll', fallbackScrollListener, {
+    passive: true,
+    capture: true,
+  });
+}
+
+function maybeTeardownFallbackListener() {
+  if (!fallbackScrollListener || fallbackControllers.size > 0) return;
+  document.removeEventListener('scroll', fallbackScrollListener, {
+    capture: true,
+  });
+  fallbackScrollListener = null;
+  fallbackRafPending = false;
+}
+
+export class TablePinController {
+  private wrapper: HTMLElement;
+  private table: HTMLTableElement;
+  private fitsObserver?: IntersectionObserver;
+  private mode: PinMode = 'off';
+  private cachedHeaderRow: HTMLTableRowElement | null = null;
+
+  constructor(wrapper: HTMLElement, table: HTMLTableElement) {
+    this.wrapper = wrapper;
+    this.table = table;
+    pinOffsetWatcher.acquire();
+    this.fitsObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) this.evaluateFit(entry);
+      },
+      { root: this.wrapper, threshold: 1 },
+    );
+    this.fitsObserver.observe(this.table);
+  }
+
+  private getHeaderRow(): HTMLTableRowElement | null {
+    if (this.cachedHeaderRow && this.table.contains(this.cachedHeaderRow)) {
+      return this.cachedHeaderRow;
+    }
+    this.cachedHeaderRow = this.table.querySelector('tr');
+    return this.cachedHeaderRow;
+  }
+
+  private evaluateFit(entry: IntersectionObserverEntry) {
+    if (!this.isEligible()) {
+      this.apply('off');
+      return;
+    }
+    if (isLayoutInert(entry.boundingClientRect)) return;
+    this.apply(entry.isIntersecting ? 'native' : 'fallback');
+  }
+
+  private isEligible(): boolean {
+    return (
+      !isNestedTable(this.wrapper) && firstRowIsAllHeaders(this.getHeaderRow())
+    );
+  }
+
+  private apply(next: PinMode) {
+    if (next === this.mode) return;
+
+    if (this.mode === 'fallback' && next !== 'fallback') {
+      fallbackControllers.delete(this);
+      maybeTeardownFallbackListener();
+    }
+
+    this.mode = next;
+    const cls = this.wrapper.classList;
+
+    if (next === 'off') {
+      cls.remove(HEADER_PINNED);
+      cls.remove(WRAPPER_NO_OVERFLOW);
+      this.wrapper.style.removeProperty(PIN_OFFSET_VAR);
+    } else if (next === 'native') {
+      cls.add(HEADER_PINNED);
+      cls.add(WRAPPER_NO_OVERFLOW);
+      // Native mode reads --editor-pin-offset from :root; clear stale per-wrapper var from fallback.
+      this.wrapper.style.removeProperty(PIN_OFFSET_VAR);
+    } else if (next === 'fallback') {
+      cls.add(HEADER_PINNED);
+      cls.remove(WRAPPER_NO_OVERFLOW);
+      fallbackControllers.add(this);
+      ensureFallbackListener();
+      // Avoid one stale-frame paint under translateY.
+      this.updateFallbackOffset();
+    }
+  }
+
+  updateFallbackOffset() {
+    const pinTop = computePinTop();
+    const tableRect = this.table.getBoundingClientRect();
+    const headerRow = this.getHeaderRow();
+    if (!headerRow) return;
+    const rowHeight = headerRow.getBoundingClientRect().height;
+
+    const active = tableRect.top < pinTop && tableRect.bottom > pinTop + rowHeight;
+
+    if (active) {
+      const offset = Math.min(pinTop - tableRect.top, tableRect.height - rowHeight);
+      this.wrapper.style.setProperty(PIN_OFFSET_VAR, `${offset}px`);
+    } else {
+      this.wrapper.style.removeProperty(PIN_OFFSET_VAR);
+    }
+  }
+
+  refresh() {
+    // The header <tr> may have been replaced by a PM transaction; drop
+    // the cached reference before checking eligibility.
+    this.cachedHeaderRow = null;
+    if (!this.isEligible()) {
+      this.apply('off');
+      return;
+    }
+    if (this.mode === 'off') {
+      // Eligibility just flipped back on; re-trigger the observer so it
+      // emits the current intersection state.
+      this.fitsObserver?.unobserve(this.table);
+      this.fitsObserver?.observe(this.table);
+    }
+  }
+
+  destroy() {
+    this.fitsObserver?.disconnect();
+    this.fitsObserver = undefined;
+    this.apply('off');
+    pinOffsetWatcher.release();
+  }
+}
+
+const controllers = new WeakMap<HTMLElement, TablePinController>();
+
+export function attach(wrapper: HTMLElement) {
+  if (controllers.has(wrapper)) return;
+  const table = wrapper.querySelector(':scope > table') as HTMLTableElement | null;
+  if (!table) return;
+  controllers.set(wrapper, new TablePinController(wrapper, table));
+}
+
+export function detach(wrapper: HTMLElement) {
+  const ctrl = controllers.get(wrapper);
+  if (!ctrl) return;
+  ctrl.destroy();
+  controllers.delete(wrapper);
+}
+
+export function getController(wrapper: HTMLElement): TablePinController | undefined {
+  return controllers.get(wrapper);
+}
@@ -0,0 +1,78 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+import { attach, detach, getController } from './controller';
+
+const tableHeaderPinKey = new PluginKey('tableHeaderPin');
+
+export const TableHeaderPin = Extension.create({
+  name: 'tableHeaderPin',
+
+  addProseMirrorPlugins() {
+    let editorRoot: HTMLElement | null = null;
+    let domObserver: MutationObserver | null = null;
+    const tracked = new Set<HTMLElement>();
+    let rafHandle: number | null = null;
+
+    const reconcile = () => {
+      rafHandle = null;
+      if (!editorRoot) return;
+      const current = new Set(
+        editorRoot.querySelectorAll<HTMLElement>('.tableWrapper'),
+      );
+      for (const w of tracked) {
+        if (!current.has(w)) {
+          detach(w);
+          tracked.delete(w);
+        }
+      }
+      for (const w of current) {
+        if (!tracked.has(w)) {
+          attach(w);
+          tracked.add(w);
+        }
+      }
+    };
+
+    const schedule = () => {
+      if (rafHandle !== null) return;
+      rafHandle = requestAnimationFrame(reconcile);
+    };
+
+    return [
+      new Plugin({
+        key: tableHeaderPinKey,
+
+        view(editorView) {
+          editorRoot = editorView.dom as HTMLElement;
+
+          schedule();
+
+          domObserver = new MutationObserver(schedule);
+          domObserver.observe(editorRoot, { subtree: true, childList: true });
+
+          return {
+            update(view, prevState) {
+              if (!editorRoot) return;
+              if (view.state.doc === prevState.doc) return;
+              editorRoot
+                .querySelectorAll<HTMLElement>('.tableWrapper')
+                .forEach((w) => getController(w)?.refresh());
+            },
+            destroy() {
+              if (rafHandle !== null) {
+                cancelAnimationFrame(rafHandle);
+                rafHandle = null;
+              }
+              domObserver?.disconnect();
+              domObserver = null;
+              for (const w of tracked) detach(w);
+              tracked.clear();
+              editorRoot = null;
+            },
+          };
+        },
+      }),
+    ];
+  },
+});
@@ -0,0 +1 @@
+export { TableHeaderPin } from './extension';
@@ -0,0 +1,65 @@
+// Pin-offset measurement and watcher used by the table header-pin controller.
+
+// Fallback app-bar height (px) when no fixed surface is mounted; matches global-app-shell.tsx.
+const APP_BAR_FALLBACK_HEIGHT = 45;
+
+export const EDITOR_PIN_OFFSET_VAR = '--editor-pin-offset';
+
+// Selectors for fixed surfaces between viewport top and editor content. Use data attributes —
+// CSS module classes are build-time hashed and won't match.
+const PIN_ANCHOR_SELECTORS = [
+  '[data-page-header]',
+  '[data-fixed-toolbar]',
+] as const;
+
+export function computePinTop(): number {
+  let bottom = APP_BAR_FALLBACK_HEIGHT;
+  for (const sel of PIN_ANCHOR_SELECTORS) {
+    const el = document.querySelector(sel) as HTMLElement | null;
+    if (!el) continue;
+    const rect = el.getBoundingClientRect();
+    if (rect.height > 0 && rect.bottom > bottom) bottom = rect.bottom;
+  }
+  return bottom;
+}
+
+// Reference-counted watcher that publishes the editor's top offset to a CSS custom property.
+export const pinOffsetWatcher = {
+  refs: 0,
+  resizeObserver: null as ResizeObserver | null,
+  rafPending: false,
+  lastValue: -1,
+
+  acquire() {
+    if (this.refs++ > 0) return;
+    this.publish();
+    const schedule = () => {
+      if (this.rafPending) return;
+      this.rafPending = true;
+      requestAnimationFrame(() => {
+        this.rafPending = false;
+        this.publish();
+      });
+    };
+    this.resizeObserver = new ResizeObserver(schedule);
+    this.resizeObserver.observe(document.body);
+  },
+
+  release() {
+    if (--this.refs > 0) return;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    document.documentElement.style.removeProperty(EDITOR_PIN_OFFSET_VAR);
+    this.lastValue = -1;
+  },
+
+  publish() {
+    const top = computePinTop();
+    if (top === this.lastValue) return;
+    this.lastValue = top;
+    document.documentElement.style.setProperty(
+      EDITOR_PIN_OFFSET_VAR,
+      `${top}px`,
+    );
+  },
+};
@@ -2,4 +2,14 @@ export * from "./row";
 export * from "./cell";
 export * from "./header";
 export * from "./table";
-export * from "./dnd";
+export * from "./dnd";
+export * from "./table-view";
+export * from "./header-pin";
+export * from "./table-readonly-sort";
+export { moveColumn } from "./utils/move-column";
+export type { MoveColumnParams } from "./utils/move-column";
+export { moveRow } from "./utils/move-row";
+export type { MoveRowParams } from "./utils/move-row";
+export { convertTableNodeToArrayOfRows } from "./utils/convert-table-node-to-array-of-rows";
+export { convertArrayOfRowsToTableNode } from "./utils/convert-array-of-rows-to-table-node";
+export { transpose } from "./utils/transpose";
@@ -0,0 +1,233 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+type SortDirection = 'asc' | 'desc';
+
+type SortState = {
+  col: number;
+  direction: SortDirection;
+};
+
+const CHEVRON_CLASS = 'tableReadonlySortChevron';
+
+const tableReadonlySortKey = new PluginKey('tableReadonlySort');
+
+const sortStates = new WeakMap<HTMLTableElement, SortState>();
+const originalOrders = new WeakMap<HTMLTableElement, HTMLTableRowElement[]>();
+
+const collator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
+
+function getColumnIndex(th: HTMLTableCellElement): number {
+  const row = th.parentElement as HTMLTableRowElement;
+  if (!row) return -1;
+  let col = 0;
+  for (let i = 0; i < row.cells.length; i++) {
+    if (row.cells[i] === th) return col;
+    col += row.cells[i].colSpan ?? 1;
+  }
+  return -1;
+}
+
+function getHeaderTh(target: EventTarget | null): HTMLTableCellElement | null {
+  if (!(target instanceof Element)) return null;
+  const th = target.closest('th') as HTMLTableCellElement | null;
+  if (!th) return null;
+  const row = th.parentElement;
+  if (!row) return null;
+  const tbody = row.parentElement;
+  if (!tbody) return null;
+  const table = tbody.closest('table');
+  if (!table) return null;
+
+  // th must be in the first row of the table (could be in thead or tbody)
+  const firstRow = table.querySelector('tr');
+  if (firstRow !== row) return null;
+
+  return th;
+}
+
+function getCellText(row: HTMLTableRowElement, colIndex: number): string {
+  let col = 0;
+  for (let i = 0; i < row.cells.length; i++) {
+    if (col === colIndex) return row.cells[i].textContent?.trim() ?? '';
+    col += row.cells[i].colSpan ?? 1;
+  }
+  return '';
+}
+
+function getOrSaveOriginalOrder(
+  table: HTMLTableElement,
+  dataRows: HTMLTableRowElement[],
+): HTMLTableRowElement[] {
+  if (!originalOrders.has(table)) {
+    originalOrders.set(table, [...dataRows]);
+  }
+  return originalOrders.get(table)!;
+}
+
+function sortDataRows(
+  dataRows: HTMLTableRowElement[],
+  colIndex: number,
+  direction: SortDirection,
+): HTMLTableRowElement[] {
+  return [...dataRows].sort((a, b) => {
+    const textA = getCellText(a, colIndex);
+    const textB = getCellText(b, colIndex);
+    const emptyA = textA === '';
+    const emptyB = textB === '';
+    if (emptyA && emptyB) return 0;
+    if (emptyA) return 1;
+    if (emptyB) return -1;
+    const cmp = collator.compare(textA, textB);
+    return direction === 'asc' ? cmp : -cmp;
+  });
+}
+
+function applySort(table: HTMLTableElement, colIndex: number): void {
+  const tbody = table.querySelector('tbody');
+  if (!tbody) return;
+
+  const allRows = Array.from(tbody.querySelectorAll<HTMLTableRowElement>(':scope > tr'));
+  if (allRows.length === 0) return;
+
+  const headerRow = allRows[0];
+  const dataRows = allRows.slice(1);
+  if (dataRows.length === 0) return;
+
+  const current = sortStates.get(table) ?? null;
+  const saved = getOrSaveOriginalOrder(table, dataRows);
+
+  let next: SortState | null;
+  if (!current || current.col !== colIndex) {
+    next = { col: colIndex, direction: 'asc' };
+  } else if (current.direction === 'asc') {
+    next = { col: colIndex, direction: 'desc' };
+  } else {
+    next = null;
+  }
+
+  if (next === null) {
+    sortStates.delete(table);
+    tbody.append(headerRow, ...saved);
+  } else {
+    sortStates.set(table, next);
+    const sorted = sortDataRows(saved, next.col, next.direction);
+    tbody.append(headerRow, ...sorted);
+  }
+
+  updateChevrons(table);
+}
+
+const CHEVRON_SVG =
+  '<svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">' +
+  '<path d="M2.5 4.5 L6 8 L9.5 4.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />' +
+  '</svg>';
+
+function ensureChevron(th: HTMLTableCellElement): HTMLSpanElement {
+  let chevron = th.querySelector<HTMLSpanElement>(`.${CHEVRON_CLASS}`);
+  if (!chevron) {
+    chevron = document.createElement('span');
+    chevron.className = CHEVRON_CLASS;
+    chevron.setAttribute('aria-hidden', 'true');
+    chevron.innerHTML = CHEVRON_SVG;
+    th.appendChild(chevron);
+  }
+  return chevron;
+}
+
+function updateChevrons(table: HTMLTableElement): void {
+  const firstRow = table.querySelector('tr');
+  if (!firstRow) return;
+
+  const state = sortStates.get(table) ?? null;
+  let col = 0;
+  for (let i = 0; i < firstRow.cells.length; i++) {
+    const cell = firstRow.cells[i];
+    if (cell.tagName !== 'TH') {
+      col += cell.colSpan ?? 1;
+      continue;
+    }
+    const chevron = ensureChevron(cell as HTMLTableCellElement);
+    let label: string;
+    if (state && state.col === col) {
+      chevron.setAttribute('data-sort', state.direction);
+      label = state.direction === 'asc' ? 'Sort descending' : 'Clear sort';
+    } else {
+      chevron.removeAttribute('data-sort');
+      label = 'Sort ascending';
+    }
+    chevron.setAttribute('data-tooltip', label);
+    chevron.setAttribute('aria-label', label);
+    chevron.title = label;
+    col += cell.colSpan ?? 1;
+  }
+}
+
+function addChevronsToAllTables(editorRoot: HTMLElement): void {
+  const tables = editorRoot.querySelectorAll<HTMLTableElement>('table');
+  tables.forEach((table) => updateChevrons(table));
+}
+
+function removeAllChevrons(editorRoot: HTMLElement): void {
+  editorRoot
+    .querySelectorAll<HTMLSpanElement>(`.${CHEVRON_CLASS}`)
+    .forEach((el) => el.remove());
+}
+
+export const TableReadonlySort = Extension.create({
+  name: 'tableReadonlySort',
+
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    let editorRoot: HTMLElement | null = null;
+
+    const onClick = (event: MouseEvent) => {
+      if (editor.isEditable) return;
+      // Only react to clicks on the chevron, not anywhere else in the header
+      // cell. This lets the user click into a header to select text without
+      // accidentally triggering a sort.
+      if (!(event.target instanceof Element)) return;
+      const chevron = event.target.closest(`.${CHEVRON_CLASS}`);
+      if (!chevron) return;
+      const th = getHeaderTh(chevron);
+      if (!th) return;
+      const table = th.closest('table') as HTMLTableElement | null;
+      if (!table) return;
+      const colIndex = getColumnIndex(th);
+      if (colIndex < 0) return;
+      applySort(table, colIndex);
+    };
+
+    return [
+      new Plugin({
+        key: tableReadonlySortKey,
+
+        view(editorView) {
+          editorRoot = editorView.dom as HTMLElement;
+          editorRoot.addEventListener('click', onClick);
+
+          if (!editor.isEditable) {
+            addChevronsToAllTables(editorRoot);
+          }
+
+          return {
+            update(view) {
+              const root = view.dom as HTMLElement;
+              if (!editor.isEditable) {
+                addChevronsToAllTables(root);
+              } else {
+                removeAllChevrons(root);
+              }
+            },
+            destroy() {
+              if (editorRoot) {
+                editorRoot.removeEventListener('click', onClick);
+                removeAllChevrons(editorRoot);
+              }
+            },
+          };
+        },
+      }),
+    ];
+  },
+});
@@ -0,0 +1,158 @@
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import type { NodeView, ViewMutationRecord } from '@tiptap/pm/view';
+import { getColStyleDeclaration } from './utils/col-style';
+
+export function updateColumns(
+  node: ProseMirrorNode,
+  colgroup: HTMLElement,
+  table: HTMLTableElement,
+  cellMinWidth: number,
+  overrideCol?: number,
+  overrideValue?: number,
+) {
+  let totalWidth = 0;
+  let fixedWidth = true;
+  let nextDOM = colgroup.firstChild;
+  const row = node.firstChild;
+
+  if (row !== null) {
+    for (let i = 0, col = 0; i < row.childCount; i += 1) {
+      const { colspan, colwidth } = row.child(i).attrs;
+
+      for (let j = 0; j < colspan; j += 1, col += 1) {
+        const hasWidth =
+          overrideCol === col
+            ? overrideValue
+            : ((colwidth && colwidth[j]) as number | undefined);
+        const cssWidth = hasWidth ? `${hasWidth}px` : '';
+
+        totalWidth += hasWidth || cellMinWidth;
+
+        if (!hasWidth) {
+          fixedWidth = false;
+        }
+
+        if (!nextDOM) {
+          const colElement = document.createElement('col');
+
+          const [propertyKey, propertyValue] = getColStyleDeclaration(
+            cellMinWidth,
+            hasWidth,
+          );
+
+          colElement.style.setProperty(propertyKey, propertyValue);
+
+          colgroup.appendChild(colElement);
+        } else {
+          if ((nextDOM as HTMLTableColElement).style.width !== cssWidth) {
+            const [propertyKey, propertyValue] = getColStyleDeclaration(
+              cellMinWidth,
+              hasWidth,
+            );
+
+            (nextDOM as HTMLTableColElement).style.setProperty(
+              propertyKey,
+              propertyValue,
+            );
+          }
+
+          nextDOM = nextDOM.nextSibling;
+        }
+      }
+    }
+  }
+
+  while (nextDOM) {
+    const after = nextDOM.nextSibling;
+
+    nextDOM.parentNode?.removeChild(nextDOM);
+    nextDOM = after;
+  }
+
+  const hasUserWidth =
+    node.attrs.style &&
+    typeof node.attrs.style === 'string' &&
+    /\bwidth\s*:/i.test(node.attrs.style);
+
+  if (fixedWidth && !hasUserWidth) {
+    table.style.width = `${totalWidth}px`;
+    table.style.minWidth = '';
+  } else {
+    table.style.width = '';
+    table.style.minWidth = `${totalWidth}px`;
+  }
+}
+
+export class TableView implements NodeView {
+  node: ProseMirrorNode;
+
+  cellMinWidth: number;
+
+  dom: HTMLDivElement;
+
+  table: HTMLTableElement;
+
+  colgroup: HTMLTableColElement;
+
+  contentDOM: HTMLTableSectionElement;
+
+  constructor(node: ProseMirrorNode, cellMinWidth: number) {
+    this.node = node;
+    this.cellMinWidth = cellMinWidth;
+    this.dom = document.createElement('div');
+    this.dom.className = 'tableWrapper';
+    this.table = this.dom.appendChild(document.createElement('table'));
+
+    if (node.attrs.style) {
+      this.table.style.cssText = node.attrs.style;
+    }
+
+    this.colgroup = this.table.appendChild(document.createElement('colgroup'));
+    updateColumns(node, this.colgroup, this.table, cellMinWidth);
+    this.contentDOM = this.table.appendChild(document.createElement('tbody'));
+  }
+
+  update(node: ProseMirrorNode) {
+    if (node.type !== this.node.type) return false;
+
+    this.node = node;
+    updateColumns(node, this.colgroup, this.table, this.cellMinWidth);
+
+    return true;
+  }
+
+  ignoreMutation(mutation: ViewMutationRecord) {
+    const target = mutation.target as Node;
+    const isInsideWrapper = this.dom.contains(target);
+    const isInsideContent = this.contentDOM.contains(target);
+
+    if (isInsideWrapper && !isInsideContent) {
+      if (
+        mutation.type === 'attributes' ||
+        mutation.type === 'childList' ||
+        mutation.type === 'characterData'
+      ) {
+        return true;
+      }
+    }
+
+    // Chevron span (.tableReadonlySortChevron) added/removed by sort plugin.
+    if (mutation.type === 'childList') {
+      const nodes = [
+        ...Array.from(mutation.addedNodes),
+        ...Array.from(mutation.removedNodes),
+      ];
+      if (
+        nodes.some(
+          (n) =>
+            n instanceof Element &&
+            n.classList.contains('tableReadonlySortChevron'),
+        )
+      ) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
@@ -1,6 +1,8 @@
 import { Table } from "@tiptap/extension-table";
 import { Editor } from "@tiptap/core";
 import { DOMOutputSpec } from "@tiptap/pm/model";
+import { TextSelection } from "@tiptap/pm/state";
+import { cellAround } from "@tiptap/pm/tables";

 const LIST_TYPES = ["bulletList", "orderedList", "taskList"];

@@ -32,9 +34,36 @@ function handleListOutdent(editor: Editor): boolean {
 }

 export const CustomTable = Table.extend({
+
  addKeyboardShortcuts() {
    return {
      ...this.parent?.(),
+      "Mod-a": () => {
+        const { state, view } = this.editor;
+        const { selection, doc } = state;
+
+        const $cellPos = cellAround(selection.$anchor);
+        if (!$cellPos) return false;
+
+        const cellNode = doc.nodeAt($cellPos.pos);
+        // Empty cells have nothing useful to scope to — let the default
+        // Mod-a fall through and select the whole doc.
+        if (!cellNode || !cellNode.textContent) return false;
+
+        const from = $cellPos.pos + 1;
+        const to = $cellPos.pos + cellNode.nodeSize - 1;
+        if (from >= to) return true;
+
+        const nextSel = TextSelection.between(
+          doc.resolve(from),
+          doc.resolve(to),
+          1,
+        );
+        if (!nextSel || selection.eq(nextSel)) return true;
+
+        view.dispatch(state.tr.setSelection(nextSel));
+        return true;
+      },
      Tab: () => {
        // If we're in a list within a table, handle list indentation
        if (isInList(this.editor) && this.editor.isActive("table")) {
@@ -0,0 +1,7 @@
+export function getColStyleDeclaration(minWidth: number, width: number | undefined): [string, string] {
+  if (width) {
+    return ['width', `${Math.max(width, minWidth)}px`]
+  }
+
+  return ['min-width', `${minWidth}px`]
+}
@@ -1,33 +0,0 @@
-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) {
Author	SHA1	Message	Date
Philipinho	cb0aeedabf	fix	2026-05-14 00:36:30 +01:00
Philipinho	784a30b5a2	cleanup	2026-05-14 00:31:26 +01:00
Philipinho	f18b29b45a	fix: close table handle menu when drag starts	2026-05-14 00:25:00 +01:00
Philipinho	d6af26d81b	Merge branch 'main' into table	2026-05-13 23:11:36 +01:00
Philip Okugbe	31ed0df3f7	feat(tree): replace sidebar tree (react-aborist) with custom tree implementation (#2199 ) * feat(tree): replace react-arborist with custom tree implementation * feat(tree): keyboard arrow navigation between rows * feat(emoji-picker): focus search input on open * refactor(emoji): switch to @slidoapp/emoji-mart fork for accessibility * feat(tree): Home/End and typeahead keyboard navigation * feat(tree): roving tabindex and * to expand sibling subtrees * feat(tree): Space activation and ARIA refinements * fix(tree): move treeitem role to focusable row + aria-current	2026-05-13 23:01:04 +01:00
Philipinho	1260d60d38	feat: table enhancement	2026-05-12 20:25:22 +01:00
Philipinho	bf1ddd8320	tableview	2026-05-10 19:19:23 +01:00
				`@@ -0,0 +1 @@`
				`export { TableHeaderPin } from './extension';`