@riducms/plugin-seo 0.2.3 → 0.3.0

package/README.md

@@ -7,9 +7,9 @@ For an existing project, install it in the root and admin workspaces, configure
 start development:
 
 ```sh
-npm install @riducms/plugin-seo
-npm install --workspace admin @riducms/plugin-seo
-npm run dev
+bun add @riducms/plugin-seo
+bun add --cwd admin @riducms/plugin-seo
+bun run dev
 ```
 
 `ridu dev` regenerates contracts and synchronizes safe additive development changes. Before
@@ -20,5 +20,10 @@ The generated registry imports `seoAdminPlugin`; do not register it again. Gener
 description, image, and URL values remain editable and pass through normal validation and access
 rules when saved.
 
+The field stack follows Payload's overview, inline generation, length guidance, upload intake, and
+search-preview anatomy. Its `ridu-seo-*` presentation is semantic SCSS in the shared component
+layer; applications can override those hooks without depending on UnoCSS utility output.
+
 See the [SEO guide](../../website/src/content/docs/seo.md) for setup, callbacks, migrations, and
-verification.
+verification. See [customizing admin CSS](https://riducms.com/docs/admin/customizing-css/) for
+application styling overrides.

package/package.json

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

package/src/index.ts

@@ -19,7 +19,7 @@ import PreviewField from "@plugin-seo/preview-field.svelte";
 export const seoAdminPlugin = defineAdminPlugin({
 	key: "seo",
 	pairingVersion: 1,
-	components: {
+	fieldEditors: {
 		overview: defineFieldComponent({
 			type: "ui",
 			component: OverviewField,

package/src/length-indicator.svelte

@@ -2,6 +2,7 @@
 	import type { AdminI18n } from "@riducms/plugin";
 
 	import { lengthState } from "@plugin-seo/length-indicator";
+	import "@plugin-seo/seo.scss";
 
 	let {
 		text,
@@ -10,9 +11,6 @@
 		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 })
@@ -22,35 +20,21 @@
 	);
 </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",
-		]}
-	>
+<div class="ridu-seo-length" data-length-status={state.status}>
+	<span class="ridu-seo-pill" data-status={state.status}>
 		{i18n.t(`plugin.seo:${state.status}`)}
 	</span>
-	<small class="shrink-0 text-[11px] text-foreground-muted">
+	<small class="ridu-seo-length-copy">
 		{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="ridu-seo-progress" 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",
-			]}
+			class="ridu-seo-progress-value"
+			data-status={state.status}
 			style:transform="scaleX({state.progress})"
 		></span>
 	</span>

package/src/messages.ts

@@ -4,27 +4,32 @@ export const seoMessages = defineAdminMessages({
 	fallback: {
 		almostThere: "Almost there",
 		autoGenerate: "Auto-generate",
-		bestPractices: "Best practices",
+		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",
+		chooseExistingImage: "Choose existing",
+		createNewImage: "Create new",
 		generationFailed: "Could not generate this value. Try again.",
 		good: "Good",
 		image: "Image",
 		imageAutoGenerationTip: "Generate an image from the current document, or choose one manually.",
+		imageSourceTip: "or drag and drop a file.",
 		imageUnavailable: "Referenced image is unavailable.",
 		inspectImage: "Inspect image",
-		lengthTipDescription: "Aim for {minLength}–{maxLength} characters. ",
-		lengthTipTitle: "Aim for {minLength}–{maxLength} characters. ",
+		lengthTipDescription:
+			"This should be between {minLength} and {maxLength} characters. For help in writing quality meta descriptions, see ",
+		lengthTipTitle:
+			"This should be between {minLength} and {maxLength} characters. For help in writing quality meta titles, see ",
 		missing: "Missing",
 		noImage: "No image",
+		or: "or",
 		preview: "Preview",
-		previewDescription: "A representative search result using the current unsaved values.",
+		previewDescription: "Exact result listings may vary based on content and search relevancy.",
 		removeImage: "Remove image",
-		replaceImage: "Replace image",
 		selectImage: "Select image",
 		tooLong: "Too long",
 		tooShort: "Too short",
@@ -35,27 +40,34 @@ export const seoMessages = defineAdminMessages({
 		fr: {
 			almostThere: "Presque terminé",
 			autoGenerate: "Générer automatiquement",
-			bestPractices: "Bonnes pratiques",
+			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",
+			chooseExistingImage: "Choisir un élément existant",
+			createNewImage: "Créer un élément",
 			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.",
+			imageAutoGenerationTip:
+				"Générez une image à partir du document actuel ou choisissez-en une manuellement.",
+			imageSourceTip: "ou glissez-déposez un fichier.",
 			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. ",
+			lengthTipDescription:
+				"Ceci devrait contenir entre {minLength} et {maxLength} caractères. Pour obtenir de l’aide pour rédiger des descriptions meta de qualité, consultez les ",
+			lengthTipTitle:
+				"Ceci devrait contenir entre {minLength} et {maxLength} caractères. Pour obtenir de l’aide pour rédiger des titres meta de qualité, consultez les ",
 			missing: "Manquant",
 			noImage: "Aucune image",
+			or: "ou",
 			preview: "Aperçu",
-			previewDescription: "Résultat de recherche représentatif avec les valeurs non enregistrées.",
+			previewDescription:
+				"Les résultats exacts peuvent varier en fonction du contenu et de la pertinence de la recherche.",
 			removeImage: "Supprimer l’image",
-			replaceImage: "Remplacer l’image",
 			selectImage: "Sélectionner une image",
 			tooLong: "Trop long",
 			tooShort: "Trop court",
@@ -72,21 +84,26 @@ export const seoMessages = defineAdminMessages({
 			charactersToGo: "، يلزم {characters}",
 			charactersTooMany: "، زائد {characters}",
 			checksPassing: "تم اجتياز {current}/{max} من الفحوصات",
+			chooseExistingImage: "اختيار صورة موجودة",
+			createNewImage: "إنشاء صورة جديدة",
 			description: "الوصف",
 			generationFailed: "تعذر إنشاء هذه القيمة. حاول مرة أخرى.",
 			good: "جيد",
 			image: "الصورة",
-			imageAutoGenerationTip: "أنشئ صورة من المستند الحالي أو اختر واحدة يدويًا.",
+			imageAutoGenerationTip: "أنشئ صورة من المستند الحالي أو اختر صورة يدويًا.",
+			imageSourceTip: "أو اسحب ملفًا وأفلته.",
 			imageUnavailable: "الصورة المشار إليها غير متاحة.",
 			inspectImage: "فحص الصورة",
-			lengthTipDescription: "استهدف {minLength}–{maxLength} حرفًا. ",
-			lengthTipTitle: "استهدف {minLength}–{maxLength} حرفًا. ",
+			lengthTipDescription:
+				"يجب أن يتراوح هذا بين {minLength} و{maxLength} حرفًا. للحصول على مساعدة في كتابة أوصاف ميتا ذات جودة، راجع ",
+			lengthTipTitle:
+				"يجب أن يتراوح هذا بين {minLength} و{maxLength} حرفًا. للحصول على مساعدة في كتابة عناوين ميتا ذات جودة، راجع ",
 			missing: "مفقود",
 			noImage: "لا توجد صورة",
+			or: "أو",
 			preview: "معاينة",
-			previewDescription: "نتيجة بحث تمثيلية باستخدام القيم الحالية غير المحفوظة.",
+			previewDescription: "قد تختلف النتائج الدقيقة بناءً على المحتوى وملاءمة البحث.",
 			removeImage: "إزالة الصورة",
-			replaceImage: "استبدال الصورة",
 			selectImage: "اختيار صورة",
 			title: "العنوان",
 			tooLong: "طويل جدًا",

package/src/meta-description-field.svelte

@@ -4,6 +4,7 @@
 
 	import { GenerationController } from "@plugin-seo/generation-controller.svelte";
 	import LengthIndicator from "@plugin-seo/length-indicator.svelte";
+	import "@plugin-seo/seo.scss";
 	import type { LengthConfig } from "@plugin-seo/seo-config";
 
 	let {
@@ -34,6 +35,19 @@
 </script>
 
 <div data-field-path={field.path}>
+	{#snippet headingAction()}
+		<span class="ridu-seo-heading-separator" aria-hidden="true">—</span>
+		<Button
+			variant="link"
+			size="xs"
+			class="ridu-seo-generate"
+			disabled={editingBlocked || generation.status === "pending"}
+			aria-busy={generation.status === "pending"}
+			onclick={generate}
+		>
+			{i18n.t("plugin.seo:autoGenerate")}
+		</Button>
+	{/snippet}
 	<FieldFrame
 		controlID={field.id}
 		label={field.admin.label}
@@ -41,32 +55,24 @@
 		readOnly={field.admin.readOnly}
 		description={field.admin.description}
 		errors={issues.map((issue) => issue.message)}
+		class="ridu-seo-field"
+		headingAction={config.generate ? headingAction : undefined}
 	>
-		<div class="-mt-1 flex flex-wrap items-center gap-x-1 text-[11.5px] text-foreground-muted">
+		<p class="ridu-seo-guidance">
 			<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"
+				class="ridu-seo-guidance-link"
 				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={editingBlocked || generation.status === "pending"}
-					aria-busy={generation.status === "pending"}
-					onclick={generate}
-				>
-					{i18n.t("plugin.seo:autoGenerate")}
-				</Button>
-			{/if}
-		</div>
+			<span>.</span>
+		</p>
 		<Textarea
+			class="ridu-seo-description"
+			data-empty={value === ""}
 			id={field.id}
 			name={field.path}
 			required={field.required}
@@ -80,8 +86,10 @@
 			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">
+		{#if generation.status === "error"}
+			<p class="ridu-seo-error" role="alert">
 				{i18n.t("plugin.seo:generationFailed")}
-			</p>{/if}
+			</p>
+		{/if}
 	</FieldFrame>
 </div>

package/src/meta-image-field.svelte

@@ -2,10 +2,11 @@
 	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 PencilIcon from "~icons/lucide/pencil";
 	import XIcon from "~icons/lucide/x";
 
 	import { GenerationController } from "@plugin-seo/generation-controller.svelte";
+	import "@plugin-seo/seo.scss";
 
 	let {
 		field: binding,
@@ -31,20 +32,31 @@
 	);
 	const ReferenceBrowser = $derived(authoring?.referenceBrowser);
 	let browserOpen = $state(false);
-	let browserMode = $state<"inspect" | "select">("select");
+	let browserMode = $state<"create" | "inspect" | "select">("select");
+	let initialFile = $state.raw<File>();
+	let dragging = $state(false);
 	let document = $state.raw<FieldDocument>();
 	let loadFailed = $state(false);
 	const generation = new GenerationController();
+	const intakeEnabled = $derived(
+		!editingBlocked && target !== undefined && ReferenceBrowser !== undefined
+	);
+	const canCreateImage = $derived(
+		intakeEnabled && target !== undefined && authoring.canCreateDocument(target.slug)
+	);
 
 	$effect(() => () => generation.cancel());
 	$effect(() => {
 		const id = value;
+		void authoring.documentRevision;
+		void authoring.locale;
 		if (id === "" || target === undefined || authoring === undefined) {
 			document = undefined;
 			loadFailed = false;
 			return;
 		}
 		const request = new AbortController();
+		document = undefined;
 		loadFailed = false;
 		authoring
 			.findDocument(target.slug, id, request.signal)
@@ -67,14 +79,28 @@
 
 	function commit(ids: string[]) {
 		binding.set(ids[0] ?? null);
+		closeBrowser();
+	}
+
+	function closeBrowser() {
 		browserOpen = false;
+		initialFile = undefined;
+		dragging = false;
 	}
 
-	function openBrowser(mode: "inspect" | "select") {
+	function openBrowser(mode: "create" | "inspect" | "select", file?: File) {
 		browserMode = mode;
+		initialFile = file;
 		browserOpen = true;
 	}
 
+	function drop(event: DragEvent) {
+		event.preventDefault();
+		dragging = false;
+		const file = event.dataTransfer?.files[0];
+		if (canCreateImage && file) openBrowser("create", file);
+	}
+
 	function documentLabel() {
 		for (const key of ["filename", "title", "name", "alt"] as const) {
 			const candidate = document?.[key];
@@ -82,9 +108,45 @@
 		}
 		return value;
 	}
+
+	function fileSize(bytes: unknown): string | undefined {
+		if (typeof bytes !== "number" || !Number.isFinite(bytes) || bytes < 0) return undefined;
+		if (bytes < 1024)
+			return i18n.formatNumber(bytes, { style: "unit", unit: "byte", unitDisplay: "long" });
+
+		const units = ["KB", "MB", "GB", "TB"];
+		const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length);
+		return `${i18n.formatNumber(bytes / 1024 ** exponent, { maximumFractionDigits: 0 })}${units[exponent - 1]}`;
+	}
+
+	function documentMetadata() {
+		if (loadFailed) return i18n.t("plugin.seo:imageUnavailable");
+		return [
+			fileSize(document?.filesize),
+			typeof document?.width === "number" && typeof document?.height === "number"
+				? `${document.width}x${document.height}`
+				: undefined,
+			typeof document?.mimeType === "string" ? document.mimeType : undefined,
+		]
+			.filter((part): part is string => part !== undefined)
+			.join(" — ");
+	}
 </script>
 
 <div data-field-path={field.path}>
+	{#snippet headingAction()}
+		<span class="ridu-seo-heading-separator" aria-hidden="true">—</span>
+		<Button
+			variant="link"
+			size="xs"
+			class="ridu-seo-generate"
+			disabled={editingBlocked || generation.status === "pending"}
+			aria-busy={generation.status === "pending"}
+			onclick={generate}
+		>
+			{i18n.t("plugin.seo:autoGenerate")}
+		</Button>
+	{/snippet}
 	<FieldFrame
 		controlID={field.id}
 		label={field.admin.label}
@@ -92,78 +154,90 @@
 		readOnly={field.admin.readOnly}
 		description={field.admin.description}
 		errors={issues.map((issue) => issue.message)}
+		class="ridu-seo-field"
+		headingAction={generationEnabled ? headingAction : undefined}
 	>
-		{#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={editingBlocked || generation.status === "pending"}
-					aria-busy={generation.status === "pending"}
-					onclick={generate}
-				>
-					{i18n.t("plugin.seo:autoGenerate")}
-				</Button>
-			</div>{/if}
+		{#if generationEnabled}
+			<p class="ridu-seo-guidance">{i18n.t("plugin.seo:imageAutoGenerationTip")}</p>
+		{/if}
 		{#if value === ""}
-			<Button
-				id={field.id}
-				aria-label={i18n.t("plugin.seo:selectImage")}
-				{...controlARIA}
-				variant="outline"
-				class="aria-invalid:!border-destructive"
-				disabled={editingBlocked || target === undefined || ReferenceBrowser === undefined}
-				onclick={() => openBrowser("select")}
-			>
-				<SearchIcon />
-				{i18n.t("plugin.seo:selectImage")}
-			</Button>
-		{:else}
+			<!-- File drops supplement the keyboard-accessible create and browse actions. -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
-				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"]}
+				class="ridu-seo-image-intake"
+				role="region"
+				aria-label={field.admin.label}
+				data-dragging={dragging}
+				data-invalid={controlARIA["aria-invalid"]}
+				ondragover={(event) => {
+					event.preventDefault();
+					if (canCreateImage) {
+						dragging = true;
+						if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+					}
+				}}
+				ondragleave={(event) => {
+					if (!event.currentTarget.contains(event.relatedTarget as Node | null)) dragging = false;
+				}}
+				ondrop={drop}
 			>
-				<button
+				{#if canCreateImage}
+					<Button variant="secondary" size="sm" onclick={() => openBrowser("create")}>
+						{i18n.t("plugin.seo:createNewImage")}
+					</Button>
+					<span>{i18n.t("plugin.seo:or")}</span>
+				{/if}
+				<Button
 					id={field.id}
-					aria-label={i18n.t("plugin.seo:inspectImage")}
+					aria-label={i18n.t("plugin.seo:chooseExistingImage")}
 					{...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"
+					variant="secondary"
+					size="sm"
 					disabled={editingBlocked || target === undefined || ReferenceBrowser === undefined}
-					onclick={() => openBrowser("inspect")}
+					onclick={() => openBrowser("select")}
 				>
-					<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}
+					{i18n.t("plugin.seo:chooseExistingImage")}
+				</Button>
+				{#if canCreateImage}
+					<span class="ridu-seo-image-intake-copy">
+						{i18n.t("plugin.seo:imageSourceTip")}
 					</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}
+				{/if}
+			</div>
+		{:else}
+			<div class="ridu-seo-image-selection" aria-invalid={controlARIA["aria-invalid"]}>
+				<div class="ridu-seo-image-content">
+					<span class="ridu-seo-image-thumbnail">
+						{#if typeof document?.url === "string" && String(document?.mimeType ?? "").startsWith("image/")}
+							<img src={document.url} alt="" />
+						{:else}
+							<ImageIcon aria-hidden="true" />
+						{/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 class="ridu-seo-image-details">
+						{#if typeof document?.url === "string"}
+							<a class="ridu-seo-image-name" href={document.url} target="_blank" rel="noreferrer">
+								{documentLabel()}
+							</a>
+						{:else}
+							<span class="ridu-seo-image-name">{documentLabel()}</span>
+						{/if}
+						<span class="ridu-seo-image-metadata">{documentMetadata()}</span>
 					</span>
-				</button>
-				{#if !field.admin.readOnly}<div class="flex shrink-0 gap-1">
-						<Button
-							variant="outline"
-							size="xs"
-							disabled={editingBlocked}
-							onclick={() => openBrowser("select")}
-						>
-							<SearchIcon aria-hidden="true" />
-							{i18n.t("plugin.seo:replaceImage")}
-						</Button>
+				</div>
+				<div class="ridu-seo-image-actions">
+					<Button
+						id={field.id}
+						{...controlARIA}
+						variant="ghost"
+						size="icon-xs"
+						disabled={editingBlocked || target === undefined || ReferenceBrowser === undefined}
+						onclick={() => openBrowser("inspect")}
+						aria-label={i18n.t("plugin.seo:inspectImage")}
+					>
+						<PencilIcon />
+					</Button>
+					{#if !field.admin.readOnly}
 						<Button
 							variant="ghost"
 							size="icon-xs"
@@ -173,22 +247,20 @@
 						>
 							<XIcon />
 						</Button>
-					</div>{/if}
+					{/if}
+				</div>
 			</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",
-				]}
-			>
+		<div class="ridu-seo-image-status">
+			<span class="ridu-seo-pill" data-tone={value === "" ? "danger" : "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">
+		{#if generation.status === "error"}
+			<p class="ridu-seo-error" role="alert">
 				{i18n.t("plugin.seo:generationFailed")}
-			</p>{/if}
+			</p>
+		{/if}
 	</FieldFrame>
 </div>
 
@@ -200,10 +272,12 @@
 		hasMany={false}
 		selectedIDs={value === "" ? [] : [value]}
 		readOnly={browserMode === "inspect" ? (field.admin.readOnly ?? false) : false}
+		initialCreate={browserMode === "create"}
+		{...initialFile === undefined ? {} : { initialFile }}
 		{...browserMode === "inspect" && document !== undefined ? { initialDocument: document } : {}}
 		{...browserMode === "inspect" && value !== "" ? { initialDocumentID: value } : {}}
 		locale={form.contentLocale ?? ""}
 		onCommit={commit}
-		onClose={() => (browserOpen = false)}
+		onClose={closeBrowser}
 	/>
 {/if}

package/src/meta-title-field.svelte

@@ -4,6 +4,7 @@
 
 	import { GenerationController } from "@plugin-seo/generation-controller.svelte";
 	import LengthIndicator from "@plugin-seo/length-indicator.svelte";
+	import "@plugin-seo/seo.scss";
 	import type { LengthConfig } from "@plugin-seo/seo-config";
 
 	let {
@@ -34,6 +35,19 @@
 </script>
 
 <div data-field-path={field.path}>
+	{#snippet headingAction()}
+		<span class="ridu-seo-heading-separator" aria-hidden="true">—</span>
+		<Button
+			variant="link"
+			size="xs"
+			class="ridu-seo-generate"
+			disabled={editingBlocked || generation.status === "pending"}
+			aria-busy={generation.status === "pending"}
+			onclick={generate}
+		>
+			{i18n.t("plugin.seo:autoGenerate")}
+		</Button>
+	{/snippet}
 	<FieldFrame
 		controlID={field.id}
 		label={field.admin.label}
@@ -41,31 +55,21 @@
 		readOnly={field.admin.readOnly}
 		description={field.admin.description}
 		errors={issues.map((issue) => issue.message)}
+		class="ridu-seo-field"
+		headingAction={config.generate ? headingAction : undefined}
 	>
-		<div class="-mt-1 flex flex-wrap items-center gap-x-1 text-[11.5px] text-foreground-muted">
+		<p class="ridu-seo-guidance">
 			<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"
+				class="ridu-seo-guidance-link"
 				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={editingBlocked || generation.status === "pending"}
-					aria-busy={generation.status === "pending"}
-					onclick={generate}
-				>
-					{i18n.t("plugin.seo:autoGenerate")}
-				</Button>
-			{/if}
-		</div>
+			<span>.</span>
+		</p>
 		<Input
 			id={field.id}
 			name={field.path}
@@ -80,8 +84,10 @@
 			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">
+		{#if generation.status === "error"}
+			<p class="ridu-seo-error" role="alert">
 				{i18n.t("plugin.seo:generationFailed")}
-			</p>{/if}
+			</p>
+		{/if}
 	</FieldFrame>
 </div>

package/src/overview-field.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PluginFieldProps } from "@riducms/plugin";
-	import CheckIcon from "~icons/lucide/check";
-	import XIcon from "~icons/lucide/x";
+	import "@plugin-seo/seo.scss";
 
 	import type { OverviewConfig } from "@plugin-seo/seo-config";
 
@@ -17,57 +16,22 @@
 	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) },
+		typeof title === "string" && title.length >= config.titleMin && title.length <= config.titleMax,
+		typeof description === "string" &&
+			description.length >= config.descriptionMin &&
+			description.length <= config.descriptionMax,
+		Boolean(image),
 	]);
-	const passing = $derived(checks.filter((check) => check.passing).length);
+	const passing = $derived(checks.filter(Boolean).length);
 </script>
 
 <section
-	class="rounded-[4px] border border-control-border bg-control/35 p-3.5"
-	aria-labelledby={`${field.id}-heading`}
+	class="ridu-seo-overview"
+	aria-label={field.admin.label}
 	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>
+	<p aria-live="polite">
+		{i18n.t("plugin.seo:checksPassing", { current: passing, max: checks.length })}
+	</p>
 </section>

package/src/preview-field.svelte

@@ -2,6 +2,7 @@
 	import type { PluginFieldProps } from "@riducms/plugin";
 
 	import { GenerationController } from "@plugin-seo/generation-controller.svelte";
+	import "@plugin-seo/seo.scss";
 	import type { PreviewConfig } from "@plugin-seo/seo-config";
 
 	let {
@@ -36,28 +37,27 @@
 </script>
 
 <section
-	class="grid gap-2"
+	class="ridu-seo-preview"
 	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">
+		<h3 id={`${field.id}-heading`} class="ridu-seo-preview-heading">
 			{i18n.t("plugin.seo:preview")}
 		</h3>
-		<p class="mt-0.5 text-[12px] text-foreground-muted">
+		<p class="ridu-seo-preview-description">
 			{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 class="ridu-seo-preview-card" aria-busy={generation.status === "pending"}>
+		<p class="ridu-seo-preview-url">{href || "https://..."}</p>
+		<p class="ridu-seo-preview-title">{title}</p>
+		<p class="ridu-seo-preview-copy">{description}</p>
 	</div>
-	{#if generation.status === "error"}<p class="text-[12px] text-destructive" role="alert">
+	{#if generation.status === "error"}
+		<p class="ridu-seo-error" role="alert">
 			{i18n.t("plugin.seo:generationFailed")}
-		</p>{/if}
+		</p>
+	{/if}
 </section>

package/src/seo.scss

@@ -0,0 +1,315 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-seo-overview,
+	.ridu-seo-field,
+	.ridu-seo-preview {
+		min-width: 0;
+	}
+
+	.ridu-seo-field,
+	.ridu-seo-field .ridu-field-control {
+		gap: 0;
+	}
+
+	.ridu-seo-overview {
+		color: var(--foreground);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+	.ridu-seo-overview p {
+		margin: 0;
+	}
+
+	.ridu-seo-heading-separator {
+		color: var(--ink-muted);
+	}
+	.ridu-seo-generate.ridu-button {
+		block-size: auto;
+		border: 0;
+		padding: 0;
+		color: currentColor;
+		font-size: inherit;
+		line-height: inherit;
+	}
+	.ridu-seo-guidance {
+		margin: 0 0 5px;
+		color: var(--ink-muted);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+	.ridu-seo-guidance-link {
+		color: inherit;
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+	.ridu-seo-guidance-link:focus-visible {
+		@include ui.focus-outline;
+	}
+	.ridu-seo-description[data-empty="false"] {
+		min-height: 0;
+	}
+	.ridu-seo-error {
+		margin: 0;
+		color: var(--destructive);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+
+	.ridu-seo-length {
+		margin-block-start: 10px;
+		display: grid;
+		grid-template-columns: auto auto minmax(32px, 1fr);
+		align-items: center;
+		gap: 10px;
+		min-width: 0;
+	}
+	.ridu-seo-pill {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+		inline-size: max-content;
+		border-radius: 2px;
+		padding: 4px 6px;
+		font-size: 11px;
+		font-weight: 400;
+		line-height: 1;
+		white-space: nowrap;
+	}
+	.ridu-seo-pill[data-tone="danger"],
+	.ridu-seo-pill[data-status="missing"],
+	.ridu-seo-pill[data-status="tooLong"] {
+		background: var(--seo-status-danger);
+		color: var(--seo-status-danger-foreground);
+	}
+	.ridu-seo-pill[data-status="tooShort"] {
+		background: var(--seo-status-short);
+		color: var(--seo-status-short-foreground);
+	}
+	.ridu-seo-pill[data-tone="warning"],
+	.ridu-seo-pill[data-status="almostThere"] {
+		background: var(--seo-status-warning);
+		color: var(--seo-status-warning-foreground);
+	}
+	.ridu-seo-pill[data-tone="success"],
+	.ridu-seo-pill[data-status="good"] {
+		background: var(--seo-status-success);
+		color: var(--seo-status-success-foreground);
+	}
+	.ridu-seo-length-copy {
+		color: var(--foreground);
+		font-size: 11px;
+		line-height: 1;
+		white-space: nowrap;
+	}
+	.ridu-seo-progress {
+		position: relative;
+		height: 2px;
+		min-width: 32px;
+		overflow: hidden;
+		background: var(--seo-status-track);
+	}
+	.ridu-seo-progress-value {
+		display: block;
+		width: 100%;
+		height: 100%;
+		transform-origin: left center;
+		transition: transform 150ms ease;
+	}
+	.ridu-seo-length:dir(rtl) .ridu-seo-progress-value {
+		transform-origin: right center;
+	}
+	.ridu-seo-progress-value[data-status="missing"],
+	.ridu-seo-progress-value[data-status="tooLong"] {
+		background: var(--seo-status-danger);
+	}
+	.ridu-seo-progress-value[data-status="tooShort"] {
+		background: var(--seo-status-short);
+	}
+	.ridu-seo-progress-value[data-status="almostThere"] {
+		background: var(--seo-status-warning);
+	}
+	.ridu-seo-progress-value[data-status="good"] {
+		background: var(--seo-status-success);
+	}
+
+	.ridu-seo-image-intake {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 10px;
+		min-height: 60px;
+		border: 1px dashed var(--control-border);
+		border-radius: var(--control-radius);
+		padding: 15px;
+		color: var(--foreground-muted);
+	}
+	.ridu-seo-image-intake[data-invalid="true"] {
+		border-color: var(--control-invalid-border);
+		background: var(--control-invalid-surface);
+	}
+	.ridu-seo-image-intake[data-dragging="true"] {
+		border-color: var(--foreground);
+		background: var(--control-surface);
+	}
+	.ridu-seo-image-intake-copy {
+		margin-inline-start: auto;
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+	.ridu-seo-image-selection {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		box-sizing: border-box;
+		height: 60px;
+		min-width: 0;
+		border: 1px solid var(--control-border);
+		border-radius: var(--control-radius);
+		padding: 10px;
+		background: var(--control-surface);
+	}
+	.ridu-seo-image-selection[aria-invalid="true"] {
+		border-color: var(--control-invalid-border);
+		background: var(--control-invalid-surface);
+	}
+	.ridu-seo-image-content {
+		display: flex;
+		align-items: center;
+		flex: 1;
+		gap: 10px;
+		min-width: 0;
+	}
+	.ridu-seo-image-thumbnail {
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		width: 40px;
+		height: 40px;
+		overflow: hidden;
+		border-radius: var(--control-radius);
+		background: var(--background);
+		color: var(--ink-faint);
+	}
+	.ridu-seo-image-thumbnail img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.ridu-seo-image-thumbnail svg {
+		width: 14px;
+		height: 14px;
+	}
+	.ridu-seo-image-details {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		flex: 1;
+	}
+	.ridu-seo-image-name,
+	.ridu-seo-image-metadata {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.ridu-seo-image-name {
+		color: var(--ink-strong);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+		text-decoration: none;
+	}
+	.ridu-seo-image-name:focus-visible {
+		@include ui.focus-outline;
+	}
+	.ridu-seo-image-metadata {
+		color: var(--ink-muted);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+	.ridu-seo-image-actions {
+		display: flex;
+		flex-shrink: 0;
+
+		.ridu-button {
+			border: 0;
+		}
+	}
+	.ridu-seo-image-status {
+		display: flex;
+		align-items: center;
+		margin-block-start: 10px;
+	}
+
+	.ridu-seo-preview {
+		display: grid;
+		gap: 0;
+	}
+	.ridu-seo-preview-heading,
+	.ridu-seo-preview-description,
+	.ridu-seo-preview-url,
+	.ridu-seo-preview-title,
+	.ridu-seo-preview-copy {
+		margin: 0;
+	}
+	.ridu-seo-preview-heading {
+		color: var(--ink-label);
+		font-size: var(--font-size-body);
+		font-weight: 400;
+		line-height: var(--line-height-body);
+	}
+	.ridu-seo-preview-description {
+		margin-block-end: 5px;
+		color: var(--ink-muted);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+	.ridu-seo-preview-card {
+		box-sizing: border-box;
+		width: 100%;
+		max-width: 600px;
+		overflow: hidden;
+		border-radius: 5px;
+		padding: 20px;
+		background: var(--control-surface);
+		box-shadow: var(--seo-preview-shadow);
+		pointer-events: none;
+	}
+	.ridu-seo-preview-url,
+	.ridu-seo-preview-title,
+	.ridu-seo-preview-copy {
+		overflow-wrap: anywhere;
+		color: var(--foreground);
+	}
+	.ridu-seo-preview-url {
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+	.ridu-seo-preview-title {
+		font-size: 16px;
+		font-weight: 500;
+		line-height: 20px;
+	}
+	.ridu-seo-preview-copy {
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+
+	@media (max-width: 30rem) {
+		.ridu-seo-length {
+			grid-template-columns: auto minmax(0, 1fr);
+		}
+		.ridu-seo-progress {
+			grid-column: 1 / -1;
+		}
+		.ridu-seo-image-intake-copy {
+			display: none;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-seo-progress-value {
+			transition: none;
+		}
+	}
+}