@byline/host-tanstack-start 3.12.2 → 3.13.0

package/dist/admin-shell/collections/edit.js

@@ -496,6 +496,7 @@ const EditView = ({ collectionDefinition, adminConfig, initialData, locale, cont
                 useAsTitle: collectionDefinition.useAsTitle,
                 useAsPath: collectionDefinition.useAsPath,
                 advertiseLocales: collectionDefinition.advertiseLocales,
+                tree: true === collectionDefinition.tree,
                 headingLabel: labels.singular,
                 initialLocale: locale,
                 onLocaleChange: handleLocaleChange,

package/dist/admin-shell/collections/tree-list-projection.d.ts

@@ -0,0 +1,56 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Pure projection helpers for the drag-to-reorder / re-parent tree list
+ * (docs/DOCUMENT-TREE.md, phase 2). Adapted from the dnd-kit "sortable tree"
+ * pattern: a pre-order flattened list where the drag's **horizontal** offset
+ * projects a target depth, clamped to what the neighbouring rows allow, and the
+ * target parent + sibling neighbours are resolved from that depth.
+ *
+ * Kept free of React / dnd-kit so the projection is unit-testable in isolation;
+ * the component feeds it the live drag offset and applies the result through the
+ * `placeTreeNode` tree command.
+ */
+/** Minimal row shape the projection needs (a slice of `CollectionTreeRow`). */
+export interface TreeProjectionRow {
+    id: string;
+    parentId: string | null;
+    depth: number;
+}
+export interface TreeProjection {
+    /** Projected depth of the dragged node at the drop position. */
+    depth: number;
+    /** Resolved parent at that depth (`null` = root). */
+    parentId: string | null;
+    /** Sibling immediately *above* the drop within the target parent (or null). */
+    beforeId: string | null;
+    /** Sibling immediately *below* the drop within the target parent (or null). */
+    afterId: string | null;
+}
+/**
+ * The ids of `activeId`'s descendants. In a pre-order list a node's descendants
+ * are the contiguous following rows with a strictly greater depth — they travel
+ * with the node (the adjacency edge to their parent is unchanged), so they are
+ * removed from the working list before projecting.
+ */
+export declare function descendantIds(rows: TreeProjectionRow[], activeId: string): Set<string>;
+/**
+ * Project where the dragged node would land. `rows` is the full pre-order placed
+ * tree; `dragOffsetX` is the pointer's horizontal delta in px; `indentWidth` is
+ * the px-per-depth indentation step. Returns `null` for a no-op drag (dropping
+ * on itself or into its own subtree).
+ */
+export declare function getTreeProjection(rows: TreeProjectionRow[], activeId: string, overId: string, dragOffsetX: number, indentWidth: number): TreeProjection | null;
+/**
+ * Apply a projection to the flat row list — produce the new pre-order ordering
+ * for an **optimistic** repaint (the server returns the canonical order on the
+ * next read). The dragged node's whole subtree (contiguous deeper rows) travels
+ * with it; depths are shifted by the projected delta and the node's `parentId`
+ * is updated. Generic so it preserves the caller's full row shape.
+ */
+export declare function applyProjection<T extends TreeProjectionRow>(rows: T[], activeId: string, p: TreeProjection): T[];

package/dist/admin-shell/collections/tree-list-projection.js

@@ -0,0 +1,109 @@
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function arrayMove(items, from, to) {
+    const next = items.slice();
+    const [moved] = next.splice(from, 1);
+    if (void 0 !== moved) next.splice(to, 0, moved);
+    return next;
+}
+function descendantIds(rows, activeId) {
+    const ids = new Set();
+    const start = rows.findIndex((r)=>r.id === activeId);
+    if (-1 === start) return ids;
+    const baseDepth = rows[start]?.depth;
+    for(let i = start + 1; i < rows.length && rows[i]?.depth > baseDepth; i++)ids.add(rows[i]?.id);
+    return ids;
+}
+function getTreeProjection(rows, activeId, overId, dragOffsetX, indentWidth) {
+    if (activeId === overId) return null;
+    const descendants = descendantIds(rows, activeId);
+    if (descendants.has(overId)) return null;
+    const working = rows.filter((r)=>r.id === activeId || !descendants.has(r.id));
+    const activeIndex = working.findIndex((r)=>r.id === activeId);
+    const overIndex = working.findIndex((r)=>r.id === overId);
+    if (-1 === activeIndex || -1 === overIndex) return null;
+    const moved = arrayMove(working, activeIndex, overIndex);
+    const previous = moved[overIndex - 1];
+    const next = moved[overIndex + 1];
+    const dragDepth = Math.round(dragOffsetX / indentWidth);
+    const projectedDepth = working[activeIndex]?.depth + dragDepth;
+    const maxDepth = previous ? previous.depth + 1 : 0;
+    const minDepth = next ? next.depth : 0;
+    const depth = clamp(projectedDepth, minDepth, maxDepth);
+    const parentId = resolveParentId(moved, overIndex, depth, previous);
+    let beforeId = null;
+    for(let i = overIndex - 1; i >= 0; i--){
+        const row = moved[i];
+        if (row.depth < depth) break;
+        if (row.depth === depth && row.parentId === parentId) {
+            beforeId = row.id;
+            break;
+        }
+    }
+    let afterId = null;
+    for(let i = overIndex + 1; i < moved.length; i++){
+        const row = moved[i];
+        if (row.depth < depth) break;
+        if (row.depth === depth && row.parentId === parentId) {
+            afterId = row.id;
+            break;
+        }
+    }
+    return {
+        depth,
+        parentId,
+        beforeId,
+        afterId
+    };
+}
+function applyProjection(rows, activeId, p) {
+    const start = rows.findIndex((r)=>r.id === activeId);
+    if (-1 === start) return rows;
+    const baseDepth = rows[start]?.depth;
+    let end = start + 1;
+    while(end < rows.length && rows[end]?.depth > baseDepth)end++;
+    const delta = p.depth - baseDepth;
+    const block = rows.slice(start, end).map((row, i)=>0 === i ? {
+            ...row,
+            depth: row.depth + delta,
+            parentId: p.parentId
+        } : {
+            ...row,
+            depth: row.depth + delta
+        });
+    const without = [
+        ...rows.slice(0, start),
+        ...rows.slice(end)
+    ];
+    let insertAt;
+    if (null != p.beforeId) {
+        const bi = without.findIndex((r)=>r.id === p.beforeId);
+        if (-1 === bi) insertAt = without.length;
+        else {
+            let j = bi + 1;
+            const bd = without[bi]?.depth;
+            while(j < without.length && without[j]?.depth > bd)j++;
+            insertAt = j;
+        }
+    } else if (null != p.afterId) {
+        const ai = without.findIndex((r)=>r.id === p.afterId);
+        insertAt = -1 === ai ? without.length : ai;
+    } else if (null != p.parentId) {
+        const pi = without.findIndex((r)=>r.id === p.parentId);
+        insertAt = -1 === pi ? without.length : pi + 1;
+    } else insertAt = without.length;
+    return [
+        ...without.slice(0, insertAt),
+        ...block,
+        ...without.slice(insertAt)
+    ];
+}
+function resolveParentId(moved, overIndex, depth, previous) {
+    if (0 === depth || null == previous) return null;
+    if (depth === previous.depth) return previous.parentId;
+    if (depth > previous.depth) return previous.id;
+    for(let i = overIndex - 1; i >= 0; i--)if (moved[i]?.depth === depth) return moved[i]?.parentId;
+    return null;
+}
+export { applyProjection, descendantIds, getTreeProjection };

package/dist/admin-shell/collections/tree-list.d.ts

@@ -0,0 +1,29 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type React from 'react';
+import type { ColumnDefinition, WorkflowStatus } from '@byline/core';
+import type { CollectionTreeRow } from '../../server-fns/collections/tree.js';
+export type TreeMoveFn = (params: {
+    documentId: string;
+    parentDocumentId: string | null;
+    beforeDocumentId: string | null;
+    afterDocumentId: string | null;
+}) => Promise<unknown>;
+export declare const TreeListView: ({ rows, columns, workflowStatuses, useAsTitle, collection, collectionLabels, onMove, }: {
+    rows: CollectionTreeRow[];
+    columns: ColumnDefinition[];
+    workflowStatuses?: WorkflowStatus[];
+    useAsTitle?: string;
+    collection: string;
+    collectionLabels: {
+        singular: string;
+        plural: string;
+    };
+    /** When provided, the placed tree becomes drag-to-reorder / re-parent. */
+    onMove?: TreeMoveFn;
+}) => React.JSX.Element;

package/dist/admin-shell/collections/tree-list.js

@@ -0,0 +1,272 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "@tanstack/react-router";
+import { StatusBadge, renderFormatted } from "@byline/admin/react";
+import { useTranslation } from "@byline/i18n/react";
+import { Container, GripperVerticalIcon, IconButton, PlusIcon, Section, Table, useToastManager } from "@byline/ui/react";
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import classnames from "classnames";
+import { Link } from "../chrome/loose-router.js";
+import { TableHeadingCellSortable } from "../chrome/th-sortable.js";
+import { formatNumber } from "../chrome/utils.js";
+import tree_list_module from "./tree-list.module.js";
+import { applyProjection, getTreeProjection } from "./tree-list-projection.js";
+const INDENT = 24;
+function getColumnValue(row, fieldName) {
+    if (row.fields && fieldName in row.fields) return row.fields[fieldName];
+    return row[fieldName];
+}
+function SortableTreeRow({ id, depth, dragging, dragHandleLabel, children }) {
+    const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+        id
+    });
+    const style = {
+        transform: transform ? `translate3d(0, ${transform.y}px, 0)` : void 0,
+        transition,
+        position: 'relative',
+        zIndex: isDragging ? 10 : 'auto',
+        opacity: isDragging ? 0.5 : 1
+    };
+    return /*#__PURE__*/ jsxs("tr", {
+        ref: setNodeRef,
+        className: classnames('byline-table-row', {
+            [tree_list_module.draggingRow]: dragging
+        }),
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx("td", {
+                className: classnames('byline-tree-list-drag-cell', tree_list_module.dragCell),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: classnames('byline-tree-list-drag-handle', tree_list_module.dragHandle),
+                    "aria-label": dragHandleLabel,
+                    ...attributes,
+                    ...listeners,
+                    children: /*#__PURE__*/ jsx(GripperVerticalIcon, {})
+                })
+            }),
+            children
+        ]
+    });
+}
+const TreeListView = ({ rows, columns, workflowStatuses, useAsTitle, collection, collectionLabels, onMove })=>{
+    const { t } = useTranslation('byline-admin');
+    const router = useRouter();
+    const toastManager = useToastManager();
+    const unplaced = useMemo(()=>rows.filter((r)=>r.unplaced), [
+        rows
+    ]);
+    const [localPlaced, setLocalPlaced] = useState(()=>rows.filter((r)=>!r.unplaced));
+    const [isMoving, setIsMoving] = useState(false);
+    useEffect(()=>{
+        if (!isMoving) setLocalPlaced(rows.filter((r)=>!r.unplaced));
+    }, [
+        rows,
+        isMoving
+    ]);
+    const [activeId, setActiveId] = useState(null);
+    const [overId, setOverId] = useState(null);
+    const [offsetLeft, setOffsetLeft] = useState(0);
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
+    }));
+    const projection = useMemo(()=>{
+        if (null == activeId || null == overId) return null;
+        return getTreeProjection(localPlaced, activeId, overId, offsetLeft, INDENT);
+    }, [
+        activeId,
+        overId,
+        offsetLeft,
+        localPlaced
+    ]);
+    const resetDnd = ()=>{
+        setActiveId(null);
+        setOverId(null);
+        setOffsetLeft(0);
+    };
+    const handleDragStart = ({ active })=>setActiveId(String(active.id));
+    const handleDragMove = ({ delta })=>setOffsetLeft(delta.x);
+    const handleDragOver = ({ over })=>setOverId(over ? String(over.id) : null);
+    const handleDragEnd = async ({ active, over })=>{
+        const proj = null != over ? getTreeProjection(localPlaced, String(active.id), String(over.id), offsetLeft, INDENT) : null;
+        resetDnd();
+        if (!onMove || null == proj) return;
+        const documentId = String(active.id);
+        const next = applyProjection(localPlaced, documentId, proj);
+        const current = localPlaced;
+        const unchanged = next.map((r)=>r.id).join() === current.map((r)=>r.id).join() && next.find((r)=>r.id === documentId)?.parentId === current.find((r)=>r.id === documentId)?.parentId;
+        if (unchanged) return;
+        setLocalPlaced(next);
+        setIsMoving(true);
+        try {
+            await onMove({
+                documentId,
+                parentDocumentId: proj.parentId,
+                beforeDocumentId: proj.beforeId,
+                afterDocumentId: proj.afterId
+            });
+            await router.invalidate();
+        } catch  {
+            setLocalPlaced(current);
+            toastManager.add({
+                title: t('collections.list.reorderFailedToast'),
+                description: t("collections.list.reorderFailedDescription"),
+                data: {
+                    intent: 'danger',
+                    iconType: 'danger',
+                    icon: true,
+                    close: true
+                }
+            });
+        } finally{
+            setIsMoving(false);
+        }
+    };
+    const renderCells = (row, depth)=>columns.map((column)=>{
+            const fieldName = column.fieldName;
+            const isTitle = null != useAsTitle && fieldName === useAsTitle;
+            return /*#__PURE__*/ jsx(Table.Cell, {
+                className: classnames({
+                    [tree_list_module.cellRight]: 'right' === column.align,
+                    [tree_list_module.cellCenter]: 'center' === column.align
+                }),
+                children: isTitle ? /*#__PURE__*/ jsxs("span", {
+                    className: classnames('byline-tree-list-title', tree_list_module.titleCell),
+                    style: {
+                        paddingInlineStart: `${depth * INDENT}px`
+                    },
+                    children: [
+                        depth > 0 && /*#__PURE__*/ jsx("span", {
+                            "aria-hidden": "true",
+                            className: classnames('byline-tree-list-branch', tree_list_module.branch),
+                            children: "└─"
+                        }),
+                        /*#__PURE__*/ jsx(Link, {
+                            to: '/admin/collections/$collection/$id',
+                            params: {
+                                collection,
+                                id: row.id
+                            },
+                            children: column.formatter ? renderFormatted(getColumnValue(row, fieldName), row, column.formatter) : getColumnValue(row, fieldName) ?? row.path ?? '------'
+                        })
+                    ]
+                }) : column.formatter ? renderFormatted(getColumnValue(row, fieldName), row, column.formatter) : 'status' === fieldName && workflowStatuses ? /*#__PURE__*/ jsx(StatusBadge, {
+                    status: row.status,
+                    workflowStatuses: workflowStatuses
+                }) : String(getColumnValue(row, fieldName) ?? '')
+            }, fieldName);
+        });
+    const dndEnabled = null != onMove;
+    const colSpanLead = dndEnabled ? 1 : 0;
+    return /*#__PURE__*/ jsx(Section, {
+        children: /*#__PURE__*/ jsxs(Container, {
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames('byline-coll-list-head', tree_list_module.head),
+                    children: [
+                        /*#__PURE__*/ jsx("h1", {
+                            className: classnames('byline-coll-list-title', tree_list_module.title),
+                            children: collectionLabels.plural
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: classnames('byline-coll-list-stats', tree_list_module.stats),
+                            children: formatNumber(rows.length, 0)
+                        }),
+                        /*#__PURE__*/ jsx(IconButton, {
+                            "aria-label": t('collections.list.createAriaLabel'),
+                            render: /*#__PURE__*/ jsx(Link, {
+                                to: '/admin/collections/$collection/create',
+                                params: {
+                                    collection
+                                }
+                            }),
+                            children: /*#__PURE__*/ jsx(PlusIcon, {
+                                height: "18px",
+                                width: "18px",
+                                svgClassName: "stroke-white"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Table.Container, {
+                    className: classnames('byline-tree-list-table-wrap', tree_list_module.tableWrap),
+                    children: /*#__PURE__*/ jsx(DndContext, {
+                        sensors: sensors,
+                        onDragStart: handleDragStart,
+                        onDragMove: handleDragMove,
+                        onDragOver: handleDragOver,
+                        onDragEnd: handleDragEnd,
+                        onDragCancel: resetDnd,
+                        children: /*#__PURE__*/ jsxs(Table, {
+                            children: [
+                                /*#__PURE__*/ jsx(Table.Header, {
+                                    children: /*#__PURE__*/ jsxs(Table.Row, {
+                                        children: [
+                                            dndEnabled && /*#__PURE__*/ jsx("th", {
+                                                scope: "col",
+                                                className: classnames('byline-tree-list-drag-cell', tree_list_module.dragCell)
+                                            }),
+                                            columns.map((column)=>/*#__PURE__*/ jsx(TableHeadingCellSortable, {
+                                                    fieldName: String(column.fieldName),
+                                                    label: column.label,
+                                                    sortable: false,
+                                                    scope: "col",
+                                                    align: column.align,
+                                                    className: column.className
+                                                }, String(column.fieldName)))
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxs(Table.Body, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(SortableContext, {
+                                            items: localPlaced.map((r)=>r.id),
+                                            strategy: verticalListSortingStrategy,
+                                            children: localPlaced.map((row)=>{
+                                                const depth = row.id === activeId && projection ? projection.depth : row.depth;
+                                                return dndEnabled ? /*#__PURE__*/ jsx(SortableTreeRow, {
+                                                    id: row.id,
+                                                    depth: depth,
+                                                    dragging: row.id === activeId,
+                                                    dragHandleLabel: t('collections.list.dragHandleAriaLabel'),
+                                                    children: renderCells(row, depth)
+                                                }, row.id) : /*#__PURE__*/ jsx(Table.Row, {
+                                                    children: renderCells(row, row.depth)
+                                                }, row.id);
+                                            })
+                                        }),
+                                        unplaced.length > 0 && /*#__PURE__*/ jsxs(Table.Row, {
+                                            className: classnames('byline-tree-list-group', tree_list_module.groupRow),
+                                            children: [
+                                                /*#__PURE__*/ jsx(Table.Cell, {
+                                                    className: tree_list_module.groupCell,
+                                                    colSpan: colSpanLead + 1,
+                                                    children: t('treeListView.unplacedHeading')
+                                                }),
+                                                columns.slice(1).map((column)=>/*#__PURE__*/ jsx(Table.Cell, {}, String(column.fieldName)))
+                                            ]
+                                        }),
+                                        unplaced.map((row)=>/*#__PURE__*/ jsxs(Table.Row, {
+                                                children: [
+                                                    dndEnabled && /*#__PURE__*/ jsx(Table.Cell, {
+                                                        className: tree_list_module.dragCell
+                                                    }),
+                                                    renderCells(row, 0)
+                                                ]
+                                            }, row.id))
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+export { TreeListView };

package/dist/admin-shell/collections/tree-list.module.js

@@ -0,0 +1,17 @@
+import "./tree-list_module.css";
+const tree_list_module = {
+    head: "head-umTU3f",
+    title: "title-x6vHLV",
+    stats: "stats-qfK0D_",
+    tableWrap: "tableWrap-Q562es",
+    titleCell: "titleCell-rnsKeu",
+    branch: "branch-xjhO5g",
+    groupRow: "groupRow-DhAUjz",
+    groupCell: "groupCell-zyU5dg",
+    cellRight: "cellRight-CuqkDJ",
+    cellCenter: "cellCenter-L4rz2h",
+    dragCell: "dragCell-FProaR",
+    dragHandle: "dragHandle-GFe6tC",
+    draggingRow: "draggingRow-pnrWrt"
+};
+export default tree_list_module;

package/dist/admin-shell/collections/tree-list_module.css

@@ -0,0 +1,117 @@
+:is(.head-umTU3f, .byline-coll-list-head) {
+  align-items: center;
+  gap: .75rem;
+  display: flex;
+}
+
+:is(.title-x6vHLV, .byline-coll-list-title) {
+  margin: 0;
+  padding-bottom: 2px;
+}
+
+:is(.stats-qfK0D_, .byline-coll-list-stats) {
+  white-space: nowrap;
+  background-color: var(--gray-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: .375rem;
+  justify-content: center;
+  align-items: center;
+  min-width: 28px;
+  height: 28px;
+  margin-bottom: -4px;
+  margin-right: auto;
+  padding: 5px 6px;
+  font-size: .875rem;
+  line-height: 0;
+  display: flex;
+}
+
+:is(:is([data-theme="dark"], .dark) .stats-qfK0D_, :is([data-theme="dark"], .dark) .byline-coll-list-stats) {
+  background-color: var(--canvas-700);
+}
+
+:is(.tableWrap-Q562es, .byline-tree-list-table-wrap) {
+  margin-top: .75rem;
+  margin-bottom: .75rem;
+}
+
+:is(.titleCell-rnsKeu, .byline-tree-list-title) {
+  align-items: center;
+  gap: .4rem;
+  display: inline-flex;
+}
+
+:is(.branch-xjhO5g, .byline-tree-list-branch) {
+  color: var(--gray-400);
+  font-family: var(--font-mono, monospace);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+:is(.groupRow-DhAUjz, .byline-tree-list-group) {
+  background-color: var(--gray-25);
+}
+
+:is(:is([data-theme="dark"], .dark) .groupRow-DhAUjz, :is([data-theme="dark"], .dark) .byline-tree-list-group) {
+  background-color: var(--canvas-700);
+}
+
+.groupCell-zyU5dg {
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--gray-500);
+  font-size: .75rem;
+  font-weight: 600;
+}
+
+.cellRight-CuqkDJ {
+  text-align: right;
+}
+
+.cellCenter-L4rz2h {
+  text-align: center;
+}
+
+.dragCell-FProaR {
+  text-align: center;
+  vertical-align: middle;
+  width: 34px;
+  padding-inline: .25rem;
+}
+
+.dragHandle-GFe6tC {
+  color: var(--gray-400);
+  cursor: grab;
+  touch-action: none;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  display: inline-flex;
+}
+
+.dragHandle-GFe6tC:hover {
+  color: var(--gray-600);
+  background-color: var(--gray-50);
+}
+
+.dragHandle-GFe6tC:active {
+  cursor: grabbing;
+}
+
+:is([data-theme="dark"], .dark) .dragHandle-GFe6tC:hover {
+  color: var(--gray-200);
+  background-color: var(--canvas-700);
+}
+
+.draggingRow-pnrWrt {
+  background-color: var(--gray-25);
+  box-shadow: inset 2px 0 0 var(--theme-400, var(--gray-400));
+}
+
+:is([data-theme="dark"], .dark) .draggingRow-pnrWrt {
+  background-color: var(--canvas-700);
+}
+

package/dist/integrations/byline-field-services.js

@@ -1,4 +1,5 @@
 import { getCollectionDocuments } from "../server-fns/collections/list.js";
+import { getTreeAncestors, getTreeParent, placeTreeNode, removeFromTree } from "../server-fns/collections/tree.js";
 import { uploadField } from "../server-fns/collections/upload.js";
 const byline_field_services_getCollectionDocuments = ({ collection, params })=>getCollectionDocuments({
         data: {
@@ -7,8 +8,31 @@ const byline_field_services_getCollectionDocuments = ({ collection, params })=>g
         }
     });
 const byline_field_services_uploadField = (collection, formData, createDocument)=>uploadField(collection, formData, createDocument);
+const byline_field_services_placeTreeNode = async (input)=>{
+    const { orderKey } = await placeTreeNode({
+        data: input
+    });
+    return {
+        orderKey
+    };
+};
+const byline_field_services_removeFromTree = async (input)=>{
+    await removeFromTree({
+        data: input
+    });
+};
+const byline_field_services_getTreeAncestors = (input)=>getTreeAncestors({
+        data: input
+    });
+const byline_field_services_getTreeParent = (input)=>getTreeParent({
+        data: input
+    });
 const bylineFieldServices = {
     getCollectionDocuments: byline_field_services_getCollectionDocuments,
-    uploadField: byline_field_services_uploadField
+    uploadField: byline_field_services_uploadField,
+    placeTreeNode: byline_field_services_placeTreeNode,
+    removeFromTree: byline_field_services_removeFromTree,
+    getTreeAncestors: byline_field_services_getTreeAncestors,
+    getTreeParent: byline_field_services_getTreeParent
 };
 export { bylineFieldServices };