@decido/shell 1.0.0 → 4.0.2

package/src/components/shells/ExperimentalChatShell.tsx

@@ -1,245 +0,0 @@
-import React, { useState, Suspense } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Menu, Command, Workflow, Camera, Paperclip, Mic, Sparkles, Send, X, MonitorPlay, Layers, Code2, Database } from 'lucide-react';
-import { Omnibar } from '../Omnibar';
-import { TransientLayer } from '../TransientLayer';
-
-// Lazy load: VoiceWidget comes from @decido/chat
-const DecidoVoiceWidget = React.lazy(() =>
-    import('@decido/chat').then(m => ({ default: m.DecidoVoiceWidget })).catch(() => ({ default: () => null }))
-);
-
-interface ExperimentalChatShellProps {
-    onExit: () => void;
-}
-
-export const ExperimentalChatShell: React.FC<ExperimentalChatShellProps> = ({ onExit }) => {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-    const [isVoiceActive, setIsVoiceActive] = useState(false);
-    const [isTranscribing, setIsTranscribing] = useState(false);
-    const [inputValue, setInputValue] = useState('');
-    const [suggestions, setSuggestions] = useState<any[]>([]);
-
-    return (
-        <div className="h-dvh w-full bg-surface-primary flex font-sans relative overflow-hidden text-text-primary">
-            {/* Background Texture Drop */}
-            <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E')] opacity-[0.2] mix-blend-overlay pointer-events-none z-0"></div>
-
-            {/* COLLAPSIBLE LEFT SIDEBAR */}
-            <div className={`flex flex-col bg-surface-secondary border-r border-border-subtle z-30 transition-all duration-300 ease-[cubic-bezier(0.32,_0.72,_0,_1)] shrink-0 ${isSidebarOpen ? 'w-[280px]' : 'w-0'} overflow-hidden`}>
-                <div className="w-[280px] p-4 md:p-6 flex flex-col h-full opacity-100 min-w-[280px]">
-                    <div className="flex items-center gap-3 mb-8">
-                        <button onClick={() => setIsSidebarOpen(false)} className="p-2 -ml-2 rounded-full hover:bg-surface-glass text-text-secondary hover:text-text-primary transition-colors">
-                            <Menu size={22} />
-                        </button>
-                        <span className="font-bold text-text-primary tracking-wide">Menú Principal</span>
-                    </div>
-
-                    <div className="flex-1 space-y-2">
-                        <button className="flex items-center w-full gap-3 p-3 rounded-xl bg-surface-glass text-cyan-400 font-medium border border-border-subtle transition-all">
-                            <Command size={18} />
-                            <span>Centro de Comandos</span>
-                        </button>
-                        <button className="flex items-center w-full gap-3 p-3 rounded-xl text-text-secondary font-medium border border-transparent hover:bg-surface-glass transition-all">
-                            <Workflow size={18} />
-                            <span>Flujos de Trabajo</span>
-                        </button>
-
-                        <div className="my-6 border-t border-border-subtle" />
-
-                        <button onClick={onExit} className="flex items-center w-full gap-3 p-3 rounded-xl text-amber-400 font-medium border border-transparent hover:bg-amber-400/10 transition-all">
-                            <X size={18} />
-                            <span>Salir de Chat Exp.</span>
-                        </button>
-                    </div>
-
-                    <div className="mt-auto pb-4">
-                        <p className="text-xs text-text-muted font-mono">Kernel v1.0.0 (Chat Shell)</p>
-                    </div>
-                </div>
-            </div>
-
-            {/* MAIN CHAT LAYER */}
-            <div className="flex-1 flex flex-col relative z-20 bg-surface-secondary shadow-[0_0_50px_rgba(0,0,0,0.5)]">
-
-                {/* HEADER */}
-                <header className="flex-none p-4 md:p-6 z-60 flex justify-between items-center bg-linear-to-b from-surface-secondary to-transparent pointer-events-none">
-                    <div className="flex items-center gap-3 pointer-events-auto">
-                        {!isSidebarOpen && (
-                            <button onClick={() => setIsSidebarOpen(true)} className="p-2 -ml-2 rounded-full hover:bg-surface-glass text-text-secondary hover:text-text-primary transition-colors">
-                                <Menu size={22} />
-                            </button>
-                        )}
-                        <span className="text-xl md:text-2xl font-black text-text-primary tracking-tighter drop-shadow-[0_0_10px_rgba(255,255,255,0.2)]">
-                            yo.<span className="text-cyan-400">decido</span>
-                        </span>
-                        <span className="ml-2 text-[10px] font-bold tracking-widest text-amber-400 border border-amber-400/30 rounded px-2 py-0.5 opacity-80 uppercase">Experimental</span>
-                    </div>
-                </header>
-
-                {/* MAIN CHAT BODY / CANVAS */}
-                <div className="flex-1 overflow-y-auto z-10 p-4 md:p-6 pb-48 flex flex-col justify-end">
-                    <AnimatePresence mode="wait">
-                        <motion.div
-                            key="chat-greeting"
-                            initial={{ opacity: 0, y: 20 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            exit={{ opacity: 0 }}
-                            className="flex flex-col max-w-4xl mx-auto w-full gap-8"
-                        >
-                            {/* Greeting Bubble */}
-                            <div className="flex flex-col gap-2">
-                                <h1 className="text-3xl md:text-5xl font-semibold leading-tight text-text-primary/50">
-                                    <span className="bg-linear-to-r from-cyan-400 via-purple-400 to-indigo-400 text-transparent bg-clip-text">Hola.</span><br />
-                                    ¿En qué puedo ayudarte hoy?
-                                </h1>
-                                <p className="text-sm text-text-muted font-mono mt-2">NÚCLEO EXPERIMENTAL • ZONA DE PRUEBAS</p>
-                            </div>
-                        </motion.div>
-                    </AnimatePresence>
-                </div>
-
-                {/* BOTTOM INPUT AREA / DOCK */}
-                <div className="absolute bottom-0 left-0 w-full p-4 pb-8 md:p-6 md:pb-10 bg-linear-to-t from-surface-secondary via-surface-secondary to-transparent z-70 flex justify-center">
-                    <motion.div
-                        layout
-                        className={`w-full max-w-4xl relative ${isVoiceActive ? 'h-64' : ''}`}
-                    >
-                        <div className={`bg-surface-tertiary border border-border-default rounded-4xl flex flex-col p-2 shadow-2xl transition-all duration-300 ${isVoiceActive ? 'h-full border-cyan-500/30' : 'shadow-[#06b6d4]/5 focus-within:border-border-strong focus-within:shadow-[#06b6d4]/10'}`}>
-
-                            <AnimatePresence mode="wait">
-                                {!isVoiceActive ? (
-                                    <motion.div
-                                        key="text-mode"
-                                        initial={{ opacity: 0 }}
-                                        animate={{ opacity: 1 }}
-                                        exit={{ opacity: 0 }}
-                                        className="flex flex-col w-full h-full cursor-text"
-                                        onClick={(e) => {
-                                            const input = e.currentTarget.querySelector('input');
-                                            if (input && e.target === e.currentTarget) input.focus();
-                                        }}
-                                    >
-                                        <div className="relative flex items-center px-4 py-3 min-h-[60px]">
-                                            <input
-                                                type="text"
-                                                placeholder={isTranscribing ? "Escuchando..." : "Pregúntale a Decido..."}
-                                                value={inputValue}
-                                                onChange={(e) => setInputValue(e.target.value)}
-                                                className="w-full bg-transparent text-text-primary placeholder-text-muted outline-hidden text-[15px] leading-relaxed resize-none h-full"
-                                                onKeyDown={(e) => {
-                                                    if (e.key === 'Enter') {
-                                                        console.log("Submit:", inputValue);
-                                                        setInputValue('');
-                                                    }
-                                                }}
-                                            />
-                                        </div>
-
-                                        <div className="flex items-center justify-between px-2 pb-1 relative z-10 w-full">
-                                            {/* Archivos / Acciones Base */}
-                                            <div className="flex items-center gap-1">
-                                                <button className="w-10 h-10 rounded-full text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-colors">
-                                                    <Camera size={20} />
-                                                </button>
-                                                <button className="w-10 h-10 rounded-full text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-colors">
-                                                    <Paperclip size={20} />
-                                                </button>
-                                            </div>
-
-                                            {/* DEV CONTROL TOOLBAR (Centro) */}
-                                            <div className="flex items-center gap-1 px-3 py-1.5 bg-surface-overlay border border-border-subtle rounded-2xl">
-                                                <button
-                                                    onClick={() => console.log("[DevTools] Solicitando Workspace")}
-                                                    className="p-2 rounded-xl text-text-muted hover:text-cyan-400 hover:bg-surface-glass transition-all" title="Vista de Lienzo (Canvas)">
-                                                    <MonitorPlay size={18} />
-                                                </button>
-                                                <button
-                                                    onClick={() => window.dispatchEvent(new Event('decido-toggle-debug'))}
-                                                    className="p-2 rounded-xl text-text-muted hover:text-emerald-400 hover:bg-surface-glass transition-all font-bold" title="Gestor de Capas / Resaltar Componentes">
-                                                    <Layers size={18} />
-                                                </button>
-                                                <button
-                                                    onClick={() => alert("Editor de Nodos (Kernel) en fase de Pruebas")}
-                                                    className="p-2 rounded-xl text-text-muted hover:text-amber-400 hover:bg-surface-glass transition-all" title="Editor de Nodos (Kernel)">
-                                                    <Code2 size={18} />
-                                                </button>
-                                                <div className="w-[1px] h-4 bg-surface-glass mx-1"></div>
-                                                <button
-                                                    onClick={() => console.log("[DevTools] Database Inspector activo")}
-                                                    className="p-2 rounded-xl text-text-muted hover:text-purple-400 hover:bg-surface-glass transition-all" title="Inspector de Estado">
-                                                    <Database size={18} />
-                                                </button>
-                                            </div>
-
-                                            {/* Acciones de Envío / Voz */}
-                                            <div className="flex items-center gap-2">
-                                                {!inputValue ? (
-                                                    <>
-                                                        <button
-                                                            onClick={(e) => { e.stopPropagation(); setIsTranscribing(!isTranscribing); }}
-                                                            className={`w-10 h-10 rounded-full flex items-center justify-center transition-all ${isTranscribing ? 'text-red-400 bg-red-400/10' : 'text-text-secondary hover:text-text-primary hover:bg-surface-glass'}`}
-                                                            title="Reconocimiento de voz"
-                                                        >
-                                                            <Mic size={20} className={isTranscribing ? "animate-pulse" : ""} />
-                                                        </button>
-                                                        <button
-                                                            onClick={(e) => { e.stopPropagation(); setIsVoiceActive(true); }}
-                                                            className="w-12 h-12 rounded-full text-cyan-400 bg-cyan-500/10 hover:bg-cyan-500/20 flex items-center justify-center border border-cyan-500/20 transition-all shadow-[0_0_15px_rgba(6,182,212,0.15)] hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] group relative overflow-hidden"
-                                                            title="Hablar con la IA (Live)"
-                                                        >
-                                                            <Sparkles size={22} className="relative z-10 transition-transform group-hover:scale-110" />
-                                                            <div className="absolute inset-0 bg-linear-to-r from-cyan-400 to-purple-500 rounded-full opacity-0 group-hover:opacity-20 transition-opacity"></div>
-                                                        </button>
-                                                    </>
-                                                ) : (
-                                                    <button
-                                                        onClick={(e) => { e.stopPropagation(); console.log("Send:", inputValue); setInputValue(''); }}
-                                                        className="w-12 h-12 rounded-full text-text-inverse bg-cyan-400 hover:bg-cyan-300 flex items-center justify-center transition-colors shadow-[0_0_15px_rgba(34,211,238,0.3)]"
-                                                    >
-                                                        <Send size={20} className="mr-1" />
-                                                    </button>
-                                                )}
-                                            </div>
-                                        </div>
-                                    </motion.div>
-                                ) : (
-                                    <motion.div
-                                        key="voice-mode"
-                                        initial={{ opacity: 0 }}
-                                        animate={{ opacity: 1 }}
-                                        exit={{ opacity: 0 }}
-                                        className="flex flex-col w-full h-full relative p-2"
-                                    >
-                                        <div className="flex w-full items-center justify-between mb-2 z-10">
-                                            <span className="text-cyan-400 font-medium px-4 bg-linear-to-r from-cyan-400 via-purple-400 to-indigo-400 text-transparent bg-clip-text animate-pulse">
-                                                Experimental Live Activo...
-                                            </span>
-                                            <button
-                                                onClick={(e) => { e.stopPropagation(); setIsVoiceActive(false); }}
-                                                className="w-8 h-8 rounded-full bg-surface-glass hover:bg-surface-glass flex items-center justify-center text-text-secondary hover:text-text-primary transition-colors"
-                                            >
-                                                <X size={16} />
-                                            </button>
-                                        </div>
-
-                                        <div className="flex-1 w-full rounded-2xl overflow-hidden relative">
-                                            <DecidoVoiceWidget
-                                                isCompact={true}
-                                                onSuggestionsUpdate={(newSuggestions) => setSuggestions(newSuggestions)}
-                                            />
-                                        </div>
-                                    </motion.div>
-                                )}
-                            </AnimatePresence>
-                        </div>
-                    </motion.div>
-                </div>
-
-                {/* OMNIBAR AND TRANSIENT LAYER INTEGRATION TO KEEP PLUGINS FUNCTIONAL */}
-                <Omnibar />
-                <TransientLayer />
-            </div>
-        </div>
-    );
-};

package/src/components/shells/UserCanvas.tsx

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import { ExperimentalChatShell } from './ExperimentalChatShell';
-
-export const UserCanvas: React.FC = () => {
-    const [isExperimentalChat, setIsExperimentalChat] = useState(false);
-
-    if (isExperimentalChat) {
-        return <ExperimentalChatShell onExit={() => setIsExperimentalChat(false)} />;
-    }
-
-    return (
-        <div className="relative w-full h-full flex flex-col selection:bg-cyan-500/30">
-            {/* Efectos de fondo ambiental dinámicos */}
-            <div className="absolute inset-x-0 top-0 h-[500px] w-full bg-linear-to-b from-cyan-900/20 via-blue-900/10 to-transparent pointer-events-none -translate-y-1/2 opacity-50 blur-[100px]" />
-            <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E')] opacity-20 mix-blend-overlay pointer-events-none"></div>
-
-            <div className="w-full shrink-0 flex-none bg-surface-overlay backdrop-blur-md border-b border-border-subtle" style={{ height: 'max(env(safe-area-inset-top, 0px), 1.5rem)' }} />
-
-            <div className="flex-1 relative overflow-hidden w-full flex items-center justify-center border-t border-cyan-500/10 backdrop-blur-xs">
-                <div className="absolute inset-0 pattern-grid-lg text-text-primary/2" />
-
-                <div className="text-center z-10 max-w-md bg-surface-overlay p-8 rounded-4xl border border-border-default shadow-[0_0_50px_rgba(0,0,0,0.5)] backdrop-blur-xl">
-                    <div className="w-16 h-16 bg-surface-glass rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i className="fas fa-project-diagram text-2xl text-cyan-400 drop-shadow-[0_0_10px_rgba(34,211,238,0.5)]"></i>
-                    </div>
-                    <h2 className="text-2xl font-light mb-2 tracking-tight">Espacio Decido</h2>
-                    <p className="text-text-secondary text-sm leading-relaxed mb-8">
-                        Bienvenido. Tu Agente IA está escuchando. Haz clic en el orbe inferior o usa <kbd className="bg-surface-glass px-1 rounded">Cmd+K</kbd> para ordenar la materialización de componentes.
-                    </p>
-
-                    <button
-                        onClick={() => setIsExperimentalChat(true)}
-                        className="px-6 py-3 bg-linear-to-r from-cyan-500/10 to-blue-500/10 hover:from-cyan-500/20 hover:to-blue-500/20 border border-cyan-500/30 hover:border-cyan-400 text-cyan-300 rounded-xl font-medium transition-all shadow-[0_0_15px_rgba(34,211,238,0.1)] flex items-center justify-center gap-2 mx-auto w-full"
-                    >
-                        <i className="fas fa-flask"></i>
-                        Probar Modo Inmersivo
-                    </button>
-                </div>
-            </div>
-
-            <div className="w-full shrink-0 flex-none" style={{ height: 'max(env(safe-area-inset-bottom, 0px), 1rem)' }} />
-        </div>
-    );
-};

package/src/components/studio/BlueprintManagerPanel.tsx

@@ -1,137 +0,0 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { FolderOpen, Plus, Check, X, FileText, Network } from 'lucide-react';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useBlueprintNavigation } from '@decido/engine';
-import { BlueprintCard } from './blueprint/BlueprintCard';
-
-interface BlueprintManagerPanelProps { isOpen: boolean; onClose: () => void; }
-
-export const BlueprintManagerPanel: React.FC<BlueprintManagerPanelProps> = ({ isOpen, onClose }) => {
-    const timelines = useTimelineStore(s => s.timelines);
-    const blueprintLibrary = useTimelineStore(s => s.blueprintLibrary);
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const setPrototypeBrand = usePlaygroundStore(s => s.setPrototypeBrand);
-    const resetNavigation = useBlueprintNavigation(s => s.resetNavigation);
-
-    const createTimeline = useTimelineStore(s => s.createTimeline);
-    const addKeyframe = useTimelineStore(s => s.addKeyframe);
-    const addBlueprint = useTimelineStore(s => s.addBlueprint);
-    const duplicateTimeline = useTimelineStore(s => s.duplicateTimeline);
-    const renameTimeline = useTimelineStore(s => s.renameTimeline);
-    const deleteTimeline = useTimelineStore(s => s.deleteTimeline);
-
-    const [isCreating, setIsCreating] = useState(false);
-    const [createType, setCreateType] = useState<'blueprint' | 'subflow'>('blueprint');
-    const [newName, setNewName] = useState('');
-    const [showCreateMenu, setShowCreateMenu] = useState(false);
-    const createMenuRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const h = (e: MouseEvent) => { if (createMenuRef.current && !createMenuRef.current.contains(e.target as Node)) setShowCreateMenu(false); };
-        document.addEventListener('mousedown', h);
-        return () => document.removeEventListener('mousedown', h);
-    }, []);
-
-    const handleCreate = useCallback(() => {
-        if (!newName.trim()) return;
-        if (createType === 'subflow') {
-            const subKey = `subflow_${newName.trim().toLowerCase().replace(/\s+/g, '_')}`;
-            const id = createTimeline(newName.trim(), subKey);
-            addKeyframe(id, { t: 0, track: 'entry', label: 'Entrada', position: { x: 300, y: 50 } } as any);
-            addKeyframe(id, { t: 5, track: 'return', label: 'Retorno', handle: 'success', position: { x: 300, y: 300 } } as any);
-            const bpId = `bp_${newName.trim().toLowerCase().replace(/\s+/g, '_')}`;
-            const tl = useTimelineStore.getState().timelines[id];
-            if (tl) addBlueprint({ ...tl, id: bpId, isSubflow: true, signature: { inputs: {}, outputs: {} }, metadata: { author: 'user', version: '1.0.0', tags: ['custom'], description: newName.trim(), isPublic: false, createdAt: Date.now(), updatedAt: Date.now() } } as any);
-            setPrototypeBrand(id);
-        } else { setPrototypeBrand(createTimeline(newName.trim())); }
-        setNewName(''); setIsCreating(false);
-    }, [newName, createType, createTimeline, addKeyframe, addBlueprint, setPrototypeBrand]);
-
-    const handleSelect = useCallback((id: string) => { resetNavigation(); setPrototypeBrand(id); }, [setPrototypeBrand, resetNavigation]);
-    const handleDelete = useCallback((id: string) => {
-        const del = deleteTimeline(id);
-        if (del && activeTimelineId === id) { const rem = Object.keys(timelines).filter(k => k !== id); if (rem.length > 0) setPrototypeBrand(rem[0]); }
-    }, [deleteTimeline, activeTimelineId, timelines, setPrototypeBrand]);
-
-    const allBlueprints = Object.entries(timelines);
-    const subflows = Object.entries(blueprintLibrary);
-    const bpToKey: Record<string, string> = {};
-    for (const [key] of Object.entries(timelines)) { if (key.startsWith('subflow_')) bpToKey[`bp_${key.replace('subflow_', '')}`] = key; }
-
-    return (
-        <AnimatePresence>
-            {isOpen && (
-                <>
-                    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-surface-overlay z-40" onClick={onClose} />
-                    <motion.div initial={{ opacity: 0, x: -20, scale: 0.95 }} animate={{ opacity: 1, x: 0, scale: 1 }} exit={{ opacity: 0, x: -20, scale: 0.95 }} transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-                        className="fixed left-4 bottom-20 z-50 w-80 max-h-[60vh] bg-surface-primary border border-border-default rounded-2xl shadow-2xl overflow-hidden flex flex-col" style={{ backdropFilter: 'blur(20px)' }} onClick={e => e.stopPropagation()}>
-
-                        {/* Header */}
-                        <div className="flex items-center justify-between px-4 py-3 border-b border-border-default bg-surface-glass">
-                            <div className="flex items-center gap-2">
-                                <FolderOpen size={16} className="text-cyan-400" /><span className="text-sm font-bold text-text-primary tracking-wide">Blueprints</span>
-                                <span className="text-[10px] bg-surface-glass text-text-secondary px-1.5 py-0.5 rounded-full font-mono">{allBlueprints.length}</span>
-                            </div>
-                            <div className="relative" ref={createMenuRef}>
-                                <button onClick={() => setShowCreateMenu(!showCreateMenu)} className="p-1.5 rounded-lg hover:bg-cyan-500/20 text-cyan-400 transition-colors" title="Crear nuevo"><Plus size={16} /></button>
-                                <AnimatePresence>
-                                    {showCreateMenu && (
-                                        <motion.div initial={{ opacity: 0, scale: 0.9, y: -5 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.9, y: -5 }}
-                                            className="absolute right-0 top-full mt-1 z-50 bg-surface-tertiary border border-border-default rounded-xl shadow-2xl overflow-hidden min-w-[180px]">
-                                            <button onClick={() => { setCreateType('blueprint'); setIsCreating(true); setShowCreateMenu(false); }} className="flex items-center gap-2 w-full px-3 py-2.5 text-xs text-text-primary hover:bg-surface-glass transition-colors">
-                                                <FileText size={13} className="text-cyan-400" /><div className="text-left"><div className="font-medium">Nuevo Blueprint</div><div className="text-[10px] text-text-muted">Flujo principal</div></div>
-                                            </button>
-                                            <button onClick={() => { setCreateType('subflow'); setIsCreating(true); setShowCreateMenu(false); }} className="flex items-center gap-2 w-full px-3 py-2.5 text-xs text-text-primary hover:bg-surface-glass transition-colors border-t border-border-subtle">
-                                                <Network size={13} className="text-violet-400" /><div className="text-left"><div className="font-medium">Nuevo SubFlow</div><div className="text-[10px] text-text-muted">Con Entry + Return</div></div>
-                                            </button>
-                                        </motion.div>
-                                    )}
-                                </AnimatePresence>
-                            </div>
-                        </div>
-
-                        {/* Create Input */}
-                        <AnimatePresence>
-                            {isCreating && (
-                                <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden border-b border-border-default">
-                                    <div className="flex items-center gap-2 px-4 py-3">
-                                        {createType === 'subflow' ? <Network size={14} className="text-violet-400 shrink-0" /> : <FileText size={14} className="text-cyan-400 shrink-0" />}
-                                        <input autoFocus value={newName} onChange={e => setNewName(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') handleCreate(); if (e.key === 'Escape') setIsCreating(false); }}
-                                            placeholder={createType === 'subflow' ? 'Nombre del subflow...' : 'Nombre del blueprint...'} className="flex-1 bg-surface-glass border border-border-default rounded-lg px-3 py-1.5 text-xs text-text-primary focus:outline-hidden focus:border-cyan-500/50 font-mono" />
-                                        <button onClick={handleCreate} className="p-1.5 rounded-lg bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30"><Check size={14} /></button>
-                                        <button onClick={() => setIsCreating(false)} className="p-1.5 rounded-lg hover:bg-surface-glass text-text-muted"><X size={14} /></button>
-                                    </div>
-                                </motion.div>
-                            )}
-                        </AnimatePresence>
-
-                        {/* Lists */}
-                        <div className="flex-1 overflow-y-auto custom-scrollbar">
-                            <div className="px-2 py-1">
-                                <div className="px-2 py-1.5 text-[9px] font-bold text-text-muted uppercase tracking-widest">Blueprints Principales</div>
-                                {allBlueprints.map(([id, tl]) => (
-                                    <BlueprintCard key={id} id={id} name={tl.name || id} nodeCount={tl.keyframes?.length || 0} isActive={id === activeTimelineId}
-                                        onSelect={() => handleSelect(id)} onRename={name => renameTimeline(id, name)} onDuplicate={() => { setPrototypeBrand(duplicateTimeline(id)); }}
-                                        onDelete={allBlueprints.length > 1 ? () => handleDelete(id) : undefined} />
-                                ))}
-                            </div>
-                            {subflows.length > 0 && (
-                                <div className="px-2 py-1 border-t border-border-subtle">
-                                    <div className="px-2 py-1.5 text-[9px] font-bold text-text-muted uppercase tracking-widest">Subflujos</div>
-                                    {subflows.map(([id, bp]) => {
-                                        const tk = bpToKey[id] || '';
-                                        return <BlueprintCard key={id} id={id} name={bp.name || id} nodeCount={bp.keyframes?.length || 0} isActive={tk === activeTimelineId} isSubflow
-                                            onSelect={() => tk && handleSelect(tk)} onRename={name => tk && renameTimeline(tk, name)} onDuplicate={() => tk && setPrototypeBrand(duplicateTimeline(tk))}
-                                            onDelete={() => tk && handleDelete(tk)} />;
-                                    })}
-                                </div>
-                            )}
-                        </div>
-                    </motion.div>
-                </>
-            )}
-        </AnimatePresence>
-    );
-};

package/src/components/studio/DependencyTreePanel.tsx

@@ -1,192 +0,0 @@
-import React, { useMemo } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { AlertTriangle, X, TreePine } from 'lucide-react';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useBlueprintNavigation } from '@decido/engine';
-import { TreeNodeItem, type TreeNode } from './editor/TreeNodeItem';
-
-interface DependencyTreePanelProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
-
-export const DependencyTreePanel: React.FC<DependencyTreePanelProps> = ({ isOpen, onClose }) => {
-    const timelines = useTimelineStore(s => s.timelines);
-    const blueprintLibrary = useTimelineStore(s => s.blueprintLibrary);
-    const setPrototypeBrand = usePlaygroundStore(s => s.setPrototypeBrand);
-    const resetNavigation = useBlueprintNavigation(s => s.resetNavigation);
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-
-    // Build dependency tree
-    const { roots, orphans, cycleWarnings } = useMemo(() => {
-        // 1. Scan all timelines for subflow references
-        const references: Record<string, string[]> = {}; // timelineKey -> [targetBpId, ...]
-        const referencedBpIds = new Set<string>();
-
-        for (const [key, timeline] of Object.entries(timelines)) {
-            const subflowNodes = (timeline.keyframes || []).filter(
-                (kf: any) => kf.track === 'subflow' && kf.targetBlueprintId
-            );
-            if (subflowNodes.length > 0) {
-                references[key] = subflowNodes.map((kf: any) => kf.targetBlueprintId);
-                subflowNodes.forEach((kf: any) => referencedBpIds.add(kf.targetBlueprintId));
-            }
-        }
-
-        // 2. Identify roots: timelines that have subflow children but are NOT themselves referenced
-        const bpToTimelineKey: Record<string, string> = {};
-        for (const key of Object.keys(timelines)) {
-            if (key.startsWith('subflow_')) {
-                const bpId = `bp_${key.replace('subflow_', '')}`;
-                bpToTimelineKey[bpId] = key;
-            }
-        }
-
-        const referencedTimelineKeys = new Set(
-            [...referencedBpIds].map(bpId => bpToTimelineKey[bpId]).filter(Boolean)
-        );
-
-        // 3. Build tree recursively
-        const cycleWarnings: string[] = [];
-
-        const buildNode = (tlKey: string, visited: Set<string>, depth: number): TreeNode => {
-            const timeline = timelines[tlKey];
-            const name = timeline?.name || tlKey;
-            const isSubflow = tlKey.startsWith('subflow_');
-            const hasTrigger = (timeline?.keyframes || []).some((kf: any) => kf.track === 'trigger');
-
-            if (visited.has(tlKey)) {
-                cycleWarnings.push(`Ciclo: ${[...visited].join(' → ')} → ${tlKey}`);
-                return {
-                    id: tlKey, name, type: 'subflow',
-                    children: [], isCyclic: true, depth
-                };
-            }
-
-            const newVisited = new Set(visited);
-            newVisited.add(tlKey);
-
-            const childBpIds = references[tlKey] || [];
-            const children: TreeNode[] = childBpIds.map(bpId => {
-                const childKey = bpToTimelineKey[bpId];
-                if (childKey) {
-                    return buildNode(childKey, newVisited, depth + 1);
-                }
-                // Referenced but no timeline found
-                return {
-                    id: bpId, name: bpId, type: 'orphan' as const,
-                    children: [], depth: depth + 1
-                };
-            });
-
-            return {
-                id: tlKey,
-                name,
-                type: hasTrigger ? 'trigger' : (isSubflow ? 'subflow' : 'blueprint'),
-                children,
-                depth
-            };
-        };
-
-        // Roots = timelines that reference subflows but aren't themselves subflows
-        const rootKeys = Object.keys(references).filter(key => !referencedTimelineKeys.has(key));
-        const roots = rootKeys.map(key => buildNode(key, new Set(), 0));
-
-        // Orphan subflows: in blueprintLibrary but not referenced by anyone
-        const orphanBpIds = Object.keys(blueprintLibrary).filter(bpId => {
-            const tlKey = bpToTimelineKey[bpId];
-            if (!tlKey) return false;
-            return !referencedBpIds.has(bpId) && !rootKeys.includes(tlKey);
-        });
-        const orphans = orphanBpIds.map(bpId => ({
-            id: bpToTimelineKey[bpId] || bpId,
-            name: blueprintLibrary[bpId]?.name || bpId,
-            type: 'subflow' as const,
-            children: [] as TreeNode[],
-            depth: 0
-        }));
-
-        return { roots, orphans, cycleWarnings };
-    }, [timelines, blueprintLibrary]);
-
-    const handleNavigate = (nodeId: string) => {
-        resetNavigation();
-        setPrototypeBrand(nodeId);
-    };
-
-    return (
-        <AnimatePresence>
-            {isOpen && (
-                <>
-                    <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        className="fixed inset-0 bg-surface-overlay z-40"
-                        onClick={onClose}
-                    />
-                    <motion.div
-                        initial={{ opacity: 0, x: -20, scale: 0.95 }}
-                        animate={{ opacity: 1, x: 0, scale: 1 }}
-                        exit={{ opacity: 0, x: -20, scale: 0.95 }}
-                        transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-                        className="fixed left-4 bottom-20 z-50 w-96 max-h-[60vh] bg-surface-primary border border-border-default rounded-2xl shadow-2xl overflow-hidden flex flex-col"
-                        style={{ backdropFilter: 'blur(20px)' }}
-                        onClick={(e) => e.stopPropagation()}
-                    >
-                        {/* Header */}
-                        <div className="flex items-center justify-between px-4 py-3 border-b border-border-default bg-surface-glass">
-                            <div className="flex items-center gap-2">
-                                <TreePine size={16} className="text-emerald-400" />
-                                <span className="text-sm font-bold text-text-primary tracking-wide">Jerarquía</span>
-                                {cycleWarnings.length > 0 && (
-                                    <span className="text-[10px] bg-red-500/20 text-red-400 px-1.5 py-0.5 rounded-full font-mono flex items-center gap-1">
-                                        <AlertTriangle size={10} /> {cycleWarnings.length} ciclo(s)
-                                    </span>
-                                )}
-                            </div>
-                            <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-surface-glass text-text-muted transition-colors">
-                                <X size={14} />
-                            </button>
-                        </div>
-
-                        {/* Tree */}
-                        <div className="flex-1 overflow-y-auto custom-scrollbar p-2">
-                            {roots.length === 0 && orphans.length === 0 && (
-                                <div className="text-center text-text-muted text-xs py-8">
-                                    No hay flujos con subflows referenciados
-                                </div>
-                            )}
-
-                            {roots.map(root => (
-                                <TreeNodeItem
-                                    key={root.id}
-                                    node={root}
-                                    activeId={activeTimelineId}
-                                    onNavigate={handleNavigate}
-                                />
-                            ))}
-
-                            {orphans.length > 0 && (
-                                <div className="mt-3 pt-3 border-t border-border-subtle">
-                                    <div className="px-2 py-1 text-[9px] font-bold text-text-muted uppercase tracking-widest">
-                                        Sin Referencia
-                                    </div>
-                                    {orphans.map(node => (
-                                        <TreeNodeItem
-                                            key={node.id}
-                                            node={node}
-                                            activeId={activeTimelineId}
-                                            onNavigate={handleNavigate}
-                                        />
-                                    ))}
-                                </div>
-                            )}
-                        </div>
-                    </motion.div>
-                </>
-            )}
-        </AnimatePresence>
-    );
-};