@aphexcms/cms-core 0.1.17 → 0.2.2

package/dist/components/admin/ObjectModal.svelte

@@ -3,6 +3,7 @@
 	import * as Card from '@aphexcms/ui/shadcn/card';
 	import type { SchemaType } from 'src/types/schemas.js';
 	import SchemaField from './SchemaField.svelte';
+	import { getDefaultValueForFieldType } from '../../utils/field-defaults';
 
 	interface Props {
 		open: boolean;
@@ -13,6 +14,7 @@
 		onUpdate?: (value: Record<string, any>) => void; // For real-time updates
 		onOpenReference?: (documentId: string, documentType: string) => void;
 		readonly?: boolean;
+		organizationId?: string; // For asset uploads to org-specific storage
 	}
 
 	// TODO: add onUpdate to auto save
@@ -24,7 +26,8 @@
 		onSave,
 		onUpdate,
 		onOpenReference,
-		readonly = false
+		readonly = false,
+		organizationId
 	}: Props = $props();
 
 	// Initialize editing data with defaults and existing values
@@ -33,10 +36,17 @@
 
 		if (schema?.fields) {
 			schema.fields.forEach((field) => {
-				if (field.type === 'boolean' && 'initialValue' in field) {
-					initialData[field.name] = field.initialValue;
+				if ('initialValue' in field && field.initialValue !== undefined) {
+					// Only use literal initialValue (skip functions to keep this synchronous)
+					if (typeof field.initialValue !== 'function') {
+						initialData[field.name] = field.initialValue;
+					} else {
+						// Function-based initialValues are skipped for nested items
+						// They will use field type defaults instead
+						initialData[field.name] = getDefaultValueForFieldType(field.type);
+					}
 				} else {
-					initialData[field.name] = '';
+					initialData[field.name] = getDefaultValueForFieldType(field.type);
 				}
 			});
 		}
@@ -116,6 +126,7 @@
 								}}
 								{onOpenReference}
 								{readonly}
+								{organizationId}
 							/>
 						{/each}
 					{/if}

package/dist/components/admin/ObjectModal.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     onUpdate?: (value: Record<string, any>) => void;
     onOpenReference?: (documentId: string, documentType: string) => void;
     readonly?: boolean;
+    organizationId?: string;
 }
 declare const ObjectModal: import("svelte").Component<Props, {}, "">;
 type ObjectModal = ReturnType<typeof ObjectModal>;

package/dist/components/admin/ObjectModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/ObjectModal.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAItD,UAAU,KAAK;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA+GF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ObjectModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/ObjectModal.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAKtD,UAAU,KAAK;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,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;AAwHF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/admin/SchemaField.svelte

@@ -2,22 +2,33 @@
 	import { Label } from '@aphexcms/ui/shadcn/label';
 	import { Badge } from '@aphexcms/ui/shadcn/badge';
 	import * as Alert from '@aphexcms/ui/shadcn/alert';
-	import type { Field } from 'src/types/schemas.js';
+	import type {
+		Field,
+		DateField as DateFieldType,
+		DateTimeField as DateTimeFieldType
+	} from 'src/types/schemas.js';
 	import {
 		isFieldRequired,
 		validateField,
 		getValidationClasses,
 		type ValidationError
 	} from '../../field-validation/utils';
+	import {
+		convertDateToUserFormat,
+		convertDateTimeToUserFormat
+	} from '../../field-validation/date-utils';
 
 	// Import individual field components
 	import StringField from './fields/StringField.svelte';
 	import SlugField from './fields/SlugField.svelte';
+	import URLField from './fields/URLField.svelte';
 	import TextareaField from './fields/TextareaField.svelte';
 	import NumberField from './fields/NumberField.svelte';
 	import BooleanField from './fields/BooleanField.svelte';
 	import ImageField from './fields/ImageField.svelte';
 	import ArrayField from './fields/ArrayField.svelte';
+	import DateField from './fields/DateField.svelte';
+	import DateTimeField from './fields/DateTimeField.svelte';
 	import ReferenceField from './fields/ReferenceField.svelte';
 	import SchemaField from './SchemaField.svelte';
 
@@ -31,6 +42,7 @@
 		schemaType?: string; // Document type
 		parentPath?: string; // Parent field path for nested fields
 		readonly?: boolean; // Read-only mode for viewers
+		organizationId?: string; // Document's organization ID for asset uploads
 	}
 
 	let {
@@ -42,7 +54,8 @@
 		doValidation,
 		schemaType,
 		parentPath,
-		readonly = false
+		readonly = false,
+		organizationId
 	}: Props = $props();
 
 	// Build full field path
@@ -54,9 +67,47 @@
 	// Real-time validation for wrapper display
 	export async function performValidation(currentValue: any, context: any = {}) {
 		validationErrors = []; // Clear previous errors
-		const result = await validateField(field, currentValue, context);
+
+		console.log(`[SchemaField.performValidation] Field "${field.name}" type="${field.type}"`, {
+			currentValue,
+			context
+		});
+
+		// Convert date/datetime values from ISO to user format for validation
+		let valueForValidation = currentValue;
+		if (field.type === 'date' && currentValue && typeof currentValue === 'string') {
+			const dateField = field as DateFieldType;
+			const userFormat = dateField.options?.dateFormat || 'YYYY-MM-DD';
+			console.log(`[SchemaField.performValidation] Converting DATE field "${field.name}"`, {
+				currentValue,
+				userFormat
+			});
+			valueForValidation = convertDateToUserFormat(currentValue, userFormat);
+			console.log(`[SchemaField.performValidation] DATE converted`, {
+				valueForValidation
+			});
+		} else if (field.type === 'datetime' && currentValue && typeof currentValue === 'string') {
+			const dateTimeField = field as DateTimeFieldType;
+			const dateFormat = dateTimeField.options?.dateFormat || 'YYYY-MM-DD';
+			const timeFormat = dateTimeField.options?.timeFormat || 'HH:mm';
+			console.log(`[SchemaField.performValidation] Converting DATETIME field "${field.name}"`, {
+				currentValue,
+				dateFormat,
+				timeFormat
+			});
+			valueForValidation = convertDateTimeToUserFormat(currentValue, dateFormat, timeFormat);
+			console.log(`[SchemaField.performValidation] DATETIME converted`, {
+				valueForValidation
+			});
+		}
+
+		const result = await validateField(field, valueForValidation, context);
+		console.log(`[SchemaField.performValidation] Validation result for "${field.name}"`, {
+			errors: result.errors
+		});
 		validationErrors = result.errors;
 	}
+
 	// Computed values
 	const hasErrors = $derived(validationErrors.filter((e) => e.level === 'error').length > 0);
 	const validationClasses = $derived(getValidationClasses(hasErrors));
@@ -109,15 +160,21 @@
 
 	<!-- Field type routing to individual components -->
 	{#if field.type === 'string'}
-		<StringField {field} {value} {onUpdate} {validationClasses} {readonly} />
+		<StringField {field} {value} {documentData} {onUpdate} {validationClasses} {readonly} />
 	{:else if field.type === 'text'}
 		<TextareaField {field} {value} {onUpdate} {validationClasses} {readonly} />
 	{:else if field.type === 'slug'}
 		<SlugField {field} {value} {documentData} {onUpdate} {validationClasses} {readonly} />
+	{:else if field.type === 'url'}
+		<URLField {field} {value} {onUpdate} {validationClasses} {readonly} />
 	{:else if field.type === 'number'}
 		<NumberField {field} {value} {onUpdate} {validationClasses} {readonly} />
 	{:else if field.type === 'boolean'}
 		<BooleanField {field} {value} {onUpdate} {validationClasses} {readonly} />
+	{:else if field.type === 'date'}
+		<DateField {field} {value} {onUpdate} {validationClasses} {readonly} />
+	{:else if field.type === 'datetime'}
+		<DateTimeField {field} {value} {onUpdate} {validationClasses} {readonly} />
 
 		<!-- Image Field -->
 	{:else if field.type === 'image'}
@@ -129,6 +186,7 @@
 			{schemaType}
 			{fieldPath}
 			{readonly}
+			{organizationId}
 		/>
 
 		<!-- Object Field -->
@@ -145,13 +203,14 @@
 					{schemaType}
 					parentPath={fieldPath}
 					{readonly}
+					{organizationId}
 				/>
 			{/each}
 		</div>
 
 		<!-- Array Field -->
 	{:else if field.type === 'array' && field.of}
-		<ArrayField {field} {value} {onUpdate} {onOpenReference} {readonly} />
+		<ArrayField {field} {value} {onUpdate} {onOpenReference} {readonly} {organizationId} />
 
 		<!-- Reference Field -->
 	{:else if field.type === 'reference' && field.to}

package/dist/components/admin/SchemaField.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     schemaType?: string;
     parentPath?: string;
     readonly?: boolean;
+    organizationId?: string;
 }
 declare const SchemaField: import("svelte").Component<Props, {
     performValidation: (currentValue: any, context?: any) => Promise<void>;

package/dist/components/admin/SchemaField.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SchemaField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/SchemaField.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAgBlD,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAG9C,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,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA4IF,QAAA,MAAM,WAAW;sCArGgC,GAAG,YAAW,GAAG;MAqGT,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SchemaField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/admin/SchemaField.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,KAAK,EAGL,MAAM,sBAAsB,CAAC;AAuB/B,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAG9C,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,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AA6LF,QAAA,MAAM,WAAW;sCAjJgC,GAAG,YAAW,GAAG;MAiJT,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -10,6 +10,7 @@
 	import { getSchemaContext } from '../../../schema-context.svelte';
 	import ObjectModal from '../ObjectModal.svelte';
 	import ImageField from './ImageField.svelte';
+	import { getDefaultValueForFieldType } from '../../../utils/field-defaults';
 
 	interface Props {
 		field: ArrayFieldType;
@@ -17,17 +18,51 @@
 		onUpdate: (value: any) => void;
 		onOpenReference?: (documentId: string, documentType: string) => void;
 		readonly?: boolean;
+		organizationId?: string; // For asset uploads to org-specific storage
 	}
 
-	let { field, value, onUpdate, onOpenReference, readonly = false }: Props = $props();
+	let {
+		field,
+		value,
+		onUpdate,
+		onOpenReference,
+		readonly = false,
+		organizationId
+	}: Props = $props();
 
 	// Get schemas from context
 	const schemas = getSchemaContext();
 
+	// Get schema for a type - either from inline definition or registry
+	function getSchemaForType(typeName: string): SchemaType | null {
+		// First check if this type has an inline definition in field.of
+		// Match by name OR type (since inline objects might use either)
+		const inlineDef = field.of?.find(
+			(ref) => (ref.name && ref.name === typeName) || ref.type === typeName
+		);
+
+		if (inlineDef && inlineDef.fields) {
+			// Create a temporary SchemaType from inline definition
+			return {
+				type: 'object',
+				name: inlineDef.name || typeName,
+				title: inlineDef.title || typeName,
+				fields: inlineDef.fields
+			};
+		}
+
+		// Otherwise look it up in the schema registry
+		return getSchemaByName(schemas, typeName);
+	}
+
 	// Determine if this is a primitive array or object array
-	// If the type is not found in schemas, it's a primitive type
+	// If the type is not found in schemas AND has no inline fields, it's a primitive type
 	const isPrimitiveArray = $derived(
-		field.of && field.of.length > 0 && field.of[0]?.type && !getSchemaByName(schemas, field.of[0].type)
+		field.of &&
+			field.of.length > 0 &&
+			field.of[0]?.type &&
+			!field.of[0].fields && // Not an inline object
+			!getSchemaByName(schemas, field.of[0].type) // Not in registry
 	);
 	const primitiveType = $derived(isPrimitiveArray ? field.of?.[0]?.type : null);
 
@@ -93,8 +128,8 @@
 	function handleTypeSelected(selectedType: string) {
 		if (readonly || !selectedType) return;
 
-		// Get the schema for the selected type
-		const schema = getSchemaByName(schemas, selectedType);
+		// Get the schema for the selected type (inline or from registry)
+		const schema = getSchemaForType(selectedType);
 		if (!schema) return;
 
 		// Initialize empty object with default values
@@ -102,10 +137,17 @@
 
 		if (schema.fields) {
 			schema.fields.forEach((field) => {
-				if (field.type === 'boolean' && 'initialValue' in field) {
-					newItem[field.name] = field.initialValue;
+				if ('initialValue' in field && field.initialValue !== undefined) {
+					// Only use literal initialValue (skip functions to keep this synchronous)
+					if (typeof field.initialValue !== 'function') {
+						newItem[field.name] = field.initialValue;
+					} else {
+						// Function-based initialValues are skipped for nested items
+						// They will use field type defaults instead
+						newItem[field.name] = getDefaultValueForFieldType(field.type);
+					}
 				} else {
-					newItem[field.name] = '';
+					newItem[field.name] = getDefaultValueForFieldType(field.type);
 				}
 			});
 		}
@@ -122,7 +164,7 @@
 		const item = arrayValue[index];
 		if (!item._type) return;
 
-		const schema = getSchemaByName(schemas, item._type);
+		const schema = getSchemaForType(item._type);
 		if (!schema) return;
 
 		editingIndex = index;
@@ -197,7 +239,9 @@
 		<!-- Primitive array UI -->
 		{#if arrayValue.length === 0}
 			<!-- Empty state -->
-			<div class="border-border/50 bg-muted/30 flex items-center justify-center rounded border border-dashed p-6">
+			<div
+				class="border-border/50 bg-muted/30 flex items-center justify-center rounded border border-dashed p-6"
+			>
 				<p class="text-muted-foreground text-sm">No items</p>
 			</div>
 		{:else}
@@ -225,6 +269,7 @@
 							}}
 							{readonly}
 							compact={true}
+							{organizationId}
 						/>
 					{:else}
 						<!-- Always-editable primitive with options menu -->
@@ -243,7 +288,7 @@
 								<Textarea
 									value={item}
 									oninput={(e) => handleUpdatePrimitive(index, e.currentTarget.value)}
-									readonly={readonly}
+									{readonly}
 									class="flex-1"
 									rows={3}
 									placeholder="Enter text..."
@@ -252,8 +297,9 @@
 								<Input
 									type="number"
 									value={item}
-									oninput={(e) => handleUpdatePrimitive(index, parseFloat(e.currentTarget.value) || 0)}
-									readonly={readonly}
+									oninput={(e) =>
+										handleUpdatePrimitive(index, parseFloat(e.currentTarget.value) || 0)}
+									{readonly}
 									class="flex-1"
 									placeholder="Enter number..."
 								/>
@@ -261,7 +307,7 @@
 								<Input
 									value={item}
 									oninput={(e) => handleUpdatePrimitive(index, e.currentTarget.value)}
-									readonly={readonly}
+									{readonly}
 									class="flex-1"
 									placeholder="Enter value..."
 								/>
@@ -282,7 +328,12 @@
 									</DropdownMenu.Trigger>
 									<DropdownMenu.Content align="end">
 										<DropdownMenu.Item onclick={() => handleRemoveItem(index)}>
-											<svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+											<svg
+												class="mr-2 h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
 												<path
 													stroke-linecap="round"
 													stroke-linejoin="round"
@@ -319,7 +370,9 @@
 		<!-- Object array UI (existing code) -->
 		{#if arrayValue.length === 0}
 			<!-- Empty state -->
-			<div class="border-border/50 bg-muted/30 flex items-center justify-center rounded border border-dashed p-6">
+			<div
+				class="border-border/50 bg-muted/30 flex items-center justify-center rounded border border-dashed p-6"
+			>
 				<p class="text-muted-foreground text-sm">No items</p>
 			</div>
 		{:else}
@@ -449,13 +502,14 @@
 		onSave={handleModalSave}
 		{onOpenReference}
 		{readonly}
+		{organizationId}
 	/>
 {/if}
 
 <!-- Image upload modal -->
 {#if imageModalOpen}
 	<div
-		class="bg-background/80 fixed bottom-0 left-0 right-0 top-12 z-[100] flex items-center justify-center p-6 backdrop-blur-xs sm:absolute sm:top-0 sm:p-4"
+		class="bg-background/80 backdrop-blur-xs fixed bottom-0 left-0 right-0 top-12 z-[100] flex items-center justify-center p-6 sm:absolute sm:top-0 sm:p-4"
 		onclick={(e) => {
 			if (e.target === e.currentTarget) handleImageModalClose();
 		}}
@@ -495,6 +549,7 @@
 					}}
 					value={imageModalValue}
 					onUpdate={handleImageUpload}
+					{organizationId}
 				/>
 			</Card.Content>
 		</Card.Root>

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

@@ -5,6 +5,7 @@ interface Props {
     onUpdate: (value: any) => void;
     onOpenReference?: (documentId: string, documentType: string) => void;
     readonly?: boolean;
+    organizationId?: string;
 }
 declare const ArrayField: import("svelte").Component<Props, {}, "">;
 type ArrayField = ReturnType<typeof ArrayField>;

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

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

@@ -0,0 +1,145 @@
+<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 { Calendar } from '@aphexcms/ui/shadcn/calendar';
+	import * as Popover from '@aphexcms/ui/shadcn/popover';
+	import type { DateField } from '../../../types/schemas';
+	import dayjs from 'dayjs';
+	import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+	// Enable strict parsing
+	dayjs.extend(customParseFormat);
+
+	interface Props {
+		field: DateField;
+		value: string | null; // Always stored as ISO YYYY-MM-DD
+		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 format from options or use default
+	const dateFormat = $derived(field.options?.dateFormat || 'YYYY-MM-DD');
+
+	// Track local input value for display
+	let inputValue = $state('');
+
+	// 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 = '';
+			}
+		} else {
+			// Convert ISO (YYYY-MM-DD) to display format
+			const date = dayjs(value, 'YYYY-MM-DD', true);
+			if (date.isValid()) {
+				const formatted = date.format(dateFormat);
+				// Only update if different to avoid overwriting user's in-progress typing
+				if (inputValue !== formatted) {
+					inputValue = formatted;
+				}
+			} 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 {
+			// Value is stored as ISO date string (YYYY-MM-DD)
+			return parseDate(value);
+		} catch (err) {
+			console.error('Failed to parse date:', value, err);
+			return undefined;
+		}
+	});
+
+	// Handle date selection from calendar
+	function handleDateChange(newValue: DateValue | undefined) {
+		if (!newValue) {
+			onUpdate(null);
+		} else {
+			// Convert DateValue to ISO string (YYYY-MM-DD) for storage
+			const isoString = newValue.toString();
+			onUpdate(isoString);
+		}
+	}
+
+	// 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
+		const parsed = dayjs(displayValue, dateFormat, true);
+
+		if (parsed.isValid()) {
+			// Convert to ISO for storage
+			const isoString = parsed.format('YYYY-MM-DD');
+			onUpdate(isoString);
+		} else {
+			// Still update with the invalid value so autosave triggers
+			// Validation will catch the error
+			onUpdate(displayValue);
+		}
+	}
+</script>
+
+<div class="space-y-2">
+	<div class="flex w-full gap-2">
+		<Input
+			id={field.name}
+			type="text"
+			placeholder={dateFormat}
+			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"
+				/>
+			</Popover.Content>
+		</Popover.Root>
+	</div>
+</div>

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

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

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

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