@nuasite/cms 0.5.1 → 0.7.0

package/package.json

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

package/src/build-processor.ts

@@ -4,7 +4,8 @@ import fs from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { getProjectRoot } from './config'
-import { extractPropsFromSource, findComponentInvocationLine } from './handlers/component-ops'
+import { detectArrayPattern, extractArrayElementProps } from './handlers/array-ops'
+import { extractPropsFromSource, findComponentInvocationLine, findFrontmatterEnd } from './handlers/component-ops'
 import { extractComponentName, processHtml } from './html-processor'
 import type { ManifestWriter } from './manifest-writer'
 import { generateComponentPreviews } from './preview-generator'
@@ -402,6 +403,9 @@ async function processFile(
 				entry.variableName = mdSource.variableName
 				entry.collectionName = mdSource.collectionName
 				entry.collectionSlug = mdSource.collectionSlug
+				if (mdSource.variableName) {
+					entry.allowStyling = false
+				}
 				return
 			}
 		}
@@ -413,6 +417,9 @@ async function processFile(
 			entry.sourceLine = sourceLocation.line
 			entry.sourceSnippet = sourceLocation.snippet
 			entry.variableName = sourceLocation.variableName
+			if (sourceLocation.variableName) {
+				entry.allowStyling = false
+			}
 
 			// Update attribute and colorClasses source information if we have an opening tag
 			if (sourceLocation.openingTagSnippet) {
@@ -640,6 +647,42 @@ async function processFile(
 						comp.props = extractPropsFromSource(pageLines, invLine, comp.componentName)
 					}
 				}
+
+				// Resolve spread props for array-rendered components
+				const componentGroups = new Map<string, typeof result.components[string][]>()
+				for (const comp of Object.values(result.components)) {
+					const key = `${comp.componentName}::${comp.invocationSourcePath ?? ''}`
+					if (!componentGroups.has(key)) componentGroups.set(key, [])
+					componentGroups.get(key)!.push(comp)
+				}
+
+				for (const group of componentGroups.values()) {
+					if (group.length <= 1) continue
+					if (!group.some(c => Object.keys(c.props).length === 0)) continue
+
+					const firstComp = group[0]!
+					const invLine = findComponentInvocationLine(pageLines, firstComp.componentName, 0)
+					if (invLine < 0) continue
+
+					const pattern = detectArrayPattern(pageLines, invLine)
+					if (!pattern) continue
+
+					const fmEnd = findFrontmatterEnd(pageLines)
+					if (fmEnd === 0) continue
+
+					const frontmatterContent = pageLines.slice(1, fmEnd - 1).join('\n')
+
+					const sorted = [...group].sort((a, b) => (a.invocationIndex ?? 0) - (b.invocationIndex ?? 0))
+					for (let i = 0; i < sorted.length; i++) {
+						const comp = sorted[i]!
+						if (Object.keys(comp.props).length > 0) continue
+
+						const arrayProps = extractArrayElementProps(frontmatterContent, pattern.arrayVarName, i)
+						if (arrayProps) {
+							comp.props = arrayProps
+						}
+					}
+				}
 			} catch {
 				// Could not read page source — leave props empty
 			}

package/src/dev-middleware.ts

@@ -3,10 +3,11 @@ import fs from 'node:fs/promises'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import path from 'node:path'
 import { getProjectRoot } from './config'
-import { handleAddArrayItem, handleRemoveArrayItem } from './handlers/array-ops'
+import { detectArrayPattern, extractArrayElementProps, handleAddArrayItem, handleRemoveArrayItem } from './handlers/array-ops'
 import {
 	extractPropsFromSource,
 	findComponentInvocationLine,
+	findFrontmatterEnd,
 	getPageFileCandidates,
 	handleInsertComponent,
 	handleRemoveComponent,
@@ -429,7 +430,7 @@ async function handleCmsApiRoute(
 
 	// GET /_nua/cms/deployment/status
 	if (route === 'deployment/status' && req.method === 'GET') {
-		sendJson(res, { currentDeployment: null, pendingCount: 0 })
+		sendJson(res, { currentDeployment: null, pendingCount: 0, deploymentEnabled: false })
 		return
 	}
 
@@ -536,6 +537,50 @@ async function processHtmlForDev(
 		}
 	}
 
+	// Resolve spread props for array-rendered components.
+	// Group components by (name, invocationSourcePath) to detect array patterns.
+	const componentGroups = new Map<string, typeof result.components[string][]>()
+	for (const comp of Object.values(result.components)) {
+		const key = `${comp.componentName}::${comp.invocationSourcePath ?? ''}`
+		if (!componentGroups.has(key)) componentGroups.set(key, [])
+		componentGroups.get(key)!.push(comp)
+	}
+
+	for (const group of componentGroups.values()) {
+		if (group.length <= 1) continue
+		// Only process groups where at least one component has empty props (spread case)
+		if (!group.some(c => Object.keys(c.props).length === 0)) continue
+
+		const firstComp = group[0]!
+		const filePath = normalizeFilePath(firstComp.invocationSourcePath ?? firstComp.sourcePath)
+		const lines = await readLines(path.resolve(projectRoot, filePath))
+		if (!lines) continue
+
+		// Find the invocation line (occurrence 0, since .map() has a single <Component> tag)
+		const invLine = findComponentInvocationLine(lines, firstComp.componentName, 0)
+		if (invLine < 0) continue
+
+		const pattern = detectArrayPattern(lines, invLine)
+		if (!pattern) continue
+
+		const fmEnd = findFrontmatterEnd(lines)
+		if (fmEnd === 0) continue
+
+		const frontmatterContent = lines.slice(1, fmEnd - 1).join('\n')
+
+		// Sort group by invocationIndex to match array element order
+		const sorted = [...group].sort((a, b) => (a.invocationIndex ?? 0) - (b.invocationIndex ?? 0))
+		for (let i = 0; i < sorted.length; i++) {
+			const comp = sorted[i]!
+			if (Object.keys(comp.props).length > 0) continue
+
+			const arrayProps = extractArrayElementProps(frontmatterContent, pattern.arrayVarName, i)
+			if (arrayProps) {
+				comp.props = arrayProps
+			}
+		}
+	}
+
 	// Build collection entry if this is a collection page
 	let collectionEntry: CollectionEntry | undefined
 	if (collectionInfo && mdContent) {

package/src/editor/components/collections-browser.tsx

@@ -3,6 +3,7 @@ import {
 	closeCollectionsBrowser,
 	isCollectionsBrowserOpen,
 	manifest,
+	openMarkdownEditorForEntry,
 	openMarkdownEditorForNewPage,
 	selectBrowserCollection,
 	selectedBrowserCollection,
@@ -16,7 +17,7 @@ export function CollectionsBrowser() {
 	const collectionDefinitions = manifest.value.collectionDefinitions ?? {}
 
 	const collections = useMemo(() => {
-		return Object.values(collectionDefinitions)
+		return Object.values(collectionDefinitions).sort((a, b) => a.label.localeCompare(b.label))
 	}, [collectionDefinitions])
 
 	if (!visible) return null
@@ -38,11 +39,14 @@ export function CollectionsBrowser() {
 
 		const handleEntryClick = (slug: string, sourcePath: string, pathname?: string) => {
 			closeCollectionsBrowser()
-			// Navigate to the collection detail page to edit inline.
-			// Use known pathname or construct one from collection/slug.
-			const targetPath = pathname || `/${selected}/${slug}`
-			savePendingEntryNavigation({ collectionName: selected, slug, sourcePath, pathname: targetPath })
-			window.location.href = targetPath
+			if (pathname) {
+				// Navigate to the collection detail page to edit inline.
+				savePendingEntryNavigation({ collectionName: selected, slug, sourcePath, pathname })
+				window.location.href = pathname
+			} else {
+				// No detail page exists for this entry — open the markdown editor inline.
+				openMarkdownEditorForEntry(selected, slug, sourcePath, def)
+			}
 		}
 
 		const handleAddNew = () => {

package/src/editor/components/fields.tsx

@@ -54,7 +54,7 @@ export function TextField({ label, value, placeholder, onChange, isDirty, onRese
 				placeholder={placeholder}
 				onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 				class={cn(
-					'w-full px-3 py-2 bg-white/10 border rounded-cms-md text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
+					'w-full px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
 					isDirty
 						? 'border-cms-primary focus:border-cms-primary focus:ring-cms-primary/30'
 						: 'border-white/20 focus:border-white/40 focus:ring-white/10',
@@ -90,7 +90,7 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 					placeholder={placeholder}
 					onInput={(e) => onChange((e.target as HTMLInputElement).value)}
 					class={cn(
-						'flex-1 px-3 py-2 bg-white/10 border rounded-cms-md text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
+						'flex-1 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
 						isDirty
 							? 'border-cms-primary focus:border-cms-primary focus:ring-cms-primary/30'
 							: 'border-white/20 focus:border-white/40 focus:ring-white/10',
@@ -100,7 +100,7 @@ export function ImageField({ label, value, placeholder, onChange, onBrowse, isDi
 				<button
 					type="button"
 					onClick={onBrowse}
-					class="px-3 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-cms-md text-sm text-white transition-colors cursor-pointer"
+					class="px-3 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-cms-sm text-sm text-white transition-colors cursor-pointer"
 					data-cms-ui
 				>
 					Browse
@@ -132,7 +132,7 @@ export function SelectField({ label, value, options, onChange, isDirty, onReset,
 				value={value ?? ''}
 				onChange={(e) => onChange((e.target as HTMLSelectElement).value)}
 				class={cn(
-					'w-full px-3 py-2 bg-white/10 border rounded-cms-md text-sm text-white focus:outline-none focus:ring-1 transition-colors cursor-pointer',
+					'w-full px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white focus:outline-none focus:ring-1 transition-colors cursor-pointer',
 					isDirty
 						? 'border-cms-primary focus:border-cms-primary focus:ring-cms-primary/30'
 						: 'border-white/20 focus:border-white/40 focus:ring-white/10',
@@ -220,7 +220,7 @@ export function NumberField({ label, value, placeholder, min, max, onChange, isD
 					onChange(val === '' ? undefined : Number(val))
 				}}
 				class={cn(
-					'w-full px-3 py-2 bg-white/10 border rounded-cms-md text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
+					'w-full px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
 					isDirty
 						? 'border-cms-primary focus:border-cms-primary focus:ring-cms-primary/30'
 						: 'border-white/20 focus:border-white/40 focus:ring-white/10',
@@ -341,7 +341,7 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 				onKeyDown={handleKeyDown}
 				autocomplete="off"
 				class={cn(
-					'w-full px-3 py-2 bg-white/10 border rounded-cms-md text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
+					'w-full px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 transition-colors',
 					isDirty
 						? 'border-cms-primary focus:border-cms-primary focus:ring-cms-primary/30'
 						: 'border-white/20 focus:border-white/40 focus:ring-white/10',
@@ -351,7 +351,7 @@ export function ComboBoxField({ label, value, placeholder, options, onChange, is
 			{showDropdown && (
 				<div
 					ref={listRef}
-					class="absolute z-50 left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-cms-dark border border-white/15 rounded-cms-md shadow-lg"
+					class="absolute z-50 left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-cms-dark border border-white/15 rounded-cms-sm shadow-lg"
 					data-cms-ui
 				>
 					{filtered.map((opt, i) => (

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

@@ -1,3 +1,4 @@
+import { useState } from 'preact/hooks'
 import { markdownEditorState, openMediaLibraryWithCallback, updateMarkdownFrontmatter } from '../signals'
 import type { CollectionDefinition, FieldDefinition, MarkdownPageEntry } from '../types'
 import { ComboBoxField, ImageField, NumberField, TextField, ToggleField } from './fields'
@@ -87,6 +88,17 @@ export function FrontmatterField({
 		)
 	}
 
+	// Object field - render nested fields with add/remove
+	if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+		return (
+			<ObjectFields
+				label={label}
+				value={value as Record<string, unknown>}
+				onChange={onChange}
+			/>
+		)
+	}
+
 	// String field (default) - check if it's a long text (excerpt, etc.)
 	const isLongText = fieldKey.toLowerCase().includes('excerpt')
 		|| fieldKey.toLowerCase().includes('description')
@@ -158,7 +170,7 @@ export function CreateModeFrontmatter({
 						}
 					}}
 					placeholder="url-friendly-slug"
-					class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-cms-md text-sm text-white placeholder-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10"
+					class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-cms-sm text-sm text-white placeholder-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10"
 					data-cms-ui
 				/>
 				<p class="mt-1 text-xs text-white/40">
@@ -214,7 +226,7 @@ export function EditModeFrontmatter({
 				<input
 					type="text"
 					value={page.slug}
-					class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-cms-md text-sm text-white/50 focus:outline-none cursor-not-allowed"
+					class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-cms-sm text-sm text-white/50 focus:outline-none cursor-not-allowed"
 					disabled
 					data-cms-ui
 				/>
@@ -415,6 +427,32 @@ export function SchemaFrontmatterField({
 			)
 		}
 
+		case 'object': {
+			const obj = (value ?? {}) as Record<string, unknown>
+			const nestedFields = field.fields ?? []
+			if (nestedFields.length > 0) {
+				// Schema-defined nested fields + any extra keys from the actual value
+				const schemaNames = new Set(nestedFields.map((f) => f.name))
+				const extraKeys = Object.keys(obj).filter((k) => !schemaNames.has(k))
+				return (
+					<ObjectFields
+						label={label}
+						value={obj}
+						onChange={onChange}
+						schemaFields={nestedFields}
+						extraKeys={extraKeys}
+					/>
+				)
+			}
+			return (
+				<ObjectFields
+					label={label}
+					value={obj}
+					onChange={onChange}
+				/>
+			)
+		}
+
 		default:
 			return (
 				<div class="flex flex-col gap-1" data-cms-ui>
@@ -431,6 +469,129 @@ export function SchemaFrontmatterField({
 	}
 }
 
+// ============================================================================
+// Object Fields — renders nested fields with add/remove key support
+// ============================================================================
+
+interface ObjectFieldsProps {
+	label: string
+	value: Record<string, unknown>
+	onChange: (value: unknown) => void
+	schemaFields?: FieldDefinition[]
+	extraKeys?: string[]
+}
+
+function ObjectFields({ label, value, onChange, schemaFields, extraKeys }: ObjectFieldsProps) {
+	const [newKey, setNewKey] = useState('')
+	const obj = value ?? {}
+
+	const handleRemoveKey = (key: string) => {
+		const { [key]: _, ...rest } = obj
+		onChange(rest)
+	}
+
+	const handleAddKey = () => {
+		const trimmed = newKey.trim()
+		if (!trimmed || trimmed in obj) return
+		onChange({ ...obj, [trimmed]: '' })
+		setNewKey('')
+	}
+
+	return (
+		<div class="flex flex-col gap-2 col-span-2" data-cms-ui>
+			<label class="text-xs text-white/60 font-medium">{label}</label>
+			<div class="space-y-2 pl-3 border-l-2 border-white/10">
+				{schemaFields
+					? (
+						<>
+							{schemaFields.map((subField) => (
+								<div key={subField.name} class="flex items-end gap-2">
+									<div class="flex-1 min-w-0">
+										<SchemaFrontmatterField
+											field={subField}
+											value={obj[subField.name]}
+											onChange={(newValue) => onChange({ ...obj, [subField.name]: newValue })}
+										/>
+									</div>
+								</div>
+							))}
+							{(extraKeys ?? []).map((key) => (
+								<div key={key} class="flex items-end gap-2">
+									<div class="flex-1 min-w-0">
+										<FrontmatterField
+											fieldKey={key}
+											value={obj[key]}
+											onChange={(newValue) => onChange({ ...obj, [key]: newValue })}
+										/>
+									</div>
+									<button
+										type="button"
+										onClick={() => handleRemoveKey(key)}
+										class="p-1 mb-1 text-white/30 hover:text-red-400 transition-colors shrink-0"
+										title={`Remove ${key}`}
+										data-cms-ui
+									>
+										<RemoveIcon />
+									</button>
+								</div>
+							))}
+						</>
+					)
+					: Object.entries(obj).map(([key, subValue]) => (
+						<div key={key} class="flex items-end gap-2">
+							<div class="flex-1 min-w-0">
+								<FrontmatterField
+									fieldKey={key}
+									value={subValue}
+									onChange={(newValue) => onChange({ ...obj, [key]: newValue })}
+								/>
+							</div>
+							<button
+								type="button"
+								onClick={() => handleRemoveKey(key)}
+								class="p-1 mb-1 text-white/30 hover:text-red-400 transition-colors shrink-0"
+								title={`Remove ${key}`}
+								data-cms-ui
+							>
+								<RemoveIcon />
+							</button>
+						</div>
+					))
+				}
+				{/* Add new key */}
+				<div class="flex items-center gap-2 pt-1">
+					<input
+						type="text"
+						value={newKey}
+						onInput={(e) => setNewKey((e.target as HTMLInputElement).value)}
+						onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAddKey() } }}
+						placeholder="New field name..."
+						class="flex-1 px-2 py-1 text-xs bg-white/5 border border-white/10 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-white/30"
+						data-cms-ui
+					/>
+					<button
+						type="button"
+						onClick={handleAddKey}
+						disabled={!newKey.trim() || newKey.trim() in obj}
+						class="px-2 py-1 text-xs font-medium text-white/60 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 rounded-cms-sm transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+						data-cms-ui
+					>
+						+ Add
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+function RemoveIcon() {
+	return (
+		<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+		</svg>
+	)
+}
+
 // ============================================================================
 // Helper Functions
 // ============================================================================

package/src/editor/components/outline.tsx

@@ -3,6 +3,7 @@ import { getColorPreview, parseColorClass } from '../color-utils'
 import { Z_INDEX } from '../constants'
 import { isPageDark } from '../dom'
 import * as signals from '../signals'
+import type { Attribute } from '../../types'
 
 export interface OutlineProps {
 	visible: boolean
@@ -14,10 +15,14 @@ export interface OutlineProps {
 	element?: HTMLElement | null
 	/** CMS ID of the hovered element */
 	cmsId?: string | null
+	/** Current text style classes from pending changes (reactive) */
+	textStyleClasses?: Record<string, Attribute>
 	/** Callback when a color swatch is clicked */
 	onColorClick?: (cmsId: string, rect: DOMRect) => void
 	/** Callback when an attribute indicator is clicked */
 	onAttributeClick?: (cmsId: string, rect: DOMRect) => void
+	/** Callback when a text style toggle is clicked */
+	onTextStyleChange?: (cmsId: string, styleType: string, oldClass: string, newClass: string) => void
 }
 
 // Minimum space needed to show label outside the element
@@ -30,7 +35,7 @@ const STICKY_PADDING = 8
  * Uses a custom element with Shadow DOM to avoid style conflicts.
  */
 export function Outline(
-	{ visible, rect, isComponent = false, componentName, tagName, element, cmsId, onColorClick, onAttributeClick }: OutlineProps,
+	{ visible, rect, isComponent = false, componentName, tagName, element, cmsId, textStyleClasses, onColorClick, onAttributeClick, onTextStyleChange }: OutlineProps,
 ) {
 	const containerRef = useRef<HTMLDivElement>(null)
 	const shadowRootRef = useRef<ShadowRoot | null>(null)
@@ -182,6 +187,60 @@ export function Outline(
         .attr-button:hover svg {
           color: #DFFF40;
         }
+
+        .text-style-btn {
+          width: 28px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: transparent;
+          border: 1px solid transparent;
+          border-radius: 6px;
+          cursor: pointer;
+          transition: all 150ms ease;
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+          font-size: 13px;
+          color: rgba(255,255,255,0.7);
+          padding: 0;
+          line-height: 1;
+        }
+
+        .text-style-btn:hover {
+          background: rgba(255,255,255,0.1);
+          color: #DFFF40;
+        }
+
+        .text-style-btn.active {
+          background: rgba(223, 255, 64, 0.15);
+          border-color: rgba(223, 255, 64, 0.4);
+          color: #DFFF40;
+        }
+
+        .text-size-select {
+          height: 28px;
+          background: transparent;
+          border: 1px solid rgba(255,255,255,0.15);
+          border-radius: 6px;
+          color: rgba(255,255,255,0.7);
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+          font-size: 11px;
+          padding: 0 4px;
+          cursor: pointer;
+          transition: all 150ms ease;
+          -webkit-appearance: none;
+          appearance: none;
+        }
+
+        .text-size-select:hover {
+          border-color: rgba(223, 255, 64, 0.4);
+          color: #DFFF40;
+        }
+
+        .text-size-select:focus {
+          outline: none;
+          border-color: #DFFF40;
+        }
       `
 
 			overlayRef.current = document.createElement('div')
@@ -305,15 +364,15 @@ export function Outline(
 
 			// Check for color swatches and attribute button
 			const manifest = signals.manifest.value
-			const pendingColorChange = cmsId ? signals.pendingColorChanges.value.get(cmsId) : null
 			const entry = cmsId ? manifest.entries[cmsId] : null
-			const colorClasses = pendingColorChange?.newClasses ?? entry?.colorClasses
+			const colorClasses = textStyleClasses ?? entry?.colorClasses
 
 			const hasColorSwatches = colorClasses && (colorClasses.bg?.value || colorClasses.text?.value) && onColorClick
 			const hasEditableAttributes = entry?.attributes && Object.keys(entry.attributes).length > 0
+			const needsElementLevelStyling = entry?.allowStyling === false && onTextStyleChange
 
-			// Show unified toolbar if there are swatches or attribute button
-			if ((hasColorSwatches || hasEditableAttributes) && (onColorClick || onAttributeClick)) {
+			// Show unified toolbar if there are swatches, attribute button, or element-level text styling
+			if ((hasColorSwatches || hasEditableAttributes || needsElementLevelStyling) && (onColorClick || onAttributeClick || onTextStyleChange)) {
 				toolbarRef.current.className = 'element-toolbar'
 				toolbarRef.current.innerHTML = ''
 
@@ -390,11 +449,111 @@ export function Outline(
 					}
 					toolbarRef.current.appendChild(attrButton)
 				}
+
+				// Add text style buttons for elements where inline styling is unavailable
+				if (needsElementLevelStyling && cmsId) {
+					// Add divider if there are other toolbar items before
+					if (hasColorSwatches || hasEditableAttributes) {
+						const divider = document.createElement('div')
+						divider.className = 'toolbar-divider'
+						toolbarRef.current.appendChild(divider)
+					}
+
+					const currentClasses = textStyleClasses ?? colorClasses ?? {}
+
+					// Bold toggle
+					const boldBtn = document.createElement('button')
+					const isBold = currentClasses.fontWeight?.value === 'font-bold'
+					boldBtn.className = `text-style-btn${isBold ? ' active' : ''}`
+					boldBtn.innerHTML = '<strong>B</strong>'
+					boldBtn.title = isBold ? 'Remove bold' : 'Bold'
+					boldBtn.onclick = (e) => {
+						e.stopPropagation()
+						const oldClass = currentClasses.fontWeight?.value || ''
+						const newClass = isBold ? 'font-normal' : 'font-bold'
+						onTextStyleChange!(cmsId!, 'fontWeight', oldClass, newClass)
+					}
+					toolbarRef.current.appendChild(boldBtn)
+
+					// Italic toggle
+					const italicBtn = document.createElement('button')
+					const isItalic = currentClasses.fontStyle?.value === 'italic'
+					italicBtn.className = `text-style-btn${isItalic ? ' active' : ''}`
+					italicBtn.innerHTML = '<em>I</em>'
+					italicBtn.title = isItalic ? 'Remove italic' : 'Italic'
+					italicBtn.onclick = (e) => {
+						e.stopPropagation()
+						const oldClass = currentClasses.fontStyle?.value || ''
+						const newClass = isItalic ? 'not-italic' : 'italic'
+						onTextStyleChange!(cmsId!, 'fontStyle', oldClass, newClass)
+					}
+					toolbarRef.current.appendChild(italicBtn)
+
+					// Underline toggle
+					const underlineBtn = document.createElement('button')
+					const isUnderline = currentClasses.textDecoration?.value === 'underline'
+					underlineBtn.className = `text-style-btn${isUnderline ? ' active' : ''}`
+					underlineBtn.innerHTML = '<span style="text-decoration:underline">U</span>'
+					underlineBtn.title = isUnderline ? 'Remove underline' : 'Underline'
+					underlineBtn.onclick = (e) => {
+						e.stopPropagation()
+						const oldClass = currentClasses.textDecoration?.value || ''
+						const newClass = isUnderline ? 'no-underline' : 'underline'
+						onTextStyleChange!(cmsId!, 'textDecoration', oldClass, newClass)
+					}
+					toolbarRef.current.appendChild(underlineBtn)
+
+					// Strikethrough toggle
+					const strikeBtn = document.createElement('button')
+					const isStrike = currentClasses.textDecoration?.value === 'line-through'
+					strikeBtn.className = `text-style-btn${isStrike ? ' active' : ''}`
+					strikeBtn.innerHTML = '<span style="text-decoration:line-through">S</span>'
+					strikeBtn.title = isStrike ? 'Remove strikethrough' : 'Strikethrough'
+					strikeBtn.onclick = (e) => {
+						e.stopPropagation()
+						const oldClass = currentClasses.textDecoration?.value || ''
+						const newClass = isStrike ? 'no-underline' : 'line-through'
+						onTextStyleChange!(cmsId!, 'textDecoration', oldClass, newClass)
+					}
+					toolbarRef.current.appendChild(strikeBtn)
+
+					// Font size dropdown
+					const sizeSelect = document.createElement('select')
+					sizeSelect.className = 'text-size-select'
+					sizeSelect.title = 'Font size'
+					const sizeOptions = [
+						{ value: '', label: 'Size' },
+						{ value: 'text-xs', label: 'XS' },
+						{ value: 'text-sm', label: 'SM' },
+						{ value: 'text-base', label: 'Base' },
+						{ value: 'text-lg', label: 'LG' },
+						{ value: 'text-xl', label: 'XL' },
+						{ value: 'text-2xl', label: '2XL' },
+						{ value: 'text-3xl', label: '3XL' },
+					]
+					const currentSize = currentClasses.fontSize?.value || ''
+					for (const opt of sizeOptions) {
+						const option = document.createElement('option')
+						option.value = opt.value
+						option.textContent = opt.label
+						if (opt.value === currentSize) option.selected = true
+						sizeSelect.appendChild(option)
+					}
+					sizeSelect.onchange = (e) => {
+						e.stopPropagation()
+						const newClass = (e.target as HTMLSelectElement).value
+						if (newClass) {
+							const oldClass = currentClasses.fontSize?.value || ''
+							onTextStyleChange!(cmsId!, 'fontSize', oldClass, newClass)
+						}
+					}
+					toolbarRef.current.appendChild(sizeSelect)
+				}
 			} else {
 				toolbarRef.current.className = 'element-toolbar hidden'
 			}
 		}
-	}, [visible, rect, isComponent, componentName, tagName, cmsId, onColorClick, onAttributeClick])
+	}, [visible, rect, isComponent, componentName, tagName, cmsId, textStyleClasses, onColorClick, onAttributeClick, onTextStyleChange])
 
 	return (
 		<div