@riducms/admin 0.1.0

package/src/fields/relationship/relationship-quick-picker.svelte

@@ -0,0 +1,327 @@
+<script lang="ts">
+	import { Combobox } from "bits-ui";
+	import { tick } from "svelte";
+	import ChevronDownIcon from "~icons/lucide/chevron-down";
+	import ArrowRightIcon from "~icons/lucide/arrow-right";
+	import ImageIcon from "~icons/lucide/image";
+	import PencilIcon from "~icons/lucide/pencil";
+	import PlusIcon from "~icons/lucide/plus";
+	import XIcon from "~icons/lucide/x";
+	import { TooltipContent, TooltipRoot, TooltipTrigger } from "@riducms/ui";
+
+	import { Skeleton } from "@admin/components/ui/skeleton";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+
+	import {
+		RelationshipQuickPickerController,
+		type RelationshipQuickPickerTarget,
+	} from "@admin/fields/relationship/relationship-quick-picker-controller.svelte";
+
+	let {
+		id,
+		label,
+		targets,
+		selectedTarget,
+		selectedID,
+		selectedLabel,
+		selectedInitials,
+		placeholder,
+		readOnly = false,
+		locale,
+		onPick,
+		onRemove,
+		onBrowse,
+		onEdit,
+		upload = false,
+		invalid = false,
+		describedBy,
+	}: {
+		id: string;
+		label: string;
+		targets: readonly RelationshipQuickPickerTarget[];
+		selectedTarget?: string;
+		selectedID?: string;
+		selectedLabel?: string;
+		selectedInitials?: string;
+		placeholder?: string;
+		readOnly?: boolean;
+		locale?: string;
+		onPick: (target: string, id: string) => void;
+		onRemove: () => void;
+		onBrowse: (target: string) => void;
+		onEdit?: () => void;
+		upload?: boolean;
+		invalid?: boolean;
+		describedBy?: string;
+	} = $props();
+
+	const runtime = getAdminRuntime();
+	const controller = new RelationshipQuickPickerController({
+		runtime,
+		get targets() {
+			return targets;
+		},
+		get selectedTarget() {
+			return selectedTarget;
+		},
+		get selectedID() {
+			return selectedID;
+		},
+		get locale() {
+			return locale;
+		},
+		onPick: (target, value) => onPick(target, value),
+		onRemove: () => onRemove(),
+		onBrowse: (target) => onBrowse(target),
+	});
+	const { comboboxItems, groups, open, query, selectedValue } = $derived(controller);
+	const {
+		browseAll,
+		changeOpen,
+		documentLabel,
+		initials,
+		pick,
+		remove: removeSelection,
+		setQuery,
+		toggleOpen,
+	} = controller;
+	const selectedCollection = $derived(
+		targets.find((target) => target.collection.slug === selectedTarget)?.collection ??
+			targets[0]?.collection
+	);
+	const searchLabel = $derived(
+		targets.length === 1 ? (selectedCollection?.labels.plural ?? label) : label
+	);
+	let triggerElement = $state<HTMLButtonElement | null>(null);
+	let searchInput = $state<HTMLInputElement | null>(null);
+
+	async function togglePicker() {
+		if (!toggleOpen()) return;
+		await tick();
+		searchInput?.focus();
+	}
+
+	function beginSearch(event: Event) {
+		setQuery((event.currentTarget as HTMLInputElement).value);
+	}
+
+	function remove(event: MouseEvent) {
+		event.stopPropagation();
+		removeSelection();
+	}
+
+	function browse(event: MouseEvent, target?: string) {
+		event.stopPropagation();
+		browseAll(target);
+	}
+
+	function edit(event: MouseEvent) {
+		event.stopPropagation();
+		onEdit?.();
+	}
+</script>
+
+<Combobox.Root
+	type="single"
+	value={selectedValue}
+	inputValue={query}
+	items={comboboxItems}
+	{open}
+	onOpenChange={changeOpen}
+	onValueChange={pick}
+	allowDeselect={false}
+	loop
+>
+	<div
+		class="flex h-10.5 min-w-0 rounded-[3px] border border-control-border bg-control transition-[background-color,border-color] duration-150 hover:bg-background focus-within:border-primary/65 aria-invalid:border-destructive/65"
+		aria-invalid={invalid}
+	>
+		<button
+			bind:this={triggerElement}
+			{id}
+			type="button"
+			class="flex min-w-0 flex-1 items-center gap-2 rounded-s-[3px] px-2.75 text-start outline-none disabled:cursor-not-allowed disabled:opacity-45"
+			disabled={readOnly}
+			aria-label={label}
+			aria-describedby={describedBy}
+			aria-haspopup="listbox"
+			aria-expanded={open}
+			onclick={togglePicker}
+		>
+			{#if selectedID !== undefined}
+				<span
+					class="font-mono grid size-[19px] shrink-0 place-items-center rounded-full bg-sidebar-accent text-[8px] font-semibold tracking-[0.04em] text-sidebar-accent-foreground"
+					aria-hidden="true"
+				>
+					{selectedInitials}
+				</span>
+				<span class="min-w-0 flex-1 truncate text-[13px] text-foreground-strong">
+					{selectedLabel}
+				</span>
+			{:else}
+				{#if upload}<ImageIcon class="size-3.5 shrink-0 text-foreground-sub" />{/if}
+				<span class="min-w-0 flex-1 truncate text-[13px] text-foreground-placeholder">
+					{placeholder ??
+						runtime.i18n.t(upload ? "fields:choose" : "fields:select", {
+							label: (
+								selectedCollection?.labels.singular ??
+								runtime.i18n.t(upload ? "fields:asset" : "fields:document")
+							).toLocaleLowerCase(runtime.i18n.language),
+						})}
+				</span>
+			{/if}
+			<ChevronDownIcon class="size-3.5 shrink-0 text-foreground-sub" aria-hidden="true" />
+		</button>
+
+		{#if selectedID !== undefined && onEdit !== undefined}
+			<TooltipRoot>
+				<TooltipTrigger>
+					{#snippet child({ props })}
+						<button
+							{...props}
+							type="button"
+							class="grid w-9 shrink-0 place-items-center border-s border-control-border text-foreground-sub outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:text-primary disabled:cursor-not-allowed disabled:opacity-45"
+							disabled={readOnly}
+							onpointerdown={(event) => event.preventDefault()}
+							onclick={edit}
+							aria-label={runtime.i18n.t("fields:edit", { label: selectedLabel ?? "" })}
+						>
+							<PencilIcon class="size-3.25" />
+						</button>
+					{/snippet}
+				</TooltipTrigger>
+				<TooltipContent>{runtime.i18n.t("fields:editRelationship")}</TooltipContent>
+			</TooltipRoot>
+		{/if}
+
+		{#if selectedID !== undefined && !readOnly}
+			<TooltipRoot>
+				<TooltipTrigger>
+					{#snippet child({ props })}
+						<button
+							{...props}
+							type="button"
+							class="grid w-9 shrink-0 place-items-center border-s border-control-border text-foreground-sub outline-none transition-colors hover:bg-destructive/7 hover:text-destructive focus-visible:text-destructive"
+							onpointerdown={(event) => event.preventDefault()}
+							onclick={remove}
+							aria-label={runtime.i18n.t("fields:remove", { label: selectedLabel ?? "" })}
+						>
+							<XIcon class="size-3.5" />
+						</button>
+					{/snippet}
+				</TooltipTrigger>
+				<TooltipContent>{runtime.i18n.t("fields:removeRelationship")}</TooltipContent>
+			</TooltipRoot>
+		{/if}
+
+		<TooltipRoot>
+			<TooltipTrigger>
+				{#snippet child({ props })}
+					<button
+						{...props}
+						type="button"
+						class="grid w-9 shrink-0 place-items-center rounded-e-[3px] border-s border-control-border text-foreground-sub outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:text-primary"
+						onpointerdown={(event) => event.preventDefault()}
+						onclick={(event) => browse(event, selectedCollection?.slug)}
+						aria-label={runtime.i18n.t("fields:browse", {
+							label: (
+								selectedCollection?.labels.plural ?? runtime.i18n.t("fields:relationships")
+							).toLocaleLowerCase(runtime.i18n.language),
+						})}
+					>
+						<PlusIcon class="size-3.5" />
+					</button>
+				{/snippet}
+			</TooltipTrigger>
+			<TooltipContent>{runtime.i18n.t("fields:addRelationship")}</TooltipContent>
+		</TooltipRoot>
+	</div>
+
+	<Combobox.Portal>
+		<Combobox.Content
+			customAnchor={triggerElement}
+			align="start"
+			sideOffset={4}
+			class="ridu-popover-enter z-50 flex flex-col overflow-hidden rounded-[4px] border border-control-border bg-popover p-1.5 text-popover-foreground shadow-lg outline-none"
+			style="width: var(--bits-combobox-anchor-width);"
+		>
+			<Combobox.Input
+				bind:ref={searchInput}
+				aria-label={runtime.i18n.t("fields:searchLabel", { label: searchLabel })}
+				placeholder={runtime.i18n.t("fields:search", {
+					label: searchLabel.toLocaleLowerCase(runtime.i18n.language),
+				})}
+				class="mb-1.25 h-[29px] w-full rounded-[3px] border border-control-border bg-control px-[9px] text-[12.5px] text-foreground caret-primary outline-none placeholder:text-foreground-faint focus-visible:border-primary/55"
+				oninput={beginSearch}
+			/>
+
+			<Combobox.Viewport class="grid max-h-64 min-h-8 overflow-y-auto">
+				{#each groups as group (group.collection.id)}
+					<div role="group" aria-label={group.collection.labels.plural}>
+						{#if groups.length > 1}
+							<p
+								class="px-2 pt-2 pb-1 text-[10px] font-medium tracking-[0.08em] text-foreground-faint uppercase"
+							>
+								{group.collection.labels.plural}
+							</p>
+						{/if}
+						{#if group.status === "initial" || group.status === "loading"}
+							<div
+								class="grid gap-1 p-0.5"
+								aria-label={runtime.i18n.t("fields:loading", {
+									label: group.collection.labels.plural,
+								})}
+							>
+								<Skeleton class="h-[31px]" />
+								<Skeleton class="h-[31px]" />
+							</div>
+						{:else if group.error !== undefined}
+							<p class="px-3 py-2 text-[12px] leading-4 text-destructive" role="alert">
+								{group.error}
+							</p>
+						{:else if group.docs.length === 0}
+							<p class="px-3 py-2 text-[12px] text-foreground-faint">
+								{runtime.i18n.t("fields:noMatch", {
+									label: group.collection.labels.plural.toLocaleLowerCase(runtime.i18n.language),
+								})}
+							</p>
+						{:else}
+							{#each group.docs as document (document.id)}
+								{const optionLabel = documentLabel(group.collection, document)}
+								<Combobox.Item
+									value={JSON.stringify([group.collection.slug, document.id])}
+									label={optionLabel}
+									class="flex w-full cursor-default items-center gap-[9px] rounded-[3px] px-2 py-1.5 text-start text-[12.5px] text-foreground-muted outline-none select-none data-[highlighted]:bg-control data-[selected]:text-foreground-strong"
+								>
+									{#snippet children({ selected })}
+										<span
+											class="font-mono grid size-[19px] shrink-0 place-items-center rounded-full bg-sidebar-accent text-[8px] font-semibold text-sidebar-accent-foreground"
+											aria-hidden="true"
+										>
+											{initials(optionLabel)}
+										</span>
+										<span class="min-w-0 flex-1 truncate">{optionLabel}</span>
+										<span class="font-mono text-[9.5px] text-primary" aria-hidden="true">
+											{selected ? "✓" : ""}
+										</span>
+									{/snippet}
+								</Combobox.Item>
+							{/each}
+						{/if}
+						<button
+							type="button"
+							class="mt-0.5 flex w-full items-center gap-1 px-2 py-1.5 text-start text-[11.5px] text-primary outline-none hover:text-primary-hover focus-visible:text-primary-hover"
+							onpointerdown={(event) => event.preventDefault()}
+							onclick={(event) => browse(event, group.collection.slug)}
+						>
+							{runtime.i18n.t("fields:browseAll", {
+								label: group.collection.labels.plural.toLocaleLowerCase(runtime.i18n.language),
+							})}
+							<ArrowRightIcon class="size-3 rtl:rotate-180" aria-hidden="true" />
+						</button>
+					</div>
+				{/each}
+			</Combobox.Viewport>
+		</Combobox.Content>
+	</Combobox.Portal>
+</Combobox.Root>

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

@@ -0,0 +1,47 @@
+export interface PolymorphicReference {
+	relationTo: string;
+	id: string;
+}
+
+export function selectedRelationshipIDs(
+	value: unknown,
+	hasMany: boolean,
+	polymorphic: boolean,
+	target: string
+): string[] {
+	const values = hasMany ? (Array.isArray(value) ? value : []) : [value];
+	return values.flatMap((item) => {
+		if (!polymorphic && typeof item === "string" && item !== "") return [item];
+		if (!isPolymorphicReference(item) || item.relationTo !== target) return [];
+		return [item.id];
+	});
+}
+
+export function updateRelationshipValue(
+	current: unknown,
+	ids: readonly string[],
+	hasMany: boolean,
+	polymorphic: boolean,
+	target: string
+): 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);
+}
+
+function isPolymorphicReference(value: unknown): value is PolymorphicReference {
+	return (
+		typeof value === "object" &&
+		value !== null &&
+		"relationTo" in value &&
+		typeof value.relationTo === "string" &&
+		"id" in value &&
+		typeof value.id === "string"
+	);
+}

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

@@ -0,0 +1,60 @@
+import {
+	getLocalTimeZone,
+	parseAbsolute,
+	parseDate,
+	parseTime,
+	toCalendarDate,
+	toCalendarDateTime,
+	type DateValue,
+	type Time,
+} from "@internationalized/date";
+import type { SchemaDatePickerAppearance } from "@riducms/protocol";
+
+/**
+ * Converts a Ridu wire value into the timezone-free value used by Bits' date
+ * segments. Day-only values deliberately never pass through `Date`.
+ */
+export function datePickerValue(
+	value: unknown,
+	appearance: SchemaDatePickerAppearance | undefined,
+	timeZone = getLocalTimeZone()
+): DateValue | undefined {
+	const encoded = String(value ?? "");
+	if (encoded === "") return undefined;
+	try {
+		if (appearance === "dayAndTime") {
+			return toCalendarDateTime(parseAbsolute(encoded, timeZone));
+		}
+		return parseDate(encoded.slice(0, 10));
+	} catch {
+		return undefined;
+	}
+}
+
+/** Converts a Bits date selection to Ridu's canonical wire value. */
+export function datePickerFormValue(
+	value: DateValue | undefined,
+	appearance: SchemaDatePickerAppearance | undefined,
+	timeZone = getLocalTimeZone()
+) {
+	if (value === undefined) return "";
+	if (appearance === "dayAndTime") {
+		return toCalendarDateTime(value).toDate(timeZone).toISOString();
+	}
+	return toCalendarDate(value).toString();
+}
+
+/** Time-only fields remain pure clock values; a timezone must never be introduced. */
+export function timeFieldValue(value: unknown): Time | undefined {
+	const encoded = String(value ?? "");
+	if (encoded === "") return undefined;
+	try {
+		return parseTime(encoded);
+	} catch {
+		return undefined;
+	}
+}
+
+export function timeFieldFormValue(value: Time | undefined) {
+	return value?.toString().slice(0, 5) ?? "";
+}

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

@@ -0,0 +1,26 @@
+import type { SchemaDatePickerAppearance } from "@riducms/protocol";
+import type { AdminI18n } from "@riducms/plugin";
+
+export function formatDateDisplay(
+	value: unknown,
+	appearance: SchemaDatePickerAppearance | undefined,
+	i18n: AdminI18n
+) {
+	const encoded = String(value ?? "");
+	if (encoded === "") return "—";
+	if (appearance === "timeOnly") return encoded.slice(0, 5);
+	const date = new Date(
+		appearance === "dayOnly" || appearance === undefined ? `${encoded}T00:00:00Z` : encoded
+	);
+	if (Number.isNaN(date.valueOf())) return encoded;
+	if (appearance === "dayAndTime") {
+		return i18n.formatDate(date, {
+			dateStyle: "medium",
+			timeStyle: "short",
+		});
+	}
+	return i18n.formatDate(date, {
+		dateStyle: "medium",
+		timeZone: "UTC",
+	});
+}

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

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import type { SchemaField, ValidationIssue } from "@riducms/protocol";
+
+	import { Checkbox } from "@admin/components/ui/checkbox";
+	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 FieldMessages from "@admin/fields/field-messages.svelte";
+	import FieldShell from "@admin/fields/field-shell.svelte";
+
+	let { field, form }: { field: SchemaField; form: FormController } = $props();
+	const runtime = getAdminRuntime();
+	const value = $derived(form.get(field.path));
+	const issues = $derived(form.issuesFor(field.path));
+	let jsonError = $state<string>();
+	const displayIssues = $derived<ValidationIssue[]>(
+		jsonError === undefined
+			? issues
+			: [{ code: "invalid_json", path: field.path, message: jsonError }]
+	);
+	const hasMessage = $derived(displayIssues.length > 0 || field.admin.description !== undefined);
+	const dateAppearance = $derived(field.date?.pickerAppearance);
+	const stringConstraints = $derived(field.type === "code" ? field.code : field.textarea);
+
+	$effect(() => form.register(field.path));
+
+	function setJSON(encoded: string) {
+		try {
+			form.set(field.path, JSON.parse(encoded));
+			jsonError = undefined;
+		} catch {
+			jsonError = runtime.i18n.t("errors:validJSON");
+		}
+	}
+</script>
+
+{#if field.type === "checkbox"}
+	<div class="grid gap-2" data-field-path={field.path} data-invalid={displayIssues.length > 0}>
+		<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}
+		>
+			<Checkbox
+				id={field.id}
+				required={field.required}
+				aria-invalid={displayIssues.length > 0}
+				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+				aria-errormessage={displayIssues.length > 0 ? `${field.id}-message` : undefined}
+				disabled={field.admin.readOnly}
+				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">
+					{runtime.i18n.t("fields:readOnly")}
+				</span>{/if}
+		</label>
+		<FieldMessages
+			id="{field.id}-message"
+			issues={displayIssues}
+			description={field.admin.description}
+		/>
+	</div>
+{:else}
+	<FieldShell {field} issues={displayIssues}>
+		{#if field.type === "textarea" || field.type === "code"}
+			<Textarea
+				id={field.id}
+				name={field.path}
+				rows={1}
+				required={field.required}
+				minlength={stringConstraints?.minLength}
+				maxlength={stringConstraints?.maxLength}
+				placeholder={field.admin.placeholder}
+				aria-invalid={displayIssues.length > 0}
+				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+				aria-errormessage={displayIssues.length > 0 ? `${field.id}-message` : undefined}
+				value={String(value ?? "")}
+				readonly={field.admin.readOnly}
+				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}
+				aria-invalid={displayIssues.length > 0}
+				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+				aria-errormessage={displayIssues.length > 0 ? `${field.id}-message` : undefined}
+				class="min-h-40 font-mono"
+				value={JSON.stringify(value ?? {}, null, 2)}
+				readonly={field.admin.readOnly}
+				oninput={(event) => setJSON(event.currentTarget.value)}
+			/>
+		{:else if field.type === "date"}
+			<DateValueControl
+				id={field.id}
+				name={field.path}
+				appearance={dateAppearance}
+				value={String(value ?? "")}
+				readonly={field.admin.readOnly}
+				required={field.required}
+				invalid={displayIssues.length > 0}
+				label={field.admin.label}
+				describedBy={hasMessage ? `${field.id}-message` : undefined}
+				onValueChange={(next) => form.set(field.path, next)}
+			/>
+		{:else}
+			<Input
+				id={field.id}
+				name={field.path}
+				required={field.required}
+				aria-invalid={displayIssues.length > 0}
+				aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+				aria-errormessage={displayIssues.length > 0 ? `${field.id}-message` : undefined}
+				type={field.type === "number" ? "number" : field.type === "email" ? "email" : "text"}
+				min={field.type === "number" ? field.number?.min : undefined}
+				max={field.type === "number" ? field.number?.max : undefined}
+				step={field.type === "number" ? field.number?.step : undefined}
+				placeholder={field.admin.placeholder}
+				value={String(value ?? "")}
+				readonly={field.admin.readOnly}
+				oninput={(event) =>
+					form.set(
+						field.path,
+						field.type === "number" ? event.currentTarget.valueAsNumber : event.currentTarget.value
+					)}
+			/>
+		{/if}
+	</FieldShell>
+{/if}