underpost 3.2.4 → 3.2.8

package/src/client/components/default/{MenuDefault.js → AppShellDefault.js}

@@ -12,7 +12,7 @@ import { htmls, s } from '../core/VanillaJs.js';
 import { extractUsernameFromPath, getProxyPath, getQueryParams } from '../core/Router.js';
 import { AppStoreDefault } from './AppStoreDefault.js';
 import Sortable from 'sortablejs';
-import { RouterDefault, BannerAppTemplate } from './RoutesDefault.js';
+import { RouterDefault, BannerAppTemplate } from './RouterDefault.js';
 import { SettingsDefault } from './SettingsDefault.js';
 import { Badge } from '../core/Badge.js';
 import { Recover } from '../core/Recover.js';
@@ -23,178 +23,178 @@ import { PanelForm } from '../core/PanelForm.js';
 import { Chat } from '../core/Chat.js';
 import { PublicProfile } from '../core/PublicProfile.js';
 
-const MenuDefault = {
-  Data: {},
-  Render: async function (options = { htmlMainBody: () => html`` }) {
-    const id = getId(this.Data, 'menu-');
-    this.Data[id] = {};
-    const RouterInstance = RouterDefault();
+class AppShellDefault {
+  static Data = {};
+  static async instance(options = { htmlMainBody: () => html`` }) {
+    const id = getId(AppShellDefault.Data, 'menu-');
+    AppShellDefault.Data[id] = {};
+    const RouterInstance = RouterDefault.instance();
 
     const { barConfig } = await Themes[Css.currentTheme]();
 
     const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
     const barMode = undefined; // 'top-bottom-bar';
-    await Modal.Render({
+    await Modal.instance({
       id: 'modal-menu',
       html: html`
         <div class="style-lading-render"></div>
         <div class="fl menu-btn-container">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-home main-btn-menu-active',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-home"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('home')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('home')}</span>`,
             }),
             // style: 'display: none',
             attrs: `data-id="home"`,
             tabHref: `${getProxyPath()}`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('home')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('home')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-log-in',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-sign-in-alt"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('log-in')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('log-in')}</span>`,
             }),
             attrs: `data-id="log-in"`,
             tabHref: `${getProxyPath()}log-in`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-in')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('log-in')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-sign-up',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-user-plus"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('sign-up')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('sign-up')}</span>`,
             }),
             attrs: `data-id="sign-up"`,
             tabHref: `${getProxyPath()}sign-up`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('sign-up')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('sign-up')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-log-out',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-sign-out-alt"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('log-out')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('log-out')}</span>`,
             }),
             attrs: `data-id="log-out"`,
             style: 'display: none',
             tabHref: `${getProxyPath()}log-out`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-out')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('log-out')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-account',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-user-circle"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('account')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('account')}</span>`,
             }),
             style: 'display: none',
             attrs: `data-id="account"`,
             tabHref: `${getProxyPath()}account`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('account')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('account')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-public-profile',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-user-tag"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('public-profile')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('public-profile')}</span>`,
             }),
             style: 'display: none',
             attrs: `data-id="public-profile"`,
             tabHref: `${getProxyPath()}u`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('public-profile')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('public-profile')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-settings',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-sliders-h"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('settings')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('settings')}</span>`,
             }),
             attrs: `data-id="settings"`,
             tabHref: `${getProxyPath()}settings`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('settings')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('settings')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-recover hide',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('recover')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('recover')}</span>`,
             }),
             attrs: `data-id="recover"`,
             tabHref: `${getProxyPath()}recover`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('recover')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('recover')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-default-management',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-rectangle-list"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('default-management')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('default-management')}</span>`,
             }),
             attrs: `data-id="default-management"`,
             tabHref: `${getProxyPath()}default-management`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('default-management')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('default-management')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-404 hide',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-triangle-exclamation"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('404')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('404')}</span>`,
             }),
             attrs: `data-id="404"`,
             tabHref: `${getProxyPath()}404`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('404')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('404')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-500 hide',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-circle-exclamation"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('500')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('500')}</span>`,
             }),
             attrs: `data-id="500"`,
             tabHref: `${getProxyPath()}500`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('500')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('500')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-blog',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-file-invoice"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('blog')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('blog')}</span>`,
             }),
             attrs: `data-id="blog"`,
             tabHref: `${getProxyPath()}blog`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('blog')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('blog')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-chat',
             useMenuBtn: true,
             label: html`${renderMenuLabel({
               icon: html`<i class="far fa-comments"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('chat')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('chat')}</span>`,
             })}
-            ${await Badge.Render({
+            ${await Badge.instance({
               id: 'main-btn-chat',
               type: 'circle-red',
               style: badgeNotificationMenuStyle,
@@ -203,7 +203,7 @@ const MenuDefault = {
             attrs: `data-id="chat"`,
             tabHref: `${getProxyPath()}chat`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('chat')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('chat')),
           })}
         </div>
       `,
@@ -432,7 +432,7 @@ const MenuDefault = {
 
     setTimeout(ThemeEvents['main-theme-handler']);
 
-    this.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
+    AppShellDefault.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
       animation: 150,
       group: `menu-sortable`,
       forceFallback: true,
@@ -483,15 +483,15 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-sign-up`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-sign-up',
         route: 'sign-up',
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fas fa-user-plus"></i>`,
-          text: Translate.Render('sign-up'),
+          text: Translate.instance('sign-up'),
         }),
-        html: async () => await SignUp.Render({ idModal: 'modal-sign-up' }),
+        html: async () => await SignUp.instance({ idModal: 'modal-sign-up' }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -502,15 +502,15 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-log-out`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-log-out',
         route: 'log-out',
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fas fa-sign-out-alt"></i>`,
-          text: Translate.Render('log-out'),
+          text: Translate.instance('log-out'),
         }),
-        html: async () => await LogOut.Render(),
+        html: async () => await LogOut.instance(),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -521,15 +521,15 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-log-in`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-log-in',
         route: 'log-in',
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fas fa-sign-in-alt"></i>`,
-          text: Translate.Render('log-in'),
+          text: Translate.instance('log-in'),
         }),
-        html: async () => await LogIn.Render(),
+        html: async () => await LogIn.instance(),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -540,16 +540,16 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-account`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-account',
         route: 'account',
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fas fa-user-circle"></i>`,
-          text: Translate.Render('account'),
+          text: Translate.instance('account'),
         }),
         html: async () =>
-          await Account.Render({
+          await Account.instance({
             idModal: 'modal-account',
             user: AppStoreDefault.Data.user.main.model.user,
             disabled: [],
@@ -582,17 +582,17 @@ const MenuDefault = {
         }
       }
 
-      await Modal.Render({
+      await Modal.instance({
         id: idModal,
         route: 'u',
         barConfig,
         title: '',
         //   renderViewTitle({
         //   icon: html`<i class="fas fa-user-circle"></i>`,
-        //   text: Translate.Render('public-profile'),
+        //   text: Translate.instance('public-profile'),
         // }),
         html: async () =>
-          await PublicProfile.Render({
+          await PublicProfile.instance({
             idModal,
             user,
           }),
@@ -607,15 +607,15 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-settings`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-settings',
         route: 'settings',
         barConfig,
         title: renderViewTitle({
           icon: html` <i class="fas fa-sliders-h"></i>`,
-          text: Translate.Render('settings'),
+          text: Translate.instance('settings'),
         }),
-        html: async () => await SettingsDefault.Render({ idModal: 'modal-settings' }),
+        html: async () => await SettingsDefault.instance({ idModal: 'modal-settings' }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -626,16 +626,16 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-recover`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-recover',
         route: 'recover',
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
-          text: Translate.Render('recover'),
+          text: Translate.instance('recover'),
         }),
         html: async () =>
-          await Recover.Render({ idModal: 'modal-recover', user: AppStoreDefault.Data.user.main.model.user }),
+          await Recover.instance({ idModal: 'modal-recover', user: AppStoreDefault.Data.user.main.model.user }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -646,15 +646,15 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-default-management`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-default-management',
         route: 'default-management',
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fa-solid fa-rectangle-list"></i>`,
-          text: Translate.Render('default-management'),
+          text: Translate.instance('default-management'),
         }),
-        html: async () => await DefaultManagement.RenderTable(),
+        html: async () => await DefaultManagement.instance(),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -666,15 +666,15 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-404`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-404',
         route: '404',
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fa-solid fa-triangle-exclamation"></i>`,
-          text: Translate.Render('404'),
+          text: Translate.instance('404'),
         }),
-        html: async () => await Page404.Render({ idModal: 'modal-404' }),
+        html: async () => await Page404.instance({ idModal: 'modal-404' }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -686,15 +686,15 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-500`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-500',
         route: '500',
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fa-solid fa-circle-exclamation"></i>`,
-          text: Translate.Render('500'),
+          text: Translate.instance('500'),
         }),
-        html: async () => await Page500.Render({ idModal: 'modal-500' }),
+        html: async () => await Page500.instance({ idModal: 'modal-500' }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -709,13 +709,13 @@ const MenuDefault = {
       const idModal = 'modal-blog';
       const routeModal = 'blog';
       const idEvent = `form-panel-${idModal}`;
-      await Modal.Render({
+      await Modal.instance({
         id: idModal,
         route: routeModal,
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fa-solid fa-file-invoice"></i>`,
-          text: Translate.Render('blog'),
+          text: Translate.instance('blog'),
         }),
         observer: true,
         html: async () => {
@@ -741,15 +741,15 @@ const MenuDefault = {
 
     EventsUI.onClick(`.main-btn-chat`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-chat',
         route: 'chat',
         barConfig,
         title: renderViewTitle({
           icon: html` <i class="far fa-comments"></i>`,
-          text: Translate.Render('chat'),
+          text: Translate.instance('chat'),
         }),
-        html: async () => await Chat.Render({ idModal: 'modal-chat' }),
+        html: async () => await Chat.instance({ idModal: 'modal-chat' }),
         handleType: 'bar',
         maximize: true,
         observer: true,
@@ -759,7 +759,7 @@ const MenuDefault = {
         barMode,
       });
     });
-  },
-};
+  }
+}
 
-export { MenuDefault };
+export { AppShellDefault };

package/src/client/components/default/CssDefault.js

@@ -8,20 +8,20 @@ const CssCommonDefault = async () => {
   return html``;
 };
 
-const CssDefaultDark = {
-  theme: 'default-dark',
-  dark: true,
-  render: async () => {
+class CssDefaultDark {
+  static theme = 'default-dark';
+  static dark = true;
+  static render = async () => {
     return (await CssCommonDefault()) + html``;
-  },
-};
+  };
+}
 
-const CssDefaultLight = {
-  theme: 'default-light',
-  dark: false,
-  render: async () => {
+class CssDefaultLight {
+  static theme = 'default-light';
+  static dark = false;
+  static render = async () => {
     return (await CssCommonDefault()) + html``;
-  },
-};
+  };
+}
 
 export { CssDefaultDark, CssCommonDefault, CssDefaultLight };

package/src/client/components/default/LogInDefault.js

@@ -2,13 +2,15 @@ import { Auth } from '../core/Auth.js';
 import { LogIn } from '../core/LogIn.js';
 import { AppStoreDefault } from './AppStoreDefault.js';
 
-const LogInDefault = async function () {
-  LogIn.Event['LogInDefault'] = async (options) => {
+class LogInDefault {
+  static async instance() {
+  LogIn.onLogin(async (options) => {
     const { token, user } = options;
     AppStoreDefault.Data.user.main.model.user = user;
-  };
+  }, { key: 'LogInDefault' });
   const { user } = await Auth.sessionIn();
   AppStoreDefault.Data.user.main.model.user = user;
-};
+  }
+}
 
 export { LogInDefault };

package/src/client/components/default/LogOutDefault.js

@@ -1,10 +1,12 @@
 import { LogOut } from '../core/LogOut.js';
 import { AppStoreDefault } from './AppStoreDefault.js';
 
-const LogOutDefault = async function () {
-  LogOut.Event['LogOutDefault'] = async (result = { user: { _id: '' } }) => {
+class LogOutDefault {
+  static async instance() {
+  LogOut.onLogout(async (result = { user: { _id: '' } }) => {
     AppStoreDefault.Data.user.main.model.user = result.user;
-  };
-};
+  }, { key: 'LogOutDefault' });
+  }
+}
 
 export { LogOutDefault };

package/src/client/components/default/RouterDefault.js

@@ -0,0 +1,47 @@
+import { loggerFactory } from '../core/Logger.js';
+import { Modal } from '../core/Modal.js';
+import { s } from '../core/VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const BannerAppTemplate = html`<strong class="inl" style="font-family: system-ui">PWA</strong>`;
+
+class RouterDefault {
+  static routes() {
+    return {
+      '/': {
+        title: 'Home',
+        render: () => Modal.onHomeRouterEvent(),
+      },
+      '/home': { title: 'home', render: () => Modal.onHomeRouterEvent() },
+      '/settings': { title: 'settings', render: () => s(`.main-btn-settings`).click() },
+      '/log-in': { title: 'log-in', render: () => s(`.main-btn-log-in`).click() },
+      '/sign-up': { title: 'sign-up', render: () => s(`.main-btn-sign-up`).click() },
+      '/log-out': {
+        title: 'log-out',
+        render: () => s(`.main-btn-log-out`).click(),
+      },
+      '/account': {
+        title: 'account',
+        render: () => s(`.main-btn-account`).click(),
+      },
+      '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
+      '/chat': { title: 'docs', render: () => s(`.main-btn-chat`).click() },
+      '/blog': { title: 'docs', render: () => s(`.main-btn-blog`).click() },
+      '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click() },
+      '/default-management': {
+        title: 'default-management',
+        render: () => s(`.main-btn-default-management`).click(),
+      },
+      '/u': { title: 'public-profile', render: () => s(`.main-btn-public-profile`).click() },
+      '/404': { title: '404 Not Found', render: () => s(`.main-btn-404`).click() },
+      '/500': { title: '500 Server Error', render: () => s(`.main-btn-500`).click() },
+    };
+  }
+
+  static instance() {
+    return { Routes: RouterDefault.routes };
+  }
+}
+
+export { RouterDefault, BannerAppTemplate };

package/src/client/components/default/SettingsDefault.js

@@ -3,14 +3,14 @@ import { FullScreen } from '../core/FullScreen.js';
 import { Translate } from '../core/Translate.js';
 import { Worker } from '../core/Worker.js';
 
-const SettingsDefault = {
-  Render: async function () {
+class SettingsDefault {
+  static async instance() {
     let render = await FullScreen.RenderSetting();
     render += await Css.RenderSetting();
     render += await Translate.RenderSetting();
     render += await Worker.RenderSetting();
     return render;
-  },
-};
+  }
+}
 
 export { SettingsDefault };

package/src/client/components/default/SignUpDefault.js

@@ -1,9 +1,11 @@
 import { SignUp } from '../core/SignUp.js';
 
-const SignUpDefault = function () {
-  SignUp.Event['SignUpDefault'] = async (options) => {
+class SignUpDefault {
+  static instance() {
+  SignUp.onSignup(async (options) => {
     const { user } = options;
-  };
-};
+  }, { key: 'SignUpDefault' });
+  }
+}
 
 export { SignUpDefault };

package/src/client/components/default/TranslateDefault.js

@@ -1,7 +1,7 @@
 import { Translate } from '../core/Translate.js';
 
-const TranslateDefault = {
-  Init: async function () {},
-};
+class TranslateDefault {
+  static async instance() {}
+}
 
 export { TranslateDefault };