@setzkasten-cms/astro-admin 1.4.2 → 1.4.6

package/dist/api-routes/init-add-section.js

@@ -1,7 +1,9 @@
 import {
+  detectChildImports,
+  patchChildComponentForFieldPrefix,
   patchTemplateForFields,
   stripTemplateFallbacks
-} from "../chunk-RHJONMLK.js";
+} from "../chunk-Q3N336KR.js";
 import {
   prefixPath,
   resolveStorageConfigForRequest
@@ -146,8 +148,14 @@ var POST = async ({ request, cookies }) => {
         }
         if (patchedSource !== pageSource) {
           filesToCommit.push({ path: fullPagePath, content: patchedSource });
-          const previewCopySource = patchedSource.replace(/\bexport\s+const\s+prerender\s*=\s*true\s*;?\s*\n?/, "").replace(/(from\s+')(\.\.\/)/g, "$1../$2").replace(/(from\s+")(\.\.\/)/g, "$1../$2");
           const relativePage = resolvedPagePath.replace(/^src\/pages\//, "");
+          const importDepth = "../".repeat(relativePage.split("/").length);
+          const previewCopySource = `---
+export const prerender = false;
+import Page from '${importDepth}${relativePage}';
+---
+<Page />
+`;
           const previewCopyPath = prefixPath(`src/pages/sk-preview/${relativePage}`, projectPrefix);
           filesToCommit.push({ path: previewCopyPath, content: previewCopySource });
         }
@@ -181,6 +189,19 @@ var POST = async ({ request, cookies }) => {
             filesToCommit[jsonIdx].content = JSON.stringify(sectionData, null, 2);
           }
         }
+        const allFields = section.allFields ?? section.fields;
+        const childPatches = detectChildImports(patchedSource, allFields);
+        for (const child of childPatches) {
+          const sectionDir = section.componentPath.replace(/\/[^/]+$/, "");
+          const resolvedChildPath = resolveRelativePath(sectionDir, child.importPath);
+          if (!resolvedChildPath) continue;
+          const childSource = await fetchFileContent(owner, repo, branch, resolvedChildPath, githubToken);
+          if (!childSource) continue;
+          const patchedChild = patchChildComponentForFieldPrefix(childSource, child.innerFields);
+          if (patchedChild !== childSource) {
+            filesToCommit.push({ path: resolvedChildPath, content: patchedChild });
+          }
+        }
       }
       if (body.pagePath && section.componentName) {
         const fullPagePath = prefixPath(body.pagePath, projectPrefix);
@@ -288,7 +309,7 @@ function patchPageFile(source, sectionKey, componentName, componentPath, pagePat
       if (lastEntryMatch && lastEntryMatch.index !== void 0) {
         const insertPos = registryMatch.index + registryMatch[0].indexOf(registryContent) + lastEntryMatch.index + lastEntryMatch[0].length;
         const newEntry = `
-  [normalize('${sectionKey}')]: ${componentName},`;
+  '${sectionKey}': ${componentName},`;
         patched = patched.slice(0, insertPos) + newEntry + patched.slice(insertPos);
       }
     }
@@ -309,6 +330,21 @@ function calculateRelativePath(fromDir, toPath) {
   if (ups === 0) return "./" + remaining;
   return "../".repeat(ups) + remaining;
 }
+function resolveRelativePath(baseDir, relativePath) {
+  if (relativePath.startsWith("/")) return relativePath.replace(/^\//, "");
+  const parts = [...baseDir.split("/").filter(Boolean)];
+  for (const segment of relativePath.split("/")) {
+    if (segment === ".") continue;
+    if (segment === "..") {
+      parts.pop();
+      continue;
+    }
+    parts.push(segment);
+  }
+  const resolved = parts.join("/");
+  if (resolved.startsWith("../") || resolved.startsWith("/")) return null;
+  return resolved;
+}
 async function fetchFileContent(owner, repo, branch, path, token) {
   try {
     const response = await fetch(

package/dist/api-routes/init-apply.js

@@ -1,6 +1,6 @@
 import {
   patchTemplateForFields
-} from "../chunk-RHJONMLK.js";
+} from "../chunk-Q3N336KR.js";
 import {
   resolveGitHubTokenForRequest
 } from "../chunk-NKDATSPA.js";

package/dist/api-routes/init-migrate.js

@@ -1,6 +1,6 @@
 import {
   patchTemplateForFields
-} from "../chunk-RHJONMLK.js";
+} from "../chunk-Q3N336KR.js";
 import {
   prefixPath,
   resolveStorageConfigForRequest

package/dist/api-routes/init-scan-page.js

@@ -2,7 +2,7 @@ import {
   analyzeAstroSection,
   extractLayoutImport,
   extractSectionImports
-} from "../chunk-K22A4ZBS.js";
+} from "../chunk-TD76R3A6.js";
 import {
   prefixPath,
   resolveStorageConfigForRequest

package/dist/api-routes/init-scan.js

@@ -2,7 +2,7 @@ import {
   analyzeAstroSection,
   extractSectionImports,
   findAstroPages
-} from "../chunk-K22A4ZBS.js";
+} from "../chunk-TD76R3A6.js";
 import {
   resolveGitHubTokenForRequest
 } from "../chunk-NKDATSPA.js";

package/dist/api-routes/section-commit-pending.js

@@ -1,6 +1,6 @@
 import {
   convertToSetHtml
-} from "../chunk-RHJONMLK.js";
+} from "../chunk-Q3N336KR.js";
 import {
   readPagesMeta
 } from "../chunk-FXNOTESI.js";

package/dist/{chunk-RHJONMLK.js → chunk-Q3N336KR.js}

@@ -155,6 +155,9 @@ const { data: ${varName} } = Astro.props
       if (edits.length === editsBefore2) {
         patchStaticListField(source, sectionKey, field, varName, ast, edits);
       }
+      if (edits.length === editsBefore2) {
+        patchRepeatedComponentInstances(source, sectionKey, field, varName, ast, edits);
+      }
       continue;
     }
     const cmsExpr = cmsExpressions.find((e) => e.fieldKey === field.key);
@@ -856,6 +859,111 @@ function collectDynamicClassEdits(innerEdits, source, instances, tmpl, group) {
     });
   }
 }
+function patchRepeatedComponentInstances(source, sectionKey, field, varName, ast, edits) {
+  const compName = field.options?.sourceComponent;
+  if (!compName) return;
+  const instanceNodes = [];
+  walkAst(ast, (node) => {
+    if (node.type === "component" && node.name === compName) {
+      instanceNodes.push(node);
+    }
+  });
+  if (instanceNodes.length < 2) return;
+  const ranges = [];
+  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;
+    const tagEnd = findComponentTagEnd(source, tagStart, compName);
+    if (tagEnd === -1) return;
+    ranges.push({ start: tagStart, end: tagEnd, attrs: node.attributes ?? [] });
+  }
+  if (ranges.length < 2) return;
+  const defaultItems = Array.isArray(field.defaultValue) ? field.defaultValue : [];
+  const defaultJson = JSON.stringify(defaultItems);
+  const innerFieldKeys = new Set(
+    (field.options?.arrayItem?.fields ?? []).map((f) => f.key)
+  );
+  const skipPropRegex = /^(class|className|id|style|type|role|aria-|data-)$/;
+  const firstAttrs = ranges[0].attrs;
+  const propLines = [];
+  for (const attr of firstAttrs) {
+    const name = attr.name;
+    if (skipPropRegex.test(name) || name.startsWith("aria-") || name.startsWith("data-")) {
+      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 {
+      const raw = attr.kind === "quoted" ? `${name}="${attr.value}"` : `${name}={${attr.value}}`;
+      propLines.push(raw);
+    }
+  }
+  propLines.push(`fieldPrefix={\`${sectionKey}.${field.key}.\${_i}\`}`);
+  const propsStr = propLines.map((p) => `    ${p}`).join("\n");
+  const mapExpr = `{(${varName}?.${field.key} ?? ${defaultJson}).map((item, _i) => (
+  <${compName}
+${propsStr}
+  />
+))}`;
+  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];
+    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: "" });
+  }
+}
+function findComponentTagEnd(source, tagStart, compName) {
+  let i = tagStart + 1;
+  let inQuote = 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;
+    if (ch === ">") {
+      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, sectionKey, varName, groups) {
   const edits = [];
   for (const group of groups) {
@@ -1173,6 +1281,15 @@ function removeOldVarDeclarations(source, fields, repeatedGroups, cmsVarName = "
       }
     }
   }
+  const templatePart0 = source.slice(fmEnd + 3);
+  const fmVarRegex2 = /(?:const|let)\s+(\w+)\s*=\s*\[/g;
+  let m;
+  while ((m = fmVarRegex2.exec(frontmatter)) !== null) {
+    const vName = m[1];
+    if (fieldKeys.has(vName)) continue;
+    const stillUsed = new RegExp(`\\b${vName}\\b`).test(templatePart0);
+    if (!stillUsed) fieldKeys.add(vName);
+  }
   const removals = [];
   const aliases = [];
   const templatePart = source.slice(fmEnd + 3);
@@ -1233,6 +1350,99 @@ function removeOldVarDeclarations(source, fields, repeatedGroups, cmsVarName = "
   frontmatter = frontmatter.replace(/\n{3,}/g, "\n\n");
   return source.slice(0, fmStart + 4) + frontmatter + source.slice(fmEnd);
 }
+function patchChildComponentForFieldPrefix(source, innerFields) {
+  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;
+  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();
+    result = result.slice(0, ifaceEnd - 1) + "\n  fieldPrefix?: string;\n}" + result.slice(ifaceEnd);
+  } else {
+    const closeFm = result.indexOf("---", result.indexOf("---") + 3);
+    result = result.slice(0, closeFm) + "interface Props { fieldPrefix?: string }\n" + result.slice(closeFm);
+  }
+  result = result.replace(
+    /(\bconst\s*\{[^}]*)(}\s*=\s*Astro\.props)/,
+    (_m, before, after) => {
+      if (before.includes("fieldPrefix")) return _m;
+      const trimmed = before.trimEnd();
+      const sep = trimmed.endsWith(",") ? " " : ",\n  ";
+      return `${trimmed}${sep}fieldPrefix${after}`;
+    }
+  );
+  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");
+  for (const field of scalarFields) {
+    const propExpr = `{${field.key}}`;
+    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;
+    }
+    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}`;
+    });
+  }
+  for (const field of arrayFields) {
+    const mapParamRegex = new RegExp(
+      `(${field.key}\\.map\\s*\\(\\s*\\(\\s*)(\\w+)(\\s*\\))`,
+      "g"
+    );
+    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}`;
+      }
+    );
+    templatePart = templatePart.replace(mapParamRegex, (_m, before, param, close) => {
+      if (close.trim().startsWith(",")) return _m;
+      return `${before}${param}, _fi${close}`;
+    });
+    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;
+}
+function detectChildImports(source, fields) {
+  const result = [];
+  for (const field of fields) {
+    const compName = field.options?.sourceComponent;
+    if (!compName) continue;
+    const innerFields = (field.options?.arrayItem?.fields ?? []).map((f) => ({
+      key: f.key,
+      type: f.type
+    }));
+    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;
+}
 function stripTemplateFallbacks(source) {
   const fallbacks = {};
   let result = source;
@@ -1263,5 +1473,7 @@ function stripTemplateFallbacks(source) {
 export {
   patchTemplateForFields,
   convertToSetHtml,
+  patchChildComponentForFieldPrefix,
+  detectChildImports,
   stripTemplateFallbacks
 };

package/dist/{chunk-K22A4ZBS.js → chunk-TD76R3A6.js}

@@ -1247,7 +1247,7 @@ ${template}`;
           label: `${compName} Liste`,
           confidence: "medium",
           defaultValue: instanceValues.length > 0 ? instanceValues : void 0,
-          options: { arrayItem: { type: "object", fields: innerFields } }
+          options: { arrayItem: { type: "object", fields: innerFields }, sourceComponent: compName }
         }, nodeOffset(instances[0]));
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@setzkasten-cms/astro-admin",
-  "version": "1.4.2",
+  "version": "1.4.6",
   "description": "Setzkasten Admin-UI, Init-Wizard und Adoptions-Pipeline für Astro",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -270,11 +270,11 @@
   },
   "dependencies": {
     "@astrojs/compiler": "^3.0.0",
-    "@setzkasten-cms/auth": "1.4.2",
-    "@setzkasten-cms/catalog": "1.4.2",
-    "@setzkasten-cms/core": "1.4.2",
-    "@setzkasten-cms/github-adapter": "1.4.2",
-    "@setzkasten-cms/ui": "1.4.2"
+    "@setzkasten-cms/auth": "1.4.6",
+    "@setzkasten-cms/catalog": "1.4.6",
+    "@setzkasten-cms/core": "1.4.6",
+    "@setzkasten-cms/github-adapter": "1.4.6",
+    "@setzkasten-cms/ui": "1.4.6"
   },
   "peerDependencies": {
     "astro": "^5.0.0",

package/src/api-routes/__tests__/add-section-helpers.test.ts

@@ -106,12 +106,10 @@ function buildPageConfig(
   return { sections: [{ key: sectionKey, enabled: true }] }
 }
 
-/** Build the sk-preview clone: strip prerender, fix import depths */
-function buildPreviewClone(patchedSource: string): string {
-  return patchedSource
-    .replace(/\bexport\s+const\s+prerender\s*=\s*true\s*;?\s*\n?/, '')
-    .replace(/(from\s+')(\.\.\/)/g, '$1../$2')
-    .replace(/(from\s+")(\.\.\/)/g, '$1../$2')
+/** Build a thin SSR wrapper that imports the production page as a component */
+function buildPreviewClone(relativePage: string): string {
+  const importDepth = '../'.repeat(relativePage.split('/').length)
+  return `---\nexport const prerender = false;\nimport Page from '${importDepth}${relativePage}';\n---\n<Page />\n`
 }
 
 // ---------------------------------------------------------------------------
@@ -225,50 +223,33 @@ describe('Page config — section deduplication', () => {
 })
 
 // ---------------------------------------------------------------------------
-// 4. sk-preview clone — prerender removal and import depth fix
+// 4. sk-preview clone — thin wrapper with correct import depth
 // ---------------------------------------------------------------------------
 
 describe('sk-preview clone generation', () => {
-  const patched = `---
-export const prerender = true;
-import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getSection } from 'setzkasten:content'
-const skData = getSection('_page_docs_architecture')
----
-
-<BaseLayout>
-  <section id="section-_page_docs_architecture">
-    <h1 set:html={skData?.heading ?? 'Architektur'} />
-  </section>
-</BaseLayout>
-`
-
-  it('should remove the prerender export', () => {
-    const clone = buildPreviewClone(patched)
-    expect(clone).not.toContain('export const prerender')
+  it('top-level page: imports with one ../', () => {
+    const clone = buildPreviewClone('impressum.astro')
+    expect(clone).toBe("---\nexport const prerender = false;\nimport Page from '../impressum.astro';\n---\n<Page />\n")
   })
 
-  it('should add an extra ../ level to relative imports', () => {
-    const clone = buildPreviewClone(patched)
-    // Original: '../../layouts/BaseLayout.astro'
-    // After fix: '../../../layouts/BaseLayout.astro'
-    expect(clone).toContain("from '../../../layouts/BaseLayout.astro'")
+  it('nested page: imports with correct depth', () => {
+    const clone = buildPreviewClone('docs/index.astro')
+    expect(clone).toContain("import Page from '../../docs/index.astro'")
   })
 
-  it('should not touch absolute module imports', () => {
-    const clone = buildPreviewClone(patched)
-    expect(clone).toContain("from 'setzkasten:content'")
+  it('three-level page: imports with three ../', () => {
+    const clone = buildPreviewClone('docs/api/reference.astro')
+    expect(clone).toContain("import Page from '../../../docs/api/reference.astro'")
   })
 
-  it('should preserve getSection call', () => {
-    const clone = buildPreviewClone(patched)
-    expect(clone).toContain("getSection('_page_docs_architecture')")
+  it('always has export const prerender = false', () => {
+    const clone = buildPreviewClone('impressum.astro')
+    expect(clone).toContain('export const prerender = false')
   })
 
-  it('should handle double-quoted imports too', () => {
-    const dq = patched.replace("from '../../layouts", 'from "../../layouts').replace("BaseLayout.astro'", 'BaseLayout.astro"')
-    const clone = buildPreviewClone(dq)
-    expect(clone).toContain('../../../layouts/BaseLayout.astro')
+  it('renders as <Page />', () => {
+    const clone = buildPreviewClone('impressum.astro')
+    expect(clone).toContain('<Page />')
   })
 })
 
@@ -309,12 +290,7 @@ describe('calculateRelativePath', () => {
 // When the UI sends pagePath='src/pages/docs.astro' but the actual file is
 // src/pages/docs/index.astro (directory route), the sk-preview clone must
 // be placed at sk-preview/docs/index.astro (NOT sk-preview/docs.astro).
-//
-// sk-preview/docs.astro (wrong): same depth as src/pages/sk-preview/
-//   → buildPreviewClone adds "../" → "../../layouts/" becomes "../../../layouts/" ✗
-//
-// sk-preview/docs/index.astro (correct): one level deeper in sk-preview/docs/
-//   → buildPreviewClone adds "../" → "../../layouts/" becomes "../../../layouts/" ✓
+// The import depth must match: docs/index.astro → '../../docs/index.astro'.
 // ---------------------------------------------------------------------------
 
 /** Simulate resolvedPagePath logic from init-add-section.ts step 4 */
@@ -334,7 +310,6 @@ describe('Directory-route clone path (build-failure regression)', () => {
   })
 
   it('directory route: resolvedPagePath falls back to index.astro', () => {
-    // docs.astro does not exist, docs/index.astro does
     const resolved = resolvePagePath(
       'src/pages/docs.astro',
       (p) => p === 'src/pages/docs/index.astro',
@@ -342,42 +317,27 @@ describe('Directory-route clone path (build-failure regression)', () => {
     expect(resolved).toBe('src/pages/docs/index.astro')
   })
 
-  it('directory route: clone relativePage uses resolved path, not body path', () => {
-    const bodyPagePath = 'src/pages/docs.astro'
+  it('directory route: relativePage uses resolved path, not body path', () => {
     const resolved = resolvePagePath(
-      bodyPagePath,
+      'src/pages/docs.astro',
       (p) => p === 'src/pages/docs/index.astro',
     )
     const relativePage = resolved.replace(/^src\/pages\//, '')
-    // Must be 'docs/index.astro', NOT 'docs.astro'
     expect(relativePage).toBe('docs/index.astro')
     expect(relativePage).not.toBe('docs.astro')
   })
 
-  it('directory route clone gets correct import depth after buildPreviewClone', () => {
-    // src/pages/docs/index.astro imports '../../layouts/BaseLayout.astro'
-    // clone at sk-preview/docs/index.astro needs '../../../layouts/BaseLayout.astro'
-    const source = `---
-import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getSection } from 'setzkasten:content'
-const skData = getSection('_page_docs')
----
-<BaseLayout><slot /></BaseLayout>
-`
-    const clone = buildPreviewClone(source)
-    expect(clone).toContain("from '../../../layouts/BaseLayout.astro'")
+  it('directory route: clone imports from correct depth', () => {
+    const clone = buildPreviewClone('docs/index.astro')
+    expect(clone).toContain("import Page from '../../docs/index.astro'")
   })
 
-  it('wrong clone path (docs.astro) would have incorrect import depth', () => {
-    // sk-preview/docs.astro is at same depth as sk-preview/*.astro
-    // It needs '../../layouts/' but buildPreviewClone would produce '../../../layouts/'
-    // This test documents the bug: if relativePage were 'docs.astro' instead of
-    // 'docs/index.astro', the clone ends up at the wrong path and imports break.
-    const bodyPagePath = 'src/pages/docs.astro'
-    const wrongRelativePage = bodyPagePath.replace(/^src\/pages\//, '') // 'docs.astro' ← the bug
-    expect(wrongRelativePage).toBe('docs.astro')
-    // The CORRECT relative page (after fix):
-    const correctRelativePage = 'src/pages/docs/index.astro'.replace(/^src\/pages\//, '')
-    expect(correctRelativePage).toBe('docs/index.astro')
+  it('wrong relativePage (docs.astro) produces shallow import depth', () => {
+    // Documents why resolved path matters: wrong path → wrong import
+    const wrongClone = buildPreviewClone('docs.astro')
+    expect(wrongClone).toContain("import Page from '../docs.astro'")
+    // vs correct:
+    const correctClone = buildPreviewClone('docs/index.astro')
+    expect(correctClone).toContain("import Page from '../../docs/index.astro'")
   })
 })

package/src/api-routes/init-add-section.ts

@@ -2,7 +2,7 @@ import type { APIRoute } from 'astro'
 import type { InferredSection } from '@setzkasten-cms/core/init'
 import { addSectionToConfig } from '@setzkasten-cms/core/init'
 import { prefixPath, resolveStorageConfigForRequest } from './_storage-config'
-import { patchTemplateForFields, stripTemplateFallbacks } from '../init/template-patcher-v2'
+import { patchTemplateForFields, stripTemplateFallbacks, detectChildImports, patchChildComponentForFieldPrefix } from '../init/template-patcher-v2'
 import type { RepeatedGroup } from '../init/analyzer-types'
 import { withTrailers } from './_commit-trailers'
 import { resolveGitHubTokenForRequest } from './_github-token'
@@ -192,18 +192,16 @@ export const POST: APIRoute = async ({ request, cookies }) => {
         if (patchedSource !== pageSource) {
           filesToCommit.push({ path: fullPagePath, content: patchedSource })
 
-          // Create an SSR clone under sk-preview/ so the live preview iframe works.
-          // The patched source already uses getSection() which is draft-aware.
-          // The clone lives one directory deeper (sk-preview/<page> vs <page>),
-          // so all relative imports need one extra "../" level.
-          // Use resolvedPagePath (not body.pagePath) to get correct clone depth for
-          // directory routes (docs/index.astro → sk-preview/docs/index.astro).
-          const previewCopySource = patchedSource
-            .replace(/\bexport\s+const\s+prerender\s*=\s*true\s*;?\s*\n?/, '')
-            .replace(/(from\s+')(\.\.\/)/g, '$1../$2')
-            .replace(/(from\s+")(\.\.\/)/g, '$1../$2')
+          // Create a thin SSR wrapper under sk-preview/ so the live preview iframe works.
+          // The wrapper imports the production page as a component — no content duplication.
+          // In SSR context (prerender=false), getSection() runs at request time (draft-aware).
+          // In static context (/impressum), the same component runs at build time.
           // resolvedPagePath: e.g. "src/pages/docs/index.astro" (for directory routes)
           const relativePage = resolvedPagePath.replace(/^src\/pages\//, '') // "docs/index.astro"
+          // Import depth: sk-preview/impressum.astro → '../impressum.astro'
+          //               sk-preview/docs/index.astro → '../../docs/index.astro'
+          const importDepth = '../'.repeat(relativePage.split('/').length)
+          const previewCopySource = `---\nexport const prerender = false;\nimport Page from '${importDepth}${relativePage}';\n---\n<Page />\n`
           const previewCopyPath = prefixPath(`src/pages/sk-preview/${relativePage}`, projectPrefix)
           filesToCommit.push({ path: previewCopyPath, content: previewCopySource })
         }
@@ -248,6 +246,24 @@ export const POST: APIRoute = async ({ request, cookies }) => {
             filesToCommit[jsonIdx]!.content = JSON.stringify(sectionData, null, 2)
           }
         }
+
+        // 4b. Patch child components (e.g. PricingCard) used by repeated-component groups.
+        // detectChildImports finds any import whose component name matches a field's
+        // options.sourceComponent, then patchChildComponentForFieldPrefix injects
+        // fieldPrefix prop + data-sk-field bindings into that component file.
+        const allFields = section.allFields ?? section.fields
+        const childPatches = detectChildImports(patchedSource, allFields as any)
+        for (const child of childPatches) {
+          const sectionDir = section.componentPath.replace(/\/[^/]+$/, '')
+          const resolvedChildPath = resolveRelativePath(sectionDir, child.importPath)
+          if (!resolvedChildPath) continue
+          const childSource = await fetchFileContent(owner, repo, branch, resolvedChildPath, githubToken)
+          if (!childSource) continue
+          const patchedChild = patchChildComponentForFieldPrefix(childSource, child.innerFields)
+          if (patchedChild !== childSource) {
+            filesToCommit.push({ path: resolvedChildPath, content: patchedChild })
+          }
+        }
       }
 
       // 5. Patch page file — add import and registry entry for new section
@@ -381,7 +397,7 @@ export function patchPageFile(
       const lastEntryMatch = registryContent.match(/.*\w+Section,?\s*$/m)
       if (lastEntryMatch && lastEntryMatch.index !== undefined) {
         const insertPos = registryMatch.index! + registryMatch[0].indexOf(registryContent) + lastEntryMatch.index + lastEntryMatch[0].length
-        const newEntry = `\n  [normalize('${sectionKey}')]: ${componentName},`
+        const newEntry = `\n  '${sectionKey}': ${componentName},`
         patched = patched.slice(0, insertPos) + newEntry + patched.slice(insertPos)
       }
     }
@@ -414,6 +430,25 @@ export function calculateRelativePath(fromDir: string, toPath: string): string {
   return '../'.repeat(ups) + remaining
 }
 
+/**
+ * Resolve a relative import path against a base directory to get the repo-root-relative path.
+ * e.g. resolveRelativePath("src/components/sections", "../components/PricingCard.astro")
+ *      → "src/components/PricingCard.astro"
+ */
+function resolveRelativePath(baseDir: string, relativePath: string): string | null {
+  if (relativePath.startsWith('/')) return relativePath.replace(/^\//, '')
+  const parts = [...baseDir.split('/').filter(Boolean)]
+  for (const segment of relativePath.split('/')) {
+    if (segment === '.') continue
+    if (segment === '..') { parts.pop(); continue }
+    parts.push(segment)
+  }
+  const resolved = parts.join('/')
+  // Must stay within src/ or project root — reject anything that escapes
+  if (resolved.startsWith('../') || resolved.startsWith('/')) return null
+  return resolved
+}
+
 async function fetchFileContent(
   owner: string,
   repo: string,

package/src/init/__tests__/patcher-child-component.test.ts

@@ -0,0 +1,117 @@
+/**
+ * Tests for patchChildComponentForFieldPrefix:
+ * Injects fieldPrefix prop + data-sk-field bindings into child components
+ * used by repeated-component sections (e.g. PricingCard).
+ */
+
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { patchChildComponentForFieldPrefix, detectChildImports } from '../template-patcher-v2'
+
+const CHILD_DIR = join(import.meta.dirname!, '..', '..', '..', '..', '..', 'test-sections', 'child-components')
+
+function readFixture(name: string): string {
+  return readFileSync(join(CHILD_DIR, name), 'utf-8')
+}
+
+// ---------------------------------------------------------------------------
+// Inner fields for PricingCard (mirrors what the analyzer produces)
+// ---------------------------------------------------------------------------
+const PRICING_INNER_FIELDS = [
+  { key: 'name', type: 'text' },
+  { key: 'price', type: 'text' },
+  { key: 'priceNote', type: 'text' },
+  { key: 'description', type: 'text' },
+  { key: 'features', type: 'array' },
+  { key: 'cta', type: 'text' },
+  { key: 'ctaHref', type: 'text' },
+]
+
+describe('patchChildComponentForFieldPrefix', () => {
+  it('adds fieldPrefix to Props interface', () => {
+    const source = readFixture('PricingCard.astro')
+    const patched = patchChildComponentForFieldPrefix(source, PRICING_INNER_FIELDS)
+    expect(patched).toContain('fieldPrefix?: string')
+  })
+
+  it('adds fieldPrefix to destructuring', () => {
+    const source = readFixture('PricingCard.astro')
+    const patched = patchChildComponentForFieldPrefix(source, PRICING_INNER_FIELDS)
+    expect(patched).toMatch(/fieldPrefix\s*[,}]/)
+  })
+
+  it('adds data-sk-field for scalar text props', () => {
+    const source = readFixture('PricingCard.astro')
+    const patched = patchChildComponentForFieldPrefix(source, PRICING_INNER_FIELDS)
+    expect(patched).toContain('fieldPrefix}.name')
+    expect(patched).toContain('fieldPrefix}.price')
+    expect(patched).toContain('fieldPrefix}.description')
+  })
+
+  it('adds data-sk-field for href prop on <a>', () => {
+    const source = readFixture('PricingCard.astro')
+    const patched = patchChildComponentForFieldPrefix(source, PRICING_INNER_FIELDS)
+    expect(patched).toContain('fieldPrefix}.ctaHref')
+    expect(patched).toContain('fieldPrefix}.cta')
+  })
+
+  it('adds indexed data-sk-field for array prop features', () => {
+    const source = readFixture('PricingCard.astro')
+    const patched = patchChildComponentForFieldPrefix(source, PRICING_INNER_FIELDS)
+    expect(patched).toMatch(/fieldPrefix\}\.features\._fi|fieldPrefix\}\.features\.\$\{_fi\}/)
+  })
+
+  it('is idempotent — second pass produces no changes', () => {
+    const source = readFixture('PricingCard.astro')
+    const patched = patchChildComponentForFieldPrefix(source, PRICING_INNER_FIELDS)
+    const patchedAgain = patchChildComponentForFieldPrefix(patched, PRICING_INNER_FIELDS)
+    expect(patchedAgain).toBe(patched)
+  })
+
+  it('does not modify source when fieldPrefix already present', () => {
+    const source = readFixture('PricingCard.astro')
+    const prePatched = source.replace(
+      'highlight?: boolean;',
+      'highlight?: boolean;\n  fieldPrefix?: string;',
+    )
+    const result = patchChildComponentForFieldPrefix(prePatched, PRICING_INNER_FIELDS)
+    expect(result).toContain('fieldPrefix?: string')
+    expect((result.match(/fieldPrefix\?\s*:\s*string/g) ?? []).length).toBe(1)
+  })
+})
+
+describe('detectChildImports', () => {
+  it('detects component imports from fields with sourceComponent', () => {
+    const sectionSource = `---
+import PricingCard from '../components/PricingCard.astro'
+interface Props { data: Record<string, any> | null }
+const { data: skData } = Astro.props
+---
+<section></section>`
+
+    const fields = [
+      {
+        key: 'pricingcards',
+        type: 'array',
+        defaultValue: [],
+        options: {
+          sourceComponent: 'PricingCard',
+          arrayItem: { type: 'object', fields: PRICING_INNER_FIELDS },
+        },
+      },
+    ]
+
+    const imports = detectChildImports(sectionSource, fields as any)
+    expect(imports).toHaveLength(1)
+    expect(imports[0]!.compName).toBe('PricingCard')
+    expect(imports[0]!.importPath).toBe('../components/PricingCard.astro')
+    expect(imports[0]!.innerFields).toEqual(PRICING_INNER_FIELDS)
+  })
+
+  it('returns empty array when no sourceComponent fields', () => {
+    const source = `---\nconst x = 1\n---\n<div></div>`
+    const fields = [{ key: 'heading', type: 'text' }]
+    expect(detectChildImports(source, fields as any)).toHaveLength(0)
+  })
+})

package/src/init/__tests__/section-pipeline.test.ts

@@ -102,6 +102,17 @@ function checkSkFieldBindings(
       }
       continue
     }
+    // Array fields from repeated component instances use fieldPrefix= instead of data-sk-field
+    // (Astro components don't forward unknown props to the DOM).
+    if (field.type === 'array' && (field as any).options?.sourceComponent) {
+      const fieldPrefixBinding = `${sectionKey}.${field.key}.\${_i}\``
+      if (patched.includes(fieldPrefixBinding)) {
+        found.push(`${sectionKey}.${field.key}.*`)
+      } else {
+        missing.push(`${sectionKey}.${field.key}`)
+      }
+      continue
+    }
     if (!fieldNeedsSkBinding(field)) {
       skipped.push(`${sectionKey}.${field.key} (${field.type})`)
       continue
@@ -390,6 +401,47 @@ describe('Section Pipeline', () => {
         const bindings = checkSkFieldBindings(patched, sectionKey, section.fields, groups)
         expect(bindings.missing, `Missing bindings: ${bindings.missing.join(', ')}`).toHaveLength(0)
       })
+
+      it('should collapse repeated component instances into .map()', () => {
+        const componentArrayFields = section.fields.filter(
+          (f: any) => f.type === 'array' && f.options?.sourceComponent,
+        )
+        if (componentArrayFields.length === 0) return
+        for (const field of componentArrayFields) {
+          const compName = (field as any).options.sourceComponent as string
+          const tagRegex = new RegExp(`<${compName}[\\s/>]`, 'g')
+          const originalCount = (source.match(tagRegex) || []).length
+          const patchedCount = (patched.match(tagRegex) || []).length
+          expect(
+            patchedCount,
+            `<${compName}> count should be reduced (was ${originalCount}, still ${patchedCount})`,
+          ).toBeLessThan(originalCount)
+          expect(patched, `Expected .map( after collapsing <${compName}>`).toContain('.map(')
+        }
+      })
+
+      it('should remove stale frontmatter vars from repeated component props', () => {
+        const componentArrayFields = section.fields.filter(
+          (f: any) => f.type === 'array' && f.options?.sourceComponent && Array.isArray(f.defaultValue),
+        )
+        if (componentArrayFields.length === 0) return
+        const fmEnd = patched.indexOf('---', patched.indexOf('---') + 3)
+        const patchedFm = fmEnd > 0 ? patched.slice(0, fmEnd) : ''
+        const staleVars: string[] = []
+        for (const field of componentArrayFields) {
+          const items = (field as any).defaultValue as Array<Record<string, unknown>>
+          for (const innerField of ((field as any).options?.arrayItem?.fields ?? []) as Array<{ key: string }>) {
+            // Only string-array props might have been declared as frontmatter vars
+            const allVarLike = items.every(item => Array.isArray(item[innerField.key]))
+            if (!allVarLike) continue
+            const varNames = items.map((_, i) => `${innerField.key}${i === 0 ? '' : i + 1}`)
+            for (const v of varNames) {
+              if (patchedFm.includes(`const ${v}`)) staleVars.push(v)
+            }
+          }
+        }
+        expect(staleVars, `Stale frontmatter vars: ${staleVars.join(', ')}`).toHaveLength(0)
+      })
     })
   }
 })

package/src/init/astro-section-analyzer-v2.ts

@@ -1236,7 +1236,7 @@ async function extractTemplateFields(template: string, frontmatter: string = '')
         addField({
           key: cardKey, type: 'array', label: `${compName} Liste`, confidence: 'medium',
           defaultValue: instanceValues.length > 0 ? instanceValues : undefined,
-          options: { arrayItem: { type: 'object', fields: innerFields } },
+          options: { arrayItem: { type: 'object', fields: innerFields }, sourceComponent: compName },
         }, nodeOffset(instances[0]!))
       }
     }

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

@@ -279,6 +279,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
     }
 
@@ -1473,6 +1477,140 @@ 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,
@@ -1925,6 +2063,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
@@ -2021,6 +2172,168 @@ 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
 // ---------------------------------------------------------------------------