mbkbucket 3.7.1 → 3.8.0

package/README.md

@@ -267,14 +267,14 @@ All functions are exported from the package root. Full TypeScript declarations i
 
 | Template | Description |
 |---|---|
-| `bucketportal.handlebars` | Admin dashboard shell |
-| `bucketadmincontent.handlebars` | File listing & management UI |
-| `bucketadmin_alerts.handlebars` | Alert/notification partial |
-| `bucketadmin_delete_modal.handlebars` | Delete confirmation modal |
-| `bucketadmin_preview_modal.handlebars` | File preview modal |
-| `bucketadmin_filelist_skeleton.handlebars` | Loading skeleton |
-| `bucket.handlebars` | Public file viewer |
-| `mbkbucket_info.handlebars` | Info/health page |
+| `bucketportal.hbs` | Admin dashboard shell |
+| `bucketadmincontent.hbs` | File listing & management UI |
+| `bucketadmin_alerts.hbs` | Alert/notification partial |
+| `bucketadmin_delete_modal.hbs` | Delete confirmation modal |
+| `bucketadmin_preview_modal.hbs` | File preview modal |
+| `bucketadmin_filelist_skeleton.hbs` | Loading skeleton |
+| `bucket.hbs` | Public file viewer |
+| `mbkbucket_info.hbs` | Info/health page |
 
 ---
 

package/lib/public/bucketadmin.css

@@ -675,10 +675,23 @@
   position: relative;
 }
 
+.view-btn#view-thumbs {
+  border-left: 1px solid var(--border-color);
+}
+
 .fm-item-thumb {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transition: opacity 0.25s ease-in-out;
+}
+
+.fm-item-thumb.fm-lazy-thumb {
+  opacity: 0;
+}
+
+.fm-item-thumb.fm-lazy-thumb.is-loaded {
+  opacity: 1;
 }
 
 .fm-item-icon .ext {

package/lib/public/bucketadmin.js

@@ -20,6 +20,8 @@
   let currentOrder = 'asc';
   let currentViewMode = localStorage.getItem('mbk_view_mode') || 'grid'; // 'grid' or 'list'
   let currentQuickFilter = 'all'; // 'all', 'media', 'docs', 'code', 'starred'
+  let showThumbnails = localStorage.getItem('mbk_show_thumbnails') === 'true'; // Fast Mode by default (saves Vercel resources & tokens)
+  let thumbObserver = null;
   let pageFiles = [];
   let pageFolders = [];
   let currentApiPrefix = '';
@@ -502,15 +504,16 @@
       const formattedSize = file.Size ? formatFileSize(file.Size) : '—';
       const formattedDate = file.LastModified ? formatDate(file.LastModified) : '—';
 
+      const showImgThumb = isImg && showThumbnails;
       let iconInner = `<span class="ext">${typeCfg.label}</span>`;
-      if (isImg) {
-        iconInner = `<img src="${getViewUrl(rawKey)}" class="fm-item-thumb" alt="${safeName}" loading="lazy" onerror="this.outerHTML='<span class=\\'ext\\'>IMG</span>'">`;
+      if (showImgThumb) {
+        iconInner = `<img data-src="${getViewUrl(rawKey)}" class="fm-item-thumb fm-lazy-thumb" alt="${safeName}" onload="this.classList.add('is-loaded')" onerror="this.outerHTML='<span class=\\'ext\\'>IMG</span>'">`;
       }
 
       if (currentViewMode === 'grid') {
         html += `
           <div class="fm-item ${isStarred ? 'starred' : ''}" data-type="file" data-key="${safeKey}" tabindex="0">
-            <div class="fm-item-icon" style="${isImg ? '' : `background:${typeCfg.bg};color:${typeCfg.color}`}">
+            <div class="fm-item-icon" style="${showImgThumb ? '' : `background:${typeCfg.bg};color:${typeCfg.color}`}">
               ${iconInner}
             </div>
             <div class="fm-item-details">
@@ -549,6 +552,44 @@
     });
 
     gridEl.innerHTML = html;
+    observeThumbnails();
+  }
+
+  function observeThumbnails() {
+    const lazyImages = document.querySelectorAll('img.fm-lazy-thumb[data-src]');
+    if (!lazyImages.length) return;
+
+    if (!('IntersectionObserver' in window)) {
+      lazyImages.forEach(img => {
+        if (img.dataset.src) {
+          img.src = img.dataset.src;
+          img.removeAttribute('data-src');
+        }
+      });
+      return;
+    }
+
+    if (thumbObserver) {
+      thumbObserver.disconnect();
+    }
+
+    thumbObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const img = entry.target;
+          if (img.dataset.src) {
+            img.src = img.dataset.src;
+            img.removeAttribute('data-src');
+          }
+          observer.unobserve(img);
+        }
+      });
+    }, {
+      rootMargin: '100px 0px',
+      threshold: 0.01
+    });
+
+    lazyImages.forEach(img => thumbObserver.observe(img));
   }
 
   // Load Files API Call
@@ -996,6 +1037,19 @@
     // View mode toggle
     const gridBtn = document.getElementById('view-grid');
     const listBtn = document.getElementById('view-list');
+    const thumbsBtn = document.getElementById('view-thumbs');
+
+    if (showThumbnails) {
+      thumbsBtn?.classList.add('active');
+    }
+
+    thumbsBtn?.addEventListener('click', () => {
+      showThumbnails = !showThumbnails;
+      localStorage.setItem('mbk_show_thumbnails', String(showThumbnails));
+      thumbsBtn.classList.toggle('active', showThumbnails);
+      renderFiles();
+      showToast(showThumbnails ? 'Image previews enabled' : 'Fast Mode: Previews disabled (saving tokens & bandwidth)', 'info');
+    });
 
     gridBtn?.addEventListener('click', () => {
       currentViewMode = 'grid';
@@ -1207,6 +1261,9 @@
       document.getElementById('view-list')?.classList.add('active');
       document.getElementById('view-grid')?.classList.remove('active');
     }
+    if (showThumbnails) {
+      document.getElementById('view-thumbs')?.classList.add('active');
+    }
 
     initEventListeners();
 

package/lib/public/mbkbucket-helper-demo.html

@@ -13,7 +13,7 @@
   <title>Helper Utils Demo — MBKBucket</title>
   <meta name="description" content="Interactive demo of MBKBucket frontend helper utilities: gallery picker, file input, upload widget, multi-select, live preview binding, and API helpers.">
 
-  <!-- Fonts (same as bucket.handlebars) -->
+  <!-- Fonts (same as bucket.hbs) -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
@@ -23,7 +23,7 @@
   <link rel="stylesheet" href="/mbkbucket/mbkbucket-helper.css">
 
   <style>
-    /* ── Page shell (mirrors bucket.handlebars body) ───────────── */
+    /* ── Page shell (mirrors bucket.hbs body) ───────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     body {

package/lib/src/app.js

@@ -72,8 +72,8 @@ export function createApp() {
   ].filter(dir => fs.existsSync(dir));
 
   // Handlebars template engine
-  server.engine("handlebars", engine({
-    extname: ".handlebars",
+  server.engine("hbs", engine({
+    extname: ".hbs",
     defaultLayout: false,
     partialsDir: [...new Set(partialsDir)],
     cache: process.env.NODE_ENV === "production",
@@ -83,7 +83,7 @@ export function createApp() {
     }
   }));
 
-  server.set("view engine", "handlebars");
+  server.set("view engine", "hbs");
   server.set("views", [...new Set(viewDirs)]);
 
   server.use(mbkautheRoutes);

package/lib/src/controllers/dashboard.controller.js

@@ -11,10 +11,10 @@ export function renderBucketDashboard(req, res) {
   const allBuckets = getAvailableBucketNames();
   const configuredDefaultBucket = mbkautheVar?.bucket;
   const isPortal = mbkautheVar?.APP_NAME === "portal";
-  const bucketfilePath = isPortal ? "bucketportal.handlebars" : "bucket.handlebars";
+  const bucketfilePath = isPortal ? "bucketportal.hbs" : "bucket.hbs";
 
   const mainLayoutPath = path.resolve(process.cwd(), "views", "layouts", "main");
-  const hasMainLayout = fs.existsSync(`${mainLayoutPath}.handlebars`) || fs.existsSync(mainLayoutPath);
+  const hasMainLayout = fs.existsSync(`${mainLayoutPath}.hbs`) || fs.existsSync(mainLayoutPath);
   const portalLayout = (isPortal && hasMainLayout) && mainLayoutPath;
 
   let selectedBucket;

package/lib/src/controllers/info.controller.js

@@ -19,7 +19,7 @@ async function getInfoData() {
  * Render the mbkbucket info page (Handlebars).
  */
 export async function infoPage(req, res) {
-  renderPage(req, res, "mbkbucket_info.handlebars", false, {
+  renderPage(req, res, "mbkbucket_info.hbs", false, {
     page: "MBK Bucket Info",
     ...(await getInfoData())
   });

package/lib/src/middleware/error-handler.js

@@ -1,5 +1,5 @@
 import { createLogger } from "#logger";
-import { isJsonRequest, sendError, sanitizeErrorDetails } from "mbkauthe";
+import { isJsonRequest, sendError, sanitizeErrorDetails, renderPage } from "mbkauthe";
 
 const debugServer = createLogger('server');
 const BASE_ERROR_DATA = { layout: false, pagename: "Home", page: "/" };
@@ -18,7 +18,8 @@ export function notFoundHandler(req, res, next) {
     });
   }
 
-  return res.status(404).render("Error/dError.handlebars", {
+  res.status(404);
+  return renderPage(req, res, "Error/dError.hbs", false, {
     ...BASE_ERROR_DATA,
     code: 404,
     error: "Not Found",
@@ -40,7 +41,8 @@ export function globalErrorHandler(err, req, res, _next) {
 
   const sanitizedDetails = err.message ? sanitizeErrorDetails(err.message) : undefined;
 
-  return res.status(statusCode).render("Error/dError.handlebars", {
+  res.status(statusCode);
+  return renderPage(req, res, "Error/dError.hbs", false, {
     ...BASE_ERROR_DATA,
     code: statusCode,
     error: statusCode >= 500 ? "Internal app Error" : (err.name || "Client Error"),

package/lib/src/middleware/rate-limiter.js

@@ -1,12 +1,14 @@
 import rateLimit from "express-rate-limit";
+import { renderPage } from "mbkauthe";
 
 export const generalLimiter = rateLimit({
   windowMs: 2 * 60 * 1000,
   max: 150,
   standardHeaders: true,
   legacyHeaders: false,
-  handler: (_req, res) => {
-    res.status(429).render('error.handlebars', { message: 'Too many requests from your IP. Try again later.', code: 429 });
+  handler: (req, res) => {
+    res.status(429);
+    return renderPage(req, res, 'error.hbs', false, { message: 'Too many requests from your IP. Try again later.', code: 429 });
   }
 });
 

package/lib/src/utils/helpers.js

@@ -128,6 +128,7 @@ export function buildCacheControl(contentType, { isStaticAsset = false, supports
     return supportsRanges ? 'public, max-age=86400, must-revalidate' : 'public, max-age=300, must-revalidate';
   }
   if (isSensitiveTextType(contentType)) return 'private, no-store';
+  if (isStaticAsset) return 'private, max-age=86400, stale-while-revalidate=604800';
   return supportsRanges ? 'private, max-age=1800, must-revalidate' : 'private, max-age=300, must-revalidate';
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mbkbucket",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "Flexible S3/R2 bucket management — library, Express router, and CLI for mbktech.org applications. Provides upload, download, listing, multipart utilities, signed URLs, and a command-line interface with built-in configuration validation and health checks",
   "author": "Muhammad Bin Khalid",
   "homepage": "https://github.com/MIbnEKhalid/mbkbucket#readme",
@@ -13,6 +13,7 @@
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=dev nodemon index.js",
+    "publish": "node scripts/publish.js",
     "test": "vitest run"
   },
   "imports": {
@@ -28,7 +29,7 @@
     "express": "^5.1.0",
     "express-handlebars": "^9.0.1",
     "express-rate-limit": "^7.5.1",
-    "mbkauthe": "^6.0.0",
+    "mbkauthe": "file:../mbkauthe",
     "multer": "^2.0.2",
     "pg": "^8.16.3"
   },

package/views/{bucket.handlebars → bucket.hbs}

@@ -16,7 +16,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <script src="/mbkauthe/main.js" defer></script>
-    <script src="https://portal.mbktech.org/Assets/Scripts/auto-ids.js" defer></script>
+    <script src="https://portal.mbktech.org/qssets/js/auto-ids.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="icon" type="image/x-icon" href="/icon.svg">
     <style>

package/views/{bucketadmincontent.handlebars → bucketadmincontent.hbs}

@@ -89,6 +89,9 @@
               <button type="button" class="view-btn" id="view-list" aria-label="List view" title="List view">
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg>
               </button>
+              <button type="button" class="view-btn" id="view-thumbs" aria-label="Toggle image previews" title="Toggle image previews (Fast Mode saves bandwidth & tokens)">
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="12" height="12" rx="2"/><circle cx="5.5" cy="5.5" r="1.5"/><path d="M14 10l-4-4-6 6"/></svg>
+              </button>
             </div>
           </div>
         </div>

package/views/{mbkbucket_info.handlebars → mbkbucket_info.hbs}

@@ -15,7 +15,7 @@
         content="Log in to portal.mbktech.org to access your resources and manage projects securely.">
     <meta name="keywords" content="MBK Tech, Web-Portal, Web, Portal, Admin-Panel, Admin, login">
     <meta property="og:title" content="Version and Configuration Information | MBK Tech" />
-    <meta property="og:image" content="https://mbktech.org/Assets/Images/Icon/logo.png" />
+    <meta property="og:image" content="https://mbktech.org/assets/images/logo.png" />
     <meta property="og:url" content="/mbkbucket/info">
     <title>Version and Configuration Information | MBK Tech Portal</title>
     <link rel="icon" type="image/svg+xml" href="/icon.svg">