@riducms/admin 0.1.4 → 0.2.0

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

@@ -1,19 +1,19 @@
-import type { SchemaDatePickerAppearance } from "@riducms/protocol";
+import type { SchemaDateFormat } from "@riducms/protocol";
 import type { AdminI18n } from "@riducms/plugin";
 
 export function formatDateDisplay(
 	value: unknown,
-	appearance: SchemaDatePickerAppearance | undefined,
+	appearance: SchemaDateFormat | undefined,
 	i18n: AdminI18n
 ) {
 	const encoded = String(value ?? "");
 	if (encoded === "") return "—";
-	if (appearance === "timeOnly") return encoded.slice(0, 5);
+	if (appearance === "time") return encoded.slice(0, 5);
 	const date = new Date(
-		appearance === "dayOnly" || appearance === undefined ? `${encoded}T00:00:00Z` : encoded
+		appearance === "date" || appearance === undefined ? `${encoded}T00:00:00Z` : encoded
 	);
 	if (Number.isNaN(date.valueOf())) return encoded;
-	if (appearance === "dayAndTime") {
+	if (appearance === "date-time") {
 		return i18n.formatDate(date, {
 			dateStyle: "medium",
 			timeStyle: "short",

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

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { SchemaField, ValidationIssue } from "@riducms/protocol";
+	import { fieldControlARIA } from "@riducms/ui";
+	import { onDestroy } from "svelte";
 
 	import { Checkbox } from "@admin/components/ui/checkbox";
 	import { DateValueControl } from "@admin/components/ui/date-value-control";
@@ -14,54 +16,63 @@
 	const runtime = getAdminRuntime();
 	const value = $derived(form.get(field.path));
 	const issues = $derived(form.issuesFor(field.path));
+	const editingBlocked = $derived(field.admin.readOnly === true || form.editingBlocked);
 	let jsonError = $state<string>();
+	let releaseUnfinishedInput: (() => void) | undefined;
+	onDestroy(() => releaseUnfinishedInput?.());
 	const displayIssues = $derived<ValidationIssue[]>(
 		jsonError === undefined
 			? issues
 			: [{ code: "invalid_json", path: field.path, message: jsonError }]
 	);
-	const hasMessage = $derived(displayIssues.length > 0 || field.admin.description !== undefined);
-	const dateAppearance = $derived(field.date?.pickerAppearance);
+	const controlARIA = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, displayIssues.length > 0)
+	);
+	const dateAppearance = $derived(field.date?.format);
 	const stringConstraints = $derived(field.type === "code" ? field.code : field.textarea);
 
 	$effect(() => form.register(field.path));
 
 	function setJSON(encoded: string) {
+		if (editingBlocked) return;
 		try {
 			form.set(field.path, JSON.parse(encoded));
+			releaseUnfinishedInput?.();
+			releaseUnfinishedInput = undefined;
 			jsonError = undefined;
 		} catch {
+			releaseUnfinishedInput?.();
+			releaseUnfinishedInput = form.setLiveInputUnavailable(field.path);
 			jsonError = runtime.i18n.t("errors:validJSON");
 		}
 	}
 </script>
 
 {#if field.type === "checkbox"}
-	<div class="grid gap-2" data-field-path={field.path} data-invalid={displayIssues.length > 0}>
-		<label
-			class="flex min-h-6 w-fit cursor-pointer items-center gap-2 text-[13px] text-foreground-muted hover:text-foreground has-disabled:cursor-not-allowed has-disabled:text-foreground-faint"
-			for={field.id}
-		>
-			<Checkbox
-				id={field.id}
-				required={field.required}
-				aria-invalid={displayIssues.length > 0}
-				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-				aria-errormessage={displayIssues.length > 0 ? `${field.id}-message` : undefined}
-				disabled={field.admin.readOnly}
-				bind:checked={() => Boolean(value), (next) => form.set(field.path, next)}
-			/>
-			<span>{field.admin.label}</span>
-			{#if field.required}<span class="ridu-field-required" aria-hidden="true">*</span>{/if}
-			{#if field.admin.readOnly}<span class="ridu-field-status">
-					{runtime.i18n.t("fields:readOnly")}
-				</span>{/if}
-		</label>
+	<div data-field-path={field.path} data-invalid={displayIssues.length > 0}>
 		<FieldMessages
-			id="{field.id}-message"
+			controlID={field.id}
 			issues={displayIssues}
 			description={field.admin.description}
-		/>
+		>
+			<label
+				class="flex min-h-6 w-fit cursor-pointer items-center gap-2 text-[13px] text-foreground-muted hover:text-foreground has-disabled:cursor-not-allowed has-disabled:text-foreground-faint"
+				for={field.id}
+			>
+				<Checkbox
+					id={field.id}
+					required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
+					{...controlARIA}
+					disabled={editingBlocked}
+					bind:checked={() => Boolean(value), (next) => form.set(field.path, next)}
+				/>
+				<span>{field.admin.label}</span>
+				{#if field.required}<span class="ridu-field-required" aria-hidden="true">*</span>{/if}
+				{#if field.admin.readOnly}<span class="ridu-field-status">
+						{runtime.i18n.t("fields:readOnly")}
+					</span>{/if}
+			</label>
+		</FieldMessages>
 	</div>
 {:else}
 	<FieldShell {field} issues={displayIssues}>
@@ -70,15 +81,13 @@
 				id={field.id}
 				name={field.path}
 				rows={1}
-				required={field.required}
+				required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
 				minlength={stringConstraints?.minLength}
 				maxlength={stringConstraints?.maxLength}
 				placeholder={field.admin.placeholder}
-				aria-invalid={displayIssues.length > 0}
-				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-				aria-errormessage={displayIssues.length > 0 ? `${field.id}-message` : undefined}
+				{...controlARIA}
 				value={String(value ?? "")}
-				readonly={field.admin.readOnly}
+				readonly={editingBlocked}
 				class={field.type === "code"
 					? "min-h-14 resize-y field-sizing-fixed font-mono text-[12.5px] leading-5"
 					: undefined}
@@ -89,13 +98,11 @@
 			<Textarea
 				id={field.id}
 				name={field.path}
-				required={field.required}
-				aria-invalid={displayIssues.length > 0}
-				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-				aria-errormessage={displayIssues.length > 0 ? `${field.id}-message` : undefined}
+				required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
+				{...controlARIA}
 				class="min-h-40 font-mono"
 				value={JSON.stringify(value ?? {}, null, 2)}
-				readonly={field.admin.readOnly}
+				readonly={editingBlocked}
 				oninput={(event) => setJSON(event.currentTarget.value)}
 			/>
 		{:else if field.type === "date"}
@@ -104,28 +111,27 @@
 				name={field.path}
 				appearance={dateAppearance}
 				value={String(value ?? "")}
+				disabled={form.editingBlocked}
 				readonly={field.admin.readOnly}
-				required={field.required}
+				required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
 				invalid={displayIssues.length > 0}
+				hasDescription={field.admin.description !== undefined}
 				label={field.admin.label}
-				describedBy={hasMessage ? `${field.id}-message` : undefined}
 				onValueChange={(next) => form.set(field.path, next)}
 			/>
 		{:else}
 			<Input
 				id={field.id}
 				name={field.path}
-				required={field.required}
-				aria-invalid={displayIssues.length > 0}
-				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-				aria-errormessage={displayIssues.length > 0 ? `${field.id}-message` : undefined}
+				required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
+				{...controlARIA}
 				type={field.type === "number" ? "number" : field.type === "email" ? "email" : "text"}
 				min={field.type === "number" ? field.number?.min : undefined}
 				max={field.type === "number" ? field.number?.max : undefined}
 				step={field.type === "number" ? field.number?.step : undefined}
 				placeholder={field.admin.placeholder}
 				value={String(value ?? "")}
-				readonly={field.admin.readOnly}
+				readonly={editingBlocked}
 				oninput={(event) =>
 					form.set(
 						field.path,

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SchemaField } from "@riducms/protocol";
+	import { fieldControlARIA } from "@riducms/ui";
 	import XIcon from "~icons/lucide/x";
 
 	import { Button } from "@admin/components/ui/button";
@@ -9,7 +10,7 @@
 	import FieldShell from "@admin/fields/field-shell.svelte";
 	import {
 		removeSelectValue,
-		selectChoiceLabel,
+		selectOptionLabel,
 		selectManyValues,
 	} from "@admin/fields/select/select-value";
 
@@ -27,40 +28,38 @@
 		field.admin.placeholder ?? runtime.i18n.t("fields:select", { label: field.admin.label })
 	);
 	const selectedLabel = $derived(
-		field.select?.choices.find((choice) => choice.value === value)?.label ?? placeholder
+		field.select?.options.find((option) => option.value === value)?.label ?? placeholder
 	);
 	const selectedLabels = $derived(
-		values.map((selected) => selectChoiceLabel(field.select?.choices ?? [], selected))
+		values.map((selected) => selectOptionLabel(field.select?.options ?? [], selected))
 	);
 	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));
 
 	function setValues(next: string[]) {
+		if (editingBlocked) return;
 		form.set(field.path, [...next]);
 	}
 
 	function removeValue(selected: string) {
+		if (editingBlocked) return;
 		form.set(field.path, removeSelectValue(values, selected));
 	}
 </script>
 
 <FieldShell {field} {issues}>
 	{#if hasMany}
-		<Select
-			type="multiple"
-			value={values}
-			onValueChange={setValues}
-			disabled={field.admin.readOnly}
-		>
+		<Select type="multiple" value={values} onValueChange={setValues} disabled={editingBlocked}>
 			<SelectTrigger
 				id={field.id}
 				class="w-full"
-				aria-invalid={issues.length > 0}
+				{...controlARIA}
 				aria-required={field.required}
-				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-				aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
 				aria-label={field.admin.label}
 			>
 				<span class={values.length === 0 ? "text-foreground-placeholder" : "truncate"}>
@@ -68,8 +67,8 @@
 				</span>
 			</SelectTrigger>
 			<SelectContent>
-				{#each field.select?.choices ?? [] as choice (choice.value)}
-					<SelectItem value={choice.value} label={choice.label} />
+				{#each field.select?.options ?? [] as option (option.value)}
+					<SelectItem value={option.value} label={option.label} />
 				{/each}
 			</SelectContent>
 		</Select>
@@ -83,15 +82,16 @@
 						class="inline-flex max-w-full items-center gap-1 rounded-[3px] border border-control-border bg-background py-0.5 pe-0.5 ps-2 text-[12px] text-foreground-muted"
 					>
 						<span class="max-w-64 truncate">
-							{selectChoiceLabel(field.select?.choices ?? [], selected)}
+							{selectOptionLabel(field.select?.options ?? [], selected)}
 						</span>
 						{#if !field.admin.readOnly}
 							<Button
 								variant="ghost"
 								size="icon-xs"
+								disabled={editingBlocked}
 								onclick={() => removeValue(selected)}
 								aria-label={runtime.i18n.t("fields:remove", {
-									label: selectChoiceLabel(field.select?.choices ?? [], selected),
+									label: selectOptionLabel(field.select?.options ?? [], selected),
 								})}
 							>
 								<XIcon class="size-3" aria-hidden="true" />
@@ -106,16 +106,16 @@
 			type="single"
 			{value}
 			allowDeselect={!field.required}
-			onValueChange={(next) => form.set(field.path, next)}
-			disabled={field.admin.readOnly}
+			onValueChange={(next) => {
+				if (!editingBlocked) form.set(field.path, next);
+			}}
+			disabled={editingBlocked}
 		>
 			<SelectTrigger
 				id={field.id}
 				class="w-full"
-				aria-invalid={issues.length > 0}
+				{...controlARIA}
 				aria-required={field.required}
-				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-				aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
 				aria-label={field.admin.label}
 			>
 				<span class={value === "" ? "text-foreground-placeholder" : undefined}>
@@ -123,8 +123,8 @@
 				</span>
 			</SelectTrigger>
 			<SelectContent>
-				{#each field.select?.choices ?? [] as choice (choice.value)}
-					<SelectItem value={choice.value} label={choice.label} />
+				{#each field.select?.options ?? [] as option (option.value)}
+					<SelectItem value={option.value} label={option.label} />
 				{/each}
 			</SelectContent>
 		</Select>

package/src/fields/select/select-value.ts

@@ -1,12 +1,12 @@
-import type { SchemaSelectChoice } from "@riducms/protocol";
+import type { SchemaSelectOption } from "@riducms/protocol";
 
 export function selectManyValues(value: unknown): string[] {
 	if (!Array.isArray(value)) return [];
 	return value.filter((candidate): candidate is string => typeof candidate === "string");
 }
 
-export function selectChoiceLabel(choices: readonly SchemaSelectChoice[], value: string) {
-	return choices.find((choice) => choice.value === value)?.label ?? value;
+export function selectOptionLabel(options: readonly SchemaSelectOption[], value: string) {
+	return options.find((option) => option.value === value)?.label ?? value;
 }
 
 export function removeSelectValue(values: readonly string[], value: string) {

package/src/fields/text/slug-field.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SchemaField } from "@riducms/protocol";
+	import { fieldControlARIA } from "@riducms/ui";
 	import { untrack } from "svelte";
 
 	import { Button } from "@admin/components/ui/button";
@@ -21,7 +22,10 @@
 	const runtime = getAdminRuntime();
 	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)
+	);
 	let locked = $state(true);
 	let binding = $state<DerivedTextBinding>();
 
@@ -41,14 +45,16 @@
 	});
 
 	function generate() {
+		if (editingBlocked) return;
 		binding?.follow();
 	}
 
 	function normalizeManualValue() {
-		if (!locked) binding?.setManual(normalizeSlug(value));
+		if (!editingBlocked && !locked) binding?.setManual(normalizeSlug(value));
 	}
 
 	function setManualValue(value: string) {
+		if (editingBlocked) return;
 		binding?.setManual(value);
 	}
 </script>
@@ -62,10 +68,8 @@
 			minlength={field.text?.minLength}
 			maxlength={field.text?.maxLength}
 			placeholder={field.admin.placeholder}
-			aria-invalid={issues.length > 0}
-			aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-			aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
-			readonly={field.admin.readOnly || locked}
+			{...controlARIA}
+			readonly={editingBlocked || locked}
 			class="min-w-0 flex-1 font-mono"
 			{value}
 			oninput={(event) => setManualValue(event.currentTarget.value)}
@@ -74,11 +78,23 @@
 		{#if !field.admin.readOnly}
 			<div class="flex shrink-0 items-center gap-1">
 				{#if !locked}
-					<Button type="button" size="xs" variant="ghost" onclick={generate}>
+					<Button
+						type="button"
+						size="xs"
+						variant="ghost"
+						disabled={editingBlocked}
+						onclick={generate}
+					>
 						{runtime.i18n.t("fields:generateSlug")}
 					</Button>
 				{/if}
-				<Button type="button" size="xs" variant="ghost" onclick={() => (locked = !locked)}>
+				<Button
+					type="button"
+					size="xs"
+					variant="ghost"
+					disabled={editingBlocked}
+					onclick={() => (locked = !locked)}
+				>
 					{runtime.i18n.t(locked ? "fields:unlockSlug" : "fields:lockSlug")}
 				</Button>
 			</div>

package/src/fields/text/text-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";
@@ -14,7 +15,10 @@
 	let { field, form }: Props = $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>
@@ -26,14 +30,12 @@
 		<Input
 			id={field.id}
 			name={field.path}
-			required={field.required}
+			required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
 			minlength={field.text?.minLength}
 			maxlength={field.text?.maxLength}
 			placeholder={field.admin.placeholder}
-			aria-invalid={issues.length > 0}
-			aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-			aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
-			readonly={field.admin.readOnly}
+			{...controlARIA}
+			readonly={editingBlocked}
 			{value}
 			oninput={(event) => form.set(field.path, event.currentTarget.value)}
 		/>

package/src/index.ts

@@ -5,26 +5,20 @@ import "@admin/app.css";
 
 import { mount } from "svelte";
 
-import type { AdminPlugin, FieldPlugin } from "@riducms/plugin";
 import type { RiduClient, RiduConfigShape } from "@riducms/sdk";
-import type { TranslationLanguage } from "@riducms/translations";
 
 import App from "@admin/app.svelte";
 import type { AdminClient } from "@admin/core/api/admin-client";
 
-export interface MountAdminOptions<Config extends RiduConfigShape> {
+import type { AdminConfig } from "@riducms/plugin/admin";
+
+export interface MountAdminOptions<Config extends RiduConfigShape> extends AdminConfig {
 	/** Existing DOM element that receives the Ridu admin application. */
 	target: Element;
 	/** Creates the generated, application-specific Fetch client. */
 	clientFactory: () => RiduClient<Config>;
 	/** Route prefix used when the admin is not mounted at /admin. */
 	adminBasePath?: string;
-	/** Statically paired packaged plugins, including fields and routes. */
-	plugins?: readonly AdminPlugin[];
-	/** Application-local field renderers that have no packaged backend pair. */
-	fieldPlugins?: readonly FieldPlugin[];
-	/** Statically imported catalogs available to the Go-configured admin languages. */
-	languages?: readonly TranslationLanguage[];
 }
 
 export function mountAdmin<Config extends RiduConfigShape>(
@@ -38,10 +32,8 @@ export function mountAdmin<Config extends RiduConfigShape>(
 		target: options.target,
 		props: {
 			clientFactory,
+			adminConfig: options,
 			...(options.adminBasePath === undefined ? {} : { adminBasePath: options.adminBasePath }),
-			...(options.plugins === undefined ? {} : { plugins: options.plugins }),
-			...(options.fieldPlugins === undefined ? {} : { fieldPlugins: options.fieldPlugins }),
-			...(options.languages === undefined ? {} : { languages: options.languages }),
 		},
 	});
 }