From 962edaa34bfef09972cb235132fec1aa250dbcba Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Mon, 9 Feb 2026 10:36:18 +1300
Subject: [PATCH] fix: Fix docs-viewer TOC, cache busting, and documentLoaded
 event

- Fix TOC field name mismatch: API returns title/slug but renderTOC
  read text/id, causing empty bullet points
- Dispatch documentLoaded event after async content loads so sidebar
  TOC rebuilds with actual headings
- Update cache-bust version strings to force fresh JS/CSS

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/docs-viewer.html                 | 16 ++++++++--------
 public/js/components/document-viewer.js | 10 ++++++++--
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/public/docs-viewer.html b/public/docs-viewer.html
index 245c7219..819712dc 100644
--- a/public/docs-viewer.html
+++ b/public/docs-viewer.html
@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Documentation - Tractatus Framework</title>
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1770452675442">
-  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1770452675442">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.3.1739079900">
+  <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.3.1739079900">
   <style>
     /* Prose styling for document content - uses plain CSS (not @apply, which is build-time only) */
     .prose h1 { font-size: 1.875rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: #111827; line-height: 1.2; }
@@ -77,12 +77,12 @@
   </div>
 
   <!-- Scripts -->
-  <script src="/js/utils/api.js?v=0.1.2.1770452675442"></script>
-  <script src="/js/utils/router.js?v=0.1.2.1770452675442"></script>
-  <script src="/js/components/document-viewer.js?v=0.1.2.1770452675442"></script>
-  <script src="/js/components/code-copy-button.js?v=0.1.2.1770452675442"></script>
-  <script src="/js/components/toc.js?v=0.1.2.1770452675442"></script>
-  <script src="/js/docs-viewer-app.js?v=0.1.2.1770452675442"></script>
+  <script src="/js/utils/api.js?v=0.1.3.1739079900"></script>
+  <script src="/js/utils/router.js?v=0.1.3.1739079900"></script>
+  <script src="/js/components/document-viewer.js?v=0.1.3.1739079900"></script>
+  <script src="/js/components/code-copy-button.js?v=0.1.3.1739079900"></script>
+  <script src="/js/components/toc.js?v=0.1.3.1739079900"></script>
+  <script src="/js/docs-viewer-app.js?v=0.1.3.1739079900"></script>
 
 </body>
 </html>
diff --git a/public/js/components/document-viewer.js b/public/js/components/document-viewer.js
index 8bbdbaab..9dfad116 100644
--- a/public/js/components/document-viewer.js
+++ b/public/js/components/document-viewer.js
@@ -92,6 +92,9 @@ class DocumentViewer {
 
     // Add smooth scroll to TOC links
     this.initializeTOCLinks();
+
+    // Notify TOC component that content has loaded
+    document.dispatchEvent(new Event('documentLoaded'));
   }
 
   /**
@@ -110,11 +113,14 @@ class DocumentViewer {
                                  item.level === 3 ? 'ml-8' :
                                  item.level === 4 ? 'ml-12' :
                                  'ml-16';
+              // Handle both API formats: {text, id} and {title, slug}
+              const itemText = item.text || item.title || '';
+              const itemId = item.id || item.slug || '';
               return `
                 <li class="${marginClass}">
-                  <a href="#${item.id}"
+                  <a href="#${itemId}"
                      class="text-blue-600 hover:text-blue-700 hover:underline">
-                    ${this.escapeHtml(item.text)}
+                    ${this.escapeHtml(itemText)}
                   </a>
                 </li>
               `;