@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -1,6 +1,6 @@
 /**
  * Core Theme Engine
- * 
+ *
  * Core theme creation, composition, and registry functionality
  */
 
@@ -8,7 +8,7 @@ export { createTheme } from './createTheme';
 export { deepMerge, mergeTheme, extendTheme } from './composeTheme';
 
 // Simplified Theme Registry API
-export { 
+export {
   createThemeRegistry,
   registerTheme,
   unregisterTheme,
@@ -19,5 +19,5 @@ export {
   clearThemes,
   getThemeCount,
   type ThemeRegistry,
-  type ThemeMetadata
+  type ThemeMetadata,
 } from './ThemeRegistry';

package/src/lib/theme/devtools/CLI.ts

@@ -2,7 +2,7 @@
 
 /**
  * Atomix Theme DevTools CLI
- * 
+ *
  * Internal CLI for theme validation and management.
  * This is called by the main atomix-cli.js via theme-bridge.js.
  */
@@ -17,139 +17,141 @@ import boxen from 'boxen';
 // Stub validator for now to avoid ESM resolution issues in CLI
 // TODO: Fix ESM module resolution for ThemeValidator in CLI context
 class ThemeValidator {
-    validate() {
-        return { valid: true, errors: [], warnings: [], a11yIssues: [] };
-    }
+  validate() {
+    return { valid: true, errors: [], warnings: [], a11yIssues: [] };
+  }
 }
 
 const program = new Command();
 
-program
-    .name('atomix-theme')
-    .description('Atomix Theme DevTools')
-    .version('0.1.0');
+program.name('atomix-theme').description('Atomix Theme DevTools').version('0.1.0');
 
 // Utils
 const getThemesDir = () => {
-    const possiblePaths = [
-        path.join(process.cwd(), 'themes'),
-        path.join(process.cwd(), 'src', 'themes'),
-        path.join(process.cwd(), 'src', 'styles', 'themes')
-    ];
-
-    for (const p of possiblePaths) {
-        if (fs.existsSync(p)) return p;
-    }
-    return path.join(process.cwd(), 'themes');
+  const possiblePaths = [
+    path.join(process.cwd(), 'themes'),
+    path.join(process.cwd(), 'src', 'themes'),
+    path.join(process.cwd(), 'src', 'styles', 'themes'),
+  ];
+
+  for (const p of possiblePaths) {
+    if (fs.existsSync(p)) return p;
+  }
+  return path.join(process.cwd(), 'themes');
 };
 
 // Validate Command
 program
-    .command('validate')
-    .description('Validate theme configuration')
-    .option('-c, --config <path>', 'Path to theme config')
-    .option('--strict', 'Enable strict validation')
-    .action(async (options) => {
-        console.log(chalk.cyan('Validating theme configuration...'));
-
-        // In a real implementation this would load the theme object
-        // For now we'll do basic file checks if a file is provided
-
-        if (options.config) {
-            const configPath = path.resolve(process.cwd(), options.config);
-            if (!fs.existsSync(configPath)) {
-                console.error(chalk.red(`❌ Config file not found: ${options.config}`));
-                process.exit(1);
-            }
-
-            // Attempt to validate structure if it's JSON
-            if (configPath.endsWith('.json')) {
-                try {
-                    const content = JSON.parse(fs.readFileSync(configPath, 'utf8'));
-                    const validator = new ThemeValidator();
-                    // Mocking validation for now as we don't have a full loader
-                    console.log(chalk.green('✓ JSON structure is valid'));
-                } catch (e) {
-                    console.error(chalk.red(`❌ Invalid JSON: ${(e as Error).message}`));
-                    process.exit(1);
-                }
-            }
+  .command('validate')
+  .description('Validate theme configuration')
+  .option('-c, --config <path>', 'Path to theme config')
+  .option('--strict', 'Enable strict validation')
+  .action(async options => {
+    console.log(chalk.cyan('Validating theme configuration...'));
+
+    // In a real implementation this would load the theme object
+    // For now we'll do basic file checks if a file is provided
+
+    if (options.config) {
+      const configPath = path.resolve(process.cwd(), options.config);
+      if (!fs.existsSync(configPath)) {
+        console.error(chalk.red(`❌ Config file not found: ${options.config}`));
+        process.exit(1);
+      }
+
+      // Attempt to validate structure if it's JSON
+      if (configPath.endsWith('.json')) {
+        try {
+          const content = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+          const validator = new ThemeValidator();
+          // Mocking validation for now as we don't have a full loader
+          console.log(chalk.green('✓ JSON structure is valid'));
+        } catch (e) {
+          console.error(chalk.red(`❌ Invalid JSON: ${(e as Error).message}`));
+          process.exit(1);
         }
+      }
+    }
 
-        // Output success for now to verify connectivity
-        console.log(chalk.green('✓ Validation completed'));
-    });
+    // Output success for now to verify connectivity
+    console.log(chalk.green('✓ Validation completed'));
+  });
 
 // List Command
 program
-    .command('list')
-    .description('List available themes')
-    .action(async () => {
-        const themesDir = getThemesDir();
-
-        if (!fs.existsSync(themesDir)) {
-            console.log(chalk.yellow(`No themes directory found at ${themesDir}`));
-            return;
-        }
+  .command('list')
+  .description('List available themes')
+  .action(async () => {
+    const themesDir = getThemesDir();
+
+    if (!fs.existsSync(themesDir)) {
+      console.log(chalk.yellow(`No themes directory found at ${themesDir}`));
+      return;
+    }
 
-        const themes = fs.readdirSync(themesDir).filter(f => {
-            const stat = fs.statSync(path.join(themesDir, f));
-            return stat.isDirectory() || f.endsWith('.json') || f.endsWith('.ts');
-        });
+    const themes = fs.readdirSync(themesDir).filter(f => {
+      const stat = fs.statSync(path.join(themesDir, f));
+      return stat.isDirectory() || f.endsWith('.json') || f.endsWith('.ts');
+    });
 
-        console.log(chalk.bold.cyan(`\nFound ${themes.length} themes in ${themesDir}:\n`));
+    console.log(chalk.bold.cyan(`\nFound ${themes.length} themes in ${themesDir}:\n`));
 
-        themes.forEach(theme => {
-            console.log(`  • ${theme}`);
-        });
-        console.log('');
+    themes.forEach(theme => {
+      console.log(`  • ${theme}`);
     });
+    console.log('');
+  });
 
 // Inspect Command
 program
-    .command('inspect <theme>')
-    .description('Inspect specific theme')
-    .option('--json', 'Output as JSON')
-    .action(async (themeName, options) => {
-        const themesDir = getThemesDir();
-        const themePath = path.join(themesDir, themeName);
-
-        if (!fs.existsSync(themePath) && !fs.existsSync(`${themePath}.json`) && !fs.existsSync(`${themePath}.ts`)) {
-            console.error(chalk.red(`❌ Theme not found: ${themeName}`));
-            process.exit(1);
-        }
+  .command('inspect <theme>')
+  .description('Inspect specific theme')
+  .option('--json', 'Output as JSON')
+  .action(async (themeName, options) => {
+    const themesDir = getThemesDir();
+    const themePath = path.join(themesDir, themeName);
+
+    if (
+      !fs.existsSync(themePath) &&
+      !fs.existsSync(`${themePath}.json`) &&
+      !fs.existsSync(`${themePath}.ts`)
+    ) {
+      console.error(chalk.red(`❌ Theme not found: ${themeName}`));
+      process.exit(1);
+    }
 
-        if (options.json) {
-            console.log(JSON.stringify({ name: themeName, path: themePath }, null, 2));
-        } else {
-            console.log(boxen(
-                chalk.bold(themeName) + '\n' +
-                chalk.gray(`Path: ${themePath}`),
-                { padding: 1, borderStyle: 'round' }
-            ));
-        }
-    });
+    if (options.json) {
+      console.log(JSON.stringify({ name: themeName, path: themePath }, null, 2));
+    } else {
+      console.log(
+        boxen(chalk.bold(themeName) + '\n' + chalk.gray(`Path: ${themePath}`), {
+          padding: 1,
+          borderStyle: 'round',
+        })
+      );
+    }
+  });
 
 // Compare Command (Stub)
 program
-    .command('compare <theme1> <theme2>')
-    .description('Compare two themes')
-    .action(async (theme1, theme2) => {
-        console.log(chalk.cyan(`Comparing ${theme1} with ${theme2}...`));
-        // Stub
-        console.log(chalk.yellow('Comparison feature not yet fully implemented.'));
-    });
+  .command('compare <theme1> <theme2>')
+  .description('Compare two themes')
+  .action(async (theme1, theme2) => {
+    console.log(chalk.cyan(`Comparing ${theme1} with ${theme2}...`));
+    // Stub
+    console.log(chalk.yellow('Comparison feature not yet fully implemented.'));
+  });
 
 // Export Command (Stub)
 program
-    .command('export <theme>')
-    .description('Export theme')
-    .option('-o, --output <path>', 'Output path')
-    .action(async (theme, options) => {
-        console.log(chalk.cyan(`Exporting ${theme}...`));
-        if (options.output) {
-            console.log(chalk.green(`✓ Exported to ${options.output}`));
-        }
-    });
+  .command('export <theme>')
+  .description('Export theme')
+  .option('-o, --output <path>', 'Output path')
+  .action(async (theme, options) => {
+    console.log(chalk.cyan(`Exporting ${theme}...`));
+    if (options.output) {
+      console.log(chalk.green(`✓ Exported to ${options.output}`));
+    }
+  });
 
 program.parse(process.argv);

package/src/lib/theme/devtools/Comparator.tsx

@@ -1,6 +1,6 @@
 /**
  * Theme Comparator Component
- * 
+ *
  * React component for comparing two themes side-by-side
  * Enhanced with search/filter and improved visual diff styling
  */
@@ -34,7 +34,7 @@ interface Difference {
 
 /**
  * Theme Comparator Component
- * 
+ *
  * Compares two themes and highlights differences
  */
 export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
@@ -69,12 +69,12 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
 
   const differences = useMemo(() => {
     const diffs: Difference[] = [];
-    
+
     const getCategory = (path: string): string => {
       const firstSegment = path.split('.')[0];
       return firstSegment || 'other';
     };
-    
+
     const compareObjects = (objA: any, objB: any, path: string = '') => {
       const keysA = Object.keys(objA || {});
       const keysB = Object.keys(objB || {});
@@ -82,7 +82,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
 
       for (const key of allKeys) {
         if (key === '__isJSTheme') continue;
-        
+
         const currentPath = path ? `${path}.${key}` : key;
         const valueA = objA?.[key];
         const valueB = objB?.[key];
@@ -103,7 +103,12 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
             type: 'removed',
             category: getCategory(currentPath),
           });
-        } else if (typeof valueA === 'object' && typeof valueB === 'object' && !Array.isArray(valueA) && !Array.isArray(valueB)) {
+        } else if (
+          typeof valueA === 'object' &&
+          typeof valueB === 'object' &&
+          !Array.isArray(valueA) &&
+          !Array.isArray(valueB)
+        ) {
           compareObjects(valueA, valueB, currentPath);
         } else if (JSON.stringify(valueA) !== JSON.stringify(valueB)) {
           diffs.push({
@@ -138,10 +143,11 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
     // Filter by search query
     if (debouncedSearchQuery) {
       const queryLower = debouncedSearchQuery.toLowerCase();
-      filtered = filtered.filter(d => 
-        d.path.toLowerCase().includes(queryLower) ||
-        String(d.valueA).toLowerCase().includes(queryLower) ||
-        String(d.valueB).toLowerCase().includes(queryLower)
+      filtered = filtered.filter(
+        d =>
+          d.path.toLowerCase().includes(queryLower) ||
+          String(d.valueA).toLowerCase().includes(queryLower) ||
+          String(d.valueB).toLowerCase().includes(queryLower)
       );
     }
 
@@ -164,29 +170,39 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
 
   const getTypeColor = (type: Difference['type']): string => {
     switch (type) {
-      case 'added': return '#4caf50';
-      case 'removed': return '#f44336';
-      case 'changed': return '#ff9800';
-      default: return '#666';
+      case 'added':
+        return '#4caf50';
+      case 'removed':
+        return '#f44336';
+      case 'changed':
+        return '#ff9800';
+      default:
+        return '#666';
     }
   };
 
   const getTypeBackground = (type: Difference['type']): string => {
     switch (type) {
-      case 'added': return 'rgba(76, 175, 80, 0.1)';
-      case 'removed': return 'rgba(244, 67, 54, 0.1)';
-      case 'changed': return 'rgba(255, 152, 0, 0.1)';
-      default: return 'transparent';
+      case 'added':
+        return 'rgba(76, 175, 80, 0.1)';
+      case 'removed':
+        return 'rgba(244, 67, 54, 0.1)';
+      case 'changed':
+        return 'rgba(255, 152, 0, 0.1)';
+      default:
+        return 'transparent';
     }
   };
 
   const highlightText = (text: string, query: string): React.ReactNode => {
     if (!query) return text;
-    
+
     const parts = text.split(new RegExp(`(${query})`, 'gi'));
-    return parts.map((part, index) => 
+    return parts.map((part, index) =>
       part.toLowerCase() === query.toLowerCase() ? (
-        <mark key={index} className="search-highlight">{part}</mark>
+        <mark key={index} className="search-highlight">
+          {part}
+        </mark>
       ) : (
         part
       )
@@ -225,7 +241,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
             type="text"
             placeholder="Search differences..."
             value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            onChange={e => setSearchQuery(e.target.value)}
             className="search-input"
           />
           {searchQuery && (
@@ -243,7 +259,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
           <label>Type:</label>
           <select
             value={filterType}
-            onChange={(e) => setFilterType(e.target.value as any)}
+            onChange={e => setFilterType(e.target.value as any)}
             className="filter-select"
           >
             <option value="all">All Types</option>
@@ -258,12 +274,14 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
             <label>Category:</label>
             <select
               value={filterCategory}
-              onChange={(e) => setFilterCategory(e.target.value)}
+              onChange={e => setFilterCategory(e.target.value)}
               className="filter-select"
             >
               <option value="all">All Categories</option>
               {categories.map(cat => (
-                <option key={cat} value={cat}>{cat}</option>
+                <option key={cat} value={cat}>
+                  {cat}
+                </option>
               ))}
             </select>
           </div>
@@ -328,13 +346,13 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
         <div className="differences-list">
           <h4>Differences ({filteredDifferences.length})</h4>
           {filteredDifferences.map((diff, index) => (
-            <div 
-              key={index} 
+            <div
+              key={index}
               className={`difference-item difference-${diff.type}`}
               style={{ backgroundColor: getTypeBackground(diff.type) }}
             >
               <div className="difference-header">
-                <span 
+                <span
                   className="difference-type"
                   style={{ backgroundColor: getTypeColor(diff.type) }}
                 >
@@ -343,9 +361,7 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
                 <code className="difference-path">
                   {highlightText(diff.path, debouncedSearchQuery)}
                 </code>
-                {diff.category && (
-                  <span className="difference-category">{diff.category}</span>
-                )}
+                {diff.category && <span className="difference-category">{diff.category}</span>}
               </div>
               <div className="difference-values">
                 <div className={`value-column value-${diff.type === 'added' ? 'empty' : 'filled'}`}>
@@ -359,7 +375,9 @@ export const ThemeComparator: React.FC<ThemeComparatorProps> = ({
                   </pre>
                 </div>
                 <div className="value-divider">→</div>
-                <div className={`value-column value-${diff.type === 'removed' ? 'empty' : 'filled'}`}>
+                <div
+                  className={`value-column value-${diff.type === 'removed' ? 'empty' : 'filled'}`}
+                >
                   <div className="value-label">{themeB.name}</div>
                   <pre className="value-content">
                     {diff.type === 'removed' ? (