@aphexcms/cms-core 0.1.0 → 0.1.3

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

@@ -1,284 +0,0 @@
-<script lang="ts">
-	import { Button } from '@aphex/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/src/components/admin/fields/NumberField.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-	import { Input } from '@aphex/ui/shadcn/input';
-	import type { Field } from '../../../types/schemas.js';
-
-	interface Props {
-		field: Field;
-		value: number | null;
-		onUpdate: (value: number | null) => void;
-		validationClasses?: string;
-		onBlur?: (event: any) => void;
-		onFocus?: (event: any) => void;
-		readonly?: boolean;
-	}
-
-	let {
-		field,
-		value,
-		onUpdate,
-		validationClasses,
-		onBlur,
-		onFocus,
-		readonly = false
-	}: Props = $props();
-
-	// Convert value to string for input, handle null/undefined
-	let inputValue = $derived(value?.toString() || '');
-
-	function handleInput(event: Event) {
-		const target = event.target as HTMLInputElement;
-		const newValue = target.value;
-
-		// Convert to number and update
-		if (newValue === '') {
-			onUpdate(null);
-		} else {
-			const numValue = parseFloat(newValue);
-			if (!isNaN(numValue)) {
-				onUpdate(numValue);
-			}
-		}
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		// Allow: backspace, delete, tab, escape, enter
-		if (
-			[8, 9, 27, 13, 46].includes(event.keyCode) ||
-			// Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
-			(event.keyCode === 65 && event.ctrlKey) ||
-			(event.keyCode === 67 && event.ctrlKey) ||
-			(event.keyCode === 86 && event.ctrlKey) ||
-			(event.keyCode === 88 && event.ctrlKey) ||
-			// Allow: home, end, left, right
-			(event.keyCode >= 35 && event.keyCode <= 39)
-		) {
-			return;
-		}
-
-		// Ensure that it's a number or decimal point and stop the keypress
-		if (
-			(event.shiftKey || event.keyCode < 48 || event.keyCode > 57) &&
-			(event.keyCode < 96 || event.keyCode > 105) &&
-			event.keyCode !== 190 &&
-			event.keyCode !== 110
-		) {
-			event.preventDefault();
-		}
-	}
-</script>
-
-<Input
-	id={field.name}
-	type="number"
-	step="any"
-	placeholder={field.description || `Enter ${field.title?.toLowerCase() || 'number'}`}
-	value={inputValue}
-	oninput={handleInput}
-	onkeydown={handleKeydown}
-	onblur={onBlur}
-	onfocus={onFocus}
-	class={validationClasses}
-	disabled={readonly}
-/>

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

@@ -1,260 +0,0 @@
-<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 '@aphex/ui/shadcn/command';
-	import * as Popover from '@aphex/ui/shadcn/popover';
-	import { Button } from '@aphex/ui/shadcn/button';
-	import { cn } from '@aphex/ui/utils';
-	import type { Field, ReferenceField as ReferenceFieldType } from '../../../types/schemas.js';
-	import { documents } from '../../../api/documents.js';
-
-	interface Props {
-		field: Field;
-		value: string | null; // Document ID
-		onUpdate: (value: string | null) => void;
-		onOpenReference?: (documentId: string, documentType: string) => void;
-		readonly?: boolean;
-	}
-
-	let { field, value, onUpdate, onOpenReference, readonly = false }: Props = $props();
-
-	// Cast to reference field type
-	const referenceField = field as ReferenceFieldType;
-	const targetType = referenceField.to?.[0]?.type;
-
-	// State
-	let open = $state(false);
-	let searchResults = $state<any[]>([]);
-	let selectedDocument = $state<any>(null);
-	let loading = $state(false);
-	let creating = $state(false);
-	let triggerRef = $state<HTMLButtonElement>(null!);
-
-	// Load selected document details when value changes
-	$effect(() => {
-		async function loadDocument() {
-			if (value) {
-				try {
-					const doc = await documents.getById(value);
-					if (doc.success) {
-						selectedDocument = doc.data;
-					}
-				} catch (err) {
-					console.error('Failed to load referenced document:', err);
-					selectedDocument = null;
-				}
-			} else {
-				selectedDocument = null;
-			}
-		}
-		loadDocument();
-	});
-
-	// Load documents when dropdown opens
-	$effect(() => {
-		async function loadDocuments() {
-			if (open && targetType) {
-				console.log('[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);
-					if (result.success && result.data) {
-						searchResults = result.data;
-						console.log('[ReferenceField] Search results:', searchResults.length, 'documents');
-					}
-				} catch (err) {
-					console.error('[ReferenceField] Failed to load documents:', err);
-					searchResults = [];
-				} finally {
-					loading = false;
-				}
-			}
-		}
-		loadDocuments();
-	});
-
-	function closeAndFocusTrigger() {
-		open = false;
-		tick().then(() => {
-			triggerRef?.focus();
-		});
-	}
-
-	function selectDocument(doc: any) {
-		if (readonly) return;
-		onUpdate(doc.id);
-		closeAndFocusTrigger();
-	}
-
-	function clearSelection() {
-		if (readonly) return;
-		onUpdate(null);
-		selectedDocument = null;
-	}
-
-	function openReference() {
-		if (selectedDocument && targetType && onOpenReference) {
-			onOpenReference(selectedDocument.id, targetType);
-		}
-	}
-
-	async function createNewDocument() {
-		if (readonly || !targetType) return;
-
-		creating = true;
-		try {
-			const result = await documents.create({
-				type: targetType,
-				draftData: {
-					title: 'Untitled'
-				}
-			});
-
-			if (result.success && result.data) {
-				onUpdate(result.data.id);
-				closeAndFocusTrigger();
-			}
-		} catch (err) {
-			console.error('Failed to create document:', err);
-		} finally {
-			creating = false;
-		}
-	}
-
-	function getDocumentTitle(doc: any): string {
-		// Try to get title from draft data first, then published data
-		const data = doc.draftData || doc.publishedData || {};
-		return data.title || data.name || data.heading || 'Untitled';
-	}
-
-	const selectedLabel = $derived(selectedDocument ? getDocumentTitle(selectedDocument) : null);
-</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>
-		</div>
-		<Button
-			variant="ghost"
-			size="sm"
-			onclick={openReference}
-			class="text-muted-foreground hover:text-foreground h-8 w-8 p-0"
-			title="Edit 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}>
-				{#snippet child({ props })}
-					<Button
-						{...props}
-						variant="outline"
-						class="w-full justify-between"
-						role="combobox"
-						aria-expanded={open}
-					>
-						{selectedLabel || `Select ${targetType}...`}
-						<ChevronsUpDownIcon class="opacity-50" />
-					</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 {targetType}s 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}`}
-									</div>
-								</Command.Item>
-							</Command.Group>
-						{:else}
-							<Command.Empty>
-								No {targetType}s available
-							</Command.Empty>
-						{/if}
-					</Command.List>
-				</Command.Root>
-			</Popover.Content>
-		</Popover.Root>
-	{/if}
-{/if}

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

@@ -1,74 +0,0 @@
-<script lang="ts">
-	import { Input } from '@aphex/ui/shadcn/input';
-	import { Button } from '@aphex/ui/shadcn/button';
-	import type { Field } from '../../../types/schemas.js';
-	import { generateSlug } from '../../../utils/index.js';
-
-	interface Props {
-		field: Field;
-		value: any;
-		documentData?: Record<string, any>;
-		onUpdate: (value: any) => void;
-		validationClasses?: string;
-		onBlur?: (event: any) => void;
-		onFocus?: (event: any) => void;
-		readonly?: boolean;
-	}
-
-	let {
-		field,
-		value,
-		documentData,
-		onUpdate,
-		validationClasses,
-		onBlur,
-		onFocus,
-		readonly = false
-	}: Props = $props();
-
-	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);
-			onUpdate(generatedSlug);
-		}
-	}
-</script>
-
-<div class="space-y-2">
-	<div class="flex gap-2">
-		<Input
-			id={field.name}
-			value={value || ''}
-			placeholder="document-slug"
-			oninput={handleInputChange}
-			onblur={onBlur}
-			onfocus={onFocus}
-			class="flex-1 {validationClasses}"
-			disabled={readonly}
-		/>
-		<Button
-			variant="outline"
-			size="sm"
-			onclick={generateSlugFromTitle}
-			disabled={!documentData?.title || readonly}
-			class="shrink-0"
-		>
-			Generate from Title
-		</Button>
-	</div>
-	{#if documentData?.title}
-		<p class="text-muted-foreground text-xs">
-			Click "Generate from Title" to create slug from: "{documentData.title}"
-		</p>
-	{:else}
-		<p class="text-muted-foreground text-xs">
-			Enter a title first to generate a slug automatically
-		</p>
-	{/if}
-</div>