slicejs-web-framework 3.1.2 → 3.1.4

package/.worktrees/public-env-browser-exposure/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Victor Jose Kneider Alnahi and Julio Antonio Graterol Bracho
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

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

@@ -1,369 +0,0 @@
-/**
- * ContextManager - Sistema de contextos compartidos para Slice.js
- * Ubicación: /Slice/Components/Structural/ContextManager/ContextManager.js
- *
- * Características:
- * - Estado compartido entre componentes
- * - Usa EventManager internamente para notificaciones
- * - Selectores para observar campos específicos
- * - Auto-limpieza cuando componentes se destruyen
- * - Persistencia opcional en localStorage
- */
-/**
- * @typedef {Object} ContextOptions
- * @property {boolean} [persist]
- * @property {string} [storageKey]
- */
-
-export default class ContextManager {
-   constructor() {
-      // Map<contextName, { state, options }>
-      this.contexts = new Map();
-   }
-
-   init() {
-      return true;
-   }
-
-   // ============================================
-   // CREAR CONTEXTO
-   // ============================================
-
-   /**
-    * Crear un nuevo contexto
-    * @param {string} name - Nombre unico del contexto
-    * @param {Object} [initialState] - Estado inicial
-    * @param {ContextOptions} [options] - Opciones: { persist, storageKey }
-    * @returns {boolean}
-    *
-    * @example
-    * slice.context.create('auth', {
-    *    isLoggedIn: false,
-    *    user: null
-    * });
-    *
-    * // Con persistencia en localStorage
-    * slice.context.create('preferences', {
-    *    theme: 'light',
-    *    language: 'es'
-    * }, { persist: true });
-    */
-   create(name, initialState = {}, options = {}) {
-      if (this.contexts.has(name)) {
-         slice.logger.logWarning('ContextManager', `El contexto "${name}" ya existe`);
-         return false;
-      }
-
-      // Cargar estado persistido si existe
-      let state = initialState;
-      if (options.persist) {
-         const persisted = this._loadFromStorage(name);
-         if (persisted !== null) {
-            state = persisted;
-         }
-      }
-
-      this.contexts.set(name, {
-         state,
-         options: {
-            persist: options.persist || false,
-            storageKey: options.storageKey || `slice_context_${name}`,
-         },
-      });
-
-      slice.logger.logInfo('ContextManager', `Contexto "${name}" creado`);
-
-      return true;
-   }
-
-   // ============================================
-   // LEER ESTADO
-   // ============================================
-
-   /**
-    * Obtener el estado actual de un contexto
-    * @param {string} name - Nombre del contexto
-    * @returns {any|null} Estado actual o null si no existe
-    *
-    * @example
-    * const auth = slice.context.getState('auth');
-    * console.log(auth.user.name);
-    */
-   getState(name) {
-      if (!this.contexts.has(name)) {
-         slice.logger.logError('ContextManager', `El contexto "${name}" no existe`);
-         return null;
-      }
-
-      return this.contexts.get(name).state;
-   }
-
-   // ============================================
-   // ACTUALIZAR ESTADO
-   // ============================================
-
-   /**
-    * Actualizar el estado de un contexto
-    * @param {string} name - Nombre del contexto
-    * @param {Object|Function} updater - Nuevo estado o funcion (prevState) => newState
-    * @returns {void}
-    *
-    * @example
-    * // Reemplazar con objeto
-    * slice.context.setState('auth', {
-    *    isLoggedIn: true,
-    *    user: { name: 'Juan' }
-    * });
-    *
-    * // Usar funcion para acceder al estado anterior
-    * slice.context.setState('cart', (prev) => ({
-    *    ...prev,
-    *    items: [...prev.items, nuevoProducto],
-    *    total: prev.total + nuevoProducto.price
-    * }));
-    */
-   setState(name, updater) {
-      if (!this.contexts.has(name)) {
-         slice.logger.logError('ContextManager', `El contexto "${name}" no existe`);
-         return;
-      }
-
-      const context = this.contexts.get(name);
-      const prevState = context.state;
-
-      // Calcular nuevo estado
-      let newState;
-      if (typeof updater === 'function') {
-         newState = updater(prevState);
-      } else {
-         newState = updater;
-      }
-
-      // Guardar nuevo estado
-      context.state = newState;
-
-      // Persistir si está habilitado
-      if (context.options.persist) {
-         this._saveToStorage(name, newState, context.options.storageKey);
-      }
-
-      // Emitir evento para notificar a los watchers
-      slice.events.emit(`context:${name}`, newState, prevState);
-
-      slice.logger.logInfo('ContextManager', `Contexto "${name}" actualizado`);
-   }
-
-   // ============================================
-   // WATCH (OBSERVAR CAMBIOS)
-   // ============================================
-
-   /**
-    * Observar cambios en un contexto
-    * @param {string} name - Nombre del contexto
-    * @param {HTMLElement} component - Componente Slice para auto-cleanup
-    * @param {(value: any) => void} callback - Funcion a ejecutar cuando cambia
-    * @param {(state: any) => any} [selector] - Opcional. Funcion para seleccionar campos
-    * @returns {string|null} subscriptionId
-    *
-    * @example
-    * // Observar todo el estado
-    * slice.context.watch('auth', this, (state) => {
-    *    this.render(state);
-    * });
-    *
-    * // Observar un campo especifico
-    * slice.context.watch('auth', this, (name) => {
-    *    this.$name.textContent = name;
-    * }, state => state.user.name);
-    *
-    * // Observar multiples campos
-    * slice.context.watch('auth', this, (data) => {
-    *    this.$name.textContent = data.name;
-    *    this.$avatar.src = data.avatar;
-    * }, state => ({
-    *    name: state.user.name,
-    *    avatar: state.user.avatar
-    * }));
-    *
-    * // Valores computados
-    * slice.context.watch('cart', this, (total) => {
-    *    this.$total.textContent = `${total}`;
-    * }, state => state.items.reduce((sum, i) => sum + i.price, 0));
-    */
-   watch(name, component, callback, selector = null) {
-      if (!this.contexts.has(name)) {
-         slice.logger.logError('ContextManager', `El contexto "${name}" no existe`);
-         return null;
-      }
-
-      if (!component?.sliceId) {
-         slice.logger.logError('ContextManager', 'watch() requiere un componente Slice válido');
-         return null;
-      }
-
-      if (typeof callback !== 'function') {
-         slice.logger.logError('ContextManager', 'El callback debe ser una función');
-         return null;
-      }
-
-      // Guardar el valor anterior del selector para comparar
-      let lastSelectedValue = selector ? this._getSelectedValue(name, selector) : this.getState(name);
-
-      // Crear wrapper que aplica el selector y compara
-      const wrappedCallback = (newState, prevState) => {
-         if (selector) {
-            const newSelectedValue = this._applySelector(newState, selector);
-            const prevSelectedValue = this._applySelector(prevState, selector);
-
-            // Solo ejecutar si el valor seleccionado cambió
-            if (!this._isEqual(newSelectedValue, prevSelectedValue)) {
-               lastSelectedValue = newSelectedValue;
-               callback(newSelectedValue);
-            }
-         } else {
-            // Sin selector, siempre ejecutar
-            callback(newState);
-         }
-      };
-
-      // Suscribirse al evento del contexto
-      const subscriptionId = slice.events.subscribe(`context:${name}`, wrappedCallback, { component });
-
-      slice.logger.logInfo('ContextManager', `Watch registrado en "${name}" para ${component.sliceId}`);
-
-      return subscriptionId;
-   }
-
-   // ============================================
-   // UTILIDADES
-   // ============================================
-
-   /**
-    * Verificar si un contexto existe
-    * @param {string} name - Nombre del contexto
-    * @returns {boolean}
-    */
-   has(name) {
-      return this.contexts.has(name);
-   }
-
-   /**
-    * Eliminar un contexto
-    * @param {string} name - Nombre del contexto
-    * @returns {boolean}
-    */
-   destroy(name) {
-      if (!this.contexts.has(name)) {
-         return false;
-      }
-
-      const context = this.contexts.get(name);
-
-      // Limpiar storage si existe
-      if (context.options.persist) {
-         this._removeFromStorage(context.options.storageKey);
-      }
-
-      this.contexts.delete(name);
-
-      slice.logger.logInfo('ContextManager', `Contexto "${name}" eliminado`);
-
-      return true;
-   }
-
-   /**
-    * Obtener lista de todos los contextos
-    * @returns {string[]}
-    */
-   list() {
-      return Array.from(this.contexts.keys());
-   }
-
-   // ============================================
-   // MÉTODOS PRIVADOS
-   // ============================================
-
-   /**
-    * Aplicar selector al estado
-    */
-   _applySelector(state, selector) {
-      try {
-         return selector(state);
-      } catch (error) {
-         slice.logger.logWarning('ContextManager', 'Error al aplicar selector', error);
-         return undefined;
-      }
-   }
-
-   /**
-    * Obtener valor seleccionado del estado actual
-    */
-   _getSelectedValue(name, selector) {
-      const state = this.getState(name);
-      return this._applySelector(state, selector);
-   }
-
-   /**
-    * Comparar dos valores (shallow)
-    */
-   _isEqual(a, b) {
-      // Mismo valor primitivo o referencia
-      if (a === b) return true;
-
-      // Si alguno es null/undefined
-      if (a == null || b == null) return false;
-
-      // Si no son objetos, ya sabemos que son diferentes
-      if (typeof a !== 'object' || typeof b !== 'object') return false;
-
-      // Comparación shallow de objetos
-      const keysA = Object.keys(a);
-      const keysB = Object.keys(b);
-
-      if (keysA.length !== keysB.length) return false;
-
-      for (const key of keysA) {
-         if (a[key] !== b[key]) return false;
-      }
-
-      return true;
-   }
-
-   /**
-    * Cargar estado desde localStorage
-    */
-   _loadFromStorage(name) {
-      try {
-         const key = `slice_context_${name}`;
-         const data = localStorage.getItem(key);
-         if (data) {
-            return JSON.parse(data);
-         }
-      } catch (error) {
-         slice.logger.logWarning('ContextManager', `Error cargando "${name}" de localStorage`, error);
-      }
-      return null;
-   }
-
-   /**
-    * Guardar estado en localStorage
-    */
-   _saveToStorage(name, state, storageKey) {
-      try {
-         localStorage.setItem(storageKey, JSON.stringify(state));
-      } catch (error) {
-         slice.logger.logWarning('ContextManager', `Error guardando "${name}" en localStorage`, error);
-      }
-   }
-
-   /**
-    * Eliminar estado de localStorage
-    */
-   _removeFromStorage(storageKey) {
-      try {
-         localStorage.removeItem(storageKey);
-      } catch (error) {
-         // Ignorar errores al eliminar
-      }
-   }
-}

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

@@ -1,297 +0,0 @@
-/**
- * ContextManager debug panel.
- */
-export default class ContextManagerDebugger extends HTMLElement {
-   constructor() {
-      super();
-      this.isOpen = false;
-      this.filterText = '';
-   }
-
-   /**
-    * Initialize panel UI.
-    * @returns {Promise<void>}
-    */
-   async init() {
-      this.innerHTML = this.renderTemplate();
-      slice.stylesManager.registerComponentStyles('ContextManagerDebugger', this.renderStyles());
-      this.cacheElements();
-      this.bindEvents();
-      this.makeDraggable();
-      this.renderList();
-   }
-
-   /**
-    * Toggle panel visibility.
-    * @returns {void}
-    */
-   toggle() {
-      this.isOpen = !this.isOpen;
-      this.container.classList.toggle('active', this.isOpen);
-      if (this.isOpen) {
-         this.renderList();
-      }
-   }
-
-   /**
-    * Show panel.
-    * @returns {void}
-    */
-   open() {
-      this.isOpen = true;
-      this.container.classList.add('active');
-      this.renderList();
-   }
-
-   /**
-    * Hide panel.
-    * @returns {void}
-    */
-   close() {
-      this.isOpen = false;
-      this.container.classList.remove('active');
-   }
-
-   cacheElements() {
-      this.container = this.querySelector('#context-debugger');
-      this.header = this.querySelector('.context-header');
-      this.list = this.querySelector('#context-list');
-      this.filterInput = this.querySelector('#context-filter');
-      this.countLabel = this.querySelector('#context-count');
-      this.refreshButton = this.querySelector('#context-refresh');
-      this.closeButton = this.querySelector('#context-close');
-   }
-
-   bindEvents() {
-      this.refreshButton.addEventListener('click', () => this.renderList());
-      this.closeButton.addEventListener('click', () => this.close());
-      this.filterInput.addEventListener('input', (event) => {
-         this.filterText = event.target.value.trim().toLowerCase();
-         this.renderList();
-      });
-   }
-
-   makeDraggable() {
-      if (!this.header || !this.container) return;
-
-      let offset = { x: 0, y: 0 };
-      let isDragging = false;
-
-      this.header.style.cursor = 'grab';
-
-      this.header.addEventListener('mousedown', (event) => {
-         if (event.target.closest('.btn')) return;
-         isDragging = true;
-         offset.x = event.clientX - this.container.getBoundingClientRect().left;
-         offset.y = event.clientY - this.container.getBoundingClientRect().top;
-         this.header.style.cursor = 'grabbing';
-      });
-
-      document.addEventListener('mousemove', (event) => {
-         if (!isDragging) return;
-         const rect = this.container.getBoundingClientRect();
-         const maxX = window.innerWidth - rect.width;
-         const maxY = window.innerHeight - rect.height;
-         const x = Math.min(Math.max(event.clientX - offset.x, 0), maxX);
-         const y = Math.min(Math.max(event.clientY - offset.y, 0), maxY);
-         this.container.style.left = `${x}px`;
-         this.container.style.top = `${y}px`;
-         this.container.style.right = 'auto';
-         this.container.style.bottom = 'auto';
-      });
-
-      document.addEventListener('mouseup', () => {
-         if (!isDragging) return;
-         isDragging = false;
-         this.header.style.cursor = 'grab';
-      });
-   }
-
-   renderList() {
-      if (!slice?.context?.contexts) {
-         this.list.textContent = 'ContextManager not available.';
-         this.countLabel.textContent = '0';
-         return;
-      }
-
-      const items = [];
-      slice.context.contexts.forEach((value, name) => {
-         if (this.filterText && !name.toLowerCase().includes(this.filterText)) {
-            return;
-         }
-         const keys = value?.state ? Object.keys(value.state).length : 0;
-         items.push({ name, keys, state: value?.state || {} });
-      });
-
-      items.sort((a, b) => a.name.localeCompare(b.name));
-
-      this.countLabel.textContent = String(items.length);
-      this.list.innerHTML = items.length
-         ? items.map((item) => {
-              const preview = JSON.stringify(item.state, null, 2);
-              return `
-               <div class="context-row">
-                  <div class="context-header">
-                     <div class="context-name">${item.name}</div>
-                     <div class="context-keys">${item.keys} keys</div>
-                  </div>
-                  <pre class="context-preview">${this.escapeHtml(preview)}</pre>
-               </div>
-            `;
-           }).join('')
-         : '<div class="empty">No contexts</div>';
-   }
-
-   escapeHtml(value) {
-      return value
-         .replace(/&/g, '&amp;')
-         .replace(/</g, '&lt;')
-         .replace(/>/g, '&gt;')
-         .replace(/"/g, '&quot;')
-         .replace(/'/g, '&#39;');
-   }
-
-   renderTemplate() {
-      return `
-      <div id="context-debugger">
-         <div class="context-header">
-            <div class="title">Contexts</div>
-            <div class="actions">
-               <button id="context-refresh" class="btn">Refresh</button>
-               <button id="context-close" class="btn">Close</button>
-            </div>
-         </div>
-         <div class="context-toolbar">
-            <input id="context-filter" type="text" placeholder="Filter contexts" />
-            <div class="count">Total: <span id="context-count">0</span></div>
-         </div>
-         <div class="context-list" id="context-list"></div>
-      </div>
-      `;
-   }
-
-   renderStyles() {
-      return `
-      #context-debugger {
-         position: fixed;
-         bottom: 20px;
-         left: 20px;
-         width: min(380px, calc(100vw - 40px));
-         max-height: 60vh;
-         background: var(--primary-background-color);
-         border: 1px solid var(--medium-color);
-         border-radius: 12px;
-         box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
-         display: none;
-         flex-direction: column;
-         z-index: 10001;
-         overflow: hidden;
-      }
-
-      #context-debugger.active {
-         display: flex;
-      }
-
-      #context-debugger * {
-         box-sizing: border-box;
-      }
-
-      .context-header {
-         display: flex;
-         justify-content: space-between;
-         align-items: center;
-         padding: 12px 14px;
-         background: var(--tertiary-background-color);
-         border-bottom: 1px solid var(--medium-color);
-         user-select: none;
-      }
-
-      .context-header .title {
-         font-weight: 600;
-         color: var(--font-primary-color);
-      }
-
-      .context-header .actions {
-         display: flex;
-         gap: 8px;
-      }
-
-      .context-header .btn {
-         padding: 6px 10px;
-         border-radius: 6px;
-         border: 1px solid var(--medium-color);
-         background: var(--primary-background-color);
-         color: var(--font-primary-color);
-         cursor: pointer;
-         font-size: 12px;
-      }
-
-      .context-toolbar {
-         display: flex;
-         gap: 10px;
-         align-items: center;
-         padding: 10px 12px;
-         border-bottom: 1px solid var(--medium-color);
-      }
-
-      .context-toolbar input {
-         flex: 1;
-         min-width: 0;
-         padding: 6px 8px;
-         border-radius: 6px;
-         border: 1px solid var(--medium-color);
-         background: var(--primary-background-color);
-         color: var(--font-primary-color);
-      }
-
-      .context-list {
-         padding: 10px 12px;
-         overflow: auto;
-         display: flex;
-         flex-direction: column;
-         gap: 10px;
-      }
-
-      .context-row {
-         border: 1px solid var(--medium-color);
-         border-radius: 8px;
-         background: var(--tertiary-background-color);
-         padding: 10px;
-         display: flex;
-         flex-direction: column;
-         gap: 6px;
-      }
-
-      .context-name {
-         font-weight: 600;
-         color: var(--font-primary-color);
-      }
-
-      .context-keys {
-         font-size: 12px;
-         color: var(--font-secondary-color);
-      }
-
-      .context-preview {
-         background: var(--primary-background-color);
-         border-radius: 6px;
-         padding: 8px;
-         border: 1px solid var(--medium-color);
-         max-height: 180px;
-         overflow: auto;
-         font-size: 11px;
-         font-family: monospace;
-         color: var(--font-primary-color);
-      }
-
-      .empty {
-         color: var(--font-secondary-color);
-         font-size: 12px;
-         text-align: center;
-         padding: 12px 0;
-      }
-      `;
-   }
-}
-
-customElements.define('slice-contextmanager-debugger', ContextManagerDebugger);