@aphexcms/cms-core 0.1.16 → 0.2.1

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

@@ -21,6 +21,8 @@
 		schemaType?: string;
 		fieldPath?: string;
 		readonly?: boolean;
+		compact?: boolean; // Compact mode for arrays
+		organizationId?: string; // Document's organization ID for asset uploads
 	}
 
 	let {
@@ -30,7 +32,9 @@
 		validationClasses,
 		schemaType,
 		fieldPath,
-		readonly = false
+		readonly = false,
+		compact = false,
+		organizationId
 	}: Props = $props();
 
 	// Component state
@@ -48,6 +52,9 @@
 			const formData = new FormData();
 			formData.append('file', file);
 
+			// Add document's organization ID so asset belongs to document's org
+			if (organizationId) formData.append('organizationId', organizationId);
+
 			// Add field metadata for privacy checking
 			if (schemaType) formData.append('schemaType', schemaType);
 			if (fieldPath) formData.append('fieldPath', fieldPath);
@@ -81,7 +88,7 @@
 	async function handleFileSelect(files: FileList | null) {
 		if (readonly || !files || files.length === 0) return;
 
-		const file = files[0];
+		const file = files[0]!;
 
 		const imageValue = await uploadFile(file);
 		if (imageValue) {
@@ -169,6 +176,11 @@
 
 	// Get asset URL for preview
 	const previewUrl = $derived(assetData?.url || null);
+
+	// Get display name for the image
+	const displayName = $derived(
+		assetData?.originalFilename || assetData?.filename || value?.asset?._ref || 'Image'
+	);
 </script>
 
 <!-- Hidden file input -->
@@ -180,138 +192,237 @@
 	onchange={handleFileInputChange}
 />
 
-{#if value && value.asset}
-	<!-- Image preview with controls -->
-	<div class="border-border overflow-hidden rounded-md border {validationClasses}">
-		<div class="group relative">
-			<!-- Image preview (Sanity-style aspect ratio ~2.75:1) -->
-			<div class="bg-muted flex items-center justify-center" style="aspect-ratio: 2.75 / 1;">
+{#if compact}
+	<!-- Compact mode for arrays -->
+	{#if value && value.asset}
+		<!-- Compact image row with thumbnail -->
+		<div class="border-border flex items-center gap-3 rounded-md border p-2 {validationClasses}">
+			<!-- Thumbnail -->
+			<div
+				class="bg-muted flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded"
+			>
 				{#if loadingAsset}
-					<div class="text-muted-foreground flex flex-col items-center gap-2">
-						<div class="border-primary h-8 w-8 animate-spin rounded-full border-b-2"></div>
-						<span class="text-sm">Loading image...</span>
-					</div>
+					<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 || 'Uploaded image'}
-						class="h-full w-full object-contain"
+						alt={assetData?.alt || displayName}
+						class="h-full w-full object-cover"
 						loading="lazy"
 					/>
 				{:else}
-					<div class="text-muted-foreground flex flex-col items-center gap-2">
-						<ImageIcon size={32} />
-						<span class="text-sm">Image: {value.asset._ref}</span>
-						<span class="text-xs">Failed to load preview</span>
-					</div>
+					<ImageIcon size={20} class="text-muted-foreground" />
 				{/if}
 			</div>
 
-			<!-- Overlay controls (hidden for read-only) -->
+			<!-- File name -->
+			<div class="flex-1 overflow-hidden">
+				<p class="truncate text-sm font-medium">{displayName}</p>
+				{#if assetData?.size}
+					<p class="text-muted-foreground text-xs">
+						{(assetData.size / 1024).toFixed(1)} KB
+					</p>
+				{/if}
+			</div>
+
+			<!-- Options menu -->
 			{#if !readonly}
-				<div class="absolute inset-2 flex items-start justify-end gap-2">
-					<DropdownMenu>
-						<DropdownMenuTrigger><Ellipsis /></DropdownMenuTrigger>
-						<DropdownMenuContent>
-							<DropdownMenuGroup>
-								<DropdownMenuLabel
-									><Button
-										variant="secondary"
-										size="sm"
-										onclick={openFileDialog}
-										disabled={isUploading}
-									>
-										<Upload size={16} class="mr-1" />
-										Replace
-									</Button></DropdownMenuLabel
+				<DropdownMenu>
+					<DropdownMenuTrigger>
+						<Button variant="ghost" size="sm" class="h-8 w-8 p-0">
+							<Ellipsis size={16} />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuGroup>
+							<DropdownMenuLabel>
+								<Button
+									variant="ghost"
+									size="sm"
+									onclick={openFileDialog}
+									disabled={isUploading}
+									class="w-full justify-start"
 								>
-								<DropdownMenuLabel
-									><Button
-										variant="destructive"
-										size="sm"
-										onclick={removeImage}
-										disabled={isUploading}
-									>
-										<Trash2 size={16} class="mr-1" />
-										Remove
-									</Button></DropdownMenuLabel
+									<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"
 								>
-							</DropdownMenuGroup>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				</div>
+									<Trash2 size={16} class="mr-2" />
+									Remove
+								</Button>
+							</DropdownMenuLabel>
+						</DropdownMenuGroup>
+					</DropdownMenuContent>
+				</DropdownMenu>
 			{/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}
-	</div>
+	{:else}
+		<!-- Compact upload button -->
+		<Button
+			variant="outline"
+			class="w-full justify-start"
+			onclick={openFileDialog}
+			disabled={isUploading || readonly}
+			type="button"
+		>
+			{#if isUploading}
+				<div class="border-primary mr-2 h-4 w-4 animate-spin rounded-full border-b-2"></div>
+				Uploading...
+			{:else}
+				<Upload size={16} class="mr-2" />
+				Upload Image
+			{/if}
+		</Button>
+	{/if}
 {:else}
-	<!-- Sanity-style upload bar -->
-	<div class="border-border overflow-hidden rounded-md border {validationClasses}">
-		<div class="flex items-center">
-			<!-- Drag and drop area (left side) -->
-			<div
-				class="flex-1 px-4 py-3 transition-colors {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>
+	<!-- Full mode (original) -->
+	{#if value && value.asset}
+		<!-- Image preview with controls -->
+		<div class="border-border overflow-hidden rounded-md border {validationClasses}">
+			<div class="group relative">
+				<!-- Image preview (Sanity-style aspect ratio ~2.75:1) -->
+				<div class="bg-muted flex items-center justify-center" style="aspect-ratio: 2.75 / 1;">
+					{#if loadingAsset}
+						<div class="text-muted-foreground flex flex-col items-center gap-2">
+							<div class="border-primary h-8 w-8 animate-spin rounded-full border-b-2"></div>
+							<span class="text-sm">Loading image...</span>
+						</div>
+					{:else if previewUrl}
+						<img
+							src={previewUrl}
+							alt={assetData?.alt || 'Uploaded image'}
+							class="h-full w-full object-contain"
+							loading="lazy"
+						/>
+					{:else}
+						<div class="text-muted-foreground flex flex-col items-center gap-2">
+							<ImageIcon size={32} />
+							<span class="text-sm">Image: {value.asset._ref}</span>
+							<span class="text-xs">Failed to load preview</span>
+						</div>
+					{/if}
+				</div>
+
+				<!-- Overlay controls (hidden for read-only) -->
+				{#if !readonly}
+					<div class="absolute inset-2 flex items-start justify-end gap-2">
+						<DropdownMenu>
+							<DropdownMenuTrigger><Ellipsis /></DropdownMenuTrigger>
+							<DropdownMenuContent>
+								<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
+									>
+								</DropdownMenuGroup>
+							</DropdownMenuContent>
+						</DropdownMenu>
 					</div>
 				{/if}
 			</div>
 
-			<!-- Buttons (right side) -->
-			<div class="border-border bg-muted/20 flex items-center gap-2 border-l px-3 py-2">
-				<Button
-					variant="outline"
-					size="sm"
-					onclick={openFileDialog}
-					disabled={isUploading || readonly}
-					type="button"
+			<!-- 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}
+		</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'}
 				>
-					<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');
-					}}
+					{#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>
+
+				<!-- 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"
 				>
-					<ImageIcon size={16} class="mr-1" />
-					Select
-				</Button>
+					<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>
 			</div>
 		</div>
-	</div>
+	{/if}
 {/if}
 
 <!-- Error display -->

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

@@ -8,6 +8,8 @@ interface Props {
     schemaType?: string;
     fieldPath?: string;
     readonly?: boolean;
+    compact?: boolean;
+    organizationId?: string;
 }
 declare const ImageField: import("svelte").Component<Props, {}, "">;
 type ImageField = ReturnType<typeof ImageField>;

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;CACnB;AAyQF,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;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"}

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

@@ -112,7 +112,7 @@
 		try {
 			const result = await documents.create({
 				type: targetType,
-				draftData: {
+				data: {
 					title: 'Untitled'
 				}
 			});

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

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { Input } from '@aphexcms/ui/shadcn/input';
 	import { Button } from '@aphexcms/ui/shadcn/button';
-	import type { Field } from '../../../types/schemas';
+	import type { SlugField } from '../../../types/schemas';
 	import { generateSlug } from '../../../utils/index';
 
 	interface Props {
-		field: Field;
+		field: SlugField;
 		value: any;
 		documentData?: Record<string, any>;
 		onUpdate: (value: any) => void;
@@ -26,15 +26,21 @@
 		readonly = false
 	}: Props = $props();
 
+	// Get the source field name (default to 'title' for backwards compatibility)
+	const sourceField = $derived(field.source || 'title');
+
+	// Get the source value from document data
+	const sourceValue = $derived(documentData?.[sourceField]);
+
 	function handleInputChange(event: Event) {
 		const target = event.target as HTMLInputElement;
 		onUpdate(target.value);
 	}
 
-	// Generate slug from title
-	function generateSlugFromTitle() {
-		if (documentData?.title) {
-			const generatedSlug = generateSlug(documentData.title);
+	// Generate slug from source field
+	function generateSlugFromSource() {
+		if (sourceValue && typeof sourceValue === 'string') {
+			const generatedSlug = generateSlug(sourceValue);
 			onUpdate(generatedSlug);
 		}
 	}
@@ -55,20 +61,22 @@
 		<Button
 			variant="outline"
 			size="sm"
-			onclick={generateSlugFromTitle}
-			disabled={!documentData?.title || readonly}
+			onclick={generateSlugFromSource}
+			disabled={!sourceValue || readonly}
 			class="shrink-0"
 		>
-			Generate from Title
+			Generate
 		</Button>
 	</div>
-	{#if documentData?.title}
+	{#if sourceValue}
 		<p class="text-muted-foreground text-xs">
-			Click "Generate from Title" to create slug from: "{documentData.title}"
+			Click "Generate" to create slug from {sourceField}: "{sourceValue}"
 		</p>
-	{:else}
+	{:else if field.source}
 		<p class="text-muted-foreground text-xs">
-			Enter a title first to generate a slug automatically
+			Enter a {sourceField} first to generate a slug automatically
 		</p>
+	{:else}
+		<p class="text-muted-foreground text-xs">Click "Generate" or enter a custom slug</p>
 	{/if}
 </div>

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SlugField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/SlugField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAInD,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,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;AAqDF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SlugField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/SlugField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAIvD,UAAU,KAAK;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,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;AA6DF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}