@riducms/plugin-seo 0.1.4 → 0.2.0

package/package.json

@@ -3,14 +3,14 @@
 		"url": "https://github.com/riducms/ridu/issues"
 	},
 	"dependencies": {
-		"@riducms/plugin": "0.1.4",
-		"@riducms/protocol": "0.1.4",
-		"@riducms/ui": "0.1.4",
+		"@riducms/plugin": "0.2.0",
+		"@riducms/protocol": "0.2.0",
+		"@riducms/ui": "0.2.0",
 		"svelte": "^5.56.8"
 	},
 	"description": "Search metadata authoring for Ridu's official SEO plugin.",
 	"devDependencies": {
-		"@riducms/build": "0.1.4"
+		"@riducms/build": "0.2.0"
 	},
 	"exports": {
 		".": "./src/index.ts"
@@ -37,5 +37,5 @@
 		"test": "bun test"
 	},
 	"type": "module",
-	"version": "0.1.4"
+	"version": "0.2.0"
 }

package/src/generation-controller.svelte.ts

@@ -1,4 +1,4 @@
-import type { FieldAuthoringHost, FieldForm } from "@riducms/plugin";
+import type { FieldAuthoringHost, FieldDocumentForm } from "@riducms/plugin";
 
 import { generationScopeToken, generationSnapshotToken } from "@plugin-seo/generation-snapshot";
 
@@ -13,7 +13,7 @@ export class GenerationController {
 
 	async run(
 		authoring: FieldAuthoringHost | undefined,
-		form: FieldForm,
+		form: FieldDocumentForm,
 		path: string
 	): Promise<string | undefined> {
 		const requestPlugin = authoring?.requestPlugin;

package/src/index.ts

@@ -1,4 +1,12 @@
-import { ADMIN_PLUGIN_API_VERSION, defineAdminPlugin, defineFieldPlugin } from "@riducms/plugin";
+import { defineAdminPlugin, defineFieldComponent } from "@riducms/plugin/authoring/v1";
+import {
+	decodeString,
+	decodeUI,
+	decodeLengthConfig,
+	decodeOverviewConfig,
+	decodeImageConfig,
+	decodePreviewConfig,
+} from "@plugin-seo/seo-config";
 
 import { seoMessages } from "@plugin-seo/messages";
 
@@ -8,49 +16,41 @@ import MetaTitleField from "@plugin-seo/meta-title-field.svelte";
 import OverviewField from "@plugin-seo/overview-field.svelte";
 import PreviewField from "@plugin-seo/preview-field.svelte";
 
-export const seoFieldPlugins = [
-	defineFieldPlugin({
-		type: "ui",
-		key: "seo",
-		componentKey: "overview",
-		component: OverviewField,
-		canRender: (field) => field.admin.component?.component === "overview",
-	}),
-	defineFieldPlugin({
-		type: "text",
-		key: "seo",
-		componentKey: "title",
-		component: MetaTitleField,
-		canRender: (field) => field.admin.component?.component === "title",
-	}),
-	defineFieldPlugin({
-		type: "textarea",
-		key: "seo",
-		componentKey: "description",
-		component: MetaDescriptionField,
-		canRender: (field) => field.admin.component?.component === "description",
-	}),
-	defineFieldPlugin({
-		type: "upload",
-		key: "seo",
-		componentKey: "image",
-		component: MetaImageField,
-		canRender: (field) => field.admin.component?.component === "image",
-	}),
-	defineFieldPlugin({
-		type: "ui",
-		key: "seo",
-		componentKey: "preview",
-		component: PreviewField,
-		canRender: (field) => field.admin.component?.component === "preview",
-	}),
-] as const;
-
 export const seoAdminPlugin = defineAdminPlugin({
-	apiVersion: ADMIN_PLUGIN_API_VERSION,
 	key: "seo",
 	pairingVersion: 1,
-	fields: seoFieldPlugins,
+	components: {
+		overview: defineFieldComponent({
+			type: "ui",
+			component: OverviewField,
+			decodeValue: decodeUI,
+			decodeConfig: decodeOverviewConfig,
+		}),
+		title: defineFieldComponent({
+			type: "text",
+			component: MetaTitleField,
+			decodeValue: decodeString,
+			decodeConfig: (raw: unknown) => decodeLengthConfig(raw, "text"),
+		}),
+		description: defineFieldComponent({
+			type: "textarea",
+			component: MetaDescriptionField,
+			decodeValue: decodeString,
+			decodeConfig: (raw: unknown) => decodeLengthConfig(raw, "textarea"),
+		}),
+		image: defineFieldComponent({
+			type: "upload",
+			component: MetaImageField,
+			decodeValue: decodeString,
+			decodeConfig: decodeImageConfig,
+		}),
+		preview: defineFieldComponent({
+			type: "ui",
+			component: PreviewField,
+			decodeValue: decodeUI,
+			decodeConfig: decodePreviewConfig,
+		}),
+	},
 	messages: seoMessages,
 });
 

package/src/meta-description-field.svelte

@@ -1,26 +1,35 @@
 <script lang="ts">
-	import type { FieldComponentProps } from "@riducms/plugin";
-	import { Button, FieldFrame, Textarea } from "@riducms/ui";
+	import type { PluginFieldProps } from "@riducms/plugin";
+	import { Button, FieldFrame, Textarea, fieldControlARIA } from "@riducms/ui";
 
 	import { GenerationController } from "@plugin-seo/generation-controller.svelte";
 	import LengthIndicator from "@plugin-seo/length-indicator.svelte";
-	import { lengthConfig } from "@plugin-seo/seo-config";
+	import type { LengthConfig } from "@plugin-seo/seo-config";
+
+	let {
+		field: binding,
+		form,
+		config,
+		i18n,
+		authoring,
+	}: PluginFieldProps<string, LengthConfig, "textarea"> = $props();
+	const field = $derived(binding.schema);
+	const editingBlocked = $derived(binding.readOnly);
 
-	let { field, form, i18n, authoring }: FieldComponentProps = $props();
-	const config = $derived(lengthConfig(field));
 	const minLength = $derived(field.textarea?.minLength ?? config.minLength);
 	const maxLength = $derived(field.textarea?.maxLength ?? config.maxLength);
-	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 value = $derived(String(binding.value ?? ""));
+	const issues = $derived(binding.issues);
+	const inputARIA = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
+	);
 	const generation = new GenerationController();
 
-	$effect(() => form.register(field.path));
 	$effect(() => () => generation.cancel());
 
 	async function generate() {
 		const result = await generation.run(authoring, form, "generate-description");
-		if (result !== undefined) form.set(field.path, result);
+		if (result !== undefined) binding.set(result);
 	}
 </script>
 
@@ -49,7 +58,7 @@
 					variant="link"
 					size="xs"
 					class="h-auto px-0"
-					disabled={field.admin.readOnly || generation.status === "pending"}
+					disabled={editingBlocked || generation.status === "pending"}
 					aria-busy={generation.status === "pending"}
 					onclick={generate}
 				>
@@ -61,14 +70,14 @@
 			id={field.id}
 			name={field.path}
 			required={field.required}
-			readonly={field.admin.readOnly}
+			readonly={editingBlocked}
 			minlength={field.textarea?.minLength}
 			maxlength={field.textarea?.maxLength}
-			aria-invalid={issues.length > 0}
-			aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-			aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
+			aria-invalid={inputARIA["aria-invalid"]}
+			aria-describedby={inputARIA["aria-describedby"]}
+			aria-errormessage={inputARIA["aria-errormessage"]}
 			{value}
-			oninput={(event) => form.set(field.path, event.currentTarget.value)}
+			oninput={(event) => binding.set(event.currentTarget.value)}
 		/>
 		<LengthIndicator text={value} {minLength} {maxLength} {i18n} />
 		{#if generation.status === "error"}<p class="text-[12px] text-destructive" role="alert">

package/src/meta-image-field.svelte

@@ -1,17 +1,27 @@
 <script lang="ts">
-	import type { FieldComponentProps, FieldDocument } from "@riducms/plugin";
-	import { Button, FieldFrame } from "@riducms/ui";
+	import type { PluginFieldProps, FieldDocument } from "@riducms/plugin";
+	import { Button, FieldFrame, fieldControlARIA } from "@riducms/ui";
 	import ImageIcon from "~icons/lucide/image";
 	import SearchIcon from "~icons/lucide/search";
 	import XIcon from "~icons/lucide/x";
 
 	import { GenerationController } from "@plugin-seo/generation-controller.svelte";
-	import { imageGenerationEnabled } from "@plugin-seo/seo-config";
 
-	let { field, form, i18n, authoring }: FieldComponentProps = $props();
-	const generationEnabled = $derived(imageGenerationEnabled(field));
-	const value = $derived(String(form.get(field.path) ?? ""));
-	const issues = $derived(form.issuesFor(field.path));
+	let {
+		field: binding,
+		form,
+		config,
+		i18n,
+		authoring,
+	}: PluginFieldProps<string, { generate: boolean }, "upload"> = $props();
+	const field = $derived(binding.schema);
+	const editingBlocked = $derived(binding.readOnly);
+	const generationEnabled = $derived(config.generate);
+	const value = $derived(String(binding.value ?? ""));
+	const issues = $derived(binding.issues);
+	const controlARIA = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
+	);
 	const target = $derived(
 		authoring?.collections.find(
 			(collection) =>
@@ -26,7 +36,6 @@
 	let loadFailed = $state(false);
 	const generation = new GenerationController();
 
-	$effect(() => form.register(field.path));
 	$effect(() => () => generation.cancel());
 	$effect(() => {
 		const id = value;
@@ -53,11 +62,11 @@
 
 	async function generate() {
 		const result = await generation.run(authoring, form, "generate-image");
-		if (result !== undefined) form.set(field.path, result);
+		if (result !== undefined) binding.set(result);
 	}
 
 	function commit(ids: string[]) {
-		form.set(field.path, ids[0] ?? null);
+		binding.set(ids[0] ?? null);
 		browserOpen = false;
 	}
 
@@ -92,7 +101,7 @@
 					variant="link"
 					size="xs"
 					class="h-auto px-0"
-					disabled={field.admin.readOnly || generation.status === "pending"}
+					disabled={editingBlocked || generation.status === "pending"}
 					aria-busy={generation.status === "pending"}
 					onclick={generate}
 				>
@@ -103,8 +112,10 @@
 			<Button
 				id={field.id}
 				aria-label={i18n.t("plugin.seo:selectImage")}
+				{...controlARIA}
 				variant="outline"
-				disabled={field.admin.readOnly || target === undefined || ReferenceBrowser === undefined}
+				class="aria-invalid:!border-destructive"
+				disabled={editingBlocked || target === undefined || ReferenceBrowser === undefined}
 				onclick={() => openBrowser("select")}
 			>
 				<SearchIcon />
@@ -112,14 +123,16 @@
 			</Button>
 		{:else}
 			<div
-				class="flex min-w-0 items-center gap-2.5 rounded-[4px] border border-control-border bg-control p-2"
+				class="flex min-w-0 items-center gap-2.5 rounded-[4px] border border-control-border bg-control p-2 aria-invalid:!border-destructive/65"
+				aria-invalid={controlARIA["aria-invalid"]}
 			>
 				<button
 					id={field.id}
 					aria-label={i18n.t("plugin.seo:inspectImage")}
+					{...controlARIA}
 					type="button"
 					class="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 disabled:cursor-not-allowed"
-					disabled={target === undefined || ReferenceBrowser === undefined}
+					disabled={editingBlocked || target === undefined || ReferenceBrowser === undefined}
 					onclick={() => openBrowser("inspect")}
 				>
 					<span
@@ -142,14 +155,20 @@
 					</span>
 				</button>
 				{#if !field.admin.readOnly}<div class="flex shrink-0 gap-1">
-						<Button variant="outline" size="xs" onclick={() => openBrowser("select")}>
+						<Button
+							variant="outline"
+							size="xs"
+							disabled={editingBlocked}
+							onclick={() => openBrowser("select")}
+						>
 							<SearchIcon aria-hidden="true" />
 							{i18n.t("plugin.seo:replaceImage")}
 						</Button>
 						<Button
 							variant="ghost"
 							size="icon-xs"
-							onclick={() => form.set(field.path, null)}
+							disabled={editingBlocked}
+							onclick={() => binding.set(null)}
 							aria-label={i18n.t("plugin.seo:removeImage")}
 						>
 							<XIcon />

package/src/meta-title-field.svelte

@@ -1,26 +1,35 @@
 <script lang="ts">
-	import type { FieldComponentProps } from "@riducms/plugin";
-	import { Button, FieldFrame, Input } from "@riducms/ui";
+	import type { PluginFieldProps } from "@riducms/plugin";
+	import { Button, FieldFrame, Input, fieldControlARIA } from "@riducms/ui";
 
 	import { GenerationController } from "@plugin-seo/generation-controller.svelte";
 	import LengthIndicator from "@plugin-seo/length-indicator.svelte";
-	import { lengthConfig } from "@plugin-seo/seo-config";
+	import type { LengthConfig } from "@plugin-seo/seo-config";
+
+	let {
+		field: binding,
+		form,
+		config,
+		i18n,
+		authoring,
+	}: PluginFieldProps<string, LengthConfig, "text"> = $props();
+	const field = $derived(binding.schema);
+	const editingBlocked = $derived(binding.readOnly);
 
-	let { field, form, i18n, authoring }: FieldComponentProps = $props();
-	const config = $derived(lengthConfig(field));
 	const minLength = $derived(field.text?.minLength ?? config.minLength);
 	const maxLength = $derived(field.text?.maxLength ?? config.maxLength);
-	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 value = $derived(String(binding.value ?? ""));
+	const issues = $derived(binding.issues);
+	const inputARIA = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
+	);
 	const generation = new GenerationController();
 
-	$effect(() => form.register(field.path));
 	$effect(() => () => generation.cancel());
 
 	async function generate() {
 		const result = await generation.run(authoring, form, "generate-title");
-		if (result !== undefined) form.set(field.path, result);
+		if (result !== undefined) binding.set(result);
 	}
 </script>
 
@@ -49,7 +58,7 @@
 					variant="link"
 					size="xs"
 					class="h-auto px-0"
-					disabled={field.admin.readOnly || generation.status === "pending"}
+					disabled={editingBlocked || generation.status === "pending"}
 					aria-busy={generation.status === "pending"}
 					onclick={generate}
 				>
@@ -61,14 +70,14 @@
 			id={field.id}
 			name={field.path}
 			required={field.required}
-			readonly={field.admin.readOnly}
+			readonly={editingBlocked}
 			minlength={field.text?.minLength}
 			maxlength={field.text?.maxLength}
-			aria-invalid={issues.length > 0}
-			aria-describedby={hasMessage ? `${field.id}-message` : undefined}
-			aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
+			aria-invalid={inputARIA["aria-invalid"]}
+			aria-describedby={inputARIA["aria-describedby"]}
+			aria-errormessage={inputARIA["aria-errormessage"]}
 			{value}
-			oninput={(event) => form.set(field.path, event.currentTarget.value)}
+			oninput={(event) => binding.set(event.currentTarget.value)}
 		/>
 		<LengthIndicator text={value} {minLength} {maxLength} {i18n} />
 		{#if generation.status === "error"}<p class="text-[12px] text-destructive" role="alert">

package/src/overview-field.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
-	import type { FieldComponentProps } from "@riducms/plugin";
+	import type { PluginFieldProps } from "@riducms/plugin";
 	import CheckIcon from "~icons/lucide/check";
 	import XIcon from "~icons/lucide/x";
 
-	import { overviewConfig } from "@plugin-seo/seo-config";
+	import type { OverviewConfig } from "@plugin-seo/seo-config";
+
+	let {
+		field: binding,
+		form,
+		config,
+		i18n,
+	}: PluginFieldProps<undefined, OverviewConfig, "ui"> = $props();
+	const field = $derived(binding.schema);
 
-	let { field, form, i18n }: FieldComponentProps = $props();
-	const config = $derived(overviewConfig(field));
 	const title = $derived(form.get(config.titlePath));
 	const description = $derived(form.get(config.descriptionPath));
 	const image = $derived(form.get(config.imagePath));

package/src/preview-field.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-	import type { FieldComponentProps } from "@riducms/plugin";
+	import type { PluginFieldProps } from "@riducms/plugin";
 
 	import { GenerationController } from "@plugin-seo/generation-controller.svelte";
-	import { previewConfig } from "@plugin-seo/seo-config";
+	import type { PreviewConfig } from "@plugin-seo/seo-config";
+
+	let {
+		field: binding,
+		form,
+		config,
+		i18n,
+		authoring,
+	}: PluginFieldProps<undefined, PreviewConfig, "ui"> = $props();
+	const field = $derived(binding.schema);
 
-	let { field, form, i18n, authoring }: FieldComponentProps = $props();
-	const config = $derived(previewConfig(field));
 	const title = $derived(String(form.get(config.titlePath) ?? ""));
 	const description = $derived(String(form.get(config.descriptionPath) ?? ""));
 	let href = $state("");

package/src/seo-config.ts

@@ -1,5 +1,3 @@
-import type { SchemaField } from "@riducms/protocol";
-
 export interface LengthConfig {
 	generate: boolean;
 	minLength: number;
@@ -22,17 +20,25 @@ export interface PreviewConfig {
 	descriptionPath: string;
 }
 
-export function lengthConfig(field: SchemaField): LengthConfig {
-	const value = componentConfig(field);
+export function decodeLengthConfig(raw: unknown, type: "text" | "textarea"): LengthConfig {
+	const value = componentConfig(raw, ["generate", "minLength", "maxLength"]);
 	return {
 		generate: value.generate === true,
-		minLength: positiveInteger(value.minLength, field.type === "textarea" ? 100 : 50),
-		maxLength: positiveInteger(value.maxLength, field.type === "textarea" ? 150 : 60),
+		minLength: positiveInteger(value.minLength, type === "textarea" ? 100 : 50),
+		maxLength: positiveInteger(value.maxLength, type === "textarea" ? 150 : 60),
 	};
 }
 
-export function overviewConfig(field: SchemaField): OverviewConfig {
-	const value = componentConfig(field);
+export function decodeOverviewConfig(raw: unknown): OverviewConfig {
+	const value = componentConfig(raw, [
+		"titlePath",
+		"descriptionPath",
+		"imagePath",
+		"titleMin",
+		"titleMax",
+		"descriptionMin",
+		"descriptionMax",
+	]);
 	return {
 		titlePath: stringValue(value.titlePath, "meta.title"),
 		descriptionPath: stringValue(value.descriptionPath, "meta.description"),
@@ -44,8 +50,8 @@ export function overviewConfig(field: SchemaField): OverviewConfig {
 	};
 }
 
-export function previewConfig(field: SchemaField): PreviewConfig {
-	const value = componentConfig(field);
+export function decodePreviewConfig(raw: unknown): PreviewConfig {
+	const value = componentConfig(raw, ["generate", "titlePath", "descriptionPath"]);
 	return {
 		generate: value.generate === true,
 		titlePath: stringValue(value.titlePath, "meta.title"),
@@ -53,21 +59,38 @@ export function previewConfig(field: SchemaField): PreviewConfig {
 	};
 }
 
-export function imageGenerationEnabled(field: SchemaField) {
-	return componentConfig(field).generate === true;
+export function decodeImageConfig(raw: unknown): { generate: boolean } {
+	return { generate: componentConfig(raw, ["generate"]).generate === true };
 }
-
-function componentConfig(field: SchemaField): Record<string, unknown> {
-	const value = field.admin.component?.config;
-	return typeof value === "object" && value !== null && !Array.isArray(value)
-		? (value as Record<string, unknown>)
-		: {};
+function componentConfig(raw: unknown, allowed: readonly string[]): Record<string, unknown> {
+	if (typeof raw !== "object" || raw === null || Array.isArray(raw))
+		throw new Error("SEO config must be an object.");
+	const value = raw as Record<string, unknown>;
+	for (const key of Object.keys(value))
+		if (!allowed.includes(key)) throw new Error(`Unsupported SEO config key ${key}.`);
+	if (value.generate !== undefined && typeof value.generate !== "boolean")
+		throw new Error("generate must be a boolean.");
+	return value;
+}
+export function decodeString(value: unknown): string {
+	if (typeof value !== "string") throw new Error("Expected a string value.");
+	return value;
+}
+export function decodeUI(value: unknown): undefined {
+	if (value !== undefined) throw new Error("UI fields have no stored value.");
+	return undefined;
 }
 
 function stringValue(value: unknown, fallback: string) {
-	return typeof value === "string" && value.length > 0 ? value : fallback;
+	if (value === undefined) return fallback;
+	if (typeof value !== "string" || !value.length)
+		throw new Error("Expected a nonempty string config value.");
+	return value;
 }
 
 function positiveInteger(value: unknown, fallback: number) {
-	return typeof value === "number" && Number.isInteger(value) && value > 0 ? value : fallback;
+	if (value === undefined) return fallback;
+	if (typeof value !== "number" || !Number.isInteger(value) || value <= 0)
+		throw new Error("Expected a positive integer config value.");
+	return value;
 }