@aphexcms/cms-core 9.3.0 → 9.5.0

package/dist/components/admin/DocumentEditor.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { SchemaType } from '../../types/schemas.js';
+import type { CMSPlugin } from '../../plugins/types.js';
 interface Props {
     schemas: SchemaType[];
     documentType: string;
     documentId?: string | null;
     isCreating: boolean;
     onBack: () => void;
+    /** When set, the close control renders as a labelled "← {backLabel}" button
+     *  instead of a bare close (✕) icon — used for reference editors so the action
+     *  reads as "go back" rather than "close". */
+    backLabel?: string;
     onSaved?: (documentId: string) => void;
     onAutoSaved?: (documentId: string, title: string) => void;
     onDeleted?: () => void;
@@ -26,10 +31,18 @@ interface Props {
     onToggleFocus?: () => void;
     /** When true, split the editor with a live preview iframe on the right. */
     presentationMode?: boolean;
+    /**
+     * Bump this to ask the preview iframe to re-fetch its server-loaded data
+     * (`aphex:refresh` → `invalidateAll` in the overlay). Used when a *different*
+     * document — e.g. one this page renders in a list — was edited elsewhere.
+     */
+    refreshToken?: number;
     /** Toggle host-driven presentation mode. Omit to hide the button entirely. */
     onTogglePresentation?: () => void;
     /** Organization ID from the host context — used as fallback for new docs that haven't been saved yet. */
     organizationId?: string | null;
+    /** Build-time plugins; their document-action parts render in the toolbar. */
+    plugins?: CMSPlugin[];
 }
 declare const DocumentEditor: import("svelte").Component<Props, {}, "">;
 type DocumentEditor = ReturnType<typeof DocumentEditor>;

package/dist/components/admin/DocumentEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/DocumentEditor.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AA4BxD,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,CAAC,EAAE;QACxB,aAAa,EAAE,MAAM,CAAC;QACtB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC1B,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACnB,GAAG,IAAI,CAAC;IACT,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,8EAA8E;IAC9E,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,yGAAyG;IACzG,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAsgEF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DocumentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/DocumentEditor.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAQzD,OAAO,KAAK,EAAE,SAAS,EAAuB,MAAM,qBAAqB,CAAC;AA6BzE,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;kDAE8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,CAAC,EAAE;QACxB,aAAa,EAAE,MAAM,CAAC;QACtB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC1B,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACnB,GAAG,IAAI,CAAC;IACT,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,yGAAyG;IACzG,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,6EAA6E;IAC7E,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;CACtB;AA6rEF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/admin/MediaBrowser.svelte

@@ -211,6 +211,15 @@
 	}
 
 	// Sort assets client-side
+	function isSystemAsset(asset: Asset): boolean {
+		const metadata = asset.metadata as Record<string, unknown> | null | undefined;
+		return (
+			metadata?.system === true ||
+			metadata?.fieldPath === 'user.image' ||
+			metadata?.fieldPath === 'organization.metadata.logo'
+		);
+	}
+
 	function sortAssets(list: Asset[]): Asset[] {
 		const sorted = [...list];
 		switch (sortOrder) {
@@ -234,14 +243,15 @@
 	// Pinned assets (already in array) — separate from the main sorted list
 	const pinnedAssets = $derived.by(() => {
 		if (!(selectable && multiSelect && existingAssetIds && existingAssetIds.size > 0)) return [];
-		return assetList.filter((a) => existingAssetIds!.has(a.id));
+		return assetList.filter((a) => !isSystemAsset(a) && existingAssetIds!.has(a.id));
 	});
 
 	const sortedAssets = $derived.by(() => {
+		const visibleAssets = assetList.filter((a) => !isSystemAsset(a));
 		if (selectable && multiSelect && existingAssetIds && existingAssetIds.size > 0) {
-			return sortAssets(assetList.filter((a) => !existingAssetIds!.has(a.id)));
+			return sortAssets(visibleAssets.filter((a) => !existingAssetIds!.has(a.id)));
 		}
-		return sortAssets(assetList);
+		return sortAssets(visibleAssets);
 	});
 
 	// Bulk selection derived (must be after sortedAssets)

package/dist/components/admin/MediaBrowser.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/MediaBrowser.svelte.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAS9C,UAAU,KAAK;IACd,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IAC7C,oCAAoC;IACpC,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC/B;AA8qCF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"MediaBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/MediaBrowser.svelte.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAS9C,UAAU,KAAK;IACd,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IAC7C,oCAAoC;IACpC,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC/B;AAwrCF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/admin/PluginSettingsPanel.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+	import * as Card from '@aphexcms/ui/shadcn/card';
+	import * as Select from '@aphexcms/ui/shadcn/select';
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Input } from '@aphexcms/ui/shadcn/input';
+	import { Textarea } from '@aphexcms/ui/shadcn/textarea';
+	import { Label } from '@aphexcms/ui/shadcn/label';
+	import { Switch } from '@aphexcms/ui/shadcn/switch';
+	import { toast } from 'svelte-sonner';
+	import { onMount } from 'svelte';
+	import type { CMSPlugin, SettingsPart } from '../../plugins/types';
+	import type { SettingsField } from '../../types/schemas';
+	import { settingsListItems } from '../../schema-utils/settings';
+
+	/**
+	 * Generic plugin-settings surface. The app mounts this in its settings area and
+	 * passes its plugin registry; the panel reads each plugin's `aphex/settings`
+	 * declaration, loads the org's masked values from the API, renders a form per
+	 * plugin, and saves via the API. Secret fields are write-only (masked); a blank/
+	 * untouched submission leaves them unchanged.
+	 */
+	let { plugins = [] }: { plugins?: CMSPlugin[] } = $props();
+
+	// Settings declarations from the client plugin registry (component plane).
+	const declarations = $derived(
+		plugins
+			.flatMap((p) => p.parts ?? [])
+			.filter((part): part is SettingsPart => part.implements === 'aphex/settings')
+	);
+
+	// Placeholder the API returns for a secret that has a stored value.
+	const SECRET_MASK = '••••••';
+
+	// Per-plugin working values (non-secret fields + the masked marker for secrets),
+	// plus the last-saved snapshot for dirty detection.
+	let valuesByPlugin = $state<Record<string, Record<string, unknown>>>({});
+	let savedByPlugin = $state<Record<string, string>>({});
+	// Secret fields are edited through a SEPARATE draft that always starts empty — the
+	// mask never enters an editable input (typing into a masked field would prepend the
+	// bullets to the real value). Empty draft = "leave unchanged"; non-empty = replace.
+	let secretDrafts = $state<Record<string, Record<string, string>>>({});
+	let secretsEnabled = $state(true);
+	let loading = $state(true);
+	let loadError = $state<string | null>(null);
+	let savingId = $state<string | null>(null);
+
+	onMount(async () => {
+		try {
+			const res = await fetch('/api/plugin-settings');
+			const json = await res.json();
+			if (!res.ok || !json.success) {
+				loadError = json?.message ?? 'Failed to load plugin settings';
+				return;
+			}
+			secretsEnabled = json.secretsEnabled ?? true;
+			for (const entry of json.data as Array<{
+				pluginId: string;
+				values: Record<string, unknown>;
+			}>) {
+				valuesByPlugin[entry.pluginId] = { ...entry.values };
+				savedByPlugin[entry.pluginId] = JSON.stringify(entry.values);
+			}
+		} catch {
+			loadError = 'Failed to load plugin settings';
+		} finally {
+			loading = false;
+		}
+	});
+
+	function getVal(pluginId: string, name: string): unknown {
+		return valuesByPlugin[pluginId]?.[name];
+	}
+	function setVal(pluginId: string, name: string, value: unknown) {
+		valuesByPlugin[pluginId] = { ...(valuesByPlugin[pluginId] ?? {}), [name]: value };
+	}
+	/** Whether a secret already has a stored value (server sent the mask for it). */
+	function isSecretSet(pluginId: string, name: string): boolean {
+		return valuesByPlugin[pluginId]?.[name] === SECRET_MASK;
+	}
+	function getSecretDraft(pluginId: string, name: string): string {
+		return secretDrafts[pluginId]?.[name] ?? '';
+	}
+	function setSecretDraft(pluginId: string, name: string, value: string) {
+		secretDrafts[pluginId] = { ...(secretDrafts[pluginId] ?? {}), [name]: value };
+	}
+	function isDirty(pluginId: string): boolean {
+		const secretTyped = Object.values(secretDrafts[pluginId] ?? {}).some((v) => v !== '');
+		return (
+			secretTyped || JSON.stringify(valuesByPlugin[pluginId] ?? {}) !== savedByPlugin[pluginId]
+		);
+	}
+
+	// Normalize a string field's `list` to `{ title, value }[]`.
+	// Shared with PluginSettingsService's validator, so the options offered here are
+	// exactly the ones the server will accept.
+	const listItems = settingsListItems;
+
+	async function save(decl: SettingsPart) {
+		savingId = decl.pluginId;
+		try {
+			// Start from the working values (secrets are the mask here = "unchanged"),
+			// then overlay any secret the user actually typed (non-empty draft = replace).
+			const patch: Record<string, unknown> = { ...(valuesByPlugin[decl.pluginId] ?? {}) };
+			for (const [name, draft] of Object.entries(secretDrafts[decl.pluginId] ?? {})) {
+				if (draft !== '') patch[name] = draft;
+			}
+
+			const res = await fetch(`/api/plugin-settings/${encodeURIComponent(decl.pluginId)}`, {
+				method: 'PUT',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify({ values: patch })
+			});
+			const json = await res.json();
+			if (!res.ok || !json.success) {
+				toast.error(json?.message ?? 'Failed to save settings');
+				return;
+			}
+			valuesByPlugin[decl.pluginId] = { ...json.data.values };
+			savedByPlugin[decl.pluginId] = JSON.stringify(json.data.values);
+			secretDrafts[decl.pluginId] = {}; // clear typed secrets after a successful save
+			toast.success(`${decl.title} settings saved`);
+		} catch {
+			toast.error('Failed to save settings');
+		} finally {
+			savingId = null;
+		}
+	}
+</script>
+
+{#snippet fieldControl(decl: SettingsPart, field: SettingsField)}
+	{@const value = getVal(decl.pluginId, field.name)}
+	{#if field.type === 'secret'}
+		<Input
+			type="password"
+			autocomplete="off"
+			disabled={!secretsEnabled}
+			placeholder={!secretsEnabled
+				? 'Encryption key not configured'
+				: isSecretSet(decl.pluginId, field.name)
+					? 'Set — type a new value to replace'
+					: 'Enter a value'}
+			value={getSecretDraft(decl.pluginId, field.name)}
+			oninput={(e) => setSecretDraft(decl.pluginId, field.name, e.currentTarget.value)}
+		/>
+	{:else if field.type === 'boolean'}
+		<Switch
+			checked={value === true}
+			onCheckedChange={(c) => setVal(decl.pluginId, field.name, c)}
+		/>
+	{:else if field.type === 'number'}
+		<Input
+			type="number"
+			value={value == null ? '' : String(value)}
+			oninput={(e) =>
+				setVal(
+					decl.pluginId,
+					field.name,
+					e.currentTarget.value === '' ? null : Number(e.currentTarget.value)
+				)}
+		/>
+	{:else if field.type === 'text'}
+		<Textarea
+			value={typeof value === 'string' ? value : ''}
+			oninput={(e) => setVal(decl.pluginId, field.name, e.currentTarget.value)}
+		/>
+	{:else if field.type === 'string' && listItems(field).length > 0}
+		{@const items = listItems(field)}
+		<Select.Root
+			type="single"
+			value={typeof value === 'string' ? value : ''}
+			onValueChange={(v) => setVal(decl.pluginId, field.name, v)}
+		>
+			<Select.Trigger class="w-full">
+				{items.find((i) => i.value === value)?.title ?? 'Select…'}
+			</Select.Trigger>
+			<Select.Content>
+				{#each items as item (item.value)}
+					<Select.Item value={item.value} label={item.title}>{item.title}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+	{:else}
+		<Input
+			value={typeof value === 'string' ? value : ''}
+			placeholder={(field as { placeholder?: string }).placeholder ?? ''}
+			oninput={(e) => setVal(decl.pluginId, field.name, e.currentTarget.value)}
+		/>
+	{/if}
+{/snippet}
+
+<div class="space-y-6">
+	{#if loading}
+		<p class="text-muted-foreground text-sm">Loading…</p>
+	{:else if loadError}
+		<p class="text-destructive text-sm">{loadError}</p>
+	{:else if declarations.length === 0}
+		<div class="border-muted-foreground/30 rounded-md border border-dashed p-8 text-center">
+			<p class="text-muted-foreground text-sm">No installed plugins have configurable settings.</p>
+		</div>
+	{:else}
+		{#each declarations as decl (decl.pluginId)}
+			<Card.Root>
+				<Card.Header>
+					<Card.Title>{decl.title}</Card.Title>
+					{#if decl.description}
+						<Card.Description>{decl.description}</Card.Description>
+					{/if}
+				</Card.Header>
+				<Card.Content class="space-y-4">
+					{#each decl.fields as field (field.name)}
+						<div class="space-y-1.5">
+							<Label for={`${decl.pluginId}-${field.name}`}>{field.title}</Label>
+							{@render fieldControl(decl, field)}
+							{#if field.description}
+								<p class="text-muted-foreground text-xs">{field.description}</p>
+							{/if}
+						</div>
+					{/each}
+				</Card.Content>
+				<Card.Footer class="justify-end">
+					<Button
+						onclick={() => save(decl)}
+						disabled={savingId === decl.pluginId || !isDirty(decl.pluginId)}
+					>
+						{savingId === decl.pluginId ? 'Saving…' : 'Save'}
+					</Button>
+				</Card.Footer>
+			</Card.Root>
+		{/each}
+	{/if}
+</div>

package/dist/components/admin/PluginSettingsPanel.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CMSPlugin } from '../../plugins/types.js';
+type $$ComponentProps = {
+    plugins?: CMSPlugin[];
+};
+declare const PluginSettingsPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type PluginSettingsPanel = ReturnType<typeof PluginSettingsPanel>;
+export default PluginSettingsPanel;
+//# sourceMappingURL=PluginSettingsPanel.svelte.d.ts.map

package/dist/components/admin/PluginSettingsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginSettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/PluginSettingsPanel.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,qBAAqB,CAAC;AAIlE,KAAK,gBAAgB,GAAI;IAAE,OAAO,CAAC,EAAE,SAAS,EAAE,CAAA;CAAE,CAAC;AA+MpD,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/admin/SchemaField.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Label } from '@aphexcms/ui/shadcn/label';
-	import { Badge } from '@aphexcms/ui/shadcn/badge';
 	import * as Alert from '@aphexcms/ui/shadcn/alert';
+	import * as Tooltip from '@aphexcms/ui/shadcn/tooltip';
+	import { Info } from '@lucide/svelte';
 	import type {
 		Field,
 		DateField as DateFieldType,
@@ -14,24 +15,16 @@
 		type ValidationError
 	} from '../../field-validation/utils';
 	import { cmsLogger } from '../../utils/logger';
+	import { useFieldComponents } from '../../admin/field-components.svelte';
 	import {
 		convertDateToUserFormat,
 		convertDateTimeToUserFormat
 	} from '../../field-validation/date-utils';
 
-	// Import individual field components
-	import StringField from './fields/StringField.svelte';
-	import SlugField from './fields/SlugField.svelte';
-	import URLField from './fields/URLField.svelte';
-	import TextareaField from './fields/TextareaField.svelte';
-	import NumberField from './fields/NumberField.svelte';
-	import BooleanField from './fields/BooleanField.svelte';
-	import ImageField from './fields/ImageField.svelte';
-	import FileField from './fields/FileField.svelte';
+	// Leaf/reference/custom-input fields resolve through the shared FieldInput;
+	// object/array containers recurse here.
+	import FieldInput from './fields/FieldInput.svelte';
 	import ArrayField from './fields/ArrayField.svelte';
-	import DateField from './fields/DateField.svelte';
-	import DateTimeField from './fields/DateTimeField.svelte';
-	import ReferenceField from './fields/ReferenceField.svelte';
 	import SchemaField from './SchemaField.svelte';
 
 	interface Props {
@@ -45,6 +38,13 @@
 		parentPath?: string; // Parent field path for nested fields
 		readonly?: boolean; // Read-only mode for viewers
 		organizationId?: string; // Document's organization ID for asset uploads
+		/**
+		 * How to present `field.description`. `'inline'` (default) shows it as a line
+		 * under the label; `'tooltip'` shows an info icon that reveals it on hover/focus.
+		 * Object containers pass `'tooltip'` to their subfields so nested groups don't
+		 * become a wall of help text.
+		 */
+		descriptionMode?: 'inline' | 'tooltip';
 	}
 
 	let {
@@ -57,12 +57,18 @@
 		schemaType,
 		parentPath,
 		readonly = false,
-		organizationId
+		organizationId,
+		descriptionMode = 'inline'
 	}: Props = $props();
 
 	// Build full field path
 	const fieldPath = $derived(parentPath ? `${parentPath}.${field.name}` : field.name);
 
+	// Plugin-provided input widget for this field's `input` key, if any. When set,
+	// it replaces the built-in renderer for the field's type.
+	const fieldComponents = useFieldComponents();
+	const CustomInput = $derived(field.input ? fieldComponents(field.input) : undefined);
+
 	// Validation state for the wrapper (displays errors and status)
 	let validationErrors = $state<ValidationError[]>([]);
 
@@ -125,28 +131,46 @@
 
 <div class="space-y-2" data-field-path={fieldPath}>
 	<div class="flex items-center justify-between">
-		<Label for={field.name}>
-			{field.title}
-			{#if isFieldRequired(field)}
-				<span class="text-destructive">*</span>
-			{/if}
-		</Label>
-
-		<div class="flex items-center gap-2">
-			{#if hasErrors}
-				<span class="text-destructive text-sm">🚨</span>
-			{/if}
-
-			{#if field.type}
-				<Badge variant="outline" class="text-xs">
-					{field.type}
-				</Badge>
+		<div class="flex items-center gap-1.5">
+			<Label for={field.name}>
+				{field.title}
+				{#if isFieldRequired(field)}
+					<span class="text-destructive">*</span>
+				{/if}
+			</Label>
+
+			<!-- In tooltip mode (object subfields) the description hides behind an info
+			     icon on desktop to keep the group tidy. Desktop only — touch has no hover
+			     and the tooltip is unreliable there, so on mobile the description falls
+			     back to the inline line below (see `lg:hidden` on the <p>). -->
+			{#if descriptionMode === 'tooltip' && field.description}
+				<Tooltip.Provider delayDuration={150}>
+					<Tooltip.Root>
+						<Tooltip.Trigger
+							class="text-muted-foreground/60 hover:text-foreground focus-visible:text-foreground -my-1 hidden cursor-help rounded p-1 transition-colors outline-none lg:inline-flex"
+							aria-label="More info about {field.title}"
+						>
+							<Info class="size-3.5" />
+						</Tooltip.Trigger>
+						<Tooltip.Content class="max-w-xs text-xs leading-relaxed">
+							{field.description}
+						</Tooltip.Content>
+					</Tooltip.Root>
+				</Tooltip.Provider>
 			{/if}
 		</div>
+
+		{#if hasErrors}
+			<span class="text-destructive text-sm">🚨</span>
+		{/if}
 	</div>
 
+	<!-- Inline description: always in inline mode; in tooltip mode only on mobile
+	     (`lg:hidden`), where the desktop info icon is hidden. -->
 	{#if field.description}
-		<p class="text-muted-foreground text-sm">{field.description}</p>
+		<p class="text-muted-foreground text-sm {descriptionMode === 'tooltip' ? 'lg:hidden' : ''}">
+			{field.description}
+		</p>
 	{/if}
 
 	<!-- Validation errors display -->
@@ -177,53 +201,11 @@
 				error
 			)}
 	>
-		{#if field.type === 'string'}
-			<StringField {field} {value} {documentData} {onUpdate} {validationClasses} {readonly} />
-		{:else if field.type === 'text'}
-			<TextareaField {field} {value} {onUpdate} {validationClasses} {readonly} />
-		{:else if field.type === 'slug'}
-			<SlugField {field} {value} {documentData} {onUpdate} {validationClasses} {readonly} />
-		{:else if field.type === 'url'}
-			<URLField {field} {value} {onUpdate} {validationClasses} {readonly} />
-		{:else if field.type === 'number'}
-			<NumberField {field} {value} {onUpdate} {validationClasses} {readonly} />
-		{:else if field.type === 'boolean'}
-			<BooleanField {field} {value} {onUpdate} {validationClasses} {readonly} />
-		{:else if field.type === 'date'}
-			<DateField {field} {value} {onUpdate} {validationClasses} {readonly} />
-		{:else if field.type === 'datetime'}
-			<DateTimeField {field} {value} {onUpdate} {validationClasses} {readonly} />
-
-			<!-- Image Field -->
-		{:else if field.type === 'image'}
-			<ImageField
-				{field}
-				{value}
-				{onUpdate}
-				{validationClasses}
-				{schemaType}
-				{fieldPath}
-				{readonly}
-				{organizationId}
-			/>
-
-			<!-- File Field -->
-		{:else if field.type === 'file'}
-			<FileField
-				{field}
-				{value}
-				{onUpdate}
-				{validationClasses}
-				{schemaType}
-				{fieldPath}
-				{readonly}
-				{organizationId}
-			/>
-
-			<!-- Object Field -->
-		{:else if field.type === 'object' && field.fields}
-			<div class="border-border space-y-4 rounded-md border p-4">
-				<h4 class="text-sm font-medium">{field.title}</h4>
+		{#if field.type === 'object' && field.fields && !CustomInput}
+			<!-- Object container: recurse. A custom `input` widget would override this.
+			     The field's title is already shown by the <Label> above, so the card is
+			     just a bordered group — no repeated heading. -->
+			<div class="border-border space-y-6 rounded-md border p-4">
 				{#each field.fields as subField, index (index)}
 					<SchemaField
 						field={subField}
@@ -235,28 +217,27 @@
 						parentPath={fieldPath}
 						{readonly}
 						{organizationId}
+						descriptionMode="tooltip"
 					/>
 				{/each}
 			</div>
-
-			<!-- Array Field (includes block content editor when of contains {type: 'block'}) -->
-		{:else if field.type === 'array' && field.of}
+		{:else if field.type === 'array' && field.of && !CustomInput}
+			<!-- Array container (also the block-content editor when `of` has {type:'block'}). -->
 			<ArrayField {field} {value} {onUpdate} {onOpenReference} {readonly} {organizationId} />
-
-			<!-- Reference Field -->
-		{:else if field.type === 'reference' && field.to}
-			<ReferenceField {field} {value} {onUpdate} {onOpenReference} {readonly} />
-
-			<!-- Unknown field type -->
 		{:else}
-			<div class="border-muted-foreground/30 rounded-md border border-dashed p-4 text-center">
-				<p class="text-muted-foreground text-sm">
-					Field type "{field.type}" not yet supported
-				</p>
-				<p class="text-muted-foreground mt-1 text-xs">
-					Raw value: {JSON.stringify(value)}
-				</p>
-			</div>
+			<!-- Leaf / reference / custom-input fields — resolved uniformly. -->
+			<FieldInput
+				{field}
+				{value}
+				{onUpdate}
+				{readonly}
+				{validationClasses}
+				{documentData}
+				{schemaType}
+				{fieldPath}
+				{organizationId}
+				{onOpenReference}
+			/>
 		{/if}
 
 		{#snippet failed(error, reset)}

package/dist/components/admin/SchemaField.svelte.d.ts

@@ -11,6 +11,13 @@ interface Props {
     parentPath?: string;
     readonly?: boolean;
     organizationId?: string;
+    /**
+     * How to present `field.description`. `'inline'` (default) shows it as a line
+     * under the label; `'tooltip'` shows an info icon that reveals it on hover/focus.
+     * Object containers pass `'tooltip'` to their subfields so nested groups don't
+     * become a wall of help text.
+     */
+    descriptionMode?: 'inline' | 'tooltip';
 }
 declare const SchemaField: import("svelte").Component<Props, {
     performValidation: (currentValue: any, context?: any) => Promise<void>;

package/dist/components/admin/SchemaField.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SchemaField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/SchemaField.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,KAAK,EAGL,MAAM,qBAAqB,CAAC;AAyB9B,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAG9C,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA6NF,QAAA,MAAM,WAAW;sCA/KgC,GAAG,YAAW,GAAG;MA+KT,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SchemaField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/SchemaField.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,KAAK,EAGL,MAAM,qBAAqB,CAAC;AAiB9B,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAG9C,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACvC;AAgMF,QAAA,MAAM,WAAW;sCAnJgC,GAAG,YAAW,GAAG;MAmJT,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/admin/fields/ArrayField.svelte

@@ -5,12 +5,13 @@
 	import { Checkbox } from '@aphexcms/ui/shadcn/checkbox';
 	import * as DropdownMenu from '@aphexcms/ui/shadcn/dropdown-menu';
 	import * as Card from '@aphexcms/ui/shadcn/card';
-	import type { ArrayField as ArrayFieldType, SchemaType } from '../../../types/schemas';
+	import type { ArrayField as ArrayFieldType, Field, SchemaType } from '../../../types/schemas';
 	import { getArrayTypes, getSchemaByName } from '../../../schema-utils/utils';
 	import { getSchemaContext } from '../../../schema-context.svelte';
 	import ObjectModal from '../ObjectModal.svelte';
 	import ImageField from './ImageField.svelte';
 	import ReferenceField from './ReferenceField.svelte';
+	import FieldInput from './FieldInput.svelte';
 	import { getDefaultValueForFieldType } from '../../../utils/field-defaults';
 	import { DragDropProvider } from '@dnd-kit/svelte';
 	import { createSortable, isSortable } from '@dnd-kit/svelte/sortable';
@@ -90,6 +91,20 @@
 	const primitiveType = $derived(isPrimitiveArray ? field.of?.[0]?.type : null);
 	const availableTypes = $derived(getArrayTypes(schemas, field));
 
+	// The item's field spec, used to render each primitive item through the shared
+	// FieldInput resolver (so a rich type or a plugin `input` widget works per item).
+	const primitiveItemField = $derived({
+		name: `${field.name}-item`,
+		title: '',
+		...(field.of?.[0] ?? { type: 'string' })
+	} as Field);
+	// Route through FieldInput for rich types (color/url/slug/date…) or any custom
+	// `input`; keep the compact inline inputs for plain string/number/boolean.
+	const COMPACT_TYPES = ['string', 'number', 'boolean', 'text'];
+	const useResolvedItemInput = $derived(
+		!!field.of?.[0]?.input || (!!primitiveType && !COMPACT_TYPES.includes(primitiveType))
+	);
+
 	// Synthetic ReferenceField definition reused for every row in an
 	// array-of-references. We forward the array's first `of[]` entry's `to` so
 	// the row picker honors the schema-author's allowed target types.
@@ -777,7 +792,14 @@
 							{/if}
 
 							<div class="min-w-0 flex-1">
-								{#if primitiveType === 'boolean'}
+								{#if useResolvedItemInput}
+									<FieldInput
+										field={primitiveItemField}
+										value={item}
+										onUpdate={(v) => handleUpdatePrimitive(index, v)}
+										{readonly}
+									/>
+								{:else if primitiveType === 'boolean'}
 									<div class="flex items-center gap-2 px-1">
 										<Checkbox
 											checked={item}

package/dist/components/admin/fields/ArrayField.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ArrayField.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAc,MAAM,wBAAwB,CAAC;AA+BtF,UAAU,KAAK;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA65BF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ArrayField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ArrayField.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAqB,MAAM,wBAAwB,CAAC;AAgC7F,UAAU,KAAK;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA86BF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}