@empline/preflight 1.1.11 → 1.1.13

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

@@ -0,0 +1,982 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Advanced UI Consistency Preflight
+ *
+ * Comprehensive consistency checks:
+ * 1. Tooltip Consistency - Delay, placement, styling
+ * 2. Modal/Drawer Sizing - maxWidth, consistent sizing
+ * 3. Pagination Consistency - Different patterns across tables
+ * 4. Avatar Sizing - Inconsistent sizes
+ * 5. Badge Positioning - Proper overlap positioning
+ * 5b. UI Control Gap Spacing - Uniform gaps in SegmentedControl, Tabs, Chips, Button groups
+ * 6. Divider Usage - Missing dividers between sections
+ * 7. Transition Consistency - Hardcoded vs design tokens
+ * 8. Overflow Handling - Text overflow without ellipsis
+ *
+ * Usage:
+ *   pnpm preflight:ui-consistency              # All checks
+ *   pnpm preflight:ui-consistency tooltips     # Tooltip only
+ *   pnpm preflight:ui-consistency modals       # Modal sizing only
+ *   pnpm preflight:ui-consistency pagination   # Pagination only
+ *   pnpm preflight:ui-consistency avatars      # Avatar sizing only
+ *   pnpm preflight:ui-consistency badges       # Badge positioning only
+ *   pnpm preflight:ui-consistency gaps         # UI control gap spacing only
+ *   pnpm preflight:ui-consistency dividers     # Divider usage only
+ *   pnpm preflight:ui-consistency transitions  # Transition consistency only
+ *   pnpm preflight:ui-consistency overflow     # Overflow handling 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.UIConsistencyAdvancedModule = 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",
+];
+// Get concurrency from shared config (respects PREFLIGHT_CONCURRENCY env var)
+const concurrencyConfig = (0, concurrency_config_1.getConcurrencyConfig)();
+class UIConsistencyAdvancedModule {
+    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. Tooltip Consistency
+     * - Tooltips without delay
+     * - Inconsistent placement
+     * - Missing arrow
+     */
+    async checkTooltipConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        const placements = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (/<Tooltip/.test(line)) {
+                    const tooltipBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    // Track placement usage
+                    const placementMatch = tooltipBlock.match(/placement=["']([^"']+)["']/);
+                    if (placementMatch) {
+                        const placement = placementMatch[1];
+                        placements.set(placement, (placements.get(placement) || 0) + 1);
+                    }
+                    // Check for enterDelay (should have some delay for UX)
+                    const hasEnterDelay = /enterDelay=/.test(tooltipBlock);
+                    const hasDelayProp = /delay=/.test(tooltipBlock);
+                    if (!hasEnterDelay && !hasDelayProp) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "tooltip-no-delay",
+                            severity: "info",
+                            message: "Tooltip without enterDelay (may appear too quickly)",
+                            suggestion: "Add enterDelay={300} for better UX",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check for arrow prop
+                    const hasArrow = /arrow/.test(tooltipBlock);
+                    if (!hasArrow) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "tooltip-no-arrow",
+                            severity: "info",
+                            message: "Tooltip without arrow (harder to associate with trigger)",
+                            suggestion: "Add arrow prop for visual connection",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        // Report inconsistent placement usage
+        if (placements.size > 3) {
+            const sortedPlacements = [...placements.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "tooltip-placement-inconsistency",
+                severity: "info",
+                message: `Tooltips use ${placements.size} different placements: ${sortedPlacements.map(([p, c]) => `${p}(${c})`).join(", ")}`,
+                suggestion: "Standardize on top/bottom for most tooltips",
+            });
+        }
+        return {
+            name: "Tooltip Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 2. Modal/Drawer Sizing
+     * - Dialogs without maxWidth
+     * - Inconsistent drawer widths
+     */
+    async checkModalSizing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        const dialogMaxWidths = new Map();
+        const drawerWidths = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check Dialog maxWidth
+                if (/<Dialog\b/.test(line)) {
+                    const dialogBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    const maxWidthMatch = dialogBlock.match(/maxWidth=["']([^"']+)["']/);
+                    if (maxWidthMatch) {
+                        dialogMaxWidths.set(maxWidthMatch[1], (dialogMaxWidths.get(maxWidthMatch[1]) || 0) + 1);
+                    }
+                    else if (!dialogBlock.includes("fullScreen")) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "dialog-no-maxwidth",
+                            severity: "info",
+                            message: "Dialog without maxWidth prop",
+                            suggestion: 'Add maxWidth="sm" or "md" for consistent sizing',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check Drawer width
+                if (/<Drawer\b/.test(line)) {
+                    const drawerBlock = lines.slice(index, Math.min(index + 20, lines.length)).join("\n");
+                    const widthMatch = drawerBlock.match(/width[=:]\s*["']?(\d+(?:px|rem|%)?|var\([^)]+\))["']?/);
+                    if (widthMatch) {
+                        drawerWidths.set(widthMatch[1], (drawerWidths.get(widthMatch[1]) || 0) + 1);
+                    }
+                    // Check for hardcoded pixel widths
+                    if (/width:\s*["']?\d+px/.test(drawerBlock)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "drawer-hardcoded-width",
+                            severity: "info",
+                            message: "Drawer with hardcoded pixel width",
+                            suggestion: "Use design token var(--sidebar-width) or responsive width",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Modal/Drawer Sizing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 3. Pagination Consistency
+     * - Different pagination patterns
+     * - Missing page size options
+     */
+    async checkPaginationConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        let paginationPatterns = 0;
+        let tablePaginationCount = 0;
+        let customPaginationCount = 0;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Count different pagination approaches
+            if (/<TablePagination/.test(content))
+                tablePaginationCount++;
+            if (/<Pagination\b/.test(content))
+                customPaginationCount++;
+            lines.forEach((line, index) => {
+                // Check for pagination without page size selector
+                if (/<(?:TablePagination|Pagination)\b/.test(line)) {
+                    const paginationBlock = lines.slice(index, Math.min(index + 15, lines.length)).join("\n");
+                    const hasRowsPerPage = /rowsPerPage|pageSize|perPage/.test(paginationBlock);
+                    if (!hasRowsPerPage) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "pagination-no-page-size",
+                            severity: "info",
+                            message: "Pagination without page size selector",
+                            suggestion: "Add rowsPerPageOptions for user control",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for manual pagination (page buttons without component)
+                if (/page\s*[<>=]+\s*\d|setPage\(/.test(line) && !content.includes("Pagination")) {
+                    paginationPatterns++;
+                }
+            });
+        }
+        // Report mixed pagination approaches
+        if (tablePaginationCount > 0 && customPaginationCount > 0) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "mixed-pagination-components",
+                severity: "info",
+                message: `Mixed pagination: TablePagination(${tablePaginationCount}) and Pagination(${customPaginationCount})`,
+                suggestion: "Standardize on one pagination component",
+            });
+        }
+        return {
+            name: "Pagination Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 4. Avatar Sizing
+     * - Inconsistent avatar sizes
+     * - Missing fallback
+     */
+    async checkAvatarSizing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        const avatarSizes = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (/<Avatar\b/.test(line)) {
+                    const avatarBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    // Track sizes
+                    const sizeMatch = avatarBlock.match(/(?:width|height|size)[=:]\s*["']?(\d+(?:px)?|var\([^)]+\))["']?/);
+                    if (sizeMatch) {
+                        avatarSizes.set(sizeMatch[1], (avatarSizes.get(sizeMatch[1]) || 0) + 1);
+                    }
+                    // Check for fallback (alt or children)
+                    const hasAlt = /alt=/.test(avatarBlock);
+                    const hasChildren = /<Avatar[^>]*>[^<]+<\/Avatar>/.test(avatarBlock);
+                    const hasSrc = /src=/.test(avatarBlock);
+                    if (hasSrc && !hasAlt && !hasChildren) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "avatar-no-fallback",
+                            severity: "warning",
+                            message: "Avatar with src but no alt or fallback content",
+                            suggestion: 'Add alt="User name" or fallback initials as children',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check for hardcoded pixel sizes
+                    if (/(?:width|height):\s*["']?\d+px/.test(avatarBlock)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "avatar-hardcoded-size",
+                            severity: "info",
+                            message: "Avatar with hardcoded pixel size",
+                            suggestion: "Use consistent sizes: 32px (sm), 40px (md), 48px (lg)",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        // Report inconsistent sizes
+        if (avatarSizes.size > 4) {
+            const sortedSizes = [...avatarSizes.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "avatar-size-inconsistency",
+                severity: "info",
+                message: `Avatars use ${avatarSizes.size} different sizes: ${sortedSizes
+                    .slice(0, 5)
+                    .map(([s, c]) => `${s}(${c})`)
+                    .join(", ")}`,
+                suggestion: "Standardize on 32px, 40px, 48px, 64px sizes",
+            });
+        }
+        return {
+            name: "Avatar Sizing",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 5. Badge Positioning
+     * - Badges without proper overlap
+     * - Missing anchor origin
+     */
+    async checkBadgePositioning() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                if (/<Badge\b/.test(line)) {
+                    const badgeBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    // Check for anchorOrigin
+                    const hasAnchorOrigin = /anchorOrigin/.test(badgeBlock);
+                    const hasOverlap = /overlap/.test(badgeBlock);
+                    // Badge on Avatar should have circular overlap
+                    const isOnAvatar = /<Badge[^>]*>[^]*<Avatar/.test(badgeBlock) ||
+                        /<Avatar[^>]*>[^]*<Badge/.test(badgeBlock);
+                    if (isOnAvatar && !hasOverlap) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "badge-avatar-no-overlap",
+                            severity: "info",
+                            message: 'Badge on Avatar without overlap="circular"',
+                            suggestion: 'Add overlap="circular" for proper positioning on avatars',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check for invisible badges (badgeContent={0} without showZero)
+                    if (/badgeContent=\{0\}/.test(badgeBlock) && !/showZero/.test(badgeBlock)) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "badge-zero-hidden",
+                            severity: "info",
+                            message: "Badge with content 0 will be hidden (add showZero if intentional)",
+                            suggestion: "Add showZero prop if zero should be displayed",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Badge Positioning",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 5b. UI Control Gap Spacing
+     * Ensures consistent gap spacing across all UI control components:
+     * - SegmentedControl: gap-1 between items
+     * - Tabs: flex with proper spacing
+     * - ToggleButtonGroup: gap or border-based separation
+     * - Chip groups: gap-2 between chips
+     * - Custom radiogroup/tab patterns
+     */
+    async checkUIControlGapSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        // Define UI control components and their expected gap patterns
+        const uiControlChecks = [
+            {
+                path: "components/ui/SegmentedControl.tsx",
+                name: "SegmentedControl",
+                expectedGap: "gap-1",
+                checkPattern: /cva\s*\(\s*["'`][^"'`]*\bgap-\d/,
+                suggestion: "Add gap-1 to CVA base styles for uniform item spacing",
+            },
+            {
+                path: "components/ui/Tabs.tsx",
+                name: "Tabs",
+                // Tabs use flex without gap (items touch the border-bottom indicator)
+                // This is intentional - tabs rely on individual padding
+                skipCheck: true,
+            },
+            {
+                path: "components/ui/ToggleButton.tsx",
+                name: "ToggleButtonGroup",
+                // ToggleButtonGroup uses border separation, not gap (intentional design)
+                skipCheck: true,
+            },
+            {
+                path: "components/ui/Chip.tsx",
+                name: "Chip",
+                // Individual chip has internal gap-1.5, groups should use gap-2
+                expectedGap: "gap-1.5",
+                checkPattern: /["'`][^"'`]*\bgap-1\.5/,
+                suggestion: "Chip should have gap-1.5 for icon/label spacing",
+            },
+        ];
+        // Check each UI control component
+        for (const check of uiControlChecks) {
+            if (check.skipCheck)
+                continue;
+            if (fs.existsSync(check.path)) {
+                const content = fs.readFileSync(check.path, "utf8");
+                const lines = content.split("\n");
+                if (check.checkPattern && !check.checkPattern.test(content)) {
+                    // Find the cva definition line
+                    let cvaLine = 1;
+                    lines.forEach((line, index) => {
+                        if (/cva\s*\(/.test(line)) {
+                            cvaLine = index + 1;
+                        }
+                    });
+                    issues.push({
+                        file: check.path,
+                        line: cvaLine,
+                        type: `${check.name.toLowerCase()}-no-gap`,
+                        severity: "error",
+                        message: `${check.name} missing expected gap spacing (${check.expectedGap})`,
+                        suggestion: check.suggestion,
+                        snippet: `Expected: ${check.expectedGap}`,
+                    });
+                }
+            }
+        }
+        // Check for Chip groups without proper gap
+        const files = await this.getFiles();
+        for (const file of files) {
+            // Skip UI component definitions (already checked above)
+            // Normalize path separators for cross-platform compatibility
+            const normalizedPath = file.replace(/\\/g, "/");
+            if (normalizedPath.includes("components/ui/"))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check for Chip groups (multiple Chips in a flex container)
+                // Match "flex" as display:flex, not flex-1, flex-grow, etc.
+                // Skip Stack components (they have built-in spacing prop)
+                const isFlexContainer = /className=["'][^"']*\bflex\b(?!-)[^"']*["']/.test(line) && !/<Stack\b/.test(line);
+                if (isFlexContainer) {
+                    const contextBlock = lines.slice(index, Math.min(index + 15, lines.length)).join("\n");
+                    // Skip if this is inside a Stack component (check previous lines)
+                    const prevLines = lines.slice(Math.max(0, index - 3), index).join("\n");
+                    const isInsideStack = /<Stack\b/.test(prevLines) && !/<\/Stack>/.test(prevLines);
+                    if (!isInsideStack) {
+                        // Count Chip components
+                        const chipCount = (contextBlock.match(/<Chip\b/g) || []).length;
+                        if (chipCount >= 2) {
+                            const hasGap = /\bgap-\d/.test(line) || /\bgap-\d/.test(contextBlock.split("\n")[0]);
+                            const hasSpacing = /spacing=/.test(line) || /space-x-/.test(line);
+                            if (!hasGap && !hasSpacing) {
+                                issues.push({
+                                    file,
+                                    line: index + 1,
+                                    type: "chip-group-no-gap",
+                                    severity: "warning",
+                                    message: `Chip group (${chipCount} chips) without gap spacing`,
+                                    suggestion: "Add gap-2 class for consistent chip spacing",
+                                    snippet: line.trim().substring(0, 80),
+                                });
+                            }
+                        }
+                    }
+                }
+                // Check for custom radiogroup patterns (excluding grids and star ratings)
+                if (/role=["']radiogroup["']/.test(line)) {
+                    const contextBlock = lines
+                        .slice(Math.max(0, index - 5), Math.min(index + 15, lines.length))
+                        .join("\n");
+                    // Skip grid layouts and star ratings
+                    const isGrid = /\bgrid\b/.test(contextBlock);
+                    const isStarRating = /Rating|star|Star/.test(file) || /starValue|isFilled/.test(contextBlock);
+                    if (!isGrid && !isStarRating) {
+                        const hasGap = /\bgap-\d/.test(line) ||
+                            /\bgap-\d/.test(contextBlock.split("\n").slice(0, 3).join("\n"));
+                        if (!hasGap) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "custom-radiogroup-no-gap",
+                                severity: "warning",
+                                message: "Custom radiogroup without gap spacing",
+                                suggestion: "Add gap-1 or gap-2 class, or use <SegmentedControl /> component",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for flex containers with aria-checked buttons (tab-like patterns)
+                if (/className=["'][^"']*\bflex\b[^"']*["']/.test(line) && !line.includes("flex-wrap")) {
+                    const contextBlock = lines.slice(index, Math.min(index + 20, lines.length)).join("\n");
+                    const hasAriaChecked = /aria-checked/.test(contextBlock);
+                    const buttonCount = (contextBlock.match(/<button\b/gi) || []).length;
+                    const isStarRating = /Rating|star|Star/.test(file) || /starValue|isFilled/.test(contextBlock);
+                    if (hasAriaChecked && buttonCount >= 2 && !isStarRating) {
+                        const hasGap = /\bgap-\d/.test(line);
+                        if (!hasGap) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "custom-tabs-no-gap",
+                                severity: "warning",
+                                message: "Custom tab/toggle pattern without gap spacing",
+                                suggestion: "Add gap-1 class for uniform spacing, or use <SegmentedControl /> or <Tabs />",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for Button groups (multiple Buttons in inline-flex without gap)
+                if (/className=["'][^"']*\binline-flex\b[^"']*["']/.test(line)) {
+                    const contextBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    const buttonCount = (contextBlock.match(/<Button\b/g) || []).length;
+                    if (buttonCount >= 2) {
+                        const hasGap = /\bgap-\d/.test(line);
+                        const hasSpace = /\bspace-x-\d/.test(line);
+                        if (!hasGap && !hasSpace) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "button-group-no-gap",
+                                severity: "info",
+                                message: `Button group (${buttonCount} buttons) without gap spacing`,
+                                suggestion: "Add gap-2 class for consistent button spacing",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        const hasErrors = issues.some((i) => i.severity === "error");
+        return {
+            name: "UI Control Gap Spacing",
+            passed: !hasErrors,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 6. Divider Usage
+     * - Missing dividers between sections
+     * - Inconsistent divider styling
+     */
+    async checkDividerUsage() {
+        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 hr elements (should use Divider component)
+                if (/<hr\b/.test(line)) {
+                    issues.push({
+                        file,
+                        line: index + 1,
+                        type: "raw-hr-element",
+                        severity: "info",
+                        message: "Raw <hr> element instead of Divider component",
+                        suggestion: "Use <Divider /> for consistent styling",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check for border-based dividers
+                if (/border-(?:t|b)-\[1px\]|borderTop:\s*["']1px/.test(line)) {
+                    const contextBlock = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    const isActualDivider = /divider|separator/i.test(contextBlock);
+                    if (isActualDivider) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "border-as-divider",
+                            severity: "info",
+                            message: "Border used as divider instead of Divider component",
+                            suggestion: "Use <Divider /> for semantic and consistent dividers",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check Divider without proper margin
+                if (/<Divider\b/.test(line)) {
+                    const dividerBlock = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    const hasMargin = /className=["'][^"']*my-|style=\{[^}]*margin/.test(dividerBlock);
+                    const hasSx = /sx=\{[^}]*my?:/.test(dividerBlock);
+                    if (!hasMargin && !hasSx) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "divider-no-margin",
+                            severity: "info",
+                            message: "Divider without vertical margin",
+                            suggestion: 'Add className="my-4" for proper spacing',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Divider Usage",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 7. Transition Consistency
+     * - Hardcoded transitions vs design tokens
+     * - Missing transitions on interactive elements
+     */
+    async checkTransitionConsistency() {
+        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");
+            // Check if file uses CVA - if so, check for transition in base styles
+            const usesCva = /\bcva\(/.test(content);
+            const hasCvaTransition = usesCva && /transition-(?:all|colors|transform|opacity)/.test(content);
+            // Check if file has inline style transitions
+            const hasInlineTransition = /transition:\s*["']?(?:all|var\(--transition)/.test(content);
+            lines.forEach((line, index) => {
+                // Check for hardcoded transition values (skip custom easing which is intentional)
+                if (/transition:\s*["'](?:all|opacity|transform|color|background)[^"']*\d+(?:ms|s)/.test(line)) {
+                    const usesToken = /var\(--transition/.test(line);
+                    const hasCustomEasing = /cubic-bezier|ease-in-out|ease-out|ease-in/.test(line);
+                    if (!usesToken && !hasCustomEasing) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "hardcoded-transition",
+                            severity: "info",
+                            message: "Hardcoded transition duration",
+                            suggestion: "Use var(--transition-fast), var(--transition-normal), or var(--transition-slow)",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for hover states without transition
+                if (/hover:(?:bg-|text-|border-|opacity-)/.test(line)) {
+                    const hasTransition = /transition/.test(line);
+                    // Skip if file uses CVA with transition, or has inline style transitions
+                    if (!hasTransition && !hasCvaTransition && !hasInlineTransition) {
+                        // Also check surrounding context (20 lines) for transition
+                        const contextBlock = lines
+                            .slice(Math.max(0, index - 15), Math.min(index + 10, lines.length))
+                            .join("\n");
+                        const hasContextTransition = /transition-(?:all|colors|transform|opacity)|transition:\s*["']?(?:all|var|background|opacity)/.test(contextBlock);
+                        // Skip if hover is on a component that has built-in transitions (Button, Card, IconButton)
+                        // Check both the line and surrounding context for the component
+                        const isOnTransitionComponent = /<(?:Button|Card|IconButton|MenuItem|ListItem|Tab|Chip)\b/.test(line) ||
+                            /<(?:Button|Card|IconButton|MenuItem|ListItem|Tab|Chip)\b/.test(contextBlock);
+                        if (!hasContextTransition && !isOnTransitionComponent) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "hover-no-transition",
+                                severity: "info",
+                                message: "Hover state without transition (will be abrupt)",
+                                suggestion: "Add transition-colors or transition-all class",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for transform without transition
+                if (/hover:(?:scale-|rotate-|translate-)/.test(line)) {
+                    const hasTransition = /transition/.test(line);
+                    if (!hasTransition && !hasCvaTransition && !hasInlineTransition) {
+                        const contextBlock = lines
+                            .slice(Math.max(0, index - 10), Math.min(index + 10, lines.length))
+                            .join("\n");
+                        const hasContextTransition = /transition-(?:all|colors|transform|opacity)|transition:\s*["']?(?:all|var)/.test(contextBlock);
+                        // Skip if transform is on a component that has built-in transitions
+                        const isOnTransitionComponent = /<(?:Button|Card|IconButton)\b/.test(line);
+                        if (!hasContextTransition && !isOnTransitionComponent) {
+                            issues.push({
+                                file,
+                                line: index + 1,
+                                type: "transform-no-transition",
+                                severity: "info",
+                                message: "Transform on hover without transition",
+                                suggestion: "Add transition-transform class",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        return {
+            name: "Transition Consistency",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 8. Overflow Handling
+     * - Text overflow without ellipsis
+     * - Long content without truncation
+     */
+    async checkOverflowHandling() {
+        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 overflow-hidden without text handling
+                if (/overflow-hidden/.test(line) &&
+                    !line.includes("overflow-x") &&
+                    !line.includes("overflow-y")) {
+                    const contextBlock = lines.slice(index, Math.min(index + 10, lines.length)).join("\n");
+                    const hasTextTruncate = /truncate|text-ellipsis|line-clamp/.test(contextBlock);
+                    const hasTypography = /<Typography/.test(contextBlock);
+                    if (hasTypography && !hasTextTruncate) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "overflow-hidden-no-truncate",
+                            severity: "info",
+                            message: "overflow-hidden on text container without truncation",
+                            suggestion: "Add truncate class or line-clamp-N for text overflow",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for Typography with noWrap but no width constraint
+                if (/<Typography[^>]*noWrap/.test(line)) {
+                    const contextBlock = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    const hasWidthConstraint = /max-w-|maxWidth|w-\[|width:/.test(contextBlock);
+                    if (!hasWidthConstraint) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "nowrap-no-width",
+                            severity: "info",
+                            message: "Typography noWrap without width constraint",
+                            suggestion: "Add max-w-[200px] or similar to enable truncation",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for long text fields without truncation
+                if (/<(?:TableCell|td)[^>]*>/.test(line)) {
+                    const cellBlock = lines.slice(index, Math.min(index + 5, lines.length)).join("\n");
+                    const hasDescription = /description|comment|note|message/i.test(cellBlock);
+                    const hasTruncation = /truncate|line-clamp|noWrap|ellipsis/.test(cellBlock);
+                    if (hasDescription && !hasTruncation) {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: "table-cell-no-truncate",
+                            severity: "info",
+                            message: "Table cell with long text field may need truncation",
+                            suggestion: "Add truncate class or max-w-[300px] with overflow handling",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            });
+        }
+        return {
+            name: "Overflow Handling",
+            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 CONSISTENCY PREFLIGHT`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        const checks = [];
+        checks.push(await this.checkTooltipConsistency());
+        checks.push(await this.checkModalSizing());
+        checks.push(await this.checkPaginationConsistency());
+        checks.push(await this.checkAvatarSizing());
+        checks.push(await this.checkBadgePositioning());
+        checks.push(await this.checkUIControlGapSpacing());
+        checks.push(await this.checkDividerUsage());
+        checks.push(await this.checkTransitionConsistency());
+        checks.push(await this.checkOverflowHandling());
+        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 CONSISTENCY FAILED - ${errors} error(s)`);
+        }
+        else if (warnings > 0) {
+            console.log(`\n${console_chars_1.emoji.warning} UI CONSISTENCY PASSED - ${warnings} warning(s)`);
+        }
+        else {
+            console.log(`\n${console_chars_1.emoji.success} UI CONSISTENCY PASSED`);
+        }
+        return {
+            module: "ui-consistency-advanced",
+            passed: !blockingFailed,
+            totalDuration,
+            checks,
+            summary,
+        };
+    }
+}
+exports.UIConsistencyAdvancedModule = UIConsistencyAdvancedModule;
+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 UIConsistencyAdvancedModule({ verbose, parallel });
+    const runSingle = async (name, fn) => {
+        console.log(`\n${console_chars_1.emoji.target} UI CONSISTENCY: ${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, 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"));
+        return {
+            module: `ui-consistency:${name}`,
+            passed: check.passed,
+            totalDuration: check.duration,
+            checks: [check],
+            summary,
+        };
+    };
+    let result;
+    switch (mode) {
+        case "tooltips":
+            result = await runSingle("tooltips", () => module.checkTooltipConsistency());
+            break;
+        case "modals":
+            result = await runSingle("modals", () => module.checkModalSizing());
+            break;
+        case "pagination":
+            result = await runSingle("pagination", () => module.checkPaginationConsistency());
+            break;
+        case "avatars":
+            result = await runSingle("avatars", () => module.checkAvatarSizing());
+            break;
+        case "badges":
+            result = await runSingle("badges", () => module.checkBadgePositioning());
+            break;
+        case "gaps":
+            result = await runSingle("gaps", () => module.checkUIControlGapSpacing());
+            break;
+        case "dividers":
+            result = await runSingle("dividers", () => module.checkDividerUsage());
+            break;
+        case "transitions":
+            result = await runSingle("transitions", () => module.checkTransitionConsistency());
+            break;
+        case "overflow":
+            result = await runSingle("overflow", () => module.checkOverflowHandling());
+            break;
+        default:
+            result = await module.runAll();
+            break;
+    }
+    process.exit(result.passed ? 0 : 1);
+}
+if (require.main === module) {
+    main();
+}
+//# sourceMappingURL=ui-consistency-advanced.js.map