@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-mobile-ux.js

@@ -0,0 +1,2212 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * UI Mobile UX Preflight (NON-BLOCKING)
+ *
+ * Comprehensive mobile user experience validation.
+ * Ensures the app provides a great experience on mobile devices.
+ *
+ * Checks:
+ * 1. Safe Area Insets - env(safe-area-inset-*) for notched devices
+ * 2. Input Types - Proper HTML input types for mobile keyboards
+ * 3. Font Size Minimum - 16px minimum to prevent iOS auto-zoom
+ * 4. Horizontal Overflow - Elements wider than viewport
+ * 5. Viewport Units - 100vh issues, prefer dvh/svh
+ * 6. Hover Media Query - @media (hover: hover) for hover-only styles
+ * 7. Bottom Navigation - Mobile nav patterns
+ * 8. Sticky Position - iOS Safari quirks
+ * 9. Orientation Support - Landscape handling
+ * 10. Form Labels - Visible labels, not just placeholders
+ * 11. Mobile Menu Focus - Focus management in mobile menus
+ * 12. Tap Delay - touch-action: manipulation
+ *
+ * Usage:
+ *   pnpm preflight:ui-mobile-ux              # All checks
+ *   pnpm preflight:ui-mobile-ux safearea     # Safe area only
+ *   pnpm preflight:ui-mobile-ux inputs       # Input types only
+ *   pnpm preflight:ui-mobile-ux fonts        # Font size only
+ *   pnpm preflight:ui-mobile-ux overflow     # Horizontal overflow only
+ *   pnpm preflight:ui-mobile-ux viewport     # Viewport units only
+ *   pnpm preflight:ui-mobile-ux hover        # Hover media query 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.UIMobileUXModule = 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");
+const glob_patterns_1 = require("../../shared/glob-patterns");
+const EXCLUDED = [...glob_patterns_1.STANDARD_EXCLUDES, "**/*.test.tsx", "**/*.spec.tsx", "**/*.stories.tsx"];
+// Input type mappings for mobile keyboards
+const INPUT_TYPE_PATTERNS = {
+    email: { pattern: /email|e-mail/i, type: "email", keyboard: "email keyboard with @" },
+    phone: { pattern: /phone|tel|mobile|cell/i, type: "tel", keyboard: "numeric keypad" },
+    url: { pattern: /url|website|link|href/i, type: "url", keyboard: "URL keyboard with .com" },
+    number: { pattern: /quantity|amount|count|age|year|zip|postal/i, type: "number", keyboard: "numeric keyboard" },
+    search: { pattern: /search|query|find/i, type: "search", keyboard: "search keyboard" },
+};
+class UIMobileUXModule {
+    verbose;
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+    }
+    async getTsxFiles() {
+        return file_cache_1.fileCache.getAppAndComponentsTSX();
+    }
+    async getCssFiles() {
+        return file_cache_1.fileCache.getCSSFiles();
+    }
+    /**
+     * Check if line should be skipped due to preflight-ignore comment
+     */
+    shouldSkipLine(lines, lineIndex) {
+        // Check current line and up to 5 previous lines for preflight-ignore
+        const startIdx = Math.max(0, lineIndex - 5);
+        const contextLines = lines.slice(startIdx, lineIndex + 1).join("\n");
+        return contextLines.includes("preflight-ignore");
+    }
+    /**
+     * 1. Safe Area Insets
+     * Check for proper safe-area-inset usage for notched devices
+     */
+    async checkSafeAreaInsets() {
+        const startTime = Date.now();
+        const issues = [];
+        const tsxFiles = await this.getTsxFiles();
+        const cssFiles = await this.getCssFiles();
+        let hasSafeAreaSupport = false;
+        let hasFixedBottomElements = false;
+        let hasFixedTopElements = false;
+        // Check CSS files for safe-area support
+        for (const file of cssFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/env\(safe-area-inset-/.test(content)) {
+                hasSafeAreaSupport = true;
+            }
+        }
+        // Check TSX files
+        for (const file of tsxFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            if (/env\(safe-area-inset-|safe-area-inset/.test(content)) {
+                hasSafeAreaSupport = true;
+            }
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for fixed/sticky bottom elements
+                if (/fixed.*bottom-0|sticky.*bottom-0|position:\s*fixed.*bottom:\s*0/.test(line)) {
+                    hasFixedBottomElements = true;
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    if (!/safe-area|pb-safe|padding-bottom.*env/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "fixed-bottom-no-safe-area",
+                            severity: "warning",
+                            message: "Fixed bottom element without safe area padding",
+                            suggestion: "Add pb-[env(safe-area-inset-bottom)] for notched devices",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for fixed/sticky top elements (status bar area)
+                if (/fixed.*top-0|sticky.*top-0|position:\s*fixed.*top:\s*0/.test(line)) {
+                    hasFixedTopElements = true;
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    if (!/safe-area|pt-safe|padding-top.*env/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "fixed-top-no-safe-area",
+                            severity: "info",
+                            message: "Fixed top element - consider safe area for status bar",
+                            suggestion: "Add pt-[env(safe-area-inset-top)] if content shouldn't go under status bar",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        // Global check
+        if ((hasFixedBottomElements || hasFixedTopElements) && !hasSafeAreaSupport) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-safe-area-support",
+                severity: "warning",
+                message: "Fixed positioned elements found but no safe-area-inset support detected",
+                suggestion: "Add CSS: padding-bottom: env(safe-area-inset-bottom, 0px) for notched devices",
+            });
+        }
+        return {
+            name: "Safe Area Insets",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 2. Input Types for Mobile Keyboards
+     * Check that inputs use appropriate types for mobile keyboards
+     */
+    async checkInputTypes() {
+        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 TextField/Input components
+                if (/<(?:TextField|Input|input)[^>]*/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 3, lines.length)).join("\n");
+                    // Extract label/name/placeholder
+                    const labelMatch = contextBlock.match(/(?:label|name|placeholder)=["']([^"']+)["']/i);
+                    if (labelMatch) {
+                        const label = labelMatch[1].toLowerCase();
+                        for (const [key, config] of Object.entries(INPUT_TYPE_PATTERNS)) {
+                            if (config.pattern.test(label)) {
+                                // Check if correct type is used
+                                const typeMatch = contextBlock.match(/type=["'](\w+)["']/);
+                                const currentType = typeMatch ? typeMatch[1] : "text";
+                                if (currentType === "text" && config.type !== "text") {
+                                    issues.push({
+                                        file,
+                                        line: i + 1,
+                                        type: "input-type-mismatch",
+                                        severity: "info",
+                                        message: `Input "${labelMatch[1]}" uses type="text" but could use type="${config.type}"`,
+                                        suggestion: `Use type="${config.type}" for ${config.keyboard}`,
+                                        snippet: line.trim().substring(0, 80),
+                                    });
+                                }
+                                break;
+                            }
+                        }
+                    }
+                    // Check for inputMode attribute (even better for mobile)
+                    if (/type=["']number["']/.test(contextBlock) && !/inputMode/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "number-input-no-inputmode",
+                            severity: "info",
+                            message: 'type="number" without inputMode - consider inputMode="numeric" or "decimal"',
+                            suggestion: 'Add inputMode="numeric" for integer-only or inputMode="decimal" for decimals',
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Input Types",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 3. Font Size Minimum (iOS Auto-Zoom Prevention)
+     * Check that input font sizes are at least 16px to prevent iOS zoom
+     */
+    async checkFontSizeMinimum() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const cssFiles = await this.getCssFiles();
+        // Check CSS for small input font sizes
+        for (const file of cssFiles) {
+            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 input/textarea font-size < 16px
+                if (/input|textarea|select/i.test(content.substring(Math.max(0, content.indexOf(line) - 100), content.indexOf(line)))) {
+                    const fontSizeMatch = line.match(/font-size:\s*(\d+(?:\.\d+)?)(px|rem)/);
+                    if (fontSizeMatch) {
+                        const size = parseFloat(fontSizeMatch[1]);
+                        const unit = fontSizeMatch[2];
+                        const pxSize = unit === "rem" ? size * 16 : size;
+                        if (pxSize < 16) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "input-font-too-small",
+                                severity: "warning",
+                                message: `Input font-size ${fontSizeMatch[1]}${unit} (${pxSize}px) causes iOS auto-zoom`,
+                                suggestion: "Use at least 16px (1rem) for input font-size to prevent iOS zoom on focus",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        // Check TSX for small text on inputs
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                if (/<(?:TextField|Input|input|textarea|select)/i.test(line)) {
+                    // Check for text-xs or text-sm classes
+                    if (/className=["'][^"']*\btext-(?:xs|sm)\b/.test(line)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "input-text-class-small",
+                            severity: "warning",
+                            message: "Input with text-xs/text-sm class may cause iOS auto-zoom",
+                            suggestion: "Use text-base (16px) or larger for inputs to prevent zoom",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Font Size Minimum",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 4. Horizontal Overflow Prevention
+     * Check for elements that might cause horizontal scroll on mobile
+     */
+    async checkHorizontalOverflow() {
+        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 fixed widths larger than typical mobile screens
+                const widthMatch = line.match(/(?:width|min-width):\s*["']?(\d+)px/);
+                if (widthMatch) {
+                    const width = parseInt(widthMatch[1]);
+                    if (width > 500) {
+                        const contextBlock = lines.slice(Math.max(0, i - 2), Math.min(i + 3, lines.length)).join("\n");
+                        // Check if it has responsive handling
+                        if (!/max-width|overflow|sm:|md:|lg:|@media/.test(contextBlock)) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "fixed-width-overflow-risk",
+                                severity: "info",
+                                message: `Fixed width ${width}px may cause horizontal scroll on mobile`,
+                                suggestion: "Add max-width: 100% or use responsive width classes",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for w-screen without overflow handling
+                if (/\bw-screen\b/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 3, lines.length)).join("\n");
+                    if (!/overflow-x-hidden|overflow-hidden/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "w-screen-no-overflow",
+                            severity: "info",
+                            message: "w-screen can cause horizontal scroll if content overflows",
+                            suggestion: "Add overflow-x-hidden to parent or use w-full instead",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for negative margins that might cause overflow
+                if (/-mx-\d+|-ml-\d+|-mr-\d+/.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 3), Math.min(i + 3, lines.length)).join("\n");
+                    if (!/overflow-hidden|overflow-x-hidden/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "negative-margin-overflow-risk",
+                            severity: "info",
+                            message: "Negative horizontal margin can cause mobile overflow",
+                            suggestion: "Ensure parent has overflow-hidden or equivalent",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Horizontal Overflow",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 5. Viewport Units (100vh issues)
+     * Check for 100vh usage which is problematic on mobile browsers
+     */
+    async checkViewportUnits() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const cssFiles = await this.getCssFiles();
+        const allFiles = [...files, ...cssFiles];
+        for (const file of allFiles) {
+            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 100vh usage
+                if (/\b100vh\b|h-screen/.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 2), Math.min(i + 3, lines.length)).join("\n");
+                    // Check if modern viewport units are used as fallback
+                    const hasModernUnits = /\b100dvh\b|\b100svh\b|\b100lvh\b|dvh|svh/.test(contextBlock);
+                    const hasMinHeight = /min-h-screen|min-height:\s*100vh/.test(contextBlock);
+                    if (!hasModernUnits) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "100vh-mobile-issue",
+                            severity: "info",
+                            message: "100vh/h-screen is unreliable on mobile (address bar changes height)",
+                            suggestion: "Use min-h-[100dvh] or height: 100dvh for dynamic viewport on mobile",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for vh units in animations (can cause reflows on mobile)
+                if (/transform.*translateY.*vh|animation.*vh/.test(line)) {
+                    issues.push({
+                        file,
+                        line: i + 1,
+                        type: "vh-in-animation",
+                        severity: "info",
+                        message: "vh units in animations can cause jank on mobile (address bar resize)",
+                        suggestion: "Use fixed px values or % for smoother animations",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        return {
+            name: "Viewport Units",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 6. Hover Media Query
+     * Check that hover styles use @media (hover: hover) for touch devices
+     */
+    async checkHoverMediaQuery() {
+        const startTime = Date.now();
+        const issues = [];
+        const cssFiles = await this.getCssFiles();
+        let hasHoverMediaQuery = false;
+        let hoverStyleCount = 0;
+        for (const file of cssFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/@media\s*\(hover:\s*hover\)/.test(content)) {
+                hasHoverMediaQuery = true;
+            }
+            // Count hover styles
+            const hoverMatches = content.match(/:hover\s*\{/g);
+            if (hoverMatches) {
+                hoverStyleCount += hoverMatches.length;
+            }
+        }
+        // Check TSX for complex hover states that might need media query
+        const tsxFiles = await this.getTsxFiles();
+        for (const file of tsxFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Skip lines with preflight-ignore
+                if (this.shouldSkipLine(lines, i)) {
+                    continue;
+                }
+                // Check for hover state that changes layout/visibility
+                if (/hover:(?:block|flex|grid|visible|opacity-100)/.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 2), Math.min(i + 3, lines.length)).join("\n");
+                    // Check if there's a touch/click alternative or mobile-first responsive classes
+                    if (!/onClick|onTouchStart|group-focus|focus:|md:opacity-0|sm:opacity-0/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "hover-reveals-content",
+                            severity: "warning",
+                            message: "Hover-revealed content is inaccessible on touch devices",
+                            suggestion: "Add onClick handler or focus state for touch device access",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        // Global suggestion if many hover styles but no media query
+        if (hoverStyleCount > 10 && !hasHoverMediaQuery) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-hover-media-query",
+                severity: "info",
+                message: `${hoverStyleCount} hover styles found - consider @media (hover: hover) for touch devices`,
+                suggestion: "Wrap complex hover effects in @media (hover: hover) { } to avoid sticky hover on touch",
+            });
+        }
+        return {
+            name: "Hover Media Query",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 7. Form Labels (Not Just Placeholders)
+     * Check that form inputs have visible labels, not just placeholders
+     */
+    async checkFormLabels() {
+        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 input with placeholder but no label
+                if (/<(?:input|Input|TextField)[^>]*placeholder=/.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 5), Math.min(i + 5, lines.length)).join("\n");
+                    const hasLabel = /label=|<label|<Label|aria-label|aria-labelledby|id=.*for=|htmlFor/.test(contextBlock);
+                    if (!hasLabel) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "placeholder-only-label",
+                            severity: "info",
+                            message: "Input has placeholder but no visible label",
+                            suggestion: "Add a visible label - placeholders disappear on focus and aren't accessible",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Form Labels",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 8. Sticky Position Mobile Issues
+     * Check for sticky positioning that may have iOS Safari issues
+     */
+    async checkStickyPosition() {
+        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];
+                const trimmedLine = line.trim();
+                // Skip comment lines, JSDoc, and type definitions
+                if (trimmedLine.startsWith("//") ||
+                    trimmedLine.startsWith("*") ||
+                    trimmedLine.startsWith("/**") ||
+                    trimmedLine.startsWith("/*") ||
+                    /^\s*\*/.test(line) ||
+                    /interface\s|type\s|:\s*boolean/.test(line)) {
+                    continue;
+                }
+                // Check for sticky in className or style context (not just any word "sticky")
+                // Avoid matching "sticky" in variable names like "z-sticky" or "--z-sticky"
+                const hasStickyClass = /className=["'][^"']*\bsticky\b(?!-)/.test(line);
+                const hasStickyStyle = /position:\s*["']?sticky/.test(line);
+                // Skip lines where "sticky" is just in a variable name (e.g., z-[var(--z-sticky)])
+                const isStickyInVarName = /var\(--[^)]*sticky|z-sticky/.test(line);
+                if ((hasStickyClass || hasStickyStyle) && !isStickyInVarName) {
+                    // Check 5 lines of context for top/bottom positioning
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    // Sticky can use either top or bottom for positioning
+                    // Match: top-0, top: 0, top: sticky ? 0, bottom-0, bottom: 0, top: CONSTANT, etc.
+                    const hasPositioning = /top-\d|top:\s*(?:\w+\s*\?\s*)?[\d\w]|bottom-\d|bottom:\s*(?:\w+\s*\?\s*)?[\d\w]/.test(contextBlock);
+                    if (!hasPositioning) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "sticky-no-top",
+                            severity: "warning",
+                            message: "Sticky element without top/bottom value - won't stick properly",
+                            suggestion: "Add top-0 (for headers) or bottom-0 (for footers) for sticky positioning",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check for sticky inside overflow container (common issue)
+                    // This is harder to detect statically, so just info
+                }
+                // Check for -webkit-sticky fallback
+                if (/position:\s*sticky/.test(line) && !/position:\s*-webkit-sticky/.test(content)) {
+                    // Modern browsers don't need this anymore, but good to be aware
+                }
+            }
+        }
+        return {
+            name: "Sticky Position",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 9. Orientation Support
+     * Check for landscape orientation handling
+     */
+    async checkOrientationSupport() {
+        const startTime = Date.now();
+        const issues = [];
+        const cssFiles = await this.getCssFiles();
+        const tsxFiles = await this.getTsxFiles();
+        let hasOrientationHandling = false;
+        for (const file of cssFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/orientation:\s*(?:landscape|portrait)/.test(content)) {
+                hasOrientationHandling = true;
+            }
+        }
+        // Check for full-screen modals that might need orientation handling
+        for (const file of tsxFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Full-screen overlays should handle both orientations
+                if (/\bh-screen\b.*\bw-screen\b|\bfixed\b.*\binset-0\b/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    if (!/overflow|scroll|landscape|orientation/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "fullscreen-no-scroll",
+                            severity: "info",
+                            message: "Full-screen element - ensure content is scrollable in landscape mode",
+                            suggestion: "Add overflow-y-auto for landscape orientation support",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Orientation Support",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 10. Touch Action Optimization
+     * Check for touch-action: manipulation for better touch performance
+     */
+    async checkTouchAction() {
+        const startTime = Date.now();
+        const issues = [];
+        const cssFiles = await this.getCssFiles();
+        const tsxFiles = await this.getTsxFiles();
+        let hasTouchActionManipulation = false;
+        let hasDoubleClickElements = false;
+        // Check global CSS for touch-action
+        for (const file of cssFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/touch-action:\s*manipulation/.test(content)) {
+                hasTouchActionManipulation = true;
+            }
+        }
+        // Check TSX files
+        for (const file of tsxFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/touch-manipulation|touch-action.*manipulation/.test(content)) {
+                hasTouchActionManipulation = true;
+            }
+            if (/onDoubleClick|dblclick/.test(content)) {
+                hasDoubleClickElements = true;
+            }
+        }
+        // Global suggestion if no touch-action: manipulation
+        if (!hasTouchActionManipulation) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-touch-action-manipulation",
+                severity: "info",
+                message: "No global touch-action: manipulation detected",
+                suggestion: "Add touch-action: manipulation to <html> or clickable elements to remove 300ms tap delay",
+            });
+        }
+        return {
+            name: "Touch Action Optimization",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 11. Mobile Menu Focus Management
+     * Check that mobile menus trap focus properly
+     */
+    async checkMobileMenuFocus() {
+        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 mobile menu/drawer components
+                if (/MobileMenu|MobileNav|Drawer|Sheet|Sidebar.*mobile/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 30, lines.length)).join("\n");
+                    // Check for focus trap
+                    const hasFocusTrap = /FocusTrap|focus-trap|trapFocus|inert|aria-modal/.test(contextBlock);
+                    if (!hasFocusTrap) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "mobile-menu-no-focus-trap",
+                            severity: "info",
+                            message: "Mobile menu/drawer may lack focus trap",
+                            suggestion: "Add FocusTrap component or aria-modal for accessibility",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check for close on escape
+                    const hasEscapeClose = /Escape|onKeyDown|handleKeyDown/.test(contextBlock);
+                    if (!hasEscapeClose) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "mobile-menu-no-escape",
+                            severity: "info",
+                            message: "Mobile menu may not close on Escape key",
+                            suggestion: "Add keyboard handler to close on Escape press",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Mobile Menu Focus",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 12. Bottom Navigation Pattern
+     * Check for proper mobile bottom navigation patterns
+     */
+    async checkBottomNavigation() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let hasBottomNav = false;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Skip lines with preflight-ignore or comment lines
+                if (this.shouldSkipLine(lines, i)) {
+                    continue;
+                }
+                const trimmedLine = line.trim();
+                if (trimmedLine.startsWith("//") || trimmedLine.startsWith("*") || trimmedLine.startsWith("{/*")) {
+                    continue;
+                }
+                // Check for bottom navigation in actual code (not comments)
+                // Only match fixed bottom-positioned elements (viewport level), not absolute (container level)
+                const matchesBottomNav = /BottomNav|MobileTabBar/i.test(line) ||
+                    /fixed\s+bottom-0|bottom-0\s+.*fixed|fixed.*\s+bottom-\d/.test(line);
+                if (matchesBottomNav) {
+                    hasBottomNav = true;
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    // Check for safe area padding
+                    if (!/safe-area|pb-safe|padding-bottom.*env/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "bottom-nav-no-safe-area",
+                            severity: "warning",
+                            message: "Bottom navigation without safe area padding",
+                            suggestion: "Add pb-[env(safe-area-inset-bottom)] for notched devices",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check for adequate touch targets
+                    if (/h-\[(\d+)px\]|height:\s*(\d+)px/.test(contextBlock)) {
+                        const heightMatch = contextBlock.match(/h-\[(\d+)px\]|height:\s*(\d+)px/);
+                        if (heightMatch) {
+                            const height = parseInt(heightMatch[1] || heightMatch[2]);
+                            if (height < 48) {
+                                issues.push({
+                                    file,
+                                    line: i + 1,
+                                    type: "bottom-nav-too-short",
+                                    severity: "warning",
+                                    message: `Bottom nav height ${height}px is below 48px minimum`,
+                                    suggestion: "Increase height to at least 48px for comfortable touch targets",
+                                    snippet: line.trim().substring(0, 80),
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return {
+            name: "Bottom Navigation",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 13. Pull-to-Refresh Detection
+     * Check if scrollable lists implement pull-to-refresh patterns
+     */
+    async checkPullToRefresh() {
+        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 scrollable list components that might need pull-to-refresh
+                if (/useInfiniteQuery|InfiniteScroll|VirtualList|virtualized/i.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 10), Math.min(i + 20, lines.length)).join("\n");
+                    const hasPullToRefresh = /pullToRefresh|onRefresh|RefreshControl|pull.*refresh|usePullToRefresh/i.test(contextBlock);
+                    const hasRefetchButton = /refetch|refresh.*button|reload/i.test(contextBlock);
+                    if (!hasPullToRefresh && !hasRefetchButton) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "infinite-list-no-refresh",
+                            severity: "info",
+                            message: "Infinite/virtual list without pull-to-refresh or refresh button",
+                            suggestion: "Add pull-to-refresh for mobile or a visible refresh button",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for overscroll-behavior on scrollable containers
+                if (/overflow-y-auto|overflow-y-scroll|overflow-auto/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    // overscroll-contain prevents pull-to-refresh from triggering page refresh
+                    if (!/overscroll-contain|overscroll-behavior/.test(contextBlock)) {
+                        // Only flag if it looks like a main scrollable area
+                        if (/h-full|h-screen|flex-1/.test(contextBlock)) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "scrollable-no-overscroll",
+                                severity: "info",
+                                message: "Main scrollable container without overscroll-behavior",
+                                suggestion: "Add overscroll-contain to prevent scroll chaining on mobile",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        return {
+            name: "Pull-to-Refresh",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 14. Mobile Table Patterns
+     * Check that tables are responsive on mobile (scrollable or card-based)
+     */
+    async checkMobileTablePatterns() {
+        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];
+                // Skip lines with preflight-ignore
+                if (this.shouldSkipLine(lines, i)) {
+                    continue;
+                }
+                // Check for table elements
+                if (/<(?:Table|table)\b/.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 5), Math.min(i + 15, lines.length)).join("\n");
+                    // Check for responsive handling (Tailwind classes or inline styles)
+                    const hasOverflowScroll = /overflow-x-auto|overflow-x-scroll|overflow-auto|overflow:\s*["']?auto/.test(contextBlock);
+                    const hasMobileCard = /md:|lg:|sm:|hidden.*table|table.*hidden|MobileCard|CardView/i.test(contextBlock);
+                    const hasResponsiveWrapper = /TableContainer|responsive|mobile/i.test(contextBlock);
+                    if (!hasOverflowScroll && !hasMobileCard && !hasResponsiveWrapper) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "table-not-mobile-responsive",
+                            severity: "warning",
+                            message: "Table without mobile-responsive handling",
+                            suggestion: "Wrap in overflow-x-auto container or use responsive card pattern on mobile",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check for minimum column widths that might cause issues
+                    if (/min-w-\[(\d+)px\]/.test(contextBlock)) {
+                        const minWidthMatch = contextBlock.match(/min-w-\[(\d+)px\]/g);
+                        if (minWidthMatch && minWidthMatch.length > 3) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "table-many-min-widths",
+                                severity: "info",
+                                message: "Table with multiple min-width columns may be wide on mobile",
+                                suggestion: "Consider hiding less important columns on mobile with hidden md:table-cell",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        return {
+            name: "Mobile Table Patterns",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 15. Mobile Modal Sizing
+     * Check that modals are appropriately sized on mobile
+     */
+    async checkMobileModalSizing() {
+        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 modal/dialog components
+                if (/<(?:Dialog|Modal|Sheet|Drawer)\b/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+                    // Check for responsive width
+                    const hasResponsiveWidth = /w-full|max-w-.*sm:|sm:max-w|md:max-w|inset-x-0/.test(contextBlock);
+                    const hasFixedSmallWidth = /max-w-(?:xs|sm)\b/.test(contextBlock);
+                    const isBottomSheet = /Sheet|bottom|slide-up/i.test(line);
+                    if (!hasResponsiveWidth && !isBottomSheet) {
+                        // Check for fixed pixel widths
+                        const fixedWidthMatch = contextBlock.match(/w-\[(\d+)px\]|width:\s*(\d+)px/);
+                        if (fixedWidthMatch) {
+                            const width = parseInt(fixedWidthMatch[1] || fixedWidthMatch[2]);
+                            if (width > 400 && width < 600) {
+                                issues.push({
+                                    file,
+                                    line: i + 1,
+                                    type: "modal-fixed-width",
+                                    severity: "info",
+                                    message: `Modal with fixed ${width}px width may not fit mobile screens`,
+                                    suggestion: "Use w-full sm:max-w-md for responsive modal sizing",
+                                    snippet: line.trim().substring(0, 80),
+                                });
+                            }
+                        }
+                    }
+                    // Check for modal padding on mobile
+                    if (!/p-4|p-6|px-4|px-6|sm:p-/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "modal-no-padding",
+                            severity: "info",
+                            message: "Modal may lack adequate padding for mobile",
+                            suggestion: "Add p-4 or p-6 for comfortable touch spacing",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Mobile Modal Sizing",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 16. iOS Rubber Banding (overscroll-behavior)
+     * Check for proper overscroll handling on iOS
+     */
+    async checkOverscrollBehavior() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const cssFiles = await this.getCssFiles();
+        let hasGlobalOverscroll = false;
+        // Check CSS for global overscroll
+        for (const file of cssFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/overscroll-behavior:\s*(?:none|contain)/.test(content)) {
+                hasGlobalOverscroll = true;
+            }
+        }
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Check for overscroll classes
+            if (/overscroll-(?:none|contain|auto)/.test(content)) {
+                hasGlobalOverscroll = true;
+            }
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for nested scrollable containers (can cause scroll chaining)
+                if (/overflow-(?:y-auto|y-scroll|auto)/.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 10), Math.min(i + 10, lines.length)).join("\n");
+                    // Check if this is nested inside another scrollable
+                    const isNested = (contextBlock.match(/overflow-(?:y-auto|y-scroll|auto)/g) || []).length > 1;
+                    if (isNested && !/overscroll-contain/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "nested-scroll-no-overscroll",
+                            severity: "info",
+                            message: "Nested scrollable container without overscroll-contain",
+                            suggestion: "Add overscroll-contain to prevent scroll chaining issues",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for modals/drawers that should trap scroll
+                if (/<(?:Dialog|Modal|Drawer|Sheet)\b/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 15, lines.length)).join("\n");
+                    if (!/overscroll-contain|overflow-hidden/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "modal-no-scroll-trap",
+                            severity: "info",
+                            message: "Modal/drawer may allow background scroll on iOS",
+                            suggestion: "Add overscroll-contain or use body scroll lock",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Overscroll Behavior",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 17. PWA Meta Tags
+     * Check for Progressive Web App meta tag support
+     */
+    async checkPWAMetaTags() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let hasViewportFitCover = false;
+        let hasThemeColor = false;
+        let hasAppleTouchIcon = false;
+        let hasManifest = false;
+        let hasStatusBarStyle = false;
+        // Check layout/root files
+        for (const file of files) {
+            if (!/layout|_app|_document|head/i.test(file))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            if (/viewport-fit\s*=\s*cover/.test(content)) {
+                hasViewportFitCover = true;
+            }
+            if (/theme-color/.test(content)) {
+                hasThemeColor = true;
+            }
+            if (/apple-touch-icon/.test(content)) {
+                hasAppleTouchIcon = true;
+            }
+            if (/manifest\.json|manifest\.webmanifest/.test(content)) {
+                hasManifest = true;
+            }
+            if (/apple-mobile-web-app-status-bar-style/.test(content)) {
+                hasStatusBarStyle = true;
+            }
+        }
+        // Report missing PWA features
+        if (!hasViewportFitCover) {
+            issues.push({
+                file: "layout.tsx or _app.tsx",
+                line: 0,
+                type: "missing-viewport-fit",
+                severity: "info",
+                message: "Missing viewport-fit=cover for notched device support",
+                suggestion: "Add <meta name=\"viewport\" content=\"..., viewport-fit=cover\">",
+            });
+        }
+        if (!hasThemeColor) {
+            issues.push({
+                file: "layout.tsx or _app.tsx",
+                line: 0,
+                type: "missing-theme-color",
+                severity: "info",
+                message: "Missing theme-color meta tag for browser chrome styling",
+                suggestion: "Add <meta name=\"theme-color\" content=\"#yourColor\">",
+            });
+        }
+        if (!hasAppleTouchIcon) {
+            issues.push({
+                file: "layout.tsx or _app.tsx",
+                line: 0,
+                type: "missing-apple-touch-icon",
+                severity: "info",
+                message: "Missing apple-touch-icon for iOS home screen",
+                suggestion: "Add <link rel=\"apple-touch-icon\" href=\"/icon-180.png\">",
+            });
+        }
+        if (!hasManifest) {
+            issues.push({
+                file: "layout.tsx or _app.tsx",
+                line: 0,
+                type: "missing-manifest",
+                severity: "info",
+                message: "Missing web app manifest for PWA support",
+                suggestion: "Add <link rel=\"manifest\" href=\"/manifest.json\">",
+            });
+        }
+        return {
+            name: "PWA Meta Tags",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 18. Mobile Autofill Styling
+     * Check for handling of browser autofill background colors
+     */
+    async checkMobileAutofillStyling() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const cssFiles = await this.getCssFiles();
+        let hasAutofillStyling = false;
+        // Check CSS for autofill handling
+        for (const file of cssFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/:autofill|:-webkit-autofill/.test(content)) {
+                hasAutofillStyling = true;
+            }
+        }
+        // Check TSX for autofill handling
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/autofill|:-webkit-autofill/.test(content)) {
+                hasAutofillStyling = true;
+            }
+        }
+        // Count input fields
+        let inputCount = 0;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const matches = content.match(/<(?:input|Input|TextField)/gi);
+            if (matches)
+                inputCount += matches.length;
+        }
+        if (inputCount > 10 && !hasAutofillStyling) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-autofill-styling",
+                severity: "info",
+                message: `${inputCount} inputs found but no autofill styling detected`,
+                suggestion: "Add CSS: input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--bg-primary) inset; }",
+            });
+        }
+        return {
+            name: "Mobile Autofill Styling",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 19. Thumb Zone Ergonomics
+     * Check that important actions are in thumb-reachable zones
+     */
+    async checkThumbZoneErgonomics() {
+        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 primary actions that might be at the top
+                if (/(?:primary|submit|save|confirm|add|create)\s*(?:button|action)/i.test(line) ||
+                    /<Button[^>]*variant=["'](?:default|primary)["']/.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 10), Math.min(i + 5, lines.length)).join("\n");
+                    // Check if it's at the top of the page
+                    const isAtTop = /fixed.*top|sticky.*top|header|PageHeader|AppBar/i.test(contextBlock);
+                    const hasBottomAlternative = /fixed.*bottom|sticky.*bottom|BottomNav|MobileActions/i.test(content);
+                    if (isAtTop && !hasBottomAlternative) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "primary-action-not-thumb-zone",
+                            severity: "info",
+                            message: "Primary action button at top - may be hard to reach on mobile",
+                            suggestion: "Consider duplicating important actions in bottom bar for mobile thumb zone",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for FAB (Floating Action Button) positioning
+                if (/FloatingActionButton|fab|FAB/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    // FAB should be bottom-right for right-handed users
+                    const isBottomRight = /bottom.*right|right.*bottom/.test(contextBlock);
+                    if (!isBottomRight) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "fab-not-optimal-position",
+                            severity: "info",
+                            message: "FAB not positioned at bottom-right (optimal thumb zone)",
+                            suggestion: "Position FAB at bottom-right for right-handed thumb reachability",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Thumb Zone Ergonomics",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 20. Mobile Image Srcset
+     * Check for responsive images with srcset for bandwidth optimization
+     */
+    async checkMobileImageSrcset() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let imagesWithoutSrcset = 0;
+        let imagesWithSrcset = 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 img elements (not Next.js Image which handles this)
+                if (/<img\b/.test(line) && !/<Image\b/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    const hasSrcset = /srcSet|srcset/.test(contextBlock);
+                    const hasSizes = /sizes=/.test(contextBlock);
+                    if (!hasSrcset) {
+                        imagesWithoutSrcset++;
+                        // Only flag larger images (not icons)
+                        const isLikelyLargeImage = /hero|banner|product|card|thumbnail/i.test(contextBlock) ||
+                            /w-\[(?:[2-9]\d{2}|[1-9]\d{3})px\]|w-full/.test(contextBlock);
+                        if (isLikelyLargeImage) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "img-no-srcset",
+                                severity: "info",
+                                message: "Large <img> without srcset for responsive images",
+                                suggestion: "Add srcset for different screen sizes or use Next.js <Image> component",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                    else {
+                        imagesWithSrcset++;
+                        if (!hasSizes) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "srcset-no-sizes",
+                                severity: "info",
+                                message: "<img> has srcset but missing sizes attribute",
+                                suggestion: "Add sizes attribute to help browser select correct image size",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check Next.js Image for sizes prop on responsive images
+                if (/<Image\b/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    const hasFill = /fill/.test(contextBlock);
+                    const hasResponsiveWidth = /w-full|width.*%|responsive/i.test(contextBlock);
+                    const hasSizes = /sizes=/.test(contextBlock);
+                    if ((hasFill || hasResponsiveWidth) && !hasSizes) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "next-image-no-sizes",
+                            severity: "info",
+                            message: "Next.js Image with fill/responsive width but no sizes prop",
+                            suggestion: "Add sizes prop like sizes=\"(max-width: 768px) 100vw, 50vw\"",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Mobile Image Srcset",
+            passed: true, // Info only
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 21. Tap Target Size
+     * Verify interactive elements meet minimum 44px tap target
+     * Note: This check focuses on explicit small dimensions, not icon sizes
+     */
+    async checkTapTargetSize() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const MIN_TAP_SIZE = 44;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                if (this.shouldSkipLine(lines, i))
+                    continue;
+                // Only check IconButton specifically - regular Buttons typically have sufficient padding
+                // We need to check the className prop on the IconButton, not children icons
+                if (/<IconButton\b/i.test(line)) {
+                    // Get the IconButton props (up to closing > or multi-line until />)
+                    let propsText = line;
+                    let endIdx = i;
+                    // Find the end of the IconButton opening tag
+                    while (!/>/.test(lines[endIdx]) && endIdx < Math.min(i + 5, lines.length - 1)) {
+                        endIdx++;
+                        propsText += "\n" + lines[endIdx];
+                    }
+                    // Extract className from IconButton props only, not from child icons
+                    // Match className="..." on the IconButton, stopping before icon= or children
+                    const classNameMatch = propsText.match(/className=["']([^"']+)["']/);
+                    const buttonClasses = classNameMatch ? classNameMatch[1] : "";
+                    // Skip if button has padding classes or adequate sizes in className
+                    if (/\bp-\d|min-h-|min-w-|h-1[0-2]|h-[89]|w-1[0-2]|w-[89]/.test(buttonClasses)) {
+                        continue;
+                    }
+                    // Check for explicit small height in the button's className only
+                    const heightMatch = buttonClasses.match(/\bh-(\d+)\b/);
+                    if (heightMatch) {
+                        const height = parseInt(heightMatch[1]);
+                        // Tailwind h-N: h-5=20px, h-6=24px, h-7=28px, h-8=32px, h-9=36px, h-10=40px
+                        const pxHeight = height <= 12 ? height * 4 : height;
+                        if (pxHeight > 0 && pxHeight < 32) { // Only flag very small (< 32px)
+                            issues.push({
+                                file, line: i + 1, type: "tap-target-too-small", severity: "warning",
+                                message: `IconButton height ${pxHeight}px may be too small for touch`,
+                                suggestion: "Use h-10 (40px) or larger, or add padding for 44px tap target",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        return { name: "Tap Target Size", passed: issues.filter((i) => i.severity === "error").length === 0, blocking: false, issues, duration: Date.now() - startTime };
+    }
+    /**
+     * 22. Keyboard Dismiss Patterns
+     */
+    async checkKeyboardDismiss() {
+        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];
+                if (/<form\b|<Form\b/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 30, lines.length)).join("\n");
+                    const hasSubmit = /type=["']submit|onSubmit|handleSubmit/.test(contextBlock);
+                    const hasKeyDown = /onKeyDown|enterKeyHint/.test(contextBlock);
+                    if (!hasSubmit && !hasKeyDown) {
+                        issues.push({
+                            file, line: i + 1, type: "form-no-submit", severity: "info",
+                            message: "Form without submit action for keyboard dismiss",
+                            suggestion: "Add submit button or enterKeyHint for mobile keyboard",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return { name: "Keyboard Dismiss", passed: true, blocking: false, issues, duration: Date.now() - startTime };
+    }
+    /**
+     * 23. Navigation Depth
+     */
+    async checkNavigationDepth() {
+        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];
+                if (/SubMenu|NestedMenu|submenu/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+                    const nestedCount = (contextBlock.match(/SubMenu|NestedMenu|submenu/gi) || []).length;
+                    if (nestedCount > 2) {
+                        issues.push({
+                            file, line: i + 1, type: "deep-nested-menu", severity: "warning",
+                            message: `Deeply nested menu (${nestedCount} levels) - hard on mobile`,
+                            suggestion: "Flatten menu or use breadcrumb navigation",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return { name: "Navigation Depth", passed: issues.filter((i) => i.severity === "error").length === 0, blocking: false, issues, duration: Date.now() - startTime };
+    }
+    /**
+     * 24. Touch Scroll Momentum
+     */
+    async checkTouchScrollMomentum() {
+        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];
+                if (/scroll-snap/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    if (!/scroll-smooth|scroll-behavior/.test(contextBlock)) {
+                        issues.push({
+                            file, line: i + 1, type: "scroll-snap-no-smooth", severity: "info",
+                            message: "Scroll snap without smooth behavior",
+                            suggestion: "Add scroll-smooth for smoother snap scrolling",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return { name: "Touch Scroll Momentum", passed: true, blocking: false, issues, duration: Date.now() - startTime };
+    }
+    /**
+     * 25. Mobile Form Chunking
+     */
+    async checkMobileFormChunking() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const inputCount = (content.match(/<(?:input|Input|TextField|Select)\b/gi) || []).length;
+            if (inputCount > 8 && !/step|wizard|FormSection/i.test(content)) {
+                issues.push({
+                    file, line: 1, type: "long-form-no-chunking", severity: "info",
+                    message: `Form with ${inputCount} inputs - consider chunking into sections`,
+                    suggestion: "Break long forms into sections or multi-step wizard",
+                });
+            }
+        }
+        return { name: "Mobile Form Chunking", passed: true, blocking: false, issues, duration: Date.now() - startTime };
+    }
+    /**
+     * 26. Pinch-to-Zoom Accessibility
+     */
+    async checkPinchToZoom() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            if (!/layout|_app|_document|head/i.test(file))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                if (/user-scalable\s*=\s*["']?no|maximum-scale\s*=\s*["']?1(?:\.0)?["']?/.test(line)) {
+                    issues.push({
+                        file, line: i + 1, type: "zoom-disabled", severity: "error",
+                        message: "Pinch-to-zoom disabled - WCAG violation",
+                        suggestion: "Remove user-scalable=no to allow zoom",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        return { name: "Pinch-to-Zoom", passed: issues.length === 0, blocking: true, issues, duration: Date.now() - startTime };
+    }
+    /**
+     * 27. Text Selection
+     */
+    async checkTextSelection() {
+        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];
+                if (/select-none/.test(line) && /<(?:p|span|div|article)[^>]*select-none/.test(line)) {
+                    issues.push({
+                        file, line: i + 1, type: "content-select-none", severity: "info",
+                        message: "select-none on content - users can't copy text",
+                        suggestion: "Only use select-none on buttons, not content",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        return { name: "Text Selection", passed: true, blocking: false, issues, duration: Date.now() - startTime };
+    }
+    /**
+     * 28. Mobile Date Pickers
+     */
+    async checkMobileDatePickers() {
+        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];
+                if (/<(?:DatePicker|DateTimePicker|TimePicker)\b/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    if (!/mobile|native|useNative/i.test(contextBlock)) {
+                        issues.push({
+                            file, line: i + 1, type: "custom-datepicker-no-mobile", severity: "info",
+                            message: "Custom date picker may not be optimal on mobile",
+                            suggestion: "Consider native date input on mobile",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return { name: "Mobile Date Pickers", passed: true, blocking: false, issues, duration: Date.now() - startTime };
+    }
+    /**
+     * 29. Network Status Indicator
+     * Check for offline/online status handling
+     */
+    async checkNetworkStatusIndicator() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let hasOnlineCheck = false;
+        let hasOfflineUI = false;
+        let hasServiceWorker = false;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            // Check for online/offline detection
+            if (/navigator\.onLine|useOnline|useNetworkState|isOnline|isOffline/i.test(content)) {
+                hasOnlineCheck = true;
+            }
+            // Check for offline UI
+            if (/offline.*banner|offline.*indicator|no.*connection|network.*error/i.test(content)) {
+                hasOfflineUI = true;
+            }
+            // Check for service worker
+            if (/serviceWorker|workbox|sw\.js/i.test(content)) {
+                hasServiceWorker = true;
+            }
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for fetch without offline handling
+                if (/fetch\(|useMutation|useQuery/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+                    const hasNetworkError = /network.*error|offline|onLine|retry/i.test(contextBlock);
+                    // Only flag if it's a user-facing data fetch
+                    if (/useQuery|useMutation/.test(line) && !hasNetworkError && !hasOnlineCheck) {
+                        // This is tracked globally, not per-instance
+                    }
+                }
+            }
+        }
+        // Global check
+        if (!hasOnlineCheck && !hasOfflineUI) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-offline-handling",
+                severity: "info",
+                message: "No offline/online status detection found",
+                suggestion: "Add navigator.onLine check or useOnline hook to show offline indicator",
+            });
+        }
+        if (hasOnlineCheck && !hasOfflineUI) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "online-check-no-ui",
+                severity: "info",
+                message: "Online status checked but no offline UI indicator found",
+                suggestion: "Add visible banner or toast when user goes offline",
+            });
+        }
+        return {
+            name: "Network Status Indicator",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 30. iOS Smart App Banner
+     * Check for smart app banner meta tags
+     */
+    async checkIOSSmartAppBanner() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let hasSmartBanner = false;
+        let hasAppId = false;
+        for (const file of files) {
+            if (!/layout|_app|_document|head/i.test(file))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            if (/apple-itunes-app/.test(content)) {
+                hasSmartBanner = true;
+                if (/app-id=/.test(content)) {
+                    hasAppId = true;
+                }
+            }
+            // Check for custom app install prompts
+            if (/installPrompt|beforeinstallprompt|AddToHomeScreen/i.test(content)) {
+                hasSmartBanner = true;
+            }
+        }
+        // This is optional - only suggest if it looks like they have a native app
+        // We can't really detect this, so this is a very light check
+        return {
+            name: "iOS Smart App Banner",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 31. Color Scheme Detection
+     * Check for prefers-color-scheme handling
+     */
+    async checkColorSchemeDetection() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const cssFiles = await this.getCssFiles();
+        let hasColorScheme = false;
+        let hasDarkMode = false;
+        let hasSystemPreference = false;
+        // Check CSS
+        for (const file of cssFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/prefers-color-scheme/.test(content)) {
+                hasColorScheme = true;
+                hasSystemPreference = true;
+            }
+            if (/dark:|\.dark\s|dark-mode|color-scheme:\s*dark/i.test(content)) {
+                hasDarkMode = true;
+            }
+        }
+        // Check TSX
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/prefers-color-scheme|useColorScheme|useTheme|darkMode/i.test(content)) {
+                hasColorScheme = true;
+            }
+            if (/dark:|theme.*dark|isDark|darkMode/i.test(content)) {
+                hasDarkMode = true;
+            }
+            if (/system|matchMedia.*prefers-color-scheme/i.test(content)) {
+                hasSystemPreference = true;
+            }
+        }
+        if (hasDarkMode && !hasSystemPreference) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "dark-mode-no-system-pref",
+                severity: "info",
+                message: "Dark mode exists but may not respect system preference",
+                suggestion: "Add @media (prefers-color-scheme: dark) or detect system preference",
+            });
+        }
+        if (!hasDarkMode) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-dark-mode",
+                severity: "info",
+                message: "No dark mode support detected - important for OLED mobile screens",
+                suggestion: "Add dark mode support using Tailwind dark: classes or CSS variables",
+            });
+        }
+        return {
+            name: "Color Scheme Detection",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 32. Haptic Feedback
+     * Check for vibration API on important actions
+     */
+    async checkHapticFeedback() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let hasVibration = false;
+        let hasHapticFeedback = false;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/navigator\.vibrate|Vibration|haptic/i.test(content)) {
+                hasVibration = true;
+            }
+            if (/useHaptic|hapticFeedback|taptic/i.test(content)) {
+                hasHapticFeedback = true;
+            }
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for critical actions that might benefit from haptic
+                if (/handleDelete|handleSubmit|handlePurchase|handlePayment|onError/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    if (!hasVibration && !hasHapticFeedback) {
+                        // Don't flag individual instances, just track globally
+                    }
+                }
+            }
+        }
+        // Optional feature - just informational
+        if (!hasVibration && !hasHapticFeedback) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-haptic-feedback",
+                severity: "info",
+                message: "No haptic feedback detected - consider for critical actions",
+                suggestion: "Add navigator.vibrate([10]) for subtle feedback on important actions",
+            });
+        }
+        return {
+            name: "Haptic Feedback",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 33. Font Loading Strategy
+     * Check for font-display and system font fallbacks
+     */
+    async checkFontLoadingStrategy() {
+        const startTime = Date.now();
+        const issues = [];
+        const cssFiles = await this.getCssFiles();
+        const files = await this.getTsxFiles();
+        let hasFontDisplay = false;
+        let hasSystemFallback = false;
+        let hasFontPreload = false;
+        // Check CSS
+        for (const file of cssFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            if (/font-display:\s*(?:swap|optional|fallback)/.test(content)) {
+                hasFontDisplay = true;
+            }
+            // Check for system font fallback
+            if (/system-ui|-apple-system|BlinkMacSystemFont|Segoe UI/.test(content)) {
+                hasSystemFallback = true;
+            }
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check @font-face without font-display
+                if (/@font-face/.test(line)) {
+                    const fontBlock = content.substring(content.indexOf(line), content.indexOf("}", content.indexOf(line)) + 1);
+                    if (!/font-display/.test(fontBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "font-face-no-display",
+                            severity: "warning",
+                            message: "@font-face without font-display causes FOIT on mobile",
+                            suggestion: "Add font-display: swap to show fallback font while loading",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        // Check for font preload in layout files
+        for (const file of files) {
+            if (!/layout|_app|_document|head/i.test(file))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            if (/rel=["']preload["'][^>]*as=["']font/.test(content) ||
+                /next\/font|@next\/font/.test(content)) {
+                hasFontPreload = true;
+            }
+        }
+        if (!hasFontDisplay && !hasFontPreload) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-font-loading-strategy",
+                severity: "info",
+                message: "No font loading optimization detected",
+                suggestion: "Use next/font or add font-display: swap and preload critical fonts",
+            });
+        }
+        if (!hasSystemFallback) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-system-font-fallback",
+                severity: "info",
+                message: "No system font fallback in font stack",
+                suggestion: "Add system-ui, -apple-system as fallback for faster initial render",
+            });
+        }
+        return {
+            name: "Font Loading Strategy",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 34. Passive Event Listeners
+     * Check for passive scroll/touch listeners for better performance
+     */
+    async checkPassiveEventListeners() {
+        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 addEventListener with scroll/touch/wheel
+                if (/addEventListener\s*\(\s*["'](?:scroll|touchstart|touchmove|wheel)["']/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 3, lines.length)).join("\n");
+                    if (!/passive:\s*true|\{\s*passive/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "scroll-listener-not-passive",
+                            severity: "warning",
+                            message: "Scroll/touch listener without passive option hurts mobile scroll performance",
+                            suggestion: "Add { passive: true } or use React's built-in passive handling",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for onScroll handlers that might block
+                if (/onScroll=\{[^}]*preventDefault/.test(line)) {
+                    issues.push({
+                        file,
+                        line: i + 1,
+                        type: "scroll-prevent-default",
+                        severity: "warning",
+                        message: "preventDefault in scroll handler blocks smooth scrolling",
+                        suggestion: "Avoid preventDefault in scroll handlers if possible",
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+                // Check for wheel handler without passive
+                if (/onWheel=/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    if (/preventDefault/.test(contextBlock)) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "wheel-prevent-default",
+                            severity: "info",
+                            message: "Wheel handler with preventDefault may affect trackpad scrolling",
+                            suggestion: "Consider using CSS touch-action instead of JS prevention",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Passive Event Listeners",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 35. Viewport Resize Handling
+     * Check for keyboard resize handling on Android
+     */
+    async checkViewportResizeHandling() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let hasVisualViewport = false;
+        let hasResizeHandler = false;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/visualViewport/.test(content)) {
+                hasVisualViewport = true;
+            }
+            if (/resize.*keyboard|keyboard.*resize|innerHeight/i.test(content)) {
+                hasResizeHandler = true;
+            }
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for fixed bottom elements that might be hidden by keyboard
+                if (/fixed.*bottom-0|sticky.*bottom-0/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    // Check if it's a form or input-related
+                    const hasInputNearby = /input|Input|TextField|form|Form/i.test(contextBlock);
+                    if (hasInputNearby && !hasVisualViewport && !hasResizeHandler) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "fixed-bottom-keyboard-issue",
+                            severity: "info",
+                            message: "Fixed bottom element near inputs - may be hidden by mobile keyboard",
+                            suggestion: "Use visualViewport API to adjust position when keyboard opens",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        // Check for apps with forms but no keyboard handling
+        let hasFormsWithFixedElements = false;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            if (/<form|<Form/i.test(content) && /fixed.*bottom|sticky.*bottom/.test(content)) {
+                hasFormsWithFixedElements = true;
+                break;
+            }
+        }
+        if (hasFormsWithFixedElements && !hasVisualViewport) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-visual-viewport-api",
+                severity: "info",
+                message: "Forms with fixed elements but no visualViewport handling",
+                suggestion: "Use window.visualViewport for accurate viewport size with mobile keyboard",
+            });
+        }
+        return {
+            name: "Viewport Resize Handling",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 36. Network-Aware Loading
+     * Check for connection-aware image/data loading
+     */
+    async checkNetworkAwareLoading() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        let hasNetworkInfo = false;
+        let hasLazyLoading = false;
+        let hasProgressiveImages = false;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            // Check for Network Information API
+            if (/navigator\.connection|effectiveType|saveData|NetworkInformation/i.test(content)) {
+                hasNetworkInfo = true;
+            }
+            // Check for lazy loading
+            if (/loading=["']lazy|LazyLoad|lazy.*load|IntersectionObserver/i.test(content)) {
+                hasLazyLoading = true;
+            }
+            // Check for progressive images
+            if (/blur.*placeholder|placeholder.*blur|lqip|progressive/i.test(content)) {
+                hasProgressiveImages = true;
+            }
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for large data fetches without pagination
+                if (/useQuery|useSWR|fetch/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 15, lines.length)).join("\n");
+                    // Check for limit/pagination
+                    const hasPagination = /limit|page|offset|cursor|take|first|last/i.test(contextBlock);
+                    const hasInfinite = /infinite|loadMore|fetchMore/i.test(contextBlock);
+                    // Only flag if fetching "all" without pagination
+                    if (/getAll|fetchAll|loadAll/i.test(line) && !hasPagination && !hasInfinite) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "fetch-all-no-pagination",
+                            severity: "info",
+                            message: "Fetching all data without pagination - heavy on mobile networks",
+                            suggestion: "Add pagination or infinite scroll for large data sets",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        if (!hasLazyLoading) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-lazy-loading",
+                severity: "info",
+                message: "No image lazy loading detected",
+                suggestion: "Add loading=\"lazy\" to below-fold images for faster initial load",
+            });
+        }
+        if (!hasProgressiveImages) {
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "no-progressive-images",
+                severity: "info",
+                message: "No progressive/blur-up image loading detected",
+                suggestion: "Use Next.js Image placeholder=\"blur\" for better perceived performance",
+            });
+        }
+        return {
+            name: "Network-Aware Loading",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Run all checks
+     */
+    async runAll(filter) {
+        const startTime = Date.now();
+        const checks = [];
+        const checkMap = {
+            safearea: () => this.checkSafeAreaInsets(),
+            inputs: () => this.checkInputTypes(),
+            fonts: () => this.checkFontSizeMinimum(),
+            overflow: () => this.checkHorizontalOverflow(),
+            viewport: () => this.checkViewportUnits(),
+            hover: () => this.checkHoverMediaQuery(),
+            labels: () => this.checkFormLabels(),
+            sticky: () => this.checkStickyPosition(),
+            orientation: () => this.checkOrientationSupport(),
+            touch: () => this.checkTouchAction(),
+            focus: () => this.checkMobileMenuFocus(),
+            bottomnav: () => this.checkBottomNavigation(),
+            pulltorefresh: () => this.checkPullToRefresh(),
+            tables: () => this.checkMobileTablePatterns(),
+            modals: () => this.checkMobileModalSizing(),
+            overscroll: () => this.checkOverscrollBehavior(),
+            pwa: () => this.checkPWAMetaTags(),
+            autofill: () => this.checkMobileAutofillStyling(),
+            thumbzone: () => this.checkThumbZoneErgonomics(),
+            srcset: () => this.checkMobileImageSrcset(),
+            taptarget: () => this.checkTapTargetSize(),
+            keyboard: () => this.checkKeyboardDismiss(),
+            navdepth: () => this.checkNavigationDepth(),
+            momentum: () => this.checkTouchScrollMomentum(),
+            formchunk: () => this.checkMobileFormChunking(),
+            zoom: () => this.checkPinchToZoom(),
+            textselect: () => this.checkTextSelection(),
+            datepicker: () => this.checkMobileDatePickers(),
+            network: () => this.checkNetworkStatusIndicator(),
+            smartbanner: () => this.checkIOSSmartAppBanner(),
+            colorscheme: () => this.checkColorSchemeDetection(),
+            haptic: () => this.checkHapticFeedback(),
+            fontload: () => this.checkFontLoadingStrategy(),
+            passive: () => this.checkPassiveEventListeners(),
+            vpresize: () => this.checkViewportResizeHandling(),
+            networkaware: () => this.checkNetworkAwareLoading(),
+        };
+        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 Mobile UX",
+            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.UIMobileUXModule = UIMobileUXModule;
+// CLI ENTRY POINT
+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 UIMobileUXModule({ verbose });
+    const result = await module.runAll(filter);
+    console.log((0, console_chars_1.createDivider)(80, "heavy"));
+    console.log(`${console_chars_1.emoji.mobile} UI MOBILE UX 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"));
+    if (result.summary.errors > 0) {
+        console.log(`\n${console_chars_1.emoji.error} MOBILE UX CHECK FAILED\n`);
+        process.exit(1);
+    }
+    else {
+        console.log(`\n${console_chars_1.emoji.success} MOBILE UX CHECK PASSED\n`);
+        process.exit(0);
+    }
+}
+if (require.main === module)
+    main();
+//# sourceMappingURL=ui-mobile-ux.js.map