@empline/preflight 1.1.0

package/dist/checks/ui/missing-shared-component-detection.js

@@ -0,0 +1,707 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Missing Shared Component Detection Preflight (NON-BLOCKING)
+ *
+ * Detects inline patterns that should use existing shared components.
+ * Also discovers potential new shared component opportunities.
+ *
+ * Features:
+ * - Smart pattern classification (button vs page-level vs inline)
+ * - Auto-fix mode for simple transformations
+ * - Import statement suggestions
+ * - Priority scoring for files with multiple issues
+ * - Inconsistent usage detection
+ * - Pattern discovery for new shared components
+ * - Configurable exclusions via preflight.config.js
+ *
+ * Usage:
+ *   pnpm preflight:missing-shared-components
+ *   pnpm preflight:missing-shared-components --verbose
+ *   pnpm preflight:missing-shared-components --fix (auto-fix simple patterns)
+ *   pnpm preflight:missing-shared-components --discover (find new component opportunities)
+ */
+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.blocking = exports.category = exports.description = exports.name = exports.id = void 0;
+exports.run = run;
+const fs = __importStar(require("fs"));
+const console_chars_1 = require("../../utils/console-chars");
+const exclusions_1 = require("../../shared/exclusions");
+const universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+const glob_1 = require("glob");
+// App-specific exclusions loaded from config
+let appExclusions = [];
+// METADATA - Required for plugin loader discovery
+exports.id = "ui/missing-shared-component-detection";
+exports.name = "Missing Shared Component Detection";
+exports.description = "Detects inline patterns that should use existing shared components and discovers new opportunities";
+exports.category = "ui";
+exports.blocking = false;
+exports.tags = ["ui", "shared-components", "consistency", "duplication", "discovery"];
+const PATTERNS = [
+    // -------------------------------------------------------------------------
+    // Button Loading Patterns (should use LoadingButton)
+    // -------------------------------------------------------------------------
+    {
+        name: "button-with-spinner",
+        pattern: /<Button[^>]*>[\s\S]{0,100}(?:<Loader2[^>]*animate-spin|<CircularProgress|isLoading\s*\?)/,
+        category: "button-loading",
+        sharedComponent: "LoadingButton",
+        importPath: "@/components/shared",
+        message: "Button with inline loading state - use LoadingButton for consistent loading UX",
+        severity: "warning",
+        skipIfImports: /LoadingButton/,
+        autoFixable: true,
+        contextCheck: (content, index) => ({
+            isInsideButton: true,
+            isInsideTableCell: false,
+            isSmallSize: false,
+            hasExistingImport: /LoadingButton/.test(content.slice(0, 500)),
+            surroundingCode: content.slice(Math.max(0, index - 50), index + 150),
+        }),
+    },
+    {
+        name: "button-starticon-spinner",
+        pattern: /startIcon=\{[^}]*(?:loading|isLoading|saving|isSaving)[^}]*\?[^}]*(?:Loader2|CircularProgress|Spinner)/i,
+        category: "button-loading",
+        sharedComponent: "LoadingButton",
+        importPath: "@/components/shared",
+        message: "Button startIcon with conditional spinner - LoadingButton handles this automatically",
+        severity: "warning",
+        skipIfImports: /LoadingButton/,
+        autoFixable: true,
+    },
+    // -------------------------------------------------------------------------
+    // Page/Section Loading Patterns (should use LoadingState/LoadingEmptyState)
+    // -------------------------------------------------------------------------
+    {
+        name: "page-loading-ternary",
+        pattern: /\{\s*(?:isLoading|loading)\s*\?\s*\(\s*<(?:Box|div|Stack|Container)[^>]*(?:className="[^"]*(?:flex|center|justify)[^"]*")?/,
+        category: "page-loading",
+        sharedComponent: "LoadingState or LoadingEmptyState",
+        importPath: "@/components/shared",
+        message: "Page-level loading ternary - LoadingEmptyState handles loading/empty/content states elegantly",
+        severity: "info",
+        skipIfImports: /LoadingEmptyState|LoadingState/,
+        autoFixable: false,
+        contextCheck: (content, index) => {
+            const before = content.slice(Math.max(0, index - 200), index);
+            return {
+                isInsideButton: /<Button[^>]*$/.test(before),
+                isInsideTableCell: /<TableCell[^>]*$/.test(before),
+                isSmallSize: false,
+                hasExistingImport: /LoadingEmptyState|LoadingState/.test(content.slice(0, 500)),
+                surroundingCode: content.slice(Math.max(0, index - 50), index + 200),
+            };
+        },
+    },
+    {
+        name: "centered-spinner-with-message",
+        pattern: /<(?:Box|div)[^>]*(?:flex|center)[^>]*>[\s\S]{0,50}<(?:CircularProgress|Loader2)[^>]*\/>[\s\S]{0,50}<(?:Typography|p|span)[^>]*>/,
+        category: "page-loading",
+        sharedComponent: "LoadingState",
+        importPath: "@/components/shared",
+        message: "Centered spinner with message - LoadingState provides this pattern",
+        severity: "info",
+        skipIfImports: /LoadingState/,
+        autoFixable: false,
+    },
+    // -------------------------------------------------------------------------
+    // Inline Loading (often appropriate, lower severity)
+    // -------------------------------------------------------------------------
+    {
+        name: "small-inline-spinner",
+        pattern: /<(?:CircularProgress|Loader2)[^>]*size=["'{]?(?:1[0-6]|[0-9])["'}]?[^>]*\/?>/,
+        category: "inline-loading",
+        sharedComponent: "InlineLoadingState (or keep inline if status indicator)",
+        importPath: "@/components/shared",
+        message: "Small inline spinner - may be appropriate for status indicators",
+        severity: "info",
+        skipIfImports: /InlineLoadingState/,
+        autoFixable: false,
+        contextCheck: (content, index) => {
+            const before = content.slice(Math.max(0, index - 100), index);
+            return {
+                isInsideButton: /<Button[^>]*$/.test(before),
+                isInsideTableCell: /<TableCell[^>]*$/.test(before),
+                isSmallSize: true,
+                hasExistingImport: /InlineLoadingState/.test(content.slice(0, 500)),
+                surroundingCode: content.slice(Math.max(0, index - 30), index + 80),
+            };
+        },
+    },
+    // -------------------------------------------------------------------------
+    // Empty State Patterns (should use UnifiedEmptyState)
+    // -------------------------------------------------------------------------
+    {
+        name: "inline-empty-message",
+        pattern: /<(?:Typography|p|div|span)[^>]*>\s*(?:No\s+\w+\s+(?:found|available|yet|to display)|There are no|Nothing to show|No results)/i,
+        category: "empty-state",
+        sharedComponent: "UnifiedEmptyState",
+        importPath: "@/components/shared",
+        message: "Inline empty state message - UnifiedEmptyState provides consistent empty UI with icons and actions",
+        severity: "warning",
+        skipIfImports: /UnifiedEmptyState|LoadingEmptyState|EmptyState/,
+        autoFixable: false,
+    },
+    {
+        name: "empty-state-with-icon",
+        pattern: /<(?:Box|div)[^>]*>[\s\S]{0,100}(?:InboxIcon|SearchIcon|FolderIcon|FileX|PackageX)[^>]*\/>[\s\S]{0,100}(?:No |Empty|Nothing)/i,
+        category: "empty-state",
+        sharedComponent: "UnifiedEmptyState",
+        importPath: "@/components/shared",
+        message: "Empty state with icon - UnifiedEmptyState provides this pattern with consistent styling",
+        severity: "warning",
+        skipIfImports: /UnifiedEmptyState|EmptyState/,
+        autoFixable: false,
+    },
+    // -------------------------------------------------------------------------
+    // Confirmation Patterns (should use ConfirmDialog/DeleteDialog)
+    // -------------------------------------------------------------------------
+    {
+        name: "browser-confirm",
+        pattern: /(?:window\.)?confirm\s*\(\s*["'`](?:Are you sure|Do you want to|Delete|Remove|This action)/i,
+        category: "confirmation",
+        sharedComponent: "ConfirmDialog or DeleteDialog",
+        importPath: "@/components/shared",
+        message: "Browser confirm() dialog - use ConfirmDialog for better UX and consistent styling",
+        severity: "warning",
+        skipIfImports: /ConfirmDialog|DeleteDialog/,
+        autoFixable: false,
+    },
+    {
+        name: "inline-delete-confirmation",
+        pattern: /<(?:Dialog|Modal)[^>]*>[\s\S]{0,300}(?:delete|remove|are you sure)[\s\S]{0,200}(?:cancel|confirm)/i,
+        category: "confirmation",
+        sharedComponent: "DeleteDialog",
+        importPath: "@/components/shared",
+        message: "Inline delete confirmation - DeleteDialog provides this pattern with proper accessibility",
+        severity: "info",
+        skipIfImports: /DeleteDialog|ConfirmDialog/,
+        autoFixable: false,
+    },
+    // -------------------------------------------------------------------------
+    // Label-Value Display Patterns
+    // -------------------------------------------------------------------------
+    {
+        name: "inline-label-value",
+        pattern: /<(?:Box|div|Stack)[^>]*>[\s\S]{0,30}<(?:Typography|span)[^>]*(?:fontWeight|font-bold|font-semibold)[^>]*>[A-Z][^<]{2,20}:?\s*<\/(?:Typography|span)>[\s\S]{0,30}<(?:Typography|span)/,
+        category: "label-value",
+        sharedComponent: "LabelValuePair",
+        importPath: "@/components/shared",
+        message: "Inline label-value display - LabelValuePair provides consistent formatting",
+        severity: "info",
+        skipIfImports: /LabelValuePair|LabelValueGrid/,
+        autoFixable: false,
+    },
+    // -------------------------------------------------------------------------
+    // Stat/Metric Display Patterns
+    // -------------------------------------------------------------------------
+    {
+        name: "inline-stat-card",
+        pattern: /<(?:Card|Paper)[^>]*>[\s\S]{0,150}(?:formatNumber|toLocaleString|\$\{.*\}|total|count|metric)[\s\S]{0,100}<\/(?:Card|Paper)>/i,
+        category: "stat-display",
+        sharedComponent: "StatCard or CompactStatCard",
+        importPath: "@/components/shared",
+        message: "Inline stat/metric card - StatCard provides consistent metric display with trends",
+        severity: "info",
+        skipIfImports: /StatCard|CompactStatCard|UnifiedMetricDisplay/,
+        autoFixable: false,
+    },
+    // -------------------------------------------------------------------------
+    // Status Indicator Patterns
+    // -------------------------------------------------------------------------
+    {
+        name: "inline-status-badge",
+        pattern: /<(?:Box|span|div)[^>]*(?:className="[^"]*(?:rounded-full|badge|chip)[^"]*"|style=\{[^}]*background)[^>]*>[\s\S]{0,30}(?:Active|Pending|Error|Success|Warning)/i,
+        category: "status-indicator",
+        sharedComponent: "StatusChip or StatusIconChip",
+        importPath: "@/components/shared",
+        message: "Inline status badge - StatusChip provides consistent status display",
+        severity: "info",
+        skipIfImports: /StatusChip|StatusIconChip|StatusBadge/,
+        autoFixable: false,
+    },
+];
+const DISCOVERY_PATTERNS = [
+    {
+        name: "price-display-pattern",
+        pattern: /\$\{formatCurrency\([^)]+\)\}|\{\s*formatCurrency\([^)]+\)\s*\}|<Typography[^>]*>\s*\$[\d,.]+/,
+        minOccurrences: 5,
+        suggestedName: "PriceDisplay",
+        description: "Consistent price formatting with currency symbol",
+    },
+    {
+        name: "date-display-pattern",
+        pattern: /formatDate\([^)]+\)|new Date\([^)]*\)\.toLocale|<Typography[^>]*>\d{1,2}\/\d{1,2}\/\d{2,4}/,
+        minOccurrences: 5,
+        suggestedName: "DateDisplay",
+        description: "Consistent date formatting",
+    },
+    {
+        name: "avatar-with-name",
+        pattern: /<(?:Avatar|UserAvatar)[^>]*\/>[\s\S]{0,50}<(?:Typography|span)[^>]*>[^<]*(?:name|Name|user|User)/i,
+        minOccurrences: 3,
+        suggestedName: "UserNameWithAvatar",
+        description: "Avatar paired with user name display",
+    },
+    {
+        name: "icon-with-text",
+        pattern: /<(?:Box|Stack|div)[^>]*(?:flex|row)[^>]*>[\s\S]{0,30}<(?:\w+Icon|Lucide\w+)[^>]*\/>[\s\S]{0,30}<(?:Typography|span)/,
+        minOccurrences: 10,
+        suggestedName: "IconText",
+        description: "Icon paired with text in a row",
+    },
+    {
+        name: "card-with-header-action",
+        pattern: /<Card[^>]*>[\s\S]{0,100}<(?:CardHeader|Box)[^>]*>[\s\S]{0,100}(?:justify-between|space-between)[\s\S]{0,100}<(?:Button|IconButton)/,
+        minOccurrences: 5,
+        suggestedName: "ActionCard",
+        description: "Card with header containing action button",
+    },
+    {
+        name: "truncated-text-tooltip",
+        pattern: /<Tooltip[^>]*>[\s\S]{0,50}<(?:Typography|span)[^>]*(?:truncate|overflow-hidden|text-ellipsis)/,
+        minOccurrences: 3,
+        suggestedName: "TruncatedTextWithTooltip",
+        description: "Truncated text with full text in tooltip",
+    },
+    {
+        name: "copy-to-clipboard",
+        pattern: /navigator\.clipboard\.writeText|copyToClipboard|<(?:IconButton|Button)[^>]*onClick=\{[^}]*copy/i,
+        minOccurrences: 3,
+        suggestedName: "CopyButton (exists - check usage)",
+        description: "Copy to clipboard functionality",
+    },
+    {
+        name: "search-input-with-icon",
+        pattern: /<(?:TextField|Input)[^>]*(?:startAdornment|InputProps)[^>]*(?:Search|SearchIcon)/,
+        minOccurrences: 3,
+        suggestedName: "SearchInput (exists - check usage)",
+        description: "Search input with search icon",
+    },
+    {
+        name: "expandable-section",
+        pattern: /<(?:Collapse|Accordion)[^>]*>|useState.*(?:expanded|isExpanded|open)|onClick=\{[^}]*toggle/,
+        minOccurrences: 5,
+        suggestedName: "ExpandableSection",
+        description: "Collapsible/expandable content section",
+    },
+    {
+        name: "info-tooltip-icon",
+        pattern: /<Tooltip[^>]*>[\s\S]{0,30}<(?:Info|HelpCircle|QuestionMark)\s*(?:size|className)/,
+        minOccurrences: 5,
+        suggestedName: "InfoTooltip",
+        description: "Info icon with explanatory tooltip",
+    },
+];
+// ============================================================================
+// File Filtering
+// ============================================================================
+const SKIP_DIRECTORIES = [
+    "components/shared",
+    "components/ui",
+    "scripts/",
+    "tests/",
+    ".next/",
+    "node_modules/",
+];
+async function findComponentFiles() {
+    const patterns = ["app/**/*.tsx", "components/**/*.tsx"];
+    const allFiles = [];
+    for (const pattern of patterns) {
+        const matches = await (0, glob_1.glob)(pattern, {
+            ignore: ["**/node_modules/**", "**/*.test.tsx", "**/*.stories.tsx"],
+        });
+        allFiles.push(...matches);
+    }
+    return allFiles.filter((file) => {
+        if ((0, exclusions_1.shouldExcludeFile)(file, appExclusions))
+            return false;
+        const normalizedPath = file.replace(/\\/g, "/");
+        for (const dir of SKIP_DIRECTORIES) {
+            if (normalizedPath.includes(dir))
+                return false;
+        }
+        return true;
+    });
+}
+// ============================================================================
+// Analysis Functions
+// ============================================================================
+function findLineAndColumn(content, index) {
+    const lines = content.substring(0, index).split("\n");
+    return {
+        line: lines.length,
+        column: (lines[lines.length - 1]?.length || 0) + 1,
+    };
+}
+function getImportStatement(component, importPath) {
+    return `import { ${component} } from "${importPath}";`;
+}
+function extractImports(content) {
+    const importMatches = content.matchAll(/import\s*\{([^}]+)\}\s*from\s*["']([^"']+)["']/g);
+    const imports = [];
+    for (const match of importMatches) {
+        const components = match[1].split(",").map((c) => c.trim().split(" ")[0]);
+        imports.push(...components);
+    }
+    return imports;
+}
+function analyzeFile(filePath, content) {
+    const matches = [];
+    const imports = extractImports(content);
+    const inconsistentUsage = [];
+    // Check for pattern matches
+    for (const patternDef of PATTERNS) {
+        if (patternDef.skipIfImports && patternDef.skipIfImports.test(content.slice(0, 1000))) {
+            continue;
+        }
+        const regex = new RegExp(patternDef.pattern.source, "gi");
+        let match;
+        while ((match = regex.exec(content)) !== null) {
+            const { line, column } = findLineAndColumn(content, match.index);
+            // Check for preflight-ignore comment in the surrounding context (look further back for block comments)
+            const surroundingLines = content.slice(Math.max(0, match.index - 500), match.index + 50);
+            if (/preflight-ignore/i.test(surroundingLines)) {
+                continue; // Skip patterns with preflight-ignore comment
+            }
+            const context = patternDef.contextCheck
+                ? patternDef.contextCheck(content, match.index)
+                : {
+                    isInsideButton: false,
+                    isInsideTableCell: false,
+                    isSmallSize: false,
+                    hasExistingImport: false,
+                    surroundingCode: content.slice(Math.max(0, match.index - 30), match.index + 100),
+                };
+            // Skip small inline spinners in table cells (usually appropriate)
+            if (context.isSmallSize && context.isInsideTableCell) {
+                continue;
+            }
+            const mainComponent = patternDef.sharedComponent.split(" ")[0];
+            matches.push({
+                file: filePath,
+                line,
+                column,
+                pattern: patternDef.name,
+                category: patternDef.category,
+                severity: patternDef.severity,
+                sharedComponent: patternDef.sharedComponent,
+                importPath: patternDef.importPath,
+                importStatement: getImportStatement(mainComponent, patternDef.importPath),
+                message: patternDef.message,
+                matchedCode: match[0].substring(0, 100) + (match[0].length > 100 ? "..." : ""),
+                context,
+                autoFixable: patternDef.autoFixable,
+            });
+        }
+    }
+    // Check for inconsistent usage - only flag if there are real inline patterns
+    // that aren't inside UnifiedEmptyState or other shared components
+    const componentChecks = [
+        {
+            name: "LoadingButton",
+            inlinePattern: /<Button[^>]*>[\s\S]{0,50}(?:<Loader2[^>]*animate-spin|<CircularProgress)/,
+            excludePattern: /<LoadingButton/,
+        },
+        {
+            name: "ConfirmDialog",
+            inlinePattern: /window\.confirm\(/,
+            excludePattern: null,
+        },
+    ];
+    for (const check of componentChecks) {
+        const hasImport = imports.includes(check.name);
+        if (!hasImport)
+            continue;
+        const inlineMatches = content.match(new RegExp(check.inlinePattern.source, "g")) || [];
+        // Filter out matches that are part of the shared component itself
+        const realInlineCount = check.excludePattern
+            ? inlineMatches.filter((m) => !check.excludePattern.test(m)).length
+            : inlineMatches.length;
+        if (realInlineCount > 0) {
+            inconsistentUsage.push({
+                component: check.name,
+                imported: true,
+                inlineCount: realInlineCount,
+                message: `${check.name} is imported but ${realInlineCount} inline pattern(s) still exist`,
+            });
+        }
+    }
+    // Calculate priority score
+    const priorityScore = matches.filter((m) => m.severity === "warning").length * 3 +
+        matches.filter((m) => m.severity === "info").length * 1 +
+        inconsistentUsage.length * 2;
+    return { file: filePath, matches, imports, inconsistentUsage, priorityScore };
+}
+function discoverPatterns(files) {
+    const patternCounts = new Map();
+    for (const file of files) {
+        try {
+            const content = fs.readFileSync(file, "utf-8");
+            for (const discovery of DISCOVERY_PATTERNS) {
+                const matches = content.matchAll(new RegExp(discovery.pattern.source, "gi"));
+                for (const match of matches) {
+                    const key = discovery.name;
+                    if (!patternCounts.has(key)) {
+                        patternCounts.set(key, { files: new Set(), examples: [] });
+                    }
+                    const data = patternCounts.get(key);
+                    data.files.add(file);
+                    if (data.examples.length < 3) {
+                        data.examples.push(match[0].substring(0, 80));
+                    }
+                }
+            }
+        }
+        catch {
+            // Skip unreadable files
+        }
+    }
+    const discovered = [];
+    for (const discovery of DISCOVERY_PATTERNS) {
+        const data = patternCounts.get(discovery.name);
+        if (data && data.files.size >= discovery.minOccurrences) {
+            discovered.push({
+                pattern: discovery.name,
+                occurrences: data.files.size,
+                files: Array.from(data.files),
+                suggestedName: discovery.suggestedName,
+                codeExamples: data.examples,
+            });
+        }
+    }
+    return discovered.sort((a, b) => b.occurrences - a.occurrences);
+}
+// ============================================================================
+// Output Formatting
+// ============================================================================
+function printMatch(match, verbose) {
+    const icon = match.severity === "warning" ? console_chars_1.emoji.warning : console_chars_1.emoji.info;
+    console.log(`  ${match.file}:${match.line}:${match.column}`);
+    console.log(`    ${icon} [${match.category}] ${match.message}`);
+    console.log(`    ${console_chars_1.emoji.hint} Use: ${match.sharedComponent}`);
+    console.log(`    ${console_chars_1.chars.arrow} Add: ${match.importStatement}`);
+    if (match.autoFixable) {
+        console.log(`    ${console_chars_1.chars.bullet} Auto-fixable with --fix`);
+    }
+    if (verbose) {
+        console.log(`    ${console_chars_1.chars.bullet} Matched: ${match.matchedCode.replace(/\n/g, " ").trim()}`);
+    }
+    console.log("");
+}
+function printSummary(analyses, discovered, verbose) {
+    const allMatches = analyses.flatMap((a) => a.matches);
+    const allInconsistent = analyses.flatMap((a) => a.inconsistentUsage);
+    // Group by category
+    const byCategory = new Map();
+    for (const match of allMatches) {
+        if (!byCategory.has(match.category)) {
+            byCategory.set(match.category, []);
+        }
+        byCategory.get(match.category).push(match);
+    }
+    console.log((0, console_chars_1.createDivider)(70, "heavy"));
+    console.log(`${console_chars_1.emoji.docs} SUMMARY BY CATEGORY:`);
+    console.log((0, console_chars_1.createDivider)(70, "light"));
+    const categoryNames = {
+        "button-loading": "Button Loading States",
+        "page-loading": "Page/Section Loading",
+        "inline-loading": "Inline Loading Indicators",
+        "empty-state": "Empty State Messages",
+        "confirmation": "Confirmation Dialogs",
+        "label-value": "Label-Value Displays",
+        "stat-display": "Stat/Metric Cards",
+        "status-indicator": "Status Indicators",
+    };
+    for (const [category, matches] of byCategory) {
+        const warnings = matches.filter((m) => m.severity === "warning").length;
+        const infos = matches.filter((m) => m.severity === "info").length;
+        const autoFixable = matches.filter((m) => m.autoFixable).length;
+        const icon = warnings > 0 ? console_chars_1.emoji.warning : console_chars_1.emoji.info;
+        console.log(`  ${icon} ${categoryNames[category]}: ${matches.length} occurrences`);
+        if (warnings > 0)
+            console.log(`      ${console_chars_1.chars.bullet} ${warnings} warnings, ${infos} suggestions`);
+        if (autoFixable > 0)
+            console.log(`      ${console_chars_1.chars.bullet} ${autoFixable} auto-fixable`);
+        // Show unique components to use
+        const components = [...new Set(matches.map((m) => m.sharedComponent.split(" ")[0]))];
+        console.log(`      ${console_chars_1.chars.arrow} Use: ${components.join(", ")}`);
+    }
+    // High priority files
+    const highPriority = analyses
+        .filter((a) => a.priorityScore >= 3)
+        .sort((a, b) => b.priorityScore - a.priorityScore)
+        .slice(0, 10);
+    if (highPriority.length > 0) {
+        console.log("");
+        console.log((0, console_chars_1.createDivider)(70, "light"));
+        console.log(`${console_chars_1.emoji.fire} HIGH PRIORITY FILES (most opportunities):`);
+        for (const analysis of highPriority) {
+            const warnings = analysis.matches.filter((m) => m.severity === "warning").length;
+            const total = analysis.matches.length;
+            console.log(`  ${console_chars_1.chars.bullet} ${analysis.file} (${warnings} warnings, ${total} total)`);
+        }
+    }
+    // Inconsistent usage - group by file and deduplicate
+    if (allInconsistent.length > 0) {
+        console.log("");
+        console.log((0, console_chars_1.createDivider)(70, "light"));
+        console.log(`${console_chars_1.emoji.warning} INCONSISTENT USAGE (imported but still using inline):`);
+        // Group by component type and count unique files
+        const inconsistentByComponent = new Map();
+        for (const analysis of analyses) {
+            for (const inconsistent of analysis.inconsistentUsage) {
+                if (!inconsistentByComponent.has(inconsistent.component)) {
+                    inconsistentByComponent.set(inconsistent.component, { files: new Set(), totalInline: 0 });
+                }
+                const data = inconsistentByComponent.get(inconsistent.component);
+                data.files.add(analysis.file);
+                data.totalInline += inconsistent.inlineCount;
+            }
+        }
+        for (const [component, data] of inconsistentByComponent) {
+            console.log(`  ${console_chars_1.chars.bullet} ${component}: ${data.files.size} files with ${data.totalInline} inline pattern(s)`);
+            if (verbose && data.files.size <= 5) {
+                for (const file of data.files) {
+                    console.log(`      ${console_chars_1.chars.arrow} ${file}`);
+                }
+            }
+        }
+    }
+    // Discovered patterns
+    if (discovered.length > 0) {
+        console.log("");
+        console.log((0, console_chars_1.createDivider)(70, "light"));
+        console.log(`${console_chars_1.emoji.search} POTENTIAL NEW SHARED COMPONENTS:`);
+        for (const pattern of discovered) {
+            console.log(`  ${console_chars_1.chars.bullet} ${pattern.suggestedName}: ${pattern.occurrences} files`);
+            if (verbose && pattern.codeExamples.length > 0) {
+                console.log(`      Example: ${pattern.codeExamples[0].replace(/\n/g, " ").trim()}`);
+            }
+        }
+    }
+    // Stats
+    console.log("");
+    console.log((0, console_chars_1.createDivider)(70, "heavy"));
+    const warnings = allMatches.filter((m) => m.severity === "warning").length;
+    const suggestions = allMatches.filter((m) => m.severity === "info").length;
+    const autoFixable = allMatches.filter((m) => m.autoFixable).length;
+    const estimatedLines = allMatches.length * 5; // Rough estimate
+    console.log(`Files analyzed: ${analyses.length}`);
+    console.log(`Warnings: ${warnings}`);
+    console.log(`Suggestions: ${suggestions}`);
+    console.log(`Auto-fixable: ${autoFixable}`);
+    console.log(`Inconsistent usage: ${allInconsistent.length}`);
+    console.log(`New component opportunities: ${discovered.length}`);
+    console.log(`Estimated code reduction: ~${estimatedLines} lines`);
+}
+// ============================================================================
+// Main
+// ============================================================================
+async function run() {
+    const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(exports.name);
+    const args = process.argv.slice(2);
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const discover = args.includes("--discover") || args.includes("-d");
+    const fix = args.includes("--fix");
+    console.log(`${console_chars_1.emoji.search} Missing Shared Component Detection Preflight`);
+    console.log((0, console_chars_1.createDivider)(70, "heavy"));
+    if (fix) {
+        console.log(`${console_chars_1.emoji.warning} Auto-fix mode enabled (not yet implemented)`);
+        console.log("");
+    }
+    // Load exclusions
+    appExclusions = await (0, exclusions_1.getExclusions)(exports.id);
+    const files = await findComponentFiles();
+    console.log(`Scanning ${files.length} component files...\n`);
+    // Analyze files
+    const analyses = [];
+    for (const file of files) {
+        try {
+            const content = fs.readFileSync(file, "utf-8");
+            const analysis = analyzeFile(file, content);
+            if (analysis.matches.length > 0 || analysis.inconsistentUsage.length > 0) {
+                analyses.push(analysis);
+            }
+        }
+        catch {
+            // Skip unreadable files
+        }
+    }
+    // Discover new patterns
+    const discovered = discover ? discoverPatterns(files) : [];
+    // Print warnings first
+    const allWarnings = analyses.flatMap((a) => a.matches.filter((m) => m.severity === "warning"));
+    if (allWarnings.length > 0) {
+        console.log(`${console_chars_1.emoji.warning}  WARNINGS (should refactor):`);
+        console.log((0, console_chars_1.createDivider)(70, "light"));
+        for (const match of allWarnings) {
+            printMatch(match, verbose);
+        }
+    }
+    // Print suggestions if verbose
+    if (verbose) {
+        const allSuggestions = analyses.flatMap((a) => a.matches.filter((m) => m.severity === "info"));
+        if (allSuggestions.length > 0) {
+            console.log(`${console_chars_1.emoji.info}  SUGGESTIONS (optional improvements):`);
+            console.log((0, console_chars_1.createDivider)(70, "light"));
+            for (const match of allSuggestions) {
+                printMatch(match, verbose);
+            }
+        }
+    }
+    // Print summary
+    printSummary(analyses, discovered, verbose);
+    // Available components reminder
+    console.log(`\n${console_chars_1.emoji.hint} Available shared components from @/components/shared:`);
+    console.log(`   ${console_chars_1.chars.bullet} LoadingButton - Button with built-in loading state`);
+    console.log(`   ${console_chars_1.chars.bullet} LoadingState / InlineLoadingState - Loading spinners with message`);
+    console.log(`   ${console_chars_1.chars.bullet} LoadingEmptyState - Handles loading/empty/content states`);
+    console.log(`   ${console_chars_1.chars.bullet} UnifiedEmptyState - Empty state with icon and actions`);
+    console.log(`   ${console_chars_1.chars.bullet} ConfirmDialog / DeleteDialog - Confirmation modals`);
+    console.log(`   ${console_chars_1.chars.bullet} LabelValuePair - Label: value displays`);
+    console.log(`   ${console_chars_1.chars.bullet} StatCard / CompactStatCard - Metric displays`);
+    console.log(`   ${console_chars_1.chars.bullet} StatusChip / StatusIconChip - Status indicators`);
+    console.log(`\n${console_chars_1.emoji.info} This preflight is non-blocking (suggestions only).`);
+    console.log(`${console_chars_1.emoji.hint} Run with --verbose for detailed output, --discover for new component opportunities.`);
+}
+// Allow direct execution
+if (require.main === module) {
+    run().catch(console.error);
+}
+//# sourceMappingURL=missing-shared-component-detection.js.map