alexui 1.0.0

package/components/TimelineGSAP.tsx

@@ -0,0 +1,164 @@
+import React, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export interface TimelineItem {
+  id: string | number;
+  date: string;
+  title: string;
+  description: string;
+}
+
+export interface TimelineGSAPProps {
+  items: TimelineItem[];
+  className?: string;
+}
+
+export const TimelineGSAP: React.FC<TimelineGSAPProps> = ({ items, className = '' }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const progressBarRef = useRef<HTMLDivElement>(null);
+  const cardRefs = useRef<HTMLDivElement[]>([]);
+  const dotRefs = useRef<HTMLDivElement[]>([]);
+
+  useEffect(() => {
+    if (!containerRef.current || !progressBarRef.current) return;
+
+    const cards = cardRefs.current.filter(Boolean);
+    const dots = dotRefs.current.filter(Boolean);
+
+    const ctx = gsap.context(() => {
+      // 1. Progress Bar Fill Animation linked to scroll
+      gsap.fromTo(
+        progressBarRef.current,
+        { scaleY: 0 },
+        {
+          scaleY: 1,
+          ease: 'none',
+          scrollTrigger: {
+            trigger: containerRef.current,
+            start: 'top 30%',
+            end: 'bottom 70%',
+            scrub: true,
+          }
+        }
+      );
+
+      // 2. Milestone Cards & Dots reveal animations
+      cards.forEach((card, idx) => {
+        const dot = dots[idx];
+        const isLeft = idx % 2 === 0;
+
+        // Slide in from left or right depending on column
+        gsap.fromTo(
+          card,
+          {
+            opacity: 0,
+            x: isLeft ? -50 : 50,
+            filter: 'blur(4px)'
+          },
+          {
+            opacity: 1,
+            x: 0,
+            filter: 'blur(0px)',
+            duration: 0.8,
+            scrollTrigger: {
+              trigger: card,
+              start: 'top 80%',
+              toggleActions: 'play none none reverse',
+            }
+          }
+        );
+
+        // Scale up indicator dot
+        if (dot) {
+          gsap.fromTo(
+            dot,
+            { scale: 0, opacity: 0 },
+            {
+              scale: 1,
+              opacity: 1,
+              duration: 0.4,
+              scrollTrigger: {
+                trigger: dot,
+                start: 'top 80%',
+                toggleActions: 'play none none reverse'
+              }
+            }
+          );
+        }
+      });
+
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, [items]);
+
+  return (
+    <div ref={containerRef} className={`relative w-full max-w-4xl mx-auto py-12 px-4 ${className}`}>
+      
+      {/* Central Axis Timeline Line */}
+      <div className="absolute left-1/2 transform -translate-x-1/2 top-0 bottom-0 w-[2px] bg-border-app/40 rounded-full">
+        {/* Animated fill indicator */}
+        <div
+          ref={progressBarRef}
+          className="w-full h-full bg-gradient-to-b from-accent via-indigo-500 to-pink-500 origin-top rounded-full"
+        />
+      </div>
+
+      {/* Timeline entries list */}
+      <div className="relative flex flex-col gap-16 overflow-visible">
+        {items.map((item, idx) => {
+          const isLeft = idx % 2 === 0;
+          return (
+            <div
+              key={item.id}
+              className={`flex w-full overflow-visible items-center justify-between ${
+                isLeft ? 'flex-row' : 'flex-row-reverse'
+              }`}
+            >
+              
+              {/* Milestone card side wrapper */}
+              <div className="w-[45%] flex flex-col items-stretch overflow-visible">
+                <div
+                  ref={(el) => {
+                    if (el) cardRefs.current[idx] = el;
+                  }}
+                  className={`p-6 rounded-2xl glass bg-bg-card border border-border-app shadow-md transition-colors duration-300 relative ${
+                    isLeft ? 'text-right' : 'text-left'
+                  }`}
+                >
+                  <span className="text-xs font-mono font-bold text-accent tracking-wider block mb-1">
+                    {item.date}
+                  </span>
+                  <h3 className="font-extrabold text-base text-text-main mb-2">
+                    {item.title}
+                  </h3>
+                  <p className="text-xs text-text-muted leading-relaxed">
+                    {item.description}
+                  </p>
+                </div>
+              </div>
+
+              {/* Indicator Dot center wrapper */}
+              <div className="relative z-10 w-[10%] flex justify-center items-center">
+                <div
+                  ref={(el) => {
+                    if (el) dotRefs.current[idx] = el;
+                  }}
+                  className="w-5 h-5 rounded-full bg-bg-card border-4 border-accent flex items-center justify-center shadow-lg transition-transform duration-300"
+                >
+                  <div className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
+                </div>
+              </div>
+
+              {/* Empty placeholder spacer side */}
+              <div className="w-[45%]" />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/components/ToastSystem.tsx

@@ -0,0 +1,110 @@
+/* eslint-disable react-refresh/only-export-components */
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
+
+export type ToastType = 'success' | 'error' | 'info';
+
+export interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+interface ToastContextType {
+  toast: (message: string, type?: ToastType, duration?: number) => void;
+  removeToast: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = useCallback((message: string, type: ToastType = 'info', duration = 3000) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { id, message, type, duration }]);
+    
+    if (duration > 0) {
+      setTimeout(() => {
+        removeToast(id);
+      }, duration);
+    }
+  }, [removeToast]);
+
+  return (
+    <ToastContext.Provider value={{ toast, removeToast }}>
+      {children}
+      
+      {/* Toast Portal Container */}
+      <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-3 max-w-sm w-full pointer-events-none">
+        <AnimatePresence>
+          {toasts.map((t) => (
+            <ToastItem key={t.id} toast={t} onClose={removeToast} />
+          ))}
+        </AnimatePresence>
+      </div>
+    </ToastContext.Provider>
+  );
+};
+
+interface ToastItemProps {
+  toast: Toast;
+  onClose: (id: string) => void;
+}
+
+const ToastItem: React.FC<ToastItemProps> = ({ toast, onClose }) => {
+  const { id, message, type } = toast;
+
+  const iconMap = {
+    success: <CheckCircle className="w-5 h-5 text-success" />,
+    error: <AlertCircle className="w-5 h-5 text-error" />,
+    info: <Info className="w-5 h-5 text-info" />
+  };
+
+  const borderMap = {
+    success: 'border-success/20 dark:border-success/30',
+    error: 'border-error/20 dark:border-error/30',
+    info: 'border-info/20 dark:border-info/30'
+  };
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 15, scale: 0.9 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.85, transition: { duration: 0.15 } }}
+      transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+      className={`pointer-events-auto flex items-center justify-between gap-3 p-4 rounded-xl glass bg-bg-card/90 border shadow-lg ${borderMap[type]}`}
+    >
+      <div className="flex items-center gap-3">
+        <div className="flex-shrink-0">
+          {iconMap[type]}
+        </div>
+        <p className="text-xs font-semibold text-text-main leading-snug">
+          {message}
+        </p>
+      </div>
+      <button
+        onClick={() => onClose(id)}
+        className="flex-shrink-0 text-text-muted hover:text-text-main p-0.5 rounded-lg transition-colors cursor-pointer"
+        aria-label="Cerrar notificación"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </motion.div>
+  );
+};

package/components/ToggleButton.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export interface ToggleOption {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface ToggleButtonProps {
+  options: ToggleOption[];
+  value: string;
+  onChange: (value: string) => void;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  className?: string;
+}
+
+const sizeStyles = {
+  sm: 'p-1 gap-0.5 text-[10px]',
+  md: 'p-1.5 gap-1 text-xs',
+  lg: 'p-2 gap-1.5 text-sm'
+};
+
+const itemPadding = {
+  sm: 'px-2.5 py-1',
+  md: 'px-3.5 py-1.5',
+  lg: 'px-4 py-2'
+};
+
+export const ToggleButton: React.FC<ToggleButtonProps> = ({
+  options,
+  value,
+  onChange,
+  size = 'md',
+  disabled = false,
+  className = ''
+}) => {
+  return (
+    <div
+      className={`inline-flex items-center rounded-xl bg-bg-app/60 border border-border-app ${sizeStyles[size]} ${
+        disabled ? 'opacity-40 cursor-not-allowed' : ''
+      } ${className}`}
+      role="group"
+    >
+      {options.map((opt) => {
+        const isSelected = value === opt.value;
+        const isDisabled = disabled || opt.disabled;
+
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            disabled={isDisabled}
+            onClick={() => !isDisabled && onChange(opt.value)}
+            className={`relative inline-flex items-center gap-1.5 rounded-lg font-bold transition-colors ${
+              itemPadding[size]
+            } ${isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${
+              isSelected ? 'text-white' : 'text-text-muted hover:text-text-main'
+            }`}
+          >
+            {isSelected && (
+              <motion.div
+                layoutId="toggle-button-active"
+                className="absolute inset-0 bg-accent rounded-lg shadow-[0_0_12px_var(--color-accent-glow)]"
+                transition={{ type: 'spring' as const, stiffness: 400, damping: 30 }}
+              />
+            )}
+            <span className="relative z-10 flex items-center gap-1.5">
+              {opt.icon}
+              {opt.label}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/components/Tooltip.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'auto';
+
+export interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  placement?: TooltipPlacement;
+  delay?: number;
+  className?: string;
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  placement = 'top',
+  delay = 200,
+  className = ''
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [activePlacement, setActivePlacement] = useState<'top' | 'bottom' | 'left' | 'right'>('top');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    
+    // Calculate position if "auto" is selected
+    if (containerRef.current) {
+      if (placement === 'auto') {
+        const rect = containerRef.current.getBoundingClientRect();
+        const topSpace = rect.top;
+        const bottomSpace = window.innerHeight - rect.bottom;
+        const leftSpace = rect.left;
+        const rightSpace = window.innerWidth - rect.right;
+
+        // Choose the side with the maximum pixel clearance in the viewport
+        const spaces = [
+          { side: 'top', space: topSpace },
+          { side: 'bottom', space: bottomSpace },
+          { side: 'left', space: leftSpace },
+          { side: 'right', space: rightSpace }
+        ];
+        spaces.sort((a, b) => b.space - a.space);
+        setActivePlacement(spaces[0].side as 'top' | 'bottom' | 'left' | 'right');
+      } else {
+        setActivePlacement(placement);
+      }
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsVisible(false);
+  };
+
+  // Styles mapping based on selected active placement
+  const placementClasses = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2.5',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2.5',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2.5',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2.5'
+  };
+
+  const arrowClasses = {
+    top: 'top-full left-1/2 -translate-x-1/2 border-t-bg-card border-x-transparent border-b-transparent -mt-[1px]',
+    bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-bg-card border-x-transparent border-t-transparent -mb-[1px]',
+    left: 'left-full top-1/2 -translate-y-1/2 border-l-bg-card border-y-transparent border-r-transparent -ml-[1px]',
+    right: 'right-full top-1/2 -translate-y-1/2 border-r-bg-card border-y-transparent border-l-transparent -mr-[1px]'
+  };
+
+  // Motion animation presets
+  const animationVariants = {
+    hidden: { opacity: 0, scale: 0.95 },
+    visible: { 
+      opacity: 1, 
+      scale: 1,
+      transition: { type: 'spring' as const, stiffness: 400, damping: 22 }
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleMouseEnter}
+      onBlur={handleMouseLeave}
+      className={`relative inline-block ${className}`}
+    >
+      {children}
+
+      <AnimatePresence>
+        {isVisible && (
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={animationVariants}
+            className={`absolute z-100 pointer-events-none select-none ${placementClasses[activePlacement]}`}
+          >
+            {/* Tooltip Content box */}
+            <div className="bg-bg-card text-text-main text-xs font-bold px-3 py-2 rounded-lg border border-border-app shadow-xl whitespace-nowrap relative">
+              {content}
+              
+              {/* Tooltip Arrow tip */}
+              <div 
+                className={`absolute w-0 h-0 border-[5px] ${arrowClasses[activePlacement]}`}
+              />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

package/components/Tree.tsx

@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronRight, Folder, FolderOpen, File } from 'lucide-react';
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  children?: TreeNode[];
+  icon?: React.ReactNode;
+}
+
+export interface TreeProps {
+  nodes: TreeNode[];
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+  defaultExpandedIds?: string[];
+  disabled?: boolean;
+  className?: string;
+}
+
+interface TreeItemProps {
+  node: TreeNode;
+  depth: number;
+  selectedId?: string;
+  expandedIds: Set<string>;
+  onToggle: (id: string) => void;
+  onSelect?: (id: string) => void;
+  disabled?: boolean;
+}
+
+const TreeItem: React.FC<TreeItemProps> = ({
+  node,
+  depth,
+  selectedId,
+  expandedIds,
+  onToggle,
+  onSelect,
+  disabled
+}) => {
+  const hasChildren = node.children && node.children.length > 0;
+  const isExpanded = expandedIds.has(node.id);
+  const isSelected = selectedId === node.id;
+
+  return (
+    <div className="flex flex-col">
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => {
+          if (hasChildren) onToggle(node.id);
+          onSelect?.(node.id);
+        }}
+        className={`flex items-center gap-2 py-1.5 px-2 rounded-lg text-left text-sm font-semibold transition-all w-full ${
+          disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'
+        } ${isSelected ? 'bg-accent/10 text-accent' : 'text-text-muted hover:bg-bg-app hover:text-text-main'}`}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+      >
+        {hasChildren ? (
+          <motion.span
+            animate={{ rotate: isExpanded ? 90 : 0 }}
+            transition={{ type: 'spring' as const, stiffness: 400, damping: 24 }}
+            className="flex-shrink-0"
+          >
+            <ChevronRight className="w-3.5 h-3.5" />
+          </motion.span>
+        ) : (
+          <span className="w-3.5 flex-shrink-0" />
+        )}
+        <span className="flex-shrink-0 text-text-muted">
+          {node.icon ?? (hasChildren ? (isExpanded ? <FolderOpen className="w-4 h-4 text-accent" /> : <Folder className="w-4 h-4" />) : <File className="w-4 h-4" />)}
+        </span>
+        <span className="truncate">{node.label}</span>
+      </button>
+
+      <AnimatePresence initial={false}>
+        {hasChildren && isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ type: 'spring' as const, stiffness: 350, damping: 28 }}
+            className="overflow-hidden"
+          >
+            {node.children!.map((child) => (
+              <TreeItem
+                key={child.id}
+                node={child}
+                depth={depth + 1}
+                selectedId={selectedId}
+                expandedIds={expandedIds}
+                onToggle={onToggle}
+                onSelect={onSelect}
+                disabled={disabled}
+              />
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export const Tree: React.FC<TreeProps> = ({
+  nodes,
+  selectedId,
+  onSelect,
+  defaultExpandedIds = [],
+  disabled = false,
+  className = ''
+}) => {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(defaultExpandedIds));
+
+  const handleToggle = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  return (
+    <div className={`flex flex-col gap-0.5 min-w-[220px] ${className}`} role="tree">
+      {nodes.map((node) => (
+        <TreeItem
+          key={node.id}
+          node={node}
+          depth={0}
+          selectedId={selectedId}
+          expandedIds={expandedIds}
+          onToggle={handleToggle}
+          onSelect={onSelect}
+          disabled={disabled}
+        />
+      ))}
+    </div>
+  );
+};

package/dist/commands/add.d.ts

@@ -0,0 +1,7 @@
+export interface AddOptions {
+    overwrite?: boolean;
+    yes?: boolean;
+    /** Modo embebido en TUI: sin intro/outro y sin exit en cancelación */
+    embed?: boolean;
+}
+export declare function runAdd(componentArgs: string[], cwd?: string, options?: AddOptions): Promise<void>;