@empline/preflight 1.0.20

package/dist/checks/ui/dashboard-section-patterns.js

@@ -0,0 +1,1751 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Dashboard Section Patterns Preflight - IRON-CLAD UI ENFORCEMENT
+ *
+ * Enforces consistent UI patterns across /store, /admin, and /account pages:
+ *
+ * GOLD STANDARD PATTERN (use CardSection component):
+ * ```tsx
+ * <CardSection
+ *   title="Section Title"
+ *   headerActions={<Button>Action</Button>}
+ * >
+ *   // Content here
+ * </CardSection>
+ * ```
+ *
+ * Or manual pattern (for custom layouts):
+ * ```tsx
+ * <Card>
+ *   <CardContent className="p-0">
+ *     <Box className="px-4 pt-3 pb-0 min-h-[44px] flex items-center justify-between">
+ *       <Typography variant="h6" fontWeight="bold">Section Title</Typography>
+ *     </Box>
+ *     <Divider />
+ *     <Box className="p-4 pt-2">
+ *       // Content here
+ *     </Box>
+ *   </CardContent>
+ * </Card>
+ * ```
+ *
+ * Rules enforced (19 total):
+ *
+ * STRUCTURE:
+ * 1. CARD PATTERN: Dashboard sections MUST use CardSection or Card > CardContent(p-0) > Box + Divider pattern
+ * 2. NO SECTIONCARD: SectionCard should be replaced with CardSection component
+ * 3. HEADER SPACING: Card headers MUST use min-h-[44px] for consistent height
+ * 4. CONTENT PADDING: Content after Divider MUST use p-4 pt-2
+ * 5. MIN-HEIGHT: Manual patterns MUST include min-h-[44px] for header consistency
+ *
+ * CARDS & GRIDS:
+ * 6. CARD GRIDS: Nested card grids MUST use SectionCardGrid with gap-4
+ * 7. NESTED CARDS: Cards inside SectionCardGrid MUST have elevation >= 2
+ * 8. CARD ELEVATION: Cards should have explicit elevation prop
+ * 9. GRID GAPS: Card grids MUST have gap-4 for proper spacing
+ *
+ * COMPONENTS:
+ * 10. INFO BOXES: Stat boxes with icon+label+value MUST use InfoBox (with shadow)
+ * 11. NESTED BOXES: Content boxes with bg-secondary/tertiary MUST have shadow-sm
+ * 12. EMPTY STATES: Empty content MUST use UnifiedEmptyState
+ * 13. STATUSCHIP COLOR: StatusChip MUST have explicit color prop
+ *
+ * TYPOGRAPHY:
+ * 14. BOLD HEADERS: Section headers (h6) MUST have fontWeight="bold"
+ * 15. TYPOGRAPHY VARIANTS: Use h6 for sections, h5 for card titles, body1/body2 for content
+ *
+ * IMPORTS & TOKENS:
+ * 16. DIVIDER IMPORT: Divider must be imported when used
+ * 17. HARDCODED SPACING: No p-[16px] - use Tailwind tokens (p-4)
+ *
+ * STYLING:
+ * 18. CARD BACKGROUNDS: Must use bg-[var(--bg-primary)] not bg-card
+ * 19. INLINE BORDERS: Cards must NOT use inline style={{ border: ... }}
+ *
+ * Usage:
+ *   pnpm preflight:dashboard-sections           # Check only (BLOCKING)
+ *   pnpm preflight:dashboard-sections --verbose # Show detailed output
+ *   pnpm preflight:dashboard-sections --warn    # Warning mode (non-blocking)
+ *   pnpm preflight:dashboard-sections --fix     # Auto-fix violations where possible
+ *   pnpm preflight:dashboard-sections --adoption # Show CardSection adoption stats
+ *
+ * Features:
+ *   - Auto-fix: Adds missing min-h-[44px] flex items-center to header boxes
+ *   - Adoption tracking: Reports files using CardSection correctly
+ *   - Fixable indicators: Shows which violations can be auto-fixed
+ *
+ * Why: Prevents UI drift, ensures polished consistent appearance like /store/billing
+ */
+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.tags = exports.description = exports.blocking = exports.category = exports.name = exports.id = void 0;
+const fs = __importStar(require("fs"));
+const glob_1 = require("glob");
+const console_chars_1 = require("../../utils/console-chars");
+const glob_patterns_1 = require("../../shared/glob-patterns");
+// Check metadata
+exports.id = "ui/dashboard-section-patterns";
+exports.name = "Dashboard Section Patterns";
+exports.category = "ui";
+exports.blocking = true;
+exports.description = "Dashboard Section Patterns Preflight - IRON-CLAD UI ENFORCEMENT";
+exports.tags = ["ui"];
+// CONFIGURATION
+// Dashboard page patterns to check
+const DASHBOARD_PATHS = ["app/store/**/*.tsx", "app/admin/**/*.tsx", "app/account/**/*.tsx"];
+const EXCLUDED = [
+    ...glob_patterns_1.STANDARD_EXCLUDES,
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/components/**", // Don't check component definitions
+    "**/loading.tsx",
+    "**/error.tsx",
+    "**/layout.tsx",
+];
+// HELPER FUNCTIONS
+/**
+ * Check if preflight-ignore comment exists within the previous N lines
+ * This allows for comments on separate lines or inline with JSX comments
+ */
+function hasPreflightIgnore(lines, lineIndex, lookback = 8) {
+    const startLine = Math.max(0, lineIndex - lookback);
+    for (let j = startLine; j <= lineIndex; j++) {
+        if (lines[j].includes("preflight-ignore")) {
+            return true;
+        }
+    }
+    return false;
+}
+// PATTERN DETECTORS
+/**
+ * Detect inline section headers that should use CardSection
+ * Pattern: Card > CardContent > Typography h5/h6 as section header
+ */
+function detectInlineSectionHeaders(content, lines, file) {
+    const violations = [];
+    // Skip if already using CardSection or CardSectionHeader
+    if (content.includes("CardSection") || content.includes("CardSectionHeader")) {
+        return violations;
+    }
+    // Look for Typography h5/h6 with fontWeight inside CardContent
+    const sectionHeaderPattern = /Typography[^>]*variant=["'](h5|h6)["'][^>]*(?:fontWeight|font-semibold|font-bold)/g;
+    let inCard = false;
+    let inCardContent = false;
+    let cardDepth = 0;
+    let hasCorrectCardPattern = false; // Track if current card uses correct pattern
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Track Card boundaries
+        if (/<Card[^>]*>/.test(line) || /<Card\s/.test(line)) {
+            inCard = true;
+            cardDepth++;
+            hasCorrectCardPattern = false; // Reset for new card
+        }
+        if (/<\/Card>/.test(line)) {
+            cardDepth--;
+            if (cardDepth <= 0) {
+                inCard = false;
+                inCardContent = false;
+                hasCorrectCardPattern = false;
+            }
+        }
+        // Track CardContent with p-0 (correct pattern)
+        if (/<CardContent[^>]*className=["'][^"']*p-0/.test(line)) {
+            inCardContent = true;
+            hasCorrectCardPattern = true; // This card uses the correct pattern
+        }
+        else if (/<CardContent/.test(line)) {
+            inCardContent = true;
+        }
+        if (/<\/CardContent>/.test(line)) {
+            inCardContent = false;
+        }
+        // Skip if using SectionCard already
+        if (content.includes("SectionCard"))
+            continue;
+        // Check for section header pattern inside Card
+        if (inCard && inCardContent && sectionHeaderPattern.test(line)) {
+            // Skip if this card already uses the correct CardContent p-0 pattern
+            if (hasCorrectCardPattern) {
+                sectionHeaderPattern.lastIndex = 0;
+                continue;
+            }
+            // Skip if this is a data value display (preceded by caption label)
+            const prevLines = lines.slice(Math.max(0, i - 3), i).join("\n");
+            const isDataValue = /variant=["']caption["']/.test(prevLines);
+            if (isDataValue) {
+                sectionHeaderPattern.lastIndex = 0;
+                continue;
+            }
+            // Check if this looks like a section header (followed by content)
+            const nextLines = lines.slice(i + 1, i + 10).join("\n");
+            const looksLikeSectionHeader = /marginBottom|mb-\d|gap-\d/.test(line) || /<(Box|div|Grid|Stack)/.test(nextLines);
+            if (looksLikeSectionHeader) {
+                // Check for preflight-ignore within previous 3 lines
+                if (hasPreflightIgnore(lines, i))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "section-header",
+                    message: "Section header inside Card should use CardSection component",
+                    suggestion: 'Replace Card + Typography header with <CardSection title="..." headerActions={...}>',
+                    code: line.trim().substring(0, 80),
+                });
+            }
+        }
+        // Reset pattern lastIndex
+        sectionHeaderPattern.lastIndex = 0;
+    }
+    return violations;
+}
+/**
+ * Detect inline info boxes that should use InfoBox component
+ * Pattern: Box with icon + Typography caption + Typography value
+ */
+function detectInlineInfoBoxes(content, lines, file) {
+    const violations = [];
+    // Skip if already using InfoBox
+    if (content.includes("InfoBox"))
+        return violations;
+    // Look for the pattern: Box with textAlign center, icon, caption, value
+    const infoBoxPattern = /textAlign:\s*["']center["']/;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (infoBoxPattern.test(line) && /<Box/.test(line)) {
+            // Look ahead for icon + caption + value pattern
+            const nextLines = lines.slice(i, Math.min(i + 15, lines.length)).join("\n");
+            const hasIcon = /size=\{?\d+\}?/.test(nextLines) && /lucide-react|Icon/.test(content);
+            const hasCaption = /variant=["']caption["']/.test(nextLines);
+            const hasValue = /variant=["']body[12]?["'][^>]*fontWeight/.test(nextLines);
+            const hasBgTertiary = /bg-tertiary|bg-\[var\(--bg-tertiary\)\]/.test(nextLines);
+            if (hasIcon && hasCaption && hasValue && hasBgTertiary) {
+                // Check for preflight-ignore
+                const prevLine = i > 0 ? lines[i - 1] : "";
+                if (prevLine.includes("preflight-ignore"))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "info-box",
+                    message: "Info box pattern (icon + label + value) should use InfoBox component",
+                    suggestion: 'Replace with <InfoBox icon={...} label="..." value="..." />',
+                    code: line.trim().substring(0, 60),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect missing empty states
+ * Pattern: Conditional rendering with length === 0 without UnifiedEmptyState
+ */
+function detectMissingEmptyStates(content, lines, file) {
+    const violations = [];
+    // Look for length === 0 checks
+    const emptyCheckPattern = /\.length\s*===?\s*0/;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (emptyCheckPattern.test(line)) {
+            // Look ahead for what's rendered in the empty case
+            const nextLines = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+            // Check if UnifiedEmptyState is used
+            if (nextLines.includes("UnifiedEmptyState"))
+                continue;
+            // Check if it's a simple text message without proper empty state
+            const hasSimpleText = /<Typography[^>]*>[^<]*no\s|empty|yet|appear/i.test(nextLines);
+            const hasNoEmptyState = !nextLines.includes("EmptyState");
+            if (hasSimpleText && hasNoEmptyState) {
+                // Check for preflight-ignore in previous line or within the next few lines (for JSX comments)
+                const prevLine = i > 0 ? lines[i - 1] : "";
+                if (prevLine.includes("preflight-ignore"))
+                    continue;
+                if (nextLines.includes("preflight-ignore"))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "empty-state",
+                    message: "Empty state should use UnifiedEmptyState component",
+                    suggestion: 'Replace with <UnifiedEmptyState variant="..." action={{...}} />',
+                    code: line.trim().substring(0, 60),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect ad-hoc card grids that should use SectionCardGrid
+ * Pattern: Grid with Cards inside SectionCard or similar context
+ */
+function detectAdHocCardGrids(content, lines, file) {
+    const violations = [];
+    // Skip if already using SectionCardGrid
+    if (content.includes("SectionCardGrid"))
+        return violations;
+    // Look for grid patterns with nested Cards
+    const gridPattern = /gridTemplateColumns:\s*["']repeat\(auto-fit/;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (gridPattern.test(line)) {
+            // Look ahead for Card children
+            const nextLines = lines.slice(i, Math.min(i + 30, lines.length)).join("\n");
+            // Count Card occurrences
+            const cardMatches = nextLines.match(/<Card[^>]*>/g);
+            const hasMultipleCards = cardMatches && cardMatches.length >= 2;
+            if (hasMultipleCards) {
+                // Check for preflight-ignore
+                const prevLine = i > 0 ? lines[i - 1] : "";
+                if (prevLine.includes("preflight-ignore"))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "card-grid",
+                    message: "Card grid should use SectionCardGrid for consistent spacing",
+                    suggestion: "Replace inline grid with <SectionCardGrid columns={...}>",
+                    code: line.trim().substring(0, 60),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect incorrect background color usage in card-like components
+ * Pattern: bg-card instead of bg-[var(--bg-primary)]
+ *
+ * bg-card is a Tailwind default that may not resolve correctly with our CSS variables.
+ * All card backgrounds should use bg-[var(--bg-primary)] for consistent theming.
+ */
+function detectIncorrectCardBackground(content, lines, file) {
+    const violations = [];
+    // Look for bg-card usage (incorrect)
+    const bgCardPattern = /\bbg-card\b/;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (bgCardPattern.test(line)) {
+            // Check for preflight-ignore
+            const prevLine = i > 0 ? lines[i - 1] : "";
+            if (prevLine.includes("preflight-ignore"))
+                continue;
+            violations.push({
+                file,
+                line: i + 1,
+                rule: "card-background",
+                message: "Use bg-[var(--bg-primary)] instead of bg-card for consistent theming",
+                suggestion: "Replace bg-card with bg-[var(--bg-primary)]",
+                code: line.trim().substring(0, 80),
+            });
+        }
+    }
+    return violations;
+}
+/**
+ * Detect inline border styles on Card components
+ * Pattern: <Card style={{ border: ... }}> or style={{ ...border... }}
+ *
+ * Inline border styles cause inconsistency across pages. Cards should use:
+ * - variant="outlined" for bordered cards (uses CSS variable --border-color)
+ * - variant="elevation" for shadow-only cards (no border)
+ * - Tailwind classes like border-2 border-[var(--color-primary)] for special cases
+ */
+function detectInlineBorderStyles(content, lines, file) {
+    const violations = [];
+    // Look for Card components with inline border styles
+    let inCardTag = false;
+    let cardStartLine = 0;
+    let bracketDepth = 0;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Track Card tag opening
+        if (/<Card\b/.test(line)) {
+            inCardTag = true;
+            cardStartLine = i;
+            bracketDepth = 0;
+        }
+        // Track style prop with inline border
+        if (inCardTag) {
+            // Count brackets to track style object
+            bracketDepth += (line.match(/\{/g) || []).length;
+            bracketDepth -= (line.match(/\}/g) || []).length;
+            // Check for inline border in style prop
+            const hasInlineBorder = /style=\{?\{[^}]*\bborder\b[^}]*\}/.test(line) ||
+                /style=\{?\{[^}]*\bborderColor\b[^}]*\}/.test(line) ||
+                /style=\{?\{[^}]*\bborderWidth\b[^}]*\}/.test(line) ||
+                /style=\{?\{[^}]*\bborderStyle\b[^}]*\}/.test(line);
+            // Also check for border in multi-line style objects
+            const hasStyleProp = /style=\{/.test(lines.slice(cardStartLine, i + 1).join("\n"));
+            const hasBorderInStyle = hasStyleProp && /\bborder\s*:/.test(line);
+            if (hasInlineBorder || hasBorderInStyle) {
+                // Check for preflight-ignore
+                const prevLine = i > 0 ? lines[i - 1] : "";
+                if (prevLine.includes("preflight-ignore"))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "inline-border-style",
+                    message: "Card components should not use inline border styles",
+                    suggestion: 'Use variant="outlined" or Tailwind classes like border-2 border-[var(--color-primary)]',
+                    code: line.trim().substring(0, 80),
+                });
+            }
+            // End of Card tag
+            if (/>/.test(line) && bracketDepth <= 0) {
+                inCardTag = false;
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect unwrapped section patterns (Typography h5/h6 header + card grid without wrapper)
+ * Pattern: Box/div containing Typography h5/h6 + grid with Cards, not wrapped in SectionCard/ContentSection
+ *
+ * Category sections like "Marketplace", "Shipping" etc. that have:
+ * - A Typography h5/h6 header
+ * - A description Typography
+ * - A grid of Cards
+ *
+ * These MUST be wrapped in either:
+ * - SectionCard (if you want the outer card wrapper)
+ * - ContentSection (if you just want the header pattern without outer card)
+ */
+function detectUnwrappedSectionPatterns(content, lines, file) {
+    const violations = [];
+    // Skip if already using SectionCard or ContentSection
+    if (content.includes("SectionCard") || content.includes("ContentSection")) {
+        return violations;
+    }
+    // Look for Typography h5/h6 that's NOT inside a Card (standalone section headers)
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for Typography opening tag
+        if (!/<Typography\b/.test(line))
+            continue;
+        // Get the full Typography element (may span multiple lines)
+        let typographyBlock = line;
+        let endLine = i;
+        if (!/>/.test(line)) {
+            // Multi-line Typography tag - collect until we find the closing >
+            for (let j = i + 1; j < Math.min(i + 10, lines.length); j++) {
+                typographyBlock += "\n" + lines[j];
+                endLine = j;
+                if (/>/.test(lines[j]))
+                    break;
+            }
+        }
+        // Check if this is an h5 or h6 variant
+        const isTypographyHeader = /variant=["'](h5|h6)["']/.test(typographyBlock);
+        if (!isTypographyHeader)
+            continue;
+        // Look backwards to see if we're inside a Card (if so, skip - different rule handles that)
+        let insideCard = false;
+        let cardDepth = 0;
+        for (let j = i - 1; j >= Math.max(0, i - 30); j--) {
+            if (/<\/Card>/.test(lines[j]))
+                cardDepth++;
+            if (/<Card\b/.test(lines[j])) {
+                if (cardDepth > 0) {
+                    cardDepth--;
+                }
+                else {
+                    insideCard = true;
+                    break;
+                }
+            }
+        }
+        if (insideCard)
+            continue;
+        // Look ahead for a grid with Cards pattern (within 40 lines from end of Typography)
+        // Need larger window because Cards may be inside .map() calls
+        const searchStart = endLine + 1;
+        const nextLines = lines.slice(searchStart, Math.min(searchStart + 45, lines.length)).join("\n");
+        // Check for grid pattern
+        const hasGridPattern = /gridTemplateColumns|grid-cols-|className="[^"]*grid\s/.test(nextLines);
+        // Check for Cards - either direct <Card or inside .map() that renders Cards
+        const cardMatches = nextLines.match(/<Card\b/g);
+        const hasCards = cardMatches && cardMatches.length >= 1;
+        // Also detect .map() patterns that likely render Cards
+        const hasMapWithCards = /\.map\([^)]*\)\s*=>\s*\(?[\s\S]*<Card\b/.test(nextLines);
+        if (hasGridPattern && (hasCards || hasMapWithCards)) {
+            // Check for preflight-ignore
+            const prevLine = i > 0 ? lines[i - 1] : "";
+            if (prevLine.includes("preflight-ignore"))
+                continue;
+            // Check if parent is a Box or div (not SectionCard/ContentSection)
+            const parentContext = lines.slice(Math.max(0, i - 5), i).join("\n");
+            const isInPlainContainer = /<(Box|div)\b/.test(parentContext);
+            if (isInPlainContainer) {
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "unwrapped-section",
+                    message: "Section with header + card grid should use SectionCard or ContentSection",
+                    suggestion: 'Wrap with <SectionCard title="..." subtitle="..."> or <ContentSection title="..." subtitle="...">',
+                    code: line.trim().substring(0, 80),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect default border classes on dashboard cards
+ * Pattern: border border-border or border-[var(--border-color)] without explicit variant="outlined"
+ *
+ * Dashboard cards should use shadow-only styling (like /store/listings) not borders.
+ * Borders should only be used for:
+ * - Highlighted/recommended items (e.g., border-2 border-[var(--color-primary)])
+ * - Explicit outlined variants
+ */
+function detectDefaultBorderClasses(content, lines, file) {
+    const violations = [];
+    // Skip component definition files - they define the patterns
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Look for Card with border border-border or similar default border patterns
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for Card with default border classes (not highlighted borders)
+        if (/<Card\b/.test(line)) {
+            // Look at this line and next few lines for className with border
+            const cardContext = lines.slice(i, Math.min(i + 5, lines.length)).join(" ");
+            // Check for default border patterns (not highlighted/primary borders)
+            const hasDefaultBorder = /className=[^>]*\bborder\s+border-border\b/.test(cardContext) ||
+                /className=[^>]*\bborder\s+border-\[var\(--border-color\)\]/.test(cardContext);
+            // Skip if it's a highlighted border (primary color, etc.)
+            const isHighlightedBorder = /border-\[var\(--color-primary\)\]/.test(cardContext) || /border-primary/.test(cardContext);
+            if (hasDefaultBorder && !isHighlightedBorder) {
+                // Check for preflight-ignore
+                const prevLine = i > 0 ? lines[i - 1] : "";
+                if (prevLine.includes("preflight-ignore"))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "default-border-class",
+                    message: "Dashboard cards should use shadow-only styling, not default borders",
+                    suggestion: "Remove 'border border-border' class - use shadow for card separation",
+                    code: line.trim().substring(0, 80),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect SectionCard usage that should be migrated to Card pattern
+ *
+ * GOLD STANDARD (from /store/disputes, /store/billing):
+ * ```tsx
+ * <Card>
+ *   <CardContent className="p-0">
+ *     <Box className="px-4 py-3">
+ *       <Typography variant="h6" fontWeight="bold">Section Title</Typography>
+ *     </Box>
+ *     <Divider />
+ *     // Content here
+ *   </CardContent>
+ * </Card>
+ * ```
+ *
+ * SectionCard was a convenience wrapper but creates inconsistency.
+ * All dashboard sections should use the explicit Card pattern for uniformity.
+ */
+function detectSectionCardUsage(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Look for SectionCard usage
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (/<SectionCard\b/.test(line)) {
+            // Check for preflight-ignore
+            const prevLine = i > 0 ? lines[i - 1] : "";
+            if (prevLine.includes("preflight-ignore"))
+                continue;
+            violations.push({
+                file,
+                line: i + 1,
+                rule: "sectioncard-usage",
+                message: "SectionCard should be replaced with Card > CardContent(p-0) > Box + Divider pattern",
+                suggestion: 'Use <Card><CardContent className="p-0"><Box className="px-4 py-3">...<Divider />',
+                code: line.trim().substring(0, 80),
+            });
+        }
+    }
+    return violations;
+}
+/**
+ * Detect missing Card pattern in dashboard pages
+ *
+ * GOLD STANDARD PATTERN (use CardSection component):
+ * ```tsx
+ * <CardSection
+ *   title="Section Title"
+ *   headerActions={<Button>Action</Button>}
+ * >
+ *   {children}
+ * </CardSection>
+ * ```
+ *
+ * Or manual pattern:
+ * ```tsx
+ * <Card>
+ *   <CardContent className="p-0">
+ *     <Box className="px-4 pt-3 pb-0 min-h-[44px] flex items-center">
+ *       <Typography variant="h6" fontWeight="bold">Section Title</Typography>
+ *     </Box>
+ *     <Divider />
+ *     <Box className="p-4 pt-2">
+ *       {children}
+ *     </Box>
+ *   </CardContent>
+ * </Card>
+ * ```
+ *
+ * Dashboard pages should use CardSection for consistent header heights.
+ * This checks for Typography h6 headers that are NOT inside the proper structure.
+ */
+function detectMissingCardPattern(content, lines, file) {
+    const violations = [];
+    // Skip if file doesn't have Typography h6 headers
+    if (!content.includes('variant="h6"') && !content.includes("variant='h6'")) {
+        return violations;
+    }
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Skip if already using CardSection
+    if (content.includes("CardSection")) {
+        return violations;
+    }
+    // Look for Typography h6 that's not in the proper Card > CardContent(p-0) > Box > Divider structure
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for Typography h6 with fontWeight bold (section header pattern)
+        if (/<Typography[^>]*variant=["']h6["'][^>]*fontWeight/.test(line) ||
+            /<Typography[^>]*fontWeight[^>]*variant=["']h6["']/.test(line)) {
+            // Skip if this is a data value display (preceded by caption label)
+            const prevLines = lines.slice(Math.max(0, i - 3), i).join("\n");
+            const isDataValue = /variant=["']caption["']/.test(prevLines);
+            if (isDataValue)
+                continue;
+            // Look backwards to check if we're in the correct structure
+            const contextLines = lines.slice(Math.max(0, i - 10), i + 1).join("\n");
+            // Look forward to check for Divider after the header Box
+            const forwardLines = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+            // Check for the gold standard pattern: CardContent with p-0 and Divider after header
+            const hasCorrectPattern = /CardContent[^>]*className=["'][^"']*p-0/.test(contextLines) &&
+                /<Divider/.test(forwardLines);
+            // Also check if inside SectionCard (will be caught by other rule)
+            const insideSectionCard = /SectionCard/.test(contextLines);
+            // Check for min-h-[44px] for consistent header height
+            const hasConsistentHeight = /min-h-\[44px\]/.test(contextLines);
+            if (!hasCorrectPattern && !insideSectionCard) {
+                // Check for preflight-ignore within previous 3 lines
+                if (hasPreflightIgnore(lines, i))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "missing-card-pattern",
+                    message: "Section header should use CardSection component for consistent header heights",
+                    suggestion: 'Use <CardSection title="..." headerActions={...}> or <CardSectionHeader title="..." />',
+                    code: line.trim().substring(0, 80),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect incorrect card header spacing
+ *
+ * GOLD STANDARD: Use CardSection component for consistent header heights
+ *
+ * If using manual pattern, header box should use:
+ * - px-4 pt-3 pb-0 for padding
+ * - min-h-[44px] for consistent height regardless of buttons
+ * - flex items-center for vertical centering
+ *
+ * Common mistakes:
+ * - py-2, py-3 (equal top/bottom padding looks unbalanced)
+ * - Missing min-h-[44px] (headers with buttons are taller)
+ * - Missing flex items-center (text not vertically centered)
+ */
+function detectIncorrectHeaderSpacing(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Skip if using CardSection (it handles this correctly)
+    if (content.includes("CardSection")) {
+        return violations;
+    }
+    // Look for Box elements that contain Typography h6 headers (section headers)
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for Box with px-4 that's a header container
+        if (/<Box[^>]*className=["'][^"']*px-4/.test(line)) {
+            // Look ahead to see if this contains a Typography h6
+            const nextLines = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+            const hasTypographyH6 = /<Typography[^>]*variant=["']h6["']/.test(nextLines);
+            if (hasTypographyH6) {
+                // Check if it has the correct spacing pattern
+                const hasCorrectSpacing = /pt-3\s+pb-0|pt-3[^p]*pb-0/.test(line);
+                const hasIncorrectPy = /\bpy-\d/.test(line); // py-X is incorrect for headers
+                const hasMinHeight = /min-h-\[44px\]/.test(line);
+                const hasFlexCenter = /flex[^"']*items-center/.test(line);
+                // Check if header has action buttons (needs consistent height)
+                const hasHeaderActions = /justify-between/.test(line) || /<Button/.test(nextLines);
+                if (!hasCorrectSpacing || hasIncorrectPy) {
+                    // Check for preflight-ignore within previous 3 lines
+                    if (hasPreflightIgnore(lines, i))
+                        continue;
+                    violations.push({
+                        file,
+                        line: i + 1,
+                        rule: "header-spacing",
+                        message: "Card header should use CardSection component for consistent heights",
+                        suggestion: 'Use <CardSection title="..." headerActions={...}> or add min-h-[44px] flex items-center',
+                        code: line.trim().substring(0, 80),
+                    });
+                }
+                else if (hasHeaderActions && (!hasMinHeight || !hasFlexCenter)) {
+                    // Header with actions but missing consistent height
+                    if (hasPreflightIgnore(lines, i))
+                        continue;
+                    violations.push({
+                        file,
+                        line: i + 1,
+                        rule: "header-height-inconsistent",
+                        message: "Card header with actions needs min-h-[44px] for consistent height",
+                        suggestion: 'Use <CardSection> or add className="px-4 pt-3 pb-0 min-h-[44px] flex items-center justify-between"',
+                        code: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect nested boxes/cards missing shadow
+ *
+ * Nested content boxes (like "Listing Usage" stats box) should have shadow for depth.
+ * Pattern: Box with bg-[var(--bg-secondary)] or bg-[var(--bg-tertiary)] should have shadow-[var(--shadow-sm)]
+ */
+function detectMissingShadowOnNestedBoxes(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Look for Box elements with secondary/tertiary background
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for Box with bg-secondary or bg-tertiary
+        const hasBgSecondary = /bg-\[var\(--bg-secondary\)\]/.test(line);
+        const hasBgTertiary = /bg-\[var\(--bg-tertiary\)\]/.test(line);
+        if ((hasBgSecondary || hasBgTertiary) && /<Box/.test(line)) {
+            // Check if it has shadow
+            const hasShadow = /shadow-\[var\(--shadow/.test(line);
+            // Check if it's a small inline element (skip those)
+            const isSmallElement = /w-\d|h-\d|size-\d/.test(line) && !/rounded-\[var\(--radius-lg\)\]/.test(line);
+            if (!hasShadow && !isSmallElement) {
+                // Look at context - is this a content box (has rounded corners, padding)?
+                const isContentBox = /rounded-\[var\(--radius/.test(line) && /\bp-\d/.test(line);
+                if (isContentBox) {
+                    // Check for preflight-ignore
+                    const prevLine = i > 0 ? lines[i - 1] : "";
+                    if (prevLine.includes("preflight-ignore"))
+                        continue;
+                    violations.push({
+                        file,
+                        line: i + 1,
+                        rule: "missing-shadow",
+                        message: "Nested content boxes should have shadow for visual depth",
+                        suggestion: "Add shadow-[var(--shadow-sm)] to the className",
+                        code: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect card grids without proper gap spacing
+ *
+ * Card grids should use gap-4 (16px) for proper visual separation between cards.
+ * SectionCardGrid provides this automatically, but inline grids may miss it.
+ */
+function detectMissingGridGap(content, lines, file) {
+    const violations = [];
+    // Skip if using SectionCardGrid (it handles gaps correctly)
+    if (content.includes("SectionCardGrid"))
+        return violations;
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Look for grid patterns
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for grid class
+        if (/className=["'][^"']*\bgrid\b/.test(line)) {
+            // Look ahead to see if this contains Cards
+            const nextLines = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+            const hasCards = /<Card\b/.test(nextLines);
+            if (hasCards) {
+                // Check for proper gap
+                const hasGap4 = /\bgap-4\b/.test(line);
+                const hasGap3 = /\bgap-3\b/.test(line); // gap-3 is acceptable but gap-4 preferred
+                const hasNoGap = !/\bgap-\d/.test(line);
+                if (hasNoGap) {
+                    // Check for preflight-ignore
+                    const prevLine = i > 0 ? lines[i - 1] : "";
+                    if (prevLine.includes("preflight-ignore"))
+                        continue;
+                    violations.push({
+                        file,
+                        line: i + 1,
+                        rule: "missing-grid-gap",
+                        message: "Card grids should have gap-4 for proper spacing between cards",
+                        suggestion: "Add gap-4 to the grid className, or use SectionCardGrid component",
+                        code: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect missing spacing between Box and SectionCardGrid siblings
+ *
+ * When a styled Box (like a stats/usage box) is followed by SectionCardGrid,
+ * there needs to be margin-top on the grid for visual separation.
+ * Additionally, mt and gap values should match for consistent spacing.
+ *
+ * Pattern: </Box> followed by <SectionCardGrid without mt-* class
+ * Pattern: SectionCardGrid with mt-4 but no gap-4 (inconsistent spacing)
+ */
+function detectBoxToSectionCardGridGap(content, lines, file) {
+    const violations = [];
+    // Only check files that use SectionCardGrid
+    if (!content.includes("SectionCardGrid"))
+        return violations;
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Look for SectionCardGrid
+        if (/<SectionCardGrid/.test(line)) {
+            // Check for preflight-ignore
+            const prevLine = i > 0 ? lines[i - 1] : "";
+            if (prevLine.includes("preflight-ignore"))
+                continue;
+            // Extract mt value if present
+            const mtMatch = line.match(/\bmt-(\d+)/);
+            const hasMarginTop = mtMatch !== null || /\bmy-\d/.test(line);
+            // Check if it has a gap override
+            const gapMatch = line.match(/\bgap-(\d+)/);
+            // Look back to see if preceded by a closing Box tag (within 3 lines)
+            let foundClosingBox = false;
+            for (let j = i - 1; j >= Math.max(0, i - 3); j--) {
+                const prevContent = lines[j].trim();
+                // Skip empty lines and comments
+                if (prevContent === "" || prevContent.startsWith("//") || prevContent.startsWith("{/*"))
+                    continue;
+                // Check for closing Box
+                if (/<\/Box>/.test(prevContent)) {
+                    foundClosingBox = true;
+                    break;
+                }
+                // If we hit something else, stop looking
+                if (prevContent.length > 0)
+                    break;
+            }
+            if (foundClosingBox) {
+                if (!hasMarginTop) {
+                    violations.push({
+                        file,
+                        line: i + 1,
+                        rule: "box-to-sectioncardgrid-gap",
+                        message: "SectionCardGrid after Box sibling needs mt-4 for visual separation",
+                        suggestion: 'Add className="mt-4 gap-4" to SectionCardGrid for consistent spacing',
+                        code: line.trim().substring(0, 80),
+                    });
+                }
+                else if (mtMatch && !gapMatch) {
+                    // Has mt but no gap override - spacing will be inconsistent
+                    const mtValue = mtMatch[1];
+                    violations.push({
+                        file,
+                        line: i + 1,
+                        rule: "sectioncardgrid-inconsistent-spacing",
+                        message: `SectionCardGrid has mt-${mtValue} but no matching gap-${mtValue} - horizontal/vertical spacing will differ`,
+                        suggestion: `Add gap-${mtValue} to match mt-${mtValue} for consistent spacing in all directions`,
+                        code: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect SectionCardGrid with large cards that need wider gap
+ *
+ * When SectionCardGrid contains full Card components (not InfoBox), the default
+ * gap-3 is too tight. Cards with CardContent, pricing, or plan details need gap-6.
+ *
+ * Pattern: SectionCardGrid containing <Card> elements without gap-4/gap-6 override
+ */
+function detectLargeCardGridTightGap(content, lines, file) {
+    const violations = [];
+    // Only check files that use SectionCardGrid
+    if (!content.includes("SectionCardGrid"))
+        return violations;
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Look for SectionCardGrid
+        if (/<SectionCardGrid/.test(line)) {
+            // Check for preflight-ignore
+            const prevLine = i > 0 ? lines[i - 1] : "";
+            if (prevLine.includes("preflight-ignore"))
+                continue;
+            // Check if it already has a wider gap override
+            const hasWiderGap = /gap-[456789]|gap-1[0-9]/.test(line);
+            if (hasWiderGap)
+                continue;
+            // Look ahead to see if this contains full Card components (not just InfoBox)
+            const nextLines = lines.slice(i, Math.min(i + 30, lines.length)).join("\n");
+            const hasFullCards = /<Card\b/.test(nextLines) && /<CardContent/.test(nextLines);
+            const hasInfoBoxOnly = /<InfoBox/.test(nextLines) && !/<Card\b/.test(nextLines);
+            // If it has full Cards (not just InfoBox), it needs wider gap
+            if (hasFullCards && !hasInfoBoxOnly) {
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "large-card-grid-tight-gap",
+                    message: "SectionCardGrid with full Card components needs gap-6 for proper visual separation",
+                    suggestion: 'Add className="gap-6" to SectionCardGrid when containing Card components with CardContent',
+                    code: line.trim().substring(0, 80),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ *
+ * Cards nested inside other cards (card-in-card pattern) need higher elevation
+ * for visual depth. Default elevation=1 is too subtle when nested.
+ *
+ * Pattern: Card inside SectionCardGrid or inside another Card should have elevation >= 2
+ */
+function detectNestedCardLowElevation(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Skip if no SectionCardGrid (no nested card pattern)
+    if (!content.includes("SectionCardGrid"))
+        return violations;
+    // Track if we're inside a SectionCardGrid
+    let inSectionCardGrid = false;
+    let gridDepth = 0;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Track SectionCardGrid boundaries
+        if (/<SectionCardGrid/.test(line)) {
+            inSectionCardGrid = true;
+            gridDepth++;
+        }
+        if (/<\/SectionCardGrid>/.test(line)) {
+            gridDepth--;
+            if (gridDepth <= 0) {
+                inSectionCardGrid = false;
+            }
+        }
+        // Check for Card inside SectionCardGrid
+        if (inSectionCardGrid && /<Card\b/.test(line)) {
+            // Get the full Card tag (may span multiple lines)
+            let cardTag = line;
+            let endLine = i;
+            if (!/>/.test(line)) {
+                for (let j = i + 1; j < Math.min(i + 5, lines.length); j++) {
+                    cardTag += " " + lines[j];
+                    endLine = j;
+                    if (/>/.test(lines[j]))
+                        break;
+                }
+            }
+            // Check elevation - should be >= 2 for nested cards
+            const elevationMatch = cardTag.match(/elevation=\{?(\d+)\}?/);
+            const elevation = elevationMatch ? parseInt(elevationMatch[1], 10) : 1; // default is 1
+            if (elevation < 2) {
+                // Check for preflight-ignore
+                const prevLine = i > 0 ? lines[i - 1] : "";
+                if (prevLine.includes("preflight-ignore"))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "nested-card-elevation",
+                    message: "Nested cards (card-in-card) should have elevation >= 2 for visual depth",
+                    suggestion: "Add elevation={2} or higher to the Card component",
+                    code: line.trim().substring(0, 80),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect section headers without fontWeight="bold"
+ *
+ * Section headers (Typography h6 in card headers) should always be bold for consistency.
+ */
+function detectUnboldSectionHeaders(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for Typography h6 that might be a section header
+        if (/<Typography[^>]*variant=["']h6["']/.test(line)) {
+            // Get the full Typography tag
+            let typographyTag = line;
+            if (!/>/.test(line)) {
+                for (let j = i + 1; j < Math.min(i + 3, lines.length); j++) {
+                    typographyTag += " " + lines[j];
+                    if (/>/.test(lines[j]))
+                        break;
+                }
+            }
+            // Check if it has fontWeight
+            const hasFontWeight = /fontWeight/.test(typographyTag);
+            const hasBoldClass = /font-bold|font-semibold/.test(typographyTag);
+            if (!hasFontWeight && !hasBoldClass) {
+                // Check context - is this inside a card header pattern?
+                const contextLines = lines.slice(Math.max(0, i - 5), i).join("\n");
+                const isInCardHeader = /CardContent[^>]*p-0|px-4\s+pt-3/.test(contextLines);
+                if (isInCardHeader) {
+                    // Check for preflight-ignore
+                    const prevLine = i > 0 ? lines[i - 1] : "";
+                    if (prevLine.includes("preflight-ignore"))
+                        continue;
+                    violations.push({
+                        file,
+                        line: i + 1,
+                        rule: "unbold-section-header",
+                        message: 'Section headers (Typography h6) should have fontWeight="bold"',
+                        suggestion: 'Add fontWeight="bold" to the Typography component',
+                        code: line.trim().substring(0, 80),
+                    });
+                }
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect missing Divider import when Divider is used
+ *
+ * Prevents runtime errors from using <Divider /> without importing it.
+ */
+function detectMissingDividerImport(content, lines, file) {
+    const violations = [];
+    // Check if Divider is used
+    const usesDivider = /<Divider\s*\/?>/.test(content);
+    if (!usesDivider)
+        return violations;
+    // Check if Divider is imported
+    const hasDividerImport = /import\s*\{[^}]*Divider[^}]*\}\s*from/.test(content);
+    if (!hasDividerImport) {
+        // Find the first usage of Divider
+        for (let i = 0; i < lines.length; i++) {
+            if (/<Divider\s*\/?>/.test(lines[i])) {
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "missing-divider-import",
+                    message: "Divider is used but not imported - will cause runtime error",
+                    suggestion: 'Add Divider to imports: import { Divider } from "@/components/ui"',
+                    code: lines[i].trim().substring(0, 80),
+                });
+                break; // Only report once per file
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect hardcoded spacing values instead of Tailwind tokens
+ *
+ * Catches patterns like p-[16px], gap-[12px], m-[8px] that should use
+ * standard Tailwind classes like p-4, gap-3, m-2.
+ */
+function detectHardcodedSpacing(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Pattern for hardcoded pixel values in spacing classes
+    const hardcodedPattern = /\b(p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|gap)-\[\d+px\]/g;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const matches = line.match(hardcodedPattern);
+        if (matches) {
+            // Check for preflight-ignore
+            const prevLine = i > 0 ? lines[i - 1] : "";
+            if (prevLine.includes("preflight-ignore"))
+                continue;
+            violations.push({
+                file,
+                line: i + 1,
+                rule: "hardcoded-spacing",
+                message: `Hardcoded spacing (${matches.join(", ")}) - use Tailwind tokens instead`,
+                suggestion: "Use standard classes: p-4 (16px), p-3 (12px), p-2 (8px), gap-4, gap-3, etc.",
+                code: line.trim().substring(0, 80),
+            });
+        }
+    }
+    return violations;
+}
+/**
+ * Detect inconsistent content padding after Divider
+ *
+ * Content after Divider in card pattern should use p-4 pt-2 for consistency.
+ */
+function detectInconsistentContentPadding(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Skip if no Divider usage
+    if (!content.includes("<Divider"))
+        return violations;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for Divider
+        if (/<Divider\s*\/?>/.test(line)) {
+            // Look at the next Box after Divider
+            for (let j = i + 1; j < Math.min(i + 5, lines.length); j++) {
+                const nextLine = lines[j];
+                if (/<Box[^>]*className=/.test(nextLine)) {
+                    // Check if it has the correct padding pattern
+                    const hasCorrectPadding = /p-4\s+pt-2|p-4\s+pt-3/.test(nextLine);
+                    const hasP4Only = /\bp-4\b/.test(nextLine) && !/pt-\d/.test(nextLine);
+                    const hasOtherPadding = /\bp-[^4]|\bpt-[^23]/.test(nextLine);
+                    // Skip if it's an empty state or special container
+                    if (/UnifiedEmptyState|TableContainer/.test(lines.slice(j, j + 3).join("\n"))) {
+                        break;
+                    }
+                    if (hasP4Only || hasOtherPadding) {
+                        // Check for preflight-ignore
+                        const prevLine = j > 0 ? lines[j - 1] : "";
+                        if (prevLine.includes("preflight-ignore"))
+                            break;
+                        violations.push({
+                            file,
+                            line: j + 1,
+                            rule: "content-padding",
+                            message: "Content after Divider should use 'p-4 pt-2' for consistent spacing",
+                            suggestion: 'Change to className="p-4 pt-2" for proper content padding',
+                            code: nextLine.trim().substring(0, 80),
+                        });
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect StatusChip without proper color prop
+ *
+ * StatusChip should always have an explicit color prop for consistency.
+ */
+function detectStatusChipWithoutColor(content, lines, file) {
+    const violations = [];
+    // Skip if no StatusChip usage
+    if (!content.includes("StatusChip"))
+        return violations;
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (/<StatusChip\b/.test(line)) {
+            // Get the full StatusChip tag - look up to 15 lines for multi-line props
+            let chipTag = line;
+            let depth = 0; // Track nested JSX depth
+            let foundEnd = false;
+            // Check if StatusChip closes on same line (simple case)
+            if (/<StatusChip[^>]*\/>/.test(line) ||
+                (/<StatusChip[^>]*>/.test(line) && /<\/StatusChip>/.test(line))) {
+                foundEnd = true;
+            }
+            if (!foundEnd) {
+                // Count opening < and closing /> or > to track nesting
+                for (let j = i; j < Math.min(i + 15, lines.length); j++) {
+                    const currentLine = j === i ? line : lines[j];
+                    chipTag += j === i ? "" : " " + currentLine;
+                    // Check for StatusChip self-closing tag (handles multi-line)
+                    if (j > i && /^\s*\/>/.test(currentLine)) {
+                        // This line starts with /> - likely closing the StatusChip
+                        foundEnd = true;
+                        break;
+                    }
+                    // Check for explicit </StatusChip> closing tag
+                    if (/<\/StatusChip>/.test(currentLine)) {
+                        foundEnd = true;
+                        break;
+                    }
+                    // Check if we have a complete self-closing StatusChip tag
+                    // by looking for /> that's not inside a nested component
+                    const tagSoFar = chipTag;
+                    // Remove nested self-closing tags (like <Icon />) to check if StatusChip is closed
+                    const withoutNestedSelfClosing = tagSoFar.replace(/<[A-Z][a-zA-Z]*[^>]*\/>/g, "");
+                    if (/<StatusChip[^>]*\/>/.test(withoutNestedSelfClosing)) {
+                        foundEnd = true;
+                        break;
+                    }
+                }
+            }
+            // Check if it has color prop
+            const hasColor = /\bcolor=/.test(chipTag);
+            if (!hasColor) {
+                // Check for preflight-ignore
+                if (hasPreflightIgnore(lines, i))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "statuschip-color",
+                    message: "StatusChip should have explicit color prop for consistency",
+                    suggestion: 'Add color="success" | "warning" | "error" | "info" | "default"',
+                    code: line.trim().substring(0, 80),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect Card without explicit elevation in dashboard pages
+ *
+ * Cards in dashboard pages should have explicit elevation for clarity.
+ */
+function detectCardWithoutElevation(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Only check dashboard pages
+    if (!file.includes("/store/") && !file.includes("/admin/") && !file.includes("/account/")) {
+        return violations;
+    }
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (/<Card\b/.test(line) && !/<Card\s*>/.test(line)) {
+            // Get the full Card tag
+            let cardTag = line;
+            if (!/>/.test(line)) {
+                for (let j = i + 1; j < Math.min(i + 5, lines.length); j++) {
+                    cardTag += " " + lines[j];
+                    if (/>/.test(lines[j]))
+                        break;
+                }
+            }
+            // Check if it has elevation prop
+            const hasElevation = /\belevation=/.test(cardTag);
+            // Skip if it's a simple <Card> (section wrapper - uses default)
+            if (/<Card\s*>/.test(cardTag))
+                continue;
+            if (!hasElevation) {
+                // Check for preflight-ignore
+                const prevLine = i > 0 ? lines[i - 1] : "";
+                if (prevLine.includes("preflight-ignore"))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "card-elevation",
+                    message: "Card should have explicit elevation prop for clarity",
+                    suggestion: "Add elevation={1} for default, elevation={2} for nested cards",
+                    code: line.trim().substring(0, 80),
+                });
+            }
+        }
+    }
+    return violations;
+}
+/**
+ * Detect Typography variant misuse
+ *
+ * - h6 should be used for section headers
+ * - body1/body2 for content
+ * - h5 for card titles within nested cards
+ */
+function detectTypographyVariantMisuse(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for h1-h4 in dashboard pages (should typically be h5 or h6)
+        if (/<Typography[^>]*variant=["'](h1|h2|h3|h4)["']/.test(line)) {
+            // Check context - is this in a dashboard page?
+            if (file.includes("/store/") || file.includes("/admin/") || file.includes("/account/")) {
+                // Skip if it's in UnifiedHeader or page title context
+                const contextLines = lines.slice(Math.max(0, i - 3), i).join("\n");
+                if (/UnifiedHeader|PageHeader|page.*title/i.test(contextLines))
+                    continue;
+                // Check for preflight-ignore
+                const prevLine = i > 0 ? lines[i - 1] : "";
+                if (prevLine.includes("preflight-ignore"))
+                    continue;
+                const match = line.match(/variant=["'](h[1-4])["']/);
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "typography-variant",
+                    message: `Typography ${match?.[1]} is unusual in dashboard - use h5/h6 for sections, body1/body2 for content`,
+                    suggestion: "Use h6 for section headers, h5 for card titles, body1/body2 for content",
+                    code: line.trim().substring(0, 80),
+                });
+            }
+        }
+    }
+    return violations;
+}
+// ADOPTION TRACKING
+/**
+ * Track CardSection adoption across files
+ * Reports files that ARE using CardSection correctly (positive detection)
+ */
+function trackCardSectionAdoption(content, lines, file) {
+    let cardSectionCount = 0;
+    let cardSectionHeaderCount = 0;
+    let manualPatternCount = 0;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Count CardSection usage
+        if (/<CardSection\b/.test(line)) {
+            cardSectionCount++;
+        }
+        // Count CardSectionHeader usage
+        if (/<CardSectionHeader\b/.test(line)) {
+            cardSectionHeaderCount++;
+        }
+        // Count manual pattern usage (CardContent p-0 + min-h-[44px])
+        if (/<CardContent[^>]*className=["'][^"']*p-0/.test(line)) {
+            // Look ahead for min-h-[44px] pattern
+            const nextLines = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+            if (/min-h-\[44px\]/.test(nextLines)) {
+                manualPatternCount++;
+            }
+        }
+    }
+    if (cardSectionCount > 0 || cardSectionHeaderCount > 0 || manualPatternCount > 0) {
+        return {
+            file,
+            cardSectionCount,
+            cardSectionHeaderCount,
+            manualPatternCount,
+        };
+    }
+    return null;
+}
+// MISSING MIN-HEIGHT DETECTION
+/**
+ * Detect manual card patterns missing min-h-[44px] for consistent header height
+ *
+ * Files using the manual pattern (CardContent p-0 + Divider) should still have
+ * min-h-[44px] on the header Box for consistency with CardSection.
+ */
+function detectMissingMinHeight(content, lines, file) {
+    const violations = [];
+    // Skip component definition files
+    if (file.includes("/components/shared/") || file.includes("/components/ui/")) {
+        return violations;
+    }
+    // Skip if using CardSection (it handles this correctly)
+    if (content.includes("CardSection")) {
+        return violations;
+    }
+    // Only check files using the manual pattern
+    if (!content.includes('className="p-0"') && !content.includes("className='p-0'")) {
+        return violations;
+    }
+    let inCardContentP0 = false;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Track CardContent with p-0
+        if (/<CardContent[^>]*className=["'][^"']*p-0/.test(line)) {
+            inCardContentP0 = true;
+        }
+        if (/<\/CardContent>/.test(line)) {
+            inCardContentP0 = false;
+        }
+        // Check for header Box inside CardContent p-0
+        if (inCardContentP0 && /<Box[^>]*className=["'][^"']*px-4[^"']*pt-3/.test(line)) {
+            const hasMinHeight = /min-h-\[44px\]/.test(line);
+            const hasFlexCenter = /flex[^"']*items-center/.test(line);
+            // Look ahead to see if this has action buttons
+            const nextLines = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+            const hasHeaderActions = /justify-between/.test(line) || /<Button/.test(nextLines);
+            if (!hasMinHeight) {
+                // Check for preflight-ignore
+                if (hasPreflightIgnore(lines, i))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "missing-min-height",
+                    message: "Manual card header pattern should include min-h-[44px] for consistent height",
+                    suggestion: hasHeaderActions
+                        ? "Add min-h-[44px] flex items-center justify-between to the header Box className"
+                        : "Add min-h-[44px] flex items-center to the header Box className",
+                    code: line.trim().substring(0, 80),
+                    fixable: true,
+                });
+            }
+            else if (hasHeaderActions && !hasFlexCenter) {
+                // Has min-height but missing flex center
+                if (hasPreflightIgnore(lines, i))
+                    continue;
+                violations.push({
+                    file,
+                    line: i + 1,
+                    rule: "missing-flex-center",
+                    message: "Header with min-h-[44px] should also have flex items-center for vertical centering",
+                    suggestion: "Add flex items-center to the header Box className",
+                    code: line.trim().substring(0, 80),
+                    fixable: true,
+                });
+            }
+        }
+    }
+    return violations;
+}
+// AUTO-FIX FUNCTIONS
+/**
+ * Auto-fix simple Card patterns to use CardSection
+ *
+ * Converts:
+ * ```tsx
+ * <Card>
+ *   <CardContent className="p-0">
+ *     <Box className="px-4 pt-3 pb-0">
+ *       <Typography variant="h6" fontWeight="bold">Title</Typography>
+ *     </Box>
+ *     <Divider />
+ *     <Box className="p-4 pt-2">
+ *       {children}
+ *     </Box>
+ *   </CardContent>
+ * </Card>
+ * ```
+ *
+ * To:
+ * ```tsx
+ * <CardSection title="Title">
+ *   {children}
+ * </CardSection>
+ * ```
+ */
+function autoFixCardPatterns(file, content, lines) {
+    const results = [];
+    let modified = content;
+    let fixCount = 0;
+    // Pattern 1: Add missing min-h-[44px] to header boxes
+    const headerBoxPattern = /(<Box[^>]*className=["'])([^"']*px-4[^"']*pt-3[^"']*pb-0)([^"']*["'])/g;
+    modified = modified.replace(headerBoxPattern, (match, prefix, classes, suffix) => {
+        // Skip if already has min-h-[44px]
+        if (classes.includes("min-h-[44px]")) {
+            return match;
+        }
+        // Add min-h-[44px] and flex items-center if not present
+        let newClasses = classes;
+        if (!newClasses.includes("min-h-[44px]")) {
+            newClasses = newClasses.replace(/px-4/, "px-4 min-h-[44px]");
+        }
+        if (!newClasses.includes("flex")) {
+            newClasses = newClasses.replace(/min-h-\[44px\]/, "min-h-[44px] flex items-center");
+        }
+        fixCount++;
+        return prefix + newClasses + suffix;
+    });
+    // Pattern 2: Add CardSection import if not present and we made fixes
+    if (fixCount > 0 && !modified.includes("CardSection")) {
+        // Check if there's a shared import we can add to
+        const sharedImportMatch = modified.match(/(import\s*\{[^}]*\}\s*from\s*["']@\/components\/shared["'];?)/);
+        if (sharedImportMatch) {
+            const existingImport = sharedImportMatch[1];
+            // Add CardSection to existing import
+            const newImport = existingImport.replace(/\}/, ", CardSection }");
+            modified = modified.replace(existingImport, newImport);
+        }
+    }
+    if (modified !== content) {
+        fs.writeFileSync(file, modified, "utf8");
+        results.push({
+            file,
+            line: 0,
+            rule: "auto-fix",
+            fixed: true,
+            message: `Fixed ${fixCount} header box pattern(s) - added min-h-[44px] flex items-center`,
+        });
+    }
+    return results;
+}
+/**
+ * Add missing min-h-[44px] to header boxes
+ */
+function fixMissingMinHeight(file, content) {
+    const results = [];
+    let modified = content;
+    let fixCount = 0;
+    // Find header boxes with px-4 pt-3 pb-0 but missing min-h-[44px]
+    const headerBoxPattern = /(<Box[^>]*className=["'])([^"']*px-4[^"']*pt-3[^"']*pb-0)([^"']*["'][^>]*>)/g;
+    modified = modified.replace(headerBoxPattern, (match, prefix, classes, suffix) => {
+        // Skip if already has min-h-[44px]
+        if (classes.includes("min-h-[44px]")) {
+            return match;
+        }
+        // Add min-h-[44px] flex items-center
+        let newClasses = classes;
+        // Insert after px-4
+        if (!newClasses.includes("min-h-[44px]")) {
+            newClasses = newClasses.replace(/px-4/, "px-4 min-h-[44px]");
+        }
+        // Add flex items-center if not present
+        if (!newClasses.includes("flex")) {
+            newClasses = newClasses.replace(/min-h-\[44px\]/, "min-h-[44px] flex items-center");
+        }
+        fixCount++;
+        return prefix + newClasses + suffix;
+    });
+    if (modified !== content) {
+        fs.writeFileSync(file, modified, "utf8");
+        results.push({
+            file,
+            line: 0,
+            rule: "missing-min-height",
+            fixed: true,
+            message: `Added min-h-[44px] flex items-center to ${fixCount} header box(es)`,
+        });
+    }
+    return results;
+}
+// MAIN
+async function main() {
+    const args = process.argv.slice(2);
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const warnOnly = args.includes("--warn");
+    const showAdoption = args.includes("--adoption") || args.includes("-a");
+    const autoFix = args.includes("--fix");
+    console.log("\n[CHECK] DASHBOARD SECTION PATTERNS PREFLIGHT");
+    console.log("=".repeat(70));
+    console.log("Enforces consistent UI patterns across /store, /admin, /account pages");
+    if (autoFix) {
+        console.log("MODE: Auto-fix enabled - will attempt to fix violations");
+    }
+    console.log("=".repeat(70));
+    const allViolations = [];
+    const adoptionStats = [];
+    const fixResults = [];
+    // Get files from dashboard paths
+    const files = [];
+    for (const pattern of DASHBOARD_PATHS) {
+        const matches = await (0, glob_1.glob)(pattern, { ignore: EXCLUDED });
+        files.push(...matches);
+    }
+    console.log(`\nScanning ${files.length} dashboard page files...\n`);
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        // Track adoption (positive detection)
+        const adoption = trackCardSectionAdoption(content, lines, file);
+        if (adoption) {
+            adoptionStats.push(adoption);
+        }
+        // Run all pattern checks
+        allViolations.push(...detectSectionCardUsage(content, lines, file));
+        allViolations.push(...detectMissingCardPattern(content, lines, file));
+        allViolations.push(...detectIncorrectHeaderSpacing(content, lines, file));
+        allViolations.push(...detectMissingMinHeight(content, lines, file)); // NEW
+        allViolations.push(...detectMissingShadowOnNestedBoxes(content, lines, file));
+        allViolations.push(...detectMissingGridGap(content, lines, file));
+        allViolations.push(...detectBoxToSectionCardGridGap(content, lines, file));
+        allViolations.push(...detectLargeCardGridTightGap(content, lines, file));
+        allViolations.push(...detectNestedCardLowElevation(content, lines, file));
+        allViolations.push(...detectUnboldSectionHeaders(content, lines, file));
+        allViolations.push(...detectMissingDividerImport(content, lines, file));
+        allViolations.push(...detectHardcodedSpacing(content, lines, file));
+        allViolations.push(...detectInconsistentContentPadding(content, lines, file));
+        allViolations.push(...detectStatusChipWithoutColor(content, lines, file));
+        allViolations.push(...detectCardWithoutElevation(content, lines, file));
+        allViolations.push(...detectTypographyVariantMisuse(content, lines, file));
+        allViolations.push(...detectInlineSectionHeaders(content, lines, file));
+        allViolations.push(...detectInlineInfoBoxes(content, lines, file));
+        allViolations.push(...detectMissingEmptyStates(content, lines, file));
+        allViolations.push(...detectAdHocCardGrids(content, lines, file));
+        allViolations.push(...detectIncorrectCardBackground(content, lines, file));
+        allViolations.push(...detectInlineBorderStyles(content, lines, file));
+        allViolations.push(...detectUnwrappedSectionPatterns(content, lines, file));
+        // Auto-fix if enabled
+        if (autoFix) {
+            const freshContent = fs.readFileSync(file, "utf8");
+            fixResults.push(...fixMissingMinHeight(file, freshContent));
+        }
+    }
+    // Show adoption stats if requested
+    if (showAdoption) {
+        console.log("\n[ADOPTION] CardSection Usage Statistics");
+        console.log("-".repeat(70));
+        const totalCardSection = adoptionStats.reduce((sum, s) => sum + s.cardSectionCount, 0);
+        const totalCardSectionHeader = adoptionStats.reduce((sum, s) => sum + s.cardSectionHeaderCount, 0);
+        const totalManualPattern = adoptionStats.reduce((sum, s) => sum + s.manualPatternCount, 0);
+        const filesUsingCardSection = adoptionStats.filter((s) => s.cardSectionCount > 0).length;
+        const filesUsingManual = adoptionStats.filter((s) => s.manualPatternCount > 0 && s.cardSectionCount === 0).length;
+        console.log(`\n  CardSection component:     ${totalCardSection} usages in ${filesUsingCardSection} files`);
+        console.log(`  CardSectionHeader:         ${totalCardSectionHeader} usages`);
+        console.log(`  Manual pattern (p-0):      ${totalManualPattern} usages in ${filesUsingManual} files`);
+        console.log(`  Total files with pattern:  ${adoptionStats.length}`);
+        if (verbose) {
+            console.log("\n  Files using CardSection:");
+            for (const stat of adoptionStats.filter((s) => s.cardSectionCount > 0)) {
+                console.log(`    ${stat.file}: ${stat.cardSectionCount} CardSection, ${stat.cardSectionHeaderCount} CardSectionHeader`);
+            }
+            if (filesUsingManual > 0) {
+                console.log("\n  Files using manual pattern (candidates for migration):");
+                for (const stat of adoptionStats.filter((s) => s.manualPatternCount > 0 && s.cardSectionCount === 0)) {
+                    console.log(`    ${stat.file}: ${stat.manualPatternCount} manual pattern(s)`);
+                }
+            }
+        }
+        console.log("");
+    }
+    // Show fix results if auto-fix was enabled
+    if (autoFix && fixResults.length > 0) {
+        console.log("\n[FIX] Auto-fix Results");
+        console.log("-".repeat(70));
+        for (const result of fixResults) {
+            console.log(`  ${result.fixed ? `${console_chars_1.chars.check}` : `${console_chars_1.chars.cross}`} ${result.file}`);
+            console.log(`    ${result.message}`);
+        }
+        console.log("");
+    }
+    if (allViolations.length === 0) {
+        console.log("[OK] All dashboard pages follow UI patterns correctly\n");
+        process.exit(0);
+    }
+    // Group by rule
+    const byRule = new Map();
+    for (const v of allViolations) {
+        const existing = byRule.get(v.rule) || [];
+        existing.push(v);
+        byRule.set(v.rule, existing);
+    }
+    // Count fixable violations
+    const fixableCount = allViolations.filter((v) => v.fixable).length;
+    console.log(`[${warnOnly ? "WARN" : "FAIL"}] Found ${allViolations.length} UI pattern violation(s)${fixableCount > 0 ? ` (${fixableCount} auto-fixable)` : ""}:\n`);
+    for (const [rule, violations] of byRule) {
+        const fixableInRule = violations.filter((v) => v.fixable).length;
+        const fixableLabel = fixableInRule > 0 ? ` [${fixableInRule} fixable]` : "";
+        console.log(`--- ${rule.toUpperCase()} (${violations.length})${fixableLabel} ---`);
+        const toShow = verbose ? violations : violations.slice(0, 5);
+        for (const v of toShow) {
+            console.log(`\n  ${v.file}:${v.line}`);
+            console.log(`  ${v.message}`);
+            console.log(`  -> ${v.suggestion}`);
+            if (v.code && verbose) {
+                console.log(`  Code: ${v.code}`);
+            }
+        }
+        if (!verbose && violations.length > 5) {
+            console.log(`\n  ... and ${violations.length - 5} more (use --verbose to see all)`);
+        }
+        console.log("");
+    }
+    console.log("=".repeat(70));
+    console.log(`[${warnOnly ? "WARN" : "FAIL"}] ${allViolations.length} UI pattern violation(s)`);
+    console.log("\nOptions:");
+    console.log("  --fix        Auto-fix violations where possible");
+    console.log("  --adoption   Show CardSection adoption statistics");
+    console.log("  --verbose    Show all violations with code snippets");
+    console.log("  --warn       Warning mode (non-blocking)");
+    console.log("\nTo ignore specific cases, add '// preflight-ignore' above the line");
+    console.log("=".repeat(70));
+    if (!warnOnly) {
+        process.exit(1);
+    }
+}
+main().catch(console.error);
+//# sourceMappingURL=dashboard-section-patterns.js.map