nexoreui-cli 0.1.0 → 0.1.3

package/dist/index.js

@@ -26,6 +26,101 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 // src/commands/add.ts
 var fs3 = __toESM(require("fs"));
 var path3 = __toESM(require("path"));
+var readline = __toESM(require("readline"));
+var import_child_process = require("child_process");
+
+// src/utils/detect.ts
+var fs = __toESM(require("fs"));
+var path = __toESM(require("path"));
+function detectProject(cwd = process.cwd()) {
+  let packageManager = "npm";
+  let projectType = "unknown";
+  let hasSrcDir = false;
+  let currentDir = cwd;
+  let baseDir = cwd;
+  while (currentDir !== path.parse(currentDir).root) {
+    if (fs.existsSync(path.join(currentDir, "package.json"))) {
+      baseDir = currentDir;
+      break;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  if (fs.existsSync(path.join(baseDir, "pnpm-lock.yaml"))) {
+    packageManager = "pnpm";
+  } else if (fs.existsSync(path.join(baseDir, "yarn.lock"))) {
+    packageManager = "yarn";
+  } else if (fs.existsSync(path.join(baseDir, "bun.lockb")) || fs.existsSync(path.join(baseDir, "bun.lock"))) {
+    packageManager = "bun";
+  }
+  if (fs.existsSync(path.join(baseDir, "src"))) {
+    hasSrcDir = true;
+  }
+  try {
+    const packageJsonPath = path.join(baseDir, "package.json");
+    if (fs.existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+      const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+      if (deps["next"]) {
+        projectType = "next";
+      } else if (deps["vite"] || deps["@tailwindcss/vite"]) {
+        projectType = "vite";
+      } else if (deps["react-scripts"]) {
+        projectType = "cra";
+      }
+    }
+  } catch (err) {
+  }
+  return {
+    packageManager,
+    projectType,
+    hasSrcDir,
+    baseDir
+  };
+}
+
+// src/utils/copy.ts
+var fs2 = __toESM(require("fs"));
+var path2 = __toESM(require("path"));
+var CN_TEMPLATE = `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+function ensureDir(dirPath) {
+  if (!fs2.existsSync(dirPath)) {
+    fs2.mkdirSync(dirPath, { recursive: true });
+  }
+}
+function getRelativeImportPath(fromDir, toFile) {
+  let relativePath = path2.relative(fromDir, toFile);
+  relativePath = relativePath.replace(/\\/g, "/");
+  relativePath = relativePath.replace(/\.(ts|tsx|js|jsx)$/, "");
+  if (!relativePath.startsWith(".")) {
+    relativePath = "./" + relativePath;
+  }
+  return relativePath;
+}
+function ensureCnUtil(utilsPath) {
+  const dir = path2.dirname(utilsPath);
+  ensureDir(dir);
+  if (!fs2.existsSync(utilsPath)) {
+    fs2.writeFileSync(utilsPath, CN_TEMPLATE, "utf8");
+    return true;
+  }
+  return false;
+}
+function copyComponentFile(content, targetFilePath, utilsFilePath) {
+  const targetDir = path2.dirname(targetFilePath);
+  ensureDir(targetDir);
+  const relativeImport = getRelativeImportPath(targetDir, utilsFilePath);
+  const rewrittenContent = content.replace(
+    /['"]\.\.\/utils\/cn['"]/g,
+    `"${relativeImport}"`
+  );
+  fs2.writeFileSync(targetFilePath, rewrittenContent, "utf8");
+}
 
 // src/registry/button.ts
 var button = {
@@ -34,7 +129,8 @@ var button = {
     "class-variance-authority",
     "clsx",
     "tailwind-merge",
-    "framer-motion"
+    "framer-motion",
+    "lucide-react"
   ],
   fileName: "button.tsx",
   content: `'use client';
@@ -42,28 +138,34 @@ var button = {
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../utils/cn';
-import { motion, HTMLMotionProps, AnimatePresence } from 'framer-motion';
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95",
   {
     variants: {
       variant: {
-        default: "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30",
+        default: "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/10 hover:shadow-xl hover:shadow-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-border/50",
-        destructive: "bg-gradient-to-br from-destructive to-destructive/80 text-destructive-foreground shadow-lg shadow-destructive/20 hover:shadow-xl hover:shadow-destructive/30",
+        destructive: "bg-gradient-to-br from-destructive to-destructive/80 text-destructive-foreground shadow-lg shadow-destructive/10 hover:shadow-xl hover:shadow-destructive/20",
         outline: "border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground hover:border-accent",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
-        // New WOW Variants
+        // Premium variants
         premium: "bg-gradient-to-r from-violet-600 via-pink-600 to-orange-500 text-white shadow-lg shadow-purple-500/20 hover:shadow-xl hover:shadow-purple-500/30",
-        neon: "bg-background border-2 border-primary text-foreground shadow-[0_0_15px_rgba(var(--primary-rgb),0.5)] hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.7)]",
+        neon: "bg-background border-2 border-primary text-foreground shadow-[0_0_15px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.5)]",
         glass: "backdrop-blur-md bg-white/10 dark:bg-black/20 border border-white/20 dark:border-white/10 text-foreground hover:bg-white/20 dark:hover:bg-black/30 shadow-lg",
         shimmer: "relative overflow-hidden bg-slate-900 text-white dark:bg-white dark:text-black",
+        // New requested variants
+        gradient: "bg-gradient-to-r from-indigo-500 via-purple-500 to-violet-600 text-white shadow-lg shadow-indigo-500/20 hover:shadow-xl hover:shadow-indigo-500/30 hover:opacity-95",
+        glow: "bg-primary text-primary-foreground shadow-[0_0_12px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_24px_rgba(var(--primary-rgb),0.6)] border border-primary/20",
+        magnetic: "bg-gradient-to-br from-violet-600 to-indigo-600 text-white shadow-md hover:shadow-lg",
+        loading: "bg-primary/80 text-primary-foreground/80 pointer-events-none cursor-wait",
       },
       size: {
         default: "h-10 px-5 py-2",
-        sm: "h-9 rounded-md px-3 text-xs",
+        sm: "h-9 rounded-lg px-3 text-xs",
         lg: "h-11 rounded-xl px-8 text-base",
         icon: "h-10 w-10 rounded-full",
       },
@@ -75,23 +177,70 @@ const buttonVariants = cva(
   }
 );
 
+/**
+ * Props for the Button component
+ */
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  /** Enable hover/tap motion animation @default true */
+  /** 
+   * Enable hover/tap spring motion animation
+   * @default true 
+   */
   animate?: boolean;
-  /** Enable shimmer light effect across the button */
+  /** 
+   * Enable shimmer light animation effect
+   * @default false
+   */
   shimmer?: boolean;
-  /** Enable neon glow effect */
+  /** 
+   * Enable neon glow effect
+   * @default false
+   */
   glow?: boolean;
-  children?: React.ReactNode;
-  className?: string;
+  /** 
+   * Display loading spinner icon and disable actions
+   * @default false
+   */
+  isLoading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, animate = true, shimmer = false, glow = false, children, ...props }, ref) => {
-    
+  (
+    {
+      className,
+      variant,
+      size,
+      animate = true,
+      shimmer = false,
+      glow = false,
+      isLoading = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const isShimmer = variant === 'shimmer' || shimmer;
+    const isMagnetic = variant === 'magnetic';
+    const isGlow = variant === 'glow' || glow;
+
+    // Track mouse coords for magnetic hover movement
+    const [magneticPos, setMagneticPos] = React.useState({ x: 0, y: 0 });
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (!isMagnetic) return;
+      const { clientX, clientY, currentTarget } = e;
+      const { left, top, width, height } = currentTarget.getBoundingClientRect();
+      const x = clientX - (left + width / 2);
+      const y = clientY - (top + height / 2);
+      // spring weight multiplier
+      setMagneticPos({ x: x * 0.35, y: y * 0.35 });
+    };
+
+    const handleMouseLeave = () => {
+      if (!isMagnetic) return;
+      setMagneticPos({ x: 0, y: 0 });
+    };
 
     const buttonContent = (
       <>
@@ -109,45 +258,240 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             style={{ transform: 'skewX(-20deg)' }}
           />
         )}
-        <span className="relative z-10 flex items-center gap-2">{children}</span>
+        <span className="relative z-10 flex items-center justify-center gap-2">
+          {isLoading && <Loader2 className="animate-spin h-4 w-4 shrink-0" />}
+          {children}
+        </span>
       </>
     );
 
+    const activeVariant = isLoading ? "loading" : variant;
+
+    // Disable button if loading
+    const disabledState = props.disabled || isLoading;
+
+    // Destructure custom props to avoid passing invalid props down to HTML element
+    const { ...htmlProps } = props;
+
+    // Setup base styles
+    const resolvedClassName = cn(
+      buttonVariants({ variant: activeVariant, size, className }),
+      isShimmer && "relative overflow-hidden",
+      isGlow && "shadow-[0_0_15px_rgba(var(--primary-rgb),0.4)]"
+    );
+
     if (!animate) {
       return (
         <button
-          className={cn(buttonVariants({ variant, size, className }), isShimmer && "relative overflow-hidden")}
           ref={ref}
-          {...props}
+          disabled={disabledState}
+          className={resolvedClassName}
+          {...(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
         >
           {buttonContent}
         </button>
       );
     }
 
-    // Destructure HTML-only event handlers that shouldn't go to motion.button
-    const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...motionSafeProps } = props;
-
     return (
       <motion.button
-        className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
-        whileHover={{ 
-          scale: 1.03,
-          y: -1,
+        disabled={disabledState}
+        className={resolvedClassName}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        animate={isMagnetic ? { x: magneticPos.x, y: magneticPos.y } : undefined}
+        whileHover={{
+          scale: isMagnetic ? 1.02 : 1.03,
+          y: isMagnetic ? 0 : -1.5,
+          shadow: isGlow ? "0 0 25px rgba(var(--primary-rgb), 0.7)" : undefined,
         }}
         whileTap={{ scale: 0.97 }}
-        transition={{ type: "spring", stiffness: 400, damping: 15 }}
-        {...motionSafeProps as HTMLMotionProps<"button">}
+        transition={{
+          type: "spring",
+          stiffness: 350,
+          damping: 20,
+        }}
+        {...(htmlProps as any)}
       >
         {buttonContent}
       </motion.button>
     );
   }
 );
+
 Button.displayName = "Button";
 
 export { Button, buttonVariants };
+
+// ----------------------------------------------------
+// Merged button components for backward compatibility
+// ----------------------------------------------------
+
+export const NeonButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <Button ref={ref} variant="neon" glow={true} {...props}>
+      {children}
+    </Button>
+  )
+);
+NeonButton.displayName = "NeonButton";
+
+export const ThreeDButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, ...props }, ref) => (
+    <Button
+      ref={ref}
+      className={cn(
+        "shadow-[0_5px_0_hsl(var(--primary-dark,240_5.9%_30%))] hover:shadow-[0_2px_0_hsl(var(--primary-dark,240_5.9%_30%))] active:translate-y-[3px] active:shadow-[0_0px_0_transparent] transition-all",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+);
+ThreeDButton.displayName = "ThreeDButton";
+
+export const RippleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, ...props }, ref) => (
+    <Button
+      ref={ref}
+      className={cn(
+        "relative overflow-hidden group active:scale-95 transition-transform",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute inset-0 bg-white/20 scale-0 rounded-full group-active:scale-[2] transition-transform duration-500 origin-center"></span>
+      <span className="relative z-10">{children}</span>
+    </Button>
+  )
+);
+RippleButton.displayName = "RippleButton";
+
+export const CyberpunkButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, ...props }, ref) => (
+    <Button
+      ref={ref}
+      className={cn(
+        "bg-yellow-400 text-black font-extrabold uppercase tracking-widest border-2 border-black hover:bg-black hover:text-yellow-400 hover:border-yellow-400 transition-colors shadow-[4px_4px_0_0_#000] rounded-none hover:shadow-[4px_4px_0_0_#fff]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+);
+CyberpunkButton.displayName = "CyberpunkButton";
+
+export const MagneticButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <Button ref={ref} variant="magnetic" {...props}>
+      {children}
+    </Button>
+  )
+);
+MagneticButton.displayName = "MagneticButton";
+
+export const ShimmerButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <Button ref={ref} variant="shimmer" shimmer={true} {...props}>
+      {children}
+    </Button>
+  )
+);
+ShimmerButton.displayName = "ShimmerButton";
+
+export const BorderBeamButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, ...props }, ref) => (
+    <Button
+      ref={ref}
+      variant="outline"
+      className={cn(
+        "relative overflow-hidden border border-border group",
+        className
+      )}
+      {...props}
+    >
+      <div className="absolute inset-0 bg-gradient-to-r from-primary to-transparent opacity-0 group-hover:opacity-20 transition-opacity"></div>
+      <div className="absolute top-0 left-0 w-full h-[2px] bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
+      <span className="relative z-10">{children}</span>
+    </Button>
+  )
+);
+BorderBeamButton.displayName = "BorderBeamButton";
+
+export const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonProps & { isLoading?: boolean }>(
+  ({ children, isLoading = true, ...props }, ref) => (
+    <Button ref={ref} isLoading={isLoading} {...props}>
+      {children}
+    </Button>
+  )
+);
+LoadingButton.displayName = "LoadingButton";
+
+export const DestructiveGlowButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <Button ref={ref} variant="destructive" glow={true} {...props}>
+      {children}
+    </Button>
+  )
+);
+DestructiveGlowButton.displayName = "DestructiveGlowButton";
+
+export const GhostOutlineButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <Button ref={ref} variant="outline" {...props}>
+      {children}
+    </Button>
+  )
+);
+GhostOutlineButton.displayName = "GhostOutlineButton";
+
+export const GlowButton = React.forwardRef<HTMLButtonElement, ButtonProps & { glowColor?: string }>(
+  ({ children, glowColor = "rgba(139, 92, 246, 0.15)", className, ...props }, ref) => (
+    <div className="relative group inline-block">
+      <div
+        className="absolute -inset-0.5 bg-gradient-to-r from-primary to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"
+        style={{ backgroundColor: glowColor }}
+      />
+      <Button ref={ref} className={cn("relative bg-background", className)} {...props}>
+        {children}
+      </Button>
+    </div>
+  )
+);
+GlowButton.displayName = "GlowButton";
+
+export const ShinyButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <Button ref={ref} shimmer={true} {...props}>
+      {children}
+    </Button>
+  )
+);
+ShinyButton.displayName = "ShinyButton";
+
+export const GradientButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <Button ref={ref} variant="gradient" {...props}>
+      {children}
+    </Button>
+  )
+);
+GradientButton.displayName = "GradientButton";
+
+export const GlassButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <Button ref={ref} variant="glass" {...props}>
+      {children}
+    </Button>
+  )
+);
+GlassButton.displayName = "GlassButton";
+
 `
 };
 
@@ -162,13 +506,15 @@ var modal = {
     "lucide-react",
     "framer-motion"
   ],
-  componentsDependencies: ["button"],
+  componentsDependencies: [
+    "button"
+  ],
   fileName: "modal.tsx",
   content: `"use client"
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X, AlertTriangle, CheckCircle } from "lucide-react"
+import { X, AlertTriangle, CheckCircle, Star } from "lucide-react"
 import { cn } from "../utils/cn"
 import { Button } from "./button"
 
@@ -198,7 +544,7 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->((({ className, children, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -416,6 +762,307 @@ export function Modal({
     </Dialog>
   )
 }
+
+// ============================================
+// Backward compatibility wrappers & variants
+// ============================================
+
+export interface BasicModalProps {
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+export const BasicModal = ({
+  isOpen,
+  onOpenChange,
+  trigger,
+  title = "Basic Modal",
+  description = "This is a simple modal dialog that can be used for various purposes.",
+  children,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  className = ""
+}: BasicModalProps) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      title={title}
+      description={description}
+      confirmText={confirmText}
+      cancelText={cancelText}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      className={className}
+      variant="default"
+    >
+      {children}
+    </Modal>
+  )
+}
+
+export interface InteractiveGlassModalProps {
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+export const InteractiveGlassModal = ({
+  isOpen,
+  onOpenChange,
+  trigger,
+  icon = <Star className="w-6 h-6 text-yellow-300" />,
+  title = "Premium Glass Effect",
+  description = "This modal uses full glassmorphism for a stunning visual effect.",
+  children,
+  confirmText = "Upgrade Now",
+  cancelText = "Maybe Later",
+  onConfirm,
+  onCancel,
+  className = ""
+}: InteractiveGlassModalProps) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      title={<span className="flex items-center gap-2">{icon} {title}</span>}
+      description={description}
+      confirmText={confirmText}
+      cancelText={cancelText}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      className={className}
+      variant="glass"
+    >
+      {children}
+    </Modal>
+  )
+}
+
+export interface DangerModalProps {
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+export const DangerModal = ({
+  isOpen,
+  onOpenChange,
+  trigger,
+  icon = <X className="w-8 h-8" />,
+  title = "Are you absolutely sure?",
+  description = "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+  children,
+  confirmText = "Delete",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  className = ""
+}: DangerModalProps) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      title={title}
+      description={description}
+      confirmText={confirmText}
+      cancelText={cancelText}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      className={className}
+      variant="destructive"
+    >
+      {children}
+    </Modal>
+  )
+}
+
+export interface GlassModalProps {
+  trigger?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  children?: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function GlassModal({ trigger, title = "Glass Modal", description, children, open, onOpenChange }: GlassModalProps) {
+  return (
+    <Modal
+      isOpen={open}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      title={title}
+      description={description}
+      variant="glass"
+    >
+      {children}
+    </Modal>
+  )
+}
+
+export interface AlertModalProps {
+  trigger?: React.ReactNode
+  title?: string
+  description?: string
+  onConfirm?: () => void
+  onCancel?: () => void
+  confirmText?: string
+  cancelText?: string
+  children?: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function AlertModal({ 
+  trigger, 
+  title = "Are you absolutely sure?", 
+  description, 
+  onConfirm, 
+  onCancel,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  children, 
+  open, 
+  onOpenChange 
+}: AlertModalProps) {
+  return (
+    <Modal
+      isOpen={open}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      title={title}
+      description={description}
+      confirmText={confirmText}
+      cancelText={cancelText}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      variant="destructive"
+    >
+      {children}
+    </Modal>
+  )
+}
+
+export interface SuccessModalProps {
+  trigger?: React.ReactNode
+  title?: string
+  description?: string
+  children?: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  confirmText?: string
+  onConfirm?: () => void
+}
+
+export function SuccessModal({ 
+  trigger, 
+  title = "Success!", 
+  description, 
+  children, 
+  open, 
+  onOpenChange,
+  confirmText = "Awesome",
+  onConfirm
+}: SuccessModalProps) {
+  return (
+    <Modal
+      isOpen={open}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      title={title}
+      description={description}
+      confirmText={confirmText}
+      onConfirm={onConfirm}
+      variant="success"
+    >
+      {children}
+    </Modal>
+  )
+}
+
+export interface CommandPaletteModalProps {
+  trigger: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function CommandPaletteModal({ trigger, open, onOpenChange }: CommandPaletteModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent className="p-0 overflow-hidden sm:max-w-[600px] gap-0">
+        <div className="flex items-center border-b px-3">
+          <svg className="mr-2 h-4 w-4 shrink-0 opacity-50" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          <input className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" placeholder="Type a command or search..." />
+        </div>
+        <div className="max-h-[300px] overflow-y-auto p-2">
+          <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">Suggestions</div>
+          <div className="flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground hover:bg-accent/50">
+            Calendar
+          </div>
+          <div className="flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground hover:bg-accent/50">
+            Search Emoji
+          </div>
+          <div className="flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground hover:bg-accent/50">
+            Calculator
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export interface BottomSheetSimulatedProps {
+  trigger: React.ReactNode
+  children?: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function BottomSheetSimulated({ trigger, children, open, onOpenChange }: BottomSheetSimulatedProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent className="sm:max-w-full sm:h-[50vh] sm:rounded-b-none sm:rounded-t-[10px] fixed bottom-0 top-auto translate-y-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom">
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
 `
 };
 
@@ -426,18 +1073,20 @@ var card = {
     "class-variance-authority",
     "clsx",
     "tailwind-merge",
-    "framer-motion"
+    "framer-motion",
+    "lucide-react"
   ],
   fileName: "card.tsx",
   content: `'use client';
 
 import * as React from "react"
 import { cn } from "../utils/cn"
-import { motion, HTMLMotionProps } from "framer-motion"
+import { motion, useMotionValue, useSpring, useTransform, HTMLMotionProps } from "framer-motion"
 import { cva, type VariantProps } from "class-variance-authority"
+import { Heart, Share2, MapPin, Star } from "lucide-react"
 
 const cardVariants = cva(
-  "rounded-2xl text-card-foreground transition-all duration-300",
+  "rounded-2xl text-card-foreground transition-all duration-300 overflow-hidden",
   {
     variants: {
       variant: {
@@ -445,11 +1094,16 @@ const cardVariants = cva(
         glass: "backdrop-blur-md bg-white/10 dark:bg-black/20 border border-white/20 dark:border-white/10 shadow-lg",
         gradient: "bg-gradient-to-br from-violet-500/10 via-pink-500/10 to-orange-500/10 border border-purple-500/20 shadow-lg shadow-purple-500/5",
         glow: "bg-card border-2 border-primary/20 shadow-[0_0_15px_rgba(var(--primary-rgb),0.1)] hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.2)]",
+        // New variants
+        bento: "border border-border/60 bg-gradient-to-br from-card to-muted/20 text-card-foreground shadow-md hover:shadow-lg hover:border-primary/30 relative",
+        spotlight: "border bg-card text-card-foreground relative hover:border-primary/20",
+        flip: "bg-transparent border-0 shadow-none overflow-visible relative",
+        tilt: "border bg-card text-card-foreground shadow-md",
       },
       hover: {
         none: "",
-        lift: "hover:-translate-y-1 hover:shadow-lg",
-        glow: "hover:border-primary/50 hover:shadow-[0_0_20px_rgba(var(--primary-rgb),0.15)]",
+        lift: "hover:-translate-y-1.5 hover:shadow-lg",
+        glow: "hover:border-primary/50 hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.25)]",
       }
     },
     defaultVariants: {
@@ -459,43 +1113,112 @@ const cardVariants = cva(
   }
 )
 
+/**
+ * Props for the Card component
+ */
 export interface CardProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof HTMLMotionProps<"div">>,
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
     VariantProps<typeof cardVariants> {
   /**
-   * Whether to enable hover animations
+   * Whether to enable hover spring animations
    * @default true
    */
   animate?: boolean;
   /**
-   * The title of the card
+   * The main title of the card
    */
   title?: React.ReactNode;
   /**
-   * The description of the card
+   * The subtitle or description of the card
    */
   description?: React.ReactNode;
   /**
-   * The footer content of the card
+   * Content to render in the card footer area
    */
   footer?: React.ReactNode;
   /**
-   * An image URL to display at the top of the card
+   * An optional image URL to display at the top of the card
    */
   image?: string;
-}
-
-const Card = React.forwardRef<HTMLDivElement, CardProps & HTMLMotionProps<"div">>(
-  ({ className, variant, hover, animate = true, title, description, footer, image, children, ...props }, ref) => {
+  /**
+   * HTML alternative text for the image
+   */
+  imageAlt?: string;
+  /**
+   * Back content displayed when using the \`flip\` variant on hover
+   */
+  backContent?: React.ReactNode;
+  /**
+   * Custom radial spotlight background color (e.g., rgba(168, 85, 247, 0.15))
+   * @default "rgba(139, 92, 246, 0.15)"
+   */
+  spotlightColor?: string;
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      className,
+      variant,
+      hover,
+      animate = true,
+      title,
+      description,
+      footer,
+      image,
+      imageAlt,
+      backContent,
+      spotlightColor = "rgba(139, 92, 246, 0.15)",
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const isCompound = !title && !description && !footer && !image;
     
-    const content = isCompound ? (
+    // Feature toggles based on variants
+    const isSpotlight = variant === "spotlight";
+    const isFlip = variant === "flip";
+    const isTilt = variant === "tilt";
+
+    // Spotlight mouse tracking state
+    const [mousePos, setMousePos] = React.useState({ x: 0, y: 0 });
+    const handleMouseMoveSpotlight = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isSpotlight) return;
+      const { currentTarget, clientX, clientY } = e;
+      const { left, top } = currentTarget.getBoundingClientRect();
+      setMousePos({ x: clientX - left, y: clientY - top });
+    };
+
+    // Tilt mouse tracking state
+    const [tiltPos, setTiltPos] = React.useState({ rotateX: 0, rotateY: 0 });
+    const handleMouseMoveTilt = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isTilt) return;
+      const { currentTarget, clientX, clientY } = e;
+      const { left, top, width, height } = currentTarget.getBoundingClientRect();
+      const x = clientX - left;
+      const y = clientY - top;
+      const maxTilt = 12; // degrees max rotation
+      const rotateX = ((y - height / 2) / (height / 2)) * -maxTilt;
+      const rotateY = ((x - width / 2) / (width / 2)) * maxTilt;
+      setTiltPos({ rotateX, rotateY });
+    };
+
+    const handleMouseLeaveTilt = () => {
+      if (!isTilt) return;
+      setTiltPos({ rotateX: 0, rotateY: 0 });
+    };
+
+    // Flip card hover state
+    const [isFlipped, setIsFlipped] = React.useState(false);
+
+    const baseContent = isCompound ? (
       children
     ) : (
       <>
         {image && (
           <div className="relative w-full h-48 overflow-hidden rounded-t-2xl">
-            <img src={image} alt={typeof title === 'string' ? title : 'Card image'} className="object-cover w-full h-full" />
+            <img src={image} alt={imageAlt || (typeof title === 'string' ? title : 'Card image')} className="object-cover w-full h-full transition-transform duration-300 hover:scale-105" />
           </div>
         )}
         {(title || description) && (
@@ -509,16 +1232,78 @@ const Card = React.forwardRef<HTMLDivElement, CardProps & HTMLMotionProps<"div">
       </>
     );
 
-    if (animate) {
+    // Destructure custom props to avoid DOM validation warnings
+    const { ...htmlProps } = props;
+
+    // Flip Variant Render
+    if (isFlip) {
+      return (
+        <div
+          ref={ref}
+          className={cn(cardVariants({ variant, hover, className }), "perspective-1000 w-full h-full")}
+          onMouseEnter={() => setIsFlipped(true)}
+          onMouseLeave={() => setIsFlipped(false)}
+          {...(htmlProps as React.HTMLAttributes<HTMLDivElement>)}
+        >
+          <motion.div
+            className="relative w-full h-full transition-all duration-500 preserve-3d"
+            animate={{ rotateY: isFlipped ? 180 : 0 }}
+            transition={{ type: "spring", stiffness: 300, damping: 22 }}
+          >
+            {/* Front Face */}
+            <div className="absolute inset-0 backface-hidden border bg-card text-card-foreground rounded-2xl shadow-sm flex flex-col justify-between overflow-hidden">
+              {baseContent}
+            </div>
+
+            {/* Back Face */}
+            <div className="absolute inset-0 backface-hidden rotate-y-180 border bg-gradient-to-br from-primary/10 to-primary/5 text-card-foreground rounded-2xl shadow-sm flex flex-col p-6 items-center justify-center text-center overflow-hidden">
+              {backContent || (
+                <div className="text-sm font-medium text-muted-foreground">
+                  Flip side content placeholder
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </div>
+      );
+    }
+
+    // Spotlight Variant Render Extra Element
+    const spotlightEffect = isSpotlight && (
+      <div
+        className="pointer-events-none absolute -inset-px rounded-2xl opacity-0 hover:opacity-100 group-hover:opacity-100 transition-opacity duration-300"
+        style={{
+          background: \`radial-gradient(400px circle at \${mousePos.x}px \${mousePos.y}px, \${spotlightColor}, transparent 80%)\`,
+        }}
+      />
+    );
+
+    // Build the resolved element attributes
+    const cardClass = cn(cardVariants({ variant, hover: isFlip || isTilt ? "none" : hover, className }), isSpotlight && "group");
+
+    if (animate || isTilt) {
       return (
         <motion.div
           ref={ref}
-          className={cn(cardVariants({ variant, hover, className }))}
-          whileHover={{ scale: 1.01 }}
+          className={cardClass}
+          onMouseMove={(e) => {
+            if (isSpotlight) handleMouseMoveSpotlight(e);
+            if (isTilt) handleMouseMoveTilt(e);
+          }}
+          onMouseLeave={() => {
+            if (isTilt) handleMouseLeaveTilt();
+          }}
+          animate={
+            isTilt
+              ? { rotateX: tiltPos.rotateX, rotateY: tiltPos.rotateY }
+              : undefined
+          }
+          whileHover={isTilt ? undefined : { scale: 1.015 }}
           transition={{ type: "spring", stiffness: 300, damping: 20 }}
-          {...props}
+          {...(htmlProps as any)}
         >
-          {content as React.ReactNode}
+          {spotlightEffect}
+          {baseContent}
         </motion.div>
       );
     }
@@ -526,10 +1311,10 @@ const Card = React.forwardRef<HTMLDivElement, CardProps & HTMLMotionProps<"div">
     return (
       <div
         ref={ref}
-        className={cn(cardVariants({ variant, hover, className }))}
-        {...(props as React.HTMLAttributes<HTMLDivElement>)}
+        className={cardClass}
+        {...(htmlProps as React.HTMLAttributes<HTMLDivElement>)}
       >
-        {content as React.ReactNode}
+        {baseContent}
       </div>
     );
   }
@@ -554,7 +1339,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className="font-semibold leading-none tracking-tight text-xl bg-gradient-to-br from-foreground to-foreground/70 bg-clip-text text-transparent"
+    className={cn("font-semibold leading-none tracking-tight text-xl bg-gradient-to-br from-foreground to-foreground/75 bg-clip-text text-transparent", className)}
     {...props}
   />
 ))
@@ -566,7 +1351,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-muted-foreground leading-relaxed mt-1", className)}
     {...props}
   />
 ))
@@ -576,7 +1361,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("p-6 pt-0 leading-relaxed text-sm text-foreground/90", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
@@ -586,13 +1371,199 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("flex items-center p-6 pt-0 border-t border-border/10 mt-auto", className)}
     {...props}
   />
 ))
 CardFooter.displayName = "CardFooter"
 
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+
+export const GlassCard = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ children, ...props }, ref) => (
+    <Card ref={ref} variant="glass" {...props}>
+      {children}
+    </Card>
+  )
+);
+GlassCard.displayName = "GlassCard";
+
+export const GlowCard = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ children, ...props }, ref) => (
+    <Card ref={ref} variant="glow" {...props}>
+      {children}
+    </Card>
+  )
+);
+GlowCard.displayName = "GlowCard";
+
+export const GradientCard = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ children, ...props }, ref) => (
+    <Card ref={ref} variant="gradient" {...props}>
+      {children}
+    </Card>
+  )
+);
+GradientCard.displayName = "GradientCard";
+
+export const HoverCard = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ children, ...props }, ref) => (
+    <Card ref={ref} hover="lift" {...props}>
+      {children}
+    </Card>
+  )
+);
+HoverCard.displayName = "HoverCard";
+
+export const SpotlightCard = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ children, ...props }, ref) => (
+    <Card ref={ref} variant="spotlight" {...props}>
+      {children}
+    </Card>
+  )
+);
+SpotlightCard.displayName = "SpotlightCard";
+
+// ============================================
+// Consolidated Legacy/Special Cards for Compatibility
+// ============================================
+
+export const ImageCard = ({ src, title, subtitle, imageUrl, description }: any) => {
+  const finalSrc = src || imageUrl;
+  const finalTitle = title;
+  const finalSubtitle = subtitle || description;
+  return (
+    <div className="group relative overflow-hidden rounded-xl border bg-card text-card-foreground">
+      <div className="aspect-[4/3] w-full bg-muted overflow-hidden">
+        {finalSrc ? (
+          <img
+            src={finalSrc}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+            alt={typeof finalTitle === "string" ? finalTitle : "Image"}
+          />
+        ) : (
+          <div className="w-full h-full bg-muted-foreground/20" />
+        )}
+      </div>
+      <div className="p-4">
+        <h3 className="font-semibold text-lg">{finalTitle}</h3>
+        <p className="text-sm text-muted-foreground">{finalSubtitle}</p>
+      </div>
+    </div>
+  );
+};
+
+export const ProfileCard = ({ name, role, avatar }: any) => (
+  <div className="flex flex-col items-center p-6 text-center rounded-xl border bg-card shadow-sm">
+    <div className="w-24 h-24 rounded-full bg-muted mb-4 overflow-hidden border-4 border-background shadow-md">
+      {avatar && <img src={avatar} className="w-full h-full object-cover" alt={name} />}
+    </div>
+    <h3 className="text-xl font-bold">{name}</h3>
+    <p className="text-sm text-muted-foreground mb-4">{role}</p>
+    <button className="px-6 py-2 bg-primary text-primary-foreground rounded-full font-medium w-full hover:bg-primary/90 transition-colors">Follow</button>
+  </div>
+)
+
+export const ProductCard = ({ title, price, category, src }: any) => (
+  <div className="rounded-xl border bg-card p-4 flex flex-col gap-3 group">
+    <div className="aspect-square w-full rounded-lg bg-muted overflow-hidden relative">
+      {src && <img src={src} className="w-full h-full object-cover" alt={title} />}
+      <button className="absolute top-2 right-2 p-2 bg-background/50 backdrop-blur rounded-full hover:bg-background transition-colors"><Heart className="w-4 h-4" /></button>
+    </div>
+    <div>
+      <p className="text-xs text-muted-foreground mb-1">{category}</p>
+      <h3 className="font-medium truncate">{title}</h3>
+      <p className="font-bold text-lg mt-1">\${price}</p>
+    </div>
+  </div>
+)
+
+export const ArticleCard = ({ title, excerpt, date }: any) => (
+  <div className="p-6 rounded-xl border bg-card flex flex-col gap-4 hover:shadow-md transition-shadow cursor-pointer">
+    <span className="text-xs font-medium text-primary">{date}</span>
+    <h3 className="text-xl font-bold leading-tight">{title}</h3>
+    <p className="text-muted-foreground line-clamp-3">{excerpt}</p>
+    <div className="mt-auto pt-4 border-t flex items-center justify-between text-sm">
+      <span className="font-medium">Read more \u2192</span>
+      <button><Share2 className="w-4 h-4 text-muted-foreground hover:text-foreground" /></button>
+    </div>
+  </div>
+)
+
+export const StatCardSimple = ({ label, value, trend }: any) => (
+  <div className="p-5 rounded-xl border bg-card">
+    <p className="text-sm font-medium text-muted-foreground mb-2">{label}</p>
+    <div className="flex items-end justify-between">
+      <h4 className="text-3xl font-bold">{value}</h4>
+      <span className={\`text-sm font-medium \${trend?.startsWith('+') ? 'text-green-500' : 'text-red-500'}\`}>{trend}</span>
+    </div>
+  </div>
+)
+
+export const PricingCardBasic = ({ name, price, features }: any) => (
+  <div className="p-6 rounded-xl border bg-card flex flex-col items-center text-center">
+    <h3 className="text-xl font-medium mb-2">{name}</h3>
+    <div className="mb-6"><span className="text-4xl font-bold">\${price}</span><span className="text-muted-foreground">/mo</span></div>
+    <ul className="space-y-3 w-full mb-8 text-sm">
+      {features?.map((f: string, i: number) => <li key={i} className="text-muted-foreground border-b pb-2 last:border-0">{f}</li>)}
+    </ul>
+    <button className="w-full py-2 bg-primary text-primary-foreground rounded-lg font-medium mt-auto">Subscribe</button>
+  </div>
+)
+
+export const WeatherCard = ({ city, temp, condition }: any) => (
+  <div className="p-6 rounded-xl border bg-gradient-to-br from-blue-500 to-cyan-400 text-white shadow-lg">
+    <div className="flex justify-between items-start mb-8">
+      <div>
+        <h3 className="text-2xl font-bold">{city}</h3>
+        <p className="opacity-80">{condition}</p>
+      </div>
+      <div className="text-5xl font-light">{temp}\xB0</div>
+    </div>
+    <div className="flex gap-4 opacity-90 text-sm">
+      <span>H: {temp + 4}\xB0</span>
+      <span>L: {temp - 3}\xB0</span>
+    </div>
+  </div>
+)
+
+export const EventCard = ({ title, date, location }: any) => (
+  <div className="flex p-4 rounded-xl border bg-card gap-4">
+    <div className="flex flex-col items-center justify-center bg-primary/10 text-primary rounded-lg px-4 py-2 min-w-[70px]">
+      <span className="text-xs uppercase font-bold">{date?.split(' ')[0]}</span>
+      <span className="text-2xl font-black">{date?.split(' ')[1]}</span>
+    </div>
+    <div className="flex flex-col justify-center">
+      <h3 className="font-bold text-lg leading-tight mb-1">{title}</h3>
+      <div className="flex items-center text-sm text-muted-foreground gap-1">
+        <MapPin className="w-3 h-3" /> {location}
+      </div>
+    </div>
+  </div>
+)
+
+export const TestimonialCardBasic = ({ text, author }: any) => (
+  <div className="p-6 rounded-xl border bg-muted/30 italic relative">
+    <span className="absolute top-4 left-4 text-4xl text-primary/20 font-serif">"</span>
+    <p className="relative z-10 text-muted-foreground mb-4 pt-4">{text}</p>
+    <div className="flex items-center gap-2">
+      <div className="w-8 h-8 rounded-full bg-primary/20" />
+      <span className="font-semibold text-sm not-italic">{author}</span>
+    </div>
+  </div>
+)
+
+export const InteractiveCard = ({ title, description }: any) => (
+  <div className="group p-6 rounded-xl border bg-card hover:bg-primary hover:text-primary-foreground transition-all duration-300 cursor-pointer">
+    <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary group-hover:bg-primary-foreground/20 group-hover:text-primary-foreground flex items-center justify-center mb-4 transition-colors">
+      <Star className="w-6 h-6" />
+    </div>
+    <h3 className="text-xl font-bold mb-2">{title}</h3>
+    <p className="text-muted-foreground group-hover:text-primary-foreground/80 transition-colors">{description}</p>
+  </div>
+)
+
+
 `
 };
 
@@ -603,7 +1574,8 @@ var alert = {
     "class-variance-authority",
     "clsx",
     "tailwind-merge",
-    "framer-motion"
+    "framer-motion",
+    "lucide-react"
   ],
   fileName: "alert.tsx",
   content: `"use client"
@@ -611,10 +1583,11 @@ var alert = {
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../utils/cn"
-import { motion, HTMLMotionProps } from "framer-motion"
+import { motion, AnimatePresence } from "framer-motion"
+import { AlertCircle, Info, CheckCircle2, XCircle, Cookie, BellRing, WifiOff, AlertTriangle, X } from "lucide-react"
 
 const alertVariants = cva(
-  "relative w-full rounded-xl border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 transition-all duration-300",
+  "relative w-full rounded-2xl border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 transition-all duration-300 shadow-sm",
   {
     variants: {
       variant: {
@@ -624,6 +1597,12 @@ const alertVariants = cva(
         warning: "border-amber-500/20 bg-amber-500/10 text-amber-600 dark:text-amber-400 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400",
         info: "border-blue-500/20 bg-blue-500/10 text-blue-600 dark:text-blue-400 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",
         glass: "backdrop-blur-md bg-white/5 dark:bg-black/20 border-white/10 dark:border-white/5 text-foreground",
+        floating: "fixed bottom-5 right-5 z-50 max-w-sm bg-card/95 backdrop-blur-md border border-border/80 text-foreground shadow-[0_10px_30px_rgba(0,0,0,0.25)] animate-slide-up",
+        minimal: "border-0 bg-muted/40 p-3 text-sm rounded-xl text-foreground hover:bg-muted/60 shadow-none [&>svg]:top-3.5",
+        neon: "border-purple-500/50 bg-purple-500/10 text-purple-200 shadow-[0_0_15px_rgba(168,85,247,0.3)] [&>svg]:text-purple-400",
+        cyberpunk: "border-l-4 border-yellow-400 bg-black text-yellow-400 shadow-[4px_4px_0_0_rgba(250,204,21,1)] rounded-none font-mono uppercase [&>svg]:text-yellow-400",
+        gradient: "bg-gradient-to-r from-blue-500/10 to-indigo-500/10 border-blue-500/20 text-foreground [&>svg]:text-blue-500",
+        banner: "w-full bg-indigo-600 text-white border-0 shadow-md rounded-none sm:rounded-xl [&>svg]:text-white",
       },
     },
     defaultVariants: {
@@ -635,76 +1614,85 @@ const alertVariants = cva(
 export interface AlertProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
     VariantProps<typeof alertVariants> {
-  /**
-   * Whether to enable entry animations
-   * @default true
-   */
   animate?: boolean;
-  /**
-   * The title of the alert
-   */
   title?: React.ReactNode;
-  /**
-   * The description of the alert
-   */
   description?: React.ReactNode;
-  /**
-   * An optional icon to display
-   */
   icon?: React.ReactNode;
-  /**
-   * Whether the alert can be dismissed
-   */
   dismissible?: boolean;
-  /**
-   * Callback function called when the alert is dismissed
-   */
   onDismiss?: () => void;
+  actionText?: string;
+  onAction?: () => void;
 }
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant, animate = true, title, description, icon, dismissible, onDismiss, children, ...props }, ref) => {
-    const isCompound = !title && !description && !icon;
+  (
+    {
+      className,
+      variant,
+      animate = true,
+      title,
+      description,
+      icon,
+      dismissible = false,
+      onDismiss,
+      actionText,
+      onAction,
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const [isOpen, setIsOpen] = React.useState(true);
 
     if (!isOpen) return null;
 
-    const content = isCompound ? (
-      children
-    ) : (
+    const isMinimal = variant === "minimal";
+    const isBanner = variant === "banner";
+
+    const content = (
       <>
-        {icon && <div className="absolute left-4 top-4">{icon}</div>}
-        <div className={cn(icon ? "pl-7" : "")}>
+        {icon && <div className={cn("absolute left-4", isMinimal ? "top-3" : "top-4")}>{icon}</div>}
+        <div className={cn(icon ? "pl-7" : "", "pr-8")}>
           {title && <AlertTitle>{title}</AlertTitle>}
           {description && <AlertDescription>{description}</AlertDescription>}
           {!title && !description && children}
         </div>
+        {isBanner && actionText && (
+          <button
+            onClick={onAction}
+            className="absolute right-12 top-1/2 -translate-y-1/2 text-xs font-bold bg-white text-indigo-600 px-3 py-1.5 rounded-md hover:bg-indigo-50 transition-colors"
+          >
+            {actionText}
+          </button>
+        )}
         {dismissible && (
           <button
             onClick={() => {
               setIsOpen(false);
               onDismiss?.();
             }}
-            className="absolute right-4 top-4 opacity-70 hover:opacity-100 transition-opacity"
+            className="absolute right-4 top-4 opacity-50 hover:opacity-100 transition-opacity p-0.5 rounded-md hover:bg-muted"
             aria-label="Dismiss"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            <X className="h-4 w-4" />
           </button>
         )}
       </>
     );
 
+    const alertClass = cn(alertVariants({ variant }), className);
+
     if (animate) {
       return (
         <motion.div
           ref={ref}
           role="alert"
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 10 }}
-          transition={{ duration: 0.3 }}
-          className={cn(alertVariants({ variant }), className)}
-          {...(props as unknown as HTMLMotionProps<"div">)}
+          initial={{ opacity: 0, y: variant === "floating" ? 30 : 15, scale: variant === "floating" ? 0.95 : 1 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: variant === "floating" ? 20 : 10, scale: 0.95 }}
+          transition={{ type: "spring", stiffness: 350, damping: 24 }}
+          className={alertClass}
+          {...(props as any)}
         >
           {content}
         </motion.div>
@@ -715,8 +1703,8 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       <div
         ref={ref}
         role="alert"
-        className={cn(alertVariants({ variant }), className)}
-        {...props}
+        className={alertClass}
+        {...(props as React.HTMLAttributes<HTMLDivElement>)}
       >
         {content}
       </div>
@@ -731,7 +1719,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn("mb-1 font-semibold leading-none tracking-tight text-base", className)}
+    className={cn("mb-1 font-semibold leading-none tracking-tight text-base text-foreground", className)}
     {...props}
   />
 ))
@@ -743,13 +1731,137 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm opacity-90 [&_p]:leading-relaxed", className)}
+    className={cn("text-sm text-muted-foreground leading-relaxed mt-1 opacity-90 [&_p]:leading-relaxed", className)}
     {...props}
   />
 ))
 AlertDescription.displayName = "AlertDescription"
 
+// ----------------------------------------------------
+// Merged subcomponents and wrappers
+// ----------------------------------------------------
+
+// 1. ToastAlertWrapper
+export const ToastAlertWrapper = ({ children, className, title, description, time }: any) => (
+  <div className={cn("max-w-sm w-full bg-background border border-border/80 shadow-xl rounded-2xl p-4 flex gap-4 items-start relative", className)}>
+    <CheckCircle2 className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
+    <div className="flex-1">
+      {title && <h4 className="font-semibold text-sm">{title}</h4>}
+      {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
+      {children}
+    </div>
+    {time && <span className="text-xs text-muted-foreground/60">{time}</span>}
+  </div>
+)
+
+// 2. CookieAlert
+export const CookieAlert = ({ onAccept, onDecline }: { onAccept?: () => void; onDecline?: () => void }) => {
+  const [visible, setVisible] = React.useState(true)
+  if (!visible) return null
+  return (
+    <div className="max-w-md bg-card border rounded-2xl p-6 shadow-2xl space-y-4">
+      <div className="flex items-center gap-3">
+        <Cookie className="h-6 w-6 text-orange-500 animate-bounce" />
+        <h4 className="font-bold text-lg">Cookie Preferences</h4>
+      </div>
+      <p className="text-sm text-muted-foreground">
+        We use cookies to improve your experience. By continuing to visit this site you agree to our use of cookies.
+      </p>
+      <div className="flex gap-3 pt-2">
+        <button 
+          onClick={() => { setVisible(false); onAccept?.(); }}
+          className="flex-1 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/95 transition-colors rounded-xl text-sm font-semibold shadow-md shadow-primary/10"
+        >
+          Accept All
+        </button>
+        <button 
+          onClick={() => { setVisible(false); onDecline?.(); }}
+          className="flex-1 px-4 py-2 border rounded-xl text-sm font-semibold hover:bg-muted transition-colors"
+        >
+          Decline
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// 3. OfflineBanner
+export const OfflineBanner = () => (
+  <div className="w-full bg-red-600 text-white p-3.5 flex justify-center items-center gap-2 text-sm font-semibold shadow-md sm:rounded-xl">
+    <WifiOff className="w-4 h-4 animate-pulse" /> You are currently offline. Some features may be unavailable.
+  </div>
+)
+
+// 4. RateLimitAlert
+export const RateLimitAlert = () => (
+  <div className="border border-orange-500/30 bg-orange-500/10 p-5 rounded-2xl flex gap-3 items-start max-w-md shadow-sm">
+    <AlertTriangle className="w-5 h-5 text-orange-500 shrink-0 mt-0.5 animate-pulse" />
+    <div className="flex-1">
+      <h4 className="font-bold text-orange-600 dark:text-orange-400">Rate Limit Exceeded</h4>
+      <p className="text-sm text-orange-600/80 dark:text-orange-400/80 mt-1 mb-4">
+        You have made too many requests. Please wait 45 seconds before trying again.
+      </p>
+      <div className="w-full h-1.5 bg-orange-500/20 rounded-full overflow-hidden">
+        <motion.div animate={{ width: ["100%", "0%"] }} transition={{ duration: 45, ease: "linear" }} className="h-full bg-orange-500" />
+      </div>
+    </div>
+  </div>
+)
+
+// Re-export original/merged components
 export { Alert, AlertTitle, AlertDescription }
+export const CyberAlert = ({ title, description, variant, ...props }: any) => (
+  <Alert variant="cyberpunk" title={title} description={description} {...props} />
+)
+export const SoftAlert = ({ title, description, variant, ...props }: any) => (
+  <Alert variant={variant === "success" ? "success" : "info"} title={title} description={description} {...props} />
+)
+export const MinimalAlert = ({ title, description, variant, ...props }: any) => (
+  <Alert variant="minimal" title={title} description={description} {...props} />
+)
+export const LeftBorderAlert = ({ title, description, variant, ...props }: any) => (
+  <Alert variant={variant === "warning" ? "warning" : "default"} className="border-l-4 border-l-primary" title={title} description={description} {...props} />
+)
+export const IconTopAlert = ({ title, description, variant, ...props }: any) => (
+  <div className="flex flex-col items-center text-center p-6 bg-card border rounded-2xl" {...props}>
+    <div className="h-12 w-12 rounded-full bg-destructive/10 text-destructive flex items-center justify-center mb-4">
+      <AlertCircle className="h-6 w-6" />
+    </div>
+    <h4 className="font-bold text-lg mb-2">{title}</h4>
+    <p className="text-sm text-muted-foreground">{description}</p>
+  </div>
+)
+export const SolidAlert = ({ title, description, variant, ...props }: any) => {
+  const bgClasses: Record<string, string> = {
+    error: "bg-red-600 text-white border-0",
+    success: "bg-emerald-600 text-white border-0",
+    warning: "bg-amber-500 text-black border-0",
+    default: "bg-primary text-primary-foreground border-0",
+  }
+  const bgClass = bgClasses[variant] || bgClasses.default
+  return (
+    <div className={cn("p-4 rounded-xl shadow-lg flex gap-3 items-start", bgClass)} {...props}>
+      <Info className="h-5 w-5 shrink-0 mt-0.5" />
+      <div>
+        <h4 className="font-bold">{title}</h4>
+        <p className="text-sm opacity-90 mt-1">{description}</p>
+      </div>
+    </div>
+  )
+}
+export const BannerAlert = ({ message, variant, ...props }: any) => (
+  <Alert variant="banner" title={message} {...props} />
+)
+export const NeonAlert = ({ title, description, variant, ...props }: any) => (
+  <Alert variant="neon" title={title} description={description} {...props} />
+)
+export const GlassAlert = ({ title, description, variant, ...props }: any) => (
+  <Alert variant="glass" title={title} description={description} {...props} />
+)
+export const DismissibleAlert = ({ variant, title, description, ...props }: any) => (
+  <Alert variant={variant} title={title || "Attention"} description={description || "Action required"} dismissible={true} {...props} />
+)
+
 `
 };
 
@@ -760,7 +1872,8 @@ var badge = {
     "class-variance-authority",
     "clsx",
     "tailwind-merge",
-    "framer-motion"
+    "framer-motion",
+    "lucide-react"
   ],
   fileName: "badge.tsx",
   content: `'use client';
@@ -768,7 +1881,7 @@ var badge = {
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../utils/cn"
-import { motion } from "framer-motion"
+import { Star } from "lucide-react"
 
 const badgeVariants = cva(
   "inline-flex items-center gap-1 rounded-full border font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-default",
@@ -779,9 +1892,8 @@ const badgeVariants = cva(
         secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground border-border hover:bg-accent",
-        // New WOW Variants
         gradient: "border-transparent bg-gradient-to-r from-violet-500 to-pink-500 text-white shadow-sm",
-        neon: "border-primary/50 bg-primary/10 text-primary shadow-[0_0_10px_rgba(var(--primary-rgb),0.3)]",
+        neon: "border-purple-500/50 bg-purple-500/10 text-purple-400 shadow-[0_0_10px_rgba(168,85,247,0.3)]",
         success: "border-transparent bg-emerald-500/20 text-emerald-600 dark:text-emerald-400",
       },
       size: {
@@ -800,19 +1912,12 @@ const badgeVariants = cva(
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {
-  /**
-   * Whether to show a pulse animation on the dot
-   * @default false
-   */
   pulse?: boolean;
-  /**
-   * Whether to show a dot indicator
-   * @default false
-   */
   dot?: boolean;
+  text?: string;
 }
 
-function Badge({ className, variant, size, pulse = false, dot = false, children, ...props }: BadgeProps) {
+function Badge({ className, variant, size, pulse = false, dot = false, children, text, ...props }: BadgeProps) {
   const showDot = dot || pulse;
   
   return (
@@ -825,12 +1930,355 @@ function Badge({ className, variant, size, pulse = false, dot = false, children,
           <span className="relative inline-flex rounded-full h-2 w-2 bg-current"></span>
         </span>
       )}
-      {children}
+      {children || text}
     </div>
   )
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants }`
+};
+
+// src/registry/morphing-geometry.ts
+var morphingGeometry = {
+  name: "morphing-geometry",
+  dependencies: [
+    "clsx",
+    "tailwind-merge",
+    "framer-motion",
+    "lucide-react"
+  ],
+  fileName: "morphing-geometry.tsx",
+  content: `'use client';
+
+import * as React from 'react';
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { Sparkles } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export type MorphingShape = 'pill' | 'circle' | 'square' | 'squircle' | 'custom';
+export type MorphingVariant = 'gradient' | 'aurora' | 'neon' | 'glass' | 'outline' | 'subtle';
+export type MorphingColor = 'violet' | 'cyan' | 'emerald' | 'rose' | 'amber' | 'rainbow' | 'mono';
+export type MorphingSize = 'sm' | 'md' | 'lg' | 'xl' | 'custom';
+
+export interface MorphingGeometryProps extends Omit<HTMLMotionProps<'div'>, 'children'> {
+  shape?: MorphingShape;
+  radius?: number | string;
+  variant?: MorphingVariant;
+  color?: MorphingColor;
+  size?: MorphingSize;
+  dimension?: number;
+  spin?: boolean;
+  spinDuration?: number;
+  interactive?: boolean;
+  glow?: boolean;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export const MorphingGeometry = React.forwardRef<HTMLDivElement, MorphingGeometryProps>(
+  (
+    {
+      shape = 'squircle',
+      radius,
+      variant = 'gradient',
+      color = 'violet',
+      size = 'md',
+      dimension,
+      spin = false,
+      spinDuration = 6,
+      interactive = false,
+      glow = true,
+      icon,
+      children,
+      className,
+      style,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <motion.div
+        ref={ref}
+        animate={spin ? { rotate: [0, 90, 180, 270, 360] } : { rotate: 0 }}
+        transition={{ rotate: { duration: spinDuration, repeat: Infinity, ease: 'linear' }, borderRadius: { duration: 0.4 } }}
+        className={cn('relative flex items-center justify-center select-none overflow-hidden transition-all duration-300 w-24 h-24', className)}
+        style={{ borderRadius: radius || '24%', ...style }}
+        {...props}
+      >
+        <div className="relative z-10 flex flex-col items-center justify-center p-2 text-center">
+          {icon || children || <Sparkles className="w-6 h-6 text-white" />}
+        </div>
+      </motion.div>
+    );
+  }
+);
+
+MorphingGeometry.displayName = 'MorphingGeometry';
+export default MorphingGeometry;
+`
+};
+
+// src/registry/aurora-border-fx.ts
+var auroraBorderFX = {
+  name: "aurora-border-fx",
+  dependencies: [
+    "clsx",
+    "tailwind-merge",
+    "framer-motion",
+    "lucide-react"
+  ],
+  fileName: "aurora-border-fx.tsx",
+  content: `'use client';
+
+import * as React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { Sparkles } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export type AuroraFXColor = 'violet' | 'cyan' | 'emerald' | 'rose' | 'amber' | string;
+export type AuroraFXGlow = 'none' | 'subtle' | 'medium' | 'strong';
+export type AuroraFXRadius = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface AuroraColorOption {
+  name: string;
+  hex: string;
+}
+
+export const defaultAuroraColors: AuroraColorOption[] = [
+  { name: 'Violet', hex: '#8b5cf6' },
+  { name: 'Cyan', hex: '#06b6d4' },
+  { name: 'Emerald', hex: '#10b981' },
+  { name: 'Rose', hex: '#f43f5e' },
+  { name: 'Amber', hex: '#f59e0b' },
+];
+
+const colorPresetMap: Record<string, string> = {
+  violet: '#8b5cf6',
+  cyan: '#06b6d4',
+  emerald: '#10b981',
+  rose: '#f43f5e',
+  amber: '#f59e0b',
+};
+
+const radiusMap: Record<AuroraFXRadius, { outer: string; inner: string }> = {
+  sm: { outer: 'rounded-lg', inner: 'rounded-[calc(0.5rem-1px)]' },
+  md: { outer: 'rounded-xl', inner: 'rounded-[calc(0.75rem-1px)]' },
+  lg: { outer: 'rounded-2xl', inner: 'rounded-[calc(1rem-1px)]' },
+  xl: { outer: 'rounded-3xl', inner: 'rounded-[calc(1.5rem-1.5px)]' },
+  full: { outer: 'rounded-full', inner: 'rounded-full' },
+};
+
+const glowOpacityMap: Record<AuroraFXGlow, number> = {
+  none: 0,
+  subtle: 0.25,
+  medium: 0.45,
+  strong: 0.75,
+};
+
+export interface AuroraBorderFXProps extends React.HTMLAttributes<HTMLDivElement> {
+  color?: AuroraFXColor;
+  glow?: AuroraFXGlow;
+  radius?: AuroraFXRadius;
+  badgeText?: string;
+  badgeIcon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  showColorPicker?: boolean;
+  colors?: AuroraColorOption[];
+  activeColor?: string;
+  onColorChange?: (colorHex: string) => void;
+  previewSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export const AuroraBorderFX = React.forwardRef<HTMLDivElement, AuroraBorderFXProps>(
+  (
+    {
+      color = 'violet',
+      glow = 'medium',
+      radius = 'lg',
+      badgeText = 'Aurora Border FX',
+      badgeIcon = <Sparkles className="w-3 h-3" />,
+      title = 'Reactive Aurora Borders',
+      description = 'Smooth multi-color conic gradients that dynamically track and react with zero JavaScript canvas lag.',
+      showColorPicker = true,
+      colors = defaultAuroraColors,
+      activeColor: controlledColor,
+      onColorChange,
+      previewSlot,
+      footerSlot,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const resolvedInitialColor = colorPresetMap[color] || color || '#8b5cf6';
+    const [internalColor, setInternalColor] = React.useState<string>(resolvedInitialColor);
+
+    React.useEffect(() => {
+      if (colorPresetMap[color]) {
+        setInternalColor(colorPresetMap[color]);
+      } else if (color) {
+        setInternalColor(color);
+      }
+    }, [color]);
+
+    const currentColor = controlledColor !== undefined ? controlledColor : internalColor;
+    const radiusConfig = radiusMap[radius] || radiusMap.lg;
+    const glowOpacity = glowOpacityMap[glow] ?? 0.45;
+
+    const handleSelectColor = (hex: string) => {
+      if (controlledColor === undefined) {
+        setInternalColor(hex);
+      }
+      onColorChange?.(hex);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative isolate p-5 sm:p-6 overflow-hidden flex flex-col justify-between group transition-all duration-300',
+          'border border-border/80 bg-card/60 backdrop-blur-xl shadow-xl',
+          radiusConfig.outer,
+          className
+        )}
+        {...props}
+      >
+        {glow !== 'none' && (
+          <div
+            className="absolute -top-12 -right-12 w-48 h-48 rounded-full blur-[85px] pointer-events-none transition-colors duration-500 -z-10"
+            style={{
+              backgroundColor: currentColor,
+              opacity: glowOpacity,
+            }}
+          />
+        )}
+
+        {glow !== 'none' && glow !== 'subtle' && (
+          <div
+            className="absolute -bottom-10 -left-10 w-40 h-40 rounded-full blur-[90px] pointer-events-none transition-colors duration-700 -z-10"
+            style={{
+              backgroundColor: currentColor,
+              opacity: glowOpacity * 0.4,
+            }}
+          />
+        )}
+
+        {children ? (
+          <div className="relative z-10 w-full h-full">{children}</div>
+        ) : (
+          <div className="relative z-10 flex flex-col justify-between h-full space-y-5">
+            <div className="space-y-3">
+              <div className="flex items-center justify-between gap-3">
+                {badgeText && (
+                  <div
+                    className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold border transition-all duration-300 shadow-xs"
+                    style={{
+                      backgroundColor: \`\${currentColor}18\`,
+                      borderColor: \`\${currentColor}40\`,
+                      color: currentColor,
+                    }}
+                  >
+                    {badgeIcon}
+                    <span>{badgeText}</span>
+                  </div>
+                )}
+
+                {showColorPicker && colors && colors.length > 0 && (
+                  <div className="flex items-center gap-1.5 bg-muted/60 dark:bg-muted/40 p-1 rounded-full border border-border/60 backdrop-blur-md">
+                    {colors.map((c) => {
+                      const isActive = currentColor.toLowerCase() === c.hex.toLowerCase();
+                      return (
+                        <button
+                          key={c.name}
+                          type="button"
+                          onClick={() => handleSelectColor(c.hex)}
+                          className={cn(
+                            'w-3.5 h-3.5 rounded-full transition-all duration-200 cursor-pointer',
+                            isActive
+                              ? 'scale-125 ring-2 ring-foreground/40 shadow-xs'
+                              : 'hover:scale-110 opacity-70 hover:opacity-100'
+                          )}
+                          style={{ backgroundColor: c.hex }}
+                          title={\`Switch to \${c.name}\`}
+                          aria-label={\`Switch glow to \${c.name}\`}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                {title && (
+                  <h3 className="text-base sm:text-lg font-bold tracking-tight text-foreground">
+                    {title}
+                  </h3>
+                )}
+                {description && (
+                  <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed mt-1">
+                    {description}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="pt-2 flex items-center justify-center">
+              {previewSlot ? (
+                previewSlot
+              ) : (
+                <div
+                  className={cn(
+                    'relative p-[1.5px] overflow-hidden transition-all duration-300 w-full max-w-[280px]',
+                    radiusConfig.inner
+                  )}
+                  style={{
+                    background: \`linear-gradient(135deg, \${currentColor}, transparent 60%, \${currentColor}90)\`,
+                  }}
+                >
+                  <div
+                    className={cn(
+                      'bg-card/90 dark:bg-card/80 px-4 py-3 flex items-center justify-between backdrop-blur-md shadow-inner',
+                      radiusConfig.inner
+                    )}
+                  >
+                    <div className="flex items-center gap-2.5">
+                      <div
+                        className="w-2.5 h-2.5 rounded-full animate-pulse shrink-0"
+                        style={{ backgroundColor: currentColor }}
+                      />
+                      <span className="text-xs font-mono font-semibold text-foreground">
+                        Interactive Aurora Pill
+                      </span>
+                    </div>
+                    <span
+                      className="text-[10px] font-mono px-2 py-0.5 rounded-md font-medium border"
+                      style={{
+                        backgroundColor: \`\${currentColor}12\`,
+                        borderColor: \`\${currentColor}30\`,
+                        color: currentColor,
+                      }}
+                    >
+                      {currentColor.toUpperCase()}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {footerSlot && <div className="pt-2 border-t border-border/50">{footerSlot}</div>}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+AuroraBorderFX.displayName = 'AuroraBorderFX';
 `
 };
 
@@ -840,113 +2288,454 @@ var registry = {
   modal,
   card,
   alert,
-  badge
+  badge,
+  "morphing-geometry": morphingGeometry,
+  "aurora-border-fx": auroraBorderFX
 };
 
-// src/utils/detect.ts
-var fs = __toESM(require("fs"));
-var path = __toESM(require("path"));
-function detectProject() {
-  const cwd = process.cwd();
-  if (fs.existsSync(path.join(cwd, "next.config.ts")) || fs.existsSync(path.join(cwd, "next.config.js")) || fs.existsSync(path.join(cwd, "next.config.mjs"))) {
-    if (fs.existsSync(path.join(cwd, "app"))) {
-      return { framework: "Next.js (App Router)", componentsDir: "app/components/ui" };
+// src/commands/add.ts
+function askQuestion(query) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise(
+    (resolve4) => rl.question(query, (ans) => {
+      rl.close();
+      resolve4(ans);
+    })
+  );
+}
+async function addCommand(components, options = {}) {
+  const allRegistryKeys = Object.keys(registry);
+  let targetComponents = [...components];
+  if (options.all || targetComponents.includes("--all")) {
+    targetComponents = allRegistryKeys;
+    console.log(`
+\x1B[36m\u26A1 Adding all ${targetComponents.length} components from NexoreUI registry...\x1B[0m`);
+  }
+  if (targetComponents.length === 0) {
+    console.error("\x1B[31mError: Please specify components to add or use --all.\x1B[0m");
+    console.log("Example: npx nexoreui add button modal table --all");
+    return;
+  }
+  const project = detectProject(process.cwd());
+  console.log(`
+\x1B[34mDetected project type:\x1B[0m ${project.projectType.toUpperCase()}`);
+  console.log(`\x1B[34mDetected package manager:\x1B[0m ${project.packageManager}
+`);
+  let customComponentsDir;
+  let customUtilsFile;
+  try {
+    const configPath = path3.join(project.baseDir, "nexore.json");
+    if (fs3.existsSync(configPath)) {
+      const cfg = JSON.parse(fs3.readFileSync(configPath, "utf8"));
+      if (cfg.aliases?.components) {
+        customComponentsDir = cfg.aliases.components.replace(/^@\//, project.hasSrcDir ? "src/" : "");
+      }
+      if (cfg.aliases?.utils) {
+        const utilBase = cfg.aliases.utils.replace(/^@\//, project.hasSrcDir ? "src/" : "");
+        customUtilsFile = utilBase.endsWith(".ts") || utilBase.endsWith(".js") ? utilBase : `${utilBase}.ts`;
+      }
+    }
+  } catch {
+  }
+  const componentsToInstall = /* @__PURE__ */ new Set();
+  const invalidComponents = [];
+  const queue = [...targetComponents.filter((c) => c !== "--all")];
+  while (queue.length > 0) {
+    const compName = queue.shift();
+    const registryItem = registry[compName];
+    if (!registryItem) {
+      invalidComponents.push(compName);
+      continue;
     }
-    if (fs.existsSync(path.join(cwd, "src", "app"))) {
-      return { framework: "Next.js (App Router)", componentsDir: "src/app/components/ui" };
+    if (!componentsToInstall.has(compName)) {
+      componentsToInstall.add(compName);
+      if (registryItem.componentsDependencies) {
+        for (const dep of registryItem.componentsDependencies) {
+          queue.push(dep);
+        }
+      }
     }
-    return { framework: "Next.js (Pages Router)", componentsDir: "components/ui" };
   }
-  if (fs.existsSync(path.join(cwd, "vite.config.ts")) || fs.existsSync(path.join(cwd, "vite.config.js"))) {
-    if (fs.existsSync(path.join(cwd, "src"))) {
-      return { framework: "Vite", componentsDir: "src/components/ui" };
+  if (invalidComponents.length > 0) {
+    console.error(`\x1B[31mError: Component(s) not found in registry: ${invalidComponents.join(", ")}\x1B[0m`);
+    console.log("Run \x1B[32mnpx nexoreui list\x1B[0m to see all available components.");
+    return;
+  }
+  const defaultComponentsDir = customComponentsDir || (project.hasSrcDir ? "src/components/ui" : "components/ui");
+  const defaultUtilsFile = customUtilsFile || (project.hasSrcDir ? "src/lib/utils.ts" : "lib/utils.ts");
+  let componentsDirInput = defaultComponentsDir;
+  let utilsFileInput = defaultUtilsFile;
+  if (!options.yes && !customComponentsDir) {
+    const compPrompt = await askQuestion(`Where would you like to install the components? (default: ${defaultComponentsDir}): `);
+    componentsDirInput = compPrompt.trim() || defaultComponentsDir;
+    const utilsPrompt = await askQuestion(`Where should we create the utilities file (cn helper)? (default: ${defaultUtilsFile}): `);
+    utilsFileInput = utilsPrompt.trim() || defaultUtilsFile;
+  }
+  const absoluteComponentsDir = path3.resolve(project.baseDir, componentsDirInput);
+  const absoluteUtilsFile = path3.resolve(project.baseDir, utilsFileInput);
+  console.log(`\x1B[33mInstalling components to:\x1B[0m ${absoluteComponentsDir}`);
+  console.log(`\x1B[33mUsing cn helper from:\x1B[0m ${absoluteUtilsFile}
+`);
+  ensureDir(absoluteComponentsDir);
+  const didCreateCn = ensureCnUtil(absoluteUtilsFile);
+  if (didCreateCn) {
+    console.log(`\x1B[32m\u2714 Created utilities file (cn helper) at:\x1B[0m ${utilsFileInput}`);
+  }
+  const npmDependencies = /* @__PURE__ */ new Set();
+  npmDependencies.add("clsx");
+  npmDependencies.add("tailwind-merge");
+  npmDependencies.add("lucide-react");
+  npmDependencies.add("framer-motion");
+  for (const compName of componentsToInstall) {
+    const registryItem = registry[compName];
+    const targetPath = path3.join(absoluteComponentsDir, registryItem.fileName);
+    copyComponentFile(registryItem.content, targetPath, absoluteUtilsFile);
+    console.log(`\x1B[32m\u2714 Added component:\x1B[0m ${compName} -> ${path3.join(componentsDirInput, registryItem.fileName)}`);
+    registryItem.dependencies.forEach((dep) => npmDependencies.add(dep));
+  }
+  const depsArray = Array.from(npmDependencies);
+  let depsToInstall = [...depsArray];
+  try {
+    const packageJsonPath = path3.join(project.baseDir, "package.json");
+    if (fs3.existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(fs3.readFileSync(packageJsonPath, "utf8"));
+      const existingDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+      depsToInstall = depsArray.filter((dep) => !existingDeps[dep]);
     }
-    return { framework: "Vite", componentsDir: "components/ui" };
+  } catch {
   }
-  if (fs.existsSync(path.join(cwd, "src"))) {
-    return { framework: "React", componentsDir: "src/components/ui" };
+  if (depsToInstall.length > 0) {
+    console.log(`
+\x1B[33mInstalling external dependencies:\x1B[0m ${depsToInstall.join(", ")}...`);
+    let installCmd = "npm install";
+    if (project.packageManager === "pnpm") installCmd = "pnpm add";
+    else if (project.packageManager === "yarn") installCmd = "yarn add";
+    else if (project.packageManager === "bun") installCmd = "bun add";
+    try {
+      (0, import_child_process.execSync)(`${installCmd} ${depsToInstall.join(" ")}`, {
+        stdio: "inherit",
+        cwd: project.baseDir
+      });
+      console.log("\x1B[32m\u2714 Dependencies installed successfully!\x1B[0m");
+    } catch {
+      console.error("\x1B[31mFailed to install dependencies automatically. Please run:\x1B[0m");
+      console.log(`  ${installCmd} ${depsToInstall.join(" ")}`);
+    }
   }
-  return { framework: "Unknown", componentsDir: "components/ui" };
+  console.log(`
+\x1B[32m\x1B[1m\u{1F389} Done! ${componentsToInstall.size} NexoreUI component(s) ready to use.\x1B[0m
+`);
 }
 
-// src/utils/copy.ts
-var fs2 = __toESM(require("fs"));
-var path2 = __toESM(require("path"));
-function copyComponent(name, entry, outputDir) {
-  const filePath = path2.join(outputDir, entry.fileName);
-  const dir = path2.dirname(filePath);
-  if (!fs2.existsSync(dir)) {
-    fs2.mkdirSync(dir, { recursive: true });
+// src/commands/list.ts
+function listCommand() {
+  console.log("\n\x1B[34m\x1B[1m=== Available NexoreUI Components ===\x1B[0m\n");
+  Object.keys(registry).forEach((name) => {
+    const item = registry[name];
+    console.log(`- \x1B[32m\x1B[1m${name}\x1B[0m (${item.fileName})`);
+    if (item.dependencies.length > 0) {
+      console.log(`  \x1B[90mDependencies: ${item.dependencies.join(", ")}\x1B[0m`);
+    }
+    if (item.componentsDependencies && item.componentsDependencies.length > 0) {
+      console.log(`  \x1B[33mRequires component: ${item.componentsDependencies.join(", ")}\x1B[0m`);
+    }
+    console.log("");
+  });
+}
+
+// src/commands/init.ts
+var fs5 = __toESM(require("fs"));
+var path5 = __toESM(require("path"));
+var readline2 = __toESM(require("readline"));
+
+// src/utils/config.ts
+var fs4 = __toESM(require("fs"));
+var path4 = __toESM(require("path"));
+var import_child_process2 = require("child_process");
+var THEME_PALETTES = {
+  indigo: { light: "hsl(250 85% 50%)", dark: "hsl(250 85% 65%)", rgb: "99 60 220" },
+  violet: { light: "hsl(262.1 83.3% 57.8%)", dark: "hsl(263.4 70% 50.4%)", rgb: "139 92 246" },
+  emerald: { light: "hsl(142.1 76.2% 36.3%)", dark: "hsl(142.1 70.6% 45.3%)", rgb: "16 185 129" },
+  rose: { light: "hsl(346.8 77.2% 49.8%)", dark: "hsl(346.8 77.2% 55%)", rgb: "244 63 94" },
+  amber: { light: "hsl(37.7 92.1% 50.2%)", dark: "hsl(37.7 92.1% 55%)", rgb: "245 158 11" },
+  cyan: { light: "hsl(190.4 95% 39%)", dark: "hsl(188.7 94.5% 42.7%)", rgb: "6 182 212" },
+  slate: { light: "hsl(240 5.9% 10%)", dark: "hsl(0 0% 98%)", rgb: "244 244 245" },
+  neon: { light: "hsl(173 80% 40%)", dark: "hsl(173 100% 50%)", rgb: "0 255 220" }
+};
+function ensurePathAlias(baseDir, projectType, hasSrcDir) {
+  let updated = false;
+  const tsConfigPath = path4.join(baseDir, "tsconfig.json");
+  const jsConfigPath = path4.join(baseDir, "jsconfig.json");
+  const targetConfig = fs4.existsSync(tsConfigPath) ? tsConfigPath : fs4.existsSync(jsConfigPath) ? jsConfigPath : null;
+  if (targetConfig) {
+    try {
+      const content = fs4.readFileSync(targetConfig, "utf8");
+      const parsed = JSON.parse(content);
+      parsed.compilerOptions = parsed.compilerOptions || {};
+      parsed.compilerOptions.baseUrl = parsed.compilerOptions.baseUrl || ".";
+      parsed.compilerOptions.paths = parsed.compilerOptions.paths || {};
+      const aliasTarget = hasSrcDir ? ["./src/*"] : ["./*"];
+      if (!parsed.compilerOptions.paths["@/*"]) {
+        parsed.compilerOptions.paths["@/*"] = aliasTarget;
+        fs4.writeFileSync(targetConfig, JSON.stringify(parsed, null, 2), "utf8");
+        updated = true;
+      }
+    } catch {
+    }
   }
-  fs2.writeFileSync(filePath, entry.content, "utf-8");
+  if (projectType === "vite") {
+    const viteConfigFiles = ["vite.config.ts", "vite.config.js", "vite.config.mjs"];
+    for (const fileName of viteConfigFiles) {
+      const vitePath = path4.join(baseDir, fileName);
+      if (fs4.existsSync(vitePath)) {
+        let viteContent = fs4.readFileSync(vitePath, "utf8");
+        if (!viteContent.includes("alias") && !viteContent.includes("'@'")) {
+          const hasPathImport = viteContent.includes("from 'path'") || viteContent.includes('from "path"');
+          let headerAdditions = "";
+          if (!hasPathImport) {
+            headerAdditions += `import path from 'path'
+import { fileURLToPath } from 'url'
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+`;
+          }
+          if (viteContent.includes("defineConfig({")) {
+            viteContent = headerAdditions + viteContent.replace(
+              "defineConfig({",
+              `defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './${hasSrcDir ? "src" : "."}'),
+    },
+  },`
+            );
+            fs4.writeFileSync(vitePath, viteContent, "utf8");
+            updated = true;
+          }
+        }
+        break;
+      }
+    }
+  }
+  return updated;
+}
+function injectThemeCss(baseDir, cssRelativePath, themeName, radiusValue) {
+  const cssAbsolutePath = path4.join(baseDir, cssRelativePath);
+  const palette = THEME_PALETTES[themeName] || THEME_PALETTES.cyan;
+  const radius = typeof radiusValue === "number" ? radiusValue : parseFloat(radiusValue) || 1;
+  const themeBlock = `
+@source "../node_modules/nexoreui/dist/**/*.{js,mjs}";
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-border: var(--border);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --font-sans: system-ui, -apple-system, sans-serif;
 }
 
-// src/commands/add.ts
-async function addCommand(components, options) {
-  if (components.length === 0) {
-    console.error("\x1B[31mPlease specify at least one component to add.\x1B[0m");
-    console.log("Example: npx nexoreui add button modal card");
-    console.log("Run \x1B[32mnpx nexoreui list\x1B[0m to see all available components.");
-    process.exit(1);
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(240 10% 3.9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 10% 3.9%);
+  --primary: ${palette.light};
+  --primary-foreground: hsl(0 0% 100%);
+  --border: hsl(240 5.9% 90%);
+  --radius: ${radius}rem;
+}
+
+.dark {
+  --background: hsl(240 10% 3.9%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(240 10% 3.9%);
+  --card-foreground: hsl(0 0% 98%);
+  --primary: ${palette.dark};
+  --primary-foreground: hsl(0 0% 100%);
+  --border: hsl(240 3.7% 15.9%);
+  --radius: ${radius}rem;
+}
+`;
+  if (fs4.existsSync(cssAbsolutePath)) {
+    const existingContent = fs4.readFileSync(cssAbsolutePath, "utf8");
+    if (!existingContent.includes("--color-primary") && !existingContent.includes("nexoreui/dist")) {
+      fs4.writeFileSync(cssAbsolutePath, existingContent.trim() + "\n" + themeBlock, "utf8");
+      return true;
+    }
+  } else {
+    const cssDir = path4.dirname(cssAbsolutePath);
+    if (!fs4.existsSync(cssDir)) fs4.mkdirSync(cssDir, { recursive: true });
+    fs4.writeFileSync(cssAbsolutePath, `@import "tailwindcss";
+` + themeBlock, "utf8");
+    return true;
   }
-  const invalid = components.filter((c) => !registry[c]);
-  if (invalid.length > 0) {
-    console.error(`\x1B[31mUnknown component(s): ${invalid.join(", ")}\x1B[0m`);
-    console.log("Run \x1B[32mnpx nexoreui list\x1B[0m to see all available components.");
-    process.exit(1);
+  return false;
+}
+function installPeerDependencies(baseDir, packageManager, dependencies = ["clsx", "tailwind-merge", "lucide-react", "framer-motion"]) {
+  try {
+    const packageJsonPath = path4.join(baseDir, "package.json");
+    let missingDeps = [...dependencies];
+    if (fs4.existsSync(packageJsonPath)) {
+      const pkg = JSON.parse(fs4.readFileSync(packageJsonPath, "utf8"));
+      const installed = { ...pkg.dependencies, ...pkg.devDependencies };
+      missingDeps = dependencies.filter((dep) => !installed[dep]);
+    }
+    if (missingDeps.length === 0) return true;
+    let installCmd = "npm install";
+    if (packageManager === "pnpm") installCmd = "pnpm add";
+    else if (packageManager === "yarn") installCmd = "yarn add";
+    else if (packageManager === "bun") installCmd = "bun add";
+    console.log(`
+\x1B[33m\u26A1 Installing peer dependencies:\x1B[0m ${missingDeps.join(", ")}...`);
+    (0, import_child_process2.execSync)(`${installCmd} ${missingDeps.join(" ")}`, {
+      stdio: "inherit",
+      cwd: baseDir
+    });
+    return true;
+  } catch (err) {
+    console.warn("\x1B[33mWarning: Automatic peer dependency installation skipped.\x1B[0m");
+    return false;
   }
-  const projectInfo = detectProject();
-  const outputDir = path3.resolve(process.cwd(), projectInfo.componentsDir);
+}
+
+// src/commands/init.ts
+function askQuestion2(query) {
+  const rl = readline2.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise(
+    (resolve4) => rl.question(query, (ans) => {
+      rl.close();
+      resolve4(ans);
+    })
+  );
+}
+async function initCommand(options = {}) {
   console.log(`
-\x1B[34m\x1B[1mNexoreUI CLI\x1B[0m`);
-  console.log(`Detected: \x1B[36m${projectInfo.framework}\x1B[0m project`);
-  console.log(`Output:   \x1B[36m${outputDir}\x1B[0m
+\x1B[36m\x1B[1m=== Initializing NexoreUI in your project ===\x1B[0m
 `);
-  if (!fs3.existsSync(outputDir)) {
-    fs3.mkdirSync(outputDir, { recursive: true });
-  }
-  let successCount = 0;
-  for (const name of components) {
-    const entry = registry[name];
-    if (!entry) continue;
-    try {
-      copyComponent(name, entry, outputDir);
-      console.log(`  \x1B[32m\u2713\x1B[0m ${name} \u2192 ${entry.fileName}`);
-      successCount++;
-    } catch (err) {
-      console.error(`  \x1B[31m\u2717\x1B[0m ${name}: ${err.message}`);
+  const project = detectProject(process.cwd());
+  console.log(`\x1B[32m\u2714 Detected Project:\x1B[0m ${project.projectType.toUpperCase()} (${project.packageManager})`);
+  let theme = options.theme || "cyan";
+  let radius = options.radius || "1.0";
+  const defaultComponentsDir = project.hasSrcDir ? "src/components/ui" : "components/ui";
+  const defaultUtilsFile = project.hasSrcDir ? "src/lib/utils.ts" : "lib/utils.ts";
+  const defaultCssFile = project.projectType === "next" ? project.hasSrcDir ? "src/app/globals.css" : "app/globals.css" : project.hasSrcDir ? "src/index.css" : "src/index.css";
+  let componentsDir = defaultComponentsDir;
+  let utilsFile = defaultUtilsFile;
+  if (!options.yes) {
+    if (!options.theme) {
+      const themeAns = await askQuestion2(`Which color theme would you like to use? (cyan, indigo, violet, emerald, rose, amber, slate, neon) [default: cyan]: `);
+      if (themeAns.trim() && THEME_PALETTES[themeAns.trim().toLowerCase()]) {
+        theme = themeAns.trim().toLowerCase();
+      }
     }
-  }
-  const allDeps = /* @__PURE__ */ new Set();
-  for (const name of components) {
-    const entry = registry[name];
-    if (entry?.dependencies) {
-      entry.dependencies.forEach((d) => allDeps.add(d));
+    if (!options.radius) {
+      const radiusAns = await askQuestion2(`Which radius value would you like to use? (0, 0.3, 0.5, 0.75, 1.0) [default: 1.0]: `);
+      if (radiusAns.trim()) {
+        radius = radiusAns.trim();
+      }
     }
+    const compAns = await askQuestion2(`Where should UI components be created? (default: ${defaultComponentsDir}): `);
+    if (compAns.trim()) componentsDir = compAns.trim();
+    const utilsAns = await askQuestion2(`Where should utility functions (cn helper) be placed? (default: ${defaultUtilsFile}): `);
+    if (utilsAns.trim()) utilsFile = utilsAns.trim();
+  }
+  const absoluteComponentsDir = path5.resolve(project.baseDir, componentsDir);
+  const absoluteUtilsFile = path5.resolve(project.baseDir, utilsFile);
+  ensureDir(absoluteComponentsDir);
+  ensureCnUtil(absoluteUtilsFile);
+  const didUpdateAlias = ensurePathAlias(project.baseDir, project.projectType, project.hasSrcDir);
+  if (didUpdateAlias) {
+    console.log(`\x1B[32m\u2714\x1B[0m Configured path alias \x1B[1m'@/*'\x1B[0m in project config`);
   }
+  const didInjectCss = injectThemeCss(project.baseDir, defaultCssFile, theme, radius);
+  if (didInjectCss) {
+    console.log(`\x1B[32m\u2714\x1B[0m Injected Tailwind CSS v4 @theme tokens into \x1B[1m${defaultCssFile}\x1B[0m`);
+  }
+  installPeerDependencies(project.baseDir, project.packageManager);
+  const config = {
+    $schema: "https://nexoreui.site/schema.json",
+    style: "default",
+    theme,
+    radius: Number(radius),
+    framework: project.projectType,
+    packageManager: project.packageManager,
+    font: "system",
+    density: "default",
+    animation: "energetic",
+    defaultMode: "light",
+    tailwind: {
+      config: "tailwind.config.js",
+      css: defaultCssFile,
+      baseColor: "zinc",
+      cssVariables: true
+    },
+    aliases: {
+      components: `@/${componentsDir.replace(/^src\//, "")}`,
+      utils: `@/${utilsFile.replace(/^src\//, "").replace(/\.(ts|js)$/, "")}`
+    }
+  };
+  const configPath = path5.join(project.baseDir, "nexore.json");
+  fs5.writeFileSync(configPath, JSON.stringify(config, null, 2), "utf8");
+  console.log(`\x1B[32m\u2714\x1B[0m Generated \x1B[1mnexore.json\x1B[0m (Theme: ${theme}, Radius: ${radius}rem)`);
+  console.log(`\x1B[32m\u2714\x1B[0m Utilities ready at \x1B[1m${utilsFile}\x1B[0m`);
+  console.log(`\x1B[32m\u2714\x1B[0m Components directory ready at \x1B[1m${componentsDir}\x1B[0m`);
   console.log(`
-\x1B[32m${successCount} component(s) added successfully.\x1B[0m`);
-  if (allDeps.size > 0) {
-    console.log(`
-Install peer dependencies:`);
-    console.log(`  \x1B[36mpnpm add ${Array.from(allDeps).join(" ")}\x1B[0m
+\x1B[32m\x1B[1m\u{1F389} NexoreUI initialized successfully! You can now add components:\x1B[0m`);
+  console.log(`  \x1B[36mnpx nexoreui add button card modal table --all\x1B[0m
 `);
-  }
 }
 
-// src/commands/list.ts
-function listCommand() {
-  const names = Object.keys(registry);
+// src/commands/create.ts
+var fs6 = __toESM(require("fs"));
+var path6 = __toESM(require("path"));
+var import_child_process3 = require("child_process");
+async function createCommand(projectName, options = {}) {
+  const name = projectName || "my-nexore-app";
+  const targetDir = path6.resolve(process.cwd(), name);
   console.log(`
-\x1B[34m\x1B[1mNexoreUI \u2014 Available Components\x1B[0m
+\x1B[36m\x1B[1m\u{1F680} Creating a new NexoreUI Project:\x1B[0m \x1B[32m${name}\x1B[0m
 `);
-  names.forEach((name) => {
-    const entry = registry[name];
-    console.log(`  \x1B[32m${name.padEnd(15)}\x1B[0m \u2192 ${entry.fileName}`);
+  if (fs6.existsSync(targetDir) && fs6.readdirSync(targetDir).length > 0) {
+    console.error(`\x1B[31mError: Target directory ${name} already exists and is not empty.\x1B[0m`);
+    return;
+  }
+  console.log(`\x1B[33m\u26A1 Scaffolding React + Vite + Tailwind CSS template...\x1B[0m`);
+  try {
+    (0, import_child_process3.execSync)(`npm create vite@latest ${name} -- --template react-ts`, { stdio: "inherit" });
+  } catch (err) {
+    console.error(`\x1B[31mFailed to scaffold Vite project.\x1B[0m`);
+    return;
+  }
+  process.chdir(targetDir);
+  console.log(`
+\x1B[33m\u{1F4E6} Installing NexoreUI, Tailwind CSS, and core packages...\x1B[0m`);
+  (0, import_child_process3.execSync)(`npm install nexoreui lucide-react clsx tailwind-merge framer-motion @tailwindcss/vite tailwindcss`, {
+    stdio: "inherit"
   });
+  await initCommand({
+    yes: true,
+    theme: options.theme || "cyan",
+    radius: options.radius || "1.0"
+  });
+  console.log(`
+\x1B[32m\x1B[1m\u2728 Project ${name} is ready!\x1B[0m`);
   console.log(`
-\x1B[90mTotal: ${names.length} components\x1B[0m`);
-  console.log(`Usage: \x1B[36mnpx nexoreui add ${names[0]}\x1B[0m
+To get started:
+`);
+  console.log(`  \x1B[36mcd ${name}\x1B[0m`);
+  console.log(`  \x1B[36mnpx nexoreui add button card modal table --all\x1B[0m`);
+  console.log(`  \x1B[36mnpm run dev\x1B[0m
 `);
 }
 
@@ -958,20 +2747,59 @@ async function main() {
     printHelp();
     return;
   }
-  if (command === "list") {
+  if (command === "create") {
+    const projectName = args[1] && !args[1].startsWith("-") ? args[1] : void 0;
+    let theme;
+    let radius;
+    for (let i = 1; i < args.length; i++) {
+      const arg = args[i];
+      if (arg === "--theme" && args[i + 1]) {
+        theme = args[++i];
+      } else if (arg.startsWith("--theme=")) {
+        theme = arg.split("=")[1];
+      } else if (arg === "--radius" && args[i + 1]) {
+        radius = args[++i];
+      } else if (arg.startsWith("--radius=")) {
+        radius = arg.split("=")[1];
+      }
+    }
+    await createCommand(projectName, { theme, radius });
+  } else if (command === "init") {
+    let yes = false;
+    let theme;
+    let radius;
+    for (let i = 1; i < args.length; i++) {
+      const arg = args[i];
+      if (arg === "-y" || arg === "--yes") {
+        yes = true;
+      } else if (arg === "--theme" && args[i + 1]) {
+        theme = args[++i];
+      } else if (arg.startsWith("--theme=")) {
+        theme = arg.split("=")[1];
+      } else if (arg === "--radius" && args[i + 1]) {
+        radius = args[++i];
+      } else if (arg.startsWith("--radius=")) {
+        radius = arg.split("=")[1];
+      }
+    }
+    await initCommand({ yes, theme, radius });
+  } else if (command === "list") {
     listCommand();
   } else if (command === "add") {
     const components = [];
     let yes = false;
+    let all = false;
     for (let i = 1; i < args.length; i++) {
       const arg = args[i];
       if (arg === "-y" || arg === "--yes") {
         yes = true;
+      } else if (arg === "--all" || arg === "-a") {
+        all = true;
       } else if (!arg.startsWith("-")) {
         components.push(arg);
       }
     }
-    await addCommand(components, { yes });
+    await addCommand(components, { yes, all });
   } else {
     console.error(`\x1B[31mUnknown command: ${command}\x1B[0m`);
     printHelp();
@@ -979,16 +2807,23 @@ async function main() {
 }
 function printHelp() {
   console.log(`
-\x1B[34m\x1B[1mNexoreUI CLI\x1B[0m
+\x1B[36m\x1B[1mNexoreUI CLI\x1B[0m
+\x1B[90mModern, animated, production-ready React components with Tailwind CSS v4\x1B[0m
+
 Usage:
   npx nexoreui [command] [options]
 
 Commands:
-  \x1B[32madd [components...]\x1B[0m  Add components to your project (e.g., button, modal, card, alert, badge)
-  \x1B[32mlist\x1B[0m                 List all available components
+  \x1B[32mcreate [name]\x1B[0m        Create a new fully configured NexoreUI starter project
+  \x1B[32minit\x1B[0m                 Initialize NexoreUI in your project (configure theme, aliases, and CSS)
+  \x1B[32madd [components...]\x1B[0m  Add components to your project (use --all to install all 40+ components)
+  \x1B[32mlist\x1B[0m                 List all available components in registry
 
 Options:
-  \x1B[33m-y, --yes\x1B[0m            Skip prompts and use default paths
+  \x1B[33m--theme <name>\x1B[0m       Set color palette (cyan, indigo, violet, emerald, rose, amber, slate, neon)
+  \x1B[33m--radius <val>\x1B[0m       Set border radius (0, 0.3, 0.5, 0.75, 1.0)
+  \x1B[33m--all, -a\x1B[0m            Install all available components at once
+  \x1B[33m-y, --yes\x1B[0m            Skip prompts and use defaults automatically
   \x1B[33m-h, --help\x1B[0m           Show help information
   `);
 }