@empline/preflight 1.0.20

package/dist/checks/ui/input-width-consistency.js

@@ -0,0 +1,342 @@
+"use strict";
+/**
+ * Input Width Consistency Preflight
+ *
+ * Ensures consistent input field widths across the application:
+ * - Search inputs in toolbars
+ * - Filter dropdowns in toolbars
+ * - Form fields in dialogs/forms
+ *
+ * Valid widths (from lib/constants/spacing.ts):
+ * - Search: sm:min-w-80 (default), sm:min-w-64 (compact), sm:min-w-96 (wide)
+ * - Filter: min-w-36, min-w-40, min-w-44, min-w-48, min-w-52
+ * - Form: min-w-28, min-w-36, min-w-44, min-w-64
+ *
+ * Non-standard widths that will be flagged:
+ * - min-w-20, min-w-24, min-w-32 (too narrow or non-standard)
+ * - Arbitrary values like min-w-[140px] (use Tailwind classes)
+ */
+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;
+exports.analyzeWidthUsage = analyzeWidthUsage;
+exports.checkDataTableToolbarUsage = checkDataTableToolbarUsage;
+exports.findWidthIssues = findWidthIssues;
+exports.run = run;
+const fs = __importStar(require("fs"));
+const glob_1 = require("glob");
+const console_chars_1 = require("../../utils/console-chars");
+// Check metadata
+exports.id = "ui/input-width-consistency";
+exports.name = "Input Width Consistency";
+exports.category = "ui";
+exports.blocking = false;
+exports.description = "Input Width Consistency Preflight";
+exports.tags = ["ui"];
+const BLOCKING = true;
+// Valid width classes by context
+const VALID_WIDTHS = {
+    SEARCH: ["sm:min-w-80", "sm:min-w-64", "sm:min-w-96", "min-w-72"],
+    FILTER: ["min-w-36", "min-w-40", "min-w-44", "min-w-48", "min-w-52"],
+    FORM: ["min-w-28", "min-w-36", "min-w-44", "min-w-64"],
+};
+// All valid min-w classes
+const ALL_VALID_WIDTHS = [...VALID_WIDTHS.SEARCH, ...VALID_WIDTHS.FILTER, ...VALID_WIDTHS.FORM];
+// Non-standard widths to flag
+const NON_STANDARD_WIDTHS = ["min-w-20", "min-w-24", "min-w-32"];
+// Arbitrary width pattern (e.g., min-w-[140px])
+const ARBITRARY_WIDTH_PATTERN = /min-w-\[\d+px\]/;
+const SCAN_PATTERNS = ["app/**/*.tsx", "components/**/*.tsx"];
+const IGNORE_PATTERNS = [
+    "**/node_modules/**",
+    "**/.next/**",
+    "**/dist/**",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/loading.tsx",
+    "**/stories/**",
+];
+// Files to exclude from strict checking (UI components with intentional small widths)
+const EXCLUDE_FROM_STRICT = [
+    "UnifiedHeaderBadge.tsx", // Badge sizing is intentional
+    "Tabs.tsx", // Tab sizing is intentional
+    "TimelineSection.tsx", // Timeline dots/markers
+    "LabelValuePair.tsx", // Label widths
+    "PaginationControls.tsx", // Page size dropdown can be narrow
+];
+function findWidthIssues() {
+    const issues = [];
+    let files = [];
+    for (const pattern of SCAN_PATTERNS) {
+        const matches = glob_1.glob.sync(pattern, { ignore: IGNORE_PATTERNS });
+        files = files.concat(matches);
+    }
+    files = [...new Set(files)];
+    for (const file of files) {
+        // Skip files in exclude list
+        const fileName = file.split(/[/\\]/).pop() || "";
+        if (EXCLUDE_FROM_STRICT.some((excluded) => fileName.includes(excluded))) {
+            continue;
+        }
+        try {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            lines.forEach((line, index) => {
+                const lineNumber = index + 1;
+                // Only check lines with actual input components
+                const isInputLine = line.includes("<TextField") ||
+                    line.includes("<Select") ||
+                    line.includes("<FormControl") ||
+                    line.includes("<FormSelect") ||
+                    line.includes("<FormInput") ||
+                    line.includes("<SearchInput") ||
+                    line.includes("combobox");
+                if (!isInputLine)
+                    return;
+                // Check for non-standard widths
+                for (const badWidth of NON_STANDARD_WIDTHS) {
+                    if (line.includes(badWidth)) {
+                        const context = determineContext(line, content, index);
+                        issues.push({
+                            file,
+                            line: lineNumber,
+                            type: "non-standard",
+                            currentWidth: badWidth,
+                            suggestion: getSuggestion(context),
+                            context,
+                        });
+                    }
+                }
+                // Check for arbitrary widths like min-w-[140px]
+                const arbitraryMatch = line.match(ARBITRARY_WIDTH_PATTERN);
+                if (arbitraryMatch) {
+                    const context = determineContext(line, content, index);
+                    issues.push({
+                        file,
+                        line: lineNumber,
+                        type: "arbitrary",
+                        currentWidth: arbitraryMatch[0],
+                        suggestion: `Use standard Tailwind class instead: ${getSuggestion(context)}`,
+                        context,
+                    });
+                }
+            });
+        }
+        catch {
+            // Skip unreadable files
+        }
+    }
+    return issues;
+}
+function determineContext(line, content, lineIndex) {
+    const lowerLine = line.toLowerCase();
+    const surroundingLines = content
+        .split("\n")
+        .slice(Math.max(0, lineIndex - 3), lineIndex + 3)
+        .join(" ")
+        .toLowerCase();
+    if (lowerLine.includes("search") ||
+        surroundingLines.includes("searchinput") ||
+        surroundingLines.includes("searchplaceholder")) {
+        return "search";
+    }
+    if (lowerLine.includes("filter") ||
+        lowerLine.includes("status") ||
+        lowerLine.includes("sort") ||
+        surroundingLines.includes("toolbar")) {
+        return "filter";
+    }
+    return "form";
+}
+function getSuggestion(context) {
+    switch (context) {
+        case "search":
+            return "Use INPUT_WIDTHS.SEARCH.DEFAULT (sm:min-w-80) or COMPACT (sm:min-w-64)";
+        case "filter":
+            return "Use min-w-36 (standard), min-w-44 (wide), or min-w-52 (extra-wide)";
+        default:
+            return "Use min-w-28 (narrow), min-w-36 (standard), or min-w-44 (medium)";
+    }
+}
+function analyzeWidthUsage() {
+    const widthUsage = new Map();
+    let files = [];
+    for (const pattern of SCAN_PATTERNS) {
+        const matches = glob_1.glob.sync(pattern, { ignore: IGNORE_PATTERNS });
+        files = files.concat(matches);
+    }
+    files = [...new Set(files)];
+    for (const file of files) {
+        try {
+            const content = fs.readFileSync(file, "utf8");
+            // Match standard min-w-XX patterns
+            const standardMatches = content.matchAll(/min-w-(\d+)/g);
+            for (const match of standardMatches) {
+                const width = `min-w-${match[1]}`;
+                const existing = widthUsage.get(width) || { files: [], count: 0 };
+                if (!existing.files.includes(file)) {
+                    existing.files.push(file);
+                }
+                existing.count++;
+                widthUsage.set(width, existing);
+            }
+            // Match arbitrary min-w-[XXpx] patterns
+            const arbitraryMatches = content.matchAll(/min-w-\[(\d+)px\]/g);
+            for (const match of arbitraryMatches) {
+                const width = `min-w-[${match[1]}px]`;
+                const existing = widthUsage.get(width) || { files: [], count: 0 };
+                if (!existing.files.includes(file)) {
+                    existing.files.push(file);
+                }
+                existing.count++;
+                widthUsage.set(width, existing);
+            }
+        }
+        catch {
+            // Skip
+        }
+    }
+    return widthUsage;
+}
+function checkDataTableToolbarUsage() {
+    const using = [];
+    const notUsing = [];
+    const patterns = ["app/store/**/*.tsx", "app/admin/**/*.tsx", "app/account/**/*.tsx"];
+    let files = [];
+    for (const pattern of patterns) {
+        const matches = glob_1.glob.sync(pattern, { ignore: IGNORE_PATTERNS });
+        files = files.concat(matches);
+    }
+    files = [...new Set(files)];
+    for (const file of files) {
+        try {
+            const content = fs.readFileSync(file, "utf8");
+            const hasSearch = content.includes("searchQuery") ||
+                content.includes("searchTerm") ||
+                content.includes("Search listings") ||
+                content.includes("Search orders") ||
+                content.includes("Search users");
+            if (hasSearch) {
+                if (content.includes("DataTableToolbar")) {
+                    using.push(file);
+                }
+                else if (content.includes("TextField") && content.includes("Search")) {
+                    notUsing.push(file);
+                }
+            }
+        }
+        catch {
+            // Skip
+        }
+    }
+    return { using, notUsing };
+}
+function run() {
+    console.log(`${console_chars_1.emoji.search} Checking input width consistency...\n`);
+    const issues = findWidthIssues();
+    const widthUsage = analyzeWidthUsage();
+    const toolbarUsage = checkDataTableToolbarUsage();
+    let hasErrors = false;
+    // Report issues
+    if (issues.length > 0) {
+        hasErrors = true;
+        console.log(`${console_chars_1.emoji.error} Found ${issues.length} non-standard widths:\n`);
+        const groupedByFile = issues.reduce((acc, issue) => {
+            if (!acc[issue.file])
+                acc[issue.file] = [];
+            acc[issue.file].push(issue);
+            return acc;
+        }, {});
+        for (const [file, fileIssues] of Object.entries(groupedByFile)) {
+            console.log(`${console_chars_1.emoji.folder} ${file}`);
+            for (const issue of fileIssues) {
+                console.log(`   Line ${issue.line}: "${issue.currentWidth}" (${issue.context})`);
+                console.log(`   ${console_chars_1.emoji.hint} ${issue.suggestion}`);
+            }
+            console.log();
+        }
+    }
+    // Report custom search implementations
+    if (toolbarUsage.notUsing.length > 0) {
+        console.log(`${console_chars_1.emoji.warning} Files with custom search (consider DataTableToolbar):\n`);
+        for (const file of toolbarUsage.notUsing) {
+            console.log(`   - ${file}`);
+        }
+        console.log();
+    }
+    // Show width usage analysis
+    console.log("Width Usage Analysis:");
+    const sortedWidths = [...widthUsage.entries()]
+        .filter(([w]) => w.match(/min-w-/) && !w.includes("min-w-0"))
+        .sort((a, b) => b[1].count - a[1].count);
+    for (const [width, data] of sortedWidths.slice(0, 12)) {
+        const isValid = ALL_VALID_WIDTHS.some((v) => width.includes(v.replace("sm:", "")));
+        const isNonStandard = NON_STANDARD_WIDTHS.includes(width);
+        const isArbitrary = width.includes("[");
+        let icon = console_chars_1.emoji.success;
+        if (isNonStandard || isArbitrary)
+            icon = console_chars_1.emoji.error;
+        else if (!isValid)
+            icon = console_chars_1.emoji.warning;
+        console.log(`  ${icon} ${width}: ${data.count} uses in ${data.files.length} files`);
+    }
+    console.log();
+    if (issues.length === 0) {
+        console.log(`${console_chars_1.emoji.success} All input widths are consistent\n`);
+    }
+    console.log("Standard Widths (INPUT_WIDTHS from @/lib/constants/spacing):");
+    console.log("  Search: sm:min-w-80 (default), sm:min-w-64 (compact), sm:min-w-96 (wide)");
+    console.log("  Filter: min-w-36, min-w-40, min-w-44, min-w-48, min-w-52");
+    console.log("  Form:   min-w-28 (narrow), min-w-36 (standard), min-w-44 (medium), min-w-64 (wide)\n");
+    if (toolbarUsage.using.length > 0) {
+        console.log(`${console_chars_1.emoji.success} ${toolbarUsage.using.length} files using DataTableToolbar\n`);
+    }
+    return {
+        success: !hasErrors || !BLOCKING,
+        issues,
+        blocking: BLOCKING,
+        stats: {
+            filesScanned: widthUsage.size,
+            usingToolbar: toolbarUsage.using.length,
+            customImplementations: toolbarUsage.notUsing.length,
+            widthViolations: issues.length,
+        },
+    };
+}
+if (require.main === module) {
+    const result = run();
+    process.exit(result.success ? 0 : 1);
+}
+//# sourceMappingURL=input-width-consistency.js.map

package/dist/checks/ui/input-width-consistency.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-width-consistency.js","sourceRoot":"","sources":["../../../src/checks/ui/input-width-consistency.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;GAgBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8VM,8CAAiB;AAAE,gEAA0B;AAAE,0CAAe;AAAE,kBAAG;AA5V5E,uCAAyB;AACzB,+BAA4B;AAC5B,6DAAkD;AAGlD,iBAAiB;AACJ,QAAA,EAAE,GAAG,4BAA4B,CAAC;AAClC,QAAA,IAAI,GAAG,yBAAyB,CAAC;AACjC,QAAA,QAAQ,GAAG,IAAI,CAAC;AAChB,QAAA,QAAQ,GAAG,KAAK,CAAC;AACjB,QAAA,WAAW,GAAG,mCAAmC,CAAC;AAClD,QAAA,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;AAE3B,MAAM,QAAQ,GAAG,IAAI,CAAC;AAEtB,iCAAiC;AACjC,MAAM,YAAY,GAAG;IACnB,MAAM,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,CAAC;IACjE,MAAM,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;IACpE,IAAI,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;CACvD,CAAC;AAEF,0BAA0B;AAC1B,MAAM,gBAAgB,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,GAAG,YAAY,CAAC,MAAM,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;AAEhG,8BAA8B;AAC9B,MAAM,mBAAmB,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;AAEjE,gDAAgD;AAChD,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;AAElD,MAAM,aAAa,GAAG,CAAC,cAAc,EAAE,qBAAqB,CAAC,CAAC;AAE9D,MAAM,eAAe,GAAG;IACtB,oBAAoB;IACpB,aAAa;IACb,YAAY;IACZ,eAAe;IACf,eAAe;IACf,gBAAgB;IAChB,eAAe;CAChB,CAAC;AAEF,sFAAsF;AACtF,MAAM,mBAAmB,GAAG;IAC1B,wBAAwB,EAAE,8BAA8B;IACxD,UAAU,EAAE,4BAA4B;IACxC,qBAAqB,EAAE,wBAAwB;IAC/C,oBAAoB,EAAE,eAAe;IACrC,wBAAwB,EAAE,mCAAmC;CAC9D,CAAC;AAWF,SAAS,eAAe;IACtB,MAAM,MAAM,GAAY,EAAE,CAAC;IAE3B,IAAI,KAAK,GAAa,EAAE,CAAC;IACzB,KAAK,MAAM,OAAO,IAAI,aAAa,EAAE,CAAC;QACpC,MAAM,OAAO,GAAG,WAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;QAChE,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IACD,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAE5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,6BAA6B;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC;QACjD,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC;YACxE,SAAS;QACX,CAAC;QAED,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAC9C,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAElC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC5B,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,CAAC;gBAE7B,gDAAgD;gBAChD,MAAM,WAAW,GACf,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC;oBAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;oBACxB,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC;oBAC7B,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC;oBAC5B,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC;oBAC3B,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC;oBAC7B,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;gBAE5B,IAAI,CAAC,WAAW;oBAAE,OAAO;gBAEzB,gCAAgC;gBAChC,KAAK,MAAM,QAAQ,IAAI,mBAAmB,EAAE,CAAC;oBAC3C,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;wBAC5B,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;wBACvD,MAAM,CAAC,IAAI,CAAC;4BACV,IAAI;4BACJ,IAAI,EAAE,UAAU;4BAChB,IAAI,EAAE,cAAc;4BACpB,YAAY,EAAE,QAAQ;4BACtB,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC;4BAClC,OAAO;yBACR,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC;gBAED,gDAAgD;gBAChD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;gBAC3D,IAAI,cAAc,EAAE,CAAC;oBACnB,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;oBACvD,MAAM,CAAC,IAAI,CAAC;wBACV,IAAI;wBACJ,IAAI,EAAE,UAAU;wBAChB,IAAI,EAAE,WAAW;wBACjB,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC;wBAC/B,UAAU,EAAE,wCAAwC,aAAa,CAAC,OAAO,CAAC,EAAE;wBAC5E,OAAO;qBACR,CAAC,CAAC;gBACL,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAAC,MAAM,CAAC;YACP,wBAAwB;QAC1B,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAY,EAAE,OAAe,EAAE,SAAiB;IACxE,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,gBAAgB,GAAG,OAAO;SAC7B,KAAK,CAAC,IAAI,CAAC;SACX,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC;SAChD,IAAI,CAAC,GAAG,CAAC;SACT,WAAW,EAAE,CAAC;IAEjB,IACE,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAC5B,gBAAgB,CAAC,QAAQ,CAAC,aAAa,CAAC;QACxC,gBAAgB,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAC9C,CAAC;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC;IACD,IACE,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAC5B,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAC5B,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC1B,gBAAgB,CAAC,QAAQ,CAAC,SAAS,CAAC,EACpC,CAAC;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,aAAa,CAAC,OAAe;IACpC,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,QAAQ;YACX,OAAO,wEAAwE,CAAC;QAClF,KAAK,QAAQ;YACX,OAAO,oEAAoE,CAAC;QAC9E;YACE,OAAO,kEAAkE,CAAC;IAC9E,CAAC;AACH,CAAC;AAED,SAAS,iBAAiB;IACxB,MAAM,UAAU,GAAG,IAAI,GAAG,EAA8C,CAAC;IAEzE,IAAI,KAAK,GAAa,EAAE,CAAC;IACzB,KAAK,MAAM,OAAO,IAAI,aAAa,EAAE,CAAC;QACpC,MAAM,OAAO,GAAG,WAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;QAChE,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IACD,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAE5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAE9C,mCAAmC;YACnC,MAAM,eAAe,GAAG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;YACzD,KAAK,MAAM,KAAK,IAAI,eAAe,EAAE,CAAC;gBACpC,MAAM,KAAK,GAAG,SAAS,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClC,MAAM,QAAQ,GAAG,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;gBAClE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;oBACnC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC5B,CAAC;gBACD,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACjB,UAAU,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YAClC,CAAC;YAED,wCAAwC;YACxC,MAAM,gBAAgB,GAAG,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;YAChE,KAAK,MAAM,KAAK,IAAI,gBAAgB,EAAE,CAAC;gBACrC,MAAM,KAAK,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;gBACtC,MAAM,QAAQ,GAAG,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;gBAClE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;oBACnC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC5B,CAAC;gBACD,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACjB,UAAU,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;QAAC,MAAM,CAAC;YACP,OAAO;QACT,CAAC;IACH,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,SAAS,0BAA0B;IACjC,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,MAAM,QAAQ,GAAa,EAAE,CAAC;IAE9B,MAAM,QAAQ,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,EAAE,sBAAsB,CAAC,CAAC;IAEtF,IAAI,KAAK,GAAa,EAAE,CAAC;IACzB,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC/B,MAAM,OAAO,GAAG,WAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;QAChE,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IACD,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAE5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAC9C,MAAM,SAAS,GACb,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC;gBAC/B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC;gBAC9B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC;gBACnC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAC;gBACjC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;YAEnC,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;oBACzC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACnB,CAAC;qBAAM,IAAI,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACvE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACtB,CAAC;YACH,CAAC;QACH,CAAC;QAAC,MAAM,CAAC;YACP,OAAO;QACT,CAAC;IACH,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC7B,CAAC;AAED,SAAS,GAAG;IACV,OAAO,CAAC,GAAG,CAAC,GAAG,qBAAK,CAAC,MAAM,wCAAwC,CAAC,CAAC;IAErE,MAAM,MAAM,GAAG,eAAe,EAAE,CAAC;IACjC,MAAM,UAAU,GAAG,iBAAiB,EAAE,CAAC;IACvC,MAAM,YAAY,GAAG,0BAA0B,EAAE,CAAC;IAElD,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,gBAAgB;IAChB,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACtB,SAAS,GAAG,IAAI,CAAC;QACjB,OAAO,CAAC,GAAG,CAAC,GAAG,qBAAK,CAAC,KAAK,UAAU,MAAM,CAAC,MAAM,yBAAyB,CAAC,CAAC;QAE5E,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACb,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;gBAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YAC3C,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5B,OAAO,GAAG,CAAC;QACb,CAAC,EACD,EAA6B,CAC9B,CAAC;QAEF,KAAK,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/D,OAAO,CAAC,GAAG,CAAC,GAAG,qBAAK,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC,CAAC;YACvC,KAAK,MAAM,KAAK,IAAI,UAAU,EAAE,CAAC;gBAC/B,OAAO,CAAC,GAAG,CAAC,WAAW,KAAK,CAAC,IAAI,MAAM,KAAK,CAAC,YAAY,MAAM,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC;gBACjF,OAAO,CAAC,GAAG,CAAC,MAAM,qBAAK,CAAC,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;YACtD,CAAC;YACD,OAAO,CAAC,GAAG,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAED,uCAAuC;IACvC,IAAI,YAAY,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACrC,OAAO,CAAC,GAAG,CAAC,GAAG,qBAAK,CAAC,OAAO,0DAA0D,CAAC,CAAC;QACxF,KAAK,MAAM,IAAI,IAAI,YAAY,CAAC,QAAQ,EAAE,CAAC;YACzC,OAAO,CAAC,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;QAC9B,CAAC;QACD,OAAO,CAAC,GAAG,EAAE,CAAC;IAChB,CAAC;IAED,4BAA4B;IAC5B,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,CAAC;SAC3C,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;SAC5D,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAE3C,KAAK,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;QACtD,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QACnF,MAAM,aAAa,GAAG,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC1D,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAExC,IAAI,IAAI,GAAW,qBAAK,CAAC,OAAO,CAAC;QACjC,IAAI,aAAa,IAAI,WAAW;YAAE,IAAI,GAAG,qBAAK,CAAC,KAAK,CAAC;aAChD,IAAI,CAAC,OAAO;YAAE,IAAI,GAAG,qBAAK,CAAC,OAAO,CAAC;QAExC,OAAO,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,KAAK,CAAC,MAAM,QAAQ,CAAC,CAAC;IACtF,CAAC;IACD,OAAO,CAAC,GAAG,EAAE,CAAC;IAEd,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,CAAC,GAAG,CAAC,GAAG,qBAAK,CAAC,OAAO,oCAAoC,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CAAC,GAAG,CAAC,8DAA8D,CAAC,CAAC;IAC5E,OAAO,CAAC,GAAG,CAAC,4EAA4E,CAAC,CAAC;IAC1F,OAAO,CAAC,GAAG,CAAC,4DAA4D,CAAC,CAAC;IAC1E,OAAO,CAAC,GAAG,CACT,wFAAwF,CACzF,CAAC;IAEF,IAAI,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAClC,OAAO,CAAC,GAAG,CAAC,GAAG,qBAAK,CAAC,OAAO,IAAI,YAAY,CAAC,KAAK,CAAC,MAAM,iCAAiC,CAAC,CAAC;IAC9F,CAAC;IAED,OAAO;QACL,OAAO,EAAE,CAAC,SAAS,IAAI,CAAC,QAAQ;QAChC,MAAM;QACN,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE;YACL,YAAY,EAAE,UAAU,CAAC,IAAI;YAC7B,YAAY,EAAE,YAAY,CAAC,KAAK,CAAC,MAAM;YACvC,qBAAqB,EAAE,YAAY,CAAC,QAAQ,CAAC,MAAM;YACnD,eAAe,EAAE,MAAM,CAAC,MAAM;SAC/B;KACF,CAAC;AACJ,CAAC;AAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;IAC5B,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC;IACrB,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACvC,CAAC"}

package/dist/checks/ui/js-responsive-visibility.d.ts

@@ -0,0 +1,31 @@
+#!/usr/bin/env tsx
+/**
+ * JavaScript Responsive Visibility Anti-Pattern Preflight
+ *
+ * Detects components using JavaScript state (useState + matchMedia) for
+ * responsive visibility instead of CSS classes (hidden/block, lg:hidden, etc.)
+ *
+ * WHY THIS MATTERS:
+ * - JS-based visibility causes hydration mismatches (SSR returns null, client shows content)
+ * - Creates flash of missing content on initial load
+ * - CSS-based visibility is instant and works without JavaScript
+ *
+ * BAD PATTERN:
+ *   const [isLargeScreen, setIsLargeScreen] = useState(false);
+ *   useEffect(() => { matchMedia("(min-width: 1024px)")... }, []);
+ *   if (!isLargeScreen) return null;
+ *
+ * GOOD PATTERN:
+ *   <div className="hidden lg:block">...</div>
+ *
+ * Usage:
+ *   pnpm preflight:js-responsive-visibility
+ *   pnpm preflight:js-responsive-visibility --verbose
+ */
+export declare const id = "ui/js-responsive-visibility";
+export declare const name = "Js Responsive Visibility";
+export declare const category = "ui";
+export declare const blocking = false;
+export declare const description = "JavaScript Responsive Visibility Anti-Pattern Preflight";
+export declare const tags: string[];
+//# sourceMappingURL=js-responsive-visibility.d.ts.map

package/dist/checks/ui/js-responsive-visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"js-responsive-visibility.d.ts","sourceRoot":"","sources":["../../../src/checks/ui/js-responsive-visibility.ts"],"names":[],"mappings":";AACA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAYH,eAAO,MAAM,EAAE,gCAAgC,CAAC;AAChD,eAAO,MAAM,IAAI,6BAA6B,CAAC;AAC/C,eAAO,MAAM,QAAQ,OAAO,CAAC;AAC7B,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAC9B,eAAO,MAAM,WAAW,4DAA4D,CAAC;AACrF,eAAO,MAAM,IAAI,UAAS,CAAC"}

package/dist/checks/ui/js-responsive-visibility.js

@@ -0,0 +1,213 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * JavaScript Responsive Visibility Anti-Pattern Preflight
+ *
+ * Detects components using JavaScript state (useState + matchMedia) for
+ * responsive visibility instead of CSS classes (hidden/block, lg:hidden, etc.)
+ *
+ * WHY THIS MATTERS:
+ * - JS-based visibility causes hydration mismatches (SSR returns null, client shows content)
+ * - Creates flash of missing content on initial load
+ * - CSS-based visibility is instant and works without JavaScript
+ *
+ * BAD PATTERN:
+ *   const [isLargeScreen, setIsLargeScreen] = useState(false);
+ *   useEffect(() => { matchMedia("(min-width: 1024px)")... }, []);
+ *   if (!isLargeScreen) return null;
+ *
+ * GOOD PATTERN:
+ *   <div className="hidden lg:block">...</div>
+ *
+ * Usage:
+ *   pnpm preflight:js-responsive-visibility
+ *   pnpm preflight:js-responsive-visibility --verbose
+ */
+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/js-responsive-visibility";
+exports.name = "Js Responsive Visibility";
+exports.category = "ui";
+exports.blocking = false;
+exports.description = "JavaScript Responsive Visibility Anti-Pattern Preflight";
+exports.tags = ["ui"];
+const COMPONENT_PATHS = [
+    "components/**/*.tsx",
+    "packages/ui/src/components/**/*.tsx",
+    "app/**/*.tsx",
+];
+const EXCLUDED_PATHS = [...glob_patterns_1.STANDARD_EXCLUDES, ...glob_patterns_1.TEST_FILE_EXCLUDES, ...glob_patterns_1.STORY_FILE_EXCLUDES];
+// Patterns that indicate JS-based responsive visibility
+const ANTI_PATTERNS = {
+    // useState with screen size naming
+    screenSizeState: /useState<boolean>\s*\(\s*false\s*\).*(?:isLarge|isMobile|isDesktop|isTablet|isSmall|isNarrow|isWide)/i,
+    screenSizeStateAlt: /const\s+\[\s*(?:isLarge|isMobile|isDesktop|isTablet|isSmall|isNarrow|isWide)\w*\s*,/i,
+    // matchMedia with min-width/max-width for visibility
+    matchMediaVisibility: /matchMedia\s*\(\s*["'`]\s*\(\s*(?:min|max)-width/,
+    // Early return based on screen size state
+    earlyReturnScreenSize: /if\s*\(\s*!?\s*(?:isLarge|isMobile|isDesktop|isTablet|isSmall|isNarrow|isWide)\w*\s*\)\s*(?:return\s+null|return\s*;)/i,
+};
+async function checkJsResponsiveVisibility() {
+    const verbose = process.argv.includes("--verbose");
+    console.log("\n📱 JavaScript Responsive Visibility Anti-Pattern Check\n");
+    console.log("Detects JS state-based visibility that should use CSS classes instead.\n");
+    let files = [];
+    for (const pattern of COMPONENT_PATHS) {
+        const matches = await (0, glob_1.glob)(pattern, { ignore: EXCLUDED_PATHS });
+        files = [...files, ...matches];
+    }
+    files = [...new Set(files)];
+    if (files.length === 0) {
+        console.log(`${console_chars_1.emoji.warning}  No component files found to check.\n`);
+        return;
+    }
+    const issues = [];
+    for (const file of files) {
+        const content = fs.readFileSync(file, "utf8");
+        const lines = content.split("\n");
+        // Track patterns found in this file
+        let hasScreenSizeState = false;
+        let hasMatchMedia = false;
+        let hasEarlyReturn = false;
+        let screenSizeStateLine = -1;
+        let matchMediaLine = -1;
+        let earlyReturnLine = -1;
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const lineNum = i + 1;
+            // Skip comments
+            const trimmed = line.trim();
+            if (trimmed.startsWith("//") || trimmed.startsWith("/*") || trimmed.startsWith("*"))
+                continue;
+            // Check for preflight-ignore
+            const prevLine = i > 0 ? lines[i - 1] : "";
+            if (line.includes("preflight-ignore") || prevLine.includes("preflight-ignore"))
+                continue;
+            // Check for screen size state patterns
+            if (ANTI_PATTERNS.screenSizeState.test(line) || ANTI_PATTERNS.screenSizeStateAlt.test(line)) {
+                hasScreenSizeState = true;
+                screenSizeStateLine = lineNum;
+            }
+            // Check for matchMedia usage
+            if (ANTI_PATTERNS.matchMediaVisibility.test(line)) {
+                hasMatchMedia = true;
+                matchMediaLine = lineNum;
+            }
+            // Check for early return based on screen size
+            if (ANTI_PATTERNS.earlyReturnScreenSize.test(line)) {
+                hasEarlyReturn = true;
+                earlyReturnLine = lineNum;
+            }
+        }
+        // Flag the anti-pattern: screen size state + matchMedia + early return
+        if (hasScreenSizeState && hasMatchMedia && hasEarlyReturn) {
+            issues.push({
+                file,
+                line: earlyReturnLine,
+                type: "error",
+                message: "JavaScript-based responsive visibility detected - use CSS classes instead",
+                context: `State at line ${screenSizeStateLine}, matchMedia at line ${matchMediaLine}, return null at line ${earlyReturnLine}`,
+                fix: 'Replace with CSS: className="hidden lg:block" or "block lg:hidden"',
+            });
+        }
+        else if (hasScreenSizeState && hasEarlyReturn) {
+            // Partial pattern - still problematic
+            issues.push({
+                file,
+                line: earlyReturnLine,
+                type: "warning",
+                message: "Possible JS-based responsive visibility - consider using CSS classes",
+                context: `State at line ${screenSizeStateLine}, conditional return at line ${earlyReturnLine}`,
+                fix: 'Consider: className="hidden lg:block" instead of useState + return null',
+            });
+        }
+    }
+    // Report
+    console.log((0, console_chars_1.createDivider)(60, "light"));
+    console.log(`\nChecked ${files.length} component file(s)\n`);
+    if (issues.length === 0) {
+        console.log(`${console_chars_1.emoji.success} No JavaScript responsive visibility anti-patterns found!\n`);
+        return;
+    }
+    const errors = issues.filter((i) => i.type === "error");
+    const warnings = issues.filter((i) => i.type === "warning");
+    if (errors.length > 0) {
+        console.log(`\n${console_chars_1.emoji.error} ERRORS (${errors.length}):\n`);
+        errors.forEach((e) => {
+            console.log(`  ${e.file}:${e.line}`);
+            console.log(`    ${e.message}`);
+            if (verbose) {
+                console.log(`    Context: ${e.context}`);
+            }
+            if (e.fix) {
+                console.log(`    Fix: ${e.fix}`);
+            }
+            console.log("");
+        });
+    }
+    if (warnings.length > 0) {
+        console.log(`\n${console_chars_1.emoji.warning}  WARNINGS (${warnings.length}):\n`);
+        warnings.forEach((w) => {
+            console.log(`  ${w.file}:${w.line}`);
+            console.log(`    ${w.message}`);
+            if (verbose && w.fix) {
+                console.log(`    Fix: ${w.fix}`);
+            }
+            console.log("");
+        });
+    }
+    console.log((0, console_chars_1.createDivider)(60, "light"));
+    console.log(`\n📊 Summary:`);
+    console.log(`  Errors: ${errors.length}`);
+    console.log(`  Warnings: ${warnings.length}`);
+    if (errors.length > 0) {
+        console.log(`\n${console_chars_1.emoji.error} JS responsive visibility check FAILED\n`);
+        process.exit(1);
+    }
+    else {
+        console.log(`\n${console_chars_1.emoji.success} JS responsive visibility check passed (warnings only)\n`);
+    }
+}
+checkJsResponsiveVisibility().catch((err) => {
+    console.error("Error:", err);
+    process.exit(1);
+});
+//# sourceMappingURL=js-responsive-visibility.js.map

package/dist/checks/ui/js-responsive-visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"js-responsive-visibility.js","sourceRoot":"","sources":["../../../src/checks/ui/js-responsive-visibility.ts"],"names":[],"mappings":"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"}

package/dist/checks/ui/label-description-spacing.d.ts

@@ -0,0 +1,30 @@
+#!/usr/bin/env tsx
+/**
+ * Label-Description Spacing Preflight
+ *
+ * Detects negative margins that pull form inputs/labels too close to description text.
+ * This catches the common issue where -mt-* classes cause labels to butt up against
+ * preceding description text in FormSection or similar components.
+ *
+ * PATTERNS DETECTED:
+ * - Negative margin-top (-mt-*) on elements following description text
+ * - Content boxes inside FormSection with -mt-* classes
+ * - Any element with -mt-* that follows Typography/description text
+ *
+ * VALID PATTERNS:
+ * - Positive margins (mt-1, mt-2, etc.)
+ * - No margin (relies on parent spacing)
+ * - Negative margins with preflight-ignore comment
+ *
+ * Usage:
+ *   pnpm preflight:label-description-spacing
+ *   pnpm preflight:label-description-spacing --verbose
+ *   pnpm preflight:label-description-spacing --warn
+ */
+export declare const id = "ui/label-description-spacing";
+export declare const name = "Label Description Spacing";
+export declare const category = "ui";
+export declare const blocking = false;
+export declare const description = "Label-Description Spacing Preflight";
+export declare const tags: string[];
+//# sourceMappingURL=label-description-spacing.d.ts.map

package/dist/checks/ui/label-description-spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-description-spacing.d.ts","sourceRoot":"","sources":["../../../src/checks/ui/label-description-spacing.ts"],"names":[],"mappings":";AACA;;;;;;;;;;;;;;;;;;;;;GAqBG;AASH,eAAO,MAAM,EAAE,iCAAiC,CAAC;AACjD,eAAO,MAAM,IAAI,8BAA8B,CAAC;AAChD,eAAO,MAAM,QAAQ,OAAO,CAAC;AAC7B,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAC9B,eAAO,MAAM,WAAW,wCAAwC,CAAC;AACjE,eAAO,MAAM,IAAI,UAAS,CAAC"}