@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-standards-enforcement.js

@@ -0,0 +1,935 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * UI Standards Enforcement Preflight
+ *
+ * Comprehensive UI consistency checks for:
+ * 1. Card Elevation/Shadow Consistency
+ * 2. Typography Hierarchy Consistency
+ * 3. Button Size Consistency
+ * 4. Icon Size Consistency
+ * 5. Alert/Status Message Spacing
+ * 6. Form Field Density
+ *
+ * Usage:
+ *   pnpm preflight:ui-standards              # All checks
+ *   pnpm preflight:ui-standards shadows      # Card shadows only
+ *   pnpm preflight:ui-standards typography   # Typography hierarchy only
+ *   pnpm preflight:ui-standards buttons      # Button sizes only
+ *   pnpm preflight:ui-standards icons        # Icon sizes only
+ *   pnpm preflight:ui-standards alerts       # Alert spacing only
+ *   pnpm preflight:ui-standards forms        # Form density 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.UIStandardsEnforcementModule = void 0;
+const fs = __importStar(require("fs"));
+const file_cache_1 = require("../../shared/file-cache");
+const path = __importStar(require("path"));
+const console_chars_1 = require("../../utils/console-chars");
+const universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+const concurrency_config_1 = require("../../shared/concurrency-config");
+const EXCLUDED_PATTERNS = [
+    "**/node_modules/**",
+    "**/.next/**",
+    "**/dist/**",
+    "**/build/**",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.stories.tsx",
+    "**/stories/**",
+];
+// STANDARDS DEFINITIONS
+/**
+ * Card Shadow Standards:
+ * - Primary/standalone cards: --shadow-md
+ * - Nested/secondary cards: --shadow-sm
+ * - Elevated/floating cards: --shadow-lg
+ * - No shadow: Only for flat/borderless cards
+ */
+const CARD_SHADOW_STANDARDS = {
+    primary: ["shadow-md", "shadow-[var(--shadow-md)]", "elevation={2}"],
+    nested: ["shadow-sm", "shadow-[var(--shadow-sm)]", "elevation={1}"],
+    elevated: ["shadow-lg", "shadow-[var(--shadow-lg)]", "elevation={3}"],
+    flat: ["shadow-none", "elevation={0}"],
+};
+/**
+ * Typography Hierarchy Standards:
+ * - Page title: h4
+ * - Section header: h6
+ * - Subsection: subtitle1
+ * - Card title: h6 or subtitle1
+ */
+const TYPOGRAPHY_STANDARDS = {
+    pageTitle: ["h4"],
+    sectionHeader: ["h6"],
+    subsection: ["subtitle1"],
+    cardTitle: ["h6", "subtitle1"],
+};
+/**
+ * Button Size Standards:
+ * - Primary CTA: lg
+ * - Secondary actions: default (no size prop)
+ * - Inline/compact actions: sm
+ * - Icon-only buttons: sm or default
+ */
+const BUTTON_SIZE_STANDARDS = {
+    primaryCta: ["lg"],
+    secondary: [undefined, "default"],
+    inline: ["sm"],
+    iconOnly: ["sm", undefined],
+};
+/**
+ * Icon Size Standards:
+ * - Inline text icons: 16px (w-4 h-4)
+ * - Button icons: 20px (w-5 h-5)
+ * - Card/section icons: 24px (w-6 h-6)
+ * - Hero/feature icons: 48px (w-12 h-12)
+ */
+const ICON_SIZE_STANDARDS = {
+    inline: ["16", "w-4", "h-4", "size={16}"],
+    button: ["20", "w-5", "h-5", "size={20}"],
+    card: ["24", "w-6", "h-6", "size={24}"],
+    hero: ["48", "w-12", "h-12", "size={48}"],
+};
+/**
+ * Alert Spacing Standards:
+ * - After alert: mb-4 (16px)
+ * - Stacked alerts: gap-3 (12px)
+ */
+const ALERT_SPACING_STANDARDS = {
+    afterAlert: ["mb-4", 'marginBottom: "var(--spacing-4)"'],
+    stackedGap: ["gap-3", 'gap: "var(--spacing-3)"'],
+};
+/**
+ * Form Field Density Standards:
+ * - Standard forms: spacing-3 or gap-3
+ * - Compact forms: spacing-2 or gap-2
+ * - Dense tables: spacing-1 or gap-1
+ */
+const FORM_DENSITY_STANDARDS = {
+    standard: ["spacing={3}", "gap-3", 'gap: "var(--spacing-3)"'],
+    compact: ["spacing={2}", "gap-2", 'gap: "var(--spacing-2)"'],
+    dense: ["spacing={1}", "gap-1", 'gap: "var(--spacing-1)"'],
+};
+// Get concurrency from shared config (respects PREFLIGHT_CONCURRENCY env var)
+const concurrencyConfig = (0, concurrency_config_1.getConcurrencyConfig)();
+class UIStandardsEnforcementModule {
+    verbose;
+    parallel = false;
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+        this.parallel = options.parallel || concurrencyConfig.parallel;
+    }
+    async getFiles() {
+        return await file_cache_1.fileCache.getAllTsxJsx();
+    }
+    /**
+     * 1. Card Elevation/Shadow Consistency
+     * Detects inconsistent shadow usage across Cards
+     */
+    async checkCardShadowConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        const shadowUsage = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (/<Card\b/.test(line)) {
+                    const cardBlock = lines.slice(index, Math.min(index + 15, lines.length)).join("\n");
+                    // Detect shadow patterns
+                    const shadowPatterns = [
+                        { pattern: /shadow-\[var\(--shadow-sm\)\]/, name: "--shadow-sm" },
+                        { pattern: /shadow-\[var\(--shadow-md\)\]/, name: "--shadow-md" },
+                        { pattern: /shadow-\[var\(--shadow-lg\)\]/, name: "--shadow-lg" },
+                        { pattern: /shadow-sm(?!\[)/, name: "shadow-sm" },
+                        { pattern: /shadow-md(?!\[)/, name: "shadow-md" },
+                        { pattern: /shadow-lg(?!\[)/, name: "shadow-lg" },
+                        { pattern: /shadow-none/, name: "shadow-none" },
+                        { pattern: /elevation=\{1\}/, name: "elevation={1}" },
+                        { pattern: /elevation=\{2\}/, name: "elevation={2}" },
+                        { pattern: /elevation=\{3\}/, name: "elevation={3}" },
+                        { pattern: /elevation=\{0\}/, name: "elevation={0}" },
+                    ];
+                    let foundShadow = false;
+                    for (const { pattern, name } of shadowPatterns) {
+                        if (pattern.test(cardBlock)) {
+                            foundShadow = true;
+                            const entry = shadowUsage.get(name) || { count: 0, files: [] };
+                            entry.count++;
+                            if (!entry.files.includes(file))
+                                entry.files.push(file);
+                            shadowUsage.set(name, entry);
+                        }
+                    }
+                    // Card without any shadow specification
+                    // Exclude: test files, filter cards, nested cards, intentionally flat cards
+                    if (!foundShadow && !cardBlock.includes("variant=")) {
+                        const contextBefore = lines.slice(Math.max(0, index - 10), index).join("\n");
+                        const isTestFile = /test|spec|stories/i.test(file);
+                        const isFilterCard = /Filter|filter|Search|search|Sidebar|sidebar/i.test(file + cardBlock);
+                        const isNestedCard = /<Card/.test(contextBefore);
+                        const isListItem = /List|Row|Item|map\(|\.map/i.test(contextBefore);
+                        const isWizardStep = /Wizard|Step|step/i.test(file);
+                        const isEmptyState = /Empty|empty|placeholder/i.test(cardBlock);
+                        if (!isTestFile &&
+                            !isFilterCard &&
+                            !isNestedCard &&
+                            !isListItem &&
+                            !isWizardStep &&
+                            !isEmptyState) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "card-no-shadow",
+                                severity: "info",
+                                message: "Card without explicit shadow/elevation",
+                                suggestion: "Add shadow-[var(--shadow-md)] for primary cards or shadow-[var(--shadow-sm)] for nested cards",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        // Report inconsistent shadow usage
+        if (shadowUsage.size > 3) {
+            const sorted = [...shadowUsage.entries()].sort((a, b) => b[1].count - a[1].count);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "card-shadow-inconsistency",
+                severity: "warning",
+                message: `Cards use ${shadowUsage.size} different shadow patterns: ${sorted.map(([s, d]) => `${s}(${d.count})`).join(", ")}`,
+                suggestion: "Standardize: --shadow-md for primary, --shadow-sm for nested, --shadow-lg for elevated",
+            });
+        }
+        return {
+            name: "Card Shadow Consistency",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 2. Typography Hierarchy Consistency
+     * Detects inconsistent heading usage
+     */
+    async checkTypographyHierarchy() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        const pageTitleVariants = new Map();
+        const sectionHeaderVariants = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Detect if this is a page file (contains page title)
+            const isPageFile = /page\.tsx$|Client\.tsx$/.test(file);
+            const hasUnifiedHeader = content.includes("UnifiedHeader");
+            lines.forEach((line, index) => {
+                // Check Typography variant usage
+                if (/<Typography\b/.test(line)) {
+                    const typographyBlock = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    const variantMatch = typographyBlock.match(/variant=["']([^"']+)["']/);
+                    if (variantMatch) {
+                        const variant = variantMatch[1];
+                        // Detect page title patterns (first h* in page files)
+                        if (isPageFile && !hasUnifiedHeader) {
+                            if (["h1", "h2", "h3", "h4", "h5"].includes(variant)) {
+                                const contextBefore = lines.slice(Math.max(0, index - 10), index).join("\n");
+                                const isFirstHeading = !/<Typography[^>]*variant=["']h[1-5]/.test(contextBefore);
+                                // Exclude admin metric pages, registration pages, and stat cards
+                                const isAdminMetricPage = /admin.*metric|rotation-metric/i.test(file);
+                                const isRegistrationPage = /register|signup|sign-up/i.test(file);
+                                const isStatCard = /CardContent|stat|metric/i.test(contextBefore);
+                                if (isFirstHeading && !isAdminMetricPage && !isRegistrationPage && !isStatCard) {
+                                    pageTitleVariants.set(variant, (pageTitleVariants.get(variant) || 0) + 1);
+                                    if (variant !== "h4") {
+                                        issues.push({
+                                            file,
+                                            line: index + 1,
+                                            type: "page-title-variant",
+                                            severity: "warning",
+                                            message: `Page title uses variant="${variant}" instead of "h4"`,
+                                            suggestion: 'Use variant="h4" for page titles (or UnifiedHeader)',
+                                            snippet: line.trim().substring(0, 80),
+                                        });
+                                    }
+                                }
+                            }
+                        }
+                        // Detect section headers (h5, h6 after page title)
+                        if (["h5", "h6", "subtitle1"].includes(variant)) {
+                            sectionHeaderVariants.set(variant, (sectionHeaderVariants.get(variant) || 0) + 1);
+                        }
+                        // Flag h1, h2, h3 usage (should be rare)
+                        // Exclude: Hero/Landing pages, stat cards (large numbers), price displays
+                        if (["h1", "h2", "h3"].includes(variant) &&
+                            !file.includes("Hero") &&
+                            !file.includes("Landing")) {
+                            const contextBlock = lines
+                                .slice(Math.max(0, index - 5), Math.min(index + 5, lines.length))
+                                .join("\n");
+                            const isStatCard = /CardContent|stat|metric|total|count|price|amount|\d+[%$€£]/i.test(contextBlock);
+                            const isPriceDisplay = /price|Price|cost|Cost|amount|Amount/i.test(contextBlock);
+                            if (!isStatCard && !isPriceDisplay) {
+                                issues.push({
+                                    file,
+                                    line: index + 1,
+                                    type: "large-heading-usage",
+                                    severity: "info",
+                                    message: `Large heading variant="${variant}" used outside hero/landing`,
+                                    suggestion: "Use h4 for page titles, h6 for sections, subtitle1 for subsections",
+                                    snippet: line.trim().substring(0, 80),
+                                });
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        // Report inconsistent section header usage
+        if (sectionHeaderVariants.size > 2) {
+            const sorted = [...sectionHeaderVariants.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "section-header-inconsistency",
+                severity: "info",
+                message: `Section headers use ${sectionHeaderVariants.size} variants: ${sorted.map(([v, c]) => `${v}(${c})`).join(", ")}`,
+                suggestion: "Standardize: h6 for section headers, subtitle1 for subsections",
+            });
+        }
+        return {
+            name: "Typography Hierarchy",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 3. Button Size Consistency
+     * Detects inconsistent button sizing
+     */
+    async checkButtonSizeConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        const buttonSizes = new Map();
+        const ctaButtonSizes = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (/<Button\b/.test(line)) {
+                    const buttonBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    const contextBefore = lines.slice(Math.max(0, index - 10), index).join("\n");
+                    // Extract size
+                    const sizeMatch = buttonBlock.match(/size=["']([^"']+)["']/);
+                    const size = sizeMatch ? sizeMatch[1] : "default";
+                    buttonSizes.set(size, (buttonSizes.get(size) || 0) + 1);
+                    // Detect CTA buttons (primary variant with action text)
+                    const isPrimary = /variant=["'](?:default|primary)["']/.test(buttonBlock) ||
+                        !buttonBlock.includes("variant=");
+                    const isCtaText = /(?:Submit|Save|Create|Add|Continue|Get Started|Sign Up|Buy|Purchase|Checkout)/i.test(buttonBlock);
+                    // Exclude compact contexts where small buttons are appropriate
+                    const isCompactContext = /Compact|Row|Table|List|Drawer|Popover|Menu|Toolbar|inline|dense/i.test(file + contextBefore);
+                    const isInCard = /<Card/.test(contextBefore) && !/<CardActions/.test(contextBefore);
+                    const isSecondaryAction = /variant=["'](?:outline|ghost|secondary)["']/.test(buttonBlock);
+                    if (isPrimary && isCtaText && !isCompactContext && !isSecondaryAction) {
+                        ctaButtonSizes.set(size, (ctaButtonSizes.get(size) || 0) + 1);
+                        // CTA buttons should be lg (only in non-compact contexts)
+                        if (size !== "lg") {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "cta-button-size",
+                                severity: "info",
+                                message: `CTA button uses size="${size}" instead of "lg"`,
+                                suggestion: 'Use size="lg" for primary CTA buttons',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                    // Detect inline/compact buttons that should be sm
+                    const isInline = /inline|compact|small/i.test(buttonBlock) ||
+                        buttonBlock.includes("IconButton") ||
+                        /className=["'][^"']*text-xs/.test(buttonBlock);
+                    if (isInline && size !== "sm") {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "inline-button-size",
+                            severity: "info",
+                            message: `Inline/compact button uses size="${size}" instead of "sm"`,
+                            suggestion: 'Use size="sm" for inline or compact buttons',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        // Report inconsistent button sizing
+        if (buttonSizes.size > 3) {
+            const sorted = [...buttonSizes.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "button-size-inconsistency",
+                severity: "info",
+                message: `Buttons use ${buttonSizes.size} different sizes: ${sorted.map(([s, c]) => `${s}(${c})`).join(", ")}`,
+                suggestion: "Standardize: lg for CTAs, default for secondary, sm for inline",
+            });
+        }
+        return {
+            name: "Button Size Consistency",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 4. Icon Size Consistency
+     * Detects inconsistent icon sizing
+     */
+    async checkIconSizeConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        const iconSizes = new Map();
+        const contextSizes = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Detect Lucide icons (most common pattern)
+                const iconMatch = line.match(/<([A-Z][a-zA-Z]+Icon|[A-Z][a-zA-Z]+)\s/);
+                if (iconMatch && /lucide|Icon/.test(content)) {
+                    const contextBlock = lines
+                        .slice(Math.max(0, index - 5), Math.min(index + 5, lines.length))
+                        .join("\n");
+                    // Extract size from various patterns
+                    let size = "unknown";
+                    // Pattern: size={16}
+                    const sizeNumMatch = line.match(/size=\{(\d+)\}/);
+                    if (sizeNumMatch)
+                        size = sizeNumMatch[1];
+                    // Pattern: className="w-4 h-4"
+                    const tailwindMatch = line.match(/className=["'][^"']*(?:w-(\d+)|h-(\d+))/);
+                    if (tailwindMatch) {
+                        const w = tailwindMatch[1] || tailwindMatch[2];
+                        size = `w-${w}`;
+                    }
+                    // Pattern: width={24} or height={24}
+                    const dimMatch = line.match(/(?:width|height)=\{(\d+)\}/);
+                    if (dimMatch)
+                        size = dimMatch[1];
+                    // Pattern: className="text-xl" etc
+                    const textSizeMatch = line.match(/className=["'][^"']*text-(xs|sm|base|lg|xl|2xl|3xl)/);
+                    if (textSizeMatch)
+                        size = `text-${textSizeMatch[1]}`;
+                    if (size !== "unknown") {
+                        iconSizes.set(size, (iconSizes.get(size) || 0) + 1);
+                    }
+                    // Detect context
+                    const isInButton = /<Button/.test(contextBlock) || /startIcon|endIcon/.test(contextBlock);
+                    const isInCard = /<Card/.test(contextBlock);
+                    const isInline = /inline|flex.*items-center/.test(contextBlock);
+                    const isHero = /Hero|Feature|Landing/i.test(file);
+                    // Validate size for context
+                    if (isInButton && size !== "unknown") {
+                        const buttonSizes = contextSizes.get("button") || new Map();
+                        buttonSizes.set(size, (buttonSizes.get(size) || 0) + 1);
+                        contextSizes.set("button", buttonSizes);
+                        // Button icons should be 20px (w-5)
+                        if (!["20", "w-5", "5"].includes(size)) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "button-icon-size",
+                                severity: "info",
+                                message: `Button icon uses size ${size} instead of 20px (w-5 h-5)`,
+                                suggestion: 'Use className="w-5 h-5" or size={20} for button icons',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                    if (isInCard && !isInButton && size !== "unknown") {
+                        const cardSizes = contextSizes.get("card") || new Map();
+                        cardSizes.set(size, (cardSizes.get(size) || 0) + 1);
+                        contextSizes.set("card", cardSizes);
+                        // Card icons should be 24px (w-6)
+                        if (!["24", "w-6", "6"].includes(size)) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "card-icon-size",
+                                severity: "info",
+                                message: `Card icon uses size ${size} instead of 24px (w-6 h-6)`,
+                                suggestion: 'Use className="w-6 h-6" or size={24} for card icons',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                    if (isHero && size !== "unknown") {
+                        // Hero icons should be 48px (w-12)
+                        if (!["48", "w-12", "12", "32", "w-8", "8"].includes(size)) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "hero-icon-size",
+                                severity: "info",
+                                message: `Hero/feature icon uses size ${size} instead of 48px (w-12 h-12)`,
+                                suggestion: 'Use className="w-12 h-12" or size={48} for hero icons',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        // Report overall inconsistency
+        if (iconSizes.size > 6) {
+            const sorted = [...iconSizes.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "icon-size-inconsistency",
+                severity: "warning",
+                message: `Icons use ${iconSizes.size} different sizes: ${sorted
+                    .slice(0, 8)
+                    .map(([s, c]) => `${s}(${c})`)
+                    .join(", ")}`,
+                suggestion: "Standardize: 16px inline, 20px buttons, 24px cards, 48px hero",
+            });
+        }
+        return {
+            name: "Icon Size Consistency",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 5. Alert/Status Message Spacing
+     * Detects inconsistent alert margins
+     *
+     * Enhanced to handle multi-line Alert/UnifiedStatus components by:
+     * 1. Finding the actual closing tag (not just first />)
+     * 2. Looking for content AFTER the closing tag
+     * 3. Skipping conditional wrappers like ") : null}"
+     */
+    async checkAlertSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        const alertMargins = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (/<Alert\b/.test(line) || /<UnifiedStatus\b/.test(line)) {
+                    const isUnifiedStatus = /<UnifiedStatus\b/.test(line);
+                    const componentName = isUnifiedStatus ? "UnifiedStatus" : "Alert";
+                    // Find the closing tag by tracking depth (handles nested JSX)
+                    let closingLineIndex = index;
+                    let depth = 1;
+                    // Check if self-closing on same line
+                    if (/\/>\s*$/.test(line)) {
+                        closingLineIndex = index;
+                    }
+                    else {
+                        // Search for closing - track JSX depth
+                        for (let j = index + 1; j < Math.min(index + 50, lines.length); j++) {
+                            const searchLine = lines[j];
+                            // Standalone /> closes our component
+                            if (/^\s*\/>/.test(searchLine)) {
+                                depth--;
+                                if (depth <= 0) {
+                                    closingLineIndex = j;
+                                    break;
+                                }
+                            }
+                            // Opening tags increase depth (but not self-closing ones)
+                            const opens = (searchLine.match(/<[A-Z][a-zA-Z]*(?=[\s>])(?![^>]*\/>)/g) || [])
+                                .length;
+                            const closes = (searchLine.match(/<\/[A-Z][a-zA-Z]*>/g) || []).length;
+                            depth += opens - closes;
+                        }
+                    }
+                    // Get the full alert block for margin extraction
+                    const alertBlock = lines.slice(index, closingLineIndex + 1).join("\n");
+                    // Extract margin
+                    const mbMatch = alertBlock.match(/className=["'][^"']*mb-(\d+)/);
+                    const marginMatch = alertBlock.match(/marginBottom:\s*["']?(?:var\(--spacing-(\d+)\)|(\d+)px)/);
+                    let margin = "none";
+                    if (mbMatch)
+                        margin = `mb-${mbMatch[1]}`;
+                    else if (marginMatch)
+                        margin = `spacing-${marginMatch[1] || marginMatch[2]}`;
+                    alertMargins.set(margin, (alertMargins.get(margin) || 0) + 1);
+                    // Check for missing margin
+                    if (margin === "none") {
+                        // Check if there's content after the alert (after CLOSING tag)
+                        // Skip empty lines and conditional wrappers like ") : null}"
+                        const afterLines = lines.slice(closingLineIndex + 1, Math.min(closingLineIndex + 8, lines.length));
+                        const filteredAfter = afterLines.filter((l) => !/^\s*$/.test(l) && !/^\s*\)\s*:\s*null\}?\s*$/.test(l));
+                        const afterAlert = filteredAfter.join("\n");
+                        const hasContentAfter = /<(?:Card|Box|div|Typography|Button|form)/i.test(afterAlert);
+                        if (hasContentAfter) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "alert-no-margin",
+                                severity: "warning",
+                                message: `${componentName} without bottom margin before content`,
+                                suggestion: 'Add className="mb-4" for consistent spacing after alerts',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                    // Check for non-standard margin
+                    if (margin !== "none" && margin !== "mb-4" && margin !== "spacing-4") {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "alert-non-standard-margin",
+                            severity: "info",
+                            message: `${componentName} uses ${margin} instead of mb-4`,
+                            suggestion: "Use mb-4 (16px) for consistent alert spacing",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for stacked alerts without gap
+                if (/<(?:Stack|Box|div)[^>]*>/.test(line)) {
+                    const containerBlock = lines.slice(index, Math.min(index + 20, lines.length)).join("\n");
+                    const alertCount = (containerBlock.match(/<Alert\b/g) || []).length;
+                    if (alertCount >= 2) {
+                        const hasGap = /gap-\d|spacing=\{\d\}|gap:\s*["']?var\(--spacing/.test(containerBlock);
+                        if (!hasGap) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "stacked-alerts-no-gap",
+                                severity: "info",
+                                message: "Multiple alerts without gap between them",
+                                suggestion: "Use gap-3 or spacing={3} for stacked alerts",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        // Report inconsistent margins
+        if (alertMargins.size > 3) {
+            const sorted = [...alertMargins.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "alert-margin-inconsistency",
+                severity: "info",
+                message: `Alerts use ${alertMargins.size} different margins: ${sorted.map(([m, c]) => `${m}(${c})`).join(", ")}`,
+                suggestion: "Standardize: mb-4 after alerts, gap-3 for stacked alerts",
+            });
+        }
+        return {
+            name: "Alert Spacing",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 6. Form Field Density
+     * Detects inconsistent form spacing
+     */
+    async checkFormFieldDensity() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        const formSpacings = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Detect form containers
+                if (/<(?:form|Stack|Box|Grid)[^>]*>/.test(line)) {
+                    const containerBlock = lines.slice(index, Math.min(index + 30, lines.length)).join("\n");
+                    // Check if this is a form (contains TextField, Select, etc.)
+                    const isForm = /<(?:TextField|Select|Input|Checkbox|Radio|FormControl)\b/.test(containerBlock);
+                    if (isForm) {
+                        // Extract spacing
+                        const spacingMatch = containerBlock.match(/spacing=\{(\d+)\}/);
+                        const gapMatch = containerBlock.match(/gap-(\d+)/);
+                        const gapVarMatch = containerBlock.match(/gap:\s*["']?var\(--spacing-(\d+)\)/);
+                        let spacing = "unknown";
+                        if (spacingMatch)
+                            spacing = `spacing-${spacingMatch[1]}`;
+                        else if (gapMatch)
+                            spacing = `gap-${gapMatch[1]}`;
+                        else if (gapVarMatch)
+                            spacing = `spacing-${gapVarMatch[1]}`;
+                        if (spacing !== "unknown") {
+                            formSpacings.set(spacing, (formSpacings.get(spacing) || 0) + 1);
+                        }
+                        // Check for non-standard spacing
+                        const spacingNum = parseInt(spacing.replace(/\D/g, ""));
+                        // Standard form spacing should be 3 (12px)
+                        if (spacingNum && spacingNum !== 3 && spacingNum !== 2) {
+                            // Check context - is this a compact form?
+                            const isCompact = /compact|dense|inline|filter|toolbar/i.test(containerBlock);
+                            const isDialog = /<Dialog|<Modal/.test(containerBlock);
+                            const isButtonGroup = /IconButton|direction=["']row["']|items-center/.test(containerBlock);
+                            const isQuantityInput = /quantity|Quantity|increment|decrement/i.test(containerBlock);
+                            const isPriceInput = /price|Price|currency/i.test(containerBlock);
+                            const isCheckboxGroup = /Checkbox|Radio|FormControlLabel|Switch/.test(containerBlock);
+                            const isChipContainer = /flex-wrap|Chip|chip|option|tag/i.test(containerBlock);
+                            if (!isCompact &&
+                                !isDialog &&
+                                !isButtonGroup &&
+                                !isQuantityInput &&
+                                !isPriceInput &&
+                                !isCheckboxGroup &&
+                                !isChipContainer &&
+                                spacingNum < 2) {
+                                issues.push({
+                                    file,
+                                    line: index + 1,
+                                    type: "form-spacing-too-tight",
+                                    severity: "warning",
+                                    message: `Form uses ${spacing} (too tight for readability)`,
+                                    suggestion: "Use spacing={3} or gap-3 for standard forms, spacing={2} for compact",
+                                    snippet: line.trim().substring(0, 80),
+                                });
+                            }
+                            if (spacingNum > 4) {
+                                issues.push({
+                                    file,
+                                    line: index + 1,
+                                    type: "form-spacing-too-loose",
+                                    severity: "info",
+                                    message: `Form uses ${spacing} (may be too loose)`,
+                                    suggestion: "Use spacing={3} or gap-3 for standard forms",
+                                    snippet: line.trim().substring(0, 80),
+                                });
+                            }
+                        }
+                        // Check for mixed spacing approaches in same form
+                        const hasSpacingProp = /spacing=\{/.test(containerBlock);
+                        const hasGapClass = /gap-\d/.test(containerBlock);
+                        const hasGapStyle = /gap:\s*["']?var/.test(containerBlock);
+                        const approaches = [hasSpacingProp, hasGapClass, hasGapStyle].filter(Boolean).length;
+                        if (approaches > 1) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "form-mixed-spacing",
+                                severity: "info",
+                                message: "Form uses multiple spacing approaches",
+                                suggestion: "Use one consistent approach: spacing={3} for Stack, gap-3 for flex/grid",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        // Report inconsistent form spacing
+        if (formSpacings.size > 4) {
+            const sorted = [...formSpacings.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "form-spacing-inconsistency",
+                severity: "warning",
+                message: `Forms use ${formSpacings.size} different spacings: ${sorted.map(([s, c]) => `${s}(${c})`).join(", ")}`,
+                suggestion: "Standardize: spacing-3 for standard, spacing-2 for compact",
+            });
+        }
+        return {
+            name: "Form Field Density",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Run all checks
+     */
+    async runAll() {
+        const startTime = Date.now();
+        console.log(`\n${console_chars_1.emoji.target} UI STANDARDS ENFORCEMENT PREFLIGHT`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        const checks = [];
+        checks.push(await this.checkCardShadowConsistency());
+        checks.push(await this.checkTypographyHierarchy());
+        checks.push(await this.checkButtonSizeConsistency());
+        checks.push(await this.checkIconSizeConsistency());
+        checks.push(await this.checkAlertSpacing());
+        checks.push(await this.checkFormFieldDensity());
+        const totalDuration = Date.now() - startTime;
+        const allIssues = checks.flatMap((c) => c.issues);
+        const errors = allIssues.filter((i) => i.severity === "error").length;
+        const warnings = allIssues.filter((i) => i.severity === "warning").length;
+        const infos = allIssues.filter((i) => i.severity === "info").length;
+        const blockingFailed = checks.some((c) => c.blocking && !c.passed);
+        const summary = {
+            total: checks.length,
+            passed: checks.filter((c) => c.passed).length,
+            failed: checks.filter((c) => !c.passed).length,
+            errors,
+            warnings,
+        };
+        // Print results
+        checks.forEach((check) => {
+            const icon = check.passed ? `${console_chars_1.emoji.success}` : `${console_chars_1.emoji.error}`;
+            const suffix = check.blocking ? " [BLOCKING]" : "";
+            console.log(`${icon} ${check.name} (${check.issues.length} issues, ${(check.duration / 1000).toFixed(1)}s)${suffix}`);
+        });
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`Errors: ${errors} | Warnings: ${warnings} | Info: ${infos} | Time: ${(totalDuration / 1000).toFixed(1)}s`);
+        if (blockingFailed) {
+            console.log(`\n${console_chars_1.emoji.error} UI STANDARDS FAILED - ${errors} error(s)`);
+        }
+        else if (warnings > 0) {
+            console.log(`\n${console_chars_1.emoji.warning} UI STANDARDS PASSED - ${warnings} warning(s)`);
+        }
+        else {
+            console.log(`\n${console_chars_1.emoji.success} UI STANDARDS PASSED`);
+        }
+        // Print standards reference
+        console.log(`\n${console_chars_1.emoji.clipboard} UI STANDARDS REFERENCE:`);
+        console.log("   Card Shadows:    --shadow-md (primary), --shadow-sm (nested), --shadow-lg (elevated)");
+        console.log("   Typography:      h4 (page title), h6 (section), subtitle1 (subsection)");
+        console.log("   Button Sizes:    lg (CTA), default (secondary), sm (inline)");
+        console.log("   Icon Sizes:      16px (inline), 20px (button), 24px (card), 48px (hero)");
+        console.log("   Alert Spacing:   mb-4 (after alert), gap-3 (stacked alerts)");
+        console.log("   Form Density:    spacing-3 (standard), spacing-2 (compact)");
+        return {
+            module: "ui-standards-enforcement",
+            passed: !blockingFailed,
+            totalDuration,
+            checks,
+            summary,
+        };
+    }
+}
+exports.UIStandardsEnforcementModule = UIStandardsEnforcementModule;
+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 UIStandardsEnforcementModule({ verbose, parallel });
+    const runSingle = async (name, fn) => {
+        console.log(`\n${console_chars_1.emoji.target} UI STANDARDS: ${name.toUpperCase()}`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        const check = await fn();
+        const 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,
+        };
+        const icon = check.passed ? `${console_chars_1.emoji.success}` : `${console_chars_1.emoji.error}`;
+        console.log(`${icon} ${check.name} (${check.issues.length} issues, ${(check.duration / 1000).toFixed(1)}s)`);
+        if (check.issues.length > 0) {
+            check.issues.slice(0, 50).forEach((issue) => {
+                const color = issue.severity === "error"
+                    ? "\x1b[31m"
+                    : issue.severity === "warning"
+                        ? "\x1b[33m"
+                        : "\x1b[36m";
+                const reset = "\x1b[0m";
+                console.log(`   ${color}[${issue.severity.toUpperCase()}]${reset} ${issue.file}:${issue.line}`);
+                console.log(`   ${issue.message}`);
+                if (issue.suggestion)
+                    console.log(`   ${console_chars_1.chars.arrow} ${issue.suggestion}`);
+            });
+            if (check.issues.length > 50)
+                console.log(`   ... and ${check.issues.length - 50} more issues`);
+        }
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        return {
+            module: `ui-standards:${name}`,
+            passed: check.passed,
+            totalDuration: check.duration,
+            checks: [check],
+            summary,
+        };
+    };
+    let result;
+    switch (mode) {
+        case "shadows":
+            result = await runSingle("shadows", () => module.checkCardShadowConsistency());
+            break;
+        case "typography":
+            result = await runSingle("typography", () => module.checkTypographyHierarchy());
+            break;
+        case "buttons":
+            result = await runSingle("buttons", () => module.checkButtonSizeConsistency());
+            break;
+        case "icons":
+            result = await runSingle("icons", () => module.checkIconSizeConsistency());
+            break;
+        case "alerts":
+            result = await runSingle("alerts", () => module.checkAlertSpacing());
+            break;
+        case "forms":
+            result = await runSingle("forms", () => module.checkFormFieldDensity());
+            break;
+        default:
+            result = await module.runAll();
+            break;
+    }
+    process.exit(result.passed ? 0 : 1);
+}
+if (require.main === module) {
+    main();
+}
+//# sourceMappingURL=ui-standards-enforcement.js.map