main.js

(function () {
  'use strict';

  /* ── config ─────────────────────────────────────────── */
  var GITHUB_USERNAME    = 'devmdrd';
  var NPM_PACKAGE        = 'axios-react-hook';
  var NPM_DEMO_URL       = 'https://stackblitz.com/github/devmdrd/axios-react-hook/tree/playground';
  var CONTACT_EMAIL      = 'mdrd.muhammedrashid@gmail.com';
  var FORMSPREE_ENDPOINT = 'https://formspree.io/f/mnnvvnwp';
  var FEATURED_REPOS     = ['axios-react-hook'];
  var ROLES              = ['Full Stack Developer','Software Engineer','MERN/MEAN Stack Developer','Web Developer','Tech Enthusiast'];
  var CAREER_START       = new Date(2023, 5, 1);
  var MIN_LOADER_MS      = 600;

  /* ── cache utils ─────────────────────────────────────── */
  var CACHE_TTL  = 5 * 60 * 1000;
  var TIMEOUT_MS = 8000;

  function withTimeout(promise, ms) {
    ms = ms || TIMEOUT_MS;
    var id;
    var timeout = new Promise(function (_, reject) {
      id = setTimeout(function () { reject(new Error('timeout')); }, ms);
    });
    return Promise.race([promise, timeout]).finally(function () { clearTimeout(id); });
  }

  function readCache(key) {
    try {
      var raw = sessionStorage.getItem(key);
      if (!raw) return null;
      var parsed = JSON.parse(raw);
      if (Date.now() - parsed.ts > CACHE_TTL) { sessionStorage.removeItem(key); return null; }
      return parsed.data;
    } catch { return null; }
  }

  function writeCache(key, data) {
    try { sessionStorage.setItem(key, JSON.stringify({ ts: Date.now(), data: data })); } catch {}
  }

  /* ── format utils ────────────────────────────────────── */
  function fmt(n) { return n >= 1000 ? ((n / 1000).toFixed(1) + 'k') : String(n ?? 0); }

  function fmtBytes(n) {
    if (n == null) return null;
    return n < 1024 ? (n + 'B') : ((n / 1024).toFixed(1) + 'KB');
  }

  function formatRelativeDate(iso) {
    if (!iso) return 'unknown';
    var days = Math.floor((Date.now() - new Date(iso).getTime()) / 86400000);
    if (days === 0) return 'today';
    if (days === 1) return 'yesterday';
    if (days < 30)  return days + 'd ago';
    if (days < 365) return Math.floor(days / 30) + 'mo ago';
    return Math.floor(days / 365) + 'y ago';
  }

  /* ── dom utils ───────────────────────────────────────── */
  function esc(str) {
    return String(str ?? '')
      .replace(/&/g, '&amp;')
      .replace(/</g,  '&lt;')
      .replace(/>/g,  '&gt;')
      .replace(/"/g,  '&quot;');
  }

  function makeTag(text) {
    return Object.assign(document.createElement('span'), { className: 'tag', textContent: text });
  }

  function makeCopyHandler(btn, getText) {
    if (!btn) return;
    btn.addEventListener('click', function () {
      navigator.clipboard?.writeText(getText()).then(function () {
        var icon = btn.querySelector('i');
        if (icon) icon.className = 'fa-solid fa-check';
        setTimeout(function () { if (icon) icon.className = 'fa-regular fa-copy'; }, 2000);
      });
    });
  }

  /* ── github api ──────────────────────────────────────── */
  var DEFAULT_STREAK = { total: 0, current: 0, longest: 0 };

  async function fetchMain(signal) {
    var cached = readCache('gh_main');
    if (cached) return cached;
    var [uRes, rRes] = await Promise.all([
      withTimeout(fetch('https://api.github.com/users/' + GITHUB_USERNAME, { signal })),
      withTimeout(fetch('https://api.github.com/users/' + GITHUB_USERNAME + '/repos?per_page=100&sort=updated', { signal })),
    ]);
    if (!uRes.ok) {
      if (uRes.status === 403 || uRes.status === 429) {
        var reset = uRes.headers.get('X-RateLimit-Reset');
        var wait  = reset ? Math.ceil((Number(reset) * 1000 - Date.now()) / 60000) : 60;
        throw Object.assign(new Error('rate_limited'), { retryAfter: wait });
      }
      throw new Error('http_' + uRes.status);
    }
    var user = await uRes.json();
    var list = await rRes.json();
    if (!Array.isArray(list)) throw new Error('repos_failed');
    var nonFork = list.filter(function (r) { return !r.fork; });
    var stats = {
      followers: user.followers ?? 0,
      following: user.following ?? 0,
      repos:     nonFork.length,
      stars:     list.reduce(function (s, r) { return s + (r.stargazers_count ?? 0); }, 0),
      joinedAt:  user.created_at,
    };
    var langs = {};
    list.forEach(function (r) { if (r.language) langs[r.language] = (langs[r.language] ?? 0) + 1; });
    var repos = nonFork.map(function (r) { return {
      id:          r.id,
      name:        r.name,
      description: r.description ?? '',
      stars:       r.stargazers_count ?? 0,
      forks:       r.forks_count ?? 0,
      language:    r.language ?? '',
      topics:      r.topics ?? [],
      updatedAt:   r.updated_at,
      url:         r.html_url,
      homepage:    r.homepage ?? '',
    }; });
    var result = { stats, langs, repos };
    writeCache('gh_main', result);
    return result;
  }

  function computeStreak(flat) {
    var now   = new Date();
    var today = [now.getFullYear(), String(now.getMonth() + 1).padStart(2, '0'), String(now.getDate()).padStart(2, '0')].join('-');
    var longest = 0, run = 0;
    for (var item of flat) {
      if (item.count > 0) { run++; if (run > longest) longest = run; } else run = 0;
    }
    var current = 0;
    for (var i = flat.length - 1; i >= 0; i--) {
      var d = flat[i];
      if (d.count > 0)          { current++; }
      else if (d.date === today) { continue; }
      else                       { break; }
    }
    return { current, longest };
  }

  async function fetchContribs(signal) {
    var cached = readCache('gh_contrib');
    if (cached) return cached;
    var res = await withTimeout(
      fetch('https://github-contributions-api.jogruber.de/v4/' + GITHUB_USERNAME + '?y=all', { signal }),
    );
    if (!res.ok) throw new Error('contrib_error');
    var json = await res.json();
    var flat = json.contributions ?? [];
    var weeksMap = {};
    flat.forEach(function (e) {
      var d = new Date(e.date);
      var sun = new Date(d);
      sun.setDate(d.getDate() - d.getDay());
      var k = sun.toISOString().slice(0, 10);
      if (!weeksMap[k]) weeksMap[k] = [];
      weeksMap[k].push({ date: e.date, contributionCount: e.count });
    });
    var weeks = Object.keys(weeksMap).sort().map(function (k) { return { contributionDays: weeksMap[k] }; });
    var total = flat.reduce(function (s, d) { return s + d.count; }, 0);
    var streakData = computeStreak(flat);
    var result = {
      contribData: { totalContributions: total, weeks },
      streak:      { total, current: streakData.current, longest: streakData.longest },
    };
    writeCache('gh_contrib', result);
    return result;
  }

  /* ── npm api ─────────────────────────────────────────── */
  var DEFAULT_NPM_PKG = {
    name:         NPM_PACKAGE,
    version:      '2.0.0',
    description:  'A lightweight React hook for Axios-based API calls with support for all HTTP methods.',
    downloads:    0,
    stars:        0,
    forks:        0,
    language:     '',
    topics:       [],
    bundleGzip:   null,
    downloads30d: [],
  };

  async function fetchNpm(signal) {
    var cached = readCache('gh_npm');
    if (cached) return cached;
    var [pRes, dRes, rRes, bRes, dlRangeRes] = await Promise.all([
      withTimeout(fetch('https://registry.npmjs.org/' + NPM_PACKAGE, { signal })),
      withTimeout(fetch('https://api.npmjs.org/downloads/point/last-week/' + NPM_PACKAGE, { signal })),
      withTimeout(fetch('https://api.github.com/repos/' + GITHUB_USERNAME + '/' + NPM_PACKAGE, { signal })),
      withTimeout(fetch('https://bundlephobia.com/api/size?package=' + NPM_PACKAGE, { signal })).catch(function () { return null; }),
      withTimeout(fetch('https://api.npmjs.org/downloads/range/last-month/' + NPM_PACKAGE, { signal })).catch(function () { return null; }),
    ]);
    if (!pRes.ok) throw new Error('npm_registry_' + pRes.status);
    var [pkg, dl, repo] = await Promise.all([pRes.json(), dRes.json(), rRes.json()]);
    var bundle  = bRes?.ok       ? await bRes.json().catch(function () { return null; })       : null;
    var dlRange = dlRangeRes?.ok ? await dlRangeRes.json().catch(function () { return null; }) : null;
    var v1Version = Object.keys(pkg.versions || {})
      .filter(function (v) { return v.startsWith('1.'); })
      .sort(function (a, b) {
        var pa = a.split('.').map(Number);
        var pb = b.split('.').map(Number);
        for (var i = 0; i < 3; i++) if (pa[i] !== pb[i]) return pa[i] - pb[i];
        return 0;
      })
      .at(-1) ?? null;
    var result = {
      name:         pkg.name,
      version:      pkg['dist-tags']?.latest,
      v1Version,
      description:  pkg.description,
      downloads:    dl.downloads ?? 0,
      stars:        repo.stargazers_count ?? 0,
      forks:        repo.forks_count ?? 0,
      language:     repo.language ?? '',
      topics:       repo.topics ?? [],
      bundleGzip:   bundle?.gzip ?? null,
      downloads30d: dlRange?.downloads ?? [],
    };
    writeCache('gh_npm', result);
    return result;
  }

  /* ── theme ───────────────────────────────────────────── */
  var THEME_KEY = 'theme';

  function getTheme() { return document.documentElement.dataset.theme || 'dark'; }

  function applyTheme(theme) {
    document.documentElement.dataset.theme = theme;
    localStorage.setItem(THEME_KEY, theme);
    var btn = document.getElementById('theme-toggle');
    if (btn) {
      var isDark = theme === 'dark';
      btn.setAttribute('aria-label', 'Switch to ' + (isDark ? 'light' : 'dark') + ' theme');
      var icon = btn.querySelector('i');
      if (icon) icon.className = isDark ? 'fa-solid fa-sun' : 'fa-solid fa-moon';
    }
    var announce = document.getElementById('theme-announce');
    if (announce) announce.textContent = theme + ' mode enabled';
  }

  function initTheme() {
    var stored = localStorage.getItem(THEME_KEY);
    var theme  = (stored === 'dark' || stored === 'light')
      ? stored
      : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    applyTheme(theme);
    document.getElementById('theme-toggle')?.addEventListener('click', function () {
      applyTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark');
    });
  }

  /* ── effects ─────────────────────────────────────────── */
  var _animObserver   = null;
  var _reducedMotion  = window.matchMedia('(prefers-reduced-motion: reduce)');

  function initTyping(target, words) {
    if (!target || !words.length) return;
    target.textContent = words[0];
    if (_reducedMotion.matches) return;
    var wordIndex = 0, typedText = words[0], isForward = true;
    function tick() {
      var current      = words[wordIndex];
      var doneForward  = isForward  && typedText.length === current.length;
      var doneBackward = !isForward && typedText.length === 0;
      var delay        = doneForward ? 1200 : isForward ? 60 : 30;
      window.setTimeout(function () {
        if (doneForward) {
          isForward = false;
        } else if (doneBackward) {
          wordIndex = (wordIndex + 1) % words.length;
          isForward = true;
        } else {
          typedText = current.slice(0, typedText.length + (isForward ? 1 : -1));
        }
        target.textContent = typedText;
        tick();
      }, delay);
    }
    tick();
  }

  function initAnimations() {
    var noMotion = _reducedMotion.matches;
    if (!('IntersectionObserver' in window) || noMotion) {
      document.querySelectorAll('.anim').forEach(function (el) { el.classList.add('anim-visible'); });
      return;
    }
    if (!_animObserver) {
      _animObserver = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
          if (e.isIntersecting) { e.target.classList.add('anim-visible'); _animObserver.unobserve(e.target); }
        });
      }, { threshold: 0.08 });
    }
    document.querySelectorAll('.anim:not(.anim-visible)').forEach(function (el) { _animObserver.observe(el); });
  }

  /* ── nav ─────────────────────────────────────────────── */
  var BACK_TOP_THRESHOLD_PX = 400;

  function initScrollSpy(defaultSection) {
    defaultSection = defaultSection || 'about';
    var progressBar = document.getElementById('scroll-progress');
    var backTopBtn  = document.getElementById('back-top-btn');
    var activeRef   = defaultSection;
    var frame       = 0;

    function getHeaderOffset() { return document.querySelector('.site-header')?.offsetHeight ?? 44; }

    function setNavActive(id) {
      if (!id || activeRef === id) return;
      activeRef = id;
      document.querySelectorAll('#nav-sidebar a[data-section]').forEach(function (link) {
        var on = link.dataset.section === id;
        link.classList.toggle('active', on);
        if (on) link.setAttribute('aria-current', 'location');
        else    link.removeAttribute('aria-current');
      });
    }

    function update() {
      frame = 0;
      var sections  = Array.from(document.querySelectorAll('section[id]'));
      var doc       = document.documentElement;
      var maxScroll = doc.scrollHeight - window.innerHeight;
      var scrollY   = window.scrollY;
      if (progressBar) progressBar.style.width = (maxScroll > 0 ? Math.min(100, (scrollY / maxScroll) * 100) : 0) + '%';
      backTopBtn?.classList.toggle('is-visible', scrollY > BACK_TOP_THRESHOLD_PX);
      if (!sections.length) return;
      var viewportTop    = getHeaderOffset();
      var viewportBottom = window.innerHeight;
      var viewportHeight = Math.max(1, viewportBottom - viewportTop);
      var viewportCenter = viewportTop + viewportHeight / 2;
      var bestId         = sections[0].id;
      var bestScore      = -Infinity;
      var hashId         = decodeURIComponent(window.location.hash.replace('#', ''));
      var hashTarget     = hashId ? document.getElementById(hashId) : null;
      if (hashTarget?.matches('section[id]')) {
        var r  = hashTarget.getBoundingClientRect();
        var vp = Math.max(0, Math.min(r.bottom, viewportBottom) - Math.max(r.top, viewportTop));
        if (vp / Math.max(1, Math.min(r.height, viewportHeight)) >= 0.5) { setNavActive(hashTarget.id); return; }
      }
      if (scrollY + window.innerHeight >= doc.scrollHeight - 2) { setNavActive(sections[sections.length - 1].id); return; }
      for (var s of sections) {
        var sr    = s.getBoundingClientRect();
        var svp   = Math.max(0, Math.min(sr.bottom, viewportBottom) - Math.max(sr.top, viewportTop));
        var svr   = svp / Math.max(1, Math.min(sr.height, viewportHeight));
        var cd    = Math.abs(sr.top + sr.height / 2 - viewportCenter) / viewportHeight;
        var score = svr * 2
          + Math.max(0, 1 - Math.abs(sr.top - viewportTop) / 160) * 0.9
          + (sr.top <= viewportTop ? 0.25 : 0)
          - cd;
        if (svp > 0 && score > bestScore) { bestScore = score; bestId = s.id; }
      }
      if (bestScore === -Infinity) {
        bestId = sections.reduce(function (a, b) {
          return Math.abs(a.getBoundingClientRect().top - viewportTop) <= Math.abs(b.getBoundingClientRect().top - viewportTop) ? a : b;
        }).id;
      }
      setNavActive(bestId);
    }

    function scheduleUpdate() { if (!frame) frame = window.requestAnimationFrame(update); }
    var ro = 'ResizeObserver' in window ? new ResizeObserver(scheduleUpdate) : null;
    document.querySelectorAll('section[id]').forEach(function (s) { ro?.observe(s); });
    update();
    window.addEventListener('scroll',     scheduleUpdate, { passive: true });
    window.addEventListener('resize',     scheduleUpdate);
    window.addEventListener('hashchange', scheduleUpdate);
  }

  function initBackTop() {
    document.getElementById('back-top-btn')?.addEventListener('click', function () {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }

  /* ── sidebar ─────────────────────────────────────────── */
  var _lockCount = 0, _savedScrollY = 0;

  function lockScroll() {
    if (_lockCount++ > 0) return;
    _savedScrollY                = window.scrollY;
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.top      = '-' + _savedScrollY + 'px';
    document.body.style.width    = '100%';
  }

  function unlockScroll() {
    if (--_lockCount > 0) return;
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.top      = '';
    document.body.style.width    = '';
    window.scrollTo(0, _savedScrollY);
  }

  function trapFocus(el) {
    var sel       = 'a[href],button:not([disabled]),input,select,textarea,[tabindex]:not([tabindex="-1"])';
    var focusable = Array.from(el.querySelectorAll(sel));
    var first     = focusable[0];
    var last      = focusable[focusable.length - 1];
    function onKeyDown(e) {
      if (e.key !== 'Tab') return;
      if (e.shiftKey) {
        if (document.activeElement === first) { e.preventDefault(); last?.focus(); }
      } else {
        if (document.activeElement === last)  { e.preventDefault(); first?.focus(); }
      }
    }
    el.addEventListener('keydown', onKeyDown);
    first?.focus();
    return function () { el.removeEventListener('keydown', onKeyDown); };
  }

  function wireSidebar(sidebarId, overlayId, openBtnId, closeBtnId, breakpointPx) {
    var sidebar  = document.getElementById(sidebarId);
    var overlay  = document.getElementById(overlayId);
    var openBtn  = document.getElementById(openBtnId);
    var closeBtn = document.getElementById(closeBtnId);
    if (!sidebar) return null;
    var isMobile    = function () { return !window.matchMedia('(min-width: ' + breakpointPx + 'px)').matches; };
    var releaseTrap = null;
    var sidebarOpen = function () {
      sidebar.classList.add('is-open');
      overlay?.classList.add('is-open');
      if (isMobile()) { lockScroll(); releaseTrap = trapFocus(sidebar); }
    };
    var sidebarClose = function () {
      sidebar.classList.remove('is-open');
      overlay?.classList.remove('is-open');
      if (isMobile()) { unlockScroll(); releaseTrap?.(); releaseTrap = null; }
    };
    openBtn?.addEventListener('click', sidebarOpen);
    closeBtn?.addEventListener('click', sidebarClose);
    overlay?.addEventListener('click', sidebarClose);
    sidebar.addEventListener('keydown', function (e) { if (e.key === 'Escape' && isMobile()) sidebarClose(); });
    return { sidebar, close: sidebarClose, isMobile };
  }

  var NAV_SETTLE_MS = 220;

  function initNavSidebar() {
    var wired = wireSidebar('nav-sidebar', 'nav-overlay', 'menu-btn', 'nav-close-btn', 768);
    if (!wired) return;
    var sidebar = wired.sidebar, sidebarClose = wired.close, isMobile = wired.isMobile;
    sidebar.querySelectorAll('a[data-section]').forEach(function (link) {
      link.addEventListener('click', function (e) {
        if (!isMobile()) return;
        e.preventDefault();
        var id = link.dataset.section;
        sidebarClose();
        setTimeout(function () {
          var el = document.getElementById(id);
          if (!el) return;
          window.history.pushState(null, '', '#' + id);
          window.dispatchEvent(new HashChangeEvent('hashchange'));
          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, NAV_SETTLE_MS);
      });
    });
  }

  function initGhSidebar() {
    wireSidebar('gh-sidebar', 'gh-overlay', 'gh-open-btn', 'gh-close-btn', 1280);
  }

  /* ── contact ─────────────────────────────────────────── */
  var CONTACT_AUTO_CLEAR_MS = 8000;

  function initContact() {
    var form       = document.getElementById('contact-form');
    var feedbackEl = document.getElementById('contact-feedback');
    var submitBtn  = document.getElementById('contact-submit');
    if (!form) return;
    var clearTimer = null;

    form.querySelectorAll('[required]').forEach(function (field) {
      field.addEventListener('blur',  function () { field.classList.toggle('is-invalid', !field.validity.valid); });
      field.addEventListener('input', function () {
        if (field.classList.contains('is-invalid')) field.classList.toggle('is-invalid', !field.validity.valid);
      });
    });

    function showFeedback(status, message) {
      if (!feedbackEl) return;
      feedbackEl.className   = 'contact-feedback feedback-msg feedback-msg--' + status;
      feedbackEl.textContent = message;
      feedbackEl.hidden      = false;
      window.clearTimeout(clearTimer);
      clearTimer = window.setTimeout(function () { feedbackEl.hidden = true; feedbackEl.textContent = ''; }, CONTACT_AUTO_CLEAR_MS);
    }

    function setSending(isSending) {
      if (!submitBtn) return;
      submitBtn.disabled = isSending;
      var icon = submitBtn.querySelector('i');
      var text = submitBtn.querySelector('.btn-text');
      if (icon) icon.className   = isSending ? 'fa-solid fa-spinner fa-spin' : 'fa-solid fa-paper-plane';
      if (text) text.textContent = isSending ? 'sending' : 'send message';
    }

    form.addEventListener('submit', async function (e) {
      e.preventDefault();
      window.clearTimeout(clearTimer);
      if (feedbackEl) feedbackEl.hidden = true;
      setSending(true);
      try {
        var res = await fetch(FORMSPREE_ENDPOINT, {
          method:         'POST',
          body:           new FormData(form),
          headers:        { Accept: 'application/json' },
          referrerPolicy: 'strict-origin',
        });
        if (!res.ok) throw new Error('request failed');
        form.reset();
        form.querySelectorAll('.is-invalid').forEach(function (f) { f.classList.remove('is-invalid'); });
        showFeedback('success', "Message sent! I'll get back to you soon.");
      } catch {
        showFeedback('error', 'Failed. Please email ' + CONTACT_EMAIL + ' directly.');
      } finally {
        setSending(false);
      }
    });
  }

  /* ── palette ─────────────────────────────────────────── */
  var PAL_NAV_ITEMS = [
    { label: 'About',      icon: 'fa-user',          section: 'about'      },
    { label: 'Experience', icon: 'fa-briefcase',      section: 'experience' },
    { label: 'Projects',   icon: 'fa-folder-open',    section: 'projects'   },
    { label: 'Education',  icon: 'fa-graduation-cap', section: 'education'  },
    { label: 'Contact',    icon: 'fa-paper-plane',    section: 'contact'    },
  ];
  var PAL_ACTION_ITEMS = [
    { label: 'Copy email',   icon: 'fa-envelope',           action: 'copy-email'   },
    { label: 'Download PDF', icon: 'fa-file-pdf',           action: 'download-pdf' },
    { label: 'Toggle theme', icon: 'fa-circle-half-stroke', action: 'toggle-theme' },
    { label: 'GitHub',       icon: 'fa-brands fa-github',   action: 'github'       },
  ];

  var _palOverlay, _palInput, _palList, _palActiveIdx = -1, _palFiltered = [];

  function palHighlight(label, q) {
    if (!q) return esc(label);
    var idx = label.toLowerCase().indexOf(q);
    if (idx < 0) return esc(label);
    return esc(label.slice(0, idx))
      + '<mark class="pal__mark">' + esc(label.slice(idx, idx + q.length)) + '</mark>'
      + esc(label.slice(idx + q.length));
  }

  function palAllItems() {
    return [
      ...PAL_NAV_ITEMS.map(function (i)    { return Object.assign({}, i, { kind: 'nav'    }); }),
      ...PAL_ACTION_ITEMS.map(function (i) { return Object.assign({}, i, { kind: 'action' }); }),
    ];
  }

  function palExecItem(item) {
    if (item.section) {
      document.getElementById(item.section)?.scrollIntoView({ behavior: 'smooth' });
      palClose();
    } else if (item.action === 'copy-email') {
      navigator.clipboard?.writeText(CONTACT_EMAIL).then(function () {
        var btn = _palList.querySelector('.pal__item.is-active i');
        if (btn) { var orig = btn.className; btn.className = 'fa-solid fa-check'; setTimeout(function () { btn.className = orig; }, 2000); }
      });
      palClose();
    } else if (item.action === 'download-pdf') {
      document.querySelector('a[href*="resume"]')?.click(); palClose();
    } else if (item.action === 'toggle-theme') {
      document.getElementById('theme-toggle')?.click(); palClose();
    } else if (item.action === 'github') {
      window.open('https://github.com/devmdrd', '_blank', 'noreferrer'); palClose();
    }
  }

  function palSetActive(i) {
    _palActiveIdx = Math.max(0, Math.min(i, _palFiltered.length - 1));
    _palList.querySelectorAll('.pal__item').forEach(function (b, j) { b.classList.toggle('is-active', j === _palActiveIdx); });
    _palList.querySelector('.pal__item.is-active')?.scrollIntoView({ block: 'nearest' });
  }

  function palRender(q) {
    var query  = q.toLowerCase().trim();
    _palFiltered = palAllItems().filter(function (i) { return i.label.toLowerCase().includes(query); });
    if (!_palFiltered.length) {
      _palList.innerHTML = '<div class="pal__empty">No results for "' + esc(q) + '"</div>';
      _palActiveIdx = -1;
      return;
    }
    _palActiveIdx     = 0;
    _palList.innerHTML = _palFiltered.map(function (item, i) {
      var iconCls = item.icon.startsWith('fa-brands') ? item.icon : 'fa-solid ' + item.icon;
      return '<button class="pal__item' + (i === 0 ? ' is-active' : '') + '" type="button" data-idx="' + i + '">'
        + '<i class="' + iconCls + ' pal__item-icon"></i>'
        + '<span>' + palHighlight(item.label, query) + '</span>'
        + '<span class="pal__item-badge">' + item.kind + '</span>'
        + '</button>';
    }).join('');
    _palList.querySelectorAll('.pal__item').forEach(function (btn, i) {
      btn.addEventListener('click',      function () { palExecItem(_palFiltered[i]); });
      btn.addEventListener('mouseenter', function () { palSetActive(i); });
    });
  }

  function palOpen() {
    _palOverlay.removeAttribute('hidden');
    _palOverlay.classList.add('is-open');
    _palInput.value = '';
    palRender('');
    requestAnimationFrame(function () { _palInput.focus(); });
  }

  function palClose() {
    _palOverlay.setAttribute('hidden', '');
    _palOverlay.classList.remove('is-open');
  }

  function initPalette() {
    _palOverlay = document.getElementById('cmd-palette');
    if (!_palOverlay) return;
    _palInput = _palOverlay.querySelector('#pal-input');
    _palList  = _palOverlay.querySelector('#pal-list');

    window.addEventListener('keydown', function (e) {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        _palOverlay.hasAttribute('hidden') ? palOpen() : palClose();
        return;
      }
      if (_palOverlay.hasAttribute('hidden')) return;
      if (e.key === 'Escape')    { palClose(); return; }
      if (e.key === 'ArrowDown') { e.preventDefault(); palSetActive(_palActiveIdx + 1); return; }
      if (e.key === 'ArrowUp')   { e.preventDefault(); palSetActive(_palActiveIdx - 1); return; }
      if (e.key === 'Enter')     { e.preventDefault(); if (_palActiveIdx >= 0) palExecItem(_palFiltered[_palActiveIdx]); return; }
    });

    _palInput.addEventListener('input', function () { palRender(_palInput.value); });
    _palOverlay.addEventListener('click', function (e) { if (e.target === _palOverlay) palClose(); });
    document.getElementById('pal-trigger')?.addEventListener('click', palOpen);
  }

  /* ── github stats ────────────────────────────────────── */
  function setError(id, label, err) {
    var el = document.getElementById(id);
    if (!el) return;
    el.innerHTML = '<div class="gh-error">'
      + (err?.retryAfter
          ? 'GitHub rate limit — retry in ' + err.retryAfter + 'min'
          : 'failed to load ' + label)
      + '</div>';
  }

  function renderStats(stats, streak) {
    var el = document.getElementById('gh-stats');
    if (!el) return;
    var v = Object.assign({}, stats, { contributions: streak.total });
    el.querySelectorAll('[data-stat]').forEach(function (cell) {
      if (cell.dataset.stat !== 'views') cell.textContent = fmt(v[cell.dataset.stat]);
    });
    var allReposEl = document.querySelector('[aria-label="View all repositories on GitHub"]');
    if (allReposEl) allReposEl.href = 'https://github.com/' + GITHUB_USERNAME + '?tab=repositories';
    var viewsEl = el.querySelector('[data-stat="views"]');
    if (viewsEl) {
      fetch('https://komarev.com/ghpvc/?username=' + GITHUB_USERNAME + '&format=true')
        .then(function (r) { return r.text(); })
        .then(function (t) { var n = parseInt(t.trim(), 10); viewsEl.textContent = isNaN(n) ? t.trim() : fmt(n); })
        .catch(function () { viewsEl.textContent = '—'; });
    }
  }

  function renderStreak(streak) {
    var el = document.getElementById('gh-streak');
    if (!el) return;
    var vals = { total: fmt(streak.total), current: streak.current + 'd', longest: streak.longest + 'd' };
    el.querySelectorAll('[data-streak]').forEach(function (cell) { cell.textContent = vals[cell.dataset.streak]; });
  }

  function langColor(idx) { return 'var(--lc' + Math.min(idx + 1, 8) + ')'; }

  function renderLangs(langs) {
    var sk   = document.getElementById('langs-sk');
    var list = document.getElementById('langs-list');
    if (!list) return;
    var total  = Object.values(langs).reduce(function (a, b) { return a + b; }, 0) || 1;
    var sorted = Object.entries(langs).sort(function ([, a], [, b]) { return b - a; }).slice(0, 8);
    if (!sorted.length) {
      list.innerHTML = '<div class="gh-error">no language data</div>';
    } else {
      var bar  = sorted.map(function ([lang, count], i) {
        var pct   = ((count / total) * 100).toFixed(2);
        var color = langColor(i);
        return '<div class="lang-seg" style="width:' + pct + '%;background:' + color + '" title="' + esc(lang) + ' ' + parseFloat(pct).toFixed(1) + '%"></div>';
      }).join('');
      var rows = sorted.map(function ([lang, count], i) {
        var pct   = ((count / total) * 100).toFixed(1);
        var color = langColor(i);
        return '<div class="lang-row"><span class="lang-dot" style="background:' + color + '"></span><span class="lang-name">' + esc(lang) + '</span><span class="lang-pct">' + pct + '%</span></div>';
      }).join('');
      list.innerHTML = '<div class="lang-bar">' + bar + '</div><div class="lang-legend">' + rows + '</div>';
    }
    if (sk) sk.hidden = true;
    list.hidden = false;
  }

  /* ── contributions chart ─────────────────────────────── */
  var CELL_SIZE     = 8;
  var CELL_GAP      = 1;
  var CELL_STEP     = 9;
  var DAY_LABELS    = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
  var LEGEND_COUNTS = [0, 3, 8, 15, 20];

  function contribColor(count, theme) {
    var base = theme !== 'light' ? '255,255,255' : '0,0,0';
    if (!count)     return 'rgba(' + base + ',0.07)';
    if (count < 4)  return 'rgba(' + base + ',0.22)';
    if (count < 9)  return 'rgba(' + base + ',0.45)';
    if (count < 16) return 'rgba(' + base + ',0.70)';
    return 'rgba(' + base + ',1)';
  }

  function buildContribMap(weeks) {
    var map = {};
    (weeks ?? []).forEach(function (w) {
      (w.contributionDays ?? []).forEach(function (d) { map[d.date] = d.contributionCount; });
    });
    return map;
  }

  function genDays(year, map, joinedAt) {
    var now  = new Date();
    var join = joinedAt ? new Date(joinedAt) : null;
    var cur  = new Date(year, 0, 1);
    var end  = new Date(year, 11, 31);
    var days = [];
    while (cur <= end) {
      var iso = [cur.getFullYear(), String(cur.getMonth() + 1).padStart(2, '0'), String(cur.getDate()).padStart(2, '0')].join('-');
      days.push({ date: iso, count: map[iso] ?? 0, disabled: cur > now || (join && cur < join) });
      cur.setDate(cur.getDate() + 1);
    }
    return days;
  }

  function toWeeks(days) {
    var startDay = new Date(days[0].date + 'T00:00:00').getDay();
    var week     = Array.from({ length: startDay }, function () { return null; });
    var weeks    = [];
    days.forEach(function (d) {
      week.push(d);
      if (week.length === 7) { weeks.push(week); week = []; }
    });
    if (week.length) { while (week.length < 7) week.push(null); weeks.push(week); }
    return weeks;
  }

  function drawChart(data, joinedAt, year, theme, content) {
    var map   = buildContribMap(data.weeks);
    var days  = genDays(year, map, joinedAt);
    var weeks = toWeeks(days);
    var curYear = new Date().getFullYear();

    var monthsEl = content.querySelector('#contrib-months');
    if (monthsEl) {
      monthsEl.style.width = (weeks.length * CELL_STEP) + 'px';
      monthsEl.textContent = '';
      var seen = new Set();
      weeks.forEach(function (w, wi) {
        w.forEach(function (d) {
          if (!d) return;
          var dt = new Date(d.date + 'T00:00:00');
          var k  = dt.getFullYear() + '-' + dt.getMonth();
          if (!seen.has(k) && dt.getDate() <= 7) {
            seen.add(k);
            monthsEl.insertAdjacentHTML('beforeend',
              '<span class="contrib-chart__month" style="left:' + (wi * CELL_STEP) + 'px">' + dt.toLocaleString('default', { month: 'short' }) + '</span>',
            );
          }
        });
      });
    }

    var daysEl = content.querySelector('#contrib-days');
    if (daysEl) {
      daysEl.innerHTML = DAY_LABELS.map(function (label, i) {
        return '<div class="contrib-chart__day" style="height:' + CELL_SIZE + 'px;margin-bottom:' + (i === 6 ? 0 : CELL_GAP) + 'px">' + label + '</div>';
      }).join('');
    }

    var innerEl = content.querySelector('#contrib-inner');
    if (innerEl) innerEl.style.width = (weeks.length * CELL_STEP + 28) + 'px';

    var grid = content.querySelector('#contrib-grid');
    if (grid) {
      var total = weeks.flat().reduce(function (s, d) { return s + (d?.count ?? 0); }, 0);
      grid.setAttribute('aria-label', 'Contributions ' + year + ' — ' + total + ' total');
      grid.innerHTML = weeks.map(function (w) {
        return w.map(function (d) {
          if (!d) return '<div class="cell"></div>';
          var date  = String(d.date).replace(/[^0-9-]/g, '');
          var count = Number(d.count);
          return '<div class="cell contrib-cell ' + (d.disabled ? 'is-disabled' : 'is-active') + '" style="background-color:' + contribColor(count, theme) + '" data-date="' + date + '" data-count="' + count + '"></div>';
        }).join('');
      }).join('');
    }

    var legendEl = content.querySelector('#contrib-legend');
    if (legendEl) {
      var less = legendEl.querySelector('.legend-less')?.outerHTML ?? '';
      var more = legendEl.querySelector('.legend-more')?.outerHTML ?? '';
      legendEl.innerHTML = less
        + LEGEND_COUNTS.map(function (v) { return '<div class="cell" style="background-color:' + contribColor(v, theme) + '"></div>'; }).join('')
        + more;
    }

    return { curYear, joinYear: joinedAt ? new Date(joinedAt).getFullYear() : curYear };
  }

  function renderContribChart(data, joinedAt) {
    var wrapper = document.getElementById('gh-contrib');
    var sk      = wrapper?.querySelector('#contrib-sk');
    var content = wrapper?.querySelector('#contrib-content');
    if (!wrapper || !content) return;
    if (sk) sk.hidden = true;
    content.hidden = false;

    var grid = content.querySelector('#contrib-grid');
    var tip  = content.querySelector('#contrib-tooltip');
    if (grid && tip) {
      grid.addEventListener('mouseover', function (e) {
        var cell = e.target.closest('.contrib-cell.is-active');
        if (!cell) return;
        var n  = Number(cell.dataset.count);
        var cr = cell.getBoundingClientRect();
        var pr = content.getBoundingClientRect();
        tip.textContent   = n + ' contribution' + (n !== 1 ? 's' : '') + ' on ' + cell.dataset.date;
        tip.style.cssText = 'display:block;left:' + (cr.left - pr.left + cr.width / 2) + 'px;top:' + (cr.top - pr.top - 6) + 'px;transform:translate(-50%,-100%)';
      });
      grid.addEventListener('mouseleave', function () { tip.style.display = 'none'; });
    }

    var year = new Date().getFullYear();

    function redraw() {
      var res = drawChart(data, joinedAt, year, getTheme(), content);
      var curYear  = res.curYear;
      var joinYear = res.joinYear;
      var yearWrap = content.querySelector('#contrib-year-wrap');
      if (yearWrap && !yearWrap.querySelector('select')) {
        var years = Array.from({ length: curYear - joinYear + 1 }, function (_, i) { return curYear - i; });
        if (years.length > 1) {
          var sel = document.createElement('select');
          sel.className = 'select-field select-field--xs';
          sel.id        = 'contrib-year-select';
          sel.setAttribute('aria-label', 'Select year');
          years.forEach(function (y) { sel.add(new Option(y, y, y === year, y === year)); });
          yearWrap.appendChild(sel);
          sel.addEventListener('change', function (e) { year = Number(e.target.value); redraw(); });
        }
      } else {
        var existSel = content.querySelector('#contrib-year-select');
        if (existSel) existSel.value = String(year);
      }
    }

    redraw();
    var themeObserver = new MutationObserver(redraw);
    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
  }

  /* ── project card ────────────────────────────────────── */
  function buildCard(repo) {
    var isNpm      = repo.name === NPM_PACKAGE;
    var isFeatured = FEATURED_REPOS.includes(repo.name);
    var extraUrl   = isNpm ? NPM_DEMO_URL : repo.homepage;
    var ogUrl      = 'https://opengraph.githubassets.com/1/' + GITHUB_USERNAME + '/' + esc(repo.name);
    return '<article class="project-card anim' + (isFeatured ? ' is-featured' : '') + '" aria-label="' + esc(repo.name) + '">'
      + '<div class="card-flip">'
        + '<div class="card-flip__front">'
          + '<div class="project-card__header">'
            + '<div class="project-card__name-wrap">'
              + '<i class="fa-solid fa-folder-open project-card__name-icon"></i>'
              + '<span class="project-card__name">' + esc(repo.name) + '</span>'
              + (isFeatured ? '<span class="tag project-card__featured"><i class="fa-solid fa-star"></i> featured</span>' : '')
            + '</div>'
            + (repo.language ? '<span class="tag card-lang">' + esc(repo.language) + '</span>' : '')
          + '</div>'
          + '<p class="project-card__desc' + (!repo.description ? ' project-card__desc--empty' : '') + '">' + esc(repo.description || 'No description') + '</p>'
          + (repo.topics?.length ? '<div class="project-card__topics">' + repo.topics.map(function (t) { return '<span class="tag">' + esc(t) + '</span>'; }).join('') + '</div>' : '')
          + '<div class="project-card__stats">'
            + '<span class="project-card__stat"><i class="fa-solid fa-star"></i>' + fmt(repo.stars) + '</span>'
            + '<span class="project-card__stat"><i class="fa-solid fa-code-branch"></i>' + fmt(repo.forks) + '</span>'
            + '<span class="project-card__stat"><i class="fa-solid fa-clock"></i>' + formatRelativeDate(repo.updatedAt) + '</span>'
          + '</div>'
          + '<div class="project-card__links">'
            + '<a class="outline-btn project-card__link" href="' + esc(repo.url) + '" target="_blank" rel="noreferrer" aria-label="' + esc(repo.name) + ' on GitHub"><i class="fa-brands fa-github"></i>GitHub</a>'
            + (extraUrl ? '<a class="outline-btn project-card__link" href="' + esc(extraUrl) + '" target="_blank" rel="noreferrer" aria-label="' + esc(repo.name) + ' live demo"><i class="fa-solid ' + (isNpm ? 'fa-bolt' : 'fa-globe') + '"></i>Live Demo</a>' : '')
          + '</div>'
        + '</div>'
        + '<div class="card-flip__back">'
          + '<img class="card-flip__img" src="' + ogUrl + '" alt="' + esc(repo.name) + ' preview" loading="lazy" />'
          + '<div class="card-flip__overlay">'
            + '<span class="card-flip__name">' + esc(repo.name) + '</span>'
            + '<div class="card-flip__actions">'
              + '<a class="outline-btn card-flip__btn" href="' + esc(repo.url) + '" target="_blank" rel="noreferrer" aria-label="' + esc(repo.name) + ' on GitHub"><i class="fa-brands fa-github"></i>GitHub</a>'
              + (extraUrl ? '<a class="outline-btn card-flip__btn" href="' + esc(extraUrl) + '" target="_blank" rel="noreferrer" aria-label="' + esc(repo.name) + ' live demo"><i class="fa-solid ' + (isNpm ? 'fa-bolt' : 'fa-globe') + '"></i>Live Demo</a>' : '')
            + '</div>'
          + '</div>'
        + '</div>'
      + '</div>'
      + '</article>';
  }

  /* ── projects index ──────────────────────────────────── */
  var SORT_OPTIONS = [
    { value: 'updated', label: 'Recently updated' },
    { value: 'stars',   label: 'Most stars'       },
    { value: 'forks',   label: 'Most forks'       },
    { value: 'name',    label: 'Name A–Z'         },
  ];

  var _repos   = [];
  var _query   = '';
  var _lang    = '';
  var _sort    = 'updated';
  var _loading = true;
  var _grid, _searchInput, _langSelect, _sortSelect, _clearBtn, _countEl;

  function getFiltered() {
    var list = _repos;
    if (_query.trim()) {
      var q = _query.toLowerCase();
      list = list.filter(function (r) {
        return r.name.toLowerCase().includes(q)
          || (r.description || '').toLowerCase().includes(q)
          || (r.topics || []).some(function (t) { return t.toLowerCase().includes(q); });
      });
    }
    if (_lang) list = list.filter(function (r) { return r.language === _lang; });
    var sorted = [...list].sort(function (a, b) {
      if (_sort === 'stars') return b.stars - a.stars;
      if (_sort === 'forks') return b.forks - a.forks;
      if (_sort === 'name')  return a.name.localeCompare(b.name);
      return new Date(b.updatedAt) - new Date(a.updatedAt);
    });
    return [
      ...sorted.filter(function (r) {  return FEATURED_REPOS.includes(r.name); }),
      ...sorted.filter(function (r) { return !FEATURED_REPOS.includes(r.name); }),
    ];
  }

  function hasFilters() { return Boolean(_query || _lang || _sort !== 'updated'); }

  function clearFilters() {
    _query = ''; _lang = ''; _sort = 'updated';
    if (_searchInput) _searchInput.value = '';
    if (_langSelect)  _langSelect.value  = '';
    if (_sortSelect)  _sortSelect.value  = 'updated';
    renderProjects();
  }

  var SKELETON_HTML = '<div class="project-card project-sk" aria-hidden="true">'
    + '<div class="sk project-sk__title"></div>'
    + '<div class="sk project-sk__line"></div>'
    + '<div class="sk project-sk__line project-sk__line--short"></div>'
    + '<div class="project-sk__tags"><div class="sk project-sk__tag"></div><div class="sk project-sk__tag"></div><div class="sk project-sk__tag"></div></div>'
    + '</div>';

  function renderProjects() {
    if (!_grid) return;
    if (_clearBtn) _clearBtn.hidden = _loading || !hasFilters();
    if (_loading) {
      _grid.setAttribute('role', 'status');
      _grid.setAttribute('aria-label', 'Loading repositories');
      var count = Number(sessionStorage.getItem('gh_repo_count') || localStorage.getItem('gh_repo_count') || 6);
      _grid.innerHTML = SKELETON_HTML.repeat(count);
      if (_countEl) _countEl.hidden = true;
      return;
    }
    _grid.removeAttribute('role');
    _grid.removeAttribute('aria-label');
    var filtered = getFiltered();
    if (!filtered.length) {
      var noRepos = !_repos.length;
      _grid.innerHTML = '<div class="projects-empty">'
        + '<i class="fa-solid fa-folder-open projects-empty__icon"></i>'
        + '<div class="projects-empty__msg">' + (noRepos ? 'No repositories found' : 'No results match your filters') + '</div>'
        + (!noRepos && hasFilters() ? '<button type="button" class="projects-empty__clear">Clear filters</button>' : '')
        + '</div>';
      _grid.querySelector('.projects-empty__clear')?.addEventListener('click', clearFilters);
      if (_countEl) _countEl.hidden = true;
      return;
    }
    if (_countEl) {
      _countEl.hidden      = false;
      _countEl.textContent = filtered.length + ' ' + (filtered.length === 1 ? 'repo' : 'repos') + (hasFilters() ? ' matched' : '');
    }
    _grid.innerHTML = filtered.map(buildCard).join('');
    initAnimations();
  }

  function populateLangSelect() {
    if (!_langSelect) return;
    var langs   = [...new Set(_repos.map(function (r) { return r.language; }).filter(Boolean))].sort();
    var current = _langSelect.value;
    while (_langSelect.options.length > 1) _langSelect.remove(1);
    langs.forEach(function (l) { _langSelect.add(new Option(l, l, false, l === current)); });
  }

  function initProjects() {
    _grid        = document.getElementById('projects-grid');
    _searchInput = document.getElementById('projects-search');
    _langSelect  = document.getElementById('projects-lang');
    _sortSelect  = document.getElementById('projects-sort');
    _clearBtn    = document.getElementById('projects-clear');
    _countEl     = document.getElementById('projects-count');
    if (!_grid) return;
    if (_sortSelect) {
      _sortSelect.replaceChildren();
      SORT_OPTIONS.forEach(function (o) { _sortSelect.add(new Option(o.label, o.value)); });
      _sortSelect.value = _sort;
    }
    if (_searchInput) _searchInput.value = '';
    if (_langSelect)  _langSelect.value  = '';
    _searchInput?.addEventListener('input',  function (e) { _query = e.target.value; renderProjects(); });
    _langSelect?.addEventListener('change',  function (e) { _lang  = e.target.value; renderProjects(); });
    _sortSelect?.addEventListener('change',  function (e) { _sort  = e.target.value; renderProjects(); });
    _clearBtn?.addEventListener('click', clearFilters);
    renderProjects();
  }

  function setRepos(repos) {
    _repos   = repos;
    _loading = false;
    populateLangSelect();
    renderProjects();
  }

  /* ── npm card data ───────────────────────────────────── */
  var DEMO = {
    v2: {
      success: { comment: 'GET /posts — success', method: 'GET', url: '/api/posts?_limit=3', ms: 47,  code: 200, fill: 100, err: null, data: 'Array(3)',
        rows: ['{"id":1,"title":"sunt aut facere repellat","userId":1}','{"id":2,"title":"qui est esse","userId":1}','{"id":3,"title":"ea molestias quasi exercitationem","userId":1}'] },
      failed:  { comment: 'GET /posts — 500 error',      method: 'GET',  url: '/api/posts', ms: 213, code: 500, fill: 75,  err: 'AxiosError: Request failed with status code 500', data: 'null', rows: [] },
      abort:   { comment: 'GET /posts — user cancelled', method: 'GET',  url: '/api/posts', ms: null,code: null,fill: 38,  err: 'CanceledError: canceled',                         data: 'null', rows: [] },
      post:    { comment: 'POST /posts — created',       method: 'POST', url: '/api/posts', ms: 92,  code: 201, fill: 100, err: null, data: '{ id: 101 }',
        rows: ['{"id":101,"title":"new post","userId":1}'] },
    },
    v1: {
      success: { comment: 'GET /posts — success', method: 'GET', url: '/api/posts', ms: 47,  code: null, fill: 100, err: null, data: 'Array(3)',
        rows: ['{"id":1,"title":"sunt aut facere repellat","userId":1}','{"id":2,"title":"qui est esse","userId":1}','{"id":3,"title":"ea molestias quasi exercitationem","userId":1}'] },
      failed:  { comment: 'GET /posts — failed',    method: 'GET', url: '/api/posts', ms: 213, code: null, fill: 75,  err: 'AxiosError: Request failed with status code 500', data: 'null', rows: [] },
      abort:   { comment: 'GET /posts — cancelled', method: 'GET', url: '/api/posts', ms: null,code: null, fill: 38,  err: 'CanceledError: canceled',                         data: 'null', rows: [] },
    },
  };

  var DOCS = {
    v2: {
      config: [
        ['url',       'string',        'required', true,  'Request endpoint URL'],
        ['method',    'string',        "'get'",    false, 'HTTP verb: get | post | put | patch | delete'],
        ['body',      'any',           'null',     false, 'Request payload — sent for POST, PUT, PATCH'],
        ['params',    'object',        'null',     false, 'URL query parameters, serialised by Axios'],
        ['headers',   'object',        'null',     false, 'Per-request HTTP headers map'],
        ['timeout',   'number',        '0',        false, 'Request timeout in ms (0 = no timeout)'],
        ['auto',      'boolean',       'true',     false, 'Auto-fetch on mount; false = manual refetch()'],
        ['instance',  'AxiosInstance', 'axios',    false, 'Custom Axios instance (baseURL, interceptors…)'],
        ['onSuccess', 'function',      'null',     false, 'Success callback: (data, response) => void'],
        ['onError',   'function',      'null',     false, 'Error callback: (error) => void'],
      ],
      returns: [
        ['data',    'any',      true,  'Resolved response payload (null before first response)'],
        ['loading', 'boolean',  true,  'true while a request is in-flight'],
        ['error',   'any',      true,  'AxiosError if request failed, otherwise null'],
        ['status',  'number',   false, 'HTTP status code of the last response'],
        ['refetch', 'function', true,  'Re-triggers the request with the current config'],
        ['cancel',  'function', false, 'Cancels the in-flight request via AbortController'],
      ],
    },
    v1: {
      config: [
        ['url',      'string',        'required', true,  'Endpoint URL — first positional argument'],
        ['method',   'string',        "'get'",    false, 'HTTP method: get | post | put | patch | delete'],
        ['body',     'any',           'null',     false, 'Request payload for POST/PUT/PATCH'],
        ['auto',     'boolean',       'true',     false, 'Auto-fetch on mount; false = manual refetch()'],
        ['instance', 'AxiosInstance', 'axios',    false, 'Custom Axios instance'],
      ],
      returns: [
        ['data',    'any',      true, 'Resolved response payload'],
        ['loading', 'boolean',  true, 'true while in-flight'],
        ['error',   'any',      true, 'AxiosError or null'],
        ['refetch', 'function', true, 'Re-triggers the request'],
      ],
    },
  };

  var SNIPPETS = {
    v2: "import useAxios from 'axios-react-hook'\n\nfunction App() {\nconst { data, loading, error, status } = useAxios({\n  url: 'https://jsonplaceholder.typicode.com/posts',\n  params: { _limit: 5 },\n  onSuccess: (d) => console.log('loaded', d.length),\n  onError:   (e) => console.error(e.message),\n})\n\nif (loading) return <Spinner />\nif (error)   return <p>{status} — {error.message}</p>\n\nreturn (\n  <ul>\n    {data?.map(p => <li key={p.id}>{p.title}</li>)}\n  </ul>\n)\n}",
    v1: "import useAxios from 'axios-react-hook@1'\n\nfunction App() {\nconst { data, loading, error, refetch } = useAxios(\n  'https://jsonplaceholder.typicode.com/posts'\n)\n\nif (loading) return <Spinner />\nif (error)   return <Error msg={error} />\n\nreturn (\n  <ul>\n    {data?.map(p => <li key={p.id}>{p.title}</li>)}\n  </ul>\n)\n}",
  };

  var DEMO_CODE = {
    v2: {
      success: [
        [`<span class="ncmt">// GET — auto-fetch on mount</span>`],
        [`<span class="nkw">const</span> <span class="nbr">{</span> <span class="npk">data</span><span class="nop">,</span> <span class="npk">loading</span><span class="nop">,</span> <span class="npk">error</span><span class="nop">,</span> <span class="npk">status</span><span class="nop">,</span> <span class="npk">refetch</span> <span class="nbr">}</span> <span class="nop">=</span> <span class="nfn">useAxios</span><span class="nbr">({</span>`],
        [`  <span class="npk">url</span><span class="nop">:</span> <span class="nst">'https://jsonplaceholder.typicode.com/posts'</span><span class="nop">,</span>`],
        [`  <span class="npk">params</span><span class="nop">:</span> <span class="nbr">{</span> <span class="npk">_limit</span><span class="nop">:</span> <span class="nnum">3</span> <span class="nbr">},</span>`],
        [`  <span class="npk">onSuccess</span><span class="nop">:</span> <span class="nbr">(</span><span class="nfn">d</span><span class="nbr">)</span> <span class="nop">=&gt;</span> <span class="nfn">console</span><span class="nop">.</span><span class="nfn">log</span><span class="nbr">(</span><span class="nst">'loaded'</span><span class="nop">,</span> <span class="nfn">d</span><span class="nop">.</span><span class="npk">length</span><span class="nbr">),</span>`],
        [`<span class="nbr">})</span>`],
      ],
      failed: [
        [`<span class="ncmt">// GET — server returned 500</span>`],
        [`<span class="nkw">const</span> <span class="nbr">{</span> <span class="npk">error</span><span class="nop">,</span> <span class="npk">status</span><span class="nop">,</span> <span class="npk">loading</span><span class="nop">,</span> <span class="npk">refetch</span> <span class="nbr">}</span> <span class="nop">=</span> <span class="nfn">useAxios</span><span class="nbr">({</span>`],
        [`  <span class="npk">url</span><span class="nop">:</span> <span class="nst">'/api/posts'</span><span class="nop">,</span>`],
        [`  <span class="npk">onError</span><span class="nop">:</span> <span class="nbr">(</span><span class="nfn">e</span><span class="nbr">)</span> <span class="nop">=&gt;</span> <span class="nfn">console</span><span class="nop">.</span><span class="nfn">error</span><span class="nbr">(</span><span class="nfn">e</span><span class="nop">.</span><span class="npk">message</span><span class="nbr">),</span>`],
        [`<span class="nbr">})</span>`],
      ],
      abort: [
        [`<span class="ncmt">// GET — cancel in-flight request</span>`],
        [`<span class="nkw">const</span> <span class="nbr">{</span> <span class="npk">loading</span><span class="nop">,</span> <span class="npk">cancel</span> <span class="nbr">}</span> <span class="nop">=</span> <span class="nfn">useAxios</span><span class="nbr">({</span>`],
        [`  <span class="npk">url</span><span class="nop">:</span> <span class="nst">'/api/posts'</span><span class="nop">,</span>`],
        [`  <span class="npk">auto</span><span class="nop">:</span> <span class="nbool">true</span><span class="nop">,</span>`],
        [`<span class="nbr">})</span>`],
      ],
      post: [
        [`<span class="ncmt">// POST — create a new resource</span>`],
        [`<span class="nkw">const</span> <span class="nbr">{</span> <span class="npk">data</span><span class="nop">,</span> <span class="npk">status</span><span class="nop">,</span> <span class="npk">loading</span><span class="nop">,</span> <span class="npk">refetch</span> <span class="nbr">}</span> <span class="nop">=</span> <span class="nfn">useAxios</span><span class="nbr">({</span>`],
        [`  <span class="npk">url</span><span class="nop">:</span> <span class="nst">'/api/posts'</span><span class="nop">,</span>`],
        [`  <span class="npk">method</span><span class="nop">:</span> <span class="nst">'post'</span><span class="nop">,</span>`],
        [`  <span class="npk">body</span><span class="nop">:</span> <span class="nbr">{</span> <span class="npk">title</span><span class="nop">:</span> <span class="nst">'new post'</span><span class="nop">,</span> <span class="npk">userId</span><span class="nop">:</span> <span class="nnum">1</span> <span class="nbr">},</span>`],
        [`<span class="nbr">})</span>`],
      ],
    },
    v1: {
      success: [
        [`<span class="ncmt">// positional URL — auto-fetch</span>`],
        [`<span class="nkw">const</span> <span class="nbr">{</span> <span class="npk">data</span><span class="nop">,</span> <span class="npk">loading</span><span class="nop">,</span> <span class="npk">error</span><span class="nop">,</span> <span class="npk">refetch</span> <span class="nbr">}</span> <span class="nop">=</span> <span class="nfn">useAxios</span><span class="nbr">(</span>`],
        [`  <span class="nst">'https://jsonplaceholder.typicode.com/posts'</span>`],
        [`<span class="nbr">)</span>`],
      ],
      failed: [
        [`<span class="ncmt">// request failed</span>`],
        [`<span class="nkw">const</span> <span class="nbr">{</span> <span class="npk">error</span><span class="nop">,</span> <span class="npk">loading</span><span class="nop">,</span> <span class="npk">refetch</span> <span class="nbr">}</span> <span class="nop">=</span> <span class="nfn">useAxios</span><span class="nbr">(</span><span class="nst">'/api/posts'</span><span class="nbr">)</span>`],
      ],
      abort: [
        [`<span class="ncmt">// request cancelled mid-flight</span>`],
        [`<span class="nkw">const</span> <span class="nbr">{</span> <span class="npk">loading</span><span class="nop">,</span> <span class="npk">cancel</span> <span class="nbr">}</span> <span class="nop">=</span> <span class="nfn">useAxios</span><span class="nbr">(</span>`],
        [`  <span class="nst">'/api/posts'</span>`],
        [`<span class="nbr">)</span>`],
      ],
    },
  };

  /* ── npm sparkline ───────────────────────────────────── */
  function buildSparkline(downloads30d) {
    var days = downloads30d ?? [];
    if (!days.length || !days.some(function (d) { return d.downloads > 0; })) return null;
    var counts = days.map(function (d) { return d.downloads; });
    var max    = Math.max(...counts, 1);
    var n      = counts.length;
    var W = 300, H = 28, gap = 1;
    var barW = (W - gap * (n - 1)) / n;
    var bars  = counts.map(function (v, i) {
      var barH  = Math.max(1, ((v / max) * (H - 2)));
      var x     = (i * (barW + gap)).toFixed(2);
      var y     = (H - barH).toFixed(2);
      var date  = days[i]?.day ?? '';
      var label = date + ': ' + fmt(v);
      return '<g class="nc-spark__bar" data-tip="' + label + '">'
        + '<rect x="' + x + '" y="0" width="' + barW.toFixed(2) + '" height="' + H + '" fill="transparent"/>'
        + '<rect class="nc-spark__fill" x="' + x + '" y="' + y + '" width="' + barW.toFixed(2) + '" height="' + barH.toFixed(2) + '"/>'
        + '</g>';
    }).join('');
    var wrap = document.createElement('div');
    wrap.className = 'nc-spark__wrap';
    wrap.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none" aria-hidden="true">' + bars + '</svg>'
      + '<div class="nc-spark__tip" id="nc-spark-tip"></div>';
    return wrap;
  }

  /* ── npm demo ────────────────────────────────────────── */
  var STATUS_TEXT = {
    200:'OK', 201:'Created', 204:'No Content',
    301:'Moved', 302:'Found', 304:'Not Modified',
    400:'Bad Request', 401:'Unauthorized', 403:'Forbidden',
    404:'Not Found', 409:'Conflict', 422:'Unprocessable',
    429:'Rate Limited', 500:'Server Error', 502:'Bad Gateway', 503:'Unavailable',
  };

  var SQ = { muted: 'var(--border)', load: 'var(--syn-br)', ok: 'var(--color-success)', err: 'var(--color-error)', data: 'var(--fg)' };
  function sq(el, color) { if (el) el.style.background = color; }

  var STATUS_CODES = Object.keys(STATUS_TEXT).map(Number);
  var _statusInterval = null;

  function startStatusAnim(el, sqEl) {
    stopStatusAnim();
    if (!el) return;
    var i = 0;
    el.className   = 'nc-ins__val nc-ins__val--loading';
    el.textContent = '--';
    sq(sqEl, SQ.load);
    _statusInterval = setInterval(function () {
      var code = STATUS_CODES[i % STATUS_CODES.length];
      el.textContent = code + ' ' + STATUS_TEXT[code];
      i++;
    }, 80);
  }

  function stopStatusAnim(el, sqEl, code, lbl, ok) {
    if (_statusInterval) { clearInterval(_statusInterval); _statusInterval = null; }
    if (!el) return;
    if (code != null) {
      el.className   = 'nc-ins__val ' + (ok ? 'nc-ins__val--status-ok' : 'nc-ins__val--status-err');
      el.textContent = lbl ? (code + ' ' + lbl) : String(code);
      sq(sqEl, ok ? SQ.ok : SQ.err);
    }
  }

  var _demoTimers     = [];
  var _activeVer      = 'v2';
  var _activeScenario = 'success';

  function getActiveScenario()  { return _activeScenario; }
  function setActiveVer(v)      { _activeVer = v; }

  function clearDemoTimers() { _demoTimers.forEach(clearTimeout); _demoTimers = []; stopStatusAnim(); }
  function deferDemo(fn, ms)  { var id = setTimeout(fn, ms); _demoTimers.push(id); }

  function setDemoCode(ver, scenario) {
    var codeEl = document.getElementById('nc-code');
    if (!codeEl) return;
    var v     = ver || _activeVer;
    var lines = (DEMO_CODE[v] || DEMO_CODE.v2)[scenario] || (DEMO_CODE[v] || DEMO_CODE.v2).success;
    codeEl.innerHTML = lines.map(function (line, i) {
      return '<div class="nc-code__line"><span class="nc-code__lnum">' + (i + 1) + '</span><span class="nc-code__text">' + line[0] + '</span></div>';
    }).join('');
  }

  function runNpmDemo(isRefetch) {
    if (!isRefetch) clearDemoTimers();
    var sc         = (DEMO[_activeVer] || DEMO.v2)[_activeScenario] || DEMO[_activeVer].success;
    var progFill   = document.getElementById('nc-progress-fill');
    var loadEl     = document.getElementById('nc-ins-loading');
    var dataEl     = document.getElementById('nc-ins-data');
    var dataTypeEl = document.getElementById('nc-ins-data-type');
    var errEl      = document.getElementById('nc-ins-error');
    var errTypeEl  = document.getElementById('nc-ins-error-type');
    var statusEl   = document.getElementById('nc-ins-status');
    var statusRow  = document.getElementById('nc-ins-status-row');
    var chipEl     = document.getElementById('nc-ins-chip');
    var commentEl  = document.getElementById('nc-ins-comment');
    var loadSqEl   = document.getElementById('nc-ins-loading-sq');
    var dataSqEl   = document.getElementById('nc-ins-data-sq');
    var errSqEl    = document.getElementById('nc-ins-error-sq');
    var statusSqEl = document.getElementById('nc-ins-status-sq');
    var dataBody   = document.getElementById('nc-ins-data-body');
    var dataTri    = document.getElementById('nc-ins-data-tri');
    var dataToggle = document.getElementById('nc-ins-data-toggle');
    var pulseEl    = document.getElementById('nc-ins-pulse');
    if (commentEl) commentEl.textContent = sc.comment ? '// ' + sc.comment : '';
    if (!loadEl) return;

    var isAbort  = _activeScenario === 'abort';
    var isFailed = _activeScenario === 'failed';
    var fillMs   = isRefetch
      ? (isAbort ? 240 : isFailed ? 380 : 460)
      : (isAbort ? 320 : isFailed ? 520 : 740);

    if (loadEl)  { loadEl.textContent = 'true'; loadEl.className = 'nc-ins__val nc-ins__val--loading'; }
    sq(loadSqEl, SQ.load);
    if (_activeVer !== 'v1') startStatusAnim(statusEl, statusSqEl);
    sq(errSqEl, SQ.muted);
    if (!isRefetch) {
      if (dataEl)    { dataEl.textContent = 'null'; dataEl.className = 'nc-ins__val nc-ins__val--null'; }
      if (dataTypeEl)  dataTypeEl.textContent = 'null';
      if (dataBody)  { dataBody.innerHTML = ''; dataBody.hidden = true; }
      if (dataTri)     dataTri.textContent = '▶';
      if (dataToggle)  dataToggle.setAttribute('aria-expanded', 'false');
      sq(dataSqEl, SQ.muted);
    }
    if (errEl)   { errEl.textContent = 'null'; errEl.className = 'nc-ins__val nc-ins__val--null'; }
    if (errTypeEl)  errTypeEl.textContent = 'null';
    if (chipEl)     chipEl.textContent   = isRefetch ? 'refetching…' : 'loading…';
    if (pulseEl)    pulseEl.className    = 'nc-ins__pulse is-loading';

    if (progFill) {
      progFill.style.transition = 'none';
      progFill.style.width      = '0%';
      progFill.style.opacity    = '1';
      progFill.className        = 'nc-progress__fill' + (isFailed ? ' is-err' : isAbort ? ' is-abort' : '');
      requestAnimationFrame(function () { requestAnimationFrame(function () {
        progFill.style.transition = 'width ' + fillMs + 'ms cubic-bezier(0.1,0.4,0.6,1)';
        progFill.style.width      = sc.fill + '%';
      }); });
    }

    deferDemo(function () {
      var hasErr  = !!sc.err;
      var hasData = sc.rows?.length > 0;
      var isObj   = sc.data?.startsWith('{');
      var displayMs = sc.ms ? (isRefetch ? sc.ms + Math.floor(Math.random() * 18) - 6 : sc.ms) : null;

      if (loadEl)  { loadEl.textContent = 'false'; loadEl.className = 'nc-ins__val nc-ins__val--bool'; }
      sq(loadSqEl, SQ.muted);
      if (dataEl) {
        var hasVal = sc.data !== 'null';
        dataEl.textContent = sc.data;
        dataEl.className   = 'nc-ins__val ' + (hasVal ? 'nc-ins__val--arr' : 'nc-ins__val--null');
        sq(dataSqEl, hasVal ? SQ.data : SQ.muted);
      }
      if (dataTypeEl) dataTypeEl.textContent = hasData ? 'Array' : isObj ? 'object' : 'null';
      if (errEl) {
        if (hasErr) {
          errEl.textContent = (sc.err ?? '').split(':')[0].trim();
          errEl.className   = 'nc-ins__val nc-ins__val--err';
          sq(errSqEl, SQ.err);
        } else {
          errEl.textContent = 'null';
          errEl.className   = 'nc-ins__val nc-ins__val--null';
          sq(errSqEl, SQ.muted);
        }
      }
      if (errTypeEl) errTypeEl.textContent = hasErr ? 'AxiosError' : 'null';
      var showStatus = _activeVer !== 'v1' && sc.code != null;
      if (statusRow)  statusRow.classList.toggle('nc-ins__row--invisible', !showStatus);
      if (showStatus) {
        var ok = sc.code >= 200 && sc.code < 300;
        stopStatusAnim(statusEl, statusSqEl, sc.code, STATUS_TEXT[sc.code] ?? '', ok);
      } else {
        stopStatusAnim();
        if (statusEl) { statusEl.className = 'nc-ins__val nc-ins__val--null'; statusEl.textContent = '--'; }
        sq(statusSqEl, SQ.muted);
      }
      if (chipEl)  chipEl.textContent = displayMs ? (displayMs + 'ms  ' + sc.method) : (isAbort ? 'aborted' : 'error');
      if (pulseEl) pulseEl.className  = 'nc-ins__pulse' + (hasErr || isAbort ? ' is-err' : '');

      if (dataBody && !isRefetch) {
        if (hasData) {
          var treeData = sc.rows.map(function (r) {
            try { return JSON.parse(r.replace(/(['"])?([a-zA-Z0-9_]+)(['"])?:/g, '"$2":')); } catch { return { raw: r }; }
          });
          dataBody.innerHTML = treeData.map(function (obj, i) {
            var fields = Object.entries(obj).map(function ([k, v]) {
              var cls = typeof v === 'string' ? 'nc-ins__tree-fv--str' : typeof v === 'number' ? 'nc-ins__tree-fv--num' : '';
              var val = typeof v === 'string' ? ('"' + v + '"') : String(v);
              return '<div class="nc-ins__tree-field"><span class="nc-ins__tree-fk">' + esc(k) + '</span><span style="color:var(--fg-disabled)">:</span><span class="nc-ins__tree-fv ' + cls + '">' + esc(val) + '</span></div>';
            }).join('');
            return '<div class="nc-ins__tree-row"><span class="nc-ins__tree-idx">' + i + '</span><div class="nc-ins__tree-obj">' + fields + '</div></div>';
          }).join('');
        } else if (isObj && sc.data !== 'null') {
          dataBody.innerHTML = '<div class="nc-ins__tree-row"><span class="nc-ins__tree-idx">&#8213;</span><div class="nc-ins__tree-obj"><div class="nc-ins__tree-summary">' + esc(sc.data) + '</div></div></div>';
        }
      }

      if (progFill) {
        if (!isFailed && !isAbort) {
          progFill.style.transition = 'width 150ms ease';
          progFill.style.width      = '100%';
        }
        deferDemo(function () {
          progFill.style.transition = 'opacity 400ms ease';
          progFill.style.opacity    = '0';
        }, 200);
      }

      if (!isRefetch) {
        deferDemo(function () { runNpmDemo(true); }, 1800);
      } else {
        deferDemo(runNpmDemo, 2000);
      }
    }, fillMs + 120);
  }

  function initDemoScenarios(card) {
    card.querySelectorAll('.nc-chrome__icon[data-scenario]').forEach(function (btn) {
      btn.addEventListener('click', function () {
        card.querySelectorAll('.nc-chrome__icon[data-scenario]').forEach(function (b) { b.classList.remove('is-active'); });
        btn.classList.add('is-active');
        _activeScenario = btn.dataset.scenario;
        setDemoCode(_activeVer, _activeScenario);
        runNpmDemo();
      });
    });

    window.addEventListener('keydown', function (e) {
      if (e.key !== 'r' && e.key !== 'R') return;
      var tag = document.activeElement?.tagName;
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
      if (e.metaKey || e.ctrlKey || e.altKey) return;
      var demoPane = document.getElementById('npm-pane-demo');
      if (demoPane?.hidden) return;
      runNpmDemo(true);
    });

    var codeCopyBtn = document.getElementById('nc-code-copy');
    if (codeCopyBtn) {
      codeCopyBtn.addEventListener('click', function () {
        var text = document.getElementById('nc-code')?.textContent?.trim() ?? '';
        navigator.clipboard?.writeText(text).then(function () {
          var icon = codeCopyBtn.querySelector('i');
          if (icon) { icon.className = 'fa-solid fa-check'; setTimeout(function () { icon.className = 'fa-regular fa-copy'; }, 2000); }
        });
      });
    }

    var dataToggle = card.querySelector('#nc-ins-data-toggle');
    var dataBody   = card.querySelector('#nc-ins-data-body');
    var dataTri    = card.querySelector('#nc-ins-data-tri');
    if (dataToggle && dataBody && dataTri) {
      dataToggle.addEventListener('click', function () {
        if (!dataBody.innerHTML) return;
        var isOpen = dataBody.hidden;
        dataBody.hidden = !isOpen;
        dataTri.textContent = isOpen ? '▼' : '▶';
        dataToggle.setAttribute('aria-expanded', String(isOpen));
      });
    }
  }

  /* ── npm card ────────────────────────────────────────── */
  function initNpmTabsBar(card) {
    card.querySelectorAll('.nc-tab').forEach(function (btn) {
      btn.addEventListener('click', function () {
        card.querySelectorAll('.nc-tab').forEach(function (b) { b.classList.remove('is-active'); });
        btn.classList.add('is-active');
        var tab = btn.dataset.tab;
        ['demo', 'api', 'install'].forEach(function (t) {
          var pane = document.getElementById('npm-pane-' + t);
          if (pane) pane.hidden = (t !== tab);
        });
        if (tab === 'demo') { setDemoCode(undefined, getActiveScenario()); runNpmDemo(); }
        else clearDemoTimers();
      });
    });
  }

  function renderNpmCard(pkg) {
    var sk   = document.getElementById('npm-sk');
    var card = document.getElementById('npm-card');
    if (!card) return;

    document.getElementById('npm-name').textContent  = pkg.name;
    document.getElementById('npm-desc').textContent  = pkg.description || '';
    document.getElementById('npm-stars').textContent = fmt(pkg.stars);
    document.getElementById('npm-forks').textContent = fmt(pkg.forks);
    document.getElementById('npm-dls').textContent   = fmt(pkg.downloads);

    var langEl = document.getElementById('npm-lang');
    if (langEl && pkg.language) { langEl.textContent = pkg.language; langEl.hidden = false; }

    var gzipEl  = document.getElementById('npm-gzip');
    var gzipSt  = document.getElementById('npm-gzip-stat');
    var gzipLbl = fmtBytes(pkg.bundleGzip);
    if (gzipEl && gzipLbl) { gzipEl.textContent = gzipLbl + ' gz'; gzipSt.hidden = false; }

    var base  = NPM_PACKAGE;
    var v1sfx = '@1';
    function setCmd(id, text) { var el = document.getElementById(id); if (el) el.textContent = text; }
    setCmd('npm-install-cmd', 'npm install ' + base);
    setCmd('npm-yarn-cmd',    'yarn add ' + base);
    setCmd('npm-pnpm-cmd',    'pnpm add ' + base);
    makeCopyHandler(document.getElementById('npm-copy'),      function () { return 'npm install ' + base; });
    makeCopyHandler(document.getElementById('npm-yarn-copy'), function () { return 'yarn add ' + base; });
    makeCopyHandler(document.getElementById('npm-pnpm-copy'), function () { return 'pnpm add ' + base; });

    var topicsEl = document.getElementById('npm-topics');
    if (topicsEl && pkg.topics?.length) topicsEl.replaceChildren(...pkg.topics.map(makeTag));

    var sparklineEl      = document.querySelector('#nc-docs-sparkline .npm-sparkline');
    var sparklineSection = document.getElementById('nc-docs-sparkline');
    if (sparklineEl) {
      var wrap = buildSparkline(pkg.downloads30d);
      if (wrap) {
        sparklineEl.replaceChildren(wrap);
        if (sparklineSection) sparklineSection.hidden = false;
        var tip = wrap.querySelector('#nc-spark-tip');
        wrap.querySelector('svg').addEventListener('mousemove', function (e) {
          var bar = e.target.closest('.nc-spark__bar');
          if (!bar || !tip) return;
          tip.textContent = bar.dataset.tip;
          tip.hidden = false;
          var wrapRect = wrap.getBoundingClientRect();
          var cx = e.clientX - wrapRect.left;
          tip.style.left = Math.min(cx, wrapRect.width - tip.offsetWidth - 4) + 'px';
        });
        wrap.querySelector('svg').addEventListener('mouseleave', function () { if (tip) tip.hidden = true; });
      }
    }

    var ghLink  = document.getElementById('npm-gh-link');
    var npmLink = document.getElementById('npm-npm-link');
    var sbLink1 = document.getElementById('npm-demo-link');
    var sbLink2 = document.getElementById('npm-stackblitz-link');
    if (ghLink)  ghLink.href  = 'https://github.com/' + GITHUB_USERNAME + '/' + NPM_PACKAGE;
    if (npmLink) npmLink.href = 'https://www.npmjs.com/package/' + NPM_PACKAGE;
    if (sbLink1) sbLink1.href = NPM_DEMO_URL;
    if (sbLink2) sbLink2.href = NPM_DEMO_URL;

    function applyVersion(ver) {
      setActiveVer(ver);
      card.querySelectorAll('.nc-ver-tab').forEach(function (t) { t.classList.toggle('is-active', t.dataset.ver === ver); });

      var verEl = document.getElementById('npm-version');
      if (verEl) {
        verEl.textContent = ver === 'v2' ? 'v' + (pkg.version || '2') : (pkg.v1Version ? 'v' + pkg.v1Version : 'v1');
        verEl.hidden = false;
      }

      var statusRowEl = document.getElementById('nc-ins-status-row');
      if (statusRowEl) statusRowEl.classList.toggle('nc-ins__row--invisible', ver === 'v1');

      setCmd('npm-install-cmd', ver === 'v1' ? 'npm install ' + base + v1sfx : 'npm install ' + base);
      setCmd('npm-yarn-cmd',    ver === 'v1' ? 'yarn add ' + base + v1sfx    : 'yarn add ' + base);
      setCmd('npm-pnpm-cmd',    ver === 'v1' ? 'pnpm add ' + base + v1sfx    : 'pnpm add ' + base);

      var snippetEl = document.getElementById('nc-setup-snippet');
      if (snippetEl) snippetEl.textContent = SNIPPETS[ver];

      var docs    = DOCS[ver];
      var cfgBody = document.getElementById('nc-docs-config');
      if (cfgBody) cfgBody.innerHTML = docs.config.map(function ([p, t, d, , desc]) {
        var defCls = d === 'required' ? 'is-required' : (d.startsWith("'") || /^\d/.test(d)) ? 'is-default' : 'is-optional';
        return '<tr><td>' + esc(p) + '</td><td>' + esc(t) + '</td><td class="' + defCls + '">' + esc(d) + '</td><td>' + esc(desc) + '</td></tr>';
      }).join('');
      var retBody = document.getElementById('nc-docs-returns');
      if (retBody) retBody.innerHTML = docs.returns.map(function ([k, t, v1yes, desc]) {
        var v1cell = v1yes ? '<td class="is-v1yes">&#10003;</td>' : '<td class="is-v1no">&#8212;</td>';
        return '<tr><td>' + esc(k) + '</td><td>' + esc(t) + '</td>' + v1cell + '<td>' + esc(desc) + '</td></tr>';
      }).join('');

      setDemoCode(ver, getActiveScenario());
      runNpmDemo();
    }

    applyVersion('v2');
    card.querySelectorAll('.nc-ver-tab').forEach(function (tab) {
      tab.addEventListener('click', function () { applyVersion(tab.dataset.ver); });
    });

    initNpmTabsBar(card);
    initDemoScenarios(card);

    if (sk) sk.hidden = true;
    card.hidden = false;
  }

  /* ── entry point ─────────────────────────────────────── */
  var loaderStart = performance.now();

  function calcExpLabel() {
    var now    = new Date();
    var months = (now.getFullYear() - CAREER_START.getFullYear()) * 12
      + (now.getMonth() - CAREER_START.getMonth());
    var years  = Math.floor(months / 12);
    return years < 1 ? '< 1yr exp' : years + '+ yr' + (years !== 1 ? 's' : '') + ' exp';
  }

  document.addEventListener('DOMContentLoaded', function () {
    initTheme();

    var loader = document.getElementById('loader');
    if (loader) {
      var elapsed = performance.now() - loaderStart;
      var delay   = Math.max(0, MIN_LOADER_MS - elapsed);
      setTimeout(function () { loader.classList.add('is-hidden'); }, delay);
    }

    var expEl = document.getElementById('header-exp-label');
    if (expEl) expEl.textContent = calcExpLabel();

    var yearEl = document.getElementById('footer-year');
    if (yearEl) yearEl.textContent = new Date().getFullYear();

    var typingTarget = document.getElementById('typing-text');
    if (typingTarget) initTyping(typingTarget, ROLES);

    document.getElementById('contact-btn')?.addEventListener('click', function () {
      document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' });
    });

    initNavSidebar();
    initGhSidebar();
    initScrollSpy('about');
    initBackTop();
    initAnimations();
    initProjects();
    initContact();
    initPalette();

    var ctrl = new AbortController();
    Promise.allSettled([
      fetchMain(ctrl.signal),
      fetchContribs(ctrl.signal),
      fetchNpm(ctrl.signal),
    ]).then(function ([mainR, contribR, npmR]) {
      if (mainR.status === 'fulfilled') {
        var stats  = mainR.value.stats;
        var langs  = mainR.value.langs;
        var repos  = mainR.value.repos;
        var streak = contribR.status === 'fulfilled' ? contribR.value.streak : DEFAULT_STREAK;
        try { localStorage.setItem('gh_repo_count', repos.length); }   catch {}
        try { sessionStorage.setItem('gh_repo_count', repos.length); } catch {}
        renderStats(stats, streak);
        renderLangs(langs);
        setRepos(repos);
        if (contribR.status === 'fulfilled') {
          renderStreak(contribR.value.streak);
          renderContribChart(contribR.value.contribData, stats.joinedAt);
        } else {
          renderStreak(DEFAULT_STREAK);
          setError('gh-contrib', 'contributions');
        }
      } else {
        setError('gh-stats', 'overview', mainR.reason);
        setError('gh-langs', 'languages', mainR.reason);
        setRepos([]);
        if (contribR.status === 'fulfilled') {
          renderStreak(contribR.value.streak);
          renderContribChart(contribR.value.contribData, null);
        } else {
          renderStreak(DEFAULT_STREAK);
          setError('gh-contrib', 'contributions');
          setError('gh-streak', 'streak');
        }
      }
      renderNpmCard(npmR.status === 'fulfilled' ? npmR.value : DEFAULT_NPM_PKG);
    });
  });

})();