@deneb-ui/cli 2.0.50 → 2.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/cli",
-  "version": "2.0.50",
+  "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.50",
+    "@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

@@ -729,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);
 });
 
@@ -1215,3 +1220,122 @@ export function CartDrawer() {
   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,6 +197,18 @@ 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) ||
@@ -280,6 +297,8 @@ module.exports = {
   TEXT_TAGS,
   ACTION_TAGS,
   IMAGE_TAGS,
+  FORM_INPUT_TAGS,
+  FORM_CONTAINER_TAGS,
   collectJsxText,
   getJsxAttributeLiteral,
 };

package/src/arc/field-paths.cjs

@@ -47,6 +47,7 @@ function inferSection(context) {
     ['testimonials', /testimonial/],
     ['map', /map\b|location-map|google-map/],
     ['faq', /faq|accordion/],
+    ['form', /form|booking|inquiry|registration/],
     ['contact', /contact|whatsapp|mailto/],
     ['featuredProducts', /featured|product-grid|collection/],
     ['newsletter', /newsletter|subscribe/],
@@ -65,6 +66,7 @@ function inferSection(context) {
 
 function inferFieldName(kind, tag, text, extra = {}) {
   if (kind === 'url') {
+    if (extra.action === 'form-submit') return 'formWhatsappUrl';
     if (extra.platform) return `${extra.platform}Url`;
     if (extra.action === 'whatsapp') return 'whatsappUrl';
     if (extra.action === 'phone') return 'phoneUrl';
@@ -74,6 +76,7 @@ function inferFieldName(kind, tag, text, extra = {}) {
     return fromText || (extra.action ? `${extra.action}Url` : 'ctaUrl');
   }
   if (kind === 'label' && extra.paired) {
+    if (extra.action === 'form-submit') return 'formSubmitLabel';
     if (extra.action === 'whatsapp') return 'whatsappLabel';
     if (extra.action === 'phone') return 'phoneLabel';
     if (extra.action === 'email') return 'emailLabel';
@@ -100,6 +103,7 @@ function inferFieldName(kind, tag, text, extra = {}) {
     Description: 'description',
     Typography: 'text',
     Badge: 'badge',
+    label: 'label',
     button: 'label',
     Button: 'label',
     span: 'label',

package/src/arc/index.cjs

@@ -256,7 +256,7 @@ async function runDenebArcAsync(projectDir, projectName, options = {}) {
     0
   );
   const actionCount = analyses.reduce(
-    (n, a) => n + (a.candidates || []).filter((c) => c.operation === 'split-action-contract' || c.kind === 'url').length,
+    (n, a) => n + (a.candidates || []).filter((c) => c.operation === 'split-action-contract' || c.operation === 'form-submit-action' || c.kind === 'url').length,
     0
   );
   printer.printScan(profile, graph, candidateCount, actionCount);
@@ -397,7 +397,7 @@ function runDenebArcSync(projectDir, projectName, options = {}) {
     0
   );
   const actionCount = analyses.reduce(
-    (n, a) => n + (a.candidates || []).filter((c) => c.operation === 'split-action-contract' || c.kind === 'url').length,
+    (n, a) => n + (a.candidates || []).filter((c) => c.operation === 'split-action-contract' || c.operation === 'form-submit-action' || c.kind === 'url').length,
     0
   );
   printer.printScan(profile, graph, candidateCount, actionCount);

package/src/arc/learning.cjs

@@ -118,6 +118,7 @@ function mapOperation(operation) {
     case 'extract-url':
       return 'url-extraction';
     case 'split-action-contract':
+    case 'form-submit-action':
       return 'contract-split';
     case 'style-bind':
       return 'style-bind';

package/src/arc/planner.cjs

@@ -9,7 +9,7 @@ const { appendStyleBindTransforms } = require('./style-candidates.cjs');
 function recipeBoost(candidate, recipe) {
   if (!recipe) return 0;
   let boost = 0;
-  if (recipe.actionRules?.splitActionAndLabel && candidate.operation === 'split-action-contract') boost += 0.03;
+  if (recipe.actionRules?.splitActionAndLabel && (candidate.operation === 'split-action-contract' || candidate.operation === 'form-submit-action')) boost += 0.03;
   const keywords = recipe.signatures?.keywords || [];
   const hay = `${candidate.tag} ${candidate.value || ''} ${candidate.label || ''} ${candidate.file || ''}`.toLowerCase();
   if (keywords.some((kw) => hay.includes(String(kw).toLowerCase()))) boost += 0.02;
@@ -66,8 +66,8 @@ function planTransformations({ profile, analyses, recipe }) {
       }
 
       const extra = { ...(candidate.extra || {}) };
-      if (candidate.operation === 'split-action-contract') {
-        extra.action = extra.action || classifyHref(candidate.value);
+      if (candidate.operation === 'split-action-contract' || candidate.operation === 'form-submit-action') {
+        extra.action = extra.action || (candidate.operation === 'form-submit-action' ? 'form-submit' : classifyHref(candidate.value));
         extra.paired = true;
       }
 
@@ -107,7 +107,7 @@ function planTransformations({ profile, analyses, recipe }) {
         continue;
       }
 
-      if (candidate.operation === 'split-action-contract') {
+      if (candidate.operation === 'split-action-contract' || candidate.operation === 'form-submit-action') {
         const urlName = inferFieldName('url', candidate.tag, candidate.label, extra);
         const labelName = inferFieldName('label', candidate.tag, candidate.label, { ...extra, paired: true });
         const actionSection = sectionForAction(scope, section, extra);
@@ -117,6 +117,9 @@ function planTransformations({ profile, analyses, recipe }) {
         transform.labelField = uniquePath(usedPaths, sibling.join('.'));
         transform.fieldType = 'url';
         transform.labelFieldType = 'text';
+        if (candidate.operation === 'form-submit-action') {
+          transform.formContext = true;
+        }
       } else if (candidate.operation === 'extract-url') {
         transform.field = buildFieldPath({
           scope,
@@ -238,7 +241,7 @@ function sectionForAction(scope, section, extra) {
   if (scope === 'common' && (extra.social || ['instagram', 'facebook', 'twitter', 'tiktok', 'youtube', 'linkedin'].includes(extra.action))) {
     return 'footer';
   }
-  if (['whatsapp', 'phone', 'email', 'directions', 'location'].includes(extra.action)) {
+  if (['whatsapp', 'phone', 'email', 'directions', 'location', 'form-submit'].includes(extra.action)) {
     return section || 'contact';
   }
   if (extra.action === 'shop') {

package/src/arc/semantic.cjs

@@ -23,6 +23,8 @@ const {
   TEXT_TAGS,
   ACTION_TAGS,
   IMAGE_TAGS,
+  FORM_INPUT_TAGS,
+  FORM_CONTAINER_TAGS,
   DECORATIVE_TAGS,
 } = require('./adapters.cjs');
 const { shortHash } = require('./fs-utils.cjs');
@@ -392,7 +394,7 @@ function confidenceFor(kind, extras = {}) {
   if (extras.icon) return 0.1;
   if (kind === 'url' && extras.action === 'whatsapp') return 0.96;
   if (kind === 'url' && extras.social) return 0.93;
-  if (kind === 'split-action-contract') return 0.94;
+  if (kind === 'split-action-contract' || kind === 'form-submit-action') return 0.94;
   if (kind === 'text' && HEADING_TAGS.has(extras.tag)) return 0.95;
   if (kind === 'text' && extras.tag === 'p') return 0.9;
   if (kind === 'image') return 0.88;
@@ -562,14 +564,47 @@ function analyzeFile({ code, relativeFile, profile, graph, ownerScope, component
         });
       }
 
+      const insideForm = parents.some((p) => FORM_CONTAINER_TAGS.has(p));
+
       const actionableHref = href || (name === 'Button' ? getJsxAttributeLiteral(node, 'href') : null);
       const innerText = textInfo.dynamic ? '' : textInfo.text;
       const typeAttr = getJsxAttributeLiteral(node, 'type');
       const isSubmit = typeAttr === 'submit';
 
-      // Check for action intent via classifyActionIntent (covers WhatsApp, Call/Phone, Directions, Location, Shop, Email)
-      const actionIntent = !isSubmit && !apiOwned ? classifyActionIntent(innerText, actionableHref) : null;
-      const isAction = (Boolean(actionableHref) || Boolean(actionIntent)) && (ACTION_TAGS.has(name) || isLikelyCtaClass(className));
+      // Check for action intent via classifyActionIntent (covers Form Submit, WhatsApp, Call/Phone, Directions, Location, Shop, Email)
+      const actionIntent = !apiOwned ? classifyActionIntent(innerText, actionableHref) : null;
+
+      const isFormSubmit =
+        !apiOwned &&
+        (ACTION_TAGS.has(name) || isLikelyCtaClass(className)) &&
+        (isSubmit ||
+          (insideForm && (actionIntent?.action === 'form-submit' || (innerText && !actionableHref))) ||
+          actionIntent?.action === 'form-submit');
+
+      if (isFormSubmit && innerText && !textInfo.dynamic) {
+        usedLocs.add(loc);
+        const resolvedHref = actionableHref || (actionIntent ? actionIntent.defaultUrl : 'https://wa.me/1234567890');
+        candidates.push({
+          ...baseMeta,
+          kind: 'form-submit-action',
+          operation: 'form-submit-action',
+          value: resolvedHref,
+          label: innerText,
+          extra: {
+            action: 'form-submit',
+            external: true,
+            insideForm,
+            isSubmit,
+          },
+          confidence: confidenceFor('form-submit-action'),
+          reason: 'form-submit-whatsapp-dispatch',
+          fingerprint: fingerprintCandidate({ tag: name, kind: 'form-submit-action', action: 'form-submit' }),
+        });
+        this.traverse(pathNode);
+        return;
+      }
+
+      const isAction = !isSubmit && (Boolean(actionableHref) || Boolean(actionIntent)) && (ACTION_TAGS.has(name) || isLikelyCtaClass(className));
 
       if (isAction && (actionableHref || actionIntent)) {
         const action = actionIntent ? actionIntent.action : classifyHref(actionableHref);

package/src/arc/style-candidates.cjs

@@ -5,6 +5,7 @@ const BUTTON_TAGS = new Set(['button', 'Button', 'CTAButton']);
 
 function inferStyleKind(transform) {
   if (transform.operation === 'collection-conversion') return 'grid';
+  if (transform.operation === 'form-submit-action') return 'button';
   if (transform.operation === 'split-action-contract') return 'text';
   if (BUTTON_TAGS.has(transform.tag) && transform.operation === 'extract-text') return 'button';
   if (TEXT_OPS.has(transform.operation)) return 'text';
@@ -14,7 +15,7 @@ function inferStyleKind(transform) {
 function stylePathFor(transform, kind) {
   if (kind === 'grid' && transform.listField) return `${transform.listField}.grid`;
   if (kind === 'card' && transform.listField) return `${transform.listField}[*].card`;
-  if (transform.operation === 'split-action-contract') return transform.labelField;
+  if (transform.operation === 'split-action-contract' || transform.operation === 'form-submit-action') return transform.labelField;
   return transform.field || transform.labelField || null;
 }
 

package/src/arc/transformer.cjs

@@ -152,6 +152,27 @@ function wrapHiddenUrlSibling(pathNode, urlField, fallback) {
 
 function applyTransformToElement(pathNode, transform) {
   const node = pathNode.node;
+  if (transform.operation === 'form-submit-action') {
+    const tagName = getJsxName(node);
+    if (!hasJsxAttribute(node, 'type') && tagName === 'button') {
+      node.openingElement.attributes.push(
+        b.jsxAttribute(b.jsxIdentifier('type'), b.stringLiteral('submit'))
+      );
+    }
+    if (!hasJsxAttribute(node, 'data-preview-static')) {
+      node.openingElement.attributes.push(
+        b.jsxAttribute(b.jsxIdentifier('data-preview-static'), b.stringLiteral('action-button'))
+      );
+    }
+    if (hasJsxAttribute(node, 'data-preview-field-path')) {
+      node.openingElement.attributes = node.openingElement.attributes.filter(
+        (attr) => !(attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'data-preview-field-path')
+      );
+    }
+    splitActionChildren(node, transform.labelField, transform.labelFallback || '');
+    wrapHiddenUrlSibling(pathNode, transform.urlField, transform.fallback);
+    return;
+  }
   if (transform.operation === 'split-action-contract') {
     const tagName = getJsxName(node);
     if (tagName === 'button') {
@@ -625,6 +646,7 @@ function applyFilePlan(filePlan, profile) {
 
   const supported = new Set([
     'split-action-contract',
+    'form-submit-action',
     'extract-url',
     'extract-image',
     'extract-alt',