# VSCode Layout con DockView

Una implementación completa de un sistema de layout similar a Visual Studio Code, con zonas redimensionables y capacidad de mover paneles de DockView entre diferentes áreas de la aplicación.

## 🎯 Características Principales

### ✅ **Zonas Redimensionables**
- **Navbar**: Barra superior fija
- **Sidebar**: Panel lateral izquierdo redimensionable
- **Asidebar**: Panel lateral derecho redimensionable
- **Bottom**: Panel inferior redimensionable
- **Center**: Área central principal

### ✅ **Sistema de Drag & Drop**
- Arrastra paneles entre cualquier zona
- Indicadores visuales durante el arrastre
- Soporte completo para pestañas de DockView

### ✅ **Gestión de Estado**
- Persistencia automática en localStorage
- Exportar/importar configuraciones de layout
- Sistema de versionado para compatibilidad

### ✅ **Integración con DockView**
- Cada zona puede contener múltiples paneles de DockView
- Comunicación entre paneles preservada
- Soporte para todos los componentes de dock existentes

## 🚀 Uso Rápido

```typescript
import { VSCodeDockView } from '@/components/VSCodeLayout';

function App() {
  return <VSCodeDockView />;
}
```

## 📁 Arquitectura del Sistema

### Componentes Principales

```
VSCodeLayout/
├── VSCodeLayout.tsx          # Layout base con zonas redimensionables
├── ZoneManager.tsx          # Gestión de paneles y zonas
├── ZoneDockView.tsx         # Integración DockView por zona
├── VSCodeDockView.tsx       # Componente principal completo
├── LayoutPersistence.tsx    # Persistencia y exportación
├── VSCodeLayout.css         # Estilos del layout
└── index.ts                # Exportaciones
```

### Flujo de Datos

```
VSCodeDockView (Provider)
    ↓
ZoneManagerContext (Estado global)
    ↓
VSCodeLayout (UI Layout)
    ↓
ZoneDockView (DockView por zona)
    ↓
Componentes de Dock individuales
```

## 🎨 Personalización

### Configurar Zonas Iniciales

```typescript
<VSCodeLayout
  navbar={<CustomNavbar />}
  sidebar={
    <SidebarDockView
      components={dockComponents}
      initialPanels={[
        { id: 'explorer', component: 'fileExplorer', title: 'Explorador' }
      ]}
    />
  }
  onLayoutChange={(layout) => console.log('Layout changed:', layout)}
>
  <CenterArea />
</VSCodeLayout>
```

### Agregar Componentes Personalizados

```typescript
const customComponents = {
  myDock: MyCustomDockComponent,
  tasks: TaskDock,
  properties: PropertiesDock,
};

<ZoneDockView
  zone="sidebar"
  components={customComponents}
  initialPanels={[
    { id: 'my-panel', component: 'myDock', title: 'Mi Panel' }
  ]}
/>
```

### Gestión Programática de Paneles

```typescript
function MyComponent() {
  const { movePanel, addPanel, removePanel } = useZoneManager();

  const handleMovePanel = () => {
    movePanel('panel-id', 'sidebar', 'center');
  };

  const handleAddPanel = () => {
    addPanel('bottom', {
      id: 'new-panel',
      title: 'Nuevo Panel',
      component: MyPanelComponent,
    });
  };

  return (
    <Button onClick={handleMovePanel}>
      Mover Panel
    </Button>
  );
}
```

## 🔧 Configuración Avanzada

### Persistencia Personalizada

```typescript
import { useLayoutPersistence } from '@/components/VSCodeLayout';

function LayoutManager() {
  const { saveLayout, loadLayout, clearLayout } = useLayoutPersistence();

  useEffect(() => {
    const savedLayout = loadLayout();
    if (savedLayout) {
      // Aplicar layout guardado
      applyLayout(savedLayout);
    }
  }, []);

  return (
    <Group>
      <Button onClick={() => saveLayout(currentLayout, currentPanels)}>
        Guardar Layout
      </Button>
      <Button onClick={clearLayout}>
        Limpiar Layout
      </Button>
    </Group>
  );
}
```

### Auto-guardado

```typescript
import { useAutoSaveLayout } from '@/components/VSCodeLayout';

function AutoSaveExample() {
  const [layout, setLayout] = useState(defaultLayout);
  const [panels, setPanels] = useState(defaultPanels);

  // Auto-guardar cada 2 segundos después de cambios
  useAutoSaveLayout(layout, panels, 2000);

  return <VSCodeLayout layout={layout} onLayoutChange={setLayout} />;
}
```

## 🎮 Controles de Usuario

### Atajos de Teclado (Futuro)
- `Ctrl+Shift+E`: Toggle sidebar
- `Ctrl+Shift+F`: Toggle asidebar
- `Ctrl+J`: Toggle bottom panel
- `Ctrl+Shift+P`: Abrir panel de comandos

### Gestos del Mouse
- **Arrastrar bordes**: Redimensionar zonas
- **Arrastrar pestañas**: Mover paneles entre zonas
- **Doble click bordes**: Auto-ajustar tamaño
- **Click derecho pestañas**: Menú contextual

## 🔍 API de Zonas

### ZoneManager Context

```typescript
interface ZoneManagerContextType {
  zones: Record<ZoneType, Zone>;
  movePanel: (panelId: string, fromZone: ZoneType, toZone: ZoneType) => void;
  addPanel: (zone: ZoneType, panel: Panel) => void;
  removePanel: (zone: ZoneType, panelId: string) => void;
  setActivePanel: (zone: ZoneType, panelId: string) => void;
  toggleZone: (zone: ZoneType) => void;
}
```

### Panel Interface

```typescript
interface Panel {
  id: string;
  title: string;
  component: React.ComponentType<any>;
  props?: any;
  closable?: boolean;
  icon?: React.ReactNode;
}
```

### Zone Interface

```typescript
interface Zone {
  id: string;
  name: string;
  panels: Panel[];
  activePanel?: string;
  visible: boolean;
}
```

## 🎨 Temas y Estilos

### Variables CSS Disponibles

```css
:root {
  --vscode-navbar-height: 40px;
  --vscode-sidebar-width: 250px;
  --vscode-asidebar-width: 300px;
  --vscode-bottom-height: 200px;

  --vscode-border-color: #d0d7de;
  --vscode-bg-primary: #ffffff;
  --vscode-bg-secondary: #f6f8fa;
  --vscode-text-primary: #24292f;
  --vscode-text-secondary: #656d76;

  --vscode-resize-handle-color: #0078d4;
  --vscode-resize-handle-hover: #106ebe;
}
```

### Clases CSS Personalizables

```css
.vscode-layout { /* Layout principal */ }
.layout-zone { /* Cualquier zona */ }
.layout-zone.navbar { /* Navbar específica */ }
.layout-zone.sidebar { /* Sidebar específica */ }
.resize-handle { /* Manejadores de redimensión */ }
.zone-content { /* Contenido de zona */ }
.zone-tabs { /* Pestañas de zona */ }
.drop-zone-active { /* Zona con drop activo */ }
```

## 🚨 Troubleshooting

### Problemas Comunes

1. **Paneles no se mueven entre zonas**
   ```typescript
   // Verificar que el componente esté registrado
   const components = {
     myComponent: MyComponent, // ✅ Registrado
   };
   ```

2. **Layout no se guarda**
   ```typescript
   // Verificar localStorage disponible
   if (typeof Storage !== "undefined") {
     // localStorage disponible
   }
   ```

3. **Redimensión no funciona**
   ```css
   /* Verificar que no haya CSS conflictivo */
   .vscode-layout {
     position: relative; /* Requerido */
     overflow: hidden;  /* Requerido */
   }
   ```

### Debug Mode

```typescript
// Habilitar logs de debug
localStorage.setItem('vscode-layout-debug', 'true');

// En el código
const debug = localStorage.getItem('vscode-layout-debug') === 'true';
if (debug) {
  console.log('Zone state:', zones);
  console.log('Layout state:', layout);
}
```

## 📊 Métricas y Performance

### Optimizaciones Implementadas
- **Debounce en redimensión**: Evita re-renders excesivos
- **Lazy loading**: Paneles se cargan cuando son visibles
- **Memoización**: Componentes memorizados para mejor performance
- **Virtual scrolling**: En listas largas de paneles

### Monitoreo de Performance

```typescript
// Medir tiempo de operaciones
console.time('panel-move');
movePanel('panel-1', 'sidebar', 'center');
console.timeEnd('panel-move');

// Memory usage
console.log('Memory:', (performance as any).memory);
```

## 🔮 Roadmap

### Próximas Características
- [ ] Múltiples instancias de DockView por zona
- [ ] Atajos de teclado configurables
- [ ] Temas personalizables por zona
- [ ] Animaciones de transición
- [ ] Modo fullscreen para paneles
- [ ] Búsqueda global de paneles
- [ ] Workspaces personalizados
- [ ] Integración con React Router
- [ ] API REST para layouts remotos
- [ ] Colaboración en tiempo real

### Mejoras Técnicas
- [ ] Testing completo (Jest + RTL)
- [ ] Storybook para componentes
- [ ] Performance profiling
- [ ] A11y compliance
- [ ] Mobile responsiveness
- [ ] PWA support

## 📄 Licencia

Este proyecto usa la misma licencia que el proyecto principal.

---

## 🤝 Contribuir

Para agregar nuevas funcionalidades al VSCode Layout:

1. **Nuevas Zonas**: Extender `ZoneType` y `ZoneManager`
2. **Nuevos Paneles**: Crear componente y registrar en `components`
3. **Nuevas Características**: Seguir la arquitectura de contexto/hooks
4. **Estilos**: Usar variables CSS para consistencia

¡El VSCode Layout está diseñado para ser extensible y modular!