@aphexcms/cms-core 0.1.17 → 0.2.2

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

@@ -0,0 +1,225 @@
+<script lang="ts">
+	import CalendarIcon from '@lucide/svelte/icons/calendar';
+	import { type DateValue, parseDate } from '@internationalized/date';
+	import { Input } from '@aphexcms/ui/shadcn/input';
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Calendar } from '@aphexcms/ui/shadcn/calendar';
+	import * as Popover from '@aphexcms/ui/shadcn/popover';
+	import type { DateTimeField } from '../../../types/schemas';
+	import dayjs from 'dayjs';
+	import customParseFormat from 'dayjs/plugin/customParseFormat';
+	import utc from 'dayjs/plugin/utc';
+
+	// Enable strict parsing and UTC
+	dayjs.extend(customParseFormat);
+	dayjs.extend(utc);
+
+	interface Props {
+		field: DateTimeField;
+		value: string | null; // Always stored as ISO datetime UTC YYYY-MM-DDTHH:mm:ssZ
+		onUpdate: (value: string | 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();
+
+	// Get date and time formats from options or use defaults
+	const dateFormat = $derived(field.options?.dateFormat || 'YYYY-MM-DD');
+	const timeFormat = $derived(field.options?.timeFormat || 'HH:mm');
+	const displayFormat = $derived(`${dateFormat} ${timeFormat}`);
+
+	// Track local input value for display
+	let inputValue = $state('');
+	let timeValue = $state('00:00');
+
+	// Convert stored ISO value to display format
+	// Only update if the formatted value is different to avoid overwriting user input
+	$effect(() => {
+		if (!value || value === '') {
+			if (inputValue !== '') {
+				inputValue = '';
+				timeValue = '00:00';
+			}
+		} else {
+			// Parse the datetime value
+			const datetime = dayjs(value);
+			if (datetime.isValid()) {
+				const formatted = datetime.format(displayFormat);
+				const time = datetime.format('HH:mm');
+				// Only update if different to avoid overwriting user's in-progress typing
+				if (inputValue !== formatted) {
+					inputValue = formatted;
+				}
+				if (timeValue !== time) {
+					timeValue = time;
+				}
+			} else {
+				// Value is not ISO (might be user's in-progress input or invalid)
+				if (inputValue !== value) {
+					inputValue = value;
+				}
+			}
+		}
+	});
+
+	// Convert string value to DateValue for calendar
+	const dateValue = $derived.by(() => {
+		if (!value || value === '') return undefined;
+
+		try {
+			// Parse datetime and extract just the date part
+			const datetime = dayjs(value);
+			if (datetime.isValid()) {
+				return parseDate(datetime.format('YYYY-MM-DD'));
+			}
+		} catch (err) {
+			console.error('Failed to parse datetime:', value, err);
+		}
+		return undefined;
+	});
+
+	// Handle date selection from calendar
+	function handleDateChange(newValue: DateValue | undefined) {
+		if (!newValue) {
+			onUpdate(null);
+		} else {
+			// Combine selected date with current time and convert to UTC
+			const dateStr = newValue.toString(); // YYYY-MM-DD
+			const localDatetime = dayjs(`${dateStr} ${timeValue}`, 'YYYY-MM-DD HH:mm');
+			const utcDatetime = localDatetime.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+			onUpdate(utcDatetime);
+		}
+	}
+
+	// Handle manual input changes
+	function handleInputChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const displayValue = target.value;
+		inputValue = displayValue;
+
+		if (displayValue === '') {
+			onUpdate(null);
+			return;
+		}
+
+		// Parse according to the chosen format (date + time)
+		const parsed = dayjs(displayValue, displayFormat, true);
+
+		if (parsed.isValid()) {
+			// Convert to ISO datetime UTC
+			const utcDatetime = parsed.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+			onUpdate(utcDatetime);
+			// Update time value for picker
+			timeValue = parsed.format('HH:mm');
+		} else {
+			// Still update with the invalid value so autosave triggers
+			// Validation will catch the error
+			onUpdate(displayValue);
+		}
+	}
+
+	// Handle time input changes
+	function handleTimeChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const newTime = target.value; // HH:mm format
+		timeValue = newTime;
+
+		// If we have a date, update the datetime
+		if (value && value !== '') {
+			const datetime = dayjs(value);
+			if (datetime.isValid()) {
+				// Get the local date and combine with new time, then convert to UTC
+				const dateStr = datetime.format('YYYY-MM-DD');
+				const localDatetime = dayjs(`${dateStr} ${newTime}`, 'YYYY-MM-DD HH:mm');
+				const utcDatetime = localDatetime.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+				onUpdate(utcDatetime);
+			}
+		}
+	}
+
+	// Set to current time
+	function setToCurrentTime() {
+		const now = dayjs();
+		timeValue = now.format('HH:mm');
+
+		// If we have a date, update the datetime
+		if (value && value !== '') {
+			const datetime = dayjs(value);
+			if (datetime.isValid()) {
+				// Get the local date and combine with current time, then convert to UTC
+				const dateStr = datetime.format('YYYY-MM-DD');
+				const localDatetime = dayjs(`${dateStr} ${timeValue}`, 'YYYY-MM-DD HH:mm');
+				const utcDatetime = localDatetime.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
+				onUpdate(utcDatetime);
+			}
+		}
+	}
+</script>
+
+<div class="space-y-2">
+	<div class="flex w-full gap-2">
+		<Input
+			id={field.name}
+			type="text"
+			placeholder={displayFormat}
+			value={inputValue}
+			oninput={handleInputChange}
+			onblur={onBlur}
+			onfocus={onFocus}
+			class="flex-1 {validationClasses}"
+			disabled={readonly}
+		/>
+		<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"
+				disabled={readonly}
+			>
+				<CalendarIcon class="h-4 w-4" />
+			</Popover.Trigger>
+			<Popover.Content class="w-auto p-0">
+				<Calendar
+					type="single"
+					value={dateValue}
+					onValueChange={handleDateChange}
+					captionLayout="dropdown"
+				/>
+
+				<!-- Time Picker Section -->
+				<div class="border-border border-t">
+					<div class="flex items-center gap-2 p-3">
+						<div class="flex-1">
+							<Input
+								type="time"
+								value={timeValue}
+								oninput={handleTimeChange}
+								aria-label="Select time"
+								disabled={readonly}
+								class="w-full"
+							/>
+						</div>
+						<Button
+							variant="outline"
+							size="sm"
+							onclick={setToCurrentTime}
+							disabled={readonly}
+							type="button"
+						>
+							Set to now
+						</Button>
+					</div>
+				</div>
+			</Popover.Content>
+		</Popover.Root>
+	</div>
+</div>

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

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

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

@@ -0,0 +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"}

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

@@ -22,6 +22,7 @@
 		fieldPath?: string;
 		readonly?: boolean;
 		compact?: boolean; // Compact mode for arrays
+		organizationId?: string; // Document's organization ID for asset uploads
 	}
 
 	let {
@@ -32,7 +33,8 @@
 		schemaType,
 		fieldPath,
 		readonly = false,
-		compact = false
+		compact = false,
+		organizationId
 	}: Props = $props();
 
 	// Component state
@@ -50,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);
@@ -83,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) {
@@ -193,7 +198,9 @@
 		<!-- 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">
+			<div
+				class="bg-muted flex h-12 w-12 flex-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}
@@ -351,10 +358,10 @@
 	{:else}
 		<!-- Sanity-style upload bar -->
 		<div class="border-border overflow-hidden rounded-md border {validationClasses}">
-			<div class="flex items-center">
+			<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-1 px-4 py-3 transition-colors {readonly
+					class="flex h-14 w-full px-3 py-4 transition-colors lg:flex-1 {readonly
 						? ''
 						: isDragging
 							? 'bg-primary/5'
@@ -374,14 +381,20 @@
 						<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'}
+								{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">
+				<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"
+				>
 					<Button
 						variant="outline"
 						size="sm"

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

@@ -9,6 +9,7 @@ interface Props {
     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;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAiVF,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

@@ -77,8 +77,6 @@
 			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>
+		<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.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,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;AA+DF,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"}

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

@@ -1,10 +1,14 @@
 <script lang="ts">
 	import { Input } from '@aphexcms/ui/shadcn/input';
-	import type { Field } from '../../../types/schemas';
+	import * as Select from '@aphexcms/ui/shadcn/select';
+	import * as RadioGroup from '@aphexcms/ui/shadcn/radio-group';
+	import { Label } from '@aphexcms/ui/shadcn/label';
+	import type { StringField, DependentList } from '../../../types/schemas';
 
 	interface Props {
-		field: Field;
+		field: StringField;
 		value: any;
+		documentData?: Record<string, any>;
 		onUpdate: (value: any) => void;
 		validationClasses?: string;
 		onBlur?: (event: any) => void;
@@ -15,6 +19,7 @@
 	let {
 		field,
 		value,
+		documentData,
 		onUpdate,
 		validationClasses,
 		onBlur,
@@ -22,19 +27,158 @@
 		readonly = false
 	}: Props = $props();
 
+	// Check if list is a dependent list
+	function isDependentList(list: any): list is DependentList {
+		return list && typeof list === 'object' && 'dependsOn' in list && 'options' in list;
+	}
+
+	// Resolve the actual list items (either static or dependent)
+	const resolvedList = $derived(() => {
+		if (!field.list) return [];
+
+		if (Array.isArray(field.list)) {
+			// Static list
+			return field.list;
+		} else if (isDependentList(field.list)) {
+			// Dependent list - get options based on dependsOn field value
+			const dependentValue = documentData?.[field.list.dependsOn];
+			if (!dependentValue) return [];
+			return field.list.options[dependentValue] || [];
+		}
+
+		return [];
+	});
+
+	// Check if this is a dependent field that's missing its dependency
+	const isDependentFieldWithoutValue = $derived(() => {
+		if (!field.list) return false;
+		if (Array.isArray(field.list)) return false;
+		if (isDependentList(field.list)) {
+			const dependentValue = documentData?.[field.list.dependsOn];
+			return !dependentValue;
+		}
+		return false;
+	});
+
+	// Get the name of the field this depends on (for display)
+	const dependsOnFieldName = $derived(() => {
+		if (field.list && isDependentList(field.list)) {
+			return field.list.dependsOn;
+		}
+		return '';
+	});
+
+	// Normalize list items to { title, value } format
+	const listItems = $derived(
+		resolvedList().map((item) =>
+			typeof item === 'string' ? { title: item.toUpperCase(), value: item } : item
+		)
+	);
+
+	const layout = $derived(field.options?.layout || 'dropdown');
+	const direction = $derived(field.options?.direction || 'vertical');
+
+	// For Select component - derive trigger content
+	const selectedItem = $derived(listItems.find((item) => item.value === value));
+	const triggerContent = $derived(selectedItem?.title ?? field.placeholder ?? field.title);
+
 	function handleInputChange(event: Event) {
 		const target = event.target as HTMLInputElement;
 		onUpdate(target.value);
 	}
+
+	function handleSelectChange(newValue: string | undefined) {
+		if (newValue !== undefined) {
+			onUpdate(newValue);
+		}
+	}
+
+	// Check if we should show list UI (dropdown or radio)
+	const hasListOptions = $derived(listItems.length > 0);
+
+	// Auto-reset dependent field value when parent changes and current value is invalid
+	$effect(() => {
+		// Only for dependent fields with options
+		if (!field.list || !isDependentList(field.list)) return;
+
+		const items = listItems; // Track listItems changes
+
+		// If we have a value and options, check if value is valid
+		if (value && items.length > 0) {
+			const isValid = items.some((item) => item.value === value);
+
+			if (!isValid) {
+				// Current value not in new options - reset to first option
+				const newValue = items[0]?.value || '';
+
+				console.log(`🔄 Dependent field "${field.name}" reset: "${value}" → "${newValue}"`);
+				onUpdate(newValue);
+			}
+		}
+	});
 </script>
 
-<Input
-	id={field.name}
-	value={value || ''}
-	placeholder={field.title}
-	oninput={handleInputChange}
-	onblur={onBlur}
-	onfocus={onFocus}
-	class={validationClasses}
-	disabled={readonly}
-/>
+{#if isDependentFieldWithoutValue()}
+	<!-- Show message when dependent field hasn't been selected -->
+	<div class="border-muted-foreground/30 bg-muted/30 rounded-md border border-dashed p-4">
+		<p class="text-muted-foreground text-sm">
+			Please select <span class="font-medium">{dependsOnFieldName()}</span> first
+		</p>
+	</div>
+{:else if hasListOptions}
+	{#if layout === 'radio'}
+		<!-- Radio Button Layout -->
+		<RadioGroup.Root
+			value={value || ''}
+			onValueChange={handleSelectChange}
+			disabled={readonly}
+			class={validationClasses}
+		>
+			<div class={direction === 'horizontal' ? 'flex flex-wrap gap-4' : 'space-y-2'}>
+				{#each listItems as item, index (item.value)}
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value={item.value} id={`${field.name}-${index}`} />
+						<Label for={`${field.name}-${index}`}>{item.title}</Label>
+					</div>
+				{/each}
+			</div>
+		</RadioGroup.Root>
+	{:else}
+		<!-- Dropdown/Select Layout -->
+		<Select.Root
+			type="single"
+			name={field.name}
+			value={value || ''}
+			onValueChange={handleSelectChange}
+			disabled={readonly}
+		>
+			<Select.Trigger class="w-full {validationClasses}">
+				{triggerContent}
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Group>
+					{#if field.title}
+						<Select.Label>{field.title}</Select.Label>
+					{/if}
+					{#each listItems as item (item.value)}
+						<Select.Item value={item.value} label={item.title}>
+							{item.title}
+						</Select.Item>
+					{/each}
+				</Select.Group>
+			</Select.Content>
+		</Select.Root>
+	{/if}
+{:else}
+	<!-- Regular Input -->
+	<Input
+		id={field.name}
+		value={value || ''}
+		placeholder={field.placeholder || field.title}
+		oninput={handleInputChange}
+		onblur={onBlur}
+		onfocus={onFocus}
+		class={validationClasses}
+		disabled={readonly}
+	/>
+{/if}

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

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

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

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Input } from '@aphexcms/ui/shadcn/input';
+	import type { URLField } from '../../../types/schemas';
+
+	interface Props {
+		field: URLField;
+		value: any;
+		onUpdate: (value: any) => void;
+		validationClasses?: string;
+		onBlur?: (event: any) => void;
+		onFocus?: (event: any) => void;
+		readonly?: boolean;
+	}
+
+	let {
+		field,
+		value,
+		onUpdate,
+		validationClasses,
+		onBlur,
+		onFocus,
+		readonly = false
+	}: Props = $props();
+
+	function handleInputChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		onUpdate(target.value);
+	}
+</script>
+
+<Input
+	id={field.name}
+	type="url"
+	value={value || ''}
+	placeholder={field.placeholder || 'https://example.com'}
+	oninput={handleInputChange}
+	onblur={onBlur}
+	onfocus={onFocus}
+	class={validationClasses}
+	disabled={readonly}
+/>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"URLField.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/admin/fields/URLField.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGtD,UAAU,KAAK;IACd,KAAK,EAAE,QAAQ,CAAC;IAChB,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,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/index.d.ts

@@ -1,7 +1,6 @@
 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 DocumentTypesList } from './admin/DocumentTypesList.svelte';
 export { default as SchemaField } from './admin/SchemaField.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,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAChF,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;AAGpE,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -6,7 +6,6 @@ export { default as AdminApp } from './AdminApp.svelte';
 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 DocumentTypesList } from './admin/DocumentTypesList.svelte';
 export { default as SchemaField } from './admin/SchemaField.svelte';
 // Field components
 export * from './fields/index.js';