underpost 2.85.7 → 2.89.1

package/src/cli/run.js

@@ -58,6 +58,8 @@ class UnderpostRun {
    * @property {string} stdin - The stdin option for the container.
    * @property {string} restartPolicy - The restart policy for the container.
    * @property {boolean} terminal - Whether to open a terminal.
+   * @property {number} devProxyPortOffset - The port offset for the development proxy.
+   * @property {string} confServerPath - The configuration server path.
    * @memberof UnderpostRun
    */
   static DEFAULT_OPTION = {
@@ -80,6 +82,7 @@ class UnderpostRun {
     restartPolicy: '',
     terminal: false,
     devProxyPortOffset: 0,
+    confServerPath: '',
   };
   /**
    * @static
@@ -257,30 +260,6 @@ class UnderpostRun {
       shellExec(`node bin deploy --restore-hosts`);
     },
 
-    /**
-     * @method cyberia-ide
-     * @description Starts the development environment (IDE) for both `cyberia-server` and `cyberia-client` repositories.
-     * @param {string} path - The input value, identifier, or path for the operation.
-     * @param {Object} options - The default underpost runner options for customizing workflow
-     * @memberof UnderpostRun
-     */
-    'cyberia-ide': (path, options = UnderpostRun.DEFAULT_OPTION) => {
-      const baseCommand = options.dev ? 'node bin' : 'underpost';
-      shellExec(`${baseCommand} run ide /home/dd/cyberia-server`);
-      shellExec(`${baseCommand} run ide /home/dd/cyberia-client`);
-    },
-    /**
-     * @method engine-ide
-     * @description Starts the development environment (IDE) for the `engine` and `engine-private` repositories.
-     * @param {string} path - The input value, identifier, or path for the operation.
-     * @param {Object} options - The default underpost runner options for customizing workflow
-     * @memberof UnderpostRun
-     */
-    'engine-ide': (path, options = UnderpostRun.DEFAULT_OPTION) => {
-      const baseCommand = options.dev ? 'node bin' : 'underpost';
-      shellExec(`${baseCommand} run ide /home/dd/engine`);
-      shellExec(`${baseCommand} run ide /home/dd/engine/engine-private`);
-    },
     /**
      * @method cluster-build
      * @description Build configuration for cluster deployment.
@@ -293,8 +272,12 @@ class UnderpostRun {
       shellExec(`node bin run --dev sync-replica template-deploy`);
       shellExec(`node bin run sync-replica template-deploy`);
       shellExec(`node bin env clean`);
-      shellExec(`git add . && underpost cmt . build cluster-build`);
-      shellExec(`cd engine-private && git add . && underpost cmt . build cluster-build`);
+      for (const deployId of fs.readFileSync('./engine-private/deploy/dd.router', 'utf8').split(','))
+        shellExec(`node bin/deploy update-default-conf ${deployId.trim()}`);
+      if (path === 'cmt') {
+        shellExec(`git add . && underpost cmt . build cluster-build`);
+        shellExec(`cd engine-private && git add . && underpost cmt . build cluster-build`);
+      }
     },
     /**
      * @method template-deploy
@@ -423,6 +406,7 @@ class UnderpostRun {
       // Dev usage: node bin run --dev --build sync dd-default
       const env = options.dev ? 'development' : 'production';
       const baseCommand = options.dev ? 'node bin' : 'underpost';
+      const baseClusterCommand = options.dev ? ' --dev' : '';
       const defaultPath = [
         'dd-default',
         1,
@@ -440,6 +424,8 @@ class UnderpostRun {
       if (isDeployRunnerContext(path, options)) {
         const { validVersion } = UnderpostRepository.API.privateConfUpdate(deployId);
         if (!validVersion) throw new Error('Version mismatch');
+        shellExec(`${baseCommand} run${baseClusterCommand} tz`);
+        shellExec(`${baseCommand} run${baseClusterCommand} cron`);
       }
 
       const currentTraffic = isDeployRunnerContext(path, options)
@@ -461,6 +447,39 @@ class UnderpostRun {
         UnderpostDeploy.API.switchTraffic(deployId, env, targetTraffic);
       } else logger.info('current traffic', UnderpostDeploy.API.getCurrentTraffic(deployId));
     },
+
+    /**
+     * @method tz
+     * @description Sets the system timezone using `timedatectl set-timezone` command.
+     * @param {string} path - The input value, identifier, or path for the operation (used as the timezone string).
+     * @param {Object} options - The default underpost runner options for customizing workflow
+     * @memberof UnderpostRun
+     */
+    tz: (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      const tz = path
+        ? path
+        : UnderpostRootEnv.API.get('TIME_ZONE', undefined, { disableLog: true })
+          ? UnderpostRootEnv.API.get('TIME_ZONE')
+          : process.env.TIME_ZONE
+            ? process.env.TIME_ZONE
+            : 'America/New_York';
+      shellExec(`sudo timedatectl set-timezone ${tz}`);
+    },
+
+    /**
+     * @method cron
+     * @description Sets up and starts the `dd-cron` environment by writing environment variables, starting the cron service, and cleaning up.
+     * @param {string} path - The input value, identifier, or path for the operation.
+     * @param {Object} options - The default underpost runner options for customizing workflow
+     * @memberof UnderpostRun
+     */
+    cron: (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      const env = options.dev ? 'development' : 'production';
+      shellExec(`node bin env ${path ? path : 'dd-cron'} ${env}`);
+      shellExec(`npm start`);
+      shellExec(`node bin env clean`);
+    },
+
     /**
      * @method ls-deployments
      * @description Retrieves and logs a table of Kubernetes deployments using `UnderpostDeploy.API.get`.
@@ -806,6 +825,22 @@ class UnderpostRun {
      */
     dev: async (path = '', options = UnderpostRun.DEFAULT_OPTION) => {
       let [deployId, subConf, host, _path, clientHostPort] = path.split(',');
+      if (options.confServerPath) {
+        const confServer = JSON.parse(fs.readFileSync(options.confServerPath, 'utf8'));
+        fs.writeFileSync(
+          `./engine-private/conf/${deployId}/conf.server.dev.${subConf}.json`,
+          JSON.stringify(
+            {
+              [host]: {
+                [_path]: confServer[host][_path],
+              },
+            },
+            null,
+            4,
+          ),
+          'utf8',
+        );
+      }
       if (!deployId) deployId = 'dd-default';
       if (!host) host = 'default.net';
       if (!_path) _path = '/';
@@ -820,7 +855,7 @@ class UnderpostRun {
         envObj.DEV_PROXY_PORT_OFFSET = options.devProxyPortOffset;
         writeEnv(envPath, envObj);
       }
-      shellExec(`node bin run dev-cluster expose`);
+      shellExec(`node bin run dev-cluster expose`, { async: true });
       {
         const cmd = `npm run dev-api ${deployId} ${subConf} ${host} ${_path} ${clientHostPort}${options.tls ? ' tls' : ''}`;
         options.terminal ? openTerminal(cmd) : shellExec(cmd, { async: true });
@@ -896,6 +931,41 @@ class UnderpostRun {
       }
     },
 
+    /**
+     * @method sh
+     * @description Enables remote control for the Kitty terminal emulator.
+     * @param {string} path - The input value, identifier, or path for the operation.
+     * @param {Object} options - The default underpost runner options for customizing workflow
+     * @memberof UnderpostRun
+     */
+    sh: async (path = '', options = UnderpostRun.DEFAULT_OPTION) => {
+      let [operator, arg0, arg1] = path.split(',');
+      if (operator == 'copy') {
+        shellExec(
+          `kitty @ get-text ${arg0 === 'all' ? '--match all' : '--self'} --extent all${arg1 === 'ansi' ? ' --ansi yes' : ''} | kitty +kitten clipboard`,
+        );
+        return;
+      }
+      shellExec(`kitty -o allow_remote_control=yes`);
+    },
+
+    /**
+     * @method log
+     * @description Searches and highlights keywords in a specified log file, optionally showing surrounding lines.
+     * @param {string} path - The input value, identifier, or path for the operation (formatted as `filePath,keywords,lines`).
+     * @param {Object} options - The default underpost runner options for customizing workflow
+     * @memberof UnderpostRun
+     */
+    log: async (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      const [filePath, keywords, lines] = path.split(',');
+      let result = shellExec(`grep -i -E ${lines ? `-C ${lines} ` : ''}'${keywords}' ${filePath}`, {
+        stdout: true,
+        silent: true,
+      }).replaceAll(`--`, `==============================`.green.bold);
+      for (const keyword of keywords.split('|')) result = result.replaceAll(keyword, keyword.bgYellow.black.bold);
+      console.log(result);
+    },
+
     /**
      * @method release-cmt
      * @description Commits and pushes a new release for the `engine` repository with a message indicating the new version.
@@ -927,15 +997,13 @@ class UnderpostRun {
         const _path = '/single-replica';
         const confServer = JSON.parse(fs.readFileSync(`./engine-private/conf/${deployId}/conf.server.json`, 'utf8'));
         shellExec(`${baseCommand} env ${deployId} ${env}`);
-        for (const host of Object.keys(confServer)) {
-          if (!(_path in confServer[host])) continue;
-          shellExec(`node bin/deploy build-single-replica ${deployId} ${host} ${_path}`);
-          shellExec(`node bin/deploy build-full-client ${deployId}`);
-          const node = options.dev || !isDeployRunnerContext(path, options) ? 'kind-control-plane' : os.hostname();
-          // deployId, replicas, versions, image, node
-          let defaultPath = [deployId, 1, ``, ``, node];
-          shellExec(`${baseCommand} run${options.dev === true ? ' --dev' : ''} --build sync ${defaultPath}`);
-        }
+        for (const host of Object.keys(confServer))
+          if (_path in confServer[host]) shellExec(`node bin/deploy build-single-replica ${deployId} ${host} ${_path}`);
+        const node = options.dev || !isDeployRunnerContext(path, options) ? 'kind-control-plane' : os.hostname();
+        // deployId, replicas, versions, image, node
+        let defaultPath = [deployId, 1, ``, ``, node];
+        shellExec(`${baseCommand} run${options.dev === true ? ' --dev' : ''} --build sync ${defaultPath}`);
+        shellExec(`node bin/deploy build-full-client ${deployId}`);
       }
       if (isDeployRunnerContext(path, options)) shellExec(`${baseCommand} run promote ${path} production`);
     },

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

@@ -11,7 +11,7 @@ const AgGrid = {
   grids: {},
   theme: `ag-theme-alpine`, // quartz
   Render: async function (options) {
-    let { id } = options;
+    let { id, paginationOptions } = options;
     setTimeout(() => {
       // Grid Options: Contains all of the grid configurations
       const gridOptions = {
@@ -34,6 +34,38 @@ const AgGrid = {
             return params.data && params.data._new;
           },
         },
+        // Cell rendering events
+        onFirstDataRendered: options?.onFirstDataRendered,
+        onViewportChanged: options?.onViewportChanged,
+        onModelUpdated: options?.onModelUpdated,
+        onVirtualRowRemoved: options?.onVirtualRowRemoved,
+        // Cell interaction events
+        onCellClicked: options?.onCellClicked,
+        onCellDoubleClicked: options?.onCellDoubleClicked,
+        onCellFocused: options?.onCellFocused,
+        onCellMouseOver: options?.onCellMouseOver,
+        onCellMouseOut: options?.onCellMouseOut,
+        onCellValueChanged: options?.onCellValueChanged,
+        // set background colour on every row, this is probably bad, should be using CSS classes
+        // rowStyle: { background: 'black' },
+
+        // set background colour on even rows again, this looks bad, should be using CSS classes
+        // getRowStyle: (params) => {
+        //   if (params.node.rowIndex % 2 === 0) {
+        //     return { background: 'red' };
+        //   }
+        // },
+
+        // all rows assigned CSS class 'my-green-class'
+        // rowClass: 'my-green-class',
+
+        // all even rows assigned 'my-shaded-effect'
+        // getRowClass: (params) => {
+        //   if (params.node.rowIndex % 2 === 0) {
+        //     return 'my-shaded-effect';
+        //   }
+        // },
+
         // domLayout: 'autoHeight', || 'normal'
         // Column Definitions: Defines & controls grid columns.
         columnDefs: options?.gridOptions?.rowData?.[0]
@@ -62,7 +94,9 @@ const AgGrid = {
       if (!options.style || !options.style.height) {
         if (options.parentModal && Modal.Data[options.parentModal].options.observer) {
           Modal.Data[options.parentModal].onObserverListener[id + '-observer'] = ({ width, height }) => {
-            if (s(`.${id}`)) s(`.${id}`).style.height = `${height - 180}px`;
+            if (s(`.${id}`))
+              s(`.${id}`).style.height =
+                `${height - 180 + (options.customHeightOffset ? options.customHeightOffset : 0)}px`;
             else delete Modal.Data[options.parentModal].onObserverListener[id + '-observer'];
           };
           s(`.${id}`).style.height = `${s(`.${options.parentModal}`).offsetHeight - 180}px`;
@@ -70,6 +104,9 @@ const AgGrid = {
       }
     });
     const usePagination = options?.usePagination;
+    const limitOptionsAttr = paginationOptions?.limitOptions
+      ? `limit-options='${JSON.stringify(paginationOptions.limitOptions)}'`
+      : '';
     return html`
       <div
         class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
@@ -77,7 +114,7 @@ const AgGrid = {
           ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
           : ''}"
       ></div>
-      ${usePagination ? `<ag-pagination id="ag-pagination-${id}"></ag-pagination>` : ''}
+      ${usePagination ? `<ag-pagination id="ag-pagination-${id}" ${limitOptionsAttr}></ag-pagination>` : ''}
     `;
   },
   RenderStyle: async function (
@@ -159,6 +196,7 @@ const AgGrid = {
           ${darkTheme
             ? html`
                 <style>
+                  .row-new-highlight,
                   .ag-row.row-new-highlight {
                     background-color: #6d68ff !important;
                     transition: background-color 1s ease-out;
@@ -172,6 +210,7 @@ const AgGrid = {
                 </style>
               `
             : html`<style>
+                .row-new-highlight,
                 .ag-row.row-new-highlight {
                   background-color: #d0eaf8 !important;
                   transition: background-color 1s ease-out;

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

@@ -947,6 +947,8 @@ const emotionsData = [
 const userRoleEnum = ['admin', 'moderator', 'user', 'guest'];
 const commonAdminGuard = (role) => userRoleEnum.indexOf(role) === userRoleEnum.indexOf('admin');
 const commonModeratorGuard = (role) => userRoleEnum.indexOf(role) <= userRoleEnum.indexOf('moderator');
+const commonUserGuard = (role) => userRoleEnum.indexOf(role) <= userRoleEnum.indexOf('user');
+const commonGuestGuard = (role) => userRoleEnum.indexOf(role) <= userRoleEnum.indexOf('guest');
 
 export {
   s4,
@@ -1003,6 +1005,8 @@ export {
   generateRandomPasswordSelection,
   commonAdminGuard,
   commonModeratorGuard,
+  commonUserGuard,
+  commonGuestGuard,
   isChileanIdentityDocument,
   getCurrentTrace,
   userRoleEnum,

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

@@ -221,8 +221,11 @@ const borderChar = (px, color, selectors, hover = false) => {
         (selector) => html`
           <style>
             ${selector}${hover ? ':hover' : ''} {
-              text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color},
-                -${px}px -${px}px ${px}px ${color}, ${px}px ${px}px ${px}px ${color};
+              text-shadow:
+                ${px}px -${px}px ${px}px ${color},
+                -${px}px ${px}px ${px}px ${color},
+                -${px}px -${px}px ${px}px ${color},
+                ${px}px ${px}px ${px}px ${color};
             }
           </style>
         `,
@@ -239,20 +242,28 @@ const boxShadow = ({ selector }) => html`
     ? html`
         <style>
           ${selector} {
-            box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.1), 0 6px 20px 0 rgba(255, 255, 255, 0.08);
+            box-shadow:
+              0 4px 8px 0 rgba(255, 255, 255, 0.1),
+              0 6px 20px 0 rgba(255, 255, 255, 0.08);
           }
           ${selector}:hover {
-            box-shadow: 0 8px 16px 0 rgba(255, 255, 255, 0.15), 0 10px 30px 0 rgba(255, 255, 255, 0.1);
+            box-shadow:
+              0 8px 16px 0 rgba(255, 255, 255, 0.15),
+              0 10px 30px 0 rgba(255, 255, 255, 0.1);
           }
         </style>
       `
     : html`
         <style>
           ${selector} {
-            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+            box-shadow:
+              0 4px 8px 0 rgba(0, 0, 0, 0.2),
+              0 6px 20px 0 rgba(0, 0, 0, 0.19);
           }
           ${selector}:hover {
-            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
+            box-shadow:
+              0 8px 16px 0 rgba(0, 0, 0, 0.2),
+              0 10px 30px 0 rgba(0, 0, 0, 0.3);
           }
         </style>
       `}
@@ -452,7 +463,9 @@ const typeWriter = async function ({ id, html, seconds, endHideBlink, container
           overflow: hidden;
           border-right: 0.15em solid orange;
           white-space: nowrap;
-          animation: typing-${id} ${typingAnimationTransitionStyle[1]}, blink-caret-${id} 0.5s step-end infinite;
+          animation:
+            typing-${id} ${typingAnimationTransitionStyle[1]},
+            blink-caret-${id} 0.5s step-end infinite;
           animation-fill-mode: forwards;
           width: 0;
         }
@@ -517,12 +530,20 @@ const dashRange = ({ selector, color }) => {
   return html`
     <style>
       .${selector} {
-        background: linear-gradient(90deg, ${color} 50%, transparent 50%),
-          linear-gradient(90deg, ${color} 50%, transparent 50%), linear-gradient(0deg, ${color} 50%, transparent 50%),
-          linear-gradient(0deg, ${color} 50%, transparent 50%);
+        background:
+          linear-gradient(90deg, ${color} 50%, transparent 50%), linear-gradient(90deg, ${color} 50%, transparent 50%),
+          linear-gradient(0deg, ${color} 50%, transparent 50%), linear-gradient(0deg, ${color} 50%, transparent 50%);
         background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-        background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
-        background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px;
+        background-size:
+          16px 4px,
+          16px 4px,
+          4px 16px,
+          4px 16px;
+        background-position:
+          0% 0%,
+          100% 100%,
+          0% 100%,
+          100% 0px;
         border-radius: 5px;
         padding: 10px;
         animation: ${selector}_dash_range 5s linear infinite;
@@ -530,7 +551,11 @@ const dashRange = ({ selector, color }) => {
 
       @keyframes ${selector}_dash_range {
         to {
-          background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;
+          background-position:
+            100% 0%,
+            0% 100%,
+            0% 0%,
+            100% 100%;
         }
       }
     </style>
@@ -660,8 +685,8 @@ const scrollBarLightRender = () => {
         ::-` +
         b +
         `-scrollbar {
-          width: 5px;      
-          height: 5px; 
+          width: 5px;
+          height: 5px;
         }
 
         /* Track */
@@ -690,6 +715,10 @@ const scrollBarLightRender = () => {
     .join('');
 };
 
+// adjustHex: supports #RGB #RGBA #RRGGBB #RRGGBBAA
+// preserves alpha channel if present (does not modify it)
+// usage: adjustHex('#24FBFFFF', 0.1)
+
 function adjustHex(hex, factor = 0.1, options = {}) {
   if (typeof hex !== 'string') throw new TypeError('hex must be a string');
   if (typeof factor !== 'number') throw new TypeError('factor must be a number');
@@ -701,27 +730,34 @@ function adjustHex(hex, factor = 0.1, options = {}) {
 
   const mode = options.mode === 'hsl' ? 'hsl' : 'mix';
 
-  // normalize hex
+  // normalize hex: accept 3,4,6,8 (with or without #)
   let h = hex.replace(/^#/, '').trim();
-  if (!(h.length === 3 || h.length === 6)) throw new Error('Invalid hex format');
-  if (h.length === 3)
+  if (![3, 4, 6, 8].includes(h.length)) {
+    throw new Error('Invalid hex format — expected 3, 4, 6 or 8 hex digits');
+  }
+
+  // expand shorthand (#RGB or #RGBA -> #RRGGBB or #RRGGBBAA)
+  if (h.length === 3 || h.length === 4) {
     h = h
       .split('')
       .map((c) => c + c)
       .join('');
+  }
+
+  const hasAlpha = h.length === 8;
 
   const r = parseInt(h.slice(0, 2), 16);
   const g = parseInt(h.slice(2, 4), 16);
   const b = parseInt(h.slice(4, 6), 16);
+  const a = hasAlpha ? parseInt(h.slice(6, 8), 16) : null; // keep alpha as-is if present
 
-  const clamp = (v, a = 0, z = 255) => Math.max(a, Math.min(z, v));
+  const clamp = (v, a0 = 0, z = 255) => Math.max(a0, Math.min(z, v));
 
-  const rgbToHex = (rr, gg, bb) =>
-    '#' +
-    [rr, gg, bb]
-      .map((v) => Math.round(v).toString(16).padStart(2, '0'))
-      .join('')
-      .toLowerCase();
+  const rgbToHex = (rr, gg, bb, aa = null) => {
+    const parts = [rr, gg, bb].map((v) => Math.round(v).toString(16).padStart(2, '0'));
+    if (aa !== null) parts.push(Math.round(aa).toString(16).padStart(2, '0'));
+    return '#' + parts.join('').toLowerCase();
+  };
 
   if (mode === 'mix') {
     // positive: mix toward white (255); negative: mix toward black (0)
@@ -729,11 +765,15 @@ function adjustHex(hex, factor = 0.1, options = {}) {
       if (factor >= 0) {
         return clamp(Math.round(c + (255 - c) * factor));
       } else {
-        const a = Math.abs(factor);
-        return clamp(Math.round(c * (1 - a)));
+        const aFactor = Math.abs(factor);
+        return clamp(Math.round(c * (1 - aFactor)));
       }
     };
-    return rgbToHex(mixChannel(r), mixChannel(g), mixChannel(b));
+
+    const rr = mixChannel(r);
+    const gg = mixChannel(g);
+    const bb = mixChannel(b);
+    return rgbToHex(rr, gg, bb, a);
   } else {
     // HSL mode: convert rgb to hsl, adjust L by factor, convert back
     const rgbToHsl = (r, g, b) => {
@@ -791,10 +831,16 @@ function adjustHex(hex, factor = 0.1, options = {}) {
     let newL = ll + factor;
     newL = Math.max(0, Math.min(1, newL));
     const { r: r2, g: g2, b: b2 } = hslToRgb(hh, ss, newL);
-    return rgbToHex(r2, g2, b2);
+    return rgbToHex(r2, g2, b2, a);
   }
 }
 
+// Examples (uncomment to test):
+// console.log(adjustHex('#24FBFFFF', 0.1)); // accepts 8-digit input
+// console.log(adjustHex('#24FBFF', 0.1));   // 6-digit
+// console.log(adjustHex('#4bf', -0.2));     // 3-digit
+// console.log(adjustHex('#4bf8', -0.2));    // 4-digit (with alpha)
+
 // Convenience helpers:
 function lightenHex(hex, percentOr01 = 0.1, options = {}) {
   return adjustHex(hex, Math.abs(percentOr01), options);
@@ -867,7 +913,7 @@ const scrollBarDarkRender = () => {
         b +
         `-scrollbar {
       width: 8px;
-      height: 8px; 
+      height: 8px;
       /* line-height: 1em; */
     }
 
@@ -1011,29 +1057,30 @@ const cssEffect = async (containerSelector, event) => {
   }, 600);
 };
 
-const imageShimmer = () => html`<div
-  class="abs center ssr-shimmer-search-box"
-  style="${renderCssAttr({
-    style: {
-      width: '95%',
-      height: '95%',
-      'border-radius': '10px',
-      overflow: 'hidden',
-    },
-  })}"
->
-  <div
-    class="abs center"
+const imageShimmer = () =>
+  html`<div
+    class="abs center ssr-shimmer-search-box"
     style="${renderCssAttr({
       style: {
-        'font-size': '70px',
-        color: `#bababa`,
+        width: '95%',
+        height: '95%',
+        'border-radius': '10px',
+        overflow: 'hidden',
       },
     })}"
   >
-    <i class="fa-solid fa-photo-film"></i>
-  </div>
-</div>`;
+    <div
+      class="abs center"
+      style="${renderCssAttr({
+        style: {
+          'font-size': '70px',
+          color: `#bababa`,
+        },
+      })}"
+    >
+      <i class="fa-solid fa-photo-film"></i>
+    </div>
+  </div>`;
 
 const renderChessPattern = (patternSize = 20) =>
   `background: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / ${patternSize}px ${patternSize}px`;

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

@@ -230,7 +230,6 @@ const CssCommonCore = async () => {
       .menu-btn-icon {
         font-size: 20px;
         width: 40px;
-        overflow: hidden;
         text-align: center;
       }
     </style>

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

@@ -57,7 +57,7 @@ const LoadingAnimation = {
   },
   spinner: {
     getId: (id) => `spinner-progress-${id.slice(1)}`,
-    play: async function (container, spinner) {
+    play: async function (container, spinner, options = { append: '', prepend: '' }) {
       if (!s(container)) return;
       const id = this.getId(container);
 
@@ -85,7 +85,7 @@ const LoadingAnimation = {
               style,
             })}"
           >
-            ${render}
+            ${options.prepend ? options.prepend : ''} ${render} ${options.append ? options.append : ''}
           </div>
         `,
       );

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

@@ -5,16 +5,9 @@ const loggerFactory = (meta, options = { trace: false }) => {
   const types = ['error', 'warn', 'info', 'debug'];
   const logger = {
     log: function (type, args) {
-      if (location.hostname !== 'localhost' && console.log() !== null) {
-        console.log = () => null;
-        console.error = () => null;
-        console.info = () => null;
-        console.warn = () => null;
-      }
+      if (!window.renderPayload.dev) return;
       if (options.trace === true) args.push(getCurrentTrace().split('Logger.js:23')[1]);
-      return location.hostname === 'localhost'
-        ? console[type](`[${meta}] ${new Date().toISOString()} ${type}:`, ...args)
-        : null;
+      return console[type](`[${meta}] ${new Date().toISOString()} ${type}:`, ...args);
     },
   };
   types.map(