@decido/shell 1.0.0 → 4.0.1

package/src/components/playground/KeyframeListItem.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Edit2, Check } from 'lucide-react';
-
-export interface KeyframeItemProps {
-    kf: any;
-    index: number;
-    isActive: boolean;
-    isPast: boolean;
-    isEditing: boolean;
-    isLast: boolean;
-    onSeek: (time: number) => void;
-    onStartEdit: (index: number) => void;
-    onSaveEdit: (index: number, time: string, speech: string) => void;
-}
-
-export const KeyframeListItem = React.memo(function KeyframeListItem({
-    kf, index, isActive, isPast, isEditing, isLast, onSeek, onStartEdit, onSaveEdit
-}: KeyframeItemProps) {
-    return (
-        <div className={`flex items-start w-full gap-3 p-3 rounded-xl border transition-all text-left relative group overflow-hidden ${isActive ? 'bg-cyan-500/10 border-cyan-500/30 shadow-[0_0_15px_rgba(34,211,238,0.1)]' : isPast ? 'bg-surface-glass border-border-default opacity-70 hover:opacity-100' : 'bg-transparent border-transparent text-text-muted hover:bg-surface-glass'}`}>
-            <button onClick={() => onSeek(kf.t)} className="absolute inset-0 z-0"></button>
-
-            <div className="flex flex-col items-center gap-1 mt-1 relative z-10 pointer-events-none">
-                <div className={`w-2 h-2 rounded-full shrink-0 ${isActive ? 'bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.8)]' : isPast ? 'bg-surface-glass0' : 'bg-surface-tertiary'}`}></div>
-                {!isLast && (
-                    <div className={`w-0.5 h-full min-h-[24px] ${isPast && !isActive ? 'bg-surface-glass' : 'bg-surface-tertiary'}`}></div>
-                )}
-            </div>
-            <div className="flex-1 min-w-0 relative z-10">
-                <div className="flex items-center justify-between mb-1">
-                    {isEditing ? (
-                        <input autoFocus type="number" step="0.5" defaultValue={kf.t} id={`kf-time-${index}`}
-                            className="w-16 bg-surface-glass border border-border-strong rounded px-1 text-xs text-text-primary focus:outline-hidden focus:border-cyan-400" />
-                    ) : (
-                        <span className={`font-mono text-xs ${isActive ? 'text-cyan-400 font-bold' : isPast ? 'text-text-primary' : 'text-text-muted'}`}>{kf.t.toFixed(1)}s</span>
-                    )}
-
-                    <div className="flex items-center gap-2">
-                        {kf.canvas && <span className="px-1.5 py-0.5 rounded text-[10px] bg-purple-500/20 text-purple-400 font-mono shrink-0 pointer-events-none">CANVAS</span>}
-                        {isEditing ? (
-                            <button onClick={(e) => {
-                                const timeVal = (document.getElementById(`kf-time-${index}`) as HTMLInputElement)?.value;
-                                const speechVal = (document.getElementById(`kf-speech-${index}`) as HTMLInputElement)?.value;
-                                onSaveEdit(index, timeVal || kf.t.toString(), speechVal !== undefined ? speechVal : (kf.speech || ''));
-                            }} className="p-1 rounded bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/40 transition-colors pointer-events-auto">
-                                <Check size={12} />
-                            </button>
-                        ) : (
-                            <button onClick={() => onStartEdit(index)} className="p-1 rounded bg-surface-glass text-text-secondary hover:text-text-primary opacity-0 group-hover:opacity-100 transition-all pointer-events-auto">
-                                <Edit2 size={12} />
-                            </button>
-                        )}
-                    </div>
-                </div>
-                <div className={`text-sm font-medium truncate pointer-events-none ${isActive ? 'text-text-primary' : isPast ? 'text-text-secondary' : 'text-text-muted'}`}>{kf.state}</div>
-
-                {(kf.speech || isEditing) && (
-                    <div className="mt-1">
-                        {isEditing ? (
-                            <input type="text" defaultValue={kf.speech || ''} id={`kf-speech-${index}`} placeholder="Voz TTS..."
-                                className="w-full bg-surface-glass border border-border-strong rounded px-2 py-1 text-xs text-text-primary focus:outline-hidden focus:border-cyan-400 pointer-events-auto" />
-                        ) : (
-                            <div className="text-xs text-text-muted italic truncate pointer-events-none">"{kf.speech}"</div>
-                        )}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-});

package/src/components/playground/PlaygroundAppSidebar.tsx

@@ -1,171 +0,0 @@
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Search, Plus, X, Settings, ChevronDown, Plug, Wrench, Network, PackageOpen, Paintbrush } from 'lucide-react';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { ChatHistoryList } from '@decido/chat';
-import { SettingsPanel } from '../settings/SettingsPanel';
-
-// --------------------------------------------------
-// Types
-// --------------------------------------------------
-export interface SidebarMenuItem { id: string; label: string; icon?: React.ReactNode; onClick: () => void; badge?: string | number; active?: boolean; }
-export interface SidebarMenuSection { id: string; title: string; icon?: React.ReactNode; items: SidebarMenuItem[]; collapsible?: boolean; }
-
-export interface PlaygroundAppSidebarProps {
-    isOpen: boolean;
-    onClose: () => void;
-    menuSections?: SidebarMenuSection[];
-    onSettings?: () => void;
-    onProfile?: () => void;
-    profileName?: string;
-    profileAvatar?: string;
-}
-
-// --------------------------------------------------
-// Sub-components
-// --------------------------------------------------
-const DevToolsFAB = () => {
-    const [expanded, setExpanded] = useState(false);
-    return (
-        <div className="relative" onMouseLeave={() => setExpanded(false)}>
-            <button
-                onClick={() => setExpanded(!expanded)}
-                className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors shrink-0 ${expanded ? 'bg-surface-elevated text-text-primary' : 'text-text-muted hover:text-text-primary hover:bg-surface-glass'}`}
-                title="Herramientas de Desarrollador"
-            >
-                <Wrench size={16} />
-            </button>
-            <AnimatePresence>
-                {expanded && (
-                    <motion.div
-                        initial={{ opacity: 0, scale: 0.9, y: 10 }}
-                        animate={{ opacity: 1, scale: 1, y: 0 }}
-                        exit={{ opacity: 0, scale: 0.9, y: 10 }}
-                        transition={{ type: 'spring', stiffness: 400, damping: 25 }}
-                        className="absolute bottom-full right-0 mb-2 flex flex-col gap-2 p-2 rounded-2xl bg-surface-elevated border border-border-default shadow-2xl origin-bottom z-50"
-                    >
-                        <button onClick={() => window.dispatchEvent(new CustomEvent('DECIDO_OPEN_SWARM_WIZARD'))} className="w-10 h-10 rounded-full bg-surface-secondary border border-border-default hover:border-cyan-400/50 flex items-center justify-center text-text-secondary hover:text-cyan-400 transition-all hover:shadow-[0_0_15px_rgba(6,182,212,0.3)]" title="Configuración del Enjambre"><i className="fas fa-cog text-sm" /></button>
-                        <button onClick={() => window.dispatchEvent(new CustomEvent('DECIDO_TOGGLE_TOPOLOGY'))} className="w-10 h-10 rounded-full bg-surface-secondary border border-border-default hover:border-emerald-400/50 flex items-center justify-center text-text-secondary hover:text-emerald-400 transition-all hover:shadow-[0_0_15px_rgba(16,185,129,0.3)]" title="Live Topology"><Network size={16} /></button>
-                        <button onClick={() => window.dispatchEvent(new CustomEvent('DECIDO_OPEN_MARKETPLACE'))} className="w-10 h-10 rounded-full bg-surface-secondary border border-border-default hover:border-indigo-400/50 flex items-center justify-center text-text-secondary hover:text-indigo-400 transition-all hover:shadow-[0_0_15px_rgba(99,102,241,0.3)]" title="Plugin Marketplace"><PackageOpen size={16} /></button>
-                        <button onClick={() => window.dispatchEvent(new CustomEvent('DECIDO_TOGGLE_TW_EDITOR'))} className="w-10 h-10 rounded-full bg-surface-secondary border border-border-default hover:border-purple-400/50 flex items-center justify-center text-text-secondary hover:text-purple-400 transition-all hover:shadow-[0_0_15px_rgba(139,92,246,0.3)]" title="Tailwind Editor"><Paintbrush size={16} /></button>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-        </div>
-    );
-};
-
-// --------------------------------------------------
-// Main Sidebar Component
-// --------------------------------------------------
-export const PlaygroundAppSidebar = React.memo(function PlaygroundAppSidebar({
-    isOpen, onClose, menuSections = [], onSettings, onProfile, profileName = 'Usuario', profileAvatar
-}: PlaygroundAppSidebarProps) {
-    const [searchQuery, setSearchQuery] = useState('');
-    const [collapsedSections, setCollapsedSections] = useState<Set<string>>(new Set());
-    const [showSettings, setShowSettings] = useState(false);
-
-    const chatInstances = usePlaygroundStore(s => s.chatInstances);
-    const activeChatId = usePlaygroundStore(s => s.activeChatId);
-    const addChatInstance = usePlaygroundStore(s => s.addChatInstance);
-    const removeChatInstance = usePlaygroundStore(s => s.removeChatInstance);
-    const renameChatInstance = usePlaygroundStore(s => s.renameChatInstance);
-    const setActiveChatId = usePlaygroundStore(s => s.setActiveChatId);
-
-    const toggleSection = (id: string) => {
-        setCollapsedSections(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; });
-    };
-
-    const sidebarContent = (showClose = false) => (
-        <div className="flex flex-col h-full bg-surface-secondary text-text-primary">
-            {/* Top: Search + New Chat */}
-            <div className="flex-none p-3 pt-4 space-y-2">
-                {showClose && (
-                    <div className="flex justify-end mb-1">
-                        <button onClick={onClose} className="w-7 h-7 rounded-full bg-surface-glass hover:bg-surface-elevated flex items-center justify-center text-text-secondary hover:text-text-primary transition-colors">
-                            <X size={14} />
-                        </button>
-                    </div>
-                )}
-                <div className="relative">
-                    <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted" />
-                    <input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Buscar conversaciones..."
-                        className="w-full bg-surface-glass border border-border-subtle rounded-lg pl-8 pr-3 py-2 text-sm text-text-primary placeholder-text-muted outline-hidden focus:border-border-strong focus:bg-surface-glass transition-colors" />
-                    {searchQuery && <button onClick={() => setSearchQuery('')} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary"><X size={12} /></button>}
-                </div>
-                <button onClick={() => addChatInstance()} className="w-full flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-glass border border-border-subtle hover:bg-surface-glass hover:border-border-default transition-colors text-sm text-text-primary hover:text-text-primary">
-                    <Plus size={16} /><span>Nueva conversación</span>
-                </button>
-            </div>
-
-            {/* Middle: Scrollable content */}
-            <div className="flex-1 overflow-y-auto px-3 pb-2 space-y-1" style={{ scrollbarWidth: 'thin', scrollbarColor: 'rgba(255,255,255,0.15) transparent' }}>
-                {/* Chat History */}
-                <ChatHistoryList chatInstances={chatInstances} activeChatId={activeChatId || ""} searchQuery={searchQuery}
-                    setActiveChatId={setActiveChatId} renameChatInstance={renameChatInstance} removeChatInstance={removeChatInstance} />
-
-                {/* Dynamic Plugin Sections (below chat history) */}
-                {menuSections.length > 0 && (
-                    <div className="mt-4 pt-3 border-t border-border-subtle">
-                        {menuSections.map(section => (
-                            <div key={section.id} className="mb-3">
-                                <button onClick={() => section.collapsible && toggleSection(section.id)} className="flex items-center gap-1.5 px-2 py-1.5 text-[11px] font-semibold text-text-muted uppercase tracking-wider w-full hover:text-text-primary transition-colors">
-                                    {section.icon}<span className="flex-1 text-left">{section.title}</span>
-                                    {section.collapsible && <ChevronDown size={12} className={`transition-transform ${collapsedSections.has(section.id) ? '-rotate-90' : ''}`} />}
-                                </button>
-                                <AnimatePresence>
-                                    {!collapsedSections.has(section.id) && (
-                                        <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden">
-                                            {section.items.map(item => (
-                                                <button key={item.id} onClick={item.onClick} className={`w-full flex items-center gap-2 px-2 py-2 rounded-lg text-sm transition-colors ${item.active ? 'bg-surface-glass text-text-primary' : 'text-text-secondary hover:bg-surface-glass hover:text-text-primary'}`}>
-                                                    {item.icon}<span className="flex-1 text-left truncate">{item.label}</span>
-                                                    {item.badge !== undefined && <span className="px-1.5 py-0.5 rounded-full bg-cyan-500/15 text-cyan-400 text-[10px] font-bold">{item.badge}</span>}
-                                                </button>
-                                            ))}
-                                        </motion.div>
-                                    )}
-                                </AnimatePresence>
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </div>
-
-            {/* Bottom: Footer */}
-            <div className="flex-none border-t border-border-subtle px-3 py-2">
-                <div className="flex items-center gap-2">
-                    <button onClick={onProfile} className="flex-1 flex items-center gap-2 px-2 py-2 rounded-lg hover:bg-surface-glass transition-colors group">
-                        <div className="w-7 h-7 rounded-full bg-linear-to-br from-cyan-500 to-purple-600 flex items-center justify-center text-text-primary text-xs font-bold shrink-0">{profileAvatar || profileName.charAt(0).toUpperCase()}</div>
-                        <span className="text-sm text-text-primary group-hover:text-text-primary truncate">{profileName}</span>
-                    </button>
-                    <DevToolsFAB />
-                    <button onClick={() => window.dispatchEvent(new CustomEvent('DECIDO_OPEN_MCP_MODAL'))} className="w-8 h-8 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-colors shrink-0" title="Configuración MCP"><Plug size={16} /></button>
-                    <button onClick={() => setShowSettings(true)} className="w-8 h-8 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-colors shrink-0" title="Configuración"><Settings size={16} /></button>
-                </div>
-            </div>
-
-            {/* Settings Panel */}
-            <SettingsPanel isOpen={showSettings} onClose={() => setShowSettings(false)} />
-        </div>
-    );
-
-    const mobileDrawer = (
-        <AnimatePresence>
-            {isOpen && (
-                <>
-                    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={onClose} className="md:hidden fixed inset-0 bg-surface-overlay backdrop-blur-xs z-40" />
-                    <motion.div initial={{ x: '-100%' }} animate={{ x: 0 }} exit={{ x: '-100%' }} transition={{ type: 'spring', damping: 30, stiffness: 300 }} className="md:hidden fixed inset-y-0 left-0 w-[380px] z-50 shadow-2xl">
-                        {sidebarContent(true)}
-                    </motion.div>
-                </>
-            )}
-        </AnimatePresence>
-    );
-
-    return (
-        <>
-            {mobileDrawer}
-            {isOpen && <div className="hidden md:flex h-full w-full min-h-0">{sidebarContent(false)}</div>}
-        </>
-    );
-});

package/src/components/playground/PlaygroundBottomControls.tsx

@@ -1,132 +0,0 @@
-import React, { useState } from 'react';
-import { motion } from 'motion/react';
-import { X } from 'lucide-react';
-import { BlueprintManagerPanel } from '../studio/BlueprintManagerPanel';
-import { DependencyTreePanel } from '../studio/DependencyTreePanel';
-import { TimelineTape } from '../controls/TimelineTape';
-import { CreatorInputBar } from '../controls/CreatorInputBar';
-import { OSToolbar } from '../controls/OSToolbar';
-
-export interface PlaygroundBottomControlsProps {
-    step: string;
-    isVoiceActive: boolean;
-    setIsVoiceActive: (active: boolean) => void;
-    currentTime: number;
-    seekTime: (time: number) => void;
-    playbackSpeed: number;
-    setPlaybackSpeed: (speed: number) => void;
-    isPlaying: boolean;
-    setIsPlaying: (playing: boolean) => void;
-    handleResetPlayground: () => void;
-    dynamicTimelines: any;
-    prototypeBrand: string;
-    setPrototypeBrand: (brand: string) => void;
-    inputValue: string;
-    setInputValue: (val: string) => void;
-    isGenerating: boolean;
-    handleGeneratePlayground: () => void;
-    showCanvas: boolean;
-    setShowCanvas: (show: boolean) => void;
-    isTerminalOpen: boolean;
-    setIsTerminalOpen: (open: boolean) => void;
-    isMuted: boolean;
-    setIsMuted: (muted: boolean) => void;
-    selectedVoice: string;
-    setSelectedVoice: (voice: string) => void;
-    isFullscreen: boolean;
-    toggleFullscreen: () => void;
-    demoState: string;
-    isRecording: boolean;
-    handleExport: () => void;
-    dynamicPersona: any;
-    setSuggestions: (sugs: any) => void;
-    isCreatorMode: boolean;
-    setIsCreatorMode: (mode: boolean) => void;
-    VoiceWidget?: React.ComponentType<any>;
-    config: any;
-}
-
-export const PlaygroundBottomControls = React.memo(function PlaygroundBottomControls({
-    step, isVoiceActive, setIsVoiceActive,
-    currentTime, seekTime, playbackSpeed, setPlaybackSpeed, isPlaying, setIsPlaying, handleResetPlayground,
-    dynamicTimelines, prototypeBrand, setPrototypeBrand, inputValue, setInputValue,
-    isGenerating, handleGeneratePlayground,
-    showCanvas, setShowCanvas, isTerminalOpen, setIsTerminalOpen,
-    isMuted, setIsMuted, selectedVoice, setSelectedVoice,
-    isFullscreen, toggleFullscreen, handleExport,
-    dynamicPersona, setSuggestions, isCreatorMode,
-    VoiceWidget, config
-}: PlaygroundBottomControlsProps) {
-    if (step === 'action' || step === 'profile') return null;
-    if (!isCreatorMode && !isVoiceActive) return null;
-
-    const [isBlueprintManagerOpen, setIsBlueprintManagerOpen] = useState(false);
-    const [isTreeOpen, setIsTreeOpen] = useState(false);
-    const currentTimeline = dynamicTimelines[prototypeBrand] || { duration: 10, keyframes: [] };
-
-    return (
-        <>
-            <div className="absolute bottom-0 left-0 w-full p-3 sm:p-4 md:p-6 bg-linear-to-t from-surface-primary via-surface-primary to-transparent z-40 flex flex-col items-center">
-                <motion.div layout className={`w-full max-w-4xl relative ${isVoiceActive ? 'h-64' : ''}`}>
-                    {!isVoiceActive ? (
-                        <div className={`bg-surface-tertiary/90 border border-border-default rounded-xl sm:rounded-2xl shadow-xl backdrop-blur-md p-3 sm:p-4 md:p-5 flex flex-col gap-3 sm:gap-4 transition-all ${isCreatorMode ? 'border-purple-500/30' : ''}`}>
-                            {/* Timeline */}
-                            {isCreatorMode && (
-                                <TimelineTape
-                                    currentTime={currentTime} seekTime={seekTime}
-                                    playbackSpeed={playbackSpeed} setPlaybackSpeed={setPlaybackSpeed}
-                                    isPlaying={isPlaying} setIsPlaying={setIsPlaying}
-                                    handleResetPlayground={handleResetPlayground}
-                                    currentTimeline={currentTimeline}
-                                />
-                            )}
-
-                            {/* Creator Input + OS Toolbar */}
-                            {isCreatorMode && (
-                                <>
-                                    <CreatorInputBar
-                                        inputValue={inputValue} setInputValue={setInputValue}
-                                        isGenerating={isGenerating} handleGeneratePlayground={handleGeneratePlayground}
-                                        setIsVoiceActive={setIsVoiceActive}
-                                        prototypeBrand={prototypeBrand} handleExport={handleExport}
-                                    />
-                                    <OSToolbar
-                                        dynamicTimelines={dynamicTimelines} prototypeBrand={prototypeBrand}
-                                        showCanvas={showCanvas} setShowCanvas={setShowCanvas}
-                                        isTerminalOpen={isTerminalOpen} setIsTerminalOpen={setIsTerminalOpen}
-                                        isMuted={isMuted} setIsMuted={setIsMuted}
-                                        selectedVoice={selectedVoice} setSelectedVoice={setSelectedVoice}
-                                        isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen}
-                                        handleExport={handleExport} config={config}
-                                        isBlueprintManagerOpen={isBlueprintManagerOpen} setIsBlueprintManagerOpen={setIsBlueprintManagerOpen}
-                                        isTreeOpen={isTreeOpen} setIsTreeOpen={setIsTreeOpen}
-                                    />
-                                </>
-                            )}
-                        </div>
-                    ) : (
-                        <div className="flex flex-col w-full h-full relative p-2 bg-surface-tertiary border border-cyan-500/30 rounded-4xl shadow-lg">
-                            <div className="flex w-full items-center justify-between mb-2">
-                                <span className="text-cyan-400 font-medium px-4 bg-linear-to-r from-cyan-400 via-purple-400 to-indigo-400 text-transparent bg-clip-text animate-pulse">Capturando Audio de IA...</span>
-                                <button onClick={() => setIsVoiceActive(false)} className="w-8 h-8 rounded-full bg-surface-glass hover:bg-surface-glass flex items-center justify-center text-text-secondary hover:text-text-primary transition-colors"><X size={16} /></button>
-                            </div>
-                            <div className="flex-1 w-full rounded-2xl overflow-hidden relative">
-                                {VoiceWidget ? (
-                                    <VoiceWidget
-                                        isCompact={true} persona={dynamicPersona}
-                                        onSuggestionsUpdate={setSuggestions} selectedVoice={selectedVoice}
-                                        controls={{ setPrototypeBrand, setShowCanvas, setIsPlaying, handleExport, setInputValue, handleGeneratePlayground }}
-                                    />
-                                ) : (
-                                    <div className="p-4 flex flex-col items-center justify-center h-full text-text-muted font-mono text-sm border border-border-subtle rounded-xl bg-surface-glass">Módulo de Voz no proporcionado.</div>
-                                )}
-                            </div>
-                        </div>
-                    )}
-                </motion.div>
-            </div>
-            <BlueprintManagerPanel isOpen={isBlueprintManagerOpen} onClose={() => setIsBlueprintManagerOpen(false)} />
-            <DependencyTreePanel isOpen={isTreeOpen} onClose={() => setIsTreeOpen(false)} />
-        </>
-    );
-});

package/src/components/playground/PlaygroundCanvas.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { X, ArrowLeft, Layers, Code2, Droplets, Monitor, MonitorPlay } from 'lucide-react';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useMorphologyStore, MorphStageType } from '../../store/useMorphologyStore';
-import { StageContentRenderer } from '../studio/editor/StageContentRenderer';
-
-const STAGE_META: Record<MorphStageType, { icon: React.ComponentType<any>; label: string; color: string }> = {
-    'workbench': { icon: Code2, label: 'Workbench', color: 'text-purple-400' },
-    'liquid': { icon: Droplets, label: 'UI Dinámica', color: 'text-amber-400' },
-    'artifact': { icon: MonitorPlay, label: 'Artefacto', color: 'text-emerald-400' },
-    'custom': { icon: Layers, label: 'Custom', color: 'text-violet-400' },
-};
-
-export interface PlaygroundCanvasProps {
-    showCanvas: boolean; setShowCanvas: (show: boolean) => void;
-    activeConfig: any; prototypeBrand: string; activeState?: string;
-    chartData: { val: number }[]; dragConstraintsRef: React.RefObject<HTMLDivElement | null>;
-}
-
-export const PlaygroundCanvas = React.memo(function PlaygroundCanvas({
-    showCanvas, setShowCanvas, activeConfig, prototypeBrand, activeState, chartData, dragConstraintsRef
-}: PlaygroundCanvasProps) {
-    if (!showCanvas) return null;
-
-    const activeStage = useMorphologyStore(s => s.activeStage);
-    const stageHistory = useMorphologyStore(s => s.stageHistory);
-    const popStage = useMorphologyStore(s => s.popStage);
-    const clearStages = useMorphologyStore(s => s.clearStages);
-    const activeArtifactData = usePlaygroundStore(s => s.activeArtifactData);
-    const [defaultViewMode, setDefaultViewMode] = React.useState<'2d' | '3d'>('3d');
-
-    const effectiveStage = activeStage || (activeArtifactData ? { type: 'artifact' as const, data: activeArtifactData } : null);
-    const renderingType: MorphStageType = effectiveStage?.type || defaultViewMode;
-    const stageMeta = STAGE_META[renderingType] || STAGE_META['custom'];
-    const StageIcon = stageMeta.icon;
-
-    const handleClose = () => { clearStages(); usePlaygroundStore.getState().setActiveArtifactData(null); setShowCanvas(false); };
-    const handleBack = () => { stageHistory.length > 0 ? popStage() : clearStages(); };
-
-    return (
-        <AnimatePresence>
-            <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }}
-                className="w-full h-full bg-surface-secondary flex flex-col overflow-hidden relative border-l border-border-subtle">
-                {/* Header */}
-                <div className="flex justify-between items-center pl-2 z-10 p-4 pb-0 shrink-0">
-                    <div className="flex items-center gap-2">
-                        {(activeStage || activeArtifactData) && <button onClick={handleBack} className="p-1.5 rounded-lg hover:bg-surface-glass text-text-muted hover:text-text-primary transition-colors" title="Volver"><ArrowLeft size={16} /></button>}
-                        <h2 className="text-lg font-bold flex items-center gap-2 text-text-primary">
-                            <div className="w-7 h-7 rounded-lg flex items-center justify-center bg-surface-glass"><StageIcon size={14} className={stageMeta.color} /></div>
-                            <span className="truncate max-w-[200px]">{activeStage?.label || (activeArtifactData ? 'Artefacto' : 'Lienzo de Trabajo')}</span>
-                            <span className="text-text-muted font-mono text-[10px] ml-1">{renderingType.toUpperCase()}</span>
-                        </h2>
-                    </div>
-                    <div className="flex items-center gap-3">
-                        {stageHistory.length > 0 && (
-                            <div className="hidden md:flex items-center gap-1 text-[10px] text-text-muted font-mono">
-                                {stageHistory.map((s, i) => (
-                                    <React.Fragment key={i}>
-                                        <span className="hover:text-text-secondary cursor-pointer" onClick={() => { const st = useMorphologyStore.getState(); for (let j = 0; j < stageHistory.length - i; j++) st.popStage(); }}>{s.label || s.type}</span><span>›</span>
-                                    </React.Fragment>
-                                ))}
-                                <span className="text-text-secondary">{activeStage?.label || renderingType}</span>
-                            </div>
-                        )}
-                        {!effectiveStage && (
-                            <div className="flex bg-surface-glass border border-border-default rounded-full p-1">
-                                <button onClick={() => setDefaultViewMode('2d')} className={`px-3 py-1 text-[10px] font-bold tracking-wider rounded-full transition-all ${defaultViewMode === '2d' ? 'bg-surface-glass text-text-primary shadow-xs' : 'text-text-muted hover:text-text-primary'}`}>2D DATA</button>
-                                <button onClick={() => setDefaultViewMode('3d')} className={`px-3 py-1 text-[10px] font-bold tracking-wider rounded-full transition-all ${defaultViewMode === '3d' ? 'bg-cyan-500/20 text-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.3)]' : 'text-text-muted hover:text-text-primary'}`}>3D SCENE</button>
-                            </div>
-                        )}
-                        <button onClick={handleClose} className="p-2 bg-surface-glass hover:bg-red-500/20 text-text-secondary hover:text-red-400 rounded-full transition-colors"><X size={16} /></button>
-                    </div>
-                </div>
-                {/* Stage Content */}
-                <div className="flex-1 relative overflow-hidden">
-                    <AnimatePresence mode="wait">
-                        <motion.div key={renderingType + (activeStage?.componentId || '')} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.2 }} className="w-full h-full">
-                            <StageContentRenderer renderingType={renderingType} activeStage={activeStage} activeArtifactData={activeArtifactData} activeConfig={activeConfig}
-                                activeState={activeState} prototypeBrand={prototypeBrand} chartData={chartData} dragConstraintsRef={dragConstraintsRef} defaultViewMode={defaultViewMode} />
-                        </motion.div>
-                    </AnimatePresence>
-                </div>
-            </motion.div>
-        </AnimatePresence>
-    );
-});