@nuasite/cms 0.37.0 → 0.38.0

package/package.json

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

package/src/editor/components/editable-highlights.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'preact/hooks'
 import { Z_INDEX } from '../constants'
-import { getOutlineColor } from '../dom'
+import { getOutlineColor, isElementVisible } from '../dom'
 import * as signals from '../signals'
 
 export interface EditableHighlightsProps {
@@ -164,72 +164,34 @@ function collectEditableElements(): HighlightRect[] {
 	const highlights: HighlightRect[] = []
 	const manifest = signals.manifest.value
 
-	// Query all elements with CMS data attributes
-	const textElements = document.querySelectorAll('[data-cms-id]')
-	const componentElements = document.querySelectorAll('[data-cms-component-id]')
-	const imageElements = document.querySelectorAll('img[data-cms-img]')
-	const bgImageElements = document.querySelectorAll('[data-cms-bg-img]')
-
-	// Process text elements
-	textElements.forEach((el) => {
-		const cmsId = el.getAttribute('data-cms-id')
+	const tryPush = (el: Element, cmsId: string | null, type: HighlightRect['type']) => {
 		if (!cmsId) return
-
-		// Skip if this is also a component or image
-		if (el.hasAttribute('data-cms-component-id') || el.tagName === 'IMG') return
-
-		// Skip if not in manifest (invalid element)
-		if (!manifest.entries[cmsId]) return
-
+		// Cheap rect gate first — skips most off-screen / collapsed elements without
+		// touching computed style. Only survivors pay the visibility check cost.
 		const rect = el.getBoundingClientRect()
-		// Skip elements not in viewport or too small
 		if (rect.width < 10 || rect.height < 10) return
 		if (rect.bottom < 0 || rect.top > window.innerHeight) return
 		if (rect.right < 0 || rect.left > window.innerWidth) return
+		if (!isElementVisible(el)) return
+		highlights.push({ cmsId, type, rect })
+	}
 
-		highlights.push({ cmsId, type: 'text', rect })
+	document.querySelectorAll('[data-cms-id]').forEach((el) => {
+		// Routed to the component/image branches below.
+		if (el.hasAttribute('data-cms-component-id') || el.tagName === 'IMG') return
+		const cmsId = el.getAttribute('data-cms-id')
+		if (cmsId && !manifest.entries[cmsId]) return
+		tryPush(el, cmsId, el.hasAttribute('data-cms-bg-img') ? 'image' : 'text')
 	})
 
-	// Process component elements
-	componentElements.forEach((el) => {
+	document.querySelectorAll('[data-cms-component-id]').forEach((el) => {
 		const componentId = el.getAttribute('data-cms-component-id')
-		if (!componentId) return
-
-		// Skip if not in manifest
-		if (!manifest.components[componentId]) return
-
-		const rect = el.getBoundingClientRect()
-		if (rect.width < 10 || rect.height < 10) return
-		if (rect.bottom < 0 || rect.top > window.innerHeight) return
-		if (rect.right < 0 || rect.left > window.innerWidth) return
-
-		highlights.push({ cmsId: componentId, type: 'component', rect })
+		if (componentId && !manifest.components[componentId]) return
+		tryPush(el, componentId, 'component')
 	})
 
-	// Process image elements
-	imageElements.forEach((el) => {
-		const cmsId = el.getAttribute('data-cms-img')
-		if (!cmsId) return
-
-		const rect = el.getBoundingClientRect()
-		if (rect.width < 10 || rect.height < 10) return
-		if (rect.bottom < 0 || rect.top > window.innerHeight) return
-		if (rect.right < 0 || rect.left > window.innerWidth) return
-
-		highlights.push({ cmsId, type: 'image', rect })
-	})
-
-	// Process background image elements
-	bgImageElements.forEach((el) => {
-		const cmsId = el.getAttribute('data-cms-id')
-		if (!cmsId) return
-
-		const rect = el.getBoundingClientRect()
-		if (rect.width < 10 || rect.height < 10) return
-		if (rect.bottom < 0 || rect.top > window.innerHeight) return
-		if (rect.right < 0 || rect.left > window.innerWidth) return
-
-		highlights.push({ cmsId, type: 'image', rect })
+	document.querySelectorAll('img[data-cms-img]').forEach((el) => {
+		tryPush(el, el.getAttribute('data-cms-img'), 'image')
 	})
 
 	return highlights

package/src/editor/dom.ts

@@ -51,6 +51,43 @@ export function getOutlineColor(): string {
 	return isPageDark() ? '#FFFFFF' : '#1A1A1A'
 }
 
+/**
+ * Check if an element is actually visible to the user. Catches `display:none`,
+ * `visibility:hidden|collapse`, `opacity:0`, and `content-visibility` on the
+ * element or any ancestor — `getBoundingClientRect` alone reports a non-zero
+ * box for `opacity:0`/`visibility:hidden`, so highlight overlays would otherwise
+ * draw over hidden mobile menus and modal panels.
+ */
+export function isElementVisible(el: Element): boolean {
+	const anyEl = el as Element & {
+		checkVisibility?: (opts?: {
+			checkOpacity?: boolean
+			checkVisibilityCSS?: boolean
+			contentVisibilityAuto?: boolean
+			opacityProperty?: boolean
+			visibilityProperty?: boolean
+		}) => boolean
+	}
+	if (typeof anyEl.checkVisibility === 'function') {
+		return anyEl.checkVisibility({
+			checkOpacity: true,
+			checkVisibilityCSS: true,
+			contentVisibilityAuto: true,
+			opacityProperty: true,
+			visibilityProperty: true,
+		})
+	}
+	let cur: Element | null = el
+	while (cur && cur !== document.documentElement) {
+		const cs = getComputedStyle(cur)
+		if (cs.display === 'none') return false
+		if (cs.visibility === 'hidden' || cs.visibility === 'collapse') return false
+		if (parseFloat(cs.opacity) === 0) return false
+		cur = cur.parentElement
+	}
+	return true
+}
+
 /** Style element for contenteditable focus styles injected into the host page */
 let focusStyleElement: HTMLStyleElement | null = null
 

package/src/editor/editor.ts

@@ -100,6 +100,47 @@ export function notifyLockedElement(): void {
 	signals.showToast("This text can't be edited here — no source file is linked to it", 'info')
 }
 
+/**
+ * Manifest is built in two phases (fast HTML marking, then background source
+ * resolution). Entering edit mode before phase 2 completes can pre-lock elements
+ * that later gain a valid sourcePath, leaving stale locks on the DOM.
+ *
+ * On click, re-check the local snapshot, then re-fetch from the server in case
+ * phase 2 finished since the editor took its snapshot. Toggle edit mode once
+ * afterwards to make the now-unlocked element editable.
+ */
+let inFlightLockedFetch: Promise<unknown> | null = null
+function handleLockedClick(event: Event): void {
+	const target = event.currentTarget as HTMLElement | null
+	const id = target?.getAttribute(CSS.ID_ATTRIBUTE)
+	if (!target || !id) {
+		notifyLockedElement()
+		return
+	}
+
+	if (signals.manifest.value.entries[id]?.sourcePath) {
+		target.removeAttribute(CSS.LOCKED_ATTRIBUTE)
+		return
+	}
+
+	// In-memory signal can lag phase-2 writes. Coalesce concurrent clicks into
+	// one fetch so the dev server doesn't get hammered.
+	if (!inFlightLockedFetch) {
+		inFlightLockedFetch = fetchManifest()
+			.then((fresh) => signals.setManifest(fresh))
+			.catch(() => {})
+			.finally(() => {
+				inFlightLockedFetch = null
+			})
+	}
+	inFlightLockedFetch.then(() => {
+		if (signals.manifest.value.entries[id]?.sourcePath) {
+			target.removeAttribute(CSS.LOCKED_ATTRIBUTE)
+		}
+	})
+	notifyLockedElement()
+}
+
 /** Test-only: reset toast throttle state between test cases. */
 export function _resetToastThrottles(): void {
 	lastFormattingBlockedToastAt = 0
@@ -246,7 +287,7 @@ export async function startEditMode(
 			logDebug(config.debug, 'Skipping element without source path:', cmsId)
 			makeElementNonEditable(el)
 			el.setAttribute(CSS.LOCKED_ATTRIBUTE, 'true')
-			el.addEventListener('click', notifyLockedElement, { signal: editModeSignal })
+			el.addEventListener('click', handleLockedClick, { signal: editModeSignal })
 			return
 		}
 

package/src/source-finder/cross-file-tracker.ts

@@ -6,10 +6,19 @@ import { escapeRegex, resolveSourcePath } from '../utils'
 import { buildDefinitionPath, parseExpressionPath } from './ast-extractors'
 import { getCachedParsedFile } from './ast-parser'
 import { findComponentProp, findExpressionProp, findSpreadProp } from './element-finder'
+import { wildcardPathToRegexBody } from './search-index'
 import { normalizeText } from './snippet-utils'
 import type { ImportInfo, SourceLocation, VariableDefinition } from './types'
 import { getExportedDefinitions, resolveImportPath } from './variable-extraction'
 
+/**
+ * Compile a wildcard path like `navItems[*].label` into a regex matching
+ * concrete definition paths (`navItems[0].label`, `navItems[3].label`, …).
+ */
+function buildWildcardPathRegex(wildcardPath: string): RegExp {
+	return new RegExp('^' + wildcardPathToRegexBody(wildcardPath) + '$')
+}
+
 // ============================================================================
 // Expression Prop Search
 // ============================================================================
@@ -104,16 +113,17 @@ async function searchDirForExpressionProp(
 				if (exprPropMatch) {
 					// The expression text might be a simple variable like 'navItems'
 					const exprText = exprPropMatch.expressionText
-
-					// Build the corresponding path in the parent's variable definitions
-					// e.g., if expressionPath is 'items[0]' and exprText is 'navItems',
-					// we look for 'navItems[0]' in the parent's definitions
+					// Substitute the parent's local name for the child's:
+					//   child `items[0]`  +  parent `navItems`  →  `navItems[0]`
+					// May contain `[*]` wildcards when the child resolved a `.map()` callback
+					// param — compare via regex to match concrete indices in the parent.
 					const parentPath = expressionPath.replace(/^[^.[]+/, exprText)
+					const parentPathRegex = parentPath.includes('[*]') ? buildWildcardPathRegex(parentPath) : null
 
-					// Check if the value is in local variable definitions
 					for (const def of cached.variableDefinitions) {
 						const defPath = buildDefinitionPath(def)
-						if (defPath === parentPath) {
+						const matches = parentPathRegex ? parentPathRegex.test(defPath) : defPath === parentPath
+						if (matches) {
 							const normalizedDef = normalizeText(def.value)
 							if (normalizedDef === normalizedSearch) {
 								return {

package/src/source-finder/element-finder.ts

@@ -1,6 +1,7 @@
 import type { ComponentNode, ElementNode, Node as AstroNode, TextNode } from '@astrojs/compiler/types'
 
 import { buildDefinitionPath, parseExpressionPath } from './ast-extractors'
+import { makeLeafPathRegex, resolveMapChain } from './search-index'
 import { normalizeText } from './snippet-utils'
 import type {
 	ComponentPropMatch,
@@ -100,7 +101,9 @@ export function findElementWithText(
 		return match?.[1] ?? exprPath
 	}
 
-	function visit(node: AstroNode) {
+	function visit(node: AstroNode, parentExpression: AstroNode | null) {
+		const currentExpr = node.type === 'expression' ? node : parentExpression
+
 		// Check if this is an element or component matching our tag
 		if ((node.type === 'element' || node.type === 'component') && node.name.toLowerCase() === tagLower) {
 			const elemNode = node as ElementNode | ComponentNode
@@ -166,6 +169,43 @@ export function findElementWithText(
 									importInfo,
 									expressionPath: exprPath,
 								})
+							} else if (currentExpr) {
+								// `baseVar` may be a `.map()` callback parameter or destructured
+								// property. Resolve it to the source array; if the array is local
+								// take the leaf, otherwise surface as a cross-file prop candidate.
+								const mapMatch = resolveMapForLocal(
+									exprPath,
+									currentExpr,
+									variableDefinitions,
+									normalizedSearch,
+								)
+								if (mapMatch && bestScore < 100) {
+									bestScore = 100
+									bestMatch = {
+										line,
+										type: 'variable',
+										variableName: mapMatch.variableName,
+										definitionLine: mapMatch.definitionLine,
+									}
+									return
+								}
+
+								if (!mapMatch) {
+									const mapPropCandidate = resolveMapForProp(
+										exprPath,
+										currentExpr,
+										propAliases,
+									)
+									if (mapPropCandidate) {
+										propCandidates.push({
+											line,
+											type: 'variable',
+											usesProp: true,
+											propName: mapPropCandidate.propName,
+											expressionPath: mapPropCandidate.expressionPath,
+										})
+									}
+								}
 							}
 						}
 					}
@@ -224,7 +264,7 @@ export function findElementWithText(
 		// Recursively visit children
 		if ('children' in node && Array.isArray(node.children)) {
 			for (const child of node.children) {
-				visit(child)
+				visit(child, currentExpr)
 			}
 		}
 	}
@@ -245,10 +285,102 @@ export function findElementWithText(
 		return null
 	}
 
-	visit(ast)
+	visit(ast, null)
 	return { bestMatch, propCandidates, importCandidates }
 }
 
+/**
+ * Collect the joined text of every direct text child of an expression node.
+ * Used to feed `resolveMapChain` with the surrounding `.map(...)` source.
+ */
+function collectExpressionText(parentExpression: AstroNode): string[] {
+	const exprTexts: string[] = []
+	if ('children' in parentExpression && Array.isArray(parentExpression.children)) {
+		for (const child of parentExpression.children) {
+			if (child.type === 'text' && (child as TextNode).value) {
+				exprTexts.push((child as TextNode).value)
+			}
+		}
+	}
+	return exprTexts
+}
+
+/**
+ * Resolve a `.map()` loop variable reference (`item.label` or destructured `label`)
+ * against local variable definitions, returning the concrete element whose value
+ * matches `normalizedSearch`. Returns null when the chain doesn't resolve or no
+ * leaf value matches.
+ */
+function resolveMapForLocal(
+	exprPath: string,
+	parentExpression: AstroNode,
+	variableDefinitions: VariableDefinition[],
+	normalizedSearch: string,
+): { variableName: string; definitionLine: number } | null {
+	const baseMatch = exprPath.match(/^(\w+)(.*)$/)
+	if (!baseMatch) return null
+	const baseVar = baseMatch[1]!
+	const suffix = baseMatch[2] ?? ''
+
+	const exprTexts = collectExpressionText(parentExpression)
+	if (exprTexts.length === 0) return null
+
+	const resolved = resolveMapChain(exprTexts, baseVar)
+	if (!resolved) return null
+
+	const leafRegex = makeLeafPathRegex({
+		arrayPath: resolved.arrayPath,
+		leafSuffix: resolved.leafSuffix + suffix,
+	})
+
+	for (const def of variableDefinitions) {
+		const defPath = buildDefinitionPath(def)
+		if (!leafRegex.test(defPath)) continue
+		if (normalizeText(def.value) === normalizedSearch) {
+			return { variableName: defPath, definitionLine: def.line }
+		}
+	}
+	return null
+}
+
+/**
+ * Resolve a `.map()` loop variable reference against prop aliases, returning a
+ * cross-file candidate when the source array comes from props. The expression
+ * path encodes the wildcard chain (e.g. `items[*].label`) so cross-file lookups
+ * can match concrete parent definitions.
+ */
+function resolveMapForProp(
+	exprPath: string,
+	parentExpression: AstroNode,
+	propAliases: Map<string, string>,
+): { propName: string; expressionPath: string } | null {
+	const baseMatch = exprPath.match(/^(\w+)(.*)$/)
+	if (!baseMatch) return null
+	const baseVar = baseMatch[1]!
+	const suffix = baseMatch[2] ?? ''
+
+	const exprTexts = collectExpressionText(parentExpression)
+	if (exprTexts.length === 0) return null
+
+	const resolved = resolveMapChain(exprTexts, baseVar)
+	if (!resolved) return null
+
+	// The head of the resolved arrayPath is the local name of the array; if that
+	// local name is a prop alias, we have a cross-file candidate.
+	const headMatch = resolved.arrayPath.match(/^(\w+)/)
+	if (!headMatch) return null
+	const arrayHead = headMatch[1]!
+	const actualPropName = propAliases.get(arrayHead)
+	if (!actualPropName) return null
+
+	// Build the expression path the parent should match: e.g. `items[*].label`.
+	// Cross-file lookup combines this with the parent's local binding.
+	return {
+		propName: actualPropName,
+		expressionPath: resolved.arrayPath + '[*]' + resolved.leafSuffix + suffix,
+	}
+}
+
 // ============================================================================
 // Component Prop Finding
 // ============================================================================