@nuasite/cms-marker 0.0.52 → 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
@@ -182,14 +184,18 @@ async function searchAstroFile(
 					const matchLength = Math.min(cleanText.length, sectionTextOnly.length)
 					score = 50 + (matchLength / cleanText.length) * 40
 					matched = true
-					matches.push({ line: i + 1, score, type: 'static' })
+					// Find the actual line containing the text
+					const actualLine = findLineContainingText(lines, i, 5, textPreview)
+					matches.push({ line: actualLine, score, type: 'static' })
 				}
 
 				// Check for short exact text match (static content)
 				if (!matched && cleanText.length > 0 && cleanText.length <= 10 && sectionTextOnly.includes(cleanText)) {
 					score = 80
 					matched = true
-					matches.push({ line: i + 1, score, type: 'static' })
+					// Find the actual line containing the text
+					const actualLine = findLineContainingText(lines, i, 5, cleanText)
+					matches.push({ line: actualLine, score, type: 'static' })
 				}
 
 				// Try matching first few words for longer text (static content)
@@ -198,7 +204,9 @@ async function searchAstroFile(
 					if (firstWords && sectionTextOnly.includes(firstWords)) {
 						score = 40
 						matched = true
-						matches.push({ line: i + 1, score, type: 'static' })
+						// Find the actual line containing the text
+						const actualLine = findLineContainingText(lines, i, 5, firstWords)
+						matches.push({ line: actualLine, score, type: 'static' })
 					}
 				}
 			}
@@ -345,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
@@ -384,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
  */
@@ -459,6 +530,22 @@ function collectSection(lines: string[], startLine: number, numLines: number): s
 	return text
 }
 
+/**
+ * Find the actual line containing the matched text within a section
+ * Returns 1-indexed line number
+ */
+function findLineContainingText(lines: string[], startLine: number, numLines: number, searchText: string): number {
+	const normalizedSearch = searchText.toLowerCase()
+	for (let i = startLine; i < Math.min(startLine + numLines, lines.length); i++) {
+		const lineText = stripHtmlTags(lines[i] || '').toLowerCase()
+		if (lineText.includes(normalizedSearch)) {
+			return i + 1 // Return 1-indexed line number
+		}
+	}
+	// If not found on a specific line, return the opening tag line
+	return startLine + 1
+}
+
 /**
  * Strip HTML tags from text
  */
@@ -647,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)
 					}
 
@@ -720,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)
 					}
 
@@ -769,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",
 	}
 }