fix: spacing default styles were overridden with 'undefined' when AI theme was generated (#135)

components/editor/ai/message-controls.tsx

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 import { useEditorStore } from "@/store/editor-store";
 import { type ChatMessage as ChatMessageType } from "@/types/ai";
 import { ThemeStyles } from "@/types/theme";
+import { mergeThemeStylesWithDefaults } from "@/utils/theme-styles";
 import { Goal, RefreshCw } from "lucide-react";
 
 type MessageControlsProps = {
@@ -24,7 +25,7 @@ export function MessageControls({ message, onRetry }: MessageControlsProps) {
 
     setThemeState({
       ...themeState,
-      styles: themeStyles,
+      styles: mergeThemeStylesWithDefaults(themeStyles),
     });
   };
 

lib/ai/ai-theme-generator.ts

@@ -1,8 +1,8 @@
-import { defaultThemeState } from "@/config/theme";
 import { useEditorStore } from "@/store/editor-store";
 import { AIPromptData } from "@/types/ai";
 import { Theme } from "@/types/theme";
 import { buildPromptForAPI } from "@/utils/ai/ai-prompt";
+import { mergeThemeStylesWithDefaults } from "@/utils/theme-styles";
 
 /**
  * Generate a theme with AI using a text prompt
@@ -42,27 +42,20 @@ export async function generateThemeWithAI(prompt: string, options?: { signal?: A
 export function applyGeneratedTheme(themeStyles: Theme["styles"]) {
   const { themeState, setThemeState } = useEditorStore.getState();
 
+  // Merge the generated theme styles with the default theme styles
+  // if the generated theme styles are missing a value, use the default theme styles
+  const mergedStyles = mergeThemeStylesWithDefaults(themeStyles);
+
   if (!document.startViewTransition) {
     setThemeState({
       ...themeState,
-      styles: {
-        ...themeState.styles,
-        light: { ...defaultThemeState.styles.light, ...themeStyles.light },
-        dark: { ...defaultThemeState.styles.dark, ...themeStyles.dark },
-      },
+      styles: mergedStyles,
     });
   } else {
     document.startViewTransition(() => {
       setThemeState({
         ...themeState,
-        styles: {
-          ...themeState.styles,
-          light: {
-            ...defaultThemeState.styles.light,
-            ...themeStyles.light,
-          },
-          dark: { ...defaultThemeState.styles.dark, ...themeStyles.dark },
-        },
+        styles: mergedStyles,
       });
     });
   }

utils/theme-style-generator.ts

@@ -96,14 +96,13 @@ const generateThemeVariables = (
     getShadowMap({ styles: themeStyles, currentMode: mode })
   );
   const spacingVar =
-    mode === "light" && themeStyles["light"].spacing !== defaultLightThemeStyles.spacing
-      ? `\n  --spacing: ${themeStyles["light"].spacing};`
+    mode === "light"
+      ? `\n  --spacing: ${themeStyles["light"].spacing ?? defaultLightThemeStyles.spacing};`
       : "";
 
   const trackingVars =
-    mode === "light" &&
-    themeStyles["light"]["letter-spacing"] !== defaultLightThemeStyles["letter-spacing"]
-      ? `\n  --tracking-normal: ${themeStyles["light"]["letter-spacing"]};`
+    mode === "light"
+      ? `\n  --tracking-normal: ${themeStyles["light"]["letter-spacing"] ?? defaultLightThemeStyles["letter-spacing"]};`
       : "";
 
   return (

utils/theme-styles.ts

@@ -0,0 +1,11 @@
+import { defaultThemeState } from "@/config/theme";
+import { ThemeStyles } from "@/types/theme";
+
+export function mergeThemeStylesWithDefaults(themeStyles: ThemeStyles) {
+  const mergedStyles = {
+    ...defaultThemeState.styles,
+    light: { ...defaultThemeState.styles.light, ...themeStyles.light },
+    dark: { ...defaultThemeState.styles.dark, ...themeStyles.dark },
+  };
+  return mergedStyles;
+}