@nuasite/cms 0.40.0 → 0.42.0

package/src/editor/components/fields.tsx

@@ -168,6 +168,13 @@ export function ImageField({ label, value, onChange, onBrowse, isDirty, onReset
 		if (file && file.type.startsWith('image/')) await uploadFile(file)
 	}, [uploadFile])
 
+	const containerClass = cn(
+		'relative w-full rounded-cms-sm overflow-hidden bg-white/5 border group transition-colors focus:outline-none focus:ring-1 focus:ring-white/30',
+		isUploading ? 'cursor-wait' : 'cursor-pointer',
+		isDragOver ? 'border-cms-primary bg-cms-primary/10' : 'border-white/10 hover:border-white/20',
+	)
+	const overlayHint = isUploading ? 'Uploading…' : isDragOver ? 'Drop to upload' : hasImage ? 'Click to view' : 'Click or drop file'
+
 	return (
 		<div class="space-y-2 min-w-0">
 			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
@@ -180,51 +187,72 @@ export function ImageField({ label, value, onChange, onBrowse, isDirty, onReset
 				data-cms-ui
 			/>
 			<div class="w-full max-w-sm space-y-2">
-				<div
-					role="button"
-					tabIndex={isUploading ? -1 : 0}
-					aria-label={hasImage ? 'Replace image — click to upload or drop a file' : 'Upload image — click or drop a file'}
-					aria-busy={isUploading}
-					onClick={isUploading ? undefined : handleUploadClick}
-					onKeyDown={(e) => {
-						if (isUploading) return
-						if (e.key === 'Enter' || e.key === ' ') {
-							e.preventDefault()
-							handleUploadClick()
-						}
-					}}
-					onDragOver={handleDragOver}
-					onDragEnter={handleDragOver}
-					onDragLeave={handleDragLeave}
-					onDrop={handleDrop}
-					class={cn(
-						'relative w-full rounded-cms-sm overflow-hidden bg-white/5 border group transition-colors focus:outline-none focus:ring-1 focus:ring-white/30',
-						isUploading ? 'cursor-wait' : 'cursor-pointer',
-						isDragOver ? 'border-cms-primary bg-cms-primary/10' : 'border-white/10 hover:border-white/20',
-					)}
-					data-cms-ui
-				>
-					{hasImage && !showFallback
-						? (
-							<>
-								<img
-									src={value}
-									alt={label}
-									class="w-full h-32 object-contain"
-									onError={() => setFailedSrc(value ?? null)}
-								/>
-								<div class="absolute inset-x-0 bottom-0 px-2 py-1.5 bg-linear-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
-									<span class="block text-white text-[11px] font-medium truncate" title={value}>
-										{value}
-									</span>
-								</div>
+				{hasImage
+					? (
+						<a
+							href={value}
+							target="_blank"
+							rel="noopener noreferrer"
+							aria-label={`Open ${label.toLowerCase()} in new tab`}
+							onDragOver={handleDragOver}
+							onDragEnter={handleDragOver}
+							onDragLeave={handleDragLeave}
+							onDrop={handleDrop}
+							class={cn(containerClass, 'block')}
+							data-cms-ui
+						>
+							{!showFallback
+								? (
+									<>
+										<img
+											src={value}
+											alt={label}
+											class="w-full h-32 object-contain"
+											onError={() => setFailedSrc(value ?? null)}
+										/>
+										<div class="absolute inset-x-0 bottom-0 px-2 py-1.5 bg-linear-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+											<span class="block text-white text-[11px] font-medium truncate" title={value}>
+												{value}
+											</span>
+										</div>
+									</>
+								)
+								: (
+									<div class="w-full h-32 flex flex-col items-center justify-center gap-1 text-white/40">
+										<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+											/>
+										</svg>
+										<span class="text-[11px] font-medium" title={value}>Image failed to load</span>
+									</div>
+								)}
+							<div class="absolute top-1.5 right-1.5 flex gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity z-20">
+								<button
+									type="button"
+									onClick={(e) => {
+										e.preventDefault()
+										e.stopPropagation()
+										handleUploadClick()
+									}}
+									class="w-6 h-6 flex items-center justify-center bg-black/60 hover:bg-white/20 text-white rounded-cms-xs transition-colors cursor-pointer"
+									title="Replace image"
+									data-cms-ui
+								>
+									<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v6h6M20 20v-6h-6M4 10a8 8 0 0114-5M20 14a8 8 0 01-14 5" />
+									</svg>
+								</button>
 								<button
 									type="button"
 									onClick={(e) => {
+										e.preventDefault()
 										e.stopPropagation()
 										onChange('')
 									}}
-									class="absolute top-1.5 right-1.5 w-6 h-6 flex items-center justify-center bg-black/60 hover:bg-red-500/80 text-white rounded-cms-xs opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all cursor-pointer z-20"
+									class="w-6 h-6 flex items-center justify-center bg-black/60 hover:bg-red-500/80 text-white rounded-cms-xs transition-colors cursor-pointer"
 									title="Remove image from this field"
 									data-cms-ui
 								>
@@ -232,9 +260,34 @@ export function ImageField({ label, value, onChange, onBrowse, isDirty, onReset
 										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 									</svg>
 								</button>
-							</>
-						)
-						: (
+							</div>
+							{/* Hover overlay — decorative hint (pointer-events-none) */}
+							<div class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/40 transition-colors pointer-events-none">
+								<span class="text-white/90 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">{overlayHint}</span>
+							</div>
+						</a>
+					)
+					: (
+						<div
+							role="button"
+							tabIndex={isUploading ? -1 : 0}
+							aria-label="Upload image — click or drop a file"
+							aria-busy={isUploading}
+							onClick={isUploading ? undefined : handleUploadClick}
+							onKeyDown={(e) => {
+								if (isUploading) return
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault()
+									handleUploadClick()
+								}
+							}}
+							onDragOver={handleDragOver}
+							onDragEnter={handleDragOver}
+							onDragLeave={handleDragLeave}
+							onDrop={handleDrop}
+							class={containerClass}
+							data-cms-ui
+						>
 							<div class="w-full h-32 flex flex-col items-center justify-center gap-1 text-white/25 group-hover:text-white/40 transition-colors">
 								<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
 									<path
@@ -243,16 +296,224 @@ export function ImageField({ label, value, onChange, onBrowse, isDirty, onReset
 										d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
 									/>
 								</svg>
-								{showFallback && <span class="text-[11px] font-medium" title={value}>Image failed to load</span>}
 							</div>
-						)}
-					{/* Hover overlay — decorative hint (pointer-events-none, click goes to the parent role=button) */}
-					<div class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/40 transition-colors pointer-events-none">
-						<span class="text-white/90 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">
-							{isUploading ? 'Uploading…' : isDragOver ? 'Drop to upload' : hasImage ? 'Replace image' : 'Click or drop file'}
-						</span>
-					</div>
-				</div>
+							<div class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/40 transition-colors pointer-events-none">
+								<span class="text-white/90 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">{overlayHint}</span>
+							</div>
+						</div>
+					)}
+				<button
+					type="button"
+					onClick={onBrowse}
+					class="block text-xs text-white/50 hover:text-white underline decoration-white/20 hover:decoration-white underline-offset-2 transition-colors cursor-pointer"
+					data-cms-ui
+				>
+					Choose from library
+				</button>
+			</div>
+		</div>
+	)
+}
+
+// ============================================================================
+// File Field — generic file picker (PDF, docs, etc.) with drop-zone + library
+// ============================================================================
+
+export interface FileFieldProps {
+	label: string
+	value: string | undefined
+	onChange: (value: string) => void
+	onBrowse: () => void
+	accept?: string
+	isDirty?: boolean
+	onReset?: () => void
+}
+
+function getFileBasename(url: string): string {
+	const clean = url.split('?')[0]?.split('#')[0] ?? url
+	const last = clean.split('/').pop() ?? clean
+	try {
+		return decodeURIComponent(last) || last
+	} catch {
+		return last
+	}
+}
+
+export function FileField({ label, value, onChange, onBrowse, accept, isDirty, onReset }: FileFieldProps) {
+	const hasFile = !!value && value.length > 0
+	const fileInputRef = useRef<HTMLInputElement>(null)
+	const [isUploading, setIsUploading] = useState(false)
+	const [isDragOver, setIsDragOver] = useState(false)
+
+	const handleUploadClick = useCallback(() => {
+		fileInputRef.current?.click()
+	}, [])
+
+	const uploadFile = useCallback(async (file: File) => {
+		const cfg = config.value
+		if (!cfg) {
+			showToast(STRINGS.media.notConfigured, 'error')
+			return
+		}
+		setIsUploading(true)
+		try {
+			const result = await uploadMedia(cfg, file)
+			if (result.success && result.url) {
+				onChange(result.url)
+				showToast(STRINGS.media.fileUploaded, 'success')
+			} else {
+				showToast(result.error || STRINGS.media.uploadFailed, 'error')
+			}
+		} catch {
+			showToast(STRINGS.media.uploadFailed, 'error')
+		} finally {
+			setIsUploading(false)
+		}
+	}, [onChange])
+
+	const handleFileChange = useCallback(async (e: Event) => {
+		const target = e.target as HTMLInputElement
+		const file = target.files?.[0]
+		if (file) await uploadFile(file)
+		target.value = ''
+	}, [uploadFile])
+
+	const handleDragOver = useCallback((e: DragEvent) => {
+		e.preventDefault()
+		if (e.dataTransfer?.types.includes('Files')) setIsDragOver(true)
+	}, [])
+
+	const handleDragLeave = useCallback((e: DragEvent) => {
+		if ((e.currentTarget as Node).contains(e.relatedTarget as Node | null)) return
+		setIsDragOver(false)
+	}, [])
+
+	const handleDrop = useCallback(async (e: DragEvent) => {
+		e.preventDefault()
+		setIsDragOver(false)
+		const file = e.dataTransfer?.files?.[0]
+		if (file) await uploadFile(file)
+	}, [uploadFile])
+
+	const basename = hasFile ? getFileBasename(value) : ''
+	const containerClass = cn(
+		'relative w-full rounded-cms-sm overflow-hidden bg-white/5 border group transition-colors focus:outline-none focus:ring-1 focus:ring-white/30',
+		isUploading ? 'cursor-wait' : 'cursor-pointer',
+		isDragOver ? 'border-cms-primary bg-cms-primary/10' : 'border-white/10 hover:border-white/20',
+	)
+	const overlayHint = isUploading ? 'Uploading…' : isDragOver ? 'Drop to upload' : hasFile ? 'Click to view' : 'Click or drop file'
+
+	return (
+		<div class="space-y-2 min-w-0">
+			<FieldLabel label={label} isDirty={isDirty} onReset={onReset} />
+			<input
+				ref={fileInputRef}
+				type="file"
+				accept={accept}
+				class="hidden"
+				onChange={handleFileChange}
+				data-cms-ui
+			/>
+			<div class="w-full max-w-sm space-y-2">
+				{hasFile
+					? (
+						<a
+							href={value}
+							target="_blank"
+							rel="noopener noreferrer"
+							aria-label={`Open ${basename || 'file'} in new tab`}
+							onDragOver={handleDragOver}
+							onDragEnter={handleDragOver}
+							onDragLeave={handleDragLeave}
+							onDrop={handleDrop}
+							class={cn(containerClass, 'block')}
+							data-cms-ui
+						>
+							<div class="w-full h-20 flex items-center gap-3 px-3 text-white/80">
+								<svg class="w-8 h-8 flex-shrink-0 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+									/>
+								</svg>
+								<div class="flex-1 min-w-0">
+									<div class="text-sm font-medium truncate" title={basename}>{basename}</div>
+									<div class="text-[11px] text-white/40 truncate" title={value}>{value}</div>
+								</div>
+							</div>
+							<div class="absolute top-1.5 right-1.5 flex gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity z-20">
+								<button
+									type="button"
+									onClick={(e) => {
+										e.preventDefault()
+										e.stopPropagation()
+										handleUploadClick()
+									}}
+									class="w-6 h-6 flex items-center justify-center bg-black/60 hover:bg-white/20 text-white rounded-cms-xs transition-colors cursor-pointer"
+									title="Replace file"
+									data-cms-ui
+								>
+									<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v6h6M20 20v-6h-6M4 10a8 8 0 0114-5M20 14a8 8 0 01-14 5" />
+									</svg>
+								</button>
+								<button
+									type="button"
+									onClick={(e) => {
+										e.preventDefault()
+										e.stopPropagation()
+										onChange('')
+									}}
+									class="w-6 h-6 flex items-center justify-center bg-black/60 hover:bg-red-500/80 text-white rounded-cms-xs transition-colors cursor-pointer"
+									title="Remove file from this field"
+									data-cms-ui
+								>
+									<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+									</svg>
+								</button>
+							</div>
+							<div class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/40 transition-colors pointer-events-none">
+								<span class="text-white/90 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">{overlayHint}</span>
+							</div>
+						</a>
+					)
+					: (
+						<div
+							role="button"
+							tabIndex={isUploading ? -1 : 0}
+							aria-label="Upload file — click or drop a file"
+							aria-busy={isUploading}
+							onClick={isUploading ? undefined : handleUploadClick}
+							onKeyDown={(e) => {
+								if (isUploading) return
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault()
+									handleUploadClick()
+								}
+							}}
+							onDragOver={handleDragOver}
+							onDragEnter={handleDragOver}
+							onDragLeave={handleDragLeave}
+							onDrop={handleDrop}
+							class={containerClass}
+							data-cms-ui
+						>
+							<div class="w-full h-20 flex flex-col items-center justify-center gap-1 text-white/25 group-hover:text-white/40 transition-colors">
+								<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+									/>
+								</svg>
+							</div>
+							<div class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/40 transition-colors pointer-events-none">
+								<span class="text-white/90 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">{overlayHint}</span>
+							</div>
+						</div>
+					)}
 				<button
 					type="button"
 					onClick={onBrowse}
@@ -449,7 +710,7 @@ export function NumberField({ label, value, placeholder, min, max, step, onChang
 					)}
 					data-cms-ui
 				/>
-				<div class="absolute right-1.5 top-1/4 -translate-y-1/2 flex gap-[3px]">
+				<div class="absolute right-1.5 top-1/2 -translate-y-1/2 flex gap-[3px]">
 					<button
 						type="button"
 						onClick={() => adjust(-1)}

package/src/editor/components/frontmatter-fields.tsx

@@ -14,7 +14,7 @@ import {
 } from '../signals'
 import { STRINGS } from '../strings'
 import type { CollectionDefinition, FieldDefinition, MarkdownPageEntry } from '../types'
-import { ColorField, ComboBoxField, ImageField, MultiSelectField, NumberField, TextField, ToggleField } from './fields'
+import { ColorField, ComboBoxField, FileField, ImageField, MultiSelectField, NumberField, TextField, ToggleField } from './fields'
 import { groupFields } from './frontmatter-sidebar'
 
 function isArrayOfObjects(value: unknown[]): value is Record<string, unknown>[] {
@@ -235,6 +235,7 @@ export function CreateModeFrontmatter({
 	onSlugManualEdit,
 }: CreateModeFrontmatterProps) {
 	const allFields = fields ?? collectionDefinition.fields
+	const allFieldNames = new Set(allFields.map((f) => f.name))
 	const urlFieldNames = new Set(allFields.filter((f) => f.type === 'url' || /link|href|url/i.test(f.name)).map((f) => f.name))
 	const isOpenInNewTabSibling = (name: string) => {
 		if (!name.endsWith('OpenInNewTab')) return false
@@ -296,6 +297,7 @@ export function CreateModeFrontmatter({
 								onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
 								collection={collectionDefinition.name}
 								entrySlug={page.slug}
+								hasOpenInNewTabSibling={allFieldNames.has(`${field.name}OpenInNewTab`)}
 							/>
 						))}
 					</FieldGroupHeader>
@@ -389,6 +391,7 @@ export function EditModeFrontmatter({
 	fields,
 }: EditModeFrontmatterProps) {
 	const allFields = fields ?? collectionDefinition?.fields ?? []
+	const allFieldNames = new Set(allFields.map((f) => f.name))
 	const urlFieldNames = new Set(allFields.filter((f) => f.type === 'url' || /link|href|url/i.test(f.name)).map((f) => f.name))
 	const isOpenInNewTabSibling = (name: string) => {
 		if (!name.endsWith('OpenInNewTab')) return false
@@ -425,6 +428,7 @@ export function EditModeFrontmatter({
 											onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
 											collection={collectionDefinition.name}
 											entrySlug={page.slug}
+											hasOpenInNewTabSibling={allFieldNames.has(`${field.name}OpenInNewTab`)}
 										/>
 									))}
 								</FieldGroupHeader>
@@ -467,6 +471,8 @@ interface SchemaFrontmatterFieldProps {
 	/** Required when editing an `astroImage` field — routes uploads to the entry's directory. */
 	collection?: string
 	entrySlug?: string
+	/** True when the schema declares a `${field.name}OpenInNewTab` companion boolean — controls toggle visibility next to URL fields. */
+	hasOpenInNewTabSibling?: boolean
 }
 
 export function SchemaFrontmatterField({
@@ -475,6 +481,7 @@ export function SchemaFrontmatterField({
 	onChange,
 	collection,
 	entrySlug,
+	hasOpenInNewTabSibling,
 }: SchemaFrontmatterFieldProps) {
 	const label = field.required ? `${formatFieldLabel(field.name)} *` : formatFieldLabel(field.name)
 	const hints = field.hints
@@ -501,7 +508,7 @@ export function SchemaFrontmatterField({
 						required={field.required}
 						tooltip={linkTooltip}
 					/>
-					{field.type === 'url' && <OpenInNewTabToggle field={field} />}
+					{field.type === 'url' && hasOpenInNewTabSibling && <OpenInNewTabToggle field={field} />}
 				</>
 			)
 		}
@@ -522,6 +529,22 @@ export function SchemaFrontmatterField({
 			)
 		}
 
+		case 'file': {
+			return (
+				<FileField
+					label={label}
+					value={(value as string) ?? ''}
+					accept={hints?.accept as string | undefined}
+					onChange={(v) => onChange(v)}
+					onBrowse={() => {
+						openMediaLibraryWithCallback((url: string) => {
+							onChange(url)
+						})
+					}}
+				/>
+			)
+		}
+
 		case 'color':
 			return (
 				<ColorField
@@ -550,9 +573,38 @@ export function SchemaFrontmatterField({
 				</div>
 			)
 
-		case 'date':
+		case 'date': {
+			// A `date` field's value is often a full datetime (e.g. "2026-04-14T08:35:00"),
+			// which an <input type="date"> can't display (it needs YYYY-MM-DD). Show only the
+			// date part, but preserve the original time component on change so editing the date
+			// doesn't silently drop the time.
+			const raw = value == null ? '' : String(value)
+			// Preserve the full time component on change — including fractional seconds and any
+			// timezone designator (Z or ±HH:MM) — so editing only the date never drops them.
+			const timeSuffix = raw.match(/T\d{2}:\d{2}(:\d{2})?(\.\d+)?(Z|[+-]\d{2}:?\d{2})?/)?.[0] ?? ''
+			return (
+				<div class="flex flex-col gap-1" data-cms-ui>
+					<label class="text-xs text-white/60 font-medium">{label}</label>
+					<input
+						type="date"
+						value={raw.slice(0, 10)}
+						min={hints?.min != null ? String(hints.min) : undefined}
+						max={hints?.max != null ? String(hints.max) : undefined}
+						required={field.required}
+						onInput={(e) => {
+							const d = (e.target as HTMLInputElement).value
+							onChange(d ? `${d}${timeSuffix}` : '')
+						}}
+						class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white focus:outline-none focus:border-white/40"
+						data-cms-ui
+					/>
+				</div>
+			)
+		}
+
 		case 'datetime':
 		case 'time':
+		case 'month':
 			return (
 				<div class="flex flex-col gap-1" data-cms-ui>
 					<label class="text-xs text-white/60 font-medium">{label}</label>
@@ -583,6 +635,28 @@ export function SchemaFrontmatterField({
 				/>
 			)
 
+		case 'year':
+			return (
+				<div class="flex flex-col gap-1.5" data-cms-ui>
+					<label class="text-xs font-medium text-white/70">{label}</label>
+					<input
+						type="number"
+						value={typeof value === 'number' ? value : ''}
+						placeholder={hints?.placeholder ?? String(new Date().getFullYear())}
+						min={typeof hints?.min === 'number' ? hints.min : 1900}
+						max={typeof hints?.max === 'number' ? hints.max : 2100}
+						step={1}
+						required={field.required}
+						onInput={(e) => {
+							const raw = (e.target as HTMLInputElement).value
+							onChange(raw === '' ? undefined : Number(raw))
+						}}
+						class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-colors"
+						data-cms-ui
+					/>
+				</div>
+			)
+
 		case 'boolean':
 			return (
 				<ToggleField
@@ -952,6 +1026,8 @@ export function getPlaceholder(field: FieldDefinition): string {
 			return 'name@example.com'
 		case 'image':
 			return '/images/...'
+		case 'file':
+			return '/files/...'
 		case 'color':
 			return '#000000'
 		case 'date':
@@ -960,6 +1036,10 @@ export function getPlaceholder(field: FieldDefinition): string {
 			return 'YYYY-MM-DDTHH:MM'
 		case 'time':
 			return 'HH:MM'
+		case 'year':
+			return String(new Date().getFullYear())
+		case 'month':
+			return 'YYYY-MM'
 		default:
 			return `Enter ${formatFieldLabel(field.name).toLowerCase()}...`
 	}

package/src/editor/components/frontmatter-sidebar.tsx

@@ -200,6 +200,7 @@ export function FrontmatterSidebar({ fields, page, collectionDefinition }: Front
 														onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
 														collection={collectionDefinition?.name}
 														entrySlug={page.slug}
+														hasOpenInNewTabSibling={schemaFieldNames.has(`${field.name}OpenInNewTab`)}
 													/>
 												)
 												: (

package/src/editor/components/markdown-editor-overlay.tsx

@@ -60,7 +60,7 @@ export function MarkdownEditorOverlay() {
 		: activeCollectionDef?.fileExtension === 'mdx'
 
 	const [isSaving, setIsSaving] = useState(false)
-	const [showFrontmatter, setShowFrontmatter] = useState(isCreateMode || isDataCollection)
+	const [showFrontmatter, setShowFrontmatter] = useState(isCreateMode || isDataCollection || config.value.openMetadataByDefault === true)
 	// Track whether the user has manually edited the slug (disables auto-slug from title)
 	const [slugManuallyEdited, setSlugManuallyEdited] = useState(false)
 	// Preview mode state