From 5b2413dff2aac8ef1ddaecd1ae0aea4026a23c0d Mon Sep 17 00:00:00 2001
From: Parth <parthlad3915@gmail.com>
Date: Sun, 22 Feb 2026 21:18:26 -0500
Subject: [PATCH] fix(builder): resolve property clearing glitches and improve
 horizontal layout (#55)

- Update mergeUpdates to handle undefined values by deleting keys, allowing properties like Direction and Columns to be cleared in the builder.
- Default to 2 columns when direction is set to "horizontal" in Radio and Checkbox Group fields for better visual feedback.
- Remove inline flex-wrap layout in favor of a more consistent grid for horizontal fields.
---
 apps/web/app/(builder)/lib/store.ts              | 5 ++++-
 apps/web/registry/base/fields/checkbox-group.tsx | 8 ++++----
 apps/web/registry/base/fields/radio.tsx          | 8 ++++----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/web/app/(builder)/lib/store.ts b/apps/web/app/(builder)/lib/store.ts
index 640c1d4..fd0943c 100644
--- a/apps/web/app/(builder)/lib/store.ts
+++ b/apps/web/app/(builder)/lib/store.ts
@@ -110,7 +110,10 @@ function mergeUpdates<T extends object>(target: T, source: Partial<T>) {
       !Array.isArray(targetValue)
     ) {
       mergeUpdates(targetValue as object, sourceValue as object);
-    } else if (sourceValue !== undefined) {
+    } else if (sourceValue === undefined) {
+      // Explicitly cleared — remove the key so field defaults take effect
+      delete target[key];
+    } else {
       target[key] = sourceValue as T[keyof T];
     }
   }
diff --git a/apps/web/registry/base/fields/checkbox-group.tsx b/apps/web/registry/base/fields/checkbox-group.tsx
index 3948b4f..54f9b74 100644
--- a/apps/web/registry/base/fields/checkbox-group.tsx
+++ b/apps/web/registry/base/fields/checkbox-group.tsx
@@ -61,12 +61,12 @@ function getOptionGroupLayoutClassName({
   columns?: OptionGroupColumns;
 }) {
   const usesGridColumns = variant === "card" || direction === "horizontal";
-  const effectiveColumns = usesGridColumns ? columns : undefined;
+  // Default to 2 columns for horizontal direction so users see immediate feedback
+  const effectiveColumns = usesGridColumns
+    ? (columns ?? (direction === "horizontal" ? 2 : undefined))
+    : undefined;
 
   if (!effectiveColumns || effectiveColumns === 1) {
-    if (variant === "default" && direction === "horizontal") {
-      return "flex flex-wrap gap-x-4 gap-y-2";
-    }
     return "flex flex-col gap-2";
   }
 
diff --git a/apps/web/registry/base/fields/radio.tsx b/apps/web/registry/base/fields/radio.tsx
index 0b95ef5..2e87f39 100644
--- a/apps/web/registry/base/fields/radio.tsx
+++ b/apps/web/registry/base/fields/radio.tsx
@@ -54,12 +54,12 @@ function getOptionGroupLayoutClassName({
   columns?: OptionGroupColumns;
 }) {
   const usesGridColumns = variant === "card" || direction === "horizontal";
-  const effectiveColumns = usesGridColumns ? columns : undefined;
+  // Default to 2 columns for horizontal direction so users see immediate feedback
+  const effectiveColumns = usesGridColumns
+    ? (columns ?? (direction === "horizontal" ? 2 : undefined))
+    : undefined;
 
   if (!effectiveColumns || effectiveColumns === 1) {
-    if (variant === "default" && direction === "horizontal") {
-      return "flex flex-wrap gap-x-4 gap-y-2";
-    }
     return "flex flex-col gap-2";
   }