@nuasite/cms 0.6.0 → 0.7.0

package/package.json

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

package/src/build-processor.ts

@@ -403,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
 			}
 		}
@@ -414,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) {

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

package/src/editor/components/text-style-toolbar.tsx

@@ -196,7 +196,7 @@ export function TextStyleToolbar({ visible, rect, element, onStyleChange }: Text
 	return (
 		<div
 			data-cms-ui
-			onMouseDown={(e) => e.stopPropagation()}
+			onMouseDown={(e) => { e.preventDefault(); e.stopPropagation() }}
 			onClick={(e) => e.stopPropagation()}
 			style={{
 				position: 'fixed',

package/src/editor/editor.ts

@@ -619,14 +619,14 @@ export async function saveAllChanges(
 			// For each color type that changed, add a separate change entry
 			const { originalClasses, newClasses } = change
 			const entry = manifest.entries[cmsId]
-			const colorTypes = ['bg', 'text', 'border', 'hoverBg', 'hoverText'] as const
+			const classTypes = ['bg', 'text', 'border', 'hoverBg', 'hoverText', 'fontWeight', 'fontStyle', 'textDecoration', 'fontSize'] as const
 
 			// Find the best source info from any color type that has it
 			// (all color types share the same class attribute on the same element)
 			let sharedSourcePath: string | undefined
 			let sharedSourceLine: number | undefined
 			let sharedSourceSnippet: string | undefined
-			for (const ct of colorTypes) {
+			for (const ct of classTypes) {
 				const orig = originalClasses[ct]
 				const curr = newClasses[ct]
 				const sp = curr?.sourcePath ?? orig?.sourcePath
@@ -639,10 +639,10 @@ export async function saveAllChanges(
 				}
 			}
 
-			for (const colorType of colorTypes) {
-				const origAttr = originalClasses[colorType]
-				const newAttr = newClasses[colorType]
-				if (newAttr?.value && newAttr.value !== origAttr?.value) {
+			for (const classType of classTypes) {
+				const origAttr = originalClasses[classType]
+				const newAttr = newClasses[classType]
+				if (newAttr && newAttr.value !== (origAttr?.value ?? '')) {
 					const bestSourcePath = newAttr.sourcePath ?? origAttr?.sourcePath ?? sharedSourcePath
 					const bestSourceLine = newAttr.sourceLine ?? origAttr?.sourceLine ?? sharedSourceLine
 					const bestSourceSnippet = newAttr.sourceSnippet ?? origAttr?.sourceSnippet ?? sharedSourceSnippet
@@ -656,7 +656,7 @@ export async function saveAllChanges(
 						colorChange: {
 							oldClass: origAttr?.value || '',
 							newClass: newAttr.value,
-							type: colorType,
+							type: classType,
 							sourcePath: bestSourcePath,
 							sourceLine: bestSourceLine,
 							sourceSnippet: bestSourceSnippet,
@@ -1033,7 +1033,7 @@ function setupColorTracking(
 export function handleColorChange(
 	config: CmsConfig,
 	cmsId: string,
-	colorType: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText',
+	colorType: string,
 	oldClass: string,
 	newClass: string,
 	onStateChange?: () => void,

package/src/editor/index.tsx

@@ -55,6 +55,26 @@ import { hasPendingEntryNavigation, loadEditingState, loadSettingsFromStorage, s
 import CMS_STYLES from './styles.css?inline'
 import { generateCSSVariables, resolveTheme } from './themes'
 
+/** Inline CSS values for Tailwind text style classes (for preview before save) */
+const TEXT_STYLE_INLINE_CSS: Record<string, Record<string, string>> = {
+	'font-normal': { fontWeight: '400' },
+	'font-medium': { fontWeight: '500' },
+	'font-semibold': { fontWeight: '600' },
+	'font-bold': { fontWeight: '700' },
+	'italic': { fontStyle: 'italic' },
+	'not-italic': { fontStyle: 'normal' },
+	'underline': { textDecoration: 'underline' },
+	'line-through': { textDecoration: 'line-through' },
+	'no-underline': { textDecoration: 'none' },
+	'text-xs': { fontSize: '0.75rem', lineHeight: '1rem' },
+	'text-sm': { fontSize: '0.875rem', lineHeight: '1.25rem' },
+	'text-base': { fontSize: '1rem', lineHeight: '1.5rem' },
+	'text-lg': { fontSize: '1.125rem', lineHeight: '1.75rem' },
+	'text-xl': { fontSize: '1.25rem', lineHeight: '1.75rem' },
+	'text-2xl': { fontSize: '1.5rem', lineHeight: '2rem' },
+	'text-3xl': { fontSize: '1.875rem', lineHeight: '2.25rem' },
+}
+
 const CmsUI = () => {
 	const config = signals.config.value
 	const outlineState = useElementDetection()
@@ -218,6 +238,65 @@ const CmsUI = () => {
 		signals.openAttributeEditor(cmsId, rect)
 	}, [])
 
+	// Handle text style change from outline (element-level styling via class toggle)
+	const handleOutlineTextStyleChange = useCallback((cmsId: string, styleType: string, oldClass: string, newClass: string) => {
+		let change = signals.pendingColorChanges.value.get(cmsId)
+
+		// Create pending color change entry if it doesn't exist yet
+		// (elements with allowStyling=false may lack colorClasses but still need text style tracking)
+		if (!change) {
+			const el = document.querySelector(`[data-cms-id="${cmsId}"]`) as HTMLElement
+			if (!el) return
+
+			const entry = signals.manifest.value.entries[cmsId]
+			const originalClasses: Record<string, import('../types').Attribute> = {}
+			const newClasses: Record<string, import('../types').Attribute> = {}
+			if (entry?.colorClasses) {
+				for (const [key, attr] of Object.entries(entry.colorClasses)) {
+					originalClasses[key] = { ...attr }
+					newClasses[key] = { ...attr }
+				}
+			}
+
+			signals.setPendingColorChange(cmsId, {
+				element: el,
+				cmsId,
+				originalClasses,
+				newClasses,
+				isDirty: false,
+			})
+			change = signals.pendingColorChanges.value.get(cmsId)!
+		}
+
+		// Apply the class change on the DOM element
+		const el = change.element
+		const previousClassName = el.className
+		const previousStyleCssText = el.style.cssText
+
+		if (oldClass) {
+			el.classList.remove(oldClass)
+			const oldCss = TEXT_STYLE_INLINE_CSS[oldClass]
+			if (oldCss) {
+				for (const prop of Object.keys(oldCss)) {
+					;(el.style as any)[prop] = ''
+				}
+			}
+		}
+		el.classList.add(newClass)
+
+		// Apply inline styles for immediate visual preview
+		// (Tailwind classes not present in source won't be in the compiled CSS)
+		const newCss = TEXT_STYLE_INLINE_CSS[newClass]
+		if (newCss) {
+			for (const [prop, value] of Object.entries(newCss)) {
+				;(el.style as any)[prop] = value
+			}
+		}
+
+		// Delegate to handleColorChange (same class-replacement mechanism)
+		handleColorChange(config, cmsId, styleType, oldClass, newClass, updateUI, previousClassName, previousStyleCssText)
+	}, [config, updateUI])
+
 	// Handle attribute editor close
 	const handleAttributeEditorClose = useCallback(() => {
 		signals.closeAttributeEditor()
@@ -235,12 +314,24 @@ const CmsUI = () => {
 	const showEditableHighlights = signals.showEditableHighlights.value
 	const hasSeoData = !!(manifest as any).seo
 
+	// Check if selected text element allows inline styling
+	const selectedElementCmsId = textSelectionState.element?.getAttribute('data-cms-id')
+	const selectedEntry = selectedElementCmsId ? manifest.entries[selectedElementCmsId] : undefined
+	const isTextStylingAllowed = selectedEntry?.allowStyling !== false
+
 	// Get color toolbar data
+	const pendingColorChanges = signals.pendingColorChanges.value
 	const colorEditorElement = colorEditorState.targetElementId
-		? signals.pendingColorChanges.value.get(colorEditorState.targetElementId)?.element ?? null
+		? pendingColorChanges.get(colorEditorState.targetElementId)?.element ?? null
 		: null
 	const colorEditorCurrentClasses = colorEditorState.targetElementId
-		? signals.pendingColorChanges.value.get(colorEditorState.targetElementId)?.newClasses
+		? pendingColorChanges.get(colorEditorState.targetElementId)?.newClasses
+		: undefined
+
+	// Get current text style classes for the outlined element (reactive - triggers re-render on change)
+	const outlineCmsId = outlineState.cmsId
+	const outlineTextStyleClasses = outlineCmsId
+		? pendingColorChanges.get(outlineCmsId)?.newClasses
 		: undefined
 
 	return (
@@ -258,8 +349,10 @@ const CmsUI = () => {
 					tagName={outlineState.tagName}
 					element={outlineState.element}
 					cmsId={outlineState.cmsId}
+					textStyleClasses={outlineTextStyleClasses}
 					onColorClick={handleOutlineColorClick}
 					onAttributeClick={handleOutlineAttributeClick}
+					onTextStyleChange={handleOutlineTextStyleChange}
 				/>
 			</ErrorBoundary>
 
@@ -309,7 +402,7 @@ const CmsUI = () => {
 
 			<ErrorBoundary componentName="Text Style Toolbar">
 				<TextStyleToolbar
-					visible={textSelectionState.hasSelection && isEditing && !isAIProcessing}
+					visible={textSelectionState.hasSelection && isEditing && !isAIProcessing && isTextStylingAllowed}
 					rect={textSelectionState.rect}
 					element={textSelectionState.element}
 					onStyleChange={updateUI}

package/src/editor/types.ts

@@ -138,8 +138,8 @@ export interface ColorChangePayload {
 	oldClass: string
 	/** The new color class (e.g., 'bg-red-500') */
 	newClass: string
-	/** Type of color change: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText' */
-	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText'
+	/** Type of color/style change */
+	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText' | 'fontWeight' | 'fontStyle' | 'textDecoration' | 'fontSize'
 	/** Path to the source file where the color class is defined */
 	sourcePath?: string
 	/** Line number where the color class is defined */

package/src/handlers/source-writer.ts

@@ -8,7 +8,7 @@ import { acquireFileLock, escapeReplacement, normalizePagePath, resolveAndValida
 export interface ColorChangePayload {
 	oldClass: string
 	newClass: string
-	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText'
+	type: 'bg' | 'text' | 'border' | 'hoverBg' | 'hoverText' | 'fontWeight' | 'fontStyle' | 'textDecoration' | 'fontSize'
 	sourcePath?: string
 	sourceLine?: number
 	sourceSnippet?: string
@@ -360,7 +360,11 @@ function replaceClassInAttribute(
 		const idx = classes.indexOf(oldClass)
 		if (idx === -1) return null
 
-		classes[idx] = newClass
+		if (newClass) {
+			classes[idx] = newClass
+		} else {
+			classes.splice(idx, 1)
+		}
 		return line.replace(classAttrPattern, `${prefix}${quote}${classes.join(' ')}${quote}`)
 	}
 

package/src/html-processor.ts

@@ -1,7 +1,7 @@
 import { type HTMLElement as ParsedHTMLElement, parse } from 'node-html-parser'
 import { processSeoFromHtml } from './seo-processor'
 import { enhanceManifestWithSourceSnippets } from './source-finder'
-import { extractColorClasses } from './tailwind-colors'
+import { extractColorClasses, extractTextStyleClasses } from './tailwind-colors'
 import type { Attribute, ComponentInstance, ImageMetadata, ManifestEntry, PageSeoData, SeoOptions } from './types'
 import { generateStableId } from './utils'
 
@@ -830,9 +830,13 @@ export async function processHtml(
 			// Generate stable ID based on content and context
 			const stableId = generateStableId(tag, entryText, entrySourcePath)
 
-			// Extract color classes for buttons and other elements
+			// Extract color classes and text style classes for buttons and other elements
 			const classAttr = node.getAttribute('class')
 			const colorClasses = extractColorClasses(classAttr)
+			const textStyleClasses = extractTextStyleClasses(classAttr)
+			const allTrackedClasses = colorClasses || textStyleClasses
+				? { ...colorClasses, ...textStyleClasses }
+				: undefined
 
 			// Extract all relevant attributes for git diff tracking
 			const attributes = extractAllAttributes(node)
@@ -856,8 +860,8 @@ export async function processHtml(
 				stableId,
 				// Image metadata for image entries
 				imageMetadata: imageInfo?.metadata,
-				// Color classes for buttons/styled elements
-				colorClasses,
+				// Color and text style classes for buttons/styled elements
+				colorClasses: allTrackedClasses,
 				// All attributes with resolved values (isStatic will be updated later from source)
 				attributes,
 			}

package/src/source-finder/snippet-utils.ts

@@ -618,6 +618,7 @@ export async function enhanceManifestWithSourceSnippets(
 								sourceLine: matchingDef.line,
 								sourceSnippet: defSnippet,
 								variableName: buildDefinitionPath(matchingDef),
+								allowStyling: false,
 								attributes,
 								colorClasses,
 								sourceHash,
@@ -666,6 +667,7 @@ export async function enhanceManifestWithSourceSnippets(
 										sourceLine: result.line,
 										sourceSnippet: propSnippet,
 										variableName: result.variableName,
+										allowStyling: false,
 										attributes,
 										colorClasses,
 										sourceHash: propSourceHash,
@@ -691,6 +693,7 @@ export async function enhanceManifestWithSourceSnippets(
 										sourceLine: result.line,
 										sourceSnippet: parentSnippet,
 										variableName: result.variableName,
+										allowStyling: false,
 										attributes,
 										colorClasses,
 										sourceHash: propSourceHash,

package/src/tailwind-colors.ts

@@ -776,6 +776,39 @@ export function extractColorClasses(classAttr: string | null | undefined): Recor
 	return Object.keys(result).length > 0 ? result : undefined
 }
 
+/**
+ * Regex patterns for matching text style classes on elements.
+ */
+const TEXT_STYLE_CLASS_PATTERNS: Record<string, RegExp> = {
+	fontWeight: /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
+	fontStyle: /^(italic|not-italic)$/,
+	textDecoration: /^(underline|overline|line-through|no-underline)$/,
+	fontSize: /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
+}
+
+/**
+ * Extract text style classes from an element's class attribute.
+ * Returns a Record<string, Attribute> with keys: fontWeight, fontStyle, textDecoration, fontSize.
+ * Pattern: same as extractColorClasses — scan classes, match patterns, return first match per category.
+ */
+export function extractTextStyleClasses(classAttr: string | null | undefined): Record<string, Attribute> | undefined {
+	if (!classAttr) return undefined
+
+	const classes = classAttr.split(/\s+/).filter(Boolean)
+	const result: Record<string, Attribute> = {}
+
+	for (const cls of classes) {
+		for (const [key, pattern] of Object.entries(TEXT_STYLE_CLASS_PATTERNS)) {
+			if (pattern.test(cls) && !(key in result)) {
+				result[key] = { value: cls }
+				break
+			}
+		}
+	}
+
+	return Object.keys(result).length > 0 ? result : undefined
+}
+
 /**
  * Check if a class is a color class (including gradient colors).
  */

package/src/types.ts

@@ -161,6 +161,9 @@ export interface ManifestEntry {
 	colorClasses?: Record<string, Attribute>
 	/** All HTML attributes with source information */
 	attributes?: Record<string, Attribute>
+	/** Whether inline text styling (bold, italic, etc.) can be applied.
+	 *  False when text comes from a string variable/prop that cannot contain HTML markup. */
+	allowStyling?: boolean
 }
 
 export interface ComponentInstance {