@riducms/admin 0.1.0

package/src/components/ui/tabs/tabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
+	{...restProps}
+/>

package/src/components/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea } from "@riducms/ui";

package/src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "@admin/components/ui/tooltip/tooltip.svelte";
+export { default as TooltipContent } from "@admin/components/ui/tooltip/tooltip-content.svelte";
+export { default as TooltipProvider } from "@admin/components/ui/tooltip/tooltip-provider.svelte";
+export { default as TooltipTrigger } from "@admin/components/ui/tooltip/tooltip-trigger.svelte";

package/src/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+	import type { WithoutChildrenOrChild } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<TooltipPrimitive.PortalProps>;
+	} = $props();
+</script>
+
+<TooltipPrimitive.Portal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:animate-in data-[state=instant-open]:fade-in-0 data-[state=instant-open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) bg-foreground text-background",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px] z-50 bg-foreground fill-foreground",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
+						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%-3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>

package/src/components/ui/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />

package/src/components/ui/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps<T> = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/src/components/ui/tooltip/tooltip.svelte

@@ -0,0 +1,7 @@
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps<T> = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />

package/src/core/api/admin-client.ts

@@ -0,0 +1,45 @@
+import {
+	createClient,
+	type CollectionContract,
+	type Version,
+	type ScheduledPublish,
+	type RiduClient,
+} from "@riducms/sdk";
+import type { FieldDocument } from "@riducms/plugin";
+
+export type AdminDocument = FieldDocument;
+
+type AdminCollection = CollectionContract & {
+	auth: true;
+	upload: true;
+	versions: true;
+	output: AdminDocument;
+	create: Record<string, unknown>;
+	update: Record<string, unknown>;
+	where: Record<string, unknown>;
+	select: Record<string, boolean>;
+	populate: Record<string, unknown>;
+	trash: true;
+};
+
+type AdminGlobal = {
+	versions: true;
+	output: AdminDocument;
+	update: Record<string, unknown>;
+	select: Record<string, boolean>;
+	populate: Record<string, unknown>;
+};
+
+export interface AdminConfig {
+	collections: Record<string, AdminCollection>;
+	globals: Record<string, AdminGlobal>;
+}
+
+export type AdminVersion = Version<AdminDocument>;
+export type AdminScheduledPublish = ScheduledPublish;
+
+export type AdminClient = RiduClient<AdminConfig>;
+
+export function createAdminClient(baseURL = window.location.origin): AdminClient {
+	return createClient<AdminConfig>({ baseURL });
+}

package/src/core/forms/field-condition.ts

@@ -0,0 +1,63 @@
+import type {
+	SchemaFieldCondition,
+	SchemaFieldConditionPredicate,
+	SchemaFieldConditionValue,
+} from "@riducms/protocol";
+
+export type FieldConditionValueReader = (path: string) => unknown;
+
+/** Evaluates manifest-owned presentation metadata without mutating form values. */
+export function evaluateFieldCondition(
+	condition: SchemaFieldCondition,
+	fieldPath: string,
+	read: FieldConditionValueReader
+): boolean {
+	switch (condition.kind) {
+		case "all":
+			return condition.conditions.every((child) => evaluateFieldCondition(child, fieldPath, read));
+		case "any":
+			return condition.conditions.some((child) => evaluateFieldCondition(child, fieldPath, read));
+		case "not":
+			return !evaluateFieldCondition(condition.conditions[0], fieldPath, read);
+		case "predicate":
+			return evaluatePredicate(condition.predicate, fieldPath, read);
+	}
+}
+
+export function fieldConditionValuePath(
+	scope: SchemaFieldConditionPredicate["scope"],
+	path: string,
+	fieldPath: string
+): string {
+	if (scope === "document") return path;
+	const separator = fieldPath.lastIndexOf(".");
+	return separator === -1 ? path : `${fieldPath.slice(0, separator)}.${path}`;
+}
+
+function evaluatePredicate(
+	predicate: SchemaFieldConditionPredicate,
+	fieldPath: string,
+	read: FieldConditionValueReader
+) {
+	const actual = read(fieldConditionValuePath(predicate.scope, predicate.path, fieldPath));
+	const matches = (expected: SchemaFieldConditionValue) => scalarMatches(actual, expected);
+	switch (predicate.operator) {
+		case "equals":
+			return predicate.values[0] !== undefined && matches(predicate.values[0]);
+		case "notEquals":
+			return predicate.values[0] !== undefined && !matches(predicate.values[0]);
+		case "oneOf":
+			return predicate.values.some(matches);
+	}
+}
+
+function scalarMatches(actual: unknown, expected: SchemaFieldConditionValue) {
+	switch (expected.type) {
+		case "string":
+			return typeof actual === "string" && actual === expected.value;
+		case "number":
+			return typeof actual === "number" && actual === Number(expected.value);
+		case "boolean":
+			return typeof actual === "boolean" && actual === (expected.value === "true");
+	}
+}

package/src/core/forms/form-controller.svelte.ts

@@ -0,0 +1,369 @@
+import type { AccessCapabilitiesEnvelope, ValidationIssue } from "@riducms/protocol";
+import type { SchemaField } from "@riducms/protocol";
+import type { AdminI18n } from "@riducms/plugin";
+import { RiduError } from "@riducms/sdk";
+import { createAdminI18n } from "@riducms/translations";
+
+import {
+	cloneFormValues,
+	localizationSource,
+	reconcileFormSchema,
+	recoverFormDraft,
+	shouldSubmitLocalizedPath,
+	type DetachedDraftValue,
+	type FormValues,
+	submissionFormValues,
+} from "@admin/core/forms/form-schema";
+import { validateFormValues } from "@admin/core/forms/form-validation";
+
+export type { DetachedDraftValue, FormValues } from "@admin/core/forms/form-schema";
+
+export interface FormReconciliationResult {
+	detached: DetachedDraftValue[];
+	restoredFields: number;
+}
+
+export interface FormResource {
+	collection: string;
+	id?: string;
+	global?: boolean;
+}
+
+export interface DerivedTextBinding {
+	follow(): void;
+	setManual(value: string): void;
+}
+
+interface DerivedTextBindingState {
+	sourcePath: string;
+	following: boolean;
+	derive: (source: unknown) => string;
+	stop: () => void;
+}
+
+export class FormValidationError extends Error {
+	constructor(
+		readonly issues: readonly ValidationIssue[],
+		i18n: AdminI18n = createAdminI18n()
+	) {
+		super(i18n.t("errors:correctInvalidFields"));
+		this.name = "FormValidationError";
+	}
+}
+
+export class FormController {
+	values = $state<FormValues>({});
+	original = $state<FormValues>({});
+	issues = $state<ValidationIssue[]>([]);
+	submitting = $state(false);
+	revision = $state(0);
+	access = $state.raw<AccessCapabilitiesEnvelope>();
+	accessMode = $state<"create" | "update">("update");
+	writeBlocked = $state(false);
+	resource = $state.raw<FormResource>();
+	contentLocale = $state<string>();
+	localizationSources = $state.raw<Readonly<Record<string, string>>>({});
+	#registered = new Set<string>();
+	#pathObservers = new Map<string, Set<(value: unknown) => void>>();
+	#derivedTextBindings = new Map<string, DerivedTextBindingState>();
+	#revision = 0;
+	#i18n: AdminI18n;
+
+	constructor(values: FormValues = {}, i18n: AdminI18n = createAdminI18n()) {
+		this.#i18n = i18n;
+		this.reset(values);
+	}
+
+	get dirty() {
+		return JSON.stringify(this.values) !== JSON.stringify(this.original);
+	}
+
+	register(path: string) {
+		this.#registered.add(path);
+		return () => this.#registered.delete(path);
+	}
+
+	isRegistered(path: string) {
+		return this.#registered.has(path);
+	}
+
+	observe(path: string, observer: (value: unknown) => void) {
+		const observers = this.#pathObservers.get(path) ?? new Set<(value: unknown) => void>();
+		observers.add(observer);
+		this.#pathObservers.set(path, observers);
+		return () => {
+			observers.delete(observer);
+			if (observers.size === 0) this.#pathObservers.delete(path);
+		};
+	}
+
+	bindDerivedText(
+		path: string,
+		sourcePath: string,
+		derive: (source: unknown) => string,
+		follows: (current: unknown, source: unknown) => boolean
+	): DerivedTextBinding {
+		let binding = this.#derivedTextBindings.get(path);
+		if (binding !== undefined && binding.sourcePath !== sourcePath) {
+			binding.stop();
+			this.#derivedTextBindings.delete(path);
+			binding = undefined;
+		}
+		if (binding === undefined) {
+			const source = this.get(sourcePath);
+			const state: DerivedTextBindingState = {
+				sourcePath,
+				following: follows(this.get(path), source),
+				derive,
+				stop: () => undefined,
+			};
+			state.stop = this.observe(sourcePath, (nextSource) => {
+				if (state.following) this.#setDerivedText(path, state.derive(nextSource));
+			});
+			this.#derivedTextBindings.set(path, state);
+			binding = state;
+			if (state.following) this.#setDerivedText(path, state.derive(source));
+		}
+		const active = binding;
+		return {
+			follow: () => {
+				active.following = true;
+				this.#setDerivedText(path, active.derive(this.get(active.sourcePath)));
+			},
+			setManual: (value) => {
+				active.following = false;
+				this.set(path, value);
+			},
+		};
+	}
+
+	get(path: string) {
+		return readPath(this.values, path);
+	}
+
+	snapshot() {
+		return cloneFormValues(this.values);
+	}
+
+	set(path: string, value: unknown) {
+		writePath(this.values, path, value);
+		this.issues = this.issues.filter(
+			(issue) => issue.path !== path && !issue.path.startsWith(`${path}.`)
+		);
+		for (const [observedPath, observers] of this.#pathObservers) {
+			if (
+				observedPath !== path &&
+				!observedPath.startsWith(`${path}.`) &&
+				!path.startsWith(`${observedPath}.`)
+			) {
+				continue;
+			}
+			const observedValue = this.get(observedPath);
+			for (const observer of [...observers]) observer(observedValue);
+		}
+	}
+
+	issuesFor(path: string) {
+		return this.issues.filter((issue) => issue.path === path || issue.path.startsWith(`${path}.`));
+	}
+
+	setAccess(access: AccessCapabilitiesEnvelope | undefined, mode: "create" | "update") {
+		this.access = access;
+		this.accessMode = mode;
+	}
+
+	setResource(resource: FormResource | undefined) {
+		this.resource = resource;
+	}
+
+	setLocalization(locale: string | undefined, sources: Readonly<Record<string, string>> = {}) {
+		this.contentLocale = locale;
+		this.localizationSources = sources;
+	}
+
+	localizationSource(path: string) {
+		return localizationSource(path, this.values, this.original, this.localizationSources);
+	}
+
+	isInherited(path: string) {
+		const source = this.localizationSource(path);
+		return source !== undefined && source !== this.contentLocale;
+	}
+
+	fieldCapabilities(path: string, canonicalPath = authoredPath(path)) {
+		const access = this.access;
+		if (access === undefined) return undefined;
+		return access.fields[path] ?? access.fields[canonicalPath] ?? access.fields[authoredPath(path)];
+	}
+
+	canRead(path: string, canonicalPath?: string) {
+		return this.fieldCapabilities(path, canonicalPath)?.read ?? true;
+	}
+
+	canWrite(path: string, canonicalPath?: string) {
+		if (this.writeBlocked) return false;
+		const access = this.access;
+		if (access === undefined) return true;
+		const field = this.fieldCapabilities(path, canonicalPath);
+		return this.accessMode === "create"
+			? (field?.create ?? access.operations.create)
+			: (field?.update ?? access.operations.update);
+	}
+
+	invalidateIndexedFieldCapabilities(path: string) {
+		const access = this.access;
+		if (access === undefined) return;
+		const fields = Object.fromEntries(
+			Object.entries(access.fields).filter(([candidate]) => !isIndexedChildPath(path, candidate))
+		);
+		if (Object.keys(fields).length === Object.keys(access.fields).length) return;
+		this.access = { ...access, fields };
+	}
+
+	reset(values: FormValues) {
+		this.#clearDerivedTextBindings();
+		this.values = cloneFormValues(values);
+		this.original = cloneFormValues(values);
+		this.localizationSources = {};
+		this.issues = [];
+		this.submitting = false;
+		this.revision = ++this.#revision;
+	}
+
+	reconcile(
+		previousFields: readonly SchemaField[],
+		nextFields: readonly SchemaField[],
+		initializeDefaults = false
+	) {
+		this.#clearDerivedTextBindings();
+		const result = reconcileFormSchema(this, previousFields, nextFields, { initializeDefaults });
+		this.values = result.values;
+		this.original = result.original;
+		this.issues = [];
+		this.revision = ++this.#revision;
+		return { detached: result.detached, restoredFields: 0 };
+	}
+
+	recover(
+		draft: { values: FormValues; original: FormValues },
+		previousFields: readonly SchemaField[],
+		nextFields: readonly SchemaField[]
+	) {
+		this.#clearDerivedTextBindings();
+		const result = recoverFormDraft(this, draft, previousFields, nextFields);
+		this.values = result.values;
+		this.original = result.original;
+		this.issues = [];
+		this.revision = ++this.#revision;
+		return { detached: result.detached, restoredFields: result.restoredFields };
+	}
+
+	async submit<T>(
+		fields: readonly SchemaField[],
+		requireMissing: boolean,
+		operation: (values: FormValues) => Promise<T>
+	) {
+		const controllerRevision = this.#revision;
+		const include = (path: string, canonicalPath: string) =>
+			this.canRead(path, canonicalPath) &&
+			this.canWrite(path, canonicalPath) &&
+			shouldSubmitLocalizedPath(
+				path,
+				this.values,
+				this.original,
+				this.contentLocale,
+				this.localizationSources
+			);
+		const clientIssues = validateFormValues(fields, this.values, {
+			requireMissing,
+			include,
+			i18n: this.#i18n,
+		});
+		if (clientIssues.length > 0) {
+			this.issues = clientIssues;
+			throw new FormValidationError(clientIssues, this.#i18n);
+		}
+		this.submitting = true;
+		this.issues = [];
+		try {
+			const result = await operation(submissionFormValues(fields, this.values, include));
+			if (this.#revision === controllerRevision) {
+				this.original = cloneFormValues(this.values);
+				this.revision = ++this.#revision;
+			}
+			return result;
+		} catch (error) {
+			if (this.#revision === controllerRevision && error instanceof RiduError) {
+				this.issues = [...error.issues];
+			}
+			throw error;
+		} finally {
+			if (this.#revision === controllerRevision) this.submitting = false;
+		}
+	}
+
+	#setDerivedText(path: string, value: string) {
+		if (String(this.get(path) ?? "") !== value) this.set(path, value);
+	}
+
+	#clearDerivedTextBindings() {
+		for (const binding of this.#derivedTextBindings.values()) binding.stop();
+		this.#derivedTextBindings.clear();
+	}
+}
+
+function authoredPath(path: string) {
+	return path
+		.split(".")
+		.filter((segment) => !/^\d+$/.test(segment))
+		.join(".");
+}
+
+function isIndexedChildPath(parent: string, candidate: string) {
+	const prefix = parent === "" ? "" : `${parent}.`;
+	if (!candidate.startsWith(prefix)) return false;
+	return /^\d+$/.test(candidate.slice(prefix.length).split(".", 1)[0] ?? "");
+}
+
+function readPath(values: FormValues, path: string) {
+	let current: unknown = values;
+	for (const segment of path.split(".")) {
+		if (Array.isArray(current)) {
+			current = current[Number(segment)];
+		} else if (isRecord(current)) {
+			current = current[segment];
+		} else return undefined;
+	}
+	return current;
+}
+
+function writePath(values: FormValues, path: string, value: unknown) {
+	const segments = path.split(".");
+	let current: FormValues | unknown[] = values;
+	for (let position = 0; position < segments.length - 1; position += 1) {
+		const segment = segments[position];
+		if (segment === undefined) continue;
+		let next = getChild(current, segment);
+		if (!isRecord(next) && !Array.isArray(next)) {
+			const following = segments[position + 1];
+			next = /^\d+$/.test(following ?? "") ? [] : {};
+			setChild(current, segment, next);
+		}
+		current = next as FormValues | unknown[];
+	}
+	const last = segments.at(-1);
+	if (last !== undefined) setChild(current, last, value);
+}
+
+function getChild(container: FormValues | unknown[], segment: string) {
+	return Array.isArray(container) ? container[Number(segment)] : container[segment];
+}
+
+function setChild(container: FormValues | unknown[], segment: string, value: unknown) {
+	if (Array.isArray(container)) container[Number(segment)] = value;
+	else container[segment] = value;
+}
+
+function isRecord(value: unknown): value is FormValues {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/src/core/forms/form-draft-recovery.ts

@@ -0,0 +1,80 @@
+import type { SchemaCollection } from "@riducms/protocol";
+
+import { cloneFormValues, type FormValues } from "@admin/core/forms/form-schema";
+
+const recoveryVersion = 1;
+const storagePrefix = "ridu:form-recovery:";
+
+export interface FormDraftCheckpoint {
+	version: typeof recoveryVersion;
+	collection: SchemaCollection;
+	documentID?: string;
+	values: FormValues;
+	original: FormValues;
+	createdAt: string;
+}
+
+export function saveFormDraft(
+	collection: SchemaCollection,
+	documentID: string | undefined,
+	values: FormValues,
+	original: FormValues
+): boolean {
+	try {
+		const checkpoint: FormDraftCheckpoint = {
+			version: recoveryVersion,
+			collection,
+			...(documentID === undefined ? {} : { documentID }),
+			values: cloneFormValues(values),
+			original: cloneFormValues(original),
+			createdAt: new Date().toISOString(),
+		};
+		sessionStorage.setItem(storageKey(collection.id, documentID), JSON.stringify(checkpoint));
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+export function takeFormDraft(
+	collectionID: string,
+	documentID: string | undefined
+): FormDraftCheckpoint | undefined {
+	const key = storageKey(collectionID, documentID);
+	try {
+		const encoded = sessionStorage.getItem(key);
+		if (encoded === null) return undefined;
+		sessionStorage.removeItem(key);
+		const decoded: unknown = JSON.parse(encoded);
+		return isCheckpoint(decoded, collectionID, documentID) ? decoded : undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+export function clearFormDraft(collectionID: string, documentID: string | undefined): void {
+	try {
+		sessionStorage.removeItem(storageKey(collectionID, documentID));
+	} catch {
+		// Recovery is best-effort when browser storage is unavailable.
+	}
+}
+
+function storageKey(collectionID: string, documentID: string | undefined) {
+	return `${storagePrefix}${collectionID}:${documentID ?? "new"}`;
+}
+
+function isCheckpoint(
+	value: unknown,
+	collectionID: string,
+	documentID: string | undefined
+): value is FormDraftCheckpoint {
+	if (!isRecord(value) || value.version !== recoveryVersion) return false;
+	if (!isRecord(value.collection) || value.collection.id !== collectionID) return false;
+	if (value.documentID !== documentID) return false;
+	return isRecord(value.values) && isRecord(value.original) && typeof value.createdAt === "string";
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}