slicejs-web-framework 3.1.2 → 3.1.4

package/.worktrees/public-env-browser-exposure/Slice/Components/Structural/Debugger/Debugger.js

@@ -1,1548 +0,0 @@
-// ✅ VERSIÓN ANTI-INTERFERENCIA - Aislada del Router y con debugging
-
-/**
- * Runtime UI debugger for Slice components.
- */
-export default class Debugger extends HTMLElement {
-   constructor() {
-      super();
-      this.toggleClick = slice.debuggerConfig.click;
-      this.toggle = 'click';
-      this.selectedComponentSliceId = null;
-      this.isActive = false;
-      this.activeTab = 'props';
-      this.currentComponent = null;
-      this.componentProps = {};
-      this.currentEditingProp = null;
-      this.currentEditingType = null;
-      
-      // ✅ Flag para prevenir interferencias externas
-      this.isDebuggerInput = false;
-   }
-
-   /**
-    * Load debugger UI and enable interactions.
-    * @returns {Promise<boolean>}
-    */
-   async enableDebugMode() {
-      //const html = await slice.controller.fetchText('Debugger', 'html', 'Structural');
-      //const css = await slice.controller.fetchText('Debugger', 'css', 'Structural');
-
-      const html = productionOnlyHtml();
-      const css = productionOnlyCSS();
-
-      this.innerHTML = html;
-      slice.stylesManager.registerComponentStyles('Debugger', css);
-
-      this.setupElements();
-      this.setupEventListeners();
-      this.makeDraggable();
-
-      slice.logger.logInfo('Debugger', 'Advanced Debug mode enabled');
-      return true;
-   }
-
-   /**
-    * Cache UI elements.
-    * @returns {void}
-    */
-   setupElements() {
-      this.debuggerContainer = this.querySelector('#debugger-container');
-      this.closeDebugger = this.querySelector('#close-debugger');
-      this.propsContainer = this.querySelector('.props-container');
-      this.infoContainer = this.querySelector('.info-list');
-      this.editorModal = this.querySelector('#editor-modal');
-      this.propertyEditor = this.querySelector('#property-editor');
-      this.modalTitle = this.querySelector('#modal-title');
-      this.validationMessage = this.querySelector('.validation-message');
-      
-      // Header elements
-      this.componentName = this.querySelector('.component-name');
-      this.componentId = this.querySelector('.component-id');
-   }
-
-   /**
-    * Bind UI event listeners.
-    * @returns {void}
-    */
-   setupEventListeners() {
-      // Tab navigation
-      this.querySelectorAll('.tab-btn').forEach(btn => {
-         btn.addEventListener('click', (e) => {
-            this.switchTab(e.target.dataset.tab);
-         });
-      });
-
-      // Close and minimize
-      this.closeDebugger.addEventListener('click', () => {
-         this.hide();
-         this.isActive = false;
-      });
-
-      // Modal events
-      this.querySelector('#modal-close').addEventListener('click', () => {
-         this.closeModal();
-      });
-
-      this.querySelector('#modal-cancel').addEventListener('click', () => {
-         this.closeModal();
-      });
-
-      this.querySelector('#modal-save').addEventListener('click', () => {
-         this.savePropertyValue();
-      });
-
-      // Editor type selector
-      this.querySelectorAll('.type-btn').forEach(btn => {
-         btn.addEventListener('click', (e) => {
-            this.switchEditorType(e.target.dataset.type);
-         });
-      });
-
-      // Action buttons
-      this.querySelector('#apply-changes')?.addEventListener('click', (e) => {
-         e.stopPropagation();
-         this.applyAllChanges();
-      });
-
-      this.querySelector('#reset-values')?.addEventListener('click', (e) => {
-         e.stopPropagation();
-         this.resetValues();
-      });
-
-      // Property editor validation
-      this.propertyEditor.addEventListener('input', () => {
-         this.validateEditor();
-      });
-
-      // Modal backdrop click
-      this.editorModal.addEventListener('click', (e) => {
-         if (e.target === this.editorModal) {
-            this.closeModal();
-         }
-      });
-
-      // ✅ EVENTOS PRINCIPALES - Con protección anti-interferencia
-      this.addEventListener('mousedown', (event) => {
-         if (event.target.classList.contains('prop-control')) {
-            this.isDebuggerInput = true;
-            // Prevenir interferencias del Router u otros sistemas
-            event.stopPropagation();
-         }
-      });
-
-      this.addEventListener('focus', (event) => {
-         if (event.target.classList.contains('prop-control')) {
-            this.isDebuggerInput = true;
-            event.stopPropagation();
-         }
-      }, true);
-
-      this.addEventListener('blur', (event) => {
-         if (event.target.classList.contains('prop-control')) {
-            this.isDebuggerInput = false;
-         }
-      }, true);
-
-      this.addEventListener('keypress', (event) => {
-         if (event.key === 'Enter' && event.target.classList.contains('prop-control')) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.applyPropertyChange(event.target);
-         }
-      });
-
-      this.addEventListener('change', (event) => {
-         if (event.target.type === 'checkbox' && event.target.classList.contains('prop-control')) {
-            event.stopPropagation();
-            this.applyPropertyChange(event.target);
-         }
-      });
-
-      // ✅ PROTECCIÓN GLOBAL: Prevenir que eventos externos interfieran
-      this.addEventListener('click', (event) => {
-         if (this.contains(event.target)) {
-            event.stopPropagation();
-         }
-      });
-
-      // ✅ Los eventos DOMNodeInserted/Removed están deprecated, 
-      // pero la protección con stopPropagation() ya es suficiente
-   }
-
-   /**
-    * Switch active tab.
-    * @param {string} tabName
-    * @returns {void}
-    */
-   switchTab(tabName) {
-      this.activeTab = tabName;
-      
-      this.querySelectorAll('.tab-btn').forEach(btn => {
-         btn.classList.toggle('active', btn.dataset.tab === tabName);
-      });
-
-      this.querySelectorAll('.tab-pane').forEach(pane => {
-         pane.classList.toggle('active', pane.id === `${tabName}-tab`);
-      });
-   }
-
-   /**
-    * Switch editor type (json | function).
-    * @param {string} type
-    * @returns {void}
-    */
-   switchEditorType(type) {
-      const normalized = this.normalizeEditorType(type);
-      if (!normalized) {
-         return;
-      }
-      this.querySelectorAll('.type-btn').forEach(btn => {
-         btn.classList.toggle('active', btn.dataset.type === normalized);
-      });
-      this.currentEditingType = normalized;
-   }
-
-   /**
-    * Normalize editor type to supported values.
-    * @param {string} type
-    * @returns {string|null}
-    */
-   normalizeEditorType(type) {
-      if (type === 'json' || type === 'function') {
-         return type;
-      }
-      return null;
-   }
-
-   /**
-    * Attach debugger toggle handler to a component.
-    * @param {HTMLElement} component
-    * @returns {void}
-    */
-   attachDebugMode(component) {
-      if (this.toggleClick === 'right') {
-         this.toggle = 'contextmenu';
-      } else {
-         this.toggle = 'click';
-      }
-      component.addEventListener(this.toggle, (event) => this.handleDebugClick(event, component));
-   }
-
-   /**
-    * Enable drag interaction for the debugger panel.
-    * @returns {void}
-    */
-   makeDraggable() {
-      let offset = { x: 0, y: 0 };
-      let isDragging = false;
-
-      const header = this.querySelector('.debugger-header');
-
-      header.addEventListener('mousedown', (event) => {
-         isDragging = true;
-         offset.x = event.clientX - this.debuggerContainer.getBoundingClientRect().left;
-         offset.y = event.clientY - this.debuggerContainer.getBoundingClientRect().top;
-         header.style.cursor = 'grabbing';
-      });
-
-      document.addEventListener('mousemove', (event) => {
-         if (isDragging) {
-            const x = event.clientX - offset.x;
-            const y = event.clientY - offset.y;
-            this.debuggerContainer.style.left = `${x}px`;
-            this.debuggerContainer.style.top = `${y}px`;
-            this.debuggerContainer.style.right = 'auto';
-         }
-      });
-
-      document.addEventListener('mouseup', () => {
-         if (isDragging) {
-            isDragging = false;
-            header.style.cursor = 'grab';
-         }
-      });
-   }
-
-   /**
-    * Handle toggle click and load component info.
-    * @param {Event} event
-    * @param {HTMLElement} component
-    * @returns {void}
-    */
-   handleDebugClick(event, component) {
-      event.preventDefault();
-      event.stopPropagation();
-
-      this.selectedComponentSliceId = component.sliceId;
-      this.currentComponent = component;
-      this.isActive = true;
-
-      // Update header info
-      this.componentName.textContent = component.constructor.name;
-      this.componentId.textContent = `ID: ${component.sliceId}`;
-
-      // Gather component data
-      const realComponentProps = this.getComponentPropsForDebugger(component);
-      this.componentProps = {};
-
-      realComponentProps.forEach((attr) => {
-         if (component[attr] === undefined) {
-            this.componentProps[attr] = component[`_${attr}`];
-         } else {
-            this.componentProps[attr] = component[attr];
-         }
-      });
-
-      // ✅ Crear UI sin interferencias
-      this.updateDebuggerContent();
-      this.debuggerContainer.classList.add('active');
-   }
-
-   updateDebuggerContent() {
-      this.updatePropsTab();
-      this.updateInfoTab();
-   }
-
-   /**
-    * Render props tab content.
-    * @returns {void}
-    */
-   updatePropsTab() {
-      const propsContainer = this.querySelector('.props-container');
-      if (!propsContainer) {
-         return;
-      }
-      
-      propsContainer.innerHTML = '';
-
-      const realComponentProps = this.getComponentPropsForDebugger(this.currentComponent);
-      const ComponentClass = this.currentComponent.constructor;
-      const configuredProps = ComponentClass.props || {};
-
-      realComponentProps.forEach(prop => {
-         const propElement = this.createPropElement(prop, configuredProps[prop]);
-         propsContainer.appendChild(propElement);
-      });
-   }
-
-   /**
-    * Build a prop row element.
-    * @param {string} prop
-    * @param {Object} [config]
-    * @returns {HTMLElement}
-    */
-   createPropElement(prop, config = {}) {
-      const propWrapper = document.createElement('div');
-      propWrapper.className = 'prop-item';
-      propWrapper.dataset.prop = prop;
-
-      const currentValue = this.currentComponent[prop];
-      const valueType = this.getValueType(currentValue);
-
-      // Status based on usage
-      let status, statusClass;
-      if (currentValue !== undefined && currentValue !== null) {
-         status = 'Used';
-         statusClass = 'status-used';
-      } else if (config.required) {
-         status = 'Missing';
-         statusClass = 'status-missing';
-      } else {
-         status = 'Optional';
-         statusClass = 'status-optional';
-      }
-
-      propWrapper.innerHTML = `
-         <div class="prop-header">
-            <div class="prop-title">
-               <strong>${prop}</strong>
-               <span class="prop-type">${valueType}</span>
-            </div>
-            <div class="prop-status ${statusClass}">${status}</div>
-         </div>
-         <div class="prop-input">
-            ${this.createInputForType(prop, currentValue, valueType, config)}
-         </div>
-         ${config.default !== undefined ? `<div class="default-value">Default: ${JSON.stringify(config.default)}</div>` : ''}
-      `;
-
-      return propWrapper;
-   }
-
-   /**
-    * Build input HTML for a prop type.
-    * @param {string} prop
-    * @param {any} value
-    * @param {string} type
-    * @param {Object} [config]
-    * @returns {string}
-    */
-   createInputForType(prop, value, type, config = {}) {
-      const serializedValue = this.serializeValue(value);
-      
-      if (type === 'boolean') {
-         return `
-            <div class="input-group">
-               <input type="checkbox" 
-                      class="prop-control debugger-input" 
-                      data-prop="${prop}" 
-                      ${value ? 'checked' : ''}
-                      data-debugger-input="true">
-               <span class="checkbox-label">${value ? 'true' : 'false'}</span>
-            </div>
-         `;
-      } else if (type === 'number') {
-         return `
-            <div class="input-group">
-               <input type="number" 
-                      class="prop-control debugger-input" 
-                      data-prop="${prop}" 
-                      value="${serializedValue}"
-                      step="any"
-                      placeholder="Enter number..."
-                      data-debugger-input="true">
-            </div>
-         `;
-      } else if (type === 'object' || type === 'array' || type === 'function') {
-         return `
-            <div class="input-group">
-               <input type="text" 
-                      class="prop-control debugger-input" 
-                      data-prop="${prop}" 
-                      value="${serializedValue}"
-                      readonly
-                      title="Click edit button to modify"
-                      data-debugger-input="true">
-               <button class="edit-btn" onclick="slice.debugger.openAdvancedEditor('${prop}', '${type}')">✏️</button>
-            </div>
-         `;
-      } else {
-         return `
-            <div class="input-group">
-               <input type="text" 
-                      class="prop-control debugger-input" 
-                      data-prop="${prop}" 
-                      value="${serializedValue}"
-                      placeholder="Enter value..."
-                      data-debugger-input="true">
-            </div>
-         `;
-      }
-   }
-
-   /**
-    * Apply a single prop change from an input.
-    * @param {HTMLInputElement} inputElement
-    * @returns {void}
-    */
-   applyPropertyChange(inputElement) {
-      const prop = inputElement.dataset.prop;
-      if (!prop) return;
-
-      let newValue;
-      
-      if (inputElement.type === 'checkbox') {
-         newValue = inputElement.checked;
-         const label = inputElement.parentNode.querySelector('.checkbox-label');
-         if (label) {
-            label.textContent = newValue ? 'true' : 'false';
-         }
-      } else if (inputElement.type === 'number') {
-         newValue = Number(inputElement.value);
-      } else {
-         newValue = inputElement.value;
-         
-         // Convert string values
-         if (newValue === 'true') newValue = true;
-         if (newValue === 'false') newValue = false;
-         if (!isNaN(newValue) && newValue !== '' && newValue !== null) newValue = Number(newValue);
-      }
-
-      const oldValue = this.currentComponent[prop];
-      
-      this.currentComponent[prop] = newValue;
-      slice.logger.logInfo('Debugger', `Updated ${prop}: ${oldValue} → ${newValue}`);
-      
-      this.showVisualFeedback(inputElement);
-   }
-
-   /**
-    * Show temporary highlight on updated input.
-    * @param {HTMLElement} inputElement
-    * @returns {void}
-    */
-   showVisualFeedback(inputElement) {
-      const originalBorder = inputElement.style.borderColor;
-      const originalBoxShadow = inputElement.style.boxShadow;
-      
-      inputElement.style.borderColor = '#4CAF50';
-      inputElement.style.boxShadow = '0 0 0 2px rgba(76, 175, 80, 0.3)';
-      
-      setTimeout(() => {
-         inputElement.style.borderColor = originalBorder;
-         inputElement.style.boxShadow = originalBoxShadow;
-      }, 1500);
-   }
-
-   /**
-    * Apply all editable prop changes in the panel.
-    * @returns {void}
-    */
-   applyAllChanges() {
-      const inputs = this.querySelectorAll('.prop-control:not([readonly])');
-      let changeCount = 0;
-      
-      inputs.forEach(input => {
-         if (!input.readOnly) {
-            this.applyPropertyChange(input);
-            changeCount++;
-         }
-      });
-
-      slice.logger.logInfo('Debugger', `Applied ${changeCount} property changes`);
-      this.showApplyFeedback(changeCount);
-   }
-
-   /**
-    * Show apply feedback in button.
-    * @param {number} changeCount
-    * @returns {void}
-    */
-   showApplyFeedback(changeCount) {
-      const applyBtn = this.querySelector('#apply-changes');
-      if (!applyBtn) return;
-      
-      const originalText = applyBtn.textContent;
-      
-      if (changeCount > 0) {
-         applyBtn.textContent = `✅ Applied ${changeCount} changes!`;
-         applyBtn.style.background = '#4CAF50';
-      } else {
-         applyBtn.textContent = '✅ No changes to apply';
-         applyBtn.style.background = '#9E9E9E';
-      }
-      
-      setTimeout(() => {
-         applyBtn.textContent = originalText;
-         applyBtn.style.background = '';
-      }, 2000);
-   }
-
-   /**
-    * Open advanced editor for objects/functions.
-    * @param {string} prop
-    * @param {string} type
-    * @returns {void}
-    */
-   openAdvancedEditor(prop, type) {
-      this.currentEditingProp = prop;
-      this.currentEditingType = this.normalizeEditorType(type) || 'json';
-      
-      const value = this.currentComponent[prop];
-      
-      this.modalTitle.textContent = `Edit ${prop} (${this.currentEditingType})`;
-      
-      this.querySelectorAll('.type-btn').forEach(btn => {
-         btn.classList.toggle('active', btn.dataset.type === this.currentEditingType);
-      });
-      
-      if (this.currentEditingType === 'function') {
-         if (typeof value === 'function') {
-            this.propertyEditor.value = value.toString();
-         } else {
-            this.propertyEditor.value = 'function() {\n   // Your code here\n}';
-         }
-      } else {
-         try {
-            this.propertyEditor.value = JSON.stringify(value, null, 2);
-         } catch (error) {
-            this.propertyEditor.value = 'null';
-         }
-      }
-      
-      this.editorModal.classList.add('active');
-      this.propertyEditor.focus();
-   }
-
-   /**
-    * Validate editor contents for current type.
-    * @returns {void}
-    */
-   validateEditor() {
-      const value = this.propertyEditor.value.trim();
-      const type = this.normalizeEditorType(this.currentEditingType) || 'json';
-      
-      try {
-         if (type === 'function') {
-            new Function('return ' + value)();
-         } else {
-            JSON.parse(value);
-         }
-         
-         this.validationMessage.textContent = '✅ Valid syntax';
-         this.validationMessage.style.color = '#4CAF50';
-         this.querySelector('#modal-save').disabled = false;
-      } catch (error) {
-         this.validationMessage.textContent = `❌ ${error.message}`;
-         this.validationMessage.style.color = '#F44336';
-         this.querySelector('#modal-save').disabled = true;
-      }
-   }
-
-   /**
-    * Save editor value to component.
-    * @returns {void}
-    */
-   savePropertyValue() {
-      const value = this.propertyEditor.value.trim();
-      const type = this.normalizeEditorType(this.currentEditingType) || 'json';
-      
-      try {
-         let newValue;
-         
-         if (type === 'function') {
-            newValue = new Function('return ' + value)();
-         } else {
-            newValue = JSON.parse(value);
-         }
-         
-         this.currentComponent[this.currentEditingProp] = newValue;
-         this.closeModal();
-         
-         slice.logger.logInfo('Debugger', `Updated ${this.currentEditingProp} via advanced editor`);
-         
-         const input = this.querySelector(`[data-prop="${this.currentEditingProp}"]`);
-         if (input) {
-            input.value = this.serializeValue(newValue);
-            this.showVisualFeedback(input);
-         }
-         
-      } catch (error) {
-         this.validationMessage.textContent = `❌ ${error.message}`;
-         this.validationMessage.style.color = '#F44336';
-      }
-   }
-
-   /**
-    * Close the advanced editor modal.
-    * @returns {void}
-    */
-   closeModal() {
-      this.editorModal.classList.remove('active');
-      this.currentEditingProp = null;
-      this.currentEditingType = null;
-      this.validationMessage.textContent = '';
-   }
-
-   /**
-    * Reset props to defaults (if defined in static props).
-    * @returns {void}
-    */
-   resetValues() {
-      const ComponentClass = this.currentComponent.constructor;
-      const configuredProps = ComponentClass.props || {};
-      let resetCount = 0;
-
-      Object.entries(configuredProps).forEach(([prop, config]) => {
-         if (config.default !== undefined) {
-            this.currentComponent[prop] = config.default;
-            
-            const input = this.querySelector(`[data-prop="${prop}"]`);
-            if (input && !input.readOnly) {
-               if (input.type === 'checkbox') {
-                  input.checked = config.default;
-                  const label = input.parentNode.querySelector('.checkbox-label');
-                  if (label) {
-                     label.textContent = config.default ? 'true' : 'false';
-                  }
-               } else {
-                  input.value = this.serializeValue(config.default);
-               }
-               resetCount++;
-            }
-         }
-      });
-
-      slice.logger.logInfo('Debugger', 'Reset values to defaults');
-      this.showResetFeedback(resetCount);
-   }
-
-   /**
-    * Show reset feedback in button.
-    * @param {number} resetCount
-    * @returns {void}
-    */
-   showResetFeedback(resetCount) {
-      const resetBtn = this.querySelector('#reset-values');
-      if (!resetBtn) return;
-      
-      const originalText = resetBtn.textContent;
-      
-      resetBtn.textContent = `🔄 Reset ${resetCount} values!`;
-      resetBtn.style.background = '#FF9800';
-      
-      setTimeout(() => {
-         resetBtn.textContent = originalText;
-         resetBtn.style.background = '';
-      }, 1500);
-   }
-
-   /**
-    * Render info tab content.
-    * @returns {void}
-    */
-   updateInfoTab() {
-      const infoContainer = this.querySelector('.info-list');
-      if (!infoContainer) return;
-      
-      const component = this.currentComponent;
-      
-      const info = [
-         { label: 'Component Type', value: component.constructor.name },
-         { label: 'Slice ID', value: component.sliceId || 'Not assigned' },
-         { label: 'Tag Name', value: component.tagName },
-         { label: 'Connected', value: component.isConnected ? 'Yes' : 'No' },
-         { label: 'Props Count', value: Object.keys(this.componentProps).length },
-         { label: 'Children', value: component.children.length }
-      ];
-      
-      infoContainer.innerHTML = info.map(item => `
-         <div class="info-item">
-            <span class="info-label">${item.label}</span>
-            <span class="info-value">${item.value}</span>
-         </div>
-      `).join('');
-   }
-
-   /**
-    * Get a simple value type label.
-    * @param {any} value
-    * @returns {string}
-    */
-   getValueType(value) {
-      if (value === null) return 'null';
-      if (value === undefined) return 'undefined';
-      if (Array.isArray(value)) return 'array';
-      return typeof value;
-   }
-
-   /**
-    * Serialize a value for input display.
-    * @param {any} value
-    * @returns {string}
-    */
-   serializeValue(value) {
-      if (value === null || value === undefined) {
-         return '';
-      }
-      
-      if (typeof value === 'object' || typeof value === 'function') {
-         try {
-            return JSON.stringify(value);
-         } catch {
-            return String(value);
-         }
-      }
-      
-      return String(value);
-   }
-
-   /**
-    * Resolve which props to show in the debugger.
-    * @param {HTMLElement} component
-    * @returns {string[]}
-    */
-   getComponentPropsForDebugger(component) {
-      const ComponentClass = component.constructor;
-      
-      if (ComponentClass.props) {
-         return Object.keys(ComponentClass.props);
-      }
-      
-      if (component.debuggerProps && Array.isArray(component.debuggerProps)) {
-         return component.debuggerProps;
-      }
-      
-      return this.detectUsedProps(component);
-   }
-
-   /**
-    * Detect props from backing fields on the component.
-    * @param {HTMLElement} component
-    * @returns {string[]}
-    */
-   detectUsedProps(component) {
-      const usedProps = [];
-      
-      Object.getOwnPropertyNames(component).forEach(key => {
-         if (key.startsWith('_') && key !== '_isActive') {
-            const propName = key.substring(1);
-            usedProps.push(propName);
-         }
-      });
-      
-      return usedProps;
-   }
-
-   /**
-    * Hide the debugger UI.
-    * @returns {void}
-    */
-   hide() {
-      this.debuggerContainer.classList.remove('active');
-      this.closeModal();
-   }
-}
-
-customElements.define('slice-debugger', Debugger);
-
-function productionOnlyCSS(){
-return `
-#debugger-container {
-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-display: none;
-position: fixed;
-top: 20px;
-right: 20px;
-width: min(420px, calc(100vw - 40px));
-height: 85vh;
-max-height: 85vh;
-background: var(--primary-background-color);
-border: 1px solid var(--medium-color);
-border-radius: 12px;
-box-shadow: 0 20px 40px rgba(var(--primary-color-rgb), 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
-z-index: 10000;
-overflow: hidden;
-backdrop-filter: blur(10px);
-   box-sizing: border-box;
-}
-
-#debugger-container.active {
-   display: flex;
-   flex-direction: column;
-}
-
-.debugger-header {
-   background: linear-gradient(135deg, var(--primary-color), var(--primary-color-shade));
-   color: var(--primary-color-contrast);
-   padding: 12px 16px;
-   border-radius: 12px 12px 0 0;
-   user-select: none;
-   cursor: grab;
-}
-
-.debugger-header:active {
-   cursor: grabbing;
-}
-
-.header-content {
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
-}
-
-.component-info {
-   display: flex;
-   align-items: center;
-   gap: 10px;
-}
-
-.component-icon {
-   font-size: 20px;
-   opacity: 0.9;
-}
-
-.component-name {
-   font-size: 14px;
-   font-weight: 600;
-   margin-bottom: 2px;
-}
-
-.component-id {
-   font-size: 11px;
-   opacity: 0.8;
-}
-
-.header-actions {
-   display: flex;
-   gap: 8px;
-}
-
-.minimize-btn, #close-debugger {
-   background: rgba(255, 255, 255, 0.2);
-   border: none;
-   color: var(--primary-color-contrast);
-   width: 28px;
-   height: 28px;
-   border-radius: 6px;
-   cursor: pointer;
-   display: flex;
-   align-items: center;
-   justify-content: center;
-   font-size: 16px;
-   font-weight: bold;
-   transition: background 0.2s ease;
-}
-
-.minimize-btn:hover, #close-debugger:hover {
-   background: rgba(255, 255, 255, 0.3);
-}
-
-.debugger-content {
-   flex: 1;
-   display: flex;
-   flex-direction: column;
-   overflow: hidden;
-}
-
-.tabs-container {
-   border-bottom: 1px solid var(--medium-color);
-}
-
-.tab-nav {
-   display: flex;
-   background: var(--tertiary-background-color);
-}
-
-.tab-btn {
-   flex: 1;
-   padding: 10px 14px;
-   border: none;
-   background: transparent;
-   color: var(--font-secondary-color);
-   font-size: 12px;
-   font-weight: 500;
-   cursor: pointer;
-   transition: all 0.2s ease;
-   border-bottom: 2px solid transparent;
-}
-
-.tab-btn:hover {
-   background: var(--secondary-background-color);
-   color: var(--font-primary-color);
-}
-
-.tab-btn.active {
-   background: var(--primary-background-color);
-   color: var(--primary-color);
-   border-bottom-color: var(--primary-color);
-   font-weight: 600;
-}
-
-.tab-content {
-   flex: 1;
-   overflow: hidden;
-   min-height: 0;
-}
-
-.tab-pane {
-   display: none;
-   height: 100%;
-   overflow-y: auto;
-   overflow-x: hidden;
-   padding: 16px;
-   box-sizing: border-box;
-}
-
-.tab-pane.active {
-   display: block;
-}
-
-.tab-pane::-webkit-scrollbar {
-   width: 4px;
-}
-
-.tab-pane::-webkit-scrollbar-track {
-   background: var(--tertiary-background-color);
-   border-radius: 2px;
-}
-
-.tab-pane::-webkit-scrollbar-thumb {
-   background: var(--medium-color);
-   border-radius: 2px;
-}
-
-.tab-pane::-webkit-scrollbar-thumb:hover {
-   background: var(--primary-color);
-}
-
-.props-container {
-   display: flex;
-   flex-direction: column;
-   gap: 12px;
-   margin-bottom: 16px;
-   min-width: 0;
-   overflow-x: hidden;
-}
-
-#debugger-container *,
-#debugger-container *::before,
-#debugger-container *::after {
-   box-sizing: border-box;
-}
-
-.props-actions {
-   border-top: 1px solid var(--medium-color);
-   padding-top: 16px;
-   margin-top: 8px;
-}
-
-.actions-note {
-   margin-top: 12px;
-   padding: 8px 12px;
-   background: var(--tertiary-background-color);
-   border-radius: 6px;
-   border: 1px solid var(--medium-color);
-}
-
-.actions-note small {
-   color: var(--font-secondary-color);
-   font-size: 11px;
-   display: flex;
-   align-items: center;
-   gap: 6px;
-}
-
-.props-section {
-   background: var(--tertiary-background-color);
-   border: 1px solid var(--medium-color);
-   border-radius: 8px;
-   padding: 12px;
-}
-
-.section-title {
-   font-size: 12px;
-   font-weight: 600;
-   color: var(--font-primary-color);
-   margin-bottom: 12px;
-   display: flex;
-   align-items: center;
-   gap: 6px;
-}
-
-.prop-item {
-   display: flex;
-   flex-direction: column;
-   gap: 6px;
-   padding: 12px;
-   background: var(--primary-background-color);
-   border: 1px solid var(--medium-color);
-   border-radius: 6px;
-   margin-bottom: 8px;
-   transition: border-color 0.2s ease;
-   min-width: 0;
-   overflow: hidden;
-}
-
-.prop-item:hover {
-   border-color: var(--primary-color);
-}
-
-.prop-header {
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
-   gap: 8px;
-   min-width: 0;
-}
-
-.prop-title {
-   display: flex;
-   align-items: center;
-   gap: 6px;
-   min-width: 0;
-   flex: 1;
-}
-
-.prop-title strong {
-   min-width: 0;
-   overflow: hidden;
-   text-overflow: ellipsis;
-   white-space: nowrap;
-}
-
-.prop-name {
-   font-size: 13px;
-   font-weight: 600;
-   color: var(--font-primary-color);
-}
-
-.prop-name.required::after {
-   content: " *";
-   color: var(--danger-color);
-}
-
-.prop-meta {
-   display: flex;
-   align-items: center;
-   gap: 8px;
-}
-
-.prop-type {
-   font-size: 11px;
-   padding: 2px 6px;
-   background: var(--secondary-color);
-   color: var(--secondary-color-contrast);
-   border-radius: 4px;
-   font-family: monospace;
-   font-weight: 500;
-   flex-shrink: 0;
-}
-
-.prop-status {
-   font-size: 12px;
-   font-weight: 500;
-   flex-shrink: 0;
-}
-
-.status-used {
-   color: var(--success-color);
-}
-
-.status-missing {
-   color: var(--danger-color);
-}
-
-.status-optional {
-   color: var(--medium-color);
-}
-
-.prop-input {
-   margin-top: 8px;
-   min-width: 0;
-   overflow: hidden;
-}
-
-.input-group {
-   position: relative;
-   max-width: 100%;
-   min-width: 0;
-   overflow: hidden;
-}
-
-.prop-control {
-   width: 100%;
-   max-width: 100%;
-   min-width: 0;
-   padding: 8px 32px 8px 10px;
-   border: 1px solid var(--medium-color);
-   border-radius: 6px;
-   background: var(--primary-background-color);
-   color: var(--font-primary-color);
-   font-size: 13px;
-   transition: border-color 0.2s ease, box-shadow 0.2s ease;
-   font-family: monospace;
-   box-sizing: border-box;
-   display: block;
-}
-
-.prop-control:focus {
-   outline: none;
-   border-color: var(--primary-color);
-   box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
-}
-
-.prop-control:disabled {
-   background: var(--disabled-color);
-   color: var(--font-secondary-color);
-   cursor: not-allowed;
-}
-
-.prop-control[readonly] {
-   background: var(--tertiary-background-color);
-   cursor: pointer;
-   text-overflow: ellipsis;
-   overflow: hidden;
-   white-space: nowrap;
-   max-width: 100%;
-}
-
-.prop-control[readonly]:focus {
-   border-color: var(--accent-color);
-   box-shadow: 0 0 0 3px rgba(var(--accent-color), 0.1);
-}
-
-/* Estilos específicos para checkboxes */
-.prop-control[type="checkbox"] {
-   width: auto;
-   padding: 0;
-   margin: 0;
-   cursor: pointer;
-}
-
-.edit-btn {
-   position: absolute;
-   right: 4px;
-   top: 50%;
-   transform: translateY(-50%);
-   background: var(--accent-color);
-   border: none;
-   color: white;
-   width: 24px;
-   height: 24px;
-   border-radius: 4px;
-   cursor: pointer;
-   font-size: 12px;
-   display: flex;
-   align-items: center;
-   justify-content: center;
-   transition: background 0.2s ease;
-}
-
-.edit-btn:hover {
-   background: var(--primary-color);
-}
-
-.default-value {
-   font-size: 11px;
-   color: var(--font-secondary-color);
-   font-style: italic;
-   margin-top: 4px;
-}
-
-.info-list {
-   display: flex;
-   flex-direction: column;
-   gap: 12px;
-}
-
-.info-item {
-   display: flex;
-   justify-content: space-between;
-   padding: 12px;
-   background: var(--tertiary-background-color);
-   border-radius: 6px;
-   border: 1px solid var(--medium-color);
-}
-
-.info-label {
-   font-weight: 600;
-   color: var(--font-primary-color);
-   font-size: 13px;
-}
-
-.info-value {
-   color: var(--font-secondary-color);
-   font-family: monospace;
-   font-size: 12px;
-}
-
-.actions-container {
-   display: flex;
-   flex-direction: column;
-   gap: 16px;
-}
-
-.action-buttons {
-   display: flex;
-   flex-direction: column;
-   gap: 8px;
-}
-
-.action-btn {
-   padding: 12px 16px;
-   border: none;
-   border-radius: 6px;
-   font-size: 13px;
-   font-weight: 500;
-   cursor: pointer;
-   transition: all 0.2s ease;
-   display: flex;
-   align-items: center;
-   justify-content: center;
-   gap: 8px;
-}
-
-.action-btn.primary {
-   background: var(--primary-color);
-   color: var(--primary-color-contrast);
-}
-
-.action-btn.primary:hover {
-   background: var(--primary-color-shade);
-}
-
-.action-btn.secondary {
-   background: var(--secondary-color);
-   color: var(--secondary-color-contrast);
-}
-
-.action-btn.secondary:hover {
-   opacity: 0.9;
-}
-
-.action-btn.tertiary {
-   background: var(--tertiary-background-color);
-   color: var(--font-primary-color);
-   border: 1px solid var(--medium-color);
-}
-
-.action-btn.tertiary:hover {
-   background: var(--secondary-background-color);
-}
-
-/* Modal Styles */
-.editor-modal {
-   display: none;
-   position: fixed;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background: rgba(0, 0, 0, 0.6);
-   z-index: 20000;
-   backdrop-filter: blur(4px);
-}
-
-.editor-modal.active {
-   display: flex;
-   align-items: center;
-   justify-content: center;
-}
-
-.modal-content {
-background: var(--primary-background-color);
-border-radius: 12px;
-width: min(600px, 92vw);
-max-width: 600px;
-max-height: 80%;
-display: flex;
-flex-direction: column;
-box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
-border: 1px solid var(--medium-color);
-   box-sizing: border-box;
-}
-
-.modal-header {
-   padding: 16px 20px;
-   background: var(--tertiary-background-color);
-   border-radius: 12px 12px 0 0;
-   border-bottom: 1px solid var(--medium-color);
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
-}
-
-.modal-header h3 {
-   margin: 0;
-   font-size: 16px;
-   font-weight: 600;
-   color: var(--font-primary-color);
-}
-
-.modal-close {
-   background: none;
-   border: none;
-   font-size: 20px;
-   color: var(--font-secondary-color);
-   cursor: pointer;
-   width: 32px;
-   height: 32px;
-   border-radius: 6px;
-   display: flex;
-   align-items: center;
-   justify-content: center;
-   transition: background 0.2s ease;
-}
-
-.modal-close:hover {
-   background: var(--secondary-background-color);
-}
-
-.modal-body {
-flex: 1;
-padding: 20px;
-display: flex;
-flex-direction: column;
-gap: 16px;
-overflow: hidden;
-   min-height: 0;
-}
-
-.editor-type-selector {
-   display: flex;
-   gap: 4px;
-   background: var(--tertiary-background-color);
-   padding: 4px;
-   border-radius: 6px;
-}
-
-.type-btn {
-   flex: 1;
-   padding: 8px 12px;
-   border: none;
-   background: transparent;
-   color: var(--font-secondary-color);
-   font-size: 12px;
-   font-weight: 500;
-   cursor: pointer;
-   border-radius: 4px;
-   transition: all 0.2s ease;
-}
-
-.type-btn.active {
-   background: var(--primary-color);
-   color: var(--primary-color-contrast);
-}
-
-.editor-container {
-flex: 1;
-position: relative;
-min-height: 200px;
-   min-width: 0;
-}
-
-#property-editor {
-width: 100%;
-height: 100%;
-border: 1px solid var(--medium-color);
-border-radius: 6px;
-padding: 12px;
-background: var(--primary-background-color);
-color: var(--font-primary-color);
-font-family: 'Monaco', 'Consolas', monospace;
-font-size: 13px;
-line-height: 1.5;
-resize: none;
-outline: none;
-min-height: 200px;
-   box-sizing: border-box;
-}
-
-#property-editor:focus {
-   border-color: var(--primary-color);
-   box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
-}
-
-.validation-message {
-   font-size: 12px;
-   color: var(--danger-color);
-   min-height: 18px;
-   display: flex;
-   align-items: center;
-   gap: 6px;
-}
-
-.modal-actions {
-   padding: 16px 20px;
-   background: var(--tertiary-background-color);
-   border-radius: 0 0 12px 12px;
-   border-top: 1px solid var(--medium-color);
-   display: flex;
-   gap: 12px;
-   justify-content: flex-end;
-}
-
-.modal-btn {
-   padding: 10px 20px;
-   border: none;
-   border-radius: 6px;
-   font-size: 13px;
-   font-weight: 500;
-   cursor: pointer;
-   transition: all 0.2s ease;
-}
-
-.modal-btn.cancel {
-   background: var(--tertiary-background-color);
-   color: var(--font-primary-color);
-   border: 1px solid var(--medium-color);
-}
-
-.modal-btn.cancel:hover {
-   background: var(--secondary-background-color);
-}
-
-.modal-btn.save {
-   background: var(--success-color);
-   color: var(--success-contrast);
-}
-
-.modal-btn.save:hover {
-   opacity: 0.9;
-}
-
-.modal-btn.save:disabled {
-   background: var(--disabled-color);
-   cursor: not-allowed;
-}
-   `
-}
-
-function productionOnlyHtml(){
-   return `
-   <div id="debugger-container">
-   <div class="debugger-header">
-      <div class="header-content">
-         <div class="component-info">
-            <div class="component-icon">🔍</div>
-            <div class="component-details">
-               <div class="component-name">Component Inspector</div>
-               <div class="component-id">Ready to debug</div>
-            </div>
-         </div>
-         <div class="header-actions">
-            <button class="minimize-btn" title="Minimize">−</button>
-            <button id="close-debugger" title="Close">×</button>
-         </div>
-      </div>
-   </div>
-   
-   <div class="debugger-content">
-      <div class="tabs-container">
-         <div class="tab-nav">
-            <button class="tab-btn active" data-tab="props">📋 Props</button>
-            <button class="tab-btn" data-tab="info">ℹ️ Info</button>
-         </div>
-      </div>
-      
-      <div class="tab-content">
-         <div class="tab-pane active" id="props-tab">
-            <div class="props-container"></div>
-            <div class="props-actions">
-               <div class="action-buttons">
-                  <button class="action-btn primary" id="apply-changes">✅ Apply Changes</button>
-                  <button class="action-btn secondary" id="reset-values">🔄 Reset Values</button>
-               </div>
-               <div class="actions-note">
-                  <small>💡 Press Enter on any input to apply changes automatically</small>
-               </div>
-            </div>
-         </div>
-         
-         <div class="tab-pane" id="info-tab">
-            <div class="info-container">
-               <div class="info-list"></div>
-            </div>
-         </div>
-      </div>
-   </div>
-   
-   <!-- Modal para editar objetos/funciones -->
-   <div class="editor-modal" id="editor-modal">
-      <div class="modal-content">
-         <div class="modal-header">
-            <h3 id="modal-title">Edit Property</h3>
-            <button class="modal-close" id="modal-close">×</button>
-         </div>
-         <div class="modal-body">
-            <div class="editor-type-selector">
-               <button class="type-btn active" data-type="json">📋 JSON</button>
-               <button class="type-btn" data-type="function">⚡ Function</button>
-            </div>
-            <div class="editor-container">
-               <textarea id="property-editor" spellcheck="false"></textarea>
-            </div>
-            <div class="editor-footer">
-               <div class="validation-message"></div>
-            </div>
-         </div>
-         <div class="modal-actions">
-            <button class="modal-btn cancel" id="modal-cancel">Cancel</button>
-            <button class="modal-btn save" id="modal-save">Save Changes</button>
-         </div>
-      </div>
-   </div>
-</div>`
-}