@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-advanced-spacing.js

@@ -0,0 +1,1220 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Advanced UI Spacing Preflight
+ *
+ * Comprehensive spacing checks for complex UI patterns:
+ * 1. Table Spacing - cell padding, header/body separation, dense tables
+ * 2. Dialog/Modal Spacing - content padding, actions margin, form spacing
+ * 3. Button Group Consistency - gap consistency, alignment, order
+ * 4. Responsive Spacing Gaps - hardcoded gaps, mobile-friendly gaps
+ * 5. Empty State Spacing - vertical centering, container padding
+ * 6. Loading State Spacing - skeleton consistency, layout shift
+ * 7. Alert/Banner Spacing - margin from content, stacked alerts
+ * 8. Accordion Spacing - summary icons, nested indentation
+ * 9. Tab Panel Spacing - panel padding, content start spacing
+ * 10. Inline Form Elements - label/input gaps, form group spacing
+ *
+ * Usage:
+ *   pnpm preflight:ui-advanced-spacing              # All checks
+ *   pnpm preflight:ui-advanced-spacing tables       # Table spacing only
+ *   pnpm preflight:ui-advanced-spacing dialogs      # Dialog spacing only
+ *   pnpm preflight:ui-advanced-spacing buttons      # Button group consistency
+ *   pnpm preflight:ui-advanced-spacing responsive   # Responsive gaps only
+ *   pnpm preflight:ui-advanced-spacing empty-states # Empty state spacing
+ *   pnpm preflight:ui-advanced-spacing loading      # Loading state spacing
+ *   pnpm preflight:ui-advanced-spacing alerts       # Alert/banner spacing
+ *   pnpm preflight:ui-advanced-spacing accordions   # Accordion spacing
+ *   pnpm preflight:ui-advanced-spacing tabs         # Tab panel spacing
+ *   pnpm preflight:ui-advanced-spacing inline-forms # Inline form elements
+ */
+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.UIAdvancedSpacingModule = 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 design_tokens_1 = require("../../shared/design-tokens");
+const EXCLUDED_PATTERNS = [
+    "**/node_modules/**",
+    "**/.next/**",
+    "**/dist/**",
+    "**/build/**",
+    "**/scripts/**",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.stories.tsx",
+];
+// Get concurrency from shared config (respects PREFLIGHT_CONCURRENCY env var)
+const concurrencyConfig = (0, concurrency_config_1.getConcurrencyConfig)();
+class UIAdvancedSpacingModule {
+    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. Table Spacing Checks
+     * - Table cells with inconsistent padding
+     * - Tables without proper header/body separation
+     * - Dense tables without size="small" prop
+     * - Tables inside Cards without proper CardContent wrapper
+     */
+    async checkTableSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("<Table"))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check for Table without size prop when it has many rows
+                if (/<Table\b/.test(line) && !/<Table[^>]*size=/.test(line)) {
+                    const tableBlock = lines.slice(index, Math.min(index + 100, lines.length)).join("\n");
+                    const rowCount = (tableBlock.match(/<TableRow/g) || []).length;
+                    // Dense tables (10+ rows) should use size="small"
+                    if (rowCount >= 10) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "table-no-size-dense",
+                            severity: "info",
+                            message: `Table with ${rowCount} rows should consider size="small" for density`,
+                            suggestion: 'Add size="small" to Table for better data density',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for TableCell with inconsistent padding styles
+                if (/<TableCell/.test(line)) {
+                    const cellContext = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    // Check for mixed padding approaches (some inline, some className)
+                    const hasInlinePadding = /style=\{[^}]*padding/.test(cellContext);
+                    const hasClassPadding = /className=["'][^"']*p-\d/.test(cellContext);
+                    if (hasInlinePadding && hasClassPadding) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "table-cell-mixed-padding",
+                            severity: "warning",
+                            message: "TableCell uses both inline style and className for padding",
+                            suggestion: "Use consistent padding approach (prefer className or design tokens)",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for Table inside Card without CardContent
+                if (/<Card\b/.test(line) && !/<Card[^>]*>/.test(line)) {
+                    // Multi-line Card opening
+                }
+                else if (/<Card\b[^>]*>/.test(line)) {
+                    const cardBlock = lines.slice(index, Math.min(index + 50, lines.length)).join("\n");
+                    const cardEndMatch = cardBlock.indexOf("</Card>");
+                    const cardContent = cardEndMatch > 0 ? cardBlock.substring(0, cardEndMatch) : cardBlock;
+                    const hasTable = /<Table\b/.test(cardContent);
+                    const hasCardContent = /<CardContent/.test(cardContent);
+                    const hasTableContainer = /<TableContainer/.test(cardContent);
+                    // Table in Card without CardContent or TableContainer is problematic
+                    if (hasTable && !hasCardContent && !hasTableContainer) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "table-in-card-no-wrapper",
+                            severity: "warning",
+                            message: "Table inside Card without CardContent or TableContainer wrapper",
+                            suggestion: "Wrap Table in <TableContainer> or <CardContent> for proper spacing",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Table Spacing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 2. Dialog/Modal Content Spacing
+     * - DialogContent with p-0 followed by form fields (needs padding)
+     * - DialogActions without proper top margin from content
+     * - Modal forms without consistent internal spacing
+     */
+    async checkDialogSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("<Dialog"))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check for DialogContent with p-0 containing form fields
+                if (/<DialogContent[^>]*className=["'][^"']*p-0/.test(line)) {
+                    const dialogBlock = lines.slice(index, Math.min(index + 30, lines.length)).join("\n");
+                    const hasFormFields = /<(TextField|Select|Autocomplete|form)/.test(dialogBlock);
+                    // p-0 is fine for full-bleed content (images, maps) but not for forms
+                    if (hasFormFields) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "dialog-p0-with-forms",
+                            severity: "warning",
+                            message: "DialogContent with p-0 contains form fields (needs padding)",
+                            suggestion: 'Use className="p-6" for DialogContent with forms',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for DialogActions without proper spacing
+                if (/<DialogActions/.test(line)) {
+                    const actionsContext = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    const linesBefore = lines.slice(Math.max(0, index - 10), index).join("\n");
+                    // Check if DialogContent ends right before DialogActions without spacing
+                    const contentEndsAbove = /<\/DialogContent>/.test(linesBefore);
+                    const hasSpacingClass = /className=["'][^"']*(?:pt-|mt-|border-t)/.test(actionsContext);
+                    const hasSpacingStyle = /style=\{[^}]*(?:paddingTop|marginTop|borderTop)/.test(actionsContext);
+                    // DialogActions should have visual separation from content
+                    if (contentEndsAbove && !hasSpacingClass && !hasSpacingStyle) {
+                        // Check if DialogActions has default spacing (sx prop or built-in)
+                        const hasSxSpacing = /sx=\{[^}]*(?:pt|mt|borderTop)/.test(actionsContext);
+                        if (!hasSxSpacing) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "dialog-actions-no-spacing",
+                                severity: "info",
+                                message: "DialogActions may need visual separation from content",
+                                suggestion: 'Consider adding className="pt-4 border-t" or similar for visual separation',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for Dialog forms without Stack/consistent spacing
+                if (/<Dialog\b/.test(line)) {
+                    const dialogBlock = lines.slice(index, Math.min(index + 80, lines.length)).join("\n");
+                    const dialogEnd = dialogBlock.indexOf("</Dialog>");
+                    const dialogContent = dialogEnd > 0 ? dialogBlock.substring(0, dialogEnd) : dialogBlock;
+                    // Count form fields
+                    const formFieldCount = (dialogContent.match(/<(TextField|Select|Autocomplete)/g) || [])
+                        .length;
+                    if (formFieldCount >= 3) {
+                        // Multiple form fields should use Stack for consistent spacing
+                        const hasStack = /<Stack[^>]*spacing/.test(dialogContent);
+                        const hasGridSpacing = /<Grid[^>]*container[^>]*spacing/.test(dialogContent);
+                        const hasFlexGap = /className=["'][^"']*(?:gap-|space-y-)/.test(dialogContent);
+                        if (!hasStack && !hasGridSpacing && !hasFlexGap) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "dialog-form-no-spacing-system",
+                                severity: "info",
+                                message: `Dialog with ${formFieldCount} form fields lacks consistent spacing system`,
+                                suggestion: 'Use <Stack spacing={3}> or className="space-y-4" for form fields',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        return {
+            name: "Dialog/Modal Spacing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 3. Button Group Consistency
+     * - Multiple buttons without consistent gap
+     * - Action buttons at different positions (alignment)
+     * - Primary/secondary button order inconsistency
+     */
+    async checkButtonGroupConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        // Track gap usage across files for consistency analysis
+        const gapUsage = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("<Button"))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check for button containers with gap classes
+                if (/className=["'][^"']*(?:flex|inline-flex)[^"']*gap-(\d+)/.test(line)) {
+                    const gapMatch = line.match(/gap-(\d+)/);
+                    if (gapMatch) {
+                        const gap = gapMatch[1];
+                        gapUsage.set(gap, (gapUsage.get(gap) || 0) + 1);
+                    }
+                    // Check if this container has multiple buttons
+                    const containerBlock = lines.slice(index, Math.min(index + 15, lines.length)).join("\n");
+                    const buttonCount = (containerBlock.match(/<Button/g) || []).length;
+                    if (buttonCount >= 2) {
+                        // Check for primary/secondary order (primary should typically be last/right)
+                        const primaryFirst = /variant=["'](?:contained|default)["'][^]*variant=["'](?:outlined|text)["']/.test(containerBlock);
+                        const hasJustifyEnd = /justify-end|justify-between|ml-auto/.test(line);
+                        // In LTR layouts, primary action is typically on the right
+                        if (primaryFirst && hasJustifyEnd) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "button-order-primary-first",
+                                severity: "info",
+                                message: "Primary button appears before secondary (consider reversing for standard UX)",
+                                suggestion: "Place primary action button last (rightmost) in button groups",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for buttons without proper container gap
+                if (/<Button/.test(line)) {
+                    const linesBefore = lines.slice(Math.max(0, index - 3), index).join("\n");
+                    const linesAfter = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    // Check if there's another Button nearby without gap container
+                    const hasNearbyButton = /<Button/.test(linesAfter.split("\n").slice(1).join("\n"));
+                    const hasGapContainer = /gap-\d|space-x-\d|Stack/.test(linesBefore);
+                    if (hasNearbyButton && !hasGapContainer) {
+                        // Check for inline margin on buttons (anti-pattern)
+                        const hasInlineMargin = /className=["'][^"']*m[lr]-\d/.test(line) ||
+                            /style=\{[^}]*margin(?:Left|Right)/.test(line);
+                        if (hasInlineMargin) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "button-inline-margin",
+                                severity: "warning",
+                                message: "Button uses inline margin instead of container gap",
+                                suggestion: `Wrap buttons in flex container with gap-${design_tokens_1.GAPS.buttonGroup} instead of individual margins`,
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        // Report inconsistent gap usage across codebase
+        if (gapUsage.size > 2) {
+            const sortedGaps = [...gapUsage.entries()].sort((a, b) => b[1] - a[1]);
+            const mostCommon = sortedGaps[0][0];
+            const uncommonGaps = sortedGaps.filter(([gap]) => gap !== mostCommon && gap !== String(Number(mostCommon) + 1));
+            if (uncommonGaps.length > 0) {
+                issues.push({
+                    file: "codebase-wide",
+                    line: 0,
+                    type: "button-gap-inconsistency",
+                    severity: "info",
+                    message: `Button groups use inconsistent gaps: ${sortedGaps.map(([g, c]) => `gap-${g}(${c})`).join(", ")}`,
+                    suggestion: `Standardize on gap-${mostCommon} or gap-${Number(mostCommon) + 1} for button groups`,
+                });
+            }
+        }
+        return {
+            name: "Button Group Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 4. Responsive Spacing Gaps
+     * - Hardcoded gap values that don't scale responsively
+     * - Grid gaps that are too tight on mobile
+     * - Missing responsive gap classes
+     */
+    async checkResponsiveGaps() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check for grid containers with small gaps that might be too tight on mobile
+                if (/className=["'][^"']*grid[^"']*gap-[12][^0-9]/.test(line)) {
+                    const hasResponsiveGap = /(?:sm|md|lg|xl):gap-/.test(line);
+                    const isSmallGrid = /grid-cols-[2-6]/.test(line);
+                    if (isSmallGrid && !hasResponsiveGap) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "grid-tight-gap-no-responsive",
+                            severity: "info",
+                            message: "Grid with gap-1 or gap-2 may be too tight on mobile",
+                            suggestion: "Consider responsive gaps: gap-2 md:gap-4 for better mobile spacing",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for large gaps that don't scale down on mobile
+                if (/className=["'][^"']*gap-[89]|gap-1[0-9]/.test(line)) {
+                    const hasResponsiveGap = /(?:sm|md|lg|xl):gap-/.test(line);
+                    if (!hasResponsiveGap) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "large-gap-no-responsive",
+                            severity: "info",
+                            message: "Large gap (8+) without responsive variant may waste mobile space",
+                            suggestion: "Consider responsive gaps: gap-4 md:gap-8 for mobile optimization",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for inline style gaps (should use Tailwind for responsiveness)
+                if (/style=\{[^}]*gap:\s*["']?\d+px/.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "inline-gap-not-responsive",
+                        severity: "warning",
+                        message: "Inline style gap cannot be responsive",
+                        suggestion: "Use Tailwind gap classes (gap-4 md:gap-6) for responsive spacing",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check for card grids without responsive gaps
+                if (/className=["'][^"']*grid[^"']*grid-cols-/.test(line)) {
+                    const hasResponsiveCols = /(?:sm|md|lg|xl):grid-cols-/.test(line);
+                    const hasResponsiveGap = /(?:sm|md|lg|xl):gap-/.test(line);
+                    // If columns are responsive, gaps should be too
+                    if (hasResponsiveCols && !hasResponsiveGap) {
+                        const gapMatch = line.match(/gap-(\d+)/);
+                        if (gapMatch && Number(gapMatch[1]) >= 4) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "responsive-cols-static-gap",
+                                severity: "info",
+                                message: "Grid has responsive columns but static gap",
+                                suggestion: "Add responsive gap to match column breakpoints",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        return {
+            name: "Responsive Spacing Gaps",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 5. Empty State Spacing
+     * - Empty state components without proper vertical centering
+     * - Empty states with inconsistent padding from container edges
+     */
+    async checkEmptyStateSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check for empty state patterns (common indicators)
+                const isEmptyStateStart = /(?:EmptyState|NoResults|NoData|Empty|NotFound)/.test(line) ||
+                    /className=["'][^"']*(?:empty|no-results)/.test(line);
+                if (isEmptyStateStart || /<Box[^>]*>/.test(line)) {
+                    const blockContext = lines.slice(index, Math.min(index + 20, lines.length)).join("\n");
+                    // Detect empty state pattern: icon + text + optional action
+                    const hasEmptyIcon = /(?:Inbox|Search|FileX|AlertCircle|Package)(?:Icon)?/.test(blockContext) ||
+                        /lucide-react/.test(blockContext);
+                    const hasEmptyText = /(?:No |Nothing |Empty|not found|no results)/i.test(blockContext);
+                    if (hasEmptyIcon && hasEmptyText) {
+                        // Check for proper centering
+                        const hasCentering = /(?:items-center|justify-center|text-center|mx-auto)/.test(blockContext) ||
+                            /(?:alignItems|justifyContent):\s*["']center["']/.test(blockContext);
+                        const hasVerticalPadding = /(?:py-|pt-|pb-)\d+/.test(blockContext) ||
+                            /(?:paddingTop|paddingBottom|padding):\s*["']var\(--spacing/.test(blockContext);
+                        if (!hasCentering) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "empty-state-no-centering",
+                                severity: "warning",
+                                message: "Empty state lacks proper centering",
+                                suggestion: 'Add className="flex flex-col items-center justify-center text-center"',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                        if (!hasVerticalPadding) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "empty-state-no-padding",
+                                severity: "info",
+                                message: "Empty state may need vertical padding for visual balance",
+                                suggestion: 'Add className="py-12" or similar for proper vertical spacing',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for UnifiedEmptyState usage (should be preferred)
+                if (/(?:No |Nothing |Empty|not found)/i.test(line) && /<Typography/.test(line)) {
+                    const blockContext = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    const usesUnifiedEmptyState = /UnifiedEmptyState/.test(content);
+                    if (!usesUnifiedEmptyState && /variant=["'](?:h6|body1)["']/.test(blockContext)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "empty-state-not-unified",
+                            severity: "info",
+                            message: "Consider using UnifiedEmptyState component for consistency",
+                            suggestion: 'Import and use <UnifiedEmptyState title="..." /> for standardized empty states',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Empty State Spacing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 6. Loading State Spacing
+     * - Skeleton loaders with different spacing than actual content
+     * - Loading states that cause layout shift
+     */
+    async checkLoadingStateSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("Skeleton") && !content.includes("loading"))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check for Skeleton without explicit dimensions (causes layout shift)
+                if (/<(?:Skeleton|UnifiedSkeleton)\b/.test(line)) {
+                    const skeletonContext = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    const hasWidth = /width[=:]/.test(skeletonContext);
+                    const hasHeight = /height[=:]/.test(skeletonContext);
+                    const isTextVariant = /variant=["']text["']/.test(skeletonContext);
+                    const isCircularVariant = /variant=["']circular["']/.test(skeletonContext);
+                    // Text skeletons need width, circular need both, rectangular need both
+                    if (!isTextVariant && !isCircularVariant && (!hasWidth || !hasHeight)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "skeleton-missing-dimensions",
+                            severity: "warning",
+                            message: "Skeleton without explicit dimensions may cause layout shift",
+                            suggestion: "Add width and height props to prevent content jumping",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    if (isCircularVariant && (!hasWidth || !hasHeight)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "skeleton-circular-no-size",
+                            severity: "warning",
+                            message: "Circular skeleton needs width and height for proper sizing",
+                            suggestion: "Add width={40} height={40} or similar dimensions",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for loading containers without min-height (causes collapse)
+                if (/(?:isLoading|loading)\s*(?:&&|\?)/.test(line)) {
+                    const loadingBlock = lines.slice(index, Math.min(index + 20, lines.length)).join("\n");
+                    const hasMinHeight = /min-h-|minHeight/.test(loadingBlock);
+                    const hasFixedHeight = /h-\[|height:/.test(loadingBlock);
+                    // Loading states should maintain container height
+                    if (!hasMinHeight && !hasFixedHeight) {
+                        const hasSkeleton = /Skeleton/.test(loadingBlock);
+                        if (hasSkeleton) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "loading-no-min-height",
+                                severity: "info",
+                                message: "Loading state container may collapse without min-height",
+                                suggestion: "Add min-h-[200px] or similar to prevent layout shift",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for loading.tsx files with different grid structure than page
+                if (file.endsWith("loading.tsx")) {
+                    const hasGrid = /grid-cols-/.test(content);
+                    const gridMatch = content.match(/grid-cols-(\d+)/g);
+                    if (gridMatch && gridMatch.length > 0) {
+                        // Check if responsive breakpoints match typical page patterns
+                        const hasResponsiveGrid = /(?:sm|md|lg|xl):grid-cols-/.test(content);
+                        if (!hasResponsiveGrid && hasGrid) {
+                            issues.push({
+                                file,
+                                line: 1,
+                                type: "loading-grid-not-responsive",
+                                severity: "info",
+                                message: "Loading skeleton grid may not match page responsive breakpoints",
+                                suggestion: "Ensure loading.tsx grid matches page.tsx responsive columns",
+                                snippet: "loading.tsx",
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        return {
+            name: "Loading State Spacing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 7. Alert/Banner Spacing
+     * - Alerts without proper margin from surrounding content
+     * - Multiple alerts stacked without consistent gap
+     */
+    async checkAlertSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("<Alert"))
+                continue;
+            const lines = content.split("\n");
+            let alertCount = 0;
+            let lastAlertLine = -1;
+            lines.forEach((line, index) => {
+                if (/<Alert\b/.test(line)) {
+                    alertCount++;
+                    // Check for Alert without margin
+                    const alertContext = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    const hasMargin = /className=["'][^"']*m[btlrxy]-\d/.test(alertContext) ||
+                        /style=\{[^}]*margin/.test(alertContext);
+                    // Check what comes before/after
+                    const linesBefore = lines.slice(Math.max(0, index - 3), index).join("\n");
+                    const linesAfter = lines.slice(index + 1, Math.min(index + 5, lines.length)).join("\n");
+                    const hasContentBefore = /<(?:Typography|Box|div|form|Card)/.test(linesBefore);
+                    const hasContentAfter = /<(?:Typography|Box|div|form|Card|TextField)/.test(linesAfter);
+                    // Alert between content needs margin
+                    if ((hasContentBefore || hasContentAfter) && !hasMargin) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "alert-no-margin",
+                            severity: "warning",
+                            message: "Alert without margin may crowd surrounding content",
+                            suggestion: 'Add className="mb-4" or "my-4" for proper spacing',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check for stacked alerts without consistent gap
+                    if (lastAlertLine >= 0 && index - lastAlertLine <= 5) {
+                        const betweenAlerts = lines.slice(lastAlertLine + 1, index).join("\n");
+                        const hasGapBetween = /className=["'][^"']*(?:space-y-|gap-)/.test(linesBefore) ||
+                            /mb-\d/.test(betweenAlerts);
+                        if (!hasGapBetween) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "stacked-alerts-no-gap",
+                                severity: "info",
+                                message: "Stacked alerts without consistent gap",
+                                suggestion: 'Wrap alerts in <Stack spacing={2}> or add className="space-y-2"',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                    lastAlertLine = index;
+                }
+            });
+            // Check for multiple alerts that should use a container
+            if (alertCount >= 3) {
+                const hasAlertContainer = /className=["'][^"']*(?:space-y-|gap-)/.test(content) ||
+                    /<Stack[^>]*spacing/.test(content);
+                if (!hasAlertContainer) {
+                    issues.push({
+                        file,
+                        line: 1,
+                        type: "multiple-alerts-no-container",
+                        severity: "info",
+                        message: `File has ${alertCount} alerts - consider using a spacing container`,
+                        suggestion: "Group alerts in <Stack spacing={2}> for consistent spacing",
+                    });
+                }
+            }
+        }
+        return {
+            name: "Alert/Banner Spacing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 8. Accordion Content Spacing
+     * - AccordionSummary with icons but no gap
+     * - AccordionDetails with nested accordions lacking proper indentation
+     */
+    async checkAccordionSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("<Accordion"))
+                continue;
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check AccordionSummary with icon but no gap
+                if (/<AccordionSummary/.test(line)) {
+                    const summaryBlock = lines.slice(index, Math.min(index + 15, lines.length)).join("\n");
+                    const summaryEnd = summaryBlock.indexOf("</AccordionSummary>");
+                    const summaryContent = summaryEnd > 0 ? summaryBlock.substring(0, summaryEnd) : summaryBlock;
+                    // Check for icon + text pattern
+                    const hasIcon = /Icon|<svg|lucide/.test(summaryContent);
+                    const hasText = /<Typography|<span|<div/.test(summaryContent);
+                    const hasGap = /gap-\d|space-x-\d|className=["'][^"']*gap/.test(summaryContent) ||
+                        /style=\{[^}]*gap/.test(summaryContent);
+                    if (hasIcon && hasText && !hasGap) {
+                        // Check if wrapped in flex container
+                        const hasFlexWrapper = /className=["'][^"']*flex/.test(summaryContent);
+                        if (hasFlexWrapper) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "accordion-summary-no-gap",
+                                severity: "warning",
+                                message: "AccordionSummary has icon and text in flex container without gap",
+                                suggestion: `Add gap-${design_tokens_1.GAPS.iconTextTight} or gap-${design_tokens_1.GAPS.iconText} to flex container for proper icon-text spacing`,
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check AccordionDetails for nested accordions
+                if (/<AccordionDetails/.test(line)) {
+                    const detailsBlock = lines.slice(index, Math.min(index + 50, lines.length)).join("\n");
+                    const detailsEnd = detailsBlock.indexOf("</AccordionDetails>");
+                    const detailsContent = detailsEnd > 0 ? detailsBlock.substring(0, detailsEnd) : detailsBlock;
+                    // Check for nested Accordion
+                    const hasNestedAccordion = /<Accordion\b/.test(detailsContent.substring(20)); // Skip opening tag
+                    if (hasNestedAccordion) {
+                        // Nested accordions should have indentation/margin
+                        const hasIndentation = /(?:ml-|pl-|paddingLeft|marginLeft)\d/.test(detailsContent) ||
+                            /className=["'][^"']*(?:ml-|pl-)/.test(detailsContent);
+                        if (!hasIndentation) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "nested-accordion-no-indent",
+                                severity: "info",
+                                message: "Nested accordion without indentation may confuse hierarchy",
+                                suggestion: 'Add className="ml-4" or "pl-4" to nested accordion container',
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                    // Check for AccordionDetails starting with form fields (needs top margin)
+                    const startsWithForm = /^[\s\n]*<(?:TextField|Select|Grid|form)/m.test(detailsContent.substring(20));
+                    const hasTopMargin = /marginTop|mt-|pt-/.test(detailsContent.substring(0, 100));
+                    if (startsWithForm && !hasTopMargin) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "accordion-details-form-no-margin",
+                            severity: "warning",
+                            message: "AccordionDetails starts with form fields without top margin",
+                            suggestion: 'Wrap content in <Box style={{ marginTop: "var(--spacing-4)" }}>',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Accordion Spacing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 9. Tab Panel Spacing
+     * - Tab panels with inconsistent padding
+     * - Tab content that starts with different element types having different spacing
+     */
+    async checkTabPanelSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (!content.includes("<Tab") && !content.includes("tabValue"))
+                continue;
+            const lines = content.split("\n");
+            // Track tab panel patterns for consistency
+            const tabPanelPaddings = [];
+            lines.forEach((line, index) => {
+                // Check for tab panel conditional rendering
+                if (/tabValue\s*===\s*\d+\s*&&/.test(line) || /value\s*===\s*\d+\s*&&/.test(line)) {
+                    const panelBlock = lines.slice(index, Math.min(index + 30, lines.length)).join("\n");
+                    // Extract padding from panel container
+                    const paddingMatch = panelBlock.match(/className=["'][^"']*p-(\d+)/);
+                    if (paddingMatch) {
+                        tabPanelPaddings.push(paddingMatch[1]);
+                    }
+                    // Check if panel starts with form fields without header
+                    const panelContent = panelBlock.split(/\{tabValue|\{value/)[0] || panelBlock;
+                    const startsWithForm = /<(?:TextField|Select|Autocomplete|Grid[^>]*container)/.test(panelContent.substring(0, 200));
+                    const hasHeader = /<Typography[^>]*variant=["']h[456]/.test(panelContent.substring(0, 200));
+                    if (startsWithForm && !hasHeader) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "tab-panel-form-no-header",
+                            severity: "info",
+                            message: "Tab panel starts with form fields without section header",
+                            suggestion: "Add a Typography header before form fields for context",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check TabPanel component usage
+                if (/<TabPanel/.test(line)) {
+                    const panelContext = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    // Check for padding
+                    const hasPadding = /className=["'][^"']*p-\d/.test(panelContext) ||
+                        /style=\{[^}]*padding/.test(panelContext);
+                    if (!hasPadding) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "tab-panel-no-padding",
+                            severity: "info",
+                            message: "TabPanel without explicit padding",
+                            suggestion: 'Add className="p-4" or "p-6" for consistent panel padding',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for Tabs without proper spacing from content below
+                if (/<Tabs\b/.test(line)) {
+                    const afterTabs = lines.slice(index + 1, Math.min(index + 10, lines.length)).join("\n");
+                    const tabsEndIndex = afterTabs.indexOf("</Tabs>");
+                    if (tabsEndIndex > 0) {
+                        const afterTabsClose = afterTabs.substring(tabsEndIndex + 7, tabsEndIndex + 100);
+                        const hasSpacingAfter = /className=["'][^"']*(?:mt-|pt-)/.test(afterTabsClose) ||
+                            /style=\{[^}]*(?:marginTop|paddingTop)/.test(afterTabsClose) ||
+                            /<Box[^>]*className=["'][^"']*(?:mt-|pt-)/.test(afterTabsClose);
+                        // Content after Tabs should have top spacing
+                        if (!hasSpacingAfter && /<(?:Box|div|Card|Typography)/.test(afterTabsClose)) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "tabs-no-spacing-after",
+                                severity: "info",
+                                message: "Content after Tabs may need top spacing",
+                                suggestion: "Add mt-4 or pt-4 to content container after Tabs",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+            // Check for inconsistent tab panel padding in same file
+            if (tabPanelPaddings.length >= 2) {
+                const uniquePaddings = [...new Set(tabPanelPaddings)];
+                if (uniquePaddings.length > 1) {
+                    issues.push({
+                        file,
+                        line: 1,
+                        type: "tab-panel-inconsistent-padding",
+                        severity: "warning",
+                        message: `Tab panels have inconsistent padding: p-${uniquePaddings.join(", p-")}`,
+                        suggestion: "Use consistent padding across all tab panels",
+                    });
+                }
+            }
+        }
+        return {
+            name: "Tab Panel Spacing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 10. Inline Form Elements
+     * - Label + Input on same line without proper gap
+     * - Inline form groups (like date range pickers) with inconsistent internal spacing
+     */
+    async checkInlineFormSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check for inline label + input patterns
+                if (/<(?:label|Label)\b/.test(line)) {
+                    const labelBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    // Check if label and input are on same line or in flex container
+                    const hasInlineInput = /<(?:input|Input|TextField|Select)/.test(labelBlock);
+                    const isFlexRow = /className=["'][^"']*(?:flex|inline-flex)[^"']*(?:items-center|flex-row)/.test(labelBlock) || /display:\s*["']?flex/.test(labelBlock);
+                    if (hasInlineInput && isFlexRow) {
+                        const hasGap = /gap-\d|space-x-\d/.test(labelBlock) || /style=\{[^}]*gap/.test(labelBlock);
+                        if (!hasGap) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "inline-label-input-no-gap",
+                                severity: "warning",
+                                message: "Inline label and input without gap",
+                                suggestion: `Add gap-${design_tokens_1.GAPS.iconTextTight} or gap-${design_tokens_1.GAPS.iconText} to flex container`,
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for date range patterns (two date inputs side by side)
+                if (/(?:DatePicker|date|Date)/.test(line)) {
+                    const dateBlock = lines.slice(index, Math.min(index + 15, lines.length)).join("\n");
+                    // Look for "from/to" or "start/end" date patterns
+                    const isDateRange = /(?:from|start|begin).*(?:to|end|until)/i.test(dateBlock) ||
+                        /DatePicker[^]*DatePicker/.test(dateBlock);
+                    if (isDateRange) {
+                        const hasGap = /gap-\d|space-x-\d/.test(dateBlock);
+                        const hasSeparator = /(?:—|–|-|to|${chars.arrow})/.test(dateBlock);
+                        if (!hasGap && !hasSeparator) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "date-range-no-gap",
+                                severity: "info",
+                                message: "Date range inputs may need gap or separator",
+                                suggestion: "Add gap-4 between date inputs or a visual separator",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for inline form groups (multiple inputs in a row)
+                if (/className=["'][^"']*(?:flex|inline-flex)[^"']*(?:items-center|flex-row)/.test(line)) {
+                    const flexBlock = lines.slice(index, Math.min(index + 20, lines.length)).join("\n");
+                    // Count form inputs in this flex container
+                    const inputCount = (flexBlock.match(/<(?:TextField|Select|Input|Autocomplete)/g) || [])
+                        .length;
+                    if (inputCount >= 2) {
+                        const hasGap = /gap-\d/.test(line);
+                        const hasSpaceX = /space-x-\d/.test(line);
+                        if (!hasGap && !hasSpaceX) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "inline-form-group-no-gap",
+                                severity: "warning",
+                                message: `Inline form group with ${inputCount} inputs lacks gap`,
+                                suggestion: `Add gap-${design_tokens_1.GAPS.iconText} or gap-${design_tokens_1.GAPS.formField} to flex container for proper input spacing`,
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for search + button inline patterns
+                if (/<TextField[^>]*(?:search|Search)/.test(line) ||
+                    /placeholder=["'][^"']*[Ss]earch/.test(line)) {
+                    const searchBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    const hasAdjacentButton = /<Button/.test(searchBlock);
+                    if (hasAdjacentButton) {
+                        const linesBefore = lines.slice(Math.max(0, index - 3), index).join("\n");
+                        const hasGapContainer = /gap-\d|space-x-\d/.test(linesBefore);
+                        if (!hasGapContainer) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "search-button-no-gap",
+                                severity: "info",
+                                message: "Search input with adjacent button may need gap container",
+                                suggestion: "Wrap in flex container with gap-2 for proper spacing",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        return {
+            name: "Inline Form Elements",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Run all checks
+     */
+    async runAll() {
+        const startTime = Date.now();
+        console.log(`\n${console_chars_1.emoji.target} ADVANCED UI SPACING PREFLIGHT`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        const checks = [];
+        checks.push(await this.checkTableSpacing());
+        checks.push(await this.checkDialogSpacing());
+        checks.push(await this.checkButtonGroupConsistency());
+        checks.push(await this.checkResponsiveGaps());
+        checks.push(await this.checkEmptyStateSpacing());
+        checks.push(await this.checkLoadingStateSpacing());
+        checks.push(await this.checkAlertSpacing());
+        checks.push(await this.checkAccordionSpacing());
+        checks.push(await this.checkTabPanelSpacing());
+        checks.push(await this.checkInlineFormSpacing());
+        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}`
+                : check.blocking
+                    ? `${console_chars_1.emoji.error}`
+                    : `${console_chars_1.emoji.warning}`;
+            console.log(`${icon} ${check.name} (${check.issues.length} issues, ${(check.duration / 1000).toFixed(1)}s)`);
+            if (this.verbose && check.issues.length > 0) {
+                check.issues.slice(0, 10).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 > 10) {
+                    console.log(`   ... and ${check.issues.length - 10} more issues`);
+                }
+            }
+        });
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`Errors: ${errors} | Warnings: ${warnings} | Info: ${infos} | Time: ${(totalDuration / 1000).toFixed(1)}s`);
+        if (errors === 0 && warnings === 0) {
+            console.log(`\n${console_chars_1.emoji.success} ADVANCED UI SPACING PASSED`);
+        }
+        else if (errors === 0) {
+            console.log(`\n${console_chars_1.emoji.warning} ADVANCED UI SPACING - ${warnings} warning(s), ${infos} info(s)`);
+        }
+        else {
+            console.log(`\n${console_chars_1.emoji.error} ADVANCED UI SPACING FAILED - ${errors} error(s)`);
+        }
+        return {
+            module: "ui-advanced-spacing",
+            passed: !blockingFailed,
+            totalDuration,
+            checks,
+            summary,
+        };
+    }
+    /**
+     * Print detailed results
+     */
+    printResults(result) {
+        result.checks.forEach((check) => {
+            if (check.issues.length > 0) {
+                console.log(`\n${console_chars_1.emoji.clipboard} ${check.name}:`);
+                check.issues.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}`);
+                });
+            }
+        });
+    }
+}
+exports.UIAdvancedSpacingModule = UIAdvancedSpacingModule;
+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 UIAdvancedSpacingModule({ verbose, parallel });
+    const runSingle = async (name, fn) => {
+        console.log(`\n${console_chars_1.emoji.target} ADVANCED UI SPACING: ${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}`
+            : check.blocking
+                ? `${console_chars_1.emoji.error}`
+                : `${console_chars_1.emoji.warning}`;
+        console.log(`${icon} ${check.name} (${check.issues.length} issues, ${(check.duration / 1000).toFixed(1)}s)`);
+        if (check.issues.length > 0) {
+            check.issues.slice(0, 30).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 > 30) {
+                console.log(`   ... and ${check.issues.length - 30} more issues`);
+            }
+        }
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`Errors: ${summary.errors} | Warnings: ${summary.warnings}`);
+        console.log(check.passed
+            ? `\n${console_chars_1.emoji.success} PASSED`
+            : `\n${check.blocking ? "${emoji.error} FAILED" : "${emoji.warning} WARNINGS"}`);
+        return {
+            module: `ui-advanced-spacing:${name}`,
+            passed: check.passed,
+            totalDuration: check.duration,
+            checks: [check],
+            summary,
+        };
+    };
+    let result;
+    switch (mode) {
+        case "tables":
+            result = await runSingle("tables", () => module.checkTableSpacing());
+            break;
+        case "dialogs":
+            result = await runSingle("dialogs", () => module.checkDialogSpacing());
+            break;
+        case "buttons":
+            result = await runSingle("buttons", () => module.checkButtonGroupConsistency());
+            break;
+        case "responsive":
+            result = await runSingle("responsive", () => module.checkResponsiveGaps());
+            break;
+        case "empty-states":
+            result = await runSingle("empty-states", () => module.checkEmptyStateSpacing());
+            break;
+        case "loading":
+            result = await runSingle("loading", () => module.checkLoadingStateSpacing());
+            break;
+        case "alerts":
+            result = await runSingle("alerts", () => module.checkAlertSpacing());
+            break;
+        case "accordions":
+            result = await runSingle("accordions", () => module.checkAccordionSpacing());
+            break;
+        case "tabs":
+            result = await runSingle("tabs", () => module.checkTabPanelSpacing());
+            break;
+        case "inline-forms":
+            result = await runSingle("inline-forms", () => module.checkInlineFormSpacing());
+            break;
+        default:
+            result = await module.runAll();
+            break;
+    }
+    // Print detailed results if verbose
+    if (verbose) {
+        module.printResults(result);
+    }
+    process.exit(result.passed ? 0 : 1);
+}
+if (require.main === module) {
+    main();
+}
+//# sourceMappingURL=ui-advanced-spacing.js.map