pict-docuserve 0.0.5 → 0.0.7

package/dist/index.html

@@ -10,6 +10,8 @@
 
 		<!-- Application Stylesheet -->
 		<link href="css/docuserve.css" rel="stylesheet">
+		<!-- KaTeX stylesheet for LaTeX equation rendering -->
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css">
 		<!-- PICT Dynamic View CSS Container -->
 		<style id="PICT-CSS"></style>
 
@@ -26,6 +28,11 @@
 		<!-- The root container for the Pict application -->
 		<div id="Docuserve-Application-Container"></div>
 
+		<!-- Mermaid diagram rendering -->
+		<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+		<script>mermaid.initialize({ startOnLoad: false, theme: 'default' });</script>
+		<!-- KaTeX for LaTeX equation rendering -->
+		<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js"></script>
 		<!-- Load the Docuserve PICT Application Bundle -->
 		<script src="./pict-docuserve.min.js" type="text/javascript"></script>
 	</body>

package/dist/pict-docuserve.js

@@ -6252,6 +6252,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
             tmpContentView.displayContent(tmpDocProvider.getErrorPageHTML(pGroup + '/' + pModule));
             return;
           }
+          let tmpDocPath = pPath || 'README.md';
           tmpDocProvider.fetchDocument(tmpURL, (pError, pHTML) => {
             if (!pError) {
               tmpContentView.displayContent(pHTML);
@@ -6262,11 +6263,11 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
             // group/module/path as a relative path.  This handles cases
             // where the catalog contains entries (e.g. example apps)
             // that don't correspond to real GitHub repositories.
-            let tmpLocalPath = pGroup + '/' + pModule + '/' + (pPath || 'README.md');
+            let tmpLocalPath = pGroup + '/' + pModule + '/' + tmpDocPath;
             tmpDocProvider.fetchLocalDocument(tmpLocalPath, (pLocalError, pLocalHTML) => {
               tmpContentView.displayContent(pLocalHTML);
-            });
-          });
+            }, pGroup, pModule, tmpDocPath);
+          }, pGroup, pModule, tmpDocPath);
         }
 
         /**
@@ -6752,6 +6753,26 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           return false;
         }
 
+        /**
+         * Check whether a group key exists in the loaded catalog.
+         *
+         * Used to dynamically validate group keys instead of hardcoding them.
+         *
+         * @param {string} pGroupKey - The group key (e.g. "fable", "example_applications")
+         * @returns {boolean} True if the group is found in the catalog
+         */
+        isGroupInCatalog(pGroupKey) {
+          if (!this._Catalog || !this._Catalog.Groups) {
+            return false;
+          }
+          for (let i = 0; i < this._Catalog.Groups.length; i++) {
+            if (this._Catalog.Groups[i].Key === pGroupKey) {
+              return true;
+            }
+          }
+          return false;
+        }
+
         /**
          * Search the keyword index for documents matching a query.
          *
@@ -6951,8 +6972,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 
           // Check if it's a module path (group/module)
           if (tmpParts.length >= 2) {
-            let tmpGroupKeys = ['fable', 'meadow', 'orator', 'pict', 'utility'];
-            if (tmpGroupKeys.indexOf(tmpParts[0]) >= 0) {
+            if (this.isGroupInCatalog(tmpParts[0])) {
               return '#/doc/' + tmpPath;
             }
           }
@@ -7080,8 +7100,11 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
          *
          * @param {string} pURL - The URL to fetch
          * @param {Function} fCallback - Callback receiving (error, htmlContent)
+         * @param {string} [pCurrentGroup] - The current group key for link resolution
+         * @param {string} [pCurrentModule] - The current module name for link resolution
+         * @param {string} [pCurrentDocPath] - The current document path for link resolution
          */
-        fetchDocument(pURL, fCallback) {
+        fetchDocument(pURL, fCallback, pCurrentGroup, pCurrentModule, pCurrentDocPath) {
           let tmpCallback = typeof fCallback === 'function' ? fCallback : () => {};
           if (!pURL) {
             return tmpCallback('No URL provided', '');
@@ -7100,7 +7123,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
             if (!pMarkdown) {
               return tmpCallback('Document not found', this.getErrorPageHTML(pURL));
             }
-            let tmpHTML = this.parseMarkdown(pMarkdown);
+            let tmpHTML = this.parseMarkdown(pMarkdown, pCurrentGroup, pCurrentModule, pCurrentDocPath);
             this._ContentCache[pURL] = tmpHTML;
             return tmpCallback(null, tmpHTML);
           }).catch(pError => {
@@ -7114,11 +7137,14 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
          *
          * @param {string} pPath - The relative path (e.g. 'architecture.md')
          * @param {Function} fCallback - Callback receiving (error, htmlContent)
+         * @param {string} [pCurrentGroup] - The current group key for link resolution
+         * @param {string} [pCurrentModule] - The current module name for link resolution
+         * @param {string} [pCurrentDocPath] - The current document path for link resolution
          */
-        fetchLocalDocument(pPath, fCallback) {
+        fetchLocalDocument(pPath, fCallback, pCurrentGroup, pCurrentModule, pCurrentDocPath) {
           let tmpDocsBase = this.pict.AppData.Docuserve.DocsBaseURL || '';
           let tmpURL = tmpDocsBase + pPath;
-          this.fetchDocument(tmpURL, fCallback);
+          this.fetchDocument(tmpURL, fCallback, pCurrentGroup, pCurrentModule, pCurrentDocPath);
         }
 
         /**
@@ -7129,32 +7155,81 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
          * lists, blockquotes, and horizontal rules.
          *
          * @param {string} pMarkdown - The raw markdown text
+         * @param {string} [pCurrentGroup] - The current group key for link resolution
+         * @param {string} [pCurrentModule] - The current module name for link resolution
+         * @param {string} [pCurrentDocPath] - The current document path for link resolution
          * @returns {string} The parsed HTML
          */
-        parseMarkdown(pMarkdown) {
+        parseMarkdown(pMarkdown, pCurrentGroup, pCurrentModule, pCurrentDocPath) {
           if (!pMarkdown) {
             return '';
           }
           let tmpLines = pMarkdown.split('\n');
           let tmpHTML = [];
           let tmpInCodeBlock = false;
+          let tmpCodeFenceLength = 0;
           let tmpCodeLang = '';
           let tmpCodeLines = [];
           let tmpInList = false;
           let tmpListType = '';
           let tmpInBlockquote = false;
           let tmpBlockquoteLines = [];
+          let tmpInMathBlock = false;
+          let tmpMathLines = [];
           for (let i = 0; i < tmpLines.length; i++) {
             let tmpLine = tmpLines[i];
 
-            // Code blocks (fenced)
-            if (tmpLine.match(/^```/)) {
+            // Display math blocks ($$...$$) — skip if inside a code block
+            if (!tmpInCodeBlock && tmpLine.trim().match(/^\$\$/)) {
+              if (tmpInMathBlock) {
+                // End math block
+                tmpHTML.push('<div class="docuserve-katex-display">' + tmpMathLines.join('\n') + '</div>');
+                tmpInMathBlock = false;
+                tmpMathLines = [];
+              } else {
+                // Close any open list or blockquote
+                if (tmpInList) {
+                  tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
+                  tmpInList = false;
+                }
+                if (tmpInBlockquote) {
+                  tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</blockquote>');
+                  tmpInBlockquote = false;
+                  tmpBlockquoteLines = [];
+                }
+                tmpInMathBlock = true;
+              }
+              continue;
+            }
+            if (tmpInMathBlock) {
+              tmpMathLines.push(tmpLine);
+              continue;
+            }
+
+            // Code blocks (fenced) — track fence length so ````x```` nests around ```y```
+            let tmpFenceMatch = tmpLine.match(/^(`{3,})/);
+            if (tmpFenceMatch) {
+              let tmpFenceLen = tmpFenceMatch[1].length;
               if (tmpInCodeBlock) {
-                // End code block
-                tmpHTML.push('<pre><code class="language-' + this.escapeHTML(tmpCodeLang) + '">' + this.escapeHTML(tmpCodeLines.join('\n')) + '</code></pre>');
-                tmpInCodeBlock = false;
-                tmpCodeLang = '';
-                tmpCodeLines = [];
+                // Only close if the closing fence is at least as long as the opening
+                if (tmpFenceLen >= tmpCodeFenceLength && tmpLine.trim() === tmpFenceMatch[1]) {
+                  // End code block
+                  if (tmpCodeLang === 'mermaid') {
+                    // Mermaid diagrams: output raw content for client-side rendering
+                    tmpHTML.push('<pre class="mermaid">' + tmpCodeLines.join('\n') + '</pre>');
+                  } else {
+                    tmpHTML.push('<pre><code class="language-' + this.escapeHTML(tmpCodeLang) + '">' + this.escapeHTML(tmpCodeLines.join('\n')) + '</code></pre>');
+                  }
+                  tmpInCodeBlock = false;
+                  tmpCodeFenceLength = 0;
+                  tmpCodeLang = '';
+                  tmpCodeLines = [];
+                  continue;
+                } else {
+                  // Inner fence with fewer backticks — treat as content
+                  tmpCodeLines.push(tmpLine);
+                  continue;
+                }
               } else {
                 // Close any open list or blockquote
                 if (tmpInList) {
@@ -7162,15 +7237,16 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
                   tmpInList = false;
                 }
                 if (tmpInBlockquote) {
-                  tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n')) + '</blockquote>');
+                  tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</blockquote>');
                   tmpInBlockquote = false;
                   tmpBlockquoteLines = [];
                 }
-                // Start code block
-                tmpCodeLang = tmpLine.replace(/^```/, '').trim();
+                // Start code block — record fence length
+                tmpCodeFenceLength = tmpFenceLen;
+                tmpCodeLang = tmpLine.replace(/^`{3,}/, '').trim();
                 tmpInCodeBlock = true;
+                continue;
               }
-              continue;
             }
             if (tmpInCodeBlock) {
               tmpCodeLines.push(tmpLine);
@@ -7191,7 +7267,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
               tmpBlockquoteLines.push(tmpLine.replace(/^>\s?/, ''));
               continue;
             } else if (tmpInBlockquote) {
-              tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n')) + '</blockquote>');
+              tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</blockquote>');
               tmpInBlockquote = false;
               tmpBlockquoteLines = [];
             }
@@ -7214,7 +7290,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
                 tmpInList = false;
               }
               let tmpLevel = tmpHeadingMatch[1].length;
-              let tmpText = this.parseInline(tmpHeadingMatch[2]);
+              let tmpText = this.parseInline(tmpHeadingMatch[2], pCurrentGroup, pCurrentModule, pCurrentDocPath);
               let tmpID = tmpHeadingMatch[2].toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
               tmpHTML.push('<h' + tmpLevel + ' id="' + tmpID + '">' + tmpText + '</h' + tmpLevel + '>');
               continue;
@@ -7231,7 +7307,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
                 tmpInList = true;
                 tmpListType = 'ul';
               }
-              tmpHTML.push('<li>' + this.parseInline(tmpULMatch[2]) + '</li>');
+              tmpHTML.push('<li>' + this.parseInline(tmpULMatch[2], pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</li>');
               continue;
             }
 
@@ -7246,7 +7322,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
                 tmpInList = true;
                 tmpListType = 'ol';
               }
-              tmpHTML.push('<li>' + this.parseInline(tmpOLMatch[2]) + '</li>');
+              tmpHTML.push('<li>' + this.parseInline(tmpOLMatch[2], pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</li>');
               continue;
             }
 
@@ -7276,7 +7352,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
               });
               tmpTableHTML += '<thead><tr>';
               for (let h = 0; h < tmpHeaders.length; h++) {
-                tmpTableHTML += '<th>' + this.parseInline(tmpHeaders[h].trim()) + '</th>';
+                tmpTableHTML += '<th>' + this.parseInline(tmpHeaders[h].trim(), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</th>';
               }
               tmpTableHTML += '</tr></thead>';
 
@@ -7292,7 +7368,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
                 });
                 tmpTableHTML += '<tr>';
                 for (let c = 0; c < tmpCells.length; c++) {
-                  tmpTableHTML += '<td>' + this.parseInline(tmpCells[c].trim()) + '</td>';
+                  tmpTableHTML += '<td>' + this.parseInline(tmpCells[c].trim(), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</td>';
                 }
                 tmpTableHTML += '</tr>';
               }
@@ -7302,7 +7378,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
             }
 
             // Regular paragraph
-            tmpHTML.push('<p>' + this.parseInline(tmpLine) + '</p>');
+            tmpHTML.push('<p>' + this.parseInline(tmpLine, pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</p>');
           }
 
           // Close any trailing open elements
@@ -7310,7 +7386,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
             tmpHTML.push(tmpListType === 'ul' ? '</ul>' : '</ol>');
           }
           if (tmpInBlockquote) {
-            tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n')) + '</blockquote>');
+            tmpHTML.push('<blockquote>' + this.parseMarkdown(tmpBlockquoteLines.join('\n'), pCurrentGroup, pCurrentModule, pCurrentDocPath) + '</blockquote>');
           }
           if (tmpInCodeBlock) {
             tmpHTML.push('<pre><code>' + this.escapeHTML(tmpCodeLines.join('\n')) + '</code></pre>');
@@ -7322,9 +7398,12 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
          * Parse inline markdown elements (bold, italic, code, links, images).
          *
          * @param {string} pText - The text to parse
+         * @param {string} [pCurrentGroup] - The current group key for link resolution
+         * @param {string} [pCurrentModule] - The current module name for link resolution
+         * @param {string} [pCurrentDocPath] - The current document path for link resolution
          * @returns {string} HTML with inline elements
          */
-        parseInline(pText) {
+        parseInline(pText, pCurrentGroup, pCurrentModule, pCurrentDocPath) {
           if (!pText) {
             return '';
           }
@@ -7333,6 +7412,12 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           // Inline code (backticks) - handle first to avoid interfering with other patterns
           tmpResult = tmpResult.replace(/`([^`]+)`/g, '<code>$1</code>');
 
+          // Inline LaTeX equations ($...$) — must be processed before other inline patterns
+          // Match single $ delimiters that aren't adjacent to spaces (to avoid false positives with currency)
+          tmpResult = tmpResult.replace(/\$([^\$\s][^\$]*?[^\$\s])\$/g, '<span class="docuserve-katex-inline">$1</span>');
+          // Also match single-character inline math like $x$
+          tmpResult = tmpResult.replace(/\$([^\$\s])\$/g, '<span class="docuserve-katex-inline">$1</span>');
+
           // Images
           tmpResult = tmpResult.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
 
@@ -7340,7 +7425,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           tmpResult = tmpResult.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (pMatch, pLinkText, pHref) => {
             // Convert internal doc links to hash routes
             if (pHref.match(/^\//) || pHref.match(/^[^:]+\.md/)) {
-              let tmpRoute = this.convertDocLink(pHref);
+              let tmpRoute = this.convertDocLink(pHref, pCurrentGroup, pCurrentModule, pCurrentDocPath);
               return '<a href="' + tmpRoute + '">' + pLinkText + '</a>';
             }
             return '<a href="' + pHref + '" target="_blank" rel="noopener">' + pLinkText + '</a>';
@@ -7359,24 +7444,45 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         /**
          * Convert a docsify-style internal link to a hash route for docuserve.
          *
+         * When module context is provided, relative links (e.g. "api.md" or
+         * "./settings-manager.md") are resolved within the current module and
+         * document directory rather than falling back to the docs root.
+         *
          * @param {string} pHref - The original link href
+         * @param {string} [pCurrentGroup] - The current group key (e.g. "fable")
+         * @param {string} [pCurrentModule] - The current module name (e.g. "fable")
+         * @param {string} [pCurrentDocPath] - The current document path within the module (e.g. "services/README.md")
          * @returns {string} The converted hash route
          */
-        convertDocLink(pHref) {
+        convertDocLink(pHref, pCurrentGroup, pCurrentModule, pCurrentDocPath) {
+          // Strip leading ./ prefix for relative paths
+          let tmpPath = pHref.replace(/^\.\//, '');
           // Remove leading slash
-          let tmpPath = pHref.replace(/^\//, '');
+          tmpPath = tmpPath.replace(/^\//, '');
 
-          // If it looks like a module path (group/module/), convert to our route format
+          // If it looks like an absolute module path (group/module/...), route directly
           let tmpParts = tmpPath.split('/');
           if (tmpParts.length >= 2) {
-            // Check if first segment matches a known group key
-            let tmpGroupKeys = ['fable', 'meadow', 'orator', 'pict', 'utility'];
-            if (tmpGroupKeys.indexOf(tmpParts[0]) >= 0) {
+            if (this.isGroupInCatalog(tmpParts[0])) {
               return '#/doc/' + tmpPath;
             }
           }
 
-          // Local doc page
+          // If we have module context, resolve relative to current document's directory
+          if (pCurrentGroup && pCurrentModule) {
+            // Determine the directory of the current document
+            let tmpDocDir = '';
+            if (pCurrentDocPath) {
+              let tmpDirParts = pCurrentDocPath.split('/');
+              if (tmpDirParts.length > 1) {
+                tmpDirParts.pop(); // Remove filename
+                tmpDocDir = tmpDirParts.join('/') + '/';
+              }
+            }
+            return '#/doc/' + pCurrentGroup + '/' + pCurrentModule + '/' + tmpDocDir + tmpPath;
+          }
+
+          // Local doc page (no module context)
           if (tmpPath.match(/\.md$/)) {
             let tmpPageKey = tmpPath.replace(/\.md$/, '');
             return '#/page/' + tmpPageKey;
@@ -7414,7 +7520,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         DefaultRenderable: "Docuserve-Content-Display",
         DefaultDestinationAddress: "#Docuserve-Content-Container",
         AutoRender: false,
-        CSS: /*css*/"\n\t\t.docuserve-content {\n\t\t\tpadding: 2em 3em;\n\t\t\tmax-width: 900px;\n\t\t\tmargin: 0 auto;\n\t\t}\n\t\t.docuserve-content-loading {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: 200px;\n\t\t\tcolor: #999;\n\t\t\tfont-size: 1em;\n\t\t}\n\t\t.docuserve-content h1 {\n\t\t\tfont-size: 2em;\n\t\t\tcolor: #2c3e50;\n\t\t\tborder-bottom: 1px solid #eee;\n\t\t\tpadding-bottom: 0.3em;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t.docuserve-content h2 {\n\t\t\tfont-size: 1.5em;\n\t\t\tcolor: #2c3e50;\n\t\t\tborder-bottom: 1px solid #f0f0f0;\n\t\t\tpadding-bottom: 0.25em;\n\t\t\tmargin-top: 1.5em;\n\t\t}\n\t\t.docuserve-content h3 {\n\t\t\tfont-size: 1.25em;\n\t\t\tcolor: #333;\n\t\t\tmargin-top: 1.25em;\n\t\t}\n\t\t.docuserve-content h4, .docuserve-content h5, .docuserve-content h6 {\n\t\t\tcolor: #555;\n\t\t\tmargin-top: 1em;\n\t\t}\n\t\t.docuserve-content p {\n\t\t\tline-height: 1.7;\n\t\t\tcolor: #444;\n\t\t\tmargin: 0.75em 0;\n\t\t}\n\t\t.docuserve-content a {\n\t\t\tcolor: #42b983;\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.docuserve-content a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.docuserve-content pre {\n\t\t\tbackground: #2c3e50;\n\t\t\tcolor: #ecf0f1;\n\t\t\tpadding: 1.25em;\n\t\t\tborder-radius: 6px;\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: 0.9em;\n\t\t}\n\t\t.docuserve-content code {\n\t\t\tbackground: #f4f4f5;\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: #e74c3c;\n\t\t}\n\t\t.docuserve-content pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t}\n\t\t.docuserve-content blockquote {\n\t\t\tborder-left: 4px solid #42b983;\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em 1em;\n\t\t\tbackground: #f9f9f9;\n\t\t\tcolor: #666;\n\t\t}\n\t\t.docuserve-content blockquote p {\n\t\t\tmargin: 0.25em 0;\n\t\t}\n\t\t.docuserve-content ul, .docuserve-content ol {\n\t\t\tpadding-left: 2em;\n\t\t\tline-height: 1.8;\n\t\t}\n\t\t.docuserve-content li {\n\t\t\tmargin: 0.25em 0;\n\t\t\tcolor: #444;\n\t\t}\n\t\t.docuserve-content hr {\n\t\t\tborder: none;\n\t\t\tborder-top: 1px solid #eee;\n\t\t\tmargin: 2em 0;\n\t\t}\n\t\t.docuserve-content table {\n\t\t\twidth: 100%;\n\t\t\tborder-collapse: collapse;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.docuserve-content table th {\n\t\t\tbackground: #f5f7fa;\n\t\t\tborder: 1px solid #e0e0e0;\n\t\t\tpadding: 0.6em 0.8em;\n\t\t\ttext-align: left;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: #2c3e50;\n\t\t}\n\t\t.docuserve-content table td {\n\t\t\tborder: 1px solid #e0e0e0;\n\t\t\tpadding: 0.5em 0.8em;\n\t\t\tcolor: #444;\n\t\t}\n\t\t.docuserve-content table tr:nth-child(even) {\n\t\t\tbackground: #fafafa;\n\t\t}\n\t\t.docuserve-content img {\n\t\t\tmax-width: 100%;\n\t\t\theight: auto;\n\t\t}\n\t\t.docuserve-not-found {\n\t\t\ttext-align: center;\n\t\t\tpadding: 3em 1em;\n\t\t\tcolor: #666;\n\t\t}\n\t\t.docuserve-not-found h2 {\n\t\t\tcolor: #999;\n\t\t\tfont-size: 1.5em;\n\t\t\tborder-bottom: none;\n\t\t}\n\t\t.docuserve-not-found code {\n\t\t\tbackground: #f4f4f5;\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: #e74c3c;\n\t\t}\n\t",
+        CSS: /*css*/"\n\t\t.docuserve-content {\n\t\t\tpadding: 2em 3em;\n\t\t\tmax-width: 900px;\n\t\t\tmargin: 0 auto;\n\t\t}\n\t\t.docuserve-content-loading {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: 200px;\n\t\t\tcolor: #999;\n\t\t\tfont-size: 1em;\n\t\t}\n\t\t.docuserve-content h1 {\n\t\t\tfont-size: 2em;\n\t\t\tcolor: #2c3e50;\n\t\t\tborder-bottom: 1px solid #eee;\n\t\t\tpadding-bottom: 0.3em;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t.docuserve-content h2 {\n\t\t\tfont-size: 1.5em;\n\t\t\tcolor: #2c3e50;\n\t\t\tborder-bottom: 1px solid #f0f0f0;\n\t\t\tpadding-bottom: 0.25em;\n\t\t\tmargin-top: 1.5em;\n\t\t}\n\t\t.docuserve-content h3 {\n\t\t\tfont-size: 1.25em;\n\t\t\tcolor: #333;\n\t\t\tmargin-top: 1.25em;\n\t\t}\n\t\t.docuserve-content h4, .docuserve-content h5, .docuserve-content h6 {\n\t\t\tcolor: #555;\n\t\t\tmargin-top: 1em;\n\t\t}\n\t\t.docuserve-content p {\n\t\t\tline-height: 1.7;\n\t\t\tcolor: #444;\n\t\t\tmargin: 0.75em 0;\n\t\t}\n\t\t.docuserve-content a {\n\t\t\tcolor: #42b983;\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.docuserve-content a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.docuserve-content pre {\n\t\t\tbackground: #2c3e50;\n\t\t\tcolor: #ecf0f1;\n\t\t\tpadding: 1.25em;\n\t\t\tborder-radius: 6px;\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: 0.9em;\n\t\t}\n\t\t.docuserve-content code {\n\t\t\tbackground: #f4f4f5;\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: #e74c3c;\n\t\t}\n\t\t.docuserve-content pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t}\n\t\t.docuserve-content blockquote {\n\t\t\tborder-left: 4px solid #42b983;\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em 1em;\n\t\t\tbackground: #f9f9f9;\n\t\t\tcolor: #666;\n\t\t}\n\t\t.docuserve-content blockquote p {\n\t\t\tmargin: 0.25em 0;\n\t\t}\n\t\t.docuserve-content ul, .docuserve-content ol {\n\t\t\tpadding-left: 2em;\n\t\t\tline-height: 1.8;\n\t\t}\n\t\t.docuserve-content li {\n\t\t\tmargin: 0.25em 0;\n\t\t\tcolor: #444;\n\t\t}\n\t\t.docuserve-content hr {\n\t\t\tborder: none;\n\t\t\tborder-top: 1px solid #eee;\n\t\t\tmargin: 2em 0;\n\t\t}\n\t\t.docuserve-content table {\n\t\t\twidth: 100%;\n\t\t\tborder-collapse: collapse;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.docuserve-content table th {\n\t\t\tbackground: #f5f7fa;\n\t\t\tborder: 1px solid #e0e0e0;\n\t\t\tpadding: 0.6em 0.8em;\n\t\t\ttext-align: left;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: #2c3e50;\n\t\t}\n\t\t.docuserve-content table td {\n\t\t\tborder: 1px solid #e0e0e0;\n\t\t\tpadding: 0.5em 0.8em;\n\t\t\tcolor: #444;\n\t\t}\n\t\t.docuserve-content table tr:nth-child(even) {\n\t\t\tbackground: #fafafa;\n\t\t}\n\t\t.docuserve-content img {\n\t\t\tmax-width: 100%;\n\t\t\theight: auto;\n\t\t}\n\t\t.docuserve-content pre.mermaid {\n\t\t\tbackground: #fff;\n\t\t\tcolor: #333;\n\t\t\ttext-align: center;\n\t\t\tpadding: 1em;\n\t\t}\n\t\t.docuserve-content .docuserve-katex-display {\n\t\t\ttext-align: center;\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em;\n\t\t\toverflow-x: auto;\n\t\t}\n\t\t.docuserve-content .docuserve-katex-inline {\n\t\t\tdisplay: inline;\n\t\t}\n\t\t.docuserve-not-found {\n\t\t\ttext-align: center;\n\t\t\tpadding: 3em 1em;\n\t\t\tcolor: #666;\n\t\t}\n\t\t.docuserve-not-found h2 {\n\t\t\tcolor: #999;\n\t\t\tfont-size: 1.5em;\n\t\t\tborder-bottom: none;\n\t\t}\n\t\t.docuserve-not-found code {\n\t\t\tbackground: #f4f4f5;\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: #e74c3c;\n\t\t}\n\t",
         Templates: [{
           Hash: "Docuserve-Content-Template",
           Template: /*html*/"\n<div class=\"docuserve-content\" id=\"Docuserve-Content-Body\">\n\t<div class=\"docuserve-content-loading\">Loading documentation...</div>\n</div>\n"
@@ -7444,6 +7550,80 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
           if (tmpContentContainer) {
             tmpContentContainer.scrollTop = 0;
           }
+
+          // Post-render: initialize Mermaid diagrams if mermaid is available
+          this.renderMermaidDiagrams();
+
+          // Post-render: render KaTeX equations if katex is available
+          this.renderKaTeXEquations();
+        }
+
+        /**
+         * Render any Mermaid diagram blocks in the content area.
+         * Mermaid blocks are `<pre class="mermaid">` elements produced by parseMarkdown.
+         */
+        renderMermaidDiagrams() {
+          if (typeof mermaid === 'undefined') {
+            return;
+          }
+          let tmpContentBody = document.getElementById('Docuserve-Content-Body');
+          if (!tmpContentBody) {
+            return;
+          }
+          let tmpMermaidElements = tmpContentBody.querySelectorAll('pre.mermaid');
+          if (tmpMermaidElements.length < 1) {
+            return;
+          }
+
+          // mermaid.run() will process all pre.mermaid elements in the container
+          try {
+            mermaid.run({
+              nodes: tmpMermaidElements
+            });
+          } catch (pError) {
+            this.log.error('Mermaid rendering error: ' + pError.message);
+          }
+        }
+
+        /**
+         * Render KaTeX inline and display math elements in the content area.
+         * Inline: `<span class="docuserve-katex-inline">`
+         * Display: `<div class="docuserve-katex-display">`
+         */
+        renderKaTeXEquations() {
+          if (typeof katex === 'undefined') {
+            return;
+          }
+          let tmpContentBody = document.getElementById('Docuserve-Content-Body');
+          if (!tmpContentBody) {
+            return;
+          }
+
+          // Render inline math
+          let tmpInlineElements = tmpContentBody.querySelectorAll('.docuserve-katex-inline');
+          for (let i = 0; i < tmpInlineElements.length; i++) {
+            try {
+              katex.render(tmpInlineElements[i].textContent, tmpInlineElements[i], {
+                throwOnError: false,
+                displayMode: false
+              });
+            } catch (pError) {
+              this.log.warn('KaTeX inline error: ' + pError.message);
+            }
+          }
+
+          // Render display math
+          let tmpDisplayElements = tmpContentBody.querySelectorAll('.docuserve-katex-display');
+          for (let i = 0; i < tmpDisplayElements.length; i++) {
+            try {
+              katex.render(tmpDisplayElements[i].textContent, tmpDisplayElements[i], {
+                throwOnError: false,
+                displayMode: true
+              });
+            } catch (pError) {
+              this.log.warn('KaTeX display error: ' + pError.message);
+            }
+          }
         }
 
         /**
@@ -7650,10 +7830,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
         DefaultRenderable: "Docuserve-Sidebar-Content",
         DefaultDestinationAddress: "#Docuserve-Sidebar-Container",
         AutoRender: false,
-        CSS: /*css*/"\n\t\t.docuserve-sidebar {\n\t\t\tbackground-color: #f8f9fa;\n\t\t\tborder-right: 1px solid #e0e0e0;\n\t\t\tpadding: 1em 0;\n\t\t\theight: 100%;\n\t\t\tposition: relative;\n\t\t}\n\t\t.docuserve-sidebar-close {\n\t\t\tposition: absolute;\n\t\t\ttop: 0.5em;\n\t\t\tright: 0.5em;\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tcolor: #999;\n\t\t\tfont-size: 1.2em;\n\t\t\tcursor: pointer;\n\t\t\tpadding: 0.2em 0.4em;\n\t\t\tline-height: 1;\n\t\t}\n\t\t.docuserve-sidebar-close:hover {\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-search {\n\t\t\tpadding: 0 1em 1em 1em;\n\t\t\tborder-bottom: 1px solid #e9ecef;\n\t\t\tmargin-bottom: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-search input {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0.5em 0.75em;\n\t\t\tborder: 1px solid #ddd;\n\t\t\tborder-radius: 4px;\n\t\t\tfont-size: 0.85em;\n\t\t\toutline: none;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.docuserve-sidebar-search input:focus {\n\t\t\tborder-color: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-search-results {\n\t\t\tmargin-top: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-search-results a {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.4em 0.5em;\n\t\t\tcolor: #444;\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.82em;\n\t\t\tborder-radius: 3px;\n\t\t\ttransition: background-color 0.1s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-sidebar-search-results a:hover {\n\t\t\tbackground-color: #e9ecef;\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-search-result-title {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: #333;\n\t\t}\n\t\t.docuserve-sidebar-search-results a:hover .docuserve-sidebar-search-result-title {\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-search-result-meta {\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: #999;\n\t\t}\n\t\t.docuserve-sidebar-search-all {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.4em 0.5em;\n\t\t\tfont-size: 0.82em;\n\t\t\tcolor: #42b983;\n\t\t\ttext-decoration: none;\n\t\t\tfont-weight: 600;\n\t\t\tcursor: pointer;\n\t\t\tborder-top: 1px solid #e9ecef;\n\t\t\tmargin-top: 0.25em;\n\t\t\tpadding-top: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-search-all:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.docuserve-sidebar-home {\n\t\t\tpadding: 0.5em 1.25em;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 0.85em;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.03em;\n\t\t}\n\t\t.docuserve-sidebar-home a {\n\t\t\tcolor: #666;\n\t\t\ttext-decoration: none;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t}\n\t\t.docuserve-sidebar-home a:hover {\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-group {\n\t\t\tmargin-top: 0.25em;\n\t\t}\n\t\t.docuserve-sidebar-group-title {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.5em 1.25em;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 0.85em;\n\t\t\tcolor: #666;\n\t\t\ttext-decoration: none;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.03em;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t}\n\t\t.docuserve-sidebar-group-title:hover {\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-modules {\n\t\t\tlist-style: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\t.docuserve-sidebar-modules li {\n\t\t\tpadding: 0;\n\t\t}\n\t\t.docuserve-sidebar-modules a {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.3em 1.25em 0.3em 2em;\n\t\t\tcolor: #555;\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.85em;\n\t\t\ttransition: background-color 0.1s, color 0.1s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-sidebar-modules a:hover {\n\t\t\tbackground-color: #e9ecef;\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-modules a.active {\n\t\t\tcolor: #42b983;\n\t\t\tfont-weight: 600;\n\t\t\tbackground-color: #e8f5e9;\n\t\t}\n\t\t.docuserve-sidebar-modules .no-docs {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.3em 1.25em 0.3em 2em;\n\t\t\tcolor: #bbb;\n\t\t\tfont-size: 0.85em;\n\t\t}\n\t\t.docuserve-sidebar-module-nav {\n\t\t\tborder-top: 1px solid #e9ecef;\n\t\t\tmargin-top: 0.5em;\n\t\t\tpadding-top: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-module-nav-section {\n\t\t\tpadding: 0.4em 1.25em;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 0.8em;\n\t\t\tcolor: #888;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.02em;\n\t\t}\n\t\t.docuserve-sidebar-module-nav a {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.25em 1.25em 0.25em 2.25em;\n\t\t\tcolor: #555;\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.82em;\n\t\t\ttransition: background-color 0.1s, color 0.1s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-sidebar-module-nav a:hover {\n\t\t\tbackground-color: #e9ecef;\n\t\t\tcolor: #42b983;\n\t\t}\n\t",
+        CSS: /*css*/"\n\t\t.docuserve-sidebar {\n\t\t\tbackground-color: #f8f9fa;\n\t\t\tborder-right: 1px solid #e0e0e0;\n\t\t\tpadding: 1em 0;\n\t\t\tpadding-top: 0;\n\t\t\theight: 100%;\n\t\t\tposition: relative;\n\t\t}\n\t\t.docuserve-sidebar-header {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-end;\n\t\t\tpadding: 0.4em 0.5em 0;\n\t\t}\n\t\t.docuserve-sidebar-close {\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tcolor: #999;\n\t\t\tfont-size: 1.2em;\n\t\t\tcursor: pointer;\n\t\t\tpadding: 0.2em 0.4em;\n\t\t\tline-height: 1;\n\t\t}\n\t\t.docuserve-sidebar-close:hover {\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-search {\n\t\t\tpadding: 0 1em 1em 1em;\n\t\t\tborder-bottom: 1px solid #e9ecef;\n\t\t\tmargin-bottom: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-search input {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0.5em 0.75em;\n\t\t\tborder: 1px solid #ddd;\n\t\t\tborder-radius: 4px;\n\t\t\tfont-size: 0.85em;\n\t\t\toutline: none;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.docuserve-sidebar-search input:focus {\n\t\t\tborder-color: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-search-results {\n\t\t\tmargin-top: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-search-results a {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.4em 0.5em;\n\t\t\tcolor: #444;\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.82em;\n\t\t\tborder-radius: 3px;\n\t\t\ttransition: background-color 0.1s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-sidebar-search-results a:hover {\n\t\t\tbackground-color: #e9ecef;\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-search-result-title {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: #333;\n\t\t}\n\t\t.docuserve-sidebar-search-results a:hover .docuserve-sidebar-search-result-title {\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-search-result-meta {\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: #999;\n\t\t}\n\t\t.docuserve-sidebar-search-all {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.4em 0.5em;\n\t\t\tfont-size: 0.82em;\n\t\t\tcolor: #42b983;\n\t\t\ttext-decoration: none;\n\t\t\tfont-weight: 600;\n\t\t\tcursor: pointer;\n\t\t\tborder-top: 1px solid #e9ecef;\n\t\t\tmargin-top: 0.25em;\n\t\t\tpadding-top: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-search-all:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.docuserve-sidebar-home {\n\t\t\tpadding: 0.5em 1.25em;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 0.85em;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.03em;\n\t\t}\n\t\t.docuserve-sidebar-home a {\n\t\t\tcolor: #666;\n\t\t\ttext-decoration: none;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t}\n\t\t.docuserve-sidebar-home a:hover {\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-group {\n\t\t\tmargin-top: 0.25em;\n\t\t}\n\t\t.docuserve-sidebar-group-title {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.5em 1.25em;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 0.85em;\n\t\t\tcolor: #666;\n\t\t\ttext-decoration: none;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.03em;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t}\n\t\t.docuserve-sidebar-group-title:hover {\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-modules {\n\t\t\tlist-style: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\t.docuserve-sidebar-modules li {\n\t\t\tpadding: 0;\n\t\t}\n\t\t.docuserve-sidebar-modules a {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.3em 1.25em 0.3em 2em;\n\t\t\tcolor: #555;\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.85em;\n\t\t\ttransition: background-color 0.1s, color 0.1s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-sidebar-modules a:hover {\n\t\t\tbackground-color: #e9ecef;\n\t\t\tcolor: #42b983;\n\t\t}\n\t\t.docuserve-sidebar-modules a.active {\n\t\t\tcolor: #42b983;\n\t\t\tfont-weight: 600;\n\t\t\tbackground-color: #e8f5e9;\n\t\t}\n\t\t.docuserve-sidebar-modules .no-docs {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.3em 1.25em 0.3em 2em;\n\t\t\tcolor: #bbb;\n\t\t\tfont-size: 0.85em;\n\t\t}\n\t\t.docuserve-sidebar-module-nav {\n\t\t\tborder-top: 1px solid #e9ecef;\n\t\t\tmargin-top: 0.5em;\n\t\t\tpadding-top: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-module-nav-section {\n\t\t\tpadding: 0.4em 1.25em;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 0.8em;\n\t\t\tcolor: #888;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.02em;\n\t\t}\n\t\t.docuserve-sidebar-module-nav a {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.25em 1.25em 0.25em 2.25em;\n\t\t\tcolor: #555;\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.82em;\n\t\t\ttransition: background-color 0.1s, color 0.1s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-sidebar-module-nav a:hover {\n\t\t\tbackground-color: #e9ecef;\n\t\t\tcolor: #42b983;\n\t\t}\n\t",
         Templates: [{
           Hash: "Docuserve-Sidebar-Template",
-          Template: /*html*/"\n<div class=\"docuserve-sidebar\">\n\t<button class=\"docuserve-sidebar-close\" onclick=\"{~P~}.views['Docuserve-Sidebar'].toggleSidebar()\">&times;</button>\n\t<div id=\"Docuserve-Sidebar-Search\" class=\"docuserve-sidebar-search\" style=\"display:none;\">\n\t\t<input type=\"text\" placeholder=\"Search docs...\" id=\"Docuserve-Sidebar-Search-Input\">\n\t\t<div id=\"Docuserve-Sidebar-Search-Results\" class=\"docuserve-sidebar-search-results\"></div>\n\t</div>\n\t<div class=\"docuserve-sidebar-home\">\n\t\t<a onclick=\"{~P~}.PictApplication.navigateTo('/Home')\">Home</a>\n\t</div>\n\t<div id=\"Docuserve-Sidebar-Groups\"></div>\n\t<div id=\"Docuserve-Sidebar-ModuleNav\"></div>\n</div>\n"
+          Template: /*html*/"\n<div class=\"docuserve-sidebar\">\n\t<div class=\"docuserve-sidebar-header\">\n\t\t<button class=\"docuserve-sidebar-close\" onclick=\"{~P~}.views['Docuserve-Sidebar'].toggleSidebar()\">&times;</button>\n\t</div>\n\t<div id=\"Docuserve-Sidebar-Search\" class=\"docuserve-sidebar-search\" style=\"display:none;\">\n\t\t<input type=\"text\" placeholder=\"Search docs...\" id=\"Docuserve-Sidebar-Search-Input\">\n\t\t<div id=\"Docuserve-Sidebar-Search-Results\" class=\"docuserve-sidebar-search-results\"></div>\n\t</div>\n\t<div class=\"docuserve-sidebar-home\">\n\t\t<a onclick=\"{~P~}.PictApplication.navigateTo('/Home')\">Home</a>\n\t</div>\n\t<div id=\"Docuserve-Sidebar-Groups\"></div>\n\t<div id=\"Docuserve-Sidebar-ModuleNav\"></div>\n</div>\n"
         }],
         Renderables: [{
           RenderableHash: "Docuserve-Sidebar-Content",