@decido/shell 1.0.0

package/src/components/shells/ExperimentalChatShell.tsx

@@ -0,0 +1,245 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,192 @@
+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>
+    );
+};