@deneb-ui/cli 2.0.10 → 2.0.11

package/src/tools/local-template-lab.cjs

@@ -28,7 +28,7 @@ Preview server stopped during navigation (${e}). Restarting (${b}/${k})...
   <iframe id="template-preview" title="Local template preview"></iframe>
   <script>
     (() => {
-      const BRIDGE_SOURCE = ${JSON.stringify(D)};
+      const BRIDGE_SOURCE = ${JSON.stringify((()=>{try{delete require.cache[require.resolve("./template-preview-focus-bridge.cjs")];const e=require("./template-preview-focus-bridge.cjs");if(typeof e=="string"&&e.trim())return e;}catch{}return ee;})())};
       const preview = document.getElementById('template-preview');
       const errorBox = document.getElementById('bridge-error');
       const PREVIOUS_PREVIEW_PREFIX = ['MARKET', 'PLACE'].join('') + '_PREVIEW_';

package/src/tools/recipe-engine.cjs

@@ -0,0 +1,158 @@
+/**
+ * DENEB Recipe Engine & Learning System
+ *
+ * Preserves, identifies, and applies battle-tested storefront transformation recipes.
+ * Enables developers and AI agents to save custom fixes from calibrated projects
+ * and automatically re-apply them to any new frontend during `npx @deneb-ui/cli init`.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const BUILT_IN_RECIPES_DIR = path.join(__dirname, '..', 'recipes');
+
+/**
+ * Load all available recipes (built-in + user-saved)
+ */
+function loadAllRecipes(projectDir) {
+  const recipes = [];
+
+  // 1. Built-in recipes
+  if (fs.existsSync(BUILT_IN_RECIPES_DIR)) {
+    const files = fs.readdirSync(BUILT_IN_RECIPES_DIR);
+    for (const file of files) {
+      if (!file.endsWith('.json')) continue;
+      try {
+        const content = JSON.parse(fs.readFileSync(path.join(BUILT_IN_RECIPES_DIR, file), 'utf8'));
+        recipes.push({ ...content, isBuiltIn: true });
+      } catch (err) {
+        // Ignore malformed files
+      }
+    }
+  }
+
+  // 2. Local workspace / project recipes (.deneb/recipes)
+  if (projectDir) {
+    const localDir = path.join(projectDir, '.deneb', 'recipes');
+    if (fs.existsSync(localDir)) {
+      const files = fs.readdirSync(localDir);
+      for (const file of files) {
+        if (!file.endsWith('.json')) continue;
+        try {
+          const content = JSON.parse(fs.readFileSync(path.join(localDir, file), 'utf8'));
+          recipes.push({ ...content, isBuiltIn: false, source: 'local' });
+        } catch {}
+      }
+    }
+  }
+
+  return recipes;
+}
+
+/**
+ * Match the best recipe for an incoming project based on signatures
+ */
+function matchRecipeForProject(projectDir, pkg = {}, sourceFiles = []) {
+  const allRecipes = loadAllRecipes(projectDir);
+  if (allRecipes.length === 0) return null;
+
+  const pkgStr = JSON.stringify(pkg).toLowerCase();
+  const fileNamesStr = sourceFiles.map((f) => path.basename(f).toLowerCase()).join(' ');
+
+  let bestMatch = null;
+  let highestScore = 0;
+
+  for (const recipe of allRecipes) {
+    let score = 0;
+    const signatures = recipe.signatures || {};
+    const keywords = signatures.keywords || [];
+    const roles = signatures.componentRoles || [];
+
+    for (const kw of keywords) {
+      if (pkgStr.includes(kw)) score += 3;
+      if (fileNamesStr.includes(kw)) score += 2;
+    }
+
+    for (const role of roles) {
+      if (fileNamesStr.includes(role.toLowerCase())) score += 5;
+    }
+
+    if (score > highestScore) {
+      highestScore = score;
+      bestMatch = recipe;
+    }
+  }
+
+  // If score is decent, return recipe; otherwise default to ecommerce-storefront if available
+  if (highestScore >= 6) {
+    return bestMatch;
+  }
+
+  const defaultRecipe = allRecipes.find((r) => r.name === 'ecommerce-storefront');
+  return defaultRecipe || allRecipes[0] || null;
+}
+
+/**
+ * Learn & Save Recipe from an existing calibrated project
+ */
+function saveRecipeFromProject(projectDir, recipeName = 'custom-storefront', options = {}) {
+  const manifestPath = path.join(projectDir, 'fivora-template.json');
+  const siteDataPath = path.join(projectDir, 'src', 'data', 'site-data.json');
+
+  if (!fs.existsSync(manifestPath)) {
+    throw new Error(`fivora-template.json not found in ${projectDir}. Make sure the project is calibrated first.`);
+  }
+
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+  let siteData = {};
+  if (fs.existsSync(siteDataPath)) {
+    siteData = JSON.parse(fs.readFileSync(siteDataPath, 'utf8'));
+  }
+
+  const recipeId = recipeName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+  const recipe = {
+    name: recipeId,
+    label: options.label || manifest.name || recipeName,
+    description: options.description || `Learned and saved recipe extracted from ${path.basename(projectDir)}.`,
+    savedAt: new Date().toISOString(),
+    signatures: {
+      keywords: [recipeId, 'store', 'shop', 'product'],
+      componentRoles: ['Navbar', 'Hero', 'ProductGrid', 'ProductCard', 'Footer'],
+    },
+    gridRules: {
+      cardComponentNames: ['ProductCard', 'Card', 'ItemCard', 'ShoeCard'],
+      cardFields: [
+        { suffix: 'Image', type: 'image', label: 'Image' },
+        { suffix: 'Badge', type: 'text', label: 'Badge' },
+        { suffix: 'Category', type: 'text', label: 'Category' },
+        { suffix: 'Name', type: 'text', label: 'Title' },
+        { suffix: 'Price', type: 'text', label: 'Price' },
+      ],
+      autoIndex: true,
+      defaultCardPrefix: 'product',
+    },
+    sections: manifest.editorSchema?.sections || [],
+    defaults: siteData.content || {},
+  };
+
+  // 1. Save to global CLI recipes directory
+  fs.mkdirSync(BUILT_IN_RECIPES_DIR, { recursive: true });
+  const globalDest = path.join(BUILT_IN_RECIPES_DIR, `${recipeId}.json`);
+  fs.writeFileSync(globalDest, JSON.stringify(recipe, null, 2) + '\n', 'utf8');
+
+  // 2. Also save to project-local .deneb/recipes directory for portability
+  const localDestDir = path.join(projectDir, '.deneb', 'recipes');
+  fs.mkdirSync(localDestDir, { recursive: true });
+  const localDest = path.join(localDestDir, `${recipeId}.json`);
+  fs.writeFileSync(localDest, JSON.stringify(recipe, null, 2) + '\n', 'utf8');
+
+  return { recipe, globalDest, localDest };
+}
+
+module.exports = {
+  loadAllRecipes,
+  matchRecipeForProject,
+  saveRecipeFromProject,
+};

package/src/tools/template-converter.cjs

@@ -1,5 +1,5 @@
 /**
- * DENEB Universal Template Converter Engine
+ * DENEB Universal Template Converter Engine & Recipe System
  *
  * Automatically converts existing Next.js projects (built with shadcn/ui,
  * HeroUI, Tailwind CSS, or custom React components) into fully editable
@@ -11,6 +11,7 @@
 
 const fs = require('fs');
 const path = require('path');
+const { matchRecipeForProject, saveRecipeFromProject } = require('./recipe-engine.cjs');
 
 /**
  * 1. Detect CSS and Component Frameworks
@@ -218,6 +219,7 @@ function findSourceFiles(dir, fileList = []) {
       }
     }
   }
+
   return fileList;
 }
 
@@ -243,9 +245,9 @@ function toFieldKey(text, prefix = 'text', index = 1) {
 }
 
 /**
- * 5. Intelligent JSX Content Extractor and Marker Transformer
+ * 5. Intelligent JSX Content Extractor and Marker Transformer with Heuristic Recipes
  */
-function transformFileContent(filePath, pageKey, extractedData, backupDir, projectDir) {
+function transformFileContent(filePath, pageKey, extractedData, backupDir, projectDir, activeRecipe = null) {
   let code = fs.readFileSync(filePath, 'utf8');
 
   let fileModified = false;
@@ -268,7 +270,7 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     }
   }
 
-  // 2. Extract Headings: <h1> to <h6> (multiline-safe)
+  // 2. Headings: <h1> to <h6>
   const headingRegex = /<(h[1-6])(\s+[^>]*)?>([^<>{}]+)<\/\1>/g;
   code = code.replace(headingRegex, (match, tag, attrs = '', text) => {
     const trimmed = text.trim().replace(/\s+/g, ' ');
@@ -282,10 +284,10 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     elementCount++;
     fileModified = true;
 
-    return `<${tag} data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || "${trimmed}"}</${tag}>`;
+    return `<${tag} data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</${tag}>`;
   });
 
-  // 3. Extract Paragraphs: <p> (multiline-safe)
+  // 3. Paragraphs: <p>
   const pRegex = /<p(\s+[^>]*)?>([^<>{}]+)<\/p>/g;
   code = code.replace(pRegex, (match, attrs = '', text) => {
     const trimmed = text.trim().replace(/\s+/g, ' ');
@@ -299,10 +301,10 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     elementCount++;
     fileModified = true;
 
-    return `<p data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || "${trimmed}"}</p>`;
+    return `<p data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</p>`;
   });
 
-  // 4. Extract CardTitle & CardDescription (shadcn/ui & modern patterns, multiline-safe)
+  // 4. Card Titles & Descriptions (shadcn/ui & modern patterns)
   const cardTitleRegex = /<CardTitle(\s+[^>]*)?>([^<>{}]+)<\/CardTitle>/g;
   code = code.replace(cardTitleRegex, (match, attrs = '', text) => {
     const trimmed = text.trim().replace(/\s+/g, ' ');
@@ -316,7 +318,7 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     elementCount++;
     fileModified = true;
 
-    return `<CardTitle data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || "${trimmed}"}</CardTitle>`;
+    return `<CardTitle data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</CardTitle>`;
   });
 
   const cardDescRegex = /<CardDescription(\s+[^>]*)?>([^<>{}]+)<\/CardDescription>/g;
@@ -332,10 +334,10 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     elementCount++;
     fileModified = true;
 
-    return `<CardDescription data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || "${trimmed}"}</CardDescription>`;
+    return `<CardDescription data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</CardDescription>`;
   });
 
-  // 5. Extract Buttons & CTAs: <Button> and <button> (multiline-safe)
+  // 5. Buttons & CTAs: <Button> and <button>
   const btnRegex = /<(Button|button)(\s+[^>]*)?>([^<>{}]+)<\/\1>/g;
   code = code.replace(btnRegex, (match, tag, attrs = '', text) => {
     const trimmed = text.trim().replace(/\s+/g, ' ');
@@ -349,10 +351,10 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     elementCount++;
     fileModified = true;
 
-    return `<${tag} data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || "${trimmed}"}</${tag}>`;
+    return `<${tag} data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</${tag}>`;
   });
 
-  // 6. Extract Inputs & Search Bars: placeholder attribute
+  // 6. Inputs & Search Bars: placeholder attribute
   const inputRegex = /<(input|Input|textarea|Textarea)(\s+[^>]*?)placeholder="([^"]+)"([^>]*?)\/?>/g;
   code = code.replace(inputRegex, (match, tag, beforeAttrs = '', placeholder, afterAttrs = '') => {
     const trimmed = placeholder.trim();
@@ -366,10 +368,10 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     elementCount++;
     fileModified = true;
 
-    return `<${tag}${beforeAttrs}data-preview-field-path="${pageKey}.${fieldKey}" placeholder={siteData?.content?.${pageKey}?.${fieldKey} || "${trimmed}"}${afterAttrs}/>`;
+    return `<${tag}${beforeAttrs}data-preview-field-path="${pageKey}.${fieldKey}" placeholder={siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}${afterAttrs}/>`;
   });
 
-  // 7. Extract Image alt & src: <img src="..." alt="..." /> or <Image ... />
+  // 7. Extract Images: <img src="..." alt="..." /> or <Image ... />
   const imgRegex = /<(img|Image)(\s+[^>]*?)src="([^"]+)"([^>]*?)alt="([^"]+)"([^>]*?)\/?>/g;
   code = code.replace(imgRegex, (match, tag, preSrc = '', src, mid = '', alt, post = '') => {
     if (preSrc.includes('data-preview-field-path') || mid.includes('data-preview-field-path') || post.includes('data-preview-field-path')) {
@@ -383,7 +385,128 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     elementCount++;
     fileModified = true;
 
-    return `<${tag}${preSrc}data-preview-field-path="${pageKey}.${fieldKey}" src={siteData?.content?.${pageKey}?.${fieldKey} || "${src}"}${mid}alt="${alt}"${post}/>`;
+    return `<${tag}${preSrc}data-preview-field-path="${pageKey}.${fieldKey}" src={siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(src)}}${mid}alt="${alt}"${post}/>`;
+  });
+
+  // 8. Badges, Labels, Tags: <span ...>
+  const spanRegex = /<span(\s+[^>]*)?>([^<>{}]+)<\/span>/g;
+  code = code.replace(spanRegex, (match, attrs = '', text) => {
+    const trimmed = text.trim().replace(/\s+/g, ' ');
+    if (!trimmed || trimmed.length < 2 || attrs.includes('data-preview-field-path') || attrs.includes('data-preview-page-key')) {
+      return match;
+    }
+    if (/^[0-9]+$/.test(trimmed) && trimmed.length < 2) return match;
+    const rawKey = toFieldKey(trimmed, 'label', elementCount + 1);
+    const fieldKey = getUniqueKey(rawKey);
+
+    extractedData[fieldKey] = trimmed;
+    elementCount++;
+    fileModified = true;
+
+    return `<span data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</span>`;
+  });
+
+  // 9. Anchor Links: <a> (sensitive attribute handler)
+  const linkRegex = /<a(\s+[^>]*)?>([^<>{}]+)<\/a>/g;
+  code = code.replace(linkRegex, (match, attrs = '', text) => {
+    const trimmed = text.trim().replace(/\s+/g, ' ');
+    if (!trimmed || trimmed.length < 2 || attrs.includes('data-preview-field-path')) {
+      return match;
+    }
+    const rawKey = toFieldKey(trimmed, 'linkText', elementCount + 1);
+    const fieldKey = getUniqueKey(rawKey);
+
+    extractedData[fieldKey] = trimmed;
+    elementCount++;
+    fileModified = true;
+
+    return `<a data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</a>`;
+  });
+
+  // 10. List items: <li>
+  const liRegex = /<li(\s+[^>]*)?>([^<>{}]+)<\/li>/g;
+  code = code.replace(liRegex, (match, attrs = '', text) => {
+    const trimmed = text.trim().replace(/\s+/g, ' ');
+    if (!trimmed || trimmed.length < 2 || attrs.includes('data-preview-field-path')) {
+      return match;
+    }
+    const rawKey = toFieldKey(trimmed, 'item', elementCount + 1);
+    const fieldKey = getUniqueKey(rawKey);
+
+    extractedData[fieldKey] = trimmed;
+    elementCount++;
+    fileModified = true;
+
+    return `<li data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</li>`;
+  });
+
+  // 11. UI Badges: <Badge> or <badge>
+  const badgeRegex = /<(Badge|badge)(\s+[^>]*)?>([^<>{}]+)<\/\1>/g;
+  code = code.replace(badgeRegex, (match, tag, attrs = '', text) => {
+    const trimmed = text.trim().replace(/\s+/g, ' ');
+    if (!trimmed || trimmed.length < 2 || attrs.includes('data-preview-field-path')) {
+      return match;
+    }
+    const rawKey = toFieldKey(trimmed, 'badge', elementCount + 1);
+    const fieldKey = getUniqueKey(rawKey);
+
+    extractedData[fieldKey] = trimmed;
+    elementCount++;
+    fileModified = true;
+
+    return `<${tag} data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</${tag}>`;
+  });
+
+  // 12. UI Typography: Heading, Title, Subtitle, Description, Typography
+  const typoRegex = /<(Heading|Title|Subtitle|Description|Typography)(\s+[^>]*)?>([^<>{}]+)<\/\1>/g;
+  code = code.replace(typoRegex, (match, tag, attrs = '', text) => {
+    const trimmed = text.trim().replace(/\s+/g, ' ');
+    if (!trimmed || trimmed.length < 2 || attrs.includes('data-preview-field-path')) {
+      return match;
+    }
+    const rawKey = toFieldKey(trimmed, tag.toLowerCase(), elementCount + 1);
+    const fieldKey = getUniqueKey(rawKey);
+
+    extractedData[fieldKey] = trimmed;
+    elementCount++;
+    fileModified = true;
+
+    return `<${tag} data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</${tag}>`;
+  });
+
+  // 13. Styled text in <div> (e.g. shadow text, banners, overlays, stats, prices)
+  const divTextRegex = /<div(\s+[^>]*?class(?:Name)?="[^"]*(?:bg|shadow|watermark|banner|overlay|hero|title|heading|text|label|sub|desc|caption|badge|price|quote|stat|tag|brand|lead)[^"]*"[^>]*)>([^<>{}]+)<\/div>/gi;
+  code = code.replace(divTextRegex, (match, attrs = '', text) => {
+    const trimmed = text.trim().replace(/\s+/g, ' ');
+    if (!trimmed || trimmed.length < 2 || attrs.includes('data-preview-field-path')) {
+      return match;
+    }
+    const rawKey = toFieldKey(trimmed, 'divText', elementCount + 1);
+    const fieldKey = getUniqueKey(rawKey);
+
+    extractedData[fieldKey] = trimmed;
+    elementCount++;
+    fileModified = true;
+
+    return `<div data-preview-field-path="${pageKey}.${fieldKey}"${attrs}>{siteData?.content?.${pageKey}?.${fieldKey} || ${JSON.stringify(trimmed)}}</div>`;
+  });
+
+  // 14. Sensitive Element Guardian: Auto-annotate non-bound <a> and <img> tags with data-preview-static
+  // Ensures 100% compliance with Fivora strict mode so unannotated links/images don't fail certification
+  code = code.replace(/<a(\s+[^>]*?href="[^"]*"[^>]*?)>/gi, (match, attrs) => {
+    if (attrs.includes('data-preview-field-path') || attrs.includes('data-preview-static')) {
+      return match;
+    }
+    fileModified = true;
+    return `<a${attrs} data-preview-static="navigation-link">`;
+  });
+
+  code = code.replace(/<img(\s+[^>]*?src="[^"]*"[^>]*?)>/gi, (match, attrs) => {
+    if (attrs.includes('data-preview-field-path') || attrs.includes('data-preview-static')) {
+      return match;
+    }
+    fileModified = true;
+    return `<img${attrs} data-preview-static="decorative-image">`;
   });
 
   // If file was modified, ensure useSiteData and client directives are added
@@ -391,7 +514,6 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     backupFile(filePath, projectDir, backupDir);
 
     // Next.js safety: A client component cannot export metadata.
-    // If metadata was exported, preserve it as a local constant so Next.js build passes.
     if (code.includes('export const metadata') || code.includes('export let metadata')) {
       code = code.replace(/export\s+(const|let)\s+metadata/g, '// Metadata preserved for static export\n$1 metadata');
     }
@@ -412,22 +534,18 @@ function transformFileContent(filePath, pageKey, extractedData, backupDir, proje
     // Add const { siteData } = useSiteData(); inside the primary component function
     if (!code.includes('useSiteData()')) {
       let injected = false;
-      // Match export default function Name(...) {
       if (/(export\s+default\s+function\s*[A-Za-z0-9_]*\s*\([^)]*\)\s*\{)/.test(code)) {
         code = code.replace(/(export\s+default\s+function\s*[A-Za-z0-9_]*\s*\([^)]*\)\s*\{)/, `$1\n  const { siteData } = useSiteData();`);
         injected = true;
       }
-      // Match export default (...) => {
       if (!injected && /(export\s+default\s*(?:async\s*)?\([^)]*\)\s*=>\s*\{)/.test(code)) {
         code = code.replace(/(export\s+default\s*(?:async\s*)?\([^)]*\)\s*=>\s*\{)/, `$1\n  const { siteData } = useSiteData();`);
         injected = true;
       }
-      // Match const ComponentName = (...) => {
       if (!injected && /(const\s+[A-Za-z0-9_]+\s*=\s*(?:async\s*)?\([^)]*\)\s*=>\s*\{)/.test(code)) {
         code = code.replace(/(const\s+[A-Za-z0-9_]+\s*=\s*(?:async\s*)?\([^)]*\)\s*=>\s*\{)/, `$1\n  const { siteData } = useSiteData();`);
         injected = true;
       }
-      // Match function ComponentName(...) {
       if (!injected && /(function\s+[A-Za-z0-9_]+\s*\([^)]*\)\s*\{)/.test(code)) {
         code = code.replace(/(function\s+[A-Za-z0-9_]+\s*\([^)]*\)\s*\{)/, `$1\n  const { siteData } = useSiteData();`);
         injected = true;
@@ -465,20 +583,27 @@ function harmonizeUiComponents(projectDir, detection, backupDir) {
 }
 
 /**
- * 7. Generate Comprehensive site-data.json and fivora-template.json
+ * 7. Generate Comprehensive site-data.json and fivora-template.json with Recipe Defaults
  */
-function generateTemplateData(projectDir, projectName, detectedPages, extractedByPage) {
+function generateTemplateData(projectDir, projectName, detectedPages, extractedByPage, activeRecipe = null) {
   const manifestPath = path.join(projectDir, 'fivora-template.json');
   const siteDataPath = path.join(projectDir, 'src', 'data', 'site-data.json');
   fs.mkdirSync(path.dirname(siteDataPath), { recursive: true });
 
+  const navLabels = {};
+  for (const p of detectedPages) {
+    navLabels[p.id] = p.label || p.id;
+  }
+
+  // Base content
   const content = {
     common: {
       websiteTitle: projectName,
       shortDescription: `A high-converting storefront built for the Fivora platform.`,
       logoUrl: '/fivora-logo.png',
-      headerCtaLabel: 'Contact Us',
-      copyright: `${projectName}. All rights reserved.`,
+      headerCtaLabel: 'Shop Now',
+      copyright: `© ${new Date().getFullYear()} ${projectName}. All rights reserved.`,
+      navLabels: navLabels,
       business: {
         phone: '+1 (555) 482-9012',
         whatsapp: '15554829012',
@@ -498,39 +623,84 @@ function generateTemplateData(projectDir, projectName, detectedPages, extractedB
         { key: 'shortDescription', type: 'textarea', label: 'Short Description' },
         { key: 'logoUrl', type: 'image', label: 'Website Logo' },
         { key: 'headerCtaLabel', type: 'text', label: 'Header CTA Button' },
+        {
+          key: 'navLabels',
+          type: 'object',
+          label: 'Navigation Labels',
+          fields: detectedPages.map((p) => ({
+            key: p.id,
+            type: 'text',
+            label: `${p.label || p.id} Link`,
+          })),
+        },
+        {
+          key: 'business',
+          type: 'object',
+          label: 'Business Information',
+          fields: [
+            { key: 'phone', type: 'tel', label: 'Phone Number' },
+            { key: 'whatsapp', type: 'text', label: 'WhatsApp Number' },
+            { key: 'email', type: 'email', label: 'Contact Email' },
+          ],
+        },
+        { key: 'copyright', type: 'text', label: 'Copyright' },
       ],
     },
   ];
 
+  // If active recipe has defined sections, seed them
+  if (activeRecipe && Array.isArray(activeRecipe.sections)) {
+    for (const sec of activeRecipe.sections) {
+      if (sec.id === 'common') continue;
+      editorSections.push(sec);
+    }
+  }
+
+  // Seed recipe defaults if available
+  if (activeRecipe && activeRecipe.defaults) {
+    for (const [secKey, secVal] of Object.entries(activeRecipe.defaults)) {
+      if (!content[secKey]) content[secKey] = {};
+      Object.assign(content[secKey], secVal);
+    }
+  }
+
+  // Merge dynamically extracted fields
   for (const page of detectedPages) {
     const pageKey = page.id;
     const pageFields = extractedByPage[pageKey] || {};
 
-    content[pageKey] = {
-      ...(content[pageKey] || {}),
-      ...pageFields,
-    };
+    if (!content[pageKey]) content[pageKey] = {};
+    Object.assign(content[pageKey], pageFields);
+
+    // Check if section already exists in editorSections
+    let existingSection = editorSections.find((s) => s.id === pageKey);
+    const newFieldDefs = [];
 
-    const sectionFields = Object.entries(pageFields).map(([key, val]) => {
+    for (const [key, val] of Object.entries(pageFields)) {
+      if (existingSection && existingSection.fields.some((f) => f.key === key)) {
+        continue;
+      }
       const isImg = key.toLowerCase().includes('image') || (typeof val === 'string' && /\.(jpg|png|webp|svg)$/i.test(val));
       const isLong = typeof val === 'string' && val.length > 60;
-      return {
+      newFieldDefs.push({
         key: key,
         type: isImg ? 'image' : isLong ? 'textarea' : 'text',
         label: key
           .replace(/([A-Z])/g, ' $1')
           .replace(/[-_]/g, ' ')
           .replace(/\b\w/g, (c) => c.toUpperCase()),
-      };
-    });
+      });
+    }
 
-    if (sectionFields.length > 0) {
+    if (existingSection) {
+      existingSection.fields.push(...newFieldDefs);
+    } else if (newFieldDefs.length > 0) {
       editorSections.push({
         id: pageKey,
         path: pageKey,
         type: 'object',
         label: `${page.label || pageKey} Content`,
-        fields: sectionFields,
+        fields: newFieldDefs,
       });
     }
   }
@@ -566,7 +736,7 @@ function generateTemplateData(projectDir, projectName, detectedPages, extractedB
     visualEditing: {
       contractVersion: 1,
       mode: 'strict',
-      controlOnlyPaths: [],
+      controlOnlyPaths: ['common.brandUrl'],
     },
     siteDataFile: 'src/data/site-data.json',
     outputDirectory: 'out',
@@ -596,6 +766,14 @@ function runUniversalTemplateConversion(projectDir, projectName, detectedPages)
     console.log(`  \x1b[36m✔ Detected:\x1b[0m ${framework}`);
   }
 
+  const allSourceFiles = findSourceFiles(projectDir);
+
+  // Match optimal recipe (or custom saved fixes)
+  const matchedRecipe = matchRecipeForProject(projectDir, detection.pkg, allSourceFiles);
+  if (matchedRecipe) {
+    console.log(`  \x1b[35m🎯 Matched Recipe:\x1b[0m ${matchedRecipe.label} (${matchedRecipe.name})`);
+  }
+
   const backupDir = createBackup(projectDir);
   console.log(`\n🛡️  Created safe backup at \x1b[90m${path.basename(backupDir)}\x1b[0m`);
 
@@ -610,7 +788,6 @@ function runUniversalTemplateConversion(projectDir, projectName, detectedPages)
 
   // 2. Scan & Transform Pages and Components
   console.log(`\n⚡ Scanning & instrumenting pages with visual editing markers...`);
-  const allSourceFiles = findSourceFiles(projectDir);
   const extractedByPage = {};
   let totalTransformedElements = 0;
   let transformedFilesCount = 0;
@@ -620,7 +797,6 @@ function runUniversalTemplateConversion(projectDir, projectName, detectedPages)
   }
 
   for (const file of allSourceFiles) {
-    // Determine page association
     let pageKey = 'home';
     for (const page of detectedPages) {
       if (page.id !== 'home' && file.toLowerCase().includes(page.id)) {
@@ -631,7 +807,7 @@ function runUniversalTemplateConversion(projectDir, projectName, detectedPages)
 
     if (!extractedByPage[pageKey]) extractedByPage[pageKey] = {};
 
-    const res = transformFileContent(file, pageKey, extractedByPage[pageKey], backupDir, projectDir);
+    const res = transformFileContent(file, pageKey, extractedByPage[pageKey], backupDir, projectDir, matchedRecipe);
     if (res.fileModified) {
       transformedFilesCount++;
       totalTransformedElements += res.elementCount;
@@ -648,13 +824,14 @@ function runUniversalTemplateConversion(projectDir, projectName, detectedPages)
 
   // 4. Generate centralized data and synchronized manifest
   console.log(`\n📦 Generating centralized site-data.json and Fivora Spec v2 contract...`);
-  const dataRes = generateTemplateData(projectDir, projectName, detectedPages, extractedByPage);
+  const dataRes = generateTemplateData(projectDir, projectName, detectedPages, extractedByPage, matchedRecipe);
   console.log(`  \x1b[32m✔ Generated\x1b[0m ${path.relative(projectDir, dataRes.siteDataPath)}`);
   console.log(`  \x1b[32m✔ Generated\x1b[0m ${path.relative(projectDir, dataRes.manifestPath)} (\x1b[36m${dataRes.totalFields}\x1b[0m visual fields mapped)`);
 
   return {
     detection,
     backupDir,
+    matchedRecipe,
     transformedFilesCount,
     totalTransformedElements,
     totalFields: dataRes.totalFields,
@@ -669,4 +846,5 @@ module.exports = {
   harmonizeUiComponents,
   generateTemplateData,
   runUniversalTemplateConversion,
+  saveRecipeFromProject,
 };