@nuasite/cms 0.39.2 → 0.41.0

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.39.2",
+  "version": "0.41.0",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/collection-scanner.ts

@@ -2,7 +2,7 @@ import fs from 'node:fs/promises'
 import path from 'node:path'
 import { isMap, isPair, isScalar, parse as parseYaml, parseDocument } from 'yaml'
 import { getProjectRoot } from './config'
-import { parseContentConfig, type ParsedConfig } from './content-config-ast'
+import { parseContentConfig, type ParsedConfig, type ParsedField } from './content-config-ast'
 import { slugifyHref } from './shared'
 import type { CollectionDefinition, CollectionEntryInfo, FieldDefinition, FieldType } from './types'
 
@@ -50,6 +50,25 @@ const FREE_TEXT_FIELD_NAMES = new Set([
 	'caption',
 ])
 
+/** Normalized names (lowercased, underscores/hyphens stripped) that mark a field as the publish toggle. */
+const PUBLISH_TOGGLE_NAMES = new Set(['draft', 'isdraft', 'published', 'ispublished', 'unpublished'])
+
+/** Normalized names that mark a field as the publish/release date anchor. */
+const PUBLISH_DATE_NAMES = new Set([
+	'date',
+	'pubdate',
+	'publishdate',
+	'publisheddate',
+	'publishedate',
+	'publishedat',
+	'datepublished',
+])
+
+/** Normalize a field name for case- and separator-insensitive matching against the *_NAMES sets above. */
+function normalizeFieldName(name: string): string {
+	return name.toLowerCase().replace(/[_-]/g, '')
+}
+
 /**
  * Observed values for a single field across multiple files
  */
@@ -121,7 +140,7 @@ function assignFieldMetadata(
 ): void {
 	for (const field of fields) {
 		// Scanner defaults: well-known fields go to sidebar
-		if (SIDEBAR_FIELD_NAMES.has(field.name.toLowerCase()) || field.type === 'image' || field.type === 'boolean') {
+		if (SIDEBAR_FIELD_NAMES.has(normalizeFieldName(field.name)) || field.type === 'image' || field.type === 'boolean') {
 			field.position = 'sidebar'
 		} else {
 			field.position = 'header'
@@ -194,9 +213,14 @@ function inferFieldType(value: unknown, key: string): FieldType {
 }
 
 /**
- * Merge field observations from multiple files to determine final field definition
+ * Merge field observations from multiple files to determine final field definition.
+ * `depth` guards against pathological deeply-nested content blowing the stack —
+ * real-world YAML/JSON rarely exceeds 5 levels, so the cap is well above realistic use.
  */
-function mergeFieldObservations(observations: FieldObservation[]): FieldDefinition[] {
+const MAX_NESTED_FIELD_DEPTH = 16
+
+function mergeFieldObservations(observations: FieldObservation[], depth: number = 0): FieldDefinition[] {
+	if (depth >= MAX_NESTED_FIELD_DEPTH) return []
 	const fields: FieldDefinition[] = []
 
 	for (const obs of observations) {
@@ -228,7 +252,7 @@ function mergeFieldObservations(observations: FieldObservation[]): FieldDefiniti
 		}
 
 		// For text fields, check if we should treat as select (limited unique values)
-		if (fieldType === 'text' && !FREE_TEXT_FIELD_NAMES.has(obs.name.toLowerCase())) {
+		if (fieldType === 'text' && !FREE_TEXT_FIELD_NAMES.has(normalizeFieldName(obs.name))) {
 			const uniqueValues = [...new Set(nonNullValues.map(v => String(v)))]
 			const uniqueRatio = uniqueValues.length / nonNullValues.length
 			// Only treat as select if unique values are limited AND not nearly all unique
@@ -264,12 +288,26 @@ function mergeFieldObservations(observations: FieldObservation[]): FieldDefiniti
 						for (const item of objectItems) {
 							collectFieldObservations(subFieldMap, item, objectItems.length)
 						}
-						field.fields = mergeFieldObservations(Array.from(subFieldMap.values()))
+						field.fields = mergeFieldObservations(Array.from(subFieldMap.values()), depth + 1)
 					}
 				}
 			}
 		}
 
+		// For plain object values, recurse into sub-fields so the editor can render them.
+		if (fieldType === 'object') {
+			const objectValues = nonNullValues.filter(
+				(v): v is Record<string, unknown> => typeof v === 'object' && v !== null && !Array.isArray(v),
+			)
+			if (objectValues.length > 0) {
+				const subFieldMap = new Map<string, FieldObservation>()
+				for (const item of objectValues) {
+					collectFieldObservations(subFieldMap, item, objectValues.length)
+				}
+				field.fields = mergeFieldObservations(Array.from(subFieldMap.values()), depth + 1)
+			}
+		}
+
 		fields.push(field)
 	}
 
@@ -437,17 +475,65 @@ function applyParsedConfig(
 		for (const pf of parsedColl.fields) {
 			const field = fieldsByName.get(pf.name)
 			if (!field) continue
-			if (pf.type) {
-				field.type = pf.type
-				if (pf.options) field.options = pf.options
-			}
-			if (pf.hints) field.hints = pf.hints
-			if (pf.astroImage) field.astroImage = true
-			field.required = pf.required
+			applyParsedFieldOverrides(field, pf)
 		}
 	}
 }
 
+/**
+ * Apply parsed schema overrides to an inferred field, recursing into nested object/array fields.
+ *
+ * Note on schema-vs-inferred merging at nested levels: schema-declared sub-fields replace
+ * the inferred list rather than merging. Inferred-only sub-fields are *not* lost — the
+ * editor's `ObjectFields` recovers them via its `extraKeys` calculation (field value keys
+ * minus schemaNames), routes them through `FrontmatterField` (value-based auto-detect),
+ * and offers a remove button. Merging here would defeat that.
+ */
+function applyParsedFieldOverrides(field: FieldDefinition, pf: ParsedField): void {
+	if (pf.type) {
+		field.type = pf.type
+		if (pf.options) field.options = pf.options
+	}
+	if (pf.itemType) field.itemType = pf.itemType
+	if (pf.hints) field.hints = pf.hints
+	if (pf.astroImage) field.astroImage = true
+	field.required = pf.required
+
+	if (pf.fields) {
+		const existingByName = new Map((field.fields ?? []).map(f => [f.name, f]))
+		field.fields = pf.fields.map((subPf) => {
+			const existing = existingByName.get(subPf.name)
+			if (existing) {
+				applyParsedFieldOverrides(existing, subPf)
+				return existing
+			}
+			return parsedFieldToFieldDefinition(subPf)
+		})
+	}
+}
+
+/**
+ * Build a FieldDefinition from a parsed schema field when no inferred counterpart exists.
+ * Falls back to `'text'` when the parser couldn't pin a type — keeps the field visible
+ * and editable. Schema-declared-but-data-absent fields would otherwise vanish.
+ */
+function parsedFieldToFieldDefinition(pf: ParsedField): FieldDefinition {
+	const fd: FieldDefinition = {
+		name: pf.name,
+		// A parsed field with nested children but no explicit type is necessarily an object.
+		// Otherwise default to 'text' so users can still fill in schema-declared fields
+		// whose helper the parser didn't recognize.
+		type: pf.type ?? (pf.fields ? 'object' : 'text'),
+		required: pf.required,
+	}
+	if (pf.options) fd.options = pf.options
+	if (pf.itemType) fd.itemType = pf.itemType
+	if (pf.hints) fd.hints = pf.hints
+	if (pf.astroImage) fd.astroImage = true
+	if (pf.fields) fd.fields = pf.fields.map(parsedFieldToFieldDefinition)
+	return fd
+}
+
 /** Apply orderBy configuration: set the field name and direction on the definition, then re-sort entries. */
 function applyCollectionOrderBy(
 	collections: Record<string, CollectionDefinition>,
@@ -583,6 +669,33 @@ function detectReferenceFieldsBySlugMatch(collections: Record<string, Collection
 	}
 }
 
+/**
+ * Tag fields with semantic roles so the editor UI can position them without
+ * matching on Astro-specific field names. Detection lives here — the layer
+ * that already knows it's parsing Astro content collections.
+ */
+function assignSemanticRoles(collections: Record<string, CollectionDefinition>): void {
+	for (const def of Object.values(collections)) {
+		let toggle: FieldDefinition | undefined
+		let dateByName: FieldDefinition | undefined
+		let dateByType: FieldDefinition | undefined
+		for (const field of def.fields) {
+			if (field.hidden || field.role) continue
+			const normalized = normalizeFieldName(field.name)
+			if (!toggle && field.type === 'boolean' && PUBLISH_TOGGLE_NAMES.has(normalized)) {
+				toggle = field
+			} else if (!dateByName && PUBLISH_DATE_NAMES.has(normalized)) {
+				dateByName = field
+			} else if (!dateByType && (field.type === 'date' || field.type === 'datetime')) {
+				dateByType = field
+			}
+		}
+		if (toggle) toggle.role = 'publish-toggle'
+		const date = dateByName ?? dateByType
+		if (date) date.role = 'publish-date'
+	}
+}
+
 /** Suffixes that indicate a field is a derived href/url/slug companion */
 const HREF_SUFFIXES = ['href', 'url', 'link', 'slug', 'path'] as const
 
@@ -749,6 +862,7 @@ export async function scanCollections(contentDir: string = 'src/content'): Promi
 	applyParsedConfig(collections, parsed)
 	detectReferenceFields(collections, parsed)
 	detectDerivedHrefFields(collections)
+	assignSemanticRoles(collections)
 	applyCollectionOrderBy(collections, parsed)
 
 	return collections

package/src/content-config-ast.ts

@@ -20,6 +20,10 @@ export interface ParsedField {
 	reference?: ParsedReference
 	/** True when the field is `image()` from an Astro callback schema, which routes through `astro:assets`. */
 	astroImage?: boolean
+	/** Element type for `array` fields */
+	itemType?: FieldType
+	/** Nested fields for `object` fields, or per-item fields for `array` of objects */
+	fields?: ParsedField[]
 }
 
 export interface ParsedCollection {
@@ -33,6 +37,7 @@ const FIELD_HELPER_TYPES = new Set([
 	'text',
 	'number',
 	'image',
+	'file',
 	'url',
 	'email',
 	'tel',
@@ -40,6 +45,8 @@ const FIELD_HELPER_TYPES = new Set([
 	'date',
 	'datetime',
 	'time',
+	'year',
+	'month',
 	'textarea',
 ])
 
@@ -56,6 +63,26 @@ const VALID_HINT_KEYS = new Set([
 
 const WRAPPER_METHODS = new Set(['optional', 'nullable', 'nullish', 'default'])
 
+/** Map of top-level `const <name> = <expr>` bindings within a single config file. */
+type Bindings = Map<string, t.Node>
+
+/**
+ * Follow `Identifier` references through same-file `const` bindings until reaching
+ * a non-Identifier node. Cycle-safe via the visited set. Returns the original node
+ * unchanged when the identifier is unbound or already visited.
+ */
+function resolveExpression(node: t.Node, bindings: Bindings, visited: Set<string> = new Set()): t.Node {
+	let current: t.Node = node
+	while (current.type === 'Identifier') {
+		if (visited.has(current.name)) return current
+		visited.add(current.name)
+		const next = bindings.get(current.name)
+		if (!next) return current
+		current = next
+	}
+	return current
+}
+
 /** Cached parse result keyed by absolute path; invalidated by mtime. */
 const parseCache = new Map<string, { mtimeMs: number; parsed: ParsedConfig }>()
 
@@ -95,8 +122,11 @@ export function parseConfigSource(source: string, sourcePath?: string): ParsedCo
 	const ast = parseFrontmatter(source, sourcePath) as unknown as t.File | null
 	if (!ast) return result
 
-	// Collect `const X = defineCollection({...})` declarations and the
-	// `export const collections = { name: X, ... }` mapping, in any order.
+	// Single pass: collect every top-level `const X = <expr>` binding (so we can
+	// later resolve Identifier references like `cs: TestimonialTranslation`),
+	// while also picking out `defineCollection({...})` calls and the
+	// `export const collections = { name: X, ... }` mapping.
+	const bindings: Bindings = new Map()
 	const collectionDecls = new Map<string, t.ObjectExpression>()
 	const exportMap = new Map<string, string>() // varName → collectionName
 
@@ -112,6 +142,8 @@ export function parseConfigSource(source: string, sourcePath?: string): ParsedCo
 			if (decl.id.type !== 'Identifier') continue
 			if (!decl.init) continue
 
+			bindings.set(decl.id.name, decl.init)
+
 			if (decl.id.name === 'collections' && decl.init.type === 'ObjectExpression') {
 				for (const prop of decl.init.properties) {
 					if (prop.type !== 'ObjectProperty') continue
@@ -144,12 +176,12 @@ export function parseConfigSource(source: string, sourcePath?: string): ParsedCo
 		) as t.ObjectProperty | undefined
 		if (!schemaProperty) continue
 
-		const schemaObject = unwrapSchemaToObject(schemaProperty.value)
+		const schemaObject = unwrapSchemaToObject(schemaProperty.value, bindings)
 		if (!schemaObject) continue
 
 		result.set(collectionName, {
 			name: collectionName,
-			fields: parseSchemaFields(schemaObject),
+			fields: parseSchemaFields(schemaObject, bindings),
 		})
 	}
 
@@ -168,24 +200,27 @@ function propertyKeyName(key: t.Node): string | null {
 
 /**
  * Unwrap a `schema:` value down to the top-level (z|n).object({ ... }) ObjectExpression.
- * Handles direct calls and the Astro callback form `({ image }) => z.object({...})`.
+ * Handles direct calls, the Astro callback form `({ image }) => z.object({...})`,
+ * and same-file variable references like `schema: BlogSchema`.
  */
-function unwrapSchemaToObject(node: t.Node): t.ObjectExpression | null {
-	if (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression') {
-		const body = node.body
+function unwrapSchemaToObject(node: t.Node, bindings: Bindings): t.ObjectExpression | null {
+	const resolved = resolveExpression(node, bindings)
+
+	if (resolved.type === 'ArrowFunctionExpression' || resolved.type === 'FunctionExpression') {
+		const body = resolved.body
 		if (body.type === 'BlockStatement') {
 			for (const stmt of body.body) {
 				if (stmt.type === 'ReturnStatement' && stmt.argument) {
-					return unwrapSchemaToObject(stmt.argument)
+					return unwrapSchemaToObject(stmt.argument, bindings)
 				}
 			}
 			return null
 		}
-		return unwrapSchemaToObject(body)
+		return unwrapSchemaToObject(body, bindings)
 	}
 
-	if (node.type === 'CallExpression') {
-		const callee = node.callee
+	if (resolved.type === 'CallExpression') {
+		const callee = resolved.callee
 		if (
 			callee.type === 'MemberExpression'
 			&& callee.object.type === 'Identifier'
@@ -193,15 +228,17 @@ function unwrapSchemaToObject(node: t.Node): t.ObjectExpression | null {
 			&& callee.property.type === 'Identifier'
 			&& callee.property.name === 'object'
 		) {
-			const arg = node.arguments[0]
-			if (arg?.type === 'ObjectExpression') return arg
+			const arg = resolved.arguments[0]
+			if (!arg) return null
+			const resolvedArg = resolveExpression(arg, bindings)
+			if (resolvedArg.type === 'ObjectExpression') return resolvedArg
 		}
 	}
 
 	return null
 }
 
-function parseSchemaFields(schemaObject: t.ObjectExpression): ParsedField[] {
+function parseSchemaFields(schemaObject: t.ObjectExpression, bindings: Bindings): ParsedField[] {
 	const fields: ParsedField[] = []
 	for (const prop of schemaObject.properties) {
 		if (prop.type !== 'ObjectProperty') continue
@@ -209,7 +246,7 @@ function parseSchemaFields(schemaObject: t.ObjectExpression): ParsedField[] {
 		if (!name) continue
 
 		const field: ParsedField = { name, required: true }
-		analyzeFieldExpression(prop.value, field)
+		analyzeFieldExpression(prop.value, field, bindings)
 		fields.push(field)
 	}
 	return fields
@@ -219,14 +256,18 @@ function parseSchemaFields(schemaObject: t.ObjectExpression): ParsedField[] {
  * Walk a field's value expression. Each layer is either a wrapper method call
  * (`.optional()`, `.default()`, `.nullable()`, `.nullish()`, `.orderBy(...)`)
  * or the base call (`n.image()`, `image()`, `z.enum([...])`, `n.array(reference(...))`).
+ *
+ * Resolves same-file `Identifier` references against `bindings` at each layer so
+ * patterns like `cs: TestimonialTranslation` and `en: TestimonialTranslation.optional()`
+ * are followed back to their defining call.
  */
-function analyzeFieldExpression(node: t.Node, field: ParsedField): void {
-	let current: t.Node | null = node
+function analyzeFieldExpression(node: t.Node, field: ParsedField, bindings: Bindings): void {
+	let current: t.Node | null = resolveExpression(node, bindings)
 	while (current) {
 		if (current.type !== 'CallExpression') return
 
 		if (isBaseCall(current)) {
-			analyzeBaseCall(current, field)
+			analyzeBaseCall(current, field, bindings)
 			return
 		}
 
@@ -242,7 +283,7 @@ function analyzeFieldExpression(node: t.Node, field: ParsedField): void {
 			field.orderBy = { direction }
 		}
 
-		current = current.callee.object
+		current = resolveExpression(current.callee.object, bindings)
 	}
 }
 
@@ -262,7 +303,7 @@ function isBaseCall(node: t.CallExpression): boolean {
 	return false
 }
 
-function analyzeBaseCall(node: t.CallExpression, field: ParsedField): void {
+function analyzeBaseCall(node: t.CallExpression, field: ParsedField, bindings: Bindings): void {
 	const callee = node.callee
 
 	// Bare image() / reference() from the schema callback form
@@ -314,11 +355,26 @@ function analyzeBaseCall(node: t.CallExpression, field: ParsedField): void {
 		return
 	}
 
-	// (z|n).array(reference('foo'))  →  array of references
+	// (z|n).object({...})  →  nested object field
+	if ((ns === 'z' || ns === 'n') && fn === 'object') {
+		const arg = node.arguments[0]
+		if (!arg) return
+		const resolved = resolveExpression(arg, bindings)
+		if (resolved.type === 'ObjectExpression') {
+			field.type = 'object'
+			field.fields = parseSchemaFields(resolved, bindings)
+		}
+		return
+	}
+
+	// (z|n).array(<inner>)  →  array; inspect the element type
 	if ((ns === 'z' || ns === 'n') && fn === 'array') {
-		const inner = node.arguments[0]
+		const innerRaw = node.arguments[0]
+		if (!innerRaw) return
+		const inner = resolveExpression(innerRaw, bindings)
+		// Array of references: keep the existing flat shape so detectReferenceFields can wire it up.
 		if (
-			inner?.type === 'CallExpression'
+			inner.type === 'CallExpression'
 			&& inner.callee.type === 'Identifier'
 			&& inner.callee.name === 'reference'
 		) {
@@ -326,7 +382,18 @@ function analyzeBaseCall(node: t.CallExpression, field: ParsedField): void {
 			if (target?.type === 'StringLiteral') {
 				field.reference = { target: target.value, isArray: true }
 			}
+			return
 		}
+		// Array of anything else: analyze the inner expression and lift its type/fields.
+		// Note: nested arrays (`n.array(n.array(...))`) collapse here — `itemType` records
+		// only the outer element type, the inner element shape is lost. No editor flow
+		// currently renders nested arrays, so we don't carry a recursive `itemDefinition`
+		// yet; add one when editor support arrives.
+		const innerField: ParsedField = { name: '__item__', required: true }
+		analyzeFieldExpression(inner, innerField, bindings)
+		field.type = 'array'
+		if (innerField.type) field.itemType = innerField.type
+		if (innerField.fields) field.fields = innerField.fields
 		return
 	}
 }

package/src/editor/components/attribute-editor.tsx

@@ -329,7 +329,6 @@ function AttributeField({ attrName, currentAttr, originalAttr, pages, onUpdate,
 				<ImageField
 					label={config.label}
 					value={currentValue || undefined}
-					placeholder={config.placeholder}
 					onChange={(v) => onUpdate(v)}
 					onBrowse={onOpenMediaLibrary}
 					isDirty={isDirty}

package/src/editor/components/bg-image-overlay.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
 import { Z_INDEX } from '../constants'
 import { isApplyingUndoRedo, recordChange } from '../history'
 import { cn } from '../lib/cn'
@@ -80,14 +80,14 @@ const REPEAT_OPTIONS = [
  * Shows a floating badge on hover and opens a right-side settings panel on click.
  */
 export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlayProps) {
-	const [panelOpen, setPanelOpen] = useState(false)
+	const panelOpen = signals.isBgImageOverlayOpen.value
 	// Capture target when panel opens so it stays stable when hover moves away
 	const panelTargetRef = useRef<{ cmsId: string; element: HTMLElement } | null>(null)
 
 	// Close panel when hovering a different bg-image element
 	useEffect(() => {
 		if (cmsId && panelTargetRef.current && cmsId !== panelTargetRef.current.cmsId) {
-			setPanelOpen(false)
+			signals.isBgImageOverlayOpen.value = false
 			panelTargetRef.current = null
 		}
 	}, [cmsId])
@@ -99,7 +99,7 @@ export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlay
 		const handleClickOutside = (e: MouseEvent) => {
 			const target = e.target as HTMLElement
 			if (target.closest('[data-cms-ui]')) return
-			setPanelOpen(false)
+			signals.isBgImageOverlayOpen.value = false
 			panelTargetRef.current = null
 		}
 
@@ -117,16 +117,16 @@ export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlay
 		e.preventDefault()
 		e.stopPropagation()
 		if (panelOpen) {
-			setPanelOpen(false)
+			signals.isBgImageOverlayOpen.value = false
 			panelTargetRef.current = null
 		} else if (cmsId && element) {
-			setPanelOpen(true)
+			signals.isBgImageOverlayOpen.value = true
 			panelTargetRef.current = { cmsId, element }
 		}
 	}, [panelOpen, cmsId, element])
 
 	const handleClose = useCallback(() => {
-		setPanelOpen(false)
+		signals.isBgImageOverlayOpen.value = false
 		panelTargetRef.current = null
 	}, [])
 
@@ -243,7 +243,6 @@ export function BgImageOverlay({ visible, rect, element, cmsId }: BgImageOverlay
 								<ImageField
 									label="Image URL"
 									value={currentUrl || undefined}
-									placeholder="/assets/image.png"
 									onChange={handleImageUrlChange}
 									onBrowse={handleBrowse}
 									isDirty={isImageDirty}

package/src/editor/components/block-editor.tsx

@@ -374,13 +374,13 @@ export function BlockEditor({
 									<div class="flex gap-2">
 										<button
 											onClick={() => handleStartInsert('before')}
-											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-md cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
+											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-sm cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
 										>
 											<span class="text-base">↑</span> {isArrayItem ? 'Add item before' : 'Insert before'}
 										</button>
 										<button
 											onClick={() => handleStartInsert('after')}
-											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-md cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
+											class="flex-1 py-2.5 px-3 bg-white/10 text-white/80 rounded-cms-sm cursor-pointer text-[13px] font-medium flex items-center justify-center gap-1.5 hover:bg-white/20 hover:text-white transition-colors"
 										>
 											<span class="text-base">↓</span> {isArrayItem ? 'Add item after' : 'Insert after'}
 										</button>
@@ -388,20 +388,20 @@ export function BlockEditor({
 									<div class="flex gap-2 justify-between">
 										<button
 											onClick={() => setMode('confirm-remove')}
-											class="px-4 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
+											class="px-5 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
 										>
 											{isArrayItem ? 'Remove item' : 'Remove'}
 										</button>
 										<div class="flex gap-2">
 											<button
 												onClick={onClose}
-												class="px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+												class="px-5 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
 											>
 												Cancel
 											</button>
 											<button
 												onClick={handleSave}
-												class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
+												class="px-5 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
 											>
 												Save
 											</button>
@@ -413,7 +413,7 @@ export function BlockEditor({
 						: mode === 'confirm-remove'
 						? (
 							<div class="text-center p-5">
-								<div class="px-4 py-3 bg-red-500/10 border border-red-500/30 rounded-cms-md mb-5 text-[13px] text-white">
+								<div class="px-4 py-3 bg-red-500/10 border border-red-500/30 rounded-cms-sm mb-5 text-[13px] text-white">
 									{isArrayItem
 										? (
 											<>
@@ -429,7 +429,7 @@ export function BlockEditor({
 								<div class="flex gap-2 justify-end pt-4 border-t border-white/10 mt-4">
 									<button
 										onClick={handleBackToEdit}
-										class="px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+										class="px-5 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
 									>
 										Cancel
 									</button>
@@ -440,7 +440,7 @@ export function BlockEditor({
 												onClose()
 											}
 										}}
-										class="px-4 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
+										class="px-5 py-2.5 bg-cms-error text-white rounded-cms-pill cursor-pointer hover:bg-red-600 transition-colors font-medium"
 									>
 										{isArrayItem ? 'Confirm remove item' : 'Confirm remove'}
 									</button>
@@ -452,7 +452,7 @@ export function BlockEditor({
 							<div class="p-5">
 								{/* New component props */}
 								<div class="mb-5">
-									<div class="px-4 py-3 bg-white/10 rounded-cms-md mb-4 text-[13px] text-white">
+									<div class="px-4 py-3 bg-white/10 rounded-cms-sm mb-4 text-[13px] text-white">
 										{isArrayItem
 											? (
 												<>
@@ -478,13 +478,13 @@ export function BlockEditor({
 								<div class="flex gap-2 justify-end pt-4 border-t border-white/10 mt-4">
 									<button
 										onClick={() => isArrayItem ? handleBackToEdit() : setMode('insert-picker')}
-										class="px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+										class="px-5 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
 									>
 										Back
 									</button>
 									<button
 										onClick={handleConfirmInsert}
-										class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
+										class="px-5 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
 									>
 										{isArrayItem ? 'Add item' : 'Insert component'}
 									</button>
@@ -510,7 +510,7 @@ export function BlockEditor({
 								<div class="mt-5 pt-4 border-t border-white/10">
 									<button
 										onClick={handleBackToEdit}
-										class="w-full px-4 py-2.5 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
+										class="w-full px-4 py-2 bg-white/10 text-white/80 rounded-cms-pill cursor-pointer hover:bg-white/20 hover:text-white transition-colors font-medium"
 									>
 										Back to edit
 									</button>