@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-layout.js

@@ -0,0 +1,1371 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Consolidated UI Layout Preflight
+ *
+ * Combines layout checks into one comprehensive module:
+ * - page-template-enforcement (layout templates) - BLOCKING
+ * - container-spacing (pt/pb balance) - BLOCKING
+ * - container-centering (Container in flex layouts needs wrapper) - BLOCKING
+ * - page-content-centering (frontend pages need maxWidth + margin auto) - BLOCKING
+ * - page-width-consistency (only 80rem or full width allowed) - WARNING
+ * - header-content-spacing (content after UnifiedHeader needs mt) - WARNING
+ * - breadcrumb-gap (breadcrumbs in gapped flex containers) - WARNING
+ * - content-padding (sidebar content area padding consistency) - WARNING
+ * - section-spacing (gaps between sections)
+ * - excessive-spacing (py-12+ detection) - BLOCKING
+ * - sidebar-maxwidth (no hardcoded maxWidth in sidebar layouts) - BLOCKING
+ * - filter-card-layout (horizontal filter cards) - BLOCKING
+ * - filter-section-in-card (filter sections must use Card, not Paper) - BLOCKING
+ * - page-content-wrapper-consistency (Box vs Tailwind)
+ *
+ * Usage:
+ *   pnpm preflight:ui-layout              # All layout checks
+ *   pnpm preflight:ui-layout templates    # Page templates only
+ *   pnpm preflight:ui-layout containers   # Container spacing only
+ *   pnpm preflight:ui-layout centering    # Container centering only
+ *   pnpm preflight:ui-layout page-centering # Page content centering only
+ *   pnpm preflight:ui-layout page-width   # Page width consistency only
+ *   pnpm preflight:ui-layout header-content # Header-content spacing only
+ *   pnpm preflight:ui-layout breadcrumb-gap # Breadcrumb gap check only
+ *   pnpm preflight:ui-layout content-padding # Content area padding consistency only
+ *   pnpm preflight:ui-layout sections     # Section spacing only
+ *   pnpm preflight:ui-layout excessive    # Excessive spacing only
+ *   pnpm preflight:ui-layout sidebar      # Sidebar maxWidth only
+ *   pnpm preflight:ui-layout filters      # Filter card layout only
+ *   pnpm preflight:ui-layout filter-card  # Filter section in card only
+ *   pnpm preflight:ui-layout wrappers     # Content wrappers 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.UILayoutPreflightModule = 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 universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+const concurrency_config_1 = require("../../shared/concurrency-config");
+// Cached file getters
+let _cachedPageFiles = null;
+async function getCachedPageFiles() {
+    if (!_cachedPageFiles) {
+        _cachedPageFiles = await file_cache_1.fileCache.getPageFiles();
+    }
+    return _cachedPageFiles;
+}
+let _cachedClientFiles = null;
+async function getCachedClientFiles() {
+    if (!_cachedClientFiles) {
+        _cachedClientFiles = await file_cache_1.fileCache.getClientFiles();
+    }
+    return _cachedClientFiles;
+}
+let _cachedAppTsxFiles = null;
+async function getCachedAppTsxFiles() {
+    if (!_cachedAppTsxFiles) {
+        _cachedAppTsxFiles = await file_cache_1.fileCache.getAppTSX();
+    }
+    return _cachedAppTsxFiles;
+}
+let _cachedAppComponentsTsxFiles = null;
+async function getCachedAppComponentsTsxFiles() {
+    if (!_cachedAppComponentsTsxFiles) {
+        _cachedAppComponentsTsxFiles = await file_cache_1.fileCache.getAppAndComponentsTSX();
+    }
+    return _cachedAppComponentsTsxFiles;
+}
+const ALLOWED_TEMPLATES = [
+    "PageLayout",
+    "PageContainer",
+    "SectionLayout",
+    "ContentPageLayout",
+    "ContentLayout",
+    "DashboardLayout",
+    "LayoutContainer",
+    "ServerLayout",
+    "SellerPageLayout",
+    "AdminPageLayout",
+    "AccountPageLayout",
+    "BuyerPageLayout",
+    "AuthLayout",
+    "AuthPageLayout",
+    "StandardPageLayout",
+    "TemplatesLayout",
+    "AnalyticsLayout",
+    "ListingsLayout",
+];
+const EXEMPT_PAGES = [
+    "app/layout.tsx",
+    "app/error.tsx",
+    "app/global-error.tsx",
+    "app/not-found.tsx",
+    "app/providers.tsx",
+    "app/HomePageClient.tsx",
+    "app/page.tsx",
+    // Dev-only tools and dashboards are not required to follow production layout templates
+    "app/dev/",
+    // Frontend pages with custom layouts (like homepage pattern)
+    "app/how-it-works/page.tsx",
+    "app/how-it-works/HowItWorksClient.tsx",
+    // Public store pages with custom layouts (stores use ServerLayout in parent)
+    "app/stores/[username]/policies/page.tsx",
+    "app/stores/[username]/policies/StorePoliciesClient.tsx",
+    // Pages that delegate to client components with layouts (detection sometimes fails on Windows paths)
+    "app/account/analytics/page.tsx",
+    "app/account/dashboard/page.tsx",
+    "app/store/orders/page.tsx",
+    // Redirect stubs
+    "app/account/listings/new/page.tsx",
+    // Client-only helpers colocated with pages (not actual page templates)
+    "app/product/[slug]/ProductPageClient.tsx",
+    // Client components that are not pages (filter wrappers, etc.)
+    "app/checklists/ChecklistsPageClient.tsx",
+    // Docs pages inherit layout from app/docs/layout.tsx (which uses ServerLayout)
+    "app/docs/page.tsx",
+    "app/docs/selling/page.tsx",
+    "app/docs/shipping/page.tsx",
+    "app/docs/grading/page.tsx",
+    "app/docs/getting-started/page.tsx",
+    "app/docs/faq/page.tsx",
+    "app/docs/integrations/page.tsx",
+    "app/docs/buying/page.tsx",
+    "app/docs/ai-recognition/page.tsx",
+    "app/docs/grid/page.tsx",
+    "app/docs/grid/GridDocumentationClient.tsx",
+    // Help pages use HelpPageLayout which wraps ServerLayout
+    "app/help/page.tsx",
+    "app/help/HelpClient.tsx",
+    "app/help/article/[articleId]/page.tsx",
+    "app/help/article/[articleId]/ArticleDetailClient.tsx",
+];
+// Get concurrency from shared config (respects PREFLIGHT_CONCURRENCY env var)
+const concurrencyConfig = (0, concurrency_config_1.getConcurrencyConfig)();
+class UILayoutPreflightModule {
+    verbose;
+    parallel = false;
+    clientComponentsWithLayout = new Set();
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+        this.parallel = options.parallel || concurrencyConfig.parallel;
+    }
+    /**
+     * Check if a client component file uses a layout template (with recursion for delegation)
+     */
+    checkClientComponentHasLayout(clientFilePath, visited = new Set()) {
+        // Normalize path for consistent comparison
+        const normalizedPath = clientFilePath.replace(/\\/g, "/");
+        // Prevent infinite recursion
+        if (visited.has(normalizedPath))
+            return false;
+        visited.add(normalizedPath);
+        try {
+            // Try both forward and backslash versions for Windows compatibility
+            let content;
+            try {
+                content = fs.readFileSync(normalizedPath, "utf8");
+            }
+            catch {
+                // Try with backslashes on Windows
+                content = fs.readFileSync(clientFilePath, "utf8");
+            }
+            // Direct layout usage
+            const hasTemplateImport = ALLOWED_TEMPLATES.some((t) => new RegExp(`import[\\s\\S]*?\\b${t}\\b[\\s\\S]*?from`, "i").test(content));
+            const usesTemplate = ALLOWED_TEMPLATES.some((t) => new RegExp(`<${t}[\\s>]`, "i").test(content));
+            if (hasTemplateImport && usesTemplate)
+                return true;
+            // Check if it's a re-export (e.g., export { X as Y } from "../../../../../...")
+            const reExportMatch = content.match(/export\s*\{[^}]*\}\s*from\s*["']([^"']+)["']/);
+            if (reExportMatch) {
+                const reExportPath = reExportMatch[1];
+                if (reExportPath.startsWith("@/")) {
+                    // Alias import - assume it has layout if it's a known component path
+                    return true;
+                }
+            }
+            // Check if it delegates to another client component (renders <SomeClient />)
+            const delegateMatch = content.match(/<(\w+Client)[\s\/>]/);
+            if (delegateMatch) {
+                const delegatedComponent = delegateMatch[1];
+                const importMatch = content.match(new RegExp(`import\\s*\\{[^}]*${delegatedComponent}[^}]*\\}\\s*from\\s*["']([^"']+)["']`));
+                if (importMatch) {
+                    const importPath = importMatch[1];
+                    if (importPath.startsWith("@/")) {
+                        // Alias import to known component - assume it has layout
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Check if a page.tsx delegates to a client component that has a layout
+     */
+    pageRendersClientWithLayout(content, pageDir) {
+        // Pattern: <SomeClient /> anywhere in the return statement (including inside fragments)
+        // This handles: return <SomeClient />, return (<><script/><SomeClient /></>), etc.
+        const clientComponentMatch = content.match(/<(\w+Client)[\s\/>]/);
+        if (!clientComponentMatch)
+            return false;
+        const clientComponentName = clientComponentMatch[1];
+        // Check for import of this client component (handles both default and named imports)
+        // Default: import SomeClient from "./SomeClient"
+        // Named: import { SomeClient } from "./SomeClient"
+        // Named with others: import { SomeClient, other } from "./SomeClient"
+        const defaultImportMatch = content.match(new RegExp(`import\\s+${clientComponentName}\\s+from\\s*["']([^"']+)["']`));
+        const namedImportMatch = content.match(new RegExp(`import\\s*\\{[^}]*\\b${clientComponentName}\\b[^}]*\\}\\s*from\\s*["']([^"']+)["']`));
+        const importMatch = defaultImportMatch || namedImportMatch;
+        if (!importMatch)
+            return false;
+        const importPath = importMatch[1];
+        // Resolve the client component file path
+        let clientFilePath;
+        if (importPath.startsWith("./") || importPath.startsWith("../")) {
+            // Relative import - resolve from page directory
+            // Normalize pageDir to use forward slashes for consistency
+            const normalizedPageDir = pageDir.replace(/\\/g, "/");
+            clientFilePath = path.join(normalizedPageDir, importPath).replace(/\\/g, "/");
+            if (!clientFilePath.endsWith(".tsx"))
+                clientFilePath += ".tsx";
+        }
+        else {
+            // Could be an alias like @/ - skip for now, assume it has layout
+            return true;
+        }
+        // Check if the client component uses a layout template
+        return this.checkClientComponentHasLayout(clientFilePath);
+    }
+    /**
+     * Check if a client component file is valid (has layout, re-exports, or delegates)
+     */
+    isClientComponentValid(content, file) {
+        // Direct layout usage - check for import (handles multi-line imports)
+        const hasTemplateImport = ALLOWED_TEMPLATES.some((t) => new RegExp(`import[\\s\\S]*?\\b${t}\\b[\\s\\S]*?from`, "i").test(content));
+        const usesTemplate = ALLOWED_TEMPLATES.some((t) => new RegExp(`<${t}[\\s>]`, "i").test(content));
+        if (hasTemplateImport && usesTemplate)
+            return true;
+        // Re-export pattern (e.g., export { X as Y } from "../../../../../...")
+        const reExportMatch = content.match(/export\s*\{[^}]*\}\s*from\s*["']([^"']+)["']/);
+        if (reExportMatch)
+            return true;
+        // Delegates to another client component that uses @/ alias (assumed to have layout)
+        const delegateMatch = content.match(/<(\w+Client)[\s\/>]/);
+        if (delegateMatch) {
+            const delegatedComponent = delegateMatch[1];
+            const importMatch = content.match(new RegExp(`import\\s*\\{[^}]*${delegatedComponent}[^}]*\\}\\s*from\\s*["']@/`));
+            if (importMatch)
+                return true;
+        }
+        return false;
+    }
+    /**
+     * Page Template Enforcement - BLOCKING
+     */
+    async checkPageTemplates() {
+        const startTime = Date.now();
+        const issues = [];
+        const pageFiles = await getCachedPageFiles();
+        const clientFiles = await getCachedClientFiles();
+        const allFiles = [...pageFiles, ...clientFiles];
+        for (const file of allFiles) {
+            const normalizedFile = file.replace(/\\/g, "/");
+            if (EXEMPT_PAGES.some((exempt) => normalizedFile.includes(exempt)))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            const isPageFile = file.endsWith("page.tsx");
+            const isClientFile = file.endsWith("Client.tsx");
+            const pageDir = path.dirname(file);
+            const hasTemplateImport = ALLOWED_TEMPLATES.some((t) => new RegExp(`import[\\s\\S]*?\\b${t}\\b[\\s\\S]*?from`, "i").test(content));
+            const usesTemplate = ALLOWED_TEMPLATES.some((t) => new RegExp(`<${t}[\\s>]`, "i").test(content));
+            if (!hasTemplateImport || !usesTemplate) {
+                const isRedirectOnly = content.includes("redirect(") && !content.includes("return (");
+                const isReExport = /export\s*\{[^}]*default[^}]*\}\s*from/.test(content);
+                // Check if this is a page.tsx that delegates to a client component with layout
+                const delegatesToClientWithLayout = isPageFile && this.pageRendersClientWithLayout(content, pageDir);
+                // Check if this is a client component that re-exports or delegates to another valid component
+                const isValidClientComponent = isClientFile && this.isClientComponentValid(content, file);
+                if (!isRedirectOnly &&
+                    !isReExport &&
+                    !delegatesToClientWithLayout &&
+                    !isValidClientComponent) {
+                    issues.push({
+                        file,
+                        line: 1,
+                        type: "missing-template",
+                        severity: "error",
+                        message: "Page missing layout template",
+                        suggestion: "Wrap content in <PageLayout> or <SectionLayout>",
+                    });
+                }
+            }
+        }
+        return {
+            name: "Page Template Enforcement",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Container Spacing (pt/pb balance) - BLOCKING
+     */
+    async checkContainerSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getCachedAppTsxFiles();
+        const containerPattern = /<Container[^>]*sx=\{\{[^}]*flex:\s*1[^}]*pb:[^}]*\}\}/g;
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            let match;
+            containerPattern.lastIndex = 0;
+            while ((match = containerPattern.exec(content)) !== null) {
+                if (!match[0].includes("pt:")) {
+                    const lineNumber = content.substring(0, match.index).split("\n").length;
+                    issues.push({
+                        file,
+                        line: lineNumber,
+                        type: "container-missing-pt",
+                        severity: "error",
+                        message: "Container has pb but missing pt (causes huge gap after header)",
+                        suggestion: 'Add pt to match pb: sx={{ flex: 1, pt: "var(--spacing-8)", pb: "var(--spacing-8)" }}',
+                        snippet: lines[lineNumber - 1]?.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        return {
+            name: "Container Spacing",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Header-Content Structure - Checks for proper content structure after UnifiedHeader variant="page"
+     *
+     * Standard:
+     * - Content after UnifiedHeader variant="page" SHOULD be wrapped in <Stack spacing={3}> (rule 10b intent)
+     * - Do NOT add mt-* / marginTop immediately after the header; UnifiedHeader already provides marginBottom.
+     */
+    async checkHeaderContentSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        // Check client components that use UnifiedHeader with variant="page"
+        const files = await getCachedClientFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Find UnifiedHeader with variant="page"
+            const headerPattern = /<UnifiedHeader[^>]*variant=["']page["'][^>]*\/>/g;
+            let match;
+            while ((match = headerPattern.exec(content)) !== null) {
+                const headerEndIndex = match.index + match[0].length;
+                const lineNumber = content.substring(0, headerEndIndex).split("\n").length;
+                // Get the next 800 chars after the header to find the first content element
+                const afterHeader = content.substring(headerEndIndex, headerEndIndex + 800);
+                // Get the full opening tag of the first element
+                const fullTagMatch = afterHeader.match(/^\s*<(\w+)[^>]*>/s);
+                if (!fullTagMatch)
+                    continue;
+                const fullTag = fullTagMatch[0];
+                const elementName = fullTagMatch[1];
+                // Skip if it's a fragment, comment, or another UnifiedHeader
+                if (elementName === ">" || elementName === "UnifiedHeader")
+                    continue;
+                // Get the actual line where the first element starts
+                const elementLineNumber = lineNumber + afterHeader.substring(0, fullTagMatch.index).split("\n").length - 1;
+                // Check if wrapped in Stack (best practice per rule 10b)
+                const isStack = elementName === "Stack";
+                // VIOLATION: Not using Stack wrapper
+                if (!isStack) {
+                    issues.push({
+                        file,
+                        line: elementLineNumber,
+                        type: "header-content-not-stack",
+                        severity: "warning",
+                        message: `Content after UnifiedHeader variant="page" should use a Stack wrapper (spacing={3})`,
+                        suggestion: `Wrap content in <Stack spacing={3}> (do not add mt-*)`,
+                        snippet: lines[elementLineNumber - 1]?.trim().substring(0, 100),
+                    });
+                }
+                else {
+                    // Stack is used - warn if it adds marginTop right after a page header.
+                    const hasMtClass = /className=["'][^"']*\bmt-\d+\b/.test(fullTag);
+                    const hasMtStyle = /mt:\s*["']var\(--spacing-\d+\)["']/.test(fullTag) ||
+                        /marginTop:\s*["']var\(--spacing-\d+\)["']/.test(fullTag);
+                    if (hasMtClass || hasMtStyle) {
+                        issues.push({
+                            file,
+                            line: elementLineNumber,
+                            type: "header-content-has-mt",
+                            severity: "warning",
+                            message: `Stack after UnifiedHeader has marginTop; this usually creates doubled spacing`,
+                            suggestion: `Remove mt/marginTop from the Stack after UnifiedHeader (header already has marginBottom)`,
+                            snippet: lines[elementLineNumber - 1]?.trim().substring(0, 100),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Header-Content Structure",
+            passed: issues.filter((i) => i.severity === "error").length === 0,
+            blocking: false, // Warning-only guidance
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Section Spacing (gaps between sections)
+     */
+    async checkSectionSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await file_cache_1.fileCache.getFiles("{app,components}/**/*.{tsx,jsx}", {
+            ignore: ["**/node_modules/**", "**/.next/**", "**/ui/**"],
+        });
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                // Check for consecutive sections without gap
+                if (line.includes("</section>") || line.includes("</SectionLayout>")) {
+                    const nextLine = lines[index + 1];
+                    if (nextLine && (nextLine.includes("<section") || nextLine.includes("<SectionLayout"))) {
+                        const prevLines = lines.slice(Math.max(0, index - 10), index).join("\n");
+                        if (!prevLines.includes("gap:") &&
+                            !prevLines.includes('gap="') &&
+                            !prevLines.includes("gap-")) {
+                            issues.push({
+                                file,
+                                line: index + 2,
+                                type: "missing-section-gap",
+                                severity: "warning",
+                                message: "Consecutive sections without gap",
+                                suggestion: 'Add gap: "var(--spacing-12)" to parent container',
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        return {
+            name: "Section Spacing",
+            passed: true,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Excessive Spacing Detection (py-12+) - BLOCKING
+     */
+    async checkExcessiveSpacing() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getCachedAppComponentsTsxFiles();
+        const excessivePatterns = [
+            { regex: /className="[^"]*\b(py-1[2-9]|py-2[0-9])\b/g, type: "py" },
+            { regex: /className="[^"]*\b(mb-1[2-9]|mb-2[0-9])\b/g, type: "mb" },
+            { regex: /className="[^"]*\b(mt-1[2-9]|mt-2[0-9])\b/g, type: "mt" },
+            { regex: /className="[^"]*\b(gap-1[2-9]|gap-2[0-9])\b/g, type: "gap" },
+        ];
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                excessivePatterns.forEach(({ regex, type }) => {
+                    regex.lastIndex = 0;
+                    const matches = [...line.matchAll(regex)];
+                    matches.forEach((match) => {
+                        issues.push({
+                            file,
+                            line: index + 1,
+                            type: `excessive-${type}`,
+                            severity: "error",
+                            message: `Excessive spacing "${match[1]}" (48px+) causes huge gaps`,
+                            suggestion: "Use var(--spacing-8) or smaller",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    });
+                });
+            });
+        }
+        return {
+            name: "Excessive Spacing",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Sidebar MaxWidth Constraints - BLOCKING
+     * Detects hardcoded maxWidth in sidebar layouts which causes inconsistent widths
+     */
+    async checkSidebarMaxWidth() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getCachedAppTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Check if file has a sidebar layout
+            const hasSidebar = /SellerSidebar|AdminSidebar|BuyerSidebar/.test(content);
+            if (!hasSidebar)
+                continue;
+            // Check for nested Box with hardcoded maxWidth in style prop
+            const styleMaxWidthPattern = /<Box[^>]*style=\{[^}]*maxWidth:\s*["']?\d+(?:px)?["']?/g;
+            let match;
+            while ((match = styleMaxWidthPattern.exec(content)) !== null) {
+                const lineNumber = content.substring(0, match.index).split("\n").length;
+                issues.push({
+                    file,
+                    line: lineNumber,
+                    type: "sidebar-maxwidth",
+                    severity: "error",
+                    message: "Hardcoded maxWidth in sidebar layout causes inconsistent widths",
+                    suggestion: 'Remove maxWidth. Use: <Box sx={{ flex: 1, px: "var(--spacing-4)", pb: "var(--spacing-8)" }}>',
+                    snippet: lines[lineNumber - 1]?.trim().substring(0, 80),
+                });
+            }
+            // Check for nested Box with hardcoded maxWidth in sx prop
+            const sxMaxWidthPattern = /<Box[^>]*sx=\{[^}]*maxWidth:\s*(?:\d+|["']\d+)/g;
+            while ((match = sxMaxWidthPattern.exec(content)) !== null) {
+                const lineNumber = content.substring(0, match.index).split("\n").length;
+                issues.push({
+                    file,
+                    line: lineNumber,
+                    type: "sidebar-maxwidth",
+                    severity: "error",
+                    message: "Hardcoded maxWidth in sidebar layout causes inconsistent widths",
+                    suggestion: 'Remove maxWidth. Use: <Box sx={{ flex: 1, px: "var(--spacing-4)", pb: "var(--spacing-8)" }}>',
+                    snippet: lines[lineNumber - 1]?.trim().substring(0, 80),
+                });
+            }
+        }
+        return {
+            name: "Sidebar MaxWidth Constraints",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Filter Card Layout - BLOCKING
+     * Detects filter cards using Stack with responsive direction that doesn't work
+     * Filter cards should use inline styles with flexDirection: "row" and flexWrap: "wrap"
+     *
+     * Only checks files that are explicitly filter components (by filename)
+     */
+    async checkFilterCardLayout() {
+        const startTime = Date.now();
+        const issues = [];
+        // Only check files that are explicitly filter components by filename
+        const allFiles = await getCachedAppComponentsTsxFiles();
+        const filterFiles = allFiles.filter((f) => /(?:Filter|Filters)[^/]*\.tsx$/.test(f));
+        for (const file of filterFiles) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Check for Stack with responsive direction object (doesn't work reliably)
+            const brokenPattern = /<Stack[^>]*direction=\{\{\s*xs:\s*["']column["'][^}]*(?:sm|md|lg):\s*["']row["']/g;
+            let match;
+            while ((match = brokenPattern.exec(content)) !== null) {
+                const lineNumber = content.substring(0, match.index).split("\n").length;
+                issues.push({
+                    file,
+                    line: lineNumber,
+                    type: "filter-broken-responsive",
+                    severity: "error",
+                    message: "Filter card uses Stack with responsive direction object (unreliable with @supercatch/ui)",
+                    suggestion: 'Use div with style={{ display: "flex", flexDirection: "row", flexWrap: "wrap", gap: "var(--spacing-3)" }}',
+                    snippet: lines[lineNumber - 1]?.trim().substring(0, 80),
+                });
+            }
+        }
+        return {
+            name: "Filter Card Layout",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Filter Section in Card - BLOCKING
+     * Detects filter sections using Paper instead of Card component.
+     * Filter sections (containing Select dropdowns for filtering) should use Card with CardContent.
+     *
+     * Pattern to detect: <Paper> containing <Select> elements used for filtering
+     * Correct pattern: <Card><CardContent><Select>...</Select></CardContent></Card>
+     */
+    async checkFilterSectionInCard() {
+        const startTime = Date.now();
+        const issues = [];
+        // Check client components that might have filter sections
+        const files = await getCachedClientFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Pattern: Paper containing filter-like content (Selects with filter-related values)
+            // Look for Paper elements that have Select children with "all" or filter-like MenuItems
+            const paperPattern = /<Paper[^>]*>/g;
+            let match;
+            while ((match = paperPattern.exec(content)) !== null) {
+                const startIndex = match.index;
+                const lineNumber = content.substring(0, startIndex).split("\n").length;
+                // Find the closing Paper tag to get the content between
+                let depth = 1;
+                let endIndex = startIndex + match[0].length;
+                while (depth > 0 && endIndex < content.length) {
+                    const nextOpen = content.indexOf("<Paper", endIndex);
+                    const nextClose = content.indexOf("</Paper>", endIndex);
+                    if (nextClose === -1)
+                        break;
+                    if (nextOpen !== -1 && nextOpen < nextClose) {
+                        depth++;
+                        endIndex = nextOpen + 6;
+                    }
+                    else {
+                        depth--;
+                        endIndex = nextClose + 8;
+                    }
+                }
+                const paperContent = content.substring(startIndex, endIndex);
+                // Check if this Paper contains filter-like Select elements
+                const hasFilterSelect = 
+                // Contains Select elements
+                /<Select[^>]*>/.test(paperContent) &&
+                    // AND has filter-related menu items (All Platforms, All Status, etc.)
+                    (/MenuItem[^>]*value=["']all["']/.test(paperContent) ||
+                        /MenuItem[^>]*>All\s+(Platforms?|Status|Orders?|Types?|Categories?)/.test(paperContent) ||
+                        // Or filter-related comments
+                        /\{\/\*\s*Filter/.test(paperContent));
+                if (hasFilterSelect) {
+                    issues.push({
+                        file,
+                        line: lineNumber,
+                        type: "filter-not-in-card",
+                        severity: "error",
+                        message: "Filter section uses Paper instead of Card component",
+                        suggestion: 'Use <Card sx={{ mb: "var(--spacing-4)" }}><CardContent sx={{ p: "var(--spacing-3)" }}>...</CardContent></Card>',
+                        snippet: lines[lineNumber - 1]?.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        return {
+            name: "Filter Section in Card",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Page Content Wrapper Consistency (Box vs Tailwind)
+     *
+     * Detects content wrappers using Tailwind padding classes (px-4, pb-8) instead of
+     * design tokens via style prop. This is especially important for pages with sidebars
+     * where consistent spacing is critical.
+     *
+     * ${emoji.error} WRONG: <Box className="flex-1 px-4 pb-8">
+     * ${emoji.success} CORRECT: <Box style={{ flex: 1, paddingLeft: "var(--spacing-4)", paddingRight: "var(--spacing-4)", paddingBottom: "var(--spacing-8)" }}>
+     */
+    async checkContentWrappers() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getCachedPageFiles();
+        const clientFiles = await getCachedClientFiles();
+        for (const file of [...files, ...clientFiles]) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Check both <div> and <Box> elements with Tailwind padding classes
+            const tailwindPaddingPatterns = [
+                /<div\s+className="[^"]*\b(px-\d+|py-\d+|pb-\d+|pt-\d+)\b[^"]*">/g,
+                /<Box\s+className="[^"]*\b(px-\d+|py-\d+|pb-\d+|pt-\d+)\b[^"]*">/g,
+            ];
+            // Check if file uses proper Box with style prop for padding
+            const hasProperStylePadding = /<Box[^>]*style=\{[^}]*padding(?:Left|Right|Top|Bottom)?:\s*["']var\(--spacing-\d+\)["'][^}]*\}/.test(content) || /<Box[^>]*sx=\{[^}]*px:\s*["']var\(--spacing-\d+\)["'][^}]*\}/.test(content);
+            for (const pattern of tailwindPaddingPatterns) {
+                let match;
+                pattern.lastIndex = 0;
+                while ((match = pattern.exec(content)) !== null) {
+                    const lineNumber = content.substring(0, match.index).split("\n").length;
+                    const contextBefore = content.substring(Math.max(0, match.index - 500), match.index);
+                    // Check if this is a main content wrapper (after breadcrumbs, contains page header, or is in sidebar layout)
+                    const isMainWrapper = contextBefore.includes("<Breadcrumbs") ||
+                        contextBefore.includes('variant="page"') ||
+                        contextBefore.includes("Sidebar") ||
+                        contextBefore.includes("MobileFilterWrapper");
+                    // Skip loading spinners and simple utility containers
+                    const matchedLine = lines[lineNumber - 1] || "";
+                    const isLoadingSpinner = matchedLine.includes("justify-center") &&
+                        (matchedLine.includes("py-8") || matchedLine.includes("py-4")) &&
+                        !matchedLine.includes("px-");
+                    const isSimpleUtility = !matchedLine.includes("flex-1") &&
+                        !matchedLine.includes("px-") &&
+                        matchedLine.includes("py-") &&
+                        matchedLine.split(/\s+/).length <= 4;
+                    // Skip card header patterns (min-h-11 flex items-center is standard card header)
+                    const isCardHeader = matchedLine.includes("min-h-11") &&
+                        matchedLine.includes("flex") &&
+                        matchedLine.includes("items-center");
+                    // Skip if preflight-ignore comment is on previous line
+                    const prevLine = lines[lineNumber - 2] || "";
+                    const hasPrevLineIgnore = prevLine.includes("preflight-ignore");
+                    if (isMainWrapper &&
+                        !hasProperStylePadding &&
+                        !isLoadingSpinner &&
+                        !isSimpleUtility &&
+                        !isCardHeader &&
+                        !hasPrevLineIgnore) {
+                        const elementType = match[0].startsWith("<Box") ? "Box" : "div";
+                        issues.push({
+                            file,
+                            line: lineNumber,
+                            type: "tailwind-padding-on-wrapper",
+                            severity: "warning",
+                            message: `Content wrapper <${elementType}> uses Tailwind padding classes instead of design tokens`,
+                            suggestion: 'Replace className with style={{ paddingLeft: "var(--spacing-4)", paddingRight: "var(--spacing-4)", paddingBottom: "var(--spacing-8)" }}',
+                            snippet: lines[lineNumber - 1]?.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Content Wrapper Consistency",
+            passed: issues.length === 0,
+            blocking: false, // Non-blocking - style preference, not functional issue
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Container Centering in Flex Layouts - BLOCKING
+     *
+     * Detects Container components inside ServerLayout (flex column) that aren't
+     * properly centered. In flex containers, children with width: 100% don't respond
+     * to margin: auto - they need a wrapper with justify-center.
+     *
+     * ${emoji.error} WRONG:
+     * <ServerLayout>
+     *   <Container maxWidth="lg">...</Container>  // Not centered!
+     * </ServerLayout>
+     *
+     * ${emoji.success} CORRECT:
+     * <ServerLayout>
+     *   <Box className="flex-1 flex justify-center">
+     *     <Container maxWidth="lg">...</Container>
+     *   </Box>
+     * </ServerLayout>
+     */
+    async checkContainerCentering() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await getCachedPageFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Check if file uses ServerLayout
+            if (!/<ServerLayout/.test(content))
+                continue;
+            // Find Container elements that are direct children of ServerLayout (not wrapped in centering Box)
+            // Pattern: ServerLayout > ... > Container without a flex justify-center wrapper
+            const containerPattern = /<Container[^>]*maxWidth=/g;
+            let match;
+            while ((match = containerPattern.exec(content)) !== null) {
+                const containerIndex = match.index;
+                const lineNumber = content.substring(0, containerIndex).split("\n").length;
+                // Look backwards to find the parent context (up to 500 chars)
+                const contextBefore = content.substring(Math.max(0, containerIndex - 500), containerIndex);
+                // Check if Container is wrapped in a centering flex container
+                const hasCenteringWrapper = /flex[^"]*justify-center/.test(contextBefore) ||
+                    /display:\s*["']?flex["']?[^}]*justifyContent:\s*["']?center/.test(contextBefore) ||
+                    /justify-content:\s*center/.test(contextBefore);
+                // Check if this Container is inside a sidebar layout (those have different centering needs)
+                const isInSidebarLayout = /SellerPageLayout|AdminPageLayout|AccountPageLayout|BuyerPageLayout/.test(content) ||
+                    /Sidebar/.test(content) ||
+                    // Flex row layouts (sidebar patterns)
+                    /flex-row|flexDirection:\s*["']row/.test(content);
+                // Check if Container is a direct child after header/breadcrumbs (main content area)
+                const isMainContent = contextBefore.includes("<Breadcrumbs") ||
+                    contextBefore.includes("<UnifiedHeader") ||
+                    contextBefore.includes("</UnifiedHeader>");
+                if (!hasCenteringWrapper && !isInSidebarLayout && isMainContent) {
+                    issues.push({
+                        file,
+                        line: lineNumber,
+                        type: "container-not-centered",
+                        severity: "error",
+                        message: "Container in ServerLayout not centered (flex children need wrapper)",
+                        suggestion: 'Wrap Container in <Box className="flex-1 flex justify-center">',
+                        snippet: lines[lineNumber - 1]?.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        return {
+            name: "Container Centering",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Page Content Centering - BLOCKING
+     *
+     * Detects frontend pages (Client components with UnifiedHeader variant="navigation")
+     * that are missing proper page-level centering. These pages should use the standard
+     * pattern: maxWidth: "80rem" + marginLeft: "auto" + marginRight: "auto"
+     *
+     * This catches issues like the how-it-works page where content was left-justified
+     * because it used a flex column layout without proper centering on the main content.
+     *
+     * ${emoji.error} WRONG:
+     * <main style={{ flex: 1, paddingLeft: "var(--spacing-4)" }}>
+     *   <h1>Page Title</h1>  // Left-justified!
+     * </main>
+     *
+     * ${emoji.success} CORRECT:
+     * <main style={{
+     *   flex: 1,
+     *   maxWidth: "80rem",
+     *   marginLeft: "auto",
+     *   marginRight: "auto",
+     *   paddingLeft: "var(--spacing-4)",
+     *   paddingRight: "var(--spacing-4)"
+     * }}>
+     *   <h1>Page Title</h1>  // Centered!
+     * </main>
+     */
+    async checkPageContentCentering() {
+        const startTime = Date.now();
+        const issues = [];
+        // Check client components that use UnifiedHeader variant="navigation" (frontend pages)
+        const clientFiles = await getCachedClientFiles();
+        // Pages that are exempt from this check (use different layout patterns)
+        const exemptPatterns = [
+            "HomePageClient", // Homepage has special hero layout
+            "ChecklistsPageClient", // Filter wrapper
+        ];
+        for (const file of clientFiles) {
+            const normalizedFile = file.replace(/\\/g, "/");
+            // Skip exempt files
+            if (exemptPatterns.some((pattern) => normalizedFile.includes(pattern)))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Only check pages with UnifiedHeader variant="navigation" (frontend pages)
+            if (!/<UnifiedHeader[^>]*variant=["']navigation["']/.test(content))
+                continue;
+            // Skip pages that use layout components (they handle centering)
+            if (/SellerPageLayout|AdminPageLayout|AccountPageLayout|BuyerPageLayout|ServerLayout|PageLayout|ContentPageLayout/.test(content))
+                continue;
+            // Skip pages with sidebars (different centering pattern)
+            if (/Sidebar/.test(content))
+                continue;
+            // Find <main> elements and check for proper centering
+            const mainPattern = /<main[^>]*>/g;
+            let match;
+            while ((match = mainPattern.exec(content)) !== null) {
+                const mainIndex = match.index;
+                const lineNumber = content.substring(0, mainIndex).split("\n").length;
+                const mainTag = match[0];
+                // Get the full style prop (may span multiple lines)
+                const afterMain = content.substring(mainIndex, mainIndex + 1000);
+                const styleMatch = afterMain.match(/style=\{(\{[\s\S]*?\})\}/);
+                const styleContent = styleMatch ? styleMatch[1] : "";
+                // Check for proper centering pattern
+                const hasMaxWidth = /maxWidth:\s*["']80rem["']/.test(styleContent) ||
+                    /maxWidth:\s*["']1280px["']/.test(styleContent);
+                const hasMarginAuto = /marginLeft:\s*["']auto["']/.test(styleContent) &&
+                    /marginRight:\s*["']auto["']/.test(styleContent);
+                const hasMxAuto = /mx:\s*["']auto["']/.test(styleContent) ||
+                    /margin:\s*["'][^"']*auto[^"']*["']/.test(styleContent);
+                // Also check className for mx-auto (less preferred but acceptable)
+                const hasClassMxAuto = /className=["'][^"']*\bmx-auto\b/.test(mainTag);
+                const isProperlycentered = hasMaxWidth && (hasMarginAuto || hasMxAuto || hasClassMxAuto);
+                if (!isProperlycentered) {
+                    issues.push({
+                        file,
+                        line: lineNumber,
+                        type: "page-content-not-centered",
+                        severity: "error",
+                        message: "Frontend page <main> missing proper centering (content will be left-justified)",
+                        suggestion: 'Add to <main> style: maxWidth: "80rem", marginLeft: "auto", marginRight: "auto"',
+                        snippet: lines[lineNumber - 1]?.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        return {
+            name: "Page Content Centering",
+            passed: issues.length === 0,
+            blocking: true,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Page Container Width Consistency - WARNING
+     *
+     * Only two valid page width patterns exist:
+     * 1. Standard width: 80rem (1280px) - homepage, how-it-works, docs, etc.
+     * 2. Full width: No maxWidth - card collections, category browsing, etc.
+     *
+     * Any other maxWidth value (1200px, 1400px, 1920px) causes visual jarring
+     * when navigating between pages.
+     *
+     * ${emoji.success} CORRECT: maxWidth: "80rem" or maxWidth: "1280px"
+     * ${emoji.success} CORRECT: No maxWidth (full width for collections/browsing)
+     * ${emoji.warning} WARNING: maxWidth: "1200px", "1400px", "1920px", etc.
+     *
+     * Exceptions:
+     * - Content-specific containers (modals, cards, text blocks < 900px)
+     * - Tables with minWidth (horizontal scroll)
+     */
+    async checkPageContainerWidthConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        const clientFiles = await getCachedClientFiles();
+        // Files/patterns to skip (content containers, not page containers)
+        const skipFilePatterns = [
+            "Modal",
+            "Dialog",
+            "Toast",
+            "Tooltip",
+            "Dropdown",
+            "Card",
+            "Alert",
+            "Badge",
+            "Chip",
+            "ErrorBoundary",
+            "Skeleton",
+            "Navigation",
+        ];
+        for (const file of clientFiles) {
+            const normalizedFile = file.replace(/\\/g, "/");
+            // Skip non-page containers
+            if (skipFilePatterns.some((pattern) => normalizedFile.includes(pattern)))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Look for maxWidth in style props
+            const maxWidthPattern = /maxWidth:\s*["'](\d+)(px|rem)?["']/g;
+            let match;
+            while ((match = maxWidthPattern.exec(content)) !== null) {
+                const value = parseInt(match[1], 10);
+                const unit = match[2] || "px";
+                const lineNumber = content.substring(0, match.index).split("\n").length;
+                const line = lines[lineNumber - 1] || "";
+                // Convert rem to px for comparison (1rem = 16px)
+                const pxValue = unit === "rem" ? value * 16 : value;
+                // Skip small values (content containers like text blocks, cards, paragraphs)
+                // These are intentionally constrained for readability
+                if (pxValue < 900)
+                    continue;
+                // Skip minWidth (tables, horizontal scroll)
+                if (line.includes("minWidth"))
+                    continue;
+                // Skip if it's inside a content container context (not page-level)
+                const contextBefore = content.substring(Math.max(0, match.index - 300), match.index);
+                if (/CardContent|Modal|Dialog|Alert|Toast|Table|<p\s|<span\s/.test(contextBefore))
+                    continue;
+                // Skip inner content grids (e.g., pricing cards grid with 1000px)
+                // These are intentionally constrained for visual balance
+                if (/gridTemplateColumns|display:\s*["']grid["']/.test(contextBefore))
+                    continue;
+                // Check if this is the standard width (80rem = 1280px)
+                const isStandardWidth = pxValue === 1280 || (unit === "rem" && value === 80);
+                // Flag non-standard page widths >= 1000px
+                if (!isStandardWidth && pxValue >= 1000) {
+                    issues.push({
+                        file,
+                        line: lineNumber,
+                        type: "inconsistent-page-width",
+                        severity: "warning",
+                        message: `Non-standard page width: ${match[1]}${unit}. Use either 80rem (standard) or no maxWidth (full width)`,
+                        suggestion: 'Standard pages: maxWidth: "80rem". Collection/browse pages: remove maxWidth for full width',
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        return {
+            name: "Page Container Width Consistency",
+            passed: issues.length === 0,
+            blocking: true, // Warning only
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Breadcrumb Gap Check - WARNING
+     *
+     * Detects when UnifiedBreadcrumbs is placed inside a flex container with large gap,
+     * which causes unwanted spacing above the breadcrumbs.
+     *
+     * ${emoji.error} WRONG:
+     * <main style={{ display: "flex", flexDirection: "column", gap: "var(--spacing-12)" }}>
+     *   <UnifiedBreadcrumbs />  // Large gap above breadcrumbs!
+     *   <div>Hero Section</div>
+     * </main>
+     *
+     * ${emoji.success} CORRECT:
+     * <main>
+     *   <UnifiedBreadcrumbs />
+     *   <div style={{ display: "flex", flexDirection: "column", gap: "var(--spacing-12)" }}>
+     *     <div>Hero Section</div>
+     *     <div>Other Content</div>
+     *   </div>
+     * </main>
+     */
+    async checkBreadcrumbGap() {
+        const startTime = Date.now();
+        const issues = [];
+        const clientFiles = await getCachedClientFiles();
+        // Files that have been manually verified or use different patterns
+        const exemptPatterns = [
+            "CategoryPageClient", // Uses noTopMargin correctly
+        ];
+        for (const file of clientFiles) {
+            const normalizedFile = file.replace(/\\/g, "/");
+            // Skip exempt files
+            if (exemptPatterns.some((pattern) => normalizedFile.includes(pattern)))
+                continue;
+            const content = fs.readFileSync(file, "utf8");
+            // Skip files without breadcrumbs
+            if (!content.includes("UnifiedBreadcrumbs"))
+                continue;
+            const lines = content.split("\n");
+            // Look for pattern: flex column container with large gap containing breadcrumbs
+            // This is a heuristic check - look for main/div with flex column + large gap
+            const containerPattern = /<(main|div)[^>]*style=\{[^}]*flexDirection:\s*["']column["'][^}]*gap:\s*["']var\(--spacing-(8|10|12|16)\)["'][^}]*\}/g;
+            let match;
+            while ((match = containerPattern.exec(content)) !== null) {
+                const containerStart = match.index;
+                const lineNumber = content.substring(0, containerStart).split("\n").length;
+                // Find the content between this container's opening and closing tags
+                // Look for UnifiedBreadcrumbs within the next 2000 chars (reasonable container size)
+                const afterContainer = content.substring(containerStart, containerStart + 2000);
+                // Check if UnifiedBreadcrumbs appears as a direct child (within first few elements)
+                // Look for breadcrumbs before any nested containers
+                const breadcrumbMatch = afterContainer.match(/<UnifiedBreadcrumbs[^>]*\/?>/);
+                if (breadcrumbMatch) {
+                    const breadcrumbIndex = breadcrumbMatch.index || 0;
+                    // Check if breadcrumbs is within the first 500 chars (likely direct child)
+                    // and not inside a nested div/section
+                    const beforeBreadcrumb = afterContainer.substring(0, breadcrumbIndex);
+                    const nestedContainerCount = (beforeBreadcrumb.match(/<(div|section|main)[^>]*>/g) || [])
+                        .length;
+                    // If breadcrumbs is a direct child (no nested containers before it)
+                    if (nestedContainerCount <= 1) {
+                        issues.push({
+                            file,
+                            line: lineNumber,
+                            type: "breadcrumb-in-gapped-container",
+                            severity: "warning",
+                            message: "UnifiedBreadcrumbs inside flex container with large gap causes unwanted spacing above breadcrumbs",
+                            suggestion: "Move breadcrumbs outside the gapped container, or wrap content sections in a separate div with the gap",
+                            snippet: lines[lineNumber - 1]?.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Breadcrumb Gap Check",
+            passed: issues.length === 0,
+            blocking: true, // Warning only
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Content Area Padding Consistency Check - WARNING
+     *
+     * Detects inconsistent horizontal padding in content areas next to sidebars.
+     * All sidebar-adjacent content areas should use the same padding for visual consistency.
+     *
+     * Standard: var(--spacing-4) (16px) for content areas next to sidebars
+     *
+     * ${emoji.error} WRONG:
+     * <Box style={{ paddingLeft: "var(--spacing-3)", paddingRight: "var(--spacing-3)" }}>
+     *   {content}
+     * </Box>
+     *
+     * ${emoji.success} CORRECT:
+     * <Box style={{ paddingLeft: "var(--spacing-4)", paddingRight: "var(--spacing-4)" }}>
+     *   {content}
+     * </Box>
+     */
+    async checkContentAreaPaddingConsistency() {
+        const startTime = Date.now();
+        const issues = [];
+        // Files that define content area padding next to sidebars
+        // NOTE: DashboardPageLayout is excluded - it has its own gutter rules (spacing-3)
+        // checked by ui-spacing.ts Dashboard Gutter Consistency
+        const layoutFiles = [
+            "components/layout/AppShell.tsx",
+            "app/**/CategoryPageClient.tsx",
+            "app/cards/**/CategoryPageClient.tsx",
+            "components/shared/CategoryPageLayout.tsx",
+        ].flatMap((pattern) => {
+            // For specific files, check if they exist
+            if (!pattern.includes("*")) {
+                return fs.existsSync(pattern) ? [pattern] : [];
+            }
+            // For glob patterns, filter from cached files
+            const regex = new RegExp(pattern.replace(/\*\*/g, ".*").replace(/\*/g, "[^/]*"));
+            return _cachedAppComponentsTsxFiles?.filter((f) => regex.test(f)) || [];
+        });
+        // Standard padding value
+        const STANDARD_PADDING = "var(--spacing-4)";
+        // Patterns to detect non-standard padding in content areas
+        const paddingPatterns = [
+            // paddingX prop with non-standard value
+            /paddingX\s*[=:]\s*["']var\(--spacing-([^4]|[0-35-9]\d*)\)["']/g,
+            // paddingLeft/Right with non-standard value (in style objects)
+            /paddingLeft:\s*["']var\(--spacing-([^4]|[0-35-9]\d*)\)["']/g,
+            /paddingRight:\s*["']var\(--spacing-([^4]|[0-35-9]\d*)\)["']/g,
+        ];
+        for (const file of layoutFiles) {
+            const normalizedFile = file.replace(/\\/g, "/");
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            // Check if this file has sidebar-related content
+            const hasSidebar = content.includes("Sidebar") ||
+                content.includes("sidebar") ||
+                content.includes("CategoryFilter");
+            if (!hasSidebar)
+                continue;
+            for (const pattern of paddingPatterns) {
+                let match;
+                pattern.lastIndex = 0; // Reset regex state
+                while ((match = pattern.exec(content)) !== null) {
+                    const lineNumber = content.substring(0, match.index).split("\n").length;
+                    const line = lines[lineNumber - 1] || "";
+                    // Skip if it's a comment
+                    if (line.trim().startsWith("//") || line.trim().startsWith("*"))
+                        continue;
+                    // Skip if it's in a default prop definition that's being overridden
+                    if (line.includes("default") && line.includes("="))
+                        continue;
+                    issues.push({
+                        file: normalizedFile,
+                        line: lineNumber,
+                        type: "inconsistent-content-padding",
+                        severity: "warning",
+                        message: `Non-standard content area padding. Use ${STANDARD_PADDING} for consistency with other sidebar layouts.`,
+                        suggestion: `Change to ${STANDARD_PADDING} to match AppShell and other layout components`,
+                        snippet: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+        return {
+            name: "Content Area Padding Consistency",
+            passed: issues.length === 0,
+            blocking: false, // Warning only
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    async runAll() {
+        const startTime = Date.now();
+        console.log("\n📐 CONSOLIDATED UI LAYOUT PREFLIGHT");
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        const checks = [];
+        checks.push(await this.checkPageTemplates());
+        checks.push(await this.checkContainerSpacing());
+        checks.push(await this.checkContainerCentering());
+        checks.push(await this.checkPageContentCentering());
+        checks.push(await this.checkPageContainerWidthConsistency());
+        checks.push(await this.checkHeaderContentSpacing());
+        checks.push(await this.checkBreadcrumbGap());
+        checks.push(await this.checkSectionSpacing());
+        checks.push(await this.checkExcessiveSpacing());
+        checks.push(await this.checkSidebarMaxWidth());
+        checks.push(await this.checkFilterCardLayout());
+        checks.push(await this.checkFilterSectionInCard());
+        checks.push(await this.checkContentWrappers());
+        checks.push(await this.checkContentAreaPaddingConsistency());
+        const totalDuration = Date.now() - startTime;
+        const allIssues = checks.flatMap((c) => c.issues);
+        const errors = allIssues.filter((i) => i.severity === "error").length;
+        const blockingFailed = checks.some((c) => c.blocking && !c.passed);
+        const summary = {
+            total: checks.length,
+            passed: checks.filter((c) => c.passed).length,
+            failed: checks.filter((c) => !c.passed).length,
+            errors,
+            warnings: allIssues.filter((i) => i.severity === "warning").length,
+        };
+        this.printResults(checks, totalDuration, summary);
+        return {
+            module: "ui-layout",
+            passed: !blockingFailed,
+            totalDuration,
+            checks,
+            summary,
+        };
+    }
+    printResults(checks, totalDuration, summary) {
+        console.log("\n" + (0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`${console_chars_1.emoji.chart} UI LAYOUT RESULTS`);
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        checks.forEach((check) => {
+            const icon = check.passed
+                ? `${console_chars_1.emoji.success}`
+                : check.blocking
+                    ? `${console_chars_1.emoji.error}`
+                    : `${console_chars_1.emoji.warning}`;
+            const count = check.issues.length > 0 ? ` (${check.issues.length} issues)` : "";
+            const blocking = check.blocking ? " [BLOCKING]" : "";
+            console.log(`${icon} ${check.name.padEnd(30)} ${(check.duration / 1000).toFixed(1)}s${count}${blocking}`);
+        });
+        console.log((0, console_chars_1.createDivider)(80, "heavy"));
+        console.log(`Errors: ${summary.errors} | Warnings: ${summary.warnings} | Time: ${(totalDuration / 1000).toFixed(1)}s`);
+        if (summary.errors === 0)
+            console.log(`\n${console_chars_1.emoji.success} UI LAYOUT PASSED`);
+        else
+            console.log(`\n${console_chars_1.emoji.error} UI LAYOUT FAILED - ${summary.errors} error(s)`);
+    }
+}
+exports.UILayoutPreflightModule = UILayoutPreflightModule;
+async function main() {
+    const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(path.basename(__filename, ".ts"));
+    const args = process.argv.slice(2);
+    const mode = args[0] || "all";
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const parallel = args.includes("--parallel") || args.includes("-p");
+    const module = new UILayoutPreflightModule({ verbose, parallel });
+    const runSingle = async (name, fn) => {
+        const check = await fn();
+        // Print issues for single check mode
+        if (check.issues.length > 0) {
+            console.log(`\n${console_chars_1.emoji.clipboard} ${check.name} Issues (${check.issues.length}):`);
+            console.log((0, console_chars_1.createDivider)(80, "heavy"));
+            check.issues.forEach((issue, i) => {
+                console.log(`${i + 1}. ${issue.file}:${issue.line}`);
+                console.log(`   ${issue.severity.toUpperCase()}: ${issue.message}`);
+                if (issue.suggestion)
+                    console.log(`   ${console_chars_1.emoji.hint} ${issue.suggestion}`);
+                if (issue.snippet)
+                    console.log(`   ${console_chars_1.emoji.memo} ${issue.snippet}`);
+                console.log();
+            });
+        }
+        else {
+            console.log(`\n${console_chars_1.emoji.success} ${check.name}: No issues found`);
+        }
+        return {
+            module: `ui-layout:${name}`,
+            passed: check.passed,
+            totalDuration: check.duration,
+            checks: [check],
+            summary: {
+                total: 1,
+                passed: check.passed ? 1 : 0,
+                failed: check.passed ? 0 : 1,
+                errors: check.issues.filter((i) => i.severity === "error").length,
+                warnings: check.issues.filter((i) => i.severity === "warning").length,
+            },
+        };
+    };
+    let result;
+    switch (mode) {
+        case "templates":
+            result = await runSingle("templates", () => module.checkPageTemplates());
+            break;
+        case "containers":
+            result = await runSingle("containers", () => module.checkContainerSpacing());
+            break;
+        case "centering":
+            result = await runSingle("centering", () => module.checkContainerCentering());
+            break;
+        case "page-centering":
+            result = await runSingle("page-centering", () => module.checkPageContentCentering());
+            break;
+        case "page-width":
+            result = await runSingle("page-width", () => module.checkPageContainerWidthConsistency());
+            break;
+        case "header-content":
+            result = await runSingle("header-content", () => module.checkHeaderContentSpacing());
+            break;
+        case "sections":
+            result = await runSingle("sections", () => module.checkSectionSpacing());
+            break;
+        case "excessive":
+            result = await runSingle("excessive", () => module.checkExcessiveSpacing());
+            break;
+        case "sidebar":
+            result = await runSingle("sidebar", () => module.checkSidebarMaxWidth());
+            break;
+        case "filters":
+            result = await runSingle("filters", () => module.checkFilterCardLayout());
+            break;
+        case "filter-card":
+            result = await runSingle("filter-card", () => module.checkFilterSectionInCard());
+            break;
+        case "wrappers":
+            result = await runSingle("wrappers", () => module.checkContentWrappers());
+            break;
+        case "breadcrumb-gap":
+            result = await runSingle("breadcrumb-gap", () => module.checkBreadcrumbGap());
+            break;
+        case "content-padding":
+            result = await runSingle("content-padding", () => module.checkContentAreaPaddingConsistency());
+            break;
+        default:
+            result = await module.runAll();
+            break;
+    }
+    process.exit(result.passed ? 0 : 1);
+}
+if (require.main === module) {
+    main();
+}
+//# sourceMappingURL=ui-layout.js.map