@shohojdhara/atomix 0.3.6 → 0.3.7

package/src/lib/theme/core/ThemeRegistry.ts

@@ -1,297 +1,93 @@
 /**
- * Theme Registry
- * 
- * Central registry for all themes with discovery and dependency management
+ * Theme Metadata interface
  */
+export interface ThemeMetadata {
+  name: string;
+  class: string;
+  description?: string;
+  version?: string;
+  [key: string]: any;
+}
 
-import type { Theme, ThemeMetadata } from '../types';
-import type { ThemeDefinition, LoadedThemeConfig } from '../config/types';
-import { loadThemeConfig } from '../config/loader';
+/**
+ * Theme Registry type - a record of theme IDs to metadata
+ */
+export type ThemeRegistry = Record<string, ThemeMetadata>;
 
 /**
- * Registry entry
+ * Create a new theme registry
  */
-interface RegistryEntry {
-  /** Theme ID */
-  id: string;
-  /** Theme definition from config */
-  definition: ThemeDefinition;
-  /** Resolved theme object (for JS themes) */
-  theme?: Theme;
-  /** Whether theme is loaded */
-  loaded: boolean;
-  /** Loading promise (if currently loading) */
-  loading?: Promise<Theme | void>;
-  /** Dependencies */
-  dependencies: string[];
-  /** Dependent themes (themes that depend on this one) */
-  dependents: string[];
+export function createThemeRegistry(): ThemeRegistry {
+  return {};
 }
 
 /**
- * Theme Registry
- * 
- * Manages theme registration, discovery, and dependency resolution
+ * Register a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ * @param metadata - Theme metadata
  */
-export class ThemeRegistry {
-  private entries: Map<string, RegistryEntry> = new Map();
-  private config: LoadedThemeConfig | null = null;
-  private initialized: boolean = false;
-
-  /**
-   * Initialize registry from config
-   */
-  async initialize(config?: LoadedThemeConfig): Promise<void> {
-    if (this.initialized) {
-      return;
-    }
-
-    // Load config if not provided
-    if (!config) {
-      try {
-        this.config = loadThemeConfig();
-      } catch (error) {
-        // In browser environments, config loading will fail
-        // Use empty config as fallback
-        this.config = {
-          themes: {},
-          build: {
-            output: { directory: 'themes', formats: { expanded: '.css', compressed: '.min.css' } },
-            sass: { style: 'expanded', sourceMap: true, loadPaths: ['src'] },
-          },
-          runtime: {
-            basePath: '',
-            defaultTheme: undefined, // No default - use built-in styles
-          },
-          integration: {
-            cssVariables: { colorMode: '--color-mode' },
-            classNames: { theme: 'data-theme', colorMode: 'data-color-mode' },
-          },
-          dependencies: {},
-          validated: false,
-          errors: [],
-          warnings: [],
-          __tokens: {},
-          __extend: {},
-        };
-      }
-    } else {
-      this.config = config;
-    }
-
-    // Register all themes from config
-    for (const [themeId, definition] of Object.entries(this.config.themes)) {
-      this.register(themeId, definition);
-    }
-
-    // Resolve dependencies
-    this.resolveDependencies();
-
-    this.initialized = true;
-  }
-
-  /**
-   * Register a theme
-   */
-  register(themeId: string, definition: ThemeDefinition): void {
-    // Get dependencies from config or definition
-    const dependencies = 
-      this.config?.dependencies?.[themeId] || 
-      definition.dependencies || 
-      [];
-
-    const entry: RegistryEntry = {
-      id: themeId,
-      definition,
-      loaded: false,
-      dependencies: [...dependencies],
-      dependents: [],
-    };
-
-    this.entries.set(themeId, entry);
-  }
-
-  /**
-   * Get theme entry
-   */
-  get(themeId: string): RegistryEntry | undefined {
-    return this.entries.get(themeId);
-  }
-
-  /**
-   * Check if theme exists
-   */
-  has(themeId: string): boolean {
-    return this.entries.has(themeId);
-  }
-
-  /**
-   * Get all theme IDs
-   */
-  getAllIds(): string[] {
-    return Array.from(this.entries.keys());
-  }
-
-  /**
-   * Get all theme metadata
-   */
-  getAllMetadata(): ThemeMetadata[] {
-    return Array.from(this.entries.values()).map(entry => ({
-      id: entry.id,
-      name: entry.definition.name,
-      type: entry.definition.type,
-      class: entry.definition.class,
-      description: entry.definition.description,
-      author: entry.definition.author,
-      version: entry.definition.version,
-      tags: entry.definition.tags,
-      supportsDarkMode: entry.definition.supportsDarkMode,
-      status: entry.definition.status,
-      a11y: entry.definition.a11y,
-      color: entry.definition.color,
-      features: entry.definition.features,
-      dependencies: entry.dependencies,
-    }));
-  }
-
-  /**
-   * Get theme definition
-   */
-  getDefinition(themeId: string): ThemeDefinition | undefined {
-    return this.entries.get(themeId)?.definition;
-  }
-
-  /**
-   * Check if a theme is loaded
-   */
-  isThemeLoaded(themeId: string): boolean {
-    const entry = this.entries.get(themeId);
-    return entry ? entry.loaded : false;
-  }
-
-  /**
-   * Mark a theme as loaded
-   */
-  markLoaded(themeId: string, theme?: Theme): void {
-    const entry = this.entries.get(themeId);
-    if (entry) {
-      entry.loaded = true;
-      if (theme) {
-        entry.theme = theme;
-      }
-    }
-  }
-
-  /**
-   * Get theme object (for JS themes)
-   */
-  getTheme(themeId: string): Theme | undefined {
-    const entry = this.entries.get(themeId);
-    return entry?.loaded ? entry.theme : undefined;
-  }
-
-  /**
-   * Get dependencies for a theme
-   */
-  getDependencies(themeId: string): string[] {
-    return this.entries.get(themeId)?.dependencies || [];
-  }
-
-  /**
-   * Get dependents for a theme (themes that depend on this one)
-   */
-  getDependents(themeId: string): string[] {
-    return this.entries.get(themeId)?.dependents || [];
-  }
-
-  /**
-   * Resolve all dependencies in correct order
-   */
-  resolveDependencyOrder(themeId: string): string[] {
-    const resolved: string[] = [];
-    const visited = new Set<string>();
-    const visiting = new Set<string>();
-
-    const visit = (id: string): void => {
-      if (visiting.has(id)) {
-        throw new Error(`Circular dependency detected involving theme: ${id}`);
-      }
-      if (visited.has(id)) {
-        return;
-      }
-
-      visiting.add(id);
-      const entry = this.entries.get(id);
-      if (entry) {
-        for (const dep of entry.dependencies) {
-          if (!this.has(dep)) {
-            throw new Error(`Theme "${id}" depends on non-existent theme: ${dep}`);
-          }
-          visit(dep);
-        }
-      }
-      visiting.delete(id);
-      visited.add(id);
-      resolved.push(id);
-    };
+export function registerTheme(registry: ThemeRegistry, id: string, metadata: ThemeMetadata): void {
+  registry[id] = metadata;
+}
 
-    visit(themeId);
-    return resolved;
-  }
+/**
+ * Unregister a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+export function unregisterTheme(registry: ThemeRegistry, id: string): boolean {
+  const exists = id in registry;
+  delete registry[id];
+  return exists;
+}
 
-  /**
-   * Resolve dependencies and build dependency graph
-   */
-  private resolveDependencies(): void {
-    // Build dependents map
-    for (const entry of this.entries.values()) {
-      for (const dep of entry.dependencies) {
-        const depEntry = this.entries.get(dep);
-        if (depEntry) {
-          if (!depEntry.dependents.includes(entry.id)) {
-            depEntry.dependents.push(entry.id);
-          }
-        }
-      }
-    }
-  }
+/**
+ * Check if a theme is registered
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+export function hasTheme(registry: ThemeRegistry, id: string): boolean {
+  return id in registry;
+}
 
-  /**
-   * Validate all themes
-   */
-  validate(): { valid: boolean; errors: string[] } {
-    const errors: string[] = [];
+/**
+ * Get theme metadata
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+export function getTheme(registry: ThemeRegistry, id: string): ThemeMetadata | undefined {
+  return registry[id];
+}
 
-    // Check for circular dependencies
-    for (const themeId of this.entries.keys()) {
-      try {
-        this.resolveDependencyOrder(themeId);
-      } catch (error) {
-        errors.push(error instanceof Error ? error.message : String(error));
-      }
-    }
+/**
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */
+export function getAllThemes(registry: ThemeRegistry): ThemeMetadata[] {
+  return Object.values(registry);
+}
 
-    // Check for missing dependencies
-    for (const [themeId, entry] of this.entries.entries()) {
-      for (const dep of entry.dependencies) {
-        if (!this.has(dep)) {
-          errors.push(`Theme "${themeId}" depends on non-existent theme: ${dep}`);
-        }
-      }
-    }
+/**
+ * Get all registered theme IDs
+ * @param registry - Theme registry object
+ */
+export function getThemeIds(registry: ThemeRegistry): string[] {
+  return Object.keys(registry);
+}
 
-    return {
-      valid: errors.length === 0,
-      errors,
-    };
-  }
+/**
+ * Clear all registered themes
+ * @param registry - Theme registry object
+ */
+export function clearThemes(registry: ThemeRegistry): void {
+  Object.keys(registry).forEach(key => delete registry[key]);
+}
 
-  /**
-   * Clear registry
-   */
-  clear(): void {
-    this.entries.clear();
-    this.config = null;
-    this.initialized = false;
-  }
+/**
+ * Get the number of registered themes
+ * @param registry - Theme registry object
+ */
+export function getThemeCount(registry: ThemeRegistry): number {
+  return Object.keys(registry).length;
 }

package/src/lib/theme/core/composeTheme.ts

@@ -1,7 +1,7 @@
 /**
  * Theme Composition Utilities
- * 
- * Utilities for composing, merging, and extending themes.
+ *
+ * Simplified utilities for composing, merging, and extending themes.
  */
 
 import type { Theme, ThemeOptions } from '../types';
@@ -22,7 +22,7 @@ function isObject(item: any): item is Record<string, any> {
  * Deep merge multiple objects
  * Later objects override earlier ones
  */
-export function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[]): T {
+export function deepMerge<T extends Record<string, unknown>>(...objects: Partial<T>[]): T {
     if (objects.length === 0) return {} as T;
     if (objects.length === 1) return objects[0] as T;
 
@@ -40,10 +40,10 @@ export function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[
 
             if (isObject(targetValue) && isObject(sourceValue)) {
                 // Recursively merge objects
-                result[key] = deepMerge(targetValue as any, sourceValue as any) as any;
+                result[key] = deepMerge(targetValue as Record<string, unknown>, sourceValue as Record<string, unknown>) as T[Extract<keyof T, string>];
             } else {
                 // Override with source value
-                result[key] = sourceValue as any;
+                result[key] = sourceValue as T[Extract<keyof T, string>];
             }
         }
     }
@@ -57,10 +57,10 @@ export function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[
 
 /**
  * Merge multiple theme options into a single theme options object
- * 
+ *
  * @param themes - Theme options to merge
  * @returns Merged theme options
- * 
+ *
  * @example
  * ```typescript
  * const baseTheme = { palette: { primary: { main: '#000' } } };
@@ -74,11 +74,11 @@ export function mergeTheme(...themes: ThemeOptions[]): ThemeOptions {
 
 /**
  * Extend an existing theme with new options
- * 
+ *
  * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
  * @param extension - Theme options to extend with
  * @returns New theme with extended options
- * 
+ *
  * @example
  * ```typescript
  * const base = createTheme({ palette: { primary: { main: '#000' } } });
@@ -88,66 +88,16 @@ export function mergeTheme(...themes: ThemeOptions[]): ThemeOptions {
  * ```
  */
 export function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme {
-    // If baseTheme is a complete Theme, extract the options
-    const baseOptions: ThemeOptions = (baseTheme as any).__isJSTheme
-        ? extractThemeOptions(baseTheme as Theme)
-        : (baseTheme as ThemeOptions);
+    // Convert baseTheme to ThemeOptions if it's a complete Theme
+    const baseOptions: ThemeOptions = (baseTheme as Theme & { __isJSTheme?: boolean }).__isJSTheme
+        ? { ...baseTheme } as ThemeOptions
+        : baseTheme;
 
+    // Merge and create new theme
     const merged = mergeTheme(baseOptions, extension);
     return createThemeObject(merged);
 }
 
-/**
- * Extract theme options from a complete Theme object
- */
-function extractThemeOptions(theme: Theme): ThemeOptions {
-    return {
-        name: theme.name,
-        class: theme.class,
-        description: theme.description,
-        author: theme.author,
-        version: theme.version,
-        tags: theme.tags,
-        supportsDarkMode: theme.supportsDarkMode,
-        status: theme.status,
-        a11y: theme.a11y,
-        color: theme.color,
-        features: theme.features,
-        dependencies: theme.dependencies,
-        palette: {
-            primary: theme.palette.primary,
-            secondary: theme.palette.secondary,
-            error: theme.palette.error,
-            warning: theme.palette.warning,
-            info: theme.palette.info,
-            success: theme.palette.success,
-            background: theme.palette.background,
-            text: theme.palette.text,
-        },
-        typography: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: theme.typography.fontSize,
-            fontWeightLight: theme.typography.fontWeightLight,
-            fontWeightRegular: theme.typography.fontWeightRegular,
-            fontWeightMedium: theme.typography.fontWeightMedium,
-            fontWeightSemiBold: theme.typography.fontWeightSemiBold,
-            fontWeightBold: theme.typography.fontWeightBold,
-            h1: theme.typography.h1,
-            h2: theme.typography.h2,
-            h3: theme.typography.h3,
-            h4: theme.typography.h4,
-            h5: theme.typography.h5,
-            h6: theme.typography.h6,
-            body1: theme.typography.body1,
-            body2: theme.typography.body2,
-        },
-        shadows: theme.shadows,
-        transitions: theme.transitions,
-        zIndex: theme.zIndex,
-        custom: theme.custom,
-    };
-}
-
 export default {
     deepMerge,
     mergeTheme,

package/src/lib/theme/core/createTheme.ts

@@ -1,7 +1,7 @@
 /**
  * Core Theme Functions
- * 
- * Unified theme system that handles both DesignTokens and Theme objects.
+ *
+ * Simplified theme system that handles both DesignTokens and Theme objects.
  * Config-first approach: loads from atomix.config.ts when no input is provided.
  * Config file is required for automatic loading.
  */
@@ -12,34 +12,33 @@ import type { GenerateCSSVariablesOptions } from '../generators/generateCSS';
 import { createTokens } from '../tokens/tokens';
 import { generateCSSVariables } from '../generators/generateCSS';
 import { themeToDesignTokens } from '../adapters/themeAdapter';
-import { loadThemeFromConfigSync } from '../config/configLoader';
 
 /**
  * Create theme CSS from tokens or Theme object
- * 
+ *
  * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
  * Config file is required for automatic loading.
- * 
+ *
  * @param input - DesignTokens (partial), Theme object, or undefined (loads from config)
  * @param options - CSS generation options (prefix is automatically read from config if not provided)
  * @returns CSS string with custom properties
  * @throws Error if config loading fails when no input is provided
- * 
+ *
  * @example
  * ```typescript
  * // Loads from atomix.config.ts (config file required)
  * const css = createTheme();
- * 
+ *
  * // Using DesignTokens
  * const css = createTheme({
  *   'primary': '#7c3aed',
  *   'spacing-4': '1rem',
  * });
- * 
+ *
  * // Using Theme object
  * const theme = createThemeObject({ palette: { primary: { main: '#7c3aed' } } });
  * const css = createTheme(theme);
- * 
+ *
  * // With custom options
  * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
  * ```
@@ -48,47 +47,62 @@ export function createTheme(
   input?: Partial<DesignTokens> | Theme,
   options?: GenerateCSSVariablesOptions
 ): string {
+  // Determine tokens based on input
   let tokens: Partial<DesignTokens>;
-  let configPrefix: string | undefined;
-
-  // If no input provided, load from config (required)
+  
   if (!input) {
-    const configTokens = loadThemeFromConfigSync();
+    // Check if we're in a browser environment
+    if (typeof window !== 'undefined') {
+      throw new Error('createTheme: No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.');
+    }
+    
+    // Load from config when no input provided
+    // Using dynamic import in a way that's more compatible with bundlers
+    let loadThemeFromConfigSync: any;
+    let loadAtomixConfig: any;
     
-    // Get prefix from config
     try {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      const { loadAtomixConfig } = require('../../config/loader');
-      const config = loadAtomixConfig({ configPath: 'atomix.config.ts', required: true });
-      configPrefix = config?.prefix;
+      // Use dynamic require but only in Node.js environments
+      // This approach allows bundlers to properly handle external dependencies
+      const configLoaderModule = require('../config/configLoader');
+      const loaderModule = require('../../config/loader');
+      
+      loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync;
+      loadAtomixConfig = loaderModule.loadAtomixConfig;
+      
+      tokens = loadThemeFromConfigSync();
+      
+      // Get prefix from config if needed
+      if (!options?.prefix) {
+        try {
+          const config = loadAtomixConfig({ configPath: 'atomix.config.ts', required: false });
+          options = { ...options, prefix: config?.prefix || 'atomix' };
+        } catch (error) {
+          // If config loading fails, use default prefix
+          options = { ...options, prefix: 'atomix' };
+        }
+      }
     } catch (error) {
-      // Prefix loading failed, but tokens were loaded, so continue
+      throw new Error('createTheme: No input provided and config loading is not available in this environment. Please provide tokens explicitly.');
     }
-    
-    tokens = configTokens;
+  } else if (isThemeObject(input)) {
+    // Convert Theme object to DesignTokens
+    tokens = themeToDesignTokens(input);
   } else {
-    // Check if it's a Theme object
-    const isThemeObject = (input as any).__isJSTheme === true || 
-      ((input as any).palette && (input as any).typography);
-
-    if (isThemeObject) {
-      // Convert Theme to DesignTokens
-      tokens = themeToDesignTokens(input as Theme);
-    } else {
-      // Already DesignTokens
-      tokens = input as Partial<DesignTokens>;
-    }
+    // Use DesignTokens directly
+    tokens = input;
   }
 
   // Merge with defaults and generate CSS
   const allTokens = createTokens(tokens);
-  
-  // Use prefix from config if not provided in options
-  const finalOptions: GenerateCSSVariablesOptions = {
-    ...options,
-    prefix: options?.prefix ?? configPrefix ?? 'atomix',
-  };
-  
-  return generateCSSVariables(allTokens, finalOptions);
+
+  // Get prefix from options or use default
+  const prefix = options?.prefix ?? 'atomix';
+
+  return generateCSSVariables(allTokens, { ...options, prefix });
 }
 
+// Helper functions to simplify main function
+function isThemeObject(input: any): input is Theme {
+  return input?.__isJSTheme === true || (input?.palette && input?.typography);
+}

package/src/lib/theme/core/createThemeObject.ts

@@ -327,8 +327,8 @@ export function createThemeObject(...options: ThemeOptions[]): Theme {
 
     // Create typography
     const typography: Theme['typography'] = deepMerge(
-        { ...DEFAULT_TYPOGRAPHY } as any,
-        (mergedOptions.typography || {}) as any
+        { ...DEFAULT_TYPOGRAPHY } as Partial<Theme['typography']>,
+        (mergedOptions.typography || {}) as Partial<Theme['typography']>
     ) as Theme['typography'];
 
     // Create spacing

package/src/lib/theme/core/index.ts

@@ -7,4 +7,18 @@
 export { createTheme } from './createTheme';
 export { createThemeObject } from './createThemeObject';
 export { deepMerge, mergeTheme, extendTheme } from './composeTheme';
-export { ThemeRegistry } from './ThemeRegistry';
+
+// Simplified Theme Registry API
+export { 
+  createThemeRegistry,
+  registerTheme,
+  unregisterTheme,
+  hasTheme,
+  getTheme,
+  getAllThemes,
+  getThemeIds,
+  clearThemes,
+  getThemeCount,
+  type ThemeRegistry,
+  type ThemeMetadata
+} from './ThemeRegistry';

package/src/lib/theme/errors/errors.ts

@@ -120,7 +120,7 @@ export class ThemeLogger {
 
   constructor(config: LoggerConfig = {}) {
     this.config = {
-      level: config.level ?? (process.env.NODE_ENV === 'production' ? LogLevel.WARN : LogLevel.INFO),
+      level: config.level ?? (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production' ? LogLevel.WARN : LogLevel.INFO),
       enableConsole: config.enableConsole ?? true,
       onError: config.onError,
       onWarn: config.onWarn,