genoma-evolution 1.0.0

package/.claude/worktrees/phase-2-mcp/src/components/ThemeToggle.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Sun, Moon } from "lucide-react";
+
+export default function ThemeToggle() {
+  const [isDark, setIsDark] = useState(true);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const saved = localStorage.getItem("genoma-theme");
+    const prefersDark = saved ? saved === "dark" : true;
+    setIsDark(prefersDark);
+    if (prefersDark) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, []);
+
+  const toggle = () => {
+    const next = !isDark;
+    setIsDark(next);
+    localStorage.setItem("genoma-theme", next ? "dark" : "light");
+    if (next) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  };
+
+  if (!mounted) {
+    return (
+      <button className="w-9 h-9 rounded-lg flex items-center justify-center text-gray-400">
+        <Sun className="w-5 h-5" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={toggle}
+      className={`w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-200 ${
+        isDark
+          ? "bg-gray-800 text-yellow-400 hover:bg-gray-700"
+          : "bg-white text-primary-600 shadow-[var(--evo-shadow-md)] border border-gray-200 hover:bg-[var(--evo-bg-surface-hover)]"
+      }`}
+      title={isDark ? "Cambiar a Light Mode" : "Cambiar a Dark Mode"}
+    >
+      {isDark ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
+    </button>
+  );
+}

package/.claude/worktrees/phase-2-mcp/src/components/WelcomeHero.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Sparkles, Dna } from "lucide-react";
+
+export default function WelcomeHero() {
+  return (
+    <motion.section
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] }}
+      className="relative flex flex-col items-center justify-center py-20 px-4 overflow-hidden"
+    >
+      {/* Background orbs */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <motion.div
+          animate={{ scale: [1, 1.2, 1], opacity: [0.08, 0.15, 0.08] }}
+          transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
+          className="absolute top-1/4 left-1/4 w-96 h-96 rounded-full"
+          style={{
+            background: "radial-gradient(circle, rgba(139,92,246,0.3) 0%, transparent 70%)",
+          }}
+        />
+        <motion.div
+          animate={{ scale: [1.2, 1, 1.2], opacity: [0.08, 0.12, 0.08] }}
+          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut", delay: 2 }}
+          className="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full"
+          style={{
+            background: "radial-gradient(circle, rgba(6,182,212,0.3) 0%, transparent 70%)",
+          }}
+        />
+      </div>
+
+      {/* Badge */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ delay: 0.3, duration: 0.5 }}
+        className="flex items-center gap-2 px-4 py-1.5 rounded-full glass-card mb-6"
+      >
+        <Dna className="w-3.5 h-3.5 text-accent-violet" />
+        <span className="text-xs font-medium text-muted-foreground tracking-wide uppercase">
+          Autonomous Evolution Interface
+        </span>
+        <Sparkles className="w-3.5 h-3.5 text-accent-cyan" />
+      </motion.div>
+
+      {/* Title */}
+      <motion.h1
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.5, duration: 0.8 }}
+        className="text-5xl md:text-7xl font-bold text-center leading-tight tracking-tight"
+      >
+        <span className="gradient-text">Genoma</span>
+      </motion.h1>
+
+      {/* Subtitle */}
+      <motion.p
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.8, duration: 0.6 }}
+        className="mt-4 text-lg md:text-xl text-muted-foreground text-center max-w-xl"
+      >
+        Self-evolving intelligence. Zero-friction setup.
+      </motion.p>
+
+      {/* Divider line */}
+      <motion.div
+        initial={{ scaleX: 0 }}
+        animate={{ scaleX: 1 }}
+        transition={{ delay: 1.0, duration: 0.8, ease: "easeOut" }}
+        className="mt-10 w-full max-w-2xl h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"
+      />
+    </motion.section>
+  );
+}

package/.claude/worktrees/phase-2-mcp/src/components/bits/ClickSpark.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useRef, useEffect, useCallback } from "react";
+
+interface ClickSparkProps {
+  children: React.ReactNode;
+  sparkColor?: string;
+  sparkSize?: number;
+  sparkRadius?: number;
+  sparkCount?: number;
+  duration?: number;
+  className?: string;
+}
+
+export default function ClickSpark({
+  children,
+  sparkColor = "#8b5cf6",
+  sparkSize = 8,
+  sparkRadius = 20,
+  sparkCount = 8,
+  duration = 400,
+  className = "",
+}: ClickSparkProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const sparksRef = useRef<
+    Array<{ x: number; y: number; angle: number; startTime: number }>
+  >([]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const parent = canvas.parentElement;
+    if (!parent) return;
+
+    const resize = () => {
+      const { width, height } = parent.getBoundingClientRect();
+      canvas.width = width;
+      canvas.height = height;
+    };
+
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(parent);
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let raf: number;
+
+    const draw = (ts: number) => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      sparksRef.current = sparksRef.current.filter((spark) => {
+        const elapsed = ts - spark.startTime;
+        if (elapsed > duration) return false;
+
+        const progress = elapsed / duration;
+        const dist = sparkRadius * progress;
+        const opacity = 1 - progress;
+
+        const x = spark.x + Math.cos(spark.angle) * dist;
+        const y = spark.y + Math.sin(spark.angle) * dist;
+
+        ctx.beginPath();
+        ctx.arc(x, y, sparkSize * (1 - progress) * 0.5, 0, Math.PI * 2);
+        ctx.fillStyle = sparkColor;
+        ctx.globalAlpha = opacity;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+
+        return true;
+      });
+
+      raf = requestAnimationFrame(draw);
+    };
+
+    raf = requestAnimationFrame(draw);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+    };
+  }, [sparkColor, sparkSize, sparkRadius, sparkCount, duration]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const now = performance.now();
+
+      for (let i = 0; i < sparkCount; i++) {
+        sparksRef.current.push({
+          x,
+          y,
+          angle: (Math.PI * 2 * i) / sparkCount,
+          startTime: now,
+        });
+      }
+    },
+    [sparkCount]
+  );
+
+  return (
+    <div className={`relative ${className}`} onClick={handleClick}>
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 pointer-events-none"
+        style={{ zIndex: 50 }}
+      />
+      {children}
+    </div>
+  );
+}

package/.claude/worktrees/phase-2-mcp/src/components/bits/CountUp.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useRef, useEffect, useCallback, useState } from "react";
+import { useInView, useMotionValue, useSpring } from "framer-motion";
+
+interface CountUpProps {
+  to: number;
+  from?: number;
+  direction?: "up" | "down";
+  delay?: number;
+  duration?: number;
+  className?: string;
+  separator?: string;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
+export default function CountUp({
+  to,
+  from = 0,
+  direction = "up",
+  delay = 0,
+  duration = 2,
+  className = "",
+  separator = "",
+  onStart,
+  onEnd,
+}: CountUpProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const motionValue = useMotionValue(direction === "down" ? to : from);
+  const damping = 20 + 40 * (1 / duration);
+  const stiffness = 100 * (1 / duration);
+  const springValue = useSpring(motionValue, { damping, stiffness });
+  const isInView = useInView(ref, { once: true, margin: "0px" });
+  const [displayValue, setDisplayValue] = useState<string>(
+    () => formatValue(direction === "down" ? to : from, from, to, separator)
+  );
+
+  const maxDecimals = Math.max(
+    getDecimalPlaces(from),
+    getDecimalPlaces(to)
+  );
+
+  // Spring animation → state update (never mutates DOM)
+  useEffect(() => {
+    const unsubscribe = springValue.on("change", (latest) => {
+      setDisplayValue(formatValue(latest, from, to, separator));
+    });
+    return unsubscribe;
+  }, [springValue, from, to, separator]);
+
+  // Trigger animation on enter viewport
+  useEffect(() => {
+    if (isInView) {
+      onStart?.();
+      const timeout = setTimeout(() => {
+        motionValue.set(direction === "down" ? from : to);
+      }, delay * 1000);
+      const endTimeout = setTimeout(() => {
+        onEnd?.();
+      }, delay * 1000 + duration * 1000);
+      return () => {
+        clearTimeout(timeout);
+        clearTimeout(endTimeout);
+      };
+    }
+  }, [isInView, from, to, direction, delay, duration, motionValue, onStart, onEnd]);
+
+  return <span ref={ref} className={className}>{displayValue}</span>;
+}
+
+// ── Helpers ──
+
+function getDecimalPlaces(num: number): number {
+  const str = num.toString();
+  if (str.includes(".")) {
+    const decimals = str.split(".")[1];
+    if (parseInt(decimals) !== 0) return decimals.length;
+  }
+  return 0;
+}
+
+function formatValue(
+  value: number,
+  from: number,
+  to: number,
+  separator: string
+): string {
+  const maxDecimals = Math.max(getDecimalPlaces(from), getDecimalPlaces(to));
+  const hasDecimals = maxDecimals > 0;
+  const options: Intl.NumberFormatOptions = {
+    useGrouping: !!separator,
+    minimumFractionDigits: hasDecimals ? maxDecimals : 0,
+    maximumFractionDigits: hasDecimals ? maxDecimals : 0,
+  };
+  const formatted = new Intl.NumberFormat("en-US", options).format(value);
+  return separator ? formatted.replace(/,/g, separator) : formatted;
+}

package/.claude/worktrees/phase-2-mcp/src/components/bits/DarkSelect.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronDown, Check } from "lucide-react";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface DarkSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: Option[];
+  placeholder?: string;
+}
+
+export default function DarkSelect({
+  value,
+  onChange,
+  options,
+  placeholder = "Select...",
+}: DarkSelectProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const selected = options.find((o) => o.value === value);
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between px-4 py-2.5 rounded-xl bg-[#1a1a1a] border border-white/[0.08] text-sm text-[#e5e5e5] hover:border-white/[0.15] transition-colors focus:outline-none focus:border-accent-violet/50"
+      >
+        <span className={!selected ? "text-[#666]" : ""}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <ChevronDown
+          className={`w-4 h-4 text-[#888] transition-transform ${
+            open ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ opacity: 0, y: -4 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -4 }}
+            transition={{ duration: 0.15 }}
+            className="absolute z-50 top-full left-0 right-0 mt-1 rounded-xl bg-[#121212] border border-white/[0.08] shadow-2xl overflow-hidden max-h-60 overflow-y-auto"
+          >
+            {options.length === 0 ? (
+              <div className="px-4 py-3 text-sm text-[#666]">No options</div>
+            ) : (
+              options.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => {
+                    onChange(opt.value);
+                    setOpen(false);
+                  }}
+                  className={`w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors ${
+                    opt.value === value
+                      ? "bg-accent-violet/15 text-[#ffffff]"
+                      : "text-[#cccccc] hover:bg-white/[0.06] hover:text-[#ffffff]"
+                  }`}
+                >
+                  <span className="truncate">{opt.label}</span>
+                  {opt.value === value && (
+                    <Check className="w-3.5 h-3.5 text-accent-violet flex-shrink-0" />
+                  )}
+                </button>
+              ))
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/.claude/worktrees/phase-2-mcp/src/components/bits/DecryptedText.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { useEffect, useState, useRef, useMemo, useCallback } from "react";
+import { motion } from "framer-motion";
+
+interface DecryptedTextProps {
+  text: string;
+  speed?: number;
+  maxIterations?: number;
+  sequential?: boolean;
+  revealDirection?: "start" | "end" | "center";
+  useOriginalCharsOnly?: boolean;
+  characters?: string;
+  className?: string;
+  parentClassName?: string;
+  encryptedClassName?: string;
+  animateOn?: "hover" | "view" | "click";
+}
+
+export default function DecryptedText({
+  text,
+  speed = 50,
+  maxIterations = 10,
+  sequential = false,
+  revealDirection = "start",
+  useOriginalCharsOnly = false,
+  characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+",
+  className = "",
+  parentClassName = "",
+  encryptedClassName = "",
+  animateOn = "hover",
+}: DecryptedTextProps) {
+  const [displayText, setDisplayText] = useState(text);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [revealedIndices, setRevealedIndices] = useState<Set<number>>(new Set());
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const availableChars = useMemo(() => {
+    return useOriginalCharsOnly
+      ? Array.from(new Set(text.split(""))).filter((c) => c !== " ")
+      : characters.split("");
+  }, [useOriginalCharsOnly, text, characters]);
+
+  const shuffleText = useCallback(
+    (original: string, revealed: Set<number>) => {
+      return original
+        .split("")
+        .map((char, i) => {
+          if (char === " ") return " ";
+          if (revealed.has(i)) return original[i];
+          return availableChars[Math.floor(Math.random() * availableChars.length)];
+        })
+        .join("");
+    },
+    [availableChars]
+  );
+
+  const getOrder = useCallback(
+    (len: number) => {
+      const order: number[] = [];
+      if (revealDirection === "start") {
+        for (let i = 0; i < len; i++) order.push(i);
+      } else if (revealDirection === "end") {
+        for (let i = len - 1; i >= 0; i--) order.push(i);
+      } else {
+        const mid = Math.floor(len / 2);
+        order.push(mid);
+        for (let i = 1; i <= mid; i++) {
+          if (mid - i >= 0) order.push(mid - i);
+          if (mid + i < len) order.push(mid + i);
+        }
+      }
+      return order;
+    },
+    [revealDirection]
+  );
+
+  const startAnimation = useCallback(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    setRevealedIndices(new Set());
+
+    let iteration = 0;
+    const order = getOrder(text.length);
+
+    intervalRef.current = setInterval(() => {
+      if (sequential) {
+        setRevealedIndices((prev) => {
+          const next = new Set(prev);
+          const nextIdx = order[next.size];
+          if (nextIdx !== undefined) next.add(nextIdx);
+          if (next.size >= text.length) {
+            clearInterval(intervalRef.current!);
+            setIsAnimating(false);
+          }
+          return next;
+        });
+      } else {
+        iteration++;
+        const revealed = new Set<number>();
+        const numToReveal = Math.floor((iteration / maxIterations) * text.length);
+        for (let i = 0; i < numToReveal && i < order.length; i++) {
+          revealed.add(order[i]);
+        }
+        setRevealedIndices(revealed);
+        if (iteration >= maxIterations) {
+          clearInterval(intervalRef.current!);
+          setIsAnimating(false);
+        }
+      }
+    }, speed);
+  }, [isAnimating, text, sequential, maxIterations, speed, getOrder]);
+
+  useEffect(() => {
+    if (animateOn === "view") {
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) startAnimation();
+        },
+        { threshold: 0.1 }
+      );
+      if (containerRef.current) observer.observe(containerRef.current);
+      return () => observer.disconnect();
+    }
+  }, [animateOn, startAnimation]);
+
+  useEffect(() => {
+    if (isAnimating) {
+      setDisplayText(shuffleText(text, revealedIndices));
+    } else if (revealedIndices.size === 0 && animateOn !== "view") {
+      setDisplayText(text);
+    } else {
+      setDisplayText(
+        text
+          .split("")
+          .map((c, i) => (revealedIndices.has(i) ? c : c === " " ? " " : availableChars[Math.floor(Math.random() * availableChars.length)]))
+          .join("")
+      );
+    }
+  }, [isAnimating, revealedIndices, text, shuffleText, availableChars, animateOn]);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  return (
+    <motion.span
+      ref={containerRef}
+      className={`inline-block whitespace-pre-wrap ${parentClassName}`}
+      onMouseEnter={animateOn === "hover" ? startAnimation : undefined}
+      onClick={animateOn === "click" ? startAnimation : undefined}
+    >
+      <span className={isAnimating ? encryptedClassName : className}>
+        {displayText}
+      </span>
+    </motion.span>
+  );
+}