Reacticx MCP

export interface ComponentInfo {
  name: string;
  slug: string;
  category: string;
  description: string;
  dependencies: string[];
}

export const CATEGORIES = [
  "shaders",
  "texts",
  "micro-interactions",
  "components",
  "templates",
] as const;

export type Category = (typeof CATEGORIES)[number];

export const COMPONENT_REGISTRY: ComponentInfo[] = [
  // === SHADERS ===
  {
    name: "Aurora",
    slug: "aurora",
    category: "shaders",
    description:
      "Skia-based animated aurora effect with flowing light waves over a soft sky gradient",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Chroma Ring",
    slug: "chroma-ring",
    category: "shaders",
    description: "Animated chromatic ring shader effect",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Energy Orb",
    slug: "energy-orb",
    category: "shaders",
    description: "Animated energy orb with glowing particle effects",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Siri Orb",
    slug: "siri-orb",
    category: "shaders",
    description: "Apple Siri-inspired animated orb shader",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Mesh Gradient",
    slug: "mesh-gradient",
    category: "shaders",
    description: "Animated mesh gradient background effect",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Grainy Gradient",
    slug: "grainy-gradient",
    category: "shaders",
    description: "Gradient with film grain texture overlay",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Skia Ripple",
    slug: "skia-ripple",
    category: "shaders",
    description: "Skia-based ripple animation effect",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Wave Scrawler",
    slug: "wave-scrawler",
    category: "shaders",
    description: "Animated wave scrawler shader pattern",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },

  // === TEXTS ===
  {
    name: "Animated Text",
    slug: "animated-text",
    category: "texts",
    description: "Text with entrance/exit animations",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Circular Text",
    slug: "circular-text",
    category: "texts",
    description: "Text arranged in a circular path",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Dynamic Text",
    slug: "dynamic-text",
    category: "texts",
    description: "Dynamically animated text with morphing effects",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Fade Text",
    slug: "fade-text",
    category: "texts",
    description: "Text with fade-in/fade-out animations",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Gooey Text",
    slug: "gooey-text",
    category: "texts",
    description: "Text with gooey/liquid morphing animation",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Curved Marquee",
    slug: "curved-marquee",
    category: "texts",
    description: "Scrolling marquee text along a curved path",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Staggered Text",
    slug: "staggered-text",
    category: "texts",
    description: "Text with staggered character-by-character animation",
    dependencies: ["react-native-reanimated"],
  },

  // === MICRO-INTERACTIONS ===
  {
    name: "Animated Scroll Progress",
    slug: "animated-scroll-progress",
    category: "micro-interactions",
    description: "Animated progress bar tied to scroll position",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Animated Theme Toggle",
    slug: "animated-theme-toggle",
    category: "micro-interactions",
    description: "Animated toggle switch for theme switching (dark/light)",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Animated Countdown",
    slug: "countdown",
    category: "micro-interactions",
    description: "Animated countdown timer component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Elastic Slider",
    slug: "elastic-slider",
    category: "micro-interactions",
    description:
      "Slider with elastic drag interactions and smooth spring animations",
    dependencies: [
      "react-native-reanimated",
      "react-native-gesture-handler",
      "react-native-worklets",
    ],
  },
  {
    name: "Flexi Button",
    slug: "flexi-button",
    category: "micro-interactions",
    description: "Flexible animated button with multiple states",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Gooey Switch",
    slug: "gooey-switch",
    category: "micro-interactions",
    description: "Toggle switch with gooey/liquid animation",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Hamburger",
    slug: "hamburger",
    category: "micro-interactions",
    description: "Animated hamburger menu icon with morphing transition",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Spin Button",
    slug: "spin-button",
    category: "micro-interactions",
    description: "Button with spinning animation effect",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Stacked Chips",
    slug: "stacked-chips",
    category: "micro-interactions",
    description: "Animated stacked chip/tag selector",
    dependencies: ["react-native-reanimated"],
  },

  // === COMPONENTS (molecules/organisms/base) ===
  {
    name: "Accordion",
    slug: "accordion",
    category: "components",
    description:
      "Customizable accordion with smooth expand/collapse animations, single or multiple mode",
    dependencies: ["react-native-reanimated", "expo-haptics"],
  },
  {
    name: "Animated Chip",
    slug: "animated-chip",
    category: "components",
    description: "Chip component with animated selection/deselection",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Action Card",
    slug: "action-card",
    category: "components",
    description: "Card component with action button interactions",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Animated Input Bar",
    slug: "animated-input-bar",
    category: "components",
    description: "Text input with animated label and focus effects",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Avatar",
    slug: "avatar",
    category: "components",
    description: "User avatar component with image and fallback support",
    dependencies: [],
  },
  {
    name: "Avatar Group",
    slug: "avatar-group",
    category: "components",
    description: "Stacked group of avatar components with overflow count",
    dependencies: [],
  },
  {
    name: "Badge",
    slug: "badge",
    category: "components",
    description: "Badge/label component for status indicators",
    dependencies: [],
  },
  {
    name: "Button",
    slug: "button",
    category: "components",
    description: "Customizable button with multiple variants and sizes",
    dependencies: [],
  },
  {
    name: "Blur Carousel",
    slug: "blur-carousel",
    category: "components",
    description: "Carousel with blur effect transitions between items",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Card",
    slug: "card",
    category: "components",
    description: "Versatile card container component",
    dependencies: [],
  },
  {
    name: "Check Box",
    slug: "check-box",
    category: "components",
    description: "Animated checkbox component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Cinematic Carousel",
    slug: "cinematic-carousel",
    category: "components",
    description: "Full-screen carousel with cinematic transition effects",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Circle Loader",
    slug: "circle-loader",
    category: "components",
    description: "Circular loading indicator with animation",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Circular Carousel",
    slug: "circular-carousel",
    category: "components",
    description: "Carousel with circular/rotating layout",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Circular List",
    slug: "circular-list",
    category: "components",
    description: "List items arranged in a circular pattern",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Circular Loader",
    slug: "circular-loader",
    category: "components",
    description: "Circular progress/loading indicator",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Circular Progress",
    slug: "circular-progress",
    category: "components",
    description: "Circular progress bar with percentage display",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Curved Bottom Tabs",
    slug: "curved-bottom-tabs",
    category: "components",
    description: "Bottom tab navigation with curved/notched design",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Dialog",
    slug: "dialog",
    category: "components",
    description: "Modal dialog component with animations",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Disclosure Group",
    slug: "disclosure-group",
    category: "components",
    description: "Expandable disclosure/collapsible group component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Dropdown",
    slug: "dropdown",
    category: "components",
    description: "Animated dropdown/select component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Dynamic Island",
    slug: "dynamic-island",
    category: "components",
    description: "iOS Dynamic Island-style notification component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Empty State",
    slug: "empty-state",
    category: "components",
    description: "Placeholder component for empty content states",
    dependencies: [],
  },
  {
    name: "Fade Component",
    slug: "fade-component",
    category: "components",
    description: "Wrapper component with fade-in/out animations",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Flip Card",
    slug: "flip-card",
    category: "components",
    description: "Card that flips between front and back faces",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Glow",
    slug: "glow",
    category: "components",
    description: "Glow effect wrapper component",
    dependencies: ["@shopify/react-native-skia"],
  },
  {
    name: "Infinite Menu",
    slug: "infinite-menu",
    category: "components",
    description: "Infinitely scrollable menu component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Lanyard",
    slug: "lanyard",
    category: "components",
    description: "Lanyard/badge card component with 3D effect",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Liquid Metal",
    slug: "liquid-metal",
    category: "components",
    description: "Liquid metal morphing animation effect",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "List",
    slug: "list",
    category: "components",
    description: "Styled list component with item separators",
    dependencies: [],
  },
  {
    name: "Marquee",
    slug: "marquee",
    category: "components",
    description: "Horizontal scrolling marquee text component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Matched Geometry",
    slug: "matched-geometry",
    category: "components",
    description:
      "Shared element transitions between components (SwiftUI-style)",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Material Carousel",
    slug: "material-carousel",
    category: "components",
    description: "Material Design-style carousel component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Morphing Tabbar",
    slug: "morphing-tabbar",
    category: "components",
    description: "Tab bar with morphing/fluid animation transitions",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Orbiting Dots",
    slug: "orbiting-dots",
    category: "components",
    description: "Animated orbiting dots loader/decoration",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "OTP Input",
    slug: "otp-input",
    category: "components",
    description: "One-time password input with individual digit fields",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Pagination",
    slug: "pagination",
    category: "components",
    description: "Animated pagination dots indicator",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Parallax Carousel",
    slug: "parallax-carousel",
    category: "components",
    description: "Carousel with parallax scrolling effect",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Picker",
    slug: "picker",
    category: "components",
    description: "Scrollable picker/selector component (iOS-style)",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Progress",
    slug: "progress",
    category: "components",
    description: "Linear progress bar component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Pulsing Dots",
    slug: "pulsing-dots",
    category: "components",
    description: "Animated pulsing dots loading indicator",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "QR Code",
    slug: "qr-code",
    category: "components",
    description: "QR code generator component",
    dependencies: ["@shopify/react-native-skia"],
  },
  {
    name: "Radial Intro",
    slug: "radial-intro",
    category: "components",
    description: "Radial reveal intro/onboarding animation",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Radiant Button",
    slug: "radiant-button",
    category: "components",
    description: "Button with radiant/glow animation effect",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Ripple",
    slug: "ripple",
    category: "components",
    description: "Touch ripple effect wrapper component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Rolling Counter",
    slug: "rolling-counter",
    category: "components",
    description: "Number counter with rolling/slot-machine animation",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Rotate Carousel",
    slug: "rotate-carousel",
    category: "components",
    description: "Carousel with 3D rotation transitions",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Rotating Square",
    slug: "rotating-square",
    category: "components",
    description: "Animated rotating square loader",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Ruler",
    slug: "ruler",
    category: "components",
    description: "Scrollable ruler/measurement selector",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Scale Carousel",
    slug: "scale-carousel",
    category: "components",
    description: "Carousel with scale-based transitions",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Scroll Progress",
    slug: "scroll-progress",
    category: "components",
    description: "Visual progress indicator based on scroll position",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Scrollable Search",
    slug: "scrollable-search",
    category: "components",
    description: "Search bar that integrates with scroll behavior",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Search Bar",
    slug: "search-bar",
    category: "components",
    description: "Animated search bar component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Seek Bar",
    slug: "seek-bar",
    category: "components",
    description: "Media seek/progress bar with drag interaction",
    dependencies: [
      "react-native-reanimated",
      "react-native-gesture-handler",
    ],
  },
  {
    name: "Segmented Control",
    slug: "segmented-control",
    category: "components",
    description: "iOS-style segmented control/tab selector",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Shimmer",
    slug: "shimmer",
    category: "components",
    description: "Shimmer loading placeholder effect",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Shimmer Wave Text",
    slug: "shimmer-wave-text",
    category: "components",
    description: "Text with shimmering wave animation",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Spinner Arc",
    slug: "spinner-arc",
    category: "components",
    description: "Arc-shaped spinner loading indicator",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Split View",
    slug: "split-view",
    category: "components",
    description: "Split/comparison view with draggable divider",
    dependencies: [
      "react-native-reanimated",
      "react-native-gesture-handler",
    ],
  },
  {
    name: "Stack Aware Tabs",
    slug: "stack-aware-tabs",
    category: "components",
    description: "Tab navigation that adapts to navigation stack depth",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Stack Carousel",
    slug: "stack-carousel",
    category: "components",
    description: "Carousel with stacked card layout",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Stacked Cards",
    slug: "stacked-cards",
    category: "components",
    description: "Stacked/swipeable card deck component",
    dependencies: [
      "react-native-reanimated",
      "react-native-gesture-handler",
    ],
  },
  {
    name: "Stepper",
    slug: "stepper",
    category: "components",
    description: "Numeric stepper with increment/decrement buttons",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Squiggly Slider",
    slug: "squiggly-slider",
    category: "components",
    description: "Slider with squiggly/wavy track design",
    dependencies: ["react-native-reanimated", "@shopify/react-native-skia"],
  },
  {
    name: "Tabs",
    slug: "tabs",
    category: "components",
    description: "Animated tab component with indicator",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Theme Switch",
    slug: "theme-switch",
    category: "components",
    description: "Animated theme (dark/light) switch toggle",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Tilt Carousel",
    slug: "tilt-carousel",
    category: "components",
    description: "Carousel with 3D tilt perspective transitions",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Toast",
    slug: "toast",
    category: "components",
    description: "Animated toast notification component",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Vertical Flow Carousel",
    slug: "vertical-flow-carousel",
    category: "components",
    description: "Vertical scrolling carousel with flow animations",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Vertical Page Carousel",
    slug: "vertical-page-carousel",
    category: "components",
    description: "Full-page vertical carousel/pager",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Vertical Wheel",
    slug: "vertical-wheel",
    category: "components",
    description: "Vertical scroll wheel picker",
    dependencies: ["react-native-reanimated"],
  },

  // === TEMPLATES ===
  {
    name: "Bottom Sheet",
    slug: "bottom-sheet",
    category: "templates",
    description: "Draggable bottom sheet modal component",
    dependencies: [
      "react-native-reanimated",
      "react-native-gesture-handler",
    ],
  },
  {
    name: "Bottom Sheet Stack",
    slug: "bottom-sheet-stack",
    category: "templates",
    description: "Stackable bottom sheet with multiple levels",
    dependencies: [
      "react-native-reanimated",
      "react-native-gesture-handler",
    ],
  },
  {
    name: "Floating Sheet",
    slug: "floating-sheet",
    category: "templates",
    description: "Floating action sheet/modal component",
    dependencies: [
      "react-native-reanimated",
      "react-native-gesture-handler",
    ],
  },
  {
    name: "Media List",
    slug: "media-list",
    category: "templates",
    description: "Animated media/content list layout",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Parallax Header",
    slug: "parallax-header",
    category: "templates",
    description: "Scroll view with parallax header image effect",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Whats New",
    slug: "whats-new",
    category: "templates",
    description: "What's New / changelog modal screen template",
    dependencies: ["react-native-reanimated"],
  },
  {
    name: "Animated Header ScrollView",
    slug: "animated-header-scrollview",
    category: "templates",
    description: "ScrollView with animated collapsible header",
    dependencies: ["react-native-reanimated"],
  },
];

export function searchComponents(query: string): ComponentInfo[] {
  const q = query.toLowerCase();
  return COMPONENT_REGISTRY.filter(
    (c) =>
      c.name.toLowerCase().includes(q) ||
      c.slug.toLowerCase().includes(q) ||
      c.description.toLowerCase().includes(q) ||
      c.category.toLowerCase().includes(q)
  );
}

export function getComponentsByCategory(
  category: string
): ComponentInfo[] {
  return COMPONENT_REGISTRY.filter(
    (c) => c.category.toLowerCase() === category.toLowerCase()
  );
}

export function getComponentBySlug(
  slug: string
): ComponentInfo | undefined {
  return COMPONENT_REGISTRY.find(
    (c) => c.slug.toLowerCase() === slug.toLowerCase()
  );
}