@aphexcms/cms-core 0.2.2 → 1.0.0

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;AAQtF,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;AAobF,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;AAyBtF,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;AAutBF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -5,6 +5,7 @@
 	import { Calendar } from '@aphexcms/ui/shadcn/calendar';
 	import * as Popover from '@aphexcms/ui/shadcn/popover';
 	import type { DateField } from '../../../types/schemas';
+	import { cmsLogger } from '../../../utils/logger';
 	import dayjs from 'dayjs';
 	import customParseFormat from 'dayjs/plugin/customParseFormat';
 
@@ -70,7 +71,7 @@
 			// Value is stored as ISO date string (YYYY-MM-DD)
 			return parseDate(value);
 		} catch (err) {
-			console.error('Failed to parse date:', value, err);
+			cmsLogger.error('Failed to parse date:', value, err);
 			return undefined;
 		}
 	});
@@ -127,7 +128,7 @@
 		/>
 		<Popover.Root>
 			<Popover.Trigger
-				class="border-input bg-background ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex h-10 w-10 items-center justify-center whitespace-nowrap rounded-md border text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+				class="border-input bg-background ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex h-10 w-10 items-center justify-center rounded-md border text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
 				disabled={readonly}
 			>
 				<CalendarIcon class="h-4 w-4" />

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

@@ -1 +1 @@
-{"version":3,"file":"DateField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/DateField.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAKvD,UAAU,KAAK;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,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;AA0HF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DateField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/DateField.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAMvD,UAAU,KAAK;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,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;AA2HF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -6,6 +6,7 @@
 	import { Calendar } from '@aphexcms/ui/shadcn/calendar';
 	import * as Popover from '@aphexcms/ui/shadcn/popover';
 	import type { DateTimeField } from '../../../types/schemas';
+	import { cmsLogger } from '../../../utils/logger';
 	import dayjs from 'dayjs';
 	import customParseFormat from 'dayjs/plugin/customParseFormat';
 	import utc from 'dayjs/plugin/utc';
@@ -84,7 +85,7 @@
 				return parseDate(datetime.format('YYYY-MM-DD'));
 			}
 		} catch (err) {
-			console.error('Failed to parse datetime:', value, err);
+			cmsLogger.error('Failed to parse datetime:', value, err);
 		}
 		return undefined;
 	});
@@ -182,7 +183,7 @@
 		/>
 		<Popover.Root>
 			<Popover.Trigger
-				class="border-input bg-background ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex h-10 w-10 items-center justify-center whitespace-nowrap rounded-md border text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+				class="border-input bg-background ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex h-10 w-10 items-center justify-center rounded-md border text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
 				disabled={readonly}
 			>
 				<CalendarIcon class="h-4 w-4" />

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/DateTimeField.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAM3D,UAAU,KAAK;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,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;AA6LF,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DateTimeField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/DateTimeField.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAO3D,UAAU,KAAK;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,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;AA8LF,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -1,17 +1,23 @@
 <script lang="ts">
 	import { Button } from '@aphexcms/ui/shadcn/button';
-	import { Trash2, Upload, Image as ImageIcon, FileImage } from 'lucide-svelte';
+	import { Upload, Image as ImageIcon, FileImage, Download, Copy, CircleX } from '@lucide/svelte';
 	import type { ImageValue } from '../../../types/asset';
 	import type { ImageField as ImageFieldType } from '../../../types/schemas';
 	import { assets } from '../../../api/assets';
+	import { toast } from 'svelte-sonner';
 	import {
 		DropdownMenu,
 		DropdownMenuTrigger,
 		DropdownMenuContent,
-		DropdownMenuLabel,
+		DropdownMenuItem,
+		DropdownMenuSeparator,
 		DropdownMenuGroup
 	} from '@aphexcms/ui/shadcn/dropdown-menu';
 	import { Ellipsis } from '@lucide/svelte';
+	import elementEvents from '../../../utils/element-events';
+	import { copyUrlToClipboard, downloadFile } from '../../../utils/asset-actions';
+	import AssetBrowserModal from '../AssetBrowserModal.svelte';
+	import { Input } from '@aphexcms/ui/shadcn/input';
 
 	interface Props {
 		field: ImageFieldType;
@@ -22,6 +28,7 @@
 		fieldPath?: string;
 		readonly?: boolean;
 		compact?: boolean; // Compact mode for arrays
+		arrayItem?: boolean; // Minimal row mode for array DnD — just thumbnail + name, no controls
 		organizationId?: string; // Document's organization ID for asset uploads
 	}
 
@@ -34,6 +41,7 @@
 		fieldPath,
 		readonly = false,
 		compact = false,
+		arrayItem = false,
 		organizationId
 	}: Props = $props();
 
@@ -42,6 +50,7 @@
 	let isUploading = $state(false);
 	let uploadError = $state<string | null>(null);
 	let fileInputRef: HTMLInputElement;
+	let showAssetBrowser = $state(false);
 
 	// Upload file to server
 	async function uploadFile(file: File): Promise<ImageValue | null> {
@@ -156,11 +165,11 @@
 						if (result.success) {
 							assetData = result.data;
 						} else {
-							console.error('Failed to fetch asset details');
+							toast.error('Failed to fetch asset details');
 							assetData = null;
 						}
 					} catch (error) {
-						console.error('Error fetching asset:', error);
+						toast.error('Failed to load image asset');
 						assetData = null;
 					} finally {
 						loadingAsset = false;
@@ -181,6 +190,45 @@
 	const displayName = $derived(
 		assetData?.originalFilename || assetData?.filename || value?.asset?._ref || 'Image'
 	);
+
+	// Alt text — stored on the asset record, not on the ImageValue
+	let altText = $state('');
+	let altSaveTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// Sync altText from asset data when it loads
+	$effect(() => {
+		altText = assetData?.alt || '';
+	});
+
+	function updateAltText(newAlt: string) {
+		altText = newAlt;
+
+		// Debounce the API call
+		if (altSaveTimer) clearTimeout(altSaveTimer);
+		altSaveTimer = setTimeout(async () => {
+			const assetId = value?.asset?._ref;
+			if (!assetId) return;
+			try {
+				await assets.update(assetId, { alt: newAlt || undefined });
+			} catch {
+				toast.error('Failed to save alt text');
+			}
+		}, 800);
+	}
+
+	// Download image
+	function downloadImage() {
+		if (previewUrl) {
+			downloadFile(previewUrl, displayName);
+		}
+	}
+
+	// Copy URL to clipboard
+	async function copyUrl() {
+		if (previewUrl) {
+			await copyUrlToClipboard(previewUrl);
+		}
+	}
 </script>
 
 <!-- Hidden file input -->
@@ -192,7 +240,32 @@
 	onchange={handleFileInputChange}
 />
 
-{#if compact}
+{#if arrayItem}
+	<!-- Minimal row for array items — thumbnail + name only, no controls -->
+	{#if value && value.asset}
+		<div class="flex items-center gap-3">
+			<div
+				class="bg-muted flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded"
+			>
+				{#if loadingAsset}
+					<div class="border-primary h-4 w-4 animate-spin rounded-full border-b-2"></div>
+				{:else if previewUrl}
+					<img
+						src={previewUrl}
+						alt={assetData?.alt || displayName}
+						class="h-full w-full object-cover"
+						loading="lazy"
+					/>
+				{:else}
+					<ImageIcon size={18} class="text-muted-foreground" />
+				{/if}
+			</div>
+			<span class="truncate text-sm">{displayName}</span>
+		</div>
+	{:else}
+		<span class="text-muted-foreground text-sm">No image</span>
+	{/if}
+{:else if compact}
 	<!-- Compact mode for arrays -->
 	{#if value && value.asset}
 		<!-- Compact image row with thumbnail -->
@@ -235,31 +308,29 @@
 					</DropdownMenuTrigger>
 					<DropdownMenuContent align="end">
 						<DropdownMenuGroup>
-							<DropdownMenuLabel>
-								<Button
-									variant="ghost"
-									size="sm"
-									onclick={openFileDialog}
-									disabled={isUploading}
-									class="w-full justify-start"
-								>
-									<Upload size={16} class="mr-2" />
-									Replace
-								</Button>
-							</DropdownMenuLabel>
-							<DropdownMenuLabel>
-								<Button
-									variant="ghost"
-									size="sm"
-									onclick={removeImage}
-									disabled={isUploading}
-									class="text-destructive hover:text-destructive w-full justify-start"
-								>
-									<Trash2 size={16} class="mr-2" />
-									Remove
-								</Button>
-							</DropdownMenuLabel>
+							<DropdownMenuItem onclick={openFileDialog} disabled={isUploading}>
+								<Upload size={16} />
+								Replace
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								onclick={() => {
+									showAssetBrowser = true;
+								}}
+								disabled={isUploading}
+							>
+								<ImageIcon size={16} />
+								Browse media
+							</DropdownMenuItem>
 						</DropdownMenuGroup>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem
+							onclick={removeImage}
+							disabled={isUploading}
+							class="text-destructive focus:text-destructive"
+						>
+							<CircleX size={16} />
+							Clear field
+						</DropdownMenuItem>
 					</DropdownMenuContent>
 				</DropdownMenu>
 			{/if}
@@ -315,111 +386,120 @@
 				{#if !readonly}
 					<div class="absolute inset-2 flex items-start justify-end gap-2">
 						<DropdownMenu>
-							<DropdownMenuTrigger><Ellipsis /></DropdownMenuTrigger>
-							<DropdownMenuContent>
+							<DropdownMenuTrigger>
+								<Button variant="secondary" size="icon" class="h-8 w-8">
+									<Ellipsis size={16} />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end">
 								<DropdownMenuGroup>
-									<DropdownMenuLabel
-										><Button
-											variant="secondary"
-											size="sm"
-											onclick={openFileDialog}
-											disabled={isUploading}
-										>
-											<Upload size={16} class="mr-1" />
-											Replace
-										</Button></DropdownMenuLabel
-									>
-									<DropdownMenuLabel
-										><Button
-											variant="destructive"
-											size="sm"
-											onclick={removeImage}
-											disabled={isUploading}
-										>
-											<Trash2 size={16} class="mr-1" />
-											Remove
-										</Button></DropdownMenuLabel
+									<DropdownMenuItem onclick={openFileDialog} disabled={isUploading}>
+										<Upload size={16} />
+										Upload
+									</DropdownMenuItem>
+									<DropdownMenuItem
+										onclick={() => {
+											showAssetBrowser = true;
+										}}
+										disabled={isUploading}
 									>
+										<ImageIcon size={16} />
+										Browse media
+									</DropdownMenuItem>
 								</DropdownMenuGroup>
+								<DropdownMenuSeparator />
+								<DropdownMenuGroup>
+									<DropdownMenuItem onclick={downloadImage} disabled={!previewUrl}>
+										<Download size={16} />
+										Download
+									</DropdownMenuItem>
+									<DropdownMenuItem onclick={copyUrl} disabled={!previewUrl}>
+										<Copy size={16} />
+										Copy URL
+									</DropdownMenuItem>
+								</DropdownMenuGroup>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem
+									onclick={removeImage}
+									disabled={isUploading}
+									class="text-destructive focus:text-destructive"
+								>
+									<CircleX size={16} />
+									Clear field
+								</DropdownMenuItem>
 							</DropdownMenuContent>
 						</DropdownMenu>
 					</div>
 				{/if}
 			</div>
 
-			<!-- Additional image controls/metadata could go here -->
-			{#if field.fields}
-				<div class="border-border space-y-2 border-t p-3">
-					<!-- Custom fields like caption, alt text, etc. would be rendered here -->
-					<p class="text-muted-foreground text-xs">Custom fields coming soon...</p>
-				</div>
-			{/if}
+			<!-- Alt text field -->
+			<div class="border-border space-y-1.5 border-t p-3">
+				<label class="text-sm font-medium" for="alt-{field.name}">Alt text</label>
+				<p class="text-muted-foreground text-xs">Describe the image for accessibility and SEO</p>
+				<Input
+					id="alt-{field.name}"
+					type="text"
+					placeholder="Describe this image..."
+					value={altText}
+					oninput={(e) => updateAltText(e.currentTarget.value)}
+					disabled={readonly}
+				/>
+			</div>
 		</div>
 	{:else}
 		<!-- Sanity-style upload bar -->
-		<div class="border-border overflow-hidden rounded-md border {validationClasses}">
-			<div class="flex flex-col items-center divide-y lg:flex-row lg:divide-x lg:divide-y-0">
-				<!-- Drag and drop area (left side) -->
-				<div
-					class="flex h-14 w-full px-3 py-4 transition-colors lg:flex-1 {readonly
-						? ''
-						: isDragging
-							? 'bg-primary/5'
-							: 'hover:bg-muted/50'}"
-					ondragover={readonly ? undefined : handleDragOver}
-					ondragleave={readonly ? undefined : handleDragLeave}
-					ondrop={readonly ? undefined : handleDrop}
-					tabindex={readonly ? -1 : 0}
-					role={readonly ? undefined : 'button'}
-				>
-					{#if isUploading}
-						<div class="flex items-center gap-3">
-							<div class="border-primary h-5 w-5 animate-spin rounded-full border-b-2"></div>
-							<span class="text-muted-foreground text-sm">Uploading...</span>
-						</div>
-					{:else}
-						<div class="flex items-center gap-3">
-							<FileImage size={20} class="text-muted-foreground" />
-							<span class="text-muted-foreground text-sm">
-								{readonly
-									? 'No image'
-									: isDragging
-										? 'Drop image here'
-										: 'Drag or paste image here'}
-							</span>
-						</div>
-					{/if}
-				</div>
+		<div
+			class="border-border flex h-10 items-center overflow-hidden rounded-md border transition-colors {validationClasses} {readonly
+				? ''
+				: isDragging
+					? 'bg-primary/5'
+					: ''}"
+			use:elementEvents={{
+				events: [
+					{ name: 'dragover', handler: handleDragOver },
+					{ name: 'drop', handler: handleDrop },
+					{ name: 'dragleave', handler: handleDragLeave }
+				]
+			}}
+		>
+			<!-- Drop zone text -->
+			<div class="flex flex-1 items-center gap-2 px-3">
+				{#if isUploading}
+					<div
+						class="border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent"
+					></div>
+					<span class="text-muted-foreground text-sm">Uploading...</span>
+				{: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'}
+					</span>
+				{/if}
+			</div>
 
-				<!-- Buttons (right side) -->
-				<div
-					class="border-border bg-muted/20 flex h-14 w-full items-center justify-center gap-2 px-3 py-4 lg:w-1/2"
+			<!-- Buttons -->
+			<div class="flex items-center gap-1 pr-2">
+				<button
+					onclick={openFileDialog}
+					disabled={isUploading || readonly}
+					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"
 				>
-					<Button
-						variant="outline"
-						size="sm"
-						onclick={openFileDialog}
-						disabled={isUploading || readonly}
-						type="button"
-					>
-						<Upload size={16} class="mr-1" />
-						Upload
-					</Button>
-
-					<Button
-						variant="outline"
-						size="sm"
-						disabled={isUploading || readonly}
-						type="button"
-						onclick={() => {
-							// TODO: Open asset browser/selector
-							console.log('Open asset selector');
-						}}
-					>
-						<ImageIcon size={16} class="mr-1" />
-						Select
-					</Button>
-				</div>
+					<Upload size={14} />
+					Upload
+				</button>
+				<button
+					disabled={isUploading || readonly}
+					type="button"
+					onclick={() => {
+						showAssetBrowser = true;
+					}}
+					class="text-muted-foreground hover:text-foreground flex items-center gap-1 px-2 py-1 text-sm transition-colors disabled:opacity-50"
+				>
+					<ImageIcon size={14} />
+					Select
+				</button>
 			</div>
 		</div>
 	{/if}
@@ -429,3 +509,20 @@
 {#if uploadError}
 	<p class="text-destructive mt-2 text-sm">{uploadError}</p>
 {/if}
+
+<!-- Asset Browser Modal -->
+<AssetBrowserModal
+	bind:open={showAssetBrowser}
+	onOpenChange={(v) => (showAssetBrowser = v)}
+	assetTypeFilter="image"
+	onSelect={(asset) => {
+		const imageValue: ImageValue = {
+			_type: 'image',
+			asset: {
+				_type: 'reference',
+				_ref: asset.id
+			}
+		};
+		onUpdate(imageValue);
+	}}
+/>

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

@@ -9,6 +9,7 @@ interface Props {
     fieldPath?: string;
     readonly?: boolean;
     compact?: boolean;
+    arrayItem?: boolean;
     organizationId?: string;
 }
 declare const ImageField: import("svelte").Component<Props, {}, "">;

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;AAY1E,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,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAyVF,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;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"}

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

@@ -10,6 +10,8 @@
 	import { cn } from '@aphexcms/ui/utils';
 	import type { Field, ReferenceField as ReferenceFieldType } from '../../../types/schemas';
 	import { documents } from '../../../api/documents';
+	import { toast } from 'svelte-sonner';
+	import { cmsLogger } from '../../../utils/logger';
 
 	interface Props {
 		field: Field;
@@ -43,7 +45,7 @@
 						selectedDocument = doc.data;
 					}
 				} catch (err) {
-					console.error('Failed to load referenced document:', err);
+					toast.error('Failed to load referenced document');
 					selectedDocument = null;
 				}
 			} else {
@@ -57,20 +59,23 @@
 	$effect(() => {
 		async function loadDocuments() {
 			if (open && targetType) {
-				console.log('[ReferenceField] Opening select box, loading documents for type:', targetType);
+				cmsLogger.debug(
+					'[ReferenceField] Opening select box, loading documents for type:',
+					targetType
+				);
 				loading = true;
 				try {
 					const result = await documents.list({
 						docType: targetType,
 						limit: 10
 					});
-					console.log('[ReferenceField] Documents loaded:', result);
+					cmsLogger.debug('[ReferenceField] Documents loaded:', result);
 					if (result.success && result.data) {
 						searchResults = result.data;
-						console.log('[ReferenceField] Search results:', searchResults.length, 'documents');
+						cmsLogger.debug('[ReferenceField] Search results:', searchResults.length, 'documents');
 					}
 				} catch (err) {
-					console.error('[ReferenceField] Failed to load documents:', err);
+					toast.error('Failed to load documents');
 					searchResults = [];
 				} finally {
 					loading = false;
@@ -122,7 +127,7 @@
 				closeAndFocusTrigger();
 			}
 		} catch (err) {
-			console.error('Failed to create document:', err);
+			toast.error('Failed to create document');
 		} finally {
 			creating = false;
 		}

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;AAIzF,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;AAmOF,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;AAMzF,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;AAwOF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -4,6 +4,7 @@
 	import * as RadioGroup from '@aphexcms/ui/shadcn/radio-group';
 	import { Label } from '@aphexcms/ui/shadcn/label';
 	import type { StringField, DependentList } from '../../../types/schemas';
+	import { cmsLogger } from '../../../utils/logger';
 
 	interface Props {
 		field: StringField;
@@ -111,7 +112,7 @@
 				// Current value not in new options - reset to first option
 				const newValue = items[0]?.value || '';
 
-				console.log(`🔄 Dependent field "${field.name}" reset: "${value}" → "${newValue}"`);
+				cmsLogger.debug(`🔄 Dependent field "${field.name}" reset: "${value}" → "${newValue}"`);
 				onUpdate(newValue);
 			}
 		}

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

@@ -1 +1 @@
-{"version":3,"file":"StringField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/StringField.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,wBAAwB,CAAC;AAGxE,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,CAAC;IACnB,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,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;AA8JF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StringField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/StringField.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,wBAAwB,CAAC;AAIxE,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,CAAC;IACnB,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,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;AA+JF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/index.d.ts

@@ -2,5 +2,7 @@ export { default as AdminApp } from './AdminApp.svelte';
 export { default as Sidebar } from './layout/Sidebar.svelte';
 export { default as DocumentEditor } from './admin/DocumentEditor.svelte';
 export { default as SchemaField } from './admin/SchemaField.svelte';
+export { default as MediaBrowser } from './admin/MediaBrowser.svelte';
+export { default as AssetBrowserModal } from './admin/AssetBrowserModal.svelte';
 export * from './fields/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGpE,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGhF,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -7,5 +7,7 @@ export { default as Sidebar } from './layout/Sidebar.svelte';
 // Admin components (will be migrated from your current structure)
 export { default as DocumentEditor } from './admin/DocumentEditor.svelte';
 export { default as SchemaField } from './admin/SchemaField.svelte';
+export { default as MediaBrowser } from './admin/MediaBrowser.svelte';
+export { default as AssetBrowserModal } from './admin/AssetBrowserModal.svelte';
 // Field components
 export * from './fields/index.js';