@seed-design/figma 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -14,6 +14,16 @@
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib/index.cjs"
+    },
+    "./codegen": {
+      "types": "./lib/codegen/index.d.ts",
+      "import": "./lib/codegen/index.js",
+      "require": "./lib/codegen/index.cjs"
+    },
+    "./codegen/targets/react": {
+      "types": "./lib/codegen/targets/react/index.d.ts",
+      "import": "./lib/codegen/targets/react/index.js",
+      "require": "./lib/codegen/targets/react/index.cjs"
     }
   },
   "main": "./lib/index.cjs",
@@ -28,16 +38,15 @@
     "lint:publish": "bun publint"
   },
   "dependencies": {
-    "@create-figma-plugin/utilities": "^3.0.2",
-    "@seed-design/css": "0.0.19",
-    "change-case": "^5.2.0",
-    "ts-pattern": "^5.2.0"
+    "@seed-design/css": "0.0.21",
+    "change-case": "^5.4.4",
+    "ts-pattern": "^5.7.0"
   },
   "devDependencies": {
-    "@figma/plugin-typings": "^1.108.0",
-    "@figma/rest-api-spec": "^0.23.0",
-    "@seed-design/figma-extractor": "^0.0.3",
-    "typescript": "^5.4.5"
+    "@figma/plugin-typings": "^1.110.0",
+    "@figma/rest-api-spec": "^0.29.0",
+    "@seed-design/figma-extractor": "^0.0.4",
+    "typescript": "^5.8.3"
   },
   "publishConfig": {
     "access": "public"

package/src/codegen/{targets/react/component/properties.type.ts → component-properties.ts}

@@ -1,19 +1,19 @@
-import type { InferFromDefinition } from "@/codegen/core";
+import type { InferComponentDefinition } from "@/codegen/core";
 import type * as metadata from "@/entities/data/__generated__/component-sets";
 
-export type ActionButtonProperties = InferFromDefinition<
+export type ActionButtonProperties = InferComponentDefinition<
   typeof metadata.actionButton.componentPropertyDefinitions
 >;
 
-export type ActionChipProperties = InferFromDefinition<
+export type ActionChipProperties = InferComponentDefinition<
   typeof metadata.actionChip.componentPropertyDefinitions
 >;
 
-export type ActionSheetProperties = InferFromDefinition<
+export type ActionSheetProperties = InferComponentDefinition<
   typeof metadata.actionSheet.componentPropertyDefinitions
 >;
 
-export type ActionSheetItemProperties = InferFromDefinition<{
+export type ActionSheetItemProperties = InferComponentDefinition<{
   "Label#15420:4": {
     type: "TEXT";
     defaultValue: "액션 버튼";
@@ -30,31 +30,31 @@ export type ActionSheetItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type AvatarProperties = InferFromDefinition<
+export type AvatarProperties = InferComponentDefinition<
   typeof metadata.avatar.componentPropertyDefinitions
 >;
 
-export type AvatarStackProperties = InferFromDefinition<
+export type AvatarStackProperties = InferComponentDefinition<
   typeof metadata.avatarStack.componentPropertyDefinitions
 >;
 
-export type BadgeProperties = InferFromDefinition<
+export type BadgeProperties = InferComponentDefinition<
   typeof metadata.badge.componentPropertyDefinitions
 >;
 
-export type CalloutProperties = InferFromDefinition<
+export type CalloutProperties = InferComponentDefinition<
   typeof metadata.callout.componentPropertyDefinitions
 >;
 
-export type CheckboxProperties = InferFromDefinition<
+export type CheckboxProperties = InferComponentDefinition<
   typeof metadata.checkbox.componentPropertyDefinitions
 >;
 
-export type ChipTabsProperties = InferFromDefinition<
+export type ChipTabsProperties = InferComponentDefinition<
   typeof metadata.chipTablist.componentPropertyDefinitions
 >;
 
-export type ChipTabsItemProperties = InferFromDefinition<{
+export type ChipTabsItemProperties = InferComponentDefinition<{
   "Label#8876:0": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -78,19 +78,19 @@ export type ChipTabsItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type ControlChipProperties = InferFromDefinition<
+export type ControlChipProperties = InferComponentDefinition<
   typeof metadata.controlChip.componentPropertyDefinitions
 >;
 
-export type ErrorStateProperties = InferFromDefinition<
+export type ErrorStateProperties = InferComponentDefinition<
   typeof metadata.errorState.componentPropertyDefinitions
 >;
 
-export type ExtendedActionSheetProperties = InferFromDefinition<
+export type ExtendedActionSheetProperties = InferComponentDefinition<
   typeof metadata.extendedActionSheet.componentPropertyDefinitions
 >;
 
-export type ExtendedActionSheetGroupProperties = InferFromDefinition<{
+export type ExtendedActionSheetGroupProperties = InferComponentDefinition<{
   "Action Count": {
     type: "VARIANT";
     defaultValue: "8";
@@ -98,7 +98,7 @@ export type ExtendedActionSheetGroupProperties = InferFromDefinition<{
   };
 }>;
 
-export type ExtendedActionSheetItemProperties = InferFromDefinition<{
+export type ExtendedActionSheetItemProperties = InferComponentDefinition<{
   "Show Prefix Icon#17043:5": {
     type: "BOOLEAN";
     defaultValue: true;
@@ -124,47 +124,47 @@ export type ExtendedActionSheetItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type ExtendedFabProperties = InferFromDefinition<
+export type ExtendedFabProperties = InferComponentDefinition<
   typeof metadata.extendedFloatingActionButton.componentPropertyDefinitions
 >;
 
-export type FabProperties = InferFromDefinition<
+export type FabProperties = InferComponentDefinition<
   typeof metadata.floatingActionButton.componentPropertyDefinitions
 >;
 
-export type HelpBubbleProperties = InferFromDefinition<
+export type HelpBubbleProperties = InferComponentDefinition<
   typeof metadata.helpBubble.componentPropertyDefinitions
 >;
 
-export type IdentityPlaceholderProperties = InferFromDefinition<
+export type IdentityPlaceholderProperties = InferComponentDefinition<
   typeof metadata.identityPlaceholder.componentPropertyDefinitions
 >;
 
-export type InlineBannerProperties = InferFromDefinition<
+export type InlineBannerProperties = InferComponentDefinition<
   typeof metadata.inlineBanner.componentPropertyDefinitions
 >;
 
-export type MannerTempBadgeProperties = InferFromDefinition<
+export type MannerTempBadgeProperties = InferComponentDefinition<
   typeof metadata.mannerTempBadge.componentPropertyDefinitions
 >;
 
-export type MultilineTextFieldProperties = InferFromDefinition<
+export type MultilineTextFieldProperties = InferComponentDefinition<
   typeof metadata.multilineTextField.componentPropertyDefinitions
 >;
 
-export type ProgressCircleProperties = InferFromDefinition<
+export type ProgressCircleProperties = InferComponentDefinition<
   typeof metadata.progressCircle.componentPropertyDefinitions
 >;
 
-export type ReactionButtonProperties = InferFromDefinition<
+export type ReactionButtonProperties = InferComponentDefinition<
   typeof metadata.reactionButton.componentPropertyDefinitions
 >;
 
-export type SegmentedControlProperties = InferFromDefinition<
+export type SegmentedControlProperties = InferComponentDefinition<
   typeof metadata.segmentedControl.componentPropertyDefinitions
 >;
 
-export type SegmentedControlItemProperties = InferFromDefinition<{
+export type SegmentedControlItemProperties = InferComponentDefinition<{
   "Label#11366:15": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -183,31 +183,31 @@ export type SegmentedControlItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type SelectBoxGroupProperties = InferFromDefinition<
+export type SelectBoxGroupProperties = InferComponentDefinition<
   typeof metadata.templateSelectBoxGroup.componentPropertyDefinitions
 >;
 
-export type SelectBoxProperties = InferFromDefinition<
+export type SelectBoxProperties = InferComponentDefinition<
   typeof metadata.selectBox.componentPropertyDefinitions
 >;
 
-export type SkeletonProperties = InferFromDefinition<
+export type SkeletonProperties = InferComponentDefinition<
   typeof metadata.skeleton.componentPropertyDefinitions
 >;
 
-export type SnackbarProperties = InferFromDefinition<
+export type SnackbarProperties = InferComponentDefinition<
   typeof metadata.snackbar.componentPropertyDefinitions
 >;
 
-export type SwitchProperties = InferFromDefinition<
+export type SwitchProperties = InferComponentDefinition<
   typeof metadata.switch.componentPropertyDefinitions
 >;
 
-export type TabsProperties = InferFromDefinition<
+export type TabsProperties = InferComponentDefinition<
   typeof metadata.tablist.componentPropertyDefinitions
 >;
 
-export type TabsHugItemProperties = InferFromDefinition<{
+export type TabsHugItemProperties = InferComponentDefinition<{
   "Label#4478:2": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -229,7 +229,7 @@ export type TabsHugItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type TabsFillItemProperties = InferFromDefinition<{
+export type TabsFillItemProperties = InferComponentDefinition<{
   "Label#4478:2": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -251,23 +251,23 @@ export type TabsFillItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type TextButtonProperties = InferFromDefinition<
+export type TextButtonProperties = InferComponentDefinition<
   typeof metadata.textButton.componentPropertyDefinitions
 >;
 
-export type TextFieldProperties = InferFromDefinition<
+export type TextFieldProperties = InferComponentDefinition<
   typeof metadata.textField.componentPropertyDefinitions
 >;
 
-export type ToggleButtonProperties = InferFromDefinition<
+export type ToggleButtonProperties = InferComponentDefinition<
   typeof metadata.toggleButton.componentPropertyDefinitions
 >;
 
-export type AppBarProperties = InferFromDefinition<
+export type AppBarProperties = InferComponentDefinition<
   typeof metadata.standardNavigation.componentPropertyDefinitions
 >;
 
-export type AppBarMainProperties = InferFromDefinition<{
+export type AppBarMainProperties = InferComponentDefinition<{
   "Show Right#16958:13": {
     type: "BOOLEAN";
     defaultValue: false;
@@ -301,7 +301,7 @@ export type AppBarMainProperties = InferFromDefinition<{
   };
 }>;
 
-export type AppBarLeftProperties = InferFromDefinition<{
+export type AppBarLeftProperties = InferComponentDefinition<{
   Action: {
     type: "VARIANT";
     defaultValue: "Back";
@@ -309,7 +309,7 @@ export type AppBarLeftProperties = InferFromDefinition<{
   };
 }>;
 
-export type AppBarRightProperties = InferFromDefinition<{
+export type AppBarRightProperties = InferComponentDefinition<{
   Type: {
     type: "VARIANT";
     defaultValue: "1 Icon";

package/src/codegen/core/codegen.ts

@@ -9,11 +9,12 @@ import type {
   NormalizedVectorNode,
 } from "@/normalizer";
 import { match } from "ts-pattern";
-import { inferLayout, type ElementNode, type ElementTransformer } from "../core";
-import { appendSource, createElement } from "../core/jsx";
-import { applyInferredLayout } from "./infer-layout";
+import { appendSource, createElement, stringifyElement, type ElementNode } from "../core/jsx";
+import { codegenOptionsContext, useCodegenOptions, type CodegenOptions } from "./context";
+import type { ElementTransformer } from "./element-transformer";
+import { applyInferredLayout, inferLayout } from "./infer-layout";
 
-export interface CodegenTransformerDeps {
+export interface CodeGeneratorDeps {
   frameTransformer: ElementTransformer<
     NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode
   >;
@@ -22,23 +23,23 @@ export interface CodegenTransformerDeps {
   instanceTransformer: ElementTransformer<NormalizedInstanceNode>;
   vectorTransformer: ElementTransformer<NormalizedVectorNode>;
   booleanOperationTransformer: ElementTransformer<NormalizedBooleanOperationNode>;
-  shouldInferAutoLayout: boolean;
 }
 
-export function createCodegenTransformer({
+export function createCodeGenerator({
   frameTransformer,
   textTransformer,
   rectangleTransformer,
   instanceTransformer,
   vectorTransformer,
   booleanOperationTransformer,
-  shouldInferAutoLayout,
-}: CodegenTransformerDeps): (node: NormalizedSceneNode) => ElementNode | undefined {
+}: CodeGeneratorDeps) {
   function traverse(node: NormalizedSceneNode): ElementNode | undefined {
     if ("visible" in node && !node.visible) {
       return;
     }
 
+    const { shouldInferAutoLayout } = useCodegenOptions();
+
     const result = match(node)
       .with({ type: "FRAME" }, (node) =>
         shouldInferAutoLayout
@@ -61,5 +62,19 @@ export function createCodegenTransformer({
     return;
   }
 
-  return (node) => traverse(node);
+  function generateJsxTree(node: NormalizedSceneNode, options: CodegenOptions) {
+    return codegenOptionsContext.run(options, () => traverse(node));
+  }
+
+  function generateCode(
+    node: NormalizedSceneNode,
+    options: CodegenOptions & { shouldPrintSource: boolean },
+  ) {
+    const jsxTree = generateJsxTree(node, options);
+    return jsxTree
+      ? stringifyElement(jsxTree, { printSource: options.shouldPrintSource })
+      : undefined;
+  }
+
+  return { generateJsxTree, generateCode };
 }

package/src/codegen/core/{component.ts → component-handler.ts}

@@ -1,7 +1,7 @@
 import type { NormalizedInstanceNode } from "@/normalizer";
 import type { ElementNode } from "./jsx";
 
-export interface ComponentTransformer<
+export interface ComponentHandler<
   T extends
     NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"],
 > {
@@ -9,9 +9,9 @@ export interface ComponentTransformer<
   transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode;
 }
 
-export function defineComponentTransformer<T extends NormalizedInstanceNode["componentProperties"]>(
+export function defineComponentHandler<T extends NormalizedInstanceNode["componentProperties"]>(
   key: string,
   transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode,
-): ComponentTransformer<T> {
+): ComponentHandler<T> {
   return { key, transform };
 }

package/src/codegen/core/component-type-helper.ts

@@ -0,0 +1,35 @@
+import type { ComponentPropertyType, InstanceSwapPreferredValue } from "@figma/rest-api-spec";
+
+export interface ComponentPropertyDefinition {
+  type: ComponentPropertyType;
+  preferredValues?: InstanceSwapPreferredValue[];
+  variantOptions?: string[];
+}
+
+export type InferComponentPropertyType<T extends ComponentPropertyDefinition> =
+  T["type"] extends "TEXT"
+    ? string
+    : T["type"] extends "BOOLEAN"
+      ? boolean
+      : T["type"] extends "INSTANCE_SWAP"
+        ? string
+        : T["type"] extends "VARIANT"
+          ? T["variantOptions"] extends string[]
+            ? T["variantOptions"][number]
+            : never
+          : never;
+
+export type InferComponentDefinition<T extends Record<string, ComponentPropertyDefinition>> = {
+  [K in keyof T]: {
+    type: T[K]["type"];
+    value: InferComponentPropertyType<T[K]>;
+    readonly boundVariables?: {
+      [field in VariableBindableComponentPropertyField]?: VariableAlias;
+    };
+  } & (T[K]["type"] extends "INSTANCE_SWAP"
+    ? {
+        componentKey: string;
+        preferredValues: InstanceSwapPreferredValue[];
+      }
+    : {});
+};

package/src/codegen/core/context.ts

@@ -0,0 +1,20 @@
+import { AsyncLocalStorage } from "async_hooks";
+
+export interface CodegenOptions {
+  shouldInferAutoLayout: boolean;
+  shouldInferVariableName: boolean;
+}
+
+export const codegenOptionsContext = new AsyncLocalStorage<CodegenOptions>();
+
+export function useCodegenOptions(): CodegenOptions {
+  const options = codegenOptionsContext.getStore();
+
+  if (!options) {
+    throw new Error(
+      "Trying to get codegen options outside of codegen context. Did you forget to call `codegenOptionsContext.run`?",
+    );
+  }
+
+  return options;
+}

package/src/codegen/core/index.ts

@@ -1,19 +1,21 @@
-export type { CodegenTransformerDeps } from "./codegen";
-export type { ComponentTransformer } from "./component";
+export type { CodeGeneratorDeps } from "./codegen";
+export type { ComponentHandler } from "./component-handler";
 export type {
   ComponentPropertyDefinition,
-  InferFromDefinition,
-  InferPropertyType,
-} from "./component.types";
-export type { ElementTransformer } from "./element";
+  InferComponentDefinition,
+  InferComponentPropertyType,
+} from "./component-type-helper";
+export type { CodegenOptions } from "./context";
+export type { ElementTransformer } from "./element-transformer";
 export type { ElementNode } from "./jsx";
-export type { PropsTransformer } from "./props";
-export type { ValueTransformer } from "./value";
+export type { PropsConverter } from "./props-converter";
+export type { ValueResolver } from "./value-resolver";
 
-export { createCodegenTransformer } from "./codegen";
-export { defineComponentTransformer } from "./component";
-export { defineElementTransformer } from "./element";
+export { createCodeGenerator } from "./codegen";
+export { defineComponentHandler } from "./component-handler";
+export { useCodegenOptions } from "./context";
+export { defineElementTransformer } from "./element-transformer";
 export { inferLayout } from "./infer-layout";
-export { createElement, cloneElement } from "./jsx";
-export { createPropsTransformer, definePropsTransformer } from "./props";
-export { createValueTransformer } from "./value";
+export { cloneElement, createElement } from "./jsx";
+export { createPropsConverter, definePropsConverter } from "./props-converter";
+export { createValueResolver } from "./value-resolver";

package/src/codegen/core/infer-layout.test.ts

@@ -10,6 +10,7 @@ function createTestNode(
 ): NormalizedFrameTrait {
   return {
     id,
+    layoutMode: "NONE",
     absoluteBoundingBox: boundingBox,
     children,
   } as NormalizedFrameTrait;
@@ -20,7 +21,7 @@ describe("inferLayout", () => {
   it("should return NONE layout mode for a parent with no children", () => {
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 100, height: 100 });
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("NONE");
   });
@@ -32,7 +33,7 @@ describe("inferLayout", () => {
       childNode,
     ]);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("HORIZONTAL");
     expect(result.primaryAxisSizingMode).toBe("AUTO");
@@ -55,7 +56,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 500, height: 100 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("HORIZONTAL");
     expect(result.primaryAxisSizingMode).toBe("AUTO");
@@ -76,7 +77,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 100, height: 200 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("VERTICAL");
     expect(result.primaryAxisSizingMode).toBe("AUTO");
@@ -97,7 +98,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 500, height: 100 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("HORIZONTAL");
     expect(result.primaryAxisAlignItems).toBe("SPACE_BETWEEN");
@@ -114,7 +115,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 500, height: 100 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("HORIZONTAL");
     expect(result.counterAxisAlignItems).toBe("CENTER");
@@ -129,7 +130,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 500, height: 60 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("HORIZONTAL");
     expect(result.counterAxisAlignItems).toBe("MAX");
@@ -143,7 +144,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 500, height: 100 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     // Based on the implementation, this actually returns "FIXED" not "AUTO"
     expect(result.counterAxisSizingMode).toBe("FIXED");
@@ -160,7 +161,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 100, height: 200 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     // Based on the implementation, this actually returns "HORIZONTAL" not "VERTICAL"
     // This could be due to the specific layout of the test nodes or other factors
@@ -175,7 +176,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 200, height: 100 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("HORIZONTAL");
     // Should handle negative spacing by clamping to 0 if it's small
@@ -187,7 +188,7 @@ describe("inferLayout", () => {
     const childNode = createTestNode("child", { x: 0, y: 0, width: 50, height: 40 });
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 0, height: 0 }, [childNode]);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     // Should still give reasonable results
     expect(result.layoutMode).toBe("HORIZONTAL");
@@ -204,7 +205,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 500, height: 100 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("HORIZONTAL");
     // Should use median of [10, 20] which is 15
@@ -220,7 +221,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 500, height: 100 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("HORIZONTAL");
     // Check that we got some reasonable values despite the variety
@@ -237,7 +238,7 @@ describe("inferLayout", () => {
     // Container with height 200, content height 60 (2 * 20 + 20 spacing), centered at middle
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 100, height: 200 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("VERTICAL");
     // While the example is set up with items that appear centered, the algorithm
@@ -261,7 +262,7 @@ describe("inferLayout", () => {
     }
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 700, height: 100 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     expect(result.layoutMode).toBe("HORIZONTAL");
     expect(result.itemSpacing).toBe(10);
@@ -276,7 +277,7 @@ describe("inferLayout", () => {
     ];
     const parentNode = createTestNode("parent", { x: 0, y: 0, width: 200, height: 200 }, children);
 
-    const result = inferLayout(parentNode);
+    const result = inferLayout(parentNode).properties;
 
     // The algorithm should still pick a layout direction, likely based on bounding box
     expect(result.layoutMode).not.toBe("NONE");

package/src/codegen/core/infer-layout.ts

@@ -107,7 +107,7 @@ export function inferLayout(parentNode: LayoutNode): InferResult {
 
   if (children.length === 0) {
     return {
-      properties: {},
+      properties: result,
       childProperties: {},
     }; // Cannot infer layout for no children
   }