From 469394f74b268a29c51480483afd3751d89dd8ad Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 13 Feb 2025 14:15:03 -0500
Subject: [PATCH] fix: Builder generator includes width on Columns components
 (#1687)

---
 .changeset/flat-days-protect.md               |  5 ++
 packages/core/src/__tests__/builder.test.ts   | 56 +++++++++++++++++++
 .../core/src/generators/builder/generator.ts  |  1 +
 3 files changed, 62 insertions(+)
 create mode 100644 .changeset/flat-days-protect.md

diff --git a/.changeset/flat-days-protect.md b/.changeset/flat-days-protect.md
new file mode 100644
index 0000000000..3e4eb286d0
--- /dev/null
+++ b/.changeset/flat-days-protect.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Builder: include Column widths in generator
diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
index 0c975495ad..3dbac3c638 100644
--- a/packages/core/src/__tests__/builder.test.ts
+++ b/packages/core/src/__tests__/builder.test.ts
@@ -701,6 +701,62 @@ describe('Builder', () => {
     `);
   });
 
+  test('map Column widths', () => {
+    const content = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            component: {
+              name: 'Columns',
+              options: {
+                columns: [{ blocks: [], width: 50 }, { blocks: [] }],
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    const mitosisJson = builderContentToMitosisComponent(content);
+
+    const backToBuilder = componentToBuilder()({ component: mitosisJson });
+    expect(backToBuilder).toMatchInlineSnapshot(`
+      {
+        "data": {
+          "blocks": [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "actions": {},
+              "bindings": {},
+              "children": [],
+              "code": {
+                "actions": {},
+                "bindings": {},
+              },
+              "component": {
+                "name": "Columns",
+                "options": {
+                  "columns": [
+                    {
+                      "blocks": [],
+                      "width": 50,
+                    },
+                    {
+                      "blocks": [],
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+          "jsCode": "",
+          "tsCode": "",
+        },
+      }
+    `);
+  });
+
   test('nodes as props', () => {
     const content = {
       data: {
diff --git a/packages/core/src/generators/builder/generator.ts b/packages/core/src/generators/builder/generator.ts
index 670a7cefcd..b532e1b87f 100644
--- a/packages/core/src/generators/builder/generator.ts
+++ b/packages/core/src/generators/builder/generator.ts
@@ -87,6 +87,7 @@ const componentMappers: {
 
     const columns = block.children!.map((item) => ({
       blocks: item.children,
+      width: item.component?.options?.width,
     }));
 
     block.component!.options.columns = columns;