@aphexcms/cms-core 7.0.0 → 8.1.0

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

@@ -10,6 +10,7 @@
 	import { getSchemaContext } from '../../../schema-context.svelte';
 	import ObjectModal from '../ObjectModal.svelte';
 	import ImageField from './ImageField.svelte';
+	import ReferenceField from './ReferenceField.svelte';
 	import { getDefaultValueForFieldType } from '../../../utils/field-defaults';
 	import { DragDropProvider } from '@dnd-kit/svelte';
 	import { createSortable, isSortable } from '@dnd-kit/svelte/sortable';
@@ -29,6 +30,9 @@
 	import { toast } from 'svelte-sonner';
 	import AssetBrowserModal from '../AssetBrowserModal.svelte';
 	import { resolvePreviewTitle, resolvePreviewSubtitle } from '../../../utils/preview';
+	import { documents } from '../../../api/documents';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { getDocumentVersion } from '../../../document-refresh.svelte';
 
 	interface Props {
 		field: ArrayFieldType;
@@ -70,8 +74,12 @@
 	}
 
 	const isGridLayout = $derived(field.options?.layout === 'grid');
+	const isReferenceArray = $derived(
+		field.of && field.of.length > 0 && field.of[0]?.type === 'reference'
+	);
 	const isPrimitiveArray = $derived(
-		field.of &&
+		!isReferenceArray &&
+			field.of &&
 			field.of.length > 0 &&
 			field.of[0]?.type &&
 			!field.of[0].fields &&
@@ -80,6 +88,48 @@
 	const primitiveType = $derived(isPrimitiveArray ? field.of?.[0]?.type : null);
 	const availableTypes = $derived(getArrayTypes(schemas, field));
 
+	// 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.
+	const referenceFieldShape = $derived(
+		isReferenceArray
+			? {
+					name: field.name,
+					type: 'reference' as const,
+					title: field.title,
+					to: (field.of?.[0] as any)?.to ?? []
+				}
+			: null
+	);
+
+	// Batched hydration cache for reference rows. Without this, each row's
+	// ReferenceField fires its own getById on mount → N round-trips for an
+	// array of N refs. Instead we fetch all populated refs in a single call
+	// and hand each row its preloaded doc. The cache invalidates whenever
+	// any row's referenced doc bumps its document-refresh version.
+	const referenceCache = new SvelteMap<string, any>();
+	$effect(() => {
+		if (!isReferenceArray) return;
+		const ids = (Array.isArray(value) ? value : [])
+			.map((item: any) => item?._ref)
+			.filter((id: any): id is string => typeof id === 'string' && id.length > 0);
+		if (ids.length === 0) return;
+		// Subscribe to each id's version so external saves trigger a refetch.
+		for (const id of ids) getDocumentVersion(id);
+		(async () => {
+			try {
+				const res = await documents.getMany(ids);
+				if (res.success && res.data) {
+					for (const doc of res.data as any[]) {
+						if (doc?.id) referenceCache.set(doc.id, doc);
+					}
+				}
+			} catch {
+				// Per-row ReferenceField will fall back to its own fetch on miss.
+			}
+		})();
+	});
+
 	// Modal state
 	let modalOpen = $state(false);
 	let editingIndex = $state<number | null>(null);
@@ -376,6 +426,29 @@
 		onUpdate(newArray);
 	}
 
+	// Reference array — append an empty reference row. The row renders the
+	// ReferenceField empty state (search picker), so the user picks the target
+	// document inline without an extra modal step.
+	function handleAddReference() {
+		if (readonly) return;
+		const newItem = { _type: 'reference', _key: generateKey(), _ref: null };
+		onUpdate([...keyedItems, newItem]);
+	}
+
+	function handleUpdateReference(
+		index: number,
+		newRef: { _type: 'reference'; _ref: string; _key?: string } | null
+	) {
+		if (readonly) return;
+		const newArray = [...keyedItems];
+		// Preserve the row's _key (stable across drag/drop) and only swap the _ref.
+		newArray[index] = {
+			...newArray[index],
+			_ref: newRef?._ref ?? null
+		};
+		onUpdate(newArray);
+	}
+
 	// Write-through: propagate every field change from the modal to the array immediately
 	function handleModalUpdate(updatedData: Record<string, any>) {
 		if (editingIndex === null || !editingType) return;
@@ -421,7 +494,81 @@
 	}
 </script>
 
-{#if isPrimitiveArray}
+{#if isReferenceArray && referenceFieldShape}
+	<!-- Reference array — each row reuses ReferenceField. Drag handle on the
+	     left, ReferenceField fills the row, an X button on empty rows lets the
+	     user discard a never-picked row (populated rows use ReferenceField's
+	     own context menu, which we override via onRemove to drop the row). -->
+	{#if keyedItems.length > 0}
+		{#key dndKey}
+			<DragDropProvider onDragEnd={handleDragEnd}>
+				<div class="space-y-1">
+					{#each keyedItems as item, index (item._key)}
+						{@const sortable = createSortable({ id: item._key, index, disabled: readonly })}
+						<div
+							{@attach sortable.attach}
+							class="flex items-center gap-1"
+							class:opacity-50={sortable.isDragging}
+						>
+							{#if !readonly}
+								<button
+									{@attach sortable.attachHandle}
+									class="text-muted-foreground hover:text-foreground flex h-9 w-7 shrink-0 cursor-grab items-center justify-center active:cursor-grabbing"
+								>
+									<GripVertical class="h-4 w-4" />
+								</button>
+							{/if}
+							<div class="min-w-0 flex-1">
+								<ReferenceField
+									field={referenceFieldShape}
+									value={item._ref ? { _type: 'reference', _ref: item._ref } : null}
+									onUpdate={(newRef) => handleUpdateReference(index, newRef)}
+									{onOpenReference}
+									{readonly}
+									onRemove={() => handleRemoveItem(index)}
+									preloadedDoc={item._ref ? referenceCache.get(item._ref) : undefined}
+								/>
+							</div>
+							{#if !readonly && !item._ref}
+								<DropdownMenu.Root>
+									<DropdownMenu.Trigger>
+										{#snippet child({ props })}
+											<button
+												{...props}
+												class="text-muted-foreground hover:text-foreground flex h-9 w-7 shrink-0 items-center justify-center rounded transition-colors"
+												aria-label="Row options"
+											>
+												<Ellipsis class="h-4 w-4" />
+											</button>
+										{/snippet}
+									</DropdownMenu.Trigger>
+									<DropdownMenu.Content align="end">
+										<DropdownMenu.Item
+											class="text-destructive focus:text-destructive"
+											onclick={() => handleRemoveItem(index)}
+										>
+											<Trash2 class="mr-2 h-4 w-4" />
+											Remove
+										</DropdownMenu.Item>
+									</DropdownMenu.Content>
+								</DropdownMenu.Root>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</DragDropProvider>
+		{/key}
+	{/if}
+	{#if !readonly}
+		<button
+			class="border-border/50 text-muted-foreground hover:text-foreground hover:bg-muted/50 mt-1 flex h-10 w-full items-center justify-center gap-2 rounded border border-dashed text-sm transition-colors"
+			onclick={handleAddReference}
+		>
+			<Plus class="h-4 w-4" />
+			Add reference...
+		</button>
+	{/if}
+{:else if isPrimitiveArray}
 	<!-- Primitive array UI with DnD -->
 	{#if arrayValue.length === 0}
 		<div

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;AA0BtF,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;AA8xBF,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,EAAc,MAAM,wBAAwB,CAAC;AA8BtF,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;AAq5BF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -1,31 +1,45 @@
 <script lang="ts">
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import PlusIcon from '@lucide/svelte/icons/plus';
-	import { tick } from 'svelte';
 	import * as Command from '@aphexcms/ui/shadcn/command';
-	import * as Popover from '@aphexcms/ui/shadcn/popover';
 	import * as DropdownMenu from '@aphexcms/ui/shadcn/dropdown-menu';
 	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Input } from '@aphexcms/ui/shadcn/input';
 	import { cn } from '@aphexcms/ui/utils';
-	import { ExternalLink, Ellipsis, Trash2, FileText } from '@lucide/svelte';
+	import { ChevronDown, ExternalLink, Ellipsis, Trash2, FileText } from '@lucide/svelte';
 	import type { Field, ReferenceField as ReferenceFieldType } from '../../../types/schemas';
 	import { documents } from '../../../api/documents';
 	import { getSchemaContext } from '../../../schema-context.svelte';
 	import { getSchemaByName } from '../../../schema-utils/utils';
 	import { toast } from 'svelte-sonner';
-	import { cmsLogger } from '../../../utils/logger';
 	import { pluralize } from '../../../utils/pluralize';
 	import { resolvePreviewTitle, resolvePreviewSubtitle } from '../../../utils/preview';
+	import { getDocumentVersion } from '../../../document-refresh.svelte';
+
+	type ReferenceValue = { _type: 'reference'; _ref: string; _key?: string };
 
 	interface Props {
 		field: Field;
-		value: string | null; // Document ID
-		onUpdate: (value: string | null) => void;
+		value: ReferenceValue | null; // Reference wrapper — singular and array share this shape
+		onUpdate: (value: ReferenceValue | null) => void;
 		onOpenReference?: (documentId: string, documentType: string) => void;
 		readonly?: boolean;
+		onRemove?: () => void; // When set, the "Remove" menu item calls this instead of clearing the value (used by array-of-references rows)
+		preloadedDoc?: unknown; // When provided AND its id matches `value._ref`, skip the per-row getById and use this doc as `selectedDocument` (used by ArrayField to batch-hydrate reference rows in one HTTP call)
 	}
 
-	let { field, value, onUpdate, onOpenReference, readonly = false }: Props = $props();
+	let {
+		field,
+		value,
+		onUpdate,
+		onOpenReference,
+		readonly = false,
+		onRemove,
+		preloadedDoc
+	}: Props = $props();
+
+	// Pull the target ID off the wrapper (or null when nothing's selected).
+	const refId = $derived(value?._ref ?? null);
 
 	// Cast to reference field type
 	const referenceField = field as ReferenceFieldType;
@@ -41,14 +55,26 @@
 	let selectedDocument = $state<any>(null);
 	let loading = $state(false);
 	let creating = $state(false);
-	let triggerRef = $state<HTMLButtonElement>(null!);
+	let query = $state('');
 
-	// Load selected document details when value changes
+	// Load selected document details when value changes — and re-load whenever
+	// the referenced document is saved elsewhere (the version counter bumps),
+	// so the row reflects edits made in a side-panel editor without needing
+	// the user to navigate away and back. When the parent (e.g. ArrayField)
+	// hands us a preloaded doc whose id matches `value`, use it directly and
+	// skip the network call.
 	$effect(() => {
+		const id = refId;
+		// Subscribe to the document's version so this effect re-fires on save.
+		getDocumentVersion(id);
+		if (id && preloadedDoc && (preloadedDoc as any).id === id) {
+			selectedDocument = preloadedDoc;
+			return;
+		}
 		async function loadDocument() {
-			if (value) {
+			if (id) {
 				try {
-					const doc = await documents.getById(value);
+					const doc = await documents.getById(id);
 					if (doc.success) {
 						selectedDocument = doc.data;
 					}
@@ -63,46 +89,84 @@
 		loadDocument();
 	});
 
-	// Load documents when dropdown opens
+	// Reset query whenever the popover closes so the next open starts empty.
 	$effect(() => {
-		async function loadDocuments() {
-			if (open && targetType) {
-				cmsLogger.debug(
-					'[ReferenceField] Opening select box, loading documents for type:',
-					targetType
-				);
-				loading = true;
-				try {
-					const result = await documents.list({
-						docType: targetType,
-						limit: 10
-					});
-					cmsLogger.debug('[ReferenceField] Documents loaded:', result);
-					if (result.success && result.data) {
-						searchResults = result.data;
-						cmsLogger.debug('[ReferenceField] Search results:', searchResults.length, 'documents');
-					}
-				} catch (err) {
-					toast.error('Failed to load documents');
-					searchResults = [];
-				} finally {
-					loading = false;
-				}
+		if (!open) {
+			query = '';
+			searchResults = [];
+		}
+	});
+
+	// All docs cache — fetched once when the dropdown opens, reused for
+	// empty-query browsing and client-side filtering while typing.
+	let allDocs = $state<any[]>([]);
+	let allDocsFetched = $state(false);
+
+	async function fetchAllDocs() {
+		if (allDocsFetched || !targetType) return;
+		loading = true;
+		try {
+			const result = await documents.list({ docType: targetType, limit: 20 });
+			if (result.success && result.data) {
+				allDocs = result.data;
 			}
+		} catch {
+			toast.error('Failed to load documents');
+		} finally {
+			allDocsFetched = true;
+			loading = false;
+		}
+	}
+
+	// Fetch docs when dropdown opens; reset cache when it closes.
+	$effect(() => {
+		if (open) {
+			fetchAllDocs();
+		} else {
+			query = '';
+			searchResults = [];
+			allDocs = [];
+			allDocsFetched = false;
 		}
-		loadDocuments();
+	});
+
+	// Filter results client-side as the user types. Empty query shows all.
+	$effect(() => {
+		const q = query.trim().toLowerCase();
+		if (!open) return;
+		if (!q) {
+			searchResults = allDocs;
+			return;
+		}
+		searchResults = allDocs.filter((doc: any) => {
+			const title = resolvePreviewTitle(doc, targetSchema).toLowerCase();
+			const subtitle = (resolvePreviewSubtitle(doc, targetSchema) ?? '').toLowerCase();
+			return title.includes(q) || subtitle.includes(q);
+		});
 	});
 
 	function closeAndFocusTrigger() {
 		open = false;
-		tick().then(() => {
-			triggerRef?.focus();
-		});
+	}
+
+	// Tiny click-outside action for the inline results dropdown — closes the
+	// dropdown when the user clicks anywhere outside the wrapper. Cheaper
+	// than reaching for a Popover and avoids the focus-stealing problem.
+	function clickOutside(node: HTMLElement, callback: () => void) {
+		function handle(e: MouseEvent) {
+			if (!node.contains(e.target as Node)) callback();
+		}
+		document.addEventListener('mousedown', handle);
+		return {
+			destroy() {
+				document.removeEventListener('mousedown', handle);
+			}
+		};
 	}
 
 	function selectDocument(doc: any) {
 		if (readonly) return;
-		onUpdate(doc.id);
+		onUpdate({ _type: 'reference', _ref: doc.id });
 		closeAndFocusTrigger();
 	}
 
@@ -125,13 +189,11 @@
 		try {
 			const result = await documents.create({
 				type: targetType,
-				data: {
-					title: 'Untitled'
-				}
+				data: {}
 			});
 
 			if (result.success && result.data) {
-				onUpdate(result.data.id);
+				onUpdate({ _type: 'reference', _ref: result.data.id });
 				closeAndFocusTrigger();
 			}
 		} catch (err) {
@@ -179,9 +241,9 @@
 					>
 				{/if}
 			</span>
-			{#if selectedDocument.status === 'published'}
+			{#if selectedDocument._meta?.status === 'published'}
 				<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-green-500" title="Published"></span>
-			{:else if selectedDocument.status === 'unpublished'}
+			{:else if selectedDocument._meta?.status === 'unpublished'}
 				<span class="bg-muted-foreground/60 h-1.5 w-1.5 shrink-0 rounded-full" title="Unpublished"
 				></span>
 			{:else}
@@ -210,7 +272,7 @@
 					<DropdownMenu.Separator />
 					<DropdownMenu.Item
 						class="text-destructive focus:text-destructive"
-						onclick={clearSelection}
+						onclick={() => (onRemove ? onRemove() : clearSelection())}
 					>
 						<Trash2 class="mr-2 h-4 w-4" />
 						Remove
@@ -227,86 +289,97 @@
 		<p class="text-muted-foreground text-sm">No reference selected</p>
 	</div>
 {:else}
-	<!-- Empty state: dashed "Add reference" button that opens a search popover -->
-	<Popover.Root bind:open>
-		<Popover.Trigger bind:ref={triggerRef}>
-			{#snippet child({ props })}
+	<!-- Inline empty state: search input + chevron + Create button. The input
+	     is the primary focus target — the results dropdown is a sibling div
+	     positioned absolutely under the input wrapper, with click-outside
+	     closing it. No popover wrapping the input, so no double-click. -->
+	<div class="flex items-center gap-1">
+		<div class="relative min-w-0 flex-1" use:clickOutside={() => (open = false)}>
+			<div
+				class="border-input bg-background focus-within:ring-ring flex h-9 items-center rounded-md border focus-within:ring-1"
+			>
+				<Input
+					bind:value={query}
+					placeholder="Type to search..."
+					onfocus={() => (open = true)}
+					class="h-8 border-0 bg-transparent shadow-none focus-visible:ring-0"
+				/>
 				<button
-					{...props}
-					class="border-border/50 text-muted-foreground hover:text-foreground hover:bg-muted/50 flex h-10 w-full cursor-pointer items-center justify-center gap-2 rounded border border-dashed text-sm transition-colors"
-					role="combobox"
-					aria-expanded={open}
+					type="button"
+					onclick={() => (open = !open)}
+					class="text-muted-foreground hover:text-foreground flex h-8 w-8 shrink-0 items-center justify-center"
+					aria-label="Toggle results"
 				>
-					<PlusIcon class="h-4 w-4" />
-					Add {targetType || 'reference'}...
+					<ChevronDown class="h-4 w-4" />
 				</button>
-			{/snippet}
-		</Popover.Trigger>
-		<Popover.Content class="!z-[9999] w-[400px] p-0">
-			<Command.Root>
-				<Command.List>
-					{#if loading}
-						<Command.Loading>Loading...</Command.Loading>
-					{:else if searchResults.length === 0}
-						<Command.Empty>
-							<div class="flex flex-col items-center gap-2 py-4">
-								<p class="text-muted-foreground text-sm">
-									No {pluralize(targetType || '')} found
-								</p>
-								<Button size="sm" onclick={createNewDocument} disabled={creating} class="gap-1">
-									<PlusIcon class="h-3 w-3" />
-									{creating ? 'Creating...' : `Create new ${targetType}`}
-								</Button>
-							</div>
-						</Command.Empty>
-					{:else}
-						<Command.Group>
-							{#each searchResults as doc (doc.id)}
-								<Command.Item
-									value={doc.id}
-									onSelect={() => selectDocument(doc)}
-									class="flex items-center justify-between"
-								>
-									<div class="flex min-w-0 flex-1 items-center gap-2">
-										<CheckIcon
-											class={cn('h-4 w-4 shrink-0', value !== doc.id && 'text-transparent')}
-										/>
-										<span class="flex min-w-0 flex-1 flex-col">
-											<span class="truncate text-sm">{getDocumentTitle(doc)}</span>
-											{#if getDocumentSubtitle(doc)}
-												<span class="text-muted-foreground truncate text-xs"
-													>{getDocumentSubtitle(doc)}</span
-												>
-											{/if}
-										</span>
+			</div>
+			{#if open}
+				<div
+					class="bg-popover text-popover-foreground absolute top-full left-0 z-[9999] mt-1 w-[400px] max-w-[min(400px,calc(100vw-2rem))] rounded-md border p-0 shadow-md"
+				>
+					<Command.Root shouldFilter={false}>
+						<Command.List class="max-h-[300px] overflow-y-auto">
+							{#if loading}
+								<Command.Loading>Loading...</Command.Loading>
+							{:else if searchResults.length === 0}
+								<Command.Empty>
+									<div class="text-muted-foreground py-4 text-center text-sm">
+										{query.trim()
+											? `No ${pluralize(targetType || '')} match "${query}"`
+											: `No ${pluralize(targetType || '')} found`}
 									</div>
-									{#if doc.status === 'published'}
-										<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-green-500" title="Published"
-										></span>
-									{:else if doc.status === 'unpublished'}
-										<span
-											class="bg-muted-foreground/60 h-1.5 w-1.5 shrink-0 rounded-full"
-											title="Unpublished"
-										></span>
-									{:else}
-										<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500" title="Draft"
-										></span>
-									{/if}
-								</Command.Item>
-							{/each}
-						</Command.Group>
-						<Command.Separator />
-						<Command.Group>
-							<Command.Item onSelect={createNewDocument} class="justify-center">
-								<div class="flex items-center gap-1">
-									<PlusIcon class="h-3 w-3" />
-									{creating ? 'Creating...' : `Create new ${targetType}`}
-								</div>
-							</Command.Item>
-						</Command.Group>
-					{/if}
-				</Command.List>
-			</Command.Root>
-		</Popover.Content>
-	</Popover.Root>
+								</Command.Empty>
+							{:else}
+								<Command.Group>
+									{#each searchResults as doc (doc.id)}
+										<Command.Item
+											value={doc.id}
+											onSelect={() => selectDocument(doc)}
+											class="flex items-center justify-between"
+										>
+											<div class="flex min-w-0 flex-1 items-center gap-2">
+												<CheckIcon
+													class={cn('h-4 w-4 shrink-0', refId !== doc.id && 'text-transparent')}
+												/>
+												<span class="flex min-w-0 flex-1 flex-col">
+													<span class="truncate text-sm">{getDocumentTitle(doc)}</span>
+													{#if getDocumentSubtitle(doc)}
+														<span class="text-muted-foreground truncate text-xs"
+															>{getDocumentSubtitle(doc)}</span
+														>
+													{/if}
+												</span>
+											</div>
+											{#if doc._meta?.status === 'published'}
+												<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-green-500" title="Published"
+												></span>
+											{:else if doc._meta?.status === 'unpublished'}
+												<span
+													class="bg-muted-foreground/60 h-1.5 w-1.5 shrink-0 rounded-full"
+													title="Unpublished"
+												></span>
+											{:else}
+												<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500" title="Draft"
+												></span>
+											{/if}
+										</Command.Item>
+									{/each}
+								</Command.Group>
+							{/if}
+						</Command.List>
+					</Command.Root>
+				</div>
+			{/if}
+		</div>
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={createNewDocument}
+			disabled={creating}
+			class="h-9 shrink-0 gap-1"
+		>
+			<PlusIcon class="h-4 w-4" />
+			{creating ? 'Creating...' : 'Create...'}
+		</Button>
+	</div>
 {/if}

package/dist/components/admin/fields/ReferenceField.svelte.d.ts

@@ -1,10 +1,17 @@
 import type { Field } from '../../../types/schemas.js';
+type ReferenceValue = {
+    _type: 'reference';
+    _ref: string;
+    _key?: string;
+};
 interface Props {
     field: Field;
-    value: string | null;
-    onUpdate: (value: string | null) => void;
+    value: ReferenceValue | null;
+    onUpdate: (value: ReferenceValue | null) => void;
     onOpenReference?: (documentId: string, documentType: string) => void;
     readonly?: boolean;
+    onRemove?: () => void;
+    preloadedDoc?: unknown;
 }
 declare const ReferenceField: import("svelte").Component<Props, {}, "">;
 type ReferenceField = ReturnType<typeof ReferenceField>;

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

@@ -1 +1 @@
-{"version":3,"file":"ReferenceField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ReferenceField.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,KAAK,EAAwC,MAAM,wBAAwB,CAAC;AAUzF,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAiRF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ReferenceField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ReferenceField.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,KAAK,EAAwC,MAAM,wBAAwB,CAAC;AAUzF,KAAK,cAAc,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAqUF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/layout/Sidebar.svelte

@@ -49,7 +49,7 @@
 </script>
 
 <ModeWatcher />
-<Toaster />
+<Toaster closeButton />
 <SidebarProvider class="h-screen">
 	<AppSidebar {data} {onSignOut} />
 	<SidebarInset class="flex h-full min-w-0 flex-col">

package/dist/components/layout/sidebar/AppSidebar.svelte

@@ -31,7 +31,8 @@
 				title: 'Content',
 				url: '/admin',
 				icon: undefined,
-				isActive: false
+				isActive: false,
+				exact: true
 			}
 		]
 	);

package/dist/components/layout/sidebar/AppSidebar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/sidebar/AppSidebar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,OAAO,EAKP,MAAM,6BAA6B,CAAC;AAItC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG5C,KAAK,KAAK,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG;IAC7C,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAqDH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AppSidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/sidebar/AppSidebar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,OAAO,EAKP,MAAM,6BAA6B,CAAC;AAItC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG5C,KAAK,KAAK,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG;IAC7C,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAsDH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}