@decido/shell 1.0.0

package/src/components/studio/NodePalette.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useMemo } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { ChevronDown, ChevronRight, GripVertical, PanelLeftClose, PanelLeft, Search, Layout, Image } from 'lucide-react';
+import { useUIComponentStore } from '../../store/useUIComponentStore';
+import { STATIC_CATEGORIES, DRAG_DATA_KEY, PaletteItem, PaletteCategory } from './editor/paletteCatalog';
+
+interface NodePaletteProps { className?: string; }
+
+export const NodePalette: React.FC<NodePaletteProps> = ({ className }) => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const [expandedCategories, setExpandedCategories] = useState<Record<string, boolean>>({
+        dialogue: true, logic: true, ui: true, render: true, hsm: false, triggers: false,
+        morphology: false, 'shell-register': true, 'shell-layout': true, 'shell-theme': true,
+        'shell-interaction': true, 'shell-config': true
+    });
+    const [searchFilter, setSearchFilter] = useState('');
+    const uiComponents = useUIComponentStore(s => s.components);
+
+    const categories = useMemo<PaletteCategory[]>(() => {
+        const renderItems: PaletteItem[] = Object.values(uiComponents).map(comp => ({
+            type: 'render', label: comp.name, icon: <Layout size={16} />,
+            color: comp.source === 'ai-generated' ? 'border-pink-500/40' : 'border-cyan-500/40',
+            description: `${comp.category} · ${comp.source}`, meta: { uiSchema: comp.schema, componentId: comp.id }
+        }));
+        const all = [...STATIC_CATEGORIES];
+        all.splice(3, 0, { id: 'render', label: 'UI Render', icon: <Image size={14} />, items: renderItems });
+        return all;
+    }, [uiComponents]);
+
+    const filteredCategories = useMemo(() => {
+        if (!searchFilter.trim()) return categories;
+        const q = searchFilter.toLowerCase();
+        return categories.map(c => ({ ...c, items: c.items.filter(i => i.label.toLowerCase().includes(q) || i.type.toLowerCase().includes(q) || (i.description || '').toLowerCase().includes(q)) })).filter(c => c.items.length > 0);
+    }, [categories, searchFilter]);
+
+    const onDragStart = (e: React.DragEvent, item: PaletteItem) => {
+        e.dataTransfer.setData(DRAG_DATA_KEY, JSON.stringify({ type: item.type, label: item.label, meta: item.meta || {} }));
+        e.dataTransfer.effectAllowed = 'move';
+    };
+
+    if (isCollapsed) return (
+        <div className={`flex flex-col items-center py-3 px-1 bg-surface-primary/80 border-r border-border-subtle ${className || ''}`}>
+            <button onClick={() => setIsCollapsed(false)} className="p-2 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors" title="Abrir Palette"><PanelLeft size={18} /></button>
+        </div>
+    );
+
+    return (
+        <motion.div initial={{ width: 0, opacity: 0 }} animate={{ width: 220, opacity: 1 }} exit={{ width: 0, opacity: 0 }} transition={{ duration: 0.2 }}
+            className={`flex flex-col bg-surface-primary/90 border-r border-border-subtle overflow-hidden select-none ${className || ''}`} style={{ width: 220 }}>
+            <div className="flex items-center justify-between px-3 py-2.5 border-b border-border-subtle">
+                <span className="text-xs font-bold text-text-secondary uppercase tracking-wider">Nodos</span>
+                <button onClick={() => setIsCollapsed(true)} className="p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors"><PanelLeftClose size={14} /></button>
+            </div>
+            <div className="px-2 py-2 border-b border-border-subtle">
+                <div className="flex items-center gap-2 bg-surface-glass rounded-lg px-2.5 py-1.5">
+                    <Search size={12} className="text-text-muted shrink-0" />
+                    <input type="text" placeholder="Buscar nodos..." value={searchFilter} onChange={e => setSearchFilter(e.target.value)} className="bg-transparent text-xs text-text-primary placeholder-zinc-600 outline-hidden w-full" />
+                </div>
+            </div>
+            <div className="flex-1 overflow-y-auto custom-scrollbar">
+                {filteredCategories.map(cat => (
+                    <div key={cat.id}>
+                        <button onClick={() => setExpandedCategories(p => ({ ...p, [cat.id]: !p[cat.id] }))} className="w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold text-text-secondary hover:text-text-primary hover:bg-surface-glass transition-colors">
+                            {expandedCategories[cat.id] ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+                            <span className="text-text-muted">{cat.icon}</span><span>{cat.label}</span>
+                            <span className="ml-auto text-[10px] text-text-muted bg-surface-glass px-1.5 py-0.5 rounded">{cat.items.length}</span>
+                        </button>
+                        <AnimatePresence>
+                            {expandedCategories[cat.id] && (
+                                <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.15 }} className="overflow-hidden">
+                                    {cat.items.map(item => (
+                                        <div key={`${cat.id}-${item.type}-${item.label}`} draggable onDragStart={e => onDragStart(e, item)}
+                                            className={`flex items-center gap-2 px-3 py-2 mx-2 mb-1 rounded-lg border bg-surface-secondary/60 hover:bg-surface-glass cursor-grab active:cursor-grabbing transition-all group ${item.color}`}>
+                                            <GripVertical size={12} className="text-text-muted group-hover:text-text-secondary shrink-0" />
+                                            <div className="text-text-secondary group-hover:text-text-primary shrink-0">{item.icon}</div>
+                                            <div className="flex-1 min-w-0">
+                                                <div className="text-[11px] font-medium text-text-primary group-hover:text-text-primary truncate">{item.label}</div>
+                                                {item.description && <div className="text-[9px] text-text-muted truncate">{item.description}</div>}
+                                            </div>
+                                        </div>
+                                    ))}
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                ))}
+            </div>
+        </motion.div>
+    );
+};
+
+export { DRAG_DATA_KEY };

package/src/components/studio/NodePropertiesPanel.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { X, Variable } from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+import { useTimelineStore, useEngineStore } from '@decido/engine';
+import { getTrackConfig, DialogueEditor, UIStateEditor, RenderEditor, LogicEditor, TriggerEditor, SetVariableEditor } from './editor/TrackPropertyEditors';
+
+interface NodePropertiesPanelProps { selectedNodeId: string | null; onClose: () => void; }
+
+export const NodePropertiesPanel: React.FC<NodePropertiesPanelProps> = ({ selectedNodeId, onClose }) => {
+    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
+    const timelines = useTimelineStore(s => s.timelines);
+    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
+    const variables = useEngineStore(s => s.variables);
+
+    const kf = timelines[activeTimelineId]?.keyframes.find(k => k.id === selectedNodeId);
+    const track = (kf?.track as string) || '';
+
+    const referencedVars = React.useMemo(() => {
+        if (!kf) return [];
+        const text = (kf.speech || '') + (kf.state || '');
+        const m = text.match(/\{\{([^}]+)\}\}/g) || [];
+        return [...new Set(m.map(x => x.replace(/\{\{|\}\}/g, '').trim()))];
+    }, [kf?.speech, kf?.state, kf]);
+
+    if (!kf) return null;
+
+    const cfg = getTrackConfig(track);
+    const Icon = cfg.icon;
+    const onUpdate = (patch: Record<string, any>) => updateKeyframe(activeTimelineId, kf.id, patch);
+
+    return (
+        <AnimatePresence>
+            <motion.div initial={{ x: 300, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: 300, opacity: 0 }}
+                transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
+                className="absolute right-0 top-0 bottom-0 w-[300px] bg-surface-primary border-l border-border-default z-50 shadow-2xl flex flex-col">
+                {/* Header */}
+                <div className={`p-4 border-b border-border-default flex items-center justify-between ${cfg.bg}`}>
+                    <div className="flex items-center gap-2"><Icon size={16} className={cfg.color} /><h3 className={`text-sm font-bold uppercase tracking-widest ${cfg.color}`}>{cfg.label}</h3></div>
+                    <button onClick={onClose} className="p-1 rounded-md hover:bg-surface-glass text-text-primary/50 hover:text-text-primary transition-colors"><X size={16} /></button>
+                </div>
+                {/* Body */}
+                <div className="flex-1 overflow-y-auto p-4 custom-scrollbar flex flex-col gap-5">
+                    {/* Metadata */}
+                    <div className="flex flex-col gap-2">
+                        <h4 className="text-[10px] font-bold text-text-primary/40 uppercase tracking-widest border-b border-border-default pb-1">Metadatos Base</h4>
+                        <div className="grid grid-cols-2 gap-2 mt-1">
+                            <div className="flex flex-col gap-1"><label className="text-[10px] text-text-muted">Node ID</label><input type="text" value={kf.id} readOnly className="bg-surface-overlay border border-border-subtle rounded px-2 py-1 text-xs text-text-secondary font-mono outline-hidden" /></div>
+                            <div className="flex flex-col gap-1"><label className="text-[10px] text-text-muted">Tiempo (t)</label>
+                                <div className="flex items-center border border-border-default rounded overflow-hidden"><input type="number" step="0.1" value={kf.t} onChange={e => onUpdate({ t: parseFloat(e.target.value) || 0 })} className="bg-surface-glass px-2 py-1 text-xs text-text-primary outline-hidden w-full font-mono" /><span className="bg-surface-glass px-2 py-1 text-xs text-text-muted border-l border-border-default">s</span></div>
+                            </div>
+                        </div>
+                    </div>
+                    {/* Track-specific editor */}
+                    {track === 'dialogue' && <DialogueEditor keyframe={kf} onUpdate={onUpdate} />}
+                    {track === 'ui' && <UIStateEditor keyframe={kf} onUpdate={onUpdate} />}
+                    {track === 'render' && <RenderEditor keyframe={kf} onUpdate={onUpdate} />}
+                    {track === 'logic' && <LogicEditor keyframe={kf} onUpdate={onUpdate} />}
+                    {track === 'trigger' && <TriggerEditor keyframe={kf} onUpdate={onUpdate} />}
+                    {track === 'set' && <SetVariableEditor keyframe={kf} onUpdate={onUpdate} />}
+                    {/* Data Bindings */}
+                    <div className="flex flex-col gap-3 mt-2">
+                        <h4 className="text-[10px] font-bold text-emerald-400/40 uppercase tracking-widest border-b border-emerald-500/20 pb-1 flex items-center gap-1.5"><Variable size={10} />Data Bindings</h4>
+                        {referencedVars.length > 0 && (
+                            <div className="flex flex-col gap-1"><span className="text-[9px] text-text-muted uppercase">Variables Referenciadas</span>
+                                <div className="flex flex-wrap gap-1">{referencedVars.map(v => (
+                                    <span key={v} className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${variables[v] !== undefined ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-red-500/10 border-red-500/20 text-red-400'}`}>
+                                        {`{{${v}}}`} {variables[v] !== undefined ? `= ${variables[v]}` : '⚠ undefined'}
+                                    </span>
+                                ))}</div>
+                            </div>
+                        )}
+                        <div className="p-2 bg-emerald-500/5 border border-emerald-500/10 rounded text-[10px] text-text-muted">
+                            Usa <code className="text-emerald-400 bg-surface-glass px-1 rounded">{`{{variable}}`}</code> en el texto para interpolar valores del Motor.
+                        </div>
+                    </div>
+                </div>
+            </motion.div>
+        </AnimatePresence>
+    );
+};

package/src/components/studio/ReactFlowEditor.tsx

@@ -0,0 +1,242 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+    ReactFlow, MiniMap, Controls, Background,
+    useNodesState, useEdgesState, addEdge,
+    Connection, Edge, Node, MarkerType, ReactFlowProvider, useReactFlow, SelectionMode
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+import { useEngineStore, useTimelineStore } from '@decido/engine';
+import { convertLegacyTimelineToBlueprint } from '@decido/core';
+import { useBlueprintNavigation } from '@decido/engine';
+import { getLayoutedElements } from '../../utils/layoutGraph';
+import { Home, ChevronRight } from 'lucide-react';
+import { getRegisteredMorphComponents } from '../../store/useMorphologyStore';
+
+import { nodeTypes, TRACK_X_MAP, NODE_TYPE_TO_TRACK, mapNodePayload, buildKeyframeDefaults } from './editor/nodeTypeRegistry';
+import { buildStyledEdges } from './editor/edgeStyles';
+import { CanvasContextMenu } from './editor/CanvasContextMenu';
+import { EditorToolbar } from './editor/EditorToolbar';
+import { createEditorKeyHandler } from './editor/editorKeyHandler';
+import { NodePropertiesPanel } from './NodePropertiesPanel';
+import { NodePalette } from './NodePalette';
+import { VariablePanel } from './VariablePanel';
+
+interface ReactFlowEditorProps { className?: string; style?: React.CSSProperties; id?: string; }
+
+const ReactFlowEditorInner: React.FC<ReactFlowEditorProps> = ({ className, style, id }) => {
+    const { fitView, getIntersectingNodes, screenToFlowPosition } = useReactFlow();
+    const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+    const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+    const [isVariablePanelOpen, setIsVariablePanelOpen] = useState(false);
+    const lastFittedBlueprintRef = useRef<string | null>(null);
+    const clipboardRef = useRef<{ nodes: Node[]; edges: Edge[] }>({ nodes: [], edges: [] });
+    const [contextMenu, setContextMenu] = useState<{ x: number; y: number; flowPos: { x: number; y: number } } | null>(null);
+
+    // ─── Store subscriptions ───
+    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
+    const activeNodeIds = useEngineStore(s => s.activeNodeIds);
+    const activeEdgeIds = useEngineStore(s => s.activeEdgeIds);
+    const timelines = useTimelineStore(s => s.timelines);
+    const blueprintLibrary = useTimelineStore(s => s.blueprintLibrary);
+    const updateKeyframePosition = useTimelineStore(s => s.updateKeyframePosition);
+    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
+    const addTimelineEdge = useTimelineStore(s => s.addEdge);
+    const removeTimelineEdge = useTimelineStore(s => s.removeEdge);
+    const addKeyframe = useTimelineStore(s => s.addKeyframe);
+    const removeKeyframe = useTimelineStore(s => s.removeKeyframe);
+    const undo = useTimelineStore(s => s.undo);
+    const redo = useTimelineStore(s => s.redo);
+    const setActiveTimeline = useTimelineStore(s => s.setActiveTimeline);
+    const pastTimelines = useTimelineStore(s => s.pastTimelines);
+    const futureTimelines = useTimelineStore(s => s.futureTimelines);
+
+    useEffect(() => { setActiveTimeline(activeTimelineId); }, [activeTimelineId, setActiveTimeline]);
+
+    // Keyboard: Undo/Redo
+    useEffect(() => {
+        const h = (e: KeyboardEvent) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) { e.preventDefault(); undo(); }
+            else if ((e.metaKey || e.ctrlKey) && (e.key === 'Z' || e.key === 'y')) { e.preventDefault(); redo(); }
+        };
+        window.addEventListener('keydown', h);
+        return () => window.removeEventListener('keydown', h);
+    }, [undo, redo]);
+
+    const canUndo = (pastTimelines[activeTimelineId]?.length || 0) > 0;
+    const canRedo = (futureTimelines[activeTimelineId]?.length || 0) > 0;
+
+    // HSM drill-down
+    const currentBlueprintId = useBlueprintNavigation(s => s.currentBlueprintId);
+    const pushNavigation = useBlueprintNavigation(s => s.pushNavigation);
+    const drillTarget = currentBlueprintId ? blueprintLibrary[currentBlueprintId] : null;
+    const activeTimeline = drillTarget || timelines[activeTimelineId];
+
+    // ─── Sync nodes/edges from timeline ───
+    useEffect(() => {
+        if (!activeTimeline) return;
+        const renderTimelineId = drillTarget ? currentBlueprintId : activeTimelineId;
+        const blueprint = convertLegacyTimelineToBlueprint(renderTimelineId, activeTimeline.keyframes || [], activeTimeline.edges || []);
+        const decidoNodes = Object.values(blueprint.nodes);
+
+        // Position resolution
+        const posMap: Record<string, { x: number; y: number }> = {};
+        decidoNodes.forEach(node => {
+            if (node.visual?.x !== undefined && node.visual?.y !== undefined && (node.visual.y !== 0 || node.visual.x !== 0))
+                posMap[node.id] = { x: node.visual.x, y: node.visual.y };
+        });
+
+        const gapY = 150;
+        let unresolved = decidoNodes.filter(n => !posMap[n.id]);
+        let changes = true;
+        while (unresolved.length > 0 && changes) {
+            changes = false;
+            unresolved = unresolved.filter(n => {
+                const inEdge = blueprint.edges.find(e => e.target === n.id && posMap[e.source]);
+                if (inEdge) {
+                    const src = posMap[inEdge.source];
+                    const pos = { x: src.x, y: src.y + gapY };
+                    let col = true;
+                    while (col) { col = Object.values(posMap).some(p => Math.abs(p.x - pos.x) < 50 && Math.abs(p.y - pos.y) < 50); if (col) pos.x += 250; }
+                    posMap[n.id] = pos; changes = true; return false;
+                }
+                return true;
+            });
+        }
+        unresolved.forEach((n, i) => { posMap[n.id] = { x: TRACK_X_MAP[n.type] || 0, y: i * 100 }; });
+
+        const newNodes: Node[] = decidoNodes.map(dn => ({
+            id: dn.id, type: dn.type, position: posMap[dn.id],
+            parentId: dn.visual?.parentId, extent: dn.visual?.parentId ? 'parent' : undefined,
+            data: { 
+                keyframeId: dn.id, 
+                isInteractive: true, 
+                isExecuting: activeNodeIds.includes(dn.id), 
+                onUpdateNodeData: (nodeId: string, partialData: any) => updateKeyframe(renderTimelineId, nodeId, partialData),
+                variables: useEngineStore.getState().variables,
+                isSpeaking: useEngineStore.getState().isSpeaking,
+                registeredMorphComponents: getRegisteredMorphComponents(),
+                onDrillDown: (blueprintId: string, label: string) => pushNavigation({ blueprintId, label }),
+                ...mapNodePayload(dn) 
+            },
+        }));
+
+        const newEdges = activeTimeline.edges ? buildStyledEdges(activeTimeline.edges, activeNodeIds, activeEdgeIds) : [];
+        setNodes(newNodes);
+        setEdges(newEdges);
+
+        if (lastFittedBlueprintRef.current !== renderTimelineId) {
+            lastFittedBlueprintRef.current = renderTimelineId;
+            const needsLayout = newNodes.every(n => n.position.x === 0 && n.position.y === 0) || newNodes.filter(n => n.position.x === 0 && n.position.y === 0).length > newNodes.length * 0.5;
+            if (needsLayout && newNodes.length > 1) {
+                const { nodes: ln } = getLayoutedElements(newNodes, newEdges, { direction: 'TB' });
+                setNodes(ln); ln.forEach(n => updateKeyframePosition(activeTimelineId, n.id, n.position));
+            }
+            setTimeout(() => fitView({ padding: 0.2, duration: 800 }), 50);
+        }
+    }, [activeTimeline, activeNodeIds, drillTarget, setNodes, setEdges, fitView]);
+
+    // ─── Handlers ───
+    const onConnect = useCallback((p: Connection | Edge) => {
+        setEdges(eds => addEdge(p, eds));
+        addTimelineEdge(activeTimelineId, { id: `edge-${p.source}-${p.target}-${Date.now()}`, source: p.source, target: p.target, sourceHandle: p.sourceHandle || null, targetHandle: p.targetHandle || null });
+    }, [activeTimelineId, addTimelineEdge, setEdges]);
+
+    const onEdgesDelete = useCallback((del: Edge[]) => { del.forEach(e => removeTimelineEdge(activeTimelineId, e.id)); }, [activeTimelineId, removeTimelineEdge]);
+
+    const onNodeDragStop = useCallback((_: React.MouseEvent, node: Node, dragged: Node[]) => {
+        (dragged.length > 1 ? dragged : [node]).forEach(n => {
+            updateKeyframePosition(activeTimelineId, n.id, n.position);
+            if (n.id === node.id) {
+                const groups = getIntersectingNodes(n).filter(g => g.type === 'group');
+                if (n.type !== 'group') updateKeyframe(activeTimelineId, n.id, { parentId: groups[0]?.id || undefined });
+            }
+        });
+    }, [activeTimelineId, updateKeyframePosition, updateKeyframe, getIntersectingNodes]);
+
+    const onNodeClick = useCallback((_: React.MouseEvent, n: Node) => setSelectedNodeId(n.id), []);
+    const onPaneClick = useCallback(() => { setSelectedNodeId(null); setContextMenu(null); }, []);
+    const onPaneContextMenu = useCallback((e: React.MouseEvent | MouseEvent) => {
+        e.preventDefault();
+        const flowPos = screenToFlowPosition({ x: (e as React.MouseEvent).clientX, y: (e as React.MouseEvent).clientY });
+        setContextMenu({ x: (e as React.MouseEvent).clientX, y: (e as React.MouseEvent).clientY, flowPos });
+    }, [screenToFlowPosition]);
+
+    const addNodeAt = useCallback((track: string, label: string, extra?: any) => {
+        if (!contextMenu) return;
+        const targetId = currentBlueprintId || activeTimelineId;
+        addKeyframe(targetId, buildKeyframeDefaults(track, label, contextMenu.flowPos, extra));
+        setContextMenu(null);
+    }, [contextMenu, activeTimelineId, currentBlueprintId, addKeyframe]);
+
+    // ─── Keyboard: Select All, Copy, Paste, Delete ───
+    useEffect(() => {
+        const h = createEditorKeyHandler({
+            getNodes: () => nodes, getEdges: () => edges, setNodes, setEdges,
+            clipboard: clipboardRef, activeTimelineId, currentBlueprintId,
+            addKeyframe, addTimelineEdge, removeKeyframe, removeTimelineEdge,
+            setSelectedNodeId, NODE_TYPE_TO_TRACK,
+        });
+        window.addEventListener('keydown', h);
+        return () => window.removeEventListener('keydown', h);
+    }, [nodes, edges, activeTimelineId, currentBlueprintId, setNodes, setEdges, addKeyframe, addTimelineEdge, removeKeyframe, removeTimelineEdge]);
+
+    // ─── Breadcrumbs ───
+    const breadcrumbs = useBlueprintNavigation(s => s.navigationStack);
+    const navigateToLevel = useBlueprintNavigation(s => s.navigateToLevel);
+    const isInsideSubflow = breadcrumbs.length > 1;
+
+    return (
+        <div style={style} className={`relative flex flex-col overflow-hidden w-full h-full ${className || ''}`} id={id}>
+            {isInsideSubflow && (
+                <div className="flex-none flex items-center gap-1 px-3 py-2 bg-surface-overlay border-b border-border-default backdrop-blur-xs z-10">
+                    <button onClick={() => navigateToLevel(0)} className="flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary transition-colors px-1.5 py-0.5 rounded hover:bg-surface-glass"><Home size={12} /><span>Root</span></button>
+                    {breadcrumbs.slice(1).map((frame, idx) => (
+                        <React.Fragment key={idx + 1}>
+                            <ChevronRight size={12} className="text-text-muted" />
+                            <button onClick={() => navigateToLevel(idx + 1)} className={`text-xs px-1.5 py-0.5 rounded transition-colors ${idx + 1 === breadcrumbs.length - 1 ? 'text-purple-300 bg-purple-500/10 border border-purple-500/20' : 'text-text-secondary hover:text-text-primary hover:bg-surface-glass'}`}>📦 {frame.label}</button>
+                        </React.Fragment>
+                    ))}
+                </div>
+            )}
+
+            <div className="flex-1 relative flex overflow-hidden"
+                onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }}
+                onDrop={e => {
+                    e.preventDefault();
+                    const raw = e.dataTransfer.getData('application/decido-node'); if (!raw) return;
+                    try {
+                        const { type, label, meta } = JSON.parse(raw);
+                        const flowPos = screenToFlowPosition({ x: e.clientX, y: e.clientY });
+                        addKeyframe(currentBlueprintId || activeTimelineId, buildKeyframeDefaults(type, label, flowPos, meta));
+                    } catch (err) { console.error('[ReactFlowEditor] Drop failed:', err); }
+                }}
+            >
+                <NodePalette />
+                <ReactFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onEdgesDelete={onEdgesDelete}
+                    onConnect={onConnect} onNodeDragStop={onNodeDragStop} onNodeClick={onNodeClick} onPaneClick={onPaneClick} onPaneContextMenu={onPaneContextMenu}
+                    colorMode="dark" fitView fitViewOptions={{ padding: 0.2 }} minZoom={0.1} selectionOnDrag panOnDrag={[1]} selectionMode={SelectionMode.Partial} multiSelectionKeyCode="Meta" deleteKeyCode={null}>
+                    <Controls className="fill-white" />
+                    <EditorToolbar canUndo={canUndo} canRedo={canRedo} undoCount={pastTimelines[activeTimelineId]?.length || 0} redoCount={futureTimelines[activeTimelineId]?.length || 0}
+                        undo={undo} redo={redo} nodes={nodes} edges={edges} setNodes={setNodes} updateKeyframePosition={updateKeyframePosition} removeKeyframe={removeKeyframe}
+                        activeTimelineId={activeTimelineId} currentBlueprintId={currentBlueprintId} fitView={fitView} setSelectedNodeId={setSelectedNodeId} />
+                    <MiniMap nodeStrokeColor={() => '#ffffff'} nodeColor={() => '#333333'} maskColor="rgba(0, 0, 0, 0.7)" />
+                    <Background color="#555" gap={20} />
+                </ReactFlow>
+                {contextMenu && (
+                    <>
+                        <div className="fixed inset-0 z-998" onClick={() => setContextMenu(null)} />
+                        <CanvasContextMenu x={contextMenu.x} y={contextMenu.y} onAdd={addNodeAt} onClose={() => setContextMenu(null)} />
+                    </>
+                )}
+            </div>
+            {selectedNodeId && <NodePropertiesPanel selectedNodeId={selectedNodeId} onClose={() => setSelectedNodeId(null)} />}
+            <VariablePanel isOpen={isVariablePanelOpen} onToggle={() => setIsVariablePanelOpen(o => !o)} />
+        </div>
+    );
+};
+
+export const ReactFlowEditor: React.FC<ReactFlowEditorProps> = (props) => (
+    <ReactFlowProvider><ReactFlowEditorInner {...props} /></ReactFlowProvider>
+);

package/src/components/studio/TimelineEditor.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { useTimelineStore } from '@decido/engine';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+import { Plus, MonitorPlay } from 'lucide-react';
+import { AnimatePresence } from 'motion/react';
+import { TimelineKeyframeCard } from './TimelineKeyframeCard';
+
+export const TimelineEditor = () => {
+    const activeTimelineId = usePlaygroundStore(state => state.prototypeBrand); // Sync with currently viewed brand
+    const timelines = useTimelineStore(state => state.timelines);
+    const addKeyframe = useTimelineStore(state => state.addKeyframe);
+    const updateKeyframe = useTimelineStore(state => state.updateKeyframe);
+    const removeKeyframe = useTimelineStore(state => state.removeKeyframe);
+    const updateDuration = useTimelineStore(state => state.updateDuration);
+
+    // For drag and drop reordering, we need to map over keyframes, but time 't' usually dictates order.
+    // For now we'll just allow direct editing of 't' which auto-sorts in the store.
+    const activeTimeline = timelines[activeTimelineId];
+
+    if (!activeTimeline) return null;
+
+    const handleAdd = (trackName: 'dialogue' | 'ui' | 'logic') => {
+        addKeyframe(activeTimelineId, {
+            t: activeTimeline.duration,
+            track: trackName,
+            ...(trackName === 'dialogue' ? { speech: '', actorId: 'system' } : {}),
+            ...(trackName === 'ui' ? { state: 'new_state', canvas: false } : {}),
+            ...(trackName === 'logic' ? { intent: '' } : {})
+        });
+    };
+
+    const tracks = ['dialogue', 'ui', 'logic'] as const;
+
+    return (
+        <div className="flex flex-col h-full bg-surface-secondary text-text-primary border-l border-border-default w-full shadow-2xl z-40 overflow-hidden relative">
+            <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.10] mix-blend-overlay pointer-events-none z-0"></div>
+
+            <div className="p-4 border-b border-border-default relative z-10 flex justify-between items-center bg-surface-glass">
+                <div>
+                    <h2 className="text-lg font-bold text-text-primary flex items-center gap-2">
+                        <MonitorPlay size={18} className="text-purple-400" />
+                        Multi-Track Sequence
+                    </h2>
+                    <p className="text-xs text-text-secondary mt-1 font-mono uppercase tracking-wider">
+                        Editando: {activeTimeline.name}
+                    </p>
+                </div>
+                <div className="text-right flex flex-col items-end gap-1">
+                    <span className="text-xs text-text-muted font-mono">Duración Global (s)</span>
+                    <input
+                        type="number"
+                        className="bg-surface-glass border border-border-strong rounded px-2 py-1 w-20 text-text-primary text-right text-sm focus:outline-hidden focus:border-purple-400"
+                        value={activeTimeline.duration}
+                        onChange={(e) => updateDuration(activeTimelineId, parseFloat(e.target.value) || 0)}
+                    />
+                </div>
+            </div>
+
+            <div className="flex-1 flex overflow-hidden w-full relative z-10">
+                {/* Left Sidebar: Tracks list */}
+                <div className="w-[220px] shrink-0 flex flex-col border-r border-border-default bg-surface-primary z-20">
+                    <div className="h-8 border-b border-border-default shrink-0 bg-surface-secondary" />
+                    
+                    {tracks.map(track => (
+                        <div key={track} className={`h-[170px] flex flex-col justify-center p-4 border-b border-border-subtle relative
+                            ${track === 'dialogue' ? 'bg-purple-500/5' : 
+                              track === 'ui' ? 'bg-cyan-500/5' : 
+                              'bg-orange-500/5'}`}>
+                            <div className={`text-[10px] font-bold uppercase tracking-widest
+                                ${track === 'dialogue' ? 'text-purple-400' : 
+                                  track === 'ui' ? 'text-cyan-400' : 
+                                  'text-orange-400'}`}>
+                                {track === 'dialogue' ? 'Track 1: Diálogo & Audio' : 
+                                 track === 'ui' ? 'Track 2: UI & Canvas' : 
+                                 'Track 3: Lógica & MCP'}
+                            </div>
+                            <button
+                                onClick={() => handleAdd(track)}
+                                className="mt-3 w-fit py-1.5 px-3 rounded text-xs transition-colors flex items-center gap-1 border border-border-default hover:bg-surface-glass text-text-primary/70 hover:text-text-primary"
+                            >
+                                <Plus size={12} /> Add Node
+                            </button>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Right Area: Scrolling Timeline */}
+                <div className="flex-1 overflow-x-auto overflow-y-hidden custom-scrollbar bg-surface-secondary relative">
+                    <div className="h-full relative min-w-max pb-10" style={{ width: `${Math.max(activeTimeline.duration, 15) * 100 + 400}px` }}>
+                        
+                        {/* Visual Time Ruler (Sticky top) */}
+                        <div className="h-8 border-b border-border-default sticky top-0 bg-surface-secondary z-20 flex items-end">
+                            {Array.from({ length: Math.ceil(Math.max(activeTimeline.duration, 15)) + 5 }).map((_, i) => (
+                                <div key={i} className="absolute h-3 border-l border-border-strong" style={{ left: `${i * 100}px` }}>
+                                    <span className="absolute -top-5 -left-1.5 text-[10px] text-text-primary/30 font-mono tracking-tighter">{i}s</span>
+                                    {/* Minor ticks */}
+                                    <div className="absolute left-[50px] -bottom-3 h-1.5 border-l border-border-default" />
+                                </div>
+                            ))}
+                        </div>
+
+                        {/* Track Lanes */}
+                        <div className="flex flex-col w-full relative">
+                            {tracks.map(track => (
+                                <div key={track} className="h-[170px] border-b border-border-subtle relative hover:bg-surface-glass transition-colors group/lane">
+                                    <AnimatePresence>
+                                        {activeTimeline.keyframes
+                                            .filter(kf => kf.track === track)
+                                            .map((kf) => (
+                                                <TimelineKeyframeCard key={kf.id} kf={kf} track={track}
+                                                    activeTimelineId={activeTimelineId} updateKeyframe={updateKeyframe} removeKeyframe={removeKeyframe} />
+                                            ))}
+                                    </AnimatePresence>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/components/studio/TimelineKeyframeCard.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Trash2, Clock } from 'lucide-react';
+import { motion } from 'motion/react';
+
+interface TimelineKeyframeCardProps {
+    kf: any;
+    track: 'dialogue' | 'ui' | 'logic';
+    activeTimelineId: string;
+    updateKeyframe: (tid: string, id: string, patch: any) => void;
+    removeKeyframe: (tid: string, id: string) => void;
+}
+
+const trackColors = {
+    dialogue: { clock: 'text-purple-400/70', input: 'focus:border-purple-500/50', text: 'text-purple-300', label: 'text-purple-400/70' },
+    ui: { clock: 'text-cyan-400/70', input: 'focus:border-cyan-500/50', text: 'text-text-primary', label: 'text-cyan-400/70' },
+    logic: { clock: 'text-orange-400/70', input: 'focus:border-orange-500/50', text: 'text-text-primary', label: 'text-orange-400/70' },
+};
+
+export const TimelineKeyframeCard = React.memo(function TimelineKeyframeCard({
+    kf, track, activeTimelineId, updateKeyframe, removeKeyframe
+}: TimelineKeyframeCardProps) {
+    const colors = trackColors[track];
+
+    return (
+        <motion.div
+            layout
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.9 }}
+            transition={{ duration: 0.2 }}
+            style={{ left: `${kf.t * 100}px`, width: '260px' }}
+            className="absolute top-2 bottom-2 bg-surface-secondary border border-border-default rounded-xl p-3 flex flex-col gap-2 group hover:border-border-subtle0 shadow-[0_8px_30px_rgb(0,0,0,0.5)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.8)] transition-all z-10"
+        >
+            {/* Header */}
+            <div className="flex items-center justify-between gap-2 border-b border-border-subtle pb-1.5">
+                <div className="flex items-center gap-1 bg-surface-overlay px-1.5 py-0.5 rounded border border-border-default transition-colors">
+                    <Clock size={10} className={colors.clock} />
+                    <input type="number" step="0.1"
+                        className="bg-transparent w-10 text-xs text-text-primary font-mono focus:outline-hidden text-center"
+                        value={kf.t}
+                        onChange={(e) => updateKeyframe(activeTimelineId, kf.id, { t: parseFloat(e.target.value) || 0 })} />
+                </div>
+                <button onClick={() => removeKeyframe(activeTimelineId, kf.id)}
+                    className="p-1 text-text-muted hover:text-red-400 hover:bg-red-500/10 rounded transition-colors opacity-0 group-hover:opacity-100"
+                    title="Eliminar Keyframe">
+                    <Trash2 size={12} />
+                </button>
+            </div>
+
+            {/* Payload */}
+            {track === 'dialogue' && (
+                <div className="flex flex-col gap-2 flex-1">
+                    <div className="flex items-center gap-2">
+                        <span className={`text-[9px] uppercase tracking-wider ${colors.label} w-10`}>Actor</span>
+                        <input type="text"
+                            className={`flex-1 bg-surface-glass border border-border-subtle rounded px-2 py-1 text-xs ${colors.text} focus:outline-hidden ${colors.input}`}
+                            value={kf.actorId || ''} placeholder="system"
+                            onChange={(e) => updateKeyframe(activeTimelineId, kf.id, { actorId: e.target.value })} />
+                    </div>
+                    <textarea
+                        className={`w-full bg-surface-glass border border-border-subtle rounded px-2 py-1.5 text-xs text-text-primary focus:outline-hidden ${colors.input} resize-none flex-1 min-h-0`}
+                        placeholder="Texto a sintetizar..." value={kf.speech || ''}
+                        onChange={(e) => updateKeyframe(activeTimelineId, kf.id, { speech: e.target.value })} />
+                </div>
+            )}
+
+            {track === 'ui' && (
+                <div className="flex flex-col gap-2 flex-1 justify-center">
+                    <div className="flex flex-col gap-1">
+                        <span className={`text-[9px] uppercase tracking-wider ${colors.label}`}>App State</span>
+                        <input type="text"
+                            className={`w-full bg-surface-glass border border-border-subtle rounded px-2 py-1.5 text-xs text-text-primary focus:outline-hidden ${colors.input}`}
+                            value={kf.state || ''} placeholder="idle"
+                            onChange={(e) => updateKeyframe(activeTimelineId, kf.id, { state: e.target.value })} />
+                    </div>
+                    <label className="flex items-center gap-2 p-1.5 mt-1 rounded hover:bg-surface-glass cursor-pointer border border-transparent hover:border-border-subtle transition-colors">
+                        <input type="checkbox" checked={kf.canvas || false}
+                            onChange={(e) => updateKeyframe(activeTimelineId, kf.id, { canvas: e.target.checked })}
+                            className="rounded border-border-strong bg-surface-glass text-cyan-500 w-3.5 h-3.5" />
+                        <span className="text-[10px] uppercase tracking-wider text-cyan-300">Mostrar Lienzo 3D</span>
+                    </label>
+                </div>
+            )}
+
+            {track === 'logic' && (
+                <div className="flex flex-col gap-1 flex-1 justify-center">
+                    <span className={`text-[9px] uppercase tracking-wider ${colors.label}`}>Intent / Action</span>
+                    <input type="text"
+                        className={`w-full bg-surface-glass border border-border-subtle rounded px-2 py-1.5 text-xs text-text-primary focus:outline-hidden ${colors.input} font-mono mt-1`}
+                        value={kf.intent || ''} placeholder="action_name"
+                        onChange={(e) => updateKeyframe(activeTimelineId, kf.id, { intent: e.target.value })} />
+                    <span className="text-[9px] text-text-muted leading-tight mt-2 px-1">
+                        Dispara un trigger local o llamada MCP.
+                    </span>
+                </div>
+            )}
+        </motion.div>
+    );
+});