@aphexcms/cms-core 0.1.3 → 0.1.4

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

@@ -0,0 +1,266 @@
+<script lang="ts">
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import * as DropdownMenu from '@aphexcms/ui/shadcn/dropdown-menu';
+	import type { ArrayField as ArrayFieldType, SchemaType } from '../../../types/schemas.js';
+	import { getArrayTypes, getSchemaByName } from '../../../schema-utils/utils.js';
+	import { getSchemaContext } from '../../../schema-context.svelte.js';
+	import ObjectModal from '../ObjectModal.svelte';
+
+	interface Props {
+		field: ArrayFieldType;
+		value: any;
+		onUpdate: (value: any) => void;
+		onOpenReference?: (documentId: string, documentType: string) => void;
+		readonly?: boolean;
+	}
+
+	let { field, value, onUpdate, onOpenReference, readonly = false }: Props = $props();
+
+	// Get schemas from context
+	const schemas = getSchemaContext();
+
+	// Get available types for this array field
+	const availableTypes = $derived(getArrayTypes(schemas, field));
+
+	// Modal state
+	let modalOpen = $state(false);
+	let editingIndex = $state<number | null>(null);
+	let editingType = $state<string | null>(null);
+	let editingSchema = $state<SchemaType | null>(null);
+	let editingValue = $state<Record<string, any>>({});
+
+	// Ensure value is always an array
+	const arrayValue = $derived(Array.isArray(value) ? value : []);
+
+	function handleTypeSelected(selectedType: string) {
+		if (readonly || !selectedType) return;
+
+		// Get the schema for the selected type
+		const schema = getSchemaByName(schemas, selectedType);
+		if (!schema) return;
+
+		// Initialize empty object with default values
+		const newItem: Record<string, any> = { _type: selectedType };
+
+		if (schema.fields) {
+			schema.fields.forEach((field) => {
+				if (field.type === 'boolean' && 'initialValue' in field) {
+					newItem[field.name] = field.initialValue;
+				} else {
+					newItem[field.name] = '';
+				}
+			});
+		}
+
+		// Set modal state directly
+		editingIndex = arrayValue.length; // New item index
+		editingType = selectedType;
+		editingSchema = schema;
+		editingValue = newItem;
+		modalOpen = true;
+	}
+
+	function handleEditItem(index: number) {
+		const item = arrayValue[index];
+		if (!item._type) return;
+
+		const schema = getSchemaByName(schemas, item._type);
+		if (!schema) return;
+
+		editingIndex = index;
+		editingType = item._type;
+		editingSchema = schema;
+		editingValue = item;
+		modalOpen = true;
+		console.log('MODAL IS OPEN: ', modalOpen);
+	}
+
+	function handleRemoveItem(index: number) {
+		if (readonly) return;
+		const newArray = arrayValue.filter((_, i) => i !== index);
+		onUpdate(newArray);
+	}
+
+	function handleModalSave(editedData: Record<string, any>) {
+		if (editingIndex === null || !editingType) return;
+
+		// Add the type information to the data
+		const itemData = { ...editedData, _type: editingType };
+
+		const newArray = [...arrayValue];
+
+		if (editingIndex >= newArray.length) {
+			// Adding new item
+			newArray.push(itemData);
+		} else {
+			// Editing existing item
+			newArray[editingIndex] = itemData;
+		}
+
+		onUpdate(newArray);
+
+		// Reset modal state
+		modalOpen = false;
+		editingIndex = null;
+		editingType = null;
+		editingSchema = null;
+		editingValue = {};
+	}
+
+	function handleModalClose() {
+		modalOpen = false;
+		editingIndex = null;
+		editingType = null;
+		editingSchema = null;
+		editingValue = {};
+	}
+
+	// Get the title to display for an item
+	function getItemTitle(item: any): string {
+		if (!item._type) return 'Unknown Item';
+
+		const schema = getSchemaByName(schemas, item._type);
+		if (!schema) return item._type;
+
+		// Try to find a meaningful field to use as title
+		const titleField = item.title || item.heading || item.name || item.label;
+		if (titleField && typeof titleField === 'string' && titleField.trim()) {
+			return titleField;
+		}
+
+		return schema.title || item._type;
+	}
+</script>
+
+<div class="border-border space-y-4 rounded-md border p-4">
+	<h4 class="text-sm font-medium">{field.title}</h4>
+
+	<!-- Array items -->
+	{#if arrayValue.length > 0}
+		<div class="space-y-2">
+			{#each arrayValue as item, index (index)}
+				<div class="border-border/50 space-y-2 rounded border p-3">
+					<div class="flex items-center justify-between">
+						<div class="flex items-center gap-2">
+							<span class="text-muted-foreground text-xs">#{index + 1}</span>
+							<h5 class="text-sm font-medium">{getItemTitle(item)}</h5>
+							{#if item._type}
+								<span class="bg-muted rounded px-2 py-1 text-xs">{item._type}</span>
+							{/if}
+						</div>
+						<div class="flex items-center gap-2">
+							<Button
+								variant="ghost"
+								size="sm"
+								onclick={() => {
+									handleEditItem(index);
+								}}
+								class="h-8 w-8 p-0"
+								title={readonly ? 'View item' : 'Edit item'}
+							>
+								{#if readonly}
+									<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+										/>
+									</svg>
+								{:else}
+									<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+										/>
+									</svg>
+								{/if}
+							</Button>
+
+							{#if !readonly}
+								<Button
+									variant="ghost"
+									size="sm"
+									onclick={() => handleRemoveItem(index)}
+									class="text-destructive hover:text-destructive h-8 w-8 p-0"
+									title="Remove item"
+								>
+									<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+										/>
+									</svg>
+								</Button>
+							{/if}
+						</div>
+					</div>
+
+					<!-- Show a preview of the item content -->
+					<div class="text-muted-foreground pl-6 text-xs">
+						{#if item.title || item.heading}
+							{item.title || item.heading}
+						{:else if item.description}
+							{item.description.substring(0, 100)}{item.description.length > 100 ? '...' : ''}
+						{:else}
+							{readonly ? 'Click view to see details' : 'Click edit to configure this item'}
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Add Item section (hidden for read-only) -->
+	{#if !readonly}
+		<div class="border-border border-t pt-2">
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					{#snippet child({ props })}
+						<Button {...props} variant="outline" class="w-full cursor-pointer">
+							<svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 4v16m8-8H4"
+								/>
+							</svg>
+							Add Item
+						</Button>
+					{/snippet}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content class="w-56">
+					{#each availableTypes as type, index (index)}
+						<DropdownMenu.Item onclick={() => handleTypeSelected(type.name)}>
+							{type.title}
+						</DropdownMenu.Item>
+					{/each}
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+	{/if}
+</div>
+
+<!-- Object editing modal -->
+{#if editingSchema}
+	<ObjectModal
+		open={modalOpen}
+		schema={editingSchema}
+		value={editingValue}
+		onClose={handleModalClose}
+		onSave={handleModalSave}
+		{onOpenReference}
+		{readonly}
+	/>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { ArrayField as ArrayFieldType } from '../../../types/schemas.js';
+interface Props {
+    field: ArrayFieldType;
+    value: any;
+    onUpdate: (value: any) => void;
+    onOpenReference?: (documentId: string, documentType: string) => void;
+    readonly?: boolean;
+}
+declare const ArrayField: import("svelte").Component<Props, {}, "">;
+type ArrayField = ReturnType<typeof ArrayField>;
+export default ArrayField;
+//# sourceMappingURL=ArrayField.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/ArrayField.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAc,MAAM,2BAA2B,CAAC;AAMzF,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;CACnB;AA0NF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Label } from '@aphexcms/ui/shadcn/label';
+	import type { Field } from '../../../types/schemas.js';
+
+	interface Props {
+		field: Field;
+		value: any;
+		onUpdate: (value: any) => void;
+		validationClasses?: string;
+		onBlur?: (event: any) => void;
+		readonly?: boolean;
+	}
+
+	let { field, value, onUpdate, validationClasses, onBlur, readonly = false }: Props = $props();
+
+	function handleBooleanChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		onUpdate(target.checked);
+	}
+</script>
+
+<div class="flex items-center space-x-2">
+	<input
+		id={field.name}
+		type="checkbox"
+		checked={value || false}
+		onchange={handleBooleanChange}
+		onblur={onBlur}
+		class="border-input h-4 w-4 rounded border {validationClasses}"
+		disabled={readonly}
+	/>
+	<Label for={field.name} class="text-sm font-normal">
+		{field.title}
+	</Label>
+</div>

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

@@ -0,0 +1,13 @@
+import type { Field } from '../../../types/schemas.js';
+interface Props {
+    field: Field;
+    value: any;
+    onUpdate: (value: any) => void;
+    validationClasses?: string;
+    onBlur?: (event: any) => void;
+    readonly?: boolean;
+}
+declare const BooleanField: import("svelte").Component<Props, {}, "">;
+type BooleanField = ReturnType<typeof BooleanField>;
+export default BooleanField;
+//# sourceMappingURL=BooleanField.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/BooleanField.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGtD,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,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAuBF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,284 @@
+<script lang="ts">
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Trash2, Upload, Image as ImageIcon, FileImage } from 'lucide-svelte';
+	import type { ImageValue } from '../../../types/asset.js';
+	import type { ImageField as ImageFieldType } from '../../../types/schemas.js';
+	import { assets } from '../../../api/assets';
+
+	interface Props {
+		field: ImageFieldType;
+		value: ImageValue | null;
+		validationClasses?: string;
+		onUpdate: (value: ImageValue | null) => void;
+		schemaType?: string;
+		fieldPath?: string;
+		readonly?: boolean;
+	}
+
+	let {
+		field,
+		value,
+		onUpdate,
+		validationClasses,
+		schemaType,
+		fieldPath,
+		readonly = false
+	}: Props = $props();
+
+	// Component state
+	let isDragging = $state(false);
+	let isUploading = $state(false);
+	let uploadError = $state<string | null>(null);
+	let fileInputRef: HTMLInputElement;
+
+	// Upload file to server
+	async function uploadFile(file: File): Promise<ImageValue | null> {
+		isUploading = true;
+		uploadError = null;
+
+		try {
+			const formData = new FormData();
+			formData.append('file', file);
+
+			// Add field metadata for privacy checking
+			if (schemaType) formData.append('schemaType', schemaType);
+			if (fieldPath) formData.append('fieldPath', fieldPath);
+
+			const result = await assets.upload(formData);
+
+			if (!result.success) {
+				throw new Error(result.error || 'Upload failed');
+			}
+
+			// Extract asset from response
+			const asset = result.data;
+
+			// Return Sanity-style image value
+			return {
+				_type: 'image',
+				asset: {
+					_type: 'reference',
+					_ref: asset!.id
+				}
+			};
+		} catch (error) {
+			uploadError = error instanceof Error ? error.message : 'Upload failed';
+			return null;
+		} finally {
+			isUploading = false;
+		}
+	}
+
+	// Handle file selection
+	async function handleFileSelect(files: FileList | null) {
+		if (readonly || !files || files.length === 0) return;
+
+		const file = files[0];
+
+		const imageValue = await uploadFile(file);
+		if (imageValue) {
+			onUpdate(imageValue);
+		}
+	}
+
+	// Drag and drop handlers
+	function handleDragOver(event: DragEvent) {
+		if (readonly) return;
+		event.preventDefault();
+		isDragging = true;
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		if (readonly) return;
+		event.preventDefault();
+		isDragging = false;
+	}
+
+	function handleDrop(event: DragEvent) {
+		if (readonly) return;
+		event.preventDefault();
+		isDragging = false;
+		handleFileSelect(event.dataTransfer?.files || null);
+	}
+
+	// File input handlers
+	function handleFileInputChange(event: Event) {
+		if (readonly) return;
+		const target = event.target as HTMLInputElement;
+		handleFileSelect(target.files);
+	}
+
+	function openFileDialog() {
+		if (readonly) return;
+		fileInputRef?.click();
+	}
+
+	// Remove image
+	function removeImage() {
+		if (readonly) return;
+		onUpdate(null);
+		uploadError = null;
+	}
+
+	// Asset data state
+	let assetData = $state<any>(null);
+	let loadingAsset = $state(false);
+
+	// Fetch asset details when asset reference changes
+	$effect(() => {
+		async function loadAsset() {
+			if (value?.asset?._ref) {
+				loadingAsset = true;
+				try {
+					const result = await assets.getById(value.asset._ref);
+					if (result.success) {
+						assetData = result.data;
+					} else {
+						console.error('Failed to fetch asset details');
+						assetData = null;
+					}
+				} catch (error) {
+					console.error('Error fetching asset:', error);
+					assetData = null;
+				} finally {
+					loadingAsset = false;
+				}
+			} else {
+				assetData = null;
+			}
+		}
+		loadAsset();
+	});
+
+	// Get asset URL for preview
+	const previewUrl = $derived(assetData?.url || null);
+</script>
+
+<!-- Hidden file input -->
+<input
+	bind:this={fileInputRef}
+	type="file"
+	accept={field.accept || 'image/*'}
+	style="display: none"
+	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 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-0 flex items-center justify-center gap-2 bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
+				>
+					<Button variant="secondary" size="sm" onclick={openFileDialog} disabled={isUploading}>
+						<Upload size={16} class="mr-1" />
+						Replace
+					</Button>
+					<Button variant="destructive" size="sm" onclick={removeImage} disabled={isUploading}>
+						<Trash2 size={16} class="mr-1" />
+						Remove
+					</Button>
+				</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}
+	</div>
+{: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>
+					</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"
+				>
+					<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>
+{/if}
+
+<!-- Error display -->
+{#if uploadError}
+	<p class="text-destructive mt-2 text-sm">{uploadError}</p>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { ImageValue } from '../../../types/asset.js';
+import type { ImageField as ImageFieldType } from '../../../types/schemas.js';
+interface Props {
+    field: ImageFieldType;
+    value: ImageValue | null;
+    validationClasses?: string;
+    onUpdate: (value: ImageValue | null) => void;
+    schemaType?: string;
+    fieldPath?: string;
+    readonly?: boolean;
+}
+declare const ImageField: import("svelte").Component<Props, {}, "">;
+type ImageField = ReturnType<typeof ImageField>;
+export default ImageField;
+//# sourceMappingURL=ImageField.svelte.d.ts.map

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

@@ -0,0 +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,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI7E,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;AAuPF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}