@riducms/admin 0.2.2 → 0.3.0

package/src/features/reference-browser/reference-browser-workflow.svelte.ts

@@ -1,4 +1,6 @@
+import { documentLabel, documentTitleField } from "@admin/features/documents/document-title";
 import { resolveBlockTypes } from "@riducms/protocol";
+import type { FieldReferenceBrowserProps } from "@riducms/plugin";
 import { connectDocumentLiveValidation } from "@admin/core/forms/live-validation.svelte";
 import type { SchemaCollection, SchemaField } from "@riducms/protocol";
 import { RiduError } from "@riducms/sdk";
@@ -9,142 +11,235 @@ import { documentFormValues, initialFormValues } from "@admin/core/forms/form-sc
 import { invalidFieldLabels } from "@admin/core/forms/form-validation";
 import type { NotificationCenter } from "@admin/core/notifications/notification-center.svelte";
 import type { AdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+import { UploadDraft } from "@admin/features/uploads/upload-draft.svelte";
+import {
+	defaultListColumns,
+	listColumnFields,
+	listMetadataFields,
+	filterableFields,
+	type ListColumnSelection,
+	type ListFilterGroup,
+	type ListPageSize,
+} from "@admin/features/collections/list-workspace";
+import { referenceListWhere } from "@admin/features/reference-browser/reference-list-query";
+import { isUploadMetadataField } from "@admin/features/uploads/upload-document-contracts";
 
 import { RelationshipLookupController } from "@admin/fields/relationship/relationship-lookup-controller.svelte";
-import {
-	combineRelationshipFilters,
-	type RelationshipFilter,
-} from "@admin/fields/relationship/relationship-query";
-
-interface FilterOption {
-	key: string;
-	label: string;
-	filter: RelationshipFilter;
-}
 
 interface ReferenceBrowserWorkflowOptions {
 	runtime: AdminRuntime;
 	notifications: NotificationCenter;
 	field: SchemaField;
 	collection: SchemaCollection;
+	collections?: readonly SchemaCollection[];
 	hasMany: boolean;
 	selectedIDs: readonly string[];
 	readOnly: boolean;
 	initialDocument?: AdminDocument;
 	initialDocumentID?: string;
-	optionFilter?: RelationshipFilter;
+	initialCreate?: boolean;
+	initialFile?: File;
+	optionFilter?: FieldReferenceBrowserProps["optionFilter"];
 	defaultValues?: Readonly<Record<string, unknown>>;
 	allowCreate?: boolean;
 	locale?: string;
-	onCommit: (ids: string[]) => void | boolean | Promise<void | boolean>;
+	onCommit: (ids: string[], collectionSlug: string) => void | boolean | Promise<void | boolean>;
 	onClose: () => void;
 	get open(): boolean;
 	setOpen(open: boolean): void;
 }
 
-const uploadMetadataFields = new Set([
-	"filename",
-	"mimeType",
-	"filesize",
-	"url",
-	"objectKey",
-	"width",
-	"height",
-	"sizes",
-	"focalX",
-	"focalY",
-	"cropX",
-	"cropY",
-	"cropWidth",
-	"cropHeight",
-]);
-
 export class ReferenceBrowserWorkflow {
 	readonly form: FormController;
-	readonly pageSize: number;
-	readonly scopedFields: SchemaField[];
-	readonly displayField: SchemaField | undefined;
-	readonly headingField: SchemaField | undefined;
-	readonly searchField: SchemaField | undefined;
-	readonly editorFields: SchemaField[];
-	readonly validationFields: SchemaField[];
-	readonly filters: FilterOption[];
+	readonly upload: UploadDraft;
+	readonly availableCollections: readonly SchemaCollection[];
+	pageSize = $state<ListPageSize>(10);
+	columns = $state.raw<ListColumnSelection[]>([]);
+	listFilters = $state.raw<ListFilterGroup[]>([]);
+	sort = $state("");
+	#collection: SchemaCollection;
+	readonly scopedFields = $derived(
+		this.collection.fields.map((field) => scopeField(field, `${this.options.field.id}-drawer`))
+	);
+	readonly displayField = $derived(
+		this.scopedFields.find((field) => field.path === documentTitleField(this.collection)?.path)
+	);
+	readonly searchField = $derived.by(() => {
+		const field = this.collection.capabilities.upload
+			? this.collection.fields.find((field) => field.name === "filename")
+			: documentTitleField(this.collection);
+		return field?.queryRestricted ? undefined : field;
+	});
+	readonly editorFields = $derived(
+		this.scopedFields.filter(
+			(field) => !(this.collection.capabilities.upload && isUploadMetadataField(field.name))
+		)
+	);
+	readonly validationFields = $derived(
+		this.collection.fields.filter(
+			(field) => !(this.collection.capabilities.upload && isUploadMetadataField(field.name))
+		)
+	);
 	screen = $state<"list" | "document">("list");
 	workingSelection = $state.raw<string[]>([]);
 	query = $state("");
 	page = $state(1);
-	filterKey = $state("");
 	editorDocument = $state.raw<AdminDocument>();
 	editorLoading = $state(false);
 	editorError = $state<string>();
 	editorView = $state<"edit" | "api">("edit");
-	selectedFiles = $state<FileList>();
 	newUserPassword = $state("");
 	newUserPasswordConfirmation = $state("");
 	credentialIssue = $state<string>();
 	confirmDiscard = $state(false);
 	committing = $state(false);
-	#pendingDismiss: "back" | "close" = "back";
+	#pendingDismiss: "back" | "close" | "navigate" = "back";
+	#pendingNavigation?: () => void;
+	#directEntry = $state(false);
 	readonly #lookup: RelationshipLookupController;
-	readonly #editorLoad = new AbortController();
+	#editorLoad?: AbortController;
 	#editorAccess?: AbortController;
 	#saveRequest?: AbortController;
+	#disposed = false;
 
 	constructor(readonly options: ReferenceBrowserWorkflowOptions) {
+		this.#directEntry =
+			options.initialCreate === true ||
+			options.initialFile !== undefined ||
+			options.initialDocument !== undefined ||
+			options.initialDocumentID !== undefined;
+		this.availableCollections =
+			options.collections?.filter(
+				(collection) => options.runtime.collectionOperations[collection.slug]?.read === true
+			) ?? [];
+		this.#collection = $state.raw(
+			this.#directEntry
+				? options.collection
+				: (this.availableCollections.find(
+						(collection) => collection.slug === options.collection.slug
+					) ??
+						this.availableCollections[0] ??
+						options.collection)
+		);
 		this.form = new FormController({}, options.runtime.i18n);
 		connectDocumentLiveValidation(this.form, options.runtime.client);
-		this.#lookup = new RelationshipLookupController(options.runtime.client);
-		this.form.setLocalization(options.locale);
-		this.pageSize = options.collection.capabilities.upload ? 8 : 10;
-		this.scopedFields = options.collection.fields.map((field) =>
-			scopeField(field, `${options.field.id}-drawer`)
-		);
-		this.displayField = findDisplayField(this.scopedFields);
-		this.headingField = this.displayField?.admin.row === undefined ? this.displayField : undefined;
-		this.searchField = findDisplayField(options.collection.fields);
-		this.editorFields = this.scopedFields.filter(
-			(field) => field.id !== this.headingField?.id && !uploadMetadataFields.has(field.name)
+		this.#lookup = new RelationshipLookupController(options.runtime.client, options.runtime.i18n);
+		this.upload = new UploadDraft(
+			options.runtime.client,
+			() => this.collection.slug,
+			options.runtime.i18n
 		);
-		this.validationFields = options.collection.fields.filter(
-			(field) => !(options.collection.capabilities.upload && uploadMetadataFields.has(field.name))
-		);
-		this.filters = createCollectionFilters(options.collection, options.runtime.i18n);
-		this.workingSelection = [...options.selectedIDs];
-
+		this.form.setLocalization(options.locale);
+		this.columns = this.#defaultColumns();
+		this.workingSelection = [...this.selectedIDs];
 		if (options.initialDocument !== undefined) {
 			this.#lookup.remember(options.initialDocument);
 			this.#openEditor(options.initialDocument);
 		} else if (options.initialDocumentID !== undefined) {
 			this.screen = "document";
-			this.#loadEditor(options.initialDocumentID, this.#editorLoad.signal);
+			this.#loadEditor(options.initialDocumentID);
+		} else if (options.initialCreate || options.initialFile) {
+			this.openNewDocument();
+			if (this.canCreateDocument && options.initialFile && options.collection.uploadSettings) {
+				this.upload.select(options.initialFile, options.collection.uploadSettings);
+			}
 		}
 
 		$effect(() => {
-			if (!this.options.open || this.screen !== "list") return;
+			if (!this.options.open || this.screen !== "list" || this.browsingUnavailable) return;
 			this.options.runtime.documentRevision;
 			const request = {
-				slug: this.options.collection.slug,
+				slug: this.collection.slug,
 				page: this.page,
 				limit: this.pageSize,
 				search: this.query,
-				searchField: this.searchField?.name,
-				filter: this.currentFilter,
+				searchField: this.searchField?.path,
+				sort: this.sort,
+				where: referenceListWhere(this.listFilters, [
+					...filterableFields(this.collection.fields),
+					...listMetadataFields(this.collection, this.options.runtime.i18n),
+				]),
+				includeAccess: true,
+				depth: 1,
+				filter:
+					typeof this.options.optionFilter === "function"
+						? this.options.optionFilter(this.collection)
+						: this.options.optionFilter,
 				locale: this.options.locale,
 			};
 			const delay = request.search.trim() === "" ? 0 : 220;
 			const timer = window.setTimeout(() => this.#lookup.search(request), delay);
-			return () => window.clearTimeout(timer);
+			return () => {
+				window.clearTimeout(timer);
+				this.#lookup.cancelSearch();
+			};
 		});
 
 		$effect(() => () => {
+			this.#disposed = true;
 			this.form.disposeBindings();
-			this.#editorLoad.abort();
+			this.#cancelEditorLoad();
 			this.#editorAccess?.abort();
 			this.#saveRequest?.abort();
 			this.#lookup.dispose();
+			this.upload.dispose();
 		});
 	}
 
+	get collection() {
+		return this.#collection;
+	}
+
+	get selectedIDs() {
+		return this.collection.slug === this.options.collection.slug ? this.options.selectedIDs : [];
+	}
+
+	get browsingUnavailable() {
+		return (
+			!this.directEntry &&
+			this.options.collections !== undefined &&
+			this.availableCollections.length === 0
+		);
+	}
+
+	selectCollection = (slug: string) => {
+		if (this.screen !== "list" || this.committing || this.form.submitting) return;
+		const collection = this.availableCollections.find((collection) => collection.slug === slug);
+		if (collection === undefined || collection.slug === this.collection.slug) return;
+
+		this.#returnToList();
+		this.#lookup.reset();
+		this.#collection = collection;
+		this.query = "";
+		this.page = 1;
+		this.sort = "";
+		this.listFilters = [];
+		this.columns = this.#defaultColumns();
+		this.workingSelection = [...this.selectedIDs];
+	};
+
+	#defaultColumns() {
+		const columns = [
+			...listColumnFields(this.collection),
+			...listMetadataFields(this.collection, this.options.runtime.i18n),
+		];
+		const defaults = new Set([
+			...(this.collection.capabilities.upload ? ["filename"] : []),
+			...defaultListColumns(
+				this.collection,
+				columns.map((field) => ({
+					path: field.path,
+					label: field.admin.label,
+					field,
+				}))
+			),
+		]);
+		return [...new Set([...defaults, ...columns.map((field) => field.path)])].map((path) => ({
+			path,
+			active: defaults.has(path),
+		}));
+	}
+
 	get status() {
 		return this.#lookup.status;
 	}
@@ -162,7 +257,7 @@ export class ReferenceBrowserWorkflow {
 	}
 
 	get selectedFile() {
-		return this.selectedFiles?.item(0) ?? undefined;
+		return this.upload.file;
 	}
 
 	get creating() {
@@ -170,101 +265,113 @@ export class ReferenceBrowserWorkflow {
 	}
 
 	get creatingAuthUser() {
-		return this.creating && this.options.collection.capabilities.auth;
+		return this.creating && this.collection.capabilities.auth;
 	}
 
 	get editorDirty() {
 		return (
 			this.form.dirty ||
-			this.selectedFile !== undefined ||
+			this.upload.dirty ||
 			this.newUserPassword !== "" ||
 			this.newUserPasswordConfirmation !== ""
 		);
 	}
 
-	get currentFilter() {
-		return combineRelationshipFilters(
-			this.options.optionFilter,
-			this.filters.find((option) => option.key === this.filterKey)?.filter
-		);
-	}
-
 	get editorTitle() {
+		if (this.collection.capabilities.upload)
+			return this.upload.filename || this.options.runtime.i18n.t("documents:untitled");
 		const value =
 			this.displayField === undefined ? undefined : this.form.get(this.displayField.path);
 		const title = typeof value === "string" ? value.trim() : "";
 		return title === ""
 			? this.options.runtime.i18n.t("reference:untitledLabel", {
 					label: this.options.runtime.i18n
-						.text(
-							this.options.collection.labels.singular,
-							this.options.collection.labels.singularTranslations
-						)
+						.text(this.collection.labels.singular, this.collection.labels.singularTranslations)
 						.toLocaleLowerCase(this.options.runtime.i18n.language),
 				})
 			: title;
 	}
 
-	get headingIssues() {
-		return this.headingField === undefined ? [] : this.form.issuesFor(this.headingField.path);
+	get editableUpload() {
+		return (
+			!this.options.readOnly &&
+			!this.form.submitting &&
+			this.form.access?.operations[this.creating ? "create" : "update"] === true
+		);
+	}
+
+	get directEntry() {
+		return this.#directEntry;
 	}
 
+	canReadField = (path: string, id?: string) => this.#lookup.canReadField(path, id);
+
+	setColumns = (columns: ListColumnSelection[]) => {
+		this.columns = columns;
+	};
+
+	setListFilters = (filters: ListFilterGroup[]) => {
+		this.listFilters = filters;
+		this.page = 1;
+	};
+
+	setSort = (path: string, descending: boolean) => {
+		this.sort = descending ? `-${path}` : path;
+		this.page = 1;
+	};
+
+	setPageSize = (size: ListPageSize) => {
+		this.pageSize = size;
+		this.page = 1;
+	};
+
+	selectDocument = (id: string) => this.commitSelection([id]);
+
 	get canSave() {
 		const operationAllowed = this.creating
 			? this.form.access?.operations.create === true
 			: this.form.access?.operations.update === true;
 		const inputReady = this.creating
-			? !this.options.collection.capabilities.upload || this.selectedFile !== undefined
-			: this.form.dirty;
-		return !this.options.readOnly && operationAllowed && !this.form.submitting && inputReady;
+			? !this.collection.capabilities.upload || this.selectedFile !== undefined
+			: this.editorDirty;
+		return (
+			!this.options.readOnly &&
+			operationAllowed &&
+			!this.editorLoading &&
+			!this.form.submitting &&
+			!this.upload.busy &&
+			!this.upload.editingImage &&
+			inputReady &&
+			(!this.collection.capabilities.upload || this.upload.present)
+		);
 	}
 
 	get canCreateDocument() {
 		return (
 			!this.options.readOnly &&
+			!this.browsingUnavailable &&
 			this.options.allowCreate !== false &&
-			this.options.runtime.collectionOperations[this.options.collection.slug]?.create === true
+			this.options.runtime.collectionOperations[this.collection.slug]?.create === true
 		);
 	}
 
 	get canCommitSelection() {
 		return (
 			!this.options.readOnly &&
-			(this.workingSelection.length !== this.options.selectedIDs.length ||
-				this.workingSelection.some((id) => !this.options.selectedIDs.includes(id)))
+			!this.browsingUnavailable &&
+			(this.workingSelection.length !== this.selectedIDs.length ||
+				this.workingSelection.some((id) => !this.selectedIDs.includes(id)))
 		);
 	}
 
-	get rangeStart() {
-		return this.pagination.totalDocs === 0
-			? 0
-			: (this.pagination.page - 1) * this.pagination.limit + 1;
-	}
-
-	get rangeEnd() {
-		return Math.min(this.pagination.page * this.pagination.limit, this.pagination.totalDocs);
-	}
-
-	documentLabel = (document: AdminDocument) => {
-		const value = this.options.collection.capabilities.upload
-			? document.filename
-			: this.searchField === undefined
-				? undefined
-				: document[this.searchField.name];
-		return String(value ?? document.id);
+	setPage = (page: number) => {
+		this.page = page;
 	};
 
-	documentSubtitle = (document: AdminDocument) => {
-		if (this.options.collection.capabilities.upload) {
-			return [document.mimeType, this.formatBytes(document.filesize)].filter(Boolean).join(" · ");
-		}
-		const email = typeof document.email === "string" ? document.email : undefined;
-		if (email !== undefined && email !== this.documentLabel(document)) return email;
-		const status = typeof document.status === "string" ? document.status : document._status;
-		return typeof status === "string"
-			? humanize(status, this.options.runtime.i18n.language)
-			: document.id;
-	};
+	documentLabel = (document: AdminDocument) =>
+		this.collection.capabilities.upload
+			? String(document.filename ?? document.id)
+			: documentLabel(this.collection, document);
 
 	toggleSelection = (id: string) => {
 		if (this.options.readOnly || this.committing) return;
@@ -275,13 +382,17 @@ export class ReferenceBrowserWorkflow {
 			: [id];
 	};
 
-	commitSelection = async () => {
-		if (this.committing || this.options.readOnly) return;
+	commitSelection = async (selection: readonly string[] = this.workingSelection) => {
+		if (this.#disposed || this.committing || this.options.readOnly || this.browsingUnavailable)
+			return false;
 		this.committing = true;
 		try {
-			const committed = await this.options.onCommit([...this.workingSelection]);
-			if (committed !== false && !this.options.readOnly) this.#closeBrowser();
+			const committed = await this.options.onCommit([...selection], this.collection.slug);
+			if (this.#disposed || committed === false || this.options.readOnly) return false;
+			this.#closeBrowser();
+			return true;
 		} catch (cause) {
+			if (this.#disposed) return false;
 			this.options.notifications.error({
 				title: this.options.runtime.i18n.t("reference:updateNotConfirmed"),
 				message:
@@ -289,17 +400,12 @@ export class ReferenceBrowserWorkflow {
 						? cause.message
 						: this.options.runtime.i18n.t("reference:selectedNotSaved"),
 			});
+			return false;
 		} finally {
-			this.committing = false;
+			if (!this.#disposed) this.committing = false;
 		}
 	};
 
-	chooseFilter = (key: string) => {
-		if (this.committing) return;
-		this.filterKey = key;
-		this.page = 1;
-	};
-
 	handleSearch = (event: Event) => {
 		if (this.committing) return;
 		this.query = (event.currentTarget as HTMLInputElement).value;
@@ -308,15 +414,16 @@ export class ReferenceBrowserWorkflow {
 
 	openNewDocument = () => {
 		if (this.form.submitting || !this.canCreateDocument) return;
+		this.#cancelEditorLoad();
 		this.editorDocument = undefined;
-		this.form.setResource({ collection: this.options.collection.slug });
+		this.form.setResource({ collection: this.collection.slug });
 		const values = {
-			...initialFormValues(this.options.collection.fields),
+			...initialFormValues(this.collection.fields),
 			...this.options.defaultValues,
 		};
-		this.form.reset(values, this.options.collection.fields);
+		this.form.reset(values, this.collection.fields);
 		this.form.setAccess(undefined, "create");
-		this.selectedFiles = undefined;
+		this.upload.reset();
 		this.newUserPassword = "";
 		this.newUserPasswordConfirmation = "";
 		this.credentialIssue = undefined;
@@ -327,16 +434,13 @@ export class ReferenceBrowserWorkflow {
 	};
 
 	openKnownDocument = (document: AdminDocument) => {
-		this.#lookup.remember(document);
-		this.#openEditor(document);
+		// List rows use populated relationships for display. Fetch editable wire values.
+		this.screen = "document";
+		this.#loadEditor(document.id);
 	};
 
 	saveEditor = async () => {
 		if (this.form.submitting || !this.canSave) return false;
-		const creatingUpload =
-			this.creating &&
-			this.options.collection.capabilities.upload &&
-			this.selectedFile !== undefined;
 		const request = new AbortController();
 		this.#saveRequest?.abort();
 		this.#saveRequest = request;
@@ -346,8 +450,28 @@ export class ReferenceBrowserWorkflow {
 			const saved = await this.form.submit(this.validationFields, this.creating, async (values) => {
 				if (this.options.readOnly) throw new Error("This field is read-only.");
 				if (this.editorDocument !== undefined) {
+					if (this.collection.capabilities.upload) {
+						return this.options.runtime.client.updateUpload(
+							this.collection.slug,
+							this.editorDocument.id,
+							{
+								data: values,
+								file: this.upload.file,
+								filename: this.upload.filename,
+								image: this.upload.image,
+							},
+							{
+								revision:
+									typeof this.editorDocument._revision === "number"
+										? this.editorDocument._revision
+										: undefined,
+								signal: request.signal,
+								locale: this.options.locale,
+							}
+						);
+					}
 					return this.options.runtime.client.update(
-						this.options.collection.slug,
+						this.collection.slug,
 						this.editorDocument.id,
 						values,
 						{
@@ -360,16 +484,16 @@ export class ReferenceBrowserWorkflow {
 						}
 					);
 				}
-				if (this.options.collection.capabilities.auth) {
+				if (this.collection.capabilities.auth) {
 					return this.options.runtime.client.createAuthUser(
-						this.options.collection.slug,
+						this.collection.slug,
 						values,
 						this.newUserPassword,
 						{ signal: request.signal, locale: this.options.locale }
 					);
 				}
-				if (!this.options.collection.capabilities.upload) {
-					return this.options.runtime.client.create(this.options.collection.slug, values, {
+				if (!this.collection.capabilities.upload) {
+					return this.options.runtime.client.create(this.collection.slug, values, {
 						signal: request.signal,
 						locale: this.options.locale,
 					});
@@ -377,7 +501,9 @@ export class ReferenceBrowserWorkflow {
 				if (this.selectedFile === undefined) {
 					throw new Error(this.options.runtime.i18n.t("uploads:chooseFileBeforeCreating"));
 				}
-				return this.options.runtime.client.upload(this.options.collection.slug, this.selectedFile, {
+				return this.options.runtime.client.upload(this.collection.slug, this.selectedFile, {
+					filename: this.upload.filename,
+					image: this.upload.image,
 					data: values,
 					signal: request.signal,
 					locale: this.options.locale,
@@ -386,35 +512,36 @@ export class ReferenceBrowserWorkflow {
 			if (request.signal.aborted || this.options.readOnly) return false;
 			const wasCreating = this.editorDocument === undefined;
 			this.editorDocument = saved;
+			this.upload.reset(saved);
+			this.form.setResource({ collection: this.collection.slug, id: saved.id });
 			this.#lookup.remember(saved);
 			this.workingSelection = this.options.hasMany
 				? [...new Set([...this.workingSelection, saved.id])]
 				: [saved.id];
 			this.options.runtime.documentsChanged();
-			this.form.reset(
-				documentFormValues(this.options.collection.fields, saved),
-				this.options.collection.fields
-			);
+			this.form.reset(documentFormValues(this.collection.fields, saved), this.collection.fields);
 			this.form.setLocalization(this.options.locale, saved._localization?.sources);
 			this.options.notifications.success({
 				title: wasCreating
 					? this.options.runtime.i18n.t("reference:createdLabel", {
 							label: this.options.runtime.i18n.text(
-								this.options.collection.labels.singular,
-								this.options.collection.labels.singularTranslations
+								this.collection.labels.singular,
+								this.collection.labels.singularTranslations
 							),
 						})
 					: this.options.runtime.i18n.t("documents:updated"),
 			});
-			if (wasCreating) this.screen = "list";
+			if (wasCreating && !this.directEntry) this.screen = "list";
 			this.newUserPassword = "";
 			this.newUserPasswordConfirmation = "";
 			this.credentialIssue = undefined;
+			if (!wasCreating) this.#loadEditorAccess(saved.id);
+			if (wasCreating && this.directEntry && !(await this.commitSelection())) this.#returnToList();
 			return true;
 		} catch (cause) {
 			if (request.signal.aborted || this.options.readOnly) return false;
 			if (
-				creatingUpload &&
+				this.collection.capabilities.upload &&
 				!(cause instanceof FormValidationError) &&
 				(!(cause instanceof RiduError) || cause.status >= 500)
 			) {
@@ -454,28 +581,25 @@ export class ReferenceBrowserWorkflow {
 	};
 
 	#validateNewUserPassword() {
-		if (!this.creatingAuthUser || this.options.collection.authSettings === undefined) {
+		if (!this.creatingAuthUser || this.collection.authSettings === undefined) {
 			return undefined;
 		}
 		if (this.newUserPassword === "")
 			return this.options.runtime.i18n.t("reference:enterNewAccountPassword");
-		if (
-			Array.from(this.newUserPassword).length <
-			this.options.collection.authSettings.passwordMinLength
-		) {
+		if (Array.from(this.newUserPassword).length < this.collection.authSettings.passwordMinLength) {
 			return this.options.runtime.i18n.t("reference:passwordTooShort", {
 				minimum: this.options.runtime.i18n.formatNumber(
-					this.options.collection.authSettings.passwordMinLength
+					this.collection.authSettings.passwordMinLength
 				),
 			});
 		}
 		if (
 			new TextEncoder().encode(this.newUserPassword).length >
-			this.options.collection.authSettings.passwordMaxBytes
+			this.collection.authSettings.passwordMaxBytes
 		) {
 			return this.options.runtime.i18n.t("reference:passwordTooLong", {
 				maximum: this.options.runtime.i18n.formatNumber(
-					this.options.collection.authSettings.passwordMaxBytes
+					this.collection.authSettings.passwordMaxBytes
 				),
 			});
 		}
@@ -485,6 +609,17 @@ export class ReferenceBrowserWorkflow {
 		return undefined;
 	}
 
+	requestNavigation = (navigate: () => void) => {
+		if (this.committing || this.form.submitting) return;
+		if (this.editorDirty) {
+			this.#pendingDismiss = "navigate";
+			this.#pendingNavigation = navigate;
+			this.confirmDiscard = true;
+			return;
+		}
+		navigate();
+	};
+
 	requestBack = () => {
 		if (this.form.submitting) return;
 		if (this.editorDirty) {
@@ -512,6 +647,12 @@ export class ReferenceBrowserWorkflow {
 	discardChanges = () => {
 		if (this.form.submitting) return;
 		this.confirmDiscard = false;
+		if (this.#pendingDismiss === "navigate") {
+			const navigate = this.#pendingNavigation;
+			this.#pendingNavigation = undefined;
+			navigate?.();
+			return;
+		}
 		if (this.#pendingDismiss === "close") {
 			this.#closeBrowser();
 			return;
@@ -525,50 +666,47 @@ export class ReferenceBrowserWorkflow {
 	isImage = (document: AdminDocument | undefined) =>
 		typeof document?.mimeType === "string" && document.mimeType.startsWith("image/");
 
-	formatBytes = (value: unknown) => {
-		if (typeof value !== "number" || !Number.isFinite(value)) return "";
-		if (value < 1_024)
-			return this.options.runtime.i18n.formatNumber(value, { style: "unit", unit: "byte" });
-		if (value < 1_048_576)
-			return this.options.runtime.i18n.formatNumber(value / 1_024, {
-				maximumFractionDigits: 1,
-				style: "unit",
-				unit: "kilobyte",
-			});
-		return this.options.runtime.i18n.formatNumber(value / 1_048_576, {
-			maximumFractionDigits: 1,
-			style: "unit",
-			unit: "megabyte",
-		});
-	};
+	#cancelEditorLoad() {
+		this.#editorLoad?.abort();
+		this.#editorLoad = undefined;
+	}
 
-	#loadEditor(id: string, signal?: AbortSignal) {
+	#loadEditor(id: string) {
+		this.#cancelEditorLoad();
+		const request = new AbortController();
+		this.#editorLoad = request;
 		this.editorLoading = true;
 		this.editorError = undefined;
-		this.#lookup
-			.loadDocument(this.options.collection.slug, id, this.options.locale, signal)
+		this.options.runtime.client
+			.find(this.collection.slug, id, {
+				depth: 0,
+				locale: this.options.locale,
+				signal: request.signal,
+			})
 			.then((document) => {
-				if (signal?.aborted) return;
-				if (document === undefined) {
-					this.editorError =
-						this.#lookup.error ?? this.options.runtime.i18n.t("reference:relatedLoadFailed");
-					this.editorLoading = false;
-					return;
-				}
+				if (request.signal.aborted) return;
+				this.#editorLoad = undefined;
 				this.#openEditor(document);
+			})
+			.catch((cause: unknown) => {
+				if (request.signal.aborted) return;
+				this.#editorLoad = undefined;
+				this.editorLoading = false;
+				this.editorError =
+					cause instanceof Error
+						? cause.message
+						: this.options.runtime.i18n.t("reference:relatedLoadFailed");
 			});
 	}
 
 	#openEditor(document: AdminDocument) {
-		this.form.setResource({ collection: this.options.collection.slug, id: document.id });
+		this.#cancelEditorLoad();
+		this.form.setResource({ collection: this.collection.slug, id: document.id });
 		this.editorDocument = document;
-		this.form.reset(
-			documentFormValues(this.options.collection.fields, document),
-			this.options.collection.fields
-		);
+		this.form.reset(documentFormValues(this.collection.fields, document), this.collection.fields);
 		this.form.setLocalization(this.options.locale, document._localization?.sources);
 		this.form.setAccess(undefined, "update");
-		this.selectedFiles = undefined;
+		this.upload.reset(document);
 		this.newUserPassword = "";
 		this.newUserPasswordConfirmation = "";
 		this.credentialIssue = undefined;
@@ -580,12 +718,13 @@ export class ReferenceBrowserWorkflow {
 
 	#loadEditorAccess(id: string | undefined, data?: Record<string, unknown>) {
 		this.#editorAccess?.abort();
+		this.form.setAccess(undefined, id === undefined ? "create" : "update");
 		const request = new AbortController();
 		this.#editorAccess = request;
 		this.editorLoading = true;
 		this.editorError = undefined;
 		this.options.runtime.client
-			.collectionAccess(this.options.collection.slug, {
+			.collectionAccess(this.collection.slug, {
 				...(id === undefined ? { data } : { id }),
 				signal: request.signal,
 				locale: this.options.locale,
@@ -612,12 +751,15 @@ export class ReferenceBrowserWorkflow {
 	}
 
 	#returnToList() {
+		this.#cancelEditorLoad();
 		this.#editorAccess?.abort();
 		this.#editorAccess = undefined;
 		this.screen = "list";
+		this.#directEntry = false;
 		this.editorDocument = undefined;
+		this.editorLoading = false;
 		this.editorError = undefined;
-		this.selectedFiles = undefined;
+		this.upload.reset();
 		this.newUserPassword = "";
 		this.newUserPasswordConfirmation = "";
 		this.credentialIssue = undefined;
@@ -626,50 +768,13 @@ export class ReferenceBrowserWorkflow {
 	}
 
 	#closeBrowser() {
+		this.#cancelEditorLoad();
 		this.form.disposeBindings();
 		this.options.setOpen(false);
 		this.options.onClose();
 	}
 }
 
-function findDisplayField(fields: readonly SchemaField[]) {
-	return (
-		fields.find((field) => field.name === "title" || field.name === "name") ??
-		fields.find((field) => field.type === "text" && field.name !== "email") ??
-		fields.find((field) => field.type === "text" || field.type === "email")
-	);
-}
-
-function createCollectionFilters(collection: SchemaCollection, i18n: AdminRuntime["i18n"]) {
-	const result: FilterOption[] = [{ key: "", label: i18n.t("reference:all"), filter: undefined }];
-	if (collection.capabilities.upload) {
-		result.push(
-			{
-				key: "images",
-				label: i18n.t("reference:images"),
-				filter: { field: "mimeType", operator: "like", value: "image/" },
-			},
-			{
-				key: "documents",
-				label: i18n.t("reference:documents"),
-				filter: { field: "mimeType", operator: "like", value: "application/" },
-			}
-		);
-		return result;
-	}
-	const select =
-		collection.fields.find((field) => field.name === "status" && field.select !== undefined) ??
-		collection.fields.find((field) => field.select !== undefined);
-	for (const option of select?.select?.options ?? []) {
-		result.push({
-			key: option.value,
-			label: i18n.text(option.label, option.labelTranslations),
-			filter: { field: select?.name ?? "", operator: "equals", value: option.value },
-		});
-	}
-	return result;
-}
-
 function scopeField(field: SchemaField, prefix: string): SchemaField {
 	return {
 		...field,
@@ -698,9 +803,3 @@ function scopeField(field: SchemaField, prefix: string): SchemaField {
 				}),
 	};
 }
-
-function humanize(value: string, language: string) {
-	return value
-		.replaceAll(/[_-]+/g, " ")
-		.replace(/\b\w/g, (letter) => letter.toLocaleUpperCase(language));
-}