Fix assets w

Author: owjs3901

src/codegen/Codegen.ts

@@ -82,6 +82,7 @@ export class Codegen {
     const assetNode = checkAssetNode(node)
     if (assetNode) {
       const props = await getProps(node)
+      console.log('props', props)
       props.src = `/${assetNode === 'svg' ? 'icons' : 'images'}/${node.name}.${assetNode}`
       if (assetNode === 'svg') {
         const maskColor = await checkSameColor(node)

src/codegen/props/index.ts

@@ -22,6 +22,7 @@ import { getVisibilityProps } from './visibility'
 export async function getProps(
   node: SceneNode,
 ): Promise<Record<string, unknown>> {
+  console.log('getProps', getLayoutProps(node))
   return {
     ...getAutoLayoutProps(node),
     ...getMinMaxProps(node),
@@ -56,8 +57,9 @@ export function filterPropsWithComponent(
   for (const [key, value] of Object.entries(props)) {
     switch (component) {
       case 'Flex':
-        // Only skip display if it's exactly 'flex' (not responsive array or other value)
+        // Only skip display/flexDir if it's exactly the default value (not responsive array)
         if (key === 'display' && value === 'flex') continue
+        if (key === 'flexDir' && value === 'row') continue
         break
       case 'Grid':
         // Only skip display if it's exactly 'grid' (not responsive array or other value)
@@ -66,9 +68,11 @@ export function filterPropsWithComponent(
       case 'Center':
         if (['alignItems', 'justifyContent'].includes(key)) continue
         if (key === 'display' && value === 'flex') continue
+        if (key === 'flexDir' && value === 'row') continue
         break
       case 'VStack':
-        if (key === 'flexDir') continue
+        // Only skip flexDir if it's exactly 'column' (not responsive array or other value)
+        if (key === 'flexDir' && value === 'column') continue
         if (key === 'display' && value === 'flex') continue
         break
 

src/codegen/props/layout.ts

@@ -1,4 +1,5 @@
 import { addPx } from '../utils/add-px'
+import { checkAssetNode } from '../utils/check-asset-node'
 import { getPageNode } from '../utils/get-page-node'
 import { isChildWidthShrinker } from '../utils/is-child-width-shrinker'
 import { canBeAbsolute } from './position'
@@ -52,7 +53,9 @@ function _getLayoutProps(
         (node.parent &&
           'width' in node.parent &&
           node.parent.width > node.width)
-          ? undefined
+          ? checkAssetNode(node)
+            ? addPx(node.width)
+            : undefined
           : '100%',
       // if node does not have children, it is a single node, so it should be 100%
       h:

src/codegen/props/position.ts

@@ -17,7 +17,9 @@ export function canBeAbsolute(node: SceneNode): boolean {
       (isFreelayout(node.parent) &&
         'width' in node.parent &&
         'height' in node.parent &&
-        !isPageRoot(node.parent as SceneNode)))
+        node.width !== node.parent.width &&
+        node.height !== node.parent.height &&
+        !isPageRoot(node as SceneNode)))
   )
 }
 

src/codegen/responsive/__tests__/mergePropsToResponsive.test.ts

@@ -170,6 +170,59 @@ describe('mergePropsToResponsive', () => {
         display: ['none', null, 'flex'],
       },
     },
+    {
+      name: 'flexDir column at mobile, row at tablet and pc should produce responsive array',
+      input: new Map<BreakpointKey, Record<string, unknown>>([
+        ['mobile', { flexDir: 'column' }],
+        ['tablet', { flexDir: 'row' }],
+        ['pc', { flexDir: 'row' }],
+      ]),
+      expected: {
+        flexDir: ['column', null, 'row'],
+      },
+    },
+    {
+      name: 'alignItems with default value at first should become null',
+      input: new Map<BreakpointKey, Record<string, unknown>>([
+        ['mobile', { alignItems: 'flex-start' }],
+        ['tablet', { alignItems: 'center' }],
+        ['pc', { alignItems: 'center' }],
+      ]),
+      expected: {
+        alignItems: [null, null, 'center'],
+      },
+    },
+    {
+      name: 'justifyContent with default value at first should become null',
+      input: new Map<BreakpointKey, Record<string, unknown>>([
+        ['mobile', { justifyContent: 'flex-start' }],
+        ['tablet', { justifyContent: 'center' }],
+        ['pc', { justifyContent: 'center' }],
+      ]),
+      expected: {
+        justifyContent: [null, null, 'center'],
+      },
+    },
+    {
+      name: 'flexDir with default value (row) at first should become null',
+      input: new Map<BreakpointKey, Record<string, unknown>>([
+        ['mobile', { flexDir: 'row' }],
+        ['tablet', { flexDir: 'column' }],
+        ['pc', { flexDir: 'column' }],
+      ]),
+      expected: {
+        flexDir: [null, null, 'column'],
+      },
+    },
+    {
+      name: 'all default values should be omitted (empty result)',
+      input: new Map<BreakpointKey, Record<string, unknown>>([
+        ['mobile', { alignItems: 'flex-start', justifyContent: 'flex-start' }],
+        ['tablet', { alignItems: 'flex-start', justifyContent: 'flex-start' }],
+        ['pc', { alignItems: 'flex-start', justifyContent: 'flex-start' }],
+      ]),
+      expected: {},
+    },
   ]
 
   cases.forEach(({ name, input, expected }) => {

src/codegen/responsive/index.ts

@@ -1,3 +1,5 @@
+import { isDefaultProp } from '../utils/is-default-prop'
+
 // Breakpoint thresholds (by width)
 // Array indices: mobile=0, sm=1, tablet=2, lg=3, pc=4
 // Always 5 slots
@@ -93,6 +95,7 @@ function isEqual(a: PropValue, b: PropValue): boolean {
  * 1. If only index 0 has a value and the rest are null, return single value.
  * 2. Consecutive identical values keep the first, later ones become null.
  * 3. Remove trailing nulls only.
+ * 4. If the first value is default for that prop, replace with null.
  *
  * Examples:
  * ["100px", null, null] -> "100px" (only first has value)
@@ -101,9 +104,11 @@ function isEqual(a: PropValue, b: PropValue): boolean {
  * [null, null, "none"] -> [null, null, "none"] (keeps leading nulls)
  * [null, null, "none", null, null] -> [null, null, "none"] (trim trailing null)
  * ["100px", "200px", "200px"] -> ["100px", "200px"] (trailing equal treated as trailing null)
+ * ["flex-start", null, "center"] -> [null, null, "center"] (first value is default for alignItems)
  */
 export function optimizeResponsiveValue(
   arr: (PropValue | null)[],
+  key?: string,
 ): PropValue | (PropValue | null)[] {
   const nonNullValues = arr.filter((v) => v !== null)
   if (nonNullValues.length === 0) return null
@@ -123,11 +128,21 @@ export function optimizeResponsiveValue(
     }
   }
 
+  // If the first value is default for that prop, replace with null.
+  if (key && optimized[0] !== null && isDefaultProp(key, optimized[0])) {
+    optimized[0] = null
+  }
+
   // Remove trailing nulls.
   while (optimized.length > 0 && optimized[optimized.length - 1] === null) {
     optimized.pop()
   }
 
+  // If empty array after optimization, return null.
+  if (optimized.length === 0) {
+    return null
+  }
+
   // If only index 0 has value, return single value.
   if (optimized.length === 1 && optimized[0] !== null) {
     return optimized[0]
@@ -209,7 +224,7 @@ export function mergePropsToResponsive(
     }
 
     // Optimize: single when all same, otherwise array.
-    const optimized = optimizeResponsiveValue(valuesToOptimize)
+    const optimized = optimizeResponsiveValue(valuesToOptimize, key)
 
     if (optimized !== null) {
       result[key] = optimized

src/codegen/utils/is-default-prop.ts

@@ -24,6 +24,8 @@ const DEFAULT_PROPS_MAP = {
   gap: /\b0(px)?\b/,
 } as const
 export function isDefaultProp(prop: string, value: unknown) {
+  // Don't filter arrays (responsive values)
+  if (Array.isArray(value)) return false
   return (
     prop in DEFAULT_PROPS_MAP &&
     DEFAULT_PROPS_MAP[prop as keyof typeof DEFAULT_PROPS_MAP].test(