mbkbucket 3.0.1 → 3.2.0

package/src/app.js

@@ -9,6 +9,7 @@ import { notFoundHandler, globalErrorHandler } from "./middleware/error-handler.
 import bucketRoutes from "./routes/index.js";
 import { packageJson } from "./config/index.js";
 import { createLogger } from "./utils/logger.js";
+import { commonHandlebarsHelpers } from "./utils/helpers.js";
 
 const debugServer = createLogger('server');
 
@@ -46,8 +47,7 @@ export function createApp() {
   // Handlebars configuration
   server.engine("handlebars", engine({
     extname: ".handlebars",
-    defaultLayout: "main",
-    layoutsDir: path.join(__dirname, "..", "views", "layouts"),
+    defaultLayout: false,
     partialsDir: [
       path.join(__dirname, "..", "views", "templates"),
       path.join(__dirname, "..", "views", "templates", "notice"),
@@ -58,9 +58,7 @@ export function createApp() {
     ],
     cache: process.env.NODE_ENV === "production",
     helpers: {
-      eq: function (a, b) {
-        return a === b;
-      },
+      ...commonHandlebarsHelpers,
       mbkbucket_cachebuster: function () {
         return "?v=" + packageJson.version;
       }

package/src/controllers/api.controller.js

@@ -34,7 +34,9 @@ function resolvePrefix(req, res, prefix) {
  * Build a full S3 key from a prefix and filename, stripping trailing slashes.
  */
 function buildKey(prefix, fileName) {
-  return `${prefix.replace(/\/+$/, '')}/${fileName}`;
+  const cleanPrefix = String(prefix || '').replace(/^\/+/, '').replace(/\/+$/, '');
+  const cleanName = String(fileName || '').replace(/^\/+/, '');
+  return cleanPrefix ? `${cleanPrefix}/${cleanName}` : cleanName;
 }
 
 async function cleanupFolderMarker(folderPath, bucketName) {
@@ -121,8 +123,8 @@ export async function listFiles(req, res) {
     let legacyFallback = false;
 
     if (useOptimizedListing) {
-      let listPrefix = effectivePrefix;
-      if (listPrefix === getAppName() && !listPrefix.endsWith('/')) {
+      let listPrefix = effectivePrefix ? String(effectivePrefix).replace(/^\/+/, '') : '';
+      if (listPrefix && !listPrefix.endsWith('/')) {
         listPrefix += '/';
       }
 
@@ -135,11 +137,12 @@ export async function listFiles(req, res) {
 
       files = (result.Contents || []).filter(f => !f.Key.endsWith('/'));
       folders = (result.CommonPrefixes || [])
-        .filter(p => p.Prefix !== effectivePrefix)
+        .filter(p => p.Prefix !== listPrefix && p.Prefix !== effectivePrefix)
         .map(p => p.Prefix);
       nextContinuationToken = result.NextContinuationToken;
+    }
 
-    } else {
+    else {
       let continuationToken = undefined;
 
       do {
@@ -350,7 +353,14 @@ export async function createFolder(req, res) {
     const effectivePrefix = resolvePrefix(req, res, prefix);
     if (effectivePrefix === null) return;
 
-    const folderKey = `${effectivePrefix.replace(/\/+$/, '')}/${folderName}/`;
+    const cleanName = String(folderName).replace(/^\/+/, '').replace(/\/+$/, '');
+    let folderKey;
+    if (effectivePrefix && !cleanName.startsWith(effectivePrefix)) {
+      const cleanPrefix = effectivePrefix.replace(/\/+$/, '');
+      folderKey = `${cleanPrefix}/${cleanName}/`;
+    } else {
+      folderKey = `${cleanName}/`;
+    }
 
     const markerExists = await fileExists(folderKey, bucketName);
     if (markerExists) return res.status(409).json({ success: false, error: 'Folder already exists' });
@@ -415,9 +425,11 @@ export async function downloadFileHandler(req, res) {
 
   try {
     const bucketName = req.activeBucket;
+    const rawKey = req.params.key;
+    const key = Array.isArray(rawKey) ? rawKey.join('/') : (rawKey || '');
     let keyToUse;
     try {
-      keyToUse = ensureKeyHasAppPrefix(req.params.key);
+      keyToUse = ensureKeyHasAppPrefix(key);
     } catch (e) {
       return res.status(400).json({ success: false, error: e.message });
     }

package/src/controllers/dashboard.controller.js

@@ -1,5 +1,7 @@
+import path from "path";
 import { resolveBucketName, getAvailableBucketNames } from "../services/s3.service.js";
 import { renderPage, mbkautheVar } from "mbkauthe";
+import { commonHandlebarsHelpers } from "../utils/helpers.js";
 
 /**
  * Render the main bucket dashboard page.
@@ -7,13 +9,9 @@ import { renderPage, mbkautheVar } from "mbkauthe";
 export function renderBucketDashboard(req, res) {
   const allBuckets = getAvailableBucketNames();
   const configuredDefaultBucket = mbkautheVar?.bucket;
-
-  let bucketfilePath;
-  if (mbkautheVar?.APP_NAME === "portal") {
-    bucketfilePath = "bucketportal.handlebars";
-  } else {
-    bucketfilePath = "bucket.handlebars";
-  }
+  const isPortal = mbkautheVar?.APP_NAME === "portal";
+  const bucketfilePath = isPortal ? "bucketportal.handlebars" : "bucket.handlebars";
+  const portalLayout = isPortal ? path.resolve(process.cwd(), "views", "layouts", "main") : false;
 
   let selectedBucket;
 
@@ -26,9 +24,10 @@ export function renderBucketDashboard(req, res) {
       isSelected: name === fallbackSelected,
       isDefault: name === configuredDefaultBucket
     }));
-    return renderPage(req, res, bucketfilePath, mbkautheVar?.APP_NAME === "portal" ? true : false, {
+    return renderPage(req, res, bucketfilePath, isPortal, {
       page: "Admin Bucket",
-      layout: true,
+      helpers: commonHandlebarsHelpers,
+      ...(isPortal ? { layout: portalLayout } : {}),
       bucketvar: mbkautheVar?.bucket,
       selectedBucket: fallbackSelected,
       bucketOptions,
@@ -45,8 +44,10 @@ export function renderBucketDashboard(req, res) {
     isDefault: name === configuredDefaultBucket
   }));
 
-  renderPage(req, res, bucketfilePath, mbkautheVar?.APP_NAME === "portal" ? true : false, {
+  renderPage(req, res, bucketfilePath, isPortal, {
     page: "Admin Bucket",
+    helpers: commonHandlebarsHelpers,
+    ...(isPortal ? { layout: portalLayout } : {}),
     bucketvar: selectedBucket,
     selectedBucket,
     bucketOptions,

package/src/controllers/view.controller.js

@@ -192,9 +192,11 @@ async function serveFileInline(req, res, keyToUse, { noindex = true, bucketName,
 export async function viewFile(req, res) {
   try {
     const bucketName = req.activeBucket;
+    const rawKey = req.params.key;
+    const key = Array.isArray(rawKey) ? rawKey.join('/') : (rawKey || '');
     let keyToUse;
     try {
-      keyToUse = ensureKeyHasAppPrefix(req.params.key);
+      keyToUse = ensureKeyHasAppPrefix(key);
     } catch (e) {
       return res.status(400).json({ message: e.message });
     }
@@ -216,7 +218,8 @@ export async function viewFile(req, res) {
 export async function playerPage(req, res) {
   try {
     const bucketName = req.activeBucket;
-    const key = req.params.key;
+    const rawKey = req.params.key;
+    const key = Array.isArray(rawKey) ? rawKey.join('/') : (rawKey || '');
     let keyToUse;
     try {
       keyToUse = ensureKeyHasAppPrefix(key);
@@ -240,7 +243,8 @@ export async function playerPage(req, res) {
 export async function publicView(req, res) {
   try {
     const bucketName = resolveBucketName();
-    const key = req.params.key;
+    const rawKey = req.params.key;
+    const key = Array.isArray(rawKey) ? rawKey.join('/') : (rawKey || '');
 
     // No directory indexing
     if (!key || key.endsWith('/')) {

package/src/routes/api.routes.js

@@ -61,6 +61,6 @@ router.post('/create-folder', sessRole('SuperAdmin'), createFolder);
 router.post('/delete', sessRole('SuperAdmin'), deleteItems);
 
 // Download
-router.get('/download/:key(*)', sessRole('SuperAdmin'), downloadFileHandler);
+router.get('/download/*key', sessRole('SuperAdmin'), downloadFileHandler);
 
 export default router;

package/src/routes/view.routes.js

@@ -12,14 +12,14 @@ const router = express.Router();
 router.use(requireBucketView);
 
 // Player page for video/audio
-router.get('/player/:key(*)', sessRole('SuperAdmin'), playerPage);
+router.get('/player/*key', sessRole('SuperAdmin'), playerPage);
 
 // Inline file view
-router.get('/view/:key(*)', sessRole('SuperAdmin'), viewFile);
+router.get('/view/*key', sessRole('SuperAdmin'), viewFile);
 
 // Public view (conditionally enabled)
 if (mbkbucketVar?.publiView_enabled) {
-  router.get('/p_view/:key(*)', pviewRateLimit, pviewSecurity, publicView);
+  router.get('/p_view/*key', pviewRateLimit, pviewSecurity, publicView);
 }
 
 export default router;

package/src/services/s3.service.js

@@ -74,6 +74,9 @@ function isRootModeApp(appName) {
 }
 
 export function ensureKeyHasAppPrefix(key = '') {
+  if (Array.isArray(key)) {
+    key = key.join('/');
+  }
   const app = getAppName();
   if (!key) throw new Error('Key is required');
 
@@ -103,6 +106,9 @@ export function ensureKeyHasAppPrefix(key = '') {
 }
 
 export function ensurePrefix(prefix = '') {
+  if (Array.isArray(prefix)) {
+    prefix = prefix.join('/');
+  }
   const app = getAppName();
 
   if (prefix && (prefix.includes('../') || prefix.includes('..\\') || /\.\.[\\/]/.test(prefix))) {
@@ -369,12 +375,13 @@ export async function downloadFile(key, options = {}) {
       key: keyToDownload,
     };
   } catch (error) {
-    console.error(`Download failed for key ${key}:`, error);
-
-    if (error && error.$metadata && error.$metadata.httpStatusCode === 304) {
+    if (error && (error.$metadata?.httpStatusCode === 304 || error.name === '304' || error.name === 'NotModified')) {
+      debugS3('File not modified (304) for key %s', keyToDownload);
       return { notModified: true, key: keyToDownload };
     }
 
+    console.error(`Download failed for key ${key}:`, error);
+
     if (error.name === 'NoSuchKey') {
       throw new Error(`File not found: ${key}`);
     } else if (error.name === 'AccessDenied') {

package/src/utils/helpers.js

@@ -171,3 +171,27 @@ export function renderPlayerPage(safeFileName, encodedKey, bucketQuery) {
 </body>
 </html>`;
 }
+
+// ---------------------------------------------------------------------------
+// Common Handlebars helpers
+// ---------------------------------------------------------------------------
+
+export const commonHandlebarsHelpers = {
+  eq: (a, b) => a === b,
+  neq: (a, b) => a !== b,
+  or: (...args) => args.slice(0, -1).some(Boolean),
+  and: (...args) => args.slice(0, -1).every(Boolean),
+  not: (val) => !val,
+  gt: (a, b) => a > b,
+  gte: (a, b) => a >= b,
+  lt: (a, b) => a < b,
+  lte: (a, b) => a <= b,
+  includes: (arr, val) => (Array.isArray(arr) ? arr.includes(val) : false),
+  json: (obj) => JSON.stringify(obj, null, 2),
+  jsonStringify: (obj) => JSON.stringify(obj),
+  getInitials: (username) => {
+    if (!username) return '?';
+    const parts = username.split(/[._]/);
+    return parts.map(p => p.charAt(0)).join('').toUpperCase().substring(0, 2);
+  },
+};

package/views/bucket.handlebars

@@ -7,7 +7,7 @@
     <title>{{#if page}}{{page}} - {{/if}}Web Portal</title>
     <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&display=swap" rel="stylesheet">
+    <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>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
@@ -26,26 +26,34 @@
             --warning-color-ml: #d97706;
             --success-color-ml: #16a34a;
             --info-color-ml: #3b82f6;
-            --border-radius-r-ml: 0.5rem;
-            --border-radius-sm-ml: 0.25rem;
-            --border-radius-lg-ml: 0.75rem;
-            --shadow-s-ml: 0 2px 4px rgba(0, 0, 0, 0.1);
-            --shadow-md-ml: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            --shadow-lg-ml: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-            --transition-base-ml: all 0.2s ease;
-            --transition-fast-ml: all 0.15s ease;
-            --main-border-color: var(--gray-light-color-ml);
-            --color-accent: var(--primary-color-ml);
-            --color-text: var(--dark-color-ml);
-            --color-bg: var(--light-color-ml);
+
+            --primary: var(--primary-color-ml);
+            --primary-lt: var(--primary-light-color-ml);
+            --primary-dk: var(--primary-dark-color-ml);
+            --primary-hover: #0d635c;
+
+            --body-bg: var(--light-color-ml);
+            --bg-surface: rgba(255, 255, 255, 0.88);
+            --bg-surface-secondary: rgba(244, 247, 243, 0.7);
+            --bg-surface-tertiary: #e9f2ee;
+
+            --border-color: rgba(15, 118, 110, 0.15);
+            --border-color-light: rgba(15, 118, 110, 0.08);
+
+            --text: var(--dark-color-ml);
+            --text-secondary: #4a5c5a;
+            --text-muted: var(--gray-color-ml);
+            --text-disabled: #a0b2af;
+
             --font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
-            --font-family-headings: "Sora", "Segoe UI", sans-serif
+            --font-family-headings: "Sora", "Segoe UI", sans-serif;
+            --font-mono: 'JetBrains Mono', monospace;
         }
 
         * {
             margin: 0;
             padding: 0;
-            box-sizing: border-box
+            box-sizing: border-box;
         }
 
         body {
@@ -61,7 +69,7 @@
             line-height: 1.6;
             font-size: 14px;
             position: relative;
-            isolation: isolate
+            isolation: isolate;
         }
 
         body::before,
@@ -70,7 +78,7 @@
             position: fixed;
             border-radius: 999px;
             pointer-events: none;
-            z-index: -1
+            z-index: -1;
         }
 
         body::before {
@@ -78,7 +86,7 @@
             height: 260px;
             left: -80px;
             top: 18vh;
-            background: radial-gradient(circle, rgba(15, 118, 110, 0.16) 0, rgba(15, 118, 110, 0) 70%)
+            background: radial-gradient(circle, rgba(15, 118, 110, 0.16) 0, rgba(15, 118, 110, 0) 70%);
         }
 
         body::after {
@@ -86,23 +94,7 @@
             height: 300px;
             right: -120px;
             bottom: 10vh;
-            background: radial-gradient(circle, rgba(251, 146, 60, 0.18) 0, rgba(251, 146, 60, 0) 72%)
-        }
-
-        /* Removed unused sidebar/menu styles to reduce CSS size. */
-
-        .logo {
-            font-family: var(--font-family-headings);
-            font-size: 1.65rem;
-            font-weight: 700;
-            color: #0b4f4a;
-            display: flex;
-            align-items: center;
-            gap: .5rem
-        }
-
-        .logo img {
-            width: 35px
+            background: radial-gradient(circle, rgba(251, 146, 60, 0.18) 0, rgba(251, 146, 60, 0) 72%);
         }
 
         .main-content {
@@ -110,7 +102,7 @@
             display: flex;
             flex-direction: column;
             overflow: hidden;
-            transition: var(--transition-base-ml)
+            min-height: 100vh;
         }
 
         .top-nav {
@@ -119,139 +111,77 @@
             padding: .75rem 1.5rem;
             display: flex;
             align-items: center;
-            justify-content: flex-end;
-            box-shadow: var(--shadow-md-ml);
+            justify-content: space-between;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
             z-index: 90;
             border-bottom: 1px solid rgba(255, 255, 255, .75);
-            gap: 1rem
+            gap: 1rem;
         }
 
-        /* Removed unused notification and profile styles to reduce CSS size. */
+        .logo {
+            font-family: var(--font-family-headings);
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #0b4f4a;
+            display: flex;
+            align-items: center;
+            gap: .5rem;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .logo img {
+            width: 32px;
+            height: 32px;
+        }
 
         .content-area {
             flex: 1;
-            padding: 1.6rem;
-            overflow-y: auto
+            padding: 1.5rem;
+            overflow-y: auto;
         }
 
         .content-area::-webkit-scrollbar {
-            width: 8px
+            width: 8px;
         }
 
         .content-area::-webkit-scrollbar-track {
-            background: 0 0
+            background: transparent;
         }
 
         .content-area::-webkit-scrollbar-thumb {
             background: var(--gray-color-ml);
-            border-radius: 4px
+            border-radius: 4px;
         }
 
         .content-area::-webkit-scrollbar-thumb:hover {
-            background: var(--primary-color-ml)
+            background: var(--primary-color-ml);
         }
 
-        .page-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 1.2rem;
-            padding: 1rem 1.2rem;
-            border: 1px solid rgba(255, 255, 255, .9);
-            border-radius: 1rem;
-            background: rgba(255, 255, 255, .74);
-            box-shadow: 0 12px 34px rgba(15, 23, 42, .07)
-        }
-
-        .page-title {
-            font-family: var(--font-family-headings);
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--dark-color-ml);
-            margin: 0
-        }
-
-        .breadcrumb {
-            display: flex;
-            align-items: center;
-            color: var(--gray-color-ml);
-            font-size: .875rem;
-            background: linear-gradient(135deg, rgba(15, 118, 110, .08), rgba(251, 146, 60, .08));
-            padding: .4rem .85rem;
-            border-radius: 999px;
-            border: 1px solid rgba(15, 118, 110, .15)
-        }
-
-        .breadcrumb a {
-            color: var(--primary-color-ml);
-            text-decoration: none;
-            transition: var(--transition-base-ml);
-            font-weight: 500
-        }
-
-        .breadcrumb a:hover {
-            color: var(--primary-dark-color-ml)
-        }
-
-        .breadcrumb .separator {
-            margin: 0 .5rem;
-            color: var(--gray-color-ml)
-        }
-
-        @media (max-width:992px) {
-            .main-content {
-                margin-left: 0 !important
-            }
-
-            .content-area {
-                padding: 1.5rem
-            }
-        }
-
-        @media (max-width:768px) {
+        @media (max-width: 768px) {
             .top-nav {
-                padding: .25rem 1rem
+                padding: .5rem 1rem;
             }
-
             .content-area {
-                padding: 1rem
-            }
-
-            .page-header {
-                flex-direction: row;
-                align-items: flex-start;
-                gap: 1rem
-            }
-
-            .page-title {
-                font-size: 1.5rem
+                padding: 0.85rem;
             }
         }
-
-
     </style>
     {{> showmessage }}
 </head>
 
 <body>
-
     <div class="main-content">
         <nav class="top-nav">
-            <div class="logo">
-                <img onclick="window.location='/mbkbucket'" src="/icon.svg" alt="Logo">
-                <span onclick="window.location='/mbkbucket'" style="cursor:pointer;">BKBucket</span>
+            <div class="logo" onclick="window.location='/mbkbucket'">
+                <img src="/icon.svg" alt="Logo">
+                <span>MBKBucket</span>
             </div>
 
             {{> profilemenu }}
         </nav>
 
         <div class="content-area">
-            <div class="page-header">
-                <h1 class="page-title">{{#if page}}{{page}}{{else}}Dashboard{{/if}}</h1>
-                <div class="breadcrumb">
-                    <span>{{#if page}}{{page}}{{else}}Home{{/if}}</span>
-                </div>
-            </div>
             {{> bucketadmincontent }}
         </div>
     </div>

package/views/bucketadmin_delete_modal.handlebars

@@ -1,37 +1,33 @@
 <!-- Delete Confirmation Modal -->
 <div class="modal" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
+  <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="deleteModalLabel">
-          <i class="fas fa-exclamation-triangle"></i>
+          <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="var(--red)" stroke-width="1.5" class="modal-title-icon"><path d="M3 4h10M6 4V2h4v2M5 4l1 9h4l1-9"/></svg>
           Confirm Delete
         </h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
-          onclick="closeModal()">&times;</button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal()">&times;</button>
       </div>
-      <div class="modal-body">
-        <i class="fas fa-trash-alt fa-3x"></i>
-        <h6>Are you sure you want to delete this file?</h6>
-        <p class="modal-body-text-style">
-          <strong id="deleteFileName" style="color: var(--dark-color-ml);"></strong>
-        </p>
-        <p class="modal-body-text-top">
-          <small>This action cannot be undone.</small>
+      <div class="modal-body text-center py-4">
+        <div class="delete-icon-wrap mb-3">
+          <svg width="44" height="44" viewBox="0 0 16 16" fill="none" stroke="var(--red)" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4l1 9h4l1-9"/></svg>
+        </div>
+        <h6 class="modal-confirm-heading">Are you sure you want to delete this?</h6>
+        <p class="modal-item-name-preview mt-2">
+          <code id="deleteFileName"></code>
         </p>
+        <p class="text-muted small mt-2">This action cannot be undone.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" onclick="closeModal()">
-          <i class="fas fa-times"></i>
-          Cancel
-        </button>
+        <button type="button" class="btn btn-outline" onclick="closeModal()">Cancel</button>
         <form id="deleteForm" method="post" action="/mbkbucket/delete" style="display: inline;">
           <input type="hidden" name="key" id="deleteKey">
           <input type="hidden" name="prefix" value="{{prefix}}">
           <input type="hidden" name="folder" id="deleteIsFolder" value="">
           <button type="submit" class="btn btn-danger" id="deleteConfirmButton">
-            <i class="fas fa-trash"></i>
-            <span id="deleteConfirmLabel">Delete File</span>
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4l1 9h4l1-9"/></svg>
+            <span id="deleteConfirmLabel">Delete</span>
           </button>
         </form>
       </div>

package/views/bucketadmin_filelist_skeleton.handlebars

@@ -1,20 +1,32 @@
-<div class="table-responsive" aria-label="Loading files" aria-busy="true">
-  <div class="skeleton-row">
-    <div class="skeleton-box s-40"></div>
-    <div class="skeleton-box s-200"></div>
-    <div class="skeleton-box s-80"></div>
-    <div class="skeleton-box s-200"></div>
+<div class="fm-skeleton-grid" aria-label="Loading files" aria-busy="true">
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
   </div>
-  <div class="skeleton-row">
-    <div class="skeleton-box s-40"></div>
-    <div class="skeleton-box s-200"></div>
-    <div class="skeleton-box s-80"></div>
-    <div class="skeleton-box s-200"></div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
   </div>
-  <div class="skeleton-row">
-    <div class="skeleton-box s-40"></div>
-    <div class="skeleton-box s-200"></div>
-    <div class="skeleton-box s-80"></div>
-    <div class="skeleton-box s-200"></div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
+  </div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
+  </div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
+  </div>
+  <div class="fm-skeleton-card">
+    <div class="fm-skeleton-icon"></div>
+    <div class="fm-skeleton-line w-75"></div>
+    <div class="fm-skeleton-line w-50"></div>
   </div>
 </div>