@riducms/plugin-seo 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Haniel Ubogu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# `@riducms/plugin-seo`
+
+The Svelte admin UI for Ridu's Go SEO plugin. It provides a metadata overview, title and description
+guidance, upload selection, generator controls, and a live search-result preview.
+
+For an existing project, install it in the root and admin workspaces, configure `seo.New(...)`, then
+start development:
+
+```sh
+npm install @riducms/plugin-seo
+npm install --workspace admin @riducms/plugin-seo
+npm run dev
+```
+
+`ridu dev` regenerates contracts and synchronizes safe additive development changes. Before
+deployment, create and review the immutable adapter migration with
+`npm run ridu -- migrate create --name add-seo`.
+
+The generated registry imports `seoAdminPlugin`; do not register it again. Generated title,
+description, image, and URL values remain editable and pass through normal validation and access
+rules when saved.
+
+See the [SEO guide](../../website/src/content/docs/seo.md) for setup, callbacks, migrations, and
+verification.

package/package.json

@@ -0,0 +1,41 @@
+{
+	"bugs": {
+		"url": "https://github.com/riducms/ridu/issues"
+	},
+	"dependencies": {
+		"@riducms/plugin": "0.1.0",
+		"@riducms/protocol": "0.1.0",
+		"@riducms/ui": "0.1.0",
+		"svelte": "^5.56.8"
+	},
+	"description": "Search metadata authoring for Ridu's official SEO plugin.",
+	"devDependencies": {
+		"@riducms/build": "0.1.0"
+	},
+	"exports": {
+		".": "./src/index.ts"
+	},
+	"files": [
+		"src",
+		"LICENSE"
+	],
+	"homepage": "https://riducms.com",
+	"license": "MIT",
+	"name": "@riducms/plugin-seo",
+	"publishConfig": {
+		"access": "public",
+		"provenance": true
+	},
+	"repository": {
+		"directory": "packages/plugin-seo",
+		"type": "git",
+		"url": "git+https://github.com/riducms/ridu.git"
+	},
+	"scripts": {
+		"build": "vite build",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"test": "bun test"
+	},
+	"type": "module",
+	"version": "0.1.0"
+}

package/src/generation-controller.svelte.ts

@@ -0,0 +1,84 @@
+import type { FieldAuthoringHost, FieldForm } from "@riducms/plugin";
+
+import { generationScopeToken, generationSnapshotToken } from "@plugin-seo/generation-snapshot";
+
+interface GenerationResponse {
+	result: string;
+}
+
+export class GenerationController {
+	status = $state<"idle" | "pending" | "error">("idle");
+	#generation = 0;
+	#request: AbortController | undefined;
+
+	async run(
+		authoring: FieldAuthoringHost | undefined,
+		form: FieldForm,
+		path: string
+	): Promise<string | undefined> {
+		const requestPlugin = authoring?.requestPlugin;
+		const snapshot = form.snapshot;
+		const resource = form.resource;
+		if (requestPlugin === undefined || snapshot === undefined || resource === undefined) {
+			this.status = "error";
+			return undefined;
+		}
+		this.#request?.abort();
+		const request = new AbortController();
+		this.#request = request;
+		const generation = ++this.#generation;
+		this.status = "pending";
+		const document = snapshot.call(form);
+		const documentRevision = generationSnapshotToken(document);
+		const scope = generationScopeToken(resource, form.contentLocale);
+		try {
+			const response = await requestPlugin<unknown>(
+				path,
+				{
+					...(resource.global
+						? { global: resource.collection }
+						: { collection: resource.collection }),
+					id: resource.id,
+					locale: form.contentLocale,
+					document,
+				},
+				request.signal
+			);
+			if (
+				generation !== this.#generation ||
+				request.signal.aborted ||
+				generationSnapshotToken(snapshot.call(form)) !== documentRevision ||
+				generationScopeToken(form.resource, form.contentLocale) !== scope
+			) {
+				if (generation === this.#generation) this.status = "idle";
+				return undefined;
+			}
+			if (!isGenerationResponse(response))
+				throw new Error("SEO generation returned an invalid response");
+			this.status = "idle";
+			return response.result;
+		} catch {
+			if (generation !== this.#generation || request.signal.aborted) return undefined;
+			this.status = "error";
+			return undefined;
+		} finally {
+			if (this.#request === request) this.#request = undefined;
+		}
+	}
+
+	cancel() {
+		this.#generation += 1;
+		this.#request?.abort();
+		this.#request = undefined;
+		if (this.status === "pending") this.status = "idle";
+	}
+}
+
+function isGenerationResponse(value: unknown): value is GenerationResponse {
+	return (
+		typeof value === "object" &&
+		value !== null &&
+		"result" in value &&
+		typeof value.result === "string"
+	);
+}

package/src/generation-snapshot.ts

@@ -0,0 +1,17 @@
+import type { FieldFormResource } from "@riducms/plugin";
+
+export function generationSnapshotToken(document: Readonly<Record<string, unknown>>): string {
+	return JSON.stringify(document);
+}
+
+export function generationScopeToken(
+	resource: FieldFormResource | undefined,
+	locale: string | undefined
+): string {
+	return JSON.stringify({
+		collection: resource?.collection ?? "",
+		global: resource?.global === true,
+		id: resource?.id ?? "",
+		locale: locale ?? "",
+	});
+}

package/src/index.ts

@@ -0,0 +1,59 @@
+import { ADMIN_PLUGIN_API_VERSION, defineAdminPlugin, defineFieldPlugin } from "@riducms/plugin";
+
+import { seoMessages } from "@plugin-seo/messages";
+
+import MetaDescriptionField from "@plugin-seo/meta-description-field.svelte";
+import MetaImageField from "@plugin-seo/meta-image-field.svelte";
+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,
+	messages: seoMessages,
+});
+
+export { lengthState, type LengthState, type LengthStatus } from "@plugin-seo/length-indicator";
+export { generationScopeToken, generationSnapshotToken } from "@plugin-seo/generation-snapshot";
+export { seoMessages } from "@plugin-seo/messages";

package/src/length-indicator.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { AdminI18n } from "@riducms/plugin";
+
+	import { lengthState } from "@plugin-seo/length-indicator";
+
+	let {
+		text,
+		minLength,
+		maxLength,
+		i18n,
+	}: { text: string; minLength: number; maxLength: number; i18n: AdminI18n } = $props();
+	const state = $derived(lengthState(text, minLength, maxLength));
+	const tone = $derived(
+		state.status === "good" ? "success" : state.status === "almostThere" ? "warning" : "danger"
+	);
+	const suffix = $derived(
+		state.status === "missing" || state.status === "tooShort" || state.status === "almostThere"
+			? i18n.t("plugin.seo:charactersToGo", { characters: state.remaining })
+			: state.status === "tooLong"
+				? i18n.t("plugin.seo:charactersTooMany", { characters: state.remaining })
+				: i18n.t("plugin.seo:charactersLeft", { characters: state.remaining })
+	);
+</script>
+
+<div class="flex min-w-0 items-center gap-2.5" data-length-status={state.status}>
+	<span
+		class={[
+			"shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
+			tone === "success" && "bg-success/12 text-success",
+			tone === "warning" && "bg-warning/12 text-warning",
+			tone === "danger" && "bg-destructive/10 text-destructive",
+		]}
+	>
+		{i18n.t(`plugin.seo:${state.status}`)}
+	</span>
+	<small class="shrink-0 text-[11px] text-foreground-muted">
+		{i18n.t("plugin.seo:characterCount", {
+			current: state.length,
+			minLength,
+			maxLength,
+		})}{suffix}
+	</small>
+	<span
+		class="h-0.5 min-w-8 flex-1 overflow-hidden rounded-full bg-control-border"
+		aria-hidden="true"
+	>
+		<span
+			class={[
+				"block h-full origin-left transition-transform duration-150 motion-reduce:transition-none",
+				tone === "success" && "bg-success",
+				tone === "warning" && "bg-warning",
+				tone === "danger" && "bg-destructive",
+			]}
+			style:transform="scaleX({state.progress})"
+		></span>
+	</span>
+</div>

package/src/length-indicator.ts

@@ -0,0 +1,32 @@
+export type LengthStatus = "missing" | "tooShort" | "almostThere" | "good" | "tooLong";
+
+export interface LengthState {
+	status: LengthStatus;
+	length: number;
+	progress: number;
+	remaining: number;
+}
+
+export function lengthState(text: string, minLength: number, maxLength: number): LengthState {
+	const length = text.length;
+	if (length === 0) return { status: "missing", length, progress: 0, remaining: minLength };
+	if (length < minLength) {
+		const progress = Math.min(1, length / minLength);
+		return {
+			status: progress > 0.9 ? "almostThere" : "tooShort",
+			length,
+			progress,
+			remaining: minLength - length,
+		};
+	}
+	if (length <= maxLength) {
+		const range = Math.max(1, maxLength - minLength);
+		return {
+			status: "good",
+			length,
+			progress: Math.min(1, (length - minLength) / range),
+			remaining: maxLength - length,
+		};
+	}
+	return { status: "tooLong", length, progress: 1, remaining: length - maxLength };
+}

package/src/messages.ts

@@ -0,0 +1,96 @@
+import { defineAdminMessages } from "@riducms/plugin";
+
+export const seoMessages = defineAdminMessages({
+	fallback: {
+		almostThere: "Almost there",
+		autoGenerate: "Auto-generate",
+		bestPractices: "Best practices",
+		cancelled: "Generation was cancelled.",
+		characterCount: "{current}/{minLength}-{maxLength} chars",
+		charactersLeft: ", {characters} left over",
+		charactersToGo: ", {characters} to go",
+		charactersTooMany: ", {characters} too many",
+		checksPassing: "{current}/{max} checks are passing",
+		generationFailed: "Could not generate this value. Try again.",
+		good: "Good",
+		image: "Image",
+		imageAutoGenerationTip: "Generate an image from the current document, or choose one manually.",
+		imageUnavailable: "Referenced image is unavailable.",
+		inspectImage: "Inspect image",
+		lengthTipDescription: "Aim for {minLength}–{maxLength} characters. ",
+		lengthTipTitle: "Aim for {minLength}–{maxLength} characters. ",
+		missing: "Missing",
+		noImage: "No image",
+		preview: "Preview",
+		previewDescription: "A representative search result using the current unsaved values.",
+		removeImage: "Remove image",
+		replaceImage: "Replace image",
+		selectImage: "Select image",
+		tooLong: "Too long",
+		tooShort: "Too short",
+		title: "Title",
+		description: "Description",
+	},
+	translations: {
+		fr: {
+			almostThere: "Presque terminé",
+			autoGenerate: "Générer automatiquement",
+			bestPractices: "Bonnes pratiques",
+			cancelled: "La génération a été annulée.",
+			characterCount: "{current}/{minLength}-{maxLength} caractères",
+			charactersLeft: ", {characters} restants",
+			charactersToGo: ", encore {characters}",
+			charactersTooMany: ", {characters} en trop",
+			checksPassing: "{current}/{max} vérifications réussies",
+			generationFailed: "Impossible de générer cette valeur. Réessayez.",
+			good: "Bon",
+			image: "Image",
+			imageAutoGenerationTip: "Générez une image depuis le document ou choisissez-en une.",
+			imageUnavailable: "L’image référencée n’est pas disponible.",
+			inspectImage: "Inspecter l’image",
+			lengthTipDescription: "Visez {minLength} à {maxLength} caractères. ",
+			lengthTipTitle: "Visez {minLength} à {maxLength} caractères. ",
+			missing: "Manquant",
+			noImage: "Aucune image",
+			preview: "Aperçu",
+			previewDescription: "Résultat de recherche représentatif avec les valeurs non enregistrées.",
+			removeImage: "Supprimer l’image",
+			replaceImage: "Remplacer l’image",
+			selectImage: "Sélectionner une image",
+			tooLong: "Trop long",
+			tooShort: "Trop court",
+			title: "Titre",
+			description: "Description",
+		},
+		ar: {
+			almostThere: "أوشكت على الانتهاء",
+			autoGenerate: "إنشاء تلقائي",
+			bestPractices: "أفضل الممارسات",
+			cancelled: "تم إلغاء الإنشاء.",
+			characterCount: "{current}/{minLength}-{maxLength} حرفًا",
+			charactersLeft: "، متبقٍ {characters}",
+			charactersToGo: "، يلزم {characters}",
+			charactersTooMany: "، زائد {characters}",
+			checksPassing: "تم اجتياز {current}/{max} من الفحوصات",
+			description: "الوصف",
+			generationFailed: "تعذر إنشاء هذه القيمة. حاول مرة أخرى.",
+			good: "جيد",
+			image: "الصورة",
+			imageAutoGenerationTip: "أنشئ صورة من المستند الحالي أو اختر واحدة يدويًا.",
+			imageUnavailable: "الصورة المشار إليها غير متاحة.",
+			inspectImage: "فحص الصورة",
+			lengthTipDescription: "استهدف {minLength}–{maxLength} حرفًا. ",
+			lengthTipTitle: "استهدف {minLength}–{maxLength} حرفًا. ",
+			missing: "مفقود",
+			noImage: "لا توجد صورة",
+			preview: "معاينة",
+			previewDescription: "نتيجة بحث تمثيلية باستخدام القيم الحالية غير المحفوظة.",
+			removeImage: "إزالة الصورة",
+			replaceImage: "استبدال الصورة",
+			selectImage: "اختيار صورة",
+			title: "العنوان",
+			tooLong: "طويل جدًا",
+			tooShort: "قصير جدًا",
+		},
+	},
+});

package/src/meta-description-field.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { FieldComponentProps } from "@riducms/plugin";
+	import { Button, FieldFrame, Textarea } 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";
+
+	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 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);
+	}
+</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={issues.map((issue) => issue.message)}
+	>
+		<div class="-mt-1 flex flex-wrap items-center gap-x-1 text-[11.5px] text-foreground-muted">
+			<span>{i18n.t("plugin.seo:lengthTipDescription", { minLength, maxLength })}</span>
+			<a
+				class="text-primary underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-ring/70"
+				href="https://developers.google.com/search/docs/appearance/snippet#meta-descriptions"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{i18n.t("plugin.seo:bestPractices")}
+			</a>
+			{#if config.generate}
+				<span aria-hidden="true">·</span>
+				<Button
+					variant="link"
+					size="xs"
+					class="h-auto px-0"
+					disabled={field.admin.readOnly || generation.status === "pending"}
+					aria-busy={generation.status === "pending"}
+					onclick={generate}
+				>
+					{i18n.t("plugin.seo:autoGenerate")}
+				</Button>
+			{/if}
+		</div>
+		<Textarea
+			id={field.id}
+			name={field.path}
+			required={field.required}
+			readonly={field.admin.readOnly}
+			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}
+			{value}
+			oninput={(event) => form.set(field.path, event.currentTarget.value)}
+		/>
+		<LengthIndicator text={value} {minLength} {maxLength} {i18n} />
+		{#if generation.status === "error"}<p class="text-[12px] text-destructive" role="alert">
+				{i18n.t("plugin.seo:generationFailed")}
+			</p>{/if}
+	</FieldFrame>
+</div>

package/src/meta-image-field.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import type { FieldComponentProps, FieldDocument } from "@riducms/plugin";
+	import { Button, FieldFrame } 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));
+	const target = $derived(
+		authoring?.collections.find(
+			(collection) =>
+				collection.slug === field.upload?.collectionSlug ||
+				collection.id === field.upload?.collectionId
+		)
+	);
+	const ReferenceBrowser = $derived(authoring?.referenceBrowser);
+	let browserOpen = $state(false);
+	let browserMode = $state<"inspect" | "select">("select");
+	let document = $state.raw<FieldDocument>();
+	let loadFailed = $state(false);
+	const generation = new GenerationController();
+
+	$effect(() => form.register(field.path));
+	$effect(() => () => generation.cancel());
+	$effect(() => {
+		const id = value;
+		if (id === "" || target === undefined || authoring === undefined) {
+			document = undefined;
+			loadFailed = false;
+			return;
+		}
+		const request = new AbortController();
+		loadFailed = false;
+		authoring
+			.findDocument(target.slug, id, request.signal)
+			.then((result) => {
+				if (!request.signal.aborted) document = result;
+			})
+			.catch(() => {
+				if (!request.signal.aborted) {
+					document = undefined;
+					loadFailed = true;
+				}
+			});
+		return () => request.abort();
+	});
+
+	async function generate() {
+		const result = await generation.run(authoring, form, "generate-image");
+		if (result !== undefined) form.set(field.path, result);
+	}
+
+	function commit(ids: string[]) {
+		form.set(field.path, ids[0] ?? null);
+		browserOpen = false;
+	}
+
+	function openBrowser(mode: "inspect" | "select") {
+		browserMode = mode;
+		browserOpen = true;
+	}
+
+	function documentLabel() {
+		for (const key of ["filename", "title", "name", "alt"] as const) {
+			const candidate = document?.[key];
+			if (typeof candidate === "string" && candidate.length > 0) return candidate;
+		}
+		return value;
+	}
+</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={issues.map((issue) => issue.message)}
+	>
+		{#if generationEnabled}<div
+				class="-mt-1 flex flex-wrap items-center gap-1 text-[11.5px] text-foreground-muted"
+			>
+				<span>{i18n.t("plugin.seo:imageAutoGenerationTip")}</span>
+				<Button
+					variant="link"
+					size="xs"
+					class="h-auto px-0"
+					disabled={field.admin.readOnly || generation.status === "pending"}
+					aria-busy={generation.status === "pending"}
+					onclick={generate}
+				>
+					{i18n.t("plugin.seo:autoGenerate")}
+				</Button>
+			</div>{/if}
+		{#if value === ""}
+			<Button
+				id={field.id}
+				aria-label={i18n.t("plugin.seo:selectImage")}
+				variant="outline"
+				disabled={field.admin.readOnly || target === undefined || ReferenceBrowser === undefined}
+				onclick={() => openBrowser("select")}
+			>
+				<SearchIcon />
+				{i18n.t("plugin.seo:selectImage")}
+			</Button>
+		{:else}
+			<div
+				class="flex min-w-0 items-center gap-2.5 rounded-[4px] border border-control-border bg-control p-2"
+			>
+				<button
+					id={field.id}
+					aria-label={i18n.t("plugin.seo:inspectImage")}
+					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}
+					onclick={() => openBrowser("inspect")}
+				>
+					<span
+						class="grid size-11 shrink-0 place-items-center overflow-hidden rounded-[3px] bg-background text-foreground-faint"
+					>
+						{#if typeof document?.url === "string" && String(document?.mimeType ?? "").startsWith("image/")}
+							<img class="size-full object-cover" src={document.url} alt="" />
+						{:else}<ImageIcon aria-hidden="true" />{/if}
+					</span>
+					<span class="min-w-0 flex-1">
+						<span class="block truncate text-[13px] text-foreground-strong">{documentLabel()}</span>
+						<span class="block truncate font-mono text-[10px] text-foreground-faint">{value}</span>
+						{#if loadFailed}<span class="block text-[11px] text-destructive">
+								{i18n.t("plugin.seo:imageUnavailable")}
+							</span>{/if}
+					</span>
+					<span class="inline-flex shrink-0 items-center gap-1 text-[11px] font-medium">
+						<SearchIcon aria-hidden="true" />
+						{i18n.t("plugin.seo:inspectImage")}
+					</span>
+				</button>
+				{#if !field.admin.readOnly}<div class="flex shrink-0 gap-1">
+						<Button variant="outline" size="xs" 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)}
+							aria-label={i18n.t("plugin.seo:removeImage")}
+						>
+							<XIcon />
+						</Button>
+					</div>{/if}
+			</div>
+		{/if}
+		<div class="flex items-center gap-2">
+			<span
+				class={[
+					"rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide",
+					value === "" ? "bg-destructive/10 text-destructive" : "bg-success/12 text-success",
+				]}
+			>
+				{value === "" ? i18n.t("plugin.seo:noImage") : i18n.t("plugin.seo:good")}
+			</span>
+		</div>
+		{#if generation.status === "error"}<p class="text-[12px] text-destructive" role="alert">
+				{i18n.t("plugin.seo:generationFailed")}
+			</p>{/if}
+	</FieldFrame>
+</div>
+
+{#if browserOpen && ReferenceBrowser !== undefined && target !== undefined}
+	<ReferenceBrowser
+		open
+		{field}
+		collection={target}
+		hasMany={false}
+		selectedIDs={value === "" ? [] : [value]}
+		readOnly={browserMode === "inspect" ? (field.admin.readOnly ?? false) : false}
+		{...browserMode === "inspect" && document !== undefined ? { initialDocument: document } : {}}
+		{...browserMode === "inspect" && value !== "" ? { initialDocumentID: value } : {}}
+		locale={form.contentLocale ?? ""}
+		onCommit={commit}
+		onClose={() => (browserOpen = false)}
+	/>
+{/if}

package/src/meta-title-field.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { FieldComponentProps } from "@riducms/plugin";
+	import { Button, FieldFrame, Input } 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";
+
+	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 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);
+	}
+</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={issues.map((issue) => issue.message)}
+	>
+		<div class="-mt-1 flex flex-wrap items-center gap-x-1 text-[11.5px] text-foreground-muted">
+			<span>{i18n.t("plugin.seo:lengthTipTitle", { minLength, maxLength })}</span>
+			<a
+				class="text-primary underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-ring/70"
+				href="https://developers.google.com/search/docs/appearance/title-link#page-titles"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{i18n.t("plugin.seo:bestPractices")}
+			</a>
+			{#if config.generate}
+				<span aria-hidden="true">·</span>
+				<Button
+					variant="link"
+					size="xs"
+					class="h-auto px-0"
+					disabled={field.admin.readOnly || generation.status === "pending"}
+					aria-busy={generation.status === "pending"}
+					onclick={generate}
+				>
+					{i18n.t("plugin.seo:autoGenerate")}
+				</Button>
+			{/if}
+		</div>
+		<Input
+			id={field.id}
+			name={field.path}
+			required={field.required}
+			readonly={field.admin.readOnly}
+			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}
+			{value}
+			oninput={(event) => form.set(field.path, event.currentTarget.value)}
+		/>
+		<LengthIndicator text={value} {minLength} {maxLength} {i18n} />
+		{#if generation.status === "error"}<p class="text-[12px] text-destructive" role="alert">
+				{i18n.t("plugin.seo:generationFailed")}
+			</p>{/if}
+	</FieldFrame>
+</div>

package/src/overview-field.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { FieldComponentProps } from "@riducms/plugin";
+	import CheckIcon from "~icons/lucide/check";
+	import XIcon from "~icons/lucide/x";
+
+	import { overviewConfig } from "@plugin-seo/seo-config";
+
+	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));
+	const checks = $derived([
+		{
+			key: "title",
+			label: i18n.t("plugin.seo:title"),
+			passing:
+				typeof title === "string" &&
+				title.length >= config.titleMin &&
+				title.length <= config.titleMax,
+		},
+		{
+			key: "description",
+			label: i18n.t("plugin.seo:description"),
+			passing:
+				typeof description === "string" &&
+				description.length >= config.descriptionMin &&
+				description.length <= config.descriptionMax,
+		},
+		{ key: "image", label: i18n.t("plugin.seo:image"), passing: Boolean(image) },
+	]);
+	const passing = $derived(checks.filter((check) => check.passing).length);
+</script>
+
+<section
+	class="rounded-[4px] border border-control-border bg-control/35 p-3.5"
+	aria-labelledby={`${field.id}-heading`}
+	data-seo-overview
+	data-field-path={field.path}
+>
+	<div class="flex flex-wrap items-center justify-between gap-2">
+		<h3 id={`${field.id}-heading`} class="text-[13px] font-semibold text-foreground-strong">
+			{field.admin.label}
+		</h3>
+		<p class="font-mono text-[11px] text-foreground-muted" aria-live="polite">
+			{i18n.t("plugin.seo:checksPassing", { current: passing, max: checks.length })}
+		</p>
+	</div>
+	<ul class="mt-2 flex flex-wrap gap-1.5">
+		{#each checks as check (check.key)}
+			<li
+				class={[
+					"inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px]",
+					check.passing ? "bg-success/12 text-success" : "bg-destructive/10 text-destructive",
+				]}
+				data-seo-check={check.key}
+				data-passing={check.passing}
+			>
+				{#if check.passing}<CheckIcon class="size-3" aria-hidden="true" />{:else}<XIcon
+						class="size-3"
+						aria-hidden="true"
+					/>{/if}
+				<span>{check.label}</span>
+			</li>
+		{/each}
+	</ul>
+</section>

package/src/preview-field.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { FieldComponentProps } from "@riducms/plugin";
+
+	import { GenerationController } from "@plugin-seo/generation-controller.svelte";
+	import { previewConfig } from "@plugin-seo/seo-config";
+
+	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("");
+	const generation = new GenerationController();
+
+	$effect(() => {
+		href = "";
+		if (!config.generate) return;
+		form.snapshot?.();
+		form.contentLocale;
+		form.resource;
+		const timeout = setTimeout(async () => {
+			const result = await generation.run(authoring, form, "generate-url");
+			if (result !== undefined) href = result;
+		}, 250);
+		return () => {
+			clearTimeout(timeout);
+			generation.cancel();
+		};
+	});
+</script>
+
+<section
+	class="grid gap-2"
+	aria-labelledby={`${field.id}-heading`}
+	data-seo-preview
+	data-field-path={field.path}
+>
+	<div>
+		<h3 id={`${field.id}-heading`} class="text-[13px] font-semibold text-foreground-strong">
+			{i18n.t("plugin.seo:preview")}
+		</h3>
+		<p class="mt-0.5 text-[12px] text-foreground-muted">
+			{i18n.t("plugin.seo:previewDescription")}
+		</p>
+	</div>
+	<div
+		class="w-full max-w-[600px] overflow-hidden rounded-[5px] border border-control-border bg-background p-4 shadow-sm"
+		aria-busy={generation.status === "pending"}
+	>
+		<p class="truncate text-[12px] text-success">{href || "https://..."}</p>
+		<p class="mt-1 truncate text-[18px] leading-6 text-primary">{title}</p>
+		<p class="mt-0.5 line-clamp-2 text-[13px] leading-5 text-foreground-muted">{description}</p>
+	</div>
+	{#if generation.status === "error"}<p class="text-[12px] text-destructive" role="alert">
+			{i18n.t("plugin.seo:generationFailed")}
+		</p>{/if}
+</section>

package/src/seo-config.ts

@@ -0,0 +1,73 @@
+import type { SchemaField } from "@riducms/protocol";
+
+export interface LengthConfig {
+	generate: boolean;
+	minLength: number;
+	maxLength: number;
+}
+
+export interface OverviewConfig {
+	titlePath: string;
+	descriptionPath: string;
+	imagePath: string;
+	titleMin: number;
+	titleMax: number;
+	descriptionMin: number;
+	descriptionMax: number;
+}
+
+export interface PreviewConfig {
+	generate: boolean;
+	titlePath: string;
+	descriptionPath: string;
+}
+
+export function lengthConfig(field: SchemaField): LengthConfig {
+	const value = componentConfig(field);
+	return {
+		generate: value.generate === true,
+		minLength: positiveInteger(value.minLength, field.type === "textarea" ? 100 : 50),
+		maxLength: positiveInteger(value.maxLength, field.type === "textarea" ? 150 : 60),
+	};
+}
+
+export function overviewConfig(field: SchemaField): OverviewConfig {
+	const value = componentConfig(field);
+	return {
+		titlePath: stringValue(value.titlePath, "meta.title"),
+		descriptionPath: stringValue(value.descriptionPath, "meta.description"),
+		imagePath: stringValue(value.imagePath, "meta.image"),
+		titleMin: positiveInteger(value.titleMin, 50),
+		titleMax: positiveInteger(value.titleMax, 60),
+		descriptionMin: positiveInteger(value.descriptionMin, 100),
+		descriptionMax: positiveInteger(value.descriptionMax, 150),
+	};
+}
+
+export function previewConfig(field: SchemaField): PreviewConfig {
+	const value = componentConfig(field);
+	return {
+		generate: value.generate === true,
+		titlePath: stringValue(value.titlePath, "meta.title"),
+		descriptionPath: stringValue(value.descriptionPath, "meta.description"),
+	};
+}
+
+export function imageGenerationEnabled(field: SchemaField) {
+	return componentConfig(field).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 stringValue(value: unknown, fallback: string) {
+	return typeof value === "string" && value.length > 0 ? value : fallback;
+}
+
+function positiveInteger(value: unknown, fallback: number) {
+	return typeof value === "number" && Number.isInteger(value) && value > 0 ? value : fallback;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "~icons/*" {
+	import type { Component } from "svelte";
+	const icon: Component<Record<string, unknown>>;
+	export default icon;
+}