@setzkasten-cms/astro-admin 1.4.2 → 1.5.0

package/src/init/template-patcher-v2.ts

@@ -38,7 +38,11 @@ const normalizeWs = (s: string) => s.replace(/\s+/g, ' ').trim()
  * Find text in a string where the needle may have collapsed whitespace
  * but the haystack preserves original whitespace (incl. newlines).
  */
-function findNormalizedText(haystack: string, needle: string, startFrom: number): { start: number; end: number } | null {
+function findNormalizedText(
+  haystack: string,
+  needle: string,
+  startFrom: number,
+): { start: number; end: number } | null {
   // Try exact match first
   const exactIdx = haystack.indexOf(needle, startFrom)
   if (exactIdx !== -1) return { start: exactIdx, end: exactIdx + needle.length }
@@ -49,7 +53,8 @@ function findNormalizedText(haystack: string, needle: string, startFrom: number)
   const escaped = normalized.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/ /g, '\\s+')
   const regex = new RegExp(escaped)
   const match = regex.exec(haystack.slice(startFrom))
-  if (match) return { start: startFrom + match.index, end: startFrom + match.index + match[0].length }
+  if (match)
+    return { start: startFrom + match.index, end: startFrom + match.index + match[0].length }
 
   return null
 }
@@ -128,7 +133,10 @@ export async function patchTemplateForFields(
     // Adjust positions in-place on the original groups so mutations
     // (like _class fields from makeDynamicClasses) are visible to the caller.
     for (const g of repeatedGroups) {
-      for (const inst of g.instances) { inst.start += shift; inst.end += shift }
+      for (const inst of g.instances) {
+        inst.start += shift
+        inst.end += shift
+      }
       for (const f of g.fields) {
         for (let i = 0; i < f.positions.length; i++) {
           const p = f.positions[i]
@@ -143,7 +151,13 @@ export async function patchTemplateForFields(
     }
 
     // Patch expressions first (old vars still present → patcher detects them)
-    const patched = await patchTemplateForFields(modifiedSource, sectionKey, fields, repeatedGroups, options)
+    const patched = await patchTemplateForFields(
+      modifiedSource,
+      sectionKey,
+      fields,
+      repeatedGroups,
+      options,
+    )
 
     // Now remove old variable declarations from the patched result
     return removeOldVarDeclarations(patched, fields, repeatedGroups, varName)
@@ -183,8 +197,8 @@ export async function patchTemplateForFields(
     // Collect elements with mixed content (text + inline child elements)
     // These are rich text fields where the whole element is one CMS field.
     if (isElement(node) && node.children && node.children.length > 1) {
-      const hasText = node.children.some(c => c.type === 'text' && c.value?.trim())
-      const hasChild = node.children.some(c => isElement(c) || c.type === 'expression')
+      const hasText = node.children.some((c) => c.type === 'text' && c.value?.trim())
+      const hasChild = node.children.some((c) => isElement(c) || c.type === 'expression')
       if (hasText && hasChild) {
         const fullText = normalizeWs(getElementTextContent(node))
         if (fullText) mixedElements.push({ node, normalizedText: fullText })
@@ -249,13 +263,18 @@ export async function patchTemplateForFields(
     // built the defaultValue array before patching. Without this sync, the
     // content JSON (built from field.defaultValue) would be missing _classN values.
     for (const g of repeatedGroups) {
-      const topField = fields.find(f => f.key === g.fieldKey)
+      const topField = fields.find((f) => f.key === g.fieldKey)
       if (!topField || !Array.isArray(topField.defaultValue)) continue
       const items = topField.defaultValue as Array<Record<string, unknown>>
       for (const innerField of g.fields) {
         for (let ii = 0; ii < items.length && ii < innerField.defaultValues.length; ii++) {
           const val = innerField.defaultValues[ii]
-          if (val != null && items[ii] && typeof items[ii] === 'object' && !(innerField.key in items[ii]!)) {
+          if (
+            val != null &&
+            items[ii] &&
+            typeof items[ii] === 'object' &&
+            !(innerField.key in items[ii]!)
+          ) {
             items[ii]![innerField.key] = val
           }
         }
@@ -279,6 +298,10 @@ export async function patchTemplateForFields(
         // No .map() expression found — try static <ul>/<li> conversion
         patchStaticListField(source, sectionKey, field, varName, ast, edits)
       }
+      if (edits.length === editsBefore) {
+        // Still nothing — try collapsing repeated component instances
+        patchRepeatedComponentInstances(source, sectionKey, field, varName, ast, edits)
+      }
       continue
     }
 
@@ -328,7 +351,7 @@ export async function patchTemplateForFields(
     // Treat the whole element as a rich text field with set:html for CMS rendering.
     if (edits.length === editsBefore) {
       const dv = field.defaultValue as string
-      const mixedMatch = mixedElements.find(m => m.normalizedText === normalizeWs(dv))
+      const mixedMatch = mixedElements.find((m) => m.normalizedText === normalizeWs(dv))
       if (mixedMatch) {
         patchMixedContentField(source, sectionKey, field, varName, mixedMatch.node, edits)
       }
@@ -368,7 +391,10 @@ export function convertToSetHtml(source: string): string {
       const ch = result[i]!
       if (ch === '{') braceDepth++
       else if (ch === '}') braceDepth--
-      else if (ch === '>' && braceDepth === 0) { tagEnd = i; break }
+      else if (ch === '>' && braceDepth === 0) {
+        tagEnd = i
+        break
+      }
     }
     if (tagEnd === -1) continue
 
@@ -470,7 +496,10 @@ function convertAstPositions(node: AstNode, b2c: (offset: number) => number): vo
  * AST expression positions can extend beyond the actual braces, so we search
  * the source directly using the child text content as anchor.
  */
-function findExpressionBounds(source: string, node: AstNode): { start: number; end: number } | null {
+function findExpressionBounds(
+  source: string,
+  node: AstNode,
+): { start: number; end: number } | null {
   const approxStart = node.position?.start?.offset
   if (approxStart == null) return null
 
@@ -506,7 +535,10 @@ function findExpressionBounds(source: string, node: AstNode): { start: number; e
       if (ch === inStr && source[i - 1] !== '\\') inStr = null
       continue
     }
-    if (ch === "'" || ch === '"' || ch === '`') { inStr = ch; continue }
+    if (ch === "'" || ch === '"' || ch === '`') {
+      inStr = ch
+      continue
+    }
     if (ch === '{') depth++
     if (ch === '}') {
       depth--
@@ -556,7 +588,10 @@ function findTextBounds(source: string, node: AstNode): { start: number; end: nu
 function getElementTextContent(node: AstNode): string {
   if (node.type === 'text') return node.value ?? ''
   if (node.type === 'expression') {
-    return (node.children ?? []).filter(c => c.type === 'text').map(c => c.value ?? '').join('')
+    return (node.children ?? [])
+      .filter((c) => c.type === 'text')
+      .map((c) => c.value ?? '')
+      .join('')
   }
   return (node.children ?? []).map(getElementTextContent).join('')
 }
@@ -595,7 +630,7 @@ function patchMixedContentField(
   const bindingKey = `${sectionKey}.${field.key}`
 
   // Skip if already has data-sk-field
-  if (element.attributes?.some(a => a.name === 'data-sk-field')) return
+  if (element.attributes?.some((a) => a.name === 'data-sk-field')) return
 
   // Find the element's opening tag in source
   const startOffset = element.position?.start?.offset
@@ -683,14 +718,15 @@ function patchIconOrImageField(
     if (targetParent) return // already found
     if (!parent || !isElement(parent)) return
     // Skip if parent already has data-sk-field
-    if (parent.attributes?.some(a => a.name === 'data-sk-field')) return
+    if (parent.attributes?.some((a) => a.name === 'data-sk-field')) return
 
     if (field.type === 'icon') {
       // Match component named *Icon* or element with icon/name attr matching default
       const isIconComp = isElement(node) && /icon/i.test(node.name ?? '')
       const hasIconAttr = node.attributes?.some(
-        a => (a.name === 'icon' || a.name === 'name' || a.name === 'data-icon') &&
-             (a.value === defaultStr || a.value.includes(field.key))
+        (a) =>
+          (a.name === 'icon' || a.name === 'name' || a.name === 'data-icon') &&
+          (a.value === defaultStr || a.value.includes(field.key)),
       )
       if (isIconComp || hasIconAttr) {
         targetParent = parent
@@ -700,7 +736,7 @@ function patchIconOrImageField(
       const tag = node.name ?? ''
       const isImgEl = /^(img|Image|picture)$/.test(tag)
       const hasSrcAttr = node.attributes?.some(
-        a => a.name === 'src' && (a.value === defaultStr || a.value.includes(field.key))
+        (a) => a.name === 'src' && (a.value === defaultStr || a.value.includes(field.key)),
       )
       if (isImgEl || hasSrcAttr) {
         targetParent = parent
@@ -906,15 +942,20 @@ function patchArrayField(
   // Match by looking for the field's first item value inside each expression's source.
   let mapExpr = mapExpressions[0]!
 
-  if (mapExpressions.length > 1 && Array.isArray(field.defaultValue) && field.defaultValue.length > 0) {
+  if (
+    mapExpressions.length > 1 &&
+    Array.isArray(field.defaultValue) &&
+    field.defaultValue.length > 0
+  ) {
     const firstItem = field.defaultValue[0]
-    const searchStr = typeof firstItem === 'string'
-      ? firstItem.slice(0, 30)
-      : typeof firstItem === 'object' && firstItem !== null
-        ? Object.values(firstItem as Record<string, unknown>)
-            .find((v): v is string => typeof v === 'string' && v.length >= 3)
-            ?.slice(0, 30) ?? ''
-        : ''
+    const searchStr =
+      typeof firstItem === 'string'
+        ? firstItem.slice(0, 30)
+        : typeof firstItem === 'object' && firstItem !== null
+          ? (Object.values(firstItem as Record<string, unknown>)
+              .find((v): v is string => typeof v === 'string' && v.length >= 3)
+              ?.slice(0, 30) ?? '')
+          : ''
 
     if (searchStr.length >= 3) {
       for (const expr of mapExpressions) {
@@ -979,7 +1020,7 @@ function patchArrayField(
     })
   } else {
     // Try variable reference: varName.map( → (cmsVar?.field ?? []).map(
-    const varMapRegex = new RegExp(`(\\w+)\\.map\\s*\\(`)
+    const varMapRegex = /(\w+)\.map\s*\(/
     const varMapMatch = exprSource.match(varMapRegex)
     if (varMapMatch) {
       const varRef = varMapMatch[1]!
@@ -1038,15 +1079,19 @@ function patchStaticListField(
     walkAst(node, (n) => {
       if (hasMap) return
       if (n.type === 'expression') {
-        const code = (n.children ?? []).map(c => c.value ?? '').join('')
+        const code = (n.children ?? []).map((c) => c.value ?? '').join('')
         if (/\.map\s*\(/.test(code)) hasMap = true
       }
     })
     if (hasMap) return
     // Compare <li> text content against field items.
     // items[i] may contain HTML (if formatting: true) — strip tags for comparison.
-    const stripHtml = (s: string) => s.replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim()
-    const liChildren = (node.children ?? []).filter(c => c.type === 'element' && c.name === 'li')
+    const stripHtml = (s: string) =>
+      s
+        .replace(/<[^>]+>/g, '')
+        .replace(/\s+/g, ' ')
+        .trim()
+    const liChildren = (node.children ?? []).filter((c) => c.type === 'element' && c.name === 'li')
     if (liChildren.length !== items.length) return
     const allMatch = liChildren.every((li, i) => {
       const text = getElementTextContent(li).replace(/\s+/g, ' ').trim()
@@ -1059,7 +1104,7 @@ function patchStaticListField(
 
   const ulNode = matchedUl as AstNode
   const liChildren = (ulNode.children ?? []).filter(
-    c => c.type === 'element' && c.name === 'li',
+    (c) => c.type === 'element' && c.name === 'li',
   ) as AstNode[]
   if (liChildren.length === 0) return
 
@@ -1097,15 +1142,16 @@ function patchStaticListField(
 
   // Build the fallback array literal.
   // HTML items (formatting: true) are wrapped in backtick strings to avoid escaping issues.
-  const hasHtmlItems = items.some(s => /<[a-z]/.test(s))
+  const hasHtmlItems = items.some((s) => /<[a-z]/.test(s))
   const fallbackItems = hasHtmlItems
-    ? items.map(s => `\`${s.replace(/`/g, '\\`').replace(/\$/g, '\\$')}\``).join(', ')
-    : items.map(s => `'${s.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`).join(', ')
+    ? items.map((s) => `\`${s.replace(/`/g, '\\`').replace(/\$/g, '\\$')}\``).join(', ')
+    : items.map((s) => `'${s.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`).join(', ')
 
   // Determine indentation of the first <li> for formatting
   const textBeforeFirstLi = source.slice(0, rangeStart)
   const lastNewline = textBeforeFirstLi.lastIndexOf('\n')
-  const indent = lastNewline >= 0 ? textBeforeFirstLi.slice(lastNewline + 1).match(/^[ \t]*/)?.[0] ?? '' : ''
+  const indent =
+    lastNewline >= 0 ? (textBeforeFirstLi.slice(lastNewline + 1).match(/^[ \t]*/)?.[0] ?? '') : ''
 
   const replacement =
     `{(${varName}?.${field.key} ?? [${fallbackItems}]).map((item, _i) => (\n` +
@@ -1347,7 +1393,7 @@ function collectDynamicClassEdits(
     function sharedClassCount(instValue: string): number {
       const instParts = new Set(instValue.split(/\s+/).filter(Boolean))
       if (tmplParts.size === 0 && instParts.size === 0) return 1 // both empty = match
-      return [...tmplParts].filter(p => instParts.has(p)).length
+      return [...tmplParts].filter((p) => instParts.has(p)).length
     }
 
     // 1. Exact path — only accept if at least 1 CSS class is shared
@@ -1361,7 +1407,11 @@ function collectDynamicClassEdits(
     }
 
     // 2. Same tag-path (without indices) — pick the one with most shared classes
-    const stripIdx = (p: string) => p.split('/').map(s => s.replace(/:\d+$/, '')).join('/')
+    const stripIdx = (p: string) =>
+      p
+        .split('/')
+        .map((s) => s.replace(/:\d+$/, ''))
+        .join('/')
     const tmplTagPath = stripIdx(tmplAttr.path)
     let bestIdx = -1
     let bestShared = 0
@@ -1369,7 +1419,10 @@ function collectDynamicClassEdits(
       if (claimed.has(i)) continue
       if (stripIdx(instAttrs[i]!.path) !== tmplTagPath) continue
       const shared = sharedClassCount(instAttrs[i]!.value)
-      if (shared > bestShared) { bestShared = shared; bestIdx = i }
+      if (shared > bestShared) {
+        bestShared = shared
+        bestIdx = i
+      }
     }
     if (bestIdx >= 0 && bestShared > 0) {
       claimed.add(bestIdx)
@@ -1399,7 +1452,7 @@ function collectDynamicClassEdits(
     // adjustments can put the class attr offset slightly after the text offset.
     const fieldTag = field.tag
     let bestAttrIdx = -1
-    let bestDist = Infinity
+    let bestDist = Number.POSITIVE_INFINITY
     for (let ai = 0; ai < tmplAttrs.length; ai++) {
       // Extract leaf tag from path: "div:0/div:0/span:1" → "span"
       const pathParts = tmplAttrs[ai]!.path.split('/')
@@ -1473,6 +1526,156 @@ function collectDynamicClassEdits(
   }
 }
 
+/**
+ * Collapses N repeated instances of the same Astro component into a single
+ * `.map()` expression over a CMS array field.
+ *
+ * Example: 2× <PricingCard name="Free" features={freeFeatures} />
+ *   → {(skData?.pricingcards ?? [...]).map((item, _i) => <PricingCard name={item.name} ... />)}
+ *
+ * Only triggered when field.options.sourceComponent is set (by the analyzer).
+ */
+function patchRepeatedComponentInstances(
+  source: string,
+  sectionKey: string,
+  field: PatchField,
+  varName: string,
+  ast: AstNode,
+  edits: Edit[],
+): void {
+  const compName = (field as any).options?.sourceComponent as string | undefined
+  if (!compName) return
+
+  // Collect all component instances from the AST
+  const instanceNodes: AstNode[] = []
+  walkAst(ast, (node) => {
+    if (node.type === 'component' && node.name === compName) {
+      instanceNodes.push(node)
+    }
+  })
+  if (instanceNodes.length < 2) return
+
+  // Resolve source ranges: [start, end) for each instance
+  // The AST gives us approximate positions; we scan forward/backward to find exact tag bounds.
+  const ranges: Array<{ start: number; end: number; attrs: AstAttr[] }> = []
+  for (const node of instanceNodes) {
+    const approxStart = node.position?.start?.offset
+    if (approxStart == null) return
+    const searchFrom = Math.max(0, approxStart - 2)
+    const tagStart = source.indexOf(`<${compName}`, searchFrom)
+    if (tagStart === -1 || tagStart > approxStart + 2) return
+
+    // Find the end: either a self-closing /> or explicit </CompName>
+    const tagEnd = findComponentTagEnd(source, tagStart, compName)
+    if (tagEnd === -1) return
+    ranges.push({ start: tagStart, end: tagEnd, attrs: node.attributes ?? [] })
+  }
+  if (ranges.length < 2) return
+
+  // Build the default value JSON (inline fallback in the .map() call)
+  const defaultItems = Array.isArray(field.defaultValue) ? field.defaultValue : []
+  const defaultJson = JSON.stringify(defaultItems)
+
+  // Build the mapped component tag from the first instance's attributes.
+  // CMS-managed props are replaced with item.propName; structural props are kept as-is.
+  const innerFieldKeys = new Set<string>(
+    ((field as any).options?.arrayItem?.fields ?? []).map((f: { key: string }) => f.key),
+  )
+  const skipPropRegex = /^(class|className|id|style|type|role|aria-|data-)$/
+  const firstAttrs = ranges[0]!.attrs
+  const propLines: string[] = []
+  for (const attr of firstAttrs) {
+    const name = attr.name
+    if (skipPropRegex.test(name) || name.startsWith('aria-') || name.startsWith('data-')) {
+      // Keep structural attributes verbatim
+      const raw = attr.kind === 'quoted' ? `${name}="${attr.value}"` : `${name}={${attr.value}}`
+      propLines.push(raw)
+      continue
+    }
+    if (innerFieldKeys.has(name)) {
+      propLines.push(`${name}={item.${name}}`)
+    } else {
+      // Unknown prop — keep original value
+      const raw = attr.kind === 'quoted' ? `${name}="${attr.value}"` : `${name}={${attr.value}}`
+      propLines.push(raw)
+    }
+  }
+  // fieldPrefix enables child component to add its own data-sk-field bindings.
+  // data-sk-field on component calls is not forwarded to the DOM by Astro.
+  propLines.push(`fieldPrefix={\`${sectionKey}.${field.key}.\${_i}\`}`)
+
+  const propsStr = propLines.map((p) => `    ${p}`).join('\n')
+  const mapExpr =
+    `{(${varName}?.${field.key} ?? ${defaultJson}).map((item, _i) => (\n` +
+    `  <${compName}\n${propsStr}\n  />\n` +
+    `))}`
+
+  // Replace first instance with the .map() expression; delete the rest.
+  // Also consume any leading whitespace before subsequent instances so we don't
+  // leave blank lines.
+  edits.push({
+    offset: ranges[0]!.start,
+    deleteCount: ranges[0]!.end - ranges[0]!.start,
+    insert: mapExpr,
+  })
+  for (let i = 1; i < ranges.length; i++) {
+    const r = ranges[i]!
+    // Walk back to consume leading whitespace/newline
+    let deleteStart = r.start
+    while (deleteStart > 0 && /[ \t]/.test(source[deleteStart - 1]!)) deleteStart--
+    if (deleteStart > 0 && source[deleteStart - 1] === '\n') deleteStart--
+    edits.push({ offset: deleteStart, deleteCount: r.end - deleteStart, insert: '' })
+  }
+}
+
+/**
+ * Find the end offset of a component tag starting at `tagStart`.
+ * Returns the offset AFTER the last character (`>` of `/>` or `</Name>`).
+ * Returns -1 if the end cannot be determined.
+ */
+function findComponentTagEnd(source: string, tagStart: number, compName: string): number {
+  let i = tagStart + 1 // skip '<'
+  let inQuote: string | null = null
+  let inExpr = 0
+  while (i < source.length) {
+    const ch = source[i]!
+    if (inQuote) {
+      if (ch === inQuote && source[i - 1] !== '\\') inQuote = null
+      i++
+      continue
+    }
+    if (ch === '{') {
+      inExpr++
+      i++
+      continue
+    }
+    if (ch === '}' && inExpr > 0) {
+      inExpr--
+      i++
+      continue
+    }
+    if (inExpr > 0) {
+      i++
+      continue
+    }
+    if (ch === '"' || ch === "'") {
+      inQuote = ch
+      i++
+      continue
+    }
+    if (ch === '/' && source[i + 1] === '>') return i + 2 // self-closing />
+    if (ch === '>') {
+      // Check for explicit closing tag </CompName>
+      const closing = `</${compName}>`
+      const closingIdx = source.indexOf(closing, i + 1)
+      if (closingIdx !== -1) return closingIdx + closing.length
+      return i + 1
+    }
+    i++
+  }
+  return -1
+}
+
 function patchRepeatedGroups(
   source: string,
   sectionKey: string,
@@ -1600,7 +1803,8 @@ function patchRepeatedGroups(
       if (typeof defaultVal === 'string' && defaultVal.length >= 1) {
         const found = findNormalizedText(elementSrc, defaultVal, 0)
         if (found) {
-          elementSrc = elementSrc.slice(0, found.start) + `{item.${field.key}}` + elementSrc.slice(found.end)
+          elementSrc =
+            elementSrc.slice(0, found.start) + `{item.${field.key}}` + elementSrc.slice(found.end)
         }
       }
 
@@ -1621,7 +1825,10 @@ function patchRepeatedGroups(
     // Apply inner edits in reverse order
     innerEdits.sort((a, b) => b.offset - a.offset)
     for (const edit of innerEdits) {
-      templateSrc = templateSrc.slice(0, edit.offset) + edit.insert + templateSrc.slice(edit.offset + edit.deleteCount)
+      templateSrc =
+        templateSrc.slice(0, edit.offset) +
+        edit.insert +
+        templateSrc.slice(edit.offset + edit.deleteCount)
     }
 
     // Add data-sk-field to the template element's opening tag (container binding)
@@ -1650,9 +1857,13 @@ function patchRepeatedGroups(
       const inst = instances[i]!
       // Also remove surrounding whitespace/newlines
       let deleteStart = inst.start
-      let deleteEnd = inst.end
+      const deleteEnd = inst.end
       // Extend backwards to eat preceding whitespace
-      while (deleteStart > 0 && /\s/.test(source[deleteStart - 1]!) && source[deleteStart - 1] !== '\n') {
+      while (
+        deleteStart > 0 &&
+        /\s/.test(source[deleteStart - 1]!) &&
+        source[deleteStart - 1] !== '\n'
+      ) {
         deleteStart--
       }
       // Eat the preceding newline too
@@ -1699,11 +1910,23 @@ function addInnerFieldBindings(
     let inE = 0
     for (let i = tagStart; i < idx; i++) {
       const ch = templateSrc[i]!
-      if (inQ) { if (ch === inQ && templateSrc[i - 1] !== '\\') inQ = null; continue }
-      if (ch === '{') { inE++; continue }
-      if (ch === '}' && inE > 0) { inE--; continue }
+      if (inQ) {
+        if (ch === inQ && templateSrc[i - 1] !== '\\') inQ = null
+        continue
+      }
+      if (ch === '{') {
+        inE++
+        continue
+      }
+      if (ch === '}' && inE > 0) {
+        inE--
+        continue
+      }
       if (inE > 0) continue
-      if (ch === '"' || ch === "'") { inQ = ch; continue }
+      if (ch === '"' || ch === "'") {
+        inQ = ch
+        continue
+      }
       if (ch === '>') tagEnd = i
     }
     if (tagEnd === -1) continue
@@ -1807,7 +2030,9 @@ function extractVarName(frontmatter: string): string | null {
 }
 
 /** Type guard for element-like nodes (element, component, custom-element). */
-function isElement(node: AstNode): node is AstNode & { attributes: AstAttr[]; children: AstNode[] } {
+function isElement(
+  node: AstNode,
+): node is AstNode & { attributes: AstAttr[]; children: AstNode[] } {
   return (
     (node.type === 'element' || node.type === 'component' || node.type === 'custom-element') &&
     Array.isArray(node.attributes)
@@ -1815,7 +2040,11 @@ function isElement(node: AstNode): node is AstNode & { attributes: AstAttr[]; ch
 }
 
 /** Recursive AST walk with parent tracking. */
-function walkAst(node: AstNode, callback: (node: AstNode, parent: AstNode | null) => void, parent: AstNode | null = null): void {
+function walkAst(
+  node: AstNode,
+  callback: (node: AstNode, parent: AstNode | null) => void,
+  parent: AstNode | null = null,
+): void {
   callback(node, parent)
   if (node.children) {
     for (const child of node.children) {
@@ -1840,7 +2069,12 @@ function findFirstChildElement(node: AstNode): (AstNode & { attributes: AstAttr[
  * Inserts before the closing `>` of the opening tag.
  * Uses the element's tag name to locate it reliably in the source.
  */
-function addAttributeToElement(source: string, element: AstNode, attrStr: string, edits: Edit[]): void {
+function addAttributeToElement(
+  source: string,
+  element: AstNode,
+  attrStr: string,
+  edits: Edit[],
+): void {
   const approxStart = element.position?.start?.offset
   if (approxStart == null) return
 
@@ -1876,10 +2110,19 @@ function findOpeningTagEnd(source: string, startOffset: number): number {
       if (ch === inQuote && source[i - 1] !== '\\') inQuote = null
       continue
     }
-    if (ch === '{') { inExpr++; continue }
-    if (ch === '}' && inExpr > 0) { inExpr--; continue }
+    if (ch === '{') {
+      inExpr++
+      continue
+    }
+    if (ch === '}' && inExpr > 0) {
+      inExpr--
+      continue
+    }
     if (inExpr > 0) continue
-    if (ch === '"' || ch === "'") { inQuote = ch; continue }
+    if (ch === '"' || ch === "'") {
+      inQuote = ch
+      continue
+    }
     if (ch === '>') return i
   }
   return -1
@@ -1894,7 +2137,8 @@ function applyEdits(source: string, edits: Edit[]): string {
 
   let result = source
   for (const edit of sorted) {
-    result = result.slice(0, edit.offset) + edit.insert + result.slice(edit.offset + edit.deleteCount)
+    result =
+      result.slice(0, edit.offset) + edit.insert + result.slice(edit.offset + edit.deleteCount)
   }
   return result
 }
@@ -1904,7 +2148,12 @@ function applyEdits(source: string, edits: Edit[]): string {
  * Called AFTER expression patching so that variable references have already
  * been replaced with CMS expressions.
  */
-function removeOldVarDeclarations(source: string, fields: PatchField[], repeatedGroups?: RepeatedGroup[], cmsVarName = 'skData'): string {
+function removeOldVarDeclarations(
+  source: string,
+  fields: PatchField[],
+  repeatedGroups?: RepeatedGroup[],
+  cmsVarName = 'skData',
+): string {
   const fmStart = source.indexOf('---')
   if (fmStart === -1) return source
   const fmEnd = source.indexOf('---', fmStart + 3)
@@ -1925,6 +2174,19 @@ function removeOldVarDeclarations(source: string, fields: PatchField[], repeated
     }
   }
 
+  // Remove frontmatter array variables that were passed as props to repeated components
+  // and are no longer referenced in the template after patching.
+  const templatePart0 = source.slice(fmEnd + 3)
+  const fmVarRegex2 = /(?:const|let)\s+(\w+)\s*=\s*\[/g
+  let m: RegExpExecArray | null
+  while ((m = fmVarRegex2.exec(frontmatter)) !== null) {
+    const vName = m[1]!
+    if (fieldKeys.has(vName)) continue
+    // If no longer referenced in the template, it was consumed by component patching
+    const stillUsed = new RegExp(`\\b${vName}\\b`).test(templatePart0)
+    if (!stillUsed) fieldKeys.add(vName)
+  }
+
   // Collect all ranges to remove (relative to frontmatter string)
   const removals: Array<{ start: number; end: number }> = []
   // Aliases that must be appended AFTER the cmsVarName (= skData) declaration to avoid TDZ
@@ -1962,7 +2224,10 @@ function removeOldVarDeclarations(source: string, fields: PatchField[], repeated
           if (ch === inStr && rhs[i - 1] !== '\\') inStr = null
           continue
         }
-        if (ch === "'" || ch === '"' || ch === '`') { inStr = ch; continue }
+        if (ch === "'" || ch === '"' || ch === '`') {
+          inStr = ch
+          continue
+        }
         if (ch === open) depth++
         if (ch === close) depth--
       }
@@ -2021,6 +2286,175 @@ function removeOldVarDeclarations(source: string, fields: PatchField[], repeated
 //
 // Returns the cleaned source and a map of fieldKey → extracted value.
 // The caller decides which values to write to JSON:
+// ---------------------------------------------------------------------------
+// Child-component fieldPrefix patching
+// ---------------------------------------------------------------------------
+
+/**
+ * Patches a child Astro component (e.g. PricingCard.astro) to accept a
+ * `fieldPrefix` prop and expose `data-sk-field` bindings on its elements,
+ * enabling the inline editor to identify individual fields.
+ *
+ * Transforms:
+ *   <p>{name}</p>  →  <p data-sk-field={fieldPrefix ? `${fieldPrefix}.name` : undefined}>{name}</p>
+ *   href={ctaHref} →  data-sk-field={fieldPrefix ? `${fieldPrefix}.ctaHref` : undefined}
+ *   features.map() →  features.map((feature, _fi) => ... data-sk-field per item
+ *
+ * Idempotent: no-op if fieldPrefix is already present.
+ */
+export function patchChildComponentForFieldPrefix(
+  source: string,
+  innerFields: Array<{ key: string; type: string }>,
+): string {
+  // Idempotency guard — already patched
+  if (source.includes('fieldPrefix?: string') || source.includes('fieldPrefix?:string'))
+    return source
+
+  const fmStart = source.indexOf('---')
+  const fmEnd = source.indexOf('---', fmStart + 3)
+  if (fmStart === -1 || fmEnd === -1) return source
+
+  let result = source
+
+  // 1. Add fieldPrefix to Props interface
+  // Find the closing `}` of the interface block
+  const interfaceMatch = result.match(/export\s+interface\s+Props\s*\{([\s\S]*?)\}/)
+  if (interfaceMatch) {
+    const ifaceEnd = result.indexOf(interfaceMatch[0]) + interfaceMatch[0].length
+    const lastPropLine = interfaceMatch[0].slice(0, -1).trimEnd() // remove trailing `}`
+    result = result.slice(0, ifaceEnd - 1) + '\n  fieldPrefix?: string;\n}' + result.slice(ifaceEnd)
+  } else {
+    // No interface — insert before closing ---
+    const closeFm = result.indexOf('---', result.indexOf('---') + 3)
+    result =
+      result.slice(0, closeFm) +
+      'interface Props { fieldPrefix?: string }\n' +
+      result.slice(closeFm)
+  }
+
+  // 2. Add fieldPrefix to destructuring
+  // Match: const { ..., highlight = false } = Astro.props
+  result = result.replace(/(\bconst\s*\{[^}]*)(}\s*=\s*Astro\.props)/, (_m, before, after) => {
+    // Avoid adding twice
+    if (before.includes('fieldPrefix')) return _m
+    const trimmed = before.trimEnd()
+    const sep = trimmed.endsWith(',') ? ' ' : ',\n  '
+    return `${trimmed}${sep}fieldPrefix${after}`
+  })
+
+  // 3. Patch template elements — work on the template part only
+  const closingFm = result.indexOf('---', result.indexOf('---') + 3)
+  const frontmatterPart = result.slice(0, closingFm + 3)
+  let templatePart = result.slice(closingFm + 3)
+
+  const scalarFields = innerFields.filter((f) => f.type !== 'array')
+  const arrayFields = innerFields.filter((f) => f.type === 'array')
+
+  // 3a. Scalar fields: add data-sk-field to the element containing {propName}
+  for (const field of scalarFields) {
+    const propExpr = `{${field.key}}`
+    // href attribute: <a href={ctaHref} ...
+    if (field.key.toLowerCase().includes('href') || field.key.toLowerCase().includes('link')) {
+      templatePart = templatePart.replace(
+        new RegExp(`href=\\{${field.key}\\}`, 'g'),
+        `href={${field.key}} data-sk-field={fieldPrefix ? \`\${fieldPrefix}.${field.key}\` : undefined}`,
+      )
+      continue
+    }
+
+    // Inline text in element: find <tag ...>{propName}</tag> or <tag ...>{propName}
+    // Add data-sk-field to the opening tag of the nearest wrapping element
+    const tagWithExprRegex = new RegExp(
+      `(<(?!/)(?:p|span|h[1-6]|div|li|td|th|dt|dd|label|button|a)\\b[^>]*?)(\\/?>)([^<]*\\{${field.key}\\})`,
+      'g',
+    )
+    templatePart = templatePart.replace(tagWithExprRegex, (_m, tagOpen, tagClose, rest) => {
+      if (tagOpen.includes('data-sk-field')) return _m
+      const attr = ` data-sk-field={fieldPrefix ? \`\${fieldPrefix}.${field.key}\` : undefined}`
+      return `${tagOpen}${attr}${tagClose}${rest}`
+    })
+  }
+
+  // 3b. Array fields: add index param + data-sk-field on innermost element
+  for (const field of arrayFields) {
+    // Match: features.map((feature) =>  or  features.map((feature, fi) =>
+    const mapParamRegex = new RegExp(`(${field.key}\\.map\\s*\\(\\s*\\(\\s*)(\\w+)(\\s*\\))`, 'g')
+    // Add _fi index if missing, and annotate the ul/ol containing the map
+    templatePart = templatePart.replace(
+      new RegExp(`(<(?:ul|ol)[^>]*?)(\\/?>)([\\s\\S]*?${field.key}\\.map)`, 'g'),
+      (_m, ulOpen, ulClose, rest) => {
+        if (ulOpen.includes('data-sk-field')) return _m
+        const attr = ` data-sk-field={fieldPrefix ? \`\${fieldPrefix}.${field.key}\` : undefined}`
+        return `${ulOpen}${attr}${ulClose}${rest}`
+      },
+    )
+
+    // Add _fi index param to .map() callback if not already indexed
+    templatePart = templatePart.replace(mapParamRegex, (_m, before, param, close) => {
+      if (close.trim().startsWith(',')) return _m // already has index
+      return `${before}${param}, _fi${close}`
+    })
+
+    // Add data-sk-field on the innermost span/li that renders the item variable
+    // Pattern: <span ...>{itemVar}</span>  or  <li ...>{itemVar}</li>
+    // We search within .map() callback blocks
+    const mapBlockRegex = new RegExp(
+      `(${field.key}\\.map\\s*\\([^)]*\\)\\s*=>\\s*\\([\\s\\S]*?)(<(?:span|li|td)\\b)([^>]*?>)([^<]*\\{\\w+\\})`,
+      'g',
+    )
+    templatePart = templatePart.replace(
+      mapBlockRegex,
+      (_m, mapHead, tagOpen, tagClose, content) => {
+        if (tagClose.includes('data-sk-field')) return _m
+        const attr = ` data-sk-field={fieldPrefix ? \`\${fieldPrefix}.${field.key}.\${_fi}\` : undefined}`
+        return `${mapHead}${tagOpen}${tagClose.slice(0, -1)}${attr}>${content}`
+      },
+    )
+  }
+
+  return frontmatterPart + templatePart
+}
+
+/**
+ * Scans the section source for import statements matching any field's
+ * `options.sourceComponent`, and returns metadata for child-component patching.
+ */
+export function detectChildImports(
+  source: string,
+  fields: PatchField[],
+): Array<{
+  compName: string
+  importPath: string
+  innerFields: Array<{ key: string; type: string }>
+}> {
+  const result: Array<{
+    compName: string
+    importPath: string
+    innerFields: Array<{ key: string; type: string }>
+  }> = []
+
+  for (const field of fields) {
+    const compName = (field as any).options?.sourceComponent as string | undefined
+    if (!compName) continue
+
+    const innerFields: Array<{ key: string; type: string }> = (
+      (field as any).options?.arrayItem?.fields ?? []
+    ).map((f: { key: string; type: string }) => ({
+      key: f.key,
+      type: f.type,
+    }))
+
+    // Find: import CompName from '...'
+    const importRegex = new RegExp(`import\\s+${compName}\\s+from\\s+['"]([^'"]+)['"]`)
+    const m = source.match(importRegex)
+    if (!m) continue
+
+    result.push({ compName, importPath: m[1]!, innerFields })
+  }
+
+  return result
+}
+
 //   - If the JSON already has a value for that field → just strip (JSON wins)
 //   - If the JSON has no value → use the extracted fallback
 // ---------------------------------------------------------------------------