Fix prop issue

Author: owjs3901

src/codegen/Codegen.ts

@@ -1,11 +1,12 @@
 import { getComponentName } from '../utils'
 import { getProps } from './props'
-import { getSelectorProps, sanitizePropertyName } from './props/selector'
+import { getSelectorProps } from './props/selector'
 import { renderComponent, renderNode } from './render'
 import { renderText } from './render/text'
 import type { ComponentTree, NodeTree } from './types'
 import { checkAssetNode } from './utils/check-asset-node'
 import { checkSameColor } from './utils/check-same-color'
+import { extractInstanceVariantProps } from './utils/extract-instance-variant-props'
 import {
   getDevupComponentByNode,
   getDevupComponentByProps,
@@ -139,15 +140,7 @@ export class Codegen {
       const componentName = getComponentName(mainComponent || node)
 
       // Extract variant props from instance's componentProperties
-      const variantProps: Record<string, string> = {}
-      if (node.componentProperties) {
-        for (const [key, prop] of Object.entries(node.componentProperties)) {
-          if (prop.type === 'VARIANT') {
-            const sanitizedKey = sanitizePropertyName(key)
-            variantProps[sanitizedKey] = String(prop.value)
-          }
-        }
-      }
+      const variantProps = extractInstanceVariantProps(node)
 
       // Check if needs position wrapper
       if (props.pos) {

src/codegen/responsive/ResponsiveCodegen.ts

@@ -99,6 +99,19 @@ export class ResponsiveCodegen {
 
     // If node is INSTANCE or COMPONENT, render as component reference
     if (firstTree.isComponent) {
+      // Position props that may need responsive merging
+      const positionPropKeys = [
+        'pos',
+        'top',
+        'left',
+        'right',
+        'bottom',
+        'display',
+      ]
+
+      // Reserved variant keys that should not be passed as props (internal use only)
+      const reservedVariantKeys = ['effect', 'viewport']
+
       // For components, we might still need position props
       const propsMap = new Map<BreakpointKey, Props>()
       for (const [bp, tree] of treesByBreakpoint) {
@@ -111,15 +124,35 @@ export class ResponsiveCodegen {
         if (tree.props.display) posProps.display = tree.props.display
         propsMap.set(bp, posProps)
       }
-      const mergedProps = mergePropsToResponsive(propsMap)
+      const mergedPositionProps = mergePropsToResponsive(propsMap)
+
+      // Extract variant props (non-position props) - these are Instance variant values
+      // They should be the same across breakpoints, so just use firstTree
+      // Filter out reserved variant keys (effect, viewport) which are used internally
+      const variantProps: Props = {}
+      for (const [key, value] of Object.entries(firstTree.props)) {
+        const lowerKey = key.toLowerCase()
+        const isPositionProp = positionPropKeys.includes(key)
+        const isReservedVariant = reservedVariantKeys.some(
+          (r) => lowerKey === r,
+        )
+        if (!isPositionProp && !isReservedVariant) {
+          variantProps[key] = value
+        }
+      }
 
       // If component has position props, wrap in Box
-      if (Object.keys(mergedProps).length > 0) {
-        const componentCode = renderNode(firstTree.component, {}, 0, [])
-        return renderNode('Box', mergedProps, depth, [componentCode])
+      if (Object.keys(mergedPositionProps).length > 0) {
+        const componentCode = renderNode(
+          firstTree.component,
+          variantProps,
+          0,
+          [],
+        )
+        return renderNode('Box', mergedPositionProps, depth, [componentCode])
       }
 
-      return renderNode(firstTree.component, {}, depth, [])
+      return renderNode(firstTree.component, variantProps, depth, [])
     }
 
     // Handle WRAPPER nodes (position wrapper for components)