From 90e40c05bfec23812defcd4597645913571a3ff2 Mon Sep 17 00:00:00 2001
From: Fini <fini.yang@gmail.com>
Date: Sun, 22 Feb 2026 08:17:36 +0800
Subject: [PATCH] feat(codegen): add textGrowth, textAlignVertical and
 clipContent to code generation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- textGrowth: auto → whitespace-nowrap, fixed-width-height → overflow-hidden
- textAlignVertical: middle/bottom → vertical-align CSS
- clipContent: true → overflow-hidden on containers
---
 src/services/codegen/html-generator.ts  | 7 +++++++
 src/services/codegen/react-generator.ts | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/src/services/codegen/html-generator.ts b/src/services/codegen/html-generator.ts
index ef4e9dcc..c5b4cdea 100644
--- a/src/services/codegen/html-generator.ts
+++ b/src/services/codegen/html-generator.ts
@@ -138,6 +138,9 @@ function layoutToCSS(node: ContainerProps): Record<string, string> {
     }
     css['align-items'] = map[node.alignItems] ?? node.alignItems
   }
+  if (node.clipContent) {
+    css.overflow = 'hidden'
+  }
   return css
 }
 
@@ -240,6 +243,10 @@ function generateNodeHTML(
       if (node.fontFamily) css['font-family'] = `'${node.fontFamily}', sans-serif`
       if (node.lineHeight) css['line-height'] = String(node.lineHeight)
       if (node.letterSpacing) css['letter-spacing'] = `${node.letterSpacing}px`
+      if (node.textAlignVertical === 'middle') css['vertical-align'] = 'middle'
+      else if (node.textAlignVertical === 'bottom') css['vertical-align'] = 'bottom'
+      if (node.textGrowth === 'auto') css['white-space'] = 'nowrap'
+      else if (node.textGrowth === 'fixed-width-height') css.overflow = 'hidden'
       if (node.underline) css['text-decoration'] = 'underline'
       if (node.strikethrough) css['text-decoration'] = 'line-through'
       Object.assign(css, effectsToCSS(node.effects))
diff --git a/src/services/codegen/react-generator.ts b/src/services/codegen/react-generator.ts
index 2d2983d3..15f7e1da 100644
--- a/src/services/codegen/react-generator.ts
+++ b/src/services/codegen/react-generator.ts
@@ -135,6 +135,9 @@ function layoutToTailwind(node: ContainerProps): string[] {
     }
     if (aiMap[node.alignItems]) classes.push(aiMap[node.alignItems])
   }
+  if (node.clipContent) {
+    classes.push('overflow-hidden')
+  }
   return classes
 }
 
@@ -193,6 +196,10 @@ function textToTailwind(node: TextNode): string[] {
   if (node.fontFamily) classes.push(`font-['${node.fontFamily.replace(/\s/g, '_')}']`)
   if (node.lineHeight) classes.push(`leading-[${node.lineHeight}]`)
   if (node.letterSpacing) classes.push(`tracking-[${node.letterSpacing}px]`)
+  if (node.textAlignVertical === 'middle') classes.push('align-middle')
+  else if (node.textAlignVertical === 'bottom') classes.push('align-bottom')
+  if (node.textGrowth === 'auto') classes.push('whitespace-nowrap')
+  else if (node.textGrowth === 'fixed-width-height') classes.push('overflow-hidden')
   if (node.underline) classes.push('underline')
   if (node.strikethrough) classes.push('line-through')
   return classes