@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-error-states.js

@@ -0,0 +1,694 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * UI Error States Preflight (NON-BLOCKING)
+ *
+ * Validates error UI patterns for consistency and user-friendliness.
+ *
+ * Checks:
+ * 1. Form Error Positioning - Error messages near inputs
+ * 2. Error Icon Alignment - Icon + text consistency
+ * 3. Error Boundary Fallbacks - Proper fallback UI
+ * 4. API Error Messages - User-friendly error text
+ * 5. Inline vs Toast Errors - Appropriate pattern usage
+ * 6. Error Color Consistency - Red/destructive color usage
+ * 7. Recoverable Errors - Retry options present
+ * 8. Error State Accessibility - ARIA and role usage
+ *
+ * Usage:
+ *   pnpm preflight:ui-error-states              # All checks
+ *   pnpm preflight:ui-error-states form         # Form errors 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.UIErrorStatesModule = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const console_chars_1 = require("../../utils/console-chars");
+const file_cache_1 = require("../../shared/file-cache");
+class UIErrorStatesModule {
+    verbose;
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+    }
+    async getTsxFiles() {
+        return file_cache_1.fileCache.getAppAndComponentsTSX();
+    }
+    /**
+     * 1. Form Error Positioning
+     * Check that error messages appear near their inputs
+     */
+    async checkFormErrorPositioning() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for form error messages
+                if (/errors?\.\w+|fieldState\.error|formState\.errors/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    // Check if error is displayed near the field
+                    const hasInlineError = /FormMessage|ErrorMessage|FieldError|helperText|error.*text/i.test(contextBlock);
+                    const hasToastError = /toast\(|showToast|notification/i.test(contextBlock);
+                    if (hasToastError && !hasInlineError) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "form-error-in-toast",
+                            severity: "info",
+                            message: "Form validation error shown in toast instead of inline",
+                            suggestion: "Display form errors inline near the field for better UX",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for error message components
+                if (/<(?:FormMessage|ErrorMessage|FieldError)\b/i.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 10), i + 1).join("\n");
+                    // Check if it's after the input
+                    const hasInputBefore = /<(?:Input|TextField|Select|Textarea)\b/i.test(contextBlock);
+                    if (!hasInputBefore) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "error-message-orphaned",
+                            severity: "info",
+                            message: "Error message component without nearby input field",
+                            suggestion: "Place error message directly after its associated input",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Form Error Positioning",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 2. Error Icon Alignment
+     * Check for consistent error icon + text alignment
+     */
+    async checkErrorIconAlignment() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const errorIconPatterns = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for error messages with icons
+                if (/error|Error|alert|Alert/i.test(line) && /Icon|icon|<svg/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    // Track icon patterns
+                    if (/AlertCircle|ExclamationCircle|XCircle|ErrorIcon/i.test(contextBlock)) {
+                        const iconMatch = contextBlock.match(/(?:AlertCircle|ExclamationCircle|XCircle|ErrorIcon)/i);
+                        if (iconMatch) {
+                            errorIconPatterns.set(iconMatch[0], (errorIconPatterns.get(iconMatch[0]) || 0) + 1);
+                        }
+                    }
+                    // Check for flex alignment
+                    const hasFlexAlign = /flex.*items-center|items-center.*flex|inline-flex/i.test(contextBlock);
+                    const hasGap = /gap-|space-x-/.test(contextBlock);
+                    if (!hasFlexAlign && /Icon.*text|text.*Icon/i.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "error-icon-no-flex",
+                            severity: "info",
+                            message: "Error icon + text without flex alignment",
+                            suggestion: "Use flex items-center gap-2 for proper icon-text alignment",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        // Check for inconsistent error icons
+        if (errorIconPatterns.size > 2) {
+            const sorted = [...errorIconPatterns.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "inconsistent-error-icons",
+                severity: "info",
+                message: `Multiple error icons: ${sorted.map(([i, c]) => `${i}(${c})`).join(", ")}`,
+                suggestion: "Standardize on one error icon (recommended: AlertCircle or ExclamationCircle)",
+            });
+        }
+        return {
+            name: "Error Icon Alignment",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 3. Error Boundary Fallbacks
+     * Check for proper error boundary fallback UI
+     */
+    async checkErrorBoundaryFallbacks() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let hasErrorBoundary = false;
+        let errorBoundaryCount = 0;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for error boundary components
+                if (/<ErrorBoundary\b/i.test(line)) {
+                    hasErrorBoundary = true;
+                    errorBoundaryCount++;
+                    const contextBlock = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+                    // Check for fallback UI
+                    const hasFallback = /fallback=|FallbackComponent|fallbackRender/i.test(contextBlock);
+                    const hasReset = /reset|retry|reload|refetch/i.test(contextBlock);
+                    const hasErrorDetails = /error\.message|error\.stack/i.test(contextBlock);
+                    if (!hasFallback) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "error-boundary-no-fallback",
+                            severity: "warning",
+                            message: "ErrorBoundary without fallback UI",
+                            suggestion: "Add fallback prop with user-friendly error UI",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    if (hasFallback && !hasReset) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "error-boundary-no-reset",
+                            severity: "info",
+                            message: "ErrorBoundary fallback without retry option",
+                            suggestion: "Add 'Try Again' button to reset error boundary",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for componentDidCatch (class components)
+                if (/componentDidCatch|getDerivedStateFromError/.test(line)) {
+                    hasErrorBoundary = true;
+                    const contextBlock = lines.slice(i, Math.min(i + 30, lines.length)).join("\n");
+                    const hasFallbackUI = /render.*error|Something went wrong|error.*occurred/i.test(contextBlock);
+                    if (!hasFallbackUI) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "class-error-boundary-no-ui",
+                            severity: "warning",
+                            message: "Error boundary without fallback render",
+                            suggestion: "Add fallback UI in render method when hasError is true",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        // Global check for error boundary presence
+        if (!hasErrorBoundary) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-error-boundaries",
+                severity: "info",
+                message: "No ErrorBoundary components found",
+                suggestion: "Add ErrorBoundary at route level to gracefully handle render errors",
+            });
+        }
+        return {
+            name: "Error Boundary Fallbacks",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 4. API Error Messages
+     * Check for user-friendly API error handling
+     */
+    async checkAPIErrorMessages() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for raw error.message display
+                if (/error\.message|err\.message|e\.message/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    // Check if it's directly displayed to user
+                    const isDisplayed = /\{.*error\.message.*\}|toast.*error\.message|alert.*error\.message/i.test(contextBlock);
+                    const hasMapping = /errorMessages|getErrorMessage|mapError|friendlyError/i.test(contextBlock);
+                    if (isDisplayed && !hasMapping) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "raw-error-message",
+                            severity: "warning",
+                            message: "Raw error.message displayed to user - may expose internal details",
+                            suggestion: "Map API errors to user-friendly messages",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for generic error messages
+                if (/['"](?:Error|Something went wrong|An error occurred)['"]/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    // Check if there's more specific handling available
+                    const hasSpecificHandling = /status.*===|error\.code|error\.type|instanceof/i.test(contextBlock);
+                    if (!hasSpecificHandling) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "generic-error-message",
+                            severity: "info",
+                            message: "Generic error message - consider more specific feedback",
+                            suggestion: "Provide actionable error messages (what happened, what user can do)",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for network errors without offline handling
+                if (/catch\s*\(|\.catch\(|onError/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 15, lines.length)).join("\n");
+                    const hasNetworkCheck = /network|offline|internet|connection|ECONNREFUSED/i.test(contextBlock);
+                    const isNetworkCall = /fetch|axios|api\.|useMutation|useQuery/i.test(content.substring(Math.max(0, content.indexOf(line) - 200), content.indexOf(line)));
+                    if (isNetworkCall && !hasNetworkCheck) {
+                        // Only flag if it looks like error handling
+                        if (/toast|alert|setError|showError/i.test(contextBlock)) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "api-error-no-network-check",
+                                severity: "info",
+                                message: "API error handler may not distinguish network errors",
+                                suggestion: "Check for network/offline errors and show appropriate message",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        return {
+            name: "API Error Messages",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 5. Inline vs Toast Errors
+     * Check for appropriate error display pattern usage
+     */
+    async checkInlineVsToastErrors() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let inlineErrorCount = 0;
+        let toastErrorCount = 0;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Track inline errors
+                if (/<(?:FormMessage|ErrorMessage|FieldError|Alert.*error|FormError)\b/i.test(line)) {
+                    inlineErrorCount++;
+                }
+                // Track toast errors
+                if (/toast\(.*error|toast\.error|showError.*toast|errorToast/i.test(line)) {
+                    toastErrorCount++;
+                    const contextBlock = lines.slice(Math.max(0, i - 10), Math.min(i + 5, lines.length)).join("\n");
+                    // Check if toast is used for form validation (anti-pattern)
+                    const isFormValidation = /formState|errors\.\w+|validate|validation|required/i.test(contextBlock);
+                    if (isFormValidation) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "form-validation-in-toast",
+                            severity: "warning",
+                            message: "Form validation errors shown in toast",
+                            suggestion: "Use inline field errors for form validation, toasts for server errors",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for Alert components with error variant
+                if (/<Alert[^>]*variant=["'](?:destructive|error)/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    // Check if alert has close button for dismissible errors
+                    const hasDismiss = /onClose|dismiss|close|X|×/i.test(contextBlock);
+                    const isTemporary = /setTimeout|autoHide|duration/i.test(contextBlock);
+                    if (!hasDismiss && !isTemporary) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "error-alert-not-dismissible",
+                            severity: "info",
+                            message: "Error alert without close/dismiss option",
+                            suggestion: "Add close button or auto-dismiss for non-blocking errors",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Inline vs Toast Errors",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 6. Error Color Consistency
+     * Check for consistent error/destructive color usage
+     */
+    async checkErrorColorConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const errorColorPatterns = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for error-related color classes
+                if (/error|Error/.test(line) || /\.error|isError|hasError/i.test(line)) {
+                    // Track color patterns
+                    if (/text-red-\d+/.test(line)) {
+                        const match = line.match(/text-red-(\d+)/);
+                        if (match) {
+                            errorColorPatterns.set(`text-red-${match[1]}`, (errorColorPatterns.get(`text-red-${match[1]}`) || 0) + 1);
+                        }
+                    }
+                    if (/text-destructive/.test(line)) {
+                        errorColorPatterns.set("text-destructive", (errorColorPatterns.get("text-destructive") || 0) + 1);
+                    }
+                    if (/bg-red-\d+/.test(line)) {
+                        const match = line.match(/bg-red-(\d+)/);
+                        if (match) {
+                            errorColorPatterns.set(`bg-red-${match[1]}`, (errorColorPatterns.get(`bg-red-${match[1]}`) || 0) + 1);
+                        }
+                    }
+                    if (/border-red-\d+/.test(line)) {
+                        const match = line.match(/border-red-(\d+)/);
+                        if (match) {
+                            errorColorPatterns.set(`border-red-${match[1]}`, (errorColorPatterns.get(`border-red-${match[1]}`) || 0) + 1);
+                        }
+                    }
+                }
+                // Check for hardcoded error colors
+                if (/style=.*#(?:f|e).*error|style=.*rgb.*255.*0.*0.*error/i.test(line)) {
+                    issues.push({
+                        file,
+                        line: i + 1,
+                        type: "hardcoded-error-color",
+                        severity: "info",
+                        message: "Hardcoded error color - use design tokens",
+                        suggestion: "Use text-destructive or text-red-500 from design system",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        // Check for inconsistent error colors
+        const redTextColors = [...errorColorPatterns.entries()].filter(([k]) => k.startsWith("text-red"));
+        if (redTextColors.length > 2) {
+            const sorted = redTextColors.sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "inconsistent-error-text-colors",
+                severity: "warning",
+                message: `Multiple error text colors: ${sorted.map(([c, n]) => `${c}(${n})`).join(", ")}`,
+                suggestion: "Standardize on one error text color (recommended: text-destructive or text-red-500)",
+            });
+        }
+        return {
+            name: "Error Color Consistency",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 7. Recoverable Errors
+     * Check for retry/recovery options in error states
+     */
+    async checkRecoverableErrors() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for error states in queries
+                if (/isError|error\s*&&|\.error\s*\?/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+                    const hasRetry = /retry|refetch|reload|try.*again|refresh/i.test(contextBlock);
+                    const hasContactSupport = /contact|support|help/i.test(contextBlock);
+                    const hasErrorCode = /error.*code|code.*error|reference/i.test(contextBlock);
+                    // Check if it's a network/API error
+                    const isNetworkError = /useQuery|useMutation|fetch|api/i.test(content.substring(Math.max(0, content.indexOf(line) - 200), content.indexOf(line)));
+                    if (isNetworkError && !hasRetry) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "api-error-no-retry",
+                            severity: "info",
+                            message: "API error state without retry option",
+                            suggestion: "Add 'Try Again' button that calls refetch() for recoverable errors",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for mutation error handling
+                if (/onError.*mutation|mutation.*onError/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 15, lines.length)).join("\n");
+                    const hasRetryLogic = /retry|mutate\(|reset/i.test(contextBlock);
+                    if (!hasRetryLogic) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "mutation-error-no-retry",
+                            severity: "info",
+                            message: "Mutation error handler without retry option",
+                            suggestion: "Allow user to retry failed mutations",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Recoverable Errors",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 8. Error State Accessibility
+     * Check for ARIA and role usage in error states
+     */
+    async checkErrorAccessibility() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for error messages without aria
+                if (/<(?:span|div|p)[^>]*(?:error|Error)/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 3, lines.length)).join("\n");
+                    const hasAriaLive = /aria-live|role=["']alert/.test(contextBlock);
+                    const hasAriaDescribedBy = /aria-describedby|aria-errormessage/.test(contextBlock);
+                    const isIdReferenced = /id=["'][^"']+["']/.test(contextBlock);
+                    // Check if it's a visible error message
+                    const isVisibleError = /text-red|text-destructive|error.*message/i.test(contextBlock);
+                    if (isVisibleError && !hasAriaLive) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "error-no-aria-live",
+                            severity: "info",
+                            message: "Error message without aria-live or role='alert'",
+                            suggestion: "Add role='alert' or aria-live='polite' for screen reader announcement",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for form inputs with errors
+                if (/<(?:Input|input|TextField)[^>]*error/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    const hasAriaInvalid = /aria-invalid/.test(contextBlock);
+                    const hasAriaDescribedBy = /aria-describedby|aria-errormessage/.test(contextBlock);
+                    if (!hasAriaInvalid) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "input-error-no-aria-invalid",
+                            severity: "info",
+                            message: "Input with error state missing aria-invalid='true'",
+                            suggestion: "Add aria-invalid={hasError} to input for accessibility",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    if (!hasAriaDescribedBy) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "input-error-no-describedby",
+                            severity: "info",
+                            message: "Input error without aria-describedby linking to error message",
+                            suggestion: "Link input to error message with aria-describedby={errorId}",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Error State Accessibility",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    async runAll(filter) {
+        const startTime = Date.now();
+        const checks = [];
+        const checkMap = {
+            form: () => this.checkFormErrorPositioning(),
+            icon: () => this.checkErrorIconAlignment(),
+            boundary: () => this.checkErrorBoundaryFallbacks(),
+            api: () => this.checkAPIErrorMessages(),
+            inline: () => this.checkInlineVsToastErrors(),
+            color: () => this.checkErrorColorConsistency(),
+            recovery: () => this.checkRecoverableErrors(),
+            a11y: () => this.checkErrorAccessibility(),
+        };
+        if (filter && checkMap[filter]) {
+            checks.push(await checkMap[filter]());
+        }
+        else {
+            for (const check of Object.values(checkMap)) {
+                checks.push(await check());
+            }
+        }
+        const errors = checks.reduce((sum, c) => sum + c.issues.filter((i) => i.severity === "error").length, 0);
+        const warnings = checks.reduce((sum, c) => sum + c.issues.filter((i) => i.severity === "warning").length, 0);
+        return {
+            module: "UI Error States",
+            passed: errors === 0,
+            totalDuration: Date.now() - startTime,
+            checks,
+            summary: {
+                total: checks.length,
+                passed: checks.filter((c) => c.passed).length,
+                failed: checks.filter((c) => !c.passed).length,
+                errors,
+                warnings,
+            },
+        };
+    }
+}
+exports.UIErrorStatesModule = UIErrorStatesModule;
+async function main() {
+    const args = process.argv.slice(2);
+    const filter = args.find((a) => !a.startsWith("-"));
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const module = new UIErrorStatesModule({ verbose });
+    const result = await module.runAll(filter);
+    console.log((0, console_chars_1.createDivider)(80, "heavy"));
+    console.log(`${console_chars_1.emoji.error} UI ERROR STATES CHECK`);
+    console.log((0, console_chars_1.createDivider)(80, "heavy"));
+    console.log();
+    for (const check of result.checks) {
+        const icon = check.passed ? console_chars_1.emoji.success : check.issues.some((i) => i.severity === "error") ? console_chars_1.emoji.error : console_chars_1.emoji.warning;
+        console.log(`${icon} ${check.name} (${check.duration}ms)`);
+        if (check.issues.length > 0 && (verbose || check.issues.some((i) => i.severity !== "info"))) {
+            for (const issue of check.issues.slice(0, verbose ? 100 : 5)) {
+                const sevIcon = issue.severity === "error" ? console_chars_1.emoji.error : issue.severity === "warning" ? console_chars_1.emoji.warning : console_chars_1.emoji.info;
+                const relPath = path.relative(process.cwd(), issue.file).replace(/\\/g, "/");
+                console.log(`  ${sevIcon} ${relPath}:${issue.line}`);
+                console.log(`     ${issue.message}`);
+                console.log(`     ${console_chars_1.emoji.hint} ${issue.suggestion}`);
+            }
+            if (!verbose && check.issues.length > 5) {
+                console.log(`  ... and ${check.issues.length - 5} more issues`);
+            }
+        }
+        console.log();
+    }
+    console.log((0, console_chars_1.createDivider)(80, "light"));
+    console.log(`Total: ${result.summary.total} checks | ${console_chars_1.emoji.error} ${result.summary.errors} errors | ${console_chars_1.emoji.warning} ${result.summary.warnings} warnings`);
+    console.log(`Duration: ${(result.totalDuration / 1000).toFixed(2)}s`);
+    console.log((0, console_chars_1.createDivider)(80, "heavy"));
+    process.exit(result.summary.errors > 0 ? 1 : 0);
+}
+if (require.main === module)
+    main();
+//# sourceMappingURL=ui-error-states.js.map