@decido/shell 1.0.0 → 4.0.1

package/src/components/shell/ShellNexusPreview.tsx

@@ -1,458 +0,0 @@
-/**
- * ShellNexusPreview — AI-powered HTML preview shell.
- *
- * Renders HTML/CSS/JS in a sandboxed iframe with:
- * - Tailwind CDN auto-injection
- * - Device preview (Desktop / Tablet / Mobile)
- * - Toolbar with reload, open-in-new-tab, device switcher
- * - Sprint AH: Element Inspector (hover highlight → click select → postMessage)
- *
- * Based on NexusAI Studio's PreviewPanel architecture, adapted
- * for the Decido Studio shell registry.
- */
-import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import {
-    Monitor, Tablet, Smartphone, RotateCcw, ExternalLink,
-    Maximize2, Minimize2, MousePointer2, Rocket, Copy, Check, Loader2, Code2,
-    Undo2, Redo2
-} from 'lucide-react';
-import type { ShellProps } from '../../store/useShellRegistry';
-import { useNexusaiDeploy } from '../../hooks/useNexusaiDeploy';
-import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
-import { CodeEditorPanel } from './CodeEditorPanel';
-import { TemplateLibrary } from './TemplateLibrary';
-
-type DeviceView = 'desktop' | 'tablet' | 'mobile';
-
-const DEVICE_DIMS: Record<DeviceView, { w: string; h: string; label: string }> = {
-    desktop: { w: '100%', h: '100%', label: 'Desktop' },
-    tablet:  { w: '768px', h: '1024px', label: 'Tablet' },
-    mobile:  { w: '375px', h: '667px', label: 'Mobile' },
-};
-
-const DEVICE_ICONS: Record<DeviceView, typeof Monitor> = {
-    desktop: Monitor,
-    tablet: Tablet,
-    mobile: Smartphone,
-};
-
-export const ShellNexusPreview: React.FC<ShellProps> = ({ artifacts, activeArtifactIndex, data }) => {
-    const iframeRef = useRef<HTMLIFrameElement>(null);
-    const [device, setDevice] = useState<DeviceView>('desktop');
-    const [iframeKey, setIframeKey] = useState(Date.now());
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const [inspectMode, setInspectMode] = useState(false);
-    const [selectedSelector, setSelectedSelector] = useState<string | null>(null);
-    const [copied, setCopied] = useState(false);
-    const [showCodeEditor, setShowCodeEditor] = useState(false);
-    const deployHook = useNexusaiDeploy();
-
-    // Extract code from data or active artifact
-    const code = useMemo(() => {
-        const src = data || artifacts?.[activeArtifactIndex ?? 0]?.data || {};
-        const html = src.html || src.content || '';
-        const css = src.css || src.styles || '';
-        const js = src.javascript || src.js || '';
-        return { html, css, js };
-    }, [data, artifacts, activeArtifactIndex]);
-
-    // Listen for postMessage from iframe (element inspector)
-    useEffect(() => {
-        const handler = (e: MessageEvent) => {
-            if (e.data?.type === 'DECIDO_ELEMENT_SELECTED') {
-                setSelectedSelector(e.data.selector || null);
-                // Expose to window.__DECIDO__ for usePlaygroundCommander
-                if ((window as any).__DECIDO__) {
-                    (window as any).__DECIDO__.selectedElementSelector = e.data.selector || null;
-                }
-            }
-        };
-        window.addEventListener('message', handler);
-        return () => window.removeEventListener('message', handler);
-    }, []);
-
-    // Sprint AN: Local keyboard shortcuts for Web Preview
-    const [showShortcuts, setShowShortcuts] = useState(false);
-    useEffect(() => {
-        const handler = (e: KeyboardEvent) => {
-            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
-            const meta = e.metaKey || e.ctrlKey;
-            if (!meta) return;
-
-            // Cmd+I → Toggle inspector
-            if (e.code === 'KeyI' && !e.shiftKey) {
-                e.preventDefault();
-                setInspectMode(v => !v);
-                return;
-            }
-            // Cmd+E → Toggle code editor
-            if (e.code === 'KeyE' && !e.shiftKey) {
-                e.preventDefault();
-                setShowCodeEditor(v => !v);
-                return;
-            }
-            // Cmd+D → Deploy
-            if (e.code === 'KeyD' && !e.shiftKey) {
-                e.preventDefault();
-                deployHook.deploy();
-                return;
-            }
-            // Cmd+/ → Show shortcuts help
-            if (e.key === '/') {
-                e.preventDefault();
-                setShowShortcuts(v => !v);
-                return;
-            }
-        };
-        window.addEventListener('keydown', handler);
-        return () => window.removeEventListener('keydown', handler);
-    }, [deployHook]);
-
-    // Toggle inspect mode inside iframe
-    useEffect(() => {
-        if (iframeRef.current?.contentWindow) {
-            iframeRef.current.contentWindow.postMessage({ type: 'DECIDO_SET_INSPECT', enabled: inspectMode }, '*');
-        }
-    }, [inspectMode, iframeKey]);
-
-    // Build srcDoc with Tailwind CDN + link safety + element inspector
-    const srcDoc = useMemo(() => {
-        // Sanitize JS to prevent premature </script> closure
-        const safeJs = (code.js || '').replace(/<\/script/gi, '<\\/script');
-        return `
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <base target="_blank">
-    <script src="https://cdn.tailwindcss.com"><\/script>
-    <style>
-        *, *::before, *::after { box-sizing: border-box; }
-        body { 
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
-            margin: 0; 
-            background: #fff; 
-            min-height: 100vh;
-            color: #1a1a1a;
-        }
-        html, body { width: 100%; height: 100%; }
-        .__decido-hover { outline: 2px dashed #06b6d4 !important; outline-offset: 2px; cursor: crosshair !important; }
-        .__decido-selected { outline: 2px solid #06b6d4 !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(6,182,212,0.15) !important; }
-        ${code.css}
-    </style>
-</head>
-<body>
-    ${code.html}
-    <script>
-        try { ${safeJs} } catch(e) { console.error('[Preview]', e); }
-    <\/script>
-    <script>
-        // Link interceptor
-        document.addEventListener('click', function(e) {
-            var a = e.target.closest('a');
-            if (!a) return;
-            var href = a.getAttribute('href') || '';
-            if (href.startsWith('#')) return;
-            if (href.startsWith('javascript:')) { e.preventDefault(); return; }
-            e.preventDefault();
-            if (href && href !== '#') window.open(href, '_blank', 'noopener,noreferrer');
-        }, true);
-
-        // Element Inspector
-        var _inspectEnabled = false;
-        var _hoveredEl = null;
-        var _selectedEl = null;
-
-        function _getSelector(el) {
-            if (el.id) return '#' + el.id;
-            var path = [];
-            while (el && el !== document.body && el !== document.documentElement) {
-                var tag = el.tagName.toLowerCase();
-                if (el.className && typeof el.className === 'string') {
-                    var cls = el.className.split(/\s+/).filter(function(c) { return !c.startsWith('__decido'); }).slice(0, 2).join('.');
-                    if (cls) tag += '.' + cls;
-                }
-                var parent = el.parentElement;
-                if (parent) {
-                    var siblings = Array.from(parent.children).filter(function(c) { return c.tagName === el.tagName; });
-                    if (siblings.length > 1) tag += ':nth-child(' + (Array.from(parent.children).indexOf(el) + 1) + ')';
-                }
-                path.unshift(tag);
-                el = parent;
-                if (path.length >= 3) break;
-            }
-            return path.join(' > ');
-        }
-
-        document.addEventListener('mouseover', function(e) {
-            if (!_inspectEnabled) return;
-            if (_hoveredEl) _hoveredEl.classList.remove('__decido-hover');
-            _hoveredEl = e.target;
-            if (_hoveredEl !== _selectedEl) _hoveredEl.classList.add('__decido-hover');
-        });
-        document.addEventListener('mouseout', function(e) {
-            if (_hoveredEl) _hoveredEl.classList.remove('__decido-hover');
-        });
-        document.addEventListener('click', function(e) {
-            if (!_inspectEnabled) return;
-            e.preventDefault();
-            e.stopPropagation();
-            if (_selectedEl) _selectedEl.classList.remove('__decido-selected');
-            _selectedEl = e.target;
-            _selectedEl.classList.add('__decido-selected');
-            _hoveredEl = null;
-            var sel = _getSelector(_selectedEl);
-            window.parent.postMessage({ type: 'DECIDO_ELEMENT_SELECTED', selector: sel, tagName: _selectedEl.tagName }, '*');
-        }, true);
-
-        window.addEventListener('message', function(e) {
-            if (e.data && e.data.type === 'DECIDO_SET_INSPECT') {
-                _inspectEnabled = e.data.enabled;
-                if (!_inspectEnabled) {
-                    if (_hoveredEl) _hoveredEl.classList.remove('__decido-hover');
-                    if (_selectedEl) _selectedEl.classList.remove('__decido-selected');
-                    _hoveredEl = null; _selectedEl = null;
-                }
-                document.body.style.cursor = _inspectEnabled ? 'crosshair' : '';
-            }
-        });
-    <\/script>
-</body>
-</html>`;
-    }, [code]);
-
-    const handleReload = useCallback(() => setIframeKey(Date.now()), []);
-
-    const handleOpenInTab = useCallback(() => {
-        const win = window.open();
-        if (win) { win.document.write(srcDoc); win.document.close(); }
-    }, [srcDoc]);
-
-    const handleToggleInspect = useCallback(() => {
-        const next = !inspectMode;
-        setInspectMode(next);
-        if (!next) setSelectedSelector(null);
-    }, [inspectMode]);
-
-    const dims = DEVICE_DIMS[device];
-    const hasContent = !!(code.html?.trim());
-
-    return (
-        <div className={`w-full h-full flex flex-col bg-surface-primary overflow-hidden ${isFullscreen ? 'fixed inset-0 z-9999' : ''}`}>
-            {/* ─── Toolbar ─── */}
-            <div className="flex items-center justify-between px-2 py-1.5 bg-surface-secondary border-b border-border-subtle text-[10px] text-text-muted select-none shrink-0">
-                <div className="flex items-center gap-1.5">
-                    {/* Traffic lights */}
-                    <div className="flex gap-1 px-1">
-                        <span className="w-2.5 h-2.5 rounded-full bg-red-500/80" />
-                        <span className="w-2.5 h-2.5 rounded-full bg-yellow-500/80" />
-                        <span className="w-2.5 h-2.5 rounded-full bg-green-500/80" />
-                    </div>
-                    <button onClick={handleReload} className="p-1 rounded hover:bg-surface-glass transition-colors" title="Recargar">
-                        <RotateCcw size={12} />
-                    </button>
-                    <button
-                        onClick={() => useMorphInstanceStore.getState().undo()}
-                        disabled={!useMorphInstanceStore.getState().canUndo()}
-                        className={`p-1 rounded transition-colors ${useMorphInstanceStore.getState().canUndo() ? 'hover:bg-surface-glass text-text-secondary' : 'text-text-muted cursor-not-allowed'}`}
-                        title="Deshacer"
-                    >
-                        <Undo2 size={12} />
-                    </button>
-                    <button
-                        onClick={() => useMorphInstanceStore.getState().redo()}
-                        disabled={!useMorphInstanceStore.getState().canRedo()}
-                        className={`p-1 rounded transition-colors ${useMorphInstanceStore.getState().canRedo() ? 'hover:bg-surface-glass text-text-secondary' : 'text-text-muted cursor-not-allowed'}`}
-                        title="Rehacer"
-                    >
-                        <Redo2 size={12} />
-                    </button>
-                    <span className="px-2 py-0.5 bg-surface-overlay rounded text-[9px] font-mono">{dims.w === '100%' ? 'Adaptable' : dims.w} × {dims.h === '100%' ? '100%' : dims.h}</span>
-                </div>
-
-                {/* Device Switcher */}
-                <div className="flex items-center gap-0.5">
-                    {(['desktop', 'tablet', 'mobile'] as DeviceView[]).map(d => {
-                        const Icon = DEVICE_ICONS[d];
-                        return (
-                            <button
-                                key={d}
-                                onClick={() => setDevice(d)}
-                                className={`p-1.5 rounded transition-colors ${device === d ? 'bg-surface-glass text-text-primary' : 'hover:bg-surface-glass text-text-muted hover:text-text-primary'}`}
-                                title={DEVICE_DIMS[d].label}
-                            >
-                                <Icon size={13} />
-                            </button>
-                        );
-                    })}
-                </div>
-
-                {/* Actions */}
-                <div className="flex items-center gap-1">
-                    <button
-                        onClick={handleToggleInspect}
-                        className={`p-1 rounded transition-colors ${inspectMode ? 'bg-cyan-500/20 text-cyan-400' : 'hover:bg-surface-glass text-text-muted'}`}
-                        title={inspectMode ? 'Desactivar inspector' : 'Seleccionar elemento'}
-                    >
-                        <MousePointer2 size={12} />
-                    </button>
-                    <button
-                        onClick={() => setShowCodeEditor(!showCodeEditor)}
-                        className={`p-1 rounded transition-colors ${showCodeEditor ? 'bg-violet-500/20 text-violet-400' : 'hover:bg-surface-glass text-text-muted'}`}
-                        title={showCodeEditor ? 'Ocultar código' : 'Ver / editar código'}
-                    >
-                        <Code2 size={12} />
-                    </button>
-                    <button
-                        onClick={() => { deployHook.deploy(); }}
-                        disabled={!hasContent || deployHook.status === 'deploying'}
-                        className={`p-1 rounded transition-colors ${deployHook.status === 'deploying' ? 'text-amber-400 animate-pulse' : hasContent ? 'hover:bg-emerald-500/10 text-text-muted hover:text-emerald-400' : 'text-text-muted cursor-not-allowed'}`}
-                        title="Desplegar preview"
-                    >
-                        {deployHook.status === 'deploying' ? <Loader2 size={12} className="animate-spin" /> : <Rocket size={12} />}
-                    </button>
-                    <button onClick={() => setIsFullscreen(!isFullscreen)} className="p-1 rounded hover:bg-surface-glass transition-colors" title={isFullscreen ? 'Salir fullscreen' : 'Fullscreen'}>
-                        {isFullscreen ? <Minimize2 size={12} /> : <Maximize2 size={12} />}
-                    </button>
-                    <button onClick={handleOpenInTab} className="p-1 rounded hover:bg-surface-glass transition-colors" title="Abrir en nueva pestaña">
-                        <ExternalLink size={12} />
-                    </button>
-                </div>
-            </div>
-
-            {/* ─── Deploy status bar ─── */}
-            {deployHook.status !== 'idle' && (
-                <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border-subtle text-[10px] shrink-0" style={{ background: deployHook.status === 'success' ? 'rgba(16,185,129,0.08)' : deployHook.status === 'error' ? 'rgba(239,68,68,0.08)' : 'rgba(245,158,11,0.08)' }}>
-                    {deployHook.status === 'deploying' && (
-                        <>
-                            <Loader2 size={10} className="text-amber-400 animate-spin" />
-                            <span className="text-amber-300 font-mono">Desplegando... {deployHook.progress}%</span>
-                            <div className="flex-1 h-1 bg-surface-glass rounded-full overflow-hidden">
-                                <div className="h-full bg-amber-400 transition-all duration-300 rounded-full" style={{ width: `${deployHook.progress}%` }} />
-                            </div>
-                        </>
-                    )}
-                    {deployHook.status === 'success' && deployHook.url && (
-                        <>
-                            <Check size={10} className="text-emerald-400" />
-                            <a href={deployHook.url} target="_blank" rel="noopener noreferrer" className="text-emerald-300 font-mono flex-1 truncate hover:underline">{deployHook.url.length > 60 ? deployHook.url.slice(0, 60) + '...' : deployHook.url}</a>
-                            <button onClick={() => { deployHook.copyUrl(); setCopied(true); setTimeout(() => setCopied(false), 1500); }} className="text-text-secondary hover:text-text-primary transition-colors" title="Copiar URL">
-                                {copied ? <Check size={10} className="text-emerald-400" /> : <Copy size={10} />}
-                            </button>
-                            <button onClick={deployHook.reset} className="text-text-muted hover:text-text-primary">✕</button>
-                        </>
-                    )}
-                    {deployHook.status === 'error' && (
-                        <>
-                            <span className="text-red-400">⚠</span>
-                            <span className="text-red-300 font-mono flex-1">{deployHook.error}</span>
-                            <button onClick={deployHook.reset} className="text-text-muted hover:text-text-primary">✕</button>
-                        </>
-                    )}
-                </div>
-            )}
-
-            {/* ─── Selected element badge ─── */}
-            {selectedSelector && (
-                <div className="flex items-center gap-2 px-3 py-1.5 bg-cyan-500/10 border-b border-cyan-500/20 text-[10px] shrink-0">
-                    <MousePointer2 size={10} className="text-cyan-400" />
-                    <code className="text-cyan-300 font-mono flex-1 truncate">{selectedSelector}</code>
-                    <span className="text-text-muted">Escribe en el chat para modificar este elemento</span>
-                    <button onClick={() => { setSelectedSelector(null); setInspectMode(false); }} className="text-text-muted hover:text-text-primary">✕</button>
-                </div>
-            )}
-
-            {/* ─── Preview Area ─── */}
-            <div className="flex-1 flex overflow-hidden">
-                {/* Preview */}
-                <div className={`flex items-center justify-center overflow-auto p-2 ${showCodeEditor ? 'w-1/2' : 'flex-1'}`} style={{ background: 'repeating-conic-gradient(#1a1a1b 0% 25%, #141415 0% 50%) 0 0 / 20px 20px' }}>
-                    {hasContent ? (
-                        <div
-                            className="bg-white shadow-2xl transition-all duration-300 overflow-hidden w-full h-full"
-                            style={{
-                                maxWidth: showCodeEditor ? '100%' : dims.w,
-                                maxHeight: showCodeEditor ? '100%' : dims.h,
-                                border: device !== 'desktop' ? '6px solid #333' : '1px solid #2a2a2a',
-                                borderRadius: device !== 'desktop' ? '1.5rem' : '4px',
-                            }}
-                        >
-                            <iframe
-                                ref={iframeRef}
-                                key={iframeKey}
-                                srcDoc={srcDoc}
-                                title="NexusAI Preview"
-                                sandbox="allow-scripts allow-same-origin allow-forms allow-modals"
-                                className="w-full h-full border-0"
-                            />
-                        </div>
-                    ) : (
-                        <TemplateLibrary onSelect={(tpl) => {
-                            const inst = useMorphInstanceStore.getState().getActiveInstance();
-                            if (inst) {
-                                useMorphInstanceStore.getState().upsertInstance({
-                                    ...inst,
-                                    data: { ...inst.data, html: tpl.html, css: tpl.css, javascript: tpl.js },
-                                });
-                            } else {
-                                const id = 'tpl-' + Date.now();
-                                useMorphInstanceStore.getState().upsertInstance({
-                                    id, shellType: 'nexusai-preview', sourceChatId: '_default', label: 'Template',
-                                    data: { html: tpl.html, css: tpl.css, javascript: tpl.js },
-                                });
-                                useMorphInstanceStore.getState().setActiveInstance(id);
-                            }
-                        }} />
-                    )}
-                </div>
-
-                {/* Code Editor */}
-                {showCodeEditor && (
-                    <div className="w-1/2 shrink-0">
-                        <CodeEditorPanel
-                            code={code}
-                            onCodeChange={(updated) => {
-                                // Sync edits to active MorphInstance
-                                const inst = useMorphInstanceStore.getState().getActiveInstance();
-                                if (inst) {
-                                    useMorphInstanceStore.getState().upsertInstance({
-                                        ...inst,
-                                        data: { ...inst.data, html: updated.html, css: updated.css, javascript: updated.js },
-                                    });
-                                }
-                            }}
-                        />
-                    </div>
-                )}
-            </div>
-
-            {/* Sprint AN: Shortcuts Help Modal */}
-            {showShortcuts && (
-                <div className="absolute inset-0 z-50 flex items-center justify-center bg-surface-overlay backdrop-blur-xs" onClick={() => setShowShortcuts(false)}>
-                    <div className="bg-surface-tertiary border border-border-default rounded-2xl p-6 max-w-xs w-full shadow-2xl" onClick={e => e.stopPropagation()}>
-                        <h3 className="text-sm font-bold text-text-primary mb-4 flex items-center gap-2">⌨️ Atajos de Teclado</h3>
-                        <div className="space-y-2 text-[11px]">
-                            {[
-                                ['⌘ I', 'Inspector de elementos'],
-                                ['⌘ E', 'Editor de código'],
-                                ['⌘ D', 'Desplegar preview'],
-                                ['⌘ Z', 'Deshacer (topología)'],
-                                ['⌘ ⇧ Z', 'Rehacer (topología)'],
-                                ['⌘ /', 'Esta ayuda'],
-                                ['⌘ B', 'Toggle sidebar'],
-                                ['⌘ ⇧ C', 'Toggle modo Creator'],
-                                ['⌘ ⇧ V', 'Toggle canvas'],
-                            ].map(([keys, desc]) => (
-                                <div key={keys} className="flex items-center justify-between">
-                                    <span className="text-text-secondary">{desc}</span>
-                                    <kbd className="px-2 py-0.5 bg-surface-glass border border-border-default rounded text-text-primary font-mono text-[10px]">{keys}</kbd>
-                                </div>
-                            ))}
-                        </div>
-                        <button onClick={() => setShowShortcuts(false)} className="w-full mt-4 py-2 bg-surface-glass hover:bg-surface-glass rounded-xl text-xs text-text-secondary transition">Cerrar</button>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};

package/src/components/shell/SlotRenderer.tsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import type { SlotComponentId } from '../../store/useLayoutStore';
-
-/**
- * SlotRenderer — maps a SlotComponentId to its lazy-loaded React component.
- * 
- * This is the registry that connects slot configuration in useLayoutStore
- * to actual React components. Components are lazy-loaded to avoid
- * pulling in heavy dependencies (Three.js, ReactFlow, etc.) upfront.
- */
-
-// ── Lazy Component Registry ──
-const WorkspaceChatLazy = React.lazy(() =>
-    import('./CenterComposite').then(m => ({ default: m.CenterComposite }))
-);
-const PlaygroundChat = React.lazy(() =>
-    import('../playground/PlaygroundChat').then(m => ({ default: m.PlaygroundChat }))
-);
-const DebugPanel = React.lazy(() =>
-    import('../playground/DebugPanel').then(m => ({ default: m.DebugPanel }))
-);
-const PlaygroundTerminal = React.lazy(() =>
-    import('../playground/PlaygroundTerminal').then(m => ({ default: m.PlaygroundTerminal }))
-);
-const MorphShellLazy = React.lazy(() =>
-    import('./MorphShell').then(m => ({ default: m.MorphShell }))
-);
-const ReactFlowEditor = React.lazy(() =>
-    import('../studio/ReactFlowEditor').then(m => ({ default: m.ReactFlowEditor }))
-);
-const TimelineEditor = React.lazy(() =>
-    import('../studio/TimelineEditor').then(m => ({ default: m.TimelineEditor }))
-);
-const PlaygroundAppSidebar = React.lazy(() =>
-    import('../playground/PlaygroundAppSidebar').then(m => ({ default: m.PlaygroundAppSidebar }))
-);
-const WidgetSlotPanelLazy = React.lazy(() =>
-    import('../widgets/WidgetSlotPanel').then(m => ({ default: m.WidgetSlotPanel }))
-);
-
-// ── Fallback ──
-const SlotFallback = () => (
-    <div className="w-full h-full flex items-center justify-center">
-        <div className="w-6 h-6 border-2 border-cyan-500 border-t-transparent rounded-full animate-spin" />
-    </div>
-);
-
-// ── Slot Component Map ──
-// Each entry returns a React element. Props are passed down via context
-// or store subscriptions, not directly (keeps SlotRenderer simple).
-// 'widget-panel' renders plugin widgets via WidgetRegistry (replaces old 'plugin-viewer' hack)
-const SLOT_COMPONENTS: Record<string, React.LazyExoticComponent<any>> = {
-    'workspace-chat': WorkspaceChatLazy,
-    'chat': PlaygroundChat,
-    'debug': DebugPanel,
-    'terminal': PlaygroundTerminal,
-    'canvas': MorphShellLazy,
-    'graph-editor': ReactFlowEditor,
-    'timeline-editor': TimelineEditor,
-    'app-sidebar': PlaygroundAppSidebar,
-    'widget-panel': WidgetSlotPanelLazy,
-};
-
-interface SlotRendererProps {
-    /** Which component to render */
-    componentId: SlotComponentId;
-    /** Additional props to pass through */
-    slotProps?: Record<string, any>;
-    /** CSS class for the container */
-    className?: string;
-}
-
-/**
- * Renders the component assigned to a layout slot.
- * Returns null if componentId is null (empty slot).
- */
-export const SlotRenderer = React.memo(function SlotRenderer({
-    componentId,
-    slotProps = {},
-    className = '',
-}: SlotRendererProps) {
-    if (!componentId) return null;
-
-    const Component = SLOT_COMPONENTS[componentId];
-    if (!Component) {
-        return (
-            <div className={`w-full h-full flex items-center justify-center text-text-muted text-xs font-mono ${className}`}>
-                Unknown slot: {componentId}
-            </div>
-        );
-    }
-
-    return (
-        <React.Suspense fallback={<SlotFallback />}>
-            <div className={`w-full h-full overflow-hidden ${className}`}>
-                <Component {...slotProps} />
-            </div>
-        </React.Suspense>
-    );
-});
-
-/**
- * Register a custom component for use in slots.
- * Plugins can call this to make their components available in the layout.
- */
-export function registerSlotComponent(id: string, component: React.LazyExoticComponent<any> | React.ComponentType<any>) {
-    SLOT_COMPONENTS[id] = component as any;
-}
-
-/**
- * Get available slot component IDs (for UI dropdowns / configurator).
- */
-export function getAvailableSlotComponents(): string[] {
-    return Object.keys(SLOT_COMPONENTS);
-}

package/src/components/shell/TabBar.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { X, Plus } from 'lucide-react';
-import { useLayoutStore, type LayoutTab } from '../../store/useLayoutStore';
-import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-
-/**
- * TabBar — Horizontal tab strip for the T2 zone.
- * 
- * Displays tabs from useLayoutStore.tabs
- * Each tab can be activated, closed, and dragged.
- * New tabs appear when MorphShell pushes a stage.
- * 
- * Clicking a tab syncs: LayoutStore ↔ MorphInstanceStore ↔ PlaygroundStore(activeChatId)
- */
-
-interface TabBarProps {
-    className?: string;
-}
-
-export function TabBar({ className = '' }: TabBarProps) {
-    const tabs = useLayoutStore((s) => s.tabs);
-    const activeTabId = useLayoutStore((s) => s.activeTabId);
-    const setActiveTab = useLayoutStore((s) => s.setActiveTab);
-    const removeTab = useLayoutStore((s) => s.removeTab);
-
-    const handleTabClick = React.useCallback((tabId: string) => {
-        setActiveTab(tabId);
-
-        // Sync with MorphInstance: tab IDs follow 'morph-{instanceId}' convention
-        if (tabId.startsWith('morph-')) {
-            const instanceId = tabId.replace('morph-', '');
-            useMorphInstanceStore.getState().setActiveInstance(instanceId);
-
-            // Sync with Chat: find chat instance with matching sourceChatId
-            const instance = useMorphInstanceStore.getState().instances.get(instanceId);
-            if (instance?.sourceChatId) {
-                usePlaygroundStore.getState().setActiveChatId(instance.sourceChatId);
-            }
-        }
-    }, [setActiveTab]);
-
-    if (tabs.length === 0) return null;
-
-    return (
-        <div className={`flex items-center gap-0.5 px-2 py-1 bg-surface-primary border-b border-border-subtle overflow-x-auto scrollbar-hide ${className}`}>
-            <AnimatePresence mode="popLayout">
-                {tabs.map((tab) => (
-                    <motion.button
-                        key={tab.id}
-                        layout
-                        initial={{ opacity: 0, scale: 0.9, width: 0 }}
-                        animate={{ opacity: 1, scale: 1, width: 'auto' }}
-                        exit={{ opacity: 0, scale: 0.9, width: 0 }}
-                        onClick={() => handleTabClick(tab.id)}
-                        className={`
-                            flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-medium
-                            transition-colors whitespace-nowrap group relative shrink-0
-                            ${activeTabId === tab.id
-                                ? 'bg-surface-glass text-text-primary shadow-xs border border-border-default'
-                                : 'text-text-muted hover:text-text-primary hover:bg-surface-glass border border-transparent'
-                            }
-                        `}
-                    >
-                        <span className="truncate max-w-[120px]">{tab.label}</span>
-                        
-                        {(tab.closeable !== false) && (
-                            <span
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    removeTab(tab.id);
-                                }}
-                                className="w-4 h-4 rounded-md flex items-center justify-center
-                                    opacity-0 group-hover:opacity-100 hover:bg-surface-glass hover:text-red-400
-                                    transition-all ml-0.5"
-                            >
-                                <X size={10} />
-                            </span>
-                        )}
-
-                        {/* Active indicator */}
-                        {activeTabId === tab.id && (
-                            <motion.div
-                                layoutId="tab-indicator"
-                                className="absolute bottom-0 left-1 right-1 h-[2px] bg-cyan-500/60 rounded-full"
-                            />
-                        )}
-                    </motion.button>
-                ))}
-            </AnimatePresence>
-        </div>
-    );
-}