@riducms/admin 0.1.0

package/src/fields/field-clipboard.ts

@@ -0,0 +1,132 @@
+import type { SchemaField } from "@riducms/protocol";
+
+export type FieldClipboardKind = "field" | "row";
+
+export interface FieldClipboardPayload {
+	version: 1;
+	kind: FieldClipboardKind;
+	signature: string;
+	value: unknown;
+}
+
+const clipboardPrefix = "ridu-field-clipboard:";
+const maximumClipboardLength = 1_000_000;
+let memoryClipboard: FieldClipboardPayload | undefined;
+
+export function fieldClipboardSignature(field: SchemaField): string {
+	return JSON.stringify(fieldShape(field));
+}
+
+export function createFieldClipboardPayload(
+	field: SchemaField,
+	kind: FieldClipboardKind,
+	value: unknown
+): FieldClipboardPayload {
+	return {
+		version: 1,
+		kind,
+		signature: fieldClipboardSignature(field),
+		value: cloneJSON(value),
+	};
+}
+
+export function parseFieldClipboardPayload(encoded: string): FieldClipboardPayload | undefined {
+	if (!encoded.startsWith(clipboardPrefix) || encoded.length > maximumClipboardLength)
+		return undefined;
+	try {
+		const candidate = JSON.parse(
+			encoded.slice(clipboardPrefix.length)
+		) as Partial<FieldClipboardPayload>;
+		if (
+			candidate.version !== 1 ||
+			(candidate.kind !== "field" && candidate.kind !== "row") ||
+			typeof candidate.signature !== "string" ||
+			!("value" in candidate)
+		)
+			return undefined;
+		return candidate as FieldClipboardPayload;
+	} catch {
+		return undefined;
+	}
+}
+
+export function compatibleClipboardValue(
+	payload: FieldClipboardPayload | undefined,
+	field: SchemaField,
+	kind: FieldClipboardKind
+) {
+	if (
+		payload === undefined ||
+		payload.kind !== kind ||
+		payload.signature !== fieldClipboardSignature(field)
+	)
+		return undefined;
+	return cloneForPaste(payload.value);
+}
+
+export async function writeFieldClipboard(payload: FieldClipboardPayload) {
+	memoryClipboard = payload;
+	try {
+		await navigator.clipboard.writeText(clipboardPrefix + JSON.stringify(payload));
+	} catch {
+		// The in-memory copy keeps same-admin workflows available when a browser
+		// denies clipboard permission or the app is served from an insecure origin.
+	}
+}
+
+export async function readFieldClipboard() {
+	try {
+		const encoded = await navigator.clipboard.readText();
+		const parsed = parseFieldClipboardPayload(encoded);
+		if (parsed !== undefined) {
+			memoryClipboard = parsed;
+			return parsed;
+		}
+	} catch {
+		// Fall through to the last trusted in-app copy.
+	}
+	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),
+		])
+	);
+}
+
+function cloneJSON(value: unknown) {
+	return value === undefined ? null : JSON.parse(JSON.stringify(value));
+}
+
+function fieldShape(field: SchemaField): unknown {
+	return {
+		type: field.type,
+		category: field.category,
+		select: field.select?.choices.map((choice) => choice.value),
+		relationship: field.relationship && {
+			collection: field.relationship.collectionSlug,
+			targets: field.relationship.targets?.map((target) => target.collectionSlug),
+			hasMany: field.relationship.hasMany === true,
+			polymorphic: field.relationship.polymorphic === true,
+		},
+		upload: field.upload && {
+			collection: field.upload.collectionSlug,
+			hasMany: field.upload.hasMany === true,
+		},
+		nested: field.nested && {
+			minRows: field.nested.minRows ?? 0,
+			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 },
+	};
+}

package/src/fields/field-layout.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	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";
+
+	let {
+		fields,
+		form,
+		suppressedTabGroupID = "",
+	}: {
+		fields: readonly SchemaField[];
+		form: FormController;
+		suppressedTabGroupID?: string;
+	} = $props();
+	const runtime = getAdminRuntime();
+</script>
+
+{#snippet fieldGrid(tabFields: readonly SchemaField[])}
+	<div class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-12">
+		{#each createFieldLayout(tabFields, suppressedTabGroupID) as group (group.key)}
+			{#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>
+			{: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"
+					data-field-row={group.row.id}
+				>
+					{#each group.fields as field (field.id)}
+						<FieldRenderer {field} {form} />
+					{/each}
+				</div>
+			{:else}
+				<FieldRenderer field={group.fields[0]} {form} />
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+{@render fieldGrid(fields)}

package/src/fields/field-layout.ts

@@ -0,0 +1,57 @@
+import type {
+	SchemaField,
+	SchemaFieldCollapsible,
+	SchemaFieldRow,
+	SchemaFieldTabGroup,
+} from "@riducms/protocol";
+
+export interface FieldLayoutGroup {
+	key: string;
+	row?: SchemaFieldRow;
+	collapsible?: SchemaFieldCollapsible;
+	tabGroup?: SchemaFieldTabGroup;
+	fields: [SchemaField, ...SchemaField[]];
+}
+
+// Row metadata is deliberately carried by ordinary data fields. Grouping it
+// here preserves the manifest's field order without introducing a form value.
+export function createFieldLayout(
+	fields: readonly SchemaField[],
+	suppressedTabGroupID = ""
+): FieldLayoutGroup[] {
+	const groups: FieldLayoutGroup[] = [];
+	for (const field of fields) {
+		const row = field.admin.row;
+		const collapsible = field.admin.collapsible;
+		const tabGroup =
+			field.admin.tabGroup?.id === suppressedTabGroupID ? undefined : field.admin.tabGroup;
+		const previous = groups.at(-1);
+		if (tabGroup !== undefined && previous?.tabGroup?.id === tabGroup.id) {
+			previous.fields.push(field);
+			continue;
+		}
+		if (collapsible !== undefined && previous?.collapsible?.id === collapsible.id) {
+			previous.fields.push(field);
+			continue;
+		}
+		if (row !== undefined && previous?.row?.id === row.id) {
+			previous.fields.push(field);
+			continue;
+		}
+		groups.push({
+			key:
+				tabGroup !== undefined
+					? `tabs:${tabGroup.id}:${field.id}`
+					: collapsible !== undefined
+						? `collapsible:${collapsible.id}`
+						: row === undefined
+							? `field:${field.id}`
+							: `row:${row.id}`,
+			...(row === undefined ? {} : { row }),
+			...(collapsible === undefined ? {} : { collapsible }),
+			...(tabGroup === undefined ? {} : { tabGroup }),
+			fields: [field],
+		});
+	}
+	return groups;
+}

package/src/fields/field-messages.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { ValidationIssue } from "@riducms/protocol";
+	import CircleAlertIcon from "~icons/lucide/circle-alert";
+
+	let {
+		id,
+		issues = [],
+		description,
+		class: className,
+	}: {
+		id: string;
+		issues?: readonly ValidationIssue[];
+		description?: string;
+		class?: string;
+	} = $props();
+</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}

package/src/fields/field-renderer.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { FieldAuthoringHost } from "@riducms/plugin";
+	import type { SchemaField } from "@riducms/protocol";
+
+	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { evaluateFieldCondition } from "@admin/core/forms/field-condition";
+	import { localizeSchemaCollection, localizeSchemaField } from "@admin/core/i18n/localized-schema";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import { fieldAccessPath } from "@admin/fields/nested/scoped-field";
+	import ReferenceBrowser from "@admin/features/reference-browser/reference-browser-loader.svelte";
+	import {
+		contentLocaleLabel,
+		withContentLocaleLabel,
+	} from "@admin/fields/localized-field-presentation";
+
+	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";
+	import UIField from "@admin/fields/ui/ui-field.svelte";
+	import JoinField from "@admin/fields/join/join-field.svelte";
+	import VirtualField from "@admin/fields/virtual/virtual-field.svelte";
+	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 TextField from "@admin/fields/text/text-field.svelte";
+
+	interface Props {
+		field: SchemaField;
+		form: FormController;
+	}
+
+	let { field, form }: Props = $props();
+	const runtime = getAdminRuntime();
+	const authoring: FieldAuthoringHost = {
+		get collections() {
+			return (
+				runtime.manifest?.collections.map((collection) =>
+					localizeSchemaCollection(collection, runtime.i18n)
+				) ?? []
+			);
+		},
+		get documentRevision() {
+			return runtime.documentRevision;
+		},
+		get locale() {
+			return form.contentLocale;
+		},
+		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 accessPath = $derived(fieldAccessPath(field));
+	const visible = $derived(
+		field.admin.hidden !== true &&
+			form.canRead(field.path, accessPath) &&
+			(field.admin.condition === undefined ||
+				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
+			: { ...field, admin: { ...field.admin, readOnly: true } }
+	);
+	const localizedField = $derived(localizeSchemaField(renderedField, runtime.i18n));
+	const activeContentLocaleLabel = $derived(
+		contentLocaleLabel(runtime.contentLocales, form.contentLocale)
+	);
+	const presentedField = $derived(withContentLocaleLabel(localizedField, activeContentLocaleLabel));
+	const columnClasses: Record<number, string> = {
+		1: "col-span-1 sm:col-span-1",
+		2: "col-span-1 sm:col-span-2",
+		3: "col-span-1 sm:col-span-3",
+		4: "col-span-1 sm:col-span-4",
+		5: "col-span-1 sm:col-span-5",
+		6: "col-span-1 sm:col-span-6",
+		7: "col-span-1 sm:col-span-7",
+		8: "col-span-1 sm:col-span-8",
+		9: "col-span-1 sm:col-span-9",
+		10: "col-span-1 sm:col-span-10",
+		11: "col-span-1 sm:col-span-11",
+		12: "col-span-1 sm:col-span-12",
+	};
+	const columns = $derived(Math.min(12, Math.max(1, field.admin.columns ?? 12)));
+	const columnClass = $derived(columnClasses[columns] ?? columnClasses[12]);
+	const inheritedFrom = $derived(
+		form.isInherited(field.path) ? form.localizationSource(field.path) : undefined
+	);
+	const inheritedFromLabel = $derived(contentLocaleLabel(runtime.contentLocales, inheritedFrom));
+	const missingLocale = $derived(
+		field.localized === true &&
+			form.contentLocale !== undefined &&
+			form.get(field.path) === undefined
+	);
+
+	function renderField() {
+		if (plugin.component !== undefined) return plugin.component;
+
+		switch (plugin.type) {
+			case "text":
+				return TextField;
+			case "select":
+				return SelectField;
+			case "radio":
+				return RadioField;
+			case "point":
+				return PointField;
+			case "ui":
+				return UIField;
+			case "join":
+				return JoinField;
+			case "virtual":
+				return VirtualField;
+			case "group":
+			case "array":
+			case "blocks":
+				return NestedField;
+			case "relationship":
+			case "upload":
+				return RelationshipField;
+			default:
+				return ScalarField;
+		}
+	}
+</script>
+
+{#if visible}<div class={columnClass}>
+		{const RenderField = $derived(renderField())}
+		<RenderField field={presentedField} {form} {authoring} i18n={runtime.i18n} />
+		{#if inheritedFrom !== undefined}<p
+				class="mt-1 font-mono text-[10px] text-foreground-faint"
+				data-localization-source={inheritedFrom}
+			>
+				{runtime.i18n.t("documents:inheritedFrom", {
+					locale: inheritedFromLabel ?? inheritedFrom,
+				})}
+			</p>{:else if missingLocale}<p
+				class="mt-1 font-mono text-[10px] text-foreground-faint"
+				data-localization-missing={form.contentLocale}
+			>
+				{runtime.i18n.t("documents:missingTranslation", {
+					locale: activeContentLocaleLabel ?? form.contentLocale ?? "",
+				})}
+			</p>{/if}
+	</div>{/if}

package/src/fields/field-shell.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { SchemaField, ValidationIssue } from "@riducms/protocol";
+	import type { Snippet } from "svelte";
+
+	import { FieldFrame } from "@riducms/ui";
+
+	let {
+		field,
+		issues = [],
+		children,
+	}: {
+		field: SchemaField;
+		issues?: ValidationIssue[];
+		children: Snippet;
+	} = $props();
+	const errorMessages = $derived(issues.map((issue) => issue.message));
+</script>
+
+<div data-field-path={field.path}>
+	<FieldFrame
+		controlID={field.id}
+		label={field.admin.label}
+		required={field.required}
+		readOnly={field.admin.readOnly}
+		description={field.admin.description}
+		errors={errorMessages}
+	>
+		{@render children()}
+	</FieldFrame>
+</div>

package/src/fields/field-tab-layout.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { SchemaField, SchemaFieldTabGroup } from "@riducms/protocol";
+
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from "@admin/components/ui/tabs";
+	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import FieldLayout from "@admin/fields/field-layout.svelte";
+
+	let {
+		fields,
+		form,
+		tabGroup,
+	}: {
+		fields: readonly SchemaField[];
+		form: FormController;
+		tabGroup: SchemaFieldTabGroup;
+	} = $props();
+	const runtime = getAdminRuntime();
+	const fallbackTab = $derived(runtime.i18n.t("fields:content"));
+	const tabs = $derived.by(() => {
+		const entries: Array<{ key: string; label: string }> = [];
+		for (const field of fields) {
+			const key = field.admin.tab ?? "";
+			if (entries.some((entry) => entry.key === key)) continue;
+			entries.push({
+				key,
+				label:
+					field.admin.tab === undefined
+						? fallbackTab
+						: runtime.i18n.text(field.admin.tab, field.admin.tabTranslations),
+			});
+		}
+		return entries;
+	});
+	const accessibleLabel = $derived(
+		runtime.i18n.t("fields:sections", {
+			labels: runtime.i18n.formatList(tabs.map((tab) => tab.label)),
+			count: tabs.length,
+		})
+	);
+	let selectedTab = $state("");
+	let revealedIssueSignature = $state("");
+	const activeTab = $derived(
+		tabs.some((tab) => tab.key === selectedTab) ? selectedTab : (tabs[0]?.key ?? "")
+	);
+
+	function issueCountForTab(tab: string) {
+		return fields.filter(
+			(field) => (field.admin.tab ?? "") === tab && form.issuesFor(field.path).length > 0
+		).length;
+	}
+
+	$effect(() => {
+		const signature = form.issues.map((issue) => `${issue.code}:${issue.path}`).join("|");
+		if (signature === "" || signature === revealedIssueSignature) return;
+		revealedIssueSignature = signature;
+		const issueTab = tabs.find((tab) => issueCountForTab(tab.key) > 0);
+		if (issueTab !== undefined) selectedTab = issueTab.key;
+	});
+</script>
+
+<Tabs
+	class="col-span-1 mb-1 gap-0 sm:col-span-12"
+	value={activeTab}
+	onValueChange={(tab) => (selectedTab = tab)}
+	data-field-tab-group={tabGroup.id}
+>
+	<TabsList
+		variant="line"
+		class="-ms-5 h-12 w-[calc(100%+2.5rem)] justify-start gap-6 overflow-x-auto overflow-y-hidden border-b border-control-border px-5 sm:-ms-8 sm:w-[calc(100%+4rem)] sm:px-8 lg:-ms-[60px] lg:w-[calc(100%+120px)] lg:px-[60px]"
+		aria-label={accessibleLabel}
+	>
+		{#each tabs as tab (tab.key)}
+			{const issueCount = $derived(issueCountForTab(tab.key))}
+			<TabsTrigger
+				class="h-12 flex-none rounded-none px-px text-[14px] font-medium focus-visible:bg-control focus-visible:outline-none data-[state=active]:border-b-foreground-strong!"
+				value={tab.key}
+			>
+				{tab.label}{#if issueCount > 0}<span
+						class="font-mono grid min-w-4 place-items-center rounded-full bg-destructive/14 px-1 text-[9px] text-destructive"
+						aria-label={runtime.i18n.t("fields:invalidCount", { count: issueCount })}
+					>
+						{runtime.i18n.formatNumber(issueCount)}
+					</span>{/if}
+			</TabsTrigger>
+		{/each}
+	</TabsList>
+	{#each tabs as tab (tab.key)}
+		<TabsContent value={tab.key} class="pt-6">
+			{#if activeTab === tab.key}
+				<FieldLayout
+					fields={fields.filter((field) => (field.admin.tab ?? "") === tab.key)}
+					{form}
+					suppressedTabGroupID={tabGroup.id}
+				/>
+			{/if}
+		</TabsContent>
+	{/each}
+</Tabs>