@decido/shell 1.0.0 → 4.0.1

package/src/components/playground/PlaygroundHeader.tsx

@@ -1,222 +0,0 @@
-import React from 'react';
-import { PanelLeftClose, PanelLeftOpen, Plus, Share2, Bug, Sun, Moon, MessageSquare, MessageSquareOff } from 'lucide-react';
-import { useTheme } from '../../store/useThemeStore';
-import { HeaderCenterControls } from './HeaderCenterControls';
-import { LayoutConfigurator } from '../shell/LayoutConfigurator';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useEngineStore } from '@decido/engine';
-import { useDebugPanelStore } from '../../store/useDebugPanelStore';
-import { useLayoutStore } from '../../store/useLayoutStore';
-
-// --------------------------------------------------
-// Types
-// --------------------------------------------------
-export interface HeaderAction {
-    id: string;
-    icon?: React.ReactNode;
-    label?: string;
-    onClick: () => void;
-    variant?: 'ghost' | 'outline' | 'accent';
-    /** Show a pulsing dot indicator */
-    showIndicator?: boolean;
-    indicatorColor?: string;
-    /** Only show in creator / player / both */
-    visibleIn?: 'creator' | 'player' | 'both';
-    className?: string;
-}
-
-export interface PlaygroundHeaderProps {
-    /** Additional dynamic action buttons */
-    extraActions?: HeaderAction[];
-    /** Active model / persona label */
-    modelLabel?: string;
-    onModelClick?: () => void;
-}
-
-// ─── Theme Toggle Button ───
-function ThemeToggleBtn() {
-    const currentThemeId = useTheme((s) => s.currentThemeId);
-    const setTheme = useTheme((s) => s.setTheme);
-    const isDark = currentThemeId !== 'decido-light';
-
-    return (
-        <button
-            onClick={() => setTheme(isDark ? 'decido-light' : 'decido-dark')}
-            className="w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200 border text-text-secondary hover:text-text-primary hover:bg-surface-glass border-transparent"
-            title={isDark ? 'Cambiar a Decido Light' : 'Cambiar a Decido Dark'}
-            aria-label={isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro'}
-        >
-            <div className="relative w-4 h-4">
-                <Sun
-                    size={16}
-                    className="absolute inset-0 transition-all duration-300"
-                    style={{
-                        opacity: isDark ? 0 : 1,
-                        transform: isDark ? 'rotate(-90deg) scale(0.5)' : 'rotate(0deg) scale(1)',
-                        color: isDark ? undefined : '#f59e0b',
-                    }}
-                />
-                <Moon
-                    size={16}
-                    className="absolute inset-0 transition-all duration-300"
-                    style={{
-                        opacity: isDark ? 1 : 0,
-                        transform: isDark ? 'rotate(0deg) scale(1)' : 'rotate(90deg) scale(0.5)',
-                        color: isDark ? '#a78bfa' : undefined,
-                    }}
-                />
-            </div>
-        </button>
-    );
-}
-
-export const PlaygroundHeader = React.memo(function PlaygroundHeader({
-    extraActions = [],
-    modelLabel,
-    onModelClick,
-}: PlaygroundHeaderProps) {
-    // ── Read from stores ──
-    const isSidebarOpen = usePlaygroundStore((s) => s.isSidebarOpen);
-    const setIsSidebarOpen = usePlaygroundStore((s) => s.setIsSidebarOpen);
-    const prototypeBrand = usePlaygroundStore((s) => s.prototypeBrand);
-    const isCreatorMode = usePlaygroundStore((s) => s.isCreatorMode);
-    const setIsCreatorMode = usePlaygroundStore((s) => s.setIsCreatorMode);
-    const creatorViewMode = usePlaygroundStore((s) => s.creatorViewMode);
-    const setCreatorViewMode = usePlaygroundStore((s) => s.setCreatorViewMode);
-    const isVoiceActive = usePlaygroundStore((s) => s.isVoiceActive);
-    const { isSpeaking } = useEngineStore();
-    const debugIsOpen = useDebugPanelStore((s) => s.isOpen);
-    const debugErrorCount = useDebugPanelStore((s) => s.errorCount);
-    const toggleDebugPanel = useDebugPanelStore((s) => s.togglePanel);
-    const showChat = useLayoutStore((s) => s.showChat);
-    const setShowChat = useLayoutStore((s) => s.setShowChat);
-    const pgSetShowChat = usePlaygroundStore((s) => s.setShowChat);
-
-    const toggleChat = () => {
-        const newVal = !showChat;
-        setShowChat(newVal);
-        pgSetShowChat(newVal);
-    };
-
-    // Sync layout store on mode toggle
-    const syncCreatorMode = (newVal: boolean) => {
-        setIsCreatorMode(newVal);
-        useLayoutStore.getState().setIsCreatorMode(newVal);
-    };
-
-    // Built-in actions
-    const builtInActions: HeaderAction[] = [
-        {
-            id: 'toggle-chat',
-            icon: showChat ? <MessageSquareOff size={16} /> : <MessageSquare size={16} />,
-            label: showChat ? 'Ocultar chat' : 'Mostrar chat',
-            onClick: toggleChat,
-            variant: showChat ? 'ghost' : 'outline',
-            visibleIn: 'both',
-            className: showChat ? 'text-text-secondary' : 'text-accent-cyan bg-surface-glass border-accent-cyan/30',
-        },
-        {
-            id: 'debug-panel',
-            icon: <Bug size={16} />,
-            onClick: toggleDebugPanel,
-            variant: debugIsOpen ? 'accent' : 'ghost',
-            showIndicator: debugErrorCount > 0,
-            indicatorColor: 'bg-status-error',
-            visibleIn: 'both',
-        },
-    ];
-
-    const allActions = [...builtInActions, ...extraActions];
-    const visibleActions = allActions.filter(a =>
-        !a.visibleIn || a.visibleIn === 'both' ||
-        (a.visibleIn === 'creator' && isCreatorMode) ||
-        (a.visibleIn === 'player' && !isCreatorMode)
-    );
-
-    const getVariantClasses = (variant: HeaderAction['variant'] = 'ghost') => {
-        switch (variant) {
-            case 'accent':
-                return 'bg-surface-glass text-accent-cyan hover:bg-surface-elevated border border-accent-cyan';
-            case 'outline':
-                return 'bg-transparent text-text-primary hover:bg-surface-glass border-border-default';
-            default:
-                return 'bg-transparent text-text-secondary hover:text-text-primary hover:bg-surface-glass border-transparent';
-        }
-    };
-
-    return (
-        <header
-            data-tauri-drag-region
-            className="flex-none h-12 px-3 flex items-center justify-between bg-surface-secondary backdrop-blur-md border-b border-border-default shadow-[0_1px_3px_0_rgba(0,0,0,0.08)] z-30 select-none"
-        >
-            {/* ─── LEFT ─── */}
-            <div className="flex items-center gap-1.5 min-w-0">
-                {/* Sidebar Toggle */}
-                <button
-                    onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                    className="w-8 h-8 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-all duration-150 shrink-0"
-                    title={isSidebarOpen ? 'Cerrar panel' : 'Abrir panel'}
-                >
-                    {isSidebarOpen ? <PanelLeftClose size={18} /> : <PanelLeftOpen size={18} />}
-                </button>
-
-                {/* New Chat / Action */}
-                <button
-                    className="w-8 h-8 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-all duration-150 shrink-0"
-                    title="Nueva Conversación"
-                >
-                    <Plus size={18} />
-                </button>
-
-                <div className="h-4 w-px bg-border-subtle mx-1 hidden sm:block" />
-
-                {/* Brand / Title */}
-                <div
-                    data-tauri-drag-region
-                    className="flex items-center gap-2 min-w-0 cursor-default"
-                >
-                    <span className="text-sm font-semibold text-text-primary/80 tracking-tight truncate hidden sm:inline">
-                        <span className="text-accent-cyan capitalize">{prototypeBrand || 'Decido'} OS</span>
-                    </span>
-                </div>
-            </div>
-
-            {/* ─── CENTER: Controls ─── */}
-            <HeaderCenterControls isSpeaking={!!isSpeaking} isCreatorMode={isCreatorMode} creatorViewMode={creatorViewMode}
-                modelLabel={modelLabel} onModelClick={onModelClick} onSyncCreatorMode={syncCreatorMode} onSetCreatorViewMode={setCreatorViewMode} />
-
-            {/* ─── RIGHT: Dynamic Action Buttons ─── */}
-            <div className="flex items-center gap-1">
-                {visibleActions.map(action => (
-                    <button
-                        key={action.id}
-                        onClick={action.onClick}
-                        className={`relative h-8 rounded-lg flex items-center justify-center transition-all duration-150 border text-xs font-medium ${action.className || ''} ${getVariantClasses(action.variant)} ${action.label ? 'px-3 gap-1.5' : 'w-8'}`}
-                        title={action.label}
-                    >
-                        {action.icon}
-                        {action.label && <span className="hidden sm:inline">{action.label}</span>}
-                        {action.showIndicator && (
-                            <span className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ${action.indicatorColor || 'bg-accent-cyan'} shadow-[0_0_6px] animate-pulse`} />
-                        )}
-                    </button>
-                ))}
-
-                {/* Theme Toggle (Dark ↔ Light) */}
-                <ThemeToggleBtn />
-
-                {/* Layout Configurator */}
-                <LayoutConfigurator />
-
-                {/* Share / Export (static) */}
-                <button
-                    className="w-8 h-8 rounded-lg text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-all duration-150"
-                    title="Compartir"
-                >
-                    <Share2 size={16} />
-                </button>
-            </div>
-        </header>
-    );
-});
-

package/src/components/playground/PlaygroundSidebar.tsx

@@ -1,136 +0,0 @@
-import React from 'react';
-import { Menu, Play, Trash2, Save, Download, Upload, Database } from 'lucide-react';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useEngineStore } from '@decido/engine';
-import { KeyframeListItem } from './KeyframeListItem';
-import { downloadSequenceAsDSD, handleSequenceUpload } from './sidebarDsdIO';
-
-export interface PlaygroundSidebarProps {
-    isSidebarOpen: boolean;
-    setIsSidebarOpen: (open: boolean) => void;
-    prototypeBrand: string;
-    dynamicTimelines: any;
-    setDynamicTimelines: any;
-    currentTime: number;
-    setCurrentTime: (time: number) => void;
-}
-
-export const PlaygroundSidebar = React.memo(function PlaygroundSidebar({
-    isSidebarOpen, setIsSidebarOpen, prototypeBrand, dynamicTimelines, setDynamicTimelines, currentTime, setCurrentTime
-}: PlaygroundSidebarProps) {
-    const [editingKeyframe, setEditingKeyframe] = React.useState<number | null>(null);
-    const savedSequences = usePlaygroundStore(state => state.savedSequences);
-    const removeSavedSequence = usePlaygroundStore(state => state.removeSavedSequence);
-    const variables = useEngineStore(state => state.variables);
-
-    const brandSequences = savedSequences.filter(seq => seq.brand === prototypeBrand);
-
-    const loadSequence = (seq: any) => {
-        setDynamicTimelines((prev: any) => ({
-            ...prev,
-            [prototypeBrand]: { duration: seq.duration, keyframes: seq.keyframes }
-        }));
-        setCurrentTime(0);
-    };
-
-    const handleUpdateKeyframe = (index: number, newTime: string, newSpeech: string) => {
-        const t = parseFloat(newTime);
-        if (isNaN(t)) return;
-        setDynamicTimelines((prev: any) => {
-            const currentTimelines = { ...prev };
-            const updatedKeyframes = [...currentTimelines[prototypeBrand].keyframes];
-            updatedKeyframes[index] = { ...updatedKeyframes[index], t, speech: newSpeech };
-            updatedKeyframes.sort((a, b) => a.t - b.t);
-            return { ...currentTimelines, [prototypeBrand]: { ...currentTimelines[prototypeBrand], keyframes: updatedKeyframes } };
-        });
-        setEditingKeyframe(null);
-    };
-
-    if (!dynamicTimelines[prototypeBrand]) return null;
-
-    const keyframes = dynamicTimelines[prototypeBrand].keyframes;
-
-    return (
-        <div className="flex flex-col h-full w-full bg-surface-secondary/90 backdrop-blur-xl border-r border-border-subtle z-30 overflow-hidden">
-            <div className="w-full min-w-0 p-4 flex flex-col h-full opacity-100">
-                <div className="flex items-center gap-3 mb-6 mt-2">
-                    <button onClick={() => setIsSidebarOpen(false)} className="p-2 -ml-2 rounded-full hover:bg-surface-glass text-text-secondary hover:text-text-primary transition-colors">
-                        <Menu size={22} />
-                    </button>
-                    <span className="font-bold text-text-primary tracking-wide">Inspector de Capas</span>
-                </div>
-
-                <div className="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar">
-                    {/* Saved Sequences */}
-                    {brandSequences.length > 0 && (
-                        <div className="space-y-2 mb-6">
-                            <div className="flex items-center justify-between px-2 mb-2">
-                                <div className="text-xs font-mono text-text-muted tracking-wider flex items-center gap-2 uppercase">
-                                    <Save size={12} /> Secuencias Guardadas
-                                </div>
-                                <label className="cursor-pointer text-text-muted hover:text-cyan-400 transition-colors p-1" title="Importar Secuencia JSON">
-                                    <Upload size={14} />
-                                    <input type="file" accept=".json" className="hidden" onChange={(e) => handleSequenceUpload(e, prototypeBrand)} />
-                                </label>
-                            </div>
-                            <div className="space-y-1">
-                                {brandSequences.map((seq) => (
-                                    <div key={seq.id} className="flex items-center justify-between p-2 rounded-lg bg-surface-glass hover:bg-surface-glass border border-border-subtle transition-colors group">
-                                        <button onClick={() => loadSequence(seq)} className="flex-1 text-left min-w-0 pr-2">
-                                            <div className="text-xs font-medium text-text-primary truncate" title={seq.prompt}>{seq.prompt}</div>
-                                            <div className="text-[10px] text-text-muted font-mono mt-0.5">{seq.duration.toFixed(1)}s • {seq.keyframes.length} frames</div>
-                                        </button>
-                                        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                                            <button onClick={() => downloadSequenceAsDSD(seq)} className="p-1.5 rounded hover:bg-purple-500/20 text-purple-400 transition-colors" title="Exportar JSON"><Download size={14} /></button>
-                                            <button onClick={() => loadSequence(seq)} className="p-1.5 rounded hover:bg-cyan-500/20 text-cyan-400 transition-colors" title="Cargar y reproducir"><Play size={14} /></button>
-                                            <button onClick={() => removeSavedSequence(seq.id)} className="p-1.5 rounded hover:bg-red-500/20 text-red-400 transition-colors" title="Eliminar secuencia"><Trash2 size={14} /></button>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    )}
-
-                    {/* Watch Panel */}
-                    <div className="space-y-2 mb-6 select-text">
-                        <div className="flex items-center justify-between px-2 mb-2">
-                            <div className="text-xs font-mono text-cyan-500 tracking-wider flex items-center gap-2 uppercase">
-                                <Database size={12} /> Watch: Variables Globales
-                            </div>
-                        </div>
-                        <div className="bg-surface-overlay border border-border-subtle rounded-lg p-2 font-mono text-[10px] overflow-hidden">
-                            {Object.keys(variables).length === 0 ? (
-                                <div className="text-text-muted italic px-1">Memoria vacía. El runtime iniciará las variables al ejecutar Nodos.</div>
-                            ) : (
-                                <div className="space-y-1">
-                                    {Object.entries(variables).map(([key, value]) => (
-                                        <div key={key} className="flex flex-col group hover:bg-surface-glass rounded px-1 transition-colors">
-                                            <span className="text-purple-400 font-bold">{key}:</span>
-                                            <span className="text-text-primary pl-2 break-all">
-                                                {typeof value === 'object' ? JSON.stringify(value) : String(value)}
-                                            </span>
-                                        </div>
-                                    ))}
-                                </div>
-                            )}
-                        </div>
-                    </div>
-
-                    {/* Keyframe Timeline */}
-                    <div className="space-y-2">
-                        <div className="text-xs font-mono text-text-muted px-2 tracking-wider uppercase">Línea de Tiempo ({prototypeBrand})</div>
-                        {keyframes.map((kf: any, i: number) => {
-                            const isPast = currentTime >= kf.t;
-                            const isActive = isPast && (i === keyframes.length - 1 || currentTime < keyframes[i + 1].t);
-                            return (
-                                <KeyframeListItem key={i} kf={kf} index={i} isActive={isActive} isPast={isPast}
-                                    isEditing={editingKeyframe === i} isLast={i === keyframes.length - 1}
-                                    onSeek={setCurrentTime} onStartEdit={setEditingKeyframe} onSaveEdit={handleUpdateKeyframe} />
-                            );
-                        })}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-});

package/src/components/playground/PlaygroundTerminal.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Terminal, Trash2, X } from 'lucide-react';
-
-export interface PlaygroundTerminalProps {
-    isOpen: boolean;
-    setIsOpen: (open: boolean) => void;
-    logs: { time: string, msg: string, type: string }[];
-    setLogs: (logs: { time: string, msg: string, type: string }[]) => void;
-    logsEndRef: React.RefObject<HTMLDivElement | null>;
-}
-
-export const PlaygroundTerminal = React.memo(function PlaygroundTerminal({ isOpen, setIsOpen, logs, setLogs, logsEndRef }: PlaygroundTerminalProps) {
-    return (
-        <AnimatePresence>
-            {isOpen && (
-                <motion.div
-                    initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 50 }}
-                    className="absolute right-6 bottom-40 w-80 h-64 bg-surface-overlay backdrop-blur-md border border-border-default rounded-xl flex flex-col overflow-hidden z-30 shadow-2xl"
-                >
-                    <div className="flex items-center justify-between px-3 py-2 border-b border-border-default bg-surface-glass">
-                        <div className="flex items-center gap-2">
-                            <Terminal size={14} className="text-text-secondary" />
-                            <span className="text-xs font-mono text-text-secondary">System Log</span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                            <button onClick={() => setLogs([])} className="text-text-muted hover:text-red-400 transition-colors" title="Limpiar logs"><Trash2 size={14} /></button>
-                            <button onClick={() => setIsOpen(false)} className="text-text-muted hover:text-text-primary transition-colors"><X size={14} /></button>
-                        </div>
-                    </div>
-                    <div className="flex-1 overflow-y-auto p-3 font-mono text-[10px] space-y-1 custom-scrollbar">
-                        {logs.map((log, i) => (
-                            <div key={i} className={`flex gap-2 ${log.type === 'error' ? 'text-red-400' : log.type === 'success' ? 'text-emerald-400' : log.type === 'system' ? 'text-purple-400' : 'text-text-secondary'}`}>
-                                <span className="opacity-50 shrink-0">[{log.time}]</span>
-                                <span className="wrap-break-word">{log.msg}</span>
-                            </div>
-                        ))}
-                        <div ref={logsEndRef} />
-                    </div>
-                </motion.div>
-            )}
-        </AnimatePresence>
-    );
-});

package/src/components/playground/SuggestionCards.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { resolveIcon, resolveColor } from '../../config/IconRegistry';
-
-interface SuggestionCardsProps {
-    suggestions: any[];
-    onSelect: (command: string) => void;
-}
-
-export const SuggestionCards = React.memo(function SuggestionCards({ suggestions, onSelect }: SuggestionCardsProps) {
-    return (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5 sm:gap-3 w-full min-w-0 max-w-full mt-3 sm:mt-4">
-            {suggestions.map((sug, i) => {
-                const IconComponent = resolveIcon(sug.icon);
-                const colorClass = resolveColor(sug.color);
-                return (
-                    <div key={i} className="group relative flex flex-col p-3 sm:p-4 bg-surface-tertiary hover:bg-surface-elevated border border-border-subtle hover:border-border-default rounded-xl sm:rounded-2xl text-left transition-all overflow-hidden h-auto min-h-[6rem] sm:h-32 min-w-0">
-                        <div className="flex-1 cursor-pointer flex flex-col min-w-0" onClick={() => onSelect(sug.command)}>
-                            <div className="flex items-center gap-2 mb-1.5 sm:mb-2">
-                                <div className={`p-1 sm:p-1.5 rounded-full bg-surface-glass shrink-0 ${colorClass}`}><IconComponent size={12} className="sm:w-3.5 sm:h-3.5" /></div>
-                                <span className={`text-[11px] sm:text-xs font-bold truncate ${colorClass}`}>{sug.title}</span>
-                            </div>
-                            <p className="text-xs sm:text-sm text-text-secondary flex-1 leading-snug line-clamp-2 sm:line-clamp-3 overflow-hidden break-words">"{sug.command}"</p>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-});