slicejs-web-framework 3.4.4 → 3.5.1

package/Slice/Components/Structural/LeakInspector/LeakInspector.js

@@ -0,0 +1,296 @@
+/**
+ * LeakInspector — dev-only memory-leak panel.
+ *
+ * Surfaces components that stay registered in `slice.controller.activeComponents`
+ * while detached from the live DOM (built then cleared via innerHTML=''/remove()
+ * without destroyComponent). Intentionally-cached components (Route/MultiRoute/
+ * Router-managed) are excluded by the Controller's findOrphans() criteria.
+ *
+ * Mirrors EventManagerDebugger: draggable fixed panel, conditional auto-refresh
+ * that only runs while open. Read-only except for the per-orphan Destroy action.
+ */
+export default class LeakInspector extends HTMLElement {
+   constructor() {
+      super();
+      this.isOpen = false;
+      this._autoRefreshTimer = null;
+   }
+
+   async init() {
+      this.innerHTML = this.renderTemplate();
+      slice.stylesManager.registerComponentStyles('LeakInspector', this.renderStyles());
+      this.cacheElements();
+      this.bindEvents();
+      this.makeDraggable();
+      this.render();
+   }
+
+   toggle() {
+      this.isOpen ? this.close() : this.open();
+   }
+
+   open() {
+      this.isOpen = true;
+      this.container.classList.add('active');
+      this._startAutoRefresh();
+      this.render();
+   }
+
+   close() {
+      this.isOpen = false;
+      this.container.classList.remove('active');
+      this._stopAutoRefresh();
+   }
+
+   _startAutoRefresh() {
+      this._stopAutoRefresh();
+      this._autoRefreshTimer = setInterval(() => {
+         if (!this.isOpen) return;
+         this.render();
+      }, 1500);
+   }
+
+   _stopAutoRefresh() {
+      if (this._autoRefreshTimer) {
+         clearInterval(this._autoRefreshTimer);
+         this._autoRefreshTimer = null;
+      }
+   }
+
+   cacheElements() {
+      this.container = this.querySelector('#leak-inspector');
+      this.header = this.querySelector('.leak-header');
+      this.list = this.querySelector('#leak-list');
+      this.countLabel = this.querySelector('#leak-count');
+      this.sizeLabel = this.querySelector('#leak-size');
+      this.growthLabel = this.querySelector('#leak-growth');
+      this.refreshButton = this.querySelector('#leak-refresh');
+      this.closeButton = this.querySelector('#leak-close');
+   }
+
+   bindEvents() {
+      this.refreshButton.addEventListener('click', () => this.render());
+      this.closeButton.addEventListener('click', () => this.close());
+      // Per-orphan Destroy (event delegation).
+      this.list.addEventListener('click', (event) => {
+         const button = event.target.closest('[data-destroy]');
+         if (!button) return;
+         const sliceId = button.getAttribute('data-destroy');
+         const component = slice.controller.activeComponents.get(sliceId);
+         if (component) {
+            slice.controller.destroyComponent(component);
+            this.render();
+         }
+      });
+   }
+
+   render() {
+      const controller = slice?.controller;
+      if (!controller || !(controller.activeComponents instanceof Map)) {
+         this.list.textContent = 'Controller not available.';
+         return;
+      }
+
+      controller.sampleComponentGrowth();
+      const orphans = controller.findOrphans();
+
+      this.sizeLabel.textContent = String(controller.activeComponents.size);
+      this.countLabel.textContent = String(orphans.length);
+
+      const growing = controller.isGrowthMonotonic();
+      this.growthLabel.textContent = growing ? 'growing ▲' : 'stable';
+      this.growthLabel.classList.toggle('warn', growing);
+
+      if (orphans.length === 0) {
+         this.list.innerHTML = '<div class="empty">No leaks detected ✓</div>';
+         return;
+      }
+
+      this.list.innerHTML = orphans.map((orphan) => {
+         const path = orphan.retainPath.map((p) => this.escapeHtml(p)).join(' ◂ ');
+         return `
+            <details class="leak-row">
+               <summary>
+                  <div class="leak-name">${this.escapeHtml(orphan.name)}</div>
+                  <div class="leak-actions-row">
+                     <span class="leak-id">${this.escapeHtml(orphan.sliceId)}</span>
+                     <button class="leak-destroy" data-destroy="${this.escapeHtml(orphan.sliceId)}" title="Destroy now">destroy</button>
+                  </div>
+               </summary>
+               <div class="leak-detail">
+                  <div class="leak-reason">${this.escapeHtml(orphan.reason)}</div>
+                  <div class="leak-path"><span class="path-key">retains</span> ${path}</div>
+               </div>
+            </details>
+         `;
+      }).join('');
+   }
+
+   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 x = Math.min(Math.max(event.clientX - offset.x, 0), window.innerWidth - rect.width);
+         const y = Math.min(Math.max(event.clientY - offset.y, 0), window.innerHeight - rect.height);
+         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';
+      });
+   }
+
+   escapeHtml(value) {
+      return String(value)
+         .replace(/&/g, '&amp;')
+         .replace(/</g, '&lt;')
+         .replace(/>/g, '&gt;')
+         .replace(/"/g, '&quot;');
+   }
+
+   renderTemplate() {
+      return `
+      <div id="leak-inspector">
+         <div class="leak-header">
+            <div class="brand">
+               <span class="status-dot"></span>
+               <span class="glyph">⚠</span>
+               <span class="title">LEAK INSPECTOR</span>
+            </div>
+            <div class="actions">
+               <button id="leak-refresh" class="btn" title="Refresh" aria-label="Refresh">⟳</button>
+               <button id="leak-close" class="btn" title="Close" aria-label="Close">✕</button>
+            </div>
+         </div>
+         <div class="leak-stats">
+            <div class="stat"><span class="stat-label">orphans</span><span id="leak-count" class="stat-value danger">0</span></div>
+            <div class="stat"><span class="stat-label">active</span><span id="leak-size" class="stat-value">0</span></div>
+            <div class="stat"><span class="stat-label">trend</span><span id="leak-growth" class="stat-value">stable</span></div>
+         </div>
+         <div class="leak-list" id="leak-list"></div>
+      </div>
+      `;
+   }
+
+   renderStyles() {
+      return `
+slice-leak-inspector {
+   --li-accent: var(--danger-color, #ff6b6b);
+   --li-accent-rgb: 255, 107, 107;
+   --li-surface: var(--primary-background-color, rgba(17, 19, 28, 0.86));
+   --li-raised: var(--secondary-background-color, rgba(255, 255, 255, 0.035));
+   --li-raised-2: var(--tertiary-background-color, rgba(255, 255, 255, 0.06));
+   --li-border: var(--medium-color, rgba(255, 255, 255, 0.09));
+   --li-text: var(--font-primary-color, #e8eaf2);
+   --li-dim: var(--font-secondary-color, #888fa6);
+   --li-warn: var(--warning-color, #f5b14c);
+   --li-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+}
+
+slice-leak-inspector #leak-inspector {
+   position: fixed;
+   bottom: 20px;
+   left: 20px;
+   width: min(380px, calc(100vw - 40px));
+   max-height: 64vh;
+   background: var(--li-surface);
+   border: 1px solid var(--li-border);
+   border-radius: 14px;
+   box-shadow: 0 24px 60px -12px rgba(0,0,0,0.55), 0 0 38px -18px rgba(var(--li-accent-rgb), 0.5);
+   -webkit-backdrop-filter: blur(22px) saturate(1.3);
+   backdrop-filter: blur(22px) saturate(1.3);
+   display: none;
+   flex-direction: column;
+   z-index: 10001;
+   overflow: hidden;
+   color: var(--li-text);
+   font-family: var(--li-mono);
+}
+slice-leak-inspector #leak-inspector.active {
+   display: flex;
+   animation: li-in 0.26s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes li-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
+slice-leak-inspector #leak-inspector * { box-sizing: border-box; }
+slice-leak-inspector #leak-inspector::before {
+   content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
+   background: linear-gradient(180deg, var(--li-accent), transparent 70%); opacity: 0.85; pointer-events: none;
+}
+
+slice-leak-inspector .leak-header {
+   display: flex; justify-content: space-between; align-items: center;
+   padding: 12px 14px;
+   background: radial-gradient(120% 140% at 0% 0%, rgba(var(--li-accent-rgb), 0.1), transparent 60%), var(--li-raised);
+   border-bottom: 1px solid var(--li-border); user-select: none;
+}
+slice-leak-inspector .brand { display: flex; align-items: center; gap: 9px; }
+slice-leak-inspector .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--li-accent); animation: li-pulse 2.4s ease-out infinite; }
+@keyframes li-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--li-accent-rgb), 0.55); } 70% { box-shadow: 0 0 0 7px rgba(var(--li-accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--li-accent-rgb), 0); } }
+slice-leak-inspector .glyph { color: var(--li-accent); font-size: 12px; }
+slice-leak-inspector .title { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; color: var(--li-text); }
+slice-leak-inspector .actions { display: flex; gap: 6px; }
+slice-leak-inspector .btn {
+   width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
+   border-radius: 7px; border: 1px solid var(--li-border); background: var(--li-raised);
+   color: var(--li-dim); cursor: pointer; font-size: 13px; line-height: 1;
+   transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+}
+slice-leak-inspector .btn:hover { color: var(--li-text); background: var(--li-raised-2); border-color: rgba(var(--li-accent-rgb), 0.5); }
+slice-leak-inspector .btn:active { transform: scale(0.92); }
+
+slice-leak-inspector .leak-stats {
+   display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--li-border); background: var(--li-raised);
+}
+slice-leak-inspector .stat { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center; padding: 6px 4px; border-radius: 8px; background: rgba(0,0,0,0.18); border: 1px solid var(--li-border); }
+slice-leak-inspector .stat-label { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--li-dim); }
+slice-leak-inspector .stat-value { font-size: 16px; font-weight: 700; color: var(--li-text); }
+slice-leak-inspector .stat-value.danger { color: var(--li-accent); }
+slice-leak-inspector .stat-value.warn { color: var(--li-warn); }
+
+slice-leak-inspector .leak-list { padding: 10px 12px 12px; overflow: auto; display: flex; flex-direction: column; gap: 7px; }
+slice-leak-inspector .leak-list::-webkit-scrollbar { width: 8px; }
+slice-leak-inspector .leak-list::-webkit-scrollbar-thumb { background: var(--li-raised-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
+
+slice-leak-inspector .leak-row { display: block; padding: 9px 11px; background: var(--li-raised); border-radius: 9px; border: 1px solid var(--li-border); border-left: 2px solid var(--li-accent); }
+slice-leak-inspector .leak-row summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
+slice-leak-inspector .leak-row summary::-webkit-details-marker { display: none; }
+slice-leak-inspector .leak-name { font-family: var(--li-mono); font-size: 12px; font-weight: 600; color: var(--li-text); }
+slice-leak-inspector .leak-actions-row { display: flex; align-items: center; gap: 8px; }
+slice-leak-inspector .leak-id { font-size: 10px; color: var(--li-dim); }
+slice-leak-inspector .leak-destroy {
+   all: unset; cursor: pointer; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
+   padding: 2px 8px; border-radius: 999px; color: var(--li-accent);
+   background: rgba(var(--li-accent-rgb), 0.12); border: 1px solid rgba(var(--li-accent-rgb), 0.3);
+}
+slice-leak-inspector .leak-destroy:hover { background: rgba(var(--li-accent-rgb), 0.22); }
+slice-leak-inspector .leak-detail { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--li-border); display: flex; flex-direction: column; gap: 6px; }
+slice-leak-inspector .leak-reason { font-size: 11px; color: var(--li-dim); }
+slice-leak-inspector .leak-path { font-family: var(--li-mono); font-size: 10.5px; color: var(--li-text); word-break: break-word; }
+slice-leak-inspector .path-key { color: var(--li-dim); margin-right: 6px; }
+slice-leak-inspector .empty { color: var(--li-dim); font-size: 11px; letter-spacing: 0.04em; text-align: center; padding: 22px 0; }
+
+@media (prefers-reduced-motion: reduce) {
+   slice-leak-inspector #leak-inspector.active { animation: none; }
+   slice-leak-inspector .status-dot { animation: none; }
+}
+      `;
+   }
+}
+
+customElements.define('slice-leak-inspector', LeakInspector);

package/Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js

@@ -101,6 +101,62 @@ export default class ThemeManager {
       if (typeof document !== 'undefined' && document.documentElement) {
          document.documentElement.setAttribute('data-slice-theme', themeName);
       }
+      this._syncThemeColor();
       slice.logger.logInfo('ThemeManager', `Theme ${themeName} applied`);
    }
+
+   /**
+    * Sync <meta name="theme-color"> to the theme's primary background color.
+    * Reads the CSS variable --primary-background-color from computed styles.
+    * @returns {void}
+    */
+   /**
+    * Sync <meta name="theme-color"> and <meta name="color-scheme">
+    * from --primary-background-color (the active theme's body bg).
+    * @returns {void}
+    */
+   _syncThemeColor() {
+      if (typeof document === 'undefined') return;
+      const bg = getComputedStyle(document.documentElement)
+         .getPropertyValue('--primary-background-color').trim();
+      if (!bg) return;
+
+      let meta = document.querySelector('meta[name="theme-color"]');
+      if (!meta) {
+         meta = document.createElement('meta');
+         meta.name = 'theme-color';
+         document.head.appendChild(meta);
+      }
+      meta.content = bg;
+
+      const scheme = this._isLightColor(bg) ? 'light' : 'dark';
+      let cs = document.querySelector('meta[name="color-scheme"]');
+      if (!cs) {
+         cs = document.createElement('meta');
+         cs.name = 'color-scheme';
+         document.head.appendChild(cs);
+      }
+      cs.content = scheme;
+   }
+
+   /**
+    * Rough luminance check for a hex color.
+    * Returns true when the color is perceived as light.
+    * @param {string} color hex (#fff / #282828)
+    * @returns {boolean}
+    */
+   _isLightColor(color) {
+      const hex = color.replace('#', '');
+      let r, g, b;
+      if (hex.length <= 3) {
+         r = parseInt(hex[0] + hex[0], 16);
+         g = parseInt(hex[1] + hex[1], 16);
+         b = parseInt(hex[2] + hex[2], 16);
+      } else {
+         r = parseInt(hex.slice(0, 2), 16);
+         g = parseInt(hex.slice(2, 4), 16);
+         b = parseInt(hex.slice(4, 6), 16);
+      }
+      return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+   }
 }

package/Slice/Slice.js

@@ -541,6 +541,14 @@ async function init() {
        document.body.appendChild(window.slice.contextDebugger);
     }
 
+     if (sliceConfig.debugger?.leakInspector?.enabled && !window.slice.isProduction()) {
+        const LeakInspectorModule = window.slice.frameworkClasses?.LeakInspector
+           || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/LeakInspector/LeakInspector.js`);
+        window.slice.leakInspector = new LeakInspectorModule();
+       await window.slice.leakInspector.init();
+       document.body.appendChild(window.slice.leakInspector);
+    }
+
     if (sliceConfig.events?.enabled) {
        const EventManagerModule = window.slice.frameworkClasses?.EventManager
           || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/EventManager/EventManager.js`);
@@ -554,10 +562,14 @@ async function init() {
          subscribeOnce: () => null,
          unsubscribe: () => false,
          emit: () => {},
+         register: () => window.slice.events,
+         loadGraph: () => window.slice.events,
+         isDeclared: () => false,
          bind: () => ({
             subscribe: () => null,
             subscribeOnce: () => null,
             emit: () => {},
+            register: () => window.slice.events,
          }),
          cleanupComponent: () => 0,
          hasSubscribers: () => false,
@@ -608,7 +620,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 || sliceConfig.logger?.ui?.shortcut) {
+   if (sliceConfig.events?.ui?.shortcut || sliceConfig.context?.ui?.shortcut || sliceConfig.logger?.ui?.shortcut || sliceConfig.debugger?.leakInspector?.shortcut) {
       const normalize = (value) => (typeof value === 'string' ? value.toLowerCase() : '');
       const toKey = (event) => {
          const parts = [];
@@ -627,6 +639,7 @@ async function init() {
          [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?.(),
+         [normalize(sliceConfig.debugger?.leakInspector?.shortcut)]: () => window.slice.leakInspector?.toggle?.(),
       };
 
       document.addEventListener('keydown', (event) => {

package/Slice/tests/event-emitters.test.js

@@ -0,0 +1,79 @@
+// Tests for emitter tracing: who emits each event (bind attribution + dev
+// stack-trace fallback), recorded only while a debugger is "open" (recording).
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+globalThis.slice = {
+   isProduction: () => false,
+   controller: { activeComponents: new Map() },
+   logger: { logError() {}, logInfo() {}, logWarning() {}, info() {}, error() {} },
+};
+
+const { default: EventManager } = await import('../Components/Structural/EventManager/EventManager.js');
+
+test('bound emit is attributed to its component', () => {
+   const em = new EventManager();
+   em.startRecording();
+   const comp = { sliceId: 'card-1', constructor: { name: 'Card' } };
+   em.bind(comp).emit('user:login', { id: 1 });
+
+   const bucket = em.emitters.get('user:login');
+   assert.ok(bucket, 'event has emitters bucket');
+   const entry = bucket.get('card-1');
+   assert.equal(entry.name, 'Card');
+   assert.equal(entry.sliceId, 'card-1');
+   assert.equal(entry.count, 1);
+
+   const hist = em.emitHistory.find((e) => e.eventName === 'user:login');
+   assert.equal(hist.emitter.sliceId, 'card-1', 'history entry carries the emitter');
+});
+
+test('global emit falls back to a dev stack-trace source', () => {
+   const em = new EventManager();
+   em.startRecording();
+   em.emit('router:change');
+
+   const hist = em.emitHistory.find((e) => e.eventName === 'router:change');
+   assert.ok(hist.emitter, 'emitter captured for global emit');
+   assert.ok(hist.emitter.source && hist.emitter.source.includes('.js'), 'source is file:line');
+   assert.ok(!hist.emitter.source.includes('EventManager.js'), 'attributes the caller, not the manager');
+});
+
+test('emitter counts accumulate per distinct source', () => {
+   const em = new EventManager();
+   em.startRecording();
+   em.bind({ sliceId: 'a-1', constructor: { name: 'A' } }).emit('x:y');
+   em.bind({ sliceId: 'a-1', constructor: { name: 'A' } }).emit('x:y');
+   em.bind({ sliceId: 'b-2', constructor: { name: 'B' } }).emit('x:y');
+
+   const bucket = em.emitters.get('x:y');
+   assert.equal(bucket.get('a-1').count, 2);
+   assert.equal(bucket.get('b-2').count, 1);
+});
+
+test('no recording (debugger closed) => no emitter tracking, zero overhead', () => {
+   const em = new EventManager();
+   em.emit('a:b');
+   em.bind({ sliceId: 'z-1', constructor: { name: 'Z' } }).emit('a:b');
+   assert.equal(em.emitters.size, 0);
+   assert.equal(em.emitHistory.length, 0);
+});
+
+test('production: no stack-trace source captured', () => {
+   globalThis.slice.isProduction = () => true;
+   const em = new EventManager();
+   em.startRecording();
+   em.emit('p:q');
+   const hist = em.emitHistory.find((e) => e.eventName === 'p:q');
+   assert.equal(hist.emitter, null, 'no source attribution in production');
+   globalThis.slice.isProduction = () => false;
+});
+
+test('startRecording resets the emitters map', () => {
+   const em = new EventManager();
+   em.startRecording();
+   em.bind({ sliceId: 'a-1', constructor: { name: 'A' } }).emit('x:y');
+   assert.equal(em.emitters.size, 1);
+   em.startRecording();
+   assert.equal(em.emitters.size, 0, 'fresh session clears prior emitters');
+});

package/Slice/tests/event-registry.test.js

@@ -0,0 +1,141 @@
+// Unit tests for the EventManager typed-event registry (register/validate/warn).
+// EventManager only depends on the `slice` global for logging + isProduction +
+// controller.activeComponents, so we stub a minimal one and drive the real class.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+const warnings = [];
+globalThis.slice = {
+   isProduction: () => false,
+   controller: { activeComponents: new Map() },
+   logger: {
+      logError() {},
+      logInfo() {},
+      logWarning(_c, message) { warnings.push(message); },
+      info() {}, error() {}, warn() {},
+   },
+};
+
+const { default: EventManager } = await import('../Components/Structural/EventManager/EventManager.js');
+
+const undeclaredWarns = (name) => warnings.filter((w) => w.includes('Undeclared') && (!name || w.includes(name)));
+
+test('loose mode: with no registry, nothing warns', () => {
+   warnings.length = 0;
+   const em = new EventManager();
+   em.emit('anything:happens');
+   em.subscribe('whatever:event', () => {});
+   assert.equal(undeclaredWarns().length, 0);
+});
+
+test('declared event emits and subscribes without warning', () => {
+   warnings.length = 0;
+   const em = new EventManager();
+   em.register({ 'user:login': { payload: { id: 'number' } } });
+   em.subscribe('user:login', () => {});
+   em.emit('user:login', { id: 1 });
+   assert.equal(undeclaredWarns().length, 0);
+});
+
+test('undeclared event warns exactly once but still delivers', () => {
+   warnings.length = 0;
+   const em = new EventManager();
+   em.register({ 'user:login': { payload: null } });
+
+   let calls = 0;
+   em.subscribe('ghost:event', () => { calls += 1; });   // subscribe (undeclared) -> warns
+   em.emit('ghost:event');                                 // emit (undeclared, already warned)
+   em.emit('ghost:event');
+
+   assert.equal(undeclaredWarns('ghost:event').length, 1, 'warned exactly once');
+   assert.equal(calls, 2, 'delivery still happened both emits');
+});
+
+test('framework events (router:*/context:*) never warn', () => {
+   warnings.length = 0;
+   const em = new EventManager();
+   em.register({ 'user:login': { payload: null } });
+   em.emit('router:change');
+   em.emit('context:user', {});
+   em.subscribe('context:cart', () => {});
+   assert.equal(undeclaredWarns().length, 0);
+});
+
+test('production: undeclared events do not warn', () => {
+   warnings.length = 0;
+   globalThis.slice.isProduction = () => true;
+   const em = new EventManager();
+   em.register({ 'a:b': { payload: null } });
+   em.emit('zzz:undeclared');
+   assert.equal(undeclaredWarns().length, 0);
+   globalThis.slice.isProduction = () => false;
+});
+
+test('register() merges catalogs and is chainable', () => {
+   const em = new EventManager();
+   const ret = em.register({ 'a:1': { payload: null } }).register({ 'b:2': { payload: { x: 'string' } } });
+   assert.equal(ret, em, 'returns the manager for chaining');
+   assert.ok(em.registry.has('a:1') && em.registry.has('b:2'), 'both catalogs merged');
+   assert.equal(em.isDeclared('a:1'), true);
+   assert.equal(em.isDeclared('nope:nope'), false);
+});
+
+test('register(namespace, catalog) prefixes keys', () => {
+   const em = new EventManager();
+   em.register('user', { login: { payload: { id: 'number' } }, logout: { payload: null } });
+   assert.ok(em.registry.has('user:login'), 'user:login declared');
+   assert.ok(em.registry.has('user:logout'), 'user:logout declared');
+   assert.equal(em.namespaceOf('user:login'), 'user');
+   assert.equal(em.namespaceOf('ready'), null);
+});
+
+test('event without namespace warns once in dev', () => {
+   warnings.length = 0;
+   const em = new EventManager();
+   em.register({ 'ready': { payload: null } });       // declared but no namespace -> warns
+   em.emit('ready');
+   em.emit('ready');
+   const nsWarns = warnings.filter((w) => w.includes('no namespace'));
+   assert.equal(nsWarns.length, 1, 'namespace warning fired exactly once');
+});
+
+test('no-namespace warning is silent in loose mode (no registry)', () => {
+   warnings.length = 0;
+   const em = new EventManager();
+   em.emit('ready'); // nobody registered -> loose mode, no warnings at all
+   assert.equal(warnings.length, 0);
+});
+
+test('loadGraph stores the static graph and exposes emitters/listeners', () => {
+   const em = new EventManager();
+   assert.deepEqual(em.staticEmittersOf('user:login'), [], 'empty before loadGraph');
+   em.loadGraph({
+      events: {
+         'user:login': {
+            payload: { id: 'number' },
+            emitters: [{ file: 'src/Login.js', line: 12, component: 'Login' }],
+            listeners: [{ file: 'src/Header.js', line: 5, component: 'Header' }],
+         },
+      },
+      dynamic: { emitters: [], listeners: [] },
+   });
+   assert.equal(em.staticEmittersOf('user:login')[0].component, 'Login');
+   assert.equal(em.staticListenersOf('user:login')[0].component, 'Header');
+   assert.deepEqual(em.staticEmittersOf('unknown:event'), []);
+});
+
+test('loadGraph ignores malformed input', () => {
+   const em = new EventManager();
+   em.loadGraph(null);
+   em.loadGraph({ nope: true });
+   assert.equal(em.graph, null);
+});
+
+test('undeclared usage is tracked for the debugger drift view', () => {
+   warnings.length = 0;
+   const em = new EventManager();
+   em.register({ 'declared:ok': { payload: null } });
+   em.emit('drifted:event');
+   assert.ok(em.undeclared.has('drifted:event'), 'drift set records undeclared usage');
+   assert.ok(!em.undeclared.has('declared:ok'), 'declared events are not drift');
+});