slicejs-web-framework 3.3.8 → 3.4.0

package/Slice/Components/Structural/ContextManager/ContextManager.js

@@ -72,6 +72,8 @@ export default class ContextManager {
          },
       });
 
+      slice.events.emit('context:__created', { name, state });
+
       slice.logger.logInfo('ContextManager', `Contexto "${name}" creado`);
 
       return true;

package/Slice/Components/Structural/ContextManager/ContextManagerDebugger.js

@@ -6,6 +6,8 @@ export default class ContextManagerDebugger extends HTMLElement {
       super();
       this.isOpen = false;
       this.filterText = '';
+      this._contextSubscriptions = new Map();
+      this._debounceTimer = null;
    }
 
    /**
@@ -18,6 +20,7 @@ export default class ContextManagerDebugger extends HTMLElement {
       this.cacheElements();
       this.bindEvents();
       this.makeDraggable();
+      this._subscribeToAllContexts();
       this.renderList();
    }
 
@@ -29,6 +32,7 @@ export default class ContextManagerDebugger extends HTMLElement {
       this.isOpen = !this.isOpen;
       this.container.classList.toggle('active', this.isOpen);
       if (this.isOpen) {
+         this._subscribeToAllContexts();
          this.renderList();
       }
    }
@@ -40,6 +44,7 @@ export default class ContextManagerDebugger extends HTMLElement {
    open() {
       this.isOpen = true;
       this.container.classList.add('active');
+      this._subscribeToAllContexts();
       this.renderList();
    }
 
@@ -52,6 +57,46 @@ export default class ContextManagerDebugger extends HTMLElement {
       this.container.classList.remove('active');
    }
 
+   disconnectedCallback() {
+      this._unsubscribeAll();
+   }
+
+   _unsubscribeAll() {
+      for (const [name, id] of this._contextSubscriptions) {
+         slice.events.unsubscribe(`context:${name}`, id);
+      }
+      this._contextSubscriptions.clear();
+      if (this._createdSub) {
+         slice.events.unsubscribe('context:__created', this._createdSub);
+         this._createdSub = null;
+      }
+   }
+
+   _subscribeToAllContexts() {
+      if (!slice?.context?.contexts) return;
+      slice.context.contexts.forEach((value, name) => {
+         if (this._contextSubscriptions.has(name)) return;
+         const id = slice.events.subscribe(`context:${name}`, () => this._scheduleRender());
+         this._contextSubscriptions.set(name, id);
+      });
+      if (!this._createdSub) {
+         this._createdSub = slice.events.subscribe('context:__created', ({ name }) => {
+            if (!this._contextSubscriptions.has(name)) {
+               const id = slice.events.subscribe(`context:${name}`, () => this._scheduleRender());
+               this._contextSubscriptions.set(name, id);
+            }
+            this._scheduleRender();
+         });
+      }
+   }
+
+   _scheduleRender() {
+      if (this._debounceTimer) clearTimeout(this._debounceTimer);
+      this._debounceTimer = setTimeout(() => {
+         if (this.isOpen) this.renderList();
+      }, 50);
+   }
+
    cacheElements() {
       this.container = this.querySelector('#context-debugger');
       this.header = this.querySelector('.context-header');
@@ -178,18 +223,22 @@ export default class ContextManagerDebugger extends HTMLElement {
    renderStyles() {
       return `
 /* Slice Instruments — context store. All selectors scoped to the
-   <slice-contextmanager-debugger> tag so nothing clashes with app styles. */
+    <slice-contextmanager-debugger> tag so nothing clashes with app styles.
+    Every --si-* token reads the matching framework theme variable from
+    :root, falling back to the original hardcoded value if absent. */
 slice-contextmanager-debugger {
-   --si-accent: var(--primary-color, #6ee7ff);
-   --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
-   --si-surface: rgba(17, 19, 28, 0.86);
-   --si-raised: rgba(255, 255, 255, 0.035);
-   --si-raised-2: rgba(255, 255, 255, 0.06);
-   --si-border: rgba(255, 255, 255, 0.09);
-   --si-text: #e8eaf2;
-   --si-dim: #888fa6;
-   --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
-}
+    --si-accent: var(--primary-color, #6ee7ff);
+    --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
+    --si-surface: var(--primary-background-color, rgba(17, 19, 28, 0.86));
+    --si-raised: var(--secondary-background-color, rgba(255, 255, 255, 0.035));
+    --si-raised-2: var(--tertiary-background-color, rgba(255, 255, 255, 0.06));
+    --si-border: var(--medium-color, rgba(255, 255, 255, 0.09));
+    --si-text: var(--font-primary-color, #e8eaf2);
+    --si-dim: var(--font-secondary-color, #888fa6);
+    --si-danger: var(--danger-color, #ff6b6b);
+    --si-success: var(--success-color, #46d39a);
+    --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+ }
 
 slice-contextmanager-debugger #context-debugger {
    position: fixed;

package/Slice/Components/Structural/Debugger/Debugger.js

@@ -811,24 +811,25 @@ return `
    All selectors are scoped under the <slice-debugger> tag so the
    panel never clashes with (or leaks into) app styles. Tokens live
    on the tag so both #debugger-container and the sibling
-   #editor-modal inherit them. Chrome colors are static; only the
-   accent reads the theme (--primary-color) with a static fallback.
+   #editor-modal inherit them. Every --si-* token reads the matching
+   framework theme variable from :root, falling back to the original
+   hardcoded value if absent — so debuggers always match the app theme.
    ============================================================ */
 slice-debugger {
-   --si-accent: var(--primary-color, #6ee7ff);
-   --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
-   --si-surface: rgba(17, 19, 28, 0.88);
-   --si-raised: rgba(255, 255, 255, 0.035);
-   --si-raised-2: rgba(255, 255, 255, 0.06);
-   --si-inset: rgba(0, 0, 0, 0.28);
-   --si-border: rgba(255, 255, 255, 0.09);
-   --si-text: #e8eaf2;
-   --si-dim: #888fa6;
-   --si-danger: #ff6b6b;
-   --si-success: #46d39a;
-   --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
-   --si-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-}
+    --si-accent: var(--primary-color, #6ee7ff);
+    --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
+    --si-surface: var(--primary-background-color, rgba(17, 19, 28, 0.88));
+    --si-raised: var(--secondary-background-color, rgba(255, 255, 255, 0.035));
+    --si-raised-2: var(--tertiary-background-color, rgba(255, 255, 255, 0.06));
+    --si-inset: var(--primary-color-shade, rgba(0, 0, 0, 0.28));
+    --si-border: var(--medium-color, rgba(255, 255, 255, 0.09));
+    --si-text: var(--font-primary-color, #e8eaf2);
+    --si-dim: var(--font-secondary-color, #888fa6);
+    --si-danger: var(--danger-color, #ff6b6b);
+    --si-success: var(--success-color, #46d39a);
+    --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+    --si-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+ }
 
 slice-debugger *,
 slice-debugger *::before,

package/Slice/Components/Structural/EventManager/EventManager.js

@@ -23,6 +23,15 @@ export default class EventManager {
       // Map<sliceId, Set<{ eventName, subscriptionId }>> - Para auto-cleanup
       this.componentSubscriptions = new Map();
 
+      // Ring buffer de últimos emits (max 500) — solo se llena cuando el debugger está abierto
+      this.emitHistory = [];
+
+      // Contador de emits por evento en la sesión actual de grabación
+      this.emitCounts = new Map();
+
+      // Flag: solo grabamos cuando algún debugger UI está visible
+      this._recording = false;
+
       // Contador para IDs únicos
       this.idCounter = 0;
    }
@@ -95,6 +104,22 @@ export default class EventManager {
     *    console.log('App lista!');
     * });
     */
+   /**
+    * Activar registro de emits (lo llama el debugger al abrirse).
+    */
+   startRecording() {
+      this._recording = true;
+      this.emitHistory = [];
+      this.emitCounts = new Map();
+   }
+
+   /**
+    * Desactivar registro de emits (lo llama el debugger al cerrarse).
+    */
+   stopRecording() {
+      this._recording = false;
+   }
+
    subscribeOnce(eventName, callback, options = {}) {
       if (typeof callback !== 'function') {
          slice.logger.logError('EventManager', 'El callback debe ser una función');
@@ -165,6 +190,13 @@ export default class EventManager {
    emit(eventName, ...args) {
       slice.logger.info('EventManager', `Emitting "${eventName}"`, args[0] ?? null);
 
+      // Solo grabamos el histórico si algún debugger está abierto
+      if (this._recording) {
+         this.emitHistory.push({ eventName, timestamp: Date.now() });
+         if (this.emitHistory.length > 500) this.emitHistory.shift();
+         this.emitCounts.set(eventName, (this.emitCounts.get(eventName) || 0) + 1);
+      }
+
       if (!this.subscriptions.has(eventName)) {
          return;
       }

package/Slice/Components/Structural/EventManager/EventManagerDebugger.js

@@ -6,7 +6,10 @@ export default class EventManagerDebugger extends HTMLElement {
       super();
       this.isOpen = false;
       this.filterText = '';
+      this.activeTab = 'subscribers';
       this.refreshInterval = null;
+      this._autoRefreshTimer = null;
+      this._lastHistoryLength = 0;
    }
 
    /**
@@ -41,6 +44,11 @@ export default class EventManagerDebugger extends HTMLElement {
    open() {
       this.isOpen = true;
       this.container.classList.add('active');
+      this.activeTab = 'subscribers';
+      if (slice.events) {
+         slice.events.startRecording();
+      }
+      this._startAutoRefresh();
       this.renderList();
    }
 
@@ -51,6 +59,29 @@ export default class EventManagerDebugger extends HTMLElement {
    close() {
       this.isOpen = false;
       this.container.classList.remove('active');
+      this._stopAutoRefresh();
+      if (slice.events) {
+         slice.events.stopRecording();
+      }
+   }
+
+   _startAutoRefresh() {
+      this._stopAutoRefresh();
+      this._autoRefreshTimer = setInterval(() => {
+         if (!this.isOpen) return;
+         if (this.activeTab === 'history') {
+            this.renderHistory();
+         } else {
+            this.renderList();
+         }
+      }, 1500);
+   }
+
+   _stopAutoRefresh() {
+      if (this._autoRefreshTimer) {
+         clearInterval(this._autoRefreshTimer);
+         this._autoRefreshTimer = null;
+      }
    }
 
    cacheElements() {
@@ -61,15 +92,35 @@ export default class EventManagerDebugger extends HTMLElement {
       this.countLabel = this.querySelector('#events-count');
       this.refreshButton = this.querySelector('#events-refresh');
       this.closeButton = this.querySelector('#events-close');
+      this.tabSubs = this.querySelector('#tab-subscribers');
+      this.tabHistory = this.querySelector('#tab-history');
    }
 
    bindEvents() {
-      this.refreshButton.addEventListener('click', () => this.renderList());
+      this.refreshButton.addEventListener('click', () => {
+         if (this.activeTab === 'history') this.renderHistory();
+         else this.renderList();
+      });
       this.closeButton.addEventListener('click', () => this.close());
       this.filterInput.addEventListener('input', (event) => {
          this.filterText = event.target.value.trim().toLowerCase();
+         if (this.activeTab === 'history') this.renderHistory();
+         else this.renderList();
+      });
+      this.tabSubs.addEventListener('click', () => {
+         this.activeTab = 'subscribers';
+         this.tabSubs.classList.add('active');
+         this.tabHistory.classList.remove('active');
+         this.filterInput.placeholder = 'filter events…';
          this.renderList();
       });
+      this.tabHistory.addEventListener('click', () => {
+         this.activeTab = 'history';
+         this.tabHistory.classList.add('active');
+         this.tabSubs.classList.remove('active');
+         this.filterInput.placeholder = 'filter history…';
+         this.renderHistory();
+      });
    }
 
    makeDraggable() {
@@ -117,6 +168,7 @@ export default class EventManagerDebugger extends HTMLElement {
 
       const items = [];
       slice.events.subscriptions.forEach((subs, eventName) => {
+         const emitCount = slice.events.emitCounts?.get(eventName) || 0;
          const entries = Array.from(subs.entries()).map(([id, sub]) => {
             const componentSliceId = sub.componentSliceId || null;
             const component = componentSliceId ? slice.controller.getComponent(componentSliceId) : null;
@@ -133,7 +185,7 @@ export default class EventManagerDebugger extends HTMLElement {
             return;
          }
 
-         items.push({ eventName, count: subs.size, entries });
+         items.push({ eventName, count: subs.size, emitCount, entries });
       });
 
       items.sort((a, b) => a.eventName.localeCompare(b.eventName));
@@ -141,32 +193,76 @@ export default class EventManagerDebugger extends HTMLElement {
       this.countLabel.textContent = String(items.length);
       this.list.innerHTML = items.length
          ? items.map((item) => {
-              const details = item.entries.map((entry) => {
-                 const label = entry.componentName
-                    ? `${entry.componentName} (${entry.componentSliceId})`
-                    : entry.componentSliceId || 'Global';
-                 const onceBadge = entry.once ? '<span class="badge">once</span>' : '';
-                 return `
-                  <div class="subscriber-row">
-                     <div class="subscriber-name">${label}</div>
-                     <div class="subscriber-meta">${entry.id}${onceBadge}</div>
-                  </div>
-               `;
-              }).join('');
-
-              return `
-               <details class="event-row">
-                  <summary>
-                     <div class="event-name">${item.eventName}</div>
-                     <div class="event-count">${item.count}</div>
-                  </summary>
-                  <div class="subscriber-list">
-                     ${details || '<div class="empty">No subscribers</div>'}
-                  </div>
-               </details>
-            `;
-           }).join('')
-         : '<div class="empty">No events</div>';
+               const details = item.entries.map((entry) => {
+                  const label = entry.componentName
+                     ? `${entry.componentName} (${entry.componentSliceId})`
+                     : entry.componentSliceId || 'Global';
+                  const onceBadge = entry.once ? '<span class="badge">once</span>' : '';
+                  return `
+                   <div class="subscriber-row">
+                      <div class="subscriber-name">${label}</div>
+                      <div class="subscriber-meta">${entry.id}${onceBadge}</div>
+                   </div>
+                `;
+               }).join('');
+
+               return `
+                <details class="event-row">
+                   <summary>
+                      <div class="event-name">${item.eventName}</div>
+                      <div class="event-metrics">
+                         <span class="emit-count" title="Emits this session">⚡${item.emitCount}</span>
+                         <span class="event-count">${item.count}</span>
+                      </div>
+                   </summary>
+                   <div class="subscriber-list">
+                      ${details || '<div class="empty">No subscribers</div>'}
+                   </div>
+                </details>
+             `;
+            }).join('')
+          : '<div class="empty">No events</div>';
+   }
+
+   renderHistory() {
+      if (!slice?.events?.emitHistory) {
+         this.list.textContent = 'EventManager not available.';
+         this.countLabel.textContent = '0';
+         return;
+      }
+
+      const history = slice.events.emitHistory;
+      const filtered = this.filterText
+         ? history.filter(e => e.eventName.toLowerCase().includes(this.filterText))
+         : history;
+
+      this.countLabel.textContent = String(filtered.length);
+      if (!filtered.length) {
+         this.list.innerHTML = '<div class="empty">No emits recorded yet</div>';
+         return;
+      }
+
+      const now = Date.now();
+      this.list.innerHTML = [...filtered].reverse().map((entry) => {
+         const diff = now - entry.timestamp;
+         const timeStr = diff < 1000 ? 'now'
+            : diff < 60000 ? `${Math.floor(diff / 1000)}s ago`
+            : `${Math.floor(diff / 60000)}m ago`;
+         return `
+            <div class="history-row">
+               <div class="history-event">${this.escapeHtml(entry.eventName)}</div>
+               <div class="history-time">${timeStr}</div>
+            </div>
+         `;
+      }).join('');
+   }
+
+   escapeHtml(value) {
+      return String(value)
+         .replace(/&/g, '&amp;')
+         .replace(/</g, '&lt;')
+         .replace(/>/g, '&gt;')
+         .replace(/"/g, '&quot;');
    }
 
    renderTemplate() {
@@ -183,6 +279,10 @@ export default class EventManagerDebugger extends HTMLElement {
                <button id="events-close" class="btn" title="Close" aria-label="Close">✕</button>
             </div>
          </div>
+         <div class="events-tabs">
+            <button id="tab-subscribers" class="tab-btn active">Subscribers</button>
+            <button id="tab-history" class="tab-btn">History</button>
+         </div>
          <div class="events-toolbar">
             <input id="events-filter" type="text" placeholder="filter events…" autocomplete="off" spellcheck="false" />
             <div class="count"><span id="events-count">0</span></div>
@@ -195,18 +295,22 @@ export default class EventManagerDebugger extends HTMLElement {
    renderStyles() {
       return `
 /* Slice Instruments — events console. All selectors scoped to the
-   <slice-eventmanager-debugger> tag so nothing clashes with app styles. */
+    <slice-eventmanager-debugger> tag so nothing clashes with app styles.
+    Every --si-* token reads the matching framework theme variable from
+    :root, falling back to the original hardcoded value if absent. */
 slice-eventmanager-debugger {
-   --si-accent: var(--primary-color, #6ee7ff);
-   --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
-   --si-surface: rgba(17, 19, 28, 0.86);
-   --si-raised: rgba(255, 255, 255, 0.035);
-   --si-raised-2: rgba(255, 255, 255, 0.06);
-   --si-border: rgba(255, 255, 255, 0.09);
-   --si-text: #e8eaf2;
-   --si-dim: #888fa6;
-   --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
-}
+    --si-accent: var(--primary-color, #6ee7ff);
+    --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
+    --si-surface: var(--primary-background-color, rgba(17, 19, 28, 0.86));
+    --si-raised: var(--secondary-background-color, rgba(255, 255, 255, 0.035));
+    --si-raised-2: var(--tertiary-background-color, rgba(255, 255, 255, 0.06));
+    --si-border: var(--medium-color, rgba(255, 255, 255, 0.09));
+    --si-text: var(--font-primary-color, #e8eaf2);
+    --si-dim: var(--font-secondary-color, #888fa6);
+    --si-danger: var(--danger-color, #ff6b6b);
+    --si-success: var(--success-color, #46d39a);
+    --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+ }
 
 slice-eventmanager-debugger #events-debugger {
    position: fixed;
@@ -311,6 +415,31 @@ slice-eventmanager-debugger .btn:hover {
 slice-eventmanager-debugger .btn:active { transform: scale(0.92); }
 slice-eventmanager-debugger #events-refresh:hover { color: var(--si-accent); }
 
+slice-eventmanager-debugger .events-tabs {
+   display: flex;
+   gap: 0;
+   padding: 0 12px;
+   border-bottom: 1px solid var(--si-border);
+   background: var(--si-raised);
+}
+slice-eventmanager-debugger .tab-btn {
+   all: unset;
+   cursor: pointer;
+   font-size: 10px;
+   font-weight: 600;
+   letter-spacing: 0.06em;
+   text-transform: uppercase;
+   padding: 7px 12px;
+   color: var(--si-dim);
+   border-bottom: 2px solid transparent;
+   transition: color 0.15s ease, border-color 0.15s ease;
+}
+slice-eventmanager-debugger .tab-btn:hover { color: var(--si-text); }
+slice-eventmanager-debugger .tab-btn.active {
+   color: var(--si-accent);
+   border-bottom-color: var(--si-accent);
+}
+
 slice-eventmanager-debugger .events-toolbar {
    display: flex;
    gap: 10px;
@@ -397,6 +526,21 @@ slice-eventmanager-debugger .event-name {
    white-space: nowrap;
 }
 
+slice-eventmanager-debugger .event-metrics {
+   display: flex;
+   align-items: center;
+   gap: 6px;
+}
+slice-eventmanager-debugger .emit-count {
+   font-weight: 600;
+   font-size: 10px;
+   color: var(--si-success);
+   background: rgba(70, 211, 154, 0.12);
+   border: 1px solid rgba(70, 211, 154, 0.25);
+   padding: 1px 6px;
+   border-radius: 999px;
+   white-space: nowrap;
+}
 slice-eventmanager-debugger .event-count {
    font-weight: 600;
    font-size: 11px;
@@ -408,6 +552,33 @@ slice-eventmanager-debugger .event-count {
    min-width: 22px;
    text-align: center;
 }
+slice-eventmanager-debugger .history-row {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   gap: 10px;
+   padding: 6px 11px;
+   background: var(--si-raised);
+   border-radius: 7px;
+   border: 1px solid var(--si-border);
+   border-left: 2px solid transparent;
+   transition: border-color 0.15s ease;
+}
+slice-eventmanager-debugger .history-row:hover { border-left-color: var(--si-accent); }
+slice-eventmanager-debugger .history-event {
+   font-family: var(--si-mono);
+   font-size: 11.5px;
+   color: var(--si-text);
+   overflow: hidden;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+}
+slice-eventmanager-debugger .history-time {
+   font-size: 10px;
+   color: var(--si-dim);
+   white-space: nowrap;
+   flex-shrink: 0;
+}
 
 slice-eventmanager-debugger .subscriber-list {
    margin-top: 9px;

package/Slice/Components/Structural/Logger/LogViewer/LogViewer.js

@@ -0,0 +1,541 @@
+const LV_LOG_TYPES = ['error', 'warn', 'info', 'debug'];
+
+const LV_BADGE_LABEL = { error: 'ERR', warn: 'WRN', info: 'INF', debug: 'DBG' };
+
+function pad2(n) {
+  return String(n).padStart(2, '0');
+}
+
+function formatTime(d) {
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+
+function escapeHtml(str) {
+  if (!str) return '';
+  return String(str).replace(/[&<>"']/g, function (m) {
+    if (m === '&') return '&amp;';
+    if (m === '<') return '&lt;';
+    if (m === '>') return '&gt;';
+    if (m === '"') return '&quot;';
+    return '&#39;';
+  });
+}
+
+export default class LogViewer extends HTMLElement {
+  constructor() {
+    super();
+
+    slice.stylesManager.registerComponentStyles('LogViewer', productionOnlyCSS());
+    this.innerHTML = productionOnlyHtml();
+
+    this.$header = this.querySelector('.lv__header');
+    this.$body = this.querySelector('[data-body]');
+    this.$count = this.querySelector('[data-count]');
+
+    this._isOpen = false;
+    this._logCount = 0;
+    this._filters = new Set();
+    this._dragState = null;
+    this._logHandler = null;
+  }
+
+  init() {
+    this._attachDrag();
+    this._attachFilterClicks();
+    this._attachClear();
+    this._attachMinimize();
+    this._attachBodyClick();
+    this._render();
+    this._subscribeLogger();
+  }
+
+  toggle() {
+    this._isOpen = !this._isOpen;
+    this.style.display = this._isOpen ? '' : 'none';
+    if (this._isOpen) {
+      this._subscribeLogger();
+      this._render();
+    } else {
+      this._unsubscribeLogger();
+    }
+    return this._isOpen;
+  }
+
+  _detach() {
+    this._unsubscribeLogger();
+    if (this._dragCleanup) this._dragCleanup();
+  }
+
+  /* -- drag -- */
+  _attachDrag() {
+    const header = this.$header;
+    if (!header) return;
+
+    const onDown = (e) => {
+      if (e.target.closest('button')) return;
+      this._dragState = {
+        startX: e.clientX,
+        startY: e.clientY,
+        origLeft: this.offsetLeft,
+        origTop: this.offsetTop,
+        origRight: this.style.right,
+        origBottom: this.style.bottom
+      };
+      this.style.right = 'auto';
+      this.style.bottom = 'auto';
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    };
+
+    const onMove = (e) => {
+      if (!this._dragState) return;
+      const dx = e.clientX - this._dragState.startX;
+      const dy = e.clientY - this._dragState.startY;
+      this.style.left = (this._dragState.origLeft + dx) + 'px';
+      this.style.top = (this._dragState.origTop + dy) + 'px';
+    };
+
+    const onUp = () => {
+      this._dragState = null;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+
+    header.addEventListener('mousedown', onDown);
+    this._dragCleanup = () => {
+      header.removeEventListener('mousedown', onDown);
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+  }
+
+  /* -- filter buttons -- */
+  _attachFilterClicks() {
+    const btns = this.querySelectorAll('.lv__filter');
+    for (const btn of btns) {
+      btn.addEventListener('click', () => {
+        const type = btn.dataset.filter;
+        if (btn.hasAttribute('data-active')) {
+          btn.removeAttribute('data-active');
+          this._filters.delete(type);
+        } else {
+          btn.setAttribute('data-active', '');
+          this._filters.add(type);
+        }
+        this._render();
+      });
+    }
+  }
+
+  /* -- clear -- */
+  _attachClear() {
+    const btn = this.querySelector('.lv__clear');
+    if (!btn) return;
+    btn.addEventListener('click', () => {
+      if (slice.logger) slice.logger.logs = [];
+      this._logCount = 0;
+      this._render();
+    });
+  }
+
+  /* -- minimize -- */
+  _attachMinimize() {
+    const btn = this.querySelector('.lv__close');
+    if (!btn) return;
+    btn.addEventListener('click', () => {
+      if (this.hasAttribute('data-minimized')) {
+        this.removeAttribute('data-minimized');
+        btn.textContent = '\u00d7';
+      } else {
+        this.setAttribute('data-minimized', '');
+        btn.textContent = '\u25a1';
+      }
+    });
+  }
+
+  /* -- expand error detail on click -- */
+  _attachBodyClick() {
+    if (!this.$body) return;
+    this.$body.addEventListener('click', (e) => {
+      const entry = e.target.closest('.lv__entry');
+      if (!entry) return;
+      const hasErr = entry.querySelector('.lv__entry-error');
+      if (!hasErr) return;
+      entry.toggleAttribute('data-expanded');
+    });
+  }
+
+  /* -- real-time subscription via logger.onLog -- */
+  _subscribeLogger() {
+    const logger = slice.logger;
+    if (!logger || typeof logger.onLog !== 'function') return;
+    this._logHandler = logger.onLog(() => {
+      this._render();
+    });
+  }
+
+  _unsubscribeLogger() {
+    const logger = slice.logger;
+    if (!logger || typeof logger.offLog !== 'function') return;
+    if (this._logHandler) {
+      logger.offLog(this._logHandler);
+      this._logHandler = null;
+    }
+  }
+
+  /* -- render -- */
+  _render() {
+    const logger = slice.logger;
+    if (!logger || !logger.logs) return;
+    const logs = logger.logs;
+    this._logCount = logs.length;
+
+    const filters = this._filters;
+    const hasFilters = filters.size > 0;
+
+    if (this.$count) {
+      this.$count.textContent = logs.length;
+    }
+
+    if (!this.$body) return;
+
+    if (logs.length === 0) {
+      this.$body.innerHTML = '<div class="lv__empty"><span class="lv__empty-icon">&#128225;</span><span>No logs yet</span></div>';
+      return;
+    }
+
+    const filtered = hasFilters ? logs.filter((log) => filters.has(log.logType)) : logs;
+    const reversed = [...filtered].reverse();
+
+    let html = '';
+    for (const log of reversed) {
+      const type = log.logType || 'info';
+      const ts = formatTime(log.timestamp instanceof Date ? log.timestamp : new Date(log.timestamp));
+      const badge = LV_BADGE_LABEL[type] || 'INF';
+      const component = escapeHtml(log.componentSliceId || '');
+      const msg = escapeHtml(log.message || '');
+
+      let errHtml = '';
+      if (log.error) {
+        const stack = log.error.stack || String(log.error);
+        errHtml = `<div class="lv__entry-error">${escapeHtml(stack)}</div>`;
+      }
+
+      html += `<div class="lv__entry lv__entry--${type}">
+        <span class="lv__entry-time">${ts}</span>
+        <span class="lv__entry-badge">${badge}</span>
+        <div class="lv__entry-body">
+          <div class="lv__entry-component">${component}</div>
+          <div class="lv__entry-message">${msg}</div>
+          ${errHtml}
+        </div>
+      </div>`;
+    }
+
+    this.$body.innerHTML = html;
+    if (this.$body.scrollTop < 20) {
+      this.$body.scrollTop = 0;
+    }
+  }
+}
+
+customElements.define('slice-log-viewer', LogViewer);
+
+function productionOnlyCSS() {
+  return `/* ── LogViewer (Structural) ── */
+slice-log-viewer {
+  --si-accent: var(--primary-color, #6ee7ff);
+  --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
+  --si-surface: var(--primary-background-color, #1e1e2e);
+  --si-raised: var(--secondary-background-color, rgba(255, 255, 255, 0.035));
+  --si-raised-2: var(--tertiary-background-color, #2a2a3e);
+  --si-border: var(--medium-color, #555);
+  --si-text: var(--font-primary-color, #cdd6f4);
+  --si-dim: var(--font-secondary-color, #a6adc8);
+  --si-danger: var(--danger-color, #f38ba8);
+  --si-warning: var(--warning-color, #f9e2af);
+  --si-info: var(--secondary-color, #89dceb);
+  --si-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  position: fixed;
+  z-index: 2147483647;
+  bottom: 24px;
+  right: 24px;
+  width: 520px;
+  max-width: calc(100vw - 48px);
+  height: 380px;
+  max-height: calc(100vh - 48px);
+  display: block;
+  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  border: 1px solid color-mix(in srgb, var(--si-border, #555) 60%, transparent);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--si-surface, #1e1e2e) 97%, #000);
+  box-shadow: 0 12px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08);
+  overflow: hidden;
+  user-select: none;
+  resize: both;
+  min-width: 280px;
+  min-height: 200px;
+  transition: opacity .18s ease, transform .18s ease;
+}
+
+slice-log-viewer[data-minimized] {
+  height: auto !important;
+  resize: none;
+  min-height: 0;
+}
+
+slice-log-viewer[data-minimized] .lv__body {
+  display: none;
+}
+
+.lv__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px 8px 14px;
+  background: color-mix(in srgb, var(--si-raised-2, #2a2a3e) 80%, #000);
+  border-bottom: 1px solid color-mix(in srgb, var(--si-border, #555) 40%, transparent);
+  cursor: grab;
+  position: relative;
+  z-index: 1;
+}
+
+.lv__header:active { cursor: grabbing; }
+
+.lv__header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.lv__title {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: .02em;
+  color: var(--si-text, #cdd6f4);
+  white-space: nowrap;
+}
+
+.lv__count {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--si-border, #555) 40%, transparent);
+  color: var(--si-dim, #a6adc8);
+  font-variant-numeric: tabular-nums;
+}
+
+.lv__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.lv__filter,
+.lv__clear,
+.lv__close {
+  all: unset;
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 7px;
+  border-radius: 6px;
+  color: var(--si-dim, #a6adc8);
+  background: color-mix(in srgb, var(--si-border, #555) 25%, transparent);
+  transition: background .12s ease, color .12s ease;
+  font-family: inherit;
+  line-height: 1.4;
+}
+
+.lv__filter:hover,
+.lv__clear:hover,
+.lv__close:hover {
+  background: color-mix(in srgb, var(--si-border, #555) 45%, transparent);
+  color: var(--si-text, #cdd6f4);
+}
+
+.lv__filter[data-active] { color: var(--si-text, #fff); }
+
+.lv__filter[data-active][data-filter="error"] {
+  background: var(--si-danger, #f38ba8);
+  color: var(--danger-contrast, #1e1e2e);
+}
+
+.lv__filter[data-active][data-filter="warn"] {
+  background: var(--si-warning, #f9e2af);
+  color: var(--warning-contrast, #1e1e2e);
+}
+
+.lv__filter[data-active][data-filter="info"] {
+  background: var(--si-info, #89dceb);
+  color: var(--secondary-color-contrast, #1e1e2e);
+}
+
+.lv__filter[data-active][data-filter="debug"] {
+  background: var(--si-dim, #a6adc8);
+  color: var(--si-text, #1e1e2e);
+}
+
+.lv__clear { margin-left: 2px; }
+
+.lv__close {
+  font-size: 16px;
+  line-height: 1;
+  padding: 3px 8px 4px;
+}
+
+.lv__body {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - 38px);
+  padding: 4px 0;
+  cursor: auto;
+}
+
+.lv__body::-webkit-scrollbar { width: 5px; }
+.lv__body::-webkit-scrollbar-track { background: transparent; }
+.lv__body::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--si-border, #555) 40%, transparent);
+  border-radius: 3px;
+}
+
+.lv__entry {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 5px 14px;
+  border-bottom: 1px solid color-mix(in srgb, var(--si-border, #555) 12%, transparent);
+  transition: background .1s ease;
+  cursor: pointer;
+}
+
+.lv__entry:hover {
+  background: color-mix(in srgb, var(--si-border, #555) 8%, transparent);
+}
+
+.lv__entry:last-child { border-bottom: none; }
+
+.lv__entry-time {
+  font-size: 10px;
+  color: color-mix(in srgb, var(--si-dim, #a6adc8) 55%, transparent);
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+  margin-top: 1px;
+}
+
+.lv__entry-badge {
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.lv__entry--error .lv__entry-badge {
+  background: var(--si-danger, #f38ba8);
+  color: var(--danger-contrast, #1e1e2e);
+}
+
+.lv__entry--warn .lv__entry-badge {
+  background: var(--si-warning, #f9e2af);
+  color: var(--warning-contrast, #1e1e2e);
+}
+
+.lv__entry--info .lv__entry-badge {
+  background: var(--si-info, #89dceb);
+  color: var(--secondary-color-contrast, #1e1e2e);
+}
+
+.lv__entry--debug .lv__entry-badge {
+  background: color-mix(in srgb, var(--si-border, #555) 40%, transparent);
+  color: var(--si-dim, #a6adc8);
+}
+
+.lv__entry-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.lv__entry-component {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--si-text, #cdd6f4);
+  margin-bottom: 1px;
+}
+
+.lv__entry-message {
+  font-size: 11px;
+  color: var(--si-dim, #a6adc8);
+  word-break: break-word;
+  line-height: 1.45;
+}
+
+.lv__entry--error .lv__entry-message { color: var(--si-danger, #f38ba8); }
+.lv__entry--warn .lv__entry-message { color: var(--si-warning, #f9e2af); }
+
+.lv__entry-error {
+  display: none;
+  margin-top: 5px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--si-surface, #1e1e2e) 60%, #000);
+  font-size: 10px;
+  color: color-mix(in srgb, var(--si-dim, #a6adc8) 80%, transparent);
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: inherit;
+  line-height: 1.5;
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.lv__entry[data-expanded] .lv__entry-error { display: block; }
+
+.lv__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 6px;
+  color: color-mix(in srgb, var(--si-dim, #a6adc8) 40%, transparent);
+  font-size: 12px;
+}
+
+.lv__empty-icon {
+  font-size: 24px;
+  opacity: .35;
+  line-height: 1;
+}
+`;
+}
+
+function productionOnlyHtml() {
+  return `<div class="lv">
+  <div class="lv__header">
+    <div class="lv__header-left">
+      <span class="lv__title">Log Console</span>
+      <span class="lv__count" data-count></span>
+    </div>
+    <div class="lv__header-actions">
+      <button class="lv__filter" data-filter="error" title="Show errors only">Error</button>
+      <button class="lv__filter" data-filter="warn" title="Show warnings only">Warn</button>
+      <button class="lv__filter" data-filter="info" title="Show info only">Info</button>
+      <button class="lv__filter" data-filter="debug" title="Show debug only">Debug</button>
+      <button class="lv__clear" title="Clear all logs">Clear</button>
+      <button class="lv__close" title="Close">&times;</button>
+    </div>
+  </div>
+  <div class="lv__body" data-body></div>
+</div>`;
+}

package/Slice/Components/Structural/Logger/Logger.js

@@ -10,6 +10,7 @@ const logTypes = {
 export default class Logger {
    constructor() {
       this.logs = [];
+      this._logListeners = new Set();
       this.logEnabled = slice.loggerConfig.enabled;
       this.showLogsConfig = slice.loggerConfig.showLogs;
 
@@ -92,6 +93,9 @@ export default class Logger {
       const log = new Log(logType, componentCategory, componentSliceId, message, error);
       this.logs.push(log);
       this.showLog(log);
+      for (const listener of this._logListeners) {
+         try { listener(log); } catch (_) { }
+      }
    }
 
    /**
@@ -155,6 +159,27 @@ export default class Logger {
       this.info(componentSliceId, message, error);
    }
 
+   /**
+    * Subscribe to new log entries in real time.
+    * @param {Function} callback — receives the Log instance
+    * @returns {Function} the same callback (for passing to offLog)
+    */
+   onLog(callback) {
+      if (typeof callback === 'function') {
+         this._logListeners.add(callback);
+      }
+      return callback;
+   }
+
+   /**
+    * Unsubscribe a previously registered listener.
+    * @param {Function} callback
+    * @returns {void}
+    */
+   offLog(callback) {
+      this._logListeners.delete(callback);
+   }
+
    /**
     * Get all logs.
     * @returns {Array}

package/Slice/Slice.js

@@ -564,9 +564,23 @@ async function init() {
       window.slice.logger.logError('Slice', 'ContextManager disabled');
    }
 
-    if (sliceConfig.loading.enabled) {
-      const loading = await window.slice.build('Loading', {});
-      window.slice.loading = loading;
+      if (sliceConfig.logger?.ui?.enabled) {
+         try {
+            const LogViewerModule = window.slice.frameworkClasses?.LogViewer
+               || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Logger/LogViewer/LogViewer.js`);
+            const logViewer = new LogViewerModule();
+            window.slice.logViewer = logViewer;
+            logViewer.style.display = 'none';
+            document.body.appendChild(logViewer);
+            if (typeof logViewer.init === 'function') logViewer.init();
+         } catch (e) {
+            window.slice.logger?.warn?.('Slice', 'Could not load LogViewer component', e);
+         }
+      }
+
+     if (sliceConfig.loading.enabled) {
+       const loading = await window.slice.build('Loading', {});
+       window.slice.loading = loading;
       if (typeof loading?.start === 'function') {
          loading.start();
       }
@@ -575,7 +589,7 @@ async function init() {
    const stylesInitPromise = window.slice.stylesManager.init();
    const routesModulePromise = import(slice.paths.routesFile);
 
-   if (sliceConfig.events?.ui?.shortcut || sliceConfig.context?.ui?.shortcut) {
+   if (sliceConfig.events?.ui?.shortcut || sliceConfig.context?.ui?.shortcut || sliceConfig.logger?.ui?.shortcut) {
       const normalize = (value) => (typeof value === 'string' ? value.toLowerCase() : '');
       const toKey = (event) => {
          const parts = [];
@@ -593,6 +607,7 @@ async function init() {
       const handlers = {
          [normalize(sliceConfig.events?.ui?.shortcut)]: () => window.slice.eventsDebugger?.toggle?.(),
          [normalize(sliceConfig.context?.ui?.shortcut)]: () => window.slice.contextDebugger?.toggle?.(),
+         [normalize(sliceConfig.logger?.ui?.shortcut)]: () => window.slice.logViewer?.toggle?.(),
       };
 
       document.addEventListener('keydown', (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "3.3.8",
+  "version": "3.4.0",
   "description": "",
   "engines": {
     "node": ">=20"