@nuasite/cms-marker 0.0.53 → 0.0.54

package/src/source-finder.ts

@@ -1,5 +1,7 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
+import type { ManifestEntry } from './types'
+import { generateSourceHash } from './utils'
 
 export interface SourceLocation {
 	file: string
@@ -351,9 +353,10 @@ async function searchForPropInParents(dir: string, textContent: string): Promise
 }
 
 /**
- * Extract complete tag snippet including content and indentation
+ * Extract complete tag snippet including content and indentation.
+ * Exported for use in html-processor to populate sourceSnippet.
  */
-function extractCompleteTagSnippet(lines: string[], startLine: number, tag: string): string {
+export function extractCompleteTagSnippet(lines: string[], startLine: number, tag: string): string {
 	const snippetLines: string[] = []
 	let depth = 0
 	let foundClosing = false
@@ -390,6 +393,68 @@ function extractCompleteTagSnippet(lines: string[], startLine: number, tag: stri
 	return snippetLines.join('\n')
 }
 
+/**
+ * Extract innerHTML from a complete tag snippet.
+ * Given `<p class="foo">content here</p>`, returns `content here`.
+ *
+ * @param snippet - The complete tag snippet from source
+ * @param tag - The tag name (e.g., 'p', 'h1')
+ * @returns The innerHTML portion, or undefined if can't extract
+ */
+export function extractInnerHtmlFromSnippet(snippet: string, tag: string): string | undefined {
+	// Match opening tag (with any attributes) and extract content until closing tag
+	// Handle both single-line and multi-line cases
+	const openTagPattern = new RegExp(`<${tag}(?:\\s[^>]*)?>`, 'i')
+	const closeTagPattern = new RegExp(`</${tag}>`, 'i')
+
+	const openMatch = snippet.match(openTagPattern)
+	if (!openMatch) return undefined
+
+	const openTagEnd = openMatch.index! + openMatch[0].length
+	const closeMatch = snippet.match(closeTagPattern)
+	if (!closeMatch) return undefined
+
+	const closeTagStart = closeMatch.index!
+
+	// Extract content between opening and closing tags
+	if (closeTagStart > openTagEnd) {
+		return snippet.substring(openTagEnd, closeTagStart)
+	}
+
+	return undefined
+}
+
+/**
+ * Read source file and extract the innerHTML at the specified line.
+ *
+ * @param sourceFile - Path to source file (relative to cwd)
+ * @param sourceLine - 1-indexed line number
+ * @param tag - The tag name
+ * @returns The innerHTML from source, or undefined if can't extract
+ */
+export async function extractSourceInnerHtml(
+	sourceFile: string,
+	sourceLine: number,
+	tag: string,
+): Promise<string | undefined> {
+	try {
+		const filePath = path.isAbsolute(sourceFile)
+			? sourceFile
+			: path.join(process.cwd(), sourceFile)
+
+		const content = await fs.readFile(filePath, 'utf-8')
+		const lines = content.split('\n')
+
+		// Extract the complete tag snippet
+		const snippet = extractCompleteTagSnippet(lines, sourceLine - 1, tag)
+
+		// Extract innerHTML from the snippet
+		return extractInnerHtmlFromSnippet(snippet, tag)
+	} catch {
+		return undefined
+	}
+}
+
 /**
  * Extract variable references from frontmatter
  */
@@ -669,8 +734,10 @@ export async function findMarkdownSourceLocation(
 					let value = match[2]?.trim() || ''
 
 					// Handle quoted strings
-					if ((value.startsWith('"') && value.endsWith('"')) ||
-						(value.startsWith("'") && value.endsWith("'"))) {
+					if (
+						(value.startsWith('"') && value.endsWith('"'))
+						|| (value.startsWith("'") && value.endsWith("'"))
+					) {
 						value = value.slice(1, -1)
 					}
 
@@ -742,8 +809,10 @@ export async function parseMarkdownContent(
 					let value = match[2]?.trim() || ''
 
 					// Handle quoted strings
-					if ((value.startsWith('"') && value.endsWith('"')) ||
-						(value.startsWith("'") && value.endsWith("'"))) {
+					if (
+						(value.startsWith('"') && value.endsWith('"'))
+						|| (value.startsWith("'") && value.endsWith("'"))
+					) {
 						value = value.slice(1, -1)
 					}
 
@@ -791,3 +860,45 @@ function stripMarkdownSyntax(text: string): string {
 		.trim()
 }
 
+/**
+ * Enhance manifest entries with actual source snippets from source files.
+ * This reads the source files and extracts the innerHTML at the specified locations.
+ *
+ * @param entries - Manifest entries to enhance
+ * @returns Enhanced entries with sourceSnippet populated
+ */
+export async function enhanceManifestWithSourceSnippets(
+	entries: Record<string, ManifestEntry>,
+): Promise<Record<string, ManifestEntry>> {
+	const enhanced: Record<string, ManifestEntry> = {}
+
+	// Process entries in parallel for better performance
+	const entryPromises = Object.entries(entries).map(async ([id, entry]) => {
+		// Skip if already has sourceSnippet or missing source info
+		if (entry.sourceSnippet || !entry.sourcePath || !entry.sourceLine || !entry.tag) {
+			return [id, entry] as const
+		}
+
+		// Extract the actual source innerHTML
+		const sourceSnippet = await extractSourceInnerHtml(
+			entry.sourcePath,
+			entry.sourceLine,
+			entry.tag,
+		)
+
+		if (sourceSnippet) {
+			// Generate hash of source snippet for conflict detection
+			const sourceHash = generateSourceHash(sourceSnippet)
+			return [id, { ...entry, sourceSnippet, sourceHash }] as const
+		}
+
+		return [id, entry] as const
+	})
+
+	const results = await Promise.all(entryPromises)
+	for (const [id, entry] of results) {
+		enhanced[id] = entry
+	}
+
+	return enhanced
+}

package/src/tailwind-colors.ts

@@ -0,0 +1,338 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import type { AvailableColors, ColorClasses, TailwindColor } from './types'
+
+/**
+ * Default Tailwind CSS v4 color names.
+ * These are available by default in Tailwind v4.
+ */
+export const DEFAULT_TAILWIND_COLORS = [
+	'slate',
+	'gray',
+	'zinc',
+	'neutral',
+	'stone',
+	'red',
+	'orange',
+	'amber',
+	'yellow',
+	'lime',
+	'green',
+	'emerald',
+	'teal',
+	'cyan',
+	'sky',
+	'blue',
+	'indigo',
+	'violet',
+	'purple',
+	'fuchsia',
+	'pink',
+	'rose',
+] as const
+
+/**
+ * Standard Tailwind color shades.
+ */
+export const STANDARD_SHADES = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as const
+
+/**
+ * Special color values that don't have shades.
+ */
+export const SPECIAL_COLORS = ['transparent', 'current', 'inherit', 'white', 'black'] as const
+
+/**
+ * Build a regex pattern for matching color classes.
+ * Matches either:
+ * - Known default/special colors (e.g., bg-red, text-white)
+ * - Any color name followed by a shade number (e.g., bg-primary-500)
+ */
+function buildColorPattern(prefix: string): RegExp {
+	const colorNames = [...DEFAULT_TAILWIND_COLORS, ...SPECIAL_COLORS].join('|')
+	// Match either: known-color (with optional shade) OR any-name-with-shade (to support custom colors)
+	return new RegExp(`^${prefix}-((?:${colorNames})(?:-(\\d+))?|([a-z]+)-(\\d+))$`)
+}
+
+/**
+ * Regex patterns to match Tailwind color classes.
+ * These patterns are specific to color utilities and won't match other utilities
+ * like text-lg, text-center, bg-fixed, etc.
+ */
+const COLOR_CLASS_PATTERNS = {
+	// Matches: bg-red-500, bg-primary-500, bg-white, bg-transparent
+	bg: buildColorPattern('bg'),
+	// Matches: text-red-500, text-primary-500, text-white (NOT text-lg, text-center)
+	text: buildColorPattern('text'),
+	// Matches: border-red-500, border-primary-500
+	border: buildColorPattern('border'),
+	// Matches: hover:bg-red-500
+	hoverBg: buildColorPattern('hover:bg'),
+	// Matches: hover:text-red-500
+	hoverText: buildColorPattern('hover:text'),
+}
+
+/**
+ * Parse Tailwind v4 CSS config to extract available colors.
+ * Tailwind v4 uses CSS-based configuration with @theme directive.
+ *
+ * Example CSS:
+ * ```css
+ * @theme {
+ *   --color-primary-50: #eff6ff;
+ *   --color-primary-500: #3b82f6;
+ *   --color-accent: #f59e0b;
+ * }
+ * ```
+ */
+export async function parseTailwindConfig(projectRoot: string = process.cwd()): Promise<AvailableColors> {
+	// Tailwind v4 CSS files to search
+	const cssFiles = [
+		'src/styles/global.css',
+		'src/styles/tailwind.css',
+		'src/styles/app.css',
+		'src/app.css',
+		'src/global.css',
+		'src/index.css',
+		'app/globals.css',
+		'styles/globals.css',
+	]
+
+	let customColors: TailwindColor[] = []
+
+	for (const cssFile of cssFiles) {
+		const fullPath = path.join(projectRoot, cssFile)
+		try {
+			const content = await fs.readFile(fullPath, 'utf-8')
+			customColors = extractColorsFromCss(content)
+			if (customColors.length > 0) {
+				break
+			}
+		} catch {
+			// File doesn't exist, continue
+		}
+	}
+
+	// Build default colors list
+	const defaultColors: TailwindColor[] = DEFAULT_TAILWIND_COLORS.map(name => ({
+		name,
+		shades: [...STANDARD_SHADES],
+		isCustom: false,
+	}))
+
+	// Add special colors (no shades)
+	const specialColors: TailwindColor[] = SPECIAL_COLORS.map(name => ({
+		name,
+		shades: [],
+		isCustom: false,
+	}))
+
+	return {
+		colors: [...specialColors, ...defaultColors, ...customColors],
+		defaultColors: [...SPECIAL_COLORS, ...DEFAULT_TAILWIND_COLORS],
+		customColors: customColors.map(c => c.name),
+	}
+}
+
+/**
+ * Extract custom colors from Tailwind v4 CSS @theme block.
+ *
+ * Looks for patterns like:
+ * - --color-primary-50: #value;
+ * - --color-primary: #value;
+ * - --color-accent-500: oklch(...);
+ */
+function extractColorsFromCss(content: string): TailwindColor[] {
+	const colors = new Map<string, Set<string>>()
+
+	// Find @theme blocks
+	const themeBlockPattern = /@theme\s*\{([^}]+)\}/gs
+	let themeMatch: RegExpExecArray | null
+
+	while ((themeMatch = themeBlockPattern.exec(content)) !== null) {
+		const themeContent = themeMatch[1]
+		if (!themeContent) continue
+
+		// Find all --color-* definitions
+		// Pattern: --color-{name}-{shade}: value; or --color-{name}: value;
+		const colorVarPattern = /--color-([a-z]+)(?:-(\d+))?:/gi
+		let colorMatch: RegExpExecArray | null
+
+		while ((colorMatch = colorVarPattern.exec(themeContent)) !== null) {
+			const colorName = colorMatch[1]?.toLowerCase()
+			const shade = colorMatch[2]
+
+			if (!colorName) continue
+
+			// Skip if it's a default color
+			if (DEFAULT_TAILWIND_COLORS.includes(colorName as any)) {
+				continue
+			}
+
+			if (!colors.has(colorName)) {
+				colors.set(colorName, new Set())
+			}
+
+			if (shade) {
+				colors.get(colorName)!.add(shade)
+			}
+		}
+	}
+
+	// Also check for inline @theme definitions (Tailwind v4 can be inline too)
+	// Pattern: @theme inline { ... }
+	const inlineThemePattern = /@theme\s+inline\s*\{([^}]+)\}/gs
+	let inlineMatch: RegExpExecArray | null
+
+	while ((inlineMatch = inlineThemePattern.exec(content)) !== null) {
+		const themeContent = inlineMatch[1]
+		if (!themeContent) continue
+
+		const colorVarPattern = /--color-([a-z]+)(?:-(\d+))?:/gi
+		let colorMatch: RegExpExecArray | null
+
+		while ((colorMatch = colorVarPattern.exec(themeContent)) !== null) {
+			const colorName = colorMatch[1]?.toLowerCase()
+			const shade = colorMatch[2]
+
+			if (!colorName) continue
+
+			if (DEFAULT_TAILWIND_COLORS.includes(colorName as any)) {
+				continue
+			}
+
+			if (!colors.has(colorName)) {
+				colors.set(colorName, new Set())
+			}
+
+			if (shade) {
+				colors.get(colorName)!.add(shade)
+			}
+		}
+	}
+
+	// Convert to TailwindColor array
+	const result: TailwindColor[] = []
+	for (const [name, shades] of colors) {
+		const sortedShades = Array.from(shades).sort((a, b) => parseInt(a) - parseInt(b))
+		result.push({
+			name,
+			shades: sortedShades.length > 0 ? sortedShades : [],
+			isCustom: true,
+		})
+	}
+
+	return result
+}
+
+/**
+ * Extract color classes from an element's class attribute.
+ */
+export function extractColorClasses(classAttr: string | null | undefined): ColorClasses | undefined {
+	if (!classAttr) return undefined
+
+	const classes = classAttr.split(/\s+/).filter(Boolean)
+	const colorClasses: ColorClasses = {}
+	const allColorClasses: string[] = []
+
+	for (const cls of classes) {
+		// Check each pattern
+		for (const [key, pattern] of Object.entries(COLOR_CLASS_PATTERNS)) {
+			const match = cls.match(pattern)
+			if (match) {
+				allColorClasses.push(cls)
+				// Assign to appropriate field
+				if (!(key in colorClasses)) {
+					;(colorClasses as any)[key] = cls
+				}
+				break
+			}
+		}
+	}
+
+	if (allColorClasses.length === 0) {
+		return undefined
+	}
+
+	colorClasses.allColorClasses = allColorClasses
+	return colorClasses
+}
+
+/**
+ * Check if a class is a color class.
+ */
+export function isColorClass(className: string): boolean {
+	return Object.values(COLOR_CLASS_PATTERNS).some(pattern => pattern.test(className))
+}
+
+/**
+ * Generate a new class string with a color class replaced.
+ * @param currentClasses - Current class attribute value
+ * @param oldColorClass - The color class to replace (e.g., 'bg-blue-500')
+ * @param newColorClass - The new color class (e.g., 'bg-red-500')
+ * @returns New class string with the replacement
+ */
+export function replaceColorClass(
+	currentClasses: string,
+	oldColorClass: string,
+	newColorClass: string,
+): string {
+	const classes = currentClasses.split(/\s+/).filter(Boolean)
+	const newClasses = classes.map(cls => cls === oldColorClass ? newColorClass : cls)
+	return newClasses.join(' ')
+}
+
+/**
+ * Get the color type from a color class.
+ * @param colorClass - e.g., 'bg-blue-500', 'text-white', 'hover:bg-red-600'
+ * @returns The type: 'bg', 'text', 'border', 'hoverBg', 'hoverText', or undefined
+ */
+export function getColorType(colorClass: string): keyof ColorClasses | undefined {
+	for (const [key, pattern] of Object.entries(COLOR_CLASS_PATTERNS)) {
+		if (pattern.test(colorClass)) {
+			return key as keyof ColorClasses
+		}
+	}
+	return undefined
+}
+
+/**
+ * Parse a color class into its components.
+ * @param colorClass - e.g., 'bg-blue-500', 'text-white', 'hover:bg-red-600'
+ * @returns Object with prefix, colorName, and shade (if any)
+ */
+export function parseColorClass(colorClass: string): {
+	prefix: string
+	colorName: string
+	shade?: string
+	isHover: boolean
+} | undefined {
+	// Handle hover prefix
+	const isHover = colorClass.startsWith('hover:')
+	const classWithoutHover = isHover ? colorClass.slice(6) : colorClass
+
+	// Match prefix-color-shade or prefix-color
+	const match = classWithoutHover.match(/^(bg|text|border)-([a-z]+)(?:-(\d+))?$/)
+
+	if (!match) return undefined
+
+	return {
+		prefix: isHover ? `hover:${match[1]}` : match[1]!,
+		colorName: match[2]!,
+		shade: match[3],
+		isHover,
+	}
+}
+
+/**
+ * Build a color class from components.
+ */
+export function buildColorClass(
+	prefix: string,
+	colorName: string,
+	shade?: string,
+): string {
+	if (shade) {
+		return `${prefix}-${colorName}-${shade}`
+	}
+	return `${prefix}-${colorName}`
+}

package/src/tsconfig.json

@@ -1,6 +1,6 @@
 {
 	"extends": "../tsconfig.settings.json",
 	"compilerOptions": {
-		"outDir": "../dist/types"
+		"outDir": "../dist/types",
 	}
 }

package/src/types.ts

@@ -27,14 +27,95 @@ export interface ComponentDefinition {
 	slots?: string[]
 }
 
+/** Context around an element for resilient matching when exact match fails */
+export interface SourceContext {
+	/** Text content of the preceding sibling element */
+	precedingText?: string
+	/** Text content of the following sibling element */
+	followingText?: string
+	/** Parent element's tag name */
+	parentTag?: string
+	/** Position among siblings (0-indexed) */
+	siblingIndex?: number
+	/** Parent element's class attribute */
+	parentClasses?: string
+}
+
+/** Image metadata for better tracking and integrity */
+export interface ImageMetadata {
+	/** Image source URL */
+	src: string
+	/** Alt text */
+	alt: string
+	/** SHA256 hash of image content (for integrity checking) */
+	hash?: string
+	/** Image dimensions */
+	dimensions?: { width: number; height: number }
+	/** Responsive image srcset */
+	srcSet?: string
+	/** Image sizes attribute */
+	sizes?: string
+}
+
+/** Content constraints for validation */
+export interface ContentConstraints {
+	/** Maximum content length */
+	maxLength?: number
+	/** Minimum content length */
+	minLength?: number
+	/** Regex pattern for validation */
+	pattern?: string
+	/** Allowed HTML tags for rich text content */
+	allowedTags?: string[]
+}
+
+/** Represents a single Tailwind color with its shades */
+export interface TailwindColor {
+	/** Color name (e.g., 'red', 'blue', 'primary') */
+	name: string
+	/** Available shades (e.g., ['50', '100', '200', ..., '900', '950']) */
+	shades: string[]
+	/** Whether this is a custom/theme color vs default Tailwind */
+	isCustom?: boolean
+}
+
+/** Color classes currently applied to an element */
+export interface ColorClasses {
+	/** Background color class (e.g., 'bg-blue-500') */
+	bg?: string
+	/** Text color class (e.g., 'text-white') */
+	text?: string
+	/** Border color class (e.g., 'border-blue-600') */
+	border?: string
+	/** Hover background color class (e.g., 'hover:bg-blue-600') */
+	hoverBg?: string
+	/** Hover text color class (e.g., 'hover:text-gray-100') */
+	hoverText?: string
+	/** All color-related classes as found in the element */
+	allColorClasses?: string[]
+}
+
+/** Available colors palette from Tailwind config */
+export interface AvailableColors {
+	/** All available colors with their shades */
+	colors: TailwindColor[]
+	/** Default Tailwind color names */
+	defaultColors: string[]
+	/** Custom/theme color names */
+	customColors: string[]
+}
+
 export interface ManifestEntry {
 	id: string
 	tag: string
+	/** Plain text content (for display/search) */
 	text: string
+	/** HTML content when element contains inline styling (strong, em, etc.) */
+	html?: string
 	sourcePath?: string
 	sourceLine?: number
 	sourceSnippet?: string
-	sourceType?: 'static' | 'variable' | 'prop' | 'computed' | 'collection'
+	sourceType?: 'static' | 'variable' | 'prop' | 'computed' | 'collection' | 'image'
 	variableName?: string
 	childCmsIds?: string[]
 	parentComponentId?: string
@@ -42,6 +123,27 @@ export interface ManifestEntry {
 	collectionName?: string
 	/** Entry slug for collection entries (e.g., '3d-tisk') */
 	collectionSlug?: string
+	/** Path to the markdown content file (e.g., 'src/content/blog/my-post.md') */
+	contentPath?: string
+	/** Image source URL (for image entries) - deprecated, use imageMetadata */
+	imageSrc?: string
+	/** Image alt text (for image entries) - deprecated, use imageMetadata */
+	imageAlt?: string
+
+	// === Robustness fields ===
+
+	/** Stable ID derived from content + context hash, survives rebuilds */
+	stableId?: string
+	/** SHA256 hash of sourceSnippet at generation time for conflict detection */
+	sourceHash?: string
+	/** Context around the element for resilient matching */
+	sourceContext?: SourceContext
+	/** Image metadata for img elements (replaces imageSrc/imageAlt) */
+	imageMetadata?: ImageMetadata
+	/** Content validation constraints */
+	constraints?: ContentConstraints
+	/** Color classes applied to this element (for buttons, etc.) */
+	colorClasses?: ColorClasses
 }
 
 export interface ComponentInstance {
@@ -73,10 +175,30 @@ export interface CollectionEntry {
 	wrapperId?: string
 }
 
+/** Manifest metadata for versioning and conflict detection */
+export interface ManifestMetadata {
+	/** Manifest schema version */
+	version: string
+	/** ISO timestamp when manifest was generated */
+	generatedAt: string
+	/** Build system that generated the manifest (e.g., 'astro', 'vite') */
+	generatedBy?: string
+	/** Build ID for correlation */
+	buildId?: string
+	/** SHA256 hash of all entry content for quick drift detection */
+	contentHash?: string
+	/** Per-source-file hashes for granular conflict detection */
+	sourceFileHashes?: Record<string, string>
+}
+
 export interface CmsManifest {
+	/** Manifest metadata for versioning and conflict detection */
+	metadata?: ManifestMetadata
 	entries: Record<string, ManifestEntry>
 	components: Record<string, ComponentInstance>
 	componentDefinitions: Record<string, ComponentDefinition>
 	/** Content collection entries indexed by "collectionName/slug" */
 	collections?: Record<string, CollectionEntry>
+	/** Available Tailwind colors from the project's config */
+	availableColors?: AvailableColors
 }