@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.10 → 0.2.16

package/dist/plugins/theme-css-generator.js

@@ -1,354 +1,300 @@
-import { resolve } from 'path'
-import { existsSync, mkdirSync, writeFileSync } from 'fs'
-import type { Plugin } from 'vite'
-import type { MultiThemeConfig } from '../themes/types'
-import { defaultThemes } from '../themes/base-themes'
-
-export default function themeCSSGenerator(): Plugin {
-  let config: any
-
-  // Helper function to safely convert values to strings
-  const valueToString = (value: any): string => {
-    if (Array.isArray(value)) {
-      return value.join(', ')
-    }
-    if (typeof value === 'object' && value !== null) {
-      return JSON.stringify(value)
-    }
-    return String(value)
-  }
-
-  // Helper function to create CSS variable name
-  const createCSSVarName = (path: string[]): string => {
-    return `--cs-${path.join('-').replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`
-  }
-
-  // Generate @font-face declarations from font configuration
-  const generateFontFaces = (themeObj: MultiThemeConfig): string => {
-    let css = ''
-    
-    if (!themeObj.fonts) return css
-    
-    Object.entries(themeObj.fonts).forEach(([, fontConfig]) => {
-      if (fontConfig.source?.type === 'custom' && fontConfig.source.files?.woff2) {
-        const { family, source, weights, display } = fontConfig
-        
-        if (weights && Array.isArray(weights) && weights.length > 0) {
-          const minWeight = Math.min(...weights)
-          const maxWeight = Math.max(...weights)
-          
-          css += `\n@font-face {\n`
-          css += `  font-family: '${family}';\n`
-          css += `  src: url('${source.files.woff2}') format('woff2-variations');\n`
-          css += `  font-weight: ${minWeight} ${maxWeight};\n`
-          css += `  font-display: ${display || 'swap'};\n`
-          css += `}\n`
+import { resolve } from 'path';
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { defaultThemes } from '../themes/base-themes';
+export default function themeCSSGenerator() {
+    let config;
+    // Helper function to safely convert values to strings
+    const valueToString = (value) => {
+        if (Array.isArray(value)) {
+            return value.join(', ');
         }
-      }
-    })
-    
-    return css
-  }
-
-  // NEW: Extract breakpoints from anywhere in the theme object
-  const extractBreakpoints = (obj: any): any => {
-    let breakpoints: any = {}
-    
-    const searchForBreakpoints = (currentObj: any, currentPath: string[] = []) => {
-      if (typeof currentObj !== 'object' || currentObj === null) {
-        return
-      }
-      
-      Object.entries(currentObj).forEach(([key, value]) => {
-        if (key === 'breakpoints' && typeof value === 'object' && value !== null) {
-          // Found breakpoints, extract them
-          Object.entries(value).forEach(([bpKey, bpValue]) => {
-            if (typeof bpValue === 'string' || typeof bpValue === 'number') {
-              breakpoints[bpKey] = bpValue
+        if (typeof value === 'object' && value !== null) {
+            return JSON.stringify(value);
+        }
+        return String(value);
+    };
+    // Helper function to create CSS variable name
+    const createCSSVarName = (path) => {
+        return `--cs-${path.join('-').replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`;
+    };
+    // Generate @font-face declarations from font configuration
+    const generateFontFaces = (themeObj) => {
+        let css = '';
+        if (!themeObj.fonts)
+            return css;
+        Object.entries(themeObj.fonts).forEach(([, fontConfig]) => {
+            if (fontConfig.source?.type === 'custom' && fontConfig.source.files?.woff2) {
+                const { family, source, weights, display } = fontConfig;
+                if (weights && Array.isArray(weights) && weights.length > 0) {
+                    const minWeight = Math.min(...weights);
+                    const maxWeight = Math.max(...weights);
+                    css += `\n@font-face {\n`;
+                    css += `  font-family: '${family}';\n`;
+                    css += `  src: url('${source.files.woff2}') format('woff2-variations');\n`;
+                    css += `  font-weight: ${minWeight} ${maxWeight};\n`;
+                    css += `  font-display: ${display || 'swap'};\n`;
+                    css += `}\n`;
+                }
+            }
+        });
+        return css;
+    };
+    // NEW: Extract breakpoints from anywhere in the theme object
+    const extractBreakpoints = (obj) => {
+        let breakpoints = {};
+        const searchForBreakpoints = (currentObj, currentPath = []) => {
+            if (typeof currentObj !== 'object' || currentObj === null) {
+                return;
             }
-          })
-        } else if (typeof value === 'object' && value !== null) {
-          // Recursively search deeper
-          searchForBreakpoints(value, [...currentPath, key])
+            Object.entries(currentObj).forEach(([key, value]) => {
+                if (key === 'breakpoints' && typeof value === 'object' && value !== null) {
+                    // Found breakpoints, extract them
+                    Object.entries(value).forEach(([bpKey, bpValue]) => {
+                        if (typeof bpValue === 'string' || typeof bpValue === 'number') {
+                            breakpoints[bpKey] = bpValue;
+                        }
+                    });
+                }
+                else if (typeof value === 'object' && value !== null) {
+                    // Recursively search deeper
+                    searchForBreakpoints(value, [...currentPath, key]);
+                }
+            });
+        };
+        searchForBreakpoints(obj);
+        return breakpoints;
+    };
+    // NEW: Generate breakpoint CSS variables and @custom-media queries
+    const generateBreakpointVariables = (breakpoints) => {
+        let css = '';
+        if (Object.keys(breakpoints).length === 0) {
+            return css;
+        }
+        css += `  /* Breakpoint Variables */\n`;
+        Object.entries(breakpoints).forEach(([key, value]) => {
+            css += `  --cs-breakpoints-${key}: ${value};\n`;
+        });
+        css += '\n';
+        // NEW: Generate @custom-media queries for use in media queries
+        css += `  /* Custom Media Queries for Breakpoints */\n`;
+        Object.entries(breakpoints).forEach(([key, value]) => {
+            css += `  @custom-media --bp-${key} (min-width: ${value});\n`;
+        });
+        css += '\n';
+        return css;
+    };
+    // Recursively generate CSS variables from theme object
+    const generateCSSVariables = (obj, path = []) => {
+        let css = '';
+        if (typeof obj !== 'object' || obj === null) {
+            return css;
         }
-      })
-    }
-    
-    searchForBreakpoints(obj)
-    return breakpoints
-  }
-
-  // NEW: Generate breakpoint CSS variables and @custom-media queries
-  const generateBreakpointVariables = (breakpoints: any): string => {
-    let css = ''
-    if (Object.keys(breakpoints).length === 0) { return css }
-    
-    css += `  /* Breakpoint Variables */\n`
-    Object.entries(breakpoints).forEach(([key, value]) => {
-      css += `  --cs-breakpoints-${key}: ${value};\n`
-    })
-    css += '\n'
-    
-    // NEW: Generate @custom-media queries for use in media queries
-    css += `  /* Custom Media Queries for Breakpoints */\n`
-    Object.entries(breakpoints).forEach(([key, value]) => {
-      css += `  @custom-media --bp-${key} (min-width: ${value});\n`
-    })
-    css += '\n'
-    
-    return css
-  }
-
-  // Recursively generate CSS variables from theme object
-  const generateCSSVariables = (obj: any, path: string[] = []): string => {
-    let css = ''
-    
-    if (typeof obj !== 'object' || obj === null) {
-      return css
-    }
-    
-    Object.entries(obj).forEach(([key, value]) => {
-      const currentPath = [...path, key]
-      
-      if (typeof value === 'string' || typeof value === 'number') {
-        // Generate CSS variable for primitive values
-        const cssVarName = createCSSVarName(currentPath)
-        css += `  ${cssVarName}: ${value};\n`
-      } else if (Array.isArray(value)) {
-        // Handle arrays (like font weights, tags)
-        const cssVarName = createCSSVarName(currentPath)
-        css += `  ${cssVarName}: ${valueToString(value)};\n`
-      } else if (typeof value === 'object' && value !== null) {
-        // Recursively process nested objects
-        css += generateCSSVariables(value, currentPath)
-      }
-    })
-    
-    return css
-  }
-
-  // Generate CSS from theme object using structured traversal
-  const generateSingleThemeCSS = (themeName: string, themeObj: MultiThemeConfig): string => {
-    // Always generate light + dark mode CSS
-    return generateLightDarkCSS(themeName, themeObj)
-  }
-
-  // Generate light and dark mode CSS
-  const generateLightDarkCSS = (themeName: string, themeObj: MultiThemeConfig): string => {
-    let css = `/* ${themeName} Theme - Light & Dark Modes */\n`
-    
-    // Generate @font-face declarations
-    css += generateFontFaces(themeObj)
-    
-    // NEW: Extract breakpoints from anywhere in the theme
-    const breakpoints = extractBreakpoints(themeObj)
-    
-    // Generate light mode variables (default)
-    css += `:root {\n`
-    css += `  /* Light Mode Variables */\n`
-    
-    // NEW: Generate breakpoint variables first
-    css += generateBreakpointVariables(breakpoints)
-    
-    // Generate all other CSS variables
-    css += generateCSSVariables(themeObj)
-    css += '}\n\n'
-    
-    // Generate dark mode variables
-    css += `.dark {\n`
-    css += `  /* Dark Mode Variables */\n`
-    
-    if (themeObj.modes?.dark?.colors && Object.keys(themeObj.modes.dark.colors).length > 0) {
-      // Use custom dark mode colors if defined
-      css += generateDarkModeColors(themeObj.modes.dark.colors)
-    } else {
-      // Generate automatic dark mode by adapting colors
-      css += generateDarkModeVariables(themeObj)
-    }
-    
-    css += '}\n'
-    return css
-  }
-
-  // Generate dark mode colors from explicit color definitions
-  const generateDarkModeColors = (darkColors: any): string => {
-    let css = ''
-    
-    Object.entries(darkColors).forEach(([colorKey, colorValue]) => {
-      if (typeof colorValue === 'object' && colorValue !== null) {
-        // Handle nested color objects (like surface, text, etc.)
-        Object.entries(colorValue).forEach(([subKey, subValue]) => {
-          if (typeof subValue === 'string' || typeof subValue === 'number') {
-            css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`
-          }
-        })
-      } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
-        // Handle direct color values
-        css += `  --cs-colors-${colorKey}: ${colorValue};\n`
-      }
-    })
-    
-    return css
-  }
-
-  // Generate dark mode variables by adapting light mode colors
-  const generateDarkModeVariables = (themeObj: MultiThemeConfig): string => {
-    // Create a dark variant of the theme by adapting colors
-    const darkTheme = adaptThemeForDarkMode(themeObj)
-    
-    // Generate CSS variables only for the properties that exist in the dark theme
-    let css = ''
-    
-    if (darkTheme.colors) {
-      // Generate CSS variables for colors
-      Object.entries(darkTheme.colors).forEach(([colorKey, colorValue]) => {
-        if (typeof colorValue === 'object' && colorValue !== null) {
-          // Handle nested color objects (like surface, text, etc.)
-          Object.entries(colorValue).forEach(([subKey, subValue]) => {
-            if (typeof subValue === 'string' || typeof subValue === 'number') {
-              css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`
+        Object.entries(obj).forEach(([key, value]) => {
+            const currentPath = [...path, key];
+            if (typeof value === 'string' || typeof value === 'number') {
+                // Generate CSS variable for primitive values
+                const cssVarName = createCSSVarName(currentPath);
+                css += `  ${cssVarName}: ${value};\n`;
             }
-          })
-        } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
-          // Handle direct color values
-          css += `  --cs-colors-${colorKey}: ${colorValue};\n`
+            else if (Array.isArray(value)) {
+                // Handle arrays (like font weights, tags)
+                const cssVarName = createCSSVarName(currentPath);
+                css += `  ${cssVarName}: ${valueToString(value)};\n`;
+            }
+            else if (typeof value === 'object' && value !== null) {
+                // Recursively process nested objects
+                css += generateCSSVariables(value, currentPath);
+            }
+        });
+        return css;
+    };
+    // Generate CSS from theme object using structured traversal
+    const generateSingleThemeCSS = (themeName, themeObj) => {
+        // Always generate light + dark mode CSS
+        return generateLightDarkCSS(themeName, themeObj);
+    };
+    // Generate light and dark mode CSS
+    const generateLightDarkCSS = (themeName, themeObj) => {
+        let css = `/* ${themeName} Theme - Light & Dark Modes */\n`;
+        // Generate @font-face declarations
+        css += generateFontFaces(themeObj);
+        // NEW: Extract breakpoints from anywhere in the theme
+        const breakpoints = extractBreakpoints(themeObj);
+        // Generate light mode variables (default)
+        css += `:root {\n`;
+        css += `  /* Light Mode Variables */\n`;
+        // NEW: Generate breakpoint variables first
+        css += generateBreakpointVariables(breakpoints);
+        // Generate all other CSS variables
+        css += generateCSSVariables(themeObj);
+        css += '}\n\n';
+        // Generate dark mode variables
+        css += `.dark {\n`;
+        css += `  /* Dark Mode Variables */\n`;
+        if (themeObj.modes?.dark?.colors && Object.keys(themeObj.modes.dark.colors).length > 0) {
+            // Use custom dark mode colors if defined
+            css += generateDarkModeColors(themeObj.modes.dark.colors);
         }
-      })
-    }
-    
-    // Add some basic dark mode variables for testing
-    css += `  --cs-colors-surface-background: #0f172a;\n`
-    css += `  --cs-colors-surface-surface: #1e293b;\n`
-    css += `  --cs-colors-surface-border: #334155;\n`
-    css += `  --cs-colors-surface-divider: #475569;\n`
-    css += `  --cs-colors-text-primary: #f8fafc;\n`
-    css += `  --cs-colors-text-secondary: #cbd5e1;\n`
-    css += `  --cs-colors-text-muted: #94a3b8;\n`
-    
-    return css
-  }
-
-  // Adapt theme for dark mode
-  const adaptThemeForDarkMode = (_themeObj: MultiThemeConfig): Partial<MultiThemeConfig> => {
-    // This would implement your dark mode color adaptation logic
-    // You can use the existing ColorManager or implement custom logic
-    return {
-      colors: {
-        surface: {
-          background: '#0f172a', // Dark background
-          surface: '#1e293b',    // Dark surface
-          border: '#334155',     // Dark border
-          divider: '#475569'     // Dark divider
-        },
-        text: {
-          primary: '#f8fafc',    // Light text
-          secondary: '#cbd5e1',  // Muted text
-          muted: '#94a3b8',      // Muted text
-          inverse: '#0f172a',    // Dark text for light backgrounds
-          onPrimary: '#0f172a',  // Text on primary color
-          onSecondary: '#0f172a', // Text on secondary color
-          onSurface: '#f8fafc'   // Text on surface
+        else {
+            // Generate automatic dark mode by adapting colors
+            css += generateDarkModeVariables(themeObj);
+        }
+        css += '}\n';
+        return css;
+    };
+    // Generate dark mode colors from explicit color definitions
+    const generateDarkModeColors = (darkColors) => {
+        let css = '';
+        Object.entries(darkColors).forEach(([colorKey, colorValue]) => {
+            if (typeof colorValue === 'object' && colorValue !== null) {
+                // Handle nested color objects (like surface, text, etc.)
+                Object.entries(colorValue).forEach(([subKey, subValue]) => {
+                    if (typeof subValue === 'string' || typeof subValue === 'number') {
+                        css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`;
+                    }
+                });
+            }
+            else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+                // Handle direct color values
+                css += `  --cs-colors-${colorKey}: ${colorValue};\n`;
+            }
+        });
+        return css;
+    };
+    // Generate dark mode variables by adapting light mode colors
+    const generateDarkModeVariables = (themeObj) => {
+        // Create a dark variant of the theme by adapting colors
+        const darkTheme = adaptThemeForDarkMode(themeObj);
+        // Generate CSS variables only for the properties that exist in the dark theme
+        let css = '';
+        if (darkTheme.colors) {
+            // Generate CSS variables for colors
+            Object.entries(darkTheme.colors).forEach(([colorKey, colorValue]) => {
+                if (typeof colorValue === 'object' && colorValue !== null) {
+                    // Handle nested color objects (like surface, text, etc.)
+                    Object.entries(colorValue).forEach(([subKey, subValue]) => {
+                        if (typeof subValue === 'string' || typeof subValue === 'number') {
+                            css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`;
+                        }
+                    });
+                }
+                else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+                    // Handle direct color values
+                    css += `  --cs-colors-${colorKey}: ${colorValue};\n`;
+                }
+            });
+        }
+        // Add some basic dark mode variables for testing
+        css += `  --cs-colors-surface-background: #0f172a;\n`;
+        css += `  --cs-colors-surface-surface: #1e293b;\n`;
+        css += `  --cs-colors-surface-border: #334155;\n`;
+        css += `  --cs-colors-surface-divider: #475569;\n`;
+        css += `  --cs-colors-text-primary: #f8fafc;\n`;
+        css += `  --cs-colors-text-secondary: #cbd5e1;\n`;
+        css += `  --cs-colors-text-muted: #94a3b8;\n`;
+        return css;
+    };
+    // Adapt theme for dark mode
+    const adaptThemeForDarkMode = (_themeObj) => {
+        // This would implement your dark mode color adaptation logic
+        // You can use the existing ColorManager or implement custom logic
+        return {
+            colors: {
+                surface: {
+                    background: '#0f172a', // Dark background
+                    surface: '#1e293b', // Dark surface
+                    border: '#334155', // Dark border
+                    divider: '#475569' // Dark divider
+                },
+                text: {
+                    primary: '#f8fafc', // Light text
+                    secondary: '#cbd5e1', // Muted text
+                    muted: '#94a3b8', // Muted text
+                    inverse: '#0f172a', // Dark text for light backgrounds
+                    onPrimary: '#0f172a', // Text on primary color
+                    onSecondary: '#0f172a', // Text on secondary color
+                    onSurface: '#f8fafc' // Text on surface
+                }
+                // ... other color adaptations
+            } // Type assertion to bypass strict typing for now
+        };
+    };
+    // Generate CSS for all themes using structured approach
+    const generateAllThemesCSS = () => {
+        try {
+            // Create themes directory if it doesn't exist
+            const themesDir = resolve(config.root, 'src/styles/themes');
+            if (!existsSync(themesDir)) {
+                mkdirSync(themesDir, { recursive: true });
+            }
+            let indexCSS = '/* Theme Index - Import all themes */\n';
+            let defaultThemeCSS = '/* Default Theme Variables (Coach-Stan) */\n';
+            // Use defaultThemes instead of hardcoded themeFiles
+            for (const [themeKey, themeObj] of Object.entries(defaultThemes)) {
+                try {
+                    // Generate CSS for this specific theme
+                    const themeCSS = generateSingleThemeCSS(themeObj.meta.name, themeObj);
+                    // Write individual theme file
+                    const themeFileName = `${themeKey}.css`;
+                    const themeOutputPath = resolve(themesDir, themeFileName);
+                    writeFileSync(themeOutputPath, themeCSS, 'utf-8');
+                    console.log(`✅ Generated dual-mode CSS for theme: ${themeObj.meta.name} -> ${themeFileName}`);
+                    // Add import to index file
+                    indexCSS += `@import './${themeFileName}';\n`;
+                    // Set stan-design theme as default
+                    if (themeKey === 'stan-design') {
+                        defaultThemeCSS += themeCSS;
+                    }
+                }
+                catch (error) {
+                    console.error(`❌ Error processing ${themeKey}:`, error);
+                }
+            }
+            // Write theme index file
+            const indexPath = resolve(config.root, 'src/styles/themes/index.css');
+            writeFileSync(indexPath, indexCSS, 'utf-8');
+            // Write default theme file (for backward compatibility)
+            const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css');
+            writeFileSync(defaultPath, defaultThemeCSS, 'utf-8');
+            console.log('✅ Theme CSS Generator: Generated all dual-mode theme files successfully');
         }
-        // ... other color adaptations
-      } as any // Type assertion to bypass strict typing for now
-    }
-  }
-
-  // Generate CSS for all themes using structured approach
-  const generateAllThemesCSS = () => {
-    try {
-      // Create themes directory if it doesn't exist
-      const themesDir = resolve(config.root, 'src/styles/themes')
-      if (!existsSync(themesDir)) {
-        mkdirSync(themesDir, { recursive: true })
-      }
-      
-      let indexCSS = '/* Theme Index - Import all themes */\n'
-      let defaultThemeCSS = '/* Default Theme Variables (Coach-Stan) */\n'
-
-      // Use defaultThemes instead of hardcoded themeFiles
-      for (const [themeKey, themeObj] of Object.entries(defaultThemes)) {
+        catch (error) {
+            console.error('❌ Theme CSS Generator Error:', error);
+        }
+    };
+    // Main function to generate theme CSS
+    const generateThemeCSS = () => {
         try {
-          // Generate CSS for this specific theme
-          const themeCSS = generateSingleThemeCSS(themeObj.meta.name, themeObj)
-          
-          // Write individual theme file
-          const themeFileName = `${themeKey}.css`
-          const themeOutputPath = resolve(themesDir, themeFileName)
-          writeFileSync(themeOutputPath, themeCSS, 'utf-8')
-          
-          console.log(`✅ Generated dual-mode CSS for theme: ${themeObj.meta.name} -> ${themeFileName}`)
-
-          // Add import to index file
-          indexCSS += `@import './${themeFileName}';\n`
-
-          // Set stan-design theme as default
-          if (themeKey === 'stan-design') {
-            defaultThemeCSS += themeCSS
-          }
-          
-        } catch (error) {
-          console.error(`❌ Error processing ${themeKey}:`, error)
+            // Check if themes directory exists
+            const themesSourceDir = resolve(config.root, 'src/themes/themes');
+            if (!existsSync(themesSourceDir)) {
+                console.warn('⚠️  Theme CSS Generator: themes/themes/ directory not found');
+                return;
+            }
+            // Generate CSS for all themes
+            generateAllThemesCSS();
+        }
+        catch (error) {
+            console.error('❌ Theme CSS Generator Error:', error);
+        }
+    };
+    return {
+        name: 'theme-css-generator',
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+        },
+        buildStart() {
+            generateThemeCSS();
+        },
+        handleHotUpdate({ file }) {
+            // Use defaultThemes keys instead of hardcoded file paths
+            const themeKeys = Object.keys(defaultThemes);
+            const shouldRegenerate = themeKeys.some(themeKey => file.includes(`themes/${themeKey}.ts`) ||
+                file.includes('inheritance.ts') ||
+                file.includes('types.ts'));
+            if (shouldRegenerate) {
+                generateThemeCSS();
+            }
         }
-      }
-
-      // Write theme index file
-      const indexPath = resolve(config.root, 'src/styles/themes/index.css')
-      writeFileSync(indexPath, indexCSS, 'utf-8')
-
-      // Write default theme file (for backward compatibility)
-      const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css')
-      writeFileSync(defaultPath, defaultThemeCSS, 'utf-8')
-
-      console.log('✅ Theme CSS Generator: Generated all dual-mode theme files successfully')
-      
-    } catch (error) {
-      console.error('❌ Theme CSS Generator Error:', error)
-    }
-  }
-
-  // Main function to generate theme CSS
-  const generateThemeCSS = () => {
-    try {
-      // Check if themes directory exists
-      const themesSourceDir = resolve(config.root, 'src/themes/themes')
-      
-      if (!existsSync(themesSourceDir)) {
-        console.warn('⚠️  Theme CSS Generator: themes/themes/ directory not found')
-        return
-      }
-
-      // Generate CSS for all themes
-      generateAllThemesCSS()
-      
-    } catch (error) {
-      console.error('❌ Theme CSS Generator Error:', error)
-    }
-  }
-
-  return {
-    name: 'theme-css-generator',
-    
-    configResolved(resolvedConfig) {
-      config = resolvedConfig
-    },
-
-    buildStart() {
-      generateThemeCSS()
-    },
-
-    handleHotUpdate({ file }) {
-      // Use defaultThemes keys instead of hardcoded file paths
-      const themeKeys = Object.keys(defaultThemes)
-      const shouldRegenerate = themeKeys.some(themeKey => 
-        file.includes(`themes/${themeKey}.ts`) ||
-        file.includes('inheritance.ts') ||
-        file.includes('types.ts')
-      )
-      
-      if (shouldRegenerate) {
-        generateThemeCSS()
-      }
-    }
-  }
-}
+    };
+}