@riducms/admin 0.1.5 → 0.2.0

package/package.json

@@ -9,11 +9,11 @@
 		"@hvniel/svelte-router": "^0.0.6",
 		"@iconify/json": "^2.2.509",
 		"@internationalized/date": "^3.12.3",
-		"@riducms/plugin": "0.1.5",
-		"@riducms/protocol": "0.1.5",
-		"@riducms/sdk": "0.1.5",
-		"@riducms/translations": "0.1.5",
-		"@riducms/ui": "0.1.5",
+		"@riducms/plugin": "0.2.0",
+		"@riducms/protocol": "0.2.0",
+		"@riducms/sdk": "0.2.0",
+		"@riducms/translations": "0.2.0",
+		"@riducms/ui": "0.2.0",
 		"@types/prismjs": "^1.26.5",
 		"bits-ui": "^2.18.1",
 		"prismjs": "^1.30.0",
@@ -22,7 +22,7 @@
 	"description": "Framework-owned Svelte 5 authoring application embedded by Ridu servers.",
 	"devDependencies": {
 		"@hvniel/lexical-svelte": "^0.1.1",
-		"@riducms/build": "0.1.5",
+		"@riducms/build": "0.2.0",
 		"svelte": "^5.56.8"
 	},
 	"exports": {
@@ -51,12 +51,14 @@
 	},
 	"scripts": {
 		"build": "vite build",
-		"check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.test.json",
+		"check": "svelte-check --tsconfig ./tsconfig.app.json && svelte-check --tsconfig ./tsconfig.test.json",
 		"dev": "vite",
 		"lint": "tsc -p tsconfig.node.json && bun ../scripts/check-admin-ui-policy.ts",
 		"preview": "vite preview",
-		"test": "bun test"
+		"test": "bun run test:unit && bun run test:components",
+		"test:components": "vitest run --config vitest.config.ts",
+		"test:unit": "bun test tests"
 	},
 	"type": "module",
-	"version": "0.1.5"
+	"version": "0.2.0"
 }

package/src/app.css

@@ -232,15 +232,23 @@ a {
 	outline-offset: 2px;
 }
 
-[data-slot="input"]:focus-visible,
-[data-slot="textarea"]:focus-visible,
-[data-slot="command-input"]:focus-visible,
-select:focus-visible {
+[data-slot="input"]:not([aria-invalid="true"]):focus-visible,
+[data-slot="textarea"]:not([aria-invalid="true"]):focus-visible,
+[data-slot="command-input"]:not([aria-invalid="true"]):focus-visible,
+select:not([aria-invalid="true"]):focus-visible {
 	border-color: color-mix(in oklab, var(--ring) 78%, transparent);
 	box-shadow: none;
 	outline: none;
 }
 
+[data-slot="input"][aria-invalid="true"]:focus-visible,
+[data-slot="textarea"][aria-invalid="true"]:focus-visible,
+[data-slot="command-input"][aria-invalid="true"]:focus-visible,
+select[aria-invalid="true"]:focus-visible {
+	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--destructive) 65%, transparent);
+	outline: none;
+}
+
 .font-serif {
 	font-family: var(--font-serif);
 }
@@ -308,6 +316,57 @@ select:focus-visible {
 	line-height: 1.5;
 }
 
+/*
+ * Validation feedback is a status surface, not an interactive tooltip. Keep it
+ * anchored to the control without covering its hit target or replacing help copy.
+ */
+.ridu-field-error-tooltip {
+	position: absolute;
+	z-index: 20;
+	inset-inline-end: 0;
+	inset-block-end: calc(100% + 0.4rem);
+	max-inline-size: min(80%, 42rem);
+	margin: 0;
+	border-radius: calc(var(--radius) - 0.0625rem);
+	padding: 0.32rem 0.55rem;
+	background: var(--destructive);
+	box-shadow: 0 0.3rem 1rem oklch(0 0 0 / 18%);
+	color: var(--destructive-foreground);
+	font-size: 0.8125rem;
+	font-weight: 500;
+	line-height: 1.35;
+	list-style: none;
+	overflow-wrap: anywhere;
+	pointer-events: none;
+}
+
+.ridu-field-error-tooltip::after {
+	position: absolute;
+	inset-block-start: 100%;
+	inset-inline-end: 0.7rem;
+	inline-size: 0;
+	block-size: 0;
+	border: 0.32rem solid transparent;
+	border-block-start-color: var(--destructive);
+	content: "";
+}
+
+.ridu-field-error-tooltip > :where(ul, ol) {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.ridu-field-error-tooltip li + li {
+	margin-block-start: 0.2rem;
+}
+
+@media (max-width: 34rem) {
+	.ridu-field-error-tooltip {
+		max-inline-size: calc(100% - 0.5rem);
+	}
+}
+
 /*
  * Tone lives in the text and the wash, matching `banner`: no rails, chips, or icons.
  * `--normal-*` are sonner's own theming variables; its dark-theme rules paint the

package/src/app.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { createBrowserRouter, RouterProvider } from "@hvniel/svelte-router";
-	import { setAdminI18n, type AdminPlugin, type FieldPlugin } from "@riducms/plugin";
-	import type { TranslationLanguage } from "@riducms/translations";
+	import { setAdminI18n } from "@riducms/plugin";
 	import { TooltipProvider } from "@riducms/ui";
 	import { untrack } from "svelte";
 
@@ -17,25 +16,24 @@
 	import type { AdminClient } from "@admin/core/api/admin-client";
 	import DevelopmentTools from "@admin/features/development/development-tools.svelte";
 
+	import type { AdminConfig } from "@riducms/plugin/admin";
 	interface Props {
+		adminConfig?: AdminConfig;
 		clientFactory: () => AdminClient;
 		adminBasePath?: string;
-		plugins?: readonly AdminPlugin[];
-		fieldPlugins?: readonly FieldPlugin[];
-		languages?: readonly TranslationLanguage[];
 	}
-
-	let {
-		clientFactory,
-		adminBasePath = "/admin",
-		plugins = [],
-		fieldPlugins = [],
-		languages,
-	}: Props = $props();
+	let { clientFactory, adminBasePath = "/admin", adminConfig = {} }: Props = $props();
 	// The runtime owns the client and plugin registry selected when this admin instance is mounted.
 	// svelte-ignore state_referenced_locally
 	const runtime = setAdminRuntime(
-		new AdminRuntime(clientFactory(), plugins, fieldPlugins, languages)
+		new AdminRuntime(
+			clientFactory(),
+			adminConfig.plugins,
+			adminConfig.languages,
+			undefined,
+			adminConfig.fields,
+			adminConfig
+		)
 	);
 	setAdminI18n(runtime.i18n);
 	const notifications = setNotificationCenter(new NotificationCenter());

package/src/components/ui/date-value-control/date-value-control-loader.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-	import type { SchemaDatePickerAppearance } from "@riducms/protocol";
+	import type { SchemaDateFormat } from "@riducms/protocol";
+	import { fieldControlARIA } from "@riducms/ui";
 	import type { Component } from "svelte";
 
 	type ControlSize = "field" | "compact" | "toolbar";
 	type DateValueControlProps = {
 		id: string;
 		name?: string;
-		appearance?: SchemaDatePickerAppearance;
+		appearance?: SchemaDateFormat;
 		value?: string;
 		disabled?: boolean;
 		readonly?: boolean;
 		required?: boolean;
 		invalid?: boolean;
+		hasDescription?: boolean;
 		label?: string;
-		describedBy?: string;
 		class?: string;
 		size?: ControlSize;
 		onValueChange: (value: string) => void;
@@ -21,6 +22,9 @@
 
 	let props: DateValueControlProps = $props();
 	let Control = $state<Component<DateValueControlProps> | undefined>(undefined);
+	const controlARIA = $derived(
+		fieldControlARIA(props.id, props.hasDescription ?? false, props.invalid ?? false)
+	);
 
 	void import("@admin/components/ui/date-value-control/date-value-control.svelte").then(
 		({ default: component }) => (Control = component)
@@ -30,7 +34,14 @@
 {#if Control !== undefined}
 	<Control {...props} />
 {:else}
-	<div id={props.id} class={props.class} role="status" aria-label={props.label} aria-busy="true">
+	<div
+		id={props.id}
+		class={props.class}
+		role="status"
+		aria-label={props.label}
+		aria-busy="true"
+		{...controlARIA}
+	>
 		Loading date control…
 	</div>
 {/if}

package/src/components/ui/date-value-control/date-value-control.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { DateValue, Time } from "@internationalized/date";
-	import type { SchemaDatePickerAppearance } from "@riducms/protocol";
+	import type { SchemaDateFormat } from "@riducms/protocol";
 	import { DateField, TimeField } from "bits-ui";
 	import CalendarIcon from "~icons/lucide/calendar";
 
 	import { buttonVariants } from "@admin/components/ui/button";
 	import DateValueCalendar from "@admin/components/ui/date-value-control/date-value-calendar.svelte";
 	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
-	import { cn } from "@riducms/ui";
+	import { cn, fieldControlARIA } from "@riducms/ui";
 	import { getAdminI18n } from "@riducms/plugin";
 	import {
 		datePickerFormValue,
@@ -20,28 +20,28 @@
 	let {
 		id,
 		name,
-		appearance = "dayOnly",
+		appearance = "date",
 		value = "",
 		disabled = false,
 		readonly = false,
 		required = false,
 		invalid = false,
+		hasDescription = false,
 		label,
-		describedBy,
 		class: className,
 		size = "field",
 		onValueChange,
 	}: {
 		id: string;
 		name?: string;
-		appearance?: SchemaDatePickerAppearance;
+		appearance?: SchemaDateFormat;
 		value?: string;
 		disabled?: boolean;
 		readonly?: boolean;
 		required?: boolean;
 		invalid?: boolean;
+		hasDescription?: boolean;
 		label?: string;
-		describedBy?: string;
 		class?: string;
 		size?: ControlSize;
 		onValueChange: (value: string) => void;
@@ -50,7 +50,7 @@
 
 	const controlClass = $derived(
 		cn(
-			"flex w-full items-center rounded-lg border border-control-border bg-control text-foreground-strong transition-[background-color,border-color,color] duration-150 hover:border-control-border-hover focus-within:border-primary/65 aria-invalid:border-destructive/65 data-[disabled]:cursor-not-allowed data-[disabled]:border-control-border-disabled data-[disabled]:bg-control-disabled data-[disabled]:opacity-45 data-[readonly]:border-control-border-disabled data-[readonly]:bg-control-disabled",
+			"flex w-full items-center rounded-lg border border-control-border bg-control text-foreground-strong transition-[background-color,border-color,color] duration-150 hover:border-control-border-hover focus-within:border-primary/65 aria-invalid:!border-destructive/65 data-[disabled]:cursor-not-allowed data-[disabled]:border-control-border-disabled data-[disabled]:bg-control-disabled data-[disabled]:opacity-45 data-[readonly]:border-control-border-disabled data-[readonly]:bg-control-disabled",
 			size === "field" && "h-10.5 px-3.25 text-[14.5px]",
 			size === "compact" && "h-9 px-3 text-[13px]",
 			size === "toolbar" && "h-[34px] px-2.5 text-[12.5px]",
@@ -58,9 +58,11 @@
 		)
 	);
 	const selectedDate = $derived(datePickerValue(value, appearance, i18n.timeZone));
+	const controlARIA = $derived(fieldControlARIA(id, hasDescription, invalid));
 	let open = $state(false);
 
 	function updateDate(next: DateValue | undefined) {
+		if (disabled || readonly) return;
 		onValueChange(datePickerFormValue(next, appearance, i18n.timeZone));
 	}
 
@@ -70,18 +72,19 @@
 	}
 
 	function updateTime(next: Time | undefined) {
+		if (disabled || readonly) return;
 		onValueChange(timeFieldFormValue(next));
 	}
 </script>
 
-{#if appearance === "timeOnly"}
+{#if appearance === "time"}
 	<TimeField.Root
 		value={timeFieldValue(value)}
 		locale={i18n.language}
 		{disabled}
 		{readonly}
 		{required}
-		errorMessageId={invalid ? describedBy : undefined}
+		errorMessageId={controlARIA["aria-errormessage"]}
 		onValueChange={updateTime}
 	>
 		<TimeField.Input
@@ -90,10 +93,8 @@
 			class={cn(controlClass, "gap-0.5 select-none")}
 			data-disabled={disabled ? "" : undefined}
 			data-readonly={readonly ? "" : undefined}
-			aria-invalid={invalid}
+			{...controlARIA}
 			aria-label={label}
-			aria-describedby={describedBy}
-			aria-errormessage={invalid ? describedBy : undefined}
 		>
 			{#snippet children({ segments })}
 				{#each segments as { part, value: segmentValue }, index (`${part}:${index}`)}
@@ -113,26 +114,25 @@
 	<DateField.Root
 		value={selectedDate}
 		locale={i18n.language}
-		granularity={appearance === "dayAndTime" ? "minute" : "day"}
+		granularity={appearance === "date-time" ? "minute" : "day"}
 		{disabled}
 		{readonly}
 		{required}
-		errorMessageId={invalid ? describedBy : undefined}
+		errorMessageId={controlARIA["aria-errormessage"]}
 		onValueChange={updateDate}
 	>
 		<div
 			class={controlClass}
 			data-disabled={disabled ? "" : undefined}
 			data-readonly={readonly ? "" : undefined}
-			aria-invalid={invalid}
+			aria-invalid={controlARIA["aria-invalid"]}
 		>
 			<DateField.Input
 				{id}
 				{name}
 				class="flex min-w-0 flex-1 items-center gap-0.5 select-none"
 				aria-label={label}
-				aria-describedby={describedBy}
-				aria-errormessage={invalid ? describedBy : undefined}
+				{...controlARIA}
 			>
 				{#snippet children({ segments })}
 					{#each segments as { part, value: segmentValue }, index (`${part}:${index}`)}

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

@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"gap-2 rounded-[3px] border border-control-border bg-control px-3 text-[13.5px] text-foreground-strong transition-[background-color,border-color,color] duration-150 hover:border-control-border-hover focus-visible:border-primary/65 aria-invalid:border-destructive/65 data-[placeholder]:text-foreground-placeholder data-[size=field]:h-10 data-[size=compact]:h-9 data-[size=toolbar]:h-[34px] data-[size=toolbar]:px-2.5 data-[size=toolbar]:text-[12.5px] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:border-control-border-disabled disabled:bg-control-disabled disabled:opacity-45 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"gap-2 rounded-[3px] border border-control-border bg-control px-3 text-[13.5px] text-foreground-strong transition-[background-color,border-color,color] duration-150 hover:border-control-border-hover focus-visible:border-primary/65 aria-invalid:!border-destructive/65 data-[placeholder]:text-foreground-placeholder data-[size=field]:h-10 data-[size=compact]:h-9 data-[size=toolbar]:h-[34px] data-[size=toolbar]:px-2.5 data-[size=toolbar]:text-[12.5px] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:border-control-border-disabled disabled:bg-control-disabled disabled:opacity-45 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}

package/src/core/forms/embedded-fields.ts

@@ -0,0 +1,132 @@
+import { resolveBlockTypes } from "@riducms/protocol";
+import type {
+	SchemaBlockType,
+	SchemaEmbeddedTree,
+	SchemaEmbeddedTreeCase,
+	SchemaField,
+	ValidationIssue,
+} from "@riducms/protocol";
+
+export interface EmbeddedOccurrence {
+	tree: SchemaEmbeddedTree;
+	case: SchemaEmbeddedTreeCase;
+	block: SchemaBlockType;
+	payload: Record<string, unknown>;
+	path: string;
+	identity: string | undefined;
+}
+
+/** Only descriptor-owned tree edges are visited. Payloads return to ordinary field traversal. */
+export function embeddedOccurrences(field: SchemaField, value: unknown, path = field.path) {
+	const occurrences: EmbeddedOccurrence[] = [];
+	const issues: ValidationIssue[] = [];
+	let work = 0;
+	const fail = (path: string, message: string, code = "invalid_embedded") =>
+		issues.push({ path, message, code });
+	if (value === null || value === undefined) return { occurrences, issues };
+	for (const tree of field.plugin?.embeddedTrees ?? []) {
+		if (tree.version !== 1) {
+			fail(path, `Unsupported embedded tree metadata version ${tree.version}`);
+			continue;
+		}
+		let root: unknown = value;
+		let rootPath = path;
+		for (const segment of tree.root) {
+			root = isEmbeddedRecord(root) ? root[segment] : undefined;
+			rootPath += `.${segment}`;
+		}
+		const keys = new Set<string>();
+		const visit = (node: unknown, nodePath: string, depth: number) => {
+			if (++work > 10_000 || depth > 64) {
+				fail(nodePath, "Embedded field traversal budget exceeded", "embedded_budget");
+				return;
+			}
+			if (!isEmbeddedRecord(node)) {
+				fail(nodePath, "Embedded tree node must be an object");
+				return;
+			}
+			const branch = tree.cases.find((candidate) => candidate.tagValue === node[tree.tag]);
+			if (branch !== undefined) {
+				const payload = node[branch.payload];
+				const payloadPath = `${nodePath}.${branch.payload}`;
+				if (!isEmbeddedRecord(payload)) {
+					fail(payloadPath, "Embedded payload must be an object");
+				} else {
+					const block = resolveBlockTypes(branch).find(
+						(candidate) => candidate.slug === payload[branch.discriminator]
+					);
+					const identity = payload[branch.identity];
+					if (identity !== undefined && (typeof identity !== "string" || identity.trim() === ""))
+						fail(
+							`${payloadPath}.${branch.identity}`,
+							"Embedded identity must be a non-empty string",
+							"invalid_key"
+						);
+					if (typeof identity === "string") {
+						if (keys.has(identity))
+							fail(
+								`${payloadPath}.${branch.identity}`,
+								"Embedded identity must be unique",
+								"duplicate_key"
+							);
+						keys.add(identity);
+					}
+					if (block === undefined)
+						fail(
+							`${payloadPath}.${branch.discriminator}`,
+							"Restore the missing embedded schema or migrate the document before saving.",
+							"unknown_block_schema"
+						);
+					else
+						occurrences.push({
+							tree,
+							case: branch,
+							block,
+							payload,
+							path: payloadPath,
+							identity: typeof identity === "string" ? identity : undefined,
+						});
+				}
+			}
+			const children = node[tree.children];
+			if (children === undefined || children === null) return;
+			if (!Array.isArray(children)) {
+				fail(`${nodePath}.${tree.children}`, "Embedded children must be an array");
+				return;
+			}
+			for (const [index, child] of children.entries()) {
+				if (work > 10_000) break;
+				visit(child, `${nodePath}.${tree.children}.${index}`, depth + 1);
+			}
+		};
+		if (Array.isArray(root)) {
+			for (const [index, node] of root.entries()) {
+				if (work > 10_000) break;
+				visit(node, `${rootPath}.${index}`, tree.root.length + 1);
+			}
+		} else visit(root, rootPath, tree.root.length + 1);
+	}
+	return { occurrences, issues };
+}
+
+/** Mutates only schema-owned payloads in an already detached value. */
+export function transformEmbeddedPayloads(
+	field: SchemaField,
+	value: unknown,
+	path: string,
+	transform: (occurrence: EmbeddedOccurrence) => Record<string, unknown>
+) {
+	const result = embeddedOccurrences(field, value, path);
+	if (result.issues.length > 0)
+		throw new Error(`${result.issues[0]?.path}: ${result.issues[0]?.message}`);
+	for (const occurrence of result.occurrences) {
+		const transformed = { ...transform(occurrence) };
+		for (const key of Object.keys(occurrence.payload)) delete occurrence.payload[key];
+		Object.assign(occurrence.payload, transformed);
+	}
+	return value;
+}
+
+export function isEmbeddedRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}