@riducms/admin 0.2.2 → 0.3.0

package/src/fields/embedded-schema-draft-editor.svelte

@@ -2,11 +2,11 @@
 	import { getAdminI18n, type EmbeddedSchemaDraftEditorProps } from "@riducms/plugin";
 	import type { HostedSchemaDraft } from "@admin/core/forms/embedded-schema-draft.svelte";
 	import { Sheet, SheetContent, SheetTitle, SheetDescription } from "@admin/components/ui/sheet";
-	import { Button } from "@admin/components/ui/button";
+	import { Button } from "@riducms/ui";
 	import { focusFieldIssue } from "@admin/core/forms/field-issue-focus";
 	import FieldLayout from "@admin/fields/field-layout.svelte";
 	import BlockHeader from "@admin/fields/nested/block-header.svelte";
-	import { onDestroy } from "svelte";
+	import "@admin/fields/embedded-schema-draft-editor.scss";
 
 	let {
 		session,
@@ -16,7 +16,10 @@
 	// svelte-ignore state_referenced_locally
 	const draft = session.draft;
 	const i18n = getAdminI18n();
-	onDestroy(() => draft.discard());
+	// Only event handlers read this DOM binding.
+	// svelte-ignore non_reactive_update
+	let contentElement: HTMLElement | null = null;
+	$effect(() => () => draft.discard());
 
 	function cancel() {
 		draft.discard();
@@ -25,7 +28,7 @@
 	async function apply() {
 		if (!draft.validate()) {
 			const issue = draft.issues[0];
-			if (issue !== undefined) await focusFieldIssue(issue.path);
+			if (issue !== undefined && contentElement) await focusFieldIssue(issue.path, contentElement);
 			return;
 		}
 		options.onApply(draft.payload());
@@ -40,21 +43,22 @@
 	}}
 >
 	<SheetContent
-		class="w-full sm:max-w-2xl"
+		bind:ref={contentElement}
+		class="ridu-embedded-draft"
 		showCloseButton={false}
 		onOpenAutoFocus={async (event) => {
 			const issue = draft.issues[0];
-			if (issue !== undefined) {
+			if (issue !== undefined && contentElement) {
 				event.preventDefault();
-				await focusFieldIssue(issue.path);
+				await focusFieldIssue(issue.path, contentElement);
 			}
 		}}
 	>
-		<div class="border-b border-border px-6 py-4">
+		<div class="ridu-embedded-draft__header">
 			<SheetTitle>{options.title ?? i18n.t("fields:embeddedEditTitle")}</SheetTitle>
 			<SheetDescription>{i18n.t("fields:embeddedEditDescription")}</SheetDescription>
 			{#if !draft.stale && session.block.admin?.nameField !== undefined}
-				<div class="mt-3">
+				<div class="ridu-embedded-draft__name">
 					<BlockHeader
 						block={session.block}
 						path={draft.id}
@@ -64,23 +68,27 @@
 				</div>
 			{/if}
 		</div>
-		<div class="min-h-0 flex-1 overflow-y-auto px-6 py-5" data-schema-draft={draft.id}>
+		<div class="ridu-embedded-draft__content" data-schema-draft={draft.id}>
 			{#if draft.stale}
-				<p role="alert" class="mb-4 text-destructive">
+				<p role="alert" class="ridu-embedded-draft__error">
 					{i18n.t("errors:staleEmbeddedEdit")}
 				</p>
 			{/if}
 			{#if draft.issues.length > 0}
-				<div role="alert" class="mb-4 text-destructive">
-					{#each draft.issues as issue}<p>{issue.message}</p>{/each}
+				<div role="alert" class="ridu-embedded-draft__error">
+					{#each draft.issues as issue}
+						<p>{issue.message}</p>
+					{/each}
 				</div>
 			{/if}
-			{#if !draft.stale}<FieldLayout
+			{#if !draft.stale}
+				<FieldLayout
 					fields={session.fields.filter((field) => field.name !== session.block.admin?.nameField)}
 					form={session.form}
-				/>{/if}
+				/>
+			{/if}
 		</div>
-		<div class="flex justify-end gap-2 border-t border-border px-6 py-4">
+		<div class="ridu-embedded-draft__actions">
 			<Button variant="outline" onclick={cancel}>{i18n.t("general:cancel")}</Button>
 			<Button onclick={apply} disabled={draft.stale}>{i18n.t("general:apply")}</Button>
 		</div>

package/src/fields/field-collapsible.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Chevron from "@admin/components/icons/chevron.svelte";
 	import type { SchemaField } from "@riducms/protocol";
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
 	import { fieldIssueRevealEvent } from "@admin/core/forms/field-issue-focus";
@@ -30,20 +31,25 @@
 <details
 	bind:open
 	{@attach reveal}
-	class="col-span-1 rounded-[4px] border border-control-border bg-background sm:col-span-12"
+	class="ridu-field-collapsible"
 	data-field-collapsible={collapsible.id}
 >
-	<summary class="cursor-pointer px-5 py-4 text-[13.5px] font-medium text-foreground">
+	<summary class="ridu-field-collapsible__heading">
 		{runtime.i18n.text(collapsible.label, collapsible.labelTranslations)}
+		<Chevron />
 	</summary>
-	{#if open}
-		<div
-			class="grid grid-cols-1 gap-x-4 gap-y-6 border-t border-control-border p-5 sm:grid-cols-12"
-		>
-			{#each fields as field (field.id)}<FieldRenderer {field} {form} />{/each}
+	{#if open || fields.some((field) => form
+				.pendingEditIssues()
+				.some((issue) => issue.path === field.path || issue.path.startsWith(`${field.path}.`)))}
+		<div class="ridu-field-grid ridu-field-collapsible__content">
+			{#each fields as field (field.id)}
+				<FieldRenderer {field} {form} />
+			{/each}
 		</div>
 	{:else}
 		<!-- Addressable boundaries reveal the disclosure before mounting/focusing a field. -->
-		{#each fields as field (field.id)}<span hidden data-field-path={field.path}></span>{/each}
+		{#each fields as field (field.id)}
+			<span hidden data-field-path={field.path}></span>
+		{/each}
 	{/if}
 </details>

package/src/fields/field-layout.scss

@@ -0,0 +1,171 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-field-grid,
+	.ridu-field-row {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: 20px 10px;
+	}
+	.ridu-field-layout-item {
+		min-width: 0;
+		grid-column: span 1 / span 1;
+	}
+	.ridu-field-row,
+	.ridu-field-tabs,
+	.ridu-field-collapsible {
+		grid-column: 1 / -1;
+	}
+	.ridu-field-tabs {
+		min-width: 0;
+		gap: 0;
+	}
+	.ridu-field-tabs__list {
+		align-self: stretch;
+		justify-content: flex-start;
+		width: auto;
+		gap: 20px;
+		border-bottom: 1px solid var(--control-border);
+		border-radius: 0;
+		padding: 0;
+		background: transparent;
+		overflow: auto hidden;
+	}
+	.ridu-field-tabs__trigger {
+		flex: none;
+		min-height: 60px;
+		padding: 15px 0;
+		font-size: 16px;
+		font-weight: 400;
+	}
+	.ridu-field-tabs__content {
+		padding-top: 20px;
+		&[hidden] {
+			display: none;
+		}
+	}
+	.ridu-field-collapsible {
+		border: 1px solid var(--control-border);
+		border-radius: var(--control-radius);
+		min-width: 0;
+	}
+	.ridu-field-collapsible__heading {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 10px;
+		padding: 10px 15px;
+		min-height: 40px;
+		background: var(--control-surface);
+		cursor: pointer;
+		list-style: none;
+		&::-webkit-details-marker {
+			display: none;
+		}
+		&:hover {
+			background: var(--control-surface-hover);
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+		svg {
+			width: 16px;
+			height: 16px;
+		}
+	}
+	.ridu-field-collapsible[open] > .ridu-field-collapsible__heading svg {
+		transform: rotate(180deg);
+	}
+	.ridu-field-collapsible__content {
+		padding: 20px;
+	}
+	.ridu-checkbox-field {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-height: 24px;
+		width: fit-content;
+		font: inherit;
+		color: var(--foreground);
+		cursor: pointer;
+		&:has([disabled]) {
+			color: var(--control-disabled-foreground);
+			cursor: not-allowed;
+		}
+	}
+	.ridu-point-field {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 20px;
+	}
+	.ridu-point-field__coordinate {
+		display: grid;
+		gap: 5px;
+		font: inherit;
+		color: var(--foreground);
+	}
+	.ridu-field-localization-note,
+	.ridu-field-live-validation {
+		margin: 5px 0 0;
+		color: var(--foreground-muted);
+		font-size: 12px;
+		line-height: 18px;
+	}
+	.ridu-field-localization-note {
+		font-family: var(--font-mono);
+	}
+	.ridu-field-live-validation--failed {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+	.ridu-field-live-validation > p {
+		margin: 0;
+	}
+	.ridu-field-radio-options {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 28px;
+	}
+	.ridu-ui-field {
+		border-inline-start: 2px solid var(--control-border);
+		padding-block: 2px;
+		padding-inline: 12px 0;
+	}
+	.ridu-ui-field__title,
+	.ridu-ui-field__description {
+		margin: 0;
+	}
+	.ridu-ui-field__title {
+		color: var(--foreground);
+		font-size: 13px;
+		font-weight: 500;
+	}
+	.ridu-ui-field__description {
+		margin-top: 4px;
+		color: var(--foreground-muted);
+		font-size: 12.5px;
+		line-height: 20px;
+	}
+	.ridu-virtual-field {
+		@include ui.control-surface;
+		display: block;
+		min-height: 40px;
+		padding: 10px 15px;
+		white-space: pre-wrap;
+		background: var(--control-surface-disabled);
+		border-color: var(--control-border-disabled);
+		color: var(--control-disabled-foreground);
+	}
+	@media (min-width: 640px) {
+		.ridu-field-grid,
+		.ridu-field-row {
+			grid-template-columns: repeat(12, minmax(0, 1fr));
+		}
+		@for $columns from 1 through 12 {
+			.ridu-field-layout-item[data-field-columns="#{$columns}"] {
+				grid-column: span $columns / span $columns;
+			}
+		}
+	}
+}

package/src/fields/field-layout.svelte

@@ -4,6 +4,7 @@
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
 	import FieldRenderer from "@admin/fields/field-renderer.svelte";
 	import { createFieldLayout } from "@admin/fields/field-layout";
+	import "@admin/fields/field-layout.scss";
 	import FieldTabLayout from "@admin/fields/field-tab-layout.svelte";
 	import FieldCollapsible from "@admin/fields/field-collapsible.svelte";
 
@@ -19,17 +20,14 @@
 </script>
 
 {#snippet fieldGrid(tabFields: readonly SchemaField[])}
-	<div class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-12">
+	<div class="ridu-field-grid">
 		{#each createFieldLayout(tabFields, suppressedTabGroupID) as group (group.key)}
 			{#if group.tabGroup !== undefined}
 				<FieldTabLayout fields={group.fields} {form} tabGroup={group.tabGroup} />
 			{:else if group.collapsible !== undefined}
 				<FieldCollapsible fields={group.fields} {form} collapsible={group.collapsible} />
 			{:else if group.row !== undefined}
-				<div
-					class="col-span-1 grid grid-cols-1 gap-x-4 gap-y-6 sm:col-span-12 sm:grid-cols-12"
-					data-field-row={group.row.id}
-				>
+				<div class="ridu-field-row" data-field-row={group.row.id}>
 					{#each group.fields as field (field.id)}
 						<FieldRenderer {field} {form} />
 					{/each}

package/src/fields/field-renderer.svelte

@@ -27,6 +27,7 @@
 	import PrimitiveListField from "@admin/fields/primitive-list/primitive-list-field.svelte";
 	import TextField from "@admin/fields/text/text-field.svelte";
 	import LiveValidationFeedback from "@admin/fields/live-validation-feedback.svelte";
+	import "@admin/fields/field-layout.scss";
 
 	interface Props {
 		field: SchemaField;
@@ -49,6 +50,7 @@
 		get locale() {
 			return form.contentLocale;
 		},
+		canCreateDocument: (collection) => runtime.collectionOperations[collection]?.create === true,
 		referenceBrowser: ReferenceBrowser,
 		findDocument: (collection, id, signal) =>
 			runtime.client.find(collection, id, { signal, locale: form.contentLocale }),
@@ -56,7 +58,7 @@
 	const editor = $derived(
 		field.admin.editor === undefined
 			? undefined
-			: runtime.editors[field.admin.editor.reference as `app:${string}`]
+			: runtime.config.fieldEditors[field.admin.editor.reference as `app:${string}`]
 	);
 	const plugin = $derived(editor === undefined ? runtime.fields.resolve(field) : undefined);
 	const accessPath = $derived(fieldAccessPath(field));
@@ -67,7 +69,7 @@
 				evaluateFieldCondition(field.admin.condition, field.path, (path) => form.get(path)))
 	);
 	const renderedField = $derived(
-		field.admin.readOnly || form.canWrite(field.path, accessPath)
+		field.admin.readOnly || field.type === "join" || form.canWrite(field.path, accessPath)
 			? field
 			: { ...field, admin: { ...field.admin, readOnly: true } }
 	);
@@ -76,22 +78,7 @@
 		contentLocaleLabel(runtime.contentLocales, form.contentLocale)
 	);
 	const presentedField = $derived(withContentLocaleLabel(localizedField, activeContentLocaleLabel));
-	const columnClasses: Record<number, string> = {
-		1: "col-span-1 sm:col-span-1",
-		2: "col-span-1 sm:col-span-2",
-		3: "col-span-1 sm:col-span-3",
-		4: "col-span-1 sm:col-span-4",
-		5: "col-span-1 sm:col-span-5",
-		6: "col-span-1 sm:col-span-6",
-		7: "col-span-1 sm:col-span-7",
-		8: "col-span-1 sm:col-span-8",
-		9: "col-span-1 sm:col-span-9",
-		10: "col-span-1 sm:col-span-10",
-		11: "col-span-1 sm:col-span-11",
-		12: "col-span-1 sm:col-span-12",
-	};
 	const columns = $derived(Math.min(12, Math.max(1, field.admin.columns ?? 12)));
-	const columnClass = $derived(columnClasses[columns] ?? columnClasses[12]);
 	const inheritedFrom = $derived(
 		form.isInherited(field.path) ? form.localizationSource(field.path) : undefined
 	);
@@ -134,8 +121,10 @@
 	}
 </script>
 
-{#if visible}<div
-		class={columnClass}
+{#if visible}
+	<div
+		class="ridu-field-layout-item"
+		data-field-columns={columns}
 		data-live-validation-field={field.path}
 		onfocusout={(event) => {
 			if (
@@ -173,19 +162,18 @@
 			i18n={runtime.i18n}
 			path={field.path}
 		/>
-		{#if inheritedFrom !== undefined}<p
-				class="mt-1 font-mono text-[10px] text-foreground-faint"
-				data-localization-source={inheritedFrom}
-			>
+		{#if inheritedFrom !== undefined}
+			<p class="ridu-field-localization-note" data-localization-source={inheritedFrom}>
 				{runtime.i18n.t("documents:inheritedFrom", {
 					locale: inheritedFromLabel ?? inheritedFrom,
 				})}
-			</p>{:else if missingLocale}<p
-				class="mt-1 font-mono text-[10px] text-foreground-faint"
-				data-localization-missing={form.contentLocale}
-			>
+			</p>
+		{:else if missingLocale}
+			<p class="ridu-field-localization-note" data-localization-missing={form.contentLocale}>
 				{runtime.i18n.t("documents:missingTranslation", {
 					locale: activeContentLocaleLabel ?? form.contentLocale ?? "",
 				})}
-			</p>{/if}
-	</div>{/if}
+			</p>
+		{/if}
+	</div>
+{/if}

package/src/fields/field-shell.svelte

@@ -10,7 +10,7 @@
 		children,
 	}: {
 		field: SchemaField;
-		issues?: ValidationIssue[];
+		issues?: readonly ValidationIssue[];
 		children: Snippet;
 	} = $props();
 	const errorMessages = $derived(issues.map((issue) => issue.message));

package/src/fields/field-tab-layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { SvelteSet } from "svelte/reactivity";
 	import type { SchemaField, SchemaFieldTabGroup } from "@riducms/protocol";
 
 	import { Tabs, TabsContent, TabsList, TabsTrigger } from "@admin/components/ui/tabs";
@@ -39,11 +40,19 @@
 		})
 	);
 	let selectedTab = $state("");
-	let revealedIssueSignature = $state("");
+	const visitedTabs = new SvelteSet<string>();
+	let revealedIssueSignature = "";
 	const activeTab = $derived(
 		tabs.some((tab) => tab.key === selectedTab) ? selectedTab : (tabs[0]?.key ?? "")
 	);
 
+	function selectTab(tab: string) {
+		// Retain mounted editors so tab changes do not discard unfinished input.
+		visitedTabs.add(activeTab);
+		visitedTabs.add(tab);
+		selectedTab = tab;
+	}
+
 	function issueCountForTab(tab: string) {
 		return fields.filter(
 			(field) => (field.admin.tab ?? "") === tab && form.issuesFor(field.path).length > 0
@@ -52,42 +61,39 @@
 
 	$effect(() => {
 		const signature = form.issues.map((issue) => `${issue.code}:${issue.path}`).join("|");
-		if (signature === "" || signature === revealedIssueSignature) return;
+		if (signature === revealedIssueSignature) return;
 		revealedIssueSignature = signature;
+		if (signature === "") return;
 		const issueTab = tabs.find((tab) => issueCountForTab(tab.key) > 0);
-		if (issueTab !== undefined) selectedTab = issueTab.key;
+		if (issueTab !== undefined) selectTab(issueTab.key);
 	});
 </script>
 
 <Tabs
-	class="col-span-1 mb-1 gap-0 sm:col-span-12"
+	class="ridu-field-tabs"
 	value={activeTab}
-	onValueChange={(tab) => (selectedTab = tab)}
+	onValueChange={selectTab}
 	data-field-tab-group={tabGroup.id}
 >
-	<TabsList
-		variant="line"
-		class="-ms-5 h-12 w-[calc(100%+2.5rem)] justify-start gap-6 overflow-x-auto overflow-y-hidden border-b border-control-border px-5 sm:-ms-8 sm:w-[calc(100%+4rem)] sm:px-8 lg:-ms-[60px] lg:w-[calc(100%+120px)] lg:px-[60px]"
-		aria-label={accessibleLabel}
-	>
+	<TabsList variant="line" class="ridu-field-tabs__list" aria-label={accessibleLabel}>
 		{#each tabs as tab (tab.key)}
 			{const issueCount = $derived(issueCountForTab(tab.key))}
-			<TabsTrigger
-				class="h-12 flex-none rounded-none px-px text-[14px] font-medium focus-visible:bg-control focus-visible:outline-none data-[state=active]:border-b-foreground-strong!"
-				value={tab.key}
-			>
-				{tab.label}{#if issueCount > 0}<span
-						class="font-mono grid min-w-4 place-items-center rounded-full bg-destructive/14 px-1 text-[9px] text-destructive"
+			<TabsTrigger class="ridu-field-tabs__trigger" value={tab.key}>
+				{tab.label}
+				{#if issueCount > 0}
+					<span
+						class="ridu-error-count"
 						aria-label={runtime.i18n.t("fields:invalidCount", { count: issueCount })}
 					>
 						{runtime.i18n.formatNumber(issueCount)}
-					</span>{/if}
+					</span>
+				{/if}
 			</TabsTrigger>
 		{/each}
 	</TabsList>
 	{#each tabs as tab (tab.key)}
-		<TabsContent value={tab.key} class="pt-6">
-			{#if activeTab === tab.key}
+		<TabsContent value={tab.key} hidden={activeTab !== tab.key} class="ridu-field-tabs__content">
+			{#if activeTab === tab.key || visitedTabs.has(tab.key)}
 				<FieldLayout
 					fields={fields.filter((field) => (field.admin.tab ?? "") === tab.key)}
 					{form}