@byline/host-tanstack-start 3.12.1 → 3.13.0

package/dist/routes/create-collection-list-route.js

@@ -8,7 +8,8 @@ import { z } from "zod";
 import { BreadcrumbsClient } from "../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js";
 import { useNavigate } from "../admin-shell/chrome/loose-router.js";
 import { ListView } from "../admin-shell/collections/list.js";
-import { getCollectionDocuments, reorderCollectionDocument } from "../server-fns/collections/index.js";
+import { TreeListView } from "../admin-shell/collections/tree-list.js";
+import { getCollectionDocuments, getCollectionTree, placeTreeNode, reorderCollectionDocument } from "../server-fns/collections/index.js";
 const searchSchema = z.object({
     page: z.coerce.number().min(1).optional(),
     page_size: z.coerce.number().max(100).optional(),
@@ -36,6 +37,12 @@ function createCollectionListRoute(path) {
         loader: async ({ params, deps })=>{
             const collectionDef = getCollectionDefinition(params.collection);
             if (!collectionDef) throw notFound();
+            if (true === collectionDef.tree) return await getCollectionTree({
+                data: {
+                    collection: params.collection,
+                    locale: deps.locale
+                }
+            });
             const adminConfig = getCollectionAdminConfig(params.collection);
             const fields = adminConfig?.columns?.map((c)=>String(c.fieldName)).filter((name)=>collectionDef.fields.some((f)=>f.name === name));
             const data = await getCollectionDocuments({
@@ -118,7 +125,25 @@ function createCollectionListRoute(path) {
                             }
                         ]
                     }),
-                    CustomListView ? /*#__PURE__*/ jsx(CustomListView, {
+                    true === collectionDef.tree ? /*#__PURE__*/ jsx(TreeListView, {
+                        rows: data.rows,
+                        columns: columns,
+                        workflowStatuses: workflowStatuses,
+                        useAsTitle: collectionDef.useAsTitle,
+                        collection: collection,
+                        collectionLabels: data.included.collection.labels,
+                        onMove: async ({ documentId, parentDocumentId, beforeDocumentId, afterDocumentId })=>{
+                            await placeTreeNode({
+                                data: {
+                                    collection,
+                                    documentId,
+                                    parentDocumentId,
+                                    beforeDocumentId,
+                                    afterDocumentId
+                                }
+                            });
+                        }
+                    }) : CustomListView ? /*#__PURE__*/ jsx(CustomListView, {
                         data: data,
                         workflowStatuses: workflowStatuses
                     }) : /*#__PURE__*/ jsx(ListView, {

package/dist/server-fns/collections/index.d.ts

@@ -17,5 +17,6 @@ export * from './reorder';
 export * from './restore-version';
 export * from './stats';
 export * from './status';
+export * from './tree';
 export * from './update';
 export * from './upload';

package/dist/server-fns/collections/index.js

@@ -11,5 +11,6 @@ export * from "./reorder.js";
 export * from "./restore-version.js";
 export * from "./stats.js";
 export * from "./status.js";
+export * from "./tree.js";
 export * from "./update.js";
 export * from "./upload.js";

package/dist/server-fns/collections/tree.d.ts

@@ -0,0 +1,84 @@
+/**
+ * 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
+ */
+export declare const placeTreeNode: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+    collection: string;
+    documentId: string;
+    parentDocumentId: string | null;
+    beforeDocumentId?: string | null;
+    afterDocumentId?: string | null;
+}) => {
+    collection: string;
+    documentId: string;
+    parentDocumentId: string | null;
+    beforeDocumentId?: string | null;
+    afterDocumentId?: string | null;
+}, Promise<{
+    status: "ok";
+    orderKey: string;
+}>>;
+export declare const removeFromTree: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+    collection: string;
+    documentId: string;
+}) => {
+    collection: string;
+    documentId: string;
+}, Promise<{
+    status: "ok";
+}>>;
+export declare const getTreeAncestors: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+    collection: string;
+    documentId: string;
+}) => {
+    collection: string;
+    documentId: string;
+}, Promise<{
+    id: string;
+    title: string;
+    path: string;
+}[]>>;
+export declare const getTreeParent: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+    collection: string;
+    documentId: string;
+}) => {
+    collection: string;
+    documentId: string;
+}, Promise<{
+    placed: boolean;
+    parentDocumentId: string | null;
+}>>;
+export interface CollectionTreeRow {
+    id: string;
+    /** Parent document id, or `null` for a root or unplaced node. Drives the
+     * client-side tree reconstruction for drag-to-reorder / re-parent. */
+    parentId: string | null;
+    depth: number;
+    unplaced: boolean;
+    status: string;
+    path: string;
+    createdAt: Date;
+    updatedAt: Date;
+    fields: Record<string, any>;
+}
+export declare const getCollectionTree: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+    collection: string;
+    locale?: string;
+}) => {
+    collection: string;
+    locale?: string;
+}, Promise<{
+    rows: CollectionTreeRow[];
+    included: {
+        collection: {
+            path: string;
+            labels: {
+                singular: string;
+                plural: string;
+            };
+        };
+    };
+}>>;

package/dist/server-fns/collections/tree.js

@@ -0,0 +1,144 @@
+import { createServerFn } from "@tanstack/react-start";
+import { ERR_NOT_FOUND, getLogger } from "@byline/core";
+import { ensureCollection } from "../../integrations/api-utils.js";
+import { getAdminBylineClient } from "../../integrations/byline-client.js";
+const placeTreeNode = createServerFn({
+    method: 'POST'
+}).validator((input)=>input).handler(async ({ data })=>{
+    const { collection: path, documentId } = data;
+    const config = await ensureCollection(path);
+    if (!config) throw ERR_NOT_FOUND({
+        message: 'Collection not found',
+        details: {
+            collectionPath: path
+        }
+    }).log(getLogger());
+    const handle = getAdminBylineClient().collection(path);
+    const result = await handle.placeTreeNode(documentId, {
+        parentDocumentId: data.parentDocumentId,
+        beforeDocumentId: data.beforeDocumentId ?? null,
+        afterDocumentId: data.afterDocumentId ?? null
+    });
+    return {
+        status: 'ok',
+        orderKey: result.orderKey
+    };
+});
+const removeFromTree = createServerFn({
+    method: 'POST'
+}).validator((input)=>input).handler(async ({ data })=>{
+    const { collection: path, documentId } = data;
+    const config = await ensureCollection(path);
+    if (!config) throw ERR_NOT_FOUND({
+        message: 'Collection not found',
+        details: {
+            collectionPath: path
+        }
+    }).log(getLogger());
+    await getAdminBylineClient().collection(path).removeFromTree(documentId);
+    return {
+        status: 'ok'
+    };
+});
+const getTreeAncestors = createServerFn({
+    method: 'GET'
+}).validator((input)=>input).handler(async ({ data })=>{
+    const { collection: path, documentId } = data;
+    const config = await ensureCollection(path);
+    if (!config) throw ERR_NOT_FOUND({
+        message: 'Collection not found',
+        details: {
+            collectionPath: path
+        }
+    }).log(getLogger());
+    const useAsTitle = config.definition.useAsTitle;
+    const ancestors = await getAdminBylineClient().collection(path).getAncestors(documentId, {
+        status: 'any'
+    });
+    return ancestors.map((doc)=>{
+        const fields = doc.fields;
+        const title = useAsTitle ? fields?.[useAsTitle] : void 0;
+        return {
+            id: doc.id,
+            title: 'string' == typeof title && title.length > 0 ? title : doc.path,
+            path: doc.path
+        };
+    });
+});
+const getTreeParent = createServerFn({
+    method: 'GET'
+}).validator((input)=>input).handler(async ({ data })=>{
+    const { collection: path, documentId } = data;
+    const config = await ensureCollection(path);
+    if (!config) throw ERR_NOT_FOUND({
+        message: 'Collection not found',
+        details: {
+            collectionPath: path
+        }
+    }).log(getLogger());
+    return getAdminBylineClient().collection(path).getTreeParent(documentId);
+});
+const getCollectionTree = createServerFn({
+    method: 'GET'
+}).validator((input)=>input).handler(async ({ data })=>{
+    const { collection: path } = data;
+    const config = await ensureCollection(path);
+    if (!config) throw ERR_NOT_FOUND({
+        message: 'Collection not found',
+        details: {
+            collectionPath: path
+        }
+    }).log(getLogger());
+    const handle = getAdminBylineClient().collection(path);
+    const forest = await handle.getSubtree({
+        status: 'any',
+        locale: data.locale
+    });
+    const rows = [];
+    const placed = new Set();
+    const walk = (nodes, depth, parentId)=>{
+        for (const node of nodes){
+            const doc = node.document;
+            rows.push({
+                id: doc.id,
+                parentId,
+                depth,
+                unplaced: false,
+                status: doc.status,
+                path: doc.path,
+                createdAt: doc.createdAt,
+                updatedAt: doc.updatedAt,
+                fields: doc.fields
+            });
+            placed.add(doc.id);
+            walk(node.children, depth + 1, doc.id);
+        }
+    };
+    walk(forest, 0, null);
+    const all = await handle.find({
+        status: 'any',
+        pageSize: 1000,
+        _bypassBeforeRead: true
+    });
+    for (const doc of all.docs)if (!placed.has(doc.id)) rows.push({
+        id: doc.id,
+        parentId: null,
+        depth: 0,
+        unplaced: true,
+        status: doc.status,
+        path: doc.path,
+        createdAt: doc.createdAt,
+        updatedAt: doc.updatedAt,
+        fields: doc.fields
+    });
+    return {
+        rows,
+        included: {
+            collection: {
+                path: config.collection.path,
+                labels: config.definition.labels
+            }
+        }
+    };
+});
+export { getCollectionTree, getTreeAncestors, getTreeParent, placeTreeNode, removeFromTree };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "3.12.1",
+  "version": "3.13.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -119,13 +119,13 @@
     "react-swipeable": "^7.0.2",
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
-    "@byline/admin": "3.12.1",
-    "@byline/ui": "3.12.1",
-    "@byline/i18n": "3.12.1",
-    "@byline/client": "3.12.1",
-    "@byline/core": "3.12.1",
-    "@byline/ai": "3.12.1",
-    "@byline/auth": "3.12.1"
+    "@byline/admin": "3.13.0",
+    "@byline/ai": "3.13.0",
+    "@byline/auth": "3.13.0",
+    "@byline/client": "3.13.0",
+    "@byline/i18n": "3.13.0",
+    "@byline/core": "3.13.0",
+    "@byline/ui": "3.13.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",

package/src/admin-shell/collections/edit.tsx

@@ -491,6 +491,7 @@ export const EditView = ({
           useAsTitle={collectionDefinition.useAsTitle}
           useAsPath={collectionDefinition.useAsPath}
           advertiseLocales={collectionDefinition.advertiseLocales}
+          tree={collectionDefinition.tree === true}
           headingLabel={labels.singular}
           initialLocale={locale}
           onLocaleChange={handleLocaleChange}

package/src/admin-shell/collections/tree-list-projection.test.node.ts

@@ -0,0 +1,116 @@
+/**
+ * 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 { describe, expect, it } from 'vitest'
+
+import {
+  applyProjection,
+  descendantIds,
+  getTreeProjection,
+  type TreeProjectionRow,
+} from './tree-list-projection.js'
+
+const INDENT = 24
+
+// Pre-order placed tree:
+//   A           (root)
+//     B         (child of A)
+//     C         (child of A)
+//       D       (child of C)
+//   E           (root)
+const rows: TreeProjectionRow[] = [
+  { id: 'A', parentId: null, depth: 0 },
+  { id: 'B', parentId: 'A', depth: 1 },
+  { id: 'C', parentId: 'A', depth: 1 },
+  { id: 'D', parentId: 'C', depth: 2 },
+  { id: 'E', parentId: null, depth: 0 },
+]
+
+describe('descendantIds', () => {
+  it('returns the contiguous deeper rows after a node', () => {
+    expect([...descendantIds(rows, 'C')]).toEqual(['D'])
+    expect([...descendantIds(rows, 'A')]).toEqual(['B', 'C', 'D'])
+    expect([...descendantIds(rows, 'B')]).toEqual([])
+  })
+})
+
+describe('getTreeProjection', () => {
+  it('reorders within siblings (drop past a subtree, no horizontal offset)', () => {
+    // Drag B onto D (C's last descendant), no indent change → B lands after C's
+    // whole subtree, still a child of A.
+    expect(getTreeProjection(rows, 'B', 'D', 0, INDENT)).toEqual({
+      depth: 1,
+      parentId: 'A',
+      beforeId: 'C',
+      afterId: null,
+    })
+  })
+
+  it('re-parents a node under the row above when dragged right one level', () => {
+    // Drag B onto C with a +1 level offset → B becomes C's first child, ahead
+    // of C's existing child D.
+    expect(getTreeProjection(rows, 'B', 'C', INDENT, INDENT)).toEqual({
+      depth: 2,
+      parentId: 'C',
+      beforeId: null,
+      afterId: 'D',
+    })
+  })
+
+  it('outdents a deep node to a root when dragged far left', () => {
+    // Drag D onto E, far left → D becomes a root after E.
+    expect(getTreeProjection(rows, 'D', 'E', -2 * INDENT, INDENT)).toEqual({
+      depth: 0,
+      parentId: null,
+      beforeId: 'E',
+      afterId: null,
+    })
+  })
+
+  it('clamps depth to one level below the row above', () => {
+    // Drag E onto B with a huge right offset: dropping above B, the deepest E
+    // can go is a child of A (B's parent) — it cannot leap to B's depth+1.
+    expect(getTreeProjection(rows, 'E', 'B', 10 * INDENT, INDENT)).toEqual({
+      depth: 1,
+      parentId: 'A',
+      beforeId: null,
+      afterId: 'B',
+    })
+  })
+
+  it('is a no-op when dropping on itself', () => {
+    expect(getTreeProjection(rows, 'B', 'B', 0, INDENT)).toBeNull()
+  })
+
+  it('is a no-op when dropping into its own subtree', () => {
+    // C cannot become a child of its own descendant D.
+    expect(getTreeProjection(rows, 'C', 'D', INDENT, INDENT)).toBeNull()
+  })
+})
+
+describe('applyProjection', () => {
+  const ids = (r: TreeProjectionRow[]) => r.map((x) => `${x.id}@${x.depth}`)
+
+  it('re-parents a node and its subtree together, shifting depth', () => {
+    // Move C (with child D) under E.
+    const projection = getTreeProjection(rows, 'C', 'E', INDENT, INDENT)!
+    const result = applyProjection(rows, 'C', projection)
+    // C now under E; D travels with C, one level deeper than C.
+    expect(ids(result)).toEqual(['A@0', 'B@1', 'E@0', 'C@1', 'D@2'])
+    expect(result.find((r) => r.id === 'C')?.parentId).toBe('E')
+    expect(result.find((r) => r.id === 'D')?.parentId).toBe('C')
+  })
+
+  it('reorders a leaf within its sibling group', () => {
+    // Move B after C's subtree (drop on D, no indent) → A: [C, B].
+    const projection = getTreeProjection(rows, 'B', 'D', 0, INDENT)!
+    const result = applyProjection(rows, 'B', projection)
+    expect(ids(result)).toEqual(['A@0', 'C@1', 'D@2', 'B@1', 'E@0'])
+    expect(result.find((r) => r.id === 'B')?.parentId).toBe('A')
+  })
+})

package/src/admin-shell/collections/tree-list-projection.ts

@@ -0,0 +1,198 @@
+/**
+ * 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
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+function arrayMove<T>(items: T[], from: number, to: number): T[] {
+  const next = items.slice()
+  const [moved] = next.splice(from, 1)
+  if (moved !== undefined) next.splice(to, 0, moved)
+  return next
+}
+
+/**
+ * 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 function descendantIds(rows: TreeProjectionRow[], activeId: string): Set<string> {
+  const ids = new Set<string>()
+  const start = rows.findIndex((r) => r.id === activeId)
+  if (start === -1) 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
+}
+
+/**
+ * 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 function getTreeProjection(
+  rows: TreeProjectionRow[],
+  activeId: string,
+  overId: string,
+  dragOffsetX: number,
+  indentWidth: number
+): TreeProjection | null {
+  if (activeId === overId) return null
+
+  // Drop into own subtree is invalid — the descendants travel with the node.
+  const descendants = descendantIds(rows, activeId)
+  if (descendants.has(overId)) return null
+
+  // Collapse the dragged subtree to a single unit for projection.
+  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 (activeIndex === -1 || overIndex === -1) 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)
+
+  // Sibling neighbours within the target parent, scanning out from the drop.
+  let beforeId: string | null = 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: string | null = 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 }
+}
+
+/**
+ * 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 function applyProjection<T extends TreeProjectionRow>(
+  rows: T[],
+  activeId: string,
+  p: TreeProjection
+): T[] {
+  const start = rows.findIndex((r) => r.id === activeId)
+  if (start === -1) 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) =>
+      i === 0
+        ? { ...row, depth: row.depth + delta, parentId: p.parentId }
+        : { ...row, depth: row.depth + delta }
+    )
+
+  const without = [...rows.slice(0, start), ...rows.slice(end)]
+
+  let insertAt: number
+  if (p.beforeId != null) {
+    const bi = without.findIndex((r) => r.id === p.beforeId)
+    if (bi === -1) {
+      insertAt = without.length
+    } else {
+      // after beforeId and its whole subtree
+      let j = bi + 1
+      const bd = without[bi]?.depth
+      while (j < without.length && without[j]?.depth > bd) j++
+      insertAt = j
+    }
+  } else if (p.afterId != null) {
+    const ai = without.findIndex((r) => r.id === p.afterId)
+    insertAt = ai === -1 ? without.length : ai
+  } else if (p.parentId != null) {
+    const pi = without.findIndex((r) => r.id === p.parentId)
+    insertAt = pi === -1 ? without.length : pi + 1
+  } else {
+    insertAt = without.length
+  }
+
+  return [...without.slice(0, insertAt), ...block, ...without.slice(insertAt)]
+}
+
+function resolveParentId(
+  moved: TreeProjectionRow[],
+  overIndex: number,
+  depth: number,
+  previous: TreeProjectionRow | undefined
+): string | null {
+  if (depth === 0 || previous == null) return null
+  if (depth === previous.depth) return previous.parentId
+  if (depth > previous.depth) return previous.id
+  // depth < previous.depth — find the nearest preceding row at the target depth
+  // and inherit its parent.
+  for (let i = overIndex - 1; i >= 0; i--) {
+    if (moved[i]?.depth === depth) return moved[i]?.parentId
+  }
+  return null
+}