adminator-admin-dashboard 2.8.1 → 4.1.5

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "adminator-admin-dashboard",
-  "version": "2.8.1",
+  "version": "4.1.5",
   "private": false,
-  "description": "Modern jQuery-free Bootstrap 5 Admin Dashboard Template with Dark Mode",
+  "description": "Adminator 2026 — vanilla-JS admin dashboard with a token-driven design system, dark mode, Chart.js, FullCalendar, and jsvectormap. No jQuery, no Bootstrap.",
   "main": "dist/index.html",
   "keywords": [
     "admin",
     "dashboard",
     "template",
-    "bootstrap",
-    "bootstrap5",
-    "jquery-free",
     "vanilla-js",
     "dark-mode",
+    "design-system",
+    "css-variables",
     "responsive",
     "mobile-first",
     "scss",
@@ -21,7 +20,8 @@
     "ui-kit",
     "admin-panel",
     "charts",
-    "datatable"
+    "fullcalendar",
+    "chartjs"
   ],
   "author": "Aigars Silkalns <hello@colorlib.com> (https://colorlib.com)",
   "license": "MIT",
@@ -49,67 +49,65 @@
     "dev": "webpack-dashboard -t 'Project' -- webpack server",
     "clean": "shx rm -rf ./dist",
     "build": "npm run clean && cross-env webpack",
+    "build:analyze": "npm run clean && cross-env ANALYZE=true NODE_ENV=production webpack",
     "release:minified": "npm run clean && NODE_ENV=production MINIFY=true cross-env webpack",
     "release:unminified": "npm run clean && NODE_ENV=production MINIFY=false cross-env webpack",
     "preview": "cross-env webpack server",
     "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
     "lint:scss": "stylelint ./src/**/*.scss",
     "lint": "npm run lint:js && npm run lint:scss",
-    "prepublishOnly": "npm run build",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "screenshots": "node scripts/screenshots.mjs",
+    "prepublishOnly": "npm run lint && npm run build",
     "postpublish": "echo 'Package published successfully! View at: https://www.npmjs.com/package/adminator-admin-dashboard'"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/eslint-parser": "^7.28.0",
-    "@babel/plugin-transform-runtime": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
-    "@eslint/js": "^9.33.0",
-    "@typescript-eslint/eslint-plugin": "^8.42.0",
-    "@typescript-eslint/parser": "^8.42.0",
-    "babel-loader": "^10.0.0",
+    "@babel/core": "^7.29.0",
+    "@babel/eslint-parser": "^7.28.6",
+    "@babel/plugin-transform-runtime": "^7.29.0",
+    "@babel/preset-env": "^7.29.5",
+    "@eslint/js": "^9.39.4",
+    "@vitest/coverage-v8": "^4.1.7",
+    "babel-loader": "^10.1.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "copy-webpack-plugin": "^13.0.0",
-    "cross-env": "^10.0.0",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.2",
-    "eslint": "^9.33.0",
+    "copy-webpack-plugin": "^14.0.0",
+    "cross-env": "^10.1.0",
+    "css-loader": "^7.1.4",
+    "css-minimizer-webpack-plugin": "^8.0.0",
+    "eslint": "^9.39.4",
     "eslint-formatter-table": "^7.32.1",
-    "globals": "^16.3.0",
-    "html-webpack-plugin": "^5.6.3",
-    "mini-css-extract-plugin": "^2.9.3",
-    "postcss": "^8.5.6",
-    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^10.2.4",
-    "sass": "^1.90.0",
-    "sass-loader": "^16.0.5",
+    "globals": "^17.6.0",
+    "html-webpack-plugin": "^5.6.7",
+    "jsdom": "^29.1.1",
+    "mini-css-extract-plugin": "^2.10.2",
+    "playwright": "^1.60.0",
+    "postcss": "^8.5.15",
+    "postcss-loader": "^8.2.1",
+    "postcss-preset-env": "^11.3.0",
+    "sass": "^1.99.0",
+    "sass-loader": "^17.0.0",
     "shx": "^0.4.0",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.23.1",
-    "stylelint-config-standard": "^38.0.0",
-    "typescript": "^5.9.2",
-    "webpack": "^5.101.0",
-    "webpack-cli": "^6.0.1",
+    "stylelint": "^17.12.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "vitest": "^4.1.7",
+    "webpack": "^5.107.0",
+    "webpack-bundle-analyzer": "^5.3.0",
+    "webpack-cli": "^7.0.2",
     "webpack-dashboard": "^3.3.8",
-    "webpack-dev-server": "^5.2.2"
+    "webpack-dev-server": "^5.2.4"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.2",
-    "@fullcalendar/core": "^6.1.19",
-    "@fullcalendar/daygrid": "^6.1.19",
-    "@fullcalendar/interaction": "^6.1.19",
-    "@fullcalendar/list": "^6.1.19",
-    "@fullcalendar/timegrid": "^6.1.19",
-    "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.8",
-    "brand-colors": "^2.1.1",
-    "chart.js": "^4.5.0",
-    "dayjs": "^1.11.13",
-    "jsvectormap": "^1.6.0",
-    "load-google-maps-api": "^2.0.2",
-    "lodash": "^4.17.21",
-    "masonry-layout": "^4.2.2",
-    "perfect-scrollbar": "^1.5.6",
-    "skycons": "^1.0.0",
-    "ts-api-utils": "^2.1.0"
+    "@babel/runtime": "^7.29.2",
+    "@fullcalendar/core": "^6.1.20",
+    "@fullcalendar/daygrid": "^6.1.20",
+    "@fullcalendar/interaction": "^6.1.20",
+    "@fullcalendar/list": "^6.1.20",
+    "@fullcalendar/timegrid": "^6.1.20",
+    "chart.js": "^4.5.1",
+    "jsvectormap": "^1.7.0"
   }
 }

package/src/404.html

@@ -1,22 +1,42 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>404</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>404 · 2026 Redesign Preview</title>
+    <script>
+      (function () {
+        try {
+          var saved = localStorage.getItem('dash26-theme');
+          var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+          document.documentElement.setAttribute('data-theme', saved || (prefersDark ? 'dark' : 'light'));
+        } catch (e) {
+          document.documentElement.setAttribute('data-theme', 'light');
+        }
+      })();
+    </script>
   </head>
-  <body class="app">
-    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
-      <div class='mR-60'>
-        <img alt='#' src='assets/static/images/404.png' />
-      </div>
-
-      <div class='d-f jc-c fxd-c'>
-        <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">404</h1>
-        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Oops Page Not Found</h3>
-        <p class='mB-30 fsz-def c-grey-700'>The page you are looking for does not exist or has been moved.</p>
-        <div>
-          <a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
+  <body>
+    <div class="error-shell">
+      <div class="error-card">
+        <span class="error-eyebrow">Error · Not found</span>
+        <div class="error-code">404</div>
+        <h1 class="error-title">This page wandered off</h1>
+        <p class="error-sub">The link may be outdated, or the page might have been moved or deleted. Try the dashboard to get back on track.</p>
+        <div class="error-actions">
+          <a href="index.html" class="btn btn--primary">
+            <svg viewBox="0 0 24 24"><path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/></svg>
+            Back to dashboard
+          </a>
+          <a href="javascript:history.back()" class="btn btn--ghost">
+            <svg viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+            Go back
+          </a>
+        </div>
+        <div class="error-meta">
+          <span><strong>STATUS</strong> 404</span>
+          <span><strong>CODE</strong> NOT_FOUND</span>
+          <span><strong>REF</strong> a8c1-9f23</span>
         </div>
       </div>
     </div>

package/src/500.html

@@ -1,22 +1,42 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>500</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>500 · 2026 Redesign Preview</title>
+    <script>
+      (function () {
+        try {
+          var saved = localStorage.getItem('dash26-theme');
+          var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+          document.documentElement.setAttribute('data-theme', saved || (prefersDark ? 'dark' : 'light'));
+        } catch (e) {
+          document.documentElement.setAttribute('data-theme', 'light');
+        }
+      })();
+    </script>
   </head>
-  <body class="app">
-    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
-      <div class='mR-60'>
-        <img alt='#' src='assets/static/images/500.png' />
-      </div>
-
-      <div class='d-f jc-c fxd-c'>
-        <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">500</h1>
-        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Internal server error</h3>
-        <p class='mB-30 fsz-def c-grey-700'>Something goes wrong with our servers, please try again later.</p>
-        <div>
-          <a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
+  <body>
+    <div class="error-shell">
+      <div class="error-card">
+        <span class="error-eyebrow">Error · Server</span>
+        <div class="error-code">500</div>
+        <h1 class="error-title">Something broke on our end</h1>
+        <p class="error-sub">We've been notified and are looking into it. Please try again in a moment, or head back to the dashboard.</p>
+        <div class="error-actions">
+          <a href="javascript:location.reload()" class="btn btn--primary">
+            <svg viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
+            Try again
+          </a>
+          <a href="index.html" class="btn btn--ghost">
+            <svg viewBox="0 0 24 24"><path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/></svg>
+            Dashboard
+          </a>
+        </div>
+        <div class="error-meta">
+          <span><strong>STATUS</strong> 500</span>
+          <span><strong>CODE</strong> INTERNAL_ERROR</span>
+          <span><strong>REF</strong> 7d2e-44b9</span>
         </div>
       </div>
     </div>

package/src/assets/scripts/2026/Shell.js

@@ -0,0 +1,312 @@
+/**
+ * 2026 Shell renderer.
+ *
+ * Each page provides:
+ *   <body data-active="dashboard" data-crumbs="Workspace | Dashboard">
+ *     <div class="shell">
+ *       <div data-shell-sidebar></div>
+ *       <div class="main">
+ *         <div data-shell-topbar></div>
+ *         <main class="content"> ...page content... </main>
+ *         <div data-shell-footer></div>
+ *       </div>
+ *     </div>
+ *   </body>
+ *
+ * mountShell() fills the three placeholder divs with the shared chrome,
+ * marking the active sidebar item and writing the breadcrumbs.
+ *
+ * NAV is the single source of truth — adding a page is one entry here.
+ */
+
+export const NAV = [
+  {
+    label: 'Workspace',
+    items: [
+      { key: 'dashboard', text: 'Dashboard', href: 'index.html',
+        icon: '<path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/>' },
+      { key: 'pro', text: 'Go Pro', href: '#', badge: { kind: 'pro', text: 'PRO' },
+        icon: '<path d="M12 2 15 8l6.5 1-4.8 4.6L18 20l-6-3-6 3 1.3-6.4L2.5 9 9 8z"/>' },
+    ],
+  },
+  {
+    label: 'Communications',
+    items: [
+      { key: 'email', text: 'Email', href: 'email.html',
+        icon: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>' },
+      { key: 'compose', text: 'Compose', href: 'compose.html',
+        icon: '<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/>' },
+      { key: 'calendar', text: 'Calendar', href: 'calendar.html',
+        icon: '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>' },
+      { key: 'chat', text: 'Chat', href: 'chat.html',
+        icon: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>' },
+    ],
+  },
+  {
+    label: 'Components',
+    items: [
+      { key: 'charts', text: 'Charts', href: 'charts.html', badge: { kind: 'new', text: 'NEW' },
+        icon: '<path d="M3 20V4M7 20v-6M11 20v-10M15 20v-4M19 20V8"/>' },
+      { key: 'forms', text: 'Forms', href: 'forms.html',
+        icon: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 10h10M7 14h7"/>' },
+      { key: 'ui', text: 'UI Elements', href: 'ui.html',
+        icon: '<circle cx="12" cy="12" r="9"/><path d="M8 12h8M12 8v8"/>' },
+      { key: 'buttons', text: 'Buttons', href: 'buttons.html',
+        icon: '<rect x="3" y="8" width="18" height="8" rx="4"/>' },
+      { key: 'tables', text: 'Tables',
+        icon: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M3 16h18M9 4v16"/>',
+        children: [
+          { key: 'basic-table', text: 'Basic Table', href: 'basic-table.html' },
+          { key: 'datatable',   text: 'Data Table',  href: 'datatable.html' },
+        ],
+      },
+      { key: 'maps', text: 'Maps',
+        icon: '<path d="M9 20V4l6 4v16z"/><path d="M3 7l6-3v16l-6 3z"/><path d="M15 8l6-3v16l-6 3"/>',
+        children: [
+          { key: 'google-maps', text: 'Google Map', href: 'google-maps.html' },
+          { key: 'vector-maps', text: 'Vector Map', href: 'vector-maps.html' },
+        ],
+      },
+      { key: 'pages', text: 'Pages',
+        icon: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>',
+        children: [
+          { key: 'blank',   text: 'Blank',   href: 'blank.html' },
+          { key: '404',     text: '404',     href: '404.html' },
+          { key: '500',     text: '500',     href: '500.html' },
+          { key: 'signin',  text: 'Sign In', href: 'signin.html' },
+          { key: 'signup',  text: 'Sign Up', href: 'signup.html' },
+        ],
+      },
+    ],
+  },
+];
+
+const BRAND_LOGO = `<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M14.747 9.125c.527-1.426 1.736-2.573 3.317-2.573c1.643 0 2.792 1.085 3.318 2.573l6.077 16.867c.186.496.248.931.248 1.147c0 1.209-.992 2.046-2.139 2.046c-1.303 0-1.954-.682-2.264-1.611l-.931-2.915h-8.62l-.93 2.884c-.31.961-.961 1.642-2.232 1.642c-1.24 0-2.294-.93-2.294-2.17c0-.496.155-.868.217-1.023l6.233-16.867zm.34 11.256h5.891l-2.883-8.992h-.062l-2.946 8.992z"/>
+</svg>`;
+
+const CHEV = '<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="m9 18 6-6-6-6"/></svg>';
+
+function renderNavLink(item, activeKey) {
+  const active = item.key === activeKey ? ' is-active' : '';
+  const badge = item.badge
+    ? `<span class="nav-badge ${item.badge.kind}">${item.badge.text}</span>`
+    : '';
+  return `
+    <a class="nav-link${active}" href="${item.href}">
+      <svg viewBox="0 0 24 24">${item.icon}</svg>
+      <span>${item.text}</span>
+      ${badge}
+    </a>`;
+}
+
+function renderNavGroup(item, activeKey) {
+  const open = item.children.some((c) => c.key === activeKey) ? ' is-open' : '';
+  const submenu = item.children
+    .map((c) => `<a href="${c.href}">${c.text}</a>`)
+    .join('');
+  return `
+    <div class="nav-item-group${open}" data-nav-group>
+      <a class="nav-link" href="javascript:void(0)" data-nav-toggle>
+        <svg viewBox="0 0 24 24">${item.icon}</svg>
+        <span>${item.text}</span>
+        ${CHEV}
+      </a>
+      <div class="nav-submenu">${submenu}</div>
+    </div>`;
+}
+
+function renderSection(section, activeKey) {
+  const items = section.items.map((item) => (
+    item.children ? renderNavGroup(item, activeKey) : renderNavLink(item, activeKey)
+  )).join('');
+  return `
+    <nav class="nav-section">
+      <div class="nav-label">${section.label}</div>
+      ${items}
+    </nav>`;
+}
+
+function renderSidebar(activeKey) {
+  const sections = NAV.map((s) => renderSection(s, activeKey)).join('');
+  return `
+    <aside class="d-sidebar">
+      <div class="brand">
+        <div class="brand-logo">${BRAND_LOGO}</div>
+        <div class="brand-text">
+          <div class="brand-name">Adminator</div>
+          <div class="brand-tag">v4.1.5 · preview</div>
+        </div>
+      </div>
+      ${sections}
+      <div class="sidebar-footer">
+        <div class="workspace">
+          <div class="workspace-avatar">JD</div>
+          <div class="workspace-text">
+            <div class="workspace-name">John Doe</div>
+            <div class="workspace-role">admin</div>
+          </div>
+          <svg class="workspace-chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <path d="m7 9 5-5 5 5"/><path d="m7 15 5 5 5-5"/>
+          </svg>
+        </div>
+      </div>
+    </aside>`;
+}
+
+function renderCrumbs(crumbsAttr) {
+  if (!crumbsAttr) return '';
+  const parts = crumbsAttr.split('|').map((p) => p.trim()).filter(Boolean);
+  const sep = '<svg class="sep" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>';
+  return parts.map((p, i) => {
+    const cls = i === parts.length - 1 ? ' class="current"' : '';
+    return `${i > 0 ? sep : ''}<span${cls}>${p}</span>`;
+  }).join('');
+}
+
+function renderTopbar(crumbsAttr) {
+  return `
+    <header class="d-topbar">
+      <div class="crumbs">
+        <button class="hamburger" data-drawer-open aria-label="Open navigation">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+        </button>
+        ${renderCrumbs(crumbsAttr)}
+      </div>
+      <div class="topbar-actions">
+        <button class="cmd" data-palette-open>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+          <span>Search...</span>
+          <kbd class="kbd">⌘K</kbd>
+        </button>
+
+        <div class="dd-wrap">
+          <button class="icon-btn" data-dropdown aria-label="Notifications">
+            <svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+            <span class="count danger">3</span>
+          </button>
+          <div class="dd-menu" role="menu">
+            <div class="dd-head">
+              <svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+              Notifications
+            </div>
+            <div class="dd-list">
+              <a class="dd-item" href="#">
+                <div class="dd-avatar a1">JD</div>
+                <div class="dd-body">
+                  <div class="dd-text"><strong>John Doe</strong> liked your <em>post</em></div>
+                  <div class="dd-time">5 MIN AGO</div>
+                </div>
+              </a>
+              <a class="dd-item" href="#">
+                <div class="dd-avatar a2">MD</div>
+                <div class="dd-body">
+                  <div class="dd-text"><strong>Moo Doe</strong> liked your <em>cover image</em></div>
+                  <div class="dd-time">7 MIN AGO</div>
+                </div>
+              </a>
+              <a class="dd-item" href="#">
+                <div class="dd-avatar a3">LD</div>
+                <div class="dd-body">
+                  <div class="dd-text"><strong>Lee Doe</strong> commented on your <em>video</em></div>
+                  <div class="dd-time">10 MIN AGO</div>
+                </div>
+              </a>
+            </div>
+            <a class="dd-footer" href="#">View all notifications →</a>
+          </div>
+        </div>
+
+        <div class="dd-wrap">
+          <button class="icon-btn" data-dropdown aria-label="Messages">
+            <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
+            <span class="count info">3</span>
+          </button>
+          <div class="dd-menu" role="menu">
+            <div class="dd-head">
+              <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
+              Messages
+            </div>
+            <div class="dd-list">
+              <a class="dd-item" href="#">
+                <div class="dd-avatar a1">JD</div>
+                <div class="dd-body">
+                  <div class="dd-row-head"><strong>John Doe</strong><span class="dd-time">5 MIN</span></div>
+                  <div class="dd-preview">Want to create your own customized data generator for your app…</div>
+                </div>
+              </a>
+              <a class="dd-item" href="#">
+                <div class="dd-avatar a2">MD</div>
+                <div class="dd-body">
+                  <div class="dd-row-head"><strong>Moo Doe</strong><span class="dd-time">15 MIN</span></div>
+                  <div class="dd-preview">Want to create your own customized data generator for your app…</div>
+                </div>
+              </a>
+              <a class="dd-item" href="#">
+                <div class="dd-avatar a3">LD</div>
+                <div class="dd-body">
+                  <div class="dd-row-head"><strong>Lee Doe</strong><span class="dd-time">25 MIN</span></div>
+                  <div class="dd-preview">Want to create your own customized data generator for your app…</div>
+                </div>
+              </a>
+            </div>
+            <a class="dd-footer" href="#">View all messages →</a>
+          </div>
+        </div>
+
+        <button class="icon-btn" id="themeToggle" aria-label="Toggle theme"></button>
+
+        <div class="dd-wrap">
+          <div class="avatar" data-dropdown tabindex="0" role="button" aria-label="Account menu">JD</div>
+          <div class="dd-menu dd-profile" role="menu">
+            <div class="dd-profile-head">
+              <div class="dd-profile-name">John Doe</div>
+              <div class="dd-profile-email">john@adminator.app</div>
+            </div>
+            <a class="dd-menu-item" href="#">
+              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+              Settings
+            </a>
+            <a class="dd-menu-item" href="#">
+              <svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              Profile
+            </a>
+            <a class="dd-menu-item" href="email.html">
+              <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
+              Messages
+            </a>
+            <div class="dd-divider"></div>
+            <a class="dd-menu-item danger" href="#">
+              <svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>
+              Logout
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>`;
+}
+
+function renderFooter() {
+  return `
+    <footer class="d-footer">
+      <div>© 2026 · Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer">Colorlib</a></div>
+      <div class="d-footer-meta">
+        <span>v4.1.5</span>
+        <span>preview build</span>
+      </div>
+    </footer>`;
+}
+
+export function mountShell() {
+  const body = document.body;
+  const activeKey = body.getAttribute('data-active') || '';
+  const crumbs = body.getAttribute('data-crumbs') || '';
+
+  const sidebarHost = document.querySelector('[data-shell-sidebar]');
+  const topbarHost  = document.querySelector('[data-shell-topbar]');
+  const footerHost  = document.querySelector('[data-shell-footer]');
+
+  if (sidebarHost) sidebarHost.outerHTML = renderSidebar(activeKey);
+  if (topbarHost)  topbarHost.outerHTML  = renderTopbar(crumbs);
+  if (footerHost)  footerHost.outerHTML  = renderFooter();
+}