@riducms/admin 0.1.5 → 0.2.0

package/src/fields/field-clipboard.ts

@@ -1,3 +1,5 @@
+import { resolveBlockTypes } from "@riducms/protocol";
+import { transformEmbeddedPayloads } from "@admin/core/forms/embedded-fields";
 import type { SchemaField } from "@riducms/protocol";
 
 export type FieldClipboardKind = "field" | "row";
@@ -61,7 +63,7 @@ export function compatibleClipboardValue(
 		payload.signature !== fieldClipboardSignature(field)
 	)
 		return undefined;
-	return cloneForPaste(payload.value);
+	return cloneFieldForPaste(field, payload.value, kind);
 }
 
 export async function writeFieldClipboard(payload: FieldClipboardPayload) {
@@ -88,15 +90,49 @@ export async function readFieldClipboard() {
 	return memoryClipboard;
 }
 
-function cloneForPaste(value: unknown): unknown {
-	if (Array.isArray(value)) return value.map(cloneForPaste);
-	if (value === null || typeof value !== "object") return value;
-	return Object.fromEntries(
-		Object.entries(value).map(([name, nested]) => [
-			name,
-			name === "_key" ? crypto.randomUUID() : cloneForPaste(nested),
-		])
-	);
+/** Clone owned repeating rows and declared payloads; arbitrary JSON retains its identity semantics. */
+export function cloneFieldForPaste(
+	field: SchemaField,
+	value: unknown,
+	kind: FieldClipboardKind = "field"
+): unknown {
+	function row(input: unknown): unknown {
+		if (input === null || typeof input !== "object" || Array.isArray(input))
+			return cloneJSON(input);
+		const source = input as Record<string, unknown>;
+		const children =
+			field.type === "blocks"
+				? (resolveBlockTypes(field.blocks).find((block) => block.slug === source.blockType)
+						?.fields ?? [])
+				: (field.nested?.fields ?? []);
+		return { ...record(children, source), _key: crypto.randomUUID() };
+	}
+	if (kind === "row") return row(value);
+	if ((field.type === "array" || field.type === "blocks") && Array.isArray(value))
+		return value.map(row);
+	if (
+		field.type === "group" &&
+		value !== null &&
+		typeof value === "object" &&
+		!Array.isArray(value)
+	) {
+		return record(field.nested?.fields ?? [], value as Record<string, unknown>);
+	}
+	if (field.type === "plugin")
+		return transformEmbeddedPayloads(field, cloneJSON(value), field.path, (occurrence) => ({
+			...record(occurrence.block.fields, occurrence.payload),
+			[occurrence.case.identity]: crypto.randomUUID(),
+		}));
+	return cloneJSON(value);
+}
+
+function record(fields: readonly SchemaField[], source: Record<string, unknown>) {
+	const copy = cloneJSON(source) as Record<string, unknown>;
+	for (const field of fields) {
+		if (Object.hasOwn(source, field.name))
+			copy[field.name] = cloneFieldForPaste(field, source[field.name]);
+	}
+	return copy;
 }
 
 function cloneJSON(value: unknown) {
@@ -107,7 +143,7 @@ function fieldShape(field: SchemaField): unknown {
 	return {
 		type: field.type,
 		category: field.category,
-		select: field.select?.choices.map((choice) => choice.value),
+		select: field.select?.options.map((option) => option.value),
 		relationship: field.relationship && {
 			collection: field.relationship.collectionSlug,
 			targets: field.relationship.targets?.map((target) => target.collectionSlug),
@@ -123,10 +159,34 @@ function fieldShape(field: SchemaField): unknown {
 			maxRows: field.nested.maxRows ?? 0,
 			fields: field.nested.fields.map((child) => ({ name: child.name, shape: fieldShape(child) })),
 		},
-		blocks: field.blocks?.types.map((block) => ({
-			key: block.key,
-			fields: block.fields.map((child) => ({ name: child.name, shape: fieldShape(child) })),
-		})),
-		plugin: field.plugin && { key: field.plugin.key, config: field.plugin.config },
+		blocks: field.blocks && {
+			minRows: field.blocks.minRows ?? 0,
+			maxRows: field.blocks.maxRows ?? 0,
+			types: resolveBlockTypes(field.blocks).map((block) => ({
+				key: block.slug,
+				fields: block.fields.map((child) => ({ name: child.name, shape: fieldShape(child) })),
+			})),
+		},
+		plugin: field.plugin && {
+			key: field.plugin.key,
+			config: field.plugin.config,
+			embeddedTrees: field.plugin.embeddedTrees?.map((tree) => ({
+				version: tree.version,
+				key: tree.key,
+				root: tree.root,
+				children: tree.children,
+				tag: tree.tag,
+				cases: tree.cases.map((branch) => ({
+					tagValue: branch.tagValue,
+					payload: branch.payload,
+					discriminator: branch.discriminator,
+					identity: branch.identity,
+					types: resolveBlockTypes(branch).map((block) => ({
+						key: block.slug,
+						fields: block.fields.map((child) => ({ name: child.name, shape: fieldShape(child) })),
+					})),
+				})),
+			})),
+		},
 	};
 }

package/src/fields/field-collapsible.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { SchemaField } from "@riducms/protocol";
+	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { fieldIssueRevealEvent } from "@admin/core/forms/field-issue-focus";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import FieldRenderer from "@admin/fields/field-renderer.svelte";
+
+	let {
+		fields,
+		form,
+		collapsible,
+	}: {
+		fields: readonly SchemaField[];
+		form: FormController;
+		collapsible: NonNullable<SchemaField["admin"]["collapsible"]>;
+	} = $props();
+	const runtime = getAdminRuntime();
+	// The disclosure's identity belongs to its keyed layout group.
+	// svelte-ignore state_referenced_locally
+	let open = $state(!collapsible.initiallyCollapsed);
+	function reveal(element: HTMLElement) {
+		const show = () => {
+			open = true;
+		};
+		element.addEventListener(fieldIssueRevealEvent, show);
+		return () => element.removeEventListener(fieldIssueRevealEvent, show);
+	}
+</script>
+
+<details
+	bind:open
+	{@attach reveal}
+	class="col-span-1 rounded-[4px] border border-control-border bg-background sm:col-span-12"
+	data-field-collapsible={collapsible.id}
+>
+	<summary class="cursor-pointer px-5 py-4 text-[13.5px] font-medium text-foreground">
+		{runtime.i18n.text(collapsible.label, collapsible.labelTranslations)}
+	</summary>
+	{#if open}
+		<div
+			class="grid grid-cols-1 gap-x-4 gap-y-6 border-t border-control-border p-5 sm:grid-cols-12"
+		>
+			{#each fields as field (field.id)}<FieldRenderer {field} {form} />{/each}
+		</div>
+	{:else}
+		<!-- Addressable boundaries reveal the disclosure before mounting/focusing a field. -->
+		{#each fields as field (field.id)}<span hidden data-field-path={field.path}></span>{/each}
+	{/if}
+</details>

package/src/fields/field-layout.svelte

@@ -2,10 +2,10 @@
 	import type { SchemaField } from "@riducms/protocol";
 
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
-	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 	import FieldRenderer from "@admin/fields/field-renderer.svelte";
 	import { createFieldLayout } from "@admin/fields/field-layout";
 	import FieldTabLayout from "@admin/fields/field-tab-layout.svelte";
+	import FieldCollapsible from "@admin/fields/field-collapsible.svelte";
 
 	let {
 		fields,
@@ -16,7 +16,6 @@
 		form: FormController;
 		suppressedTabGroupID?: string;
 	} = $props();
-	const runtime = getAdminRuntime();
 </script>
 
 {#snippet fieldGrid(tabFields: readonly SchemaField[])}
@@ -25,22 +24,7 @@
 			{#if group.tabGroup !== undefined}
 				<FieldTabLayout fields={group.fields} {form} tabGroup={group.tabGroup} />
 			{:else if group.collapsible !== undefined}
-				<details
-					class="col-span-1 rounded-[4px] border border-control-border bg-background sm:col-span-12"
-					open={!group.collapsible.initiallyCollapsed}
-					data-field-collapsible={group.collapsible.id}
-				>
-					<summary class="cursor-pointer px-5 py-4 text-[13.5px] font-medium text-foreground">
-						{runtime.i18n.text(group.collapsible.label, group.collapsible.labelTranslations)}
-					</summary>
-					<div
-						class="grid grid-cols-1 gap-x-4 gap-y-6 border-t border-control-border p-5 sm:grid-cols-12"
-					>
-						{#each group.fields as field (field.id)}
-							<FieldRenderer {field} {form} />
-						{/each}
-					</div>
-				</details>
+				<FieldCollapsible fields={group.fields} {form} collapsible={group.collapsible} />
 			{:else if group.row !== undefined}
 				<div
 					class="col-span-1 grid grid-cols-1 gap-x-4 gap-y-6 sm:col-span-12 sm:grid-cols-12"

package/src/fields/field-messages.svelte

@@ -1,29 +1,24 @@
 <script lang="ts">
 	import type { ValidationIssue } from "@riducms/protocol";
-	import CircleAlertIcon from "~icons/lucide/circle-alert";
+	import { FieldFeedback } from "@riducms/ui";
+	import type { Snippet } from "svelte";
 
 	let {
-		id,
+		controlID,
 		issues = [],
 		description,
 		class: className,
+		children,
 	}: {
-		id: string;
-		issues?: readonly ValidationIssue[];
-		description?: string;
-		class?: string;
+		controlID: string;
+		issues?: readonly ValidationIssue[] | undefined;
+		description?: string | undefined;
+		class?: string | undefined;
+		children: Snippet;
 	} = $props();
+	const errors = $derived(issues.map((issue) => issue.message));
 </script>
 
-{#if issues.length > 0}
-	<div {id} class={["flex items-start gap-1.5", className]} role="alert" aria-atomic="true">
-		<CircleAlertIcon class="mt-0.5 size-3.5 shrink-0 text-destructive" aria-hidden="true" />
-		<ul class="grid gap-0.5">
-			{#each issues as issue (`${issue.path}:${issue.code}:${issue.message}`)}
-				<li class="ridu-field-error">{issue.message}</li>
-			{/each}
-		</ul>
-	</div>
-{:else if description !== undefined}
-	<p {id} class={["ridu-field-help", className]}>{description}</p>
-{/if}
+<FieldFeedback {controlID} {description} {errors} class={className}>
+	{@render children()}
+</FieldFeedback>

package/src/fields/field-renderer.svelte

@@ -13,6 +13,8 @@
 		withContentLocaleLabel,
 	} from "@admin/fields/localized-field-presentation";
 
+	import PluginField from "@admin/fields/plugin-field.svelte";
+	import LocalFieldEditor from "@admin/fields/local-field-editor.svelte";
 	import SelectField from "@admin/fields/select/select-field.svelte";
 	import RadioField from "@admin/fields/radio/radio-field.svelte";
 	import PointField from "@admin/fields/point/point-field.svelte";
@@ -22,7 +24,9 @@
 	import ScalarField from "@admin/fields/scalar/scalar-field.svelte";
 	import NestedField from "@admin/fields/nested/nested-field.svelte";
 	import RelationshipField from "@admin/fields/relationship/relationship-field.svelte";
+	import PrimitiveListField from "@admin/fields/primitive-list/primitive-list-field.svelte";
 	import TextField from "@admin/fields/text/text-field.svelte";
+	import LiveValidationFeedback from "@admin/fields/live-validation-feedback.svelte";
 
 	interface Props {
 		field: SchemaField;
@@ -48,15 +52,13 @@
 		referenceBrowser: ReferenceBrowser,
 		findDocument: (collection, id, signal) =>
 			runtime.client.find(collection, id, { signal, locale: form.contentLocale }),
-		async requestPlugin<Result>(path: string, body: unknown, signal?: AbortSignal) {
-			const owner = field.admin.component?.plugin ?? field.plugin?.key;
-			if (owner === undefined) {
-				throw new Error("This field renderer does not have an owning plugin");
-			}
-			return runtime.client.requestPlugin<Result>(owner, path, body, { signal });
-		},
 	};
-	const plugin = $derived(runtime.fields.resolve(field));
+	const editor = $derived(
+		field.admin.editor === undefined
+			? undefined
+			: runtime.editors[field.admin.editor.reference as `app:${string}`]
+	);
+	const plugin = $derived(editor === undefined ? runtime.fields.resolve(field) : undefined);
 	const accessPath = $derived(fieldAccessPath(field));
 	const visible = $derived(
 		field.admin.hidden !== true &&
@@ -65,7 +67,7 @@
 				evaluateFieldCondition(field.admin.condition, field.path, (path) => form.get(path)))
 	);
 	const renderedField = $derived(
-		field.type === "join" || field.admin.readOnly || form.canWrite(field.path, accessPath)
+		field.admin.readOnly || form.canWrite(field.path, accessPath)
 			? field
 			: { ...field, admin: { ...field.admin, readOnly: true } }
 	);
@@ -101,11 +103,12 @@
 	);
 
 	function renderField() {
-		if (plugin.component !== undefined) return plugin.component;
-
-		switch (plugin.type) {
+		switch (plugin?.type) {
 			case "text":
 				return TextField;
+			case "text-list":
+			case "number-list":
+				return PrimitiveListField;
 			case "select":
 				return SelectField;
 			case "radio":
@@ -131,9 +134,45 @@
 	}
 </script>
 
-{#if visible}<div class={columnClass}>
+{#if visible}<div
+		class={columnClass}
+		data-live-validation-field={field.path}
+		onfocusout={(event) => {
+			if (
+				event.target instanceof Element &&
+				event.target.closest("[data-live-validation-field]") === event.currentTarget &&
+				!(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))
+			)
+				form.liveValidation.flush(field.path);
+		}}
+	>
 		{const RenderField = $derived(renderField())}
-		<RenderField field={presentedField} {form} {authoring} i18n={runtime.i18n} />
+		{#if editor !== undefined}
+			{#key form}
+				{#key `${form.editorEpoch}:${runtime.manifestRevision}:${field.id}`}
+					<LocalFieldEditor
+						schema={presentedField}
+						{form}
+						{editor}
+						{authoring}
+						i18n={runtime.i18n}
+					/>
+				{/key}
+			{/key}
+		{:else if plugin?.extension !== undefined}
+			{#key form}
+				{#key `${form.editorEpoch}:${runtime.manifestRevision}:${field.id}`}
+					<PluginField schema={presentedField} {form} extension={plugin.extension} />
+				{/key}
+			{/key}
+		{:else}
+			<RenderField field={presentedField} {form} {authoring} />
+		{/if}
+		<LiveValidationFeedback
+			feedback={form.liveValidation.forField(field.path)}
+			i18n={runtime.i18n}
+			path={field.path}
+		/>
 		{#if inheritedFrom !== undefined}<p
 				class="mt-1 font-mono text-[10px] text-foreground-faint"
 				data-localization-source={inheritedFrom}

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

@@ -158,6 +158,7 @@
 		sourceID !== undefined && field.join?.allowCreate !== false && targetOperations?.create === true
 	);
 	const canManage = $derived(!field.admin.readOnly && (canAttach || canCreate));
+	const editingBlocked = $derived(form.editingBlocked);
 	let browserOpen = $state(false);
 	let pending = $state(false);
 	let mutationError = $state<string>();
@@ -179,6 +180,7 @@
 	}
 
 	async function commit(ids: string[]) {
+		if (editingBlocked) return false;
 		const source = form.resource;
 		if (
 			source?.id === undefined ||
@@ -270,7 +272,12 @@
 				})}
 			</p>
 			{#if canManage}
-				<Button variant="outline" size="sm" disabled={pending} onclick={() => (browserOpen = true)}>
+				<Button
+					variant="outline"
+					size="sm"
+					disabled={pending || editingBlocked}
+					onclick={() => (browserOpen = true)}
+				>
 					<ListPlusIcon class="size-3" />
 					{runtime.i18n.t(pending ? "fields:updating" : "fields:manageRelationships")}
 				</Button>

package/src/fields/live-validation-feedback.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { AdminI18n, FieldLiveValidation } from "@riducms/plugin";
+	import { Button } from "@riducms/ui";
+	let { feedback, i18n, path }: { feedback: FieldLiveValidation; i18n: AdminI18n; path: string } =
+		$props();
+</script>
+
+<div data-live-validation={feedback.status} data-live-validation-path={path} aria-live="polite">
+	{#if feedback.status === "pending"}
+		<p class="mt-1 text-xs text-muted-foreground">{i18n.t("fields:liveValidationPending")}</p>
+	{:else if feedback.status === "failed"}
+		<div class="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+			<p>{i18n.t("fields:liveValidationFailed")}</p>
+			<Button variant="ghost" size="sm" onclick={feedback.retry}>
+				{i18n.t("fields:liveValidationRetry")}
+			</Button>
+		</div>
+	{:else if feedback.status === "skipped"}
+		<p class="mt-1 text-xs text-muted-foreground">{i18n.t("fields:liveValidationSkipped")}</p>
+	{/if}
+</div>

package/src/fields/local-field-editor.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { onDestroy, type Component } from "svelte";
+	import type { SchemaField } from "@riducms/protocol";
+	import type { FieldAuthoringHost, AdminI18n } from "@riducms/plugin";
+	import type { FieldEditorProps, RegisteredFieldEditor } from "@riducms/plugin/editor";
+	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { FieldEditorBinding } from "@admin/core/forms/field-editor-binding";
+	import { guardEditorAuthoring } from "@admin/core/forms/field-editor-authoring";
+
+	let {
+		schema,
+		form,
+		editor,
+		authoring,
+		i18n,
+	}: {
+		schema: SchemaField;
+		form: FormController;
+		editor: RegisteredFieldEditor;
+		authoring: FieldAuthoringHost;
+		i18n: AdminI18n;
+	} = $props();
+	const runtime = getAdminRuntime();
+	// Parent keys this host by form, lifetime epoch, manifest revision and occurrence ID.
+	// Each capability belongs to this mount; reordering only updates the schema getter.
+	// svelte-ignore state_referenced_locally
+	const config = editor.decode(schema);
+	// Registration correlates props; decode above validates this manifest selection.
+	// Keep this erasure at the host boundary so registrations cannot retype components.
+	// svelte-ignore state_referenced_locally
+	const Editor = editor.component as Component<
+		Omit<FieldEditorProps<RegisteredFieldEditor["type"], unknown>, "config"> & { config?: unknown }
+	>;
+	// svelte-ignore state_referenced_locally
+	const field = new FieldEditorBinding(
+		form,
+		() => schema,
+		editor.type,
+		() => runtime.manifestRevision
+	);
+	const guardedAuthoring = guardEditorAuthoring(() => authoring, field.assertActive);
+	onDestroy(field.destroy);
+</script>
+
+<Editor
+	{field}
+	{...config === undefined ? {} : { config }}
+	form={field.form}
+	authoring={guardedAuthoring}
+	{i18n}
+/>