adminator-admin-dashboard 2.8.1 → 4.1.5

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

@@ -0,0 +1,123 @@
+/**
+ * FullCalendar wiring for the 2026 design system.
+ *
+ * A page declares the calendar mount as <div data-fc></div>; this module
+ * initializes FullCalendar with the seed events below, themes it via the
+ * 2026 toolbar (we hide FC's built-in toolbar and let our own buttons drive
+ * .next() / .prev() / .today() / .changeView()), and re-renders on theme
+ * change so colors stay in sync.
+ */
+
+import { Calendar } from '@fullcalendar/core';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
+import interactionPlugin from '@fullcalendar/interaction';
+
+const SEED_EVENTS = [
+  { title: 'Q2 kickoff',         start: '2026-04-01T09:00', classNames: ['fc-cat-work'] },
+  { title: 'Design review',      start: '2026-04-02T11:00', classNames: ['fc-cat-team'] },
+  { title: 'Lunch w/ Marcus',    start: '2026-04-03T13:00', classNames: ['fc-cat-personal'] },
+  { title: '🎂 Sara birthday',    start: '2026-04-05',      allDay: true, classNames: ['fc-cat-birthday'] },
+  { title: 'Standup',            start: '2026-04-07T10:00', classNames: ['fc-cat-work'] },
+  { title: 'Brand workshop',     start: '2026-04-07T14:00', classNames: ['fc-cat-team'] },
+  { title: 'All-hands',          start: '2026-04-08T15:00', classNames: ['fc-cat-work'] },
+  { title: '✈ Lisbon trip',       start: '2026-04-09',      end: '2026-04-13', allDay: true, classNames: ['fc-cat-travel'] },
+  { title: 'Investor sync',      start: '2026-04-14T16:00', classNames: ['fc-cat-work'] },
+  { title: '📑 Tax deadline',     start: '2026-04-15',      allDay: true, classNames: ['fc-cat-finance'] },
+  { title: 'Invoice approval',   start: '2026-04-17T12:00', classNames: ['fc-cat-finance'] },
+  { title: 'Run with Mira',      start: '2026-04-20T07:00', classNames: ['fc-cat-personal'] },
+  { title: 'Earth day talk',     start: '2026-04-22T14:00', classNames: ['fc-cat-team'] },
+  { title: '✓ Dependency merge', start: '2026-04-23',      allDay: true, classNames: ['fc-cat-work'] },
+  { title: 'Coffee w/ Rita',     start: '2026-04-24T10:00', classNames: ['fc-cat-personal'] },
+  { title: 'PR reviews',         start: '2026-04-24T15:00', classNames: ['fc-cat-work'] },
+  { title: 'Run · 5K',           start: '2026-04-25T07:00', classNames: ['fc-cat-personal'] },
+  { title: "Dinner @ Carla's",   start: '2026-04-25T20:00', classNames: ['fc-cat-personal'] },
+  { title: 'Sprint planning',    start: '2026-04-27T10:00', classNames: ['fc-cat-work'] },
+  { title: 'Board review',       start: '2026-04-28T14:00', classNames: ['fc-cat-work'] },
+  { title: 'Eng review',         start: '2026-04-28T17:00', classNames: ['fc-cat-team'] },
+  { title: 'Anya 1:1',           start: '2026-04-29T11:30', classNames: ['fc-cat-team'] },
+  { title: 'Newsletter goes out',start: '2026-04-30T09:00', classNames: ['fc-cat-team'] },
+  { title: 'Yoga',               start: '2026-04-30T19:00', classNames: ['fc-cat-personal'] },
+];
+
+const VIEW_MAP = { Day: 'timeGridDay', Week: 'timeGridWeek', Month: 'dayGridMonth', Agenda: 'listWeek' };
+
+let calendar = null;
+
+function bindToolbar(host) {
+  // Wire the page's existing toolbar buttons to the FC instance.
+  const root = host.closest('.cal-main') || document;
+  const monthEl = root.querySelector('.cal-month');
+
+  const updateTitle = () => {
+    if (!monthEl || !calendar) return;
+    const d = calendar.getDate();
+    const month = d.toLocaleString('en-US', { month: 'long' });
+    const year  = d.getFullYear();
+    monthEl.innerHTML = `${month} <span class="yr">${year}</span>`;
+  };
+
+  root.querySelectorAll('.cal-nav-btn').forEach((btn, idx) => {
+    btn.addEventListener('click', () => {
+      if (!calendar) return;
+      if (idx === 0) calendar.prev();
+      if (idx === 1) calendar.next();
+      updateTitle();
+    });
+  });
+
+  const today = root.querySelector('.cal-today-btn');
+  if (today) today.addEventListener('click', () => { calendar.today(); updateTitle(); });
+
+  root.querySelectorAll('.cal-view-tab').forEach((tab) => {
+    tab.addEventListener('click', () => {
+      const label = tab.textContent.trim();
+      const view = VIEW_MAP[label] || 'dayGridMonth';
+      root.querySelectorAll('.cal-view-tab').forEach((t) => t.classList.toggle('is-active', t === tab));
+      calendar.changeView(view);
+      updateTitle();
+    });
+  });
+
+  // Title isn't filled in until the calendar is rendered.
+  setTimeout(updateTitle, 0);
+}
+
+function build(host) {
+  if (calendar) {
+    try { calendar.destroy(); } catch { /* re-build below */ }
+  }
+  calendar = new Calendar(host, {
+    plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+    initialView: 'dayGridMonth',
+    initialDate: '2026-04-25',
+    headerToolbar: false,
+    height: '100%',
+    expandRows: true,
+    dayMaxEvents: 3,
+    fixedWeekCount: false,
+    firstDay: 0,
+    nowIndicator: true,
+    selectable: true,
+    editable: true,
+    events: SEED_EVENTS,
+    dayHeaderFormat: { weekday: 'short' },
+  });
+  calendar.render();
+  bindToolbar(host);
+}
+
+export function initCalendarPage() {
+  const host = document.querySelector('[data-fc]');
+  if (!host) return;
+  build(host);
+  // Re-render on theme change so any token-driven colors update.
+  const observer = new MutationObserver((records) => {
+    if (records.some((r) => r.attributeName === 'data-theme')) {
+      // Just trigger a redraw — colors come from CSS, not from JS.
+      if (calendar) calendar.render();
+    }
+  });
+  observer.observe(document.documentElement, { attributes: true });
+}

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

@@ -0,0 +1,259 @@
+/**
+ * Chart.js wiring for the 2026 design system.
+ *
+ * Pages declare charts as <canvas data-chart="<type>" data-key="<seed>"></canvas>.
+ * This module reads CSS variables for theme colors so charts match the active
+ * theme, instantiates a Chart.js instance, and re-renders on theme toggle.
+ *
+ * To keep the chart-page demo visually rich, the seeds are baked-in samples
+ * keyed by data-key.
+ */
+
+import { Chart, registerables } from 'chart.js';
+Chart.register(...registerables);
+
+function tokens() {
+  const cs = getComputedStyle(document.documentElement);
+  return {
+    primary: cs.getPropertyValue('--primary').trim(),
+    success: cs.getPropertyValue('--success').trim(),
+    danger:  cs.getPropertyValue('--danger').trim(),
+    warning: cs.getPropertyValue('--warning').trim(),
+    info:    cs.getPropertyValue('--info').trim(),
+    purple:  cs.getPropertyValue('--purple').trim(),
+    pink:    cs.getPropertyValue('--pink').trim(),
+    orange:  cs.getPropertyValue('--orange').trim(),
+    teal:    cs.getPropertyValue('--teal').trim(),
+    text:    cs.getPropertyValue('--t-base').trim(),
+    muted:   cs.getPropertyValue('--t-muted').trim(),
+    light:   cs.getPropertyValue('--t-light').trim(),
+    border:  cs.getPropertyValue('--border').trim(),
+    soft:    cs.getPropertyValue('--border-soft').trim(),
+    bg:      cs.getPropertyValue('--bg-card').trim(),
+  };
+}
+
+function applyDefaults(t) {
+  Chart.defaults.font.family = "'Inter', system-ui, sans-serif";
+  Chart.defaults.font.size = 12;
+  Chart.defaults.color = t.muted;
+  Chart.defaults.borderColor = t.soft;
+  Chart.defaults.plugins.legend.position = 'bottom';
+  Chart.defaults.plugins.legend.labels.usePointStyle = true;
+  Chart.defaults.plugins.legend.labels.padding = 16;
+  Chart.defaults.plugins.legend.labels.boxWidth = 8;
+  Chart.defaults.plugins.legend.labels.boxHeight = 8;
+  Chart.defaults.plugins.tooltip.backgroundColor = t.text;
+  Chart.defaults.plugins.tooltip.titleColor = t.bg;
+  Chart.defaults.plugins.tooltip.bodyColor = t.bg;
+  Chart.defaults.plugins.tooltip.padding = 10;
+  Chart.defaults.plugins.tooltip.cornerRadius = 6;
+  Chart.defaults.plugins.tooltip.displayColors = false;
+}
+
+export const SEEDS = {
+  'revenue-line': (t) => ({
+    type: 'line',
+    data: {
+      labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+      datasets: [
+        {
+          label: '2026',
+          data: [42, 56, 50, 78, 88, 96, 110, 124, 118, 142, 158, 184],
+          borderColor: t.primary,
+          backgroundColor: `${t.primary}20`,
+          tension: 0.35,
+          fill: true,
+          pointRadius: 0,
+          pointHoverRadius: 5,
+          borderWidth: 2.5,
+        },
+        {
+          label: '2025',
+          data: [38, 44, 46, 60, 70, 74, 82, 90, 92, 102, 110, 118],
+          borderColor: t.muted,
+          backgroundColor: 'transparent',
+          tension: 0.35,
+          fill: false,
+          pointRadius: 0,
+          pointHoverRadius: 5,
+          borderWidth: 2,
+          borderDash: [4, 4],
+        },
+      ],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      scales: {
+        y: { grid: { color: t.soft, drawBorder: false }, ticks: { color: t.light } },
+        x: { grid: { display: false }, ticks: { color: t.light } },
+      },
+    },
+  }),
+
+  'channels-bar': (t) => ({
+    type: 'bar',
+    data: {
+      labels: ['Direct','Search','Social','Email','Affiliate','Display','Other'],
+      datasets: [{
+        label: 'Visitors',
+        data: [124, 88, 72, 54, 36, 28, 18],
+        backgroundColor: [t.primary, t.success, t.purple, t.info, t.warning, t.pink, t.muted],
+        borderRadius: 6, borderSkipped: false,
+      }],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false } },
+      scales: {
+        y: { grid: { color: t.soft, drawBorder: false }, ticks: { color: t.light } },
+        x: { grid: { display: false }, ticks: { color: t.muted } },
+      },
+    },
+  }),
+
+  'devices-doughnut': (t) => ({
+    type: 'doughnut',
+    data: {
+      labels: ['Desktop','Mobile','Tablet'],
+      datasets: [{
+        data: [62, 30, 8],
+        backgroundColor: [t.primary, t.purple, t.info],
+        borderColor: t.bg,
+        borderWidth: 3,
+      }],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      cutout: '68%',
+      plugins: { legend: { position: 'right' } },
+    },
+  }),
+
+  'sources-radar': (t) => ({
+    type: 'radar',
+    data: {
+      labels: ['Speed','UX','Reliability','Pricing','Support','Features'],
+      datasets: [
+        {
+          label: 'Adminator',
+          data: [85, 92, 88, 76, 80, 95],
+          borderColor: t.primary,
+          backgroundColor: `${t.primary}30`,
+          pointBackgroundColor: t.primary,
+        },
+        {
+          label: 'Competitor',
+          data: [70, 65, 75, 82, 60, 70],
+          borderColor: t.muted,
+          backgroundColor: `${t.muted}20`,
+          pointBackgroundColor: t.muted,
+        },
+      ],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      scales: {
+        r: { angleLines: { color: t.soft }, grid: { color: t.soft }, pointLabels: { color: t.muted, font: { size: 11 } }, ticks: { display: false } },
+      },
+    },
+  }),
+
+  'mrr-stacked': (t) => ({
+    type: 'bar',
+    data: {
+      labels: ['Q1','Q2','Q3','Q4'],
+      datasets: [
+        { label: 'Starter', data: [12, 18, 22, 28], backgroundColor: t.info,    borderRadius: 4, stack: 'a' },
+        { label: 'Pro',     data: [38, 48, 56, 64], backgroundColor: t.primary, borderRadius: 4, stack: 'a' },
+        { label: 'Team',    data: [22, 28, 36, 44], backgroundColor: t.purple,  borderRadius: 4, stack: 'a' },
+      ],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      scales: {
+        y: { stacked: true, grid: { color: t.soft, drawBorder: false }, ticks: { color: t.light } },
+        x: { stacked: true, grid: { display: false }, ticks: { color: t.muted } },
+      },
+    },
+  }),
+
+  'dashboard-monthly': (t) => ({
+    type: 'line',
+    data: {
+      labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+      datasets: [{
+        label: 'Revenue',
+        data: [42, 38, 56, 50, 78, 70, 96, 88, 118, 102, 144, 168],
+        borderColor: t.primary,
+        backgroundColor: `${t.primary}24`,
+        tension: 0.4,
+        fill: true,
+        pointRadius: 0,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: t.primary,
+        pointHoverBorderColor: t.bg,
+        pointHoverBorderWidth: 3,
+        borderWidth: 2.5,
+      }],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false } },
+      scales: {
+        y: { grid: { color: t.soft, drawBorder: false }, ticks: { color: t.light, maxTicksLimit: 4 } },
+        x: { grid: { display: false }, ticks: { color: t.light, font: { size: 10 } } },
+      },
+    },
+  }),
+
+  'sessions-area': (t) => ({
+    type: 'line',
+    data: {
+      labels: Array.from({length: 30}, (_, i) => `${i + 1}`),
+      datasets: [{
+        label: 'Sessions',
+        data: [120, 132, 110, 145, 162, 158, 175, 188, 172, 195, 210, 224, 218, 240, 256, 248, 272, 290, 282, 308, 322, 318, 340, 358, 352, 376, 392, 388, 410, 432],
+        borderColor: t.success,
+        backgroundColor: `${t.success}24`,
+        tension: 0.4,
+        fill: true,
+        pointRadius: 0,
+        borderWidth: 2,
+      }],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false } },
+      scales: {
+        y: { grid: { color: t.soft, drawBorder: false }, ticks: { color: t.light } },
+        x: { grid: { display: false }, ticks: { color: t.light, maxTicksLimit: 6 } },
+      },
+    },
+  }),
+};
+
+const instances = new Map();
+
+function buildAll() {
+  const t = tokens();
+  applyDefaults(t);
+  document.querySelectorAll('canvas[data-chart-key]').forEach((canvas) => {
+    const key = canvas.getAttribute('data-chart-key');
+    const seed = SEEDS[key];
+    if (!seed) return;
+    const existing = instances.get(canvas);
+    if (existing) existing.destroy();
+    instances.set(canvas, new Chart(canvas, seed(t)));
+  });
+}
+
+export function initCharts() {
+  if (!document.querySelector('canvas[data-chart-key]')) return;
+  buildAll();
+  // Re-render charts whenever the theme changes.
+  const observer = new MutationObserver((records) => {
+    if (records.some((r) => r.attributeName === 'data-theme')) buildAll();
+  });
+  observer.observe(document.documentElement, { attributes: true });
+}

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

@@ -0,0 +1,35 @@
+/**
+ * 2026 entry point.
+ *
+ * Order of operations:
+ *   1. Import the SCSS bundle (extracted to its own CSS file in production).
+ *   2. Mount the shell (sidebar/topbar/footer) into the page placeholders.
+ *   3. Wire shell behaviors (theme toggle, dropdowns, nav groups, todos).
+ *
+ * Each *-2026.html page has data-active + data-crumbs on <body> and three
+ * placeholder divs ([data-shell-sidebar], [data-shell-topbar],
+ * [data-shell-footer]) inside the .shell wrapper.
+ */
+
+import '../../styles/2026/index.scss';
+import { mountShell } from './Shell.js';
+import { initShellBehaviors } from './init.js';
+import { initCharts } from './charts.js';
+import { initVectorMaps } from './maps.js';
+import { initCalendarPage } from './calendar.js';
+import { initPalette } from './palette.js';
+
+function start() {
+  mountShell();
+  initShellBehaviors();
+  initPalette();
+  initCharts();
+  initVectorMaps();
+  initCalendarPage();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', start);
+} else {
+  start();
+}

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

@@ -0,0 +1,207 @@
+/**
+ * 2026 Shell behaviors:
+ *  - theme toggle (icon swap + persistence)
+ *  - dropdown open/close
+ *  - sidebar nav-group expand/collapse
+ *  - hero date population
+ *  - todo checkbox state
+ *
+ * The early-paint <script> in each page body sets the initial data-theme
+ * attribute to avoid a flash; this module only handles runtime toggles.
+ */
+
+const STORE_KEY = 'dash26-theme';
+
+const SUN_ICON  = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>';
+const MOON_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>';
+
+function initThemeToggle() {
+  const root = document.documentElement;
+  const toggle = document.getElementById('themeToggle');
+  if (!toggle) return;
+
+  const update = () => {
+    toggle.innerHTML = root.getAttribute('data-theme') === 'dark' ? SUN_ICON : MOON_ICON;
+  };
+  update();
+
+  toggle.addEventListener('click', () => {
+    const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+    root.setAttribute('data-theme', next);
+    try { localStorage.setItem(STORE_KEY, next); } catch { /* localStorage may be unavailable */ }
+    update();
+  });
+}
+
+function initHeroDate() {
+  const el = document.getElementById('heroDate');
+  if (!el) return;
+  const fmt = new Intl.DateTimeFormat('en-US', {
+    weekday: 'long', month: 'long', day: 'numeric', year: 'numeric',
+  }).format(new Date());
+  const parts = fmt.replace(/,/g, '').split(' ');
+  el.textContent = `${parts[0]} · ${parts[1]} ${parts[2]} · ${parts[3]}`;
+}
+
+function initNavGroups() {
+  // Rail mode (sidebar collapsed to 72px) renders the submenu as a flyout,
+  // so only one should be open at a time and outside-clicks should dismiss it.
+  // The flyout is position:fixed (see _responsive.scss) — we position it here
+  // via getBoundingClientRect so it survives a scrolling sidebar and clamps to
+  // the viewport bottom on short screens (e.g. 750×590).
+  const railMQ = window.matchMedia('(min-width: 721px) and (max-width: 1100px)');
+
+  const positionFlyout = (group) => {
+    const trigger = group.querySelector('[data-nav-toggle]');
+    const submenu = group.querySelector('.nav-submenu');
+    if (!trigger || !submenu) return;
+    const r = trigger.getBoundingClientRect();
+    const h = submenu.offsetHeight;            // natural content height (max-height: 400 clamp)
+    let top = Math.round(r.top);
+    const maxTop = window.innerHeight - h - 8;
+    if (top > maxTop) top = Math.max(8, maxTop);
+    submenu.style.left = `${Math.round(r.right + 10)}px`;
+    submenu.style.top = `${top}px`;
+  };
+
+  document.querySelectorAll('[data-nav-toggle]').forEach((a) => {
+    a.addEventListener('click', (e) => {
+      const group = a.closest('[data-nav-group]');
+      if (!group) return;
+      e.stopPropagation();
+      const willOpen = !group.classList.contains('is-open');
+      if (railMQ.matches) {
+        document.querySelectorAll('[data-nav-group].is-open').forEach((g) => {
+          if (g !== group) g.classList.remove('is-open');
+        });
+      }
+      group.classList.toggle('is-open', willOpen);
+      if (willOpen && railMQ.matches) positionFlyout(group);
+    });
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!railMQ.matches) return;
+    if (e.target.closest('[data-nav-group]')) return;
+    document.querySelectorAll('[data-nav-group].is-open').forEach((g) => g.classList.remove('is-open'));
+  });
+
+  // Keep the open flyout pinned to its trigger when the sidebar scrolls or the viewport resizes.
+  const reposition = () => {
+    if (!railMQ.matches) return;
+    document.querySelectorAll('[data-nav-group].is-open').forEach(positionFlyout);
+  };
+  const sidebar = document.querySelector('.d-sidebar');
+  if (sidebar) sidebar.addEventListener('scroll', reposition, { passive: true });
+  window.addEventListener('resize', reposition);
+}
+
+function initDropdowns() {
+  const closeAll = (except) => {
+    document.querySelectorAll('.dd-wrap.is-open').forEach((w) => {
+      if (w !== except) w.classList.remove('is-open');
+    });
+  };
+
+  document.querySelectorAll('[data-dropdown]').forEach((trigger) => {
+    const wrap = trigger.closest('.dd-wrap');
+    if (!wrap) return;
+    trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const willOpen = !wrap.classList.contains('is-open');
+      closeAll(wrap);
+      wrap.classList.toggle('is-open', willOpen);
+    });
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.dd-wrap')) closeAll();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeAll();
+  });
+}
+
+function initTodos() {
+  document.querySelectorAll('.todo-check').forEach((cb) => {
+    cb.addEventListener('change', () => {
+      const item = cb.closest('.todo-item');
+      if (item) item.classList.toggle('is-done', cb.checked);
+    });
+  });
+}
+
+function initAccordions() {
+  document.querySelectorAll('[data-accordion-trigger]').forEach((trigger) => {
+    trigger.addEventListener('click', () => {
+      const item = trigger.closest('[data-accordion]');
+      if (item) item.classList.toggle('is-open');
+    });
+  });
+}
+
+function initTabGroups() {
+  // Tabs that opt in by sharing a [data-tab-group] container.
+  // Each .tab inside gets click → toggles is-active on siblings and
+  // matches a sibling .tab-panel by data-tab-target.
+  document.querySelectorAll('[data-tab-group]').forEach((group) => {
+    const tabs = group.querySelectorAll('.tab');
+    const panels = group.querySelectorAll('.tab-panel');
+    tabs.forEach((tab) => {
+      tab.addEventListener('click', (e) => {
+        e.preventDefault();
+        const target = tab.getAttribute('data-tab-target');
+        tabs.forEach((t) => t.classList.toggle('is-active', t === tab));
+        panels.forEach((p) => p.classList.toggle('is-active', p.getAttribute('data-tab-id') === target));
+      });
+    });
+  });
+}
+
+function initMobileDrawer() {
+  // Mobile: hamburger button (rendered in topbar at ≤720px) opens an off-canvas
+  // sidebar drawer. Closes on backdrop click, Esc, or selecting a nav link.
+  const body = document.body;
+  if (!body) return;
+
+  // Inject a backdrop element once (used by CSS via body.has-drawer-open).
+  if (!document.querySelector('.drawer-backdrop')) {
+    const backdrop = document.createElement('div');
+    backdrop.className = 'drawer-backdrop';
+    backdrop.setAttribute('aria-hidden', 'true');
+    body.appendChild(backdrop);
+    backdrop.addEventListener('click', closeDrawer);
+  }
+
+  function openDrawer() {
+    body.classList.add('has-drawer-open');
+  }
+  function closeDrawer() {
+    body.classList.remove('has-drawer-open');
+  }
+
+  document.addEventListener('click', (e) => {
+    const trigger = e.target.closest('[data-drawer-open]');
+    if (trigger) { e.preventDefault(); openDrawer(); return; }
+    // Auto-close when a sidebar nav link is selected (so the next page opens cleanly).
+    const linkInDrawer = e.target.closest('.d-sidebar a[href]:not([href^="#"]):not([href="javascript:void(0)"])');
+    if (body.classList.contains('has-drawer-open') && linkInDrawer) {
+      closeDrawer();
+    }
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && body.classList.contains('has-drawer-open')) closeDrawer();
+  });
+}
+
+export function initShellBehaviors() {
+  initThemeToggle();
+  initHeroDate();
+  initNavGroups();
+  initDropdowns();
+  initTodos();
+  initAccordions();
+  initTabGroups();
+  initMobileDrawer();
+}