@majeanson/lac 3.4.2 → 3.4.4

package/dist/index.mjs

@@ -21014,10 +21014,10 @@ function generateUserGuide(features, projectName) {
 	const draftCount = pages.filter((p) => p.feature.status === "draft").length;
 	const skippedCount = features.length - guideFeatures.length;
 	function navItem(p) {
-		return `<div class="nav-item" data-id="${esc(p.id)}" onclick="showPage('${esc(p.id)}')">
+		return `<a class="nav-item" data-id="${esc(p.id)}" href="#${esc(p.id)}">
       <div class="nav-item-dot ${esc(p.feature.status)}"></div>
       <span class="nav-item-name">${esc(p.feature.title)}</span>
-    </div>`;
+    </a>`;
 	}
 	const navGroupsHtml = domainOrder.map((domain) => {
 		const domainPages = pages.filter((p) => p.domain === domain);
@@ -21034,13 +21034,13 @@ function generateUserGuide(features, projectName) {
       </div>
     </div>`;
 	}).join("\n    ");
-	const tocCardsHtml = pages.map((p) => `<div class="toc-card" onclick="showPage('${esc(p.id)}')">
+	const tocCardsHtml = pages.map((p) => `<a class="toc-card" href="#${esc(p.id)}">
       <div class="toc-pip" style="background:${p.color}"></div>
       <div>
         <div class="toc-card-title">${esc(p.feature.title)}</div>
         <div class="toc-card-sub">${esc(p.domain.replace(/-/g, " "))} · <span style="color:var(--status-${esc(p.feature.status)})">${esc(p.feature.status)}</span></div>
       </div>
-    </div>`).join("\n        ");
+    </a>`).join("\n        ");
 	const statCardsHtml = [
 		{
 			num: pages.length,
@@ -21213,6 +21213,7 @@ body {
 .nav-item {
   display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 24px;
   cursor: pointer; border-left: 2px solid transparent; transition: background 0.1s;
+  text-decoration: none;
 }
 .nav-item:hover { background: var(--bg-hover); }
 .nav-item.active { background: var(--bg-active); border-left-color: var(--accent); }
@@ -21243,7 +21244,7 @@ body {
 .stat-lbl     { font-size: 11px; color: var(--text-soft); margin-top: 4px; }
 .section-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
 .toc-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
-.toc-card  { padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; align-items: flex-start; gap: 10px; }
+.toc-card  { padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; align-items: flex-start; gap: 10px; text-decoration: none; }
 .toc-card:hover { background: var(--bg-hover); border-color: var(--text-soft); }
 .toc-pip   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
 .toc-card-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
@@ -21380,13 +21381,23 @@ function showPage(id) {
 }
 // init
 document.querySelectorAll('.feature-page').forEach(p => p.classList.add('hidden'));
-// Hash routing: navigate to feature on load if hash is present
+// Navigate to feature on page load if hash is present
 (function() {
   var hash = window.location.hash.slice(1);
   if (hash) { showPage(hash); }
 })();
-// Hash routing: respond to browser back/forward navigation
-window.addEventListener('hashchange', function() {
+// Click delegation — catch clicks on any element with data-id (nav items, TOC cards)
+document.addEventListener('click', function(e) {
+  var el = e.target.closest('[data-id]');
+  if (!el) return;
+  var id = el.dataset.id;
+  if (!id) return;
+  e.preventDefault();
+  showPage(id);
+  history.pushState(null, '', '#' + id);
+});
+// Browser back/forward navigation
+window.addEventListener('popstate', function() {
   var hash = window.location.hash.slice(1);
   showPage(hash || 'home');
 });