slicejs-web-framework 4.0.2 → 4.1.1

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

@@ -1,662 +1,662 @@
-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.$componentSelect = this.querySelector('[data-component-select]');
-    this.$queryInput = this.querySelector('[data-query-input]');
-
-    this._isOpen = false;
-    this._logCount = 0;
-    this._filters = new Set();
-    this._componentFilter = '';
-    this._queryFilter = '';
-    this._dragState = null;
-    this._logHandler = null;
-  }
-
-  init() {
-    this._attachDrag();
-    this._attachFilterClicks();
-    this._attachClear();
-    this._attachMinimize();
-    this._attachBodyClick();
-    this._attachComponentSelect();
-    this._attachQueryInput();
-    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');
-    });
-  }
-
-  /* -- component select -- */
-  _attachComponentSelect() {
-    if (!this.$componentSelect) return;
-    this.$componentSelect.addEventListener('change', () => {
-      this._componentFilter = this.$componentSelect.value;
-      this._render();
-    });
-  }
-
-  /* -- query text input (debounced) -- */
-  _attachQueryInput() {
-    if (!this.$queryInput) return;
-    let timer;
-    this.$queryInput.addEventListener('input', () => {
-      clearTimeout(timer);
-      timer = setTimeout(() => {
-        this._queryFilter = this.$queryInput.value.trim().toLowerCase();
-        this._render();
-      }, 150);
-    });
-  }
-
-  /* -- 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;
-    const hasComponent = this._componentFilter !== '';
-    const hasQuery = this._queryFilter !== '';
-
-    if (this.$count) {
-      this.$count.textContent = logs.length;
-    }
-
-    /* refresh component select options */
-    if (this.$componentSelect) {
-      const currentVal = this.$componentSelect.value;
-      const components = [...new Set(logs.map(l => l.componentSliceId).filter(Boolean))].sort();
-      let opts = '<option value="">All components</option>';
-      for (const c of components) {
-        const sel = c === currentVal ? ' selected' : '';
-        opts += `<option value="${escapeHtml(c)}"${sel}>${escapeHtml(c)}</option>`;
-      }
-      this.$componentSelect.innerHTML = opts;
-    }
-
-    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;
-    }
-
-    let filtered = logs;
-    if (hasFilters) filtered = filtered.filter((log) => filters.has(log.logType));
-    if (hasComponent) filtered = filtered.filter((log) => log.componentSliceId === this._componentFilter);
-    if (hasQuery) filtered = filtered.filter((log) => (log.message || '').toLowerCase().includes(this._queryFilter));
-    const reversed = [...filtered].reverse();
-
-    if (reversed.length === 0) {
-      this.$body.innerHTML = '<div class="lv__empty"><span class="lv__empty-icon">&#128269;</span><span>No matches</span></div>';
-      return;
-    }
-
-    const prevScrollTop = this.$body.scrollTop;
-
-    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;
-    /* preserve scroll — if user was at top (newest), stay at top */
-    this.$body.scrollTop = prevScrollTop === 0 ? 0 : Math.min(prevScrollTop, this.$body.scrollHeight);
-  }
-}
-
-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__toolbar,
-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__toolbar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 10px;
-  background: color-mix(in srgb, var(--si-surface, #1e1e2e) 98%, #000);
-  border-bottom: 1px solid color-mix(in srgb, var(--si-border, #555) 18%, transparent);
-}
-
-.lv__component-select {
-  all: unset;
-  flex: 0 0 auto;
-  max-width: 160px;
-  font-size: 10px;
-  font-weight: 600;
-  font-family: inherit;
-  color: var(--si-text, #cdd6f4);
-  background: color-mix(in srgb, var(--si-border, #555) 20%, transparent);
-  padding: 3px 20px 3px 7px;
-  border-radius: 6px;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23a6adc8' d='M2 2.5l2 2 2-2'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 6px center;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-.lv__component-select:hover {
-  background-color: color-mix(in srgb, var(--si-border, #555) 35%, transparent);
-}
-
-.lv__component-select option {
-  background: var(--si-surface, #1e1e2e);
-  color: var(--si-text, #cdd6f4);
-  font-size: 10px;
-}
-
-.lv__query-input {
-  all: unset;
-  flex: 1;
-  min-width: 0;
-  font-size: 10px;
-  font-family: inherit;
-  color: var(--si-text, #cdd6f4);
-  background: color-mix(in srgb, var(--si-border, #555) 15%, transparent);
-  padding: 3px 7px;
-  border-radius: 6px;
-  transition: background .12s ease;
-}
-
-.lv__query-input::placeholder {
-  color: color-mix(in srgb, var(--si-dim, #a6adc8) 45%, transparent);
-}
-
-.lv__query-input:focus {
-  background: color-mix(in srgb, var(--si-border, #555) 25%, transparent);
-  outline: 1px solid color-mix(in srgb, var(--si-accent, #6ee7ff) 30%, transparent);
-}
-
-.lv__body {
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: calc(100% - 76px);
-  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__toolbar">
-    <select class="lv__component-select" data-component-select>
-      <option value="">All components</option>
-    </select>
-    <input class="lv__query-input" data-query-input type="text" placeholder="Search logs..." />
-  </div>
-  <div class="lv__body" data-body></div>
-</div>`;
-}
+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.$componentSelect = this.querySelector('[data-component-select]');
+    this.$queryInput = this.querySelector('[data-query-input]');
+
+    this._isOpen = false;
+    this._logCount = 0;
+    this._filters = new Set();
+    this._componentFilter = '';
+    this._queryFilter = '';
+    this._dragState = null;
+    this._logHandler = null;
+  }
+
+  init() {
+    this._attachDrag();
+    this._attachFilterClicks();
+    this._attachClear();
+    this._attachMinimize();
+    this._attachBodyClick();
+    this._attachComponentSelect();
+    this._attachQueryInput();
+    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');
+    });
+  }
+
+  /* -- component select -- */
+  _attachComponentSelect() {
+    if (!this.$componentSelect) return;
+    this.$componentSelect.addEventListener('change', () => {
+      this._componentFilter = this.$componentSelect.value;
+      this._render();
+    });
+  }
+
+  /* -- query text input (debounced) -- */
+  _attachQueryInput() {
+    if (!this.$queryInput) return;
+    let timer;
+    this.$queryInput.addEventListener('input', () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        this._queryFilter = this.$queryInput.value.trim().toLowerCase();
+        this._render();
+      }, 150);
+    });
+  }
+
+  /* -- 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;
+    const hasComponent = this._componentFilter !== '';
+    const hasQuery = this._queryFilter !== '';
+
+    if (this.$count) {
+      this.$count.textContent = logs.length;
+    }
+
+    /* refresh component select options */
+    if (this.$componentSelect) {
+      const currentVal = this.$componentSelect.value;
+      const components = [...new Set(logs.map(l => l.componentSliceId).filter(Boolean))].sort();
+      let opts = '<option value="">All components</option>';
+      for (const c of components) {
+        const sel = c === currentVal ? ' selected' : '';
+        opts += `<option value="${escapeHtml(c)}"${sel}>${escapeHtml(c)}</option>`;
+      }
+      this.$componentSelect.innerHTML = opts;
+    }
+
+    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;
+    }
+
+    let filtered = logs;
+    if (hasFilters) filtered = filtered.filter((log) => filters.has(log.logType));
+    if (hasComponent) filtered = filtered.filter((log) => log.componentSliceId === this._componentFilter);
+    if (hasQuery) filtered = filtered.filter((log) => (log.message || '').toLowerCase().includes(this._queryFilter));
+    const reversed = [...filtered].reverse();
+
+    if (reversed.length === 0) {
+      this.$body.innerHTML = '<div class="lv__empty"><span class="lv__empty-icon">&#128269;</span><span>No matches</span></div>';
+      return;
+    }
+
+    const prevScrollTop = this.$body.scrollTop;
+
+    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;
+    /* preserve scroll — if user was at top (newest), stay at top */
+    this.$body.scrollTop = prevScrollTop === 0 ? 0 : Math.min(prevScrollTop, this.$body.scrollHeight);
+  }
+}
+
+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__toolbar,
+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__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  background: color-mix(in srgb, var(--si-surface, #1e1e2e) 98%, #000);
+  border-bottom: 1px solid color-mix(in srgb, var(--si-border, #555) 18%, transparent);
+}
+
+.lv__component-select {
+  all: unset;
+  flex: 0 0 auto;
+  max-width: 160px;
+  font-size: 10px;
+  font-weight: 600;
+  font-family: inherit;
+  color: var(--si-text, #cdd6f4);
+  background: color-mix(in srgb, var(--si-border, #555) 20%, transparent);
+  padding: 3px 20px 3px 7px;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23a6adc8' d='M2 2.5l2 2 2-2'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.lv__component-select:hover {
+  background-color: color-mix(in srgb, var(--si-border, #555) 35%, transparent);
+}
+
+.lv__component-select option {
+  background: var(--si-surface, #1e1e2e);
+  color: var(--si-text, #cdd6f4);
+  font-size: 10px;
+}
+
+.lv__query-input {
+  all: unset;
+  flex: 1;
+  min-width: 0;
+  font-size: 10px;
+  font-family: inherit;
+  color: var(--si-text, #cdd6f4);
+  background: color-mix(in srgb, var(--si-border, #555) 15%, transparent);
+  padding: 3px 7px;
+  border-radius: 6px;
+  transition: background .12s ease;
+}
+
+.lv__query-input::placeholder {
+  color: color-mix(in srgb, var(--si-dim, #a6adc8) 45%, transparent);
+}
+
+.lv__query-input:focus {
+  background: color-mix(in srgb, var(--si-border, #555) 25%, transparent);
+  outline: 1px solid color-mix(in srgb, var(--si-accent, #6ee7ff) 30%, transparent);
+}
+
+.lv__body {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - 76px);
+  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__toolbar">
+    <select class="lv__component-select" data-component-select>
+      <option value="">All components</option>
+    </select>
+    <input class="lv__query-input" data-query-input type="text" placeholder="Search logs..." />
+  </div>
+  <div class="lv__body" data-body></div>
+</div>`;
+}