underpost 3.2.5 → 3.2.9

package/src/client/components/core/Docs.js

@@ -1,23 +1,18 @@
-import { Badge } from './Badge.js';
-import { BtnIcon } from './BtnIcon.js';
-import { Css, darkTheme, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
-import { buildBadgeToolTipMenuOption, Modal, renderViewTitle } from './Modal.js';
+import { Css, darkTheme, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
+import { Modal, renderViewTitle } from './Modal.js';
 import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
-import { htmls, s, sIframe } from './VanillaJs.js';
-
+import { s, sIframe } from './VanillaJs.js';
 // https://mintlify.com/docs/quickstart
-
-const Docs = {
-  RenderModal: async function (type) {
-    const docData = this.Data.find((d) => d.type === type);
+class Docs {
+  static async RenderModal(type) {
+    const docData = Docs.Data.find((d) => d.type === type);
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
     const parentBarMode =
       Modal.Data['modal-docs'] && Modal.Data['modal-docs'].options.barMode
         ? Modal.Data['modal-docs'].options.barMode
         : undefined;
-
-    await Modal.Render({
+    await Modal.instance({
       barConfig,
       title: renderViewTitle(docData),
       id: ModalId,
@@ -51,7 +46,15 @@ const Docs = {
     });
     const iframeEl = s(`.iframe-${ModalId}`);
     let swaggerThemeEventKey = null;
+    let unbindIframeLayoutSync = null;
     if (iframeEl) {
+      const scheduleViewLayoutSync = () => {
+        const sync = () => Modal.syncViewLayout();
+        sync();
+        setTimeout(sync, 0);
+        setTimeout(sync, 120);
+        setTimeout(sync, 400);
+      };
       iframeEl.addEventListener('load', () => {
         try {
           const iframeWin = iframeEl.contentWindow;
@@ -62,11 +65,34 @@ const Docs = {
         } catch (e) {
           // cross-origin or security restriction — safe to ignore
         }
-        window.scrollTo(0, 0);
+        // Keep the parent window scroll untouched.
+        // These modals are fixed-position; scrolling the parent on iframe navigation
+        // shifts Chrome layout calculations and leaves view modals offset by 50px.
         // Bind Shift+K inside the iframe to focus the parent SearchBox (mirrors app-wide shortcut)
         try {
+          const iframeWin = iframeEl.contentWindow;
           const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
           if (iframeDoc) {
+            if (unbindIframeLayoutSync) unbindIframeLayoutSync();
+            const onIframeAnchorClick = (e) => {
+              if (e.target && e.target.closest && e.target.closest('a')) {
+                scheduleViewLayoutSync();
+              }
+            };
+            const onIframeHashChange = () => scheduleViewLayoutSync();
+            const onIframePopState = () => scheduleViewLayoutSync();
+            iframeDoc.addEventListener('click', onIframeAnchorClick, true);
+            if (iframeWin) {
+              iframeWin.addEventListener('hashchange', onIframeHashChange);
+              iframeWin.addEventListener('popstate', onIframePopState);
+            }
+            unbindIframeLayoutSync = () => {
+              iframeDoc.removeEventListener('click', onIframeAnchorClick, true);
+              if (iframeWin) {
+                iframeWin.removeEventListener('hashchange', onIframeHashChange);
+                iframeWin.removeEventListener('popstate', onIframePopState);
+              }
+            };
             iframeDoc.addEventListener('keydown', (e) => {
               if (e.shiftKey && e.key.toLowerCase() === 'k') {
                 e.preventDefault();
@@ -85,48 +111,30 @@ const Docs = {
         } catch (e) {
           // cross-origin or security restriction — safe to ignore
         }
+        scheduleViewLayoutSync();
       });
-
       if (type === 'src') {
         swaggerThemeEventKey = `jsdocs-iframe-${ModalId}`;
-
         const applyJsDocsTheme = (isDark) => {
           try {
-            const iframeWin = iframeEl.contentWindow;
-            if (!iframeWin) return;
-            const theme = isDark ? 'dark' : 'light';
-            if (typeof iframeWin.updateTheme === 'function') {
-              // clean-jsdoc-theme exposes updateTheme() globally
-              iframeWin.updateTheme(theme);
-            } else {
-              // Fallback: replicate localUpdateTheme manually
-              const iframeDoc = iframeEl.contentDocument || iframeWin.document;
-              if (!iframeDoc || !iframeDoc.body) return;
-              iframeDoc.body.setAttribute('data-theme', theme);
-              iframeDoc.body.classList.remove('dark', 'light');
-              iframeDoc.body.classList.add(theme);
-              const iconID = isDark ? '#light-theme-icon' : '#dark-theme-icon';
-              const svgUses = sIframe(iframeEl, '.theme-svg-use') ? iframeDoc.querySelectorAll('.theme-svg-use') : [];
-              svgUses.forEach((svg) => svg.setAttribute('xlink:href', iconID));
-              iframeWin.localStorage?.setItem('theme', theme);
-            }
+            const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
+            if (!iframeDoc || !iframeDoc.documentElement) return;
+            // TypeDoc built-in theme: data-theme on <html>, stored as 'tsd-theme' in localStorage
+            iframeDoc.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+            iframeEl.contentWindow?.localStorage?.setItem('tsd-theme', isDark ? 'dark' : 'light');
           } catch (e) {
             // cross-origin or security restriction — safe to ignore
           }
         };
-
         // Apply current theme as soon as the iframe content is ready
         iframeEl.addEventListener('load', () => applyJsDocsTheme(darkTheme));
-
         // Keep in sync whenever the parent page theme changes
         ThemeEvents[swaggerThemeEventKey] = () => {
           if (s(`.iframe-${ModalId}`)) applyJsDocsTheme(darkTheme);
         };
       }
-
       if (type === 'api') {
         swaggerThemeEventKey = `swagger-iframe-${ModalId}`;
-
         const applySwaggerTheme = (isDark) => {
           try {
             const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
@@ -143,10 +151,8 @@ const Docs = {
             // cross-origin or security restriction — safe to ignore
           }
         };
-
         // Apply current theme as soon as the iframe content is ready
         iframeEl.addEventListener('load', () => applySwaggerTheme(darkTheme));
-
         // Keep in sync whenever the parent page theme changes
         ThemeEvents[swaggerThemeEventKey] = () => {
           if (s(`.iframe-${ModalId}`)) applySwaggerTheme(darkTheme);
@@ -159,7 +165,6 @@ const Docs = {
         const barHeight = barEl ? barEl.offsetHeight : Modal.headerTitleHeight;
         s(`.iframe-${ModalId}`).style.height = `${s(`.${ModalId}`).offsetHeight - barHeight}px`;
       }
-
       if (type.match('coverage')) {
         simpleIconsRender(`.doc-icon-coverage`);
         simpleIconsRender(`.doc-icon-coverage-link`);
@@ -167,11 +172,12 @@ const Docs = {
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
     Modal.Data[ModalId].onCloseListener[ModalId] = () => {
+      if (unbindIframeLayoutSync) unbindIframeLayoutSync();
       if (swaggerThemeEventKey) delete ThemeEvents[swaggerThemeEventKey];
       closeModalRouteChangeEvent({ closedId: ModalId });
     };
-  },
-  Data: [
+  }
+  static Data = [
     {
       type: 'repo',
       icon: html`<i class="fab fa-github"></i>`,
@@ -238,38 +244,36 @@ const Docs = {
         if (s(`.doc-icon-coverage-link`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage-link`));
       },
     },
-  ],
-  Tokens: {},
-  Init: async function (options = {}) {
+  ];
+  static Tokens = {};
+  static async instance(options = {}) {
     const { idModal } = options;
-    this.Tokens[idModal] = options;
+    Docs.Tokens[idModal] = options;
     setTimeout(() => {
       s(`.btn-docs-src`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'src' });
-        await this.RenderModal('src');
+        await Docs.RenderModal('src');
       };
       s(`.btn-docs-api`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'api' });
-        await this.RenderModal('api');
+        await Docs.RenderModal('api');
       };
       s(`.btn-docs-coverage`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'coverage' });
-        await this.RenderModal('coverage');
+        await Docs.RenderModal('coverage');
       };
-
       s(`.btn-docs-coverage-link`).onclick = () => {
-        const docData = this.Data.find((d) => d.type === 'coverage-link');
+        const docData = Docs.Data.find((d) => d.type === 'coverage-link');
         location.href = docData.url();
       };
       s(`.btn-docs-repo`).onclick = () => {
-        const docData = this.Data.find((d) => d.type === 'repo');
+        const docData = Docs.Data.find((d) => d.type === 'repo');
         location.href = docData.url();
       };
       s(`.btn-docs-demo`).onclick = () => {
-        const docData = this.Data.find((d) => d.type === 'demo');
+        const docData = Docs.Data.find((d) => d.type === 'demo');
         location.href = docData.url();
       };
-
       listenQueryPathInstance({
         id: options.idModal,
         routeId: 'docs',
@@ -283,44 +287,15 @@ const Docs = {
         },
       });
     });
-    let docMenuRender = '';
-    for (const docData of this.Data) {
+    // Register theme events for items that have them (Docs-specific concern)
+    for (const docData of Docs.Data) {
       if (docData.themeEvent) {
         ThemeEvents[`doc-icon-${docData.type}`] = docData.themeEvent;
         setTimeout(ThemeEvents[`doc-icon-${docData.type}`]);
       }
-      let tabHref, style, labelStyle;
-      switch (docData.type) {
-        case 'repo':
-        case 'coverage-link':
-          style = renderCssAttr({ style: { height: '45px' } });
-          labelStyle = renderCssAttr({ style: { top: '8px', left: '9px' } });
-          break;
-
-        default:
-          break;
-      }
-      tabHref = docData.url();
-      const subMenuIcon =
-        options.subMenuIcon && typeof options.subMenuIcon === 'function'
-          ? options.subMenuIcon(docData.type)
-          : docData.icon;
-      docMenuRender += html`
-        ${await BtnIcon.Render({
-          class: `in wfa main-btn-menu submenu-btn btn-docs btn-docs-${docData.type}`,
-          label: html`<span class="inl menu-btn-icon">${subMenuIcon}</span
-            ><span class="menu-label-text menu-label-text-docs"> ${docData.text} </span>`,
-          tabHref,
-          tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
-          useMenuBtn: true,
-        })}
-      `;
     }
-    // s(`.menu-btn-container-children`).classList.remove('hide');
-    // htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
-
-    htmls('.menu-btn-container-children-docs', docMenuRender);
-
+    // Build submenu items and populate — submenu system is owned by Modal
+    Modal.subMenuPopulate('docs', await Modal.buildSubMenuItemsHtml('docs', Docs.Data, options));
     {
       const docsData = [
         {
@@ -360,7 +335,6 @@ const Docs = {
           description: 'Join our developer community',
         },
       ];
-
       return html`
         <style>
           .docs-landing {
@@ -499,7 +473,6 @@ const Docs = {
         </div>
       `;
     }
-  },
-};
-
+  }
+}
 export { Docs };

package/src/client/components/core/DropDown.js

@@ -5,18 +5,16 @@ import { Input } from './Input.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
 import { Translate } from './Translate.js';
 import { s, htmls } from './VanillaJs.js';
-
-const DropDown = {
-  Tokens: {},
-  Render: async function (options) {
-    const id = options.id ? options.id : getId(this.Tokens, 'dropdown-');
-    this.Tokens[id] = {
+class DropDown {
+  static Tokens = {};
+  static async instance(options) {
+    const id = options.id ? options.id : getId(DropDown.Tokens, 'dropdown-');
+    DropDown.Tokens[id] = {
       onClickEvents: {},
       lastSelectValue: undefined,
       oncheckvalues: {},
       originData: options.data ? newInstance(options.data) : [],
     };
-
     const _renderSelectedBadges = async () => {
       if (options.type !== 'checkbox') return;
       const container = s(`.dropdown-current-${id}`);
@@ -29,7 +27,7 @@ const DropDown = {
       let badgesHtml = '';
       for (const [key, val] of selected) {
         badgesHtml += html`<span class="inl" style="display:inline-flex;align-items:center;margin:2px;">
-          ${await Badge.Render({
+          ${await Badge.instance({
             text: html`<i class="fa-solid fa-tag" style="margin-right:3px;font-size:9px;"></i>${val.display}`,
             style: {
               background: darkTheme ? '#335' : '#cde',
@@ -67,12 +65,11 @@ const DropDown = {
       });
     };
     DropDown.Tokens[id]._renderSelectedBadges = _renderSelectedBadges;
-
     options.data.push({
       value: 'reset',
-      display: html`<i class="fa-solid fa-broom"></i> ${Translate.Render('clear')}`,
+      display: html`<i class="fa-solid fa-broom"></i> ${Translate.instance('clear')}`,
       onClick: () => {
-        console.log('DropDown onClick', this.value);
+        console.log('DropDown onClick', DropDown.value);
         if (options && options.resetOnClick) options.resetOnClick();
         if (options && options.type === 'checkbox') {
           DropDown.Tokens[id].oncheckvalues = {};
@@ -93,92 +90,85 @@ const DropDown = {
               }
             }
           }
-        } else this.Tokens[id].value = undefined;
+        } else DropDown.Tokens[id].value = undefined;
       },
     });
-
     if (!(options && options.disableClose))
       options.data.push({
         value: 'close',
-        display: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
+        display: html`<i class="fa-solid fa-xmark"></i> ${Translate.instance('close')}`,
         onClick: function () {
-          console.log('DropDown onClick', this.value);
+          console.log('DropDown onClick', DropDown.value);
         },
       });
-
     const switchOptionsPanel = () => {
       if (Array.from(s(`.dropdown-option-${id}`).classList).includes('hide'))
         s(`.dropdown-option-${id}`).classList.remove('hide');
       else s(`.dropdown-option-${id}`).classList.add('hide');
     };
-
     const _render = async (data) => {
       let render = '';
       let index = -1;
       for (const optionData of data) {
         index++;
         const i = index;
-        const valueDisplay = optionData.value.trim().replaceAll(' ', '-');
-        setTimeout(() => {
-          const onclick = async (e) => {
-            if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
-              s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.remove(options.lastSelectClass);
-            }
-            this.Tokens[id].lastSelectValue = valueDisplay;
-            if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
-              s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.add(options.lastSelectClass);
-            }
-
-            if (
-              !(options && options.disableClose) &&
-              (options.type !== 'checkbox' || optionData.value === 'close' || optionData.value === 'reset')
-            )
-              s(`.dropdown-option-${id}`).classList.add('hide');
-
-            if (options.type === 'checkbox' && ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`])
-              ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`].click();
-            if (optionData.value !== 'close') {
-              if (optionData.value !== 'reset') {
-                if (options.type === 'checkbox') {
-                  _renderSelectedBadges();
-                } else {
-                  htmls(`.dropdown-current-${id}`, optionData.display);
-                }
-              } else htmls(`.dropdown-current-${id}`, '');
-
-              this.Tokens[id].value =
-                options.type === 'checkbox'
-                  ? options.serviceProvider
-                    ? Object.values(DropDown.Tokens[id].oncheckvalues).map((v) => v.data)
-                    : data.filter((d) => d.checked).map((d) => d.data)
-                  : optionData.data;
-
-              console.warn('current value dropdown id:' + id, this.Tokens[id].value);
-
-              s(`.${id}`).value = this.Tokens[id].value;
-
-              optionData.onClick(e);
-            }
-          };
-
-          this.Tokens[id].onClickEvents[`dropdown-option-${id}-${i}`] = onclick;
-          this.Tokens[id].onClickEvents[`dropdown-option-${id}-${valueDisplay}`] = onclick;
-          this.Tokens[id].onClickEvents[`dropdown-option-${valueDisplay}`] = onclick;
-
-          s(`.dropdown-option-${id}-${i}`).onclick = onclick;
-        });
+        const optionValue = typeof optionData.value === 'string' ? optionData.value : `option-${i}`;
+        const valueDisplay = optionValue.trim().replaceAll(' ', '-');
+        const isGroup = optionData.kind === 'group' || optionData.nonSelectable === true;
+        if (!isGroup) {
+          setTimeout(() => {
+            const onclick = async (e) => {
+              if (options && options.lastSelectClass && s(`.dropdown-option-${DropDown.Tokens[id].lastSelectValue}`)) {
+                s(`.dropdown-option-${DropDown.Tokens[id].lastSelectValue}`).classList.remove(options.lastSelectClass);
+              }
+              DropDown.Tokens[id].lastSelectValue = valueDisplay;
+              if (options && options.lastSelectClass && s(`.dropdown-option-${DropDown.Tokens[id].lastSelectValue}`)) {
+                s(`.dropdown-option-${DropDown.Tokens[id].lastSelectValue}`).classList.add(options.lastSelectClass);
+              }
+              if (
+                !(options && options.disableClose) &&
+                (options.type !== 'checkbox' || optionData.value === 'close' || optionData.value === 'reset')
+              )
+                s(`.dropdown-option-${id}`).classList.add('hide');
+              if (options.type === 'checkbox' && ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`])
+                ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`].click();
+              if (optionData.value !== 'close') {
+                if (optionData.value !== 'reset') {
+                  if (options.type === 'checkbox') {
+                    _renderSelectedBadges();
+                  } else {
+                    htmls(`.dropdown-current-${id}`, optionData.display);
+                  }
+                } else htmls(`.dropdown-current-${id}`, '');
+                DropDown.Tokens[id].value =
+                  options.type === 'checkbox'
+                    ? options.serviceProvider
+                      ? Object.values(DropDown.Tokens[id].oncheckvalues).map((v) => v.data)
+                      : data.filter((d) => d.checked).map((d) => d.data)
+                    : optionData.data;
+                console.warn('current value dropdown id:' + id, DropDown.Tokens[id].value);
+                s(`.${id}`).value = DropDown.Tokens[id].value;
+                optionData.onClick(e);
+              }
+            };
+            DropDown.Tokens[id].onClickEvents[`dropdown-option-${id}-${i}`] = onclick;
+            DropDown.Tokens[id].onClickEvents[`dropdown-option-${id}-${valueDisplay}`] = onclick;
+            DropDown.Tokens[id].onClickEvents[`dropdown-option-${valueDisplay}`] = onclick;
+            s(`.dropdown-option-${id}-${i}`).onclick = onclick;
+          });
+        }
         render += html`
           <div
-            class="in dropdown-option dropdown-option-${id}-${i} dropdown-option-${id}-${valueDisplay} dropdown-option-${valueDisplay} ${valueDisplay ===
-              'reset' &&
-            options &&
-            !(options.resetOption === true)
-              ? 'hide'
+            class="in dropdown-option ${isGroup
+              ? `dropdown-option-group dropdown-option-group-${id}`
+              : `dropdown-option-${id}-${i} dropdown-option-${id}-${valueDisplay} dropdown-option-${valueDisplay} ${valueDisplay === 'reset' && options && !(options.resetOption === true) ? 'hide' : ''}`}"
+            style="${isGroup
+              ? 'cursor:default;opacity:.8;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding-top:8px;padding-bottom:6px;'
               : ''}"
           >
-            ${options.type === 'checkbox' && optionData.value !== 'close' && optionData.value !== 'reset'
+            ${!isGroup && options.type === 'checkbox' && optionData.value !== 'close' && optionData.value !== 'reset'
               ? html`
-                  ${await ToggleSwitch.Render({
+                  ${await ToggleSwitch.instance({
                     id: `checkbox-role-${valueDisplay}`,
                     type: 'checkbox',
                     disabledOnClick: true,
@@ -205,7 +195,6 @@ const DropDown = {
       }
       return { render, index };
     };
-
     setTimeout(() => {
       if (options.type === 'checkbox')
         options.data.map((optionData) => {
@@ -216,21 +205,16 @@ const DropDown = {
         const indexValue = options.data.findIndex((t) => t.value === options.value);
         if (indexValue > -1) setTimeout(() => s(`.dropdown-option-${id}-${indexValue}`).click());
       }
-
       s(`.dropdown-label-${id}`).onclick = switchOptionsPanel;
       s(`.dropdown-current-${id}`).onclick = switchOptionsPanel;
       if (options && options.open) switchOptionsPanel();
-
       if (options.type === 'checkbox') {
         ThemeEvents[`dropdown-badge-${id}`] = () => _renderSelectedBadges();
       }
-
       const dropDownSearchHandle = async () => {
         const _data = [];
         if (!s(`.search-box-${id}`)) return;
-
         let _value = s(`.search-box-${id}`).value.toLowerCase();
-
         for (const objData of options.data) {
           if (
             options.excludeSelected &&
@@ -249,7 +233,6 @@ const DropDown = {
             _data.push(objData);
           }
         }
-
         if (_data.length > 0) {
           const { render, index } = await _render(_data);
           htmls(`.${id}-render-container`, render);
@@ -258,12 +241,11 @@ const DropDown = {
           htmls(
             `.${id}-render-container`,
             html` <div class="inl" style="padding: 10px; color: red">
-              <i class="fas fa-exclamation-circle"></i> ${Translate.Render('no-result-found')}
+              <i class="fas fa-exclamation-circle"></i> ${Translate.instance('no-result-found')}
             </div>`,
           );
         }
       };
-
       if (options.serviceProvider) {
         let serviceSearchTimeout = null;
         s(`.search-box-${id}`).oninput = () => {
@@ -295,7 +277,7 @@ const DropDown = {
                 htmls(
                   `.${id}-render-container`,
                   html` <div class="inl" style="padding: 10px; color: red">
-                    <i class="fas fa-exclamation-circle"></i> ${Translate.Render('no-result-found')}
+                    <i class="fas fa-exclamation-circle"></i> ${Translate.instance('no-result-found')}
                   </div>`,
                 );
               }
@@ -307,13 +289,10 @@ const DropDown = {
       } else {
         s(`.search-box-${id}`).oninput = dropDownSearchHandle;
       }
-
       // Not use onblur generate bug on input toggle
       // s(`.search-box-${id}`).onblur = dropDownSearchHandle;
     });
-
     const { render, index } = await _render(options.data);
-
     return html`
       <div class="inl dropdown-container ${id} ${options?.containerClass ? options.containerClass : ''}">
         <div class="in dropdown-option dropdown-label-${id} ${options && options.disableSelectLabel ? 'hide' : ''}">
@@ -326,9 +305,9 @@ const DropDown = {
         ></div>
         <div class="in dropdown-option-${id} hide">
           <div class="in dropdown-option ${options && options.disableSearchBox ? 'hide' : ''}">
-            ${await Input.Render({
+            ${await Input.instance({
               id: `search-box-${id}`,
-              label: html`<i class="fa-solid fa-magnifying-glass"></i> ${Translate.Render('search')}`,
+              label: html`<i class="fa-solid fa-magnifying-glass"></i> ${Translate.instance('search')}`,
               containerClass: 'in',
               placeholder: true,
             })}
@@ -337,7 +316,6 @@ const DropDown = {
         </div>
       </div>
     `;
-  },
-};
-
+  }
+}
 export { DropDown };

package/src/client/components/core/EventBus.js

@@ -0,0 +1,92 @@
+class EventBus {
+  constructor() {
+    this.target = new EventTarget();
+    this.listeners = new Map();
+    this.typeKeys = new Map();
+    this.bridges = new Map();
+  }
+
+  ensureBridge(type) {
+    if (this.bridges.has(type)) return;
+
+    const bridge = async (event) => {
+      const deferred = event._deferred;
+
+      try {
+        const keys = [...(this.typeKeys.get(type) ?? [])];
+        for (const key of keys) {
+          const entry = this.listeners.get(key);
+          if (!entry) continue;
+
+          await entry.listener(event.detail, event);
+          if (entry.once) this.off(key);
+        }
+
+        deferred?.resolve();
+      } catch (error) {
+        deferred?.reject(error);
+      }
+    };
+
+    this.bridges.set(type, bridge);
+    this.target.addEventListener(type, bridge);
+  }
+
+  on(type, listener, options = {}) {
+    const key = options.key ?? Symbol(type);
+
+    this.off(key);
+    this.ensureBridge(type);
+
+    const keys = this.typeKeys.get(type) ?? new Set();
+    keys.add(key);
+    this.typeKeys.set(type, keys);
+
+    this.listeners.set(key, {
+      type,
+      listener,
+      once: Boolean(options.once),
+    });
+
+    return () => this.off(key);
+  }
+
+  off(key) {
+    const entry = this.listeners.get(key);
+    if (!entry) return false;
+
+    this.listeners.delete(key);
+    const keys = this.typeKeys.get(entry.type);
+    if (keys) {
+      keys.delete(key);
+      if (keys.size === 0) this.typeKeys.delete(entry.type);
+    }
+
+    return true;
+  }
+
+  has(key) {
+    return this.listeners.has(key);
+  }
+
+  async emit(type, detail) {
+    if (!(this.typeKeys.get(type)?.size > 0)) return;
+
+    const event = new CustomEvent(type, { detail });
+    return await new Promise((resolve, reject) => {
+      event._deferred = { resolve, reject };
+      this.target.dispatchEvent(event);
+    });
+  }
+
+  async emitKey(key, detail) {
+    const entry = this.listeners.get(key);
+    if (!entry) return;
+
+    const event = new CustomEvent(entry.type, { detail });
+    await entry.listener(detail, event);
+    if (entry.once) this.off(key);
+  }
+}
+
+export { EventBus };