@riducms/admin 0.2.1 → 0.2.2

package/src/core/forms/plugin-field-binding.ts

@@ -1,4 +1,4 @@
-import { cloneSchemaField } from "@riducms/protocol";
+import { FieldBindingLifetime } from "@admin/core/forms/field-binding-lifetime";
 import type {
 	PluginFieldBinding as Binding,
 	PluginForm,
@@ -9,46 +9,20 @@ import type { FormController } from "@admin/core/forms/form-controller.svelte";
 import { captureFieldOccurrence } from "@admin/core/forms/field-occurrence";
 import { writePluginField } from "@admin/core/forms/plugin-field-write";
 import { cloneFormValue } from "@admin/core/forms/form-schema";
-import { fieldAccessPath } from "@admin/fields/nested/scoped-field";
-import { evaluateFieldCondition } from "@admin/core/forms/field-condition";
 
 /** The form owns values. This lease owns registration, occurrence tracking and child capabilities. */
 export class PluginFieldBinding implements Binding<unknown> {
-	#stale = false;
-	#path: string;
-	#resolvePath: () => string | undefined;
-	#ancestors: ReturnType<typeof captureFieldOccurrence>["ancestors"];
-	#epoch: number;
-	#version: unknown;
-	#schemaID: string;
-	#resource: string;
-	#locale: string | undefined;
-	#stopPath: () => void;
-	#stopObserve: () => void;
-	#stopLifetime: () => void;
-	#cleanup = new Set<() => void>();
+	#lifetime: FieldBindingLifetime;
 	readonly form: PluginForm;
 	constructor(
 		private controller: FormController,
-		private getSchema: () => SchemaField,
+		getSchema: () => SchemaField,
 		private registration: Pick<RegisteredPluginField, "decodeValue"> &
 			Partial<Pick<RegisteredPluginField, "decodeInput" | "decodeFormValue">>,
-		private schemaVersion: () => unknown = () => controller.editorEpoch,
+		schemaVersion: () => unknown = () => controller.editorEpoch,
 		private owner?: PluginFieldBinding
 	) {
-		const schema = getSchema();
-		this.#path = schema.path;
-		const occurrence = captureFieldOccurrence(controller, schema.path);
-		this.#resolvePath = occurrence.resolve;
-		this.#ancestors = occurrence.ancestors;
-		this.#epoch = controller.editorEpoch;
-		this.#schemaID = schema.id;
-		this.#version = schemaVersion();
-		this.#resource = JSON.stringify(controller.resource);
-		this.#locale = controller.contentLocale;
-		this.#stopPath = controller.register(this.#path);
-		this.#stopObserve = controller.observe(this.#path.split(".")[0]!, () => this.#resolve());
-		this.#stopLifetime = controller.registerEditorLifetime(this.destroy);
+		this.#lifetime = new FieldBindingLifetime(controller, getSchema, schemaVersion);
 		const binding = this;
 		this.form = {
 			get contentLocale() {
@@ -87,21 +61,20 @@ export class PluginFieldBinding implements Binding<unknown> {
 		};
 	}
 	get stale() {
-		this.#resolve();
-		return this.#stale;
+		return this.#lifetime.stale;
 	}
 	get schema() {
 		this.assertActive();
-		const schema = cloneSchemaField(this.getSchema());
+		const schema = this.#lifetime.schema;
 		return {
 			...schema,
-			path: this.#path,
+			path: this.#lifetime.path,
 			admin: { ...schema.admin, readOnly: this.#isReadOnly() },
 		};
 	}
 	get rawValue() {
 		this.assertActive();
-		return cloneFormValue(this.controller.get(this.#path));
+		return cloneFormValue(this.controller.get(this.#lifetime.path));
 	}
 	get value() {
 		const raw = this.rawValue;
@@ -114,16 +87,16 @@ export class PluginFieldBinding implements Binding<unknown> {
 	}
 	get issues() {
 		this.assertActive();
-		return this.controller.issuesFor(this.#path).map((issue) => ({ ...issue }));
+		return this.controller.issuesFor(this.#lifetime.path).map((issue) => ({ ...issue }));
 	}
 	get liveValidation() {
 		if (this.stale) return { status: "idle" as const, retry: () => {} };
-		const feedback = this.controller.liveValidation.forField(this.#path);
+		const feedback = this.controller.liveValidation.forField(this.#lifetime.path);
 		return {
 			status: feedback.status,
 			retry: () => {
 				this.assertActive();
-				if (!this.readOnly) this.controller.liveValidation.flush(this.#path);
+				if (!this.readOnly) this.controller.liveValidation.flush(this.#lifetime.path);
 			},
 		};
 	}
@@ -131,36 +104,8 @@ export class PluginFieldBinding implements Binding<unknown> {
 	get readOnly() {
 		return this.controller.editingBlocked || this.#isReadOnly();
 	}
-	#isReadOnly() {
-		if (this.stale || (this.owner !== undefined && this.owner.#isReadOnly())) return true;
-		if (
-			this.#ancestors.some(({ schema, resolve }) => {
-				const path = resolve();
-				return (
-					path === undefined ||
-					schema.admin.readOnly === true ||
-					schema.admin.hidden === true ||
-					!this.controller.canRead(path, fieldAccessPath(schema)) ||
-					!this.controller.canWrite(path, fieldAccessPath(schema)) ||
-					(schema.admin.condition !== undefined &&
-						!evaluateFieldCondition(schema.admin.condition, path, (other) =>
-							this.controller.get(other)
-						))
-				);
-			})
-		)
-			return true;
-		const field = this.getSchema();
-		return (
-			field.admin.readOnly === true ||
-			field.admin.hidden === true ||
-			!this.controller.canRead(this.#path, fieldAccessPath(field)) ||
-			!this.controller.canWrite(this.#path, fieldAccessPath(field)) ||
-			(field.admin.condition !== undefined &&
-				!evaluateFieldCondition(field.admin.condition, this.#path, (path) =>
-					this.controller.get(path)
-				))
-		);
+	#isReadOnly(): boolean {
+		return this.#lifetime.schemaReadOnly || (this.owner !== undefined && this.owner.#isReadOnly());
 	}
 	set = (value: unknown) => {
 		this.assertEditable();
@@ -173,7 +118,7 @@ export class PluginFieldBinding implements Binding<unknown> {
 		// Decoders and getters are application code and may revoke the binding synchronously.
 		const detached = copyValue(decoded);
 		this.assertEditable();
-		const schema = { ...this.getSchema(), path: this.#path };
+		const schema = this.#lifetime.schema;
 		writePluginField(this.controller, schema, detached);
 	};
 	assertActive = () => {
@@ -188,44 +133,9 @@ export class PluginFieldBinding implements Binding<unknown> {
 	};
 	onDestroy = (cleanup: () => void) => {
 		this.assertActive();
-		this.#cleanup.add(cleanup);
-		return () => {
-			this.#cleanup.delete(cleanup);
-		};
+		return this.#lifetime.onDestroy(cleanup);
 	};
-	destroy = () => {
-		if (this.#stale) return;
-		this.#stale = true;
-		this.#stopPath();
-		this.#stopObserve();
-		this.#stopLifetime();
-		for (const cleanup of [...this.#cleanup]) cleanup();
-		this.#cleanup.clear();
-	};
-	#resolve() {
-		if (this.#stale) return;
-		if (
-			!this.controller.editorScopeActive ||
-			this.controller.editorEpoch !== this.#epoch ||
-			this.schemaVersion() !== this.#version ||
-			this.getSchema().id !== this.#schemaID ||
-			this.controller.contentLocale !== this.#locale ||
-			JSON.stringify(this.controller.resource) !== this.#resource
-		) {
-			this.destroy();
-			return;
-		}
-		const path = this.#resolvePath();
-		if (path === undefined) {
-			this.destroy();
-			return;
-		}
-		if (path !== this.#path) {
-			this.#stopPath();
-			this.#path = path;
-			this.#stopPath = this.controller.register(path);
-		}
-	}
+	destroy = () => this.#lifetime.destroy();
 }
 
 /** Reject non-JSON mutable objects before they can enter the form (including decoder outputs). */

package/src/core/forms/scalar-literal.ts

@@ -0,0 +1,18 @@
+import type { SchemaScalarLiteral } from "@riducms/protocol";
+
+/** Decode manifest operands without coercing malformed booleans or empty/nonfinite numbers. */
+export function scalarLiteralValue(
+	literal: SchemaScalarLiteral
+): string | number | boolean | undefined {
+	switch (literal.type) {
+		case "string":
+			return literal.value;
+		case "number": {
+			if (literal.value.trim() === "") return undefined;
+			const value = Number(literal.value);
+			return Number.isFinite(value) ? value : undefined;
+		}
+		case "boolean":
+			return literal.value === "true" ? true : literal.value === "false" ? false : undefined;
+	}
+}

package/src/core/plugins/field-registry.ts

@@ -1,4 +1,4 @@
-import { resolvePluginFields, type AdminPlugin, type ResolvedPluginField } from "@riducms/plugin";
+import { type ResolvedPluginField } from "@riducms/plugin";
 import type { FieldType, SchemaField } from "@riducms/protocol";
 
 interface FieldRenderer {
@@ -33,8 +33,10 @@ export class FieldRegistry {
 		return renderer;
 	}
 }
-export function createCoreFieldRegistry(plugins: readonly AdminPlugin[] = []): FieldRegistry {
+export function createCoreFieldRegistry(
+	fields: readonly ResolvedPluginField[] = []
+): FieldRegistry {
 	const registry = new FieldRegistry();
-	for (const field of resolvePluginFields(plugins)) registry.register(field);
+	for (const field of fields) registry.register(field);
 	return registry;
 }

package/src/core/runtime/admin-runtime.svelte.ts

@@ -1,6 +1,10 @@
-import { validateAdminConfig, type AdminConfig } from "@riducms/plugin/admin";
 import {
-	resolveAdminExtensions,
+	resolveAdminConfig,
+	validateAdminManifest,
+	type AdminConfig,
+	type ResolvedAdminConfig,
+} from "@riducms/plugin/admin";
+import {
 	type AdminDashboardPanel,
 	type AdminLoginComponent,
 	type AdminAccountComponent,
@@ -13,12 +17,10 @@ import {
 	type AdminDocumentAction,
 	type AdminDocumentView,
 	type AdminListCell,
-	type AdminPlugin,
 	type AdminRoute,
 } from "@riducms/plugin";
 import type { AuthSession, OperationCapabilities, SchemaManifest } from "@riducms/protocol";
 import { RiduError } from "@riducms/sdk";
-import type { TranslationLanguage } from "@riducms/translations";
 import { createContext } from "svelte";
 
 import type { AdminClient, AdminDocument } from "@admin/core/api/admin-client";
@@ -166,15 +168,18 @@ export class AdminRuntime {
 	readonly rowLabels: RowLabelRegistry;
 	readonly i18n: AdminI18nController;
 
+	readonly config: ResolvedAdminConfig;
+	readonly fields: FieldRegistry;
+	readonly editors: ResolvedAdminConfig["editors"];
+
 	constructor(
 		readonly client: AdminClient,
-		readonly plugins: readonly AdminPlugin[] = [],
-		languages?: readonly TranslationLanguage[],
-		readonly fields: FieldRegistry = createCoreFieldRegistry(plugins),
-		readonly editors: NonNullable<AdminConfig["fields"]> = {},
-		readonly application: AdminConfig = {}
+		config: AdminConfig = {}
 	) {
-		const extensions = resolveAdminExtensions(plugins, application);
+		this.config = resolveAdminConfig(config);
+		this.fields = createCoreFieldRegistry(this.config.fields);
+		this.editors = this.config.editors;
+		const extensions = this.config.extensions;
 		this.pluginRoutes = extensions.routes;
 		this.dashboardPanels = extensions.dashboard;
 		this.loginComponents = extensions.login;
@@ -188,11 +193,11 @@ export class AdminRuntime {
 		this.listCells = extensions.listCells;
 		this.documentActions = extensions.documentActions;
 		this.documentViews = extensions.documentViews;
-		this.rowLabels = createRowLabelRegistry(extensions.rowLabels, application.rowLabels);
+		this.rowLabels = createRowLabelRegistry(extensions.rowLabels, this.config.rowLabels);
 		this.i18n = new AdminI18nController(
 			client,
 			() => this.session,
-			languages,
+			this.config.languages,
 			extensions.messages,
 			extensions.applicationMessages
 		);
@@ -439,10 +444,7 @@ export class AdminRuntime {
 		try {
 			const manifest = await this.client.schema();
 			if (request !== this.#manifestRequest) return;
-			validateAdminConfig(
-				{ ...this.application, plugins: this.plugins, fields: this.editors },
-				manifest
-			);
+			validateAdminManifest(this.config, manifest);
 			this.manifest = manifest;
 			this.manifestRevision += 1;
 			this.#configureContentLocale();
@@ -495,10 +497,7 @@ export class AdminRuntime {
 		try {
 			const manifest = await this.client.schema();
 			if (request !== this.#manifestRequest) return;
-			validateAdminConfig(
-				{ ...this.application, plugins: this.plugins, fields: this.editors },
-				manifest
-			);
+			validateAdminManifest(this.config, manifest);
 			this.manifest = manifest;
 			this.manifestRevision += 1;
 			this.#configureContentLocale();

package/src/fields/embedded-schema-draft-editor.svelte

@@ -5,6 +5,7 @@
 	import { Button } from "@admin/components/ui/button";
 	import { focusFieldIssue } from "@admin/core/forms/field-issue-focus";
 	import FieldLayout from "@admin/fields/field-layout.svelte";
+	import BlockHeader from "@admin/fields/nested/block-header.svelte";
 	import { onDestroy } from "svelte";
 
 	let {
@@ -52,6 +53,16 @@
 		<div class="border-b border-border px-6 py-4">
 			<SheetTitle>{options.title ?? i18n.t("fields:embeddedEditTitle")}</SheetTitle>
 			<SheetDescription>{i18n.t("fields:embeddedEditDescription")}</SheetDescription>
+			{#if !draft.stale && session.block.admin?.nameField !== undefined}
+				<div class="mt-3">
+					<BlockHeader
+						block={session.block}
+						path={draft.id}
+						instance={draft.id}
+						form={session.form}
+					/>
+				</div>
+			{/if}
 		</div>
 		<div class="min-h-0 flex-1 overflow-y-auto px-6 py-5" data-schema-draft={draft.id}>
 			{#if draft.stale}
@@ -64,7 +75,10 @@
 					{#each draft.issues as issue}<p>{issue.message}</p>{/each}
 				</div>
 			{/if}
-			{#if !draft.stale}<FieldLayout fields={session.fields} form={session.form} />{/if}
+			{#if !draft.stale}<FieldLayout
+					fields={session.fields.filter((field) => field.name !== session.block.admin?.nameField)}
+					form={session.form}
+				/>{/if}
 		</div>
 		<div class="flex justify-end gap-2 border-t border-border px-6 py-4">
 			<Button variant="outline" onclick={cancel}>{i18n.t("general:cancel")}</Button>

package/src/fields/embedded-schema-fields.svelte

@@ -5,6 +5,7 @@
 	import type { EmbeddedOccurrence } from "@admin/core/forms/embedded-fields";
 	import { fieldAccessPath, scopeRepeatedRowField } from "@admin/fields/nested/scoped-field";
 	import FieldLayout from "@admin/fields/field-layout.svelte";
+	import BlockHeader from "@admin/fields/nested/block-header.svelte";
 
 	let {
 		field,
@@ -40,5 +41,17 @@
 		The embedded field occurrence is no longer available. Close this editor and reopen it.
 	</p>
 {:else}
-	<FieldLayout fields={children} {form} />
+	<BlockHeader
+		block={occurrence.block}
+		path={occurrence.path}
+		instance={`${field.id}-${scope.treeKey}-${scope.identity}`}
+		{form}
+		readOnly={scope.readOnly === true ||
+			field.admin.readOnly === true ||
+			!form.canWrite(field.path, fieldAccessPath(field))}
+	/>
+	<FieldLayout
+		fields={children.filter((child) => child.name !== occurrence.block.admin?.nameField)}
+		{form}
+	/>
 {/if}

package/src/fields/nested/block-header.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { SchemaBlockType } from "@riducms/protocol";
+	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { scopeRepeatedRowField } from "@admin/fields/nested/scoped-field";
+	import BlockNameInput from "@admin/fields/nested/block-name-input.svelte";
+
+	let {
+		block,
+		path,
+		instance,
+		form,
+		readOnly = false,
+		disabled = false,
+		onChange,
+	}: {
+		block: SchemaBlockType;
+		path: string;
+		instance: string;
+		form: FormController;
+		readOnly?: boolean;
+		disabled?: boolean;
+		onChange?: (change: { field: string; value: string }) => void;
+	} = $props();
+	const runtime = getAdminRuntime();
+	const child = $derived(block.fields.find((field) => field.name === block.admin?.nameField));
+	const schema = $derived(
+		child === undefined ? undefined : scopeRepeatedRowField(child, path, instance)
+	);
+</script>
+
+{#if schema !== undefined}
+	{#key form}
+		{#key `${form.editorEpoch}:${runtime.manifestRevision}:${schema.id}`}
+			<BlockNameInput {schema} {block} {form} {readOnly} {disabled} {onChange} />
+		{/key}
+	{/key}
+{/if}

package/src/fields/nested/block-header.ts

@@ -0,0 +1,28 @@
+import type { SchemaBlockType, SchemaField } from "@riducms/protocol";
+import type { FormController } from "@admin/core/forms/form-controller.svelte";
+import { evaluateFieldCondition } from "@admin/core/forms/field-condition";
+import { fieldAccessPath, scopeRepeatedRowField } from "@admin/fields/nested/scoped-field";
+
+/** Header summaries observe the same child visibility policy as the content form. */
+export function visibleBlockChild(form: FormController, field: SchemaField) {
+	return (
+		field.admin.hidden !== true &&
+		form.canRead(field.path, fieldAccessPath(field)) &&
+		(field.admin.condition === undefined ||
+			evaluateFieldCondition(field.admin.condition, field.path, (path) => form.get(path)))
+	);
+}
+
+export function blockHeaderValue(
+	form: FormController,
+	block: SchemaBlockType,
+	path: string,
+	name: string | undefined
+) {
+	const child = block.fields.find((field) => field.name === name);
+	if (child === undefined) return "";
+	const scoped = scopeRepeatedRowField(child, path, "header-summary");
+	if (!visibleBlockChild(form, scoped)) return "";
+	const value = form.get(scoped.path);
+	return value === undefined || value === null || String(value).trim() === "" ? "" : String(value);
+}

package/src/fields/nested/block-name-input.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import type { SchemaBlockType, SchemaField } from "@riducms/protocol";
+	import { Input } from "@admin/components/ui/input";
+	import FieldMessages from "@admin/fields/field-messages.svelte";
+	import LiveValidationFeedback from "@admin/fields/live-validation-feedback.svelte";
+	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { FieldEditorBinding } from "@admin/core/forms/field-editor-binding";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { localizeSchemaField } from "@admin/core/i18n/localized-schema";
+	import { blockHeaderValue } from "@admin/fields/nested/block-header";
+	import {
+		contentLocaleLabel,
+		withContentLocaleLabel,
+	} from "@admin/fields/localized-field-presentation";
+
+	let {
+		schema,
+		block,
+		form,
+		readOnly = false,
+		disabled = false,
+		onChange,
+	}: {
+		schema: SchemaField;
+		block: SchemaBlockType;
+		form: FormController;
+		readOnly?: boolean;
+		disabled?: boolean;
+		onChange?: (change: { field: string; value: string }) => void;
+	} = $props();
+	const runtime = getAdminRuntime();
+	const presented = $derived(
+		withContentLocaleLabel(
+			localizeSchemaField(
+				{
+					...schema,
+					admin: { ...schema.admin, readOnly: schema.admin.readOnly || readOnly || disabled },
+				},
+				runtime.i18n
+			),
+			contentLocaleLabel(runtime.contentLocales, form.contentLocale)
+		)
+	);
+	// The keyed host owns one occurrence capability, including delayed callbacks.
+	// svelte-ignore state_referenced_locally
+	const binding = new FieldEditorBinding(
+		form,
+		() => presented,
+		"text",
+		() => runtime.manifestRevision,
+		(value) => {
+			const name = binding.schema.name;
+			if (onChange !== undefined) onChange({ field: name, value: value ?? "" });
+			else form.set(binding.schema.path, value);
+		}
+	);
+	onDestroy(binding.destroy);
+	const current = $derived(binding.schema);
+	const placeholder = $derived(
+		blockHeaderValue(
+			form,
+			block,
+			current.path.slice(0, current.path.lastIndexOf(".")),
+			block.admin?.rowLabel
+		) ||
+			runtime.i18n.t("fields:untitled", {
+				label: runtime.i18n.text(block.labels.singular, block.labels.singularTranslations),
+			})
+	);
+	const inherited = $derived(
+		form.isInherited(current.path) ? form.localizationSource(current.path) : undefined
+	);
+	function keydown(event: KeyboardEvent) {
+		if (event.key === "Enter" && !event.isComposing) event.preventDefault();
+	}
+	function focusout() {
+		// Removing a keyed schema host can dispatch focusout after its derived
+		// values are destroyed. The binding lease is the synchronous lifetime guard.
+		if (!binding.stale) form.liveValidation.flush(binding.schema.path);
+	}
+</script>
+
+{#if binding.visible}
+	<div class="min-w-0 flex-1" data-field-path={current.path} onfocusout={focusout}>
+		<FieldMessages
+			controlID={current.id}
+			description={current.admin.description}
+			issues={binding.issues}
+		>
+			<label class="sr-only" for={current.id}>{current.admin.label}</label>
+			<Input
+				{...binding.inputProps}
+				value={binding.value ?? ""}
+				{placeholder}
+				readonly={binding.readOnly}
+				{disabled}
+				minlength={current.text?.minLength}
+				maxlength={current.text?.maxLength}
+				class="h-8 min-w-0"
+				oninput={(event) => binding.set(event.currentTarget.value)}
+				onkeydown={keydown}
+			/>
+		</FieldMessages>
+		<LiveValidationFeedback
+			feedback={binding.liveValidation}
+			i18n={runtime.i18n}
+			path={current.path}
+		/>
+		{#if inherited !== undefined}<p
+				class="mt-1 text-xs text-foreground-faint"
+				data-localization-source={inherited}
+			>
+				{runtime.i18n.t("documents:inheritedFrom", {
+					locale: contentLocaleLabel(runtime.contentLocales, inherited) ?? inherited,
+				})}
+			</p>{:else if current.localized && form.contentLocale !== undefined && binding.value === undefined}
+			<p class="mt-1 text-xs text-foreground-faint" data-localization-missing={form.contentLocale}>
+				{runtime.i18n.t("documents:missingTranslation", {
+					locale:
+						contentLocaleLabel(runtime.contentLocales, form.contentLocale) ?? form.contentLocale,
+				})}
+			</p>
+		{/if}
+	</div>
+{/if}

package/src/fields/nested/nested-field.svelte

@@ -43,10 +43,15 @@
 	} from "@admin/fields/field-clipboard";
 	import { scopeRepeatedRowField } from "@admin/fields/nested/scoped-field";
 	import SortableRow from "@admin/fields/nested/sortable-row.svelte";
+	import BlockHeader from "@admin/fields/nested/block-header.svelte";
+	import { blockHeaderValue, visibleBlockChild } from "@admin/fields/nested/block-header";
 
 	let { field, form }: { field: SchemaField; form: FormController } = $props();
 	const runtime = getAdminRuntime();
 	const customRowLabel = $derived(runtime.rowLabels.resolve(field));
+	const blockTypes = $derived(
+		new Map(resolveBlockTypes(field.blocks).map((block) => [block.slug, block]))
+	);
 	const rows = $derived((form.get(field.path) as Record<string, unknown>[] | undefined) ?? []);
 	const issues = $derived(form.issuesFor(field.path).filter((issue) => issue.path === field.path));
 	const controlARIA = $derived(
@@ -226,6 +231,15 @@
 	}
 
 	function rowLabel(row: Record<string, unknown>, index: number) {
+		const block = blockTypes.get(String(row.blockType));
+		if (field.type === "blocks" && block?.admin?.nameField !== undefined) {
+			const path = `${field.path}.${index}`;
+			return (
+				blockHeaderValue(form, block, path, block.admin.nameField) ||
+				blockHeaderValue(form, block, path, block.admin.rowLabel) ||
+				runtime.i18n.t("fields:untitled", { label: block.labels.singular })
+			);
+		}
 		const key =
 			field.type === "blocks"
 				? resolveBlockTypes(field.blocks).find((block) => block.slug === row.blockType)?.admin
@@ -297,7 +311,22 @@
 
 	function fieldsForRow(row: Record<string, unknown>, index: number) {
 		const rowKey = String(row._key);
-		return fieldsFor(row).map((child) => rowField(child, index, rowKey));
+		const nameField = blockTypes.get(String(row.blockType))?.admin?.nameField;
+		return fieldsFor(row)
+			.filter((child) => child.name !== nameField)
+			.map((child) => rowField(child, index, rowKey));
+	}
+
+	function rowLabelSnapshot(row: Record<string, unknown>, index: number) {
+		const block = blockTypes.get(String(row.blockType));
+		if (block?.admin?.nameField === undefined) return immutableRowLabelSnapshot(row);
+		const visible = { ...row };
+		for (const name of [block.admin.nameField, block.admin.rowLabel]) {
+			const child = block.fields.find((field) => field.name === name);
+			if (child !== undefined && !visibleBlockChild(form, rowField(child, index, String(row._key))))
+				delete visible[child.name];
+		}
+		return immutableRowLabelSnapshot(visible);
 	}
 
 	function reorder(event: Parameters<DragDropEvents["dragend"]>[0]) {
@@ -416,7 +445,8 @@
 					{const rowKey = String(row._key)}
 					{const rowCollapsed = $derived(collapsed.has(rowKey))}
 					{const rowIssues = $derived(form.issuesFor(`${field.path}.${index}`))}
-					{const rowSnapshot = $derived(immutableRowLabelSnapshot(row))}
+					{const rowSnapshot = $derived(rowLabelSnapshot(row, index))}
+					{const block = $derived(blockTypes.get(String(row.blockType)))}
 					<SortableRow id={String(row._key)} {index} disabled={editingBlocked}>
 						{#snippet children(sortable)}
 							<div class="flex min-h-10 items-center justify-between gap-2 bg-control px-3 py-2">
@@ -447,10 +477,19 @@
 										>
 											{blockLabel(row)}
 										</span>{/if}
-									<div class="min-w-0 flex-1 truncate">
-										{#if customRowLabel === undefined}
+									<div class="min-w-0 flex-1">
+										{#if block?.admin?.nameField !== undefined}
+											<BlockHeader
+												{block}
+												path={`${field.path}.${index}`}
+												instance={rowKey}
+												{form}
+												readOnly={editingBlocked}
+											/>
+										{:else if customRowLabel === undefined}
 											{visibleRowLabel(row, index)}
-										{:else}
+										{/if}
+										{#if customRowLabel !== undefined}
 											<customRowLabel.component
 												{field}
 												row={rowSnapshot}