@nuasite/cms 0.38.0 → 0.39.1

package/src/editor/storage.ts

@@ -14,90 +14,96 @@ import type {
 } from './types'
 
 // ============================================================================
-// Text Edits
+// JSON-based storage helpers — all browser-storage access in this module
+// goes through these so the try/catch + console.warn pattern lives in one place.
 // ============================================================================
 
-export function saveEditsToStorage(pendingChanges: Map<string, PendingChange>): void {
-	const edits: SavedEdits = {}
-
-	pendingChanges.forEach((change, cmsId) => {
-		if (change.isDirty) {
-			edits[cmsId] = {
-				originalText: change.originalText,
-				newText: change.newText,
-				currentHTML: change.currentHTML,
-				hasStyledContent: change.hasStyledContent,
-			}
-		}
-	})
-
+function readJson<T>(storage: Storage, key: string, fallback: T, label: string): T {
 	try {
-		sessionStorage.setItem(STORAGE_KEYS.PENDING_EDITS, JSON.stringify(edits))
+		const raw = storage.getItem(key)
+		return raw === null ? fallback : (JSON.parse(raw) as T)
 	} catch (e) {
-		console.warn('[CMS] Failed to save edits to storage:', e)
+		console.warn(`[CMS] ${label}:`, e)
+		return fallback
 	}
 }
 
-export function loadEditsFromStorage(): SavedEdits {
+function writeJson(storage: Storage, key: string, value: unknown, label: string): void {
 	try {
-		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_EDITS)
-		return stored ? JSON.parse(stored) : {}
+		storage.setItem(key, JSON.stringify(value))
 	} catch (e) {
-		console.warn('[CMS] Failed to load edits from storage:', e)
-		return {}
+		console.warn(`[CMS] ${label}:`, e)
 	}
 }
 
-export function clearEditsFromStorage(): void {
+function removeKey(storage: Storage, key: string, label: string): void {
 	try {
-		sessionStorage.removeItem(STORAGE_KEYS.PENDING_EDITS)
+		storage.removeItem(key)
 	} catch (e) {
-		console.warn('[CMS] Failed to clear edits from storage:', e)
+		console.warn(`[CMS] ${label}:`, e)
 	}
 }
 
+function collectDirtyEdits<C, E>(
+	pendingChanges: Map<string, C>,
+	pickFields: (change: C) => E,
+	isDirty: (change: C) => boolean,
+): Record<string, E> {
+	const edits: Record<string, E> = {}
+	pendingChanges.forEach((change, cmsId) => {
+		if (isDirty(change)) edits[cmsId] = pickFields(change)
+	})
+	return edits
+}
+
+// ============================================================================
+// Text Edits
+// ============================================================================
+
+export function saveEditsToStorage(pendingChanges: Map<string, PendingChange>): void {
+	const edits = collectDirtyEdits(pendingChanges, (c) => ({
+		originalText: c.originalText,
+		newText: c.newText,
+		currentHTML: c.currentHTML,
+		hasStyledContent: c.hasStyledContent,
+	}), (c) => c.isDirty)
+	writeJson(sessionStorage, STORAGE_KEYS.PENDING_EDITS, edits, 'Failed to save edits to storage')
+}
+
+export function loadEditsFromStorage(): SavedEdits {
+	return readJson<SavedEdits>(sessionStorage, STORAGE_KEYS.PENDING_EDITS, {}, 'Failed to load edits from storage')
+}
+
+export function clearEditsFromStorage(): void {
+	removeKey(sessionStorage, STORAGE_KEYS.PENDING_EDITS, 'Failed to clear edits from storage')
+}
+
 // ============================================================================
 // Image Edits
 // ============================================================================
 
 export function saveImageEditsToStorage(pendingImageChanges: Map<string, PendingImageChange>): void {
-	const edits: SavedImageEdits = {}
-
-	pendingImageChanges.forEach((change, cmsId) => {
-		if (change.isDirty) {
-			edits[cmsId] = {
-				originalSrc: change.originalSrc,
-				newSrc: change.newSrc,
-				originalAlt: change.originalAlt,
-				newAlt: change.newAlt,
-				originalSrcSet: change.originalSrcSet,
-			}
-		}
-	})
-
-	try {
-		sessionStorage.setItem(STORAGE_KEYS.PENDING_IMAGE_EDITS, JSON.stringify(edits))
-	} catch (e) {
-		console.warn('[CMS] Failed to save image edits to storage:', e)
-	}
+	const edits = collectDirtyEdits(pendingImageChanges, (c) => ({
+		originalSrc: c.originalSrc,
+		newSrc: c.newSrc,
+		originalAlt: c.originalAlt,
+		newAlt: c.newAlt,
+		originalSrcSet: c.originalSrcSet,
+	}), (c) => c.isDirty)
+	writeJson(sessionStorage, STORAGE_KEYS.PENDING_IMAGE_EDITS, edits, 'Failed to save image edits to storage')
 }
 
 export function loadImageEditsFromStorage(): SavedImageEdits {
-	try {
-		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_IMAGE_EDITS)
-		return stored ? JSON.parse(stored) : {}
-	} catch (e) {
-		console.warn('[CMS] Failed to load image edits from storage:', e)
-		return {}
-	}
+	return readJson<SavedImageEdits>(
+		sessionStorage,
+		STORAGE_KEYS.PENDING_IMAGE_EDITS,
+		{},
+		'Failed to load image edits from storage',
+	)
 }
 
 export function clearImageEditsFromStorage(): void {
-	try {
-		sessionStorage.removeItem(STORAGE_KEYS.PENDING_IMAGE_EDITS)
-	} catch (e) {
-		console.warn('[CMS] Failed to clear image edits from storage:', e)
-	}
+	removeKey(sessionStorage, STORAGE_KEYS.PENDING_IMAGE_EDITS, 'Failed to clear image edits from storage')
 }
 
 // ============================================================================
@@ -105,40 +111,24 @@ export function clearImageEditsFromStorage(): void {
 // ============================================================================
 
 export function saveColorEditsToStorage(pendingColorChanges: Map<string, PendingColorChange>): void {
-	const edits: SavedColorEdits = {}
-
-	pendingColorChanges.forEach((change, cmsId) => {
-		if (change.isDirty) {
-			edits[cmsId] = {
-				originalClasses: change.originalClasses,
-				newClasses: change.newClasses,
-			}
-		}
-	})
-
-	try {
-		sessionStorage.setItem(STORAGE_KEYS.PENDING_COLOR_EDITS, JSON.stringify(edits))
-	} catch (e) {
-		console.warn('[CMS] Failed to save color edits to storage:', e)
-	}
+	const edits = collectDirtyEdits(pendingColorChanges, (c) => ({
+		originalClasses: c.originalClasses,
+		newClasses: c.newClasses,
+	}), (c) => c.isDirty)
+	writeJson(sessionStorage, STORAGE_KEYS.PENDING_COLOR_EDITS, edits, 'Failed to save color edits to storage')
 }
 
 export function loadColorEditsFromStorage(): SavedColorEdits {
-	try {
-		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_COLOR_EDITS)
-		return stored ? JSON.parse(stored) : {}
-	} catch (e) {
-		console.warn('[CMS] Failed to load color edits from storage:', e)
-		return {}
-	}
+	return readJson<SavedColorEdits>(
+		sessionStorage,
+		STORAGE_KEYS.PENDING_COLOR_EDITS,
+		{},
+		'Failed to load color edits from storage',
+	)
 }
 
 export function clearColorEditsFromStorage(): void {
-	try {
-		sessionStorage.removeItem(STORAGE_KEYS.PENDING_COLOR_EDITS)
-	} catch (e) {
-		console.warn('[CMS] Failed to clear color edits from storage:', e)
-	}
+	removeKey(sessionStorage, STORAGE_KEYS.PENDING_COLOR_EDITS, 'Failed to clear color edits from storage')
 }
 
 // ============================================================================
@@ -146,40 +136,24 @@ export function clearColorEditsFromStorage(): void {
 // ============================================================================
 
 export function saveAttributeEditsToStorage(pendingAttributeChanges: Map<string, PendingAttributeChange>): void {
-	const edits: SavedAttributeEdits = {}
-
-	pendingAttributeChanges.forEach((change, cmsId) => {
-		if (change.isDirty) {
-			edits[cmsId] = {
-				originalAttributes: change.originalAttributes,
-				newAttributes: change.newAttributes,
-			}
-		}
-	})
-
-	try {
-		sessionStorage.setItem(STORAGE_KEYS.PENDING_ATTRIBUTE_EDITS, JSON.stringify(edits))
-	} catch (e) {
-		console.warn('[CMS] Failed to save attribute edits to storage:', e)
-	}
+	const edits = collectDirtyEdits(pendingAttributeChanges, (c) => ({
+		originalAttributes: c.originalAttributes,
+		newAttributes: c.newAttributes,
+	}), (c) => c.isDirty)
+	writeJson(sessionStorage, STORAGE_KEYS.PENDING_ATTRIBUTE_EDITS, edits, 'Failed to save attribute edits to storage')
 }
 
 export function loadAttributeEditsFromStorage(): SavedAttributeEdits {
-	try {
-		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_ATTRIBUTE_EDITS)
-		return stored ? JSON.parse(stored) : {}
-	} catch (e) {
-		console.warn('[CMS] Failed to load attribute edits from storage:', e)
-		return {}
-	}
+	return readJson<SavedAttributeEdits>(
+		sessionStorage,
+		STORAGE_KEYS.PENDING_ATTRIBUTE_EDITS,
+		{},
+		'Failed to load attribute edits from storage',
+	)
 }
 
 export function clearAttributeEditsFromStorage(): void {
-	try {
-		sessionStorage.removeItem(STORAGE_KEYS.PENDING_ATTRIBUTE_EDITS)
-	} catch (e) {
-		console.warn('[CMS] Failed to clear attribute edits from storage:', e)
-	}
+	removeKey(sessionStorage, STORAGE_KEYS.PENDING_ATTRIBUTE_EDITS, 'Failed to clear attribute edits from storage')
 }
 
 // ============================================================================
@@ -187,46 +161,30 @@ export function clearAttributeEditsFromStorage(): void {
 // ============================================================================
 
 export function saveBgImageEditsToStorage(pendingBgImageChanges: Map<string, PendingBackgroundImageChange>): void {
-	const edits: SavedBackgroundImageEdits = {}
-
-	pendingBgImageChanges.forEach((change, cmsId) => {
-		if (change.isDirty) {
-			edits[cmsId] = {
-				originalBgImageClass: change.originalBgImageClass,
-				newBgImageClass: change.newBgImageClass,
-				originalBgSize: change.originalBgSize,
-				newBgSize: change.newBgSize,
-				originalBgPosition: change.originalBgPosition,
-				newBgPosition: change.newBgPosition,
-				originalBgRepeat: change.originalBgRepeat,
-				newBgRepeat: change.newBgRepeat,
-			}
-		}
-	})
-
-	try {
-		sessionStorage.setItem(STORAGE_KEYS.PENDING_BG_IMAGE_EDITS, JSON.stringify(edits))
-	} catch (e) {
-		console.warn('[CMS] Failed to save bg image edits to storage:', e)
-	}
+	const edits = collectDirtyEdits(pendingBgImageChanges, (c) => ({
+		originalBgImageClass: c.originalBgImageClass,
+		newBgImageClass: c.newBgImageClass,
+		originalBgSize: c.originalBgSize,
+		newBgSize: c.newBgSize,
+		originalBgPosition: c.originalBgPosition,
+		newBgPosition: c.newBgPosition,
+		originalBgRepeat: c.originalBgRepeat,
+		newBgRepeat: c.newBgRepeat,
+	}), (c) => c.isDirty)
+	writeJson(sessionStorage, STORAGE_KEYS.PENDING_BG_IMAGE_EDITS, edits, 'Failed to save bg image edits to storage')
 }
 
 export function loadBgImageEditsFromStorage(): SavedBackgroundImageEdits {
-	try {
-		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_BG_IMAGE_EDITS)
-		return stored ? JSON.parse(stored) : {}
-	} catch (e) {
-		console.warn('[CMS] Failed to load bg image edits from storage:', e)
-		return {}
-	}
+	return readJson<SavedBackgroundImageEdits>(
+		sessionStorage,
+		STORAGE_KEYS.PENDING_BG_IMAGE_EDITS,
+		{},
+		'Failed to load bg image edits from storage',
+	)
 }
 
 export function clearBgImageEditsFromStorage(): void {
-	try {
-		sessionStorage.removeItem(STORAGE_KEYS.PENDING_BG_IMAGE_EDITS)
-	} catch (e) {
-		console.warn('[CMS] Failed to clear bg image edits from storage:', e)
-	}
+	removeKey(sessionStorage, STORAGE_KEYS.PENDING_BG_IMAGE_EDITS, 'Failed to clear bg image edits from storage')
 }
 
 // ============================================================================
@@ -234,29 +192,15 @@ export function clearBgImageEditsFromStorage(): void {
 // ============================================================================
 
 export function saveSettingsToStorage(settings: CmsSettings): void {
-	try {
-		localStorage.setItem(STORAGE_KEYS.SETTINGS, JSON.stringify(settings))
-	} catch (e) {
-		console.warn('[CMS] Failed to save settings to storage:', e)
-	}
+	writeJson(localStorage, STORAGE_KEYS.SETTINGS, settings, 'Failed to save settings to storage')
 }
 
 export function loadSettingsFromStorage(): CmsSettings | null {
-	try {
-		const stored = localStorage.getItem(STORAGE_KEYS.SETTINGS)
-		return stored ? JSON.parse(stored) : null
-	} catch (e) {
-		console.warn('[CMS] Failed to load settings from storage:', e)
-		return null
-	}
+	return readJson<CmsSettings | null>(localStorage, STORAGE_KEYS.SETTINGS, null, 'Failed to load settings from storage')
 }
 
 export function clearSettingsFromStorage(): void {
-	try {
-		localStorage.removeItem(STORAGE_KEYS.SETTINGS)
-	} catch (e) {
-		console.warn('[CMS] Failed to clear settings from storage:', e)
-	}
+	removeKey(localStorage, STORAGE_KEYS.SETTINGS, 'Failed to clear settings from storage')
 }
 
 // ============================================================================
@@ -271,36 +215,29 @@ export interface PendingEntryNavigation {
 }
 
 export function savePendingEntryNavigation(entry: PendingEntryNavigation): void {
-	try {
-		sessionStorage.setItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION, JSON.stringify(entry))
-	} catch (e) {
-		console.warn('[CMS] Failed to save pending entry navigation:', e)
-	}
+	writeJson(sessionStorage, STORAGE_KEYS.PENDING_ENTRY_NAVIGATION, entry, 'Failed to save pending entry navigation')
 }
 
 export function hasPendingEntryNavigation(): boolean {
-	try {
-		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)
-		if (!stored) return false
-		const entry: PendingEntryNavigation = JSON.parse(stored)
-		return window.location.pathname === entry.pathname
-	} catch {
-		return false
-	}
+	const entry = readJson<PendingEntryNavigation | null>(
+		sessionStorage,
+		STORAGE_KEYS.PENDING_ENTRY_NAVIGATION,
+		null,
+		'Failed to load pending entry navigation',
+	)
+	return !!entry && window.location.pathname === entry.pathname
 }
 
 export function loadPendingEntryNavigation(): PendingEntryNavigation | null {
-	try {
-		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)
-		if (!stored) return null
-		const entry: PendingEntryNavigation = JSON.parse(stored)
-		if (window.location.pathname !== entry.pathname) return null
-		sessionStorage.removeItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)
-		return entry
-	} catch (e) {
-		console.warn('[CMS] Failed to load pending entry navigation:', e)
-		return null
-	}
+	const entry = readJson<PendingEntryNavigation | null>(
+		sessionStorage,
+		STORAGE_KEYS.PENDING_ENTRY_NAVIGATION,
+		null,
+		'Failed to load pending entry navigation',
+	)
+	if (!entry || window.location.pathname !== entry.pathname) return null
+	removeKey(sessionStorage, STORAGE_KEYS.PENDING_ENTRY_NAVIGATION, 'Failed to clear pending entry navigation')
+	return entry
 }
 
 // ============================================================================
@@ -308,20 +245,59 @@ export function loadPendingEntryNavigation(): PendingEntryNavigation | null {
 // ============================================================================
 
 export function saveEditingState(isEditing: boolean): void {
-	try {
-		if (isEditing) {
-			sessionStorage.setItem(STORAGE_KEYS.IS_EDITING, '1')
-		} else {
-			sessionStorage.removeItem(STORAGE_KEYS.IS_EDITING)
-		}
-	} catch (e) {
-		console.warn('[CMS] Failed to save editing state:', e)
+	if (isEditing) {
+		writeJson(sessionStorage, STORAGE_KEYS.IS_EDITING, true, 'Failed to save editing state')
+	} else {
+		removeKey(sessionStorage, STORAGE_KEYS.IS_EDITING, 'Failed to clear editing state')
 	}
 }
 
 export function loadEditingState(): boolean {
+	return readJson<boolean>(sessionStorage, STORAGE_KEYS.IS_EDITING, false, 'Failed to load editing state')
+}
+
+// ============================================================================
+// Markdown Drafts (per-file, sessionStorage)
+// ============================================================================
+
+export interface MarkdownDraft {
+	frontmatter: Record<string, unknown>
+	content: string
+	savedAt: number
+}
+
+function markdownDraftKey(filePath: string): string {
+	return `${STORAGE_KEYS.MARKDOWN_DRAFT_PREFIX}${filePath}`
+}
+
+export function saveMarkdownDraft(
+	filePath: string,
+	frontmatter: Record<string, unknown>,
+	content: string,
+): void {
+	if (!filePath) return
+	const draft: MarkdownDraft = { frontmatter, content, savedAt: Date.now() }
+	writeJson(sessionStorage, markdownDraftKey(filePath), draft, 'Failed to save markdown draft')
+}
+
+export function loadMarkdownDraft(filePath: string): MarkdownDraft | null {
+	if (!filePath) return null
+	return readJson<MarkdownDraft | null>(sessionStorage, markdownDraftKey(filePath), null, 'Failed to load markdown draft')
+}
+
+export function clearMarkdownDraft(filePath: string): void {
+	if (!filePath) return
+	removeKey(sessionStorage, markdownDraftKey(filePath), 'Failed to clear markdown draft')
+}
+
+/** True when at least one markdown draft is present in sessionStorage. */
+export function hasAnyMarkdownDraft(): boolean {
 	try {
-		return sessionStorage.getItem(STORAGE_KEYS.IS_EDITING) === '1'
+		for (let i = 0; i < sessionStorage.length; i++) {
+			const key = sessionStorage.key(i)
+			if (key?.startsWith(STORAGE_KEYS.MARKDOWN_DRAFT_PREFIX)) return true
+		}
+		return false
 	} catch {
 		return false
 	}

package/src/editor/types.ts

@@ -52,6 +52,8 @@ export interface CmsConfig {
 	theme?: CmsThemeConfig
 	themePreset?: CmsThemePreset
 	features?: CmsFeatures
+	/** Maximum upload size in bytes for media uploads (injected by the integration). */
+	maxUploadSize?: number
 }
 
 export interface ComponentProp {

package/src/handlers/api-routes.ts

@@ -12,7 +12,7 @@ import { handleInsertComponent, handleRemoveComponent } from './component-ops'
 import { handleCreateMarkdown, handleDeleteMarkdown, handleGetMarkdownContent, handleRenameMarkdown, handleUpdateMarkdown } from './markdown-ops'
 import { handleCheckSlugExists, handleCreatePage, handleDeletePage, handleDuplicatePage, handleGetLayouts } from './page-ops'
 import { handleAddRedirect, handleDeleteRedirect, handleGetRedirects, handleUpdateRedirect } from './redirect-ops'
-import { parseJsonBody, parseMultipartFile, readBody, sendError, sendJson } from './request-utils'
+import { BodyTooLargeError, parseJsonBody, parseMultipartFile, readBody, sendError, sendJson } from './request-utils'
 import { handleUpdate } from './source-writer'
 
 export interface RouteContext {
@@ -22,6 +22,7 @@ export interface RouteContext {
 	manifestWriter: ManifestWriter
 	contentDir: string
 	mediaAdapter?: MediaStorageAdapter
+	maxUploadSize: number
 }
 
 type RouteHandler = (ctx: RouteContext) => Promise<void>
@@ -69,7 +70,8 @@ function custom(method: string, route: string, handler: RouteHandler): [string,
 	return [`${method}:${route}`, handler]
 }
 
-/** Allowed MIME types for media uploads */
+/** Allowed MIME types for media uploads. Videos are intentionally excluded —
+ *  they belong on a CDN (Mux, YouTube), not in the repo's public/uploads dir. */
 const ALLOWED_UPLOAD_TYPES = new Set([
 	'image/jpeg',
 	'image/png',
@@ -77,8 +79,6 @@ const ALLOWED_UPLOAD_TYPES = new Set([
 	'image/webp',
 	'image/avif',
 	'image/x-icon',
-	'video/mp4',
-	'video/webm',
 	'application/pdf',
 ])
 
@@ -152,8 +152,28 @@ const routeMap = new Map<string, RouteHandler>([
 			sendError(ctx.res, 'Expected multipart/form-data')
 			return
 		}
+
+		const limit = ctx.maxUploadSize
+		const tooLargeMsg = `File too large (max ${Math.round(limit / (1024 * 1024))} MB)`
+
+		// Reject early via Content-Length so we don't stream a huge payload only to drop it.
+		const declared = parseInt(ctx.req.headers['content-length'] ?? '', 10)
+		if (Number.isFinite(declared) && declared > limit) {
+			sendError(ctx.res, tooLargeMsg, 413)
+			return
+		}
+
 		const query = getQuery(ctx)
-		const body = await readBody(ctx.req, 50 * 1024 * 1024)
+		let body: Buffer
+		try {
+			body = await readBody(ctx.req, limit)
+		} catch (err) {
+			if (err instanceof BodyTooLargeError) {
+				sendError(ctx.res, tooLargeMsg, 413)
+				return
+			}
+			throw err
+		}
 		const file = parseMultipartFile(body, contentType)
 		if (!file) {
 			sendError(ctx.res, 'No file found in request')
@@ -246,15 +266,8 @@ const routeMap = new Map<string, RouteHandler>([
 	get('deployment/status', async () => ({ currentDeployment: null, pendingCount: 0, deploymentEnabled: false })),
 ])
 
-export async function handleCmsApiRoute(
-	route: string,
-	req: IncomingMessage,
-	res: ServerResponse,
-	manifestWriter: ManifestWriter,
-	contentDir: string,
-	mediaAdapter?: MediaStorageAdapter,
-): Promise<void> {
-	const ctx: RouteContext = { req, res, route, manifestWriter, contentDir, mediaAdapter }
+export async function handleCmsApiRoute(ctx: RouteContext): Promise<void> {
+	const { req, res, route } = ctx
 
 	// Exact match lookup
 	const handler = routeMap.get(`${req.method}:${route}`)

package/src/handlers/request-utils.ts

@@ -3,6 +3,15 @@ import type { IncomingMessage, ServerResponse } from 'node:http'
 /** Maximum request body size: 10 MB */
 const MAX_BODY_SIZE = 10 * 1024 * 1024
 
+/** Thrown by readBody when the streamed body exceeds the configured limit.
+ *  Lets callers distinguish "client sent too much" from transport errors. */
+export class BodyTooLargeError extends Error {
+	constructor(public readonly maxSize: number) {
+		super(`Request body exceeds maximum size of ${maxSize} bytes`)
+		this.name = 'BodyTooLargeError'
+	}
+}
+
 export function readBody(req: IncomingMessage, maxSize: number = MAX_BODY_SIZE): Promise<Buffer> {
 	return new Promise((resolve, reject) => {
 		const chunks: Buffer[] = []
@@ -11,7 +20,7 @@ export function readBody(req: IncomingMessage, maxSize: number = MAX_BODY_SIZE):
 			totalSize += chunk.length
 			if (totalSize > maxSize) {
 				req.destroy()
-				reject(new Error(`Request body exceeds maximum size of ${maxSize} bytes`))
+				reject(new BodyTooLargeError(maxSize))
 				return
 			}
 			chunks.push(chunk)

package/src/html-processor.ts

@@ -662,6 +662,12 @@ export async function processHtml(
 		sourceLine?: number
 	}
 	const imageEntries = new Map<string, ImageEntry>()
+	// Per (sourceFile, src) DOM-order occurrence counter. When the same image
+	// URL appears N times rendered from the same source file, this lets us
+	// map each rendered `<img>` to the Nth index entry for that (file, src)
+	// — disambiguating cases where data-astro-source-loc alone doesn't (e.g.
+	// when only a wrapper element carries the source attribution).
+	const srcOccurrenceCounts = new Map<string, number>()
 	root.querySelectorAll('img').forEach((node) => {
 		// Skip if already marked
 		if (node.getAttribute(attributeName)) return
@@ -682,12 +688,17 @@ export async function processHtml(
 
 		const { sourceFile, sourceLine } = findAncestorSourceLocation(node)
 
+		const occurrenceKey = `${sourceFile ?? ''}\0${src}`
+		const srcOccurrence = srcOccurrenceCounts.get(occurrenceKey) ?? 0
+		srcOccurrenceCounts.set(occurrenceKey, srcOccurrence + 1)
+
 		// Build image metadata
 		const metadata: ImageMetadata = {
 			src,
 			alt: node.getAttribute('alt') || '',
 			srcSet: node.getAttribute('srcset') || undefined,
 			sizes: node.getAttribute('sizes') || undefined,
+			srcOccurrence,
 		}
 
 		// Store image info for manifest