@riducms/admin 0.2.2 → 0.3.0

package/src/fields/relationship/relationship-value.ts

@@ -26,16 +26,20 @@ export function updateRelationshipValue(
 ): unknown {
 	if (!polymorphic) return hasMany ? [...ids] : (ids[0] ?? "");
 
-	const previous = hasMany
-		? Array.isArray(current)
-			? current.filter((item) => isPolymorphicReference(item) && item.relationTo !== target)
-			: []
-		: [];
 	const references = ids.map((id) => ({ relationTo: target, id }));
-	return hasMany ? [...previous, ...references] : (references[0] ?? null);
+	if (!hasMany) return references[0] ?? null;
+
+	let index = 0;
+	const previous = Array.isArray(current) ? current.filter(isPolymorphicReference) : [];
+	const result = previous.flatMap((reference) => {
+		if (reference.relationTo !== target) return [reference];
+		const replacement = references[index++];
+		return replacement ? [replacement] : [];
+	});
+	return [...result, ...references.slice(index)];
 }
 
-function isPolymorphicReference(value: unknown): value is PolymorphicReference {
+export function isPolymorphicReference(value: unknown): value is PolymorphicReference {
 	return (
 		typeof value === "object" &&
 		value !== null &&
@@ -45,3 +49,38 @@ function isPolymorphicReference(value: unknown): value is PolymorphicReference {
 		typeof value.id === "string"
 	);
 }
+
+/** Ordered identities for every target, including polymorphic many-value fields. */
+export function relationshipReferences(
+	value: unknown,
+	hasMany: boolean,
+	polymorphic: boolean,
+	target: string
+): PolymorphicReference[] {
+	const values = hasMany ? (Array.isArray(value) ? value : []) : [value];
+	return values.flatMap((item) => {
+		if (polymorphic) return isPolymorphicReference(item) ? [item] : [];
+		return typeof item === "string" && item !== "" ? [{ relationTo: target, id: item }] : [];
+	});
+}
+
+export function relationshipKey(reference: PolymorphicReference) {
+	return JSON.stringify([reference.relationTo, reference.id]);
+}
+
+export function parseRelationshipKey(value: string): PolymorphicReference | undefined {
+	try {
+		const parsed: unknown = JSON.parse(value);
+		if (
+			!Array.isArray(parsed) ||
+			parsed.length !== 2 ||
+			typeof parsed[0] !== "string" ||
+			typeof parsed[1] !== "string"
+		) {
+			return undefined;
+		}
+		return { relationTo: parsed[0], id: parsed[1] };
+	} catch {
+		return undefined;
+	}
+}

package/src/fields/relationship/relationship.scss

@@ -0,0 +1,182 @@
+@use "@riducms/ui/styles.scss" as ui;
+@layer ridu.components {
+	.ridu-relationship-selection {
+		position: relative;
+		display: grid;
+		min-width: 0;
+		max-width: 100%;
+		&[data-dragging="true"] {
+			z-index: 1;
+		}
+		&[data-dnd-placeholder] {
+			opacity: 0.5;
+		}
+	}
+
+	.ridu-relationship-chip {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		padding: 2px 3px 2px 6px;
+		margin-block: 4px;
+		max-width: 100%;
+		background: var(--background-layer);
+		border-radius: 2px;
+	}
+	.ridu-relationship-label {
+		flex: 1;
+		min-width: 0;
+	}
+	.ridu-relationship-title {
+		display: block;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		font: inherit;
+		color: inherit;
+		text-align: start;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+		cursor: pointer;
+		&:disabled {
+			color: var(--control-disabled-foreground);
+			cursor: not-allowed;
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	.ridu-relationship-grip {
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		border: 0;
+		padding: 0;
+		width: 16px;
+		height: 26px;
+		color: var(--ink-faint);
+		background: transparent;
+		cursor: grab;
+		&:active:not(:disabled) {
+			cursor: grabbing;
+		}
+		&:disabled {
+			color: var(--control-disabled-foreground);
+			cursor: not-allowed;
+		}
+		svg {
+			width: 12px;
+			height: 12px;
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	.ridu-upload-reference {
+		@include ui.control-surface;
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 10px;
+		min-height: 64px;
+		color: var(--foreground);
+		.ridu-relationship-title {
+			text-decoration: underline;
+		}
+		.ridu-relationship-grip {
+			margin-inline-end: 3px;
+		}
+	}
+	.ridu-upload-reference__thumbnail {
+		display: grid;
+		place-items: center;
+		width: 40px;
+		height: 40px;
+		flex-shrink: 0;
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+		}
+		svg {
+			width: 24px;
+			height: 24px;
+		}
+	}
+	.ridu-upload-reference__metadata {
+		display: block;
+		max-width: 100%;
+		color: var(--foreground-muted);
+		margin-top: 4px;
+		font-size: 12px;
+		line-height: 16px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.ridu-relationship-action {
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		width: 26px;
+		height: 26px;
+		border: 0;
+		border-radius: var(--control-radius);
+		padding: 0;
+		background: transparent;
+		color: var(--foreground-muted);
+		cursor: pointer;
+		&:hover:not(:disabled) {
+			background: var(--control-surface-hover);
+			color: var(--foreground);
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+		&:disabled {
+			color: var(--control-disabled-foreground);
+			cursor: not-allowed;
+		}
+		svg {
+			width: 14px;
+			height: 14px;
+		}
+	}
+	.ridu-upload-references {
+		display: grid;
+		gap: 10px;
+	}
+	.ridu-upload-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);
+		&[data-dragging="true"] {
+			border-color: var(--foreground);
+			background: var(--control-surface);
+		}
+	}
+	.ridu-upload-reference--compact {
+		min-height: 40px;
+		padding: 5px 10px;
+		.ridu-upload-reference__thumbnail {
+			width: 24px;
+			height: 24px;
+		}
+	}
+	.ridu-upload-intake__drop-label {
+		margin-inline-start: auto;
+	}
+	@media (max-width: 30rem) {
+		.ridu-upload-intake__drop-label {
+			display: none;
+		}
+	}
+}

package/src/fields/scalar/code-field.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import type { SchemaField, ValidationIssue } from "@riducms/protocol";
+	import { fieldControlARIA } from "@riducms/ui";
+	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import CodeEditor from "@admin/components/ui/code-editor/code-editor.svelte";
+	import FieldShell from "@admin/fields/field-shell.svelte";
+
+	let { field, form }: { field: SchemaField; form: FormController } = $props();
+	const runtime = getAdminRuntime();
+	// Repeated-field parents recreate the field object when an index changes. Stabilizing that
+	// object to its occurrence ID keeps an unfinished draft alive while the row moves.
+	const fieldIdentity = $derived(field.id);
+	const editorLifetime = $derived({ form, epoch: form.editorEpoch, id: fieldIdentity });
+	const value = $derived(form.get(field.path));
+	const editingBlocked = $derived(field.admin.readOnly === true || form.editingBlocked);
+	let draft = $state("");
+	let jsonError = $state<string>();
+	let committed = "";
+
+	const issues = $derived<readonly ValidationIssue[]>(
+		jsonError
+			? [{ code: "invalid_json", path: field.path, message: jsonError }]
+			: form.issuesFor(field.path)
+	);
+	const aria = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
+	);
+
+	$effect(() => {
+		const owner = form;
+		return untrack(() =>
+			owner.registerPendingEdit(() =>
+				jsonError && !field.admin.readOnly
+					? [{ code: "invalid_json", path: field.path, message: jsonError }]
+					: []
+			)
+		);
+	});
+	$effect(() => {
+		// Reset unfinished text on document reload, locale change or row identity change.
+		const owner = editorLifetime;
+		untrack(() => {
+			jsonError = undefined;
+			committed = encode(owner.form.get(field.path));
+			draft = committed;
+		});
+	});
+	$effect(() => {
+		// Moving a row can clone its JSON value without replacing the editing lifetime.
+		const next = encode(value);
+		untrack(() => {
+			if (next === committed) return;
+			committed = next;
+			draft = next;
+			jsonError = undefined;
+		});
+	});
+	$effect(() => {
+		if (jsonError && !field.admin.readOnly) {
+			const path = field.path;
+			return untrack(() => form.setLiveInputUnavailable(path));
+		}
+	});
+
+	function encode(next: unknown) {
+		return field.type === "json" ? JSON.stringify(next ?? {}, null, 2) : String(next ?? "");
+	}
+
+	function update(next: string) {
+		if (editingBlocked || next === draft) return;
+		draft = next;
+		try {
+			const parsed = field.type === "json" ? (next.trim() === "" ? null : JSON.parse(next)) : next;
+			form.set(field.path, parsed);
+			committed = encode(form.get(field.path));
+			jsonError = undefined;
+		} catch {
+			jsonError = runtime.i18n.t("errors:validJSON");
+		}
+	}
+</script>
+
+<FieldShell {field} {issues}>
+	{#key editorLifetime}
+		<CodeEditor
+			value={draft}
+			language={field.type === "json" ? "json" : (field.code?.language ?? "text")}
+			configuration={{
+				id: field.id,
+				label: field.admin.label,
+				readOnly: editingBlocked,
+				invalid: issues.length > 0,
+				describedBy: aria["aria-describedby"],
+				errorMessage: aria["aria-errormessage"],
+			}}
+			onChange={update}
+		/>
+	{/key}
+</FieldShell>

package/src/fields/scalar/date-control-value.ts

@@ -44,6 +44,19 @@ export function datePickerFormValue(
 	return toCalendarDate(value).toString();
 }
 
+/** Reports whether a canonical instant displays as a repeated wall time in timeZone. */
+export function dateTimeHasAmbiguousWallTime(value: unknown, timeZone = getLocalTimeZone()) {
+	const wallTime = datePickerValue(value, "date-time", timeZone);
+	if (wallTime === undefined) return false;
+	try {
+		toCalendarDateTime(wallTime).toDate(timeZone, "reject");
+		return false;
+	} catch {
+		// A wall time projected from a real instant always exists, so rejection means that it occurs twice.
+		return true;
+	}
+}
+
 /** Time-only fields remain pure clock values; a timezone must never be introduced. */
 export function timeFieldValue(value: unknown): Time | undefined {
 	const encoded = String(value ?? "");

package/src/fields/scalar/scalar-field.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-	import type { SchemaField, ValidationIssue } from "@riducms/protocol";
-	import { fieldControlARIA } from "@riducms/ui";
-	import { onDestroy } from "svelte";
-
-	import { Checkbox } from "@admin/components/ui/checkbox";
+	import "@admin/fields/field-layout.scss";
+	import type { SchemaField } from "@riducms/protocol";
+	import { Checkbox, fieldControlARIA, Input, Textarea } from "@riducms/ui";
 	import { DateValueControl } from "@admin/components/ui/date-value-control";
-	import { Input } from "@admin/components/ui/input";
-	import { Textarea } from "@admin/components/ui/textarea";
+
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import CodeField from "@admin/fields/scalar/code-field.svelte";
 	import FieldMessages from "@admin/fields/field-messages.svelte";
 	import FieldShell from "@admin/fields/field-shell.svelte";
 
@@ -17,48 +15,19 @@
 	const value = $derived(form.get(field.path));
 	const issues = $derived(form.issuesFor(field.path));
 	const editingBlocked = $derived(field.admin.readOnly === true || form.editingBlocked);
-	let jsonError = $state<string>();
-	let releaseUnfinishedInput: (() => void) | undefined;
-	onDestroy(() => releaseUnfinishedInput?.());
-	const displayIssues = $derived<ValidationIssue[]>(
-		jsonError === undefined
-			? issues
-			: [{ code: "invalid_json", path: field.path, message: jsonError }]
-	);
 	const controlARIA = $derived(
-		fieldControlARIA(field.id, field.admin.description !== undefined, displayIssues.length > 0)
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
 	);
-	const dateAppearance = $derived(field.date?.format);
-	const stringConstraints = $derived(field.type === "code" ? field.code : field.textarea);
 
 	$effect(() => form.register(field.path));
-
-	function setJSON(encoded: string) {
-		if (editingBlocked) return;
-		try {
-			form.set(field.path, JSON.parse(encoded));
-			releaseUnfinishedInput?.();
-			releaseUnfinishedInput = undefined;
-			jsonError = undefined;
-		} catch {
-			releaseUnfinishedInput?.();
-			releaseUnfinishedInput = form.setLiveInputUnavailable(field.path);
-			jsonError = runtime.i18n.t("errors:validJSON");
-		}
-	}
 </script>
 
-{#if field.type === "checkbox"}
-	<div data-field-path={field.path} data-invalid={displayIssues.length > 0}>
-		<FieldMessages
-			controlID={field.id}
-			issues={displayIssues}
-			description={field.admin.description}
-		>
-			<label
-				class="flex min-h-6 w-fit cursor-pointer items-center gap-2 text-[13px] text-foreground-muted hover:text-foreground has-disabled:cursor-not-allowed has-disabled:text-foreground-faint"
-				for={field.id}
-			>
+{#if field.type === "code" || field.type === "json"}
+	<CodeField {field} {form} />
+{:else if field.type === "checkbox"}
+	<div data-field-path={field.path} data-invalid={issues.length > 0}>
+		<FieldMessages controlID={field.id} {issues} description={field.admin.description}>
+			<label class="ridu-checkbox-field" for={field.id}>
 				<Checkbox
 					id={field.id}
 					required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
@@ -67,54 +36,43 @@
 					bind:checked={() => Boolean(value), (next) => form.set(field.path, next)}
 				/>
 				<span>{field.admin.label}</span>
-				{#if field.required}<span class="ridu-field-required" aria-hidden="true">*</span>{/if}
-				{#if field.admin.readOnly}<span class="ridu-field-status">
+				{#if field.required}
+					<span class="ridu-field-required" aria-hidden="true">*</span>
+				{/if}
+				{#if field.admin.readOnly}
+					<span class="ridu-field-status">
 						{runtime.i18n.t("fields:readOnly")}
-					</span>{/if}
+					</span>
+				{/if}
 			</label>
 		</FieldMessages>
 	</div>
 {:else}
-	<FieldShell {field} issues={displayIssues}>
-		{#if field.type === "textarea" || field.type === "code"}
+	<FieldShell {field} {issues}>
+		{#if field.type === "textarea"}
 			<Textarea
 				id={field.id}
 				name={field.path}
 				rows={1}
 				required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
-				minlength={stringConstraints?.minLength}
-				maxlength={stringConstraints?.maxLength}
+				minlength={field.textarea?.minLength}
+				maxlength={field.textarea?.maxLength}
 				placeholder={field.admin.placeholder}
 				{...controlARIA}
 				value={String(value ?? "")}
 				readonly={editingBlocked}
-				class={field.type === "code"
-					? "min-h-14 resize-y field-sizing-fixed font-mono text-[12.5px] leading-5"
-					: undefined}
-				data-language={field.code?.language}
 				oninput={(event) => form.set(field.path, event.currentTarget.value)}
 			/>
-		{:else if field.type === "json"}
-			<Textarea
-				id={field.id}
-				name={field.path}
-				required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
-				{...controlARIA}
-				class="min-h-40 font-mono"
-				value={JSON.stringify(value ?? {}, null, 2)}
-				readonly={editingBlocked}
-				oninput={(event) => setJSON(event.currentTarget.value)}
-			/>
 		{:else if field.type === "date"}
 			<DateValueControl
 				id={field.id}
 				name={field.path}
-				appearance={dateAppearance}
+				appearance={field.date?.format}
 				value={String(value ?? "")}
 				disabled={form.editingBlocked}
 				readonly={field.admin.readOnly}
 				required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}
-				invalid={displayIssues.length > 0}
+				invalid={issues.length > 0}
 				hasDescription={field.admin.description !== undefined}
 				label={field.admin.label}
 				onValueChange={(next) => form.set(field.path, next)}