@vnb/mfe-events 0.0.1-rc.1

package/dist/index.umd.js

@@ -0,0 +1,858 @@
+/**
+ * @vnb/mfe-events v0.0.1-rc.1
+ * Micro frontend event plugin for cross-app communication with type safety
+ * License: MIT
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MfeEvents = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * @xxxx/mfe-events — Transport Layer
+     *
+     * Provides abstraction for event transmission across different environments:
+     * - MemoryTransport: Shell internal (no window)
+     * - WindowTransport: MF/NF Remote Apps (CustomEvent)
+     * - PostMessageTransport: iframe Remote Apps (postMessage)
+     * - IframeProxyTransport: Shell → iframe proxy (postMessage)
+     */
+    /**
+     * MemoryTransport — Shell internal event bus
+     * Uses in-memory EventTarget, does not touch window
+     */
+    class MemoryTransport {
+        constructor() {
+            this.target = new EventTarget();
+        }
+        emit(event, data) {
+            this.target.dispatchEvent(new CustomEvent(event, { detail: data }));
+        }
+        on(event, handler) {
+            const wrapper = (e) => handler(e.detail);
+            this.target.addEventListener(event, wrapper);
+            return () => this.target.removeEventListener(event, wrapper);
+        }
+    }
+    /**
+     * WindowTransport — MF/NF Remote Apps communication
+     * Uses window.CustomEvent for same-tab communication
+     */
+    class WindowTransport {
+        emit(event, data) {
+            window.dispatchEvent(new CustomEvent(event, { detail: data }));
+        }
+        on(event, handler) {
+            const wrapper = (e) => handler(e.detail);
+            window.addEventListener(event, wrapper);
+            return () => window.removeEventListener(event, wrapper);
+        }
+    }
+    /**
+     * PostMessageTransport — iframe Remote Apps communication
+     * Uses window.postMessage for cross-origin communication
+     */
+    class PostMessageTransport {
+        constructor(options = {}) {
+            this.targetWindow = options.targetWindow || window.parent;
+            this.targetOrigin = options.targetOrigin || '*';
+        }
+        emit(event, data) {
+            this.targetWindow.postMessage({ scope: 'mfe', event, data, ts: Date.now() }, this.targetOrigin);
+        }
+        on(event, handler) {
+            const wrapper = (e) => {
+                if (e.data?.scope === 'mfe' && e.data?.event === event) {
+                    handler(e.data.data);
+                }
+            };
+            window.addEventListener('message', wrapper);
+            return () => window.removeEventListener('message', wrapper);
+        }
+    }
+    /**
+     * IframeProxyTransport — Shell side proxy for iframe communication
+     * Sends postMessage to specific iframe and receives messages from it
+     */
+    class IframeProxyTransport {
+        constructor(iframe, targetOrigin = '*') {
+            this.iframe = iframe;
+            this.targetOrigin = targetOrigin;
+        }
+        emit(event, data) {
+            this.iframe.contentWindow?.postMessage({ scope: 'mfe', event, data, ts: Date.now() }, this.targetOrigin);
+        }
+        on(event, handler) {
+            const wrapper = (e) => {
+                // Only receive messages from this specific iframe
+                if (e.source === this.iframe.contentWindow &&
+                    e.data?.scope === 'mfe' &&
+                    e.data?.event === event) {
+                    handler(e.data.data);
+                }
+            };
+            window.addEventListener('message', wrapper);
+            return () => window.removeEventListener('message', wrapper);
+        }
+    }
+
+    var transport = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        IframeProxyTransport: IframeProxyTransport,
+        MemoryTransport: MemoryTransport,
+        PostMessageTransport: PostMessageTransport,
+        WindowTransport: WindowTransport
+    });
+
+    /**
+     * @xxxx/mfe-events — Type-safe Event Bus
+     *
+     * Provides compile-time type checking for event names and payloads.
+     * Wraps Transport with generic type constraints.
+     */
+    class Bus {
+        constructor(transport) {
+            this.transport = transport;
+        }
+        /**
+         * Emit an event with type-safe payload
+         */
+        emit(event, data) {
+            this.transport.emit(event, data);
+        }
+        /**
+         * Subscribe to an event with type-safe handler
+         * Returns unsubscribe function
+         */
+        on(event, handler, options) {
+            if (options?.once) {
+                return this.once(event, handler);
+            }
+            return this.transport.on(event, handler);
+        }
+        /**
+         * Subscribe to an event once
+         * Returns unsubscribe function
+         */
+        once(event, handler) {
+            const off = this.on(event, (data) => {
+                off();
+                handler(data);
+            });
+            return off;
+        }
+    }
+
+    /**
+     * @xxxx/mfe-events — Event Constants
+     *
+     * Three scopes:
+     * - EvtShl: Shell internal (no window, memory only)
+     * - EvtMfe: Cross-app (Shell + Remote Apps)
+     * - EvtApp: Remote App internal (framework-specific)
+     *
+     * Naming convention: {scope}:{domain}-{action}
+     * - State/notification events: must have -{action} suffix
+     * - Event markers (error, shell-ready, raw): no suffix
+     */
+    // ─────────────────────────────────────────────
+    // Shell Internal — no window, memory only
+    // ─────────────────────────────────────────────
+    const EvtShl = {
+        TabOverflow: 'shl:tab-overflow',
+        TabClose: 'shl:tab-close',
+        RouteReuse: 'shl:route-reuse',
+        AuthSync: 'shl:auth-sync',
+        StateSync: 'shl:state-sync',
+        AppMounted: 'shl:app-mounted',
+        AppUnmounted: 'shl:app-unmounted',
+    };
+    // ─────────────────────────────────────────────
+    // Cross-App — Shell and Remote Apps shared protocol
+    // ─────────────────────────────────────────────
+    const EvtMfe = {
+        // Global state domain
+        ThemeUpdate: 'mfe:theme-update',
+        LocaleUpdate: 'mfe:locale-update',
+        BreakpointUpdate: 'mfe:breakpoint-update',
+        StateUpdate: 'mfe:state-update',
+        ShellReady: 'mfe:shell-ready',
+        Error: 'mfe:error',
+        Raw: 'mfe:raw',
+        Custom: 'mfe:raw',
+        // Auth domain
+        AuthLogin: 'mfe:auth-login',
+        AuthLogout: 'mfe:auth-logout',
+        AuthTokenUpdate: 'mfe:auth-token-update',
+        AuthTokenClear: 'mfe:auth-token-clear',
+        AuthPermissionUpdate: 'mfe:auth-permission-update',
+        AuthExpired: 'mfe:auth-expired',
+        // Route domain
+        RouteNavigate: 'mfe:route-navigate',
+        RouteRefresh: 'mfe:route-refresh',
+        RouteChange: 'mfe:route-change',
+        // Lifecycle domain
+        LifecycleAppClose: 'mfe:lifecycle-app-close',
+        LifecycleAppReady: 'mfe:lifecycle-app-ready',
+        LifecycleAppUnmount: 'mfe:lifecycle-app-unmount',
+        // Notification domain
+        NotifyShow: 'mfe:notify-show',
+        NotifyClose: 'mfe:notify-close',
+        NotifyCloseAll: 'mfe:notify-close-all',
+    };
+    // ─────────────────────────────────────────────
+    // Remote App Internal — defined by each app
+    // ─────────────────────────────────────────────
+    function EvtApp(appId, name) {
+        return `app:${appId}-${name}`;
+    }
+
+    /**
+     * @xxxx/mfe-events — Plugin Core
+     *
+     * MfeEventPlugin manages Remote App registration and provides:
+     * - register/unregister for Remote Apps
+     * - emitTo for targeted communication
+     * - emit for broadcast communication
+     * - Notification API (success/info/warning/danger)
+     * - Automatic iframe message proxying
+     */
+    class MfeEventPlugin {
+        // ── Console helpers ─────────────────────────────────────────────────────────
+        static _log(method, label, labelBg, message, detail) {
+            const TAG = `color:#fff;background:${labelBg};padding:2px 6px;border-radius:4px 0 0 4px;font-weight:bold;`;
+            const LBL = `${labelBg.replace('background:', 'color:;background:')};padding:2px 4px;border-radius:0 4px 4px 0;`;
+            const MSG = 'color:#374151;padding:2px 4px;border-radius:0 4px 4px 0;';
+            const DETAIL = 'color:#6b7280;padding:0 4px;';
+            if (detail !== undefined) {
+                console[method](`%c[mfe-events]%c ${label}%c ${message}%c ${detail}`, TAG, LBL, MSG, DETAIL);
+            }
+            else {
+                console[method](`%c[mfe-events]%c ${label}%c ${message}`, TAG, LBL, MSG);
+            }
+        }
+        static _logError(label, message, detail) {
+            this._log('error', label, '#dc2626', message, detail);
+        }
+        static _logWarn(label, message, detail) {
+            this._log('warn', label, '#d97706', message, detail);
+        }
+        constructor() {
+            this.registry = new Map();
+            this._notifyId = 0;
+            this._shellReady = false;
+            this._notifyContainer = null;
+            this._notifyItems = new Map();
+            this._pendingClosers = new Map();
+            this._customRenderer = null;
+            this._customCloser = null;
+            this._customClear = null;
+            if (typeof window === 'undefined')
+                return;
+            // Shell side: globally listen for iframe messages and forward as CustomEvent
+            if (window.self === window.top) {
+                window.addEventListener('message', (e) => {
+                    if (e.data?.scope === 'mfe' && e.data?.event) {
+                        window.dispatchEvent(new CustomEvent(e.data.event, { detail: e.data.data }));
+                    }
+                });
+            }
+            // Always init DOM fallback for notifications
+            this._initDOMFallback();
+        }
+        // ─────────────────────────────────────────
+        // Custom Renderer (for Shell integration)
+        // ─────────────────────────────────────────
+        /**
+         * Register custom notification renderer (Shell use)
+         * When registered, DOM fallback is disabled
+         */
+        useRenderer(render, close, clear) {
+            this._customRenderer = render;
+            this._customCloser = close || null;
+            this._customClear = clear || null;
+        }
+        // ─────────────────────────────────────────
+        // DOM Fallback Renderer
+        // ─────────────────────────────────────────
+        _initDOMFallback() {
+            // Inject styles
+            const styleId = 'mfe-notify-styles';
+            if (!document.getElementById(styleId)) {
+                const style = document.createElement('style');
+                style.id = styleId;
+                style.textContent = `
+        .mfe-notify-host {
+          position: fixed;
+          top: 16px;
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 99999;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          max-width: 480px;
+          width: calc(100% - 32px);
+          pointer-events: none;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        .mfe-notify-item {
+          display: flex;
+          align-items: flex-start;
+          gap: 10px;
+          padding: 12px 14px;
+          background: #ffffff;
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          border-left: 4px solid var(--mfe-notify-color, #6b7280);
+          border-radius: 8px;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+          pointer-events: auto;
+          animation: mfe-notify-slide-in 180ms ease-out;
+        }
+        .mfe-notify-item[data-type="success"] { --mfe-notify-color: #16a34a; }
+        .mfe-notify-item[data-type="info"]    { --mfe-notify-color: #3b82f6; }
+        .mfe-notify-item[data-type="warning"] { --mfe-notify-color: #d97706; }
+        .mfe-notify-item[data-type="danger"]  { --mfe-notify-color: #dc2626; }
+        .mfe-notify-icon {
+          flex: 0 0 24px;
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          font-weight: 700;
+          color: #fff;
+          background: var(--mfe-notify-color, #6b7280);
+        }
+        .mfe-notify-body { flex: 1; min-width: 0; }
+        .mfe-notify-title {
+          font-size: 13px;
+          font-weight: 600;
+          color: #1f2937;
+          margin-bottom: 2px;
+        }
+        .mfe-notify-message {
+          font-size: 13px;
+          line-height: 1.4;
+          color: #374151;
+          word-break: break-word;
+        }
+        .mfe-notify-close {
+          flex: 0 0 24px;
+          width: 24px;
+          height: 24px;
+          border: none;
+          background: none;
+          color: #6b7280;
+          cursor: pointer;
+          font-size: 18px;
+          line-height: 1;
+          border-radius: 4px;
+        }
+        .mfe-notify-close:hover { background: rgba(0, 0, 0, 0.06); color: #111827; }
+        .mfe-notify-actions {
+          display: flex;
+          gap: 8px;
+          margin-top: 8px;
+        }
+        .mfe-notify-btn {
+          padding: 4px 12px;
+          font-size: 12px;
+          font-weight: 500;
+          border: 1px solid rgba(0, 0, 0, 0.15);
+          border-radius: 4px;
+          background: #fff;
+          color: #374151;
+          cursor: pointer;
+          transition: background 0.15s, border-color 0.15s;
+        }
+        .mfe-notify-btn:hover {
+          background: #f3f4f6;
+          border-color: rgba(0, 0, 0, 0.25);
+        }
+        .mfe-notify-btn:active {
+          background: #e5e7eb;
+        }
+        @keyframes mfe-notify-slide-in {
+          from { transform: translateY(-12px); opacity: 0; }
+          to   { transform: translateY(0); opacity: 1; }
+        }
+      `;
+                document.head.appendChild(style);
+            }
+            // Create container
+            this._notifyContainer = document.createElement('div');
+            this._notifyContainer.className = 'mfe-notify-host';
+            this._notifyContainer.setAttribute('aria-live', 'polite');
+            document.body.appendChild(this._notifyContainer);
+        }
+        _renderToast(config) {
+            if (!this._notifyContainer)
+                return;
+            const { id, type = 'info', message = '', title, duration = 3000, buttons = [] } = config;
+            const icons = {
+                success: '✓',
+                info: 'i',
+                warning: '!',
+                danger: '✕',
+            };
+            // Escape HTML to prevent XSS
+            const escapeHtml = (str) => {
+                const div = document.createElement('div');
+                div.textContent = str;
+                return div.innerHTML;
+            };
+            const item = document.createElement('div');
+            item.className = 'mfe-notify-item';
+            item.setAttribute('data-type', type);
+            item.setAttribute('data-notify-id', id);
+            // Build buttons HTML
+            let buttonsHtml = '';
+            if (buttons.length > 0) {
+                buttonsHtml = `<div class="mfe-notify-actions">${buttons.map((btn, idx) => `<button class="mfe-notify-btn" data-btn-idx="${idx}">${escapeHtml(btn.text)}</button>`).join('')}</div>`;
+            }
+            item.innerHTML = `
+      <div class="mfe-notify-icon">${icons[type] || 'i'}</div>
+      <div class="mfe-notify-body">
+        ${title ? `<div class="mfe-notify-title">${escapeHtml(title)}</div>` : ''}
+        <div class="mfe-notify-message">${escapeHtml(message)}</div>
+        ${buttonsHtml}
+      </div>
+      <button class="mfe-notify-close" type="button" aria-label="Dismiss">×</button>
+    `;
+            // Bind button handlers
+            buttons.forEach((btn, idx) => {
+                const btnEl = item.querySelector(`[data-btn-idx="${idx}"]`);
+                if (btnEl && btn.handler) {
+                    btnEl.addEventListener('click', () => {
+                        btn.handler();
+                        if (btn.role !== 'sticky') {
+                            this._removeToast(id);
+                        }
+                    });
+                }
+            });
+            const closeBtn = item.querySelector('.mfe-notify-close');
+            closeBtn.addEventListener('click', () => this._removeToast(id));
+            this._notifyContainer.appendChild(item);
+            this._notifyItems.set(id, item);
+            if (duration > 0) {
+                setTimeout(() => this._removeToast(id), duration);
+            }
+        }
+        _removeToast(id) {
+            const item = this._notifyItems.get(id);
+            if (item) {
+                item.remove();
+                this._notifyItems.delete(id);
+            }
+            this._pendingClosers.delete(id);
+        }
+        _removeAllToasts() {
+            this._notifyItems.forEach((item) => item.remove());
+            this._notifyItems.clear();
+            this._pendingClosers.clear();
+        }
+        // ─────────────────────────────────────────
+        // Remote App Registration
+        // ─────────────────────────────────────────
+        /**
+         * Register a Remote App with event handlers
+         */
+        register(options) {
+            if (this.registry.has(options.appId)) {
+                this.unregister(options.appId);
+            }
+            const meta = {
+                appId: options.appId,
+                type: options.type || 'mf',
+            };
+            const cleanups = [];
+            // Auto-subscribe handlers
+            Object.entries(options.handlers).forEach(([event, handler]) => {
+                if (!handler)
+                    return;
+                if (options.type === 'iframe') {
+                    // iframe: listen via postMessage
+                    const wrapper = (e) => {
+                        if (e.data?.scope === 'mfe' && e.data?.event === event) {
+                            handler(e.data.data);
+                        }
+                    };
+                    window.addEventListener('message', wrapper);
+                    cleanups.push(() => window.removeEventListener('message', wrapper));
+                }
+                else {
+                    // MF/NF: listen via window.CustomEvent
+                    const wrapper = (e) => handler(e.detail);
+                    window.addEventListener(event, wrapper);
+                    cleanups.push(() => window.removeEventListener(event, wrapper));
+                }
+            });
+            this.registry.set(options.appId, { meta, options, cleanups });
+            // fallback 存入 registry，不覆盖全局 _customRenderer
+            // 全局渲染器仅由 Shell 的 useRenderer() 设置
+        }
+        /**
+         * Register an iframe Remote App (Shell side)
+         */
+        registerIframe(appId, iframe, targetOrigin) {
+            const TIMEOUT_MS = 5000;
+            Promise.resolve().then(function () { return transport; })
+                .then(({ IframeProxyTransport }) => {
+                const transport = new IframeProxyTransport(iframe, targetOrigin);
+                this.registry.set(appId, {
+                    meta: { appId, type: 'iframe', transport },
+                    options: { appId, type: 'iframe', handlers: {} },
+                    cleanups: [],
+                });
+            })
+                .catch((err) => {
+                MfeEventPlugin._logError('registerIframe', 'failed to load transport for', `"${appId}": ${err}`);
+            });
+            // Timeout protection — if import hangs, registry stays clean and caller knows nothing
+            setTimeout(() => {
+                if (!this.registry.has(appId)) {
+                    MfeEventPlugin._logError('registerIframe', 'timeout', `${TIMEOUT_MS}ms for "${appId}"`);
+                }
+            }, TIMEOUT_MS);
+        }
+        /**
+         * Unregister a Remote App
+         */
+        unregister(appId) {
+            const entry = this.registry.get(appId);
+            if (entry) {
+                entry.cleanups.forEach((fn) => fn());
+            }
+            this.registry.delete(appId);
+        }
+        // ─────────────────────────────────────────
+        // Shell Targeted Communication
+        // ─────────────────────────────────────────
+        /**
+         * Send event to a specific Remote App
+         */
+        emitTo(appId, event, data) {
+            const app = this.registry.get(appId);
+            if (!app) {
+                MfeEventPlugin._logWarn('emitTo', 'app not registered', `"${appId}" (event: ${event})`);
+                return;
+            }
+            if (app.meta.type === 'iframe' && app.meta.transport) {
+                // iframe: send via postMessage
+                app.meta.transport.emit(event, data);
+            }
+            else {
+                // MF/NF: call the registered handler directly
+                const handler = app.options.handlers[event];
+                if (handler) {
+                    handler(data);
+                }
+            }
+        }
+        // ─────────────────────────────────────────
+        // Shell Broadcast Communication
+        // ─────────────────────────────────────────
+        /**
+         * Broadcast event to all Remote Apps (MF + iframe)
+         */
+        emit(event, data) {
+            // Broadcast to all MF Remote Apps
+            window.dispatchEvent(new CustomEvent(event, { detail: data }));
+            // Broadcast to all iframe Remote Apps
+            this.registry.forEach(({ meta }) => {
+                if (meta.type === 'iframe' && meta.transport) {
+                    meta.transport.emit(event, data);
+                }
+            });
+        }
+        // ─────────────────────────────────────────
+        // Notification API
+        // ─────────────────────────────────────────
+        /**
+         * Build notification config from flexible arguments
+         * Supports: success("msg"), success({message:"msg",duration:5000}), success("msg","title",{duration:5000})
+         */
+        _buildConfig(type, message, args) {
+            const config = { type };
+            if (typeof message === 'string') {
+                config.message = message;
+            }
+            else if (message && typeof message === 'object') {
+                const { type: _ignored, ...rest } = message;
+                Object.assign(config, rest);
+            }
+            args.forEach((arg) => {
+                if (typeof arg === 'string') {
+                    config.title = arg;
+                }
+                else if (arg && typeof arg === 'object') {
+                    const { type: _ignored, ...rest } = arg;
+                    Object.assign(config, rest);
+                }
+            });
+            return config;
+        }
+        /**
+         * Show a notification
+         */
+        notify(config) {
+            if (typeof window === 'undefined')
+                return { close: () => { } };
+            const id = `mfe-${++this._notifyId}`;
+            const finalConfig = {
+                duration: 3000,
+                ...config,
+                id,
+            };
+            // 1. Always dispatch CustomEvent (for Shell listeners)
+            window.dispatchEvent(new CustomEvent(EvtMfe.NotifyShow, {
+                detail: finalConfig,
+                bubbles: true,
+                cancelable: true,
+            }));
+            // 2. Render: custom renderer > fallback > DOM fallback
+            if (this._customRenderer) {
+                this._customRenderer(finalConfig);
+            }
+            else {
+                // Check if any registered app provided a fallback renderer
+                const appWithFallback = [...this.registry.values()].find((app) => app.options.fallback);
+                if (appWithFallback) {
+                    const closer = appWithFallback.options.fallback(finalConfig);
+                    this._pendingClosers.set(id, () => {
+                        window.dispatchEvent(new CustomEvent(EvtMfe.NotifyClose, {
+                            detail: { id },
+                            bubbles: true,
+                        }));
+                        closer.close();
+                        this._pendingClosers.delete(id);
+                    });
+                }
+                else {
+                    this._renderToast(finalConfig);
+                }
+            }
+            // 3. Track closer for closeAll()
+            const closeFn = () => {
+                // Dispatch close event
+                window.dispatchEvent(new CustomEvent(EvtMfe.NotifyClose, {
+                    detail: { id },
+                    bubbles: true,
+                }));
+                // Remove DOM toast
+                if (this._customCloser) {
+                    this._customCloser(id);
+                }
+                else {
+                    this._removeToast(id);
+                }
+            };
+            this._pendingClosers.set(id, closeFn);
+            return {
+                close: () => {
+                    const closer = this._pendingClosers.get(id);
+                    if (closer) {
+                        closer();
+                    }
+                },
+            };
+        }
+        /**
+         * Close a notification by id
+         */
+        close(id) {
+            const closer = this._pendingClosers.get(id);
+            if (closer)
+                closer();
+        }
+        /**
+         * Show success notification
+         */
+        success(message, ...args) {
+            return this.notify(this._buildConfig('success', message, args));
+        }
+        /**
+         * Show info notification
+         */
+        info(message, ...args) {
+            return this.notify(this._buildConfig('info', message, args));
+        }
+        /**
+         * Show warning notification
+         */
+        warning(message, ...args) {
+            return this.notify(this._buildConfig('warning', message, args));
+        }
+        /**
+         * Show danger notification
+         */
+        danger(message, ...args) {
+            return this.notify(this._buildConfig('danger', message, args));
+        }
+        /**
+         * Close all notifications
+         */
+        closeAll() {
+            // Call all pending closers
+            this._pendingClosers.forEach((closer) => closer());
+            this._pendingClosers.clear();
+            // Dispatch close-all event
+            window.dispatchEvent(new CustomEvent(EvtMfe.NotifyCloseAll, {
+                detail: {},
+                bubbles: true,
+            }));
+            // Clear DOM toasts
+            if (this._customClear) {
+                this._customClear();
+            }
+            else {
+                this._removeAllToasts();
+            }
+        }
+        // ─────────────────────────────────────────
+        // Lifecycle Helpers
+        // ─────────────────────────────────────────
+        /**
+         * Mark Shell as ready
+         */
+        shellReady() {
+            setTimeout(() => {
+                window.dispatchEvent(new CustomEvent(EvtMfe.ShellReady, {
+                    detail: {},
+                    bubbles: true,
+                    cancelable: true,
+                }));
+                this._shellReady = true;
+            }, 100);
+        }
+        /**
+         * Check if Shell is ready
+         */
+        isShellReady() {
+            return !!this._shellReady;
+        }
+        // ─────────────────────────────────────────
+        // Auth Helpers (convenience methods)
+        // ─────────────────────────────────────────
+        /**
+         * Broadcast auth login event
+         */
+        authLogin(user) {
+            this.emit(EvtMfe.AuthLogin, { user, token: '' });
+        }
+        /**
+         * Broadcast auth logout event
+         */
+        authLogout(reason) {
+            this.emit(EvtMfe.AuthLogout, { reason: reason || 'user' });
+        }
+        /**
+         * Broadcast token update event
+         */
+        tokenUpdate(data) {
+            this.emit(EvtMfe.AuthTokenUpdate, data);
+        }
+        /**
+         * Broadcast auth expired event
+         */
+        authExpired() {
+            this.emit(EvtMfe.AuthExpired, {});
+        }
+        /**
+         * Broadcast token cleared event
+         */
+        tokenClear() {
+            this.emit(EvtMfe.AuthTokenClear, {});
+        }
+        /**
+         * Broadcast permission update event
+         */
+        permissionUpdate(permissions) {
+            this.emit(EvtMfe.AuthPermissionUpdate, { permissions });
+        }
+        /**
+         * Broadcast locale update event
+         */
+        locale(locale) {
+            this.emit(EvtMfe.LocaleUpdate, { locale });
+        }
+    }
+    // Singleton export
+    const mfeEventPlugin = new MfeEventPlugin();
+
+    /**
+     * @xxxx/mfe-events — Micro Frontend Event Plugin
+     *
+     * Unified event communication for Module Federation / Native Federation / iframe architectures.
+     *
+     * Features:
+     * - Three scopes: EvtShl (Shell internal), EvtMfe (cross-app), EvtApp (Remote App internal)
+     * - Type-safe event bus with compile-time checking
+     * - Automatic Transport adaptation (CustomEvent for MF, postMessage for iframe)
+     * - Plugin API for Remote App registration and communication
+     * - Notification API with fallback support
+     *
+     * Usage:
+     * ```typescript
+     * import mfeEventPlugin, { mfeBus, shlBus } from '@xxxx/mfe-events'
+     * import { EvtMfe, EvtShl, EvtApp } from '@xxxx/mfe-events'
+     * ```
+     */
+    // Transport layer
+    /**
+     * Shell internal bus — isolated, does not touch window
+     * Use for Shell-internal state synchronization
+     */
+    const shlBus = new Bus(new MemoryTransport());
+    /**
+     * Cross-app bus — auto-detects environment and selects Transport
+     * - Shell/MF/NF: WindowTransport (CustomEvent)
+     * - iframe: PostMessageTransport (postMessage)
+     */
+    function createMfeBus() {
+        if (typeof window === 'undefined') {
+            // SSR fallback — use MemoryTransport
+            return new Bus(new MemoryTransport());
+        }
+        if (window.self !== window.top) {
+            // iframe environment → send to parent via postMessage
+            return new Bus(new PostMessageTransport());
+        }
+        // Shell/MF/NF environment → use window.CustomEvent
+        // Federation modules may not share the same instance,
+        // so window is used as the shared channel fallback
+        return new Bus(new WindowTransport());
+    }
+    const mfeBus = createMfeBus();
+    // ─────────────────────────────────────────────
+    // Global variable for backward compatibility
+    // ─────────────────────────────────────────────
+    if (typeof window !== 'undefined') {
+        const win = window;
+        if (!win.__MFE_EVENT_PLUGIN__) {
+            win.__MFE_EVENT_PLUGIN__ = mfeEventPlugin;
+        }
+    }
+
+    exports.Bus = Bus;
+    exports.EvtApp = EvtApp;
+    exports.EvtMfe = EvtMfe;
+    exports.EvtShl = EvtShl;
+    exports.IframeProxyTransport = IframeProxyTransport;
+    exports.MemoryTransport = MemoryTransport;
+    exports.PostMessageTransport = PostMessageTransport;
+    exports.WindowTransport = WindowTransport;
+    exports.default = mfeEventPlugin;
+    exports.mfeBus = mfeBus;
+    exports.mfeEventPlugin = mfeEventPlugin;
+    exports.shlBus = shlBus;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.umd.js.map