@riducms/admin 0.2.2 → 0.3.0

package/src/features/uploads/bulk-upload.ts

@@ -1,32 +1,103 @@
-import type { SchemaField } from "@riducms/protocol";
+import { mapBlockTypes, type SchemaField } from "@riducms/protocol";
 
-import { initialFormValues } from "@admin/core/forms/form-schema";
+import { cloneFormValue, initialFormValues, type FormValues } from "@admin/core/forms/form-schema";
+import { isUploadMetadataField } from "@admin/features/uploads/upload-document-contracts";
 
-export function bulkUploadMetadataFields(fields: readonly SchemaField[]) {
-	return fields.filter(
+export function bulkUploadDocumentFields(fields: readonly SchemaField[]) {
+	return fields.filter((field) => !isUploadMetadataField(field.name));
+}
+
+export function bulkUploadBulkEditFields(fields: readonly SchemaField[]) {
+	return bulkUploadDocumentFields(fields).filter(
 		(field) =>
 			field.category === "scalar" &&
 			field.admin.readOnly !== true &&
-			(field.type === "text" ||
-				field.type === "textarea" ||
-				(field.type === "select" && field.select?.hasMany !== true))
+			field.admin.hidden !== true &&
+			field.admin.condition === undefined &&
+			!field.unique &&
+			field.type !== "json" &&
+			field.type !== "text-list" &&
+			field.type !== "number-list"
 	);
 }
 
+/** Give concurrent document renderers unique DOM IDs without changing form paths or access paths. */
+export function bulkUploadRenderFields(fields: readonly SchemaField[], scope: string) {
+	return fields.map((field) => scopeRenderField(field, scope));
+}
+
+function scopeRenderField(field: SchemaField, scope: string): SchemaField {
+	return {
+		...field,
+		id: `${field.id}-${scope}`,
+		admin: {
+			...field.admin,
+			...(field.admin.row === undefined
+				? {}
+				: { row: { ...field.admin.row, id: `${field.admin.row.id}-${scope}` } }),
+			...(field.admin.collapsible === undefined
+				? {}
+				: {
+						collapsible: {
+							...field.admin.collapsible,
+							id: `${field.admin.collapsible.id}-${scope}`,
+						},
+					}),
+			...(field.admin.tabGroup === undefined
+				? {}
+				: {
+						tabGroup: {
+							...field.admin.tabGroup,
+							id: `${field.admin.tabGroup.id}-${scope}`,
+						},
+					}),
+		},
+		...(field.nested === undefined
+			? {}
+			: {
+					nested: {
+						...field.nested,
+						fields: field.nested.fields.map((child) => scopeRenderField(child, scope)),
+					},
+				}),
+		...(field.blocks === undefined
+			? {}
+			: {
+					blocks: mapBlockTypes(field.blocks, (block) => ({
+						...block,
+						fields: block.fields.map((child) => scopeRenderField(child, scope)),
+					})),
+				}),
+		...(field.plugin?.embeddedTrees === undefined
+			? {}
+			: {
+					plugin: {
+						...field.plugin,
+						embeddedTrees: field.plugin.embeddedTrees.map((tree) => ({
+							...tree,
+							cases: tree.cases.map((branch) =>
+								mapBlockTypes(branch, (block) => ({
+									...block,
+									fields: block.fields.map((child) => scopeRenderField(child, scope)),
+								}))
+							),
+						})),
+					},
+				}),
+	};
+}
+
 export function initialBulkUploadValues(
 	filename: string,
 	fields: readonly SchemaField[],
 	useAsTitle: string | undefined
-) {
+): FormValues {
 	const stem = filename
 		.replace(/\.[^.]+$/, "")
 		.replaceAll(/[-_]+/g, " ")
 		.trim();
-	const defaults = initialFormValues(fields);
-	const values: Record<string, string> = {};
+	const values = initialFormValues(fields);
 	for (const field of fields) {
-		const defaultValue = defaults[field.name];
-		values[field.name] = typeof defaultValue === "string" ? defaultValue : "";
 		if (field.name === "alt" || (field.required && field.name === useAsTitle)) {
 			values[field.name] = stem;
 		}
@@ -34,6 +105,26 @@ export function initialBulkUploadValues(
 	return values;
 }
 
-export function uploadData(values: Readonly<Record<string, string>>) {
-	return Object.fromEntries(Object.entries(values).filter(([, value]) => value.trim().length > 0));
+export function applyBulkUploadValues(
+	target: { set(path: string, value: unknown): void },
+	fields: readonly SchemaField[],
+	values: Readonly<FormValues>
+) {
+	for (const field of fields) {
+		if (Object.hasOwn(values, field.name))
+			target.set(field.path, cloneFormValue(values[field.name]));
+	}
+}
+
+export function bulkUploadFileIdentity(file: File) {
+	return `${file.name}\u0000${file.size}\u0000${file.lastModified}`;
+}
+
+export function bulkUploadRemoteFilename(value: string) {
+	try {
+		const filename = new URL(value).pathname.split("/").filter(Boolean).at(-1);
+		return filename === undefined ? "remote-upload" : decodeURIComponent(filename);
+	} catch {
+		return "remote-upload";
+	}
 }

package/src/features/uploads/crop-surface.ts

@@ -0,0 +1,150 @@
+import CropperCanvas from "@cropper/element-canvas";
+import CropperSelection from "@cropper/element-selection";
+import CropperHandle from "@cropper/element-handle";
+import type { UploadImageEdit } from "@riducms/protocol";
+import type { UploadSource } from "@admin/features/uploads/upload-draft.svelte";
+
+const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"] as const;
+const arrows: Record<string, [number, number]> = {
+	ArrowLeft: [-1, 0],
+	ArrowRight: [1, 0],
+	ArrowUp: [0, -1],
+	ArrowDown: [0, 1],
+};
+
+/** Owns only the crop interaction DOM. Document state and image bytes stay outside Cropper. */
+export function mountCropSurface(
+	host: HTMLElement,
+	source: UploadSource,
+	options: {
+		getEdit: () => UploadImageEdit;
+		onchange: (edit: UploadImageEdit) => void;
+		label: (action: string) => string;
+	}
+) {
+	CropperCanvas.$define();
+	CropperSelection.$define();
+	CropperHandle.$define();
+
+	const canvas = new CropperCanvas();
+	canvas.className = "ridu-crop-canvas";
+	canvas.style.aspectRatio = `${source.width} / ${source.height}`;
+	const image = new Image();
+	image.src = source.url;
+	image.alt = "";
+	image.draggable = false;
+	const draw = new CropperHandle();
+	draw.action = "select";
+	draw.plain = true;
+	const selection = new CropperSelection();
+	selection.className = "ridu-crop-selection";
+	selection.movable = true;
+	selection.resizable = true;
+	selection.precise = true;
+	// Cropper's keyboard option installs document-wide Delete/arrow handlers.
+	// Scope accessible keyboard interaction to our focused, labelled handles instead.
+	selection.keyboard = false;
+
+	for (const direction of ["move", ...directions]) {
+		const handle = new CropperHandle();
+		handle.action = direction === "move" ? "move" : `${direction}-resize`;
+		handle.plain = direction === "move";
+		handle.tabIndex = 0;
+		handle.setAttribute("role", "button");
+		handle.setAttribute("aria-label", options.label(direction));
+		handle.themeColor = "var(--ink-strong)";
+		if (direction !== "move") {
+			// Cropper centers resize targets outside the selection, but its canvas clips them at image edges.
+			if (direction.includes("n")) handle.style.top = "0";
+			if (direction.includes("s")) handle.style.bottom = "0";
+			if (direction.includes("e")) handle.style.right = "0";
+			if (direction.includes("w")) handle.style.left = "0";
+			// Full-edge targets overlap the corners; diagonal targets must win the pointer hit test.
+			if (direction.length === 2) handle.style.zIndex = "1";
+		}
+		selection.append(handle);
+	}
+	canvas.append(image, draw, selection);
+	host.append(canvas);
+	for (const handle of selection.children) {
+		if (handle instanceof CropperHandle && handle.action !== "move") {
+			handle.$addStyles(
+				":host::after { width: 7px; height: 7px; border: 1px solid var(--ink-strong); background: var(--background); }"
+			);
+		}
+	}
+
+	let synchronizing = false;
+	const sync = () => {
+		const edit = options.getEdit();
+		if (!canvas.clientWidth || !canvas.clientHeight) return;
+		synchronizing = true;
+		selection.$change(
+			(edit.cropX / 100) * canvas.clientWidth,
+			(edit.cropY / 100) * canvas.clientHeight,
+			((edit.cropWidth || 100) / 100) * canvas.clientWidth,
+			((edit.cropHeight || 100) / 100) * canvas.clientHeight
+		);
+		synchronizing = false;
+	};
+	const change = (event: Event) => {
+		if (!(event instanceof CustomEvent) || synchronizing) return;
+		const rect: { x: number; y: number; width: number; height: number } = event.detail;
+		const width = canvas.clientWidth,
+			height = canvas.clientHeight;
+		if (
+			!width ||
+			!height ||
+			rect.x < -0.01 ||
+			rect.y < -0.01 ||
+			rect.x + rect.width > width + 0.01 ||
+			rect.y + rect.height > height + 0.01 ||
+			rect.width < width / source.width ||
+			rect.height < height / source.height
+		) {
+			event.preventDefault();
+			return;
+		}
+		const next = {
+			...options.getEdit(),
+			cropX: Math.max(0, (rect.x / width) * 100),
+			cropY: Math.max(0, (rect.y / height) * 100),
+			cropWidth: (rect.width / width) * 100,
+			cropHeight: (rect.height / height) * 100,
+		};
+		const previous = options.getEdit();
+		if (
+			["cropX", "cropY", "cropWidth", "cropHeight"].some(
+				(name) =>
+					Math.abs(next[name as keyof UploadImageEdit] - previous[name as keyof UploadImageEdit]) >
+					0.00001
+			)
+		)
+			options.onchange(next);
+	};
+	const keydown = (event: KeyboardEvent) => {
+		if (!(event.target instanceof CropperHandle)) return;
+		const offset = arrows[event.key];
+		if (!offset) return;
+		event.preventDefault();
+		const x = ((offset[0] * canvas.clientWidth) / source.width) * (event.shiftKey ? 10 : 1);
+		const y = ((offset[1] * canvas.clientHeight) / source.height) * (event.shiftKey ? 10 : 1);
+		if (event.target.action === "move") selection.$move(x, y);
+		else selection.$resize(event.target.action, x, y);
+	};
+	selection.addEventListener("change", change);
+	canvas.addEventListener("keydown", keydown);
+	const resize = new ResizeObserver(sync);
+	resize.observe(canvas);
+	sync();
+
+	return {
+		sync,
+		dispose() {
+			resize.disconnect();
+			selection.removeEventListener("change", change);
+			canvas.removeEventListener("keydown", keydown);
+			canvas.remove();
+		},
+	};
+}

package/src/features/uploads/image-editor.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { Button, Input } from "@riducms/ui";
+	import { getAdminI18n } from "@riducms/plugin";
+	import type { UploadImageEdit } from "@riducms/protocol";
+	import type { UploadSource } from "@admin/features/uploads/upload-draft.svelte";
+	import { mountCropSurface } from "@admin/features/uploads/crop-surface";
+
+	let {
+		source,
+		initial,
+		onapply,
+		oncancel,
+	}: {
+		source: UploadSource;
+		initial: UploadImageEdit;
+		onapply: (edit: UploadImageEdit) => void;
+		oncancel: () => void;
+	} = $props();
+	const i18n = getAdminI18n();
+	const instructionsID = $props.id();
+	// Each mounted editor is an isolated session; Cancel leaves its parent draft untouched.
+	// svelte-ignore state_referenced_locally
+	let edit = $state({ ...initial });
+	let surface: HTMLDivElement;
+	const width = $derived(Math.round(((edit.cropWidth || 100) / 100) * source.width));
+	const height = $derived(Math.round(((edit.cropHeight || 100) / 100) * source.height));
+
+	function attachCrop(node: HTMLElement) {
+		const currentSource = source;
+		const adapter = untrack(() =>
+			mountCropSurface(node, currentSource, {
+				getEdit: () => edit,
+				onchange: (next) => {
+					edit = constrainFocal(next);
+				},
+				label: (direction) => i18n.t("uploads:cropHandle", { direction }),
+			})
+		);
+		$effect(() => {
+			// The adapter is an external DOM system. Numeric inputs and resets synchronize it here.
+			edit.cropX;
+			edit.cropY;
+			edit.cropWidth;
+			edit.cropHeight;
+			adapter.sync();
+		});
+		return () => adapter.dispose();
+	}
+
+	function constrainFocal(next: UploadImageEdit) {
+		return {
+			...next,
+			focalX: Math.max(next.cropX, Math.min(next.cropX + (next.cropWidth || 100), next.focalX)),
+			focalY: Math.max(next.cropY, Math.min(next.cropY + (next.cropHeight || 100), next.focalY)),
+		};
+	}
+
+	function setFocal(x: number, y: number) {
+		if (Number.isFinite(x) && Number.isFinite(y))
+			edit = constrainFocal({ ...edit, focalX: x, focalY: y });
+	}
+
+	function resize(axis: "width" | "height", value: number | undefined) {
+		if (value === undefined || !Number.isFinite(value)) return;
+		if (!edit.cropWidth) {
+			edit.cropWidth = 100;
+			edit.cropHeight = 100;
+		}
+		if (axis === "width")
+			edit.cropWidth = Math.min(100 - edit.cropX, (Math.max(1, value) / source.width) * 100);
+		else edit.cropHeight = Math.min(100 - edit.cropY, (Math.max(1, value) / source.height) * 100);
+		edit = constrainFocal(edit);
+	}
+
+	function focalPointer(event: PointerEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!(event.currentTarget instanceof HTMLButtonElement)) return;
+		const button = event.currentTarget;
+		if (event.type === "pointerdown") button.setPointerCapture(event.pointerId);
+		if (!button.hasPointerCapture(event.pointerId)) return;
+		const bounds = surface.getBoundingClientRect();
+		setFocal(
+			((event.clientX - bounds.left) / bounds.width) * 100,
+			((event.clientY - bounds.top) / bounds.height) * 100
+		);
+	}
+
+	function focalKey(event: KeyboardEvent) {
+		const step = event.shiftKey ? 10 : 1;
+		if (event.key === "ArrowLeft") edit.focalX = Math.max(0, edit.focalX - step);
+		else if (event.key === "ArrowRight") edit.focalX = Math.min(100, edit.focalX + step);
+		else if (event.key === "ArrowUp") edit.focalY = Math.max(0, edit.focalY - step);
+		else if (event.key === "ArrowDown") edit.focalY = Math.min(100, edit.focalY + step);
+		else if (event.key === "Enter" || event.key === " ") {
+			edit.focalX = 50;
+			edit.focalY = 50;
+		} else return;
+		edit = constrainFocal(edit);
+		event.preventDefault();
+	}
+</script>
+
+<div class="ridu-image-editor-actions">
+	<Button variant="outline" onclick={oncancel}>{i18n.t("general:cancel")}</Button>
+	<Button onclick={() => onapply({ ...edit })}>{i18n.t("uploads:applyImageEdit")}</Button>
+</div>
+
+<p class="ridu-upload-description" role="status" aria-live="polite" aria-atomic="true">
+	{i18n.t("uploads:cropPosition", {
+		width,
+		height,
+		x: Math.round((edit.cropX * source.width) / 100),
+		y: Math.round((edit.cropY * source.height) / 100),
+	})}
+	{i18n.t("uploads:focalPosition", {
+		x: `${Math.round(edit.focalX)}%`,
+		y: `${Math.round(edit.focalY)}%`,
+	})}
+</p>
+
+<div class="ridu-image-editor">
+	<div class="ridu-image-editor-preview">
+		<div class="ridu-crop-surface" bind:this={surface}>
+			<div {@attach attachCrop}></div>
+			<button
+				type="button"
+				class="ridu-focal-point"
+				style:left={`${edit.focalX}%`}
+				style:top={`${edit.focalY}%`}
+				aria-label={i18n.t("uploads:focalPoint")}
+				aria-describedby={instructionsID}
+				onpointerdown={focalPointer}
+				onpointermove={focalPointer}
+				onkeydown={focalKey}
+			>
+				+
+			</button>
+		</div>
+	</div>
+
+	<div class="ridu-image-editor-controls">
+		<section>
+			<header>
+				<h3>{i18n.t("uploads:crop")}</h3>
+				<Button
+					size="xs"
+					variant="ghost"
+					onclick={() => {
+						edit = { ...edit, cropX: 0, cropY: 0, cropWidth: 0, cropHeight: 0 };
+					}}
+				>
+					{i18n.t("uploads:reset")}
+				</Button>
+			</header>
+			<p>{i18n.t("uploads:cropDescription")}</p>
+			<div class="ridu-image-editor-pair">
+				<label>
+					{i18n.t("uploads:widthPixels")}<Input
+						type="number"
+						min="1"
+						max={source.width}
+						bind:value={
+							() => width,
+							(value) => resize("width", value === undefined ? undefined : Number(value))
+						}
+					/>
+				</label>
+				<label>
+					{i18n.t("uploads:heightPixels")}<Input
+						type="number"
+						min="1"
+						max={source.height}
+						bind:value={
+							() => height,
+							(value) => resize("height", value === undefined ? undefined : Number(value))
+						}
+					/>
+				</label>
+			</div>
+		</section>
+
+		<section>
+			<header>
+				<h3>{i18n.t("uploads:focalPoint")}</h3>
+				<Button
+					size="xs"
+					variant="ghost"
+					onclick={() => {
+						setFocal(50, 50);
+					}}
+				>
+					{i18n.t("uploads:reset")}
+				</Button>
+			</header>
+			<p>{i18n.t("uploads:focalPointDescription")}</p>
+			<p class="ridu-upload-description" id={instructionsID}>
+				{i18n.t("uploads:focalKeyboardInstructions")}
+			</p>
+			<div class="ridu-image-editor-pair">
+				<label>
+					X %<Input
+						type="number"
+						min="0"
+						max="100"
+						bind:value={
+							() => Math.round(edit.focalX),
+							(value) => {
+								if (value !== undefined) setFocal(Number(value), edit.focalY);
+							}
+						}
+					/>
+				</label>
+				<label>
+					Y %<Input
+						type="number"
+						min="0"
+						max="100"
+						bind:value={
+							() => Math.round(edit.focalY),
+							(value) => {
+								if (value !== undefined) setFocal(edit.focalX, Number(value));
+							}
+						}
+					/>
+				</label>
+			</div>
+		</section>
+	</div>
+</div>

package/src/features/uploads/rendition-preview.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import type { AdminDocument } from "@admin/core/api/admin-client";
+
+	let {
+		renditions,
+		document,
+	}: {
+		renditions: [string, Record<string, unknown>][];
+		document: AdminDocument;
+	} = $props();
+	const i18n = getAdminI18n();
+	let selected = $state(0);
+	const current = $derived(renditions[selected] ?? renditions[0]);
+
+	function filename(rendition: Record<string, unknown>) {
+		return String(
+			rendition.filename ??
+				String(rendition.objectKey ?? "")
+					.split("/")
+					.at(-1) ??
+				document.filename
+		);
+	}
+
+	function metadata(rendition: Record<string, unknown>) {
+		return `${i18n.formatNumber(Number(rendition.filesize ?? 0) / 1024, { maximumFractionDigits: 0 })}KB · ${rendition.width} × ${rendition.height} · ${rendition.mimeType}`;
+	}
+</script>
+
+{#if current}
+	<div class="ridu-upload-renditions">
+		<section class="ridu-rendition-preview" aria-label={current[0]}>
+			<header>
+				<p>{current[0]}</p>
+				<a href={String(current[1].url)} target="_blank" rel="noreferrer">
+					{filename(current[1])}
+				</a>
+				<p>{metadata(current[1])}</p>
+			</header>
+			<div class="ridu-rendition-image">
+				<img src={String(current[1].url)} alt={String(document.alt ?? current[0])} />
+			</div>
+		</section>
+
+		<div class="ridu-rendition-list" aria-label={i18n.t("uploads:imageSizes")}>
+			{#each renditions as [name, rendition], index (name)}
+				<button
+					type="button"
+					class="ridu-rendition-option"
+					aria-pressed={selected === index}
+					onclick={() => (selected = index)}
+				>
+					<img src={String(rendition.url)} alt="" />
+					<span>
+						<span class="ridu-rendition-label">{name}</span>
+						<strong>{filename(rendition)}</strong>
+						<span class="ridu-rendition-label">{metadata(rendition)}</span>
+					</span>
+				</button>
+			{/each}
+		</div>
+	</div>
+{/if}