@riducms/admin 0.2.3 → 0.4.0

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

@@ -1,24 +1,16 @@
 <script lang="ts">
+	import { isSortable } from "@dnd-kit-svelte/svelte/sortable";
 	import { resolveBlockTypes } from "@riducms/protocol";
 
 	import type { SchemaField } from "@riducms/protocol";
-	import { fieldControlARIA } from "@riducms/ui";
+	import { fieldControlARIA, Button, buttonVariants } from "@riducms/ui";
 	import { DragDropProvider, type DragDropEvents } from "@dnd-kit-svelte/svelte";
 	import ChevronDownIcon from "~icons/lucide/chevron-down";
 	import CirclePlusIcon from "~icons/lucide/circle-plus";
 	import EllipsisIcon from "~icons/lucide/ellipsis";
 	import GripVerticalIcon from "~icons/lucide/grip-vertical";
-	import LayoutTemplateIcon from "~icons/lucide/layout-template";
-	import SearchIcon from "~icons/lucide/search";
 
-	import { Button, buttonVariants } from "@admin/components/ui/button";
-	import {
-		Dialog,
-		DialogContent,
-		DialogDescription,
-		DialogHeader,
-		DialogTitle,
-	} from "@admin/components/ui/dialog";
+	import BlockPicker from "@admin/fields/nested/block-picker.svelte";
 	import {
 		DropdownMenu,
 		DropdownMenuContent,
@@ -26,8 +18,9 @@
 		DropdownMenuSeparator,
 		DropdownMenuTrigger,
 	} from "@admin/components/ui/dropdown-menu";
-	import { Input } from "@admin/components/ui/input";
+
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { FieldBindingLifetime } from "@admin/core/forms/field-binding-lifetime";
 	import { initialFormValues } from "@admin/core/forms/form-schema";
 	import { immutableRowLabelSnapshot } from "@admin/core/plugins/row-label-registry";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
@@ -42,6 +35,7 @@
 		writeFieldClipboard,
 	} from "@admin/fields/field-clipboard";
 	import { scopeRepeatedRowField } from "@admin/fields/nested/scoped-field";
+	import "@admin/fields/nested/nested-field.scss";
 	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";
@@ -49,11 +43,11 @@
 	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 blocks = $derived(resolveBlockTypes(field.blocks));
+	const blockTypes = $derived(new Map(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 allIssues = $derived(form.issuesFor(field.path));
+	const issues = $derived(allIssues.filter((issue) => issue.path === field.path));
 	const controlARIA = $derived(
 		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
 	);
@@ -64,31 +58,22 @@
 		(field.type === "blocks" ? field.blocks?.maxRows : field.nested?.maxRows) ?? 0
 	);
 	const unknownRows = $derived(
-		field.type === "blocks" &&
-			rows.some(
-				(row) => !resolveBlockTypes(field.blocks).some((block) => block.slug === row.blockType)
-			)
+		field.type === "blocks" && rows.some((row) => !blockTypes.has(String(row.blockType)))
 	);
 	const readOnly = $derived(field.admin.readOnly === true || unknownRows);
 	const editingBlocked = $derived(readOnly || form.editingBlocked);
 	const canAdd = $derived(!editingBlocked && (maxRows === 0 || rows.length < maxRows));
-	let collapsed = $state(new Set<string>());
+	// Only the row-error click handler reads this DOM binding.
+	// svelte-ignore non_reactive_update
+	let repeatedRoot: HTMLElement;
+	let collapsed = $state.raw(new Set<string>());
 	let clipboardMessage = $state("");
 	let blockPickerOpen = $state(false);
-	let blockQuery = $state("");
 	let insertAfter = $state<string>();
-	const visibleBlockTypes = $derived(
-		(resolveBlockTypes(field.blocks) ?? []).filter((block) =>
-			block.labels.singular
-				.toLocaleLowerCase(runtime.i18n.language)
-				.includes(blockQuery.trim().toLocaleLowerCase(runtime.i18n.language))
-		)
-	);
 
 	function changeBlockPickerOpen(open: boolean) {
 		blockPickerOpen = open;
 		if (!open) {
-			blockQuery = "";
 			insertAfter = undefined;
 		}
 	}
@@ -102,11 +87,28 @@
 	}
 
 	const inheritedFields = $derived((field.nested?.fields ?? []).map(inheritedField));
+	// A clipboard permission prompt may outlive the editor or its current field occurrence.
+	const pendingPastes = new Set<FieldBindingLifetime>();
+	$effect(() => () => {
+		for (const paste of pendingPastes) paste.destroy();
+		pendingPastes.clear();
+	});
+
+	function beginPaste(owner: FormController) {
+		const lifetime = new FieldBindingLifetime(
+			owner,
+			() => field,
+			() => runtime.manifestRevision
+		);
+		pendingPastes.add(lifetime);
+		lifetime.onDestroy(() => pendingPastes.delete(lifetime));
+		return lifetime;
+	}
 
 	function createRow(blockType?: string) {
 		const children =
 			field.type === "blocks"
-				? (resolveBlockTypes(field.blocks).find((block) => block.slug === blockType)?.fields ?? [])
+				? (blockTypes.get(blockType ?? "")?.fields ?? [])
 				: (field.nested?.fields ?? []);
 		return {
 			...initialFormValues(children),
@@ -130,7 +132,6 @@
 		updateRows(next);
 		insertAfter = undefined;
 		blockPickerOpen = false;
-		blockQuery = "";
 	}
 
 	function addBelow(index: number) {
@@ -152,40 +153,54 @@
 
 	async function pasteField() {
 		if (editingBlocked) return;
-		const value = compatibleClipboardValue(await readFieldClipboard(), field, "field");
-		if (value === undefined) {
-			clipboardMessage = runtime.i18n.t("errors:clipboardField");
-			return;
-		}
-		if ((field.type === "array" || field.type === "blocks") && !Array.isArray(value)) {
-			clipboardMessage = runtime.i18n.t("errors:clipboardRows");
-			return;
-		}
-		if (
-			field.type === "group" &&
-			(value === null || typeof value !== "object" || Array.isArray(value))
-		) {
-			clipboardMessage = runtime.i18n.t("errors:clipboardGroup");
-			return;
-		}
-		if (Array.isArray(value) && value.length < minRows) {
-			clipboardMessage = runtime.i18n.t("errors:clipboardMinRows", { count: minRows });
-			return;
-		}
-		if (Array.isArray(value) && maxRows > 0 && value.length > maxRows) {
-			clipboardMessage = runtime.i18n.t("errors:clipboardMaxRows", { count: maxRows });
-			return;
+		const owner = form;
+		const lifetime = beginPaste(owner);
+		try {
+			const payload = await readFieldClipboard();
+			if (form !== owner || lifetime.readOnly || editingBlocked) return;
+			const target = lifetime.schema;
+			const value = compatibleClipboardValue(payload, target, "field");
+			if (value === undefined) {
+				clipboardMessage = runtime.i18n.t("errors:clipboardField");
+				return;
+			}
+			if ((target.type === "array" || target.type === "blocks") && !Array.isArray(value)) {
+				clipboardMessage = runtime.i18n.t("errors:clipboardRows");
+				return;
+			}
+			if (
+				target.type === "group" &&
+				(value === null || typeof value !== "object" || Array.isArray(value))
+			) {
+				clipboardMessage = runtime.i18n.t("errors:clipboardGroup");
+				return;
+			}
+			const minimum =
+				(target.type === "blocks" ? target.blocks?.minRows : target.nested?.minRows) ?? 0;
+			const maximum =
+				(target.type === "blocks" ? target.blocks?.maxRows : target.nested?.maxRows) ?? 0;
+			if (Array.isArray(value) && value.length < minimum) {
+				clipboardMessage = runtime.i18n.t("errors:clipboardMinRows", { count: minimum });
+				return;
+			}
+			if (Array.isArray(value) && maximum > 0 && value.length > maximum) {
+				clipboardMessage = runtime.i18n.t("errors:clipboardMaxRows", { count: maximum });
+				return;
+			}
+			const pasted = Array.isArray(value)
+				? value.map((row) =>
+						row !== null && typeof row === "object" && !Array.isArray(row)
+							? { ...row, _key: crypto.randomUUID() }
+							: row
+					)
+				: value;
+			if (Array.isArray(pasted)) owner.setRows(target.path, pasted as Record<string, unknown>[]);
+			else owner.set(target.path, pasted);
+			clipboardMessage = runtime.i18n.t("fields:pasted", { label: target.admin.label });
+		} finally {
+			pendingPastes.delete(lifetime);
+			lifetime.destroy();
 		}
-		const pasted = Array.isArray(value)
-			? value.map((row) =>
-					row !== null && typeof row === "object" && !Array.isArray(row)
-						? { ...row, _key: crypto.randomUUID() }
-						: row
-				)
-			: value;
-		if (Array.isArray(pasted)) updateRows(pasted as Record<string, unknown>[]);
-		else form.set(field.path, pasted);
-		clipboardMessage = runtime.i18n.t("fields:pasted", { label: field.admin.label });
 	}
 
 	async function copyRow(index: number) {
@@ -197,24 +212,52 @@
 
 	async function pasteRow(index: number) {
 		if (editingBlocked || !canAdd) return;
-		const value = compatibleClipboardValue(await readFieldClipboard(), field, "row");
-		if (value === null || typeof value !== "object" || Array.isArray(value)) {
-			clipboardMessage = runtime.i18n.t("errors:clipboardRow");
-			return;
-		}
-		const row = value as Record<string, unknown>;
-		row._key = crypto.randomUUID();
-		if (
-			field.type === "blocks" &&
-			!resolveBlockTypes(field.blocks).some((block) => block.slug === row.blockType)
-		) {
-			clipboardMessage = runtime.i18n.t("errors:clipboardBlockType");
-			return;
+		const anchor = rows[index];
+		if (anchor === undefined) return;
+		const owner = form;
+		const anchorKey = anchor._key;
+		const anchorVariant = anchor.blockType;
+		// Removing a row revokes this paste even if another row later reuses its serialized key.
+		const anchorMount = owner.rowMountKey(anchor);
+		const lifetime = beginPaste(owner);
+		try {
+			const payload = await readFieldClipboard();
+			if (form !== owner || lifetime.readOnly || editingBlocked) return;
+			const target = lifetime.schema;
+			const currentRows = (owner.get(target.path) as Record<string, unknown>[] | undefined) ?? [];
+			const currentIndex = currentRows.findIndex(
+				(row) =>
+					row._key === anchorKey &&
+					row.blockType === anchorVariant &&
+					owner.rowMountKey(row) === anchorMount
+			);
+			const maximum =
+				(target.type === "blocks" ? target.blocks?.maxRows : target.nested?.maxRows) ?? 0;
+			if (currentIndex < 0 || (maximum > 0 && currentRows.length >= maximum)) return;
+			const value = compatibleClipboardValue(payload, target, "row");
+			if (value === null || typeof value !== "object" || Array.isArray(value)) {
+				clipboardMessage = runtime.i18n.t("errors:clipboardRow");
+				return;
+			}
+			const row = value as Record<string, unknown>;
+			row._key = crypto.randomUUID();
+			if (
+				target.type === "blocks" &&
+				!resolveBlockTypes(target.blocks).some((block) => block.slug === row.blockType)
+			) {
+				clipboardMessage = runtime.i18n.t("errors:clipboardBlockType");
+				return;
+			}
+			const next = [...currentRows];
+			next.splice(currentIndex + 1, 0, row);
+			owner.setRows(target.path, next);
+			clipboardMessage = runtime.i18n.t("fields:pasted", {
+				label: rowLabel(row, currentIndex + 1),
+			});
+		} finally {
+			pendingPastes.delete(lifetime);
+			lifetime.destroy();
 		}
-		const next = [...rows];
-		next.splice(index + 1, 0, row);
-		updateRows(next);
-		clipboardMessage = runtime.i18n.t("fields:pasted", { label: rowLabel(row, index + 1) });
 	}
 
 	function updateRows(next: Record<string, unknown>[]) {
@@ -230,6 +273,10 @@
 		updateRows(next);
 	}
 
+	function errorCount(count: number) {
+		return runtime.i18n.t(count === 1 ? "fields:rowError" : "fields:rowErrors", { count });
+	}
+
 	function rowLabel(row: Record<string, unknown>, index: number) {
 		const block = blockTypes.get(String(row.blockType));
 		if (field.type === "blocks" && block?.admin?.nameField !== undefined) {
@@ -240,16 +287,15 @@
 				runtime.i18n.t("fields:untitled", { label: block.labels.singular })
 			);
 		}
-		const key =
-			field.type === "blocks"
-				? resolveBlockTypes(field.blocks).find((block) => block.slug === row.blockType)?.admin
-						?.rowLabel
-				: field.nested?.rowLabel;
+		const key = field.type === "blocks" ? block?.admin?.rowLabel : field.nested?.rowLabel;
 		const configured = key === undefined ? undefined : row[key];
 		if (configured !== undefined && configured !== null && String(configured).trim() !== "") {
 			return String(configured);
 		}
-		const number = runtime.i18n.formatNumber(index + 1);
+		const number = runtime.i18n.formatNumber(index + 1, {
+			minimumIntegerDigits: 2,
+			useGrouping: false,
+		});
 		return field.nested?.rowLabels?.singular === undefined
 			? runtime.i18n.t("fields:rowNumber", { number })
 			: runtime.i18n.t("fields:labeledRowNumber", {
@@ -260,8 +306,7 @@
 
 	function visibleRowLabel(row: Record<string, unknown>, index: number) {
 		if (field.type !== "blocks") return rowLabel(row, index);
-		const key = resolveBlockTypes(field.blocks).find((block) => block.slug === row.blockType)?.admin
-			?.rowLabel;
+		const key = blockTypes.get(String(row.blockType))?.admin?.rowLabel;
 		const configured = key === undefined ? undefined : row[key];
 		return configured === undefined || configured === null || String(configured).trim() === ""
 			? runtime.i18n.t("fields:untitled", {
@@ -273,8 +318,8 @@
 	function blockLabel(row: Record<string, unknown>) {
 		if (field.type !== "blocks") return undefined;
 		return (
-			resolveBlockTypes(field.blocks).find((block) => block.slug === row.blockType)?.labels
-				.singular ?? (typeof row.blockType === "string" ? row.blockType : undefined)
+			blockTypes.get(String(row.blockType))?.labels.singular ??
+			(typeof row.blockType === "string" ? row.blockType : undefined)
 		);
 	}
 
@@ -304,9 +349,7 @@
 
 	function fieldsFor(row: Record<string, unknown>) {
 		if (field.type !== "blocks") return field.nested?.fields ?? [];
-		return (
-			resolveBlockTypes(field.blocks).find((block) => block.slug === row.blockType)?.fields ?? []
-		);
+		return blockTypes.get(String(row.blockType))?.fields ?? [];
 	}
 
 	function fieldsForRow(row: Record<string, unknown>, index: number) {
@@ -330,12 +373,11 @@
 	}
 
 	function reorder(event: Parameters<DragDropEvents["dragend"]>[0]) {
-		if (editingBlocked) return;
-		const source = String(event.operation.source?.id ?? "");
-		const target = String(event.operation.target?.id ?? "");
-		const from = rows.findIndex((row) => row._key === source);
-		const to = rows.findIndex((row) => row._key === target);
-		if (event.canceled || from < 0 || to < 0 || from === to) return;
+		const source = event.operation.source;
+		if (event.canceled || editingBlocked || !source || !isSortable(source)) return;
+		const from = source.sortable.initialIndex;
+		const to = source.sortable.index;
+		if (from === to) return;
 		const next = [...rows];
 		const [moved] = next.splice(from, 1);
 		if (moved !== undefined) next.splice(to, 0, moved);
@@ -346,10 +388,10 @@
 {#snippet fieldActions()}
 	<DropdownMenu>
 		<DropdownMenuTrigger
-			class={buttonVariants({ variant: "ghost", size: "icon-xs" })}
+			class={[buttonVariants({ variant: "ghost", size: "icon-xs" }), "ridu-nested-actions-trigger"]}
 			aria-label={runtime.i18n.t("fields:openActions", { label: field.admin.label })}
 		>
-			<EllipsisIcon class="size-4" />
+			<EllipsisIcon />
 		</DropdownMenuTrigger>
 		<DropdownMenuContent>
 			<DropdownMenuItem onSelect={copyField}>
@@ -368,67 +410,82 @@
 	</div>
 {:else if field.type === "group"}
 	<section
-		class="grid gap-5"
+		class="ridu-group-field"
 		data-field-path={field.path}
 		data-invalid={issues.length > 0}
 		aria-labelledby={`${field.id}-label`}
 		{...controlARIA}
 	>
 		<FieldMessages controlID={field.id} {issues} description={field.admin.description}>
-			<div class="flex items-start justify-between gap-3 border-b border-control-border pb-2.5">
-				<div class="min-w-0">
-					<h2 id={`${field.id}-label`} class="text-[17px] font-medium text-foreground">
-						{field.admin.label}{#if field.required}<span
-								class="ridu-field-required"
-								aria-hidden="true"
-							>
-								*
-							</span>{/if}
+			<div class="ridu-group-field__header">
+				<div class="ridu-group-field__heading">
+					<h2 id={`${field.id}-label`} class="ridu-group-field__title">
+						{field.admin.label}
+						{#if field.required}
+							<span class="ridu-field-required" aria-hidden="true">*</span>
+						{/if}
 					</h2>
-					{#if field.admin.readOnly}<span class="ridu-field-status mt-1">
+					{#if field.admin.readOnly}
+						<span class="ridu-group-field__status ridu-field-status">
 							{runtime.i18n.t("fields:readOnly")}
-						</span>{/if}
+						</span>
+					{/if}
 				</div>
 				{@render fieldActions()}
 			</div>
 		</FieldMessages>
 		<FieldLayout fields={inheritedFields} {form} />
-		{#if clipboardMessage !== ""}<p
-				class="font-mono text-[10px] text-foreground-faint"
-				aria-live="polite"
-			>
+		{#if clipboardMessage !== ""}
+			<p class="ridu-nested-field__note" aria-live="polite">
 				{clipboardMessage}
-			</p>{/if}
+			</p>
+		{/if}
 	</section>
 {:else}
 	<section
-		class="grid gap-3"
+		bind:this={repeatedRoot}
+		class="ridu-repeated-field"
 		data-field-path={field.path}
-		data-invalid={issues.length > 0}
+		data-invalid={allIssues.length > 0}
 		aria-labelledby={`${field.id}-label`}
 		{...controlARIA}
 	>
 		<FieldMessages controlID={field.id} {issues} description={field.admin.description}>
-			<div class="flex flex-wrap items-end justify-between gap-3">
-				<div class="min-w-0">
-					<h2 id={`${field.id}-label`} class="text-[19px] leading-7 font-medium text-foreground">
-						{field.admin.label}{#if field.required}<span
-								class="ridu-field-required"
-								aria-hidden="true"
-							>
-								*
-							</span>{/if}
+			<div class="ridu-repeated-field__header">
+				<div class="ridu-repeated-field__heading-wrap">
+					<h2 id={`${field.id}-label`} class="ridu-repeated-field__heading">
+						{field.admin.label}
+						{#if field.required}
+							<span class="ridu-field-required" aria-hidden="true">*</span>
+						{/if}
+						{#if allIssues.length > 0}
+							<span class="ridu-error-count">
+								{errorCount(allIssues.length)}
+							</span>
+						{/if}
 					</h2>
-					{#if field.admin.readOnly}<span class="ridu-field-status mt-1">
+					{#if field.admin.readOnly}
+						<span class="ridu-repeated-field__status ridu-field-status">
 							{runtime.i18n.t("fields:readOnly")}
-						</span>{/if}
+						</span>
+					{/if}
 				</div>
-				<div class="flex items-center gap-1">
+				<div class="ridu-repeated-field__actions">
 					{#if rows.length > 0}
-						<Button size="xs" variant="ghost" class="px-1.5" onclick={collapseAll}>
+						<Button
+							size="xs"
+							variant="ghost"
+							class="ridu-repeated-field__header-action"
+							onclick={collapseAll}
+						>
 							{runtime.i18n.t("fields:collapseAll")}
 						</Button>
-						<Button size="xs" variant="ghost" class="px-1.5" onclick={showAll}>
+						<Button
+							size="xs"
+							variant="ghost"
+							class="ridu-repeated-field__header-action"
+							onclick={showAll}
+						>
 							{runtime.i18n.t("fields:showAll")}
 						</Button>
 					{/if}
@@ -436,48 +493,54 @@
 				</div>
 			</div>
 		</FieldMessages>
-		{#if unknownRows}<p role="alert" class="text-sm text-destructive">
+		{#if unknownRows}
+			<p role="alert" class="ridu-repeated-field__recovery">
 				{runtime.i18n.t("errors:unknownBlockRecovery")}
-			</p>{/if}
+			</p>
+		{/if}
 		<DragDropProvider onDragEnd={reorder}>
-			<div class="grid gap-3">
+			<div class="ridu-repeated-field__rows">
 				{#each rows as row, index (form.rowMountKey(row))}
 					{const rowKey = String(row._key)}
 					{const rowCollapsed = $derived(collapsed.has(rowKey))}
 					{const rowIssues = $derived(form.issuesFor(`${field.path}.${index}`))}
 					{const rowSnapshot = $derived(rowLabelSnapshot(row, index))}
 					{const block = $derived(blockTypes.get(String(row.blockType)))}
-					<SortableRow id={String(row._key)} {index} disabled={editingBlocked}>
+					<SortableRow
+						id={String(row._key)}
+						{index}
+						disabled={editingBlocked}
+						invalid={rowIssues.length > 0}
+					>
 						{#snippet children(sortable)}
-							<div class="flex min-h-10 items-center justify-between gap-2 bg-control px-3 py-2">
+							<div class="ridu-repeated-row__header">
 								<Button
 									variant="ghost"
 									size="icon-xs"
-									class="shrink-0 cursor-grab text-foreground-faint hover:bg-background hover:text-foreground active:cursor-grabbing"
+									class="ridu-repeated-row__drag"
 									aria-label={runtime.i18n.t("fields:drag", {
 										label: rowLabel(row, index),
 									})}
 									disabled={editingBlocked}
 									{@attach sortable.handleRef}
 								>
-									<GripVerticalIcon class="size-3.5 text-foreground-faint" />
+									<GripVerticalIcon />
 								</Button>
-								<div
-									id={`${field.id}-${rowKey}-row-label`}
-									class="flex min-w-0 flex-1 items-center gap-2 text-[12.5px] text-foreground-muted"
-								>
-									<span class="font-mono text-[10px] text-foreground-faint">
-										{runtime.i18n.formatNumber(index + 1, {
-											minimumIntegerDigits: 2,
-											useGrouping: false,
-										})}
-									</span>
-									{#if blockLabel(row) !== undefined}<span
-											class="rounded-[2px] bg-background px-1.5 py-0.5 text-[11px] text-foreground"
-										>
+								<div id={`${field.id}-${rowKey}-row-label`} class="ridu-repeated-row__heading">
+									{#if field.type === "blocks"}
+										<span class="ridu-repeated-row__number">
+											{runtime.i18n.formatNumber(index + 1, {
+												minimumIntegerDigits: 2,
+												useGrouping: false,
+											})}
+										</span>
+									{/if}
+									{#if blockLabel(row) !== undefined}
+										<span class="ridu-repeated-row__type">
 											{blockLabel(row)}
-										</span>{/if}
-									<div class="min-w-0 flex-1">
+										</span>
+									{/if}
+									<div class="ridu-repeated-row__label">
 										{#if block?.admin?.nameField !== undefined}
 											<BlockHeader
 												{block}
@@ -500,34 +563,42 @@
 													: { config: customRowLabel.config }}
 											/>
 										{/if}
+										{#if rowIssues.length > 0}
+											<button
+												type="button"
+												class="ridu-error-count"
+												aria-label={`${errorCount(rowIssues.length)}: ${rowIssues[0].message}`}
+												onclick={() =>
+													repeatedRoot && focusFieldIssue(rowIssues[0].path, repeatedRoot)}
+											>
+												{errorCount(rowIssues.length)}
+											</button>
+										{/if}
 									</div>
 								</div>
 								<button
 									type="button"
-									class="group shrink-0 rounded-[3px] p-1 text-foreground-faint outline-none hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/70"
+									class="ridu-repeated-row__toggle"
 									onclick={() => toggleCollapsed(rowKey)}
 									aria-label={runtime.i18n.t(rowCollapsed ? "fields:expand" : "fields:collapse")}
 									aria-describedby={`${field.id}-${rowKey}-row-label`}
 									aria-expanded={!rowCollapsed}
 									aria-controls={`${field.id}-${rowKey}-content`}
 								>
-									<ChevronDownIcon
-										class={[
-											"ms-auto size-3.5 shrink-0 text-foreground-faint transition-transform duration-200 motion-reduce:transition-none",
-											rowCollapsed &&
-												(runtime.i18n.direction === "rtl" ? "rotate-90" : "-rotate-90"),
-										]}
-									/>
+									<ChevronDownIcon />
 								</button>
-								<div class="flex items-center gap-0.5">
+								<div class="ridu-repeated-row__actions">
 									<DropdownMenu>
 										<DropdownMenuTrigger
-											class={buttonVariants({ variant: "ghost", size: "icon-xs" })}
+											class={[
+												buttonVariants({ variant: "ghost", size: "icon-xs" }),
+												"ridu-nested-actions-trigger",
+											]}
 											aria-label={runtime.i18n.t("fields:openActions", {
 												label: rowLabel(row, index),
 											})}
 										>
-											<EllipsisIcon class="size-4" />
+											<EllipsisIcon />
 										</DropdownMenuTrigger>
 										<DropdownMenuContent>
 											<DropdownMenuItem
@@ -574,7 +645,7 @@
 											</DropdownMenuItem>
 											<DropdownMenuSeparator />
 											<DropdownMenuItem
-												class="text-destructive data-[highlighted]:text-destructive"
+												class="ridu-repeated-row__remove-action"
 												disabled={editingBlocked ||
 													rows.length <= Math.max(minRows, field.required ? 1 : 0)}
 												onSelect={() =>
@@ -586,32 +657,22 @@
 									</DropdownMenu>
 								</div>
 							</div>
-							{#if rowIssues.length > 0}
-								<button
-									type="button"
-									class="px-4 py-2 text-start text-sm text-destructive underline"
-									onclick={() => focusFieldIssue(rowIssues[0].path)}
-								>
-									{runtime.i18n.t("fields:rowErrors", { count: rowIssues.length })}: {rowIssues[0]
-										.message}
-								</button>
-							{/if}
 							<div
 								{@attach revealRow(rowKey)}
 								data-field-path={`${field.path}.${index}`}
 								id={`${field.id}-${rowKey}-content`}
-								class={[
-									"grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none",
-									rowCollapsed
-										? "invisible grid-rows-[0fr] opacity-0"
-										: "grid-rows-[1fr] opacity-100",
-								]}
+								class="ridu-repeated-row__content"
+								data-collapsed={rowCollapsed}
 								aria-hidden={rowCollapsed}
 								inert={rowCollapsed}
 							>
-								<div class="min-h-0 overflow-hidden">
-									<div class="grid gap-5 p-4">
-										{#if !rowCollapsed}<FieldLayout fields={fieldsForRow(row, index)} {form} />{/if}
+								<div class="ridu-repeated-row__content-clip">
+									<div class="ridu-repeated-row__fields">
+										{#if !rowCollapsed || form
+												.pendingEditIssues()
+												.some((issue) => issue.path.startsWith(`${field.path}.${index}.`))}
+											<FieldLayout fields={fieldsForRow(row, index)} {form} />
+										{/if}
 									</div>
 								</div>
 							</div>
@@ -623,11 +684,11 @@
 		<Button
 			variant="ghost"
 			size="sm"
-			class="w-fit px-0 text-foreground-faint hover:bg-transparent hover:text-foreground"
+			class="ridu-repeated-field__add"
 			disabled={editingBlocked || !canAdd}
 			onclick={() => add()}
 		>
-			<CirclePlusIcon class="size-5" />
+			<CirclePlusIcon />
 			{field.type === "blocks"
 				? runtime.i18n.t("fields:addBlock")
 				: field.nested?.rowLabels?.singular === undefined
@@ -635,7 +696,7 @@
 					: runtime.i18n.t("fields:add", { label: field.nested.rowLabels.singular })}
 		</Button>
 		{#if minRows > 0 || maxRows > 0}
-			<p class="font-mono text-[10px] text-foreground-faint">
+			<p class="ridu-nested-field__note">
 				{runtime.i18n.t("fields:rowLimits", {
 					count: rows.length,
 					minimum:
@@ -649,61 +710,20 @@
 				})}
 			</p>
 		{/if}
-		{#if clipboardMessage !== ""}<p
-				class="font-mono text-[10px] text-foreground-faint"
-				aria-live="polite"
-			>
+		{#if clipboardMessage !== ""}
+			<p class="ridu-nested-field__note" aria-live="polite">
 				{clipboardMessage}
-			</p>{/if}
+			</p>
+		{/if}
 	</section>
 {/if}
 
-{#if field.type === "blocks"}
-	<Dialog bind:open={() => blockPickerOpen, changeBlockPickerOpen}>
-		<DialogContent class="h-[calc(100vh-4rem)] sm:max-w-4xl">
-			<DialogHeader>
-				<DialogTitle class="text-[22px]">
-					{runtime.i18n.t("fields:add", { label: field.admin.label })}
-				</DialogTitle>
-				<DialogDescription class="sr-only">
-					{runtime.i18n.t("fields:chooseBlockFor", { label: field.admin.label })}
-				</DialogDescription>
-			</DialogHeader>
-			<div class="relative">
-				<SearchIcon
-					class="pointer-events-none absolute top-1/2 start-3 size-4 -translate-y-1/2 text-foreground-faint"
-				/>
-				<Input
-					class="ps-9"
-					placeholder={runtime.i18n.t("fields:searchBlock")}
-					aria-label={runtime.i18n.t("fields:searchBlock")}
-					bind:value={blockQuery}
-				/>
-			</div>
-			{#if visibleBlockTypes.length === 0}
-				<p class="py-10 text-center text-[13px] text-foreground-muted">
-					{runtime.i18n.t("fields:noBlocks")}
-				</p>
-			{:else}
-				<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-					{#each visibleBlockTypes as block (block.slug)}
-						<button
-							type="button"
-							class="group overflow-hidden rounded-[3px] border border-control-border bg-background text-start transition-colors hover:border-control-border-hover focus-visible:border-ring focus-visible:outline-none"
-							onclick={() => add(block.slug)}
-						>
-							<span
-								class="flex aspect-video items-center justify-center border-b border-control-border bg-control text-foreground-faint transition-colors group-hover:bg-control-hover group-hover:text-foreground-muted"
-							>
-								<LayoutTemplateIcon class="size-8" />
-							</span>
-							<span class="block px-3 py-2.5 text-[13px] font-medium text-foreground">
-								{block.labels.singular}
-							</span>
-						</button>
-					{/each}
-				</div>
-			{/if}
-		</DialogContent>
-	</Dialog>
+{#if field.type === "blocks" && blockPickerOpen}
+	<BlockPicker
+		open={blockPickerOpen}
+		label={field.admin.label}
+		{blocks}
+		onOpenChange={changeBlockPickerOpen}
+		onSelect={add}
+	/>
 {/if}