@decido/shell-vscode-core 1.0.0 → 4.0.1

package/dist/ui/debug-panel/dragAndResize.js

@@ -1,140 +0,0 @@
-import { createEffect } from '../../core/signals.js';
-import { dragState, setDragState, resizeState, setResizeState, highestZIndex, setHighestZIndex } from './state.js';
-import { panelConfigs, setPanelConfigs } from './panelManager.js';
-// ===================================================================
-// Función Principal (Autónoma y sin dependencias)
-// ===================================================================
-/**
- * Registra los listeners globales para arrastrar y redimensionar.
- * Se llama una sola vez al iniciar la aplicación.
- */
-export function bindGlobalDragAndResizeEvents() {
-    document.addEventListener('mousedown', handleMouseDown);
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-    // Efecto reactivo para cambiar el cursor del body
-    createEffect(() => {
-        const isDragging = dragState().isDragging;
-        const currentResize = resizeState();
-        if (isDragging) {
-            document.body.style.cursor = 'grabbing';
-        }
-        else if (currentResize.isResizing) {
-            document.body.style.cursor = getCursorForDirection(currentResize.handle);
-        }
-        else {
-            document.body.style.cursor = '';
-        }
-    });
-}
-// ===================================================================
-// Manejadores de Eventos (Solo actualizan el estado)
-// ===================================================================
-function handleMouseDown(e) {
-    const target = e.target;
-    const header = target.closest('.debug-header');
-    const resizeHandle = target.closest('.resize-handle');
-    if (!header && !resizeHandle)
-        return;
-    // Ignorar clics en los botones del header
-    if (header && target.closest('.debug-controls'))
-        return;
-    const panelEl = target.closest('.debug-panel');
-    if (!panelEl)
-        return;
-    const panelId = panelEl.id.replace('debug-panel-', '');
-    // 1. Traer al frente actualizando la configuración de los paneles
-    setHighestZIndex(prev => prev + 1);
-    setPanelConfigs(configs => configs.map(p => (p.id === panelId ? { ...p, zIndex: highestZIndex() } : p)));
-    // 2. Iniciar el estado de la operación (arrastrar o redimensionar)
-    if (header) {
-        const startPanelPos = panelConfigs().find(p => p.id === panelId).position;
-        setDragState({
-            isDragging: true,
-            activePanel: panelId,
-            startPos: { x: e.clientX, y: e.clientY },
-            startPanelPos: startPanelPos,
-        });
-    }
-    else if (resizeHandle) {
-        const panelConfig = panelConfigs().find(p => p.id === panelId);
-        setResizeState({
-            isResizing: true,
-            activePanel: panelId,
-            handle: resizeHandle.dataset.direction,
-            startPos: { x: e.clientX, y: e.clientY },
-            startSize: panelConfig.size,
-            startPanelPos: panelConfig.position,
-        });
-    }
-}
-function handleMouseMove(e) {
-    const currentDrag = dragState();
-    const currentResize = resizeState();
-    if (currentDrag.isDragging && currentDrag.activePanel) {
-        const deltaX = e.clientX - currentDrag.startPos.x;
-        const deltaY = e.clientY - currentDrag.startPos.y;
-        const newX = currentDrag.startPanelPos.x + deltaX;
-        const newY = currentDrag.startPanelPos.y + deltaY;
-        // Actualiza la posición en la configuración. El DOM reaccionará a esto.
-        setPanelConfigs(configs => configs.map(p => {
-            if (p.id === currentDrag.activePanel) {
-                const maxX = window.innerWidth - p.size.width;
-                const maxY = window.innerHeight - p.size.height;
-                return { ...p, position: {
-                        x: Math.max(0, Math.min(newX, maxX)),
-                        y: Math.max(0, Math.min(newY, maxY))
-                    } };
-            }
-            return p;
-        }));
-    }
-    else if (currentResize.isResizing && currentResize.activePanel) {
-        const deltaX = e.clientX - currentResize.startPos.x;
-        const deltaY = e.clientY - currentResize.startPos.y;
-        // Actualiza tamaño y posición en la configuración. El DOM reaccionará.
-        setPanelConfigs(configs => configs.map(p => {
-            if (p.id === currentResize.activePanel) {
-                let newWidth = currentResize.startSize.width;
-                let newHeight = currentResize.startSize.height;
-                let newLeft = currentResize.startPanelPos.x;
-                let newTop = currentResize.startPanelPos.y;
-                const handle = currentResize.handle;
-                if (handle?.includes('e'))
-                    newWidth += deltaX;
-                if (handle?.includes('w')) {
-                    newWidth -= deltaX;
-                    newLeft += deltaX;
-                }
-                if (handle?.includes('s'))
-                    newHeight += deltaY;
-                if (handle?.includes('n')) {
-                    newHeight -= deltaY;
-                    newTop += deltaY;
-                }
-                newWidth = Math.max(300, newWidth);
-                newHeight = Math.max(200, newHeight);
-                return { ...p, size: { width: newWidth, height: newHeight }, position: { x: newLeft, y: newTop } };
-            }
-            return p;
-        }));
-    }
-}
-function handleMouseUp() {
-    // Simplemente resetea los estados de las operaciones.
-    if (dragState().isDragging) {
-        setDragState({ isDragging: false, activePanel: undefined, startPos: { x: 0, y: 0 }, startPanelPos: { x: 0, y: 0 } });
-    }
-    if (resizeState().isResizing) {
-        setResizeState({ isResizing: false, activePanel: undefined, handle: undefined, startPos: { x: 0, y: 0 }, startSize: { width: 0, height: 0 }, startPanelPos: { x: 0, y: 0 } });
-    }
-}
-function getCursorForDirection(direction) {
-    if (!direction)
-        return '';
-    const cursors = {
-        n: 'ns-resize', s: 'ns-resize', e: 'ew-resize', w: 'ew-resize',
-        ne: 'nesw-resize', sw: 'nesw-resize', nw: 'nwse-resize', se: 'nwse-resize'
-    };
-    return cursors[direction] || 'default';
-}

package/dist/ui/debug-panel/eventBinder.d.ts

@@ -1,5 +0,0 @@
-import { DebugSettings } from './types.js';
-import { Signal } from '../../core/signals.js';
-export declare function bindGlobalEvents(): void;
-export declare function bindPanelEvents(panelId: string, settingsSignal: Signal<DebugSettings>): void;
-//# sourceMappingURL=eventBinder.d.ts.map

package/dist/ui/debug-panel/eventBinder.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"eventBinder.d.ts","sourceRoot":"","sources":["../../../src/ui/debug-panel/eventBinder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,aAAa,EAAS,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAgB/C,wBAAgB,gBAAgB,SAS/B;AAMD,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,CAAC,aAAa,CAAC,QAwFrF"}

package/dist/ui/debug-panel/eventBinder.js

@@ -1,120 +0,0 @@
-import { dragState, resizeState, stateEditContext, setConsoleFilter, setNetworkFilter, setEventLogs } from './state.js';
-import { clonePanel, closePanel, toggleMinimized, createNewPanel } from './panelManager.js';
-import { cancelEditing } from './stateEditor.js';
-import { setPanelConfigs } from './panelManager.js';
-import { getApi } from './main.js';
-// ===================================================================
-// Bindeo de Eventos Globales
-// ===================================================================
-export function bindGlobalEvents() {
-    document.addEventListener('keydown', handleGlobalKeydown);
-    // Previene la selección de texto mientras se arrastra o redimensiona un panel
-    document.addEventListener('selectstart', (e) => {
-        if (dragState().isDragging || resizeState().isResizing) {
-            e.preventDefault();
-        }
-    });
-}
-// ===================================================================
-// Bindeo de Eventos por Panel (Usa Delegación de Eventos)
-// ===================================================================
-export function bindPanelEvents(panelId, settingsSignal) {
-    const panelEl = document.getElementById(`debug-panel-${panelId}`);
-    if (!panelEl)
-        return;
-    const [settings, setSettings] = settingsSignal;
-    // --- Listener principal para Clics (Delegación) ---
-    panelEl.addEventListener('click', (e) => {
-        const target = e.target;
-        const actionButton = target.closest('[data-action]');
-        if (actionButton) {
-            const action = actionButton.dataset.action;
-            switch (action) {
-                case 'clone-panel':
-                    clonePanel(panelId);
-                    break;
-                case 'close-panel':
-                    closePanel(panelId);
-                    break;
-                case 'toggle-minimized':
-                    toggleMinimized(panelId);
-                    break;
-                case 'toggle-settings':
-                    panelEl.querySelector('.settings-panel')?.classList.toggle('hidden');
-                    break;
-                case 'toggle-layout':
-                    panelEl.querySelector('.layout-panel')?.classList.toggle('hidden');
-                    break;
-                case 'activate-tab':
-                    const tabId = actionButton.dataset.tab;
-                    setPanelConfigs(configs => configs.map(p => p.id === panelId ? { ...p, activeTab: tabId } : p));
-                    break;
-            }
-        }
-    });
-    // --- Listener para Cambios (checkboxes, selects) ---
-    panelEl.addEventListener('change', (e) => {
-        const target = e.target;
-        // Filtros de consola
-        if (target.matches('[data-level]')) {
-            const level = target.dataset.level;
-            setConsoleFilter(prev => {
-                const newFilter = new Set(prev);
-                target.checked ? newFilter.add(level) : newFilter.delete(level);
-                return newFilter;
-            });
-        }
-        // Opciones de configuración
-        if (target.matches('[data-setting]')) {
-            const key = target.dataset.setting;
-            const value = target.type === 'checkbox' ? target.checked : target.value;
-            setSettings(prev => ({ ...prev, [key]: value }));
-        }
-    });
-    // --- Listener para Inputs de texto ---
-    panelEl.addEventListener('input', (e) => {
-        const target = e.target;
-        if (target.matches('.network-filter-input')) {
-            setNetworkFilter(target.value);
-        }
-    });
-    // --- Listener para el formulario de Eventos ---
-    panelEl.querySelector(`#debug-event-form-${panelId}`)?.addEventListener('submit', (e) => {
-        e.preventDefault();
-        const formData = new FormData(e.target);
-        const eventName = formData.get('eventName');
-        const eventDataStr = formData.get('eventData');
-        if (eventName) {
-            try {
-                const eventData = eventDataStr ? JSON.parse(eventDataStr) : undefined;
-                // Aquí deberías tener una forma de acceder a tu API, quizás a través de un objeto global
-                getApi().events.emit(eventName, eventData);
-                setEventLogs(prev => [...prev, {
-                        id: `log_${Date.now()}`,
-                        name: eventName,
-                        data: eventData,
-                        timestamp: new Date(),
-                        direction: 'emitted'
-                    }]);
-            }
-            catch (error) {
-                console.error('Invalid JSON in event data:', error);
-            }
-        }
-    });
-}
-// ===================================================================
-// Manejadores de Teclas Globales
-// ===================================================================
-function handleGlobalKeydown(e) {
-    // Atajo para crear un nuevo panel
-    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.code === 'KeyN') {
-        e.preventDefault();
-        createNewPanel();
-    }
-    // Atajo para salir de la edición de estado
-    if (e.key === 'Escape' && stateEditContext()?.isEditing) {
-        e.preventDefault();
-        cancelEditing(); // Esta función de stateEditor también deberá usar señales
-    }
-}

package/dist/ui/debug-panel/layoutManager.d.ts

@@ -1,16 +0,0 @@
-import { PanelLayout } from './types.js';
-/**
- * Calcula y aplica un nuevo layout a los paneles existentes.
- * Lee el estado actual de las señales y actualiza las señales con la nueva configuración.
- * @param layout El nuevo layout a aplicar.
- */
-export declare function applyLayout(layout: PanelLayout): void;
-/**
- * Un atajo para aplicar el layout de 'grid'.
- */
-export declare function arrangeAutomatically(): void;
-/**
- * Resetea los paneles a un único panel en la posición y tamaño por defecto.
- */
-export declare function resetLayout(): void;
-//# sourceMappingURL=layoutManager.d.ts.map

package/dist/ui/debug-panel/layoutManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"layoutManager.d.ts","sourceRoot":"","sources":["../../../src/ui/debug-panel/layoutManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,YAAY,CAAC;AAIxD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAiDrD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,IAAI,CAclC"}

package/dist/ui/debug-panel/layoutManager.js

@@ -1,73 +0,0 @@
-import { panelConfigs, setPanelConfigs } from './panelManager.js';
-import { setSettings } from './main.js';
-/**
- * Calcula y aplica un nuevo layout a los paneles existentes.
- * Lee el estado actual de las señales y actualiza las señales con la nueva configuración.
- * @param layout El nuevo layout a aplicar.
- */
-export function applyLayout(layout) {
-    const currentConfigs = panelConfigs();
-    const panelCount = currentConfigs.length;
-    if (panelCount === 0)
-        return;
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    // 1. Calcula el nuevo array de configuraciones sin mutar el original.
-    const newConfigs = currentConfigs.map((config, index) => {
-        let newPosition = { ...config.position };
-        let newSize = { ...config.size };
-        switch (layout) {
-            case 'single':
-                newPosition = { x: 50, y: 50 };
-                newSize = { width: Math.min(800, viewportWidth - 100), height: Math.min(600, viewportHeight - 100) };
-                break;
-            case 'split-horizontal':
-                const hWidth = Math.floor((viewportWidth - 60) / panelCount);
-                newPosition = { x: 20 + (index * hWidth), y: 50 };
-                newSize = { width: hWidth - 10, height: viewportHeight - 120 };
-                break;
-            case 'split-vertical':
-                const vHeight = Math.floor((viewportHeight - 120) / panelCount);
-                newPosition = { x: 50, y: 20 + (index * vHeight) };
-                newSize = { width: viewportWidth - 120, height: vHeight - 10 };
-                break;
-            case 'grid':
-                const cols = Math.ceil(Math.sqrt(panelCount));
-                const rows = Math.ceil(panelCount / cols);
-                const gWidth = Math.floor((viewportWidth - 60) / cols);
-                const gHeight = Math.floor((viewportHeight - 120) / rows);
-                const col = index % cols;
-                const row = Math.floor(index / cols);
-                newPosition = { x: 20 + (col * gWidth), y: 20 + (row * gHeight) };
-                newSize = { width: gWidth - 10, height: gHeight - 10 };
-                break;
-        }
-        return { ...config, position: newPosition, size: newSize };
-    });
-    // 2. Actualiza las señales. Los efectos se encargarán del resto.
-    setPanelConfigs(newConfigs);
-    setSettings((prev) => ({ ...prev, layout: layout }));
-}
-/**
- * Un atajo para aplicar el layout de 'grid'.
- */
-export function arrangeAutomatically() {
-    applyLayout('grid');
-}
-/**
- * Resetea los paneles a un único panel en la posición y tamaño por defecto.
- */
-export function resetLayout() {
-    // 1. Define la configuración del panel por defecto.
-    const defaultConfig = [{
-            id: 'main',
-            activeTab: 'state',
-            position: { x: 50, y: 50 },
-            size: { width: 800, height: 600 },
-            isMinimized: false,
-            zIndex: 1000
-        }];
-    // 2. Actualiza las señales.
-    setPanelConfigs(defaultConfig);
-    setSettings((prev) => ({ ...prev, layout: 'single', panels: defaultConfig }));
-}

package/dist/ui/debug-panel/main.d.ts

@@ -1,12 +0,0 @@
-import { Signal } from '../../core/signals.js';
-import { IPlatformAPI } from '../../core/api.js';
-import { DebugSettings } from './types.js';
-export declare const settingsSignal: Signal<DebugSettings>;
-export declare const settings: () => DebugSettings, setSettings: import("../../core/signals.js").Setter<DebugSettings>;
-export declare function getApi(): IPlatformAPI;
-/**
- * Función principal que inicializa todo el panel de depuración.
- * Ya no hay una clase, solo un punto de entrada.
- */
-export declare function initDebugPanel(platformApi: IPlatformAPI): void;
-//# sourceMappingURL=main.d.ts.map

package/dist/ui/debug-panel/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/ui/debug-panel/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAa3C,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,aAAa,CAA+C,CAAC;AACjG,eAAO,MAAO,QAAQ,uBAAE,WAAW,uDAAkB,CAAC;AAGtD,wBAAgB,MAAM,iBAAkB;AAExC;;;GAGG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,YAAY,QA8BvD"}

package/dist/ui/debug-panel/main.js

@@ -1,42 +0,0 @@
-import { createEffect, createSignal } from '../../core/signals.js';
-import { loadSettings, saveSettings } from './settings.js';
-import { setupInterceptors, startPerformanceMonitoring, startFPSCounter } from './services.js';
-import { createContainer, setupPanelManager, setPanelConfigs // Importamos el setter de las configuraciones de los paneles
- } from './panelManager.js';
-import { bindGlobalEvents } from './eventBinder.js';
-import { bindGlobalDragAndResizeEvents } from './dragAndResize.js';
-// Creamos una señal para la configuración general.
-export const settingsSignal = createSignal(loadSettings());
-export const [settings, setSettings] = settingsSignal;
-let api;
-export function getApi() { return api; }
-/**
- * Función principal que inicializa todo el panel de depuración.
- * Ya no hay una clase, solo un punto de entrada.
- */
-export function initDebugPanel(platformApi) {
-    api = platformApi;
-    // 1. Crear el contenedor principal del DOM
-    const containerEl = createContainer(settings().theme);
-    // 2. Establecer el estado inicial de los paneles.
-    // Esto disparará el createEffect dentro de setupPanelManager para que cree los paneles iniciales.
-    setPanelConfigs(settings().panels);
-    // 3. Iniciar los "motores" reactivos y los servicios.
-    // setupPanelManager se encargará de crear, actualizar y eliminar los paneles del DOM.
-    setupPanelManager(containerEl, settingsSignal);
-    // Servicios que escuchan eventos del navegador y actualizan las señales de estado.
-    setupInterceptors();
-    startPerformanceMonitoring();
-    startFPSCounter();
-    // Eventos globales (teclado, etc.) que actualizan las señales de estado.
-    bindGlobalEvents();
-    bindGlobalDragAndResizeEvents();
-    // 4. Efecto para persistir los cambios en la configuración.
-    // Cada vez que la señal `settings` cambie, se guardará en localStorage.
-    createEffect(() => {
-        saveSettings(settings());
-        // También actualiza el tema del contenedor si cambia
-        containerEl.className = `debug-panel-container theme-${settings().theme}`;
-    });
-    console.info('🐞 Advanced Debug Panel initialized');
-}

package/dist/ui/debug-panel/panelManager.d.ts

@@ -1,17 +0,0 @@
-import { Signal } from '../../core/signals.js';
-import { PanelInstance, DebugSettings } from './types.js';
-export declare const panelConfigs: () => PanelInstance[], setPanelConfigs: import("../../core/signals.js").Setter<PanelInstance[]>;
-export declare function createNewPanel(): void;
-export declare function closePanel(panelId: string): void;
-export declare function clonePanel(sourcePanelId: string): void;
-export declare function toggleMinimized(panelId: string): void;
-/**
- * Esta es la función principal que crea y gestiona el DOM de los paneles de forma reactiva.
- * Se llama una sola vez al iniciar la aplicación.
- */
-export declare function setupPanelManager(containerEl: HTMLElement, settingsSignal: Signal<DebugSettings>): void;
-/**
- * Crea el contenedor principal para todos los paneles.
- */
-export declare function createContainer(theme: 'dark' | 'light'): HTMLElement;
-//# sourceMappingURL=panelManager.d.ts.map

package/dist/ui/debug-panel/panelManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"panelManager.d.ts","sourceRoot":"","sources":["../../../src/ui/debug-panel/panelManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAY1D,eAAO,MAAO,YAAY,yBAAE,eAAe,yDAAqC,CAAC;AAQjF,wBAAgB,cAAc,IAAI,IAAI,CAcrC;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAIhD;AAED,wBAAgB,UAAU,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAetD;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAMrD;AAMD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,CAAC,aAAa,CAAC,QA+DhG;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAMpE"}

package/dist/ui/debug-panel/panelManager.js

@@ -1,123 +0,0 @@
-import { createEffect, createSignal } from '../../core/signals.js';
-import { generatePanelHTML } from './ui.js';
-import { bindPanelEvents } from './eventBinder.js';
-import { setupPanelRenderEffects } from './renderer.js';
-import { highestZIndex, setHighestZIndex, dragState, resizeState } from './state.js';
-// ===================================================================
-// La Única Fuente de Verdad para los Paneles
-// ===================================================================
-// Esta señal contiene el array con la configuración de todos los paneles.
-// El DOM reaccionará a cualquier cambio en este array.
-// Esta señal se inicializa con la configuración cargada desde settings.
-export const [panelConfigs, setPanelConfigs] = createSignal([]);
-// ===================================================================
-// Funciones de Acción (Modifican el estado, no el DOM)
-// ===================================================================
-// Estas funciones ahora son simples y predecibles. Su única tarea
-// es actualizar la señal `panelConfigs`.
-export function createNewPanel() {
-    const newId = `panel-${Date.now()}`;
-    setHighestZIndex(prev => prev + 1);
-    const newConfig = {
-        id: newId,
-        activeTab: 'state',
-        position: { x: 100 + panelConfigs().length * 30, y: 100 + panelConfigs().length * 30 },
-        size: { width: 800, height: 600 },
-        isMinimized: false,
-        zIndex: highestZIndex()
-    };
-    setPanelConfigs(prev => [...prev, newConfig]);
-}
-export function closePanel(panelId) {
-    // Simplemente eliminamos la configuración del panel del array.
-    // El efecto se encargará de remover el elemento del DOM.
-    setPanelConfigs(prev => prev.filter(p => p.id !== panelId));
-}
-export function clonePanel(sourcePanelId) {
-    const sourceConfig = panelConfigs().find(p => p.id === sourcePanelId);
-    if (!sourceConfig)
-        return;
-    const newId = `panel-${Date.now()}`;
-    setHighestZIndex(prev => prev + 1);
-    const newConfig = {
-        ...sourceConfig,
-        id: newId,
-        position: { x: sourceConfig.position.x + 30, y: sourceConfig.position.y + 30 },
-        zIndex: highestZIndex()
-    };
-    setPanelConfigs(prev => [...prev, newConfig]);
-}
-export function toggleMinimized(panelId) {
-    setPanelConfigs(prev => prev.map(p => p.id === panelId ? { ...p, isMinimized: !p.isMinimized } : p));
-}
-// ===================================================================
-// Sincronizador de Estado a DOM
-// ===================================================================
-/**
- * Esta es la función principal que crea y gestiona el DOM de los paneles de forma reactiva.
- * Se llama una sola vez al iniciar la aplicación.
- */
-export function setupPanelManager(containerEl, settingsSignal) {
-    // Este efecto se ejecuta cada vez que la señal `panelConfigs` cambia.
-    createEffect(() => {
-        // Leemos todas las señales que afectan la apariencia de los paneles
-        const configs = panelConfigs();
-        const currentDragState = dragState();
-        const currentResizeState = resizeState();
-        const existingPanelNodes = new Map();
-        containerEl.querySelectorAll('.debug-panel').forEach(node => {
-            existingPanelNodes.set(node.id.replace('debug-panel-', ''), node);
-        });
-        // 1. Añadir/Actualizar paneles
-        for (const config of configs) {
-            let panelEl = existingPanelNodes.get(config.id);
-            if (!panelEl) {
-                // El panel es NUEVO: crearlo y configurarlo por primera vez.
-                panelEl = document.createElement('div');
-                panelEl.id = `debug-panel-${config.id}`;
-                panelEl.className = 'debug-panel';
-                panelEl.innerHTML = generatePanelHTML(config, settingsSignal[0]());
-                containerEl.appendChild(panelEl);
-                // Se configuran los listeners y los efectos reactivos una sola vez
-                bindPanelEvents(config.id, settingsSignal);
-                setupPanelRenderEffects(config.id, settingsSignal);
-            }
-            // --- Aplicar actualizaciones reactivas ---
-            // A. Posición, tamaño y z-index
-            panelEl.style.left = `${config.position.x}px`;
-            panelEl.style.top = `${config.position.y}px`;
-            panelEl.style.width = `${config.size.width}px`;
-            panelEl.style.height = `${config.size.height}px`;
-            panelEl.style.zIndex = config.zIndex.toString();
-            // B. Clases de estado (minimized, dragging, resizing)
-            panelEl.classList.toggle('minimized', config.isMinimized);
-            panelEl.classList.toggle('dragging', currentDragState.isDragging && currentDragState.activePanel === config.id);
-            panelEl.classList.toggle('resizing', currentResizeState.isResizing && currentResizeState.activePanel === config.id);
-            // C. Clases de pestañas y contenido activo
-            panelEl.querySelectorAll('.debug-tab').forEach(tab => {
-                tab.classList.toggle('active', tab.dataset.tab === config.activeTab);
-            });
-            panelEl.querySelectorAll('.debug-panel-content').forEach(content => {
-                const contentTabId = content.id.split('-').pop();
-                content.classList.toggle('active', contentTabId === config.activeTab);
-            });
-            // Marcar el nodo como procesado
-            existingPanelNodes.delete(config.id);
-        }
-        // 2. Eliminar paneles que ya no están en la configuración
-        // Lo que quede en `existingPanelNodes` son los paneles que fueron eliminados de la señal.
-        for (const panelToRemove of existingPanelNodes.values()) {
-            panelToRemove.remove();
-        }
-    });
-}
-/**
- * Crea el contenedor principal para todos los paneles.
- */
-export function createContainer(theme) {
-    const containerEl = document.createElement('div');
-    containerEl.id = 'debug-panel-container';
-    containerEl.className = `debug-panel-container theme-${theme}`;
-    document.body.appendChild(containerEl);
-    return containerEl;
-}

package/dist/ui/debug-panel/renderer.d.ts

@@ -1,4 +0,0 @@
-import { Signal } from '../../core/signals.js';
-import { DebugSettings } from './types.js';
-export declare function setupPanelRenderEffects(panelId: string, settingsSignal: Signal<DebugSettings>): void;
-//# sourceMappingURL=renderer.d.ts.map

package/dist/ui/debug-panel/renderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../src/ui/debug-panel/renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAoD,MAAM,YAAY,CAAC;AA0E7F,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,CAAC,aAAa,CAAC,QA6I7F"}