alexui 1.0.0

package/components/ResizablePanel.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { GripVertical, GripHorizontal } from 'lucide-react';
+
+export interface ResizablePanelProps {
+  panel1: React.ReactNode;
+  panel2: React.ReactNode;
+  direction?: 'horizontal' | 'vertical';
+  initialSplit?: number; // percentage (0 to 100)
+  minSplit?: number;
+  maxSplit?: number;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const ResizablePanel: React.FC<ResizablePanelProps> = ({
+  panel1,
+  panel2,
+  direction = 'horizontal',
+  initialSplit = 50,
+  minSplit = 20,
+  maxSplit = 80,
+  className = '',
+  disabled = false
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [split, setSplit] = useState(initialSplit);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Apply constraints
+  const constrainedSplit = Math.max(minSplit, Math.min(maxSplit, split));
+
+  const handleDragStart = () => {
+    if (disabled) return;
+    setIsDragging(true);
+    document.body.style.userSelect = 'none';
+  };
+
+  const handleDrag = (_e: unknown, info: { delta: { x: number; y: number } }) => {
+    if (disabled || !containerRef.current) return;
+    
+    const containerRect = containerRef.current.getBoundingClientRect();
+    
+    if (direction === 'horizontal') {
+      const deltaX = info.delta.x;
+      const percentageChange = (deltaX / containerRect.width) * 100;
+      setSplit(prev => {
+        const next = prev + percentageChange;
+        return Math.max(minSplit, Math.min(maxSplit, next));
+      });
+    } else {
+      const deltaY = info.delta.y;
+      const percentageChange = (deltaY / containerRect.height) * 100;
+      setSplit(prev => {
+        const next = prev + percentageChange;
+        return Math.max(minSplit, Math.min(maxSplit, next));
+      });
+    }
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+    document.body.style.userSelect = '';
+    // Optional: Snap to edge if very close, but we have minSplit
+  };
+
+  const isHorizontal = direction === 'horizontal';
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`flex w-full h-full overflow-hidden bg-bg-app rounded-xl border border-border-app ${isHorizontal ? 'flex-row' : 'flex-col'} ${className}`}
+    >
+      {/* Panel 1 */}
+      <div 
+        style={{ [isHorizontal ? 'width' : 'height']: `${constrainedSplit}%` }}
+        className="flex-shrink-0 h-full overflow-auto scrollbar-thin relative"
+      >
+        {panel1}
+      </div>
+
+      {/* Drag Handle */}
+      <motion.div
+        drag={isHorizontal ? 'x' : 'y'}
+        dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }} // Reset visual drag, we handle logic in onDrag
+        dragElastic={0}
+        dragMomentum={false}
+        onDragStart={handleDragStart}
+        onDrag={handleDrag}
+        onDragEnd={handleDragEnd}
+        className={`relative z-10 flex items-center justify-center bg-bg-card transition-colors duration-200
+          ${isHorizontal ? 'w-2 cursor-col-resize hover:bg-accent/20' : 'h-2 cursor-row-resize hover:bg-accent/20'}
+          ${isDragging ? 'bg-accent/50' : 'border-border-app'}
+          ${isHorizontal ? 'border-x' : 'border-y'}
+          ${disabled ? 'pointer-events-none opacity-50' : ''}
+        `}
+      >
+        {isHorizontal ? (
+          <GripVertical className={`w-3 h-3 text-text-muted transition-colors ${isDragging ? 'text-white' : ''}`} />
+        ) : (
+          <GripHorizontal className={`w-3 h-3 text-text-muted transition-colors ${isDragging ? 'text-white' : ''}`} />
+        )}
+      </motion.div>
+
+      {/* Panel 2 */}
+      <div 
+        style={{ [isHorizontal ? 'width' : 'height']: `${100 - constrainedSplit}%` }}
+        className="flex-1 overflow-auto scrollbar-thin relative"
+      >
+        {panel2}
+      </div>
+    </div>
+  );
+};

package/components/ScrollPanel.tsx

@@ -0,0 +1,103 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { motion } from 'framer-motion';
+
+export interface ScrollPanelProps {
+  children: React.ReactNode;
+  height?: number | string;
+  showScrollbar?: boolean;
+  className?: string;
+}
+
+export const ScrollPanel: React.FC<ScrollPanelProps> = ({
+  children,
+  height = 280,
+  showScrollbar = true,
+  className = ''
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollRatio, setScrollRatio] = useState(0);
+  const [thumbHeight, setThumbHeight] = useState(40);
+  const [trackHeight, setTrackHeight] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const updateMetrics = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const { scrollTop, scrollHeight, clientHeight } = el;
+    const maxScroll = scrollHeight - clientHeight;
+    const ratio = maxScroll > 0 ? scrollTop / maxScroll : 0;
+    const thumb = Math.max((clientHeight / scrollHeight) * clientHeight, 28);
+    setScrollRatio(ratio);
+    setThumbHeight(thumb);
+    setTrackHeight(Math.max(clientHeight - thumb - 8, 0));
+  }, []);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    updateMetrics();
+    el.addEventListener('scroll', updateMetrics);
+    window.addEventListener('resize', updateMetrics);
+    return () => {
+      el.removeEventListener('scroll', updateMetrics);
+      window.removeEventListener('resize', updateMetrics);
+    };
+  }, [updateMetrics, children]);
+
+  const handleThumbDrag = (clientY: number) => {
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const travel = Math.max(rect.height - thumbHeight - 8, 0);
+    const relativeY = Math.min(Math.max(clientY - rect.top - thumbHeight / 2 - 4, 0), travel);
+    const ratio = travel > 0 ? relativeY / travel : 0;
+    const maxScroll = el.scrollHeight - el.clientHeight;
+    el.scrollTop = ratio * maxScroll;
+  };
+
+  return (
+    <div
+      className={`relative flex rounded-2xl border border-border-app bg-bg-card overflow-hidden ${className}`}
+      style={{ height }}
+    >
+      <div
+        ref={containerRef}
+        className={`flex-1 overflow-y-auto overflow-x-hidden p-4 scroll-smooth ${
+          showScrollbar ? '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden' : ''
+        }`}
+      >
+        {children}
+      </div>
+
+      {showScrollbar && (
+        <div
+          className="w-3 flex-shrink-0 relative my-2 mr-2 rounded-full bg-bg-app/80"
+          aria-hidden
+        >
+          <motion.div
+            className={`absolute inset-x-0.5 rounded-full transition-colors ${
+              isDragging ? 'bg-accent' : 'bg-accent/50 hover:bg-accent/70'
+            } cursor-grab active:cursor-grabbing`}
+            style={{
+              height: thumbHeight,
+              top: 4 + scrollRatio * trackHeight
+            }}
+            onPointerDown={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+              handleThumbDrag(e.clientY);
+              const onMove = (ev: PointerEvent) => handleThumbDrag(ev.clientY);
+              const onUp = () => {
+                setIsDragging(false);
+                window.removeEventListener('pointermove', onMove);
+                window.removeEventListener('pointerup', onUp);
+              };
+              window.addEventListener('pointermove', onMove);
+              window.addEventListener('pointerup', onUp);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/components/SettingsPage.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { User, Bell, Shield, Palette } from 'lucide-react';
+import { Panel } from './Panel';
+import { GlowInput } from './GlowInput';
+import { MorphingSwitch } from './MorphingSwitch';
+import { GlassButton } from './GlassButton';
+import { Skeleton } from './Skeleton';
+
+export type SettingsSection = 'profile' | 'notifications' | 'security' | 'appearance';
+
+export interface SettingsPageProps {
+  defaultSection?: SettingsSection;
+  onSave?: (section: SettingsSection) => void;
+  isLoading?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+const SECTIONS: Array<{ id: SettingsSection; label: string; icon: React.ReactNode }> = [
+  { id: 'profile', label: 'Perfil', icon: <User className="w-4 h-4" /> },
+  { id: 'notifications', label: 'Notificaciones', icon: <Bell className="w-4 h-4" /> },
+  { id: 'security', label: 'Seguridad', icon: <Shield className="w-4 h-4" /> },
+  { id: 'appearance', label: 'Apariencia', icon: <Palette className="w-4 h-4" /> },
+];
+
+export const SettingsPage: React.FC<SettingsPageProps> = ({
+  defaultSection = 'profile',
+  onSave,
+  isLoading = false,
+  disabled = false,
+  className = ''
+}) => {
+  const [active, setActive] = useState<SettingsSection>(defaultSection);
+  const [name, setName] = useState('Alexis Jardin');
+  const [email, setEmail] = useState('alex@alexui.dev');
+  const [emailNotifs, setEmailNotifs] = useState(true);
+  const [pushNotifs, setPushNotifs] = useState(false);
+  const [twoFactor, setTwoFactor] = useState(true);
+  const [compactMode, setCompactMode] = useState(false);
+
+  if (isLoading) {
+    return (
+      <div className={`w-full flex gap-4 ${className}`}>
+        <Skeleton variant="rect" className="w-40 h-64 rounded-2xl" />
+        <Skeleton variant="rect" className="flex-1 h-64 rounded-2xl" />
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={`w-full flex flex-col md:flex-row gap-4 ${className}`}
+    >
+      <nav className="flex md:flex-col gap-1 p-2 glass rounded-2xl border border-border-app md:w-44 flex-shrink-0 overflow-x-auto">
+        {SECTIONS.map((section) => (
+          <button
+            key={section.id}
+            type="button"
+            disabled={disabled}
+            onClick={() => setActive(section.id)}
+            className={`flex items-center gap-2 px-3 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-colors cursor-pointer disabled:opacity-40 ${
+              active === section.id
+                ? 'bg-accent/15 text-accent border border-accent/25'
+                : 'text-text-muted hover:text-text-main hover:bg-bg-app/50 border border-transparent'
+            }`}
+          >
+            {section.icon}
+            {section.label}
+          </button>
+        ))}
+      </nav>
+
+      <div className="flex-1 min-w-0">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={active}
+            initial={{ opacity: 0, x: 8 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -8 }}
+            transition={{ duration: 0.18 }}
+            className="flex flex-col gap-4"
+          >
+            {active === 'profile' && (
+              <Panel title="Información personal" subtitle="Actualizá tu perfil público" defaultOpen collapsible={false}>
+                <div className="flex flex-col gap-4">
+                  <GlowInput label="Nombre" value={name} onChange={(e) => setName(e.target.value)} disabled={disabled} />
+                  <GlowInput label="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={disabled} />
+                  <GlassButton variant="primary" size="sm" disabled={disabled} onClick={() => onSave?.('profile')}>
+                    Guardar perfil
+                  </GlassButton>
+                </div>
+              </Panel>
+            )}
+
+            {active === 'notifications' && (
+              <Panel title="Alertas" subtitle="Elegí cómo querés recibir novedades" defaultOpen collapsible={false}>
+                <div className="flex flex-col gap-4">
+                  <label className="flex items-center justify-between gap-3 text-sm">
+                    <span className="text-text-main font-semibold">Email semanal</span>
+                    <MorphingSwitch checked={emailNotifs} onChange={setEmailNotifs} disabled={disabled} />
+                  </label>
+                  <label className="flex items-center justify-between gap-3 text-sm">
+                    <span className="text-text-main font-semibold">Push en tiempo real</span>
+                    <MorphingSwitch checked={pushNotifs} onChange={setPushNotifs} disabled={disabled} />
+                  </label>
+                  <GlassButton variant="primary" size="sm" disabled={disabled} onClick={() => onSave?.('notifications')}>
+                    Guardar preferencias
+                  </GlassButton>
+                </div>
+              </Panel>
+            )}
+
+            {active === 'security' && (
+              <Panel title="Seguridad" subtitle="Protegé tu cuenta" defaultOpen collapsible={false}>
+                <div className="flex flex-col gap-4">
+                  <label className="flex items-center justify-between gap-3 text-sm">
+                    <span className="text-text-main font-semibold">Autenticación 2FA</span>
+                    <MorphingSwitch checked={twoFactor} onChange={setTwoFactor} disabled={disabled} />
+                  </label>
+                  <GlassButton variant="secondary" size="sm" disabled={disabled}>
+                    Cambiar contraseña
+                  </GlassButton>
+                  <GlassButton variant="primary" size="sm" disabled={disabled} onClick={() => onSave?.('security')}>
+                    Guardar seguridad
+                  </GlassButton>
+                </div>
+              </Panel>
+            )}
+
+            {active === 'appearance' && (
+              <Panel title="Apariencia" subtitle="Personalizá la interfaz" defaultOpen collapsible={false}>
+                <div className="flex flex-col gap-4">
+                  <label className="flex items-center justify-between gap-3 text-sm">
+                    <span className="text-text-main font-semibold">Modo compacto</span>
+                    <MorphingSwitch checked={compactMode} onChange={setCompactMode} disabled={disabled} />
+                  </label>
+                  <p className="text-xs text-text-muted">
+                    Usá el Color Theme Manager del catálogo para exportar tu paleta CSS.
+                  </p>
+                  <GlassButton variant="primary" size="sm" disabled={disabled} onClick={() => onSave?.('appearance')}>
+                    Guardar apariencia
+                  </GlassButton>
+                </div>
+              </Panel>
+            )}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+};

package/components/SignupForm.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { UserPlus } from 'lucide-react';
+import { GlowInput } from './GlowInput';
+import { MorphingSwitch } from './MorphingSwitch';
+import { MagneticButton } from './MagneticButton';
+import { Skeleton } from './Skeleton';
+
+export interface SignupFormProps {
+  onSubmit?: (data: { name: string; email: string; password: string; acceptTerms: boolean }) => void;
+  onLoginClick?: () => void;
+  className?: string;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export const SignupForm: React.FC<SignupFormProps> = ({
+  onSubmit,
+  onLoginClick,
+  className = '',
+  isLoading = false,
+  disabled = false
+}) => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [acceptTerms, setAcceptTerms] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validate = () => {
+    const next: Record<string, string> = {};
+    if (!name.trim()) next.name = 'El nombre es obligatorio';
+    if (!email) next.email = 'El correo es obligatorio';
+    else if (!email.includes('@')) next.email = 'Correo electrónico no válido';
+    if (!password) next.password = 'La contraseña es obligatoria';
+    else if (password.length < 6) next.password = 'Mínimo 6 caracteres';
+    if (password !== confirmPassword) next.confirmPassword = 'Las contraseñas no coinciden';
+    if (!acceptTerms) next.terms = 'Debés aceptar los términos';
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (disabled || !validate()) return;
+    onSubmit?.({ name: name.trim(), email, password, acceptTerms });
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0, scale: 0.95, y: 15 },
+    show: {
+      opacity: 1,
+      scale: 1,
+      y: 0,
+      transition: {
+        type: 'spring' as const,
+        stiffness: 300,
+        damping: 25,
+        staggerChildren: 0.07,
+        delayChildren: 0.08
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    show: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 300, damping: 25 } }
+  };
+
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial="hidden"
+      animate="show"
+      className={`w-full max-w-md glass rounded-3xl p-8 bg-bg-card/70 border border-border-app shadow-2xl ${className}`}
+    >
+      {isLoading ? (
+        <div className="flex flex-col gap-5">
+          <Skeleton variant="circle" className="w-10 h-10 mx-auto" />
+          <Skeleton variant="rect" className="w-full h-11" />
+          <Skeleton variant="rect" className="w-full h-11" />
+          <Skeleton variant="rect" className="w-full h-11" />
+          <Skeleton variant="rect" className="w-full h-12" />
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+          <motion.div variants={itemVariants} className="text-center flex flex-col items-center gap-1">
+            <div className="w-10 h-10 rounded-2xl bg-accent/15 border border-accent/20 flex items-center justify-center text-accent mb-2">
+              <UserPlus className="w-5 h-5" />
+            </div>
+            <h2 className="text-2xl font-extrabold tracking-tight text-text-main font-display">
+              Crear cuenta
+            </h2>
+            <p className="text-xs text-text-muted">
+              Completá tus datos para registrarte en AlexUI
+            </p>
+          </motion.div>
+
+          <motion.div variants={itemVariants}>
+            <GlowInput
+              label="Nombre completo"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              error={errors.name}
+              placeholder="Alexis Jardin"
+              disabled={disabled}
+            />
+          </motion.div>
+
+          <motion.div variants={itemVariants}>
+            <GlowInput
+              label="Correo electrónico"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              error={errors.email}
+              placeholder="alex@ejemplo.com"
+              disabled={disabled}
+            />
+          </motion.div>
+
+          <motion.div variants={itemVariants}>
+            <GlowInput
+              label="Contraseña"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              error={errors.password}
+              placeholder="••••••••"
+              disabled={disabled}
+            />
+          </motion.div>
+
+          <motion.div variants={itemVariants}>
+            <GlowInput
+              label="Confirmar contraseña"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              error={errors.confirmPassword}
+              placeholder="••••••••"
+              disabled={disabled}
+            />
+          </motion.div>
+
+          <motion.div variants={itemVariants} className="flex items-center gap-2 text-xs">
+            <MorphingSwitch
+              checked={acceptTerms}
+              onChange={setAcceptTerms}
+              disabled={disabled}
+            />
+            <span className="font-semibold text-text-muted select-none">
+              Acepto los términos y condiciones
+            </span>
+          </motion.div>
+          {errors.terms && (
+            <p className="text-xs text-red-400 font-semibold -mt-3 px-1">{errors.terms}</p>
+          )}
+
+          <motion.div variants={itemVariants}>
+            <MagneticButton type="submit" className="w-full py-3.5" range={60} disabled={disabled || isLoading}>
+              Registrarme
+            </MagneticButton>
+          </motion.div>
+
+          <motion.p variants={itemVariants} className="text-center text-xs text-text-muted">
+            ¿Ya tenés cuenta?{' '}
+            <button
+              type="button"
+              onClick={onLoginClick}
+              disabled={disabled}
+              className="font-bold text-accent hover:text-accent-hover transition-colors disabled:opacity-40"
+            >
+              Iniciar sesión
+            </button>
+          </motion.p>
+        </form>
+      )}
+    </motion.div>
+  );
+};

package/components/Skeleton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export interface SkeletonProps {
+  className?: string;
+  variant?: 'text' | 'rect' | 'circle';
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({ className = '', variant = 'rect' }) => {
+  const roundedClass = 
+    variant === 'circle' 
+      ? 'rounded-full' 
+      : variant === 'text' 
+      ? 'rounded-md h-4 w-3/4' 
+      : 'rounded-xl';
+
+  return (
+    <div 
+      className={`relative overflow-hidden bg-bg-app border border-border-app/40 ${roundedClass} ${className}`}
+    >
+      {/* Repeating shimmer sweep background overlay */}
+      <motion.div
+        animate={{
+          x: ['-100%', '100%']
+        }}
+        transition={{
+          repeat: Infinity,
+          duration: 1.6,
+          ease: 'linear'
+        }}
+        className="absolute inset-0 bg-gradient-to-r from-transparent via-accent/5 to-transparent z-0"
+        style={{
+          width: '50%'
+        }}
+      />
+      
+      {/* Solid pulse spacer (guarantees layout size) */}
+      <div className="w-full h-full opacity-0 pointer-events-none select-none">Spacer</div>
+    </div>
+  );
+};

package/components/Slider.tsx

@@ -0,0 +1,95 @@
+import React, { useRef } from 'react';
+import { motion, useMotionValue, useTransform } from 'framer-motion';
+
+export interface SliderProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  showValue?: boolean;
+  variant?: 'accent' | 'success' | 'warning' | 'danger';
+  disabled?: boolean;
+  className?: string;
+}
+
+const variantColors = {
+  accent: { track: 'bg-accent', glow: 'shadow-[0_0_12px_var(--color-accent-glow)]' },
+  success: { track: 'bg-green-500', glow: 'shadow-[0_0_12px_rgba(34,197,94,0.4)]' },
+  warning: { track: 'bg-yellow-500', glow: 'shadow-[0_0_12px_rgba(234,179,8,0.4)]' },
+  danger: { track: 'bg-red-500', glow: 'shadow-[0_0_12px_rgba(239,68,68,0.4)]' }
+};
+
+export const Slider: React.FC<SliderProps> = ({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = true,
+  variant = 'accent',
+  disabled = false,
+  className = ''
+}) => {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const percentage = ((value - min) / (max - min)) * 100;
+  const colors = variantColors[variant];
+
+  const updateFromClientX = (clientX: number) => {
+    if (disabled || !trackRef.current) return;
+    const rect = trackRef.current.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+    const raw = min + ratio * (max - min);
+    const stepped = Math.round(raw / step) * step;
+    onChange(Math.min(max, Math.max(min, stepped)));
+  };
+
+  const thumbX = useMotionValue(percentage);
+  const fillWidth = useTransform(thumbX, (v) => `${v}%`);
+
+  React.useEffect(() => {
+    thumbX.set(percentage);
+  }, [percentage, thumbX]);
+
+  return (
+    <div className={`w-full flex flex-col gap-2 select-none ${disabled ? 'opacity-40 cursor-not-allowed' : ''} ${className}`}>
+      {(label || showValue) && (
+        <div className="flex items-center justify-between text-xs font-bold">
+          {label && <span className="text-text-muted font-mono uppercase tracking-wider">{label}</span>}
+          {showValue && <span className="text-accent font-display">{value}</span>}
+        </div>
+      )}
+
+      <div
+        ref={trackRef}
+        className={`relative h-3 rounded-full bg-bg-app border border-border-app/80 ${disabled ? 'pointer-events-none' : 'cursor-pointer'}`}
+        onPointerDown={(e) => {
+          if (disabled) return;
+          updateFromClientX(e.clientX);
+          const onMove = (ev: PointerEvent) => updateFromClientX(ev.clientX);
+          const onUp = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+          };
+          window.addEventListener('pointermove', onMove);
+          window.addEventListener('pointerup', onUp);
+        }}
+      >
+        <motion.div
+          className={`absolute inset-y-0 left-0 rounded-full ${colors.track} ${colors.glow}`}
+          style={{ width: fillWidth }}
+        />
+
+        <motion.div
+          className={`absolute top-1/2 -translate-y-1/2 w-5 h-5 rounded-full bg-bg-card border-2 border-accent ${colors.glow}`}
+          style={{ left: fillWidth, x: '-50%' }}
+          whileHover={disabled ? undefined : { scale: 1.15 }}
+          whileTap={disabled ? undefined : { scale: 0.95 }}
+          transition={{ type: 'spring' as const, stiffness: 500, damping: 28 }}
+        />
+      </div>
+    </div>
+  );
+};