colx 1.0.0

package/dist/scanner/file-walker.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findTsxJsxFiles = findTsxJsxFiles;
+const promises_1 = require("fs/promises");
+const path_1 = require("path");
+const EXCLUDED_DIRS = ['node_modules', '.git', 'dist', 'build', '.next', '.turbo'];
+async function findTsxJsxFiles(rootDir) {
+    const files = [];
+    const visited = new Set();
+    async function walk(dir) {
+        const normalizedPath = (0, path_1.join)(dir);
+        // Avoid infinite loops and excluded directories
+        if (visited.has(normalizedPath))
+            return;
+        visited.add(normalizedPath);
+        try {
+            const entries = await (0, promises_1.readdir)(dir, { withFileTypes: true });
+            for (const entry of entries) {
+                const fullPath = (0, path_1.join)(dir, entry.name);
+                const normalizedFullPath = (0, path_1.join)(fullPath);
+                if (entry.isDirectory()) {
+                    // Skip excluded directories
+                    if (!EXCLUDED_DIRS.includes(entry.name)) {
+                        await walk(normalizedFullPath);
+                    }
+                }
+                else if (entry.isFile()) {
+                    // Check for .tsx or .jsx extension
+                    if (entry.name.endsWith('.tsx') || entry.name.endsWith('.jsx')) {
+                        files.push(normalizedFullPath);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            // Skip directories we can't read (permissions, etc.)
+            if (error.code !== 'EACCES') {
+                console.warn(`Warning: Could not read directory ${dir}: ${error}`);
+            }
+        }
+    }
+    await walk(rootDir);
+    return files;
+}
+//# sourceMappingURL=file-walker.js.map

package/dist/scanner/file-walker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-walker.js","sourceRoot":"","sources":["../../src/scanner/file-walker.ts"],"names":[],"mappings":";;AAKA,0CAwCC;AA7CD,0CAA4C;AAC5C,+BAA4B;AAE5B,MAAM,aAAa,GAAG,CAAC,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;AAE5E,KAAK,UAAU,eAAe,CAAC,OAAe;IACnD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;IAElC,KAAK,UAAU,IAAI,CAAC,GAAW;QAC7B,MAAM,cAAc,GAAG,IAAA,WAAI,EAAC,GAAG,CAAC,CAAC;QAEjC,gDAAgD;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC;YAAE,OAAO;QACxC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAE5B,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAA,kBAAO,EAAC,GAAG,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YAE5D,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,MAAM,QAAQ,GAAG,IAAA,WAAI,EAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;gBACvC,MAAM,kBAAkB,GAAG,IAAA,WAAI,EAAC,QAAQ,CAAC,CAAC;gBAE1C,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;oBACxB,4BAA4B;oBAC5B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;wBACxC,MAAM,IAAI,CAAC,kBAAkB,CAAC,CAAC;oBACjC,CAAC;gBACH,CAAC;qBAAM,IAAI,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC;oBAC1B,mCAAmC;oBACnC,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;wBAC/D,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;oBACjC,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,qDAAqD;YACrD,IAAK,KAA+B,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACvD,OAAO,CAAC,IAAI,CAAC,qCAAqC,GAAG,KAAK,KAAK,EAAE,CAAC,CAAC;YACrE,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM,IAAI,CAAC,OAAO,CAAC,CAAC;IACpB,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/server/api.d.ts

@@ -0,0 +1,33 @@
+import { Express } from 'express';
+import { ColorOccurrence } from '../scanner/color-extractor';
+import { ParsedColor } from '../analyzer/color-parser';
+import { SimilarColorGroup } from '../analyzer/similarity';
+import { CSSVariableSuggestion } from '../analyzer/consolidator';
+export interface ColorData {
+    id: string;
+    hex: string;
+    originalValue: string;
+    format: 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
+    occurrences: Array<{
+        file: string;
+        line: number;
+        className: string;
+    }>;
+}
+export interface SuggestionsResponse {
+    cssVariables: CSSVariableSuggestion[];
+    merges: Array<{
+        colors: string[];
+        suggestedColor: string;
+        similarity: number;
+    }>;
+}
+export interface StatsResponse {
+    totalOccurrences: number;
+    uniqueColors: number;
+    filesScanned: number;
+    formats: Record<string, number>;
+}
+export declare function setColorData(occurrences: ColorOccurrence[], parsedColors: Map<string, ParsedColor>, similarGroups: SimilarColorGroup[], cssVariables: CSSVariableSuggestion[]): void;
+export declare function setupApiRoutes(app: Express): void;
+//# sourceMappingURL=api.d.ts.map

package/dist/server/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/server/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAc,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IAChD,WAAW,EAAE,KAAK,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,qBAAqB,EAAE,CAAC;IACtC,MAAM,EAAE,KAAK,CAAC;QACZ,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,cAAc,EAAE,MAAM,CAAC;QACvB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,aAAa;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAMD,wBAAgB,YAAY,CAC1B,WAAW,EAAE,eAAe,EAAE,EAC9B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,EACtC,aAAa,EAAE,iBAAiB,EAAE,EAClC,YAAY,EAAE,qBAAqB,EAAE,QAwDtC;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,QAiB1C"}

package/dist/server/api.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setColorData = setColorData;
+exports.setupApiRoutes = setupApiRoutes;
+const color_parser_1 = require("../analyzer/color-parser");
+let colorDataCache = [];
+let suggestionsCache = null;
+let statsCache = null;
+function setColorData(occurrences, parsedColors, similarGroups, cssVariables) {
+    // Group occurrences by hex color
+    const colorMap = new Map();
+    for (const occurrence of occurrences) {
+        // Parse the color to get its hex value
+        const parsed = (0, color_parser_1.parseColor)(occurrence.originalValue, occurrence.format);
+        if (parsed) {
+            const hex = parsed.hex;
+            if (!colorMap.has(hex)) {
+                colorMap.set(hex, {
+                    id: hex,
+                    hex,
+                    originalValue: parsed.originalValue,
+                    format: parsed.format,
+                    occurrences: []
+                });
+            }
+            colorMap.get(hex).occurrences.push({
+                file: occurrence.file,
+                line: occurrence.line,
+                className: occurrence.className
+            });
+        }
+    }
+    colorDataCache = Array.from(colorMap.values());
+    // Build suggestions
+    suggestionsCache = {
+        cssVariables,
+        merges: similarGroups.map(group => ({
+            colors: group.colors,
+            suggestedColor: group.suggestedColor,
+            similarity: group.averageSimilarity
+        }))
+    };
+    // Build stats
+    const uniqueFiles = new Set(occurrences.map(o => o.file));
+    const formatCounts = {};
+    for (const occurrence of occurrences) {
+        formatCounts[occurrence.format] = (formatCounts[occurrence.format] || 0) + 1;
+    }
+    statsCache = {
+        totalOccurrences: occurrences.length,
+        uniqueColors: colorDataCache.length,
+        filesScanned: uniqueFiles.size,
+        formats: formatCounts
+    };
+}
+function setupApiRoutes(app) {
+    app.get('/api/colors', (_req, res) => {
+        res.json(colorDataCache);
+    });
+    app.get('/api/suggestions', (_req, res) => {
+        res.json(suggestionsCache || { cssVariables: [], merges: [] });
+    });
+    app.get('/api/stats', (_req, res) => {
+        res.json(statsCache || {
+            totalOccurrences: 0,
+            uniqueColors: 0,
+            filesScanned: 0,
+            formats: {}
+        });
+    });
+}
+//# sourceMappingURL=api.js.map

package/dist/server/api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../../src/server/api.ts"],"names":[],"mappings":"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"}

package/dist/server/server.d.ts

@@ -0,0 +1,4 @@
+import { Express } from 'express';
+export declare function createServer(port: number | undefined, uiDir: string): Express;
+export declare function startServer(port: number | undefined, uiDir: string, shouldOpen?: boolean): Promise<void>;
+//# sourceMappingURL=server.d.ts.map

package/dist/server/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/server/server.ts"],"names":[],"mappings":"AAAA,OAAgB,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAK3C,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,YAAO,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAexE;AAED,wBAAsB,WAAW,CAC/B,IAAI,EAAE,MAAM,YAAO,EACnB,KAAK,EAAE,MAAM,EACb,UAAU,GAAE,OAAc,GACzB,OAAO,CAAC,IAAI,CAAC,CAmBf"}

package/dist/server/server.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createServer = createServer;
+exports.startServer = startServer;
+const express_1 = __importDefault(require("express"));
+const path_1 = require("path");
+const api_1 = require("./api");
+const open_1 = __importDefault(require("open"));
+function createServer(port = 6969, uiDir) {
+    const app = (0, express_1.default)();
+    // Serve static files from UI directory
+    app.use(express_1.default.static(uiDir));
+    // Setup API routes
+    (0, api_1.setupApiRoutes)(app);
+    // Fallback to index.html for SPA routing
+    app.get('*', (_req, res) => {
+        res.sendFile((0, path_1.join)(uiDir, 'index.html'));
+    });
+    return app;
+}
+async function startServer(port = 6969, uiDir, shouldOpen = true) {
+    const app = createServer(port, uiDir);
+    return new Promise((resolve) => {
+        app.listen(port, () => {
+            const url = `http://localhost:${port}`;
+            console.log(`\n🚀 Server running at ${url}`);
+            console.log(`📊 Open your browser to view the color visualizer\n`);
+            if (shouldOpen) {
+                (0, open_1.default)(url).catch((err) => {
+                    console.warn(`Could not open browser automatically: ${err}`);
+                    console.log(`Please open ${url} manually`);
+                });
+            }
+            resolve();
+        });
+    });
+}
+//# sourceMappingURL=server.js.map

package/dist/server/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/server/server.ts"],"names":[],"mappings":";;;;;AAKA,oCAeC;AAED,kCAuBC;AA7CD,sDAA2C;AAC3C,+BAA4B;AAC5B,+BAAuC;AACvC,gDAAwB;AAExB,SAAgB,YAAY,CAAC,OAAe,IAAI,EAAE,KAAa;IAC7D,MAAM,GAAG,GAAG,IAAA,iBAAO,GAAE,CAAC;IAEtB,uCAAuC;IACvC,GAAG,CAAC,GAAG,CAAC,iBAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/B,mBAAmB;IACnB,IAAA,oBAAc,EAAC,GAAG,CAAC,CAAC;IAEpB,yCAAyC;IACzC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;QACzB,GAAG,CAAC,QAAQ,CAAC,IAAA,WAAI,EAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,CAAC;AACb,CAAC;AAEM,KAAK,UAAU,WAAW,CAC/B,OAAe,IAAI,EACnB,KAAa,EACb,aAAsB,IAAI;IAE1B,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAEtC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE;YACpB,MAAM,GAAG,GAAG,oBAAoB,IAAI,EAAE,CAAC;YACvC,OAAO,CAAC,GAAG,CAAC,0BAA0B,GAAG,EAAE,CAAC,CAAC;YAC7C,OAAO,CAAC,GAAG,CAAC,qDAAqD,CAAC,CAAC;YAEnE,IAAI,UAAU,EAAE,CAAC;gBACf,IAAA,cAAI,EAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;oBACtB,OAAO,CAAC,IAAI,CAAC,yCAAyC,GAAG,EAAE,CAAC,CAAC;oBAC7D,OAAO,CAAC,GAAG,CAAC,eAAe,GAAG,WAAW,CAAC,CAAC;gBAC7C,CAAC,CAAC,CAAC;YACL,CAAC;YAED,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "colx",
+  "version": "1.0.0",
+  "description": "Scan and visualize Tailwind arbitrary color values with CSS variable consolidation suggestions",
+  "main": "dist/index.js",
+  "bin": {
+    "colx": "dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "bun run src/index.ts",
+    "start": "node dist/index.js"
+  },
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "color",
+    "visualizer",
+    "css-variables",
+    "arbitrary-values"
+  ],
+  "author": "hellosatyajit <hellosatyajit@users.noreply.github.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hellosatyajit/colx.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hellosatyajit/colx/issues"
+  },
+  "homepage": "https://github.com/hellosatyajit/colx#readme",
+  "engines": {
+    "node": ">=16"
+  },
+  "dependencies": {
+    "commander": "^11.1.0",
+    "express": "^4.18.2",
+    "chroma-js": "^2.4.2",
+    "open": "^10.1.0"
+  },
+  "devDependencies": {
+    "@types/chroma-js": "^3.1.2",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.10.6",
+    "typescript": "^5.3.3"
+  },
+  "files": [
+    "dist",
+    "src/ui"
+  ]
+}

package/src/ui/app.jsx

@@ -0,0 +1,277 @@
+const { useState, useEffect } = React;
+
+function ColorCard({ color, onClick }) {
+  return (
+    <div className="color-card" onClick={() => onClick(color)}>
+      <div 
+        className="color-swatch" 
+        style={{ backgroundColor: color.hex }}
+      />
+      <div className="color-info">
+        <div className="color-hex">{color.hex}</div>
+        <div className="color-format">{color.format}</div>
+      </div>
+    </div>
+  );
+}
+
+function ColorDetails({ color, onClose }) {
+  if (!color) return null;
+
+  return (
+    <div className="color-details active">
+      <div className="color-details-header">
+        <div 
+          className="color-details-swatch"
+          style={{ backgroundColor: color.hex }}
+        />
+        <div className="color-details-info">
+          <h3>{color.hex}</h3>
+          <div className="color-format">{color.format.toUpperCase()}</div>
+          <div style={{ marginTop: '0.5rem', color: '#666', fontSize: '0.875rem' }}>
+            {color.occurrences.length} occurrence{color.occurrences.length !== 1 ? 's' : ''}
+          </div>
+        </div>
+      </div>
+      <div>
+        <h4 style={{ marginBottom: '0.75rem', fontSize: '0.875rem', color: '#666', textTransform: 'uppercase' }}>
+          Used in:
+        </h4>
+        <ul className="occurrences-list">
+          {color.occurrences.map((occ, idx) => (
+            <li key={idx} className="occurrence-item">
+              <span className="occurrence-file">{occ.file}</span>
+              <span className="occurrence-line">:{occ.line}</span>
+              <div style={{ marginTop: '0.25rem', color: '#999', fontSize: '0.75rem' }}>
+                {occ.className}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+function Suggestions({ suggestions, stats }) {
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text).then(() => {
+      alert('Copied to clipboard!');
+    });
+  };
+
+  return (
+    <div className="suggestions">
+      <h2>Suggestions</h2>
+      
+      {suggestions.merges.length > 0 && (
+        <div className="suggestion-section">
+          <h3>Similar Colors (Consider Merging)</h3>
+          {suggestions.merges.map((merge, idx) => (
+            <div key={idx} className="merge-group">
+              <div style={{ fontSize: '0.875rem', color: '#666', marginBottom: '0.5rem' }}>
+                These colors are very similar (Delta E: {merge.similarity.toFixed(2)})
+              </div>
+              <div className="merge-colors">
+                {merge.colors.map((color, colorIdx) => (
+                  <div 
+                    key={colorIdx}
+                    className="merge-color-swatch"
+                    style={{ backgroundColor: color }}
+                    title={color}
+                  />
+                ))}
+              </div>
+              <div className="merge-suggested">
+                <span style={{ fontSize: '0.875rem', color: '#666' }}>Suggested merge:</span>
+                <div 
+                  className="merge-color-swatch"
+                  style={{ backgroundColor: merge.suggestedColor }}
+                  title={merge.suggestedColor}
+                />
+                <span style={{ fontFamily: 'Monaco, Courier New, monospace', fontSize: '0.875rem' }}>
+                  {merge.suggestedColor}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {suggestions.merges.length === 0 && (
+        <div style={{ color: '#666', textAlign: 'center', padding: '2rem' }}>
+          No suggestions at this time. All colors are unique and well-organized!
+        </div>
+      )}
+    </div>
+  );
+}
+
+function FilterBar({ colors, selectedFilter, onFilterChange }) {
+  // Extract unique utility prefixes from colors
+  const utilityPrefixes = new Set();
+  colors.forEach(color => {
+    color.occurrences.forEach(occ => {
+      // Extract prefix from className (e.g., "bg-[#ff5733]" -> "bg")
+      const match = occ.className.match(/^([a-z]+)-\[/);
+      if (match) {
+        utilityPrefixes.add(match[1]);
+      }
+    });
+  });
+
+  const filters = ['all', ...Array.from(utilityPrefixes).sort()];
+
+  return (
+    <div className="filter-container">
+      <div className="filter-title">Filter by Utility Class</div>
+      <div className="filter-buttons">
+        {filters.map(filter => (
+          <button
+            key={filter}
+            className={`filter-button ${selectedFilter === filter ? 'active' : ''}`}
+            onClick={() => onFilterChange(filter)}
+          >
+            {filter === 'all' ? 'All' : filter}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  const [colors, setColors] = useState([]);
+  const [allColors, setAllColors] = useState([]);
+  const [suggestions, setSuggestions] = useState({ cssVariables: [], merges: [] });
+  const [stats, setStats] = useState(null);
+  const [selectedColor, setSelectedColor] = useState(null);
+  const [selectedFilter, setSelectedFilter] = useState('all');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const [colorsRes, suggestionsRes, statsRes] = await Promise.all([
+          fetch('/api/colors'),
+          fetch('/api/suggestions'),
+          fetch('/api/stats')
+        ]);
+
+        if (!colorsRes.ok || !suggestionsRes.ok || !statsRes.ok) {
+          throw new Error('Failed to fetch data');
+        }
+
+        const colorsData = await colorsRes.json();
+        const suggestionsData = await suggestionsRes.json();
+        const statsData = await statsRes.json();
+
+        setAllColors(colorsData);
+        setColors(colorsData);
+        setSuggestions(suggestionsData);
+        setStats(statsData);
+        setLoading(false);
+      } catch (err) {
+        setError(err.message);
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="container">
+        <div className="loading">Loading color data...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container">
+        <div className="error">Error: {error}</div>
+      </div>
+    );
+  }
+
+  // Filter colors based on selected utility class
+  const handleFilterChange = (filter) => {
+    setSelectedFilter(filter);
+    if (filter === 'all') {
+      setColors(allColors);
+    } else {
+      const filtered = allColors.map(color => {
+        const filteredOccurrences = color.occurrences.filter(occ => {
+          const match = occ.className.match(/^([a-z]+)-\[/);
+          return match && match[1] === filter;
+        });
+        return {
+          ...color,
+          occurrences: filteredOccurrences
+        };
+      }).filter(color => color.occurrences.length > 0);
+      setColors(filtered);
+    }
+  };
+
+  return (
+    <div className="container">
+      <div className="header">
+        <h1>Tailwind Color Visualizer</h1>
+        <p>Visualize and analyze arbitrary color values in your Tailwind CSS project</p>
+        {stats && (
+          <div className="stats">
+            <div className="stat">
+              <div className="stat-label">Total Occurrences</div>
+              <div className="stat-value">{stats.totalOccurrences}</div>
+            </div>
+            <div className="stat">
+              <div className="stat-label">Unique Colors</div>
+              <div className="stat-value">{stats.uniqueColors}</div>
+            </div>
+            <div className="stat">
+              <div className="stat-label">Files Scanned</div>
+              <div className="stat-value">{stats.filesScanned}</div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <FilterBar 
+        colors={allColors} 
+        selectedFilter={selectedFilter}
+        onFilterChange={handleFilterChange}
+      />
+
+      {selectedColor && (
+        <ColorDetails 
+          color={selectedColor} 
+          onClose={() => setSelectedColor(null)} 
+        />
+      )}
+
+      <div className="palette-grid">
+        {colors.map((color) => (
+          <ColorCard 
+            key={color.id} 
+            color={color} 
+            onClick={setSelectedColor}
+          />
+        ))}
+      </div>
+
+      {colors.length === 0 && selectedFilter !== 'all' && (
+        <div style={{ textAlign: 'center', padding: '3rem', color: '#666' }}>
+          No colors found for "{selectedFilter}" utility class
+        </div>
+      )}
+
+      <Suggestions suggestions={suggestions} stats={stats} />
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));