@decido/shell 1.0.0 → 4.0.2

package/src/components/shell/LayoutConfigurator.tsx

@@ -1,209 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Settings, Grid3X3, Save, RotateCcw, Trash2, ChevronDown, SlidersHorizontal } from 'lucide-react';
-import { useLayoutStore, type RegionId, type SlotComponentId, BUILT_IN_PRESETS } from '../../store/useLayoutStore';
-import { getAvailableSlotComponents } from './SlotRenderer';
-import { REGION_LABELS, SLOT_OPTIONS } from './layoutConstants';
-
-export function LayoutConfigurator() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [regionsOpen, setRegionsOpen] = useState(false);
-    const [presetName, setPresetName] = useState('');
-
-    const slots = useLayoutStore((s) => s.slots);
-    const setSlot = useLayoutStore((s) => s.setSlot);
-    const resetLayout = useLayoutStore((s) => s.resetLayout);
-    const savedPresets = useLayoutStore((s) => s.savedPresets);
-    const savePreset = useLayoutStore((s) => s.savePreset);
-    const loadPreset = useLayoutStore((s) => s.loadPreset);
-    const deletePreset = useLayoutStore((s) => s.deletePreset);
-
-    const handleSave = useCallback(() => {
-        if (presetName.trim()) {
-            savePreset(presetName.trim());
-            setPresetName('');
-        }
-    }, [presetName, savePreset]);
-
-    return (
-        <div className="relative">
-            {/* Trigger Button */}
-            <button
-                onClick={() => setIsOpen(!isOpen)}
-                className={`p-2 rounded-lg transition-all ${
-                    isOpen
-                        ? 'bg-cyan-500/20 text-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.2)]'
-                        : 'text-text-muted hover:text-text-primary hover:bg-surface-glass'
-                }`}
-                title="Layout Configurator"
-            >
-                <Grid3X3 size={16} />
-            </button>
-
-            {/* Dropdown Panel */}
-            <AnimatePresence>
-                {isOpen && (
-                    <>
-                        {/* Backdrop */}
-                        <div
-                            className="fixed inset-0 z-800"
-                            style={{ position: 'fixed', inset: 0, zIndex: 800 }}
-                            onClick={() => setIsOpen(false)}
-                        />
-
-                        <motion.div
-                            initial={{ opacity: 0, y: -8, scale: 0.95 }}
-                            animate={{ opacity: 1, y: 0, scale: 1 }}
-                            exit={{ opacity: 0, y: -8, scale: 0.95 }}
-                            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-                            className="absolute top-full right-0 mt-2 w-[calc(100vw-2rem)] sm:w-[380px] z-801
-                                bg-surface-tertiary border border-border-default rounded-xl sm:rounded-2xl shadow-2xl overflow-hidden"
-                        >
-                            {/* Header */}
-                            <div className="px-4 py-3 border-b border-border-subtle flex items-center justify-between">
-                                <div className="flex items-center gap-2">
-                                    <Settings size={14} className="text-cyan-400" />
-                                    <h3 className="text-sm font-bold text-text-primary">Layout Configurator</h3>
-                                </div>
-                                <div className="flex items-center gap-1">
-                                    {Object.keys(BUILT_IN_PRESETS).map((preset) => (
-                                        <button
-                                            key={preset}
-                                            onClick={() => resetLayout(preset)}
-                                            className="px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider
-                                                rounded-full bg-surface-glass text-text-muted hover:text-text-primary hover:bg-surface-glass
-                                                transition-colors border border-border-subtle"
-                                        >
-                                            {preset}
-                                        </button>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Region Grid (Collapsible) */}
-                            <div>
-                                <button
-                                    onClick={() => setRegionsOpen(!regionsOpen)}
-                                    className="w-full px-4 py-2.5 flex items-center justify-between hover:bg-surface-glass transition-colors group"
-                                >
-                                    <div className="flex items-center gap-2 text-xs font-medium text-text-secondary group-hover:text-text-primary">
-                                        <SlidersHorizontal size={14} className="text-cyan-500/50" />
-                                        <span>Configuración de Slots</span>
-                                        <span className="text-[9px] px-1.5 rounded-full bg-cyan-500/10 text-cyan-400">6 REGIONES</span>
-                                    </div>
-                                    <motion.div animate={{ rotate: regionsOpen ? 180 : 0 }}>
-                                        <ChevronDown size={14} className="text-text-muted" />
-                                    </motion.div>
-                                </button>
-                                
-                                <AnimatePresence initial={false}>
-                                    {regionsOpen && (
-                                        <motion.div
-                                            initial={{ height: 0, opacity: 0 }}
-                                            animate={{ height: "auto", opacity: 1 }}
-                                            exit={{ height: 0, opacity: 0 }}
-                                            transition={{ duration: 0.2, ease: "easeInOut" }}
-                                            className="overflow-hidden"
-                                        >
-                                            <div className="px-4 pb-4 pt-1 space-y-2 bg-black/10">
-                                                {(Object.keys(REGION_LABELS) as RegionId[]).map((regionId) => (
-                                                    <div key={regionId} className="flex items-center gap-3">
-                                                        <div className="w-20 flex items-center gap-1.5">
-                                                            <span className="w-5 h-5 rounded bg-surface-glass flex items-center justify-center
-                                                                text-[9px] font-bold font-mono text-cyan-400/60 shadow-inner">
-                                                                {regionId}
-                                                            </span>
-                                                            <span className="text-[10px] text-text-muted truncate">
-                                                                {REGION_LABELS[regionId]}
-                                                            </span>
-                                                        </div>
-                                                        <div className="flex-1 relative">
-                                                            <select
-                                                                value={slots[regionId] || ''}
-                                                                onChange={(e) => setSlot(regionId, (e.target.value || null) as SlotComponentId)}
-                                                                className="w-full bg-surface-secondary border border-border-default rounded-lg px-3 py-1.5
-                                                                    text-xs text-text-primary appearance-none cursor-pointer
-                                                                    hover:border-border-strong transition-colors
-                                                                    focus:outline-hidden focus:border-cyan-500/40"
-                                                            >
-                                                                {SLOT_OPTIONS.map((opt) => (
-                                                                    <option key={opt.id || 'null'} value={opt.id || ''}>
-                                                                        {opt.label}
-                                                                    </option>
-                                                                ))}
-                                                            </select>
-                                                            <ChevronDown size={12} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none" />
-                                                        </div>
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        </motion.div>
-                                    )}
-                                </AnimatePresence>
-                            </div>
-
-                            {/* Custom Presets Section */}
-                            <div className="px-4 pb-3 border-t border-border-subtle pt-3">
-                                <div className="flex items-center gap-2 mb-2">
-                                    <input
-                                        value={presetName}
-                                        onChange={(e) => setPresetName(e.target.value)}
-                                        onKeyDown={(e) => e.key === 'Enter' && handleSave()}
-                                        placeholder="Nombre del preset..."
-                                        className="flex-1 bg-surface-glass border border-border-default rounded-lg px-3 py-1.5
-                                            text-xs text-text-primary placeholder:text-text-muted outline-hidden
-                                            focus:border-cyan-500/40"
-                                    />
-                                    <button
-                                        onClick={handleSave}
-                                        disabled={!presetName.trim()}
-                                        className="p-1.5 rounded-lg bg-cyan-500/10 text-cyan-400 hover:bg-cyan-500/20
-                                            disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-                                        title="Guardar Preset"
-                                    >
-                                        <Save size={14} />
-                                    </button>
-                                </div>
-
-                                {savedPresets.length > 0 && (
-                                    <div className="space-y-1 max-h-[120px] overflow-y-auto">
-                                        {savedPresets.map((preset) => (
-                                            <div key={preset.id} className="flex items-center gap-2 group">
-                                                <button
-                                                    onClick={() => loadPreset(preset.id)}
-                                                    className="flex-1 text-left px-2 py-1 text-[11px] text-text-secondary
-                                                        hover:text-text-primary hover:bg-surface-glass rounded-lg transition-colors"
-                                                >
-                                                    {preset.name}
-                                                </button>
-                                                <button
-                                                    onClick={() => deletePreset(preset.id)}
-                                                    className="p-1 rounded text-text-muted hover:text-red-400
-                                                        opacity-0 group-hover:opacity-100 transition-all"
-                                                >
-                                                    <Trash2 size={12} />
-                                                </button>
-                                            </div>
-                                        ))}
-                                    </div>
-                                )}
-                            </div>
-
-                            {/* Footer */}
-                            <div className="px-4 py-2 border-t border-border-subtle flex items-center justify-between text-[10px] text-text-muted">
-                                <span>⌘K → buscar slots</span>
-                                <button
-                                    onClick={() => resetLayout('player')}
-                                    className="flex items-center gap-1 hover:text-text-secondary transition-colors"
-                                >
-                                    <RotateCcw size={10} />
-                                    Reset
-                                </button>
-                            </div>
-                        </motion.div>
-                    </>
-                )}
-            </AnimatePresence>
-        </div>
-    );
-}

package/src/components/shell/LayoutGrid.tsx

@@ -1,178 +0,0 @@
-import React from 'react';
-import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
-import { useLayoutStore } from '../../store/useLayoutStore';
-import { SlotRenderer } from './SlotRenderer';
-import { TabBar } from './TabBar';
-
-/**
- * LayoutGrid — Configurable grid layout for the Decido OS workspace.
- * 
- * Architecture (from the user's boceto):
- * ┌─── AppHeader (rendered by parent) ──────────────────┐
- * ├── T1 ─┤──── T2 (TabBar + Commands) ────┤── T3 ─────┤
- * ├───┐   ┌─────────────────────────┐   ┌──────────┤   │
- * │R1 │   │     Main Content        │   │   R3     │   │
- * │   │   │     (children)          │   │          │   │
- * ├───┤   │                         │   ├──────────┤   │
- * │R2 │   │                         │   │   R4     │   │
- * └───┘   └─────────────────────────┘   └──────────┘   │
- *         ┌────── R6 (StatusBar) ──────────────────┐   │
- *         └────────────────────────────────────────┘   │
- * 
- * The grid reads slot assignments from useLayoutStore.
- * PanelResizeHandle between all regions for user-resizable panels.
- */
-
-/** Resize handle classes and inner elements */
-const V_HANDLE_CLASSES = "w-1.5 hover:bg-cyan-500/20 active:bg-cyan-500/30 transition-colors cursor-col-resize z-40 relative group flex items-center justify-center";
-const V_HANDLE_INNER = <div className="w-[2px] h-10 bg-white/5 rounded-full group-hover:bg-cyan-500/60 transition-colors" />;
-
-const H_HANDLE_CLASSES = "h-1.5 hover:bg-cyan-500/20 active:bg-cyan-500/30 transition-colors cursor-row-resize z-40 relative group flex items-center justify-center";
-const H_HANDLE_INNER = <div className="h-[2px] w-10 bg-white/5 rounded-full group-hover:bg-cyan-500/60 transition-colors" />;
-
-/** Shared inset shadow for depth perception on side panels */
-const LEFT_PANEL_CLASSES = "h-full overflow-hidden flex flex-col min-w-0 min-h-0 bg-surface-secondary border-r border-border-subtle shadow-[inset_-6px_0_20px_rgba(0,0,0,0.15)]";
-const RIGHT_PANEL_CLASSES = "h-full overflow-hidden flex flex-col min-w-0 min-h-0 bg-surface-secondary border-l border-border-subtle shadow-[inset_6px_0_20px_rgba(0,0,0,0.15)]";
-
-interface LayoutGridProps {
-    /** Main content to render in the center (chat area in player mode, or custom) */
-    children: React.ReactNode;
-    /** Additional props to pass through to slot components */
-    slotProps?: Record<string, any>;
-}
-
-export function LayoutGrid({ children, slotProps = {} }: LayoutGridProps) {
-    const slots = useLayoutStore((s) => s.slots);
-    const tabs = useLayoutStore((s) => s.tabs);
-    const showCanvas = useLayoutStore((s) => s.showCanvas);
-    const showChat = useLayoutStore((s) => s.showChat);
-
-    const activeR1 = showChat ? slots.R1 : null;
-    const hasLeft = !!(activeR1 || slots.R2);
-    const hasRight = !!(slots.R3 || slots.R4);
-    const hasBottom = !!slots.R6;
-    const hasTabs = tabs.length > 0;
-
-    // ── Dynamic key forces PanelGroup re-mount when composition changes ──
-    // This resets react-resizable-panels internal flex ratios to fresh defaults
-    const layoutKey = `${hasLeft ? 'L' : ''}${showCanvas ? 'C' : ''}${hasRight ? 'R' : ''}`;
-
-    // ── Compute panel sizes based on current layout configuration ──
-    const leftDefault = showCanvas ? (hasRight ? 20 : 25) : (hasRight ? 50 : 100);
-    const leftMax = showCanvas ? 35 : (hasRight ? 70 : 100);
-    const rightDefault = showCanvas ? (hasLeft ? 25 : 40) : (hasLeft ? 50 : 100);
-    const rightMax = showCanvas ? 60 : (hasLeft ? 70 : 100);
-    const centerDefault = hasLeft && hasRight ? 40 : (hasLeft ? 60 : (hasRight ? 50 : 100));
-
-    return (
-        <div className="flex-1 flex flex-col h-full overflow-hidden min-w-0 min-h-0">
-            {/* ── R5: Top Edge (extension slot) ── */}
-            {slots.R5 && (
-                <div className="flex-none">
-                    <SlotRenderer componentId={slots.R5} slotProps={slotProps} />
-                </div>
-            )}
-
-            {/* ── T2: TabBar (only when tabs exist) ── */}
-            {hasTabs && <TabBar />}
-
-            {/* ── Main horizontal layout: R1/R2 | Center | R3/R4 ── */}
-            <PanelGroup 
-                key={layoutKey}
-                orientation="horizontal" 
-                className="flex-1 min-w-0 min-h-0"
-            >
-                {/* ── LEFT COLUMN: R1 (top) + R2 (bottom) ── */}
-                {hasLeft && (
-                    <Panel
-                        id="left-column"
-                        defaultSize={leftDefault}
-                        minSize={15}
-                        className="h-full overflow-hidden flex flex-col min-w-0 min-h-0"
-                    >
-                        {activeR1 && slots.R2 ? (
-                            <PanelGroup orientation="vertical" className="h-full min-w-0 min-h-0">
-                                <Panel id="R1" defaultSize={65} minSize={20} className="flex flex-col min-w-0 min-h-0">
-                                    <div className={LEFT_PANEL_CLASSES}>
-                                        <SlotRenderer componentId={activeR1} slotProps={slotProps} />
-                                    </div>
-                                </Panel>
-                                <PanelResizeHandle className={H_HANDLE_CLASSES}>{H_HANDLE_INNER}</PanelResizeHandle>
-                                <Panel id="R2" defaultSize={35} minSize={15} className="flex flex-col min-w-0 min-h-0">
-                                    <div className={LEFT_PANEL_CLASSES}>
-                                        <SlotRenderer componentId={slots.R2} slotProps={slotProps} />
-                                    </div>
-                                </Panel>
-                            </PanelGroup>
-                        ) : (
-                            <div className={LEFT_PANEL_CLASSES}>
-                                <SlotRenderer componentId={activeR1 || slots.R2} slotProps={slotProps} />
-                            </div>
-                        )}
-                    </Panel>
-                )}
-
-                {/* ── SEPARATOR: Left ↔ Center ── */}
-                {hasLeft && showCanvas && (
-                    <PanelResizeHandle id="h-left" className={V_HANDLE_CLASSES}>{V_HANDLE_INNER}</PanelResizeHandle>
-                )}
-
-                {/* ── CENTER: Main Content (only when canvas visible) ── */}
-                {showCanvas && (
-                    <Panel
-                        id="center"
-                        defaultSize={centerDefault}
-                        minSize={20}
-                        className="h-full overflow-hidden flex flex-col min-w-0 min-h-0"
-                    >
-                        <div className="h-full flex flex-col overflow-hidden bg-surface-secondary min-w-0 min-h-0">
-                            {children}
-                        </div>
-                    </Panel>
-                )}
-
-                {/* ── SEPARATOR: Center ↔ Right (or Left ↔ Right when canvas hidden) ── */}
-                {hasRight && (showCanvas || hasLeft) && (
-                    <PanelResizeHandle id="h-right" className={V_HANDLE_CLASSES}>{V_HANDLE_INNER}</PanelResizeHandle>
-                )}
-
-                {/* ── RIGHT COLUMN: R3 (top) + R4 (bottom) ── */}
-                {hasRight && (
-                    <Panel
-                        id="right-column"
-                        defaultSize={rightDefault}
-                        minSize={15}
-                        className="h-full overflow-hidden flex flex-col min-w-0 min-h-0"
-                    >
-                        {slots.R3 && slots.R4 ? (
-                            <PanelGroup orientation="vertical" className="h-full min-w-0 min-h-0">
-                                <Panel id="R3" defaultSize={65} minSize={20} className="flex flex-col min-w-0 min-h-0">
-                                    <div className={RIGHT_PANEL_CLASSES}>
-                                        <SlotRenderer componentId={slots.R3} slotProps={slotProps} />
-                                    </div>
-                                </Panel>
-                                <PanelResizeHandle className={H_HANDLE_CLASSES}>{H_HANDLE_INNER}</PanelResizeHandle>
-                                <Panel id="R4" defaultSize={35} minSize={15} className="flex flex-col min-w-0 min-h-0">
-                                    <div className={RIGHT_PANEL_CLASSES}>
-                                        <SlotRenderer componentId={slots.R4} slotProps={slotProps} />
-                                    </div>
-                                </Panel>
-                            </PanelGroup>
-                        ) : (
-                            <div className={RIGHT_PANEL_CLASSES}>
-                                <SlotRenderer componentId={slots.R3 || slots.R4} slotProps={slotProps} />
-                            </div>
-                        )}
-                    </Panel>
-                )}
-            </PanelGroup>
-
-            {/* ── R6: Bottom Edge (StatusBar / extension slot) ── */}
-            {hasBottom && (
-                <div className="flex-none border-t border-border-subtle">
-                    <SlotRenderer componentId={slots.R6} slotProps={slotProps} />
-                </div>
-            )}
-        </div>
-    );
-}