@docmd/template-summer 0.8.6

package/dist/assets/js/summer.js

@@ -0,0 +1,660 @@
+/* =========================================================================
+   @docmd/template-summer  —  summer.js
+   Runtime interactions for the Summer template. Vanilla JS, no deps.
+
+   What it does (the rest is handled by docmd-main.js, already loaded
+   by templates/layout.ejs — see packages/ui/assets/js/docmd-main.js for
+   SPA routing, theme toggle, sidebar drawer, version/project/language
+   switchers, code-block copy, page copy, banner, cookie consent and
+   search-trigger event delegation):
+
+   - Inline topbar search dropdown that re-homes docmd-search.js's
+     full-screen modal into the topbar, forwarding keyboard nav
+     (↑↓ Enter Esc) to the hidden plugin input
+   - TOC scroll-spy with a custom SVG path track (the GitBook-style
+     "folding line" that follows the active heading's indent level)
+   - TOC smooth-scroll (offset for the sticky topbar + subnav + pageheader)
+   - Scroll-to-top button (revealed on scroll)
+   - Git "last-updated" popover (relative dates + recent commits)
+   - Relative date rendering for any [data-timestamp] element
+
+   Everything is idempotent — per-page wires re-run after every
+   docmd:page-mounted event (fired by docmd-main.js on SPA nav).
+   ========================================================================= */
+(function () {
+  'use strict';
+
+  // -------- Utilities ----------------------------------------------------
+
+  function $(sel, root) { return (root || document).querySelector(sel); }
+  function $$(sel, root) { return Array.prototype.slice.call((root || document).querySelectorAll(sel)); }
+  function ready(fn) {
+    if (document.readyState !== 'loading') fn();
+    else document.addEventListener('DOMContentLoaded', fn);
+  }
+
+  function debounce(fn, wait) {
+    let timer;
+    return function () {
+      const args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () { fn.apply(null, args); }, wait);
+    };
+  }
+
+
+  // -------- TOC: SVG path track (Fumadocs-style) -----------------------
+
+  var _tocActiveIdx = -1;
+  var _tocScrollDir = 1; // 1 = down, -1 = up
+  var _tocLastScrollY = window.pageYOffset || 0;
+
+  function buildTocSvgTrack() {
+    var list = $('.summer-toc__list');
+    if (!list) return;
+    var items = $$('.summer-toc__item', list);
+    if (!items.length) return;
+
+    // === Tweakable layout ===
+    var BASE_X = 5;              // x position of level-1 items (px from track left)
+    var INDENT = 7;              // px indent per level step
+
+    // === Tweakable bend shape ===
+    // Cubic Bézier between consecutive items at different indent levels.
+    //   BEND_HORIZ_MULT — scales with the horizontal |Δx| (typical Δx = INDENT).
+    //                     Higher = more curve per indent step.
+    //   BEND_VERT_FRAC  — caps the bend as a fraction of the actual vertical
+    //                     gap between item centres. 1.0 = max smooth S-curve,
+    //                     < 1.0 = subtler. Must stay ≤ 1.0 to avoid overshoot.
+    var BEND_HORIZ_MULT = 2.0;
+    var BEND_VERT_FRAC  = 1.0;
+
+    // Measure each item's actual centre y from the DOM. The track is
+    // position:absolute at top:0 of the list, so list-relative coords match
+    // track-local coords and the path lines up with the items exactly.
+    var positions = items.map(function (li) {
+      var lvl = parseInt(li.dataset.level || li.className.match(/level-(\d)/)?.[1] || '1', 10);
+      return {
+        x: BASE_X + (lvl - 1) * INDENT,
+        cy: li.offsetTop + li.offsetHeight / 2
+      };
+    });
+    var xPositions = positions.map(function (p) { return p.x; });
+    var yCentres = positions.map(function (p) { return p.cy; });
+    // Track height = full list content (top of list to bottom of last item)
+    var totalH = items[items.length - 1].offsetTop + items[items.length - 1].offsetHeight;
+
+    // Build the SVG path d-string
+    var d = '';
+    for (var i = 0; i < positions.length; i++) {
+      var x = positions[i].x;
+      var y = yCentres[i];
+      if (i === 0) {
+        d += 'M ' + x + ' 0 L ' + x + ' ' + y;
+      } else {
+        var px = positions[i - 1].x;
+        var py = yCentres[i - 1];
+        if (px === x) {
+          // same level — straight line
+          d += ' L ' + x + ' ' + y;
+        } else {
+          // level change — cubic bezier bend, clamped so the curve never
+          // overshoots past the destination
+          var gap = y - py;
+          var bend = Math.min(gap * BEND_VERT_FRAC, Math.abs(x - px) * BEND_HORIZ_MULT);
+          d += ' C ' + px + ' ' + (py + bend) + ' ' + x + ' ' + (y - bend) + ' ' + x + ' ' + y;
+        }
+      }
+    }
+    // extend to bottom
+    var lastX = positions[positions.length - 1].x;
+    d += ' L ' + lastX + ' ' + totalH;
+
+    var svgW = BASE_X + (4 - 1) * INDENT + 4; // max possible width
+
+    // Create track container
+    var track = document.createElement('div');
+    track.className = 'summer-toc__track';
+    track.style.width = svgW + 'px';
+    track.style.height = totalH + 'px';
+
+    var NS = 'http://www.w3.org/2000/svg';
+
+    // Full (grey) path
+    var svgFull = document.createElementNS(NS, 'svg');
+    svgFull.setAttribute('class', 'summer-toc__track-full');
+    svgFull.setAttribute('width', svgW);
+    svgFull.setAttribute('height', totalH);
+    svgFull.setAttribute('viewBox', '0 0 ' + svgW + ' ' + totalH);
+    var pathFull = document.createElementNS(NS, 'path');
+    pathFull.setAttribute('d', d);
+    svgFull.appendChild(pathFull);
+    track.appendChild(svgFull);
+
+    // Active (accent) path — clipped
+    var svgActive = document.createElementNS(NS, 'svg');
+    svgActive.setAttribute('class', 'summer-toc__track-active');
+    svgActive.setAttribute('width', svgW);
+    svgActive.setAttribute('height', totalH);
+    svgActive.setAttribute('viewBox', '0 0 ' + svgW + ' ' + totalH);
+    svgActive.style.clipPath = 'polygon(0 0, ' + svgW + 'px 0, ' + svgW + 'px 0, 0 0)';
+    var pathActive = document.createElementNS(NS, 'path');
+    pathActive.setAttribute('d', d);
+    svgActive.appendChild(pathActive);
+    track.appendChild(svgActive);
+
+    list.insertBefore(track, list.firstChild);
+
+    return { track: track, svgActive: svgActive, xPositions: xPositions, yCentres: yCentres, d: d, totalH: totalH, svgW: svgW };
+  }
+
+  function wireTocScrollSpy() {
+    var tocLinks = $$('.summer-toc__link');
+    if (!tocLinks.length) return;
+
+    var headings = tocLinks
+      .map(function (link) {
+        var id = (link.getAttribute('href') || '').replace(/^#/, '');
+        if (!id) return null;
+        return { id: id, el: document.getElementById(id), link: link };
+      })
+      .filter(function (x) { return x && x.el; });
+
+    if (!headings.length) return;
+
+    var track = buildTocSvgTrack();
+
+    function setActive(idx) {
+      if (idx === _tocActiveIdx) return;
+      _tocActiveIdx = idx;
+
+      tocLinks.forEach(function (l) { l.classList.remove('active'); });
+      if (idx < 0 || idx >= tocLinks.length) return;
+
+      tocLinks[idx].classList.add('active');
+
+      if (!track) return;
+
+      var totalH = track.totalH;
+      var svgW = track.svgW;
+
+      // Fill from top down to the active item's centre Y.
+      // If the user has scrolled to the bottom of the page (footer visible),
+      // fill all the way to the bottom of the track so it doesn't appear cut off.
+      var docH = document.documentElement.scrollHeight;
+      var winH = window.innerHeight;
+      var atPageBottom = (window.pageYOffset + winH) >= (docH - 40);
+      var activeY = (atPageBottom || idx === tocLinks.length - 1)
+        ? totalH
+        : track.yCentres[idx];
+
+      track.svgActive.style.clipPath =
+        'polygon(0 0, ' + svgW + 'px 0, ' +
+                svgW + 'px ' + activeY + 'px, 0 ' + activeY + 'px)';
+    }
+
+    // Scroll-spy using IntersectionObserver — each heading fills the TOC
+    // as soon as it enters the viewport (visible = active).
+    var TOPBAR_H = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue('--summer-topbar-height') || '64', 10
+    );
+    var SUBNAV_H = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue('--summer-subnav-height') || '44', 10
+    );
+    var rootMarginTop = -(TOPBAR_H + SUBNAV_H + 8) + 'px';
+
+    // Build a map from heading id → index
+    var idxMap = {};
+    headings.forEach(function (h, i) { idxMap[h.id] = i; });
+
+    // Track which headings are currently intersecting
+    var visibleSet = {};
+
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          visibleSet[entry.target.id] = true;
+        } else {
+          delete visibleSet[entry.target.id];
+        }
+      });
+      // Activate the last visible heading (lowest on screen = most advanced)
+      var bestIdx = -1;
+      headings.forEach(function (h, i) {
+        if (visibleSet[h.id] && i >= bestIdx) bestIdx = i;
+      });
+      // Fallback: if nothing visible, find last heading above viewport
+      if (bestIdx === -1) {
+        for (var i = headings.length - 1; i >= 0; i--) {
+          var rect = headings[i].el.getBoundingClientRect();
+          if (rect.bottom < TOPBAR_H + SUBNAV_H + 8) { bestIdx = i; break; }
+        }
+      }
+      if (bestIdx === -1 && headings.length) bestIdx = 0;
+      setActive(bestIdx);
+    }, {
+      rootMargin: rootMarginTop + ' 0px -10% 0px',
+      threshold: 0
+    });
+
+    headings.forEach(function (h) { observer.observe(h.el); });
+    // Initial state
+    updateActiveOnce();
+
+    function updateActiveOnce() {
+      var bestIdx = -1;
+      for (var i = headings.length - 1; i >= 0; i--) {
+        var rect = headings[i].el.getBoundingClientRect();
+        if (rect.top <= TOPBAR_H + SUBNAV_H + 80) { bestIdx = i; break; }
+      }
+      if (bestIdx === -1 && headings.length) bestIdx = 0;
+      setActive(bestIdx);
+    }
+  }
+
+  function wireTocSmoothScroll() {
+    $$('.summer-toc__link').forEach(function (link) {
+      link.addEventListener('click', function (e) {
+        var href = link.getAttribute('href') || '';
+        if (!href.startsWith('#')) return;
+        var target = document.getElementById(href.slice(1));
+        if (!target) return;
+        e.preventDefault();
+        var top = target.getBoundingClientRect().top + window.pageYOffset - 130;
+        window.scrollTo({ top: top, behavior: 'smooth' });
+        history.pushState(null, '', href);
+      });
+    });
+  }
+
+  // -------- Scroll to top button -----------------------------------------
+
+  function wireScrollToTop() {
+    var btn = $('.summer-totop');
+    if (!btn) return;
+    var onScroll = debounce(function () {
+      var y = window.pageYOffset || document.documentElement.scrollTop;
+      btn.classList.toggle('is-visible', y > 480);
+    }, 50);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+    btn.addEventListener('click', function () {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+  }
+
+  // -------- Inline Header Search & Dropdown ----------------------------
+
+  function wireHeaderSearch() {
+    var headerInput = $('.summer-search-input');
+    if (!headerInput) return;
+
+    var dropdown = $('.summer-search-dropdown');
+    var resultsWrapper = $('.summer-search-results-wrapper');
+
+    var indexInitialized = false;
+    function initSearchIndex() {
+      if (indexInitialized) return;
+      indexInitialized = true;
+      // Use programmatic click WITHOUT triggering focus shifts that would
+      // scroll the page. We also restore our scroll position afterwards.
+      var scrollY = window.pageYOffset;
+      var trigger = $('.docmd-search-trigger, [data-docmd-search-trigger]');
+      if (trigger) {
+        trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
+      } else {
+        var dummy = document.createElement('div');
+        dummy.className = 'docmd-search-trigger';
+        dummy.style.position = 'fixed';
+        dummy.style.top = '0';
+        dummy.style.left = '0';
+        dummy.style.width = '1px';
+        dummy.style.height = '1px';
+        dummy.style.opacity = '0';
+        dummy.style.pointerEvents = 'none';
+        document.body.appendChild(dummy);
+        dummy.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
+        // Don't remove — the plugin's listener may capture bubbles asynchronously
+      }
+      // Restore scroll & refocus our header input (NOT the plugin's input)
+      requestAnimationFrame(function () {
+        window.scrollTo(0, scrollY);
+        headerInput.focus({ preventScroll: true });
+      });
+    }
+
+    function tryInitPluginSearch() {
+      var searchModal = $('#docmd-search-modal');
+      var pluginInput = $('#docmd-search-input');
+      var pluginResults = $('#docmd-search-results');
+
+      if (!searchModal || !pluginInput || !pluginResults) {
+        setTimeout(tryInitPluginSearch, 100);
+        return;
+      }
+
+      if (resultsWrapper && pluginResults.parentNode !== resultsWrapper) {
+        resultsWrapper.appendChild(pluginResults);
+      }
+
+      // Force the modal off-screen (CSS already does this, but also set inline
+      // as a belt-and-braces measure so it can never auto-scroll into view).
+      searchModal.style.setProperty('position', 'fixed', 'important');
+      searchModal.style.setProperty('top', '-9999px', 'important');
+      searchModal.style.setProperty('left', '-9999px', 'important');
+      searchModal.style.setProperty('display', 'none', 'important');
+      searchModal.style.setProperty('opacity', '0', 'important');
+      searchModal.style.setProperty('visibility', 'hidden', 'important');
+      searchModal.style.setProperty('pointer-events', 'none', 'important');
+
+      // Make the plugin input also off-screen so it cannot grab focus
+      pluginInput.tabIndex = -1;
+      pluginInput.setAttribute('aria-hidden', 'true');
+    }
+
+    tryInitPluginSearch();
+
+    headerInput.addEventListener('focus', function () {
+      initSearchIndex();
+      dropdown.style.display = 'block';
+    });
+
+    headerInput.addEventListener('input', function () {
+      initSearchIndex();
+      var pluginInput = $('#docmd-search-input');
+      if (pluginInput) {
+        pluginInput.value = headerInput.value;
+        pluginInput.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+      dropdown.style.display = 'block';
+    });
+
+    headerInput.addEventListener('keydown', function (e) {
+      var pluginInput = $('#docmd-search-input');
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+        if (pluginInput) {
+          var clone = new KeyboardEvent('keydown', {
+            key: e.key,
+            code: e.code,
+            keyCode: e.keyCode,
+            bubbles: true,
+            cancelable: true
+          });
+          pluginInput.dispatchEvent(clone);
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+          }
+        }
+      } else if (e.key === 'Escape') {
+        headerInput.value = '';
+        if (pluginInput) {
+          pluginInput.value = '';
+          pluginInput.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+        headerInput.blur();
+        dropdown.style.display = 'none';
+      }
+    });
+
+    document.addEventListener('click', function (e) {
+      if (!e.target.closest('.summer-search-container')) {
+        dropdown.style.display = 'none';
+      }
+    });
+
+    document.addEventListener('keydown', function (e) {
+      var isK = e.key === 'k' || e.key === 'K';
+      if (isK && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        headerInput.focus();
+      }
+      if (e.key === '/' && !/^(input|textarea|select)$/i.test(e.target.tagName) && !e.target.isContentEditable) {
+        e.preventDefault();
+        headerInput.focus();
+      }
+    });
+  }
+
+  // -------- Git last-updated popover toggle (keyboard) ---------------
+  // Hover is handled in CSS; this adds click + keyboard support so the
+  // popover is reachable without a mouse.
+
+  function wireGitPopover() {
+    $$('.summer-pagefooter__time.has-commits').forEach(function (el) {
+      el.addEventListener('click', function (e) {
+        e.preventDefault();
+        var open = el.classList.toggle('open');
+        el.setAttribute('aria-expanded', open ? 'true' : 'false');
+      });
+      el.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          el.click();
+        } else if (e.key === 'Escape') {
+          el.classList.remove('open');
+          el.setAttribute('aria-expanded', 'false');
+          el.blur();
+        }
+      });
+    });
+    document.addEventListener('click', function (e) {
+      if (!e.target.closest('.summer-pagefooter__time.has-commits')) {
+        $$('.summer-pagefooter__time.has-commits.open').forEach(function (el) {
+          el.classList.remove('open');
+          el.setAttribute('aria-expanded', 'false');
+        });
+      }
+    });
+  }
+
+  // -------- Relative date rendering (lightweight) --------------------
+  // Renders any [data-timestamp] as a human-readable relative date.
+  // We avoid pulling in a date library for this tiny feature.
+
+  function formatRelative(ts) {
+    var now = Date.now();
+    var diff = Math.max(0, now - ts);
+    var sec = Math.floor(diff / 1000);
+    if (sec < 45) return 'just now';
+    var min = Math.floor(sec / 60);
+    if (min < 60) return min + ' min ago';
+    var hr = Math.floor(min / 60);
+    if (hr < 24) return hr + ' hr ago';
+    var day = Math.floor(hr / 24);
+    if (day < 7) return day + ' day' + (day === 1 ? '' : 's') + ' ago';
+    if (day < 30) {
+      var wk = Math.floor(day / 7);
+      return wk + ' week' + (wk === 1 ? '' : 's') + ' ago';
+    }
+    if (day < 365) {
+      var mo = Math.floor(day / 30);
+      return mo + ' month' + (mo === 1 ? '' : 's') + ' ago';
+    }
+    var yr = Math.floor(day / 365);
+    return yr + ' year' + (yr === 1 ? '' : 's') + ' ago';
+  }
+
+  function renderRelativeTimestamps() {
+    $$('[data-timestamp]').forEach(function (el) {
+      var raw = el.getAttribute('data-timestamp');
+      if (!raw) return;
+      var ts = parseInt(raw, 10);
+      if (!isFinite(ts) || ts <= 0) return;
+      // Use a child span if one exists (git popover meta), else replace
+      var target = el.querySelector('.git-time, .summer-git-popover__date') || el;
+      if (target !== el && target.children.length > 0) return;
+      if (!target.__renderedAt || (Date.now() - target.__renderedAt) > 60000) {
+        target.textContent = formatRelative(ts);
+        target.__renderedAt = Date.now();
+      }
+    });
+  }
+
+  // -------- Codeblocks -------------------------------------------------
+  // docmd-main.js wraps every <pre> in <div class="code-wrapper"> and
+  // appends a <button class="copy-code-button">. The parser also wraps
+  // ```lang "title"``` in <div class="docmd-code-block-wrapper"> with a
+  // header that holds the title. We turn the bottom-floating copy button
+  // into a thin title bar at the top of the codeblock.
+  //
+  // Left side:
+  //   - icon (always)
+  //   - filename (only when the source had a title, e.g. ```js "file.js"```)
+  //   - lang pill (always — shows the language, or "codeblock" if none)
+  // Right side:
+  //   - copy button
+  function summerCodeblocks() {
+    // 1. Codeblocks WITH a parser-rendered title wrapper.
+    //    The header already exists with a <span class="docmd-code-block-title">.
+    //    We add a lang pill next to it (or replace the header content
+    //    with our own titlebar) and re-home the copy button.
+    $$('.docmd-code-block-wrapper').forEach(function (wrap) {
+      if (wrap.dataset.summerCbWired === '1') return;
+      wrap.dataset.summerCbWired = '1';
+
+      var header = wrap.querySelector('.docmd-code-block-header');
+      var inner  = wrap.querySelector('.code-wrapper');
+      var copyBtn = inner && inner.querySelector('.copy-code-button');
+      if (!header) return;
+
+      // Read language from the <code class="language-xxx">
+      var lang = '';
+      var pre = inner ? inner.querySelector('pre') : null;
+      var code = pre ? pre.querySelector('code') : null;
+      if (code) {
+        var m = code.className.match(/language-([\w-]+)/);
+        if (m) lang = m[1];
+      }
+
+      // Clear header and rebuild as our titlebar.
+      // docmd-code-block-title already holds the filename (if set).
+      var titleEl = header.querySelector('.docmd-code-block-title');
+      var filename = titleEl ? titleEl.textContent : '';
+
+      // Strip everything in the header and rebuild
+      while (header.firstChild) header.removeChild(header.firstChild);
+      header.classList.add('summer-cb__titlebar');
+
+      // LEFT: icon + filename (if any) + lang pill
+      var left = document.createElement('div');
+      left.className = 'summer-cb__left';
+      left.appendChild(makeFileIcon());
+      if (filename) {
+        var fname = document.createElement('span');
+        fname.className = 'summer-cb__filename';
+        fname.textContent = filename;
+        left.appendChild(fname);
+      }
+      var pill = document.createElement('span');
+      pill.className = 'summer-cb__lang';
+      pill.textContent = lang || 'codeblock';
+      left.appendChild(pill);
+      header.appendChild(left);
+
+      // RIGHT: copy button (re-home from inner wrapper)
+      if (copyBtn) {
+        copyBtn.classList.add('summer-cb__copy');
+        header.appendChild(copyBtn);
+      }
+    });
+
+    // 2. Codeblocks WITHOUT a parser title — build our own titlebar.
+    $$('.code-wrapper').forEach(function (wrap) {
+      if (wrap.dataset.summerCbWired === '1') return;
+      // Skip ones already inside a parser wrapper (handled above).
+      if (wrap.closest('.docmd-code-block-wrapper')) {
+        wrap.dataset.summerCbWired = '1';
+        return;
+      }
+      wrap.dataset.summerCbWired = '1';
+
+      var pre = wrap.querySelector('pre');
+      var copyBtn = wrap.querySelector('.copy-code-button');
+      if (!pre) return;
+
+      // Read language from <code class="language-xxx">
+      var lang = '';
+      var code = pre.querySelector('code');
+      if (code) {
+        var m = code.className.match(/language-([\w-]+)/);
+        if (m) lang = m[1];
+      }
+
+      // Build header
+      var header = document.createElement('div');
+      header.className = 'summer-cb__titlebar';
+
+      // LEFT: icon + lang pill (filename omitted — no source title).
+      var left = document.createElement('div');
+      left.className = 'summer-cb__left';
+      left.appendChild(makeFileIcon());
+      var pill = document.createElement('span');
+      pill.className = 'summer-cb__lang';
+      pill.textContent = lang || 'codeblock';
+      left.appendChild(pill);
+      header.appendChild(left);
+
+      // RIGHT: copy button (re-home from wrapper bottom)
+      if (copyBtn) {
+        copyBtn.classList.add('summer-cb__copy');
+        wrap.removeChild(copyBtn);
+        header.appendChild(copyBtn);
+      }
+
+      // Insert header at the top of the wrapper
+      wrap.insertBefore(header, wrap.firstChild);
+      wrap.classList.add('summer-cb');
+    });
+  }
+
+  // Build a small file-icon SVG (shared by both codeblock paths above).
+  function makeFileIcon() {
+    var icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    icon.setAttribute('viewBox', '0 0 24 24');
+    icon.setAttribute('fill', 'none');
+    icon.setAttribute('stroke', 'currentColor');
+    icon.setAttribute('stroke-width', '2');
+    icon.setAttribute('stroke-linecap', 'round');
+    icon.setAttribute('stroke-linejoin', 'round');
+    icon.innerHTML = '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>';
+    return icon;
+  }
+
+  // -------- Init --------------------------------------------------------
+
+  // Re-runnable body of init logic. Idempotent: every wire is guarded
+  // with a data-attribute check so calling this twice is safe.
+  //
+  // Cross-cutting behaviour (theme toggle, sidebar drawer, version /
+  // project / language switchers, code-block copy, page copy, banner
+  // close, SPA router) is owned by packages/ui/assets/js/docmd-main.js,
+  // already loaded by templates/layout.ejs. What stays here is the
+  // summer-specific stuff: topbar search dropdown (re-homes the
+  // docmd-search.js modal into the topbar), TOC scroll-spy, git commit
+  // popover, scroll-to-top button, and relative-date rendering.
+  function summerInit() {
+    if (document.documentElement.dataset.summerWired !== '1') {
+      // First run: bind document-level listeners + topbar/footer wires
+      document.documentElement.dataset.summerWired = '1';
+      wireScrollToTop();
+      wireHeaderSearch();
+    }
+    // Per-page wires — always re-run after SPA nav (the page content
+    // was swapped). The header search is also re-attempted on every
+    // page so its polling can find a modal that didn't exist on the
+    // first page (e.g. when docmd-search.js loads lazily).
+    wireTocScrollSpy();
+    wireTocSmoothScroll();
+    summerCodeblocks();
+    wireGitPopover();
+    renderRelativeTimestamps();
+  }
+
+  ready(function () {
+    // Mark HTML as ready (reveal the page even if docmd core is slow to set data-theme)
+    document.documentElement.classList.add('summer-ready');
+    summerInit();
+    // Re-wire after SPA navigation (docmd core fires this on the document)
+    document.addEventListener('docmd:page-mounted', summerInit);
+  });
+})();

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * --------------------------------------------------------------------
+ * @docmd/template-summer
+ * A bright, hopeful, summer-feel layout for docmd 0.8.7+.
+ *
+ *   • Top:    logo + (new) centred search bar + menubar at the BOTTOM of the logo bar
+ *   • Side:   clean section list with icons
+ *   • Main:   airy content with right-rail TOC
+ *   • Below:  centred "last updated + edit" footer
+ *
+ * Implements the `template` plugin capability. Partial override set
+ * intentionally small — the resolver will fall back to the default
+ * for any slot not listed here.
+ *
+ * File-system layout: this package ships `.ejs`, `.css`, and `.js` files
+ * alongside the compiled JS. Path resolution uses `import.meta.url`
+ * (URL-relative) so the same code works in dev (`src/index.ts`) and
+ * after `tsc` (`dist/index.js`). The build step copies `templates/` and
+ * `assets/` into `dist/` so the URL math is identical in both places.
+ * --------------------------------------------------------------------
+ */
+import type { PluginDescriptor, PluginModule, TemplateHook, TemplateAssetHook } from '@docmd/api';
+export declare const plugin: PluginDescriptor;
+declare const summerTemplate: PluginModule & {
+    templates: TemplateHook[];
+    templateAssets: TemplateAssetHook[];
+};
+export default summerTemplate;