@deneb-ui/cli 2.0.88 → 2.0.90

package/src/arc/transforms/components/child-card.cjs

@@ -0,0 +1,268 @@
+'use strict';
+
+const recast = require('recast');
+const {
+  getJsxName,
+  findJsxAttribute,
+  hasJsxAttribute,
+  jsxTemplatePathAttr,
+  b,
+} = require('../../ast.cjs');
+
+function instrumentChildCardComponent(ast, transform, isTypeScript = false) {
+  const componentName = transform.componentName;
+  const listPath = transform.listField || transform.listPath || '';
+  if (!componentName) return false;
+
+  let instrumented = false;
+
+  function updateTsInterface(rootAst, interfaceName) {
+    recast.types.visit(rootAst, {
+      visitTSInterfaceDeclaration(pathNode) {
+        if (pathNode.node.id?.name === interfaceName) {
+          const body = pathNode.node.body?.body || [];
+          if (!body.some((prop) => prop.key?.name === 'previewItemPath')) {
+            const sig1 = b.tsPropertySignature(b.identifier('previewItemPath'), b.tsTypeAnnotation(b.tsStringKeyword()));
+            sig1.optional = true;
+            body.push(sig1);
+            instrumented = true;
+          }
+          if (!body.some((prop) => prop.key?.name === 'index')) {
+            const sig2 = b.tsPropertySignature(b.identifier('index'), b.tsTypeAnnotation(b.tsNumberKeyword()));
+            sig2.optional = true;
+            body.push(sig2);
+            instrumented = true;
+          }
+        }
+        this.traverse(pathNode);
+      },
+      visitTSTypeAliasDeclaration(pathNode) {
+        if (pathNode.node.id?.name === interfaceName && pathNode.node.typeAnnotation?.type === 'TSTypeLiteral') {
+          const members = pathNode.node.typeAnnotation.members || [];
+          if (!members.some((m) => m.key?.name === 'previewItemPath')) {
+            const sig1 = b.tsPropertySignature(b.identifier('previewItemPath'), b.tsTypeAnnotation(b.tsStringKeyword()));
+            sig1.optional = true;
+            members.push(sig1);
+            instrumented = true;
+          }
+          if (!members.some((m) => m.key?.name === 'index')) {
+            const sig2 = b.tsPropertySignature(b.identifier('index'), b.tsTypeAnnotation(b.tsNumberKeyword()));
+            sig2.optional = true;
+            members.push(sig2);
+            instrumented = true;
+          }
+        }
+        this.traverse(pathNode);
+      },
+    });
+  }
+
+  function instrumentFunctionProps(fnNode, isTs) {
+    let changed = false;
+    let params = fnNode.params || [];
+    if (!params.length) {
+      fnNode.params = [
+        b.objectPattern([
+          b.property('init', b.identifier('previewItemPath'), b.identifier('previewItemPath')),
+          b.property('init', b.identifier('index'), b.identifier('index')),
+        ]),
+      ];
+      changed = true;
+    } else {
+      const firstParam = params[0];
+      if (firstParam.type === 'ObjectPattern') {
+        const hasPreviewPath = firstParam.properties.some(
+          (p) => p.key?.name === 'previewItemPath' || p.argument?.name === 'previewItemPath'
+        );
+        if (!hasPreviewPath) {
+          const prop = b.property('init', b.identifier('previewItemPath'), b.identifier('previewItemPath'));
+          prop.shorthand = true;
+          firstParam.properties.push(prop);
+          changed = true;
+        }
+        const hasIndex = firstParam.properties.some(
+          (p) => p.key?.name === 'index' || p.argument?.name === 'index'
+        );
+        if (!hasIndex) {
+          const prop = b.property('init', b.identifier('index'), b.identifier('index'));
+          prop.shorthand = true;
+          firstParam.properties.push(prop);
+          changed = true;
+        }
+
+        if (isTs && firstParam.typeAnnotation?.typeAnnotation) {
+          const typeAnn = firstParam.typeAnnotation.typeAnnotation;
+          if (typeAnn.type === 'TSTypeReference' && typeAnn.typeName?.name) {
+            updateTsInterface(ast, typeAnn.typeName.name);
+          }
+        }
+      } else if (firstParam.type === 'Identifier') {
+        const paramName = firstParam.name;
+        if (isTs && firstParam.typeAnnotation?.typeAnnotation) {
+          const typeAnn = firstParam.typeAnnotation.typeAnnotation;
+          if (typeAnn.type === 'TSTypeReference' && typeAnn.typeName?.name) {
+            updateTsInterface(ast, typeAnn.typeName.name);
+          }
+        }
+        recast.types.visit(fnNode.body || fnNode, {
+          visitVariableDeclarator(vPath) {
+            if (vPath.node.id?.type === 'ObjectPattern' && vPath.node.init?.name === paramName) {
+              const propsList = vPath.node.id.properties;
+              if (!propsList.some((p) => p.key?.name === 'previewItemPath')) {
+                const prop = b.property('init', b.identifier('previewItemPath'), b.identifier('previewItemPath'));
+                prop.shorthand = true;
+                propsList.push(prop);
+                changed = true;
+              }
+              if (!propsList.some((p) => p.key?.name === 'index')) {
+                const prop = b.property('init', b.identifier('index'), b.identifier('index'));
+                prop.shorthand = true;
+                propsList.push(prop);
+                changed = true;
+              }
+            }
+            this.traverse(vPath);
+          },
+        });
+      }
+    }
+    return changed;
+  }
+
+  recast.types.visit(ast, {
+    visitFunctionDeclaration(pathNode) {
+      if (pathNode.node.id?.name === componentName) {
+        if (instrumentFunctionProps(pathNode.node, isTypeScript)) instrumented = true;
+      }
+      this.traverse(pathNode);
+    },
+    visitVariableDeclarator(pathNode) {
+      if (pathNode.node.id?.name === componentName) {
+        const init = pathNode.node.init;
+        if (init && (init.type === 'ArrowFunctionExpression' || init.type === 'FunctionExpression')) {
+          if (instrumentFunctionProps(init, isTypeScript)) instrumented = true;
+        }
+      }
+      this.traverse(pathNode);
+    },
+    visitExportDefaultDeclaration(pathNode) {
+      const decl = pathNode.node.declaration;
+      if (decl && (decl.type === 'FunctionDeclaration' || decl.type === 'ArrowFunctionExpression' || decl.type === 'FunctionExpression')) {
+        const fnName = decl.id?.name;
+        if (!fnName || fnName === componentName) {
+          if (instrumentFunctionProps(decl, isTypeScript)) instrumented = true;
+        }
+      }
+      this.traverse(pathNode);
+    },
+  });
+
+  let rootElement = null;
+  recast.types.visit(ast, {
+    visitReturnStatement(pathNode) {
+      if (!rootElement && pathNode.node.argument) {
+        let arg = pathNode.node.argument;
+        if (arg.type === 'ParenthesizedExpression') arg = arg.expression;
+        if (arg.type === 'JSXElement') {
+          rootElement = arg;
+        }
+      }
+      this.traverse(pathNode);
+    },
+  });
+
+  if (rootElement) {
+    if (!hasJsxAttribute(rootElement, 'data-preview-item-path')) {
+      if (listPath) {
+        rootElement.openingElement.attributes.push(
+          jsxTemplatePathAttr('data-preview-item-path', listPath, 'index')
+        );
+      } else {
+        rootElement.openingElement.attributes.push(
+          b.jsxAttribute(
+            b.jsxIdentifier('data-preview-item-path'),
+            b.jsxExpressionContainer(b.identifier('previewItemPath'))
+          )
+        );
+      }
+      instrumented = true;
+    }
+  }
+
+  recast.types.visit(ast, {
+    visitJSXElement(pathNode) {
+      const node = pathNode.node;
+      const tagName = getJsxName(node);
+
+      const srcAttr = findJsxAttribute(node, 'src');
+      if (srcAttr && (tagName === 'img' || tagName === 'Image') && !hasJsxAttribute(node, 'data-preview-field-path')) {
+        const rawCode = recast.print(srcAttr.value).code;
+        if (/image|photo|avatar|thumb|img|src/i.test(rawCode)) {
+          const imgField = (transform.itemFields || []).find((f) => f.type === 'image' || /image|photo/i.test(f.key))?.key || 'image';
+          if (listPath) {
+            node.openingElement.attributes.push(
+              jsxTemplatePathAttr('data-preview-field-path', listPath, 'index', `.${imgField}`)
+            );
+          } else {
+            node.openingElement.attributes.push(
+              b.jsxAttribute(
+                b.jsxIdentifier('data-preview-field-path'),
+                b.jsxExpressionContainer(
+                  b.templateLiteral(
+                    [
+                      b.templateElement({ raw: '', cooked: '' }, false),
+                      b.templateElement({ raw: `.${imgField}`, cooked: `.${imgField}` }, true),
+                    ],
+                    [b.identifier('previewItemPath')]
+                  )
+                )
+              )
+            );
+          }
+          instrumented = true;
+        }
+      }
+
+      for (const child of node.children || []) {
+        if (child.type === 'JSXExpressionContainer' && child.expression) {
+          const exprCode = recast.print(child.expression).code;
+          const candidateField = (transform.itemFields || []).find(
+            (f) => exprCode.includes(`.${f.key}`) || exprCode === f.key
+          );
+          if (candidateField && !hasJsxAttribute(node, 'data-preview-field-path')) {
+            const fieldSuffix = `.${candidateField.key}`;
+            if (listPath) {
+              node.openingElement.attributes.push(
+                jsxTemplatePathAttr('data-preview-field-path', listPath, 'index', fieldSuffix)
+              );
+            } else {
+              node.openingElement.attributes.push(
+                b.jsxAttribute(
+                  b.jsxIdentifier('data-preview-field-path'),
+                  b.jsxExpressionContainer(
+                    b.templateLiteral(
+                      [
+                        b.templateElement({ raw: '', cooked: '' }, false),
+                        b.templateElement({ raw: fieldSuffix, cooked: fieldSuffix }, true),
+                      ],
+                      [b.identifier('previewItemPath')]
+                    )
+                  )
+                )
+              );
+            }
+            instrumented = true;
+            break;
+          }
+        }
+      }
+      this.traverse(pathNode);
+    },
+  });
+
+  return instrumented;
+}
+
+module.exports = {
+  instrumentChildCardComponent,
+};

package/src/arc/transforms/components/compound-content.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+const {
+  ensureStyleAttrs,
+  siteDataBinding,
+  b,
+} = require('../../ast.cjs');
+const { ensurePreviewPath } = require('../transform-context.cjs');
+
+function bindButtonWithIcon(node, transform) {
+  ensurePreviewPath(node, transform.field);
+  ensureStyleAttrs(node, transform.field, 'button');
+  for (let i = 0; i < (node.children || []).length; i++) {
+    const child = node.children[i];
+    if (child.type === 'JSXText' && child.value.trim().length > 0) {
+      node.children[i] = b.jsxExpressionContainer(
+        siteDataBinding(transform.field.split('.'), child.value.trim(), 'text')
+      );
+    }
+  }
+}
+
+function bindHighlightedHeading(node, transform) {
+  ensurePreviewPath(node, transform.field);
+  ensureStyleAttrs(node, transform.field, 'text');
+  for (let i = 0; i < (node.children || []).length; i++) {
+    const child = node.children[i];
+    if (child.type === 'JSXText' && child.value.trim().length > 0) {
+      node.children[i] = b.jsxExpressionContainer(
+        siteDataBinding(transform.field.split('.'), child.value.trim(), 'text')
+      );
+    } else if (child.type === 'JSXElement') {
+      const highlightField = `${transform.field}Highlight`;
+      ensurePreviewPath(child, highlightField);
+      for (let j = 0; j < (child.children || []).length; j++) {
+        if (child.children[j].type === 'JSXText' && child.children[j].value.trim().length > 0) {
+          child.children[j] = b.jsxExpressionContainer(
+            siteDataBinding(highlightField.split('.'), child.children[j].value.trim(), 'text')
+          );
+        }
+      }
+    }
+  }
+}
+
+module.exports = {
+  bindButtonWithIcon,
+  bindHighlightedHeading,
+};

package/src/arc/transforms/components/reusable-component.cjs

@@ -0,0 +1,173 @@
+'use strict';
+
+const recast = require('recast');
+const {
+  hasJsxAttribute,
+  b,
+} = require('../../ast.cjs');
+
+function instrumentReusableComponent(ast, transform, isTypeScript = false) {
+  const componentName = transform.componentName;
+  const propTransforms = transform.propTransforms || {};
+  const propNames = Object.keys(propTransforms);
+  if (!propNames.length) return false;
+
+  let instrumented = false;
+
+  function updateTsInterface(rootAst, interfaceName) {
+    recast.types.visit(rootAst, {
+      visitTSInterfaceDeclaration(pathNode) {
+        if (pathNode.node.id?.name === interfaceName) {
+          const body = pathNode.node.body?.body || [];
+          if (!body.some((m) => m.key?.name === 'previewPath')) {
+            const sig = b.tsPropertySignature(b.identifier('previewPath'), b.tsTypeAnnotation(b.tsStringKeyword()));
+            sig.optional = true;
+            body.push(sig);
+            instrumented = true;
+          }
+        }
+        this.traverse(pathNode);
+      },
+      visitTSTypeAliasDeclaration(pathNode) {
+        if (pathNode.node.id?.name === interfaceName && pathNode.node.typeAnnotation?.type === 'TSTypeLiteral') {
+          const members = pathNode.node.typeAnnotation.members || [];
+          if (!members.some((m) => m.key?.name === 'previewPath')) {
+            const sig = b.tsPropertySignature(b.identifier('previewPath'), b.tsTypeAnnotation(b.tsStringKeyword()));
+            sig.optional = true;
+            members.push(sig);
+            instrumented = true;
+          }
+        }
+        this.traverse(pathNode);
+      },
+    });
+  }
+
+  function instrumentFunctionProps(fnNode, isTs) {
+    let changed = false;
+    let params = fnNode.params || [];
+    if (!params.length) {
+      fnNode.params = [
+        b.objectPattern([
+          b.property('init', b.identifier('previewPath'), b.identifier('previewPath')),
+        ]),
+      ];
+      changed = true;
+    } else {
+      const firstParam = params[0];
+      if (firstParam.type === 'ObjectPattern') {
+        const hasPreviewPath = firstParam.properties.some(
+          (p) => p.key?.name === 'previewPath' || p.argument?.name === 'previewPath'
+        );
+        if (!hasPreviewPath) {
+          const prop = b.property('init', b.identifier('previewPath'), b.identifier('previewPath'));
+          prop.shorthand = true;
+          firstParam.properties.push(prop);
+          changed = true;
+        }
+        if (isTs && firstParam.typeAnnotation?.typeAnnotation) {
+          const typeAnn = firstParam.typeAnnotation.typeAnnotation;
+          if (typeAnn.type === 'TSTypeReference' && typeAnn.typeName?.name) {
+            updateTsInterface(ast, typeAnn.typeName.name);
+          }
+        }
+      } else if (firstParam.type === 'Identifier') {
+        const paramName = firstParam.name;
+        if (isTs && firstParam.typeAnnotation?.typeAnnotation) {
+          const typeAnn = firstParam.typeAnnotation.typeAnnotation;
+          if (typeAnn.type === 'TSTypeReference' && typeAnn.typeName?.name) {
+            updateTsInterface(ast, typeAnn.typeName.name);
+          }
+        }
+        recast.types.visit(fnNode.body || fnNode, {
+          visitVariableDeclarator(vPath) {
+            if (vPath.node.id?.type === 'ObjectPattern' && vPath.node.init?.name === paramName) {
+              const propsList = vPath.node.id.properties;
+              if (!propsList.some((p) => p.key?.name === 'previewPath')) {
+                const prop = b.property('init', b.identifier('previewPath'), b.identifier('previewPath'));
+                prop.shorthand = true;
+                propsList.push(prop);
+                changed = true;
+              }
+            }
+            this.traverse(vPath);
+          },
+        });
+      }
+    }
+    return changed;
+  }
+
+  recast.types.visit(ast, {
+    visitFunctionDeclaration(pathNode) {
+      if (!componentName || pathNode.node.id?.name === componentName) {
+        if (instrumentFunctionProps(pathNode.node, isTypeScript)) instrumented = true;
+      }
+      this.traverse(pathNode);
+    },
+    visitVariableDeclarator(pathNode) {
+      if (pathNode.node.id?.name === componentName) {
+        const init = pathNode.node.init;
+        if (init && (init.type === 'ArrowFunctionExpression' || init.type === 'FunctionExpression')) {
+          if (instrumentFunctionProps(init, isTypeScript)) instrumented = true;
+        }
+      }
+      this.traverse(pathNode);
+    },
+    visitExportDefaultDeclaration(pathNode) {
+      const decl = pathNode.node.declaration;
+      if (decl && (decl.type === 'FunctionDeclaration' || decl.type === 'ArrowFunctionExpression' || decl.type === 'FunctionExpression')) {
+        const fnName = decl.id?.name;
+        if (!fnName || fnName === componentName) {
+          if (instrumentFunctionProps(decl, isTypeScript)) instrumented = true;
+        }
+      }
+      this.traverse(pathNode);
+    },
+  });
+
+  recast.types.visit(ast, {
+    visitJSXElement(pathNode) {
+      const node = pathNode.node;
+      for (const child of node.children || []) {
+        if (child.type === 'JSXExpressionContainer') {
+          const expr = child.expression;
+          let propMatch = null;
+          if (expr && expr.type === 'Identifier' && propNames.includes(expr.name)) {
+            propMatch = expr.name;
+          } else if (expr && expr.type === 'LogicalExpression' && expr.left?.name && propNames.includes(expr.left.name)) {
+            propMatch = expr.left.name;
+          }
+          if (propMatch && !hasJsxAttribute(node, 'data-preview-field-path')) {
+            const previewAttr = b.jsxAttribute(
+              b.jsxIdentifier('data-preview-field-path'),
+              b.jsxExpressionContainer(
+                b.conditionalExpression(
+                  b.identifier('previewPath'),
+                  b.templateLiteral(
+                    [
+                      b.templateElement({ raw: '', cooked: '' }, false),
+                      b.templateElement({ raw: `.${propMatch}`, cooked: `.${propMatch}` }, true),
+                    ],
+                    [b.identifier('previewPath')]
+                  ),
+                  b.identifier('undefined')
+                )
+              )
+            );
+            node.openingElement.attributes.push(previewAttr);
+            instrumented = true;
+            break;
+          }
+        }
+      }
+      this.traverse(pathNode);
+    },
+  });
+
+  return instrumented;
+}
+
+module.exports = {
+  instrumentReusableComponent,
+};

package/src/arc/transforms/element-transform.cjs

@@ -0,0 +1,192 @@
+'use strict';
+
+const {
+  getJsxName,
+  findJsxAttribute,
+  hasJsxAttribute,
+  siteDataBinding,
+  ensureStyleAttrs,
+  b,
+} = require('../ast.cjs');
+const { BROAD_CONTENT_CONTAINERS } = require('../fivora-contract.cjs');
+const {
+  replaceAttrValue,
+  ensurePreviewPath,
+  findAncestorJsxElement,
+  inferButtonKind,
+} = require('./transform-context.cjs');
+const { replaceTextChildren, wrapLiteralTextChildren } = require('./primitives/text.cjs');
+const { splitActionChildren } = require('./primitives/action.cjs');
+const { bindButtonWithIcon, bindHighlightedHeading } = require('./components/compound-content.cjs');
+const { extractTailwindBg } = require('./assets/tailwind-bg.cjs');
+
+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 (transform.labelField) {
+      if (hasJsxAttribute(node, 'data-preview-static')) {
+        node.openingElement.attributes = node.openingElement.attributes.filter(
+          (attr) => !(attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'data-preview-static')
+        );
+      }
+      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 || '');
+    } else if (!hasJsxAttribute(node, 'data-preview-static')) {
+      node.openingElement.attributes.push(
+        b.jsxAttribute(b.jsxIdentifier('data-preview-static'), b.stringLiteral('action-button'))
+      );
+    }
+    return;
+  }
+  if (transform.operation === 'split-action-contract') {
+    const tagName = getJsxName(node);
+    if (tagName === 'button') {
+      node.openingElement.name = b.jsxIdentifier('a');
+      if (node.closingElement) {
+        node.closingElement.name = b.jsxIdentifier('a');
+      }
+      node.openingElement.attributes = (node.openingElement.attributes || []).filter(
+        (attr) => !(attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'type')
+      );
+    }
+
+    const urlParts = transform.urlField.split('.');
+    replaceAttrValue(node, 'href', siteDataBinding(urlParts, transform.fallback, 'url'));
+
+    const isExternal =
+      transform.extra?.external ||
+      ['whatsapp', 'directions', 'location'].includes(transform.extra?.action) ||
+      /^https?:\/\//i.test(String(transform.fallback || ''));
+
+    if (isExternal && (tagName === 'button' || tagName === 'a')) {
+      if (!hasJsxAttribute(node, 'target')) {
+        node.openingElement.attributes.push(
+          b.jsxAttribute(b.jsxIdentifier('target'), b.stringLiteral('_blank'))
+        );
+      }
+      if (!hasJsxAttribute(node, 'rel')) {
+        node.openingElement.attributes.push(
+          b.jsxAttribute(b.jsxIdentifier('rel'), b.stringLiteral('noopener noreferrer'))
+        );
+      }
+    }
+
+    replaceAttrValue(node, 'data-preview-field-path', b.stringLiteral(transform.urlField));
+    if (hasJsxAttribute(node, 'data-preview-static')) {
+      node.openingElement.attributes = node.openingElement.attributes.filter(
+        (attr) => !(attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'data-preview-static')
+      );
+    }
+    splitActionChildren(node, transform.labelField, transform.labelFallback || '');
+    return;
+  }
+  if (transform.operation === 'extract-url') {
+    replaceAttrValue(node, 'href', siteDataBinding(transform.field.split('.'), transform.fallback, 'url'));
+    ensurePreviewPath(node, transform.field);
+    return;
+  }
+  if (transform.operation === 'extract-image' || transform.operation === 'extract-picture') {
+    const tagName = getJsxName(node);
+    if (tagName === 'picture') {
+      const children = node.children || [];
+      const imgChild = children.find((c) => c && c.type === 'JSXElement' && (getJsxName(c) === 'img' || getJsxName(c) === 'Image'));
+      if (imgChild) {
+        replaceAttrValue(imgChild, 'src', siteDataBinding(transform.field.split('.'), transform.fallback, 'image'));
+        ensurePreviewPath(imgChild, transform.field);
+      }
+      ensurePreviewPath(node, transform.field);
+      return;
+    }
+    replaceAttrValue(node, 'src', siteDataBinding(transform.field.split('.'), transform.fallback, 'image'));
+    ensurePreviewPath(node, transform.field);
+    return;
+  }
+  if (transform.operation === 'extract-alt') {
+    replaceAttrValue(node, 'alt', siteDataBinding(transform.field.split('.'), transform.fallback, 'text'));
+    return;
+  }
+  if (transform.operation === 'extract-placeholder') {
+    replaceAttrValue(node, 'placeholder', siteDataBinding(transform.field.split('.'), transform.fallback, 'text'));
+    ensurePreviewPath(node, transform.field);
+    return;
+  }
+  if (transform.operation === 'extract-prop') {
+    const propName = transform.propName || 'title';
+    replaceAttrValue(node, propName, siteDataBinding(transform.field.split('.'), transform.fallback, transform.fieldType || 'text'));
+    if (!hasJsxAttribute(node, 'data-preview-field-path') && !hasJsxAttribute(node, 'data-preview-list-path')) {
+      ensurePreviewPath(node, transform.field);
+    }
+    return;
+  }
+  if (transform.operation === 'bind-button-with-icon') {
+    bindButtonWithIcon(node, transform);
+    return;
+  }
+  if (transform.operation === 'bind-highlighted-heading') {
+    bindHighlightedHeading(node, transform);
+    return;
+  }
+  if (transform.operation === 'prop-flow-callsite') {
+    if (transform.propTransforms) {
+      for (const [propName, propInfo] of Object.entries(transform.propTransforms)) {
+        replaceAttrValue(
+          node,
+          propName,
+          siteDataBinding(propInfo.field.split('.'), propInfo.fallback, propInfo.type || 'text')
+        );
+      }
+    }
+    if (transform.previewPath && !hasJsxAttribute(node, 'previewPath')) {
+      node.openingElement.attributes.push(
+        b.jsxAttribute(b.jsxIdentifier('previewPath'), b.stringLiteral(transform.previewPath))
+      );
+    }
+    return;
+  }
+  if (transform.operation === 'wrap-text-span') {
+    wrapLiteralTextChildren(node, transform.field, transform.fallback);
+    return;
+  }
+  if (transform.operation === 'extract-text') {
+    const tagName = getJsxName(node);
+    if (BROAD_CONTENT_CONTAINERS.has(tagName)) {
+      wrapLiteralTextChildren(node, transform.field, transform.fallback);
+      return;
+    }
+    ensurePreviewPath(node, transform.field);
+    ensureStyleAttrs(node, transform.field, inferButtonKind(transform.tag));
+    replaceTextChildren(node, transform.field, transform.fallback, transform.fieldType || 'text');
+    return;
+  }
+  if (transform.operation === 'style-bind') {
+    if (transform.styleKind === 'grid') {
+      const container = findAncestorJsxElement(pathNode) || node;
+      ensureStyleAttrs(container, transform.stylePath, 'grid');
+      return;
+    }
+    if (transform.styleKind === 'card') {
+      ensureStyleAttrs(node, transform.stylePath, 'card');
+      return;
+    }
+    ensureStyleAttrs(node, transform.stylePath, transform.styleKind || 'text');
+    return;
+  }
+  if (transform.operation === 'extract-tailwind-bg') {
+    extractTailwindBg(node, transform);
+    return;
+  }
+}
+
+module.exports = {
+  applyTransformToElement,
+};