@aphexcms/cms-core 2.0.9 → 2.0.11

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

@@ -17,6 +17,7 @@
 	import elementEvents from '../../../utils/element-events';
 	import { copyUrlToClipboard, downloadFile } from '../../../utils/asset-actions';
 	import AssetBrowserModal from '../AssetBrowserModal.svelte';
+	import { usePermissions } from '../../../permissions-context.svelte';
 
 	interface Props {
 		field: FileFieldType;
@@ -44,6 +45,12 @@
 		organizationId
 	}: Props = $props();
 
+	// Read-only when forced by caller OR the user lacks asset.upload. Keeps
+	// the `readonly` prop as an explicit override for hosts that want to
+	// neutralise the field regardless of RBAC state.
+	const perms = usePermissions();
+	const isReadOnly = $derived(readonly || !perms.can('asset.upload'));
+
 	let isDragging = $state(false);
 	let isUploading = $state(false);
 	let uploadError = $state<string | null>(null);
@@ -97,7 +104,7 @@
 	}
 
 	async function handleFileSelect(files: FileList | null) {
-		if (readonly || !files || files.length === 0) return;
+		if (isReadOnly || !files || files.length === 0) return;
 
 		const file = files[0]!;
 
@@ -115,37 +122,37 @@
 	}
 
 	function handleDragOver(event: DragEvent) {
-		if (readonly) return;
+		if (isReadOnly) return;
 		event.preventDefault();
 		isDragging = true;
 	}
 
 	function handleDragLeave(event: DragEvent) {
-		if (readonly) return;
+		if (isReadOnly) return;
 		event.preventDefault();
 		isDragging = false;
 	}
 
 	function handleDrop(event: DragEvent) {
-		if (readonly) return;
+		if (isReadOnly) return;
 		event.preventDefault();
 		isDragging = false;
 		handleFileSelect(event.dataTransfer?.files || null);
 	}
 
 	function handleFileInputChange(event: Event) {
-		if (readonly) return;
+		if (isReadOnly) return;
 		const target = event.target as HTMLInputElement;
 		handleFileSelect(target.files);
 	}
 
 	function openFileDialog() {
-		if (readonly) return;
+		if (isReadOnly) return;
 		fileInputRef?.click();
 	}
 
 	function removeFile() {
-		if (readonly) return;
+		if (isReadOnly) return;
 		onUpdate(null);
 		uploadError = null;
 	}
@@ -271,7 +278,7 @@
 				{/if}
 			</div>
 
-			{#if !readonly}
+			{#if !isReadOnly}
 				<DropdownMenu>
 					<DropdownMenuTrigger>
 						<Button variant="ghost" size="sm" class="h-8 w-8 p-0">
@@ -312,7 +319,7 @@
 			variant="outline"
 			class="w-full justify-start"
 			onclick={openFileDialog}
-			disabled={isUploading || readonly}
+			disabled={isUploading || isReadOnly}
 			type="button"
 		>
 			{#if isUploading}
@@ -330,9 +337,7 @@
 		<div class="border-border overflow-hidden rounded-md border {validationClasses}">
 			<!-- File info card -->
 			<div class="flex items-center gap-4 p-4">
-				<div
-					class="bg-muted flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg"
-				>
+				<div class="bg-muted flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg">
 					{#if loadingAsset}
 						<div class="border-primary h-6 w-6 animate-spin rounded-full border-b-2"></div>
 					{:else}
@@ -353,7 +358,7 @@
 				</div>
 
 				<!-- Controls -->
-				{#if !readonly}
+				{#if !isReadOnly}
 					<DropdownMenu>
 						<DropdownMenuTrigger>
 							<Button variant="secondary" size="icon" class="h-8 w-8">
@@ -404,7 +409,7 @@
 	{:else}
 		<!-- Upload bar -->
 		<div
-			class="border-border flex h-10 items-center overflow-hidden rounded-md border transition-colors {validationClasses} {readonly
+			class="border-border flex h-10 items-center overflow-hidden rounded-md border transition-colors {validationClasses} {isReadOnly
 				? ''
 				: isDragging
 					? 'bg-primary/5'
@@ -426,7 +431,7 @@
 				{:else}
 					<FileIcon size={16} class="text-muted-foreground" />
 					<span class="text-muted-foreground text-sm">
-						{readonly ? 'No file' : isDragging ? 'Drop file here' : 'Drag or select a file'}
+						{isReadOnly ? 'No file' : isDragging ? 'Drop file here' : 'Drag or select a file'}
 					</span>
 				{/if}
 			</div>
@@ -434,7 +439,7 @@
 			<div class="flex items-center gap-1 pr-2">
 				<button
 					onclick={openFileDialog}
-					disabled={isUploading || readonly}
+					disabled={isUploading || isReadOnly}
 					type="button"
 					class="text-muted-foreground hover:text-foreground flex items-center gap-1 px-2 py-1 text-sm transition-colors disabled:opacity-50"
 				>
@@ -442,7 +447,7 @@
 					Upload
 				</button>
 				<button
-					disabled={isUploading || readonly}
+					disabled={isUploading || isReadOnly}
 					type="button"
 					onclick={() => {
 						showAssetBrowser = true;

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

@@ -1 +1 @@
-{"version":3,"file":"FileField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/FileField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAiBxE,UAAU,KAAK;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAgaF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FileField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/FileField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAkBxE,UAAU,KAAK;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAuaF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -18,6 +18,7 @@
 	import { copyUrlToClipboard, downloadFile } from '../../../utils/asset-actions';
 	import AssetBrowserModal from '../AssetBrowserModal.svelte';
 	import { Input } from '@aphexcms/ui/shadcn/input';
+	import { usePermissions } from '../../../permissions-context.svelte';
 
 	interface Props {
 		field: ImageFieldType;
@@ -45,6 +46,11 @@
 		organizationId
 	}: Props = $props();
 
+	// Treat the field as read-only when the explicit prop is set OR the user
+	// lacks asset.upload — both paths land the user at the same UX.
+	const perms = usePermissions();
+	const isReadOnly = $derived(readonly || !perms.can('asset.upload'));
+
 	// Component state
 	let isDragging = $state(false);
 	let isUploading = $state(false);
@@ -95,7 +101,7 @@
 
 	// Handle file selection
 	async function handleFileSelect(files: FileList | null) {
-		if (readonly || !files || files.length === 0) return;
+		if (isReadOnly || !files || files.length === 0) return;
 
 		const file = files[0]!;
 
@@ -107,19 +113,19 @@
 
 	// Drag and drop handlers
 	function handleDragOver(event: DragEvent) {
-		if (readonly) return;
+		if (isReadOnly) return;
 		event.preventDefault();
 		isDragging = true;
 	}
 
 	function handleDragLeave(event: DragEvent) {
-		if (readonly) return;
+		if (isReadOnly) return;
 		event.preventDefault();
 		isDragging = false;
 	}
 
 	function handleDrop(event: DragEvent) {
-		if (readonly) return;
+		if (isReadOnly) return;
 		event.preventDefault();
 		isDragging = false;
 		handleFileSelect(event.dataTransfer?.files || null);
@@ -127,19 +133,19 @@
 
 	// File input handlers
 	function handleFileInputChange(event: Event) {
-		if (readonly) return;
+		if (isReadOnly) return;
 		const target = event.target as HTMLInputElement;
 		handleFileSelect(target.files);
 	}
 
 	function openFileDialog() {
-		if (readonly) return;
+		if (isReadOnly) return;
 		fileInputRef?.click();
 	}
 
 	// Remove image
 	function removeImage() {
-		if (readonly) return;
+		if (isReadOnly) return;
 		onUpdate(null);
 		uploadError = null;
 	}
@@ -299,7 +305,7 @@
 			</div>
 
 			<!-- Options menu -->
-			{#if !readonly}
+			{#if !isReadOnly}
 				<DropdownMenu>
 					<DropdownMenuTrigger>
 						<Button variant="ghost" size="sm" class="h-8 w-8 p-0">
@@ -341,7 +347,7 @@
 			variant="outline"
 			class="w-full justify-start"
 			onclick={openFileDialog}
-			disabled={isUploading || readonly}
+			disabled={isUploading || isReadOnly}
 			type="button"
 		>
 			{#if isUploading}
@@ -383,7 +389,7 @@
 				</div>
 
 				<!-- Overlay controls (hidden for read-only) -->
-				{#if !readonly}
+				{#if !isReadOnly}
 					<div class="absolute inset-2 flex items-start justify-end gap-2">
 						<DropdownMenu>
 							<DropdownMenuTrigger>
@@ -443,14 +449,14 @@
 					placeholder="Describe this image..."
 					value={altText}
 					oninput={(e) => updateAltText(e.currentTarget.value)}
-					disabled={readonly}
+					disabled={isReadOnly}
 				/>
 			</div>
 		</div>
 	{:else}
 		<!-- Sanity-style upload bar -->
 		<div
-			class="border-border flex h-10 items-center overflow-hidden rounded-md border transition-colors {validationClasses} {readonly
+			class="border-border flex h-10 items-center overflow-hidden rounded-md border transition-colors {validationClasses} {isReadOnly
 				? ''
 				: isDragging
 					? 'bg-primary/5'
@@ -473,7 +479,7 @@
 				{:else}
 					<FileImage size={16} class="text-muted-foreground" />
 					<span class="text-muted-foreground text-sm">
-						{readonly ? 'No image' : isDragging ? 'Drop image here' : 'Drag or paste image here'}
+						{isReadOnly ? 'No image' : isDragging ? 'Drop image here' : 'Drag or paste image here'}
 					</span>
 				{/if}
 			</div>
@@ -482,7 +488,7 @@
 			<div class="flex items-center gap-1 pr-2">
 				<button
 					onclick={openFileDialog}
-					disabled={isUploading || readonly}
+					disabled={isUploading || isReadOnly}
 					type="button"
 					class="text-muted-foreground hover:text-foreground flex items-center gap-1 px-2 py-1 text-sm transition-colors disabled:opacity-50"
 				>
@@ -490,7 +496,7 @@
 					Upload
 				</button>
 				<button
-					disabled={isUploading || readonly}
+					disabled={isUploading || isReadOnly}
 					type="button"
 					onclick={() => {
 						showAssetBrowser = true;

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

@@ -1 +1 @@
-{"version":3,"file":"ImageField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ImageField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAkB1E,UAAU,KAAK;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAubF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ImageField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ImageField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAmB1E,UAAU,KAAK;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA6bF,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,15 +1,17 @@
 <script lang="ts">
 	import CheckIcon from '@lucide/svelte/icons/check';
-	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
 	import PlusIcon from '@lucide/svelte/icons/plus';
-	import XIcon from '@lucide/svelte/icons/x';
 	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 { cn } from '@aphexcms/ui/utils';
+	import { 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';
@@ -28,6 +30,10 @@
 	const referenceField = field as ReferenceFieldType;
 	const targetType = referenceField.to?.[0]?.type;
 
+	const schemas = getSchemaContext();
+	const targetSchema = $derived(targetType ? getSchemaByName(schemas, targetType) : null);
+	const TargetIcon = $derived(targetSchema?.icon ?? null);
+
 	// State
 	let open = $state(false);
 	let searchResults = $state<any[]>([]);
@@ -143,123 +149,147 @@
 </script>
 
 {#if selectedDocument}
-	<!-- Selected document display -->
-	<div class="border-border bg-muted/30 flex items-center gap-2 rounded-md border p-3">
-		<div class="flex-1">
-			<div class="text-sm font-medium">{getDocumentTitle(selectedDocument)}</div>
-			<div class="text-muted-foreground text-xs">
-				{targetType} • {selectedDocument.status === 'published' ? '🟢' : '🟡'}
-				{selectedDocument.status}
-			</div>
+	<!-- Selected document — row styled like an ArrayField item -->
+	<div
+		class="border-border/50 bg-background hover:bg-muted/50 flex h-10 items-center gap-1 rounded border px-1 transition-colors"
+	>
+		<!-- Type icon -->
+		<div class="text-muted-foreground flex h-8 w-8 shrink-0 items-center justify-center">
+			{#if TargetIcon}
+				<TargetIcon class="h-4 w-4" />
+			{:else}
+				<FileText class="h-4 w-4" />
+			{/if}
 		</div>
-		<Button
-			variant="ghost"
-			size="sm"
+
+		<!-- Title + status dot (clickable to open referenced document) -->
+		<button
+			class="flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left"
 			onclick={openReference}
-			class="text-muted-foreground hover:text-foreground h-8 w-8 p-0"
-			title="Edit referenced document"
+			title="Open referenced document"
 		>
-			<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-				/>
-			</svg>
-		</Button>
-		{#if !readonly}
-			<Button
-				variant="ghost"
-				size="sm"
-				onclick={clearSelection}
-				class="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
-				title="Clear selection"
-			>
-				<XIcon class="h-4 w-4" />
-			</Button>
-		{/if}
-	</div>
-{:else}
-	<!-- Search/select interface -->
-	{#if readonly}
-		<!-- Read-only state: show placeholder -->
-		<div
-			class="border-input bg-muted/50 flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm"
-		>
-			<span class="text-muted-foreground">No reference selected</span>
-		</div>
-	{:else}
-		<Popover.Root bind:open>
-			<Popover.Trigger bind:ref={triggerRef}>
+			<span class="truncate text-sm">{getDocumentTitle(selectedDocument)}</span>
+			{#if selectedDocument.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'}
+				<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}
+		</button>
+
+		<!-- Context menu -->
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
 				{#snippet child({ props })}
-					<Button
+					<button
 						{...props}
-						variant="outline"
-						class="w-full justify-between"
-						role="combobox"
-						aria-expanded={open}
+						class="text-muted-foreground hover:text-foreground flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded transition-colors"
 					>
-						{selectedLabel || `Select ${targetType}...`}
-						<ChevronsUpDownIcon class="opacity-50" />
-					</Button>
+						<Ellipsis 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 if searchResults.length > 0}
-							<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 items-center gap-2">
-											<CheckIcon class={cn('h-4 w-4', value !== doc.id && 'text-transparent')} />
-											<div>
-												<div class="text-sm font-medium">{getDocumentTitle(doc)}</div>
-												<div class="text-muted-foreground text-xs">
-													{doc.status === 'published' ? '🟢' : '🟡'}
-													{doc.status}
-												</div>
-											</div>
-										</div>
-									</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}`}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content align="end">
+				<DropdownMenu.Item onclick={openReference}>
+					<ExternalLink class="mr-2 h-4 w-4" />
+					Open
+				</DropdownMenu.Item>
+				{#if !readonly}
+					<DropdownMenu.Separator />
+					<DropdownMenu.Item
+						class="text-destructive focus:text-destructive"
+						onclick={clearSelection}
+					>
+						<Trash2 class="mr-2 h-4 w-4" />
+						Remove
+					</DropdownMenu.Item>
+				{/if}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</div>
+{:else if readonly}
+	<!-- Read-only empty state -->
+	<div
+		class="border-border/50 bg-muted/30 flex items-center justify-center rounded border border-dashed p-6"
+	>
+		<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 })}
+				<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}
+				>
+					<PlusIcon class="h-4 w-4" />
+					Add {targetType || 'reference'}...
+				</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="truncate text-sm">{getDocumentTitle(doc)}</span>
 									</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>
-							</Command.Group>
-						{:else}
-							<Command.Empty>
-								No {pluralize(targetType || '')} available
-							</Command.Empty>
-						{/if}
-					</Command.List>
-				</Command.Root>
-			</Popover.Content>
-		</Popover.Root>
-	{/if}
+							{/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>
 {/if}

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;AAOzF,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;AAyOF,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":"AAYA,OAAO,KAAK,EAAE,KAAK,EAAwC,MAAM,wBAAwB,CAAC;AASzF,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;AAqQF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { Textarea } from '@aphexcms/ui/shadcn/textarea';
-	import type { Field } from '../../../types/schemas';
+	import type { TextField } from '../../../types/schemas';
 
 	interface Props {
-		field: Field;
+		field: TextField;
 		value: any;
 		onUpdate: (value: any) => void;
 		validationClasses?: string;
@@ -32,9 +32,10 @@
 	id={field.name}
 	value={value || ''}
 	placeholder={field.title}
+	rows={field.rows}
 	oninput={handleInputChange}
 	onblur={onBlur}
 	onfocus={onFocus}
-	class="min-h-[100px] {validationClasses}"
+	class="{field.rows ? 'field-sizing-fixed' : 'min-h-[100px]'} {validationClasses}"
 	disabled={readonly}
 />

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

@@ -1,6 +1,6 @@
-import type { Field } from '../../../types/schemas.js';
+import type { TextField } from '../../../types/schemas.js';
 interface Props {
-    field: Field;
+    field: TextField;
     value: any;
     onUpdate: (value: any) => void;
     validationClasses?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/TextareaField.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAGnD,UAAU,KAAK;IACd,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA0BF,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TextareaField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/TextareaField.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGvD,UAAU,KAAK;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA0BF,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}