alexui 1.0.0

package/components/TextEditor.tsx

@@ -0,0 +1,329 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { 
+  Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, 
+  List, ListOrdered, Link, Image, Trash2 
+} from 'lucide-react';
+
+export interface TextEditorProps {
+  value?: string;
+  onChange?: (html: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const TextEditor: React.FC<TextEditorProps> = ({
+  value = '',
+  onChange,
+  placeholder = 'Comienza a escribir aquí...',
+  disabled = false,
+  className = ''
+}) => {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [wordCount, setWordCount] = useState(0);
+  const [charCount, setCharCount] = useState(0);
+  const [activeFormats, setActiveFormats] = useState({
+    bold: false,
+    italic: false,
+    underline: false,
+    alignLeft: false,
+    alignCenter: false,
+    alignRight: false
+  });
+
+  // Sync value from parent if it changes and is different from editor's innerHTML
+  useEffect(() => {
+    if (editorRef.current && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value;
+      updateCounts();
+    }
+  }, [value]);
+
+  const updateCounts = () => {
+    if (!editorRef.current) return;
+    const text = editorRef.current.innerText || '';
+    setCharCount(text.replace(/\n/g, '').length);
+    const words = text.trim().split(/\s+/).filter(Boolean);
+    setWordCount(words.length);
+  };
+
+  const executeCommand = (command: string, arg: string = '') => {
+    if (disabled) return;
+    document.execCommand(command, false, arg);
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+    checkActiveFormats();
+    handleInput();
+  };
+
+  const handleInput = () => {
+    if (!editorRef.current) return;
+    const html = editorRef.current.innerHTML;
+    updateCounts();
+    if (onChange) {
+      onChange(html);
+    }
+  };
+
+  const checkActiveFormats = () => {
+    setActiveFormats({
+      bold: document.queryCommandState('bold'),
+      italic: document.queryCommandState('italic'),
+      underline: document.queryCommandState('underline'),
+      alignLeft: document.queryCommandState('justifyLeft'),
+      alignCenter: document.queryCommandState('justifyCenter'),
+      alignRight: document.queryCommandState('justifyRight')
+    });
+  };
+
+  const handleLinkInsert = () => {
+    const url = prompt('Ingresa la URL del enlace:');
+    if (url) {
+      executeCommand('createLink', url);
+    }
+  };
+
+  const handleImageInsert = () => {
+    const url = prompt('Ingresa la URL de la imagen:');
+    if (url) {
+      executeCommand('insertImage', url);
+    }
+  };
+
+  const handleFormatClear = () => {
+    executeCommand('removeFormat');
+  };
+
+  return (
+    <div className={`relative w-full flex flex-col bg-bg-card/40 border border-border-app/40 rounded-2xl overflow-hidden transition-all duration-300 ${
+      isFocused ? 'border-accent shadow-[0_0_12px_var(--color-accent)]' : ''
+    } ${disabled ? 'opacity-40 cursor-not-allowed select-none pointer-events-none' : ''} ${className}`}>
+      
+      {/* Editor Toolbar */}
+      <div className="flex flex-wrap items-center gap-1.5 p-2 bg-bg-app/40 border-b border-border-app/30 select-none">
+        
+        {/* Formatting actions */}
+        <button
+          type="button"
+          onClick={() => executeCommand('bold')}
+          className={`p-2 rounded-lg cursor-pointer transition-colors ${
+            activeFormats.bold ? 'bg-accent/20 text-accent font-black' : 'text-text-muted hover:text-text-main'
+          }`}
+          title="Negrita"
+        >
+          <Bold size={14} />
+        </button>
+        <button
+          type="button"
+          onClick={() => executeCommand('italic')}
+          className={`p-2 rounded-lg cursor-pointer transition-colors ${
+            activeFormats.italic ? 'bg-accent/20 text-accent font-black' : 'text-text-muted hover:text-text-main'
+          }`}
+          title="Cursiva"
+        >
+          <Italic size={14} />
+        </button>
+        <button
+          type="button"
+          onClick={() => executeCommand('underline')}
+          className={`p-2 rounded-lg cursor-pointer transition-colors ${
+            activeFormats.underline ? 'bg-accent/20 text-accent font-black' : 'text-text-muted hover:text-text-main'
+          }`}
+          title="Subrayado"
+        >
+          <Underline size={14} />
+        </button>
+
+        <span className="w-[1px] h-4 bg-border-app/30 mx-1" />
+
+        {/* Alignment actions */}
+        <button
+          type="button"
+          onClick={() => executeCommand('justifyLeft')}
+          className={`p-2 rounded-lg cursor-pointer transition-colors ${
+            activeFormats.alignLeft ? 'bg-accent/20 text-accent' : 'text-text-muted hover:text-text-main'
+          }`}
+          title="Alinear Izquierda"
+        >
+          <AlignLeft size={14} />
+        </button>
+        <button
+          type="button"
+          onClick={() => executeCommand('justifyCenter')}
+          className={`p-2 rounded-lg cursor-pointer transition-colors ${
+            activeFormats.alignCenter ? 'bg-accent/20 text-accent' : 'text-text-muted hover:text-text-main'
+          }`}
+          title="Centrar"
+        >
+          <AlignCenter size={14} />
+        </button>
+        <button
+          type="button"
+          onClick={() => executeCommand('justifyRight')}
+          className={`p-2 rounded-lg cursor-pointer transition-colors ${
+            activeFormats.alignRight ? 'bg-accent/20 text-accent' : 'text-text-muted hover:text-text-main'
+          }`}
+          title="Alinear Derecha"
+        >
+          <AlignRight size={14} />
+        </button>
+
+        <span className="w-[1px] h-4 bg-border-app/30 mx-1" />
+
+        {/* Lists */}
+        <button
+          type="button"
+          onClick={() => executeCommand('insertUnorderedList')}
+          className="p-2 rounded-lg text-text-muted hover:text-text-main transition-colors cursor-pointer"
+          title="Lista Viñetas"
+        >
+          <List size={14} />
+        </button>
+        <button
+          type="button"
+          onClick={() => executeCommand('insertOrderedList')}
+          className="p-2 rounded-lg text-text-muted hover:text-text-main transition-colors cursor-pointer"
+          title="Lista Numerada"
+        >
+          <ListOrdered size={14} />
+        </button>
+
+        <span className="w-[1px] h-4 bg-border-app/30 mx-1" />
+
+        {/* Fonts & Headers */}
+        <select
+          onChange={(e) => executeCommand('fontName', e.target.value)}
+          className="bg-transparent text-text-muted text-xs p-1.5 rounded-lg border border-border-app/30 cursor-pointer focus:outline-hidden"
+          title="Tipografía"
+        >
+          <option value="system-ui">Inter / System</option>
+          <option value="Georgia">Serif (Georgia)</option>
+          <option value="Courier New">Mono (Courier)</option>
+        </select>
+
+        <select
+          onChange={(e) => executeCommand('formatBlock', e.target.value)}
+          className="bg-transparent text-text-muted text-xs p-1.5 rounded-lg border border-border-app/30 cursor-pointer focus:outline-hidden"
+          title="Estilo de Bloque"
+        >
+          <option value="div">Normal</option>
+          <option value="h1">H1 / Título</option>
+          <option value="h2">H2 / Subtítulo</option>
+          <option value="blockquote">Cita</option>
+        </select>
+
+        <span className="w-[1px] h-4 bg-border-app/30 mx-1" />
+
+        {/* Media insertion & Reset */}
+        <button
+          type="button"
+          onClick={handleLinkInsert}
+          className="p-2 rounded-lg text-text-muted hover:text-accent transition-colors cursor-pointer"
+          title="Insertar Enlace"
+        >
+          <Link size={14} />
+        </button>
+        <button
+          type="button"
+          onClick={handleImageInsert}
+          className="p-2 rounded-lg text-text-muted hover:text-accent transition-colors cursor-pointer"
+          title="Insertar Imagen URL"
+        >
+          <Image size={14} />
+        </button>
+        <button
+          type="button"
+          onClick={handleFormatClear}
+          className="p-2 rounded-lg text-text-muted hover:text-red-500 transition-colors cursor-pointer"
+          title="Limpiar Formato"
+        >
+          <Trash2 size={14} />
+        </button>
+      </div>
+
+      {/* Editor editable body */}
+      <div className="relative min-h-[140px] p-4 text-sm text-text-main flex-grow focus:outline-hidden">
+        
+        {/* Custom HTML5 contentEditable box */}
+        <div
+          ref={editorRef}
+          contentEditable={!disabled}
+          onInput={handleInput}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => {
+            setIsFocused(false);
+            checkActiveFormats();
+          }}
+          onKeyUp={checkActiveFormats}
+          onMouseUp={checkActiveFormats}
+          className="w-full min-h-[120px] focus:outline-hidden leading-relaxed text-text-main editor-content-area"
+          style={{
+            minHeight: '120px'
+          }}
+        />
+
+        {/* Placeholder label display */}
+        {charCount === 0 && (
+          <span className="absolute left-4 top-4 text-text-muted/65 pointer-events-none text-sm font-medium">
+            {placeholder}
+          </span>
+        )}
+      </div>
+
+      {/* Status Footer bar showing statistics */}
+      <div className="flex items-center justify-between px-4 py-1.5 bg-bg-app/20 border-t border-border-app/20 select-none text-[10px] font-mono text-text-muted">
+        <span>Total: {charCount} caracteres</span>
+        <span>{wordCount} palabras</span>
+      </div>
+
+      {/* Basic global styles for contentEditable styling anchors */}
+      <style>{`
+        .editor-content-area h1 {
+          font-size: 1.8rem;
+          font-weight: 800;
+          line-height: 1.25;
+          margin-bottom: 0.75rem;
+          color: var(--color-text-main);
+        }
+        .editor-content-area h2 {
+          font-size: 1.4rem;
+          font-weight: 700;
+          line-height: 1.3;
+          margin-bottom: 0.5rem;
+          color: var(--color-text-main);
+        }
+        .editor-content-area blockquote {
+          border-left: 3px solid var(--color-accent);
+          padding-left: 1rem;
+          color: var(--color-text-muted);
+          font-style: italic;
+          margin: 0.75rem 0;
+        }
+        .editor-content-area ul {
+          list-style-type: disc;
+          padding-left: 1.5rem;
+          margin: 0.5rem 0;
+        }
+        .editor-content-area ol {
+          list-style-type: decimal;
+          padding-left: 1.5rem;
+          margin: 0.5rem 0;
+        }
+        .editor-content-area a {
+          color: var(--color-accent);
+          text-decoration: underline;
+          font-weight: 600;
+        }
+        .editor-content-area img {
+          max-width: 100%;
+          border-radius: 0.5rem;
+          margin: 0.75rem 0;
+          display: block;
+        }
+      `}</style>
+
+    </div>
+  );
+};

package/components/TextReveal.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+// Register scroll trigger plugin
+gsap.registerPlugin(ScrollTrigger);
+
+export interface TextRevealProps {
+  text: string;
+  className?: string;
+  mode?: 'scrub' | 'play';
+  duration?: number;
+}
+
+export const TextReveal: React.FC<TextRevealProps> = ({
+  text,
+  className = '',
+  mode = 'play',
+  duration = 0.8
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wordsRef = useRef<HTMLSpanElement[]>([]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    
+    // Select all split spans
+    const targets = wordsRef.current.filter(Boolean);
+    
+    if (targets.length === 0) return;
+
+    const ctx = gsap.context(() => {
+      if (mode === 'scrub') {
+        gsap.fromTo(
+          targets,
+          {
+            opacity: 0.1,
+            y: 10,
+          },
+          {
+            opacity: 1,
+            y: 0,
+            stagger: 0.1,
+            scrollTrigger: {
+              trigger: containerRef.current,
+              start: 'top 85%',
+              end: 'top 50%',
+              scrub: true,
+            },
+          }
+        );
+      } else {
+        gsap.fromTo(
+          targets,
+          {
+            opacity: 0,
+            y: 30,
+            filter: 'blur(4px)'
+          },
+          {
+            opacity: 1,
+            y: 0,
+            filter: 'blur(0px)',
+            duration: duration,
+            stagger: 0.05,
+            ease: 'power3.out',
+            scrollTrigger: {
+              trigger: containerRef.current,
+              start: 'top 85%',
+              toggleActions: 'play none none reverse',
+            },
+          }
+        );
+      }
+    }, containerRef);
+
+    return () => ctx.revert(); // Cleanup GSAP animations
+  }, [text, mode, duration]);
+
+  const words = text.split(' ');
+
+  return (
+    <div ref={containerRef} className={`inline-block ${className}`}>
+      <span className="flex flex-wrap gap-x-2 gap-y-1">
+        {words.map((word, idx) => (
+          <span
+            key={idx}
+            ref={(el) => {
+              if (el) wordsRef.current[idx] = el;
+            }}
+            className="inline-block origin-bottom transition-all"
+          >
+            {word}
+          </span>
+        ))}
+      </span>
+    </div>
+  );
+};

package/components/ThemeSwitcher.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Sun, Moon, Monitor, Check } from 'lucide-react';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+export interface ThemeSwitcherProps {
+  className?: string;
+  onThemeChange?: (theme: ThemeMode) => void;
+}
+
+export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({ className = '', onThemeChange }) => {
+  // Mismo valor en servidor y cliente; localStorage se lee tras el mount
+  const [theme, setTheme] = useState<ThemeMode>('system');
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('theme-mode') as ThemeMode | null;
+    if (saved === 'light' || saved === 'dark' || saved === 'system') {
+      setTheme(saved);
+    }
+  }, []);
+
+  // Sync theme to document element
+  useEffect(() => {
+    const root = window.document.documentElement;
+    
+    const applyTheme = (mode: ThemeMode) => {
+      root.classList.remove('dark', 'light');
+      
+      if (mode === 'system') {
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        root.classList.add(systemPrefersDark ? 'dark' : 'light');
+      } else {
+        root.classList.add(mode);
+      }
+      localStorage.setItem('theme-mode', mode);
+    };
+
+    applyTheme(theme);
+
+    // Watch system changes if set to system
+    if (theme === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleSystemChange = () => applyTheme('system');
+      
+      mediaQuery.addEventListener('change', handleSystemChange);
+      return () => mediaQuery.removeEventListener('change', handleSystemChange);
+    }
+  }, [theme, onThemeChange]);
+
+  // Click outside listener to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const options = [
+    { value: 'light', label: 'Claro', icon: <Sun className="w-4 h-4 text-amber-500" /> },
+    { value: 'dark', label: 'Oscuro', icon: <Moon className="w-4 h-4 text-indigo-500" /> },
+    { value: 'system', label: 'Sistema', icon: <Monitor className="w-4 h-4 text-sky-500" /> }
+  ] as const;
+
+  const currentOption = options.find((opt) => opt.value === theme)!;
+
+  return (
+    <div ref={containerRef} className={`relative inline-block ${className}`}>
+      
+      {/* Dropdown trigger button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="p-2.5 rounded-xl border border-border-app bg-bg-card text-text-muted hover:text-text-main hover:border-accent hover:shadow-[0_0_10px_rgba(99,102,241,0.2)] transition-all duration-300 cursor-pointer flex items-center gap-2"
+        aria-label="Seleccionar tema"
+      >
+        {currentOption.icon}
+      </button>
+
+      {/* Animated Dropdown Menu options */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.ul
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{ 
+              opacity: 1, 
+              y: 6, 
+              scale: 1,
+              transition: { type: 'spring', stiffness: 350, damping: 25 }
+            }}
+            exit={{ 
+              opacity: 0, 
+              y: 10, 
+              scale: 0.95,
+              transition: { duration: 0.15 }
+            }}
+            className="absolute right-0 w-36 glass rounded-xl shadow-2xl py-1 z-50 p-1 flex flex-col gap-0.5"
+          >
+            {options.map((opt) => {
+              const isSelected = opt.value === theme;
+              return (
+                <li
+                  key={opt.value}
+                  onClick={() => {
+                    setTheme(opt.value);
+                    setIsOpen(false);
+                    if (onThemeChange) onThemeChange(opt.value);
+                  }}
+                  className={`px-3 py-2 text-xs font-bold rounded-lg cursor-pointer flex items-center justify-between transition-colors duration-150 ${
+                    isSelected 
+                      ? 'bg-accent/10 text-accent' 
+                      : 'text-text-main hover:bg-bg-app'
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    {opt.icon}
+                    <span>{opt.label}</span>
+                  </div>
+                  {isSelected && <Check className="w-3.5 h-3.5" />}
+                </li>
+              );
+            })}
+          </motion.ul>
+        )}
+      </AnimatePresence>
+
+    </div>
+  );
+};