@empline/preflight 1.1.11 → 1.1.13

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

@@ -0,0 +1,1532 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Consolidated UI Patterns Preflight
+ *
+ * Combines remaining UI pattern checks into one module:
+ * - category-chip-consistency (UnifiedHeader category validation)
+ * - chip-size-consistency (StatusChip/CategoryChip size enforcement)
+ * - glassmorphism-enforcement (glass design tokens)
+ * - flex-justify-consistency (flex layout patterns)
+ * - lucide-icon-validation (icon imports)
+ * - css-circular-reference-check (CSS circular refs)
+ * - z-index-enforcement (z-index tokens)
+ * - undefined-css-variables (missing CSS variable definitions)
+ *
+ * Usage:
+ *   pnpm preflight:ui-patterns              # All pattern checks
+ *   pnpm preflight:ui-patterns category     # Category chip consistency only
+ *   pnpm preflight:ui-patterns chip-size    # Chip size consistency only
+ *   pnpm preflight:ui-patterns glass        # Glassmorphism only
+ *   pnpm preflight:ui-patterns flex         # Flex justify only
+ *   pnpm preflight:ui-patterns icons        # Lucide icons only
+ *   pnpm preflight:ui-patterns polish       # Global UI polish warnings (padding/overlay spacing)
+ *   pnpm preflight:ui-patterns cta          # CTA buttons (detect Link/a styled like buttons)
+ *   pnpm preflight:ui-patterns css          # CSS circular refs only
+ *   pnpm preflight:ui-patterns zindex       # Z-index only
+ *   pnpm preflight:ui-patterns undefined    # Undefined CSS variables only
+ */
+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.UIPatternsPreflightModule = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const console_chars_1 = require("../../utils/console-chars");
+const universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+const file_cache_1 = require("../../shared/file-cache");
+const glob_patterns_1 = require("../../shared/glob-patterns");
+const concurrency_config_1 = require("../../shared/concurrency-config");
+const EXCLUDED = [...glob_patterns_1.STANDARD_EXCLUDES];
+// Cache for getAllTsxJsxFiles
+let _cachedAllTsxJsxFiles = null;
+async function getAllTsxJsxFiles() {
+    if (!_cachedAllTsxJsxFiles) {
+        _cachedAllTsxJsxFiles = await file_cache_1.fileCache.getAllTsxJsx();
+    }
+    return _cachedAllTsxJsxFiles;
+}
+// Cache for getAllTsTsxFiles
+let _cachedAllTsTsxFiles = null;
+async function getAllTsTsxFiles() {
+    if (!_cachedAllTsTsxFiles) {
+        _cachedAllTsTsxFiles = await file_cache_1.fileCache.getAllTsTsx();
+    }
+    return _cachedAllTsTsxFiles;
+}
+// Cache for getCSSFiles
+let _cachedCSSFiles = null;
+async function getCSSFiles() {
+    if (!_cachedCSSFiles) {
+        _cachedCSSFiles = await file_cache_1.fileCache.getFiles("**/*.css", { ignore: EXCLUDED });
+    }
+    return _cachedCSSFiles;
+}
+// Cache for defined CSS variables from tokens.css
+let definedCssVariables = null;
+// Standardized category labels for UnifiedHeader (must match lib/category-chip-constants.ts)
+const VALID_CATEGORIES = new Set([
+    // Seller Categories
+    "Seller",
+    "Seller Store",
+    "Seller Tools",
+    "Listings",
+    "Sales",
+    "Orders",
+    "Order Details",
+    "Performance",
+    "Store",
+    "Store Management",
+    "Store Settings",
+    "Settings",
+    "Configuration",
+    "Integration",
+    "Developer Tools",
+    "Team",
+    // Admin Categories
+    "Admin",
+    "Administration",
+    "Integrations",
+    "Content Moderation",
+    "Marketing",
+    // Account/Personal Categories
+    "Account",
+    "Personal",
+    "Business",
+    // Marketplace Categories
+    "Marketplace",
+    "Collectibles",
+    "Sports Cards",
+    "Non-Sports Cards",
+    "Non-Sport Cards",
+    "Trading Card Games",
+    "Video Games",
+    "Tickets",
+    "Autographs",
+]);
+// Invalid lucide icons mapping
+const INVALID_ICONS = {
+    Add: "Plus",
+    Autorenew: "RefreshCw",
+    LocalOffer: "Tag",
+    LocalShipping: "Truck",
+    LocationOn: "MapPin",
+    LockReset: "KeyRound",
+    MonetizationOn: "DollarSign",
+    MoreVert: "MoreVertical",
+    NavigateBefore: "ChevronLeft",
+    NavigateNext: "ChevronRight",
+    Notifications: "Bell",
+    Pending: "Clock",
+    Photo: "Image",
+    Remove: "Minus",
+    Restore: "RotateCcw",
+    StarBorder: "Star",
+    Storefront: "Store",
+};
+// CACHED FILE LISTS - Scan once, use everywhere
+let _cachedAppComponentsTsxFiles = null;
+async function getAppComponentsTsxFiles() {
+    if (!_cachedAppComponentsTsxFiles) {
+        _cachedAppComponentsTsxFiles = await file_cache_1.fileCache.getAppAndComponentsTSX();
+    }
+    return _cachedAppComponentsTsxFiles;
+}
+// Get concurrency from shared config (respects PREFLIGHT_CONCURRENCY env var)
+const concurrencyConfig = (0, concurrency_config_1.getConcurrencyConfig)();
+class UIPatternsPreflightModule {
+    verbose;
+    parallel = false;
+    strictUniformity;
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+        this.parallel = options.parallel ?? concurrencyConfig.parallel;
+        this.strictUniformity =
+            typeof options.strictUniformity === "boolean"
+                ? options.strictUniformity
+                : process.env.PREFLIGHT_STRICT_UNIFORMITY === "1";
+    }
+    /**
+     * Category Chip Consistency - ensures UnifiedHeader category props use standardized labels
+     */
+    async checkCategoryChips() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAppComponentsTsxFiles();
+        // Files to ignore (false positives)
+        const ignoreFiles = ["ProductTypeBadge.tsx", "cleanup-remaining-model-issues.ts"];
+        const categoryPattern = /category=["']([^"']+)["']/g;
+        for (const file of files) {
+            const normalizedFile = file.replace(/\\/g, "/");
+            if (ignoreFiles.some((ignored) => normalizedFile.includes(ignored)))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            // Check if file uses UnifiedHeader with category prop
+            if (!content.includes("UnifiedHeader") && !content.includes("category="))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                let match;
+                categoryPattern.lastIndex = 0;
+                while ((match = categoryPattern.exec(line)) !== null) {
+                    const category = match[1];
+                    if (!VALID_CATEGORIES.has(category)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "non-standard-category",
+                            severity: "error",
+                            message: `Non-standard category: "${category}"`,
+                            suggestion: `Use one of: ${Array.from(VALID_CATEGORIES).slice(0, 5).join(", ")}...`,
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Category Chip Consistency",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Chip Size Consistency - ensures StatusChip/CategoryChip use consistent sizing
+     *
+     * Standard sizes:
+     * - sm (20px): Default small chip - use for most status indicators, tags, metadata
+     * - md (22px): Medium chip - use sparingly for emphasis
+     * - lg (24px): Large chip - rarely needed, requires justification
+     * - xs (18px): Extra small - only for very compact contexts
+     *
+     * Product pages use sm as the standard. All other pages should match.
+     *
+     * Also detects:
+     * - Inline height/padding overrides that bypass the size system
+     * - Generic Chip component usage (should use StatusChip/CategoryChip)
+     * - Inconsistent chip sizing within the same component
+     */
+    async checkChipSizeConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAppComponentsTsxFiles();
+        // Skip the component definitions themselves
+        const skipFiles = [
+            "StatusChip.tsx",
+            "Chip.tsx",
+            "FilterChip.tsx",
+            "CategoryChip.tsx",
+            "StatusIconChip.tsx",
+        ];
+        for (const file of files) {
+            const normalizedFile = file.replace(/\\/g, "/");
+            if (skipFiles.some((skip) => normalizedFile.endsWith(skip)))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Track chip sizes used in this file for consistency check
+            const chipSizesInFile = [];
+            // Check for StatusChip, CategoryChip, FilterChip with size prop
+            const chipPatterns = [
+                { regex: /<StatusChip[^>]*\bsize=["'](\w+)["'][^>]*>/g, name: "StatusChip" },
+                { regex: /<CategoryChip[^>]*\bsize=["'](\w+)["'][^>]*>/g, name: "CategoryChip" },
+                { regex: /<FilterChip[^>]*\bsize=["'](\w+)["'][^>]*>/g, name: "FilterChip" },
+            ];
+            for (const { regex: pattern, name: chipName } of chipPatterns) {
+                let match;
+                while ((match = pattern.exec(content)) !== null) {
+                    const lineNum = content.substring(0, match.index).split("\n").length;
+                    const size = match[1];
+                    const fullMatch = match[0];
+                    // Check for preflight-ignore comment
+                    const prevLine = lineNum > 1 ? lines[lineNum - 2] : "";
+                    if (prevLine.includes("preflight-ignore") || prevLine.includes("chip-size-ok")) {
+                        continue;
+                    }
+                    // Track for consistency check
+                    chipSizesInFile.push({ size, line: lineNum });
+                    // sm and xs are always OK (sm is standard, xs is for compact)
+                    if (size === "sm" || size === "small" || size === "xs") {
+                        continue;
+                    }
+                    // md is a warning - consider using sm
+                    if (size === "md" || size === "medium") {
+                        issues.push({
+                            file,
+                            line: lineNum,
+                            type: "chip-size-medium",
+                            severity: "warning",
+                            message: `${chipName} uses size="${size}" - consider size="sm" for consistency`,
+                            suggestion: `Use size="sm" (standard) or add /* chip-size-ok */ comment if md is intentional`,
+                            snippet: fullMatch.substring(0, 80),
+                        });
+                        continue;
+                    }
+                    // lg is an error - rarely needed
+                    if (size === "lg" || size === "large") {
+                        issues.push({
+                            file,
+                            line: lineNum,
+                            type: "chip-size-large",
+                            severity: "error",
+                            message: `${chipName} uses size="${size}" - large chips are rarely needed`,
+                            suggestion: `Use size="sm" (standard) or size="md" (emphasis). Add /* chip-size-ok */ if lg is required.`,
+                            snippet: fullMatch.substring(0, 80),
+                        });
+                    }
+                }
+            }
+            // Check for inline height/padding overrides on chips (only when no size prop is set)
+            // This catches chips that bypass the size system entirely
+            const chipWithInlineStylePattern = /<(?:Status|Category|Filter)Chip\b(?![^>]*\bsize=)[^>]*(?:style=\{[^}]*(?:height|minHeight)[^}]*\})[^>]*>/g;
+            let heightMatch;
+            while ((heightMatch = chipWithInlineStylePattern.exec(content)) !== null) {
+                const lineNum = content.substring(0, heightMatch.index).split("\n").length;
+                const prevLine = lineNum > 1 ? lines[lineNum - 2] : "";
+                if (prevLine.includes("preflight-ignore") || prevLine.includes("chip-size-ok")) {
+                    continue;
+                }
+                issues.push({
+                    file,
+                    line: lineNum,
+                    type: "chip-height-override",
+                    severity: "warning",
+                    message: "Chip uses inline height style instead of size prop",
+                    suggestion: 'Use size="sm" (20px), size="md" (22px), or size="lg" (24px) instead of inline height',
+                    snippet: heightMatch[0].substring(0, 100),
+                });
+            }
+            // Check for chips with both size prop AND conflicting inline height (redundant/conflicting)
+            const redundantHeightPattern = /<(?:Status|Category|Filter)Chip\b[^>]*\bsize=["']\w+["'][^>]*style=\{[^}]*(?:height|minHeight)[^}]*\}[^>]*>/g;
+            let redundantMatch;
+            while ((redundantMatch = redundantHeightPattern.exec(content)) !== null) {
+                const lineNum = content.substring(0, redundantMatch.index).split("\n").length;
+                const prevLine = lineNum > 1 ? lines[lineNum - 2] : "";
+                if (prevLine.includes("preflight-ignore") || prevLine.includes("chip-size-ok")) {
+                    continue;
+                }
+                issues.push({
+                    file,
+                    line: lineNum,
+                    type: "chip-redundant-height",
+                    severity: "info",
+                    message: "Chip has both size prop and inline height - remove redundant inline style",
+                    suggestion: "The size prop already sets the height. Remove the inline height style.",
+                    snippet: redundantMatch[0].substring(0, 100),
+                });
+            }
+            // Check for generic <Chip> usage (should use StatusChip/CategoryChip)
+            const genericChipPattern = /<Chip\s+[^>]*(?:label|color)=[^>]*>/g;
+            let genericMatch;
+            while ((genericMatch = genericChipPattern.exec(content)) !== null) {
+                const lineNum = content.substring(0, genericMatch.index).split("\n").length;
+                const prevLine = lineNum > 1 ? lines[lineNum - 2] : "";
+                if (prevLine.includes("preflight-ignore") || prevLine.includes("chip-ok")) {
+                    continue;
+                }
+                // Skip if it's in a comment
+                const line = lines[lineNum - 1];
+                if (line.trim().startsWith("//") || line.trim().startsWith("*")) {
+                    continue;
+                }
+                issues.push({
+                    file,
+                    line: lineNum,
+                    type: "generic-chip-usage",
+                    severity: "info",
+                    message: "Generic <Chip> component - consider using StatusChip or CategoryChip",
+                    suggestion: "StatusChip provides consistent sizing and predefined status colors. CategoryChip is for tags/labels.",
+                    snippet: genericMatch[0].substring(0, 80),
+                });
+            }
+            // Check for mixed chip sizes within the same file (consistency warning)
+            if (chipSizesInFile.length > 1) {
+                const uniqueSizes = new Set(chipSizesInFile.map((c) => {
+                    // Normalize size names
+                    if (c.size === "small")
+                        return "sm";
+                    if (c.size === "medium")
+                        return "md";
+                    if (c.size === "large")
+                        return "lg";
+                    return c.size;
+                }));
+                // If file has both sm and md (or other mixed sizes), warn about inconsistency
+                if (uniqueSizes.size > 1 && !uniqueSizes.has("xs")) {
+                    const sizesUsed = Array.from(uniqueSizes).join(", ");
+                    issues.push({
+                        file,
+                        line: chipSizesInFile[0].line,
+                        type: "chip-size-inconsistent",
+                        severity: "info",
+                        message: `File uses multiple chip sizes (${sizesUsed}) - consider standardizing`,
+                        suggestion: 'Use size="sm" consistently unless there\'s a specific reason for variation',
+                    });
+                }
+            }
+        }
+        const errorCount = issues.filter((i) => i.severity === "error").length;
+        const warningCount = issues.filter((i) => i.severity === "warning").length;
+        return {
+            name: `Chip Size Consistency (${errorCount} errors, ${warningCount} warnings)`,
+            passed: errorCount === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Glassmorphism Enforcement - ensures glass tokens are used
+     */
+    async checkGlassmorphism() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAppComponentsTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Hardcoded backdrop-blur classes
+                const blurMatch = line.match(/backdrop-blur-(sm|md|lg|xl|2xl)/);
+                if (blurMatch) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "hardcoded-blur",
+                        severity: "error",
+                        message: `Hardcoded ${blurMatch[0]}`,
+                        suggestion: `Use var(--glass-blur-${blurMatch[1]})`,
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Hardcoded rgba backgrounds on floating elements
+                if (/(?:backgroundColor|background):\s*["']rgba\((?:255,\s*255,\s*255|0,\s*0,\s*0),\s*0\.\d+\)/.test(line)) {
+                    const context = lines
+                        .slice(Math.max(0, index - 5), Math.min(lines.length, index + 5))
+                        .join("\n");
+                    if (/sticky|fixed|modal|dialog|drawer|popover/i.test(context)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-glass-bg",
+                            severity: "error",
+                            message: "Hardcoded rgba() on floating element",
+                            suggestion: "Use var(--glass-bg-*) tokens",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Hardcoded transparency classes
+                const transparencyMatch = line.match(/bg-(?:white|black)\/\d+/);
+                if (transparencyMatch) {
+                    const context = lines
+                        .slice(Math.max(0, index - 5), Math.min(lines.length, index + 5))
+                        .join("\n");
+                    if (/sticky|fixed|modal|dialog|drawer|popover/i.test(context)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-transparency",
+                            severity: "warning",
+                            message: `Hardcoded ${transparencyMatch[0]} on floating element`,
+                            suggestion: "Use var(--glass-bg-*) tokens",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Glassmorphism Enforcement",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Flex Justify Consistency - detects problematic flex patterns
+     */
+    async checkFlexJustify() {
+        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) => {
+                // Check for flex containers with wrap and center
+                if (/display:\s*["']flex["']/.test(line) &&
+                    /flexWrap:\s*["']wrap["']/.test(line) &&
+                    /justifyContent:\s*["']center["']/.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "wrapped-flex-center",
+                        severity: "warning",
+                        message: 'flexWrap with justifyContent: "center" may cause centering issues',
+                        suggestion: 'Use "flex-start", "flex-end", or "space-between"',
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        return {
+            name: "Flex Justify Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Lucide Icon Validation - ensures valid icon imports
+     */
+    async checkLucideIcons() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAllTsTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const importMatch = content.match(/import\s+{([^}]+)}\s+from\s+['"]lucide-react['"]/);
+            if (!importMatch)
+                continue;
+            const imports = importMatch[1]
+                .split(",")
+                .map((i) => i.trim())
+                .filter(Boolean);
+            const lineNumber = content.substring(0, importMatch.index).split("\n").length;
+            for (const icon of imports) {
+                const cleanIcon = icon.split(" as ")[0].trim();
+                if (INVALID_ICONS[cleanIcon]) {
+                    issues.push({
+                        file,
+                        line: lineNumber,
+                        type: "invalid-icon",
+                        severity: "error",
+                        message: `Invalid icon: ${cleanIcon}`,
+                        suggestion: `Use ${INVALID_ICONS[cleanIcon]} instead`,
+                        snippet: `import { ${cleanIcon} } from 'lucide-react'`,
+                    });
+                }
+            }
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Lucide Icon Validation",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * CSS Circular Reference Check
+     */
+    async checkCssCircular() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getCSSFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Track variable definitions
+            const varDefs = new Map();
+            lines.forEach((line, index) => {
+                const match = line.match(/--([a-zA-Z0-9-]+):\s*(.+);/);
+                if (match) {
+                    varDefs.set(match[1], { line: index + 1, value: match[2] });
+                }
+            });
+            // Check for circular references
+            for (const [varName, { line, value }] of varDefs) {
+                const refs = value.match(/var\(--([a-zA-Z0-9-]+)\)/g) || [];
+                for (const ref of refs) {
+                    const refName = ref.match(/--([a-zA-Z0-9-]+)/)?.[1];
+                    if (refName && varDefs.has(refName)) {
+                        const refValue = varDefs.get(refName).value;
+                        if (refValue.includes(`var(--${varName})`)) {
+                            issues.push({
+                                file,
+                                line,
+                                type: "circular-ref",
+                                severity: "error",
+                                message: `Circular reference: --${varName} ↔ --${refName}`,
+                                suggestion: "Break the circular dependency",
+                                snippet: `--${varName}: ${value}`,
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "CSS Circular References",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Autocomplete Floating Labels - enforce label-in-border UX site-wide.
+     *
+     * Our shared `Autocomplete` defaults to floating labels. Disallow opting out
+     * with `floatingLabel={false}` to keep forms consistent.
+     */
+    async checkAutocompleteFloatingLabels() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAppComponentsTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("<Autocomplete"))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (!line.includes("floatingLabel"))
+                    return;
+                if (!/floatingLabel\s*=\s*\{?\s*false\s*\}?/.test(line))
+                    return;
+                issues.push({
+                    file,
+                    line: index + 1,
+                    type: "autocomplete-floatinglabel-disabled",
+                    severity: "error",
+                    message: "Autocomplete should use floating labels (do not disable floatingLabel)",
+                    suggestion: "Remove `floatingLabel={false}` and rely on the shared Autocomplete default.",
+                    snippet: line.trim().substring(0, 140),
+                });
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Autocomplete Floating Labels",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Load defined CSS variables from all CSS files
+     */
+    async loadDefinedCssVariables() {
+        if (definedCssVariables)
+            return definedCssVariables;
+        const variables = new Set();
+        // Scan all CSS files in the project for variable definitions
+        const cssFiles = await file_cache_1.fileCache.getFiles("{app,styles,packages}/**/*.css", {
+            ignore: ["**/node_modules/**", "**/.next/**"],
+        });
+        for (const cssFile of cssFiles) {
+            try {
+                const content = fs.readFileSync(cssFile, "utf8");
+                // Match CSS variable definitions: --variable-name:
+                const matches = content.matchAll(/--([a-zA-Z0-9-]+)\s*:/g);
+                for (const match of matches) {
+                    variables.add(`--${match[1]}`);
+                }
+            }
+            catch {
+                // File doesn't exist or can't be read, skip
+            }
+        }
+        definedCssVariables = variables;
+        return variables;
+    }
+    /**
+     * Undefined CSS Variables Check - detects var(--*) references to non-existent variables
+     */
+    async checkUndefinedCssVariables() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAppComponentsTsxFiles();
+        const definedVars = await this.loadDefinedCssVariables();
+        // Common CSS variables that are defined elsewhere (browser defaults, Tailwind, etc.)
+        const knownExternalVars = new Set([
+            "--tw-", // Tailwind internal vars
+            "--radix-", // Radix UI vars
+            "--font-", // Next.js font vars
+        ]);
+        const isKnownExternal = (varName) => {
+            for (const prefix of knownExternalVars) {
+                if (varName.startsWith(prefix))
+                    return true;
+            }
+            return false;
+        };
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Track locally defined CSS variables (inline definitions like ['--var-name' as any]: 'value' or ["--var-name" as any]: 'value')
+            const locallyDefinedVars = new Set();
+            Array.from(content.matchAll(/\[["'](--[a-zA-Z0-9-]+)["']\s*as\s*any\]/g)).forEach((m) => {
+                const varName = m[1];
+                if (varName)
+                    locallyDefinedVars.add(varName);
+            });
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//") || line.trim().startsWith("/*"))
+                    return;
+                // Find all var(--*) references - capture full match to check for fallbacks
+                const varRefs = line.matchAll(/var\((--[a-zA-Z0-9-]+)(,\s*[^)]+)?\)/g);
+                for (const match of varRefs) {
+                    const varName = match[1];
+                    const hasFallback = !!match[2]; // Has a fallback value like ", #fff"
+                    // Skip known external variables
+                    if (isKnownExternal(varName))
+                        continue;
+                    // Skip locally defined variables (inline CSS custom properties)
+                    if (locallyDefinedVars.has(varName))
+                        continue;
+                    // Check if variable is defined
+                    if (!definedVars.has(varName)) {
+                        // Variables with fallbacks are warnings (they won't break), without are errors
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "undefined-css-var",
+                            severity: hasFallback ? "warning" : "error",
+                            message: `Undefined CSS variable: ${varName}${hasFallback ? " (has fallback)" : ""}`,
+                            suggestion: hasFallback
+                                ? `Consider adding ${varName} to app/tokens.css for consistency`
+                                : `Add ${varName} to app/tokens.css or use an existing token`,
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        const errorCount = issues.filter((i) => i.severity === "error").length;
+        const warningCount = issues.filter((i) => i.severity === "warning").length;
+        return {
+            name: `Undefined CSS Variables (${errorCount} errors, ${warningCount} warnings)`,
+            passed: errorCount === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Header Icon Button Uniformity - ensures top-nav (cart/notifications/wishlist) icon triggers
+     * use the standard glass hover token and have an active/open background state.
+     *
+     * Why: A wrong token (e.g. --glass-bg-light) can silently render as transparent, creating
+     * a "no background" regression that is easy to miss visually.
+     *
+     * Files that delegate to HeaderIconButton (which contains the required tokens) are considered
+     * compliant if they pass isActive={isOpen} to the shared component.
+     */
+    async checkHeaderIconButtonUniformity() {
+        const startTime = Date.now();
+        const issues = [];
+        const targets = [
+            {
+                file: "components/cart/CartDrawer.tsx",
+                required: {
+                    hoverToken: "hover:bg-[var(--glass-hover-light)]",
+                    activeToken: "bg-[var(--glass-hover-light)]",
+                    disallowedVar: "--glass-bg-light",
+                    requiresIsOpenActive: true,
+                },
+            },
+            {
+                file: "components/cart/WishlistDrawer.tsx",
+                required: {
+                    hoverToken: "hover:bg-[var(--glass-hover-light)]",
+                    activeToken: "bg-[var(--glass-hover-light)]",
+                    disallowedVar: "--glass-bg-light",
+                    requiresIsOpenActive: true,
+                },
+            },
+            {
+                file: "components/notifications/NotificationBellButton.tsx",
+                required: {
+                    hoverToken: "hover:bg-[var(--glass-hover-light)]",
+                    activeToken: "bg-[var(--glass-hover-light)]",
+                    disallowedVar: "--glass-bg-light",
+                    requiresIsOpenActive: false,
+                    // NotificationBellButton delegates to HeaderIconButton, so it doesn't need the tokens directly
+                    allowsDelegation: true,
+                },
+            },
+            {
+                file: "components/navigation/NotificationsBell.tsx",
+                required: {
+                    disallowedVar: "--glass-bg-light",
+                    requiresIsOpenActive: false,
+                },
+            },
+        ];
+        const workspaceRoot = process.cwd();
+        const pushIssue = (file, message, suggestion) => {
+            issues.push({
+                file,
+                line: 1,
+                type: "header-icon-uniformity",
+                severity: "error",
+                message,
+                suggestion,
+            });
+        };
+        // Check if HeaderIconButton has the required tokens (it's the source of truth)
+        const headerIconButtonPath = path.join(workspaceRoot, "components/navigation/HeaderIconButton.tsx");
+        let headerIconButtonHasTokens = false;
+        if (fs.existsSync(headerIconButtonPath)) {
+            const headerIconContent = fs.readFileSync(headerIconButtonPath, "utf8");
+            headerIconButtonHasTokens =
+                headerIconContent.includes("hover:bg-[var(--glass-hover-light)]") &&
+                    headerIconContent.includes("bg-[var(--glass-hover-light)]") &&
+                    headerIconContent.includes("isActive");
+        }
+        for (const t of targets) {
+            const absolute = path.join(workspaceRoot, t.file);
+            if (!fs.existsSync(absolute)) {
+                pushIssue(t.file, "Expected header icon file is missing", "Restore or update the preflight target list");
+                continue;
+            }
+            const content = fs.readFileSync(absolute, "utf8");
+            // Check if file delegates to HeaderIconButton with proper isActive handling
+            const delegatesToHeaderIconButton = content.includes("HeaderIconButton") &&
+                (content.includes("isActive={isOpen}") || content.includes("isActive={"));
+            if (t.required.disallowedVar && content.includes(t.required.disallowedVar)) {
+                pushIssue(t.file, `Disallowed/legacy CSS variable found: ${t.required.disallowedVar}`, "Use --glass-hover-light for header icon button hover/active backgrounds");
+            }
+            // If delegating to HeaderIconButton with isActive, skip token checks (HeaderIconButton has them)
+            // Also skip if allowsDelegation is set and file uses HeaderIconButton
+            if ((delegatesToHeaderIconButton && headerIconButtonHasTokens) ||
+                (t.required.allowsDelegation && content.includes("HeaderIconButton"))) {
+                continue;
+            }
+            if (t.required.hoverToken && !content.includes(t.required.hoverToken)) {
+                pushIssue(t.file, `Missing required header icon hover background token: ${t.required.hoverToken}`, "Ensure IconButton className includes the standard glass hover token");
+            }
+            if (t.required.activeToken && !content.includes(t.required.activeToken)) {
+                pushIssue(t.file, `Missing required header icon active background token: ${t.required.activeToken}`, "When a drawer/popup is open, keep the icon background visible for context");
+            }
+            if (t.required.requiresIsOpenActive) {
+                const hasIsOpenActive = /\bisOpen\b/.test(content) &&
+                    (/\bisOpen\s*\?[^\n]*bg-\[var\(--glass-hover-light\)\]/.test(content) ||
+                        /\bisOpen\s*&&[^\n]*bg-\[var\(--glass-hover-light\)\]/.test(content));
+                if (!hasIsOpenActive) {
+                    pushIssue(t.file, "Header icon button must reflect open state (isOpen) with a persistent background", "Add an isOpen conditional class that applies bg-[var(--glass-hover-light)]");
+                }
+            }
+        }
+        // Notification button should accept isActive, and the wrapper should pass it when open.
+        const bellButtonFile = path.join(workspaceRoot, "components/notifications/NotificationBellButton.tsx");
+        if (fs.existsSync(bellButtonFile)) {
+            const bellButton = fs.readFileSync(bellButtonFile, "utf8");
+            // Check for isActive prop - can be defined as isActive?: boolean or isActive: boolean or in interface
+            const hasIsActiveProp = /isActive\s*\??\s*:\s*boolean/.test(bellButton) ||
+                /interface[^{]*\{[^}]*isActive/.test(bellButton);
+            if (!hasIsActiveProp) {
+                pushIssue("components/notifications/NotificationBellButton.tsx", "NotificationBellButton must support an isActive prop for header uniformity", "Add `isActive?: boolean` and apply bg-[var(--glass-hover-light)] when active");
+            }
+        }
+        const bellWrapperFile = path.join(workspaceRoot, "components/navigation/NotificationsBell.tsx");
+        if (fs.existsSync(bellWrapperFile)) {
+            const bellWrapper = fs.readFileSync(bellWrapperFile, "utf8");
+            if (!/NotificationBellButton[\s\S]*isActive=\{isOpen\}/.test(bellWrapper)) {
+                pushIssue("components/navigation/NotificationsBell.tsx", "NotificationsBell must pass isOpen into NotificationBellButton (isActive)", "Pass `isActive={isOpen}` to keep the header icon background visible while open");
+            }
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: `Header Icon Button Uniformity (${issues.length} issues)`,
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Z-Index Enforcement - ensures z-index tokens are used
+     *
+     * Exceptions:
+     * - None for Tailwind z-* classes: steering forbids Tailwind z-index utilities entirely.
+     * - var(--z-*) (already using tokens)
+     */
+    async checkZIndex() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getAppComponentsTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (line.trim().startsWith("//"))
+                    return;
+                // Skip lines that already use CSS variables
+                if (line.includes("var(--z-"))
+                    return;
+                // Tailwind z-index classes are forbidden (steering rule 11b).
+                // Catch prefixed variants: md:z-50, hover:z-10, data-[state=open]:z-50, etc.
+                // Also catch arbitrary values: z-[999], -z-[1].
+                const tailwindZIndexPatterns = [
+                    /\b(?:[a-z0-9_\-\[\]=]+:)*-?z-(\d+)\b/g, // z-10, md:z-50, hover:z-10
+                    /\b(?:[a-z0-9_\-\[\]=]+:)*-?z-\[[^\]]+\]/g, // z-[999], sm:z-[var(--z-modal)]
+                ];
+                for (const pattern of tailwindZIndexPatterns) {
+                    pattern.lastIndex = 0;
+                    let match;
+                    while ((match = pattern.exec(line)) !== null) {
+                        const value = match[0];
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "tailwind-zindex",
+                            severity: this.strictUniformity ? "error" : "warning",
+                            message: `Tailwind z-index utility is forbidden: ${value}`,
+                            suggestion: 'Use style={{ zIndex: "var(--z-*)" }} with the appropriate z-index token instead',
+                            snippet: line.trim().substring(0, 120),
+                        });
+                    }
+                }
+                // Hardcoded z-index > 10
+                const zMatch = line.match(/zIndex:\s*(\d+)/);
+                if (zMatch && parseInt(zMatch[1]) > 10) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "hardcoded-zindex",
+                        severity: "warning",
+                        message: `Hardcoded zIndex: ${zMatch[1]}`,
+                        suggestion: "Use var(--z-content-overlay|dropdown|modal|tooltip|toast)",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Z-Index Enforcement",
+            passed: !hasErrors,
+            blocking: this.strictUniformity,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Toast Polish - ensures unified toast uses spacing tokens (prevents “text touching border” regressions).
+     */
+    async checkToastPolish() {
+        const startTime = Date.now();
+        const issues = [];
+        const toastStatusPath = "components/shared/status/variants/ToastStatus.tsx";
+        if (!fs.existsSync(toastStatusPath)) {
+            return {
+                name: "Toast Polish",
+                passed: true,
+                blocking: true,
+                issues,
+                duration: Date.now() - startTime,
+            };
+        }
+        const content = fs.readFileSync(toastStatusPath, "utf8");
+        if (!content.includes("var(--toast-padding)")) {
+            issues.push({
+                file: toastStatusPath,
+                line: 1,
+                type: "toast-missing-padding-token",
+                severity: "error",
+                message: "Unified toast must use var(--toast-padding) for consistent inner spacing",
+                suggestion: 'Add style={{ padding: "var(--toast-padding)" }} (or equivalent) in ToastStatus',
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Toast Polish",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * CardContent Padding - ensures CardContent supports responsive padding utilities.
+     *
+     * We intentionally keep the default padding as a Tailwind class (e.g. "p-4")
+     * instead of inline styles, so consumers can override via className (md:p-8, etc).
+     */
+    async checkCardContentPadding() {
+        const startTime = Date.now();
+        const issues = [];
+        const cardPath = "packages/ui/src/components/layout/Card.tsx";
+        if (!fs.existsSync(cardPath)) {
+            return {
+                name: "CardContent Padding",
+                passed: true,
+                blocking: true,
+                issues,
+                duration: Date.now() - startTime,
+            };
+        }
+        const content = fs.readFileSync(cardPath, "utf8");
+        const hasClassBasedPadding = content.includes('className={cn("p-4"');
+        if (!hasClassBasedPadding) {
+            issues.push({
+                file: cardPath,
+                line: 1,
+                type: "cardcontent-padding-not-class-based",
+                severity: "error",
+                message: 'CardContent must include default "p-4" via className (not inline padding) to allow responsive overrides',
+                suggestion: 'Set className={cn("p-4", className)} and avoid forcing padding via inline style',
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "CardContent Padding",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Product Page Polish - detects common "no gap around card" and overlay spacing regressions.
+     *
+     * Scope intentionally limited to product pages/components to reduce false positives.
+     */
+    async checkProductPagePolish() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await file_cache_1.fileCache.getFiles("{app/product,components/product,components/gallery}/**/*.{tsx,jsx}", {
+            ignore: EXCLUDED,
+        });
+        const hasAnyPadding = (block) => {
+            // padding via inline style
+            if (/\bpadding\s*:\s*[^,}]+/m.test(block))
+                return true;
+            // padding via tailwind class utilities (works for quoted strings AND template literals)
+            if (/\b(?:p|px|py|pt|pb|pl|pr)-(?:\d+|\[[^\]]+\])\b/.test(block))
+                return true;
+            // padding via sx prop (allowed only in UI package, but can appear in some legacy components)
+            if (/\bsx=\{\{[\s\S]*?\b(?:p|px|py|pt|pb|pl|pr)\s*:\s*[^,}]+/m.test(block))
+                return true;
+            return false;
+        };
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // 0) Back-to-back Cards should have explicit vertical spacing.
+            // This is a lightweight regression guard for "cards touching" on product pages.
+            for (let i = 0; i < lines.length - 1; i++) {
+                const line = lines[i];
+                if (line.trim().startsWith("//"))
+                    continue;
+                // Check for preflight-ignore in surrounding lines (5 lines before and 3 after)
+                const contextLines = lines
+                    .slice(Math.max(0, i - 5), Math.min(lines.length, i + 3))
+                    .join("\n");
+                if (contextLines.includes("preflight-ignore"))
+                    continue;
+                const isCardClose = /<\s*\/\s*Card\s*>/.test(line);
+                if (!isCardClose)
+                    continue;
+                // Look ahead a few lines for the next Card open.
+                const lookahead = lines.slice(i + 1, Math.min(i + 6, lines.length)).join("\n");
+                const nextCardLineIndex = lines
+                    .slice(i + 1, Math.min(i + 6, lines.length))
+                    .findIndex((l) => /<\s*Card\b/.test(l));
+                if (nextCardLineIndex === -1)
+                    continue;
+                const nextCardLine = lines[i + 1 + nextCardLineIndex];
+                const hasExplicitSpacing = /\b(?:mt|my)-(?:\d+|\[[^\]]+\])\b/.test(nextCardLine) ||
+                    /marginTop\s*:\s*[^,}]+/.test(lookahead) ||
+                    /\bclassName=\{?[^\n]*\b(?:mt|my)-(?:\d+|\[[^\]]+\])\b/.test(lookahead);
+                // Skip obvious grid/gap contexts (spacing is handled by parent layouts).
+                const likelyInGridOrGap = /\b(?:grid|gap-|space-y-)\b/.test(lookahead);
+                if (!likelyInGridOrGap && !hasExplicitSpacing) {
+                    issues.push({
+                        file,
+                        line: i + 2 + nextCardLineIndex,
+                        type: "card-no-vertical-gap",
+                        severity: this.strictUniformity ? "error" : "warning",
+                        message: "Back-to-back <Card> blocks appear without explicit vertical spacing (cards may touch)",
+                        suggestion: "Add vertical spacing via className (mt-*/my-*) or wrap Cards in a Stack with spacing={3}",
+                        snippet: nextCardLine.trim().substring(0, 140),
+                    });
+                }
+            }
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                if (line.trim().startsWith("//"))
+                    continue;
+                // Check for preflight-ignore in surrounding lines (3 lines before and after)
+                const contextLines = lines
+                    .slice(Math.max(0, i - 5), Math.min(lines.length, i + 3))
+                    .join("\n");
+                if (contextLines.includes("preflight-ignore"))
+                    continue;
+                // 1) Bordered containers should have padding.
+                // Heuristic focuses on full borders (not border-b/t/l/r/x/y) and avoids false positives from "--border-color".
+                const looksLikeContainerStart = /<\s*(Box|div|section|article|aside|Card)\b/.test(line);
+                const block = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                const extendedBlock = lines.slice(i, Math.min(i + 40, lines.length)).join("\n");
+                const hasFullBorder = /border\s*:\s*`?1px\s+solid/.test(block) ||
+                    /(^|["'\s])border(\s|["'])/m.test(block) ||
+                    /(^|["'\s])border-(?!b\b|t\b|l\b|r\b|x\b|y\b|color\b)[^\s"']+/m.test(block);
+                const hasVisualSurface = /\bshadow\b|bg-\w|backdrop-blur|rounded-\[|\brounded\b/.test(block);
+                const hasTypography = block.includes("<Typography");
+                const looksLikeTinyIndicator = !hasTypography && /\bw-(1|2|3|4|5|6)\b/.test(block) && /\bh-(1|2|3|4|5|6)\b/.test(block);
+                const looksLikeImageWrapper = /<Image\b|component=\{?['"]img['"]\}?|\bsrc=\{?|backgroundImage\s*:|objectFit\s*:|bg-contain\b|bg-cover\b|object-contain\b|object-cover\b/.test(extendedBlock);
+                if (looksLikeContainerStart &&
+                    hasFullBorder &&
+                    hasVisualSurface &&
+                    !looksLikeTinyIndicator &&
+                    !looksLikeImageWrapper) {
+                    if (!hasAnyPadding(block)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "bordered-container-no-padding",
+                            severity: this.strictUniformity ? "error" : "warning",
+                            message: "Bordered UI container appears to have no padding (content may touch the border)",
+                            suggestion: 'Add padding via className (p-*, px-*/py-*) or style={{ padding: "var(--spacing-*)" }}',
+                            snippet: line.trim().substring(0, 140),
+                        });
+                    }
+                }
+                // 2) Overlay text pills (e.g., "Click to zoom") should have explicit padding.
+                // Avoid false positives on IconButton/Button that reference overlay tokens for hover states.
+                const tagMatch = line.match(/<\s*([A-Za-z0-9_]+)/);
+                const tagName = tagMatch?.[1] ?? "";
+                const looksLikeOverlay = /\babsolute\b/.test(line) &&
+                    (line.includes("Click to zoom") ||
+                        line.includes("rgba(0, 0, 0") ||
+                        line.includes("overlay-backdrop")) &&
+                    tagName !== "IconButton" &&
+                    tagName !== "Button";
+                if (looksLikeOverlay) {
+                    const block = lines.slice(i, Math.min(i + 12, lines.length)).join("\n");
+                    const hasOverlayBg = block.includes("var(--overlay-backdrop)") ||
+                        /rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\.[0-9]+\s*\)/.test(block);
+                    // Only treat as a "pill" if it looks like a compact label.
+                    const looksLikePillText = block.includes("Click to zoom") ||
+                        (/\btext-(xs|sm)\b/.test(block) && /\brounded\b|rounded-\[/.test(block));
+                    if (hasOverlayBg && looksLikePillText && !hasAnyPadding(block)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "overlay-no-padding",
+                            severity: this.strictUniformity ? "error" : "warning",
+                            message: "Overlay label appears to have no padding (text may look cramped on dark backdrop)",
+                            suggestion: 'Add padding via className (px-*/py-*) or style={{ padding: "var(--spacing-*)" }}',
+                            snippet: line.trim().substring(0, 140),
+                        });
+                    }
+                }
+            }
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "Product Page Polish",
+            passed: !hasErrors,
+            blocking: this.strictUniformity,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Global UI Polish (non-blocking) - broader scan for common spacing regressions.
+     *
+     * This is intentionally WARNING-only to keep preflights useful without becoming
+     * deployment-blocking due to heuristic false positives.
+     */
+    async checkGlobalPolish() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await file_cache_1.fileCache.getAppAndComponentsTSX();
+        const hasAnyPadding = (block) => {
+            if (/\bpadding\s*:\s*[^,}]+/m.test(block))
+                return true;
+            if (/\b(?:p|px|py|pt|pb|pl|pr)-(?:\d+|\[[^\]]+\])\b/.test(block))
+                return true;
+            if (/\bsx=\{\{[\s\S]*?\b(?:p|px|py|pt|pb|pl|pr)\s*:\s*[^,}]+/m.test(block))
+                return true;
+            return false;
+        };
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                if (line.trim().startsWith("//"))
+                    continue;
+                // Check for preflight-ignore in surrounding lines (15 lines before and 3 after)
+                const contextLines = lines
+                    .slice(Math.max(0, i - 15), Math.min(lines.length, i + 3))
+                    .join("\n");
+                if (contextLines.includes("preflight-ignore"))
+                    continue;
+                // Heuristic A: bordered surface containers should have padding.
+                // Full border only; avoid false positives from "--border-color" and one-sided borders.
+                const looksLikeContainerStart = /<\s*(Box|div|section|article|aside|Card)\b/.test(line);
+                const block = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                const extendedBlock = lines.slice(i, Math.min(i + 40, lines.length)).join("\n");
+                const hasFullBorder = /border\s*:\s*`?1px\s+solid/.test(block) ||
+                    /(^|["'\s])border(\s|["'])/m.test(block) ||
+                    /(^|["'\s])border-(?!b\b|t\b|l\b|r\b|x\b|y\b|color\b)[^\s"']+/m.test(block);
+                // Only flag text-bearing surfaces; skip pure image/layout wrappers.
+                const hasTypography = block.includes("<Typography");
+                const hasSurfaceStyling = /\bshadow\b|bg-\w|backdrop-blur/.test(block);
+                const looksLikeTinyIndicator = /\bw-(4|5|6)\b/.test(block) &&
+                    /\bh-(4|5|6)\b/.test(block) &&
+                    /\bborder-(2|\[)/.test(block) &&
+                    !/\bbg-\w/.test(block) &&
+                    !/\bshadow\b/.test(block);
+                const looksLikeImageWrapper = /<Image\b|component=\{?['"]img['"]\}?|\bsrc=\{?|backgroundImage\s*:|objectFit\s*:|bg-contain\b|bg-cover\b|object-contain\b|object-cover\b/.test(block);
+                const looksLikeSmallCenteredBadge = /\bflex\b/.test(block) &&
+                    /\bitems-center\b/.test(block) &&
+                    /\bjustify-center\b/.test(block) &&
+                    /width\s*:\s*['"]?(?:1\d|2[0-4])px['"]?/.test(block) &&
+                    /height\s*:\s*['"]?(?:1\d|2[0-4])px['"]?/.test(block);
+                const looksLikeBorderedMediaFrame = block.includes("overflow-hidden") &&
+                    /\bborder-(2|\[)/.test(block) &&
+                    (/(\bw-\d+\b)/.test(block) || /(\bh-\d+\b)/.test(block)) &&
+                    /(object-contain|object-cover|component=\{?['"]img['"]\}?|<Image\b)/.test(extendedBlock);
+                if (looksLikeContainerStart &&
+                    hasFullBorder &&
+                    hasSurfaceStyling &&
+                    hasTypography &&
+                    !looksLikeTinyIndicator &&
+                    !looksLikeSmallCenteredBadge &&
+                    !looksLikeImageWrapper &&
+                    !looksLikeBorderedMediaFrame) {
+                    if (!hasAnyPadding(block)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "bordered-container-no-padding",
+                            severity: "warning",
+                            message: "Bordered UI container appears to have no padding (content may touch the border)",
+                            suggestion: 'Add padding via className (p-*, px-*/py-*) or style={{ padding: "var(--spacing-*)" }}',
+                            snippet: line.trim().substring(0, 140),
+                        });
+                    }
+                }
+                // Heuristic B: overlay text pills (absolute + dark backdrop) should have padding.
+                const tagMatch = line.match(/<\s*([A-Za-z0-9_]+)/);
+                const tagName = tagMatch?.[1] ?? "";
+                const looksLikeOverlay = /\babsolute\b/.test(line) &&
+                    (line.includes("var(--overlay-backdrop)") || line.includes("rgba(0, 0, 0")) &&
+                    tagName !== "IconButton" &&
+                    tagName !== "Button";
+                if (looksLikeOverlay) {
+                    const block = lines.slice(i, Math.min(i + 12, lines.length)).join("\n");
+                    const hasOverlayBg = block.includes("var(--overlay-backdrop)") ||
+                        /rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\.[0-9]+\s*\)/.test(block);
+                    const looksLikePillText = /\btext-(xs|sm)\b/.test(block) && /\brounded\b|rounded-\[/.test(block);
+                    if (hasOverlayBg && looksLikePillText && !hasAnyPadding(block)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "overlay-no-padding",
+                            severity: "warning",
+                            message: "Overlay label appears to have no padding (text may look cramped on dark backdrop)",
+                            suggestion: 'Add padding via className (px-*/py-*) or style={{ padding: "var(--spacing-*)" }}',
+                            snippet: line.trim().substring(0, 140),
+                        });
+                    }
+                }
+                // Heuristic C: button-like controls should not explicitly zero out padding.
+                // This catches common regressions like "text flush to border" when someone
+                // adds px-0 / p-0 or style padding: 0 to a CTA.
+                const looksLikeButtonTag = /<\s*(Button|button|a)\b/.test(line);
+                if (looksLikeButtonTag) {
+                    const block = lines.slice(i, Math.min(i + 14, lines.length)).join("\n");
+                    const hasZeroPaddingClass = /\b(?:p|px|py|pt|pb|pl|pr)-0\b/.test(block);
+                    const hasZeroPaddingStyle = /\bpadding(?:Left|Right|Top|Bottom)?\s*:\s*(?:0|"0"|'0'|"0px"|'0px')\b/.test(block);
+                    // Reduce noise: require CTA-ish copy nearby.
+                    const hasCtaCopy = /(\bAdd to Cart\b|\bCheckout\b|\bBuy\b|\bSell\b|\bContinue\b|\bSave\b|\bSubmit\b)/i.test(block);
+                    const hasButtonLikeClasses = /\bbg-\[|\bbg-[a-z0-9-]+\b|\bborder\b|\bborder-[a-z0-9-]+\b|\brounded\b/.test(block);
+                    if ((hasZeroPaddingClass || hasZeroPaddingStyle) &&
+                        (hasCtaCopy || hasButtonLikeClasses)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "button-zero-padding",
+                            severity: this.strictUniformity ? "error" : "warning",
+                            message: "Button-like control appears to remove padding (can cause text to touch the border)",
+                            suggestion: "Remove p-0/px-0/py-0 or use spacing tokens (e.g., px-4 py-2) / var(--spacing-*)",
+                            snippet: line.trim().substring(0, 140),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: `Global UI Polish (${issues.length} warnings)`,
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * CTA Button Usage (non-blocking)
+     *
+     * Detects cases where a CTA is visually styled like a button but implemented
+     * as <Link> / <a> with button-like classes. Prefer using our `Button` component
+     * (it supports `href` or `asChild` patterns) for consistent padding, focus,
+     * hover, and accessibility.
+     */
+    async checkCTAButtons() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await file_cache_1.fileCache.getAppAndComponentsTSX();
+        const looksLikeButtonClasses = (text) => {
+            // Intentionally conservative: background + padding + rounded is the typical "button" signature.
+            const hasBg = /\bbg-\[|\bbg-[a-z0-9-]+\b/.test(text);
+            const hasPadding = /\b(?:px|py|p)-(?:\d+|\[[^\]]+\])\b/.test(text);
+            const hasRounded = /\brounded\b|rounded-\[/.test(text);
+            const hasInteractive = /\bhover:|\bfocus-visible:|\bactive:|\btransition\b/.test(text);
+            return hasBg && hasPadding && hasRounded && hasInteractive;
+        };
+        const looksLikeCTAContent = (text) => {
+            // Common CTA verbs; keep small to avoid noise.
+            return /(\bSell\b|\bBuy\b|\bCheckout\b|\bAdd to cart\b|\bList\b|\bCreate\b|\bContinue\b|\bSave\b|\bSubmit\b)/i.test(text);
+        };
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                if (line.trim().startsWith("//"))
+                    continue;
+                // Match opening tags for Link or anchor.
+                const isLinkTag = /<\s*Link\b/.test(line);
+                const isAnchorTag = /<\s*a\b/.test(line);
+                if (!isLinkTag && !isAnchorTag)
+                    continue;
+                const block = lines.slice(i, Math.min(i + 8, lines.length)).join("\n");
+                // Skip obvious non-CTA cases.
+                if (/aria-label=\{?['"][^'"]*(?:Close|Open|Menu|Back|Next|Previous)[^'"]*['"]/i.test(block))
+                    continue;
+                if (/role=\{?['"]menuitem['"]/i.test(block))
+                    continue;
+                if (/\bicon\b/i.test(block) && /<\s*IconButton\b/.test(block))
+                    continue;
+                // Heuristic: styled like a button and contains CTA-like copy nearby.
+                const hasButtonLikeClasses = looksLikeButtonClasses(block);
+                const nearbyText = lines.slice(i, Math.min(i + 15, lines.length)).join(" ");
+                const hasCTAText = looksLikeCTAContent(nearbyText);
+                const explicitlyButtonRole = /role=\{?['"]button['"]/i.test(block);
+                if ((hasButtonLikeClasses && hasCTAText) || explicitlyButtonRole) {
+                    issues.push({
+                        file,
+                        line: i + 1,
+                        type: "cta-link-should-be-button",
+                        severity: "warning",
+                        message: "CTA appears styled like a button but implemented as Link/a",
+                        suggestion: 'Use <Button href="..."> or <Button asChild><Link ... /></Button> for consistent styling/accessibility',
+                        snippet: line.trim().substring(0, 140),
+                    });
+                }
+            }
+        }
+        return {
+            name: `CTA Button Usage (${issues.length} warnings)`,
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    async runAll() {
+        const startTime = Date.now();
+        console.log(`\n${console_chars_1.emoji.palette} CONSOLIDATED UI PATTERNS PREFLIGHT`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        const checks = [];
+        checks.push(await this.checkCategoryChips());
+        checks.push(await this.checkChipSizeConsistency());
+        checks.push(await this.checkGlassmorphism());
+        checks.push(await this.checkFlexJustify());
+        checks.push(await this.checkLucideIcons());
+        checks.push(await this.checkToastPolish());
+        checks.push(await this.checkCardContentPadding());
+        checks.push(await this.checkProductPagePolish());
+        checks.push(await this.checkGlobalPolish());
+        checks.push(await this.checkAutocompleteFloatingLabels());
+        checks.push(await this.checkCTAButtons());
+        checks.push(await this.checkCssCircular());
+        checks.push(await this.checkZIndex());
+        checks.push(await this.checkUndefinedCssVariables());
+        checks.push(await this.checkHeaderIconButtonUniformity());
+        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,
+        };
+        this.printResults(checks, totalDuration, summary, hasBlockingFailure);
+        return { module: "ui-patterns", passed: !hasBlockingFailure, totalDuration, checks, summary };
+    }
+    printResults(checks, totalDuration, summary, hasBlockingFailure) {
+        console.log("\n" + (0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`${console_chars_1.emoji.chart} UI PATTERNS RESULTS`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        checks.forEach((check) => {
+            const icon = check.passed
+                ? `${console_chars_1.emoji.success}`
+                : check.blocking
+                    ? `${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(30)} ${(check.duration / 1000).toFixed(1)}s${count}`);
+            if (this.verbose && check.issues.length > 0) {
+                check.issues.slice(0, 3).forEach((issue) => {
+                    console.log(`   ${issue.file}:${issue.line} - ${issue.message}`);
+                });
+                if (check.issues.length > 3)
+                    console.log(`   ... and ${check.issues.length - 3} more`);
+            }
+        });
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`Errors: ${summary.errors} | Warnings: ${summary.warnings} | Time: ${(totalDuration / 1000).toFixed(1)}s`);
+        if (hasBlockingFailure) {
+            console.log(`\n${console_chars_1.emoji.error} UI PATTERNS FAILED (blocking errors found)`);
+        }
+        else {
+            console.log(`\n${console_chars_1.emoji.success} UI PATTERNS PASSED`);
+        }
+    }
+}
+exports.UIPatternsPreflightModule = UIPatternsPreflightModule;
+async function main() {
+    const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(path.basename(__filename, ".ts"));
+    const args = process.argv.slice(2);
+    const flags = new Set(args.filter((a) => a.startsWith("-")));
+    const positional = args.filter((a) => !a.startsWith("-"));
+    const mode = positional[0] || "all";
+    const verbose = flags.has("--verbose") || flags.has("-v");
+    const strictUniformity = flags.has("--strict") ||
+        flags.has("--strict-uniformity") ||
+        process.env.PREFLIGHT_STRICT_UNIFORMITY === "1";
+    const module = new UIPatternsPreflightModule({ verbose, strictUniformity });
+    const runSingle = async (name, fn) => {
+        const check = await fn();
+        const hasBlockingFailure = !check.passed && check.blocking;
+        console.log(`\n${check.passed ? "${emoji.success}" : "${emoji.error}"} ${check.name}: ${check.issues.length} issues`);
+        if (check.issues.length > 0) {
+            const severityRank = { error: 0, warning: 1, info: 2 };
+            const issuesSorted = [...check.issues].sort((a, b) => {
+                const ar = severityRank[a.severity] ?? 9;
+                const br = severityRank[b.severity] ?? 9;
+                if (ar !== br)
+                    return ar - br;
+                if (a.file !== b.file)
+                    return a.file.localeCompare(b.file);
+                return (a.line ?? 0) - (b.line ?? 0);
+            });
+            const toPrint = verbose ? issuesSorted : issuesSorted.slice(0, 5);
+            toPrint.forEach((i) => {
+                console.log(`   [${i.severity}] ${i.file}:${i.line} - ${i.message}`);
+            });
+            if (!verbose && issuesSorted.length > 5)
+                console.log(`   ... and ${issuesSorted.length - 5} more`);
+        }
+        return {
+            module: `ui-patterns:${name}`,
+            passed: !hasBlockingFailure,
+            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,
+            },
+        };
+    };
+    let result;
+    switch (mode) {
+        case "category":
+            result = await runSingle("category", () => module.checkCategoryChips());
+            break;
+        case "chip-size":
+            result = await runSingle("chip-size", () => module.checkChipSizeConsistency());
+            break;
+        case "glass":
+            result = await runSingle("glass", () => module.checkGlassmorphism());
+            break;
+        case "flex":
+            result = await runSingle("flex", () => module.checkFlexJustify());
+            break;
+        case "icons":
+            result = await runSingle("icons", () => module.checkLucideIcons());
+            break;
+        case "polish":
+            result = await runSingle("polish", () => module.checkGlobalPolish());
+            break;
+        case "product-polish":
+            result = await runSingle("product-polish", () => module.checkProductPagePolish());
+            break;
+        case "cta":
+            result = await runSingle("cta", () => module.checkCTAButtons());
+            break;
+        case "css":
+            result = await runSingle("css", () => module.checkCssCircular());
+            break;
+        case "zindex":
+            result = await runSingle("zindex", () => module.checkZIndex());
+            break;
+        case "undefined":
+            result = await runSingle("undefined", () => module.checkUndefinedCssVariables());
+            break;
+        case "header-icons":
+            result = await runSingle("header-icons", () => module.checkHeaderIconButtonUniformity());
+            break;
+        default:
+            result = await module.runAll();
+            break;
+    }
+    process.exit(result.passed ? 0 : 1);
+}
+if (require.main === module) {
+    main();
+}
+//# sourceMappingURL=ui-patterns.js.map