@empline/preflight 1.0.20

package/dist/checks/ui/dark-mode-support.js

@@ -0,0 +1,702 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Dark Mode Support Preflight
+ *
+ * Detects components that don't properly support dark mode theming:
+ *
+ * 1. Hardcoded light-only colors (bg-white, bg-gray-*, text-gray-*)
+ * 2. Hardcoded color values without dark: variants
+ * 3. Inline styles with hardcoded colors that won't respond to theme
+ * 4. Card/container components with hardcoded shadows (should use CSS variables)
+ *
+ * Note: CSS variable-based styling (var(--shadow-*), var(--bg-*)) automatically
+ * handles dark mode and doesn't need explicit dark: variants.
+ *
+ * Usage:
+ *   pnpm preflight:dark-mode              # All checks
+ *   pnpm preflight:dark-mode tailwind     # Tailwind classes only
+ *   pnpm preflight:dark-mode inline       # Inline styles only
+ *   pnpm preflight:dark-mode cards        # Card dark mode only
+ *   pnpm preflight:dark-mode --strict     # Treat warnings as errors
+ *
+ * @blocking false (warnings only, use --strict for blocking)
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DarkModeSupportModule = exports.tags = exports.description = exports.blocking = exports.category = exports.name = exports.id = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const console_chars_1 = require("../../utils/console-chars");
+const file_cache_1 = require("../../shared/file-cache");
+const glob_patterns_1 = require("../../shared/glob-patterns");
+const universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+// Check metadata
+exports.id = "ui/dark-mode-support";
+exports.name = "Dark Mode Support";
+exports.category = "ui";
+exports.blocking = false;
+exports.description = "Dark Mode Support Preflight";
+exports.tags = ["ui"];
+const EXCLUDED = (0, glob_patterns_1.extendExcludes)(glob_patterns_1.PRODUCTION_CODE_EXCLUDES, [
+    "**/scripts/**",
+    "**/*.d.ts",
+    "**/docs/**",
+]);
+// Light-only Tailwind classes that need dark: variants
+const LIGHT_ONLY_BG_CLASSES = [
+    "bg-white",
+    "bg-gray-50",
+    "bg-gray-100",
+    "bg-gray-200",
+    "bg-slate-50",
+    "bg-slate-100",
+    "bg-slate-200",
+    "bg-zinc-50",
+    "bg-zinc-100",
+    "bg-zinc-200",
+    "bg-neutral-50",
+    "bg-neutral-100",
+    "bg-neutral-200",
+];
+const LIGHT_ONLY_TEXT_CLASSES = [
+    "text-gray-500",
+    "text-gray-600",
+    "text-gray-700",
+    "text-gray-800",
+    "text-gray-900",
+    "text-slate-500",
+    "text-slate-600",
+    "text-slate-700",
+    "text-slate-800",
+    "text-slate-900",
+    "text-zinc-500",
+    "text-zinc-600",
+    "text-zinc-700",
+    "text-zinc-800",
+    "text-zinc-900",
+];
+const LIGHT_ONLY_BORDER_CLASSES = [
+    "border-gray-200",
+    "border-gray-300",
+    "border-gray-100",
+    "border-slate-200",
+    "border-slate-300",
+    "border-slate-100",
+    "border-zinc-200",
+    "border-zinc-300",
+    "border-zinc-100",
+    "border-neutral-200",
+    "border-neutral-300",
+];
+// Divide classes that need dark variants
+const LIGHT_ONLY_DIVIDE_CLASSES = [
+    "divide-gray-200",
+    "divide-gray-300",
+    "divide-slate-200",
+    "divide-slate-300",
+];
+// Ring/outline classes that need dark variants
+const LIGHT_ONLY_RING_CLASSES = [
+    "ring-gray-200",
+    "ring-gray-300",
+    "ring-slate-200",
+    "ring-slate-300",
+    "outline-gray-200",
+    "outline-gray-300",
+];
+// Shadow classes that may need dark variants for visibility
+const LIGHT_ONLY_SHADOW_CLASSES = ["shadow-sm", "shadow-md", "shadow-lg", "shadow-xl"];
+// Hardcoded color values in inline styles
+const HARDCODED_LIGHT_COLORS = [
+    {
+        pattern: /backgroundColor:\s*["'](?:white|#fff(?:fff)?|rgb\(255,\s*255,\s*255\))["']/gi,
+        name: "white background",
+    },
+    { pattern: /backgroundColor:\s*["']#f[0-9a-f]{5}["']/gi, name: "light gray background" },
+    { pattern: /color:\s*["'](?:#333|#444|#555|#666|#777|#888)["']/gi, name: "hardcoded gray text" },
+    {
+        pattern: /borderColor:\s*["'](?:#[de][0-9a-f]{5}|#ccc|#ddd|#eee)["']/gi,
+        name: "light border color",
+    },
+    { pattern: /boxShadow:\s*["'][^"']*rgba?\([^)]+\)[^"']*["']/gi, name: "hardcoded shadow" },
+];
+// Components that commonly need dark mode attention
+const DARK_MODE_CRITICAL_COMPONENTS = [
+    "Card",
+    "Paper",
+    "Modal",
+    "Dialog",
+    "Popover",
+    "Dropdown",
+    "Menu",
+];
+// CACHED FILE LISTS - Scan once, use everywhere
+let _cachedAllTsxJsxFiles = null;
+async function getAllTsxJsxFiles() {
+    if (!_cachedAllTsxJsxFiles) {
+        _cachedAllTsxJsxFiles = await file_cache_1.fileCache.getAllTsxJsx();
+    }
+    return _cachedAllTsxJsxFiles;
+}
+class DarkModeSupportModule {
+    verbose;
+    strict;
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+        this.strict = options.strict || false;
+    }
+    /**
+     * Check 1: Tailwind classes without dark: variants
+     */
+    async checkTailwindDarkMode() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAllTsxJsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Skip comments
+                if (line.trim().startsWith("//") || line.trim().startsWith("*"))
+                    return;
+                // Skip lines that already have dark: variants nearby
+                const hasDarkVariant = /dark:/.test(line);
+                // Check for className attributes
+                const classNameMatch = line.match(/className\s*=\s*[{"`]([^`}"]+)[`}"]/);
+                if (!classNameMatch)
+                    return;
+                const classNameString = classNameMatch[1];
+                // Check background classes
+                for (const bgClass of LIGHT_ONLY_BG_CLASSES) {
+                    // Use word boundary but exclude opacity variants like bg-white/5
+                    const regex = new RegExp(`\\b${bgClass}\\b(?!\\/)`);
+                    if (regex.test(classNameString)) {
+                        // Check if there's a corresponding dark: variant
+                        const darkVariant = `dark:bg-`;
+                        if (!classNameString.includes(darkVariant) && !hasDarkVariant) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "missing-dark-bg",
+                                severity: this.strict ? "error" : "warning",
+                                message: `"${bgClass}" without dark mode variant`,
+                                suggestion: `Add dark: variant, e.g., "${bgClass} dark:bg-slate-800" or use CSS variable "bg-[var(--bg-primary)]"`,
+                                snippet: line.trim().substring(0, 120),
+                            });
+                        }
+                    }
+                }
+                // Check text classes
+                for (const textClass of LIGHT_ONLY_TEXT_CLASSES) {
+                    const regex = new RegExp(`\\b${textClass}\\b`);
+                    if (regex.test(classNameString)) {
+                        const darkVariant = `dark:text-`;
+                        if (!classNameString.includes(darkVariant) && !hasDarkVariant) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "missing-dark-text",
+                                severity: this.strict ? "error" : "warning",
+                                message: `"${textClass}" without dark mode variant`,
+                                suggestion: `Add dark: variant, e.g., "${textClass} dark:text-slate-400" or use CSS variable "text-[var(--text-secondary)]"`,
+                                snippet: line.trim().substring(0, 120),
+                            });
+                        }
+                    }
+                }
+                // Check border classes
+                for (const borderClass of LIGHT_ONLY_BORDER_CLASSES) {
+                    const regex = new RegExp(`\\b${borderClass}\\b`);
+                    if (regex.test(classNameString)) {
+                        const darkVariant = `dark:border-`;
+                        if (!classNameString.includes(darkVariant) && !hasDarkVariant) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "missing-dark-border",
+                                severity: this.strict ? "warning" : "info",
+                                message: `"${borderClass}" without dark mode variant`,
+                                suggestion: `Add dark: variant or use CSS variable "border-[var(--border-color)]"`,
+                                snippet: line.trim().substring(0, 120),
+                            });
+                        }
+                    }
+                }
+                // Check divide classes
+                for (const divideClass of LIGHT_ONLY_DIVIDE_CLASSES) {
+                    const regex = new RegExp(`\\b${divideClass}\\b`);
+                    if (regex.test(classNameString)) {
+                        if (!classNameString.includes("dark:divide-") && !hasDarkVariant) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "missing-dark-divide",
+                                severity: "info",
+                                message: `"${divideClass}" without dark mode variant`,
+                                suggestion: `Add dark: variant, e.g., "${divideClass} dark:divide-slate-700"`,
+                                snippet: line.trim().substring(0, 120),
+                            });
+                        }
+                    }
+                }
+                // Check ring/outline classes
+                for (const ringClass of LIGHT_ONLY_RING_CLASSES) {
+                    const regex = new RegExp(`\\b${ringClass}\\b`);
+                    if (regex.test(classNameString)) {
+                        if (!classNameString.includes("dark:ring-") &&
+                            !classNameString.includes("dark:outline-") &&
+                            !hasDarkVariant) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "missing-dark-ring",
+                                severity: "info",
+                                message: `"${ringClass}" without dark mode variant`,
+                                suggestion: `Add dark: variant for focus/ring states`,
+                                snippet: line.trim().substring(0, 120),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Tailwind Dark Mode Classes",
+            passed: !hasErrors,
+            blocking: this.strict,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Check 2: Inline styles with hardcoded colors
+     */
+    async checkInlineStyleColors() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAllTsxJsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Skip comments
+                if (line.trim().startsWith("//") || line.trim().startsWith("*"))
+                    return;
+                // Skip lines using CSS variables (they handle dark mode)
+                if (line.includes("var(--"))
+                    return;
+                for (const { pattern, name } of HARDCODED_LIGHT_COLORS) {
+                    if (pattern.test(line)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-inline-color",
+                            severity: "warning",
+                            message: `Hardcoded ${name} in inline style`,
+                            suggestion: `Use CSS variable instead, e.g., "var(--bg-primary)" or "var(--text-primary)"`,
+                            snippet: line.trim().substring(0, 120),
+                        });
+                    }
+                    // Reset regex lastIndex
+                    pattern.lastIndex = 0;
+                }
+            });
+        }
+        return {
+            name: "Inline Style Colors",
+            passed: true, // Non-blocking
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Check 3: Components using non-themed color tokens
+     * Detects patterns like bg-white that should use semantic tokens
+     */
+    async checkSemanticTokenUsage() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAllTsxJsxFiles();
+        // Patterns that should use semantic tokens instead
+        // Note: text-white/text-black on colored backgrounds are intentional and skipped
+        // Also skip opacity variants like bg-white/5 which are intentional overlays
+        const shouldUseTokens = [
+            {
+                pattern: /\bbg-white\b(?!\/|\s+dark:)/,
+                suggestion: "bg-[var(--bg-primary)]",
+                name: "white background",
+                skipIfColoredBg: false,
+            },
+            {
+                pattern: /\bbg-black\b(?!\/|\s+dark:)/,
+                suggestion: "bg-[var(--bg-inverse)]",
+                name: "black background",
+                skipIfColoredBg: false,
+            },
+            {
+                pattern: /\btext-black\b(?!\/|\s+dark:)/,
+                suggestion: "text-[var(--text-primary)]",
+                name: "black text",
+                skipIfColoredBg: true,
+            },
+            {
+                pattern: /\btext-white\b(?!\/|\s+dark:)/,
+                suggestion: "text-[var(--text-inverse)]",
+                name: "white text",
+                skipIfColoredBg: true,
+            },
+        ];
+        // Colored backgrounds where text-white/text-black are intentional
+        const coloredBgPatterns = /bg-(primary|secondary|blue|red|green|yellow|orange|purple|pink|indigo|teal|cyan|emerald|rose|amber|lime|sky|violet|fuchsia|destructive|success|warning|info|error|brand|accent|gradient|black|slate-[789]|gray-[789]|zinc-[789])/;
+        // Skip UI component library files - these handle their own theming
+        const skipFiles = [
+            "/components/ui/",
+            "/components/shared/UnifiedHeader",
+            "MobileScannerMode", // Camera overlay - intentionally dark
+            "Slider.tsx",
+            "Chip.tsx",
+            "Badge.tsx",
+            "Button.tsx",
+            "Autocomplete.tsx",
+        ];
+        for (const file of files) {
+            // Skip UI library files
+            if (skipFiles.some((skip) => file.includes(skip)))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//") || line.trim().startsWith("*"))
+                    return;
+                for (const { pattern, suggestion, name, skipIfColoredBg } of shouldUseTokens) {
+                    if (pattern.test(line)) {
+                        // Check if it's in a className context
+                        if (line.includes("className")) {
+                            // Skip text-white/text-black if on a colored background (intentional usage)
+                            if (skipIfColoredBg && coloredBgPatterns.test(line)) {
+                                return;
+                            }
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "should-use-semantic-token",
+                                severity: "info",
+                                message: `Consider using semantic token for ${name}`,
+                                suggestion: `Replace with "${suggestion}" for automatic dark mode support`,
+                                snippet: line.trim().substring(0, 120),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        return {
+            name: "Semantic Token Usage",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Check 4: Card/Container components with dark mode issues
+     * Ensures Card, Paper, Modal etc have proper dark mode styling
+     *
+     * Note: CSS variable shadows (shadow-[var(--shadow-NAME)]) are already dark-mode-ready
+     * and don't need explicit dark: variants.
+     */
+    async checkCardDarkMode() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAllTsxJsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//") || line.trim().startsWith("*"))
+                    return;
+                // Check for Card/container components
+                for (const component of DARK_MODE_CRITICAL_COMPONENTS) {
+                    const componentRegex = new RegExp(`<${component}[^>]*className\\s*=\\s*["'\`]([^"'\`]+)["'\`]`);
+                    const match = line.match(componentRegex);
+                    if (match) {
+                        const className = match[1];
+                        const hasDarkVariant = /dark:/.test(className);
+                        const usesCssVariables = /var\(--/.test(className);
+                        // Check for bg-white without dark variant (skip if using CSS variables)
+                        if (/\bbg-white\b/.test(className) && !hasDarkVariant && !usesCssVariables) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "card-missing-dark-bg",
+                                severity: this.strict ? "error" : "warning",
+                                message: `${component} has bg-white without dark mode variant`,
+                                suggestion: `Add "dark:bg-slate-800" or use "bg-[var(--bg-card)]"`,
+                                snippet: line.trim().substring(0, 120),
+                            });
+                        }
+                        // Check for border without dark variant (skip if using CSS variables)
+                        if (/\bborder(?!-none)\b/.test(className) &&
+                            !/dark:border/.test(className) &&
+                            !hasDarkVariant &&
+                            !usesCssVariables) {
+                            // Only flag if there's a light border color
+                            if (/border-(?:gray|slate|zinc|neutral)-\d+/.test(className)) {
+                                issues.push({
+                                    file,
+                                    line: index + 1,
+                                    type: "card-missing-dark-border",
+                                    severity: this.strict ? "error" : "warning",
+                                    message: `${component} has border color without dark mode variant`,
+                                    suggestion: `Add dark:border-* variant or use "border-[var(--border-color)]"`,
+                                    snippet: line.trim().substring(0, 120),
+                                });
+                            }
+                        }
+                        // Skip shadow check - CSS variable shadows handle dark mode automatically
+                        // Only flag hardcoded shadows without dark variants AND without CSS variables
+                        const hasHardcodedShadow = /\bshadow-(?:sm|md|lg|xl|2xl)\b/.test(className);
+                        const hasCssVarShadow = /shadow-\[var\(--shadow/.test(className);
+                        if (hasHardcodedShadow && !hasCssVarShadow && !/dark:shadow/.test(className)) {
+                            // Only warn if not using the Card component's built-in elevation (which uses CSS vars)
+                            // Check if this is a Card with elevation prop or using CSS var shadows
+                            if (!line.includes("elevation=") && !usesCssVariables) {
+                                issues.push({
+                                    file,
+                                    line: index + 1,
+                                    type: "card-shadow-dark-mode",
+                                    severity: "warning",
+                                    message: `${component} has hardcoded shadow without dark mode handling`,
+                                    suggestion: `Use "shadow-[var(--shadow-md)]" for automatic dark mode support, or add "dark:shadow-black/20"`,
+                                    snippet: line.trim().substring(0, 120),
+                                });
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Card/Container Dark Mode",
+            passed: !hasErrors,
+            blocking: this.strict,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Check 5: Focus/hover states without dark variants
+     */
+    async checkInteractiveStateDarkMode() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAllTsxJsxFiles();
+        const interactivePatterns = [
+            { pattern: /\bhover:bg-gray-\d+\b/, darkPattern: /dark:hover:bg-/, name: "hover background" },
+            { pattern: /\bfocus:ring-gray-\d+\b/, darkPattern: /dark:focus:ring-/, name: "focus ring" },
+            {
+                pattern: /\bfocus:border-gray-\d+\b/,
+                darkPattern: /dark:focus:border-/,
+                name: "focus border",
+            },
+            {
+                pattern: /\bactive:bg-gray-\d+\b/,
+                darkPattern: /dark:active:bg-/,
+                name: "active background",
+            },
+        ];
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//") || line.trim().startsWith("*"))
+                    return;
+                if (!line.includes("className"))
+                    return;
+                for (const { pattern, darkPattern, name } of interactivePatterns) {
+                    if (pattern.test(line) && !darkPattern.test(line)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "missing-dark-interactive",
+                            severity: "info",
+                            message: `${name} state without dark mode variant`,
+                            suggestion: `Add corresponding dark: variant for ${name}`,
+                            snippet: line.trim().substring(0, 120),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Interactive State Dark Mode",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    async runAll() {
+        const startTime = Date.now();
+        console.log("\n🌙 DARK MODE SUPPORT PREFLIGHT");
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log("Checking for proper dark mode theming support...\n");
+        const checks = [];
+        checks.push(await this.checkTailwindDarkMode());
+        checks.push(await this.checkInlineStyleColors());
+        checks.push(await this.checkCardDarkMode());
+        checks.push(await this.checkInteractiveStateDarkMode());
+        const totalDuration = Date.now() - startTime;
+        const allIssues = checks.flatMap((c) => c.issues);
+        const hasBlockingFailure = checks.some((c) => !c.passed && c.blocking);
+        const summary = {
+            total: checks.length,
+            passed: checks.filter((c) => c.passed).length,
+            failed: checks.filter((c) => !c.passed).length,
+            errors: allIssues.filter((i) => i.severity === "error").length,
+            warnings: allIssues.filter((i) => i.severity === "warning").length,
+            infos: allIssues.filter((i) => i.severity === "info").length,
+        };
+        this.printResults(checks, totalDuration, summary, hasBlockingFailure);
+        return {
+            module: "dark-mode-support",
+            passed: !hasBlockingFailure,
+            totalDuration,
+            checks,
+            summary,
+        };
+    }
+    printResults(checks, totalDuration, summary, hasBlockingFailure) {
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`${console_chars_1.emoji.chart} DARK MODE SUPPORT RESULTS`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        checks.forEach((check) => {
+            const icon = check.issues.length === 0
+                ? `${console_chars_1.emoji.success}`
+                : check.blocking && !check.passed
+                    ? `${console_chars_1.emoji.error}`
+                    : `${console_chars_1.emoji.warning}`;
+            const count = check.issues.length > 0 ? ` (${check.issues.length} issues)` : "";
+            console.log(`${icon} ${check.name.padEnd(35)} ${(check.duration / 1000).toFixed(2)}s${count}`);
+            if (this.verbose && check.issues.length > 0) {
+                check.issues.slice(0, 10).forEach((issue) => {
+                    console.log(`   ${issue.severity === "error" ? "${emoji.error}" : issue.severity === "warning" ? "${emoji.warning}" : "${emoji.info}"} ${issue.file}:${issue.line}`);
+                    console.log(`      ${issue.message}`);
+                    if (issue.suggestion) {
+                        console.log(`      ${console_chars_1.emoji.hint} ${issue.suggestion}`);
+                    }
+                });
+                if (check.issues.length > 10) {
+                    console.log(`   ... and ${check.issues.length - 10} more`);
+                }
+            }
+        });
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`Errors: ${summary.errors} | Warnings: ${summary.warnings} | Info: ${summary.infos} | Time: ${(totalDuration / 1000).toFixed(2)}s`);
+        if (hasBlockingFailure) {
+            console.log(`\n${console_chars_1.emoji.error} DARK MODE SUPPORT FAILED (blocking errors found)`);
+            console.log("   Fix errors before deployment.\n");
+        }
+        else if (summary.warnings > 0) {
+            console.log(`\n${console_chars_1.emoji.warning}  DARK MODE SUPPORT PASSED (with warnings)`);
+            console.log("   Consider adding dark: variants for better theme support.\n");
+        }
+        else {
+            console.log(`\n${console_chars_1.emoji.success} DARK MODE SUPPORT PASSED\n`);
+        }
+    }
+}
+exports.DarkModeSupportModule = DarkModeSupportModule;
+async function main() {
+    const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(path.basename(__filename, ".ts"));
+    const args = process.argv.slice(2);
+    const mode = args.find((a) => !a.startsWith("-")) || "all";
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const strict = args.includes("--strict") || args.includes("-s");
+    const module = new DarkModeSupportModule({ verbose, strict });
+    const runSingle = async (name, fn) => {
+        console.log(`\n🌙 Running ${name} check...${strict ? " (STRICT MODE)" : ""}\n`);
+        const check = await fn();
+        console.log(`${check.passed ? "${emoji.success}" : "${emoji.warning}"} ${check.name}: ${check.issues.length} issues`);
+        check.issues.slice(0, 20).forEach((issue) => {
+            console.log(`   ${issue.severity === "error" ? "${emoji.error}" : issue.severity === "warning" ? "${emoji.warning}" : "${emoji.info}"} ${issue.file}:${issue.line}: ${issue.message}`);
+        });
+        if (check.issues.length > 20) {
+            console.log(`   ... and ${check.issues.length - 20} more`);
+        }
+        return {
+            module: `dark-mode-support:${name}`,
+            passed: !check.blocking || check.passed,
+            totalDuration: check.duration,
+            checks: [check],
+            summary: {
+                total: 1,
+                passed: check.passed ? 1 : 0,
+                failed: check.passed ? 0 : 1,
+                errors: check.issues.filter((i) => i.severity === "error").length,
+                warnings: check.issues.filter((i) => i.severity === "warning").length,
+                infos: check.issues.filter((i) => i.severity === "info").length,
+            },
+        };
+    };
+    let result;
+    switch (mode) {
+        case "tailwind":
+            result = await runSingle("Tailwind Dark Mode", () => module.checkTailwindDarkMode());
+            break;
+        case "inline":
+            result = await runSingle("Inline Style Colors", () => module.checkInlineStyleColors());
+            break;
+        case "cards":
+            result = await runSingle("Card Dark Mode", () => module.checkCardDarkMode());
+            break;
+        case "interactive":
+            result = await runSingle("Interactive State Dark Mode", () => module.checkInteractiveStateDarkMode());
+            break;
+        default:
+            result = await module.runAll();
+            break;
+    }
+    // Exit with error code if strict mode and issues found
+    process.exit(result.passed ? 0 : 1);
+}
+if (require.main === module) {
+    main();
+}
+//# sourceMappingURL=dark-mode-support.js.map