@underpostnet/cyberia 3.2.90 → 3.3.73

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

@@ -1,17 +1,18 @@
 import { Css, darkTheme, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
 import { Modal, renderViewTitle } from './Modal.js';
+import { coverallsUrl, githubPagesUrl, githubUrl, packageRepository } from './Repository.js';
+import { Responsive } from './Responsive.js';
 import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
 import { s, sIframe } from './VanillaJs.js';
 // https://mintlify.com/docs/quickstart
 class Docs {
-  static async RenderModal(type) {
+  static async RenderModal(type, parentModalId = 'modal-docs') {
     const docData = Docs.Data.find((d) => d.type === type);
+    const parentModal = Modal.Data[parentModalId];
+    if (!docData || !parentModal?.options) return;
     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;
+    const parentBarMode = parentModal.options.barMode;
     await Modal.instance({
       barConfig,
       title: renderViewTitle(docData),
@@ -25,14 +26,12 @@ class Docs {
               border: none;
               background: white;
               display: block;
+              /* The frame is the only scroll container; the modal body must not
+                 gain one of its own from the height set on load. */
+              overflow: auto;
             }
           </style>
-          <iframe
-            class="in iframe-${ModalId}"
-            src="${docData.url()}"
-            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
-          >
-          </iframe>
+          <iframe class="in iframe-${ModalId}" src="${docData.url()}"> </iframe>
         `;
       },
       maximize: true,
@@ -42,7 +41,7 @@ class Docs {
       observer: true,
       barMode: parentBarMode,
       query: true,
-      RouterInstance: Modal.Data['modal-docs'].options.RouterInstance,
+      RouterInstance: parentModal.options.RouterInstance,
     });
     const iframeEl = s(`.iframe-${ModalId}`);
     let swaggerThemeEventKey = null;
@@ -65,48 +64,49 @@ class Docs {
         } catch (e) {
           // cross-origin or security restriction — safe to ignore
         }
-        // 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)
+        // These modals are fixed-position; scrolling the parent on iframe
+        // navigation shifts Chrome layout calculations and leaves view modals
+        // offset by 50px, so deep links re-sync the layout instead.
         try {
           const iframeWin = iframeEl.contentWindow;
           const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
           if (iframeDoc) {
+            // The frame re-runs this on every in-frame navigation; without
+            // releasing the previous document's listeners they accumulate for
+            // the lifetime of the modal.
             if (unbindIframeLayoutSync) unbindIframeLayoutSync();
             const onIframeAnchorClick = (e) => {
-              if (e.target && e.target.closest && e.target.closest('a')) {
-                scheduleViewLayoutSync();
-              }
+              if (e.target?.closest?.('a')) scheduleViewLayoutSync();
             };
             const onIframeHashChange = () => scheduleViewLayoutSync();
             const onIframePopState = () => scheduleViewLayoutSync();
+            // Mirrors the app-wide shortcut: the frame owns focus, so the parent
+            // never sees the keystroke unless the frame forwards it.
+            const onIframeSearchShortcut = (e) => {
+              if (!e.shiftKey || e.key?.toLowerCase() !== 'k') return;
+              const searchBox = s(`.top-bar-search-box`);
+              if (!searchBox) return;
+              e.preventDefault();
+              e.stopPropagation();
+              if (s(`.main-body-btn-ui-close`)?.classList.contains('hide')) s(`.main-body-btn-ui-open`).click();
+              searchBox.blur();
+              searchBox.focus();
+              searchBox.select();
+            };
             iframeDoc.addEventListener('click', onIframeAnchorClick, true);
+            iframeDoc.addEventListener('keydown', onIframeSearchShortcut);
             if (iframeWin) {
               iframeWin.addEventListener('hashchange', onIframeHashChange);
               iframeWin.addEventListener('popstate', onIframePopState);
             }
             unbindIframeLayoutSync = () => {
               iframeDoc.removeEventListener('click', onIframeAnchorClick, true);
+              iframeDoc.removeEventListener('keydown', onIframeSearchShortcut);
               if (iframeWin) {
                 iframeWin.removeEventListener('hashchange', onIframeHashChange);
                 iframeWin.removeEventListener('popstate', onIframePopState);
               }
             };
-            iframeDoc.addEventListener('keydown', (e) => {
-              if (e.shiftKey && e.key.toLowerCase() === 'k') {
-                e.preventDefault();
-                e.stopPropagation();
-                if (s(`.top-bar-search-box`)) {
-                  if (s(`.main-body-btn-ui-close`) && s(`.main-body-btn-ui-close`).classList.contains('hide')) {
-                    s(`.main-body-btn-ui-open`).click();
-                  }
-                  s(`.top-bar-search-box`).blur();
-                  s(`.top-bar-search-box`).focus();
-                  s(`.top-bar-search-box`).select();
-                }
-              }
-            });
           }
         } catch (e) {
           // cross-origin or security restriction — safe to ignore
@@ -159,19 +159,31 @@ class Docs {
         };
       }
     }
+    // The iframe is sized to the modal body rather than left to grow: an
+    // auto-height iframe inside a fixed-height modal scrolls the modal and the
+    // document it holds, which is where the double scrollbar comes from.
+    const resizeIframe = () => {
+      const frame = s(`.iframe-${ModalId}`);
+      const modalEl = s(`.${ModalId}`);
+      if (!frame || !modalEl) return;
+      const barEl = s(`.bar-default-modal-${ModalId}`);
+      const barHeight = barEl ? barEl.offsetHeight : Modal.headerTitleHeight;
+      frame.style.height = `${Math.max(modalEl.offsetHeight - barHeight, 0)}px`;
+    };
+
     Modal.Data[ModalId].onObserverListener[ModalId] = () => {
-      if (s(`.iframe-${ModalId}`)) {
-        const barEl = s(`.bar-default-modal-${ModalId}`);
-        const barHeight = barEl ? barEl.offsetHeight : Modal.headerTitleHeight;
-        s(`.iframe-${ModalId}`).style.height = `${s(`.${ModalId}`).offsetHeight - barHeight}px`;
-      }
+      resizeIframe();
       if (type.match('coverage')) {
         simpleIconsRender(`.doc-icon-coverage`);
         simpleIconsRender(`.doc-icon-coverage-link`);
       }
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
+    // The observer fires on modal mutations, not on viewport changes; a rotate
+    // or a window drag leaves the frame at its old height without this.
+    Responsive.onChanged(resizeIframe, { key: ModalId });
     Modal.Data[ModalId].onCloseListener[ModalId] = () => {
+      Responsive.offChanged(ModalId);
       if (unbindIframeLayoutSync) unbindIframeLayoutSync();
       if (swaggerThemeEventKey) delete ThemeEvents[swaggerThemeEventKey];
       closeModalRouteChangeEvent({ closedId: ModalId });
@@ -185,7 +197,7 @@ class Docs {
       url: function () {
         const tokenOpts = Docs.Tokens['modal-docs'];
         if (tokenOpts && tokenOpts.lastReleaseUrl) return tokenOpts.lastReleaseUrl();
-        return `https://github.com/underpostnet/pwa-microservices-template-ghpkg/`;
+        return githubUrl(packageRepository());
       },
     },
     {
@@ -201,7 +213,7 @@ class Docs {
       url: function () {
         const tokenOpts = Docs.Tokens['modal-docs'];
         if (tokenOpts && tokenOpts.demoUrl) return tokenOpts.demoUrl();
-        return `https://underpostnet.github.io/pwa-microservices-template-ghpkg/`;
+        return githubPagesUrl(packageRepository());
       },
     },
     {
@@ -238,7 +250,9 @@ class Docs {
       icon: html`<img height="20" width="20" class="doc-icon-coverage-link" />`,
       text: `Coverage`,
       url: function () {
-        return `https://coveralls.io/github/underpostnet/engine`;
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.coverageLinkUrl) return tokenOpts.coverageLinkUrl();
+        return coverallsUrl();
       },
       themeEvent: () => {
         if (s(`.doc-icon-coverage-link`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage-link`));
@@ -252,15 +266,15 @@ class Docs {
     setTimeout(() => {
       s(`.btn-docs-src`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'src' });
-        await Docs.RenderModal('src');
+        await Docs.RenderModal('src', idModal);
       };
       s(`.btn-docs-api`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'api' });
-        await Docs.RenderModal('api');
+        await Docs.RenderModal('api', idModal);
       };
       s(`.btn-docs-coverage`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'coverage' });
-        await Docs.RenderModal('coverage');
+        await Docs.RenderModal('coverage', idModal);
       };
       s(`.btn-docs-coverage-link`).onclick = () => {
         const docData = Docs.Data.find((d) => d.type === 'coverage-link');
@@ -296,183 +310,216 @@ class Docs {
     }
     // Build submenu items and populate — submenu system is owned by Modal
     Modal.subMenuPopulate('docs', await Modal.buildSubMenuItemsHtml('docs', Docs.Data, options));
-    {
-      const docsData = [
-        {
-          id: 'getting-started',
-          icon: 'rocket',
-          title: 'Getting Started',
-          description: 'Learn the basics and get started with our platform',
-        },
-        {
-          id: 'api-docs',
-          icon: 'code',
-          title: 'API Reference',
-          description: 'Detailed documentation of our API endpoints',
-        },
-        {
-          id: 'guides',
-          icon: 'book',
-          title: 'Guides',
-          description: 'Step-by-step tutorials and how-to guides',
-        },
-        {
-          id: 'demo',
-          icon: 'laptop-code',
-          title: 'Demo',
-          description: 'Practical examples and code snippets',
-        },
-        {
-          id: 'faq',
-          icon: 'question-circle',
-          title: 'FAQ',
-          description: 'Frequently asked questions',
-        },
-        {
-          id: 'community',
-          icon: 'users',
-          title: 'Community',
-          description: 'Join our developer community',
-        },
-      ];
-      return html`
-        <style>
-          .docs-landing {
-            padding: 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
-            height: 100%;
-            box-sizing: border-box;
-          }
-          .docs-header {
-            text-align: center;
-            margin-bottom: 3rem;
-            opacity: 0;
-            animation: fadeInUp 0.6s ease-out forwards;
-          }
-          .docs-header h1 {
-            font-size: 2.5rem;
-            margin: 0 0 1rem;
-            line-height: 1.2;
-          }
-          .docs-header p {
-            font-size: 1.2rem;
-            max-width: 700px;
-            margin: 0 auto 2rem;
-            line-height: 1.6;
-          }
-          .docs-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: 1.5rem;
-            margin: 0;
-            padding: 0;
-            list-style: none;
-          }
-          .docs-card-container {
-            cursor: pointer;
-            opacity: 0;
-            margin-bottom: 3rem;
-            animation: fadeInUp 0.6s ease-out forwards;
-          }
-          .docs-card {
-            border-radius: 8px;
-            padding: 1.5rem;
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            position: relative;
-            transition: all 0.3s ease-in-out;
-          }
 
-          .card-icon {
-            font-size: 1.75rem;
-            width: 56px;
-            height: 56px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 0 1.25rem;
-            transition: transform 0.2s ease;
-          }
+    const landingCards = [
+      {
+        id: 'getting-started',
+        icon: 'rocket',
+        title: 'Getting Started',
+        description: 'Learn the basics and get started with our platform',
+        docType: 'src',
+      },
+      {
+        id: 'api-docs',
+        icon: 'code',
+        title: 'API Reference',
+        description: 'Detailed documentation of our API endpoints',
+        docType: 'api',
+      },
+      {
+        id: 'guides',
+        icon: 'book',
+        title: 'Guides',
+        description: 'Step-by-step tutorials and how-to guides',
+        docType: 'src',
+      },
+      {
+        id: 'demo',
+        icon: 'laptop-code',
+        title: 'Demo',
+        description: 'Practical examples and code snippets',
+        docType: 'demo',
+      },
+      {
+        id: 'faq',
+        icon: 'question-circle',
+        title: 'FAQ',
+        description: 'Frequently asked questions',
+        docType: 'src',
+      },
+      {
+        id: 'community',
+        icon: 'users',
+        title: 'Community',
+        description: 'Join our developer community',
+        docType: 'repo',
+      },
+    ];
+
+    // A card resolves to a documented entry, never to a URL of its own: the
+    // submenu button and the card must open the same place.
+    const openLandingCard = (docType) => {
+      const btn = s(`.btn-docs-${docType}`);
+      if (btn) return btn.click();
+      location.href = Docs.Data.find((d) => d.type === docType).url();
+    };
 
-          .card-content {
-            flex: 1;
+    setTimeout(() => {
+      for (const { id, docType } of landingCards) {
+        const cardEl = s(`.docs-card-container-${id}`);
+        if (!cardEl) continue;
+        cardEl.onclick = () => openLandingCard(docType);
+        // The card is a div, so the keyboard affordances a button would carry
+        // have to be declared and handled explicitly.
+        cardEl.onkeydown = (e) => {
+          if (e.key !== 'Enter' && e.key !== ' ') return;
+          e.preventDefault();
+          openLandingCard(docType);
+        };
+      }
+    });
+
+    return html`
+      <style>
+        .docs-landing {
+          padding: 2rem;
+          max-width: 1200px;
+          margin: 0 auto;
+          box-sizing: border-box;
+        }
+        .docs-header {
+          text-align: center;
+          margin-bottom: 3rem;
+          opacity: 0;
+          animation: fadeInUp 0.6s ease-out forwards;
+        }
+        .docs-header h1 {
+          font-size: 2.5rem;
+          margin: 0 0 1rem;
+          line-height: 1.2;
+        }
+        .docs-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+          gap: 1.5rem;
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+        .docs-card-container {
+          cursor: pointer;
+          opacity: 0;
+          animation: fadeInUp 0.6s ease-out forwards;
+          border-radius: 8px;
+        }
+        .docs-card-container:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: 3px;
+        }
+        .docs-card {
+          border-radius: 8px;
+          padding: 1.5rem;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          box-sizing: border-box;
+          transition:
+            transform 0.25s ease,
+            background 0.25s ease,
+            border-color 0.25s ease;
+        }
+        .docs-card-container:hover .docs-card,
+        .docs-card-container:focus-visible .docs-card {
+          transform: translateY(-4px);
+        }
+        .card-icon {
+          font-size: 1.75rem;
+          width: 56px;
+          height: 56px;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0 0 1.25rem;
+          transition: transform 0.25s ease;
+        }
+        .docs-card-container:hover .card-icon {
+          transform: scale(1.08);
+        }
+        .card-content {
+          flex: 1;
+        }
+        .card-content h3 {
+          margin: 0 0 0.5rem;
+          font-size: 1.25rem;
+          font-weight: 600;
+        }
+        .card-content p {
+          margin: 0;
+          font-size: 0.95rem;
+          line-height: 1.5;
+          opacity: 0.85;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .docs-header,
+          .docs-card-container {
+            animation: none;
+            opacity: 1;
           }
-          .card-content h3 {
-            margin: 0 0 0.5rem;
-            font-size: 1.25rem;
-            font-weight: 600;
+          .docs-card,
+          .card-icon {
+            transition: none;
           }
-          .card-content p {
-            margin: 0;
-            font-size: 0.95rem;
-            transition: color 0.3s ease;
+          .docs-card-container:hover .docs-card,
+          .docs-card-container:hover .card-icon {
+            transform: none;
           }
-        </style>
+        }
+      </style>
+
+      <style>
+        ${landingCards
+          .map(
+            (_, index) => css`
+              .docs-card-container:nth-child(${index + 1}) {
+                animation-delay: ${0.1 * (index + 1)}s;
+              }
+            `,
+          )
+          .join('')}
+      </style>
+
+      <div class="docs-landing">
+        <div class="docs-header">
+          <h1>Documentation</h1>
+        </div>
 
-        <style>
-          ${docsData
+        <ul class="docs-grid">
+          ${landingCards
             .map(
-              (_, index) => css`
-                .docs-card-container:nth-child(${index + 1}) {
-                  animation-delay: ${0.1 * (index + 1)}s;
-                }
+              ({ id, icon, title, description }) => html`
+                <div
+                  class="in docs-card-container docs-card-container-${id}"
+                  role="link"
+                  tabindex="0"
+                  aria-label="${title}: ${description}"
+                >
+                  <li class="docs-card box-content-border hover">
+                    <div class="card-icon">
+                      <i class="fas fa-${icon}" aria-hidden="true"></i>
+                    </div>
+                    <div class="card-content">
+                      <h3>${title}</h3>
+                      <p>${description}</p>
+                    </div>
+                  </li>
+                </div>
               `,
             )
             .join('')}
-        </style>
-
-        <div class="docs-landing">
-          <div class="docs-header">
-            <h1>Documentation</h1>
-            <!--
-                    <div class="search-bar">
-                      <i class="fas fa-search"></i>
-                      <input type="text" placeholder="Search documentation..." id="docs-search">
-                    </div>
-                    -->
-          </div>
-
-          <ul class="docs-grid">
-            ${docsData
-              .map((item) => {
-                setTimeout(() => {
-                  if (s(`.docs-card-container-${item.id}`)) {
-                    s(`.docs-card-container-${item.id}`).onclick = () => {
-                      if (item.id.match('demo')) {
-                        const demoData = Docs.Data.find((d) => d.type === 'demo');
-                        location.href = demoData
-                          ? demoData.url()
-                          : 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
-                      } else if (item.id.match('api')) {
-                        if (s(`.btn-docs-api`)) s(`.btn-docs-api`).click();
-                      } else {
-                        if (s(`.btn-docs-src`)) s(`.btn-docs-src`).click();
-                      }
-                    };
-                  }
-                });
-                return html`
-                  <div class="in docs-card-container docs-card-container-${item.id}">
-                    <li class="docs-card">
-                      <div class="card-icon">
-                        <i class="fas fa-${item.icon}"></i>
-                      </div>
-                      <div class="card-content">
-                        <h3>${item.title}</h3>
-                        <p>${item.description}</p>
-                      </div>
-                    </li>
-                  </div>
-                `;
-              })
-              .join('')}
-          </ul>
-        </div>
-      `;
-    }
+        </ul>
+      </div>
+    `;
   }
 }
 export { Docs };

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

@@ -1231,27 +1231,6 @@ class FileExplorer {
                     { headerName: '', width: 60, cellRenderer: LoadFolderActionsRenderer },
                   ],
                   rowSelection: 'single',
-                  onSelectionChanged: (event) => {
-                    return;
-                    const selectedRows = AgGrid.grids[gridFolderId].getSelectedRows();
-                    console.log('selectedRows', { event, selectedRows });
-                    if (selectedRows[0]) {
-                      const newLocation = selectedRows[0].location;
-                      if (newLocation === location) return;
-                      location = newLocation;
-                      setPath(`${window.location.pathname}?location=${location}`);
-                      s(`.file-explorer-query-nav`).value = location;
-                      const format = FileExplorer.documentDataFormat({ document: documentInstance, location });
-                      files = format.files;
-                      folders = format.folders;
-                      applySearchFilter();
-                      currentPage = 0;
-                      displayedFiles = getPagedFiles();
-                      AgGrid.grids[gridFileId].setGridOption('rowData', displayedFiles);
-                      AgGrid.grids[gridFolderId].setGridOption('rowData', folders);
-                      updatePaginationUI();
-                    }
-                  },
                 },
               })}
             </div>

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

@@ -734,7 +734,7 @@ class PanelForm {
       panelData.loading = false;
       LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
     };
-    const renderSrrPanelData = async () =>
+    const renderSSRPanelData = async () =>
       await panelRender({
         data: range(0, 0).map((i) => ({
           id: i,
@@ -827,7 +827,7 @@ class PanelForm {
           // Always reset skip to 0 when reloading (whether cid exists or not)
           PanelForm.Data[idPanel].skip = 0;
           const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
-          htmls(containerSelector, await renderSrrPanelData());
+          htmls(containerSelector, await renderSSRPanelData());
           await getPanelData();
           htmls(
             containerSelector,
@@ -906,10 +906,10 @@ class PanelForm {
         };
     }
     if (options.parentIdModal) {
-      htmls(`.html-${options.parentIdModal}`, await renderSrrPanelData());
+      htmls(`.html-${options.parentIdModal}`, await renderSSRPanelData());
       return '';
     }
-    return await renderSrrPanelData();
+    return await renderSSRPanelData();
   }
 }
 export { PanelForm };