cyberia 3.0.2 → 3.0.3

package/src/cli/run.js

@@ -32,7 +32,6 @@ const logger = loggerFactory(import.meta);
  * @property {string} podName - The name of the pod to run.
  * @property {string} nodeName - The name of the node to run.
  * @property {number} port - Custom port to use.
- * @property {boolean} etcHosts - Whether to modify /etc/hosts.
  * @property {string} volumeHostPath - The host path for the volume.
  * @property {string} volumeMountPath - The mount path for the volume.
  * @property {string} imageName - The name of the image to run.
@@ -85,9 +84,12 @@ const logger = loggerFactory(import.meta);
  * @property {string} monitorStatusKindType - The monitor status kind type option.
  * @property {string} monitorStatusDeltaMs - The monitor status delta in milliseconds.
  * @property {string} monitorStatusMaxAttempts - The maximum number of attempts for monitor status.
+ * @property {boolean} logs - Whether to enable logs.
  * @property {boolean} dryRun - Whether to perform a dry run.
  * @property {boolean} createJobNow - Whether to create the job immediately.
- * @property {boolean} logs - Whether to enable logs.
+ * @property {string|Array<{ip: string, hostnames: string[]}>} hostAliases - Adds entries to the Pod /etc/hosts via Kubernetes hostAliases.
+ *   As a string (CLI): semicolon-separated entries of "ip=hostname1,hostname2" (e.g., "127.0.0.1=foo.local,bar.local;10.1.2.3=foo.remote").
+ *   As an array (programmatic): objects with `ip` and `hostnames` fields (e.g., [{ ip: "127.0.0.1", hostnames: ["foo.local"] }]).
  * @memberof UnderpostRun
  */
 const DEFAULT_OPTION = {
@@ -150,6 +152,7 @@ const DEFAULT_OPTION = {
   logs: false,
   dryRun: false,
   createJobNow: false,
+  hostAliases: '',
 };
 
 /**
@@ -1840,6 +1843,30 @@ EOF
       const imagePullPolicy = options.imagePullPolicy || 'IfNotPresent';
       const hostNetwork = options.hostNetwork ? options.hostNetwork : '';
       const apiVersion = options.apiVersion || 'v1';
+      // Parse hostAliases option:
+      //   - string from CLI: "ip1=host1,host2;ip2=host3,host4"
+      //   - array from programmatic callers: [{ ip: "127.0.0.1", hostnames: ["foo.local"] }]
+      const hostAliases = options.hostAliases
+        ? Array.isArray(options.hostAliases)
+          ? options.hostAliases
+          : options.hostAliases
+              .split(';')
+              .filter((entry) => entry.trim())
+              .map((entry) => {
+                const [ip, hostnamesStr] = entry.split('=');
+                const hostnames = hostnamesStr ? hostnamesStr.split(',').map((h) => h.trim()) : [];
+                return { ip: ip.trim(), hostnames };
+              })
+        : [];
+      const hostAliasesYaml =
+        hostAliases.length > 0
+          ? `  hostAliases:\n${hostAliases
+              .map(
+                (alias) =>
+                  `  - ip: "${alias.ip}"\n    hostnames:\n${alias.hostnames.map((h) => `    - "${h}"`).join('\n')}`,
+              )
+              .join('\n')}`
+          : '';
       const labels = options.labels
         ? options.labels
             .split(',')
@@ -1870,6 +1897,7 @@ spec:
   restartPolicy: ${restartPolicy}
 ${runtimeClassName ? `  runtimeClassName: ${runtimeClassName}` : ''}
 ${hostNetwork ? `  hostNetwork: ${hostNetwork}` : ''}
+${hostAliasesYaml}
   containers:
     - name: ${containerName}
       image: ${imageName}

package/src/client/Underpost.index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+import { Css } from './components/core/Css.js';
+import { Responsive } from './components/core/Responsive.js';
+import { TranslateCore } from './components/core/Translate.js';
+import { LogInUnderpost } from './components/underpost/LogInUnderpost.js';
+import { LogOutUnderpost } from './components/underpost/LogOutUnderpost.js';
+import { SignUpUnderpost } from './components/underpost/SignUpUnderpost.js';
+import { MenuUnderpost } from './components/underpost/MenuUnderpost.js';
+import { RouterUnderpost } from './components/underpost/RoutesUnderpost.js';
+import { TranslateUnderpost } from './components/underpost/TranslateUnderpost.js';
+import { Worker } from './components/core/Worker.js';
+import { UnderpostParams } from './components/underpost/CommonUnderpost.js';
+import { Keyboard } from './components/core/Keyboard.js';
+import { SocketIoUnderpost } from './components/underpost/SocketIoUnderpost.js';
+import { SocketIo } from './components/core/SocketIo.js';
+import { ElementsUnderpost } from './components/underpost/ElementsUnderpost.js';
+import { CssUnderpostDark, CssUnderpostLight } from './components/underpost/CssUnderpost.js';
+
+window.onload = () =>
+  Worker.instance({
+    router: RouterUnderpost,
+    render: async () => {
+      await Css.loadThemes([CssUnderpostDark, CssUnderpostLight]);
+      await TranslateCore.Init();
+      await TranslateUnderpost.Init();
+      await Responsive.Init();
+      await MenuUnderpost.Render();
+      await SocketIo.Init({ channels: ElementsUnderpost.Data });
+      await SocketIoUnderpost.Init();
+      await LogInUnderpost();
+      await LogOutUnderpost();
+      await SignUpUnderpost();
+      await Keyboard.Init({ callBackTime: UnderpostParams.EVENT_CALLBACK_TIME });
+    },
+  });

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

@@ -23,6 +23,7 @@ import {
   coreUI,
   sanitizeRoute,
   getQueryParams,
+  setRouterReady,
 } from './Router.js';
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
@@ -1401,6 +1402,7 @@ const Modal = {
                 }
               });
               setTimeout(window.onresize);
+              setRouterReady();
             });
           })();
           break;

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

@@ -196,7 +196,7 @@ const PublicProfile = {
       user: { _id: userId, username },
     } = options;
     const idModal = options.idModal || getId();
-    const profileId = `public-profile-${userId}`;
+    const profileId = `public-profile-${username}`;
     const waveAnimationId = `${profileId}-wave`;
     const profileImageClass = `${profileId}-image`;
     const profileContainerId = `${profileId}-container`;
@@ -673,7 +673,7 @@ const PublicProfile = {
             "
           >
             <div
-              class="${profileId}-image-container"
+              class="${profileId}-image-container public-profile-image-container"
               style="
                 position: relative;
                 width: 160px;
@@ -688,7 +688,7 @@ const PublicProfile = {
               "
             >
               <img
-                class="${profileImageClass}"
+                class="${profileImageClass} public-profile-image"
                 style="
                   width: 100%;
                   height: 100%;

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

@@ -39,6 +39,36 @@ const coreUI = ['modal-menu', 'main-body', 'main-body-top', 'bottom-bar', 'board
  */
 const closeModalRouteChangeEvents = {};
 
+/**
+ * Deferred promise that resolves once the full UI (including deferred slide-menu DOM
+ * setup in Modal) is ready.  Any code that depends on the complete DOM — route handlers,
+ * session callbacks, panel updates, etc. — can simply `await RouterReady` instead of
+ * scattering individual null-checks across every microfrontend.
+ *
+ * Resolved by calling `setRouterReady()`, which should happen exactly once at the end
+ * of Modal's deferred slide-menu `setTimeout` block.
+ * @type {Promise<void>}
+ * @memberof PwaRouter
+ */
+let _routerReadyResolve;
+const RouterReady = new Promise((resolve) => {
+  _routerReadyResolve = resolve;
+});
+
+/**
+ * Signals that the deferred UI setup is complete and the router (and any other
+ * awaiter of `RouterReady`) may safely access the full DOM.
+ * This must be called exactly once – typically at the end of Modal's deferred
+ * slide-menu `setTimeout` block.
+ * @memberof PwaRouter
+ */
+const setRouterReady = () => {
+  if (_routerReadyResolve) {
+    _routerReadyResolve();
+    _routerReadyResolve = undefined;
+  }
+};
+
 /**
  * Determines the base path for the application, often used for routing within a sub-directory.
  * It checks the current URL's pathname and `window.Routes` to return the appropriate proxy path.
@@ -209,7 +239,8 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent() })
  * @param {object} RouterInstance - The router instance configuration, including the `Routes` function.
  * @memberof PwaRouter
  */
-const LoadRouter = function (RouterInstance) {
+const LoadRouter = async function (RouterInstance) {
+  await RouterReady;
   Router(RouterInstance);
   window.onpopstate = (e) => {
     Router({ ...RouterInstance, e });
@@ -466,4 +497,6 @@ export {
   sanitizeRoute,
   queryParamsChangeListeners,
   listenQueryParamsChange,
+  setRouterReady,
+  RouterReady,
 };

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

@@ -135,7 +135,7 @@ class PwaWorker {
     const isInstall = await this.status();
     if (!isInstall) await this.install();
     await render();
-    LoadRouter(this.RouterInstance);
+    await LoadRouter(this.RouterInstance);
     LoadingAnimation.removeSplashScreen();
     if (this.devMode()) {
       // const delayLiveReload = 1250;

package/src/client/components/cryptokoyn/CssCryptokoyn.js

@@ -30,6 +30,7 @@ const CssCommonCryptokoyn = async () => {
         --cy-font-retro: 'retro-font';
         --cy-font-retro-title: 'retro-font-title';
         --cy-font-retro-sensitive: 'retro-font-sensitive';
+        --cy-font-retro-cta: 'retro-font-cta';
       }
 
       @font-face {
@@ -44,6 +45,64 @@ const CssCommonCryptokoyn = async () => {
         font-family: 'retro-font-sensitive';
         src: URL('${getProxyPath()}assets/fonts/VT323-Regular.ttf') format('truetype');
       }
+      @font-face {
+        font-family: 'retro-font-cta';
+        src: URL('${getProxyPath()}assets/fonts/PressStart2P-Regular.ttf') format('truetype');
+      }
+
+      /* Landing Page & Object Viewer Styles */
+      .landing-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        width: 100%;
+        background: #000;
+        color: #fff;
+        text-align: center;
+      }
+
+      .landing-title,
+      h1,
+      h2,
+      h3 {
+        font-family: var(--cy-font-retro-cta);
+        font-size: 5rem;
+        color: #ff0d0d;
+        text-shadow: 2px 2px 0px #9e0808;
+        margin-bottom: 2rem;
+      }
+
+      p {
+        font-family: var(--cy-font-retro);
+      }
+
+      .object-layer-viewer-container {
+        width: 100% !important;
+        font-family: var(--cy-font-retro);
+      }
+
+      .cta-button {
+        font-family: var(--cy-font-retro-cta);
+        font-size: 1.5rem;
+        padding: 1rem 2rem;
+        border: 3px solid #ff0d0d;
+        background: transparent;
+        color: #ff0d0d;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+        text-shadow: 1px 1px 0px #9e0808;
+      }
+
+      .cta-button:hover {
+        background: #ff0d0d;
+        color: #000;
+        box-shadow:
+          0 0 20px #ff0d0d,
+          0 0 40px #ff0d0d;
+        text-shadow: none;
+      }
 
       /* Base typography and smoothing */
 
@@ -86,6 +145,9 @@ const CssCommonCryptokoyn = async () => {
       .main-btn-menu {
         font-size: 20px;
       }
+      .input-container {
+        width: 278px;
+      }
     </style>
 
     <div class="ag-grid-style"></div>`;
@@ -137,7 +199,7 @@ const CssCryptokoynLight = {
           }
           .default-slide-menu-top-bar-fix-title-container-text {
             font-size: 40px !important;
-            color: yellow !important;
+            color: #ffcc00 !important;
           }
         </style>
         ${borderChar(1, `#010101`, ['.default-slide-menu-top-bar-fix-title-container-text'])}

package/src/client/components/cyberia/ObjectLayerEngineModal.js

@@ -192,6 +192,16 @@ const ObjectLayerEngineModal = {
     const { Elements } = options;
 
     const directionCodes = ['08', '18', '02', '12', '04', '14', '06', '16'];
+    const directionCodeLabels = {
+      '08': 'Down Idle',
+      18: 'Down Walk',
+      '02': 'Up Idle',
+      12: 'Up Walk',
+      '04': 'Left Idle',
+      14: 'Left Walk',
+      '06': 'Right Idle',
+      16: 'Right Walk',
+    };
     const itemTypes = ['skin', 'weapon', 'armor', 'artifact', 'floor'];
     const statTypes = ['effect', 'resistance', 'agility', 'range', 'intelligence', 'utility'];
 
@@ -355,7 +365,7 @@ const ObjectLayerEngineModal = {
       const capturedDirectionCode = directionCode;
 
       if (!s(`.frames-${capturedDirectionCode}`)) {
-        logger.warn(`Frames container for direction code ${capturedDirectionCode} not found`);
+        console.warn(`Frames container for direction code ${capturedDirectionCode} not found`);
         return;
       }
 
@@ -481,7 +491,7 @@ const ObjectLayerEngineModal = {
       let loader = s('object-layer-png-loader');
 
       if (!ole || !loader) {
-        logger.warn('object-layer-engine or object-layer-png-loader component not found after retries');
+        console.warn('object-layer-engine or object-layer-png-loader component not found after retries');
         return;
       }
 
@@ -516,7 +526,7 @@ const ObjectLayerEngineModal = {
         <div class="in section-mp-border">
           <div class="fl">
             <div class="in fll">
-              <div class="in direction-code-bar-frames-title">${directionCode}</div>
+              <div class="in direction-code-bar-frames-title">${directionCodeLabels[directionCode]}</div>
               <div class="in direction-code-bar-frames-btn">
                 ${await BtnIcon.Render({
                   label: html`
@@ -564,139 +574,153 @@ const ObjectLayerEngineModal = {
     }
 
     setTimeout(async () => {
+      let loadFramesInProgress = false;
       const loadFrames = async () => {
-        showFrameLoading();
-
-        // Clear all frames and data at the start to prevent duplication from multiple calls
-        // This must happen BEFORE any async operations to avoid race conditions
-        for (const directionCode of directionCodes) {
-          // Clear DOM frames for this direction code
-          const framesContainer = s(`.frames-${directionCode}`);
-          if (framesContainer) {
-            framesContainer.innerHTML = '';
-          }
-          // Clear data for this direction code
-          ObjectLayerEngineModal.ObjectLayerData[directionCode] = [];
+        // Concurrency guard: skip if already loading to prevent duplicate frames
+        if (loadFramesInProgress) {
+          console.warn('loadFrames already in progress, skipping duplicate call');
+          return;
         }
+        loadFramesInProgress = true;
+
+        try {
+          showFrameLoading();
+
+          // Clear all frames and data at the start to prevent duplication from multiple calls
+          // This must happen BEFORE any async operations to avoid race conditions
+          for (const directionCode of directionCodes) {
+            // Clear DOM frames for this direction code
+            const framesContainer = s(`.frames-${directionCode}`);
+            if (framesContainer) {
+              framesContainer.innerHTML = '';
+            }
+            // Clear data for this direction code
+            ObjectLayerEngineModal.ObjectLayerData[directionCode] = [];
+          }
 
-        for (const directionCode of directionCodes) {
-          // Use IIFE to properly capture directionCode and handle async operations
-          await (async (currentDirectionCode) => {
-            // Register frame add button handler after DOM is ready
-            // Wait longer to ensure all direction bars are rendered
-
-            if (loadedData && loadedData.metadata && loadedData.metadata.data && currentDirectionCode) {
-              // Show loading animation only once on first direction that has frames
-
-              const { type, id } = loadedData.metadata.data.item;
-              const directions = ObjectLayerEngineModal.getDirectionsFromDirectionCode(currentDirectionCode);
-
-              console.log(`Loading frames for direction code: ${currentDirectionCode}, directions:`, directions);
-
-              // Check if frames exist for any direction mapped to this direction code
-              const { frames } = loadedData.objectLayerRenderFramesId;
-              for (const direction of directions) {
-                if (frames[direction] && frames[direction].length > 0) {
-                  // Track this direction code as having original data
-                  if (!ObjectLayerEngineModal.originalDirectionCodes.includes(currentDirectionCode)) {
-                    ObjectLayerEngineModal.originalDirectionCodes.push(currentDirectionCode);
-                  }
-                  // Load frames from static PNG URLs sequentially to avoid race conditions
-                  const frameCount = frames[direction].length;
-                  console.log(`Found ${frameCount} frames for direction: ${direction} (code: ${currentDirectionCode})`);
-                  for (let frameIndex = 0; frameIndex < frameCount; frameIndex++) {
-                    const pngUrl = `${getProxyPath()}assets/${type}/${id}/${currentDirectionCode}/${frameIndex}.png`;
+          for (const directionCode of directionCodes) {
+            // Use IIFE to properly capture directionCode and handle async operations
+            await (async (currentDirectionCode) => {
+              // Register frame add button handler after DOM is ready
+              // Wait longer to ensure all direction bars are rendered
+
+              if (loadedData && loadedData.metadata && loadedData.metadata.data && currentDirectionCode) {
+                // Show loading animation only once on first direction that has frames
+
+                const { type, id } = loadedData.metadata.data.item;
+                const directions = ObjectLayerEngineModal.getDirectionsFromDirectionCode(currentDirectionCode);
+
+                console.log(`Loading frames for direction code: ${currentDirectionCode}, directions:`, directions);
+
+                // Check if frames exist for any direction mapped to this direction code
+                const { frames } = loadedData.objectLayerRenderFramesId;
+                for (const direction of directions) {
+                  if (frames[direction] && frames[direction].length > 0) {
+                    // Track this direction code as having original data
+                    if (!ObjectLayerEngineModal.originalDirectionCodes.includes(currentDirectionCode)) {
+                      ObjectLayerEngineModal.originalDirectionCodes.push(currentDirectionCode);
+                    }
+                    // Load frames from static PNG URLs sequentially to avoid race conditions
+                    const frameCount = frames[direction].length;
                     console.log(
-                      `Loading frame ${frameIndex} for direction code ${currentDirectionCode} from: ${pngUrl}`,
+                      `Found ${frameCount} frames for direction: ${direction} (code: ${currentDirectionCode})`,
                     );
-                    await processAndAddFrameFromPngUrl(currentDirectionCode, pngUrl);
+                    for (let frameIndex = 0; frameIndex < frameCount; frameIndex++) {
+                      const pngUrl = `${getProxyPath()}assets/${type}/${id}/${currentDirectionCode}/${frameIndex}.png`;
+                      console.log(
+                        `Loading frame ${frameIndex} for direction code ${currentDirectionCode} from: ${pngUrl}`,
+                      );
+                      await processAndAddFrameFromPngUrl(currentDirectionCode, pngUrl);
+                    }
+                    console.log(`Completed loading ${frameCount} frames for direction code: ${currentDirectionCode}`);
+                    // Once we found frames for this direction code, we can break to avoid duplicates
+                    break;
                   }
-                  console.log(`Completed loading ${frameCount} frames for direction code: ${currentDirectionCode}`);
-                  // Once we found frames for this direction code, we can break to avoid duplicates
-                  break;
                 }
               }
-            }
 
-            const buttonSelector = `.direction-code-bar-frames-btn-${currentDirectionCode}`;
-            console.log(`Registering click handler for: ${buttonSelector}`);
+              const buttonSelector = `.direction-code-bar-frames-btn-${currentDirectionCode}`;
+              console.log(`Registering click handler for: ${buttonSelector}`);
 
-            EventsUI.onClick(buttonSelector, async () => {
-              console.log(`Add frame button clicked for direction: ${currentDirectionCode}`);
-              const ole = s('object-layer-engine');
-              if (!ole) {
-                console.error('object-layer-engine not found');
-                return;
-              }
-              const image = await ole.toBlob();
-              const json = ole.exportMatrixJSON();
-
-              // Check if we're in edit mode
-              if (editingFrameId && editingDirectionCode) {
-                // Ensure we're clicking the add button for the same direction being edited
-                if (currentDirectionCode !== editingDirectionCode) {
-                  NotificationManager.Push({
-                    html: `<i class="fa-solid fa-exclamation-circle"></i> Please click the glowing <i class="fa-solid fa-edit"></i> button for direction <strong>${editingDirectionCode}</strong> to save changes, or click <i class="fa-solid fa-times"></i> to cancel.`,
-                    status: 'warning',
-                  });
-                  return; // Don't add a new frame
+              EventsUI.onClick(buttonSelector, async () => {
+                console.log(`Add frame button clicked for direction: ${currentDirectionCode}`);
+                const ole = s('object-layer-engine');
+                if (!ole) {
+                  console.error('object-layer-engine not found');
+                  return;
                 }
+                const image = await ole.toBlob();
+                const json = ole.exportMatrixJSON();
+
+                // Check if we're in edit mode
+                if (editingFrameId && editingDirectionCode) {
+                  // Ensure we're clicking the add button for the same direction being edited
+                  if (currentDirectionCode !== editingDirectionCode) {
+                    NotificationManager.Push({
+                      html: `<i class="fa-solid fa-exclamation-circle"></i> Please click the glowing <i class="fa-solid fa-edit"></i> button for direction <strong>${editingDirectionCode}</strong> to save changes, or click <i class="fa-solid fa-times"></i> to cancel.`,
+                      status: 'warning',
+                    });
+                    return; // Don't add a new frame
+                  }
 
-                // UPDATE existing frame
-                console.log(`Updating frame ${editingFrameId} in direction ${editingDirectionCode}`);
-
-                // Find the frame in the data array
-                const frameArray = ObjectLayerEngineModal.ObjectLayerData[editingDirectionCode];
-                const frameIndex = frameArray?.findIndex((frame) => frame.id === editingFrameId);
-
-                if (frameIndex !== undefined && frameIndex >= 0) {
-                  // Update the frame data while preserving the ID and index
-                  frameArray[frameIndex] = {
-                    id: editingFrameId,
-                    image,
-                    json,
-                  };
-
-                  // Update the visual representation
-                  const imgElement = s(`.direction-code-bar-frames-img-${editingFrameId}`);
-                  if (imgElement) {
-                    imgElement.src = URL.createObjectURL(image);
+                  // UPDATE existing frame
+                  console.log(`Updating frame ${editingFrameId} in direction ${editingDirectionCode}`);
+
+                  // Find the frame in the data array
+                  const frameArray = ObjectLayerEngineModal.ObjectLayerData[editingDirectionCode];
+                  const frameIndex = frameArray?.findIndex((frame) => frame.id === editingFrameId);
+
+                  if (frameIndex !== undefined && frameIndex >= 0) {
+                    // Update the frame data while preserving the ID and index
+                    frameArray[frameIndex] = {
+                      id: editingFrameId,
+                      image,
+                      json,
+                    };
+
+                    // Update the visual representation
+                    const imgElement = s(`.direction-code-bar-frames-img-${editingFrameId}`);
+                    if (imgElement) {
+                      imgElement.src = URL.createObjectURL(image);
+                    }
+
+                    console.log(`Frame ${editingFrameId} updated successfully at index ${frameIndex}`);
+                    NotificationManager.Push({
+                      html: `<i class="fa-solid fa-check-circle"></i> Frame updated successfully at position ${frameIndex + 1}!`,
+                      status: 'success',
+                    });
+                  } else {
+                    console.error(`Could not find frame ${editingFrameId} in direction ${editingDirectionCode}`);
+                    NotificationManager.Push({
+                      html: `<i class="fa-solid fa-exclamation-triangle"></i> Error: Could not find frame to update`,
+                      status: 'error',
+                    });
                   }
 
-                  console.log(`Frame ${editingFrameId} updated successfully at index ${frameIndex}`);
-                  NotificationManager.Push({
-                    html: `<i class="fa-solid fa-check-circle"></i> Frame updated successfully at position ${frameIndex + 1}!`,
-                    status: 'success',
-                  });
+                  // Exit edit mode and restore UI
+                  exitEditMode();
                 } else {
-                  console.error(`Could not find frame ${editingFrameId} in direction ${editingDirectionCode}`);
-                  NotificationManager.Push({
-                    html: `<i class="fa-solid fa-exclamation-triangle"></i> Error: Could not find frame to update`,
-                    status: 'error',
-                  });
-                }
+                  // ADD new frame (existing behavior)
+                  const id = `frame-capture-${s4()}-${s4()}`;
+                  console.log(`Creating new frame ${id} for direction ${currentDirectionCode}`);
+
+                  if (!ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode])
+                    ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode] = [];
+                  ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode].push({ id, image, json });
+                  console.log(
+                    `Stored frame ${id} in direction code ${currentDirectionCode}. Total frames:`,
+                    ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode].length,
+                  );
 
-                // Exit edit mode and restore UI
-                exitEditMode();
-              } else {
-                // ADD new frame (existing behavior)
-                const id = `frame-capture-${s4()}-${s4()}`;
-                console.log(`Creating new frame ${id} for direction ${currentDirectionCode}`);
-
-                if (!ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode])
-                  ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode] = [];
-                ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode].push({ id, image, json });
-                console.log(
-                  `Stored frame ${id} in direction code ${currentDirectionCode}. Total frames:`,
-                  ObjectLayerEngineModal.ObjectLayerData[currentDirectionCode].length,
-                );
-
-                await addFrameToBar(currentDirectionCode, id, image, json);
-              }
-            });
-          })(directionCode);
+                  await addFrameToBar(currentDirectionCode, id, image, json);
+                }
+              });
+            })(directionCode);
+          }
+          hideFrameLoading();
+        } finally {
+          loadFramesInProgress = false;
         }
-        hideFrameLoading();
       };
       RouterEvents[`router-${options.idModal}`] = loadFrames;
 
@@ -748,6 +772,7 @@ const ObjectLayerEngineModal = {
           data: {
             stats: {},
             item: {},
+            ledger: { type: 'OFF_CHAIN' },
           },
         };
         for (const directionCode of directionCodes) {
@@ -980,6 +1005,7 @@ const ObjectLayerEngineModal = {
           font-weight: bold;
           font-size: 1.2rem;
           padding: 0.5rem;
+          width: 70px;
         }
         .direction-code-bar-frames-img {
           width: 100px;