@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-micro-interactions.js

@@ -0,0 +1,825 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * UI Micro-Interactions Preflight (NON-BLOCKING)
+ *
+ * Google/Meta/X-level micro-interaction consistency.
+ * Validates subtle animations and interactive feedback polish.
+ *
+ * Checks:
+ * 1. Hover micro-animations - Subtle hover effects on interactive elements
+ * 2. Button press feedback - Tactile scale/shadow on button press
+ * 3. Input focus animations - Smooth focus transitions
+ * 4. Card hover lift - Elevation changes on card hover
+ * 5. Icon state animations - Icon transitions (loading spinners, check animations)
+ * 6. List item animations - Stagger/fade in for list entries
+ * 7. Tab switch transitions - Smooth tab indicator movement
+ * 8. Tooltip animations - Fade/scale for tooltips
+ *
+ * Usage:
+ *   pnpm preflight:ui-micro-interactions              # All checks
+ *   pnpm preflight:ui-micro-interactions hover        # Hover animations only
+ *   pnpm preflight:ui-micro-interactions button       # Button feedback only
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIMicroInteractionsModule = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const console_chars_1 = require("../../utils/console-chars");
+const file_cache_1 = require("../../shared/file-cache");
+const glob_patterns_1 = require("../../shared/glob-patterns");
+const universal_progress_reporter_1 = require("../system/universal-progress-reporter");
+const concurrency_config_1 = require("../../shared/concurrency-config");
+const EXCLUDED = [...glob_patterns_1.STANDARD_EXCLUDES, "**/*.test.tsx", "**/*.spec.tsx", "**/*.stories.tsx"];
+// Get concurrency from shared config (respects PREFLIGHT_CONCURRENCY env var)
+const concurrencyConfig = (0, concurrency_config_1.getConcurrencyConfig)();
+class UIMicroInteractionsModule {
+    verbose;
+    parallel = false;
+    constructor(options = {}) {
+        this.verbose = options.verbose || false;
+        this.parallel = options.parallel || concurrencyConfig.parallel;
+    }
+    async getTsxFiles() {
+        return file_cache_1.fileCache.getAppAndComponentsTSX();
+    }
+    async getCssFiles() {
+        return file_cache_1.fileCache.getCSSFiles();
+    }
+    /**
+     * 1. Hover Micro-animations
+     * Check for subtle hover effects on interactive elements
+     */
+    async checkHoverMicroAnimations() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const hoverTransitionPatterns = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for hover states with transitions
+                if (/hover:/.test(line)) {
+                    const hasTransition = /transition|duration-/.test(line);
+                    const contextBlock = lines.slice(Math.max(0, i - 2), Math.min(i + 3, lines.length)).join("\n");
+                    const hasTransitionNearby = /transition|duration-/.test(contextBlock);
+                    if (!hasTransition && !hasTransitionNearby) {
+                        // Check if it's a meaningful hover change
+                        const hasColorChange = /hover:(?:bg-|text-|border-)/.test(line);
+                        const hasScaleChange = /hover:scale/.test(line);
+                        const hasShadowChange = /hover:shadow/.test(line);
+                        if (hasColorChange || hasScaleChange || hasShadowChange) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "hover-no-transition",
+                                severity: "info",
+                                message: "Hover effect without smooth transition",
+                                suggestion: "Add transition-all duration-200 for polished hover animations",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                    // Track transition durations
+                    const durationMatch = line.match(/duration-(\d+)/);
+                    if (durationMatch) {
+                        const duration = durationMatch[1];
+                        hoverTransitionPatterns.set(duration, (hoverTransitionPatterns.get(duration) || 0) + 1);
+                    }
+                }
+                // Check for micro-animation patterns
+                if (/hover:translate|hover:rotate|hover:-translate/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 3, lines.length)).join("\n");
+                    const hasEasing = /ease-|cubic-bezier/.test(contextBlock);
+                    if (!hasEasing) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "transform-no-easing",
+                            severity: "info",
+                            message: "Transform animation without explicit easing",
+                            suggestion: "Add ease-out or ease-in-out for more natural motion",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        // Report inconsistent durations
+        if (hoverTransitionPatterns.size > 3) {
+            const sorted = [...hoverTransitionPatterns.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "hover-duration-inconsistency",
+                severity: "info",
+                message: `${hoverTransitionPatterns.size} different hover transition durations`,
+                suggestion: `Standardize on 2-3 durations. Usage: ${sorted.map(([d, c]) => `${d}ms(${c})`).join(", ")}`,
+            });
+        }
+        return {
+            name: "Hover Micro-animations",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 2. Button Press Feedback
+     * Check for tactile feedback on button press
+     */
+    async checkButtonPressFeedback() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const pressPatterns = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for button components
+                if (/<(?:Button|IconButton|button)\b/.test(line) && /className=/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    const hasActiveScale = /active:scale/.test(contextBlock);
+                    const hasActiveShadow = /active:shadow/.test(contextBlock);
+                    const hasActiveOpacity = /active:opacity/.test(contextBlock);
+                    const hasActiveBg = /active:bg-/.test(contextBlock);
+                    const hasPressFeedback = hasActiveScale || hasActiveShadow || hasActiveOpacity || hasActiveBg;
+                    // Track what patterns are used
+                    if (hasActiveScale)
+                        pressPatterns.set("scale", (pressPatterns.get("scale") || 0) + 1);
+                    if (hasActiveShadow)
+                        pressPatterns.set("shadow", (pressPatterns.get("shadow") || 0) + 1);
+                    if (hasActiveOpacity)
+                        pressPatterns.set("opacity", (pressPatterns.get("opacity") || 0) + 1);
+                    if (hasActiveBg)
+                        pressPatterns.set("bg", (pressPatterns.get("bg") || 0) + 1);
+                    // Skip built-in components that likely have their own feedback
+                    const isCustomButton = !/variant=|size=|color=/.test(contextBlock);
+                    if (!hasPressFeedback && isCustomButton) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "button-no-press-feedback",
+                            severity: "info",
+                            message: "Button without active/pressed state feedback",
+                            suggestion: "Add active:scale-[0.98] or active:shadow-inner for tactile feedback",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for custom clickable elements
+                if (/<div[^>]*onClick|role=["']button/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    const hasPressFeedback = /active:/.test(contextBlock);
+                    if (!hasPressFeedback) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "clickable-no-press-feedback",
+                            severity: "info",
+                            message: "Custom clickable element without press feedback",
+                            suggestion: "Add active:scale-95 or active:bg-* for interaction feedback",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        // Report press feedback pattern usage
+        if (pressPatterns.size > 0) {
+            const sorted = [...pressPatterns.entries()].sort((a, b) => b[1] - a[1]);
+            if (sorted.length > 2 && sorted[0][1] < sorted.slice(1).reduce((a, b) => a + b[1], 0)) {
+                issues.push({
+                    file: "codebase-wide",
+                    line: 0,
+                    type: "mixed-press-feedback",
+                    severity: "info",
+                    message: `Multiple button press feedback patterns in use`,
+                    suggestion: `Standardize on primary pattern. Usage: ${sorted.map(([p, c]) => `${p}(${c})`).join(", ")}`,
+                });
+            }
+        }
+        return {
+            name: "Button Press Feedback",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 3. Input Focus Animations
+     * Check for smooth focus transitions on form inputs
+     */
+    async checkInputFocusAnimations() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for input elements with focus styles
+                if (/<(?:input|Input|TextField|textarea|Textarea|Select)\b/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    const hasFocusStyle = /focus:|focus-within:|focus-visible:/.test(contextBlock);
+                    const hasTransition = /transition/.test(contextBlock);
+                    if (hasFocusStyle && !hasTransition) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "input-focus-no-transition",
+                            severity: "info",
+                            message: "Input focus style without transition",
+                            suggestion: "Add transition-all for smooth focus ring/border animation",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check for border color focus animation
+                    const hasBorderFocus = /focus:border|focus-visible:border|focus:ring/.test(contextBlock);
+                    const hasScaleFocus = /focus:scale/.test(contextBlock);
+                    if (hasBorderFocus && !hasScaleFocus) {
+                        // Check for label float animation (MUI-style)
+                        const hasFloatLabel = /float|label.*transform|label.*scale|peer-focus/i.test(content.substring(Math.max(0, content.indexOf(line) - 200), content.indexOf(line) + 200));
+                        // This is optional polish, just track
+                    }
+                }
+                // Check for floating label patterns
+                if (/peer-focus|label.*peer|float.*label/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    const hasTransform = /transform|translate|scale/.test(contextBlock);
+                    const hasTransition = /transition/.test(contextBlock);
+                    if (hasTransform && !hasTransition) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "float-label-no-transition",
+                            severity: "info",
+                            message: "Floating label without smooth transition",
+                            suggestion: "Add transition-all duration-200 for smooth label animation",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Input Focus Animations",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 4. Card Hover Lift
+     * Check for elevation changes on card hover
+     */
+    async checkCardHoverLift() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const cardHoverPatterns = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for Card components
+                if (/<Card\b|card.*className/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    const isClickable = /onClick|href|to=|Link/.test(contextBlock);
+                    if (isClickable) {
+                        const hasHoverLift = /hover:shadow|hover:-translate-y|hover:scale/.test(contextBlock);
+                        const hasTransition = /transition/.test(contextBlock);
+                        // Track hover patterns
+                        if (/hover:shadow/.test(contextBlock)) {
+                            cardHoverPatterns.set("shadow", (cardHoverPatterns.get("shadow") || 0) + 1);
+                        }
+                        if (/hover:-translate-y/.test(contextBlock)) {
+                            cardHoverPatterns.set("translate", (cardHoverPatterns.get("translate") || 0) + 1);
+                        }
+                        if (/hover:scale/.test(contextBlock)) {
+                            cardHoverPatterns.set("scale", (cardHoverPatterns.get("scale") || 0) + 1);
+                        }
+                        if (!hasHoverLift) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "clickable-card-no-lift",
+                                severity: "info",
+                                message: "Clickable card without hover lift effect",
+                                suggestion: "Add hover:shadow-lg hover:-translate-y-1 for lift feedback",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                        if (hasHoverLift && !hasTransition) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "card-lift-no-transition",
+                                severity: "info",
+                                message: "Card hover lift without smooth transition",
+                                suggestion: "Add transition-all duration-200 ease-out",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for shadow hover patterns
+                if (/hover:shadow-/.test(line)) {
+                    const shadowMatch = line.match(/hover:shadow-(\w+)/);
+                    if (shadowMatch) {
+                        const level = shadowMatch[1];
+                        // Check for extreme shadow jumps
+                        if (/shadow(?:-sm)?/.test(line) && /hover:shadow-2xl/.test(line)) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "shadow-jump-too-large",
+                                severity: "info",
+                                message: "Shadow jump from sm to 2xl may be too dramatic",
+                                suggestion: "Use progressive shadow: shadow -> shadow-md -> shadow-lg",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        // Report mixed card hover patterns
+        if (cardHoverPatterns.size > 1) {
+            const sorted = [...cardHoverPatterns.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "mixed-card-hover-patterns",
+                severity: "info",
+                message: `Multiple card hover patterns in use`,
+                suggestion: `Consider standardizing. Usage: ${sorted.map(([p, c]) => `${p}(${c})`).join(", ")}`,
+            });
+        }
+        return {
+            name: "Card Hover Lift",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 5. Icon State Animations
+     * Check for icon transitions (spinners, check animations, etc.)
+     */
+    async checkIconStateAnimations() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for conditional icon rendering
+                if (/\{.*\?.*<.*Icon|isLoading.*\?|isSuccess.*\?|isError.*\?/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    const hasAnimation = /animate-|motion\.|Transition|AnimatePresence/.test(contextBlock);
+                    const hasFade = /opacity|fade/.test(contextBlock);
+                    // Check if icons swap without animation
+                    const hasIconSwap = /<\w+Icon.*:.*<\w+Icon|Icon.*\?.*Icon/.test(contextBlock);
+                    if (hasIconSwap && !hasAnimation && !hasFade) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "icon-swap-no-animation",
+                            severity: "info",
+                            message: "Icon state change without transition animation",
+                            suggestion: "Add opacity fade or scale animation for icon transitions",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for loading spinners
+                if (/animate-spin|CircularProgress|Spinner/i.test(line)) {
+                    // These are typically fine, just ensure consistent sizing
+                    const sizeMatch = line.match(/(?:size|w-|h-)(\d+)/);
+                    // Track sizes for consistency check if needed
+                }
+                // Check for checkmark animations (success states)
+                if (/<Check|CheckIcon|CheckCircle/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 5, lines.length)).join("\n");
+                    const hasDrawAnimation = /animate-|stroke-dasharray|pathLength|motion/.test(contextBlock);
+                    // Nice-to-have: animated checkmark draw
+                }
+                // Check for icon rotation on expand/collapse
+                if (/ChevronDown|ChevronRight|ArrowDown|ExpandMore/i.test(line)) {
+                    const contextBlock = lines.slice(Math.max(0, i - 5), Math.min(i + 10, lines.length)).join("\n");
+                    const hasRotation = /rotate|transform.*rotate|data-\[state/.test(contextBlock);
+                    const hasTransition = /transition|duration/.test(contextBlock);
+                    const isExpandable = /expand|collapse|isOpen|isExpanded|accordion/i.test(contextBlock);
+                    if (isExpandable && hasRotation && !hasTransition) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "chevron-rotate-no-transition",
+                            severity: "info",
+                            message: "Chevron rotation without smooth transition",
+                            suggestion: "Add transition-transform duration-200 for smooth rotation",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Icon State Animations",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 6. List Item Animations
+     * Check for stagger/fade animations on list entries
+     */
+    async checkListItemAnimations() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for list mapping patterns
+                if (/\.map\s*\(\s*\(/.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+                    const isList = /list|items|results|data|rows/i.test(line);
+                    const hasStagger = /stagger|delay.*index|style={{.*delay|animate-\[.*ms\]/.test(contextBlock);
+                    const hasMotion = /motion\.|AnimatePresence|Transition/.test(contextBlock);
+                    const hasOpacityIn = /animate-fadeIn|opacity.*0.*1|animate-in/.test(contextBlock);
+                    // Check if it's rendering visual list items
+                    const rendersCards = /<Card|<ListItem|<div.*className/i.test(contextBlock);
+                    if (isList && rendersCards && !hasStagger && !hasMotion && !hasOpacityIn) {
+                        // Only flag if it's a substantial list render
+                        const hasKey = /key=/.test(contextBlock);
+                        if (hasKey) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "list-no-animation",
+                                severity: "info",
+                                message: "List items render without entry animation",
+                                suggestion: "Consider stagger animation or fade-in for polished feel",
+                                snippet: line.trim().substring(0, 60),
+                            });
+                        }
+                    }
+                }
+                // Check for framer-motion stagger patterns
+                if (/variants.*staggerChildren|stagger/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                    const staggerMatch = contextBlock.match(/staggerChildren[:\s]+([0-9.]+)/);
+                    if (staggerMatch) {
+                        const delay = parseFloat(staggerMatch[1]);
+                        if (delay > 0.2) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "stagger-too-slow",
+                                severity: "info",
+                                message: `Stagger delay ${delay}s may feel slow`,
+                                suggestion: "Use 0.05-0.1s for snappy list animations",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        return {
+            name: "List Item Animations",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 7. Tab Switch Transitions
+     * Check for smooth tab indicator movement
+     */
+    async checkTabSwitchTransitions() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for tab components
+                if (/<Tabs|<TabsList|role=["']tablist/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 30, lines.length)).join("\n");
+                    // Check for animated indicator
+                    const hasIndicator = /indicator|underline|TabIndicator/.test(contextBlock);
+                    const hasIndicatorAnimation = /motion|transition.*transform|animate-/.test(contextBlock);
+                    const hasRadixAnimation = /data-\[state=/.test(contextBlock);
+                    if (hasIndicator && !hasIndicatorAnimation && !hasRadixAnimation) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "tab-indicator-no-animation",
+                            severity: "info",
+                            message: "Tab indicator without sliding animation",
+                            suggestion: "Add motion.div with layoutId or CSS transition for indicator",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for tab content transitions
+                if (/<TabsContent|<TabPanel|role=["']tabpanel/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 15, lines.length)).join("\n");
+                    const hasContentAnimation = /AnimatePresence|motion\.|animate-|Transition|fade/.test(contextBlock);
+                    const hasRadixAnimation = /data-\[state=/.test(contextBlock);
+                    if (!hasContentAnimation && !hasRadixAnimation) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "tab-content-no-animation",
+                            severity: "info",
+                            message: "Tab content without entry/exit animation",
+                            suggestion: "Add fade or slide animation for tab content changes",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+                // Check for segmented control patterns
+                if (/segmented|SegmentedControl|ButtonGroup.*toggle/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 20, lines.length)).join("\n");
+                    const hasBackgroundSlide = /motion|layoutId|transition.*left|transition.*transform/.test(contextBlock);
+                    if (!hasBackgroundSlide) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "segmented-no-slide",
+                            severity: "info",
+                            message: "Segmented control without sliding background",
+                            suggestion: "Add motion.div with layoutId for sliding selection indicator",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        return {
+            name: "Tab Switch Transitions",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * 8. Tooltip Animations
+     * Check for smooth tooltip fade/scale
+     */
+    async checkTooltipAnimations() {
+        const startTime = Date.now();
+        const issues = [];
+        const files = await this.getTsxFiles();
+        const tooltipAnimations = new Map();
+        for (const file of files) {
+            const content = fs.readFileSync(file, "utf8");
+            const lines = content.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                // Check for Tooltip components
+                if (/<Tooltip|<TooltipContent|data-tooltip/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 15, lines.length)).join("\n");
+                    const hasFade = /fade|opacity|animate-in|animate-fade/.test(contextBlock);
+                    const hasScale = /scale|zoom/.test(contextBlock);
+                    const hasSlide = /slide|translate/.test(contextBlock);
+                    const hasRadixAnimation = /data-\[state=|data-\[side=/.test(contextBlock);
+                    // Track animation patterns
+                    if (hasFade)
+                        tooltipAnimations.set("fade", (tooltipAnimations.get("fade") || 0) + 1);
+                    if (hasScale)
+                        tooltipAnimations.set("scale", (tooltipAnimations.get("scale") || 0) + 1);
+                    if (hasSlide)
+                        tooltipAnimations.set("slide", (tooltipAnimations.get("slide") || 0) + 1);
+                    // Built-in Radix tooltips have good animations
+                    if (!hasRadixAnimation && !hasFade && !hasScale && !hasSlide) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "tooltip-no-animation",
+                            severity: "info",
+                            message: "Tooltip without entry/exit animation",
+                            suggestion: "Add fade-in scale-95 animation for polished tooltips",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                    // Check tooltip delay
+                    const delayMatch = contextBlock.match(/delay[=:]\s*\{?\s*(\d+)/);
+                    if (delayMatch) {
+                        const delay = parseInt(delayMatch[1]);
+                        if (delay > 700) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "tooltip-delay-too-long",
+                                severity: "info",
+                                message: `Tooltip delay ${delay}ms may feel unresponsive`,
+                                suggestion: "Use 300-500ms delay for responsive tooltips",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                        if (delay < 100) {
+                            issues.push({
+                                file,
+                                line: i + 1,
+                                type: "tooltip-delay-too-short",
+                                severity: "info",
+                                message: `Tooltip delay ${delay}ms may be too eager`,
+                                suggestion: "Use 200-400ms delay to avoid accidental triggers",
+                                snippet: line.trim().substring(0, 80),
+                            });
+                        }
+                    }
+                }
+                // Check for popover animations (similar pattern)
+                if (/<Popover|<PopoverContent/i.test(line)) {
+                    const contextBlock = lines.slice(i, Math.min(i + 15, lines.length)).join("\n");
+                    const hasAnimation = /animate-|motion|fade|scale|Transition/.test(contextBlock);
+                    const hasRadixAnimation = /data-\[state=/.test(contextBlock);
+                    if (!hasAnimation && !hasRadixAnimation) {
+                        issues.push({
+                            file,
+                            line: i + 1,
+                            type: "popover-no-animation",
+                            severity: "info",
+                            message: "Popover without entry animation",
+                            suggestion: "Add fade-in and slight scale animation for popovers",
+                            snippet: line.trim().substring(0, 80),
+                        });
+                    }
+                }
+            }
+        }
+        // Report mixed animation patterns
+        if (tooltipAnimations.size > 1) {
+            const sorted = [...tooltipAnimations.entries()].sort((a, b) => b[1] - a[1]);
+            issues.push({
+                file: "codebase-wide",
+                line: 0,
+                type: "mixed-tooltip-animations",
+                severity: "info",
+                message: `Multiple tooltip animation patterns`,
+                suggestion: `Consider standardizing. Usage: ${sorted.map(([p, c]) => `${p}(${c})`).join(", ")}`,
+            });
+        }
+        return {
+            name: "Tooltip Animations",
+            passed: true,
+            blocking: false,
+            issues,
+            duration: Date.now() - startTime,
+        };
+    }
+    /**
+     * Run all checks
+     */
+    async runAll(filter) {
+        const startTime = Date.now();
+        const checks = [];
+        const checkMap = {
+            hover: () => this.checkHoverMicroAnimations(),
+            button: () => this.checkButtonPressFeedback(),
+            input: () => this.checkInputFocusAnimations(),
+            card: () => this.checkCardHoverLift(),
+            icon: () => this.checkIconStateAnimations(),
+            list: () => this.checkListItemAnimations(),
+            tab: () => this.checkTabSwitchTransitions(),
+            tooltip: () => this.checkTooltipAnimations(),
+        };
+        if (filter && checkMap[filter]) {
+            checks.push(await checkMap[filter]());
+        }
+        else {
+            for (const check of Object.values(checkMap)) {
+                checks.push(await check());
+            }
+        }
+        const errors = checks.reduce((sum, c) => sum + c.issues.filter((i) => i.severity === "error").length, 0);
+        const warnings = checks.reduce((sum, c) => sum + c.issues.filter((i) => i.severity === "warning").length, 0);
+        return {
+            module: "UI Micro-Interactions",
+            passed: errors === 0,
+            totalDuration: Date.now() - startTime,
+            checks,
+            summary: {
+                total: checks.length,
+                passed: checks.filter((c) => c.passed).length,
+                failed: checks.filter((c) => !c.passed).length,
+                errors,
+                warnings,
+            },
+        };
+    }
+}
+exports.UIMicroInteractionsModule = UIMicroInteractionsModule;
+// CLI ENTRY POINT
+async function main() {
+    const args = process.argv.slice(2);
+    const filter = args.find((a) => !a.startsWith("-"));
+    const verbose = args.includes("--verbose") || args.includes("-v");
+    const parallel = args.includes("--parallel") || args.includes("-p");
+    const reporter = (0, universal_progress_reporter_1.createUniversalProgressReporter)(path.basename(__filename, ".ts"));
+    const module = new UIMicroInteractionsModule({ verbose, parallel });
+    const result = await module.runAll(filter);
+    console.log((0, console_chars_1.createDivider)(80, "heavy"));
+    console.log(`${console_chars_1.emoji.lightning} UI MICRO-INTERACTIONS CHECK`);
+    console.log((0, console_chars_1.createDivider)(80, "heavy"));
+    console.log();
+    for (const check of result.checks) {
+        const icon = check.passed
+            ? console_chars_1.emoji.success
+            : check.issues.some((i) => i.severity === "error")
+                ? console_chars_1.emoji.error
+                : console_chars_1.emoji.warning;
+        console.log(`${icon} ${check.name} (${check.duration}ms)`);
+        if (check.issues.length > 0 && (verbose || check.issues.some((i) => i.severity !== "info"))) {
+            for (const issue of check.issues.slice(0, verbose ? 100 : 5)) {
+                const sevIcon = issue.severity === "error"
+                    ? console_chars_1.emoji.error
+                    : issue.severity === "warning"
+                        ? console_chars_1.emoji.warning
+                        : console_chars_1.emoji.info;
+                const relPath = path.relative(process.cwd(), issue.file).replace(/\\/g, "/");
+                console.log(`  ${sevIcon} ${relPath}:${issue.line}`);
+                console.log(`     ${issue.message}`);
+                console.log(`     ${console_chars_1.emoji.hint} ${issue.suggestion}`);
+            }
+            if (!verbose && check.issues.length > 5) {
+                console.log(`  ... and ${check.issues.length - 5} more issues`);
+            }
+        }
+        console.log();
+    }
+    console.log((0, console_chars_1.createDivider)(80, "light"));
+    console.log(`Total: ${result.summary.total} checks | ${console_chars_1.emoji.error} ${result.summary.errors} errors | ${console_chars_1.emoji.warning} ${result.summary.warnings} warnings`);
+    console.log(`Duration: ${(result.totalDuration / 1000).toFixed(2)}s`);
+    console.log((0, console_chars_1.createDivider)(80, "heavy"));
+    if (result.summary.errors > 0) {
+        console.log(`\n${console_chars_1.emoji.error} MICRO-INTERACTIONS CHECK FAILED\n`);
+        process.exit(1);
+    }
+    else {
+        console.log(`\n${console_chars_1.emoji.success} MICRO-INTERACTIONS CHECK PASSED\n`);
+        process.exit(0);
+    }
+}
+if (require.main === module)
+    main();
+//# sourceMappingURL=ui-micro-interactions.js.map