@nuasite/cms-marker 0.0.53 → 0.0.55

package/dist/types/utils.d.ts

@@ -0,0 +1,38 @@
+import type { ManifestEntry, SourceContext } from './types';
+/**
+ * Generate a SHA256 hash of the given content
+ */
+export declare function sha256(content: string): string;
+/**
+ * Generate a short hash (first 12 characters of SHA256)
+ * Used for stableId to keep it reasonably short but still unique
+ */
+export declare function shortHash(content: string): string;
+/**
+ * Generate a stable ID for an element based on its content and context.
+ * This ID survives rebuilds as long as the content and structure remain similar.
+ *
+ * Components:
+ * - tag name
+ * - first 50 chars of text content
+ * - source path (if available)
+ * - parent tag
+ * - sibling index
+ */
+export declare function generateStableId(tag: string, text: string, sourcePath?: string, context?: SourceContext): string;
+/**
+ * Generate a hash of the source snippet for conflict detection.
+ * If the source file changes, this hash will differ from what's stored in manifest.
+ */
+export declare function generateSourceHash(sourceSnippet: string): string;
+/**
+ * Generate a content hash for the entire manifest (all entries).
+ * Used for quick drift detection without comparing individual entries.
+ */
+export declare function generateManifestContentHash(entries: Record<string, ManifestEntry>): string;
+/**
+ * Generate per-source-file hashes for granular conflict detection.
+ * Maps source file path -> hash of all entries from that file.
+ */
+export declare function generateSourceFileHashes(entries: Record<string, ManifestEntry>): Record<string, string>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE3D;;GAEG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEjD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,EACZ,UAAU,CAAC,EAAE,MAAM,EACnB,OAAO,CAAC,EAAE,aAAa,GACrB,MAAM,CAUR;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,MAAM,CAU1F;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAwBvG"}

package/dist/types/vite-plugin.d.ts

@@ -0,0 +1,14 @@
+import type { Plugin } from 'vite';
+import type { ManifestWriter } from './manifest-writer';
+import type { CmsMarkerOptions, ComponentDefinition } from './types';
+export interface VitePluginContext {
+    manifestWriter: ManifestWriter;
+    componentDefinitions: Record<string, ComponentDefinition>;
+    config: Required<CmsMarkerOptions>;
+    idCounter: {
+        value: number;
+    };
+    command: 'dev' | 'build' | 'preview' | 'sync';
+}
+export declare function createVitePlugin(context: VitePluginContext): Plugin[];
+//# sourceMappingURL=vite-plugin.d.ts.map

package/dist/types/vite-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../src/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAElC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAEpE,MAAM,WAAW,iBAAiB;IACjC,cAAc,EAAE,cAAc,CAAA;IAC9B,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAA;IACzD,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAA;IAClC,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,OAAO,EAAE,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;CAC7C;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,EAAE,CAoCrE"}

package/package.json

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

package/src/astro-transform.ts

@@ -182,8 +182,8 @@ function injectSourceAttributes(code: string, ast: any, filePath: string): strin
 		// Validate line exists - if not, there's a bug in AST positions or bounds checking
 		if (line === undefined) {
 			console.error(
-				`[astro-cms-marker] Invalid modification at line ${mod.line + 1} in ${filePath}. ` +
-				`This indicates a bug in @astrojs/compiler AST positions or bounds checking. Skipping modification.`
+				`[astro-cms-marker] Invalid modification at line ${mod.line + 1} in ${filePath}. `
+					+ `This indicates a bug in @astrojs/compiler AST positions or bounds checking. Skipping modification.`,
 			)
 			continue
 		}
@@ -191,8 +191,8 @@ function injectSourceAttributes(code: string, ast: any, filePath: string): strin
 		// Validate column is within line bounds
 		if (mod.column < 0 || mod.column > line.length) {
 			console.error(
-				`[astro-cms-marker] Invalid column ${mod.column} at line ${mod.line + 1} in ${filePath}. ` +
-				`Line length is ${line.length}. Skipping modification.`
+				`[astro-cms-marker] Invalid column ${mod.column} at line ${mod.line + 1} in ${filePath}. `
+					+ `Line length is ${line.length}. Skipping modification.`,
 			)
 			continue
 		}

package/src/build-processor.ts

@@ -86,7 +86,7 @@ async function processFile(
 			skipMarkdownContent: isCollectionPage,
 			// Pass collection info for wrapper element marking
 			collectionInfo: collectionInfo
-				? { name: collectionInfo.name, slug: collectionInfo.slug, bodyFirstLine }
+				? { name: collectionInfo.name, slug: collectionInfo.slug, bodyFirstLine, contentPath: collectionInfo.file }
 				: undefined,
 		},
 		idGenerator,

package/src/component-registry.ts

@@ -339,8 +339,8 @@ export function parseComponentUsage(
 		'g',
 	)
 
-	let lineIndex = 0
-	let charIndex = 0
+	const lineIndex = 0
+	const charIndex = 0
 
 	for (let i = 0; i < lines.length; i++) {
 		const line = lines[i]

package/src/dev-middleware.ts

@@ -90,14 +90,14 @@ export function createDevMiddleware(
 		const requestUrl = req.url || 'unknown'
 
 		// Intercept response chunks
-		res.write = function (chunk: any, ...args: any[]) {
+		res.write = ((chunk: any, ...args: any[]) => {
 			if (chunk) {
 				chunks.push(Buffer.from(chunk))
 			}
 			return true
-		} as any
+		}) as any
 
-		res.end = function (chunk: any, ...args: any[]) {
+		res.end = ((chunk: any, ...args: any[]) => {
 			if (chunk) {
 				chunks.push(Buffer.from(chunk))
 			}
@@ -143,7 +143,7 @@ export function createDevMiddleware(
 				return res.end(Buffer.concat(chunks), ...args)
 			}
 			return res.end(...args)
-		} as any
+		}) as any
 
 		next()
 	})
@@ -191,7 +191,7 @@ async function processHtmlForDev(
 			skipMarkdownContent: isCollectionPage,
 			// Pass collection info for wrapper element marking
 			collectionInfo: collectionInfo
-				? { name: collectionInfo.name, slug: collectionInfo.slug, bodyFirstLine }
+				? { name: collectionInfo.name, slug: collectionInfo.slug, bodyFirstLine, contentPath: collectionInfo.file }
 				: undefined,
 		},
 		idGenerator,

package/src/html-processor.ts

@@ -1,5 +1,38 @@
 import { parse } from 'node-html-parser'
-import type { ComponentInstance, ManifestEntry } from './types'
+import { enhanceManifestWithSourceSnippets } from './source-finder'
+import { extractColorClasses } from './tailwind-colors'
+import type { ComponentInstance, ManifestEntry, SourceContext } from './types'
+import { generateStableId } from './utils'
+
+/**
+ * Inline text styling elements that should NOT be marked with CMS IDs.
+ * These elements are text formatting and should be part of their parent's content.
+ * They will be preserved as HTML when editing the parent element.
+ */
+export const INLINE_STYLE_TAGS = [
+	'strong',
+	'b',
+	'em',
+	'i',
+	'u',
+	's',
+	'strike',
+	'del',
+	'ins',
+	'mark',
+	'small',
+	'sub',
+	'sup',
+	'abbr',
+	'cite',
+	'code',
+	'kbd',
+	'samp',
+	'var',
+	'time',
+	'dfn',
+	'q',
+] as const
 
 export interface ProcessHtmlOptions {
 	attributeName: string
@@ -13,12 +46,20 @@ export interface ProcessHtmlOptions {
 	markStyledSpans?: boolean
 	/** When true, only mark elements that have source file attributes (from Astro templates) */
 	skipMarkdownContent?: boolean
+	/**
+	 * When true, skip marking inline text styling elements (strong, b, em, i, etc.).
+	 * These elements will be preserved as part of their parent's HTML content.
+	 * Defaults to true.
+	 */
+	skipInlineStyleTags?: boolean
 	/** Collection info for marking the wrapper element containing markdown content */
 	collectionInfo?: {
 		name: string
 		slug: string
 		/** First line of the markdown body (used to find wrapper element in build mode) */
 		bodyFirstLine?: string
+		/** Path to the markdown file (e.g., 'src/content/blog/my-post.md') */
+		contentPath?: string
 	}
 }
 
@@ -128,6 +169,7 @@ export async function processHtml(
 		excludeComponentDirs = ['src/pages', 'src/layouts', 'src/layout'],
 		markStyledSpans = true,
 		skipMarkdownContent = false,
+		skipInlineStyleTags = true,
 		collectionInfo,
 	} = options
 
@@ -235,6 +277,27 @@ export async function processHtml(
 		})
 	}
 
+	// Image detection pass: mark img elements for CMS image replacement
+	// Store image entries separately to add to manifest later
+	const imageEntries = new Map<string, { src: string; alt: string }>()
+	root.querySelectorAll('img').forEach((node) => {
+		// Skip if already marked
+		if (node.getAttribute(attributeName)) return
+
+		const src = node.getAttribute('src')
+		if (!src) return // Skip images without src
+
+		const id = getNextId()
+		node.setAttribute(attributeName, id)
+		node.setAttribute('data-cms-img', 'true')
+
+		// Store image info for manifest
+		imageEntries.set(id, {
+			src,
+			alt: node.getAttribute('alt') || '',
+		})
+	})
+
 	// Collection wrapper detection pass: find the element that wraps markdown content
 	// Two strategies:
 	// 1. Dev mode: look for elements with data-astro-source-file containing children without it
@@ -274,6 +337,7 @@ export async function processHtml(
 					// Mark this as the collection wrapper using the standard attribute
 					const id = getNextId()
 					node.setAttribute(attributeName, id)
+					node.setAttribute('data-cms-markdown', 'true')
 					collectionWrapperId = id
 					foundWrapper = true
 					// Don't break - we want the deepest wrapper, so we'll overwrite
@@ -333,6 +397,7 @@ export async function processHtml(
 						// Markdown body should have at least 2 block children
 						const id = getNextId()
 						best.node.setAttribute(attributeName, id)
+						best.node.setAttribute('data-cms-markdown', 'true')
 						collectionWrapperId = id
 						foundWrapper = true
 					}
@@ -349,6 +414,23 @@ export async function processHtml(
 		if (includeTags && !includeTags.includes(tag)) return
 		if (node.getAttribute(attributeName)) return // Already marked
 
+		// Skip inline text styling elements (strong, b, em, i, etc.)
+		// These should be part of their parent's text content, not separately editable
+		// Only apply when includeTags is null (all tags) - if specific tags are listed, respect them
+		if (skipInlineStyleTags && includeTags === null && INLINE_STYLE_TAGS.includes(tag as typeof INLINE_STYLE_TAGS[number])) {
+			return
+		}
+
+		// Skip styled spans (spans with only text styling Tailwind classes)
+		// These are also inline text formatting and should be part of parent content
+		// Only apply when includeTags is null or doesn't include 'span'
+		if (skipInlineStyleTags && (includeTags === null || !includeTags.includes('span')) && tag === 'span') {
+			const classAttr = node.getAttribute('class')
+			if (classAttr && hasOnlyTextStyleClasses(classAttr)) {
+				return
+			}
+		}
+
 		const textContent = (node.innerText ?? '').trim()
 		if (!includeEmptyText && !textContent) return
 
@@ -369,7 +451,7 @@ export async function processHtml(
 
 		if (sourceFile && sourceLine) {
 			const lineNum = parseInt(sourceLine.split(':')[0] ?? '1', 10)
-			if (!isNaN(lineNum)) {
+			if (!Number.isNaN(lineNum)) {
 				sourceLocationMap.set(id, { file: sourceFile, line: lineNum })
 			}
 			// Only remove source attributes if this is NOT a component root
@@ -447,20 +529,54 @@ export async function processHtml(
 				parent = parent.parentNode
 			}
 
+			// Extract source context for resilient matching
+			const sourceContext = extractSourceContext(node, attributeName)
+
+			// Check if element contains inline style elements (strong, b, em, etc.) or styled spans
+			// If so, store the HTML content for source file updates
+			const inlineStyleSelector = INLINE_STYLE_TAGS.join(', ')
+			const hasInlineStyleElements = node.querySelector(inlineStyleSelector) !== null
+			const hasStyledSpans = node.querySelector('[data-cms-styled]') !== null
+			const htmlContent = (hasInlineStyleElements || hasStyledSpans) ? node.innerHTML : undefined
+
+			// Check if this is an image entry
+			const imageInfo = imageEntries.get(id)
+			const isImage = !!imageInfo
+
+			const entryText = isImage ? (imageInfo.alt || imageInfo.src) : textWithPlaceholders.trim()
+			const entrySourcePath = sourceLocation?.file || sourcePath
+
+			// Generate stable ID based on content and context
+			const stableId = generateStableId(tag, entryText, entrySourcePath, sourceContext)
+
+			// Extract color classes for buttons and other elements
+			const classAttr = node.getAttribute('class')
+			const colorClasses = extractColorClasses(classAttr)
+
 			entries[id] = {
 				id,
 				tag,
-				text: textWithPlaceholders.trim(),
-				sourcePath: sourceLocation?.file || sourcePath,
+				text: entryText,
+				html: htmlContent,
+				sourcePath: entrySourcePath,
 				childCmsIds: childCmsIds.length > 0 ? childCmsIds : undefined,
 				sourceLine: sourceLocation?.line,
 				sourceSnippet: undefined,
-				sourceType: isCollectionWrapper ? 'collection' : undefined,
+				sourceType: isImage ? 'image' : (isCollectionWrapper ? 'collection' : undefined),
 				variableName: undefined,
 				parentComponentId,
 				// Add collection info for the wrapper entry
 				collectionName: isCollectionWrapper ? collectionInfo?.name : undefined,
 				collectionSlug: isCollectionWrapper ? collectionInfo?.slug : undefined,
+				contentPath: isCollectionWrapper ? collectionInfo?.contentPath : undefined,
+				// Add image info for image entries
+				imageSrc: imageInfo?.src,
+				imageAlt: imageInfo?.alt,
+				// Robustness fields
+				stableId,
+				sourceContext,
+				// Color classes for buttons/styled elements
+				colorClasses,
 			}
 		})
 	}
@@ -472,9 +588,13 @@ export async function processHtml(
 		node.removeAttribute('data-astro-source-line')
 	})
 
+	// Enhance manifest entries with actual source snippets from source files
+	// This allows the CMS to match and replace dynamic content in source files
+	const enhancedEntries = await enhanceManifestWithSourceSnippets(entries)
+
 	return {
 		html: root.toString(),
-		entries,
+		entries: enhancedEntries,
 		components,
 		collectionWrapperId,
 	}
@@ -497,3 +617,57 @@ function extractComponentName(sourceFile: string): string {
 export function cleanText(text: string): string {
 	return text.trim().replace(/\s+/g, ' ').toLowerCase()
 }
+
+/**
+ * Extract source context for an element to enable resilient matching.
+ * This captures information about the element's position in the DOM
+ * that can be used as fallback when exact matching fails.
+ */
+function extractSourceContext(node: any, attributeName: string): SourceContext | undefined {
+	const parent = node.parentNode
+	if (!parent) return undefined
+
+	const siblings = parent.childNodes?.filter((child: any) => {
+		// Only consider element nodes, not text nodes
+		return child.nodeType === 1 && child.tagName
+	}) || []
+
+	const siblingIndex = siblings.indexOf(node)
+
+	// Get preceding sibling's text (first 30 chars)
+	let precedingText: string | undefined
+	if (siblingIndex > 0) {
+		const prevSibling = siblings[siblingIndex - 1]
+		const prevText = (prevSibling?.innerText || '').trim()
+		if (prevText) {
+			precedingText = prevText.substring(0, 30)
+		}
+	}
+
+	// Get following sibling's text (first 30 chars)
+	let followingText: string | undefined
+	if (siblingIndex < siblings.length - 1) {
+		const nextSibling = siblings[siblingIndex + 1]
+		const nextText = (nextSibling?.innerText || '').trim()
+		if (nextText) {
+			followingText = nextText.substring(0, 30)
+		}
+	}
+
+	// Get parent info
+	const parentTag = parent.tagName?.toLowerCase?.()
+	const parentClasses = parent.getAttribute?.('class') || undefined
+
+	// Only return context if we have meaningful data
+	if (!precedingText && !followingText && !parentTag) {
+		return undefined
+	}
+
+	return {
+		precedingText,
+		followingText,
+		parentTag,
+		siblingIndex: siblingIndex >= 0 ? siblingIndex : undefined,
+		parentClasses,
+	}
+}

package/src/index.ts

@@ -94,4 +94,3 @@ export default function cmsMarker(options: CmsMarkerOptions = {}): AstroIntegrat
 export { findCollectionSource, parseMarkdownContent } from './source-finder'
 export type { CollectionInfo, MarkdownContent } from './source-finder'
 export type { CmsManifest, CmsMarkerOptions, CollectionEntry, ComponentDefinition, ComponentInstance, ManifestEntry } from './types'
-

package/src/manifest-writer.ts

@@ -1,6 +1,11 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import type { CmsManifest, CollectionEntry, ComponentDefinition, ComponentInstance, ManifestEntry } from './types'
+import { parseTailwindConfig } from './tailwind-colors'
+import type { AvailableColors, CmsManifest, CollectionEntry, ComponentDefinition, ComponentInstance, ManifestEntry, ManifestMetadata } from './types'
+import { generateManifestContentHash, generateSourceFileHashes } from './utils'
+
+/** Current manifest schema version */
+const MANIFEST_VERSION = '1.0'
 
 /**
  * Manages streaming manifest writes during build.
@@ -16,6 +21,7 @@ export class ManifestWriter {
 	private outDir: string = ''
 	private manifestFile: string
 	private componentDefinitions: Record<string, ComponentDefinition>
+	private availableColors: AvailableColors | undefined
 	private writeQueue: Promise<void> = Promise.resolve()
 
 	constructor(manifestFile: string, componentDefinitions: Record<string, ComponentDefinition> = {}) {
@@ -44,6 +50,22 @@ export class ManifestWriter {
 		this.globalManifest.componentDefinitions = definitions
 	}
 
+	/**
+	 * Load available Tailwind colors from the project's CSS config
+	 */
+	async loadAvailableColors(projectRoot: string = process.cwd()): Promise<void> {
+		this.availableColors = await parseTailwindConfig(projectRoot)
+		this.globalManifest.availableColors = this.availableColors
+	}
+
+	/**
+	 * Set available colors directly (for testing or custom colors)
+	 */
+	setAvailableColors(colors: AvailableColors): void {
+		this.availableColors = colors
+		this.globalManifest.availableColors = colors
+	}
+
 	/**
 	 * Get the manifest path for a given page
 	 * Places manifest next to the page: /about -> /about.json, / -> /index.json
@@ -100,13 +122,25 @@ export class ManifestWriter {
 
 		await fs.mkdir(manifestDir, { recursive: true })
 
+		// Generate metadata for this page manifest
+		const metadata: ManifestMetadata = {
+			version: MANIFEST_VERSION,
+			generatedAt: new Date().toISOString(),
+			generatedBy: 'astro-cms-marker',
+			contentHash: generateManifestContentHash(entries),
+			sourceFileHashes: generateSourceFileHashes(entries),
+		}
+
 		const pageManifest: {
+			metadata: ManifestMetadata
 			page: string
 			entries: Record<string, ManifestEntry>
 			components: Record<string, ComponentInstance>
 			componentDefinitions: Record<string, ComponentDefinition>
 			collection?: CollectionEntry
+			availableColors?: AvailableColors
 		} = {
+			metadata,
 			page: pagePath,
 			entries,
 			components,
@@ -117,6 +151,10 @@ export class ManifestWriter {
 			pageManifest.collection = collection
 		}
 
+		if (this.availableColors) {
+			pageManifest.availableColors = this.availableColors
+		}
+
 		await fs.writeFile(manifestPath, JSON.stringify(pageManifest, null, 2), 'utf-8')
 	}
 
@@ -176,7 +214,15 @@ export class ManifestWriter {
 			components: {},
 			componentDefinitions: this.componentDefinitions,
 			collections: {},
+			availableColors: this.availableColors,
 		}
 		this.writeQueue = Promise.resolve()
 	}
+
+	/**
+	 * Get available colors (for use in dev middleware)
+	 */
+	getAvailableColors(): AvailableColors | undefined {
+		return this.availableColors
+	}
 }