@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-tokens.js

@@ -0,0 +1,990 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Consolidated UI Token Enforcement Preflight
+ *
+ * Combines 7 separate token checks into one comprehensive module:
+ * - tokenization-check (colors, spacing, typography, z-index, layout)
+ * - spacing-token-enforcement
+ * - color-token-enforcement
+ * - shadow-token-enforcement
+ * - zindex-token-enforcement
+ * - design-token-enforcement
+ * - animation-token-enforcement
+ *
+ * Usage:
+ *   pnpm preflight:ui-tokens           # All token checks
+ *   pnpm preflight:ui-tokens colors    # Color tokens only
+ *   pnpm preflight:ui-tokens spacing   # Spacing tokens only
+ *   pnpm preflight:ui-tokens shadows   # Shadow tokens only
+ *   pnpm preflight:ui-tokens zindex    # Z-index tokens only
+ *   pnpm preflight:ui-tokens animation # Animation tokens only
+ *   pnpm preflight:ui-tokens design    # Design tokens (borderRadius, fontSize)
+ */
+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.UITokensPreflightModule = 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 universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+const concurrency_config_1 = require("../../shared/concurrency-config");
+// PATTERNS - Consolidated from individual preflight files
+const PATTERNS = {
+    // From tokenization-check.js
+    hexColor: /#[0-9a-fA-F]{3,6}(?![^<]*var\()/g,
+    rgbColor: /rgba?\([^)]+\)(?![^<]*var\()/g,
+    hardcodedPx: /(?:padding|margin|gap|width|height):\s*['"]?\d+px/g,
+    hardcodedFontSize: /fontSize:\s*['"]?\d+(?:px|rem)/g,
+    hardcodedZIndex: /z-index:\s*\d+(?![^<]*var\()/g,
+    tailwindSpacing: /\b(?:p|m|gap|space)-(?:x-|y-)?(\d+)\b/g,
+    tailwindPadding: /\b(?:px|py|pt|pb|pl|pr)-(\d+)\b/g,
+    tailwindMargin: /\b(?:mx|my|mt|mb|ml|mr)-(\d+)\b/g,
+    // From spacing-token-enforcement.js
+    muiSpacing: /\b(mb|mt|ml|mr|mx|my|m|pb|pt|pl|pr|px|py|p|gap):\s*([0-9]+)(?:\s*[,}\n])/g,
+    // From color-token-enforcement.js
+    hexColorProp: /(color|bgcolor|backgroundColor|borderColor):\s*["']#([0-9a-fA-F]{3,8})["']/g,
+    // From shadow-token-enforcement.js
+    hardcodedShadow: /boxShadow:\s*["'](?!var\()([^"']+)["']/g,
+    // From zindex-token-enforcement.js
+    hardcodedZIndexProp: /zIndex:\s*([0-9]+)/g,
+    // From design-token-enforcement.js
+    hardcodedBorderRadius: /borderRadius:\s*["']?(\d+)["']?\s*[,}]/g,
+    hardcodedFontSizeWithUnit: /fontSize:\s*["'](\d+\.?\d*)(rem|px|em)["']/g,
+    // From animation-token-enforcement.js
+    hardcodedTransition: /transition:\s*['"]?[^'"]*(\d+ms|\d+\.?\d*s)[^'"]*['"]?/i,
+    hardcodedAnimation: /animation:\s*['"]?[^'"]*(\d+ms|\d+\.?\d*s)[^'"]*['"]?/i,
+    hardcodedEasing: /cubic-bezier\([^)]+\)/i,
+    tailwindTransition: /\btransition-(\w+)\b/,
+    tailwindDuration: /\bduration-(\d+)\b/,
+    tailwindEase: /\bease-(in|out|in-out|linear)\b/,
+};
+const ALLOWED_EXCEPTIONS = [
+    "rgba(0, 0, 0,",
+    "rgba(255, 255, 255,",
+    "rgba(255,255,255,", // No spaces variant
+    "rgba(0,0,0,", // No spaces variant
+    "rgb(0, 0, 0)",
+    "rgb(0,0,0)",
+    "rgb(255, 255, 255)",
+    "rgb(255,255,255)",
+    "transparent",
+    "inherit",
+    "currentColor",
+    "animation:",
+    "transition:",
+    "shadow-",
+    "blur-",
+    "opacity-",
+];
+// Brand colors that should stay hardcoded (external brand identity)
+// Also includes basic black/white and common neutral grays
+const BRAND_COLORS = {
+    // Basic black/white (legitimate for high contrast)
+    "#000": "Black",
+    "#000000": "Black",
+    "#fff": "White",
+    "#ffffff": "White",
+    // eBay
+    "#e53238": "eBay red",
+    "#0064d2": "eBay blue",
+    "#f5af02": "eBay yellow",
+    "#86b817": "eBay green",
+    // Amazon
+    "#ff9900": "Amazon orange",
+    "#0066c0": "Amazon blue",
+    // Walmart
+    "#0071ce": "Walmart blue",
+    "#007dc6": "Walmart blue alt",
+    // Etsy
+    "#f56400": "Etsy orange",
+    // Whatnot
+    "#7c3aed": "Purple (Whatnot / Tailwind violet-600)",
+    // Shopify
+    "#96bf48": "Shopify green",
+    // WooCommerce
+    "#7f54b3": "WooCommerce purple",
+    // Shippo
+    "#2d9cdb": "Shippo blue",
+    // ShipStation
+    "#1a73e8": "ShipStation blue",
+    // Webhook/API
+    "#6366f1": "Indigo (Webhook / Tailwind indigo-500)",
+    // Target
+    "#cc0c39": "Target red",
+    // Stripe
+    "#5469d4": "Stripe purple",
+    // PayPal
+    "#00457c": "PayPal blue",
+    "#003087": "PayPal dark blue",
+    "#009cde": "PayPal light blue",
+    "#ffc439": "PayPal yellow",
+    // Social
+    "#1877f2": "Facebook blue",
+    "#1da1f2": "Twitter blue",
+    "#e4405f": "Instagram pink",
+    "#ff0000": "YouTube red",
+    "#25d366": "WhatsApp green",
+    // Google
+    "#4285f4": "Google blue",
+    "#34a853": "Google green",
+    "#fbbc05": "Google yellow",
+    "#ea4335": "Google red",
+    // Tailwind palette hex colors (commonly used in components)
+    "#3b82f6": "Tailwind blue-500",
+    "#2563eb": "Tailwind blue-600",
+    "#1d4ed8": "Tailwind blue-700",
+    "#60a5fa": "Tailwind blue-400",
+    "#ef4444": "Tailwind red-500",
+    "#dc2626": "Tailwind red-600",
+    "#b91c1c": "Tailwind red-700",
+    "#f87171": "Tailwind red-400",
+    "#22c55e": "Tailwind green-500",
+    "#16a34a": "Tailwind green-600",
+    "#15803d": "Tailwind green-700",
+    "#4ade80": "Tailwind green-400",
+    "#10b981": "Tailwind emerald-500",
+    "#059669": "Tailwind emerald-600",
+    "#f59e0b": "Tailwind amber-500",
+    "#d97706": "Tailwind amber-600",
+    "#eab308": "Tailwind yellow-500",
+    "#ca8a04": "Tailwind yellow-600",
+    "#a855f7": "Tailwind purple-500",
+    "#9333ea": "Tailwind purple-600",
+    "#8b5cf6": "Tailwind violet-500",
+    "#4f46e5": "Tailwind indigo-600",
+    "#06b6d4": "Tailwind cyan-500",
+    "#0891b2": "Tailwind cyan-600",
+    "#14b8a6": "Tailwind teal-500",
+    "#0d9488": "Tailwind teal-600",
+    "#f97316": "Tailwind orange-500",
+    "#ea580c": "Tailwind orange-600",
+    "#ec4899": "Tailwind pink-500",
+    "#db2777": "Tailwind pink-600",
+    "#f43f5e": "Tailwind rose-500",
+    "#e11d48": "Tailwind rose-600",
+    "#6b7280": "Tailwind gray-500",
+    "#4b5563": "Tailwind gray-600",
+    "#374151": "Tailwind gray-700",
+    "#64748b": "Tailwind slate-500",
+    "#475569": "Tailwind slate-600",
+    "#334155": "Tailwind slate-700",
+};
+// Tailwind palette RGB values used in rgba() - these are design system colors
+// When used in rgba() for opacity effects, they're legitimate
+const TAILWIND_RGB_VALUES = [
+    // Blue (blue-500, blue-600, etc.)
+    "59, 130, 246", // blue-500
+    "37, 99, 235", // blue-600
+    "29, 78, 216", // blue-700
+    "96, 165, 250", // blue-400
+    // Red (red-500, red-600, etc.)
+    "239, 68, 68", // red-500
+    "220, 38, 38", // red-600
+    "185, 28, 28", // red-700
+    "248, 113, 113", // red-400
+    // Green (green-500, green-600, etc.)
+    "34, 197, 94", // green-500
+    "22, 163, 74", // green-600
+    "21, 128, 61", // green-700
+    "74, 222, 128", // green-400
+    // Yellow/Amber (amber-500, yellow-500, etc.)
+    "245, 158, 11", // amber-500
+    "217, 119, 6", // amber-600
+    "234, 179, 8", // yellow-500
+    "202, 138, 4", // yellow-600
+    // Purple (purple-500, violet-500, etc.)
+    "168, 85, 247", // purple-500
+    "139, 92, 246", // violet-500
+    "124, 58, 237", // violet-600
+    // Gray (gray-500, slate-500, etc.)
+    "107, 114, 128", // gray-500
+    "100, 116, 139", // slate-500
+    "71, 85, 105", // slate-600
+    // Indigo
+    "99, 102, 241", // indigo-500
+    "79, 70, 229", // indigo-600
+    // Cyan/Teal
+    "6, 182, 212", // cyan-500
+    "20, 184, 166", // teal-500
+    // Orange
+    "249, 115, 22", // orange-500
+    "234, 88, 12", // orange-600
+    // Pink/Rose
+    "236, 72, 153", // pink-500
+    "244, 63, 94", // rose-500
+    // Emerald (additional shades)
+    "16, 185, 129", // emerald-500
+    "5, 150, 105", // emerald-600
+    // Common neutral grays (used in dark/light mode backgrounds)
+    "38, 50, 56", // Dark mode gray (blueGray-900 equivalent)
+    "245, 245, 245", // Light mode gray (gray-100 equivalent)
+    "250, 250, 250", // Very light gray
+    "229, 231, 235", // gray-200
+    "209, 213, 219", // gray-300
+    "156, 163, 175", // gray-400
+    "75, 85, 99", // gray-600
+    "55, 65, 81", // gray-700
+    "31, 41, 55", // gray-800
+    "17, 24, 39", // gray-900
+];
+// Keyframe animation names (legitimate - these are CSS animation references)
+const KEYFRAME_ANIMATION_NAMES = [
+    "shimmer",
+    "pulse",
+    "spin",
+    "bounce",
+    "fade",
+    "slide",
+    "glow",
+    "sparkle",
+    "dropzonePulse",
+    "turbo-glow",
+    "holographic",
+    "rainbow",
+    "wave",
+    "float",
+    "shake",
+    "wiggle",
+    "ping",
+    "skeleton",
+];
+// Small icon sizes that are legitimate (not spacing)
+const ICON_SIZES = [
+    "12px",
+    "14px",
+    "16px",
+    "18px",
+    "20px",
+    "24px",
+    "28px",
+    "32px",
+    "36px",
+    "40px",
+    "48px",
+];
+const ZINDEX_MAP = {
+    1: "var(--z-base)",
+    10: "var(--z-dropdown)",
+    100: "var(--z-sticky)",
+    1000: "var(--z-dropdown)",
+    1020: "var(--z-sticky)",
+    1030: "var(--z-fixed)",
+    1040: "var(--z-modal-backdrop)",
+    1050: "var(--z-modal)",
+    1060: "var(--z-popover)",
+    1070: "var(--z-tooltip)",
+    1080: "var(--z-toast)",
+    9999: "var(--z-max)",
+};
+const EXCLUDED_PATTERNS = [
+    "**/node_modules/**",
+    "**/.next/**",
+    "**/dist/**",
+    "**/build/**",
+    "**/coverage/**",
+    "**/test-results/**",
+    "**/packages/ui/**",
+    "**/*.test.{ts,tsx}",
+    "**/*.spec.{ts,tsx}",
+    "**/*.stories.{ts,tsx}",
+    "**/storybook/**",
+    "**/admin/analytics/**",
+];
+// TOKEN CHECK IMPLEMENTATIONS
+// CACHED FILE LISTS - Scan once, use everywhere
+let _cachedComponentsTsxJsxFiles = null;
+async function getComponentsTsxJsxFiles() {
+    if (!_cachedComponentsTsxJsxFiles) {
+        _cachedComponentsTsxJsxFiles = await file_cache_1.fileCache.getComponentsTsxJsxFiles();
+    }
+    return _cachedComponentsTsxJsxFiles;
+}
+// Get concurrency from shared config (respects PREFLIGHT_CONCURRENCY env var)
+const concurrencyConfig = (0, concurrency_config_1.getConcurrencyConfig)();
+class UITokensPreflightModule {
+    verbose;
+    parallel = false;
+    issues = [];
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+        this.parallel = options.parallel || concurrencyConfig.parallel;
+    }
+    isException(line) {
+        return ALLOWED_EXCEPTIONS.some((exception) => line.includes(exception));
+    }
+    async getFiles() {
+        return await file_cache_1.fileCache.getAppAndComponentsTSX();
+    }
+    /**
+     * Color Token Check (from color-token-enforcement.js + tokenization-check.js)
+     */
+    async checkColorTokens() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        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 hex colors in props (backgroundColor, color, borderColor)
+                PATTERNS.hexColorProp.lastIndex = 0;
+                let match;
+                while ((match = PATTERNS.hexColorProp.exec(line)) !== null) {
+                    const hexColor = `#${match[2]}`.toLowerCase();
+                    // Skip brand colors and basic black/white
+                    const isBrandColor = BRAND_COLORS[hexColor] !== undefined;
+                    if (!isBrandColor) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "color-prop",
+                            value: `#${match[2]}`,
+                            suggestion: "Use var(--color-{name}) or var(--text-{name}) token",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check general hex colors
+                const hexMatches = line.match(PATTERNS.hexColor);
+                if (hexMatches &&
+                    !this.isException(line) &&
+                    !line.includes("var(") &&
+                    !line.includes("color-mix(")) {
+                    // Skip card numbers in titles (e.g., "Billy Waddy #162")
+                    const isCardNumber = (line.includes("title") || line.includes("Title")) && /[A-Za-z]\s*#\d+/.test(line);
+                    const hexColor = hexMatches[0].toLowerCase();
+                    const isBrandColor = BRAND_COLORS[hexColor] !== undefined;
+                    // Skip gradients - they often use Tailwind palette colors which is fine
+                    const isGradient = line.includes("gradient") ||
+                        line.includes("Gradient") ||
+                        line.includes("linear-gradient") ||
+                        line.includes("radial-gradient");
+                    // Skip brand colors (external brand identity - should stay hardcoded)
+                    if (!isCardNumber && !isBrandColor && !isGradient) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hex-color",
+                            value: hexMatches[0],
+                            suggestion: "Use var(--color-{name}) token",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check RGB colors - skip dynamic values with template literals/variables
+                const rgbMatches = line.match(PATTERNS.rgbColor);
+                if (rgbMatches &&
+                    !this.isException(line) &&
+                    !line.includes("gradient") &&
+                    !line.includes("animation")) {
+                    // Skip dynamic rgba with variables (e.g., rgba(255, 219, 112, ${0.4 * intensity}))
+                    const hasDynamicValue = line.includes("${") || line.includes("` +") || line.includes("+ `");
+                    // Skip Tailwind palette colors used in rgba() - these are design system colors
+                    const isTailwindColor = TAILWIND_RGB_VALUES.some((rgb) => line.includes(rgb));
+                    // Skip rgba in shadow contexts - shadows often need custom opacity
+                    const isShadowContext = line.includes("shadow") || line.includes("Shadow");
+                    if (!hasDynamicValue && !isTailwindColor && !isShadowContext) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "rgb-color",
+                            value: rgbMatches[0],
+                            suggestion: "Use var(--color-{name}) token or color-mix()",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Color Tokens",
+            passed: issues.length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Spacing Token Check (from spacing-token-enforcement.js + tokenization-check.js)
+     *
+     * NOTE: Tailwind spacing classes (mb-4, gap-6, etc.) are NOT flagged because
+     * Tailwind IS a design system. Only flags:
+     * - MUI sx prop spacing (legacy pattern being migrated)
+     * - Hardcoded px values in style objects (should use tokens)
+     */
+    async checkSpacingTokens() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        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 MUI spacing props (mb, mt, p, etc.) - only in sx props
+                // Skip if it's a className (Tailwind) - those are fine
+                if (line.includes("sx={{") || line.includes("sx={")) {
+                    PATTERNS.muiSpacing.lastIndex = 0;
+                    let match;
+                    while ((match = PATTERNS.muiSpacing.exec(line)) !== null) {
+                        const [, prop, value] = match;
+                        const numValue = parseInt(value, 10);
+                        if (numValue >= 2) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "mui-spacing",
+                                value: `${prop}: ${numValue}`,
+                                suggestion: `Use ${prop}: "var(--spacing-${numValue})"`,
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check hardcoded px values in style objects only
+                // Skip className (Tailwind), sizes attribute, media queries, icon sizes
+                if (line.includes("style={{") || line.includes("style={")) {
+                    const pxMatches = line.match(PATTERNS.hardcodedPx);
+                    if (pxMatches && !this.isException(line)) {
+                        const pxValue = pxMatches[0].match(/\d+px/)?.[0];
+                        const numValue = pxMatches[0].match(/\d+/)?.[0];
+                        const isMediaQuery = line.includes("useMediaQuery") || line.includes("@media");
+                        const isImageSize = line.includes("sizes=");
+                        // Skip icon sizes (width/height for icons are legitimate)
+                        const isIconSize = pxValue &&
+                            ICON_SIZES.includes(pxValue) &&
+                            (line.includes("width") || line.includes("height")) &&
+                            (line.toLowerCase().includes("icon") ||
+                                line.includes("Icon") ||
+                                line.includes("svg") ||
+                                line.includes("SVG"));
+                        // Only flag larger values (>= 16px) in style objects, skip icon sizes
+                        if (numValue &&
+                            parseInt(numValue) >= 16 &&
+                            !isMediaQuery &&
+                            !isImageSize &&
+                            !isIconSize) {
+                            // Also skip if it's a width/height for small UI elements
+                            const isSmallUIElement = pxValue && ICON_SIZES.includes(pxValue);
+                            if (!isSmallUIElement) {
+                                issues.push({
+                                    file,
+                                    line: index + 1,
+                                    type: "hardcoded-px",
+                                    value: pxMatches[0],
+                                    suggestion: "Use var(--spacing-*) token",
+                                    snippet: line.trim().substring(0, 80),
+                                });
+                            }
+                        }
+                    }
+                }
+                // NOTE: Tailwind spacing classes are NOT flagged
+                // Tailwind IS a design system - mb-4, gap-6, p-8 are all valid
+            });
+        }
+        return {
+            name: "Spacing Tokens",
+            passed: issues.length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Shadow Token Check (from shadow-token-enforcement.js)
+     *
+     * NOTE: Shadows that already use CSS variables (var(--color-{name}), var(--glass-{name}), color-mix())
+     * are NOT flagged - they're using the design system correctly, just with custom shadow geometry.
+     */
+    async checkShadowTokens() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("boxShadow"))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                PATTERNS.hardcodedShadow.lastIndex = 0;
+                let match;
+                while ((match = PATTERNS.hardcodedShadow.exec(line)) !== null) {
+                    const value = match[1];
+                    if (value === "none" || value === "inherit")
+                        return;
+                    // Skip shadows that use CSS variables - they're using the design system
+                    const usesTokens = value.includes("var(--") || value.includes("color-mix(");
+                    if (usesTokens)
+                        return;
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "hardcoded-shadow",
+                        value: value.substring(0, 40) + (value.length > 40 ? "..." : ""),
+                        suggestion: "Use var(--shadow-sm|md|lg|xl)",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Shadow Tokens",
+            passed: issues.length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Z-Index Token Check (from zindex-token-enforcement.js + tokenization-check.js)
+     */
+    async checkZIndexTokens() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("zIndex") && !content.includes("z-index"))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check zIndex prop
+                PATTERNS.hardcodedZIndexProp.lastIndex = 0;
+                let match;
+                while ((match = PATTERNS.hardcodedZIndexProp.exec(line)) !== null) {
+                    const value = parseInt(match[1], 10);
+                    const suggestion = ZINDEX_MAP[value] || "var(--z-*)";
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "hardcoded-zindex",
+                        value: `zIndex: ${value}`,
+                        suggestion,
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check z-index CSS property
+                const zMatches = line.match(PATTERNS.hardcodedZIndex);
+                if (zMatches && !this.isException(line)) {
+                    const value = zMatches[0].match(/\d+/)?.[0];
+                    if (value && parseInt(value) > 10) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "css-zindex",
+                            value: zMatches[0],
+                            suggestion: "Use var(--z-*) token",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Z-Index Tokens",
+            passed: issues.length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Animation Token Check (from animation-token-enforcement.js)
+     *
+     * NOTE: Tailwind transition classes (transition-all, duration-200, ease-in-out)
+     * are NOT flagged because Tailwind IS a design system. Only flags:
+     * - Hardcoded transitions in style objects (should use tokens)
+     * - Hardcoded cubic-bezier in style objects
+     *
+     * Also skips keyframe animation names (shimmer, pulse, glow, etc.) - these are
+     * CSS @keyframes references, not hardcoded values.
+     */
+    async checkAnimationTokens() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getComponentsTsxJsxFiles();
+        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;
+                // Only check style objects, not className (Tailwind is fine)
+                const isStyleObject = line.includes("style={{") ||
+                    line.includes("style={") ||
+                    line.includes("transition:") ||
+                    line.includes("animation:");
+                if (!isStyleObject)
+                    return;
+                // Check hardcoded transitions in style objects
+                const transitionMatch = line.match(PATTERNS.hardcodedTransition);
+                if (transitionMatch &&
+                    !line.includes("var(--transition-") &&
+                    !line.includes("var(--ease-")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "hardcoded-transition",
+                        value: transitionMatch[0],
+                        suggestion: "Use var(--transition-base) or var(--transition-fast)",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check hardcoded animations in style objects
+                // Skip keyframe animation names - these are CSS @keyframes references
+                const animationMatch = line.match(PATTERNS.hardcodedAnimation);
+                if (animationMatch &&
+                    !line.includes("var(--transition-") &&
+                    !line.includes("var(--ease-")) {
+                    // Check if this is a keyframe animation name (legitimate)
+                    const isKeyframeRef = KEYFRAME_ANIMATION_NAMES.some((name) => line.toLowerCase().includes(name.toLowerCase()));
+                    if (!isKeyframeRef) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-animation",
+                            value: animationMatch[0],
+                            suggestion: "Use var(--transition-*) tokens",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check hardcoded easing (cubic-bezier) in style objects
+                const easingMatch = line.match(PATTERNS.hardcodedEasing);
+                if (easingMatch && !line.includes("var(--ease-")) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "hardcoded-easing",
+                        value: easingMatch[0],
+                        suggestion: "Use var(--ease-in-out) or var(--ease-out)",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // NOTE: Tailwind transition classes are NOT flagged
+                // transition-all, duration-200, ease-in-out are all valid Tailwind
+            });
+        }
+        return {
+            name: "Animation Tokens",
+            passed: issues.length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Design Token Check (from design-token-enforcement.js)
+     *
+     * NOTE: Skips:
+     * - "undefinedundefined" values (code bugs, not token issues - should be caught by TypeScript)
+     * - Icon sizes (40px, 48px for icons are legitimate)
+     */
+    async checkDesignTokens() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        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 hardcoded borderRadius
+                const borderRadiusMatch = line.match(PATTERNS.hardcodedBorderRadius);
+                if (borderRadiusMatch) {
+                    const value = borderRadiusMatch[1];
+                    if (parseInt(value) > 0) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-border-radius",
+                            value: `borderRadius: ${value}`,
+                            suggestion: "Use var(--radius-sm|md|lg|xl)",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check hardcoded fontSize with units
+                const fontSizeMatch = line.match(PATTERNS.hardcodedFontSizeWithUnit);
+                if (fontSizeMatch) {
+                    const sizeValue = `${fontSizeMatch[1]}${fontSizeMatch[2]}`;
+                    // Skip "undefinedundefined" - that's a code bug, not a token issue
+                    if (sizeValue.includes("undefined"))
+                        return;
+                    // Skip icon sizes (fontSize for icons is legitimate)
+                    const isIconSize = ICON_SIZES.includes(sizeValue) &&
+                        (line.toLowerCase().includes("icon") || line.includes("Icon"));
+                    if (!isIconSize) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-font-size",
+                            value: `fontSize: "${sizeValue}"`,
+                            suggestion: "Use Typography component or var(--font-size-*)",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check hardcoded fontSize without units (from tokenization-check)
+                const fontMatches = line.match(PATTERNS.hardcodedFontSize);
+                if (fontMatches && !this.isException(line)) {
+                    // Skip "undefinedundefined" - that's a code bug, not a token issue
+                    if (line.includes("undefined"))
+                        return;
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "hardcoded-font-size",
+                        value: fontMatches[0],
+                        suggestion: "Use var(--font-size-*) token",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Design Tokens (borderRadius, fontSize)",
+            passed: issues.length === 0,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Run all token checks
+     */
+    async runAll() {
+        const startTime = Date.now();
+        console.log(`\n${console_chars_1.emoji.palette} CONSOLIDATED UI TOKEN ENFORCEMENT`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        const checks = [];
+        console.log(`\n${console_chars_1.emoji.search} Running token checks...\n`);
+        checks.push(await this.checkColorTokens());
+        checks.push(await this.checkSpacingTokens());
+        checks.push(await this.checkShadowTokens());
+        checks.push(await this.checkZIndexTokens());
+        checks.push(await this.checkAnimationTokens());
+        checks.push(await this.checkDesignTokens());
+        const totalDuration = Date.now() - startTime;
+        const totalIssues = checks.reduce((sum, c) => sum + c.issues.length, 0);
+        const passed = totalIssues === 0;
+        const summary = {
+            total: checks.length,
+            passed: checks.filter((c) => c.passed).length,
+            failed: checks.filter((c) => !c.passed).length,
+            totalIssues,
+        };
+        this.printResults(checks, totalDuration, summary);
+        return {
+            module: "ui-tokens",
+            passed,
+            totalDuration,
+            checks,
+            summary,
+        };
+    }
+    printResults(checks, totalDuration, summary) {
+        console.log("\n" + (0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`${console_chars_1.emoji.chart} UI TOKEN ENFORCEMENT RESULTS`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        checks.forEach((check) => {
+            const icon = check.passed ? `${console_chars_1.emoji.success}` : `${console_chars_1.emoji.warning}`;
+            const time = `${(check.duration / 1000).toFixed(1)}s`;
+            const count = check.issues.length > 0 ? ` (${check.issues.length} issues)` : "";
+            console.log(`${icon} ${check.name.padEnd(40)} ${time.padStart(8)}${count}`);
+            if (this.verbose && check.issues.length > 0) {
+                check.issues.slice(0, 5).forEach((issue) => {
+                    console.log(`   ${console_chars_1.chars.bullet} ${issue.file}:${issue.line} - ${issue.value}`);
+                });
+                if (check.issues.length > 5) {
+                    console.log(`   ... and ${check.issues.length - 5} more`);
+                }
+            }
+        });
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`Total Checks: ${summary.total}`);
+        console.log(`${console_chars_1.emoji.success} Passed: ${summary.passed}`);
+        console.log(`${console_chars_1.emoji.warning}  With Issues: ${summary.failed}`);
+        console.log(`${console_chars_1.emoji.clipboard} Total Issues: ${summary.totalIssues}`);
+        console.log(`${console_chars_1.emoji.clock}  Total Time: ${(totalDuration / 1000).toFixed(1)}s`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        // Token reference
+        console.log(`\n${console_chars_1.emoji.clipboard} Token Reference:`);
+        console.log("  Colors: var(--color-{name}), var(--text-{name}), var(--bg-{name})");
+        console.log("  Spacing: var(--spacing-1) through var(--spacing-24)");
+        console.log("  Shadows: var(--shadow-sm|md|lg|xl)");
+        console.log("  Z-Index: var(--z-dropdown|sticky|modal|tooltip)");
+        console.log("  Animation: var(--transition-fast|base|slow), var(--ease-*)");
+        console.log("  Border Radius: var(--radius-sm|md|lg|xl)");
+        console.log("  Font Size: var(--font-size-xs|sm|base|lg|xl|2xl|...)");
+        if (summary.totalIssues === 0) {
+            console.log(`\n${console_chars_1.emoji.success} UI TOKEN ENFORCEMENT PASSED`);
+        }
+        else {
+            console.log(`\n${console_chars_1.emoji.warning}  UI TOKEN ENFORCEMENT: Issues found (non-blocking)`);
+            console.log("   New code should use design tokens");
+        }
+    }
+}
+exports.UITokensPreflightModule = UITokensPreflightModule;
+// CLI INTERFACE
+async function main() {
+    const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(path.basename(__filename, ".ts"));
+    const args = process.argv.slice(2);
+    const mode = args[0] || "all";
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const parallel = args.includes("--parallel") || args.includes("-p");
+    const module = new UITokensPreflightModule({ verbose, parallel });
+    try {
+        let result;
+        switch (mode) {
+            case "colors":
+            case "color":
+                console.log("Running color token checks only...");
+                const colorCheck = await module.checkColorTokens();
+                result = {
+                    module: "ui-tokens:colors",
+                    passed: colorCheck.passed,
+                    totalDuration: colorCheck.duration,
+                    checks: [colorCheck],
+                    summary: {
+                        total: 1,
+                        passed: colorCheck.passed ? 1 : 0,
+                        failed: colorCheck.passed ? 0 : 1,
+                        totalIssues: colorCheck.issues.length,
+                    },
+                };
+                break;
+            case "spacing":
+                console.log("Running spacing token checks only...");
+                const spacingCheck = await module.checkSpacingTokens();
+                result = {
+                    module: "ui-tokens:spacing",
+                    passed: spacingCheck.passed,
+                    totalDuration: spacingCheck.duration,
+                    checks: [spacingCheck],
+                    summary: {
+                        total: 1,
+                        passed: spacingCheck.passed ? 1 : 0,
+                        failed: spacingCheck.passed ? 0 : 1,
+                        totalIssues: spacingCheck.issues.length,
+                    },
+                };
+                break;
+            case "shadows":
+            case "shadow":
+                console.log("Running shadow token checks only...");
+                const shadowCheck = await module.checkShadowTokens();
+                result = {
+                    module: "ui-tokens:shadows",
+                    passed: shadowCheck.passed,
+                    totalDuration: shadowCheck.duration,
+                    checks: [shadowCheck],
+                    summary: {
+                        total: 1,
+                        passed: shadowCheck.passed ? 1 : 0,
+                        failed: shadowCheck.passed ? 0 : 1,
+                        totalIssues: shadowCheck.issues.length,
+                    },
+                };
+                break;
+            case "zindex":
+            case "z-index":
+                console.log("Running z-index token checks only...");
+                const zindexCheck = await module.checkZIndexTokens();
+                result = {
+                    module: "ui-tokens:zindex",
+                    passed: zindexCheck.passed,
+                    totalDuration: zindexCheck.duration,
+                    checks: [zindexCheck],
+                    summary: {
+                        total: 1,
+                        passed: zindexCheck.passed ? 1 : 0,
+                        failed: zindexCheck.passed ? 0 : 1,
+                        totalIssues: zindexCheck.issues.length,
+                    },
+                };
+                break;
+            case "animation":
+            case "animations":
+                console.log("Running animation token checks only...");
+                const animationCheck = await module.checkAnimationTokens();
+                result = {
+                    module: "ui-tokens:animation",
+                    passed: animationCheck.passed,
+                    totalDuration: animationCheck.duration,
+                    checks: [animationCheck],
+                    summary: {
+                        total: 1,
+                        passed: animationCheck.passed ? 1 : 0,
+                        failed: animationCheck.passed ? 0 : 1,
+                        totalIssues: animationCheck.issues.length,
+                    },
+                };
+                break;
+            case "design":
+                console.log("Running design token checks only...");
+                const designCheck = await module.checkDesignTokens();
+                result = {
+                    module: "ui-tokens:design",
+                    passed: designCheck.passed,
+                    totalDuration: designCheck.duration,
+                    checks: [designCheck],
+                    summary: {
+                        total: 1,
+                        passed: designCheck.passed ? 1 : 0,
+                        failed: designCheck.passed ? 0 : 1,
+                        totalIssues: designCheck.issues.length,
+                    },
+                };
+                break;
+            case "all":
+            default:
+                result = await module.runAll();
+                break;
+        }
+        // Non-blocking - always exit 0 for token checks (warnings only)
+        process.exit(0);
+    }
+    catch (error) {
+        console.error(`${console_chars_1.emoji.error} Fatal error running UI token preflight:`, error);
+        process.exit(1);
+    }
+}
+if (require.main === module) {
+    main();
+}
+//# sourceMappingURL=ui-tokens.js.map