@riducms/admin 0.1.5 → 0.2.0

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SchemaField } from "@riducms/protocol";
+	import { fieldControlARIA } from "@riducms/ui";
 
 	import { Input } from "@admin/components/ui/input";
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
@@ -12,10 +13,15 @@
 		Array.isArray(form.get(field.path)) ? (form.get(field.path) as number[]) : []
 	);
 	const issues = $derived(form.issuesFor(field.path));
+	const editingBlocked = $derived(field.admin.readOnly === true || form.editingBlocked);
+	const controlARIA = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
+	);
 
 	$effect(() => form.register(field.path));
 
 	function setCoordinate(index: number, next: number) {
+		if (editingBlocked) return;
 		const coordinates = [Number(value[0] ?? 0), Number(value[1] ?? 0)];
 		coordinates[index] = next;
 		form.set(field.path, coordinates);
@@ -27,24 +33,28 @@
 		<label class="grid gap-1.5 text-[12px] text-foreground-muted">
 			{runtime.i18n.t("fields:longitude")}
 			<Input
+				id={field.id}
 				type="number"
 				min="-180"
 				max="180"
 				step="any"
 				value={value[0] ?? ""}
-				readonly={field.admin.readOnly}
+				readonly={editingBlocked}
+				{...controlARIA}
 				oninput={(event) => setCoordinate(0, event.currentTarget.valueAsNumber)}
 			/>
 		</label>
 		<label class="grid gap-1.5 text-[12px] text-foreground-muted">
 			{runtime.i18n.t("fields:latitude")}
 			<Input
+				id={`${field.id}-latitude`}
 				type="number"
 				min="-90"
 				max="90"
 				step="any"
 				value={value[1] ?? ""}
-				readonly={field.admin.readOnly}
+				readonly={editingBlocked}
+				{...controlARIA}
 				oninput={(event) => setCoordinate(1, event.currentTarget.valueAsNumber)}
 			/>
 		</label>

package/src/fields/primitive-list/primitive-list-field.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import { tick } from "svelte";
+	import type { SchemaField } from "@riducms/protocol";
+	import { fieldControlARIA } from "@riducms/ui";
+	import ArrowUpIcon from "~icons/lucide/arrow-up";
+	import ArrowDownIcon from "~icons/lucide/arrow-down";
+	import XIcon from "~icons/lucide/x";
+	import { Button } from "@admin/components/ui/button";
+	import { Input } from "@admin/components/ui/input";
+	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { getAdminI18n } from "@riducms/plugin";
+	import FieldShell from "@admin/fields/field-shell.svelte";
+	import { primitiveNumberInput } from "@admin/fields/primitive-list/primitive-number-input";
+
+	let { field, form }: { field: SchemaField; form: FormController } = $props();
+	const i18n = getAdminI18n();
+
+	$effect(() => form.register(field.path));
+	const values = $derived.by(() => {
+		const value = form.get(field.path);
+		return Array.isArray(value) ? value : [];
+	});
+	const issues = $derived(form.issuesFor(field.path));
+	const editingBlocked = $derived(field.admin.readOnly === true || form.editingBlocked);
+	const canAdd = $derived(
+		!editingBlocked && (!field.list?.maxRows || values.length < field.list.maxRows)
+	);
+	const minimum = $derived(Math.max(field.required ? 1 : 0, field.list?.minRows ?? 0));
+	const feedbackARIA = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
+	);
+	const controlARIA = $derived({
+		...feedbackARIA,
+		"aria-describedby": [`${field.id}-count`, feedbackARIA["aria-describedby"]]
+			.filter(Boolean)
+			.join(" "),
+	});
+	let container: HTMLDivElement;
+	let announcement = $state("");
+	// Only DOM identity lives here. The form owns all values, including unfinished numeric input.
+	let keys = $state<string[]>([]);
+	const itemKey = (index: number) => keys[index] ?? `initial-${index}`;
+
+	async function focusItem(index: number) {
+		// Insertion/removal must render before moving focus to the surviving input or Add button.
+		await tick();
+		container.querySelector<HTMLInputElement>(`[data-list-item="${index}"]`)?.focus();
+		if (index < 0) container.querySelector<HTMLButtonElement>("[data-list-add]")?.focus();
+	}
+	function update(next: unknown[], nextKeys = values.map((_, index) => itemKey(index))) {
+		if (editingBlocked) return;
+		keys = nextKeys;
+		form.set(field.path, next);
+	}
+	async function add() {
+		if (!canAdd) return;
+		const index = values.length;
+		update([...values, ""], [...values.map((_, index) => itemKey(index)), crypto.randomUUID()]);
+		announcement = i18n.t("fields:listAdded", { number: index + 1 });
+		await focusItem(index);
+	}
+	function edit(index: number, value: string) {
+		if (editingBlocked) return;
+		const next = [...values];
+		next[index] = field.type === "number-list" ? primitiveNumberInput(value) : value;
+		update(next);
+	}
+	async function remove(index: number) {
+		if (editingBlocked) return;
+		const next = values.filter((_, at) => at !== index);
+		update(
+			next,
+			values.map((_, at) => itemKey(at)).filter((_, at) => at !== index)
+		);
+		announcement = i18n.t("fields:listRemoved", { number: index + 1 });
+		await focusItem(Math.min(index, next.length - 1));
+	}
+	async function move(index: number, direction: -1 | 1) {
+		const destination = index + direction;
+		if (editingBlocked || destination < 0 || destination >= values.length) return;
+		const next = [...values];
+		const nextKeys = values.map((_, at) => itemKey(at));
+		[next[index], next[destination]] = [next[destination], next[index]];
+		[nextKeys[index], nextKeys[destination]] = [nextKeys[destination]!, nextKeys[index]!];
+		update(next, nextKeys);
+		announcement = i18n.t("fields:listMoved", { from: index + 1, to: destination + 1 });
+		await focusItem(destination);
+	}
+	function keyboard(event: KeyboardEvent, index: number) {
+		if (!event.altKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown")) return;
+		event.preventDefault();
+		return move(index, event.key === "ArrowUp" ? -1 : 1);
+	}
+</script>
+
+<FieldShell {field} {issues}>
+	<div bind:this={container} class="grid gap-2">
+		<p id="{field.id}-count" class="text-xs text-foreground-muted">
+			{i18n.t("fields:itemCount", { count: values.length })}
+			{#if minimum > 0}
+				· {i18n.t("fields:minimum", { count: minimum })}{/if}
+			{#if field.list?.maxRows}
+				· {i18n.t("fields:maximum", { count: field.list.maxRows })}{/if}
+		</p>
+		{#if values.length === 0}<p class="text-sm text-foreground-muted">
+				{i18n.t("fields:listEmpty")}
+			</p>{/if}
+		<ol class="grid gap-2" aria-label={field.admin.label}>
+			{#each values as value, index (itemKey(index))}
+				<li class="flex items-center gap-1">
+					<Input
+						id={index === 0 ? field.id : `${field.id}-item-${itemKey(index)}`}
+						data-list-item={index}
+						aria-label={i18n.t("fields:listItem", {
+							label: field.admin.label,
+							number: index + 1,
+						})}
+						{...controlARIA}
+						inputmode={field.type === "number-list" ? "decimal" : undefined}
+						placeholder={field.admin.placeholder}
+						value={typeof value === "string" || typeof value === "number" ? String(value) : ""}
+						readonly={editingBlocked}
+						oninput={(event) => edit(index, event.currentTarget.value)}
+						onkeydown={(event) => keyboard(event, index)}
+					/>
+					<Button
+						variant="ghost"
+						size="icon"
+						aria-label={i18n.t("fields:listMoveUp", { number: index + 1 })}
+						disabled={editingBlocked || index === 0}
+						onclick={() => move(index, -1)}
+					>
+						<ArrowUpIcon class="size-4" />
+					</Button>
+					<Button
+						variant="ghost"
+						size="icon"
+						aria-label={i18n.t("fields:listMoveDown", { number: index + 1 })}
+						disabled={editingBlocked || index === values.length - 1}
+						onclick={() => move(index, 1)}
+					>
+						<ArrowDownIcon class="size-4" />
+					</Button>
+					<Button
+						variant="ghost"
+						size="icon"
+						aria-label={i18n.t("fields:listRemove", { number: index + 1 })}
+						disabled={editingBlocked}
+						onclick={() => remove(index)}
+					>
+						<XIcon class="size-4" />
+					</Button>
+				</li>
+			{/each}
+		</ol>
+		<Button
+			id={values.length === 0 ? field.id : undefined}
+			data-list-add
+			aria-label={i18n.t("fields:listAdd")}
+			{...controlARIA}
+			variant="outline"
+			class="w-fit"
+			disabled={!canAdd}
+			onclick={add}
+		>
+			{i18n.t("fields:listAdd")}
+		</Button>
+		<p class="sr-only" role="status">{announcement}</p>
+	</div>
+</FieldShell>

package/src/fields/primitive-list/primitive-number-input.ts

@@ -0,0 +1,6 @@
+/** Keep unfinished input in the unsaved form so collapse/remount cannot discard it. */
+export function primitiveNumberInput(input: string): number | string {
+	if (!/^[+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(input)) return input;
+	const value = Number(input);
+	return Number.isFinite(value) ? value : input;
+}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SchemaField } from "@riducms/protocol";
+	import { fieldControlARIA } from "@riducms/ui";
 
 	import { RadioCardItem, RadioGroup } from "@admin/components/ui/radio-group";
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
@@ -8,7 +9,10 @@
 	let { field, form }: { field: SchemaField; form: FormController } = $props();
 	const value = $derived(String(form.get(field.path) ?? ""));
 	const issues = $derived(form.issuesFor(field.path));
-	const hasMessage = $derived(issues.length > 0 || field.admin.description !== undefined);
+	const editingBlocked = $derived(field.admin.readOnly === true || form.editingBlocked);
+	const controlARIA = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
+	);
 
 	$effect(() => form.register(field.path));
 </script>
@@ -19,16 +23,16 @@
 		class="flex flex-wrap gap-x-7 gap-y-1"
 		name={field.path}
 		{value}
-		required={field.required}
-		readonly={field.admin.readOnly}
+		required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
+		readonly={editingBlocked}
 		aria-labelledby={`${field.id}-label`}
-		aria-invalid={issues.length > 0}
-		aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-		aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
-		onValueChange={(next) => form.set(field.path, next)}
+		{...controlARIA}
+		onValueChange={(next) => {
+			if (!editingBlocked) form.set(field.path, next);
+		}}
 	>
-		{#each field.select?.choices ?? [] as choice (choice.value)}
-			<RadioCardItem value={choice.value} label={choice.label} />
+		{#each field.select?.options ?? [] as option (option.value)}
+			<RadioCardItem value={option.value} label={option.label} />
 		{/each}
 	</RadioGroup>
 </FieldShell>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { FieldAuthoringHost } from "@riducms/plugin";
 	import type { SchemaField } from "@riducms/protocol";
+	import { fieldControlARIA } from "@riducms/ui";
 	import FileIcon from "~icons/lucide/file";
 	import PencilIcon from "~icons/lucide/pencil";
 	import PlusIcon from "~icons/lucide/plus";
@@ -59,9 +60,12 @@
 		selectTarget,
 		setBrowserOpen,
 	} = controller;
-	const hasMessage = $derived(issues.length > 0 || field.admin.description !== undefined);
+	const controlARIA = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
+	);
+	const editingBlocked = $derived(field.admin.readOnly === true || form.editingBlocked);
 	const optionFilter = $derived(
-		relationshipOptionFilters(field, form.values, targetCollection?.slug)
+		relationshipOptionFilters(field, (path) => form.get(path), targetCollection?.slug)
 	);
 	const quickPickerTargets = $derived(
 		targets.flatMap((target) => {
@@ -73,18 +77,20 @@
 				: [
 						{
 							collection: localizeSchemaCollection(collection, runtime.i18n),
-							filter: relationshipOptionFilters(field, form.values, collection.slug),
+							filter: relationshipOptionFilters(field, (path) => form.get(path), collection.slug),
 						},
 					];
 		})
 	);
 
 	function pickRelationship(target: string, id: string) {
+		if (editingBlocked) return;
 		selectTarget(target);
 		commit([id]);
 	}
 
 	function browseRelationships(target: string) {
+		if (form.editingBlocked) return;
 		selectTarget(target);
 		openBrowser();
 	}
@@ -101,13 +107,17 @@
 	{:else if field.upload !== undefined && !hasMany && selectedID !== undefined}
 		{const document = documents[selectedID]}
 		<div
-			class="flex min-h-17 items-center gap-2.5 rounded-[4px] border border-control-border bg-control p-2"
+			class="flex min-h-17 items-center gap-2.5 rounded-[4px] border border-control-border bg-control p-2 aria-invalid:!border-destructive/65"
+			aria-invalid={issues.length > 0}
 		>
 			<button
+				id={field.id}
 				type="button"
+				disabled={form.editingBlocked}
 				class="group flex min-w-0 flex-1 items-center gap-2.5 rounded-[3px] text-start outline-none focus-visible:ring-2 focus-visible:ring-ring/70"
 				onclick={() => openBrowser(selectedID)}
 				aria-label={runtime.i18n.t("fields:edit", { label: label(selectedID) })}
+				{...controlARIA}
 			>
 				<span
 					class="grid size-14 shrink-0 place-items-center overflow-hidden rounded-[3px] border border-control-border bg-background"
@@ -137,11 +147,16 @@
 			</button>
 			{#if !field.admin.readOnly}
 				<div class="flex shrink-0 flex-wrap justify-end gap-1">
-					<Button variant="outline" size="xs" onclick={() => openBrowser()}>
+					<Button
+						variant="outline"
+						size="xs"
+						disabled={form.editingBlocked}
+						onclick={() => openBrowser()}
+					>
 						<SearchIcon class="size-3" />
 						{runtime.i18n.t("general:replace")}
 					</Button>
-					<Button variant="ghost" size="xs" onclick={() => commit([])}>
+					<Button variant="ghost" size="xs" disabled={editingBlocked} onclick={() => commit([])}>
 						<XIcon class="size-3" />
 						{runtime.i18n.t("general:remove")}
 					</Button>
@@ -160,27 +175,31 @@
 				selectedInitials={selectedID === undefined ? undefined : initials(selectedID)}
 				placeholder={field.admin.placeholder}
 				readOnly={field.admin.readOnly}
+				blocked={form.editingBlocked}
 				locale={form.contentLocale}
 				upload={field.upload !== undefined}
 				invalid={issues.length > 0}
-				describedBy={hasMessage ? `${field.id}-message` : undefined}
+				hasDescription={field.admin.description !== undefined}
 				onPick={pickRelationship}
-				onRemove={() => commit([])}
+				onRemove={() => {
+					if (!editingBlocked) commit([]);
+				}}
 				onBrowse={browseRelationships}
 				onEdit={selectedID === undefined ? undefined : () => openBrowser(selectedID)}
 			/>
 		{:else}
 			<div
-				class="flex min-h-10 min-w-0 rounded-[3px] border border-control-border bg-control transition-colors hover:border-control-border-hover aria-invalid:border-destructive/65"
+				class="flex min-h-10 min-w-0 rounded-[3px] border border-control-border bg-control transition-colors hover:border-control-border-hover aria-invalid:!border-destructive/65"
 				aria-invalid={issues.length > 0}
 			>
 				{#if selectedIDs.length === 0}
 					<button
 						id={field.id}
 						type="button"
+						disabled={form.editingBlocked}
 						class="flex min-h-10 min-w-0 flex-1 items-center px-3 text-start text-[13px] text-foreground-placeholder outline-none hover:text-foreground focus-visible:text-primary"
 						onclick={() => openBrowser()}
-						aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+						{...controlARIA}
 					>
 						<span class="px-1.5 text-[13px] text-foreground-placeholder">
 							{field.admin.placeholder ??
@@ -197,6 +216,7 @@
 							>
 								<button
 									type="button"
+									disabled={form.editingBlocked}
 									class="min-w-0 flex-1 truncate text-start outline-none hover:text-foreground focus-visible:text-primary"
 									onclick={() => openBrowser(id)}
 									aria-label={runtime.i18n.t("fields:edit", { label: label(id) })}
@@ -207,6 +227,7 @@
 									<Button
 										variant="ghost"
 										size="icon-xs"
+										disabled={editingBlocked}
 										onclick={() => remove(id)}
 										aria-label={runtime.i18n.t("fields:remove", { label: label(id) })}
 									>
@@ -221,8 +242,9 @@
 					variant="ghost"
 					size="icon"
 					class="h-auto min-h-10 w-10 rounded-s-none border-s border-control-border"
+					disabled={form.editingBlocked}
 					onclick={() => openBrowser()}
-					aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+					{...controlARIA}
 					aria-label={runtime.i18n.t("fields:browse", {
 						label: targetCollection.labels.plural.toLocaleLowerCase(runtime.i18n.language),
 					})}
@@ -252,7 +274,9 @@
 		{initialDocumentID}
 		{optionFilter}
 		locale={form.contentLocale}
-		onCommit={commit}
+		onCommit={(ids) => {
+			if (!editingBlocked) commit(ids);
+		}}
 		onClose={() => setBrowserOpen(false)}
 	/>
 {/if}

package/src/fields/relationship/relationship-query.ts

@@ -33,7 +33,7 @@ export function combineRelationshipFilters(
 
 export function relationshipOptionFilters(
 	field: SchemaField,
-	values: Record<string, unknown>,
+	values: Record<string, unknown> | ((path: string) => unknown),
 	targetCollection: string | undefined
 ): readonly FieldReferenceFilter[] | undefined {
 	const reference = field.relationship ?? field.upload;
@@ -46,7 +46,9 @@ export function relationshipOptionFilters(
 			candidate.value === undefined
 				? candidate.sourcePath === undefined
 					? undefined
-					: readPath(values, candidate.sourcePath)
+					: typeof values === "function"
+						? values(candidate.sourcePath)
+						: readPath(values, candidate.sourcePath)
 				: relationshipFilterLiteral(candidate.value);
 		if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") {
 			return [];

package/src/fields/relationship/relationship-quick-picker.svelte

@@ -7,7 +7,7 @@
 	import PencilIcon from "~icons/lucide/pencil";
 	import PlusIcon from "~icons/lucide/plus";
 	import XIcon from "~icons/lucide/x";
-	import { TooltipContent, TooltipRoot, TooltipTrigger } from "@riducms/ui";
+	import { fieldControlARIA, TooltipContent, TooltipRoot, TooltipTrigger } from "@riducms/ui";
 
 	import { Skeleton } from "@admin/components/ui/skeleton";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
@@ -27,6 +27,7 @@
 		selectedInitials,
 		placeholder,
 		readOnly = false,
+		blocked = false,
 		locale,
 		onPick,
 		onRemove,
@@ -34,7 +35,7 @@
 		onEdit,
 		upload = false,
 		invalid = false,
-		describedBy,
+		hasDescription = false,
 	}: {
 		id: string;
 		label: string;
@@ -45,6 +46,7 @@
 		selectedInitials?: string;
 		placeholder?: string;
 		readOnly?: boolean;
+		blocked?: boolean;
 		locale?: string;
 		onPick: (target: string, id: string) => void;
 		onRemove: () => void;
@@ -52,7 +54,7 @@
 		onEdit?: () => void;
 		upload?: boolean;
 		invalid?: boolean;
-		describedBy?: string;
+		hasDescription?: boolean;
 	} = $props();
 
 	const runtime = getAdminRuntime();
@@ -77,7 +79,7 @@
 	const { comboboxItems, groups, open, query, selectedValue } = $derived(controller);
 	const {
 		browseAll,
-		changeOpen,
+		changeOpen: setOpen,
 		documentLabel,
 		initials,
 		pick,
@@ -92,31 +94,52 @@
 	const searchLabel = $derived(
 		targets.length === 1 ? (selectedCollection?.labels.plural ?? label) : label
 	);
+	const controlARIA = $derived(fieldControlARIA(id, hasDescription, invalid));
+	const editingBlocked = $derived(readOnly || blocked);
 	let triggerElement = $state<HTMLButtonElement | null>(null);
 	let searchInput = $state<HTMLInputElement | null>(null);
 
+	$effect(() => {
+		if (editingBlocked) setOpen(false);
+	});
+
+	function changePickerOpen(next: boolean) {
+		if (editingBlocked && next) return;
+		setOpen(next);
+	}
+
 	async function togglePicker() {
+		if (editingBlocked) return;
 		if (!toggleOpen()) return;
 		await tick();
 		searchInput?.focus();
 	}
 
 	function beginSearch(event: Event) {
+		if (editingBlocked) return;
 		setQuery((event.currentTarget as HTMLInputElement).value);
 	}
 
+	function choose(value: string) {
+		if (editingBlocked) return;
+		pick(value);
+	}
+
 	function remove(event: MouseEvent) {
 		event.stopPropagation();
+		if (editingBlocked) return;
 		removeSelection();
 	}
 
 	function browse(event: MouseEvent, target?: string) {
 		event.stopPropagation();
+		if (blocked) return;
 		browseAll(target);
 	}
 
 	function edit(event: MouseEvent) {
 		event.stopPropagation();
+		if (blocked) return;
 		onEdit?.();
 	}
 </script>
@@ -127,13 +150,13 @@
 	inputValue={query}
 	items={comboboxItems}
 	{open}
-	onOpenChange={changeOpen}
-	onValueChange={pick}
+	onOpenChange={changePickerOpen}
+	onValueChange={choose}
 	allowDeselect={false}
 	loop
 >
 	<div
-		class="flex h-10.5 min-w-0 rounded-[3px] border border-control-border bg-control transition-[background-color,border-color] duration-150 hover:bg-background focus-within:border-primary/65 aria-invalid:border-destructive/65"
+		class="flex h-10.5 min-w-0 rounded-[3px] border border-control-border bg-control transition-[background-color,border-color] duration-150 hover:bg-background focus-within:border-primary/65 aria-invalid:!border-destructive/65"
 		aria-invalid={invalid}
 	>
 		<button
@@ -141,9 +164,9 @@
 			{id}
 			type="button"
 			class="flex min-w-0 flex-1 items-center gap-2 rounded-s-[3px] px-2.75 text-start outline-none disabled:cursor-not-allowed disabled:opacity-45"
-			disabled={readOnly}
+			disabled={editingBlocked}
 			aria-label={label}
-			aria-describedby={describedBy}
+			{...controlARIA}
 			aria-haspopup="listbox"
 			aria-expanded={open}
 			onclick={togglePicker}
@@ -181,7 +204,7 @@
 							{...props}
 							type="button"
 							class="grid w-9 shrink-0 place-items-center border-s border-control-border text-foreground-sub outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:text-primary disabled:cursor-not-allowed disabled:opacity-45"
-							disabled={readOnly}
+							disabled={blocked}
 							onpointerdown={(event) => event.preventDefault()}
 							onclick={edit}
 							aria-label={runtime.i18n.t("fields:edit", { label: selectedLabel ?? "" })}
@@ -201,6 +224,7 @@
 						<button
 							{...props}
 							type="button"
+							disabled={editingBlocked}
 							class="grid w-9 shrink-0 place-items-center border-s border-control-border text-foreground-sub outline-none transition-colors hover:bg-destructive/7 hover:text-destructive focus-visible:text-destructive"
 							onpointerdown={(event) => event.preventDefault()}
 							onclick={remove}
@@ -220,6 +244,7 @@
 					<button
 						{...props}
 						type="button"
+						disabled={blocked}
 						class="grid w-9 shrink-0 place-items-center rounded-e-[3px] border-s border-control-border text-foreground-sub outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:text-primary"
 						onpointerdown={(event) => event.preventDefault()}
 						onclick={(event) => browse(event, selectedCollection?.slug)}
@@ -247,6 +272,7 @@
 		>
 			<Combobox.Input
 				bind:ref={searchInput}
+				disabled={editingBlocked}
 				aria-label={runtime.i18n.t("fields:searchLabel", { label: searchLabel })}
 				placeholder={runtime.i18n.t("fields:search", {
 					label: searchLabel.toLocaleLowerCase(runtime.i18n.language),
@@ -291,6 +317,7 @@
 								<Combobox.Item
 									value={JSON.stringify([group.collection.slug, document.id])}
 									label={optionLabel}
+									disabled={editingBlocked}
 									class="flex w-full cursor-default items-center gap-[9px] rounded-[3px] px-2 py-1.5 text-start text-[12.5px] text-foreground-muted outline-none select-none data-[highlighted]:bg-control data-[selected]:text-foreground-strong"
 								>
 									{#snippet children({ selected })}
@@ -310,6 +337,7 @@
 						{/if}
 						<button
 							type="button"
+							disabled={editingBlocked}
 							class="mt-0.5 flex w-full items-center gap-1 px-2 py-1.5 text-start text-[11.5px] text-primary outline-none hover:text-primary-hover focus-visible:text-primary-hover"
 							onpointerdown={(event) => event.preventDefault()}
 							onclick={(event) => browse(event, group.collection.slug)}

package/src/fields/scalar/date-control-value.ts

@@ -8,7 +8,7 @@ import {
 	type DateValue,
 	type Time,
 } from "@internationalized/date";
-import type { SchemaDatePickerAppearance } from "@riducms/protocol";
+import type { SchemaDateFormat } from "@riducms/protocol";
 
 /**
  * Converts a Ridu wire value into the timezone-free value used by Bits' date
@@ -16,13 +16,13 @@ import type { SchemaDatePickerAppearance } from "@riducms/protocol";
  */
 export function datePickerValue(
 	value: unknown,
-	appearance: SchemaDatePickerAppearance | undefined,
+	appearance: SchemaDateFormat | undefined,
 	timeZone = getLocalTimeZone()
 ): DateValue | undefined {
 	const encoded = String(value ?? "");
 	if (encoded === "") return undefined;
 	try {
-		if (appearance === "dayAndTime") {
+		if (appearance === "date-time") {
 			return toCalendarDateTime(parseAbsolute(encoded, timeZone));
 		}
 		return parseDate(encoded.slice(0, 10));
@@ -34,11 +34,11 @@ export function datePickerValue(
 /** Converts a Bits date selection to Ridu's canonical wire value. */
 export function datePickerFormValue(
 	value: DateValue | undefined,
-	appearance: SchemaDatePickerAppearance | undefined,
+	appearance: SchemaDateFormat | undefined,
 	timeZone = getLocalTimeZone()
 ) {
 	if (value === undefined) return "";
-	if (appearance === "dayAndTime") {
+	if (appearance === "date-time") {
 		return toCalendarDateTime(value).toDate(timeZone).toISOString();
 	}
 	return toCalendarDate(value).toString();