payload-nested-docs-page-tree 1.2.3 → 1.4.0

package/dist/components/PageTreeListView.client.js

@@ -1,105 +1,141 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, useDroppable, useSensor, useSensors } from '@dnd-kit/core';
-import { DefaultListView, ListQueryProvider, SelectAll, SelectRow, SortHeader, toast, useConfig, useLocale, useTranslation } from '@payloadcms/ui';
+import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { DefaultListView, ListQueryProvider, Pill, SelectAll, SelectRow, SortHeader, toast, useConfig, useLocale, usePreferences, useTranslation } from '@payloadcms/ui';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React from 'react';
-import { pageTreeMoveRequestHeader, pageTreeMoveRequestHeaderValue } from '../types.js';
-import { buildInsertDropTargets, getDropTargetParentDoc, getOrderPlacementFromDropTarget } from '../utilities/dropTargets.js';
+import { buildInsertDropTargets, getDropTargetParentDoc } from '../utilities/dropTargets.js';
 import { CANCEL_DRAG_MESSAGE, getDropValidation } from '../utilities/moveValidation.js';
 import { buildDocSlugPath, buildPageTreeDocs, buildProspectiveDocSlugPath, getDocDisplayLabel, getVisibleTreeDocs } from '../utilities/pageTree.js';
 import { pageTreeCollisionDetectionStrategy } from '../utilities/pageTreeCollision.js';
 import { getPageTreeBadgeColor, getPageTreeBadgeLabel, getPageTreeDisplayStatus } from '../utilities/status.js';
-import { PageTreeProvider } from './PageTreeContext.js';
+import { PageTreeProvider, PageTreeRowDndProvider } from './PageTreeContext.js';
 import styles from './PageTreeListView.module.css';
 import { PageTreeTitleCell } from './PageTreeTitleCell.js';
-const MANUAL_ORDER_COLUMN_ACCESSOR = '_dragHandle';
 const SILENT_MOVE_MESSAGES = new Set([
     CANCEL_DRAG_MESSAGE
 ]);
+const ALREADY_ROOT_MESSAGE = 'This page is already in root level.';
+function getParentMovePreferenceKey(collectionSlug) {
+    return `payload-nested-docs-page-tree:${collectionSlug}:parentMoveHandle`;
+}
 function getRowDropID(rowID) {
     return `page-drop:${rowID}`;
 }
-function getPageTreeDragData(value) {
-    return value && typeof value === 'object' ? value : {};
+function getSortableRowID(rowID) {
+    return `page-sort:${rowID}`;
 }
-function getPayloadDocID(doc) {
-    return typeof doc.id === 'number' || typeof doc.id === 'string' ? doc.id : undefined;
+function getDiagnosticString(value) {
+    return typeof value === 'string' && value.length > 0 ? value : null;
 }
-function getManualOrderDropValidation(args) {
-    const { activeDoc, targetDoc } = args;
-    if (!targetDoc) {
-        return {
-            isValid: true,
-            parentID: null
-        };
-    }
-    if (targetDoc.__pageTreeID === activeDoc.__pageTreeID) {
-        return {
-            isValid: false,
-            message: CANCEL_DRAG_MESSAGE,
-            parentID: targetDoc.__pageTreeID
-        };
-    }
-    if (targetDoc.__pageTreeAncestorIDs.includes(activeDoc.__pageTreeID)) {
-        return {
-            isValid: false,
-            message: 'A document cannot be moved under one of its descendants.',
-            parentID: targetDoc.__pageTreeID
-        };
+function getPageTreeDragData(value) {
+    if (!value || typeof value !== 'object') {
+        return {};
     }
+    const data = value;
+    const dragType = data.dragType === 'move' || data.dragType === 'order' ? data.dragType : undefined;
+    const parentID = data.parentID === null || typeof data.parentID === 'string' ? data.parentID : undefined;
+    const rowID = typeof data.rowID === 'string' ? data.rowID : undefined;
     return {
-        isValid: true,
-        parentID: targetDoc.__pageTreeID
+        dragType,
+        parentID,
+        rowID
     };
 }
-function getDropValidationForMode(args) {
-    const { activeDoc, allowSameParent, targetDoc } = args;
-    if (allowSameParent) {
-        return getManualOrderDropValidation({
-            activeDoc,
-            targetDoc
-        });
+function getSortableTransform(transform) {
+    if (!transform) {
+        return undefined;
     }
-    return getDropValidation({
-        activeDoc,
-        targetDoc
-    });
+    const scaleX = transform.scaleX ?? 1;
+    const scaleY = transform.scaleY ?? 1;
+    return `translate3d(${transform.x}px, ${transform.y}px, 0) scaleX(${scaleX}) scaleY(${scaleY})`;
 }
-function getCurrentOrderPlacement(args) {
-    const { activeDoc, docs } = args;
-    const activeIndex = docs.findIndex((doc)=>doc.__pageTreeID === activeDoc.__pageTreeID);
-    const movingSubtreeIDs = new Set(docs.filter((doc)=>doc.__pageTreeID === activeDoc.__pageTreeID || doc.__pageTreeAncestorIDs.includes(activeDoc.__pageTreeID)).map((doc)=>doc.__pageTreeID));
-    const siblingIsNotMoving = (doc)=>doc.__pageTreeParentID === activeDoc.__pageTreeParentID && !movingSubtreeIDs.has(doc.__pageTreeID);
-    if (activeIndex < 0) {
-        return {
-            nextSiblingID: null,
-            parentID: activeDoc.__pageTreeParentID,
-            previousSiblingID: null
-        };
+function getVisibleSubtreeIndexRange(docs, rootIndex) {
+    const rootDoc = docs[rootIndex];
+    if (!rootDoc) {
+        return null;
+    }
+    let end = rootIndex;
+    for(let index = rootIndex + 1; index < docs.length; index += 1){
+        if (!docs[index]?.__pageTreeAncestorIDs.includes(rootDoc.__pageTreeID)) {
+            break;
+        }
+        end = index;
     }
     return {
-        nextSiblingID: docs.slice(activeIndex + 1).find(siblingIsNotMoving)?.__pageTreeID ?? null,
-        parentID: activeDoc.__pageTreeParentID,
-        previousSiblingID: docs.slice(0, activeIndex).filter(siblingIsNotMoving).at(-1)?.__pageTreeID ?? null
+        end,
+        start: rootIndex
     };
 }
-function orderPlacementHasChanged(currentPlacement, nextPlacement) {
-    return currentPlacement.parentID !== nextPlacement.parentID || currentPlacement.previousSiblingID !== nextPlacement.previousSiblingID || currentPlacement.nextSiblingID !== nextPlacement.nextSiblingID;
-}
-function getReorderTargetFromPlacement(args) {
-    const { currentSort, docsByID, orderableFieldName, placement } = args;
-    const targetDocID = placement.previousSiblingID ?? placement.nextSiblingID;
-    if (!targetDocID) {
-        return null;
-    }
-    const targetDoc = docsByID.get(targetDocID);
-    if (!targetDoc) {
+function getRangeRect(args) {
+    const { activeNodeRect, activeRange, range, rects } = args;
+    const firstRect = rects[range.start] ?? (range.start === activeRange.start ? activeNodeRect : undefined);
+    const lastRect = rects[range.end] ?? (range.end === activeRange.end ? activeNodeRect : undefined);
+    if (!firstRect || !lastRect) {
         return null;
     }
     return {
-        newKeyWillBe: placement.previousSiblingID !== null && currentSort === orderableFieldName || placement.previousSiblingID === null && currentSort === `-${orderableFieldName}` ? 'greater' : 'less',
-        targetDoc
+        bottom: lastRect.top + lastRect.height,
+        height: lastRect.top + lastRect.height - firstRect.top,
+        top: firstRect.top
+    };
+}
+function isIndexInRange(index, range) {
+    return index >= range.start && index <= range.end;
+}
+function buildPageTreeSortingStrategy(docs) {
+    return ({ activeIndex, activeNodeRect, index, overIndex, rects })=>{
+        const activeRange = getVisibleSubtreeIndexRange(docs, activeIndex);
+        const overRange = getVisibleSubtreeIndexRange(docs, overIndex);
+        if (!activeRange || !overRange || activeRange.start === overRange.start) {
+            return null;
+        }
+        const activeRect = getRangeRect({
+            activeNodeRect,
+            activeRange,
+            range: activeRange,
+            rects
+        });
+        const overRect = getRangeRect({
+            activeNodeRect,
+            activeRange,
+            range: overRange,
+            rects
+        });
+        if (!activeRect || !overRect) {
+            return null;
+        }
+        if (isIndexInRange(index, activeRange)) {
+            return {
+                scaleX: 1,
+                scaleY: 1,
+                x: 0,
+                y: activeRange.start < overRange.start ? overRect.bottom - activeRect.bottom : overRect.top - activeRect.top
+            };
+        }
+        if (activeRange.start < overRange.start && index > activeRange.end && index <= overRange.end) {
+            return {
+                scaleX: 1,
+                scaleY: 1,
+                x: 0,
+                y: -activeRect.height
+            };
+        }
+        if (activeRange.start > overRange.start && index >= overRange.start && index < activeRange.start) {
+            return {
+                scaleX: 1,
+                scaleY: 1,
+                x: 0,
+                y: activeRect.height
+            };
+        }
+        return {
+            scaleX: 1,
+            scaleY: 1,
+            x: 0,
+            y: 0
+        };
     };
 }
 function buildPaginatedData(docs, limit, requestedPage) {
@@ -135,8 +171,12 @@ function normalizePositiveInt(value, fallback) {
     const parsedValue = Number.parseInt(value, 10);
     return Number.isNaN(parsedValue) || parsedValue <= 0 ? fallback : parsedValue;
 }
-function normalizePageTreeColumnState(columnState, useAsTitle) {
-    return columnState.filter((column)=>column.accessor !== MANUAL_ORDER_COLUMN_ACCESSOR).map((column)=>column.accessor === useAsTitle ? {
+function isOrderableSortActive(args) {
+    const { orderableFieldName, sort } = args;
+    return Boolean(orderableFieldName && (sort === orderableFieldName || sort === `-${orderableFieldName}`));
+}
+function ensureUseAsTitleColumn(columnState, useAsTitle) {
+    return columnState.map((column)=>column.accessor === useAsTitle ? {
             ...column,
             active: true
         } : column);
@@ -161,6 +201,191 @@ function getSelectableRowData(doc) {
 function shouldSilenceMoveMessage(message) {
     return typeof message === 'string' && SILENT_MOVE_MESSAGES.has(message);
 }
+function getVisibleSubtreeRowIDs(docs, rowID) {
+    const rootIndex = docs.findIndex((doc)=>doc.__pageTreeID === rowID);
+    if (rootIndex < 0) {
+        return [];
+    }
+    const rowIDs = [
+        rowID
+    ];
+    for (const doc of docs.slice(rootIndex + 1)){
+        if (!doc.__pageTreeAncestorIDs.includes(rowID)) {
+            break;
+        }
+        rowIDs.push(doc.__pageTreeID);
+    }
+    return rowIDs;
+}
+function buildOptimisticOrderRowIDs(args) {
+    const { activeRowID, docs, targetRowID } = args;
+    if (activeRowID === targetRowID) {
+        return null;
+    }
+    const activeDoc = docs.find((doc)=>doc.__pageTreeID === activeRowID);
+    const targetDoc = docs.find((doc)=>doc.__pageTreeID === targetRowID);
+    if (!activeDoc || !targetDoc || activeDoc.__pageTreeParentID !== targetDoc.__pageTreeParentID) {
+        return null;
+    }
+    const activeBlockIDs = getVisibleSubtreeRowIDs(docs, activeRowID);
+    const targetBlockIDs = getVisibleSubtreeRowIDs(docs, targetRowID);
+    if (activeBlockIDs.length === 0 || targetBlockIDs.length === 0 || targetBlockIDs.includes(activeRowID)) {
+        return null;
+    }
+    const currentRowIDs = docs.map((doc)=>doc.__pageTreeID);
+    if (activeBlockIDs.length === 1 && targetBlockIDs.length === 1) {
+        const activeIndex = currentRowIDs.indexOf(activeRowID);
+        const targetIndex = currentRowIDs.indexOf(targetRowID);
+        return activeIndex < 0 || targetIndex < 0 ? null : arrayMove(currentRowIDs, activeIndex, targetIndex);
+    }
+    const remainingRowIDs = currentRowIDs.filter((rowID)=>!activeBlockIDs.includes(rowID));
+    const activeIndex = currentRowIDs.indexOf(activeRowID);
+    const targetIndex = currentRowIDs.indexOf(targetRowID);
+    const targetAnchorID = activeIndex < targetIndex ? targetBlockIDs[targetBlockIDs.length - 1] : targetBlockIDs[0];
+    if (!targetAnchorID) {
+        return null;
+    }
+    const targetAnchorIndex = remainingRowIDs.indexOf(targetAnchorID);
+    if (targetAnchorIndex < 0) {
+        return null;
+    }
+    const insertIndex = activeIndex < targetIndex ? targetAnchorIndex + 1 : targetAnchorIndex;
+    return [
+        ...remainingRowIDs.slice(0, insertIndex),
+        ...activeBlockIDs,
+        ...remainingRowIDs.slice(insertIndex)
+    ];
+}
+function buildReorderRequestBody(args) {
+    const { activeRowID, docs, orderableFieldName, sort, targetRowID } = args;
+    if (!orderableFieldName || sort !== orderableFieldName && sort !== `-${orderableFieldName}`) {
+        return null;
+    }
+    if (activeRowID === targetRowID) {
+        return null;
+    }
+    const activeDoc = docs.find((doc)=>doc.__pageTreeID === activeRowID);
+    const targetDoc = docs.find((doc)=>doc.__pageTreeID === targetRowID);
+    if (!activeDoc || !targetDoc || activeDoc.__pageTreeParentID !== targetDoc.__pageTreeParentID) {
+        return null;
+    }
+    const siblingDocs = docs.filter((doc)=>doc.__pageTreeParentID === activeDoc.__pageTreeParentID);
+    const moveFromIndex = siblingDocs.findIndex((doc)=>doc.__pageTreeID === activeRowID);
+    const moveToIndex = siblingDocs.findIndex((doc)=>doc.__pageTreeID === targetRowID);
+    if (moveFromIndex < 0 || moveToIndex < 0 || moveFromIndex === moveToIndex) {
+        return null;
+    }
+    const newBeforeRow = moveToIndex > moveFromIndex ? siblingDocs[moveToIndex] : siblingDocs[moveToIndex - 1];
+    const newAfterRow = moveToIndex > moveFromIndex ? siblingDocs[moveToIndex + 1] : siblingDocs[moveToIndex];
+    const target = newBeforeRow ?? newAfterRow;
+    if (!target) {
+        return null;
+    }
+    const getFrontendOrderEntry = (doc, index)=>{
+        const orderKey = doc[orderableFieldName];
+        return {
+            slug: getDiagnosticString(doc.slug),
+            index,
+            orderKey: typeof orderKey === 'string' && orderKey.length > 0 ? orderKey : null
+        };
+    };
+    const siblingDocsAfter = [
+        ...siblingDocs
+    ];
+    const [movedSiblingDoc] = siblingDocsAfter.splice(moveFromIndex, 1);
+    if (!movedSiblingDoc) {
+        return null;
+    }
+    siblingDocsAfter.splice(moveToIndex, 0, movedSiblingDoc);
+    const targetKey = target[orderableFieldName];
+    const newKeyWillBe = newBeforeRow && sort === orderableFieldName || !newBeforeRow && sort === `-${orderableFieldName}` ? 'greater' : 'less';
+    return {
+        docsToMove: [
+            activeRowID
+        ],
+        frontendOrder: {
+            activeSlug: getDiagnosticString(activeDoc.slug),
+            after: siblingDocsAfter.map(getFrontendOrderEntry),
+            before: siblingDocs.map(getFrontendOrderEntry),
+            moveFromIndex,
+            moveToIndex,
+            newAfterRowSlug: newAfterRow ? getDiagnosticString(newAfterRow.slug) : null,
+            newBeforeRowSlug: newBeforeRow ? getDiagnosticString(newBeforeRow.slug) : null,
+            sort: sort ?? null,
+            targetSlug: getDiagnosticString(targetDoc.slug)
+        },
+        newKeyWillBe,
+        orderableFieldName,
+        target: {
+            id: target.__pageTreeID,
+            key: typeof targetKey === 'string' && targetKey.length > 0 ? targetKey : null
+        }
+    };
+}
+function orderDocsByRowIDs(docs, orderRowIDs) {
+    if (!orderRowIDs) {
+        return docs;
+    }
+    const docsByID = new Map(docs.map((doc)=>[
+            doc.__pageTreeID,
+            doc
+        ]));
+    const orderedDocs = orderRowIDs.flatMap((rowID)=>{
+        const doc = docsByID.get(rowID);
+        return doc ? [
+            doc
+        ] : [];
+    });
+    return orderedDocs.length === docs.length ? orderedDocs : docs;
+}
+function getDropTargetValidation(args) {
+    const { activeDoc, docsByID, dropTarget } = args;
+    if (dropTarget.dropType === 'row') {
+        return getDropValidation({
+            activeDoc,
+            targetDoc: docsByID.get(dropTarget.rowID) ?? undefined
+        });
+    }
+    if (dropTarget.parentID === null) {
+        if (activeDoc.__pageTreeParentID === null) {
+            return {
+                isValid: false,
+                message: ALREADY_ROOT_MESSAGE,
+                parentID: null
+            };
+        }
+        return {
+            isValid: true,
+            parentID: null
+        };
+    }
+    const targetDoc = docsByID.get(dropTarget.parentID);
+    if (!targetDoc) {
+        return {
+            isValid: false,
+            message: 'Could not resolve drop target.',
+            parentID: dropTarget.parentID
+        };
+    }
+    if (targetDoc.__pageTreeID === activeDoc.__pageTreeID) {
+        return {
+            isValid: false,
+            message: CANCEL_DRAG_MESSAGE,
+            parentID: targetDoc.__pageTreeID
+        };
+    }
+    if (targetDoc.__pageTreeAncestorIDs.includes(activeDoc.__pageTreeID)) {
+        return {
+            isValid: false,
+            message: 'A document cannot be moved under one of its descendants.',
+            parentID: targetDoc.__pageTreeID
+        };
+    }
+    return {
+        isValid: true,
+        parentID: targetDoc.__pageTreeID
+    };
+}
 function getStatusClassName(status) {
     if (status === 'changed' || status === 'draft' || status === 'published') {
         return status;
@@ -192,25 +417,17 @@ function renderStatusBadge(args) {
         })
     }, doc.__pageTreeID ?? index);
 }
-function createManualOrderColumn(docs) {
-    return {
-        accessor: MANUAL_ORDER_COLUMN_ACCESSOR,
-        active: true,
-        field: {
-            hidden: true
-        },
-        Heading: /*#__PURE__*/ _jsx(SortHeader, {}),
-        renderedCells: docs.map(()=>null)
-    };
-}
-function insertManualOrderColumn(columns, orderColumn) {
-    const selectColumnIndex = columns.findIndex((column)=>column.accessor === '_select');
-    const insertIndex = selectColumnIndex >= 0 ? selectColumnIndex + 1 : 0;
-    return [
-        ...columns.slice(0, insertIndex),
-        orderColumn,
-        ...columns.slice(insertIndex)
-    ];
+function ParentMoveToggle({ collectionSlug, enabled, onToggle }) {
+    return /*#__PURE__*/ _jsx(Pill, {
+        "aria-checked": enabled,
+        "aria-label": `${enabled ? 'Hide' : 'Show'} edit hierarchy handles`,
+        className: "pages-hierarchy-parent-move-toggle",
+        id: `pages-hierarchy-parent-move-toggle-${collectionSlug}`,
+        onClick: onToggle,
+        pillStyle: enabled ? 'dark' : 'light',
+        size: "small",
+        children: "Edit Hierarchy"
+    });
 }
 function buildTableColumns(args) {
     const { badgeConfig, columnState, docs, enableRowSelections, homeIndicatorEnabled, orderableFieldName, parentFieldSlug, t, useAsTitle } = args;
@@ -261,21 +478,35 @@ function buildTableColumns(args) {
                 }, doc.__pageTreeID ?? index))
         });
     }
-    if (orderableFieldName && !columnsToUse.some((column)=>column.accessor === MANUAL_ORDER_COLUMN_ACCESSOR)) {
-        return insertManualOrderColumn(columnsToUse, createManualOrderColumn(docs));
+    if (orderableFieldName) {
+        const orderableColumn = {
+            accessor: '_pageTreeOrderSort',
+            active: true,
+            field: {
+                hidden: true
+            },
+            Heading: /*#__PURE__*/ _jsx(SortHeader, {}),
+            renderedCells: docs.map((doc, index)=>/*#__PURE__*/ _jsx("span", {
+                    "aria-hidden": "true",
+                    className: "pages-hierarchy-order-sort-spacer"
+                }, doc.__pageTreeID ?? index))
+        };
+        const selectColumnIndex = columnsToUse.findIndex((column)=>column.accessor === '_select');
+        columnsToUse.splice(selectColumnIndex >= 0 ? selectColumnIndex + 1 : 0, 0, orderableColumn);
     }
     return columnsToUse;
 }
-function HierarchyInsertRow({ activeColumnsCount, activeDragRowID, dropTarget, dropValidation, isMovePending }) {
+function HierarchyInsertRow({ activeColumnsCount, activeDragRowID, activeDropTargetID, dropTarget, dropValidation, isMovePending }) {
     const { isOver, setNodeRef } = useDroppable({
         id: dropTarget.dropID,
         data: dropTarget,
         disabled: isMovePending
     });
     const hasActiveDrag = Boolean(activeDragRowID);
+    const showInsertLine = isOver && activeDropTargetID === dropTarget.dropID;
     return /*#__PURE__*/ _jsx("tr", {
         className: "pages-hierarchy-insert-row",
-        "data-drag-over": isOver ? 'true' : 'false',
+        "data-drag-over": showInsertLine ? 'true' : 'false',
         "data-drop-valid": hasActiveDrag ? dropValidation?.isValid ? 'true' : 'false' : undefined,
         "data-page-tree-insert": "true",
         children: /*#__PURE__*/ _jsx("td", {
@@ -288,7 +519,7 @@ function HierarchyInsertRow({ activeColumnsCount, activeDragRowID, dropTarget, d
         })
     });
 }
-function HierarchyTableRow({ activeColumns, activeDragRowID, doc, dropValidation, insertAfterDropID, insertBeforeDropID, isMovePending, rowIndex, titleCellAccessor }) {
+function HierarchyTableRow({ activeColumns, activeDragRowID, activeDragType, canReorderRows, doc, dropValidation, insertAfterDropID, insertBeforeDropID, isMovePending, rowIndex, titleCellAccessor }) {
     const { isOver, setNodeRef } = useDroppable({
         id: getRowDropID(doc.__pageTreeID),
         data: {
@@ -299,53 +530,110 @@ function HierarchyTableRow({ activeColumns, activeDragRowID, doc, dropValidation
         },
         disabled: isMovePending
     });
-    const hasActiveDrag = Boolean(activeDragRowID);
+    const sortable = useSortable({
+        id: getSortableRowID(doc.__pageTreeID),
+        data: {
+            dragType: 'order',
+            parentID: doc.__pageTreeParentID,
+            rowID: doc.__pageTreeID
+        },
+        disabled: !canReorderRows || isMovePending || activeDragType === 'move'
+    });
+    const hasActiveMoveDrag = activeDragType === 'move' && Boolean(activeDragRowID);
     const isActiveDragRow = activeDragRowID === doc.__pageTreeID;
+    const setRowRef = React.useCallback((element)=>{
+        setNodeRef(element);
+        sortable.setNodeRef(element);
+    }, [
+        setNodeRef,
+        sortable
+    ]);
+    const rowDndValue = React.useMemo(()=>({
+            isOrderDragging: sortable.isDragging,
+            orderHandleAttributes: sortable.attributes,
+            orderHandleListeners: sortable.listeners,
+            orderHandleRef: sortable.setActivatorNodeRef
+        }), [
+        sortable.attributes,
+        sortable.isDragging,
+        sortable.listeners,
+        sortable.setActivatorNodeRef
+    ]);
+    const sortableStyle = React.useMemo(()=>({
+            position: sortable.isDragging ? 'relative' : undefined,
+            transform: getSortableTransform(sortable.transform),
+            transition: activeDragType === 'order' ? sortable.transition : undefined,
+            zIndex: sortable.isDragging ? 1 : undefined
+        }), [
+        activeDragType,
+        sortable.isDragging,
+        sortable.transform,
+        sortable.transition
+    ]);
     return /*#__PURE__*/ _jsx("tr", {
         className: `row-${rowIndex + 1}`,
-        "data-drag-over": isOver ? 'true' : 'false',
-        "data-drop-valid": hasActiveDrag ? dropValidation?.isValid ? 'true' : 'false' : undefined,
+        "data-drag-over": activeDragType === 'move' && isOver ? 'true' : 'false',
+        "data-drop-valid": hasActiveMoveDrag ? dropValidation?.isValid ? 'true' : 'false' : undefined,
         "data-id": doc.id,
-        "data-is-drag-source": isActiveDragRow ? 'true' : 'false',
+        "data-is-drag-source": activeDragType === 'move' && isActiveDragRow ? 'true' : 'false',
+        "data-is-order-drag-source": sortable.isDragging ? 'true' : 'false',
         "data-page-tree-row": "true",
-        ref: setNodeRef,
-        children: activeColumns.map((column, columnIndex)=>{
-            const { accessor } = column;
-            return /*#__PURE__*/ _jsx("td", {
-                className: `cell-${accessor.replace(/\./g, '__')}`,
-                "data-page-tree-manual-order-cell": accessor === MANUAL_ORDER_COLUMN_ACCESSOR ? 'true' : undefined,
-                "data-page-tree-title-cell": accessor === titleCellAccessor ? 'true' : undefined,
-                children: column.renderedCells?.[rowIndex] ?? null
-            }, columnIndex);
+        ref: setRowRef,
+        style: sortableStyle,
+        children: /*#__PURE__*/ _jsx(PageTreeRowDndProvider, {
+            value: rowDndValue,
+            children: activeColumns.map((column, columnIndex)=>{
+                const { accessor } = column;
+                return /*#__PURE__*/ _jsx("td", {
+                    className: `cell-${accessor.replace(/\./g, '__')}`,
+                    "data-page-tree-title-cell": accessor === titleCellAccessor ? 'true' : undefined,
+                    children: column.renderedCells?.[rowIndex] ?? null
+                }, columnIndex);
+            })
         })
     });
 }
-function HierarchyTable({ activeDragRowID, allDocsByID, allowSameParentDrops, columns, data, isMovePending, titleCellAccessor }) {
+function HierarchyTable({ activeDragRowID, activeDragType, activeDropTarget, allDocsByID, canReorderRows, columns, data, isMovePending, titleCellAccessor }) {
     const activeColumns = React.useMemo(()=>columns.filter((column)=>column?.active), [
         columns
     ]);
-    const hasManualOrderColumn = React.useMemo(()=>activeColumns.some((column)=>column.accessor === MANUAL_ORDER_COLUMN_ACCESSOR), [
-        activeColumns
+    const sortableItems = React.useMemo(()=>data.map((doc)=>getSortableRowID(doc.__pageTreeID)), [
+        data
+    ]);
+    const sortingStrategy = React.useMemo(()=>buildPageTreeSortingStrategy(data), [
+        data
     ]);
     const insertDropTargets = React.useMemo(()=>buildInsertDropTargets(data), [
         data
     ]);
-    const activeDoc = activeDragRowID ? allDocsByID.get(activeDragRowID) ?? null : null;
+    const insertDropTargetsByReferenceRowID = React.useMemo(()=>new Map(insertDropTargets.map((dropTarget)=>[
+                dropTarget.referenceRowID,
+                dropTarget
+            ])), [
+        insertDropTargets
+    ]);
+    const activeDropTargetID = activeDropTarget?.dropType === 'insert' ? activeDropTarget.dropID : null;
+    const activeDoc = activeDragType === 'move' && activeDragRowID ? allDocsByID.get(activeDragRowID) ?? null : null;
     const rowDropValidationByID = React.useMemo(()=>{
         if (!activeDoc) {
             return new Map();
         }
         return new Map(data.map((doc)=>[
                 doc.__pageTreeID,
-                getDropValidationForMode({
+                getDropTargetValidation({
                     activeDoc,
-                    allowSameParent: allowSameParentDrops,
-                    targetDoc: doc
+                    docsByID: allDocsByID,
+                    dropTarget: {
+                        dropType: 'row',
+                        insertAfterDropID: null,
+                        insertBeforeDropID: null,
+                        rowID: doc.__pageTreeID
+                    }
                 })
             ]));
     }, [
         activeDoc,
-        allowSameParentDrops,
+        allDocsByID,
         data
     ]);
     const insertDropValidationByID = React.useMemo(()=>{
@@ -354,15 +642,14 @@ function HierarchyTable({ activeDragRowID, allDocsByID, allowSameParentDrops, co
         }
         return new Map(insertDropTargets.map((dropTarget)=>[
                 dropTarget.dropID,
-                getDropValidationForMode({
+                getDropTargetValidation({
                     activeDoc,
-                    allowSameParent: allowSameParentDrops,
-                    targetDoc: dropTarget.parentID === null ? undefined : allDocsByID.get(dropTarget.parentID) ?? undefined
+                    docsByID: allDocsByID,
+                    dropTarget
                 })
             ]));
     }, [
         activeDoc,
-        allowSameParentDrops,
         allDocsByID,
         insertDropTargets
     ]);
@@ -376,7 +663,6 @@ function HierarchyTable({ activeDragRowID, allDocsByID, allowSameParentDrops, co
             'table-wrap pages-hierarchy-table',
             activeDoc ? 'pages-hierarchy-table--dragging' : ''
         ].filter(Boolean).join(' '),
-        "data-page-tree-orderable": hasManualOrderColumn ? 'true' : undefined,
         children: /*#__PURE__*/ _jsx("div", {
             className: "table table--appearance-default",
             children: /*#__PURE__*/ _jsxs("table", {
@@ -386,45 +672,50 @@ function HierarchyTable({ activeDragRowID, allDocsByID, allowSameParentDrops, co
                     /*#__PURE__*/ _jsx("thead", {
                         children: /*#__PURE__*/ _jsx("tr", {
                             children: activeColumns.map((column, index)=>/*#__PURE__*/ _jsx("th", {
-                                    "data-page-tree-manual-order-cell": column.accessor === MANUAL_ORDER_COLUMN_ACCESSOR ? 'true' : undefined,
                                     "data-page-tree-title-cell": column.accessor === titleCellAccessor ? 'true' : undefined,
                                     id: `heading-${column.accessor.replace(/\./g, '__')}`,
                                     children: column.Heading
                                 }, index))
                         })
                     }),
-                    /*#__PURE__*/ _jsxs("tbody", {
-                        children: [
-                            insertDropTargets[0] ? /*#__PURE__*/ _jsx(HierarchyInsertRow, {
-                                activeColumnsCount: activeColumns.length,
-                                activeDragRowID: activeDragRowID,
-                                dropTarget: insertDropTargets[0],
-                                dropValidation: insertDropValidationByID.get(insertDropTargets[0].dropID),
-                                isMovePending: isMovePending
-                            }, insertDropTargets[0].dropID) : null,
-                            data.map((doc, rowIndex)=>/*#__PURE__*/ _jsxs(React.Fragment, {
+                    /*#__PURE__*/ _jsx("tbody", {
+                        children: /*#__PURE__*/ _jsx(SortableContext, {
+                            items: sortableItems,
+                            strategy: sortingStrategy,
+                            children: data.map((doc, rowIndex)=>{
+                                const rootInsertBeforeDropTarget = doc.__pageTreeParentID === null ? insertDropTargetsByReferenceRowID.get(doc.__pageTreeID) : undefined;
+                                const rootInsertTargetIndex = rootInsertBeforeDropTarget !== undefined ? insertDropTargets.indexOf(rootInsertBeforeDropTarget) : -1;
+                                const rootInsertAfterDropTarget = rootInsertTargetIndex >= 0 ? insertDropTargets[rootInsertTargetIndex + 1] : undefined;
+                                const isTrailingRootInsert = rootInsertAfterDropTarget === insertDropTargets[insertDropTargets.length - 1];
+                                const nextVisibleDoc = data[rowIndex + 1];
+                                const hasVisibleDescendantAfter = nextVisibleDoc?.__pageTreeAncestorIDs.includes(doc.__pageTreeID) ?? false;
+                                return /*#__PURE__*/ _jsxs(React.Fragment, {
                                     children: [
+                                        rootInsertBeforeDropTarget ? /*#__PURE__*/ _jsx(HierarchyInsertRow, {
+                                            activeColumnsCount: activeColumns.length,
+                                            activeDragRowID: activeDoc ? activeDragRowID : null,
+                                            activeDropTargetID: activeDropTargetID,
+                                            dropTarget: rootInsertBeforeDropTarget,
+                                            dropValidation: insertDropValidationByID.get(rootInsertBeforeDropTarget.dropID),
+                                            isMovePending: isMovePending
+                                        }, rootInsertBeforeDropTarget.dropID) : null,
                                         /*#__PURE__*/ _jsx(HierarchyTableRow, {
                                             activeColumns: activeColumns,
                                             activeDragRowID: activeDragRowID,
+                                            activeDragType: activeDragType,
+                                            canReorderRows: canReorderRows,
                                             doc: doc,
                                             dropValidation: rowDropValidationByID.get(doc.__pageTreeID),
-                                            insertAfterDropID: insertDropTargets[rowIndex + 1].dropID,
-                                            insertBeforeDropID: insertDropTargets[rowIndex].dropID,
+                                            insertAfterDropID: hasVisibleDescendantAfter || isTrailingRootInsert ? null : rootInsertAfterDropTarget?.dropID ?? null,
+                                            insertBeforeDropID: rootInsertBeforeDropTarget?.dropID ?? null,
                                             isMovePending: isMovePending,
                                             rowIndex: rowIndex,
                                             titleCellAccessor: titleCellAccessor
-                                        }),
-                                        insertDropTargets[rowIndex + 1] ? /*#__PURE__*/ _jsx(HierarchyInsertRow, {
-                                            activeColumnsCount: activeColumns.length,
-                                            activeDragRowID: activeDragRowID,
-                                            dropTarget: insertDropTargets[rowIndex + 1],
-                                            dropValidation: insertDropValidationByID.get(insertDropTargets[rowIndex + 1].dropID),
-                                            isMovePending: isMovePending
-                                        }, insertDropTargets[rowIndex + 1].dropID) : null
+                                        })
                                     ]
-                                }, doc.__pageTreeID))
-                        ]
+                                }, doc.__pageTreeID);
+                            })
+                        })
                     })
                 ]
             })
@@ -438,14 +729,15 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
     const locale = useLocale();
     const { i18n } = useTranslation();
     const [activeDragRowID, setActiveDragRowID] = React.useState(null);
+    const [activeDragType, setActiveDragType] = React.useState(null);
     const [activeDropTarget, setActiveDropTarget] = React.useState(null);
     const [collapsedIDs, setCollapsedIDs] = React.useState(()=>new Set());
-    const [localSourceDocs, setLocalSourceDocs] = React.useState(sourceDocs);
+    const [optimisticOrderRowIDs, setOptimisticOrderRowIDs] = React.useState(null);
+    const [parentMoveEnabled, setParentMoveEnabled] = React.useState(false);
     const [pendingMoveRowID, setPendingMoveRowID] = React.useState(null);
-    React.useEffect(()=>{
-        setLocalSourceDocs(sourceDocs);
-    }, [
-        sourceDocs
+    const { getPreference, setPreference } = usePreferences();
+    const parentMovePreferenceKey = React.useMemo(()=>getParentMovePreferenceKey(props.collectionSlug), [
+        props.collectionSlug
     ]);
     const toggleRow = React.useCallback((rowID)=>{
         setCollapsedIDs((currentState)=>{
@@ -458,6 +750,16 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             return nextState;
         });
     }, []);
+    const handleParentMoveToggle = React.useCallback(()=>{
+        setParentMoveEnabled((currentValue)=>{
+            const nextValue = !currentValue;
+            void setPreference(parentMovePreferenceKey, nextValue);
+            return nextValue;
+        });
+    }, [
+        parentMovePreferenceKey,
+        setPreference
+    ]);
     const currentSort = React.useMemo(()=>{
         const searchParamSort = searchParams.getAll('sort');
         if (searchParamSort.length > 0) {
@@ -468,7 +770,10 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         query.sort,
         searchParams
     ]);
-    const manualOrderIsActive = Boolean(orderableFieldName && (currentSort === orderableFieldName || currentSort === `-${orderableFieldName}`));
+    const canReorderRows = canMoveDocs && isOrderableSortActive({
+        orderableFieldName,
+        sort: currentSort
+    });
     const currentLimit = React.useMemo(()=>normalizePositiveInt(searchParams.get('limit'), typeof query.limit === 'number' && query.limit > 0 ? query.limit : 10), [
         query.limit,
         searchParams
@@ -477,13 +782,13 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         query.page,
         searchParams
     ]);
-    const liveAllDocs = React.useMemo(()=>buildPageTreeDocs(localSourceDocs, {
+    const liveAllDocs = React.useMemo(()=>buildPageTreeDocs(sourceDocs, {
             parentFieldSlug,
             sort: currentSort
         }), [
         currentSort,
-        localSourceDocs,
-        parentFieldSlug
+        parentFieldSlug,
+        sourceDocs
     ]);
     const collapseResetKey = React.useMemo(()=>JSON.stringify([
             props.collectionSlug,
@@ -498,19 +803,37 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             activeDragRowID,
             canMoveDocs,
             collapsedIDs,
+            parentMoveEnabled,
             pendingMoveRowID,
             toggleRow
         }), [
         activeDragRowID,
         canMoveDocs,
         collapsedIDs,
+        parentMoveEnabled,
         pendingMoveRowID,
         toggleRow
     ]);
+    React.useEffect(()=>{
+        let isMounted = true;
+        void getPreference(parentMovePreferenceKey).then((storedValue)=>{
+            if (isMounted) {
+                setParentMoveEnabled(storedValue === true);
+            }
+        });
+        return ()=>{
+            isMounted = false;
+        };
+    }, [
+        getPreference,
+        parentMovePreferenceKey
+    ]);
     React.useEffect(()=>{
         setActiveDragRowID(null);
+        setActiveDragType(null);
         setActiveDropTarget(null);
         setCollapsedIDs(new Set());
+        setOptimisticOrderRowIDs(null);
     }, [
         collapseResetKey
     ]);
@@ -524,17 +847,36 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         visibleDocs
     ]);
     const paginatedDocs = paginatedData.docs;
+    const paginatedServerOrderKey = React.useMemo(()=>paginatedDocs.map((doc)=>doc.__pageTreeID).join('\0'), [
+        paginatedDocs
+    ]);
+    const displayedPaginatedDocs = React.useMemo(()=>orderDocsByRowIDs(paginatedDocs, optimisticOrderRowIDs), [
+        optimisticOrderRowIDs,
+        paginatedDocs
+    ]);
+    const displayedPaginatedData = React.useMemo(()=>({
+            ...paginatedData,
+            docs: displayedPaginatedDocs
+        }), [
+        displayedPaginatedDocs,
+        paginatedData
+    ]);
+    React.useEffect(()=>{
+        setOptimisticOrderRowIDs(null);
+    }, [
+        paginatedServerOrderKey
+    ]);
     const allDocsByID = React.useMemo(()=>new Map(liveAllDocs.map((doc)=>[
                 doc.__pageTreeID,
                 doc
             ])), [
         liveAllDocs
     ]);
-    const paginatedDocsByID = React.useMemo(()=>new Map(paginatedDocs.map((doc)=>[
+    const paginatedDocsByID = React.useMemo(()=>new Map(displayedPaginatedDocs.map((doc)=>[
                 doc.__pageTreeID,
                 doc
             ])), [
-        paginatedDocs
+        displayedPaginatedDocs
     ]);
     const renderedCellIndexByDocID = React.useMemo(()=>new Map(allDocs.map((doc, index)=>[
                 doc.__pageTreeID,
@@ -542,19 +884,19 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             ])), [
         allDocs
     ]);
-    const normalizedColumnState = React.useMemo(()=>normalizePageTreeColumnState(columnState, useAsTitle), [
+    const normalizedColumnState = React.useMemo(()=>ensureUseAsTitleColumn(columnState, useAsTitle), [
         columnState,
         useAsTitle
     ]);
-    const paginatedColumnState = React.useMemo(()=>sliceColumnState(normalizedColumnState, paginatedDocs, renderedCellIndexByDocID), [
+    const paginatedColumnState = React.useMemo(()=>sliceColumnState(normalizedColumnState, displayedPaginatedDocs, renderedCellIndexByDocID), [
+        displayedPaginatedDocs,
         normalizedColumnState,
-        paginatedDocs,
         renderedCellIndexByDocID
     ]);
     const tableColumns = React.useMemo(()=>buildTableColumns({
             badgeConfig,
             columnState: paginatedColumnState,
-            docs: paginatedDocs,
+            docs: displayedPaginatedDocs,
             enableRowSelections: props.enableRowSelections,
             homeIndicatorEnabled,
             orderableFieldName,
@@ -563,7 +905,7 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             useAsTitle
         }), [
         paginatedColumnState,
-        paginatedDocs,
+        displayedPaginatedDocs,
         badgeConfig,
         homeIndicatorEnabled,
         orderableFieldName,
@@ -574,7 +916,7 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
     ]);
     const activeDragDoc = activeDragRowID ? paginatedDocsByID.get(activeDragRowID) ?? null : null;
     const activeDragPreviewPath = React.useMemo(()=>{
-        if (!activeDragDoc) {
+        if (!activeDragDoc || activeDragType !== 'move') {
             return null;
         }
         if (!activeDropTarget) {
@@ -587,10 +929,10 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             docsByID: allDocsByID,
             dropTarget: activeDropTarget
         });
-        const dropValidation = getDropValidationForMode({
+        const dropValidation = getDropTargetValidation({
             activeDoc: activeDragDoc,
-            allowSameParent: manualOrderIsActive,
-            targetDoc: targetDoc ?? undefined
+            docsByID: allDocsByID,
+            dropTarget: activeDropTarget
         });
         if (!dropValidation.isValid) {
             return buildDocSlugPath({
@@ -605,218 +947,46 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         });
     }, [
         activeDragDoc,
+        activeDragType,
         activeDropTarget,
-        allDocsByID,
-        manualOrderIsActive
+        allDocsByID
     ]);
     const isMovePending = pendingMoveRowID !== null;
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
-            distance: 4
+            distance: 2
         }
     }));
-    const moveDocument = React.useCallback(async (args)=>{
-        const { parentID, rowID } = args;
-        const params = new URLSearchParams();
-        if (locale?.code) {
-            params.set('locale', locale.code);
-        }
-        const response = await fetch(`${config.routes.api}/${props.collectionSlug}/${encodeURIComponent(rowID)}/move${params.size > 0 ? `?${params.toString()}` : ''}`, {
-            body: JSON.stringify({
-                parentID
-            }),
-            credentials: 'include',
-            headers: {
-                'Accept-Language': i18n.language,
-                'Content-Type': 'application/json',
-                [pageTreeMoveRequestHeader]: pageTreeMoveRequestHeaderValue
-            },
-            method: 'POST'
-        });
-        const result = await response.json().catch(()=>null);
-        if (!response.ok) {
-            throw new Error(result?.message ?? 'Could not move document.');
-        }
-        return result;
-    }, [
-        config.routes.api,
-        i18n.language,
-        locale?.code,
-        props.collectionSlug
-    ]);
-    const reorderDocument = React.useCallback(async (args)=>{
-        const { movedDocID, newKeyWillBe, targetDoc } = args;
-        const targetID = getPayloadDocID(targetDoc);
-        if (!orderableFieldName || targetID === undefined) {
-            return undefined;
-        }
-        const params = new URLSearchParams();
-        if (locale?.code) {
-            params.set('locale', locale.code);
-        }
-        const response = await fetch(`${config.routes.api}/reorder${params.size > 0 ? `?${params.toString()}` : ''}`, {
-            body: JSON.stringify({
-                collectionSlug: props.collectionSlug,
-                docsToMove: [
-                    movedDocID
-                ],
-                newKeyWillBe,
-                orderableFieldName,
-                target: {
-                    id: targetID,
-                    key: targetDoc[orderableFieldName]
-                }
-            }),
-            credentials: 'include',
-            headers: {
-                'Accept-Language': i18n.language,
-                'Content-Type': 'application/json',
-                [pageTreeMoveRequestHeader]: pageTreeMoveRequestHeaderValue
-            },
-            method: 'POST'
-        });
-        const result = await response.json().catch(()=>null);
-        if (response.status === 403) {
-            throw new Error('You do not have permission to reorder these rows');
-        }
-        if (!response.ok) {
-            throw new Error('Failed to reorder. This can happen if you reorder several rows too quickly. Please try again.');
-        }
-        if (result?.message === 'initial migration') {
-            throw new Error('You have enabled "orderable" on a collection with existing documents and this is the first time you have sorted documents. We have run an automatic migration to add an initial order to the documents. Please refresh the page and try again.');
-        }
-        return result?.orderValues?.[0];
-    }, [
-        config.routes.api,
-        i18n.language,
-        locale?.code,
-        orderableFieldName,
-        props.collectionSlug
-    ]);
-    const handleManualOrderMoveEnd = React.useCallback(async (args)=>{
-        const { activeDoc, dropTarget, rowID } = args;
-        if (!orderableFieldName) {
-            return;
-        }
-        const targetDoc = getDropTargetParentDoc({
-            docsByID: allDocsByID,
-            dropTarget
-        });
-        const dropValidation = getManualOrderDropValidation({
-            activeDoc,
-            targetDoc: targetDoc ?? undefined
-        });
-        if (!dropValidation.isValid) {
-            if (!shouldSilenceMoveMessage(dropValidation.message)) {
-                toast.error(dropValidation.message ?? 'Could not move document.');
-            }
-            return;
-        }
-        const placement = getOrderPlacementFromDropTarget({
-            activeDoc,
-            docs: paginatedDocs,
-            docsByID: allDocsByID,
-            dropTarget
-        });
-        if (!placement) {
-            return;
-        }
-        const currentPlacement = getCurrentOrderPlacement({
-            activeDoc,
-            docs: paginatedDocs
-        });
-        const parentChanged = activeDoc.__pageTreeParentID !== placement.parentID;
-        const orderChanged = orderPlacementHasChanged(currentPlacement, placement);
-        const reorderTarget = orderChanged ? getReorderTargetFromPlacement({
-            currentSort,
-            docsByID: allDocsByID,
-            orderableFieldName,
-            placement
-        }) : null;
-        if (!parentChanged && !reorderTarget) {
-            return;
-        }
-        const movedDocID = getPayloadDocID(activeDoc);
-        if (movedDocID === undefined) {
-            return;
-        }
-        const parentDoc = placement.parentID ? allDocsByID.get(placement.parentID) : undefined;
-        const nextParentValue = placement.parentID === null ? null : parentDoc ? getPayloadDocID(parentDoc) ?? placement.parentID : placement.parentID;
-        let parentMoveSucceeded = false;
-        setPendingMoveRowID(rowID);
-        try {
-            if (parentChanged) {
-                await moveDocument({
-                    parentID: placement.parentID,
-                    rowID
-                });
-                parentMoveSucceeded = true;
-            }
-            const nextOrderValue = reorderTarget ? await reorderDocument({
-                movedDocID,
-                newKeyWillBe: reorderTarget.newKeyWillBe,
-                targetDoc: reorderTarget.targetDoc
-            }) : undefined;
-            if (parentChanged || typeof nextOrderValue === 'string') {
-                setLocalSourceDocs((currentDocs)=>currentDocs.map((doc)=>String(doc.id ?? '') === String(movedDocID) ? {
-                            ...doc,
-                            ...parentChanged ? {
-                                [parentFieldSlug]: nextParentValue
-                            } : {},
-                            ...typeof nextOrderValue === 'string' ? {
-                                [orderableFieldName]: nextOrderValue
-                            } : {}
-                        } : doc));
-            }
-            if (parentChanged) {
-                toast.success(`Moved "${getDocDisplayLabel(activeDoc)}".`);
-            }
-            React.startTransition(()=>{
-                router.refresh();
-            });
-        } catch (error) {
-            const message = error instanceof Error && error.message ? error.message : 'Could not move document.';
-            toast.error(parentMoveSucceeded ? `Moved "${getDocDisplayLabel(activeDoc)}", but could not update its manual order. ${message}` : message);
-            if (parentMoveSucceeded) {
-                React.startTransition(()=>{
-                    router.refresh();
-                });
-            }
-        } finally{
-            setPendingMoveRowID(null);
-        }
-    }, [
-        allDocsByID,
-        currentSort,
-        moveDocument,
-        orderableFieldName,
-        paginatedDocs,
-        parentFieldSlug,
-        reorderDocument,
-        router
-    ]);
     const handleDragCancel = React.useCallback(()=>{
         setActiveDragRowID(null);
+        setActiveDragType(null);
         setActiveDropTarget(null);
     }, []);
     const handleDragStart = React.useCallback((event)=>{
-        const dragData = getPageTreeDragData(event.active.data.current);
         if (!canMoveDocs || isMovePending) {
             return;
         }
-        const rowID = dragData.rowID;
-        if (typeof rowID === 'string' && paginatedDocsByID.has(rowID)) {
+        const dragData = getPageTreeDragData(event.active.data.current);
+        const { dragType, rowID } = dragData;
+        if (typeof rowID === 'string' && dragType && paginatedDocsByID.has(rowID) && (dragType !== 'order' || canReorderRows)) {
             setActiveDragRowID(rowID);
+            setActiveDragType(dragType);
             setActiveDropTarget(null);
         }
     }, [
         canMoveDocs,
+        canReorderRows,
         isMovePending,
         paginatedDocsByID
     ]);
     const handleDragOver = React.useCallback((event)=>{
+        const dragData = getPageTreeDragData(event.active.data.current);
         const overData = event.over?.data.current;
-        if (!overData) {
+        if (dragData.dragType === 'order') {
+            setActiveDropTarget(null);
+            return;
+        }
+        if (dragData.dragType !== 'move' || !overData) {
             setActiveDropTarget(null);
             return;
         }
@@ -832,62 +1002,132 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
     }, []);
     const handleDragEnd = React.useCallback(async (event)=>{
         const dragData = getPageTreeDragData(event.active.data.current);
-        const rowID = dragData.rowID;
+        const { dragType, rowID } = dragData;
         const activeDoc = typeof rowID === 'string' ? paginatedDocsByID.get(rowID) ?? null : null;
         const overData = event.over?.data.current;
+        const overDragData = getPageTreeDragData(event.over?.data.current);
         setActiveDragRowID(null);
+        setActiveDragType(null);
         setActiveDropTarget(null);
-        if (!rowID || !activeDoc || !overData) {
+        if (dragType === 'order') {
+            if (typeof rowID === 'string' && typeof overDragData.rowID === 'string') {
+                const nextOrderRowIDs = buildOptimisticOrderRowIDs({
+                    activeRowID: rowID,
+                    docs: displayedPaginatedDocs,
+                    targetRowID: overDragData.rowID
+                });
+                const reorderRequestBody = buildReorderRequestBody({
+                    activeRowID: rowID,
+                    docs: displayedPaginatedDocs,
+                    orderableFieldName,
+                    sort: currentSort,
+                    targetRowID: overDragData.rowID
+                });
+                if (!nextOrderRowIDs || !reorderRequestBody) {
+                    return;
+                }
+                const apiRoute = config.routes.api;
+                const params = new URLSearchParams();
+                if (locale?.code) {
+                    params.set('locale', locale.code);
+                }
+                setOptimisticOrderRowIDs(nextOrderRowIDs);
+                setPendingMoveRowID(rowID);
+                try {
+                    const response = await fetch(`${apiRoute}/${props.collectionSlug}/${encodeURIComponent(rowID)}/reorder${params.size > 0 ? `?${params.toString()}` : ''}`, {
+                        body: JSON.stringify(reorderRequestBody),
+                        credentials: 'include',
+                        headers: {
+                            'Accept-Language': i18n.language,
+                            'Content-Type': 'application/json'
+                        },
+                        method: 'POST'
+                    });
+                    const result = await response.json().catch(()=>null);
+                    if (!response.ok) {
+                        setOptimisticOrderRowIDs(null);
+                        toast.error(result?.message ?? 'Could not reorder document.');
+                        return;
+                    }
+                    if (result?.message === 'initial migration') {
+                        setOptimisticOrderRowIDs(null);
+                    }
+                    React.startTransition(()=>{
+                        router.refresh();
+                    });
+                } catch (error) {
+                    const message = error instanceof Error && error.message ? error.message : 'Could not reorder document.';
+                    setOptimisticOrderRowIDs(null);
+                    toast.error(message);
+                } finally{
+                    setPendingMoveRowID(null);
+                }
+            }
             return;
         }
-        if (manualOrderIsActive && orderableFieldName) {
-            await handleManualOrderMoveEnd({
-                activeDoc,
-                dropTarget: overData,
-                rowID
-            });
+        if (dragType !== 'move' || typeof rowID !== 'string' || !activeDoc || !overData) {
             return;
         }
-        const targetDoc = getDropTargetParentDoc({
+        const dropValidation = getDropTargetValidation({
+            activeDoc,
             docsByID: allDocsByID,
             dropTarget: overData
         });
-        const dropValidation = getDropValidation({
-            activeDoc,
-            targetDoc: targetDoc ?? undefined
-        });
         if (!dropValidation.isValid) {
             if (!shouldSilenceMoveMessage(dropValidation.message)) {
                 toast.error(dropValidation.message ?? 'Could not move document.');
             }
             return;
         }
+        if (overData.dropType === 'insert' && activeDoc.__pageTreeParentID === dropValidation.parentID) {
+            return;
+        }
+        const apiRoute = config.routes.api;
+        const params = new URLSearchParams();
+        if (locale?.code) {
+            params.set('locale', locale.code);
+        }
         setPendingMoveRowID(rowID);
         try {
-            await moveDocument({
-                parentID: dropValidation.parentID,
-                rowID
+            const response = await fetch(`${apiRoute}/${props.collectionSlug}/${encodeURIComponent(rowID)}/move${params.size > 0 ? `?${params.toString()}` : ''}`, {
+                body: JSON.stringify({
+                    parentID: dropValidation.parentID
+                }),
+                credentials: 'include',
+                headers: {
+                    'Accept-Language': i18n.language,
+                    'Content-Type': 'application/json'
+                },
+                method: 'POST'
             });
+            const result = await response.json().catch(()=>null);
+            if (!response.ok) {
+                if (shouldSilenceMoveMessage(result?.message)) {
+                    return;
+                }
+                toast.error(result?.message ?? 'Could not move document.');
+                return;
+            }
             toast.success(`Moved "${getDocDisplayLabel(activeDoc)}".`);
             React.startTransition(()=>{
                 router.refresh();
             });
         } catch (error) {
             const message = error instanceof Error && error.message ? error.message : 'Could not move document.';
-            if (shouldSilenceMoveMessage(message)) {
-                return;
-            }
             toast.error(message);
         } finally{
             setPendingMoveRowID(null);
         }
     }, [
         allDocsByID,
-        handleManualOrderMoveEnd,
-        manualOrderIsActive,
-        moveDocument,
+        config.routes.api,
+        currentSort,
+        displayedPaginatedDocs,
+        i18n.language,
+        locale?.code,
         orderableFieldName,
         paginatedDocsByID,
+        props.collectionSlug,
         router
     ]);
     const handleDragEndSync = React.useCallback((event)=>{
@@ -905,10 +1145,12 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             children: [
                 /*#__PURE__*/ _jsx(HierarchyTable, {
                     activeDragRowID: activeDragRowID,
+                    activeDragType: activeDragType,
+                    activeDropTarget: activeDropTarget,
                     allDocsByID: allDocsByID,
-                    allowSameParentDrops: manualOrderIsActive,
+                    canReorderRows: canReorderRows,
                     columns: tableColumns,
-                    data: paginatedDocs,
+                    data: displayedPaginatedDocs,
                     isMovePending: isMovePending,
                     titleCellAccessor: useAsTitle
                 }),
@@ -926,35 +1168,57 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         }), [
         activeDragPreviewPath,
         activeDragRowID,
+        activeDragType,
+        activeDropTarget,
+        allDocsByID,
+        canReorderRows,
+        displayedPaginatedDocs,
         handleDragCancel,
         handleDragEndSync,
         handleDragOver,
         handleDragStart,
         isMovePending,
-        allDocsByID,
-        manualOrderIsActive,
-        paginatedDocs,
         sensors,
         tableColumns,
         useAsTitle
     ]);
+    const beforeActions = React.useMemo(()=>{
+        const actions = props.beforeActions ? [
+            ...props.beforeActions
+        ] : [];
+        if (canMoveDocs) {
+            actions.unshift(/*#__PURE__*/ _jsx(ParentMoveToggle, {
+                collectionSlug: props.collectionSlug,
+                enabled: parentMoveEnabled,
+                onToggle: handleParentMoveToggle
+            }, "parent-move-toggle"));
+        }
+        return actions.length > 0 ? actions : undefined;
+    }, [
+        canMoveDocs,
+        handleParentMoveToggle,
+        parentMoveEnabled,
+        props.beforeActions,
+        props.collectionSlug
+    ]);
     return /*#__PURE__*/ _jsx("div", {
         className: styles.root,
         children: /*#__PURE__*/ _jsx(PageTreeProvider, {
             value: hierarchyValue,
             children: /*#__PURE__*/ _jsx(ListQueryProvider, {
                 collectionSlug: props.collectionSlug,
-                data: paginatedData,
+                data: displayedPaginatedData,
                 modifySearchParams: true,
                 orderableFieldName: orderableFieldName,
                 query: {
                     ...query,
                     limit: currentLimit,
-                    page: paginatedData.page,
+                    page: displayedPaginatedData.page,
                     sort: currentSort
                 },
                 children: /*#__PURE__*/ _jsx(DefaultListView, {
                     ...props,
+                    beforeActions: beforeActions,
                     columnState: paginatedColumnState,
                     Table: tableNode
                 })