@decido/shell 1.0.0 → 4.0.1

package/src/components/studio/VariablePanel.tsx

@@ -1,181 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Variable, Plus, Trash2, ChevronDown, ChevronRight, Eye, EyeOff, Search } from 'lucide-react';
-import { useEngineStore } from '@decido/engine';
-
-interface VariablePanelProps {
-    isOpen: boolean;
-    onToggle: () => void;
-}
-
-export const VariablePanel: React.FC<VariablePanelProps> = ({ isOpen, onToggle }) => {
-    const variables = useEngineStore(s => s.variables);
-    const setVariable = useEngineStore(s => s.setVariable);
-
-    const [newKey, setNewKey] = useState('');
-    const [newValue, setNewValue] = useState('');
-    const [search, setSearch] = useState('');
-    const [editingKey, setEditingKey] = useState<string | null>(null);
-
-    const entries = Object.entries(variables).filter(([k]) =>
-        !search || k.toLowerCase().includes(search.toLowerCase())
-    );
-
-    const handleAdd = useCallback(() => {
-        if (!newKey.trim()) return;
-        // Try parsing as JSON/number/boolean
-        let parsed: any = newValue;
-        if (newValue === 'true') parsed = true;
-        else if (newValue === 'false') parsed = false;
-        else if (!isNaN(Number(newValue)) && newValue.trim()) parsed = Number(newValue);
-        else try { parsed = JSON.parse(newValue); } catch {}
-
-        setVariable(newKey.trim(), parsed);
-        setNewKey('');
-        setNewValue('');
-    }, [newKey, newValue, setVariable]);
-
-    const handleDelete = useCallback((key: string) => {
-        // Set to undefined to "delete" from engine store
-        const currentVars = useEngineStore.getState().variables;
-        const updated = { ...currentVars };
-        delete updated[key];
-        // Use internal set to replace variables
-        useEngineStore.setState({ variables: updated });
-    }, []);
-
-    const handleUpdate = useCallback((key: string, rawValue: string) => {
-        let parsed: any = rawValue;
-        if (rawValue === 'true') parsed = true;
-        else if (rawValue === 'false') parsed = false;
-        else if (!isNaN(Number(rawValue)) && rawValue.trim()) parsed = Number(rawValue);
-        else try { parsed = JSON.parse(rawValue); } catch {}
-
-        setVariable(key, parsed);
-        setEditingKey(null);
-    }, [setVariable]);
-
-    const getTypeColor = (val: any): string => {
-        if (typeof val === 'boolean') return 'text-amber-400';
-        if (typeof val === 'number') return 'text-blue-400';
-        if (typeof val === 'object') return 'text-violet-400';
-        return 'text-emerald-400';
-    };
-
-    const getTypeLabel = (val: any): string => {
-        if (typeof val === 'boolean') return 'bool';
-        if (typeof val === 'number') return 'num';
-        if (typeof val === 'object') return 'obj';
-        return 'str';
-    };
-
-    return (
-        <div className="absolute bottom-0 left-0 right-0 z-30">
-            {/* Toggle Bar */}
-            <button
-                onClick={onToggle}
-                className="flex items-center gap-2 px-3 py-1.5 bg-surface-secondary/90 backdrop-blur-xs border-t border-x border-border-default rounded-t-lg text-xs text-text-secondary hover:text-emerald-400 transition-colors ml-4"
-            >
-                <Variable size={12} />
-                <span className="font-bold uppercase tracking-wider text-[9px]">Variables</span>
-                <span className="ml-1 bg-emerald-500/20 text-emerald-400 text-[9px] px-1.5 py-0.5 rounded-full font-mono">{Object.keys(variables).length}</span>
-                {isOpen ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
-            </button>
-
-            <AnimatePresence>
-                {isOpen && (
-                    <motion.div
-                        initial={{ height: 0, opacity: 0 }}
-                        animate={{ height: 'auto', opacity: 1 }}
-                        exit={{ height: 0, opacity: 0 }}
-                        transition={{ duration: 0.2 }}
-                        className="bg-surface-secondary/95 backdrop-blur-xl border-t border-border-default overflow-hidden"
-                    >
-                        <div className="max-h-[220px] overflow-y-auto custom-scrollbar">
-                            {/* Search + Add */}
-                            <div className="flex items-center gap-2 p-2 border-b border-border-subtle">
-                                <div className="flex items-center gap-1 flex-1 bg-surface-overlay rounded-lg px-2 border border-border-subtle">
-                                    <Search size={12} className="text-text-muted" />
-                                    <input
-                                        type="text"
-                                        placeholder="Buscar..."
-                                        value={search}
-                                        onChange={e => setSearch(e.target.value)}
-                                        className="bg-transparent text-xs text-text-primary outline-hidden py-1.5 w-full placeholder-zinc-600"
-                                    />
-                                </div>
-                            </div>
-
-                            {/* Variables Table */}
-                            <div className="divide-y divide-white/5">
-                                {entries.length === 0 && (
-                                    <div className="text-center text-text-muted text-[10px] py-4">
-                                        {search ? 'Sin resultados' : 'No hay variables definidas'}
-                                    </div>
-                                )}
-                                {entries.map(([key, val]) => (
-                                    <div key={key} className="flex items-center gap-2 px-3 py-1.5 hover:bg-surface-glass group transition-colors">
-                                        <span className={`text-[9px] font-bold uppercase ${getTypeColor(val)} bg-surface-glass px-1 py-0.5 rounded`}>{getTypeLabel(val)}</span>
-                                        <span className="text-xs text-text-primary font-mono truncate min-w-[100px]">{key}</span>
-                                        <span className="text-text-muted text-[10px]">=</span>
-                                        {editingKey === key ? (
-                                            <input
-                                                autoFocus
-                                                defaultValue={typeof val === 'object' ? JSON.stringify(val) : String(val)}
-                                                onBlur={e => handleUpdate(key, e.target.value)}
-                                                onKeyDown={e => { if (e.key === 'Enter') handleUpdate(key, (e.target as HTMLInputElement).value); if (e.key === 'Escape') setEditingKey(null); }}
-                                                className="flex-1 bg-surface-overlay border border-emerald-500/30 rounded px-1.5 py-0.5 text-xs text-text-primary outline-hidden font-mono"
-                                            />
-                                        ) : (
-                                            <span
-                                                onClick={() => setEditingKey(key)}
-                                                className={`flex-1 text-xs font-mono truncate cursor-pointer hover:text-text-primary transition-colors ${getTypeColor(val)}`}
-                                            >
-                                                {typeof val === 'object' ? JSON.stringify(val) : String(val)}
-                                            </span>
-                                        )}
-                                        <button
-                                            onClick={() => handleDelete(key)}
-                                            className="opacity-0 group-hover:opacity-100 text-text-muted hover:text-red-400 transition-all p-0.5"
-                                        >
-                                            <Trash2 size={10} />
-                                        </button>
-                                    </div>
-                                ))}
-                            </div>
-
-                            {/* Add New Variable */}
-                            <div className="flex items-center gap-2 p-2 border-t border-border-subtle bg-surface-glass">
-                                <Plus size={12} className="text-emerald-500" />
-                                <input
-                                    type="text"
-                                    placeholder="nombre"
-                                    value={newKey}
-                                    onChange={e => setNewKey(e.target.value)}
-                                    onKeyDown={e => { if (e.key === 'Enter') handleAdd(); }}
-                                    className="bg-surface-overlay border border-border-subtle rounded px-2 py-1 text-xs text-emerald-300 font-mono outline-hidden w-[120px] focus:border-emerald-500/30"
-                                />
-                                <span className="text-text-muted text-[10px]">=</span>
-                                <input
-                                    type="text"
-                                    placeholder="valor"
-                                    value={newValue}
-                                    onChange={e => setNewValue(e.target.value)}
-                                    onKeyDown={e => { if (e.key === 'Enter') handleAdd(); }}
-                                    className="bg-surface-overlay border border-border-subtle rounded px-2 py-1 text-xs text-text-primary font-mono outline-hidden flex-1 focus:border-emerald-500/30"
-                                />
-                                <button
-                                    onClick={handleAdd}
-                                    disabled={!newKey.trim()}
-                                    className="px-2 py-1 text-[10px] bg-emerald-500/10 text-emerald-400 rounded font-bold hover:bg-emerald-500/20 disabled:opacity-30 transition-colors"
-                                >
-                                    Agregar
-                                </button>
-                            </div>
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-        </div>
-    );
-};

package/src/components/studio/blueprint/BlueprintCard.tsx

@@ -1,82 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { FileText, Network, MoreVertical, Edit3, Copy, Trash2 } from 'lucide-react';
-
-interface BlueprintCardProps {
-    id: string;
-    name: string;
-    nodeCount: number;
-    isActive: boolean;
-    isSubflow?: boolean;
-    onSelect: () => void;
-    onRename: (name: string) => void;
-    onDuplicate: () => void;
-    onDelete?: () => void;
-}
-
-export const BlueprintCard: React.FC<BlueprintCardProps> = ({
-    id, name, nodeCount, isActive, isSubflow, onSelect, onRename, onDuplicate, onDelete
-}) => {
-    const [isEditing, setIsEditing] = useState(false);
-    const [editName, setEditName] = useState(name);
-    const [menuOpen, setMenuOpen] = useState(false);
-
-    const handleSubmitRename = () => {
-        const t = editName.trim();
-        if (t && t !== name) onRename(t);
-        setIsEditing(false);
-    };
-
-    const accent = isSubflow ? 'violet' : 'cyan';
-    const Icon = isSubflow ? Network : FileText;
-
-    return (
-        <div
-            className={`group relative flex items-center gap-2 px-3 py-2 rounded-xl cursor-pointer transition-all mb-0.5 ${
-                isActive ? `bg-${accent}-500/15 border border-${accent}-500/30` : 'hover:bg-surface-glass border border-transparent'
-            }`}
-            onClick={() => !isEditing && onSelect()}
-        >
-            <Icon size={14} className={isActive ? `text-${accent}-400` : isSubflow ? 'text-violet-400/60' : 'text-text-muted'} />
-
-            {isEditing ? (
-                <div className="flex-1 flex items-center gap-1">
-                    <input autoFocus value={editName} onChange={e => setEditName(e.target.value)}
-                        onKeyDown={e => { if (e.key === 'Enter') handleSubmitRename(); if (e.key === 'Escape') setIsEditing(false); }}
-                        onBlur={handleSubmitRename}
-                        className="flex-1 bg-surface-glass border border-cyan-500/30 rounded px-2 py-0.5 text-xs text-text-primary focus:outline-hidden font-mono"
-                        onClick={e => e.stopPropagation()} />
-                </div>
-            ) : (
-                <>
-                    <div className="flex-1 min-w-0">
-                        <div className={`text-xs font-medium truncate ${isActive ? 'text-text-primary' : isSubflow ? 'text-text-secondary' : 'text-text-primary'}`}>{name || id}</div>
-                        <div className="text-[10px] text-text-muted font-mono">{nodeCount} nodos</div>
-                    </div>
-                    {isSubflow && <span className="text-[9px] bg-violet-500/10 text-violet-400 px-1.5 py-0.5 rounded-full font-mono">sub</span>}
-                    <button onClick={e => { e.stopPropagation(); setMenuOpen(!menuOpen); }}
-                        className="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-surface-glass text-text-muted transition-all">
-                        <MoreVertical size={14} />
-                    </button>
-                </>
-            )}
-
-            <AnimatePresence>
-                {menuOpen && (
-                    <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.9 }}
-                        className="absolute right-0 top-full z-50 bg-surface-tertiary border border-border-default rounded-xl shadow-2xl overflow-hidden mt-1 min-w-[140px]"
-                        onClick={e => e.stopPropagation()}>
-                        <button onClick={() => { setEditName(name || id); setIsEditing(true); setMenuOpen(false); }}
-                            className="flex items-center gap-2 w-full px-3 py-2 text-xs text-text-primary hover:bg-surface-glass transition-colors"><Edit3 size={12} /> Renombrar</button>
-                        <button onClick={() => { onDuplicate(); setMenuOpen(false); }}
-                            className="flex items-center gap-2 w-full px-3 py-2 text-xs text-text-primary hover:bg-surface-glass transition-colors"><Copy size={12} /> Duplicar</button>
-                        {onDelete && (
-                            <button onClick={() => { onDelete(); setMenuOpen(false); }}
-                                className="flex items-center gap-2 w-full px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 transition-colors border-t border-border-subtle"><Trash2 size={12} /> Eliminar</button>
-                        )}
-                    </motion.div>
-                )}
-            </AnimatePresence>
-        </div>
-    );
-};

package/src/components/studio/editor/CanvasContextMenu.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { MessageCircle, Cpu, Monitor, Image, Network, LogIn, LogOut, Zap, Layout, GitBranch } from 'lucide-react';
-import { useUIComponentStore } from '../../../store/useUIComponentStore';
-
-// ─── Canvas Context Menu (right-click on pane) ───
-export interface CanvasContextMenuProps {
-    x: number;
-    y: number;
-    onAdd: (track: string, label: string, extra?: any) => void;
-    onClose: () => void;
-}
-
-type MenuItem = { section?: string; track?: string; label?: string; icon?: React.ReactNode; color?: string; extra?: any };
-
-const MENU_ITEMS: MenuItem[] = [
-    { section: 'Diálogo' },
-    { track: 'dialogue', label: 'Dialogue Node', icon: <MessageCircle size={14} className="text-blue-400" />, color: 'hover:bg-blue-500/10' },
-    { section: 'Lógica' },
-    { track: 'logic', label: 'Logic Gate', icon: <Cpu size={14} className="text-amber-400" />, color: 'hover:bg-amber-500/10' },
-    { section: 'Estado UI' },
-    { track: 'ui', label: 'State Change', icon: <Monitor size={14} className="text-purple-400" />, color: 'hover:bg-purple-500/10' },
-    { section: 'HSM / Subflujos' },
-    { track: 'subflow', label: 'Subflow', icon: <Network size={14} className="text-violet-400" />, color: 'hover:bg-violet-500/10' },
-    { track: 'entry', label: 'Entry', icon: <LogIn size={14} className="text-emerald-400" />, color: 'hover:bg-emerald-500/10' },
-    { track: 'return', label: 'Return', icon: <LogOut size={14} className="text-rose-400" />, color: 'hover:bg-rose-500/10' },
-    { section: 'Triggers / Branching' },
-    { track: 'trigger', label: 'Event Trigger', icon: <Zap size={14} className="text-yellow-400" />, color: 'hover:bg-yellow-500/10' },
-    { track: 'condition', label: 'Condición', icon: <GitBranch size={14} className="text-amber-400" />, color: 'hover:bg-amber-500/10' },
-    { track: 'set', label: 'Set Variable', icon: <Layout size={14} className="text-violet-400" />, color: 'hover:bg-violet-500/10' },
-    { section: 'Morfología' },
-    { track: 'morph', label: 'Morph Stage', icon: <Monitor size={14} className="text-purple-400" />, color: 'hover:bg-purple-500/10' },
-    // Shell: Registro
-    { section: '🖥️ Shell: Registro' },
-    { track: 'shell:registerButton', label: 'Activity Bar', icon: <Monitor size={14} className="text-teal-400" />, color: 'hover:bg-teal-500/10', extra: { shellAction: 'registerActivityBarItem' } },
-    { track: 'shell:registerTab', label: 'Open Tab', icon: <Monitor size={14} className="text-cyan-400" />, color: 'hover:bg-cyan-500/10', extra: { shellAction: 'openTab' } },
-    { track: 'shell:registerPanel', label: 'Panel View', icon: <Monitor size={14} className="text-indigo-400" />, color: 'hover:bg-indigo-500/10', extra: { shellAction: 'registerPanelView' } },
-    { track: 'shell:registerSidebar', label: 'Sidebar View', icon: <Monitor size={14} className="text-sky-400" />, color: 'hover:bg-sky-500/10', extra: { shellAction: 'registerSidebarView' } },
-    { track: 'shell:registerStatusBar', label: 'Status Bar', icon: <Monitor size={14} className="text-emerald-400" />, color: 'hover:bg-emerald-500/10', extra: { shellAction: 'registerStatusBarItem' } },
-    { track: 'shell:registerTopBar', label: 'Top Bar', icon: <Monitor size={14} className="text-violet-400" />, color: 'hover:bg-violet-500/10', extra: { shellAction: 'registerTopBarItem' } },
-    { track: 'shell:registerAction', label: 'Register Cmd', icon: <Monitor size={14} className="text-amber-400" />, color: 'hover:bg-amber-500/10', extra: { shellAction: 'registerCommand' } },
-    // Shell: Layout
-    { section: '🖥️ Shell: Layout' },
-    { track: 'shell:toggleSidebar', label: 'Toggle Sidebar', icon: <Monitor size={14} className="text-sky-400" />, color: 'hover:bg-sky-500/10', extra: { shellAction: 'toggleSidebar' } },
-    { track: 'shell:togglePanel', label: 'Toggle Panel', icon: <Monitor size={14} className="text-indigo-400" />, color: 'hover:bg-indigo-500/10', extra: { shellAction: 'togglePanel' } },
-    { track: 'shell:splitPane', label: 'Split Pane', icon: <Monitor size={14} className="text-violet-400" />, color: 'hover:bg-violet-500/10', extra: { shellAction: 'splitPane' } },
-    { track: 'shell:focusTab', label: 'Focus Tab', icon: <Monitor size={14} className="text-cyan-400" />, color: 'hover:bg-cyan-500/10', extra: { shellAction: 'focusTab' } },
-    { track: 'shell:closeTab', label: 'Close Tab', icon: <Monitor size={14} className="text-rose-400" />, color: 'hover:bg-rose-500/10', extra: { shellAction: 'closeTab' } },
-    // Shell: Tema
-    { section: '🖥️ Shell: Tema' },
-    { track: 'shell:setTheme', label: 'Set Theme', icon: <Monitor size={14} className="text-amber-400" />, color: 'hover:bg-amber-500/10', extra: { shellAction: 'setTheme' } },
-    { track: 'shell:applyPalette', label: 'Apply Palette', icon: <Monitor size={14} className="text-pink-400" />, color: 'hover:bg-pink-500/10', extra: { shellAction: 'applyPalette' } },
-    { track: 'shell:updateToken', label: 'CSS Token', icon: <Monitor size={14} className="text-orange-400" />, color: 'hover:bg-orange-500/10', extra: { shellAction: 'updateToken' } },
-    // Shell: Interacción
-    { section: '🖥️ Shell: Interacción' },
-    { track: 'shell:notification', label: 'Notification', icon: <Monitor size={14} className="text-emerald-400" />, color: 'hover:bg-emerald-500/10', extra: { shellAction: 'showNotification' } },
-    { track: 'shell:modal', label: 'Show Modal', icon: <Monitor size={14} className="text-violet-400" />, color: 'hover:bg-violet-500/10', extra: { shellAction: 'showModal' } },
-    { track: 'shell:execCommand', label: 'Exec Command', icon: <Monitor size={14} className="text-teal-400" />, color: 'hover:bg-teal-500/10', extra: { shellAction: 'executeCommand' } },
-    { track: 'shell:shortcut', label: 'Shortcut', icon: <Monitor size={14} className="text-amber-400" />, color: 'hover:bg-amber-500/10', extra: { shellAction: 'registerShortcut' } },
-    { track: 'shell:emitEvent', label: 'Emit Event', icon: <Monitor size={14} className="text-rose-400" />, color: 'hover:bg-rose-500/10', extra: { shellAction: 'emitEvent' } },
-    // Shell: Config
-    { section: '🖥️ Shell: Config' },
-    { track: 'shell:config', label: 'Shell Config', icon: <Monitor size={14} className="text-teal-400" />, color: 'hover:bg-teal-500/10', extra: { shellAction: 'shellConfig' } },
-];
-
-export const CanvasContextMenu: React.FC<CanvasContextMenuProps> = ({ x, y, onAdd, onClose }) => {
-    const uiComponents = useUIComponentStore(s => s.components);
-    const renderItems = Object.values(uiComponents);
-
-    const menuStyle: React.CSSProperties = {
-        position: 'fixed',
-        left: Math.min(x, window.innerWidth - 240),
-        top: Math.min(y, window.innerHeight - 600),
-        zIndex: 999,
-    };
-
-    return (
-        <div style={menuStyle} className="w-56 bg-surface-secondary/95 backdrop-blur-xl border border-border-default rounded-xl shadow-2xl shadow-black/50 overflow-hidden">
-            <div className="px-3 py-2 border-b border-border-subtle">
-                <span className="text-[10px] font-bold text-text-muted uppercase tracking-widest">➕ Agregar Nodo</span>
-            </div>
-            <div className="max-h-[480px] overflow-y-auto py-1">
-                {MENU_ITEMS.map((item, i) => {
-                    if (item.section) return <div key={`s-${i}`} className="px-3 pt-2 pb-1 text-[9px] font-bold text-text-muted uppercase tracking-widest">{item.section}</div>;
-                    return (
-                        <button key={`i-${i}`} onClick={() => onAdd(item.track!, item.label!, item.extra)}
-                            className={`w-full flex items-center gap-2.5 px-3 py-1.5 text-xs text-text-primary hover:text-text-primary transition-colors ${item.color}`}>
-                            {item.icon}<span>{item.label}</span>
-                        </button>
-                    );
-                })}
-                {renderItems.length > 0 && (
-                    <>
-                        <div className="px-3 pt-2 pb-1 text-[9px] font-bold text-text-muted uppercase tracking-widest">UI Components</div>
-                        {renderItems.map(comp => (
-                            <button key={comp.id} onClick={() => onAdd('render', comp.name, { uiSchema: comp.schema })}
-                                className="w-full flex items-center gap-2.5 px-3 py-1.5 text-xs text-text-primary hover:text-text-primary hover:bg-pink-500/10 transition-colors">
-                                <Layout size={14} className={comp.source === 'ai-generated' ? 'text-pink-400' : 'text-cyan-400'} />
-                                <span>{comp.name}</span>
-                                <span className="ml-auto text-[9px] text-text-muted">{comp.source === 'ai-generated' ? 'AI' : 'built-in'}</span>
-                            </button>
-                        ))}
-                    </>
-                )}
-            </div>
-        </div>
-    );
-};

package/src/components/studio/editor/EditorToolbar.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { Node, Edge } from '@xyflow/react';
-import { Undo2, Redo2, LayoutGrid, AlignHorizontalDistributeCenter, AlignVerticalDistributeCenter, Trash2 } from 'lucide-react';
-import { getLayoutedElements } from '../../../utils/layoutGraph';
-
-interface EditorToolbarProps {
-    canUndo: boolean;
-    canRedo: boolean;
-    undoCount: number;
-    redoCount: number;
-    undo: () => void;
-    redo: () => void;
-    nodes: Node[];
-    edges: Edge[];
-    setNodes: React.Dispatch<React.SetStateAction<Node[]>>;
-    updateKeyframePosition: (timelineId: string, nodeId: string, position: { x: number; y: number }) => void;
-    removeKeyframe: (timelineId: string, nodeId: string) => void;
-    activeTimelineId: string;
-    currentBlueprintId: string | null;
-    fitView: (options?: any) => void;
-    setSelectedNodeId: (id: string | null) => void;
-}
-
-export const EditorToolbar = React.memo(function EditorToolbar({
-    canUndo, canRedo, undoCount, redoCount, undo, redo,
-    nodes, edges, setNodes, updateKeyframePosition, removeKeyframe,
-    activeTimelineId, currentBlueprintId, fitView, setSelectedNodeId
-}: EditorToolbarProps) {
-    const handleAutoLayout = () => {
-        const { nodes: layoutedNodes } = getLayoutedElements(nodes, edges, { direction: 'TB' });
-        setNodes(layoutedNodes);
-        layoutedNodes.forEach(n => updateKeyframePosition(activeTimelineId, n.id, n.position));
-        setTimeout(() => fitView({ padding: 0.2, duration: 600 }), 50);
-    };
-
-    const handleAlignH = () => {
-        const selected = nodes.filter(n => n.selected);
-        if (selected.length < 2) return;
-        const avgY = selected.reduce((s, n) => s + n.position.y, 0) / selected.length;
-        setNodes(nds => nds.map(n => !n.selected ? n : { ...n, position: { ...n.position, y: avgY } }));
-        selected.forEach(n => updateKeyframePosition(activeTimelineId, n.id, { ...n.position, y: avgY }));
-    };
-
-    const handleAlignV = () => {
-        const selected = nodes.filter(n => n.selected);
-        if (selected.length < 2) return;
-        const avgX = selected.reduce((s, n) => s + n.position.x, 0) / selected.length;
-        setNodes(nds => nds.map(n => !n.selected ? n : { ...n, position: { ...n.position, x: avgX } }));
-        selected.forEach(n => updateKeyframePosition(activeTimelineId, n.id, { ...n.position, x: avgX }));
-    };
-
-    const handleDeleteSelected = () => {
-        const selected = nodes.filter(n => n.selected);
-        if (selected.length === 0) return;
-        const targetId = currentBlueprintId || activeTimelineId;
-        selected.forEach(n => removeKeyframe(targetId, n.id));
-        setSelectedNodeId(null);
-    };
-
-    return (
-        <div className="absolute top-3 right-3 z-20 flex items-center gap-1 bg-surface-secondary/90 backdrop-blur-xs border border-border-default rounded-lg p-1">
-            <button onClick={undo} disabled={!canUndo} className="flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed hover:bg-surface-glass text-text-primary" title="Deshacer (⌘Z)">
-                <Undo2 size={14} />
-                {canUndo && <span className="text-[9px] text-emerald-400 font-mono">{undoCount}</span>}
-            </button>
-            <div className="w-px h-4 bg-surface-glass" />
-            <button onClick={redo} disabled={!canRedo} className="flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed hover:bg-surface-glass text-text-primary" title="Rehacer (⌘⇧Z)">
-                <Redo2 size={14} />
-                {canRedo && <span className="text-[9px] text-blue-400 font-mono">{redoCount}</span>}
-            </button>
-            <div className="w-px h-4 bg-surface-glass" />
-            <button onClick={handleAutoLayout} className="flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors hover:bg-surface-glass text-text-primary" title="Organizar Nodos (Dagre Layout)"><LayoutGrid size={14} /></button>
-            <div className="w-px h-4 bg-surface-glass" />
-            <button onClick={handleAlignH} className="flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors hover:bg-surface-glass text-text-primary" title="Alinear Horizontalmente"><AlignHorizontalDistributeCenter size={14} /></button>
-            <button onClick={handleAlignV} className="flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors hover:bg-surface-glass text-text-primary" title="Alinear Verticalmente"><AlignVerticalDistributeCenter size={14} /></button>
-            <div className="w-px h-4 bg-surface-glass" />
-            <button onClick={handleDeleteSelected} className="flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors hover:bg-red-500/20 text-red-400" title="Eliminar Seleccionados"><Trash2 size={14} /></button>
-        </div>
-    );
-});

package/src/components/studio/editor/StageContentRenderer.tsx

@@ -1,134 +0,0 @@
-import React, { Suspense } from 'react';
-import { Code2, Loader2 } from 'lucide-react';
-import { resolveShell, type ShellType, type ShellProps } from '../../../store/useShellRegistry';
-// ── Legacy compat: still check old registry during migration ──
-import { getMorphComponent, MorphStageType } from '../../../store/useMorphologyStore';
-
-// ⚡ Lazy-loaded heavy deps
-// const SpatialCanvas3D = React.lazy(() => import('../../playground/SpatialCanvas3D').then(m => ({ default: m.SpatialCanvas3D })));
-const LazyRecharts = React.lazy(() => import('recharts').then(m => ({
-    default: ({ chartData, color }: { chartData: { val: number }[], color: string }) => (
-        <m.ResponsiveContainer width="100%" height="100%">
-            <m.AreaChart data={chartData}><m.Area type="monotone" dataKey="val" stroke="currentColor" fill="currentColor" strokeWidth={2} className={color} /></m.AreaChart>
-        </m.ResponsiveContainer>
-    )
-})));
-
-const Canvas3DPlaceholder = () => (
-    <div className="w-full h-full flex flex-col items-center justify-center bg-surface-primary rounded-2xl border border-border-subtle">
-        <Loader2 size={32} className="text-cyan-400 animate-spin mb-3" />
-        <p className="text-text-muted text-xs font-mono tracking-wider">CARGANDO MOTOR 3D...</p>
-    </div>
-);
-
-const DataTableArtifact = ({ columns, rows }: { columns: string[], rows: any[][] }) => (
-    <div className="w-full h-full overflow-auto bg-surface-primary border border-border-default rounded-2xl shadow-xl p-4 custom-scrollbar">
-        <table className="w-full text-left text-sm text-text-primary">
-            <thead className="text-xs text-text-muted uppercase bg-surface-glass">
-                <tr>{columns?.map((col, i) => <th key={i} className="px-6 py-3">{col}</th>)}</tr>
-            </thead>
-            <tbody>{rows?.map((row, i) => (
-                <tr key={i} className="border-b border-border-subtle hover:bg-surface-glass transition-colors">
-                    {row?.map((cell, j) => <td key={j} className="px-6 py-4">{cell}</td>)}
-                </tr>
-            ))}</tbody>
-        </table>
-    </div>
-);
-
-const MarkdownArtifact = ({ content }: { content: string }) => (
-    <div className="w-full h-full overflow-auto bg-surface-primary border border-border-default rounded-2xl shadow-xl p-8 whitespace-pre-wrap text-text-primary font-sans leading-relaxed text-sm custom-scrollbar">{content}</div>
-);
-
-export interface StageRenderProps {
-    renderingType: MorphStageType | ShellType;
-    activeStage: any;
-    activeArtifactData: any;
-    activeConfig: any;
-    activeState?: string;
-    prototypeBrand: string;
-    chartData: { val: number }[];
-    dragConstraintsRef: React.RefObject<HTMLDivElement | null>;
-    defaultViewMode: '2d' | '3d';
-    /** MorphInstance ID for the new API */
-    instanceId?: string;
-}
-
-/**
- * StageContentRenderer / ShellResolver
- * 
- * Resolution order:
- * 1. Check ShellRegistry (new unified API)
- * 2. Check legacy getMorphComponent (backward compat)
- * 3. Built-in artifact/3d/2d renderers (hardcoded)
- */
-export function StageContentRenderer(props: StageRenderProps) {
-    const { renderingType, activeStage, activeArtifactData, activeConfig, activeState, prototypeBrand, chartData, dragConstraintsRef, defaultViewMode, instanceId } = props;
-
-    // ── 1. Try ShellRegistry (new API) ──
-    const RegisteredShell = resolveShell(renderingType);
-    if (RegisteredShell) {
-        return (
-            <RegisteredShell
-                instanceId={instanceId || activeStage?.sourceNodeId || 'default'}
-                data={activeStage?.data || {}}
-                artifacts={[]}
-                activeArtifactIndex={0}
-            />
-        );
-    }
-
-    // ── 2. Legacy morph component lookup ──
-    if (renderingType === 'workbench') {
-        const WC = getMorphComponent('AdminWorkbench') || getMorphComponent('Workbench');
-        if (WC) return <WC {...(activeStage?.data || {})} />;
-        return <div className="w-full h-full flex items-center justify-center text-text-muted font-mono text-sm"><div className="text-center"><Code2 size={48} className="mx-auto mb-4 text-text-muted" /><p>AdminWorkbench no registrado</p><p className="text-xs text-text-muted mt-1">Usa registerShell('shell-vscode', Component)</p></div></div>;
-    }
-
-    if (renderingType === 'liquid') {
-        const LC = getMorphComponent('SafeLiquidUI');
-        if (LC && activeStage?.data) return <div className="w-full h-full p-6 overflow-auto"><LC uiSchema={activeStage.data.code || activeStage.data} tenantId="system" /></div>;
-        return <div className="w-full h-full p-6 overflow-auto"><pre className="text-xs text-text-secondary font-mono bg-surface-glass rounded-xl p-4 border border-border-subtle">{JSON.stringify(activeStage?.data || {}, null, 2)}</pre></div>;
-    }
-
-    if (renderingType === 'custom' && activeStage?.componentId) {
-        const CC = getMorphComponent(activeStage.componentId);
-        if (CC) return <CC {...(activeStage?.data || {})} />;
-        return <div className="w-full h-full flex items-center justify-center text-text-muted font-mono text-sm">Componente '{activeStage.componentId}' no registrado</div>;
-    }
-
-    // ── 3. Built-in artifact renderers ──
-    if (renderingType === 'artifact' && (activeArtifactData || activeStage?.data)) {
-        const d = activeStage?.data || activeArtifactData;
-        // if (d.artifact === 'graph-visualizer') return <div className="flex-1 w-full h-full p-6 py-2 relative flex flex-col gap-4"><div className="flex-1 w-full h-full relative overflow-hidden bg-surface-primary rounded-2xl border border-border-default shadow-2xl"><LogVisualizerComponent initialLogs={d.logs || []} categoryColors={{ "1 State": "#22d3ee", "2 Analysis": "#facc15", "3 Synthesis": "#a855f7", "4 Execution": "#10b981", "5 Validation": "#3b82f6", Error: "#f43f5e", UI: "#ec4899", ...(activeConfig?.colors || {}) }} /></div></div>;
-        if (d.artifact === 'graph-visualizer') return <div className="flex-1 flex items-center justify-center p-6 text-text-muted font-mono">Graph Visualizer temporalmente deshabilitado por conflictos CSS.</div>;
-        if (d.artifact === 'data-table') return <div className="flex-1 w-full h-full p-6 py-2"><DataTableArtifact columns={d.columns} rows={d.rows} /></div>;
-        if (d.artifact === 'markdown') return <div className="flex-1 w-full h-full p-6 py-2"><MarkdownArtifact content={d.content} /></div>;
-        return <div className="flex-1 flex items-center justify-center p-6 text-text-muted font-mono">Componente {d.artifact} desconocido.</div>;
-    }
-
-    // ── 4. Built-in 3D/2D renderers ──
-    // if (renderingType === '3d' || defaultViewMode === '3d') return (
-    //     <div className="flex-1 h-full rounded-2xl bg-surface-overlay flex items-center justify-center relative overflow-hidden border border-border-subtle m-6 mt-2">
-    //         <Suspense fallback={<Canvas3DPlaceholder />}><SpatialCanvas3D activeState={activeState} modelUrl={activeConfig?.modelUrl} /></Suspense>
-    //     </div>
-    // );
-
-    return (
-        <div ref={dragConstraintsRef as any} className="flex-1 h-full rounded-2xl bg-surface-overlay flex items-center justify-center relative overflow-hidden group border border-border-subtle m-6 mt-2">
-            <svg className="absolute inset-0 pointer-events-none z-0 w-full h-full opacity-30">
-                <path d="M 150 75 C 250 150, 350 50, 400 100" stroke="cyan" strokeWidth={2} fill="none" strokeDasharray="10, 10" />
-            </svg>
-            {activeConfig?.widgets?.map((w: any) => {
-                const IC = w.icon;
-                return (
-                    <div key={`${prototypeBrand}-${w.id}`} className={`absolute cursor-grab rounded-2xl border ${w.bg} ${w.border} p-4 shadow-xl backdrop-blur-md flex flex-col justify-between`} style={{ width: w.w, height: w.h, left: w.x, top: w.y }}>
-                        <div className="flex justify-between items-start pointer-events-none z-10"><span className="text-sm font-semibold text-text-primary/80">{w.title}</span><div className={`p-1.5 rounded-lg bg-surface-glass ${w.color}`}><IC size={16} /></div></div>
-                        <div className={`text-2xl font-bold mt-2 ${w.color} pointer-events-none z-10`}>{w.value}</div>
-                        {w.chart && <div className="absolute bottom-0 left-0 w-full h-16 opacity-30 pointer-events-none rounded-b-2xl overflow-hidden"><Suspense fallback={null}><LazyRecharts chartData={chartData} color={w.color} /></Suspense></div>}
-                    </div>
-                );
-            })}
-        </div>
-    );
-}