@deneb-ui/cli 2.0.49 → 2.0.51

package/bin/index.js

@@ -233,8 +233,15 @@ function detectPages(projectDir) {
     }
   }
 
-  const hasContact = pages.some((p) => p.id === 'contact' || p.route === '/contact');
-  if (!hasContact) {
+  const contactExistsOnDisk = candidateDirs.some((cDir) =>
+    fs.existsSync(path.join(cDir, 'contact.tsx')) ||
+    fs.existsSync(path.join(cDir, 'contact.jsx')) ||
+    fs.existsSync(path.join(cDir, 'contact.js')) ||
+    fs.existsSync(path.join(cDir, 'contact', 'page.tsx')) ||
+    fs.existsSync(path.join(cDir, 'contact', 'page.jsx')) ||
+    fs.existsSync(path.join(cDir, 'contact', 'page.js'))
+  );
+  if (contactExistsOnDisk && !pages.some((p) => p.id === 'contact' || p.route === '/contact')) {
     pages.push({ id: 'contact', label: 'Contact', route: '/contact', required: true });
   }
 
@@ -597,7 +604,7 @@ function getComponentRegistry(importPkg) {
   };
 }
 
-function initProject(targetInput, options = {}) {
+async function initProject(targetInput, options = {}) {
   const targetDir = path.resolve(process.cwd(), targetInput || '.');
   const pkgPath = path.join(targetDir, 'package.json');
 
@@ -645,7 +652,7 @@ function initProject(targetInput, options = {}) {
       conversionRes = runUniversalTemplateConversion(targetDir, projectName, detectedPages, options);
     } else {
       const { runDenebArc } = require('../src/arc/index.cjs');
-      conversionRes = runDenebArc(targetDir, projectName, {
+      conversionRes = await runDenebArc(targetDir, projectName, {
         ...options,
         detectedPages,
       });
@@ -1048,7 +1055,10 @@ if (command === 'init') {
       targetInput = arg;
     }
   }
-  initProject(targetInput, { recipeName, dryRun, explain, legacy, telemetry, aiEnabled, aiDryRun });
+  initProject(targetInput, { recipeName, dryRun, explain, legacy, telemetry, aiEnabled, aiDryRun }).catch((err) => {
+    console.error(`\x1b[31mError:\x1b[0m ${err.message}`);
+    process.exit(1);
+  });
 } else if (command === 'create') {
   createTemplate(commandArgs[0]);
 } else if (command === 'add') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/cli",
-  "version": "2.0.49",
+  "version": "2.0.51",
   "description": "Official DENEB CLI — scaffold, convert, validate, and package Fivora-ready storefront templates.",
   "bin": {
     "deneb": "bin/index.js",
@@ -49,7 +49,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/parser": "^7.28.0",
-    "@deneb-ui/core": "^2.0.49",
+    "@deneb-ui/core": "^2.0.51",
     "@octokit/rest": "^22.0.1",
     "adm-zip": "^0.6.0",
     "dotenv": "^17.4.2",

package/src/arc/__tests__/arc.test.cjs

@@ -16,6 +16,8 @@ const { runDenebArc } = require('../index.cjs');
 const { parseSource } = require('../ast.cjs');
 const { loadFingerprintBoost } = require('../learning.cjs');
 const { classifyActionIntent } = require('../adapters.cjs');
+const { validateGeneratedCode } = require('../ai-agent.cjs');
+const { auditRuntimeIntegrity, healRuntimeIntegrity, runAiEvaluatorPipeline } = require('../ai-evaluator.cjs');
 
 test('field-paths recognizes list action CTA keys', () => {
   assert.equal(isListActionCtaKey('preOrderCta'), true);
@@ -727,7 +729,12 @@ test('classifyActionIntent identifies action keywords and assigns correct fallba
   assert.equal(shop?.defaultUrl, '/shop');
   assert.equal(shop?.external, false);
 
-  const nonAction = classifyActionIntent('Submit Form', null);
+  const formSubmit = classifyActionIntent('Submit Form', null);
+  assert.equal(formSubmit?.action, 'form-submit');
+  assert.equal(formSubmit?.defaultUrl, 'https://wa.me/1234567890');
+  assert.equal(formSubmit?.external, true);
+
+  const nonAction = classifyActionIntent('Random Content Text', null);
   assert.equal(nonAction, null);
 });
 
@@ -875,3 +882,460 @@ export function ActionPage() {
   assert.deepEqual(errors, []);
 });
 
+test('parseSource parses TypeScript interface declarations without experimental syntax errors', () => {
+  const tsCode = `
+import React from 'react';
+import { EditableText } from './EditableText';
+
+export interface EditableTradeinSectionProps {
+  itemPath: string;
+  title: string;
+}
+
+export function EditableTradeinSection({ itemPath, title }: EditableTradeinSectionProps) {
+  return (
+    <div data-preview-item-path={itemPath}>
+      <EditableText as="h2" id={\`\${itemPath}.title\`} data-preview-field-path={\`\${itemPath}.title\`} defaultValue={title} />
+    </div>
+  );
+}
+`;
+  assert.doesNotThrow(() => {
+    parseSource(tsCode, 'EditableTradeinSection.tsx');
+  });
+});
+
+test('validateGeneratedCode catches data-preview-field-path placed on broad <div> containers', () => {
+  const invalidCode = `
+import React from 'react';
+import { EditableText } from './EditableText';
+
+export interface EditableCardProps {
+  itemPath: string;
+}
+
+export function EditableCard({ itemPath }: EditableCardProps) {
+  return (
+    <div data-preview-item-path={itemPath}>
+      <div data-preview-field-path={\`\${itemPath}.content\`}>Some broad content</div>
+    </div>
+  );
+}
+`;
+  const res = validateGeneratedCode(invalidCode, 'EditableCard.tsx');
+  assert.equal(res.passed, false);
+  assert.ok(res.errors.some((e) => e.includes('cannot be placed on broad <div> content containers')));
+});
+
+test('AST transformer wraps literal text inside <div> with <span> instead of placing field path on <div>', () => {
+  const code = `
+export function Card() {
+  return (
+    <div className="card">
+      <div className="title-row">In-Store VIP Lab</div>
+    </div>
+  );
+}
+`;
+  const profile = {
+    root: os.tmpdir(),
+    framework: 'nextjs',
+    router: 'next-app',
+    language: 'typescript',
+    cssSystems: ['tailwind'],
+    hasSrc: true,
+    aliasMap: { '@/*': ['src/*'] },
+  };
+
+  const analysis = analyzeFile({
+    code,
+    relativeFile: 'src/components/Card.tsx',
+    profile,
+    graph: { sharedFiles: [] },
+    ownerScope: 'home',
+    componentMeta: { name: 'Card', role: 'card' },
+  });
+  analysis.code = code;
+  analysis.relativeFile = 'src/components/Card.tsx';
+
+  const plan = planTransformations({ profile, analyses: [analysis] });
+  const res = applyFilePlan(plan.files[0], profile);
+  assert.equal(res.changed, true);
+  // The outer <div> must NOT have data-preview-field-path
+  assert.doesNotMatch(res.code, /<div[^>]*data-preview-field-path/);
+  // The inner text must be wrapped in a <span> with data-preview-field-path
+  assert.match(res.code, /<span[^>]*data-preview-field-path=/);
+});
+
+test('AI Evaluator audits and heals RSC duplicate SiteDataProvider in layout.tsx', async () => {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'deneb-eval-'));
+  const appDir = path.join(tmp, 'src', 'app');
+  fs.mkdirSync(appDir, { recursive: true });
+
+  const brokenLayout = `
+import { SiteDataProvider } from '@deneb-ui/ui';
+import { Providers } from '@/components/providers';
+import initialSiteData from '@/data/site-data.json';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>
+          <SiteDataProvider initialSiteData={initialSiteData}>
+            {children}
+          </SiteDataProvider>
+        </Providers>
+      </body>
+    </html>
+  );
+}
+`;
+  fs.writeFileSync(path.join(appDir, 'layout.tsx'), brokenLayout, 'utf8');
+
+  const profile = {
+    root: tmp,
+    framework: 'nextjs',
+    router: 'next-app',
+    appDir: 'src/app',
+    language: 'typescript',
+    jsxFiles: ['src/app/layout.tsx'],
+  };
+
+  const issues = auditRuntimeIntegrity(tmp, profile);
+  assert.equal(issues.length, 1);
+  assert.equal(issues[0].type, 'rsc-duplicate-provider');
+
+  const healRes = await healRuntimeIntegrity(tmp, profile, issues);
+  assert.equal(healRes.healedCount, 1);
+  assert.equal(healRes.remainingCount, 0);
+
+  const fixed = fs.readFileSync(path.join(appDir, 'layout.tsx'), 'utf8');
+  assert.doesNotMatch(fixed, /<SiteDataProvider/);
+  assert.match(fixed, /<Providers>\s*\{children\}\s*<\/Providers>/);
+
+  fs.rmSync(tmp, { recursive: true, force: true });
+});
+
+test('AI Evaluator detects missing component exports in page.tsx imports', () => {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'deneb-eval-exp-'));
+  const appDir = path.join(tmp, 'src', 'app');
+  const compDir = path.join(tmp, 'src', 'components');
+  fs.mkdirSync(appDir, { recursive: true });
+  fs.mkdirSync(compDir, { recursive: true });
+
+  fs.writeFileSync(
+    path.join(appDir, 'page.tsx'),
+    `import { ProductList, MissingHero } from '@/components/Widgets';\nexport default function Page() { return <div><ProductList /></div>; }`,
+    'utf8'
+  );
+
+  fs.writeFileSync(
+    path.join(compDir, 'Widgets.tsx'),
+    `export function ProductList() { return <div>Products</div>; }`,
+    'utf8'
+  );
+
+  const profile = {
+    root: tmp,
+    framework: 'nextjs',
+    router: 'next-app',
+    appDir: 'src/app',
+    language: 'typescript',
+    jsxFiles: ['src/app/page.tsx', 'src/components/Widgets.tsx'],
+  };
+
+  const issues = auditRuntimeIntegrity(tmp, profile);
+  assert.equal(issues.length, 1);
+  assert.equal(issues[0].type, 'missing-named-export');
+  assert.equal(issues[0].meta?.componentName, 'MissingHero');
+
+  fs.rmSync(tmp, { recursive: true, force: true });
+});
+
+test('AI Evaluator runAiEvaluatorPipeline passes on clean valid project', async () => {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'deneb-eval-clean-'));
+  const appDir = path.join(tmp, 'src', 'app');
+  fs.mkdirSync(appDir, { recursive: true });
+
+  fs.writeFileSync(
+    path.join(appDir, 'layout.tsx'),
+    `import { Providers } from '@/components/providers';\nexport default function RootLayout({ children }: { children: React.ReactNode }) { return <html><body><Providers>{children}</Providers></body></html>; }`,
+    'utf8'
+  );
+
+  const profile = {
+    root: tmp,
+    framework: 'nextjs',
+    router: 'next-app',
+    appDir: 'src/app',
+    language: 'typescript',
+    jsxFiles: ['src/app/layout.tsx'],
+  };
+
+  const res = await runAiEvaluatorPipeline(tmp, profile);
+  assert.equal(res.passed, true);
+  assert.equal(res.issuesFound, 0);
+
+  fs.rmSync(tmp, { recursive: true, force: true });
+});
+
+test('AI Evaluator audits and heals missing global CSS stylesheet import in layout.tsx', async () => {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'deneb-eval-css-'));
+  const appDir = path.join(tmp, 'src', 'app');
+  fs.mkdirSync(appDir, { recursive: true });
+  fs.writeFileSync(path.join(appDir, 'globals.css'), '@import "tailwindcss";', 'utf8');
+
+  const unstyledLayout = `
+import { Providers } from '@/components/providers';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return <html><body><Providers>{children}</Providers></body></html>;
+}
+`;
+  fs.writeFileSync(path.join(appDir, 'layout.tsx'), unstyledLayout, 'utf8');
+
+  const profile = {
+    root: tmp,
+    framework: 'nextjs',
+    router: 'next-app',
+    appDir: 'src/app',
+    language: 'typescript',
+    jsxFiles: ['src/app/layout.tsx'],
+  };
+
+  const issues = auditRuntimeIntegrity(tmp, profile);
+  assert.equal(issues.length, 1);
+  assert.equal(issues[0].type, 'missing-global-css-import');
+
+  const healRes = await healRuntimeIntegrity(tmp, profile, issues);
+  assert.equal(healRes.healedCount, 1);
+
+  const fixed = fs.readFileSync(path.join(appDir, 'layout.tsx'), 'utf8');
+  assert.match(fixed, /import\s+['"]\.\/globals\.css['"]/);
+
+  fs.rmSync(tmp, { recursive: true, force: true });
+});
+
+test('collections with nested arrays, objects, and TS as const convert to editable list contracts', () => {
+  const code = `
+const phones = [
+  {
+    name: 'iPhone 16 Pro Max',
+    brand: 'Apple',
+    subtitle: 'Grade 5 Titanium' as const,
+    price: 1199,
+    storageOptions: ['256GB', '512GB', '1TB'],
+    colors: [{ name: 'Desert Titanium', hex: '#bba795' }],
+  },
+  {
+    name: 'Galaxy S25 Ultra',
+    brand: 'Samsung',
+    subtitle: 'Armor Titanium' as const,
+    price: 1299,
+    storageOptions: ['256GB', '512GB'],
+    colors: [{ name: 'Titanium Gray', hex: '#5e6166' }],
+  },
+];
+
+export function FeaturedPhones() {
+  return (
+    <div className="phones-grid">
+      {phones.map((phone, idx) => (
+        <div key={phone.name} className="phone-card">
+          <h4>{phone.brand}</h4>
+          <h3>{phone.name}</h3>
+          <p>{phone.subtitle}</p>
+          <span>Rs {phone.price}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+`;
+
+  const profile = { framework: 'nextjs', router: 'next-app', appDir: 'src/app', language: 'typescript' };
+  const analysis = analyzeFile({
+    code,
+    relativeFile: 'src/components/FeaturedPhones.tsx',
+    profile,
+    graph: { sharedFiles: [] },
+    ownerScope: 'home',
+    componentMeta: { name: 'FeaturedPhones', role: 'shop' },
+  });
+
+  const collectionCandidate = analysis.candidates.find((c) => c.kind === 'collection');
+  assert.ok(collectionCandidate, 'collection with nested arrays and TS as const must be detected');
+  assert.equal(collectionCandidate.extra.objectItems, true);
+  assert.ok(collectionCandidate.confidence >= 0.8, 'collection must have high confidence');
+
+  const plan = planTransformations({
+    profile,
+    analyses: [analysis],
+  });
+
+  assert.equal(plan.files.length, 1);
+  const collectionTransform = plan.files[0].transformations.find((t) => t.fieldType === 'list');
+  assert.ok(collectionTransform, 'collection must be planned as list field');
+  assert.equal(collectionTransform.listField, 'home.phones');
+  assert.ok(collectionTransform.itemFields.some((f) => f.key === 'name'));
+  assert.ok(collectionTransform.itemFields.some((f) => f.key === 'price'));
+});
+
+test('proceed to order button is recognized as WhatsApp order split-action contract', () => {
+  const code = `
+export function CartDrawer() {
+  return (
+    <div className="cart-footer">
+      <button type="button" className="btn-primary w-full py-4 font-bold">
+        Proceed to Order · RS 1299
+      </button>
+    </div>
+  );
+}
+`;
+
+  const profile = { framework: 'nextjs', router: 'next-app', appDir: 'src/app', language: 'typescript' };
+  const analysis = analyzeFile({
+    code,
+    relativeFile: 'src/components/CartDrawer.tsx',
+    profile,
+    graph: { sharedFiles: [] },
+    ownerScope: 'home',
+    componentMeta: { name: 'CartDrawer', role: 'cart' },
+  });
+
+  const actionCandidate = analysis.candidates.find((c) => c.kind === 'split-action-contract');
+  assert.ok(actionCandidate, 'proceed to order must be recognized as split-action-contract');
+  assert.equal(actionCandidate.extra.action, 'whatsapp');
+
+  const plan = planTransformations({
+    profile,
+    analyses: [analysis],
+  });
+
+  const filePlan = plan.files[0];
+  const splitAction = filePlan.transformations.find((t) => t.operation === 'split-action-contract');
+  assert.ok(splitAction, 'split action must be planned');
+  assert.match(splitAction.urlField, /whatsapp/i);
+});
+
+test('classifyActionIntent recognizes form submit action keywords', () => {
+  const submit = classifyActionIntent('Submit', null);
+  assert.equal(submit?.action, 'form-submit');
+  assert.equal(submit?.defaultUrl, 'https://wa.me/1234567890');
+
+  const sendMessage = classifyActionIntent('Send Message', null);
+  assert.equal(sendMessage?.action, 'form-submit');
+
+  const confirmBooking = classifyActionIntent('Confirm Booking', null);
+  assert.equal(confirmBooking?.action, 'form-submit');
+
+  const getQuote = classifyActionIntent('Get Quote', null);
+  assert.equal(getQuote?.action, 'form-submit');
+});
+
+test('semantic engine recognizes form inputs, labels, placeholders, and form-submit-action buttons', () => {
+  const code = `
+export function BookingForm() {
+  return (
+    <form className="booking-form">
+      <h2>Book Appointment</h2>
+      <label>Full Name</label>
+      <input type="text" placeholder="Enter your full name" />
+      <label>Email Address</label>
+      <input type="email" placeholder="you@example.com" />
+      <label>Special Instructions</label>
+      <textarea placeholder="Describe your request..." />
+      <button type="submit">Confirm Booking</button>
+    </form>
+  );
+}
+`;
+  const profile = {
+    root: os.tmpdir(),
+    framework: 'nextjs',
+    router: 'next-app',
+    language: 'typescript',
+    cssSystems: ['tailwind'],
+    hasSrc: true,
+  };
+
+  const analysis = analyzeFile({
+    code,
+    relativeFile: 'src/components/BookingForm.tsx',
+    profile,
+    graph: { sharedFiles: [] },
+    ownerScope: 'home',
+    componentMeta: { name: 'BookingForm', role: 'form' },
+  });
+
+  const placeholders = analysis.candidates.filter((c) => c.kind === 'placeholder');
+  assert.equal(placeholders.length, 3, 'expected 3 placeholder candidates');
+
+  const labels = analysis.candidates.filter((c) => c.kind === 'text' && c.tag === 'label');
+  assert.equal(labels.length, 3, 'expected 3 label candidates');
+
+  const submitAction = analysis.candidates.find((c) => c.kind === 'form-submit-action');
+  assert.ok(submitAction, 'expected form-submit-action candidate');
+  assert.equal(submitAction.label, 'Confirm Booking');
+  assert.equal(submitAction.extra.action, 'form-submit');
+  assert.equal(submitAction.extra.insideForm, true);
+});
+
+test('planner and transformer make entire form editable with submit button and WhatsApp URL binding', () => {
+  const code = `
+import React from 'react';
+
+export function ContactSection() {
+  return (
+    <form className="contact-form">
+      <label>Your Name</label>
+      <input type="text" placeholder="John Doe" />
+      <button type="submit">Send Message</button>
+    </form>
+  );
+}
+`;
+  const profile = {
+    root: os.tmpdir(),
+    framework: 'nextjs',
+    router: 'next-app',
+    language: 'typescript',
+    cssSystems: ['tailwind'],
+    hasSrc: true,
+    aliasMap: { '@/*': ['src/*'] },
+  };
+
+  const analysis = analyzeFile({
+    code,
+    relativeFile: 'src/components/ContactSection.tsx',
+    profile,
+    graph: { sharedFiles: [] },
+    ownerScope: 'home',
+    componentMeta: { name: 'ContactSection', role: 'contact' },
+  });
+  analysis.code = code;
+  analysis.relativeFile = 'src/components/ContactSection.tsx';
+
+  const plan = planTransformations({
+    profile,
+    analyses: [analysis],
+  });
+
+  const filePlan = plan.files[0];
+  const formSubmit = filePlan.transformations.find((t) => t.operation === 'form-submit-action');
+  assert.ok(formSubmit, 'form-submit-action must be planned');
+  assert.match(formSubmit.urlField, /formWhatsappUrl/i);
+  assert.match(formSubmit.labelField, /formSubmitLabel/i);
+
+  const transformed = applyFilePlan(filePlan, profile);
+  assert.ok(transformed.changed, 'file must be changed');
+  assert.match(transformed.code, /data-preview-field-path/);
+  assert.match(transformed.code, /formSubmitLabel/);
+  assert.match(transformed.code, /formWhatsappUrl/);
+  assert.match(transformed.code, /type="submit"/);
+  assert.match(transformed.code, /hidden/);
+});
+
+

package/src/arc/adapters.cjs

@@ -23,6 +23,8 @@ const HEADING_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'Heading', 'Ti
 const TEXT_TAGS = new Set(['p', 'span', 'li', 'blockquote', 'figcaption', 'label', 'CardDescription', 'Description', 'Subtitle', 'Typography', 'Text', 'Badge', 'badge']);
 const ACTION_TAGS = new Set(['a', 'Link', 'NavLink', 'Button', 'button', 'IconButton', 'NavbarBrand']);
 const IMAGE_TAGS = new Set(['img', 'Image', 'Img', 'BackgroundImage']);
+const FORM_INPUT_TAGS = new Set(['input', 'Input', 'textarea', 'Textarea', 'select', 'Select']);
+const FORM_CONTAINER_TAGS = new Set(['form', 'Form']);
 
 const shadcn = createAdapter('shadcn', {
   detect: (project) => detectFromProfile(project, 'shadcn') || project.shadcn,
@@ -106,6 +108,9 @@ const deneb = createAdapter('deneb', {
     Boolean(project.dependencies && project.dependencies['@deneb-ui/ui']),
   recognizeNode(node) {
     const name = getJsxName(node);
+    if (['EditableContactForm', 'ContactForm'].includes(name)) {
+      return { library: 'deneb', kind: 'form', tag: name };
+    }
     if (['EditableGoogleFeedback', 'EditableCustomerReviews', 'CustomerReviews', 'GoogleFeedback'].includes(name)) {
       return { library: 'deneb', kind: 'feedback', tag: name };
     }
@@ -192,8 +197,24 @@ function classifyActionIntent(text, href) {
   const t = String(text || '').trim().toLowerCase();
   const h = String(href || '').trim().toLowerCase();
 
+  // 0. Form Submit / WhatsApp Form Action
+  if (
+    /^(submit|send\s*message|send\s*inquiry|confirm\s*booking|place\s*order|book\s*now|confirm|get\s*quote|request\s*quote|send\s*request|schedule|register|sign\s*up|subscribe|apply|enroll)$/i.test(t) ||
+    /\b(?:send\s*message|confirm\s*booking|submit\s*form|submit\s*inquiry|send\s*inquiry|request\s*quote|get\s*quote|send\s*request)\b/i.test(t)
+  ) {
+    return {
+      action: 'form-submit',
+      defaultUrl: /^https?:\/\//i.test(h) && !h.includes('#') ? href : 'https://wa.me/1234567890',
+      external: true,
+    };
+  }
+
   // 1. WhatsApp
-  if (/wa\.me|whatsapp/i.test(h) || /\b(?:whatsapp|wa\.me)\b/i.test(t) || /order on whatsapp|chat on whatsapp|message on whatsapp/i.test(t)) {
+  if (
+    /wa\.me|whatsapp/i.test(h) ||
+    /\b(?:whatsapp|wa\.me)\b/i.test(t) ||
+    /order on whatsapp|chat on whatsapp|message on whatsapp|whatsapp order|order via whatsapp|proceed to order|proceed to checkout|complete order|confirm priority repair|book repair|schedule repair|confirm repair/i.test(t)
+  ) {
     return {
       action: 'whatsapp',
       defaultUrl: /^https?:\/\//i.test(h) && !h.includes('#') ? href : 'https://wa.me/1234567890',
@@ -276,6 +297,8 @@ module.exports = {
   TEXT_TAGS,
   ACTION_TAGS,
   IMAGE_TAGS,
+  FORM_INPUT_TAGS,
+  FORM_CONTAINER_TAGS,
   collectJsxText,
   getJsxAttributeLiteral,
 };

package/src/arc/ai-agent.cjs

@@ -167,6 +167,12 @@ function validateGeneratedCode(code, filename) {
     errors.push('Missing data-preview-field-path markers — the component has no editable fields.');
   }
 
+  // 2b. data-preview-field-path cannot be placed on broad containers
+  const broadMatch = code.match(/<(div|section|article|aside|header|footer|nav|main|form|ul|ol|table|thead|tbody|tr)\b[^>]*\bdata-preview-field-path\s*=/i);
+  if (broadMatch) {
+    errors.push(`data-preview-field-path cannot be placed on broad <${broadMatch[1]}> content containers. Put the marker on the exact visible text, media, link, or control element (like <span>, <p>, <h1>, <a>, <button>, or <EditableText>).`);
+  }
+
   // 3. Must have data-preview-item-path on the root wrapper
   if (!code.includes('data-preview-item-path')) {
     errors.push('Missing data-preview-item-path on root wrapper element.');