refactor(cms): deduplicate shared admin components and fix studio batch completion

- fix(studio): stop markBatchDone infinite recursion so batches complete
- refactor(api): merge api-response into api and drop the duplicate module
- refactor(media): extract shared media loader and URL validator
- refactor(ui): extract shared LoadingSpinner for site and admin groups
- refactor(dates): consolidate raw date formatting into formatDate util
- refactor(logs): share a single generic log-list loader across tables
- refactor(theme): merge both ColorField components and reuse contrast helpers
- refactor(import): extract shared ImportErrorBanner and SearchInput
- chore(): remove dead theme-editor-tabs after inlining tab components

src/app/admin/theme/color-field.tsx

@@ -1,181 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-interface Field {
-	key: string;
-	label: string;
-	def: string;
-	desc: string;
-	bgKey?: string;
-}
-
-function hexToRgb(hex: string): readonly [number, number, number] | null {
-	const m = /^#([0-9a-f]{6})$/i.exec(hex.trim());
-	if (!m) return null;
-	const n = Number.parseInt(m[1], 16);
-	return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
-}
-
-function luminance([r, g, b]: readonly [number, number, number]): number {
-	const a = [r, g, b].map((v) => {
-		const c = v / 255;
-		return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-	});
-	return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
-}
-
-function contrastRatio(a: string, b: string): number | null {
-	const ra = hexToRgb(a);
-	const rb = hexToRgb(b);
-	if (!ra || !rb) return null;
-	const l1 = luminance(ra);
-	const l2 = luminance(rb);
-	const hi = Math.max(l1, l2);
-	const lo = Math.min(l1, l2);
-	return (hi + 0.05) / (lo + 0.05);
-}
-
-function readableOn(bg: string): string {
-	const black = contrastRatio("#000000", bg) ?? 0;
-	const white = contrastRatio("#ffffff", bg) ?? 0;
-	return white >= black ? "#ffffff" : "#000000";
-}
-
-export function ColorField({
-	field,
-	value,
-	bgValue,
-	name,
-}: {
-	field: Field;
-	value: string;
-	bgValue?: string;
-	name: string;
-}) {
-	const [val, setVal] = useState(value);
-	const ratio = bgValue ? contrastRatio(val, bgValue) : null;
-	const poor = ratio != null && ratio < 4.5;
-	const ok = ratio != null && ratio >= 4.5;
-
-	return (
-		<div
-			style={{
-				display: "flex",
-				gap: "0.6rem",
-				padding: "0.5rem",
-				borderRadius: 8,
-				border: poor ? "1px solid #ef4444" : "1px solid transparent",
-				background: poor ? "rgba(239,68,68,0.08)" : "transparent",
-			}}
-		>
-			<input
-				type="color"
-				name={name}
-				value={val}
-				onChange={(e) => {
-					const next = e.target.value;
-					if (bgValue) {
-						const nextRatio = contrastRatio(next, bgValue);
-						if (nextRatio != null && nextRatio < 4.5) {
-							setVal(readableOn(bgValue));
-							return;
-						}
-					}
-					setVal(next);
-				}}
-				style={{
-					width: 42,
-					height: 36,
-					padding: 0,
-					border: "none",
-					background: "none",
-					cursor: "pointer",
-					flexShrink: 0,
-				}}
-			/>
-			<div
-				style={{
-					display: "flex",
-					flexDirection: "column",
-					minWidth: 0,
-					flex: 1,
-				}}
-			>
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "baseline",
-						gap: "0.5rem",
-					}}
-				>
-					<span
-						style={{ fontSize: "0.82rem", fontWeight: 600, lineHeight: 1.2 }}
-					>
-						{field.label}
-					</span>
-					{ratio != null ? (
-						<span
-							style={{
-								fontSize: "0.7rem",
-								fontWeight: 700,
-								color: ok ? "#22c55e" : "#ef4444",
-								whiteSpace: "nowrap",
-							}}
-						>
-							{ratio.toFixed(1)}:1 {ok ? "✓" : "⚠"}
-						</span>
-					) : null}
-				</div>
-				<span
-					style={{
-						fontSize: "0.7rem",
-						color: "var(--admin-text-muted)",
-						lineHeight: 1.3,
-						display: "-webkit-box",
-						WebkitLineClamp: 2,
-						WebkitBoxOrient: "vertical",
-						overflow: "hidden",
-					}}
-				>
-					{field.desc}
-				</span>
-				{bgValue ? (
-					<div
-						style={{
-							marginTop: 4,
-							padding: "2px 8px",
-							borderRadius: 4,
-							background: bgValue,
-							color: val,
-							fontSize: "0.75rem",
-							fontWeight: 600,
-						}}
-					>
-						Aa Text preview
-					</div>
-				) : null}
-				{poor && bgValue ? (
-					<button
-						type="button"
-						onClick={() => setVal(readableOn(bgValue))}
-						style={{
-							marginTop: 4,
-							alignSelf: "flex-start",
-							fontSize: "0.7rem",
-							fontWeight: 600,
-							color: "var(--admin-accent)",
-							background: "none",
-							border: "none",
-							padding: 0,
-							cursor: "pointer",
-						}}
-					>
-						Use readable color →
-					</button>
-				) : null}
-			</div>
-		</div>
-	);
-}

src/app/admin/theme/page.tsx

@@ -7,13 +7,13 @@ import {
 	saveCustomTheme,
 	saveTheme,
 } from "@/actions/admin-theme";
+import { ColorField } from "@/components/admin/color-field";
 import { RenameTheme } from "@/components/admin/theme/rename-theme";
 import { Button } from "@/components/ui/button";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { siteSettings } from "@/lib/services/site-settings";
 import { listCustomThemes } from "@/lib/theme-custom-store";
 import { FONTS, PRESETS } from "@/lib/theme-presets";
-import { ColorField } from "./color-field";
 
 export const metadata = { title: "Theme" };
 
@@ -297,13 +297,13 @@ function colorFields(
 			{fields.map((f) => {
 				const val = toHex(current[f.key], f.def);
 				const bgKey = f.bgKey ? `${f.bgKey}${suffix}` : undefined;
-				// eslint-disable-next-line security/detect-object-injection -- bgKey derived from hardcoded field list
 				const bgValue = bgKey ? toHex(current[bgKey], "") : undefined;
 				return (
 					<ColorField
 						key={f.key}
-						field={f}
-						value={val}
+						label={f.label}
+						description={f.desc}
+						defaultValue={val}
 						bgValue={bgValue || undefined}
 						name={`${f.key}${suffix}`}
 					/>