aem-eds-kit 0.4.7 → 0.4.12

package/dist/bin/eds.js

@@ -1424,16 +1424,582 @@ var init_init = __esm({
   }
 });
 
+// src/lib/migrate/clientlib.ts
+import { existsSync as existsSync5 } from "fs";
+import { readFile as readFile3, readdir } from "fs/promises";
+import path7 from "path";
+async function listFiles(dir) {
+  const out = [];
+  const walk3 = async (d) => {
+    for (const e of await readdir(d, { withFileTypes: true })) {
+      const p = path7.join(d, e.name);
+      if (e.isDirectory()) await walk3(p);
+      else out.push(p);
+    }
+  };
+  if (existsSync5(dir)) await walk3(dir);
+  return out;
+}
+async function findClientlibDir(componentDir) {
+  if (!existsSync5(componentDir)) return null;
+  const entries = await readdir(componentDir, { withFileTypes: true });
+  const match = entries.find((e) => e.isDirectory() && /clientlib/i.test(e.name));
+  if (match) return path7.join(componentDir, match.name);
+  const hasCss = entries.some((e) => e.isFile() && e.name.endsWith(".css"));
+  return hasCss ? componentDir : null;
+}
+async function readClientlibCss(clientlibDir) {
+  const all = await listFiles(clientlibDir);
+  const preprocessed = all.filter((f) => /\.(less|scss|sass)$/i.test(f)).map((f) => path7.relative(clientlibDir, f));
+  let cssFiles;
+  const cssTxt = path7.join(clientlibDir, "css.txt");
+  if (existsSync5(cssTxt)) {
+    const lines = (await readFile3(cssTxt, "utf-8")).split("\n").map((l) => l.trim());
+    let base = clientlibDir;
+    const listed = [];
+    for (const l of lines) {
+      if (!l) continue;
+      const baseMatch = l.match(/^#base\s*=\s*(.+)$/);
+      if (baseMatch) base = path7.join(clientlibDir, baseMatch[1].trim());
+      else if (!l.startsWith("#")) listed.push(l);
+    }
+    cssFiles = listed.map((rel) => path7.join(base, rel)).filter((f) => existsSync5(f) && f.endsWith(".css"));
+  } else {
+    cssFiles = all.filter((f) => f.endsWith(".css"));
+  }
+  const parts = [];
+  for (const f of cssFiles) parts.push(await readFile3(f, "utf-8"));
+  return {
+    css: parts.join("\n\n"),
+    files: cssFiles.map((f) => path7.relative(clientlibDir, f)),
+    preprocessed
+  };
+}
+var init_clientlib = __esm({
+  "src/lib/migrate/clientlib.ts"() {
+    "use strict";
+    init_esm_shims();
+  }
+});
+
+// src/lib/migrate/dialog.ts
+import { XMLParser } from "fast-xml-parser";
+function tagOf(n) {
+  return Object.keys(n).find((k) => k !== ":@") ?? "";
+}
+function childrenOf(n) {
+  const t = tagOf(n);
+  const v = n[t];
+  return Array.isArray(v) ? v : [];
+}
+function attrsOf(n) {
+  return n[":@"] ?? {};
+}
+function stripType(v) {
+  return typeof v === "string" ? v.replace(/^\{[^}]+\}/, "") : v;
+}
+function attr(n, name) {
+  return stripType(attrsOf(n)[`@_${name}`]);
+}
+function leafComponent(rt, n) {
+  const multiple = attr(n, "multiple") === "true" || attr(n, "multiple") === "{Boolean}true";
+  if (rt.endsWith("/form/textfield")) return "text";
+  if (rt.endsWith("/form/textarea")) return "textarea";
+  if (rt.includes("/richtext")) return "richtext";
+  if (rt.endsWith("/form/numberfield")) return "number";
+  if (rt.endsWith("/form/checkbox")) return "boolean";
+  if (rt.endsWith("/form/radiogroup")) return "radio-group";
+  if (rt.endsWith("/form/select")) return multiple ? "multiselect" : "select";
+  if (rt.endsWith("/form/datepicker")) return "date-time";
+  if (rt.endsWith("/form/pathfield") || rt.endsWith("/form/pathbrowser")) return "aem-content";
+  if (rt.includes("/fileupload") || rt.endsWith("/form/fileupload")) return "reference";
+  if (rt.includes("tagfield") || rt.includes("tagpicker") || rt.includes("tagbrowser"))
+    return "aem-tag";
+  if (rt.includes("contentfragment")) return "aem-content-fragment";
+  if (rt.includes("experiencefragment")) return "aem-experience-fragment";
+  return null;
+}
+function isWrapper(rt) {
+  return rt.includes("/foundation/container") || rt.includes("/foundation/fixedcolumns") || rt.includes("/foundation/well") || rt.includes("/foundation/tabs") || rt.includes("/foundation/form/fieldset") || rt.includes("/foundation/accordion");
+}
+function valueTypeFor(c) {
+  switch (c) {
+    case "number":
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "date-time":
+      return "date";
+    case "checkbox-group":
+      return "string[]";
+    case "aem-content":
+    case "aem-content-fragment":
+    case "aem-experience-fragment":
+      return void 0;
+    default:
+      return "string";
+  }
+}
+function cleanName(raw, fallback) {
+  const n = (raw ?? "").replace(/^\.\//, "").trim();
+  return n || fallback;
+}
+function readOptions(fieldNode) {
+  const items = childrenOf(fieldNode).find((c) => tagOf(c) === "items");
+  if (!items) return [];
+  return childrenOf(items).map((opt) => {
+    const value = attr(opt, "value") ?? "";
+    const name = attr(opt, "text") ?? attr(opt, "jcr:title") ?? value;
+    return { name, value };
+  });
+}
+function walk(nodes, out, unmapped, counter) {
+  for (const node of nodes) {
+    const rt = attr(node, "sling:resourceType") ?? "";
+    if (rt.endsWith("/foundation/tabs")) {
+      const items = childrenOf(node).find((c) => tagOf(c) === "items");
+      for (const tab of items ? childrenOf(items) : []) {
+        const label = attr(tab, "jcr:title");
+        out.push({ component: "tab", name: cleanName(void 0, tagOf(tab)), label });
+        walk(childrenOf(tab), out, unmapped, counter);
+      }
+      continue;
+    }
+    if (rt.endsWith("/form/multifield")) {
+      const sub = [];
+      walk(childrenOf(node), sub, unmapped, counter);
+      const name = cleanName(attr(node, "name"), `items${counter.i++}`);
+      out.push({
+        component: "container",
+        name,
+        label: attr(node, "fieldLabel") ?? "Items",
+        multi: true,
+        collapsible: true,
+        fields: sub
+      });
+      continue;
+    }
+    const comp = rt ? leafComponent(rt, node) : null;
+    if (comp) {
+      const name = cleanName(attr(node, "name"), `field${counter.i++}`);
+      const field = { component: comp, name };
+      const vt = valueTypeFor(comp);
+      if (vt) field.valueType = vt;
+      const label = attr(node, "fieldLabel") ?? attr(node, "text");
+      if (label) field.label = label;
+      if (comp === "select" || comp === "radio-group" || comp === "multiselect") {
+        const options = readOptions(node);
+        if (options.length) field.options = options;
+      }
+      const def = attr(node, "value") ?? (comp === "boolean" ? attr(node, "checked") : void 0);
+      if (def !== void 0 && def !== "") field.value = comp === "boolean" ? def === "true" : def;
+      out.push(field);
+      continue;
+    }
+    if (rt && attr(node, "name") && !isWrapper(rt)) unmapped.add(rt);
+    walk(childrenOf(node), out, unmapped, counter);
+  }
+}
+function parseDialog(xml) {
+  const parser = new XMLParser({
+    ignoreAttributes: false,
+    attributeNamePrefix: "@_",
+    preserveOrder: true,
+    removeNSPrefix: false,
+    trimValues: true
+  });
+  const tree = parser.parse(xml);
+  const root = tree.find((n) => tagOf(n) === "jcr:root");
+  const fields = [];
+  const unmapped = /* @__PURE__ */ new Set();
+  if (root) walk(childrenOf(root), fields, unmapped, { i: 1 });
+  return { fields, unmapped: [...unmapped] };
+}
+var init_dialog = __esm({
+  "src/lib/migrate/dialog.ts"() {
+    "use strict";
+    init_esm_shims();
+  }
+});
+
+// src/lib/migrate/component.ts
+import { existsSync as existsSync6 } from "fs";
+import { readFile as readFile4 } from "fs/promises";
+import path8 from "path";
+import { XMLParser as XMLParser2 } from "fast-xml-parser";
+function findDialogFile(componentDir) {
+  const candidates = [
+    path8.join(componentDir, "_cq_dialog", ".content.xml"),
+    path8.join(componentDir, "_cq_dialog.xml"),
+    path8.join(componentDir, "cq:dialog", ".content.xml")
+  ];
+  return candidates.find((c) => existsSync6(c)) ?? null;
+}
+async function readComponentTitle(componentDir) {
+  const file = path8.join(componentDir, ".content.xml");
+  if (!existsSync6(file)) return void 0;
+  try {
+    const parser = new XMLParser2({ ignoreAttributes: false, attributeNamePrefix: "@_" });
+    const parsed = parser.parse(await readFile4(file, "utf-8"));
+    const root = parsed["jcr:root"] ?? {};
+    const title = root["@_jcr:title"];
+    return typeof title === "string" ? title.replace(/^\{[^}]+\}/, "") : void 0;
+  } catch {
+    return void 0;
+  }
+}
+async function readDialogFields(componentDir) {
+  const dialog = findDialogFile(componentDir);
+  if (!dialog) return null;
+  return parseDialog(await readFile4(dialog, "utf-8"));
+}
+function migratedModelFile(blockName, title, fields) {
+  const model = {
+    definitions: [
+      {
+        title,
+        id: blockName,
+        plugins: {
+          xwalk: {
+            page: {
+              resourceType: "core/franklin/components/block/v1/block",
+              template: { name: title, model: blockName }
+            }
+          }
+        }
+      }
+    ],
+    models: [{ id: blockName, fields }],
+    filters: []
+  };
+  return `${JSON.stringify(model, null, 2)}
+`;
+}
+function migratedBlockJs(blockName, fields) {
+  const hasContainer = fields.some((f) => f.component === "container" && f.multi);
+  const body = hasContainer ? `  // This block was migrated from a classic AEM component with a multifield.
+  // Each child row is one repeated item - enhance them here.
+  [...block.children].forEach((row) => {
+    row.classList.add('${blockName}-item');
+  });` : `  // Migrated from a classic AEM component. The authored fields arrive as
+  // rows; read and enhance them here (port the old HTL logic as needed).`;
+  return `// Block: ${blockName}
+// Migrated from a classic AEM component by \`eds migrate component\`.
+// TODO: port the component's HTL/JS behaviour into this decorator.
+export default function decorate(block) {
+  block.classList.add('${blockName}');
+${body}
+}
+`;
+}
+function migratedBlockCss(blockName) {
+  return `/* Block: ${blockName} */
+/* Migrated from a classic AEM component. Bring the component's styles here */
+/* (from its clientlib or the rendered page) and keep them scoped to the block. */
+.${blockName} {
+}
+`;
+}
+var init_component = __esm({
+  "src/lib/migrate/component.ts"() {
+    "use strict";
+    init_esm_shims();
+    init_dialog();
+  }
+});
+
+// src/lib/track.ts
+function trackSnippet(blockName, param, events) {
+  const parts = [`  // --- ${TRACK_MARKER} ---`];
+  if (events.click) {
+    parts.push(
+      `  ${param}.addEventListener('click', (ev) => {`,
+      "    const el = ev.target.closest('a, button');",
+      "    if (!el) return;",
+      `    trackEvent({ event: 'block_click', block: '${blockName}', label: el.dataset.track || el.textContent.trim() });`,
+      "  });"
+    );
+  }
+  if (events.submit) {
+    parts.push(
+      `  ${param}.addEventListener('submit', () => {`,
+      `    trackEvent({ event: 'form_submit', block: '${blockName}' });`,
+      "  });"
+    );
+  }
+  return parts.join("\n");
+}
+function instrumentJs(js, blockName, events) {
+  if (js.includes(TRACK_MARKER)) return { js, changed: false, reason: "already instrumented" };
+  if (!events.click && !events.submit) return { js, changed: false, reason: "no events selected" };
+  const decorate = js.match(
+    /export default (?:async )?function decorate\s*\(\s*([A-Za-z_$][\w$]*)?[^)]*\)\s*\{/
+  );
+  if (!decorate || decorate.index === void 0) {
+    return { js, changed: false, reason: "no `export default function decorate(...)` found" };
+  }
+  const param = decorate[1] || "block";
+  let out = js;
+  if (!out.includes("scripts/analytics.js")) {
+    const imports = [...out.matchAll(/^import .*$/gm)];
+    if (imports.length) {
+      const last = imports[imports.length - 1];
+      const at2 = (last.index ?? 0) + last[0].length;
+      out = `${out.slice(0, at2)}
+${IMPORT_LINE}${out.slice(at2)}`;
+    } else {
+      out = `${IMPORT_LINE}
+
+${out}`;
+    }
+  }
+  const d2 = out.match(
+    /export default (?:async )?function decorate\s*\(\s*([A-Za-z_$][\w$]*)?[^)]*\)\s*\{/
+  );
+  if (!d2 || d2.index === void 0)
+    return { js: out, changed: false, reason: "decorate not found" };
+  const at = d2.index + d2[0].length;
+  const snippet = trackSnippet(blockName, param, events);
+  out = `${out.slice(0, at)}
+${snippet}
+${out.slice(at)}`;
+  return { js: out, changed: true };
+}
+var TRACK_MARKER, IMPORT_LINE;
+var init_track = __esm({
+  "src/lib/track.ts"() {
+    "use strict";
+    init_esm_shims();
+    TRACK_MARKER = "analytics (eds track)";
+    IMPORT_LINE = "import { trackEvent } from '../../scripts/analytics.js';";
+  }
+});
+
+// src/commands/track.ts
+var track_exports = {};
+__export(track_exports, {
+  trackBlock: () => trackBlock
+});
+import { existsSync as existsSync7 } from "fs";
+import { readFile as readFile5, writeFile as writeFile5 } from "fs/promises";
+import path9 from "path";
+import chalk4 from "chalk";
+async function trackBlock(blockName, options = {}) {
+  const projectRoot = findProjectRoot();
+  if (!projectRoot) {
+    logger.error("Not inside an EDS project (no EDS project markers found).");
+    process.exitCode = 1;
+    return;
+  }
+  logger.logoOnce(logo("Track block"));
+  const jsPath = path9.join(projectRoot, "blocks", blockName, `${blockName}.js`);
+  if (!existsSync7(jsPath)) {
+    logger.error(`Block "${blockName}" not found (no blocks/${blockName}/${blockName}.js).`);
+    process.exitCode = 1;
+    return;
+  }
+  const events = { click: options.click !== false, submit: options.submit !== false };
+  const res = instrumentJs(await readFile5(jsPath, "utf-8"), blockName, events);
+  if (!res.changed) {
+    logger.warn(`Not instrumented: ${res.reason}.`);
+    return;
+  }
+  await writeFile5(jsPath, res.js);
+  logger.info(heading("Instrumented"));
+  const picked = [events.click ? "block_click" : null, events.submit ? "form_submit" : null].filter(
+    Boolean
+  );
+  logger.info(accentLine(`blocks/${blockName}/${blockName}.js`, picked.join(" + ")));
+  if (!existsSync7(path9.join(projectRoot, "scripts", "analytics.js"))) {
+    logger.info("");
+    logger.warn("scripts/analytics.js is missing - run `eds integrate gtm` to create it.");
+  }
+  logger.info("");
+  logger.info(chalk4.dim("  Events push to window.dataLayer via trackEvent - GTM picks them up."));
+}
+var init_track2 = __esm({
+  "src/commands/track.ts"() {
+    "use strict";
+    init_esm_shims();
+    init_logger();
+    init_project();
+    init_track();
+    init_ui();
+  }
+});
+
+// src/commands/migrate.ts
+var migrate_exports = {};
+__export(migrate_exports, {
+  migrateComponent: () => migrateComponent
+});
+import { existsSync as existsSync8 } from "fs";
+import { mkdir as mkdir3, writeFile as writeFile6 } from "fs/promises";
+import path10 from "path";
+function clientlibBlockCss(blockName, css, files) {
+  return `/* Block: ${blockName} */
+/* Migrated from the component clientlib: ${files.join(", ")}. */
+/* TODO: review selectors and scope them under .${blockName} (and port any LESS/SCSS). */
+
+${css.trim()}
+`;
+}
+function previewFields(fields, depth = 0) {
+  const lines = [];
+  for (const f of fields) {
+    const indent = "  ".repeat(depth);
+    if (f.component === "tab") {
+      lines.push(`${indent}${brand.blue("\u25B8")} ${f.label ?? f.name}`);
+    } else {
+      const opts = f.options?.length ? ` (${f.options.length} options)` : "";
+      const multi = f.multi ? " \xB7multi" : "";
+      const label = f.label ? `- ${f.label}` : "";
+      lines.push(`${indent}${brand.accent(f.component)}${multi}  ${f.name}${opts}  ${label}`);
+      if (f.fields?.length) lines.push(...previewFields(f.fields, depth + 1));
+    }
+  }
+  return lines;
+}
+function countLeaves(fields) {
+  let n = 0;
+  for (const f of fields) {
+    if (f.component === "tab") continue;
+    n += 1;
+    if (f.fields) n += countLeaves(f.fields);
+  }
+  return n;
+}
+async function migrateComponent(dirArg, options = {}) {
+  const projectRoot = findProjectRoot();
+  if (!projectRoot) {
+    logger.error("Not inside an EDS project (no EDS project markers found).");
+    process.exitCode = 1;
+    return;
+  }
+  await logger.logoOnceAnimated("Migrate component");
+  const { input, confirm } = await import("@inquirer/prompts");
+  const interactive = !options.yes;
+  let componentDir = dirArg;
+  if (!componentDir && interactive) {
+    componentDir = await input({
+      message: "Path to the classic component folder",
+      validate: (v) => existsSync8(v.trim()) || "Folder not found"
+    });
+  }
+  if (!componentDir) {
+    logger.error("Provide the path to the classic component folder.");
+    process.exitCode = 1;
+    return;
+  }
+  componentDir = path10.resolve(componentDir.trim());
+  if (!findDialogFile(componentDir)) {
+    logger.error(`No Touch UI dialog (_cq_dialog/.content.xml) found in ${componentDir}.`);
+    process.exitCode = 1;
+    return;
+  }
+  const parsed = await readDialogFields(componentDir);
+  if (!parsed || parsed.fields.length === 0) {
+    logger.warn("Dialog found but no mappable fields were detected.");
+    if (parsed?.unmapped.length)
+      logger.info(`Unmapped resourceTypes: ${parsed.unmapped.join(", ")}`);
+    process.exitCode = 1;
+    return;
+  }
+  const title = await readComponentTitle(componentDir) ?? path10.basename(componentDir);
+  const blockName = options.name && slug2(options.name) || (interactive ? slug2(await input({ message: "Block name", default: slug2(title) })) : slug2(title));
+  logger.info(heading("Mapped fields", `${countLeaves(parsed.fields)} from dialog`));
+  for (const line of previewFields(parsed.fields)) logger.info(`  ${line}`);
+  if (parsed.unmapped.length) {
+    logger.info("");
+    logger.warn(`Skipped (unrecognised): ${parsed.unmapped.join(", ")}`);
+  }
+  logger.info("");
+  if (interactive) {
+    const go = await confirm({ message: `Generate block "${blockName}"?`, default: true });
+    if (!go) {
+      logger.info("Cancelled.");
+      return;
+    }
+  }
+  const blockDir = path10.join(projectRoot, "blocks", blockName);
+  if (existsSync8(blockDir)) {
+    logger.error(
+      `Block "${blockName}" already exists at blocks/${blockName}. Use --name to pick another.`
+    );
+    process.exitCode = 1;
+    return;
+  }
+  const clibDir = options.clientlib ? path10.resolve(options.clientlib.trim()) : await findClientlibDir(componentDir);
+  let cssContent = migratedBlockCss(blockName);
+  let cssMessage = "empty - add styles from clientlib / rendered CSS";
+  let preprocessedNote = [];
+  if (clibDir && existsSync8(clibDir)) {
+    const lib = await readClientlibCss(clibDir);
+    if (lib.css.trim()) {
+      cssContent = clientlibBlockCss(blockName, lib.css, lib.files);
+      cssMessage = `from clientlib (${lib.files.length} file(s)) - review & scope`;
+    }
+    preprocessedNote = lib.preprocessed;
+  }
+  await mkdir3(blockDir, { recursive: true });
+  await writeFile6(
+    path10.join(blockDir, `${blockName}.js`),
+    migratedBlockJs(blockName, parsed.fields)
+  );
+  await writeFile6(path10.join(blockDir, `${blockName}.css`), cssContent);
+  await writeFile6(
+    path10.join(blockDir, `_${blockName}.json`),
+    migratedModelFile(blockName, title, parsed.fields)
+  );
+  logger.info(heading("Created"));
+  const files = [`${blockName}.js`, `${blockName}.css`, `_${blockName}.json`];
+  const w = columnWidth(files);
+  logger.info(accentLine(`${blockName}.js`, "decorator stub (port HTL logic)", w));
+  logger.info(accentLine(`${blockName}.css`, cssMessage, w));
+  logger.info(accentLine(`_${blockName}.json`, "Universal Editor model", w));
+  if (preprocessedNote.length) {
+    logger.info("");
+    logger.warn(`LESS/SCSS found (needs a build, not copied): ${preprocessedNote.join(", ")}`);
+  }
+  logger.info("");
+  if (interactive) {
+    const addTracking = await confirm({
+      message: "Instrument this block for analytics (dataLayer)?",
+      default: false
+    });
+    if (addTracking) {
+      const { trackBlock: trackBlock2 } = await Promise.resolve().then(() => (init_track2(), track_exports));
+      await trackBlock2(blockName, {});
+    }
+  }
+  logger.info(
+    box([`"${blockName}" migrated. Next: add CSS, then \`eds block preview ${blockName}\``])
+  );
+}
+var slug2;
+var init_migrate = __esm({
+  "src/commands/migrate.ts"() {
+    "use strict";
+    init_esm_shims();
+    init_logger();
+    init_clientlib();
+    init_component();
+    init_project();
+    init_ui();
+    slug2 = (s) => s.trim().toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "");
+  }
+});
+
 // src/commands/block/create.ts
 var create_exports = {};
 __export(create_exports, {
   createBlock: () => createBlock,
   ueModelFor: () => ueModelFor
 });
-import { existsSync as existsSync5 } from "fs";
-import { mkdir as mkdir3, writeFile as writeFile5 } from "fs/promises";
-import path7 from "path";
-import chalk4 from "chalk";
+import { existsSync as existsSync9 } from "fs";
+import { mkdir as mkdir4, writeFile as writeFile7 } from "fs/promises";
+import path11 from "path";
+import chalk5 from "chalk";
 function titleCase(name) {
   return name.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
@@ -1511,13 +2077,13 @@ async function createBlock(name, options = {}) {
     process.exitCode = 1;
     return;
   }
-  const blocksDir = path7.join(projectRoot, "blocks", name);
-  if (existsSync5(blocksDir)) {
+  const blocksDir = path11.join(projectRoot, "blocks", name);
+  if (existsSync9(blocksDir)) {
     logger.error(`Block "${name}" already exists at ${blocksDir}`);
     process.exitCode = 1;
     return;
   }
-  await mkdir3(blocksDir, { recursive: true });
+  await mkdir4(blocksDir, { recursive: true });
   const jsContent = `export default function decorate(block) {
   // TODO: implement ${name} block
 }
@@ -1526,14 +2092,14 @@ async function createBlock(name, options = {}) {
   /* TODO: style ${name} block */
 }
 `;
-  await writeFile5(path7.join(blocksDir, `${name}.js`), jsContent);
-  await writeFile5(path7.join(blocksDir, `${name}.css`), cssContent);
+  await writeFile7(path11.join(blocksDir, `${name}.js`), jsContent);
+  await writeFile7(path11.join(blocksDir, `${name}.css`), cssContent);
   const withUe = options.ueModel !== false;
   if (withUe) {
-    await writeFile5(path7.join(blocksDir, `_${name}.json`), ueModelFor(name));
+    await writeFile7(path11.join(blocksDir, `_${name}.json`), ueModelFor(name));
   }
   logger.success(
-    `Block "${name}" created at ${chalk4.cyan(path7.relative(projectRoot, blocksDir))}${withUe ? chalk4.dim(" (+ Universal Editor model)") : ""}`
+    `Block "${name}" created at ${chalk5.cyan(path11.relative(projectRoot, blocksDir))}${withUe ? chalk5.dim(" (+ Universal Editor model)") : ""}`
   );
 }
 var init_create = __esm({
@@ -1547,10 +2113,10 @@ var init_create = __esm({
 });
 
 // src/lib/agents/detect.ts
-import { existsSync as existsSync6 } from "fs";
-import { readFile as readFile3 } from "fs/promises";
+import { existsSync as existsSync10 } from "fs";
+import { readFile as readFile6 } from "fs/promises";
 import { homedir } from "os";
-import path8 from "path";
+import path12 from "path";
 async function whichBinary(name) {
   const { execaCommand } = await import("execa");
   try {
@@ -1578,8 +2144,8 @@ function findFigmaServerKey(node) {
 async function findFigmaMcpServer(configPaths) {
   for (const configPath of configPaths) {
     try {
-      if (!existsSync6(configPath)) continue;
-      const content = await readFile3(configPath, "utf-8");
+      if (!existsSync10(configPath)) continue;
+      const content = await readFile6(configPath, "utf-8");
       try {
         const key = findFigmaServerKey(JSON.parse(content));
         if (key) return key;
@@ -1601,7 +2167,7 @@ async function detectAgent(preferred) {
         return {
           type: def.type,
           path: binPath,
-          configDir: existsSync6(def.configDir) ? def.configDir : void 0,
+          configDir: existsSync10(def.configDir) ? def.configDir : void 0,
           hasFigmaMcp: !!figmaMcpServerName,
           figmaMcpServerName
         };
@@ -1616,7 +2182,7 @@ async function detectAgent(preferred) {
       return {
         type: def.type,
         path: binPath,
-        configDir: existsSync6(def.configDir) ? def.configDir : void 0,
+        configDir: existsSync10(def.configDir) ? def.configDir : void 0,
         hasFigmaMcp: !!figmaMcpServerName,
         figmaMcpServerName
       };
@@ -1633,7 +2199,7 @@ async function detectAllAgents() {
       agents.push({
         type: def.type,
         path: binPath,
-        configDir: existsSync6(def.configDir) ? def.configDir : void 0,
+        configDir: existsSync10(def.configDir) ? def.configDir : void 0,
         hasFigmaMcp: !!figmaMcpServerName,
         figmaMcpServerName
       });
@@ -1651,22 +2217,22 @@ var init_detect = __esm({
       {
         type: "claude",
         binary: "claude",
-        configDir: path8.join(homedir(), ".claude"),
+        configDir: path12.join(homedir(), ".claude"),
         mcpConfigPaths: [
-          path8.join(homedir(), ".claude", "plugins.json"),
-          path8.join(homedir(), ".claude.json")
+          path12.join(homedir(), ".claude", "plugins.json"),
+          path12.join(homedir(), ".claude.json")
         ]
       },
       {
         type: "cursor",
         binary: "cursor",
-        configDir: path8.join(homedir(), ".cursor"),
-        mcpConfigPaths: [path8.join(homedir(), ".cursor", "mcp.json")]
+        configDir: path12.join(homedir(), ".cursor"),
+        mcpConfigPaths: [path12.join(homedir(), ".cursor", "mcp.json")]
       },
       {
         type: "codex",
         binary: "codex",
-        configDir: path8.join(homedir(), ".codex"),
+        configDir: path12.join(homedir(), ".codex"),
         mcpConfigPaths: []
       }
     ];
@@ -1674,27 +2240,27 @@ var init_detect = __esm({
 });
 
 // src/lib/agents/invoke.ts
-import { mkdir as mkdir4, readFile as readFile4, writeFile as writeFile6 } from "fs/promises";
+import { mkdir as mkdir5, readFile as readFile7, writeFile as writeFile8 } from "fs/promises";
 import { tmpdir } from "os";
-import path9 from "path";
+import path13 from "path";
 import readline from "readline";
-import chalk5 from "chalk";
+import chalk6 from "chalk";
 async function savePromptToFile(prompt, projectRoot) {
-  const base = projectRoot ? path9.join(projectRoot, "tmp") : tmpdir();
-  const dir = path9.join(base, "eds-cli");
-  await mkdir4(dir, { recursive: true });
+  const base = projectRoot ? path13.join(projectRoot, "tmp") : tmpdir();
+  const dir = path13.join(base, "eds-cli");
+  await mkdir5(dir, { recursive: true });
   const filename = `from-design-${Date.now()}.md`;
-  const filePath = path9.join(dir, filename);
-  await writeFile6(filePath, prompt, "utf-8");
+  const filePath = path13.join(dir, filename);
+  await writeFile8(filePath, prompt, "utf-8");
   return filePath;
 }
 async function invokeAgent(agent, promptFile, cwd) {
   const { execa } = await import("execa");
-  const prompt = await readFile4(promptFile, "utf-8");
+  const prompt = await readFile7(promptFile, "utf-8");
   try {
     switch (agent.type) {
       case "claude": {
-        logger.info(`Running Claude Code ${chalk5.dim("- live log:")}`);
+        logger.info(`Running Claude Code ${chalk6.dim("- live log:")}`);
         const figmaServers = [
           ...agent.figmaMcpServerName ? [agent.figmaMcpServerName] : [],
           "figma-sse",
@@ -1757,10 +2323,10 @@ async function renderClaudeStream(sub, cwd) {
   const ora4 = (await import("ora")).default;
   const start = Date.now();
   const elapsed = () => `${Math.round((Date.now() - start) / 1e3)}s`;
-  const spinner = ora4({ text: `thinking  ${chalk5.dim(elapsed())}`, color: "yellow" }).start();
+  const spinner = ora4({ text: `thinking  ${chalk6.dim(elapsed())}`, color: "yellow" }).start();
   let activity = "thinking";
   const timer = setInterval(() => {
-    spinner.text = `${activity}  ${chalk5.dim(elapsed())}`;
+    spinner.text = `${activity}  ${chalk6.dim(elapsed())}`;
   }, 300);
   const pending = /* @__PURE__ */ new Map();
   const emit = (line) => {
@@ -1786,7 +2352,7 @@ async function renderClaudeStream(sub, cwd) {
           for (const block2 of content) {
             if (block2.type === "text" && "text" in block2) {
               const first = block2.text.trim().split("\n")[0].slice(0, 100);
-              if (first) emit(chalk5.dim(first));
+              if (first) emit(chalk6.dim(first));
             } else if (block2.type === "tool_use" && "name" in block2) {
               const id = "id" in block2 && block2.id ? block2.id : `${Math.random()}`;
               pending.set(id, {
@@ -1802,8 +2368,8 @@ async function renderClaudeStream(sub, cwd) {
               const p = pending.get(block2.tool_use_id);
               if (p) {
                 const dur = `${((Date.now() - p.start) / 1e3).toFixed(1)}s`;
-                const failed = "is_error" in block2 && block2.is_error ? ` ${chalk5.red("failed")}` : "";
-                emit(`${p.label}  ${chalk5.dim(dur)}${failed}`);
+                const failed = "is_error" in block2 && block2.is_error ? ` ${chalk6.red("failed")}` : "";
+                emit(`${p.label}  ${chalk6.dim(dur)}${failed}`);
                 pending.delete(block2.tool_use_id);
               }
             }
@@ -1815,9 +2381,9 @@ async function renderClaudeStream(sub, cwd) {
         }
       }
     }
-    for (const p of pending.values()) emit(`${p.label}  ${chalk5.dim("\u2026")}`);
+    for (const p of pending.values()) emit(`${p.label}  ${chalk6.dim("\u2026")}`);
     clearInterval(timer);
-    if (result) spinner.succeed(`${brand.accent("agent finished")}  ${chalk5.dim(result)}`);
+    if (result) spinner.succeed(`${brand.accent("agent finished")}  ${chalk6.dim(result)}`);
     else spinner.stop();
   } catch (err) {
     clearInterval(timer);
@@ -1830,22 +2396,22 @@ function toolLabel(name, input, cwd) {
   const rel = (key) => {
     const p = input?.[key];
     if (typeof p !== "string") return "";
-    return p.startsWith(cwd) ? path9.relative(cwd, p) : path9.basename(p);
+    return p.startsWith(cwd) ? path13.relative(cwd, p) : path13.basename(p);
   };
   if (name.includes("figma")) {
     const short = name.split("__").pop() ?? name;
-    return `${icon.figma} ${chalk5.bold(short)}  ${chalk5.dim("Figma MCP")}`;
+    return `${icon.figma} ${chalk6.bold(short)}  ${chalk6.dim("Figma MCP")}`;
   }
   switch (name) {
     case "Write":
     case "Edit":
     case "NotebookEdit":
-      return `${brand.accent("\u270E")} ${chalk5.cyan(rel("file_path"))}`;
+      return `${brand.accent("\u270E")} ${chalk6.cyan(rel("file_path"))}`;
     case "Read":
-      return chalk5.dim(`\xB7 read ${rel("file_path")}`);
+      return chalk6.dim(`\xB7 read ${rel("file_path")}`);
     case "Bash": {
       const cmd = typeof input?.command === "string" ? input.command.split("\n")[0].slice(0, 70) : "";
-      return chalk5.dim(`$ ${cmd}`);
+      return chalk6.dim(`$ ${cmd}`);
     }
     default:
       return `${brand.blue("\u2192")} ${name}`;
@@ -1861,13 +2427,13 @@ var init_invoke = __esm({
 });
 
 // src/lib/config.ts
-import { existsSync as existsSync7 } from "fs";
-import { readFile as readFile5 } from "fs/promises";
+import { existsSync as existsSync11 } from "fs";
+import { readFile as readFile8 } from "fs/promises";
 import { homedir as homedir2 } from "os";
-import path10 from "path";
+import path14 from "path";
 async function loadJsonFile(filePath) {
   try {
-    const content = await readFile5(filePath, "utf-8");
+    const content = await readFile8(filePath, "utf-8");
     return JSON.parse(content);
   } catch {
     return void 0;
@@ -1875,7 +2441,7 @@ async function loadJsonFile(filePath) {
 }
 async function loadConfig(projectRoot) {
   const globalRaw = await loadJsonFile(GLOBAL_CONFIG_PATH);
-  const projectRaw = projectRoot ? await loadJsonFile(path10.join(projectRoot, PROJECT_CONFIG_NAME)) : void 0;
+  const projectRaw = projectRoot ? await loadJsonFile(path14.join(projectRoot, PROJECT_CONFIG_NAME)) : void 0;
   const merged = {
     ...typeof globalRaw === "object" && globalRaw !== null ? globalRaw : {},
     ...typeof projectRaw === "object" && projectRaw !== null ? projectRaw : {}
@@ -1894,7 +2460,7 @@ function globalConfigPath() {
   return GLOBAL_CONFIG_PATH;
 }
 function globalConfigExists() {
-  return existsSync7(GLOBAL_CONFIG_PATH);
+  return existsSync11(GLOBAL_CONFIG_PATH);
 }
 var GLOBAL_CONFIG_DIR, GLOBAL_CONFIG_PATH, PROJECT_CONFIG_NAME;
 var init_config = __esm({
@@ -1903,8 +2469,8 @@ var init_config = __esm({
     init_esm_shims();
     init_logger();
     init_schemas();
-    GLOBAL_CONFIG_DIR = path10.join(homedir2(), ".eds");
-    GLOBAL_CONFIG_PATH = path10.join(GLOBAL_CONFIG_DIR, "config.json");
+    GLOBAL_CONFIG_DIR = path14.join(homedir2(), ".eds");
+    GLOBAL_CONFIG_PATH = path14.join(GLOBAL_CONFIG_DIR, "config.json");
     PROJECT_CONFIG_NAME = ".edsrc.json";
   }
 });
@@ -1954,9 +2520,9 @@ var init_node_id = __esm({
 });
 
 // src/lib/figma/prompt-builder.ts
-import { existsSync as existsSync8 } from "fs";
-import { readFile as readFile6 } from "fs/promises";
-import path11 from "path";
+import { existsSync as existsSync12 } from "fs";
+import { readFile as readFile9 } from "fs/promises";
+import path15 from "path";
 function contentSourceGuidance(source, cfHint, blockName) {
   if (!source || source === "document" || source === "ue") return "";
   const q = cfHint ? ` (model / persisted query: \`${cfHint}\`)` : "";
@@ -2168,10 +2734,10 @@ ${tokensHint}
 `;
 }
 async function getTokensHint(projectRoot) {
-  const stylesPath = path11.join(projectRoot, "styles", "styles.css");
-  if (!existsSync8(stylesPath)) return "";
+  const stylesPath = path15.join(projectRoot, "styles", "styles.css");
+  if (!existsSync12(stylesPath)) return "";
   try {
-    const css = await readFile6(stylesPath, "utf-8");
+    const css = await readFile9(stylesPath, "utf-8");
     const rootMatch = css.match(/:root\s*\{([^}]+)\}/);
     if (!rootMatch) return "";
     const props = rootMatch[1].split("\n").filter((line) => line.trim().startsWith("--")).map((line) => line.trim()).join("\n  ");
@@ -2201,7 +2767,8 @@ var init_prompt_builder = __esm({
       figma: "Figma",
       stitch: "Google Stitch",
       canva: "Canva",
-      sketch: "Sketch"
+      sketch: "Sketch",
+      framer: "Framer"
     };
   }
 });
@@ -2311,11 +2878,11 @@ var init_harness = __esm({
 });
 
 // src/lib/preview/server.ts
-import { createReadStream, existsSync as existsSync9, statSync } from "fs";
+import { createReadStream, existsSync as existsSync13, statSync } from "fs";
 import http from "http";
-import path12 from "path";
+import path16 from "path";
 function startServer(root, routes, port, host = "127.0.0.1") {
-  const resolvedRoot = path12.resolve(root);
+  const resolvedRoot = path16.resolve(root);
   const clients = /* @__PURE__ */ new Set();
   const server = http.createServer((req, res) => {
     const urlPath = decodeURIComponent((req.url ?? "/").split("?")[0]);
@@ -2341,19 +2908,19 @@ function startServer(root, routes, port, host = "127.0.0.1") {
       res.end(route.body);
       return;
     }
-    const filePath = path12.join(resolvedRoot, urlPath);
+    const filePath = path16.join(resolvedRoot, urlPath);
     if (!filePath.startsWith(resolvedRoot)) {
       res.writeHead(403);
       res.end("Forbidden");
       return;
     }
-    if (!existsSync9(filePath) || !statSync(filePath).isFile()) {
+    if (!existsSync13(filePath) || !statSync(filePath).isFile()) {
       res.writeHead(404, { "content-type": "text/plain" });
       res.end(`Not found: ${urlPath}`);
       return;
     }
     res.writeHead(200, {
-      "content-type": MIME[path12.extname(filePath).toLowerCase()] ?? "application/octet-stream"
+      "content-type": MIME[path16.extname(filePath).toLowerCase()] ?? "application/octet-stream"
     });
     createReadStream(filePath).pipe(res);
   });
@@ -2417,10 +2984,10 @@ var preview_exports = {};
 __export(preview_exports, {
   previewBlock: () => previewBlock
 });
-import { existsSync as existsSync10, watch } from "fs";
-import { readFile as readFile7 } from "fs/promises";
-import path13 from "path";
-import chalk6 from "chalk";
+import { existsSync as existsSync14, watch } from "fs";
+import { readFile as readFile10 } from "fs/promises";
+import path17 from "path";
+import chalk7 from "chalk";
 function labelFor(width) {
   if (width <= 480) return `${width} mobile`;
   if (width <= 1024) return `${width} tablet`;
@@ -2472,30 +3039,30 @@ async function previewBlock(name, options = {}) {
     process.exitCode = 1;
     return;
   }
-  const blockDir = path13.join(projectRoot, "blocks", name);
-  if (!existsSync10(blockDir)) {
+  const blockDir = path17.join(projectRoot, "blocks", name);
+  if (!existsSync14(blockDir)) {
     logger.error(`Block "${name}" not found at blocks/${name}/.`);
     process.exitCode = 1;
     return;
   }
-  if (!existsSync10(path13.join(blockDir, `${name}.css`)) && !existsSync10(path13.join(blockDir, `${name}.js`))) {
+  if (!existsSync14(path17.join(blockDir, `${name}.css`)) && !existsSync14(path17.join(blockDir, `${name}.js`))) {
     logger.error(`Block "${name}" has no ${name}.css / ${name}.js to preview.`);
     process.exitCode = 1;
     return;
   }
   let meta = null;
-  const metaPath = path13.join(blockDir, ".eds-meta.json");
-  if (existsSync10(metaPath)) {
+  const metaPath = path17.join(blockDir, ".eds-meta.json");
+  if (existsSync14(metaPath)) {
     try {
-      meta = JSON.parse(await readFile7(metaPath, "utf-8"));
+      meta = JSON.parse(await readFile10(metaPath, "utf-8"));
     } catch {
     }
   }
-  const samplePath = path13.join(blockDir, `_${name}.preview.html`);
+  const samplePath = path17.join(blockDir, `_${name}.preview.html`);
   let sampleContent;
   let placeholder = false;
-  if (existsSync10(samplePath)) {
-    sampleContent = await readFile7(samplePath, "utf-8");
+  if (existsSync14(samplePath)) {
+    sampleContent = await readFile10(samplePath, "utf-8");
   } else {
     sampleContent = defaultSample(name);
     placeholder = true;
@@ -2545,9 +3112,9 @@ async function previewBlock(name, options = {}) {
     reloadTimer = setTimeout(() => server.reload(), 150);
   });
   logger.info("");
-  logger.info(`  ${chalk6.bold("\u279C")}  ${chalk6.cyan(server.url)}`);
+  logger.info(`  ${chalk7.bold("\u279C")}  ${chalk7.cyan(server.url)}`);
   logger.info(statusLine("pass", "live reload", "edits to the block refresh the browser"));
-  logger.info(chalk6.dim("  Press Ctrl+C to stop.\n"));
+  logger.info(chalk7.dim("  Press Ctrl+C to stop.\n"));
   if (options.open !== false) await openInBrowser(server.url);
   const stop = async () => {
     watcher.close();
@@ -2576,10 +3143,10 @@ var from_design_exports = {};
 __export(from_design_exports, {
   blockFromDesign: () => blockFromDesign
 });
-import { existsSync as existsSync11 } from "fs";
-import { readFile as readFile8, writeFile as writeFile7 } from "fs/promises";
-import path14 from "path";
-import chalk7 from "chalk";
+import { existsSync as existsSync15 } from "fs";
+import { readFile as readFile11, writeFile as writeFile9 } from "fs/promises";
+import path18 from "path";
+import chalk8 from "chalk";
 import ora from "ora";
 async function previewRunning(port = 8777) {
   try {
@@ -2602,7 +3169,8 @@ async function runWizard(figmaUrl) {
       { name: "Figma", value: "figma" },
       { name: "Google Stitch", value: "stitch" },
       { name: "Canva", value: "canva" },
-      { name: "Sketch", value: "sketch" }
+      { name: "Sketch", value: "sketch" },
+      { name: "Framer", value: "framer" }
     ],
     default: "figma"
   });
@@ -2728,7 +3296,7 @@ async function blockFromDesign(figmaUrlArg, optionsArg) {
     try {
       figma2 = parseFigmaUrl(designUrl);
       spinner.succeed(
-        `Parsed Figma URL  ${chalk7.dim(figma2.nodeId ? `node ${figma2.nodeId}` : `file ${figma2.fileKey}`)}`
+        `Parsed Figma URL  ${chalk8.dim(figma2.nodeId ? `node ${figma2.nodeId}` : `file ${figma2.fileKey}`)}`
       );
     } catch (err) {
       spinner.fail(err.message);
@@ -2736,7 +3304,7 @@ async function blockFromDesign(figmaUrlArg, optionsArg) {
       return;
     }
   } else {
-    logger.info(`  ${icon.pass} ${providerName} design  ${chalk7.dim(designRef)}`);
+    logger.info(`  ${icon.pass} ${providerName} design  ${chalk8.dim(designRef)}`);
   }
   const blockName = options.name || (figma2 ? inferBlockName(figma2.fileName) : "");
   if (!kebabCaseRegex.test(blockName)) {
@@ -2759,20 +3327,20 @@ async function blockFromDesign(figmaUrlArg, optionsArg) {
     screenshot: options.screenshot !== false
   });
   const promptFile = await savePromptToFile(prompt, projectRoot);
-  const hasTokens = existsSync11(path14.join(projectRoot, "styles", "styles.css"));
+  const hasTokens = existsSync15(path18.join(projectRoot, "styles", "styles.css"));
   promptSpinner.succeed(
-    hasTokens ? `Loaded design tokens  ${chalk7.dim("styles/styles.css")}` : `Built prompt  ${chalk7.dim("no project tokens found")}`
+    hasTokens ? `Loaded design tokens  ${chalk8.dim("styles/styles.css")}` : `Built prompt  ${chalk8.dim("no project tokens found")}`
   );
-  logger.info(chalk7.dim(`  prompt \u2192 ${promptFile}`));
+  logger.info(chalk8.dim(`  prompt \u2192 ${promptFile}`));
   if (options.dryRun) {
     logger.info("");
-    logger.info(chalk7.yellow("Dry run mode \u2014 prompt generated but agent not invoked."));
-    logger.info(`Prompt file: ${chalk7.cyan(promptFile)}`);
-    logger.info(`Block name:  ${chalk7.cyan(blockName)}`);
+    logger.info(chalk8.yellow("Dry run mode \u2014 prompt generated but agent not invoked."));
+    logger.info(`Prompt file: ${chalk8.cyan(promptFile)}`);
+    logger.info(`Block name:  ${chalk8.cyan(blockName)}`);
     logger.info(`Prompt version: ${PROMPT_VERSION}`);
     logger.info("");
     logger.info("Preview:");
-    logger.info(chalk7.dim("\u2500".repeat(60)));
+    logger.info(chalk8.dim("\u2500".repeat(60)));
     console.log(prompt);
     return;
   }
@@ -2780,22 +3348,22 @@ async function blockFromDesign(figmaUrlArg, optionsArg) {
   const preferredAgent = options.agent || config.agent;
   if (options.agent === "none") {
     logger.info("Agent skipped (--agent none). Use the prompt file manually:");
-    logger.info(`  ${chalk7.cyan(promptFile)}`);
+    logger.info(`  ${chalk8.cyan(promptFile)}`);
     return;
   }
   const agentSpinner = ora("Detecting AI agent...").start();
   const agent = await detectAgent(preferredAgent);
   if (!agent) {
     agentSpinner.fail("No AI agent found (claude, cursor, or codex).");
-    logger.info(`Install Claude Code: ${chalk7.cyan("npm install -g @anthropic-ai/claude-code")}`);
-    logger.info(`Or use the prompt file manually: ${chalk7.cyan(promptFile)}`);
+    logger.info(`Install Claude Code: ${chalk8.cyan("npm install -g @anthropic-ai/claude-code")}`);
+    logger.info(`Or use the prompt file manually: ${chalk8.cyan(promptFile)}`);
     process.exitCode = 1;
     return;
   }
-  agentSpinner.succeed(`Agent ready  ${chalk7.cyan(agent.type)}  ${chalk7.dim(agent.path)}`);
+  agentSpinner.succeed(`Agent ready  ${chalk8.cyan(agent.type)}  ${chalk8.dim(agent.path)}`);
   if (provider === "figma" && !agent.hasFigmaMcp) {
     logger.warn(`Figma MCP may not be configured for ${agent.type}.`);
-    logger.info(`Run ${chalk7.cyan("eds figma setup")} to configure it.`);
+    logger.info(`Run ${chalk8.cyan("eds figma setup")} to configure it.`);
   }
   if (!options.yes) {
     const { confirm } = await import("@inquirer/prompts");
@@ -2804,24 +3372,24 @@ async function blockFromDesign(figmaUrlArg, optionsArg) {
       default: true
     });
     if (!proceed) {
-      logger.info(`Prompt saved to: ${chalk7.cyan(promptFile)}`);
+      logger.info(`Prompt saved to: ${chalk8.cyan(promptFile)}`);
       return;
     }
   }
   logger.info(
-    `  ${chalk7.dim("\u2192")} Handing off to ${chalk7.cyan(agent.type)}  ${chalk7.dim(`via ${providerName} MCP`)}`
+    `  ${chalk8.dim("\u2192")} Handing off to ${chalk8.cyan(agent.type)}  ${chalk8.dim(`via ${providerName} MCP`)}`
   );
   if (provider === "figma") {
-    logger.info(chalk7.dim("     get_design_context \xB7 get_variable_defs \xB7 get_screenshot"));
+    logger.info(chalk8.dim("     get_design_context \xB7 get_variable_defs \xB7 get_screenshot"));
   }
   const success = await invokeAgent(agent, promptFile, projectRoot);
   if (!success) {
     process.exitCode = 1;
     return;
   }
-  const blockDir = path14.join(projectRoot, "blocks", blockName);
+  const blockDir = path18.join(projectRoot, "blocks", blockName);
   const ok = await verifyGeneratedBlock(blockDir, blockName, options.ueModel !== false);
-  if (existsSync11(blockDir)) {
+  if (existsSync15(blockDir)) {
     const meta = {
       provider,
       designRef,
@@ -2831,7 +3399,7 @@ async function blockFromDesign(figmaUrlArg, optionsArg) {
       promptVersion: PROMPT_VERSION,
       agentUsed: agent.type
     };
-    await writeFile7(path14.join(blockDir, ".eds-meta.json"), `${JSON.stringify(meta, null, 2)}
+    await writeFile9(path18.join(blockDir, ".eds-meta.json"), `${JSON.stringify(meta, null, 2)}
 `);
   }
   if (!ok) {
@@ -2842,10 +3410,21 @@ async function blockFromDesign(figmaUrlArg, optionsArg) {
     return;
   }
   logger.success(`Block "${blockName}" generation complete.`);
+  if (!options.yes) {
+    const { confirm } = await import("@inquirer/prompts");
+    const addTracking = await confirm({
+      message: "Instrument this block for analytics (dataLayer)?",
+      default: false
+    });
+    if (addTracking) {
+      const { trackBlock: trackBlock2 } = await Promise.resolve().then(() => (init_track2(), track_exports));
+      await trackBlock2(blockName, {});
+    }
+  }
   if (options.serve !== false) {
     if (await previewRunning()) {
       logger.info(
-        chalk7.dim(
+        chalk8.dim(
           "  A preview server is already running at http://127.0.0.1:8777 \u2014 your change will refresh there."
         )
       );
@@ -2855,15 +3434,15 @@ async function blockFromDesign(figmaUrlArg, optionsArg) {
       await previewBlock2(blockName, {});
     }
   } else {
-    logger.info(`  ${chalk7.dim("\u2192")} Next:  ${chalk7.cyan(`eds block preview ${blockName}`)}`);
+    logger.info(`  ${chalk8.dim("\u2192")} Next:  ${chalk8.cyan(`eds block preview ${blockName}`)}`);
   }
 }
 async function verifyGeneratedBlock(blockDir, blockName, withUeModel) {
   const checks = [];
-  const jsPath = path14.join(blockDir, `${blockName}.js`);
-  const cssPath = path14.join(blockDir, `${blockName}.css`);
-  const hasJs = existsSync11(jsPath);
-  const hasCss = existsSync11(cssPath);
+  const jsPath = path18.join(blockDir, `${blockName}.js`);
+  const cssPath = path18.join(blockDir, `${blockName}.css`);
+  const hasJs = existsSync15(jsPath);
+  const hasCss = existsSync15(cssPath);
   checks.push({
     status: hasJs ? "pass" : "fail",
     name: `${blockName}.js`,
@@ -2875,7 +3454,7 @@ async function verifyGeneratedBlock(blockDir, blockName, withUeModel) {
     message: hasCss ? "created" : "missing \u2014 agent did not write the CSS file"
   });
   if (hasJs) {
-    const js = await readFile8(jsPath, "utf-8");
+    const js = await readFile11(jsPath, "utf-8");
     checks.push({
       status: /export\s+default/.test(js) ? "pass" : "fail",
       name: "decorate export",
@@ -2890,7 +3469,7 @@ async function verifyGeneratedBlock(blockDir, blockName, withUeModel) {
     }
   }
   if (hasCss) {
-    const css = await readFile8(cssPath, "utf-8");
+    const css = await readFile11(cssPath, "utf-8");
     checks.push({
       status: css.includes(`.${blockName}`) ? "pass" : "warn",
       name: "scoped CSS",
@@ -2898,12 +3477,12 @@ async function verifyGeneratedBlock(blockDir, blockName, withUeModel) {
     });
   }
   if (withUeModel) {
-    const hasPerBlock = existsSync11(path14.join(blockDir, `_${blockName}.json`));
-    const modelsFile = path14.join(blockDir, "..", "..", "component-models.json");
+    const hasPerBlock = existsSync15(path18.join(blockDir, `_${blockName}.json`));
+    const modelsFile = path18.join(blockDir, "..", "..", "component-models.json");
     let hasAggregated = false;
-    if (!hasPerBlock && existsSync11(modelsFile)) {
+    if (!hasPerBlock && existsSync15(modelsFile)) {
       try {
-        hasAggregated = (await readFile8(modelsFile, "utf-8")).includes(`"${blockName}"`);
+        hasAggregated = (await readFile11(modelsFile, "utf-8")).includes(`"${blockName}"`);
       } catch {
       }
     }
@@ -2915,8 +3494,8 @@ async function verifyGeneratedBlock(blockDir, blockName, withUeModel) {
     });
     if (hasPerBlock && hasJs) {
       try {
-        const modelRaw = await readFile8(path14.join(blockDir, `_${blockName}.json`), "utf-8");
-        const js = await readFile8(jsPath, "utf-8");
+        const modelRaw = await readFile11(path18.join(blockDir, `_${blockName}.json`), "utf-8");
+        const js = await readFile11(jsPath, "utf-8");
         const isRepeatable = /"resourceType"\s*:\s*"[^"]*\/item"/.test(modelRaw) || /"filter"\s*:/.test(modelRaw) || /"multi"\s*:\s*true/.test(modelRaw);
         const iterates = /\.children/.test(js) || /\bfor\s*\(/.test(js) || /\.forEach\s*\(/.test(js);
         if (isRepeatable) {
@@ -2959,10 +3538,10 @@ var list_exports = {};
 __export(list_exports, {
   listBlocks: () => listBlocks
 });
-import { existsSync as existsSync12 } from "fs";
-import { readFile as readFile9, readdir } from "fs/promises";
-import path15 from "path";
-import chalk8 from "chalk";
+import { existsSync as existsSync16 } from "fs";
+import { readFile as readFile12, readdir as readdir2 } from "fs/promises";
+import path19 from "path";
+import chalk9 from "chalk";
 async function listBlocks(options = {}) {
   const projectRoot = findProjectRoot();
   if (!projectRoot) {
@@ -2970,27 +3549,27 @@ async function listBlocks(options = {}) {
     process.exitCode = 1;
     return;
   }
-  const blocksDir = path15.join(projectRoot, "blocks");
-  if (!existsSync12(blocksDir)) {
+  const blocksDir = path19.join(projectRoot, "blocks");
+  if (!existsSync16(blocksDir)) {
     logger.info("No blocks/ directory found.");
     return;
   }
-  const entries = await readdir(blocksDir, { withFileTypes: true });
+  const entries = await readdir2(blocksDir, { withFileTypes: true });
   const blocks = [];
   for (const entry of entries) {
     if (!entry.isDirectory()) continue;
     const name = entry.name;
-    const blockDir = path15.join(blocksDir, name);
+    const blockDir = path19.join(blocksDir, name);
     const info = {
       name,
-      hasJs: existsSync12(path15.join(blockDir, `${name}.js`)),
-      hasCss: existsSync12(path15.join(blockDir, `${name}.css`)),
-      hasUeModel: existsSync12(path15.join(blockDir, `_${name}.json`))
+      hasJs: existsSync16(path19.join(blockDir, `${name}.js`)),
+      hasCss: existsSync16(path19.join(blockDir, `${name}.css`)),
+      hasUeModel: existsSync16(path19.join(blockDir, `_${name}.json`))
     };
-    const metaFile = path15.join(blockDir, ".eds-meta.json");
-    if (existsSync12(metaFile)) {
+    const metaFile = path19.join(blockDir, ".eds-meta.json");
+    if (existsSync16(metaFile)) {
       try {
-        const meta = JSON.parse(await readFile9(metaFile, "utf-8"));
+        const meta = JSON.parse(await readFile12(metaFile, "utf-8"));
         info.figmaSource = {
           fileKey: meta.figmaFileKey,
           nodeId: meta.figmaNodeId,
@@ -3013,17 +3592,17 @@ async function listBlocks(options = {}) {
   const nameWidth = columnWidth(blocks.map((b) => b.name));
   for (const b of blocks) {
     const badges = [
-      b.hasJs ? brand.ok("js") : chalk8.dim.strikethrough("js"),
-      b.hasCss ? brand.ok("css") : chalk8.dim.strikethrough("css")
+      b.hasJs ? brand.ok("js") : chalk9.dim.strikethrough("js"),
+      b.hasCss ? brand.ok("css") : chalk9.dim.strikethrough("css")
     ];
     if (b.hasUeModel) badges.push(brand.blue("ue-model"));
     if (b.figmaSource) badges.push(`${icon.figma} ${brand.dotPurple("figma")}`);
-    const name = padEndVisible(chalk8.bold(b.name), nameWidth);
-    logger.info(`  ${name}  ${chalk8.dim("[")}${badges.join(" ")}${chalk8.dim("]")}`);
+    const name = padEndVisible(chalk9.bold(b.name), nameWidth);
+    logger.info(`  ${name}  ${chalk9.dim("[")}${badges.join(" ")}${chalk9.dim("]")}`);
     if (b.figmaSource) {
       const synced = new Date(b.figmaSource.lastSyncedAt).toLocaleDateString();
       logger.info(
-        `  ${" ".repeat(nameWidth)}  ${icon.arrow} ${chalk8.dim(
+        `  ${" ".repeat(nameWidth)}  ${icon.arrow} ${chalk9.dim(
           `figma:${b.figmaSource.fileKey} \xB7 synced ${synced}`
         )}`
       );
@@ -3063,22 +3642,85 @@ var init_integrations = __esm({
         id: "gtm",
         name: "Google Tag Manager",
         fields: [{ name: "id", message: "GTM container ID", placeholder: "GTM-XXXXXXX" }],
-        code: (v) => `// Google Tag Manager (${v.id}) \u2014 delayed phase, after LCP.
-(function (w, d, s, l, i) {
-  w[l] = w[l] || [];
-  w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
-  const f = d.getElementsByTagName(s)[0];
-  const j = d.createElement(s);
-  j.async = true;
-  j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i;
-  f.parentNode.insertBefore(j, f);
-})(window, document, 'script', 'dataLayer', '${v.id}');`
+        // delayed.js imports the loader + page-meta, pushes page metadata, then GTM.
+        code: () => `// Google Tag Manager - loaded from ./analytics.js (delayed phase, after LCP).
+import { loadGTM } from './analytics.js';
+import pageMetaPush from './page-meta.js';
+
+const pageMetaReady = pageMetaPush();
+pageMetaReady.then(loadGTM);`,
+        module: (v) => [
+          {
+            file: "scripts/analytics.js",
+            content: `// scripts/analytics.js - Google Tag Manager (generated by \`eds integrate gtm\`).
+// The container ID comes from the \`gtm-id\` metadata, falling back to the one
+// configured here. Import { trackEvent } from './analytics.js' to push events.
+
+const FALLBACK_ID = ${JSON.stringify(v.id || "")};
+
+function getMetadata(name) {
+  const meta = document.querySelector(\`meta[name="\${name}"]\`);
+  return meta ? meta.content : '';
+}
+
+function isDev() {
+  const h = window.location.hostname;
+  return h === 'localhost' || h === '127.0.0.1' || h.endsWith('.aem.page') || h.endsWith('.hlx.page');
+}
+
+// dataLayer must exist before anything pushes to it (trackEvent may run before loadGTM).
+window.dataLayer = window.dataLayer || [];
+
+export function trackEvent(event) {
+  if (isDev()) {
+    // eslint-disable-next-line no-console
+    console.log('[gtm]', JSON.stringify(event, null, 2));
+  }
+  window.dataLayer.push(event);
+}
+
+let loaded = false;
+
+export function loadGTM() {
+  if (loaded) return;
+  const raw = getMetadata('gtm-id') || FALLBACK_ID;
+  if (!raw) return;
+  loaded = true;
+
+  const id = raw.startsWith('GTM-') ? raw : \`GTM-\${raw}\`;
+  window.dataLayer.push({ 'gtm.start': Date.now(), event: 'gtm.js' });
+
+  const script = document.createElement('script');
+  script.async = true;
+  script.src = \`https://www.googletagmanager.com/gtm.js?id=\${id}\`;
+  document.head.append(script);
+}
+`
+          },
+          {
+            file: "scripts/page-meta.js",
+            content: `// scripts/page-meta.js - pushes page-level metadata to the dataLayer before
+// GTM initialises. Extend \`pageMeta\` with the fields your container expects.
+import { trackEvent } from './analytics.js';
+
+export default async function pageMetaPush() {
+  const pageMeta = {
+    event: 'page_meta',
+  };
+
+  trackEvent(pageMeta);
+
+  return pageMeta;
+}
+`
+          }
+        ]
       },
       {
         id: "ga4",
         name: "Google Analytics 4",
         fields: [{ name: "id", message: "Measurement ID", placeholder: "G-XXXXXXXXXX" }],
-        code: (v) => `// Google Analytics 4 (${v.id}) \u2014 delayed phase.
+        code: (v) => `// Google Analytics 4 (${v.id}) - delayed phase.
 const gaScript = document.createElement('script');
 gaScript.async = true;
 gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=${v.id}';
@@ -3095,7 +3737,7 @@ gtag('config', '${v.id}');`
           { name: "label", message: "Button label", placeholder: "Chat with us" },
           { name: "src", message: "Chat widget script URL" }
         ],
-        code: (v) => `// Chat widget \u2014 facade pattern: load the heavy script only on first interaction.
+        code: (v) => `// Chat widget - facade pattern: load the heavy script only on first interaction.
 const chatBtn = document.createElement('button');
 chatBtn.type = 'button';
 chatBtn.className = 'chat-facade';
@@ -3113,7 +3755,7 @@ document.body.appendChild(chatBtn);`
         id: "cookiebot",
         name: "Cookie consent (Cookiebot)",
         fields: [{ name: "id", message: "Cookiebot domain group ID (CBID)" }],
-        code: (v) => `// Cookiebot consent \u2014 load early in delayed; configure GTM consent mode to respect it.
+        code: (v) => `// Cookiebot consent - load early in delayed; configure GTM consent mode to respect it.
 const cb = document.createElement('script');
 cb.id = 'Cookiebot';
 cb.src = 'https://consent.cookiebot.com/uc.js';
@@ -3125,7 +3767,7 @@ document.head.appendChild(cb);`
         id: "custom",
         name: "Custom third-party script",
         fields: [{ name: "url", message: "Script URL" }],
-        code: (v) => `// Custom third-party script \u2014 delayed phase.
+        code: (v) => `// Custom third-party script - delayed phase.
 const s = document.createElement('script');
 s.async = true;
 s.src = ${JSON.stringify(v.url || "")};
@@ -3140,10 +3782,10 @@ var integrate_exports = {};
 __export(integrate_exports, {
   integrate: () => integrate
 });
-import { existsSync as existsSync13 } from "fs";
-import { mkdir as mkdir5, readFile as readFile10, writeFile as writeFile8 } from "fs/promises";
-import path16 from "path";
-import chalk9 from "chalk";
+import { existsSync as existsSync17 } from "fs";
+import { mkdir as mkdir6, readFile as readFile13, writeFile as writeFile10 } from "fs/promises";
+import path20 from "path";
+import chalk10 from "chalk";
 async function integrate(type) {
   const projectRoot = findProjectRoot();
   if (!projectRoot) {
@@ -3151,7 +3793,7 @@ async function integrate(type) {
     process.exitCode = 1;
     return;
   }
-  logger.logoOnce(logo("Integrate \u2014 third-party service"));
+  logger.logoOnce(logo("Integrate - third-party service"));
   const { select, input } = await import("@inquirer/prompts");
   const chosenId = type || await select({
     message: "Which service do you want to add?",
@@ -3170,26 +3812,39 @@ async function integrate(type) {
     const answer = await input({ message: `  ${f.message}`, default: f.placeholder });
     values[f.name] = answer.trim();
   }
-  const block2 = wrapBlock(integration.name, integration.code(values));
-  const delayedPath = path16.join(projectRoot, "scripts", "delayed.js");
-  await mkdir5(path16.dirname(delayedPath), { recursive: true });
-  const existing = existsSync13(delayedPath) ? await readFile10(delayedPath, "utf-8") : DELAYED_HEADER;
-  await writeFile8(delayedPath, `${existing.replace(/\s*$/, "")}
+  const modulePaths = [];
+  if (integration.module) {
+    for (const mod of integration.module(values)) {
+      const abs = path20.join(projectRoot, mod.file);
+      await mkdir6(path20.dirname(abs), { recursive: true });
+      await writeFile10(abs, mod.content);
+      modulePaths.push(mod.file);
+    }
+  }
+  const block2 = integration.module ? `
+// ${integration.name} (eds integrate)
+${integration.code(values)}
+` : wrapBlock(integration.name, integration.code(values));
+  const delayedPath = path20.join(projectRoot, "scripts", "delayed.js");
+  await mkdir6(path20.dirname(delayedPath), { recursive: true });
+  const existing = existsSync17(delayedPath) ? await readFile13(delayedPath, "utf-8") : DELAYED_HEADER;
+  await writeFile10(delayedPath, `${existing.replace(/\s*$/, "")}
 ${block2}`);
   logger.info(heading("Added"));
-  logger.info(accentLine(integration.name, "\u2192 scripts/delayed.js"));
+  for (const p of modulePaths) logger.info(accentLine(integration.name, `wrote ${p}`));
+  logger.info(accentLine(integration.name, "wired into scripts/delayed.js"));
   logger.info("");
   logger.info(
-    chalk9.dim("  Loads after LCP (delayed phase) \u2014 zero impact on your Core Web Vitals.")
+    chalk10.dim("  Loads after LCP (delayed phase) - zero impact on your Core Web Vitals.")
   );
   if (integration.id === "gtm" || integration.id === "ga4") {
     logger.info(
-      chalk9.dim("  Tip: gate analytics behind user consent (add the Cookiebot integration).")
+      chalk10.dim("  Tip: gate analytics behind user consent (add the Cookiebot integration).")
     );
   }
   if (integration.id === "chat") {
     logger.info(
-      chalk9.dim("  The widget loads only when the visitor clicks the button (facade pattern).")
+      chalk10.dim("  The widget loads only when the visitor clicks the button (facade pattern).")
     );
   }
   logger.info("");
@@ -3204,7 +3859,7 @@ var init_integrate = __esm({
     init_logger();
     init_project();
     init_ui();
-    DELAYED_HEADER = `// delayed.js \u2014 third-party / non-critical scripts.
+    DELAYED_HEADER = `// delayed.js - third-party / non-critical scripts.
 // Loaded in the EDS delayed phase (after LCP), so nothing here blocks the page.
 `;
   }
@@ -3215,9 +3870,9 @@ var setup_exports = {};
 __export(setup_exports, {
   figmaSetup: () => figmaSetup
 });
-import { existsSync as existsSync14 } from "fs";
-import { mkdir as mkdir6, writeFile as writeFile9 } from "fs/promises";
-import chalk10 from "chalk";
+import { existsSync as existsSync18 } from "fs";
+import { mkdir as mkdir7, writeFile as writeFile11 } from "fs/promises";
+import chalk11 from "chalk";
 async function figmaSetup() {
   const { select, confirm } = await import("@inquirer/prompts");
   logger.logoOnce(logo());
@@ -3227,15 +3882,15 @@ async function figmaSetup() {
   let selectedAgent;
   if (agents.length === 0) {
     logger.warn("No AI agents found (claude, cursor, codex).");
-    logger.info(`Install Claude Code: ${chalk10.cyan("npm install -g @anthropic-ai/claude-code")}`);
+    logger.info(`Install Claude Code: ${chalk11.cyan("npm install -g @anthropic-ai/claude-code")}`);
     selectedAgent = "none";
   } else {
-    logger.success(`Found: ${agents.map((a) => chalk10.cyan(a.type)).join(", ")}`);
+    logger.success(`Found: ${agents.map((a) => chalk11.cyan(a.type)).join(", ")}`);
     selectedAgent = await select({
       message: "Which agent do you want to use with eds-cli?",
       choices: [
         ...agents.map((a) => ({
-          name: `${a.type}${a.hasFigmaMcp ? chalk10.green(" (Figma MCP detected)") : ""}`,
+          name: `${a.type}${a.hasFigmaMcp ? chalk11.green(" (Figma MCP detected)") : ""}`,
           value: a.type
         })),
         { name: "None (manual mode)", value: "none" }
@@ -3251,17 +3906,17 @@ async function figmaSetup() {
       switch (selectedAgent) {
         case "claude":
           logger.info(
-            `  ${chalk10.cyan("claude mcp add --transport sse figma-sse https://mcp.figma.com/sse")}`
+            `  ${chalk11.cyan("claude mcp add --transport sse figma-sse https://mcp.figma.com/sse")}`
           );
           logger.info("  or for Figma Desktop app:");
           logger.info(
-            `  ${chalk10.cyan("claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp")}`
+            `  ${chalk11.cyan("claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp")}`
           );
           break;
         case "cursor":
-          logger.info(`  Add to ${chalk10.cyan("~/.cursor/mcp.json")}:`);
+          logger.info(`  Add to ${chalk11.cyan("~/.cursor/mcp.json")}:`);
           logger.info(
-            chalk10.dim(
+            chalk11.dim(
               JSON.stringify(
                 {
                   mcpServers: {
@@ -3286,7 +3941,7 @@ async function figmaSetup() {
     }
   }
   logger.info(
-    chalk10.dim(
+    chalk11.dim(
       "\nNote: Figma MCP requires a Figma seat (Dev or Full on paid plans for desktop server)."
     )
   );
@@ -3296,22 +3951,22 @@ async function figmaSetup() {
   });
   if (shouldSave) {
     const configDir = globalConfigDir();
-    if (!existsSync14(configDir)) {
-      await mkdir6(configDir, { recursive: true });
+    if (!existsSync18(configDir)) {
+      await mkdir7(configDir, { recursive: true });
     }
     const config = {};
     if (selectedAgent !== "none") {
       config.agent = selectedAgent;
     }
-    await writeFile9(globalConfigPath(), `${JSON.stringify(config, null, 2)}
+    await writeFile11(globalConfigPath(), `${JSON.stringify(config, null, 2)}
 `, {
       mode: 384
     });
-    logger.success(`Config saved to ${chalk10.cyan(globalConfigPath())}`);
+    logger.success(`Config saved to ${chalk11.cyan(globalConfigPath())}`);
   }
-  logger.info(chalk10.bold("\nSetup complete!"));
+  logger.info(chalk11.bold("\nSetup complete!"));
   if (selectedAgent !== "none") {
-    logger.info(`Try: ${chalk10.cyan('eds block from-design "<figma-url>" --dry-run')}`);
+    logger.info(`Try: ${chalk11.cyan('eds block from-design "<figma-url>" --dry-run')}`);
   }
 }
 var init_setup = __esm({
@@ -3330,9 +3985,9 @@ var doctor_exports = {};
 __export(doctor_exports, {
   doctor: () => doctor
 });
-import { existsSync as existsSync15 } from "fs";
-import { readFile as readFile11, readdir as readdir2 } from "fs/promises";
-import path17 from "path";
+import { existsSync as existsSync19 } from "fs";
+import { readFile as readFile14, readdir as readdir3 } from "fs/promises";
+import path21 from "path";
 import { parse as parseYaml } from "yaml";
 async function doctor(options = {}) {
   const projectRoot = findProjectRoot();
@@ -3354,7 +4009,7 @@ async function doctor(options = {}) {
   });
   if (project.hasFstab) {
     try {
-      const content = await readFile11(path17.join(projectRoot, "fstab.yaml"), "utf-8");
+      const content = await readFile14(path21.join(projectRoot, "fstab.yaml"), "utf-8");
       parseYaml(content);
       results.push({ name: "fstab.yaml valid YAML", status: "pass", message: "Valid" });
     } catch {
@@ -3376,28 +4031,28 @@ async function doctor(options = {}) {
     message: project.hasBlocks ? "Found" : "Missing - no blocks yet"
   });
   if (project.hasBlocks) {
-    const blocksDir = path17.join(projectRoot, "blocks");
-    const entries = await readdir2(blocksDir, { withFileTypes: true });
+    const blocksDir = path21.join(projectRoot, "blocks");
+    const entries = await readdir3(blocksDir, { withFileTypes: true });
     let aggregatedModels = "";
-    const aggregatedPath = path17.join(projectRoot, "component-models.json");
-    if (existsSync15(aggregatedPath)) {
+    const aggregatedPath = path21.join(projectRoot, "component-models.json");
+    if (existsSync19(aggregatedPath)) {
       try {
-        aggregatedModels = await readFile11(aggregatedPath, "utf-8");
+        aggregatedModels = await readFile14(aggregatedPath, "utf-8");
       } catch {
       }
     }
     for (const entry of entries) {
       if (!entry.isDirectory()) continue;
       const blockName = entry.name;
-      const jsFile = path17.join(blocksDir, blockName, `${blockName}.js`);
-      const hasJs = existsSync15(jsFile);
+      const jsFile = path21.join(blocksDir, blockName, `${blockName}.js`);
+      const hasJs = existsSync19(jsFile);
       results.push({
         name: `blocks/${blockName} has JS`,
         status: hasJs ? "pass" : "warn",
         message: hasJs ? "Found" : `Missing ${blockName}.js`
       });
       if (hasJs) {
-        const jsContent = await readFile11(jsFile, "utf-8");
+        const jsContent = await readFile14(jsFile, "utf-8");
         if (jsContent.includes("console.log")) {
           results.push({
             name: `blocks/${blockName} no console.log`,
@@ -3406,17 +4061,17 @@ async function doctor(options = {}) {
           });
         }
       }
-      const hasPerBlockModel = existsSync15(path17.join(blocksDir, blockName, `_${blockName}.json`));
+      const hasPerBlockModel = existsSync19(path21.join(blocksDir, blockName, `_${blockName}.json`));
       const hasAggregatedModel = aggregatedModels.includes(`"${blockName}"`);
       results.push({
         name: `blocks/${blockName} UE model`,
         status: hasPerBlockModel || hasAggregatedModel ? "pass" : "warn",
         message: hasPerBlockModel || hasAggregatedModel ? hasPerBlockModel ? `_${blockName}.json` : "in component-models.json" : "no Universal Editor model - authors can't edit this block in UE"
       });
-      const metaFile = path17.join(blocksDir, blockName, ".eds-meta.json");
-      if (existsSync15(metaFile)) {
+      const metaFile = path21.join(blocksDir, blockName, ".eds-meta.json");
+      if (existsSync19(metaFile)) {
         try {
-          const meta = JSON.parse(await readFile11(metaFile, "utf-8"));
+          const meta = JSON.parse(await readFile14(metaFile, "utf-8"));
           const syncDate = new Date(meta.lastSyncedAt);
           const daysSinceSync = Math.floor(
             (Date.now() - syncDate.getTime()) / (1e3 * 60 * 60 * 24)
@@ -3436,10 +4091,10 @@ async function doctor(options = {}) {
       }
     }
   }
-  const queryFile = path17.join(projectRoot, "helix-query.yaml");
-  if (existsSync15(queryFile)) {
+  const queryFile = path21.join(projectRoot, "helix-query.yaml");
+  if (existsSync19(queryFile)) {
     try {
-      const content = await readFile11(queryFile, "utf-8");
+      const content = await readFile14(queryFile, "utf-8");
       parseYaml(content);
       results.push({ name: "helix-query.yaml valid", status: "pass", message: "Valid YAML" });
     } catch {
@@ -3496,10 +4151,10 @@ var audit_loading_exports = {};
 __export(audit_loading_exports, {
   auditLoading: () => auditLoading
 });
-import { existsSync as existsSync16 } from "fs";
-import { readFile as readFile12, readdir as readdir3, stat as stat3 } from "fs/promises";
-import path18 from "path";
-import chalk11 from "chalk";
+import { existsSync as existsSync20 } from "fs";
+import { readFile as readFile15, readdir as readdir4, stat as stat3 } from "fs/promises";
+import path22 from "path";
+import chalk12 from "chalk";
 async function auditLoading(options = {}) {
   const projectRoot = findProjectRoot();
   if (!projectRoot) {
@@ -3532,8 +4187,8 @@ async function auditLoading(options = {}) {
   printResults(results);
 }
 async function checkHeadHtml(root, results) {
-  const filePath = path18.join(root, "head.html");
-  if (!existsSync16(filePath)) {
+  const filePath = path22.join(root, "head.html");
+  if (!existsSync20(filePath)) {
     results.push({
       rule: "head.html exists",
       status: "warn",
@@ -3541,7 +4196,7 @@ async function checkHeadHtml(root, results) {
     });
     return;
   }
-  const content = await readFile12(filePath, "utf-8");
+  const content = await readFile15(filePath, "utf-8");
   const lines = content.split("\n");
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
@@ -3613,8 +4268,8 @@ async function checkHeadHtml(root, results) {
   }
 }
 async function checkScriptsJs(root, results) {
-  const filePath = path18.join(root, "scripts", "scripts.js");
-  if (!existsSync16(filePath)) {
+  const filePath = path22.join(root, "scripts", "scripts.js");
+  if (!existsSync20(filePath)) {
     results.push({
       rule: "scripts/scripts.js exists",
       status: "warn",
@@ -3622,7 +4277,7 @@ async function checkScriptsJs(root, results) {
     });
     return;
   }
-  const content = await readFile12(filePath, "utf-8");
+  const content = await readFile15(filePath, "utf-8");
   const lines = content.split("\n");
   const hasLoadEager = /function\s+loadEager|loadEager\s*=/i.test(content);
   const hasLoadLazy = /function\s+loadLazy|loadLazy\s*=/i.test(content);
@@ -3700,8 +4355,8 @@ async function checkScriptsJs(root, results) {
   }
 }
 async function checkStylesCss(root, results) {
-  const filePath = path18.join(root, "styles", "styles.css");
-  if (!existsSync16(filePath)) return;
+  const filePath = path22.join(root, "styles", "styles.css");
+  if (!existsSync20(filePath)) return;
   const stats = await stat3(filePath);
   const sizeKb = stats.size / 1024;
   results.push({
@@ -3710,7 +4365,7 @@ async function checkStylesCss(root, results) {
     message: `${sizeKb.toFixed(1)} KB${sizeKb > 40 ? " \u2014 large CSS competes with 100KB LCP budget" : ""}`,
     file: "styles/styles.css"
   });
-  const content = await readFile12(filePath, "utf-8");
+  const content = await readFile15(filePath, "utf-8");
   if (/@import\s/.test(content)) {
     results.push({
       rule: "No @import in styles.css",
@@ -3721,8 +4376,8 @@ async function checkStylesCss(root, results) {
   }
 }
 async function checkDelayedJs(root, results) {
-  const filePath = path18.join(root, "scripts", "delayed.js");
-  if (!existsSync16(filePath)) {
+  const filePath = path22.join(root, "scripts", "delayed.js");
+  if (!existsSync20(filePath)) {
     results.push({
       rule: "scripts/delayed.js exists",
       status: "info",
@@ -3730,7 +4385,7 @@ async function checkDelayedJs(root, results) {
     });
     return;
   }
-  const content = await readFile12(filePath, "utf-8");
+  const content = await readFile15(filePath, "utf-8");
   const stripped = content.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "").trim();
   if (!stripped) {
     results.push({
@@ -3742,15 +4397,15 @@ async function checkDelayedJs(root, results) {
   }
 }
 async function checkBlocks(root, results) {
-  const blocksDir = path18.join(root, "blocks");
-  if (!existsSync16(blocksDir)) return;
-  const entries = await readdir3(blocksDir, { withFileTypes: true });
+  const blocksDir = path22.join(root, "blocks");
+  if (!existsSync20(blocksDir)) return;
+  const entries = await readdir4(blocksDir, { withFileTypes: true });
   for (const entry of entries) {
     if (!entry.isDirectory()) continue;
     const blockName = entry.name;
-    const jsFile = path18.join(blocksDir, blockName, `${blockName}.js`);
-    if (!existsSync16(jsFile)) continue;
-    const content = await readFile12(jsFile, "utf-8");
+    const jsFile = path22.join(blocksDir, blockName, `${blockName}.js`);
+    if (!existsSync20(jsFile)) continue;
+    const content = await readFile15(jsFile, "utf-8");
     const lines = content.split("\n");
     const heavyLibs = [
       "jquery",
@@ -3800,9 +4455,9 @@ async function checkBlocks(root, results) {
   for (const entry of entries) {
     if (!entry.isDirectory()) continue;
     const blockName = entry.name;
-    const cssFile = path18.join(blocksDir, blockName, `${blockName}.css`);
-    if (!existsSync16(cssFile)) continue;
-    const content = await readFile12(cssFile, "utf-8");
+    const cssFile = path22.join(blocksDir, blockName, `${blockName}.css`);
+    if (!existsSync20(cssFile)) continue;
+    const content = await readFile15(cssFile, "utf-8");
     const selectorPattern = /^([a-z][a-z0-9-]*)\s*\{/gm;
     for (const selectorMatch of content.matchAll(selectorPattern)) {
       const selector = selectorMatch[1];
@@ -3818,8 +4473,8 @@ async function checkBlocks(root, results) {
   }
 }
 async function checkAemJs(root, results) {
-  const filePath = path18.join(root, "scripts", "aem.js");
-  if (!existsSync16(filePath)) {
+  const filePath = path22.join(root, "scripts", "aem.js");
+  if (!existsSync20(filePath)) {
     results.push({
       rule: "scripts/aem.js exists",
       status: "warn",
@@ -3857,12 +4512,12 @@ function printResults(results) {
     grouped.set(key, bucket);
   }
   for (const [file, fileResults] of grouped) {
-    logger.info(`  ${icon.bullet} ${chalk11.underline(file)}`);
+    logger.info(`  ${icon.bullet} ${chalk12.underline(file)}`);
     for (const r of fileResults) {
-      const loc = r.line ? chalk11.dim(`:${r.line}`) : "";
+      const loc = r.line ? chalk12.dim(`:${r.line}`) : "";
       logger.info(`    ${statusIcon(r.status)} ${r.rule}${loc}`);
       if (r.status !== "pass") {
-        logger.info(chalk11.dim(`       ${r.message}`));
+        logger.info(chalk12.dim(`       ${r.message}`));
       }
     }
     logger.info("");
@@ -3891,17 +4546,17 @@ var audit_security_exports = {};
 __export(audit_security_exports, {
   auditSecurity: () => auditSecurity
 });
-import { existsSync as existsSync17 } from "fs";
-import { readFile as readFile13, readdir as readdir4 } from "fs/promises";
-import path19 from "path";
-import chalk12 from "chalk";
-async function* walk(dir) {
-  const entries = await readdir4(dir, { withFileTypes: true });
+import { existsSync as existsSync21 } from "fs";
+import { readFile as readFile16, readdir as readdir5 } from "fs/promises";
+import path23 from "path";
+import chalk13 from "chalk";
+async function* walk2(dir) {
+  const entries = await readdir5(dir, { withFileTypes: true });
   for (const entry of entries) {
-    const full = path19.join(dir, entry.name);
+    const full = path23.join(dir, entry.name);
     if (entry.isDirectory()) {
       if (IGNORE_DIRS.has(entry.name)) continue;
-      yield* walk(full);
+      yield* walk2(full);
     } else if (entry.isFile()) {
       yield full;
     }
@@ -3932,11 +4587,11 @@ function scanContent(content, relFile, ext) {
   return findings;
 }
 async function auditDependencies(root) {
-  if (!existsSync17(path19.join(root, "package.json"))) {
+  if (!existsSync21(path23.join(root, "package.json"))) {
     return { status: "skipped", note: "no package.json" };
   }
-  const hasLock = existsSync17(path19.join(root, "package-lock.json")) || existsSync17(path19.join(root, "npm-shrinkwrap.json"));
-  if (!hasLock && !existsSync17(path19.join(root, "node_modules"))) {
+  const hasLock = existsSync21(path23.join(root, "package-lock.json")) || existsSync21(path23.join(root, "npm-shrinkwrap.json"));
+  if (!hasLock && !existsSync21(path23.join(root, "node_modules"))) {
     return { status: "skipped", note: "no package-lock.json / node_modules \u2014 run npm install" };
   }
   try {
@@ -3967,12 +4622,12 @@ async function auditSecurity(options = {}) {
     return;
   }
   const findings = [];
-  for await (const file of walk(projectRoot)) {
-    const ext = path19.extname(file).slice(1).toLowerCase();
+  for await (const file of walk2(projectRoot)) {
+    const ext = path23.extname(file).slice(1).toLowerCase();
     if (!SCAN_EXT.has(ext)) continue;
-    const rel = path19.relative(projectRoot, file);
+    const rel = path23.relative(projectRoot, file);
     if (rel.endsWith("aem.js") || rel.endsWith("lib-franklin.js")) continue;
-    const content = await readFile13(file, "utf-8");
+    const content = await readFile16(file, "utf-8");
     findings.push(...scanContent(content, rel, ext));
   }
   const deps = await auditDependencies(projectRoot);
@@ -4020,9 +4675,9 @@ async function auditSecurity(options = {}) {
     );
     for (const f of sorted) {
       const meta = SEVERITY_META[f.severity];
-      const loc = chalk12.dim(`${f.file}:${f.line}`);
-      logger.info(`  ${statusIcon(meta.status)} ${chalk12.bold(meta.label)} ${f.message}  ${loc}`);
-      logger.info(chalk12.dim(`         ${f.snippet}`));
+      const loc = chalk13.dim(`${f.file}:${f.line}`);
+      logger.info(`  ${statusIcon(meta.status)} ${chalk13.bold(meta.label)} ${f.message}  ${loc}`);
+      logger.info(chalk13.dim(`         ${f.snippet}`));
     }
   }
   const summaryLine = summary({
@@ -4229,7 +4884,7 @@ __export(preview_exports2, {
   preview: () => preview,
   resolveAdminConfig: () => resolveAdminConfig
 });
-import chalk13 from "chalk";
+import chalk14 from "chalk";
 import ora2 from "ora";
 async function preview(paths, options) {
   const projectRoot = findProjectRoot();
@@ -4242,7 +4897,7 @@ async function preview(paths, options) {
   let hasErrors = false;
   for (const r of results) {
     if (r.ok) {
-      logger.success(`${r.path} \u2192 ${chalk13.cyan(r.previewUrl || "preview updated")}`);
+      logger.success(`${r.path} \u2192 ${chalk14.cyan(r.previewUrl || "preview updated")}`);
     } else {
       logger.error(`${r.path} \u2014 ${r.message}`);
       hasErrors = true;
@@ -4256,7 +4911,7 @@ function resolveAdminConfig(config, options) {
   const ref = options.ref || config.admin?.ref || "main";
   if (!org || !site) {
     logger.error("Missing --org and --site. Set them via flags or in .edsrc.json:");
-    logger.info(chalk13.dim('  { "admin": { "org": "my-org", "site": "my-site" } }'));
+    logger.info(chalk14.dim('  { "admin": { "org": "my-org", "site": "my-site" } }'));
     process.exitCode = 1;
     return void 0;
   }
@@ -4278,7 +4933,7 @@ var publish_exports = {};
 __export(publish_exports, {
   publish: () => publish
 });
-import chalk14 from "chalk";
+import chalk15 from "chalk";
 import ora3 from "ora";
 async function publish(paths, options) {
   const projectRoot = findProjectRoot();
@@ -4291,7 +4946,7 @@ async function publish(paths, options) {
   let hasErrors = false;
   for (const r of results) {
     if (r.ok) {
-      logger.success(`${r.path} \u2192 ${chalk14.cyan(r.liveUrl || "published")}`);
+      logger.success(`${r.path} \u2192 ${chalk15.cyan(r.liveUrl || "published")}`);
     } else {
       logger.error(`${r.path} \u2014 ${r.message}`);
       hasErrors = true;
@@ -4390,13 +5045,13 @@ var menu_exports = {};
 __export(menu_exports, {
   mainMenu: () => mainMenu
 });
-import { existsSync as existsSync18 } from "fs";
-import { readdir as readdir5 } from "fs/promises";
-import path20 from "path";
+import { existsSync as existsSync22 } from "fs";
+import { readdir as readdir6 } from "fs/promises";
+import path24 from "path";
 async function listBlockNames(projectRoot) {
-  const dir = path20.join(projectRoot, "blocks");
-  if (!existsSync18(dir)) return [];
-  const entries = await readdir5(dir, { withFileTypes: true });
+  const dir = path24.join(projectRoot, "blocks");
+  if (!existsSync22(dir)) return [];
+  const entries = await readdir6(dir, { withFileTypes: true });
   return entries.filter((e) => e.isDirectory()).map((e) => e.name);
 }
 async function mainMenu() {
@@ -4406,10 +5061,15 @@ async function mainMenu() {
     message: "Choose an action",
     choices: [
       { name: "Set up this project (authoring model, CI, naming)", value: "init" },
-      { name: "Generate a block from a design (Figma/Stitch/Canva/Sketch)", value: "from-design" },
+      {
+        name: "Generate a block from a design (Figma/Stitch/Canva/Sketch/Framer)",
+        value: "from-design"
+      },
+      { name: "Migrate a classic AEM component to EDS", value: "migrate" },
       { name: "Scaffold Universal Editor components", value: "scaffold" },
       { name: "Create an empty block", value: "create" },
       { name: "Add a third-party integration (GTM, chat, consent\u2026)", value: "integrate" },
+      { name: "Instrument a block for analytics (dataLayer)", value: "track" },
       { name: "Preview a block in the browser", value: "preview-block" },
       { name: "Preview / publish pages (Admin API)", value: "admin" },
       { name: "Audit the project", value: "audit" },
@@ -4427,6 +5087,11 @@ async function mainMenu() {
       await blockFromDesign2(void 0, {});
       return;
     }
+    case "migrate": {
+      const { migrateComponent: migrateComponent2 } = await Promise.resolve().then(() => (init_migrate(), migrate_exports));
+      await migrateComponent2(void 0, {});
+      return;
+    }
     case "scaffold": {
       const { scaffoldInteractive: scaffoldInteractive2 } = await Promise.resolve().then(() => (init_scaffold(), scaffold_exports));
       await scaffoldInteractive2();
@@ -4465,6 +5130,25 @@ async function mainMenu() {
       await previewBlock2(name, {});
       return;
     }
+    case "track": {
+      const projectRoot = findProjectRoot();
+      if (!projectRoot) {
+        logger.error("Not inside an EDS project (no EDS project markers found).");
+        return;
+      }
+      const blocks = await listBlockNames(projectRoot);
+      if (blocks.length === 0) {
+        logger.warn("No blocks found in blocks/.");
+        return;
+      }
+      const name = await select({
+        message: "Which block to instrument?",
+        choices: blocks.map((b) => ({ name: b, value: b }))
+      });
+      const { trackBlock: trackBlock2 } = await Promise.resolve().then(() => (init_track2(), track_exports));
+      await trackBlock2(name, {});
+      return;
+    }
     case "admin": {
       const { adminWizard: adminWizard2 } = await Promise.resolve().then(() => (init_admin(), admin_exports));
       await adminWizard2();
@@ -4510,13 +5194,13 @@ var init_menu = __esm({
 
 // src/bin/eds.ts
 init_esm_shims();
-import chalk15 from "chalk";
+import chalk16 from "chalk";
 import { Command } from "commander";
 
 // package.json
 var package_default = {
   name: "aem-eds-kit",
-  version: "0.4.7",
+  version: "0.4.12",
   description: "CLI for AEM Edge Delivery Services with Figma MCP integration",
   type: "module",
   engines: {
@@ -4566,6 +5250,7 @@ var package_default = {
     chalk: "^5.4.0",
     commander: "^13.0.0",
     execa: "^9.5.0",
+    "fast-xml-parser": "^5.11.2",
     ora: "^8.1.0",
     yaml: "^2.6.0",
     zod: "^3.24.0"
@@ -4591,13 +5276,23 @@ program.name("eds").description("CLI for AEM Edge Delivery Services with Figma i
   const opts = thisCommand.opts();
   if (opts.verbose) logger.setLevel("debug");
   if (opts.quiet) logger.setQuiet(true);
-  if (opts.color === false) chalk15.level = 0;
+  if (opts.color === false) chalk16.level = 0;
 });
 program.addHelpText("beforeAll", () => logo());
 program.command("init").description("Set up a freshly cloned EDS boilerplate for your authoring model (interactive)").option("--name <name>", "Project name (kebab-case)").option("--authoring <model>", "Authoring model: ue | da | gdrive | sharepoint").option("--mountpoint <url>", "Content source URL (document models)").option("--org <org>", "DA org (authoring=da)").option("--site <site>", "DA site (authoring=da)").option("--no-ci", "Skip the GitHub Actions CI workflow").option("--yes", "Skip prompts; apply with flags/defaults").action(async (options) => {
   const { initProject: initProject2 } = await Promise.resolve().then(() => (init_init(), init_exports));
   await initProject2(options);
 });
+var migrate = program.command("migrate").description("Migrate from classic AEM to EDS");
+migrate.command("component [dir]").description("Migrate a classic AEM component's dialog into an EDS block + UE model").option("--name <name>", "Block name (otherwise inferred from the component)").option("--clientlib <dir>", "Path to the component's clientlib (otherwise auto-detected)").option("--yes", "Skip confirmation prompts").action(async (dir, options) => {
+  const { migrateComponent: migrateComponent2 } = await Promise.resolve().then(() => (init_migrate(), migrate_exports));
+  await migrateComponent2(dir, options);
+});
+var track = program.command("track").description("Instrument blocks for analytics");
+track.command("block <name>").description("Add dataLayer tracking (click + form submit) to a block's decorate()").option("--no-click", "Skip click tracking").option("--no-submit", "Skip form-submit tracking").action(async (name, options) => {
+  const { trackBlock: trackBlock2 } = await Promise.resolve().then(() => (init_track2(), track_exports));
+  await trackBlock2(name, options);
+});
 var block = program.command("block").description("Manage EDS blocks");
 block.command("create <name>").description("Scaffold a new EDS block (with Universal Editor model by default)").option("--no-ue-model", "Skip the Universal Editor model (generated by default)").action(async (name, options) => {
   const { createBlock: createBlock2 } = await Promise.resolve().then(() => (init_create(), create_exports));